@cldemo/ui-kit 1.0.17 → 1.1.1

package/buildLibs/styles/Common/Token.css

@@ -16,13 +16,13 @@
    * ============================================================ */
 
   /* -- 主色阶（蓝）-- */
-  --cl-blue-50:  #eff8ff; /* 主色最浅底 */
+  --cl-blue-50: #eff8ff; /* 主色最浅底 */
   --cl-blue-400: #3d9ef5; /* 交互 hover */
   --cl-blue-500: #1088f0; /* 主色 */
   --cl-blue-600: #0a6fc4; /* 交互 active */
 
   /* -- 中性色阶（纯灰，按库内实际在用色重建）-- */
-  --cl-neutral-50:  #fafafa; /* 页面底色 */
+  --cl-neutral-50: #fafafa; /* 页面底色 */
   --cl-neutral-100: #f5f5f5; /* 浅背景 / 斑马纹 */
   --cl-neutral-150: #dcdcdc; /* 表格分隔线 */
   --cl-neutral-200: #cfcfcf; /* 通用边框 */
@@ -34,10 +34,10 @@
   --cl-black: #000000;
 
   /* -- 功能色原始值 -- */
-  --cl-green-500:  #12b76a; /* 成功 */
+  --cl-green-500: #12b76a; /* 成功 */
   --cl-orange-500: #f79009; /* 警告 */
-  --cl-red-500:    #ee0a24; /* 危险 */
-  --cl-red-600:    #ce2928; /* 危险 hover/按下（比 500 深一档）*/
+  --cl-red-500: #ee0a24; /* 危险 */
+  --cl-red-600: #ce2928; /* 危险 hover/按下（比 500 深一档）*/
   --cl-yellow-500: #fbe300; /* 强调（btn-yellow / 徽标醒目态）*/
   --cl-yellow-600: #cdb72e; /* 强调 hover/按下 */
 
@@ -46,37 +46,44 @@
    * ============================================================ */
 
   /* -- 主色 -- */
-  --cl-primary:        var(--cl-blue-500);
-  --cl-primary-hover:  var(--cl-blue-400);
+  --cl-primary: var(--cl-blue-500);
+  --cl-primary-hover: var(--cl-blue-400);
   --cl-primary-active: var(--cl-blue-600);
-  --cl-primary-light:  var(--cl-blue-50);
+  --cl-primary-light: var(--cl-blue-50);
 
   /* -- 功能色 -- */
   --cl-success: var(--cl-green-500);
   --cl-warning: var(--cl-orange-500);
-  --cl-danger:  var(--cl-red-500);
-  --cl-info:    var(--cl-blue-500);
+  --cl-danger: var(--cl-red-500);
+  --cl-info: var(--cl-blue-500);
 
   /* -- 交互态补充：浅色加深一档，保证 hover 与基态可区分 -- */
   --cl-danger-hover: var(--cl-red-600);
-  --cl-accent:       var(--cl-yellow-500); /* 强调黄（btn-yellow / Badge）*/
+  --cl-accent: var(--cl-yellow-500); /* 强调黄（btn-yellow / Badge）*/
   --cl-accent-hover: var(--cl-yellow-600);
 
   /* -- 高亮底 / 高亮字（文本检索、可编辑高亮、标签闪效）-- */
-  --cl-highlight-bg:   #ffff80;
+  --cl-highlight-bg: #ffff80;
   --cl-highlight-text: var(--cl-neutral-900);
 
+  /* -- 通知条（NoticeBar 等常驻提示）-- */
+  --cl-notice-text: #ed6a0c;
+  --cl-notice-bg: #fffbe8;
+
+  /* -- 拖拽把手（可拖拽面板的抓取条）-- */
+  --cl-handle: #e5e5e5;
+
   /* -- 功能色语义（文字 / 背景 / 边框），供改品牌色时一处生效 -- */
-  --cl-success-text:   var(--cl-green-500);
-  --cl-success-bg:     #e8f8f0;
+  --cl-success-text: var(--cl-green-500);
+  --cl-success-bg: #e8f8f0;
   --cl-success-border: #a6e9c5;
 
-  --cl-warning-text:   var(--cl-orange-500);
-  --cl-warning-bg:     #fef6e8;
+  --cl-warning-text: var(--cl-orange-500);
+  --cl-warning-bg: #fef6e8;
   --cl-warning-border: #fbdba7;
 
-  --cl-danger-text:   var(--cl-red-500);
-  --cl-danger-bg:     #fdecee;
+  --cl-danger-text: var(--cl-red-500);
+  --cl-danger-bg: #fdecee;
   --cl-danger-border: #f8b4bd;
 
   /* -- 功能色「浅底深字」专用（如 Callout 提示块）--
@@ -84,39 +91,39 @@
      此系列是「浅底上的深字」，浅色下 4.67~5.12 达标，暗色下切亮色值保证可读。 */
   --cl-success-text-deep: #2e7d32;
   --cl-warning-text-deep: #856404;
-  --cl-danger-text-deep:  #c62828;
-  --cl-info-text:         #1a3a6b;
-  --cl-info-bg:           #e6f0ff;
+  --cl-danger-text-deep: #c62828;
+  --cl-info-text: #1a3a6b;
+  --cl-info-bg: #e6f0ff;
 
   /* -- 文字（四级）-- */
-  --cl-text-primary:   var(--cl-neutral-900); /* 标题、正文 */
+  --cl-text-primary: var(--cl-neutral-900); /* 标题、正文 */
   --cl-text-secondary: var(--cl-neutral-500); /* 次要说明、表单标签 */
-  --cl-text-tertiary:  var(--cl-neutral-400); /* 占位符、辅助信息、时间戳 */
-  --cl-text-disabled:  var(--cl-neutral-300); /* 禁用态 */
-  --cl-text-inverse:   var(--cl-white);       /* 深色底上的文字 */
+  --cl-text-tertiary: var(--cl-neutral-400); /* 占位符、辅助信息、时间戳 */
+  --cl-text-disabled: var(--cl-neutral-300); /* 禁用态 */
+  --cl-text-inverse: var(--cl-white); /* 深色底上的文字 */
 
   /* -- 边框 -- */
-  --cl-border:       var(--cl-neutral-200); /* 通用边框 */
+  --cl-border: var(--cl-neutral-200); /* 通用边框 */
   --cl-border-light: var(--cl-neutral-150); /* 表格分隔线 */
-  --cl-border-strong: #b8b8b8;              /* 强调边框 */
-  --cl-border-focus:  #8c8c8c;              /* 聚焦边框（对白底 3.36:1，达 WCAG 非文本 3:1） */
+  --cl-border-strong: #b8b8b8; /* 强调边框 */
+  --cl-border-focus: #8c8c8c; /* 聚焦边框（对白底 3.36:1，达 WCAG 非文本 3:1） */
 
   /* -- 背景 -- */
-  --cl-bg:        var(--cl-white);
+  --cl-bg: var(--cl-white);
   --cl-bg-subtle: var(--cl-neutral-50);
-  --cl-bg-muted:  var(--cl-neutral-100);
+  --cl-bg-muted: var(--cl-neutral-100);
   --cl-bg-active: #f2f3f5; /* 按下态背景 */
-  --cl-bg-hover:  #f0f0f0; /* 大面积元素的悬停/聚焦底色（浅于 neutral-150，避免观感过重） */
+  --cl-bg-hover: #f0f0f0; /* 大面积元素的悬停/聚焦底色（浅于 neutral-150，避免观感过重） */
 
   /* ============================================================
    * 3. alpha / 遮罩层 —— rgba() 值的落点
    * ============================================================ */
 
-  --cl-transparent:    rgba(255, 255, 255, 0);
-  --cl-mask-light:     rgba(0, 0, 0, 0.2);
-  --cl-mask:           rgba(0, 0, 0, 0.3);
-  --cl-overlay:        rgba(0, 0, 0, 0.5);
-  --cl-shadow-color:   rgba(0, 0, 0, 0.175);
+  --cl-transparent: rgba(255, 255, 255, 0);
+  --cl-mask-light: rgba(0, 0, 0, 0.2);
+  --cl-mask: rgba(0, 0, 0, 0.3);
+  --cl-overlay: rgba(0, 0, 0, 0.5);
+  --cl-shadow-color: rgba(0, 0, 0, 0.175);
   --cl-white-alpha-20: rgba(255, 255, 255, 0.2);
   --cl-white-alpha-40: rgba(255, 255, 255, 0.4);
   --cl-white-alpha-60: rgba(255, 255, 255, 0.6);
@@ -136,10 +143,10 @@
    * ============================================================ */
 
   /* -- 间距（命名即值，8px 网格 + 4px 半格）-- */
-  --cl-space-0:  0;
-  --cl-space-2:  2px;
-  --cl-space-4:  4px;
-  --cl-space-8:  8px;
+  --cl-space-0: 0;
+  --cl-space-2: 2px;
+  --cl-space-4: 4px;
+  --cl-space-8: 8px;
   --cl-space-12: 12px;
   --cl-space-16: 16px;
   --cl-space-24: 24px;
@@ -147,27 +154,27 @@
   --cl-space-48: 48px;
 
   /* -- 字号（14 为正文基准）-- */
-  --cl-font-xs:   12px;
-  --cl-font-sm:   13px;
+  --cl-font-xs: 12px;
+  --cl-font-sm: 13px;
   --cl-font-base: 14px;
-  --cl-font-md:   16px;
-  --cl-font-lg:   18px;
-  --cl-font-xl:   20px;
-  --cl-font-2xl:  24px;
+  --cl-font-md: 16px;
+  --cl-font-lg: 18px;
+  --cl-font-xl: 20px;
+  --cl-font-2xl: 24px;
 
   /* -- 字重 / 行高 -- */
-  --cl-weight-normal:   400;
-  --cl-weight-medium:   500;
+  --cl-weight-normal: 400;
+  --cl-weight-medium: 500;
   --cl-weight-semibold: 600;
-  --cl-weight-bold:     700;
-  --cl-leading-tight:  1.25;
+  --cl-weight-bold: 700;
+  --cl-leading-tight: 1.25;
   --cl-leading-normal: 1.5;
-  --cl-leading-loose:  1.75;
+  --cl-leading-loose: 1.75;
 
   /* -- 圆角 -- */
-  --cl-radius-sm:   4px;
-  --cl-radius-md:   6px;
-  --cl-radius-lg:   8px;
+  --cl-radius-sm: 4px;
+  --cl-radius-md: 6px;
+  --cl-radius-lg: 8px;
   --cl-radius-full: 9999px;
 
   /* -- 阴影 -- */
@@ -178,16 +185,16 @@
   /* -- 层级 z-index（统一管理，避免叠层冲突）-- */
   /* 组件内部的小整数层级（1/2/3…）属于组件自身堆叠上下文，不走 token；
      下面这些是「跨组件争抢」的全局层级，必须从这里取。 */
-  --cl-z-base:       1;
-  --cl-z-dropdown:   1000;    /* 下拉面板 */
-  --cl-z-sticky:     1020;    /* 吸顶/吸底 */
-  --cl-z-fixed:      4000;    /* 固定工具层（tooltip 气泡定位层） */
-  --cl-z-overlay:    4001;    /* DropdownLayer 面板 */
-  --cl-z-modal:      1050;    /* 弹窗 */
-  --cl-z-popup:      1060;    /* 浮层 */
-  --cl-z-tooltip:    1070;    /* 工具提示 */
-  --cl-z-panel:      1000000; /* 抢占式面板：Modal 主体 */
-  --cl-z-top:        1000001; /* 全屏置顶层：Notify / Preview / 按钮遮罩 */
+  --cl-z-base: 1;
+  --cl-z-dropdown: 1000; /* 下拉面板 */
+  --cl-z-sticky: 1020; /* 吸顶/吸底 */
+  --cl-z-fixed: 4000; /* 固定工具层（tooltip 气泡定位层） */
+  --cl-z-overlay: 4001; /* DropdownLayer 面板 */
+  --cl-z-modal: 1050; /* 弹窗 */
+  --cl-z-popup: 1060; /* 浮层 */
+  --cl-z-tooltip: 1070; /* 工具提示 */
+  --cl-z-panel: 1000000; /* 抢占式面板：Modal 主体 */
+  --cl-z-top: 1000001; /* 全屏置顶层：Notify / Preview / 按钮遮罩 */
   --cl-z-fullscreen: 1000002; /* 全屏加载 / 全局遮罩，永远在最上层 */
 
   /* -- 过渡（三种常用时长）-- */
@@ -196,10 +203,16 @@
   --cl-transition-slow: 400ms;
   --cl-transition-ease: ease;
 
+  /* -- 下拉浮层展开/收起（DropdownLayer 系列）--
+     展开略快于收起：展开是响应操作意图，需即时反馈；收起稍缓，观感更从容。
+     两者不共用同一时长，故独立成 token，调下拉节奏时不影响其它过渡。 */
+  --cl-dropdown-enter-duration: 400ms;
+  --cl-dropdown-leave-duration: 500ms;
+
   /* -- 透明度档位 -- */
-  --cl-opacity-disabled:  0.5;  /* 禁用态 */
-  --cl-opacity-muted:     0.4;  /* 弱化态 */
-  --cl-opacity-hover:     0.7;  /* hover 叠加 */
+  --cl-opacity-disabled: 0.5; /* 禁用态 */
+  --cl-opacity-muted: 0.4; /* 弱化态 */
+  --cl-opacity-hover: 0.7; /* hover 叠加 */
   --cl-opacity-secondary: 0.85; /* 次级内容 */
 }
 
@@ -216,66 +229,66 @@
 :root[data-cl-theme='dark'],
 .cl-theme-dark {
   /* -- 主色（暗底上提亮一档，保证对比度）-- */
-  --cl-primary:        #3d9ef5;
-  --cl-primary-hover:  #63b2f7;
+  --cl-primary: #3d9ef5;
+  --cl-primary-hover: #63b2f7;
   --cl-primary-active: #1088f0;
-  --cl-primary-light:  #16283c;
+  --cl-primary-light: #16283c;
 
   /* -- 功能色 -- */
   --cl-success: #34c77b;
   --cl-warning: #f8a93a;
-  --cl-danger:  #f4556a;
-  --cl-info:    #3d9ef5;
+  --cl-danger: #f4556a;
+  --cl-info: #3d9ef5;
 
   /* -- 交互态 / 强调 / 高亮（暗色独立取值）-- */
   --cl-danger-hover: #d93a52; /* 暗底上按下取更深一档 */
-  --cl-accent:       #fbe300;
+  --cl-accent: #fbe300;
   --cl-accent-hover: #d4c02a;
-  --cl-highlight-bg:   #6b5d00; /* 压暗，避免暗底上刺眼 */
+  --cl-highlight-bg: #6b5d00; /* 压暗，避免暗底上刺眼 */
   --cl-highlight-text: rgba(255, 255, 255, 0.92);
 
-  --cl-success-text:   #34c77b;
-  --cl-success-bg:     #12291f;
+  --cl-success-text: #34c77b;
+  --cl-success-bg: #12291f;
   --cl-success-border: #1f5c40;
 
-  --cl-warning-text:   #f8a93a;
-  --cl-warning-bg:     #2a2113;
+  --cl-warning-text: #f8a93a;
+  --cl-warning-bg: #2a2113;
   --cl-warning-border: #6b4d1c;
 
-  --cl-danger-text:   #f4556a;
-  --cl-danger-bg:     #2c1519;
+  --cl-danger-text: #f4556a;
+  --cl-danger-bg: #2c1519;
   --cl-danger-border: #6d2a35;
 
   /* -- 功能色「浅底深字」在暗色下切亮色，保证深底上的可读性（对比度 5.17~8.09）-- */
   --cl-success-text-deep: #34c77b;
   --cl-warning-text-deep: #f8a93a;
-  --cl-danger-text-deep:  #f4556a;
-  --cl-info-text:         #a8c7f0;
-  --cl-info-bg:           #16283c;
+  --cl-danger-text-deep: #f4556a;
+  --cl-info-text: #a8c7f0;
+  --cl-info-bg: #16283c;
 
   /* -- 文字（暗底四级，反向递进）-- */
-  --cl-text-primary:   rgba(255, 255, 255, 0.92);
+  --cl-text-primary: rgba(255, 255, 255, 0.92);
   --cl-text-secondary: rgba(255, 255, 255, 0.68);
-  --cl-text-tertiary:  rgba(255, 255, 255, 0.45);
-  --cl-text-disabled:  rgba(255, 255, 255, 0.3);
-  --cl-text-inverse:   #1a1a1a;
+  --cl-text-tertiary: rgba(255, 255, 255, 0.45);
+  --cl-text-disabled: rgba(255, 255, 255, 0.3);
+  --cl-text-inverse: #1a1a1a;
 
   /* -- 边框 / 背景 -- */
-  --cl-border:        rgba(255, 255, 255, 0.16);
-  --cl-border-light:  rgba(255, 255, 255, 0.1);
+  --cl-border: rgba(255, 255, 255, 0.16);
+  --cl-border-light: rgba(255, 255, 255, 0.1);
   --cl-border-strong: rgba(255, 255, 255, 0.28);
-  --cl-border-focus:  rgba(255, 255, 255, 0.4);
+  --cl-border-focus: rgba(255, 255, 255, 0.4);
 
-  --cl-bg:        #141414;
+  --cl-bg: #141414;
   --cl-bg-subtle: #1c1c1c;
-  --cl-bg-muted:  #262626;
+  --cl-bg-muted: #262626;
   --cl-bg-active: #303030;
-  --cl-bg-hover:  #2e2e2e;
+  --cl-bg-hover: #2e2e2e;
 
   /* -- 遮罩：暗底上要更重，否则浮层与背景分不开 -- */
   --cl-mask-light: rgba(0, 0, 0, 0.45);
-  --cl-mask:       rgba(0, 0, 0, 0.6);
-  --cl-overlay:    rgba(0, 0, 0, 0.75);
+  --cl-mask: rgba(0, 0, 0, 0.6);
+  --cl-overlay: rgba(0, 0, 0, 0.75);
 
   /* -- 阴影：暗底上阴影不可见，改用更黑的投影拉开层次 -- */
   --cl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
@@ -286,55 +299,55 @@
 /* 跟随系统：仅在未显式指定 light 时生效 */
 @media (prefers-color-scheme: dark) {
   :root:not([data-cl-theme='light']) {
-    --cl-primary:        #3d9ef5;
-    --cl-primary-hover:  #63b2f7;
+    --cl-primary: #3d9ef5;
+    --cl-primary-hover: #63b2f7;
     --cl-primary-active: #1088f0;
-    --cl-primary-light:  #16283c;
+    --cl-primary-light: #16283c;
 
-    --cl-success-text:   #34c77b;
-    --cl-success-bg:     #12291f;
+    --cl-success-text: #34c77b;
+    --cl-success-bg: #12291f;
     --cl-success-border: #1f5c40;
-    --cl-warning-text:   #f8a93a;
-    --cl-warning-bg:     #2a2113;
+    --cl-warning-text: #f8a93a;
+    --cl-warning-bg: #2a2113;
     --cl-warning-border: #6b4d1c;
-    --cl-danger-text:    #f4556a;
-    --cl-danger-bg:      #2c1519;
-    --cl-danger-border:  #6d2a35;
+    --cl-danger-text: #f4556a;
+    --cl-danger-bg: #2c1519;
+    --cl-danger-border: #6d2a35;
 
     /* -- 功能色「浅底深字」在暗色下切亮色（与 data-cl-theme 分支保持一致）-- */
     --cl-success-text-deep: #34c77b;
     --cl-warning-text-deep: #f8a93a;
-    --cl-danger-text-deep:  #f4556a;
-    --cl-info-text:         #a8c7f0;
-    --cl-info-bg:           #16283c;
+    --cl-danger-text-deep: #f4556a;
+    --cl-info-text: #a8c7f0;
+    --cl-info-bg: #16283c;
 
     /* -- 交互态 / 强调 / 高亮（与 data-cl-theme 分支保持一致）-- */
     --cl-danger-hover: #d93a52;
-    --cl-accent:       #fbe300;
+    --cl-accent: #fbe300;
     --cl-accent-hover: #d4c02a;
-    --cl-highlight-bg:   #6b5d00;
+    --cl-highlight-bg: #6b5d00;
     --cl-highlight-text: rgba(255, 255, 255, 0.92);
 
-    --cl-text-primary:   rgba(255, 255, 255, 0.92);
+    --cl-text-primary: rgba(255, 255, 255, 0.92);
     --cl-text-secondary: rgba(255, 255, 255, 0.68);
-    --cl-text-tertiary:  rgba(255, 255, 255, 0.45);
-    --cl-text-disabled:  rgba(255, 255, 255, 0.3);
-    --cl-text-inverse:   #1a1a1a;
+    --cl-text-tertiary: rgba(255, 255, 255, 0.45);
+    --cl-text-disabled: rgba(255, 255, 255, 0.3);
+    --cl-text-inverse: #1a1a1a;
 
-    --cl-border:        rgba(255, 255, 255, 0.16);
-    --cl-border-light:  rgba(255, 255, 255, 0.1);
+    --cl-border: rgba(255, 255, 255, 0.16);
+    --cl-border-light: rgba(255, 255, 255, 0.1);
     --cl-border-strong: rgba(255, 255, 255, 0.28);
-    --cl-border-focus:  rgba(255, 255, 255, 0.4);
+    --cl-border-focus: rgba(255, 255, 255, 0.4);
 
-    --cl-bg:        #141414;
+    --cl-bg: #141414;
     --cl-bg-subtle: #1c1c1c;
-    --cl-bg-muted:  #262626;
+    --cl-bg-muted: #262626;
     --cl-bg-active: #303030;
-    --cl-bg-hover:  #2e2e2e;
+    --cl-bg-hover: #2e2e2e;
 
     --cl-mask-light: rgba(0, 0, 0, 0.45);
-    --cl-mask:       rgba(0, 0, 0, 0.6);
-    --cl-overlay:    rgba(0, 0, 0, 0.75);
+    --cl-mask: rgba(0, 0, 0, 0.6);
+    --cl-overlay: rgba(0, 0, 0, 0.75);
 
     --cl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
     --cl-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5);

package/buildLibs/styles/Common/meta.json

@@ -30,16 +30,18 @@
       "Mobile/ClGrid",
       "Mobile/ClNavBar",
       "Mobile/ClNoticeBar",
+      "Mobile/ClNotifyM",
       "Mobile/ClNumberKeyboard",
       "Mobile/ClPickerCascader",
       "Mobile/ClPullToRefresh",
       "Mobile/ClRate",
       "Mobile/ClScrollCard",
-      "Mobile/ClShareSheet",
+      "Mobile/ClSharePanel",
       "Mobile/ClSidebarSelect",
       "Mobile/ClSteps",
       "Mobile/ClTabbar",
       "Mobile/ClToast",
+      "Mobile/__provide__/NotifyM",
       "Mobile/__provide__/Toast",
       "Web/ClAnchorNav",
       "Web/ClCalendar",
@@ -103,7 +105,6 @@
       "Element/ClLoadWarp",
       "Element/ClModal",
       "Element/ClSwitchery",
-      "Element/__provide__/LoadScreen",
       "Mobile/ClActionSheet",
       "Mobile/ClCropperM",
       "Mobile/ClDropdownMenuMItem",
@@ -184,6 +185,22 @@
       "Web/ClXEditable",
       "Web/__directive__/Tooltip",
       "Web/__provide__/Alert"
+    ],
+    "Overlay-base": [
+      "Element/ClButton",
+      "Element/ClLoadFullCenter",
+      "Element/ClLoadScreen",
+      "Element/ClModal",
+      "Element/ClOverlay",
+      "Mobile/ClNumberKeyboard",
+      "Web/ClCropper",
+      "Web/ClCropperPreview",
+      "Web/ClDateTime",
+      "Web/ClEchartsLineAxisTag",
+      "Web/ClFileUpload",
+      "Web/ClXEditable",
+      "Web/__provide__/Alert",
+      "Web/__provide__/Preview"
     ]
   }
 }

package/buildLibs/styles/Element/ClButton.css

@@ -117,37 +117,6 @@
   transform: scale(0.75);
   transform-origin: center center;
 }
-/* Overlay 遮罩层样式 */
-.panel-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-/* 容器内定位模式（teleportTarget: self / teleport 目标容器环境）：
-   改为 absolute 铺满相对定位的父容器，避免 fixed 相对浏览器视口错位 */
-.panel-overlay-self {
-  position: absolute;
-}
-
-/* 遮罩淡入淡出（类名带 panel- 前缀，避免与 Modal 的 overlay-fade 全局冲突） */
-.panel-overlay-fade-enter-active,
-.panel-overlay-fade-leave-active {
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-.panel-overlay-fade-enter-from,
-.panel-overlay-fade-leave-to {
-  opacity: 0;
-}
-
-/* 锁定背景滚动：对目标容器（body 或 self/自定义挂载容器）加 overflow:hidden；body 场景与 Modal 共用该契约 */
-.modal-open {
-  overflow: hidden;
-}
 .cl-waves-ripple {
   position: absolute;
   border-radius: 50%;

package/buildLibs/styles/Element/ClDivider.css

@@ -53,9 +53,16 @@
   border-width: 0.5px 0 0;
 }
 
-/* ===== gold 金色渐变短线（theme="gold"，居中短装饰线，两端透明渐隐） ===== */
+/* ===== gold 金色渐变线（theme="gold"） =====
+   无文本：居中 64px 短装饰线，两端透明渐隐
+   有文本：左右两段各占一半，由外向内渐隐，文字夹在中间 */
+
+/* --- 无文本：居中短线 --- */
 .panel-divider--gold {
   justify-content: center;
+  /* --divider-glow：外圈本色；--divider-core：由本色向白推导的亮芯色 */
+  --divider-glow: var(--divider-line-color, #e6a23c);
+  --divider-core: color-mix(in srgb, var(--divider-glow), #ffffff 65%);
 }
 
 .panel-divider--gold::before {
@@ -65,9 +72,11 @@
   border: none;
   background: linear-gradient(
     to right,
-    transparent,
-    var(--divider-line-color, #e8a87c),
-    transparent
+    transparent 0%,
+    var(--divider-core) 35%,
+    var(--divider-glow) 50%,
+    var(--divider-core) 65%,
+    transparent 100%
   );
 }
 
@@ -75,8 +84,45 @@
   display: none;
 }
 
-/* gold 为纯装饰短线，隐藏文本 */
-.panel-divider--gold .divider-text {
-  display: none;
+/* --- 有文本：左右各一半，两段均由外向内渐隐，中间留出文字 --- */
+.panel-divider--gold.panel-divider--text {
+  justify-content: center;
+}
+
+.panel-divider--gold.panel-divider--text::before,
+.panel-divider--gold.panel-divider--text::after {
+  display: block;
+  flex: 1;
+  width: auto;
+  max-width: 100px;
+  height: 2px;
+  border: none;
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.panel-divider--gold.panel-divider--text::before {
+  background: linear-gradient(
+    to right,
+    transparent 0%,
+    var(--divider-core) 35%,
+    var(--divider-glow) 100%
+  );
+}
+
+.panel-divider--gold.panel-divider--text::after {
+  background: linear-gradient(
+    to left,
+    transparent 0%,
+    var(--divider-core) 35%,
+    var(--divider-glow) 100%
+  );
+}
+
+.panel-divider--gold.panel-divider--text .divider-text {
+  display: inline-block;
+  flex: none;
+  padding: 0 6px;
+  color: var(--divider-text-color, var(--divider-core, #e6a23c));
 }
 

package/buildLibs/styles/Element/ClFormGroupBtns.css

@@ -184,11 +184,6 @@
 }
 
 /* -- 纯文本只读模式 -- */
-.form-group.form-group-plaintext > .control-label {
-  color: var(--cl-text-secondary, #666666);
-  font-weight: inherit;
-}
-
 .form-group.form-group-plaintext > div {
   color: var(--cl-text-primary, #323233);
   font-weight: normal;
@@ -217,6 +212,11 @@
   text-align: right;
   padding-top: 8px;
 }
+
+.form-horizontal .form-group.form-group-plaintext > .control-label {
+  color: var(--cl-text-secondary, #666666);
+  font-weight: inherit;
+}
 /* ============================================================
  * FormGroupBtns 按钮行容器样式
  * 结构：.form-group-btns（按钮行，含按钮尺寸统一）

package/buildLibs/styles/Element/ClFormGroupHorizontal.css

@@ -184,11 +184,6 @@
 }
 
 /* -- 纯文本只读模式 -- */
-.form-group.form-group-plaintext > .control-label {
-  color: var(--cl-text-secondary, #666666);
-  font-weight: inherit;
-}
-
 .form-group.form-group-plaintext > div {
   color: var(--cl-text-primary, #323233);
   font-weight: normal;
@@ -218,3 +213,8 @@
   padding-top: 8px;
 }
 
+.form-horizontal .form-group.form-group-plaintext > .control-label {
+  color: var(--cl-text-secondary, #666666);
+  font-weight: inherit;
+}
+

package/buildLibs/styles/Element/ClLoadFullCenter.css

@@ -117,37 +117,6 @@
   transform: scale(0.75);
   transform-origin: center center;
 }
-/* Overlay 遮罩层样式 */
-.panel-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-/* 容器内定位模式（teleportTarget: self / teleport 目标容器环境）：
-   改为 absolute 铺满相对定位的父容器，避免 fixed 相对浏览器视口错位 */
-.panel-overlay-self {
-  position: absolute;
-}
-
-/* 遮罩淡入淡出（类名带 panel- 前缀，避免与 Modal 的 overlay-fade 全局冲突） */
-.panel-overlay-fade-enter-active,
-.panel-overlay-fade-leave-active {
-  transition: opacity var(--overlay-duration, 300ms) ease;
-}
-
-.panel-overlay-fade-enter-from,
-.panel-overlay-fade-leave-to {
-  opacity: 0;
-}
-
-/* 锁定背景滚动：对目标容器（body 或 self/自定义挂载容器）加 overflow:hidden；body 场景与 Modal 共用该契约 */
-.modal-open {
-  overflow: hidden;
-}
 /* FullCenter 全屏居中加载样式（遮罩由 Overlay 组件提供） */
 .loading-content {
   position: absolute;