SCP Img to Page 技能

专门针对 aheadofcow_web 前端项目的代码生成和修改技能。

⚠️ 重要约束

本技能仅操作前端项目，严禁修改后端代码！

📋 技能描述

本技能专门用于 aheadofcow_web 前端项目的页面生成、修改和维护。

工作目录：/home/admin/codespace/scp/aheadofcow_web

适用场景：

• 根据 UI 截图生成新页面
• 修改现有页面的列结构
• 统一页面样式规范
• 配置前端路由

🎯 核心能力

1. 图片分析：识别页面结构、表格列、按钮、表单等 UI 元素（如图片分析服务不可用，则根据截图视觉内容或用户描述手动分析）
2. 代码生成：生成符合项目规范的 React 组件代码
3. 路由配置：自动添加前端路由配置（src/router/index.js）
4. 编译检查：确保生成的代码可以成功编译
5. 文件清单：输出新增/修改文件列表
6. Mock 数据：列表页面自动生成 Mock 数据（15 条，含唯一 id，含筛选和分页）

📁 项目结构

/home/admin/codespace/scp/aheadofcow_web/
├── src/
│   ├── views/                    # 页面组件
│   │   └── requirements-planning/ # 需求计划模块
│   │       ├── new-retail-reporting/
│   │       │   └── index.jsx
│   │       └── new-retail-plan/
│   │           ├── index.jsx
│   │           └── components/
│   └── router/                   # 路由配置
│       └── index.js
├── package.json
└── ...

🔧 使用方式

基本用法

用户提供截图后，AI 自动：

1. 分析图片中的页面结构（如图片分析服务不可用，则根据截图视觉内容手动分析，重点关注：表格列名、筛选字段、操作按钮）
2. 生成对应的 React 代码（仅前端）
3. 创建必要的文件（仅 aheadofcow_web/ 目录）
4. 配置前端路由
5. 列表页面自动生成 Mock 数据（15 条，含唯一 id，含筛选和分页）
6. 检查编译
7. 输出文件清单

图片分析服务不可用时的处理

当 image 工具调用失败（如 API key 错误）时：

1. 不要中断流程，继续执行后续步骤
2. 手动分析截图：根据用户提供的截图，目视识别：
• 页面标题
• 表格列（列名、顺序、类型）
• 筛选区字段（字段名、类型）
• 操作按钮（新增、编辑、删除、导入、导出等）
3. 按正常流程生成代码，确保其他规则正常执行
4. 列表页面必须添加 Mock 数据

用户指令示例

帮我根据这张截图生成前端页面

参照这个页面的样式，生成 XXX 功能页面

修改 XXX 页面，改成和图中一样的列结构

📐 生成规范

1. 页面结构规范

import React, { memo, useState, useEffect, useRef } from 'react'
import { Button, Space, App, Table, Tag, InputNumber, Select } from 'antd'
import { AuthButton } from '@/components/AuthBtn'
import PageTitle from '@/components/PageTitle/Index'

const View = memo(() => {
  const { message } = App.useApp()
  
  // 状态定义
  const [loading, setLoading] = useState(false)
  const [dataList, setDataList] = useState([])
  
  // Mock 数据生成（仅列表页面）
  const generateMockData = () => { ... }
  
  // 数据查询
  const queryData = async () => { ... }
  
  // 初始化
  useEffect(() => { queryData() }, [])
  
  // 操作函数
  const handleSave = async () => { ... }
  
  return (
    <>
      <PageTitle>页面标题</PageTitle>
      <div className='pageContent'>
        {/* 页面内容 */}
      </div>
    </>
  )
})

export default View

> ⚠️ 注意：严禁导入或生成 @/api/ 相关的 API 接口代码。

2. 表格列类型映射

3. 按钮类型规范

4. 样式规范

// 页面布局
<>
  <PageTitle>标题</PageTitle>
  <div className='pageContent'>
    {/* 内容 */}
  </div>
</>

// 顶部/底部操作区样式
{
  marginBottom: 16,
  padding: '16px 24px',
  background: '#fafafa',
  borderRadius: 4,
  display: 'flex',
  alignItems: 'center',
  gap: 12
}

📝 文件结构规范

目录结构

src/views/模块名/页面名/
├── index.jsx              # 主页面
└── components/            # 子组件（可选）
    ├── submit.jsx        # 提交对话框
    └── mark.jsx          # 标记对话框

> ⚠️ 注意：不创建 src/api/ 目录下的任何文件。

路由配置

// src/router/index.js
{
  element: <Layout />,
  meta: { title: '需求计划', requiresAuth: true },
  children: [
    {
      path: '/new-retail-reporting',
      Component: lazy(() => import('@/views/requirements-planning/new-retail-reporting')),
      meta: { title: '新零售需求提报', requiresAuth: true }
    }
  ]
}

🔄 工作流程

Step 1: 图片分析

• 提取页面标题
• 识别表格列（列名、类型、宽度）
• 识别顶部操作区（下拉框、按钮）
• 识别底部操作区（按钮）
• 识别特殊组件（对话框、表单等）

Step 2: 代码生成（仅前端）

• 创建页面主文件（src/views/xxx/index.jsx）
• 创建子组件（src/views/xxx/components/*.jsx）
• 列表页面：生成 Mock 数据函数（15 条，含唯一 id）
• 配置前端路由（src/router/index.js）

> ⚠️ 严禁：不生成任何 src/api/ 目录下的 API 接口文件。

Step 3: 代码规范检查

• 使用 memo 包裹组件
• useState 定义状态
• useEffect 处理初始化
• async/await 处理异步
• 统一样式结构

Step 4: 编译检查

• 启动前端开发服务器（如未启动）
• 等待 webpack 编译完成
• 检查是否有编译错误
• 修复语法问题

Step 5: 输出文件清单

必须输出以下格式的文件清单：

## 📁 文件清单

### 新增文件（X 个）
| 文件路径 | 说明 |
|----------|------|
| src/views/xxx/index.jsx | 主页面（含 Mock 数据） |
| src/views/xxx/components/submit.jsx | 提交组件 |

### 修改文件（X 个）
| 文件路径 | 修改内容 |
|----------|----------|
| src/router/index.js | 添加路由配置 |

> ⚠️ 注意：文件清单中不应包含 src/api/ 目录的文件。

🎨 权限规范

AuthButton 使用

<AuthButton 
  authCode="模块_功能_操作" 
  onClick={handleXXX}
  disabled={条件}
>
  按钮文字
</AuthButton>

权限码命名规则

格式：模块名_功能名_操作名

示例：

• new_retail_reporting_save
• new_retail_reporting_submit
• new_retail_plan_export

🔌 特殊功能处理

1. Mock 数据生成（仅列表页面）

适用场景：

• ✅ 列表页面（有表格、展示多行数据）→ 必须生成 Mock 数据
• ❌ 表单页面（单个表单、详情页）→ 不生成 Mock 数据
• ❌ 统计页面（图表、卡片）→ 不生成 Mock 数据

基本结构：

// 在组件外部定义（与 View 同级），方便复用和测试
const generateMockData = () => {
  // 1. 定义字典数据（枚举/字典字段）
  const warehouses = ['北京仓', '上海仓', '广州仓']
  const skus = [
    { code: 'SKU001', name: '纯牛奶' },
    { code: 'SKU002', name: '酸奶' },
    { code: 'SKU003', name: '草莓味酸奶' },
    { code: 'SKU004', name: '高钙奶' },
    { code: 'SKU005', name: '脱脂牛奶' }
  ]
  const types = ['生产', '调拨', '退货']

  // 2. 循环生成数据（15 条）
  const mockData = []
  for (let i = 1; i <= 15; i++) {
    const planDay = String(10 + ((i * 3) % 10)).padStart(2, '0')
    const productionDate = `2026-04-${planDay}`
    const warrantyDays = 25 + ((i * 5) % 6)
    const warrantyDate = utils.dayjsIns(productionDate).add(warrantyDays, 'day').format('YYYY-MM-DD')

    mockData.push({
      // 唯一 id（使用业务前缀，非 MOCK）
      id: `业务前缀${String(i).padStart(6, '0')}`,
      // 字典字段：循环取值
      warehouseName: warehouses[(i - 1) % warehouses.length],
      skuCode: skus[(i - 1) % skus.length].code,
      skuName: skus[(i - 1) % skus.length].name,
      // 日期字段：用 dayjs 计算派生日期
      planMonth: '202604',
      planProductionDate: productionDate,
      warrantyDays: warrantyDays,
      warrantyDate: warrantyDate,
      // 枚举字段
      type: types[i % types.length],
      // 数值字段
      planInboundQty: 500 + ((i * 200) % 1500)
    })
  }
  return mockData
}

Mock 数据使用方式（handleSearch 完整示例）：

const handleSearch = () => {
  setLoading(true)
  const values = form.getFieldsValue()
  const allMockData = generateMockData()
  let filtered = allMockData

  // 根据表单筛选
  if (values.skuCode) {
    filtered = filtered.filter(item => item.skuCode.includes(values.skuCode))
  }
  if (values.planProductionDate) {
    const dateStr = utils.dayjsIns(values.planProductionDate).format('YYYY-MM-DD')
    filtered = filtered.filter(item => item.planProductionDate === dateStr)
  }
  if (values.planMonth) {
    filtered = filtered.filter(item => item.planMonth.includes(values.planMonth))
  }

  // 分页
  const total = filtered.length
  const start = (query.pageNum - 1) * query.pageSize
  const end = start + query.pageSize
  const paginatedData = filtered.slice(start, end)

  // 模拟网络延迟（300ms）
  setTimeout(() => {
    setTableData({ columns, data: paginatedData })
    setQuery(prev => ({ ...prev, total }))
    setLoading(false)
  }, 300)
}

// 初始化加载
useEffect(() => {
  handleSearch()
}, [])

注意事项：

• 每条数据必须包含唯一 id 字段（用于 rowKey），使用业务前缀而非 MOCK
• Mock 数据量建议 15 条
• generateMockData 定义在组件外部，与 View 同级
• 数值字段用 (i * N) % M 模式生成变化值
• 状态/枚举字段用 i % array.length 循环取值
• 日期字段用 utils.dayjsIns(date).add(days, 'day').format('YYYY-MM-DD') 计算派生日期
• handleSearch 为同步函数（非 async），不区分开发/生产环境，直接写死使用 mock
• 添加 300ms setTimeout 模拟 loading 效果
• 支持表单筛选过滤和分页切片
• 非列表页面不要生成 Mock 数据

2. 分页功能实现

参考商品主数据页面 (src/views/main-data/product-data/index.jsx)：

状态定义：

const [query, setQuery] = useState({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

分页函数：

const pageChange = (pageNum, pageSize) => {
  setQuery(prev => ({ ...prev, pageNum, pageSize }))
  handleSearch()
}

Table 组件配置：

<Table
  columns={tableData.columns}
  data={tableData.data}
  rowKey={'id'}
  pageChange={pageChange}
  pagination={{ 
    pageNum: query.pageNum, 
    pageSize: query.pageSize, 
    total: query.total 
  }}
/>

Mock 数据分页处理（已合并到 handleSearch 中）：

const start = (query.pageNum - 1) * query.pageSize
const end = start + query.pageSize
const paginatedData = filtered.slice(start, end)

3. 导入组件使用

使用 UploadRender 组件（推荐）：

import UploadRender from '@/cn-components/upload-render'

<UploadRender
  dataCode='模块导入模板编码'
  btnProps={{ type: 'normal', childrenText: '导入' }}
  otherTemplateParams={{ ...otherFilters }}
  onOK={() => {
    queryData() // 导入成功后刷新列表
  }}
/>

筛选条件处理：

const otherFilters = useMemo(() => {
  let obj = { 关键参数：值 }
  return obj
}, [依赖项])

替代方案：手动创建 input（旧方式，不推荐）：

const handleImport = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.xlsx,.xls'
  input.onchange = async (e) => { ... }
  input.click()
}

4. 导出功能实现

组件引入：

import Download from '@/cn-components/download'

场景 1：统一导出按钮（表格上方）

适用于导出当前筛选条件下的所有数据：

// 筛选条件处理
const otherFilters = useMemo(() => {
  let obj = query.condition || {}
  delete obj.condition
  return { ...obj }
}, [query])

// 顶部操作区
<div style={{ 
  marginBottom: 16, 
  display: 'flex', 
  justifyContent: 'space-between',
  alignItems: 'center'
}}>
  <div style={{ fontSize: 16, fontWeight: 500 }}>数据列表</div>
  <Download 
    btnText={'导出'} 
    params={{ 
      dataCode: '模块导出编码',
      ...otherFilters  // 传递筛选条件
    }} 
  />
</div>

场景 2：行级导出按钮（操作列）

适用于导出单行数据或某版本详细信息：

// 表格列定义
{
  title: '操作',
  key: 'action',
  width: 280,
  render: (_, record) => (
    <Space size="small">
      <Button size="small" onClick={() => handleView(record)}>
        查看
      </Button>
      <Download 
        btnText="导出"
        params={{
          dataCode: '模块导出编码',
          rollingVersion: record.rollingVersion  // 传递行数据
        }}
      />
    </Space>
  )
}

参数说明：

组件特性：

• ✅ 自动处理下载逻辑（无需手动创建 标签）
• ✅ 支持加载状态（导出中...）
• ✅ 支持错误提示
• ✅ 从响应头获取文件名
• ✅ 支持权限控制

替代方案：手动 API 调用（旧方式，不推荐）：

const handleExport = async (record) => {
  try {
    const blob = await exportXXX({ rollingVersion: record.rollingVersion })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `文件名_${record.rollingVersion}.xlsx`
    link.click()
    window.URL.revokeObjectURL(url)
    message.success('导出成功')
  } catch (error) {
    message.error('导出失败')
  }
}

8. 文件下载

使用 Download 组件（推荐），不手动编写下载逻辑。

9. 文件上传

使用 UploadRender 组件（推荐），不手动编写上传逻辑。

10. 对话框组件

子组件：

import { useImperativeHandle } from 'react'

const Dialog = memo(({ onRef, onSubmit }) => {
  const [visible, setVisible] = useState(false)
  
  const open = (record) => {
    setCurrent(record)
    setVisible(true)
  }
  
  const close = () => {
    setVisible(false)
  }
  
  useImperativeHandle(onRef, () => ({ open, close }))
  
  return <Modal open={visible} ... />
})

父组件调用：

const submitDialog = useRef()

<SubmitDialog onRef={submitDialog} onSubmit={handleSubmit} />

// 调用
submitDialog.current.open(record)

✅ 检查清单

生成完成后必须检查：

• [ ] 页面使用 组件
• [ ] 内容区域使用 className='pageContent'
• [ ] 组件使用 memo 包裹
• [ ] 导入路径正确
• [ ] 未导入或生成 API 接口（src/api/）✅
• [ ] 路由配置已添加
• [ ] 编译成功无错误
• [ ] 输出文件清单表格
• [ ] 未修改后端代码 ✅
• [ ] 表格如有数据列表，添加分页功能（pageChange + pagination）
• [ ] 列表页面已生成 Mock 数据（15 条，含唯一 id，含筛选和分页）
• [ ] 非列表页面未生成 Mock 数据
• [ ] 如有导入功能，使用 UploadRender 组件（非手动 input）
• [ ] 如有导出功能，优先使用 Download 组件（非手动 API 调用）

⚠️ 红线约束

严禁操作

允许操作

禁止操作

📚 示例

完整示例参考 examples/ 目录。

🚀 版本

• 版本：1.3
• 技能名称：scp-img-to-page
• 创建时间：2026-04-03
• 更新时间：2026-04-08
• 适用项目：aheadofcow_web（React + Ant Design）
• 工作目录：/home/admin/codespace/scp/aheadofcow_web
• 作者：AI Assistant

📞 注意事项

1. API 接口：❌ 严禁生成或导入任何 src/api/ 目录下的 API 接口文件
2. 权限配置：生成的权限码需要在后端权限系统中配置
3. 路由权限：新增路由需要在后端权限表中配置对应的菜单权限
4. 编译检查：每次修改后必须检查编译是否成功
5. 文件清单：必须输出新增/修改文件清单
6. 分页功能：新增页面如有表格，默认添加分页功能（参考商品主数据页面）
7. Mock 数据：
• ✅ 列表页面：必须生成 Mock 数据（15 条，含唯一 id，含筛选和分页）
• ❌ 非列表页面：不生成 Mock 数据
8. 导入功能：优先使用 UploadRender 组件，而非手动创建 input 元素
9. 导出功能：优先使用 Download 组件，支持统一导出和行级导出两种场景
10. 图片分析失败：如 image 工具不可用，根据截图手动分析，继续执行流程
11. Mock 数据开发阶段直接写死：不区分开发/生产环境，handleSearch 直接使用 mock，联调时再替换为真实 API
12. Mock 数据函数位置：generateMockData 定义在组件外部，与 View 同级