sillyspec 3.20.2 → 3.20.3

package/packages/dashboard/src/App.vue

@@ -4,127 +4,92 @@
     <!-- 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%);" />
 
-    <!-- 上层：多项目概览区域 -->
+    <!-- Main Content -->
     <div
-      class="relative overflow-hidden flex-shrink-0"
-      :style="{ height: layout.overviewHeight + '%' }"
+      class="flex-1 flex overflow-hidden relative z-10"
+      :style="isDragging ? 'user-select: none' : ''"
     >
-      <!-- 项目概览 -->
-      <ProjectOverview
-        :projects="dashboard.state.projects"
-        :active-project="dashboard.state.activeProject"
-        @select="handleSelectProject"
+      <!-- Left: Project List -->
+      <aside
+        class="flex-shrink-0 relative overflow-hidden"
+        :style="`width: ${leftWidth}px; background: #FFFFFF; border-right: none;`"
+      >
+        <ProjectList
+          :projects="dashboard.state.projects"
+          :active-project="dashboard.state.activeProject"
+          :is-loading="dashboard.state.isLoading"
+          :scan-paths="scanPaths"
+          @select="handleSelectProject"
+          @scan:add-path="handleAddScanPath"
+          @scan:remove-path="handleRemoveScanPath"
+        />
+      </aside>
+
+      <!-- Left ↔ Center resize handle -->
+      <div
+        class="w-[2px] flex-shrink-0 cursor-col-resize hover:bg-[#D97706] active:bg-[#D97706] relative z-20"
+        style="background: #2A3040;"
+        @mousedown="startDragLeft"
       />
-    </div>
-
-    <!-- 垂直拖动分割线 -->
-    <div
-      class="h-[6px] flex-shrink-0 cursor-row-resize hover:bg-[#D97706] active:bg-[#D97706] relative z-20 transition-colors duration-200"
-      :class="{ 'bg-[#D97706]': isDragging }"
-      style="background: #2A3040;"
-      @mousedown="startDragVertical"
-    >
-      <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
-        <div class="w-10 h-1 bg-white/30 rounded-full"></div>
-      </div>
-    </div>
-
-    <!-- 下层：详情区域 -->
-    <div class="flex-1 overflow-hidden flex flex-col">
-      <!-- 详情内容 -->
-      <div class="flex-1 flex overflow-hidden">
-        <!-- 左栏：项目信息 -->
-        <div
-          class="detail-column flex-shrink-0 bg-white overflow-hidden"
-          :style="{ width: layout.columnWidths[0] + '%', minWidth: '150px' }"
-          :class="{ 'fade-in': projectSwitched }"
-        >
-          <div v-if="activeProject" class="project-info">
-            <div class="detail-section-title">项目信息</div>
-            <div class="detail-item">
-              <div class="detail-label">项目名称</div>
-              <div class="detail-value">{{ activeProject.name }}</div>
-            </div>
-            <div class="detail-item">
-              <div class="detail-label">路径</div>
-              <div class="detail-value detail-path">{{ shortPath }}</div>
-            </div>
-            <div class="detail-item">
-              <div class="detail-label">当前阶段</div>
-              <div class="detail-value">{{ currentStageLabel }}</div>
-            </div>
-            <div class="detail-item">
-              <div class="detail-label">进度</div>
-              <div class="detail-value">{{ progressLabel }}</div>
-            </div>
-          </div>
-          <div v-else class="text-gray-400 text-sm">选择项目查看详情</div>
-        </div>
-
-        <!-- 水平拖动分割线 1 -->
-        <div
-          class="w-[4px] flex-shrink-0 cursor-col-resize hover:bg-[#D97706] active:bg-[#D97706] relative z-20 transition-colors duration-200"
-          style="background: #E5E7EB;"
-          @mousedown="startDragHorizontal(0)"
-        ></div>
-
-        <!-- 中栏：Pipeline -->
-        <div
-          class="pipeline-column flex-1 bg-white overflow-hidden"
-          :style="{ minWidth: '200px' }"
-        >
-          <PipelineView
-            :project="dashboard.state.activeProject"
-            :active-step="dashboard.state.activeStep"
-            :active-tab="dashboard.state.activeTab"
-            :docs="dashboard.state.docs"
-            :selected-doc-file="dashboard.state.selectedDocFile"
-            :doc-content="dashboard.state.docContent"
-            :doc-loading="dashboard.state.docLoading"
-            @select-step="handleSelectStep"
-            @switch-tab="handleSwitchTab"
-            @select-doc-file="handleSelectDocFile"
-          />
-        </div>
 
-        <!-- 水平拖动分割线 2 -->
-        <div
-          class="w-[4px] flex-shrink-0 cursor-col-resize hover:bg-[#D97706] active:bg-[#D97706] relative z-20 transition-colors duration-200"
-          style="background: #E5E7EB;"
-          @mousedown="startDragHorizontal(1)"
-        ></div>
-
-        <!-- 右栏：日志/详情 -->
-        <div
-          class="activity-column flex-shrink-0 bg-white overflow-hidden flex flex-col"
-          :style="{ width: layout.columnWidths[2] + '%', minWidth: '200px' }"
-        >
-          <div class="detail-section-title px-4 pt-4">最近活动</div>
-          <div class="flex-1 overflow-y-auto px-4 pb-4">
-            <div
-              v-for="(log, i) in recentLogs"
-              :key="i"
-              class="log-entry"
-              :class="{ success: log.includes('✅'), error: log.includes('❌') }"
-            >
-              {{ log }}
-            </div>
-            <div v-if="recentLogs.length === 0" class="text-gray-400 text-sm">暂无活动</div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Bottom: Action Bar -->
-      <ActionBar
-        :project="dashboard.state.activeProject"
-        :is-executing="dashboard.state.executingProject !== null"
-        :execution-result="executionResult"
-        @execute="handleExecute"
-        @kill="handleKill"
-        @open-palette="isCommandPaletteOpen = true"
+      <!-- Center: Pipeline View -->
+      <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"
+          :active-tab="dashboard.state.activeTab"
+          :docs="dashboard.state.docs"
+          :selected-doc-file="dashboard.state.selectedDocFile"
+          :doc-content="dashboard.state.docContent"
+          :doc-loading="dashboard.state.docLoading"
+          @select-step="handleSelectStep"
+          @switch-tab="handleSwitchTab"
+          @select-doc-file="handleSelectDocFile"
+        />
+      </main>
+
+      <!-- Center ↔ Right resize handle -->
+      <div
+        v-if="dashboard.state.isPanelOpen"
+        class="w-[2px] flex-shrink-0 cursor-col-resize hover:bg-[#D97706] active:bg-[#D97706] relative z-20"
+        style="background: #2A3040;"
+        @mousedown="startDragRight"
       />
+
+      <!-- Right: Detail Panel -->
+      <aside
+        :class="[
+          'flex-shrink-0 relative overflow-hidden',
+          dashboard.state.isPanelOpen ? '' : 'w-0'
+        ]"
+        :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"
+          :detail-type="detailType"
+          :detail-data="detailData"
+          @close="handleDetailClose"
+          @clear-logs="dashboard.clearLogs"
+          @open-doc-file="handleOpenDocFromDetail"
+        />
+      </aside>
     </div>
 
+    <!-- Bottom: Action Bar -->
+    <ActionBar
+      :project="dashboard.state.activeProject"
+      :is-executing="dashboard.state.executingProject !== null"
+      :execution-result="executionResult"
+      :is-panel-open="dashboard.state.isPanelOpen"
+      @execute="handleExecute"
+      @kill="handleKill"
+      @toggle-panel="dashboard.togglePanel"
+      @open-palette="isCommandPaletteOpen = true"
+    />
+
     <!-- Command Palette Overlay -->
     <CommandPalette
       :is-open="isCommandPaletteOpen"
@@ -133,195 +98,110 @@
       @select-project="handleSelectProject"
       @select-stage="handleSelectStage"
     />
-
-    <!-- 尺寸指示器 -->
-    <div
-      v-if="isDragging"
-      class="fixed bottom-5 left-5 bg-black/70 text-white px-3 py-2 rounded text-xs font-mono z-50"
-    >
-      {{ sizeIndicatorText }}
-    </div>
   </div>
   </n-config-provider>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, onMounted, readonly } from 'vue'
 import { useWebSocket } from './composables/useWebSocket.js'
 import { useDashboard } from './composables/useDashboard.js'
-import { useLayout } from './composables/useLayout.js'
+import { useDashboardKeyboard } from './composables/useKeyboard.js'
+import ProjectList from './components/ProjectList.vue'
 import PipelineView from './components/PipelineView.vue'
-import ProjectOverview from './components/ProjectOverview.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
 const ws = useWebSocket()
 const dashboard = useDashboard()
-const layoutManager = useLayout()
-
-// 解构 layout
-const { layout, isDragging, startDrag, endDrag } = layoutManager
-
-// 状态
 const isCommandPaletteOpen = ref(false)
 const executionResult = ref(null)
-const projectSwitched = ref(false)
-const dragState = ref({
-  active: false,
-  type: null,
-  startX: 0,
-  startY: 0,
-  startValue: 0
-})
-
-// 尺寸指示器文本
-const sizeIndicatorText = computed(() => {
-  if (dragState.value.type === 'vertical') {
-    return `概览 ${Math.round(layout.overviewHeight)}% | 详情 ${Math.round(100 - layout.overviewHeight)}%`
-  } else if (dragState.value.type === 'horizontal') {
-    return `三栏: ${Math.round(layout.columnWidths[0])}% | ${Math.round(layout.columnWidths[1])}% | ${Math.round(layout.columnWidths[2])}%`
-  }
-  return ''
-})
-
-// 当前项目
-const activeProject = computed(() => dashboard.state.activeProject)
-
-// 项目短路径
-const shortPath = computed(() => {
-  const path = activeProject.value?.path || ''
-  return path.replace(/^\/Users\/[^/]+/, '~')
-})
+const scanPaths = ref([])
+const detailType = ref(null)
+const detailData = ref(null)
+
+// Panel resize state
+const STORAGE_KEY = 'dashboard-panel-widths'
+const MIN_LEFT = 180
+const MIN_CENTER = 300
+const MIN_RIGHT = 260
+const DEFAULT_LEFT = 240
+const DEFAULT_RIGHT = 340
+
+const leftWidth = ref(DEFAULT_LEFT)
+const rightWidth = ref(DEFAULT_RIGHT)
+const isDragging = ref(false)
+
+// Load persisted widths
+try {
+  const saved = JSON.parse(localStorage.getItem(STORAGE_KEY))
+  if (saved?.left >= MIN_LEFT) leftWidth.value = saved.left
+  if (saved?.right >= MIN_RIGHT) rightWidth.value = saved.right
+} catch {}
+
+function persistWidths() {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify({ left: leftWidth.value, right: rightWidth.value }))
+}
 
-// 当前阶段标签
-const currentStageLabel = computed(() => {
-  const stage = activeProject.value?.state?.currentStage
-  if (!stage) return '未开始'
-  const stageNames = {
-    scan: '代码扫描',
-    brainstorm: '需求探索',
-    plan: '实现计划',
-    execute: '波次执行',
-    verify: '验证确认',
-    archive: '归档变更',
-    quick: '快速任务',
-    explore: '自由探索'
+function startDragLeft(e) {
+  e.preventDefault()
+  isDragging.value = true
+  const startX = e.clientX
+  const startW = leftWidth.value
+  const onMove = (ev) => {
+    const delta = ev.clientX - startX
+    leftWidth.value = Math.max(MIN_LEFT, startW + delta)
   }
-  return stageNames[stage] || stage
-})
-
-// 进度标签
-const progressLabel = computed(() => {
-  const progress = activeProject.value?.state?.progress
-  if (!progress) return '-'
-  const currentStage = activeProject.value?.state?.currentStage
-  const stageProgress = currentStage ? progress.stages?.[currentStage] : null
-  if (!stageProgress) return '-'
-  if (stageProgress.completedSteps !== undefined && stageProgress.steps !== undefined) {
-    return `${stageProgress.completedSteps}/${stageProgress.steps} 步骤`
+  const onUp = () => {
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+    isDragging.value = false
+    persistWidths()
   }
-  return stageProgress.status || '-'
-})
-
-// 最近日志（最近 10 条）
-const recentLogs = computed(() => {
-  const logs = dashboard.state.logs || []
-  return logs.slice(-10).reverse()
-})
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp)
+}
 
-// 垂直拖动（概览 ↔ 详情）
-function startDragVertical(e) {
+function startDragRight(e) {
   e.preventDefault()
-  dragState.value = {
-    active: true,
-    type: 'vertical',
-    startY: e.clientY,
-    startValue: layout.overviewHeight
-  }
-  document.body.classList.add('resizing')
-  startDrag('vertical')
-
+  isDragging.value = true
+  const startX = e.clientX
+  const startW = rightWidth.value
   const onMove = (ev) => {
-    const deltaY = ev.clientY - dragState.value.startY
-    const windowHeight = window.innerHeight
-    const deltaPercent = (deltaY / windowHeight) * 100
-    const newHeight = dragState.value.startValue + deltaPercent
-    layout.overviewHeight = Math.max(15, Math.min(75, newHeight))
+    const delta = startX - ev.clientX
+    rightWidth.value = Math.max(MIN_RIGHT, startW + delta)
   }
-
   const onUp = () => {
-    document.body.classList.remove('resizing')
-    dragState.value.active = false
-    dragState.value.type = null
     window.removeEventListener('mousemove', onMove)
     window.removeEventListener('mouseup', onUp)
-    endDrag()
+    isDragging.value = false
+    persistWidths()
   }
-
   window.addEventListener('mousemove', onMove)
   window.addEventListener('mouseup', onUp)
 }
 
-// 水平拖动（三栏分割）
-function startDragHorizontal(colIndex) {
-  return (e) => {
-    e.preventDefault()
-    dragState.value = {
-      active: true,
-      type: 'horizontal',
-      colIndex,
-      startX: e.clientX,
-      startWidths: [...layout.columnWidths]
-    }
-    document.body.classList.add('resizing')
-    startDrag('horizontal')
-
-    const onMove = (ev) => {
-      const deltaX = ev.clientX - dragState.value.startX
-      const containerWidth = document.querySelector('.flex-1.flex.overflow-hidden').offsetWidth
-      const deltaPercent = (deltaX / containerWidth) * 100
-
-      if (colIndex === 0) {
-        // 左栏 ↔ 中栏
-        const newWidth1 = ((dragState.value.startWidths[0] * containerWidth / 100) + deltaX) / containerWidth * 100
-        const newWidth2 = ((dragState.value.startWidths[1] * containerWidth / 100) - deltaX) / containerWidth * 100
-        if (newWidth1 >= 10 && newWidth2 >= 10) {
-          layout.columnWidths[0] = newWidth1
-          layout.columnWidths[1] = newWidth2
-        }
-      } else {
-        // 中栏 ↔ 右栏
-        const newWidth2 = ((dragState.value.startWidths[1] * containerWidth / 100) + deltaX) / containerWidth * 100
-        const newWidth3 = ((dragState.value.startWidths[2] * containerWidth / 100) - deltaX) / containerWidth * 100
-        if (newWidth2 >= 10 && newWidth3 >= 10) {
-          layout.columnWidths[1] = newWidth2
-          layout.columnWidths[2] = newWidth3
-        }
-      }
-    }
-
-    const onUp = () => {
-      document.body.classList.remove('resizing')
-      dragState.value.active = false
-      dragState.value.type = null
-      window.removeEventListener('mousemove', onMove)
-      window.removeEventListener('mouseup', onUp)
-      endDrag()
+// Keyboard shortcuts
+useDashboardKeyboard({
+  onOpenCommandPalette: () => { isCommandPaletteOpen.value = true },
+  onClose: () => {
+    if (isCommandPaletteOpen.value) {
+      isCommandPaletteOpen.value = false
+    } else if (dashboard.state.activeStep) {
+      dashboard.state.activeStep = null
+    } else {
+      dashboard.closePanel()
     }
-
-    window.addEventListener('mousemove', onMove)
-    window.addEventListener('mouseup', onUp)
   }
-}
+})
 
-// WebSocket 事件处理
+// WebSocket event handlers
 onMounted(() => {
-  ws.on('projects:init', handleProjectsUpdate)
-  ws.on('projects:updated', handleProjectsUpdate)
-  ws.on('project:update', (project) => {
-    dashboard.updateProject(project)
-  })
+  ws.on('projects:init', (projects) => { dashboard.updateProjects(projects) })
+  ws.on('projects:updated', (projects) => { dashboard.updateProjects(projects) })
   ws.on('cli:output', (data) => {
     if (data.projectName === dashboard.activeProjectName.value) {
       dashboard.appendLog(data.output)
@@ -349,34 +229,22 @@ onMounted(() => {
   ws.on('docs:tree', (docs) => { dashboard.updateDocs(docs) })
 })
 
-function handleProjectsUpdate(projects) {
-  const previousPath = dashboard.activeProjectPath.value
-  dashboard.updateProjects(projects)
-
-  if (!previousPath && dashboard.state.activeProject?.path) {
-    ws.send({ type: 'docs:get', data: { projectPath: dashboard.state.activeProject.path } })
-  }
-}
-
 function handleSelectProject(project) {
   dashboard.selectProject(project)
   dashboard.selectDocFile(null)
   dashboard.setDocContent('')
-  // 触发淡入动画
-  projectSwitched.value = false
-  setTimeout(() => { projectSwitched.value = true }, 10)
-  setTimeout(() => { projectSwitched.value = false }, 210)
+  // Request docs for this project
   if (project?.path) {
     ws.send({ type: 'docs:get', data: { projectPath: project.path } })
   }
 }
-
 function handleSelectStage({ project, stage }) { dashboard.selectProject(project) }
 function handleSelectStep(step) { dashboard.selectStep(step) }
 function handleSwitchTab(tab) { dashboard.setActiveTab(tab) }
 function handleSelectDocFile(file) {
   dashboard.selectDocFile(file)
   dashboard.setDocLoading(true)
+  // Fetch doc content via REST API
   fetch(`/api/docs/content?path=${encodeURIComponent(file.path)}`)
     .then(r => r.ok ? r.text() : '')
     .then(content => {
@@ -388,24 +256,49 @@ function handleSelectDocFile(file) {
       dashboard.setDocLoading(false)
     })
 }
-
 function handleExecute() {
   const projectName = dashboard.activeProjectName.value
   if (!projectName) return
-  const progress = dashboard.state.activeProject?.state?.progress
-  const stages = ['scan', 'brainstorm', 'plan', 'execute', 'verify', 'archive']
-  const currentStage = dashboard.state.activeProject?.state?.currentStage
-    || stages.find(stage => progress?.stages?.[stage]?.status !== 'completed')
-    || 'scan'
   dashboard.clearLogs()
-  ws.send({ type: 'cli:execute', data: { projectName, command: `run ${currentStage}` } })
+  ws.send({ type: 'cli:execute', data: { projectName, command: 'next' } })
 }
-
 function handleKill() {
   const projectName = dashboard.activeProjectName.value
   if (!projectName) return
   ws.send({ type: 'cli:kill', data: { projectName } })
 }
+function handleAddScanPath(path) {
+  ws.send({ type: 'scan:add-path', data: { 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: {
@@ -425,134 +318,8 @@ const themeOverrides = {
 body {
   font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-#app { width: 100vw; height: 100vh; overflow: hidden; min-width: 0; }
-
-/* 拖动时禁用选择 */
-body.resizing {
-  user-select: none;
-}
-body.resizing * {
-  cursor: inherit !important;
-}
-
-/* 响应式：小窗口时调整布局 */
-@media (max-width: 1280px) {
-  .detail-section-title {
-    font-size: 11px;
-  }
-  .detail-value {
-    font-size: 13px;
-  }
-  .log-entry {
-    font-size: 11px;
-  }
-}
-
-/* 项目信息样式 */
-.detail-column,
-.activity-column {
-  padding: 18px 20px;
-}
-
-.pipeline-column {
-  border-left: 1px solid #EEF0F4;
-  border-right: 1px solid #EEF0F4;
-}
-
-.pipeline-column > * {
-  min-width: 0;
-  padding-left: 18px;
-  padding-right: 18px;
-}
-
-.activity-column {
-  gap: 12px;
-}
-
-.activity-column .detail-section-title {
-  padding: 0;
-  margin-bottom: 0;
-}
-
-.activity-column > .flex-1 {
-  padding: 0;
-}
-
-.project-info {
-  min-width: 0;
-}
-
-.detail-section-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: #9CA3AF;
-  text-transform: uppercase;
-  margin-bottom: 12px;
-}
-
-.detail-item {
-  margin-bottom: 16px;
-}
-
-.detail-label {
-  font-size: 11px;
-  color: #9CA3AF;
-  margin-bottom: 4px;
-}
-
-.detail-value {
-  font-size: 14px;
-  color: #1A1A1A;
-  font-weight: 500;
-  min-width: 0;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  line-height: 1.45;
-}
-
-.detail-path {
-  font-size: 12px;
-  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  white-space: normal;
-}
-
-/* 日志条目样式 */
-.log-entry {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
-  padding: 8px;
-  background: #F9FAFB;
-  border-radius: 4px;
-  margin-bottom: 8px;
-  color: #374151;
-}
-
-.log-entry.success {
-  color: #047857;
-  background: #D1FAE5;
-}
-
-.log-entry.error {
-  color: #DC2626;
-  background: #FEE2E2;
-}
-
-/* 淡入动画 */
-.fade-in {
-  animation: fadeIn 0.2s ease-out;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+#app { width: 100vw; height: 100vh; overflow: hidden; }
 </style>