graph TB
    subgraph "Claude Code 五大运行界面"
        CLI["💻 CLI终端<br/>claude命令"]
        VSC_EXT["🔷 VS Code扩展面板<br/>图形化交互"]
        VSC_TERM["🔷 VS Code集成终端<br/>claude命令"]
        JB["🧠 JetBrains插件<br/>Tool Window"]
        DESKTOP["🖥️ Desktop App<br/>独立窗口"]
    end

    CLI --> |"轻量/脚本/CI"| SCENE1["服务器/CI/自动化"]
    VSC_EXT --> |"可视化审查"| SCENE2["前端/全栈开发"]
    VSC_TERM --> |"CLI习惯+IDE"| SCENE3["习惯终端的开发者"]
    JB --> |"Java/Python企业级"| SCENE4["企业后端开发"]
    DESKTOP --> |"多会话/多项目"| SCENE5["全栈/自由职业者"]

    style VSC_EXT fill:#007ACC,color:#fff
    style JB fill:#FC801D,color:#fff
    style DESKTOP fill:#D97706,color:#fff

code --install-extension anthropic.claude-code

# 在项目目录下
claude
# 首次运行会提示是否安装VS Code扩展

// settings.json 中的认证配置示例
{
  "claude-code.apiProvider": "anthropic",  // anthropic | bedrock | vertex
  "claude-code.model": "claude-sonnet-4-6",  // 默认模型
}

修改前代码（红色删除线）
- const data = fetch(url);
+ const data = await fetch(url);
修改后代码（绿色高亮）

sequenceDiagram
    participant D as 开发者
    participant C as Claude Code
    participant F as 文件系统

    D->>C: 描述任务
    C->>C: 分析代码库
    C->>D: 展示修改计划
    D->>D: 审查/编辑计划
    D->>C: 确认执行
    C->>F: 按步骤修改文件
    F->>D: Inline Diff展示变更
    D->>C: Accept/Reject

// settings.json
{
  // "default" - 每次修改前询问
  "claude-code.permissionMode": "default",

  // "plan" - 仅计划阶段后自动执行（推荐）
  // "claude-code.permissionMode": "plan",

  // "auto-edit" - 自动接受文件编辑，仅命令需确认
  // "claude-code.permissionMode": "auto-edit",

  // "full-auto" - 全自动（危险，仅限可信项目）
  // "claude-code.permissionMode": "full-auto",
}

https://plugins.jetbrains.com/plugin/claude-code

// 在JetBrains中选中一段代码时，Claude自动获取：
// - 文件: UserService.java
// - 类: com.example.service.UserService
// - 方法: public User findById(Long id)
// - 选中代码: [第45-60行]

# 在 claude.properties 或 IDE配置中
# 自定义CLAUDE.md路径
claude.project.instructions=path/to/custom-instructions.md

# 启用/禁用自动索引
claude.indexing.enabled=true

# 最大上下文文件数
claude.context.maxFiles=50

my-saas-app/
├── frontend/          # React + TypeScript（VS Code）
│   ├── src/
│   ├── package.json
│   └── tsconfig.json
├── backend/           # Java Spring Boot（IntelliJ）
│   ├── src/
│   ├── pom.xml
│   └── application.yml
├── shared/            # 共享类型定义
│   └── types/
├── CLAUDE.md          # Claude Code项目级指令
└── .claude/
    └── settings.json  # 项目级设置

# Project: MySaaS App

## Architecture
- Frontend: React 19 + TypeScript + Vite
- Backend: Java 21 + Spring Boot 3.3 + Gradle
- Database: PostgreSQL 16
- Cache: Redis 7

## Conventions
- Frontend uses functional components with hooks
- Backend follows DDD (Domain-Driven Design)
- API follows RESTful conventions
- All API responses wrapped in `ApiResponse<T>`
- Error codes follow RFC 7807 Problem Details

## Testing
- Frontend: Vitest + React Testing Library
- Backend: JUnit 5 + Mockito
- Minimum coverage: 80%

## Code Style
- TypeScript: strict mode, no `any`
- Java: follow Google Java Style
- Commit messages: Conventional Commits

操作流程：
1. 在VS Code中打开 frontend/ 目录
2. 打开Claude面板，输入：
   "@src/pages/ 参考现有的Dashboard页面结构，创建UserManagement页面，
   包含用户列表（表格）、搜索、分页、新增/编辑弹窗"
3. Claude生成Plan，展示要创建/修改的文件列表
4. 审查Plan，确认文件结构符合预期
5. 执行，逐文件审查Inline Diff
6. Accept合理的修改，Reject不满意的
7. 手动微调细节

操作流程：
1. 在IntelliJ中打开 backend/ 目录
2. 打开Claude Code Tool Window，输入：
   "在 com.example.user 包下创建完整的User模块：
   Entity、Repository、Service、Controller，
   遵循项目现有的DDD分层架构"
3. Claude感知到项目的Maven结构和现有代码风格
4. 生成符合项目规范的代码
5. 在Diff Preview中审查每个文件
6. IntelliJ自动检测新文件并更新项目索引

graph LR
    subgraph "需求：添加用户角色字段"
        A[1. IntelliJ修改<br/>User Entity] --> B[2. IntelliJ修改<br/>UserDTO/API]
        B --> C[3. 更新shared/types/<br/>TypeScript类型]
        C --> D[4. VS Code修改<br/>前端表单/展示]
        D --> E[5. 双端测试验证]
    end

    style A fill:#FC801D,color:#fff
    style D fill:#007ACC,color:#fff

#!/bin/bash
# verify-cross-platform.sh - 验证前后端一致性

echo "=== 检查后端API字段与前端类型定义一致性 ==="

# 提取后端UserDTO字段
BACKEND_FIELDS=$(cd backend && grep -oP 'private \K\w+' \
  src/main/java/com/example/user/dto/UserDTO.java | sort)

# 提取前端User类型字段
FRONTEND_FIELDS=$(cd frontend && grep -oP '\w+:' \
  src/types/user.ts | tr -d ':' | sort)

# 比较差异
DIFF=$(diff <(echo "$BACKEND_FIELDS") <(echo "$FRONTEND_FIELDS"))
if [ -z "$DIFF" ]; then
  echo "✅ 前后端字段一致"
else
  echo "❌ 发现不一致："
  echo "$DIFF"
  echo "使用 Claude Code 修复：claude -p '修复前端类型定义，使其与后端UserDTO一致'"
fi

gitgraph
    commit id: "初始状态"
    commit id: "Checkpoint: 开始重构"
    branch feature-refactor
    checkout feature-refactor
    commit id: "Claude修改1"
    commit id: "Claude修改2"
    commit id: "Claude修改3（引入bug）"
    checkout main
    commit id: "Checkpoint: 安全点"

graph TD
    A[开始任务] --> B{任务类型?}
    B -->|学习/探索| C["Default模式<br/>每步确认"]
    B -->|日常开发| D["Plan模式<br/>审查计划后自动执行"]
    B -->|批量重构| E["Auto-Edit模式<br/>编辑自动/命令确认"]
    B -->|CI/CD脚本| F["Full-Auto模式<br/>⚠️仅限隔离环境"]

    C --> G["安全但慢"]
    D --> H["平衡（推荐）"]
    E --> I["高效/中风险"]
    F --> J["极速/高风险"]

~/.claude/CLAUDE.md          # 全局偏好（编码风格、语言偏好）
project/CLAUDE.md            # 项目级指令（架构、约定）
project/frontend/CLAUDE.md   # 子项目指令（前端特定规则）

# .claudeignore
node_modules/
dist/
build/
*.min.js
*.min.css
.env
secrets/

// .vscode/settings.json - VS Code项目配置
{
  "claude-code.permissionMode": "plan",
  "claude-code.model": "claude-sonnet-4-6",
  "claude-code.contextProviders": ["files", "git", "lsp"],
  "claude-code.autoCheckpoint": true
}

<!-- .idea/claude.xml - JetBrains项目配置（示例） -->
<application>
  <component name="ClaudeCodeSettings">
    <option name="permissionMode" value="PLAN" />
    <option name="model" value="claude-sonnet-4-6" />
    <option name="autoCheckpoint" value="true" />
  </component>
</application>

# 检查Claude Code CLI版本
claude --version

# 如果版本过低，更新
npm update -g @anthropic-ai/claude-code

# 检查认证状态
claude auth status

// settings.json - 性能优化配置
{
  // 限制上下文文件大小
  "claude-code.maxFileSize": "100KB",

  // 排除大型生成文件
  "claude-code.excludePatterns": [
    "**/*.generated.ts",
    "**/dist/**",
    "**/build/**",
    "**/*.lock"
  ],

  // 使用更快的模型处理简单任务
  "claude-code.fastModel": "claude-haiku-4-5"
}

推荐：VS Code扩展 + CLI
理由：轻量、灵活、前端全栈覆盖
关键设置：Plan模式、自动Checkpoint

推荐：IntelliJ插件 + Team API Key
理由：项目结构深度感知、代码规范统一
关键设置：强制Plan模式、CLAUDE.md团队版、审计日志

推荐：Desktop App + SSH连接
理由：多会话管理、断线恢复、跨项目切换
关键设置：SSH Key认证、tmux持久会话

推荐：VS Code扩展 + Jupyter集成
理由：Notebook支持、数据文件预览
关键设置：Python环境自动检测、数据分析MCP服务器