From be2de6610b73f6e6bbb90d7c7648ab9c4eac89a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E9=B1=BC=E7=83=A7=E3=80=82?= <827265905@qq.com>
Date: Thu, 6 Jun 2024 14:24:20 +0800
Subject: [PATCH] =?UTF-8?q?feat(feat):=20"=E4=BC=98=E5=8C=96=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=AE=BE=E8=AE=A1=E5=99=A8"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/packages/GDesigner/GDesigner.vue      | 17 ++++++---
 .../GDesigner/components/eleOptions/index.vue | 38 +++++++++++++++++++
 .../components/pageOptions/index.vue          | 22 +++++++++++
 .../src/packages/GDesigner/use/useEvents.ts   |  1 +
 packages/grow_up_admin/mock/menu/index.ts     |  4 +-
 5 files changed, 74 insertions(+), 8 deletions(-)
 create mode 100644 packages/grow_designer/src/packages/GDesigner/components/eleOptions/index.vue
 create mode 100644 packages/grow_designer/src/packages/GDesigner/components/pageOptions/index.vue

diff --git a/packages/grow_designer/src/packages/GDesigner/GDesigner.vue b/packages/grow_designer/src/packages/GDesigner/GDesigner.vue
index e3a8e5c..f2ed77a 100644
--- a/packages/grow_designer/src/packages/GDesigner/GDesigner.vue
+++ b/packages/grow_designer/src/packages/GDesigner/GDesigner.vue
@@ -90,7 +90,7 @@
                      @dragstart="onGenerateKey"/>
         </div>
       </div>
-      <div class="flex-1 bg-BG_COLOR2">
+      <div class="flex-1 bg-BG_COLOR2 relative">
         <el-scrollbar class="h-full draggable-content">
           <DraggableView :draggableConfig="draggableConfig"
                          @add="onDraggableViewAdd"
@@ -99,12 +99,15 @@
                          @delete="onDeleteItem"
                          @copy="onCopyItem"/>
         </el-scrollbar>
+        <div class="text-gray-400 absolute top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%] leading-full pointer-events-none text-center text-[24px]"
+             v-if="!draggableConfig.structures.length">请从左侧组件库中拖入对应组件</div>
       </div>
-      <div class="grow-0 shrink-0 w-[300px] bg-BG_COLOR3 border-l-[1px] border-BORDER_COLOR2 border-solid">
-        <ElScrollbar class="h-full">
-          配置区域
-          {{ activeUUID }}
-        </ElScrollbar>
+      <div class="grow-0 shrink-0 w-[300px] bg-BG_COLOR3 border-l-[1px] border-BORDER_COLOR2 border-solid"
+          @click.stop>
+        <EleOptions :activeUUID="activeUUID"
+                    :config="draggableConfig"
+                    v-if="activeUUID"/>
+        <PageOptions v-if="!activeUUID"/>
       </div>
     </div>
 
@@ -114,6 +117,8 @@
 <script setup lang="ts">
 import { FlowLogsVpc, Close, DataBase, TreeView } from "@vicons/carbon";
 import DraggableView from "./components/draggableView/index.vue";
+import EleOptions from "./components/eleOptions/index.vue";
+import PageOptions from "./components/pageOptions/index.vue";
 
 import { useOption } from "./use/useOption";
 import { useEvents } from "./use/useEvents";
diff --git a/packages/grow_designer/src/packages/GDesigner/components/eleOptions/index.vue b/packages/grow_designer/src/packages/GDesigner/components/eleOptions/index.vue
new file mode 100644
index 0000000..b0a6943
--- /dev/null
+++ b/packages/grow_designer/src/packages/GDesigner/components/eleOptions/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="h-full flex flex-col">
+    <h5 class="text-[14px] p-[10px] bg-BG_COLOR2">组件配置</h5>
+    <div class="px-[5px] shrink-0 grow-0">
+      <ElTabs v-model="tabModel" stretch>
+        <ElTabPane label="属性" name="props"/>
+        <ElTabPane label="样式" name="styles"/>
+        <ElTabPane label="事件" name="events"/>
+        <ElTabPane label="高级" name="renderArgument"/>
+      </ElTabs>
+    </div>
+    <ElScrollbar class="h-full flex-1">
+      <p class="p-[10px] text-center">用爱发电中...😊</p>
+      {{ config[tabModel][activeUUID] }}
+    </ElScrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: "eleOptions" });
+import { toRefs, ref } from "vue";
+
+const props = defineProps({
+  activeUUID: {
+    type: String,
+    required: true
+  },
+  config: {
+    type: Object,
+    required: true
+  }
+});
+
+const { activeUUID, config } = toRefs(props);
+const tabModel = ref("props");
+
+// console.log( activeUUID, config);
+</script>
diff --git a/packages/grow_designer/src/packages/GDesigner/components/pageOptions/index.vue b/packages/grow_designer/src/packages/GDesigner/components/pageOptions/index.vue
new file mode 100644
index 0000000..7f25c71
--- /dev/null
+++ b/packages/grow_designer/src/packages/GDesigner/components/pageOptions/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="h-full flex flex-col">
+    <h5 class="text-[14px] p-[10px] bg-BG_COLOR2">页面配置</h5>
+    <div class="px-[5px] shrink-0 grow-0">
+      <ElTabs v-model="tabModel" stretch>
+        <ElTabPane label="属性" name="props"/>
+        <ElTabPane label="高级" name="renderArgument"/>
+      </ElTabs>
+    </div>
+    <ElScrollbar class="h-full flex-1">
+      <p class="p-[10px] text-center">用爱发电中...😊</p>
+    </ElScrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: "pageOptions" });
+import { ref } from "vue";
+
+const tabModel = ref("props");
+
+</script>
diff --git a/packages/grow_designer/src/packages/GDesigner/use/useEvents.ts b/packages/grow_designer/src/packages/GDesigner/use/useEvents.ts
index de01863..06785b2 100644
--- a/packages/grow_designer/src/packages/GDesigner/use/useEvents.ts
+++ b/packages/grow_designer/src/packages/GDesigner/use/useEvents.ts
@@ -80,6 +80,7 @@ export const useEvents = ({
       Reflect.deleteProperty(draggableConfig.renderArgument, item);
     }
     draggableConfig.structures = deleteByUUID(draggableConfig.structures, event.uuid);
+    activeUUID.value = "";
   };
 
   const copyObjectConfig = (oldUUID) => {
diff --git a/packages/grow_up_admin/mock/menu/index.ts b/packages/grow_up_admin/mock/menu/index.ts
index 2f7a1f1..399c70a 100644
--- a/packages/grow_up_admin/mock/menu/index.ts
+++ b/packages/grow_up_admin/mock/menu/index.ts
@@ -68,7 +68,7 @@ const menuList = [
       {
         label: "折叠列表",
         name: "OverflowList",
-        icon: "PanelExpansion",
+        icon: "FolderDetailsReference",
         path: "OverflowList",
         component: "Feat/OverflowList/index.vue"
       }
@@ -257,7 +257,7 @@ const menuDataList: any[] = [
         menuType: "1",
         label: "折叠列表",
         name: "OverflowList",
-        icon: "PanelExpansion",
+        icon: "FolderDetailsReference",
         path: "OverflowList",
         component: "Feat/OverflowList/index.vue",
         hidden: true,