You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4.3 KiB

Raw Permalink Blame History Unescape Escape

网站模块化重构指南

概述

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

新增组件结构

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

BusinessBanner.vue

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

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

SectionHeader.vue

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

<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

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

<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

展示如何重构首页：

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

3. ContactRefactored.vue

展示如何重构联系页面：

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

重构优势

1. 代码复用

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

2. 维护效率

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

3. 一致性保证

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

迁移步骤

第一阶段：基础组件

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

第二阶段：页面重构

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

第三阶段：优化完善

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

预期效果

代码量减少

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

开发效率提升

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

注意事项

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

后续优化建议

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

4.3 KiB Raw Permalink Blame History Unescape Escape