1
This commit is contained in:
@@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
## 🎯 Demo 项目
|
## 🎯 Demo 项目
|
||||||
|
|
||||||
📦 **已提供完整的示例项目**:`demo-project/`
|
📦 **已提供完整的示例项目**:`demo/`
|
||||||
|
|
||||||
一个开箱即用的完整示例,包含:
|
一个开箱即用的完整示例,包含:
|
||||||
- ✅ 框架集成配置
|
- ✅ 框架集成配置
|
||||||
@@ -18,12 +18,12 @@
|
|||||||
|
|
||||||
**快速体验**:
|
**快速体验**:
|
||||||
```bash
|
```bash
|
||||||
cd demo-project
|
cd demo
|
||||||
npm install
|
npm install
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
详细说明:[demo-project/README.md](./demo-project/README.md)
|
详细说明:[demo/README.md](./demo/README.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -46,7 +46,7 @@ npm run dev
|
|||||||
✅ **主页组件**(欢迎页面,自动显示系统标题)
|
✅ **主页组件**(欢迎页面,自动显示系统标题)
|
||||||
✅ **系统管理页面**(sys 开头的所有页面和功能)
|
✅ **系统管理页面**(sys 开头的所有页面和功能)
|
||||||
✅ **系统 API**(system 和 system 所有 API)
|
✅ **系统 API**(system 和 system 所有 API)
|
||||||
✅ **全局组件**(Tables、Editor、Upload、FieldRenderer 等)
|
✅ **全局组件**(Tables、Editor、Upload、FieldRenderer、FloatPanel 等)
|
||||||
✅ **布局组件**(Main、ParentView)
|
✅ **布局组件**(Main、ParentView)
|
||||||
✅ **文件下载**(支持 CSV 等格式,自动处理换行符)
|
✅ **文件下载**(支持 CSV 等格式,自动处理换行符)
|
||||||
✅ **登录和错误页面**(Login、401、404、500)
|
✅ **登录和错误页面**(Login、401、404、500)
|
||||||
@@ -63,11 +63,11 @@ npm run dev
|
|||||||
|
|
||||||
### 🎯 方式一:使用 Demo 项目(推荐新手)
|
### 🎯 方式一:使用 Demo 项目(推荐新手)
|
||||||
|
|
||||||
我们提供了一个完整的 **demo-project** 示例项目,可以直接运行查看效果!
|
我们提供了一个完整的 **demo** 示例项目,可以直接运行查看效果!
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# 1. 进入 demo 项目
|
# 1. 进入 demo 项目
|
||||||
cd demo-project
|
cd demo
|
||||||
|
|
||||||
# 2. 安装依赖
|
# 2. 安装依赖
|
||||||
npm install
|
npm install
|
||||||
@@ -81,7 +81,7 @@ npm run dev
|
|||||||
- `/home` - 主页
|
- `/home` - 主页
|
||||||
- `/business/product` - 业务示例页面
|
- `/business/product` - 业务示例页面
|
||||||
|
|
||||||
**详细说明**:查看 `demo-project/README.md` 和 `demo-project/INSTALL.md`
|
**详细说明**:查看 `demo/README.md`
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -628,6 +628,7 @@ import {
|
|||||||
```javascript
|
```javascript
|
||||||
import {
|
import {
|
||||||
SysLog, // 系统日志管理
|
SysLog, // 系统日志管理
|
||||||
|
SysLogOperate, // 系统操作日志
|
||||||
SysParamSetup, // 参数设置
|
SysParamSetup, // 参数设置
|
||||||
SysRole, // 角色管理
|
SysRole, // 角色管理
|
||||||
SysUser // 用户管理
|
SysUser // 用户管理
|
||||||
@@ -645,7 +646,7 @@ import {
|
|||||||
|
|
||||||
#### 在路由中使用
|
#### 在路由中使用
|
||||||
```javascript
|
```javascript
|
||||||
import { HomePage, SysUser, SysRole, SysMenu } from 'admin-framework'
|
import { HomePage, SysUser, SysRole, SysMenu, SysLog, SysLogOperate } from 'admin-framework'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
@@ -667,6 +668,16 @@ const routes = [
|
|||||||
path: '/system/menu',
|
path: '/system/menu',
|
||||||
name: 'sys_menu',
|
name: 'sys_menu',
|
||||||
component: SysMenu
|
component: SysMenu
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/system/log',
|
||||||
|
name: 'sys_log',
|
||||||
|
component: SysLog
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/system/log_operate',
|
||||||
|
name: 'sys_log_operate',
|
||||||
|
component: SysLogOperate
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
```
|
```
|
||||||
@@ -691,19 +702,35 @@ const users = await userServer.getList({ page: 1 })
|
|||||||
const roles = await roleServer.getList()
|
const roles = await roleServer.getList()
|
||||||
```
|
```
|
||||||
|
|
||||||
#### system API
|
#### system API(所有 API 都在 systemApi 中)
|
||||||
```javascript
|
```javascript
|
||||||
import { systemHighApi } from 'admin-framework'
|
import { systemApi } from 'admin-framework'
|
||||||
|
|
||||||
// 使用示例
|
// 使用示例
|
||||||
const {
|
const {
|
||||||
|
userServer,
|
||||||
|
roleServer,
|
||||||
|
sysLogServe,
|
||||||
|
fileServe,
|
||||||
menuServer,
|
menuServer,
|
||||||
paramSetupServer,
|
paramSetupServer,
|
||||||
modelServer,
|
modelServer,
|
||||||
|
formServer,
|
||||||
|
formFieldServer,
|
||||||
|
modelFieldServer,
|
||||||
|
tableServer,
|
||||||
|
rolePermissionServer,
|
||||||
|
sysControlTypeServer,
|
||||||
|
sysModuleServer,
|
||||||
|
sysAddressServer,
|
||||||
|
systemTypeServer,
|
||||||
|
plaAccountServer,
|
||||||
// ... 其他 API
|
// ... 其他 API
|
||||||
} = systemHighApi
|
} = systemApi
|
||||||
|
|
||||||
// 调用 API
|
// 调用 API
|
||||||
|
const users = await userServer.getList({ page: 1 })
|
||||||
|
const roles = await roleServer.getList()
|
||||||
const menus = await menuServer.getTree()
|
const menus = await menuServer.getTree()
|
||||||
const params = await paramSetupServer.getOne('sys_title')
|
const params = await paramSetupServer.getOne('sys_title')
|
||||||
```
|
```
|
||||||
@@ -739,17 +766,11 @@ const params = await paramSetupServer.getOne('sys_title')
|
|||||||
ref="floatPanel"
|
ref="floatPanel"
|
||||||
title="详情面板"
|
title="详情面板"
|
||||||
position="right"
|
position="right"
|
||||||
:width="800"
|
|
||||||
:show-back="true"
|
:show-back="true"
|
||||||
back-text="返回"
|
back-text="返回"
|
||||||
@back="handleBack"
|
@back="handleBack"
|
||||||
>
|
>
|
||||||
<div>这里是面板内容</div>
|
<div>这里是面板内容</div>
|
||||||
|
|
||||||
<template slot="footer">
|
|
||||||
<Button @click="hidePanel">取消</Button>
|
|
||||||
<Button type="primary" @click="handleSave">保存</Button>
|
|
||||||
</template>
|
|
||||||
</FloatPanel>
|
</FloatPanel>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -810,14 +831,14 @@ export default {
|
|||||||
| 属性 | 类型 | 默认值 | 说明 |
|
| 属性 | 类型 | 默认值 | 说明 |
|
||||||
|------|------|--------|------|
|
|------|------|--------|------|
|
||||||
| `title` | String | `''` | 面板标题 |
|
| `title` | String | `''` | 面板标题 |
|
||||||
| `width` | String/Number | `'80%'` | 面板宽度(字符串或数字) |
|
| `width` | String/Number | `'100%'` | 面板宽度(字符串或数字),默认占满父容器 |
|
||||||
| `height` | String/Number | `'80%'` | 面板高度(字符串或数字) |
|
| `height` | String/Number | `'100%'` | 面板高度(字符串或数字),默认占满父容器 |
|
||||||
| `position` | String | `'right'` | 面板位置:`left`、`right`、`top`、`bottom`、`center` |
|
| `position` | String | `'right'` | 面板位置:`left`、`right`、`top`、`bottom`、`center` |
|
||||||
| `showBack` | Boolean | `true` | 是否显示返回按钮 |
|
| `showBack` | Boolean | `true` | 是否显示返回按钮 |
|
||||||
| `showClose` | Boolean | `false` | 是否显示关闭按钮 |
|
| `showClose` | Boolean | `false` | 是否显示关闭按钮 |
|
||||||
| `backText` | String | `'返回'` | 返回按钮文字 |
|
| `backText` | String | `'返回'` | 返回按钮文字 |
|
||||||
| `closeOnClickBackdrop` | Boolean | `false` | 点击遮罩是否关闭 |
|
| `closeOnClickBackdrop` | Boolean | `false` | 点击遮罩是否关闭 |
|
||||||
| `mask` | Boolean | `true` | 是否显示遮罩 |
|
| `mask` | Boolean | `false` | 是否显示遮罩(默认不显示) |
|
||||||
| `zIndex` | Number | `1000` | 层级 |
|
| `zIndex` | Number | `1000` | 层级 |
|
||||||
|
|
||||||
**方法:**
|
**方法:**
|
||||||
@@ -839,7 +860,6 @@ export default {
|
|||||||
|------|------|
|
|------|------|
|
||||||
| `default` | 面板主体内容 |
|
| `default` | 面板主体内容 |
|
||||||
| `header-right` | 头部右侧内容 |
|
| `header-right` | 头部右侧内容 |
|
||||||
| `footer` | 底部内容 |
|
|
||||||
|
|
||||||
**位置说明:**
|
**位置说明:**
|
||||||
|
|
||||||
@@ -849,6 +869,14 @@ export default {
|
|||||||
- `bottom`: 从底部滑入
|
- `bottom`: 从底部滑入
|
||||||
- `center`: 居中显示,带缩放动画
|
- `center`: 居中显示,带缩放动画
|
||||||
|
|
||||||
|
**特性说明:**
|
||||||
|
|
||||||
|
- ✅ 基于父元素定位,不会遮挡菜单
|
||||||
|
- ✅ 宽度和高度默认 100%,占满父容器
|
||||||
|
- ✅ 无遮罩背景,完全浮在父页面上
|
||||||
|
- ✅ 路由切换或组件销毁时自动关闭
|
||||||
|
- ✅ 支持多种位置和动画效果
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🛠️ 开发指南
|
## 🛠️ 开发指南
|
||||||
|
|||||||
@@ -50,6 +50,7 @@ export function setupComponentMap(customMap = {}, uiTool) {
|
|||||||
export default {
|
export default {
|
||||||
HomePage,
|
HomePage,
|
||||||
SysLog,
|
SysLog,
|
||||||
|
SysLogOperate,
|
||||||
SysParamSetup,
|
SysParamSetup,
|
||||||
SysRole,
|
SysRole,
|
||||||
SysUser,
|
SysUser,
|
||||||
@@ -60,6 +61,5 @@ export default {
|
|||||||
Page401,
|
Page401,
|
||||||
Page404,
|
Page404,
|
||||||
Page500,
|
Page500,
|
||||||
setupComponentMap,
|
setupComponentMap
|
||||||
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user