add:添加保存scheme为对象的功能

backend/index.js

@@ -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}`);
+});

backend/package.json

@@ -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"
+  }
+}

package.json

@@ -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",

preview/views/MainView.vue

@@ -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 { RadioGroup, Radio } from '@arco-design/web-vue';
-import {onMounted, ref, watch} from 'vue';
+import { onMounted, ref, watch } from 'vue';
-import {uuid} from 'lsp-uuid';
+import { uuid } from 'lsp-uuid';
-import {componentScheme} from "@/schemes/scheme";
+import { componentScheme } from '@/schemes/scheme';
-import {useSchemeStore} from '@/stores/useSchemeStore';
+import { useSchemeStore } from '@/stores/useSchemeStore';
-import {IComponent} from "@/type/IComponent";
+import { IComponent } from '@/type/IComponent';
-import DynamicComponent from "@/components/DynamicComponent.vue";
+import DynamicComponent from '@/components/DynamicComponent.vue';
-import PropertyEditor from "@/components/PropertyEditor.vue";
+import PropertyEditor from '@/components/PropertyEditor.vue';
-import {DraggableEvent, VueDraggable} from "vue-draggable-plus";
+import { DraggableEvent, VueDraggable } from 'vue-draggable-plus';
-
+import axios from 'axios';
-let list0 = ref([])
-
-let list = ref([])
 
+let list0 = ref([]);
+let list = ref([]);
 let componentsList = [];
 const store = useSchemeStore();
 
@@ -85,26 +82,26 @@ watch(store, (n) => {
   console.log("store发生了变化", n);
 });
 
-const baseScheme =
+const baseScheme = {
-    {
+  "type": "AdaptivePage",
-      "type": "AdaptivePage",
+  "name": "AdaptivePage",
-      "name": "AdaptivePage",
+  "id": uuid(),
-      "id": uuid(),
+  "version": "2.0",
-      "version": "2.0",
+  "props": {},
-      "props": {},
+  "class": "",
-      "class": "",
+  "style": "",
-      "style": "",
+  "variables": {},
-      "variables": {},
+  "dataSources": {},
-      "dataSources": {},
+  "functions": {},
-      "functions": {},
+  "orchestrations": {},
-      "orchestrations": {},
+  "events": {},
-      "events": {},
+  "slots": {},
-      "slots": {},
+  "header": {},
-      "header": {},
+  "footer": {},
-      "footer": {},
+  "children": [],
-      "children": [],
+  "meta": {}
-      "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(
+        console.warn(`Failed "${name}" after\nError: ${error}.`);
-            `Failed "${name}" after\nError: ${error}.`
+      });
-        )
-      })
     }
-)
+);
-//初始化scheme
+
-const initScheme = () => {
+// 初始化scheme
-  store.initPreviewScheme([baseScheme])
+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": 123,
+      { "id": 125, "name": "rrr" }
-        "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>) {
+function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots' | 'visible' | 'disable' | 'children', IComponent>) {
-  console.log("clone", element)
+  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)
+  console.log("onEnd", event);
-  store.nowComponentsData=event.clonedData
+  store.nowComponentsData = event.clonedData;
-  // const {oldDraggableIndex} = obj;
-  // store.previewData(store.component[oldDraggableIndex]);
-  // store.nowComponentsData(store.component[oldDraggableIndex]);
 };
 
-const onStart = function (event) {
+const onStart = (event) => {
-  console.log("onStart", event)
+  console.log("onStart", event);
-}
+};
-const onPreviewStart = function (event) {
-  console.log("onPreviewStart", event)
-}
-const onPreviewUpdate = function (event) {
-  console.log("onPreviewUpdate", event)
-}
 
-const onPreviewStop = function (event) {
+const onPreviewStart = (event) => {
-  console.log(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));

src/modules/previewScheme.json

@@ -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": {}
+  }
+]