feat(zh): add Chinese translations in zh/ directory

Add Chinese (Simplified) translations for all documentation, organized under a dedicated zh/ directory that mirrors the English folder structure. Co-authored-by: tanqingkuang <tanqingkuang@users.noreply.github.com> Translations originally contributed by @tanqingkuang in #45. Restructured from *-CN.md suffix pattern into zh/ directory to prevent the EPUB builder (scripts/build_epub.py collect_folder_files) from picking up Chinese files via glob("*.md") inside module folders.
2026-04-06 23:08:54 +02:00
parent 100c45eef2
commit 89e89d4aa3
100 changed files with 20487 additions and 1 deletions
--- a/zh/resources/DESIGN-SYSTEM.md
+++ b/zh/resources/DESIGN-SYSTEM.md
@@ -0,0 +1,244 @@
+# Claude How To - 设计系统
+
+## 视觉识别
+
+### 图标设计概念：指南针 + 代码括号
+
+Claude How To 的图标使用**指南针加 `>` 代码括号**来表示“在代码中导航”：
+
+```
+     N (green)
+     ▲
+     │
+W ───>─── E     Compass = Guidance/Direction
+     │          > Bracket = Code/Terminal/CLI
+     ▼
+     S (black)
+```
+
+它带来了以下效果：
+- **视觉清晰**：一眼就能看出这是“代码导航指南”
+- **象征意义**：指南针 = 找到方向；`>` = 代码/终端
+- **可扩展性**：从 16px 到 512px 都能正常工作
+- **品牌一致性**：以极简配色匹配开发者工具气质
+
+---
+
+## 色彩系统
+
+### 配色
+
+| 颜色 | 十六进制 | RGB | 用途 |
+|-------|-----|-----|-------|
+| 黑色（主色） | `#000000` | 0, 0, 0 | 主描边、文字、南针 |
+| 白色（背景） | `#FFFFFF` | 255, 255, 255 | 浅色背景 |
+| 灰色（辅助） | `#6B7280` | 107, 114, 128 | 次要刻度、次级文字 |
+| 亮绿色（强调） | `#22C55E` | 34, 197, 94 | 北针、中心点、强调线 |
+| 接近黑色（深色背景） | `#0A0A0A` | 10, 10, 10 | 深色模式背景 |
+
+### 对比度（WCAG）
+
+- 黑底白字：**21:1** AAA
+- 灰底白字：**4.6:1** AA
+- 绿底白字：**3.2:1**（仅用于装饰，不用于正文）
+- 深色背景白字：**19.5:1** AAA
+
+### 强调色规则
+
+**亮绿色（#22C55E）仅用于高亮：**
+- 指南针北针
+- 中心点
+- 强调下划线/边框
+- 绝不作为背景色
+- 绝不用于正文
+
+---
+
+## 字体排版
+
+### Logo 字体
+- **字体族**：Inter、SF Pro Display、-apple-system、Segoe UI、sans-serif
+- **“Claude”**：42px，700 字重（加粗），黑色
+- **“How-To”**：32px，500 字重（中等），灰色（#6B7280）
+- **副标题**：10px，500 字重，灰色，字间距 1.5px，大写
+
+### 界面字体
+- **字体族**：Inter、SF Pro、系统字体（sans-serif）
+- **字重**：400-600
+- **风格**：简洁、易读
+
+---
+
+## 图标细节
+
+### 指南针规格
+
+指南针图形由以下几何元素组成：
+
+```
+Element             | Stroke/Fill    | Color
+--------------------|----------------|------------------
+Outer ring          | 3px stroke     | Black / White (dark mode)
+North tick          | 2.5px stroke   | Black / White (dark mode)
+Other cardinal ticks| 2px stroke     | Gray / White 50% (dark mode)
+Intercardinal ticks | 1.5px stroke   | Gray / White 40% (dark mode)
+North needle        | filled polygon | #22C55E (always green)
+South needle        | filled polygon | Black / White (dark mode)
+> bracket           | 3px stroke     | Black / White (dark mode)
+Center dot          | filled circle  | #22C55E (always green)
+```
+
+### 尺寸递进
+
+```
+16px  → 仅环 + 指针 + 箭头（最简版）
+32px  → 增加方位刻度
+64px  → 增加中间方位刻度
+128px → 全细节，所有元素都清晰
+256px → 最高细节，较粗描边
+```
+
+---
+
+## 尺寸指南
+
+### Logo 尺寸
+
+- **最小**：200px 宽（用于网页）
+- **推荐**：520px（原始尺寸）
+- **最大**：无限制（矢量格式）
+- **宽高比**：约 4.3:1（宽：高）
+
+### 图标尺寸
+
+- **最小**：16px（favicon）
+- **推荐**：64-256px（应用、头像）
+- **最大**：无限制（矢量格式）
+- **宽高比**：1:1（正方形）
+
+---
+
+## 间距与对齐
+
+### Logo 留白
+
+```
+┌─────────────────────────────────────┐
+│                                     │
+│        最小留白空间                 │
+│         （logo 高度 / 2）          │
+│                                     │
+│    [COMPASS]  Claude                │
+│               How-To                │
+│                                     │
+└─────────────────────────────────────┘
+```
+
+### 图标中心点
+
+所有图标都以画布中心为基准：
+- 256px 画布使用 128×128 中心点
+- 128px 画布使用 64×64 中心点
+- 与其他 UI 元素保持对齐
+
+---
+
+## 无障碍性
+
+### 颜色对比
+- 所有文字都满足 WCAG AA（最低 4.5:1）
+- 绿色强调色只用于装饰，不承担信息传达
+- 不依赖红绿配色表达含义
+
+### 可扩展性
+- 矢量格式保证任意尺寸都清晰
+- 即使在 16px 下，几何形状依然可辨识
+- 细节会随可用空间逐步增加
+
+---
+
+## 应用示例
+
+### Web 页眉
+- 尺寸：520×120px logo
+- 文件：`logos/claude-howto-logo.svg`
+- 背景：白色或深色（#0A0A0A）
+- 内边距：至少 20px
+
+### 应用图标
+- 尺寸：256×256px
+- 文件：`icons/claude-howto-icon.svg`
+- 背景：白色或深色
+- 用途：应用快捷方式、头像
+
+### 浏览器 Favicon
+- 尺寸：32px（主用），16px（备用）
+- 文件：`favicons/favicon-32.svg`
+- 格式：SVG，显示清晰锐利
+
+### 社交媒体
+- 头像：256×256px 图标
+- 横幅：520×120px logo（居中）
+
+### 文档
+- 章节标题：按需缩放的 logo
+- 小节图标：64×64px favicon
+- 内联图标：32×32px favicon
+
+---
+
+## 文件格式细节
+
+### SVG 结构
+
+所有 SVG 文件都采用扁平设计：
+- 无渐变（仅用纯色）
+- 无滤镜效果（不使用模糊、发光或阴影）
+- 干净的描边和填充几何结构
+- 使用 `viewBox` 实现响应式缩放
+- 代码可读且带注释
+
+### 跨浏览器兼容性
+
+- Chrome/Edge：完全支持
+- Firefox：完全支持
+- Safari：完全支持
+- iOS Safari：完全支持
+- 所有现代浏览器：完全支持
+
+---
+
+## 自定义
+
+### 更换强调色
+
+如果你想创建不同强调色的变体：
+
+1. 把所有 `#22C55E` 替换成你的强调色
+2. 确保装饰性元素的对比度仍高于 3:1
+3. 保持黑/白/灰结构不变
+
+### 缩放
+
+```css
+svg {
+  width: 256px;
+  height: 256px;
+}
+```
+
+SVG 会通过 `viewBox` 自动缩放，不需要额外变换。
+
+---
+
+## 版本控制
+
+在 git 中跟踪设计变更：
+- 正常版本化 SVG 文件，因为它们本质上是文本
+- 随设计变更一起打 tag
+- 在提交中包含 `DESIGN-SYSTEM.md`
+
+---
+
+**最后更新**：2026 年 2 月
+**设计系统版本**：3.0
--- a/zh/resources/QUICK-START.md
+++ b/zh/resources/QUICK-START.md
@@ -0,0 +1,89 @@
+# 快速开始 - 品牌资源
+
+## 复制资源到你的项目
+
+```bash
+# 将所有资源复制到你的 Web 项目中
+cp -r resources/ /path/to/your/website/
+
+# 或者只复制网页所需的 favicon
+cp resources/favicons/* /path/to/your/website/public/
+```
+
+## 添加到 HTML（直接复制粘贴）
+
+```html
+<!-- Favicons -->
+<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg" sizes="32x32">
+<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
+<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
+<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
+<meta name="theme-color" content="#000000">
+```
+
+## 在 Markdown/文档中使用
+
+```markdown
+# Claude How To
+
+![Claude How To Logo](resources/logos/claude-howto-logo.svg)
+
+![Icon](resources/icons/claude-howto-icon.svg)
+```
+
+## 推荐尺寸
+
+| 用途 | 尺寸 | 文件 |
+|---------|------|------|
+| 网站页眉 | 520×120 | `logos/claude-howto-logo.svg` |
+| 应用图标 | 256×256 | `icons/claude-howto-icon.svg` |
+| 浏览器标签页 | 32×32 | `favicons/favicon-32.svg` |
+| 移动端桌面图标 | 128×128 | `favicons/favicon-128.svg` |
+| 桌面应用 | 256×256 | `favicons/favicon-256.svg` |
+| 小头像 | 64×64 | `favicons/favicon-64.svg` |
+
+## 颜色值
+
+```css
+/* 在 CSS 中使用这些值 */
+--color-primary: #000000;
+--color-secondary: #6B7280;
+--color-accent: #22C55E;
+--color-bg-light: #FFFFFF;
+--color-bg-dark: #0A0A0A;
+```
+
+## 图标含义
+
+**指南针 + 代码括号**：
+- 指南针环 = 导航、结构化学习路径
+- 绿色北针 = 方向、进展、引导
+- 黑色南针 = 基础、根基
+- `>` 括号 = 终端提示符、代码、CLI 场景
+- 刻度线 = 精准、结构化步骤
+
+这象征着“在清晰引导下穿行于代码世界”。
+
+## 在哪里用什么
+
+### 网站
+- **页眉**：Logo（`logos/claude-howto-logo.svg`）
+- **Favicon**：32px（`favicons/favicon-32.svg`）
+- **社交预览**：图标（`icons/claude-howto-icon.svg`）
+
+### GitHub
+- **README 徽章**：图标（`icons/claude-howto-icon.svg`），建议 64-128px
+- **仓库头像**：图标（`icons/claude-howto-icon.svg`）
+
+### 社交媒体
+- **头像**：图标（`icons/claude-howto-icon.svg`）
+- **横幅**：Logo（`logos/claude-howto-logo.svg`）
+- **缩略图**：256×256px 图标
+
+### 文档
+- **章节标题**：Logo 或图标（按需缩放）
+- **导航图标**：Favicon（32-64px）
+
+---
+
+完整文档见 [README.md](README.md)。
--- a/zh/resources/README.md
+++ b/zh/resources/README.md
@@ -0,0 +1,266 @@
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="logos/claude-howto-logo-dark.svg">
+  <img alt="Claude How To" src="logos/claude-howto-logo.svg">
+</picture>
+
+# Claude How To - 品牌资源
+
+这是 Claude How To 项目的完整品牌资源集合，包括 logo、图标和 favicon。所有资源都采用 V3.0 设计：一个带有代码括号（`>`）符号的指南针，象征在代码中引导前进，整体使用黑/白/灰配色，并以亮绿色（`#22C55E`）作为强调色。
+
+## 目录结构
+
+```
+resources/
+├── logos/
+│   ├── claude-howto-logo.svg       # 主 logo - 浅色模式 (520×120px)
+│   └── claude-howto-logo-dark.svg  # 主 logo - 深色模式 (520×120px)
+├── icons/
+│   ├── claude-howto-icon.svg       # 应用图标 - 浅色模式 (256×256px)
+│   └── claude-howto-icon-dark.svg  # 应用图标 - 深色模式 (256×256px)
+└── favicons/
+    ├── favicon-16.svg              # Favicon - 16×16px
+    ├── favicon-32.svg              # Favicon - 32×32px（主用）
+    ├── favicon-64.svg              # Favicon - 64×64px
+    ├── favicon-128.svg             # Favicon - 128×128px
+    └── favicon-256.svg             # Favicon - 256×256px
+```
+
+`assets/logo/` 下还有额外资源：
+```
+assets/logo/
+├── logo-full.svg       # 图形标记 + 品牌字样（横向）
+├── logo-mark.svg       # 仅指南针符号 (120×120px)
+├── logo-wordmark.svg   # 仅文字
+├── logo-icon.svg       # 应用图标 (512×512，圆角)
+├── favicon.svg         # 16×16 优化版
+├── logo-white.svg      # 适用于深色背景的白色版本
+└── logo-black.svg      # 黑色单色版本
+```
+
+## 资源概览
+
+### 设计概念（V3.0）
+
+**指南针 + 代码括号**，代表“导航遇见代码”：
+- **指南针环** = 导航、找到方向
+- **北针（绿色）** = 方向、学习路径上的进展
+- **南针（黑色）** = 扎实基础、稳固根基
+- **`>` 括号** = 终端提示符、代码、CLI 场景
+- **刻度线** = 精准、结构化学习
+
+### Logo
+
+**文件**：
+- `logos/claude-howto-logo.svg`（浅色模式）
+- `logos/claude-howto-logo-dark.svg`（深色模式）
+
+**规格**：
+- **尺寸**：520×120 px
+- **用途**：主标题/品牌 logo，带品牌字样
+- **使用场景**：
+  - 网站页眉
+  - README 徽章
+  - 营销素材
+  - 印刷物料
+- **格式**：SVG（可无限缩放）
+- **模式**：浅色（白色背景）与深色（#0A0A0A 背景）
+
+### 图标
+
+**文件**：
+- `icons/claude-howto-icon.svg`（浅色模式）
+- `icons/claude-howto-icon-dark.svg`（深色模式）
+
+**规格**：
+- **尺寸**：256×256 px
+- **用途**：应用图标、头像、缩略图
+- **使用场景**：
+  - App 图标
+  - 个人头像
+  - 社交媒体缩略图
+  - 文档页眉
+- **格式**：SVG（可无限缩放）
+- **模式**：浅色（白色背景）与深色（#0A0A0A 背景）
+
+**设计元素**：
+- 带方位和中间方位刻度的指南针环
+- 绿色北针（方向/引导）
+- 黑色南针（基础）
+- 中央 `>` 代码括号（终端/CLI）
+- 绿色中心点强调
+
+### Favicon
+
+为网页使用提供了多种尺寸的优化版本：
+
+| 文件 | 尺寸 | DPI | 用途 |
+|------|------|-----|------|
+| `favicon-16.svg` | 16×16 px | 1x | 浏览器标签页（旧浏览器） |
+| `favicon-32.svg` | 32×32 px | 1x | 标准浏览器 favicon |
+| `favicon-64.svg` | 64×64 px | 1x-2x | 高 DPI 显示器 |
+| `favicon-128.svg` | 128×128 px | 2x | Apple touch icon、书签 |
+| `favicon-256.svg` | 256×256 px | 4x | 现代浏览器、PWA 图标 |
+
+**优化说明**：
+- 16px：最小几何元素，仅保留环、指针和箭头
+- 32px：增加方位刻度
+- 64px 以上：完整细节与中间方位刻度
+- 全部版本都保持与主图标一致的视觉效果
+- SVG 格式保证任意尺寸下都清晰锐利
+
+## HTML 集成
+
+### 基础 Favicon 配置
+
+```html
+<!-- 浏览器 favicon -->
+<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg">
+<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
+
+<!-- Apple touch icon（移动端桌面图标） -->
+<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
+
+<!-- PWA 与现代浏览器 -->
+<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
+```
+
+### 完整配置
+
+```html
+<head>
+  <!-- 主 favicon -->
+  <link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg" sizes="32x32">
+  <link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
+
+  <!-- Apple touch icon -->
+  <link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
+
+  <!-- PWA 图标 -->
+  <link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
+
+  <!-- Android -->
+  <link rel="shortcut icon" href="/resources/favicons/favicon-256.svg">
+
+  <!-- PWA manifest 引用（如果使用 manifest.json） -->
+  <meta name="theme-color" content="#000000">
+</head>
+```
+
+## 颜色方案
+
+### 主色
+- **黑色**：`#000000`（主文本、线条、南针）
+- **白色**：`#FFFFFF`（浅色背景）
+- **灰色**：`#6B7280`（次级文本、次要刻度）
+
+### 强调色
+- **亮绿色**：`#22C55E`（北针、中心点、强调线条，只用于高亮，绝不作为背景）
+
+### 深色模式
+- **背景**：`#0A0A0A`（接近黑色）
+
+### CSS 变量
+```css
+--color-primary: #000000;
+--color-secondary: #6B7280;
+--color-accent: #22C55E;
+--color-bg-light: #FFFFFF;
+--color-bg-dark: #0A0A0A;
+```
+
+### Tailwind 配置
+```js
+colors: {
+  brand: {
+    primary: '#000000',
+    secondary: '#6B7280',
+    accent: '#22C55E',
+  }
+}
+```
+
+### 使用规范
+- 主文本和结构元素使用黑色
+- 次级/辅助元素使用灰色
+- 绿色**仅**用于高亮，例如指针、点和强调线
+- 不要把绿色用作背景色
+- 保持 WCAG AA 对比度（最低 4.5:1）
+
+## 设计规范
+
+### Logo 使用
+- 用于白色或深色（#0A0A0A）背景
+- 按比例缩放
+- Logo 四周保留足够留白（最小值：logo 高度 / 2）
+- 根据背景选择对应的浅色/深色版本
+
+### 图标使用
+- 适用于标准尺寸：16、32、64、128、256px
+- 保持指南针比例
+- 按比例缩放
+
+### Favicon 使用
+- 根据场景选用合适尺寸
+- 16-32px：浏览器标签页、书签
+- 64px：站点图标
+- 128px 以上：Apple/Android 桌面图标
+
+## SVG 优化
+
+所有 SVG 文件都采用扁平设计，没有渐变和滤镜：
+- 干净的基于描边的几何结构
+- 不嵌入位图
+- 路径已优化
+- 使用响应式 `viewBox`
+
+网页优化示例：
+```bash
+# 压缩 SVG，同时保持质量
+svgo --config='{
+  "js2svg": {
+    "indent": 2
+  },
+  "plugins": [
+    "convertStyleToAttrs",
+    "removeRasterImages"
+  ]
+}' input.svg -o output.svg
+```
+
+## PNG 转换
+
+如果你需要为旧浏览器支持转换成 PNG：
+
+```bash
+# 使用 ImageMagick
+convert -density 300 -background none favicon-256.svg favicon-256.png
+
+# 使用 Inkscape
+inkscape -D -z --file=favicon-256.svg --export-png=favicon-256.png
+```
+
+## 无障碍性
+
+- 高对比度颜色比例（符合 WCAG AA，最低 4.5:1）
+- 几何形状清晰，在各种尺寸下都容易识别
+- 矢量格式，可无限缩放
+- 图标中不使用文字（文字由单独的 wordmark 承担）
+- 不依赖红绿配色表达含义
+
+## 署名
+
+这些资源属于 Claude How To 项目。
+
+**许可证**：MIT（见项目 LICENSE 文件）
+
+## 版本历史
+
+- **v3.0**（2026 年 2 月）：指南针 + 括号设计，黑/白/灰 + 绿色强调色
+- **v2.0**（2026 年 1 月）：受 Claude 启发的 12 芒星爆发式设计，祖母绿配色
+- **v1.0**（2026 年 1 月）：最初基于六边形的进度图标设计
+
+---
+
+**最后更新**：2026 年 2 月
+**当前版本**：3.0（指南针 + 括号）
+**全部资源**：可直接用于生产环境的 SVG，支持无限缩放，符合 WCAG AA 无障碍标准