feat(projects): 工作台部分组件调成真实数据

src/views/workbench/modules/workbench-shortcut.vue

@@ -5,28 +5,28 @@ import { objectContextDomainConfigs } from '@/constants/object-context';
 import { useRouteStore } from '@/store/modules/route';
 import { useWorkbenchStore } from '@/store/modules/workbench';
 import { useRouterPush } from '@/hooks/common/router';
+import { useWorkbenchRefresh } from '../composables/use-workbench-refresh';
 import WorkbenchModuleCard from './workbench-module-card.vue';
 import WorkbenchShortcutPicker from './workbench-shortcut-picker.vue';
 
 interface Props {
   editing?: boolean;
-  collapsed?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
-  editing: false,
-  collapsed: false
+  editing: false
 });
 
 defineEmits<{
   (e: 'hide'): void;
-  (e: 'toggle-collapse'): void;
 }>();
 
 const routeStore = useRouteStore();
 const workbench = useWorkbenchStore();
 const { routerPushByKey } = useRouterPush();
 
+const { loading, refresh } = useWorkbenchRefresh();
+
 interface FlatMenu {
   key: string;
   label: string;
@@ -78,22 +78,26 @@ function handleClick(key: string) {
 function handleConfirm(keys: string[]) {
   workbench.updateModuleSettings('shortcut', { menuKeys: keys });
 }
+
+function handleRemove(key: string) {
+  workbench.updateModuleSettings('shortcut', { menuKeys: selectedKeys.value.filter(k => k !== key) });
+}
 </script>
 
 <template>
   <WorkbenchModuleCard
+    v-loading="loading"
     title="快捷入口"
     icon="mdi:rocket-launch-outline"
     :badge-count="selected.length || undefined"
     :editing="editing"
-    :collapsed="collapsed"
     has-settings
     @hide="$emit('hide')"
-    @toggle-collapse="$emit('toggle-collapse')"
     @open-settings="openPicker"
+    @refresh="refresh"
   >
     <div v-if="selected.length === 0" class="shortcut-empty">
-      <ElEmpty description="还未选择菜单" :image-size="60">
+      <ElEmpty description="还未选择菜单" :image-size="48">
         <ElButton type="primary" size="small" @click="openPicker">+ 选择菜单</ElButton>
       </ElEmpty>
     </div>
@@ -104,6 +108,9 @@ function handleConfirm(keys: string[]) {
         </ElIcon>
         <SvgIcon v-else icon="mdi:link-variant" class="shortcut-item__icon" />
         <span class="shortcut-item__label">{{ item.label }}</span>
+        <span class="shortcut-item__remove" title="移除此快捷入口" @click.stop="handleRemove(item.key)">
+          <SvgIcon icon="mdi:close" />
+        </span>
       </button>
       <button class="shortcut-item shortcut-item--add" title="添加快捷入口" @click="openPicker">
         <SvgIcon icon="mdi:plus" />
@@ -120,9 +127,14 @@ function handleConfirm(keys: string[]) {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
   gap: 10px;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  align-content: start;
 }
 
 .shortcut-item {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -137,6 +149,34 @@ function handleConfirm(keys: string[]) {
   transition: all 120ms;
 }
 
+.shortcut-item__remove {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  opacity: 0;
+  transition:
+    opacity 120ms,
+    color 120ms,
+    background-color 120ms;
+}
+
+.shortcut-item:hover .shortcut-item__remove {
+  opacity: 1;
+}
+
+.shortcut-item__remove:hover {
+  background-color: var(--el-color-danger-light-9);
+  color: var(--el-color-danger);
+}
+
 .shortcut-item__icon {
   font-size: 20px;
   color: var(--el-color-primary);
@@ -169,6 +209,15 @@ function handleConfirm(keys: string[]) {
 }
 
 .shortcut-empty {
-  padding: 20px 0;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 压缩 ElEmpty 默认大 padding，空态在最小高度下也不溢出 */
+.shortcut-empty :deep(.el-empty) {
+  padding: 12px 0;
 }
 </style>