feat(gui):update the request of get project and modify loading status

spx-gui/src/api/project.ts

@@ -1,8 +1,16 @@
-import type { Project } from "@/interface/library";
-import { service } from "@/axios"
-import type { ResponseData } from "@/axios";
-import type { FormatResponse } from "@/components/code-editor";
-import type { AxiosResponse } from "axios";
+/*
+ * @Author: Zhang Zhi Yang
+ * @Date: 2024-02-07 21:43:44
+ * @LastEditors: Zhang Zhi Yang
+ * @LastEditTime: 2024-02-27 18:46:18
+ * @FilePath: \builder\spx-gui\src\api\project.ts
+ * @Description: 
+ */
+import type { Project } from '@/interface/library'
+import { service } from '@/axios'
+import type { ResponseData } from '@/axios'
+import type { FormatResponse } from '@/components/code-editor'
+import type { AxiosResponse } from 'axios'
 
 /**
  * Saves a project.
@@ -13,20 +21,20 @@ import type { AxiosResponse } from "axios";
  * @returns Project
  */
 export function saveProject(name: string, uid: number, file: File): Promise<Project> {
-    const url = '/project/save';
-    const formData = new FormData();
-    formData.append('name', name);
-    formData.append('uid', uid.toString());
-    formData.append('file', file);
+  const url = '/project/save'
+  const formData = new FormData()
+  formData.append('name', name)
+  formData.append('uid', uid.toString())
+  formData.append('file', file)
 
-    return service({
-        url: url,
-        method: 'post',
-        data: formData,
-        headers: {
-            'Content-Type': 'multipart/form-data'
-        },
-    });
+  return service({
+    url: url,
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
 }
 
 /**
@@ -36,16 +44,16 @@ export function saveProject(name: string, uid: number, file: File): Promise<Proj
  * @returns string
  */
 export function formatSpxCode(body: string): Promise<AxiosResponse<ResponseData<FormatResponse>>> {
-    const url = '/project/fmt';
-    const formData = new FormData();
-    formData.append('body', body);
+  const url = '/project/fmt'
+  const formData = new FormData()
+  formData.append('body', body)
 
-    return service({
-        url: url,
-        method: 'post',
-        data: formData,
-        headers: {
-            'Content-Type': 'multipart/form-data'
-        },
-    });
+  return service({
+    url: url,
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
 }

spx-gui/src/router/index.ts

@@ -2,8 +2,8 @@
  * @Author: Xu Ning
  * @Date: 2024-01-15 09:16:35
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-05 16:42:18
- * @FilePath: /spx-gui/src/router/index.ts
+ * @LastEditTime: 2024-02-28 14:08:00
+ * @FilePath: \spx-gui\src\router\index.ts
  * @Description:
  */
 import type { App } from 'vue'
@@ -30,6 +30,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'StageViewer',
     component: () => import('../components/stage-viewer-demo/StageViewerDemo.vue')
   },
+  {
+    path: '/runner/widget/:id',
+    name: 'StageViewer',
+    component: () => import('../widgets/spx-runner/SpxRunnerDemo.vue')
+  },
   {
     path: '/editor/homepage',
     name: 'EditorHomepage',

spx-gui/src/widgets/spx-runner/SpxRunner.vue

@@ -0,0 +1,105 @@
+<!--
+ * @Author: Zhang Zhi Yang
+ * @Date: 2024-02-26 17:49:39
+ * @LastEditors: Zhang Zhi Yang
+ * @LastEditTime: 2024-02-28 11:37:20
+ * @FilePath: \builder\spx-gui\src\widgets\spx-runner\spxRunner.vue
+ * @Description: 
+-->
+<template>
+  <div class="spx-runner-widget">
+    <div class="operation">
+      <n-button :disabled="!projectid || !ready || !!errorMsg || run" @click="onRun">run</n-button>
+      <n-button :disabled="!projectid || !ready || !!errorMsg || !run" @click="onStop"
+        >stop</n-button
+      >
+    </div>
+    <div class="project-runner">
+      <div v-if="!ready" class="loading">
+        <n-spin />
+      </div>
+      <div v-if="errorMsg" class="error">
+        <p>{{ errorMsg }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineProps, watch } from 'vue'
+import { NButton, NSpin } from 'naive-ui'
+// consider use fetch instead of axios
+import axios from 'axios'
+const props = defineProps<{ projectid?: string }>()
+const run = ref(false)
+const ready = ref(false)
+const errorMsg = ref('')
+
+const baseUrl = import.meta.env.VITE_API_BASE_URL
+watch(
+  () => props.projectid,
+  async (projectid) => {
+    if (projectid) {
+      ready.value = false
+      errorMsg.value = ''
+      try {
+        const res = await axios.get(baseUrl + '/project?id=' + projectid)
+        await new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(200)
+          }, 2000)
+        })
+        ready.value = true
+      } catch (err) {
+        console.log(err)
+        errorMsg.value = 'loading project fail'
+      } finally {
+        ready.value = true
+      }
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+const onRun = () => {
+  run.value = true
+}
+const onStop = () => {
+  run.value = false
+}
+</script>
+<style lang="scss" scoped>
+.spx-runner-widget {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .operation {
+    display: flex;
+  }
+  .project-runner {
+    position: relative;
+    width: 100%;
+    flex: 1;
+
+    .loading,
+    .error {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+// loading icon is not center
+:deep(.n-base-loading__container){
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

spx-gui/src/widgets/spx-runner/SpxRunnerDemo.vue

@@ -0,0 +1,34 @@
+<!--
+ * @Author: Zhang Zhi Yang
+ * @Date: 2024-02-28 09:15:20
+ * @LastEditors: Zhang Zhi Yang
+ * @LastEditTime: 2024-02-28 11:30:43
+ * @FilePath: \builder\spx-gui\src\widgets\spx-runner\spxRunnerDemo.vue
+ * @Description: 
+-->
+<template>
+  <div class="spx-runner-demo">
+    <input v-model="projectid" />
+    <SpxRunner :projectid="projectid" />
+  </div>
+</template>
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { onMounted, ref } from 'vue'
+import SpxRunner from './SpxRunner.vue'
+const route = useRoute()
+const projectid = ref<string>()
+onMounted(() => {
+  console.log('router:', route.params.id)
+  if (route.params.id) {
+    console.log('router:', route.params.id)
+    projectid.value = route.params.id as string
+  }
+})
+</script>
+<style scoped lang="scss">
+.spx-runner-demo {
+  width: 300px;
+  height: 300px;
+}
+</style>

spx-gui/src/widgets/spx-runner/index.ts

@@ -7,7 +7,7 @@
  * @Description: 
  */
 import { defineCustomElement } from "vue";
-import spxRunner from "./spx-runner.vue";
+import spxRunner from "./SpxRunner.vue";
 export const spxRunnerWidget = defineCustomElement(spxRunner)
 
 customElements.define("spx-runner", spxRunnerWidget)

spx-gui/src/widgets/widget.config.ts

@@ -2,50 +2,54 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-27 17:11:17
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-27 18:03:23
+ * @LastEditTime: 2024-02-28 11:19:49
  * @FilePath: \builder\spx-gui\src\widgets\widget.config.ts
- * @Description: 
+ * @Description:
  */
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
 const resolve = (dir: string) => path.join(__dirname, dir)
 export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
-    return {
-        plugins: [
-            vue(
-                {
-                    template: {
-                        compilerOptions: {
-                            isCustomElement: (tag) => tag.includes('-')
-                        }
-                    }
-                }),
-        ],
-        define: { 'process.env.NODE_ENV': '"production"' },
-        build: {
-            target: 'esnext',
-            outDir:'spx-widgets',
-            minify: 'terser',
-            lib: {
-                entry: 'src/widgets/spx-runner/index.ts',
-                formats: ['es', 'cjs', 'iife'],
-                name: 'runnerWidget'
-            }
-        },
+  return {
+    plugins: [
+      vue({
+        template: {
+          compilerOptions: {
+            isCustomElement: (tag) => tag.includes('-')
+          }
+        }
+      })
+    ],
 
-        resolve: {
-            alias: {
-                // '@': fileURLToPath(new URL('./src', import.meta.url))
-                '@': resolve('../../src'),
-                comps: resolve('../components'),
-                apis: resolve('../apis'),
-                views: resolve('../views'),
-                utils: resolve('../utils'),
-                routes: resolve('../routes'),
-                styles: resolve('../styles'),
-                store: resolve('../store')
-            }
-        },
+    define: { 'process.env.NODE_ENV': '"production"' },
+    build: {
+      target: 'esnext',
+      outDir: 'spx-widgets',
+      minify: 'terser',
+      lib: {
+        entry: 'src/widgets/spx-runner/index.ts',
+        formats: ['es'],
+        name: 'spxWidgets',
+        fileName: 'spx-widgets'
+      },
+      rollupOptions: {
+        external: ['../../public/**'] 
+      }
+    },
+
+    resolve: {
+      alias: {
+        // '@': fileURLToPath(new URL('./src', import.meta.url))
+        '@': resolve('../../src'),
+        comps: resolve('../components'),
+        apis: resolve('../apis'),
+        views: resolve('../views'),
+        utils: resolve('../utils'),
+        routes: resolve('../routes'),
+        styles: resolve('../styles'),
+        store: resolve('../store')
+      }
     }
-})
+  }
+})