rxthinkcmf/rxthinkcmf-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

签入版本

Browse Source
This commit is contained in:
gitadmin
2026-10-11 19:06:33 +08:00
parent 17d28de8b7
commit 4084c6bd17
674 changed files with 58855 additions and 1892 deletions
Download Patch File Download Diff File Expand all files Collapse all files
RXThinkCMF_Laravel13_AntdVue/zh/architecture/frontend-layer.md
+22 -27
View File
@@ -1,7 +1,7 @@
# 4.4 前端分层架构
:::tip 概述
前端采用 Vue 3 + TypeScript 组件化架构，分为 View（视图）→ API（接口）→ Store（状态）→ HTTP（请求）四层。辅以 Router（路由）、Directives（指令）、Hooks（组合式函数）、Utils（工具）等支撑模块。前端为本仓库 `ui/` 目录内的 EleVue 管理后台。
前端采用 Vue 3 + TypeScript 组件化架构，分为 View（视图）→ API（接口）→ Store（状态）→ HTTP（请求）四层。辅以 Router（路由）、Directives（指令）、Hooks（组合式函数）、Utils（工具）等支撑模块。前端为本仓库 `ui/` 目录内的 AntdVue 管理后台。
:::
## 架构全景
@@ -81,33 +81,30 @@ src/views/
```vue
<template>
<!-- 搜索区 -->
<el-form :model="searchForm" inline>
<el-form-item label="名称">
<el-input v-model="searchForm.name" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="fetchData">搜索</el-button>
</el-form-item>
</el-form>
<a-form :model="searchForm" layout="inline">
<a-form-item label="名称">
<a-input v-model:value="searchForm.name" />
</a-form-item>
<a-form-item>
<a-button type="primary" @click="fetchData">搜索</a-button>
</a-form-item>
</a-form>
<!-- 操作栏 -->
<el-button v-perm="'sys:example:add'" type="primary" @click="handleAdd">新增</el-button>
<a-button v-perm="'sys:example:add'" type="primary" @click="handleAdd">新增</a-button>
<!-- 数据表格 -->
<el-table :data="tableData">
<el-table-column prop="id" label="ID" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="statusText" label="状态" />
<el-table-column label="操作">
<template #default="{ row }">
<el-button v-perm="'sys:example:update'" @click="handleEdit(row)">编辑</el-button>
<el-button v-perm="'sys:example:delete'" type="danger" @click="handleDelete(row.id)">删除</el-button>
<a-table :data-source="tableData" :columns="columns" :pagination="false" row-key="id">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<a-button v-perm="'sys:example:update'" @click="handleEdit(record)">编辑</a-button>
<a-button v-perm="'sys:example:delete'" danger @click="handleDelete(record.id)">删除</a-button>
</template>
</el-table-column>
</el-table>
</template>
</a-table>
<!-- 分页（后端固定返回 records / total / current / size / pages） -->
<el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize"
<a-pagination v-model:current="pageNo" v-model:page-size="pageSize"
:total="total" @change="fetchData" />
</template>
@@ -231,10 +228,8 @@ src/utils/http/axios/
|-------|------|-----------|
| userStore | `user.ts` | Token、用户信息、权限列表、登录/登出 |
| asyncRouteStore | `asyncRoute.ts` | 动态路由、keep-alive 缓存列表 |
| projectSettingStore | `projectSetting.ts` | 项目配置（主题、布局等） |
| projectSettingStore | `projectSetting.ts` | 项目配置（导航/顶栏主题、布局等） |
| tabsViewStore | `tabsView.ts` | 标签页导航状态 |
| designSettingStore | `designSetting.ts` | 主题设计配置 |
| ossConfigStore | `ossConfig.ts` | 云存储配置 |
| lockscreenStore | `lockscreen.ts` | 锁屏状态 |
**userStore 核心流程：**
@@ -318,10 +313,10 @@ src/utils/http/axios/
```vue
<!-- v-perm：单权限 -->
<el-button v-perm="'sys:user:add'" type="primary">新增</el-button>
<a-button v-perm="'sys:user:add'" type="primary">新增</a-button>
<!-- v-perms：多权限（满足任一即可） -->
<el-button v-perms="['sys:user:add', 'sys:user:update']">操作</el-button>
<a-button v-perms="['sys:user:add', 'sys:user:update']">操作</a-button>
```
无权限时元素直接从 DOM 移除，而非仅隐藏。
@@ -419,7 +414,7 @@ v-perm 指令读取 permissions 列表 → 控制元素显隐
| `routes/api.php` | `src/api/**/*.ts` | 路由 ↔ API 函数 |
| 字典数据（`dict` 表） | `src/enums/` + 字典 Store | 枚举常量 |
| `#[Permission]` 注解 | `v-perm` 指令 | 权限码对应 |
| 分页 `records/total/current/size/pages` | el-pagination 绑定 | 固定分页结构 |
| 分页 `records/total/current/size/pages` | a-pagination 绑定 | 固定分页结构 |
## 层间通信规范