sillyspec 3.9.0 → 3.10.0

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

@@ -0,0 +1,257 @@
+<template>
+  <div class="doc-preview-shell">
+    <div v-if="!content && !loading" class="doc-empty">
+      <p>选择一个文档查看内容</p>
+    </div>
+    <div v-else-if="loading" class="doc-empty">
+      <p>加载中...</p>
+    </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, ref, watch } from 'vue'
+import { marked } from 'marked'
+
+const props = defineProps({
+  content: { type: String, default: '' },
+  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)
+})
+</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) {
+  color: #D97706;
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0 0 16px;
+  border-bottom: 1px solid #E5E5EA;
+  padding-bottom: 8px;
+}
+
+.doc-preview-large :deep(h1) {
+  font-size: 22px;
+}
+
+.doc-preview :deep(h2) {
+  color: #1C1C1E;
+  font-size: 15px;
+  font-weight: 600;
+  margin: 20px 0 10px;
+}
+
+.doc-preview-large :deep(h2) {
+  font-size: 17px;
+}
+
+.doc-preview :deep(h3) {
+  color: #D97706;
+  font-size: 14px;
+  font-weight: 600;
+  margin: 16px 0 8px;
+}
+
+.doc-preview :deep(p) {
+  margin: 8px 0;
+}
+
+.doc-preview :deep(strong) {
+  color: #1C1C1E;
+  font-weight: 600;
+}
+
+.doc-preview :deep(a) {
+  color: #D97706;
+  text-decoration: none;
+}
+
+.doc-preview :deep(a:hover) {
+  text-decoration: underline;
+}
+
+.doc-preview :deep(code) {
+  background: #E5E5EA;
+  color: #1C1C1E;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.doc-preview :deep(pre) {
+  background: #1C1C1E;
+  color: #E5E5E7;
+  border: 1px solid #E5E5EA;
+  border-radius: 6px;
+  padding: 12px 16px;
+  overflow-x: auto;
+  font-size: 12px;
+  margin: 8px 0;
+  line-height: 1.5;
+}
+
+.doc-preview :deep(pre code) {
+  background: none;
+  color: inherit;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+}
+
+.doc-preview :deep(ul),
+.doc-preview :deep(ol) {
+  padding-left: 20px;
+  margin: 8px 0;
+  color: #374151;
+}
+
+.doc-preview :deep(li) {
+  margin: 4px 0;
+}
+
+.doc-preview :deep(blockquote) {
+  border-left: 3px solid #D97706;
+  padding-left: 12px;
+  margin: 12px 0;
+  color: #636366;
+  font-style: italic;
+}
+
+.doc-preview :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 12px 0;
+  font-size: 12px;
+}
+
+.doc-preview :deep(thead th) {
+  background: #F0F0F3;
+  color: #1C1C1E;
+  font-weight: 600;
+  text-align: left;
+  padding: 8px 12px;
+  border: 1px solid #E5E5EA;
+}
+
+.doc-preview :deep(tbody td) {
+  padding: 6px 12px;
+  border: 1px solid #E5E5EA;
+  color: #374151;
+}
+
+.doc-preview :deep(tbody tr:hover) {
+  background: #F9FAFB;
+}
+
+.doc-preview :deep(hr) {
+  border: none;
+  border-top: 1px solid #E5E5EA;
+  margin: 16px 0;
+}
+</style>

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

@@ -0,0 +1,114 @@
+<template>
+  <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"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  groups: { type: Array, default: () => [] },
+  selectedFile: { type: Object, default: null }
+})
+
+const emit = defineEmits(['select-file'])
+const query = ref('')
+
+const selectedKeys = computed(() => {
+  return props.selectedFile?.path ? [props.selectedFile.path] : []
+})
+
+const groupIcons = {
+  design: '📋',
+  plan: '🧾',
+  archive: '📦',
+  changes: '⚙️',
+  scan: '🔍',
+  quicklog: '⚡'
+}
+
+const treeData = computed(() => {
+  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) {
+  if (option?.[0]?.data) {
+    emit('select-file', option[0].data)
+  }
+}
+</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/LogStream.vue

@@ -1,51 +1,31 @@
 <template>
-  <div class="flex flex-col h-full" style="background: #0E0E10;">
+  <div class="flex flex-col h-full" style="background: #F5F5F7;">
     <!-- Header -->
-    <div class="px-3 py-2 flex items-center gap-2" style="border-bottom: 1px solid #1F1F22;">
-      <input
-        v-model="searchQuery"
-        type="text"
-        placeholder="filter logs..."
-        class="flex-1 px-2 py-1 rounded-sm text-[10px] font-mono-log outline-none transition-colors duration-100"
-        style="background: #141416; border: 1px solid #1F1F22; color: #8B8B8E;"
-      />
-      <button
-        @click="clearLogs"
-        class="px-2 py-1 text-[10px] rounded-sm transition-colors duration-100"
-        style="color: #525252; border: 1px solid #1F1F22;"
-      >
-        clear
-      </button>
-      <button
-        @click="toggleAutoScroll"
-        class="px-2 py-1 text-[10px] rounded-sm font-mono-log transition-colors duration-100"
-        :style="{
-          color: autoScroll ? '#FBBF24' : '#525252',
-          background: autoScroll ? 'rgba(251,191,36,0.08)' : 'transparent',
-          border: autoScroll ? '1px solid rgba(251,191,36,0.2)' : '1px solid #1F1F22'
-        }"
-      >
-        {{ autoScroll ? 'auto' : 'pause' }}
-      </button>
+    <div class="px-3 py-2 flex items-center gap-2" style="border-bottom: 1px solid #F0F0F3;">
+      <n-input v-model:value="searchQuery" size="tiny" placeholder="过滤日志..." clearable style="flex: 1;" />
+      <n-button size="tiny" @click="clearLogs">清空</n-button>
+      <n-button size="tiny" :type="autoScroll ? 'primary' : 'default'" @click="toggleAutoScroll">
+        {{ autoScroll ? '自动' : '暂停' }}
+      </n-button>
     </div>
 
     <!-- Log output -->
-    <div ref="logContainer" class="flex-1 overflow-y-auto px-2 py-1.5 font-mono-log text-[10px]" style="background: #0A0A0B;" @scroll="handleScroll">
+    <div ref="logContainer" class="flex-1 overflow-y-auto px-2 py-1.5 font-mono-log text-[10px]" style="background: #F0F0F3;" @scroll="handleScroll">
       <div v-if="filteredLogs.length === 0" class="flex items-center justify-center h-full">
-        <span class="font-mono-log" style="color: #2A2A2D;">{{ logs.length === 0 ? 'no logs' : 'no match' }}</span>
+        <span class="font-mono-log" style="color: #E5E5EA;">{{ logs.length === 0 ? '暂无日志' : '无匹配' }}</span>
       </div>
       <div v-else class="space-y-px">
         <div v-for="log in filteredLogs" :key="log.id" class="px-1.5 py-px rounded-sm" :style="{ background: logBg(log.type) }">
-          <span style="color: #3A3A3D;" class="select-none">[{{ formatTime(log.timestamp) }}]</span>
+          <span style="color: #D1D1D6;" class="select-none">[{{ formatTime(log.timestamp) }}]</span>
           <span :style="{ color: logColor(log.type) }">{{ escapeHtml(log.content) }}</span>
         </div>
       </div>
     </div>
 
     <!-- Footer -->
-    <div class="px-3 py-1 flex items-center justify-between text-[9px] font-mono-log" style="border-top: 1px solid #1F1F22; background: #0E0E10; color: #3A3A3D;">
+    <div class="px-3 py-1 flex items-center justify-between text-[9px] font-mono-log" style="border-top: 1px solid #F0F0F3; background: #F5F5F7; color: #D1D1D6;">
       <span>{{ filteredLogs.length }}/{{ logs.length }}</span>
-      <span v-if="!autoScroll" style="color: #FB923C;">paused</span>
+      <span v-if="!autoScroll" style="color: #EA580C;">已暂停</span>
     </div>
   </div>
 </template>
@@ -69,7 +49,7 @@ const filteredLogs = computed(() => {
 function formatTime(ts) { if (!ts) return ''; const d = new Date(ts); return d.toLocaleTimeString('zh-CN', { hour12: false }) }
 function escapeHtml(t) { if (!t) return ''; return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') }
 function logBg(t) { return t === 'error' ? 'rgba(239,68,68,0.05)' : t === 'warn' ? 'rgba(251,146,60,0.05)' : 'transparent' }
-function logColor(t) { return t === 'error' ? '#EF4444' : t === 'warn' ? '#FB923C' : t === 'debug' ? '#525252' : '#8B8B8E' }
+function logColor(t) { return t === 'error' ? '#DC2626' : t === 'warn' ? '#EA580C' : t === 'debug' ? '#6B7280' : '#636366' }
 function clearLogs() { emit('clear') }
 function toggleAutoScroll() { autoScroll.value = !autoScroll.value; if (autoScroll.value) scrollToBottom() }
 function handleScroll() {

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 }
 })