@me-framework/me-sku-editor

一个功能强大的 Vue 3 商品规格 SKU 编辑器。

特性

• 🎨 多规格类型 - 支持文字、颜色、图片三种规格类型
• 🛠️ 可视化编辑 - 直观的拖拽式规格管理
• 📊 智能表格 - 自动生成 SKU 组合、单元格合并
• 📥 数据导入 - 支持 Excel / JSON 格式导入
• 📤 数据导出 - 支持 Excel / JSON 格式导出
• 🔀 拖拽排序 - 规格和属性支持拖拽排序，自动更新 sort 字段
• 📋 批量编辑 - 一键批量设置 SKU 属性
• 👁️ 列可见性 - 自定义显示/隐藏表格列
• 💾 记忆功能 - 修改规格时保留已编辑的 SKU 数据
• ✅ 数据校验 - 灵活的校验系统，支持自定义规则，区分错误和警告
• 🔄 双格式支持 - 内部格式（ID）和外部格式（名称）自动转换

安装

npm install @me-framework/me-sku-editor

快速开始

1. 安装依赖

由于 me-sku-editor 使用 peerDependencies，你需要在项目中安装以下依赖：

npm install vue@^3.4.0 element-plus@^2.14.0 @element-plus/icons-vue@^2.3.0 vxe-table@^4.19.0 vxe-pc-ui@^4.15.0

2. 在 Vue 项目中使用

方式一：按需引入（推荐）

<script setup lang="ts">
import { ref } from 'vue'
import { SkuEditor } from '@me-framework/me-sku-editor'
import '@me-framework/me-sku-editor/style.css'
import type { Spec, SkuRow } from '@me-framework/me-sku-editor'

// 规格数据
const specs = ref<Spec[]>([
  {
    id: 'spec-1',
    name: '颜色',
    type: 'color',
    sort: 0,
    attributes: [
      { id: 'attr-1-1', name: '红色', color: '#ff0000', image: '', sort: 0, content: '' },
      { id: 'attr-1-2', name: '蓝色', color: '#0000ff', image: '', sort: 1, content: '' }
    ]
  },
  {
    id: 'spec-2',
    name: '尺码',
    type: 'text',
    sort: 1,
    attributes: [
      { id: 'attr-2-1', name: 'S', color: '', image: '', sort: 0, content: '' },
      { id: 'attr-2-2', name: 'M', color: '', image: '', sort: 1, content: '' },
      { id: 'attr-2-3', name: 'L', color: '', image: '', sort: 2, content: '' }
    ]
  }
])

// SKU 数据
const skuData = ref<SkuRow[]>([])
</script>

<template>
  <div>
    <h2>SKU 编辑器</h2>
    <SkuEditor v-model:specs="specs" v-model:sku-data="skuData" />
  </div>
</template>

方式二：全局注册

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

// 引入 Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 引入 VXE Table
import VxeUI from 'vxe-pc-ui'
import 'vxe-pc-ui/es/style.css'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

// 引入 me-sku-editor 及其样式
import MeSkuEditor from '@me-framework/me-sku-editor'
import '@me-framework/me-sku-editor/style.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(VxeUI)
app.use(VXETable)
app.use(MeSkuEditor) // 全局注册

// 注册 Element Plus 图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.mount('#app')

API 文档

SkuEditor Props

| 属性 | 说明 | 类型 | 默认值 | |------|------|------|--------| | v-model:specs | 规格数据（双向绑定） | Spec[] | [] | | v-model:sku-data | SKU 数据（双向绑定） | SkuRow[] | [] | | validation-rules | 校验规则配置 | ValidationRules | {} |

SkuEditor Methods（通过 ref 调用）

<script setup lang="ts">
import { ref } from 'vue'
import { SkuEditor } from '@me-framework/me-sku-editor'
import type { InstanceType } from 'vue'

const skuEditorRef = ref<InstanceType<typeof SkuEditor>>()

// 导出 Excel
const handleExportExcel = () => {
  skuEditorRef.value?.exportExcel()
}

// 导出 JSON
const handleExportJson = () => {
  skuEditorRef.value?.exportJson()
}

// 校验数据
const handleValidate = () => {
  const result = skuEditorRef.value?.validateSkuData()
  console.log(result)
}
</script>

<template>
  <SkuEditor ref="skuEditorRef" v-model:specs="specs" v-model:sku-data="skuData" />
</template>

类型定义

import type {
  Spec,
  SpecAttribute,
  SpecType,
  AttributeValue,
  SkuRow,
  ValidationRules,
  ValidationResult
} from '@me-framework/me-sku-editor'

文档

• 快速开始指南 - 5 分钟上手教程
• 使用文档 - 完整功能说明
• 开发指南 - 二次开发指南

项目结构

src/
├── components/sku/        # SKU 编辑器组件
├── composables/sku/       # SKU 相关逻辑
├── types/sku/            # SKU 类型定义
└── constants/sku.ts      # SKU 常量定义

技术栈

• Vue 3 + TypeScript
• Element Plus
• VXE Table
• XLSX
• Sortable.js

本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build:lib

# 构建 demo
npm run build:demo

# 完整构建（lib + demo）
npm run build

最近更新

• 移除了兼容模式，统一使用外部格式（spec_json）处理 SKU 数据
• 新增了数据校验系统，支持自定义校验规则
• 重构了类型定义结构，更清晰的组织
• 优化了数据同步机制
• 新增了打印数据功能
• SkuGrid 支持行配置属性用于高亮

许可证

MIT