签入版本

RXThinkCMF_Laravel13_EleVue/zh/frontend/overview.md

@@ -1,7 +1,7 @@
 # 9.1 前端工程概述
 
 :::tip 概述
-前端基于 Vue 3 + TypeScript + Vite + ElementPlus 构建，采用 Pinia 状态管理，支持动态菜单和权限控制。通过 Axios 封装统一处理请求/响应/错误，通过 v-perm 指令实现按钮级权限控制。
+前端基于 Vue 3 + TypeScript + Vite + ElementPlus 构建，采用 Pinia 状态管理，支持动态菜单和权限控制。通过 Axios 封装统一处理请求/响应/错误，通过 `v-perm` 指令实现按钮级权限控制。前端为本仓库 **`ui/` 目录**内的 EleVue 管理后台，与本后端通过 API 对接。
 :::
 
 ## 技术栈
@@ -19,11 +19,13 @@
 | 图表 | ECharts | 5.5+ | 数据可视化 |
 | CSS | TailwindCSS | 3.4+ | 原子化 CSS |
 
+（版本以前端仓库 `package.json` 为准。）
+
 ## 核心特性
 
 ### 动态路由
 
-从后端 `/index/getMenus` 接口获取菜单数据，自动生成前端路由，无需手动维护路由表。
+从后端 `/api/index/getMenus` 接口获取菜单数据，自动生成前端路由，无需手动维护路由表。
 
 ```text
 后端菜单数据 → generator-routers.ts → Vue Router 动态路由
@@ -34,14 +36,15 @@
 `v-perm` / `v-perms` 指令控制按钮级权限：
 
 ```vue
-<el-button v-perm="'sys:user:add'">新增</el-button>
+<el-button v-perm="['sys:user:add']">新增</el-button>
 ```
 
 ### Token 管理
 
 Axios 拦截器自动处理：
+
 - 请求拦截：自动添加 `Authorization: Bearer <token>` 请求头
-- 响应拦截：`code === 401` 时自动跳转登录页
+- 响应拦截：`code === 401` 时弹窗提示并跳转登录页（未内置自动续签，后端刷新能力见 8.6）
 
 ### 组件库
 
@@ -79,13 +82,27 @@ ui/src/
 └── views/              # 页面视图
 ```
 
+## 与后端的对应
+
+| 前端 | 后端 | 说明 |
+|------|------|------|
+| `src/api/**` | `routes/api.php` | API 函数 ↔ 路由 |
+| `src/views/**` | 菜单表 `component` 字段 | 页面组件 ↔ 动态菜单 |
+| `v-perm` 指令 | `#[Permission]` 注解 | 按钮级权限 ↔ 接口鉴权 |
+| 响应拦截器 `{code,ok,msg,data}` | `App\Support\Result` | 统一响应协议 |
+| `records/total/current/size/pages` | `Result::page()` | 分页固定结构 |
+
 ## 开发命令
 
 ```bash
-pnpm install        # 安装依赖
-pnpm dev            # 启动开发服务器
+pnpm install        # 安装依赖（或 npm install）
+pnpm dev            # 启动开发服务器（默认 8001）
 pnpm build          # 构建生产版本
 pnpm preview        # 预览构建结果
 pnpm lint:eslint    # ESLint 检查
 pnpm lint:prettier  # Prettier 格式化
-```
+```
+
+:::tip 快速开始
+前端启动与代理配置见 [2.4 前端服务启动](/zh/quickstart/frontend-start.html)；新增页面的完整步骤见 [9.12 新增页面开发步骤](/zh/frontend/new-page.html)。
+:::