🚀 Phase 2: 其他应用迁移计划

📋 总览

目标: 将设计系统应用到其他3个应用
状态: 🟡 进行中
预计完成: 根据实际情况分批完成

📊 应用清单

1. ✅ MBE Education (已完成 100%)

登录页面
Dashboard组件
课程列表
课程详情/学习页面
实时WebSocket学习

2. 🟡 MBE AIGC Committee (进行中)

端口: 3002
页面数: 5个主要页面

待替换页面:

首页 (app/page.tsx) - 449行
会员Dashboard (app/member/[id]/dashboard/page.tsx) - 313行
活动页面 (app/events/page.tsx)
项目页面 (app/projects/page.tsx)
资源页面 (app/resources/page.tsx)

配置文件:

package.json - 已添加 @mbe/ui 和 @mbe/design-tokens
tailwind.config.js - 需要添加预设
app/layout.tsx - 需要添加 Providers
app/providers.tsx - 需要创建

3. ⏳ MBE Civil Lawyer (待开始)

端口: 3003
功能: 民事律师AI助手

预估页面:

案件管理
文书生成
法律咨询
用户中心

4. ⏳ MBE Behavior Engine Dashboard (待开始)

端口: 3004
功能: 行为引擎管理后台

预估页面:

系统概览
学生管理
专家管理
数据分析

🎯 AIGC Committee 快速迁移指南

Step 1: 配置文件更新

1.1 Tailwind配置

// tailwind.config.js
module.exports = {
  presets: [require('@mbe/tailwind-config')],
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    '../../packages/mbe-ui/src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

1.2 创建 Providers

// app/providers.tsx
'use client';

import { ReactNode } from 'react';
import { ToastProvider } from '@mbe/ui';

export function Providers({ children }: { children: ReactNode }) {
  return (
    <ToastProvider position="top-right">
      {children}
    </ToastProvider>
  );
}

1.3 更新 Layout

// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Step 2: 主要组件替换对照

首页卡片 (app/page.tsx)

// 之前
<motion.div className="bg-white/5 border border-white/10 rounded-xl p-6">
  {content}
</motion.div>

// 之后
<GlassCard hoverable className="p-6">
  {content}
</GlassCard>

统计卡片

// 之前
<div className="bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-xl p-6">
  <div>{stats.value}</div>
</div>

// 之后
<GlassCard className="p-6 bg-gradient-to-br from-blue-500/20 to-cyan-500/20">
  <div className="text-3xl font-bold">{stats.value}</div>
</GlassCard>

按钮替换

// 之前
<button className="px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg">
  点击
</button>

// 之后
<Button variant="primary">点击</Button>

会员信息卡片

// 之前
<div className="bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-3xl p-8 border border-white/10">
  {memberInfo}
</div>

// 之后
<GlassCard className="p-8 bg-gradient-to-br from-blue-500/20 to-purple-500/20">
  {memberInfo}
</GlassCard>

状态徽章

// 之前
<span className="px-3 py-1 bg-yellow-500/20 text-yellow-300 rounded-full text-sm">
  {memberInfo.level}
</span>

// 之后
<Badge variant="warning">{memberInfo.level}</Badge>

📝 批量替换清单

AIGC Committee 首页 (app/page.tsx)

需要替换的元素:

Hero区域 (行 120-180)
- 背景 → GlassCard
- 按钮 → Button variant="gradient"
统计卡片 (行 185-210)
- 4个统计框 → GlassCard + 图标
功能卡片网格 (行 215-280)
- 6个功能卡片 → GlassCard hoverable
即将举办的活动 (行 285-350)
- 活动卡片 → GlassCard
- 报名按钮 → Button variant="primary"
- 进度条 → 自定义进度条
最新动态 (行 355-410)
- 动态卡片 → GlassCard
- 查看更多按钮 → Button variant="ghost"
合作伙伴 (行 415-440)
- Logo卡片 → GlassCard

导入语句:

import { 
  GlassCard, 
  Button, 
  Badge, 
  useToast 
} from '@mbe/ui';

会员Dashboard (app/member/[id]/dashboard/page.tsx)

需要替换的元素:

导航栏 (行 86-108)
- 按钮 → Button variant="ghost"
- 续费按钮 → Button variant="primary"
会员信息卡片 (行 112-160)
- 主卡片 → GlassCard
- 等级徽章 → Badge variant="warning"
- 设置按钮 → Button variant="ghost" size="sm"
统计卡片 (行 165-200)
- 4个统计卡片 → GlassCard + 渐变背景
最近活动 (行 205-245)
- 活动列表 → GlassCard
- 状态标签 → Badge
我的项目 (行 250-290)
- 项目卡片 → GlassCard
- 进度条 → 自定义
- 状态 → Badge
积分历史图表 (行 295-320)
- 图表容器 → GlassCard
会员权益 (行 325-365)
- 权益卡片 → GlassCard hoverable
快捷操作 (行 370-390)
- 操作按钮 → Button 多种变体

🎨 设计指南

颜色方案

// AIGC Committee 主题色
背景渐变: from-neutral-950 via-indigo-950 to-neutral-950
主色调: blue-500, purple-500
强调色: yellow-500 (会员等级)

组件使用频率预估

组件	AIGC Committee	Civil Lawyer	Dashboard	总计
GlassCard	40+	35+	30+	105+
Button	25+	20+	15+	60+
Badge	30+	15+	20+	65+
Input	5+	10+	8+	23+
Toast	10+	8+	12+	30+

⚡ 快速替换脚本思路

正则替换模式

1. 玻璃态卡片

查找: <(motion\.)?div className="([^"]*)(bg-white/5|bg-white/10)([^"]*)"
替换: <GlassCard className="$2$4"

2. 按钮

查找: <button className="([^"]*)(bg-blue-500|bg-gradient)([^"]*)"
替换: <Button variant="primary" className="$1$3"

3. 徽章

查找: <span className="([^"]*)px-\d+ py-\d+([^"]*)rounded-full([^"]*)"
替换: <Badge className="$1$2$3"

📊 迁移进度追踪

MBE AIGC Committee

安装依赖 (pnpm install)
更新配置文件
创建 Providers
首页替换 (449行 → 预计350行)
会员Dashboard替换 (313行 → 预计250行)
活动页面替换
项目页面替换
资源页面替换
测试验证

MBE Civil Lawyer

调研现有页面结构
更新依赖配置
逐页替换
测试验证

MBE Dashboard

调研现有页面结构
更新依赖配置
逐页替换
测试验证

💡 批量替换最佳实践

1. 分阶段进行

第一阶段: 配置文件和基础设施
第二阶段: 首页和主要入口页面
第三阶段: 详情和二级页面
第四阶段: 测试和优化

2. 复用成功模式

直接复制 MBE Education 的配置
使用相同的组件组合
保持一致的设计语言

3. 批量操作

使用 VSCode 正则替换
编写简单的替换脚本
保持代码格式一致

4. 验证测试

每个页面替换后立即测试
检查响应式布局
验证动画效果

🔧 实用工具

快速替换命令 (VSCode)

1. Ctrl + H (打开替换)
2. 启用正则模式 (.*按钮)
3. 批量替换
4. Ctrl + S 保存所有

批量导入添加

在文件顶部统一添加:

import { 
  GlassCard, 
  Button, 
  Badge, 
  Input,
  Skeleton,
  useToast 
} from '@mbe/ui';

📖 相关文档

🎯 总结

Phase 2的目标是将成功的设计系统应用到其他3个应用。通过复用已验证的模式和组件，可以快速完成迁移。

关键点:

✅ 复用MBE Education的配置
✅ 使用批量替换加速迁移
✅ 保持设计系统一致性
✅ 逐页验证确保质量

预期收益:

🎨 统一的设计语言
🚀 更快的开发速度
🛡️ 更好的代码可维护性
✨ 更优秀的用户体验

更新时间: 2026-02-01
状态: 🟡 Phase 2 进行中
下一步: 完成AIGC Committee迁移

Happy Coding! ✨