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
|
||||
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
|
||||
```
|
||||
|
||||
## 技术栈
|
||||
## technology stack
|
||||
|
||||
- 编程语言：[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/)
|
||||
- Programming Language：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
|
||||
- Build Tools：[Vite 2.x](https://cn.vitejs.dev/)
|
||||
- Front End Frame：[Vue 3.x](https://v3.cn.vuejs.org/)
|
||||
- Subnet Calculator：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
|
||||
- State Management：[Vuex 4.x](https://next.vuex.vuejs.org/)
|
||||
- PC UI Frame：[Element Plus](https://element-plus.org/#/zh-CN)
|
||||
- H5 UI Frame：[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)
|
||||
- CSS Pre：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
|
||||
- HTTP Tool：[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)
|
||||
- Coding Standards：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
|
||||
- Submit Specifications：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)
|
||||
- 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/)
|
||||
- Auto Deploy：[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)
|
||||
|
||||
### 功能清单
|
||||
### Function List
|
||||
|
||||
- [x] 动态添加页面
|
||||
- [x] 拖拽式生成组件
|
||||
- [ ] service worker + indexeddb 实现无服务端的前端交互
|
||||
- [ ] 数据源管理
|
||||
- [ ] 提供预置函数
|
||||
- [ ] 更多组件的封装
|
||||
- [ ] 其他...
|
||||
- [x] Add pages dynamically
|
||||
- [x] Drag and drop components
|
||||
- [ ] service worker + indexeddb Implement server-free front-end interaction
|
||||
- [ ] DataSource Admin Console
|
||||
- [ ] Provide preset functions
|
||||
- [ ] More component encapsulation
|
||||
- [ ] Others...
|
||||
|
||||
### 简易说明
|
||||
|
||||
目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内，
|
||||
然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值
|
||||
|
||||
### 快速生成组件属性
|
||||
### Generate component properties quickly
|
||||
|
||||
```javascript
|
||||
// 在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 |
|
||||
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
||||
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
### 提交规范
|
||||
### Git Contribution submission specification
|
||||
|
||||
- `feat` 增加新功能
|
||||
- `fix` 修复问题/BUG
|
||||
- `style` 代码风格相关无影响运行结果的
|
||||
- `perf` 优化/性能提升
|
||||
- `refactor` 重构
|
||||
- `revert` 撤销修改
|
||||
- `test` 测试相关
|
||||
- `docs` 文档/注释
|
||||
- `build` 对构建系统或者外部依赖项进行了修改
|
||||
- `chore` 依赖更新/脚手架配置修改等
|
||||
- `workflow` 工作流改进
|
||||
- `ci` 持续集成
|
||||
- `types` 类型定义文件更改
|
||||
- `wip` 开发中
|
||||
- `feat` Add new features
|
||||
- `fix` Fix the problem/BUG
|
||||
- `style` The code style is related and does not affect the running result
|
||||
- `perf` Optimization/performance improvement
|
||||
- `refactor` Refactor
|
||||
- `revert` Undo edit
|
||||
- `test` Test related
|
||||
- `docs` Documentation/notes
|
||||
- `chore` Dependency update/scaffolding configuration modification etc.
|
||||
- `workflow` Workflow improvements
|
||||
- `ci` Continuous integration
|
||||
- `types` Type definition file changes
|
||||
- `wip` In development
|
||||
|
||||
## 快速开始
|
||||
## QUICK START
|
||||
|
||||
### 安装依赖
|
||||
### Install and use
|
||||
|
||||
```sh
|
||||
npm install
|
||||
|
|
@ -98,13 +96,13 @@ npm install
|
|||
yarn add
|
||||
```
|
||||
|
||||
### 启动项目
|
||||
### run
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 项目打包
|
||||
### build
|
||||
|
||||
```sh
|
||||
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": {
|
||||
"@vant/touch-emulator": "^1.3.0",
|
||||
"@vueuse/core": "^4.11.2",
|
||||
"@vueuse/integrations": "^4.11.2",
|
||||
"@vueuse/core": "^5.0.2",
|
||||
"@vueuse/integrations": "^5.0.2",
|
||||
"axios": "^0.21.1",
|
||||
"dayjs": "^1.10.5",
|
||||
"dexie": "^3.0.3",
|
||||
|
|
@ -41,9 +41,9 @@
|
|||
"devDependencies": {
|
||||
"@commitlint/cli": "^12.1.4",
|
||||
"@commitlint/config-conventional": "^12.1.4",
|
||||
"@types/node": "^15.12.1",
|
||||
"@typescript-eslint/eslint-plugin": "^4.26.0",
|
||||
"@typescript-eslint/parser": "^4.26.0",
|
||||
"@types/node": "^15.12.2",
|
||||
"@typescript-eslint/eslint-plugin": "^4.26.1",
|
||||
"@typescript-eslint/parser": "^4.26.1",
|
||||
"@vitejs/plugin-legacy": "^1.4.1",
|
||||
"@vitejs/plugin-vue": "^1.2.3",
|
||||
"@vitejs/plugin-vue-jsx": "^1.1.5",
|
||||
|
|
@ -67,13 +67,13 @@
|
|||
"stylelint-config-standard": "^22.0.0",
|
||||
"stylelint-order": "^4.1.0",
|
||||
"typescript": "^4.3.2",
|
||||
"vite": "2.3.6",
|
||||
"vite": "2.3.7",
|
||||
"vite-plugin-components": "^0.10.4",
|
||||
"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-tsc": "^0.1.7",
|
||||
"windicss": "^3.1.1"
|
||||
"windicss": "^3.1.3"
|
||||
},
|
||||
"repository": {
|
||||
"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
|
||||
*/
|
||||
export { TablePropEditor } from './table-prop-editor/table-prop-editor'
|
||||
export { AttrEditor } from './AttrEditor'
|
||||
|
|
|
|||
|
|
@ -1,167 +1,65 @@
|
|||
/**
|
||||
* @name: RightAttributePanel
|
||||
* @author: 卜启缘
|
||||
* @date: 2021/4/28 16:59
|
||||
* @description：属性编辑器
|
||||
* @update: 2021/4/28 16:59
|
||||
/*
|
||||
* @Author: 卜启缘
|
||||
* @Date: 2021-06-01 13:22:14
|
||||
* @LastEditTime: 2021-06-10 16:33:02
|
||||
* @LastEditors: 卜启缘
|
||||
* @Description: 属性编辑器
|
||||
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\right-attribute-panel\index.tsx
|
||||
* RightAttributePanel
|
||||
*/
|
||||
|
||||
import { defineComponent, reactive } from 'vue'
|
||||
import styles from './index.module.scss'
|
||||
import './index.common.scss'
|
||||
import {
|
||||
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 { ElTabPane, ElTabs } from 'element-plus'
|
||||
|
||||
import MonacoEditor from '../common/monaco-editor/MonacoEditor'
|
||||
import { useDotProp } from '@/visual-editor/hooks/useDotProp'
|
||||
import { useVisualData } from '@/visual-editor/hooks/useVisualData'
|
||||
import { AttrEditor } from './components'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RightAttributePanel',
|
||||
setup() {
|
||||
const { visualConfig, currentBlock } = useVisualData()
|
||||
const { currentBlock } = useVisualData()
|
||||
|
||||
const state = reactive({
|
||||
activeName: 'attr',
|
||||
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]()
|
||||
const handleSchemaChange = (val) => {
|
||||
try {
|
||||
const newObj = JSON.parse(val)
|
||||
Object.assign(currentBlock.value, newObj)
|
||||
} catch (e) {
|
||||
console.log('JSON格式有误：', e)
|
||||
}
|
||||
}
|
||||
|
||||
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) => {
|
||||
try {
|
||||
const newObj = JSON.parse(val)
|
||||
Object.assign(currentBlock.value, newObj)
|
||||
} catch (e) {
|
||||
console.log('JSON格式有误：', e)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class={[styles.drawer, { [styles.isOpen]: state.isOpen }]}>
|
||||
<div class={styles.floatingActionBtn} onClick={() => (state.isOpen = !state.isOpen)}>
|
||||
<i class={`el-icon-d-arrow-${state.isOpen ? 'right' : 'left'}`}></i>
|
||||
</div>
|
||||
<div class={styles.attrs}>
|
||||
<ElTabs v-model={state.activeName}>
|
||||
<ElTabPane label="属性面板" name="attr">
|
||||
<ElForm size="mini" label-position="left">
|
||||
{content}
|
||||
</ElForm>
|
||||
</ElTabPane>
|
||||
<ElTabPane label="JSON" name="json" lazy>
|
||||
<MonacoEditor
|
||||
code={JSON.stringify(currentBlock.value)}
|
||||
layout={{ width: 300, height: 800 }}
|
||||
vid={state.activeName == 'json' ? currentBlock.value._vid : -1}
|
||||
onChange={handleSchemaChange}
|
||||
title=""
|
||||
/>
|
||||
</ElTabPane>
|
||||
</ElTabs>
|
||||
</div>
|
||||
return () => (
|
||||
<>
|
||||
<div class={[styles.drawer, { [styles.isOpen]: state.isOpen }]}>
|
||||
<div class={styles.floatingActionBtn} onClick={() => (state.isOpen = !state.isOpen)}>
|
||||
<i class={`el-icon-d-arrow-${state.isOpen ? 'right' : 'left'}`}></i>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
<div class={styles.attrs}>
|
||||
<ElTabs v-model={state.activeName}>
|
||||
<ElTabPane label="属性面板" name="attr">
|
||||
<AttrEditor />
|
||||
</ElTabPane>
|
||||
<ElTabPane label="JSON" name="json" lazy>
|
||||
<MonacoEditor
|
||||
code={JSON.stringify(currentBlock.value)}
|
||||
layout={{ width: 300, height: 800 }}
|
||||
vid={state.activeName == 'json' ? currentBlock.value._vid : -1}
|
||||
onChange={handleSchemaChange}
|
||||
title=""
|
||||
/>
|
||||
</ElTabPane>
|
||||
</ElTabs>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue