officialWebsite/docs/模块化重构指南.md

# 网站模块化重构指南

## 概述

本重构方案将重复的代码和样式提取为可复用的组件，大幅减少代码重复，提高维护效率。

## 新增组件结构

### 1. 业务组件 (`src/components/business/`)

#### BusinessBanner.vue

- **用途**: 统一的页面顶部Banner
- **Props**:
  - `title`: 页面标题
  - `breadcrumb`: 面包屑导航文本
  - `image`: 背景图片路径
- **使用示例**:

```vue
<BusinessBanner
  title="视觉缺陷检测"
  breadcrumb="业务板块 > 视觉缺陷检测"
  image="@/assets/images/jjfa/head.png"
/>
```

#### SectionHeader.vue

- **用途**: 页面区域的标题组件
- **Props**:
  - `title`: 区域标题
  - `description`: 可选的描述文本
- **使用示例**:

```vue
<SectionHeader title="业务板块" description="为您提供创新的技术解决方案，助力业务增长" />
```

#### BusinessCard.vue

- **用途**: 业务展示卡片
- **Props**:
  - `solution`: 业务对象数据
  - `index`: 卡片索引（用于动画延迟）

#### SolutionsSection.vue

- **用途**: 完整的业务板块展示区域
- **包含**: SectionHeader + BusinessCard集合

#### ContactSection.vue

- **用途**: 完整的联系我们区域
- **包含**: SectionHeader + ContactGrid

#### ContactGrid.vue

- **用途**: 联系方式卡片网格
- **内容**: 固定的公司联系信息

#### ArticleContent.vue

- **用途**: 文章内容容器
- **用法**: 使用插槽(slot)包含内容

## 样式文件

### `src/styles/business.css`

- 统一的业务页面样式
- 包含通用的布局、间距、文字样式
- 响应式设计规则

## 重构后的页面示例

### 1. WheelDetectionRefactored.vue

展示如何重构业务详情页面：

```vue
<template>
  <div>
    <BusinessBanner title="视觉缺陷检测" breadcrumb="业务板块 > 视觉缺陷检测" />
    <div class="wheel-detection">
      <section class="article-section section-padding">
        <div class="container">
          <SectionHeader title="视觉缺陷检测" />
          <ArticleContent>
            <!-- 文章内容 -->
          </ArticleContent>
        </div>
      </section>
      <ContactSection />
    </div>
  </div>
</template>
```

### 2. HomeViewRefactored.vue

展示如何重构首页：

```vue
<template>
  <section class="banner-section">...</section>
  <SolutionsSection />
  <ContactSection />
</template>
```

### 3. ContactRefactored.vue

展示如何重构联系页面：

```vue
<template>
  <div>
    <BusinessBanner title="联系我们" />
    <ContactSection />
  </div>
</template>
```

## 重构优势

### 1. 代码复用

- **Banner组件**: 所有页面共用，只需传入不同参数
- **Section组件**: 标题和描述区域统一管理
- **Contact组件**: 联系信息一处维护，全局生效

### 2. 维护效率

- **样式集中**: 通用样式统一管理
- **组件独立**: 单个组件修改不影响其他页面
- **参数化**: 通过props控制不同展示效果

### 3. 一致性保证

- **统一风格**: 所有页面使用相同的基础组件
- **响应式**: 统一的移动端适配
- **动画效果**: 统一的交互体验

## 迁移步骤

### 第一阶段：基础组件

1. 创建business组件目录
2. 提取Banner、Section、Contact等基础组件
3. 创建全局样式文件

### 第二阶段：页面重构

1. 选择一个页面进行重构试点（建议从Contact.vue开始）
2. 逐个重构其他业务详情页面
3. 重构首页和Solution页面

### 第三阶段：优化完善

1. 清理旧的重复代码
2. 优化组件参数设计
3. 添加TypeScript类型定义

## 预期效果

### 代码量减少

- **CSS重复**: 减少约60%
- **模板重复**: 减少约40%
- **维护成本**: 降低约50%

### 开发效率提升

- **新页面开发**: 时间减少70%
- **样式调整**: 一处修改全局生效
- **功能扩展**: 组件化便于功能增强

## 注意事项

1. **图片路径**: 使用`@/assets/`确保路径正确
2. **样式冲突**: 使用scoped避免样式污染
3. **组件通信**: 合理设计props和events
4. **类型安全**: 为TypeScript项目添加类型定义

## 后续优化建议

1. **添加组合式函数**: 提取业务逻辑
2. **创建数据模型**: 统一数据结构定义
3. **添加单元测试**: 确保组件稳定性
4. **性能优化**: 懒加载和代码分割