smart-admin-web 10.23.0 → 10.24.0

package/dist/theme/naive-theme.js

@@ -1,55 +1,55 @@
-import { rgba as I, mix as O } from "./mix.js";
+import { rgba as W, mix as V } from "./mix.js";
 import { deriveAccentTokens as K } from "./accentTokens.js";
 const o = (c) => getComputedStyle(document.documentElement).getPropertyValue(c).trim();
 function B(c) {
-  const b = O(c, "#FFFFFF", 0.12);
-  return { base: c, hover: b, pressed: O(c, "#000000", 0.12), suppl: b };
+  const u = V(c, "#FFFFFF", 0.12);
+  return { base: c, hover: u, pressed: V(c, "#000000", 0.12), suppl: u };
 }
 function Y(c) {
-  const { dark: b } = c, Q = K(c.accent, b), { signal: t, acc: e, onAcc: m, hover: k, pressed: V, activeFg: u, linkFg: p, ring: s } = Q, H = B(o("--ok")), F = B(o("--warn")), T = B(o("--err")), f = B(o("--info")), r = o("--text-1"), i = o("--text-2"), l = o("--text-3"), M = o("--text-4"), h = o("--border"), d = o("--separator"), j = o("--hairline"), P = o("--hairline-strong"), D = o("--tooltip-bg"), w = o("--glass-strong"), n = o("--fill"), S = o("--fill-strong"), x = o("--hover"), g = o("--pressed"), C = o("--input"), R = o("--input-disabled"), y = o("--bg-card"), a = o("--bg-elevated"), W = o("--seg-track"), L = o("--seg-thumb"), $ = o("--shadow-1"), A = o("--shadow-2"), E = o("--shadow-3"), q = o("--th-bg"), G = o("--th-bg-hover"), J = o("--td-bg-hover"), v = o("--radius-md"), N = {
-    borderRadius: v,
-    color: C,
-    colorActive: C,
-    colorDisabled: R,
-    border: `1px solid ${h}`,
+  const { dark: u } = c, j = K(c.accent, u), { signal: t, acc: e, onAcc: g, hover: L, pressed: q, activeFg: h, linkFg: x, ring: p } = j, F = B(o("--ok")), T = B(o("--warn")), f = B(o("--err")), w = B(o("--info")), r = o("--text-1"), i = o("--text-2"), l = o("--text-3"), R = o("--text-4"), v = o("--border"), d = o("--separator"), J = o("--hairline"), y = o("--hairline-strong"), E = o("--tooltip-bg"), A = o("--glass-strong"), n = o("--fill"), P = o("--fill-strong"), C = o("--hover"), m = o("--pressed"), b = o("--input"), $ = o("--input-disabled"), s = o("--bg-card"), a = o("--bg-elevated"), G = o("--seg-track"), N = o("--seg-thumb"), z = o("--shadow-1"), M = o("--shadow-2"), O = o("--shadow-3"), I = o("--th-bg"), S = o("--th-bg-hover"), k = o("--td-bg-hover"), H = o("--radius-md"), Q = {
+    borderRadius: H,
+    color: b,
+    colorActive: b,
+    colorDisabled: $,
+    border: `1px solid ${v}`,
     borderHover: `1px solid ${o("--select-border-hover")}`,
     borderActive: `1px solid ${t}`,
     borderFocus: `1px solid ${t}`,
-    boxShadowActive: s,
-    boxShadowFocus: s
-  }, z = {
+    boxShadowActive: p,
+    boxShadowFocus: p
+  }, D = {
     borderRadius: o("--radius-xs"),
-    boxShadowFocus: s,
+    boxShadowFocus: p,
     checkMarkColor: "#FFFFFF",
     colorChecked: e,
     borderChecked: `1px solid ${e}`,
     colorIndeterminate: e,
     borderIndeterminate: `1px solid ${e}`,
-    border: `1px solid ${h}`,
-    color: C
+    border: `1px solid ${v}`,
+    color: b
   };
   return {
     common: {
       primaryColor: e,
-      primaryColorHover: k,
-      primaryColorPressed: V,
-      primaryColorSuppl: k,
-      successColor: H.base,
-      successColorHover: H.hover,
-      successColorPressed: H.pressed,
-      successColorSuppl: H.suppl,
-      warningColor: F.base,
-      warningColorHover: F.hover,
-      warningColorPressed: F.pressed,
-      warningColorSuppl: F.suppl,
-      errorColor: T.base,
-      errorColorHover: T.hover,
-      errorColorPressed: T.pressed,
-      errorColorSuppl: T.suppl,
-      infoColor: f.base,
-      infoColorHover: f.hover,
-      infoColorPressed: f.pressed,
-      infoColorSuppl: f.suppl,
+      primaryColorHover: L,
+      primaryColorPressed: q,
+      primaryColorSuppl: L,
+      successColor: F.base,
+      successColorHover: F.hover,
+      successColorPressed: F.pressed,
+      successColorSuppl: F.suppl,
+      warningColor: T.base,
+      warningColorHover: T.hover,
+      warningColorPressed: T.pressed,
+      warningColorSuppl: T.suppl,
+      errorColor: f.base,
+      errorColorHover: f.hover,
+      errorColorPressed: f.pressed,
+      errorColorSuppl: f.suppl,
+      infoColor: w.base,
+      infoColorHover: w.hover,
+      infoColorPressed: w.pressed,
+      infoColorSuppl: w.suppl,
       bodyColor: o("--bg-app"),
       cardColor: o("--bg-card-glass"),
       tableColor: "transparent",
@@ -60,22 +60,22 @@ function Y(c) {
       textColor2: i,
       textColor3: l,
       placeholderColor: l,
-      textColorDisabled: M,
-      borderColor: h,
+      textColorDisabled: R,
+      borderColor: v,
       dividerColor: d,
       // 两者同色会让禁用框和可填框长一个样,操作员分不清哪里能输入,必须走不同令牌。
       // 这两个 common 变量流向 Input 与 InternalSelection,
       // 即 NInput / NInputNumber / NSelect / NDatePicker / NCascader 等全部输入类组件。
-      inputColor: C,
-      inputColorDisabled: R,
+      inputColor: b,
+      inputColorDisabled: $,
       actionColor: n,
       tableHeaderColor: "transparent",
-      hoverColor: x,
-      pressedColor: g,
-      closeColorHover: x,
-      closeColorPressed: g,
+      hoverColor: C,
+      pressedColor: m,
+      closeColorHover: C,
+      closeColorPressed: m,
       clearColor: l,
-      borderRadius: v,
+      borderRadius: H,
       borderRadiusSmall: o("--radius-sm"),
       fontFamily: o("--font"),
       fontFamilyMono: o("--font-mono"),
@@ -93,14 +93,14 @@ function Y(c) {
       heightMedium: "30px",
       heightLarge: "42px",
       heightHuge: "46px",
-      boxShadow1: $,
-      boxShadow2: A,
-      boxShadow3: E,
+      boxShadow1: z,
+      boxShadow2: M,
+      boxShadow3: O,
       cubicBezierEaseInOut: "cubic-bezier(.2, .8, .2, 1)"
     },
     Button: {
       fontWeight: "500",
-      borderRadiusMedium: v,
+      borderRadiusMedium: H,
       borderRadiusSmall: "7px",
       borderRadiusLarge: "12px",
       fontSizeLarge: "15px",
@@ -109,53 +109,53 @@ function Y(c) {
       rippleDuration: "0s",
       paddingMedium: "0 12px",
       paddingSmall: "0 10px",
-      textColorPrimary: m,
-      textColorHoverPrimary: m,
-      textColorPressedPrimary: m,
-      textColorFocusPrimary: m,
-      textColorDisabledPrimary: m,
+      textColorPrimary: g,
+      textColorHoverPrimary: g,
+      textColorPressedPrimary: g,
+      textColorFocusPrimary: g,
+      textColorDisabledPrimary: g,
       colorSecondary: n,
-      colorSecondaryHover: S,
-      colorSecondaryPressed: g,
+      colorSecondaryHover: P,
+      colorSecondaryPressed: m,
       // 没写 type 的默认款(库里的「搜索」「更多」)渲染成与 secondary 同款:中性灰底、无描边
       color: n,
-      colorHover: S,
-      colorPressed: g,
+      colorHover: P,
+      colorPressed: m,
       colorFocus: n,
       border: "1px solid transparent",
       borderHover: "1px solid transparent",
       borderPressed: "1px solid transparent",
       borderFocus: `1px solid ${t}`,
       // 文字 / 行内操作按钮(详情、编辑):浅色 / 深色统一用 linkFg
-      textColorTextPrimary: p,
-      textColorTextHoverPrimary: p,
-      textColorTextPressedPrimary: p,
-      textColorTextFocusPrimary: p,
-      textColorGhostPrimary: p,
-      textColorGhostHoverPrimary: p,
-      textColorGhostPressedPrimary: p,
-      textColorGhostFocusPrimary: p,
-      colorQuaternaryHover: x,
-      colorQuaternaryPressed: g,
-      colorTertiaryHover: x,
-      colorTertiaryPressed: g
+      textColorTextPrimary: x,
+      textColorTextHoverPrimary: x,
+      textColorTextPressedPrimary: x,
+      textColorTextFocusPrimary: x,
+      textColorGhostPrimary: x,
+      textColorGhostHoverPrimary: x,
+      textColorGhostPressedPrimary: x,
+      textColorGhostFocusPrimary: x,
+      colorQuaternaryHover: C,
+      colorQuaternaryPressed: m,
+      colorTertiaryHover: C,
+      colorTertiaryPressed: m
     },
     Input: {
-      borderRadius: v,
-      color: C,
-      colorDisabled: R,
-      colorFocus: C,
-      border: `1px solid ${h}`,
+      borderRadius: H,
+      color: b,
+      colorDisabled: $,
+      colorFocus: b,
+      border: `1px solid ${v}`,
       borderHover: `1px solid ${o("--input-border-hover")}`,
       borderFocus: `1px solid ${t}`,
-      boxShadowFocus: s,
+      boxShadowFocus: p,
       heightLarge: "42px",
       fontSizeLarge: "15px",
       caretColor: t
     },
     Select: {
       peers: {
-        InternalSelection: N,
+        InternalSelection: Q,
         InternalSelectMenu: {
           borderRadius: "12px",
           optionHeightMedium: "30px",
@@ -164,22 +164,22 @@ function Y(c) {
         }
       }
     },
-    TreeSelect: { peers: { InternalSelection: N } },
+    TreeSelect: { peers: { InternalSelection: Q } },
     DatePicker: {
       peers: {
         Input: {
-          borderRadius: v,
-          color: C,
+          borderRadius: H,
+          color: b,
           borderFocus: `1px solid ${t}`,
-          boxShadowFocus: s
+          boxShadowFocus: p
         }
       }
     },
     InputNumber: {
-      peers: { Input: { color: C, borderFocus: `1px solid ${t}`, boxShadowFocus: s } }
+      peers: { Input: { color: b, borderFocus: `1px solid ${t}`, boxShadowFocus: p } }
     },
     Card: {
-      color: y,
+      color: s,
       colorEmbedded: n,
       borderColor: "transparent",
       borderRadius: o("--radius-lg"),
@@ -192,14 +192,30 @@ function Y(c) {
       actionColor: n
     },
     DataTable: {
-      thColor: q,
-      thColorHover: G,
-      thColorSorting: G,
+      thColor: I,
+      thColorHover: S,
+      thColorSorting: S,
       // 内容层不透明:行底取实色卡片色(固定列 sticky 叠在别的列上不会透底),不加斑马纹(tdColorStriped 同色)
-      tdColor: y,
-      tdColorHover: J,
-      tdColorStriped: y,
-      tdColorSorting: y,
+      tdColor: s,
+      tdColorHover: k,
+      tdColorStriped: s,
+      tdColorSorting: s,
+      // 弹窗 / 抽屉 / 浮层里的表格(Naive 的 insideModal 命中 .n-modal 与 .n-drawer,insidePopover 命中 .n-popover)改取下面两套变体,默认由半透明的 modalColor / popoverColor(= --bg-elevated)派生;
+      // 固定列叠在别的列上,底色有一丝透明就会透出底下滚过的列的字,所以与上面的非 Modal 变体同值,都是实色。
+      tdColorModal: s,
+      tdColorHoverModal: k,
+      tdColorSortingModal: s,
+      tdColorStripedModal: s,
+      thColorModal: I,
+      thColorHoverModal: S,
+      thColorSortingModal: S,
+      tdColorPopover: s,
+      tdColorHoverPopover: k,
+      tdColorSortingPopover: s,
+      tdColorStripedPopover: s,
+      thColorPopover: I,
+      thColorHoverPopover: S,
+      thColorSortingPopover: S,
       thTextColor: i,
       thFontWeight: "600",
       thIconColor: l,
@@ -212,16 +228,16 @@ function Y(c) {
       thPaddingSmall: "6px 10px",
       tdPaddingSmall: "4px 10px",
       fontSizeSmall: "14px",
-      peers: { Checkbox: z }
+      peers: { Checkbox: D }
     },
     Menu: {
-      borderRadius: v,
+      borderRadius: H,
       itemHeight: "34px",
       fontSize: "15px",
-      itemColorHover: x,
-      itemColorActive: I(t, b ? 0.16 : 0.09),
-      itemColorActiveHover: I(t, b ? 0.2 : 0.12),
-      itemColorActiveCollapsed: I(t, b ? 0.16 : 0.09),
+      itemColorHover: C,
+      itemColorActive: W(t, u ? 0.16 : 0.09),
+      itemColorActiveHover: W(t, u ? 0.2 : 0.12),
+      itemColorActiveCollapsed: W(t, u ? 0.16 : 0.09),
       // 侧栏标签用主文字色(macOS 侧栏就是 label 主色,不是次级灰);选中 / 悬停靠底色区分
       itemTextColor: r,
       itemTextColorHover: r,
@@ -230,25 +246,25 @@ function Y(c) {
       itemIconColor: r,
       itemIconColorHover: r,
       itemIconColorCollapsed: r,
-      itemTextColorActive: u,
-      itemIconColorActive: u,
-      itemTextColorActiveHover: u,
-      itemIconColorActiveHover: u,
+      itemTextColorActive: h,
+      itemIconColorActive: h,
+      itemTextColorActiveHover: h,
+      itemIconColorActiveHover: h,
       itemTextColorChildActive: r,
       itemIconColorChildActive: r,
       itemTextColorChildActiveHover: r,
       itemIconColorChildActiveHover: r,
       arrowColor: l,
       arrowColorHover: i,
-      arrowColorActive: u,
-      arrowColorActiveHover: u,
+      arrowColorActive: h,
+      arrowColorActiveHover: h,
       arrowColorChildActive: i,
       arrowColorChildActiveHover: r,
       groupTextColor: l
     },
     Tabs: {
-      colorSegment: W,
-      tabColorSegment: L,
+      colorSegment: G,
+      tabColorSegment: N,
       tabBorderRadius: "8px",
       tabTextColorSegment: i,
       tabTextColorActiveSegment: r,
@@ -257,7 +273,7 @@ function Y(c) {
       tabColor: "transparent",
       tabBorderColor: "transparent",
       tabTextColorCard: l,
-      tabTextColorActiveCard: u,
+      tabTextColorActiveCard: h,
       tabTextColorHoverCard: r,
       tabTextColorActiveLine: r,
       tabTextColorHoverLine: r,
@@ -265,8 +281,8 @@ function Y(c) {
     },
     Radio: {
       buttonBorderRadius: "8px",
-      buttonColor: W,
-      buttonColorActive: L,
+      buttonColor: G,
+      buttonColorActive: N,
       buttonBorderColor: "transparent",
       buttonBorderColorActive: "transparent",
       buttonBorderColorHover: "transparent",
@@ -275,23 +291,23 @@ function Y(c) {
       buttonTextColorHover: r,
       buttonBoxShadow: "none",
       buttonBoxShadowHover: "none",
-      buttonBoxShadowFocus: s,
+      buttonBoxShadowFocus: p,
       dotColorActive: e,
       boxShadowActive: `inset 0 0 0 1px ${e}`,
-      boxShadowFocus: s
+      boxShadowFocus: p
     },
-    Checkbox: z,
+    Checkbox: D,
     Tree: {
       nodeBorderRadius: "8px",
-      nodeColorHover: x,
-      nodeColorActive: w,
+      nodeColorHover: C,
+      nodeColorActive: A,
       nodeHeight: "30px",
-      peers: { Checkbox: z }
+      peers: { Checkbox: D }
     },
     Switch: {
       railColor: o("--switch-off"),
       railColorActive: e,
-      boxShadowFocus: s,
+      boxShadowFocus: p,
       railHeightMedium: "24px",
       railWidthMedium: "42px",
       buttonHeightMedium: "20px",
@@ -309,11 +325,11 @@ function Y(c) {
       color: n,
       textColor: i,
       fontWeightStrong: "500",
-      colorPrimary: w,
+      colorPrimary: A,
       textColorPrimary: r,
-      borderPrimary: `1px solid ${P}`
+      borderPrimary: `1px solid ${y}`
     },
-    List: { color: "transparent", colorHover: x, borderColor: d },
+    List: { color: "transparent", colorHover: C, borderColor: d },
     Dialog: {
       borderRadius: o("--radius-xl"),
       color: a,
@@ -321,7 +337,7 @@ function Y(c) {
       titleFontSize: "17px",
       titleFontWeight: "600"
     },
-    Modal: { color: a, boxShadow: E },
+    Modal: { color: a, boxShadow: O },
     Drawer: {
       color: a,
       headerPadding: "18px 24px",
@@ -332,13 +348,13 @@ function Y(c) {
       headerBorderBottom: `1px solid ${d}`,
       footerBorderTop: `1px solid ${d}`
     },
-    Popover: { color: a, borderRadius: o("--radius-lg"), boxShadow: A },
+    Popover: { color: a, borderRadius: o("--radius-lg"), boxShadow: M },
     Dropdown: {
       color: a,
       borderRadius: "12px",
       padding: "5px",
       optionHeightMedium: "30px",
-      optionColorHover: x,
+      optionColorHover: C,
       dividerColor: d
     },
     // 提示气泡和下拉 / 弹层同一套浮层表面,随亮暗主题走(亮色近白底深字,暗色深蓝底亮字),不做亮暗都黑的特例。
@@ -346,37 +362,37 @@ function Y(c) {
     // 压过 Tooltip 自带的值,所以同一套要在 peers.Popover 里再写一遍(它在合并链最后,只对 Tooltip 生效)。
     // 阴影用描边 + 卡片级的轻阴影:气泡很小,弹层那种大范围投影会显得过重。
     Tooltip: {
-      color: D,
+      color: E,
       textColor: r,
       borderRadius: "8px",
       padding: "5px 9px",
-      boxShadow: `0 0 0 1px ${P}, ${$}`,
+      boxShadow: `0 0 0 1px ${y}, ${z}`,
       peers: {
         Popover: {
-          color: D,
+          color: E,
           textColor: r,
           borderRadius: "8px",
           padding: "5px 9px",
-          boxShadow: `0 0 0 1px ${P}, ${$}`
+          boxShadow: `0 0 0 1px ${y}, ${z}`
         }
       }
     },
-    Message: { borderRadius: "12px", color: a, padding: "10px 16px", boxShadow: A },
-    Notification: { borderRadius: "16px", color: a, boxShadow: A },
+    Message: { borderRadius: "12px", color: a, padding: "10px 16px", boxShadow: M },
+    Notification: { borderRadius: "16px", color: a, boxShadow: M },
     Alert: {
       borderRadius: "10px",
       colorInfo: n,
-      borderInfo: `1px solid ${j}`,
+      borderInfo: `1px solid ${J}`,
       iconColorInfo: i,
       titleTextColorInfo: r,
       contentTextColorInfo: i
     },
     Pagination: {
       itemBorderRadius: "8px",
-      itemColorActive: w,
+      itemColorActive: A,
       itemTextColorActive: r,
-      itemBorderActive: `1px solid ${P}`,
-      itemColorActiveHover: w
+      itemBorderActive: `1px solid ${y}`,
+      itemColorActiveHover: A
     },
     Statistic: {
       valueFontSize: "26px",
@@ -391,30 +407,30 @@ function Y(c) {
       tdColor: "transparent"
     },
     Progress: { railColor: n, fillColor: e },
-    Breadcrumb: { itemTextColor: l, itemTextColorActive: r, separatorColor: M },
+    Breadcrumb: { itemTextColor: l, itemTextColorActive: r, separatorColor: R },
     Slider: {
       fillColor: e,
       fillColorHover: e,
-      railColor: S,
-      railColorHover: S,
+      railColor: P,
+      railColorHover: P,
       dotBorderActive: `2px solid ${e}`
     },
     Steps: {
       indicatorColorProcess: e,
-      indicatorTextColorProcess: m,
+      indicatorTextColorProcess: g,
       indicatorBorderColorProcess: e,
       indicatorColorFinish: "transparent",
-      indicatorBorderColorFinish: h,
+      indicatorBorderColorFinish: v,
       indicatorTextColorFinish: i,
       splitorColorFinish: l,
       splitorColorProcess: d,
       splitorColorWait: d
     },
-    Empty: { textColor: l, iconColor: M },
+    Empty: { textColor: l, iconColor: R },
     Divider: { color: d },
-    Timeline: { circleBorder: `2px solid ${h}`, titleFontWeight: "500", lineColor: d },
+    Timeline: { circleBorder: `2px solid ${v}`, titleFontWeight: "500", lineColor: d },
     Badge: { color: o("--badge-bg") },
-    Scrollbar: { color: S, colorHover: h },
+    Scrollbar: { color: P, colorHover: v },
     Code: { textColor: r }
   };
 }