djm-ui 0.67.4 → 0.73.0

package/dist/djm-ui.esm.js

@@ -1,4 +1,4 @@
-/*! DJM UI v0.67.4 · MIT · 2026-10-26 */
+/*! DJM UI v0.73.0 · MIT · 2026-10-26 */
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __esm = (fn, res, err) => function __init() {
@@ -969,7 +969,19 @@ var PATHS = {
   activity: "M22 12h-4l-3 9L9 3l-3 9H2",
   database: "M12 8c4.42 0 8-1.34 8-3s-3.58-3-8-3-8 1.34-8 3 3.58 3 8 3zM4 5v14c0 1.66 3.58 3 8 3s8-1.34 8-3V5M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3",
   sun: "M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42",
-  moon: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"
+  moon: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z",
+  undo: "M3 10h11a5 5 0 1 1 0 10H8M3 10l4-4M3 10l4 4",
+  redo: "M21 10H10a5 5 0 1 0 0 10h6M21 10l-4-4M21 10l-4 4",
+  "align-left": "M4 6h16M4 12h10M4 18h13",
+  "align-center": "M4 6h16M7 12h10M6 18h12",
+  "align-right": "M4 6h16M10 12h10M7 18h13",
+  "align-justify": "M4 6h16M4 12h16M4 18h16",
+  list: "M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01",
+  "list-ordered": "M10 6h10M10 12h10M10 18h10M4 6h1v4M4 12h2M4 16h2v2H4",
+  outdent: "M4 6h16M10 12h10M10 18h10M8 9l-3 3 3 3",
+  indent: "M4 6h16M10 12h10M10 18h10M5 9l3 3-3 3",
+  unlink: "M10 13a5 5 0 0 0 7.5.5M14 11a5 5 0 0 0-7.5-.5M2 2l20 20",
+  images: "M8 3h12v12M4 7h12v12H4zM7 15l3-3 3 3"
 };
 var icon_default = {
   name: "DjmIcon",
@@ -1296,7 +1308,6 @@ var zh_CN_default = {
   "richEditor.italic": "\u659C\u4F53",
   "richEditor.underline": "\u4E0B\u5212\u7EBF",
   "richEditor.strike": "\u5220\u9664\u7EBF",
-  "richEditor.heading": "\u4E8C\u7EA7\u6807\u9898",
   "richEditor.paragraph": "\u6B63\u6587",
   "richEditor.bulletList": "\u65E0\u5E8F\u5217\u8868",
   "richEditor.numberList": "\u6709\u5E8F\u5217\u8868",
@@ -1307,6 +1318,39 @@ var zh_CN_default = {
   "richEditor.redo": "\u91CD\u505A",
   "richEditor.source": "\u6E90\u7801",
   "richEditor.visual": "\u53EF\u89C6\u5316",
+  "richEditor.toolbar": "\u7F16\u8F91\u5DE5\u5177\u680F",
+  "richEditor.block": "\u6BB5\u843D\u683C\u5F0F",
+  "richEditor.heading1": "\u6807\u9898 1",
+  "richEditor.heading2": "\u6807\u9898 2",
+  "richEditor.heading3": "\u6807\u9898 3",
+  "richEditor.quote": "\u5F15\u7528",
+  "richEditor.codeBlock": "\u4EE3\u7801\u5757",
+  "richEditor.fontSize": "\u5B57\u53F7",
+  "richEditor.defaultSize": "\u9ED8\u8BA4",
+  "richEditor.inlineCode": "\u884C\u5185\u4EE3\u7801",
+  "richEditor.textColor": "\u6587\u5B57\u989C\u8272",
+  "richEditor.bgColor": "\u80CC\u666F\u8272",
+  "richEditor.alignLeft": "\u5DE6\u5BF9\u9F50",
+  "richEditor.alignCenter": "\u5C45\u4E2D",
+  "richEditor.alignRight": "\u53F3\u5BF9\u9F50",
+  "richEditor.alignJustify": "\u4E24\u7AEF\u5BF9\u9F50",
+  "richEditor.outdent": "\u51CF\u5C11\u7F29\u8FDB",
+  "richEditor.indent": "\u589E\u52A0\u7F29\u8FDB",
+  "richEditor.unlink": "\u53D6\u6D88\u94FE\u63A5",
+  "richEditor.image": "\u63D2\u5165\u56FE\u7247",
+  "richEditor.singleImage": "\u63D2\u5165\u5355\u56FE",
+  "richEditor.multiImage": "\u63D2\u5165\u591A\u56FE",
+  "richEditor.mediaLibrary": "\u4ECE\u7D20\u6750\u5E93\u9009\u62E9",
+  "richEditor.hr": "\u5206\u5272\u7EBF",
+  "richEditor.fullscreen": "\u5168\u5C4F",
+  "richEditor.exitFullscreen": "\u9000\u51FA\u5168\u5C4F",
+  "richEditor.wordCount": "\u5171 {count} \u5B57",
+  "richEditor.uploading": "\u6B63\u5728\u4E0A\u4F20 {count} \u5F20\u56FE\u7247\u2026",
+  "richEditor.uploadFailed": "\u56FE\u7247\u4E0A\u4F20\u5931\u8D25",
+  "richEditor.imageTypeError": "\u53EA\u80FD\u4E0A\u4F20\u56FE\u7247\u6587\u4EF6",
+  "richEditor.imageSizeError": "\u56FE\u7247\u4E0D\u80FD\u8D85\u8FC7 {size}MB",
+  "richEditor.imageUrlInvalid": "\u56FE\u7247\u5730\u5740\u4E0D\u5408\u6CD5\uFF0C\u5DF2\u62D2\u7EDD\u63D2\u5165",
+  "richEditor.linkInvalid": "\u94FE\u63A5\u53EA\u652F\u6301 http(s)\u3001mailto\u3001tel \u6216\u7AD9\u5185\u76F8\u5BF9\u5730\u5740",
   "approval.start": "\u53D1\u8D77",
   "approval.cc": "\u6284\u9001",
   "approval.approved": "\u5DF2\u901A\u8FC7",
@@ -1515,7 +1559,6 @@ var en_US_default = {
   "richEditor.italic": "Italic",
   "richEditor.underline": "Underline",
   "richEditor.strike": "Strikethrough",
-  "richEditor.heading": "Heading 2",
   "richEditor.paragraph": "Paragraph",
   "richEditor.bulletList": "Bullet list",
   "richEditor.numberList": "Numbered list",
@@ -1526,6 +1569,39 @@ var en_US_default = {
   "richEditor.redo": "Redo",
   "richEditor.source": "Source",
   "richEditor.visual": "Visual",
+  "richEditor.toolbar": "Formatting toolbar",
+  "richEditor.block": "Paragraph style",
+  "richEditor.heading1": "Heading 1",
+  "richEditor.heading2": "Heading 2",
+  "richEditor.heading3": "Heading 3",
+  "richEditor.quote": "Quote",
+  "richEditor.codeBlock": "Code block",
+  "richEditor.fontSize": "Font size",
+  "richEditor.defaultSize": "Default",
+  "richEditor.inlineCode": "Inline code",
+  "richEditor.textColor": "Text color",
+  "richEditor.bgColor": "Background color",
+  "richEditor.alignLeft": "Align left",
+  "richEditor.alignCenter": "Align center",
+  "richEditor.alignRight": "Align right",
+  "richEditor.alignJustify": "Justify",
+  "richEditor.outdent": "Decrease indent",
+  "richEditor.indent": "Increase indent",
+  "richEditor.unlink": "Remove link",
+  "richEditor.image": "Insert image",
+  "richEditor.singleImage": "Insert single image",
+  "richEditor.multiImage": "Insert multiple images",
+  "richEditor.mediaLibrary": "Choose from media library",
+  "richEditor.hr": "Divider",
+  "richEditor.fullscreen": "Fullscreen",
+  "richEditor.exitFullscreen": "Exit fullscreen",
+  "richEditor.wordCount": "{count} characters",
+  "richEditor.uploading": "Uploading {count} image(s)\u2026",
+  "richEditor.uploadFailed": "Image upload failed",
+  "richEditor.imageTypeError": "Only image files are allowed",
+  "richEditor.imageSizeError": "Image must be smaller than {size}MB",
+  "richEditor.imageUrlInvalid": "Invalid image URL, insertion rejected",
+  "richEditor.linkInvalid": "Only http(s), mailto, tel or relative URLs are allowed",
   "approval.start": "Started",
   "approval.cc": "CC",
   "approval.approved": "Approved",
@@ -1646,7 +1722,7 @@ function t(key, params) {
 // src/utils/panel.js
 var PANEL_HIDDEN_STYLE = { position: "fixed", left: "0px", top: "0px", visibility: "hidden" };
 function bindPanelListeners({ root, panel, onClose, onReposition, esc = true }) {
-  const el = (ref50) => typeof ref50 === "function" ? ref50() : ref50;
+  const el = (ref51) => typeof ref51 === "function" ? ref51() : ref51;
   function onDocumentMousedown(event) {
     const rootEl = el(root);
     const panelEl = el(panel);
@@ -4019,12 +4095,18 @@ var progress_default = {
   name: "DjmProgress",
   props: {
     percent: { type: Number, default: 0 },
+    // line 横向 / circle 环形
+    type: { type: String, default: "line" },
     // '' / success / error / warning
     status: { type: String, default: "" },
     showText: { type: Boolean, default: true },
     strokeWidth: { type: Number, default: 6 },
     // 自定义进度色，不传由状态决定
-    color: { type: String, default: "" }
+    color: { type: String, default: "" },
+    // 环形直径（px）
+    size: { type: Number, default: 96 },
+    // 无障碍名称，默认「进度」
+    label: { type: String, default: "" }
   },
   computed: {
     safePercent() {
@@ -4037,10 +4119,72 @@ var progress_default = {
     },
     trackStyle() {
       return { height: this.strokeWidth + "px" };
+    },
+    circleSize() {
+      return Math.max(48, Number(this.size) || 96);
+    },
+    circleRadius() {
+      return (this.circleSize - this.strokeWidth) / 2;
+    },
+    circleLength() {
+      return 2 * Math.PI * this.circleRadius;
+    },
+    circleOffset() {
+      return this.circleLength * (1 - this.safePercent / 100);
+    },
+    circleStyle() {
+      return { width: this.circleSize + "px", height: this.circleSize + "px" };
+    },
+    circleLabelStyle() {
+      return { fontSize: Math.max(12, Math.round(this.circleSize / 5)) + "px" };
     }
   },
   template: `
-    <div class="djm-progress-line" :class="status ? 'djm-is-' + status : ''">
+    <div
+      v-if="type === 'circle'"
+      class="djm-progress-circle"
+      :class="status ? 'djm-is-' + status : ''"
+      :style="circleStyle"
+      role="progressbar"
+      :aria-label="label || '\u8FDB\u5EA6'"
+      :aria-valuenow="safePercent"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
+      <svg :viewBox="'0 0 ' + circleSize + ' ' + circleSize" aria-hidden="true">
+        <circle
+          class="djm-progress-circle-track"
+          :cx="circleSize / 2"
+          :cy="circleSize / 2"
+          :r="circleRadius"
+          :stroke-width="strokeWidth"
+          fill="none"
+        />
+        <circle
+          class="djm-progress-circle-bar"
+          :cx="circleSize / 2"
+          :cy="circleSize / 2"
+          :r="circleRadius"
+          :stroke-width="strokeWidth"
+          fill="none"
+          stroke-linecap="round"
+          :stroke-dasharray="circleLength"
+          :stroke-dashoffset="circleOffset"
+          :style="color ? { stroke: color } : null"
+        />
+      </svg>
+      <span v-if="showText" class="djm-progress-circle-label" :style="circleLabelStyle">{{ safePercent }}%</span>
+    </div>
+    <div
+      v-else
+      class="djm-progress-line"
+      :class="status ? 'djm-is-' + status : ''"
+      role="progressbar"
+      :aria-label="label || '\u8FDB\u5EA6'"
+      :aria-valuenow="safePercent"
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
       <div class="djm-progress" :style="trackStyle">
         <div class="djm-progress-bar" :style="barStyle"></div>
       </div>
@@ -5242,48 +5386,91 @@ var alert_default = {
 };
 
 // src/components/spin/index.js
+import { onBeforeUnmount as onBeforeUnmount4, ref as ref3, watch as watch3 } from "vue";
 var spin_default = {
   name: "DjmSpin",
   props: {
     spinning: { type: Boolean, default: true },
-    size: { type: String, default: "md" },
     // sm | md | lg
-    tip: { type: String, default: "" }
+    size: { type: String, default: "md" },
+    // ring 环形 / dots 点状 / bars 柱状 / pulse 脉冲
+    type: { type: String, default: "ring" },
+    tip: { type: String, default: "" },
+    // 延迟多少毫秒后显示，0 表示立即
+    delay: { type: Number, default: 0 },
+    // 全屏加载：遮罩铺满视口
+    fullscreen: { type: Boolean, default: false },
+    // 自定义指示器颜色，默认跟随品牌色
+    color: { type: String, default: "" }
+  },
+  setup(props) {
+    const visible = ref3(false);
+    let timer = null;
+    function sync() {
+      window.clearTimeout(timer);
+      timer = null;
+      if (!props.spinning) {
+        visible.value = false;
+        return;
+      }
+      if (props.delay > 0) {
+        timer = window.setTimeout(() => {
+          visible.value = true;
+        }, props.delay);
+      } else {
+        visible.value = true;
+      }
+    }
+    watch3(() => [props.spinning, props.delay], sync, { immediate: true });
+    onBeforeUnmount4(() => window.clearTimeout(timer));
+    return { visible };
   },
   computed: {
-    // 有默认插槽即为包裹模式
     wrapped() {
       return !!this.$slots.default;
+    },
+    rootClass() {
+      return [
+        "djm-spin",
+        "djm-spin-" + this.size,
+        {
+          "djm-spin-wrap": this.wrapped && !this.fullscreen,
+          "djm-spin-inline": !this.wrapped && !this.fullscreen,
+          "djm-spin-fullscreen": this.fullscreen
+        }
+      ];
     }
   },
   template: `
     <div
-      v-if="wrapped"
-      class="djm-spin-wrap"
-      :class="'djm-spin-' + size"
-      :aria-busy="String(spinning)"
+      v-if="fullscreen || wrapped || visible"
+      :class="rootClass"
+      :aria-busy="String(visible)"
+      :role="visible ? 'status' : undefined"
+      :aria-label="!wrapped && !fullscreen && !tip && visible ? '\u52A0\u8F7D\u4E2D' : undefined"
     >
-      <slot />
-      <div v-if="spinning" class="djm-spin-mask" role="status">
-        <span class="djm-spinner"></span>
+      <slot v-if="wrapped && !fullscreen" />
+      <div v-if="visible" class="djm-spin-mask">
+        <span class="djm-spin-indicator" :class="'djm-spin-' + type" :style="color ? { color } : null">
+          <slot name="indicator">
+            <i v-if="type === 'ring'" class="djm-spinner"></i>
+            <template v-else-if="type === 'dots'">
+              <i></i><i></i><i></i>
+            </template>
+            <template v-else-if="type === 'bars'">
+              <i></i><i></i><i></i><i></i>
+            </template>
+            <i v-else class="djm-spin-core"></i>
+          </slot>
+        </span>
         <span v-if="tip" class="djm-spin-tip">{{ tip }}</span>
       </div>
     </div>
-    <span
-      v-else
-      class="djm-spin-inline"
-      :class="'djm-spin-' + size"
-      role="status"
-      :aria-label="tip ? undefined : '\u52A0\u8F7D\u4E2D'"
-    >
-      <span class="djm-spinner"></span>
-      <span v-if="tip" class="djm-spin-tip">{{ tip }}</span>
-    </span>
   `
 };
 
 // src/components/popconfirm/index.js
-import { nextTick as nextTick3, onBeforeUnmount as onBeforeUnmount4, onMounted as onMounted3, ref as ref3, watch as watch3 } from "vue";
+import { nextTick as nextTick3, onBeforeUnmount as onBeforeUnmount5, onMounted as onMounted3, ref as ref4, watch as watch4 } from "vue";
 var popconfirm_default = {
   name: "DjmPopconfirm",
   components: { DjmIcon: icon_default },
@@ -5299,10 +5486,10 @@ var popconfirm_default = {
   },
   emits: ["confirm", "cancel", "visible-change"],
   setup(props, { emit }) {
-    const open = ref3(false);
-    const root = ref3(null);
-    const panelEl = ref3(null);
-    const panelStyle = ref3({});
+    const open = ref4(false);
+    const root = ref4(null);
+    const panelEl = ref4(null);
+    const panelStyle = ref4({});
     const PANEL_WIDTH = 244;
     let detachPanel = null;
     function syncTriggerA11y() {
@@ -5318,7 +5505,7 @@ var popconfirm_default = {
       target.setAttribute("aria-expanded", String(open.value));
     }
     onMounted3(() => nextTick3(syncTriggerA11y));
-    watch3(open, () => nextTick3(syncTriggerA11y));
+    watch4(open, () => nextTick3(syncTriggerA11y));
     function updatePosition() {
       if (!open.value || !root.value) return;
       const rect = root.value.getBoundingClientRect();
@@ -5377,7 +5564,7 @@ var popconfirm_default = {
       emit("cancel");
       close2();
     }
-    onBeforeUnmount4(close2);
+    onBeforeUnmount5(close2);
     return { open, root, panelEl, panelStyle, toggle, close: close2, confirm, cancel };
   },
   template: `
@@ -5421,7 +5608,7 @@ var popconfirm_default = {
 };
 
 // src/components/anchor/index.js
-import { onBeforeUnmount as onBeforeUnmount5, onMounted as onMounted4, ref as ref4, watch as watch4 } from "vue";
+import { onBeforeUnmount as onBeforeUnmount6, onMounted as onMounted4, ref as ref5, watch as watch5 } from "vue";
 var anchor_default = {
   name: "DjmAnchor",
   props: {
@@ -5434,8 +5621,8 @@ var anchor_default = {
   },
   emits: ["change"],
   setup(props, { emit }) {
-    const root = ref4(null);
-    const activeKey = ref4("");
+    const root = ref5(null);
+    const activeKey = ref5("");
     let scrollEl = null;
     let target = null;
     function resolveContainer() {
@@ -5490,8 +5677,8 @@ var anchor_default = {
       emit("change", item.href);
     }
     onMounted4(bind);
-    watch4(() => props.container, bind);
-    onBeforeUnmount5(unbind);
+    watch5(() => props.container, bind);
+    onBeforeUnmount6(unbind);
     return { root, activeKey, go };
   },
   template: `
@@ -5513,7 +5700,7 @@ var anchor_default = {
 };
 
 // src/components/backtop/index.js
-import { onBeforeUnmount as onBeforeUnmount6, onMounted as onMounted5, ref as ref5 } from "vue";
+import { onBeforeUnmount as onBeforeUnmount7, onMounted as onMounted5, ref as ref6 } from "vue";
 var backtop_default = {
   name: "DjmBacktop",
   components: { DjmIcon: icon_default },
@@ -5526,8 +5713,8 @@ var backtop_default = {
   },
   emits: ["click"],
   setup(props, { emit }) {
-    const visible = ref5(false);
-    const root = ref5(null);
+    const visible = ref6(false);
+    const root = ref6(null);
     let target = null;
     let scrollEl = null;
     function resolveContainer() {
@@ -5561,7 +5748,7 @@ var backtop_default = {
       emit("click");
     }
     onMounted5(bind);
-    onBeforeUnmount6(unbind);
+    onBeforeUnmount7(unbind);
     return { visible, root, toTop };
   },
   template: `
@@ -5638,7 +5825,7 @@ var space_default = {
 };
 
 // src/components/affix/index.js
-import { onBeforeUnmount as onBeforeUnmount7, onMounted as onMounted6, ref as ref6 } from "vue";
+import { onBeforeUnmount as onBeforeUnmount8, onMounted as onMounted6, ref as ref7 } from "vue";
 var affix_default = {
   name: "DjmAffix",
   props: {
@@ -5649,10 +5836,10 @@ var affix_default = {
     zIndex: { type: Number, default: 900 }
   },
   setup(props) {
-    const root = ref6(null);
-    const fixed = ref6(false);
-    const affixStyle = ref6({});
-    const holderStyle = ref6({});
+    const root = ref7(null);
+    const fixed = ref7(false);
+    const affixStyle = ref7({});
+    const holderStyle = ref7({});
     let target = null;
     let scrollEl = null;
     function resolveContainer() {
@@ -5708,7 +5895,7 @@ var affix_default = {
       target = null;
     }
     onMounted6(bind);
-    onBeforeUnmount7(unbind);
+    onBeforeUnmount8(unbind);
     return { root, fixed, affixStyle, holderStyle };
   },
   template: `
@@ -5759,7 +5946,7 @@ var segmented_default = {
 };
 
 // src/components/image/index.js
-import { nextTick as nextTick4, onBeforeUnmount as onBeforeUnmount8, ref as ref7, watch as watch5 } from "vue";
+import { nextTick as nextTick4, onBeforeUnmount as onBeforeUnmount9, ref as ref8, watch as watch6 } from "vue";
 
 // src/utils/scroll-lock.js
 var count = 0;
@@ -5806,11 +5993,11 @@ var image_default = {
     preview: { type: Boolean, default: true }
   },
   setup(props) {
-    const failed = ref7(false);
-    const open = ref7(false);
-    const zoomRef = ref7(null);
-    const closeRef = ref7(null);
-    watch5(() => props.src, () => {
+    const failed = ref8(false);
+    const open = ref8(false);
+    const zoomRef = ref8(null);
+    const closeRef = ref8(null);
+    watch6(() => props.src, () => {
       failed.value = false;
     });
     function toSize(value) {
@@ -5834,7 +6021,7 @@ var image_default = {
       document.removeEventListener("keydown", onKeydown);
       if (zoomRef.value) zoomRef.value.focus();
     }
-    onBeforeUnmount8(closePreview);
+    onBeforeUnmount9(closePreview);
     return { failed, open, zoomRef, closeRef, toSize, openPreview, closePreview, t };
   },
   template: `
@@ -5889,13 +6076,15 @@ var image_default = {
 };
 
 // src/components/watermark/index.js
-import { computed as computed4, onBeforeUnmount as onBeforeUnmount9, onMounted as onMounted7, ref as ref9, watch as watch6 } from "vue";
+import { computed as computed4, onBeforeUnmount as onBeforeUnmount10, onMounted as onMounted7, ref as ref10, watch as watch7 } from "vue";
 
 // src/theme/index.js
-import { ref as ref8 } from "vue";
+import { ref as ref9 } from "vue";
 var KEY = "djm-theme";
 var COLOR_KEY = "djm-primary";
-var theme = ref8("light");
+var GLASS_KEY = "djm-glass";
+var theme = ref9("light");
+var glass = ref9(false);
 var PRESET_COLORS = [
   { name: "\u9ED8\u8BA4\u84DD", value: "#1a6fc4" },
   { name: "\u79D1\u6280\u84DD", value: "#2563eb" },
@@ -5906,7 +6095,7 @@ var PRESET_COLORS = [
   { name: "\u6731\u7802\u7EA2", value: "#c0392b" },
   { name: "\u77F3\u58A8\u7070", value: "#4b5b6b" }
 ];
-var primaryColor = ref8("");
+var primaryColor = ref9("");
 var BRAND_VARS = [
   "--djm-brand-50",
   "--djm-brand-100",
@@ -6028,6 +6217,15 @@ function setTheme(name) {
 function toggleTheme() {
   setTheme(theme.value === "dark" ? "light" : "dark");
 }
+function setGlass(enabled) {
+  glass.value = !!enabled;
+  document.documentElement.dataset.djmGlass = glass.value ? "on" : "";
+  try {
+    if (glass.value) localStorage.setItem(GLASS_KEY, "1");
+    else localStorage.removeItem(GLASS_KEY);
+  } catch (error) {
+  }
+}
 function initTheme() {
   let saved = "";
   try {
@@ -6047,9 +6245,16 @@ function initTheme() {
   } catch (error) {
     color = "";
   }
+  let glassSaved = false;
+  try {
+    glassSaved = localStorage.getItem(GLASS_KEY) === "1";
+  } catch (error) {
+    glassSaved = false;
+  }
   if (color) primaryColor.value = color;
   const next = param === "dark" || param === "light" ? param : saved || "light";
   setTheme(next);
+  setGlass(glassSaved);
 }
 
 // src/components/watermark/index.js
@@ -6065,7 +6270,7 @@ var watermark_default = {
     zIndex: { type: Number, default: 10 }
   },
   setup(props) {
-    const dataUrl = ref9("");
+    const dataUrl = ref10("");
     let canvasEl = null;
     function build() {
       const lines = (Array.isArray(props.content) ? props.content : [props.content]).filter(Boolean);
@@ -6107,8 +6312,8 @@ var watermark_default = {
       zIndex: props.zIndex
     }));
     onMounted7(build);
-    watch6(() => [props.content, props.gap, props.fontSize, props.color, props.rotate, theme.value], build, { deep: true });
-    onBeforeUnmount9(() => {
+    watch7(() => [props.content, props.gap, props.fontSize, props.color, props.rotate, theme.value], build, { deep: true });
+    onBeforeUnmount10(() => {
       canvasEl = null;
     });
     return { layerStyle };
@@ -6298,7 +6503,7 @@ var autocomplete_default = {
 };
 
 // src/components/splitter/index.js
-import { computed as computed5, onBeforeUnmount as onBeforeUnmount10, ref as ref10 } from "vue";
+import { computed as computed5, onBeforeUnmount as onBeforeUnmount11, ref as ref11 } from "vue";
 var splitter_default = {
   name: "DjmSplitter",
   props: {
@@ -6311,8 +6516,8 @@ var splitter_default = {
   },
   emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
-    const root = ref10(null);
-    const dragging = ref10(false);
+    const root = ref11(null);
+    const dragging = ref11(false);
     const ratio = computed5(() => {
       const value = Number(props.modelValue);
       const safe = Number.isFinite(value) ? value : 50;
@@ -6357,7 +6562,7 @@ var splitter_default = {
         commit(ratio.value + step);
       }
     }
-    onBeforeUnmount10(stopDrag);
+    onBeforeUnmount11(stopDrag);
     return { root, dragging, ratio, startDrag, onKeydown };
   },
   template: `
@@ -6394,7 +6599,7 @@ var splitter_default = {
 };
 
 // src/components/carousel/index.js
-import { onBeforeUnmount as onBeforeUnmount11, onMounted as onMounted8, ref as ref11, watch as watch7 } from "vue";
+import { onBeforeUnmount as onBeforeUnmount12, onMounted as onMounted8, ref as ref12, watch as watch8 } from "vue";
 var carousel_default = {
   name: "DjmCarousel",
   components: { DjmIcon: icon_default },
@@ -6408,7 +6613,7 @@ var carousel_default = {
   },
   emits: ["change"],
   setup(props, { emit }) {
-    const index = ref11(0);
+    const index = ref12(0);
     let timer = null;
     const boxStyle = () => ({
       height: typeof props.height === "number" ? props.height + "px" : props.height
@@ -6446,14 +6651,14 @@ var carousel_default = {
       }
     }
     onMounted8(start);
-    watch7(() => [props.autoplay, props.interval, props.items.length], start);
+    watch8(() => [props.autoplay, props.interval, props.items.length], start);
     function pause() {
       if (props.autoplay) stop();
     }
     function resume() {
       if (props.autoplay) start();
     }
-    onBeforeUnmount11(stop);
+    onBeforeUnmount12(stop);
     return { index, boxStyle, go, next, prev, onKeydown, pause, resume };
   },
   template: `
@@ -6513,7 +6718,7 @@ var carousel_default = {
 };
 
 // src/components/tour/index.js
-import { computed as computed6, nextTick as nextTick5, onBeforeUnmount as onBeforeUnmount12, onMounted as onMounted9, ref as ref12, watch as watch8 } from "vue";
+import { computed as computed6, nextTick as nextTick5, onBeforeUnmount as onBeforeUnmount13, onMounted as onMounted9, ref as ref13, watch as watch9 } from "vue";
 var tour_default = {
   name: "DjmTour",
   components: { DjmIcon: icon_default },
@@ -6525,10 +6730,10 @@ var tour_default = {
   },
   emits: ["update:modelValue", "change", "finish"],
   setup(props, { emit }) {
-    const current = ref12(0);
-    const highlight = ref12({ top: "0px", left: "0px", width: "0px", height: "0px" });
-    const cardStyle = ref12({ position: "fixed", left: "0px", top: "0px", visibility: "hidden" });
-    const card = ref12(null);
+    const current = ref13(0);
+    const highlight = ref13({ top: "0px", left: "0px", width: "0px", height: "0px" });
+    const cardStyle = ref13({ position: "fixed", left: "0px", top: "0px", visibility: "hidden" });
+    const card = ref13(null);
     const step = computed6(() => props.steps[current.value] || null);
     function update() {
       const scene = step.value;
@@ -6589,14 +6794,14 @@ var tour_default = {
       emit("change", current.value);
       nextTick5(update);
     }
-    watch8(() => props.modelValue, (value) => {
+    watch9(() => props.modelValue, (value) => {
       if (value) startScene();
       else stopScene();
     });
     onMounted9(() => {
       if (props.modelValue) startScene();
     });
-    onBeforeUnmount12(stopScene);
+    onBeforeUnmount13(stopScene);
     return { current, step, highlight, cardStyle, card, close: close2, next, prev, t };
   },
   template: `
@@ -6634,7 +6839,7 @@ var tour_default = {
 };
 
 // src/components/calendar/index.js
-import { computed as computed7, ref as ref13, watch as watch9 } from "vue";
+import { computed as computed7, ref as ref14, watch as watch10 } from "vue";
 function pad2(num) {
   return String(num).padStart(2, "0");
 }
@@ -6664,8 +6869,8 @@ var calendar_default = {
     const today = /* @__PURE__ */ new Date();
     const todayKey = toKey(today.getFullYear(), today.getMonth(), today.getDate());
     const initial = parse(props.modelValue);
-    const viewYear = ref13(initial ? initial.year : today.getFullYear());
-    const viewMonth = ref13(initial ? initial.month : today.getMonth());
+    const viewYear = ref14(initial ? initial.year : today.getFullYear());
+    const viewMonth = ref14(initial ? initial.month : today.getMonth());
     const weekNames = computed7(() => {
       const base = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
       return base.slice(props.firstDay).concat(base.slice(0, props.firstDay));
@@ -6731,7 +6936,7 @@ var calendar_default = {
       event.preventDefault();
       list[next].focus();
     }
-    watch9(() => props.modelValue, (value) => {
+    watch10(() => props.modelValue, (value) => {
       const parts = parse(value);
       if (parts && (parts.year !== viewYear.value || parts.month !== viewMonth.value)) {
         viewYear.value = parts.year;
@@ -6785,7 +6990,7 @@ var calendar_default = {
 };
 
 // src/components/float-button/index.js
-import { onBeforeUnmount as onBeforeUnmount13, ref as ref14 } from "vue";
+import { onBeforeUnmount as onBeforeUnmount14, ref as ref15 } from "vue";
 var float_button_default = {
   name: "DjmFloatButton",
   components: { DjmIcon: icon_default },
@@ -6801,7 +7006,7 @@ var float_button_default = {
   },
   emits: ["click", "select"],
   setup(props, { emit }) {
-    const open = ref14(false);
+    const open = ref15(false);
     function onKeydown(event) {
       if (event.key === "Escape") close2();
     }
@@ -6836,7 +7041,7 @@ var float_button_default = {
       emit("select", item);
       if (typeof item.onClick === "function") item.onClick(item);
     }
-    onBeforeUnmount13(close2);
+    onBeforeUnmount14(close2);
     return { open, onMainClick, choose };
   },
   template: `
@@ -6871,7 +7076,7 @@ var float_button_default = {
 };
 
 // src/components/mentions/index.js
-import { computed as computed8, nextTick as nextTick6, onBeforeUnmount as onBeforeUnmount14, ref as ref15, watch as watch10 } from "vue";
+import { computed as computed8, nextTick as nextTick6, onBeforeUnmount as onBeforeUnmount15, ref as ref16, watch as watch11 } from "vue";
 var uidSeed3 = 0;
 var mentions_default = {
   name: "DjmMentions",
@@ -6886,17 +7091,17 @@ var mentions_default = {
   },
   emits: ["update:modelValue", "input", "select"],
   setup(props, { emit }) {
-    const root = ref15(null);
-    const input = ref15(null);
-    const text = ref15(props.modelValue);
-    const open = ref15(false);
-    const keyword = ref15("");
-    const activeIndex = ref15(-1);
+    const root = ref16(null);
+    const input = ref16(null);
+    const text = ref16(props.modelValue);
+    const open = ref16(false);
+    const keyword = ref16("");
+    const activeIndex = ref16(-1);
     const listId = "djm-mentions-" + ++uidSeed3;
-    const panelStyle = ref15({ ...PANEL_HIDDEN_STYLE });
+    const panelStyle = ref16({ ...PANEL_HIDDEN_STYLE });
     let triggerIndex = -1;
     let detachPanel = null;
-    watch10(() => props.modelValue, (value) => {
+    watch11(() => props.modelValue, (value) => {
       text.value = value;
     });
     const normalized = computed8(() => props.options.map((item) => typeof item === "string" ? { value: item, label: item } : item));
@@ -6989,7 +7194,7 @@ var mentions_default = {
         input.value.setSelectionRange(pos, pos);
       });
     }
-    onBeforeUnmount14(closePanel);
+    onBeforeUnmount15(closePanel);
     return {
       root,
       input,
@@ -7263,7 +7468,7 @@ var input_tag_default = {
 };
 
 // src/components/password/index.js
-import { computed as computed9, ref as ref16 } from "vue";
+import { computed as computed9, ref as ref17 } from "vue";
 var password_default = {
   name: "DjmPassword",
   components: { DjmIcon: icon_default },
@@ -7277,7 +7482,7 @@ var password_default = {
   },
   emits: ["update:modelValue", "input", "change", "enter", "focus", "blur"],
   setup(props, { emit }) {
-    const visible = ref16(false);
+    const visible = ref17(false);
     const score = computed9(() => {
       const value = props.modelValue || "";
       if (!value) return 0;
@@ -7343,7 +7548,7 @@ var password_default = {
 };
 
 // src/components/command-palette/index.js
-import { computed as computed10, nextTick as nextTick7, onBeforeUnmount as onBeforeUnmount15, onMounted as onMounted10, ref as ref17, watch as watch11 } from "vue";
+import { computed as computed10, nextTick as nextTick7, onBeforeUnmount as onBeforeUnmount16, onMounted as onMounted10, ref as ref18, watch as watch12 } from "vue";
 
 // src/utils/focus-trap.js
 var FOCUSABLE = [
@@ -7396,11 +7601,11 @@ var command_palette_default = {
   },
   emits: ["update:modelValue", "run"],
   setup(props, { emit }) {
-    const open = ref17(false);
-    const keyword = ref17("");
-    const activeIndex = ref17(-1);
-    const searchInput = ref17(null);
-    const panelEl = ref17(null);
+    const open = ref18(false);
+    const keyword = ref18("");
+    const activeIndex = ref18(-1);
+    const searchInput = ref18(null);
+    const panelEl = ref18(null);
     const listId = "djm-command-list-" + ++uidSeed4;
     let releaseTrap = null;
     const filtered = computed10(() => {
@@ -7483,12 +7688,12 @@ var command_palette_default = {
       if (typeof item.run === "function") item.run(item);
       hide();
     }
-    watch11(() => props.modelValue, (value) => {
+    watch12(() => props.modelValue, (value) => {
       if (value) show();
       else hide();
     });
     onMounted10(() => window.addEventListener("keydown", onGlobalKeydown));
-    onBeforeUnmount15(() => {
+    onBeforeUnmount16(() => {
       window.removeEventListener("keydown", onGlobalKeydown);
       hide();
     });
@@ -7540,7 +7745,7 @@ var command_palette_default = {
 };
 
 // src/components/qrcode/index.js
-import { onMounted as onMounted11, ref as ref18, watch as watch12 } from "vue";
+import { onMounted as onMounted11, ref as ref19, watch as watch13 } from "vue";
 var qrcode_default = {
   name: "DjmQRCode",
   props: {
@@ -7555,8 +7760,8 @@ var qrcode_default = {
     alt: { type: String, default: "\u4E8C\u7EF4\u7801" }
   },
   setup(props) {
-    const src = ref18("");
-    const error = ref18("");
+    const src = ref19("");
+    const error = ref19("");
     let lib = null;
     let seq2 = 0;
     async function ensureLib() {
@@ -7593,7 +7798,7 @@ var qrcode_default = {
       }
     }
     onMounted11(render);
-    watch12(() => [props.value, props.size, props.level, props.margin, props.dark, props.light], render);
+    watch13(() => [props.value, props.size, props.level, props.margin, props.dark, props.light], render);
     return { src, error };
   },
   template: `
@@ -7632,7 +7837,7 @@ var status_default = {
 };
 
 // src/components/tooltip/index.js
-import { ref as ref19, nextTick as nextTick8, onBeforeUnmount as onBeforeUnmount16 } from "vue";
+import { ref as ref20, nextTick as nextTick8, onBeforeUnmount as onBeforeUnmount17 } from "vue";
 var uid2 = 0;
 var tooltip_default = {
   name: "DjmTooltip",
@@ -7643,11 +7848,11 @@ var tooltip_default = {
     delay: { type: Number, default: 80 }
   },
   setup(props) {
-    const visible = ref19(false);
-    const rootRef = ref19(null);
-    const contentRef = ref19(null);
-    const actualPlacement = ref19(props.placement);
-    const panelStyle = ref19({});
+    const visible = ref20(false);
+    const rootRef = ref20(null);
+    const contentRef = ref20(null);
+    const actualPlacement = ref20(props.placement);
+    const panelStyle = ref20({});
     const tipId = "djm-tooltip-" + ++uid2;
     let timer = null;
     function triggerEl() {
@@ -7718,7 +7923,7 @@ var tooltip_default = {
       bindTrigger(false);
       bindReposition(false);
     }
-    onBeforeUnmount16(() => {
+    onBeforeUnmount17(() => {
       window.clearTimeout(timer);
       bindReposition(false);
     });
@@ -7743,7 +7948,7 @@ var tooltip_default = {
 };
 
 // src/components/dropdown/index.js
-import { nextTick as nextTick9, onBeforeUnmount as onBeforeUnmount17, onMounted as onMounted12, ref as ref20, watch as watch13 } from "vue";
+import { nextTick as nextTick9, onBeforeUnmount as onBeforeUnmount18, onMounted as onMounted12, ref as ref21, watch as watch14 } from "vue";
 var dropdown_default = {
   name: "DjmDropdown",
   components: { DjmIcon: icon_default },
@@ -7760,10 +7965,10 @@ var dropdown_default = {
   },
   emits: ["select", "visible-change"],
   setup(props, { emit }) {
-    const open = ref20(false);
-    const root = ref20(null);
-    const menuEl = ref20(null);
-    const panelStyle = ref20({});
+    const open = ref21(false);
+    const root = ref21(null);
+    const menuEl = ref21(null);
+    const panelStyle = ref21({});
     let detachPanel = null;
     function syncTriggerA11y() {
       const wrapper = root.value && root.value.querySelector(".djm-dropdown-trigger");
@@ -7777,7 +7982,7 @@ var dropdown_default = {
       else target.removeAttribute("aria-disabled");
     }
     onMounted12(() => nextTick9(syncTriggerA11y));
-    watch13(open, () => nextTick9(syncTriggerA11y));
+    watch14(open, () => nextTick9(syncTriggerA11y));
     function updatePosition() {
       if (!open.value || !root.value) return;
       const rect = root.value.getBoundingClientRect();
@@ -7880,7 +8085,7 @@ var dropdown_default = {
       emit("select", item);
       if (props.closeOnSelect) close2();
     }
-    onBeforeUnmount17(() => {
+    onBeforeUnmount18(() => {
       window.clearTimeout(hoverTimer);
       close2();
     });
@@ -7945,7 +8150,7 @@ var dropdown_default = {
 };
 
 // src/components/drawer/index.js
-import { ref as ref21, nextTick as nextTick10, watch as watch14, onMounted as onMounted13, onBeforeUnmount as onBeforeUnmount18 } from "vue";
+import { ref as ref22, nextTick as nextTick10, watch as watch15, onMounted as onMounted13, onBeforeUnmount as onBeforeUnmount19 } from "vue";
 var uid3 = 0;
 var drawer_default = {
   name: "DjmDrawer",
@@ -7958,11 +8163,13 @@ var drawer_default = {
     // 点击遮罩关闭
     maskClosable: { type: Boolean, default: true },
     showClose: { type: Boolean, default: true },
-    closeOnEsc: { type: Boolean, default: true }
+    closeOnEsc: { type: Boolean, default: true },
+    // 毛玻璃底
+    glass: { type: Boolean, default: false }
   },
   emits: ["update:modelValue", "open", "close"],
   setup(props, { emit }) {
-    const panelRef = ref21(null);
+    const panelRef = ref22(null);
     const titleId = `djm-drawer-title-${++uid3}`;
     let locked = false;
     let releaseTrap = null;
@@ -7995,14 +8202,14 @@ var drawer_default = {
       }
       emit("close");
     }
-    watch14(() => props.modelValue, (open) => {
+    watch15(() => props.modelValue, (open) => {
       if (open) activate();
       else deactivate();
     });
     onMounted13(() => {
       if (props.modelValue) activate();
     });
-    onBeforeUnmount18(() => {
+    onBeforeUnmount19(() => {
       document.removeEventListener("keydown", onKeydown);
       release();
       if (locked) unlockScroll();
@@ -8021,7 +8228,7 @@ var drawer_default = {
           <aside
             ref="panelRef"
             class="djm-drawer"
-            :class="'djm-drawer-' + placement"
+            :class="['djm-drawer-' + placement, { 'djm-is-glass': glass }]"
             :style="panelStyle"
             role="dialog"
             aria-modal="true"
@@ -8056,7 +8263,7 @@ var drawer_default = {
 };
 
 // src/components/modal/index.js
-import { ref as ref22, nextTick as nextTick11, watch as watch15, computed as computed11, onMounted as onMounted14, onBeforeUnmount as onBeforeUnmount19 } from "vue";
+import { ref as ref23, nextTick as nextTick11, watch as watch16, computed as computed11, onMounted as onMounted14, onBeforeUnmount as onBeforeUnmount20 } from "vue";
 var uid4 = 0;
 var modal_default = {
   name: "DjmModal",
@@ -8071,11 +8278,13 @@ var modal_default = {
     // 是否允许 Esc 关闭
     closeOnEsc: { type: Boolean, default: true },
     // 全屏铺满，适合配置类大表单
-    fullscreen: { type: Boolean, default: false }
+    fullscreen: { type: Boolean, default: false },
+    // 毛玻璃底：需要显示背后页面时使用
+    glass: { type: Boolean, default: false }
   },
   emits: ["update:modelValue", "open", "close"],
   setup(props, { emit }) {
-    const dialogRef = ref22(null);
+    const dialogRef = ref23(null);
     const titleId = `djm-modal-title-${++uid4}`;
     let locked = false;
     let releaseTrap = null;
@@ -8108,14 +8317,14 @@ var modal_default = {
       }
       emit("close");
     }
-    watch15(() => props.modelValue, (open) => {
+    watch16(() => props.modelValue, (open) => {
       if (open) activate();
       else deactivate();
     });
     onMounted14(() => {
       if (props.modelValue) activate();
     });
-    onBeforeUnmount19(() => {
+    onBeforeUnmount20(() => {
       document.removeEventListener("keydown", onKey);
       release();
       if (locked) unlockScroll();
@@ -8137,7 +8346,7 @@ var modal_default = {
           <div
             ref="dialogRef"
             class="djm-modal"
-            :class="{ 'djm-is-fullscreen': fullscreen }"
+            :class="{ 'djm-is-fullscreen': fullscreen, 'djm-is-glass': glass }"
             :style="dialogStyle"
             role="dialog"
             aria-modal="true"
@@ -8235,7 +8444,7 @@ var confirm_dialog_default = {
 };
 
 // src/components/pagination/index.js
-import { computed as computed12, ref as ref23 } from "vue";
+import { computed as computed12, ref as ref24 } from "vue";
 var pagination_default = {
   name: "DjmPagination",
   components: { Icon: icon_default },
@@ -8247,7 +8456,7 @@ var pagination_default = {
   },
   emits: ["update:page", "update:pageSize", "change"],
   setup(props, { emit }) {
-    const jumpText = ref23("");
+    const jumpText = ref24("");
     const pageCount = computed12(() => Math.max(1, Math.ceil(props.total / Math.max(1, props.pageSize))));
     const current = computed12(() => Math.min(Math.max(1, props.page), pageCount.value));
     const pages = computed12(() => {
@@ -8467,7 +8676,7 @@ var tabs_default = {
 };
 
 // src/components/context-menu/index.js
-import { ref as ref24, watch as watch16, nextTick as nextTick12, onBeforeUnmount as onBeforeUnmount20 } from "vue";
+import { ref as ref25, watch as watch17, nextTick as nextTick12, onBeforeUnmount as onBeforeUnmount21 } from "vue";
 var context_menu_default = {
   name: "DjmContextMenu",
   components: { Icon: icon_default },
@@ -8479,8 +8688,8 @@ var context_menu_default = {
   },
   emits: ["update:modelValue", "select"],
   setup(props, { emit }) {
-    const menuRef = ref24(null);
-    const pos = ref24({ left: 0, top: 0 });
+    const menuRef = ref25(null);
+    const pos = ref25({ left: 0, top: 0 });
     const margin = 8;
     function close2() {
       emit("update:modelValue", false);
@@ -8542,7 +8751,7 @@ var context_menu_default = {
         detach = null;
       }
     }
-    watch16(
+    watch17(
       () => props.modelValue,
       (open) => {
         if (open) {
@@ -8553,10 +8762,10 @@ var context_menu_default = {
         }
       }
     );
-    watch16([() => props.x, () => props.y], () => {
+    watch17([() => props.x, () => props.y], () => {
       if (props.modelValue) openAtCursor();
     });
-    onBeforeUnmount20(unbind);
+    onBeforeUnmount21(unbind);
     return { menuRef, pos, close: close2, onSelect, onKeydown, t };
   },
   template: `
@@ -8595,7 +8804,7 @@ var context_menu_default = {
 };
 
 // src/components/date-picker/index.js
-import { ref as ref25, computed as computed14, onBeforeUnmount as onBeforeUnmount21, watch as watch17 } from "vue";
+import { ref as ref26, computed as computed14, onBeforeUnmount as onBeforeUnmount22, watch as watch18 } from "vue";
 var uidSeed5 = 0;
 function pad3(value) {
   return String(value).padStart(2, "0");
@@ -8630,12 +8839,12 @@ var date_picker_default = {
   },
   emits: ["update:modelValue", "change", "visible-change"],
   setup(props, { emit }) {
-    const open = ref25(false);
-    watch17(open, (value) => emit("visible-change", value));
-    const root = ref25(null);
-    const panel = ref25(null);
+    const open = ref26(false);
+    watch18(open, (value) => emit("visible-change", value));
+    const root = ref26(null);
+    const panel = ref26(null);
     const panelId = "djm-date-panel-" + ++uidSeed5;
-    const panelStyle = ref25({ ...PANEL_HIDDEN_STYLE });
+    const panelStyle = ref26({ ...PANEL_HIDDEN_STYLE });
     let detachPanel = null;
     const today = /* @__PURE__ */ new Date();
     const todayKey = toKey2(today.getFullYear(), today.getMonth(), today.getDate());
@@ -8650,16 +8859,16 @@ var date_picker_default = {
       return end ? `${start} ~ ${end}` : `${start} ~ ${t("datePicker.rangeEnd")}`;
     });
     const initial = parse2(values.value[0]);
-    const viewYear = ref25(initial ? initial.year : today.getFullYear());
-    const viewMonth = ref25(initial ? initial.month : today.getMonth());
-    const pendingStart = ref25(values.value[0] || "");
-    const pendingEnd = ref25(values.value[1] || "");
+    const viewYear = ref26(initial ? initial.year : today.getFullYear());
+    const viewMonth = ref26(initial ? initial.month : today.getMonth());
+    const pendingStart = ref26(values.value[0] || "");
+    const pendingEnd = ref26(values.value[1] || "");
     const placeholderText = computed14(() => {
       if (props.placeholder) return props.placeholder;
       return t(props.range ? "datePicker.rangePlaceholder" : "datePicker.placeholder");
     });
     const weeks = computed14(() => t("datePicker.weeks").split(","));
-    const narrow = ref25(false);
+    const narrow = ref26(false);
     let media = null;
     const onMediaChange = (event) => {
       narrow.value = event.matches;
@@ -8670,13 +8879,13 @@ var date_picker_default = {
       if (media.addEventListener) media.addEventListener("change", onMediaChange);
       else media.addListener(onMediaChange);
     }
-    onBeforeUnmount21(() => {
+    onBeforeUnmount22(() => {
       if (!media) return;
       if (media.removeEventListener) media.removeEventListener("change", onMediaChange);
       else media.removeListener(onMediaChange);
     });
     const panelCount = computed14(() => props.range ? Math.min(narrow.value ? 1 : 2, Math.max(1, props.panels)) : 1);
-    const hoverKey = ref25("");
+    const hoverKey = ref26("");
     const hoverRange = computed14(() => {
       if (!props.range || !pendingStart.value || pendingEnd.value || !hoverKey.value) return null;
       const a = pendingStart.value;
@@ -8856,7 +9065,7 @@ var date_picker_default = {
       pendingEnd.value = "";
       closePanel();
     }
-    onBeforeUnmount21(() => {
+    onBeforeUnmount22(() => {
       if (detachPanel) {
         detachPanel();
         detachPanel = null;
@@ -8985,7 +9194,7 @@ var date_picker_default = {
 };
 
 // src/components/tree-select/index.js
-import { ref as ref26, computed as computed15, nextTick as nextTick13, onBeforeUnmount as onBeforeUnmount22, watch as watch18 } from "vue";
+import { ref as ref27, computed as computed15, nextTick as nextTick13, onBeforeUnmount as onBeforeUnmount23, watch as watch19 } from "vue";
 function collectLeaves(node, keyOf2, out = []) {
   if (node.children && node.children.length) {
     node.children.forEach((child) => collectLeaves(child, keyOf2, out));
@@ -9021,13 +9230,13 @@ var tree_select_default = {
   },
   emits: ["update:modelValue", "change", "visible-change"],
   setup(props, { emit }) {
-    const open = ref26(false);
-    const root = ref26(null);
-    const panel = ref26(null);
-    const searchInput = ref26(null);
-    const search = ref26("");
-    const temp = ref26([]);
-    const panelStyle = ref26({ ...PANEL_HIDDEN_STYLE });
+    const open = ref27(false);
+    const root = ref27(null);
+    const panel = ref27(null);
+    const searchInput = ref27(null);
+    const search = ref27("");
+    const temp = ref27([]);
+    const panelStyle = ref27({ ...PANEL_HIDDEN_STYLE });
     let detachPanel = null;
     function keyOf2(node) {
       return node ? node[props.nodeKey] : void 0;
@@ -9036,7 +9245,7 @@ var tree_select_default = {
       const value = node ? node[props.labelKey] : "";
       return value === null || value === void 0 ? "" : String(value);
     }
-    const expandedIds = ref26(
+    const expandedIds = ref27(
       new Set(
         collectNodes(props.options).filter((node) => node.children && node.children.length).map((node) => keyOf2(node))
       )
@@ -9046,7 +9255,7 @@ var tree_select_default = {
       collectNodes(props.options).forEach((node) => map.set(keyOf2(node), node));
       return map;
     });
-    watch18(() => props.options, (options) => {
+    watch19(() => props.options, (options) => {
       if (!options || !options.length || expandedIds.value.size) return;
       expandedIds.value = new Set(
         collectNodes(options).filter((node) => node.children && node.children.length).map((node) => keyOf2(node))
@@ -9205,7 +9414,7 @@ var tree_select_default = {
       emit("change", []);
       temp.value = [];
     }
-    onBeforeUnmount22(() => {
+    onBeforeUnmount23(() => {
       if (detachPanel) {
         detachPanel();
         detachPanel = null;
@@ -9344,174 +9553,797 @@ var tree_select_default = {
 };
 
 // src/components/rich-editor/index.js
-import { ref as ref27, watch as watch19, onMounted as onMounted15, onBeforeUnmount as onBeforeUnmount23 } from "vue";
-
-// src/utils/sanitize-html.js
-var TAGS = /* @__PURE__ */ new Set([
-  "p",
-  "br",
-  "div",
-  "span",
-  "strong",
-  "b",
-  "em",
-  "i",
-  "u",
-  "s",
-  "del",
-  "sub",
-  "sup",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "ul",
-  "ol",
-  "li",
-  "blockquote",
-  "pre",
-  "code",
-  "hr",
-  "a",
-  "img",
-  "table",
-  "thead",
-  "tbody",
-  "tfoot",
-  "tr",
-  "th",
-  "td"
-]);
-var GLOBAL_ATTRS = /* @__PURE__ */ new Set(["class", "title"]);
-var TAG_ATTRS = {
-  a: /* @__PURE__ */ new Set(["href", "target", "rel"]),
-  img: /* @__PURE__ */ new Set(["src", "alt", "width", "height"]),
-  ol: /* @__PURE__ */ new Set(["start"]),
-  th: /* @__PURE__ */ new Set(["colspan", "rowspan", "scope"]),
-  td: /* @__PURE__ */ new Set(["colspan", "rowspan"])
-};
-function safeUrl(value, tag) {
-  const url = String(value || "").replace(/[\u0000-\u0020]+/g, "").toLowerCase();
-  if (url.startsWith("javascript:") || url.startsWith("vbscript:")) return false;
-  if (url.startsWith("data:")) return tag === "img" && url.startsWith("data:image/");
-  return true;
-}
-function cleanNode(node) {
-  const children = [...node.childNodes];
-  children.forEach((child) => {
-    if (child.nodeType === 8) {
-      child.remove();
-      return;
-    }
-    if (child.nodeType !== 1) return;
-    const tag = child.tagName.toLowerCase();
-    if (!TAGS.has(tag)) {
-      child.remove();
-      return;
-    }
-    const allowed = TAG_ATTRS[tag];
-    [...child.attributes].forEach((attr) => {
-      const name = attr.name.toLowerCase();
-      const keep = GLOBAL_ATTRS.has(name) || allowed && allowed.has(name);
-      if (!keep) {
-        child.removeAttribute(attr.name);
-        return;
-      }
-      if ((name === "href" || name === "src") && !safeUrl(attr.value, tag)) {
-        child.removeAttribute(attr.name);
-      }
-    });
-    if (tag === "a" && child.getAttribute("target") === "_blank") {
-      child.setAttribute("rel", "noopener noreferrer");
-    }
-    cleanNode(child);
-  });
-}
-function sanitizeHtml(html) {
-  if (!html) return "";
-  const doc = new DOMParser().parseFromString('<div id="djm-sanitize-root">' + html + "</div>", "text/html");
-  const root = doc.getElementById("djm-sanitize-root");
-  if (!root) return "";
-  cleanNode(root);
-  return root.innerHTML;
-}
+import { ref as ref29, computed as computed17, watch as watch21, onMounted as onMounted15, onBeforeUnmount as onBeforeUnmount24 } from "vue";
 
-// src/components/rich-editor/index.js
-var rich_editor_default = {
-  name: "DjmRichEditor",
-  components: { Icon: icon_default },
+// src/components/media-picker/index.js
+import { computed as computed16, ref as ref28, watch as watch20 } from "vue";
+var media_picker_default = {
+  name: "DjmMediaPicker",
+  components: { DjmModal: modal_default, DjmPagination: pagination_default, DjmIcon: icon_default },
   props: {
-    modelValue: { type: String, default: "" },
-    placeholder: { type: String, default: "" },
-    minHeight: { type: Number, default: 200 },
-    // 开启后对外输出的 HTML 会走白名单清洗
-    sanitize: { type: Boolean, default: false },
+    modelValue: { type: [Array, String, Number], default: "" },
+    items: { type: Array, default: () => [] },
+    multiple: { type: Boolean, default: false },
+    // 最多选几个，0 表示不限
+    limit: { type: Number, default: 0 },
+    // image 只显示图片，file 只显示非图片，空串不过滤
+    accept: { type: String, default: "" },
+    title: { type: String, default: "" },
+    triggerText: { type: String, default: "" },
+    pageSize: { type: Number, default: 12 },
     disabled: { type: Boolean, default: false }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
-    const editor = ref27(null);
-    const sourceMode = ref27(false);
-    const source = ref27(props.modelValue);
-    const formats = ref27({ bold: false, italic: false, underline: false, strike: false });
-    function clean(html) {
-      return props.sanitize ? sanitizeHtml(html) : html;
-    }
-    function syncFromDom() {
-      if (!editor.value) return;
-      emit("update:modelValue", clean(editor.value.innerHTML));
-    }
-    function onPaste(event) {
-      const data = event.clipboardData;
-      const html = data && data.getData("text/html");
-      if (!html) return;
-      event.preventDefault();
-      document.execCommand("insertHTML", false, sanitizeHtml(html));
-      syncFromDom();
-    }
-    function exec(command, value = null) {
-      if (props.disabled || sourceMode.value) return;
-      document.execCommand(command, false, value);
-      if (editor.value) editor.value.focus();
-      syncFromDom();
-      syncFormats();
+    const open = ref28(false);
+    const keyword = ref28("");
+    const page = ref28(1);
+    const temp = ref28([]);
+    const selectedIds = computed16(() => {
+      if (props.multiple) return Array.isArray(props.modelValue) ? props.modelValue : [];
+      if (props.modelValue === "" || props.modelValue === null || props.modelValue === void 0) return [];
+      return [props.modelValue];
+    });
+    function isImage(item) {
+      if (item.type) return item.type === "image";
+      return /\.(png|jpe?g|gif|webp|svg|avif)$/i.test(item.url || "");
     }
-    function formatBlock(tag) {
-      exec("formatBlock", tag);
+    const filtered = computed16(() => {
+      const key = keyword.value.trim().toLowerCase();
+      return props.items.filter((item) => {
+        if (props.accept === "image" && !isImage(item)) return false;
+        if (props.accept === "file" && isImage(item)) return false;
+        if (key && !String(item.name || "").toLowerCase().includes(key)) return false;
+        return true;
+      });
+    });
+    const paged = computed16(() => {
+      const start = (page.value - 1) * props.pageSize;
+      return filtered.value.slice(start, start + props.pageSize);
+    });
+    watch20(keyword, () => {
+      page.value = 1;
+    });
+    watch20(
+      () => filtered.value.length,
+      () => {
+        const max = Math.max(1, Math.ceil(filtered.value.length / props.pageSize));
+        if (page.value > max) page.value = max;
+      }
+    );
+    function isChecked(id) {
+      return temp.value.includes(id);
     }
-    function addLink() {
-      const url = window.prompt(t("richEditor.linkPrompt"), "https://");
-      if (url) exec("createLink", url);
+    function atLimit() {
+      return props.limit > 0 && temp.value.length >= props.limit;
     }
-    function syncFormats() {
-      if (props.disabled || sourceMode.value) return;
-      if (!editor.value || !editor.value.contains(document.activeElement)) return;
-      formats.value = {
+    function toggle(item) {
+      if (props.multiple) {
+        if (isChecked(item.id)) {
+          temp.value = temp.value.filter((id) => id !== item.id);
+          return;
+        }
+        if (atLimit()) return;
+        temp.value = [...temp.value, item.id];
+        return;
+      }
+      temp.value = [item.id];
+    }
+    function openPanel() {
+      if (props.disabled) return;
+      temp.value = [...selectedIds.value];
+      keyword.value = "";
+      page.value = 1;
+      open.value = true;
+    }
+    function commit() {
+      const next = props.multiple ? [...temp.value] : temp.value[0] !== void 0 ? temp.value[0] : "";
+      emit("update:modelValue", next);
+      emit("change", next);
+      open.value = false;
+    }
+    function cancel() {
+      temp.value = [...selectedIds.value];
+      open.value = false;
+    }
+    return {
+      open,
+      keyword,
+      page,
+      temp,
+      selectedIds,
+      filtered,
+      paged,
+      isImage,
+      isChecked,
+      atLimit,
+      toggle,
+      openPanel,
+      commit,
+      cancel,
+      t
+    };
+  },
+  template: `
+    <span class="djm-media-picker">
+      <slot name="trigger" :open="openPanel" :count="selectedIds.length">
+        <button
+          class="djm-btn"
+          type="button"
+          :disabled="disabled"
+          @click="openPanel"
+        >{{ triggerText || t('mediaPicker.select') }}<span v-if="selectedIds.length" class="djm-media-picker-count">{{ selectedIds.length }}</span></button>
+      </slot>
+
+      <DjmModal
+        :model-value="open"
+        :title="title || t('mediaPicker.title')"
+        width="760px"
+        @update:model-value="cancel"
+      >
+        <div class="djm-media-toolbar">
+          <label class="djm-media-search">
+            <DjmIcon name="search" :size="13" />
+            <input
+              v-model="keyword"
+              class="djm-media-search-input"
+              type="text"
+              :placeholder="t('mediaPicker.search')"
+              :aria-label="t('mediaPicker.search')"
+            />
+          </label>
+          <span class="djm-media-toolbar-slot">
+            <slot name="toolbar"></slot>
+          </span>
+        </div>
+
+        <div class="djm-media-grid" role="listbox" :aria-multiselectable="multiple ? 'true' : 'false'">
+          <div
+            v-for="item in paged"
+            :key="item.id"
+            class="djm-media-item"
+            :class="{
+              'djm-is-checked': isChecked(item.id),
+              'djm-is-disabled': multiple && atLimit() && !isChecked(item.id)
+            }"
+            role="option"
+            tabindex="0"
+            :aria-selected="String(isChecked(item.id))"
+            @click="toggle(item)"
+            @keydown.enter.prevent="toggle(item)"
+            @keydown.space.prevent="toggle(item)"
+          >
+            <div class="djm-media-thumb">
+              <img v-if="isImage(item)" :src="item.url" :alt="item.name" loading="lazy" />
+              <DjmIcon v-else name="folder" :size="26" />
+              <span v-if="isChecked(item.id)" class="djm-media-check">
+                <DjmIcon name="check" :size="11" />
+              </span>
+            </div>
+            <div class="djm-media-name" :title="item.name">{{ item.name }}</div>
+          </div>
+          <div v-if="!paged.length" class="djm-media-empty">{{ t('mediaPicker.empty') }}</div>
+        </div>
+
+        <div class="djm-media-foot">
+          <span class="djm-media-total">
+            {{ t('mediaPicker.total', { total: filtered.length }) }}
+            <em v-if="multiple && limit > 0">{{ t('mediaPicker.limit', { limit }) }}</em>
+          </span>
+          <DjmPagination
+            v-if="filtered.length > pageSize"
+            v-model:page="page"
+            :page-size="pageSize"
+            :total="filtered.length"
+          />
+        </div>
+
+        <template #footer>
+          <button class="djm-btn" type="button" @click="cancel">{{ t('common.cancel') }}</button>
+          <button class="djm-btn djm-btn-primary" type="button" @click="commit">{{ t('common.confirm') }}</button>
+        </template>
+      </DjmModal>
+    </span>
+  `
+};
+
+// src/utils/sanitize-html.js
+var TAGS = /* @__PURE__ */ new Set([
+  "p",
+  "br",
+  "div",
+  "span",
+  "strong",
+  "b",
+  "em",
+  "i",
+  "u",
+  "s",
+  "del",
+  "sub",
+  "sup",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "pre",
+  "code",
+  "hr",
+  "a",
+  "img",
+  "table",
+  "thead",
+  "tbody",
+  "tfoot",
+  "tr",
+  "th",
+  "td"
+]);
+var GLOBAL_ATTRS = /* @__PURE__ */ new Set(["class", "title", "style"]);
+var STYLE_PROPS = /* @__PURE__ */ new Set([
+  "color",
+  "background-color",
+  "font-size",
+  "font-weight",
+  "font-style",
+  "text-decoration",
+  "text-align",
+  "text-indent",
+  "line-height"
+]);
+var TAG_ATTRS = {
+  a: /* @__PURE__ */ new Set(["href", "target", "rel"]),
+  img: /* @__PURE__ */ new Set(["src", "alt", "width", "height"]),
+  ol: /* @__PURE__ */ new Set(["start"]),
+  th: /* @__PURE__ */ new Set(["colspan", "rowspan", "scope"]),
+  td: /* @__PURE__ */ new Set(["colspan", "rowspan"])
+};
+function cleanStyle(value) {
+  return String(value || "").split(";").map((item) => {
+    const index = item.indexOf(":");
+    if (index === -1) return "";
+    const name = item.slice(0, index).trim().toLowerCase();
+    const val = item.slice(index + 1).trim();
+    if (!STYLE_PROPS.has(name)) return "";
+    if (/url\s*\(|expression\s*\(|javascript:/i.test(val)) return "";
+    return name + ": " + val;
+  }).filter(Boolean).join("; ");
+}
+var SAFE_SCHEMES = /* @__PURE__ */ new Set(["http", "https", "mailto", "tel"]);
+function safeUrl(value, tag) {
+  const url = String(value || "").replace(/[\u0000-\u0020]+/g, "");
+  const scheme = url.match(/^([a-z][a-z0-9+.-]*):/i);
+  if (!scheme) return true;
+  const name = scheme[1].toLowerCase();
+  if (SAFE_SCHEMES.has(name)) return true;
+  if (tag === "img") {
+    if (name === "blob") return true;
+    if (name === "data" && /^data:image\//i.test(url)) return true;
+  }
+  return false;
+}
+function cleanNode(node) {
+  const children = [...node.childNodes];
+  children.forEach((child) => {
+    if (child.nodeType === 8) {
+      child.remove();
+      return;
+    }
+    if (child.nodeType !== 1) return;
+    const tag = child.tagName.toLowerCase();
+    if (!TAGS.has(tag)) {
+      child.remove();
+      return;
+    }
+    const allowed = TAG_ATTRS[tag];
+    [...child.attributes].forEach((attr) => {
+      const name = attr.name.toLowerCase();
+      const keep = GLOBAL_ATTRS.has(name) || allowed && allowed.has(name);
+      if (!keep) {
+        child.removeAttribute(attr.name);
+        return;
+      }
+      if (name === "style") {
+        const style = cleanStyle(attr.value);
+        if (style) child.setAttribute("style", style);
+        else child.removeAttribute("style");
+        return;
+      }
+      if ((name === "href" || name === "src") && !safeUrl(attr.value, tag)) {
+        child.removeAttribute(attr.name);
+      }
+    });
+    if (tag === "a" && child.getAttribute("target") === "_blank") {
+      child.setAttribute("rel", "noopener noreferrer");
+    }
+    cleanNode(child);
+  });
+}
+function sanitizeHtml(html) {
+  if (!html) return "";
+  const doc = new DOMParser().parseFromString('<div id="djm-sanitize-root">' + html + "</div>", "text/html");
+  const root = doc.getElementById("djm-sanitize-root");
+  if (!root) return "";
+  cleanNode(root);
+  return root.innerHTML;
+}
+
+// src/components/rich-editor/index.js
+var BLOCKS = [
+  { value: "p", label: "paragraph" },
+  { value: "h1", label: "heading1" },
+  { value: "h2", label: "heading2" },
+  { value: "h3", label: "heading3" },
+  { value: "blockquote", label: "quote" },
+  { value: "pre", label: "codeBlock" }
+];
+var SIZES = [
+  { value: "", label: "defaultSize" },
+  { value: "12px", label: "12px" },
+  { value: "14px", label: "14px" },
+  { value: "16px", label: "16px" },
+  { value: "18px", label: "18px" },
+  { value: "24px", label: "24px" }
+];
+var COLORS = ["#1f2d3d", "#5a6b7d", "#2b86d9", "#2fa36b", "#d97706", "#dc2626", "#7c3aed", "#ffffff"];
+var TOOLBAR_PRESETS = {
+  simple: ["history", "inline", "list", "insert"],
+  basic: ["history", "format", "inline", "align", "list", "insert", "view"],
+  full: ["history", "format", "inline", "color", "align", "list", "insert", "view"]
+};
+function isSafeImageUrl(url) {
+  const value = String(url || "").replace(/[\u0000-\u0020]+/g, "");
+  if (!value) return false;
+  const scheme = value.match(/^([a-z][a-z0-9+.-]*):/i);
+  if (!scheme) return true;
+  const name = scheme[1].toLowerCase();
+  if (name === "http" || name === "https" || name === "blob") return true;
+  return name === "data" && /^data:image\//i.test(value);
+}
+function isSafeLink(url) {
+  const value = String(url || "").trim();
+  if (!value) return false;
+  const scheme = value.replace(/[\u0000-\u0020]+/g, "").match(/^([a-z][a-z0-9+.-]*):/i);
+  if (!scheme) return true;
+  return ["http", "https", "mailto", "tel"].indexOf(scheme[1].toLowerCase()) > -1;
+}
+var rich_editor_default = {
+  name: "DjmRichEditor",
+  components: { Icon: icon_default, MediaPicker: media_picker_default },
+  props: {
+    modelValue: { type: String, default: "" },
+    placeholder: { type: String, default: "" },
+    minHeight: { type: Number, default: 200 },
+    // 默认开启：对外输出的 HTML 走白名单清洗，内容里不会带出脚本
+    sanitize: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    // 工具条：simple / basic / full，或传分组数组（history / format / inline / color / align / list / insert / view）
+    toolbar: { type: [String, Array], default: "full" },
+    // 自定义上传：接收 File，返回图片地址（或 { url }），不传则转成 dataURL 本地预览
+    uploadImage: { type: Function, default: null },
+    // 已上传图片，提供后工具栏出现「从素材库选择」：字符串或 { url, name }
+    media: { type: Array, default: () => [] },
+    accept: { type: String, default: "image/*" },
+    // 单张图片大小上限（MB）
+    maxImageSize: { type: Number, default: 5 },
+    // 是否允许一次选多张
+    multiple: { type: Boolean, default: true },
+    showCount: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue", "upload-error"],
+  setup(props, { emit }) {
+    const editor = ref29(null);
+    const fileInput = ref29(null);
+    const sourceMode = ref29(false);
+    const source = ref29(props.modelValue);
+    const fullscreen = ref29(false);
+    const panel = ref29("");
+    const uploadCount = ref29(0);
+    const textColor = ref29(COLORS[0]);
+    const bgColor = ref29("#fdf3c4");
+    const fontSize = ref29("");
+    const count2 = ref29(0);
+    const formats = ref29({
+      bold: false,
+      italic: false,
+      underline: false,
+      strike: false,
+      code: false,
+      block: "p",
+      align: "",
+      list: ""
+    });
+    let savedRange = null;
+    const ready = computed17(() => !props.disabled && !sourceMode.value);
+    const toolbarGroups = computed17(() => {
+      const list = Array.isArray(props.toolbar) ? props.toolbar : TOOLBAR_PRESETS[props.toolbar] || TOOLBAR_PRESETS.full;
+      return new Set(list);
+    });
+    function has(group) {
+      return toolbarGroups.value.has(group);
+    }
+    const mediaLibrary = computed17(
+      () => (props.media || []).map((item, index) => {
+        if (typeof item === "string") {
+          return { id: "media-" + index, url: item, name: "", type: "image" };
+        }
+        return {
+          id: item && item.id !== void 0 ? String(item.id) : "media-" + index,
+          url: item && (item.url || item.src) || "",
+          name: item && (item.name || item.alt) || "",
+          type: "image"
+        };
+      }).filter((item) => !!item.url)
+    );
+    function clean(html) {
+      return props.sanitize ? sanitizeHtml(html) : html;
+    }
+    function plainText(html) {
+      return String(html || "").replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").replace(/&[a-z]+;/gi, " ");
+    }
+    function syncFromDom() {
+      if (!editor.value) return;
+      const html = clean(editor.value.innerHTML);
+      count2.value = plainText(html).trim().length;
+      emit("update:modelValue", html);
+    }
+    function currentRange() {
+      const selection = window.getSelection();
+      if (!selection || !selection.rangeCount || !editor.value) return null;
+      const range = selection.getRangeAt(0);
+      return editor.value.contains(range.commonAncestorContainer) ? range : null;
+    }
+    function rememberRange() {
+      const range = currentRange();
+      savedRange = range ? range.cloneRange() : null;
+    }
+    function focusAt(range) {
+      if (!editor.value) return;
+      editor.value.focus();
+      const selection = window.getSelection();
+      selection.removeAllRanges();
+      if (range) {
+        selection.addRange(range);
+        return;
+      }
+      const end = document.createRange();
+      end.selectNodeContents(editor.value);
+      end.collapse(false);
+      selection.addRange(end);
+    }
+    function insertNodeAt(range, node) {
+      if (!editor.value) return;
+      focusAt(range);
+      const selection = window.getSelection();
+      if (selection.rangeCount) selection.getRangeAt(0).insertNode(node);
+      else editor.value.appendChild(node);
+      syncFromDom();
+      syncFormats();
+    }
+    function ensureRange() {
+      const range = currentRange();
+      if (range) return range;
+      if (!savedRange) return null;
+      focusAt(savedRange);
+      return currentRange();
+    }
+    function exec(command, value = null) {
+      if (!ready.value) return;
+      if (typeof document.execCommand !== "function") return;
+      ensureRange();
+      document.execCommand("styleWithCSS", false, true);
+      document.execCommand(command, false, value);
+      if (editor.value) editor.value.focus();
+      syncFromDom();
+      syncFormats();
+    }
+    function setBlock(value) {
+      panel.value = "";
+      exec("formatBlock", "<" + value + ">");
+    }
+    function setFontSize(size) {
+      panel.value = "";
+      if (!ready.value || !editor.value) return;
+      fontSize.value = size;
+      const range = ensureRange();
+      if (!range || range.collapsed) return;
+      if (!size) {
+        const walker = document.createTreeWalker(editor.value, NodeFilter.SHOW_ELEMENT);
+        const targets = [];
+        while (walker.nextNode()) {
+          const el = walker.currentNode;
+          if (el.style && el.style.fontSize && range.intersectsNode(el)) targets.push(el);
+        }
+        targets.forEach((el) => {
+          el.style.fontSize = "";
+        });
+        syncFromDom();
+        return;
+      }
+      const span = document.createElement("span");
+      span.style.fontSize = size;
+      span.appendChild(range.extractContents());
+      range.insertNode(span);
+      const selection = window.getSelection();
+      const after = document.createRange();
+      after.setStartAfter(span);
+      after.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(after);
+      syncFromDom();
+      syncFormats();
+    }
+    function applyColor(kind, color) {
+      panel.value = "";
+      if (kind === "text") textColor.value = color;
+      else bgColor.value = color;
+      if (!ready.value) return;
+      if (typeof document.execCommand !== "function") return;
+      document.execCommand("styleWithCSS", false, true);
+      const command = kind === "text" ? "foreColor" : "hiliteColor";
+      if (!document.execCommand(command, false, color) && kind === "bg") {
+        document.execCommand("backColor", false, color);
+      }
+      if (editor.value) editor.value.focus();
+      syncFromDom();
+      syncFormats();
+    }
+    function togglePanel(name) {
+      if (!ready.value) return;
+      panel.value = panel.value === name ? "" : name;
+    }
+    function toggleInlineCode() {
+      if (!ready.value || !editor.value) return;
+      const range = currentRange();
+      if (!range) return;
+      const anchor = range.commonAncestorContainer;
+      const node = anchor.nodeType === 1 ? anchor : anchor.parentElement;
+      const code = node && node.closest ? node.closest("code") : null;
+      if (code && editor.value.contains(code)) {
+        const parent = code.parentNode;
+        while (code.firstChild) parent.insertBefore(code.firstChild, code);
+        parent.removeChild(code);
+        syncFromDom();
+        return;
+      }
+      if (range.collapsed) return;
+      const wrapper = document.createElement("code");
+      wrapper.appendChild(range.extractContents());
+      range.insertNode(wrapper);
+      const selection = window.getSelection();
+      const after = document.createRange();
+      after.setStartAfter(wrapper);
+      after.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(after);
+      syncFromDom();
+      syncFormats();
+    }
+    function addLink() {
+      if (!ready.value) return;
+      const url = window.prompt(t("richEditor.linkPrompt"), "https://");
+      if (!url) return;
+      if (!isSafeLink(url)) {
+        window.alert(t("richEditor.linkInvalid"));
+        return;
+      }
+      const range = currentRange();
+      if (range && range.collapsed) {
+        const link = document.createElement("a");
+        link.href = url;
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+        link.textContent = url;
+        insertNodeAt(range, link);
+        return;
+      }
+      exec("createLink", url);
+      if (editor.value) {
+        editor.value.querySelectorAll("a[href]").forEach((link) => {
+          if (!link.getAttribute("target")) link.setAttribute("target", "_blank");
+          link.setAttribute("rel", "noopener noreferrer");
+        });
+      }
+      syncFromDom();
+    }
+    function readAsDataUrl(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = () => reject(reader.error || new Error("read failed"));
+        reader.readAsDataURL(file);
+      });
+    }
+    async function uploadOne(file) {
+      if (props.uploadImage) {
+        const result = await props.uploadImage(file);
+        const url = typeof result === "string" ? result : result && result.url;
+        if (!url) throw new Error(t("richEditor.imageUrlInvalid"));
+        if (!isSafeImageUrl(url)) throw new Error(t("richEditor.imageUrlInvalid"));
+        return String(url).trim();
+      }
+      return readAsDataUrl(file);
+    }
+    function isImage(file) {
+      return file && /^image\//.test(file.type);
+    }
+    function pickImage(allowMultiple) {
+      if (!ready.value || !fileInput.value) return;
+      rememberRange();
+      fileInput.value.multiple = !!allowMultiple && props.multiple;
+      fileInput.value.click();
+    }
+    function insertMedia(ids) {
+      if (!ready.value) return;
+      const picked = (Array.isArray(ids) ? ids : [ids]).map((id) => mediaLibrary.value.find((item) => item.id === String(id))).filter(Boolean);
+      const safe = picked.filter((item) => {
+        if (isSafeImageUrl(item.url)) return true;
+        emit("upload-error", { file: null, message: t("richEditor.imageUrlInvalid") });
+        return false;
+      });
+      if (!safe.length) return;
+      focusAt(savedRange);
+      const fragment = document.createDocumentFragment();
+      safe.forEach((item) => {
+        const img = document.createElement("img");
+        img.src = item.url;
+        img.alt = item.name || "image";
+        img.className = "djm-rich-editor-img";
+        fragment.appendChild(img);
+      });
+      const selection = window.getSelection();
+      if (selection.rangeCount) selection.getRangeAt(0).insertNode(fragment);
+      else editor.value.appendChild(fragment);
+      syncFromDom();
+      syncFormats();
+    }
+    function insertImages(files) {
+      if (!files.length || !editor.value) return;
+      uploadCount.value = files.length;
+      const holder = document.createElement("span");
+      holder.className = "djm-rich-editor-uploading";
+      holder.textContent = t("richEditor.uploading", { count: files.length });
+      const anchor = savedRange && editor.value.contains(savedRange.commonAncestorContainer) ? savedRange : null;
+      focusAt(anchor);
+      const selection = window.getSelection();
+      if (selection.rangeCount) selection.getRangeAt(0).insertNode(holder);
+      else editor.value.appendChild(holder);
+      Promise.all(files.map(async (file) => {
+        if (!isImage(file)) return { file, error: t("richEditor.imageTypeError") };
+        if (props.maxImageSize > 0 && file.size > props.maxImageSize * 1024 * 1024) {
+          return { file, error: t("richEditor.imageSizeError", { size: props.maxImageSize }) };
+        }
+        try {
+          return { file, url: await uploadOne(file) };
+        } catch (error) {
+          return { file, error: error && error.message || t("richEditor.uploadFailed") };
+        }
+      })).then((results) => {
+        uploadCount.value = 0;
+        const done = results.filter((item) => item.url);
+        const failed = results.filter((item) => item.error);
+        const alive = editor.value && editor.value.contains(holder);
+        if (done.length && editor.value) {
+          done.forEach((item) => {
+            const img = document.createElement("img");
+            img.src = item.url;
+            img.alt = item.file.name || "image";
+            img.className = "djm-rich-editor-img";
+            if (alive) holder.parentNode.insertBefore(img, holder);
+            else editor.value.appendChild(img);
+          });
+        }
+        if (alive) holder.remove();
+        failed.forEach((item) => emit("upload-error", { file: item.file, message: item.error }));
+        syncFromDom();
+      });
+    }
+    function onFilesChange(event) {
+      const files = Array.from(event.target.files || []);
+      event.target.value = "";
+      insertImages(files);
+    }
+    function onPaste(event) {
+      const data = event.clipboardData;
+      if (!data) return;
+      const images = Array.from(data.files || []).filter(isImage);
+      if (images.length) {
+        event.preventDefault();
+        insertImages(images);
+        return;
+      }
+      const html = data.getData("text/html");
+      if (!html) return;
+      event.preventDefault();
+      document.execCommand("insertHTML", false, sanitizeHtml(html));
+      syncFromDom();
+    }
+    function onDragOver(event) {
+      if (!ready.value) return;
+      if (event.dataTransfer && Array.from(event.dataTransfer.types || []).includes("Files")) {
+        event.preventDefault();
+      }
+    }
+    function onDrop(event) {
+      if (!ready.value) return;
+      const files = Array.from(event.dataTransfer && event.dataTransfer.files || []).filter(isImage);
+      if (!files.length) return;
+      event.preventDefault();
+      rememberRange();
+      insertImages(files);
+    }
+    function closestTag(node, tag) {
+      const el = node && (node.nodeType === 1 ? node : node.parentElement);
+      return el && el.closest ? el.closest(tag) : null;
+    }
+    function detectBlock() {
+      const selection = window.getSelection();
+      if (!selection || !selection.anchorNode) return "p";
+      let node = selection.anchorNode;
+      if (node.nodeType !== 1) node = node.parentElement;
+      while (node && node !== editor.value) {
+        const tag = node.tagName.toLowerCase();
+        if (["p", "h1", "h2", "h3", "blockquote", "pre"].includes(tag)) return tag;
+        node = node.parentElement;
+      }
+      return "p";
+    }
+    function syncFormats() {
+      if (props.disabled || sourceMode.value || !editor.value) return;
+      if (!editor.value.contains(document.activeElement)) return;
+      const selection = window.getSelection();
+      formats.value = {
         bold: document.queryCommandState("bold"),
         italic: document.queryCommandState("italic"),
         underline: document.queryCommandState("underline"),
-        strike: document.queryCommandState("strikeThrough")
+        strike: document.queryCommandState("strikeThrough"),
+        code: !!closestTag(selection.anchorNode, "code"),
+        block: detectBlock(),
+        align: document.queryCommandState("justifyCenter") ? "center" : document.queryCommandState("justifyRight") ? "right" : document.queryCommandState("justifyFull") ? "justify" : "left",
+        list: document.queryCommandState("insertOrderedList") ? "ol" : document.queryCommandState("insertUnorderedList") ? "ul" : ""
       };
     }
     function onSourceInput() {
+      count2.value = plainText(source.value).trim().length;
       emit("update:modelValue", clean(source.value));
     }
     function toggleSource() {
       if (props.disabled) return;
+      panel.value = "";
       if (sourceMode.value) {
         emit("update:modelValue", clean(source.value));
         sourceMode.value = false;
         requestAnimationFrame(() => {
           if (editor.value) editor.value.innerHTML = clean(source.value);
+          syncFromDom();
         });
       } else {
         source.value = editor.value ? editor.value.innerHTML : props.modelValue;
         sourceMode.value = true;
       }
     }
-    watch19(
+    function toggleFullscreen() {
+      if (props.disabled) return;
+      fullscreen.value = !fullscreen.value;
+      panel.value = "";
+    }
+    function onDocumentClick(event) {
+      if (!panel.value) return;
+      if (!(event.target.closest && event.target.closest(".djm-rich-editor-color"))) panel.value = "";
+    }
+    function onKeydown(event) {
+      if (event.key === "Escape" && fullscreen.value) {
+        fullscreen.value = false;
+        panel.value = "";
+      }
+    }
+    watch21(
       () => props.modelValue,
       (value) => {
         if (sourceMode.value) {
@@ -9520,40 +10352,117 @@ var rich_editor_default = {
         }
         const next = clean(value);
         if (editor.value && editor.value.innerHTML !== next) editor.value.innerHTML = next;
+        count2.value = plainText(next).trim().length;
       }
     );
     onMounted15(() => {
       if (editor.value) editor.value.innerHTML = clean(props.modelValue);
+      count2.value = plainText(props.modelValue).trim().length;
       document.addEventListener("selectionchange", syncFormats);
+      document.addEventListener("click", onDocumentClick);
+      document.addEventListener("keydown", onKeydown);
+    });
+    onBeforeUnmount24(() => {
+      document.removeEventListener("selectionchange", syncFormats);
+      document.removeEventListener("click", onDocumentClick);
+      document.removeEventListener("keydown", onKeydown);
     });
-    onBeforeUnmount23(() => document.removeEventListener("selectionchange", syncFormats));
     return {
       editor,
+      fileInput,
       sourceMode,
       source,
+      fullscreen,
+      panel,
+      uploadCount,
+      textColor,
+      bgColor,
+      fontSize,
+      count: count2,
       formats,
+      blocks: BLOCKS,
+      sizes: SIZES,
+      colors: COLORS,
+      mediaLibrary,
+      has,
       exec,
-      formatBlock,
+      setBlock,
+      setFontSize,
+      applyColor,
+      togglePanel,
+      toggleInlineCode,
       addLink,
-      onSourceInput,
+      pickImage,
+      insertMedia,
+      onFilesChange,
       onPaste,
+      onDragOver,
+      onDrop,
+      rememberRange,
+      onSourceInput,
       toggleSource,
+      toggleFullscreen,
       syncFromDom,
       syncFormats,
       t
     };
   },
   template: `
-    <div class="djm-rich-editor" :class="{ 'djm-is-disabled': disabled }">
-      <div class="djm-rich-editor-toolbar">
-        <div class="djm-rich-editor-group">
+    <div
+      class="djm-rich-editor"
+      :class="{ 'djm-is-disabled': disabled, 'djm-is-fullscreen': fullscreen }"
+    >
+      <div class="djm-rich-editor-toolbar" role="toolbar" :aria-label="t('richEditor.toolbar')" @mousedown="rememberRange">
+        <div class="djm-rich-editor-group" v-if="has('history')">
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.undo')"
+            :aria-label="t('richEditor.undo')"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click="exec('undo')"
+          ><Icon name="undo" :size="13" /></button>
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.redo')"
+            :aria-label="t('richEditor.redo')"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click="exec('redo')"
+          ><Icon name="redo" :size="13" /></button>
+        </div>
+
+        <div class="djm-rich-editor-group" v-if="has('format')">
+          <select
+            class="djm-rich-editor-select"
+            :value="formats.block"
+            :aria-label="t('richEditor.block')"
+            :disabled="disabled || sourceMode"
+            @change="setBlock($event.target.value)"
+          >
+            <option v-for="item in blocks" :key="item.value" :value="item.value">{{ t('richEditor.' + item.label) }}</option>
+          </select>
+          <select
+            class="djm-rich-editor-select djm-rich-editor-select-size"
+            :value="fontSize"
+            :aria-label="t('richEditor.fontSize')"
+            :disabled="disabled || sourceMode"
+            @change="setFontSize($event.target.value)"
+          >
+            <option v-for="item in sizes" :key="item.value" :value="item.value">{{ t('richEditor.' + item.label) }}</option>
+          </select>
+        </div>
+
+        <div class="djm-rich-editor-group" v-if="has('inline')">
           <button
             class="djm-rich-editor-btn djm-rich-editor-btn-bold"
             type="button"
             :title="t('richEditor.bold')"
             :aria-label="t('richEditor.bold')"
             :aria-pressed="String(formats.bold)"
-            :disabled="disabled"
+            :disabled="disabled || sourceMode"
             @mousedown.prevent
             @click="exec('bold')"
           >B</button>
@@ -9563,7 +10472,7 @@ var rich_editor_default = {
             :title="t('richEditor.italic')"
             :aria-label="t('richEditor.italic')"
             :aria-pressed="String(formats.italic)"
-            :disabled="disabled"
+            :disabled="disabled || sourceMode"
             @mousedown.prevent
             @click="exec('italic')"
           >I</button>
@@ -9573,56 +10482,140 @@ var rich_editor_default = {
             :title="t('richEditor.underline')"
             :aria-label="t('richEditor.underline')"
             :aria-pressed="String(formats.underline)"
-            :disabled="disabled"
+            :disabled="disabled || sourceMode"
             @mousedown.prevent
             @click="exec('underline')"
           >U</button>
           <button
-            class="djm-rich-editor-btn djm-rich-editor-btn-strike"
+            class="djm-rich-editor-btn djm-rich-editor-btn-strike"
+            type="button"
+            :title="t('richEditor.strike')"
+            :aria-label="t('richEditor.strike')"
+            :aria-pressed="String(formats.strike)"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click="exec('strikeThrough')"
+          >S</button>
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.inlineCode')"
+            :aria-label="t('richEditor.inlineCode')"
+            :aria-pressed="String(formats.code)"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click="toggleInlineCode"
+          ><Icon name="code" :size="13" /></button>
+        </div>
+
+        <div class="djm-rich-editor-group djm-rich-editor-color" v-if="has('color')">
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.textColor')"
+            :aria-label="t('richEditor.textColor')"
+            :aria-expanded="String(panel === 'text')"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click.stop="togglePanel('text')"
+          >
+            <span class="djm-rich-editor-letter" :style="{ borderBottomColor: textColor }">A</span>
+          </button>
+          <button
+            class="djm-rich-editor-btn"
             type="button"
-            :title="t('richEditor.strike')"
-            :aria-label="t('richEditor.strike')"
-            :aria-pressed="String(formats.strike)"
-            :disabled="disabled"
+            :title="t('richEditor.bgColor')"
+            :aria-label="t('richEditor.bgColor')"
+            :aria-expanded="String(panel === 'bg')"
+            :disabled="disabled || sourceMode"
             @mousedown.prevent
-            @click="exec('strikeThrough')"
-          >S</button>
+            @click.stop="togglePanel('bg')"
+          >
+            <span class="djm-rich-editor-letter djm-rich-editor-letter-bg" :style="{ background: bgColor }">A</span>
+          </button>
+          <div v-if="panel === 'text' || panel === 'bg'" class="djm-rich-editor-panel" role="group" :aria-label="t('richEditor.textColor')">
+            <button
+              v-for="color in colors"
+              :key="color"
+              class="djm-rich-editor-swatch"
+              type="button"
+              :title="color"
+              :aria-label="color"
+              :style="{ background: color }"
+              @mousedown.prevent
+              @click="applyColor(panel, color)"
+            ></button>
+          </div>
         </div>
 
-        <div class="djm-rich-editor-group">
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.heading')" :disabled="disabled" @mousedown.prevent @click="formatBlock('h2')">H2</button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.paragraph')" :disabled="disabled" @mousedown.prevent @click="formatBlock('p')">{{ t('richEditor.paragraph') }}</button>
+        <div class="djm-rich-editor-group" v-if="has('align')">
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.alignLeft')" :aria-label="t('richEditor.alignLeft')" :aria-pressed="String(formats.align === 'left')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('justifyLeft')"><Icon name="align-left" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.alignCenter')" :aria-label="t('richEditor.alignCenter')" :aria-pressed="String(formats.align === 'center')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('justifyCenter')"><Icon name="align-center" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.alignRight')" :aria-label="t('richEditor.alignRight')" :aria-pressed="String(formats.align === 'right')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('justifyRight')"><Icon name="align-right" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.alignJustify')" :aria-label="t('richEditor.alignJustify')" :aria-pressed="String(formats.align === 'justify')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('justifyFull')"><Icon name="align-justify" :size="13" /></button>
         </div>
 
-        <div class="djm-rich-editor-group">
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.bulletList')" :disabled="disabled" @mousedown.prevent @click="exec('insertUnorderedList')">
-            <span class="djm-rich-editor-glyph">\u2022 \u2261</span>
-          </button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.numberList')" :disabled="disabled" @mousedown.prevent @click="exec('insertOrderedList')">
-            <span class="djm-rich-editor-glyph">1. \u2261</span>
-          </button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.link')" :aria-label="t('richEditor.link')" :disabled="disabled" @mousedown.prevent @click="addLink">
-            <Icon name="link" :size="13" />
-          </button>
+        <div class="djm-rich-editor-group" v-if="has('list')">
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.bulletList')" :aria-label="t('richEditor.bulletList')" :aria-pressed="String(formats.list === 'ul')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('insertUnorderedList')"><Icon name="list" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.numberList')" :aria-label="t('richEditor.numberList')" :aria-pressed="String(formats.list === 'ol')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('insertOrderedList')"><Icon name="list-ordered" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.outdent')" :aria-label="t('richEditor.outdent')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('outdent')"><Icon name="outdent" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.indent')" :aria-label="t('richEditor.indent')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('indent')"><Icon name="indent" :size="13" /></button>
         </div>
 
-        <div class="djm-rich-editor-group">
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.clearFormat')" :disabled="disabled" @mousedown.prevent @click="exec('removeFormat')">{{ t('richEditor.clearFormat') }}</button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.undo')" :aria-label="t('richEditor.undo')" :disabled="disabled" @mousedown.prevent @click="exec('undo')">\u21B6</button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.redo')" :aria-label="t('richEditor.redo')" :disabled="disabled" @mousedown.prevent @click="exec('redo')">\u21B7</button>
+        <div class="djm-rich-editor-group" v-if="has('insert')">
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.link')" :aria-label="t('richEditor.link')" :disabled="disabled || sourceMode" @mousedown.prevent @click="addLink"><Icon name="link" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.unlink')" :aria-label="t('richEditor.unlink')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('unlink')"><Icon name="unlink" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.singleImage')" :aria-label="t('richEditor.singleImage')" :disabled="disabled || sourceMode" @mousedown.prevent @click="pickImage(false)"><Icon name="image" :size="13" /></button>
+          <button v-if="multiple" class="djm-rich-editor-btn" type="button" :title="t('richEditor.multiImage')" :aria-label="t('richEditor.multiImage')" :disabled="disabled || sourceMode" @mousedown.prevent @click="pickImage(true)"><Icon name="images" :size="13" /></button>
+          <MediaPicker
+            v-if="mediaLibrary.length"
+            class="djm-rich-editor-picker"
+            multiple
+            accept="image"
+            :items="mediaLibrary"
+            :title="t('richEditor.mediaLibrary')"
+            :disabled="disabled || sourceMode"
+            @change="insertMedia"
+          >
+            <template #trigger="{ open }">
+              <button
+                class="djm-rich-editor-btn"
+                type="button"
+                :title="t('richEditor.mediaLibrary')"
+                :aria-label="t('richEditor.mediaLibrary')"
+                :disabled="disabled || sourceMode"
+                @mousedown.prevent="rememberRange"
+                @click="open"
+              ><Icon name="grid" :size="13" /></button>
+            </template>
+          </MediaPicker>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.hr')" :aria-label="t('richEditor.hr')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('insertHorizontalRule')">\u2014</button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.clearFormat')" :aria-label="t('richEditor.clearFormat')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('removeFormat')"><span class="djm-rich-editor-glyph">T\xD7</span></button>
         </div>
 
-        <div class="djm-rich-editor-spacer"></div>
-        <button
-          class="djm-rich-editor-btn"
-          :class="{ 'djm-is-active': sourceMode }"
-          type="button"
-          :aria-pressed="String(sourceMode)"
-          :disabled="disabled"
-          @click="toggleSource"
-        >
-          <Icon name="code" :size="13" />{{ sourceMode ? t('richEditor.visual') : t('richEditor.source') }}
-        </button>
+        <div class="djm-rich-editor-spacer" v-if="has('view')"></div>
+        <div class="djm-rich-editor-group djm-rich-editor-group-end" v-if="has('view')">
+          <button
+            class="djm-rich-editor-btn"
+            :class="{ 'djm-is-active': sourceMode }"
+            type="button"
+            :title="sourceMode ? t('richEditor.visual') : t('richEditor.source')"
+            :aria-label="sourceMode ? t('richEditor.visual') : t('richEditor.source')"
+            :aria-pressed="String(sourceMode)"
+            :disabled="disabled"
+            @click="toggleSource"
+          ><Icon name="code" :size="13" /></button>
+          <button
+            class="djm-rich-editor-btn"
+            :class="{ 'djm-is-active': fullscreen }"
+            type="button"
+            :title="fullscreen ? t('richEditor.exitFullscreen') : t('richEditor.fullscreen')"
+            :aria-label="fullscreen ? t('richEditor.exitFullscreen') : t('richEditor.fullscreen')"
+            :aria-pressed="String(fullscreen)"
+            :disabled="disabled"
+            @click="toggleFullscreen"
+          ><Icon :name="fullscreen ? 'minimize' : 'maximize'" :size="13" /></button>
+        </div>
       </div>
 
       <div
@@ -9638,6 +10631,8 @@ var rich_editor_default = {
         :style="{ minHeight: minHeight + 'px' }"
         @input="syncFromDom"
         @paste="onPaste"
+        @dragover="onDragOver"
+        @drop="onDrop"
       ></div>
 
       <textarea
@@ -9650,12 +10645,27 @@ var rich_editor_default = {
         spellcheck="false"
         @input="onSourceInput"
       ></textarea>
+
+      <div v-if="showCount" class="djm-rich-editor-foot">
+        <span v-if="uploadCount" class="djm-rich-editor-foot-item">{{ t('richEditor.uploading', { count: uploadCount }) }}</span>
+        <span class="djm-rich-editor-foot-item">{{ t('richEditor.wordCount', { count }) }}</span>
+      </div>
+
+      <input
+        ref="fileInput"
+        class="djm-rich-editor-file"
+        type="file"
+        :accept="accept"
+        tabindex="-1"
+        aria-hidden="true"
+        @change="onFilesChange"
+      />
     </div>
   `
 };
 
 // src/components/floating-window/index.js
-import { ref as ref28, onBeforeUnmount as onBeforeUnmount24 } from "vue";
+import { ref as ref30, onBeforeUnmount as onBeforeUnmount25 } from "vue";
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), Math.max(min, max));
 }
@@ -9673,12 +10683,12 @@ var floating_window_default = {
   },
   emits: ["close", "focus"],
   setup(props, { emit }) {
-    const root = ref28(null);
-    const pos = ref28({ x: props.initialX, y: props.initialY });
-    const size = ref28({ w: props.width, h: props.height });
-    const minimized = ref28(false);
-    const maximized = ref28(false);
-    const saved = ref28(null);
+    const root = ref30(null);
+    const pos = ref30({ x: props.initialX, y: props.initialY });
+    const size = ref30({ w: props.width, h: props.height });
+    const minimized = ref30(false);
+    const maximized = ref30(false);
+    const saved = ref30(null);
     let drag = null;
     let resize = null;
     function stage() {
@@ -9766,7 +10776,7 @@ var floating_window_default = {
       }
       emit("focus");
     }
-    onBeforeUnmount24(() => {
+    onBeforeUnmount25(() => {
       window.removeEventListener("pointermove", onDrag);
       window.removeEventListener("pointerup", endDrag);
       window.removeEventListener("pointermove", onResize);
@@ -9814,7 +10824,7 @@ var floating_window_default = {
 };
 
 // src/components/upload/index.js
-import { reactive as reactive4, ref as ref29, watch as watch20, onBeforeUnmount as onBeforeUnmount25 } from "vue";
+import { reactive as reactive4, ref as ref31, watch as watch22, onBeforeUnmount as onBeforeUnmount26 } from "vue";
 var uidSeed6 = 0;
 function extension(name) {
   const index = name.lastIndexOf(".");
@@ -9864,11 +10874,11 @@ var upload_default = {
   },
   emits: ["update:modelValue", "change", "success", "error", "remove", "exceed"],
   setup(props, { emit }) {
-    const files = ref29([]);
-    const dragActive = ref29(false);
-    const inputRef = ref29(null);
+    const files = ref31([]);
+    const dragActive = ref31(false);
+    const inputRef = ref31(null);
     const tasks = /* @__PURE__ */ new Map();
-    watch20(
+    watch22(
       () => props.modelValue,
       (list) => {
         const next = list || [];
@@ -10022,7 +11032,7 @@ var upload_default = {
       files.value = [];
       emitList();
     }
-    onBeforeUnmount25(() => {
+    onBeforeUnmount26(() => {
       files.value.forEach((item) => {
         if (item.url) URL.revokeObjectURL(item.url);
       });
@@ -10170,7 +11180,7 @@ var upload_default = {
 };
 
 // src/components/tree/index.js
-import { computed as computed16, ref as ref30, watch as watch21 } from "vue";
+import { computed as computed18, ref as ref32, watch as watch23 } from "vue";
 var tree_default = {
   name: "DjmTree",
   components: { Icon: icon_default },
@@ -10202,17 +11212,17 @@ var tree_default = {
   },
   emits: ["update:checked", "update:expanded", "node-click", "check", "node-drop", "load-error"],
   setup(props, { emit }) {
-    const lazyChildren = ref30({});
-    const loadingKeys = ref30([]);
-    const innerExpanded = ref30([...props.expanded]);
-    const innerChecked = ref30([...props.checked]);
-    watch21(
+    const lazyChildren = ref32({});
+    const loadingKeys = ref32([]);
+    const innerExpanded = ref32([...props.expanded]);
+    const innerChecked = ref32([...props.checked]);
+    watch23(
       () => props.expanded,
       (value) => {
         if (Array.isArray(value)) innerExpanded.value = value;
       }
     );
-    watch21(
+    watch23(
       () => props.checked,
       (value) => {
         if (Array.isArray(value)) innerChecked.value = value;
@@ -10250,7 +11260,7 @@ var tree_default = {
       });
       return out;
     }
-    watch21(
+    watch23(
       () => props.data,
       () => {
         if (props.defaultExpandAll) innerExpanded.value = collectExpandable(props.data);
@@ -10267,7 +11277,7 @@ var tree_default = {
       const children = childrenOf(node);
       return Boolean(children && children.some((child) => matchSubtree(child)));
     }
-    const rows = computed16(() => {
+    const rows = computed18(() => {
       const result = [];
       const walk = (nodes, level) => {
         nodes.forEach((node) => {
@@ -10338,8 +11348,8 @@ var tree_default = {
     function isActive(node) {
       return props.activeKey !== "" && node[props.nodeKey] === props.activeKey;
     }
-    const rootEl = ref30(null);
-    const focusIndex = ref30(-1);
+    const rootEl = ref32(null);
+    const focusIndex = ref32(-1);
     function tabIndexOf(index) {
       return (focusIndex.value === -1 ? 0 : focusIndex.value) === index ? 0 : -1;
     }
@@ -10396,9 +11406,9 @@ var tree_default = {
     function rowClassOf(node, level) {
       return typeof props.rowClass === "function" ? props.rowClass(node, level) : props.rowClass;
     }
-    const dragKey = ref30("");
-    const dropKey = ref30("");
-    const dropPosition = ref30("");
+    const dragKey = ref32("");
+    const dropKey = ref32("");
+    const dropPosition = ref32("");
     function findNodeByKey(key, nodes = props.data) {
       for (const node of nodes) {
         if (node[props.nodeKey] === key) return node;
@@ -10510,7 +11520,7 @@ var tree_default = {
       onDrop,
       onDragEnd,
       labelOf,
-      emptyLabel: computed16(() => props.emptyText || t("tree.empty")),
+      emptyLabel: computed18(() => props.emptyText || t("tree.empty")),
       t
     };
   },
@@ -10579,7 +11589,7 @@ var tree_default = {
 };
 
 // src/components/editable-table/index.js
-import { computed as computed17, nextTick as nextTick14, reactive as reactive5, ref as ref31, useSlots, watch as watch22 } from "vue";
+import { computed as computed19, nextTick as nextTick14, reactive as reactive5, ref as ref33, useSlots, watch as watch24 } from "vue";
 var ACTIONS_KEY = "__editable_actions";
 function isEmpty(value) {
   if (value === "" || value === null || value === void 0) return true;
@@ -10603,12 +11613,12 @@ var editable_table_default = {
   emits: ["edit", "save", "cancel"],
   setup(props, { emit }) {
     const slots = useSlots();
-    const editingKey = ref31("");
+    const editingKey = ref33("");
     const draft = reactive5({});
     const errors = reactive5({});
-    const tableRef = ref31(null);
-    const editableColumns = computed17(() => props.columns.filter((column) => column.editor));
-    const renderColumns = computed17(() => {
+    const tableRef = ref33(null);
+    const editableColumns = computed19(() => props.columns.filter((column) => column.editor));
+    const renderColumns = computed19(() => {
       if (!props.showActions) return props.columns;
       return props.columns.concat({
         key: ACTIONS_KEY,
@@ -10620,7 +11630,7 @@ var editable_table_default = {
         exportable: false
       });
     });
-    const forwardedSlotNames = computed17(() => {
+    const forwardedSlotNames = computed19(() => {
       const taken = new Set(editableColumns.value.map((column) => "cell-" + column.key));
       taken.add("cell-" + ACTIONS_KEY);
       return Object.keys(slots).filter((name) => !taken.has(name));
@@ -10715,7 +11725,7 @@ var editable_table_default = {
       clearErrors();
       return true;
     }
-    watch22(
+    watch24(
       () => props.rows,
       () => {
         if (editingKey.value && !findRow(editingKey.value)) {
@@ -10897,7 +11907,7 @@ var message_default = {
 };
 
 // src/components/org-picker/index.js
-import { computed as computed18, onBeforeUnmount as onBeforeUnmount26, ref as ref32, watch as watch23 } from "vue";
+import { computed as computed20, onBeforeUnmount as onBeforeUnmount27, ref as ref34, watch as watch25 } from "vue";
 var org_picker_default = {
   name: "DjmOrgPicker",
   components: { DjmIcon: icon_default },
@@ -10916,13 +11926,13 @@ var org_picker_default = {
   },
   emits: ["update:modelValue", "change", "visible-change"],
   setup(props, { emit }) {
-    const open = ref32(false);
-    const root = ref32(null);
-    const searchRef = ref32(null);
-    const keyword = ref32("");
-    const activeDept = ref32("");
-    const temp = ref32([]);
-    const expandedIds = ref32(/* @__PURE__ */ new Set());
+    const open = ref34(false);
+    const root = ref34(null);
+    const searchRef = ref34(null);
+    const keyword = ref34("");
+    const activeDept = ref34("");
+    const temp = ref34([]);
+    const expandedIds = ref34(/* @__PURE__ */ new Set());
     let detachPanel = null;
     function collectDeptIds(nodes, out = []) {
       nodes.forEach((node) => {
@@ -10952,22 +11962,22 @@ var org_picker_default = {
       walk([root2]);
       return ids;
     }
-    const staffMap = computed18(() => {
+    const staffMap = computed20(() => {
       const map = /* @__PURE__ */ new Map();
       props.staff.forEach((item) => map.set(item.id, item));
       return map;
     });
-    const appliedStaff = computed18(
+    const appliedStaff = computed20(
       () => props.modelValue.map((id) => staffMap.value.get(id)).filter(Boolean)
     );
-    const visibleTags = computed18(() => {
+    const visibleTags = computed20(() => {
       if (props.maxTagCount <= 0) return appliedStaff.value;
       return appliedStaff.value.slice(0, props.maxTagCount);
     });
-    const restTagCount = computed18(
+    const restTagCount = computed20(
       () => Math.max(0, appliedStaff.value.length - visibleTags.value.length)
     );
-    const visibleStaff = computed18(() => {
+    const visibleStaff = computed20(() => {
       const key = keyword.value.trim().toLowerCase();
       if (key) {
         return props.staff.filter(
@@ -10978,7 +11988,7 @@ var org_picker_default = {
       const scope = deptScope(activeDept.value);
       return props.staff.filter((item) => scope.has(item.deptId));
     });
-    const deptRows = computed18(() => {
+    const deptRows = computed20(() => {
       const rows = [];
       const walk = (nodes, depth) => {
         nodes.forEach((node) => {
@@ -10990,11 +12000,11 @@ var org_picker_default = {
       walk(props.departments, 0);
       return rows;
     });
-    const selectedCount = computed18(() => temp.value.length);
-    const placeholderText = computed18(() => props.placeholder || t("orgPicker.placeholder"));
-    const emptyLabel = computed18(() => props.emptyText || t("orgPicker.empty"));
-    const panel = ref32(null);
-    const panelStyle = ref32({ ...PANEL_HIDDEN_STYLE });
+    const selectedCount = computed20(() => temp.value.length);
+    const placeholderText = computed20(() => props.placeholder || t("orgPicker.placeholder"));
+    const emptyLabel = computed20(() => props.emptyText || t("orgPicker.empty"));
+    const panel = ref34(null);
+    const panelStyle = ref34({ ...PANEL_HIDDEN_STYLE });
     const PANEL_HEIGHT = 342;
     function updatePosition() {
       if (!open.value || !root.value) return;
@@ -11011,7 +12021,7 @@ var org_picker_default = {
       expandedIds.value = new Set(collectDeptIds(props.departments));
     }
     expandAll();
-    watch23(() => props.departments, () => {
+    watch25(() => props.departments, () => {
       expandedIds.value = /* @__PURE__ */ new Set([...expandedIds.value, ...collectDeptIds(props.departments)]);
     });
     function initialOf(item) {
@@ -11100,7 +12110,7 @@ var org_picker_default = {
     function clearTemp() {
       temp.value = [];
     }
-    onBeforeUnmount26(() => {
+    onBeforeUnmount27(() => {
       if (detachPanel) {
         detachPanel();
         detachPanel = null;
@@ -11286,7 +12296,7 @@ var org_picker_default = {
 };
 
 // src/components/schema-form/index.js
-import { computed as computed19, reactive as reactive7, ref as ref33, watch as watch24 } from "vue";
+import { computed as computed21, reactive as reactive7, ref as ref35, watch as watch26 } from "vue";
 var CONTROL_MAP = {
   input: input_default,
   number: input_number_default,
@@ -11322,26 +12332,26 @@ var schema_form_default = {
   },
   emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
-    const innerForm = ref33(null);
+    const innerForm = ref35(null);
     const model = reactive7({ ...props.modelValue });
-    watch24(() => props.fields, (fields) => {
+    watch26(() => props.fields, (fields) => {
       fields.forEach((field) => {
         if (model[field.key] === void 0 && field.default !== void 0) {
           model[field.key] = typeof field.default === "function" ? field.default() : field.default;
         }
       });
     }, { immediate: true, deep: true });
-    watch24(() => props.modelValue, (value) => {
+    watch26(() => props.modelValue, (value) => {
       if (!value) return;
       Object.keys(value).forEach((key) => {
         if (model[key] !== value[key]) model[key] = value[key];
       });
     }, { deep: true });
-    watch24(model, () => {
+    watch26(model, () => {
       emit("update:modelValue", { ...model });
       emit("change", { ...model });
     }, { deep: true });
-    const formRules = computed19(() => {
+    const formRules = computed21(() => {
       const merged = { ...props.rules };
       props.fields.forEach((field) => {
         if (!field.required && !field.rules) return;
@@ -11354,7 +12364,7 @@ var schema_form_default = {
       });
       return merged;
     });
-    const visibleFields = computed19(
+    const visibleFields = computed21(
       () => props.fields.filter((field) => {
         if (typeof field.visibleWhen !== "function") return true;
         return Boolean(field.visibleWhen(model));
@@ -11548,7 +12558,7 @@ var approval_flow_default = {
 };
 
 // src/components/query-filter/index.js
-import { computed as computed20, reactive as reactive8, ref as ref34, watch as watch25 } from "vue";
+import { computed as computed22, reactive as reactive8, ref as ref36, watch as watch27 } from "vue";
 var CONTROL_MAP2 = {
   input: input_default,
   number: input_number_default,
@@ -11573,26 +12583,26 @@ var query_filter_default = {
   },
   emits: ["update:modelValue", "search", "reset"],
   setup(props, { emit }) {
-    const expanded = ref34(false);
+    const expanded = ref36(false);
     const model = reactive8({ ...props.modelValue });
-    watch25(() => props.fields, (fields) => {
+    watch27(() => props.fields, (fields) => {
       fields.forEach((field) => {
         if (model[field.key] === void 0 && field.default !== void 0) {
           model[field.key] = typeof field.default === "function" ? field.default() : field.default;
         }
       });
     }, { immediate: true, deep: true });
-    watch25(() => props.modelValue, (value) => {
+    watch27(() => props.modelValue, (value) => {
       if (!value) return;
       Object.keys(value).forEach((key) => {
         if (model[key] !== value[key]) model[key] = value[key];
       });
     }, { deep: true });
-    watch25(model, () => {
+    watch27(model, () => {
       emit("update:modelValue", { ...model });
     }, { deep: true });
-    const collapsible = computed20(() => props.fields.length > props.visibleCount);
-    const visibleFields = computed20(() => {
+    const collapsible = computed22(() => props.fields.length > props.visibleCount);
+    const visibleFields = computed22(() => {
       if (!collapsible.value || expanded.value) return props.fields;
       return props.fields.slice(0, props.visibleCount);
     });
@@ -11721,200 +12731,8 @@ var filter_tags_default = {
   `
 };
 
-// src/components/media-picker/index.js
-import { computed as computed21, ref as ref35, watch as watch26 } from "vue";
-var media_picker_default = {
-  name: "DjmMediaPicker",
-  components: { DjmModal: modal_default, DjmPagination: pagination_default, DjmIcon: icon_default },
-  props: {
-    modelValue: { type: [Array, String, Number], default: "" },
-    items: { type: Array, default: () => [] },
-    multiple: { type: Boolean, default: false },
-    // 最多选几个，0 表示不限
-    limit: { type: Number, default: 0 },
-    // image 只显示图片，file 只显示非图片，空串不过滤
-    accept: { type: String, default: "" },
-    title: { type: String, default: "" },
-    triggerText: { type: String, default: "" },
-    pageSize: { type: Number, default: 12 },
-    disabled: { type: Boolean, default: false }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(props, { emit }) {
-    const open = ref35(false);
-    const keyword = ref35("");
-    const page = ref35(1);
-    const temp = ref35([]);
-    const selectedIds = computed21(() => {
-      if (props.multiple) return Array.isArray(props.modelValue) ? props.modelValue : [];
-      if (props.modelValue === "" || props.modelValue === null || props.modelValue === void 0) return [];
-      return [props.modelValue];
-    });
-    function isImage(item) {
-      if (item.type) return item.type === "image";
-      return /\.(png|jpe?g|gif|webp|svg|avif)$/i.test(item.url || "");
-    }
-    const filtered = computed21(() => {
-      const key = keyword.value.trim().toLowerCase();
-      return props.items.filter((item) => {
-        if (props.accept === "image" && !isImage(item)) return false;
-        if (props.accept === "file" && isImage(item)) return false;
-        if (key && !String(item.name || "").toLowerCase().includes(key)) return false;
-        return true;
-      });
-    });
-    const paged = computed21(() => {
-      const start = (page.value - 1) * props.pageSize;
-      return filtered.value.slice(start, start + props.pageSize);
-    });
-    watch26(keyword, () => {
-      page.value = 1;
-    });
-    watch26(
-      () => filtered.value.length,
-      () => {
-        const max = Math.max(1, Math.ceil(filtered.value.length / props.pageSize));
-        if (page.value > max) page.value = max;
-      }
-    );
-    function isChecked(id) {
-      return temp.value.includes(id);
-    }
-    function atLimit() {
-      return props.limit > 0 && temp.value.length >= props.limit;
-    }
-    function toggle(item) {
-      if (props.multiple) {
-        if (isChecked(item.id)) {
-          temp.value = temp.value.filter((id) => id !== item.id);
-          return;
-        }
-        if (atLimit()) return;
-        temp.value = [...temp.value, item.id];
-        return;
-      }
-      temp.value = [item.id];
-    }
-    function openPanel() {
-      if (props.disabled) return;
-      temp.value = [...selectedIds.value];
-      keyword.value = "";
-      page.value = 1;
-      open.value = true;
-    }
-    function commit() {
-      const next = props.multiple ? [...temp.value] : temp.value[0] !== void 0 ? temp.value[0] : "";
-      emit("update:modelValue", next);
-      emit("change", next);
-      open.value = false;
-    }
-    function cancel() {
-      temp.value = [...selectedIds.value];
-      open.value = false;
-    }
-    return {
-      open,
-      keyword,
-      page,
-      temp,
-      selectedIds,
-      filtered,
-      paged,
-      isImage,
-      isChecked,
-      atLimit,
-      toggle,
-      openPanel,
-      commit,
-      cancel,
-      t
-    };
-  },
-  template: `
-    <span class="djm-media-picker">
-      <slot name="trigger" :open="openPanel" :count="selectedIds.length">
-        <button
-          class="djm-btn"
-          type="button"
-          :disabled="disabled"
-          @click="openPanel"
-        >{{ triggerText || t('mediaPicker.select') }}<span v-if="selectedIds.length" class="djm-media-picker-count">{{ selectedIds.length }}</span></button>
-      </slot>
-
-      <DjmModal
-        :model-value="open"
-        :title="title || t('mediaPicker.title')"
-        width="760px"
-        @update:model-value="cancel"
-      >
-        <div class="djm-media-toolbar">
-          <label class="djm-media-search">
-            <DjmIcon name="search" :size="13" />
-            <input
-              v-model="keyword"
-              class="djm-media-search-input"
-              type="text"
-              :placeholder="t('mediaPicker.search')"
-              :aria-label="t('mediaPicker.search')"
-            />
-          </label>
-          <span class="djm-media-toolbar-slot">
-            <slot name="toolbar"></slot>
-          </span>
-        </div>
-
-        <div class="djm-media-grid" role="listbox" :aria-multiselectable="multiple ? 'true' : 'false'">
-          <div
-            v-for="item in paged"
-            :key="item.id"
-            class="djm-media-item"
-            :class="{
-              'djm-is-checked': isChecked(item.id),
-              'djm-is-disabled': multiple && atLimit() && !isChecked(item.id)
-            }"
-            role="option"
-            tabindex="0"
-            :aria-selected="String(isChecked(item.id))"
-            @click="toggle(item)"
-            @keydown.enter.prevent="toggle(item)"
-            @keydown.space.prevent="toggle(item)"
-          >
-            <div class="djm-media-thumb">
-              <img v-if="isImage(item)" :src="item.url" :alt="item.name" loading="lazy" />
-              <DjmIcon v-else name="folder" :size="26" />
-              <span v-if="isChecked(item.id)" class="djm-media-check">
-                <DjmIcon name="check" :size="11" />
-              </span>
-            </div>
-            <div class="djm-media-name" :title="item.name">{{ item.name }}</div>
-          </div>
-          <div v-if="!paged.length" class="djm-media-empty">{{ t('mediaPicker.empty') }}</div>
-        </div>
-
-        <div class="djm-media-foot">
-          <span class="djm-media-total">
-            {{ t('mediaPicker.total', { total: filtered.length }) }}
-            <em v-if="multiple && limit > 0">{{ t('mediaPicker.limit', { limit }) }}</em>
-          </span>
-          <DjmPagination
-            v-if="filtered.length > pageSize"
-            v-model:page="page"
-            :page-size="pageSize"
-            :total="filtered.length"
-          />
-        </div>
-
-        <template #footer>
-          <button class="djm-btn" type="button" @click="cancel">{{ t('common.cancel') }}</button>
-          <button class="djm-btn djm-btn-primary" type="button" @click="commit">{{ t('common.confirm') }}</button>
-        </template>
-      </DjmModal>
-    </span>
-  `
-};
-
 // src/components/kanban/index.js
-import { ref as ref36, watch as watch27 } from "vue";
+import { ref as ref37, watch as watch28 } from "vue";
 function cloneColumns(list) {
   return (list || []).map((col) => ({ ...col, cards: (col.cards || []).slice() }));
 }
@@ -11931,15 +12749,15 @@ var kanban_default = {
   },
   emits: ["update:columns", "change", "card-move", "card-click", "card-add"],
   setup(props, { emit }) {
-    const inner = ref36(cloneColumns(props.columns));
-    watch27(
+    const inner = ref37(cloneColumns(props.columns));
+    watch28(
       () => props.columns,
       (list) => {
         inner.value = cloneColumns(list);
       }
     );
-    const dragCard = ref36(null);
-    const dropTarget = ref36(null);
+    const dragCard = ref37(null);
+    const dropTarget = ref37(null);
     function columnOf(key) {
       return inner.value.find((col) => col.key === key);
     }
@@ -12102,7 +12920,7 @@ var kanban_default = {
 };
 
 // src/components/attachment-list/index.js
-import { computed as computed22 } from "vue";
+import { computed as computed23 } from "vue";
 var IMAGE_EXTS = ["png", "jpg", "jpeg", "gif", "webp", "bmp", "svg"];
 function extOf(file) {
   if (file.ext) return String(file.ext).toLowerCase();
@@ -12126,14 +12944,14 @@ var attachment_list_default = {
   },
   emits: ["preview", "download", "remove"],
   setup(props, { emit }) {
-    const list = computed22(
+    const list = computed23(
       () => props.files.map((file, index) => {
         const ext = extOf(file);
         const isImage = file.type === "image" || IMAGE_EXTS.includes(ext);
         return { ...file, _key: file.uid !== void 0 ? file.uid : index, _ext: ext, _isImage: isImage };
       })
     );
-    const emptyLabel = computed22(() => props.emptyText || t("attachment.empty"));
+    const emptyLabel = computed23(() => props.emptyText || t("attachment.empty"));
     function onPreview(file) {
       emit("preview", file);
     }
@@ -12239,7 +13057,7 @@ var attachment_list_default = {
 };
 
 // src/components/notification/index.js
-import { computed as computed23, onBeforeUnmount as onBeforeUnmount27, ref as ref37 } from "vue";
+import { computed as computed24, onBeforeUnmount as onBeforeUnmount28, ref as ref38 } from "vue";
 var TYPE_MAP = {
   info: { icon: "info", cls: "djm-is-info" },
   success: { icon: "check", cls: "djm-is-success" },
@@ -12259,8 +13077,8 @@ var notification_default = {
   },
   emits: ["click", "read", "read-all", "remove", "clear"],
   setup(props, { emit }) {
-    const unreadCount = computed23(() => props.items.filter((item) => !item.read).length);
-    const emptyLabel = computed23(() => props.emptyText || t("notification.empty"));
+    const unreadCount = computed24(() => props.items.filter((item) => !item.read).length);
+    const emptyLabel = computed24(() => props.emptyText || t("notification.empty"));
     function typeOf(item) {
       return TYPE_MAP[item.type] || TYPE_MAP.info;
     }
@@ -12271,7 +13089,7 @@ var notification_default = {
     function onReadAll() {
       emit("read-all");
     }
-    const clearing = ref37(false);
+    const clearing = ref38(false);
     let clearTimer = null;
     function onClear() {
       if (!clearing.value) {
@@ -12285,7 +13103,7 @@ var notification_default = {
       clearing.value = false;
       emit("clear");
     }
-    onBeforeUnmount27(() => window.clearTimeout(clearTimer));
+    onBeforeUnmount28(() => window.clearTimeout(clearTimer));
     function onRemove(item) {
       emit("remove", item);
     }
@@ -12360,7 +13178,7 @@ var notification_default = {
 };
 
 // src/components/config-provider/index.js
-import { watch as watch28 } from "vue";
+import { watch as watch29 } from "vue";
 var SIZE_HEIGHT = { xs: "24px", sm: "28px", md: "30px", lg: "34px" };
 var config_provider_default = {
   name: "DjmConfigProvider",
@@ -12370,7 +13188,7 @@ var config_provider_default = {
   },
   setup(props) {
     if (props.locale) setLocale(props.locale);
-    watch28(
+    watch29(
       () => props.locale,
       (code) => {
         if (code) setLocale(code);
@@ -12392,7 +13210,7 @@ var config_provider_default = {
 };
 
 // src/components/date-time-picker/index.js
-import { ref as ref38, computed as computed24, watch as watch29, onBeforeUnmount as onBeforeUnmount28 } from "vue";
+import { ref as ref39, computed as computed25, watch as watch30, onBeforeUnmount as onBeforeUnmount29 } from "vue";
 var uidSeed7 = 0;
 var pad4 = (value) => String(value).padStart(2, "0");
 function toDateKey(year, month, day) {
@@ -12425,31 +13243,31 @@ var date_time_picker_default = {
   },
   emits: ["update:modelValue", "change", "visible-change"],
   setup(props, { emit }) {
-    const open = ref38(false);
-    watch29(open, (value) => emit("visible-change", value));
-    const root = ref38(null);
-    const panel = ref38(null);
+    const open = ref39(false);
+    watch30(open, (value) => emit("visible-change", value));
+    const root = ref39(null);
+    const panel = ref39(null);
     const panelId = "djm-datetime-panel-" + ++uidSeed7;
-    const panelStyle = ref38({ ...PANEL_HIDDEN_STYLE });
+    const panelStyle = ref39({ ...PANEL_HIDDEN_STYLE });
     let detachPanel = null;
     const today = /* @__PURE__ */ new Date();
     const todayKey = toDateKey(today.getFullYear(), today.getMonth(), today.getDate());
-    const hasSeconds = computed24(() => props.format.indexOf("ss") > -1);
-    const draft = ref38({ date: "", h: "00", m: "00", s: "00" });
+    const hasSeconds = computed25(() => props.format.indexOf("ss") > -1);
+    const draft = ref39({ date: "", h: "00", m: "00", s: "00" });
     const initial = parseDate(parseValue(props.modelValue).date);
-    const viewYear = ref38(initial ? initial.year : today.getFullYear());
-    const viewMonth = ref38(initial ? initial.month : today.getMonth());
-    const displayText = computed24(() => props.modelValue || "");
-    const placeholderText = computed24(() => props.placeholder || t("dateTimePicker.placeholder"));
-    const weeks = computed24(() => t("datePicker.weeks").split(","));
-    const hours = computed24(() => Array.from({ length: 24 }, (_, index) => pad4(index)));
-    const minutes = computed24(() => {
+    const viewYear = ref39(initial ? initial.year : today.getFullYear());
+    const viewMonth = ref39(initial ? initial.month : today.getMonth());
+    const displayText = computed25(() => props.modelValue || "");
+    const placeholderText = computed25(() => props.placeholder || t("dateTimePicker.placeholder"));
+    const weeks = computed25(() => t("datePicker.weeks").split(","));
+    const hours = computed25(() => Array.from({ length: 24 }, (_, index) => pad4(index)));
+    const minutes = computed25(() => {
       const list = [];
       for (let value = 0; value < 60; value += Math.max(1, props.minuteStep)) list.push(pad4(value));
       return list;
     });
-    const seconds = computed24(() => Array.from({ length: 60 }, (_, index) => pad4(index)));
-    const timeCols = computed24(() => {
+    const seconds = computed25(() => Array.from({ length: 60 }, (_, index) => pad4(index)));
+    const timeCols = computed25(() => {
       const cols = [
         { key: "h", list: hours.value },
         { key: "m", list: minutes.value }
@@ -12457,8 +13275,8 @@ var date_time_picker_default = {
       if (hasSeconds.value) cols.push({ key: "s", list: seconds.value });
       return cols;
     });
-    const monthLabel = computed24(() => t("datePicker.title", { year: viewYear.value, month: viewMonth.value + 1 }));
-    const cells = computed24(() => {
+    const monthLabel = computed25(() => t("datePicker.title", { year: viewYear.value, month: viewMonth.value + 1 }));
+    const cells = computed25(() => {
       const first = new Date(viewYear.value, viewMonth.value, 1);
       const offset = (first.getDay() + 6) % 7;
       const start = new Date(viewYear.value, viewMonth.value, 1 - offset);
@@ -12594,7 +13412,7 @@ var date_time_picker_default = {
       emit("change", "");
       closePanel();
     }
-    onBeforeUnmount28(() => {
+    onBeforeUnmount29(() => {
       if (detachPanel) {
         detachPanel();
         detachPanel = null;
@@ -12719,7 +13537,7 @@ var date_time_picker_default = {
 };
 
 // src/components/virtual-list/index.js
-import { ref as ref39, computed as computed25, watch as watch30, onMounted as onMounted16, onBeforeUnmount as onBeforeUnmount29 } from "vue";
+import { ref as ref40, computed as computed26, watch as watch31, onMounted as onMounted16, onBeforeUnmount as onBeforeUnmount30 } from "vue";
 var virtual_list_default = {
   name: "DjmVirtualList",
   props: {
@@ -12736,14 +13554,14 @@ var virtual_list_default = {
   },
   emits: ["scroll", "reach-bottom", "item-click"],
   setup(props, { emit, expose }) {
-    const viewport = ref39(null);
-    const scrollTop = ref39(0);
-    const viewHeight = ref39(typeof props.height === "number" ? props.height : 320);
+    const viewport = ref40(null);
+    const scrollTop = ref40(0);
+    const viewHeight = ref40(typeof props.height === "number" ? props.height : 320);
     let bottomFired = false;
     function rowHeight(item, index) {
       return typeof props.itemHeight === "function" ? Math.max(1, Number(props.itemHeight(item, index)) || 1) : Math.max(1, props.itemHeight);
     }
-    const offsets = computed25(() => {
+    const offsets = computed26(() => {
       const list = [0];
       let sum = 0;
       props.items.forEach((item, index) => {
@@ -12752,7 +13570,7 @@ var virtual_list_default = {
       });
       return list;
     });
-    const totalHeight = computed25(() => offsets.value[offsets.value.length - 1]);
+    const totalHeight = computed26(() => offsets.value[offsets.value.length - 1]);
     function findStart(top) {
       const list = offsets.value;
       let low = 0;
@@ -12764,7 +13582,7 @@ var virtual_list_default = {
       }
       return Math.max(0, low - 1);
     }
-    const range = computed25(() => {
+    const range = computed26(() => {
       const total = props.items.length;
       if (!total) return { start: 0, end: 0 };
       const start = Math.max(0, findStart(scrollTop.value) - props.overscan);
@@ -12773,7 +13591,7 @@ var virtual_list_default = {
       while (end < total && offsets.value[end] < limit) end += 1;
       return { start, end: Math.min(total, end + props.overscan) };
     });
-    const visibleRows = computed25(() => {
+    const visibleRows = computed26(() => {
       const { start, end } = range.value;
       return props.items.slice(start, end).map((item, index) => {
         const realIndex = start + index;
@@ -12808,7 +13626,7 @@ var virtual_list_default = {
       else if (start < el.scrollTop) el.scrollTop = start;
       else if (end > el.scrollTop + el.clientHeight) el.scrollTop = end - el.clientHeight;
     }
-    watch30(
+    watch31(
       () => props.height,
       () => {
         if (viewport.value) viewHeight.value = viewport.value.clientHeight;
@@ -12825,7 +13643,7 @@ var virtual_list_default = {
         resizeObserver.observe(viewport.value);
       }
     });
-    onBeforeUnmount29(() => {
+    onBeforeUnmount30(() => {
       if (resizeObserver) resizeObserver.disconnect();
     });
     function onItemClick(row) {
@@ -12870,7 +13688,7 @@ var virtual_list_default = {
 };
 
 // src/components/batch-bar/index.js
-import { computed as computed26 } from "vue";
+import { computed as computed27 } from "vue";
 var batch_bar_default = {
   name: "DjmBatchBar",
   props: {
@@ -12885,8 +13703,8 @@ var batch_bar_default = {
   },
   emits: ["clear", "select-all"],
   setup(props, { emit }) {
-    const text = computed26(() => props.label || t("batchBar.selected", { count: props.count }));
-    const canSelectAll = computed26(() => props.total > props.count);
+    const text = computed27(() => props.label || t("batchBar.selected", { count: props.count }));
+    const canSelectAll = computed27(() => props.total > props.count);
     return {
       text,
       canSelectAll,
@@ -12914,7 +13732,7 @@ var batch_bar_default = {
 };
 
 // src/components/import-wizard/index.js
-import { ref as ref40, computed as computed27, watch as watch31 } from "vue";
+import { ref as ref41, computed as computed28, watch as watch32 } from "vue";
 function matchAccept2(name, accept) {
   if (!accept) return true;
   const ext = "." + String(name).split(".").pop().toLowerCase();
@@ -12941,19 +13759,19 @@ var import_wizard_default = {
   },
   emits: ["update:step", "update:mapping", "file-change", "submit", "retry"],
   setup(props, { emit }) {
-    const innerStep = ref40(props.step || 1);
-    watch31(
+    const innerStep = ref41(props.step || 1);
+    watch32(
       () => props.step,
       (value) => {
         if (value) innerStep.value = value;
       }
     );
-    const file = ref40(null);
-    const fileError = ref40("");
-    const mappingError = ref40("");
-    const fileInput = ref40(null);
-    const innerMapping = ref40({ ...props.mapping });
-    watch31(
+    const file = ref41(null);
+    const fileError = ref41("");
+    const mappingError = ref41("");
+    const fileInput = ref41(null);
+    const innerMapping = ref41({ ...props.mapping });
+    watch32(
       () => props.mapping,
       (value) => {
         innerMapping.value = { ...value };
@@ -12964,7 +13782,7 @@ var import_wizard_default = {
       innerStep.value = next;
       emit("update:step", next);
     }
-    const steps = computed27(() => [
+    const steps = computed28(() => [
       { index: 1, title: t("importWizard.stepFile") },
       { index: 2, title: t("importWizard.stepMapping") },
       { index: 3, title: t("importWizard.stepResult") }
@@ -13006,7 +13824,7 @@ var import_wizard_default = {
       mappingError.value = "";
       emit("update:mapping", next);
     }
-    const missingRequired = computed27(
+    const missingRequired = computed28(
       () => props.columns.filter((col) => col.required && !innerMapping.value[col.key])
     );
     function submit() {
@@ -13018,7 +13836,7 @@ var import_wizard_default = {
       }
       emit("submit", { ...innerMapping.value });
     }
-    watch31(
+    watch32(
       () => props.result,
       (value) => {
         if (value && (value.total || value.success || value.failed || value.errors && value.errors.length)) {
@@ -13039,7 +13857,7 @@ var import_wizard_default = {
       emit("retry");
       goStep(2);
     }
-    const stats = computed27(() => {
+    const stats = computed28(() => {
       const data = props.result || {};
       return {
         total: data.total || 0,
@@ -13185,7 +14003,7 @@ var import_wizard_default = {
 };
 
 // src/components/diff/index.js
-import { ref as ref41, computed as computed28 } from "vue";
+import { ref as ref42, computed as computed29 } from "vue";
 
 // src/utils/text-diff.js
 var MAX_CELLS = 1e6;
@@ -13249,8 +14067,8 @@ var diff_default = {
     afterLabel: { type: String, default: "" }
   },
   setup(props) {
-    const rows = computed28(() => diffLines(props.before, props.after));
-    const stats = computed28(() => {
+    const rows = computed29(() => diffLines(props.before, props.after));
+    const stats = computed29(() => {
       let add = 0;
       let remove = 0;
       rows.value.forEach((row) => {
@@ -13259,11 +14077,11 @@ var diff_default = {
       });
       return { add, remove };
     });
-    const expandedBlocks = ref41([]);
+    const expandedBlocks = ref42([]);
     function expand(index) {
       expandedBlocks.value = expandedBlocks.value.concat(index);
     }
-    const displayRows = computed28(() => {
+    const displayRows = computed29(() => {
       const ctx = Math.max(0, props.context);
       const list = rows.value;
       if (!ctx) return list;
@@ -13294,7 +14112,7 @@ var diff_default = {
       }
       return out;
     });
-    const splitRows = computed28(() => {
+    const splitRows = computed29(() => {
       const list = displayRows.value;
       const out = [];
       let i = 0;
@@ -13319,8 +14137,8 @@ var diff_default = {
       }
       return out;
     });
-    const beforeLabelText = computed28(() => props.beforeLabel || t("diff.before"));
-    const afterLabelText = computed28(() => props.afterLabel || t("diff.after"));
+    const beforeLabelText = computed29(() => props.beforeLabel || t("diff.before"));
+    const afterLabelText = computed29(() => props.afterLabel || t("diff.after"));
     return {
       stats,
       displayRows,
@@ -13386,7 +14204,7 @@ var diff_default = {
 };
 
 // src/components/tree-table/index.js
-import { ref as ref42, computed as computed29, watch as watch32 } from "vue";
+import { ref as ref43, computed as computed30, watch as watch33 } from "vue";
 function keyOf(row, rowKey) {
   return row && row[rowKey] !== void 0 ? row[rowKey] : row && row.id;
 }
@@ -13425,23 +14243,23 @@ var tree_table_default = {
       eachNode(props.data, (row) => keys.push(keyOf(row, props.rowKey)));
       return keys;
     }
-    const innerExpanded = ref42(
+    const innerExpanded = ref43(
       props.expandedKeys ? props.expandedKeys.slice() : props.defaultExpandAll ? allKeys() : []
     );
-    watch32(
+    watch33(
       () => props.expandedKeys,
       (value) => {
         if (value) innerExpanded.value = value.slice();
       }
     );
-    const innerChecked = ref42(props.checkedKeys ? props.checkedKeys.slice() : []);
-    watch32(
+    const innerChecked = ref43(props.checkedKeys ? props.checkedKeys.slice() : []);
+    watch33(
       () => props.checkedKeys,
       (value) => {
         if (value) innerChecked.value = value.slice();
       }
     );
-    const rows = computed29(() => {
+    const rows = computed30(() => {
       const out = [];
       function walk(list, level, parentKey) {
         ;
@@ -13456,7 +14274,7 @@ var tree_table_default = {
       walk(props.data, 1, null);
       return out;
     });
-    const descendantMap = computed29(() => {
+    const descendantMap = computed30(() => {
       const map = {};
       function collect(row) {
         const key = keyOf(row, props.rowKey);
@@ -13471,16 +14289,16 @@ var tree_table_default = {
       (props.data || []).forEach(collect);
       return map;
     });
-    const leafKeys = computed29(() => {
+    const leafKeys = computed30(() => {
       const keys = [];
       eachNode(props.data, (row) => {
         if (!row.children || !row.children.length) keys.push(keyOf(row, props.rowKey));
       });
       return keys;
     });
-    const checkedSet = computed29(() => new Set(innerChecked.value));
-    const allChecked = computed29(() => leafKeys.value.length > 0 && leafKeys.value.every((key) => checkedSet.value.has(key)));
-    const someChecked = computed29(() => !allChecked.value && leafKeys.value.some((key) => checkedSet.value.has(key)));
+    const checkedSet = computed30(() => new Set(innerChecked.value));
+    const allChecked = computed30(() => leafKeys.value.length > 0 && leafKeys.value.every((key) => checkedSet.value.has(key)));
+    const someChecked = computed30(() => !allChecked.value && leafKeys.value.some((key) => checkedSet.value.has(key)));
     function isIndeterminate(row) {
       if (!props.selectable || props.checkStrictly) return false;
       const desc = descendantMap.value[keyOf(row, props.rowKey)] || [];
@@ -13514,7 +14332,7 @@ var tree_table_default = {
       }
       emitChecked(Array.from(set));
     }
-    const nodeMap = computed29(() => {
+    const nodeMap = computed30(() => {
       const map = {};
       eachNode(props.data, (row, level, parentKey) => {
         map[keyOf(row, props.rowKey)] = { row, parentKey };
@@ -13561,11 +14379,11 @@ var tree_table_default = {
     function onRowClick(item) {
       emit("row-click", item.row, item);
     }
-    const scrollStyle = computed29(() => {
+    const scrollStyle = computed30(() => {
       if (!props.maxHeight) return null;
       return { maxHeight: typeof props.maxHeight === "number" ? props.maxHeight + "px" : props.maxHeight };
     });
-    const emptyLabel = computed29(() => props.emptyText || t("treeTable.empty"));
+    const emptyLabel = computed30(() => props.emptyText || t("treeTable.empty"));
     return {
       rows,
       innerExpanded,
@@ -13667,7 +14485,7 @@ var tree_table_default = {
 };
 
 // src/components/schedule/index.js
-import { ref as ref43, computed as computed30, watch as watch33, onBeforeUnmount as onBeforeUnmount30 } from "vue";
+import { ref as ref44, computed as computed31, watch as watch34, onBeforeUnmount as onBeforeUnmount31 } from "vue";
 var pad5 = (value) => String(value).padStart(2, "0");
 function toKey3(date) {
   return `${date.getFullYear()}-${pad5(date.getMonth() + 1)}-${pad5(date.getDate())}`;
@@ -13699,13 +14517,13 @@ var schedule_default = {
   emits: ["update:modelValue", "event-click", "slot-click", "week-change"],
   setup(props, { emit }) {
     const todayKey = toKey3(/* @__PURE__ */ new Date());
-    const nowMinutes = ref43((/* @__PURE__ */ new Date()).getHours() * 60 + (/* @__PURE__ */ new Date()).getMinutes());
+    const nowMinutes = ref44((/* @__PURE__ */ new Date()).getHours() * 60 + (/* @__PURE__ */ new Date()).getMinutes());
     const timer = window.setInterval(() => {
       const now = /* @__PURE__ */ new Date();
       nowMinutes.value = now.getHours() * 60 + now.getMinutes();
     }, 6e4);
-    const anchor = ref43(props.modelValue || todayKey);
-    watch33(
+    const anchor = ref44(props.modelValue || todayKey);
+    watch34(
       () => props.modelValue,
       (value) => {
         if (value) anchor.value = value;
@@ -13717,8 +14535,8 @@ var schedule_default = {
       const offset = (day + 6) % 7;
       return new Date(date.getFullYear(), date.getMonth(), date.getDate() - offset);
     }
-    const weekStartDate = computed30(() => startOfWeek(anchor.value));
-    const weekdays = computed30(() => t("schedule.weekdays").split(","));
+    const weekStartDate = computed31(() => startOfWeek(anchor.value));
+    const weekdays = computed31(() => t("schedule.weekdays").split(","));
     function layoutDay(list) {
       const sorted = list.map((item) => {
         const startMin = toMinutes(item.start, props.startHour * 60);
@@ -13751,7 +14569,7 @@ var schedule_default = {
         };
       });
     }
-    const days = computed30(() => {
+    const days = computed31(() => {
       const start = weekStartDate.value;
       const list = Array.from({ length: 7 }, (_, index) => {
         const date = new Date(start.getFullYear(), start.getMonth(), start.getDate() + index);
@@ -13769,20 +14587,20 @@ var schedule_default = {
       });
       return props.showWeekend ? list : list.slice(0, 5);
     });
-    const hours = computed30(() => {
+    const hours = computed31(() => {
       const list = [];
       for (let hour = props.startHour; hour < props.endHour; hour++) list.push(hour);
       return list;
     });
-    const bodyHeight = computed30(() => (props.endHour - props.startHour) * props.hourHeight);
-    const gridStyle = computed30(() => ({
+    const bodyHeight = computed31(() => (props.endHour - props.startHour) * props.hourHeight);
+    const gridStyle = computed31(() => ({
       gridTemplateColumns: "56px repeat(" + Math.max(1, days.value.length) + ", minmax(0, 1fr))"
     }));
-    const nowTop = computed30(() => (nowMinutes.value - props.startHour * 60) / 60 * props.hourHeight);
-    const showNowLine = computed30(
+    const nowTop = computed31(() => (nowMinutes.value - props.startHour * 60) / 60 * props.hourHeight);
+    const showNowLine = computed31(
       () => nowMinutes.value >= props.startHour * 60 && nowMinutes.value <= props.endHour * 60 && days.value.some((day) => day.today)
     );
-    const rangeLabel = computed30(() => {
+    const rangeLabel = computed31(() => {
       const list = days.value;
       if (!list.length) return "";
       const first = list[0];
@@ -13812,7 +14630,7 @@ var schedule_default = {
       const minute = minutes % 60;
       emit("slot-click", { date: day.key, time: `${pad5(hour)}:${pad5(minute)}` });
     }
-    onBeforeUnmount30(() => window.clearInterval(timer));
+    onBeforeUnmount31(() => window.clearInterval(timer));
     return {
       days,
       hours,
@@ -13912,7 +14730,7 @@ var schedule_default = {
 };
 
 // src/components/comment/index.js
-import { ref as ref44, computed as computed31 } from "vue";
+import { ref as ref45, computed as computed32 } from "vue";
 var comment_default = {
   name: "DjmComment",
   components: { DjmAvatar: avatar_default, DjmIcon: icon_default },
@@ -13929,16 +14747,16 @@ var comment_default = {
   },
   emits: ["submit", "reply", "remove"],
   setup(props, { emit }) {
-    const content = ref44("");
-    const replyTarget = ref44(null);
-    const placeholderText = computed31(() => {
+    const content = ref45("");
+    const replyTarget = ref45(null);
+    const placeholderText = computed32(() => {
       if (replyTarget.value) return t("comment.replyPlaceholder", { name: replyTarget.value.author });
       return props.placeholder || t("comment.placeholder");
     });
-    const submitLabel = computed31(() => props.submitText || t("comment.submit"));
-    const emptyLabel = computed31(() => props.emptyText || t("comment.empty"));
-    const overLimit = computed31(() => content.value.length > props.maxLength);
-    const canSubmit = computed31(() => content.value.trim().length > 0 && !overLimit.value && !props.disabled && !props.loading);
+    const submitLabel = computed32(() => props.submitText || t("comment.submit"));
+    const emptyLabel = computed32(() => props.emptyText || t("comment.empty"));
+    const overLimit = computed32(() => content.value.length > props.maxLength);
+    const canSubmit = computed32(() => content.value.trim().length > 0 && !overLimit.value && !props.disabled && !props.loading);
     function onInput(event) {
       content.value = event.target.value;
     }
@@ -14043,7 +14861,7 @@ var comment_default = {
 };
 
 // src/components/signature/index.js
-import { ref as ref45, onMounted as onMounted17, onBeforeUnmount as onBeforeUnmount31, watch as watch34 } from "vue";
+import { ref as ref46, onMounted as onMounted17, onBeforeUnmount as onBeforeUnmount32, watch as watch35 } from "vue";
 var signature_default = {
   name: "DjmSignature",
   props: {
@@ -14057,10 +14875,10 @@ var signature_default = {
   },
   emits: ["update:modelValue", "change", "start", "end", "clear"],
   setup(props, { emit }) {
-    const canvas = ref45(null);
-    const root = ref45(null);
-    const strokes = ref45([]);
-    const hasImage = ref45(false);
+    const canvas = ref46(null);
+    const root = ref46(null);
+    const strokes = ref46([]);
+    const hasImage = ref46(false);
     let imageCache = null;
     let drawing = false;
     let current = null;
@@ -14175,7 +14993,7 @@ var signature_default = {
       return canvas.value ? canvas.value.toDataURL("image/png") : "";
     }
     const isEmpty2 = () => strokes.value.length === 0 && !hasImage.value;
-    watch34(
+    watch35(
       () => props.modelValue,
       (value) => {
         if (value === lastEmitted) return;
@@ -14213,7 +15031,7 @@ var signature_default = {
         if (root.value) observer.observe(root.value);
       }
     });
-    onBeforeUnmount31(() => {
+    onBeforeUnmount32(() => {
       if (observer) observer.disconnect();
     });
     return {
@@ -14253,7 +15071,7 @@ var signature_default = {
 };
 
 // src/components/print/index.js
-import { ref as ref46, computed as computed32 } from "vue";
+import { ref as ref47, computed as computed33 } from "vue";
 function escapeHtml(text) {
   return String(text).replace(/[&<>"]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch]);
 }
@@ -14269,8 +15087,8 @@ var print_default = {
   },
   emits: ["before-print", "after-print"],
   setup(props, { emit }) {
-    const content = ref46(null);
-    const label = computed32(() => props.buttonText || t("print.button"));
+    const content = ref47(null);
+    const label = computed33(() => props.buttonText || t("print.button"));
     function collectStyles() {
       return Array.from(document.querySelectorAll('link[rel="stylesheet"], style')).map((el) => el.outerHTML).join("");
     }
@@ -14319,7 +15137,7 @@ var print_default = {
 };
 
 // src/components/gantt/index.js
-import { computed as computed33 } from "vue";
+import { computed as computed34 } from "vue";
 var DAY = 864e5;
 var pad6 = (value) => String(value).padStart(2, "0");
 function parseDate3(value) {
@@ -14355,7 +15173,7 @@ var gantt_default = {
   emits: ["task-click"],
   setup(props, { emit }) {
     const todayKey = toKey4(/* @__PURE__ */ new Date());
-    const range = computed33(() => {
+    const range = computed34(() => {
       const starts = props.tasks.map((task) => task.start).filter(Boolean).sort();
       const ends = props.tasks.map((task) => task.end || task.start).filter(Boolean).sort();
       let start = props.startDate || starts[0] || todayKey;
@@ -14368,7 +15186,7 @@ var gantt_default = {
       }
       return { start, end };
     });
-    const days = computed33(() => {
+    const days = computed34(() => {
       const total = dayDiff(range.value.end, range.value.start) + 1;
       const base = parseDate3(range.value.start);
       return Array.from({ length: total }, (_, index) => {
@@ -14385,9 +15203,9 @@ var gantt_default = {
         };
       });
     });
-    const trackWidth = computed33(() => days.value.length * props.dayWidth);
-    const innerWidth = computed33(() => props.nameWidth + trackWidth.value);
-    const bars = computed33(
+    const trackWidth = computed34(() => days.value.length * props.dayWidth);
+    const innerWidth = computed34(() => props.nameWidth + trackWidth.value);
+    const bars = computed34(
       () => props.tasks.map((task, index) => {
         const start = task.start || range.value.start;
         const end = task.end || start;
@@ -14403,12 +15221,12 @@ var gantt_default = {
         };
       })
     );
-    const todayLeft = computed33(() => {
+    const todayLeft = computed34(() => {
       const index = days.value.findIndex((day) => day.today);
       if (index === -1) return null;
       return props.nameWidth + index * props.dayWidth + props.dayWidth / 2;
     });
-    const emptyLabel = computed33(() => props.emptyText || t("gantt.empty"));
+    const emptyLabel = computed34(() => props.emptyText || t("gantt.empty"));
     function onClick(bar) {
       emit("task-click", bar.task);
     }
@@ -14490,7 +15308,7 @@ var gantt_default = {
 };
 
 // src/components/field-list/index.js
-import { ref as ref47, computed as computed34, watch as watch35 } from "vue";
+import { ref as ref48, computed as computed35, watch as watch36 } from "vue";
 var uidSeed8 = 0;
 var field_list_default = {
   name: "DjmFieldList",
@@ -14510,7 +15328,7 @@ var field_list_default = {
   },
   emits: ["update:modelValue", "add", "remove", "change"],
   setup(props, { emit }) {
-    const uids = ref47([]);
+    const uids = ref48([]);
     function syncUids() {
       const length = props.modelValue.length;
       if (uids.value.length === length) return;
@@ -14519,12 +15337,12 @@ var field_list_default = {
       uids.value = next;
     }
     syncUids();
-    watch35(() => props.modelValue.length, syncUids);
-    const errors = ref47({});
-    const addLabel = computed34(() => props.addText || t("fieldList.add"));
-    const emptyLabel = computed34(() => props.emptyText || t("fieldList.empty"));
-    const canAdd = computed34(() => !props.disabled && (!props.max || props.modelValue.length < props.max));
-    const canRemove = computed34(() => !props.disabled && props.modelValue.length > props.min);
+    watch36(() => props.modelValue.length, syncUids);
+    const errors = ref48({});
+    const addLabel = computed35(() => props.addText || t("fieldList.add"));
+    const emptyLabel = computed35(() => props.emptyText || t("fieldList.empty"));
+    const canAdd = computed35(() => !props.disabled && (!props.max || props.modelValue.length < props.max));
+    const canRemove = computed35(() => !props.disabled && props.modelValue.length > props.min);
     function commit(list) {
       emit("update:modelValue", list);
       emit("change", list);
@@ -14686,7 +15504,7 @@ var field_list_default = {
 };
 
 // src/components/chat/index.js
-import { ref as ref48, computed as computed35, watch as watch36, nextTick as nextTick15 } from "vue";
+import { ref as ref49, computed as computed36, watch as watch37, nextTick as nextTick15 } from "vue";
 var chat_default = {
   name: "DjmChat",
   components: { DjmAvatar: avatar_default },
@@ -14703,17 +15521,17 @@ var chat_default = {
   },
   emits: ["submit"],
   setup(props, { emit }) {
-    const content = ref48("");
-    const listRef = ref48(null);
-    const placeholderText = computed35(() => props.placeholder || t("chat.placeholder"));
-    const sendLabel = computed35(() => props.sendText || t("chat.send"));
-    const emptyLabel = computed35(() => props.emptyText || t("chat.empty"));
-    const canSend = computed35(() => content.value.trim().length > 0 && !props.disabled && !props.loading);
+    const content = ref49("");
+    const listRef = ref49(null);
+    const placeholderText = computed36(() => props.placeholder || t("chat.placeholder"));
+    const sendLabel = computed36(() => props.sendText || t("chat.send"));
+    const emptyLabel = computed36(() => props.emptyText || t("chat.empty"));
+    const canSend = computed36(() => content.value.trim().length > 0 && !props.disabled && !props.loading);
     function scrollToBottom() {
       const el = listRef.value;
       if (el) el.scrollTop = el.scrollHeight;
     }
-    watch36(
+    watch37(
       () => props.messages.length,
       () => nextTick15(scrollToBottom)
     );
@@ -14826,7 +15644,7 @@ var chat_default = {
 };
 
 // src/components/org-chart/index.js
-import { ref as ref49, computed as computed36, watch as watch37 } from "vue";
+import { ref as ref50, computed as computed37, watch as watch38 } from "vue";
 var org_chart_default = {
   name: "DjmOrgChart",
   components: { DjmAvatar: avatar_default, DjmIcon: icon_default },
@@ -14859,11 +15677,11 @@ var org_chart_default = {
       walk(node);
       return keys;
     }
-    const collapsed = ref49(props.defaultExpandAll ? [] : collapsedByDefault(props.data));
-    watch37(() => props.data, (data) => {
+    const collapsed = ref50(props.defaultExpandAll ? [] : collapsedByDefault(props.data));
+    watch38(() => props.data, (data) => {
       collapsed.value = props.defaultExpandAll ? [] : collapsedByDefault(data);
     });
-    const layout = computed36(() => {
+    const layout = computed37(() => {
       if (!props.data) return { nodes: [], links: [], width: 0, height: 0 };
       const rowH = props.nodeHeight + props.verticalGap;
       let cursor = 0;
@@ -14928,7 +15746,7 @@ var org_chart_default = {
     function onClick(item) {
       emit("node-click", item.node);
     }
-    const emptyLabel = computed36(() => props.emptyText || t("orgChart.empty"));
+    const emptyLabel = computed37(() => props.emptyText || t("orgChart.empty"));
     return {
       layout,
       toggle,
@@ -14989,7 +15807,7 @@ var org_chart_default = {
 };
 
 // src/components/page-tabs/index.js
-import { computed as computed37 } from "vue";
+import { computed as computed38 } from "vue";
 var page_tabs_default = {
   name: "DjmPageTabs",
   components: { DjmIcon: icon_default },
@@ -15000,7 +15818,7 @@ var page_tabs_default = {
   },
   emits: ["update:modelValue", "change", "close"],
   setup(props, { emit }) {
-    const label = computed37(() => t("pageTabs.label"));
+    const label = computed38(() => t("pageTabs.label"));
     function canClose(tab) {
       return tab.closable === void 0 ? props.closable : tab.closable;
     }
@@ -15253,7 +16071,7 @@ var components = [
   org_chart_default,
   page_tabs_default
 ];
-var version = "0.67.4";
+var version = "0.73.0";
 function install(app, options = {}) {
   if (options.locale) setLocale(options.locale);
   components.forEach((component) => app.component(component.name, component));
@@ -15375,6 +16193,7 @@ export {
   djmMessage,
   djmMessages,
   getLocale,
+  glass,
   hasPermission,
   initTheme,
   install,
@@ -15384,6 +16203,7 @@ export {
   primaryColor,
   resetPrimaryColor,
   sanitizeHtml,
+  setGlass,
   setLocale,
   setPermissions,
   setPrimaryColor,