@deppon/deppon-template 2.4.23 → 2.5.3

package/es/pro-dialog/ProDialog.vue.css

@@ -1432,3 +1432,99 @@ body .el-overlay-dialog {
   fill: var(--el-color-primary, #409eff) !important;
   fill-opacity: 1 !important;
 }
+/* 边框拖拽缩放 */
+.pro-dialog-root--resizable.el-dialog,
+.el-dialog.pro-dialog-root--resizable {
+  display: flex !important;
+  flex-direction: column !important;
+  overflow: hidden !important;
+}
+.pro-dialog-panel--resizable {
+  position: relative;
+}
+.pro-dialog-resize-handles {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 20;
+}
+.pro-dialog-resize-handle {
+  position: absolute;
+  pointer-events: auto;
+  background: transparent;
+  touch-action: none;
+}
+.pro-dialog-resize-handle--n {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 8px;
+}
+.pro-dialog-resize-handle--s {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 8px;
+}
+.pro-dialog-resize-handle--e {
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 100%;
+}
+.pro-dialog-resize-handle--w {
+  top: 0;
+  left: 0;
+  width: 8px;
+  height: 100%;
+}
+.pro-dialog-resize-handle--nw {
+  top: 0;
+  left: 0;
+  width: 14px;
+  height: 14px;
+}
+.pro-dialog-resize-handle--ne {
+  top: 0;
+  right: 0;
+  width: 14px;
+  height: 14px;
+}
+.pro-dialog-resize-handle--sw {
+  left: 0;
+  bottom: 0;
+  width: 14px;
+  height: 14px;
+}
+.pro-dialog-resize-handle--se {
+  right: 0;
+  bottom: 0;
+  width: 14px;
+  height: 14px;
+}
+.pro-dialog-resize-handle:hover {
+  background: color-mix(in srgb, var(--el-color-primary, #409eff) 18%, transparent);
+}
+.pro-dialog-root--resizable .el-dialog__body {
+  flex: 1;
+  min-height: 0;
+}
+.pro-dialog-root--resizable .pro-dialog-content-wrapper,
+.pro-dialog-root--resizable .pro-dialog-default-content {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.pro-dialog-body-content--fill {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.pro-dialog-body-content--fill .el-scrollbar {
+  flex: 1;
+  min-height: 0;
+}
+.pro-dialog-body-content--fill .el-scrollbar__wrap {
+  max-height: 100%;
+}

package/es/pro-dialog/ProDialog.vue_vue_type_script_setup_true_lang.vue.js

@@ -1,10 +1,11 @@
 import '../_virtual/_rollup-plugin-inject-process-env.js';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { markRaw, useSlots, ref, computed, useAttrs, onMounted, onUnmounted, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createElementVNode, normalizeClass, renderSlot, toDisplayString, createVNode, createCommentVNode, createElementBlock, normalizeStyle, Fragment, renderList, normalizeProps, guardReactiveProps, nextTick } from 'vue';
 import { ElDialog, ElIcon, ElScrollbar } from '@deppon/deppon-ui';
 import { Close } from '@deppon/deppon-ui/icons-vue';
 
-var _excluded = ["modelValue"];
+var _excluded = ["modelValue", "resizable", "resizeMinWidth", "resizeMinHeight", "resizeMaxWidth", "resizeMaxHeight", "resize-min-width", "resize-min-height", "resize-max-width", "resize-max-height", "class", "style", "width"];
 var _hoisted_1 = {
   "class": "my-header"
 };
@@ -35,8 +36,14 @@ var script = {
     var slots = useSlots();
 
     // refs
+    var dialogComponentRef = ref(null);
     var bodyScrollbarRef = ref(null);
     var bodyContentInnerRef = ref(null);
+    var dialogInstanceId = "pro-dialog-".concat(Math.random().toString(36).slice(2, 9));
+    var dialogPixelWidth = ref(null);
+    var dialogPixelHeight = ref(null);
+    var resizeHandlesEl = null;
+    var resizePanelEl = null;
 
     // 检查是否有 title slot
     computed(function () {
@@ -86,10 +93,334 @@ var script = {
     var bodyContentHeight = computed(function () {
       return attrs.bodyContentHeight || attrs['body-content-height'] || '50vh';
     });
+    var resizable = computed(function () {
+      return attrs.resizable === true || attrs.resizable === '';
+    });
+    var resizeMinWidth = computed(function () {
+      var _attrs$resizeMinWidth;
+      return parseSizeToPx((_attrs$resizeMinWidth = attrs.resizeMinWidth) !== null && _attrs$resizeMinWidth !== void 0 ? _attrs$resizeMinWidth : attrs['resize-min-width'], 360);
+    });
+    var resizeMinHeight = computed(function () {
+      var _attrs$resizeMinHeigh;
+      return parseSizeToPx((_attrs$resizeMinHeigh = attrs.resizeMinHeight) !== null && _attrs$resizeMinHeigh !== void 0 ? _attrs$resizeMinHeigh : attrs['resize-min-height'], 240);
+    });
+    var resizeMaxWidth = computed(function () {
+      var _attrs$resizeMaxWidth;
+      var v = (_attrs$resizeMaxWidth = attrs.resizeMaxWidth) !== null && _attrs$resizeMaxWidth !== void 0 ? _attrs$resizeMaxWidth : attrs['resize-max-width'];
+      if (v == null || v === '') {
+        return typeof window !== 'undefined' ? Math.floor(window.innerWidth * 0.96) : 1920;
+      }
+      return parseSizeToPx(v, 1920);
+    });
+    var resizeMaxHeight = computed(function () {
+      var _attrs$resizeMaxHeigh;
+      var v = (_attrs$resizeMaxHeigh = attrs.resizeMaxHeight) !== null && _attrs$resizeMaxHeigh !== void 0 ? _attrs$resizeMaxHeigh : attrs['resize-max-height'];
+      if (v == null || v === '') {
+        return typeof window !== 'undefined' ? Math.floor(window.innerHeight * 0.92) : 1080;
+      }
+      return parseSizeToPx(v, 1080);
+    });
+    var dialogRootClass = computed(function () {
+      var list = ['pro-dialog-root', "pro-dialog-root--".concat(dialogInstanceId)];
+      if (resizable.value) {
+        list.push('pro-dialog-root--resizable');
+      }
+      var extra = attrs["class"];
+      if (typeof extra === 'string' && extra) {
+        list.push(extra);
+      } else if (Array.isArray(extra)) {
+        list.push.apply(list, _toConsumableArray(extra.filter(Boolean)));
+      }
+      return list;
+    });
+    var dialogWidthProp = computed(function () {
+      if (resizable.value && dialogPixelWidth.value != null) {
+        return "".concat(dialogPixelWidth.value, "px");
+      }
+      return attrs.width;
+    });
+    var dialogRootStyle = computed(function () {
+      if (!resizable.value || dialogPixelHeight.value == null) {
+        return undefined;
+      }
+      return {
+        height: "".concat(dialogPixelHeight.value, "px"),
+        maxHeight: "".concat(dialogPixelHeight.value, "px"),
+        display: 'flex',
+        flexDirection: 'column'
+      };
+    });
+    var bodyScrollbarStyle = computed(function () {
+      if (resizable.value) {
+        return {
+          height: '100%',
+          flex: '1',
+          minHeight: '0'
+        };
+      }
+      return {
+        height: bodyContentHeight.value
+      };
+    });
+    function parseSizeToPx(value, fallback) {
+      if (value == null || value === '') {
+        return fallback;
+      }
+      if (typeof value === 'number' && !Number.isNaN(value)) {
+        return value;
+      }
+      var str = String(value).trim();
+      if (str.endsWith('px')) {
+        var _n = parseFloat(str);
+        return Number.isNaN(_n) ? fallback : _n;
+      }
+      if (str.endsWith('%') && typeof window !== 'undefined') {
+        var _n2 = parseFloat(str);
+        return Number.isNaN(_n2) ? fallback : Math.floor(window.innerWidth * _n2 / 100);
+      }
+      var n = parseFloat(str);
+      return Number.isNaN(n) ? fallback : n;
+    }
+    function parseWidthAttrToPx(widthAttr) {
+      if (widthAttr == null || widthAttr === '') {
+        return 600;
+      }
+      return parseSizeToPx(widthAttr, 600);
+    }
+    function clampSize(value, min, max) {
+      return Math.min(max, Math.max(min, value));
+    }
+    function getDialogPanelEl() {
+      var _comp$$el$querySelect, _comp$$el, _comp$$el$querySelect2;
+      var byClass = document.querySelector(".pro-dialog-root--".concat(dialogInstanceId, ".el-dialog"));
+      if (byClass) {
+        return byClass;
+      }
+      var comp = dialogComponentRef.value;
+      if (!comp) {
+        return null;
+      }
+      var exposed = comp.dialogRef;
+      if (exposed) {
+        var _exposed$value;
+        return (_exposed$value = exposed.value) !== null && _exposed$value !== void 0 ? _exposed$value : exposed;
+      }
+      return (_comp$$el$querySelect = (_comp$$el = comp.$el) === null || _comp$$el === void 0 || (_comp$$el$querySelect2 = _comp$$el.querySelector) === null || _comp$$el$querySelect2 === void 0 ? void 0 : _comp$$el$querySelect2.call(_comp$$el, '.el-dialog')) !== null && _comp$$el$querySelect !== void 0 ? _comp$$el$querySelect : null;
+    }
+    function applyDialogPixelSize(panel, width, height, position) {
+      if (!panel) {
+        return;
+      }
+      panel.style.width = "".concat(width, "px");
+      panel.style.maxWidth = "".concat(width, "px");
+      panel.style.height = "".concat(height, "px");
+      panel.style.maxHeight = "".concat(height, "px");
+      dialogPixelWidth.value = width;
+      dialogPixelHeight.value = height;
+      if (position) {
+        panel.style.marginLeft = "".concat(position.left, "px");
+        panel.style.marginTop = "".concat(position.top, "px");
+        panel.style.marginRight = 'auto';
+      }
+    }
+    function pinDialogVisualPosition(panel) {
+      var rect = panel.getBoundingClientRect();
+      panel.style.transform = 'none';
+      panel.style.marginLeft = "".concat(rect.left, "px");
+      panel.style.marginTop = "".concat(rect.top, "px");
+      panel.style.marginRight = 'auto';
+      panel.dataset.proDialogPositionPinned = '1';
+    }
+    function resetDialogPosition(panel) {
+      if (!panel) {
+        return;
+      }
+      panel.style.removeProperty('margin-left');
+      panel.style.removeProperty('margin-top');
+      panel.style.removeProperty('margin-right');
+      panel.style.removeProperty('transform');
+      delete panel.dataset.proDialogPositionPinned;
+    }
+    function initDialogSizeFromPanel(panel) {
+      var _attrs$width;
+      var widthAttr = (_attrs$width = attrs.width) !== null && _attrs$width !== void 0 ? _attrs$width : attrs['width'];
+      var initialW = clampSize(parseWidthAttrToPx(widthAttr), resizeMinWidth.value, resizeMaxWidth.value);
+      var rectH = panel.getBoundingClientRect().height;
+      var initialH = clampSize(rectH > 0 ? Math.ceil(rectH) : resizeMinHeight.value, resizeMinHeight.value, resizeMaxHeight.value);
+      applyDialogPixelSize(panel, initialW, initialH);
+    }
+    function removeResizeHandles() {
+      var _resizeHandlesEl;
+      if ((_resizeHandlesEl = resizeHandlesEl) !== null && _resizeHandlesEl !== void 0 && _resizeHandlesEl.parentNode) {
+        resizeHandlesEl.parentNode.removeChild(resizeHandlesEl);
+      }
+      resizeHandlesEl = null;
+      resizePanelEl = null;
+    }
+    var RESIZE_EDGE_CONFIG = [{
+      dir: 'n',
+      className: 'pro-dialog-resize-handle--n',
+      cursor: 'ns-resize'
+    }, {
+      dir: 's',
+      className: 'pro-dialog-resize-handle--s',
+      cursor: 'ns-resize'
+    }, {
+      dir: 'e',
+      className: 'pro-dialog-resize-handle--e',
+      cursor: 'ew-resize'
+    }, {
+      dir: 'w',
+      className: 'pro-dialog-resize-handle--w',
+      cursor: 'ew-resize'
+    }, {
+      dir: 'nw',
+      className: 'pro-dialog-resize-handle--nw',
+      cursor: 'nwse-resize'
+    }, {
+      dir: 'ne',
+      className: 'pro-dialog-resize-handle--ne',
+      cursor: 'nesw-resize'
+    }, {
+      dir: 'sw',
+      className: 'pro-dialog-resize-handle--sw',
+      cursor: 'nesw-resize'
+    }, {
+      dir: 'se',
+      className: 'pro-dialog-resize-handle--se',
+      cursor: 'nwse-resize'
+    }];
+    function startResizePointer(e, direction) {
+      var _RESIZE_EDGE_CONFIG$f;
+      if (!resizePanelEl) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      var panel = resizePanelEl;
+      var startX = e.clientX;
+      var startY = e.clientY;
+      var startRect = panel.getBoundingClientRect();
+      var startW = startRect.width;
+      var startH = startRect.height;
+      var startLeft = startRect.left;
+      var startTop = startRect.top;
+      var affectsPosition = /[nw]/.test(direction);
+      if (affectsPosition) {
+        pinDialogVisualPosition(panel);
+      }
+      var onMove = function onMove(ev) {
+        var deltaX = ev.clientX - startX;
+        var deltaY = ev.clientY - startY;
+        var nextW = startW;
+        var nextH = startH;
+        var nextLeft = startLeft;
+        var nextTop = startTop;
+        if (direction.includes('e')) {
+          nextW = startW + deltaX;
+        }
+        if (direction.includes('w')) {
+          nextW = startW - deltaX;
+          nextLeft = startLeft + deltaX;
+        }
+        if (direction.includes('s')) {
+          nextH = startH + deltaY;
+        }
+        if (direction.includes('n')) {
+          nextH = startH - deltaY;
+          nextTop = startTop + deltaY;
+        }
+        if (direction.includes('w')) {
+          var clampedW = clampSize(nextW, resizeMinWidth.value, resizeMaxWidth.value);
+          nextLeft += nextW - clampedW;
+          nextW = clampedW;
+        } else if (direction.includes('e')) {
+          nextW = clampSize(nextW, resizeMinWidth.value, resizeMaxWidth.value);
+        }
+        if (direction.includes('n')) {
+          var clampedH = clampSize(nextH, resizeMinHeight.value, resizeMaxHeight.value);
+          nextTop += nextH - clampedH;
+          nextH = clampedH;
+        } else if (direction.includes('s')) {
+          nextH = clampSize(nextH, resizeMinHeight.value, resizeMaxHeight.value);
+        }
+        var position = affectsPosition ? {
+          left: nextLeft,
+          top: nextTop
+        } : undefined;
+        applyDialogPixelSize(panel, nextW, nextH, position);
+      };
+      var _onUp = function onUp() {
+        document.removeEventListener('pointermove', onMove);
+        document.removeEventListener('pointerup', _onUp);
+        document.body.style.removeProperty('user-select');
+        document.body.style.removeProperty('cursor');
+      };
+      document.addEventListener('pointermove', onMove);
+      document.addEventListener('pointerup', _onUp);
+      document.body.style.userSelect = 'none';
+      document.body.style.cursor = ((_RESIZE_EDGE_CONFIG$f = RESIZE_EDGE_CONFIG.find(function (item) {
+        return item.dir === direction;
+      })) === null || _RESIZE_EDGE_CONFIG$f === void 0 ? void 0 : _RESIZE_EDGE_CONFIG$f.cursor) || 'default';
+    }
+    function mountResizeHandles(panel) {
+      removeResizeHandles();
+      resizePanelEl = panel;
+      panel.classList.add('pro-dialog-panel--resizable');
+      var wrapper = document.createElement('div');
+      wrapper.className = 'pro-dialog-resize-handles';
+      RESIZE_EDGE_CONFIG.forEach(function (_ref2) {
+        var dir = _ref2.dir,
+          className = _ref2.className,
+          cursor = _ref2.cursor;
+        var handle = document.createElement('div');
+        handle.className = "pro-dialog-resize-handle ".concat(className);
+        handle.setAttribute('data-resize-dir', dir);
+        handle.style.cursor = cursor;
+        handle.addEventListener('pointerdown', function (ev) {
+          return startResizePointer(ev, dir);
+        });
+        wrapper.appendChild(handle);
+      });
+      panel.appendChild(wrapper);
+      resizeHandlesEl = wrapper;
+    }
+    function handleDialogOpened() {
+      if (!resizable.value) {
+        return;
+      }
+      nextTick(function () {
+        var panel = getDialogPanelEl();
+        if (!panel) {
+          return;
+        }
+        initDialogSizeFromPanel(panel);
+        mountResizeHandles(panel);
+      });
+    }
+    function handleDialogClosed() {
+      var panel = getDialogPanelEl();
+      resetDialogPosition(panel);
+      removeResizeHandles();
+      dialogPixelWidth.value = null;
+      dialogPixelHeight.value = null;
+    }
 
     // 获取 el-dialog 的原生属性，过滤掉我们自定义的属性
     var getDialogProps = computed(function () {
       attrs.modelValue;
+        attrs.resizable;
+        attrs.resizeMinWidth;
+        attrs.resizeMinHeight;
+        attrs.resizeMaxWidth;
+        attrs.resizeMaxHeight;
+        attrs['resize-min-width'];
+        attrs['resize-min-height'];
+        attrs['resize-max-width'];
+        attrs['resize-max-height'];
+        attrs["class"];
+        attrs.style;
+        attrs.width;
         var dialogAttrs = _objectWithoutProperties(attrs, _excluded);
       return dialogAttrs;
     });
@@ -257,14 +588,22 @@ var script = {
       document.removeEventListener('pro-table-group-added', handleTableGroupAdded, true);
     });
     return function (_ctx, _cache) {
-      return openBlock(), createBlock(unref(ElDialog), mergeProps(getDialogProps.value, {
+      return openBlock(), createBlock(unref(ElDialog), mergeProps({
+        ref_key: "dialogComponentRef",
+        ref: dialogComponentRef
+      }, getDialogProps.value, {
+        "class": dialogRootClass.value,
         "model-value": __props.modelValue,
-        "onUpdate:modelValue": handleUpdateModelValue
+        width: dialogWidthProp.value,
+        style: dialogRootStyle.value,
+        "onUpdate:modelValue": handleUpdateModelValue,
+        onOpened: handleDialogOpened,
+        onClosed: handleDialogClosed
       }), createSlots({
-        header: withCtx(function (_ref2) {
-          var close = _ref2.close,
-            titleId = _ref2.titleId,
-            titleClass = _ref2.titleClass;
+        header: withCtx(function (_ref3) {
+          var close = _ref3.close,
+            titleId = _ref3.titleId,
+            titleClass = _ref3.titleClass;
           return [createElementVNode("div", _hoisted_1, [createElementVNode("div", {
             id: titleId,
             "class": normalizeClass(titleClass)
@@ -293,10 +632,10 @@ var script = {
           }, [renderSlot(_ctx.$slots, "header-content")], 2 /* CLASS */)) : createCommentVNode("v-if", true), createCommentVNode(" 下部分 slot：可滚动 "), hasBodyContentSlot.value ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(unref(ElScrollbar), {
             ref_key: "bodyScrollbarRef",
             ref: bodyScrollbarRef,
-            "class": "pro-dialog-body-content",
-            style: normalizeStyle({
-              height: bodyContentHeight.value
-            }),
+            "class": normalizeClass(["pro-dialog-body-content", {
+              'pro-dialog-body-content--fill': resizable.value
+            }]),
+            style: normalizeStyle(bodyScrollbarStyle.value),
             onProTableRowAdded: handleTableRowAdded,
             onProTableGroupAdded: handleTableGroupAdded
           }, {
@@ -308,7 +647,7 @@ var script = {
               }, [renderSlot(_ctx.$slots, "body-content")], 512 /* NEED_PATCH */)];
             }),
             _: 3 /* FORWARDED */
-          }, 8 /* PROPS */, ["style"])])) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock(Fragment, {
+          }, 8 /* PROPS */, ["class", "style"])])) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock(Fragment, {
             key: 1
           }, [createCommentVNode(" 默认内容 slot "), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "default")])], 64 /* STABLE_FRAGMENT */))];
         }),
@@ -320,7 +659,7 @@ var script = {
             return [renderSlot(_ctx.$slots, slotName, normalizeProps(guardReactiveProps(slotProps)))];
           })
         };
-      })]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["model-value"]);
+      })]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["class", "model-value", "width", "style"]);
     };
   }
 };

package/es/pro-layout/ProLayout.vue.css

@@ -1166,16 +1166,25 @@ body .el-overlay-dialog,
   width: 100%;
   height: 100%;
   overflow: hidden;
-  --pro-layout-header-bg: var(--el-bg-color, #ffffff);
-  --pro-layout-tags-bar-bg: var(--pro-layout-header-bg);
-  --pro-layout-main-bg: var(--el-bg-color-page, #f2f3f5);
+  /* 对齐 app-shell-navigation 原型：slate + indigo 壳层 */
+  --pro-layout-shell-bg: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 45%, rgba(238, 242, 255, 0.55) 100%);
+  --pro-layout-shell-radius: 16px;
+  --pro-layout-shell-border: rgba(255, 255, 255, 0.65);
+  --pro-layout-shell-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 12px 40px -8px rgba(15, 23, 42, 0.12);
+  /* accent 系列由 :root（App.vue）注入，组件内仅用 var(--pro-layout-accent, 回退) 消费 */
+  --pro-layout-header-bg: rgba(255, 255, 255, 0.88);
+  --pro-layout-tags-bar-bg: rgba(248, 250, 252, 0.92);
+  --pro-layout-main-bg: #f8fafc;
+  --pro-layout-text: #0f172a;
+  --pro-layout-text-muted: #64748b;
   /* 顶栏横向菜单：圆体（可通过 --pro-layout-top-menu-font-family 覆盖） */
-  --pro-layout-top-menu-font-family: 'Yuanti SC', 'Yuanti TC', 'Hiragino Sans GB', 'PingFang SC', 'Microsoft YaHei UI', system-ui, sans-serif;
+  --pro-layout-top-menu-font-family: 'DM Sans', 'Yuanti SC', 'Yuanti TC', 'Hiragino Sans GB', 'PingFang SC', 'Microsoft YaHei UI', system-ui, sans-serif;
   --pro-layout-top-menu-active-bar-width: 28px;
   --pro-layout-top-menu-active-bar-height: 3px;
-  /* 选中态：下划线距菜单项底边的距离（绝对定位，不占文字布局） */
   --pro-layout-top-menu-active-bar-offset: 4px;
-  background: #fff !important;
+  background: var(--pro-layout-shell-bg) !important;
+  color: var(--pro-layout-text);
+  font-family: 'DM Sans', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
 }
 .pro-layout__sider {
   display: flex;
@@ -1183,15 +1192,16 @@ body .el-overlay-dialog,
   z-index: 1;
   flex-direction: column;
   height: 100%;
-  overflow-x: hidden !important;
-  background: var(--el-bg-color, #ffffff) !important;
-  box-shadow: 2px 0 8px var(--pro-shadow-color-sider, rgba(0, 0, 0, 0.12));
+  overflow: hidden !important;
+  border-radius: var(--pro-layout-shell-radius);
+  border: 1px solid var(--pro-layout-shell-border);
+  background: rgba(255, 255, 255, 0.92) !important;
+  box-shadow: var(--pro-layout-shell-shadow);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
   transition: width 0.3s ease, transform 0.3s ease;
   flex-shrink: 0;
 }
-.pro-layout__sider .el-scrollbar__view {
-  overflow: visible;
-}
 .pro-layout__sider .el-scrollbar__wrap {
   overflow-x: hidden;
   overflow-y: auto;
@@ -1264,52 +1274,86 @@ body .el-overlay-dialog,
 .pro-layout__sider .pro-layout__menu-group .el-menu.el-menu--vertical .el-sub-menu__title::after {
   display: none !important;
 }
+.pro-layout__sider .el-menu-item,
+.pro-layout__sider .el-sub-menu__title {
+  height: 44px !important;
+  line-height: 44px !important;
+  margin: 2px calc(8px + var(--pro-el-scrollbar-width, 9px)) 2px 8px !important;
+  border-radius: 12px !important;
+  color: var(--pro-layout-text-muted) !important;
+  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+}
+.pro-layout__sider .el-menu-item.is-active {
+  background: linear-gradient(135deg, var(--pro-layout-accent-soft, #eef2ff) 0%, var(--pro-layout-accent-muted, #e0e7ff) 100%) !important;
+  color: var(--pro-layout-accent-dark, #4338ca) !important;
+  font-weight: 600;
+  box-shadow: inset 3px 0 0 0 var(--pro-layout-accent, #6366f1);
+}
+.pro-layout__sider .el-menu-item:not(.is-active):hover,
+.pro-layout__sider .el-sub-menu__title:hover {
+  background-color: #f8fafc !important;
+  color: var(--pro-layout-text) !important;
+}
+.pro-layout__sider .el-menu--inline .el-menu-item {
+  min-height: 40px !important;
+  height: 40px !important;
+  line-height: 40px !important;
+  margin: 2px 8px 2px 12px !important;
+  border-radius: 8px !important;
+}
+.pro-layout__sider .el-sub-menu.is-active > .el-sub-menu__title {
+  color: var(--pro-layout-accent-dark, #4338ca) !important;
+}
 .pro-layout__sider--collapsed {
   width: 64px !important;
 }
 .pro-layout__sider-collapse-btn {
   position: absolute !important;
   top: 50% !important;
-  right: -12px !important;
+  right: -14px !important;
   transform: translateY(-50%) !important;
   z-index: 10 !important;
-  background-color: var(--el-color-primary, #409eff) !important;
-  border: none !important;
-  box-shadow: 0 2px 8px var(--pro-shadow-color-btn, rgba(0, 0, 0, 0.15)) !important;
-  transition: all 0.3s ease !important;
-  width: 11px !important;
-  height: 38px !important;
+  background-color: #ffffff !important;
+  border: 1px solid rgba(226, 232, 240, 0.92) !important;
+  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.06) !important;
+  transition: all 0.2s ease !important;
+  width: 36px !important;
+  height: 36px !important;
   padding: 0 !important;
-  border-radius: 0 12px 12px 0 !important;
-  color: var(--el-bg-color, #ffffff) !important;
-  min-width: 11px !important;
-  min-height: 38px !important;
+  border-radius: 50% !important;
+  color: #64748b !important;
+  min-width: 36px !important;
+  min-height: 36px !important;
 }
 .pro-layout__sider-collapse-btn:hover {
-  background-color: var(--el-color-primary-dark-2, #337ecc) !important;
+  border-color: var(--el-color-primary-light-7, #c7d2fe) !important;
+  background-color: var(--pro-layout-accent-soft, #eef2ff) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout .el-button.pro-layout__sider-collapse-btn,
 .pro-layout .pro-layout__sider-collapse-btn.el-button {
   position: absolute !important;
   top: 50% !important;
-  right: -12px !important;
+  right: -14px !important;
   transform: translateY(-50%) !important;
   z-index: 10 !important;
-  background-color: var(--el-color-primary, #409eff) !important;
-  border: none !important;
-  box-shadow: 0 2px 8px var(--pro-shadow-color-btn, rgba(0, 0, 0, 0.15)) !important;
-  transition: all 0.3s ease !important;
-  width: 11px !important;
-  height: 38px !important;
+  background-color: #ffffff !important;
+  border: 1px solid rgba(226, 232, 240, 0.92) !important;
+  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.06) !important;
+  transition: all 0.2s ease !important;
+  width: 36px !important;
+  height: 36px !important;
   padding: 0 !important;
-  border-radius: 0 12px 12px 0 !important;
-  color: var(--el-bg-color, #ffffff) !important;
-  min-width: 11px !important;
-  min-height: 38px !important;
+  border-radius: 50% !important;
+  color: #64748b !important;
+  min-width: 36px !important;
+  min-height: 36px !important;
 }
 .pro-layout .el-button.pro-layout__sider-collapse-btn:hover,
 .pro-layout .pro-layout__sider-collapse-btn.el-button:hover {
-  background-color: var(--el-color-primary-dark-2, #337ecc) !important;
+  border-color: var(--el-color-primary-light-7, #c7d2fe) !important;
+  background-color: var(--pro-layout-accent-soft, #eef2ff) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout__logo {
   display: flex;
@@ -1325,7 +1369,7 @@ body .el-overlay-dialog,
   transition: all 0.3s ease;
 }
 .pro-layout__logo:hover .pro-layout__logo-text {
-  color: var(--el-color-primary-light-2, #409eff) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout__logo-full {
   display: flex;
@@ -1355,10 +1399,15 @@ body .el-overlay-dialog,
   font-family: var(--pro-font-family-logo, 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', SimSun, sans-serif);
 }
 .pro-layout__sider-header {
-  padding: 0 16px;
+  padding: 0 12px;
+  min-height: 52px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid rgba(241, 245, 249, 0.95);
+  background: linear-gradient(to right, #ffffff, rgba(248, 250, 252, 0.85));
 }
 .pro-layout__menu-search {
-  padding: 10px 16px;
+  padding: 10px 12px;
   display: flex;
   align-items: center;
 }
@@ -1366,8 +1415,9 @@ body .el-overlay-dialog,
   width: 100%;
 }
 .pro-layout__menu-search-input .el-input__wrapper {
-  border-radius: 20px;
-  background-color: var(--el-fill-color, #f0f2f5) !important;
+  border-radius: 12px;
+  border: 1px solid rgba(226, 232, 240, 0.85);
+  background-color: rgba(248, 250, 252, 0.9) !important;
   box-shadow: none;
 }
 .pro-layout__menu-search-input .el-input__inner {
@@ -1394,17 +1444,18 @@ body .el-overlay-dialog,
   margin-bottom: 0;
 }
 .pro-layout__menu-group-header {
-  padding: 12px 16px 8px;
+  padding: 10px calc(12px + var(--pro-el-scrollbar-width, 9px)) 6px 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: sticky;
   top: 0;
-  z-index: 1;
-  background-color: var(--el-bg-color, #ffffff) !important;
-  border-bottom: 1px solid var(--el-border-color-lighter, #f0f0f0) !important;
-  margin-bottom: 8px;
-  margin-top: -1px;
+  z-index: 3;
+  background-color: #ffffff !important;
+  border-bottom: 1px solid rgba(241, 245, 249, 0.95) !important;
+  margin-bottom: 4px;
+  margin-top: 0;
+  box-shadow: 0 1px 0 #ffffff;
 }
 .pro-layout__menu-group-header-left {
   display: flex;
@@ -1428,7 +1479,7 @@ body .el-overlay-dialog,
   flex-shrink: 0;
 }
 .pro-layout__menu-group-toggle:hover {
-  color: var(--el-color-primary, #409eff) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout__menu-group-actions {
   display: flex;
@@ -1436,18 +1487,20 @@ body .el-overlay-dialog,
   gap: 8px;
 }
 .pro-layout__common-menus {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--el-border-color-lighter, #f0f0f0) !important;
+  padding: 12px 12px;
+  border-bottom: 1px solid rgba(241, 245, 249, 0.95) !important;
   display: flex;
   align-items: center;
 }
 .pro-layout__common-menus-title {
-  font-size: 14px;
-  color: var(--el-text-color-secondary, #909399) !important;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--pro-layout-text-muted) !important;
   margin-bottom: 8px;
 }
 .pro-layout__common-menus-count {
-  color: var(--el-color-primary, #409eff) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
   margin-left: 4px;
 }
 .pro-layout__common-menus-btn {
@@ -1460,6 +1513,13 @@ body .el-overlay-dialog,
 .pro-layout__menu-scrollbar {
   flex: 1;
   overflow: hidden;
+  /* 不可设 overflow:hidden，否则分组头 position:sticky 失效 */
+}
+.pro-layout__menu-scrollbar .el-scrollbar__view {
+  overflow: visible;
+}
+.pro-layout__menu-scrollbar .el-scrollbar__bar.is-vertical {
+  z-index: 5;
 }
 .pro-layout__menu {
   border-right: none;
@@ -1505,14 +1565,26 @@ body .el-overlay-dialog,
   width: 100%;
   overflow: hidden;
   position: relative;
+  padding: 16px;
+  padding-top: 12px;
+  gap: 16px;
+  box-sizing: border-box;
+  background: transparent;
+  min-height: 0;
 }
 .pro-layout__header {
   padding: 0 !important;
   background: var(--pro-layout-header-bg) !important;
   position: relative;
   z-index: 100;
-  width: 100vw;
-  border-bottom: 1px solid rgba(39, 82, 173, 0.08) !important;
+  width: calc(68%) !important;
+  margin: 16px 16px 0;
+  border-radius: var(--pro-layout-shell-radius);
+  border: 1px solid var(--pro-layout-shell-border);
+  box-shadow: var(--pro-layout-shell-shadow);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: none !important;
 }
 .pro-layout__header--fixed {
   position: fixed;
@@ -1520,6 +1592,13 @@ body .el-overlay-dialog,
   left: 0;
   right: 0;
   z-index: 1000;
+  width: 100vw !important;
+  margin: 0;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
 }
 .pro-layout__header-content {
   display: flex;
@@ -1570,36 +1649,61 @@ body .el-overlay-dialog,
 .pro-layout__header-search {
   width: 180px;
   flex-shrink: 0;
+  height: 28px;
+  line-height: 28px;
+}
+.pro-layout__header-search .el-input {
+  height: 28px;
+  --el-input-height: 28px;
 }
 .pro-layout__header-search .el-input__wrapper {
-  padding: 4px 8px;
-  height: 22px;
+  padding: 0 10px;
+  min-height: 28px !important;
+  height: 28px !important;
   border-radius: 8px;
-  border-width: 0.5px;
-  border-color: var(--el-border-color-extra-light, #f0f2f5) !important;
+  border: 1px solid rgba(226, 232, 240, 0.85) !important;
+  background: rgba(248, 250, 252, 0.85) !important;
+  box-shadow: none;
+  box-sizing: border-box;
 }
 .pro-layout__header-search .el-input__inner {
-  font-size: 14px;
+  height: 26px;
+  line-height: 26px;
+  font-size: 12px;
   padding: 0;
 }
 .pro-layout__header-search .el-input__inner::placeholder {
+  font-size: 12px;
   color: var(--el-text-color-placeholder, #c0c4cc) !important;
 }
+.pro-layout__header-search .el-input__suffix {
+  height: 26px;
+  display: flex;
+  align-items: center;
+}
 .pro-layout__header-search-icon {
+  font-size: 14px;
   color: var(--el-text-color-placeholder, #c0c4cc) !important;
 }
 .pro-layout__header-action-btn {
-  color: var(--el-text-color-primary, #000000) !important;
+  width: 32px !important;
+  height: 32px !important;
+  border-radius: 12px !important;
+  border: 1px solid rgba(226, 232, 240, 0.85) !important;
+  background: #ffffff !important;
+  color: var(--pro-layout-text-muted) !important;
   font-size: 18px;
 }
 .pro-layout__header-action-btn .el-icon {
-  color: var(--el-text-color-primary, #000000) !important;
+  color: var(--pro-layout-text-muted) !important;
 }
 .pro-layout__header-action-btn:hover {
-  color: var(--el-text-color-primary, #000000) !important;
+  border-color: var(--el-color-primary-light-7, #c7d2fe) !important;
+  background: var(--pro-layout-accent-soft, #eef2ff) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout__header-action-btn:hover .el-icon {
-  color: var(--el-text-color-primary, #000000) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout__header-action-btn + .pro-layout__header-action-btn {
   margin-left: 0 !important;
@@ -1614,12 +1718,14 @@ body .el-overlay-dialog,
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  transition: background-color 0.3s;
+  padding: 6px 10px;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
 }
 .pro-layout__header-user-info:hover {
-  background-color: var(--el-fill-color-light, #f5f7fa) !important;
+  background-color: var(--pro-layout-accent-soft, #eef2ff) !important;
+  border-color: var(--el-color-primary-light-7, #c7d2fe) !important;
 }
 .pro-layout__header-user-avatar {
   font-size: 20px;
@@ -1642,7 +1748,12 @@ body .el-overlay-dialog,
 .pro-layout .pro-layout__header-right .pro-layout__header-search {
   flex-shrink: 1;
   min-width: 0;
-  max-width: 220px;
+  max-width: 200px;
+  height: 28px;
+}
+.pro-layout .pro-layout__header-right .pro-layout__header-search .el-input__wrapper {
+  min-height: 28px !important;
+  height: 28px !important;
 }
 .pro-layout .pro-layout__header-right .pro-layout__header-user-name {
   flex-shrink: 0;
@@ -1811,8 +1922,8 @@ body .el-overlay-dialog,
   color: rgba(0, 0, 0, 0.92) !important;
 }
 .pro-layout__top-menu .el-menu-item.pro-layout__top-menu-item--lead.is-active {
-  background: var(--el-color-primary-light-9, #ecf5ff) !important;
-  color: var(--el-color-primary, #409eff) !important;
+  background: linear-gradient(135deg, var(--pro-layout-accent-soft, #eef2ff) 0%, var(--pro-layout-accent-muted, #e0e7ff) 100%) !important;
+  color: var(--pro-layout-accent-dark, #4338ca) !important;
   font-weight: 600 !important;
   box-shadow: none !important;
 }
@@ -1878,8 +1989,8 @@ body .el-overlay-dialog,
   height: var(--pro-layout-top-menu-active-bar-height);
   transform: translateX(-50%);
   border-radius: 999px;
-  background: var(--el-color-primary, #409eff);
-  box-shadow: 0 1px 4px color-mix(in srgb, var(--el-color-primary, #409eff) 35%, transparent);
+  background: var(--pro-layout-accent, #6366f1);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--pro-layout-accent, #6366f1) 35%, transparent);
   pointer-events: none;
   z-index: 1;
 }
@@ -1902,8 +2013,8 @@ body .el-overlay-dialog,
   height: var(--pro-layout-top-menu-active-bar-height);
   transform: translateX(-50%);
   border-radius: 999px;
-  background: var(--el-color-primary, #409eff);
-  box-shadow: 0 1px 4px color-mix(in srgb, var(--el-color-primary, #409eff) 35%, transparent);
+  background: var(--pro-layout-accent, #6366f1);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--pro-layout-accent, #6366f1) 35%, transparent);
   pointer-events: none;
   z-index: 1;
 }
@@ -1985,6 +2096,13 @@ body .el-overlay-dialog,
   flex: 1 !important;
   width: 0 !important;
   overflow: hidden !important;
+  border-radius: var(--pro-layout-shell-radius);
+  border: 1px solid var(--pro-layout-shell-border);
+  background: rgba(255, 255, 255, 0.92) !important;
+  box-shadow: var(--pro-layout-shell-shadow);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  min-height: 0;
 }
 .pro-layout__tags-view {
   flex-shrink: 0;
@@ -1993,24 +2111,24 @@ body .el-overlay-dialog,
   margin: 0 !important;
   display: flex;
   flex-direction: column;
-  background: var(--pro-layout-header-bg) !important;
-  border-bottom: none !important;
+  background: var(--pro-layout-tags-bar-bg) !important;
+  border-bottom: 1px solid rgba(241, 245, 249, 0.95) !important;
   overflow: visible;
 }
 .pro-layout__tags-menu {
-  --el-menu-bg-color: var(--pro-layout-header-bg) !important;
+  --el-menu-bg-color: var(--pro-layout-tags-bar-bg) !important;
   display: flex !important;
   flex: 1 1 auto;
   align-self: stretch;
-  align-items: flex-end;
+  align-items: center;
   flex-wrap: nowrap !important;
   overflow-x: auto !important;
   overflow-y: visible !important;
-  padding: 0 !important;
+  padding: 12px 16px !important;
   margin: 0 !important;
   border: none !important;
   outline: none;
-  background: var(--pro-layout-header-bg) !important;
+  background: var(--pro-layout-tags-bar-bg) !important;
   min-height: 100%;
   width: 100%;
   height: auto !important;
@@ -2022,68 +2140,50 @@ body .el-overlay-dialog,
 }
 .pro-layout__tags-menu .el-menu-item {
   flex: 0 0 auto;
-  height: 36px !important;
-  line-height: 36px !important;
-  margin-right: 4px !important;
+  height: 32px !important;
+  line-height: 32px !important;
+  margin-right: 6px !important;
   margin-top: 0;
   margin-bottom: 0;
   padding: 0 12px !important;
-  border-radius: 10px 10px 0 0 !important;
-  border: none !important;
-  border-bottom: none !important;
+  border-radius: 9999px !important;
+  border: 1px solid transparent !important;
   background: transparent !important;
-  transition: color 0.2s ease;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
   position: relative;
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 .pro-layout__tags-menu .el-menu-item:not(.is-active):hover {
-  background: transparent !important;
+  background: rgba(241, 245, 249, 0.9) !important;
+  border-color: rgba(226, 232, 240, 0.7) !important;
 }
 .pro-layout__tags-menu .el-menu-item.is-active {
   z-index: 2;
-  border: none !important;
-  background: var(--pro-layout-main-bg) !important;
-  box-shadow: none !important;
-  border-bottom: none !important;
+  border: 1px solid rgba(226, 232, 240, 0.9) !important;
+  background: #ffffff !important;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
   overflow: visible;
 }
-.pro-layout__tags-menu .el-menu-item.is-active::before {
-  content: '';
-  position: absolute;
-  left: -8px;
-  bottom: 0;
-  width: 8px;
-  height: 8px;
-  background: var(--pro-layout-tags-bar-bg);
-  border-bottom-right-radius: 8px;
-  box-shadow: 2px 2px 0 0 var(--pro-layout-main-bg);
-}
+.pro-layout__tags-menu .el-menu-item.is-active::before,
 .pro-layout__tags-menu .el-menu-item.is-active::after {
-  content: '';
-  position: absolute;
-  right: -8px;
-  bottom: 0;
-  width: 8px;
-  height: 8px;
-  background: var(--pro-layout-tags-bar-bg);
-  border-bottom-left-radius: 8px;
-  box-shadow: -2px 2px 0 0 var(--pro-layout-main-bg);
+  display: none !important;
 }
 .pro-layout__tags-menu .pro-layout__tag-item--affix {
   padding: 0 10px !important;
   min-width: 40px;
   justify-content: center;
-  border-radius: 10px 10px 0 0 !important;
+  border-radius: 9999px !important;
 }
-.pro-layout__tags-menu .pro-layout__tag-item--affix.is-active::before {
-  display: none;
+.pro-layout__tags-menu .pro-layout__tag-item--affix.is-active::before,
+.pro-layout__tags-menu .pro-layout__tag-item--affix.is-active::after {
+  display: none !important;
 }
 .pro-layout__tags-menu .pro-layout__tag-label {
-  color: #46556f;
+  color: var(--pro-layout-text-muted);
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
   text-decoration: none !important;
 }
 .pro-layout__tags-menu .pro-layout__tag-label--affix-icon {
@@ -2098,17 +2198,17 @@ body .el-overlay-dialog,
   color: #5c6c84;
 }
 .pro-layout__tags-menu .pro-layout__tag-item--affix.is-active .pro-layout__tag-label--affix-icon .el-icon {
-  color: var(--el-color-primary, #409eff);
+  color: var(--pro-layout-accent, #6366f1);
 }
 .pro-layout__tags-menu .el-menu-item.is-active .pro-layout__tag-label:not(.pro-layout__tag-label--affix-icon) {
-  color: var(--el-color-primary, #409eff) !important;
+  color: var(--pro-layout-accent-dark, #4338ca) !important;
   font-weight: 600;
 }
 .pro-layout__tags-menu .el-menu-item:not(.is-active):hover .pro-layout__tag-label:not(.pro-layout__tag-label--affix-icon) {
-  color: var(--el-color-primary, #409eff) !important;
+  color: var(--pro-layout-text) !important;
 }
 .pro-layout__tags-menu .el-menu-item:not(.is-active):hover .pro-layout__tag-label--affix-icon .el-icon {
-  color: var(--el-color-primary, #409eff) !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout__tags-menu .pro-layout__tag-actions .pro-layout__tag-icon {
   color: #8a98b2;
@@ -2126,16 +2226,16 @@ body .el-overlay-dialog,
 }
 .pro-layout__tags-menu .pro-layout__tag-item:hover .pro-layout__tag-actions .pro-layout__tag-icon,
 .pro-layout__tags-menu .pro-layout__tag-actions .pro-layout__tag-icon:hover {
-  color: #2b65f5 !important;
+  color: var(--pro-layout-accent, #6366f1) !important;
 }
 .pro-layout__tags-menu > .el-sub-menu {
   margin-left: auto !important;
   position: sticky;
   right: 0;
   z-index: 2;
-  border-radius: 10px;
-  background: linear-gradient(90deg, rgba(249, 252, 255, 0.92), rgba(245, 249, 255, 0.96));
-  box-shadow: -10px 0 14px -12px rgba(27, 56, 106, 0.32);
+  border-radius: 12px;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.96));
+  box-shadow: -10px 0 14px -12px rgba(15, 23, 42, 0.08);
 }
 .pro-layout__tag-item {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@deppon/deppon-template",
-    "version": "2.4.23",
+    "version": "2.5.3",
     "main": "es/index.js",
     "module": "es/index.js",
     "typings": "es/index.d.ts",
@@ -43,11 +43,11 @@
         "less": "^4.2.0"
     },
     "dependencies": {
-        "@deppon/deppon-assets": "2.4.23",
-        "@deppon/deppon-request": "2.4.23",
-        "@deppon/deppon-router": "2.4.23",
-        "@deppon/deppon-ui": "2.4.23",
-        "@deppon/deppon-utils": "2.4.23",
+        "@deppon/deppon-assets": "2.5.3",
+        "@deppon/deppon-request": "2.5.3",
+        "@deppon/deppon-router": "2.5.3",
+        "@deppon/deppon-ui": "2.5.3",
+        "@deppon/deppon-utils": "2.5.3",
         "dayjs": "^1.11.10",
         "lodash-es": "^4.17.21",
         "mitt": "^3.0.1"