@me-framework/me-sku-editor 1.0.1

package/README.en.md

@@ -0,0 +1,36 @@
+# me-sku-editor
+
+#### Description
+SKU编辑器
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

package/README.md

@@ -0,0 +1,230 @@
+# @me-framework/me-sku-editor
+
+一个功能强大的 Vue 3 商品规格 SKU 编辑器。
+
+## 特性
+
+- 🎨 **多规格类型** - 支持文字、颜色、图片三种规格类型
+- 🛠️ **可视化编辑** - 直观的拖拽式规格管理
+- 📊 **智能表格** - 自动生成 SKU 组合、单元格合并
+- 📥 **数据导入** - 支持 Excel / JSON 格式导入
+- 📤 **数据导出** - 支持 Excel / JSON 格式导出
+- 🔀 **拖拽排序** - 规格和属性支持拖拽排序，自动更新 sort 字段
+- 📋 **批量编辑** - 一键批量设置 SKU 属性
+- 👁️ **列可见性** - 自定义显示/隐藏表格列
+- 💾 **记忆功能** - 修改规格时保留已编辑的 SKU 数据
+- ✅ **数据校验** - 灵活的校验系统，支持自定义规则，区分错误和警告
+- 🔄 **双格式支持** - 内部格式（ID）和外部格式（名称）自动转换
+
+## 安装
+
+```bash
+npm install @me-framework/me-sku-editor
+```
+
+## 快速开始
+
+### 1. 安装依赖
+
+由于 `me-sku-editor` 使用 `peerDependencies`，你需要在项目中安装以下依赖：
+
+```bash
+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 项目中使用
+
+#### 方式一：按需引入（推荐）
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SkuEditor } from '@me-framework/me-sku-editor'
+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>
+```
+
+#### 方式二：全局注册
+
+```ts
+// 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'
+
+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 调用）
+
+```vue
+<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>
+```
+
+### 类型定义
+
+```typescript
+import type {
+  Spec,
+  SpecAttribute,
+  SpecType,
+  AttributeValue,
+  SkuRow,
+  ValidationRules,
+  ValidationResult
+} from '@me-framework/me-sku-editor'
+```
+
+## 文档
+
+- [快速开始指南](./document/快速开始.md) - 5 分钟上手教程
+- [使用文档](./document/使用文档.md) - 完整功能说明
+- [开发指南](./document/开发指南.md) - 二次开发指南
+
+## 项目结构
+
+```
+src/
+├── components/sku/        # SKU 编辑器组件
+├── composables/sku/       # SKU 相关逻辑
+├── types/sku/            # SKU 类型定义
+└── constants/sku.ts      # SKU 常量定义
+```
+
+## 技术栈
+
+- Vue 3 + TypeScript
+- Element Plus
+- VXE Table
+- XLSX
+- Sortable.js
+
+## 本地开发
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建库
+npm run build:lib
+
+# 构建 demo
+npm run build:demo
+
+# 完整构建（lib + demo）
+npm run build
+```
+
+ 
+
+## 最近更新
+
+- 移除了兼容模式，统一使用外部格式（spec_json）处理 SKU 数据
+- 新增了数据校验系统，支持自定义校验规则
+- 重构了类型定义结构，更清晰的组织
+- 优化了数据同步机制
+- 新增了打印数据功能
+- SkuGrid 支持行配置属性用于高亮
+
+## 许可证
+
+MIT