tree-upload-vue3 1.0.0 → 1.1.0

package/README.md

@@ -1,42 +1,179 @@
-# Tree Upload Component (Vue 3 + Element Plus)
+# Tree Upload Vue 3
 
-一个基于 Schema 驱动的低代码树形文件管理组件。
+基于 Vue 3 + Element Plus 的 Schema 驱动型树形文件管理组件。支持左侧树形导航、右侧文件上传与列表管理，提供高度可配置的 JSON Schema 接口。
 
-## 特性
+## ✨ 特性
 
-- **声明式配置**: 通过 JSON Schema 定义树、上传、表格、预览和权限。
-- **左侧树**: 支持静态/API数据源，支持节点增删改（Context Menu）。
-- **右侧上传**: 支持多文件、拖拽、自动上传，支持自定义 Headers 和额外参数。
-- **右侧表格**: 支持静态/API数据源，分页，自定义列，格式化器。
-- **文件预览**: 集成 `file-preview-vue3-ts`，支持多种文件格式。
-- **模板下载**: 支持节点级模板配置。
-- **权限控制**: 细粒度的权限规则引擎。
-- **上下文**: 支持 `$currentNode.id` 等动态变量替换。
+- **Schema 驱动**: 通过 JSON 配置生成完整界面。
+- **树形导航**: 
+  - 支持静态数据与 API 动态加载。
+  - 支持 CRUD 操作（增删改）。
+  - **支持拖拽调整宽度**。
+- **文件管理**: 
+  - 集成文件上传（拖拽、多选、格式限制、大小限制）。
+  - 列表展示（分页、排序、自定义列）。
+  - 自动根据配置生成上传提示文案。
+- **校验机制**: 内置 `validate()` 方法，支持验证必填项、最小/最大文件数量等。
+- **生命周期事件**: 暴露上传前/后、删除前/后等关键钩子，支持上下文透传。
+- **文件预览**: 内置多种文件格式预览功能。
+- **权限控制**: 细粒度的按钮级别权限控制。
+- **模式切换**: 支持“查看模式”与“编辑模式”。
 
-## 目录结构
+## 📦 安装
 
+```bash
+npm install tree-upload-vue3 element-plus @element-plus/icons-vue file-preview-vue3-ts
 ```
-src/
-├── components/
-│   ├── TreeUpload.vue       # 主组件（入口）
-│   ├── SchemaTree.vue       # 左侧树
-│   ├── SchemaUpload.vue     # 上传区
-│   ├── SchemaTable.vue      # 文件列表
-│   ├── SchemaTemplate.vue   # 模板下载
-│   └── SchemaPreview.vue    # 预览弹窗
-├── types/
-│   └── index.ts             # Schema 类型定义
-├── utils/
-│   └── schema-helper.ts     # 权限校验与变量替换工具
-├── App.vue                  # 示例应用
-└── main.ts                  # 入口文件
+
+确保你的项目中已经安装了 Vue 3。
+
+## 🚀 快速上手
+
+在你的 Vue 组件中引入并使用：
+
+```vue
+<template>
+  <div style="height: 600px;">
+    <TreeUpload 
+      ref="treeUploadRef"
+      :schema="mySchema" 
+      mode="edit" 
+      @upload-before="handleBeforeUpload"
+      @upload-success="handleUploadSuccess"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { TreeUpload, type TreeUploadSchema } from 'tree-upload-vue3';
+import 'tree-upload-vue3/dist/tree-upload-vue3.css'; // 引入样式
+
+const treeUploadRef = ref();
+
+const handleBeforeUpload = ({ file, context }) => {
+  console.log('准备上传:', file.name);
+  console.log('当前选中节点:', context.variables.currentNode);
+};
+
+const handleUploadSuccess = (response) => {
+  console.log('上传成功:', response);
+};
+
+const mySchema = reactive<TreeUploadSchema>({
+  version: '1.0.0',
+  tree: {
+    dataSource: {
+      type: 'static',
+      data: [
+        { 
+          id: '1', 
+          label: '必填文档', 
+          required: true, 
+          minCount: 1,
+          accept: '.pdf',
+          children: [] 
+        }
+      ]
+    },
+    ui: { 
+      width: 260,
+      resizable: true // 开启拖拽调整宽度
+    }
+  },
+  upload: {
+    enabled: true,
+    action: 'https://api.example.com/upload',
+    multiple: true,
+    ui: {
+      showTip: true // 自动显示 "支持 .pdf (最少 1 个)" 等提示
+    }
+  },
+  table: {
+    dataSource: { type: 'static', data: [] },
+    columns: [
+      { prop: 'name', label: '文件名' },
+      { prop: 'size', label: '大小', formatter: 'fileSize' }
+    ],
+    ui: {
+      pagination: { enabled: true, pageSize: 20 }
+    }
+  }
+});
+</script>
 ```
 
-## 快速开始
+## 📖 API
+
+### Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `schema` | `TreeUploadSchema` | **必填** | 组件的核心配置对象 |
+| `mode` | `'view' \| 'edit'` | `'edit'` | 视图模式。`view` 模式下隐藏上传和模板区域 |
+
+### Events
+
+| 事件名 | 参数 | 说明 |
+| --- | --- | --- |
+| `upload-before` | `{ file: File, context: SchemaContext }` | 上传前触发，包含文件对象和当前上下文（如选中节点） |
+| `upload-success` | `response: any` | 上传成功后触发 |
+| `upload-error` | `error: any` | 上传失败后触发 |
+| `delete-before` | `file: FileItem` | 用户点击删除确认后，执行删除逻辑前触发 |
+| `delete-after` | `file: FileItem` | 删除逻辑执行完毕后触发 |
+
+### Methods
 
-1. 安装依赖: `npm install`
-2. 启动开发服务器: `npm run dev`
+| 方法名 | 参数 | 返回值 | 说明 |
+| --- | --- | --- | --- |
+| `validate()` | - | `Promise<{ valid: boolean, errors: string[] }>` | 校验整个树结构是否满足配置要求（如 `required`, `minCount`） |
+
+### Schema 配置详解
+
+#### 1. Tree Schema (`tree`)
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `dataSource` | `{ type: 'static' \| 'api', ... }` | 数据源配置。`api` 模式需配置 `url`, `method`, `responsePath` |
+| `ui` | `TreeUISchema` | UI 配置，包含 `width`, `resizable`, `showRoot` 等 |
+| `actions` | `TreeActionSchema[]` | 树操作按钮配置（增删改等） |
+
+**节点配置 (CategoryNode)**:
+- `required`: 是否必须上传文件。
+- `minCount` / `maxCount`: 文件数量限制。
+- `maxSize`: 单个文件大小限制 (Bytes)。
+- `accept`: 允许的文件类型 (如 `.jpg,.png`)。
+- `meta.templates`: 模板文件列表，选中节点时会自动显示在顶部。
+
+#### 2. Upload Schema (`upload`)
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `action` | `string` | 上传接口地址 |
+| `accept` | `string` | 全局文件类型限制 (会被节点配置覆盖) |
+| `ui.showTip` | `boolean` | 是否显示动态提示文案 (自动聚合大小、数量、格式限制) |
+
+#### 3. Table Schema (`table`)
+
+| 字段 | 类型 | 说明 |
+| --- | --- | --- |
+| `dataSource` | `{ type: 'static' \| 'api', ... }` | 表格数据源。`api` 模式支持动态参数 (如 `requirementId: '${currentNode.id}'`) |
+| `columns` | `TableColumnSchema[]` | 列定义。支持 `formatter: 'fileSize'` |
+| `ui.pagination` | `{ enabled: boolean, pageSize: number }` | 分页配置 (无数据时自动隐藏) |
+
+## 🛠 开发与构建
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建库文件
+npm run build
+```
 
-## Schema 示例
+## 📄 License
 
-请参考 `src/App.vue` 中的完整示例配置。
+MIT

package/dist/App.vue.d.ts

@@ -1,2 +1,50 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+import { TreeUploadSchema } from './types';
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    treeUploadRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        schema: TreeUploadSchema;
+        mode?: "view" | "edit";
+    }> & Readonly<{
+        "onUpload-success"?: ((...args: any[]) => any) | undefined;
+        "onUpload-error"?: ((...args: any[]) => any) | undefined;
+        "onUpload-before"?: ((...args: any[]) => any) | undefined;
+        "onDelete-before"?: ((...args: any[]) => any) | undefined;
+        "onDelete-after"?: ((...args: any[]) => any) | undefined;
+    }>, {
+        validate: () => Promise<{
+            valid: boolean;
+        }>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        "upload-success": (...args: any[]) => void;
+        "upload-error": (...args: any[]) => void;
+        "upload-before": (...args: any[]) => void;
+        "delete-before": (...args: any[]) => void;
+        "delete-after": (...args: any[]) => void;
+    }, import('vue').PublicProps, {
+        mode: "view" | "edit";
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        nodeFormRef: unknown;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        schema: TreeUploadSchema;
+        mode?: "view" | "edit";
+    }> & Readonly<{
+        "onUpload-success"?: ((...args: any[]) => any) | undefined;
+        "onUpload-error"?: ((...args: any[]) => any) | undefined;
+        "onUpload-before"?: ((...args: any[]) => any) | undefined;
+        "onDelete-before"?: ((...args: any[]) => any) | undefined;
+        "onDelete-after"?: ((...args: any[]) => any) | undefined;
+    }>, {
+        validate: () => Promise<{
+            valid: boolean;
+        }>;
+    }, {}, {}, {}, {
+        mode: "view" | "edit";
+    }> | null;
+}, any>;
 export default _default;

package/dist/components/SchemaTable.vue.d.ts

@@ -6,8 +6,12 @@ type __VLS_Props = {
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     action: (...args: any[]) => void;
     refresh: (...args: any[]) => void;
+    "delete-before": (...args: any[]) => void;
+    "delete-after": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onAction?: ((...args: any[]) => any) | undefined;
     onRefresh?: ((...args: any[]) => any) | undefined;
+    "onDelete-before"?: ((...args: any[]) => any) | undefined;
+    "onDelete-after"?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/SchemaUpload.vue.d.ts

@@ -2,12 +2,15 @@ import { UploadSchema } from '../types';
 type __VLS_Props = {
     schema: UploadSchema;
     disabled?: boolean;
+    fileCount?: number;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "upload-success": (...args: any[]) => void;
     "upload-error": (...args: any[]) => void;
+    "upload-before": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpload-success"?: ((...args: any[]) => any) | undefined;
     "onUpload-error"?: ((...args: any[]) => any) | undefined;
+    "onUpload-before"?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/TreeUpload.vue.d.ts

@@ -3,7 +3,23 @@ type __VLS_Props = {
     schema: TreeUploadSchema;
     mode?: 'view' | 'edit';
 };
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const _default: import('vue').DefineComponent<__VLS_Props, {
+    validate: () => Promise<{
+        valid: boolean;
+    }>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "upload-success": (...args: any[]) => void;
+    "upload-error": (...args: any[]) => void;
+    "upload-before": (...args: any[]) => void;
+    "delete-before": (...args: any[]) => void;
+    "delete-after": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpload-success"?: ((...args: any[]) => any) | undefined;
+    "onUpload-error"?: ((...args: any[]) => any) | undefined;
+    "onUpload-before"?: ((...args: any[]) => any) | undefined;
+    "onDelete-before"?: ((...args: any[]) => any) | undefined;
+    "onDelete-after"?: ((...args: any[]) => any) | undefined;
+}>, {
     mode: "view" | "edit";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     nodeFormRef: unknown;

package/dist/index.d.ts

@@ -1,5 +1,9 @@
+import { App } from 'vue';
 import { default as TreeUpload } from './components/TreeUpload.vue';
 import { TreeUploadSchema, CategoryNode, FileItem } from './types';
 export { TreeUpload };
 export type { TreeUploadSchema, CategoryNode, FileItem };
-export default TreeUpload;
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/dist/tree-upload-vue3.css

@@ -1 +1 @@
-.schema-tree[data-v-493d816e]{height:100%;position:relative;display:flex;flex-direction:column}.tree-toolbar[data-v-493d816e]{padding:8px;border-bottom:1px solid #f0f2f5;display:flex;gap:8px}.custom-tree-node[data-v-493d816e]{flex:1;display:flex;align-items:center;justify-content:space-between;font-size:14px;padding-right:8px}.custom-tree-node .actions[data-v-493d816e]{display:none}.custom-tree-node:hover .actions[data-v-493d816e]{display:inline-flex}.context-menu[data-v-493d816e]{position:fixed;z-index:1000;background:#fff;border:1px solid #dcdfe6;box-shadow:0 2px 12px #0000001a;border-radius:4px;padding:5px 0;min-width:120px}.context-menu-item[data-v-493d816e]{padding:8px 16px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;color:#606266}.context-menu-item[data-v-493d816e]:hover{background-color:#f5f7fa;color:#409eff}.schema-upload[data-v-b2da1f5f]{width:100%}.schema-table[data-v-d92346a5]{height:100%;display:flex;flex-direction:column}.table-toolbar[data-v-d92346a5]{margin-bottom:12px}.pagination-wrapper[data-v-d92346a5]{margin-top:12px;display:flex;justify-content:flex-end}.schema-template[data-v-5468ee4e]{margin-bottom:12px;background-color:#f4f4f5;padding:8px 12px;border-radius:4px;border:1px solid #e9e9eb}.template-container[data-v-5468ee4e]{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.label[data-v-5468ee4e]{font-size:13px;color:#909399;white-space:nowrap}.tags-wrapper[data-v-5468ee4e]{display:flex;flex-wrap:wrap;gap:8px}.template-tag[data-v-5468ee4e]{cursor:pointer;border:none;background-color:#fff;transition:all .2s}.template-tag[data-v-5468ee4e]:hover{color:#409eff;transform:translateY(-1px);box-shadow:0 2px 4px #0000000d}.tag-content[data-v-5468ee4e]{display:flex;align-items:center;gap:4px}.tpl-name[data-v-5468ee4e]{line-height:1}.preview-content[data-v-caf5bb4b]{height:100%;min-height:500px;display:flex;flex-direction:column}.custom-header[data-v-caf5bb4b]{display:flex;justify-content:space-between;align-items:center;padding-right:0}.header-controls[data-v-caf5bb4b]{display:flex;align-items:center;gap:8px}.tree-upload-container[data-v-346b7c9b]{display:flex;height:100%;border:1px solid #dcdfe6;background:#fff}.tree-pane[data-v-346b7c9b]{border-right:1px solid #dcdfe6;height:100%;overflow-y:auto;padding:10px;box-sizing:border-box}.content-pane[data-v-346b7c9b]{flex:1;display:flex;flex-direction:column;padding:16px;overflow:hidden}.top-section[data-v-346b7c9b]{margin-bottom:16px}.table-section[data-v-346b7c9b]{flex:1;overflow:hidden}
+.schema-tree[data-v-55bc0bc1]{height:100%;position:relative;display:flex;flex-direction:column}.tree-toolbar[data-v-55bc0bc1]{padding:8px;border-bottom:1px solid var(--el-border-color-lighter);display:flex;gap:8px}.custom-tree-node[data-v-55bc0bc1]{flex:1;display:flex;align-items:center;justify-content:space-between;font-size:14px;padding-right:8px}.custom-tree-node .actions[data-v-55bc0bc1]{display:none}.custom-tree-node:hover .actions[data-v-55bc0bc1]{display:inline-flex}.context-menu[data-v-55bc0bc1]{position:fixed;z-index:1000;background:var(--el-bg-color-overlay);border:1px solid var(--el-border-color);box-shadow:var(--el-box-shadow-light);border-radius:4px;padding:5px 0;min-width:120px}.context-menu-item[data-v-55bc0bc1]{padding:8px 16px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--el-text-color-regular)}.context-menu-item[data-v-55bc0bc1]:hover{background-color:var(--el-fill-color-light);color:var(--el-color-primary)}.node-label[data-v-55bc0bc1]{display:flex;align-items:center}.required-star[data-v-55bc0bc1]{color:var(--el-color-danger);margin-right:4px;font-weight:700}.schema-upload[data-v-322cb598]{width:100%}.schema-table[data-v-e3496cb9]{height:100%;display:flex;flex-direction:column}.table-toolbar[data-v-e3496cb9]{margin-bottom:12px}.pagination-wrapper[data-v-e3496cb9]{margin-top:12px;display:flex;justify-content:flex-end}.schema-template[data-v-ea09f00e]{margin-bottom:12px;background-color:var(--el-fill-color-light);padding:8px 12px;border-radius:4px;border:1px solid var(--el-border-color-light)}.template-container[data-v-ea09f00e]{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.label[data-v-ea09f00e]{font-size:13px;color:var(--el-text-color-secondary);white-space:nowrap}.tags-wrapper[data-v-ea09f00e]{display:flex;flex-wrap:wrap;gap:8px}.template-tag[data-v-ea09f00e]{cursor:pointer;border:none;background-color:var(--el-bg-color);transition:all .2s}.template-tag[data-v-ea09f00e]:hover{color:var(--el-color-primary);transform:translateY(-1px);box-shadow:var(--el-box-shadow-lighter)}.tag-content[data-v-ea09f00e]{display:flex;align-items:center;gap:4px}.tpl-name[data-v-ea09f00e]{line-height:1}.preview-content[data-v-6a6a8acf]{height:100%;min-height:500px;display:flex;flex-direction:column}.custom-header[data-v-6a6a8acf]{display:flex;justify-content:space-between;align-items:center;padding-right:0}.header-controls[data-v-6a6a8acf]{display:flex;align-items:center;gap:8px}.tree-upload-container[data-v-1ad270d1]{display:flex;height:100%;border:1px solid var(--el-border-color);background:var(--el-bg-color)}.tree-pane[data-v-1ad270d1]{border-right:1px solid var(--el-border-color);height:100%;overflow-y:auto;padding:10px;box-sizing:border-box;flex-shrink:0}.resize-handle[data-v-1ad270d1]{width:5px;height:100%;cursor:col-resize;background-color:transparent;margin-left:-3px;z-index:10;position:relative;transition:background-color .2s}.resize-handle[data-v-1ad270d1]:hover,.resize-handle[data-v-1ad270d1]:active{background-color:var(--el-color-primary);opacity:.5}.content-pane[data-v-1ad270d1]{flex:1;display:flex;flex-direction:column;padding:16px;overflow:hidden}.top-section[data-v-1ad270d1]{margin-bottom:16px}.table-section[data-v-1ad270d1]{flex:1;overflow:hidden}