11-管理后台标准

管理后台统一标准

开发管理后台时，本目录包含所有需要的资料，按以下顺序使用：

🔴 核心原则：复制，不是重写

管理后台的通用模块 = 从 ProjectA 直接复制代码 + 只改业务数据。禁止从零重写。

---

📂 本目录结构

11-管理后台标准/
├── SKILL.md                  ← 你在这里（入口文档）
├── 新项目模板.md              ← 🔴 新项目的 CLAUDE.md 模板（跨机器可移植）
├── 规范/                      ← 所有管理后台规范文档
│   ├── 架构.md               ← AdminApp 主容器、路由、骨架屏
│   ├── 后端.md               ← 认证/设备指纹/流量/API用量/2FA/Cron
│   ├── 数据库.md              ← 标准表结构
│   ├── API层.md              ← adminApi.ts 封装
│   ├── 国际化.md              ← adminLabels.ts 双语标签
│   ├── 通用功能模块.md         ← 🔴 核心：模块清单 + 验收清单 + 跨项目同步
│   ├── API密钥管理.md         ← Key 管理全栈方案
│   ├── Safari兼容.md          ← 浏览器兼容修复
│   └── 视觉交互规范.md         ← 🔴 视觉精致度标准（间距/字体/颜色/动画/骨架屏/空态/深色模式）
├── UI组件/                    ← 共享 UI 组件规范
│   ├── 侧边栏导航.md
│   ├── 数据表格.md
│   ├── 统计卡片.md
│   ├── 图表组件.md
│   ├── 表单组件.md
│   ├── 弹窗和抽屉.md
│   └── 状态标签.md
└── 模板代码/                   ← 可直接复制的模板代码
    ├── README.md              ← 模板使用说明
    ├── PATTERNS.md            ← 代码模式
    ├── DESIGN.md              ← 设计规范
    ├── components/admin/      ← 前端组件模板
    │   ├── AdminApp.tsx
    │   ├── AdminSidebar.tsx
    │   ├── AdminHeader.tsx
    │   ├── AdminLogin.tsx
    │   ├── shared/            ← 8 个共享 UI 组件
    │   └── tabs/              ← 14 个通用 Tab 模板（✅ 8 必选 + 📦 6 可选）
    ├── layouts/AdminLayout.astro
    ├── lib/                   ← API 层模板
    │   ├── adminApi.ts
    │   ├── adminLabels.ts
    │   └── lazyWithRetry.ts
    └── pages/admin.astro

🔴 开发步骤

第 1 步：复制模板代码

从 模板代码/ 目录复制所有文件到新项目对应位置，只改项目名和导航项。

第 2 步：查阅规范文档

• 不确定架构时 → 读 规范/架构.md
• 不确定后端时 → 读 规范/后端.md + 规范/数据库.md
• 不确定功能模块时 → 读 规范/通用功能模块.md

第 3 步：查阅 UI 组件规范

需要特定组件的详细用法时，读 UI组件/ 下对应文档。

第 4 步：新项目配置

把 新项目模板.md 里的内容加入项目的 CLAUDE.md，确保跨机器可移植。

---

🔴 跨机器使用

方案 A：同步 skills 目录（推荐）

将 ~/.claude/skills/ 做为 Git 仓库管理，新机器 clone 即可。

方案 B：项目自带规范

把 新项目模板.md 的内容写入项目的 CLAUDE.md，这样即使没有 skills 目录，Claude Code 也知道从哪里复制代码。

---

⚠️ 与组件规范的关系

本目录是从 03-组件规范/web/ 独立出来的完整版。管理后台开发只需读本目录，不需要再去 03-组件规范。