add:添加保存scheme为对象的功能
This commit is contained in:
40
backend/index.js
Normal file
40
backend/index.js
Normal file
@ -0,0 +1,40 @@
|
||||
import express from 'express';
|
||||
import bodyParser from 'body-parser';
|
||||
import cors from 'cors';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const app = express();
|
||||
const PORT = 3000;
|
||||
|
||||
// 获取当前文件的目录路径
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
const FILE_PATH = path.join(__dirname, '../src/modules/previewScheme.json');
|
||||
|
||||
app.use(cors());
|
||||
app.use(bodyParser.json());
|
||||
|
||||
app.post('/save', (req, res) => {
|
||||
const data = req.body;
|
||||
try {
|
||||
fs.writeFileSync(FILE_PATH, JSON.stringify(data, null, 2));
|
||||
res.status(200).send('Data saved successfully');
|
||||
} catch (error) {
|
||||
res.status(500).send('Error saving data');
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/load', (req, res) => {
|
||||
try {
|
||||
const data = fs.readFileSync(FILE_PATH, 'utf-8');
|
||||
res.status(200).json(JSON.parse(data));
|
||||
} catch (error) {
|
||||
res.status(500).send('Error loading data');
|
||||
}
|
||||
});
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Server is running on port ${PORT}`);
|
||||
});
|
||||
20
backend/package.json
Normal file
20
backend/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "backend",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
"start": "node index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"body-parser": "^1.20.3",
|
||||
"cors": "^2.8.5",
|
||||
"express": "^4.21.1"
|
||||
},
|
||||
"volta": {
|
||||
"node": "22.11.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/cors": "^2.8.17"
|
||||
}
|
||||
}
|
||||
@ -12,6 +12,7 @@
|
||||
"dependencies": {
|
||||
"@arco-plugins/vite-vue": "^1.4.5",
|
||||
"@vueuse/core": "^10.11.0",
|
||||
"axios": "^1.7.7",
|
||||
"js-sha256": "^0.11.0",
|
||||
"js-yaml": "^4.1.0",
|
||||
"lodash": "^4.17.21",
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<icon-right />
|
||||
</template>
|
||||
</a-button>
|
||||
<a-button type="primary" @click="">保存</a-button>
|
||||
<a-button type="primary" @click="save">保存</a-button>
|
||||
<a-button type="primary" @click="view">预览</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
@ -49,12 +49,10 @@
|
||||
@update="onPreviewUpdate"
|
||||
@stop="onPreviewStop"
|
||||
>
|
||||
<!-- {{store.previewScheme}}-->
|
||||
<DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
|
||||
{{ component.id }}
|
||||
</DynamicComponent>
|
||||
</VueDraggable>
|
||||
|
||||
</div>
|
||||
<div class="right">
|
||||
<PropertyEditor :scheme="store.nowComponentsData"></PropertyEditor>
|
||||
@ -64,20 +62,19 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {RadioGroup,Radio} from '@arco-design/web-vue'
|
||||
import {onMounted, ref, watch} from 'vue';
|
||||
import {uuid} from 'lsp-uuid';
|
||||
import {componentScheme} from "@/schemes/scheme";
|
||||
import {useSchemeStore} from '@/stores/useSchemeStore';
|
||||
import {IComponent} from "@/type/IComponent";
|
||||
import DynamicComponent from "@/components/DynamicComponent.vue";
|
||||
import PropertyEditor from "@/components/PropertyEditor.vue";
|
||||
import {DraggableEvent, VueDraggable} from "vue-draggable-plus";
|
||||
|
||||
let list0 = ref([])
|
||||
|
||||
let list = ref([])
|
||||
import { RadioGroup, Radio } from '@arco-design/web-vue';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { uuid } from 'lsp-uuid';
|
||||
import { componentScheme } from '@/schemes/scheme';
|
||||
import { useSchemeStore } from '@/stores/useSchemeStore';
|
||||
import { IComponent } from '@/type/IComponent';
|
||||
import DynamicComponent from '@/components/DynamicComponent.vue';
|
||||
import PropertyEditor from '@/components/PropertyEditor.vue';
|
||||
import { DraggableEvent, VueDraggable } from 'vue-draggable-plus';
|
||||
import axios from 'axios';
|
||||
|
||||
let list0 = ref([]);
|
||||
let list = ref([]);
|
||||
let componentsList = [];
|
||||
const store = useSchemeStore();
|
||||
|
||||
@ -85,26 +82,26 @@ watch(store, (n) => {
|
||||
console.log("store发生了变化", n);
|
||||
});
|
||||
|
||||
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 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 名称
|
||||
@ -113,41 +110,41 @@ store.$onAction(
|
||||
}) => {
|
||||
after((result) => {
|
||||
// console.log(`store action-${name}回调后：` + result);
|
||||
})
|
||||
// 如果 action 抛出或返回一个拒绝的 promise，这将触发
|
||||
});
|
||||
onError((error) => {
|
||||
console.warn(
|
||||
`Failed "${name}" after\nError: ${error}.`
|
||||
)
|
||||
})
|
||||
console.warn(`Failed "${name}" after\nError: ${error}.`);
|
||||
});
|
||||
}
|
||||
)
|
||||
//初始化scheme
|
||||
const initScheme = () => {
|
||||
store.initPreviewScheme([baseScheme])
|
||||
);
|
||||
|
||||
// 初始化scheme
|
||||
const initScheme = async () => {
|
||||
try {
|
||||
const response = await axios.get('http://localhost:3000/load');
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
store.initPreviewScheme(response.data);
|
||||
} else {
|
||||
store.initPreviewScheme([baseScheme]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
store.initPreviewScheme([baseScheme]);
|
||||
}
|
||||
componentsList = Object.values(componentScheme);
|
||||
store.initComponents(componentsList);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
list0.value.push(
|
||||
{
|
||||
"id": 123,
|
||||
"name": "www"
|
||||
},
|
||||
{
|
||||
"id": 125,
|
||||
"name": "rrr"
|
||||
}
|
||||
{ "id": 123, "name": "www" },
|
||||
{ "id": 125, "name": "rrr" }
|
||||
);
|
||||
list.value = []
|
||||
list.value = [];
|
||||
initScheme();
|
||||
// @ts-ignore
|
||||
});
|
||||
|
||||
function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots'|'visible'|'disable'|'children', IComponent>) {
|
||||
console.log("clone", element)
|
||||
function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots' | 'visible' | 'disable' | 'children', IComponent>) {
|
||||
console.log("clone", element);
|
||||
return {
|
||||
id: `${element.type}-${uuid()}`,
|
||||
name: element.name,
|
||||
@ -156,7 +153,7 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
|
||||
class: element.class,
|
||||
designer: '',
|
||||
text: element.text,
|
||||
children: element.children||[],
|
||||
children: element.children || [],
|
||||
style: element.style,
|
||||
visible: element.visible,
|
||||
slots: element.slots,
|
||||
@ -167,27 +164,35 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
|
||||
}
|
||||
|
||||
const onEnd = (event: DraggableEvent) => {
|
||||
console.log("onEnd", event)
|
||||
store.nowComponentsData=event.clonedData
|
||||
// const {oldDraggableIndex} = obj;
|
||||
// store.previewData(store.component[oldDraggableIndex]);
|
||||
// store.nowComponentsData(store.component[oldDraggableIndex]);
|
||||
console.log("onEnd", event);
|
||||
store.nowComponentsData = event.clonedData;
|
||||
};
|
||||
|
||||
const onStart = function (event) {
|
||||
console.log("onStart", event)
|
||||
}
|
||||
const onPreviewStart = function (event) {
|
||||
console.log("onPreviewStart", event)
|
||||
}
|
||||
const onPreviewUpdate = function (event) {
|
||||
console.log("onPreviewUpdate", event)
|
||||
}
|
||||
const onStart = (event) => {
|
||||
console.log("onStart", event);
|
||||
};
|
||||
|
||||
const onPreviewStop = function (event) {
|
||||
console.log(event)
|
||||
}
|
||||
const onPreviewStart = (event) => {
|
||||
console.log("onPreviewStart", event);
|
||||
};
|
||||
|
||||
const onPreviewUpdate = (event) => {
|
||||
console.log("onPreviewUpdate", event);
|
||||
};
|
||||
|
||||
const onPreviewStop = (event) => {
|
||||
console.log(event);
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
try {
|
||||
await axios.post('http://localhost:3000/save', store.previewScheme);
|
||||
alert('保存成功！');
|
||||
} catch (error) {
|
||||
console.error('Error saving data:', error);
|
||||
alert('保存失败！');
|
||||
}
|
||||
};
|
||||
|
||||
const view = () => {
|
||||
localStorage.setItem("lowcode", JSON.stringify(store.previewScheme));
|
||||
|
||||
21
src/modules/previewScheme.json
Normal file
21
src/modules/previewScheme.json
Normal file
@ -0,0 +1,21 @@
|
||||
[
|
||||
{
|
||||
"type": "AdaptivePage",
|
||||
"name": "AdaptivePage",
|
||||
"id": "a31c7fb13910000",
|
||||
"version": "2.0",
|
||||
"props": {},
|
||||
"class": "",
|
||||
"style": "",
|
||||
"variables": {},
|
||||
"dataSources": {},
|
||||
"functions": {},
|
||||
"orchestrations": {},
|
||||
"events": {},
|
||||
"slots": {},
|
||||
"header": {},
|
||||
"footer": {},
|
||||
"children": [],
|
||||
"meta": {}
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user