企业官网建设流程全解析

• 前端
• AI 应用
• 数据可视化

TenacitOS 是一款为 OpenClaw AI 智能体打造的实时 Mission Control 仪表盘，提供 Agent 状态监控、成本分析、Cron 任务管理、3D 办公室等能力。无论你是想修 Bug、加功能，还是完善文档，这份贡献指南与 PR 流程手册都能带你从 Fork 到合并一次跑通。

为什么选择贡献 TenacitOS

TenacitOS 采用 Next.js 16 + React 19 + Tailwind CSS v4 构建，代码结构清晰、模块边界明确，非常适合新手入门全栈开发。项目内置系统监控、会话历史、成本分析等丰富页面：

更重要的是，项目通过 ROADMAP.md 明确列出了 12 个开发阶段和优先级分级，你可以直接从中挑选一个合适的新手任务开始。

快速搭建贡献开发环境

本地环境只需三步即可跑起来。

克隆仓库并安装依赖

git clone https://gitcode.com/gh_mirrors/te/tenacitOS cd tenacitOS npm install

配置环境变量

项目通过.env.local管理个人配置（已被 gitignore），品牌信息统一由 src/config/branding.ts 读取环境变量，切勿直接在该文件中硬编码个人信息。

初始化示例数据

data/目录下的真实数据文件不入库，仓库提供.example版本作为模板，例如 data/activities.example.json。本地运行时将示例文件复制为正式文件即可：

cp data/cron-jobs.example.json data/cron-jobs.json cp data/activities.example.json data/activities.json

启动开发服务器

npm run dev # → http://localhost:3000

熟悉代码结构：目录与命名规范

贡献前建议先花十分钟熟悉目录组织（详见 CONTRIBUTING.md）：

核心规范速览：

• TypeScript 优先：为新代码定义 interface，避免any，类型与组件一同导出
• React 函数组件 + Hooks：交互组件加'use client'，组件保持小而专注
• Tailwind CSS v4：优先className而非内联样式，主题色使用 CSS 变量
• API 路由：统一返回NextResponse.json()，正确使用 HTTP 状态码并 try/catch 处理异常

安全红线：提交前必做的隐私检查

这是 TenacitOS 贡献中最重要的一条规则：永远不要把个人数据提交进仓库。

🚨严禁提交：.env.local（含密码密钥）、data/*.json（运行数据）、data/*.db、真实用户名/邮箱/API Key、含真实数据的截图。

项目提供了 scripts/pre-commit-check.sh 预检脚本，自动检查暂存区是否混入敏感文件：

./scripts/pre-commit-check.sh

检查项包括：.env.local是否被暂存、data/下非.example的 JSON/数据库文件、硬编码邮箱与密钥等。脚本通过后才可安全提交。更多安全规范见 SECURITY.md。

编写规范的 Commit 消息

社区采用 Conventional Commits 风格，格式为<type>: <short description>：

示例：

feat: add real-time cost tracking with SQLite Implemented usage collector that reads openclaw status, calculates costs, and stores in SQLite database. Closes #42

完整 PR 流程：从分支到合并

整个 Pull Request 流程可以归纳为 7 步，每一步都对应 CONTRIBUTING.md 中的官方要求：

1. Fork 仓库（在本平台克隆你自己的副本）
2. 创建功能分支：git checkout -b feat/my-feature
3. 修改代码并遵循上述目录与命名规范
4. 本地充分测试（自查清单见下一节）
5. 运行预检脚本并编写清晰的 commit message
6. 推送并创建 Pull Request
7. 响应 Review，耐心修改直到合并

PR 描述模板

创建 PR 时请包含以下结构：

• What does this PR do?— 简述改动内容
• Type of change— Bug 修复 / 新功能 / 文档 / 重构
• Testing— 本地开发与生产模式均测试通过、无控制台报错、响应式布局正常
• Screenshots— UI 改动必须附截图
• Related Issues—Closes #issue编号

保持 PR 聚焦

一个 PR 只做一件事：不要把重构和新功能混在一起，让 diff 保持小而可审阅。

测试自查清单：提交 PR 前逐项确认

• npm run build构建成功
• tsc --noEmit无 TypeScript 错误
• npm run lint无 ESLint 错误
• 开发模式（npm run dev）测试通过
• 生产模式（npm run build && npm start）测试通过
• 移动端 / 平板 / 桌面响应式布局正常
• 深色主题（默认主题）显示正常
• 浏览器无控制台报错
• 无硬编码个人数据

对新功能还需覆盖：正常路径、边界情况（空数据/大数据量）、错误处理、不同屏幕尺寸。

从 ROADMAP 中挑选你的第一个任务

不知道做什么？打开 ROADMAP.md，它是社区公认的"任务池"，按优先级分为 6 个 Tier：

• Tier 0：Office 3D 旗舰功能（React Three Fiber 实现的 3D 办公室，每个 Agent 一个工位）
• Tier 1：Activity Logger、Cron Manager、Memory Browser 等核心能力
• Tier 2-4：终端交互、Token Economics、知识图谱等高价值可视化
• Tier 5-6：实验性功能与后台管理

💡 新手建议从 Tier 2 的 UI 增强类任务或小修小补的fix:开始，熟悉流程后再挑战复杂功能。提交新功能时记得同步更新文档与状态说明。

报告 Bug 与功能请求

发现 Bug 或有好想法时，通过项目 Issue 反馈：

• Bug 报告需包含：问题描述、复现步骤、期望行为、截图、运行环境（OS / Node 版本 / OpenClaw 版本 / 浏览器）
• 功能请求需说明：使用场景、建议方案、备选方案与优先级
• 提交前先看一眼 ROADMAP —— 你的想法可能已经被规划了

⚠️ 特殊提醒：安全漏洞不要公开提 Issue，请按 SECURITY.md 的要求通过私有渠道报告。

常见问题 FAQ

Q：我需要装 OpenClaw 才能开发吗？A：本地 UI 开发不需要，但涉及 Agent 数据读取的功能需在装有 OpenClaw 的主机上联调。

Q：个人配置放在哪里？A：全部通过环境变量与.env.local管理（已被 gitignore），品牌常量统一从src/config/branding.ts导入。

Q：构建失败怎么办？A：先清理缓存重试：删除.next与node_modules后重新npm install && npm run build。

🦞 加入 TenacitOS 社区，你的第一个 PR 可能就从修复一个文案或优化一个组件开始。保持提交聚焦、守住安全红线，祝你在 OpenClaw Mission Control 的旅程顺利！

• 前端
• AI 应用
• 数据可视化