ali_ai_learn_web/refactoring_plan.md

前端项目重构计划书

1. 项目概述

1.1. 项目现状分析

经过对现有前端项目的全面分析，我们总结出以下几点：

• 技术栈: 项目采用 Vue 3 作为核心框架，Vite 作为构建工具，并整合了 Element Plus UI 组件库、Pinia 状态管理库以及 Vue Router 路由管理器。此外，项目中还通过 veaury 实现了 Vue 与 React 组件的混合使用，并采用 SCSS 进行样式的预处理。
• 功能模块: 项目核心功能涵盖了首页、工作流搜索平台、工作流详情、在线学习系统、个人中心、会员体系、工作流交易市场以及米币商城等多个模块，功能较为完善。
• 代码与UI: 目前的UI主要基于 Element Plus 构建，但存在大量自定义样式，导致整体风格不统一。样式代码散布于全局 SCSS 文件、组件的 scoped 样式以及内联样式中，维护性较差。同时，应用的响应式布局支持不完善，部分组件的复用性不高，UI/UX 整体表现有较大的提升空间。

1.2. 重构目标

本次重构的核心目标是在保留现有全部功能和内容的基础上，对前端界面进行全面的重新设计和实现，旨在：

• 提升用户体验 (UX): 优化交互流程，提升界面的美观度和易用性，打造现代化、专业化的产品形象。
• 统一设计语言 (UI): 建立一套完整、统一的设计规范，涵盖色彩、字体、布局、组件等，确保产品视觉风格的一致性。
• 提高代码质量与可维护性: 采用更先进的技术方案和代码规范，优化项目结构，提升代码的可读性、可维护性和可扩展性。
• 增强项目性能: 优化资源加载、渲染性能和响应速度，为用户提供更流畅的使用体验。

2. 重构方案详解

2.1. 技术选型与项目基础架构

为了实现重构目标，我们建议对现有技术栈进行升级和优化，并引入新的工具来提升开发效率和代码质量。

技术领域	建议方案	优势与说明
UI框架	Tailwind CSS	替换现有混乱的样式方案。Tailwind CSS 是一个功能类优先的 CSS 框架，能够极大地提升开发效率，保证样式的一致性，并能轻松实现复杂的响应式设计。
代码规范	ESLint + Prettier + Stylelint	建立严格的代码规范体系，自动格式化代码，统一代码风格，减少低级错误，提升团队协作效率。
组件库	Headless UI (可选) + 自定义组件	结合 Tailwind CSS，使用 Headless UI 提供的无样式、功能完备的组件，可以轻松地构建完全自定义且符合新设计规范的UI组件。
依赖管理	pnpm	采用 pnpm 代替 npm 或 yarn，能够更快地安装依赖，并有效节省磁盘空间。
版本升级	全面升级核心依赖	将 Vue、Vite、Element Plus 等核心依赖升级至最新稳定版本，以获得更好的性能、更多的功能和更及时的安全更新。

2.2. UI/UX 重新设计

我们将为项目设计一套全新的、现代化的设计系统。

• 设计风格: 采用简洁、扁平化的现代设计风格，注重信息的清晰传达和操作的直观性。
• 色彩体系: 重新定义主色、辅助色、中性色和功能色，形成和谐、专业的色彩搭配方案。
• 字体规范: 统一字体、字号、行高和字重，保证文本内容的可读性和层次感。
• 布局系统: 基于 Tailwind CSS 的响应式网格系统，构建灵活、一致的页面布局，适配不同尺寸的设备屏幕。
• 组件设计: 重新设计所有UI组件，包括按钮、表单、卡片、弹窗等，确保其视觉风格和交互行为的统一。

2.3. 核心模块重构策略

我们将按照模块化的方式，分阶段对各个页面和组件进行重构。

2.3.1. 全局组件与布局

• Layout 组件: 重构 Layout.vue，设计新的顶部导航栏、侧边栏和页脚，并集成面包屑导航。新的布局将全面支持响应式设计。
• 基础组件: 基于新的设计规范和 Tailwind CSS，重构所有基础UI组件，例如 Button, Input, Card, Dialog 等，将它们封装成高度可复用的组件。
• 图标系统: 引入 Iconify 或类似的图标库，统一管理和使用图标，支持按需加载。

2.3.2. 页面重构

页面模块	现存问题	重构策略与优化建议
首页 (Home)	布局较为拥挤，视觉焦点不突出，轮播图效果一般。	1. 重新设计 Banner 区域，突出核心价值主张。 2. 优化平台分类的展示方式，使其更具吸引力。 3. 重新设计工作流卡片 (course-card.vue)，优化信息布局和交互效果。
搜索平台 (SearchPlatform)	筛选功能交互可以优化，搜索结果展示不够直观。	1. 重新设计筛选器，提供更友好的交互体验。 2. 优化搜索结果列表的布局，突出关键信息。 3. 增加更丰富的排序选项。
工作流详情 (WorkflowDetail)	页面布局较为松散，信息组织可以更紧凑，右侧操作区功能单一。	1. 采用多栏布局，更有效地组织页面内容。 2. 重新设计作者信息、价格和操作按钮区域，使其更醒目。 3. 优化富文本内容的展示样式。
学习系统 (LearningSystem)	课程列表和筛选区域设计较为传统，缺乏吸引力。	1. 重新设计课程卡片，增加学习进度等状态显示。 2. 优化课程筛选和分类的交互方式。 3. 重新设计课程详情页，优化视频播放体验和章节目录的导航。
个人中心 (PersonalCenter)	布局混乱，信息层级不清，功能入口不够直观。	1. 采用更清晰的仪表盘式布局，整合用户信息、资产和常用功能入口。 2. 重新设计左侧导航菜单，使其更简洁明了。 3. 优化钱包、订单、收藏等子页面的信息展示和交互流程。
会员页 (Member)	页面设计较为简单，会员权益展示不够吸引人。	1. 重新设计会员套餐的展示卡片，突出不同等级会员的核心权益。 2. 增加更具吸引力的视觉元素和营销文案。
工作流交易 (WorkflowTrade)	需求列表和发布流程的UI/UX有较大提升空间。	1. 优化需求列表的展示，增加预算、报名人数等关键信息的可见性。 2. 重新设计需求发布表单，简化填写流程，提供更清晰的指引。
米币商城 (MibiShop)	商品展示效果一般，缺乏购物氛围。	1. 重新设计商品卡片，突出商品图片和价格。 2. 优化兑换流程，提供更顺畅的购物体验。
登录/注册 (LoginDialog)	弹窗式登录体验可以优化，表单校验和提示不够友好。	1. 重新设计登录/注册弹窗，使其更现代化。 2. 优化表单的交互和校验提示，提供更友好的用户引导。

2.4. 状态管理与数据流

• Pinia Store 优化: 梳理现有的 appStore，根据功能模块拆分出更细粒度的 Store，例如 userStore, workflowStore, courseStore 等，使状态管理更清晰、更易于维护。
• API 请求封装: 统一封装 axios 请求，建立标准的请求/响应拦截器，处理全局的 Loading 状态、错误提示和 Token 刷新逻辑。

2.5. 国际化 (i18n)

• 文案管理: 梳理并完善中英文文案，确保所有界面元素都支持国际化。
• 动态加载: 实现语言包的按需加载，减少首屏加载体积。

3. 重构实施计划

我们建议将重构过程分为以下几个阶段：

阶段	主要任务	预计产出
第一阶段：准备与基础建设	1. 搭建新的项目脚手架，集成 Tailwind CSS、ESLint 等工具。 2. 完成新设计系统的核心元素设计（色彩、字体等）。 3. 升级所有核心依赖至最新版本。 4. 封装基础网络请求和 Pinia Store 结构。	- 一个配置完善的、可用于开发的新项目骨架。 - 完整的设计规范文档。 - 基础的 API 和 Store 模块。
第二阶段：核心组件与布局重构	1. 开发全局 Layout 组件。 2. 基于新设计规范，开发一套可复用的基础UI组件。 3. 重构登录/注册模块。	- 全新的应用整体布局。 - 一套高质量的基础组件库。 - 可用的用户认证流程。
第三阶段：核心页面重构	1. 逐个重构首页、搜索平台、工作流详情等核心页面。 2. 将旧页面的逻辑迁移至新页面，并替换为新的UI组件。	- 完成核心功能的界面重构，并可进行功能测试。
第四阶段：其他页面与功能完善	1. 重构个人中心、会员、商城等其余页面。 2. 全面测试所有功能，修复 Bug。 3. 优化性能，进行代码审查。	- 一个功能完整、UI统一、性能优良的全新前端应用。
第五阶段：部署与上线	1. 配置生产环境的构建和部署流程。 2. 制定详细的上线计划，进行灰度发布或A/B测试。 3. 监控上线后的应用表现，及时响应和处理问题。	- 成功上线的重构后项目。

4. 风险评估与应对

• 业务中断风险: 在重构期间，需要保证现有业务的正常运行。我们可以采用新旧系统并行的方式，逐步将流量切换到新系统。
• 时间与资源风险: 全面重构需要投入大量的时间和人力。需要制定详细的排期，并确保有足够的资源支持。
• 技术风险: 引入新技术可能带来未知的技术难题。需要在项目初期进行充分的技术预研和验证。

5. 总结

本次重构是一项系统性工程，旨在全面提升产品的用户体验、代码质量和长期可维护性。通过采用现代化的技术栈和设计理念，我们有信心将项目提升到一个新的高度。希望这份计划能为您提供清晰的指引，期待与您共同完成这次重要的升级。