签入版本
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
# G. 前端组件速查
|
||||
|
||||
:::tip 概述
|
||||
公共组件定义在 `ui/src/components/` 目录下。其中 `PageWrapper`、`PageFooter`、`BasicTable`、`BasicForm`、`NumberInput`、`PriceInput`、`pagination`、`icon` 已在 `ui/src/plugins/customComponents.ts` 中**全局注册**,模板里可直接使用;其余组件按需 import。
|
||||
公共组件定义在 `ui/src/components/` 目录下。其中 `PageWrapper`、`PageFooter`、`BasicTable`、`BasicForm`、`NumberInput`、`pagination` 已在 `ui/src/plugins/customComponents.ts` 中**全局注册**,模板里可直接使用;其余组件按需 import(图标选择器 `IconPicker` 由 `unplugin-vue-components` 按需自动导入)。
|
||||
:::
|
||||
|
||||
## 全局注册组件
|
||||
@@ -13,10 +13,8 @@
|
||||
| `PageWrapper` / `PageFooter` | `components/Page/` | 页面容器 / 页脚 |
|
||||
| `BasicTable` | `components/Table/` | 数据表格(通过 props 传数据) |
|
||||
| `BasicForm` | `components/Form/` | 动态表单(配合 `useForm` 的 register) |
|
||||
| `NumberInput` | `components/numberInput/` | 数字输入 |
|
||||
| `PriceInput` | `components/numberInput/` | 价格输入 |
|
||||
| `NumberInput` | `components/numberInput/` | 数字输入(基于 `a-input` 封装) |
|
||||
| `pagination` | `components/pagination/` | 分页 |
|
||||
| `icon` | `components/icon/` | 图标 |
|
||||
|
||||
## 数据展示
|
||||
|
||||
@@ -26,7 +24,6 @@
|
||||
| PageWrapper | `components/Page/` | 页面容器 | 全局注册 |
|
||||
| CountTo | `components/CountTo/` | 数字动画 | 按需 import |
|
||||
| Qrcode | `components/Qrcode/` | 二维码 | 按需 import |
|
||||
| TableSelect | `components/TableSelect/` | 表格选择器 | 按需 import |
|
||||
|
||||
## 数据录入
|
||||
|
||||
@@ -41,7 +38,7 @@
|
||||
| ChinaArea | `components/ChinaArea/` | 省市区联动 | 按需 import |
|
||||
| Region | `components/Region/` | 行政区划 | 按需 import |
|
||||
| Cropper | `components/Cropper/` | 头像裁剪 | 按需 import |
|
||||
| NumberInput / PriceInput | `components/numberInput/`、`priceInput/` | 数字 / 价格输入 | 全局注册 |
|
||||
| NumberInput | `components/numberInput/` | 数字输入 | 全局注册 |
|
||||
|
||||
## Excel 与导入导出
|
||||
|
||||
@@ -57,7 +54,6 @@
|
||||
| 组件 | 路径 | 说明 |
|
||||
|------|------|------|
|
||||
| Authority | `components/Authority/` | 权限组件(根据权限显示/隐藏) |
|
||||
| CheckToken | `components/CheckToken/` | Token 校验组件 |
|
||||
| Lockscreen | `components/Lockscreen/` | 锁屏组件 |
|
||||
| Websocket | `components/Websocket/` | WebSocket 组件 |
|
||||
| Render | `components/Render/` | 函数式渲染组件 |
|
||||
@@ -92,12 +88,12 @@ const [register, { getFieldsValue }] = useForm({
|
||||
:row-key="(row) => row.id"
|
||||
ref="tableRef"
|
||||
:actionColumn="actionColumn"
|
||||
@selection-change="onSelectionChange"
|
||||
:row-selection="{ onChange: onSelectionChange }"
|
||||
>
|
||||
<template #tableTitle>
|
||||
<el-button type="primary" @click="handleAdd" v-perm="['sys:example:add']">
|
||||
<a-button type="primary" @click="handleAdd" v-perm="['sys:example:add']">
|
||||
添加案例演示
|
||||
</el-button>
|
||||
</a-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</template>
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
| `VITE_GLOB_API_URL_PREFIX` | API 前缀(默认 `/api`) |
|
||||
| `VITE_GLOB_UPLOAD_URL` | 图片上传地址(跨域部署时配置) |
|
||||
| `VITE_GLOB_IMG_URL` | 图片前缀地址 |
|
||||
| `VITE_PORT` | 开发端口(默认 8001) |
|
||||
| `VITE_PORT` | 开发端口(默认 8002) |
|
||||
| `VITE_DROP_CONSOLE` | 构建时删除 console |
|
||||
|
||||
## 配置文件对照
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
|
||||
```text
|
||||
document/
|
||||
├── mysql/rxthinkcmf.laravel13.elevue.sql # MySQL 版本(约 216MB)
|
||||
├── postgresql/rxthinkcmf.laravel13.elevue.sql # PostgreSQL 版本
|
||||
├── sqlserver/rxthinkcmf.laravel13.elevue.sql # SQL Server 版本
|
||||
├── oracle/rxthinkcmf.laravel13.elevue.sql # Oracle 版本
|
||||
└── sqlite/rxthinkcmf.laravel13.elevue.sql # SQLite 版本
|
||||
├── mysql/rxthinkcmf.laravel13.antdvue.sql # MySQL 版本(约 216MB)
|
||||
├── postgresql/rxthinkcmf.laravel13.antdvue.sql # PostgreSQL 版本
|
||||
├── sqlserver/rxthinkcmf.laravel13.antdvue.sql # SQL Server 版本
|
||||
├── oracle/rxthinkcmf.laravel13.antdvue.sql # Oracle 版本
|
||||
└── sqlite/rxthinkcmf.laravel13.antdvue.sql # SQLite 版本
|
||||
```
|
||||
|
||||
各脚本已针对对应数据库的 SQL 语法做了适配,可直接导入使用。
|
||||
|
||||
@@ -66,7 +66,6 @@ export enum PageEnum {
|
||||
|
||||
| 文件 | 导出 | 说明 |
|
||||
|------|------|------|
|
||||
| `avatarEnum.ts` | `avatarEnum` | 默认头像资源路径(avatar-1 ~ 6) |
|
||||
| `breakpointEnum.ts` | `sizeEnum` / `screenEnum` / `screenMap` | 响应式断点(XS 480 ~ XXL 1600) |
|
||||
| `cacheEnum.ts` | `TOKEN_KEY`、`USER_INFO_KEY`、`ROLES_KEY` 等 | 本地缓存键名常量 |
|
||||
| `permissionsEnum.ts` | `PermissionsEnum`(interface) | 权限项类型 `{ value, label }` |
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
| TypeScript | - | JavaScript 超集,类型安全 |
|
||||
| Vite | - | 前端构建工具 |
|
||||
| Pinia | - | Vue 3 官方状态管理库 |
|
||||
| ElementPlus | - | Vue 3 UI 组件库 |
|
||||
| AntDesign Vue | - | Vue 3 UI 组件库(ant-design-vue) |
|
||||
| Axios | - | HTTP 请求库 |
|
||||
| TailwindCSS | - | 原子化 CSS 框架 |
|
||||
| TinyMce | - | 富文本编辑器 |
|
||||
|
||||
@@ -85,29 +85,6 @@ await userStore.logout();
|
||||
|
||||
---
|
||||
|
||||
## ossConfigStore
|
||||
|
||||
**文件**:`ui/src/store/modules/ossConfig.ts`
|
||||
|
||||
| 字段 | 说明 |
|
||||
|------|------|
|
||||
| `ossConfig` | 云存储配置 |
|
||||
|
||||
路由守卫中初始化,用于文件上传。
|
||||
|
||||
---
|
||||
|
||||
## designSettingStore
|
||||
|
||||
**文件**:`ui/src/store/modules/designSetting.ts`(id:`app-design-setting`)
|
||||
|
||||
| 字段 | 说明 |
|
||||
|------|------|
|
||||
| `appTheme` | 主题色 |
|
||||
| `darkMode` | 是否暗色模式 |
|
||||
|
||||
---
|
||||
|
||||
## tabsViewStore
|
||||
|
||||
**文件**:`ui/src/store/modules/tabsView.ts`(id:`app-tabs-view`)
|
||||
|
||||
Reference in New Issue
Block a user