refactor: 组件界面优化

src/assembly/bin/start.sh

@@ -31,4 +31,5 @@ if [ ! -d "lib" ]; then
     exit 1
 fi
 
-exec java -Djava.security.egd=file:/dev/./urandom -Dloader.path=./lib -jar plugins.jar --spring.config.location=./conf/application.yml
+JAVA_OPTS=" -server -Xmx2g -Xms2g -Xmn256m"
+exec java $JAVA_OPTS -Duser.timezone=Asia/Shanghai -Djava.security.egd=file:/dev/./urandom -Dloader.path=./lib -jar plugins.jar --spring.config.location=./conf/application.yml

src/main/java/com/cec/plugins/config/PluginWebConfig.java

@@ -0,0 +1,33 @@
+package com.cec.plugins.config;
+
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
+import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+/**
+ * @author zhanghaijun
+ * @date 2023/8/30 13:30
+ * @description web相关的配置
+ */
+// @SpringBootConfiguration
+@Configuration
+public class PluginWebConfig implements WebMvcConfigurer {
+
+    @Override
+    public void addResourceHandlers(ResourceHandlerRegistry registry) {
+        // registry.addResourceHandler("/**").addResourceLocations("classpath:static/");
+    }
+
+    @Override
+    public void addViewControllers(ViewControllerRegistry registry) {
+        // registry.addViewController("/").setViewName("/web");
+        // registry.addViewController("/index").setViewName("index.html");
+    }
+
+
+    // @Override
+    // public void addCorsMappings(CorsRegistry registry) {
+    //     registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS").allowCredentials(true).allowedHeaders("*");
+    // }
+}

web/src/api/code.ts

@@ -1,10 +1,4 @@
 declare interface codeMessageMapTypes {
-  400: string;
-  401: string;
-  403: string;
-  404: string;
-  405: string;
-  500: string;
   [key: string]: string;
 }
 
@@ -14,7 +8,13 @@ const codeMessageMap: codeMessageMapTypes = {
   403: "[403]:拒绝访问",
   404: "[404]:请求路径错误",
   405: "[405]:请求方法错误",
+  408: "[408]:请求超时",
   500: "[500]:服务器错误",
+  501: "[501]:服务器错误",
+  502: "[502]:网络错误",
+  503: "[503]:服务不可用",
+  504: "[504]:网络超时",
+  505: "[505]:HTTP版本不受支持",
 };
 
 const showCodeMessage = (code: number | string): string => {

web/src/api/http.ts

@@ -1,24 +1,17 @@
-import { type AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from "axios";
+import { type AxiosInstance, AxiosResponse, AxiosError } from "axios";
 import { ElMessage } from "element-plus";
 import showCodeMessage from "@/api/code";
 
-const BASE_PREFIX = "/api";
-
 // 创建实例
 const service: AxiosInstance = axios.create({
-  // 前缀
-  baseURL: BASE_PREFIX,
-  // 超时
+  baseURL: "/",
   timeout: 1000 * 60 * 30,
-  // 请求头
-  headers: {
-    "Content-Type": "application/json",
-  },
+  headers: { "Content-Type": "application/json" },
 });
 
 // 请求拦截器
 service.interceptors.request.use(
-  (config: AxiosRequestConfig) => {
+  (config: any) => {
     // TODO 在这里可以加上想要在请求发送前处理的逻辑
     // TODO 比如 loading 等
     return config;

web/src/components/DistributePost.vue

@@ -1,20 +1,18 @@
 <template>
-  <el-row :gutter="20">
-    <el-col :span="10"><el-input v-model="bodyStr" :rows="2" type="textarea" placeholder="Please input" /></el-col>
-    <el-col :span="4"><el-button type="primary">Primary</el-button></el-col>
+  <el-row :gutter="20" class="distribute-box">
     <el-col :span="10">
-      <pre style="border: 1px solid #42b883aa">{{ bodyJson }}</pre>
-      <pre style="border: 1px solid #42b883aa">{{ resultStr }}</pre>
+      <el-input v-model="bodyStr" :rows="2" type="textarea" placeholder="Please input" />
+    </el-col>
+    <el-col :span="2" style="display: flex; align-content: center; justify-content: center; align-items: center">
+      <el-button type="primary">发送请求</el-button>
+    </el-col>
+    <el-col :span="12">
+      <div class="distribute-show">
+        <pre style="border: 1px solid #42b883aa">{{ bodyJson }}</pre>
+        <pre style="border: 1px solid #42b883aa">{{ resultStr }}</pre>
+      </div>
     </el-col>
   </el-row>
-  <div class="distribute-box">
-    <div><el-input v-model="bodyStr" :rows="2" type="textarea" placeholder="Please input" /></div>
-    <div><el-button type="primary">Primary</el-button></div>
-    <div>
-      <pre style="border: 1px solid #42b883aa">{{ bodyJson }}</pre>
-      <pre style="border: 1px solid #42b883aa">{{ resultStr }}</pre>
-    </div>
-  </div>
 </template>
 <script setup lang="ts">
 const pops = defineProps({
@@ -29,35 +27,47 @@ const pops = defineProps({
     default: {},
   },
 });
-const bodyStr = ref(JSON.stringify(pops.body));
-const resultStr = ref("");
+const bodyStr = ref<string>(JSON.stringify(pops.body));
+const resultStr = ref<string>("");
 const bodyJson = computed(() => {
   try {
-    return JSON.parse(bodyStr);
+    return { ...JSON.parse(bodyStr.value), ...{ instanceId: "instanceId-" + randomString(10) } };
   } catch (error) {
-    console.log(error);
-    return "不是Json格式，请检查！！！";
+    return "不是Json格式,请检查!!!";
   }
 });
+
+function randomString(e: Number): String {
+  e = e || 16;
+  let t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678-_";
+  let a = t.length;
+  let n = "";
+  for (let i: Number = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
+  return n;
+}
 </script>
 <style scoped lang="scss">
 .distribute-box {
   height: 100%;
+  padding: 20px;
   border: 1px solid #9c8b8b57;
   border-radius: 6px;
-  // display: flex;
-  // flex-direction: row;
-  // justify-content: center;
-  // align-items: center;
-  // padding: 20px;
-  // > div {
-  //   height: 100%;
-  // }
-  // :first-child {
-  //   flex: 1;
-  // }
-  // :last-child {
-  //   flex: 1;
-  // }
+  .el-textarea {
+    height: 100%;
+    :deep(.el-textarea__inner) {
+      height: 100%;
+    }
+  }
+  .distribute-show {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    :first-child {
+      flex: 2;
+    }
+    :last-child {
+      flex: 1;
+    }
+  }
 }
 </style>

web/src/layout/asideBar.vue

@@ -4,7 +4,7 @@
       <template v-for="item in routes" :key="item.name">
         <el-menu-item :index="item.path">
           <icon-ep-SuccessFilled />
-          <span>{{ item.name }}</span>
+          <span style="margin-left: 8px">{{ item.name }}</span>
         </el-menu-item>
       </template>
     </el-menu>

web/src/layout/index.vue

@@ -4,12 +4,14 @@
       <side-bar :collapse="isCollapse"></side-bar>
     </el-aside>
     <el-container>
-      <el-header style="display: flex; align-items: center; justify-content: center; padding-left: 4vh; font-size: larger; font-weight: 700">测试界面</el-header>
+      <el-header style="display: flex; align-items: center; justify-content: center; padding-left: 4vh; font-size: larger; font-weight: 700"> 测试界面 - {{ routeName }} </el-header>
       <el-main>
-        <router-view v-slot="{ Component }">
-          <Transition name="fade" mode="out-in">
-            <component :is="Component" />
-          </Transition>
+        <router-view v-slot="{ Component, route }">
+          <transition mode="out-in">
+            <keep-alive>
+              <component v-if="!route.meta.link" :is="Component" :key="route.path" />
+            </keep-alive>
+          </transition>
         </router-view>
       </el-main>
     </el-container>
@@ -17,8 +19,10 @@
 </template>
 <script setup lang="ts">
 import SideBar from "./asideBar.vue";
+const isCollapse = ref<boolean>(false);
 
-const isCollapse = ref(false);
+const route = useRoute();
+const routeName = computed(() => route.name);
 </script>
 <style lang="scss" scoped>
 .el-container {

web/src/pages/HomeIndex.vue

@@ -1,30 +1,3 @@
 <template>
-  <div>
-    <vue-json-pretty :data="json" :editable="true"></vue-json-pretty>
-  </div>
-  <pre>{{ json }}</pre>
+  <h2>欢迎访问</h2>
 </template>
-
-<script setup lang="ts">
-// 'https://leezng.github.io/vue-json-pretty/'
-import VueJsonPretty from "vue-json-pretty";
-import "vue-json-pretty/lib/styles.css";
-
-const json = reactive({ a: "aaa", b: "bbb" });
-</script>
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>

web/src/pages/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <vue-json-pretty :data="json" :editable="true"></vue-json-pretty>
+  </div>
+  <pre>{{ json }}</pre>
+</template>
+
+<script setup lang="ts">
+// 'https://leezng.github.io/vue-json-pretty/'
+import VueJsonPretty from "vue-json-pretty";
+import "vue-json-pretty/lib/styles.css";
+
+const json = reactive({ a: "aaa", b: "bbb" });
+</script>
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>

web/src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHashHistory } from "vue-router";
 import NProgress from "nprogress";
 
 const routes = [
@@ -41,7 +41,7 @@ const routes = [
 ];
 
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHashHistory(),
   routes,
 });
 

web/types/auto-imports.d.ts

@@ -297,7 +297,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
 }
 // for vue template auto import
 import { UnwrapRef } from 'vue'