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.
This commit is contained in:
954
zh/09-advanced-features/README.md
Normal file
954
zh/09-advanced-features/README.md
Normal file
@@ -0,0 +1,954 @@
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# 高级功能
|
||||
|
||||
这是一份关于 Claude Code 高级能力的完整指南,涵盖 planning mode、extended thinking、auto mode、后台任务、权限模式、打印模式(非交互)、会话管理、交互功能、消息通道(Channels)、语音输入、远程控制、网页会话、桌面应用、任务列表、提示词建议、Git 工作树、沙盒、受管设置和配置。
|
||||
|
||||
## 目录
|
||||
|
||||
1. [概览](#概览)
|
||||
2. [规划模式](#规划模式)
|
||||
3. [扩展思考](#扩展思考)
|
||||
4. [自动模式](#自动模式)
|
||||
5. [后台任务](#后台任务)
|
||||
6. [定时任务](#定时任务)
|
||||
7. [权限模式](#权限模式)
|
||||
8. [无头模式](#无头模式)
|
||||
9. [会话管理](#会话管理)
|
||||
10. [交互功能](#交互功能)
|
||||
11. [语音输入](#语音输入)
|
||||
12. [消息通道(Channels)](#消息通道channels)
|
||||
13. [Chrome 集成](#chrome-集成)
|
||||
14. [远程控制](#远程控制)
|
||||
15. [网页会话](#网页会话)
|
||||
16. [桌面应用](#桌面应用)
|
||||
17. [任务列表](#任务列表)
|
||||
18. [提示词建议](#提示词建议)
|
||||
19. [Git 工作树(Git Worktrees)](#git-工作树git-worktrees)
|
||||
20. [沙盒](#沙盒)
|
||||
21. [企业受管设置](#企业受管设置)
|
||||
22. [配置与设置](#配置与设置)
|
||||
23. [最佳实践](#最佳实践)
|
||||
24. [更多资源](#更多资源)
|
||||
|
||||
---
|
||||
|
||||
<a id="overview"></a>
|
||||
## 概览
|
||||
|
||||
Claude Code 的高级功能把基础能力扩展到了规划、推理、自动化和控制层面。它们能支持更复杂的开发任务、代码审查、自动化流程以及多会话管理。
|
||||
|
||||
**核心高级功能包括:**
|
||||
- **Planning Mode**:先写详细实现计划,再开始编码
|
||||
- **Extended Thinking**:对复杂问题进行更深入的推理
|
||||
- **Auto Mode**:由后台安全分类器在每一步执行前进行审查(Research Preview)
|
||||
- **Background Tasks**:长时间任务不阻塞对话
|
||||
- **Permission Modes**:控制 Claude 可以做什么(`default`、`acceptEdits`、`plan`、`auto`、`dontAsk`、`bypassPermissions`)
|
||||
- **Print Mode**:非交互式运行,适合自动化和 CI/CD(`claude -p`)
|
||||
- **Session Management**:管理多个会话
|
||||
- **Interactive Features**:快捷键、多行输入、历史记录
|
||||
- **Voice Dictation**:按住说话,支持 20 种语言的语音识别
|
||||
- **Channels**:消息通道,允许 MCP server 向运行中的会话推送消息(Research Preview)
|
||||
- **Remote Control**:从 Claude.ai 或 Claude app 控制本地会话
|
||||
- **Web Sessions**:在浏览器中运行 Claude Code
|
||||
- **Desktop App**:支持可视化 diff 审查和多会话的独立应用
|
||||
- **Task List**:跨 context compaction 持久跟踪任务
|
||||
- **Prompt Suggestions**:根据上下文智能推荐命令
|
||||
- **Git 工作树(Git Worktrees)**:隔离的 worktree 分支,适合并行工作
|
||||
- **Sandboxing**:操作系统级文件系统和网络隔离
|
||||
- **Managed Settings**:通过 plist、Registry 或受管文件进行企业部署
|
||||
- **Configuration**:用 JSON 配置文件定制行为
|
||||
|
||||
<a id="planning-mode"></a>
|
||||
## 规划模式
|
||||
|
||||
更多规划示例见 [planning-mode-examples.md](planning-mode-examples.md)。
|
||||
|
||||
Planning mode 允许 Claude 在真正实现前先梳理复杂任务,生成一份你可以审阅并批准的详细计划。
|
||||
|
||||
### 什么是 Planning Mode?
|
||||
|
||||
Planning mode 是一个两阶段流程:
|
||||
1. **规划阶段**:Claude 分析任务并生成详细实现计划
|
||||
2. **实现阶段**:在你批准后,Claude 执行计划
|
||||
|
||||
### 什么时候使用 Planning Mode
|
||||
|
||||
✅ 适合:
|
||||
- 复杂的多文件重构
|
||||
- 新功能开发
|
||||
- 架构调整
|
||||
- 数据库迁移
|
||||
- 大型 API 重设计
|
||||
|
||||
❌ 不建议:
|
||||
- 简单 bug 修复
|
||||
- 格式化修改
|
||||
- 单文件编辑
|
||||
- 快速查询
|
||||
|
||||
### 如何启动 Planning Mode
|
||||
|
||||
**Slash command:**
|
||||
```bash
|
||||
/plan Implement user authentication system
|
||||
```
|
||||
|
||||
**CLI 参数:**
|
||||
```bash
|
||||
claude --permission-mode plan
|
||||
```
|
||||
|
||||
**设为默认:**
|
||||
```json
|
||||
{
|
||||
"permissions": {
|
||||
"defaultMode": "plan"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**快捷键:**
|
||||
- `Shift + Tab` - 切换权限模式(包括 plan)
|
||||
- `Alt + M` - 切换权限模式(Windows/Linux)
|
||||
|
||||
### Planning Mode 的好处
|
||||
|
||||
- **结构化实施方式**:把实现步骤拆得更清楚
|
||||
- **审阅和批准**:先看计划,再执行
|
||||
- **风险识别**:先发现潜在问题
|
||||
- **阶段清晰**:有明确的里程碑和阶段划分
|
||||
|
||||
### 示例:功能实现
|
||||
|
||||
```text
|
||||
User: /plan Add a real-time notification system
|
||||
|
||||
Claude: 我会为实时通知系统制定计划。
|
||||
|
||||
## 实现计划
|
||||
|
||||
### 阶段 1:基础设施
|
||||
1. 安装 WebSocket 库(socket.io)
|
||||
2. 搭建 WebSocket server
|
||||
3. 配置连接管理
|
||||
|
||||
### 阶段 2:后端
|
||||
4. 创建通知服务
|
||||
5. 实现通知队列
|
||||
6. 为通知添加数据库 schema
|
||||
7. 创建 API 端点
|
||||
|
||||
### 阶段 3:前端
|
||||
8. 搭建 WebSocket client
|
||||
9. 创建通知 UI 组件
|
||||
10. 实现通知状态管理
|
||||
11. 添加通知权限
|
||||
|
||||
### 阶段 4:测试与发布
|
||||
12. 编写单元测试
|
||||
13. 编写集成测试
|
||||
14. 更新文档
|
||||
15. 部署到 staging
|
||||
|
||||
预计时间:3-4 小时
|
||||
需要修改的文件:12 个
|
||||
需要创建的新文件:8 个
|
||||
|
||||
准备继续吗?(yes/no/modify plan)
|
||||
```
|
||||
|
||||
### 计划修改
|
||||
|
||||
```text
|
||||
User: 修改计划 - 先跳过队列,后面再加
|
||||
|
||||
Claude: 已更新计划:
|
||||
[展示删除队列后的计划]
|
||||
|
||||
User: 看起来不错,继续
|
||||
|
||||
Claude: [按修改后的计划开始实现]
|
||||
```
|
||||
|
||||
### Planning Mode 配置
|
||||
|
||||
你可以通过 CLI 参数或 slash command 启用 planning mode:
|
||||
|
||||
```bash
|
||||
# 通过 CLI 启用 plan mode
|
||||
claude --permission-mode plan
|
||||
|
||||
# 或在 REPL 里使用 /plan
|
||||
/plan Implement user authentication system
|
||||
```
|
||||
|
||||
**规划专用模型别名**:使用 `opusplan`,规划用 Opus,执行用 Sonnet:
|
||||
|
||||
```bash
|
||||
claude --model opusplan "design and implement the new API"
|
||||
```
|
||||
|
||||
**外部编辑计划**:按 `Ctrl+G` 可以把当前计划打开到外部编辑器里进行更详细的修改。
|
||||
|
||||
<a id="extended-thinking"></a>
|
||||
## 扩展思考
|
||||
|
||||
Extended thinking 让 Claude 在给出解决方案前,花更多时间进行复杂推理。
|
||||
|
||||
### 什么是 Extended Thinking?
|
||||
|
||||
这是一个有意识的、分步骤的推理过程,Claude 会:
|
||||
- 拆解复杂问题
|
||||
- 比较多种方案
|
||||
- 评估权衡
|
||||
- 推导边界情况
|
||||
|
||||
### 如何启用
|
||||
|
||||
**快捷键:**
|
||||
- `Option + T`(macOS)/ `Alt + T`(Windows/Linux)- 切换 extended thinking
|
||||
|
||||
**自动启用:**
|
||||
- 对所有模型默认开启(Opus 4.6、Sonnet 4.6、Haiku 4.5)
|
||||
- Opus 4.6 支持自适应推理,effort 等级为 `low`(○)、`medium`(◐)、`high`(●)、`max`(仅 Opus 4.6)
|
||||
|
||||
### 好处
|
||||
|
||||
- 更适合复杂问题
|
||||
- 更容易发现边界条件
|
||||
- 便于比较多个方案
|
||||
- 输出通常更稳健
|
||||
|
||||
### 示例:架构决策
|
||||
|
||||
```text
|
||||
Context Analysis
|
||||
Approach 1: Microservices
|
||||
Approach 2: Monolith
|
||||
Decision Factors
|
||||
Recommendation
|
||||
```
|
||||
|
||||
### 配置
|
||||
|
||||
```json
|
||||
{
|
||||
"thinking": {
|
||||
"enabled": true,
|
||||
"effort": "high"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<a id="auto-mode"></a>
|
||||
## 自动模式
|
||||
|
||||
Auto mode 是一个研究预览功能。它会在每个动作执行前,用后台安全分类器评估风险,帮助你在自动化和安全之间取得平衡。
|
||||
|
||||
### 需求
|
||||
|
||||
- 支持 auto mode 的 Claude Code 版本
|
||||
- 合适的权限和配置
|
||||
|
||||
### 启用方式
|
||||
|
||||
```bash
|
||||
# 用 CLI 解锁 auto mode
|
||||
claude --enable-auto-mode
|
||||
|
||||
# 然后在 REPL 中用 Shift+Tab 切换到它
|
||||
```
|
||||
|
||||
### 分类器如何工作
|
||||
|
||||
在执行工具前,后台分类器会判断这个动作是否安全、是否需要提示、是否应该被阻止。
|
||||
|
||||
### 默认阻止的动作
|
||||
|
||||
- 明显危险的文件操作
|
||||
- 高风险 shell 命令
|
||||
- 可能泄露凭据的操作
|
||||
|
||||
### 默认允许的动作
|
||||
|
||||
- 只读检查
|
||||
- 常规分析
|
||||
- 低风险修改
|
||||
|
||||
### 配置 Auto Mode
|
||||
|
||||
Auto mode 可以在设置中进一步约束、放宽或与权限模式结合使用。
|
||||
|
||||
### 回退行为
|
||||
|
||||
如果分类器无法判定,Claude 会回退到更保守的权限处理方式。
|
||||
|
||||
### 预置一份类似 Auto-Mode 的保守权限基线
|
||||
|
||||
```bash
|
||||
# 先预览将要添加的权限(不会写入)
|
||||
|
||||
# 应用保守基线
|
||||
|
||||
# 只有在需要时再逐步增加能力
|
||||
```
|
||||
|
||||
<a id="background-tasks"></a>
|
||||
## 后台任务
|
||||
|
||||
后台任务允许 Claude 在不阻塞对话的情况下运行长时间操作。
|
||||
|
||||
### 什么是后台任务?
|
||||
|
||||
后台任务适合长时间运行的工作,例如构建、测试、下载、扫描或并行分析。你可以把它们交给 Claude,让对话继续保持响应。
|
||||
|
||||
### 启动后台任务
|
||||
|
||||
你可以从命令、计划或工具链中启动后台任务,让 Claude 在后台继续工作。
|
||||
|
||||
### 管理后台任务
|
||||
|
||||
- 查看任务状态
|
||||
- 中止任务
|
||||
- 等待任务完成
|
||||
- 从结果中恢复上下文
|
||||
|
||||
### 示例:并行开发
|
||||
|
||||
```text
|
||||
任务 A:运行测试
|
||||
任务 B:生成文档
|
||||
任务 C:执行安全扫描
|
||||
```
|
||||
|
||||
### 配置
|
||||
|
||||
后台任务的超时、并发和通知行为都可以在设置中调整。
|
||||
|
||||
<a id="scheduled-tasks"></a>
|
||||
## 定时任务
|
||||
|
||||
Scheduled tasks 让 Claude 按计划重复执行某些提示词或任务。
|
||||
|
||||
### `/loop` 命令
|
||||
|
||||
```bash
|
||||
# 显式间隔
|
||||
/loop 10m Run tests and report failures
|
||||
|
||||
# 自然语言
|
||||
/loop every day at 9am check release notes
|
||||
```
|
||||
|
||||
### 一次性提醒
|
||||
|
||||
```bash
|
||||
/schedule "remind me to review the PR in 30 minutes"
|
||||
```
|
||||
|
||||
### 管理定时任务
|
||||
|
||||
- 查看任务列表
|
||||
- 修改执行频率
|
||||
- 暂停或取消任务
|
||||
|
||||
### 行为细节
|
||||
|
||||
定时任务会遵循当前会话与权限配置,并按计划触发执行。
|
||||
|
||||
### 云端定时任务
|
||||
|
||||
部分场景可以在云端环境中运行调度任务。
|
||||
|
||||
### 禁用定时任务
|
||||
|
||||
如果你不希望自动触发,关闭相关设置即可。
|
||||
|
||||
### 示例:监控部署
|
||||
|
||||
```text
|
||||
每 5 分钟检查一次部署状态,直到 health check 通过。
|
||||
```
|
||||
|
||||
<a id="permission-modes"></a>
|
||||
## 权限模式
|
||||
|
||||
Permission modes 决定 Claude 可以直接执行哪些操作。
|
||||
|
||||
### 可用模式
|
||||
|
||||
- `default`
|
||||
- `acceptEdits`
|
||||
- `plan`
|
||||
- `auto`
|
||||
- `dontAsk`
|
||||
- `bypassPermissions`
|
||||
|
||||
### 启用方式
|
||||
|
||||
可以通过命令行、设置或会话中的快捷操作切换权限模式。
|
||||
|
||||
### 示例
|
||||
|
||||
#### Default Mode
|
||||
|
||||
默认的平衡模式,必要时会询问权限。
|
||||
|
||||
#### Plan Mode
|
||||
|
||||
只做规划,不直接执行高风险改动。
|
||||
|
||||
#### Accept Edits Mode
|
||||
|
||||
更偏向自动接受编辑,适合受控环境。
|
||||
|
||||
### 使用场景
|
||||
|
||||
- 代码审查
|
||||
- 自动化重构
|
||||
- CI/CD
|
||||
- 高风险操作前的审批流程
|
||||
|
||||
<a id="headless-mode"></a>
|
||||
## 无头模式
|
||||
|
||||
Headless mode 指非交互式运行 Claude Code,常用于自动化和 CI/CD。
|
||||
|
||||
### 什么是 Print Mode?
|
||||
|
||||
Print mode 就是 `claude -p`:给一个任务,输出结果,然后退出。
|
||||
|
||||
### 在 Print Mode 中运行
|
||||
|
||||
```bash
|
||||
# 运行指定任务
|
||||
claude -p "run tests and summarize failures"
|
||||
|
||||
# 处理管道内容
|
||||
cat logs.txt | claude -p "find the root cause"
|
||||
|
||||
# CI/CD 集成
|
||||
claude -p "review this diff and return JSON"
|
||||
```
|
||||
|
||||
### 其他示例
|
||||
|
||||
```bash
|
||||
# 捕获输出
|
||||
claude -p "analyze this code" > report.txt
|
||||
|
||||
# 结构化输出
|
||||
claude -p --output-format json "list files"
|
||||
|
||||
# 标准输入
|
||||
echo "hello" | claude -p "translate to Chinese"
|
||||
```
|
||||
|
||||
### CI/CD 示例
|
||||
|
||||
```yaml
|
||||
# .github/workflows/code-review.yml
|
||||
```
|
||||
|
||||
### Print Mode 配置
|
||||
|
||||
- 限制自主回合数
|
||||
- 使用结构化 JSON 输出
|
||||
- 启用 schema 验证
|
||||
- 禁用会话持久化
|
||||
|
||||
<a id="session-management"></a>
|
||||
## 会话管理
|
||||
|
||||
会话管理用于在多个会话之间恢复、重命名、分叉和持续工作。
|
||||
|
||||
### 常用命令
|
||||
|
||||
- `/resume`
|
||||
- `/rename`
|
||||
- `/fork`
|
||||
- `claude -c`
|
||||
- `claude -r`
|
||||
|
||||
### 恢复会话
|
||||
|
||||
```bash
|
||||
# 继续最后一次对话
|
||||
claude -c
|
||||
|
||||
# 恢复指定名称或 ID 的会话
|
||||
claude -r "feature-auth"
|
||||
```
|
||||
|
||||
### 分叉会话
|
||||
|
||||
```bash
|
||||
# 恢复并分叉,适合实验
|
||||
claude -r "feature-auth" --fork
|
||||
```
|
||||
|
||||
### 会话持久化
|
||||
|
||||
你可以选择保留、继续或重建会话上下文。
|
||||
|
||||
<a id="interactive-features"></a>
|
||||
## 交互功能
|
||||
|
||||
交互功能包括快捷键、多行输入、历史记录、Vim 模式和 Bash 模式等。
|
||||
|
||||
### 快捷键
|
||||
|
||||
常用快捷键用于切换模式、编辑输入、查看历史和控制输出。
|
||||
|
||||
### 自定义快捷键
|
||||
|
||||
你可以在设置中绑定自己的按键组合。
|
||||
|
||||
### 可用上下文
|
||||
|
||||
不同上下文会影响快捷键的可用性和行为。
|
||||
|
||||
### Chord 支持
|
||||
|
||||
支持组合按键触发复杂操作。
|
||||
|
||||
### 保留键与冲突键
|
||||
|
||||
某些按键会被系统或终端占用,需要避免冲突。
|
||||
|
||||
### Tab 补全
|
||||
|
||||
输入命令、参数或路径时会提供补全建议。
|
||||
|
||||
### 命令历史
|
||||
|
||||
Claude 会保留历史记录,方便你快速重用之前的输入。
|
||||
|
||||
### 多行输入
|
||||
|
||||
```text
|
||||
第一行
|
||||
第二行
|
||||
第三行
|
||||
```
|
||||
|
||||
### 行内编辑
|
||||
|
||||
支持在输入过程中编辑中间内容。
|
||||
|
||||
### Vim 模式
|
||||
|
||||
如果你熟悉 Vim,可以启用类似的编辑体验。
|
||||
|
||||
### Bash 模式
|
||||
|
||||
可在会话中直接进入更偏 shell 风格的操作方式。
|
||||
|
||||
<a id="voice-dictation"></a>
|
||||
## 语音输入
|
||||
|
||||
语音输入支持按住说话和多语言识别,适合快速记录想法或在不方便键盘输入时使用。
|
||||
|
||||
### 如何启用
|
||||
|
||||
在设置中打开语音输入即可。
|
||||
|
||||
### 特性
|
||||
|
||||
- 支持按住说话
|
||||
- 支持 20 种语言的语音识别
|
||||
- 适合快速口述任务
|
||||
|
||||
### 配置
|
||||
|
||||
可在 settings 中控制灵敏度、语言和输入行为。
|
||||
|
||||
<a id="channels"></a>
|
||||
## 消息通道(Channels)
|
||||
|
||||
消息通道允许 MCP servers 向正在运行的会话推送消息。
|
||||
|
||||
### 订阅 channels
|
||||
|
||||
```bash
|
||||
# 启动时订阅 channel 插件
|
||||
```
|
||||
|
||||
### 支持的集成
|
||||
|
||||
- Discord
|
||||
- Telegram
|
||||
- 其他 channel 型集成
|
||||
|
||||
### 配置
|
||||
|
||||
通过 MCP 配置或 settings 订阅相应 channel。
|
||||
|
||||
### 工作方式
|
||||
|
||||
外部系统可以把消息推送进 Claude 的当前会话里,让你在一个会话中接收通知或事件。
|
||||
|
||||
<a id="chrome-integration"></a>
|
||||
## Chrome 集成
|
||||
|
||||
Chrome 集成让 Claude 可以协助浏览器自动化和站点级操作。
|
||||
|
||||
### 启用 Chrome 集成
|
||||
|
||||
开启相关开关后,Claude 就可以与浏览器协作。
|
||||
|
||||
### 能力
|
||||
|
||||
- 浏览器自动化
|
||||
- 页面操作
|
||||
- 网站级交互
|
||||
|
||||
### 站点级权限
|
||||
|
||||
你可以对站点设置更细粒度的访问权限。
|
||||
|
||||
### 工作方式
|
||||
|
||||
Claude 通过浏览器连接与页面交互。
|
||||
|
||||
### 已知限制
|
||||
|
||||
- 某些站点会限制自动化
|
||||
- 复杂页面可能需要更多权限
|
||||
|
||||
<a id="remote-control"></a>
|
||||
## 远程控制
|
||||
|
||||
Remote Control 可以让你从 Claude.ai 或 Claude app 远程控制本地 Claude Code 会话。
|
||||
|
||||
### 启动 Remote Control
|
||||
|
||||
```bash
|
||||
# 使用默认会话名启动
|
||||
claude --remote-control
|
||||
|
||||
# 使用自定义名称
|
||||
claude --remote-control --name my-session
|
||||
```
|
||||
|
||||
### 连接到会话
|
||||
|
||||
你可以在远程端连接到已经启动的本地会话,继续同一个上下文。
|
||||
|
||||
### 安全性
|
||||
|
||||
远程控制会牵涉到会话和权限,因此建议只在可信环境中使用。
|
||||
|
||||
### Remote Control vs Claude Code on the web
|
||||
|
||||
Remote Control 是控制本地会话;web 版则是在浏览器中直接运行。
|
||||
|
||||
### 局限
|
||||
|
||||
- 网络可用性依赖更高
|
||||
- 某些本地资源可能不可远程访问
|
||||
|
||||
### 使用场景
|
||||
|
||||
- 在手机上查看并接管会话
|
||||
- 远程继续长期任务
|
||||
|
||||
<a id="web-sessions"></a>
|
||||
## 网页会话
|
||||
|
||||
Web Sessions 允许你直接在浏览器里创建和恢复 Claude Code 会话。
|
||||
|
||||
### 创建 Web Session
|
||||
|
||||
```bash
|
||||
# 从 CLI 创建新的 web session
|
||||
claude --remote "implement API"
|
||||
```
|
||||
|
||||
### 在本地恢复 Web Session
|
||||
|
||||
```bash
|
||||
# 在本地终端恢复 web session
|
||||
claude --teleport
|
||||
```
|
||||
|
||||
### 使用场景
|
||||
|
||||
- 浏览器里快速开始任务
|
||||
- 在本地和网页之间切换
|
||||
- 远程继续工作
|
||||
|
||||
<a id="desktop-app"></a>
|
||||
## 桌面应用
|
||||
|
||||
桌面应用提供独立界面,适合视觉化 diff 审查和多会话管理。
|
||||
|
||||
### 安装
|
||||
|
||||
按照桌面应用的安装说明安装即可。
|
||||
|
||||
### 从 CLI 接力
|
||||
|
||||
你可以把 CLI 会话交给桌面应用继续处理。
|
||||
|
||||
### 核心功能
|
||||
|
||||
- 可视化 diff
|
||||
- 多会话
|
||||
- 更直观的审查体验
|
||||
|
||||
### App 预览配置
|
||||
|
||||
可以调整预览、布局和视觉呈现方式。
|
||||
|
||||
### Connectors
|
||||
|
||||
桌面应用可以连接到不同的工作环境。
|
||||
|
||||
### 远程和 SSH 会话
|
||||
|
||||
桌面应用也支持远程或 SSH 场景下的接力。
|
||||
|
||||
### Desktop 中的权限模式
|
||||
|
||||
Desktop 里同样可以使用不同的权限模式。
|
||||
|
||||
### 企业功能
|
||||
|
||||
企业部署下可使用更多受管和合规相关能力。
|
||||
|
||||
<a id="task-list"></a>
|
||||
## 任务列表
|
||||
|
||||
Task List 用于跨 context compaction 持久保存任务进度。
|
||||
|
||||
### 切换任务列表
|
||||
|
||||
在设置里打开或关闭任务列表显示。
|
||||
|
||||
### 持久任务
|
||||
|
||||
任务会保留,即使上下文被压缩,也能继续跟踪。
|
||||
|
||||
### 命名任务目录
|
||||
|
||||
你可以给任务分组或目录命名,方便管理。
|
||||
|
||||
<a id="prompt-suggestions"></a>
|
||||
## 提示词建议
|
||||
|
||||
Prompt suggestions 会根据当前上下文智能推荐下一步命令或提示词。
|
||||
|
||||
### 工作方式
|
||||
|
||||
系统会结合你的历史、当前任务和上下文给出建议。
|
||||
|
||||
### 禁用建议
|
||||
|
||||
如果你不想看到建议,可以在设置里关闭。
|
||||
|
||||
<a id="git-worktrees"></a>
|
||||
## Git 工作树(Git Worktrees)
|
||||
|
||||
Git worktrees 让你在隔离的目录里并行工作,非常适合实验和分支开发。
|
||||
|
||||
### 从 worktree 启动
|
||||
|
||||
```bash
|
||||
# 在隔离 worktree 中启动 Claude Code
|
||||
claude -w
|
||||
```
|
||||
|
||||
### Worktree 位置
|
||||
|
||||
你可以控制 worktree 的放置位置,保持主工作区整洁。
|
||||
|
||||
### Monorepo 的 sparse checkout
|
||||
|
||||
在大型 monorepo 中,可配合 sparse checkout 只加载需要的部分。
|
||||
|
||||
### Worktree 工具和 Hooks
|
||||
|
||||
worktree 场景下依然可以配合工具和 hooks 自动化流程。
|
||||
|
||||
### 自动清理
|
||||
|
||||
不需要的 worktree 可以自动清理。
|
||||
|
||||
### 使用场景
|
||||
|
||||
- 并行尝试多个方案
|
||||
- 隔离高风险重构
|
||||
- 保持主分支整洁
|
||||
|
||||
<a id="sandboxing"></a>
|
||||
## 沙盒
|
||||
|
||||
沙盒提供文件系统和网络层面的隔离,能显著降低自动化操作的风险。
|
||||
|
||||
### 启用沙盒
|
||||
|
||||
开启后,Claude 的很多操作都会在受控环境里执行。
|
||||
|
||||
### 配置项
|
||||
|
||||
你可以配置允许访问的目录、网络行为和例外列表。
|
||||
|
||||
### 示例配置
|
||||
|
||||
```json
|
||||
{
|
||||
"sandbox": {
|
||||
"enabled": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 工作方式
|
||||
|
||||
沙盒会限制 Claude 可触达的文件和网络边界。
|
||||
|
||||
### 使用场景
|
||||
|
||||
- 低风险自动化
|
||||
- 在不完全信任的输入上执行任务
|
||||
- 受控环境中的批处理
|
||||
|
||||
<a id="managed-settings-enterprise"></a>
|
||||
## 企业受管设置
|
||||
|
||||
企业可以通过受管设置统一分发 Claude Code 配置。
|
||||
|
||||
### 部署方式
|
||||
|
||||
- plist
|
||||
- Registry
|
||||
- 受管文件
|
||||
|
||||
### 受管配置片段
|
||||
|
||||
通过受管配置片段,可以给团队统一推送策略。
|
||||
|
||||
### 可用的受管设置
|
||||
|
||||
- 权限模式
|
||||
- 功能开关
|
||||
- MCP / hooks / 插件约束
|
||||
|
||||
### macOS plist 示例
|
||||
|
||||
```xml
|
||||
<!-- 示例略 -->
|
||||
```
|
||||
|
||||
<a id="configuration-and-settings"></a>
|
||||
## 配置与设置
|
||||
|
||||
### 配置文件位置
|
||||
|
||||
- `~/.claude/settings.json`
|
||||
- `.claude/settings.json`
|
||||
- `.claude/settings.local.json`
|
||||
|
||||
### 完整配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"permissions": {
|
||||
"defaultMode": "plan"
|
||||
},
|
||||
"thinking": {
|
||||
"enabled": true,
|
||||
"effort": "high"
|
||||
},
|
||||
"autoCheckpoint": true
|
||||
}
|
||||
```
|
||||
|
||||
### 环境变量
|
||||
|
||||
#### 模型选择
|
||||
|
||||
- `ANTHROPIC_API_KEY`
|
||||
- `CLAUDE_MODEL`
|
||||
|
||||
#### API 配置
|
||||
|
||||
- `ANTHROPIC_API_KEY`
|
||||
|
||||
#### Thinking 配置
|
||||
|
||||
- `CLAUDE_EFFORT`
|
||||
|
||||
#### 功能开关
|
||||
|
||||
- `CLAUDE_ENABLE_AUTO_MODE`
|
||||
|
||||
#### MCP 配置
|
||||
|
||||
- `CLAUDE_MCP_CONFIG`
|
||||
|
||||
#### 任务管理
|
||||
|
||||
- `CLAUDE_TASK_LIST`
|
||||
|
||||
#### Agent team(实验性)
|
||||
|
||||
- `CLAUDE_TEAM_MODE`
|
||||
|
||||
#### Subagent 和 plugin 配置
|
||||
|
||||
- `CLAUDE_PLUGIN_DATA`
|
||||
|
||||
#### 子进程和流式处理
|
||||
|
||||
- `CLAUDE_OUTPUT_FORMAT`
|
||||
|
||||
### 配置管理命令
|
||||
|
||||
你可以用命令查看或更新当前配置,并把它们落到 settings 中。
|
||||
|
||||
### 每个项目的配置
|
||||
|
||||
推荐把项目专用设置放进项目内的 `.claude/settings.json`,这样能跟代码一起版本化。
|
||||
|
||||
<a id="best-practices"></a>
|
||||
## 最佳实践
|
||||
|
||||
### Planning Mode
|
||||
|
||||
- 复杂任务先规划,再实现
|
||||
- 计划要可审阅
|
||||
|
||||
### Extended Thinking
|
||||
|
||||
- 留给复杂问题
|
||||
- 不要在简单任务上过度使用
|
||||
|
||||
### Background Tasks
|
||||
|
||||
- 用于长时间、可并行的任务
|
||||
- 记得设置超时和可见性
|
||||
|
||||
### Permissions
|
||||
|
||||
- 默认最小权限
|
||||
- 只在必要时放宽
|
||||
|
||||
### Sessions
|
||||
|
||||
- 为重要会话命名
|
||||
- 必要时分叉,而不是硬改
|
||||
|
||||
<a id="additional-resources"></a>
|
||||
## 更多资源
|
||||
|
||||
- [根目录中文指南](../README.md)
|
||||
- [Slash Commands 中文参考](../01-slash-commands/README.md)
|
||||
- [Checkpoints 中文指南](../08-checkpoints/README.md)
|
||||
- [Plugins 中文指南](../07-plugins/README.md)
|
||||
- [CLI 中文参考](../10-cli/README.md)
|
||||
533
zh/09-advanced-features/planning-mode-examples.md
Normal file
533
zh/09-advanced-features/planning-mode-examples.md
Normal file
@@ -0,0 +1,533 @@
|
||||
# 计划模式示例
|
||||
|
||||
以下是 Claude Code 中有效使用计划模式的真实示例。
|
||||
|
||||
## 示例 1:构建 REST API
|
||||
|
||||
### 不使用计划模式
|
||||
|
||||
```
|
||||
用户:给博客做一个 REST API
|
||||
|
||||
Claude:我来创建这个 API……
|
||||
[立刻开始编码,可能漏掉需求]
|
||||
```
|
||||
|
||||
### 使用计划模式
|
||||
|
||||
```
|
||||
用户:/plan 给博客做一个 REST API
|
||||
|
||||
Claude:我来为这个博客 API 制定一份完整计划。
|
||||
|
||||
## 博客 REST API 实现计划
|
||||
|
||||
### 阶段 1:项目初始化(15 分钟)
|
||||
1. 初始化带 Express 的 Node.js 项目
|
||||
2. 配置 TypeScript
|
||||
3. 安装依赖(express、pg、jwt、joi)
|
||||
4. 配置环境变量
|
||||
5. 搭建项目结构
|
||||
|
||||
### 阶段 2:数据库层(30 分钟)
|
||||
6. 设计数据库 schema
|
||||
- users 表(id、email、password_hash、created_at)
|
||||
- posts 表(id、user_id、title、content、published、created_at、updated_at)
|
||||
- comments 表(id、post_id、user_id、content、created_at)
|
||||
7. 创建迁移文件
|
||||
8. 搭建数据库连接池
|
||||
9. 实现数据库模型
|
||||
|
||||
### 阶段 3:认证(45 分钟)
|
||||
10. 实现用户注册接口
|
||||
11. 实现带 JWT 的登录接口
|
||||
12. 创建认证中间件
|
||||
13. 使用 bcrypt 添加密码哈希
|
||||
14. 实现 token 刷新逻辑
|
||||
|
||||
### 阶段 4:Posts API(40 分钟)
|
||||
15. GET /api/posts - 获取所有已发布文章(支持分页)
|
||||
16. GET /api/posts/:id - 获取单篇文章
|
||||
17. POST /api/posts - 创建新文章(需要认证)
|
||||
18. PUT /api/posts/:id - 更新文章(需要认证,检查所有权)
|
||||
19. DELETE /api/posts/:id - 删除文章(需要认证,检查所有权)
|
||||
20. GET /api/users/:id/posts - 获取某个用户的文章
|
||||
|
||||
### 阶段 5:Comments API(30 分钟)
|
||||
21. GET /api/posts/:id/comments - 获取文章评论
|
||||
22. POST /api/posts/:id/comments - 添加评论(需要认证)
|
||||
23. DELETE /api/comments/:id - 删除评论(需要认证,检查所有权)
|
||||
|
||||
### 阶段 6:校验与错误处理(30 分钟)
|
||||
24. 使用 Joi 添加请求校验
|
||||
25. 实现全局错误处理器
|
||||
26. 添加输入清洗
|
||||
27. 实现速率限制
|
||||
|
||||
### 阶段 7:测试(60 分钟)
|
||||
28. 为模型编写单元测试
|
||||
29. 为认证接口编写集成测试
|
||||
30. 为文章接口编写集成测试
|
||||
31. 为评论接口编写集成测试
|
||||
32. 达到 80%+ 的代码覆盖率
|
||||
|
||||
### 阶段 8:文档与部署(30 分钟)
|
||||
33. 使用 Swagger 生成 API 文档
|
||||
34. 创建包含安装说明的 README
|
||||
35. 添加 Docker 配置
|
||||
36. 搭建 CI/CD 流水线
|
||||
|
||||
**预估时间**:4.5 小时
|
||||
**需要创建的文件**:约 25 个
|
||||
**关键技术**:Express、PostgreSQL、JWT、TypeScript
|
||||
|
||||
**API 端点概览**:
|
||||
- 认证:2 个端点
|
||||
- 文章:6 个端点
|
||||
- 评论:3 个端点
|
||||
- 总计:11 个端点
|
||||
|
||||
准备继续吗?(yes/no/modify)
|
||||
|
||||
用户:yes
|
||||
|
||||
Claude:开始阶段 1:项目初始化……
|
||||
[按阶段系统性实现]
|
||||
```
|
||||
|
||||
## 示例 2:数据库迁移
|
||||
|
||||
### 使用计划模式
|
||||
|
||||
```
|
||||
用户:/plan 将数据库从 MongoDB 迁移到 PostgreSQL
|
||||
|
||||
Claude:这是一次复杂迁移。我来制定详细计划。
|
||||
|
||||
## MongoDB 到 PostgreSQL 的迁移计划
|
||||
|
||||
### 阶段 1:分析与准备(第 1 天)
|
||||
1. 分析当前 MongoDB schema
|
||||
2. 识别数据关系和约束
|
||||
3. 记录当前数据量和增长速率
|
||||
4. 设计对应的 PostgreSQL schema
|
||||
5. 规划数据类型映射
|
||||
6. 识别潜在迁移挑战
|
||||
|
||||
### 阶段 2:PostgreSQL 准备(第 1 天)
|
||||
7. 搭建 PostgreSQL 数据库
|
||||
8. 创建包含表、索引和约束的 schema
|
||||
9. 配置连接池
|
||||
10. 制定备份策略
|
||||
|
||||
### 阶段 3:双写实现(第 2-3 天)
|
||||
11. 创建数据库抽象层
|
||||
12. 实现同时向两个数据库写入
|
||||
13. 添加数据一致性检查
|
||||
14. 在预发布环境部署双写
|
||||
15. 监控问题
|
||||
|
||||
### 阶段 4:数据迁移(第 4 天)
|
||||
16. 为 MongoDB 创建数据导出脚本
|
||||
17. 为 PostgreSQL 创建数据导入脚本
|
||||
18. 实现数据转换逻辑
|
||||
19. 在生产数据副本上执行初次迁移
|
||||
20. 验证迁移后数据完整性
|
||||
|
||||
### 阶段 5:渐进切换(第 5-7 天)
|
||||
21. 在生产环境开启双写
|
||||
22. 分批迁移历史数据
|
||||
23. 持续验证数据一致性
|
||||
24. 监控两个数据库
|
||||
25. 修复任何数据同步问题
|
||||
|
||||
### 阶段 6:PostgreSQL 作为主库(第 8 天)
|
||||
26. 将读操作切换到 PostgreSQL
|
||||
27. 监控查询性能
|
||||
28. 优化慢查询
|
||||
29. 继续保留双写作为安全措施
|
||||
|
||||
### 阶段 7:MongoDB 退役(第 9-10 天)
|
||||
30. 停止向 MongoDB 写入
|
||||
31. 保留 MongoDB 作为两周备份
|
||||
32. 从代码中移除 MongoDB 依赖
|
||||
33. 归档 MongoDB 数据
|
||||
34. 下线 MongoDB 实例
|
||||
|
||||
**预估时间**:10 天
|
||||
**风险等级**:高
|
||||
**回滚策略**:保持 MongoDB 运行并开启双写
|
||||
**成功标准**:
|
||||
- 零数据丢失
|
||||
- 性能回退小于 5%
|
||||
- 所有测试通过
|
||||
|
||||
**关键风险**:
|
||||
1. 迁移过程中的数据不一致
|
||||
2. 查询性能下降
|
||||
3. 应用停机
|
||||
4. 数据丢失
|
||||
|
||||
**缓解措施**:
|
||||
- 采用双写模式保障安全
|
||||
- 渐进式切换
|
||||
- 持续监控
|
||||
- 快速回滚能力
|
||||
|
||||
是否按此计划继续?(yes/no/modify)
|
||||
|
||||
用户:modify - 我们给每个阶段都加上回滚方案
|
||||
|
||||
Claude:我已经为每个阶段补充了回滚流程……
|
||||
```
|
||||
|
||||
## 示例 3:前端重构
|
||||
|
||||
```
|
||||
用户:/plan 把我们的 React 应用从 class 组件重构为 hooks
|
||||
|
||||
Claude:我来制定一个系统化的重构计划。
|
||||
|
||||
## React Class 到 Hooks 迁移计划
|
||||
|
||||
### 阶段 1:准备与分析(2 小时)
|
||||
1. 审查所有 class 组件(查找所有 .jsx/.tsx 文件)
|
||||
2. 按复杂度分类:
|
||||
- 简单型(仅 state):约 15 个组件
|
||||
- 中等型(生命周期方法):约 23 个组件
|
||||
- 复杂型(多个生命周期、refs):约 8 个组件
|
||||
3. 识别需要更新的第三方库
|
||||
4. 创建组件依赖图
|
||||
5. 规划迁移顺序(先叶子节点)
|
||||
|
||||
### 阶段 2:环境与工具(1 小时)
|
||||
6. 将 React 升级到 v18+
|
||||
7. 为 hooks 配置 ESLint 规则
|
||||
8. 创建转换模板
|
||||
9. 配置自动化测试
|
||||
10. 在开始前创建一个检查点
|
||||
|
||||
### 阶段 3:迁移简单组件(4 小时)
|
||||
11. 转换简单的有状态组件(15 个)
|
||||
12. 用 `useState` 替换 `this.state`
|
||||
13. 用状态 setter 替换 `this.setState`
|
||||
14. 每个组件转换后都进行测试
|
||||
15. 更新测试
|
||||
|
||||
### 阶段 4:迁移中等复杂组件(8 小时)
|
||||
16. 转换带生命周期方法的组件(23 个)
|
||||
17. 用 `useEffect` 替换 `componentDidMount`
|
||||
18. 用 `useEffect` 替换 `componentDidUpdate`
|
||||
19. 用 `useEffect` 清理函数替换 `componentWillUnmount`
|
||||
20. 做充分测试
|
||||
|
||||
### 阶段 5:迁移复杂组件(12 小时)
|
||||
21. 转换复杂组件(8 个)
|
||||
22. 用 `useRef` 替换 refs
|
||||
23. 为共享逻辑提取自定义 hooks
|
||||
24. 处理边缘情况(多个 `useEffect`)
|
||||
25. 做深入测试
|
||||
|
||||
### 阶段 6:提取共享逻辑(6 小时)
|
||||
26. 识别组件之间重复的逻辑
|
||||
27. 创建自定义 hooks:
|
||||
- `useAuth`
|
||||
- `useFetch`
|
||||
- `useLocalStorage`
|
||||
- `useDebounce`
|
||||
28. 将组件重构为使用自定义 hooks
|
||||
29. 独立测试自定义 hooks
|
||||
|
||||
### 阶段 7:性能优化(4 小时)
|
||||
30. 在需要的地方添加 `React.memo`
|
||||
31. 使用 `useCallback` 优化
|
||||
32. 使用 `useMemo` 优化
|
||||
33. 分析并修复性能回退
|
||||
|
||||
### 阶段 8:收尾与文档(2 小时)
|
||||
34. 移除未使用的 class 组件工具
|
||||
35. 更新文档
|
||||
36. 更新编码规范
|
||||
37. 为团队编写迁移指南
|
||||
|
||||
**预估时间**:5 天(39 小时)
|
||||
**需要修改的文件**:46 个组件
|
||||
**风险等级**:中
|
||||
|
||||
**迁移顺序**:
|
||||
1. 叶子组件(无依赖)
|
||||
2. 中层组件
|
||||
3. 顶层容器组件
|
||||
4. `App.jsx`(最后)
|
||||
|
||||
**测试策略**:
|
||||
- 每个组件的单元测试
|
||||
- 用户流程的集成测试
|
||||
- 视觉回归测试
|
||||
- 性能基准测试
|
||||
|
||||
**成功指标**:
|
||||
- 所有测试通过
|
||||
- 没有视觉回归
|
||||
- 性能保持或提升
|
||||
- 打包体积没有明显增加
|
||||
|
||||
继续吗?(yes/no/modify)
|
||||
```
|
||||
|
||||
## 示例 4:安全实现
|
||||
|
||||
```
|
||||
用户:/plan 为我们的 Web 应用实现完整安全方案
|
||||
|
||||
Claude:我来制定一份全面的安全实施计划。
|
||||
|
||||
## Web 应用安全实施计划
|
||||
|
||||
### 阶段 1:安全审计(第 1 天)
|
||||
1. 运行自动化安全扫描器(npm audit、Snyk)
|
||||
2. 检查依赖中的漏洞
|
||||
3. 核对 OWASP Top 10 合规性
|
||||
4. 审查认证流程
|
||||
5. 审查数据处理方式
|
||||
6. 记录当前的安全缺口
|
||||
|
||||
### 阶段 2:认证加固(第 2-3 天)
|
||||
7. 实现强密码要求
|
||||
8. 添加密码强度检测器
|
||||
9. 对登录接口实施限流
|
||||
10. 在多次失败后锁定账户
|
||||
11. 实现 2FA(TOTP)
|
||||
12. 改进会话管理
|
||||
13. 实现安全的密码重置流程
|
||||
|
||||
### 阶段 3:授权与访问控制(第 3-4 天)
|
||||
14. 实现 RBAC(基于角色的访问控制)
|
||||
15. 为所有端点添加权限检查
|
||||
16. 实现最小权限原则
|
||||
17. 为敏感操作添加审计日志
|
||||
18. 实现资源级权限
|
||||
|
||||
### 阶段 4:数据保护(第 4-5 天)
|
||||
19. 对敏感字段实施静态加密
|
||||
20. 确保所有通信都使用 TLS/SSL
|
||||
21. 实现安全的会话存储
|
||||
22. 在日志中对 PII 数据做脱敏
|
||||
23. 实现数据保留策略
|
||||
24. 添加安全的文件上传处理
|
||||
|
||||
### 阶段 5:输入验证与清洗(第 5-6 天)
|
||||
25. 为所有端点实现输入校验
|
||||
26. 添加 XSS 防护(Content Security Policy)
|
||||
27. 实现 SQL 注入防护(参数化查询)
|
||||
28. 添加 CSRF 防护
|
||||
29. 实现请求大小限制
|
||||
30. 添加文件上传类型校验
|
||||
|
||||
### 阶段 6:安全头与配置(第 6 天)
|
||||
31. 添加安全响应头:
|
||||
- Strict-Transport-Security
|
||||
- X-Content-Type-Options
|
||||
- X-Frame-Options
|
||||
- X-XSS-Protection
|
||||
- Content-Security-Policy
|
||||
32. 正确配置 CORS
|
||||
33. 禁用不必要的 HTTP 方法
|
||||
34. 移除服务器版本头
|
||||
|
||||
### 阶段 7:监控与日志(第 7 天)
|
||||
35. 实现安全事件日志
|
||||
36. 添加异常检测
|
||||
37. 搭建入侵检测
|
||||
38. 实现实时告警
|
||||
39. 创建安全仪表盘
|
||||
|
||||
### 阶段 8:测试与文档(第 8-9 天)
|
||||
40. 执行渗透测试
|
||||
41. 运行安全扫描器
|
||||
42. 测试所有安全功能
|
||||
43. 编写安全文档
|
||||
44. 培训团队的安全实践
|
||||
45. 编写事件响应计划
|
||||
|
||||
### 阶段 9:合规与政策(第 10 天)
|
||||
46. 检查 GDPR 合规性
|
||||
47. 创建隐私政策
|
||||
48. 实现数据主体权利支持
|
||||
49. 添加 cookie 同意机制
|
||||
50. 编写安全政策文档
|
||||
|
||||
**预估时间**:10 天
|
||||
**风险等级**:严重
|
||||
**优先级**:高
|
||||
|
||||
**安全改进摘要**:
|
||||
- 认证:7 项增强
|
||||
- 授权:5 项增强
|
||||
- 数据保护:6 项增强
|
||||
- 输入校验:6 项增强
|
||||
- 基础设施:9 项增强
|
||||
- 监控:5 项增强
|
||||
|
||||
**合规性**:OWASP Top 10、GDPR
|
||||
|
||||
**成功标准**:
|
||||
- 零严重漏洞
|
||||
- 所有 OWASP Top 10 风险都得到缓解
|
||||
- 安全评分高于 90/100
|
||||
- 所有渗透测试问题都已解决
|
||||
|
||||
继续吗?(yes/no/modify)
|
||||
```
|
||||
|
||||
## 示例 5:性能优化
|
||||
|
||||
```
|
||||
用户:/plan 优化我们这个很慢的电商网站
|
||||
|
||||
Claude:我来制定一份完整的性能优化计划。
|
||||
|
||||
## 电商网站性能优化计划
|
||||
|
||||
### 阶段 1:性能审计(4 小时)
|
||||
1. 运行 Lighthouse 审计
|
||||
2. 分析 Chrome DevTools 性能剖析结果
|
||||
3. 测量 Core Web Vitals:
|
||||
- LCP(Largest Contentful Paint)
|
||||
- FID(First Input Delay)
|
||||
- CLS(Cumulative Layout Shift)
|
||||
4. 找出性能瓶颈
|
||||
5. 创建基线性能指标
|
||||
|
||||
**当前指标**:
|
||||
- LCP:4.2s(目标:<2.5s)
|
||||
- FID:280ms(目标:<100ms)
|
||||
- CLS:0.25(目标:<0.1)
|
||||
- 页面加载:8.3s(目标:<3s)
|
||||
|
||||
### 阶段 2:图片优化(6 小时)
|
||||
6. 将图片转换为 WebP 格式
|
||||
7. 实现响应式图片
|
||||
8. 为图片添加懒加载
|
||||
9. 优化图片大小(压缩)
|
||||
10. 为图片接入 CDN
|
||||
11. 添加图片占位符
|
||||
|
||||
**预期影响**:加载时间减少 40%
|
||||
|
||||
### 阶段 3:代码拆分与懒加载(8 小时)
|
||||
12. 实现基于路由的代码拆分
|
||||
13. 懒加载非关键组件
|
||||
14. 拆分第三方依赖包
|
||||
15. 优化 chunk 大小
|
||||
16. 实现动态导入
|
||||
17. 为关键资源添加预加载
|
||||
|
||||
**预期影响**:初始 bundle 体积减少 30%
|
||||
|
||||
### 阶段 4:缓存策略(6 小时)
|
||||
18. 实现浏览器缓存(Cache-Control)
|
||||
19. 为离线支持添加 service worker
|
||||
20. 实现 API 响应缓存
|
||||
21. 为数据库查询添加 Redis 缓存
|
||||
22. 实现 stale-while-revalidate
|
||||
23. 配置 CDN 缓存
|
||||
|
||||
**预期影响**:API 响应时间减少 50%
|
||||
|
||||
### 阶段 5:数据库优化(8 小时)
|
||||
24. 添加数据库索引
|
||||
25. 优化慢查询(>100ms)
|
||||
26. 实现查询结果缓存
|
||||
27. 添加连接池
|
||||
28. 在合适地方做反规范化
|
||||
29. 实现数据库只读副本
|
||||
|
||||
**预期影响**:数据库查询时间减少 60%
|
||||
|
||||
### 阶段 6:前端优化(10 小时)
|
||||
30. 最小化并压缩 JavaScript
|
||||
31. 最小化并压缩 CSS
|
||||
32. 移除未使用的 CSS(PurgeCSS)
|
||||
33. 实现关键 CSS
|
||||
34. 延迟加载非关键 JavaScript
|
||||
35. 减少 DOM 规模
|
||||
36. 优化 React 渲染(`memo`、`useMemo`)
|
||||
37. 为长列表实现虚拟滚动
|
||||
|
||||
**预期影响**:JavaScript 执行时间减少 35%
|
||||
|
||||
### 阶段 7:网络优化(4 小时)
|
||||
38. 启用 HTTP/2
|
||||
39. 实现资源提示(preconnect、prefetch)
|
||||
40. 减少 HTTP 请求数量
|
||||
41. 启用 Brotli 压缩
|
||||
42. 优化第三方脚本
|
||||
|
||||
**预期影响**:网络耗时减少 25%
|
||||
|
||||
### 阶段 8:监控与测试(4 小时)
|
||||
43. 搭建性能监控(Datadog/New Relic)
|
||||
44. 添加真实用户监控(RUM)
|
||||
45. 制定性能预算
|
||||
46. 搭建自动化 Lighthouse CI
|
||||
47. 在真实设备上测试
|
||||
|
||||
**预估时间**:50 小时(2 周)
|
||||
|
||||
**目标指标**(90 分位):
|
||||
- LCP:<2.0s(从 4.2s 降低)✅
|
||||
- FID:<50ms(从 280ms 降低)✅
|
||||
- CLS:<0.05(从 0.25 降低)✅
|
||||
- 页面加载:<2.5s(从 8.3s 降低)✅
|
||||
|
||||
**预期收入影响**:
|
||||
- 每快 100ms,转化率提升 1%
|
||||
- 目标:缩短 5.8s,约带来 58% 的转化率提升
|
||||
- 预估额外收入:显著
|
||||
|
||||
**优先级顺序**:
|
||||
1. 图片优化(快速收益)
|
||||
2. 代码拆分(高影响)
|
||||
3. 缓存(高影响)
|
||||
4. 数据库优化(关键)
|
||||
5. 前端优化(打磨)
|
||||
|
||||
是否按此计划继续?(yes/no/modify)
|
||||
```
|
||||
|
||||
## 关键要点
|
||||
|
||||
### 计划模式的优势
|
||||
|
||||
1. **清晰**:开始前就有明确路线图
|
||||
2. **可估算**:能给出时间和工作量预估
|
||||
3. **风险评估**:能尽早发现潜在问题
|
||||
4. **优先级排序**:任务按合理顺序推进
|
||||
5. **可审批**:执行前先审阅并确认
|
||||
6. **可调整**:根据反馈及时修改计划
|
||||
|
||||
### 什么时候使用计划模式
|
||||
|
||||
✅ **建议始终使用于**:
|
||||
- 多日项目
|
||||
- 团队协作
|
||||
- 关键系统变更
|
||||
- 学习新概念
|
||||
- 复杂重构
|
||||
|
||||
❌ **不建议使用于**:
|
||||
- 修 bug
|
||||
- 小改动
|
||||
- 简单查询
|
||||
- 快速实验
|
||||
|
||||
### 最佳实践
|
||||
|
||||
1. **审批前仔细审查** 计划
|
||||
2. **发现问题就修改** 计划
|
||||
3. **把复杂任务拆细**
|
||||
4. **给出现实的时间估算**
|
||||
5. **包含回滚策略**
|
||||
6. **写明成功标准**
|
||||
7. **为每个阶段安排测试**
|
||||
Reference in New Issue
Block a user