sillyspec 3.9.1 → 3.10.0

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

@@ -78,7 +78,16 @@ function getProjectStatus() {
 
 function stageLabel() {
   const stage = props.project?.state?.currentStage
-  const labels = { 'brainstorm': '头脑风暴', 'plan': '规划', 'execute': '执行', 'verify': '验证' }
+  const labels = {
+    scan: '代码扫描',
+    brainstorm: '头脑风暴',
+    plan: '规划',
+    execute: '执行',
+    verify: '验证',
+    archive: '归档',
+    quick: '快速任务',
+    explore: '自由探索'
+  }
   return labels[stage] || stage || '未知'
 }
 </script>

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

@@ -58,10 +58,14 @@ const searchInput = ref(null)
 const selectedIndex = ref(0)
 
 const stageNames = [
+  { id: 'scan', name: '代码扫描' },
   { id: 'brainstorm', name: '头脑风暴' },
   { id: 'plan', name: '规划' },
   { id: 'execute', name: '执行' },
-  { id: 'verify', name: '验证' }
+  { id: 'verify', name: '验证' },
+  { id: 'archive', name: '归档' },
+  { id: 'quick', name: '快速任务' },
+  { id: 'explore', name: '自由探索' }
 ]
 
 const filteredItems = computed(() => {

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

@@ -1,29 +1,59 @@
 <template>
-  <div class="h-full overflow-y-auto px-6 py-4">
-    <div v-if="!content && !loading" class="flex items-center justify-center h-full">
-      <p class="text-[12px] font-[JetBrains_Mono,monospace]" style="color: #636366;">选择一个文档查看内容</p>
+  <div class="doc-preview-shell">
+    <div v-if="!content && !loading" class="doc-empty">
+      <p>选择一个文档查看内容</p>
     </div>
-    <div v-else-if="loading" class="flex items-center justify-center h-full">
-      <p class="text-[12px] font-[JetBrains_Mono,monospace]" style="color: #636366;">加载中...</p>
+    <div v-else-if="loading" class="doc-empty">
+      <p>加载中...</p>
     </div>
-    <div v-else class="doc-preview" v-html="renderedContent"></div>
+    <template v-else>
+      <div class="doc-toolbar">
+        <div class="doc-title" :title="fileTitle">{{ fileTitle }}</div>
+        <n-button size="tiny" type="primary" @click="isModalOpen = true">弹窗阅读</n-button>
+      </div>
+      <div class="doc-preview-scroll">
+        <div class="doc-preview" v-html="renderedContent"></div>
+      </div>
+    </template>
+
+    <n-modal
+      v-model:show="isModalOpen"
+      preset="card"
+      :title="fileTitle"
+      style="width: min(920px, calc(100vw - 48px));"
+    >
+      <div class="doc-modal-body">
+        <div class="doc-preview doc-preview-large" v-html="renderedContent"></div>
+      </div>
+    </n-modal>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { marked } from 'marked'
 
 const props = defineProps({
   content: { type: String, default: '' },
-  loading: { type: Boolean, default: false }
+  loading: { type: Boolean, default: false },
+  selectedFile: { type: Object, default: null }
 })
 
+const isModalOpen = ref(false)
+
 marked.setOptions({
   breaks: true,
   gfm: true
 })
 
+watch(() => props.selectedFile?.path, () => {
+  isModalOpen.value = false
+})
+
+const fileTitle = computed(() => {
+  return props.selectedFile?.title || props.selectedFile?.name || '文档'
+})
+
 const renderedContent = computed(() => {
   if (!props.content) return ''
   return marked.parse(props.content)
@@ -31,10 +61,69 @@ const renderedContent = computed(() => {
 </script>
 
 <style scoped>
+.doc-preview-shell {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+}
+
+.doc-empty {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  text-align: center;
+  font-size: 12px;
+  color: #636366;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.doc-toolbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  border-bottom: 1px solid #F0F0F3;
+}
+
+.doc-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 600;
+  color: #1C1C1E;
+}
+
+.doc-preview-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 14px 16px 22px;
+}
+
+.doc-modal-body {
+  max-height: min(72vh, 760px);
+  overflow: auto;
+  padding-right: 4px;
+}
+
 .doc-preview {
   font-size: 13px;
   line-height: 1.7;
   color: #374151;
+  overflow-wrap: anywhere;
+}
+
+.doc-preview-large {
+  font-size: 14px;
+  line-height: 1.75;
 }
 
 .doc-preview :deep(h1) {
@@ -46,6 +135,10 @@ const renderedContent = computed(() => {
   padding-bottom: 8px;
 }
 
+.doc-preview-large :deep(h1) {
+  font-size: 22px;
+}
+
 .doc-preview :deep(h2) {
   color: #1C1C1E;
   font-size: 15px;
@@ -53,6 +146,10 @@ const renderedContent = computed(() => {
   margin: 20px 0 10px;
 }
 
+.doc-preview-large :deep(h2) {
+  font-size: 17px;
+}
+
 .doc-preview :deep(h3) {
   color: #D97706;
   font-size: 14px;

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

@@ -1,22 +1,31 @@
 <template>
-  <div class="flex flex-col h-full">
+  <div class="doc-tree">
+    <div class="doc-tree-search">
+      <n-input
+        v-model:value="query"
+        size="small"
+        clearable
+        placeholder="搜索文档"
+      />
+    </div>
+
     <n-empty v-if="groups.length === 0" description="暂无文档" style="margin: auto;" />
+    <n-empty v-else-if="treeData.length === 0" description="无匹配文档" style="margin: auto;" />
     <n-tree
       v-else
+      class="doc-tree-list"
       :data="treeData"
       :selected-keys="selectedKeys"
       :default-expand-all="true"
       selectable
       block-line
       @update:selected-keys="handleSelect"
-      style="padding: 8px 12px;"
     />
   </div>
 </template>
 
 <script setup>
-import { computed, h } from 'vue'
-import { NIcon } from 'naive-ui'
+import { computed, ref } from 'vue'
 
 const props = defineProps({
   groups: { type: Array, default: () => [] },
@@ -24,30 +33,48 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['select-file'])
+const query = ref('')
 
 const selectedKeys = computed(() => {
   return props.selectedFile?.path ? [props.selectedFile.path] : []
 })
 
 const groupIcons = {
-  '设计文档': '📋',
-  '实现计划': '📐',
-  '归档': '📦',
-  ' proposals': '📝'
+  design: '📋',
+  plan: '🧾',
+  archive: '📦',
+  changes: '⚙️',
+  scan: '🔍',
+  quicklog: '⚡'
 }
 
 const treeData = computed(() => {
-  return props.groups.map(group => ({
-    key: `group-${group.key}`,
-    label: group.project ? `${group.label} (${group.project})` : group.label,
-    prefix: () => groupIcons[group.label] || '📄',
-    children: group.files.map(file => ({
-      key: file.path,
-      label: file.title,
-      prefix: () => '📄',
-      data: file
-    }))
-  }))
+  const keyword = query.value.trim().toLowerCase()
+
+  return props.groups
+    .map(group => {
+      const groupLabel = group.project ? `${group.label} (${group.project})` : group.label
+      const groupMatched = !keyword || groupLabel.toLowerCase().includes(keyword)
+      const files = group.files.filter(file => {
+        if (groupMatched) return true
+        return `${file.title || ''} ${file.name || ''}`.toLowerCase().includes(keyword)
+      })
+
+      if (files.length === 0) return null
+
+      return {
+        key: `group-${group.key}`,
+        label: groupLabel,
+        prefix: () => groupIcons[group.key] || '📄',
+        children: files.map(file => ({
+          key: file.path,
+          label: file.title || file.name,
+          prefix: () => '📄',
+          data: file
+        }))
+      }
+    })
+    .filter(Boolean)
 })
 
 function handleSelect(keys, option) {
@@ -56,3 +83,32 @@ function handleSelect(keys, option) {
   }
 }
 </script>
+
+<style scoped>
+.doc-tree {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+}
+
+.doc-tree-search {
+  flex-shrink: 0;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid #F0F0F3;
+}
+
+.doc-tree-list {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px 12px 14px;
+}
+
+.doc-tree-list :deep(.n-tree-node-content__text) {
+  white-space: normal;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+</style>

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

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="h-resize-handle"
+    :class="{ 'dragging': isDragging }"
+    @mousedown="handleMouseDown"
+  ></div>
+</template>
+
+<script setup>
+const props = defineProps({
+  isDragging: { type: Boolean, default: false },
+  colIndex: { type: Number, required: true }
+})
+
+const emit = defineEmits(['drag-start', 'drag-end', 'resize'])
+
+function handleMouseDown(e) {
+  e.preventDefault()
+  emit('drag-start', { type: 'horizontal', colIndex: props.colIndex, startX: e.clientX })
+
+  const onMove = (ev) => {
+    emit('resize', { deltaX: ev.clientX - e.clientX })
+  }
+
+  const onUp = () => {
+    emit('drag-end')
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp)
+}
+</script>
+
+<style scoped>
+.h-resize-handle {
+  width: 4px;
+  background: #E5E7EB;
+  cursor: col-resize;
+  transition: background 0.2s;
+}
+
+.h-resize-handle:hover,
+.h-resize-handle.dragging {
+  background: #D97706;
+}
+</style>

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

@@ -26,6 +26,8 @@
 
       <!-- Stages -->
       <div v-else class="flex-1 overflow-y-auto px-6 pb-5 space-y-5">
+        <PipelineStage name="scan" title="代码扫描" :steps="getStageSteps('scan')" :status="getStageStatus('scan')" :is-active="currentStage === 'scan'" :active-step="activeStep" @select-step="handleSelectStep" />
+        <div v-if="hasStage('brainstorm')" class="flex items-center pl-[3px]"><div class="w-px h-4" style="background: #F0F0F3;" /></div>
         <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: #F0F0F3;" /></div>
         <PipelineStage name="plan" title="规划" :steps="getStageSteps('plan')" :status="getStageStatus('plan')" :is-active="currentStage === 'plan'" :active-step="activeStep" @select-step="handleSelectStep" />
@@ -33,6 +35,8 @@
         <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: #F0F0F3;" /></div>
         <PipelineStage name="verify" title="验证" :steps="getStageSteps('verify')" :status="getStageStatus('verify')" :is-active="currentStage === 'verify'" :active-step="activeStep" @select-step="handleSelectStep" />
+        <div v-if="hasStage('archive')" class="flex items-center pl-[3px]"><div class="w-px h-4" style="background: #F0F0F3;" /></div>
+        <PipelineStage name="archive" title="归档" :steps="getStageSteps('archive')" :status="getStageStatus('archive')" :is-active="currentStage === 'archive'" :active-step="activeStep" @select-step="handleSelectStep" />
       </div>
 
       <!-- Activity Log -->
@@ -62,12 +66,12 @@
     </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 #F0F0F3;">
+    <div v-if="activeTab === 'docs'" class="docs-panel flex-1 flex overflow-hidden">
+      <div class="docs-tree-pane 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">
-        <DocPreview :content="docContent" :loading="docLoading" />
+        <DocPreview :content="docContent" :loading="docLoading" :selected-file="selectedDocFile" />
       </div>
     </div>
   </div>
@@ -96,10 +100,14 @@ const progress = computed(() => props.project?.state?.progress || {})
 const stages = computed(() => progress.value.stages || {})
 
 const stageNameMap = {
+  scan: '代码扫描',
   brainstorm: '头脑风暴',
   plan: '规划',
   execute: '执行',
-  verify: '验证'
+  verify: '验证',
+  archive: '归档',
+  quick: '快速任务',
+  explore: '自由探索'
 }
 
 const activityLogs = computed(() => {
@@ -127,3 +135,14 @@ function getStageStatus(n) {
 }
 function handleSelectStep(step) { emit('select-step', step) }
 </script>
+
+<style scoped>
+.docs-panel {
+  min-height: 0;
+}
+
+.docs-tree-pane {
+  width: clamp(220px, 42%, 320px);
+  min-width: 180px;
+}
+</style>

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

@@ -0,0 +1,187 @@
+<template>
+  <div
+    class="project-card"
+    :class="{ selected: isSelected }"
+    @click="$emit('select', project)"
+  >
+    <!-- 卡片头部 -->
+    <div class="card-header">
+      <span class="project-name">{{ project.name }}</span>
+      <span class="last-active">{{ formatTime(project.lastActive) }}</span>
+    </div>
+
+    <!-- 阶段标签 -->
+    <div>
+      <span class="stage-badge" :class="stageClass">{{ stageLabel }}</span>
+    </div>
+
+    <!-- 进度条 -->
+    <div class="progress-section">
+      <div class="progress-bar">
+        <div class="progress-fill" :class="stageClass" :style="{ width: progressPercent + '%' }"></div>
+      </div>
+      <span class="progress-text">{{ progressPercent }}%</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  project: { type: Object, required: true },
+  isSelected: { type: Boolean, default: false }
+})
+
+defineEmits(['select'])
+
+const stageLabel = computed(() => {
+  const stage = props.project?.state?.currentStage
+  if (!stage) return '未开始'
+  const stageNames = {
+    brainstorm: '需求探索',
+    plan: '实现计划',
+    execute: '波次执行',
+    verify: '验证确认'
+  }
+  return stageNames[stage] || stage
+})
+
+const stageClass = computed(() => {
+  const stage = props.project?.state?.currentStage
+  if (!stage) return 'pending'
+  const progress = props.project?.state?.progress?.stages?.[stage]
+  if (progress?.status === 'completed') return 'completed'
+  if (progress?.status === 'in-progress') return 'in-progress'
+  return 'pending'
+})
+
+const progressPercent = computed(() => {
+  const stage = props.project?.state?.currentStage
+  if (!stage) return 0
+  const progress = props.project?.state?.progress?.stages?.[stage]
+  if (!progress) return 0
+  if (progress.completedSteps !== undefined && progress.steps !== undefined) {
+    return Math.round((progress.completedSteps / progress.steps) * 100)
+  }
+  if (progress.status === 'completed') return 100
+  if (progress.status === 'in-progress') return 50
+  return 0
+})
+
+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)}小时前`
+  return '昨天'
+}
+</script>
+
+<style scoped>
+.project-card {
+  width: 280px;
+  height: 120px;
+  background: white;
+  border: 2px solid #E5E7EB;
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.project-card:hover {
+  border-color: #D97706;
+  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
+}
+
+.project-card.selected {
+  border-color: #D97706;
+  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.project-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1A1A1A;
+}
+
+.last-active {
+  font-size: 11px;
+  color: #9CA3AF;
+}
+
+.stage-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.stage-badge.in-progress {
+  background: #DBEAFE;
+  color: #1D4ED8;
+}
+
+.stage-badge.completed {
+  background: #D1FAE5;
+  color: #047857;
+}
+
+.stage-badge.pending {
+  background: #F3F4F6;
+  color: #6B7280;
+}
+
+.progress-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 6px;
+  background: #E5E7EB;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s;
+}
+
+.progress-fill.in-progress {
+  background: #3B82F6;
+}
+
+.progress-fill.completed {
+  background: #10B981;
+}
+
+.progress-fill.pending {
+  background: #9CA3AF;
+}
+
+.progress-text {
+  font-size: 12px;
+  font-weight: 600;
+  color: #374151;
+}
+</style>