@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.
- package/dist/Plugins/chart/AreaChart/index.js +9 -6
- package/dist/Plugins/chart/BarChart/index.js +22 -15
- package/dist/Plugins/chart/DonutChart/index.js +10 -4
- package/dist/Plugins/chart/FunnelChart/index.js +4 -2
- package/dist/Plugins/chart/LineChart/index.js +6 -4
- package/dist/Plugins/chart/RadarChart/index.js +6 -3
- package/dist/Plugins/chart/ScatterChart/index.js +5 -2
- package/dist/Plugins/chart/utils.d.ts +20 -4
- package/dist/Plugins/chart/utils.js +66 -5
- package/package.json +1 -1
|
@@ -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:
|
|
181
|
+
borderColor: resolvedColor,
|
|
180
182
|
backgroundColor: function(ctx) {
|
|
181
183
|
var chart = ctx.chart;
|
|
182
184
|
var chartArea = chart.chartArea;
|
|
183
|
-
|
|
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(
|
|
188
|
-
gradient.addColorStop(1, hexToRgba(
|
|
190
|
+
gradient.addColorStop(0, hexToRgba(resolvedColor, 0.28));
|
|
191
|
+
gradient.addColorStop(1, hexToRgba(resolvedColor, 0.05));
|
|
189
192
|
return gradient;
|
|
190
193
|
},
|
|
191
|
-
pointBackgroundColor:
|
|
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 =
|
|
328
|
+
var base = resolvedBaseColor;
|
|
322
329
|
if (!color && isDiverging) {
|
|
323
330
|
base = value >= 0 ? POSITIVE_COLOR_HEX : NEGATIVE_COLOR_HEX;
|
|
324
|
-
} else if (
|
|
325
|
-
var pos =
|
|
326
|
-
var neg =
|
|
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(
|
|
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(
|
|
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 =
|
|
353
|
+
var base = resolvedBaseColor;
|
|
347
354
|
if (!color && isDiverging) {
|
|
348
355
|
base = value >= 0 ? POSITIVE_COLOR_HEX : NEGATIVE_COLOR_HEX;
|
|
349
|
-
} else if (
|
|
350
|
-
var pos =
|
|
351
|
-
var neg =
|
|
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 =
|
|
379
|
+
var base1 = resolvedBaseColor;
|
|
373
380
|
if (!color && isDiverging) {
|
|
374
381
|
base1 = value1 >= 0 ? POSITIVE_COLOR_HEX : NEGATIVE_COLOR_HEX;
|
|
375
|
-
} else if (
|
|
376
|
-
var pos1 =
|
|
377
|
-
var neg1 =
|
|
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
|
-
|
|
488
|
+
resolvedMainColor,
|
|
483
489
|
'transparent'
|
|
484
|
-
] :
|
|
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
|
-
|
|
496
|
+
resolvedMainColor,
|
|
491
497
|
'transparent'
|
|
492
|
-
] :
|
|
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(
|
|
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:
|
|
204
|
-
backgroundColor:
|
|
205
|
-
pointBackgroundColor:
|
|
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:
|
|
326
|
-
backgroundColor:
|
|
328
|
+
borderColor: resolvedColor,
|
|
329
|
+
backgroundColor: hexToRgba(resolvedColor, 0.125),
|
|
327
330
|
borderWidth: isMobile ? 1.5 : 2,
|
|
328
|
-
pointBackgroundColor:
|
|
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:
|
|
344
|
-
borderColor:
|
|
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
|
-
*
|
|
290
|
+
* 从浏览器 DOM 中解析 CSS 变量的实际颜色值
|
|
291
291
|
*
|
|
292
|
-
*
|
|
292
|
+
* @param {string} cssVar - CSS 变量表达式(如 'var(--color-blue)')
|
|
293
|
+
* @returns {string} 解析后的颜色值(如 '#1d7afc')或原值
|
|
293
294
|
*
|
|
294
|
-
* @
|
|
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: (
|
|
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
|
-
*
|
|
440
|
+
* 将 RGB/RGBA 颜色字符串转换为十六进制格式
|
|
441
441
|
*
|
|
442
|
-
*
|
|
442
|
+
* @param {string} rgb - RGB/RGBA 颜色字符串(如 'rgb(29, 122, 252)' 或 'rgba(29, 122, 252, 0.5)')
|
|
443
|
+
* @returns {string} 十六进制颜色值(如 '#1d7afc')
|
|
443
444
|
*
|
|
444
|
-
* @
|
|
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(
|
|
456
|
-
|
|
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