refactor(projects): 1、新增执行任务，表单优化；2、删除逻辑丰富。3、修改已知问题

src/views/workbench/modules/workbench-project-grid.vue

@@ -1,36 +1,49 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useRouterPush } from '@/hooks/common/router';
-import type { WorkbenchProjectItem } from '../homepage';
+import { buildWorkbenchProjectItems } from '../homepage';
+import { workbenchProjectMock } from '../mock';
+import WorkbenchModuleCard from './workbench-module-card.vue';
 
 defineOptions({ name: 'WorkbenchProjectGrid' });
 
 interface Props {
-  items: WorkbenchProjectItem[];
+  editing?: boolean;
+  collapsed?: boolean;
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), { editing: false, collapsed: false });
+
+defineEmits<{
+  (e: 'hide'): void;
+  (e: 'toggle-collapse'): void;
+}>();
 
 const { routerPushByKey } = useRouterPush();
 
+const items = computed(() => buildWorkbenchProjectItems(workbenchProjectMock));
+
 function handleEnterProjectList() {
   routerPushByKey('project_list');
 }
 </script>
 
 <template>
-  <ElCard class="workbench-project card-wrapper" shadow="never">
-    <template #header>
-      <div class="workbench-project__header">
-        <div>
-          <h3 class="workbench-project__title">我参与的项目</h3>
-          <p class="workbench-project__desc">直接看每个项目的当前进度、我的角色与未完成任务</p>
-        </div>
-        <ElButton type="primary" link @click="handleEnterProjectList">
-          <span>进入项目列表</span>
-          <SvgIcon icon="mdi:arrow-right-thin" class="workbench-project__more-icon" />
-        </ElButton>
-      </div>
-    </template>
+  <WorkbenchModuleCard
+    title="我参与的项目"
+    icon="mdi:briefcase-outline"
+    :editing="editing"
+    :collapsed="collapsed"
+    @hide="$emit('hide')"
+    @toggle-collapse="$emit('toggle-collapse')"
+  >
+    <div class="workbench-project__subheader">
+      <p class="workbench-project__desc">直接看每个项目的当前进度、我的角色与未完成任务</p>
+      <ElButton type="primary" link @click="handleEnterProjectList">
+        <span>进入项目列表</span>
+        <SvgIcon icon="mdi:arrow-right-thin" class="workbench-project__more-icon" />
+      </ElButton>
+    </div>
 
     <div v-if="items.length" class="workbench-project__grid">
       <article v-for="item in items" :key="item.id" class="workbench-project__card">
@@ -81,35 +94,20 @@ function handleEnterProjectList() {
       </article>
     </div>
     <ElEmpty v-else description="暂未参与任何项目" :image-size="72" />
-  </ElCard>
+  </WorkbenchModuleCard>
 </template>
 
 <style scoped>
-.workbench-project {
-  overflow: hidden;
-}
-
-:deep(.el-card__header) {
-  padding: 16px 18px;
-  border-bottom: 1px solid rgb(226 232 240 / 80%);
-}
-
-.workbench-project__header {
+.workbench-project__subheader {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: 12px;
-}
-
-.workbench-project__title {
-  margin: 0;
-  color: rgb(15 23 42 / 98%);
-  font-size: 16px;
-  font-weight: 700;
+  margin-bottom: 14px;
 }
 
 .workbench-project__desc {
-  margin: 4px 0 0;
+  margin: 0;
   color: rgb(100 116 139 / 92%);
   font-size: 13px;
   line-height: 1.6;