Procházet zdrojové kódy

feat: 完善右键菜单功能

jiaxing.liao před 1 měsícem
rodič
revize
0aca436f14

+ 11 - 0
src/renderer/src/lvgl-widgets/assets/icon/icon_3矩阵按钮.svg

@@ -0,0 +1,11 @@
+<svg width="80" height="52" viewBox="0 0 80 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6" y="7" width="21" height="10" rx="2" fill="#CACACA"/>
+<rect x="6" y="21" width="21" height="10" rx="2" fill="#CACACA"/>
+<rect x="6" y="35" width="21" height="10" rx="2" fill="#CACACA"/>
+<rect x="30" y="7" width="21" height="10" rx="2" fill="#CACACA"/>
+<rect x="30" y="21" width="21" height="10" rx="2" fill="#CACACA"/>
+<rect x="30" y="35" width="21" height="10" rx="2" fill="#CACACA"/>
+<rect x="54" y="7" width="21" height="10" rx="2" fill="#CACACA"/>
+<rect x="54" y="21" width="21" height="10" rx="2" fill="#CACACA"/>
+<rect x="54" y="35" width="21" height="10" rx="2" fill="#CACACA"/>
+</svg>

+ 15 - 10
src/renderer/src/store/modules/action.ts

@@ -237,11 +237,13 @@ export const useActionStore = defineStore('action', () => {
     if (!widgetIds.length) return
 
     projectStore.project?.screens.forEach((screen) => {
-      bfsWalk(screen.pages, (child) => {
-        const index = child?.children?.findIndex((item) => widgetIds.includes(item.id)) ?? -1
-        if (index !== -1) {
-          child.children.splice(index, 1)
-        }
+      screen.pages.forEach((page) => {
+        bfsWalk(page, (child) => {
+          const index = child?.children?.findIndex((item) => widgetIds.includes(item.id)) ?? -1
+          if (index !== -1) {
+            child.children.splice(index, 1)
+          }
+        })
       })
     })
   }
@@ -303,16 +305,19 @@ export const useActionStore = defineStore('action', () => {
     if (!clipboard.value?.length) return
 
     const list = projectStore.activeWidgets?.[0]?.children || projectStore.activePage?.children
+    const newArr: BaseWidget[] = []
     clipboard.value.forEach((obj) => {
-      obj.x += 10
-      obj.y += 10
-      const newWidget = klona(obj)
-      list.unshift({
-        ...newWidget,
+      obj.props.x += 10
+      obj.props.y += 10
+      const newWidget = klona({
+        ...obj,
         id: v4(),
         events: []
       })
+      list.unshift(newWidget)
+      newArr.push(newWidget)
     })
+    projectStore.setSelectWidgets(newArr)
   }
 
   /**

+ 100 - 9
src/renderer/src/views/designer/workspace/stage/ContentMenu.vue

@@ -15,12 +15,15 @@
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item
-          v-for="item in widgetMenus"
+          v-for="item in widgetType === 'page' ? pageMenus : widgetMenus"
           :icon="item.icon"
           :divided="item.divider"
           @click="item.onclick"
         >
-          {{ item.label }}
+          <div class="flex-1 flex items-center justify-between">
+            <span>{{ item.label }}</span>
+            <span class="text-10px text-text-secondary">{{ item.fastKey }}</span>
+          </div>
         </el-dropdown-item>
       </el-dropdown-menu>
     </template>
@@ -51,6 +54,7 @@ import { useActionStore } from '@/store/modules/action'
 
 defineProps<{
   virtualRef: any
+  widgetType: 'page' | 'widget'
 }>()
 
 const dropdownRef = ref<DropdownInstance>()
@@ -58,28 +62,67 @@ const dropdownRef = ref<DropdownInstance>()
 const actionStore = useActionStore()
 
 const widgetMenus = [
-  { label: '复制', value: 'copy', icon: LuCopy, onclick: () => actionStore.onCopy() },
-  { label: '复用', value: 'duplicate', icon: LuCopyPlus, onclick: () => actionStore.onCopyFrom() },
-  { label: '剪切', value: 'cut', icon: LuScissors, onclick: () => actionStore.onCut() },
-  { label: '粘贴', value: 'paste', icon: LuClipboard, onclick: () => actionStore.onPaste() },
+  {
+    label: '复制',
+    value: 'copy',
+    fastKey: 'Ctrl+C',
+    icon: LuCopy,
+    onclick: () => actionStore.onCopy()
+  },
+  {
+    label: '复用',
+    value: 'duplicate',
+    fastKey: 'Ctrl+D',
+    icon: LuCopyPlus,
+    onclick: () => actionStore.onCopyFrom()
+  },
+  {
+    label: '剪切',
+    value: 'cut',
+    fastKey: 'Ctrl+X',
+    icon: LuScissors,
+    onclick: () => actionStore.onCut()
+  },
+  {
+    label: '粘贴',
+    value: 'paste',
+    fastKey: 'Ctrl+V',
+    icon: LuClipboard,
+    onclick: () => actionStore.onPaste()
+  },
   {
     label: '删除',
     value: 'delete',
+    fastKey: 'Delete/Backspace',
     icon: LuTrash2,
     divider: true,
     onclick: () => actionStore.onDelete()
   },
-  { label: '隐藏', value: 'hidden', icon: LuEyeOff, onclick: () => actionStore.onHidden(true) },
-  { label: '锁定', value: 'locked', icon: LuLock, onclick: () => actionStore.onLock(true) },
+  {
+    label: '隐藏',
+    value: 'hidden',
+    fastKey: 'Ctrl+H',
+    icon: LuEyeOff,
+    onclick: () => actionStore.onHidden(true)
+  },
+  {
+    label: '锁定',
+    value: 'locked',
+    fastKey: 'Ctrl+L',
+    icon: LuLock,
+    onclick: () => actionStore.onLock(true)
+  },
   {
     label: '解锁',
     value: 'unlock',
+    fastKey: 'Ctrl+Shift+L',
     icon: LuUnlock,
     onclick: () => actionStore.onLock(false)
   },
   {
     label: '上移一层',
     value: 'up',
+    fastKey: 'Ctrl+Up',
     icon: LuArrowUp,
     divider: true,
     onclick: () => actionStore.onLevel('up')
@@ -87,19 +130,67 @@ const widgetMenus = [
   {
     label: '下移一层',
     value: 'down',
+    fastKey: 'Ctrl+Down',
     icon: LuArrowDown,
     onclick: () => actionStore.onLevel('down')
   },
-  { label: '置顶', value: 'top', icon: LuArrowUpToLine, onclick: () => actionStore.onLevel('top') },
+  {
+    label: '置顶',
+    value: 'top',
+    fastKey: 'Ctrl+Shift+Up',
+    icon: LuArrowUpToLine,
+    onclick: () => actionStore.onLevel('top')
+  },
   {
     label: '置底',
     value: 'bottom',
+    fastKey: 'Ctrl+Shift+Down',
     icon: LuArrowDownToLine,
     onclick: () => actionStore.onLevel('bottom')
   },
   {
     label: '添加事件',
     value: 'event',
+    fastKey: '',
+    icon: LuZap,
+    divider: true,
+    onclick: () => actionStore.onShowEvent()
+  }
+]
+
+const pageMenus = [
+  {
+    label: '粘贴',
+    value: 'paste',
+    fastKey: 'Ctrl+V',
+    icon: LuClipboard,
+    onclick: () => actionStore.onPaste()
+  },
+  {
+    label: '隐藏',
+    value: 'hidden',
+    fastKey: 'Ctrl+H',
+    icon: LuEyeOff,
+    onclick: () => actionStore.onHidden(true)
+  },
+  {
+    label: '锁定',
+    value: 'locked',
+    fastKey: 'Ctrl+L',
+    icon: LuLock,
+    onclick: () => actionStore.onLock(true)
+  },
+  {
+    label: '解锁',
+    value: 'unlock',
+    fastKey: 'Ctrl+Shift+L',
+    icon: LuUnlock,
+    onclick: () => actionStore.onLock(false)
+  },
+  {
+    label: '添加事件',
+    value: 'event',
+    fastKey: '',
     icon: LuZap,
     divider: true,
     onclick: () => actionStore.onShowEvent()

+ 5 - 1
src/renderer/src/views/designer/workspace/stage/Node.vue

@@ -60,7 +60,11 @@
     />
   </div>
   <!-- 右键菜单 -->
-  <ContentMenu ref="contentMenuRef" :virtualRef="triggerRef" />
+  <ContentMenu
+    ref="contentMenuRef"
+    :virtualRef="triggerRef"
+    :widgetType="schema.type === 'page' ? 'page' : 'widget'"
+  />
 </template>
 
 <script setup lang="ts">