STYLES_REFACTOR.md

页面样式重构说明

重构概述

将各个页面组件中的 styled-components 抽取到独立的样式文件中，提高代码的可维护性和可读性，实现样式与逻辑的分离。

新增文件结构

页面样式文件夹

src/pages/styles/
├── HomePage.styled.ts      # 首页样式组件
├── ChartsPage.styled.ts    # 图表页样式组件
├── AnalysisPage.styled.ts  # 分析页样式组件
└── SettingsPage.styled.ts  # 设置页样式组件

样式组件分类

1. HomePage.styled.ts

功能：首页相关的所有样式组件 包含组件：

• PageContainer - 页面容器
• HeroSection - 英雄区域
• HeroTitle - 英雄标题
• HeroSubtitle - 英雄副标题
• FeatureGrid - 功能特性网格
• FeatureCard - 功能卡片
• FeatureIcon - 功能图标
• FeatureTitle - 功能标题
• FeatureDescription - 功能描述

2. ChartsPage.styled.ts

功能：图表页相关的样式组件 包含组件：

• PageContainer - 页面容器
• PageTitle - 页面标题
• PageSubtitle - 页面副标题

3. AnalysisPage.styled.ts

功能：分析页相关的样式组件 包含组件：

• PageContainer - 页面容器
• PageTitle - 页面标题
• AnalysisGrid - 分析网格
• AnalysisCard - 分析卡片
• CardTitle - 卡片标题
• CardContent - 卡片内容
• MetricGrid - 指标网格
• MetricItem - 指标项
• MetricValue - 指标值
• MetricLabel - 指标标签

4. SettingsPage.styled.ts

功能：设置页相关的样式组件 包含组件：

• PageContainer - 页面容器
• PageTitle - 页面标题
• SettingsGrid - 设置网格
• SettingsCard - 设置卡片
• CardTitle - 卡片标题
• SettingItem - 设置项
• SettingInfo - 设置信息
• SettingLabel - 设置标签
• SettingDescription - 设置描述
• SettingControl - 设置控件
• Select - 选择框
• Input - 输入框
• Checkbox - 复选框

重构优势

1. 关注点分离

• 页面组件：专注于业务逻辑和组件结构
• 样式文件：专注于样式定义和主题支持
• 清晰的职责划分：逻辑与样式完全分离

2. 可维护性提升

• 样式集中管理：所有样式定义在一个文件中
• 易于修改：修改样式时只需要关注样式文件
• 减少代码重复：避免在多个组件中重复定义样式

3. 可复用性

• 样式组件复用：可以在其他页面中复用样式组件
• 主题一致性：所有样式都使用统一的主题系统
• 组件化样式：样式组件可以独立测试和维护

4. 代码组织

• 文件结构清晰：每个页面都有对应的样式文件
• 导入关系明确：页面组件明确导入所需的样式组件
• 易于查找：样式定义位置一目了然

重构前后对比

重构前

// 页面组件中包含大量样式定义
const PageContainer = styled.div<{ theme: Theme }>`
  padding: 2rem;
  background: ${props => props.theme.colors.background};
  // ... 更多样式
`;

const HeroSection = styled.section`
  text-align: center;
  // ... 更多样式
`;

// 组件逻辑
const HomePage: React.FC<HomePageProps> = ({ theme }) => {
  // 业务逻辑
};

重构后

// 页面组件专注于业务逻辑
import {
  PageContainer,
  HeroSection,
  // ... 其他样式组件
} from "./styles/HomePage.styled";

const HomePage: React.FC<HomePageProps> = ({ theme }) => {
  // 业务逻辑
};

样式组件设计原则

1. 单一职责

每个样式组件只负责一个特定的UI元素

2. 主题支持

所有样式组件都支持主题切换和主题props

3. 响应式设计

包含必要的媒体查询和响应式布局

4. 过渡动画

提供平滑的过渡效果和悬停状态

5. 类型安全

使用 TypeScript 确保样式组件的类型安全

文件命名规范

1. 文件命名

• 格式：{PageName}.styled.ts
• 示例：HomePage.styled.ts

2. 组件命名

• 使用 PascalCase
• 描述性命名
• 避免缩写

3. 导入导出

• 使用命名导出
• 按功能分组导入
• 清晰的导入路径

构建验证

• ✅ TypeScript 编译通过
• ✅ 无 linting 错误
• ✅ Vite 构建成功
• ✅ 样式功能正常
• ✅ 主题切换正常
• ✅ 响应式设计正常

使用示例

1. 导入样式组件

import {
  PageContainer,
  PageTitle,
  AnalysisGrid,
} from "./styles/AnalysisPage.styled";

2. 使用样式组件

<PageContainer theme={theme}>
  <PageTitle theme={theme}>页面标题</PageTitle>
  <AnalysisGrid>
    {/* 内容 */}
  </AnalysisGrid>
</PageContainer>

3. 添加新样式组件

// 在样式文件中添加
export const NewComponent = styled.div<{ theme: Theme }>`
  // 样式定义
`;

// 在页面组件中导入和使用
import { NewComponent } from "./styles/PageName.styled";

未来扩展

1. 样式组件库

• 可以进一步抽取通用样式组件
• 创建共享的样式组件库
• 支持更多主题变体

2. 样式优化

• 使用 CSS-in-JS 优化
• 实现样式懒加载
• 添加样式缓存机制

3. 开发工具

• 样式组件文档生成
• 样式预览工具
• 主题切换预览

最佳实践

1. 样式组织

• 按功能分组样式组件
• 保持样式文件大小合理
• 避免样式组件过于复杂

2. 命名规范

• 使用语义化的组件名称
• 保持命名一致性
• 避免样式组件名称冲突

3. 性能优化

• 避免不必要的样式重计算
• 使用 CSS 变量优化主题切换
• 合理使用 styled-components 特性

现在您的项目具有了更好的代码组织结构，样式与逻辑完全分离，更易于维护和扩展！