This commit is contained in:
张成
2025-11-06 16:19:23 +08:00
parent bad718ecb9
commit 2066796977
2 changed files with 51 additions and 23 deletions

View File

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