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

src/views/workbench/index.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
 import { onBeforeRouteLeave } from 'vue-router';
 import { ElMessageBox } from 'element-plus';
+import { GridItem, GridLayout } from 'grid-layout-plus';
 import { useWorkbenchStore } from '@/store/modules/workbench';
-import {
-  type WorkbenchColumnId,
-  type WorkbenchModuleKey,
-  useWorkbenchModules
-} from './composables/use-workbench-modules';
+import { type WorkbenchModuleKey, useWorkbenchModules } from './composables/use-workbench-modules';
+import type { WorkbenchGridItem } from './composables/workbench-layout-types';
 import WorkbenchBanner from './modules/workbench-banner.vue';
-import WorkbenchColumn from './modules/workbench-column.vue';
 import WorkbenchEditOverlay from './modules/workbench-edit-overlay.vue';
 import WorkbenchModuleLibrary from './modules/workbench-module-library.vue';
 // 保留 6 个 + 重构 2 个（key 沿用）
@@ -22,11 +19,10 @@ import WorkbenchMyExecution from './modules/workbench-my-execution.vue';
 import WorkbenchProductSnapshot from './modules/workbench-product-snapshot.vue';
 import WorkbenchTeamLoad from './modules/workbench-team-load.vue';
 import WorkbenchMyWeekWorklog from './modules/workbench-my-week-worklog.vue';
-import WorkbenchNoticeNotification from './modules/workbench-notice-notification.vue';
 
 defineOptions({ name: 'Workbench' });
 
-const { registerModuleComponent } = useWorkbenchModules();
+const { registerModuleComponent, getModuleMeta } = useWorkbenchModules();
 // 保留 6 个 + 重构 2 个
 registerModuleComponent('myTodo', WorkbenchTodoPanel);
 registerModuleComponent('myProject', WorkbenchProjectGrid);
@@ -37,7 +33,6 @@ registerModuleComponent('myExecution', WorkbenchMyExecution);
 registerModuleComponent('productSnapshot', WorkbenchProductSnapshot);
 registerModuleComponent('teamLoad', WorkbenchTeamLoad);
 registerModuleComponent('myWeekWorklog', WorkbenchMyWeekWorklog);
-registerModuleComponent('noticeNotification', WorkbenchNoticeNotification);
 
 const workbench = useWorkbenchStore();
 const libraryOpen = ref(false);
@@ -65,8 +60,10 @@ watch(
   }
 );
 
-function onColumnUpdate(columnId: WorkbenchColumnId, modules: WorkbenchModuleKey[]) {
-  workbench.setColumnModules(columnId, modules);
+const editing = computed(() => workbench.mode === 'editing');
+
+function onGridUpdated(grid: WorkbenchGridItem[]) {
+  workbench.updateGrid(grid);
 }
 
 async function handleReset() {
@@ -107,30 +104,51 @@ onBeforeRouteLeave(async (_to, _from, next) => {
       @open-library="libraryOpen = true"
     />
 
-    <ElEmpty v-if="workbench.layout.columns.every(c => c.modules.length === 0)" description="还没有可见模块">
+    <ElEmpty v-if="workbench.layout.grid.length === 0" description="还没有可见模块">
       <ElButton type="primary" @click="workbench.enterEditing">添加模块</ElButton>
     </ElEmpty>
 
-    <section v-else class="workbench__main">
-      <WorkbenchColumn
-        v-for="col in workbench.layout.columns"
-        :key="col.id"
-        :column-id="col.id"
-        :modules="col.modules"
-        :editing="workbench.mode === 'editing'"
-        :collapsed="workbench.layout.collapsed"
-        @update:modules="onColumnUpdate(col.id, $event)"
-        @hide="workbench.hideModule"
-        @toggle-collapse="workbench.toggleCollapse"
-      />
-    </section>
+    <div v-else class="workbench__main">
+      <GridLayout
+        :layout="workbench.layout.grid"
+        :col-num="12"
+        :row-height="10"
+        :margin="[16, 16]"
+        :is-draggable="editing"
+        :is-resizable="editing"
+        :vertical-compact="true"
+        :use-css-transforms="true"
+        @layout-updated="onGridUpdated"
+      >
+        <GridItem
+          v-for="item in workbench.layout.grid"
+          :key="item.i"
+          :i="item.i"
+          :x="item.x"
+          :y="item.y"
+          :w="item.w"
+          :h="item.h"
+          :min-w="item.minW"
+          :min-h="item.minH"
+          drag-allow-from=".module-card__head"
+        >
+          <component
+            :is="getModuleMeta(item.i)?.component"
+            :module-key="item.i"
+            :editing="editing"
+            @hide="workbench.hideModule(item.i as WorkbenchModuleKey)"
+            @open-settings="() => {}"
+          />
+        </GridItem>
+      </GridLayout>
+    </div>
 
     <WorkbenchModuleLibrary
       v-model="libraryOpen"
       :hidden-metas="workbench.hiddenMetas"
       @add-module="
-        (key, col) => {
-          workbench.showModule(key, col);
+        key => {
+          workbench.showModule(key);
           libraryOpen = false;
         }
       "
@@ -143,15 +161,9 @@ onBeforeRouteLeave(async (_to, _from, next) => {
   display: flex;
   flex-direction: column;
   gap: 16px;
+  overflow-x: auto;
 }
 .workbench__main {
-  display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
-  gap: 16px;
-}
-@media (width <= 1280px) {
-  .workbench__main {
-    grid-template-columns: 1fr;
-  }
+  min-width: 1100px;
 }
 </style>