|
|
# 网站模块化重构指南
|
|
|
|
|
|
## 概述
|
|
|
|
|
|
本重构方案将重复的代码和样式提取为可复用的组件，大幅减少代码重复，提高维护效率。
|
|
|
|
|
|
## 新增组件结构
|
|
|
|
|
|
### 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. **性能优化**: 懒加载和代码分割
|