mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-08 01:17:23 +08:00
Merge branch 'pure-admin:main' into main
This commit is contained in:
EchoByte
GitHub
commit
d71e6e1647
@ -1,3 +1,39 @@
|
||||
# 5.2.0 (2024-03-22)
|
||||
|
||||
### ✔️ refactor
|
||||
|
||||
- Place the full screen button at the top to make it visible and easy to operate
|
||||
|
||||
### 🎫 Feat
|
||||
|
||||
- Added `v-ripple` command (water ripple effect)
|
||||
- Add global `Stretch` configuration to the content area to customize compact pages and easily find the required information
|
||||
- Added roaming guidance based on `ElTour`
|
||||
- Improve role management-menu permission function, novel interactive experience
|
||||
- Add system monitoring-online users
|
||||
- Add system monitoring-login log
|
||||
- Add system monitoring-operation log
|
||||
- Add system monitoring-system log
|
||||
- Add more more convenient `pure-admin-table` editable table examples (overall editing, single row editing, cell editing)
|
||||
- The `ReSegmented` component has a new `block` attribute to make it fit the width of the parent element
|
||||
- Add [vue-flow](https://vueflow.dev/) flow chart example
|
||||
- Add virtual table example
|
||||
- Added Gantt chart example
|
||||
- Add graphic verification code example
|
||||
- Add form examples, which can be generated through `JSON` format configuration (basic form, pop-up form, drawer form, step-by-step form, search form)
|
||||
- Add a folding and expanding menu function on the middle right side of the left menu
|
||||
|
||||
### 🐞 Bug fixes
|
||||
|
||||
- Fixed the scroll bar issue when clicking on the registration page under `windwos`
|
||||
- Fixed the problem of scroll bars appearing in the content area when switching pages under `windows`
|
||||
- Fixed the problem of status style disappearing in `pure-table` with status table under dark overall style
|
||||
- Fixed the problem of turning on the gray mode and dark overall style in the project configuration and refreshing the overall style of the page.
|
||||
|
||||
### 🍏 Perf
|
||||
|
||||
- All pages of system management and system monitoring are compatible with mobile terminals
|
||||
|
||||
# 5.1.0 (2024-03-02)
|
||||
|
||||
### ✔️ refactor
|
||||
|
||||
36
CHANGELOG.md
36
CHANGELOG.md
@ -1,3 +1,39 @@
|
||||
# 5.2.0 (2024-03-22)
|
||||
|
||||
### ✔️ refactor
|
||||
|
||||
- Place the full screen button at the top to make it visible and easy to operate
|
||||
|
||||
### 🎫 Feat
|
||||
|
||||
- Added `v-ripple` command (water ripple effect)
|
||||
- Add global `Stretch` configuration to the content area to customize compact pages and easily find the required information
|
||||
- Added roaming guidance based on `ElTour`
|
||||
- Improve role management-menu permission function, novel interactive experience
|
||||
- Add system monitoring-online users
|
||||
- Add system monitoring-login log
|
||||
- Add system monitoring-operation log
|
||||
- Add system monitoring-system log
|
||||
- Add more more convenient `pure-admin-table` editable table examples (overall editing, single row editing, cell editing)
|
||||
- The `ReSegmented` component has a new `block` attribute to make it fit the width of the parent element
|
||||
- Add [vue-flow](https://vueflow.dev/) flow chart example
|
||||
- Add virtual table example
|
||||
- Added Gantt chart example
|
||||
- Add graphic verification code example
|
||||
- Add form examples, which can be generated through `JSON` format configuration (basic form, pop-up form, drawer form, step-by-step form, search form)
|
||||
- Add a folding and expanding menu function on the middle right side of the left menu
|
||||
|
||||
### 🐞 Bug fixes
|
||||
|
||||
- Fixed the scroll bar issue when clicking on the registration page under `windwos`
|
||||
- Fixed the problem of scroll bars appearing in the content area when switching pages under `windows`
|
||||
- Fixed the problem of status style disappearing in `pure-table` with status table under dark overall style
|
||||
- Fixed the problem of turning on the gray mode and dark overall style in the project configuration and refreshing the overall style of the page.
|
||||
|
||||
### 🍏 Perf
|
||||
|
||||
- All pages of system management and system monitoring are compatible with mobile terminals
|
||||
|
||||
# 5.1.0 (2024-03-02)
|
||||
|
||||
### ✔️ refactor
|
||||
|
||||
@ -1,3 +1,39 @@
|
||||
# 5.2.0 (2024-03-22)
|
||||
|
||||
### ✔️ refactor
|
||||
|
||||
- 将全屏按钮置于顶部，使其显眼且易于操作
|
||||
|
||||
### 🎫 Feat
|
||||
|
||||
- 新增`v-ripple`指令(水波纹效果)
|
||||
- 内容区添加全局`Stretch`配置，可自定义紧凑页面，轻松找到所需信息
|
||||
- 添加基于`ElTour`实现的漫游式引导
|
||||
- 完善角色管理-菜单权限功能，新颖的交互体验
|
||||
- 添加系统监控-在线用户
|
||||
- 添加系统监控-登录日志
|
||||
- 添加系统监控-操作日志
|
||||
- 添加系统监控-系统日志
|
||||
- 添加更多更方便的`pure-admin-table`可编辑表格示例（整体编辑、单行编辑、单元格编辑）
|
||||
- `ReSegmented`组件新增`block`属性，可使其适合父元素宽度
|
||||
- 添加 [vue-flow](https://vueflow.dev/) 流程图示例
|
||||
- 添加虚拟表格示例
|
||||
- 添加甘特图示例
|
||||
- 添加图形验证码示例
|
||||
- 添加表单示例，可通过`JSON`格式配置生成（基础表单、弹框表单、抽屉表单、分步表单、搜索表单）
|
||||
- 在左侧菜单右中侧再加一个折叠展开菜单的功能
|
||||
|
||||
### 🐞 Bug fixes
|
||||
|
||||
- 修复`windwos`下点击注册页面会出现滚动条问题
|
||||
- 修复`windows`下页面切换，内容区会出现滚动条问题
|
||||
- 修复`pure-table`带状态表格在深色整体风格下状态样式消失的问题
|
||||
- 修复项目配置中开启灰色模式和深色整体风格，刷新页面整体风格异常
|
||||
|
||||
### 🍏 Perf
|
||||
|
||||
- 系统管理、系统监控的所有页面兼容移动端
|
||||
|
||||
# 5.1.0 (2024-03-02)
|
||||
|
||||
### ✔️ refactor
|
||||
|
||||
@ -10,6 +10,12 @@
|
||||
|
||||
`vue-pure-admin` is an open source, free and out-of-the-box middle and backend management system template. Completely adopts `ECMAScript` module (`ESM`) specifications to write and organize code, using the latest `Vue3`, `Vite`, `Element-Plus`, `TypeScript`, `Pinia`, `Tailwindcss` and other mainstream technologies develop
|
||||
|
||||
## Sponsors
|
||||
|
||||
<a class="logo" href="https://ai-tools.cn/resume/start" target="_blank" rel="sponsored noopener">
|
||||
<img src="./public/sponsors/aitools.svg" alt="aitools">
|
||||
</a>
|
||||
|
||||
## Thin version (offering non-internationalized and internationalized versions)
|
||||
|
||||
The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`
|
||||
@ -17,15 +23,16 @@ The simplified version is based on the shelf extracted from [vue-pure-admin](htt
|
||||
[Click to view the non-internationalized version](https://github.com/pure-admin/pure-admin-thin)
|
||||
[Click to view Internationalization version](https://github.com/pure-admin/pure-admin-thin/tree/i18n)
|
||||
|
||||
## Supporting Video
|
||||
## Supporting video
|
||||
|
||||
[Click Watch Tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
|
||||
[Click Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq)
|
||||
[Click me to view UI design](https://www.bilibili.com/video/BV17g411T7rq)
|
||||
[Click me to view the rapid development tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
|
||||
[Click me to view all pages and function demonstrations of vue-pure-admin](https://www.bilibili.com/video/BV1Rx4y1U7Mv)
|
||||
|
||||
## Docs
|
||||
## Nanny-level documents
|
||||
|
||||
[View vue-pure-admin documentation](https://yiming_chang.gitee.io/pure-admin-doc)
|
||||
[View @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
|
||||
[Click me to view vue-pure-admin documentation](https://yiming_chang.gitee.io/pure-admin-doc)
|
||||
[Click me to view @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
|
||||
|
||||
## Quality service, software outsourcing, sponsorship support
|
||||
|
||||
@ -168,7 +175,7 @@ You are very welcome to join！[Raise an issue](https://github.com/pure-admin/vu
|
||||
|
||||
Thank you very much for your in-depth understanding of the source code and your outstanding contributions to the `pure-admin` organization ❤️
|
||||
|
||||
| **Contributor** | **SpecificCode** |
|
||||
| **Contributor** | **SpecificCode** |
|
||||
| :---------------------------------------------: | :------------------------------------------------------------------------------: |
|
||||
| [hb0730](https://github.com/hb0730) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=hb0730) |
|
||||
| [o-cc](https://github.com/o-cc) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=o-cc) |
|
||||
|
||||
12
README.md
12
README.md
@ -8,7 +8,14 @@
|
||||
|
||||
## 简介
|
||||
|
||||
`vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。完全采用 `ECMAScript` 模块（`ESM`）规范来编写和组织代码，使用了最新的 `Vue3`、`Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发
|
||||
`vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。完全采用 `ECMAScript` 模块（`ESM`）规范来编写和组织代码，使用了最新的 `Vue3`、
|
||||
`Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发
|
||||
|
||||
## 赞助商
|
||||
|
||||
<a class="logo" href="https://ai-tools.cn/resume/start" target="_blank" rel="sponsored noopener">
|
||||
<img src="./public/sponsors/aitools.svg" alt="aitools">
|
||||
</a>
|
||||
|
||||
## 精简版本（实际项目开发请用精简版本，提供 `非国际化` 、`国际化` 两个版本选择）
|
||||
|
||||
@ -19,8 +26,9 @@
|
||||
|
||||
## 配套视频
|
||||
|
||||
[点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
|
||||
[点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)
|
||||
[点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
|
||||
[点我查看 vue-pure-admin 的所有页面、功能演示](https://www.bilibili.com/video/BV1Rx4y1U7Mv)
|
||||
|
||||
## 配套保姆级文档
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ import boxen, { type Options as BoxenOptions } from "boxen";
|
||||
dayjs.extend(duration);
|
||||
|
||||
const welcomeMessage = gradientString("cyan", "magenta").multiline(
|
||||
`Hello! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://yiming_chang.gitee.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
|
||||
`您好! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://yiming_chang.gitee.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
|
||||
);
|
||||
|
||||
const boxenOptions: BoxenOptions = {
|
||||
|
||||
@ -16,6 +16,7 @@ const include = [
|
||||
"qrcode",
|
||||
"intro.js",
|
||||
"vue-i18n",
|
||||
"vxe-table",
|
||||
"vue-types",
|
||||
"js-cookie",
|
||||
"vue-tippy",
|
||||
@ -35,6 +36,8 @@ const include = [
|
||||
"vue-json-pretty",
|
||||
"@logicflow/core",
|
||||
"@pureadmin/utils",
|
||||
"@vue-office/docx",
|
||||
"@vue-office/excel",
|
||||
"@wangeditor/editor",
|
||||
"responsive-storage",
|
||||
"plus-pro-components",
|
||||
@ -44,6 +47,7 @@ const include = [
|
||||
"@amap/amap-jsapi-loader",
|
||||
"el-table-infinite-scroll",
|
||||
"vue-waterfall-plugin-next",
|
||||
"@infectoone/vue-ganttastic",
|
||||
"@wangeditor/editor-for-vue",
|
||||
"vuedraggable/src/vuedraggable"
|
||||
];
|
||||
|
||||
@ -26,6 +26,7 @@ menus:
|
||||
hshome: Home
|
||||
hslogin: Login
|
||||
hsempty: Empty Page
|
||||
hstable: Table
|
||||
hssysManagement: System Manage
|
||||
hsUser: User Manage
|
||||
hsRole: Role Manage
|
||||
@ -70,6 +71,7 @@ menus:
|
||||
hsTag: Tag
|
||||
hsStatistic: Statistic
|
||||
hsCollapse: Collapse
|
||||
hsGanttastic: Gantt Chart
|
||||
hsProgress: Progress
|
||||
hsUpload: File Upload
|
||||
hsCheckCard: CheckCard
|
||||
@ -92,6 +94,7 @@ menus:
|
||||
hsWavesurfer: Audio Visualization
|
||||
hsRipple: Ripple
|
||||
hsOptimize: Debounce、Throttle、Copy、Longpress Directives
|
||||
hsVerify: Captcha
|
||||
hsWatermark: Water Mark
|
||||
hsPrint: Print
|
||||
hsDownload: Download
|
||||
@ -123,14 +126,18 @@ menus:
|
||||
hsSwiper: Swiper Plugin
|
||||
hsVirtualList: Virtual List
|
||||
hsPdf: PDF Preview
|
||||
hsWord: Word Preview
|
||||
hsExcels: Excel Preview
|
||||
hsExcel: Export Excel
|
||||
hsInfiniteScroll: Table Infinite Scroll
|
||||
hsSensitive: Sensitive Filter
|
||||
hsPinyin: PinYin
|
||||
hsdanmaku: Danmaku
|
||||
hsSchemaForm: Form
|
||||
hsPureTableBase: Base Usage
|
||||
hsPureTableHigh: High Usage
|
||||
hsPureTableEdit: Edit Usage
|
||||
hsVxeTable: Virtual Usage
|
||||
hsboard: Paint Board
|
||||
hsMenuoverflow: Menu Overflow Show Tooltip Text
|
||||
hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text
|
||||
|
||||
@ -27,6 +27,7 @@ menus:
|
||||
hshome: 首页
|
||||
hslogin: 登录
|
||||
hsempty: 无Layout页
|
||||
hstable: 表格
|
||||
hssysManagement: 系统管理
|
||||
hsUser: 用户管理
|
||||
hsRole: 角色管理
|
||||
@ -71,6 +72,7 @@ menus:
|
||||
hsTag: 标签
|
||||
hsStatistic: 统计组件
|
||||
hsCollapse: 折叠面板
|
||||
hsGanttastic: 甘特图
|
||||
hsProgress: 进度条
|
||||
hsUpload: 文件上传
|
||||
hsCheckCard: 多选卡片
|
||||
@ -93,6 +95,7 @@ menus:
|
||||
hsWavesurfer: 音频可视化
|
||||
hsRipple: 波纹(Ripple)
|
||||
hsOptimize: 防抖、截流、复制、长按指令
|
||||
hsVerify: 图形验证码
|
||||
hsWatermark: 水印
|
||||
hsPrint: 打印
|
||||
hsDownload: 下载
|
||||
@ -114,7 +117,7 @@ menus:
|
||||
hsIconSelect: 图标选择器
|
||||
hsTimeline: 时间线
|
||||
hsLineTree: 树形连接线
|
||||
hsList: 列表页
|
||||
hsList: 列表页面
|
||||
hsListCard: 卡片列表页
|
||||
hsDebounce: 防抖节流
|
||||
hsFormDesign: 表单设计器
|
||||
@ -124,14 +127,18 @@ menus:
|
||||
hsSwiper: Swiper插件
|
||||
hsVirtualList: 虚拟列表
|
||||
hsPdf: PDF预览
|
||||
hsWord: Word预览
|
||||
hsExcels: Excel预览
|
||||
hsExcel: 导出Excel
|
||||
hsInfiniteScroll: 表格无限滚动
|
||||
hsSensitive: 敏感词过滤
|
||||
hsPinyin: 汉语拼音
|
||||
hsdanmaku: 弹幕
|
||||
hsSchemaForm: 表单
|
||||
hsPureTableBase: 基础用法
|
||||
hsPureTableHigh: 高级用法
|
||||
hsPureTableEdit: 可编辑用法
|
||||
hsVxeTable: 虚拟滚动
|
||||
hsboard: 艺术画板
|
||||
hsMenuoverflow: 目录超出显示 Tooltip 文字提示
|
||||
hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
|
||||
|
||||
49
package.json
49
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-pure-admin",
|
||||
"version": "5.1.0",
|
||||
"version": "5.2.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@ -50,24 +50,29 @@
|
||||
"dependencies": {
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"@howdyjs/mouse-menu": "^2.1.3",
|
||||
"@logicflow/core": "^1.2.22",
|
||||
"@logicflow/extension": "^1.2.22",
|
||||
"@infectoone/vue-ganttastic": "^2.3.1",
|
||||
"@logicflow/core": "^1.2.23",
|
||||
"@logicflow/extension": "^1.2.23",
|
||||
"@pureadmin/descriptions": "^1.2.1",
|
||||
"@pureadmin/table": "^3.1.2",
|
||||
"@pureadmin/utils": "^2.4.7",
|
||||
"@vue-flow/background": "^1.3.0",
|
||||
"@vue-flow/core": "^1.33.4",
|
||||
"@vue-office/docx": "^1.6.0",
|
||||
"@vue-office/excel": "^1.7.2",
|
||||
"@vueuse/core": "^10.9.0",
|
||||
"@vueuse/motion": "^2.1.0",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"@zxcvbn-ts/core": "^3.0.4",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.6.7",
|
||||
"axios": "^1.6.8",
|
||||
"china-area-data": "^5.0.1",
|
||||
"cropperjs": "^1.6.1",
|
||||
"dayjs": "^1.11.10",
|
||||
"echarts": "^5.5.0",
|
||||
"el-table-infinite-scroll": "^3.0.3",
|
||||
"element-plus": "^2.6.1",
|
||||
"element-plus": "^2.6.2",
|
||||
"intro.js": "^7.2.0",
|
||||
"js-cookie": "^3.0.5",
|
||||
"jsbarcode": "^3.11.6",
|
||||
@ -78,7 +83,7 @@
|
||||
"path": "^0.12.7",
|
||||
"pinia": "^2.1.7",
|
||||
"pinyin-pro": "^3.19.6",
|
||||
"plus-pro-components": "^0.0.2",
|
||||
"plus-pro-components": "^0.0.5",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.12.0",
|
||||
"responsive-storage": "^2.2.0",
|
||||
@ -89,22 +94,24 @@
|
||||
"v3-infinite-loading": "^1.3.1",
|
||||
"version-rocket": "^1.7.1",
|
||||
"vue": "^3.4.21",
|
||||
"vue-i18n": "^9.10.1",
|
||||
"vue-json-pretty": "^2.3.0",
|
||||
"vue-pdf-embed": "^2.0.2",
|
||||
"vue-i18n": "^9.10.2",
|
||||
"vue-json-pretty": "^2.4.0",
|
||||
"vue-pdf-embed": "^2.0.3",
|
||||
"vue-router": "^4.3.0",
|
||||
"vue-tippy": "^6.4.1",
|
||||
"vue-types": "^5.1.1",
|
||||
"vue-virtual-scroller": "2.0.0-beta.8",
|
||||
"vue-waterfall-plugin-next": "^2.4.3",
|
||||
"vue3-danmaku": "^1.6.0",
|
||||
"vue3-puzzle-vcode": "^1.1.7",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vxe-table": "^4.5.21",
|
||||
"wavesurfer.js": "^7.7.5",
|
||||
"xgplayer": "^3.0.14",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^19.1.0",
|
||||
"@commitlint/cli": "^19.2.1",
|
||||
"@commitlint/config-conventional": "^19.1.0",
|
||||
"@commitlint/types": "^19.0.3",
|
||||
"@eslint/js": "^8.57.0",
|
||||
@ -114,22 +121,24 @@
|
||||
"@iconify/vue": "^4.1.1",
|
||||
"@intlify/unplugin-vue-i18n": "^2.0.0",
|
||||
"@pureadmin/theme": "^3.2.0",
|
||||
"@types/dagre": "^0.7.52",
|
||||
"@types/gradient-string": "^1.1.5",
|
||||
"@types/intro.js": "^5.1.5",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@types/node": "^20.11.27",
|
||||
"@types/node": "^20.11.30",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"@types/qrcode": "^1.5.5",
|
||||
"@types/qs": "^6.9.12",
|
||||
"@types/qs": "^6.9.14",
|
||||
"@types/sortablejs": "^1.15.8",
|
||||
"@typescript-eslint/eslint-plugin": "^7.2.0",
|
||||
"@typescript-eslint/parser": "^7.2.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.3.1",
|
||||
"@typescript-eslint/parser": "^7.3.1",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
"autoprefixer": "^10.4.18",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"boxen": "^7.1.1",
|
||||
"cloc": "^2.11.0",
|
||||
"cssnano": "^6.1.0",
|
||||
"cssnano": "^6.1.1",
|
||||
"dagre": "^0.8.5",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-define-config": "^2.1.0",
|
||||
@ -138,9 +147,9 @@
|
||||
"gradient-string": "^2.0.2",
|
||||
"husky": "^9.0.11",
|
||||
"lint-staged": "^15.2.2",
|
||||
"postcss": "^8.4.35",
|
||||
"postcss": "^8.4.38",
|
||||
"postcss-html": "^1.6.0",
|
||||
"postcss-import": "^16.0.1",
|
||||
"postcss-import": "^16.1.0",
|
||||
"postcss-scss": "^4.0.9",
|
||||
"prettier": "^3.2.5",
|
||||
"rimraf": "^5.0.5",
|
||||
@ -153,8 +162,8 @@
|
||||
"stylelint-prettier": "^5.0.0",
|
||||
"svgo": "^3.2.0",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.4.2",
|
||||
"vite": "^5.1.6",
|
||||
"typescript": "^5.4.3",
|
||||
"vite": "^5.2.3",
|
||||
"vite-plugin-cdn-import": "^0.3.5",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-fake-server": "^2.1.1",
|
||||
|
||||
1907
pnpm-lock.yaml
generated
1907
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
||||
{
|
||||
"Version": "5.1.0",
|
||||
"Version": "5.2.0",
|
||||
"Title": "PureAdmin",
|
||||
"FixedHeader": true,
|
||||
"HiddenSideBar": false,
|
||||
@ -25,7 +25,7 @@
|
||||
"ResponsiveStorageNameSpace": "responsive-",
|
||||
"MenuSearchHistory": 6,
|
||||
"MapConfigure": {
|
||||
"amapKey": "97b3248d1553172e81f168cf94ea667e",
|
||||
"amapKey": "adc139d56406f3844c8f1cf1c6b65c41",
|
||||
"options": {
|
||||
"resizeEnable": true,
|
||||
"center": [113.6401, 34.72468],
|
||||
|
||||
1
public/sponsors/aitools.svg
Normal file
1
public/sponsors/aitools.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 80 KiB |
@ -9,9 +9,11 @@
|
||||
import { defineComponent } from "vue";
|
||||
import { checkVersion } from "version-rocket";
|
||||
import { ElConfigProvider } from "element-plus";
|
||||
import en from "element-plus/dist/locale/en.mjs";
|
||||
import { ReDialog } from "@/components/ReDialog";
|
||||
import en from "element-plus/dist/locale/en.mjs";
|
||||
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
|
||||
import plusEn from "plus-pro-components/locale/en.mjs";
|
||||
import plusZhCn from "plus-pro-components/locale/zh-cn.mjs";
|
||||
|
||||
export default defineComponent({
|
||||
name: "app",
|
||||
@ -21,7 +23,9 @@ export default defineComponent({
|
||||
},
|
||||
computed: {
|
||||
currentLocale() {
|
||||
return this.$storage.locale?.locale === "zh" ? zhCn : en;
|
||||
return this.$storage.locale?.locale === "zh"
|
||||
? { ...zhCn, ...plusZhCn }
|
||||
: { ...en, ...plusEn };
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
|
||||
@ -31,12 +31,14 @@ import Links from "@iconify-icons/ri/links-fill";
|
||||
import Search from "@iconify-icons/ri/search-line";
|
||||
import FlUser from "@iconify-icons/ri/admin-line";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
import BarChart from "@iconify-icons/ri/bar-chart-horizontal-line";
|
||||
import LoginLog from "@iconify-icons/ri/window-line";
|
||||
import Artboard from "@iconify-icons/ri/artboard-line";
|
||||
import SystemLog from "@iconify-icons/ri/file-search-line";
|
||||
import ListCheck from "@iconify-icons/ri/list-check";
|
||||
import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
|
||||
import OnlineUser from "@iconify-icons/ri/user-voice-line";
|
||||
import EditBoxLine from "@iconify-icons/ri/edit-box-line";
|
||||
import OperationLog from "@iconify-icons/ri/history-fill";
|
||||
import InformationLine from "@iconify-icons/ri/information-line";
|
||||
import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
|
||||
@ -52,12 +54,14 @@ addIcon("ri:table-line", Table);
|
||||
addIcon("ri:search-line", Search);
|
||||
addIcon("ri:admin-line", FlUser);
|
||||
addIcon("ri:settings-3-line", Setting);
|
||||
addIcon("ri:bar-chart-horizontal-line", BarChart);
|
||||
addIcon("ri:window-line", LoginLog);
|
||||
addIcon("ri:file-search-line", SystemLog);
|
||||
addIcon("ri:artboard-line", Artboard);
|
||||
addIcon("ri:list-check", ListCheck);
|
||||
addIcon("ri:ubuntu-fill", UbuntuFill);
|
||||
addIcon("ri:user-voice-line", OnlineUser);
|
||||
addIcon("ri:edit-box-line", EditBoxLine);
|
||||
addIcon("ri:history-fill", OperationLog);
|
||||
addIcon("ri:information-line", InformationLine);
|
||||
addIcon("ri:terminal-window-line", TerminalWindowLine);
|
||||
|
||||
@ -8,6 +8,21 @@
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.pure-segmented-block {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pure-segmented-block .pure-segmented-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.pure-segmented-block .pure-segmented-item > .pure-segmented-item-label > span {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.pure-segmented-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -67,6 +82,7 @@
|
||||
.pure-segmented-item-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pure-segmented-item-icon svg {
|
||||
|
||||
@ -10,7 +10,12 @@ import {
|
||||
} from "vue";
|
||||
import type { OptionsType } from "./type";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { isFunction, isNumber, useDark } from "@pureadmin/utils";
|
||||
import {
|
||||
isFunction,
|
||||
isNumber,
|
||||
useDark,
|
||||
useResizeObserver
|
||||
} from "@pureadmin/utils";
|
||||
|
||||
const props = {
|
||||
options: {
|
||||
@ -22,6 +27,11 @@ const props = {
|
||||
type: undefined,
|
||||
require: false,
|
||||
default: "0"
|
||||
},
|
||||
/** 将宽度调整为父元素宽度 */
|
||||
block: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
};
|
||||
|
||||
@ -77,6 +87,14 @@ export default defineComponent({
|
||||
});
|
||||
}
|
||||
|
||||
if (props.block) {
|
||||
useResizeObserver(".pure-segmented", () => {
|
||||
nextTick(() => {
|
||||
handleInit(curIndex.value);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => curIndex.value,
|
||||
index => {
|
||||
@ -148,7 +166,9 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
return () => (
|
||||
<div class="pure-segmented">
|
||||
<div
|
||||
class={["pure-segmented", props.block ? "pure-segmented-block" : ""]}
|
||||
>
|
||||
<div class="pure-segmented-group">
|
||||
<div
|
||||
class="pure-segmented-item-selected"
|
||||
|
||||
@ -387,7 +387,7 @@ onUnmounted(() => removeMatchMedia);
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<span v-if="device !== 'mobile'">
|
||||
<span v-if="useAppStoreHook().getViewportWidth > 1280">
|
||||
<p :class="['mt-5', pClass]">页宽</p>
|
||||
<Segmented
|
||||
class="mb-2 select-none"
|
||||
@ -406,7 +406,7 @@ onUnmounted(() => removeMatchMedia);
|
||||
<button
|
||||
v-else
|
||||
v-ripple="{ class: 'text-gray-300' }"
|
||||
class="bg-transparent flex-c w-full h-20 rounded-md border border-gray-100"
|
||||
class="bg-transparent flex-c w-full h-20 rounded-md border border-[var(--pure-border-color)]"
|
||||
@click="setStretch(!settings.stretch)"
|
||||
>
|
||||
<div
|
||||
|
||||
70
src/layout/components/sidebar/centerCollapse.vue
Normal file
70
src/layout/components/sidebar/centerCollapse.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useGlobal } from "@pureadmin/utils";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
|
||||
import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill";
|
||||
|
||||
interface Props {
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
isActive: false
|
||||
});
|
||||
|
||||
const { tooltipEffect } = useNav();
|
||||
|
||||
const iconClass = computed(() => {
|
||||
return ["w-[16px]", "h-[16px]"];
|
||||
});
|
||||
|
||||
const { $storage } = useGlobal<GlobalPropertiesApi>();
|
||||
const themeColor = computed(() => $storage.layout?.themeColor);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "toggleClick"): void;
|
||||
}>();
|
||||
|
||||
const toggleClick = () => {
|
||||
emit("toggleClick");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-tippy="{
|
||||
content: props.isActive ? '点击折叠' : '点击展开',
|
||||
theme: tooltipEffect,
|
||||
hideOnClick: 'toggle',
|
||||
placement: 'right'
|
||||
}"
|
||||
class="center-collapse"
|
||||
@click="toggleClick"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="ArrowLeft"
|
||||
:class="[iconClass, themeColor === 'light' ? '' : 'text-primary']"
|
||||
:style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.center-collapse {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 2px;
|
||||
z-index: 1002;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 34px;
|
||||
cursor: pointer;
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--pure-border-color);
|
||||
border-radius: 4px;
|
||||
transform: translate(12px, -50%);
|
||||
}
|
||||
</style>
|
||||
@ -41,7 +41,7 @@ const toggleClick = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="collapse-container">
|
||||
<div class="left-collapse">
|
||||
<IconifyIconOffline
|
||||
v-tippy="{
|
||||
content: props.isActive ? '点击折叠' : '点击展开',
|
||||
@ -58,7 +58,7 @@ const toggleClick = () => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.collapse-container {
|
||||
.left-collapse {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
@ -3,8 +3,9 @@ import Logo from "./logo.vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { emitter } from "@/utils/mitt";
|
||||
import SidebarItem from "./sidebarItem.vue";
|
||||
import leftCollapse from "./leftCollapse.vue";
|
||||
import LeftCollapse from "./leftCollapse.vue";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import CenterCollapse from "./centerCollapse.vue";
|
||||
import { responsiveStorageNameSpace } from "@/config";
|
||||
import { storageLocal, isAllEmpty } from "@pureadmin/utils";
|
||||
import { findRouteByPath, getParentPaths } from "@/router/utils";
|
||||
@ -12,6 +13,7 @@ import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
|
||||
|
||||
const route = useRoute();
|
||||
const isShow = ref(false);
|
||||
const showLogo = ref(
|
||||
storageLocal().getItem<StorageConfigs>(
|
||||
`${responsiveStorageNameSpace()}configure`
|
||||
@ -88,6 +90,8 @@ onBeforeUnmount(() => {
|
||||
<div
|
||||
v-loading="loading"
|
||||
:class="['sidebar-container', showLogo ? 'has-logo' : 'no-logo']"
|
||||
@mouseenter.prevent="isShow = true"
|
||||
@mouseleave.prevent="isShow = false"
|
||||
>
|
||||
<Logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar
|
||||
@ -114,7 +118,12 @@ onBeforeUnmount(() => {
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
<leftCollapse
|
||||
<CenterCollapse
|
||||
v-if="device !== 'mobile' && (isShow || isCollapse)"
|
||||
:is-active="pureApp.sidebar.opened"
|
||||
@toggleClick="toggleSideBar"
|
||||
/>
|
||||
<LeftCollapse
|
||||
v-if="device !== 'mobile'"
|
||||
:is-active="pureApp.sidebar.opened"
|
||||
@toggleClick="toggleSideBar"
|
||||
|
||||
@ -89,7 +89,8 @@ let isAutoCloseSidebar = true;
|
||||
useResizeObserver(appWrapperRef, entries => {
|
||||
if (isMobile) return;
|
||||
const entry = entries[0];
|
||||
const [{ inlineSize: width }] = entry.borderBoxSize;
|
||||
const [{ inlineSize: width, blockSize: height }] = entry.borderBoxSize;
|
||||
useAppStoreHook().setViewportSize({ width, height });
|
||||
width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
|
||||
/** width app-wrapper类容器宽度
|
||||
* 0 < width <= 760 隐藏侧边栏
|
||||
|
||||
@ -6,6 +6,7 @@ import { getPlatformConfig } from "./config";
|
||||
import { MotionPlugin } from "@vueuse/motion";
|
||||
import { useEcharts } from "@/plugins/echarts";
|
||||
import { createApp, type Directive } from "vue";
|
||||
import { useVxeTable } from "@/plugins/vxeTable";
|
||||
import { useElementPlus } from "@/plugins/elementPlus";
|
||||
import { injectResponsiveStorage } from "@/utils/responsive";
|
||||
|
||||
@ -61,6 +62,7 @@ getPlatformConfig(app).then(async config => {
|
||||
.use(useI18n)
|
||||
.use(useElementPlus)
|
||||
.use(Table)
|
||||
.use(useVxeTable)
|
||||
.use(PureDescriptions)
|
||||
.use(useEcharts);
|
||||
app.mount("#app");
|
||||
|
||||
@ -10,6 +10,8 @@ import {
|
||||
ElAutocomplete,
|
||||
ElAutoResizer,
|
||||
ElAvatar,
|
||||
ElAnchor,
|
||||
ElAnchorLink,
|
||||
ElBacktop,
|
||||
ElBadge,
|
||||
ElBreadcrumb,
|
||||
@ -123,6 +125,8 @@ const components = [
|
||||
ElAutocomplete,
|
||||
ElAutoResizer,
|
||||
ElAvatar,
|
||||
ElAnchor,
|
||||
ElAnchorLink,
|
||||
ElBacktop,
|
||||
ElBadge,
|
||||
ElBreadcrumb,
|
||||
|
||||
102
src/plugins/vxeTable.ts
Normal file
102
src/plugins/vxeTable.ts
Normal file
@ -0,0 +1,102 @@
|
||||
import "vxe-table/lib/style.css";
|
||||
// import "xe-utils";
|
||||
// import XEUtils from "xe-utils";
|
||||
import type { App } from "vue";
|
||||
// import { i18n } from "@/plugins/i18n";
|
||||
// import zh from "vxe-table/lib/locale/lang/zh-CN";
|
||||
// import en from "vxe-table/lib/locale/lang/en-US";
|
||||
|
||||
import {
|
||||
// 全局对象
|
||||
VXETable,
|
||||
// 表格功能
|
||||
// Filter,
|
||||
// Edit,
|
||||
// Menu,
|
||||
// Export,
|
||||
// Keyboard,
|
||||
// Validator,
|
||||
// 可选组件
|
||||
Icon,
|
||||
Column,
|
||||
// Colgroup,
|
||||
// Grid,
|
||||
// Tooltip,
|
||||
// Toolbar,
|
||||
// Pager,
|
||||
// Form,
|
||||
// FormItem,
|
||||
// FormGather,
|
||||
// Checkbox,
|
||||
// CheckboxGroup,
|
||||
// Radio,
|
||||
// RadioGroup,
|
||||
// RadioButton,
|
||||
// Switch,
|
||||
// Input,
|
||||
// Select,
|
||||
// Optgroup,
|
||||
// Option,
|
||||
// Textarea,
|
||||
// Button,
|
||||
// Modal,
|
||||
// List,
|
||||
// Pulldown,
|
||||
// 表格
|
||||
Table
|
||||
} from "vxe-table";
|
||||
|
||||
// 全局默认参数
|
||||
VXETable.config({
|
||||
// i18n: (key, args) => {
|
||||
// return unref(i18n.global.locale) === "zh"
|
||||
// ? XEUtils.toFormatString(XEUtils.get(zh, key), args)
|
||||
// : XEUtils.toFormatString(XEUtils.get(en, key), args);
|
||||
// },
|
||||
// translate(key) {
|
||||
// const NAMESPACED = ["el.", "buttons."];
|
||||
// if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
|
||||
// return i18n.global.t.call(i18n.global.locale, key);
|
||||
// }
|
||||
// return key;
|
||||
// }
|
||||
});
|
||||
|
||||
export function useVxeTable(app: App) {
|
||||
// 表格功能
|
||||
// app.use(Filter)
|
||||
// .use(Edit)
|
||||
// .use(Menu)
|
||||
// .use(Export)
|
||||
// .use(Keyboard)
|
||||
// .use(Validator)
|
||||
// 可选组件
|
||||
app
|
||||
.use(Icon)
|
||||
.use(Column)
|
||||
// .use(Colgroup)
|
||||
// .use(Grid)
|
||||
// .use(Tooltip)
|
||||
// .use(Toolbar)
|
||||
// .use(Pager)
|
||||
// .use(Form)
|
||||
// .use(FormItem)
|
||||
// .use(FormGather)
|
||||
// .use(Checkbox)
|
||||
// .use(CheckboxGroup)
|
||||
// .use(Radio)
|
||||
// .use(RadioGroup)
|
||||
// .use(RadioButton)
|
||||
// .use(Switch)
|
||||
// .use(Input)
|
||||
// .use(Select)
|
||||
// .use(Optgroup)
|
||||
// .use(Option)
|
||||
// .use(Textarea)
|
||||
// .use(Button)
|
||||
// .use(Modal)
|
||||
// .use(List)
|
||||
// .use(Pulldown)
|
||||
// 安装表格
|
||||
.use(Table);
|
||||
}
|
||||
@ -1,32 +1,38 @@
|
||||
// 完整版菜单比较多，将 rank 抽离出来，在此方便维护
|
||||
|
||||
const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从非 0 开始
|
||||
components = 1,
|
||||
able = 2,
|
||||
table = 3,
|
||||
list = 4,
|
||||
result = 5,
|
||||
error = 6,
|
||||
frame = 7,
|
||||
nested = 8,
|
||||
permission = 9,
|
||||
system = 10,
|
||||
monitor = 11,
|
||||
tabs = 12,
|
||||
about = 13,
|
||||
editor = 14,
|
||||
flowchart = 15,
|
||||
formdesign = 16,
|
||||
board = 17,
|
||||
ppt = 18,
|
||||
guide = 19,
|
||||
menuoverflow = 20;
|
||||
vueflow = 1,
|
||||
ganttastic = 2,
|
||||
components = 3,
|
||||
able = 4,
|
||||
table = 5,
|
||||
form = 6,
|
||||
list = 7,
|
||||
result = 8,
|
||||
error = 9,
|
||||
frame = 10,
|
||||
nested = 11,
|
||||
permission = 12,
|
||||
system = 13,
|
||||
monitor = 14,
|
||||
tabs = 15,
|
||||
about = 16,
|
||||
editor = 17,
|
||||
flowchart = 18,
|
||||
formdesign = 19,
|
||||
board = 20,
|
||||
ppt = 21,
|
||||
guide = 22,
|
||||
menuoverflow = 23;
|
||||
|
||||
export {
|
||||
home,
|
||||
vueflow,
|
||||
ganttastic,
|
||||
components,
|
||||
able,
|
||||
table,
|
||||
form,
|
||||
list,
|
||||
result,
|
||||
error,
|
||||
|
||||
@ -10,6 +10,15 @@ export default {
|
||||
rank: able
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/able/verify",
|
||||
name: "Verify",
|
||||
component: () => import("@/views/able/verify.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsVerify"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/watermark",
|
||||
name: "WaterMark",
|
||||
@ -79,6 +88,22 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/word",
|
||||
name: "Word",
|
||||
component: () => import("@/views/able/word.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsWord")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/excels",
|
||||
name: "Excels",
|
||||
component: () => import("@/views/able/excels.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsExcels")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/pdf",
|
||||
name: "Pdf",
|
||||
|
||||
23
src/router/modules/form.ts
Normal file
23
src/router/modules/form.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { form } from "@/router/enums";
|
||||
|
||||
export default {
|
||||
path: "/form",
|
||||
redirect: "/form/index",
|
||||
meta: {
|
||||
icon: "ri:edit-box-line",
|
||||
title: $t("menus.hsSchemaForm"),
|
||||
rank: form
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/form/index",
|
||||
name: "SchemaForm",
|
||||
component: () => import("@/views/schema-form/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsSchemaForm"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
}
|
||||
}
|
||||
]
|
||||
} satisfies RouteConfigsTable;
|
||||
23
src/router/modules/ganttastic.ts
Normal file
23
src/router/modules/ganttastic.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { ganttastic } from "@/router/enums";
|
||||
|
||||
export default {
|
||||
path: "/ganttastic",
|
||||
redirect: "/ganttastic/index",
|
||||
meta: {
|
||||
icon: "ri:bar-chart-horizontal-line",
|
||||
title: $t("menus.hsGanttastic"),
|
||||
rank: ganttastic
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/ganttastic/index",
|
||||
name: "Ganttastic",
|
||||
component: () => import("@/views/ganttastic/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsGanttastic"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
}
|
||||
}
|
||||
]
|
||||
} satisfies RouteConfigsTable;
|
||||
@ -2,38 +2,47 @@ import { $t } from "@/plugins/i18n";
|
||||
import { table } from "@/router/enums";
|
||||
|
||||
export default {
|
||||
path: "/pure-table",
|
||||
redirect: "/pure-table/index",
|
||||
path: "/table",
|
||||
redirect: "/table/index",
|
||||
meta: {
|
||||
icon: "ri:table-line",
|
||||
title: "pure-admin-table",
|
||||
title: $t("menus.hstable"),
|
||||
rank: table
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/pure-table/index",
|
||||
path: "/table/index",
|
||||
name: "PureTable",
|
||||
component: () => import("@/views/pure-table/index.vue"),
|
||||
component: () => import("@/views/table/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsPureTableBase")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/pure-table/high",
|
||||
path: "/table/high",
|
||||
name: "PureTableHigh",
|
||||
component: () => import("@/views/pure-table/high.vue"),
|
||||
component: () => import("@/views/table/high.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsPureTableHigh")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/pure-table/edit",
|
||||
path: "/table/edit",
|
||||
name: "PureTableEdit",
|
||||
component: () => import("@/views/pure-table/edit.vue"),
|
||||
component: () => import("@/views/table/edit.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsPureTableEdit"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/table/virtual",
|
||||
name: "VxeTable",
|
||||
component: () => import("@/views/table/virtual.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsVxeTable"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
}
|
||||
}
|
||||
]
|
||||
} satisfies RouteConfigsTable;
|
||||
|
||||
22
src/router/modules/vueflow.ts
Normal file
22
src/router/modules/vueflow.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { vueflow } from "@/router/enums";
|
||||
|
||||
export default {
|
||||
path: "/vue-flow",
|
||||
redirect: "/vue-flow/index",
|
||||
meta: {
|
||||
icon: "ep:set-up",
|
||||
title: "vue-flow",
|
||||
rank: vueflow
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/vue-flow/index",
|
||||
name: "VueFlow",
|
||||
component: () => import("@/views/vue-flow/layouting/index.vue"),
|
||||
meta: {
|
||||
title: "vue-flow",
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
}
|
||||
}
|
||||
]
|
||||
} satisfies RouteConfigsTable;
|
||||
@ -21,6 +21,11 @@ export const useAppStore = defineStore({
|
||||
`${responsiveStorageNameSpace()}layout`
|
||||
)?.layout ?? getConfig().Layout,
|
||||
device: deviceDetection() ? "mobile" : "desktop",
|
||||
// 浏览器窗口的可视区域大小
|
||||
viewportSize: {
|
||||
width: document.documentElement.clientWidth,
|
||||
height: document.documentElement.clientHeight
|
||||
},
|
||||
// 作用于 src/views/components/draggable/index.vue 页面，当离开页面并不会销毁 new Swap()，sortablejs 官网也没有提供任何销毁的 api
|
||||
sortSwap: false
|
||||
}),
|
||||
@ -30,6 +35,12 @@ export const useAppStore = defineStore({
|
||||
},
|
||||
getDevice(state) {
|
||||
return state.device;
|
||||
},
|
||||
getViewportWidth(state) {
|
||||
return state.viewportSize.width;
|
||||
},
|
||||
getViewportHeight(state) {
|
||||
return state.viewportSize.height;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
@ -62,6 +73,9 @@ export const useAppStore = defineStore({
|
||||
setLayout(layout) {
|
||||
this.layout = layout;
|
||||
},
|
||||
setViewportSize(size) {
|
||||
this.viewportSize = size;
|
||||
},
|
||||
setSortSwap(val) {
|
||||
this.sortSwap = val;
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@ export type appType = {
|
||||
};
|
||||
layout: string;
|
||||
device: string;
|
||||
viewportSize: { width: number; height: number };
|
||||
sortSwap: boolean;
|
||||
};
|
||||
|
||||
|
||||
@ -14,6 +14,67 @@ html.dark {
|
||||
/* switch关闭状态下的color 需要时可取用 */
|
||||
--pure-switch-off-color: #ffffff3f;
|
||||
|
||||
/* vxe-table */
|
||||
--vxe-form-background-color: #151515;
|
||||
--vxe-toolbar-background-color: #151515;
|
||||
--vxe-pager-background-color: #151515;
|
||||
--vxe-button-default-background-color: color.adjust(#151515, $lightness: 15%);
|
||||
--vxe-table-header-background-color: color.adjust(#151515, $lightness: 5%);
|
||||
--vxe-font-color: color.adjust(#c9d1d9, $lightness: -12%);
|
||||
--vxe-table-header-font-color: #c9d1d9;
|
||||
--vxe-table-footer-font-color: #c9d1d9;
|
||||
--vxe-table-body-background-color: #151515;
|
||||
--vxe-table-footer-background-color: #151515;
|
||||
--vxe-table-row-striped-background-color: #1e1e1e;
|
||||
--vxe-table-border-color: #303030;
|
||||
--vxe-table-row-hover-background-color: #1e1e1e;
|
||||
--vxe-table-row-hover-striped-background-color: color.adjust(
|
||||
#1e1e1e,
|
||||
$lightness: -10%
|
||||
);
|
||||
--vxe-table-row-current-background-color: fade(#1e1e1e, 20%);
|
||||
--vxe-table-row-hover-current-background-color: fade(#1e1e1e, 20%);
|
||||
--vxe-table-column-hover-background-color: fade(#1e1e1e, 20%);
|
||||
--vxe-table-column-current-background-color: fade(#1e1e1e, 20%);
|
||||
--vxe-table-row-checkbox-checked-background-color: fade(#1e1e1e, 15%);
|
||||
--vxe-table-row-hover-checkbox-checked-background-color: fade(#1e1e1e, 20%);
|
||||
--vxe-table-menu-background-color: color.adjust(#303133, $lightness: 10%);
|
||||
--vxe-table-filter-panel-background-color: color.adjust(
|
||||
#151515,
|
||||
$lightness: 5%
|
||||
);
|
||||
--vxe-grid-maximize-background-color: #151515;
|
||||
--vxe-pager-perfect-background-color: #151515;
|
||||
--vxe-pager-perfect-button-background-color: color.adjust(
|
||||
#151515,
|
||||
$lightness: 15%
|
||||
);
|
||||
--vxe-input-background-color: #151515;
|
||||
--vxe-input-border-color: #303030;
|
||||
--vxe-select-panel-background-color: #151515;
|
||||
--vxe-table-popup-border-color: #303030;
|
||||
--vxe-select-option-hover-background-color: color.adjust(
|
||||
#1e1e1e,
|
||||
$lightness: 15%
|
||||
);
|
||||
--vxe-pulldown-panel-background-color: #151515;
|
||||
--vxe-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px #43464c;
|
||||
--vxe-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px #43464c;
|
||||
--vxe-loading-background-color: rgb(0 0 0 / 50%);
|
||||
--vxe-tooltip-dark-background-color: color.adjust(#303133, $lightness: 25%);
|
||||
--vxe-modal-header-background-color: #1e1e1e;
|
||||
--vxe-modal-body-background-color: #303133;
|
||||
--vxe-modal-border-color: #303030;
|
||||
--vxe-toolbar-panel-background-color: #151515;
|
||||
--vxe-input-disabled-color: color.adjust(#1e1e1e, $lightness: 20%);
|
||||
--vxe-input-disabled-background-color: color.adjust(#1e1e1e, $lightness: 25%);
|
||||
--vxe-checkbox-icon-background-color: color.adjust(#1e1e1e, $lightness: 15%);
|
||||
--vxe-checkbox-checked-icon-border-color: #303030;
|
||||
--vxe-checkbox-indeterminate-icon-background-color: color.adjust(
|
||||
#1e1e1e,
|
||||
$lightness: 15%
|
||||
);
|
||||
|
||||
.navbar,
|
||||
.tags-view,
|
||||
.contextmenu,
|
||||
|
||||
@ -92,7 +92,7 @@
|
||||
z-index: 1001;
|
||||
width: $sideBarWidth !important;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
font-size: 0;
|
||||
background: $menuBg;
|
||||
border-right: 1px solid var(--pure-border-color);
|
||||
|
||||
27
src/views/able/excels.vue
Normal file
27
src/views/able/excels.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import "@vue-office/excel/lib/index.css";
|
||||
import VueOfficeExcel from "@vue-office/excel";
|
||||
|
||||
defineOptions({
|
||||
name: "Excels"
|
||||
});
|
||||
|
||||
const excel = "https://xiaoxian521.github.io/hyperlink/other/excel.xlsx";
|
||||
|
||||
function renderedHandler() {
|
||||
console.log("渲染完成");
|
||||
}
|
||||
|
||||
function errorHandler() {
|
||||
console.log("渲染失败");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<vue-office-excel
|
||||
:src="excel"
|
||||
style="height: 100vh"
|
||||
@rendered="renderedHandler"
|
||||
@error="errorHandler"
|
||||
/>
|
||||
</template>
|
||||
35
src/views/able/verify.vue
Normal file
35
src/views/able/verify.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Vcode from "vue3-puzzle-vcode";
|
||||
|
||||
const isShow = ref(true);
|
||||
|
||||
function onSuccess() {
|
||||
console.log("验证成功");
|
||||
}
|
||||
|
||||
function onFail() {
|
||||
console.log("验证失败");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
拼图人机验证、右滑拼图验证（
|
||||
<el-link
|
||||
href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
github地址
|
||||
</el-link>
|
||||
）
|
||||
</div>
|
||||
</template>
|
||||
<div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]">
|
||||
<Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" />
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
18
src/views/able/word.vue
Normal file
18
src/views/able/word.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import "@vue-office/docx/lib/index.css";
|
||||
import VueOfficeDocx from "@vue-office/docx";
|
||||
|
||||
defineOptions({
|
||||
name: "Word"
|
||||
});
|
||||
|
||||
const docx = "https://xiaoxian521.github.io/hyperlink/other/word.docx";
|
||||
|
||||
function rendered() {
|
||||
console.log("渲染完成");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<vue-office-docx :src="docx" @rendered="rendered" />
|
||||
</template>
|
||||
@ -1,8 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
// https://plus-pro-components.com/components/check-card-group.html
|
||||
import { PlusCheckCardGroup } from "plus-pro-components";
|
||||
import "plus-pro-components/es/components/check-card-group/style/css";
|
||||
import { PlusCheckCardGroup } from "plus-pro-components";
|
||||
|
||||
defineOptions({
|
||||
name: "CheckCard"
|
||||
|
||||
@ -75,6 +75,26 @@ const optionsDisabled: Array<OptionsType> = [
|
||||
}
|
||||
];
|
||||
|
||||
/** block */
|
||||
const optionsBlock: Array<OptionsType> = [
|
||||
{
|
||||
label: "周一"
|
||||
},
|
||||
{
|
||||
label: "周二"
|
||||
},
|
||||
{
|
||||
label: "周三"
|
||||
},
|
||||
{
|
||||
label: "周四"
|
||||
},
|
||||
{
|
||||
label: "周五喜悦，收尾归档，周末倒计时",
|
||||
tip: "周五喜悦，收尾归档，周末倒计时"
|
||||
}
|
||||
];
|
||||
|
||||
/** 可设置图标 */
|
||||
const optionsIcon: Array<OptionsType> = [
|
||||
{
|
||||
@ -198,6 +218,9 @@ function onChange({ index, option }) {
|
||||
<p class="mb-2">禁用</p>
|
||||
<Segmented :options="optionsDisabled" />
|
||||
<el-divider />
|
||||
<p class="mb-2">block 属性(将宽度调整为父元素宽度)</p>
|
||||
<Segmented :options="optionsBlock" block />
|
||||
<el-divider />
|
||||
<p class="mb-2">可设置图标</p>
|
||||
<Segmented :options="optionsIcon" />
|
||||
<el-divider />
|
||||
|
||||
170
src/views/ganttastic/index.vue
Normal file
170
src/views/ganttastic/index.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
// https://zunnzunn.github.io/vue-ganttastic/introduction.html
|
||||
import { GGanttChart, GGanttRow } from "@infectoone/vue-ganttastic";
|
||||
|
||||
const context = ref([
|
||||
[
|
||||
{
|
||||
week: "星期一",
|
||||
beginDate: "06:00",
|
||||
endDate: "22:00",
|
||||
ganttBarConfig: {
|
||||
id: "0",
|
||||
hasHandles: true,
|
||||
label: "需求收集和分析 负责人：小张",
|
||||
style: {
|
||||
background: "#e96560"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
week: "星期二",
|
||||
beginDate: "09:00",
|
||||
endDate: "18:00",
|
||||
ganttBarConfig: {
|
||||
id: "1",
|
||||
hasHandles: true,
|
||||
label: "系统设计 负责人：小强",
|
||||
style: {
|
||||
background: "#5ccfa3"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
week: "星期三",
|
||||
beginDate: "07:00",
|
||||
endDate: "20:00",
|
||||
ganttBarConfig: {
|
||||
id: "2",
|
||||
hasHandles: true,
|
||||
label: "编码实现 负责人：老李",
|
||||
style: {
|
||||
background: "#77d6fa"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
week: "星期四",
|
||||
beginDate: "06:00",
|
||||
endDate: "21:00",
|
||||
ganttBarConfig: {
|
||||
id: "3",
|
||||
hasHandles: true,
|
||||
label: "编码实现 负责人：小明",
|
||||
style: {
|
||||
color: "#fff",
|
||||
background: "#1b2a47"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
week: "星期五",
|
||||
beginDate: "05:00",
|
||||
endDate: "19:00",
|
||||
ganttBarConfig: {
|
||||
id: "4",
|
||||
hasHandles: true,
|
||||
label: "内部测试 负责人：小雪",
|
||||
style: {
|
||||
background: "#5ccfa3"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
week: "星期六",
|
||||
beginDate: "10:00",
|
||||
endDate: "22:00",
|
||||
ganttBarConfig: {
|
||||
id: "5",
|
||||
hasHandles: true,
|
||||
label: "系统优化和文档整理 负责人：小欣",
|
||||
style: {
|
||||
background: "#f8bc45"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
week: "星期天",
|
||||
beginDate: "04:00",
|
||||
endDate: "23:59",
|
||||
ganttBarConfig: {
|
||||
id: "6",
|
||||
immobile: false,
|
||||
hasHandles: false,
|
||||
label: "部署和上线 负责人：老王",
|
||||
style: {
|
||||
background: "#f3953d"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
]);
|
||||
|
||||
function getWeekRange() {
|
||||
const today = new Date();
|
||||
const dayOfWeek = today.getDay();
|
||||
|
||||
const startDate = new Date(today);
|
||||
startDate.setDate(today.getDate() - dayOfWeek + 1);
|
||||
|
||||
const endDate = new Date(startDate);
|
||||
endDate.setDate(startDate.getDate() + 6);
|
||||
|
||||
const formatDate = date => {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
const currentWeekStart = formatDate(startDate);
|
||||
const currentWeekEnd = formatDate(endDate);
|
||||
|
||||
return {
|
||||
currentWeekStart,
|
||||
currentWeekEnd
|
||||
};
|
||||
}
|
||||
|
||||
const weekRangeInChina = getWeekRange();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<g-gantt-chart
|
||||
chart-start="00:00"
|
||||
chart-end="23:59"
|
||||
precision="hour"
|
||||
date-format="HH:mm"
|
||||
bar-start="beginDate"
|
||||
bar-end="endDate"
|
||||
grid
|
||||
>
|
||||
<template #upper-timeunit>
|
||||
<h1>
|
||||
{{
|
||||
`${weekRangeInChina.currentWeekStart} / ${weekRangeInChina.currentWeekEnd}`
|
||||
}}
|
||||
</h1>
|
||||
</template>
|
||||
<g-gantt-row
|
||||
v-for="(item, index) in context"
|
||||
:key="index"
|
||||
:bars="item"
|
||||
:label="item[0].week"
|
||||
highlight-on-hover
|
||||
/>
|
||||
</g-gantt-chart>
|
||||
</template>
|
||||
162
src/views/schema-form/form/base.vue
Normal file
162
src/views/schema-form/form/base.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
// https://plus-pro-components.com/components/form.html
|
||||
import "plus-pro-components/es/components/form/style/css";
|
||||
import {
|
||||
type PlusColumn,
|
||||
type FieldValues,
|
||||
PlusForm
|
||||
} from "plus-pro-components";
|
||||
|
||||
const state = ref<FieldValues>({
|
||||
status: "1",
|
||||
name: "",
|
||||
rate: 4,
|
||||
progress: 100,
|
||||
switch: true,
|
||||
time: new Date().toString(),
|
||||
endTime: []
|
||||
});
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入名称"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const columns: PlusColumn[] = [
|
||||
{
|
||||
label: "名称",
|
||||
width: 120,
|
||||
prop: "name",
|
||||
valueType: "copy",
|
||||
tooltip: "我是名称"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
width: 120,
|
||||
prop: "status",
|
||||
valueType: "select",
|
||||
options: [
|
||||
{
|
||||
label: "未解决",
|
||||
value: "0",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "已解决",
|
||||
value: "1",
|
||||
color: "blue"
|
||||
},
|
||||
{
|
||||
label: "解决中",
|
||||
value: "2",
|
||||
color: "yellow"
|
||||
},
|
||||
{
|
||||
label: "失败",
|
||||
value: "3",
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "执行进度",
|
||||
width: 200,
|
||||
prop: "progress"
|
||||
},
|
||||
{
|
||||
label: "评分",
|
||||
width: 200,
|
||||
prop: "rate",
|
||||
valueType: "rate"
|
||||
},
|
||||
{
|
||||
label: "是否显示",
|
||||
width: 100,
|
||||
prop: "switch",
|
||||
valueType: "switch"
|
||||
},
|
||||
{
|
||||
label: "时间",
|
||||
prop: "time",
|
||||
valueType: "date-picker"
|
||||
},
|
||||
{
|
||||
label: "数量",
|
||||
prop: "number",
|
||||
valueType: "input-number",
|
||||
fieldProps: { precision: 2, step: 2 }
|
||||
},
|
||||
{
|
||||
label: "梦想",
|
||||
prop: "gift",
|
||||
valueType: "radio",
|
||||
options: [
|
||||
{
|
||||
label: "诗",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "远方",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "美食",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "到期时间",
|
||||
prop: "endTime",
|
||||
valueType: "date-picker",
|
||||
fieldProps: {
|
||||
type: "datetimerange",
|
||||
startPlaceholder: "请选择开始时间",
|
||||
endPlaceholder: "请选择结束时间"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "说明",
|
||||
prop: "desc",
|
||||
valueType: "textarea",
|
||||
fieldProps: {
|
||||
maxlength: 10,
|
||||
showWordLimit: true,
|
||||
// @ts-expect-error
|
||||
autosize: { minRows: 2, maxRows: 4 }
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const handleChange = (values: FieldValues, prop: PlusColumn) => {
|
||||
console.log(values, prop, "change");
|
||||
};
|
||||
const handleSubmit = (values: FieldValues) => {
|
||||
console.log(values, "Submit");
|
||||
};
|
||||
const handleSubmitError = (err: any) => {
|
||||
console.log(err, "err");
|
||||
};
|
||||
const handleReset = () => {
|
||||
console.log("handleReset");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PlusForm
|
||||
v-model="state"
|
||||
class="w-[450px] m-auto"
|
||||
:columns="columns"
|
||||
:rules="rules"
|
||||
label-position="right"
|
||||
@change="handleChange"
|
||||
@submit="handleSubmit"
|
||||
@submit-error="handleSubmitError"
|
||||
@reset="handleReset"
|
||||
/>
|
||||
</template>
|
||||
206
src/views/schema-form/form/dialog.vue
Normal file
206
src/views/schema-form/form/dialog.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
// https://plus-pro-components.com/components/dialog-form.html
|
||||
import "plus-pro-components/es/components/dialog-form/style/css";
|
||||
import {
|
||||
type PlusColumn,
|
||||
type FieldValues,
|
||||
PlusDialogForm
|
||||
} from "plus-pro-components";
|
||||
|
||||
const columns: PlusColumn[] = [
|
||||
{
|
||||
label: "名称",
|
||||
width: 120,
|
||||
prop: "name",
|
||||
valueType: "copy",
|
||||
tooltip: "名称最多显示6个字符"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
width: 120,
|
||||
prop: "status",
|
||||
valueType: "select",
|
||||
options: [
|
||||
{
|
||||
label: "未解决",
|
||||
value: "0",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "已解决",
|
||||
value: "1",
|
||||
color: "blue"
|
||||
},
|
||||
{
|
||||
label: "解决中",
|
||||
value: "2",
|
||||
color: "yellow"
|
||||
},
|
||||
{
|
||||
label: "失败",
|
||||
value: "3",
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "是否显示",
|
||||
width: 100,
|
||||
prop: "switch",
|
||||
valueType: "switch"
|
||||
},
|
||||
|
||||
{
|
||||
label: "时间",
|
||||
prop: "time",
|
||||
valueType: "date-picker"
|
||||
},
|
||||
{
|
||||
label: "数量",
|
||||
prop: "number",
|
||||
valueType: "input-number",
|
||||
fieldProps: { precision: 2, step: 2 }
|
||||
},
|
||||
{
|
||||
label: "城市",
|
||||
prop: "city",
|
||||
valueType: "cascader",
|
||||
options: [
|
||||
{
|
||||
value: "0",
|
||||
label: "陕西",
|
||||
children: [
|
||||
{
|
||||
value: "0-0",
|
||||
label: "西安",
|
||||
children: [
|
||||
{
|
||||
value: "0-0-0",
|
||||
label: "新城区"
|
||||
},
|
||||
{
|
||||
value: "0-0-1",
|
||||
label: "高新区"
|
||||
},
|
||||
{
|
||||
value: "0-0-2",
|
||||
label: "灞桥区"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "山西",
|
||||
children: [
|
||||
{
|
||||
value: "1-0",
|
||||
label: "太原",
|
||||
children: [
|
||||
{
|
||||
value: "1-0-0",
|
||||
label: "小店区"
|
||||
},
|
||||
{
|
||||
value: "1-0-1",
|
||||
label: "古交市"
|
||||
},
|
||||
{
|
||||
value: "1-0-2",
|
||||
label: "万柏林区"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "地区",
|
||||
prop: "place",
|
||||
tooltip: "请精确到门牌号",
|
||||
fieldProps: {
|
||||
placeholder: "请精确到门牌号"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "要求",
|
||||
prop: "demand",
|
||||
valueType: "checkbox",
|
||||
options: [
|
||||
{
|
||||
label: "四六级",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "计算机二级证书",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "普通话证书",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "梦想",
|
||||
prop: "gift",
|
||||
valueType: "radio",
|
||||
options: [
|
||||
{
|
||||
label: "诗",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "远方",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "美食",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "到期时间",
|
||||
prop: "endTime",
|
||||
valueType: "date-picker",
|
||||
fieldProps: {
|
||||
type: "datetimerange",
|
||||
startPlaceholder: "请选择开始时间",
|
||||
endPlaceholder: "请选择结束时间"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "说明",
|
||||
prop: "desc",
|
||||
valueType: "textarea",
|
||||
fieldProps: {
|
||||
maxlength: 10,
|
||||
showWordLimit: true,
|
||||
// @ts-expect-error
|
||||
autosize: { minRows: 2, maxRows: 4 }
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const visible = ref(false);
|
||||
const values = ref<FieldValues>({});
|
||||
|
||||
const handleOpen = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="handleOpen">打开弹窗表单</el-button>
|
||||
<PlusDialogForm
|
||||
v-model:visible="visible"
|
||||
v-model="values"
|
||||
:form="{ columns }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
206
src/views/schema-form/form/drawer.vue
Normal file
206
src/views/schema-form/form/drawer.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
// https://plus-pro-components.com/components/drawer-form.html
|
||||
import "plus-pro-components/es/components/drawer-form/style/css";
|
||||
import {
|
||||
type PlusColumn,
|
||||
type FieldValues,
|
||||
PlusDrawerForm
|
||||
} from "plus-pro-components";
|
||||
|
||||
const columns: PlusColumn[] = [
|
||||
{
|
||||
label: "名称",
|
||||
width: 120,
|
||||
prop: "name",
|
||||
valueType: "copy",
|
||||
tooltip: "名称最多显示6个字符"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
width: 120,
|
||||
prop: "status",
|
||||
valueType: "select",
|
||||
options: [
|
||||
{
|
||||
label: "未解决",
|
||||
value: "0",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "已解决",
|
||||
value: "1",
|
||||
color: "blue"
|
||||
},
|
||||
{
|
||||
label: "解决中",
|
||||
value: "2",
|
||||
color: "yellow"
|
||||
},
|
||||
{
|
||||
label: "失败",
|
||||
value: "3",
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "是否显示",
|
||||
width: 100,
|
||||
prop: "switch",
|
||||
valueType: "switch"
|
||||
},
|
||||
|
||||
{
|
||||
label: "时间",
|
||||
prop: "time",
|
||||
valueType: "date-picker"
|
||||
},
|
||||
{
|
||||
label: "数量",
|
||||
prop: "number",
|
||||
valueType: "input-number",
|
||||
fieldProps: { precision: 2, step: 2 }
|
||||
},
|
||||
{
|
||||
label: "城市",
|
||||
prop: "city",
|
||||
valueType: "cascader",
|
||||
options: [
|
||||
{
|
||||
value: "0",
|
||||
label: "陕西",
|
||||
children: [
|
||||
{
|
||||
value: "0-0",
|
||||
label: "西安",
|
||||
children: [
|
||||
{
|
||||
value: "0-0-0",
|
||||
label: "新城区"
|
||||
},
|
||||
{
|
||||
value: "0-0-1",
|
||||
label: "高新区"
|
||||
},
|
||||
{
|
||||
value: "0-0-2",
|
||||
label: "灞桥区"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "山西",
|
||||
children: [
|
||||
{
|
||||
value: "1-0",
|
||||
label: "太原",
|
||||
children: [
|
||||
{
|
||||
value: "1-0-0",
|
||||
label: "小店区"
|
||||
},
|
||||
{
|
||||
value: "1-0-1",
|
||||
label: "古交市"
|
||||
},
|
||||
{
|
||||
value: "1-0-2",
|
||||
label: "万柏林区"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "地区",
|
||||
prop: "place",
|
||||
tooltip: "请精确到门牌号",
|
||||
fieldProps: {
|
||||
placeholder: "请精确到门牌号"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "要求",
|
||||
prop: "demand",
|
||||
valueType: "checkbox",
|
||||
options: [
|
||||
{
|
||||
label: "四六级",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "计算机二级证书",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "普通话证书",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "梦想",
|
||||
prop: "gift",
|
||||
valueType: "radio",
|
||||
options: [
|
||||
{
|
||||
label: "诗",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "远方",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "美食",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "到期时间",
|
||||
prop: "endTime",
|
||||
valueType: "date-picker",
|
||||
fieldProps: {
|
||||
type: "datetimerange",
|
||||
startPlaceholder: "请选择开始时间",
|
||||
endPlaceholder: "请选择结束时间"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "说明",
|
||||
prop: "desc",
|
||||
valueType: "textarea",
|
||||
fieldProps: {
|
||||
maxlength: 10,
|
||||
showWordLimit: true,
|
||||
// @ts-expect-error
|
||||
autosize: { minRows: 2, maxRows: 4 }
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const visible = ref(false);
|
||||
const values = ref<FieldValues>({});
|
||||
|
||||
const handleOpen = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="handleOpen">打开抽屉表单</el-button>
|
||||
<PlusDrawerForm
|
||||
v-model:visible="visible"
|
||||
v-model="values"
|
||||
:form="{ columns }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
162
src/views/schema-form/form/search.vue
Normal file
162
src/views/schema-form/form/search.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
// https://plus-pro-components.com/components/search.html
|
||||
import "plus-pro-components/es/components/search/style/css";
|
||||
import { type PlusColumn, PlusSearch } from "plus-pro-components";
|
||||
|
||||
const state = ref({
|
||||
status: "0",
|
||||
time: new Date().toString()
|
||||
});
|
||||
|
||||
const columns: PlusColumn[] = [
|
||||
{
|
||||
label: "名称",
|
||||
prop: "name",
|
||||
valueType: "copy",
|
||||
tooltip: "名称最多显示6个字符"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
valueType: "select",
|
||||
options: [
|
||||
{
|
||||
label: "未解决",
|
||||
value: "0",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "已解决",
|
||||
value: "1",
|
||||
color: "blue"
|
||||
},
|
||||
{
|
||||
label: "解决中",
|
||||
value: "2",
|
||||
color: "yellow"
|
||||
},
|
||||
{
|
||||
label: "失败",
|
||||
value: "3",
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "时间",
|
||||
prop: "time",
|
||||
valueType: "date-picker"
|
||||
},
|
||||
{
|
||||
label: "数量",
|
||||
prop: "number",
|
||||
valueType: "input-number",
|
||||
fieldProps: { precision: 2, step: 2 }
|
||||
},
|
||||
{
|
||||
label: "城市",
|
||||
prop: "city",
|
||||
valueType: "cascader",
|
||||
options: [
|
||||
{
|
||||
value: "0",
|
||||
label: "陕西",
|
||||
children: [
|
||||
{
|
||||
value: "0-0",
|
||||
label: "西安",
|
||||
children: [
|
||||
{
|
||||
value: "0-0-0",
|
||||
label: "新城区"
|
||||
},
|
||||
{
|
||||
value: "0-0-1",
|
||||
label: "高新区"
|
||||
},
|
||||
{
|
||||
value: "0-0-2",
|
||||
label: "灞桥区"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "1",
|
||||
label: "山西",
|
||||
children: [
|
||||
{
|
||||
value: "1-0",
|
||||
label: "太原",
|
||||
children: [
|
||||
{
|
||||
value: "1-0-0",
|
||||
label: "小店区"
|
||||
},
|
||||
{
|
||||
value: "1-0-1",
|
||||
label: "古交市"
|
||||
},
|
||||
{
|
||||
value: "1-0-2",
|
||||
label: "万柏林区"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "地区",
|
||||
prop: "place",
|
||||
tooltip: "请精确到门牌号",
|
||||
fieldProps: {
|
||||
placeholder: "请精确到门牌号"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "到期时间",
|
||||
prop: "endTime",
|
||||
valueType: "date-picker",
|
||||
fieldProps: {
|
||||
type: "datetimerange",
|
||||
startPlaceholder: "请选择",
|
||||
endPlaceholder: "请选择"
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "奖励",
|
||||
prop: "price"
|
||||
},
|
||||
{
|
||||
label: "提成",
|
||||
prop: "percentage"
|
||||
}
|
||||
];
|
||||
|
||||
const handleChange = (values: any) => {
|
||||
console.log(values, "change");
|
||||
};
|
||||
const handleSearch = (values: any) => {
|
||||
console.log(values, "search");
|
||||
};
|
||||
const handleRest = () => {
|
||||
console.log("handleRest");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PlusSearch
|
||||
v-model="state"
|
||||
:columns="columns"
|
||||
:show-number="2"
|
||||
label-width="80"
|
||||
label-position="right"
|
||||
@change="handleChange"
|
||||
@search="handleSearch"
|
||||
@reset="handleRest"
|
||||
/>
|
||||
</template>
|
||||
204
src/views/schema-form/form/steps.vue
Normal file
204
src/views/schema-form/form/steps.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
// https://plus-pro-components.com/components/steps-form.html
|
||||
import "plus-pro-components/es/components/steps-form/style/css";
|
||||
import { PlusStepsForm } from "plus-pro-components";
|
||||
|
||||
const stepForm = ref([
|
||||
{
|
||||
title: "第一步",
|
||||
form: {
|
||||
labelPosition: "top",
|
||||
style: {
|
||||
width: "400px",
|
||||
margin: "40px auto"
|
||||
},
|
||||
modelValue: {},
|
||||
columns: [
|
||||
{
|
||||
label: "名称",
|
||||
width: 120,
|
||||
prop: "name",
|
||||
valueType: "copy",
|
||||
tooltip: "名称最多显示6个字符"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
width: 120,
|
||||
prop: "status",
|
||||
valueType: "select",
|
||||
options: [
|
||||
{
|
||||
label: "未解决",
|
||||
value: "0",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
label: "已解决",
|
||||
value: "1",
|
||||
color: "blue"
|
||||
},
|
||||
{
|
||||
label: "解决中",
|
||||
value: "2",
|
||||
color: "yellow"
|
||||
},
|
||||
{
|
||||
label: "失败",
|
||||
value: "3",
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入名称"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "第二步",
|
||||
form: {
|
||||
labelPosition: "top",
|
||||
style: {
|
||||
width: "400px",
|
||||
margin: "40px auto"
|
||||
},
|
||||
labelWidth: "100",
|
||||
modelValue: {},
|
||||
columns: [
|
||||
{
|
||||
label: "标签",
|
||||
width: 120,
|
||||
prop: "tag"
|
||||
},
|
||||
{
|
||||
label: "执行进度",
|
||||
width: 200,
|
||||
prop: "progress"
|
||||
},
|
||||
{
|
||||
label: "评分",
|
||||
width: 200,
|
||||
prop: "rate",
|
||||
valueType: "rate"
|
||||
},
|
||||
{
|
||||
label: "是否显示",
|
||||
width: 100,
|
||||
prop: "switch",
|
||||
valueType: "switch"
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
tag: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入标签"
|
||||
}
|
||||
],
|
||||
progress: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入执行进度"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "第三步",
|
||||
form: {
|
||||
labelPosition: "top",
|
||||
style: {
|
||||
width: "400px",
|
||||
margin: "40px auto"
|
||||
},
|
||||
modelValue: {},
|
||||
columns: [
|
||||
{
|
||||
label: "时间",
|
||||
prop: "time",
|
||||
valueType: "date-picker"
|
||||
},
|
||||
{
|
||||
label: "要求",
|
||||
prop: "demand",
|
||||
valueType: "checkbox",
|
||||
options: [
|
||||
{
|
||||
label: "四六级",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "计算机二级证书",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "普通话证书",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "奖励",
|
||||
prop: "price"
|
||||
},
|
||||
{
|
||||
label: "提成",
|
||||
prop: "percentage"
|
||||
},
|
||||
{
|
||||
label: "说明",
|
||||
prop: "desc",
|
||||
valueType: "textarea",
|
||||
fieldProps: {
|
||||
maxlength: 10,
|
||||
showWordLimit: true,
|
||||
autosize: { minRows: 2, maxRows: 4 }
|
||||
}
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
time: [
|
||||
{
|
||||
required: true,
|
||||
trigger: "change",
|
||||
message: "请选择时间"
|
||||
}
|
||||
],
|
||||
demand: [
|
||||
{
|
||||
required: true,
|
||||
trigger: "change",
|
||||
message: "请选择要求"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
const active = ref(1);
|
||||
|
||||
const next = (actives: number, values: any) => {
|
||||
active.value = actives;
|
||||
console.log(active, values, stepForm.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PlusStepsForm
|
||||
v-model="active"
|
||||
simple
|
||||
class="w-[800px] m-auto"
|
||||
:data="stepForm"
|
||||
align-center
|
||||
@next="next"
|
||||
/>
|
||||
</template>
|
||||
67
src/views/schema-form/index.vue
Normal file
67
src/views/schema-form/index.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { list } from "./list";
|
||||
|
||||
defineOptions({
|
||||
name: "SchemaForm"
|
||||
});
|
||||
|
||||
const selected = ref(0);
|
||||
|
||||
function tabClick({ index }) {
|
||||
selected.value = index;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never" :body-style="{ height: 'calc(100vh - 180px)' }">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
JSON 格式配置表单，采用优秀开源的
|
||||
<el-link
|
||||
href="https://plus-pro-components.com/components/form.html"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
PlusProComponents
|
||||
</el-link>
|
||||
，维护整体表单只需操作 columns 配置即可
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-tabs @tab-click="tabClick">
|
||||
<template v-for="(item, index) of list" :key="item.key">
|
||||
<el-tab-pane :lazy="true">
|
||||
<template #label>
|
||||
<el-tooltip
|
||||
:content="`（第 ${index + 1} 个示例）${item.content}`"
|
||||
placement="top-end"
|
||||
>
|
||||
<span>{{ item.title }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<component :is="item.component" v-if="selected == index" />
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-tabs__nav-wrap)::after {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-next),
|
||||
:deep(.el-tabs__nav-prev) {
|
||||
font-size: 16px;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-next.is-disabled),
|
||||
:deep(.el-tabs__nav-prev.is-disabled) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
41
src/views/schema-form/list.tsx
Normal file
41
src/views/schema-form/list.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import Base from "./form/base.vue";
|
||||
import Dialog from "./form/dialog.vue";
|
||||
import Drawer from "./form/drawer.vue";
|
||||
import Steps from "./form/steps.vue";
|
||||
import Search from "./form/search.vue";
|
||||
|
||||
const rendContent = (val: string) =>
|
||||
`代码位置：src/views/schema-form/form/${val}.vue`;
|
||||
|
||||
export const list = [
|
||||
{
|
||||
key: "base",
|
||||
content: rendContent("base"),
|
||||
title: "基础表单",
|
||||
component: Base
|
||||
},
|
||||
{
|
||||
key: "dialog",
|
||||
content: rendContent("dialog"),
|
||||
title: "弹框表单",
|
||||
component: Dialog
|
||||
},
|
||||
{
|
||||
key: "drawer",
|
||||
content: rendContent("drawer"),
|
||||
title: "抽屉表单",
|
||||
component: Drawer
|
||||
},
|
||||
{
|
||||
key: "steps",
|
||||
content: rendContent("steps"),
|
||||
title: "分步表单",
|
||||
component: Steps
|
||||
},
|
||||
{
|
||||
key: "search",
|
||||
content: rendContent("search"),
|
||||
title: "搜索表单",
|
||||
component: Search
|
||||
}
|
||||
];
|
||||
@ -22,7 +22,7 @@ import NestProp from "./nestProp.vue";
|
||||
import ImgPreview from "./imgPreview.vue";
|
||||
|
||||
const rendContent = (val: string) =>
|
||||
`代码位置：src/views/pure-table/base/${val}.vue`;
|
||||
`代码位置：src/views/table/base/${val}.vue`;
|
||||
|
||||
export const list = [
|
||||
{
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@ -3,7 +3,7 @@ import Demo2 from "./demo2/index.vue";
|
||||
import Demo3 from "./demo3/index.vue";
|
||||
|
||||
const rendContent = (val: string) =>
|
||||
`代码位置：src/views/pure-table/edit/${val}/index.vue`;
|
||||
`代码位置：src/views/table/edit/${val}/index.vue`;
|
||||
|
||||
export const list = [
|
||||
{
|
||||
@ -10,7 +10,7 @@ import Echarts from "./echarts/index.vue";
|
||||
import TableSelect from "./table-select/index.vue";
|
||||
|
||||
const rendContent = (val: string) =>
|
||||
`代码位置：src/views/pure-table/high/${val}/index.vue`;
|
||||
`代码位置：src/views/table/high/${val}/index.vue`;
|
||||
|
||||
export const list = [
|
||||
{
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user