docs: update README

main
bqy_fe 3 years ago
parent 27fe5fc752
commit 9a05f858db
  1. 56
      README.md
  2. 52
      auto-imports.d.ts
  3. 7
      components.d.ts
  4. 46
      package.json
  5. 1056
      pnpm-lock.yaml
  6. 2
      src/packages/base-widgets/slider/index.tsx
  7. 120
      src/packages/base-widgets/tabbar/index.tsx
  8. 17
      src/packages/base-widgets/tabbar/tabbar-item.tsx
  9. 1
      src/visual-editor/components/header/index.vue
  10. 2
      src/visual-editor/components/left-aside/components/base-widgets/index.tsx
  11. 2
      src/visual-editor/components/left-aside/components/container-component/index.tsx
  12. 2
      src/visual-editor/components/left-aside/components/data-source/data-fetch.vue
  13. 2
      src/visual-editor/components/left-aside/components/data-source/data-model.vue
  14. 4
      src/visual-editor/components/right-attribute-panel/components/attr-editor/components/cross-sortable-options-editor/cross-sortable-options-editor.tsx
  15. 2
      src/visual-editor/components/right-attribute-panel/components/attr-editor/components/prop-config/index.tsx
  16. 98
      src/visual-editor/components/right-attribute-panel/components/attr-editor/components/table-prop-editor/table-prop-edit.service.tsx
  17. 2
      src/visual-editor/components/right-attribute-panel/components/event-action/index.tsx
  18. 477
      src/visual-editor/components/simulator-editor/simulator-editor.vue
  19. 2
      src/visual-editor/visual.command.tsx
  20. 4
      tsconfig.json
  21. 72
      types/utils.d.ts
  22. 14
      vite.config.ts

@ -1,11 +1,41 @@
# 基于 Vite2.x + Vue3.x + TypeScript H5 低代码平台
### 目前还只是一个简单的模板,后面可能会引入较为完善的机制系统,感兴趣的小伙伴可以根据自己的需要去调整, 通过这个项目或许你可以学到 vue3 很多有趣的新特性和玩法。
[![license](https://img.shields.io/github/license/buqiyuan/vite-vue3-lowcode.svg)](LICENSE)
**中文** | [English](./README.EN.md)
### 目前还只是一个简单的模板,后面可能会引入较为完善的机制系统,感兴趣的小伙伴可以根据自己的需要去调整, 通过这个项目或许你可以接触到 vue3 很多有趣的新特性和玩法。
` PS: 此项目为个人半年以前做的实验性小玩具,使用的都是最新的技术栈,后面由于个人时间问题,没有持续维护和完善,暂时计划于2022年下半年开始对项目进行整体的重构和重新设计,实现一个基本可用的简易低代码平台。感谢关注~`
## 计划实现:
- 操作历史快照
- 支持生成 vue 模板组件
- 生成组件大纲树
- 提供常见的表单和列表模板
- v-for 绑定数据源
- 在 sandbox 中执行自定义逻辑
- 基于 monaco-editor 自定义代码补全规则
- 基于 vue3 createRenderer 自定义渲染器
- 使用 Schema 描述数据结构(因为 schema 可以生成校验函数)
- (⊙o⊙)…想到再做了~
### 模型驱动的视图
从最简单的结构来看,一个模型驱动的视图体系包含以下要素:
- 模型
- 定义状态结构
- 定义动作
- 视图
- 订阅状态
- 触发动作
这是很简单的一种渲染模式,可以适用于大多数的场景。
## 克隆项目
```shell
@ -138,25 +168,3 @@ JSON.stringify(
- `ci` 持续集成
- `types` 类型定义文件更改
- `wip` 开发中
## 快速开始
### 安装依赖
```sh
npm install
# or
yarn add
```
### 启动项目
```sh
npm run dev
```
### 项目打包
```sh
npm run build
```

52
auto-imports.d.ts vendored

@ -1,4 +1,54 @@
// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
declare global {}
declare global {
const computed: typeof import('vue')['computed'];
const createApp: typeof import('vue')['createApp'];
const customRef: typeof import('vue')['customRef'];
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'];
const defineComponent: typeof import('vue')['defineComponent'];
const effectScope: typeof import('vue')['effectScope'];
const EffectScope: typeof import('vue')['EffectScope'];
const getCurrentInstance: typeof import('vue')['getCurrentInstance'];
const getCurrentScope: typeof import('vue')['getCurrentScope'];
const h: typeof import('vue')['h'];
const inject: typeof import('vue')['inject'];
const isReadonly: typeof import('vue')['isReadonly'];
const isRef: typeof import('vue')['isRef'];
const markRaw: typeof import('vue')['markRaw'];
const nextTick: typeof import('vue')['nextTick'];
const onActivated: typeof import('vue')['onActivated'];
const onBeforeMount: typeof import('vue')['onBeforeMount'];
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount'];
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate'];
const onDeactivated: typeof import('vue')['onDeactivated'];
const onErrorCaptured: typeof import('vue')['onErrorCaptured'];
const onMounted: typeof import('vue')['onMounted'];
const onRenderTracked: typeof import('vue')['onRenderTracked'];
const onRenderTriggered: typeof import('vue')['onRenderTriggered'];
const onScopeDispose: typeof import('vue')['onScopeDispose'];
const onServerPrefetch: typeof import('vue')['onServerPrefetch'];
const onUnmounted: typeof import('vue')['onUnmounted'];
const onUpdated: typeof import('vue')['onUpdated'];
const provide: typeof import('vue')['provide'];
const reactive: typeof import('vue')['reactive'];
const readonly: typeof import('vue')['readonly'];
const ref: typeof import('vue')['ref'];
const resolveComponent: typeof import('vue')['resolveComponent'];
const shallowReactive: typeof import('vue')['shallowReactive'];
const shallowReadonly: typeof import('vue')['shallowReadonly'];
const shallowRef: typeof import('vue')['shallowRef'];
const toRaw: typeof import('vue')['toRaw'];
const toRef: typeof import('vue')['toRef'];
const toRefs: typeof import('vue')['toRefs'];
const triggerRef: typeof import('vue')['triggerRef'];
const unref: typeof import('vue')['unref'];
const useAttrs: typeof import('vue')['useAttrs'];
const useCssModule: typeof import('vue')['useCssModule'];
const useCssVars: typeof import('vue')['useCssVars'];
const useRoute: typeof import('vue-router')['useRoute'];
const useRouter: typeof import('vue-router')['useRouter'];
const useSlots: typeof import('vue')['useSlots'];
const watch: typeof import('vue')['watch'];
const watchEffect: typeof import('vue')['watchEffect'];
}
export {};

7
components.d.ts vendored

@ -1,5 +1,6 @@
// generated by vite-plugin-components
// read more https://github.com/vuejs/vue-next/pull/3399
// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/vue-next/pull/3399
declare module 'vue' {
export interface GlobalComponents {
@ -15,6 +16,7 @@ declare module 'vue' {
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'];
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'];
ElHeader: typeof import('element-plus/es')['ElHeader'];
ElIcon: typeof import('element-plus/es')['ElIcon'];
ElMain: typeof import('element-plus/es')['ElMain'];
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm'];
ElPopover: typeof import('element-plus/es')['ElPopover'];
@ -24,6 +26,7 @@ declare module 'vue' {
ElTag: typeof import('element-plus/es')['ElTag'];
ElTooltip: typeof import('element-plus/es')['ElTooltip'];
ElTree: typeof import('element-plus/es')['ElTree'];
InfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll'];
}
}

@ -19,7 +19,7 @@
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"lint:lint-staged": "lint-staged",
"deploy": "gh-pages -d dist",
"deploy": "npm run build && npx gh-pages -d dist",
"test:gzip": "npx http-server dist --cors --gzip -c-1",
"test:br": "npx http-server dist --cors --brotli -c-1",
"reinstall": "rimraf pnpm-lock.yaml && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
@ -28,52 +28,50 @@
"dependencies": {
"@element-plus/icons-vue": "^0.2.4",
"@vant/touch-emulator": "^1.3.2",
"@vueuse/core": "^7.5.1",
"@vueuse/integrations": "^7.5.1",
"@vueuse/core": "^7.5.3",
"@vueuse/integrations": "^7.5.3",
"animate.css": "^4.1.1",
"axios": "^0.24.0",
"dayjs": "^1.10.7",
"dexie": "^3.2.0",
"element-plus": "1.3.0-beta.1",
"lodash": "^4.17.21",
"element-plus": "1.3.0-beta.5",
"lodash-es": "^4.17.21",
"monaco-editor": "^0.31.1",
"nanoid": "^3.1.30",
"nanoid": "^3.1.32",
"normalize.css": "^8.0.1",
"nprogress": "^1.0.0-1",
"pinia": "^2.0.9",
"qrcode": "^1.5.0",
"qs": "^6.10.2",
"vant": "3.3.7",
"qs": "^6.10.3",
"vant": "3.4.1",
"vue": "3.2.26",
"vue-router": "^4.0.12",
"vuedraggable": "^4.1.0"
},
"devDependencies": {
"@commitlint/cli": "^16.0.1",
"@commitlint/cli": "^16.0.2",
"@commitlint/config-conventional": "^16.0.0",
"@types/lodash": "^4.14.178",
"@types/node": "^17.0.5",
"@typescript-eslint/eslint-plugin": "^5.8.1",
"@typescript-eslint/parser": "^5.8.1",
"@types/lodash-es": "^4.17.5",
"@types/node": "^17.0.8",
"@typescript-eslint/eslint-plugin": "^5.9.1",
"@typescript-eslint/parser": "^5.9.1",
"@vitejs/plugin-legacy": "^1.6.4",
"@vitejs/plugin-vue": "^2.0.1",
"@vitejs/plugin-vue-jsx": "^1.3.3",
"@vue/compiler-sfc": "3.2.26",
"commitizen": "^4.2.4",
"conventional-changelog-cli": "^2.2.2",
"cross-env": "^7.0.3",
"cz-conventional-changelog": "^3.3.0",
"cz-customizable": "^6.3.0",
"eslint": "^8.5.0",
"eslint": "^8.7.0",
"eslint-config-prettier": "^8.3.0",
"eslint-define-config": "^1.2.1",
"eslint-define-config": "^1.2.2",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.2.0",
"gh-pages": "^3.2.3",
"eslint-plugin-vue": "^8.3.0",
"husky": "^7.0.4",
"lint-staged": "^12.1.4",
"lint-staged": "^12.1.7",
"postcss-html": "^1.3.0",
"prettier": "^2.5.1",
"sass": "1.45.2",
"sass": "1.48.0",
"stylelint": "^14.2.0",
"stylelint-config-html": "^1.0.0",
"stylelint-config-prettier": "^9.0.3",
@ -82,10 +80,10 @@
"stylelint-order": "^5.0.0",
"stylelint-scss": "^4.1.0",
"typescript": "^4.5.4",
"unplugin-auto-import": "^0.5.5",
"unplugin-auto-import": "^0.5.11",
"unplugin-vue-components": "^0.17.11",
"vite": "2.7.10",
"vite-plugin-windicss": "^1.6.1",
"vite": "2.7.12",
"vite-plugin-windicss": "^1.6.2",
"vue-eslint-parser": "^8.0.1",
"windicss": "^3.4.2"
},

File diff suppressed because it is too large Load Diff

@ -16,7 +16,7 @@ import {
createEditorModelBindProp,
createEditorSwitchProp,
} from '@/visual-editor/visual-editor.props';
import { omit } from 'lodash';
import { omit } from 'lodash-es';
export default {
key: 'slider',

@ -6,19 +6,34 @@
* @Description:
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\tabbar\index.tsx
*/
import { Tabbar, TabbarItem } from 'vant'
import type { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'
import { Tabbar, TabbarItem } from 'vant';
import type { VisualEditorComponent } from '@/visual-editor/visual-editor.utils';
import {
createEditorCrossSortableProp,
createEditorInputProp,
createEditorSwitchProp,
createEditorColorProp
} from '@/visual-editor/visual-editor.props'
import { useGlobalProperties } from '@/hooks/useGlobalProperties'
import tabbarItem from './tabbar-item'
import { createNewBlock } from '@/visual-editor/visual-editor.utils'
import { BASE_URL } from '@/visual-editor/utils'
import { onMounted, onBeforeUnmount } from 'vue'
createEditorColorProp,
} from '@/visual-editor/visual-editor.props';
import { useGlobalProperties } from '@/hooks/useGlobalProperties';
import { getTabbarItem } from './tabbar-item';
import { createNewBlock } from '@/visual-editor/visual-editor.utils';
import { BASE_URL } from '@/visual-editor/utils';
import { onMounted, onBeforeUnmount } from 'vue';
const defaultTabbarItems = [
{
icon: 'home-o',
title: '首页',
},
{
icon: 'apps-o',
title: '导航',
},
{
icon: 'user-o',
title: '我的',
},
];
export default {
key: 'tabbar',
@ -26,82 +41,77 @@ export default {
label: '底部标签栏',
preview: () => (
<Tabbar>
<TabbarItem icon="home-o"></TabbarItem>
<TabbarItem icon="apps-o"></TabbarItem>
<TabbarItem icon="user-o"></TabbarItem>
{defaultTabbarItems.map((item) => (
<TabbarItem icon={item.icon}>{item.title}</TabbarItem>
))}
</Tabbar>
),
render: ({ props, block }) => {
const { registerRef } = useGlobalProperties()
const { registerRef } = useGlobalProperties();
onMounted(() => {
const compEl = window.$$refs[block._vid]?.$el
const draggableEl = compEl?.closest('div[data-draggable]')
const compEl = window.$$refs[block._vid]?.$el;
const draggableEl = compEl?.closest('div[data-draggable]');
const dragArea: HTMLDivElement = document.querySelector(
'.simulator-editor-content > .dragArea '
)!
const tabbarEl = draggableEl?.querySelector('.van-tabbar') as HTMLDivElement
'.simulator-editor-content > .dragArea ',
)!;
const tabbarEl = draggableEl?.querySelector('.van-tabbar') as HTMLDivElement;
if (draggableEl && tabbarEl && dragArea) {
tabbarEl.style.position = 'unset'
draggableEl.style.position = 'fixed'
draggableEl.style.bottom = '0'
draggableEl.style.left = '0'
draggableEl.style.width = '100%'
draggableEl.style.zIndex = '1000'
dragArea.style.paddingBottom = '56px'
tabbarEl.style.position = 'unset';
draggableEl.style.position = 'fixed';
draggableEl.style.bottom = '0';
draggableEl.style.left = '0';
draggableEl.style.width = '100%';
draggableEl.style.zIndex = '1000';
dragArea.style.paddingBottom = '56px';
} else {
document.body.style.paddingBottom = '50px'
const slotEl = compEl?.closest('__slot-item')
document.body.style.paddingBottom = '50px';
const slotEl = compEl?.closest('__slot-item');
if (slotEl) {
slotEl.style.position = 'fixed'
slotEl.style.bottom = '0'
slotEl.style.position = 'fixed';
slotEl.style.bottom = '0';
}
}
})
});
onBeforeUnmount(() => {
const dragArea: HTMLDivElement = document.querySelector(
'.simulator-editor-content > .dragArea '
)!
'.simulator-editor-content > .dragArea ',
)!;
if (dragArea) {
dragArea.style.paddingBottom = ''
dragArea.style.paddingBottom = '';
}
})
});
return () => (
<Tabbar ref={(el) => registerRef(el, block._vid)} v-model={props.modelValue} {...props}>
{props.tabs?.map((item) => {
const itemProps = item.block?.props
const url = `${BASE_URL}${props.baseUrl}${itemProps.url}`.replace(/\/{2,}/g, '/')
const itemProps = item.block?.props;
const url = `${BASE_URL}${props.baseUrl}${itemProps.url}`.replace(/\/{2,}/g, '/');
return (
<TabbarItem name={item.value} key={item.value} {...itemProps} url={url}>
{item.label}
</TabbarItem>
)
);
})}
</Tabbar>
)
);
},
props: {
modelValue: createEditorInputProp({
label: '当前选中标签的名称或索引值',
defaultValue: ''
defaultValue: '',
}),
tabs: createEditorCrossSortableProp({
label: '默认选项',
labelPosition: 'top',
multiple: false,
showItemPropsConfig: true,
defaultValue: [
{ label: '首页', value: 'index', component: tabbarItem, block: createNewBlock(tabbarItem) },
{
label: '导航',
value: 'navigation',
component: tabbarItem,
block: createNewBlock(tabbarItem)
},
{ label: '我的', value: 'user', component: tabbarItem, block: createNewBlock(tabbarItem) }
]
defaultValue: defaultTabbarItems.map((item) => {
const block = createNewBlock(getTabbarItem());
block.props.icon = item.icon;
return { label: item.title, value: item.icon, component: getTabbarItem(), block };
}),
}),
fixed: createEditorSwitchProp({ label: '是否固定在底部', defaultValue: true }),
border: createEditorSwitchProp({ label: '是否显示外边框', defaultValue: true }),
@ -116,15 +126,15 @@ export default {
// }),
safeAreaInsetBottom: createEditorSwitchProp({
label: '是否开启底部安全区适配,设置 fixed 时默认开启',
defaultValue: false
})
defaultValue: false,
}),
},
events: [
{ label: '点击左侧按钮时触发', value: 'click-left' },
{ label: '点击右侧按钮时触发', value: 'click-right' }
{ label: '点击右侧按钮时触发', value: 'click-right' },
],
draggable: false,
resize: {
width: true
}
} as VisualEditorComponent
width: true,
},
} as VisualEditorComponent;

@ -6,10 +6,10 @@
* @Description:
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\tabbar\tabbar-item.tsx
*/
import type { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'
import { createEditorInputProp, createEditorSwitchProp } from '@/visual-editor/visual-editor.props'
import type { VisualEditorComponent } from '@/visual-editor/visual-editor.utils';
import { createEditorInputProp, createEditorSwitchProp } from '@/visual-editor/visual-editor.props';
export default {
export const getTabbarItem = (): VisualEditorComponent => ({
key: 'tabbar-item',
moduleName: 'baseWidgets',
label: '底部标签栏',
@ -24,7 +24,7 @@ export default {
iconPrefix: createEditorInputProp({
label: '图标类名前缀',
tips: '图标类名前缀,同 Icon 组件的 class-prefix 属性',
defaultValue: 'van-icon'
defaultValue: 'van-icon',
}),
dot: createEditorSwitchProp({ label: '是否显示图标右上角小红点', defaultValue: false }),
badge: createEditorInputProp({ label: '图标右上角徽标的内容', defaultValue: '' }),
@ -34,14 +34,11 @@ export default {
// tips: '点击后跳转的目标路由对象,同 vue-router 的 to 属性',
// defaultValue: ''
// }),
replace: createEditorSwitchProp({ label: '是否在跳转时替换当前页面历史', defaultValue: false })
replace: createEditorSwitchProp({ label: '是否在跳转时替换当前页面历史', defaultValue: false }),
},
events: [
{ label: '点击左侧按钮时触发', value: 'click-left' },
{ label: '点击右侧按钮时触发', value: 'click-right' }
{ label: '点击右侧按钮时触发', value: 'click-right' },
],
draggable: false,
resize: {
width: true
}
} as VisualEditorComponent
});

@ -68,7 +68,6 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import Preview from './preview.vue';
import { useVisualData, localKey } from '@/visual-editor/hooks/useVisualData';
import { BASE_URL } from '@/visual-editor/utils';

@ -7,7 +7,7 @@
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\left-aside\components\base-widgets\index.tsx
*/
import { defineComponent, ref } from 'vue';
import { cloneDeep } from 'lodash';
import { cloneDeep } from 'lodash-es';
import { visualConfig } from '@/visual.config';
import styles from './index.module.scss';
import { createNewBlock } from '@/visual-editor/visual-editor.utils';

@ -7,7 +7,7 @@
* @FilePath: \vite-vue3-lowcode\src\visual-editor\components\left-aside\components\container-component\index.tsx
*/
import { defineComponent } from 'vue';
import { cloneDeep } from 'lodash';
import { cloneDeep } from 'lodash-es';
import { visualConfig } from '@/visual.config';
import Draggable from 'vuedraggable';
import styles from './index.module.scss';

@ -63,7 +63,7 @@
import { useVisualData } from '@/visual-editor/hooks/useVisualData';
import type { FetchApiItem, VisualEditorModel } from '@/visual-editor/visual-editor.utils';
import { useModal } from '@/visual-editor/hooks/useModal';
import { cloneDeep } from 'lodash';
import { cloneDeep } from 'lodash-es';
import { generateNanoid } from '@/visual-editor/utils/';
import { RequestEnum, ContentTypeEnum } from '@/enums/httpEnum';
import { useImportSwaggerJsonModal } from './utils';

@ -63,7 +63,7 @@
import { useVisualData, fieldTypes } from '@/visual-editor/hooks/useVisualData';
import type { VisualEditorModel } from '@/visual-editor/visual-editor.utils';
import { useModal } from '@/visual-editor/hooks/useModal';
import { cloneDeep } from 'lodash';
import { cloneDeep } from 'lodash-es';
import { generateNanoid } from '@/visual-editor/utils/';
import { useImportSwaggerJsonModal } from './utils';
import { Delete, Edit } from '@element-plus/icons-vue';

@ -25,7 +25,7 @@ import { isObject } from '@/visual-editor/utils/is';
import { useVisualData } from '@/visual-editor/hooks/useVisualData';
import { PropConfig } from '../prop-config';
import { VisualEditorBlockData, VisualEditorComponent } from '@/visual-editor/visual-editor.utils';
import { cloneDeep } from 'lodash';
import { cloneDeep } from 'lodash-es';
import { Rank, CirclePlus, Remove } from '@element-plus/icons-vue';
interface OptionItem extends LabelValue {
@ -175,7 +175,7 @@ export const CrossSortableOptionsEditor = defineComponent({
<ElTabs type={'border-card'}>
{state.list.map((item: OptionItem) => (
<ElTabPane label={item.label} key={item.label}>
<ElForm labelPosition={'left'}>
<ElForm labelPosition={'left'} size="small">
<PropConfig component={item.component} block={item.block} />
</ElForm>
</ElTabPane>

@ -23,7 +23,7 @@ import {
import { useDotProp } from '@/visual-editor/hooks/useDotProp';
import { VisualEditorProps, VisualEditorPropsType } from '@/visual-editor/visual-editor.props';
import { TablePropEditor, CrossSortableOptionsEditor } from '../../components';
import { cloneDeep } from 'lodash';
import { cloneDeep } from 'lodash-es';
import { useVisualData } from '@/visual-editor/hooks/useVisualData';
import { VisualEditorBlockData, VisualEditorComponent } from '@/visual-editor/visual-editor.utils';
import { Warning } from '@element-plus/icons-vue';

@ -1,68 +1,68 @@
import { VisualEditorProps } from '@/visual-editor/visual-editor.props'
import { defineComponent, getCurrentInstance, onMounted, PropType, reactive, createApp } from 'vue'
import { defer } from '@/visual-editor/utils/defer'
import { ElButton, ElDialog, ElTable, ElTableColumn, ElInput } from 'element-plus'
import { cloneDeep } from 'lodash'
import { VisualEditorProps } from '@/visual-editor/visual-editor.props';
import { defineComponent, getCurrentInstance, onMounted, PropType, reactive, createApp } from 'vue';
import { defer } from '@/visual-editor/utils/defer';
import { ElButton, ElDialog, ElTable, ElTableColumn, ElInput } from 'element-plus';
import { cloneDeep } from 'lodash-es';
export interface TablePropEditorServiceOption {
data: any[]
config: VisualEditorProps
onConfirm: (val: any[]) => void
data: any[];
config: VisualEditorProps;
onConfirm: (val: any[]) => void;
}
const ServiceComponent = defineComponent({
props: {
option: { type: Object as PropType<TablePropEditorServiceOption>, required: true }
option: { type: Object as PropType<TablePropEditorServiceOption>, required: true },
},
setup(props) {
const ctx = getCurrentInstance()!
const ctx = getCurrentInstance()!;
const state = reactive({
option: props.option,
showFlag: false,
mounted: (() => {
const dfd = defer()
onMounted(() => setTimeout(() => dfd.resolve(), 0))
return dfd.promise
const dfd = defer();
onMounted(() => setTimeout(() => dfd.resolve(), 0));
return dfd.promise;
})(),
editData: [] as any[]
})
editData: [] as any[],
});
const methods = {
service: (option: TablePropEditorServiceOption) => {
state.option = option
state.editData = cloneDeep(option.data || [])
methods.show()
state.option = option;
state.editData = cloneDeep(option.data || []);
methods.show();
},
show: async () => {
await state.mounted
state.showFlag = true
await state.mounted;
state.showFlag = true;
},
hide: () => {
state.showFlag = false
state.showFlag = false;
},
add: () => {
state.editData.push({})
state.editData.push({});
},
reset: () => {
state.editData = cloneDeep(state.option.data)
}
}
state.editData = cloneDeep(state.option.data);
},
};
const handler = {
onConfirm: () => {
state.option.onConfirm(state.editData)
methods.hide()
state.option.onConfirm(state.editData);
methods.hide();
},
onCancel: () => {
methods.hide()
methods.hide();
},
onDelete: (index: number) => {
state.editData.splice(index, 1)
}
}
state.editData.splice(index, 1);
},
};
Object.assign(ctx.proxy!, methods)
Object.assign(ctx.proxy!, methods);
return () => (
<>
@ -79,7 +79,7 @@ const ServiceComponent = defineComponent({
{state.option.config.table!.options.map((item) => (
<ElTableColumn {...({ label: item.label } as any)}>
{{
default: ({ row }: { row: any }) => <ElInput v-model={row[item.field]} />
default: ({ row }: { row: any }) => <ElInput v-model={row[item.field]} />,
}}
</ElTableColumn>
))}
@ -92,7 +92,7 @@ const ServiceComponent = defineComponent({
>
</ElButton>
)
),
}}
</ElTableColumn>
</ElTable>
@ -105,28 +105,28 @@ const ServiceComponent = defineComponent({
</ElButton>
</>
)
),
}}
</ElDialog>
</>
)
}
})
);
},
});
export const $$tablePropEditor = (() => {
let ins: any
let ins: any;
return (option: Omit<TablePropEditorServiceOption, 'onConfirm'>) => {
if (!ins) {
const el = document.createElement('div')
document.body.appendChild(el)
const app = createApp(ServiceComponent, { option })
ins = app.mount(el)
const el = document.createElement('div');
document.body.appendChild(el);
const app = createApp(ServiceComponent, { option });
ins = app.mount(el);
}
const dfd = defer<any[]>()
const dfd = defer<any[]>();
ins.service({
...option,
onConfirm: dfd.resolve
})
return dfd.promise
}
})()
onConfirm: dfd.resolve,
});
return dfd.promise;
};
})();

@ -24,7 +24,7 @@ import {
import type { Action } from '@/visual-editor/visual-editor.utils';
import { generateNanoid } from '@/visual-editor/utils/';
import { useModal } from '@/visual-editor/hooks/useModal';
import { cloneDeep } from 'lodash';
import { cloneDeep } from 'lodash-es';
interface IState {
activeNames: string[];

@ -16,7 +16,7 @@
focus: outElement.focus,
focusWithChild: outElement.focusWithChild,
drag,
['has-slot']: !!Object.keys(outElement.props.slots || {}).length
['has-slot']: !!Object.keys(outElement.props.slots || {}).length,
}"
@contextmenu.stop.prevent="onContextmenuBlock($event, outElement)"
@mousedown="selectComp(outElement)"
@ -25,7 +25,9 @@
:key="outElement._vid"
:element="outElement"
:style="{
pointerEvents: Object.keys(outElement.props?.slots || {}).length ? 'auto' : 'none'
pointerEvents: Object.keys(outElement.props?.slots || {}).length
? 'auto'
: 'none',
}"
>
<template
@ -52,273 +54,276 @@
</template>
<script lang="tsx">
import { defineComponent, reactive, watchEffect, toRefs } from 'vue'
import type { VisualEditorBlockData } from '@/visual-editor/visual-editor.utils'
import DraggableTransitionGroup from './draggable-transition-group.vue'
import { $$dropdown, DropdownOption } from '@/visual-editor/utils/dropdown-service'
import CompRender from './comp-render'
import SlotItem from './slot-item.vue'
import MonacoEditor from '@/visual-editor/components/common/monaco-editor/MonacoEditor'
import { cloneDeep } from 'lodash'
import { useGlobalProperties } from '@/hooks/useGlobalProperties'
import { useVisualData } from '@/visual-editor/hooks/useVisualData'
import { useModal } from '@/visual-editor/hooks/useModal'
import { generateNanoid } from '@/visual-editor/utils'
import { defineComponent, reactive, watchEffect, toRefs } from 'vue';
import type { VisualEditorBlockData } from '@/visual-editor/visual-editor.utils';
import DraggableTransitionGroup from './draggable-transition-group.vue';
import { $$dropdown, DropdownOption } from '@/visual-editor/utils/dropdown-service';
import CompRender from './comp-render';
import SlotItem from './slot-item.vue';
import MonacoEditor from '@/visual-editor/components/common/monaco-editor/MonacoEditor';
import { cloneDeep } from 'lodash-es';
import { useGlobalProperties } from '@/hooks/useGlobalProperties';
import { useVisualData } from '@/visual-editor/hooks/useVisualData';
import { useModal } from '@/visual-editor/hooks/useModal';
import { generateNanoid } from '@/visual-editor/utils';
export default defineComponent({
name: 'SimulatorEditor',
components: {
DraggableTransitionGroup,
CompRender,
SlotItem
},
emits: ['on-selected'],
setup() {
const { currentPage, setCurrentBlock } = useVisualData()
export default defineComponent({
name: 'SimulatorEditor',
components: {
DraggableTransitionGroup,
CompRender,
SlotItem,
},
emits: ['on-selected'],
setup() {
const { currentPage, setCurrentBlock } = useVisualData();
const { globalProperties } = useGlobalProperties()
const { globalProperties } = useGlobalProperties();
const state = reactive({
drag: false
})
const state = reactive({
drag: false,
});
/**
* @description 操作当前页面样式表
*/
watchEffect(() => {
const { bgImage, bgColor } = currentPage.value.config
const bodyStyleStr = `
/**
* @description 操作当前页面样式表
*/
watchEffect(() => {
const { bgImage, bgColor } = currentPage.value.config;
const bodyStyleStr = `
.simulator-editor-content {
background-color: ${bgColor};
background-image: url(${bgImage});
}`
const styleSheets = document.styleSheets[0]
const firstCssRule = document.styleSheets[0].cssRules[0]
const isExistContent = firstCssRule.cssText.includes('.simulator-editor-content')
if (isExistContent) {
styleSheets.deleteRule(0)
}
styleSheets.insertRule(bodyStyleStr)
})
//
//@leafId id
//@nodes Json
//@path 使
const findPathByLeafId = (
leafId,
nodes: VisualEditorBlockData[] = [],
path: VisualEditorBlockData[] = []
) => {
for (let i = 0; i < nodes.length; i++) {
const tmpPath = path.concat()
tmpPath.push(nodes[i])
if (leafId == nodes[i]._vid) {
return tmpPath
}`;
const styleSheets = document.styleSheets[0];
const firstCssRule = document.styleSheets[0].cssRules[0];
const isExistContent = firstCssRule.cssText.includes('.simulator-editor-content');
if (isExistContent) {
styleSheets.deleteRule(0);
}
const slots = nodes[i].props?.slots || {}
const keys = Object.keys(slots)
for (let j = 0; j < keys.length; j++) {
const children = slots[keys[j]]?.children
if (children) {
const findResult = findPathByLeafId(leafId, children, tmpPath)
if (findResult) {
return findResult
styleSheets.insertRule(bodyStyleStr);
});
//
//@leafId id
//@nodes Json
//@path 使
const findPathByLeafId = (
leafId,
nodes: VisualEditorBlockData[] = [],
path: VisualEditorBlockData[] = [],
) => {
for (let i = 0; i < nodes.length; i++) {
const tmpPath = path.concat();
tmpPath.push(nodes[i]);
if (leafId == nodes[i]._vid) {
return tmpPath;
}
const slots = nodes[i].props?.slots || {};
const keys = Object.keys(slots);
for (let j = 0; j < keys.length; j++) {
const children = slots[keys[j]]?.children;
if (children) {
const findResult = findPathByLeafId(leafId, children, tmpPath);
if (findResult) {
return findResult;
}
}
}
}
}
}
};
//
const handleSlotsFocus = (block: VisualEditorBlockData, _vid: string) => {
const slots = block.props?.slots || {}
if (Object.keys(slots).length > 0) {
Object.keys(slots).forEach((key) => {
slots[key]?.children?.forEach((item) => {
item.focusWithChild = false
item.focus = item._vid == _vid
if (item.focus) {
const arr = findPathByLeafId(_vid, currentPage.value.blocks)
arr.forEach((n) => (n.focusWithChild = true))
}
if (Object.keys(item.props?.slots || {}).length) {
handleSlotsFocus(item, _vid)
}
})
})
}
}
//
const handleSlotsFocus = (block: VisualEditorBlockData, _vid: string) => {
const slots = block.props?.slots || {};
if (Object.keys(slots).length > 0) {
Object.keys(slots).forEach((key) => {
slots[key]?.children?.forEach((item) => {
item.focusWithChild = false;
item.focus = item._vid == _vid;
if (item.focus) {
const arr = findPathByLeafId(_vid, currentPage.value.blocks);
arr.forEach((n) => (n.focusWithChild = true));
}
if (Object.keys(item.props?.slots || {}).length) {
handleSlotsFocus(item, _vid);
}
});
});
}
};
//
const selectComp = (element: VisualEditorBlockData) => {
setCurrentBlock(element)
currentPage.value.blocks.forEach((block) => {
block.focus = element._vid == block._vid
block.focusWithChild = false
handleSlotsFocus(block, element._vid)
element.focusWithChild = false
})
}
//
const selectComp = (element: VisualEditorBlockData) => {
setCurrentBlock(element);
currentPage.value.blocks.forEach((block) => {
block.focus = element._vid == block._vid;
block.focusWithChild = false;
handleSlotsFocus(block, element._vid);
element.focusWithChild = false;
});
};
/**
* 删除组件
*/
const deleteComp = (block: VisualEditorBlockData, parentBlocks = currentPage.value.blocks) => {
console.log(block, 'block')
const index = parentBlocks.findIndex((item) => item._vid == block._vid)
if (index != -1) {
delete globalProperties.$$refs[parentBlocks[index]._vid]
const delTarget = parentBlocks.splice(index, 1)[0]
if (delTarget.focus) {
setCurrentBlock({} as VisualEditorBlockData)
/**
* 删除组件
*/
const deleteComp = (
block: VisualEditorBlockData,
parentBlocks = currentPage.value.blocks,
) => {
console.log(block, 'block');
const index = parentBlocks.findIndex((item) => item._vid == block._vid);
if (index != -1) {
delete globalProperties.$$refs[parentBlocks[index]._vid];
const delTarget = parentBlocks.splice(index, 1)[0];
if (delTarget.focus) {
setCurrentBlock({} as VisualEditorBlockData);
}
}
}
}
};
const onContextmenuBlock = (
e: MouseEvent,
block: VisualEditorBlockData,
parentBlocks = currentPage.value.blocks
) => {
$$dropdown({
reference: e,
content: () => (
<>
<DropdownOption
label="复制节点"
icon="el-icon-document-copy"
{...{
onClick: () => {
const index = parentBlocks.findIndex((item) => item._vid == block._vid)
if (index != -1) {
const setBlockVid = (block: VisualEditorBlockData) => {
block._vid = `vid_${generateNanoid()}`
block.focus = false
const slots = block?.props?.slots || {}
const slotKeys = Object.keys(slots)
if (slotKeys.length) {
slotKeys.forEach((slotKey) => {
slots[slotKey]?.children?.forEach((child) => setBlockVid(child))
})
}
const onContextmenuBlock = (
e: MouseEvent,
block: VisualEditorBlockData,
parentBlocks = currentPage.value.blocks,
) => {
$$dropdown({
reference: e,
content: () => (
<>
<DropdownOption
label="复制节点"
icon="el-icon-document-copy"
{...{
onClick: () => {
const index = parentBlocks.findIndex((item) => item._vid == block._vid);
if (index != -1) {
const setBlockVid = (block: VisualEditorBlockData) => {
block._vid = `vid_${generateNanoid()}`;
block.focus = false;
const slots = block?.props?.slots || {};
const slotKeys = Object.keys(slots);
if (slotKeys.length) {
slotKeys.forEach((slotKey) => {
slots[slotKey]?.children?.forEach((child) => setBlockVid(child));
});
}
};
const blockCopy = cloneDeep(parentBlocks[index]);
setBlockVid(blockCopy);
parentBlocks.splice(index + 1, 0, blockCopy);
}
const blockCopy = cloneDeep(parentBlocks[index])
setBlockVid(blockCopy)
parentBlocks.splice(index + 1, 0, blockCopy)
}
}
}}
/>
<DropdownOption
label="查看节点"
icon="el-icon-view"
{...{
onClick: () =>
useModal({
title: '节点信息',
footer: null,
props: {
width: 600
},
content: () => (
<MonacoEditor
code={JSON.stringify(block)}
layout={{ width: 530, height: 600 }}
vid={block._vid}
/>
)
})
}}
/>
<DropdownOption
label="删除节点"
icon="el-icon-delete"
{...{
onClick: () => deleteComp(block, parentBlocks)
}}
/>
</>
)
})
}
},
}}
/>
<DropdownOption
label="查看节点"
icon="el-icon-view"
{...{
onClick: () =>
useModal({
title: '节点信息',
footer: null,
props: {
width: 600,
},
content: () => (
<MonacoEditor
code={JSON.stringify(block)}
layout={{ width: 530, height: 600 }}
vid={block._vid}
/>
),
}),
}}
/>
<DropdownOption
label="删除节点"
icon="el-icon-delete"
{...{
onClick: () => deleteComp(block, parentBlocks),
}}
/>
</>
),
});
};
return {
...toRefs(state),
currentPage,
deleteComp,
selectComp,
onContextmenuBlock
}
}
})
return {
...toRefs(state),
currentPage,
deleteComp,
selectComp,
onContextmenuBlock,
};
},
});
</script>
<style lang="scss" scoped>
@import './func.scss';
@import './func.scss';
.simulator-container {
display: flex;
width: 100%;
height: 100%;
padding-right: 380px;
align-items: center;
justify-content: center;
.simulator-container {
display: flex;
width: 100%;
height: 100%;
padding-right: 380px;
align-items: center;
justify-content: center;
@media (max-width: 1114px) {
padding-right: 0;
@media (max-width: 1114px) {
padding-right: 0;
}
}
}
.simulator-editor {
width: 660px;
height: 740px;
min-width: 660px;
padding: 60px 150px 0;
overflow: hidden auto;
background: #fafafa;
border-radius: 5px;
box-sizing: border-box;
background-clip: content-box;
contain: layout;
.simulator-editor {
width: 660px;
height: 740px;
min-width: 660px;
padding: 60px 150px 0;
overflow: hidden auto;
background: #fafafa;
border-radius: 5px;
box-sizing: border-box;
background-clip: content-box;
contain: layout;
&::-webkit-scrollbar {
width: 0;
}
&::-webkit-scrollbar {
width: 0;
}
&-content {
min-height: 100%;
transform: translate(0);
box-shadow: 0 8px 12px #ebedf0;
&-content {
min-height: 100%;
transform: translate(0);
box-shadow: 0 8px 12px #ebedf0;
}
}
}
.list-group-item {
position: relative;
padding: 3px;
cursor: move;
> div {
.list-group-item {
position: relative;
}
padding: 3px;
cursor: move;
&.focus {
@include showComponentBorder;
}
> div {
position: relative;
}
&.drag::after {
display: none;
}
&.focus {
@include showComponentBorder;
}
&:not(.has-slot) {
content: '';
}
&.drag::after {
display: none;
}
&.focusWithChild {
@include showContainerBorder;
}
&:not(.has-slot) {
content: '';
}
i {
cursor: pointer;
&.focusWithChild {
@include showContainerBorder;
}
i {
cursor: pointer;
}
}
}
</style>

@ -1,6 +1,6 @@
// import { useCommander } from './plugins/command.plugin'
// import { VisualEditorBlockData, VisualEditorModelValue } from './visual-editor.utils'
// import { cloneDeep } from 'lodash'
// import { cloneDeep } from 'lodash-es'
//
// export function useVisualCommand({
// focusData,

@ -55,7 +55,9 @@
"preview/**/*.ts",
"preview/**/*.d.ts",
"preview/**/*.tsx",
"preview/**/*.vue"
"preview/**/*.vue",
"components.d.ts",
"auto-imports.d.ts"
],
"exclude": [
"node_modules",

72
types/utils.d.ts vendored

@ -0,0 +1,72 @@
/** 提取Promise返回值 */
type UnboxPromise<T extends Promise<any>> = T extends Promise<infer U> ? U : never;
/** 将联合类型转为交叉类型 */
declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
k: infer I,
) => void
? I
: never;
/** eg: type result = StringToUnion<'abc'> 结果:'a'|'b'|'c'*/
type StringToUnion<S extends string> = S extends `${infer S1}${infer S2}`
? S1 | StringToUnion<S2>
: never;
/** 字符串替换,类似js的字符串replace方法 */
type Replace<
Str extends string,
From extends string,
To extends string,
> = Str extends `${infer Left}${From}${infer Right}` ? `${Left}${To}${Right}` : Str;
/** 字符串替换,类似js的字符串replaceAll方法 */
type ReplaceAll<
Str extends string,
From extends string,
To extends string,
> = Str extends `${infer Left}${From}${infer Right}`
? Replace<Replace<`${Left}${To}${Right}`, From, To>, From, To>
: Str;
/** eg: type result = CamelCase<'foo-bar-baz'>, 结果:fooBarBaz */
type CamelCase<S extends string> = S extends `${infer S1}-${infer S2}`
? S2 extends Capitalize<S2>
? `${S1}-${CamelCase<S2>}`
: `${S1}${CamelCase<Capitalize<S2>>}`
: S;
/** eg: type result = StringToArray<'abc'>, 结果:['a', 'b', 'c'] */
type StringToArray<S extends string, T extends any[] = []> = S extends `${infer S1}${infer S2}`
? StringToArray<S2, [...T, S1]>
: T;
/** `RequiredKeys`是用来获取所有必填字段,其中这些必填字段组合成一个联合类型 */
type RequiredKeys<T> = {
[P in keyof T]: T extends Record<P, T[P]> ? P : never;
}[keyof T];
/** `OptionalKeys`是用来获取所有可选字段,其中这些可选字段组合成一个联合类型 */
type OptionalKeys<T> = {
[P in keyof T]: {} extends Pick<T, P> ? P : never;
}[keyof T];
/** `GetRequired`是用来获取一个类型中,所有必填键及其类型所组成的一个新类型的 */
type GetRequired<T> = {
[P in RequiredKeys<T>]-?: T[P];
};
/** `GetOptional`是用来获取一个类型中,所有可选键及其类型所组成的一个新类型的 */
type GetOptional<T> = {
[P in OptionalKeys<T>]?: T[P];
};
/** type result1 = Includes<[1, 2, 3, 4], '4'> 结果: false; type result2 = Includes<[1, 2, 3, 4], 4> 结果: true */
type Includes<T extends any[], K> = K extends T[number] ? true : false;
/** eg:type result = MyConcat<[1, 2], [3, 4]> 结果:[1, 2, 3, 4]*/
type MyConcat<T extends any[], U extends any[]> = [...T, ...U];
/** eg: type result1 = MyPush<[1, 2, 3], 4> 结果:[1, 2, 3, 4] */
type MyPush<T extends any[], K> = [...T, K];
/** eg: type result3 = MyPop<[1, 2, 3]> 结果:[1, 2] */
type MyPop<T extends any[]> = T extends [...infer L, infer R] ? L : never; // eslint-disable-line

@ -55,9 +55,17 @@ export default ({ mode }: ConfigEnv): UserConfig => {
targets: ['defaults', 'not IE 11'],
}),
AutoImport({
resolvers: [ElementPlusResolver(), VantResolver()],
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
/\.md$/, // .md
],
dts: true,
imports: ['vue', 'vue-router'],
}),
Components({
dts: true,
resolvers: [ElementPlusResolver(), VantResolver()],
}),
],
@ -99,7 +107,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
},
},
optimizeDeps: {
include: ['@vueuse/core', 'element-plus', 'vant', 'lodash', 'vuedraggable'],
include: ['@vueuse/core', 'element-plus', 'vant', 'lodash-es', 'vuedraggable'],
},
server: {
host: '0.0.0.0',
@ -110,7 +118,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
// 设置代理,根据项目实际情况配置
proxy: {
'/api': {
target: 'http://29135jo738.zicp.vip/api/v1',
target: 'https://nest-api.buqiyuan.site/api/admin/',
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace('/api/', '/'),

Loading…
Cancel
Save