From 93f1af87a73a6af0bd5b79632d04c1526703376e Mon Sep 17 00:00:00 2001
From: luoliwoshang <2643523683@qq.com>
Date: Wed, 28 Feb 2024 11:40:39 +0800
Subject: [PATCH] feat(gui):update the request of get project and modify
 loading status

---
 spx-gui/src/api/project.ts                    |  66 ++++++-----
 spx-gui/src/router/index.ts                   |   9 +-
 spx-gui/src/widgets/spx-runner/SpxRunner.vue  | 105 ++++++++++++++++++
 .../src/widgets/spx-runner/SpxRunnerDemo.vue  |  34 ++++++
 spx-gui/src/widgets/spx-runner/index.ts       |   2 +-
 spx-gui/src/widgets/spx-runner/spx-runner.vue |  46 --------
 spx-gui/src/widgets/widget.config.ts          |  80 ++++++-------
 7 files changed, 226 insertions(+), 116 deletions(-)
 create mode 100644 spx-gui/src/widgets/spx-runner/SpxRunner.vue
 create mode 100644 spx-gui/src/widgets/spx-runner/SpxRunnerDemo.vue
 delete mode 100644 spx-gui/src/widgets/spx-runner/spx-runner.vue

diff --git a/spx-gui/src/api/project.ts b/spx-gui/src/api/project.ts
index ec2132332..978d4d10f 100644
--- a/spx-gui/src/api/project.ts
+++ b/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'
+    }
+  })
 }
diff --git a/spx-gui/src/router/index.ts b/spx-gui/src/router/index.ts
index 1fcee4fc1..93ded72f7 100644
--- a/spx-gui/src/router/index.ts
+++ b/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',
diff --git a/spx-gui/src/widgets/spx-runner/SpxRunner.vue b/spx-gui/src/widgets/spx-runner/SpxRunner.vue
new file mode 100644
index 000000000..60284dace
--- /dev/null
+++ b/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>
diff --git a/spx-gui/src/widgets/spx-runner/SpxRunnerDemo.vue b/spx-gui/src/widgets/spx-runner/SpxRunnerDemo.vue
new file mode 100644
index 000000000..6bcfc5db9
--- /dev/null
+++ b/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>
diff --git a/spx-gui/src/widgets/spx-runner/index.ts b/spx-gui/src/widgets/spx-runner/index.ts
index 63a01b3de..6682e2fdb 100644
--- a/spx-gui/src/widgets/spx-runner/index.ts
+++ b/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)
\ No newline at end of file
diff --git a/spx-gui/src/widgets/spx-runner/spx-runner.vue b/spx-gui/src/widgets/spx-runner/spx-runner.vue
deleted file mode 100644
index 6d7adccf1..000000000
--- a/spx-gui/src/widgets/spx-runner/spx-runner.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<!--
- * @Author: Zhang Zhi Yang
- * @Date: 2024-02-26 17:49:39
- * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-27 15:09:28
- * @FilePath: \builder\spx-gui\src\components\project-run-test\runnerWidget.vue
- * @Description: 
--->
-<template>
-  <!-- <input type="file" accept=".zip" @change="importFile" /> -->
-  <button v-if="run" @click="onRun">run</button>
-  <button v-else @click="onStop">stop</button>
-  <div v-if="projectid">
-    {{ props.projectid }} {{ run ? 'run' : 'stop' }}
-
-    <!-- <projectRunTest ref="runner" :project="project"></projectRunTest> -->
-  </div>
-</template>
-<script setup lang="ts">
-import { Project, ProjectSource } from '@/class/project'
-import { ref, nextTick, defineEmits, defineProps, watch } from 'vue'
-
-const emits = defineEmits(['loadend'])
-const props = defineProps<{ projectid: String }>()
-
-const project = ref<Project>()
-const runner = ref()
-const run = ref(false)
-
-watch(
-  () => props.projectid,
-  () => {
-    console.log(props.projectid)
-  },
-  {
-    immediate: true
-  }
-)
-
-const onRun = () => {
-  run.value = true
-}
-const onStop = () => {
-  run.value = false
-}
-</script>
diff --git a/spx-gui/src/widgets/widget.config.ts b/spx-gui/src/widgets/widget.config.ts
index 51418cf88..17e476064 100644
--- a/spx-gui/src/widgets/widget.config.ts
+++ b/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')
+      }
     }
-})
\ No newline at end of file
+  }
+})