sillyspec 3.7.14 → 3.7.16

package/packages/dashboard/server/parser.js

@@ -1,4 +1,5 @@
-import { readFileSync, existsSync, readdirSync } from 'fs'
+import { readFileSync, existsSync, readdirSync, statSync } from 'fs'
+import { execSync } from 'child_process'
 import { join } from 'path'
 import { fileURLToPath } from 'url'
 import { dirname } from 'path'
@@ -10,6 +11,243 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
  * @param {string} projectPath - Path to the project directory
  * @returns {object} Docs tree grouped by type
  */
+// Known framework detection keywords in package.json dependencies
+const FRAMEWORK_PATTERNS = [
+  { keys: ['react', 'react-dom'], name: 'React' },
+  { keys: ['vue'], name: 'Vue' },
+  { keys: ['next'], name: 'Next.js' },
+  { keys: ['nuxt'], name: 'Nuxt' },
+  { keys: ['express'], name: 'Express' },
+  { keys: ['koa'], name: 'Koa' },
+  { keys: ['fastify'], name: 'Fastify' },
+  { keys: ['nestjs', '@nestjs/core'], name: 'NestJS' },
+  { keys: ['svelte'], name: 'Svelte' },
+  { keys: ['astro'], name: 'Astro' },
+  { keys: ['vite'], name: 'Vite' },
+  { keys: ['webpack'], name: 'Webpack' },
+  { keys: ['typescript'], name: 'TypeScript' },
+  { keys: ['tailwindcss'], name: 'Tailwind' },
+  { keys: ['prisma'], name: 'Prisma' },
+  { keys: ['drizzle-orm'], name: 'Drizzle' },
+]
+
+/**
+ * Parse project overview info
+ * @param {string} projectPath
+ * @returns {object} Overview data
+ */
+export function parseProjectOverview(projectPath) {
+  const result = {
+    techStack: [],
+    lastActive: null,
+    docStats: { design: 0, plan: 0, archive: 0, changes: 0, scan: 0, quicklog: 0, total: 0 },
+    git: { branch: '', lastCommit: '', dirtyCount: 0 }
+  }
+
+  // --- Tech stack ---
+  const pkgPath = join(projectPath, 'package.json')
+  if (existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'))
+      const deps = Object.keys({ ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) })
+      for (const pattern of FRAMEWORK_PATTERNS) {
+        if (pattern.keys.some(k => deps.includes(k))) {
+          result.techStack.push(pattern.name)
+        }
+      }
+    } catch {}
+  }
+  if (existsSync(join(projectPath, 'pom.xml'))) {
+    result.techStack.push('Java')
+    try {
+      const content = readFileSync(join(projectPath, 'pom.xml'), 'utf-8')
+      if (content.includes('spring-boot')) result.techStack.push('Spring Boot')
+    } catch {}
+  }
+  if (existsSync(join(projectPath, 'build.gradle')) || existsSync(join(projectPath, 'build.gradle.kts'))) {
+    if (!result.techStack.includes('Java')) result.techStack.push('Gradle')
+  }
+  if (existsSync(join(projectPath, 'requirements.txt')) || existsSync(join(projectPath, 'pyproject.toml'))) {
+    result.techStack.push('Python')
+  }
+  if (existsSync(join(projectPath, 'go.mod'))) {
+    result.techStack.push('Go')
+  }
+  if (result.techStack.length === 0) result.techStack = []
+
+  // --- Last active ---
+  const sillyspecDir = join(projectPath, '.sillyspec')
+  const progressPath = join(sillyspecDir, '.runtime', 'progress.json')
+  if (existsSync(progressPath)) {
+    try {
+      const progress = JSON.parse(readFileSync(progressPath, 'utf-8'))
+      if (progress.stages) {
+        for (const stageData of Object.values(progress.stages)) {
+          if (stageData.lastActive && (!result.lastActive || new Date(stageData.lastActive) > new Date(result.lastActive))) {
+            result.lastActive = stageData.lastActive
+          }
+        }
+      }
+      if (progress.lastActive) result.lastActive = progress.lastActive
+    } catch {}
+  }
+  if (!result.lastActive) {
+    // Fallback: most recently modified file in .sillyspec
+    try {
+      const findRecent = (dir) => {
+        let latest = null
+        if (!existsSync(dir)) return latest
+        for (const entry of readdirSync(dir, { withFileTypes: true })) {
+          const p = join(dir, entry.name)
+          try {
+            const s = statSync(p)
+            if (entry.isDirectory()) {
+              const sub = findRecent(p)
+              if (sub && (!latest || sub > latest)) latest = sub
+            } else if (!latest || s.mtimeMs > latest) {
+              latest = s.mtimeMs
+            }
+          } catch {}
+        }
+        return latest
+      }
+      const ts = findRecent(sillyspecDir)
+      if (ts) result.lastActive = new Date(ts).toISOString()
+    } catch {}
+  }
+
+  // --- Doc stats ---
+  const docsDir = join(sillyspecDir, 'docs')
+  if (existsSync(docsDir)) {
+    const typeMap = { brainstorm: 'design', plan: 'plan', archive: 'archive', changes: 'changes', scan: 'scan', quicklog: 'quicklog' }
+    try {
+      for (const projDir of readdirSync(docsDir, { withFileTypes: true }).filter(d => d.isDirectory())) {
+        for (const typeDir of readdirSync(join(docsDir, projDir.name), { withFileTypes: true }).filter(d => d.isDirectory())) {
+          const key = typeMap[typeDir.name]
+          if (!key) continue
+          const count = countMdFiles(join(docsDir, projDir.name, typeDir.name))
+          result.docStats[key] += count
+          result.docStats.total += count
+        }
+      }
+    } catch {}
+  }
+
+  // --- Git info ---
+  try {
+    result.git.lastCommit = execSync('git log -1 --format=%s', { cwd: projectPath, encoding: 'utf-8' }).trim()
+  } catch {}
+  try {
+    result.git.branch = execSync('git branch --show-current', { cwd: projectPath, encoding: 'utf-8' }).trim()
+  } catch {}
+  try {
+    result.git.dirtyCount = parseInt(execSync('git status --porcelain', { cwd: projectPath, encoding: 'utf-8' }).trim().split('\n').filter(Boolean).length, 10) || 0
+  } catch {}
+
+  return result
+}
+
+export function parseGitDetail(projectPath) {
+  const result = { branch: '', commits: [], untracked: [] }
+  try {
+    result.branch = execSync('git branch --show-current', { cwd: projectPath, encoding: 'utf-8' }).trim()
+  } catch {}
+  try {
+    const log = execSync('git log -5 --format=%h|%s|%an|%aI', { cwd: projectPath, encoding: 'utf-8' }).trim()
+    result.commits = log.split('\n').filter(Boolean).map(line => {
+      const [hash, message, author, date] = line.split('|')
+      return { hash, message, author, date }
+    })
+  } catch {}
+  try {
+    const status = execSync('git status --porcelain', { cwd: projectPath, encoding: 'utf-8' }).trim()
+    result.untracked = status.split('\n').filter(Boolean).map(line => ({
+      status: line.slice(0, 2).trim(),
+      file: line.slice(3)
+    }))
+  } catch {}
+  return result
+}
+
+export function parseTechStackDetail(projectPath) {
+  const result = { frameworks: [], dependencies: {}, devDependencies: {} }
+  const pkgPath = join(projectPath, 'package.json')
+  if (existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'))
+      result.dependencies = pkg.dependencies || {}
+      result.devDependencies = pkg.devDependencies || {}
+      const allDeps = Object.keys({ ...result.dependencies, ...result.devDependencies })
+      for (const pattern of FRAMEWORK_PATTERNS) {
+        if (pattern.keys.some(k => allDeps.includes(k))) {
+          result.frameworks.push(pattern.name)
+        }
+      }
+    } catch {}
+  }
+  return result
+}
+
+export function parseDocsList(projectPath) {
+  const sillyspecDir = join(projectPath, '.sillyspec')
+  const docsDir = join(sillyspecDir, 'docs')
+  const groups = []
+  if (!existsSync(docsDir)) return groups
+  const typeMap = {
+    brainstorm: { label: '设计文档', icon: '📋' },
+    plan: { label: '实现计划', icon: '📐' },
+    archive: { label: '已归档', icon: '📦' },
+    changes: { label: '当前变更', icon: '⚙️' },
+    scan: { label: '架构文档', icon: '🔍' },
+    quicklog: { label: '快速修复', icon: '⚡' }
+  }
+  try {
+    for (const projDir of readdirSync(docsDir, { withFileTypes: true }).filter(d => d.isDirectory())) {
+      for (const typeDir of readdirSync(join(docsDir, projDir.name), { withFileTypes: true }).filter(d => d.isDirectory())) {
+        const cfg = typeMap[typeDir.name]
+        if (!cfg) continue
+        const files = listFilesRecursive(join(docsDir, projDir.name, typeDir.name))
+        if (files.length) {
+          groups.push({ key: typeDir.name, label: cfg.label, icon: cfg.icon, files })
+        }
+      }
+    }
+  } catch {}
+  return groups
+}
+
+function listFilesRecursive(dir) {
+  const files = []
+  try {
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      const p = join(dir, entry.name)
+      if (entry.isDirectory()) {
+        const sub = listFilesRecursive(p)
+        for (const f of sub) f.name = entry.name + '/' + f.name
+        files.push(...sub)
+      } else if (entry.name.endsWith('.md')) {
+        const s = statSync(p)
+        files.push({ name: entry.name, path: p, size: s.size, mtime: s.mtime.toISOString() })
+      }
+    }
+  } catch {}
+  return files
+}
+
+function countMdFiles(dir) {
+  let count = 0
+  try {
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      if (entry.isDirectory()) {
+        count += countMdFiles(join(dir, entry.name))
+      } else if (entry.name.endsWith('.md')) {
+        count++
+      }
+    }
+  } catch {}
+  return count
+}
+
 export function parseDocsTree(projectPath) {
   const sillyspecDir = join(projectPath, '.sillyspec')
   const docsDir = join(sillyspecDir, 'docs')
@@ -97,43 +335,29 @@ export function parseProjectState(projectPath) {
     return null
   }
 
-  let currentStage = 'unknown'
+  let currentStage = ''
   let nextStep = null
   let progress = { stages: {} }
   let stages = []
   let specs = []
   let lastActive = null
 
-  // Read STATE.md for current stage and next step
-  const statePath = join(sillyspecDir, 'STATE.md')
-  if (existsSync(statePath)) {
-    try {
-      const stateContent = readFileSync(statePath, 'utf-8')
-      const stageMatch = stateContent.match(/当前阶段[：:]\s*(\w+)/) || stateContent.match(/current_stage:\s*(\w+)/i)
-      const stepMatch = stateContent.match(/下一步[：:]\s*(.+)/) || stateContent.match(/next_step:\s*(.+)/i)
-
-      if (stageMatch) currentStage = stageMatch[1]
-      if (stepMatch) nextStep = stepMatch[1].trim()
-    } catch (err) {
-      // State file exists but couldn't be read
-    }
-  }
-
-  // Read progress.json from .runtime directory
+  // Read progress.json for current stage
   const progressPath = join(sillyspecDir, '.runtime', 'progress.json')
   if (existsSync(progressPath)) {
     try {
-      const progressContent = readFileSync(progressPath, 'utf-8')
-      progress = JSON.parse(progressContent)
-      stages = Object.keys(progress.stages || {})
+      const progressData = JSON.parse(readFileSync(progressPath, 'utf-8'))
+      progress = progressData
+      currentStage = progressData.currentStage || ''
+      stages = Object.keys(progressData.stages || {})
 
-      // Find last active stage
-      if (progress.stages) {
-        for (const [stageName, stageData] of Object.entries(progress.stages)) {
-          if (stageData.lastActive) {
-            if (!lastActive || new Date(stageData.lastActive) > new Date(lastActive)) {
-              lastActive = stageData.lastActive
-            }
+      // Find last active
+      if (progressData.lastActive) lastActive = progressData.lastActive
+      if (progressData.stages) {
+        for (const [stageName, stageData] of Object.entries(progressData.stages)) {
+          if (stageData.lastActive || stageData.startedAt) {
+            const t = stageData.lastActive || stageData.startedAt
+            if (!lastActive || new Date(t) > new Date(lastActive)) lastActive = t
           }
         }
       }

package/packages/dashboard/src/App.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="h-screen w-screen flex flex-col overflow-hidden font-[DM_Sans,sans-serif] relative" style="background-color: #151820;">
+  <n-config-provider :theme-overrides="themeOverrides">
+  <div class="h-screen w-screen flex flex-col overflow-hidden font-[DM_Sans,sans-serif] relative" style="background-color: #F5F5F7;">
     <!-- Ambient background -->
     <div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(ellipse 60% 40% at 10% 20%, rgba(251,191,36,0.04) 0%, transparent 70%), radial-gradient(ellipse 50% 50% at 90% 80%, rgba(251,191,36,0.02) 0%, transparent 70%);" />
 
@@ -11,7 +12,7 @@
       <!-- Left: Project List -->
       <aside
         class="flex-shrink-0 relative overflow-hidden"
-        :style="`width: ${leftWidth}px; background: #1A1E28; border-right: none;`"
+        :style="`width: ${leftWidth}px; background: #FFFFFF; border-right: none;`"
       >
         <ProjectList
           :projects="dashboard.state.projects"
@@ -26,13 +27,14 @@
 
       <!-- Left ↔ Center resize handle -->
       <div
-        class="w-[2px] flex-shrink-0 cursor-col-resize hover:bg-[#FBBF24] active:bg-[#FBBF24] relative z-20"
+        class="w-[2px] flex-shrink-0 cursor-col-resize hover:bg-[#D97706] active:bg-[#D97706] relative z-20"
         style="background: #2A3040;"
         @mousedown="startDragLeft"
       />
 
       <!-- Center: Pipeline View -->
-      <main class="flex-1 overflow-hidden accent-stripe" style="min-width: 300px;">
+      <main class="flex-1 overflow-hidden accent-stripe flex flex-col" style="min-width: 300px;">
+        <ProjectOverview :project="dashboard.state.activeProject" @show-detail="handleShowDetail" />
         <PipelineView
           :project="dashboard.state.activeProject"
           :active-step="dashboard.state.activeStep"
@@ -50,7 +52,7 @@
       <!-- Center ↔ Right resize handle -->
       <div
         v-if="dashboard.state.isPanelOpen"
-        class="w-[2px] flex-shrink-0 cursor-col-resize hover:bg-[#FBBF24] active:bg-[#FBBF24] relative z-20"
+        class="w-[2px] flex-shrink-0 cursor-col-resize hover:bg-[#D97706] active:bg-[#D97706] relative z-20"
         style="background: #2A3040;"
         @mousedown="startDragRight"
       />
@@ -61,14 +63,17 @@
           'flex-shrink-0 relative overflow-hidden',
           dashboard.state.isPanelOpen ? '' : 'w-0'
         ]"
-        :style="dashboard.state.isPanelOpen ? `width: ${rightWidth}px; background: #1A1E28; transition: none;` : 'background: #1A1E28;'"
+        :style="dashboard.state.isPanelOpen ? `width: ${rightWidth}px; background: #FFFFFF; transition: none;` : 'background: #FFFFFF;'"
       >
         <DetailPanel
           :is-open="dashboard.state.isPanelOpen"
           :active-step="dashboard.state.activeStep"
           :logs="dashboard.state.logs"
-          @close="dashboard.closePanel"
+          :detail-type="detailType"
+          :detail-data="detailData"
+          @close="handleDetailClose"
           @clear-logs="dashboard.clearLogs"
+          @open-doc-file="handleOpenDocFromDetail"
         />
       </aside>
     </div>
@@ -94,10 +99,11 @@
       @select-stage="handleSelectStage"
     />
   </div>
+  </n-config-provider>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, readonly } from 'vue'
 import { useWebSocket } from './composables/useWebSocket.js'
 import { useDashboard } from './composables/useDashboard.js'
 import { useDashboardKeyboard } from './composables/useKeyboard.js'
@@ -105,6 +111,7 @@ import ProjectList from './components/ProjectList.vue'
 import PipelineView from './components/PipelineView.vue'
 import DetailPanel from './components/DetailPanel.vue'
 import ActionBar from './components/ActionBar.vue'
+import ProjectOverview from './components/ProjectOverview.vue'
 import CommandPalette from './components/CommandPalette.vue'
 
 // Composables
@@ -113,6 +120,8 @@ const dashboard = useDashboard()
 const isCommandPaletteOpen = ref(false)
 const executionResult = ref(null)
 const scanPaths = ref([])
+const detailType = ref(null)
+const detailData = ref(null)
 
 // Panel resize state
 const STORAGE_KEY = 'dashboard-panel-widths'
@@ -264,6 +273,43 @@ function handleAddScanPath(path) {
 function handleRemoveScanPath(path) {
   ws.send({ type: 'scan:remove-path', data: { path } })
 }
+
+async function handleShowDetail(type) {
+  const project = dashboard.state.activeProject
+  if (!project?.path) return
+  detailType.value = type
+  detailData.value = null
+  dashboard.openPanel()
+  try {
+    const url = `/api/projects/${encodeURIComponent(project.path)}/detail?type=${type}`
+    const res = await fetch(url)
+    if (res.ok) detailData.value = await res.json()
+  } catch {}
+}
+
+function handleDetailClose() {
+  detailType.value = null
+  detailData.value = null
+  dashboard.closePanel()
+}
+
+function handleOpenDocFromDetail(file) {
+  detailType.value = null
+  detailData.value = null
+  dashboard.setActiveTab('docs')
+  handleSelectDocFile(file)
+}
+
+const themeOverrides = {
+  common: {
+    primaryColor: '#D97706',
+    primaryColorHover: '#F59E0B',
+    primaryColorPressed: '#B45309',
+    borderRadius: '6px',
+    fontFamily: 'DM Sans, sans-serif',
+    fontFamilyMono: 'JetBrains Mono, monospace'
+  }
+}
 </script>
 
 <style>

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

@@ -1,16 +1,16 @@
 <template>
-  <div class="h-12 flex items-center justify-between px-5 relative" style="background: rgba(17,17,19,0.9); backdrop-filter: blur(20px); border-top: 1px solid #1F1F22;">
+  <div class="h-12 flex items-center justify-between px-5 relative" style="background: rgba(17,17,19,0.9); backdrop-filter: blur(20px); border-top: 1px solid #F0F0F3;">
     <!-- Ambient top glow -->
     <div class="absolute inset-x-0 top-0 h-px" style="background: linear-gradient(90deg, transparent, rgba(251,191,36,0.1), transparent);"></div>
 
     <!-- Left: Status -->
     <div class="flex items-center gap-3">
       <div v-if="project" class="flex items-center gap-2">
-        <span class="text-[11px] font-[JetBrains_Mono,monospace]" style="color: #8B8FA3;">{{ project.name }}</span>
-        <span style="color: #1F1F22;">|</span>
+        <span class="text-[11px] font-[JetBrains_Mono,monospace]" style="color: #6B7280;">{{ project.name }}</span>
+        <span style="color: #F0F0F3;">|</span>
         <StageBadge v-if="project.state?.currentStage" :status="getProjectStatus()" :label="stageLabel()" />
       </div>
-      <div v-else class="text-[10px] font-[JetBrains_Mono,monospace]" style="color: #3A3A3D;">
+      <div v-else class="text-[10px] font-[JetBrains_Mono,monospace]" style="color: #D1D1D6;">
         未选择项目
       </div>
     </div>
@@ -18,11 +18,11 @@
     <!-- Center: Execution -->
     <div class="flex items-center gap-2">
       <div v-if="isExecuting" class="flex items-center gap-2">
-        <div class="w-1 h-1 rounded-full animate-pulse-dot" style="background: #FBBF24;" />
-        <span class="text-[10px] font-[JetBrains_Mono,monospace]" style="color: #FBBF24;">执行中...</span>
+        <div class="w-1 h-1 rounded-full animate-pulse-dot" style="background: #D97706;" />
+        <span class="text-[10px] font-[JetBrains_Mono,monospace]" style="color: #D97706;">执行中...</span>
       </div>
       <div v-else-if="executionResult" class="flex items-center gap-1.5">
-        <span class="text-[10px] font-[JetBrains_Mono,monospace]" :style="{ color: executionResult.exitCode === 0 ? '#34D399' : '#EF4444' }">
+        <span class="text-[10px] font-[JetBrains_Mono,monospace]" :style="{ color: executionResult.exitCode === 0 ? '#16A34A' : '#DC2626' }">
           {{ executionResult.exitCode === 0 ? '● 完成' : `● 失败 (${executionResult.exitCode})` }}
         </span>
       </div>
@@ -30,46 +30,30 @@
 
     <!-- Right: Actions -->
     <div class="flex items-center gap-1">
-      <button
-        @click="$emit('toggle-panel')"
-        class="p-1.5 rounded-sm transition-colors duration-100"
-        style="color: #8B8FA3;"
-        @mouseenter="$event.target.style.color='#FBBF24';$event.target.style.background='rgba(251,191,36,0.06)'"
-        @mouseleave="$event.target.style.color='#8B8FA3';$event.target.style.background='transparent'"
-        title="切换详情面板"
-      >
-        <svg :class="['w-3.5 h-3.5 transition-transform duration-200', { 'rotate-180': !isPanelOpen }]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-        </svg>
-      </button>
+      <n-button quaternary size="tiny" @click="$emit('toggle-panel')" title="切换详情面板">
+        <template #icon>
+          <svg :class="['w-3.5 h-3.5 transition-transform duration-200', { 'rotate-180': !isPanelOpen }]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </template>
+      </n-button>
 
-      <button
-        v-if="isExecuting"
-        @click="$emit('kill')"
-        class="px-2.5 py-1 rounded-sm text-[10px] font-[JetBrains_Mono,monospace] transition-colors duration-100"
-        style="background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: #EF4444;"
-      >
+      <n-button v-if="isExecuting" size="tiny" type="error" @click="$emit('kill')">
         停止
-      </button>
+      </n-button>
 
-      <button
-        @click="$emit('open-palette')"
-        class="p-1.5 rounded-sm transition-colors duration-100"
-        style="color: #8B8FA3;"
-        @mouseenter="$event.target.style.color='#FBBF24';$event.target.style.background='rgba(251,191,36,0.06)'"
-        @mouseleave="$event.target.style.color='#8B8FA3';$event.target.style.background='transparent'"
-        title="命令面板 (⌘K)"
-      >
-        <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="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-        </svg>
-      </button>
+      <n-button quaternary size="tiny" @click="$emit('open-palette')" title="命令面板 (⌘K)">
+        <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="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </template>
+      </n-button>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
 import StageBadge from './StageBadge.vue'
 
 const props = defineProps({

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

@@ -1,67 +1,49 @@
 <template>
-  <Teleport to="body">
-    <Transition name="backdrop">
-      <div v-if="isOpen" class="fixed inset-0 z-40" style="background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);" @click="close" />
-    </Transition>
-
-    <Transition name="palette">
-      <div v-if="isOpen" class="fixed left-1/2 top-[18%] -translate-x-1/2 w-full max-w-md z-50">
-        <div class="overflow-hidden rounded-md" style="background: #141416; border: 1px solid #2A2A2D; box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(251,191,36,0.05);">
-          <!-- Search -->
-          <div class="px-4 py-3" style="border-bottom: 1px solid #1F1F22;">
-            <div class="flex items-center gap-3">
-              <svg class="w-3.5 h-3.5 flex-shrink-0" style="color: #8B8FA3;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-              </svg>
-              <input
-                ref="searchInput"
-                v-model="searchQuery"
-                type="text"
-                placeholder="搜索项目或命令..."
-                class="flex-1 bg-transparent border-none outline-none text-[12px] font-[JetBrains_Mono,monospace]"
-                style="color: #E4E4E7;"
-                @keydown="handleKeydown"
-              />
-              <kbd v-if="searchQuery" class="text-[9px] px-1 py-0.5 rounded-sm font-mono-log" style="color: #8B8FA3; background: #0A0A0B; border: 1px solid #2A2A2D;">ESC</kbd>
-            </div>
-          </div>
+  <n-modal :show="isOpen" @update:show="$emit('close')" :mask-closable="true" transform-origin="center" style="max-width: 480px;">
+    <div class="overflow-hidden rounded-md" style="background: #FFFFFF; border: 1px solid #E5E5EA; box-shadow: 0 25px 60px rgba(0,0,0,0.1);">
+      <!-- Search -->
+      <div class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
+        <n-input v-model:value="searchQuery" placeholder="搜索项目或命令..." ref="searchInput" @keydown="handleKeydown" size="small">
+          <template #prefix>
+            <svg class="w-3.5 h-3.5" style="color: #6B7280;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+            </svg>
+          </template>
+        </n-input>
+      </div>
 
-          <!-- Results -->
-          <div class="max-h-72 overflow-y-auto">
-            <div v-if="filteredItems.length === 0" class="py-10 text-center">
-              <p class="text-[11px] font-[JetBrains_Mono,monospace]" style="color: #3A3A3D;">无结果</p>
+      <!-- Results -->
+      <div class="max-h-72 overflow-y-auto">
+        <n-empty v-if="filteredItems.length === 0" description="无结果" style="padding: 40px 0;" />
+        <div v-else class="py-0.5">
+          <div
+            v-for="(item, index) in filteredItems"
+            :key="item.id"
+            :class="['px-4 py-2.5 cursor-pointer transition-colors duration-100 flex items-center gap-3']"
+            :style="{ background: selectedIndex === index ? 'rgba(217,119,6,0.06)' : 'transparent' }"
+            @click="selectItem(item)"
+            @mouseenter="selectedIndex = index"
+          >
+            <div class="w-6 h-6 rounded-sm flex items-center justify-center text-[10px] font-[JetBrains_Mono,monospace] flex-shrink-0" style="background: #F0F0F3; border: 1px solid #F0F0F3; color: #6B7280;">
+              {{ item.type === 'project' ? '□' : '◇' }}
             </div>
-            <div v-else class="py-0.5">
-              <div
-                v-for="(item, index) in filteredItems"
-                :key="item.id"
-                :class="['px-4 py-2.5 cursor-pointer transition-colors duration-100 flex items-center gap-3']"
-                :style="{ background: selectedIndex === index ? 'rgba(251,191,36,0.06)' : 'transparent' }"
-                @click="selectItem(item)"
-                @mouseenter="selectedIndex = index"
-              >
-                <div class="w-6 h-6 rounded-sm flex items-center justify-center text-[10px] font-[JetBrains_Mono,monospace] flex-shrink-0" style="background: #0A0A0B; border: 1px solid #1F1F22; color: #8B8FA3;">
-                  {{ item.type === 'project' ? '□' : '◇' }}
-                </div>
-                <div class="flex-1 min-w-0">
-                  <div class="text-[12px] font-medium truncate font-[JetBrains_Mono,monospace]" style="color: #E4E4E7;">{{ item.title }}</div>
-                  <div class="text-[10px] truncate" style="color: #8B8FA3;">{{ item.subtitle }}</div>
-                </div>
-                <StageBadge v-if="item.status" :status="item.status" size="sm" />
-              </div>
+            <div class="flex-1 min-w-0">
+              <div class="text-[12px] font-medium truncate font-[JetBrains_Mono,monospace]" style="color: #1C1C1E;">{{ item.title }}</div>
+              <div class="text-[10px] truncate" style="color: #6B7280;">{{ item.subtitle }}</div>
             </div>
-          </div>
-
-          <!-- Footer -->
-          <div class="px-4 py-2 flex items-center gap-4 text-[9px] font-mono-log" style="border-top: 1px solid #1F1F22; color: #3A3A3D;">
-            <span><kbd class="px-1 rounded-sm" style="background: #0A0A0B; border: 1px solid #1F1F22;">↑↓</kbd> 导航</span>
-            <span><kbd class="px-1 rounded-sm" style="background: #0A0A0B; border: 1px solid #1F1F22;">↵</kbd> 打开</span>
-            <span><kbd class="px-1 rounded-sm" style="background: #0A0A0B; border: 1px solid #1F1F22;">esc</kbd> 关闭</span>
+            <StageBadge v-if="item.status" :status="item.status" size="sm" />
           </div>
         </div>
       </div>
-    </Transition>
-  </Teleport>
+
+      <!-- Footer -->
+      <div class="px-4 py-2 flex items-center gap-4 text-[9px] font-mono-log" style="border-top: 1px solid #F0F0F3; color: #D1D1D6;">
+        <span><kbd class="px-1 rounded-sm" style="background: #F0F0F3; border: 1px solid #F0F0F3;">↑↓</kbd> 导航</span>
+        <span><kbd class="px-1 rounded-sm" style="background: #F0F0F3; border: 1px solid #F0F0F3;">↵</kbd> 打开</span>
+        <span><kbd class="px-1 rounded-sm" style="background: #F0F0F3; border: 1px solid #F0F0F3;">esc</kbd> 关闭</span>
+      </div>
+    </div>
+  </n-modal>
 </template>
 
 <script setup>
@@ -106,12 +88,5 @@ function handleKeydown(e) {
   else if (e.key === 'Escape') { e.preventDefault(); close() }
 }
 watch(filteredItems, () => { selectedIndex.value = 0 })
-watch(() => props.isOpen, (v) => { if (v) nextTick(() => { searchInput.value?.focus() }) })
+watch(() => props.isOpen, (v) => { if (v) { nextTick(() => { searchInput.value?.focus() }) } })
 </script>
-
-<style scoped>
-.backdrop-enter-active, .backdrop-leave-active { transition: opacity 150ms ease; }
-.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
-.palette-enter-active, .palette-leave-active { transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1); }
-.palette-enter-from, .palette-leave-to { opacity: 0; transform: translate(-50%, -8px) scale(0.98); }
-</style>