liuhuajie/lowcode-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor:界面重构、渲染逻辑重构

Browse Source
This commit is contained in:
lhj
2024-11-06 00:17:16 +08:00
parent 9b8dbe97a8
commit 624eb717b9
15 changed files with 348 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components.d.ts vendored
View File

@ -9,10 +9,11 @@ declare module 'vue' {
export interface GlobalComponents {
AdaptivePage: typeof import('./src/components/AdaptivePage.vue')['default']
DynamicComponent: typeof import('./src/components/DynamicComponent.vue')['default']
ElTable: typeof import('./src/components/ElTable.vue')['default']
MainView: typeof import('./src/components/MainView.vue')['default']
NestedFunction: typeof import('./src/components/NestedFunction.vue')['default']
PropertyEditor: typeof import('./src/components/PropertyEditor.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
TestComponent: typeof import('./src/components/TestComponent.vue')['default']
}
}

18
package-lock.json generated
View File

@ -16,7 +16,8 @@
"pinia": "^2.2.4",
"ts-node": "^10.9.2",
"vue": "^3.2.25",
"vue-draggable-plus": "^0.5.3"
"vue-draggable-plus": "^0.5.3",
"vue-router": "^4.4.5"
},
"devDependencies": {
"@arco-design/web-vue": "^2.56.0",
@ -3497,6 +3498,21 @@
}
}
},
"node_modules/vue-router": {
"version": "4.4.5",
"resolved": "https://repo.bingosoft.net/repository/npm/vue-router/-/vue-router-4.4.5.tgz",
"integrity": "sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==",
"license": "MIT",
"dependencies": {
"@vue/devtools-api": "^6.6.4"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/vue-template-compiler": {
"version": "2.7.16",
"resolved": "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",

3
package.json
View File

@ -18,7 +18,8 @@
"pinia": "^2.2.4",
"ts-node": "^10.9.2",
"vue": "^3.2.25",
"vue-draggable-plus": "^0.5.3"
"vue-draggable-plus": "^0.5.3",
"vue-router": "^4.4.5"
},
"devDependencies": {
"@arco-design/web-vue": "^2.56.0",

5
preview/store/index.ts Normal file
View File

@ -0,0 +1,5 @@
import { createPinia } from 'pinia';
const store = createPinia();
export default store;

232
preview/views/MainView.vue Normal file
View File

@ -0,0 +1,232 @@
<template>
<div class="low_box">
<div class="header">
<div class="title">可视化系统</div>
<div class="web">pc</div>
<div class="btn">
<a-button type="primary" @click="view">确定</a-button>
</div>
</div>
<div class="content">
<div class="left">
<div class="title">组件</div>
<VueDraggable
v-model="store.component"
:animation="150"
:group="{ name: 'people', pull: 'clone', put: false }"
:sort="false"
:clone="clone"
@start="onStart"
@end="onEnd"
>
<div v-for="item in store.component" :key="item.id" class="tem_btn">
{{ item.name }}
</div>
</VueDraggable>
</div>
<div ref="targetContent" class="center">
<VueDraggable
v-model="store.preview"
:group="{name: 'designer', pull: 'clone', put: false}"
ghost-class="ghost"
class="canvas"
>
<template v-for="item in store.preview" :key="item.id">
<component
:is="componentsList[item?.code]"
:data="item"
></component>
</template>
</VueDraggable>
</div>
<!-- <div class="right">-->
<!-- <component :is="componentsList[store?.nowComponent?.set]"></component>-->
<!-- </div>-->
</div>
</div>
</template>
<script setup lang="ts">
import {VueDraggable} from "vue-draggable-plus";
import {onMounted, ref, watch} from 'vue';
import {uuid} from 'lsp-uuid';
import {IPageComponent} from '@/type/IPageComponent.ts';
import {componentScheme} from '@/schemes/scheme';
import {useSchemeStore} from '@/stores/useSchemeStore';
import {IComponent} from "@/type/IComponent";
const componentsList = ref<any[]>([]);
const list = ref<IPageComponent[]>([]);
const store = useSchemeStore();
watch(store, (n, e) => {
console.log("数据", n);
});
const scheme = ref<any>()
const baseScheme =
{
"type": "AdaptivePage",
"name": "AdaptivePage",
"id": uuid(),
"version": "2.0",
"props": {},
"class": "",
"style": "",
"variables": {},
"dataSources": {},
"functions": {},
"orchestrations": {},
"events": {},
"slots": {},
"header": {},
"footer": {},
"children": [],
"meta": {}
}
store.$onAction(
({
name, // action 名称
after, // 在 action 返回或解决后的钩子
onError, // action 抛出或拒绝的钩子
}) => {
after((result) => {
scheme.value = result
})
// 如果 action 抛出或返回一个拒绝的 promise，这将触发
onError((error) => {
console.warn(
`Failed "${name}" after\nError: ${error}.`
)
})
}
)
//初始化scheme
const initScheme = () => {
store.initScheme([baseScheme])
}
onMounted(() => {
componentsList.value = Object.values(componentScheme);
initScheme();
// @ts-ignore
list.value.push(baseScheme)
});
const clone = function (element: IComponent) {
return {
id: `${element.type}-${uuid()}`,
name: element.name,
type: element.type,
props: element.props,
class: element.class,
designer: '',
text: element.text,
children: [],
style: element.style,
visible: "",
slots: element.slots,
disable: "",
events: {},
loop: {},
};
}
const onEnd = (obj: any) => {
const {oldDraggableIndex} = obj;
store.previewData(store.component[oldDraggableIndex]);
store.nowComponentsData(store.component[oldDraggableIndex]);
};
const onStart = function () {
console.log("start")
}
const view = () => {
localStorage.setItem("lowcode", JSON.stringify(store.preview));
window.open(location.href.replace("/#/", "/preview/#/"));
};
</script>
<style lang="scss" scoped>
.low_box {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #f2f2f2;
.header {
height: 65px;
background-color: #fff;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.content {
display: flex;
flex-direction: row;
height: calc(100vh - 66px);
.left {
width: 300px;
height: 100%;
overflow: hidden;
background-color: #fff;
border-top: 1px solid #dddddd;
.title {
font-size: 16px;
color: #333;
line-height: 50px;
width: calc(100% - 40px);
margin-left: 20px;
border-bottom: 1px solid #f2f2f2;
clear: both;
}
.tem_btn {
padding: 0px 10px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
color: #666;
background-color: #f2f2f2;
border-radius: 4px;
cursor: move;
user-select: none;
margin-top: 20px;
float: left;
margin-left: 20px;
}
}
.center {
flex: 1;
padding: 20px;
background-color: #f2f2f2;
.canvas {
background-color: #fff;
width: 100%;
height: 100%;
}
.ghost {
background-color: #f00 !important;
}
}
.right {
width: 300px;
height: 100%;
overflow: hidden;
background-color: #fff;
border-top: 1px solid #dddddd;
}
}
}
</style>

2
src/App.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import MainView from './components/MainView.vue';
import MainView from "../preview/views/MainView.vue";
</script>
<template>

199
src/components/MainView.vue
View File

@ -1,199 +0,0 @@
<template>
<div class="flex-container">
<div class="component-area">
compoent
</div>
<!-- 组件区域 -->
<div class="component-list">
<div ref="el2" class="component-list-inner">
<div v-for="item in componentsList" :key="item.id" class="component-item">
{{ item.name }}:{{ item.id }}
</div>
</div>
</div>
<div class="design-area">
<a-row>
<a-col flex="80%">
<div class="dragArea">
<div>
<NestedFunction v-model="list"></NestedFunction>
{{ list }}
</div>
</div>
</a-col>
<a-col flex="20%">
<div class="property-editor">
<PropertyEditor :scheme="scheme"></PropertyEditor>
</div>
</a-col>
</a-row>
<!-- 渲染区 -->
<div class="render-area">
动态渲染
<DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
{{ component.id }}
</DynamicComponent>
</div>
<!-- 测试区域 -->
<div class="test-area">
{{ store.scheme }}
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import NestedFunction from './NestedFunction.vue';
import DynamicComponent from './DynamicComponent.vue';
import { useDraggable } from 'vue-draggable-plus';
import { uuid } from 'lsp-uuid';
import { IPageComponent } from '../type/IPageComponent';
import { componentScheme } from '../schemes/scheme';
import { useSchemeStore } from '../stores/useSchemeStore'
import PropertyEditor from './PropertyEditor.vue';
const scheme = ref<any>()
const baseScheme =
{
"type": "AdaptivePage",
"name": "AdaptivePage",
"id": uuid(),
"version": "2.0",
"props": {},
"class": "",
"style": "",
"variables": {},
"dataSources": {},
"functions": {},
"orchestrations": {},
"events": {},
"slots": {},
"header": {},
"footer": {},
"children": [],
"meta": {}
}
const componentsList = ref<any[]>([]);
const list = ref<IPageComponent[]>([]);
const el2 = ref();
const store = useSchemeStore()
store.$onAction(
({
name, // action 名称
after, // 在 action 返回或解决后的钩子
onError, // action 抛出或拒绝的钩子
}) => {
after((result) => {
scheme.value = result
})
// 如果 action 抛出或返回一个拒绝的 promise，这将触发
onError((error) => {
console.warn(
`Failed "${name}" after\nError: ${error}.`
)
})
}
)
//初始化scheme
const initScheme = () => {
store.initScheme([baseScheme])
}
onMounted(() => {
const loadedComponents = Object.values(componentScheme);
componentsList.value = loadedComponents;
initScheme();
// @ts-ignore
list.value.push(baseScheme)
});
useDraggable(el2, componentsList, {
animation: 150,
group: { name: 'designer', pull: 'clone', put: false },
sort: false,
onClone() {
console.log('clone');
},
clone(element) {
return {
id: `${element.type}-${uuid()}`,
name: element.name,
type: element.type,
props: element.props,
class: element.class,
designer: '',
text: element.text,
children: [],
style: element.style,
visible: "",
slots: element.slots,
disable: "",
events: {},
loop: {},
};
}
});
</script>
<style scoped>
.flex-container {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
width: 100%;
/* Ensure the container takes full width */
}
.component-area {
flex-grow: 1;
max-width: 72px;
/* Fixed width or can be adjusted */
}
.component-list {
flex-grow: 1;
max-width: 250px;
/* Fixed width or can be adjusted */
}
.component-list-inner {
display: flex;
flex-direction: column;
overflow-y: auto;
height: 960px;
}
.component-item {
height: 30px;
width: 250px;
border: 1px solid red;
}
.design-area {
flex-grow: 1;
overflow-x: auto;
}
.dragArea {
overflow-x: auto;
display: flex;
flex-direction: row;
height: 500px;
border: 1px solid black;
}
.property-editor {
border: 1px red solid;
min-height: 500px;
}
.render-area {
height: 500px;
overflow-y: auto;
border: 1px solid black;
}
</style>

2
src/main.ts
View File

@ -2,6 +2,7 @@ import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ArcoVue from '@arco-design/web-vue';
import router from "./router";
// 额外引入图标库
import ArcoVueIcon from '@arco-design/web-vue/es/icon';
import '@arco-design/web-vue/dist/arco.css';
@ -12,5 +13,6 @@ const pinia = createPinia()
const app = createApp(App);
app.use(pinia)
app.use(ArcoVue);
app.use(router)
app.use(ArcoVueIcon);
app.mount('#app');

15
src/router.ts Normal file
View File

@ -0,0 +1,15 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: "/:pathMatch(.*)*",
component: () => import("../preview/views/MainView.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;

18
src/router/index.ts Normal file
View File

@ -0,0 +1,18 @@
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
// {
// path: "/lowcode",
// name: "活动生成",
// meta: {
// title: "活动生成",
// icon: "Calendar",
// },
// component: () => import("@/pages/lowCode/index.vue"),
// },
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export { router, routes };

13
src/stores/useSchemeStore.ts
View File

@ -22,16 +22,19 @@ function findObjectById(obj, targetId) {
return null; // 如果没有找到，则返回null
}
export const useSchemeStore = defineStore('scheme', () => {
const scheme = ref<IPageComponent[]>()
// const componnets = ref<IPageComponent[]>()
const previewData = ref<IPageComponent[]>()
const nowComponentsData = ref<IPageComponent>()
function initScheme(value) {
scheme.value = value
previewData.value = value
}
function getSchemeObj(id) {
return findObjectById(scheme.value, id)
return findObjectById(previewData.value, id)
}
function updateScheme(id,obj)
function updateScheme()
{
}
return { scheme, initScheme, getSchemeObj,updateScheme }
return { previewData,nowComponentsData, initScheme, getSchemeObj,updateScheme }
})

4
tsconfig.app.json
View File

@ -5,11 +5,13 @@
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"module": "esnext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
"esModuleInterop": true,
"types": ["vite/client"],
/* Bundler mode */
"moduleResolution": "bundler",

3
tsconfig.json
View File

@ -1,5 +1,8 @@
{
"files": [],
"compilerOptions": {
"module": "ESNext"
},
"references": [
{
"path": "./tsconfig.app.json"

7
tsconfig.node.json
View File

@ -5,12 +5,12 @@
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"module": "esnext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
"esModuleInterop": true,
"types": ["node"],
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
@ -26,5 +26,6 @@
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue","vite.config.ts"],
}

72
vite.config.ts
View File

@ -1,47 +1,47 @@
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
import {defineConfig} from 'vite'
import {fileURLToPath, URL} from 'node:url'
import vue from '@vitejs/plugin-vue'
// import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers'
import {ArcoResolver} from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import { vitePluginForArco } from '@arco-plugins/vite-vue'
import {vitePluginForArco} from '@arco-plugins/vite-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
AutoImport({
resolvers: [ArcoResolver()],
imports: [
'vue',
'vue-router',
'@vueuse/core',
],
dirs: [
'./src/components/*/index.vue',
'./src/enums/*.ts',
'./src/utils/*.ts',
'./src/composables'
]
}),
Components({
resolvers: [
ArcoResolver({
sideEffect: true
plugins: [
AutoImport({
resolvers: [ArcoResolver()],
imports: [
'vue',
'vue-router',
'@vueuse/core',
],
dirs: [
'./src/components/*/index.vue',
'./src/enums/*.ts',
'./src/utils/*.ts',
'./src/composables'
]
}),
Components({
resolvers: [
ArcoResolver({
sideEffect: true
})
]
}),
vue(),
vitePluginForArco({
style: 'css'
})
]
}),
vue(),
vitePluginForArco({
style: 'css'
})
// vueDevTools()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'vue': 'vue/dist/vue.esm-bundler.js'
// vueDevTools()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'vue': 'vue/dist/vue.esm-bundler.js'
}
}
}
})