@ant-design/agentic-ui 2.29.3 → 2.29.4-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -82,7 +82,7 @@ import { Line } from "react-chartjs-2";
82
82
  import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
83
83
  import { defaultColorList } from "../const";
84
84
  import { useChartDataFilter, useChartStatistics, useChartTheme, useResponsiveSize } from "../hooks";
85
- import { extractAndSortXValues, findDataPointByXValue, hexToRgba, registerLineChartComponents } from "../utils";
85
+ import { extractAndSortXValues, findDataPointByXValue, hexToRgba, registerLineChartComponents, resolveCssVariable } from "../utils";
86
86
  import { useStyle } from "./style";
87
87
  /**
88
88
  * 面积图组件
@@ -166,6 +166,8 @@ import { useStyle } from "./style";
166
166
  var datasets = types.map(function(type, index) {
167
167
  var provided = color;
168
168
  var baseColor = Array.isArray(provided) ? provided[index % provided.length] || defaultColorList[index % defaultColorList.length] : provided || defaultColorList[index % defaultColorList.length];
169
+ // 解析 CSS 变量为实际颜色值(Canvas 需要实际颜色值)
170
+ var resolvedColor = resolveCssVariable(baseColor);
169
171
  // 为每个类型收集数据点
170
172
  var typeData = xValues.map(function(x) {
171
173
  var dataPoint = findDataPointByXValue(filteredData, x, type);
@@ -176,19 +178,20 @@ import { useStyle } from "./style";
176
178
  return {
177
179
  label: type || '默认',
178
180
  data: typeData,
179
- borderColor: baseColor,
181
+ borderColor: resolvedColor,
180
182
  backgroundColor: function(ctx) {
181
183
  var chart = ctx.chart;
182
184
  var chartArea = chart.chartArea;
183
- if (!chartArea) return hexToRgba(baseColor, 0.2);
185
+ // 对于所有颜色(包括解析后的 CSS 变量),使用渐变效果
186
+ if (!chartArea) return hexToRgba(resolvedColor, 0.2);
184
187
  var top = chartArea.top, bottom = chartArea.bottom;
185
188
  var gradient = chart.ctx.createLinearGradient(0, top, 0, bottom);
186
189
  // 顶部颜色更实,向下逐渐透明,形成柔和的面积过渡
187
- gradient.addColorStop(0, hexToRgba(baseColor, 0.28));
188
- gradient.addColorStop(1, hexToRgba(baseColor, 0.05));
190
+ gradient.addColorStop(0, hexToRgba(resolvedColor, 0.28));
191
+ gradient.addColorStop(1, hexToRgba(resolvedColor, 0.05));
189
192
  return gradient;
190
193
  },
191
- pointBackgroundColor: baseColor,
194
+ pointBackgroundColor: resolvedColor,
192
195
  pointBorderColor: '#fff',
193
196
  pointBorderWidth: 1,
194
197
  borderWidth: 3,
@@ -120,7 +120,7 @@ import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
120
120
  import { Bar } from "react-chartjs-2";
121
121
  import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
122
122
  import { defaultColorList } from "../const";
123
- import { extractAndSortXValues, findDataPointByXValue, hexToRgba } from "../utils";
123
+ import { extractAndSortXValues, findDataPointByXValue, hexToRgba, resolveCssVariable } from "../utils";
124
124
  import { useStyle } from "./style";
125
125
  /**
126
126
  * @fileoverview 柱状图组件文件
@@ -305,6 +305,13 @@ var BarChart = function(param) {
305
305
  return Array.isArray(provided) ? provided[i] || provided[0] || defaultColorList[i % defaultColorList.length] : provided || defaultColorList[i % defaultColorList.length];
306
306
  };
307
307
  var baseColor = pickByIndex(index);
308
+ // 解析 CSS 变量为实际颜色值(Canvas 需要实际颜色值)
309
+ var resolvedBaseColor = resolveCssVariable(baseColor);
310
+ var resolvedProvidedColors = Array.isArray(provided) ? provided.map(function(c) {
311
+ return resolveCssVariable(c);
312
+ }) : provided ? [
313
+ resolveCssVariable(provided)
314
+ ] : null;
308
315
  // 为每个类型收集数据点
309
316
  var typeData = xValues.map(function(x) {
310
317
  var dataPoint = findDataPointByXValue(filteredData, x, type);
@@ -318,12 +325,12 @@ var BarChart = function(param) {
318
325
  borderColor: function(ctx) {
319
326
  var parsed = ctx.parsed;
320
327
  var value = indexAxis === 'y' ? typeof (parsed === null || parsed === void 0 ? void 0 : parsed.x) === 'number' ? parsed.x : 0 : typeof (parsed === null || parsed === void 0 ? void 0 : parsed.y) === 'number' ? parsed.y : 0;
321
- var base = baseColor;
328
+ var base = resolvedBaseColor;
322
329
  if (!color && isDiverging) {
323
330
  base = value >= 0 ? POSITIVE_COLOR_HEX : NEGATIVE_COLOR_HEX;
324
- } else if (Array.isArray(color) && isDiverging) {
325
- var pos = color[0] || baseColor;
326
- var neg = color[1] || color[0] || baseColor;
331
+ } else if (resolvedProvidedColors && isDiverging) {
332
+ var pos = resolvedProvidedColors[0] || resolvedBaseColor;
333
+ var neg = resolvedProvidedColors[1] || resolvedProvidedColors[0] || resolvedBaseColor;
327
334
  base = value >= 0 ? pos : neg;
328
335
  }
329
336
  return hexToRgba(base, 0.95);
@@ -332,23 +339,23 @@ var BarChart = function(param) {
332
339
  var chart = ctx.chart;
333
340
  var chartArea = chart.chartArea;
334
341
  var parsed = ctx.parsed;
335
- if (!chartArea) return hexToRgba(baseColor, 0.6);
342
+ if (!chartArea) return hexToRgba(resolvedBaseColor, 0.6);
336
343
  var xScale = chart.scales['x'];
337
344
  var yScale = chart.scales['y'];
338
345
  var startAlpha = 0.65;
339
346
  var endAlpha = 0.95;
340
347
  // 安全检查:确保坐标轴已正确初始化
341
348
  if (!xScale || !yScale || typeof xScale.getPixelForValue !== 'function' || typeof yScale.getPixelForValue !== 'function') {
342
- return hexToRgba(baseColor, 0.6);
349
+ return hexToRgba(resolvedBaseColor, 0.6);
343
350
  }
344
351
  if (indexAxis === 'y') {
345
352
  var value = typeof (parsed === null || parsed === void 0 ? void 0 : parsed.x) === 'number' ? parsed.x : 0;
346
- var base = baseColor;
353
+ var base = resolvedBaseColor;
347
354
  if (!color && isDiverging) {
348
355
  base = value >= 0 ? POSITIVE_COLOR_HEX : NEGATIVE_COLOR_HEX;
349
- } else if (Array.isArray(color) && isDiverging) {
350
- var pos = color[0] || baseColor;
351
- var neg = color[1] || color[0] || baseColor;
356
+ } else if (resolvedProvidedColors && isDiverging) {
357
+ var pos = resolvedProvidedColors[0] || resolvedBaseColor;
358
+ var neg = resolvedProvidedColors[1] || resolvedProvidedColors[0] || resolvedBaseColor;
352
359
  base = value >= 0 ? pos : neg;
353
360
  }
354
361
  // 当值为 0 时,直接返回纯色,避免渐变范围为 0 导致的显示问题
@@ -369,12 +376,12 @@ var BarChart = function(param) {
369
376
  return gradient;
370
377
  }
371
378
  var value1 = typeof (parsed === null || parsed === void 0 ? void 0 : parsed.y) === 'number' ? parsed.y : 0;
372
- var base1 = baseColor;
379
+ var base1 = resolvedBaseColor;
373
380
  if (!color && isDiverging) {
374
381
  base1 = value1 >= 0 ? POSITIVE_COLOR_HEX : NEGATIVE_COLOR_HEX;
375
- } else if (Array.isArray(color) && isDiverging) {
376
- var pos1 = color[0] || baseColor;
377
- var neg1 = color[1] || color[0] || baseColor;
382
+ } else if (resolvedProvidedColors && isDiverging) {
383
+ var pos1 = resolvedProvidedColors[0] || resolvedBaseColor;
384
+ var neg1 = resolvedProvidedColors[1] || resolvedProvidedColors[0] || resolvedBaseColor;
378
385
  base1 = value1 >= 0 ? pos1 : neg1;
379
386
  }
380
387
  // 当值为 0 时,直接返回纯色,避免渐变范围为 0 导致的显示问题
@@ -142,6 +142,7 @@ import React, { useContext, useMemo, useRef, useState } from "react";
142
142
  import { Doughnut } from "react-chartjs-2";
143
143
  import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
144
144
  import { defaultColorList } from "../const";
145
+ import { resolveCssVariable } from "../utils";
145
146
  import { SINGLE_MODE_DESKTOP_CUTOUT, SINGLE_MODE_MOBILE_CUTOUT } from "./constants";
146
147
  import { useAutoCategory, useFilterLabels, useMobile, useResponsiveDimensions } from "./hooks";
147
148
  import LegendView from "./Legend";
@@ -471,25 +472,30 @@ import { useStyle } from "./style";
471
472
  return sum + (Number.isFinite(v) ? v : 0);
472
473
  }, 0);
473
474
  var backgroundColors = cfg.backgroundColor || defaultColorList;
475
+ // 解析 CSS 变量为实际颜色值(Canvas 需要实际颜色值)
476
+ var resolvedBackgroundColors = backgroundColors.map(function(color) {
477
+ return resolveCssVariable(color);
478
+ });
474
479
  var _cfg_backgroundColor_;
475
480
  var mainColor = (_cfg_backgroundColor_ = (_cfg_backgroundColor = cfg.backgroundColor) === null || _cfg_backgroundColor === void 0 ? void 0 : _cfg_backgroundColor[0]) !== null && _cfg_backgroundColor_ !== void 0 ? _cfg_backgroundColor_ : defaultColorList[idx % defaultColorList.length];
481
+ var resolvedMainColor = resolveCssVariable(mainColor);
476
482
  var chartJsData = {
477
483
  labels: labels,
478
484
  datasets: [
479
485
  {
480
486
  data: safeValues,
481
487
  backgroundColor: isSingleValueMode ? [
482
- mainColor,
488
+ resolvedMainColor,
483
489
  'transparent'
484
- ] : backgroundColors.slice(0, values.length),
490
+ ] : resolvedBackgroundColors.slice(0, values.length),
485
491
  borderColor: isSingleValueMode ? [
486
492
  cfg.borderColor || '#fff',
487
493
  'transparent'
488
494
  ] : cfg.borderColor || '#fff',
489
495
  hoverBackgroundColor: isSingleValueMode ? [
490
- mainColor,
496
+ resolvedMainColor,
491
497
  'transparent'
492
- ] : backgroundColors.slice(0, values.length),
498
+ ] : resolvedBackgroundColors.slice(0, values.length),
493
499
  hoverBorderColor: isSingleValueMode ? [
494
500
  cfg.borderColor || '#fff',
495
501
  'transparent'
@@ -143,7 +143,7 @@ import { Bar } from "react-chartjs-2";
143
143
  import ChartStatistic from "../ChartStatistic";
144
144
  import { ChartContainer, ChartFilter, ChartToolBar, downloadChart } from "../components";
145
145
  import { defaultColorList } from "../const";
146
- import { findDataPointByXValue, isXValueEqual, toNumber } from "../utils";
146
+ import { findDataPointByXValue, isXValueEqual, resolveCssVariable, toNumber } from "../utils";
147
147
  import { useStyle } from "./style";
148
148
  var funnelChartComponentsRegistered = false;
149
149
  var FunnelChart = function(_param) {
@@ -329,6 +329,8 @@ var FunnelChart = function(_param) {
329
329
  // 计算数据:使用浮动条 [-w/2, w/2] 居中呈现,形成对称“漏斗条”
330
330
  var processedData = useMemo(function() {
331
331
  var baseColor = color || defaultColorList[0];
332
+ // 解析 CSS 变量为实际颜色值(Canvas 需要实际颜色值)
333
+ var resolvedBaseColor = resolveCssVariable(baseColor);
332
334
  var labels = stages.map(function(x) {
333
335
  return x.toString();
334
336
  });
@@ -397,7 +399,7 @@ var FunnelChart = function(_param) {
397
399
  var count = Math.max(1, stages.length - 1);
398
400
  var colorList = stages.map(function(_, i) {
399
401
  var t = i / count * 0.6; // 限制变浅上限,避免变白
400
- return lighten(baseColor, t);
402
+ return lighten(resolvedBaseColor, t);
401
403
  });
402
404
  return {
403
405
  labels: labels,
@@ -109,7 +109,7 @@ import { Line } from "react-chartjs-2";
109
109
  import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
110
110
  import { defaultColorList } from "../const";
111
111
  import { useChartDataFilter, useChartStatistics, useChartTheme, useResponsiveSize } from "../hooks";
112
- import { extractAndSortXValues, findDataPointByXValue, registerLineChartComponents } from "../utils";
112
+ import { extractAndSortXValues, findDataPointByXValue, hexToRgba, registerLineChartComponents, resolveCssVariable } from "../utils";
113
113
  import { useStyle } from "./style";
114
114
  var LineChart = function(_param) {
115
115
  var title = _param.title, data = _param.data, _param_width = _param.width, width = _param_width === void 0 ? 600 : _param_width, _param_height = _param.height, height = _param_height === void 0 ? 400 : _param_height, className = _param.className, classNamesProp = _param.classNames, dataTime = _param.dataTime, _param_theme = _param.theme, theme = _param_theme === void 0 ? 'light' : _param_theme, color = _param.color, _param_showLegend = _param.showLegend, showLegend = _param_showLegend === void 0 ? true : _param_showLegend, _param_legendPosition = _param.legendPosition, legendPosition = _param_legendPosition === void 0 ? 'bottom' : _param_legendPosition, _param_legendAlign = _param.legendAlign, legendAlign = _param_legendAlign === void 0 ? 'start' : _param_legendAlign, _param_showGrid = _param.showGrid, showGrid = _param_showGrid === void 0 ? true : _param_showGrid, _param_xPosition = _param.xPosition, xPosition = _param_xPosition === void 0 ? 'bottom' : _param_xPosition, _param_yPosition = _param.yPosition, yPosition = _param_yPosition === void 0 ? 'left' : _param_yPosition, _param_hiddenX = _param.hiddenX, hiddenX = _param_hiddenX === void 0 ? false : _param_hiddenX, _param_hiddenY = _param.hiddenY, hiddenY = _param_hiddenY === void 0 ? false : _param_hiddenY, toolbarExtra = _param.toolbarExtra, _param_renderFilterInToolbar = _param.renderFilterInToolbar, renderFilterInToolbar = _param_renderFilterInToolbar === void 0 ? false : _param_renderFilterInToolbar, statisticConfig = _param.statistic, _param_loading = _param.loading, loading = _param_loading === void 0 ? false : _param_loading, props = _object_without_properties(_param, [
@@ -190,6 +190,8 @@ var LineChart = function(_param) {
190
190
  var datasets = types.map(function(type, index) {
191
191
  var provided = color;
192
192
  var baseColor = Array.isArray(provided) ? provided[index % provided.length] || defaultColorList[index % defaultColorList.length] : provided || defaultColorList[index % defaultColorList.length];
193
+ // 解析 CSS 变量为实际颜色值(Canvas 需要实际颜色值)
194
+ var resolvedColor = resolveCssVariable(baseColor);
193
195
  // 为每个类型收集数据点
194
196
  var typeData = xValues.map(function(x) {
195
197
  var dataPoint = findDataPointByXValue(filteredData, x, type);
@@ -200,9 +202,9 @@ var LineChart = function(_param) {
200
202
  return {
201
203
  label: type || '默认',
202
204
  data: typeData,
203
- borderColor: baseColor,
204
- backgroundColor: "".concat(baseColor, "33"),
205
- pointBackgroundColor: baseColor,
205
+ borderColor: resolvedColor,
206
+ backgroundColor: hexToRgba(resolvedColor, 0.2),
207
+ pointBackgroundColor: resolvedColor,
206
208
  pointBorderColor: '#fff',
207
209
  pointBorderWidth: 1,
208
210
  borderWidth: 3,
@@ -135,6 +135,7 @@ import { Radar } from "react-chartjs-2";
135
135
  import ChartStatistic from "../ChartStatistic";
136
136
  import { ChartContainer, ChartFilter, ChartToolBar, downloadChart } from "../components";
137
137
  import { defaultColorList } from "../const";
138
+ import { hexToRgba, resolveCssVariable } from "../utils";
138
139
  import { useStyle } from "./style";
139
140
  var radarChartComponentsRegistered = false;
140
141
  var RadarChart = function(_param) {
@@ -319,13 +320,15 @@ var RadarChart = function(_param) {
319
320
  var safeIndex = Math.max(0, index % defaultColorList.length);
320
321
  var safeDefaultColor = defaultColorList[safeIndex] || '#1677ff';
321
322
  var finalColor = baseColor || safeDefaultColor;
323
+ // 解析 CSS 变量为实际颜色值(Canvas 需要实际颜色值)
324
+ var resolvedColor = resolveCssVariable(finalColor);
322
325
  return {
323
326
  label: type || '默认',
324
327
  data: scores,
325
- borderColor: finalColor,
326
- backgroundColor: "".concat(finalColor, "20"),
328
+ borderColor: resolvedColor,
329
+ backgroundColor: hexToRgba(resolvedColor, 0.125),
327
330
  borderWidth: isMobile ? 1.5 : 2,
328
- pointBackgroundColor: finalColor,
331
+ pointBackgroundColor: resolvedColor,
329
332
  pointBorderColor: '#fff',
330
333
  pointBorderWidth: isMobile ? 1 : 2,
331
334
  pointRadius: isMobile ? 3 : 4,
@@ -135,6 +135,7 @@ import { Scatter } from "react-chartjs-2";
135
135
  import ChartStatistic from "../ChartStatistic";
136
136
  import { ChartContainer, ChartFilter, ChartToolBar, downloadChart } from "../components";
137
137
  import { defaultColorList } from "../const";
138
+ import { hexToRgba, resolveCssVariable } from "../utils";
138
139
  import { useStyle } from "./style";
139
140
  var scatterChartComponentsRegistered = false;
140
141
  var ScatterChart = function(_param) {
@@ -337,11 +338,13 @@ var ScatterChart = function(_param) {
337
338
  var safeIndex = Math.max(0, index % defaultColorList.length);
338
339
  var safeDefaultColor = defaultColorList[safeIndex] || '#1677ff';
339
340
  var finalColor = baseColor || safeDefaultColor;
341
+ // 解析 CSS 变量为实际颜色值(Canvas 需要实际颜色值)
342
+ var resolvedColor = resolveCssVariable(finalColor);
340
343
  return {
341
344
  label: type || '默认',
342
345
  data: coordinates,
343
- backgroundColor: "".concat(finalColor, "99"),
344
- borderColor: finalColor,
346
+ backgroundColor: hexToRgba(resolvedColor, 0.6),
347
+ borderColor: resolvedColor,
345
348
  pointRadius: isMobile ? 4 : 6,
346
349
  pointHoverRadius: isMobile ? 6 : 8
347
350
  };
@@ -287,11 +287,26 @@ export declare const getDataHash: (data: any[]) => string;
287
287
  */
288
288
  export declare const isConfigEqual: (config1: any, config2: any) => boolean;
289
289
  /**
290
- * 将十六进制颜色转换为带透明度的 RGBA 字符串
290
+ * 从浏览器 DOM 中解析 CSS 变量的实际颜色值
291
291
  *
292
- * 支持3位和6位十六进制颜色格式,并添加透明度。
292
+ * @param {string} cssVar - CSS 变量表达式(如 'var(--color-blue)')
293
+ * @returns {string} 解析后的颜色值(如 '#1d7afc')或原值
293
294
  *
294
- * @param {string} hex - 十六进制颜色值(如 '#ff0000' 或 '#f00')
295
+ * @example
296
+ * ```typescript
297
+ * resolveCssVariable('var(--color-blue-control-fill-primary)'); // '#1d7afc'
298
+ * resolveCssVariable('#ff0000'); // '#ff0000'
299
+ * ```
300
+ *
301
+ * @since 1.0.0
302
+ */
303
+ export declare const resolveCssVariable: (cssVar: string) => string;
304
+ /**
305
+ * 将十六进制颜色或CSS变量转换为带透明度的 RGBA 字符串
306
+ *
307
+ * 支持3位和6位十六进制颜色格式、CSS变量(如 var(--color-name)),并添加透明度。
308
+ *
309
+ * @param {string} color - 颜色值(如 '#ff0000'、'#f00' 或 'var(--color-blue)')
295
310
  * @param {number} alpha - 透明度值(0-1之间)
296
311
  * @returns {string} RGBA 颜色字符串
297
312
  *
@@ -299,9 +314,10 @@ export declare const isConfigEqual: (config1: any, config2: any) => boolean;
299
314
  * ```typescript
300
315
  * hexToRgba('#ff0000', 0.5); // 'rgba(255, 0, 0, 0.5)'
301
316
  * hexToRgba('#f00', 0.8); // 'rgba(255, 0, 0, 0.8)'
317
+ * hexToRgba('var(--color-blue)', 0.5); // 'rgba(29, 122, 252, 0.5)'
302
318
  * ```
303
319
  *
304
320
  * @since 1.0.0
305
321
  */
306
- export declare const hexToRgba: (hex: string, alpha: number) => string;
322
+ export declare const hexToRgba: (color: string, alpha: number) => string;
307
323
  export { registerBarChartComponents, registerChartComponents, registerLineChartComponents, } from './utils/registerChart';
@@ -437,11 +437,68 @@ var intl = new Intl.NumberFormat('en-US', {
437
437
  return true;
438
438
  };
439
439
  /**
440
- * 将十六进制颜色转换为带透明度的 RGBA 字符串
440
+ * RGB/RGBA 颜色字符串转换为十六进制格式
441
441
  *
442
- * 支持3位和6位十六进制颜色格式,并添加透明度。
442
+ * @param {string} rgb - RGB/RGBA 颜色字符串(如 'rgb(29, 122, 252)' 或 'rgba(29, 122, 252, 0.5)')
443
+ * @returns {string} 十六进制颜色值(如 '#1d7afc')
443
444
  *
444
- * @param {string} hex - 十六进制颜色值(如 '#ff0000' 或 '#f00')
445
+ * @since 1.0.0
446
+ */ var rgbToHex = function(rgb) {
447
+ var match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
448
+ if (!match) return rgb;
449
+ var r = parseInt(match[1], 10);
450
+ var g = parseInt(match[2], 10);
451
+ var b = parseInt(match[3], 10);
452
+ return "#".concat(((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1));
453
+ };
454
+ /**
455
+ * 从浏览器 DOM 中解析 CSS 变量的实际颜色值
456
+ *
457
+ * @param {string} cssVar - CSS 变量表达式(如 'var(--color-blue)')
458
+ * @returns {string} 解析后的颜色值(如 '#1d7afc')或原值
459
+ *
460
+ * @example
461
+ * ```typescript
462
+ * resolveCssVariable('var(--color-blue-control-fill-primary)'); // '#1d7afc'
463
+ * resolveCssVariable('#ff0000'); // '#ff0000'
464
+ * ```
465
+ *
466
+ * @since 1.0.0
467
+ */ export var resolveCssVariable = function(cssVar) {
468
+ // 如果不是 CSS 变量,直接返回
469
+ if (!cssVar.trim().startsWith('var(')) {
470
+ return cssVar;
471
+ }
472
+ // 提取变量名,如 'var(--color-blue)' => '--color-blue'
473
+ var match = cssVar.match(/var\((--[^)]+)\)/);
474
+ if (!match) {
475
+ return cssVar;
476
+ }
477
+ // 从 DOM 中获取计算后的样式值
478
+ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
479
+ try {
480
+ // 创建临时元素来获取计算后的颜色值
481
+ var tempEl = document.createElement('div');
482
+ tempEl.style.color = cssVar;
483
+ document.body.appendChild(tempEl);
484
+ var computedColor = window.getComputedStyle(tempEl).color;
485
+ document.body.removeChild(tempEl);
486
+ // 如果解析成功,将 rgb/rgba 转换为十六进制
487
+ if (computedColor && computedColor !== cssVar) {
488
+ return rgbToHex(computedColor);
489
+ }
490
+ } catch (e) {
491
+ console.warn("Failed to resolve CSS variable: ".concat(cssVar), e);
492
+ }
493
+ }
494
+ return cssVar;
495
+ };
496
+ /**
497
+ * 将十六进制颜色或CSS变量转换为带透明度的 RGBA 字符串
498
+ *
499
+ * 支持3位和6位十六进制颜色格式、CSS变量(如 var(--color-name)),并添加透明度。
500
+ *
501
+ * @param {string} color - 颜色值(如 '#ff0000'、'#f00' 或 'var(--color-blue)')
445
502
  * @param {number} alpha - 透明度值(0-1之间)
446
503
  * @returns {string} RGBA 颜色字符串
447
504
  *
@@ -449,11 +506,15 @@ var intl = new Intl.NumberFormat('en-US', {
449
506
  * ```typescript
450
507
  * hexToRgba('#ff0000', 0.5); // 'rgba(255, 0, 0, 0.5)'
451
508
  * hexToRgba('#f00', 0.8); // 'rgba(255, 0, 0, 0.8)'
509
+ * hexToRgba('var(--color-blue)', 0.5); // 'rgba(29, 122, 252, 0.5)'
452
510
  * ```
453
511
  *
454
512
  * @since 1.0.0
455
- */ export var hexToRgba = function(hex, alpha) {
456
- var sanitized = hex.replace('#', '');
513
+ */ export var hexToRgba = function(color, alpha) {
514
+ // 解析 CSS 变量为实际颜色值
515
+ var resolvedColor = resolveCssVariable(color);
516
+ // 处理十六进制颜色
517
+ var sanitized = resolvedColor.replace('#', '');
457
518
  var isShort = sanitized.length === 3;
458
519
  var r = parseInt(isShort ? sanitized[0] + sanitized[0] : sanitized.slice(0, 2), 16);
459
520
  var g = parseInt(isShort ? sanitized[1] + sanitized[1] : sanitized.slice(2, 4), 16);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ant-design/agentic-ui",
3
- "version": "2.29.3",
3
+ "version": "2.29.4-beta.0",
4
4
  "description": "面向智能体的 UI 组件库,提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
5
5
  "repository": "git@github.com:ant-design/agentic-ui.git",
6
6
  "license": "MIT",