前端工程师视角：从零到一掌握 HiCAD 开发

用户 Prompt
  -> aiStore 发起 /api/ai/generate SSE
  -> code_delta 拼接为 JSCAD 代码
  -> editorStore.updateCode(code)
  -> useJscad 发送代码到 Worker
  -> Worker 返回 GeometryGroup
  -> useThreeScene.updateGeometry(groups)
  -> QualityPanel 展示评分和优化建议

# 首次安装
pnpm install

# 本地开发：优先使用根目录脚本同时启动
pnpm dev

# 或分别启动
pnpm --filter backend start:dev
pnpm --filter frontend dev

# 前端构建验证
pnpm --filter frontend build

frontend/src/
├── main.ts                         # Vue 应用入口，注册 Pinia、Router、全局样式
├── router/index.ts                 # 页面路由与登录守卫
├── api/http.ts                     # Axios 实例、Token 注入、401 处理
├── stores/
│   ├── userStore.ts                # 登录态、会员、配额、管理员能力
│   ├── editorStore.ts              # 当前代码、渲染状态、质量评分
│   └── aiStore.ts                  # AI 对话、SSE、模型选择、自动评测
├── pages/EditorPage.vue            # CAD 工作台总编排
├── components/ai/AiChatBox.vue     # Prompt 输入、模型选择、生成/停止
├── components/editor/CodeEditor.vue # Monaco 代码编辑器
├── components/editor/ParamPanel.vue # 参数识别与反写
├── components/viewer/ThreeViewer.vue # 3D 视图容器
├── composables/useJscad.ts         # 主线程与 Worker 通信
├── composables/useThreeScene.ts    # Three.js 场景和几何更新
└── utils/                          # 参数解析、STL/OBJ/DXF/图纸导出

// 新增需要登录的页面时，保持这种模式
{
  path: '/workspace',
  name: 'workspace',
  component: () => import('@/pages/WorkspacePage.vue'),
  meta: { requiresAuth: true },
}

// 前端工程师要记住的状态写入方向
AiChatBox submit
  -> aiStore.generate(prompt)
  -> editorStore.setAiGenerating(true)
  -> editorStore.updateCode(generatedCode)
  -> editorStore.setQualityResult(result, prompt)
  -> userStore.fetchMe()

const params = new URLSearchParams({ prompt, model: selectedModel })
const reader = response.body.getReader()
const decoder = new TextDecoder()
let buffer = ''

while (true) {
  const { done, value } = await reader.read()
  if (done) break
  buffer += decoder.decode(value, { stream: true })
  const lines = buffer.split('\n')
  buffer = lines.pop() || ''
  for (const line of lines) {
    if (!line.startsWith('data: ')) continue
    handleEvent(JSON.parse(line.slice(6)), editorStore)
  }
}

// 开发新补全项时，优先覆盖项目真实使用的 JSCAD API
const suggestions = [
  'cuboid', 'sphere', 'cylinder', 'torus',
  'union', 'subtract', 'intersect',
  'translate', 'rotate', 'scale', 'degToRad',
]

// 支持用注释增强参数 UI
// 车身长度 min:80 max:220 step:1 unit:mm
const bodyLength = 140

// 主颜色 options:#165DFF|#10B981|#FF8E53
const bodyColor = '#165DFF'

// 主线程消息协议
worker.postMessage({ requestId, code })

// Worker 返回结果
{
  requestId,
  success: true,
  groups,
  triangleCount,
  hasColorize,
  elapsed,
  warning,
}

// 渲染数据转换心智模型
GeometryGroup
  -> BufferGeometry(position, normal, index)
  -> MeshPhysicalMaterial(color/material preset)
  -> Mesh + Edges
  -> fitCameraToObject()
  -> render loop

POST /api/ai/evaluation/code
{
  "prompt": "生成一个带轮毂细节的低趴超跑",
  "code": "const { cuboid } = require('@jscad/modeling').primitives...",
  "model": "deepseek-chat"
}