3a63702a8c
- 新增 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>
121 lines
2.7 KiB
TypeScript
121 lines
2.7 KiB
TypeScript
/**
|
|
* Company 页面 FUI 主题统一导出
|
|
*
|
|
* 使用方式：
|
|
* import { COLORS, GLOW, GLASS } from '@views/Company/theme';
|
|
* import { FUI_COLORS, FUI_THEME } from '@views/Company/theme';
|
|
* import { alpha, fui, chartTheme } from '@views/Company/theme';
|
|
*/
|
|
|
|
// 完整主题对象
|
|
export { default as FUI_THEME } from './fui';
|
|
export {
|
|
FUI_COLORS,
|
|
FUI_GLOW,
|
|
FUI_GLASS,
|
|
FUI_ANIMATION,
|
|
FUI_KEYFRAMES,
|
|
FUI_STYLES,
|
|
} from './fui';
|
|
|
|
// 主题组件
|
|
export * from './components';
|
|
|
|
// ============================================
|
|
// 工具函数导出（推荐使用）
|
|
// ============================================
|
|
|
|
export {
|
|
// 核心工具
|
|
alpha,
|
|
hex,
|
|
fui,
|
|
BASE_COLORS,
|
|
OPACITY,
|
|
chartTheme,
|
|
// 类型
|
|
type ColorName,
|
|
} from './utils';
|
|
|
|
// ============================================
|
|
// 便捷常量导出（推荐使用）
|
|
// ============================================
|
|
|
|
import { FUI_COLORS, FUI_GLOW, FUI_GLASS } from './fui';
|
|
|
|
/**
|
|
* 常用颜色常量
|
|
* 用于替换硬编码的 rgba(212, 175, 55, x) 等值
|
|
*/
|
|
export const COLORS = {
|
|
// 金色系
|
|
gold: '#D4AF37',
|
|
goldLight: '#F0D78C',
|
|
goldDark: '#B8960C',
|
|
goldMuted: 'rgba(212, 175, 55, 0.5)',
|
|
|
|
// 背景
|
|
bgDeep: '#0A0A14',
|
|
bgPrimary: '#0F0F1A',
|
|
bgElevated: '#1A1A2E',
|
|
bgSurface: '#252540',
|
|
bgOverlay: 'rgba(26, 26, 46, 0.95)',
|
|
bgGlass: 'rgba(15, 18, 35, 0.6)',
|
|
|
|
// 边框
|
|
border: 'rgba(212, 175, 55, 0.2)',
|
|
borderHover: 'rgba(212, 175, 55, 0.4)',
|
|
borderSubtle: 'rgba(212, 175, 55, 0.1)',
|
|
borderEmphasis: 'rgba(212, 175, 55, 0.6)',
|
|
|
|
// 文字
|
|
textPrimary: 'rgba(255, 255, 255, 0.95)',
|
|
textSecondary: 'rgba(255, 255, 255, 0.7)',
|
|
textMuted: 'rgba(255, 255, 255, 0.5)',
|
|
textDim: 'rgba(255, 255, 255, 0.3)',
|
|
|
|
// 状态
|
|
positive: '#EF4444',
|
|
negative: '#22C55E',
|
|
warning: '#F59E0B',
|
|
info: '#3B82F6',
|
|
} as const;
|
|
|
|
/**
|
|
* 发光效果
|
|
*/
|
|
export const GLOW = {
|
|
goldSm: '0 0 8px rgba(212, 175, 55, 0.3)',
|
|
goldMd: '0 0 16px rgba(212, 175, 55, 0.4)',
|
|
goldLg: '0 0 32px rgba(212, 175, 55, 0.5)',
|
|
goldPulse: '0 0 20px rgba(212, 175, 55, 0.6), 0 0 40px rgba(212, 175, 55, 0.3)',
|
|
textGold: '0 0 10px rgba(212, 175, 55, 0.5)',
|
|
} as const;
|
|
|
|
/**
|
|
* 玻璃效果
|
|
*/
|
|
export const GLASS = {
|
|
blur: 'blur(16px)',
|
|
blurSm: 'blur(8px)',
|
|
blurLg: 'blur(24px)',
|
|
bgLight: 'rgba(255, 255, 255, 0.03)',
|
|
bgDark: 'rgba(0, 0, 0, 0.2)',
|
|
bgGold: 'rgba(212, 175, 55, 0.05)',
|
|
} as const;
|
|
|
|
/**
|
|
* 玻璃态卡片样式（可直接 spread 到组件）
|
|
*/
|
|
export const glassCardStyle = {
|
|
bg: COLORS.bgGlass,
|
|
borderRadius: '12px',
|
|
border: `1px solid ${COLORS.border}`,
|
|
backdropFilter: GLASS.blur,
|
|
transition: 'all 0.2s ease',
|
|
_hover: {
|
|
borderColor: COLORS.borderHover,
|
|
bg: 'rgba(15, 18, 35, 0.7)',
|
|
},
|
|
} as const;
|