tree-upload-vue3 1.0.0

package/README.md

@@ -0,0 +1,42 @@
+# Tree Upload Component (Vue 3 + Element Plus)
+
+一个基于 Schema 驱动的低代码树形文件管理组件。
+
+## 特性
+
+- **声明式配置**: 通过 JSON Schema 定义树、上传、表格、预览和权限。
+- **左侧树**: 支持静态/API数据源，支持节点增删改（Context Menu）。
+- **右侧上传**: 支持多文件、拖拽、自动上传，支持自定义 Headers 和额外参数。
+- **右侧表格**: 支持静态/API数据源，分页，自定义列，格式化器。
+- **文件预览**: 集成 `file-preview-vue3-ts`，支持多种文件格式。
+- **模板下载**: 支持节点级模板配置。
+- **权限控制**: 细粒度的权限规则引擎。
+- **上下文**: 支持 `$currentNode.id` 等动态变量替换。
+
+## 目录结构
+
+```
+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                  # 入口文件
+```
+
+## 快速开始
+
+1. 安装依赖: `npm install`
+2. 启动开发服务器: `npm run dev`
+
+## Schema 示例
+
+请参考 `src/App.vue` 中的完整示例配置。

package/dist/App.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,12 @@
+import { PreviewSchema, FileItem } from '../types';
+type __VLS_Props = {
+    schema: PreviewSchema;
+    modelValue: boolean;
+    file: FileItem | null;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,13 @@
+import { TableSchema, FileItem } from '../types';
+type __VLS_Props = {
+    schema: TableSchema;
+    files?: FileItem[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    action: (...args: any[]) => void;
+    refresh: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAction?: ((...args: any[]) => any) | undefined;
+    onRefresh?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,9 @@
+interface TemplateItem {
+    name: string;
+    url: string;
+}
+type __VLS_Props = {
+    templates: TemplateItem[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,14 @@
+import { TreeSchema } from '../types';
+type __VLS_Props = {
+    schema: TreeSchema;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "node-click": (...args: any[]) => void;
+    action: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onNode-click"?: ((...args: any[]) => any) | undefined;
+    onAction?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    treeRef: unknown;
+}, HTMLDivElement>;
+export default _default;

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

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

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

@@ -0,0 +1,11 @@
+import { TreeUploadSchema } from '../types';
+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<{}>, {
+    mode: "view" | "edit";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    nodeFormRef: unknown;
+}, HTMLDivElement>;
+export default _default;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { default as TreeUpload } from './components/TreeUpload.vue';
+import { TreeUploadSchema, CategoryNode, FileItem } from './types';
+export { TreeUpload };
+export type { TreeUploadSchema, CategoryNode, FileItem };
+export default TreeUpload;

package/dist/tree-upload-vue3.css

@@ -0,0 +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}

package/dist/tree-upload-vue3.es.js

@@ -0,0 +1,748 @@
+import { defineComponent as j, ref as C, computed as D, onMounted as ae, onUnmounted as le, resolveComponent as h, createElementBlock as S, openBlock as a, createCommentVNode as w, createVNode as y, Fragment as E, renderList as K, createBlock as p, withCtx as d, createTextVNode as R, resolveDynamicComponent as O, toDisplayString as F, createElementVNode as $, withModifiers as ne, normalizeStyle as Q, inject as Z, createSlots as oe, watch as ee, resolveDirective as ie, withDirectives as se, unref as X, normalizeClass as ce, reactive as G, provide as re, nextTick as ue } from "vue";
+import { ElMessage as H } from "element-plus";
+import { Download as de, Close as me } from "@element-plus/icons-vue";
+import J from "file-preview-vue3-ts";
+const fe = { class: "schema-tree" }, pe = {
+  key: 0,
+  class: "tree-toolbar"
+}, he = { class: "custom-tree-node" }, ve = {
+  key: 0,
+  class: "actions"
+}, be = ["onClick"], ge = /* @__PURE__ */ j({
+  __name: "SchemaTree",
+  props: {
+    schema: {}
+  },
+  emits: ["node-click", "action"],
+  setup(e, { emit: r }) {
+    const t = e, v = r, b = C(), s = C(!1), k = C({ x: 0, y: 0 }), g = C(null), V = D(() => t.schema.dataSource.type === "static" ? t.schema.dataSource.data : []), N = {
+      label: t.schema.labelKey || "label",
+      children: t.schema.childrenKey || "children"
+    }, U = D(() => t.schema.actions?.filter((n) => n.position === "toolbar") || []), T = D(() => t.schema.actions?.filter((n) => n.position === "node") || []), A = D(() => t.schema.actions?.filter((n) => n.position === "contextMenu") || []), l = (n) => {
+      s.value = !1, v("node-click", n);
+    }, _ = (n, x) => {
+      A.value.length !== 0 && (n.preventDefault(), s.value = !0, k.value = { x: n.clientX, y: n.clientY }, g.value = x);
+    }, z = (n, x) => {
+      s.value = !1, !(n.confirm && !confirm(n.confirm.message || "Are you sure?")) && v("action", n.key, x);
+    }, c = () => {
+      s.value = !1;
+    };
+    return ae(() => {
+      document.addEventListener("click", c);
+    }), le(() => {
+      document.removeEventListener("click", c);
+    }), (n, x) => {
+      const B = h("el-icon"), L = h("el-button"), u = h("el-tooltip"), i = h("el-tree");
+      return a(), S("div", fe, [
+        U.value.length ? (a(), S("div", pe, [
+          (a(!0), S(E, null, K(U.value, (m) => (a(), p(L, {
+            key: m.key,
+            type: "primary",
+            link: "",
+            onClick: (o) => z(m, null)
+          }, {
+            default: d(() => [
+              m.icon ? (a(), p(B, { key: 0 }, {
+                default: d(() => [
+                  (a(), p(O(m.icon)))
+                ]),
+                _: 2
+              }, 1024)) : w("", !0),
+              R(" " + F(m.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["onClick"]))), 128))
+        ])) : w("", !0),
+        y(i, {
+          ref_key: "treeRef",
+          ref: b,
+          data: V.value,
+          "node-key": e.schema.nodeKey || "id",
+          props: N,
+          "default-expand-all": e.schema.ui?.defaultExpandAll,
+          "highlight-current": e.schema.ui?.highlightCurrent,
+          "expand-on-click-node": !1,
+          onNodeClick: l,
+          onNodeContextmenu: _
+        }, {
+          default: d(({ node: m, data: o }) => [
+            $("span", he, [
+              $("span", null, F(m.label), 1),
+              T.value.length ? (a(), S("span", ve, [
+                (a(!0), S(E, null, K(T.value, (f) => (a(), p(u, {
+                  key: f.key,
+                  content: f.label,
+                  placement: "top",
+                  "show-after": 200
+                }, {
+                  default: d(() => [
+                    y(L, {
+                      link: "",
+                      type: "primary",
+                      onClick: ne((M) => z(f, o), ["stop"])
+                    }, {
+                      default: d(() => [
+                        f.icon ? (a(), p(B, { key: 0 }, {
+                          default: d(() => [
+                            (a(), p(O(f.icon)))
+                          ]),
+                          _: 2
+                        }, 1024)) : w("", !0)
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["content"]))), 128))
+              ])) : w("", !0)
+            ])
+          ]),
+          _: 1
+        }, 8, ["data", "node-key", "default-expand-all", "highlight-current"]),
+        s.value ? (a(), S("div", {
+          key: 1,
+          class: "context-menu",
+          style: Q({ left: k.value.x + "px", top: k.value.y + "px" })
+        }, [
+          (a(!0), S(E, null, K(A.value, (m) => (a(), S("div", {
+            key: m.key,
+            class: "context-menu-item",
+            onClick: (o) => z(m, g.value)
+          }, [
+            m.icon ? (a(), p(B, { key: 0 }, {
+              default: d(() => [
+                (a(), p(O(m.icon)))
+              ]),
+              _: 2
+            }, 1024)) : w("", !0),
+            R(" " + F(m.label), 1)
+          ], 8, be))), 128))
+        ], 4)) : w("", !0)
+      ]);
+    };
+  }
+}), q = (e, r) => {
+  const t = e.__vccOpts || e;
+  for (const [v, b] of r)
+    t[v] = b;
+  return t;
+}, _e = /* @__PURE__ */ q(ge, [["__scopeId", "data-v-493d816e"]]);
+function Y(e, r, t) {
+  return r.permissions ? r.permissions.default?.[e] !== !1 : !0;
+}
+function te(e, r) {
+  if (!e) return e;
+  let t = e;
+  const v = r.variables || {};
+  return v.currentNode && (t = t.replace(/\$currentNode\.id/g, String(v.currentNode.id)), t = t.replace(/\$currentNode\.label/g, v.currentNode.label)), t;
+}
+const ye = {
+  key: 0,
+  class: "schema-upload"
+}, ke = { class: "el-upload__text" }, xe = { class: "el-upload__tip" }, Se = /* @__PURE__ */ j({
+  __name: "SchemaUpload",
+  props: {
+    schema: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["upload-success", "upload-error"],
+  setup(e, { emit: r }) {
+    const t = e, v = r, b = Z("schemaContext", {}), s = D(() => {
+      const l = b.variables?.currentNode?.meta?.upload || {};
+      return {
+        ...t.schema,
+        ...l,
+        // Override with node-level config
+        // Explicitly handle fields that might be in meta
+        limit: l.limit ?? t.schema.limit,
+        maxSize: l.maxSize,
+        // Custom field: bytes
+        minLimit: l.minLimit,
+        // Custom field
+        accept: l.accept ?? t.schema.accept,
+        multiple: l.multiple ?? t.schema.multiple,
+        drag: l.drag ?? t.schema.drag,
+        autoUpload: l.autoUpload ?? t.schema.autoUpload
+      };
+    }), k = D(() => t.schema.headers || {}), g = D(() => {
+      const l = t.schema.data || {}, _ = {};
+      for (const z in l) {
+        const c = l[z];
+        typeof c == "string" ? _[z] = te(c, b) : _[z] = c;
+      }
+      return _;
+    }), V = D(() => {
+      let l = t.schema.ui?.tipText || "";
+      const _ = [];
+      if (s.value.maxSize) {
+        const z = (s.value.maxSize / 1024 / 1024).toFixed(1);
+        _.push(`大小限制 ${z}MB`);
+      }
+      return s.value.limit && _.push(`数量限制 ${s.value.limit}个`), s.value.accept && _.push(`格式 ${s.value.accept}`), _.length ? `${l} (${_.join(", ")})` : l;
+    }), N = (l) => {
+      const _ = s.value.maxSize;
+      return _ && l.size > _ ? (H.error(`文件大小不能超过 ${(_ / 1024 / 1024).toFixed(1)}MB!`), !1) : !0;
+    }, U = () => {
+      H.warning(`当前限制选择 ${s.value.limit} 个文件`);
+    }, T = (l) => {
+      v("upload-success", l);
+    }, A = (l) => {
+      v("upload-error", l);
+    };
+    return (l, _) => {
+      const z = h("upload-filled"), c = h("el-icon"), n = h("el-button"), x = h("el-upload");
+      return e.schema.enabled ? (a(), S("div", ye, [
+        y(x, {
+          class: "upload-demo",
+          action: e.schema.action,
+          method: e.schema.method || "post",
+          headers: k.value,
+          data: g.value,
+          multiple: s.value.multiple,
+          drag: s.value.drag,
+          accept: s.value.accept,
+          limit: s.value.limit,
+          "auto-upload": s.value.autoUpload !== !1,
+          disabled: e.disabled,
+          "show-file-list": e.schema.ui?.showFileList,
+          "before-upload": N,
+          "on-exceed": U,
+          onSuccess: T,
+          onError: A
+        }, oe({
+          default: d(() => [
+            s.value.drag ? (a(), S(E, { key: 0 }, [
+              y(c, { class: "el-icon--upload" }, {
+                default: d(() => [
+                  y(z)
+                ]),
+                _: 1
+              }),
+              $("div", ke, F(e.schema.ui?.buttonText || "Drop file here or click to upload"), 1)
+            ], 64)) : w("", !0)
+          ]),
+          _: 2
+        }, [
+          s.value.drag ? void 0 : {
+            name: "trigger",
+            fn: d(() => [
+              y(n, { type: "primary" }, {
+                default: d(() => [
+                  R(F(e.schema.ui?.buttonText || "Click to upload"), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            key: "0"
+          },
+          e.schema.ui?.showTip ? {
+            name: "tip",
+            fn: d(() => [
+              $("div", xe, F(V.value), 1)
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["action", "method", "headers", "data", "multiple", "drag", "accept", "limit", "auto-upload", "disabled", "show-file-list"])
+      ])) : w("", !0);
+    };
+  }
+}), we = /* @__PURE__ */ q(Se, [["__scopeId", "data-v-b2da1f5f"]]), Ce = { class: "schema-table" }, $e = {
+  key: 0,
+  class: "table-toolbar"
+}, Ve = {
+  key: 1,
+  class: "pagination-wrapper"
+}, ze = /* @__PURE__ */ j({
+  __name: "SchemaTable",
+  props: {
+    schema: {},
+    files: {}
+  },
+  emits: ["action", "refresh"],
+  setup(e, { emit: r }) {
+    const t = e, v = r, b = Z("schemaContext", {}), s = C(!1), k = C(1), g = C(t.schema.ui?.pagination?.pageSize || 20), V = C(0), N = C([]), U = D(() => t.files ? t.files : t.schema.dataSource.type === "static" ? t.schema.dataSource.data : N.value), T = (c, n) => {
+      if (!n) return c;
+      if (n === "fileSize") {
+        const x = Number(c);
+        return isNaN(x) ? c : x < 1024 ? x + " B" : x < 1024 * 1024 ? (x / 1024).toFixed(2) + " KB" : (x / 1024 / 1024).toFixed(2) + " MB";
+      }
+      return c;
+    }, A = (c, n) => {
+      c.confirm && !confirm(c.confirm.message || "Are you sure?") || v("action", c.key, n);
+    }, l = async () => {
+      if (t.schema.dataSource.type === "api") {
+        s.value = !0;
+        try {
+          const c = t.schema.dataSource, n = { ...c.params };
+          t.schema.ui?.pagination?.enabled && (n.page = k.value, n.pageSize = g.value);
+          for (const x in n)
+            typeof n[x] == "string" && (n[x] = te(n[x], b));
+          console.log("Fetching Table Data:", c.url, n), c.url;
+        } catch (c) {
+          console.error(c);
+        } finally {
+          s.value = !1;
+        }
+      }
+    }, _ = (c) => {
+      g.value = c, l();
+    }, z = (c) => {
+      k.value = c, l();
+    };
+    return ee(() => b.variables?.currentNode, (c) => {
+      c && t.schema.dataSource.type === "api" && l();
+    }, { deep: !0 }), (c, n) => {
+      const x = h("el-icon"), B = h("el-button"), L = h("el-table-column"), u = h("el-table"), i = h("el-pagination"), m = ie("loading");
+      return a(), S("div", Ce, [
+        e.schema.toolbarActions?.length ? (a(), S("div", $e, [
+          (a(!0), S(E, null, K(e.schema.toolbarActions, (o) => (a(), p(B, {
+            key: o.key,
+            type: o.type || "default",
+            onClick: (f) => A(o, null)
+          }, {
+            default: d(() => [
+              o.icon ? (a(), p(x, { key: 0 }, {
+                default: d(() => [
+                  (a(), p(O(o.icon)))
+                ]),
+                _: 2
+              }, 1024)) : w("", !0),
+              R(" " + F(o.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["type", "onClick"]))), 128))
+        ])) : w("", !0),
+        se((a(), p(u, {
+          data: U.value,
+          stripe: e.schema.ui?.stripe,
+          border: e.schema.ui?.border,
+          size: e.schema.ui?.size,
+          style: { width: "100%", height: "100%", flex: "1" }
+        }, {
+          default: d(() => [
+            (a(!0), S(E, null, K(e.schema.columns, (o) => (a(), p(L, {
+              key: o.prop,
+              prop: o.prop,
+              label: o.label,
+              width: o.width,
+              align: o.align,
+              fixed: o.fixed,
+              sortable: o.sortable
+            }, {
+              default: d((f) => [
+                R(F(T(f.row[o.prop], o.formatter)), 1)
+              ]),
+              _: 2
+            }, 1032, ["prop", "label", "width", "align", "fixed", "sortable"]))), 128)),
+            e.schema.actions?.length ? (a(), p(L, {
+              key: 0,
+              label: "操作",
+              fixed: "right",
+              width: "200"
+            }, {
+              default: d((o) => [
+                (a(!0), S(E, null, K(e.schema.actions, (f) => (a(), p(B, {
+                  key: f.key,
+                  type: f.type || "primary",
+                  link: "",
+                  onClick: (M) => A(f, o.row)
+                }, {
+                  default: d(() => [
+                    R(F(f.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["type", "onClick"]))), 128))
+              ]),
+              _: 1
+            })) : w("", !0)
+          ]),
+          _: 1
+        }, 8, ["data", "stripe", "border", "size"])), [
+          [m, s.value]
+        ]),
+        e.schema.ui?.pagination?.enabled ? (a(), S("div", Ve, [
+          y(i, {
+            "current-page": k.value,
+            "onUpdate:currentPage": n[0] || (n[0] = (o) => k.value = o),
+            "page-size": g.value,
+            "onUpdate:pageSize": n[1] || (n[1] = (o) => g.value = o),
+            "page-sizes": [10, 20, 50, 100],
+            layout: e.schema.ui?.pagination?.layout || "total, sizes, prev, pager, next, jumper",
+            total: V.value,
+            onSizeChange: _,
+            onCurrentChange: z
+          }, null, 8, ["current-page", "page-size", "layout", "total"])
+        ])) : w("", !0)
+      ]);
+    };
+  }
+}), Te = /* @__PURE__ */ q(ze, [["__scopeId", "data-v-d92346a5"]]), De = { class: "schema-template" }, Ne = { class: "template-container" }, Ue = { class: "tags-wrapper" }, Ae = { class: "tag-content" }, Fe = { class: "tpl-name" }, Me = /* @__PURE__ */ j({
+  __name: "SchemaTemplate",
+  props: {
+    templates: {}
+  },
+  setup(e) {
+    const r = (t) => {
+      window.open(t.url, "_blank");
+    };
+    return (t, v) => {
+      const b = h("el-icon"), s = h("el-tag");
+      return a(), S("div", De, [
+        $("div", Ne, [
+          v[0] || (v[0] = $("span", { class: "label" }, "可用模板：", -1)),
+          $("div", Ue, [
+            (a(!0), S(E, null, K(e.templates, (k, g) => (a(), p(s, {
+              key: g,
+              class: "template-tag",
+              type: "primary",
+              effect: "light",
+              onClick: (V) => r(k)
+            }, {
+              default: d(() => [
+                $("span", Ae, [
+                  y(b, null, {
+                    default: d(() => [
+                      y(X(de))
+                    ]),
+                    _: 1
+                  }),
+                  $("span", Fe, F(k.name), 1)
+                ])
+              ]),
+              _: 2
+            }, 1032, ["onClick"]))), 128))
+          ])
+        ])
+      ]);
+    };
+  }
+}), Pe = /* @__PURE__ */ q(Me, [["__scopeId", "data-v-5468ee4e"]]), Ie = {
+  key: 0,
+  class: "schema-preview-container"
+}, Be = { class: "custom-header" }, Ee = ["id"], Re = { class: "header-controls" }, Le = { class: "preview-content" }, Ke = { class: "preview-content" }, je = /* @__PURE__ */ j({
+  __name: "SchemaPreview",
+  props: {
+    schema: {},
+    modelValue: { type: Boolean },
+    file: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: r }) {
+    const t = e, v = r, b = C(!1), s = D({
+      get: () => t.modelValue,
+      set: (g) => {
+        v("update:modelValue", g), g || setTimeout(() => {
+          b.value = !1;
+        }, 300);
+      }
+    }), k = () => {
+      b.value = !b.value;
+    };
+    return ee(() => t.schema.fullscreen, (g) => {
+      g !== void 0 && (b.value = g);
+    }, { immediate: !0 }), (g, V) => {
+      const N = h("el-icon"), U = h("el-button"), T = h("el-dialog"), A = h("el-drawer");
+      return s.value ? (a(), S("div", Ie, [
+        e.schema.mode === "dialog" ? (a(), p(T, {
+          key: 0,
+          modelValue: s.value,
+          "onUpdate:modelValue": V[0] || (V[0] = (l) => s.value = l),
+          width: e.schema.width,
+          fullscreen: b.value || e.schema.fullscreen,
+          draggable: "",
+          "destroy-on-close": "",
+          "append-to-body": "",
+          class: "preview-dialog",
+          "show-close": !1
+        }, {
+          header: d(({ close: l, titleId: _, titleClass: z }) => [
+            $("div", Be, [
+              $("span", {
+                id: _,
+                class: ce(z)
+              }, F(e.schema.dialogTitle || "预览"), 11, Ee),
+              $("div", Re, [
+                y(U, {
+                  link: "",
+                  onClick: k
+                }, {
+                  default: d(() => [
+                    y(N, null, {
+                      default: d(() => [
+                        (a(), p(O(b.value ? "CopyDocument" : "FullScreen")))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                y(U, {
+                  link: "",
+                  onClick: l
+                }, {
+                  default: d(() => [
+                    y(N, null, {
+                      default: d(() => [
+                        y(X(me))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["onClick"])
+              ])
+            ])
+          ]),
+          default: d(() => [
+            $("div", Le, [
+              e.file ? (a(), p(X(J), {
+                key: 0,
+                url: e.file.url,
+                type: e.file.type,
+                name: e.file.name
+              }, null, 8, ["url", "type", "name"])) : w("", !0)
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "width", "fullscreen"])) : (a(), p(A, {
+          key: 1,
+          modelValue: s.value,
+          "onUpdate:modelValue": V[1] || (V[1] = (l) => s.value = l),
+          title: e.schema.dialogTitle || "预览",
+          size: e.schema.width,
+          "destroy-on-close": "",
+          "append-to-body": ""
+        }, {
+          default: d(() => [
+            $("div", Ke, [
+              e.file ? (a(), p(X(J), {
+                key: 0,
+                url: e.file.url,
+                type: e.file.type,
+                name: e.file.name
+              }, null, 8, ["url", "type", "name"])) : w("", !0)
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title", "size"]))
+      ])) : w("", !0);
+    };
+  }
+}), qe = /* @__PURE__ */ q(je, [["__scopeId", "data-v-caf5bb4b"]]), Oe = { class: "tree-upload-container" }, We = { class: "content-pane" }, Xe = {
+  key: 0,
+  class: "top-section"
+}, Ye = { class: "table-section" }, Ge = { class: "dialog-footer" }, He = /* @__PURE__ */ j({
+  __name: "TreeUpload",
+  props: {
+    schema: {},
+    mode: { default: "edit" }
+  },
+  setup(e) {
+    const r = e, t = C(null), v = C([]), b = C(!1), s = C(null), k = C(!1), g = C("addRoot"), V = G({ label: "" }), N = C(), U = C(null), T = G({
+      variables: {
+        ...r.schema.context?.variables,
+        currentNode: void 0,
+        currentFile: void 0
+      }
+    });
+    re("schemaContext", T);
+    const A = D(() => {
+      const u = r.schema.tree.ui?.width;
+      return typeof u == "number" ? `${u}px` : u || "260px";
+    }), l = D(() => t.value?.meta?.templates || []), _ = D(() => t.value ? Y("upload", r.schema) : !1), z = D(() => {
+      switch (g.value) {
+        case "addRoot":
+          return "添加根节点";
+        case "addChild":
+          return "添加子节点";
+        case "addSibling":
+          return "添加本级节点";
+        case "edit":
+          return "编辑节点";
+        default:
+          return "节点操作";
+      }
+    }), c = (u) => {
+      if (console.log("Node Selected:", u), t.value = u, T.variables && (T.variables.currentNode = u), r.schema.table.dataSource.type === "static") {
+        const i = r.schema.table.dataSource.data;
+        v.value = i.filter((m) => m.meta?.nodeId === String(u.id));
+      }
+    }, n = (u, i) => {
+      if (console.log("Tree Action:", u, i), !Y(u, r.schema)) {
+        alert("Permission Denied");
+        return;
+      }
+      if (r.schema.tree.dataSource.type !== "static") {
+        alert(`Action ${u} triggered (API implementation required)`);
+        return;
+      }
+      if (u === "delete") {
+        if (!i || !confirm(`确定删除节点 "${i.label}" 吗?`)) return;
+        const m = r.schema.tree.dataSource.data, o = (f) => {
+          const M = f.findIndex((P) => P.id === i.id);
+          if (M > -1)
+            return f.splice(M, 1), !0;
+          for (const P of f)
+            if (P.children && o(P.children)) return !0;
+          return !1;
+        };
+        o(m) && t.value?.id === i.id && (t.value = null);
+        return;
+      }
+      (u === "addRoot" || u === "addChild" || u === "addSibling" || u === "edit") && (g.value = u, U.value = i, V.label = u === "edit" && i ? i.label : "", k.value = !0, ue(() => {
+        N.value?.clearValidate();
+      }));
+    }, x = () => {
+      N.value?.validate((u) => {
+        if (!u || r.schema.tree.dataSource.type !== "static")
+          return;
+        const i = r.schema.tree.dataSource.data, m = V.label, o = g.value, f = U.value;
+        if (o === "addRoot")
+          i.push({ id: String(Date.now()), label: m, children: [] });
+        else if (o === "addChild")
+          f && (f.children || (f.children = []), f.children.push({ id: String(Date.now()), label: m, children: [] }));
+        else if (o === "addSibling") {
+          if (f) {
+            const M = (P) => {
+              const I = P.findIndex((W) => W.id === f.id);
+              if (I > -1)
+                return P.splice(I + 1, 0, { id: String(Date.now()), label: m, children: [] }), !0;
+              for (const W of P)
+                if (W.children && M(W.children)) return !0;
+              return !1;
+            };
+            M(i);
+          }
+        } else o === "edit" && f && (f.label = m);
+        k.value = !1;
+      });
+    }, B = (u) => {
+      if (console.log("Upload Success:", u), r.schema.table.dataSource.type === "static" && t.value) {
+        const i = {
+          id: Date.now(),
+          name: "Uploaded File.png",
+          size: 1024,
+          url: "#",
+          type: "png",
+          meta: { nodeId: String(t.value.id) }
+        };
+        r.schema.table.dataSource.data.push(i), c(t.value);
+      }
+    }, L = (u, i) => {
+      if (console.log("Table Action:", u, i), T.variables && (T.variables.currentFile = i), !Y(u, r.schema)) {
+        alert("Permission Denied");
+        return;
+      }
+      if (u === "preview")
+        s.value = i, b.value = !0;
+      else if (u === "delete" && r.schema.table.dataSource.type === "static") {
+        const m = r.schema.table.dataSource.data.findIndex((o) => o.id === i.id);
+        m > -1 && (r.schema.table.dataSource.data.splice(m, 1), t.value && c(t.value));
+      }
+    };
+    return (u, i) => {
+      const m = h("el-input"), o = h("el-form-item"), f = h("el-form"), M = h("el-button"), P = h("el-dialog");
+      return a(), S("div", Oe, [
+        $("div", {
+          class: "tree-pane",
+          style: Q({ width: A.value })
+        }, [
+          y(_e, {
+            schema: e.schema.tree,
+            onNodeClick: c,
+            onAction: n
+          }, null, 8, ["schema"])
+        ], 4),
+        $("div", We, [
+          e.mode === "edit" ? (a(), S("div", Xe, [
+            l.value && l.value.length > 0 ? (a(), p(Pe, {
+              key: 0,
+              templates: l.value
+            }, null, 8, ["templates"])) : w("", !0),
+            e.schema.upload ? (a(), p(we, {
+              key: 1,
+              schema: e.schema.upload,
+              disabled: !_.value,
+              onUploadSuccess: B
+            }, null, 8, ["schema", "disabled"])) : w("", !0)
+          ])) : w("", !0),
+          $("div", Ye, [
+            y(Te, {
+              schema: e.schema.table,
+              files: v.value,
+              onAction: L
+            }, null, 8, ["schema", "files"])
+          ])
+        ]),
+        e.schema.preview ? (a(), p(qe, {
+          key: 0,
+          modelValue: b.value,
+          "onUpdate:modelValue": i[0] || (i[0] = (I) => b.value = I),
+          schema: e.schema.preview,
+          file: s.value
+        }, null, 8, ["modelValue", "schema", "file"])) : w("", !0),
+        y(P, {
+          modelValue: k.value,
+          "onUpdate:modelValue": i[3] || (i[3] = (I) => k.value = I),
+          title: z.value,
+          width: "400px",
+          "append-to-body": "",
+          "destroy-on-close": ""
+        }, {
+          footer: d(() => [
+            $("span", Ge, [
+              y(M, {
+                onClick: i[2] || (i[2] = (I) => k.value = !1)
+              }, {
+                default: d(() => [...i[4] || (i[4] = [
+                  R("取消", -1)
+                ])]),
+                _: 1
+              }),
+              y(M, {
+                type: "primary",
+                onClick: x
+              }, {
+                default: d(() => [...i[5] || (i[5] = [
+                  R("确定", -1)
+                ])]),
+                _: 1
+              })
+            ])
+          ]),
+          default: d(() => [
+            y(f, {
+              model: V,
+              ref_key: "nodeFormRef",
+              ref: N,
+              "label-width": "80px"
+            }, {
+              default: d(() => [
+                y(o, {
+                  label: "节点名称",
+                  prop: "label",
+                  rules: [{ required: !0, message: "请输入节点名称", trigger: "blur" }]
+                }, {
+                  default: d(() => [
+                    y(m, {
+                      modelValue: V.label,
+                      "onUpdate:modelValue": i[1] || (i[1] = (I) => V.label = I),
+                      placeholder: "请输入节点名称"
+                    }, null, 8, ["modelValue"])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["model"])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title"])
+      ]);
+    };
+  }
+}), tt = /* @__PURE__ */ q(He, [["__scopeId", "data-v-346b7c9b"]]);
+export {
+  tt as TreeUpload,
+  tt as default
+};

package/dist/tree-upload-vue3.umd.js

@@ -0,0 +1 @@
+(function(V,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus"),require("@element-plus/icons-vue"),require("file-preview-vue3-ts")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus","@element-plus/icons-vue","file-preview-vue3-ts"],e):(V=typeof globalThis<"u"?globalThis:V||self,e(V.TreeUploadVue3={},V.Vue,V.ElementPlus,V.ElementPlusIconsVue,V.FilePreviewVue3Ts))})(this,(function(V,e,U,A,M){"use strict";const L={class:"schema-tree"},R={key:0,class:"tree-toolbar"},j={class:"custom-tree-node"},q={key:0,class:"actions"},K=["onClick"],O=e.defineComponent({__name:"SchemaTree",props:{schema:{}},emits:["node-click","action"],setup(t,{emit:s}){const o=t,f=s,h=e.ref(),r=e.ref(!1),g=e.ref({x:0,y:0}),u=e.ref(null),C=e.computed(()=>o.schema.dataSource.type==="static"?o.schema.dataSource.data:[]),x={label:o.schema.labelKey||"label",children:o.schema.childrenKey||"children"},B=e.computed(()=>o.schema.actions?.filter(n=>n.position==="toolbar")||[]),b=e.computed(()=>o.schema.actions?.filter(n=>n.position==="node")||[]),N=e.computed(()=>o.schema.actions?.filter(n=>n.position==="contextMenu")||[]),l=n=>{r.value=!1,f("node-click",n)},k=(n,y)=>{N.value.length!==0&&(n.preventDefault(),r.value=!0,g.value={x:n.clientX,y:n.clientY},u.value=y)},_=(n,y)=>{r.value=!1,!(n.confirm&&!confirm(n.confirm.message||"Are you sure?"))&&f("action",n.key,y)},i=()=>{r.value=!1};return e.onMounted(()=>{document.addEventListener("click",i)}),e.onUnmounted(()=>{document.removeEventListener("click",i)}),(n,y)=>{const $=e.resolveComponent("el-icon"),D=e.resolveComponent("el-button"),d=e.resolveComponent("el-tooltip"),c=e.resolveComponent("el-tree");return e.openBlock(),e.createElementBlock("div",L,[B.value.length?(e.openBlock(),e.createElementBlock("div",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(B.value,m=>(e.openBlock(),e.createBlock(D,{key:m.key,type:"primary",link:"",onClick:a=>_(m,null)},{default:e.withCtx(()=>[m.icon?(e.openBlock(),e.createBlock($,{key:0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(m.icon)))]),_:2},1024)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(m.label),1)]),_:2},1032,["onClick"]))),128))])):e.createCommentVNode("",!0),e.createVNode(c,{ref_key:"treeRef",ref:h,data:C.value,"node-key":t.schema.nodeKey||"id",props:x,"default-expand-all":t.schema.ui?.defaultExpandAll,"highlight-current":t.schema.ui?.highlightCurrent,"expand-on-click-node":!1,onNodeClick:l,onNodeContextmenu:k},{default:e.withCtx(({node:m,data:a})=>[e.createElementVNode("span",j,[e.createElementVNode("span",null,e.toDisplayString(m.label),1),b.value.length?(e.openBlock(),e.createElementBlock("span",q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,p=>(e.openBlock(),e.createBlock(d,{key:p.key,content:p.label,placement:"top","show-after":200},{default:e.withCtx(()=>[e.createVNode(D,{link:"",type:"primary",onClick:e.withModifiers(w=>_(p,a),["stop"])},{default:e.withCtx(()=>[p.icon?(e.openBlock(),e.createBlock($,{key:0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(p.icon)))]),_:2},1024)):e.createCommentVNode("",!0)]),_:2},1032,["onClick"])]),_:2},1032,["content"]))),128))])):e.createCommentVNode("",!0)])]),_:1},8,["data","node-key","default-expand-all","highlight-current"]),r.value?(e.openBlock(),e.createElementBlock("div",{key:1,class:"context-menu",style:e.normalizeStyle({left:g.value.x+"px",top:g.value.y+"px"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(N.value,m=>(e.openBlock(),e.createElementBlock("div",{key:m.key,class:"context-menu-item",onClick:a=>_(m,u.value)},[m.icon?(e.openBlock(),e.createBlock($,{key:0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(m.icon)))]),_:2},1024)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(m.label),1)],8,K))),128))],4)):e.createCommentVNode("",!0)])}}}),T=(t,s)=>{const o=t.__vccOpts||t;for(const[f,h]of s)o[f]=h;return o},W=T(O,[["__scopeId","data-v-493d816e"]]);function F(t,s,o){return s.permissions?s.permissions.default?.[t]!==!1:!0}function P(t,s){if(!t)return t;let o=t;const f=s.variables||{};return f.currentNode&&(o=o.replace(/\$currentNode\.id/g,String(f.currentNode.id)),o=o.replace(/\$currentNode\.label/g,f.currentNode.label)),o}const X={key:0,class:"schema-upload"},Y={class:"el-upload__text"},G={class:"el-upload__tip"},H=T(e.defineComponent({__name:"SchemaUpload",props:{schema:{},disabled:{type:Boolean}},emits:["upload-success","upload-error"],setup(t,{emit:s}){const o=t,f=s,h=e.inject("schemaContext",{}),r=e.computed(()=>{const l=h.variables?.currentNode?.meta?.upload||{};return{...o.schema,...l,limit:l.limit??o.schema.limit,maxSize:l.maxSize,minLimit:l.minLimit,accept:l.accept??o.schema.accept,multiple:l.multiple??o.schema.multiple,drag:l.drag??o.schema.drag,autoUpload:l.autoUpload??o.schema.autoUpload}}),g=e.computed(()=>o.schema.headers||{}),u=e.computed(()=>{const l=o.schema.data||{},k={};for(const _ in l){const i=l[_];typeof i=="string"?k[_]=P(i,h):k[_]=i}return k}),C=e.computed(()=>{let l=o.schema.ui?.tipText||"";const k=[];if(r.value.maxSize){const _=(r.value.maxSize/1024/1024).toFixed(1);k.push(`大小限制 ${_}MB`)}return r.value.limit&&k.push(`数量限制 ${r.value.limit}个`),r.value.accept&&k.push(`格式 ${r.value.accept}`),k.length?`${l} (${k.join(", ")})`:l}),x=l=>{const k=r.value.maxSize;return k&&l.size>k?(U.ElMessage.error(`文件大小不能超过 ${(k/1024/1024).toFixed(1)}MB!`),!1):!0},B=()=>{U.ElMessage.warning(`当前限制选择 ${r.value.limit} 个文件`)},b=l=>{f("upload-success",l)},N=l=>{f("upload-error",l)};return(l,k)=>{const _=e.resolveComponent("upload-filled"),i=e.resolveComponent("el-icon"),n=e.resolveComponent("el-button"),y=e.resolveComponent("el-upload");return t.schema.enabled?(e.openBlock(),e.createElementBlock("div",X,[e.createVNode(y,{class:"upload-demo",action:t.schema.action,method:t.schema.method||"post",headers:g.value,data:u.value,multiple:r.value.multiple,drag:r.value.drag,accept:r.value.accept,limit:r.value.limit,"auto-upload":r.value.autoUpload!==!1,disabled:t.disabled,"show-file-list":t.schema.ui?.showFileList,"before-upload":x,"on-exceed":B,onSuccess:b,onError:N},e.createSlots({default:e.withCtx(()=>[r.value.drag?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(i,{class:"el-icon--upload"},{default:e.withCtx(()=>[e.createVNode(_)]),_:1}),e.createElementVNode("div",Y,e.toDisplayString(t.schema.ui?.buttonText||"Drop file here or click to upload"),1)],64)):e.createCommentVNode("",!0)]),_:2},[r.value.drag?void 0:{name:"trigger",fn:e.withCtx(()=>[e.createVNode(n,{type:"primary"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.schema.ui?.buttonText||"Click to upload"),1)]),_:1})]),key:"0"},t.schema.ui?.showTip?{name:"tip",fn:e.withCtx(()=>[e.createElementVNode("div",G,e.toDisplayString(C.value),1)]),key:"1"}:void 0]),1032,["action","method","headers","data","multiple","drag","accept","limit","auto-upload","disabled","show-file-list"])])):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-b2da1f5f"]]),J={class:"schema-table"},Q={key:0,class:"table-toolbar"},Z={key:1,class:"pagination-wrapper"},v=T(e.defineComponent({__name:"SchemaTable",props:{schema:{},files:{}},emits:["action","refresh"],setup(t,{emit:s}){const o=t,f=s,h=e.inject("schemaContext",{}),r=e.ref(!1),g=e.ref(1),u=e.ref(o.schema.ui?.pagination?.pageSize||20),C=e.ref(0),x=e.ref([]),B=e.computed(()=>o.files?o.files:o.schema.dataSource.type==="static"?o.schema.dataSource.data:x.value),b=(i,n)=>{if(!n)return i;if(n==="fileSize"){const y=Number(i);return isNaN(y)?i:y<1024?y+" B":y<1024*1024?(y/1024).toFixed(2)+" KB":(y/1024/1024).toFixed(2)+" MB"}return i},N=(i,n)=>{i.confirm&&!confirm(i.confirm.message||"Are you sure?")||f("action",i.key,n)},l=async()=>{if(o.schema.dataSource.type==="api"){r.value=!0;try{const i=o.schema.dataSource,n={...i.params};o.schema.ui?.pagination?.enabled&&(n.page=g.value,n.pageSize=u.value);for(const y in n)typeof n[y]=="string"&&(n[y]=P(n[y],h));console.log("Fetching Table Data:",i.url,n),i.url}catch(i){console.error(i)}finally{r.value=!1}}},k=i=>{u.value=i,l()},_=i=>{g.value=i,l()};return e.watch(()=>h.variables?.currentNode,i=>{i&&o.schema.dataSource.type==="api"&&l()},{deep:!0}),(i,n)=>{const y=e.resolveComponent("el-icon"),$=e.resolveComponent("el-button"),D=e.resolveComponent("el-table-column"),d=e.resolveComponent("el-table"),c=e.resolveComponent("el-pagination"),m=e.resolveDirective("loading");return e.openBlock(),e.createElementBlock("div",J,[t.schema.toolbarActions?.length?(e.openBlock(),e.createElementBlock("div",Q,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.schema.toolbarActions,a=>(e.openBlock(),e.createBlock($,{key:a.key,type:a.type||"default",onClick:p=>N(a,null)},{default:e.withCtx(()=>[a.icon?(e.openBlock(),e.createBlock(y,{key:0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.icon)))]),_:2},1024)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(a.label),1)]),_:2},1032,["type","onClick"]))),128))])):e.createCommentVNode("",!0),e.withDirectives((e.openBlock(),e.createBlock(d,{data:B.value,stripe:t.schema.ui?.stripe,border:t.schema.ui?.border,size:t.schema.ui?.size,style:{width:"100%",height:"100%",flex:"1"}},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.schema.columns,a=>(e.openBlock(),e.createBlock(D,{key:a.prop,prop:a.prop,label:a.label,width:a.width,align:a.align,fixed:a.fixed,sortable:a.sortable},{default:e.withCtx(p=>[e.createTextVNode(e.toDisplayString(b(p.row[a.prop],a.formatter)),1)]),_:2},1032,["prop","label","width","align","fixed","sortable"]))),128)),t.schema.actions?.length?(e.openBlock(),e.createBlock(D,{key:0,label:"操作",fixed:"right",width:"200"},{default:e.withCtx(a=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.schema.actions,p=>(e.openBlock(),e.createBlock($,{key:p.key,type:p.type||"primary",link:"",onClick:w=>N(p,a.row)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(p.label),1)]),_:2},1032,["type","onClick"]))),128))]),_:1})):e.createCommentVNode("",!0)]),_:1},8,["data","stripe","border","size"])),[[m,r.value]]),t.schema.ui?.pagination?.enabled?(e.openBlock(),e.createElementBlock("div",Z,[e.createVNode(c,{"current-page":g.value,"onUpdate:currentPage":n[0]||(n[0]=a=>g.value=a),"page-size":u.value,"onUpdate:pageSize":n[1]||(n[1]=a=>u.value=a),"page-sizes":[10,20,50,100],layout:t.schema.ui?.pagination?.layout||"total, sizes, prev, pager, next, jumper",total:C.value,onSizeChange:k,onCurrentChange:_},null,8,["current-page","page-size","layout","total"])])):e.createCommentVNode("",!0)])}}}),[["__scopeId","data-v-d92346a5"]]),ee={class:"schema-template"},te={class:"template-container"},oe={class:"tags-wrapper"},le={class:"tag-content"},ne={class:"tpl-name"},ae=T(e.defineComponent({__name:"SchemaTemplate",props:{templates:{}},setup(t){const s=o=>{window.open(o.url,"_blank")};return(o,f)=>{const h=e.resolveComponent("el-icon"),r=e.resolveComponent("el-tag");return e.openBlock(),e.createElementBlock("div",ee,[e.createElementVNode("div",te,[f[0]||(f[0]=e.createElementVNode("span",{class:"label"},"可用模板：",-1)),e.createElementVNode("div",oe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.templates,(g,u)=>(e.openBlock(),e.createBlock(r,{key:u,class:"template-tag",type:"primary",effect:"light",onClick:C=>s(g)},{default:e.withCtx(()=>[e.createElementVNode("span",le,[e.createVNode(h,null,{default:e.withCtx(()=>[e.createVNode(e.unref(A.Download))]),_:1}),e.createElementVNode("span",ne,e.toDisplayString(g.name),1)])]),_:2},1032,["onClick"]))),128))])])])}}}),[["__scopeId","data-v-5468ee4e"]]),ce={key:0,class:"schema-preview-container"},re={class:"custom-header"},ie=["id"],se={class:"header-controls"},de={class:"preview-content"},me={class:"preview-content"},pe=T(e.defineComponent({__name:"SchemaPreview",props:{schema:{},modelValue:{type:Boolean},file:{}},emits:["update:modelValue"],setup(t,{emit:s}){const o=t,f=s,h=e.ref(!1),r=e.computed({get:()=>o.modelValue,set:u=>{f("update:modelValue",u),u||setTimeout(()=>{h.value=!1},300)}}),g=()=>{h.value=!h.value};return e.watch(()=>o.schema.fullscreen,u=>{u!==void 0&&(h.value=u)},{immediate:!0}),(u,C)=>{const x=e.resolveComponent("el-icon"),B=e.resolveComponent("el-button"),b=e.resolveComponent("el-dialog"),N=e.resolveComponent("el-drawer");return r.value?(e.openBlock(),e.createElementBlock("div",ce,[t.schema.mode==="dialog"?(e.openBlock(),e.createBlock(b,{key:0,modelValue:r.value,"onUpdate:modelValue":C[0]||(C[0]=l=>r.value=l),width:t.schema.width,fullscreen:h.value||t.schema.fullscreen,draggable:"","destroy-on-close":"","append-to-body":"",class:"preview-dialog","show-close":!1},{header:e.withCtx(({close:l,titleId:k,titleClass:_})=>[e.createElementVNode("div",re,[e.createElementVNode("span",{id:k,class:e.normalizeClass(_)},e.toDisplayString(t.schema.dialogTitle||"预览"),11,ie),e.createElementVNode("div",se,[e.createVNode(B,{link:"",onClick:g},{default:e.withCtx(()=>[e.createVNode(x,null,{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(h.value?"CopyDocument":"FullScreen")))]),_:1})]),_:1}),e.createVNode(B,{link:"",onClick:l},{default:e.withCtx(()=>[e.createVNode(x,null,{default:e.withCtx(()=>[e.createVNode(e.unref(A.Close))]),_:1})]),_:1},8,["onClick"])])])]),default:e.withCtx(()=>[e.createElementVNode("div",de,[t.file?(e.openBlock(),e.createBlock(e.unref(M),{key:0,url:t.file.url,type:t.file.type,name:t.file.name},null,8,["url","type","name"])):e.createCommentVNode("",!0)])]),_:1},8,["modelValue","width","fullscreen"])):(e.openBlock(),e.createBlock(N,{key:1,modelValue:r.value,"onUpdate:modelValue":C[1]||(C[1]=l=>r.value=l),title:t.schema.dialogTitle||"预览",size:t.schema.width,"destroy-on-close":"","append-to-body":""},{default:e.withCtx(()=>[e.createElementVNode("div",me,[t.file?(e.openBlock(),e.createBlock(e.unref(M),{key:0,url:t.file.url,type:t.file.type,name:t.file.name},null,8,["url","type","name"])):e.createCommentVNode("",!0)])]),_:1},8,["modelValue","title","size"]))])):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-caf5bb4b"]]),fe={class:"tree-upload-container"},he={class:"content-pane"},ue={key:0,class:"top-section"},ke={class:"table-section"},ge={class:"dialog-footer"},I=T(e.defineComponent({__name:"TreeUpload",props:{schema:{},mode:{default:"edit"}},setup(t){const s=t,o=e.ref(null),f=e.ref([]),h=e.ref(!1),r=e.ref(null),g=e.ref(!1),u=e.ref("addRoot"),C=e.reactive({label:""}),x=e.ref(),B=e.ref(null),b=e.reactive({variables:{...s.schema.context?.variables,currentNode:void 0,currentFile:void 0}});e.provide("schemaContext",b);const N=e.computed(()=>{const d=s.schema.tree.ui?.width;return typeof d=="number"?`${d}px`:d||"260px"}),l=e.computed(()=>o.value?.meta?.templates||[]),k=e.computed(()=>o.value?F("upload",s.schema):!1),_=e.computed(()=>{switch(u.value){case"addRoot":return"添加根节点";case"addChild":return"添加子节点";case"addSibling":return"添加本级节点";case"edit":return"编辑节点";default:return"节点操作"}}),i=d=>{if(console.log("Node Selected:",d),o.value=d,b.variables&&(b.variables.currentNode=d),s.schema.table.dataSource.type==="static"){const c=s.schema.table.dataSource.data;f.value=c.filter(m=>m.meta?.nodeId===String(d.id))}},n=(d,c)=>{if(console.log("Tree Action:",d,c),!F(d,s.schema)){alert("Permission Denied");return}if(s.schema.tree.dataSource.type!=="static"){alert(`Action ${d} triggered (API implementation required)`);return}if(d==="delete"){if(!c||!confirm(`确定删除节点 "${c.label}" 吗?`))return;const m=s.schema.tree.dataSource.data,a=p=>{const w=p.findIndex(S=>S.id===c.id);if(w>-1)return p.splice(w,1),!0;for(const S of p)if(S.children&&a(S.children))return!0;return!1};a(m)&&o.value?.id===c.id&&(o.value=null);return}(d==="addRoot"||d==="addChild"||d==="addSibling"||d==="edit")&&(u.value=d,B.value=c,C.label=d==="edit"&&c?c.label:"",g.value=!0,e.nextTick(()=>{x.value?.clearValidate()}))},y=()=>{x.value?.validate(d=>{if(!d||s.schema.tree.dataSource.type!=="static")return;const c=s.schema.tree.dataSource.data,m=C.label,a=u.value,p=B.value;if(a==="addRoot")c.push({id:String(Date.now()),label:m,children:[]});else if(a==="addChild")p&&(p.children||(p.children=[]),p.children.push({id:String(Date.now()),label:m,children:[]}));else if(a==="addSibling"){if(p){const w=S=>{const E=S.findIndex(z=>z.id===p.id);if(E>-1)return S.splice(E+1,0,{id:String(Date.now()),label:m,children:[]}),!0;for(const z of S)if(z.children&&w(z.children))return!0;return!1};w(c)}}else a==="edit"&&p&&(p.label=m);g.value=!1})},$=d=>{if(console.log("Upload Success:",d),s.schema.table.dataSource.type==="static"&&o.value){const c={id:Date.now(),name:"Uploaded File.png",size:1024,url:"#",type:"png",meta:{nodeId:String(o.value.id)}};s.schema.table.dataSource.data.push(c),i(o.value)}},D=(d,c)=>{if(console.log("Table Action:",d,c),b.variables&&(b.variables.currentFile=c),!F(d,s.schema)){alert("Permission Denied");return}if(d==="preview")r.value=c,h.value=!0;else if(d==="delete"&&s.schema.table.dataSource.type==="static"){const m=s.schema.table.dataSource.data.findIndex(a=>a.id===c.id);m>-1&&(s.schema.table.dataSource.data.splice(m,1),o.value&&i(o.value))}};return(d,c)=>{const m=e.resolveComponent("el-input"),a=e.resolveComponent("el-form-item"),p=e.resolveComponent("el-form"),w=e.resolveComponent("el-button"),S=e.resolveComponent("el-dialog");return e.openBlock(),e.createElementBlock("div",fe,[e.createElementVNode("div",{class:"tree-pane",style:e.normalizeStyle({width:N.value})},[e.createVNode(W,{schema:t.schema.tree,onNodeClick:i,onAction:n},null,8,["schema"])],4),e.createElementVNode("div",he,[t.mode==="edit"?(e.openBlock(),e.createElementBlock("div",ue,[l.value&&l.value.length>0?(e.openBlock(),e.createBlock(ae,{key:0,templates:l.value},null,8,["templates"])):e.createCommentVNode("",!0),t.schema.upload?(e.openBlock(),e.createBlock(H,{key:1,schema:t.schema.upload,disabled:!k.value,onUploadSuccess:$},null,8,["schema","disabled"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",ke,[e.createVNode(v,{schema:t.schema.table,files:f.value,onAction:D},null,8,["schema","files"])])]),t.schema.preview?(e.openBlock(),e.createBlock(pe,{key:0,modelValue:h.value,"onUpdate:modelValue":c[0]||(c[0]=E=>h.value=E),schema:t.schema.preview,file:r.value},null,8,["modelValue","schema","file"])):e.createCommentVNode("",!0),e.createVNode(S,{modelValue:g.value,"onUpdate:modelValue":c[3]||(c[3]=E=>g.value=E),title:_.value,width:"400px","append-to-body":"","destroy-on-close":""},{footer:e.withCtx(()=>[e.createElementVNode("span",ge,[e.createVNode(w,{onClick:c[2]||(c[2]=E=>g.value=!1)},{default:e.withCtx(()=>[...c[4]||(c[4]=[e.createTextVNode("取消",-1)])]),_:1}),e.createVNode(w,{type:"primary",onClick:y},{default:e.withCtx(()=>[...c[5]||(c[5]=[e.createTextVNode("确定",-1)])]),_:1})])]),default:e.withCtx(()=>[e.createVNode(p,{model:C,ref_key:"nodeFormRef",ref:x,"label-width":"80px"},{default:e.withCtx(()=>[e.createVNode(a,{label:"节点名称",prop:"label",rules:[{required:!0,message:"请输入节点名称",trigger:"blur"}]},{default:e.withCtx(()=>[e.createVNode(m,{modelValue:C.label,"onUpdate:modelValue":c[1]||(c[1]=E=>C.label=E),placeholder:"请输入节点名称"},null,8,["modelValue"])]),_:1})]),_:1},8,["model"])]),_:1},8,["modelValue","title"])])}}}),[["__scopeId","data-v-346b7c9b"]]);V.TreeUpload=I,V.default=I,Object.defineProperties(V,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/types/index.d.ts

@@ -0,0 +1,158 @@
+export interface TreeUploadSchema {
+    version: string;
+    context?: SchemaContext;
+    tree: TreeSchema;
+    upload?: UploadSchema;
+    table: TableSchema;
+    preview?: PreviewSchema;
+    permissions?: PermissionSchema;
+}
+export interface SchemaContext {
+    variables?: {
+        currentNode?: CategoryNode;
+        currentFile?: FileItem;
+        [key: string]: any;
+    };
+}
+export interface TreeSchema {
+    nodeKey?: string;
+    labelKey?: string;
+    childrenKey?: string;
+    dataSource: TreeDataSource;
+    ui?: TreeUISchema;
+    actions?: TreeActionSchema[];
+}
+export type TreeDataSource = {
+    type: 'static';
+    data: CategoryNode[];
+} | ({
+    type: 'api';
+} & ApiDataSourceBase);
+export interface TreeUISchema {
+    showRoot?: boolean;
+    defaultExpandAll?: boolean;
+    highlightCurrent?: boolean;
+    width?: number | string;
+    lazy?: boolean;
+}
+export interface CategoryNode {
+    id: string | number;
+    label: string;
+    children?: CategoryNode[];
+    meta?: Record<string, any>;
+}
+export type BuiltinTreeAction = 'add' | 'addRoot' | 'addChild' | 'addSibling' | 'delete' | 'edit' | 'upload' | 'download' | 'preview';
+export type TreeAction = BuiltinTreeAction | `custom:${string}`;
+export interface TreeActionSchema {
+    key: TreeAction;
+    label: string;
+    icon?: string;
+    position?: 'node' | 'contextMenu' | 'toolbar';
+    confirm?: {
+        title?: string;
+        message?: string;
+    };
+}
+export interface UploadSchema {
+    enabled?: boolean;
+    action: string;
+    method?: 'post' | 'put';
+    headers?: Record<string, string>;
+    data?: Record<string, any>;
+    multiple?: boolean;
+    limit?: number;
+    accept?: string;
+    drag?: boolean;
+    autoUpload?: boolean;
+    ui?: UploadUISchema;
+}
+export interface UploadUISchema {
+    showTip?: boolean;
+    tipText?: string;
+    buttonText?: string;
+    showFileList?: boolean;
+}
+export interface TableSchema {
+    rowKey?: string;
+    dataSource: TableDataSource;
+    columns: TableColumnSchema[];
+    actions?: TableActionSchema[];
+    toolbarActions?: TableActionSchema[];
+    ui?: TableUISchema;
+}
+export type TableDataSource = {
+    type: 'static';
+    data: FileItem[];
+} | ({
+    type: 'api';
+} & ApiDataSourceBase);
+export interface FileItem {
+    id: string | number;
+    name: string;
+    url: string;
+    type?: string;
+    size?: number;
+    meta?: Record<string, any>;
+}
+export interface TableColumnSchema {
+    prop: string;
+    label: string;
+    width?: number | string;
+    align?: 'left' | 'center' | 'right';
+    formatter?: string;
+    sortable?: boolean;
+    fixed?: 'left' | 'right';
+}
+export interface TableActionSchema {
+    key: TreeAction;
+    label: string;
+    icon?: string;
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    confirm?: {
+        title?: string;
+        message?: string;
+    };
+}
+export interface TableUISchema {
+    stripe?: boolean;
+    border?: boolean;
+    size?: 'small' | 'default' | 'large';
+    pagination?: {
+        enabled: boolean;
+        pageSize?: number;
+        layout?: string;
+    };
+}
+export interface PreviewSchema {
+    enabled?: boolean;
+    mode?: 'dialog' | 'drawer';
+    dialogTitle?: string;
+    width?: string | number;
+    height?: string | number;
+    fullscreen?: boolean;
+}
+export interface PermissionSchema {
+    default?: Partial<Record<TreeAction, boolean>>;
+    rules?: PermissionRuleSchema[];
+}
+export interface PermissionRuleSchema {
+    action: TreeAction;
+    when?: {
+        conditions?: ConditionSchema[];
+        mode?: 'view' | 'edit';
+    };
+    allow: boolean;
+}
+export interface ConditionSchema {
+    field: string;
+    operator: 'eq' | 'neq' | 'in' | 'notIn' | 'exists';
+    value?: any;
+}
+export interface ApiDataSourceBase {
+    url: string;
+    method?: 'get' | 'post';
+    params?: Record<string, any>;
+    responsePath?: string;
+    onError?: 'silent' | 'message' | 'throw';
+    loadingKey?: string;
+}

package/dist/utils/schema-helper.d.ts

@@ -0,0 +1,3 @@
+import { TreeUploadSchema, TreeAction, SchemaContext } from '../types';
+export declare function checkPermission(action: TreeAction, schema: TreeUploadSchema, context: SchemaContext): boolean;
+export declare function replaceVariables(text: string, context: SchemaContext): string;

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "tree-upload-vue3",
+  "version": "1.0.0",
+  "description": "基于 Vue 3 + Element Plus 实现的树形文件管理与上传组件。",
+  "main": "dist/tree-upload-vue3.umd.js",
+  "module": "dist/tree-upload-vue3.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.0.0",
+    "vue": "^3.2.0",
+    "@element-plus/icons-vue": "^2.0.0",
+    "file-preview-vue3-ts": "*"
+  },
+  "devDependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
+    "@types/node": "^25.0.3",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "element-plus": "^2.12.0",
+    "file-preview-vue3-ts": "^0.0.1",
+    "sass": "^1.97.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.25",
+    "vue-tsc": "^3.1.8"
+  }
+}