chore: update deps
This commit is contained in:
bqy_fe
parent
2077481d89
commit
555b67132e
102
README.md
102
README.md
|
|
@ -1,6 +1,10 @@
|
||||||
# 基于 Vite2.x + Vue3.x + TypeScript H5 低代码平台
|
# base on Vite2.x + Vue3.x + TypeScript H5 Low code platform
|
||||||
|
|
||||||
## 克隆主分支，忽略 git-pages 等无关分支
|
[](LICENSE)
|
||||||
|
|
||||||
|
**English** | [中文](./README.zh-CN.md)
|
||||||
|
|
||||||
|
## Clone the main branch and ignore irrelevant branches such as git-pages
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
|
git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
|
||||||
|
|
@ -8,39 +12,34 @@ git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
|
||||||
git clone --single-branch https://gitee.com/buqiyuan/vite-vue3-lowcode.git
|
git clone --single-branch https://gitee.com/buqiyuan/vite-vue3-lowcode.git
|
||||||
```
|
```
|
||||||
|
|
||||||
## 技术栈
|
## technology stack
|
||||||
|
|
||||||
- 编程语言：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
|
- Programming Language：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
|
||||||
- 构建工具：[Vite 2.x](https://cn.vitejs.dev/)
|
- Build Tools：[Vite 2.x](https://cn.vitejs.dev/)
|
||||||
- 前端框架：[Vue 3.x](https://v3.cn.vuejs.org/)
|
- Front End Frame：[Vue 3.x](https://v3.cn.vuejs.org/)
|
||||||
- 路由工具：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
|
- Subnet Calculator：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
|
||||||
- 状态管理：[Vuex 4.x](https://next.vuex.vuejs.org/)
|
- State Management：[Vuex 4.x](https://next.vuex.vuejs.org/)
|
||||||
- PC 端 UI 框架：[Element Plus](https://element-plus.org/#/zh-CN)
|
- PC UI Frame：[Element Plus](https://element-plus.org/#/zh-CN)
|
||||||
- H5 端 UI 框架：[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)
|
- H5 UI Frame：[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)
|
||||||
- CSS 预编译：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
|
- CSS Pre：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
|
||||||
- HTTP 工具：[Axios](https://axios-http.com/)
|
- HTTP Tool：[Axios](https://axios-http.com/)
|
||||||
- Git Hook 工具：[husky](https://typicode.github.io/husky/#/) + [lint-staged](https://github.com/okonet/lint-staged)
|
- Git Hook 工具：[husky](https://typicode.github.io/husky/#/) + [lint-staged](https://github.com/okonet/lint-staged)
|
||||||
- 代码规范：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
|
- Coding Standards：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
|
||||||
- 提交规范：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)
|
- Submit Specifications：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)
|
||||||
- 单元测试：[vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest](https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/)
|
- Unit Testing：[vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest](https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/)
|
||||||
- 自动部署：[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)
|
- Auto Deploy：[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)
|
||||||
|
|
||||||
### 功能清单
|
### Function List
|
||||||
|
|
||||||
- [x] 动态添加页面
|
- [x] Add pages dynamically
|
||||||
- [x] 拖拽式生成组件
|
- [x] Drag and drop components
|
||||||
- [ ] service worker + indexeddb 实现无服务端的前端交互
|
- [ ] service worker + indexeddb Implement server-free front-end interaction
|
||||||
- [ ] 数据源管理
|
- [ ] DataSource Admin Console
|
||||||
- [ ] 提供预置函数
|
- [ ] Provide preset functions
|
||||||
- [ ] 更多组件的封装
|
- [ ] More component encapsulation
|
||||||
- [ ] 其他...
|
- [ ] Others...
|
||||||
|
|
||||||
### 简易说明
|
### Generate component properties quickly
|
||||||
|
|
||||||
目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内，
|
|
||||||
然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值
|
|
||||||
|
|
||||||
### 快速生成组件属性
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// 在vant文档中 chrome控制台输入以下代码，快速生成组件属性
|
// 在vant文档中 chrome控制台输入以下代码，快速生成组件属性
|
||||||
|
|
@ -61,36 +60,35 @@ $$('#props + table tr').reduce((prev, curr) => {
|
||||||
}, {})
|
}, {})
|
||||||
```
|
```
|
||||||
|
|
||||||
## 浏览器支持
|
## Browser support
|
||||||
|
|
||||||
本地开发推荐使用`Chrome 80+` 浏览器
|
The `Chrome 80+` browser is recommended for local development
|
||||||
|
|
||||||
支持现代浏览器, 不支持 IE
|
Support modern browsers, not IE
|
||||||
|
|
||||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
||||||
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||||
|
|
||||||
### 提交规范
|
### Git Contribution submission specification
|
||||||
|
|
||||||
- `feat` 增加新功能
|
- `feat` Add new features
|
||||||
- `fix` 修复问题/BUG
|
- `fix` Fix the problem/BUG
|
||||||
- `style` 代码风格相关无影响运行结果的
|
- `style` The code style is related and does not affect the running result
|
||||||
- `perf` 优化/性能提升
|
- `perf` Optimization/performance improvement
|
||||||
- `refactor` 重构
|
- `refactor` Refactor
|
||||||
- `revert` 撤销修改
|
- `revert` Undo edit
|
||||||
- `test` 测试相关
|
- `test` Test related
|
||||||
- `docs` 文档/注释
|
- `docs` Documentation/notes
|
||||||
- `build` 对构建系统或者外部依赖项进行了修改
|
- `chore` Dependency update/scaffolding configuration modification etc.
|
||||||
- `chore` 依赖更新/脚手架配置修改等
|
- `workflow` Workflow improvements
|
||||||
- `workflow` 工作流改进
|
- `ci` Continuous integration
|
||||||
- `ci` 持续集成
|
- `types` Type definition file changes
|
||||||
- `types` 类型定义文件更改
|
- `wip` In development
|
||||||
- `wip` 开发中
|
|
||||||
|
|
||||||
## 快速开始
|
## QUICK START
|
||||||
|
|
||||||
### 安装依赖
|
### Install and use
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm install
|
npm install
|
||||||
|
|
@ -98,13 +96,13 @@ npm install
|
||||||
yarn add
|
yarn add
|
||||||
```
|
```
|
||||||
|
|
||||||
### 启动项目
|
### run
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
### 项目打包
|
### build
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm run build
|
npm run build
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
# 基于 Vite2.x + Vue3.x + TypeScript H5 低代码平台
|
||||||
|
|
||||||
|
[](LICENSE)
|
||||||
|
|
||||||
|
**中文** | [English](./README.md)
|
||||||
|
|
||||||
|
## 克隆主分支，忽略 git-pages 等无关分支
|
||||||
|
|
||||||
|
```shell
|
||||||
|
git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
|
||||||
|
# or
|
||||||
|
git clone --single-branch https://gitee.com/buqiyuan/vite-vue3-lowcode.git
|
||||||
|
```
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- 编程语言：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
|
||||||
|
- 构建工具：[Vite 2.x](https://cn.vitejs.dev/)
|
||||||
|
- 前端框架：[Vue 3.x](https://v3.cn.vuejs.org/)
|
||||||
|
- 路由工具：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
|
||||||
|
- 状态管理：[Vuex 4.x](https://next.vuex.vuejs.org/)
|
||||||
|
- PC 端 UI 框架：[Element Plus](https://element-plus.org/#/zh-CN)
|
||||||
|
- H5 端 UI 框架：[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)
|
||||||
|
- CSS 预编译：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
|
||||||
|
- HTTP 工具：[Axios](https://axios-http.com/)
|
||||||
|
- Git Hook 工具：[husky](https://typicode.github.io/husky/#/) + [lint-staged](https://github.com/okonet/lint-staged)
|
||||||
|
- 代码规范：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
|
||||||
|
- 提交规范：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)
|
||||||
|
- 单元测试：[vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest](https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/)
|
||||||
|
- 自动部署：[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)
|
||||||
|
|
||||||
|
### 功能清单
|
||||||
|
|
||||||
|
- [x] 动态添加页面
|
||||||
|
- [x] 拖拽式生成组件
|
||||||
|
- [ ] service worker + indexeddb 实现无服务端的前端交互
|
||||||
|
- [ ] 数据源管理
|
||||||
|
- [ ] 提供预置函数
|
||||||
|
- [ ] 更多组件的封装
|
||||||
|
- [ ] 其他...
|
||||||
|
|
||||||
|
### 简易说明
|
||||||
|
|
||||||
|
目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内，
|
||||||
|
然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值
|
||||||
|
|
||||||
|
### 快速生成组件属性
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 在vant文档中 chrome控制台输入以下代码，快速生成组件属性
|
||||||
|
let propObj = {
|
||||||
|
string: (config) => `createEditorInputProp(${JSON.stringify(config)})`,
|
||||||
|
number: (config) => `createEditorInputNumberProp(${JSON.stringify(config)})`,
|
||||||
|
boolean: (config) => `createEditorSwitchProp(${JSON.stringify(config)})`
|
||||||
|
}
|
||||||
|
|
||||||
|
$$('#props + table tr').reduce((prev, curr) => {
|
||||||
|
const children = curr.children
|
||||||
|
const key = children[0].textContent.replace(/-([a-z])/g, (all, i) => i.toUpperCase())
|
||||||
|
const value = (propObj[children[2].textContent] ?? propObj['string'])({
|
||||||
|
label: `'${children[1].textContent}'`
|
||||||
|
}).replaceAll('"', '')
|
||||||
|
prev[key] = value
|
||||||
|
return prev
|
||||||
|
}, {})
|
||||||
|
```
|
||||||
|
|
||||||
|
## 浏览器支持
|
||||||
|
|
||||||
|
本地开发推荐使用`Chrome 80+` 浏览器
|
||||||
|
|
||||||
|
支持现代浏览器, 不支持 IE
|
||||||
|
|
||||||
|
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||||
|
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
||||||
|
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||||
|
|
||||||
|
### 提交规范
|
||||||
|
|
||||||
|
- `feat` 增加新功能
|
||||||
|
- `fix` 修复问题/BUG
|
||||||
|
- `style` 代码风格相关无影响运行结果的
|
||||||
|
- `perf` 优化/性能提升
|
||||||
|
- `refactor` 重构
|
||||||
|
- `revert` 撤销修改
|
||||||
|
- `test` 测试相关
|
||||||
|
- `docs` 文档/注释
|
||||||
|
- `build` 对构建系统或者外部依赖项进行了修改
|
||||||
|
- `chore` 依赖更新/脚手架配置修改等
|
||||||
|
- `workflow` 工作流改进
|
||||||
|
- `ci` 持续集成
|
||||||
|
- `types` 类型定义文件更改
|
||||||
|
- `wip` 开发中
|
||||||
|
|
||||||
|
## 快速开始
|
||||||
|
|
||||||
|
### 安装依赖
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
# or
|
||||||
|
yarn add
|
||||||
|
```
|
||||||
|
|
||||||
|
### 启动项目
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### 项目打包
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
16
package.json
16
package.json
|
|
@ -21,8 +21,8 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vant/touch-emulator": "^1.3.0",
|
"@vant/touch-emulator": "^1.3.0",
|
||||||
"@vueuse/core": "^4.11.2",
|
"@vueuse/core": "^5.0.2",
|
||||||
"@vueuse/integrations": "^4.11.2",
|
"@vueuse/integrations": "^5.0.2",
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
"dayjs": "^1.10.5",
|
"dayjs": "^1.10.5",
|
||||||
"dexie": "^3.0.3",
|
"dexie": "^3.0.3",
|
||||||
|
|
@ -41,9 +41,9 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^12.1.4",
|
"@commitlint/cli": "^12.1.4",
|
||||||
"@commitlint/config-conventional": "^12.1.4",
|
"@commitlint/config-conventional": "^12.1.4",
|
||||||
"@types/node": "^15.12.1",
|
"@types/node": "^15.12.2",
|
||||||
"@typescript-eslint/eslint-plugin": "^4.26.0",
|
"@typescript-eslint/eslint-plugin": "^4.26.1",
|
||||||
"@typescript-eslint/parser": "^4.26.0",
|
"@typescript-eslint/parser": "^4.26.1",
|
||||||
"@vitejs/plugin-legacy": "^1.4.1",
|
"@vitejs/plugin-legacy": "^1.4.1",
|
||||||
"@vitejs/plugin-vue": "^1.2.3",
|
"@vitejs/plugin-vue": "^1.2.3",
|
||||||
"@vitejs/plugin-vue-jsx": "^1.1.5",
|
"@vitejs/plugin-vue-jsx": "^1.1.5",
|
||||||
|
|
@ -67,13 +67,13 @@
|
||||||
"stylelint-config-standard": "^22.0.0",
|
"stylelint-config-standard": "^22.0.0",
|
||||||
"stylelint-order": "^4.1.0",
|
"stylelint-order": "^4.1.0",
|
||||||
"typescript": "^4.3.2",
|
"typescript": "^4.3.2",
|
||||||
"vite": "2.3.6",
|
"vite": "2.3.7",
|
||||||
"vite-plugin-components": "^0.10.4",
|
"vite-plugin-components": "^0.10.4",
|
||||||
"vite-plugin-style-import": "^0.10.1",
|
"vite-plugin-style-import": "^0.10.1",
|
||||||
"vite-plugin-windicss": "^1.0.1",
|
"vite-plugin-windicss": "^1.0.3",
|
||||||
"vue-eslint-parser": "^7.6.0",
|
"vue-eslint-parser": "^7.6.0",
|
||||||
"vue-tsc": "^0.1.7",
|
"vue-tsc": "^0.1.7",
|
||||||
"windicss": "^3.1.1"
|
"windicss": "^3.1.3"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
/*
|
||||||
|
* @Author: 卜启缘
|
||||||
|
* @Date: 2021-06-10 16:23:06
|
||||||
|
* @LastEditTime: 2021-06-10 16:46:36
|
||||||
|
* @LastEditors: 卜启缘
|
||||||
|
* @Description: 组件属性编辑器
|
||||||
|
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\components\AttrEditor.tsx
|
||||||
|
*/
|
||||||
|
import { defineComponent } from 'vue'
|
||||||
|
import {
|
||||||
|
ElColorPicker,
|
||||||
|
ElForm,
|
||||||
|
ElFormItem,
|
||||||
|
ElInput,
|
||||||
|
ElInputNumber,
|
||||||
|
ElOption,
|
||||||
|
ElSelect,
|
||||||
|
ElSwitch,
|
||||||
|
ElPopover
|
||||||
|
} from 'element-plus'
|
||||||
|
import { VisualEditorProps, VisualEditorPropsType } from '@/visual-editor/visual-editor.props'
|
||||||
|
import { TablePropEditor } from './'
|
||||||
|
import { useDotProp } from '@/visual-editor/hooks/useDotProp'
|
||||||
|
import { useVisualData } from '@/visual-editor/hooks/useVisualData'
|
||||||
|
|
||||||
|
export const AttrEditor = defineComponent({
|
||||||
|
setup() {
|
||||||
|
const { visualConfig, currentBlock } = useVisualData()
|
||||||
|
|
||||||
|
const renderEditor = (propName: string, propConfig: VisualEditorProps) => {
|
||||||
|
const { propObj, prop } = useDotProp(currentBlock.value.props, propName)
|
||||||
|
|
||||||
|
return {
|
||||||
|
[VisualEditorPropsType.input]: () => (
|
||||||
|
<ElInput v-model={propObj[prop]} placeholder={propConfig.tips || propConfig.label} />
|
||||||
|
),
|
||||||
|
[VisualEditorPropsType.inputNumber]: () => <ElInputNumber v-model={propObj[prop]} />,
|
||||||
|
[VisualEditorPropsType.switch]: () => <ElSwitch v-model={propObj[prop]} />,
|
||||||
|
[VisualEditorPropsType.color]: () => <ElColorPicker v-model={propObj[prop]} />,
|
||||||
|
[VisualEditorPropsType.select]: () => (
|
||||||
|
<ElSelect v-model={propObj[prop]} valueKey={'value'} multiple={propConfig.multiple}>
|
||||||
|
{propConfig.options?.map((opt) => (
|
||||||
|
<ElOption label={opt.label} value={opt.value} />
|
||||||
|
))}
|
||||||
|
</ElSelect>
|
||||||
|
),
|
||||||
|
[VisualEditorPropsType.table]: () => (
|
||||||
|
<TablePropEditor v-model={propObj[prop]} propConfig={propConfig} />
|
||||||
|
)
|
||||||
|
}[propConfig.type]()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单项
|
||||||
|
const FormEditor = () => {
|
||||||
|
const content: JSX.Element[] = []
|
||||||
|
if (!currentBlock.value) {
|
||||||
|
content.push(
|
||||||
|
<>
|
||||||
|
<ElFormItem label="容器宽度">
|
||||||
|
<ElInputNumber v-model={currentBlock.value.width} {...({ step: 100 } as any)} />
|
||||||
|
</ElFormItem>
|
||||||
|
<ElFormItem label="容器高度">
|
||||||
|
<ElInputNumber v-model={currentBlock.value.height} {...({ step: 100 } as any)} />
|
||||||
|
</ElFormItem>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
const { componentKey } = currentBlock.value
|
||||||
|
const component = visualConfig.componentMap[componentKey]
|
||||||
|
console.log('props.block:', currentBlock.value)
|
||||||
|
content.push(
|
||||||
|
<>
|
||||||
|
<ElFormItem label="组件ID" labelWidth={'76px'}>
|
||||||
|
{currentBlock.value._vid}
|
||||||
|
<ElPopover
|
||||||
|
width={200}
|
||||||
|
trigger="hover"
|
||||||
|
content={`你可以利用该组件ID。对该组件进行获取和设置其属性，组件可用属性可在控制台输入：$$refs.${currentBlock.value._vid} 进行查看`}
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
reference: () => (
|
||||||
|
<i style={{ marginLeft: '6px' }} class={'el-icon-warning-outline'}></i>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</ElPopover>
|
||||||
|
</ElFormItem>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
if (!!component) {
|
||||||
|
if (!!component.props) {
|
||||||
|
content.push(
|
||||||
|
...Object.entries(component.props || {}).map(([propName, propConfig]) => (
|
||||||
|
<>
|
||||||
|
<ElFormItem key={currentBlock.value._vid + propName}>
|
||||||
|
{{
|
||||||
|
label: () =>
|
||||||
|
propConfig.tips ? (
|
||||||
|
<>
|
||||||
|
<ElPopover width={200} trigger={'hover'} content={propConfig.tips}>
|
||||||
|
{{
|
||||||
|
reference: () => <i class={'el-icon-warning-outline'}></i>
|
||||||
|
}}
|
||||||
|
</ElPopover>
|
||||||
|
{propConfig.label}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
propConfig.label
|
||||||
|
),
|
||||||
|
default: () => renderEditor(propName, propConfig)
|
||||||
|
}}
|
||||||
|
</ElFormItem>
|
||||||
|
</>
|
||||||
|
))
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ElForm size="mini" label-position="left">
|
||||||
|
{content}
|
||||||
|
</ElForm>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<>
|
||||||
|
<FormEditor />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -6,3 +6,4 @@
|
||||||
* @update: 2021/5/30 10:57
|
* @update: 2021/5/30 10:57
|
||||||
*/
|
*/
|
||||||
export { TablePropEditor } from './table-prop-editor/table-prop-editor'
|
export { TablePropEditor } from './table-prop-editor/table-prop-editor'
|
||||||
|
export { AttrEditor } from './AttrEditor'
|
||||||
|
|
|
||||||
|
|
@ -1,131 +1,32 @@
|
||||||
/**
|
/*
|
||||||
* @name: RightAttributePanel
|
* @Author: 卜启缘
|
||||||
* @author: 卜启缘
|
* @Date: 2021-06-01 13:22:14
|
||||||
* @date: 2021/4/28 16:59
|
* @LastEditTime: 2021-06-10 16:33:02
|
||||||
* @description：属性编辑器
|
* @LastEditors: 卜启缘
|
||||||
* @update: 2021/4/28 16:59
|
* @Description: 属性编辑器
|
||||||
|
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\index.tsx
|
||||||
|
* RightAttributePanel
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { defineComponent, reactive } from 'vue'
|
import { defineComponent, reactive } from 'vue'
|
||||||
import styles from './index.module.scss'
|
import styles from './index.module.scss'
|
||||||
import './index.common.scss'
|
import './index.common.scss'
|
||||||
import {
|
import { ElTabPane, ElTabs } from 'element-plus'
|
||||||
ElColorPicker,
|
|
||||||
ElForm,
|
|
||||||
ElFormItem,
|
|
||||||
ElInput,
|
|
||||||
ElInputNumber,
|
|
||||||
ElOption,
|
|
||||||
ElSelect,
|
|
||||||
ElSwitch,
|
|
||||||
ElTabPane,
|
|
||||||
ElTabs,
|
|
||||||
ElPopover
|
|
||||||
} from 'element-plus'
|
|
||||||
import { VisualEditorProps, VisualEditorPropsType } from '@/visual-editor/visual-editor.props'
|
|
||||||
import { TablePropEditor } from './components/'
|
|
||||||
import MonacoEditor from '../common/monaco-editor/MonacoEditor'
|
import MonacoEditor from '../common/monaco-editor/MonacoEditor'
|
||||||
import { useDotProp } from '@/visual-editor/hooks/useDotProp'
|
|
||||||
import { useVisualData } from '@/visual-editor/hooks/useVisualData'
|
import { useVisualData } from '@/visual-editor/hooks/useVisualData'
|
||||||
|
import { AttrEditor } from './components'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'RightAttributePanel',
|
name: 'RightAttributePanel',
|
||||||
setup() {
|
setup() {
|
||||||
const { visualConfig, currentBlock } = useVisualData()
|
const { currentBlock } = useVisualData()
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
activeName: 'attr',
|
activeName: 'attr',
|
||||||
isOpen: true
|
isOpen: true
|
||||||
})
|
})
|
||||||
|
|
||||||
const renderEditor = (propName: string, propConfig: VisualEditorProps) => {
|
|
||||||
const { propObj, prop } = useDotProp(currentBlock.value.props, propName)
|
|
||||||
|
|
||||||
return {
|
|
||||||
[VisualEditorPropsType.input]: () => (
|
|
||||||
<ElInput v-model={propObj[prop]} placeholder={propConfig.tips || propConfig.label} />
|
|
||||||
),
|
|
||||||
[VisualEditorPropsType.inputNumber]: () => <ElInputNumber v-model={propObj[prop]} />,
|
|
||||||
[VisualEditorPropsType.switch]: () => <ElSwitch v-model={propObj[prop]} />,
|
|
||||||
[VisualEditorPropsType.color]: () => <ElColorPicker v-model={propObj[prop]} />,
|
|
||||||
[VisualEditorPropsType.select]: () => (
|
|
||||||
<ElSelect v-model={propObj[prop]} valueKey={'value'} multiple={propConfig.multiple}>
|
|
||||||
{(() => {
|
|
||||||
return propConfig.options!.map((opt) => (
|
|
||||||
<ElOption label={opt.label} value={opt.value} />
|
|
||||||
))
|
|
||||||
})()}
|
|
||||||
</ElSelect>
|
|
||||||
),
|
|
||||||
[VisualEditorPropsType.table]: () => (
|
|
||||||
<TablePropEditor v-model={propObj[prop]} propConfig={propConfig} />
|
|
||||||
)
|
|
||||||
}[propConfig.type]()
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
const content: JSX.Element[] = []
|
|
||||||
|
|
||||||
if (!currentBlock.value) {
|
|
||||||
content.push(
|
|
||||||
<>
|
|
||||||
<ElFormItem label="容器宽度">
|
|
||||||
<ElInputNumber v-model={currentBlock.value.width} {...({ step: 100 } as any)} />
|
|
||||||
</ElFormItem>
|
|
||||||
<ElFormItem label="容器高度">
|
|
||||||
<ElInputNumber v-model={currentBlock.value.height} {...({ step: 100 } as any)} />
|
|
||||||
</ElFormItem>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
const { componentKey } = currentBlock.value
|
|
||||||
const component = visualConfig.componentMap[componentKey]
|
|
||||||
console.log('props.block:', currentBlock.value)
|
|
||||||
content.push(
|
|
||||||
<ElFormItem label="组件ID" labelWidth={'76px'}>
|
|
||||||
{currentBlock.value._vid}
|
|
||||||
<ElPopover
|
|
||||||
width={200}
|
|
||||||
trigger="hover"
|
|
||||||
content={`你可以利用该组件ID。对该组件进行获取和设置其属性，组件可用属性可在控制台输入：$$refs.${currentBlock.value._vid} 进行查看`}
|
|
||||||
>
|
|
||||||
{{
|
|
||||||
reference: () => (
|
|
||||||
<i style={{ marginLeft: '6px' }} class={'el-icon-warning-outline'}></i>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</ElPopover>
|
|
||||||
</ElFormItem>
|
|
||||||
)
|
|
||||||
if (!!component) {
|
|
||||||
if (!!component.props) {
|
|
||||||
content.push(
|
|
||||||
...Object.entries(component.props || {}).map(([propName, propConfig]) => (
|
|
||||||
<ElFormItem
|
|
||||||
key={currentBlock.value._vid + propName}
|
|
||||||
v-slots={{
|
|
||||||
label: () =>
|
|
||||||
propConfig.tips ? (
|
|
||||||
<>
|
|
||||||
<ElPopover width={200} trigger={'hover'} content={propConfig.tips}>
|
|
||||||
{{
|
|
||||||
reference: () => <i class={'el-icon-warning-outline'}></i>
|
|
||||||
}}
|
|
||||||
</ElPopover>
|
|
||||||
{propConfig.label}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
propConfig.label
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{renderEditor(propName, propConfig)}
|
|
||||||
</ElFormItem>
|
|
||||||
))
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSchemaChange = (val) => {
|
const handleSchemaChange = (val) => {
|
||||||
try {
|
try {
|
||||||
const newObj = JSON.parse(val)
|
const newObj = JSON.parse(val)
|
||||||
|
|
@ -135,7 +36,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return () => (
|
||||||
<>
|
<>
|
||||||
<div class={[styles.drawer, { [styles.isOpen]: state.isOpen }]}>
|
<div class={[styles.drawer, { [styles.isOpen]: state.isOpen }]}>
|
||||||
<div class={styles.floatingActionBtn} onClick={() => (state.isOpen = !state.isOpen)}>
|
<div class={styles.floatingActionBtn} onClick={() => (state.isOpen = !state.isOpen)}>
|
||||||
|
|
@ -144,9 +45,7 @@ export default defineComponent({
|
||||||
<div class={styles.attrs}>
|
<div class={styles.attrs}>
|
||||||
<ElTabs v-model={state.activeName}>
|
<ElTabs v-model={state.activeName}>
|
||||||
<ElTabPane label="属性面板" name="attr">
|
<ElTabPane label="属性面板" name="attr">
|
||||||
<ElForm size="mini" label-position="left">
|
<AttrEditor />
|
||||||
{content}
|
|
||||||
</ElForm>
|
|
||||||
</ElTabPane>
|
</ElTabPane>
|
||||||
<ElTabPane label="JSON" name="json" lazy>
|
<ElTabPane label="JSON" name="json" lazy>
|
||||||
<MonacoEditor
|
<MonacoEditor
|
||||||
|
|
@ -163,5 +62,4 @@ export default defineComponent({
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue