OPC 工作台
一键交付一个完整的 OPC / 一人公司 / 个人工作室多菜单工作台，输出为可离线打开的单文件 HTML。
触发场景
当用户表达以下任一需求时，立即使用本技能：
- "帮我搭建一个 OPC 工作台"
- "我需要一个管理订单和项目的工具"
- "做一个个人工作室管理系统"
- "给我一个自由职业者 dashboard"
- "我需要一个接单管理工具"
- "帮我升级/修改 OPC 工作台"
- 任何涉及 OPC、一人公司、freelancer 管理工具的需求
交付方式
技能的核心资产是 assets/opc-workbench.html —— 一个完整的、可直接使用的单文件 HTML 应用。
默认交付
如果用户说"给我一个 OPC 工作台"（无额外自定义），直接将 assets/opc-workbench.html 复制到用户工作区并呈现：
- 读取
assets/opc-workbench.html - 写入到用户当前工作区，文件名
opc-workbench.html - 调用 present_files 展示给用户
自定义修改
如果用户要求在现有工作台基础上修改（如"加一个 XX 模块"、"把这个颜色改成 XX"），则在 assets/opc-workbench.html 基础上用 Edit 工具进行针对性修改，而非从头重写。
从零定制
如果用户要求的功能与现有工作台差异极大，可以基于 skill 中的模板结构从头构建，但应复用其中的数据模型和基础架构模式。
工作台模块概览
共 13 个页面，侧边栏导航：
| 模块 | 页面 ID | 核心功能 |
|---|---|---|
| 首页 | page-home | 今日任务、逾期应收、经营摘要、最近动态、备份提醒 |
| 看板 | page-board | 拖拽卡片（洽谈→待开始→进行中→待验收→已完成），状态选择 |
| 客户 | page-clients | 联系资料、合作历史、累计实收/待收、再次合作 |
| 订单 | page-orders | 服务项、分期应收（默认金额=报价-已填）、复制/模板/转项目 |
| 项目 | page-projects | 任务/工时/交付清单/修改轮次、复制/模板 |
| 收付款 | page-payments | 收支记录、月度统计 |
| 数据复盘 | page-review | 月度收入/来源占比/类型时薪/复购率 SVG 图表 |
| 活动管理 | page-events | AI比赛/黑客松、从链接生成、日期/地点/团队/成果 |
| 学习规划 | page-learning | 进度追踪、里程碑、心得、学时统计 |
| 周期总结 | page-summary | 月/季/年度一页纸、SVG→PNG 导出图片 |
| 作品集 | page-portfolio | 图片上传(压缩800px)、网盘链接、分类标签 |
| 荣誉墙 | page-honors | 图片上传自动加奖状框、金银铜三级 |
| 模板与设置 | page-templates | 模板管理、JSON备份/恢复、5工作表XLSX导出、V1迁移 |
技术架构
数据持久化
- 所有数据存储在
localStorage，以wb_opc_为前缀 - 13 个独立表：clients, orders, projects, payments, tasks, orderTemplates, projectTemplates, events, learnings, portfolio, honors, settings, dataVersion
导出能力
- JSON 全量备份/恢复
- 5 工作表 XLSX 导出（客户/订单/项目/收付款/经营摘要），零依赖 ZIP+OOXML 实现
- 周期总结 SVG→Canvas→PNG 图片导出
UI 设计系统
- 主色：克莱因蓝
#002FA7(International Klein Blue) - 背景：
#F5F5F7（Apple 风格浅灰） - 文字：
#1D1D1F/#86868B - 状态色：红
#FF3B30、绿#34C759、橙#FF9500、紫#5856D6、蓝#007AFF - 导航图标：细线几何 SVG（Apple SF Symbols 风格）
- 响应式：PC 侧边栏 + 移动端底部 Tab 栏
约束条件
- 零外部依赖：无 CDN、无字体、无图表库
- 单文件 HTML：CSS/JS/SVG 全部内联
- 完全离线可用（除用户自行添加的外部链接外）
- 移动端安全区域适配
修改指南
当用户要求修改工作台时，遵循以下原则：
- 加模块：在侧边栏、移动菜单、页面区域、数据层(loadData/saveData/state/seedData)、渲染函数(renderPage)、CRUD 函数中各加对应代码
- 改配色：修改
:rootCSS 变量即可全局生效 - 改图标：替换对应
nav-item或bottom-tab中的内联 SVG - 导出/导入：所有新模块的数据需同步加入
exportJSON()和importJSON()函数 - 清空数据：
clearAllData()中需包含新模块的 localStorage key 和 state 重置
