@yidun/antd-super-table 0.0.6 → 0.0.7

package/README.md

@@ -15,7 +15,7 @@ Antd Super Table 是一个基于 Ant Design Vue 的高级表格组件，提供
 
 ## 示例
 
-![示例图片](./example.png)
+![示例图片](https://cdn.jsdelivr.net/npm/@yidun/antd-super-table@latest/example.png)
 
 ## 安装
 
@@ -99,25 +99,92 @@ const onRequest = async (options: { params: Record<string, any>; pageSize: numbe
 
 默认启用场景，场景相关的配置存储在localStorage中
 
-| 属性名           | 类型         | 默认值      | 说明                                |
-| ---------------- | ------------ | ----------- | ----------------------------------- |
-| sceneType        | string       | ''          | 场景对应的标识                      |
-| enableScene      | boolean      | `true`      | 是否启用场景管理                    |
-| sceneStorageType | string       | `local`     | 场景存储位置，可选 `local` 或 `api` |
-| sceneRequestUrls | object       | 内置API地址 | 场景存储的API地址配置               |
-| defaultScene     | object/array |             | 默认场景配置                        |
-| maxSceneCount    | number       | `100`       | 最大场景数量                        |
+| 属性名           | 类型         | 默认值  | 说明                                |
+| ---------------- | ------------ | ------- | ----------------------------------- |
+| sceneType        | string       | ''      | 场景对应的标识                      |
+| enableScene      | boolean      | `true`  | 是否启用场景管理                    |
+| sceneStorageType | string       | `local` | 场景存储位置，可选 `local` 或 `api` |
+| sceneRequest     | object       | -       | 场景请求函数配置（API模式时必填）   |
+| defaultScene     | object/array |         | 默认场景配置                        |
+| maxSceneCount    | number       | `100`   | 最大场景数量                        |
 
 ### 场景存储配置
 
-```typescript
-// 场景API地址配置
-const sceneRequestUrls = {
-  query: 'https://api.example.com/scene/query',
-  create: 'https://api.example.com/scene/create',
-  update: 'https://api.example.com/scene/update',
-  delete: 'https://api.example.com/scene/delete',
+#### 本地存储模式（默认）
+
+```vue
+<template>
+  <SuperTable :form-items="formItems" :columns="columns" :request="onRequest" scene-storage-type="local" enable-scene />
+</template>
+```
+
+#### API存储模式
+
+```vue
+<template>
+  <SuperTable
+    :form-items="formItems"
+    :columns="columns"
+    :request="onRequest"
+    scene-storage-type="api"
+    :scene-request="sceneRequest"
+    enable-scene
+  />
+</template>
+
+<script setup>
+// 场景请求函数配置
+const sceneRequest = {
+  // 查询场景列表
+  querySceneList: async (params: { type: string }) => {
+    const response = await fetch('/api/scene/query', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params)
+    })
+    return response.json()
+  },
+
+  // 创建场景
+  createScene: async (params: any) => {
+    const response = await fetch('/api/scene/create', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params)
+    })
+    return response.json()
+  },
+
+  // 更新场景
+  updateScene: async (params: any) => {
+    const response = await fetch('/api/scene/update', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params)
+    })
+    return response.json()
+  },
+
+  // 删除场景
+  deleteScene: async (params: string[]) => {
+    const response = await fetch('/api/scene/delete', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params)
+    })
+    return response.json()
+  }
 }
+</script>
+```
+
+#### 错误处理
+
+当 `sceneStorageType` 为 `'api'` 但没有提供 `sceneRequest` 时，组件会在控制台输出错误信息并禁用场景功能：
+
+```javascript
+// 控制台错误信息
+SuperTable: sceneStorageType 为 "api" 时，必须提供 sceneRequest 配置
 ```
 
 ## 查询条件配置
@@ -601,7 +668,7 @@ const onRowSortEnd = newData => {
 | sceneType         | 场景类型         | `string`                                     | `''`             |
 | enableScene       | 是否启用场景管理 | `boolean`                                    | `true`           |
 | sceneStorageType  | 场景存储位置     | `'local' \| 'api'`                           | `'local'`        |
-| sceneRequestUrls  | 场景API地址配置  | `object`                                     | 内置地址         |
+| sceneRequest      | 场景请求函数配置 | `SceneRequestConfig`                         | -                |
 | defaultScene      | 默认场景配置     | `DefaultSceneConfig \| DefaultSceneConfig[]` | -                |
 | maxSceneCount     | 最大场景数量     | `number`                                     | `100`            |
 | formItemColSpan   | 查询条件列数     | `number`                                     | `6`              |
@@ -787,6 +854,33 @@ export interface SuperTableFormItem {
 ### 场景管理类型
 
 ```typescript
+/** 场景请求函数配置 */
+export interface SceneRequestConfig {
+  /** 查询场景列表 */
+  querySceneList: (params: { type: string }) => Promise<IResponse>
+
+  /** 创建场景 */
+  createScene: (params: any) => Promise<IResponse>
+
+  /** 更新场景 */
+  updateScene: (params: any) => Promise<IResponse>
+
+  /** 删除场景 */
+  deleteScene: (params: string[]) => Promise<IResponse>
+}
+
+/** 接口响应数据结构 */
+export interface IResponse {
+  /** 状态码 */
+  code: number
+
+  /** 响应数据 */
+  data: any
+
+  /** 响应消息 */
+  msg: string
+}
+
 /** 查询场景 */
 export interface SuperTableQueryScene {
   /** 场景唯一标识 */
@@ -886,13 +980,42 @@ export interface AntdTableProps extends TableProps {
 1. **依赖要求**：组件依赖于 Ant Design Vue，请确保项目中已安装相关依赖
 2. **TypeScript 支持**：TypeScript 项目需要在 `tsconfig.json` 中配置类型声明文件路径
 3. **自定义组件**：自定义组件需要通过 `component` 属性传入，并确保组件已全局注册或局部引入
-4. **场景管理**：场景管理功能需要配置 `sceneType` 属性，并实现相关的存储接口
+4. **场景管理**：
+   - 场景管理功能需要配置 `sceneType` 属性
+   - 使用 `local` 存储模式时，场景数据保存在浏览器的 localStorage 中
+   - 使用 `api` 存储模式时，必须提供 `sceneRequest` 配置，否则会禁用场景功能并在控制台输出错误信息
 5. **性能优化**：组件内置了防抖、虚拟滚动等性能优化，大数据量场景下表现良好
 6. **响应式设计**：组件支持响应式布局，可根据屏幕尺寸自动调整
 7. **主题定制**：支持通过 CSS 变量或 Ant Design 主题系统进行样式定制
 
 ## 更新日志
 
+### v0.0.7
+
+- 🔄 **重构场景管理API**：
+  - 将 `sceneRequestUrls` 重构为 `sceneRequest`
+  - 从传递URL字符串改为传递请求函数，提供更大的灵活性
+  - 支持自定义请求逻辑、错误处理和认证机制
+- 🔧 **优化错误处理**：
+  - 当 `sceneStorageType` 为 `'api'` 但未提供 `sceneRequest` 时，提供清晰的错误提示
+  - 实现优雅降级，避免应用崩溃
+- 🗑️ **移除冗余代码**：
+  - 删除 `apiSceneService` 中间层，直接使用 `sceneRequest`
+  - 简化架构，提高代码可维护性
+- 📚 **完善文档**：
+  - 更新API文档和类型定义
+  - 添加详细的配置示例和错误处理说明
+  - 提供本地存储和API存储两种模式的完整示例
+- 🖼️ **修复文档图片**：
+  - 修复 npm 包中示例图片无法显示的问题
+  - 使用 CDN 方式确保图片在不同平台都能正确显示
+
+### v0.0.6
+
+- 🐛 修复场景管理相关问题
+- 🐛 修复表格列配置缓存问题
+- 💄 优化UI样式和交互体验
+
 ### v0.0.2
 
 - ✨ 新增表格拖拽排序功能

package/dist/config.d.ts

@@ -28,10 +28,3 @@ export declare const SceneModalActionTypeEnum: {
 };
 /** 本地缓存需要保存的列配置字段 */
 export declare const cacheColumnKeys: string[];
-/** 场景管理接口地址 */
-export declare const sceneApiUrls: {
-    query: string;
-    create: string;
-    update: string;
-    delete: string;
-};