@full-self-developing/fsd 1.0.0

package/.engine/engine-config.json

@@ -0,0 +1,27 @@
+{
+  "engine": "gemini-cli",
+  "updated_at": "2026-05-26T15:32:56.310Z",
+  "settings": {
+    "ai": {
+      "executionMode": "Local CLI Driver",
+      "provider": "gemini-cli",
+      "model": "gemini-3.1-pro-preview"
+    },
+    "ui": {
+      "theme": "Light",
+      "language": "English"
+    },
+    "fsd": {
+      "reviewRounds": 1,
+      "concurrency": 1,
+      "manualConfirm": true,
+      "requireApproval": true
+    },
+    "memory": {},
+    "safety": {},
+    "advanced": {}
+  },
+  "model": "gemini-3.1-pro-preview",
+  "workspace": "C:\\asitela\\theoms",
+  "workspace_updated_at": "2026-05-26T15:33:21.609Z"
+}

package/CODEBASE_CONTEXT.md

@@ -0,0 +1,152 @@
+# CODEBASE_CONTEXT.md
+
+> 本文件是给 AI 阅读的项目上下文文档，每次开发任务前请引用此文件。
+> 维护原则：任何新增组件、页面、约定，都应同步更新此文档。
+
+---
+
+## 一、技术栈
+
+- **框架**: React (Vite)
+- **样式**: Tailwind CSS (核心) + `index.css` (CSS 变量与基础组件类)
+- **图标**: `lucide-react`
+- **通信**: Fetch API + Server-Sent Events (SSE) 用于流式响应
+- **前端开发与构建**: Vite (`npm run dev`)。注意：后端（8033端口）现已纯粹作为 API Server，不再负责静态托管前端打包后的 `dist` 文件。前端界面请始终通过 Vite 端口（如 5173）访问。
+
+---
+
+## 二、设计 Token 与视觉规范
+
+> 来源于 `tailwind.config.js` 和 `index.css`。目前项目正向纯 Tailwind 迁移，**禁止在内联样式或新的 CSS 中 hardcode 颜色值**。
+
+### 颜色系统
+- **主色 (Primary)**: `#1A56DB` (对应 Tailwind `primary`)
+- **主色 Hover**: `#1E429F` (`primary-hover`)
+- **页面背景**: `#0a0a0a` (暗黑) / `#ffffff` (明亮)，或使用 `--bg-base`
+- **表面背景 (Surface)**: `#F9FAFB` (`surface`) 或 `--bg-surface`
+- **主文字**: `#111827` (`text-main`) / `--fg-primary`
+- **次要文字**: `#6B7280` (`text-muted`) / `--fg-secondary`
+- **重音/标识色**: `--accent` (`#10a37f`)
+
+### 字体规范
+- **默认字体**: `Inter` / `Geist` 等无衬线字体 (`var(--font-sans)`)
+- **等宽字体**: `Geist Mono` / `Fira Code` (`var(--font-mono)`)
+- **页面/面板标题**: `14px font-medium` (`text-sm font-medium`)
+- **正文**: `13px` (`text-[13px]`)
+- **辅助/标签说明**: `11px font-medium text-muted uppercase tracking-wider`
+
+### 间距与圆角
+- **间距**: 遵循 Tailwind 的 4px 体系 (`p-2`, `p-4`, `gap-2`, `gap-4` 等)。
+- **卡片/面板圆角**: `8px` (`rounded-lg` 或 `var(--radius-lg)`)
+- **按钮/输入框圆角**: `6px` (`rounded-md` 或 `var(--radius-md)`)
+
+---
+
+## 三、全局布局结构 (`App.jsx`)
+
+整个应用采用满屏不可滚动的 Tailwind Flex 布局 (`flex h-screen overflow-hidden`)，内部区域自行滚动：
+
+```text
+┌─────────────────────────────────────────────────────────┐
+│ Sidebar (w-64/256px) │ Main Canvas (flex-1)             │
+│ flex-col, border-r   │ ┌──────────────────────────────┐ │
+│                      │ │ Header (h-48px)              │ │
+│ - Logo / Controls    │ ├──────────────────────────────┤ │
+│ - Nav Items          │ │                              │ │
+│ - Settings Selectors │ │ ChatPanel / LoopPanel        │ │
+│ - Past Conversations │ │ (overflow-y: auto)           │ │
+│ - Quota Footer       │ └──────────────────────────────┘ │
+└──────────────────────┴──────────────────────────────────┘
+```
+
+- **Sidebar** (`components/Sidebar.jsx`): 左侧侧边栏，采用标准 Tailwind UI Application Shell 设计规范，固定宽度 `w-64` (256px)。
+- **Header** (`components/Header.jsx`): 顶部栏，显示当前会话、模型、工作区状态，以及 `Chat` 和 `Loop` 模式切换 Tab。
+- **主功能区**: 
+  - `ChatPanel.jsx`: AI 对话界面（包含流式消息展示、输入框、Token 消耗槽）。
+  - `LoopPanel.jsx`: Agent 自动循环执行任务界面。
+- **全局弹窗**: `FolderPicker.jsx`（工作区目录选择）。
+
+---
+
+## 四、核心组件与样式复用
+
+项目从自定义 CSS（`.btn`, `.glass-card` 等）向 Tailwind 迁移。新代码应**优先使用 Tailwind 实用类**，如需使用旧版样式类，请遵循以下规范：
+
+### 通用 UI 类 (定义在 `index.css`)
+- **卡片背景**: `.glass-card` (包含背景色和 subtle 边框)
+- **主要按钮**: `.btn .btn-primary` (背景为 accent 或 primary)
+- **次要按钮**: `.btn .btn-secondary`
+- **危险按钮**: `.btn .btn-danger`
+- **表单选择框**: `.glass-select`
+- **徽章/标签**: `.badge` (组合 `.badge-safety`, `.badge-auto` 等)
+
+### 常用图标
+统一使用 `lucide-react`，常用如：`FolderOpen`, `Sun`, `Moon`, `Plus`, `X`, `Server`, `Activity`。尺寸一般为 `size={14}` 或 `size={16}`。
+
+---
+
+## 五、状态管理与 API 规范
+
+- **状态层**: 大量使用 React 的 `useState` 和 `useEffect` (集中在 `App.jsx` 作为单一事实来源向下传递 props)。
+- **网络请求**:
+  - 普通请求: 封装的 `apiFetch('/api/...', { method: '...' })` (见 `api.js`)。
+  - 流式响应: 使用 `EventSource` (`SSE`) 处理 `/api/chat/stream` 和 `/api/loop/stream`。
+- **轮询/心跳**: 
+  - `App.jsx` 中有每 5 秒一次的 `/api/heartbeat` 轮询检查 Server 连通状态。
+
+---
+
+## 六、UI 交互约定
+
+1. **加载状态 (Loading)**: 
+   - 切换模型或引擎时，Select 会短暂显示 `Loading models...`。
+   - 对话生成中：发送按钮被禁用 (`disabled={isStreaming}`)，并显示 Stop 按钮。
+2. **列表高亮 (Active Item)**:
+   - Sidebar 的当前会话需添加 `.active` 类。
+   - Header 的当前 Tab 需添加 `.active` 类。
+3. **滚动条**:
+   - `index.css` 中重写了 `::-webkit-scrollbar`，隐藏原生丑陋滚动条，保持 6px 纤细宽度。必须确保滚动容器加上 `overflow-y: auto`。
+4. **消息框布局**:
+   - 用户输入: 靠左，带灰色/暗色气泡底色和对应头像。
+   - AI 消息: 靠左，支持 Markdown 渲染 (`.msg-content-md`)，紧密排版。
+
+---
+
+## 七、开发约束（必须遵守）
+
+1. **响应式与高度限制**: `ChatPanel` 必须通过 `min-height: 0` 和 `overflow: hidden` 来约束 flex 子项，确保底部的 `input-deck` (输入框) 永远固定在视口底部，不会被无限撑开的长消息挤出屏幕。
+2. **渐进式 Tailwind**: 新增的组件必须 100% 使用 Tailwind (`className="flex flex-col gap-4 p-4"` 等)，不要在 `index.css` 新增自定义 class。
+3. **安全操作**: 如删除会话等危险操作，Hover 时才显示删除按钮，且建议后续补充二次确认机制。
+4. **SSE 处理**: 注意监听 `done` 和 `error` 事件并正确调用 `sse.close()` 以防止内存泄漏和连接挂起。
+
+---
+
+## 八、Prompt 使用模板
+
+每次让 AI 开发新功能时，在 Prompt 开头引用：
+
+```text
+请先阅读以下项目上下文，严格按照规范实现，不要偏离：
+
+[粘贴 CODEBASE_CONTEXT.md 相关章节]
+
+任务：实现 XXX 功能
+
+要求：
+1. 只使用设计系统允许的 token (Tailwind)
+2. 遵循现有的 Flex/Grid 布局嵌套逻辑，确保不破坏视口高度限制 (100vh)
+3. 新增 UI 组件必须具备明暗主题兼容性（使用 CSS 变量或 Tailwind `dark:`）
+4. 完成后列出你做了哪些设计决定
+```
+
+---
+
+## 九、Review Checklist
+
+每次提交前自查：
+
+- [ ] 新增样式是否 100% 使用了 Tailwind 类，或合理复用了旧的 `.btn` / `.glass-card`？
+- [ ] 颜色有无 hardcode（如直接写 `#ccc`，应替换为 `text-muted` 或 `var(--fg-secondary)`）？
+- [ ] `flex` 容器内长列表滚动是否正常？（是否有子元素超出了 100vh 导致页面出现整体滚动条？）
+- [ ] 按钮点击是否在异步/流式请求期间被正确禁用了防抖？
+- [ ] 代码是否通过了 `eslint` 校验？

package/README.md

@@ -0,0 +1,111 @@
+# FSD — Full Self-Developing
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+[![Engine: Gemini/AtomCode/OpenRouter](https://img.shields.io/badge/Engine-Configurable-blue.svg)](#)
+
+[中文版](README_zh.md)
+
+> **Directly drive authorized local CLIs for seamless coding and chat; designed specifically for legacy and under-resourced projects, providing closed-loop fully autonomous iteration and intelligent auto-fixing capabilities.**
+
+FSD (Full Self-Developing) is a **highly aesthetic, zero-login, fully local graphical Agent console** built for developers and project maintainers. It interfaces directly with your pre-authorized local CLI environments to provide a secure, controllable autonomous programming loop.
+
+---
+
+## 🌟 Core Advantages & Killer Features
+
+### 1. Direct Local Authorized CLI Driving, Zero-Config Out-of-the-Box
+*   **No API Key Configuration Required**: Directly bind and invoke command-line tools that are already logged in and authorized on your local machine (such as `gemini-cli`, `atomcode-cli`, etc.). The system automatically inherits security credentials from your local terminal, eliminating tedious web logins and the risk of API Key leakage.
+*   **Interactive Prompt Interception & Approval**: When executing high-risk system commands, creating/modifying files, or installing third-party dependencies, FSD intercepts confirmation requests in real-time and presents them via a graphical pop-up (Approval Modal) for one-click approval or rejection.
+
+### 2. Fully Autonomous Programming (FSD Loop) — Salvaging Legacy & Under-Resourced Projects
+For legacy codebases, open-source libraries short on maintainers, or projects requiring large-scale refactoring, FSD offers a **fully autonomous development and troubleshooting loop**:
+*   **Autonomous Task Loop**: Starting from a high-level task goal, FSD automatically conducts "Architecture Analysis -> Plan Design -> Code Modification -> Compile & Run -> Error Diagnosis -> Iterative Bug Fixing" until the task is successfully delivered.
+*   **Adaptive Compilation & Diagnosis**: Upon encountering compiler/syntax errors, TypeScript validation failures, or lint issues, FSD autonomously writes lightweight debugging scripts, captures stdout/stderr from the console, and automatically maps issues to corresponding source code lines for corrections.
+*   **Multi-Tier Safety Operation Modes**:
+    *   `Plan` (Read-only planning mode): Only generates modification plans and paths, never touches physical files. Ideal for initial auditing.
+    *   `Default` (High-safety mode): All file modifications and command executions require manual approval, ensuring 100% control.
+    *   `Auto_Edit` (Semi-autonomous mode): Code edits are written directly, but shell command executions still require approval, offering the optimal balance between speed and security.
+    *   `YOLO` (Fully autonomous mode): Run completely autonomously. The agent makes all decisions—ideal for rapid iteration within sandbox/container environments.
+
+### 3. Hot-Pluggable Workspace Skills
+*   **Pure Markdown Driven**: Simply write a description in the workspace's `skills/<skill_id>/SKILL.md` to automatically load it.
+*   **Domain Knowledge Injection**: You can tailor custom code conventions (e.g., CSS writing style, API call constraints, Git commit message rules) specifically for your project. Once toggled ON, the skill's instructions are parsed and injected as System Prompt Enhancements into every agent execution.
+
+### 4. Deep Integration with MCP (Model Context Protocol)
+*   **Universal Tool Extension**: Built-in MCP client manager (based on Standard JSON-RPC) that supports mounting any standard MCP service.
+*   **Break Browser Sandbox Limits**: By connecting services like `chrome-devtools-mcp`, the agent gains the ability to operate real browsers, inspect DOM elements, run Lighthouse audits, scrape web page content, and seamlessly participate in front-end debug sessions.
+
+### 5. Premium Visuals & Real-Time Monitoring
+*   **Beautiful UI**: Designed with carefully tuned HSL dark/light dual themes, smooth micro-interactions, dynamic glassmorphism cards, and monospace typography tailored for immersive development.
+*   **Token Resource Gauges**: Visually represents current context window usage and remaining headroom, preventing context overflow proactively.
+*   **SSE Real-Time Streaming**: Delivers millisecond-level responsiveness for chat bubbles and task logs using Server-Sent Events.
+
+---
+
+## 🛠️ Project Structure
+
+```text
+full-self-developing/
+├── client/             # Frontend React SPA (built with Vite)
+│   ├── src/            # UI components (ChatPanel, LoopPanel, SettingsPanel, etc.)
+│   ├── index.css       # Tailwind CSS & global design system tokens
+│   └── package.json    # Frontend dependencies
+├── agents/             # Agent engine definitions, task queue, and prompt managers
+├── queue/              # Local persistent storage for task queue
+├── skills/             # Local hot-pluggable skills folder
+├── server.js           # Backend Express API service (running on port 8033)
+├── launcher.js         # Security token generation and server bootstrap script
+└── start.bat           # Windows one-click startup script (nodemon + Vite dev)
+```
+
+---
+
+## 🚀 Quick Start
+
+### 1. Install Dependencies
+
+Run the following in the project root directory:
+```bash
+npm install
+```
+
+### 2. Startup (Local Development)
+
+FSD provides a one-click startup script `start.bat`, which starts the Express API backend (port `8033`) and the Vite frontend dev server (port `5173`) concurrently, complete with hot-reloading:
+
+*   **Windows Users**: Double-click `start.bat` or run:
+    ```bash
+    .\start.bat
+    ```
+*   **Other Platforms**:
+    ```bash
+    node launcher.js
+    ```
+
+Once started, the browser will automatically open `http://localhost:5173/`. A random high-entropy authorization token is generated on startup and injected into the browser's `localStorage` for API authorization.
+
+---
+
+## 💡 Legacy Project Autonomous Iteration Guide
+
+For historical or under-resourced projects, the following iteration workflow is recommended:
+
+1.  **Mount Workspace**: Use the directory selector in the FSD top navigation bar to locate the root directory of your legacy project.
+2.  **Set Safety Level to `Auto_Edit`**: Allow the agent to modify code directly to resolve bugs, while intercepting command executions to prevent unwanted scripts from running.
+3.  **Create an FSD Task**: Input a clear target in the Loop panel (e.g., `"Upgrade all React Router v5 APIs in the project to v6, and fix any related TypeScript compilation issues."`).
+4.  **Review Diffs in Real-Time**: Use the **File Changes** tab in FSD to inspect all code alterations side-by-side as the agent modifies them.
+5.  **Commit Your Changes**: Once compilation and testing pass, commit your changes using Git in your terminal.
+
+---
+
+## ⚙️ Core Settings Configuration
+
+Configure the following options under the **Settings** panel:
+*   **Engine Selector**: Toggle the active local execution engine (supports `Gemini CLI`, `AtomCode CLI`, or custom API endpoints like `OpenRouter`).
+*   **Model Config**: Customize active LLM models and parameters.
+*   **MCP Servers**: Dynamically add/remove MCP servers with custom startup command lines.
+*   **Workspace Skills**: Instantly toggle scanned workspace skills.
+
+---
+
+*FSD — Full Self-Developing. Build the future, driven by you and AI.*

package/README_zh.md

@@ -0,0 +1,111 @@
+# FSD — Full Self-Developing (全自主开发助手)
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+[![Engine: Gemini/AtomCode/OpenRouter](https://img.shields.io/badge/Engine-Configurable-blue.svg)](#)
+
+[English](README.md)
+
+> **直接驱动本地已授权 CLI 进行无缝编程与聊天；专为老旧及缺乏维护资源的项目设计，提供闭环全自动迭代与智能修复能力。**
+
+FSD (Full Self-Developing) 是一个专为开发者和项目维护者打造的**高颜值、零登录、完全运行在本地的图形化 Agent 控制台**。它能够直接对接您本地已经预授权的 CLI 环境，并提供安全可控的自主循环编程体验。
+
+---
+
+## 🌟 核心优势与杀手级特性
+
+### 1. 直接驱动本地已授权 CLI，零配置开箱即用
+*   **无需配置 API Key**：直接绑定并调用本地已经登录 and 授权的命令行工具（如 `gemini-cli`、`atomcode-cli` 等）。系统自动继承您本地终端的安全凭证，免去了繁琐的 Web 登录及 API Key 密钥泄露风险。
+*   **交互式 Prompt 拦截与确认**：在执行高风险系统命令、文件创建/修改或第三方依赖安装时，FSD 会实时拦截 CLI 内部的确认请求，并以图形化弹窗（Approval Modal）的形式呈现，供您一键批准或驳回。
+
+### 2. 全自动编程 (FSD 循环) —— 拯救老旧与缺乏资源维护的项目
+对于许多疏于维护的历史遗留项目、缺乏人手的开源库、或是需要大批量重构的代码库，FSD 能够提供**全自主的开发与纠错闭环**：
+*   **自主任务循环**：从输入一个高层级的任务目标开始，FSD 会自动进行“架构分析 -> 方案设计 -> 代码修改 -> 编译运行 -> 报错诊断 -> 迭代修复”，直至任务完全交付。
+*   **自适应编译与诊断**：当遇到代码报错、TypeScript 类型校验未通过或 lint 错误时，FSD 能够自主编写轻量级调试脚本，抓取控制台 stdout/stderr，并自动定位到源码关联行进行修正。
+*   **多级安全运行模式**：
+    *   `Plan` (只读规划模式)：仅生成修改方案与路径，绝不修改物理文件，适合初步审计。
+    *   `Default` (高安全模式)：所有的文件写入和命令执行均需人工确认批准，确保 100% 掌控。
+    *   `Auto_Edit` (半自动模式)：代码编辑直接写入，但任何 Shell 命令执行均需点击确认，在效率与安全间取得最佳平衡。
+    *   `YOLO` (全自主模式)：闭眼狂奔，完全交由 Agent 自主决策，适合在沙箱/容器中快速迭代。
+
+### 3. 热插拔的工作区技能系统 (Workspace Skills)
+*   **纯 Markdown 驱动**：只需在当前工作区的 `skills/<skill_id>/SKILL.md` 中编写说明，系统即可自动加载。
+*   **领域知识注入**：你可以为项目量身定制专有的代码规范（如 CSS 书写风格、API 调用约束、Git Commit 提交规范等）。技能开启（Toggle ON）后，其指令会被自动解析并作为系统增强提示词（System Prompt Enhancement）注入到每次 Agent 调度中。
+
+### 4. 深度整合 MCP (Model Context Protocol) 协议
+*   **通用工具扩展**：内置 MCP 客户端管理器（基于 Standard JSON-RPC），支持挂载任意标准 MCP 服务。
+*   **打破浏览器沙箱限制**：通过连接 `chrome-devtools-mcp` 等服务，使 Agent 具备了操作真实浏览器、检查前端 DOM、运行 Lighthouse 性能审计、爬取网页并无缝参与前端联合调试的能力。
+
+### 5. 极致的视觉表现与实时监控
+*   **高颜值界面**：采用精心调校的 HSL 暗黑/明亮双主题，拥有流畅的微交互、动态玻璃拟态（Glassmorphism）卡片与专为沉浸式开发设计的等宽字体排版。
+*   **Token 资源量规**：界面直观呈现当前大模型 Context Window 的消耗状态与剩余 Headroom，防患上下文溢出于未然。
+*   **SSE 实时流式响应**：基于 Server-Sent Events 实现毫秒级响应的聊天气泡与任务日志流。
+
+---
+
+## 🛠️ 项目结构
+
+```text
+full-self-developing/
+├── client/             # 前端 React SPA 应用 (Vite 构建)
+│   ├── src/            # 页面组件 (ChatPanel, LoopPanel, SettingsPanel 等)
+│   ├── index.css       # Tailwind CSS & 全局设计系统 Token
+│   └── package.json    # 前端依赖
+├── agents/             # 智能体引擎定义、任务队列与 Prompt 管理器
+├── queue/              # 任务队列本地持久化存储
+├── skills/             # 本地可热插拔的技能库文件夹
+├── server.js           # 后端 Express API 服务 (纯 API 模式运行在 8033 端口)
+├── launcher.js         # 安全令牌生成与服务器引导脚本
+└── start.bat           # Windows 一键并发启动脚本 (nodemon + Vite dev)
+```
+
+---
+
+## 🚀 快速开始
+
+### 1. 安装依赖
+
+在项目根目录下执行：
+```bash
+npm install
+```
+
+### 2. 一键启动 (本地开发环境)
+
+FSD 配备了 `start.bat` 一键启动脚本，它会同时拉起后端的 Express API 服务（端口 `8033`）和前端的 Vite 调试服务（端口 `5173`），并启用热重载：
+
+*   **Windows 用户**：双击运行 `start.bat` 或在终端运行：
+    ```bash
+    .\start.bat
+    ```
+*   **其他平台用户**：
+    ```bash
+    node launcher.js
+    ```
+
+启动成功后，浏览器会自动打开 `http://localhost:5173/`。系统在启动时会随机生成一个高强度的安全授权 Token，并自动注入到浏览器 `localStorage` 中用于接口鉴权。
+
+---
+
+## 💡 老旧项目自动化迭代实战指南
+
+对于资源匮乏或无人维护的历史项目，推荐采用以下工作流进行迭代：
+
+1.  **挂载工作区**：在 FSD 顶部栏的目录选择器中，定位到你需要改造的历史项目根目录。
+2.  **设定安全等级为 `Auto_Edit`**：允许 Agent 自动改写代码以快速修复 Bug，但拦截执行命令，防止其运行未知的清理或变动脚本。
+3.  **新建 FSD 任务**：在 Loop 面板输入明确的修复目标（例如：`“将项目内所有的 react-router v5 路由 API 升级到 v6，并解决相关的 TypeScript 编译报错”`）。
+4.  **实时审查 Diff**：通过 FSD UI 的 **File Changes** 面板，以 side-by-side 双栏比对视图实时直观地审查 Agent 自动改写的每一行代码。
+5.  **一键提交**：确认编译和测试通过后，即可在本地终端放心执行 Git Commit。
+
+---
+
+## ⚙️ 核心配置说明
+
+通过界面的 **Settings** 面板，您可以轻松配置以下内容：
+*   **Engine Selector**：切换本地执行引擎（支持 `Gemini CLI`、`AtomCode CLI` 或通用 API 转发如 `OpenRouter`）。
+*   **Model Config**：自定义当前运行的大语言模型与参数。
+*   **MCP Servers**：热添加或移除 MCP 服务器（支持自定义启动命令行与参数）。
+*   **Workspace Skills**：一键开关工作区中被扫描出来的特定技能。
+
+---
+
+*FSD — Full Self-Developing. 构建未来，由您和 AI 共同主导。*

package/UI_SPEC.md

@@ -0,0 +1,57 @@
+# UI Spec — 项目名
+
+然后在 Spec 里写："只允许使用 theme 中定义的 token，禁止 hardcode 颜色值"。C:\asitela\full-self-developing\tailwind.config.js
+
+## 设计系统
+### 颜色
+- 主色: `#1A56DB`
+- 背景: `#F9FAFB`
+- 文字主色: `#111827`
+- 文字次要: `#6B7280`
+
+### 字体
+- 标题: `Inter 600, 24px`
+- 正文: `Inter 400, 14px, line-height 1.5`
+
+### 圆角 / 间距
+- 卡片圆角: `8px`
+- 按钮: `rounded-md, px-4 py-2`
+- 间距单位: `4px base (Tailwind: gap-4 = 16px)`
+
+## 组件规范
+
+### Button (Primary)
+- 背景: `#1A56DB`, hover: `#1E429F`
+- 字色: white, 字重: 500
+- 尺寸: `h-9 px-4 text-sm`
+- 禁用态: `opacity-50 cursor-not-allowed`
+
+### Card
+- 背景: white
+- 阴影: `shadow-sm`
+- 边框: `1px solid #E5E7EB`
+- Padding: `p-6`
+
+## 页面结构
+
+### App Shell 布局
+- 整体架构: Tailwind Application Shell (`flex h-screen overflow-hidden bg-white dark:bg-zinc-950`)
+- 左侧 Sidebar: 固定宽度 256px (`w-64`), 采用 `flex-col`, `shrink-0` 及自适应滚动
+- 主内容区: 伸缩自适应 (`flex-1 min-w-0`), 内部采用 Grid 或者 Flex 自行管理内部布局
+
+
+## 已有组件清单（不要重新实现）
+
+| 组件         | 文件路径                        | 用途         |
+|--------------|-------------------------------|--------------|
+| Button       | components/ui/Button.tsx       | 所有按钮     |
+| Modal        | components/ui/Modal.tsx        | 弹窗         |
+| DataTable    | components/DataTable.tsx       | 数据表格     |
+
+
+## Review Checklist
+- [ ] 颜色全部来自设计 token
+- [ ] 没有 hardcode 的 px 值（用 Tailwind 类）
+- [ ] 响应式断点符合规范
+- [ ] 复用了已有组件，没有新建重复组件
+- [ ] 字号、字重与规范一致