@minilo/ui 0.0.1 → 0.0.3

package/minilo/dist/index.full.js

@@ -176,8 +176,8 @@ function useResizeObserver(target, callback, options = {}) {
   };
 }
 
-const _hoisted_1$2 = ["id"];
-var _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$3 = ["id"];
+var _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "MlChart"
   },
@@ -278,7 +278,7 @@ var _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
             id: __props.id,
             ref_key: "echartRef",
             ref: echartRef
-          }, null, 10, _hoisted_1$2), [
+          }, null, 10, _hoisted_1$3), [
             [vue.vShow, !formatEmpty.value]
           ]),
           formatEmpty.value ? vue.renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
@@ -293,7 +293,7 @@ var _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const MlChart = withInstall(_sfc_main$8);
+const MlChart = withInstall(_sfc_main$c);
 
 var SearchTypeEnum = /* @__PURE__ */ ((SearchTypeEnum2) => {
   SearchTypeEnum2[SearchTypeEnum2["ITEM"] = 1] = "ITEM";
@@ -2164,7 +2164,7 @@ const Icon = vue.defineComponent((props, { emit }) => {
     emits: ['load'],
 });
 
-var _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+var _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   ...{ name: "MlSearch" },
   __name: "index",
   props: /* @__PURE__ */ vue.mergeModels(searchProps, {
@@ -5477,10 +5477,14 @@ class TinyColor {
     }
 }
 
+// 将颜色转换为HSL格式
 function convertToHsl(color) {
+  // 使用TinyColor库将颜色转换为HSL格式
   const { a, h, l, s } = new TinyColor(color).toHsl();
+  // 将HSL格式转换为字符串
   const hsl = `hsl(${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%)`;
-  return a < 1 ? `${hsl} ${a}` : hsl;
+  // 如果颜色的透明度小于1，则返回带有透明度的HSL格式
+  return a < 1 ? `${hsl} ${a}` : hsl
 }
 
 function isPlainObject(value) {
@@ -5539,34 +5543,54 @@ function createDefu(merger) {
 }
 const defu = createDefu();
 
+/**
+ * @description 判断url是否是http或https
+ * @author xieshuhong
+ * @export
+ * @param {string} url
+ * @return {*}
+ */
+/**
+ * @description 根据多层级键路径从对象中获取值
+ * @author xieshuhong
+ * @param {Object} obj - 要查询的对象
+ * @param {string} path - 键路径，如 'a.b' 或 'a.b.c'
+ * @param {any} [defaultValue] - 可选，路径不存在时返回的默认值
+ * @returns {any} 路径对应的 value 或 defaultValue
+ */
 function getNestedValue(obj, path, defaultValue) {
-  if (typeof obj !== "object" || obj === null || !path) {
-    return defaultValue;
+  // 处理边界情况：如果obj不是对象或path为空，直接返回默认值
+  if (typeof obj !== 'object' || obj === null || !path) {
+    return defaultValue
   }
-  const keys = path.split(".").filter((key) => key !== "");
+  // 将路径按 '.' 分割成数组（支持处理空字符串和连续点的情况）
+  const keys = path.split('.').filter((key) => key !== '');
+  // 逐层访问对象属性
   return keys.reduce((current, key) => {
-    if (typeof current !== "object" || current === null) {
-      return defaultValue;
+    // 如果当前值不是对象，直接返回默认值（避免访问非对象的属性）
+    if (typeof current !== 'object' || current === null) {
+      return defaultValue
     }
-    return current[key] !== void 0 ? current[key] : defaultValue;
-  }, obj);
+    // 访问下一级属性
+    return current[key] !== undefined ? current[key] : defaultValue
+  }, obj)
 }
 
 const config = {
   theme: {
-    colorDestructive: "hsl(348 100% 61%)",
-    colorPrimary: "hsl(212 100% 45%)",
-    colorSuccess: "hsl(144 57% 58%)",
-    colorWarning: "hsl(42 84% 61%)"
+    colorDestructive: 'hsl(348 100% 61%)',
+    colorPrimary: 'hsl(212 100% 45%)',
+    colorSuccess: 'hsl(144 57% 58%)',
+    colorWarning: 'hsl(42 84% 61%)'
   },
   sidebar: {
     collapse: false
   },
   app: {
-    locale: "zh-CN",
-    name: "Minilo Adminss",
-    logo: "",
-    defaultHomePath: "/"
+    locale: 'zh-CN',
+    name: 'Minilo Adminss',
+    logo: '',
+    defaultHomePath: '/'
   },
   transition: {
     progress: true
@@ -5574,9 +5598,9 @@ const config = {
 };
 
 class StorageManager {
-  constructor({ prefix = "", storageType = "localStorage" } = {}) {
+  constructor({ prefix = '', storageType = 'localStorage' } = {}) {
     this.prefix = prefix;
-    this.storage = storageType === "localStorage" ? window.localStorage : window.sessionStorage;
+    this.storage = storageType === 'localStorage' ? window.localStorage : window.sessionStorage;
   }
   /**
    * 清除所有带前缀的存储项
@@ -5598,8 +5622,8 @@ class StorageManager {
     for (let i = 0; i < this.storage.length; i++) {
       const key = this.storage.key(i);
       if (key && key.startsWith(this.prefix)) {
-        const shortKey = key.replace(this.prefix, "");
-        this.getItem(shortKey);
+        const shortKey = key.replace(this.prefix, '');
+        this.getItem(shortKey); // 调用 getItem 方法检查并移除过期项
       }
     }
   }
@@ -5613,19 +5637,19 @@ class StorageManager {
     const fullKey = this.getFullKey(key);
     const itemStr = this.storage.getItem(fullKey);
     if (!itemStr) {
-      return defaultValue;
+      return defaultValue
     }
     try {
       const item = JSON.parse(itemStr);
       if (item.expiry && Date.now() > item.expiry) {
         this.storage.removeItem(fullKey);
-        return defaultValue;
+        return defaultValue
       }
-      return item.value;
+      return item.value
     } catch (error) {
       console.error(`Error parsing item with key "${fullKey}":`, error);
-      this.storage.removeItem(fullKey);
-      return defaultValue;
+      this.storage.removeItem(fullKey); // 如果解析失败，删除该项
+      return defaultValue
     }
   }
   /**
@@ -5644,7 +5668,7 @@ class StorageManager {
    */
   setItem(key, value, ttl) {
     const fullKey = this.getFullKey(key);
-    const expiry = ttl ? Date.now() + ttl : void 0;
+    const expiry = ttl ? Date.now() + ttl : undefined;
     const item = { expiry, value };
     try {
       this.storage.setItem(fullKey, JSON.stringify(item));
@@ -5658,7 +5682,7 @@ class StorageManager {
    * @returns 带前缀的完整键
    */
   getFullKey(key) {
-    return `${this.prefix}-${key}`;
+    return `${this.prefix}-${key}`
   }
 }
 
@@ -5713,29 +5737,34 @@ function getColors(color, variants = _variants) {
   return colors;
 }
 
-function executeUpdateCSSVariables(variables, id = "__minilo-styles__") {
-  const styleElement = document.querySelector(`#${id}`) || document.createElement("style");
+function executeUpdateCSSVariables(variables, id = '__minilo-styles__') {
+  // 获取或创建内联样式表元素
+  const styleElement = document.querySelector(`#${id}`) || document.createElement('style');
   styleElement.id = id;
-  let cssText = ":root {";
+  // 构建要更新的 CSS 变量的样式文本
+  let cssText = ':root {';
   for (const key in variables) {
     if (Object.prototype.hasOwnProperty.call(variables, key)) {
       cssText += `${key}: ${variables[key]};`;
     }
   }
-  cssText += "}";
+  cssText += '}';
+  // 将样式文本赋值给内联样式表
   styleElement.textContent = cssText;
+  // 将内联样式表添加到文档头部
   if (!document.querySelector(`#${id}`)) {
     setTimeout(() => {
       document.head.append(styleElement);
     });
   }
 }
+// 根据某个色值生成色值阶梯对象，key=500时为其默认初始值，也就是默认参数
 function generatorColorVariables(colorItems) {
   const colorVariables = {};
   colorItems.forEach(({ alias, color, name }) => {
     if (color) {
       const colorsMap = getColors(new TinyColor(color).toHexString());
-      let mainColor = colorsMap["500"];
+      let mainColor = colorsMap['500'];
       const colorKeys = Object.keys(colorsMap);
       colorKeys.forEach((key) => {
         const colorValue = colorsMap[key];
@@ -5745,7 +5774,7 @@ function generatorColorVariables(colorItems) {
           if (alias) {
             colorVariables[`--${alias}-${key}`] = hslColor;
           }
-          if (key === "500") {
+          if (key === '500') {
             mainColor = hslColor;
           }
         }
@@ -5755,31 +5784,38 @@ function generatorColorVariables(colorItems) {
       }
     }
   });
-  return colorVariables;
+  return colorVariables
 }
 function updateCSSVariables(config) {
   const theme = config?.theme ?? {};
-  if (Reflect.has(theme, "colorPrimary") || Reflect.has(theme, "colorDestructive") || Reflect.has(theme, "colorSuccess") || Reflect.has(theme, "colorWarning")) {
+  if (
+    Reflect.has(theme, 'colorPrimary') ||
+    Reflect.has(theme, 'colorDestructive') ||
+    Reflect.has(theme, 'colorSuccess') ||
+    Reflect.has(theme, 'colorWarning')
+  ) {
     updateMainColorVariables(config);
   }
 }
 function updateMainColorVariables(config) {
   if (!config.theme) {
-    return;
+    return
   }
   const { colorDestructive, colorPrimary, colorSuccess, colorWarning } = config.theme;
   const colorVariables = generatorColorVariables([
-    { color: colorPrimary, name: "primary" },
-    { alias: "warning", color: colorWarning, name: "yellow" },
-    { alias: "success", color: colorSuccess, name: "green" },
-    { alias: "destructive", color: colorDestructive, name: "red" }
+    { color: colorPrimary, name: 'primary' },
+    { alias: 'warning', color: colorWarning, name: 'yellow' },
+    { alias: 'success', color: colorSuccess, name: 'green' },
+    { alias: 'destructive', color: colorDestructive, name: 'red' }
   ]);
+  // 要设置的 CSS 变量映射
   const colorMappings = {
-    "--green-500": "--success",
-    "--primary-500": "--primary",
-    "--red-500": "--destructive",
-    "--yellow-500": "--warning"
+    '--green-500': '--success',
+    '--primary-500': '--primary',
+    '--red-500': '--destructive',
+    '--yellow-500': '--warning'
   };
+  // 统一处理颜色变量的更新
   Object.entries(colorMappings).forEach(([sourceVar, targetVar]) => {
     const colorValue = colorVariables[sourceVar];
     if (colorValue) {
@@ -5789,7 +5825,8 @@ function updateMainColorVariables(config) {
   executeUpdateCSSVariables(colorVariables);
 }
 
-const STORAGE_KEY = "config";
+const STORAGE_KEY = 'config';
+// 用户配置引导类
 class Guider {
   constructor() {
     this.isInitialized = false;
@@ -5801,7 +5838,7 @@ class Guider {
   // 初始化配置
   initConfig({ config: config$1, namespace }) {
     if (this.isInitialized) {
-      return;
+      return
     }
     this.cache = new StorageManager({ prefix: namespace });
     const mergeDefaultConfig = defu({}, config$1, config);
@@ -5822,113 +5859,144 @@ class Guider {
   }
   // 加载配置
   loadConfig() {
-    return this.cache?.getItem(STORAGE_KEY);
+    return this.cache?.getItem(STORAGE_KEY)
   }
   // 获取配置
   getConfig() {
-    return vue.readonly(this.state);
+    return vue.readonly(this.state)
   }
 }
 const guider = new Guider();
 guider.getConfig();
 
-const initRequestInstance = (extendConfig = {}, interceptorsRequestFn = () => {
-}, interceptorsResponseFn = () => {
-}) => {
+// 创建请求实例
+const initRequestInstance = (
+  extendConfig = {},
+  interceptorsRequestFn = () => {},
+  interceptorsResponseFn = () => {}
+) => {
   const axiosConfig = defu({}, extendConfig, {
-    baseURL: "/",
-    // 从环境变量获取基础URL
-    timeout: 1e4,
-    // 超时时间
+    baseURL: '/', // 从环境变量获取基础URL
+    timeout: 10000, // 超时时间
     headers: {
-      "Content-Type": "application/json;charset=utf-8"
+      'Content-Type': 'application/json;charset=utf-8'
     }
   });
   const instance = axios.create(axiosConfig);
+  // 请求拦截器
   instance.interceptors.request.use(
     (config) => {
       interceptorsRequestFn(config);
+      // 添加请求到pending列表，处理重复请求
       addPendingRequest(config);
-      return config;
+      // 可以在这里添加其他请求处理逻辑，如请求加载动画等
+      return config
     },
     (error) => {
-      return Promise.reject(error);
+      // 请求错误处理
+      return Promise.reject(error)
     }
   );
+  // 响应拦截器
   instance.interceptors.response.use(
     (response) => {
       interceptorsResponseFn(response);
+      // 从pending列表移除请求
       removePendingRequest(response.config);
       const data = response.data;
       console.log(data);
+      // 根据实际后端接口规范处理响应
       if (data.code === 200) {
         return Promise.resolve({
           ...response,
           ...data,
           data: data.data
-        });
+        })
       } else {
-        elementPlus.ElMessage.error(data.msg || "\u8BF7\u6C42\u5931\u8D25");
-        return Promise.reject(new Error(data.msg || "\u8BF7\u6C42\u5931\u8D25"));
+        // 非成功状态，显示错误信息
+        elementPlus.ElMessage.error(data.msg || '请求失败');
+        return Promise.reject(new Error(data.msg || '请求失败'))
       }
     },
     (error) => {
-      console.log("\u8BF7\u6C42\u53D1\u751F\u9519\u8BEF>>>>>>>>>>>>>>>>>>\uFF1A", error);
+      console.log('请求发生错误>>>>>>>>>>>>>>>>>>：', error);
+      // 请求完成后从pending列表移除
       if (error.config) {
         removePendingRequest(error.config);
       }
+      // 处理取消请求的错误
       if (axios.isCancel(error)) {
-        console.warn("\u8BF7\u6C42\u5DF2\u88AB\u53D6\u6D88:", error.message);
-        return Promise.reject(new Error("\u8BF7\u6C42\u5DF2\u88AB\u53D6\u6D88"));
+        console.warn('请求已被取消:', error.message);
+        return Promise.reject(new Error('请求已被取消'))
       }
+      // 处理网络错误
       if (!window.navigator.onLine) {
-        elementPlus.ElMessage.error("\u7F51\u7EDC\u8FDE\u63A5\u5DF2\u65AD\u5F00\uFF0C\u8BF7\u68C0\u67E5\u7F51\u7EDC");
-        return Promise.reject(new Error("\u7F51\u7EDC\u8FDE\u63A5\u5DF2\u65AD\u5F00"));
+        elementPlus.ElMessage.error('网络连接已断开，请检查网络');
+        return Promise.reject(new Error('网络连接已断开'))
       }
+      // 处理HTTP错误状态码
       const { response } = error;
       if (response) {
         switch (response.status) {
           case 401:
-            elementPlus.ElMessage.error("\u8EAB\u4EFD\u9A8C\u8BC1\u5931\u8D25\uFF0C\u8BF7\u91CD\u65B0\u767B\u5F55");
-            break;
+            elementPlus.ElMessage.error('身份验证失败，请重新登录');
+            // 可以在这里添加跳转到登录页的逻辑
+            break
           case 403:
-            elementPlus.ElMessage.error("\u6CA1\u6709\u6743\u9650\u6267\u884C\u6B64\u64CD\u4F5C");
-            break;
+            elementPlus.ElMessage.error('没有权限执行此操作');
+            break
           case 404:
-            elementPlus.ElMessage.error("\u8BF7\u6C42\u7684\u8D44\u6E90\u4E0D\u5B58\u5728");
-            break;
+            elementPlus.ElMessage.error('请求的资源不存在');
+            break
           case 500:
-            elementPlus.ElMessage.error("\u670D\u52A1\u5668\u5185\u90E8\u9519\u8BEF");
-            break;
+            elementPlus.ElMessage.error('服务器内部错误');
+            break
           default:
-            elementPlus.ElMessage.error(`\u8BF7\u6C42\u9519\u8BEF: ${response.status}`);
+            elementPlus.ElMessage.error(`请求错误: ${response.status}`);
         }
       } else {
-        elementPlus.ElMessage.error("\u8BF7\u6C42\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u91CD\u8BD5");
+        elementPlus.ElMessage.error('请求失败，请稍后重试');
       }
-      return Promise.reject(error);
+      return Promise.reject(error)
     }
   );
-  return instance;
+  return instance
 };
-const pendingRequests = /* @__PURE__ */ new Map();
+// 存储当前正在进行的请求
+const pendingRequests = new Map();
+/**
+ * 生成请求唯一标识
+ * @param {Object} config 请求配置
+ * @returns {String} 唯一标识
+ */
 const generateRequestKey = (config) => {
   const { method, url, params, data } = config;
-  const paramsStr = params ? JSON.stringify(params) : "";
-  const dataStr = data ? JSON.stringify(data) : "";
-  return `${method}-${url}-${paramsStr}-${dataStr}`;
+  // 序列化参数，确保相同参数生成相同key
+  const paramsStr = params ? JSON.stringify(params) : '';
+  const dataStr = data ? JSON.stringify(data) : '';
+  return `${method}-${url}-${paramsStr}-${dataStr}`
 };
+/**
+ * 添加请求到pending列表
+ * @param {Object} config 请求配置
+ */
 const addPendingRequest = (config) => {
   const requestKey = generateRequestKey(config);
+  // 如果存在相同请求，则取消之前的请求
   if (pendingRequests.has(requestKey)) {
     const cancelToken = pendingRequests.get(requestKey);
-    cancelToken.cancel(`\u91CD\u590D\u8BF7\u6C42\u88AB\u53D6\u6D88: ${config.url}`);
+    cancelToken.cancel(`重复请求被取消: ${config.url}`);
     pendingRequests.delete(requestKey);
   }
+  // 创建新的取消令牌
   const source = axios.CancelToken.source();
   config.cancelToken = source.token;
   pendingRequests.set(requestKey, source);
 };
+/**
+ * 从pending列表移除请求
+ * @param {Object} config 请求配置
+ */
 const removePendingRequest = (config) => {
   const requestKey = generateRequestKey(config);
   if (pendingRequests.has(requestKey)) {
@@ -5952,7 +6020,7 @@ const Render = vue.defineComponent({
   }
 });
 
-var _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+var _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "MlSearchTable",
     inheritAttrs: false
@@ -6039,7 +6107,7 @@ var _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
           class: vue.normalizeClass(vue.unref(bem)("search-table"))
         },
         [
-          vue.createVNode(_sfc_main$7, vue.mergeProps({
+          vue.createVNode(_sfc_main$b, vue.mergeProps({
             onSubmit: submit,
             onReset: reset,
             modelValue: searchModel.value,
@@ -6137,11 +6205,11 @@ var _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const MlSearchTable = withInstall(_sfc_main$6);
+const MlSearchTable = withInstall(_sfc_main$a);
 
-const MlSearch = withInstall(_sfc_main$7);
+const MlSearch = withInstall(_sfc_main$b);
 
-var _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+var _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "RenderTooltip"
   },
@@ -6161,7 +6229,7 @@ var _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-var _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+var _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "RenderLabel"
   },
@@ -6183,6 +6251,24 @@ var _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
 
 /*! Element Plus Icons Vue v2.3.1 */
 
+var search_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+  name: "Search",
+  __name: "search",
+  setup(__props) {
+    return (_ctx, _cache) => (vue.openBlock(), vue.createElementBlock("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 1024 1024"
+    }, [
+      vue.createElementVNode("path", {
+        fill: "currentColor",
+        d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704"
+      })
+    ]));
+  }
+});
+
+// src/components/search.vue
+var search_default = search_vue_vue_type_script_setup_true_lang_default;
 var warning_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
   name: "Warning",
   __name: "warning",
@@ -6202,8 +6288,8 @@ var warning_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.de
 // src/components/warning.vue
 var warning_default = warning_vue_vue_type_script_setup_true_lang_default;
 
-const _hoisted_1$1 = { key: 0 };
-const _hoisted_2 = { key: 0 };
+const _hoisted_1$2 = { key: 0 };
+const _hoisted_2$1 = { key: 0 };
 const _hoisted_3 = { key: 1 };
 const _hoisted_4 = { key: 0 };
 const _hoisted_5 = { key: 0 };
@@ -6211,7 +6297,7 @@ const _hoisted_6 = { key: 1 };
 const _hoisted_7 = { key: 0 };
 const _hoisted_8 = { key: 1 };
 const _hoisted_9 = { key: 0 };
-var _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+var _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "MlDetail"
   },
@@ -6245,7 +6331,7 @@ var _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
                 span: item.span || 1
               }, { ref_for: true }, { ...item.bind, ..._ctx.$attrs }), {
                 label: vue.withCtx(() => [
-                  item.labelRender ? (vue.openBlock(), vue.createBlock(_sfc_main$4, {
+                  item.labelRender ? (vue.openBlock(), vue.createBlock(_sfc_main$8, {
                     key: 0,
                     render: item.labelRender,
                     item
@@ -6261,7 +6347,7 @@ var _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
                         1
                         /* TEXT */
                       ),
-                      __props.isColon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1, "\uFF1A")) : vue.createCommentVNode("v-if", true)
+                      __props.isColon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$2, "\uFF1A")) : vue.createCommentVNode("v-if", true)
                     ],
                     4
                     /* STYLE */
@@ -6285,7 +6371,7 @@ var _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
                           vue.createElementVNode("span", null, [
                             item.filters && item.filters.list ? (vue.openBlock(), vue.createElementBlock(
                               "span",
-                              _hoisted_2,
+                              _hoisted_2$1,
                               vue.toDisplayString(constantEscape(
                                 item.fieldName ? __props.dataList[item.fieldName] : void 0,
                                 __props.listTypeInfo[item.filters.list],
@@ -6333,7 +6419,7 @@ var _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
                               vue.toDisplayString(item.tooltip),
                               1
                               /* TEXT */
-                            )) : typeof item.tooltip === "function" ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
+                            )) : typeof item.tooltip === "function" ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
                               key: 1,
                               render: item.tooltip,
                               item
@@ -6388,9 +6474,9 @@ var _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const MlDetail = withInstall(_sfc_main$3);
+const MlDetail = withInstall(_sfc_main$7);
 
-var _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+var _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "MlButton"
   },
@@ -6452,10 +6538,10 @@ var _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const MlButton = withInstall(_sfc_main$2);
+const MlButton = withInstall(_sfc_main$6);
 
-const _hoisted_1 = ["data-index"];
-var _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$1 = ["data-index"];
+var _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "MlVirtualList"
   },
@@ -6799,7 +6885,7 @@ var _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                               item: item.data,
                               index: item.index
                             })
-                          ], 14, _hoisted_1);
+                          ], 14, _hoisted_1$1);
                         }),
                         128
                         /* KEYED_FRAGMENT */
@@ -6871,9 +6957,9 @@ var _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const MlVirtualList = withInstall(_sfc_main$1);
+const MlVirtualList = withInstall(_sfc_main$5);
 
-var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+var _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "MlNumberRangeInput"
   },
@@ -7018,17 +7104,2383 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const MlNumberRangeInput = withInstall(_sfc_main);
+const MlNumberRangeInput = withInstall(_sfc_main$4);
+
+var _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "MlTreeSelect"
+  },
+  __name: "index",
+  props: {
+    treeData: { type: Array, required: true },
+    treeProps: { type: Object, required: false, default: () => ({ label: "label", children: "children" }) },
+    multiple: { type: Boolean, required: false, default: false },
+    defaultExpandAll: { type: Boolean, required: false, default: true },
+    defaultSelectedKeys: { type: Array, required: false, default: () => [] },
+    nodeKey: { type: String, required: false, default: "id" },
+    showSearch: { type: Boolean, required: false, default: true },
+    expandOnClickNode: { type: Boolean, required: false },
+    placeholder: { type: String, required: false, default: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u641C\u7D22" }
+  },
+  emits: ["confirm", "cancel", "input"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const searchKeyword = vue.ref("");
+    const treeRef = vue.ref();
+    const selectedKeys = vue.ref([]);
+    const selectedData = vue.ref(props.multiple ? [] : {});
+    const initSelection = () => {
+      selectedKeys.value = [...props.defaultSelectedKeys];
+      vue.nextTick(() => {
+        if (treeRef.value) {
+          if (props.multiple) {
+            treeRef.value.setCheckedKeys(props.defaultSelectedKeys);
+          } else {
+            treeRef.value.setCurrentKey(props.defaultSelectedKeys[0]);
+          }
+        }
+      });
+    };
+    vue.watch(
+      () => props.defaultSelectedKeys,
+      () => {
+        initSelection();
+      },
+      { immediate: true }
+    );
+    const filteredTreeData = vue.computed(() => {
+      if (!searchKeyword.value) return props.treeData;
+      const filterNode = (nodes) => {
+        return nodes.map((node) => {
+          const children = filterNode(node[props.treeProps.children || "children"] || []);
+          const isMatch = node[props.treeProps.label || "label"].includes(
+            searchKeyword.value
+          );
+          if (isMatch || children.length > 0) {
+            return { ...node, [props.treeProps.children || "children"]: children };
+          }
+          return null;
+        }).filter(Boolean);
+      };
+      return filterNode(props.treeData);
+    });
+    const handleCheckChange = (data, checked) => {
+      const nodeKeyField = props.nodeKey;
+      if (checked) {
+        selectedKeys.value.push(data[nodeKeyField]);
+        if (Array.isArray(selectedData.value)) {
+          selectedData.value.push(data);
+        }
+      } else {
+        selectedKeys.value = selectedKeys.value.filter((key) => key !== data[nodeKeyField]);
+        if (Array.isArray(selectedData.value)) {
+          selectedData.value = selectedData.value.filter(
+            (item) => item[nodeKeyField] !== data[nodeKeyField]
+          );
+        }
+      }
+    };
+    const handleNodeClick = (data) => {
+      if (!props.multiple) {
+        const nodeKeyField = props.nodeKey;
+        selectedKeys.value = [data[nodeKeyField]];
+        selectedData.value = data;
+      }
+    };
+    const reset = () => {
+      searchKeyword.value = "";
+      selectedKeys.value = [];
+      selectedData.value = props.multiple ? [] : {};
+      if (treeRef.value) {
+        if (props.multiple) {
+          treeRef.value.setCheckedKeys([]);
+        } else {
+          treeRef.value.setCurrentKey(void 0);
+        }
+      }
+    };
+    const getSelectedData = () => selectedData.value;
+    const getSelectedKeys = () => selectedKeys.value;
+    const handleConfirm = () => {
+      if (selectedKeys.value.length === 0) {
+        elementPlus.ElMessage.warning("\u8BF7\u9009\u62E9\u81F3\u5C11\u4E00\u4E2A\u8282\u70B9");
+        return;
+      }
+      emit("confirm", selectedData.value);
+    };
+    const handleCancel = () => {
+      emit("cancel");
+    };
+    __expose({
+      reset,
+      getSelectedData,
+      getSelectedKeys,
+      // el-tree 方法透传
+      getCheckedNodes: () => treeRef.value?.getCheckedNodes() || [],
+      getCheckedKeys: () => treeRef.value?.getCheckedKeys() || [],
+      getHalfCheckedNodes: () => treeRef.value?.getHalfCheckedNodes() || [],
+      getHalfCheckedKeys: () => treeRef.value?.getHalfCheckedKeys() || [],
+      getCurrentKey: () => treeRef.value?.getCurrentKey() ?? void 0,
+      getCurrentNode: () => treeRef.value?.getCurrentNode(),
+      setCheckedKeys: (keys) => treeRef.value?.setCheckedKeys(keys),
+      setCheckedNodes: (nodes) => treeRef.value?.setCheckedNodes(nodes),
+      setCurrentKey: (key) => treeRef.value?.setCurrentKey(key),
+      setCurrentNode: (node) => treeRef.value?.setCurrentNode(node),
+      getNode: (key) => treeRef.value?.getNode(key),
+      filter: (value) => treeRef.value?.filter(value),
+      updateKeyChildren: (key, children) => treeRef.value?.updateKeyChildren(key, children),
+      remove: (node) => treeRef.value?.remove(node),
+      append: (data, parentNode) => treeRef.value?.append(data, parentNode),
+      insertBefore: (data, refNode) => treeRef.value?.insertBefore(data, refNode),
+      insertAfter: (data, refNode) => treeRef.value?.insertAfter(data, refNode),
+      //
+      input: (value) => emit("input", value)
+    });
+    return (_ctx, _cache) => {
+      const _component_el_input = vue.resolveComponent("el-input");
+      const _component_el_button = vue.resolveComponent("el-button");
+      return vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          class: vue.normalizeClass(vue.unref(bem)("tree-select"))
+        },
+        [
+          vue.createCommentVNode(" \u641C\u7D22\u6846 "),
+          __props.showSearch ? (vue.openBlock(), vue.createBlock(_component_el_input, {
+            key: 0,
+            modelValue: searchKeyword.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchKeyword.value = $event),
+            placeholder: __props.placeholder,
+            clearable: "",
+            "prefix-icon": vue.unref(search_default),
+            class: vue.normalizeClass(vue.unref(bem)("tree-select", "search")),
+            onInput: _cache[1] || (_cache[1] = (value) => emit("input", value))
+          }, null, 8, ["modelValue", "placeholder", "prefix-icon", "class"])) : vue.createCommentVNode("v-if", true),
+          vue.createCommentVNode(" \u6811\u5F62\u9009\u62E9 "),
+          vue.createElementVNode(
+            "div",
+            {
+              class: vue.normalizeClass(vue.unref(bem)("tree-select", "tree"))
+            },
+            [
+              vue.createVNode(vue.unref(elementPlus.ElTree), vue.mergeProps({
+                ref_key: "treeRef",
+                ref: treeRef,
+                data: filteredTreeData.value,
+                props: __props.treeProps,
+                "show-checkbox": __props.multiple,
+                "default-expand-all": __props.defaultExpandAll,
+                "expand-on-click-node": __props.expandOnClickNode,
+                "node-key": __props.nodeKey,
+                onCheckChange: handleCheckChange,
+                onNodeClick: handleNodeClick
+              }, _ctx.$attrs, vue.toHandlers(_ctx.$attrs)), null, 16, ["data", "props", "show-checkbox", "default-expand-all", "expand-on-click-node", "node-key"])
+            ],
+            2
+            /* CLASS */
+          ),
+          vue.createCommentVNode(" \u5E95\u90E8\u6309\u94AE\u63D2\u69FD "),
+          vue.createElementVNode(
+            "div",
+            {
+              class: vue.normalizeClass(vue.unref(bem)("tree-select", "footer"))
+            },
+            [
+              vue.renderSlot(_ctx.$slots, "footer", {}, () => [
+                vue.createVNode(_component_el_button, { onClick: handleCancel }, {
+                  default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
+                    vue.createTextVNode(
+                      "\u53D6\u6D88",
+                      -1
+                      /* CACHED */
+                    )
+                  ])]),
+                  _: 1
+                  /* STABLE */
+                }),
+                vue.createVNode(_component_el_button, {
+                  type: "primary",
+                  onClick: handleConfirm
+                }, {
+                  default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
+                    vue.createTextVNode(
+                      "\u786E\u5B9A",
+                      -1
+                      /* CACHED */
+                    )
+                  ])]),
+                  _: 1
+                  /* STABLE */
+                })
+              ])
+            ],
+            2
+            /* CLASS */
+          )
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+const MlTreeSelect = withInstall(_sfc_main$3);
+
+const dialogPropKeys = [
+  "title",
+  "width",
+  "fullscreen",
+  "top",
+  "modal",
+  "modalClass",
+  "appendToBody",
+  "appendTo",
+  "lockScroll",
+  "closeOnClickModal",
+  "closeOnPressEscape",
+  "showClose",
+  "draggable",
+  "overflow",
+  "center",
+  "alignCenter",
+  "destroyOnClose",
+  "closeIcon",
+  "zIndex",
+  "headerAriaLevel"
+];
+
+var _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "MlTreeSelectDialog"
+  },
+  __name: "index",
+  props: /* @__PURE__ */ vue.mergeModels({
+    treeData: { type: Array, required: true },
+    treeProps: { type: Object, required: false, default: () => ({ label: "label", children: "children" }) },
+    multiple: { type: Boolean, required: false, default: false },
+    defaultExpandAll: { type: Boolean, required: false, default: true },
+    defaultSelectedKeys: { type: Array, required: false, default: () => [] },
+    nodeKey: { type: String, required: false, default: "id" },
+    showSearch: { type: Boolean, required: false, default: true },
+    expandOnClickNode: { type: Boolean, required: false },
+    placeholder: { type: String, required: false },
+    title: { type: String, required: false, default: "\u6811\u5F62\u9009\u62E9" },
+    width: { type: String, required: false, default: "500px" },
+    appendToBody: { type: Boolean, required: false },
+    appendTo: { type: null, required: false },
+    beforeClose: { type: Function, required: false },
+    destroyOnClose: { type: Boolean, required: false },
+    closeOnClickModal: { type: Boolean, required: false },
+    closeOnPressEscape: { type: Boolean, required: false },
+    lockScroll: { type: Boolean, required: false },
+    modal: { type: Boolean, required: false },
+    openDelay: { type: Number, required: false },
+    closeDelay: { type: Number, required: false },
+    top: { type: String, required: false },
+    modelValue: { type: Boolean, required: false },
+    modalClass: { type: String, required: false },
+    headerClass: { type: String, required: false },
+    bodyClass: { type: String, required: false },
+    footerClass: { type: String, required: false },
+    zIndex: { type: Number, required: false },
+    trapFocus: { type: Boolean, required: false },
+    headerAriaLevel: { type: String, required: false },
+    center: { type: Boolean, required: false },
+    alignCenter: { type: Boolean, required: false },
+    closeIcon: { type: null, required: false },
+    draggable: { type: Boolean, required: false },
+    overflow: { type: Boolean, required: false },
+    fullscreen: { type: Boolean, required: false },
+    showClose: { type: Boolean, required: false },
+    ariaLevel: { type: String, required: false }
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["confirm", "close", "input"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const visible = vue.useModel(__props, "modelValue");
+    const props = __props;
+    const emit = __emit;
+    const attrs = vue.useAttrs();
+    const dialogAttrs = vue.computed(() => {
+      const result = {
+        title: props.title,
+        width: props.width
+      };
+      Object.keys(attrs).forEach((key) => {
+        if (dialogPropKeys.includes(key)) {
+          result[key] = attrs[key];
+        }
+      });
+      return result;
+    });
+    const treeSelectAttrs = vue.computed(() => {
+      const result = {
+        treeData: props.treeData,
+        treeProps: props.treeProps,
+        multiple: props.multiple,
+        defaultExpandAll: props.defaultExpandAll,
+        defaultSelectedKeys: props.defaultSelectedKeys,
+        nodeKey: props.nodeKey,
+        showSearch: props.showSearch
+      };
+      Object.keys(attrs).forEach((key) => {
+        if (!dialogPropKeys.includes(key) && !key.startsWith("on")) {
+          result[key] = attrs[key];
+        }
+      });
+      return result;
+    });
+    const treeSelectRef = vue.ref();
+    vue.watch(visible, (val) => {
+      if (!val && treeSelectRef.value) {
+        treeSelectRef.value.reset();
+      }
+    });
+    const handleBeforeClose = () => {
+      visible.value = false;
+    };
+    const handleConfirm = (selectedData) => {
+      emit("confirm", selectedData);
+      visible.value = false;
+    };
+    const handleCancel = () => {
+      visible.value = false;
+    };
+    __expose({
+      input: (value) => emit("input", value)
+    });
+    return (_ctx, _cache) => {
+      const _component_el_dialog = vue.resolveComponent("el-dialog");
+      return vue.openBlock(), vue.createBlock(_component_el_dialog, vue.mergeProps({
+        modelValue: visible.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event)
+      }, dialogAttrs.value, {
+        class: vue.unref(bem)("tree-select-dialog"),
+        "before-close": handleBeforeClose,
+        onClose: _cache[1] || (_cache[1] = ($event) => emit("close"))
+      }), {
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.unref(MlTreeSelect), vue.mergeProps({
+            ref_key: "treeSelectRef",
+            ref: treeSelectRef,
+            "tree-data": props.treeData
+          }, treeSelectAttrs.value, vue.toHandlers(_ctx.$attrs), {
+            onConfirm: handleConfirm,
+            onCancel: handleCancel
+          }), null, 16, ["tree-data"])
+        ]),
+        _: 1
+        /* STABLE */
+      }, 16, ["modelValue", "class"]);
+    };
+  }
+});
+
+const MlTreeSelectDialog = withInstall(_sfc_main$2);
+
+const drawerPropKeys = [
+  "title",
+  "size",
+  "direction",
+  "appendToBody",
+  "appendTo",
+  "modal",
+  "modalClass",
+  "lockScroll",
+  "closeOnClickModal",
+  "closeOnPressEscape",
+  "showClose",
+  "withHeader",
+  "openDelay",
+  "closeDelay",
+  "destroyOnClose",
+  "zIndex"
+];
+
+var _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "MlTreeSelectDrawer"
+  },
+  __name: "index",
+  props: /* @__PURE__ */ vue.mergeModels({
+    treeData: { type: Array, required: true },
+    treeProps: { type: Object, required: false, default: () => ({ label: "label", children: "children" }) },
+    multiple: { type: Boolean, required: false, default: false },
+    defaultExpandAll: { type: Boolean, required: false, default: true },
+    defaultSelectedKeys: { type: Array, required: false, default: () => [] },
+    nodeKey: { type: String, required: false, default: "id" },
+    showSearch: { type: Boolean, required: false, default: true },
+    expandOnClickNode: { type: Boolean, required: false },
+    placeholder: { type: String, required: false },
+    title: { type: String, required: false, default: "\u6811\u5F62\u9009\u62E9" },
+    size: { type: [String, Number], required: false, default: "400px" },
+    direction: { type: String, required: false, default: "rtl" },
+    withHeader: { type: Boolean, required: false },
+    modalFade: { type: Boolean, required: false },
+    headerAriaLevel: { type: String, required: false },
+    appendToBody: { type: Boolean, required: false },
+    appendTo: { type: null, required: false },
+    beforeClose: { type: Function, required: false },
+    destroyOnClose: { type: Boolean, required: false },
+    closeOnClickModal: { type: Boolean, required: false },
+    closeOnPressEscape: { type: Boolean, required: false },
+    lockScroll: { type: Boolean, required: false },
+    modal: { type: Boolean, required: false },
+    openDelay: { type: Number, required: false },
+    closeDelay: { type: Number, required: false },
+    top: { type: String, required: false },
+    modelValue: { type: Boolean, required: false },
+    modalClass: { type: String, required: false },
+    headerClass: { type: String, required: false },
+    bodyClass: { type: String, required: false },
+    footerClass: { type: String, required: false },
+    width: { type: null, required: false },
+    zIndex: { type: Number, required: false },
+    trapFocus: { type: Boolean, required: false },
+    center: { type: Boolean, required: false },
+    alignCenter: { type: Boolean, required: false },
+    closeIcon: { type: null, required: false },
+    draggable: { type: Boolean, required: false },
+    overflow: { type: Boolean, required: false },
+    fullscreen: { type: Boolean, required: false },
+    showClose: { type: Boolean, required: false },
+    ariaLevel: { type: String, required: false }
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["confirm", "close", "input"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const visible = vue.useModel(__props, "modelValue");
+    const props = __props;
+    const emit = __emit;
+    const attrs = vue.useAttrs();
+    const drawerAttrs = vue.computed(() => {
+      const result = {
+        title: props.title,
+        size: props.size,
+        direction: props.direction
+      };
+      Object.keys(attrs).forEach((key) => {
+        if (drawerPropKeys.includes(key)) {
+          result[key] = attrs[key];
+        }
+      });
+      return result;
+    });
+    const treeSelectAttrs = vue.computed(() => {
+      const result = {
+        treeProps: props.treeProps,
+        multiple: props.multiple,
+        defaultExpandAll: props.defaultExpandAll,
+        defaultSelectedKeys: props.defaultSelectedKeys,
+        nodeKey: props.nodeKey,
+        showSearch: props.showSearch
+      };
+      Object.keys(attrs).forEach((key) => {
+        if (!drawerPropKeys.includes(key) && !key.startsWith("on")) {
+          result[key] = attrs[key];
+        }
+      });
+      return result;
+    });
+    const treeSelectRef = vue.ref();
+    vue.watch(visible, (val) => {
+      if (!val && treeSelectRef.value) {
+        treeSelectRef.value.reset();
+      }
+    });
+    const handleBeforeClose = (done) => {
+      visible.value = false;
+      done();
+    };
+    const handleConfirm = (selectedData) => {
+      emit("confirm", selectedData);
+      visible.value = false;
+    };
+    const handleCancel = () => {
+      visible.value = false;
+    };
+    __expose({
+      input: (value) => emit("input", value)
+    });
+    return (_ctx, _cache) => {
+      const _component_el_drawer = vue.resolveComponent("el-drawer");
+      return vue.openBlock(), vue.createBlock(_component_el_drawer, vue.mergeProps({
+        modelValue: visible.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event)
+      }, drawerAttrs.value, {
+        class: vue.unref(bem)("tree-select-drawer"),
+        "before-close": handleBeforeClose,
+        onClose: _cache[1] || (_cache[1] = ($event) => emit("close"))
+      }), {
+        default: vue.withCtx(() => [
+          vue.createVNode(_sfc_main$3, vue.mergeProps({
+            ref_key: "treeSelectRef",
+            ref: treeSelectRef,
+            "tree-data": __props.treeData
+          }, treeSelectAttrs.value, vue.toHandlers(_ctx.$attrs), {
+            onConfirm: handleConfirm,
+            onCancel: handleCancel
+          }), null, 16, ["tree-data"])
+        ]),
+        _: 1
+        /* STABLE */
+      }, 16, ["modelValue", "class"]);
+    };
+  }
+});
+
+const MlTreeSelectDrawer = withInstall(_sfc_main$1);
+
+const Y = {};
+Y.getData = (t) => new Promise((e, i) => {
+  let s = {};
+  L(t).then((r) => {
+    s.arrayBuffer = r;
+    try {
+      s.orientation = N(r);
+    } catch {
+      s.orientation = -1;
+    }
+    e(s);
+  }).catch((r) => {
+    i(r);
+  });
+});
+function L(t) {
+  let e = null;
+  return new Promise((i, s) => {
+    if (t.src)
+      if (/^data\:/i.test(t.src))
+        e = k(t.src), i(e);
+      else if (/^blob\:/i.test(t.src)) {
+        var r = new FileReader();
+        r.onload = function(h) {
+          e = h.target.result, i(e);
+        }, E(t.src, function(h) {
+          r.readAsArrayBuffer(h);
+        });
+      } else {
+        var o = new XMLHttpRequest();
+        o.onload = function() {
+          if (this.status == 200 || this.status === 0)
+            e = o.response, i(e);
+          else
+            throw "Could not load image";
+          o = null;
+        }, o.open("GET", t.src, true), o.responseType = "arraybuffer", o.send(null);
+      }
+    else
+      s("img error");
+  });
+}
+function E(t, e) {
+  var i = new XMLHttpRequest();
+  i.open("GET", t, true), i.responseType = "blob", i.onload = function(s) {
+    (this.status == 200 || this.status === 0) && e(this.response);
+  }, i.send();
+}
+function k(t, e) {
+  e = e || t.match(/^data\:([^\;]+)\;base64,/mi)[1] || "", t = t.replace(/^data\:([^\;]+)\;base64,/gmi, "");
+  for (var i = atob(t), s = i.length % 2 == 0 ? i.length : i.length + 1, r = new ArrayBuffer(s), o = new Uint16Array(r), h = 0; h < s; h++)
+    o[h] = i.charCodeAt(h);
+  return r;
+}
+function T(t, e, i) {
+  var s = "", r;
+  for (r = e, i += e; r < i; r++)
+    s += String.fromCharCode(t.getUint8(r));
+  return s;
+}
+function N(t) {
+  var e = new DataView(t), i = e.byteLength, s, r, o, h, a, n, c, l, f, p;
+  if (e.getUint8(0) === 255 && e.getUint8(1) === 216)
+    for (f = 2; f < i; ) {
+      if (e.getUint8(f) === 255 && e.getUint8(f + 1) === 225) {
+        c = f;
+        break;
+      }
+      f++;
+    }
+  if (c && (r = c + 4, o = c + 10, T(e, r, 4) === "Exif" && (n = e.getUint16(o), a = n === 18761, (a || n === 19789) && e.getUint16(o + 2, a) === 42 && (h = e.getUint32(o + 4, a), h >= 8 && (l = o + h)))), l) {
+    for (i = e.getUint16(l, a), p = 0; p < i; p++)
+      if (f = l + p * 12 + 2, e.getUint16(f, a) === 274) {
+        f += 8, s = e.getUint16(f, a);
+        break;
+      }
+  }
+  return s;
+}
+const $ = (t, e) => {
+  const i = t.__vccOpts || t;
+  for (const [s, r] of e)
+    i[s] = r;
+  return i;
+}, z = vue.defineComponent({
+  data: function() {
+    return {
+      // 容器高宽
+      w: 0,
+      h: 0,
+      // 图片缩放比例
+      scale: 1,
+      // 图片偏移x轴
+      x: 0,
+      // 图片偏移y轴
+      y: 0,
+      // 图片加载
+      loading: true,
+      // 图片真实宽度
+      trueWidth: 0,
+      // 图片真实高度
+      trueHeight: 0,
+      move: true,
+      // 移动的x
+      moveX: 0,
+      // 移动的y
+      moveY: 0,
+      // 开启截图
+      crop: false,
+      // 正在截图
+      cropping: false,
+      // 裁剪框大小
+      cropW: 0,
+      cropH: 0,
+      cropOldW: 0,
+      cropOldH: 0,
+      // 判断是否能够改变
+      canChangeX: false,
+      canChangeY: false,
+      // 改变的基准点
+      changeCropTypeX: 1,
+      changeCropTypeY: 1,
+      // 裁剪框的坐标轴
+      cropX: 0,
+      cropY: 0,
+      cropChangeX: 0,
+      cropChangeY: 0,
+      cropOffsertX: 0,
+      cropOffsertY: 0,
+      // 支持的滚动事件
+      support: "",
+      // 移动端手指缩放
+      touches: [],
+      touchNow: false,
+      // 图片旋转
+      rotate: 0,
+      isIos: false,
+      orientation: 0,
+      imgs: "",
+      // 图片缩放系数
+      coe: 0.2,
+      // 是否正在多次缩放
+      scaling: false,
+      scalingSet: "",
+      coeStatus: "",
+      // 控制emit触发频率
+      isCanShow: true,
+      // 图片是否等于截图大小
+      imgIsQqualCrop: false
+    };
+  },
+  props: {
+    img: {
+      type: [String, Blob, null, File],
+      default: ""
+    },
+    // 输出图片压缩比
+    outputSize: {
+      type: Number,
+      default: 1
+    },
+    outputType: {
+      type: String,
+      default: "jpeg"
+    },
+    info: {
+      type: Boolean,
+      default: true
+    },
+    // 是否开启滚轮放大缩小
+    canScale: {
+      type: Boolean,
+      default: true
+    },
+    // 是否自成截图框
+    autoCrop: {
+      type: Boolean,
+      default: false
+    },
+    autoCropWidth: {
+      type: [Number, String],
+      default: 0
+    },
+    autoCropHeight: {
+      type: [Number, String],
+      default: 0
+    },
+    // 是否开启固定宽高比
+    fixed: {
+      type: Boolean,
+      default: false
+    },
+    // 宽高比 w/h
+    fixedNumber: {
+      type: Array,
+      default: () => [1, 1]
+    },
+    // 固定大小 禁止改变截图框大小
+    fixedBox: {
+      type: Boolean,
+      default: false
+    },
+    // 输出截图是否缩放
+    full: {
+      type: Boolean,
+      default: false
+    },
+    // 是否可以拖动图片
+    canMove: {
+      type: Boolean,
+      default: true
+    },
+    // 是否可以拖动截图框
+    canMoveBox: {
+      type: Boolean,
+      default: true
+    },
+    // 上传图片按照原始比例显示
+    original: {
+      type: Boolean,
+      default: false
+    },
+    // 截图框能否超过图片
+    centerBox: {
+      type: Boolean,
+      default: false
+    },
+    // 是否根据dpr输出高清图片
+    high: {
+      type: Boolean,
+      default: true
+    },
+    // 截图框展示宽高类型
+    infoTrue: {
+      type: Boolean,
+      default: false
+    },
+    // 可以压缩图片宽高  默认不超过200
+    maxImgSize: {
+      type: [Number, String],
+      default: 2e3
+    },
+    // 倍数  可渲染当前截图框的n倍 0 - 1000;
+    enlarge: {
+      type: [Number, String],
+      default: 1
+    },
+    // 自动预览的固定宽度
+    preW: {
+      type: [Number, String],
+      default: 0
+    },
+    /*
+      图片布局方式 mode 实现和css背景一样的效果
+      contain  居中布局 默认不会缩放 保证图片在容器里面 mode: 'contain'
+      cover    拉伸布局 填充整个容器  mode: 'cover'
+      如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为auto。 mode: '50px'
+      如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。 mode: '50px 60px'
+    */
+    mode: {
+      type: String,
+      default: "contain"
+    },
+    //限制最小区域,可传1以上的数字和字符串，限制长宽都是这么大
+    // 也可以传数组[90,90] 
+    limitMinSize: {
+      type: [Number, Array, String],
+      default: () => 10,
+      validator: function(t) {
+        return Array.isArray(t) ? Number(t[0]) >= 0 && Number(t[1]) >= 0 : Number(t) >= 0;
+      }
+    },
+    // 导出时,填充背景颜色
+    fillColor: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    cropInfo() {
+      let t = {};
+      if (t.top = this.cropOffsertY > 21 ? "-21px" : "0px", t.width = this.cropW > 0 ? this.cropW : 0, t.height = this.cropH > 0 ? this.cropH : 0, this.infoTrue) {
+        let e = 1;
+        this.high && !this.full && (e = window.devicePixelRatio), this.enlarge !== 1 & !this.full && (e = Math.abs(Number(this.enlarge))), t.width = t.width * e, t.height = t.height * e, this.full && (t.width = t.width / this.scale, t.height = t.height / this.scale);
+      }
+      return t.width = t.width.toFixed(0), t.height = t.height.toFixed(0), t;
+    },
+    isIE() {
+      return !!window.ActiveXObject || "ActiveXObject" in window;
+    },
+    passive() {
+      return this.isIE ? null : {
+        passive: false
+      };
+    },
+    // 是否处于左右旋转
+    isRotateRightOrLeft() {
+      return [1, -1, 3, -3].includes(this.rotate);
+    }
+  },
+  watch: {
+    // 如果图片改变， 重新布局
+    img() {
+      this.checkedImg();
+    },
+    imgs(t) {
+      t !== "" && this.reload();
+    },
+    cropW() {
+      this.showPreview();
+    },
+    cropH() {
+      this.showPreview();
+    },
+    cropOffsertX() {
+      this.showPreview();
+    },
+    cropOffsertY() {
+      this.showPreview();
+    },
+    scale(t, e) {
+      this.showPreview();
+    },
+    x() {
+      this.showPreview();
+    },
+    y() {
+      this.showPreview();
+    },
+    autoCrop(t) {
+      t && this.goAutoCrop();
+    },
+    // 修改了自动截图框
+    autoCropWidth() {
+      this.autoCrop && this.goAutoCrop();
+    },
+    autoCropHeight() {
+      this.autoCrop && this.goAutoCrop();
+    },
+    mode() {
+      this.checkedImg();
+    },
+    rotate() {
+      this.showPreview(), this.autoCrop ? this.goAutoCrop(this.cropW, this.cropH) : (this.cropW > 0 || this.cropH > 0) && this.goAutoCrop(this.cropW, this.cropH);
+    }
+  },
+  methods: {
+    getVersion(t) {
+      var e = navigator.userAgent.split(" "), i = "";
+      let s = 0;
+      const r = new RegExp(t, "i");
+      for (var o = 0; o < e.length; o++)
+        r.test(e[o]) && (i = e[o]);
+      return i ? s = i.split("/")[1].split(".") : s = ["0", "0", "0"], s;
+    },
+    checkOrientationImage(t, e, i, s) {
+      if (this.getVersion("chrome")[0] >= 81)
+        e = -1;
+      else if (this.getVersion("safari")[0] >= 605) {
+        const h = this.getVersion("version");
+        h[0] > 13 && h[1] > 1 && (e = -1);
+      } else {
+        const h = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/);
+        if (h) {
+          let a = h[1];
+          a = a.split("_"), (a[0] > 13 || a[0] >= 13 && a[1] >= 4) && (e = -1);
+        }
+      }
+      let r = document.createElement("canvas"), o = r.getContext("2d");
+      switch (o.save(), e) {
+        case 2:
+          r.width = i, r.height = s, o.translate(i, 0), o.scale(-1, 1);
+          break;
+        case 3:
+          r.width = i, r.height = s, o.translate(i / 2, s / 2), o.rotate(180 * Math.PI / 180), o.translate(-i / 2, -s / 2);
+          break;
+        case 4:
+          r.width = i, r.height = s, o.translate(0, s), o.scale(1, -1);
+          break;
+        case 5:
+          r.height = i, r.width = s, o.rotate(0.5 * Math.PI), o.scale(1, -1);
+          break;
+        case 6:
+          r.width = s, r.height = i, o.translate(s / 2, i / 2), o.rotate(90 * Math.PI / 180), o.translate(-i / 2, -s / 2);
+          break;
+        case 7:
+          r.height = i, r.width = s, o.rotate(0.5 * Math.PI), o.translate(i, -s), o.scale(-1, 1);
+          break;
+        case 8:
+          r.height = i, r.width = s, o.translate(s / 2, i / 2), o.rotate(-90 * Math.PI / 180), o.translate(-i / 2, -s / 2);
+          break;
+        default:
+          r.width = i, r.height = s;
+      }
+      o.drawImage(t, 0, 0, i, s), o.restore(), r.toBlob(
+        (h) => {
+          let a = URL.createObjectURL(h);
+          URL.revokeObjectURL(this.imgs), this.imgs = a;
+        },
+        "image/" + this.outputType,
+        1
+      );
+    },
+    // checkout img
+    checkedImg() {
+      if (this.img === null || this.img === "") {
+        this.imgs = "", this.clearCrop();
+        return;
+      }
+      this.loading = true, this.scale = 1, this.rotate = 0, this.imgIsQqualCrop = false, this.clearCrop();
+      let t = new Image();
+      if (t.onload = () => {
+        if (this.img === "")
+          return this.$emit("img-load", new Error("图片不能为空")), false;
+        let i = t.width, s = t.height;
+        Y.getData(t).then((r) => {
+          this.orientation = r.orientation || 1;
+          let o = Number(this.maxImgSize);
+          if (!this.orientation && i < o & s < o) {
+            this.imgs = this.img;
+            return;
+          }
+          i > o && (s = s / i * o, i = o), s > o && (i = i / s * o, s = o), this.checkOrientationImage(t, this.orientation, i, s);
+        }).catch((r) => {
+          this.$emit("img-load", "error"), this.$emit("img-load-error", r);
+        });
+      }, t.onerror = (i) => {
+        this.$emit("img-load", "error"), this.$emit("img-load-error", i);
+      }, this.img.substr(0, 4) !== "data" && (t.crossOrigin = ""), this.isIE) {
+        var e = new XMLHttpRequest();
+        e.onload = function() {
+          var i = URL.createObjectURL(this.response);
+          t.src = i;
+        }, e.open("GET", this.img, true), e.responseType = "blob", e.send();
+      } else
+        t.src = this.img;
+    },
+    // 当按下鼠标键
+    startMove(t) {
+      if (t.preventDefault(), this.move && !this.crop) {
+        if (!this.canMove)
+          return false;
+        this.moveX = ("clientX" in t ? t.clientX : t.touches[0].clientX) - this.x, this.moveY = ("clientY" in t ? t.clientY : t.touches[0].clientY) - this.y, t.touches ? (window.addEventListener("touchmove", this.moveImg), window.addEventListener("touchend", this.leaveImg), t.touches.length == 2 && (this.touches = t.touches, window.addEventListener("touchmove", this.touchScale), window.addEventListener("touchend", this.cancelTouchScale))) : (window.addEventListener("mousemove", this.moveImg), window.addEventListener("mouseup", this.leaveImg)), this.$emit("img-moving", {
+          moving: true,
+          axis: this.getImgAxis()
+        });
+      } else
+        this.cropping = true, window.addEventListener("mousemove", this.createCrop), window.addEventListener("mouseup", this.endCrop), window.addEventListener("touchmove", this.createCrop), window.addEventListener("touchend", this.endCrop), this.cropOffsertX = t.offsetX ? t.offsetX : t.touches[0].pageX - this.$refs.cropper.offsetLeft, this.cropOffsertY = t.offsetY ? t.offsetY : t.touches[0].pageY - this.$refs.cropper.offsetTop, this.cropX = "clientX" in t ? t.clientX : t.touches[0].clientX, this.cropY = "clientY" in t ? t.clientY : t.touches[0].clientY, this.cropChangeX = this.cropOffsertX, this.cropChangeY = this.cropOffsertY, this.cropW = 0, this.cropH = 0;
+    },
+    // 移动端缩放
+    touchScale(t) {
+      t.preventDefault();
+      let e = this.scale;
+      var i = {
+        x: this.touches[0].clientX,
+        y: this.touches[0].clientY
+      }, s = {
+        x: t.touches[0].clientX,
+        y: t.touches[0].clientY
+      }, r = {
+        x: this.touches[1].clientX,
+        y: this.touches[1].clientY
+      }, o = {
+        x: t.touches[1].clientX,
+        y: t.touches[1].clientY
+      }, h = Math.sqrt(
+        Math.pow(i.x - r.x, 2) + Math.pow(i.y - r.y, 2)
+      ), a = Math.sqrt(
+        Math.pow(s.x - o.x, 2) + Math.pow(s.y - o.y, 2)
+      ), n = a - h, c = 1;
+      c = c / this.trueWidth > c / this.trueHeight ? c / this.trueHeight : c / this.trueWidth, c = c > 0.1 ? 0.1 : c;
+      var l = c * n;
+      if (!this.touchNow) {
+        if (this.touchNow = true, n > 0 ? e += Math.abs(l) : n < 0 && e > Math.abs(l) && (e -= Math.abs(l)), this.touches = t.touches, setTimeout(() => {
+          this.touchNow = false;
+        }, 8), !this.checkoutImgAxis(this.x, this.y, e))
+          return false;
+        this.scale = e;
+      }
+    },
+    cancelTouchScale(t) {
+      window.removeEventListener("touchmove", this.touchScale);
+    },
+    // 移动图片
+    moveImg(t) {
+      if (t.preventDefault(), t.touches && t.touches.length === 2)
+        return this.touches = t.touches, window.addEventListener("touchmove", this.touchScale), window.addEventListener("touchend", this.cancelTouchScale), window.removeEventListener("touchmove", this.moveImg), false;
+      let e = "clientX" in t ? t.clientX : t.touches[0].clientX, i = "clientY" in t ? t.clientY : t.touches[0].clientY, s, r;
+      s = e - this.moveX, r = i - this.moveY, this.$nextTick(() => {
+        if (this.centerBox) {
+          let o = this.getImgAxis(s, r, this.scale), h = this.getCropAxis(), a = this.trueHeight * this.scale, n = this.trueWidth * this.scale, c, l, f, p;
+          switch (this.rotate) {
+            case 1:
+            case -1:
+            case 3:
+            case -3:
+              c = this.cropOffsertX - this.trueWidth * (1 - this.scale) / 2 + (a - n) / 2, l = this.cropOffsertY - this.trueHeight * (1 - this.scale) / 2 + (n - a) / 2, f = c - a + this.cropW, p = l - n + this.cropH;
+              break;
+            default:
+              c = this.cropOffsertX - this.trueWidth * (1 - this.scale) / 2, l = this.cropOffsertY - this.trueHeight * (1 - this.scale) / 2, f = c - n + this.cropW, p = l - a + this.cropH;
+              break;
+          }
+          o.x1 >= h.x1 && (s = c), o.y1 >= h.y1 && (r = l), o.x2 <= h.x2 && (s = f), o.y2 <= h.y2 && (r = p);
+        }
+        this.x = s, this.y = r, this.$emit("img-moving", {
+          moving: true,
+          axis: this.getImgAxis()
+        });
+      });
+    },
+    // 移动图片结束
+    leaveImg(t) {
+      window.removeEventListener("mousemove", this.moveImg), window.removeEventListener("touchmove", this.moveImg), window.removeEventListener("mouseup", this.leaveImg), window.removeEventListener("touchend", this.leaveImg), this.$emit("img-moving", {
+        moving: false,
+        axis: this.getImgAxis()
+      });
+    },
+    // 缩放图片
+    scaleImg() {
+      this.canScale && window.addEventListener(this.support, this.changeSize, this.passive);
+    },
+    // 移出框
+    cancelScale() {
+      this.canScale && window.removeEventListener(this.support, this.changeSize);
+    },
+    // 改变大小函数
+    changeSize(t) {
+      t.preventDefault();
+      let e = this.scale;
+      var i = t.deltaY || t.wheelDelta, s = navigator.userAgent.indexOf("Firefox");
+      i = s > 0 ? i * 30 : i, this.isIE && (i = -i);
+      var r = this.coe;
+      r = r / this.trueWidth > r / this.trueHeight ? r / this.trueHeight : r / this.trueWidth;
+      var o = r * i;
+      o < 0 ? e += Math.abs(o) : e > Math.abs(o) && (e -= Math.abs(o));
+      let h = o < 0 ? "add" : "reduce";
+      if (h !== this.coeStatus && (this.coeStatus = h, this.coe = 0.2), this.scaling || (this.scalingSet = setTimeout(() => {
+        this.scaling = false, this.coe = this.coe += 0.01;
+      }, 50)), this.scaling = true, !this.checkoutImgAxis(this.x, this.y, e))
+        return false;
+      this.scale = e;
+    },
+    // 修改图片大小函数
+    changeScale(t) {
+      let e = this.scale;
+      t = t || 1;
+      var i = 20;
+      if (i = i / this.trueWidth > i / this.trueHeight ? i / this.trueHeight : i / this.trueWidth, t = t * i, t > 0 ? e += Math.abs(t) : e > Math.abs(t) && (e -= Math.abs(t)), !this.checkoutImgAxis(this.x, this.y, e))
+        return false;
+      this.scale = e;
+    },
+    // 创建截图框
+    createCrop(t) {
+      t.preventDefault();
+      var e = "clientX" in t ? t.clientX : t.touches ? t.touches[0].clientX : 0, i = "clientY" in t ? t.clientY : t.touches ? t.touches[0].clientY : 0;
+      this.$nextTick(() => {
+        var s = e - this.cropX, r = i - this.cropY;
+        if (s > 0 ? (this.cropW = s + this.cropChangeX > this.w ? this.w - this.cropChangeX : s, this.cropOffsertX = this.cropChangeX) : (this.cropW = this.w - this.cropChangeX + Math.abs(s) > this.w ? this.cropChangeX : Math.abs(s), this.cropOffsertX = this.cropChangeX + s > 0 ? this.cropChangeX + s : 0), !this.fixed)
+          r > 0 ? (this.cropH = r + this.cropChangeY > this.h ? this.h - this.cropChangeY : r, this.cropOffsertY = this.cropChangeY) : (this.cropH = this.h - this.cropChangeY + Math.abs(r) > this.h ? this.cropChangeY : Math.abs(r), this.cropOffsertY = this.cropChangeY + r > 0 ? this.cropChangeY + r : 0);
+        else {
+          var o = this.cropW / this.fixedNumber[0] * this.fixedNumber[1];
+          o + this.cropOffsertY > this.h ? (this.cropH = this.h - this.cropOffsertY, this.cropW = this.cropH / this.fixedNumber[1] * this.fixedNumber[0], s > 0 ? this.cropOffsertX = this.cropChangeX : this.cropOffsertX = this.cropChangeX - this.cropW) : this.cropH = o, this.cropOffsertY = this.cropOffsertY;
+        }
+      });
+    },
+    // 改变截图框大小
+    changeCropSize(t, e, i, s, r) {
+      t.preventDefault(), window.addEventListener("mousemove", this.changeCropNow), window.addEventListener("mouseup", this.changeCropEnd), window.addEventListener("touchmove", this.changeCropNow), window.addEventListener("touchend", this.changeCropEnd), this.canChangeX = e, this.canChangeY = i, this.changeCropTypeX = s, this.changeCropTypeY = r, this.cropX = "clientX" in t ? t.clientX : t.touches[0].clientX, this.cropY = "clientY" in t ? t.clientY : t.touches[0].clientY, this.cropOldW = this.cropW, this.cropOldH = this.cropH, this.cropChangeX = this.cropOffsertX, this.cropChangeY = this.cropOffsertY, this.fixed && this.canChangeX && this.canChangeY && (this.canChangeY = 0), this.$emit("change-crop-size", {
+        width: this.cropW,
+        height: this.cropH
+      });
+    },
+    // 正在改变
+    changeCropNow(t) {
+      t.preventDefault();
+      var e = "clientX" in t ? t.clientX : t.touches ? t.touches[0].clientX : 0, i = "clientY" in t ? t.clientY : t.touches ? t.touches[0].clientY : 0;
+      let s = this.w, r = this.h, o = 0, h = 0;
+      if (this.centerBox) {
+        let c = this.getImgAxis(), l = c.x2, f = c.y2;
+        o = c.x1 > 0 ? c.x1 : 0, h = c.y1 > 0 ? c.y1 : 0, s > l && (s = l), r > f && (r = f);
+      }
+      const [a, n] = this.checkCropLimitSize();
+      this.$nextTick(() => {
+        var c = e - this.cropX, l = i - this.cropY;
+        if (this.canChangeX && (this.changeCropTypeX === 1 ? this.cropOldW - c < a ? (this.cropW = a, this.cropOffsertX = this.cropOldW + this.cropChangeX - o - a) : this.cropOldW - c > 0 ? (this.cropW = s - this.cropChangeX - c <= s - o ? this.cropOldW - c : this.cropOldW + this.cropChangeX - o, this.cropOffsertX = s - this.cropChangeX - c <= s - o ? this.cropChangeX + c : o) : (this.cropW = Math.abs(c) + this.cropChangeX <= s ? Math.abs(c) - this.cropOldW : s - this.cropOldW - this.cropChangeX, this.cropOffsertX = this.cropChangeX + this.cropOldW) : this.changeCropTypeX === 2 && (this.cropOldW + c < a ? this.cropW = a : this.cropOldW + c > 0 ? (this.cropW = this.cropOldW + c + this.cropOffsertX <= s ? this.cropOldW + c : s - this.cropOffsertX, this.cropOffsertX = this.cropChangeX) : (this.cropW = s - this.cropChangeX + Math.abs(c + this.cropOldW) <= s - o ? Math.abs(c + this.cropOldW) : this.cropChangeX - o, this.cropOffsertX = s - this.cropChangeX + Math.abs(c + this.cropOldW) <= s - o ? this.cropChangeX - Math.abs(c + this.cropOldW) : o))), this.canChangeY && (this.changeCropTypeY === 1 ? this.cropOldH - l < n ? (this.cropH = n, this.cropOffsertY = this.cropOldH + this.cropChangeY - h - n) : this.cropOldH - l > 0 ? (this.cropH = r - this.cropChangeY - l <= r - h ? this.cropOldH - l : this.cropOldH + this.cropChangeY - h, this.cropOffsertY = r - this.cropChangeY - l <= r - h ? this.cropChangeY + l : h) : (this.cropH = Math.abs(l) + this.cropChangeY <= r ? Math.abs(l) - this.cropOldH : r - this.cropOldH - this.cropChangeY, this.cropOffsertY = this.cropChangeY + this.cropOldH) : this.changeCropTypeY === 2 && (this.cropOldH + l < n ? this.cropH = n : this.cropOldH + l > 0 ? (this.cropH = this.cropOldH + l + this.cropOffsertY <= r ? this.cropOldH + l : r - this.cropOffsertY, this.cropOffsertY = this.cropChangeY) : (this.cropH = r - this.cropChangeY + Math.abs(l + this.cropOldH) <= r - h ? Math.abs(l + this.cropOldH) : this.cropChangeY - h, this.cropOffsertY = r - this.cropChangeY + Math.abs(l + this.cropOldH) <= r - h ? this.cropChangeY - Math.abs(l + this.cropOldH) : h))), this.canChangeX && this.fixed) {
+          var f = this.cropW / this.fixedNumber[0] * this.fixedNumber[1];
+          f < n ? (this.cropH = n, this.cropW = this.fixedNumber[0] * n / this.fixedNumber[1], this.changeCropTypeX === 1 && (this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW))) : f + this.cropOffsertY > r ? (this.cropH = r - this.cropOffsertY, this.cropW = this.cropH / this.fixedNumber[1] * this.fixedNumber[0], this.changeCropTypeX === 1 && (this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW))) : this.cropH = f;
+        }
+        if (this.canChangeY && this.fixed) {
+          var p = this.cropH / this.fixedNumber[1] * this.fixedNumber[0];
+          p < a ? (this.cropW = a, this.cropH = this.fixedNumber[1] * a / this.fixedNumber[0], this.cropOffsertY = this.cropOldH + this.cropChangeY - this.cropH) : p + this.cropOffsertX > s ? (this.cropW = s - this.cropOffsertX, this.cropH = this.cropW / this.fixedNumber[0] * this.fixedNumber[1]) : this.cropW = p;
+        }
+      });
+    },
+    checkCropLimitSize() {
+      let { cropW: t, cropH: e, limitMinSize: i } = this, s = new Array();
+      return Array.isArray(i) ? s = i : s = [i, i], t = parseFloat(s[0]), e = parseFloat(s[1]), [t, e];
+    },
+    // 结束改变
+    changeCropEnd(t) {
+      window.removeEventListener("mousemove", this.changeCropNow), window.removeEventListener("mouseup", this.changeCropEnd), window.removeEventListener("touchmove", this.changeCropNow), window.removeEventListener("touchend", this.changeCropEnd);
+    },
+    // 根据比例x/y，最小宽度，最小高度，现有宽度，现有高度，得到应该有的宽度和高度
+    calculateSize(t, e, i, s, r, o) {
+      const h = t / e;
+      let a = r, n = o;
+      return a < i && (a = i, n = Math.ceil(a / h)), n < s && (n = s, a = Math.ceil(n * h), a < i && (a = i, n = Math.ceil(a / h))), a < r && (a = r, n = Math.ceil(a / h)), n < o && (n = o, a = Math.ceil(n * h)), { width: a, height: n };
+    },
+    // 创建完成
+    endCrop() {
+      this.cropW === 0 && this.cropH === 0 && (this.cropping = false);
+      let [t, e] = this.checkCropLimitSize();
+      const { width: i, height: s } = this.fixed ? this.calculateSize(
+        this.fixedNumber[0],
+        this.fixedNumber[1],
+        t,
+        e,
+        this.cropW,
+        this.cropH
+      ) : { width: t, height: e };
+      i > this.cropW && (this.cropW = i, this.cropOffsertX + i > this.w && (this.cropOffsertX = this.w - i)), s > this.cropH && (this.cropH = s, this.cropOffsertY + s > this.h && (this.cropOffsertY = this.h - s)), window.removeEventListener("mousemove", this.createCrop), window.removeEventListener("mouseup", this.endCrop), window.removeEventListener("touchmove", this.createCrop), window.removeEventListener("touchend", this.endCrop);
+    },
+    // 开始截图
+    startCrop() {
+      this.crop = true;
+    },
+    // 停止截图
+    stopCrop() {
+      this.crop = false;
+    },
+    // 清除截图
+    clearCrop() {
+      this.cropping = false, this.cropW = 0, this.cropH = 0;
+    },
+    // 截图移动
+    cropMove(t) {
+      if (t.preventDefault(), !this.canMoveBox)
+        return this.crop = false, this.startMove(t), false;
+      if (t.touches && t.touches.length === 2)
+        return this.crop = false, this.startMove(t), this.leaveCrop(), false;
+      window.addEventListener("mousemove", this.moveCrop), window.addEventListener("mouseup", this.leaveCrop), window.addEventListener("touchmove", this.moveCrop), window.addEventListener("touchend", this.leaveCrop);
+      let e = "clientX" in t ? t.clientX : t.touches[0].clientX, i = "clientY" in t ? t.clientY : t.touches[0].clientY, s, r;
+      s = e - this.cropOffsertX, r = i - this.cropOffsertY, this.cropX = s, this.cropY = r, this.$emit("crop-moving", {
+        moving: true,
+        axis: this.getCropAxis()
+      });
+    },
+    moveCrop(t, e) {
+      let i = 0, s = 0;
+      t && (t.preventDefault(), i = "clientX" in t ? t.clientX : t.touches[0].clientX, s = "clientY" in t ? t.clientY : t.touches[0].clientY), this.$nextTick(() => {
+        let r, o, h = i - this.cropX, a = s - this.cropY;
+        if (e && (h = this.cropOffsertX, a = this.cropOffsertY), h <= 0 ? r = 0 : h + this.cropW > this.w ? r = this.w - this.cropW : r = h, a <= 0 ? o = 0 : a + this.cropH > this.h ? o = this.h - this.cropH : o = a, this.centerBox) {
+          let n = this.getImgAxis();
+          r <= n.x1 && (r = n.x1), r + this.cropW > n.x2 && (r = n.x2 - this.cropW), o <= n.y1 && (o = n.y1), o + this.cropH > n.y2 && (o = n.y2 - this.cropH);
+        }
+        this.cropOffsertX = r, this.cropOffsertY = o, this.$emit("crop-moving", {
+          moving: true,
+          axis: this.getCropAxis()
+        });
+      });
+    },
+    // 算出不同场景下面 图片相对于外层容器的坐标轴
+    getImgAxis(t, e, i) {
+      t = t || this.x, e = e || this.y, i = i || this.scale;
+      let s = {
+        x1: 0,
+        x2: 0,
+        y1: 0,
+        y2: 0
+      }, r = this.trueWidth * i, o = this.trueHeight * i;
+      switch (this.rotate) {
+        case 0:
+          s.x1 = t + this.trueWidth * (1 - i) / 2, s.x2 = s.x1 + this.trueWidth * i, s.y1 = e + this.trueHeight * (1 - i) / 2, s.y2 = s.y1 + this.trueHeight * i;
+          break;
+        case 1:
+        case -1:
+        case 3:
+        case -3:
+          s.x1 = t + this.trueWidth * (1 - i) / 2 + (r - o) / 2, s.x2 = s.x1 + this.trueHeight * i, s.y1 = e + this.trueHeight * (1 - i) / 2 + (o - r) / 2, s.y2 = s.y1 + this.trueWidth * i;
+          break;
+        default:
+          s.x1 = t + this.trueWidth * (1 - i) / 2, s.x2 = s.x1 + this.trueWidth * i, s.y1 = e + this.trueHeight * (1 - i) / 2, s.y2 = s.y1 + this.trueHeight * i;
+          break;
+      }
+      return s;
+    },
+    // 获取截图框的坐标轴
+    getCropAxis() {
+      let t = {
+        x1: 0,
+        x2: 0,
+        y1: 0,
+        y2: 0
+      };
+      return t.x1 = this.cropOffsertX, t.x2 = t.x1 + this.cropW, t.y1 = this.cropOffsertY, t.y2 = t.y1 + this.cropH, t;
+    },
+    leaveCrop(t) {
+      window.removeEventListener("mousemove", this.moveCrop), window.removeEventListener("mouseup", this.leaveCrop), window.removeEventListener("touchmove", this.moveCrop), window.removeEventListener("touchend", this.leaveCrop), this.$emit("crop-moving", {
+        moving: false,
+        axis: this.getCropAxis()
+      });
+    },
+    getCropChecked(t) {
+      let e = document.createElement("canvas"), i = e.getContext("2d"), s = new Image(), r = this.rotate, o = this.trueWidth, h = this.trueHeight, a = this.cropOffsertX, n = this.cropOffsertY;
+      s.onload = () => {
+        if (this.cropW !== 0) {
+          let p = 1;
+          this.high & !this.full && (p = window.devicePixelRatio), this.enlarge !== 1 & !this.full && (p = Math.abs(Number(this.enlarge)));
+          let d = this.cropW * p, C = this.cropH * p, u = o * this.scale * p, g = h * this.scale * p, m = (this.x - a + this.trueWidth * (1 - this.scale) / 2) * p, v = (this.y - n + this.trueHeight * (1 - this.scale) / 2) * p;
+          switch (f(d, C), i.save(), r) {
+            case 0:
+              this.full ? (f(d / this.scale, C / this.scale), i.drawImage(
+                s,
+                m / this.scale,
+                v / this.scale,
+                u / this.scale,
+                g / this.scale
+              )) : i.drawImage(s, m, v, u, g);
+              break;
+            case 1:
+            case -3:
+              this.full ? (f(d / this.scale, C / this.scale), m = m / this.scale + (u / this.scale - g / this.scale) / 2, v = v / this.scale + (g / this.scale - u / this.scale) / 2, i.rotate(r * 90 * Math.PI / 180), i.drawImage(
+                s,
+                v,
+                -m - g / this.scale,
+                u / this.scale,
+                g / this.scale
+              )) : (m = m + (u - g) / 2, v = v + (g - u) / 2, i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, v, -m - g, u, g));
+              break;
+            case 2:
+            case -2:
+              this.full ? (f(d / this.scale, C / this.scale), i.rotate(r * 90 * Math.PI / 180), m = m / this.scale, v = v / this.scale, i.drawImage(
+                s,
+                -m - u / this.scale,
+                -v - g / this.scale,
+                u / this.scale,
+                g / this.scale
+              )) : (i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, -m - u, -v - g, u, g));
+              break;
+            case 3:
+            case -1:
+              this.full ? (f(d / this.scale, C / this.scale), m = m / this.scale + (u / this.scale - g / this.scale) / 2, v = v / this.scale + (g / this.scale - u / this.scale) / 2, i.rotate(r * 90 * Math.PI / 180), i.drawImage(
+                s,
+                -v - u / this.scale,
+                m,
+                u / this.scale,
+                g / this.scale
+              )) : (m = m + (u - g) / 2, v = v + (g - u) / 2, i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, -v - u, m, u, g));
+              break;
+            default:
+              this.full ? (f(d / this.scale, C / this.scale), i.drawImage(
+                s,
+                m / this.scale,
+                v / this.scale,
+                u / this.scale,
+                g / this.scale
+              )) : i.drawImage(s, m, v, u, g);
+          }
+          i.restore();
+        } else {
+          let p = o * this.scale, d = h * this.scale;
+          switch (i.save(), r) {
+            case 0:
+              f(p, d), i.drawImage(s, 0, 0, p, d);
+              break;
+            case 1:
+            case -3:
+              f(d, p), i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, 0, -d, p, d);
+              break;
+            case 2:
+            case -2:
+              f(p, d), i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, -p, -d, p, d);
+              break;
+            case 3:
+            case -1:
+              f(d, p), i.rotate(r * 90 * Math.PI / 180), i.drawImage(s, -p, 0, p, d);
+              break;
+            default:
+              f(p, d), i.drawImage(s, 0, 0, p, d);
+          }
+          i.restore();
+        }
+        t(e);
+      };
+      var c = this.img.substr(0, 4);
+      c !== "data" && (s.crossOrigin = "Anonymous"), s.src = this.imgs;
+      const l = this.fillColor;
+      function f(p, d) {
+        e.width = Math.round(p), e.height = Math.round(d), l && (i.fillStyle = l, i.fillRect(0, 0, e.width, e.height));
+      }
+    },
+    // 获取转换成base64 的图片信息
+    getCropData(t) {
+      this.getCropChecked((e) => {
+        t(e.toDataURL("image/" + this.outputType, this.outputSize));
+      });
+    },
+    //canvas获取为blob对象
+    getCropBlob(t) {
+      this.getCropChecked((e) => {
+        e.toBlob(
+          (i) => t(i),
+          "image/" + this.outputType,
+          this.outputSize
+        );
+      });
+    },
+    // 自动预览函数
+    showPreview() {
+      if (this.isCanShow)
+        this.isCanShow = false, setTimeout(() => {
+          this.isCanShow = true;
+        }, 16);
+      else
+        return false;
+      let t = this.cropW, e = this.cropH, i = this.scale;
+      var s = {};
+      s.div = {
+        width: `${t}px`,
+        height: `${e}px`
+      };
+      let r = (this.x - this.cropOffsertX) / i, o = (this.y - this.cropOffsertY) / i, h = 0;
+      s.w = t, s.h = e, s.url = this.imgs, s.img = {
+        width: `${this.trueWidth}px`,
+        height: `${this.trueHeight}px`,
+        transform: `scale(${i})translate3d(${r}px, ${o}px, ${h}px)rotateZ(${this.rotate * 90}deg)`
+      }, s.html = `
+      <div class="show-preview" style="width: ${s.w}px; height: ${s.h}px,; overflow: hidden">
+        <div style="width: ${t}px; height: ${e}px">
+          <img src=${s.url} style="width: ${this.trueWidth}px; height: ${this.trueHeight}px; transform:
+          scale(${i})translate3d(${r}px, ${o}px, ${h}px)rotateZ(${this.rotate * 90}deg)">
+        </div>
+      </div>`, this.$emit("real-time", s);
+    },
+    // reload 图片布局函数
+    reload() {
+      let t = new Image();
+      t.onload = () => {
+        this.w = parseFloat(window.getComputedStyle(this.$refs.cropper).width), this.h = parseFloat(window.getComputedStyle(this.$refs.cropper).height), this.trueWidth = t.width, this.trueHeight = t.height, this.original ? this.scale = 1 : this.scale = this.checkedMode(), this.$nextTick(() => {
+          this.x = -(this.trueWidth - this.trueWidth * this.scale) / 2 + (this.w - this.trueWidth * this.scale) / 2, this.y = -(this.trueHeight - this.trueHeight * this.scale) / 2 + (this.h - this.trueHeight * this.scale) / 2, this.loading = false, this.autoCrop && this.goAutoCrop(), this.$emit("img-load", "success"), setTimeout(() => {
+            this.showPreview();
+          }, 20);
+        });
+      }, t.onerror = () => {
+        this.$emit("img-load", "error");
+      }, t.src = this.imgs;
+    },
+    // 背景布局的函数
+    checkedMode() {
+      let t = 1, e = this.trueWidth, i = this.trueHeight;
+      const s = this.mode.split(" ");
+      switch (s[0]) {
+        case "contain":
+          this.trueWidth > this.w && (t = this.w / this.trueWidth), this.trueHeight * t > this.h && (t = this.h / this.trueHeight);
+          break;
+        case "cover":
+          e = this.w, t = e / this.trueWidth, i = i * t, i < this.h && (i = this.h, t = i / this.trueHeight);
+          break;
+        default:
+          try {
+            let r = s[0];
+            if (r.search("px") !== -1) {
+              r = r.replace("px", ""), e = parseFloat(r);
+              const o = e / this.trueWidth;
+              let h = 1, a = s[1];
+              a.search("px") !== -1 && (a = a.replace("px", ""), i = parseFloat(a), h = i / this.trueHeight), t = Math.min(o, h);
+            }
+            if (r.search("%") !== -1 && (r = r.replace("%", ""), e = parseFloat(r) / 100 * this.w, t = e / this.trueWidth), s.length === 2 && r === "auto") {
+              let o = s[1];
+              o.search("px") !== -1 && (o = o.replace("px", ""), i = parseFloat(o), t = i / this.trueHeight), o.search("%") !== -1 && (o = o.replace("%", ""), i = parseFloat(o) / 100 * this.h, t = i / this.trueHeight);
+            }
+          } catch {
+            t = 1;
+          }
+      }
+      return t;
+    },
+    // 自动截图函数
+    goAutoCrop(t, e) {
+      if (this.imgs === "" || this.imgs === null)
+        return;
+      this.clearCrop(), this.cropping = true;
+      let i = this.w, s = this.h;
+      if (this.centerBox) {
+        const h = Math.abs(this.rotate) % 2 > 0;
+        let a = (h ? this.trueHeight : this.trueWidth) * this.scale, n = (h ? this.trueWidth : this.trueHeight) * this.scale;
+        i = a < i ? a : i, s = n < s ? n : s;
+      }
+      var r = t || parseFloat(this.autoCropWidth), o = e || parseFloat(this.autoCropHeight);
+      (r === 0 || o === 0) && (r = i * 0.8, o = s * 0.8), r = r > i ? i : r, o = o > s ? s : o, this.fixed && (o = r / this.fixedNumber[0] * this.fixedNumber[1]), o > this.h && (o = this.h, r = o / this.fixedNumber[1] * this.fixedNumber[0]), this.changeCrop(r, o);
+    },
+    // 手动改变截图框大小函数
+    changeCrop(t, e) {
+      if (this.centerBox) {
+        let i = this.getImgAxis();
+        t > i.x2 - i.x1 && (t = i.x2 - i.x1, e = t / this.fixedNumber[0] * this.fixedNumber[1]), e > i.y2 - i.y1 && (e = i.y2 - i.y1, t = e / this.fixedNumber[1] * this.fixedNumber[0]);
+      }
+      this.cropW = t, this.cropH = e, this.checkCropLimitSize(), this.$nextTick(() => {
+        this.cropOffsertX = (this.w - this.cropW) / 2, this.cropOffsertY = (this.h - this.cropH) / 2, this.centerBox && this.moveCrop(null, true);
+      });
+    },
+    // 重置函数， 恢复组件置初始状态
+    refresh() {
+      this.img, this.imgs = "", this.scale = 1, this.crop = false, this.rotate = 0, this.w = 0, this.h = 0, this.trueWidth = 0, this.trueHeight = 0, this.imgIsQqualCrop = false, this.clearCrop(), this.$nextTick(() => {
+        this.checkedImg();
+      });
+    },
+    // 向左边旋转
+    rotateLeft() {
+      this.rotate = this.rotate <= -3 ? 0 : this.rotate - 1;
+    },
+    // 向右边旋转
+    rotateRight() {
+      this.rotate = this.rotate >= 3 ? 0 : this.rotate + 1;
+    },
+    // 清除旋转
+    rotateClear() {
+      this.rotate = 0;
+    },
+    // 图片坐标点校验
+    checkoutImgAxis(t, e, i) {
+      t = t || this.x, e = e || this.y, i = i || this.scale;
+      let s = true;
+      if (this.centerBox) {
+        let r = this.getImgAxis(t, e, i), o = this.getCropAxis();
+        r.x1 >= o.x1 && (s = false), r.x2 <= o.x2 && (s = false), r.y1 >= o.y1 && (s = false), r.y2 <= o.y2 && (s = false), s || this.changeImgScale(r, o, i);
+      }
+      return s;
+    },
+    // 缩放图片，将图片坐标适配截图框坐标
+    changeImgScale(t, e, i) {
+      let s = this.trueWidth, r = this.trueHeight, o = s * i, h = r * i;
+      if (o >= this.cropW && h >= this.cropH)
+        this.scale = i;
+      else {
+        const a = this.cropW / s, n = this.cropH / r, c = this.cropH <= r * a ? a : n;
+        this.scale = c, o = s * c, h = r * c;
+      }
+      this.imgIsQqualCrop || (t.x1 >= e.x1 && (this.isRotateRightOrLeft ? this.x = e.x1 - (s - o) / 2 - (o - h) / 2 : this.x = e.x1 - (s - o) / 2), t.x2 <= e.x2 && (this.isRotateRightOrLeft ? this.x = e.x1 - (s - o) / 2 - (o - h) / 2 - h + this.cropW : this.x = e.x2 - (s - o) / 2 - o), t.y1 >= e.y1 && (this.isRotateRightOrLeft ? this.y = e.y1 - (r - h) / 2 - (h - o) / 2 : this.y = e.y1 - (r - h) / 2), t.y2 <= e.y2 && (this.isRotateRightOrLeft ? this.y = e.y2 - (r - h) / 2 - (h - o) / 2 - o : this.y = e.y2 - (r - h) / 2 - h)), (o < this.cropW || h < this.cropH) && (this.imgIsQqualCrop = true);
+    }
+  },
+  mounted() {
+    this.support = "onwheel" in document.createElement("div") ? "wheel" : document.onmousewheel !== void 0 ? "mousewheel" : "DOMMouseScroll";
+    let t = this;
+    var e = navigator.userAgent;
+    this.isIOS = !!e.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), HTMLCanvasElement.prototype.toBlob || Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
+      value: function(i, s, r) {
+        for (var o = atob(this.toDataURL(s, r).split(",")[1]), h = o.length, a = new Uint8Array(h), n = 0; n < h; n++)
+          a[n] = o.charCodeAt(n);
+        i(new Blob([a], { type: t.type || "image/png" }));
+      }
+    }), this.showPreview(), this.checkedImg();
+  },
+  unmounted() {
+    window.removeEventListener("mousemove", this.moveCrop), window.removeEventListener("mouseup", this.leaveCrop), window.removeEventListener("touchmove", this.moveCrop), window.removeEventListener("touchend", this.leaveCrop), this.cancelScale();
+  }
+}), A = {
+  key: 0,
+  class: "cropper-box"
+}, B = ["src"], P = { class: "cropper-view-box" }, R = ["src"], D = { key: 1 };
+function U(t, e, i, s, r, o) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: "vue-cropper",
+    ref: "cropper",
+    onMouseover: e[28] || (e[28] = (...h) => t.scaleImg && t.scaleImg(...h)),
+    onMouseout: e[29] || (e[29] = (...h) => t.cancelScale && t.cancelScale(...h))
+  }, [
+    t.imgs ? (vue.openBlock(), vue.createElementBlock("div", A, [
+      vue.withDirectives(vue.createElementVNode("div", {
+        class: "cropper-box-canvas",
+        style: vue.normalizeStyle({
+          width: t.trueWidth + "px",
+          height: t.trueHeight + "px",
+          transform: "scale(" + t.scale + "," + t.scale + ") translate3d(" + t.x / t.scale + "px," + t.y / t.scale + "px,0)rotateZ(" + t.rotate * 90 + "deg)"
+        })
+      }, [
+        vue.createElementVNode("img", {
+          src: t.imgs,
+          alt: "cropper-img",
+          ref: "cropperImg"
+        }, null, 8, B)
+      ], 4), [
+        [vue.vShow, !t.loading]
+      ])
+    ])) : vue.createCommentVNode("", true),
+    vue.createElementVNode("div", {
+      class: vue.normalizeClass(["cropper-drag-box", { "cropper-move": t.move && !t.crop, "cropper-crop": t.crop, "cropper-modal": t.cropping }]),
+      onMousedown: e[0] || (e[0] = (...h) => t.startMove && t.startMove(...h)),
+      onTouchstart: e[1] || (e[1] = (...h) => t.startMove && t.startMove(...h))
+    }, null, 34),
+    vue.withDirectives(vue.createElementVNode("div", {
+      class: "cropper-crop-box",
+      style: vue.normalizeStyle({
+        width: t.cropW + "px",
+        height: t.cropH + "px",
+        transform: "translate3d(" + t.cropOffsertX + "px," + t.cropOffsertY + "px,0)"
+      })
+    }, [
+      vue.createElementVNode("span", P, [
+        vue.createElementVNode("img", {
+          style: vue.normalizeStyle({
+            width: t.trueWidth + "px",
+            height: t.trueHeight + "px",
+            transform: "scale(" + t.scale + "," + t.scale + ") translate3d(" + (t.x - t.cropOffsertX) / t.scale + "px," + (t.y - t.cropOffsertY) / t.scale + "px,0)rotateZ(" + t.rotate * 90 + "deg)"
+          }),
+          src: t.imgs,
+          alt: "cropper-img"
+        }, null, 12, R)
+      ]),
+      vue.createElementVNode("span", {
+        class: "cropper-face cropper-move",
+        onMousedown: e[2] || (e[2] = (...h) => t.cropMove && t.cropMove(...h)),
+        onTouchstart: e[3] || (e[3] = (...h) => t.cropMove && t.cropMove(...h))
+      }, null, 32),
+      t.info ? (vue.openBlock(), vue.createElementBlock("span", {
+        key: 0,
+        class: "crop-info",
+        style: vue.normalizeStyle({ top: t.cropInfo.top })
+      }, vue.toDisplayString(t.cropInfo.width) + " × " + vue.toDisplayString(t.cropInfo.height), 5)) : vue.createCommentVNode("", true),
+      t.fixedBox ? vue.createCommentVNode("", true) : (vue.openBlock(), vue.createElementBlock("span", D, [
+        vue.createElementVNode("span", {
+          class: "crop-line line-w",
+          onMousedown: e[4] || (e[4] = (h) => t.changeCropSize(h, false, true, 0, 1)),
+          onTouchstart: e[5] || (e[5] = (h) => t.changeCropSize(h, false, true, 0, 1))
+        }, null, 32),
+        vue.createElementVNode("span", {
+          class: "crop-line line-a",
+          onMousedown: e[6] || (e[6] = (h) => t.changeCropSize(h, true, false, 1, 0)),
+          onTouchstart: e[7] || (e[7] = (h) => t.changeCropSize(h, true, false, 1, 0))
+        }, null, 32),
+        vue.createElementVNode("span", {
+          class: "crop-line line-s",
+          onMousedown: e[8] || (e[8] = (h) => t.changeCropSize(h, false, true, 0, 2)),
+          onTouchstart: e[9] || (e[9] = (h) => t.changeCropSize(h, false, true, 0, 2))
+        }, null, 32),
+        vue.createElementVNode("span", {
+          class: "crop-line line-d",
+          onMousedown: e[10] || (e[10] = (h) => t.changeCropSize(h, true, false, 2, 0)),
+          onTouchstart: e[11] || (e[11] = (h) => t.changeCropSize(h, true, false, 2, 0))
+        }, null, 32),
+        vue.createElementVNode("span", {
+          class: "crop-point point1",
+          onMousedown: e[12] || (e[12] = (h) => t.changeCropSize(h, true, true, 1, 1)),
+          onTouchstart: e[13] || (e[13] = (h) => t.changeCropSize(h, true, true, 1, 1))
+        }, null, 32),
+        vue.createElementVNode("span", {
+          class: "crop-point point2",
+          onMousedown: e[14] || (e[14] = (h) => t.changeCropSize(h, false, true, 0, 1)),
+          onTouchstart: e[15] || (e[15] = (h) => t.changeCropSize(h, false, true, 0, 1))
+        }, null, 32),
+        vue.createElementVNode("span", {
+          class: "crop-point point3",
+          onMousedown: e[16] || (e[16] = (h) => t.changeCropSize(h, true, true, 2, 1)),
+          onTouchstart: e[17] || (e[17] = (h) => t.changeCropSize(h, true, true, 2, 1))
+        }, null, 32),
+        vue.createElementVNode("span", {
+          class: "crop-point point4",
+          onMousedown: e[18] || (e[18] = (h) => t.changeCropSize(h, true, false, 1, 0)),
+          onTouchstart: e[19] || (e[19] = (h) => t.changeCropSize(h, true, false, 1, 0))
+        }, null, 32),
+        vue.createElementVNode("span", {
+          class: "crop-point point5",
+          onMousedown: e[20] || (e[20] = (h) => t.changeCropSize(h, true, false, 2, 0)),
+          onTouchstart: e[21] || (e[21] = (h) => t.changeCropSize(h, true, false, 2, 0))
+        }, null, 32),
+        vue.createElementVNode("span", {
+          class: "crop-point point6",
+          onMousedown: e[22] || (e[22] = (h) => t.changeCropSize(h, true, true, 1, 2)),
+          onTouchstart: e[23] || (e[23] = (h) => t.changeCropSize(h, true, true, 1, 2))
+        }, null, 32),
+        vue.createElementVNode("span", {
+          class: "crop-point point7",
+          onMousedown: e[24] || (e[24] = (h) => t.changeCropSize(h, false, true, 0, 2)),
+          onTouchstart: e[25] || (e[25] = (h) => t.changeCropSize(h, false, true, 0, 2))
+        }, null, 32),
+        vue.createElementVNode("span", {
+          class: "crop-point point8",
+          onMousedown: e[26] || (e[26] = (h) => t.changeCropSize(h, true, true, 2, 2)),
+          onTouchstart: e[27] || (e[27] = (h) => t.changeCropSize(h, true, true, 2, 2))
+        }, null, 32)
+      ]))
+    ], 4), [
+      [vue.vShow, t.cropping]
+    ])
+  ], 544);
+}
+const M = /* @__PURE__ */ $(z, [["render", U], ["__scopeId", "data-v-a742df44"]]);
+
+const imageUploadProProps = {
+  /**
+   * 已上传图片列表（用于回显）
+   * v-model 绑定的值
+   */
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * 允许上传的图片格式
+   * 默认支持 jpg、png、webp
+   */
+  acceptType: {
+    type: String,
+    default: "image/jpeg,image/jpg,image/png,image/webp"
+  },
+  /**
+   * 尺寸限制配置
+   * width/height 为 0 表示不限制
+   * size 为最大文件大小（MB）
+   */
+  sizeLimit: {
+    type: Object,
+    default: () => ({
+      width: 0,
+      height: 0,
+      size: 2
+    })
+  },
+  /**
+   * 最大上传数量
+   * 默认 9 张
+   */
+  maxCount: {
+    type: Number,
+    default: 9
+  },
+  /**
+   * 是否允许裁剪图片
+   * 启用后会在上传时弹出裁剪对话框
+   */
+  allowCrop: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否支持封面标记
+   * 允许用户标记某张图片为封面
+   */
+  allowCover: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否支持拖拽排序
+   * 启用后可以通过拖拽调整图片顺序
+   */
+  allowSort: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 上传 API 配置
+   * 配置后，每次选择或裁剪图片时会自动上传到服务器
+   */
+  uploadApi: {
+    type: Object,
+    default: null
+  },
+  /**
+   * 是否自动上传
+   * 启用后，选择或裁剪图片时自动调用上传接口
+   */
+  autoUpload: {
+    type: Boolean,
+    default: false
+  }
+};
+
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = ["onDragstart", "onDrop"];
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "MlImageUploadPro"
+  },
+  __name: "index",
+  props: imageUploadProProps,
+  emits: ["update:modelValue", "change", "upload"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ASPECT_RATIO_OPTIONS = [
+      { label: "\u81EA\u7531\u6BD4\u4F8B", value: "free" },
+      { label: "1:1", value: "1:1" },
+      { label: "4:3", value: "4:3" },
+      { label: "16:9", value: "16:9" }
+    ];
+    const props = __props;
+    const uploadRef = vue.ref();
+    const cropperRef = vue.ref();
+    const fileList = vue.ref([]);
+    const previewList = vue.ref([]);
+    const cropDialogVisible = vue.ref(false);
+    const cropImageUrl = vue.ref("");
+    const cropTargetItem = vue.ref();
+    const dragIndex = vue.ref(-1);
+    const cropForm = vue.reactive({
+      aspectRatio: "free"
+      // 裁剪比例
+    });
+    const cropWidth = vue.ref(props.sizeLimit.width || 400);
+    const cropHeight = vue.ref(props.sizeLimit.height || 400);
+    const displayWidth = vue.ref(props.sizeLimit.width || 400);
+    const displayHeight = vue.ref(props.sizeLimit.height || 400);
+    const aspectRatio = vue.reactive({
+      fixed: false,
+      value: [1, 1]
+    });
+    const axios = vue.computed(() => {
+      if (!props.uploadApi) return null;
+      return initRequestInstance({
+        baseURL: "",
+        headers: props.uploadApi.headers || {}
+      });
+    });
+    const acceptDesc = vue.computed(() => {
+      return props.acceptType.split(",").map((type) => type.replace("image/", ".")).join("\u3001");
+    });
+    vue.watch(
+      () => props.modelValue,
+      (val) => {
+        if (val.length) {
+          previewList.value = val.map((item) => ({
+            ...item,
+            url: item.url || item.response?.url || ""
+          }));
+          fileList.value = val;
+        }
+      },
+      { immediate: true, deep: true }
+    );
+    const uploadSingleFile = async (file) => {
+      if (!props.uploadApi || !axios.value) {
+        throw new Error("\u672A\u914D\u7F6E\u4E0A\u4F20 API");
+      }
+      const formData = new FormData();
+      formData.append(props.uploadApi.fieldName || "file", file);
+      if (props.uploadApi.data) {
+        Object.keys(props.uploadApi.data).forEach((key) => {
+          formData.append(key, props.uploadApi.data[key]);
+        });
+      }
+      const method = props.uploadApi.method || "post";
+      const response = await axios.value[method](props.uploadApi.url, formData, {
+        headers: {
+          "Content-Type": "multipart/form-data"
+        }
+      });
+      const urlField = props.uploadApi.responseUrlField || "data.url";
+      return getNestedValue(response, urlField);
+    };
+    const handleBeforeUpload = (file) => {
+      const isAccept = props.acceptType.includes(file.type);
+      if (!isAccept) {
+        elementPlus.ElMessage.error(`\u4EC5\u652F\u6301\u4E0A\u4F20${acceptDesc.value}\u683C\u5F0F\u7684\u56FE\u7247`);
+        return false;
+      }
+      const isOverSize = file.size / 1024 / 1024 > props.sizeLimit.size;
+      if (isOverSize) {
+        elementPlus.ElMessage.error(`\u5355\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7${props.sizeLimit.size}MB`);
+        return false;
+      }
+      if (previewList.value.length >= props.maxCount) {
+        elementPlus.ElMessage.error(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxCount}\u5F20\u56FE\u7247`);
+        return false;
+      }
+      if (props.sizeLimit.width || props.sizeLimit.height) {
+        return new Promise((resolve) => {
+          const img = new Image();
+          img.onload = () => {
+            const isOverWidth = props.sizeLimit.width && img.width < props.sizeLimit.width;
+            const isOverHeight = props.sizeLimit.height && img.height < props.sizeLimit.height;
+            if (isOverWidth || isOverHeight) {
+              elementPlus.ElMessage.error(
+                `\u56FE\u7247\u5C3A\u5BF8\u8981\u6C42\uFF1A\u5BBD\u2265${props.sizeLimit.width}px \u9AD8\u2265${props.sizeLimit.height}px\uFF0C\u5F53\u524D\u56FE\u7247\u5BBD${img.width}px \u9AD8${img.height}px`
+              );
+              resolve(false);
+            } else {
+              resolve(true);
+            }
+          };
+          img.src = URL.createObjectURL(file);
+        });
+      }
+      return true;
+    };
+    const handleFileChange = async (file, files) => {
+      if (file.status === "ready") {
+        const blobUrl = URL.createObjectURL(file.raw);
+        const newItem = {
+          ...file,
+          rawFile: file.raw,
+          blobUrl,
+          // 保存 blob URL 用于裁剪
+          url: blobUrl
+          // 初始显示使用 blob URL
+        };
+        if (props.allowCrop) {
+          elementPlus.ElMessageBox.confirm("\u662F\u5426\u9700\u8981\u88C1\u526A\u8BE5\u56FE\u7247\uFF1F", "\u63D0\u793A", {
+            type: "info",
+            confirmButtonText: "\u88C1\u526A",
+            cancelButtonText: "\u76F4\u63A5\u4E0A\u4F20"
+          }).then(() => {
+            handleCropImage(newItem);
+          }).catch(async () => {
+            if (props.autoUpload && props.uploadApi) {
+              try {
+                const uploadedUrl = await uploadSingleFile(file.raw);
+                newItem.serverUrl = uploadedUrl;
+                newItem.url = uploadedUrl;
+                elementPlus.ElMessage.success("\u56FE\u7247\u4E0A\u4F20\u6210\u529F");
+              } catch (error) {
+                elementPlus.ElMessage.error("\u56FE\u7247\u4E0A\u4F20\u5931\u8D25");
+                console.error(error);
+                return;
+              }
+            }
+            previewList.value.push(newItem);
+            syncModelValue();
+          });
+        } else {
+          if (props.autoUpload && props.uploadApi) {
+            try {
+              const uploadedUrl = await uploadSingleFile(file.raw);
+              newItem.serverUrl = uploadedUrl;
+              newItem.url = uploadedUrl;
+              elementPlus.ElMessage.success("\u56FE\u7247\u4E0A\u4F20\u6210\u529F");
+            } catch (error) {
+              elementPlus.ElMessage.error("\u56FE\u7247\u4E0A\u4F20\u5931\u8D25");
+              console.error(error);
+              return;
+            }
+          }
+          previewList.value.push(newItem);
+          syncModelValue();
+        }
+      }
+      fileList.value = files;
+    };
+    const handleFileRemove = (file) => {
+      previewList.value = previewList.value.filter((item) => item.uid !== file.uid);
+      syncModelValue();
+    };
+    const handleCropImage = (item) => {
+      console.log(item);
+      if (!props.allowCrop) return;
+      cropTargetItem.value = item;
+      cropImageUrl.value = item.blobUrl || item.url || "";
+      cropDialogVisible.value = true;
+      vue.nextTick(() => {
+        cropForm.aspectRatio = "free";
+        cropWidth.value = props.sizeLimit.width || 400;
+        cropHeight.value = props.sizeLimit.height || 400;
+        displayWidth.value = props.sizeLimit.width || 400;
+        displayHeight.value = props.sizeLimit.height || 400;
+        aspectRatio.fixed = false;
+      });
+    };
+    const handleAspectRatioChange = (val) => {
+      if (val === "free") {
+        aspectRatio.fixed = false;
+      } else {
+        aspectRatio.fixed = true;
+        const parts = val.split(":").map(Number);
+        const w = parts[0] ?? 1;
+        const h = parts[1] ?? 1;
+        aspectRatio.value = [w, h];
+      }
+    };
+    const handleCropRealTime = (data) => {
+      if (data && data.w && data.h) {
+        displayWidth.value = Math.round(data.w);
+        displayHeight.value = Math.round(data.h);
+      }
+    };
+    const handleSizeChange = () => {
+      cropWidth.value = displayWidth.value;
+      cropHeight.value = displayHeight.value;
+    };
+    const handleCropConfirm = () => {
+      if (!cropperRef.value || !cropTargetItem.value) return;
+      cropperRef.value.getCropBlob(async (blob) => {
+        const croppedFile = new File([blob], cropTargetItem.value.name || "cropped.jpg", {
+          type: cropTargetItem.value.rawFile?.type || "image/jpeg"
+        });
+        const newBlobUrl = URL.createObjectURL(croppedFile);
+        let displayUrl = newBlobUrl;
+        if (props.autoUpload && props.uploadApi) {
+          try {
+            const serverUrl = await uploadSingleFile(croppedFile);
+            displayUrl = serverUrl;
+            elementPlus.ElMessage.success("\u56FE\u7247\u4E0A\u4F20\u6210\u529F");
+            const index = previewList.value.findIndex((item) => item.uid === cropTargetItem.value.uid);
+            const targetItem = previewList.value[index];
+            if (index > -1 && targetItem) {
+              targetItem.url = displayUrl;
+              targetItem.blobUrl = newBlobUrl;
+              targetItem.serverUrl = serverUrl;
+              targetItem.rawFile = croppedFile;
+            } else {
+              previewList.value.push({
+                ...cropTargetItem.value,
+                name: cropTargetItem.value.name ?? "cropped.jpg",
+                url: displayUrl,
+                blobUrl: newBlobUrl,
+                serverUrl,
+                rawFile: croppedFile
+              });
+            }
+          } catch (error) {
+            elementPlus.ElMessage.error("\u56FE\u7247\u4E0A\u4F20\u5931\u8D25");
+            console.error(error);
+            return;
+          }
+        } else {
+          const index = previewList.value.findIndex((item) => item.uid === cropTargetItem.value.uid);
+          const targetItem = previewList.value[index];
+          if (index > -1 && targetItem) {
+            targetItem.url = newBlobUrl;
+            targetItem.blobUrl = newBlobUrl;
+            targetItem.rawFile = croppedFile;
+          } else {
+            previewList.value.push({
+              ...cropTargetItem.value,
+              name: cropTargetItem.value.name ?? "cropped.jpg",
+              url: newBlobUrl,
+              blobUrl: newBlobUrl,
+              rawFile: croppedFile
+            });
+          }
+        }
+        syncModelValue();
+        cropDialogVisible.value = false;
+        elementPlus.ElMessage.success("\u56FE\u7247\u88C1\u526A\u6210\u529F");
+      });
+    };
+    const resetCropper = () => {
+      cropTargetItem.value = void 0;
+      cropImageUrl.value = "";
+    };
+    const handleRemovePreview = (item) => {
+      elementPlus.ElMessageBox.confirm("\u786E\u5B9A\u8981\u5220\u9664\u8BE5\u56FE\u7247\u5417\uFF1F", "\u63D0\u793A", {
+        type: "warning",
+        confirmButtonText: "\u786E\u5B9A",
+        cancelButtonText: "\u53D6\u6D88"
+      }).then(() => {
+        previewList.value = previewList.value.filter((i) => i.uid !== item.uid);
+        fileList.value = fileList.value.filter((i) => i.uid !== item.uid);
+        syncModelValue();
+        elementPlus.ElMessage.success("\u56FE\u7247\u5220\u9664\u6210\u529F");
+      });
+    };
+    const handleDragStart = (index) => {
+      if (!props.allowSort) return;
+      dragIndex.value = index;
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+    };
+    const handleDrop = (index) => {
+      if (!props.allowSort || dragIndex.value === -1 || dragIndex.value === index) return;
+      const temp = previewList.value[dragIndex.value];
+      if (!temp) return;
+      previewList.value.splice(dragIndex.value, 1);
+      previewList.value.splice(index, 0, temp);
+      dragIndex.value = -1;
+      syncModelValue();
+    };
+    const syncModelValue = () => {
+      emit("update:modelValue", [...previewList.value]);
+      emit("change", [...previewList.value]);
+    };
+    const emit = __emit;
+    const uploadToServer = async (uploadApi) => {
+      const uploadPromises = previewList.value.map(async (item) => {
+        if (item.rawFile) {
+          const url = await uploadApi(item.rawFile);
+          item.url = url;
+          return item;
+        }
+        return item;
+      });
+      const result = await Promise.all(uploadPromises);
+      previewList.value = result;
+      syncModelValue();
+      return result;
+    };
+    __expose({
+      uploadToServer,
+      // 暴露上传到服务器的方法
+      clear: () => {
+        previewList.value = [];
+        fileList.value = [];
+        syncModelValue();
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_el_button = vue.resolveComponent("el-button");
+      const _component_el_upload = vue.resolveComponent("el-upload");
+      const _component_el_image = vue.resolveComponent("el-image");
+      const _component_el_option = vue.resolveComponent("el-option");
+      const _component_el_select = vue.resolveComponent("el-select");
+      const _component_el_form_item = vue.resolveComponent("el-form-item");
+      const _component_el_col = vue.resolveComponent("el-col");
+      const _component_el_input_number = vue.resolveComponent("el-input-number");
+      const _component_el_row = vue.resolveComponent("el-row");
+      const _component_el_form = vue.resolveComponent("el-form");
+      const _component_el_dialog = vue.resolveComponent("el-dialog");
+      return vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          class: vue.normalizeClass(vue.unref(bem)("image-upload-pro"))
+        },
+        [
+          vue.createCommentVNode(" \u6838\u5FC3\u4E0A\u4F20\u533A\u57DF "),
+          vue.createVNode(_component_el_upload, {
+            ref_key: "uploadRef",
+            ref: uploadRef,
+            class: vue.normalizeClass(vue.unref(bem)("image-upload-pro", "upload-container")),
+            action: "",
+            "auto-upload": false,
+            "file-list": fileList.value,
+            "before-upload": handleBeforeUpload,
+            "on-change": handleFileChange,
+            "on-remove": handleFileRemove,
+            accept: _ctx.acceptType,
+            "show-file-list": false
+          }, {
+            tip: vue.withCtx(() => [
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.normalizeClass(vue.unref(bem)("image-upload-pro", "upload-text"))
+                },
+                [
+                  vue.createTextVNode(
+                    " \u652F\u6301\u683C\u5F0F\uFF1A" + vue.toDisplayString(acceptDesc.value) + " | \u5355\u6587\u4EF6\u5927\u5C0F\u2264" + vue.toDisplayString(props.sizeLimit.size) + "MB ",
+                    1
+                    /* TEXT */
+                  ),
+                  props.sizeLimit.width || props.sizeLimit.height ? (vue.openBlock(), vue.createElementBlock(
+                    "span",
+                    _hoisted_1,
+                    " | \u5C3A\u5BF8\u8981\u6C42\uFF1A\u5BBD\u2265" + vue.toDisplayString(props.sizeLimit.width) + "px \u9AD8\u2265" + vue.toDisplayString(props.sizeLimit.height) + "px ",
+                    1
+                    /* TEXT */
+                  )) : vue.createCommentVNode("v-if", true)
+                ],
+                2
+                /* CLASS */
+              )
+            ]),
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_el_button, {
+                disabled: fileList.value.length === props.maxCount,
+                type: "primary"
+              }, {
+                default: vue.withCtx(() => [..._cache[6] || (_cache[6] = [
+                  vue.createTextVNode(
+                    "\u9009\u62E9\u56FE\u7247",
+                    -1
+                    /* CACHED */
+                  )
+                ])]),
+                _: 1
+                /* STABLE */
+              }, 8, ["disabled"])
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["class", "file-list", "accept"]),
+          vue.createCommentVNode(" \u5DF2\u4E0A\u4F20\u56FE\u7247\u9884\u89C8\u5217\u8868 "),
+          previewList.value.length ? (vue.openBlock(), vue.createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: vue.normalizeClass(vue.unref(bem)("image-upload-pro", "preview-list"))
+            },
+            [
+              (vue.openBlock(true), vue.createElementBlock(
+                vue.Fragment,
+                null,
+                vue.renderList(previewList.value, (item, index) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    class: vue.normalizeClass([vue.unref(bem)("image-upload-pro", "preview-item"), { active: item.isCover }]),
+                    key: item.uid,
+                    draggable: "true",
+                    onDragstart: ($event) => handleDragStart(index),
+                    onDragover: _cache[0] || (_cache[0] = ($event) => handleDragOver($event)),
+                    onDrop: ($event) => handleDrop(index)
+                  }, [
+                    vue.createCommentVNode(" \u56FE\u7247\u9884\u89C8 "),
+                    vue.createElementVNode(
+                      "div",
+                      {
+                        class: vue.normalizeClass(vue.unref(bem)("image-upload-pro", "preview-img"))
+                      },
+                      [
+                        vue.createVNode(_component_el_image, {
+                          src: item.url,
+                          "preview-src-list": previewList.value.map((i) => i.url),
+                          "preview-current-index": index,
+                          fit: "cover"
+                        }, null, 8, ["src", "preview-src-list", "preview-current-index"])
+                      ],
+                      2
+                      /* CLASS */
+                    ),
+                    vue.createCommentVNode(" \u64CD\u4F5C\u6309\u94AE\u7EC4 "),
+                    vue.createElementVNode(
+                      "div",
+                      {
+                        class: vue.normalizeClass(vue.unref(bem)("image-upload-pro", "preview-actions"))
+                      },
+                      [
+                        vue.createVNode(_component_el_button, {
+                          type: "primary",
+                          text: "",
+                          size: "small",
+                          onClick: ($event) => handleCropImage(item)
+                        }, {
+                          default: vue.withCtx(() => [..._cache[7] || (_cache[7] = [
+                            vue.createTextVNode(
+                              "\u88C1\u526A",
+                              -1
+                              /* CACHED */
+                            )
+                          ])]),
+                          _: 1
+                          /* STABLE */
+                        }, 8, ["onClick"]),
+                        vue.createVNode(_component_el_button, {
+                          text: "",
+                          size: "small",
+                          type: "danger",
+                          onClick: ($event) => handleRemovePreview(item)
+                        }, {
+                          default: vue.withCtx(() => [..._cache[8] || (_cache[8] = [
+                            vue.createTextVNode(
+                              "\u5220\u9664",
+                              -1
+                              /* CACHED */
+                            )
+                          ])]),
+                          _: 1
+                          /* STABLE */
+                        }, 8, ["onClick"])
+                      ],
+                      2
+                      /* CLASS */
+                    )
+                  ], 42, _hoisted_2);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ],
+            2
+            /* CLASS */
+          )) : vue.createCommentVNode("v-if", true),
+          vue.createCommentVNode(" \u88C1\u526A\u5F39\u7A97 "),
+          vue.createVNode(_component_el_dialog, {
+            modelValue: cropDialogVisible.value,
+            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => cropDialogVisible.value = $event),
+            title: "\u56FE\u7247\u88C1\u526A",
+            width: "900px",
+            "close-on-click-modal": false,
+            "destroy-on-close": "",
+            onClose: resetCropper
+          }, {
+            footer: vue.withCtx(() => [
+              vue.createVNode(_component_el_button, {
+                onClick: _cache[4] || (_cache[4] = ($event) => cropDialogVisible.value = false)
+              }, {
+                default: vue.withCtx(() => [..._cache[10] || (_cache[10] = [
+                  vue.createTextVNode(
+                    "\u53D6\u6D88",
+                    -1
+                    /* CACHED */
+                  )
+                ])]),
+                _: 1
+                /* STABLE */
+              }),
+              vue.createVNode(_component_el_button, {
+                type: "primary",
+                onClick: handleCropConfirm
+              }, {
+                default: vue.withCtx(() => [..._cache[11] || (_cache[11] = [
+                  vue.createTextVNode(
+                    "\u786E\u8BA4\u88C1\u526A",
+                    -1
+                    /* CACHED */
+                  )
+                ])]),
+                _: 1
+                /* STABLE */
+              })
+            ]),
+            default: vue.withCtx(() => [
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.normalizeClass(vue.unref(bem)("image-upload-pro", "cropper-container"))
+                },
+                [
+                  vue.createCommentVNode(" \u88C1\u526A\u533A\u57DF "),
+                  vue.createVNode(vue.unref(M), {
+                    ref_key: "cropperRef",
+                    ref: cropperRef,
+                    img: cropImageUrl.value,
+                    info: true,
+                    "auto-crop": true,
+                    "auto-crop-width": cropWidth.value,
+                    "auto-crop-height": cropHeight.value,
+                    fixed: aspectRatio.fixed,
+                    "fixed-number": aspectRatio.value,
+                    "can-move": true,
+                    "can-scale": true,
+                    "can-rotate": false,
+                    onRealTime: handleCropRealTime
+                  }, null, 8, ["img", "auto-crop-width", "auto-crop-height", "fixed", "fixed-number"])
+                ],
+                2
+                /* CLASS */
+              ),
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.normalizeClass(vue.unref(bem)("image-upload-pro", "cropper-config"))
+                },
+                [
+                  vue.createVNode(_component_el_form, { model: cropForm }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_component_el_row, { gutter: 10 }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(_component_el_col, { span: 8 }, {
+                            default: vue.withCtx(() => [
+                              vue.createVNode(_component_el_form_item, { label: "\u88C1\u526A\u6BD4\u4F8B" }, {
+                                default: vue.withCtx(() => [
+                                  vue.createVNode(_component_el_select, {
+                                    style: { "width": "100%" },
+                                    modelValue: cropForm.aspectRatio,
+                                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => cropForm.aspectRatio = $event),
+                                    onChange: handleAspectRatioChange
+                                  }, {
+                                    default: vue.withCtx(() => [
+                                      (vue.openBlock(), vue.createElementBlock(
+                                        vue.Fragment,
+                                        null,
+                                        vue.renderList(ASPECT_RATIO_OPTIONS, (option) => {
+                                          return vue.createVNode(_component_el_option, {
+                                            key: option.value,
+                                            label: option.label,
+                                            value: option.value
+                                          }, null, 8, ["label", "value"]);
+                                        }),
+                                        64
+                                        /* STABLE_FRAGMENT */
+                                      ))
+                                    ]),
+                                    _: 1
+                                    /* STABLE */
+                                  }, 8, ["modelValue"])
+                                ]),
+                                _: 1
+                                /* STABLE */
+                              })
+                            ]),
+                            _: 1
+                            /* STABLE */
+                          }),
+                          vue.createVNode(_component_el_col, { span: 16 }, {
+                            default: vue.withCtx(() => [
+                              vue.createVNode(_component_el_form_item, { label: "\u88C1\u526A\u5C3A\u5BF8" }, {
+                                default: vue.withCtx(() => [
+                                  vue.createVNode(_component_el_input_number, {
+                                    modelValue: displayWidth.value,
+                                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => displayWidth.value = $event),
+                                    placeholder: "\u5BBD\u5EA6",
+                                    min: props.sizeLimit.width || 100,
+                                    onChange: handleSizeChange
+                                  }, null, 8, ["modelValue", "min"]),
+                                  _cache[9] || (_cache[9] = vue.createElementVNode(
+                                    "span",
+                                    { style: { "margin": "0 8px" } },
+                                    "*",
+                                    -1
+                                    /* CACHED */
+                                  )),
+                                  vue.createVNode(_component_el_input_number, {
+                                    modelValue: displayHeight.value,
+                                    "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => displayHeight.value = $event),
+                                    placeholder: "\u9AD8\u5EA6",
+                                    min: props.sizeLimit.height || 100,
+                                    onChange: handleSizeChange
+                                  }, null, 8, ["modelValue", "min"])
+                                ]),
+                                _: 1
+                                /* STABLE */
+                              })
+                            ]),
+                            _: 1
+                            /* STABLE */
+                          })
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      })
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["model"])
+                ],
+                2
+                /* CLASS */
+              )
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["modelValue"])
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+const MlImageUploadPro = withInstall(_sfc_main);
 
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   MlButton: MlButton,
   MlChart: MlChart,
   MlDetail: MlDetail,
+  MlImageUploadPro: MlImageUploadPro,
   MlNumberRangeInput: MlNumberRangeInput,
   MlSearch: MlSearch,
   MlSearchTable: MlSearchTable,
-  MlVirtualList: MlVirtualList
+  MlTreeSelect: MlTreeSelect,
+  MlTreeSelectDialog: MlTreeSelectDialog,
+  MlTreeSelectDrawer: MlTreeSelectDrawer,
+  MlVirtualList: MlVirtualList,
+  dialogPropKeys: dialogPropKeys,
+  drawerPropKeys: drawerPropKeys,
+  imageUploadProProps: imageUploadProProps
 });
 
 const MsUIComponentsInstance = Object.values(components);
@@ -7045,10 +9497,17 @@ var index = {
 exports.MlButton = MlButton;
 exports.MlChart = MlChart;
 exports.MlDetail = MlDetail;
+exports.MlImageUploadPro = MlImageUploadPro;
 exports.MlNumberRangeInput = MlNumberRangeInput;
 exports.MlSearch = MlSearch;
 exports.MlSearchTable = MlSearchTable;
+exports.MlTreeSelect = MlTreeSelect;
+exports.MlTreeSelectDialog = MlTreeSelectDialog;
+exports.MlTreeSelectDrawer = MlTreeSelectDrawer;
 exports.MlVirtualList = MlVirtualList;
 exports.MsUIComponentsInstance = MsUIComponentsInstance;
 exports.MsUIComponentsName = MsUIComponentsName;
 exports.default = index;
+exports.dialogPropKeys = dialogPropKeys;
+exports.drawerPropKeys = drawerPropKeys;
+exports.imageUploadProProps = imageUploadProProps;