@deppon/deppon-template 2.4.24 → 2.5.4

package/es/pro-layout/types.d.ts

@@ -0,0 +1,52 @@
+/** ProLayout 布局模式（结构参考常见 admin 四类布局，样式保持 deppon 现有设计语言） */
+export type ProLayoutMode = 'defaults' | 'classic' | 'transverse' | 'columns';
+/** 悬浮设置按钮位置 */
+export type ProLayoutSettingsFabPosition = 'right-center' | 'right-bottom' | 'left-center' | 'left-bottom';
+/** 可注入到 .pro-layout 根节点的主题令牌（对应 --pro-layout-* CSS 变量） */
+export interface ProLayoutThemeTokens {
+    /** 强调色 / 主色，同步 --pro-layout-accent 与 Element Plus primary */
+    accent?: string;
+    shellBg?: string;
+    shellRadius?: string;
+    shellBorder?: string;
+    shellShadow?: string;
+    headerBg?: string;
+    tagsBarBg?: string;
+    mainBg?: string;
+    text?: string;
+    textMuted?: string;
+    siderBg?: string;
+    topMenuFontFamily?: string;
+}
+/** 全局 CSS 变量（键名不含 --，与 App.vue :root 中 --* 对应） */
+export type ProLayoutGlobalColors = Record<string, string>;
+/** 运行时主题配置（含布局与界面开关，可持久化） */
+export interface ProLayoutThemeConfig {
+    layout?: ProLayoutMode;
+    tokens?: ProLayoutThemeTokens;
+    /** 写入 document.documentElement 的全局主题变量 */
+    globalColors?: ProLayoutGlobalColors;
+    isDark?: boolean;
+    isCollapse?: boolean;
+    isFixedHeader?: boolean;
+    isTagsView?: boolean;
+    isShowSider?: boolean;
+}
+export interface ProLayoutSettingsFabConfig {
+    /** 是否显示内置悬浮按钮 */
+    show?: boolean;
+    /** 相对视口的定位 */
+    position?: ProLayoutSettingsFabPosition;
+    /** 距边缘偏移，如 { right: '16px', bottom: '80px' } */
+    offset?: Record<string, string>;
+    /** 合并到按钮根节点的内联样式 */
+    style?: Record<string, string | number>;
+    /** 合并到按钮根节点的 class */
+    class?: string | string[] | Record<string, boolean>;
+    /** 按钮尺寸：default | large | small */
+    size?: 'default' | 'large' | 'small';
+    /** tooltip 文案 */
+    title?: string;
+    /** 是否显示内置齿轮图标；false 时仅用默认插槽 */
+    showIcon?: boolean;
+}

package/es/pro-table/ProTable.vue.css

@@ -166,8 +166,8 @@
 }
 .pro-layout__top-menu-el .pro-layout__top-menu-item-badge {
   position: absolute;
-  top: 3px;
-  right: 4px;
+  top: 2px;
+  right: -15px;
   transform: scale(0.75);
   vertical-align: top;
 }
@@ -367,6 +367,43 @@
   opacity: 1 !important;
   visibility: visible !important;
 }
+.el-menu--collapse {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-item,
+.el-menu--collapse .el-sub-menu__title {
+  justify-content: center !important;
+  max-width: 100%;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-tooltip__trigger {
+  padding: 0 !important;
+  justify-content: center !important;
+}
+.el-menu--collapse .el-menu-item [class^='el-icon'],
+.el-menu--collapse .el-sub-menu__title [class^='el-icon'] {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+.el-menu--collapse .el-menu-item > .pro-layout__menu-item-char,
+.el-menu--collapse .el-sub-menu__title > .pro-layout__menu-item-char {
+  display: inline-flex !important;
+  width: 20px !important;
+  min-width: 20px !important;
+  height: 20px !important;
+  overflow: visible !important;
+  visibility: visible !important;
+}
+.el-menu--collapse .el-menu-item.is-active,
+.el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title {
+  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) !important;
+}
 .el-menu--collapse .el-sub-menu__title .pro-layout__menu-item-char {
   color: var(--el-text-color-regular, #606266) !important;
   opacity: 1 !important;

package/es/pro-table/ProTableColumn.vue.css

@@ -166,8 +166,8 @@
 }
 .pro-layout__top-menu-el .pro-layout__top-menu-item-badge {
   position: absolute;
-  top: 3px;
-  right: 4px;
+  top: 2px;
+  right: -15px;
   transform: scale(0.75);
   vertical-align: top;
 }
@@ -367,6 +367,43 @@
   opacity: 1 !important;
   visibility: visible !important;
 }
+.el-menu--collapse {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-item,
+.el-menu--collapse .el-sub-menu__title {
+  justify-content: center !important;
+  max-width: 100%;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-tooltip__trigger {
+  padding: 0 !important;
+  justify-content: center !important;
+}
+.el-menu--collapse .el-menu-item [class^='el-icon'],
+.el-menu--collapse .el-sub-menu__title [class^='el-icon'] {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+.el-menu--collapse .el-menu-item > .pro-layout__menu-item-char,
+.el-menu--collapse .el-sub-menu__title > .pro-layout__menu-item-char {
+  display: inline-flex !important;
+  width: 20px !important;
+  min-width: 20px !important;
+  height: 20px !important;
+  overflow: visible !important;
+  visibility: visible !important;
+}
+.el-menu--collapse .el-menu-item.is-active,
+.el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title {
+  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) !important;
+}
 .el-menu--collapse .el-sub-menu__title .pro-layout__menu-item-char {
   color: var(--el-text-color-regular, #606266) !important;
   opacity: 1 !important;

package/es/pro-table/ToolBar/ColumnSetting.vue.css

@@ -166,8 +166,8 @@
 }
 .pro-layout__top-menu-el .pro-layout__top-menu-item-badge {
   position: absolute;
-  top: 3px;
-  right: 4px;
+  top: 2px;
+  right: -15px;
   transform: scale(0.75);
   vertical-align: top;
 }
@@ -367,6 +367,43 @@
   opacity: 1 !important;
   visibility: visible !important;
 }
+.el-menu--collapse {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-item,
+.el-menu--collapse .el-sub-menu__title {
+  justify-content: center !important;
+  max-width: 100%;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-tooltip__trigger {
+  padding: 0 !important;
+  justify-content: center !important;
+}
+.el-menu--collapse .el-menu-item [class^='el-icon'],
+.el-menu--collapse .el-sub-menu__title [class^='el-icon'] {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+.el-menu--collapse .el-menu-item > .pro-layout__menu-item-char,
+.el-menu--collapse .el-sub-menu__title > .pro-layout__menu-item-char {
+  display: inline-flex !important;
+  width: 20px !important;
+  min-width: 20px !important;
+  height: 20px !important;
+  overflow: visible !important;
+  visibility: visible !important;
+}
+.el-menu--collapse .el-menu-item.is-active,
+.el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title {
+  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) !important;
+}
 .el-menu--collapse .el-sub-menu__title .pro-layout__menu-item-char {
   color: var(--el-text-color-regular, #606266) !important;
   opacity: 1 !important;

package/es/pro-table/ToolBar/Density.vue.css

@@ -166,8 +166,8 @@
 }
 .pro-layout__top-menu-el .pro-layout__top-menu-item-badge {
   position: absolute;
-  top: 3px;
-  right: 4px;
+  top: 2px;
+  right: -15px;
   transform: scale(0.75);
   vertical-align: top;
 }
@@ -367,6 +367,43 @@
   opacity: 1 !important;
   visibility: visible !important;
 }
+.el-menu--collapse {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-item,
+.el-menu--collapse .el-sub-menu__title {
+  justify-content: center !important;
+  max-width: 100%;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-tooltip__trigger {
+  padding: 0 !important;
+  justify-content: center !important;
+}
+.el-menu--collapse .el-menu-item [class^='el-icon'],
+.el-menu--collapse .el-sub-menu__title [class^='el-icon'] {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+.el-menu--collapse .el-menu-item > .pro-layout__menu-item-char,
+.el-menu--collapse .el-sub-menu__title > .pro-layout__menu-item-char {
+  display: inline-flex !important;
+  width: 20px !important;
+  min-width: 20px !important;
+  height: 20px !important;
+  overflow: visible !important;
+  visibility: visible !important;
+}
+.el-menu--collapse .el-menu-item.is-active,
+.el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title {
+  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) !important;
+}
 .el-menu--collapse .el-sub-menu__title .pro-layout__menu-item-char {
   color: var(--el-text-color-regular, #606266) !important;
   opacity: 1 !important;

package/es/pro-table/ToolBar/Fullscreen.vue.css

@@ -166,8 +166,8 @@
 }
 .pro-layout__top-menu-el .pro-layout__top-menu-item-badge {
   position: absolute;
-  top: 3px;
-  right: 4px;
+  top: 2px;
+  right: -15px;
   transform: scale(0.75);
   vertical-align: top;
 }
@@ -367,6 +367,43 @@
   opacity: 1 !important;
   visibility: visible !important;
 }
+.el-menu--collapse {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-item,
+.el-menu--collapse .el-sub-menu__title {
+  justify-content: center !important;
+  max-width: 100%;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-tooltip__trigger {
+  padding: 0 !important;
+  justify-content: center !important;
+}
+.el-menu--collapse .el-menu-item [class^='el-icon'],
+.el-menu--collapse .el-sub-menu__title [class^='el-icon'] {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+.el-menu--collapse .el-menu-item > .pro-layout__menu-item-char,
+.el-menu--collapse .el-sub-menu__title > .pro-layout__menu-item-char {
+  display: inline-flex !important;
+  width: 20px !important;
+  min-width: 20px !important;
+  height: 20px !important;
+  overflow: visible !important;
+  visibility: visible !important;
+}
+.el-menu--collapse .el-menu-item.is-active,
+.el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title {
+  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) !important;
+}
 .el-menu--collapse .el-sub-menu__title .pro-layout__menu-item-char {
   color: var(--el-text-color-regular, #606266) !important;
   opacity: 1 !important;

package/es/pro-table/ToolBar/index.vue.css

@@ -166,8 +166,8 @@
 }
 .pro-layout__top-menu-el .pro-layout__top-menu-item-badge {
   position: absolute;
-  top: 3px;
-  right: 4px;
+  top: 2px;
+  right: -15px;
   transform: scale(0.75);
   vertical-align: top;
 }
@@ -367,6 +367,43 @@
   opacity: 1 !important;
   visibility: visible !important;
 }
+.el-menu--collapse {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-item,
+.el-menu--collapse .el-sub-menu__title {
+  justify-content: center !important;
+  max-width: 100%;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-tooltip__trigger {
+  padding: 0 !important;
+  justify-content: center !important;
+}
+.el-menu--collapse .el-menu-item [class^='el-icon'],
+.el-menu--collapse .el-sub-menu__title [class^='el-icon'] {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+.el-menu--collapse .el-menu-item > .pro-layout__menu-item-char,
+.el-menu--collapse .el-sub-menu__title > .pro-layout__menu-item-char {
+  display: inline-flex !important;
+  width: 20px !important;
+  min-width: 20px !important;
+  height: 20px !important;
+  overflow: visible !important;
+  visibility: visible !important;
+}
+.el-menu--collapse .el-menu-item.is-active,
+.el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title {
+  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) !important;
+}
 .el-menu--collapse .el-sub-menu__title .pro-layout__menu-item-char {
   color: var(--el-text-color-regular, #606266) !important;
   opacity: 1 !important;

package/es/styles/index.css

@@ -166,8 +166,8 @@
 }
 .pro-layout__top-menu-el .pro-layout__top-menu-item-badge {
   position: absolute;
-  top: 3px;
-  right: 4px;
+  top: 2px;
+  right: -15px;
   transform: scale(0.75);
   vertical-align: top;
 }
@@ -367,6 +367,43 @@
   opacity: 1 !important;
   visibility: visible !important;
 }
+.el-menu--collapse {
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-item,
+.el-menu--collapse .el-sub-menu__title {
+  justify-content: center !important;
+  max-width: 100%;
+  box-sizing: border-box !important;
+}
+.el-menu--collapse .el-menu-tooltip__trigger {
+  padding: 0 !important;
+  justify-content: center !important;
+}
+.el-menu--collapse .el-menu-item [class^='el-icon'],
+.el-menu--collapse .el-sub-menu__title [class^='el-icon'] {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+.el-menu--collapse .el-menu-item > .pro-layout__menu-item-char,
+.el-menu--collapse .el-sub-menu__title > .pro-layout__menu-item-char {
+  display: inline-flex !important;
+  width: 20px !important;
+  min-width: 20px !important;
+  height: 20px !important;
+  overflow: visible !important;
+  visibility: visible !important;
+}
+.el-menu--collapse .el-menu-item.is-active,
+.el-menu--collapse .el-sub-menu.is-active > .el-sub-menu__title {
+  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) !important;
+}
 .el-menu--collapse .el-sub-menu__title .pro-layout__menu-item-char {
   color: var(--el-text-color-regular, #606266) !important;
   opacity: 1 !important;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@deppon/deppon-template",
-    "version": "2.4.24",
+    "version": "2.5.4",
     "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.24",
-        "@deppon/deppon-request": "2.4.24",
-        "@deppon/deppon-router": "2.4.24",
-        "@deppon/deppon-ui": "2.4.24",
-        "@deppon/deppon-utils": "2.4.24",
+        "@deppon/deppon-assets": "2.5.4",
+        "@deppon/deppon-request": "2.5.4",
+        "@deppon/deppon-router": "2.5.4",
+        "@deppon/deppon-ui": "2.5.4",
+        "@deppon/deppon-utils": "2.5.4",
         "dayjs": "^1.11.10",
         "lodash-es": "^4.17.21",
         "mitt": "^3.0.1"