模块4.5：效率提升验证与真实案例

提升比例 = (传统耗时 - AI耗时) / 传统耗时 × 100%
         = (5小时20分钟 - 2小时20分钟) / 5小时20分钟 × 100%
         = 56.25%

任务：用户列表页 + 详情页 + 编辑页

时间记录：
第1天：
- 09:00-09:30  看PRD，理解需求
- 09:30-12:00  写列表页（Table + 搜索 + 分页）
- 14:00-16:00  写详情页
- 16:00-18:00  写编辑页（表单）
- 18:00-19:00  调试

第2天：
- 09:00-10:00  处理昨天遗留问题
- 10:00-11:30  对接后端接口
- 11:30-12:00  再次调试
- 14:00-15:00  Code Review（小李帮我看）
- 15:00-17:00  修改问题（变量命名不规范、缺少loading、错误处理不完善）
- 17:00-18:00  再次测试

总计：13小时（1.6天）

发现的问题：
- 命名不规范（userName vs user_name混用）
- 没有loading状态
- 错误提示不友好
- 代码重复（列表页和其他页面很多重复代码）

# 表单生成规范

## 技术栈
React 18 + TypeScript + Ant Design 5.x + react-hook-form + zod

## 文件结构
FormName/
├── index.tsx
├── schema.ts
└── types.ts

## 代码模板
[详细的代码规范，参考之前的文档]

## 输出要求
- 所有字段有校验
- 提交按钮有loading
- 错误提示显示在字段下方

# CRUD模板

包含：
- 列表页（Table + 搜索 + 分页）
- 详情页
- 编辑页（新建和编辑共用表单）

[详细规范]

# 代码规范

命名：
- 变量用camelCase
- 组件用PascalCase
- 常量用UPPER_SNAKE_CASE

[其他规范]

09:00-09:15  理解需求（15分钟）
09:15-09:30  配置Skill文件到Claude（15分钟）
09:30-10:00  用Claude生成列表页基础代码（30分钟）
             Prompt: "按照crud-template.skill.md，生成供应商列表页"
10:00-11:30  调整代码，加业务逻辑（1.5小时）
11:30-12:00  测试（30分钟）

14:00-14:20  生成详情页（20分钟）
14:20-15:00  调整（40分钟）

15:00-15:20  生成编辑表单（20分钟）
15:20-16:30  调整（1小时10分钟）

16:30-17:00  整体联调（30分钟）

09:00-09:30  Code Review（AI预检，发现2个小问题）
09:30-10:00  修改问题
10:00-10:30  最终测试

// 每次都要从头写
function UserForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [errors, setErrors] = useState({});

  const validate = () => {
    let errs = {};
    if (!name) errs.name = '请输入姓名';
    if (!email) errs.email = '请输入邮箱';
    // ... 手写所有校验
    setErrors(errs);
    return Object.keys(errs).length === 0;
  };

  // ... 很多代码
}

// AI根据Skill生成
function UserForm({ mode, initialData, onSubmit }: UserFormProps) {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<UserFormValues>({
    resolver: zodResolver(userFormSchema), // 自动校验
    defaultValues: initialData,
  });

  // ... 规范统一、错误处理完善
}

# 提交前，先让AI review
git diff | pbcopy
# 粘贴给Claude："按code-standard.skill.md检查这段代码"

# AI会返回：
# 1. 发现3个命名不规范
# 2. 缺少2个错误处理
# 3. 1个性能问题（不必要的re-render）

# 改完再提交
git commit

需求（来自客户）：
"我们需要一个培训报名表，字段如下：
- 姓名（必填）
- 手机号（必填）
- 邮箱（选填）
- 所在部门（下拉选择）
- 参加课程（多选）
- 特殊需求（多行文本）
希望3天内交付。"

传统开发流程：
Day 1:
- 产品经理整理需求（1小时）
- 画原型图（1小时）
- 评审（0.5小时）

Day 2:
- 前端开发（4小时）
  - 写表单组件
  - 写校验规则
  - 对接后端接口
  - 写样式
- 自测（1小时）

Day 3:
- 客户试用（1小时）
- 客户提修改意见（2小时）
- 再次修改（1.5小时）
- 最终交付

总耗时：13小时（1.6天）
但客户要等3天才能用上

客户需求（自然语言）
    ↓
AI解析（Claude + form-dsl.skill.md）
    ↓
JSON DSL配置
    ↓
表单渲染引擎（React）
    ↓
可视化预览
    ↓
客户确认/修改
    ↓
交付部署

{
  "formId": "training-registration",
  "title": "培训报名表",
  "fields": [
    {
      "id": "name",
      "label": "姓名",
      "type": "text",
      "required": true,
      "maxLength": 50
    },
    {
      "id": "phone",
      "label": "手机号",
      "type": "text",
      "required": true,
      "pattern": "^1[3-9]\\d{9}$",
      "errorMessage": "请输入正确的手机号"
    },
    {
      "id": "email",
      "label": "邮箱",
      "type": "email",
      "required": false
    },
    {
      "id": "department",
      "label": "所在部门",
      "type": "select",
      "required": true,
      "options": [
        { "label": "研发部", "value": "dev" },
        { "label": "市场部", "value": "market" },
        { "label": "销售部", "value": "sales" }
      ]
    },
    {
      "id": "courses",
      "label": "参加课程",
      "type": "checkbox",
      "required": true,
      "options": [
        { "label": "React进阶", "value": "react" },
        { "label": "Node.js实战", "value": "node" },
        { "label": "TypeScript", "value": "ts" }
      ]
    },
    {
      "id": "requirements",
      "label": "特殊需求",
      "type": "textarea",
      "required": false,
      "maxLength": 500
    }
  ],
  "layout": "vertical",
  "submitText": "提交报名"
}

// FormRenderer.tsx
interface FormRendererProps {
  config: FormConfig; // DSL配置
  onSubmit: (data: any) => Promise<void>;
}

export default function FormRenderer({ config, onSubmit }: FormRendererProps) {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: zodResolver(generateSchema(config)), // 根据DSL生成校验规则
  });

  return (
    <Form layout={config.layout} onFinish={handleSubmit(onSubmit)}>
      <h2>{config.title}</h2>
      {config.fields.map(field => (
        <FieldRenderer
          key={field.id}
          field={field}
          register={register}
          error={errors[field.id]}
        />
      ))}
      <Button type="primary" htmlType="submit" loading={isSubmitting}>
        {config.submitText || '提交'}
      </Button>
    </Form>
  );
}

// FieldRenderer.tsx
function FieldRenderer({ field, register, error }) {
  switch (field.type) {
    case 'text':
    case 'email':
      return (
        <Form.Item label={field.label} required={field.required} help={error?.message}>
          <Input {...register(field.id)} placeholder={`请输入${field.label}`} />
        </Form.Item>
      );

    case 'select':
      return (
        <Form.Item label={field.label} required={field.required} help={error?.message}>
          <Select {...register(field.id)} options={field.options} />
        </Form.Item>
      );

    case 'checkbox':
      return (
        <Form.Item label={field.label} required={field.required} help={error?.message}>
          <Checkbox.Group {...register(field.id)} options={field.options} />
        </Form.Item>
      );

    case 'textarea':
      return (
        <Form.Item label={field.label} required={field.required} help={error?.message}>
          <TextArea {...register(field.id)} rows={4} maxLength={field.maxLength} />
        </Form.Item>
      );

    default:
      return null;
  }
}

# 表单DSL生成器

## 任务
根据用户的自然语言描述，生成表单DSL配置（JSON格式）

## 输入
用户用自然语言描述表单需求，例如：
"我需要一个用户注册表单，包含用户名、密码、邮箱、手机号"

## 处理规则

### 字段类型识别
- "姓名"、"名字"、"标题" → text
- "手机"、"电话"、"联系方式" → text + 手机号pattern
- "邮箱"、"邮件"、"email" → email
- "密码" → password
- "日期"、"时间" → date/datetime
- "选择XX"、"下拉XX" → select
- "多选XX" → checkbox
- "单选XX" → radio
- "描述"、"备注"、"说明" → textarea
- "数字"、"金额"、"价格" → number

### 必填判断
- 包含"必填"、"必须"、"required" → required: true
- 包含"选填"、"可选"、"optional" → required: false
- 默认重要字段（姓名、手机、邮箱、密码）→ required: true

### 校验规则
- 手机号 → pattern: "^1[3-9]\\d{9}$"
- 邮箱 → type: "email"
- 密码 → minLength: 8
- 数字 → type: "number", min/max

### 长度限制
- 姓名：maxLength: 50
- 手机：maxLength: 11
- 普通文本：maxLength: 100
- 多行文本：maxLength: 500

## 输出格式
严格按照DSL格式输出JSON，不要有多余的文字说明。

## 示例

输入：
"我需要一个用户注册表单，包含用户名（必填，3-20字符）、邮箱（必填）、密码（必填，至少8位）、确认密码、手机号（选填）"

输出：
```json
{
  "formId": "user-registration",
  "title": "用户注册",
  "fields": [
    {
      "id": "username",
      "label": "用户名",
      "type": "text",
      "required": true,
      "minLength": 3,
      "maxLength": 20,
      "errorMessage": "用户名长度为3-20个字符"
    },
    {
      "id": "email",
      "label": "邮箱",
      "type": "email",
      "required": true,
      "errorMessage": "请输入正确的邮箱格式"
    },
    {
      "id": "password",
      "label": "密码",
      "type": "password",
      "required": true,
      "minLength": 8,
      "errorMessage": "密码至少8位"
    },
    {
      "id": "confirmPassword",
      "label": "确认密码",
      "type": "password",
      "required": true,
      "errorMessage": "两次密码不一致"
    },
    {
      "id": "phone",
      "label": "手机号",
      "type": "text",
      "required": false,
      "pattern": "^1[3-9]\\d{9}$",
      "errorMessage": "请输入正确的手机号"
    }
  ],
  "submitText": "注册"
}
```text

```plain
耗时：2天（编写 + 测试 + 优化）

###### 第4周：集成Claude API

```typescript
// api/generateFormDSL.ts
import Anthropic from '@anthropic-ai/sdk';
import formDSLSkill from '../skills/form-dsl-generator.md';

const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

export async function generateFormDSL(userRequirement: string): Promise<FormConfig> {
  const message = await anthropic.messages.create({
    model: 'claude-sonnet-4-20250514',
    max_tokens: 4096,
    messages: [
      {
        role: 'user',
        content: `${formDSLSkill}\n\n用户需求：${userRequirement}`,
      },
    ],
  });

  const content = message.content[0].text;
  // 提取JSON（去掉可能的markdown代码块）
  const jsonMatch = content.match(/```json\s*([\s\S]*?)\s*```/) || content.match(/{[\s\S]*}/);
  const jsonStr = jsonMatch ? jsonMatch[1] || jsonMatch[0] : content;

  return JSON.parse(jsonStr);
}

// pages/FormGenerator.tsx
export default function FormGenerator() {
  const [requirement, setRequirement] = useState('');
  const [dsl, setDSL] = useState<FormConfig | null>(null);
  const [loading, setLoading] = useState(false);

  const handleGenerate = async () => {
    setLoading(true);
    try {
      const config = await generateFormDSL(requirement);
      setDSL(config);
      message.success('表单生成成功');
    } catch (error) {
      message.error('生成失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (data: any) => {
    console.log('表单提交：', data);
    message.success('提交成功');
  };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
      {/* 左侧：输入需求 */}
      <Card title="描述表单需求">
        <TextArea
          rows={10}
          value={requirement}
          onChange={e => setRequirement(e.target.value)}
          placeholder="用自然语言描述你需要的表单，例如：&#10;我需要一个培训报名表，包含姓名（必填）、手机号（必填）、邮箱（选填）、所在部门（下拉选择）、参加课程（多选）、特殊需求（多行文本）"
        />
        <Button
          type="primary"
          loading={loading}
          onClick={handleGenerate}
          style={{ marginTop: 16 }}
        >
          生成表单
        </Button>
      </Card>

      {/* 右侧：预览表单 */}
      <Card title="表单预览">
        {dsl ? (
          <FormRenderer config={dsl} onSubmit={handleSubmit} />
        ) : (
          <Empty description="请先生成表单" />
        )}
      </Card>
    </div>
  );
}

{
  "id": "otherDepartment",
  "label": "其他部门",
  "type": "text",
  "required": true,
  "dependsOn": {
    "field": "department",
    "value": "other"
  }
}

# .github/workflows/issue-triage.yml
name: Issue Triage

on:
  issues:
    types: [opened]

jobs:
  triage:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Analyze Issue
        uses: actions/github-script@v6
        with:
          script: |
            const issue = context.payload.issue;

            // 调用Claude API分析Issue
            const analysis = await analyzeIssue(issue.body);

            // 添加标签
            await github.rest.issues.addLabels({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: issue.number,
              labels: analysis.labels
            });

            // 添加初步回复
            if (analysis.reply) {
              await github.rest.issues.createComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: issue.number,
                body: analysis.reply
              });
            }

// 分析Issue的函数
async function analyzeIssue(issueBody: string) {
  const prompt = `
分析这个GitHub Issue，判断类型并给出初步回复。

【Issue内容】
${issueBody}

【判断类型】
- bug: 程序错误
- feature: 新功能请求
- question: 使用问题
- documentation: 文档问题
- duplicate: 重复Issue

【输出JSON】
{
  "type": "bug|feature|question|documentation|duplicate",
  "priority": "high|medium|low",
  "labels": ["label1", "label2"],
  "isDuplicate": false,
  "duplicateOf": null,
  "reply": "给用户的初步回复"
}
`;

  const response = await anthropic.messages.create({
    model: 'claude-sonnet-4-20250514',
    max_tokens: 2048,
    messages: [{ role: 'user', content: prompt }],
  });

  return JSON.parse(response.content[0].text);
}

感谢反馈！我注意到您可能遇到了disabled属性的问题。

请检查：
1. Button组件是否设置了disabled={true}
2. 是否有onClick事件绑定

如果问题依然存在，请提供：
- 完整的代码示例
- 浏览器版本
- 组件库版本

参考文档：[Button API文档链接]

# .github/workflows/pr-review.yml
name: PR Review

on:
  pull_request:
    types: [opened, synchronize]

jobs:
  review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: AI Code Review
        run: |
          # 获取PR的diff
          git fetch origin ${{ github.event.pull_request.base.ref }}
          git diff origin/${{ github.event.pull_request.base.ref }}...HEAD > changes.diff

          # 调用AI分析
          node scripts/ai-review.js

      - name: Post Review Comment
        uses: actions/github-script@v6
        with:
          script: |
            const fs = require('fs');
            const review = JSON.parse(fs.readFileSync('review.json', 'utf8'));

            await github.rest.pulls.createReview({
              owner: context.repo.owner,
              repo: context.repo.repo,
              pull_request_number: context.issue.number,
              body: review.summary,
              event: review.approved ? 'APPROVE' : 'COMMENT',
              comments: review.comments
            });

// scripts/ai-review.js
async function reviewPR(diff: string) {
  const prompt = `
Review这个PR，检查：

【代码Diff】
${diff}

【检查项】
1. 代码规范（ESLint规则）
2. 是否有测试
3. 是否更新了文档
4. 是否有breaking change
5. 性能问题
6. 安全问题

【输出JSON】
{
  "approved": true/false,
  "summary": "总体评价",
  "comments": [
    {
      "path": "文件路径",
      "line": 行号,
      "body": "具体建议"
    }
  ]
}
`;

  const response = await anthropic.messages.create({
    model: 'claude-sonnet-4-20250514',
    max_tokens: 4096,
    messages: [{ role: 'user', content: prompt }],
  });

  return JSON.parse(response.content[0].text);
}

// scripts/generate-docs.ts
async function generateComponentDoc(componentCode: string) {
  const prompt = `
根据组件代码生成使用文档。

【组件代码】
${componentCode}

【输出Markdown】
包含：
1. 组件简介（一句话）
2. 何时使用
3. Props API表格
4. 三个示例（基础/进阶/完整）
5. FAQ（3个常见问题）
`;

  const response = await anthropic.messages.create({
    model: 'claude-sonnet-4-20250514',
    max_tokens: 4096,
    messages: [{ role: 'user', content: prompt }],
  });

  return response.content[0].text;
}

// 遍历所有组件
const components = fs.readdirSync('src/components');
for (const comp of components) {
  const code = fs.readFileSync(`src/components/${comp}/index.tsx`, 'utf8');
  const doc = await generateComponentDoc(code);
  fs.writeFileSync(`docs/components/${comp}.md`, doc);
}

任务时间记录表.xlsx

Sheet 1: 传统方式
| 任务名 | 日期 | 开始时间 | 结束时间 | 耗时(小时) | 备注 |
|--------|------|----------|----------|------------|------|
| 用户表单 | 2024-02-10 | 09:00 | 14:20 | 5.33 | 包含调试 |
| 商品表单 | 2024-02-11 | 09:00 | 13:50 | 4.83 | |
| 订单表单 | 2024-02-12 | 09:00 | 14:30 | 5.50 | |
| 平均 | | | | 5.22 | |

Sheet 2: AI辅助方式
| 任务名 | 日期 | 开始时间 | 结束时间 | 耗时(小时) | 备注 |
|--------|------|----------|----------|------------|------|
| 用户表单 | 2024-02-15 | 09:00 | 11:20 | 2.33 | 用Skill生成 |
| 商品表单 | 2024-02-16 | 09:00 | 11:10 | 2.17 | |
| 订单表单 | 2024-02-17 | 09:00 | 11:30 | 2.50 | |
| 平均 | | | | 2.33 | |

Sheet 3: 对比分析
| 指标 | 传统方式 | AI方式 | 提升 |
|------|----------|--------|------|
| 平均耗时 | 5.22小时 | 2.33小时 | 55% |
| 最快速度 | 4.83小时 | 2.17小时 | 55% |
| 最慢速度 | 5.50小时 | 2.50小时 | 55% |

#!/bin/bash
# compare_quality.sh

echo "正在分析代码质量..."

# 分析改造前的代码
sonar-scanner \
  -Dsonar.projectKey=project-before \
  -Dsonar.sources=src/before \
  -Dsonar.host.url=http://localhost:9000

# 保存结果
curl -s "http://localhost:9000/api/measures/component?component=project-before&metricKeys=bugs,code_smells,duplicated_lines_density,coverage" \
  > before_metrics.json

# 分析改造后的代码
sonar-scanner \
  -Dsonar.projectKey=project-after \
  -Dsonar.sources=src/after \
  -Dsonar.host.url=http://localhost:9000

curl -s "http://localhost:9000/api/measures/component?component=project-after&metricKeys=bugs,code_smells,duplicated_lines_density,coverage" \
  > after_metrics.json

# 对比
node compare.js before_metrics.json after_metrics.json

// compare.js
const fs = require('fs');

const before = JSON.parse(fs.readFileSync(process.argv[2], 'utf8'));
const after = JSON.parse(fs.readFileSync(process.argv[3], 'utf8'));

function getMetric(data, key) {
  const measure = data.component.measures.find(m => m.metric === key);
  return parseFloat(measure.value);
}

console.log('代码质量对比：\n');

const metrics = [
  { key: 'bugs', name: 'Bug数量', unit: '个', lower: true },
  { key: 'code_smells', name: '代码坏味道', unit: '个', lower: true },
  { key: 'duplicated_lines_density', name: '代码重复率', unit: '%', lower: true },
  { key: 'coverage', name: '测试覆盖率', unit: '%', lower: false },
];

metrics.forEach(metric => {
  const beforeVal = getMetric(before, metric.key);
  const afterVal = getMetric(after, metric.key);
  const change = metric.lower
    ? ((beforeVal - afterVal) / beforeVal * 100).toFixed(1)
    : ((afterVal - beforeVal) / beforeVal * 100).toFixed(1);
  const arrow = metric.lower
    ? (afterVal < beforeVal ? '↓' : '↑')
    : (afterVal > beforeVal ? '↑' : '↓');

  console.log(`${metric.name}：`);
  console.log(`  改造前：${beforeVal}${metric.unit}`);
  console.log(`  改造后：${afterVal}${metric.unit}`);
  console.log(`  变化：${arrow} ${Math.abs(change)}%\n`);
});

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>效率提升计算器</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 50px auto;
      padding: 20px;
    }
    .input-group {
      margin: 20px 0;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    input {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    button {
      background: #1890ff;
      color: white;
      padding: 12px 24px;
      font-size: 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 20px;
    }
    button:hover {
      background: #40a9ff;
    }
    .result {
      margin-top: 30px;
      padding: 20px;
      background: #f0f2f5;
      border-radius: 4px;
    }
    .result h2 {
      margin-top: 0;
    }
    .metric {
      margin: 10px 0;
      padding: 10px;
      background: white;
      border-left: 4px solid #52c41a;
    }
  </style>
</head>
<body>
  <h1>AI效率提升计算器</h1>

  <div class="input-group">
    <label>传统方式耗时（小时）：</label>
    <input type="number" id="timeBefore" placeholder="例如：5.5" step="0.1">
  </div>

  <div class="input-group">
    <label>AI辅助耗时（小时）：</label>
    <input type="number" id="timeAfter" placeholder="例如：2.3" step="0.1">
  </div>

  <div class="input-group">
    <label>每月任务数量：</label>
    <input type="number" id="tasksPerMonth" placeholder="例如：20" step="1">
  </div>

  <div class="input-group">
    <label>初始投入时间（小时）：</label>
    <input type="number" id="setupTime" placeholder="例如：16" step="1">
  </div>

  <button onclick="calculate()">计算</button>

  <div id="result" class="result" style="display: none;">
    <h2>计算结果</h2>
    <div class="metric">
      <strong>效率提升：</strong><span id="efficiency"></span>
    </div>
    <div class="metric">
      <strong>每个任务节省：</strong><span id="perTask"></span>
    </div>
    <div class="metric">
      <strong>每月节省：</strong><span id="monthly"></span>
    </div>
    <div class="metric">
      <strong>投资回报期：</strong><span id="payback"></span>
    </div>
    <div class="metric">
      <strong>年度节省：</strong><span id="yearly"></span>
    </div>
  </div>

  <script>
    function calculate() {
      const timeBefore = parseFloat(document.getElementById('timeBefore').value);
      const timeAfter = parseFloat(document.getElementById('timeAfter').value);
      const tasksPerMonth = parseInt(document.getElementById('tasksPerMonth').value);
      const setupTime = parseFloat(document.getElementById('setupTime').value);

      if (!timeBefore || !timeAfter || !tasksPerMonth || !setupTime) {
        alert('请填写所有字段');
        return;
      }

      const timeSaved = timeBefore - timeAfter;
      const efficiency = (timeSaved / timeBefore * 100).toFixed(1);
      const monthlySaved = timeSaved * tasksPerMonth;
      const paybackPeriod = (setupTime / monthlySaved).toFixed(2);
      const yearlySaved = monthlySaved * 12;

      document.getElementById('efficiency').textContent = `${efficiency}%`;
      document.getElementById('perTask').textContent = `${timeSaved.toFixed(1)}小时`;
      document.getElementById('monthly').textContent = `${monthlySaved.toFixed(1)}小时（${(monthlySaved/8).toFixed(1)}天）`;
      document.getElementById('payback').textContent = `${paybackPeriod}个月`;
      document.getElementById('yearly').textContent = `${yearlySaved.toFixed(1)}小时（${(yearlySaved/8).toFixed(1)}天）`;

      document.getElementById('result').style.display = 'block';
    }
  </script>
</body>
</html>