管理后台

阶段一：前端脚手架搭建 ：

1.打开终端 (Terminal)，进入你的工作目录。

2.运行命令:

npm create vue@latest

3.按提示选择配置 (这是企业级标准配置):

Project name: school-system-web

Add TypeScript? -> Yes (必须的，为了和后端 DTO 对齐)

Add JSX Support? -> No (Vue 推荐用 Template)

Add Vue Router? -> Yes (页面路由)

Add Pinia? -> Yes (状态管理)

Add Vitest? -> No (初期先不做单元测试)

Add ESLint? -> Yes (代码规范)

4.进入目录并安装依赖

cd school-system-web
npm install
npm install element-plus axios sass -D  # 安装 UI 库, 请求库, CSS预处理

阶段二：配置前端 AI 规则

# Frontend Project Rules (Vue 3 + TS)

## 1. Tech Stack
- **Framework**: Vue 3 (Composition API) + TypeScript
- **Build**: Vite
- **UI Library**: Element Plus
- **State Management**: Pinia
- **HTTP**: Axios
- **CSS**: SCSS (Use scoped styles)

## 2. Directory Structure (Strict)
- `src/api/`: API definition files (must correspond to backend controllers).
- `src/types/`: TypeScript interfaces (must match backend DTO/VO).
- `src/views/`: Page components (e.g., `views/student/index.vue`).
- `src/components/`: Reusable UI components.
- `src/utils/`: `request.ts` (Axios wrapper).

## 3. Coding Standards
- **Composition API**: Use `<script setup lang="ts">`.
- **Naming**:
  - Files: `kebab-case` (e.g., `student-list.vue`).
  - Variables: `camelCase`.
- **API Handling**:
  - DO NOT write `axios.get` inside `.vue` files.
  - Must define API functions in `src/api/xxx.ts`.
- **Types**:
  - DO NOT use `any`. Define interfaces in `src/types/`.

## 4. Scaffold Mode (骨架模式)
When instructed to "Scaffold" a feature:
1. Create `src/types/xxx.d.ts` (interfaces).
2. Create `src/api/xxx.ts` (empty functions).
3. Create `src/views/xxx/index.vue` (basic table structure).

 阶段三：基础设施建设 

请初始化前端核心基建。 1. 创建 `src/utils/request.ts`。 – 封装 Axios。 – 请求头带上 Token (从 localStorage 取)。 – 响应拦截器：如果 `res.code !== 200`，提示错误；如果 `401`，跳转登录页。 2. 在 `src/main.ts` 中引入 Element Plus。

阶段四：业务开发 

Step 1: 定义类型 (Types) —— 关键：对齐后端

我要开发“班级管理”的前端模块。
后端 VO 包含：id, className, grade, teacherName.
后端 DTO 包含：className, grade…
请在 `src/types/school-class.ts` 中生成对应的 TypeScript 接口。

Step 2: 定义 API (Service)

请在 `src/api/school-class.ts` 中封装 API 请求。
引用刚才的 types。 包含：add, update, list 接口。 接口地址前缀：`/api/school-class`。

Step 3: 生成页面骨架 (Scaffold)

请启用 Scaffold Mode。 创建 `src/views/school-class/index.vue`。
要求：
1. 使用 Element Plus 的 `el-table` 展示班级列表。
2. 包含一个“新增”按钮。
3. 包含一个“新增/编辑”的弹窗 (`el-dialog`)，里面是表单。
4. 使用 `<script setup lang=”ts”>`。
5. 先不要写具体的 API 调用逻辑，只写 UI 结构和响应式变量。

Step 4: 注入逻辑 (Implement)

@index.vue @school-class.ts 请实现页面逻辑： 1. 页面加载时调用 API 获取列表数据。 2. 点击“保存”按钮时，调用 API 新增班级。 3. 操作成功后提示消息并刷新列表。

阶段五：联调

1. 配置代理 (解决跨域):
   让 AI 修改 vite.config.ts，添加 server.proxy，把 /api 转发到 http://localhost:8080。
2. 启动前端: npm run dev
3. 测试

前台

第一阶段：HTML 原型设计 prototypes

根据需求文档、风格，元素等进行抽卡

第二阶段：工程化迁移 (从原型到生产)

规则：

# PC Frontend Configuration (Vue 3 + Element Plus)

## 1. Project Context (项目基础)
- **Type**: PC Web Application (SPA)
- **Framework**: Vue 3 (Composition API + `<script setup>`)
- **UI Library**: Element Plus (The industry standard for Vue 3 PC apps)
- **Language**: TypeScript
- **Build Tool**: Vite
- **Styling**: SCSS (Scoped) + Tailwind CSS (Optional, for layout utils)
- **Icons**: Element Plus Icons / Iconify

## 2. Directory Structure (目录结构)
AI MUST follow this structure strictly:

- `src/views/`: Page components (e.g., `src/views/dashboard/index.vue`).
- `src/components/`: Reusable UI components (e.g., `src/components/SvgIcon/index.vue`).
- `src/layout/`: Layout components (Sidebar, Navbar, AppMain).
- `src/api/`: API definition files (Axios wrappers).
- `src/types/`: TypeScript interfaces (Sync with backend VO/DTO).
- `src/store/`: Pinia stores (User, Permission, App state).
- `src/utils/`: Helper functions (`request.ts`, `validate.ts`).
- `src/hooks/`: Composable functions (`useTable`, `useForm`).

## 3. Coding Standards (编码规范)

### 3.1 Component & UI Rules
- **Element Plus**:
  - Use `<el-config-provider>` for global config (locale, size).
  - Use `<el-table>` for data lists. Always define `v-loading`.
  - Use `<el-form>` with `el-form-item` and `:rules` for data entry.
  - Use `ElMessage.success/error` for notifications.
- **Layout**:
  - Use Flexbox or Grid for complex layouts.
  - For Admin Layouts, use `el-container`, `el-aside`, `el-header`, `el-main`.

### 3.2 Logic & State Rules
- **Composition API**: Always use `<script setup lang="ts">`.
- **API Separation**: 
  - ❌ DO NOT call `axios.get` inside `.vue`. 
  - ✅ Create `src/api/moduleName.ts` and import functions.
- **Type Safety**: 
  - ❌ Avoid `any`.
  - ✅ Define interfaces in `src/types/` corresponding to Backend DTOs.

## 4. 🏗️ Scaffold Mode (骨架生成模式)
When user says **"Scaffold"** or **"生成骨架"**:

1.  **Types First**: Generate `src/types/xxx.d.ts` (Interface for Table Row & Form Data).
2.  **API Skeleton**: Create `src/api/xxx.ts` with empty methods (`getList`, `create`, `update`, `delete`).
3.  **View Skeleton**: Create `src/views/xxx/index.vue`.
    - **Template**:
      - Search Bar (`<el-form inline>`)
      - Tool Bar (Add/Delete Buttons)
      - Main Table (`<el-table>`)
      - Pagination (`<el-pagination>`)
      - Dialog (`<el-dialog>` for Add/Edit)
    - **Script**: 
      - Initialize `tableData` (ref), `loading` (ref).
      - Setup empty `handleSearch`, `handleAdd`, `handleSubmit`.
    - **Goal**: A compilable page with complete UI structure but no real logic.

## 5. 🎨 Prototype Translation Mode (原型迁移模式)
When user provides an HTML Prototype:
1.  **Structure**: Map HTML structure to Element Plus components (e.g., `div.card` -> `el-card`).
2.  **Style**: Migrate CSS to `lang="scss"`.
3.  **Logic**: Replace static text with reactive variables (`{{ title }}`).

1.创建项目

npm create vue@latest  # 选 TypeScript, Router, Pinia
npm install element-plus axios sass -D

2.初始化

请初始化项目基建：封装 Axios (utils/request.ts)，配置 Element Plus 按需引入。

第三阶段：原型迁移与骨架生成

1）类型定义 (基于后端)

我要 开发选课模块。
后端 CourseVO 包含：id, name, teacher, credit, capacity, enrolled.
请生成 src/types/course.ts

2）API 定义

生成 src/api/course.ts，包含 getCourseList 和 selectCourse 方法。

3）原原型迁移 

上下文：附件是定稿的 course_prototype.html。
任务：请启用 Prototype Translation Mode，将此原型迁移为 Vue 组件 src/views/course/index.vue。
转换规则：

将 HTML 里的“筛选区域”转换为 Element Plus 的 <el-form inline>.
将 HTML 里的“课程卡片 Grid”转换为 <el-row> + <el-col> 布局。
使用 v-for 循环渲染课程列表。
样式迁移到 <style scoped lang="scss">。
暂时不要写 API 调用逻辑，先用 mock 数据填充，确保界面长得和原型一样。

第四阶段：注入逻辑

对接数据

@【页面组件文件名】.vue
@【API文件名】.ts

请实现【模块名称】的业务逻辑：

1. **数据加载 (Read)**:
   - 在 `onMounted` 时调用 `【查询API方法名】`。
   - 涉及参数：【查询参数对象，如 searchForm】。
   - 将返回结果赋值给 `【响应式变量名，如 tableData】`。
   - 处理 Loading 状态 (`loading.value = true/false`)。

2. **数据渲染 (Render)**:
   - 替换模板中写死的 Mock 数据，使用真实的字段（参考 API 返回类型）。

3. **用户交互 (Write)**:
   - 给“【按钮名称，如：提交/删除/审核】”按钮绑定事件。
   - 调用 `【操作API方法名】`。
   - 操作前需校验：【校验规则，如：是否选中行、表单验证】。

4. **反馈与刷新 (Feedback)**:
   - 接口调用成功后，弹出 `ElMessage.success`。
   - 自动重新调用查询方法刷新列表。
   - (如果是弹窗) 关闭弹窗。