sillyspec 3.7.13 → 3.7.15

package/packages/dashboard/src/components/PipelineStage.vue

@@ -16,7 +16,7 @@
         <div class="flex items-center gap-2.5 mb-3">
           <span
             class="text-[12px] font-semibold font-[JetBrains_Mono,monospace] tracking-tight"
-            :style="{ color: isActive ? '#FBBF24' : '#E4E4E7' }"
+            :style="{ color: isActive ? '#D97706' : '#1C1C1E' }"
           >
             {{ title }}
           </span>
@@ -25,7 +25,7 @@
 
         <!-- Steps -->
         <div class="space-y-1">
-          <div v-if="steps.length === 0" class="text-[11px] italic py-1" style="color: #525252;">
+          <div v-if="steps.length === 0" class="text-[11px] italic py-1" style="color: #6B7280;">
             No steps yet
           </div>
           <StepCard
@@ -58,13 +58,13 @@ const props = defineProps({
 const emit = defineEmits(['select-step'])
 
 const nodeStyle = computed(() => {
-  if (props.isActive) return { background: '#FBBF24', boxShadow: '0 0 8px rgba(251,191,36,0.4)' }
+  if (props.isActive) return { background: '#D97706', boxShadow: '0 0 8px rgba(251,191,36,0.4)' }
   const colors = {
-    'completed': '#34D399',
-    'in-progress': '#FBBF24',
-    'blocked': '#FB923C',
-    'failed': '#EF4444',
-    'pending': '#2A2A2D'
+    'completed': '#16A34A',
+    'in-progress': '#D97706',
+    'blocked': '#EA580C',
+    'failed': '#DC2626',
+    'pending': '#E5E5EA'
   }
   return { background: colors[props.status] || colors.pending }
 })

package/packages/dashboard/src/components/PipelineView.vue

@@ -1,77 +1,69 @@
 <template>
-  <div class="flex flex-col h-full" style="background: #0E0E10;">
+  <div class="flex flex-col h-full" style="background: #F5F5F7;">
     <!-- Header with Tabs -->
-    <div class="px-6 pt-4 pb-0" style="border-bottom: 1px solid #1F1F22;">
+    <div class="px-6 pt-4 pb-0" style="border-bottom: 1px solid #F0F0F3;">
       <div class="flex items-center gap-6">
-        <h2 class="text-[11px] font-semibold uppercase tracking-[0.2em] font-[JetBrains_Mono,monospace]" style="color: #525252;">
+        <h2 class="text-[11px] font-semibold uppercase tracking-[0.2em] font-[JetBrains_Mono,monospace]" style="color: #6B7280;">
           {{ project?.name || '项目' }}
         </h2>
-        <div class="flex gap-1">
-          <button
-            @click="$emit('switch-tab', 'pipeline')"
-            class="px-3 py-1.5 text-[11px] font-[JetBrains_Mono,monospace] transition-colors rounded"
-            :style="{ color: activeTab === 'pipeline' ? '#FBBF24' : '#525252', background: activeTab === 'pipeline' ? 'rgba(251,191,36,0.08)' : 'transparent' }"
-          >流水线</button>
-          <button
-            @click="$emit('switch-tab', 'docs')"
-            class="px-3 py-1.5 text-[11px] font-[JetBrains_Mono,monospace] transition-colors rounded"
-            :style="{ color: activeTab === 'docs' ? '#FBBF24' : '#525252', background: activeTab === 'docs' ? 'rgba(251,191,36,0.08)' : 'transparent' }"
-          >文档</button>
-        </div>
+        <n-tabs :value="activeTab" type="segment" size="small" @update:value="$emit('switch-tab', $event)" style="max-width: 200px;">
+          <n-tab name="pipeline">流水线</n-tab>
+          <n-tab name="docs">文档</n-tab>
+        </n-tabs>
       </div>
     </div>
 
     <!-- Pipeline Tab -->
     <div v-if="activeTab === 'pipeline'" class="flex flex-col flex-1 overflow-hidden">
-      <div class="px-6 pt-4 pb-2">
-        <p v-if="project" class="text-[12px] font-[JetBrains_Mono,monospace]" style="color: #8B8B8E;">
-          <span style="color: #FBBF24;">{{ currentStage }}</span>
+      <div v-if="project && currentStage" class="px-6 pt-4 pb-2">
+        <p class="text-[12px] font-[JetBrains_Mono,monospace]" style="color: #636366;">
+          <span style="color: #D97706;">{{ currentStage }}</span>
         </p>
       </div>
 
       <!-- Empty state -->
-      <div v-if="!project || !project.state" class="flex items-center justify-center flex-1">
-        <div class="text-center">
-          <div class="w-14 h-14 mx-auto mb-4 rounded-md flex items-center justify-center" style="border: 1px dashed #2A2A2D; transform: rotate(45deg);">
-            <svg class="w-5 h-5" style="color: #525252; transform: rotate(-45deg);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
-            </svg>
-          </div>
-          <p class="text-[12px] font-[JetBrains_Mono,monospace]" style="color: #525252;">选择一个项目查看流水线</p>
-        </div>
-      </div>
+      <n-empty v-if="!project || !project.state" description="选择一个项目查看流水线" style="margin: auto;" />
 
       <!-- Stages -->
       <div v-else class="flex-1 overflow-y-auto px-6 pb-5 space-y-5">
         <PipelineStage name="brainstorm" title="头脑风暴" :steps="getStageSteps('brainstorm')" :status="getStageStatus('brainstorm')" :is-active="currentStage === 'brainstorm'" :active-step="activeStep" @select-step="handleSelectStep" />
-        <div v-if="hasStage('plan')" class="flex items-center pl-[3px]"><div class="w-px h-4" style="background: #1F1F22;" /></div>
+        <div v-if="hasStage('plan')" class="flex items-center pl-[3px]"><div class="w-px h-4" style="background: #F0F0F3;" /></div>
         <PipelineStage name="plan" title="规划" :steps="getStageSteps('plan')" :status="getStageStatus('plan')" :is-active="currentStage === 'plan'" :active-step="activeStep" @select-step="handleSelectStep" />
-        <div v-if="hasStage('execute')" class="flex items-center pl-[3px]"><div class="w-px h-4" style="background: #1F1F22;" /></div>
+        <div v-if="hasStage('execute')" class="flex items-center pl-[3px]"><div class="w-px h-4" style="background: #F0F0F3;" /></div>
         <PipelineStage name="execute" title="执行" :steps="getStageSteps('execute')" :status="getStageStatus('execute')" :is-active="currentStage === 'execute'" :active-step="activeStep" @select-step="handleSelectStep" />
-        <div v-if="hasStage('verify')" class="flex items-center pl-[3px]"><div class="w-px h-4" style="background: #1F1F22;" /></div>
+        <div v-if="hasStage('verify')" class="flex items-center pl-[3px]"><div class="w-px h-4" style="background: #F0F0F3;" /></div>
         <PipelineStage name="verify" title="验证" :steps="getStageSteps('verify')" :status="getStageStatus('verify')" :is-active="currentStage === 'verify'" :active-step="activeStep" @select-step="handleSelectStep" />
       </div>
 
       <!-- Activity Log -->
-      <div v-if="project?.state?.progress" style="border-top: 1px solid #1F1F22; background: rgba(10,10,11,0.6);">
+      <div v-if="project?.state?.progress" style="border-top: 1px solid #F0F0F3; background: rgba(0,0,0,0.03);">
         <div class="px-6 py-2.5 flex items-center justify-between">
-          <div class="text-[9px] font-semibold uppercase tracking-[0.25em] font-[JetBrains_Mono,monospace]" style="color: #525252;">活动日志</div>
-          <div class="text-[10px] font-mono-log" style="color: #3A3A3D;">{{ activityLogs.length }}</div>
+          <div class="text-[9px] font-semibold uppercase tracking-[0.25em] font-[JetBrains_Mono,monospace]" style="color: #6B7280;">活动日志</div>
+          <div class="text-[10px] font-mono-log" style="color: #D1D1D6;">{{ activityLogs.length }}</div>
         </div>
-        <div class="px-6 pb-3 space-y-0.5 max-h-32 overflow-y-auto">
-          <div v-for="(log, i) in activityLogs" :key="i" class="flex items-start gap-2.5 text-[11px] py-0.5">
-            <span class="w-10 font-mono-log flex-shrink-0" style="color: #3A3A3D;">{{ log.time }}</span>
-            <span :style="{ color: log.status === 'completed' ? '#34D399' : '#FBBF24' }">›</span>
-            <span style="color: #8B8B8E;">{{ log.description }}</span>
-          </div>
-          <div v-if="activityLogs.length === 0" class="text-[10px] py-1" style="color: #3A3A3D;">暂无活动记录</div>
+        <div class="px-6 pb-3 max-h-32 overflow-y-auto">
+          <n-timeline size="small">
+            <n-timeline-item
+              v-for="(log, i) in activityLogs"
+              :key="i"
+              :type="log.status === 'completed' ? 'success' : 'warning'"
+            >
+              <template #default>
+                <span class="text-[11px]" style="color: #636366;">{{ log.description }}</span>
+              </template>
+              <template #time>
+                <span class="text-[10px] font-mono-log" style="color: #D1D1D6;">{{ log.time }}</span>
+              </template>
+            </n-timeline-item>
+          </n-timeline>
+          <div v-if="activityLogs.length === 0" class="text-[10px] py-1" style="color: #D1D1D6;">暂无活动记录</div>
         </div>
       </div>
     </div>
 
     <!-- Docs Tab -->
     <div v-if="activeTab === 'docs'" class="flex-1 flex overflow-hidden">
-      <div class="w-[200px] flex-shrink-0 overflow-hidden" style="border-right: 1px solid #1F1F22;">
+      <div class="w-[200px] flex-shrink-0 overflow-hidden" style="border-right: 1px solid #F0F0F3;">
         <DocTree :groups="docs.groups" :selected-file="selectedDocFile" @select-file="$emit('select-doc-file', $event)" />
       </div>
       <div class="flex-1 overflow-hidden">
@@ -99,7 +91,7 @@ const props = defineProps({
 
 const emit = defineEmits(['select-step', 'switch-tab', 'select-doc-file'])
 
-const currentStage = computed(() => props.project?.state?.currentStage || 'unknown')
+const currentStage = computed(() => props.project?.state?.currentStage || '')
 const progress = computed(() => props.project?.state?.progress || {})
 const stages = computed(() => progress.value.stages || {})
 

package/packages/dashboard/src/components/ProjectList.vue

@@ -3,138 +3,109 @@
     <!-- Header -->
     <div class="relative z-10 px-5 pt-5 pb-4">
       <div class="flex items-center gap-3">
-        <div class="w-8 h-8 rounded-md flex items-center justify-center" style="background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%); clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);">
+        <div class="w-8 h-8 rounded-md flex items-center justify-center" style="background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%); clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);">
           <span class="text-[10px] font-bold text-black font-[JetBrains_Mono,monospace]">S</span>
         </div>
+        <img src="/logo.jpg" style="width:28px;height:28px;border-radius:6px;margin-right:8px;">
         <div class="flex-1">
-          <h1 class="text-[13px] font-semibold tracking-tight font-[JetBrains_Mono,monospace]" style="color: #E4E4E7;">
+          <h1 class="text-[13px] font-semibold tracking-tight font-[JetBrains_Mono,monospace]" style="color: #1C1C1E;">
             SillySpec
           </h1>
-          <p class="text-[10px] tracking-widest uppercase" style="color: #525252;">控制台</p>
+          <p class="text-[10px] tracking-widest uppercase" style="color: #6B7280;">控制台</p>
         </div>
         <!-- Scan paths gear button -->
-        <button
-          @click="showScanPanel = !showScanPanel"
-          class="p-1.5 rounded-sm transition-colors duration-100"
-          :style="{ color: showScanPanel ? '#FBBF24' : '#525252', background: showScanPanel ? 'rgba(251,191,36,0.08)' : 'transparent' }"
-          title="扫描路径设置"
-        >
-          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
-          </svg>
-        </button>
+        <n-button quaternary size="tiny" @click="showScanPanel = !showScanPanel" :type="showScanPanel ? 'primary' : 'default'">
+          <template #icon>
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+            </svg>
+          </template>
+        </n-button>
       </div>
 
       <!-- Scan paths panel (inline) -->
       <Transition name="slide">
-        <div v-if="showScanPanel" class="mt-3 rounded-md p-3" style="background: #141416; border: 1px solid #1F1F22;">
-          <div class="text-[10px] font-semibold uppercase tracking-[0.15em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #525252;">扫描路径</div>
+        <div v-if="showScanPanel" class="mt-3 rounded-md p-3" style="background: #FFFFFF; border: 1px solid #F0F0F3;">
+          <div class="text-[10px] font-semibold uppercase tracking-[0.15em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">扫描路径</div>
 
-          <div v-if="scanPaths.length === 0" class="text-[10px] py-1" style="color: #3A3A3D;">暂无自定义路径</div>
+          <div v-if="scanPaths.length === 0" class="text-[10px] py-1" style="color: #D1D1D6;">暂无自定义路径</div>
           <div v-else class="space-y-1 mb-2">
             <div v-for="(p, i) in scanPaths" :key="i" class="flex items-center gap-2 text-[10px] group">
-              <span class="flex-1 truncate font-mono-log" style="color: #8B8B8E;">{{ p }}</span>
-              <button
-                @click="removePath(p)"
-                class="opacity-0 group-hover:opacity-100 transition-opacity text-[9px] px-1 rounded-sm"
-                style="color: #EF4444; background: rgba(239,68,68,0.08);"
-              >✕</button>
+              <span class="flex-1 truncate font-mono-log" style="color: #636366;">{{ p }}</span>
+              <n-button quaternary size="tiny" type="error" @click="removePath(p)">✕</n-button>
             </div>
           </div>
 
           <!-- Add path -->
           <div v-if="showAddInput" class="flex items-center gap-2">
-            <input
-              ref="pathInput"
-              v-model="newPath"
-              type="text"
-              placeholder="输入目录路径..."
-              class="flex-1 px-2 py-1 rounded-sm text-[10px] font-mono-log outline-none"
-              style="background: #0A0A0B; border: 1px solid #2A2A2D; color: #E4E4E7;"
-              @keydown.enter="addPath"
-              @keydown.escape="showAddInput = false"
-            />
-            <button @click="addPath" class="px-2 py-1 text-[10px] rounded-sm" style="background: rgba(251,191,36,0.1); color: #FBBF24; border: 1px solid rgba(251,191,36,0.2);">添加</button>
+            <n-input v-model:value="newPath" size="tiny" placeholder="输入目录路径..." @keydown.enter="addPath" @keydown.escape="showAddInput = false" ref="pathInput" />
+            <n-button size="tiny" type="primary" @click="addPath">添加</n-button>
           </div>
-          <button
-            v-else
-            @click="showAddInput = true"
-            class="text-[10px] px-2 py-1 rounded-sm transition-colors duration-100"
-            style="color: #525252; border: 1px dashed #2A2A2D;"
-          >
-            + 添加目录
-          </button>
+          <n-button v-else size="tiny" dashed @click="showAddInput = true">+ 添加目录</n-button>
         </div>
       </Transition>
     </div>
 
     <!-- Divider -->
-    <div class="mx-4 h-px" style="background: linear-gradient(90deg, transparent, #2A2A2D, transparent);"></div>
+    <div class="mx-4 h-px" style="background: linear-gradient(90deg, transparent, #E5E5EA, transparent);"></div>
 
     <!-- Projects List -->
     <div class="flex-1 overflow-y-auto py-3 relative z-10">
       <!-- Loading skeleton -->
       <div v-if="isLoading" class="px-4 space-y-2">
-        <div v-for="i in 4" :key="i" class="rounded-lg p-3" style="background: #141416;">
-          <div class="h-3 rounded w-20 skeleton-shimmer mb-2"></div>
-          <div class="h-2 rounded w-32 skeleton-shimmer"></div>
-        </div>
-        <p class="text-center text-[10px] mt-4 font-[JetBrains_Mono,monospace]" style="color: #525252;">
+        <n-card v-for="i in 4" :key="i" size="small" :bordered="false">
+          <n-skeleton text :width="80" size="small" />
+          <n-skeleton text :width="140" size="small" style="margin-top: 6px;" />
+        </n-card>
+        <p class="text-center text-[10px] mt-4 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">
           正在扫描项目...
         </p>
       </div>
 
       <!-- Empty state -->
-      <div v-else-if="projects.length === 0" class="px-4 py-12 text-center">
-        <div class="w-10 h-10 mx-auto mb-3 rounded-full flex items-center justify-center" style="border: 1px dashed #2A2A2D;">
-          <svg class="w-4 h-4" style="color: #525252;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-          </svg>
-        </div>
-        <p class="text-[11px]" style="color: #8B8B8E;">未发现 SillySpec 项目</p>
-        <p class="text-[10px] mt-1" style="color: #525252;">正在扫描项目目录...</p>
-      </div>
+      <n-empty v-else-if="projects.length === 0" description="未发现 SillySpec 项目" style="padding: 48px 0;" />
 
       <!-- Projects -->
       <div v-else class="px-3 space-y-0.5">
         <div
           v-for="project in projects"
           :key="project.path"
-          :class="[
-            'relative rounded-md cursor-pointer transition-all duration-150 overflow-hidden group',
-          ]"
+          :class="['relative rounded-md cursor-pointer transition-all duration-150 overflow-hidden group']"
           :style="{
-            background: isActive(project) ? 'rgba(251,191,36,0.06)' : 'transparent',
-            borderLeft: isActive(project) ? '2px solid #FBBF24' : '2px solid transparent',
+            background: isActive(project) ? 'rgba(217,119,6,0.06)' : 'transparent',
+            borderLeft: isActive(project) ? '2px solid #D97706' : '2px solid transparent',
           }"
-          @mouseenter="$event.currentTarget.style.background = isActive(project) ? 'rgba(251,191,36,0.08)' : 'rgba(255,255,255,0.02)'"
-          @mouseleave="$event.currentTarget.style.background = isActive(project) ? 'rgba(251,191,36,0.06)' : 'transparent'"
+          @mouseenter="$event.currentTarget.style.background = isActive(project) ? 'rgba(217,119,6,0.08)' : 'rgba(255,255,255,0.02)'"
+          @mouseleave="$event.currentTarget.style.background = isActive(project) ? 'rgba(217,119,6,0.06)' : 'transparent'"
           @click="$emit('select', project)"
         >
           <div class="px-3 py-2.5">
             <div class="flex items-center justify-between gap-2">
               <div class="flex-1 min-w-0">
                 <h3
-                  :class="['text-[12px] font-medium truncate transition-colors duration-150 font-[JetBrains_Mono,monospace]']"
-                  :style="{ color: isActive(project) ? '#FBBF24' : '#E4E4E7' }"
+                  class="text-[12px] font-medium truncate transition-colors duration-150 font-[JetBrains_Mono,monospace]"
+                  :style="{ color: isActive(project) ? '#D97706' : '#1C1C1E' }"
                 >
                   {{ project.name }}
                 </h3>
-                <p class="text-[10px] mt-0.5 truncate font-mono-log" style="color: #525252;">
+                <p class="text-[10px] mt-0.5 truncate font-mono-log" style="color: #6B7280;">
                   {{ project.path }}
                 </p>
               </div>
-              <StageBadge
+              <n-tag
                 v-if="project.state?.currentStage"
-                :status="getProjectStatus(project)"
-                :label="stageLabel(project)"
-                size="sm"
-              />
+                :type="statusTagType(getProjectStatus(project))"
+                size="small"
+                :bordered="false"
+                round
+              >
+                {{ stageLabel(project) }}
+              </n-tag>
             </div>
 
             <!-- Progress -->
-            <div v-if="project.state?.progress" class="mt-2 h-[2px] rounded-full overflow-hidden" style="background: #1C1C1F;">
+            <div v-if="project.state?.progress" class="mt-2 h-[2px] rounded-full overflow-hidden" style="background: #FFFFFF;">
               <div
                 class="h-full rounded-full transition-all duration-500 progress-gradient"
                 :style="{ width: getProjectProgress(project) + '%' }"
@@ -146,10 +117,10 @@
     </div>
 
     <!-- Footer -->
-    <div class="relative z-10 px-4 py-2.5" style="border-top: 1px solid #1F1F22;">
+    <div class="relative z-10 px-4 py-2.5" style="border-top: 1px solid #F0F0F3;">
       <div class="flex items-center justify-between">
-        <span class="text-[10px] font-[JetBrains_Mono,monospace]" style="color: #525252;">{{ projects.length }} 个项目</span>
-        <kbd class="text-[9px] px-1.5 py-0.5 rounded font-mono-log" style="color: #525252; background: #141416; border: 1px solid #2A2A2D;">⌘K</kbd>
+        <span class="text-[10px] font-[JetBrains_Mono,monospace]" style="color: #6B7280;">{{ projects.length }} 个项目</span>
+        <kbd class="text-[9px] px-1.5 py-0.5 rounded font-mono-log" style="color: #6B7280; background: #FFFFFF; border: 1px solid #E5E5EA;">⌘K</kbd>
       </div>
     </div>
   </div>
@@ -157,7 +128,6 @@
 
 <script setup>
 import { ref, nextTick, watch } from 'vue'
-import StageBadge from './StageBadge.vue'
 
 const props = defineProps({
   projects: { type: Array, default: () => [] },
@@ -181,6 +151,11 @@ function isActive(project) {
   return props.activeProject?.path === project.path
 }
 
+function statusTagType(status) {
+  const map = { 'in-progress': 'warning', 'completed': 'success', 'failed': 'error', 'blocked': 'warning' }
+  return map[status] || 'default'
+}
+
 function getProjectStatus(project) {
   const stage = project.state?.currentStage
   if (!stage) return 'pending'

package/packages/dashboard/src/components/ProjectOverview.vue

@@ -0,0 +1,178 @@
+<template>
+  <div v-if="project" class="project-overview">
+    <!-- Name + Path -->
+    <div class="ov-section">
+      <span class="ov-name">{{ project.name }}</span>
+      <span class="ov-path">{{ shortPath }}</span>
+    </div>
+    <div class="ov-divider" />
+
+    <!-- Tech Stack -->
+    <div class="ov-section ov-clickable" @click="$emit('show-detail', 'tech')">
+      <span class="ov-label">技术栈</span>
+      <span v-for="t in overview.techStack" :key="t" class="ov-tag">{{ t }}</span>
+    </div>
+    <div class="ov-divider" />
+
+    <!-- Stage -->
+    <div v-if="project.state?.currentStage" class="ov-section">
+      <span class="ov-label">阶段</span>
+      <span class="ov-value">{{ project.state.currentStage }}</span>
+    </div>
+    <div v-else-if="project.state" class="ov-section">
+      <span class="ov-label">阶段</span>
+      <span class="ov-value" style="color:#9CA3AF;">未执行</span>
+    </div>
+    <div v-if="project.state?.currentStage" class="ov-divider" />
+
+    <!-- Last Active -->
+    <div v-if="overview.lastActive" class="ov-section">
+      <span class="ov-label">最近活跃</span>
+      <span class="ov-value">{{ formatTime(overview.lastActive) }}</span>
+    </div>
+    <div v-if="overview.lastActive" class="ov-divider" />
+
+    <!-- Doc Stats -->
+    <div v-if="overview.docStats.total > 0" class="ov-section ov-clickable" @click="$emit('show-detail', 'docs')">
+      <span class="ov-label">文档</span>
+      <span class="ov-value">{{ docSummary }}</span>
+    </div>
+    <div v-if="overview.docStats.total > 0" class="ov-divider" />
+
+    <!-- Git -->
+    <div class="ov-section ov-git ov-clickable" @click="$emit('show-detail', 'git')">
+      <span v-if="overview.git.branch" class="ov-branch">{{ overview.git.branch }}</span>
+      <span v-if="overview.git.lastCommit" class="ov-commit" :title="overview.git.lastCommit">{{ truncate(overview.git.lastCommit, 40) }}</span>
+      <span v-if="overview.git.dirtyCount > 0" class="ov-dirty">{{ overview.git.dirtyCount }} 未提交</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  project: { type: Object, default: null }
+})
+
+defineEmits(['show-detail'])
+
+const overview = computed(() => props.project?.overview || { techStack: [], lastActive: null, docStats: { design: 0, plan: 0, archive: 0, changes: 0, scan: 0, quicklog: 0, total: 0 }, git: { branch: '', lastCommit: '', dirtyCount: 0 } })
+
+const shortPath = computed(() => {
+  const p = props.project?.path || ''
+  return p.replace(/^\/Users\/[^/]+/, '~')
+})
+
+const docSummary = computed(() => {
+  const s = overview.value.docStats
+  const parts = []
+  if (s.design) parts.push(`设计 ${s.design}`)
+  if (s.plan) parts.push(`计划 ${s.plan}`)
+  if (s.archive) parts.push(`归档 ${s.archive}`)
+  if (s.changes) parts.push(`变更 ${s.changes}`)
+  return parts.join(' / ') || `${s.total} 篇`
+})
+
+function formatTime(iso) {
+  if (!iso) return ''
+  const d = new Date(iso)
+  const now = new Date()
+  const diffMs = now - d
+  if (diffMs < 60000) return '刚刚'
+  if (diffMs < 3600000) return `${Math.floor(diffMs / 60000)} 分钟前`
+  if (diffMs < 86400000) return `${Math.floor(diffMs / 3600000)} 小时前`
+  if (diffMs < 604800000) return `${Math.floor(diffMs / 86400000)} 天前`
+  return `${d.getMonth() + 1}/${d.getDate()}`
+}
+
+function truncate(s, n) {
+  return s.length > n ? s.slice(0, n) + '…' : s
+}
+</script>
+
+<style scoped>
+.project-overview {
+  display: flex;
+  align-items: center;
+  background: #FFFFFF;
+  border-bottom: 1px solid #E5E5EA;
+  padding: 8px 16px;
+  min-height: 48px;
+  gap: 8px;
+  flex-shrink: 0;
+  overflow-x: auto;
+}
+.ov-section {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ov-clickable {
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 2px 6px;
+  margin: -2px -6px;
+  transition: background 0.15s;
+}
+.ov-clickable:hover {
+  background: rgba(217,119,6,0.06);
+}
+.ov-name {
+  font-weight: 600;
+  font-size: 13px;
+  color: #1C1C1E;
+}
+.ov-path {
+  font-size: 11px;
+  color: #636366;
+}
+.ov-label {
+  font-size: 11px;
+  color: #636366;
+}
+.ov-value {
+  font-size: 12px;
+  color: #1C1C1E;
+  font-weight: 500;
+}
+.ov-tag {
+  font-size: 10px;
+  padding: 1px 8px;
+  border-radius: 10px;
+  background: rgba(217,119,6,0.08);
+  color: #D97706;
+  font-weight: 500;
+}
+.ov-divider {
+  width: 1px;
+  height: 20px;
+  background: #E5E5EA;
+  flex-shrink: 0;
+}
+.ov-git {
+  margin-left: auto;
+  gap: 10px;
+}
+.ov-branch {
+  font-size: 11px;
+  color: #636366;
+  background: #F5F5F7;
+  padding: 1px 8px;
+  border-radius: 4px;
+}
+.ov-commit {
+  font-size: 11px;
+  color: #636366;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ov-dirty {
+  font-size: 11px;
+  color: #D97706;
+  font-weight: 500;
+}
+</style>

package/packages/dashboard/src/components/StageBadge.vue

@@ -19,19 +19,19 @@ const props = defineProps({
 
 const displayLabel = computed(() => {
   if (props.label) return props.label
-  const labels = { 'completed': 'done', 'in-progress': 'running', 'blocked': 'blocked', 'failed': 'error', 'pending': 'idle' }
-  return labels[props.status] || 'idle'
+  const labels = { 'completed': 'done', 'in-progress': 'running', 'blocked': 'blocked', 'failed': 'error' }
+  return labels[props.status] || ''
 })
 
 const sizeClass = computed(() => props.size === 'sm' ? 'px-1.5 py-0.5' : 'px-2 py-1')
 
 const badgeStyle = computed(() => {
   const styles = {
-    'completed': { background: 'rgba(52,211,153,0.1)', color: '#34D399' },
-    'in-progress': { background: 'rgba(251,191,36,0.1)', color: '#FBBF24' },
-    'blocked': { background: 'rgba(251,146,60,0.1)', color: '#FB923C' },
-    'failed': { background: 'rgba(239,68,68,0.1)', color: '#EF4444' },
-    'pending': { background: 'rgba(82,82,82,0.15)', color: '#525252' }
+    'completed': { background: 'rgba(22,163,74,0.1)', color: '#16A34A' },
+    'in-progress': { background: 'rgba(251,191,36,0.1)', color: '#D97706' },
+    'blocked': { background: 'rgba(251,146,60,0.1)', color: '#EA580C' },
+    'failed': { background: 'rgba(239,68,68,0.1)', color: '#DC2626' },
+    'pending': { background: 'rgba(82,82,82,0.15)', color: '#6B7280' }
   }
   return styles[props.status] || styles.pending
 })
@@ -42,12 +42,12 @@ const dotClass = computed(() => {
 
 const dotStyle = computed(() => {
   const colors = {
-    'completed': '#34D399',
-    'in-progress': '#FBBF24',
-    'blocked': '#FB923C',
-    'failed': '#EF4444',
-    'pending': '#525252'
+    'completed': '#16A34A',
+    'in-progress': '#D97706',
+    'blocked': '#EA580C',
+    'failed': '#DC2626',
+    'pending': '#6B7280'
   }
-  return { background: colors[props.status] || '#525252' }
+  return { background: colors[props.status] || '#6B7280' }
 })
 </script>