系统架构文档

本文档分析 Claude How To 开源教程项目的架构设计。

1. 项目概览

1.1 项目定位

属性	值
项目名称	Claude How To Design
原项目	luongnv89/claude-howto
文档框架	VitePress
构建工具	Node.js / npm
语言支持	英文、越南文、中文、乌克兰文、日文

1.2 核心数据

• 10 大教程模块 - 从基础到高级的系统学习路径
• 60+ Slash Commands - 内置命令集
• 6 个 Subagents - 子代理任务处理
• 5 个 Skills - 技能系统
• 28 个 Hook Events - 钩子事件机制
• 47 个模板 - 配置、CLAUDE.md、Hook、MCP 配置等

2. 系统架构图

┌─────────────────────────────────────────────────────────────────┐
│                        用户访问层                                │
│                   (浏览器 / GitHub Pages)                       │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                        文档构建层                                │
│                      VitePress Static Site                     │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐              │
│  │   index.md  │ │  sidebar    │ │   theme     │              │
│  │  (首页)     │ │  (导航)     │ │  (样式)     │              │
│  └─────────────┘ └─────────────┘ └─────────────┘              │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                        源码分析层                                │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                    clauderc 配置                         │   │
│  │  ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌─────────┐ │   │
│  │  │slash-cmds │ │subagents  │ │  skills   │ │  hooks  │ │   │
│  │  │   60+     │ │    6      │ │    5      │ │   28    │ │   │
│  │  └───────────┘ └───────────┘ └───────────┘ └─────────┘ │   │
│  └─────────────────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                    47 Templates                         │   │
│  │  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐       │   │
│  │  │ configs │ │ CLAUDE  │ │  hooks  │ │   MCP   │       │   │
│  │  └─────────┘ └─────────┘ └─────────┘ └─────────┘       │   │
│  └─────────────────────────────────────────────────────────┘   │
└────────────────────────────┬────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────────────┐
│                        插件体系层                                │
│  ┌───────────────┐ ┌───────────────┐ ┌───────────────┐        │
│  │DevOps Auto    │ │  PR Review    │ │Documentation  │        │
│  │  自动化部署    │ │   代码审查    │ │    文档生成    │        │
│  └───────────────┘ └───────────────┘ └───────────────┘        │
└─────────────────────────────────────────────────────────────────┘

3. 目录结构

claude-howto/
├── docs-site/                    # VitePress 文档站点
│   ├── index.md                  # 首页
│   ├── architecture.md          # 系统架构 (本文档)
│   ├── overview.md              # 概览
│   ├── modules.md                # 10大模块
│   ├── design.md                 # 设计理念
│   ├── .vitepress/
│   │   ├── config.mjs            # VitePress 配置
│   │   └── theme/
│   │       ├── index.js          # 主题入口
│   │       └── style.css         # 自定义样式
│   └── public/
│       └── logo.svg              # Logo 资源
├── clauderc/                     # Claude Code 配置
│   ├── .claude/
│   │   ├── commands/             # Slash Commands (60+)
│   │   ├── subagents/            # Subagents (6)
│   │   ├── skills/               # Skills (5)
│   │   └── hooks/                # Hook Events (28)
│   └── templates/                # 模板目录 (47个)
│       ├── configs/              # 配置文件
│       ├── claude-md/            # CLAUDE.md 模板
│       ├── hooks/                # Hook 脚本
│       └── mcp/                  # MCP 配置
└── plugins/                      # 插件目录
    ├── devops-automation/       # DevOps 自动化插件
    ├── pr-review/                # PR 审查插件
    └── documentation/            # 文档生成插件

4. 核心组件详解

4.1 Slash Commands (60+)

编号	命令名称	功能描述
01	setup	环境初始化
02	pr-review	代码审查
03	deploy	自动化部署
04	docs	文档生成
...	...	...

4.2 Subagents (6)

编号	名称	用途
1	code-review	代码审查代理
2	documentation	文档生成代理
3	testing	测试执行代理
4	deployment	部署执行代理
5	analysis	分析报告代理
6	automation	自动化任务代理

4.3 Skills (5)

技能名称	能力描述
code	代码编写与优化
review	代码审查与质量
deploy	部署与运维
docs	文档生成
test	测试执行

4.4 Hook Events (28)

事件类型	触发时机
pre-commit	提交前执行
post-commit	提交后执行
pre-push	推送前执行
post-push	推送后执行
...	...

5. 插件体系

5.1 DevOps Automation

• 自动化构建流程
• 环境配置管理
• 部署编排

5.2 PR Review

• 自动代码审查
• 规范检查
• 反馈生成

5.3 Documentation

• 自动文档生成
• API 文档化
• README 更新

6. 国际化和本地化

6.1 支持语言

语言	代码	状态
英文	en	✅ 完全支持
越南文	vi	✅ 完全支持
中文	zh	✅ 完全支持
乌克兰文	uk	✅ 完全支持
日文	ja	✅ 完全支持

6.2 本地化策略

• 每种语言独立目录
• 统一的文档结构
• 翻译进度跟踪

7. 质量保障体系

7.1 预提交检查

# pre-commit hook 检查清单
- [ ] 代码格式校验
- [ ] 文档完整性检查
- [ ] 链接有效性验证
- [ ] 国际化一致性检查

7.2 自动化测试

• 配置文件验证
• 模板语法检查
• 链接完整性测试

7.3 构建验证

• VitePress 构建测试
• 响应式布局检查
• SEO 元数据验证

8. 构建与部署

8.1 构建流程

npm run build    # 构建静态站点
npm run preview  # 本地预览

8.2 部署目标

• GitHub Pages
• Vercel
• Netlify
• 任意静态托管

9. 扩展性设计

9.1 模块化结构

输入层   →   处理层   →   输出层
  │           │           │
  ▼           ▼           ▼
Templates   转换引擎    格式化输出
  │           │           │
  ▼           ▼           ▼
  47模板      无限扩展    任意格式

9.2 插件扩展点

扩展点	说明
commands	可扩展命令
subagents	可扩展代理
skills	可扩展技能
hooks	可扩展钩子

10. 版本历史

版本	日期	更新内容
1.0.0	2024	初始架构设计
...	...	...

---

本文档由 Claude Code 自动生成，基于 luongnv89/claude-howto 源码分析。