@me-framework/me-sku-editor 1.0.1

package/document/prompt/sku-editor.md

@@ -0,0 +1,268 @@
+# SKU 编辑器开发提示词
+
+## 项目概述
+
+这是一个功能强大的 Vue 3 商品规格 SKU 编辑器，用于电商平台管理商品规格和库存。
+
+## 技术栈
+
+- Vue 3 + TypeScript (Composition API, `<script setup>`)
+- Element Plus UI 组件库
+- VXE Table v4 (表格组件)
+- XLSX (Excel 导入导出)
+- Sortable.js (拖拽排序)
+
+## 核心功能
+
+### 1. 规格管理 (Spec Management)
+- **规格类型**: 支持文字(text)、颜色(color)、图片(image)三种类型
+- **规格操作**: 新增、编辑、删除规格
+- **属性操作**: 每个规格下可添加多个属性值
+- **拖拽排序**: 规格和属性都支持拖拽调整顺序
+- **命名校验**: 规格名不能与系统保留字段重名，规格名不能重复
+- **命名规范**: 规格名和属性名保存时自动 trim 去除前后空格
+- **属性验证**: 属性名不能为空，同一规格下属性名不能重复
+- **折叠展开**: 规格列表支持折叠/展开，方便管理多个规格
+- **快捷操作**:
+  - 颜色类型属性可在列表中直接通过颜色选择器修改
+  - 点击属性标签快速打开编辑对话框
+  - 点击标签关闭图标删除属性（带确认）
+
+保留字段列表:
+```typescript
+const RESERVED_NAMES = ['SKU编号', '销售价', '市场价', '成本价', '重量', '体积', '条形码', '状态', '步长', '起购数', '限购数']
+```
+
+### 2. SKU 表格 (SkuGrid)
+- **自动生成**: 根据规格组合自动生成 SKU 笛卡尔积
+- **单元格合并**: 相同规格值的单元格自动合并显示
+- **列可见性**: 用户可自定义显示/隐藏表格列
+- **数据保留**: 修改规格时保留已编辑的 SKU 数据
+
+### 3. 批量编辑 (Batch Edit)
+支持批量设置以下字段:
+- 销售价、市场价、成本价
+- 重量、体积
+- 状态
+- 步长、起购数、限购数
+
+### 4. 导入导出 (Import/Export)
+- **导出**: Excel 格式、JSON 格式
+- **导入**: Excel 格式、JSON 格式
+- **拖拽导入**: 支持拖拽文件到区域导入
+
+### 5. 数据输出
+- 控制台格式化输出规格和 SKU 数据
+- 支持数据库格式的 SKU 数据导出
+
+## 数据结构
+
+### 规格类型 (SpecType)
+```typescript
+type SpecType = 'text' | 'color' | 'image'
+```
+
+### 规格属性 (SpecAttribute)
+```typescript
+interface SpecAttribute {
+  id: string
+  name: string
+  value: AttributeValue | string  // 可以是对象或字符串
+}
+```
+
+### 属性类型详解
+
+属性的 `value` 格式取决于所属规格的 `type`：
+
+#### 1. 文字类型 (text)
+- **值格式**: 可以是纯字符串，也可以是任意 JSON 对象
+- **UI 展示**: 仅显示属性名称标签
+- **编辑方式**: 文本域输入，支持多行 JSON
+- **示例**:
+  ```typescript
+  // 简单字符串
+  { name: "S", value: "small" }
+  // JSON 对象
+  {
+    name: "S",
+    value: {
+      size: "small",
+      width: 40,
+      height: 60,
+      weight: 200,
+      measurements: { chest: 90, length: 65 }
+    }
+  }
+  ```
+
+#### 2. 颜色类型 (color)
+- **值格式**: 对象格式 `{ code: string }`
+- **UI 展示**: 颜色选择器 + 属性名称标签
+- **编辑方式**: Element Plus 颜色选择器
+- **示例**:
+  ```typescript
+  { name: "红色", value: { code: "#ff0000" } }
+  { name: "蓝色", value: { code: "#0000ff", rgb: "rgb(0, 0, 255)" } }
+  ```
+- **解析逻辑**: 支持多种格式解析
+  - 对象: `value.code` 或 `value.color`
+  - JSON 字符串: 尝试解析后取 `code` 或 `color`
+  - 纯字符串: 直接作为颜色值
+  - 默认值: `#ccc`
+
+#### 3. 图片类型 (image)
+- **值格式**: 对象格式 `{ url: string }`
+- **UI 展示**: 28x28px 缩略图 + 属性名称标签，点击可预览大图
+- **编辑方式**: 图片上传组件，支持预览和删除
+- **存储格式**: base64 编码的 data URL
+- **示例**:
+  ```typescript
+  { name: "红色款", value: { url: "data:image/jpeg;base64,/9j/4AAQSkZJRg..." } }
+  ```
+- **解析逻辑**:
+  - 对象: `value.url` 或 `value.image`
+  - JSON 字符串: 尝试解析后取 `url` 或 `image`
+  - 纯字符串: 直接作为图片 URL
+
+### 属性验证规则
+- **属性名不能为空**: 必填验证
+- **属性名 Trim 处理**: 保存时自动去除前后空格，验证和重名检查都基于 trim 后的值
+- **属性名不能重复**: 同一规格下的属性名必须唯一（基于 trim 后的值比较）
+- **删除确认**: 删除属性前弹出确认对话框
+
+### 属性交互功能
+- **快速编辑颜色**: 在规格列表中可直接使用颜色选择器修改颜色属性，无需打开对话框
+- **标签点击编辑**: 点击属性标签打开编辑对话框
+- **拖拽排序**: 属性可拖拽调整顺序，影响 SKU 生成顺序
+- **折叠/展开**: 规格支持折叠，隐藏属性列表
+
+### 规格 (Spec)
+```typescript
+interface Spec {
+  id: string
+  name: string
+  type: SpecType
+  attributes: SpecAttribute[]
+}
+```
+
+### SKU 行数据 (SkuRow)
+```typescript
+interface SkuRow {
+  id: string
+  specs: { [key: string]: string }  // { specId: attrId }
+  skuNo: string
+  skuName: string
+  image?: string
+  salePrice: number
+  marketPrice?: number
+  costPrice?: number
+  weight?: number
+  volume?: number
+  barcode?: string
+  status: number
+  sort: number
+  step: number
+  minBuyLimit: number
+  maxBuyLimit: number
+}
+```
+
+## 组件架构
+
+```
+SkuEditor (主组件)
+├── SpecSection (规格管理区域)
+├── SkuGrid (SKU 表格)
+├── SpecDialog (规格编辑对话框)
+├── AttrDialog (属性编辑对话框)
+└── BatchEditDialog (批量编辑对话框)
+```
+
+## Composables
+
+| Composable | 功能 |
+|-----------|------|
+| useSkuGenerator | SKU 数据生成、笛卡尔积计算 |
+| useColumnVisibility | 列可见性管理 |
+| useSortable | 拖拽排序功能 |
+| useImportExport | 导入导出功能 |
+| useMergeCells | 表格单元格合并 |
+
+## 关键实现要点
+
+### 1. SKU 生成逻辑
+- 使用笛卡尔积生成所有规格组合
+- 修改规格时，通过 `specs` 和 `attrIds` 匹配保留已有数据
+- 示例: 颜色(红/蓝) + 尺寸(S/M/L) = 6 个 SKU
+
+### 2. 单元格合并
+- 使用 VXE Table 的 `span-method` 实现
+- 相同规格值的行合并显示
+- 动态计算合并跨度
+
+### 3. 拖拽排序
+- 使用 Sortable.js 实现
+- 规格列表可拖拽
+- 每个规格的属性列表可独立拖拽
+
+### 4. Excel 导入导出
+- 使用 XLSX 库
+- 导入时解析规格和 SKU 数据
+- 导出时保留格式和数据
+
+### 5. 命名 Trim 处理
+- **规格名 Trim**: 保存规格时自动对名称进行 `trim()` 处理，去除前后空格
+- **属性名 Trim**: 保存属性时自动对名称进行 `trim()` 处理，去除前后空格
+- **验证基于 Trim 后的值**: 重名检查、保留字段检查都基于 trim 后的值进行比较
+- **示例**: 用户输入 `"  颜色  "` 会被保存为 `"颜色"`
+
+### 6. 属性值处理
+- **多格式兼容**: 属性值支持字符串、对象、JSON 字符串等多种格式
+- **自动解析**: 读取属性值时自动尝试解析 JSON 字符串
+- **类型安全**: 根据规格类型动态调整编辑界面和验证逻辑
+- **编辑模式**: 编辑属性时，对象值会被格式化为美化的 JSON 字符串展示在文本域中
+- **保存优化**: 保存时根据规格类型构建合适的属性值对象
+
+## 开发规范
+
+### 代码风格
+- 使用 `<script setup lang="ts">` 语法
+- TypeScript 类型定义完整
+- 函数注释使用 JSDoc 格式
+
+### 文件结构
+```
+src/
+├── components/       # Vue 组件
+├── composables/      # 组合式函数
+├── types/            # TypeScript 类型定义
+└── utils/            # 工具函数
+```
+
+## 示例数据
+
+默认示例规格:
+```
+颜色 (color)
+  ├── 红色 (#ff0000)
+  └── 蓝色 (#0000ff)
+
+尺寸 (text)
+  ├── S
+  ├── M
+  └── L
+```
+
+## 注意事项
+
+1. **保留字段**: 新增规格时检查是否与保留字段重名
+2. **Trim 处理**: 规格名和属性名必须 trim 后保存，验证也基于 trim 后的值
+3. **数据保留**: 修改规格时尽可能保留用户已输入的 SKU 数据
+4. **性能**: 规格组合数量多时注意表格渲染性能
+5. **类型安全**: 完整的 TypeScript 类型定义
+
+---
+
+*此提示词用于指导 AI 助手理解和开发/维护 ME SKU Editor 项目*