Merge pull request #131 from ArtisanCloud/dev/northseadl

Dev/northseadl

src/api/plugin.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-const PrefixUriPlugin = 'api/v1/plugin/v1';
+const PrefixUriPlugin = '/api/v1/plugin/v1';
 
 export interface ServerPluginRoute {
   name: string;

src/router/routes/index.ts

@@ -81,22 +81,36 @@ export const appExternalRoutes: RouteRecordNormalized[] = formatModules(
 );
 
 export async function loadPluginRoutes(router: any) {
-  getSeverPluginRoutes().then((res) => {
-    // find plugin route
+  const insertPluginRoutes = (routes: any) => {
     const pluginRoute = cloneDeep(
       router.getRoutes().find((route: any) => route.name === 'Plugin'),
     );
     if (!pluginRoute) return;
-    if (!res.data?.routes) return;
-    pluginRoute.children = BuildPluginRoutes(res.data.routes as any) as any[];
-
-    router.removeRoute(pluginRoute.name as string);
-    router.addRoute(pluginRoute);
+    pluginRoute.children = BuildPluginRoutes(routes as any) as any[];
 
     menuRoutes.forEach((route) => {
       if (route.name === 'Plugin') {
-        route.children = BuildPluginRoutes(res.data.routes as any) as any[];
+        route.children = pluginRoute.children;
       }
     });
-  });
+
+    // -tmp
+    setTimeout(() => {
+      router.removeRoute(pluginRoute.name as string);
+      router.addRoute(pluginRoute);
+    }, 1000);
+  };
+  // find from session storage
+  const cacheRoutes = sessionStorage.getItem('plugin-routes');
+  if (cacheRoutes) {
+    insertPluginRoutes(JSON.parse(cacheRoutes));
+  } else {
+    getSeverPluginRoutes().then((res) => {
+      const { routes } = res.data;
+      if (routes) {
+        sessionStorage.setItem('plugin-routes', JSON.stringify(routes));
+        insertPluginRoutes(routes);
+      }
+    });
+  }
 }

src/utils/plugin.ts

@@ -24,7 +24,7 @@ export function CreateWujieComponent(option: Option) {
     },
     template: `
       <div class="container">
-        <WujieVue3 v-bind="option" />
+        <WujieVue3 v-bind="option"/>
       </div>
     `,
   });
@@ -37,9 +37,11 @@ export function BuildPluginRoutes(
     route.component = CreateWujieComponent({
       key: route.name,
       name: route.name,
-      url: `${pluginEndpoint}${route.path}`,
+      url: pluginEndpoint ?  `${pluginEndpoint}${route.path}` : route.path,
+      alive: true,
+      sync:true
     });
-    route.path = `/plugin${route.path}`;
+    route.path = `/powerx-plugins${route.path}`;
     return route as AppRouteRecordRaw;
   });
 }

src/views/not-found/index.vue

@@ -1,16 +1,51 @@
 <template>
   <div class="content">
-    <a-result class="result" status="404" :subtitle="'not found'"> </a-result>
-    <div class="operation-row">
-      <a-button key="back" type="primary" @click="back"> back </a-button>
+    <div v-if="state.isPlugin">
+      <span v-if="!state.loading">未找到插件</span>
+    </div>
+    <div v-else>
+      <a-result class="result" status="404" :subtitle="'not found'"> </a-result>
+      <div class="operation-row">
+        <a-button key="back" type="primary" @click="back"> back </a-button>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { useRouter } from 'vue-router';
+  import { useRouter, useRoute } from 'vue-router';
+  import { reactive, watchEffect } from 'vue' 
 
   const router = useRouter();
+  const route = useRoute();
+  
+  const state = reactive({
+    isPlugin: false,
+    loading: false
+  })
+
+  watchEffect(() => {
+    if (route.path.startsWith('/powerx-plugins')) {
+      state.isPlugin = true;
+      state.loading = true;
+      const pathSegments = route.path.split('/').slice(0, 3);
+      const newPath = pathSegments.join('/');
+      let retryCount = 0;
+      const interval = setInterval(() => {
+        const pluginRoute = router.getRoutes().find((r) => r.path === newPath);
+        if (pluginRoute) {
+          clearInterval(interval);
+          router.push({ name: pluginRoute.name });
+        } else {
+          retryCount += 1;
+          if (retryCount >= 5) {
+            clearInterval(interval);
+          }
+        }
+      }, 500);
+    }
+  });
+
   const back = () => {
     // warning： Go to the node that has the permission
     router.push({ name: 'Home' });