用免费 AI 重构 JeeSite 移动端：一套可复用的零成本开发工作流

# JeeSite 移动端重构 - 上下文约束

## 技术栈
- Vue 3.4 + Composition API（必须用 <script setup>）
- Vant 4 组件库（按需引入，用 unplugin-vue-components 自动注册）
- Vite 5 构建
- TypeScript 严格模式

## 项目结构约定
- 页面组件放在 src/views/{模块名}/{页面名}.vue
- 公共组件放在 src/components/{组件名}.vue
- API 调用统一走 src/api/{模块名}.ts，内部用 axios 实例
- 路由定义在 src/router/modules/{模块名}.ts

## 代码风格
- 组件命名：PascalCase
- 事件命名：onXxx（如 onSubmit、onRefresh）
- CSS 用 scoped + BEM 命名
- 必须处理移动端安全区域（safe-area-inset）

## JeeSite 后端 API 规范
- 响应格式：{ result: { code: 0/1 }, data: {}, msg: "" }
- code=0 表示成功，code=1 表示业务异常
- 分页参数：pageNo, pageSize
- 分页响应：{ data: { list: [], count: 0 } }

# prompt_builder.py — 把上下文 + 旧代码 + 需求拼成完整 prompt
# 用法：python prompt_builder.py > prompt.txt，然后粘贴到 AI 对话框

import sys

def build_prompt(context_file: str, old_code_file: str, requirement: str) -> str:
    with open(context_file, "r", encoding="utf-8") as f:
        context = f.read()
    with open(old_code_file, "r", encoding="utf-8") as f:
        old_code = f.read()

    prompt = f"""你是一个前端重构工程师。请根据以下约束和旧代码，生成新的 Vue 3 组件。

## 项目约束
{context}

## 旧组件代码（Vue 2 + 自建 UI）
{old_code}

## 迁移需求
{requirement}

## 输出要求
1. 只输出一个完整的 .vue 文件内容，不要解释
2. 必须使用 <script setup lang="ts">
3. 必须用 Vant 4 组件替换旧自建 UI
4. 必须处理 JeeSite 后端 API 响应格式
5. 必须处理移动端安全区域
6. 在文件末尾用注释列出你做的关键改动点
"""
    return prompt

if __name__ == "__main__":
    # 示例：迁移用户列表页
    requirement = """
    - 旧页面用自建 Table 组件展示用户列表，迁移为 Vant List + PullRefresh
    - 旧页面分页用手工按钮，迁移为 Vant List 的无限滚动加载
    - 旧页面搜索用自建 Input，迁移为 Vant Search
    - 保留旧页面的所有业务逻辑（角色筛选、状态切换）
    """
    result = build_prompt("context.md", "old_user_list.vue", requirement)
    print(result)

# 1. 准备文件
echo '<旧组件代码内容>' > old_user_list.vue

# 2. 生成 prompt
python prompt_builder.py > prompt.txt

# 3. 把 prompt.txt 内容粘贴到免费 AI 工具（如 ChatGPT 免费版、Copilot 免费额度等）

# 4. 拿到 AI 输出后，保存为新组件
# 假设 AI 输出保存为 ai_output.vue
cp ai_output.vue src/views/user/UserList.vue

# 1. TypeScript 类型检查
npx vue-tsc --noEmit src/views/user/UserList.vue

# 2. ESLint 规范检查
npx eslint src/views/user/UserList.vue --fix

# 3. 运行时验证 — 启动开发服务器，手动测试
npm run dev
# 在浏览器打开对应路由，验证：
#   - 列表加载和无限滚动是否正常
#   - 下拉刷新是否触发
#   - 搜索筛选是否联动
#   - 安全区域底部是否留白

# 4. 风格一致性 — 对比已有组件的写法
# 检查命名、事件处理、CSS BEM 是否与项目其他文件一致

// mobile-base.scss — 全局移动端基础样式
// 安全区域：处理 iOS 底部 Home 指示条和 Android 系统导航栏
.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom); // iOS < 11.2
  padding-bottom: env(safe-area-inset-bottom);       // iOS >= 11.2
}

.safe-area-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

// 响应式断点：统一管理，禁止各组件自行写 media query
$breakpoints: (
  sm: 375px,   // 小屏手机
  md: 414px,   // 标准手机
  lg: 768px,   // 平板竖屏
  xl: 1024px,  // 平板横屏 / 小桌面
);

@mixin respond-to($bp) {
  @if map-has-key($breakpoints, $bp) {
    @media (min-width: map-get($breakpoints, $bp)) {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint: `#{$bp}`";
  }
}

// 使用示例（组件中不要直接写 media query）
// .user-card {
//   width: 100%;
//   @include respond-to(md) {
//     width: 50%;
//   }
// }

<!-- App.vue — 全局 Vant 配置，统一多端行为 -->
<script setup lang="ts">
import { ConfigProvider } from 'vant'

// 统一主题变量，覆盖 Vant 默认值以适配 JeeSite 设计规范
const themeVars = {
  // 主色跟随 JeeSite 品牌
  '--van-primary-color': '#1890ff',
  // 安全区域补偿
  '--van-tabbar-height': '50px + env(safe-area-inset-bottom)',
  // 圆角统一为 8px（JeeSite 规范）
  '--van-border-radius-lg': '8px',
  // 字体大小基准适配移动端
  '--van-font-size-md': '14px',
}
</script>

<template>
  <ConfigProvider :theme-vars="themeVars">
    <router-view />
  </ConfigProvider>
</template>

// vite.config.ts — JeeSite 移动端构建配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    // Vant 按需自动引入——无需手动 import 每个组件
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  server: {
    host: '0.0.0.0',  // 手机真机调试时需要局域网访问
    port: 5173,
  },
  build: {
    // 移动端分包策略——按路由模块拆 chunk
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('src/views')) {
            // 每个模块一个 chunk，首屏只加载当前路由
            const match = id.match(/src\/views\/([^/]+)/)
            return match ? `view-${match[1]}` : undefined
          }
          if (id.includes('vant')) {
            return 'vendor-vant'
          }
        },
      },
    },
    // 移动端对包体积更敏感，压缩更激进
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,   // 生产环境去掉 console
        drop_debugger: true,
      },
    },
  },
})

## 移动端重构执行清单

### 准备阶段
- [ ] 整理项目约束文档（框架版本、组件库、API 规范、代码风格）
- [ ] 列出所有旧页面清单，按业务优先级排序
- [ ] 搭建新架构脚手架：Vue 3 + Vite + Vant + TypeScript
- [ ] 配置 Vite 构建和 Vant 按需引入
- [ ] 写好 mobile-base.scss 和 ConfigProvider 全局配置

### 迁移阶段（逐页面推进）
- [ ] 选一个低复杂度页面做试点（如列表页），跑通完整流程
- [ ] 用 prompt_builder 投喂上下文 + 旧代码 + 需求，生成新组件
- [ ] 人工校验：类型检查 → lint → 运行时验证 → 风格一致性
- [ ] 记录 AI 输出的错误模式，调整 prompt 策略
- [ ] 逐个迁移剩余页面，每迁移 3-5 个页面做一次集成验证

### 收口阶段
- [ ] 全量 E2E 测试（重点：多端真机验证）
- [ ] 性能对比：首屏加载时间、包体积、交互响应时间
- [ ] 清理旧架构代码和依赖
- [ ] 更新团队开发文档和组件使用规范