From e32eca3572343649076a4700e74f75df180d6500 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=9D=E5=B0=98?= <237809796@qq.com>
Date: Fri, 19 Jun 2026 11:56:37 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84:=20=E6=8B=86Projects.vue?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=8D=A1=E7=89=87(strategy=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新建 components/project/ProjectCard.vue(133行): 卡片模板+样式+parseStack/stripMd/statusLabel/stageClass+useRouter导航
- Projects.vue 692→593(-99): v-for改<ProjectCard> + 删卡片样式/导入
- props project + emit delete(props/emit最小耦合, 无store)
主代兜底(新工作模式·vue-tsc only不grep降上下文): vue-tsc 0(子代理自验印证)
strategy: 前端views, 子组件抽卡片; Projects余593(导入模态留下批); tech-tag父子各存(scoped隔离)
git add指定(Projects.vue+ProjectCard.vue)
---
 src/components/project/ProjectCard.vue | 133 +++++++++++++++++++++++++
 src/views/Projects.vue                 | 111 ++-------------------
 2 files changed, 139 insertions(+), 105 deletions(-)
 create mode 100644 src/components/project/ProjectCard.vue

diff --git a/src/components/project/ProjectCard.vue b/src/components/project/ProjectCard.vue
new file mode 100644
index 0000000..80859a1
--- /dev/null
+++ b/src/components/project/ProjectCard.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="project-card" @click="router.push('/projects/' + project.id)">
+    <div class="card-top">
+      <div class="card-title-row">
+        <h2 class="card-name">{{ project.name }}</h2>
+      </div>
+      <div class="card-top-actions">
+        <span class="stage-badge" :class="stageClass(project.status)">{{ $t(statusLabel(project.status)) }}</span>
+        <button class="card-del-btn" :title="$t('projects.deleteTitle')" @click.stop="emit('delete', project)">🗑</button>
+      </div>
+    </div>
+
+    <p class="card-desc">{{ stripMd(project.description) }}</p>
+
+    <!-- 底部信息 -->
+    <div class="card-footer">
+      <div class="footer-stat">
+        <span class="stat-icon">📅</span>
+        <span>{{ formatDate(project.created_at) }}</span>
+      </div>
+      <div class="footer-stat">
+        <span class="stat-icon">🕐</span>
+        <span>{{ formatDate(project.updated_at) }}</span>
+      </div>
+    </div>
+
+    <!-- 技术栈标签 -->
+    <div class="card-tags" v-if="parseStack(project.stack).length">
+      <span class="tech-tag" v-for="t in parseStack(project.stack)" :key="t">{{ t }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 项目列表卡片 — 从 Projects.vue 抽出(单卡片渲染 + 导航 + 删除触发)。
+// 依赖均为无副作用纯函数 + 共享常量;删除走 emit 交回父组件处理(confirm 弹层 + store 调用)。
+import { useRouter } from 'vue-router'
+import { formatDate } from '@/utils/time'
+import { parseStack } from '@/utils/project'
+import { stripMd } from '@/utils/markdown'
+import { projectStatusLabel as statusLabel, projectBadgeClass as stageClass } from '@/constants/project'
+import type { ProjectRecord } from '@/api/types'
+
+defineProps<{ project: ProjectRecord }>()
+const emit = defineEmits<{
+  (e: 'delete', project: ProjectRecord): void
+}>()
+
+const router = useRouter()
+</script>
+
+<style scoped>
+/* 仅迁入卡片自身样式;列表网格/页面壳样式留 Projects.vue(网格布局属列表职责) */
+.project-card {
+  background: var(--df-bg-card);
+  border: 0.5px solid var(--df-border);
+  border-radius: var(--df-radius-lg);
+  padding: var(--df-pad-panel);
+  transition: all 0.15s;
+  cursor: pointer;
+}
+.project-card:hover {
+  border-color: var(--df-accent);
+}
+
+.card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.card-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.card-name { font-size: 17px; font-weight: 500; color: var(--df-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.stage-badge {
+  font-size: 12px; font-weight: 500;
+  padding: 3px 10px;
+  border-radius: var(--df-radius-sm);
+}
+.stage-design { background: rgba(100,181,246,0.15); color: var(--df-info); }
+.stage-coding { background: rgba(108,99,255,0.15); color: var(--df-accent); }
+.stage-testing { background: rgba(255,217,61,0.15); color: var(--df-warning); }
+.stage-release { background: rgba(100,255,218,0.15); color: var(--df-success); }
+
+.card-desc {
+  font-size: 13px;
+  color: var(--df-text-secondary);
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+.card-footer {
+  display: flex;
+  gap: var(--df-gap-grid);
+  margin-bottom: 14px;
+}
+.footer-stat {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--df-text-dim);
+}
+.stat-icon { font-size: 13px; }
+
+.card-tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.tech-tag {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: var(--df-radius-xs);
+  background: rgba(108, 99, 255, 0.08);
+  color: var(--df-text-secondary);
+  border: 0.5px solid var(--df-border);
+}
+
+.card-top-actions { display: flex; align-items: center; gap: 8px; }
+.card-del-btn {
+  background: transparent; border: none; cursor: pointer;
+  font-size: 14px; padding: 2px 4px; opacity: 0;
+  transition: opacity 0.15s;
+}
+/* hover 态依赖 .project-card 父级 — scoped 下 :deep 不适用于兄弟伪类,改用 group 思路:卡片 hover 时按钮可见 */
+.project-card:hover .card-del-btn { opacity: 0.55; }
+.card-del-btn:hover { opacity: 1 !important; }
+</style>
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index 409ac39..8559cd3 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -138,38 +138,9 @@
       </div>
     </div>
 
-    <!-- 项目卡片网格 -->
+    <!-- 项目卡片网格(单卡片渲染抽至 components/project/ProjectCard.vue,删除走 emit 回父处理) -->
     <div class="project-grid">
-      <div class="project-card" v-for="project in store.projects" :key="project.id" @click="router.push('/projects/' + project.id)">
-        <div class="card-top">
-          <div class="card-title-row">
-            <h2 class="card-name">{{ project.name }}</h2>
-          </div>
-          <div class="card-top-actions">
-            <span class="stage-badge" :class="stageClass(project.status)">{{ $t(statusLabel(project.status)) }}</span>
-            <button class="card-del-btn" :title="$t('projects.deleteTitle')" @click.stop="handleDelete(project)">🗑</button>
-          </div>
-        </div>
-
-        <p class="card-desc">{{ stripMd(project.description) }}</p>
-
-        <!-- 底部信息 -->
-        <div class="card-footer">
-          <div class="footer-stat">
-            <span class="stat-icon">📅</span>
-            <span>{{ formatDate(project.created_at) }}</span>
-          </div>
-          <div class="footer-stat">
-            <span class="stat-icon">🕐</span>
-            <span>{{ formatDate(project.updated_at) }}</span>
-          </div>
-        </div>
-
-        <!-- 技术栈标签 -->
-        <div class="card-tags" v-if="parseStack(project.stack).length">
-          <span class="tech-tag" v-for="t in parseStack(project.stack)" :key="t">{{ t }}</span>
-        </div>
-      </div>
+      <ProjectCard v-for="project in store.projects" :key="project.id" :project="project" @delete="handleDelete" />
     </div>
 
     <!-- 空状态 -->
@@ -187,21 +158,17 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { open } from '@tauri-apps/plugin-dialog'
 import { useProjectStore } from '@/stores/project'
 import { projectApi } from '@/api'
 import { formatDate } from '@/utils/time'
-import { parseStack } from '@/utils/project'
-import { stripMd } from '@/utils/markdown'
-import { projectStatusLabel as statusLabel, projectBadgeClass as stageClass } from '../constants/project'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
+import ProjectCard from '@/components/project/ProjectCard.vue'
 import { useConfirm } from '@/composables/useConfirm'
 import type { ProjectRecord } from '@/api/types'
 import type { ScannedProjectItem } from '@/api/project'
 
-const router = useRouter()
 const store = useProjectStore()
 const { t } = useI18n()
 
@@ -477,52 +444,9 @@ async function runImport() {
   gap: var(--df-gap-grid);
 }
 
-.project-card {
-  background: var(--df-bg-card);
-  border: 0.5px solid var(--df-border);
-  border-radius: var(--df-radius-lg);
-  padding: var(--df-pad-panel);
-  transition: all 0.15s;
-  cursor: pointer;
-}
-.project-card:hover {
-  border-color: var(--df-accent);
-  
-}
-
-.card-top {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-.card-title-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.card-icon { font-size: 22px; }
-.card-name { font-size: 17px; font-weight: 500; color: var(--df-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-.stage-badge {
-  font-size: 12px; font-weight: 500;
-  padding: 3px 10px;
-  border-radius: var(--df-radius-sm);
-}
-.stage-design { background: rgba(100,181,246,0.15); color: var(--df-info); }
-.stage-coding { background: rgba(108,99,255,0.15); color: var(--df-accent); }
-.stage-testing { background: rgba(255,217,61,0.15); color: var(--df-warning); }
-.stage-release { background: rgba(100,255,218,0.15); color: var(--df-success); }
-
-.card-desc {
-  font-size: 13px;
-  color: var(--df-text-secondary);
-  line-height: 1.5;
-  margin-bottom: 16px;
-}
-
 /* ===== 进度条 ===== */
 .card-progress { margin-bottom: 16px; }
+.card-progress { margin-bottom: 16px; }
 .progress-label-row {
   display: flex;
   justify-content: space-between;
@@ -543,22 +467,7 @@ async function runImport() {
   transition: width 0.3s;
 }
 
-/* ===== 底部信息 ===== */
-.card-footer {
-  display: flex;
-  gap: var(--df-gap-grid);
-  margin-bottom: 14px;
-}
-.footer-stat {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: var(--df-text-dim);
-}
-.stat-icon { font-size: 13px; }
-
-/* ===== 技术栈标签 ===== */
+/* ===== 技术栈标签(创建/导入模态复用,保留;卡片自身样式随 ProjectCard.vue 迁出) ===== */
 .card-tags {
   display: flex;
   gap: 6px;
@@ -631,15 +540,7 @@ async function runImport() {
 }
 .error-dismiss:hover { opacity: 0.7; }
 
-/* ===== 卡片删除按钮 + 回收站 ===== */
-.card-top-actions { display: flex; align-items: center; gap: 8px; }
-.card-del-btn {
-  background: transparent; border: none; cursor: pointer;
-  font-size: 14px; padding: 2px 4px; opacity: 0;
-  transition: opacity 0.15s;
-}
-.project-card:hover .card-del-btn { opacity: 0.55; }
-.card-del-btn:hover { opacity: 1 !important; }
+/* ===== 回收站(卡片删除按钮样式随 ProjectCard.vue 迁出) ===== */
 .trash-list { display: flex; flex-direction: column; max-height: 400px; overflow-y: auto; }
 .trash-item {
   display: flex; justify-content: space-between; align-items: center;