x-next 1.8.4 → 1.9.0

package/AI_USAGE.md

@@ -1,9 +1,9 @@
 <!-- Generated by pnpm generate:ai-usage. Edit src/docs/guide/ai-usage.md and script/ai-usage/manifest.js. -->
 # x-next AI 使用手册
 
-适用版本：**x-next@1.8.4**。Vue：`^3.5.0`；Node：`>=20.19.0`。
+适用版本：**x-next@1.9.0**。Vue：`^3.5.0`；Node：`>=20.19.0`。
 
-来源指纹（精选示例、映射、版本与公开类型声明）：`31c3bd1cb5d05181909d66394369dde8afd9d7018555bb45621cb4b3d913a51c`。
+来源指纹（精选示例、映射、版本与公开类型声明）：`151adc8affe9aa22cdd6adad1e92c2091f9d33a67f34de49fb767ec647df2a92`。
 
 本手册覆盖 26 个常用组件与服务；包内还有更多导出可用，只是未在此逐个展开。按业务需要选择即可，不必全部使用。
 

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 本项目遵循 [语义化版本](https://semver.org/lang/zh-CN/)。
 
+## [1.9.0] - 2026-10-05
+
+### 新增
+
+- **文档首页新增 Heatmap 与 TimeRangeSelector 特色卡片**：首页组件预览扩展到八种真实组件（新增 Checkbox、Input、Select、Tag、Progress、Heatmap、TimeRangeSelector），首屏上提、标题收窄、预览画布拓宽到 1440px。
+  - Heatmap：十二周示例数据，展示色阶、月份与图例；点击日期在卡片内反馈日期与数值。
+  - TimeRangeSelector：真实受控值，可新建、移动、调整两端与删除时段；卡片底部同步已选值，并提供「换个安排」快捷切换。
+  - 「换个心情」色板同时驱动热力图色阶与时间段颜色，与亮暗主题联动。
+
+### 修复
+
+- **Heatmap 暗色提示文字不可读**：`--x-heatmap-color-tooltip-text` 原先固定引用不随主题翻转的 `--x-color-white`，而提示底色在暗色下翻为浅色，白字浅底仅 1.24:1。现改用全局反色语义 `--x-color-overlay-tooltip-text`（与图表族一致），暗色 11.75:1、亮色 16.13:1。
+- **Heatmap 暗色色阶低档不可辨**：档位原先直接引用 `primary-1..6`，暗色色阶「明度阶梯反转」后低档比卡片更暗，最低档对表面仅 1.08:1，梯度读不出来。暗色档位现整体上移一档（`primary-3/4/5/6/7`），对表面 1.46 / 1.86 / 2.41 / 3.19 / 5.54，相邻档位明度差均超过可辨下限。
+- **局部暗色容器的派生别名被内联亮色表达式压制**：`ConfigProvider`（`themeColor` + `dark`）与 `applyThemeColor` 会把派生别名以内联方式写到主题容器，内联优先级高于样式表，原先写入亮色表达式会盖住 `[data-theme='dark']` 的语义覆盖（热力图档位退回贴底档、状态文字退回种子色）。现由构建期从暗色覆盖表派生暗色差异别名，运行时按 `dark` 写入对应取值。
+
+### 其他
+
+- 对比度门禁新增 Heatmap 断言：两主题 tooltip 文字、暗色五档对表面可辨性、相邻档位梯度，共 12 条；新增暗色 / 亮色两种运行时别名写入的回归用例。
+- 文档首页不再用通用 `input:focus-visible` 覆盖组件内部输入元素，消除双层聚焦外框。
+
 ## [1.8.4] - 2026-10-05
 
 ### 变更

package/dist/_styles/palette-aliases.d.ts

@@ -1 +1,2 @@
 export declare const PALETTE_ALIASES: Record<string, Record<string, string>>;
+export declare const PALETTE_ALIASES_DARK: Record<string, Record<string, string>>;

package/dist/es/_styles/palette-aliases.js

@@ -248,7 +248,36 @@ const r = {
     "--x-notification-color-accent-warning": "var(--x-color-warning-solid)",
     "--x-notification-color-icon-bg-warning": "var(--x-color-warning-subtle)"
   }
+}, o = {
+  primary: {
+    "--x-color-primary-button-text": "var(--x-color-primary-7)",
+    "--x-color-primary-text": "var(--x-color-primary-7)",
+    "--x-heatmap-color-level-1": "var(--x-color-primary-3)",
+    "--x-heatmap-color-level-2": "var(--x-color-primary-4)",
+    "--x-heatmap-color-level-3": "var(--x-color-primary-5)",
+    "--x-heatmap-color-level-4": "var(--x-color-primary-6)",
+    "--x-heatmap-color-level-5": "var(--x-color-primary-7)",
+    "--x-tag-color-better-blue-bg": "rgb(28 47 89)",
+    "--x-tag-color-better-blue-border-hover": "rgb(37 59 109)"
+  },
+  success: {
+    "--x-color-success-button-text": "var(--x-color-success-7)",
+    "--x-color-success-text": "var(--x-color-success-7)"
+  },
+  danger: {
+    "--x-color-danger-button-text": "var(--x-color-danger-8)",
+    "--x-color-danger-text": "var(--x-color-danger-8)"
+  },
+  strong: {
+    "--x-color-strong-button-text": "var(--x-color-strong-7)",
+    "--x-color-strong-text": "var(--x-color-strong-7)"
+  },
+  warning: {
+    "--x-color-warning-button-text": "var(--x-color-warning-7)",
+    "--x-color-warning-text": "var(--x-color-warning-7)"
+  }
 };
 export {
-  r as PALETTE_ALIASES
+  r as PALETTE_ALIASES,
+  o as PALETTE_ALIASES_DARK
 };

package/dist/es/_utils/palette.js

@@ -1,63 +1,65 @@
-import { PALETTE_ALIASES as g } from "../_styles/palette-aliases.js";
-const x = 2.05, d = 95.5, p = 22, b = [1, 0.8, 0.6, 0.4, 0.2], y = [1 / 3, 2 / 3, 1], E = 90, _ = 300, m = (s, i, a) => Math.min(a, Math.max(i, s)), A = (s) => {
+import { PALETTE_ALIASES as g, PALETTE_ALIASES_DARK as E } from "../_styles/palette-aliases.js";
+const x = 2.05, d = 95.5, p = 22, A = [1, 0.8, 0.6, 0.4, 0.2], _ = [1 / 3, 2 / 3, 1], b = 90, y = 300, m = (s, a, i) => Math.min(i, Math.max(a, s)), $ = (s) => {
   if (typeof s != "string") return null;
-  const i = s.trim();
-  if (i.startsWith("#")) {
-    const t = i.slice(1);
+  const a = s.trim();
+  if (a.startsWith("#")) {
+    const t = a.slice(1);
     if (!/^(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)) return null;
     const c = t.length === 3 ? [...t].map((h) => h + h).join("") : t.length === 6 || t.length === 8 ? t.slice(0, 6) : null;
     return c ? [0, 2, 4].map((h) => parseInt(c.slice(h, h + 2), 16)) : null;
   }
-  const a = i.match(/^rgba?\(([^)]+)\)$/i);
-  if (!a) return null;
-  const o = a[1].trim(), r = o.includes(",") ? o.split(",").map((t) => t.trim()) : o.split(/\s*\/\s*/)[0].split(/\s+/), e = o.includes(",") ? r[3] : o.includes("/") ? o.split("/")[1].trim() : void 0;
+  const i = a.match(/^rgba?\(([^)]+)\)$/i);
+  if (!i) return null;
+  const o = i[1].trim(), r = o.includes(",") ? o.split(",").map((t) => t.trim()) : o.split(/\s*\/\s*/)[0].split(/\s+/), e = o.includes(",") ? r[3] : o.includes("/") ? o.split("/")[1].trim() : void 0;
   if (o.split("/").length > 2 || r.length < 3 || r.length > (o.includes(",") ? 4 : 3)) return null;
   const n = /^[+-]?(?:\d+\.?\d*|\.\d+)%?$/;
   if (r.slice(0, 3).some((t) => !n.test(t)) || e !== void 0 && !n.test(e)) return null;
   const l = r.slice(0, 3).map((t) => t.endsWith("%") ? Math.round(parseFloat(t) / 100 * 255) : Number(t));
   return l.some((t) => !Number.isFinite(t)) ? null : l.map((t) => m(Math.round(t), 0, 255));
-}, $ = ([s, i, a]) => {
-  const o = s / 255, r = i / 255, e = a / 255, n = Math.max(o, r, e), l = Math.min(o, r, e), t = n - l, c = (n + l) / 2;
+}, H = ([s, a, i]) => {
+  const o = s / 255, r = a / 255, e = i / 255, n = Math.max(o, r, e), l = Math.min(o, r, e), t = n - l, c = (n + l) / 2;
   let h = 0, u = 0;
   return t !== 0 && (u = c > 0.5 ? t / (2 - n - l) : t / (n + l), n === o ? h = (r - e) / t + (r < e ? 6 : 0) : n === r ? h = (e - o) / t + 2 : h = (o - r) / t + 4, h *= 60), { h, s: u * 100, l: c * 100 };
-}, H = ({ h: s, s: i, l: a }) => {
-  const o = m(i, 0, 100) / 100, r = m(a, 0, 100) / 100, e = (s % 360 + 360) % 360, n = (1 - Math.abs(2 * r - 1)) * o, l = n * (1 - Math.abs(e / 60 % 2 - 1)), t = r - n / 2;
+}, S = ({ h: s, s: a, l: i }) => {
+  const o = m(a, 0, 100) / 100, r = m(i, 0, 100) / 100, e = (s % 360 + 360) % 360, n = (1 - Math.abs(2 * r - 1)) * o, l = n * (1 - Math.abs(e / 60 % 2 - 1)), t = r - n / 2;
   let c;
   return e < 60 ? c = [n, l, 0] : e < 120 ? c = [l, n, 0] : e < 180 ? c = [0, n, l] : e < 240 ? c = [0, l, n] : e < 300 ? c = [l, 0, n] : c = [n, 0, l], c.map((h) => m(Math.round((h + t) * 255), 0, 255));
-}, P = (s) => `#${s.map((i) => m(Math.round(i), 0, 255).toString(16).padStart(2, "0")).join("")}`, S = (s) => s <= E || s >= _ ? 1 : -1, I = (s, i = {}) => {
-  const a = A(s);
-  if (!a)
+}, P = (s) => `#${s.map((a) => m(Math.round(a), 0, 255).toString(16).padStart(2, "0")).join("")}`, I = (s) => s <= b || s >= y ? 1 : -1, L = (s, a = {}) => {
+  const i = $(s);
+  if (!i)
     throw new Error(`[x-next] generatePalette: 无法解析种子色 "${s}"`);
-  const { h: o, s: r, l: e } = $(a), n = S(o), { dark: l = !1 } = i, t = l ? Math.min(p, e) : Math.max(d, e), c = l ? Math.max(d, e) : Math.min(p, e), h = [];
+  const { h: o, s: r, l: e } = H(i), n = I(o), { dark: l = !1 } = a, t = l ? Math.min(p, e) : Math.max(d, e), c = l ? Math.max(d, e) : Math.min(p, e), h = [];
   for (let u = 0; u < 9; u += 1) {
     let f;
-    u < 5 ? f = e + (t - e) * b[u] : u === 5 ? f = e : f = e + (c - e) * y[u - 6];
-    const M = 5 - u, T = n * x * M * (l ? -1 : 1);
-    h.push(P(H({ h: o + T, s: r, l: m(f, 0, 100) })));
+    u < 5 ? f = e + (t - e) * A[u] : u === 5 ? f = e : f = e + (c - e) * _[u - 6];
+    const T = 5 - u, M = n * x * T * (l ? -1 : 1);
+    h.push(P(S({ h: o + M, s: r, l: m(f, 0, 100) })));
   }
   return h;
-}, G = (s, i = {}) => {
-  const { name: a = "primary", target: o, dark: r } = i, e = I(s, { dark: r }), n = o ?? (typeof document < "u" ? document.documentElement : null);
+}, G = (s, a = {}) => {
+  const { name: i = "primary", target: o, dark: r } = a, e = L(s, { dark: r }), n = o ?? (typeof document < "u" ? document.documentElement : null);
   if (n) {
-    n.style.setProperty(`--x-color-${a}`, e[5]), e.forEach((t, c) => {
-      n.style.setProperty(`--x-color-${a}-${c + 1}`, t);
+    n.style.setProperty(`--x-color-${i}`, e[5]), e.forEach((t, c) => {
+      n.style.setProperty(`--x-color-${i}-${c + 1}`, t);
     });
-    const l = g[a];
-    if (l)
-      for (const [t, c] of Object.entries(l))
-        n.style.setProperty(t, c);
+    const l = g[i];
+    if (l) {
+      const t = r ? E[i] : void 0;
+      for (const [c, h] of Object.entries(l))
+        n.style.setProperty(c, (t == null ? void 0 : t[c]) ?? h);
+    }
   }
   return e;
-}, L = (s = "primary") => {
-  const i = [`--x-color-${s}`, ...Array.from({ length: 9 }, (o, r) => `--x-color-${s}-${r + 1}`)], a = g[s];
-  return a ? [...i, ...Object.keys(a)] : i;
+}, W = (s = "primary") => {
+  const a = [`--x-color-${s}`, ...Array.from({ length: 9 }, (o, r) => `--x-color-${s}-${r + 1}`)], i = g[s];
+  return i ? [...a, ...Object.keys(i)] : a;
 };
 export {
   G as applyThemeColor,
-  I as generatePalette,
-  L as getThemeColorProperties,
-  H as hslToRgb,
-  A as parseColor,
-  $ as rgbToHsl,
+  L as generatePalette,
+  W as getThemeColorProperties,
+  S as hslToRgb,
+  $ as parseColor,
+  H as rgbToHsl,
   P as toHex
 };