bqy_fe
4 years ago
parent
2077481d89
commit
555b67132e
@ -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 |
||||||
|
``` |
||||||
@ -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 /> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
}) |
||||||
Loading…
Reference in new issue