refactor(theme): 统一黑金主题常量,减少硬编码
- theme/index.ts: 添加 COLORS, GLOW, GLASS 便捷常量
- theme/index.ts: 导出 glassCardStyle 可复用样式
- BusinessInfoPanel: 迁移到使用统一主题常量
迁移指南:
- import { COLORS, GLASS, glassCardStyle } from '@views/Company/theme'
- 替换 rgba(212, 175, 55, x) → COLORS.border / COLORS.borderHover
- 替换硬编码背景 → GLASS.bgDark / COLORS.bgGlass
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,12 @@
|
||||
/**
|
||||
* Company 页面 FUI 主题统一导出
|
||||
*
|
||||
* 使用方式:
|
||||
* import { COLORS, GLOW, GLASS } from '@views/Company/theme';
|
||||
* import { FUI_COLORS, FUI_THEME } from '@views/Company/theme';
|
||||
*/
|
||||
|
||||
// 主题配置
|
||||
// 完整主题对象
|
||||
export { default as FUI_THEME } from './fui';
|
||||
export {
|
||||
FUI_COLORS,
|
||||
@@ -15,3 +19,85 @@ export {
|
||||
|
||||
// 主题组件
|
||||
export * from './components';
|
||||
|
||||
// ============================================
|
||||
// 便捷常量导出(推荐使用)
|
||||
// ============================================
|
||||
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user