@ibiz-template/vue3-components 0.7.38-alpha.31 → 0.7.38-alpha.56

package/es/common/custom-theme/custom-theme.controller.mjs

@@ -1,5 +1,5 @@
-import { reactive } from 'vue';
 import { clone } from 'ramda';
+import { reactive } from 'vue';
 import { predefineThemeVars } from './custom-theme-model.mjs';
 
 "use strict";
@@ -10,6 +10,11 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 class CustomThemeController {
+  /**
+   * Creates an instance of CustomThemeController.
+   * @author tony001
+   * @date 2024-12-26 18:12:28
+   */
   constructor() {
     /**
      * 自定义主题状态
@@ -25,6 +30,15 @@ class CustomThemeController {
      * @memberof CustomThemeController
      */
     __publicField(this, "model", []);
+    /**
+     * 模型映射对象，key为value，value值为var对象
+     *
+     * @author tony001
+     * @date 2024-12-27 10:12:57
+     * @private
+     * @type {IData}
+     */
+    __publicField(this, "modelMapping", {});
     /**
      * 预定义类型
      *
@@ -36,18 +50,119 @@ class CustomThemeController {
         codeName: "light",
         label: "\u4EAE\u8272",
         labelLang: "light",
-        color: "#557da5"
+        color: "#557da5",
+        isCustom: false
       },
       {
         codeName: "dark",
         label: "\u6697\u8272",
-        color: "#1c1c1c"
+        labelLang: "dark",
+        color: "#1c1c1c",
+        isCustom: false
+      },
+      {
+        codeName: "blue",
+        label: "\u84DD\u8272",
+        labelLang: "blue",
+        color: "rgba(0, 132, 255, 1)",
+        isCustom: false
+      },
+      {
+        codeName: "user1",
+        label: "\u81EA\u5B9A\u4E491",
+        labelLang: "user1",
+        color: "#999",
+        isCustom: true
+      },
+      {
+        codeName: "user2",
+        label: "\u81EA\u5B9A\u4E492",
+        labelLang: "user2",
+        color: "#888",
+        isCustom: true
+      },
+      {
+        codeName: "user3",
+        label: "\u81EA\u5B9A\u4E493",
+        labelLang: "user3",
+        color: "#777",
+        isCustom: true
       }
     ]);
     this.model = predefineThemeVars;
     const customTheme = ibiz.util.theme.getCustomTheme();
     this.state = clone(customTheme);
     this.state = reactive(this.state);
+    this.model.forEach((item) => {
+      this.initModelMapping(item);
+    });
+  }
+  /**
+   * 初始化模型映射
+   *
+   * @author tony001
+   * @date 2024-12-27 13:12:53
+   * @private
+   * @param {IData} item
+   */
+  initModelMapping(item) {
+    if (item.children && item.children.length > 0) {
+      item.children.forEach((child) => {
+        this.initModelMapping(child);
+      });
+    }
+    if (item.vars && item.vars.length > 0) {
+      item.vars.forEach((varItem) => {
+        this.modelMapping[varItem.value] = varItem;
+      });
+    }
+  }
+  /**
+   * 获取模型编辑数据
+   *
+   * @author tony001
+   * @date 2024-12-27 13:12:48
+   * @public
+   * @return {*}  {IData}
+   */
+  getModelEditData() {
+    const result = {};
+    this.model.forEach((item) => {
+      const tempData = {};
+      this.getSingleGroupModelData(item, tempData);
+      result[item.labelLang] = tempData;
+    });
+    return result;
+  }
+  /**
+   * 获取单个分组的模型数据
+   *
+   * @author tony001
+   * @date 2024-12-27 13:12:05
+   * @private
+   * @param {IData} item
+   * @param {IData} result
+   */
+  getSingleGroupModelData(item, result) {
+    if (item.children && item.children.length > 0) {
+      item.children.forEach((child) => {
+        this.getSingleGroupModelData(child, result);
+      });
+    }
+    if (item.vars && item.vars.length > 0) {
+      item.vars.forEach((varItem) => {
+        this.modelMapping[varItem.value] = varItem;
+        if (varItem.type === "size") {
+          result[varItem.value] = this.getCssVar(varItem.value);
+        } else {
+          let name = varItem.value;
+          if (varItem.className) {
+            name = "".concat(varItem.className, ":").concat(name);
+          }
+          result[varItem.value] = this.getCssVar(name, varItem.defaultValue);
+        }
+      });
+    }
   }
   /**
    * 获取css变量
@@ -57,13 +172,24 @@ class CustomThemeController {
    * @memberof CustomThemeController
    */
   getCssVar(name, defaultVar) {
+    var _a;
     let result = defaultVar || name;
     if (this.state.themeVars && this.state.themeVars[name]) {
       result = this.state.themeVars[name];
     } else {
-      const styles = window.getComputedStyle(document.documentElement);
+      let elt = document.documentElement;
+      let varName = defaultVar || name;
+      if (name.split(":").length === 2) {
+        const className = name.split(":")[0];
+        const element = (_a = document.getElementsByClassName(className)) == null ? void 0 : _a[0];
+        if (element) {
+          elt = element;
+          varName = name.split(":")[1];
+        }
+      }
+      const styles = window.getComputedStyle(elt);
       if (styles) {
-        result = styles.getPropertyValue(defaultVar || name) || result;
+        result = styles.getPropertyValue(varName) || result;
       }
     }
     if (result.toString().endsWith("px")) {
@@ -74,6 +200,110 @@ class CustomThemeController {
     }
     return result;
   }
+  /**
+   * 处理主题变更
+   *
+   * @author tony001
+   * @date 2024-12-26 15:12:57
+   * @param {string} tag
+   * @return {*}  {Promise<void>}
+   */
+  async handleThemeChange(tag) {
+    await ibiz.util.theme.clearCustomThemeParams(this.state.themeTag);
+    this.state.themeTag = tag;
+    this.state.themeVars = {};
+    await this.handleThemePreview(true);
+  }
+  /**
+   * 计算变更主题变量
+   *
+   * @author tony001
+   * @date 2024-12-27 17:12:21
+   * @param {IData} newData
+   * @return {*}  {Promise<void>}
+   */
+  async computeChangeThemeVars(newData) {
+    const changeVars = [];
+    const oldData = this.getModelEditData();
+    Object.keys(newData).forEach((type) => {
+      const newThemeVar = newData[type];
+      Object.keys(newThemeVar).forEach((varName) => {
+        const oldValue = oldData[type][varName];
+        if (oldValue !== newThemeVar[varName]) {
+          changeVars.push({ key: varName, value: newThemeVar[varName] });
+        }
+      });
+    });
+    if (changeVars.length > 0) {
+      changeVars.forEach((item) => {
+        const targetItem = this.modelMapping[item.key];
+        if (targetItem) {
+          if (targetItem.type === "size") {
+            this.calcSizeChange(item.key, Number(item.value), targetItem);
+          } else {
+            let name = item.key;
+            if (targetItem.className) {
+              name = "".concat(targetItem.className, ":").concat(item.key);
+            }
+            this.state.themeVars[name] = item.value;
+          }
+        }
+      });
+    }
+  }
+  /**
+   * 处理主题预览
+   *
+   * @author tony001
+   * @date 2024-12-26 17:12:59
+   * @return {*}  {Promise<void>}
+   */
+  async handleThemePreview(isLoad) {
+    const { themeTag, themeVars } = await ibiz.util.theme.previewCustomTheme(
+      this.state.themeTag,
+      this.state.themeVars,
+      isLoad
+    );
+    this.state.themeTag = themeTag;
+    this.state.themeVars = themeVars;
+  }
+  /**
+   * 处理主题保存
+   *
+   * @author tony001
+   * @date 2024-12-26 18:12:44
+   * @param {boolean} isShare
+   * @return {*}  {Promise<void>}
+   */
+  async handleThemeSave(isShare) {
+    await this.handleThemePreview(false);
+    await ibiz.util.theme.saveCustomTheme(
+      this.state.themeTag,
+      this.state.themeVars,
+      isShare
+    );
+  }
+  /**
+   * 处理主题重置
+   *
+   * @author tony001
+   * @date 2024-12-27 20:12:03
+   * @param {boolean} isShare
+   * @return {*}  {Promise<void>}
+   */
+  async handleThemeReset(isShare) {
+    const res = await ibiz.confirm.info({
+      title: ibiz.i18n.t("control.common.customTheme.resetConfirmation"),
+      desc: isShare ? ibiz.i18n.t("control.common.customTheme.resetConfirmationGlobalDesc") : ibiz.i18n.t("control.common.customTheme.resetConfirmationDesc")
+    });
+    if (!res)
+      return;
+    const { themeVars } = await ibiz.util.theme.resetCustomTheme(
+      this.state.themeTag,
+      isShare
+    );
+    this.state.themeVars = themeVars;
+  }
   /**
    * 计算尺寸改变，同类size批量更改
    *

package/es/common/custom-theme/custom-theme.css

@@ -1 +1 @@
-.ibiz-custom-theme{display:flex;flex-direction:column;height:100%;padding:var(--ibiz-spacing-loose)}.ibiz-custom-theme .ibiz-custom-theme-header .el-button{padding:var(--ibiz-spacing-tight)}.ibiz-custom-theme .ibiz-custom-theme-content{height:auto;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);overflow-y:auto}.ibiz-custom-theme .ibiz-custom-theme-content .el-tabs{height:100%}.ibiz-custom-theme .ibiz-custom-theme-content .el-tabs__content{height:calc(100% - 55px);overflow:auto}.ibiz-custom-theme .ibiz-custom-theme-footer{flex:none;height:64px;padding:var(--ibiz-spacing-base);display:flex;align-items:center;justify-content:flex-start}.ibiz-custom-theme-item{padding:var(--ibiz-spacing-base);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-theme-item__caption{font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-bold);line-height:var(--ibiz-spacing-super-loose)}.ibiz-custom-theme-item__content{padding:var(--ibiz-spacing-base) 0}.ibiz-custom-theme-item__content .el-button{min-width:var(--ibiz-height-control-default)}.ibiz-custom-theme-var{gap:var(--ibiz-spacing-base);padding:var(--ibiz-spacing-extra-tight) 0;display:flex;align-items:center;justify-content:space-between}
+.ibiz-custom-theme{display:flex;flex-direction:column;height:100%;padding:var(--ibiz-spacing-loose)}.ibiz-custom-theme .ibiz-custom-theme-header .el-button{padding:var(--ibiz-spacing-tight)}.ibiz-custom-theme .ibiz-custom-theme-content{flex-grow:1;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);overflow:hidden}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container{width:100%;height:100%}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container .ibiz-custom-theme-edit-container{width:100%;height:100%}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container .ibiz-custom-theme-edit-container.is-hidden{display:none}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container .ibiz-custom-theme-default-container{width:100%;height:100%}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container .ibiz-custom-theme-default-container.is-hidden{display:none}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container .ibiz-custom-theme-default-container .el-tabs{height:100%}.ibiz-custom-theme .ibiz-custom-theme-content .ibiz-custom-theme-content-container .ibiz-custom-theme-default-container .el-tabs__content{height:calc(100% - 55px);overflow:auto}.ibiz-custom-theme .ibiz-custom-theme-footer{flex:none;height:64px;padding:var(--ibiz-spacing-base);display:flex;align-items:center;justify-content:flex-start}.ibiz-custom-theme .ibiz-custom-theme-footer .el-button+.el-dropdown{margin-left:12px}.ibiz-custom-theme-item{padding:var(--ibiz-spacing-base);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-custom-theme-item__caption{font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-bold);line-height:var(--ibiz-spacing-super-loose)}.ibiz-custom-theme-item__container{display:flex;align-items:center;justify-content:space-between}.ibiz-custom-theme-item__content{padding:var(--ibiz-spacing-base) 0}.ibiz-custom-theme-item__content .el-button{min-width:var(--ibiz-height-control-default)}.ibiz-custom-theme-item .ibiz-custom-theme-content-setting{font-size:var(--el-font-size-base);cursor:pointer}.ibiz-custom-theme-var{gap:var(--ibiz-spacing-base);padding:var(--ibiz-spacing-extra-tight) 0;display:flex;align-items:center;justify-content:space-between}

package/es/common/custom-theme/custom-theme.d.ts

@@ -10,10 +10,12 @@ export declare const CustomTheme: import("vue").DefineComponent<{
 }, {
     ns: import("@ibiz-template/core").Namespace;
     c: CustomThemeController;
-    handlePreview: () => void;
-    handleReset: () => void;
+    showSaveAndShare: import("vue").ComputedRef<boolean>;
+    handlePreview: () => Promise<void>;
+    handleReset: () => Promise<void>;
     handleSave: () => Promise<void>;
-    handleShare: () => Promise<void>;
+    handleSaveAndShare: () => Promise<void>;
+    handleResetAndShare: () => Promise<void>;
     renderHeader: () => JSX.Element;
     renderContent: () => JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/es/common/custom-theme/custom-theme.mjs

@@ -1,8 +1,10 @@
-import { isVNode, defineComponent, getCurrentInstance, ref, createVNode, resolveComponent } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { isVNode, defineComponent, getCurrentInstance, ref, watch, nextTick, onMounted, onUnmounted, computed, createVNode, resolveComponent } from 'vue';
+import { useNamespace, useUIStore } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';
+import '../../node_modules/.pnpm/@monaco-editor_loader@1.4.0_monaco-editor@0.45.0/node_modules/@monaco-editor/loader/lib/es/index.mjs';
 import { CustomThemeController } from './custom-theme.controller.mjs';
 import './custom-theme.css';
+import loader from '../../node_modules/.pnpm/@monaco-editor_loader@1.4.0_monaco-editor@0.45.0/node_modules/@monaco-editor/loader/lib/es/loader/index.mjs';
 
 "use strict";
 function _isSlot(s) {
@@ -22,8 +24,93 @@ const CustomTheme = /* @__PURE__ */ defineComponent({
     const vue = getCurrentInstance().proxy;
     const c = new CustomThemeController();
     const activeTab = ref(0);
-    const handleThemeChange = (codeName) => {
-      c.state.themeTag = codeName;
+    const codeEditRef = ref();
+    const currentVal = ref("");
+    const isEditMode = ref(false);
+    let editor;
+    let monacoEditor;
+    const {
+      UIStore
+    } = useUIStore();
+    const getMonacoTheme = (name) => {
+      return name === "dark" ? "vs-".concat(UIStore.theme) : "vs";
+    };
+    watch(() => UIStore.theme, (newVal) => {
+      monacoEditor.setTheme(getMonacoTheme(newVal));
+    });
+    const editorInit = () => {
+      nextTick(() => {
+        loader.config({
+          paths: {
+            vs: "".concat(ibiz.env.pluginBaseUrl, "/monaco-editor@0.45.0/min/vs")
+          }
+        });
+        loader.init().then((loaderMonaco) => {
+          if (!editor) {
+            monacoEditor = loaderMonaco.editor;
+            editor = monacoEditor.create(codeEditRef.value, {
+              language: "json",
+              // 语言支持自行查阅demo
+              theme: getMonacoTheme(UIStore.theme),
+              foldingStrategy: "indentation",
+              renderLineHighlight: "all",
+              // 行亮
+              selectOnLineNumbers: true,
+              // 显示行号
+              minimap: {
+                enabled: true
+              },
+              fontSize: 16,
+              // 字体大小
+              scrollBeyondLastLine: false,
+              // 取消代码后面一大段空白
+              overviewRulerBorder: false
+              // 不要滚动条的边框
+            });
+          }
+          setTimeout(() => {
+            editor.layout();
+            editor.setValue(currentVal.value);
+          });
+          window.addEventListener("resize", () => {
+            editor.layout();
+          });
+        });
+      });
+    };
+    onMounted(() => {
+      editorInit();
+    });
+    onUnmounted(() => {
+      editor == null ? void 0 : editor.dispose();
+    });
+    const showSaveAndShare = computed(() => {
+      if (ibiz.appData) {
+        if (ibiz.appData.enablepermissionvalid === false) {
+          return true;
+        }
+        if (ibiz.appData.unires.length) {
+          const targetUnire = ibiz.appData.unires.find((unire) => {
+            return unire === "UNIRES_CLOUD_CONF_CONFIG_SHARE";
+          });
+          if (targetUnire) {
+            return true;
+          }
+        }
+      }
+      return false;
+    });
+    const handleThemeChange = async (codeName) => {
+      await c.handleThemeChange(codeName);
+      if (isEditMode.value) {
+        const result = c.getModelEditData();
+        nextTick(() => {
+          currentVal.value = JSON.stringify(result, null, 2);
+          editor == null ? void 0 : editor.setValue(currentVal.value);
+          editor == null ? void 0 : editor.layout();
+        });
+      }
+      vue.$forceUpdate();
     };
     const handleColorChange = (varName, color, className) => {
       let name = varName;
@@ -35,35 +122,52 @@ const CustomTheme = /* @__PURE__ */ defineComponent({
     const handleSizeChange = (varName, size, item) => {
       c.calcSizeChange(varName, size, item);
     };
-    const handlePreview = () => {
-      ibiz.util.theme.previewCustomTheme(c.state.themeTag, c.state.themeVars);
+    const handlePreview = async () => {
+      if (isEditMode.value && editor) {
+        await c.computeChangeThemeVars(JSON.parse(editor.getValue()));
+      }
+      await c.handleThemePreview(false);
       vue.$forceUpdate();
     };
     const handleSave = async () => {
-      ibiz.util.theme.previewCustomTheme(c.state.themeTag, c.state.themeVars);
+      if (isEditMode.value && editor) {
+        await c.computeChangeThemeVars(JSON.parse(editor.getValue()));
+      }
+      await c.handleThemeSave(false);
       vue.$forceUpdate();
-      await ibiz.util.theme.saveCustomTheme(c.state.themeTag, c.state.themeVars);
     };
-    const handleReset = () => {
-      c.state.themeVars = {};
-      ibiz.util.theme.resetCustomTheme();
+    const handleSaveAndShare = async () => {
+      if (isEditMode.value && editor) {
+        await c.computeChangeThemeVars(JSON.parse(editor.getValue()));
+      }
+      await c.handleThemeSave(true);
       vue.$forceUpdate();
     };
-    const handleShare = async () => {
-      ibiz.util.theme.previewCustomTheme(c.state.themeTag, c.state.themeVars);
+    const handleReset = async () => {
+      await c.handleThemeReset(false);
+      if (isEditMode.value) {
+        const result = c.getModelEditData();
+        nextTick(() => {
+          currentVal.value = JSON.stringify(result, null, 2);
+          editor == null ? void 0 : editor.setValue(currentVal.value);
+          editor == null ? void 0 : editor.layout();
+        });
+      }
       vue.$forceUpdate();
-      await ibiz.util.theme.saveCustomTheme(c.state.themeTag, c.state.themeVars);
-      const shareUrl = await ibiz.util.theme.shareCustomTheme(c.state.themeTag, c.state.themeVars);
-      if (shareUrl) {
-        const confirm = await ibiz.confirm.info({
-          title: ibiz.i18n.t("control.common.customTheme.confirmCopyLink"),
-          desc: "".concat(shareUrl)
+    };
+    const handleResetAndShare = async () => {
+      await c.handleThemeReset(true);
+      if (isEditMode.value) {
+        const result = c.getModelEditData();
+        nextTick(() => {
+          currentVal.value = JSON.stringify(result, null, 2);
+          editor == null ? void 0 : editor.setValue(currentVal.value);
+          editor == null ? void 0 : editor.layout();
         });
-        if (confirm) {
-          ibiz.util.text.copy(shareUrl);
-        }
       }
+      vue.$forceUpdate();
     };
+    const predefineColors = ref(["rgb(241, 4, 4)", "rgb(242, 76, 4)", "rgb(238, 153, 33)", "rgb(98, 230, 10)", "rgb(10, 230, 164)", "rgb(3, 144, 245)", "rgb(3, 7, 245)", "rgb(108, 3, 245)", "rgb(245, 3, 241)", "rgb(245, 3, 92)"]);
     const renderColorPicker = (data) => {
       let {
         value
@@ -72,6 +176,7 @@ const CustomTheme = /* @__PURE__ */ defineComponent({
         value = "".concat(data.className, ":").concat(value);
       }
       return createVNode(resolveComponent("el-color-picker"), {
+        "predefine": predefineColors.value,
         "onChange": (val) => {
           handleColorChange(data.value, val, data.className);
         },
@@ -115,12 +220,41 @@ const CustomTheme = /* @__PURE__ */ defineComponent({
         }, [ibiz.i18n.t("control.common.customTheme.".concat(data.labelLang))]), content]);
       })])]);
     };
+    const handAdvancedSetting = async () => {
+      const tempIsEditMode = !isEditMode.value;
+      if (isEditMode.value) {
+        if (editor) {
+          await c.computeChangeThemeVars(JSON.parse(editor.getValue()));
+        }
+        isEditMode.value = tempIsEditMode;
+        vue.$forceUpdate();
+      } else {
+        const result = c.getModelEditData();
+        isEditMode.value = tempIsEditMode;
+        nextTick(() => {
+          currentVal.value = JSON.stringify(result, null, 2);
+          editor == null ? void 0 : editor.setValue(currentVal.value);
+          editor == null ? void 0 : editor.layout();
+          vue.$forceUpdate();
+        });
+      }
+    };
+    const renderAdvancedSetting = () => {
+      return createVNode("span", {
+        "class": ns.b("content-setting"),
+        "onClick": () => {
+          handAdvancedSetting();
+        }
+      }, [isEditMode.value ? ibiz.i18n.t("control.common.customTheme.closeModelEdit") : ibiz.i18n.t("control.common.customTheme.modelEdit")]);
+    };
     const renderHeader = () => {
       return createVNode("div", {
         "class": ns.b("item")
       }, [createVNode("div", {
         "class": ns.be("item", "caption")
       }, [ibiz.i18n.t("control.common.customTheme.themeColor")]), createVNode("div", {
+        "class": ns.be("item", "container")
+      }, [createVNode("div", {
         "class": ns.be("item", "content")
       }, [c.predefineType.map((item) => {
         return createVNode(resolveComponent("el-button"), {
@@ -134,11 +268,18 @@ const CustomTheme = /* @__PURE__ */ defineComponent({
             "name": "checkmark-sharp"
           }, null)]
         });
-      })])]);
+      })]), renderAdvancedSetting()])]);
     };
     const renderContent = () => {
       let _slot2;
-      return createVNode(resolveComponent("el-tabs"), {
+      return createVNode("div", {
+        "class": ns.b("content-container")
+      }, [createVNode("div", {
+        "ref": codeEditRef,
+        "class": [ns.b("edit-container"), ns.is("hidden", !isEditMode.value)]
+      }, null), createVNode("div", {
+        "class": [ns.b("default-container"), ns.is("hidden", isEditMode.value)]
+      }, [createVNode(resolveComponent("el-tabs"), {
         "modelValue": activeTab.value,
         "onUpdate:modelValue": ($event) => activeTab.value = $event
       }, _isSlot(_slot2 = c.model.map((item, index) => {
@@ -151,15 +292,17 @@ const CustomTheme = /* @__PURE__ */ defineComponent({
         });
       })) ? _slot2 : {
         default: () => [_slot2]
-      });
+      })])]);
     };
     return {
       ns,
       c,
+      showSaveAndShare,
       handlePreview,
       handleReset,
       handleSave,
-      handleShare,
+      handleSaveAndShare,
+      handleResetAndShare,
       renderHeader,
       renderContent
     };
@@ -186,6 +329,27 @@ const CustomTheme = /* @__PURE__ */ defineComponent({
       "onClick": this.handleReset
     }, _isSlot(_slot5 = ibiz.i18n.t("control.common.customTheme.reset")) ? _slot5 : {
       default: () => [_slot5]
+    }), this.showSaveAndShare && createVNode(resolveComponent("el-dropdown"), {
+      "split-button": true,
+      "type": "primary",
+      "trigger": "click"
+    }, {
+      default: () => {
+        return ibiz.i18n.t("control.common.customTheme.adminOperation");
+      },
+      dropdown: () => {
+        return createVNode(resolveComponent("el-dropdown-menu"), null, {
+          default: () => [createVNode(resolveComponent("el-dropdown-item"), null, {
+            default: () => [createVNode("span", {
+              "onClick": this.handleSaveAndShare
+            }, [ibiz.i18n.t("control.common.customTheme.saveAndShare")])]
+          }), createVNode(resolveComponent("el-dropdown-item"), null, {
+            default: () => [createVNode("span", {
+              "onClick": this.handleResetAndShare
+            }, [ibiz.i18n.t("control.common.customTheme.resetAndShare")])]
+          })]
+        });
+      }
     })])]);
   }
 });

package/es/common/data-import/data-import.mjs

@@ -43,14 +43,15 @@ const DataImport = /* @__PURE__ */ defineComponent({
       props.dismiss();
     };
     const onLinkClick = async () => {
-      downloadImportTemplate(props.appDataEntity, props.dataImport);
+      downloadImportTemplate(props.appDataEntity, props.dataImport, props.context, props.params);
     };
     const selectFile = async () => {
       isLoading.value = true;
       const result = await selectAndImport({
         appDataEntity: props.appDataEntity,
         dataImport: props.dataImport,
-        context: props.context
+        context: props.context,
+        params: props.params
       });
       if (result.cancel) {
         isLoading.value = false;

package/es/common/data-import2/data-import2.mjs

@@ -1,8 +1,7 @@
 import { isVNode, defineComponent, ref, watch, onMounted, computed, withDirectives, createVNode, resolveComponent, resolveDirective } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import qs from 'qs';
-import { getCookie } from 'qx-util';
-import { CoreConst, showTitle } from '@ibiz-template/core';
+import { getAppCookie, CoreConst, showTitle } from '@ibiz-template/core';
 import { clone } from 'ramda';
 import './data-import2.css';
 import { getDefaultDataImport, getImportSchema, updateImportSchema, createImportSchema, asyncImportData2, fetchImportSchemas } from '@ibiz-template/runtime';
@@ -236,7 +235,7 @@ const DataImport2 = /* @__PURE__ */ defineComponent({
       columnMappingListQuery();
     });
     const headers = ref({
-      ["".concat(ibiz.env.tokenHeader, "Authorization")]: "".concat(ibiz.env.tokenPrefix, "Bearer ").concat(getCookie(CoreConst.TOKEN))
+      ["".concat(ibiz.env.tokenHeader, "Authorization")]: "".concat(ibiz.env.tokenPrefix, "Bearer ").concat(getAppCookie(CoreConst.TOKEN))
     });
     const UploadUrl = computed(() => {
       let uploadFileUrl;

package/es/common/grid-setting/grid-setting.d.ts

@@ -26,7 +26,6 @@ export declare const IBizGridSetting: import("vue").DefineComponent<{
     isDraggable: import("vue").ComputedRef<boolean>;
     handleClick: (dragColumnState: IColumnState) => void;
     onDragChange: (evt: IData) => Promise<void>;
-    onShowNavView: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     columnStates: {
         type: PropType<IColumnState[]>;