Merge pull request #77 from ZhQuella/main-feat/workflow

feat(feat): "优化页面设计器"
ZhQuella · Jun 6, 2024 · 81ae1ea · 81ae1ea
2 parents 11af8d1 + be2de66
commit 81ae1ea
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,