sillyspec 3.9.1 → 3.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/skills/sillyspec-commit/SKILL.md +1 -1
- package/.claude/skills/sillyspec-continue/SKILL.md +1 -1
- package/.claude/skills/sillyspec-explore/SKILL.md +9 -0
- package/.claude/skills/sillyspec-plan/SKILL.md +0 -35
- package/.claude/skills/sillyspec-workspace/SKILL.md +1 -1
- package/README.md +7 -6
- package/SKILL.md +15 -10
- package/package.json +1 -1
- package/packages/dashboard/dist/assets/index-BcM2J-hv.css +1 -0
- package/packages/dashboard/dist/assets/{index-RsLVPAy7.js → index-DpLHK4jv.js} +974 -974
- package/packages/dashboard/dist/index.html +16 -17
- package/packages/dashboard/dist/prototype-dashboard.html +836 -0
- package/packages/dashboard/dist/prototype-overview.html +256 -0
- package/packages/dashboard/public/prototype-dashboard.html +836 -0
- package/packages/dashboard/public/prototype-overview.html +256 -0
- package/packages/dashboard/server/index.js +18 -13
- package/packages/dashboard/server/parser.js +109 -1
- package/packages/dashboard/server/watcher.js +14 -6
- package/packages/dashboard/src/App.vue +414 -186
- package/packages/dashboard/src/components/ActionBar.vue +10 -1
- package/packages/dashboard/src/components/CommandPalette.vue +5 -1
- package/packages/dashboard/src/components/DocPreview.vue +105 -8
- package/packages/dashboard/src/components/DocTree.vue +75 -19
- package/packages/dashboard/src/components/HResizeHandle.vue +48 -0
- package/packages/dashboard/src/components/PipelineView.vue +23 -4
- package/packages/dashboard/src/components/ProjectCard.vue +187 -0
- package/packages/dashboard/src/components/ProjectOverview.vue +113 -139
- package/packages/dashboard/src/components/VResizeHandle.vue +61 -0
- package/packages/dashboard/src/composables/useDashboard.js +28 -0
- package/packages/dashboard/src/composables/useLayout.js +131 -0
- package/src/index.js +7 -0
- package/src/init.js +17 -10
- package/src/migrate.js +5 -5
- package/src/progress.js +2 -1
- package/src/run.js +72 -61
- package/src/stages/brainstorm.js +28 -3
- package/src/stages/execute.js +52 -27
- package/src/stages/explore.js +34 -0
- package/src/stages/index.js +3 -1
- package/src/stages/plan.js +86 -14
- package/src/stages/scan.js +11 -11
- package/src/stages/status.js +1 -1
- package/.sillyspec/changes/archive/2026-04-08-derive-state/design.md +0 -97
- package/.sillyspec/changes/archive/2026-04-08-derive-state/plan.md +0 -51
- package/.sillyspec/changes/archive/2026-04-08-derive-state/proposal.md +0 -29
- package/.sillyspec/changes/archive/2026-04-08-derive-state/requirements.md +0 -34
- package/.sillyspec/changes/archive/2026-04-08-derive-state/tasks.md +0 -13
- package/.sillyspec/changes/archive/2026-04-08-derive-state/verify-result.md +0 -43
- package/.sillyspec/changes/auto-mode/design.md +0 -50
- package/.sillyspec/changes/auto-mode/proposal.md +0 -19
- package/.sillyspec/changes/auto-mode/requirements.md +0 -21
- package/.sillyspec/changes/auto-mode/tasks.md +0 -7
- package/.sillyspec/changes/brainstorm-archive/2026-04-05-dashboard-design.md +0 -206
- package/.sillyspec/changes/brainstorm-archive/2026-04-05-unified-docs-design.md +0 -199
- package/.sillyspec/changes/dashboard/design.md +0 -219
- package/.sillyspec/changes/dashboard/design.md.braindraft +0 -206
- package/.sillyspec/changes/run-command-design/design.md +0 -1230
- package/.sillyspec/changes/unified-docs-design/design.md +0 -199
- package/.sillyspec/docs/sillyspec/scan/.gitkeep +0 -0
- package/.sillyspec/knowledge/INDEX.md +0 -8
- package/.sillyspec/knowledge/uncategorized.md +0 -3
- package/.sillyspec/plans/2026-04-05-dashboard.md +0 -737
- package/.sillyspec/projects/sillyspec.yaml +0 -3
- package/packages/dashboard/dist/assets/index-CntACGUN.css +0 -1
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
# 统一文档管理 + Dashboard 文档浏览
|
|
2
|
-
|
|
3
|
-
## 动机
|
|
4
|
-
|
|
5
|
-
### 现状问题
|
|
6
|
-
1. 文档散落在各子项目的 `.sillyspec/` 里,没有统一视角
|
|
7
|
-
2. Dashboard 只能发现项目,看不到文档内容
|
|
8
|
-
3. 扫描的 `codebase/` 文档只在子项目里,主项目看不到
|
|
9
|
-
4. 归档后文档沉入 `knowledge/`,跨项目复用不方便
|
|
10
|
-
5. 单项目模式和工作区模式两套逻辑,维护成本高
|
|
11
|
-
|
|
12
|
-
### 目标
|
|
13
|
-
- 文档只写一份,集中管理
|
|
14
|
-
- 默认工作区模式,去掉模式切换
|
|
15
|
-
- Dashboard 支持文档浏览
|
|
16
|
-
- 子项目保持干净(只有源代码)
|
|
17
|
-
|
|
18
|
-
## 方案
|
|
19
|
-
|
|
20
|
-
### 核心原则
|
|
21
|
-
- **文档只写一份**,在哪执行就写在哪
|
|
22
|
-
- **默认工作区模式**,每个项目天生就是"主项目"
|
|
23
|
-
- **子项目不生成文档**,文档全部在主项目的 `.sillyspec/docs/<project>/` 下
|
|
24
|
-
|
|
25
|
-
### 目录结构
|
|
26
|
-
|
|
27
|
-
```
|
|
28
|
-
my-project/.sillyspec/
|
|
29
|
-
├── STATE.md # 主项目状态(含当前操作的项目)
|
|
30
|
-
├── projects/ # 子项目注册表
|
|
31
|
-
│ ├── my-project.yaml # 默认注册自己
|
|
32
|
-
│ ├── frontend.yaml # { name, path, status }
|
|
33
|
-
│ └── backend.yaml
|
|
34
|
-
│
|
|
35
|
-
├── docs/ # 统一文档中心
|
|
36
|
-
│ └── my-project/ # 按子项目分目录
|
|
37
|
-
│ ├── scan/ # scan 产出
|
|
38
|
-
│ │ ├── ARCHITECTURE.md
|
|
39
|
-
│ │ └── CONVENTIONS.md
|
|
40
|
-
│ ├── brainstorm/ # brainstorm 设计文档
|
|
41
|
-
│ │ └── 2026-04-05-user-auth.md
|
|
42
|
-
│ ├── plan/ # plan 产出
|
|
43
|
-
│ │ └── 2026-04-05-user-auth.md
|
|
44
|
-
│ ├── changes/ # 当前变更(WIP)
|
|
45
|
-
│ │ └── user-auth/
|
|
46
|
-
│ │ ├── design.md
|
|
47
|
-
│ │ └── tasks.md
|
|
48
|
-
│ ├── archive/ # 归档
|
|
49
|
-
│ │ └── 2026-03-20-db-redesign.md
|
|
50
|
-
│ └── quicklog/ # quick 操作记录
|
|
51
|
-
│ └── 2026-04-05-fix-login.md
|
|
52
|
-
│
|
|
53
|
-
├── knowledge/ # 跨项目共享知识库(不变)
|
|
54
|
-
└── .runtime/
|
|
55
|
-
└── progress.json # 运行时数据(含子项目维度)
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
### 子项目保持干净
|
|
59
|
-
|
|
60
|
-
```
|
|
61
|
-
frontend/ # 只有源代码
|
|
62
|
-
├── src/
|
|
63
|
-
├── package.json
|
|
64
|
-
└── .gitignore
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
子项目不再有 `.sillyspec/` 目录。
|
|
68
|
-
|
|
69
|
-
## 命令变更
|
|
70
|
-
|
|
71
|
-
### --project 参数
|
|
72
|
-
|
|
73
|
-
所有产生文档的命令支持 `--project <name>` 参数:
|
|
74
|
-
|
|
75
|
-
```bash
|
|
76
|
-
/sillyspec:scan --project frontend
|
|
77
|
-
/sillyspec:brainstorm "用户认证" --project frontend
|
|
78
|
-
/sillyspec:plan --project frontend
|
|
79
|
-
/sillyspec:execute --project frontend
|
|
80
|
-
/sillyspec:archive --project frontend
|
|
81
|
-
/sillyspec:quick --project frontend --change "修复登录bug"
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
不指定 `--project` 时,默认使用 `STATE.md` 中记录的当前项目。
|
|
85
|
-
|
|
86
|
-
### 文档输出路径映射
|
|
87
|
-
|
|
88
|
-
| 命令 | 输出路径 |
|
|
89
|
-
|------|---------|
|
|
90
|
-
| scan | `.sillyspec/docs/<project>/scan/` |
|
|
91
|
-
| brainstorm | `.sillyspec/docs/<project>/brainstorm/<name>.md` |
|
|
92
|
-
| propose | `.sillyspec/docs/<project>/brainstorm/<name>.md` |
|
|
93
|
-
| plan | `.sillyspec/docs/<project>/plan/<name>.md` |
|
|
94
|
-
| execute | `.sillyspec/docs/<project>/changes/<name>/` (WIP) |
|
|
95
|
-
| archive | `.sillyspec/docs/<project>/archive/<name>.md` |
|
|
96
|
-
| quick | `.sillyspec/docs/<project>/quicklog/<name>.md` |
|
|
97
|
-
|
|
98
|
-
### init 变更
|
|
99
|
-
|
|
100
|
-
- `sillyspec init` 初始化时,`projects/` 默认注册当前目录自己
|
|
101
|
-
- 去掉 `--workspace` 参数(默认就是工作区模式)
|
|
102
|
-
- 去掉 `--interactive` 参数(默认零交互)
|
|
103
|
-
|
|
104
|
-
### STATE.md 变更
|
|
105
|
-
|
|
106
|
-
```markdown
|
|
107
|
-
# 项目状态
|
|
108
|
-
|
|
109
|
-
## 当前项目
|
|
110
|
-
- 名称:frontend
|
|
111
|
-
- 路径:./frontend
|
|
112
|
-
|
|
113
|
-
## 当前变更
|
|
114
|
-
- 名称:user-auth
|
|
115
|
-
- 当前阶段:execute ⏳
|
|
116
|
-
- 下一步:执行任务 3/8
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
### progress.json 变更
|
|
120
|
-
|
|
121
|
-
增加子项目维度:
|
|
122
|
-
|
|
123
|
-
```json
|
|
124
|
-
{
|
|
125
|
-
"_version": 1,
|
|
126
|
-
"schemaVersion": "1.0",
|
|
127
|
-
"currentProject": "frontend",
|
|
128
|
-
"currentStage": "execute",
|
|
129
|
-
"stages": {
|
|
130
|
-
"brainstorm": { "status": "completed", "steps": [...] },
|
|
131
|
-
"plan": { "status": "completed", "steps": [...] },
|
|
132
|
-
"execute": { "status": "in-progress", "steps": [...] },
|
|
133
|
-
"verify": { "status": "pending", "steps": [] }
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
## Dashboard 文档浏览
|
|
139
|
-
|
|
140
|
-
### 新增文档 Tab
|
|
141
|
-
|
|
142
|
-
选中项目后,中间区域顶部增加 Tab 切换:
|
|
143
|
-
|
|
144
|
-
```
|
|
145
|
-
[ 流水线 ] [ 文档 ]
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
### 文档 Tab 内容
|
|
149
|
-
|
|
150
|
-
左侧:文档树(按类型分组)
|
|
151
|
-
|
|
152
|
-
```
|
|
153
|
-
📋 设计文档
|
|
154
|
-
📄 用户认证功能设计
|
|
155
|
-
|
|
156
|
-
📐 实现计划
|
|
157
|
-
📄 用户认证功能计划
|
|
158
|
-
|
|
159
|
-
⚙️ 当前变更
|
|
160
|
-
📄 design.md
|
|
161
|
-
📄 tasks.md
|
|
162
|
-
|
|
163
|
-
📦 已归档
|
|
164
|
-
📄 数据库重设计
|
|
165
|
-
|
|
166
|
-
🔍 架构文档
|
|
167
|
-
📄 ARCHITECTURE.md
|
|
168
|
-
📄 CONVENTIONS.md
|
|
169
|
-
|
|
170
|
-
⚡ 快速修复
|
|
171
|
-
📄 修复登录bug
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
右侧:文档预览(Markdown 渲染)
|
|
175
|
-
|
|
176
|
-
点击左侧文档,右侧显示内容。
|
|
177
|
-
|
|
178
|
-
### 后端新增 API
|
|
179
|
-
|
|
180
|
-
```
|
|
181
|
-
GET /api/projects/:path/docs # 获取项目文档树
|
|
182
|
-
GET /api/projects/:path/docs/:filePath # 获取文档内容
|
|
183
|
-
```
|
|
184
|
-
|
|
185
|
-
## 兼容性
|
|
186
|
-
|
|
187
|
-
- 旧项目 `.sillyspec/codebase/`、`.sillyspec/specs/` 不受影响,只是新文档不再往那写
|
|
188
|
-
- 可加 `sillyspec docs migrate` 命令把旧文档迁移到新结构
|
|
189
|
-
- Dashboard 的项目发现逻辑不变(扫描 `.sillyspec` 目录)
|
|
190
|
-
|
|
191
|
-
## 验收标准
|
|
192
|
-
|
|
193
|
-
1. `sillyspec init` 生成 `projects/` 和 `docs/` 结构
|
|
194
|
-
2. `--project` 参数在所有命令中生效
|
|
195
|
-
3. 文档输出到 `.sillyspec/docs/<project>/` 对应子目录
|
|
196
|
-
4. 子项目目录不生成任何 `.sillyspec` 文件
|
|
197
|
-
5. Dashboard 文档 Tab 能展示文档树和预览内容
|
|
198
|
-
6. 旧项目不受影响
|
|
199
|
-
7. `sillyspec docs migrate` 能迁移旧文档
|
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
# SillySpec Dashboard — 技术方案
|
|
2
|
-
|
|
3
|
-
## 架构决策
|
|
4
|
-
|
|
5
|
-
| 决策 | 选择 | 理由 |
|
|
6
|
-
|---|---|---|
|
|
7
|
-
| 前端框架 | Vue 3 + Vite | 轻量、打包快、SillySpec 用户已有 Node.js |
|
|
8
|
-
| CSS | Tailwind CSS | 原子化、深色主题变量管理方便 |
|
|
9
|
-
| 后端 | Node.js 原生 http + ws | 不引入 Express,零重依赖 |
|
|
10
|
-
| 文件监听 | chokidar | 跨平台、成熟稳定 |
|
|
11
|
-
| 数据库 | 无 | 纯文件系统,与 SillySpec 哲学一致 |
|
|
12
|
-
| 包结构 | SillySpec 子包 packages/dashboard | 独立 package.json,可单独开发 |
|
|
13
|
-
|
|
14
|
-
## 文件变更清单
|
|
15
|
-
|
|
16
|
-
### 新增文件
|
|
17
|
-
|
|
18
|
-
| 文件 | 说明 |
|
|
19
|
-
|---|---|
|
|
20
|
-
| `packages/dashboard/package.json` | 子包配置,依赖 vue/vite/tailwind/chokidar/ws |
|
|
21
|
-
| `packages/dashboard/vite.config.js` | Vite 构建配置,构建产物输出到 dist/ |
|
|
22
|
-
| `packages/dashboard/server/index.js` | HTTP + WebSocket 服务启动入口 |
|
|
23
|
-
| `packages/dashboard/server/watcher.js` | chokidar 监听 .sillyspec/,解析文件变化,emit 事件 |
|
|
24
|
-
| `packages/dashboard/server/api.js` | REST 路由:GET /api/projects, GET /api/project/:name/status |
|
|
25
|
-
| `packages/dashboard/server/executor.js` | CLI 命令执行器(child_process.spawn + stdout 流式推送) |
|
|
26
|
-
| `packages/dashboard/src/main.js` | Vue 应用入口 |
|
|
27
|
-
| `packages/dashboard/src/App.vue` | 根组件,三栏布局 |
|
|
28
|
-
| `packages/dashboard/src/components/ProjectList.vue` | 左栏项目列表 |
|
|
29
|
-
| `packages/dashboard/src/components/PipelineView.vue` | 中栏阶段 pipeline + 时间线 |
|
|
30
|
-
| `packages/dashboard/src/components/StepCard.vue` | 步骤卡片(三级信息密度) |
|
|
31
|
-
| `packages/dashboard/src/components/DetailPanel.vue` | 右栏详情 + 日志 |
|
|
32
|
-
| `packages/dashboard/src/components/LogStream.vue` | 终端风格日志流(等宽字体、语法高亮、搜索过滤) |
|
|
33
|
-
| `packages/dashboard/src/components/CommandPalette.vue` | Cmd+K 命令面板 |
|
|
34
|
-
| `packages/dashboard/src/components/StageBadge.vue` | 阶段状态标签组件 |
|
|
35
|
-
| `packages/dashboard/src/components/ActionBar.vue` | CLI 操作按钮(下一步、阶段切换) |
|
|
36
|
-
| `packages/dashboard/src/composables/useWebSocket.js` | WebSocket 连接管理(自动重连、心跳) |
|
|
37
|
-
| `packages/dashboard/src/composables/useKeyboard.js` | 全局键盘快捷键 |
|
|
38
|
-
| `packages/dashboard/src/styles/theme.css` | CSS 变量(配色、间距、动效) |
|
|
39
|
-
| `packages/dashboard/index.html` | Vite HTML 入口 |
|
|
40
|
-
| `packages/dashboard/tailwind.config.js` | Tailwind 配置(自定义颜色) |
|
|
41
|
-
|
|
42
|
-
### 修改文件
|
|
43
|
-
|
|
44
|
-
| 文件 | 变更 |
|
|
45
|
-
|---|---|
|
|
46
|
-
| `src/index.js` | 新增 `dashboard` 命令分支 |
|
|
47
|
-
| `package.json` | workspace 引用 packages/dashboard |
|
|
48
|
-
|
|
49
|
-
## 数据模型
|
|
50
|
-
|
|
51
|
-
### 前端状态(composable/store)
|
|
52
|
-
|
|
53
|
-
```javascript
|
|
54
|
-
{
|
|
55
|
-
projects: [
|
|
56
|
-
{
|
|
57
|
-
name: 'my-project',
|
|
58
|
-
path: '/Users/x/my-project',
|
|
59
|
-
currentStage: 'plan',
|
|
60
|
-
stages: {
|
|
61
|
-
brainstorm: { status: 'completed', steps: 10, completedSteps: 10, duration: '25min' },
|
|
62
|
-
plan: { status: 'in-progress', steps: 5, completedSteps: 2, duration: '8min' },
|
|
63
|
-
execute: { status: 'pending', steps: 0, completedSteps: 0 },
|
|
64
|
-
verify: { status: 'pending', steps: 0, completedSteps: 0 }
|
|
65
|
-
},
|
|
66
|
-
lastActive: '2026-04-05T14:30:00Z'
|
|
67
|
-
}
|
|
68
|
-
],
|
|
69
|
-
activeProject: 'my-project', // 当前选中
|
|
70
|
-
activeStep: 3, // 当前选中步骤
|
|
71
|
-
logs: [], // 实时日志行
|
|
72
|
-
isPanelOpen: true // 右侧面板是否展开
|
|
73
|
-
}
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
### WebSocket 消息协议
|
|
77
|
-
|
|
78
|
-
```javascript
|
|
79
|
-
// 服务端 → 客户端
|
|
80
|
-
{ type: 'project:updated', project: { name, stages, currentStage } }
|
|
81
|
-
{ type: 'step:updated', project: 'name', step: { id, status, summary } }
|
|
82
|
-
{ type: 'log:append', project: 'name', lines: ['> analyzing...', '> done ✅'] }
|
|
83
|
-
{ type: 'cli:output', project: 'name', data: 'stdout/stderr 流' }
|
|
84
|
-
{ type: 'cli:complete', project: 'name', exitCode: 0 }
|
|
85
|
-
|
|
86
|
-
// 客户端 → 服务端
|
|
87
|
-
{ type: 'cli:execute', project: 'name', command: 'sillyspec next' }
|
|
88
|
-
{ type: 'project:select', name: 'my-project' }
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
### REST API
|
|
92
|
-
|
|
93
|
-
```
|
|
94
|
-
GET /api/projects → 项目列表(扫描用户目录下的 .sillyspec/)
|
|
95
|
-
GET /api/project/:name → 项目完整状态(STATE.md + progress.json 合并)
|
|
96
|
-
GET /api/project/:name/logs → 最近日志(user-inputs.md)
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
## 关键组件实现
|
|
100
|
-
|
|
101
|
-
### StepCard.vue — 三级信息密度
|
|
102
|
-
|
|
103
|
-
```vue
|
|
104
|
-
<template>
|
|
105
|
-
<div class="step-card" :class="[statusClass]"
|
|
106
|
-
@mouseenter="hovered = true" @mouseleave="hovered = false"
|
|
107
|
-
@click="select">
|
|
108
|
-
<!-- 低密度:始终显示 -->
|
|
109
|
-
<div class="step-header">
|
|
110
|
-
<span class="step-icon">{{ icon }}</span>
|
|
111
|
-
<span class="step-title">{{ step.title }}</span>
|
|
112
|
-
</div>
|
|
113
|
-
|
|
114
|
-
<!-- 中密度:hover 显示 -->
|
|
115
|
-
<transition name="fade">
|
|
116
|
-
<div v-if="hovered && step.summary?.conclusion" class="step-summary">
|
|
117
|
-
{{ step.summary.conclusion }}
|
|
118
|
-
</div>
|
|
119
|
-
</transition>
|
|
120
|
-
|
|
121
|
-
<!-- 高密度:点击后在右侧 DetailPanel 展示 -->
|
|
122
|
-
</div>
|
|
123
|
-
</template>
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
### LogStream.vue — 终端风格日志
|
|
127
|
-
|
|
128
|
-
- 等宽字体(JetBrains Mono / monospace)
|
|
129
|
-
- 新行淡入动画(CSS transition opacity)
|
|
130
|
-
- 搜索过滤:顶部搜索框,实时过滤匹配行
|
|
131
|
-
- 自动滚动到底部,用户上翻时暂停自动滚动
|
|
132
|
-
- ANSI 颜色码支持(使用 ansi-to-html)
|
|
133
|
-
|
|
134
|
-
### CommandPalette.vue
|
|
135
|
-
|
|
136
|
-
- `Cmd/Ctrl+K` 打开,`Escape` 关闭
|
|
137
|
-
- 模糊搜索项目名、阶段名
|
|
138
|
-
- 选中后跳转视图
|
|
139
|
-
- 参考 shadcn/ui 的 Command 组件风格
|
|
140
|
-
|
|
141
|
-
## CLI 集成
|
|
142
|
-
|
|
143
|
-
### src/index.js 新增命令
|
|
144
|
-
|
|
145
|
-
```javascript
|
|
146
|
-
// 在现有 commander 配置中新增
|
|
147
|
-
program
|
|
148
|
-
.command('dashboard')
|
|
149
|
-
.description('启动可视化仪表盘')
|
|
150
|
-
.option('--port <number>', '端口号', 3456)
|
|
151
|
-
.option('--no-open', '不自动打开浏览器')
|
|
152
|
-
.action(async (options) => {
|
|
153
|
-
const { startServer } = await import('../packages/dashboard/server/index.js');
|
|
154
|
-
await startServer(options);
|
|
155
|
-
});
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
### server/index.js 启动流程
|
|
159
|
-
|
|
160
|
-
```javascript
|
|
161
|
-
async function startServer({ port = 3456, open = true }) {
|
|
162
|
-
// 1. 启动 HTTP 服务,serve 前端静态文件
|
|
163
|
-
const server = http.createServer(handler);
|
|
164
|
-
|
|
165
|
-
// 2. 挂载 WebSocket
|
|
166
|
-
const wss = new WebSocketServer({ server });
|
|
167
|
-
|
|
168
|
-
// 3. 启动文件监听
|
|
169
|
-
const watcher = new ProjectWatcher();
|
|
170
|
-
watcher.on('change', (event) => wss.broadcast(event));
|
|
171
|
-
|
|
172
|
-
// 4. 启动服务
|
|
173
|
-
server.listen(port, () => {
|
|
174
|
-
console.log(`🚀 SillySpec Dashboard: http://localhost:${port}`);
|
|
175
|
-
if (open) openBrowser(`http://localhost:${port}`);
|
|
176
|
-
});
|
|
177
|
-
}
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
## 项目发现机制
|
|
181
|
-
|
|
182
|
-
扫描用户常用项目目录,查找包含 `.sillyspec/` 的目录:
|
|
183
|
-
|
|
184
|
-
```javascript
|
|
185
|
-
// 优先级:
|
|
186
|
-
// 1. 当前工作目录
|
|
187
|
-
// 2. HOME 目录下第一层子目录
|
|
188
|
-
// 3. 用户可通过设置文件配置额外路径 ~/.sillyspec/dashboard.json
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
## 构建与发布
|
|
192
|
-
|
|
193
|
-
### 开发模式
|
|
194
|
-
|
|
195
|
-
```bash
|
|
196
|
-
cd packages/dashboard
|
|
197
|
-
npm run dev # Vite dev server + 后端热重载
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
### 生产构建
|
|
201
|
-
|
|
202
|
-
```bash
|
|
203
|
-
cd packages/dashboard
|
|
204
|
-
npm run build # Vite 构建 → dist/
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
前端构建产物(dist/)嵌入 npm 包,`sillyspec dashboard` 启动时 serve 静态文件。
|
|
208
|
-
|
|
209
|
-
### 发布
|
|
210
|
-
|
|
211
|
-
作为 SillySpec 的子包,跟随主包版本一起发布。不需要独立版本号。
|
|
212
|
-
|
|
213
|
-
## 代码风格参照
|
|
214
|
-
|
|
215
|
-
- Vue 3 Composition API(`<script setup>`)
|
|
216
|
-
- Tailwind CSS utility-first
|
|
217
|
-
- 组件命名:PascalCase
|
|
218
|
-
- composable 命名:use 前缀
|
|
219
|
-
- 不使用 Vuex/Pinia,composable 管理状态即可(项目规模不需要)
|
|
@@ -1,206 +0,0 @@
|
|
|
1
|
-
# SillySpec Dashboard 设计
|
|
2
|
-
|
|
3
|
-
## 概述
|
|
4
|
-
|
|
5
|
-
为 SillySpec CLI 工具添加可视化仪表盘(`sillyspec dashboard`),用户通过浏览器直观查看和管理项目进度、阶段流程、任务详情和实时日志。
|
|
6
|
-
|
|
7
|
-
## 目标用户
|
|
8
|
-
|
|
9
|
-
SillySpec 全部用户(官方功能,随 npm 包发布)。
|
|
10
|
-
|
|
11
|
-
## 分期计划
|
|
12
|
-
|
|
13
|
-
### 一期(MVP)
|
|
14
|
-
|
|
15
|
-
可视化仪表盘 + CLI 命令执行 + 实时日志流。
|
|
16
|
-
|
|
17
|
-
### 二期(进阶)
|
|
18
|
-
|
|
19
|
-
Web Terminal(xterm.js)+ 自定义命令 + AI 交互(视需求而定)。
|
|
20
|
-
|
|
21
|
-
## 架构
|
|
22
|
-
|
|
23
|
-
```
|
|
24
|
-
sillyspec dashboard
|
|
25
|
-
│
|
|
26
|
-
▼
|
|
27
|
-
Node.js HTTP Server (localhost:3456)
|
|
28
|
-
│
|
|
29
|
-
├─ chokidar: watch .sillyspec/ 目录
|
|
30
|
-
├─ WebSocket: 实时推送状态变更
|
|
31
|
-
└─ REST API: 项目列表、状态、日志、CLI 执行
|
|
32
|
-
│
|
|
33
|
-
▼
|
|
34
|
-
Vue 3 SPA (浏览器)
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
### 文件结构
|
|
38
|
-
|
|
39
|
-
```
|
|
40
|
-
sillyspec/packages/dashboard/
|
|
41
|
-
├── server/
|
|
42
|
-
│ ├── index.js # HTTP + WebSocket 服务启动
|
|
43
|
-
│ ├── watcher.js # chokidar 文件监听 + 增量解析
|
|
44
|
-
│ └── api.js # REST 路由
|
|
45
|
-
├── src/
|
|
46
|
-
│ ├── App.vue
|
|
47
|
-
│ ├── components/
|
|
48
|
-
│ │ ├── ProjectList.vue # 左栏:项目列表
|
|
49
|
-
│ │ ├── PipelineView.vue # 中栏:阶段 pipeline
|
|
50
|
-
│ │ ├── StepCard.vue # 步骤卡片(可展开折叠)
|
|
51
|
-
│ │ ├── DetailPanel.vue # 右栏:详情 + 日志
|
|
52
|
-
│ │ ├── LogStream.vue # 终端风格日志流
|
|
53
|
-
│ │ ├── CommandPalette.vue # Cmd+K 命令面板
|
|
54
|
-
│ │ └── StageBadge.vue # 阶段状态标签
|
|
55
|
-
│ ├── composables/
|
|
56
|
-
│ │ ├── useWebSocket.js # WebSocket 连接管理
|
|
57
|
-
│ │ └── useKeyboard.js # 键盘快捷键
|
|
58
|
-
│ └── styles/
|
|
59
|
-
│ └── theme.css # 深色主题变量
|
|
60
|
-
├── package.json
|
|
61
|
-
└── vite.config.js
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
## 核心页面设计
|
|
65
|
-
|
|
66
|
-
### 三栏布局
|
|
67
|
-
|
|
68
|
-
```
|
|
69
|
-
┌──────────┬─────────────────────────┬──────────────────┐
|
|
70
|
-
│ 项目列表 │ Pipeline 视图(中) │ 详情+日志(右) │
|
|
71
|
-
│ (200px) │ (flex-1) │ (320px,可收起) │
|
|
72
|
-
│ │ │ │
|
|
73
|
-
│ 📁 proj1 │ ✅ brainstorm │ Step 3 详情 │
|
|
74
|
-
│ 📁 proj2 │ ⏳ plan ← 当前 │ 结论:选择React │
|
|
75
|
-
│ 📁 proj3 │ ⬜ execute │ 决策:... │
|
|
76
|
-
│ │ ⬜ verify │ 📋 实时日志 │
|
|
77
|
-
└──────────┴─────────────────────────┴──────────────────┘
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
### 信息分层(三级密度)
|
|
81
|
-
|
|
82
|
-
1. **低密度(默认)**:阶段名 + 状态图标
|
|
83
|
-
2. **中密度(hover)**:步骤摘要(1-2 句话)
|
|
84
|
-
3. **高密度(点击)**:右侧面板展开完整详情 + 日志
|
|
85
|
-
|
|
86
|
-
### 异常高亮
|
|
87
|
-
|
|
88
|
-
失败/阻塞/超时步骤自动标红,视觉上突出,不需用户手动查找。
|
|
89
|
-
|
|
90
|
-
## 数据源与同步
|
|
91
|
-
|
|
92
|
-
### 数据文件
|
|
93
|
-
|
|
94
|
-
| 文件 | 用途 |
|
|
95
|
-
|---|---|
|
|
96
|
-
| `STATE.md` | 当前阶段、状态、下一步命令 |
|
|
97
|
-
| `.runtime/progress.json` | 步骤进度、摘要、时间戳 |
|
|
98
|
-
| `.runtime/user-inputs.md` | 用户输入记录 |
|
|
99
|
-
| `specs/*.md` | 设计文档 |
|
|
100
|
-
| `changes/*/design.md` | 技术方案 |
|
|
101
|
-
|
|
102
|
-
### 同步方案
|
|
103
|
-
|
|
104
|
-
- **启动时**:全量读取 `.sillyspec/` 目录,构建初始状态
|
|
105
|
-
- **运行时**:chokidar watch 文件变化 → 解析 → WebSocket 增量推送
|
|
106
|
-
- **不轮询,不做 diff**,文件变化直接读取推送
|
|
107
|
-
|
|
108
|
-
### CLI 命令执行(一期)
|
|
109
|
-
|
|
110
|
-
后端通过 `child_process.spawn` 执行 CLI 命令:
|
|
111
|
-
- "下一步"按钮 → `sillyspec next`
|
|
112
|
-
- 阶段切换按钮 → `sillyspec plan` / `sillyspec execute` 等
|
|
113
|
-
- 执行结果通过 WebSocket 实时推送到前端日志面板
|
|
114
|
-
|
|
115
|
-
## 交互设计
|
|
116
|
-
|
|
117
|
-
### 键盘快捷键
|
|
118
|
-
|
|
119
|
-
| 快捷键 | 功能 |
|
|
120
|
-
|---|---|
|
|
121
|
-
| `j/k` | 上下切换步骤 |
|
|
122
|
-
| `Enter` | 展开详情 |
|
|
123
|
-
| `Escape` | 收起面板 |
|
|
124
|
-
| `/` | 搜索日志 |
|
|
125
|
-
| `Cmd/Ctrl+K` | 命令面板 |
|
|
126
|
-
|
|
127
|
-
### 命令面板功能
|
|
128
|
-
|
|
129
|
-
- 搜索项目名
|
|
130
|
-
- 跳转到指定阶段
|
|
131
|
-
- 切换深色/浅色主题
|
|
132
|
-
|
|
133
|
-
### CLI 命令
|
|
134
|
-
|
|
135
|
-
```bash
|
|
136
|
-
sillyspec dashboard # 启动 + 自动开浏览器
|
|
137
|
-
sillyspec dashboard --port 8080 # 自定义端口
|
|
138
|
-
sillyspec dashboard --no-open # 不自动打开浏览器
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
## 视觉设计
|
|
142
|
-
|
|
143
|
-
### 配色
|
|
144
|
-
|
|
145
|
-
| 用途 | 色值 |
|
|
146
|
-
|---|---|
|
|
147
|
-
| 背景 | `#0D1117` |
|
|
148
|
-
| 主色(进行中) | `#00D4AA` |
|
|
149
|
-
| 阻塞 | `#F59E0B` |
|
|
150
|
-
| 失败 | `#F87171` |
|
|
151
|
-
| 未开始 | `#6B7280` |
|
|
152
|
-
|
|
153
|
-
### 动效
|
|
154
|
-
|
|
155
|
-
- 阶段完成:脉冲光效(CSS animation,200ms)
|
|
156
|
-
- 日志新行:淡入
|
|
157
|
-
- hover 过渡:100ms
|
|
158
|
-
- 进度条:弹性缓动
|
|
159
|
-
|
|
160
|
-
## 技术选型
|
|
161
|
-
|
|
162
|
-
| 层 | 技术 |
|
|
163
|
-
|---|---|
|
|
164
|
-
| 前端框架 | Vue 3 |
|
|
165
|
-
| 构建工具 | Vite |
|
|
166
|
-
| CSS | Tailwind CSS |
|
|
167
|
-
| 后端 | Node.js 原生 http + ws |
|
|
168
|
-
| 文件监听 | chokidar |
|
|
169
|
-
| 数据库 | 无,纯文件系统 |
|
|
170
|
-
|
|
171
|
-
## 约束和假设
|
|
172
|
-
|
|
173
|
-
- 用户本地已有 Node.js(SillySpec 前置依赖)
|
|
174
|
-
- 仪表盘为本地工具,不考虑多用户并发
|
|
175
|
-
- 前端构建产物嵌入 npm 包,无需额外 build
|
|
176
|
-
- 不引入 Express、数据库等重依赖
|
|
177
|
-
|
|
178
|
-
## 状态历史时间线
|
|
179
|
-
|
|
180
|
-
Pipeline 视图下方展示时间线,记录每个步骤的:
|
|
181
|
-
- 开始时间 / 结束时间 / 耗时
|
|
182
|
-
- 状态变化(进行中 → 完成/阻塞/失败)
|
|
183
|
-
- 可按时间排序,快速定位耗时最长或异常步骤
|
|
184
|
-
|
|
185
|
-
数据来源:`progress.json` 中的 `summaries` 和时间戳。
|
|
186
|
-
|
|
187
|
-
## 不在范围内(一期)
|
|
188
|
-
|
|
189
|
-
- 用户认证/权限
|
|
190
|
-
- 多人协作
|
|
191
|
-
- 数据持久化(纯文件系统)
|
|
192
|
-
- AI 对话交互(二期)
|
|
193
|
-
- Web Terminal(二期)
|
|
194
|
-
|
|
195
|
-
## 验收标准
|
|
196
|
-
|
|
197
|
-
- [ ] `sillyspec dashboard` 一键启动,自动打开浏览器
|
|
198
|
-
- [ ] 三栏布局正确渲染,响应式适配
|
|
199
|
-
- [ ] 文件变化后前端实时更新(<1s 延迟)
|
|
200
|
-
- [ ] 步骤卡片三级信息分层(默认/hover/点击)
|
|
201
|
-
- [ ] 实时日志流正常显示,可搜索可过滤
|
|
202
|
-
- [ ] 键盘快捷键可用(j/k/Enter/Escape/Cmd+K)
|
|
203
|
-
- [ ] 命令面板可搜索项目名和阶段
|
|
204
|
-
- [ ] CLI 命令执行按钮可用,结果实时显示
|
|
205
|
-
- [ ] 异常步骤自动高亮
|
|
206
|
-
- [ ] 深色/浅色主题切换
|