vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Company): 优化主题系统，添加颜色工具函数和 ESLint 规则

Browse Source 
- 新增 colorUtils.ts：提供 alpha()、hex()、fui.* 语义化颜色 API
- 新增 chartTheme：统一图表主题配置（坐标轴、tooltip、渐变等）
- 扩展 FUI_COLORS.line：完整的透明度级别（0.03-0.8）
- 新增 ESLint 规则：检测硬编码金色值（rgba/hex），warning 级别
- 迁移 chartOptions.ts：~15 处硬编码值改用工具函数
- 迁移 shared/styles.ts：~8 处硬编码值改用工具函数

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-24 19:29:53 +08:00
parent 6be2689b2e
commit 3a63702a8c
10 changed files with 434 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/Company/components/FinancialPanorama/utils/chartOptions.ts
View File

@@ -3,6 +3,7 @@
*/
import { formatUtils } from '@services/financialService';
import { alpha, fui, chartTheme } from '@views/Company/theme';
interface ChartDataItem {
period: string;
@@ -106,22 +107,22 @@ export const getComparisonChartOption = (
text: '营收与利润趋势',
left: 'center',
textStyle: {
color: '#D4AF37',
color: fui.gold,
fontSize: 16,
fontWeight: 'bold',
},
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(26, 32, 44, 0.95)',
borderColor: 'rgba(212, 175, 55, 0.3)',
backgroundColor: chartTheme.tooltip.bg,
borderColor: chartTheme.tooltip.border,
textStyle: {
color: '#E2E8F0',
},
axisPointer: {
type: 'cross',
crossStyle: {
color: 'rgba(212, 175, 55, 0.5)',
color: alpha('gold', 0.5),
},
},
},
@@ -144,7 +145,7 @@ export const getComparisonChartOption = (
data: revenueData.map((d) => d.period),
axisLine: {
lineStyle: {
color: 'rgba(212, 175, 55, 0.3)',
color: chartTheme.axisLine,
},
},
axisLabel: {
@@ -161,7 +162,7 @@ export const getComparisonChartOption = (
},
axisLine: {
lineStyle: {
color: 'rgba(212, 175, 55, 0.3)',
color: chartTheme.axisLine,
},
},
axisLabel: {
@@ -169,7 +170,7 @@ export const getComparisonChartOption = (
},
splitLine: {
lineStyle: {
color: 'rgba(212, 175, 55, 0.1)',
color: chartTheme.splitLine,
},
},
},
@@ -182,7 +183,7 @@ export const getComparisonChartOption = (
},
axisLine: {
lineStyle: {
color: 'rgba(212, 175, 55, 0.3)',
color: chartTheme.axisLine,
},
},
axisLabel: {
@@ -201,7 +202,7 @@ export const getComparisonChartOption = (
itemStyle: {
color: (params: { dataIndex: number; value: number }) => {
const idx = params.dataIndex;
if (idx === 0) return '#D4AF37'; // 金色作为基准
if (idx === 0) return fui.gold; // 金色作为基准
const prevValue = revenueData[idx - 1].value;
const currValue = params.value;
// 红涨绿跌
@@ -215,37 +216,18 @@ export const getComparisonChartOption = (
yAxisIndex: 1,
data: profitData.map((d) => d.value?.toFixed(2)),
smooth: true,
itemStyle: { color: '#D4AF37' },
lineStyle: { width: 2, color: '#D4AF37' },
itemStyle: { color: fui.gold },
lineStyle: { width: 2, color: fui.gold },
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(212, 175, 55, 0.3)' },
{ offset: 1, color: 'rgba(212, 175, 55, 0.05)' },
],
},
color: chartTheme.goldGradient(0.3, 0.05),
},
},
],
};
};
// 黑金主题饼图配色
const BLACK_GOLD_PIE_COLORS = [
'#D4AF37', // 金色
'#B8860B', // 深金色
'#FFD700', // 亮金色
'#DAA520', // 金菊色
'#CD853F', // 秘鲁色
'#F4A460', // 沙褐色
'#DEB887', // 实木色
'#D2691E', // 巧克力色
];
// 黑金主题饼图配色（使用 chartTheme 统一定义）
const BLACK_GOLD_PIE_COLORS = chartTheme.goldSeries;
/**
* 生成主营业务饼图配置 - 黑金主题
@@ -265,7 +247,7 @@ export const getMainBusinessPieOption = (
subtext: subtitle,
left: 'center',
textStyle: {
color: '#D4AF37',
color: fui.gold,
fontSize: 14,
},
subtextStyle: {
@@ -275,8 +257,8 @@ export const getMainBusinessPieOption = (
},
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(26, 32, 44, 0.95)',
borderColor: 'rgba(212, 175, 55, 0.3)',
backgroundColor: chartTheme.tooltip.bg,
borderColor: chartTheme.tooltip.border,
textStyle: {
color: '#E2E8F0',
},
@@ -310,14 +292,14 @@ export const getMainBusinessPieOption = (
},
labelLine: {
lineStyle: {
color: 'rgba(212, 175, 55, 0.5)',
color: alpha('gold', 0.5),
},
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(212, 175, 55, 0.5)',
shadowColor: alpha('gold', 0.5),
},
},
},

19
src/views/Company/components/MarketDataView/components/shared/styles.ts
View File

@@ -2,6 +2,7 @@
// 共享样式常量
import { darkGoldTheme } from '../../constants';
import { alpha, fui } from '@views/Company/theme';
import type { SystemStyleObject } from '@chakra-ui/react';
/**
@@ -21,7 +22,7 @@ export const darkGoldCardStyle: SystemStyleObject = {
*/
export const darkGoldCardHoverStyle: SystemStyleObject = {
borderColor: darkGoldTheme.borderHover,
boxShadow: '0 8px 30px rgba(212, 175, 55, 0.15)',
boxShadow: `0 8px 30px ${alpha('gold', 0.15)}`,
transform: 'translateY(-2px)',
};
@@ -47,7 +48,7 @@ export const dataRowStyle: SystemStyleObject = {
* 表格行悬停样式
*/
export const tableRowHoverStyle: SystemStyleObject = {
bg: 'rgba(212, 175, 55, 0.08)',
bg: alpha('gold', 0.08),
};
/**
@@ -55,7 +56,7 @@ export const tableRowHoverStyle: SystemStyleObject = {
*/
export const tableBorderStyle: SystemStyleObject = {
borderBottom: '1px solid',
borderColor: 'rgba(212, 175, 55, 0.1)',
borderColor: fui.border('subtle'),
};
/**
@@ -63,14 +64,14 @@ export const tableBorderStyle: SystemStyleObject = {
*/
export const financingRowStyle: SystemStyleObject = {
p: 3,
bg: 'rgba(212, 175, 55, 0.08)',
bg: alpha('gold', 0.08),
borderRadius: 'md',
border: '1px solid',
borderColor: 'rgba(212, 175, 55, 0.15)',
borderColor: alpha('gold', 0.15),
transition: 'all 0.2s',
_hover: {
bg: 'rgba(212, 175, 55, 0.12)',
borderColor: 'rgba(212, 175, 55, 0.3)',
bg: alpha('gold', 0.12),
borderColor: alpha('gold', 0.3),
},
};
@@ -127,8 +128,8 @@ export const sellRowStyle: SystemStyleObject = {
*/
export const dayCardStyle: SystemStyleObject = {
p: 4,
bg: 'rgba(212, 175, 55, 0.05)',
bg: alpha('gold', 0.05),
borderRadius: 'lg',
border: '1px solid',
borderColor: 'rgba(212, 175, 55, 0.15)',
borderColor: alpha('gold', 0.15),
};