签入版本
This commit is contained in:
@@ -27,7 +27,6 @@
|
||||
| Region | `components/Region/` | 行政区划 | `value`、`level` |
|
||||
| Cropper | `components/Cropper/` | 头像裁剪 | `image`、`aspectRatio` |
|
||||
| NumberInput | `components/numberInput/` | 数字输入 | `value`、`min`、`max` |
|
||||
| PriceInput | `components/priceInput/` | 价格输入 | `value`、`precision` |
|
||||
|
||||
## Excel
|
||||
|
||||
@@ -41,7 +40,6 @@
|
||||
| 组件 | 路径 | 说明 |
|
||||
|------|------|------|
|
||||
| Authority | `components/Authority/` | 权限组件(根据权限显示/隐藏) |
|
||||
| CheckToken | `components/CheckToken/` | Token 校验组件 |
|
||||
| Lockscreen | `components/Lockscreen/` | 锁屏组件 |
|
||||
| Websocket | `components/Websocket/` | WebSocket 组件 |
|
||||
|
||||
@@ -51,20 +49,34 @@
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<BasicTable @register="registerTable" />
|
||||
<BasicTable
|
||||
:columns="columns"
|
||||
:request="loadDataTable"
|
||||
:row-key="(row) => row.id"
|
||||
ref="tableRef"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-button type="link" @click="handleEdit(record)">编辑</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { BasicTable, useTable } from '@/components/Table';
|
||||
import { ref } from 'vue';
|
||||
import { getExamplePage } from '@/api/tool/example';
|
||||
|
||||
const [registerTable] = useTable({
|
||||
api: getExamplePage,
|
||||
columns: [
|
||||
{ title: 'ID', field: 'id', width: 80 },
|
||||
{ title: '名称', field: 'name' },
|
||||
{ title: '状态', field: 'statusText', width: 100 },
|
||||
],
|
||||
});
|
||||
const tableRef = ref();
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', width: 80 },
|
||||
{ title: '名称', dataIndex: 'name' },
|
||||
{ title: '状态', dataIndex: 'statusText', width: 100 },
|
||||
{ title: '操作', dataIndex: 'action', key: 'action', width: 180 },
|
||||
];
|
||||
|
||||
const loadDataTable = async (params) => await getExamplePage(params);
|
||||
const handleEdit = (record) => {};
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -80,8 +92,13 @@ import { BasicForm, useForm } from '@/components/Form';
|
||||
|
||||
const [registerForm] = useForm({
|
||||
schemas: [
|
||||
{ field: 'name', label: '名称', component: 'Input', required: true },
|
||||
{ field: 'status', label: '状态', component: 'Select', componentProps: { options: [...] } },
|
||||
{
|
||||
name: 'name',
|
||||
label: '名称',
|
||||
component: 'Input',
|
||||
rules: [{ required: true, message: '请输入名称', trigger: ['blur'] }],
|
||||
},
|
||||
{ name: 'status', label: '状态', component: 'Select', componentProps: { options: [...] } },
|
||||
],
|
||||
});
|
||||
</script>
|
||||
@@ -91,15 +108,19 @@ const [registerForm] = useForm({
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<BasicModal @register="registerModal" @ok="handleSubmit" />
|
||||
<basicModal @register="registerModal" @ok="handleSubmit">
|
||||
<template #default>
|
||||
<!-- 表单内容 -->
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { BasicModal, useModal } from '@/components/Modal';
|
||||
import { basicModal, useModal } from '@/components/Modal';
|
||||
|
||||
const [registerModal, { openModal, closeModal }] = useModal();
|
||||
|
||||
const handleAdd = () => openModal(true, { isUpdate: false });
|
||||
const handleAdd = () => openModal();
|
||||
const handleSubmit = async () => { /* ... */ closeModal(); };
|
||||
</script>
|
||||
```
|
||||
@@ -6,11 +6,11 @@
|
||||
|
||||
```text
|
||||
document/
|
||||
├── mysql/rxthinkcmf.thinkphp6.elevue.sql # MySQL 版本
|
||||
├── postgresql/rxthinkcmf.thinkphp6.elevue.sql # PostgreSQL 版本
|
||||
├── sqlserver/rxthinkcmf.thinkphp6.elevue.sql # SQL Server 版本
|
||||
├── oracle/rxthinkcmf.thinkphp6.elevue.sql # Oracle 版本
|
||||
└── sqlite/rxthinkcmf.thinkphp6.elevue.sql # SQLite 版本
|
||||
├── mysql/rxthinkcmf.thinkphp8.antdvue.sql # MySQL 版本
|
||||
├── postgresql/rxthinkcmf.thinkphp8.antdvue.sql # PostgreSQL 版本
|
||||
├── sqlserver/rxthinkcmf.thinkphp8.antdvue.sql # SQL Server 版本
|
||||
├── oracle/rxthinkcmf.thinkphp8.antdvue.sql # Oracle 版本
|
||||
└── sqlite/rxthinkcmf.thinkphp8.antdvue.sql # SQLite 版本
|
||||
```
|
||||
|
||||
各脚本已针对对应数据库的 SQL 语法做了适配,可直接导入使用。
|
||||
|
||||
@@ -28,9 +28,9 @@
|
||||
| TypeScript | - | JavaScript 超集,类型安全 |
|
||||
| Vite | - | 前端构建工具 |
|
||||
| Pinia | - | Vue 3 官方状态管理库 |
|
||||
| ElementPlus | - | Vue 3 UI 组件库 |
|
||||
| AntDesign Vue | - | Vue 3 UI 组件库 |
|
||||
| Axios | - | HTTP 请求库 |
|
||||
| TailwindCSS | - | 原子化 CSS 框架 |
|
||||
| WindiCSS | - | 原子化 CSS 框架(兼容 Tailwind 语法) |
|
||||
| TinyMce | - | 富文本编辑器 |
|
||||
| ECharts | - | 数据可视化图表库 |
|
||||
| pnpm | - | 高性能 Node.js 包管理器 |
|
||||
|
||||
@@ -74,33 +74,13 @@ await userStore.logout();
|
||||
|
||||
| 字段 | 说明 |
|
||||
|------|------|
|
||||
| `navMode` | 导航模式(侧边/顶部) |
|
||||
| `navTheme` | 导航主题(暗色/亮色) |
|
||||
| `isShowMenuBar` | 是否显示菜单栏 |
|
||||
| `isCollapse` | 菜单是否折叠 |
|
||||
|
||||
---
|
||||
|
||||
## ossConfigStore
|
||||
|
||||
**文件**:`store/modules/ossConfig.ts`
|
||||
|
||||
| 字段 | 说明 |
|
||||
|------|------|
|
||||
| `ossConfig` | 云存储配置 |
|
||||
|
||||
路由守卫中初始化,用于文件上传。
|
||||
|
||||
---
|
||||
|
||||
## designSettingStore
|
||||
|
||||
**文件**:`store/modules/designSetting.ts`
|
||||
|
||||
| 字段 | 说明 |
|
||||
|------|------|
|
||||
| `appTheme` | 主题色 |
|
||||
| `darkMode` | 是否暗色模式 |
|
||||
| `layout` | 布局模式(side 侧边 / top 顶部 / mix 拆分) |
|
||||
| `navTheme` | 导航主题(light / dark) |
|
||||
| `headerTheme` | 标题栏主题 |
|
||||
| `menuSetting` | 菜单配置(宽度、折叠、固定等) |
|
||||
| `multiTabsSetting` | 多标签页配置 |
|
||||
| `permissionMode` | 菜单权限模式(ROLE / BACK) |
|
||||
| `isWaterMark` | 是否显示水印 |
|
||||
|
||||
---
|
||||
|
||||
@@ -114,13 +94,29 @@ await userStore.logout();
|
||||
|
||||
| Action | 说明 |
|
||||
|--------|------|
|
||||
| `addTab(route)` | 添加标签 |
|
||||
| `removeTab(route)` | 关闭标签 |
|
||||
| `closeOtherTabs(route)` | 关闭其他标签 |
|
||||
| `addTabs(route)` | 添加标签 |
|
||||
| `closeCurrentTab(route)` | 关闭当前标签 |
|
||||
| `closeOtherTabs(route, activeKey)` | 关闭其他标签 |
|
||||
| `closeAllTabs()` | 关闭所有标签 |
|
||||
|
||||
---
|
||||
|
||||
## lockscreenStore
|
||||
|
||||
**文件**:`store/modules/lockscreen.ts`
|
||||
|
||||
| 字段 | 说明 |
|
||||
|------|------|
|
||||
| `isLock` | 是否锁屏 |
|
||||
| `lockTime` | 锁屏剩余时间 |
|
||||
|
||||
| Action | 说明 |
|
||||
|--------|------|
|
||||
| `setLock(flag)` | 设置锁屏状态(持久化到 Storage) |
|
||||
| `setLockTime(time)` | 设置锁屏时间 |
|
||||
|
||||
---
|
||||
|
||||
## 在组件外使用
|
||||
|
||||
```typescript
|
||||
|
||||
Reference in New Issue
Block a user