From 2ee99ea37ea9d0b2e9ed733514dd6581706a6b38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8A=B3=E8=B5=84=E8=9C=80=E9=81=93=E5=B1=B1?=
 <1493170339@qq.com>
Date: Sun, 10 Nov 2024 20:40:42 +0800
Subject: [PATCH] Make the fields of mock JS simulated data consistent with the
 real interface.

---
 ui-vue3/src/api/mock/mockApp.ts               | 125 +++++-----
 ui-vue3/src/api/mock/mockInstance.ts          |  36 ++-
 ui-vue3/src/api/mock/mockServer.ts            |  32 ++-
 ui-vue3/src/api/mock/mockService.ts           |  41 ++--
 ui-vue3/src/utils/SearchUtil.ts               |   2 +-
 .../resources/applications/tabs/instance.vue  | 213 +++++++++---------
 .../views/resources/instances/tabs/detail.vue |   4 +-
 ui-vue3/vite.config.ts                        |   7 +-
 8 files changed, 252 insertions(+), 208 deletions(-)

diff --git a/ui-vue3/src/api/mock/mockApp.ts b/ui-vue3/src/api/mock/mockApp.ts
index 821f14426..036166f0e 100644
--- a/ui-vue3/src/api/mock/mockApp.ts
+++ b/ui-vue3/src/api/mock/mockApp.ts
@@ -26,36 +26,31 @@ Mock.mock('/mock/application/metrics', 'get', () => {
   }
 })
 
-Mock.mock('/mock/application/search', 'get', () => {
-  let total = Mock.mock('@integer(8, 1000)')
-  let list = []
+Mock.mock(devTool.mockUrl('/mock/application/search'), 'get', () => {
+  const total = Mock.mock('@integer(3, 20)')
+  const list = []
   for (let i = 0; i < total; i++) {
-    let tmp: any = {
-      registerClusters: []
-    }
-    let num = Mock.mock('@integer(1,3)')
-    for (let j = 0; j < num; j++) {
-      let r = Mock.mock('@string(5)')
-      tmp.registerClusters.push(`cluster_${r}`)
-    }
     list.push({
-      appName: 'app_' + Mock.mock('@string(2,10)'),
-      instanceNum: Mock.mock('@integer(80, 200)'),
-      deployCluster: 'cluster_' + Mock.mock('@string(5)'),
-      ...tmp
+      appName: Mock.Random.pick(['QuickStartApplication', 'shop-comment', 'shop-detail', 'shop-order', 'shop-user']),
+      deployClusters: [Mock.Random.pick(['default', 'prod', 'test'])],
+      instanceCount: Mock.mock('@integer(1, 5)'),
+      registryClusters: [`${Mock.mock('@ip')}:8848`]
     })
   }
+
   return {
     code: 200,
-    message: 'success',
+    msg: 'success',
     data: {
-      total: total,
-      curPage: 1,
-      pageSize: 10,
-      data: list
+      list: list,
+      pageInfo: {
+        Total: total,
+        NextOffset: ''
+      }
     }
   }
 })
+
 Mock.mock('/mock/application/instance/statistics', 'get', () => {
   return {
     code: 1000,
@@ -70,7 +65,7 @@ Mock.mock('/mock/application/instance/statistics', 'get', () => {
 })
 
 Mock.mock(devTool.mockUrl('/mock/application/instance/info'), 'get', () => {
-  let total = Mock.mock('@integer(8, 1000)')
+  let total = Mock.mock('@integer(8, 100)')
   let list = []
   for (let i = 0; i < total; i++) {
     list.push({
@@ -78,13 +73,7 @@ Mock.mock(devTool.mockUrl('/mock/application/instance/info'), 'get', () => {
       name: 'shop-user',
       deployState: Mock.Random.pick(['Running', 'Pending', 'Terminating', 'Crashing']),
       deployCluster: 'tx-shanghai-1',
-      registerStates: [
-        {
-          label: 'Registed',
-          value: 'Registed',
-          level: 'healthy'
-        }
-      ],
+      registerState: 'Registed',
       registerClusters: ['ali-hangzhou-1', 'ali-hangzhou-2'],
       cpu: '1.2c',
       memory: '2349MB',
@@ -98,41 +87,53 @@ Mock.mock(devTool.mockUrl('/mock/application/instance/info'), 'get', () => {
   }
   return {
     code: 200,
-    message: 'success',
+    msg: 'success',
     data: Mock.mock({
-      total: total,
-      curPage: 1,
-      pageSize: 10,
-      data: list
+      pageInfo: {
+        Total: list.length,
+        NextOffset: 0
+      },
+      list: list
     })
   }
 })
 
-Mock.mock('/mock/application/detail', 'get', () => {
+Mock.mock(devTool.mockUrl('/mock/application/detail'), 'get', () => {
   return {
     code: 200,
-    message: 'success',
+    msg: 'success',
     data: {
-      appName: ['shop-user'],
-      rpcProtocols: ['dubbo 2.0.2'],
-      dubboVersions: ['Dubbo 3.2.10', 'Dubbo 2.7.4.1'],
-      dubboPorts: ['20880'],
-      serialProtocols: ['fastjson2'],
-      appTypes: ['无状态'],
-      images: [
-        'harbor.apche.org/dubbo-samples-shop-user:v1.0',
-        'harbor.apche.org/dubbo-samples-shop-user:v1.1',
-        'harbor.apche.org/dubbo-samples-shop-user:v1.2'
-      ],
-      workloads: [
-        'dubbo-samples-shop-user-base',
-        'dubbo-samples-shop-user-gray',
-        'dubbo-samples-shop-user-gray',
-        'dubbo-samples-shop-user-gray'
-      ],
-      deployCluster: ['ali-shanghai-1', 'tx-shanghai-2'],
-      registerCluster: ['nacos-cluster-1', 'nacos-cluster-2'],
-      registerMode: ['应用级', '接口级']
+      appName: Mock.mock('@word(10,20)'),
+      appTypes: Mock.mock({
+        'array|2-5': ['@word(5,10)']
+      }).array,
+      deployClusters: Mock.mock({
+        'array|3-6': ['@word(8,15)']
+      }).array,
+      dubboPorts: Mock.mock({
+        'array|1-3': ['@integer(10000,65535)']
+      }).array,
+      dubboVersions: Mock.mock({
+        'array|2-4': ['@word(3,8)']
+      }).array,
+      images: Mock.mock({
+        'array|2-5': ['@word(10,20)']
+      }).array,
+      registerClusters: Mock.mock({
+        'array|2-4': ['@word(8,15)']
+      }).array,
+      registerModes: Mock.mock({
+        'array|1-3': ['@word(5,10)']
+      }).array,
+      rpcProtocols: Mock.mock({
+        'array|2-4': ['@word(3,8)']
+      }).array,
+      serialProtocols: Mock.mock({
+        'array|2-4': ['@word(4,8)']
+      }).array,
+      workloads: Mock.mock({
+        'array|3-6': ['@word(6,12)']
+      }).array
     }
   }
 })
@@ -155,3 +156,17 @@ Mock.mock('/mock/application/event', 'get', () => {
     }
   }
 })
+
+Mock.mock(devTool.mockUrl('/mock/application/service/form'), 'get', () => {
+  return {
+    code: 200,
+    message: 'success',
+    data: {
+      list: [],
+      pageInfo: {
+        Total: 0,
+        NextOffset: ''
+      }
+    }
+  }
+})
diff --git a/ui-vue3/src/api/mock/mockInstance.ts b/ui-vue3/src/api/mock/mockInstance.ts
index a94010473..7d2bb0346 100644
--- a/ui-vue3/src/api/mock/mockInstance.ts
+++ b/ui-vue3/src/api/mock/mockInstance.ts
@@ -16,8 +16,9 @@
  */
 
 import Mock from 'mockjs'
+import devTool from '@/utils/DevToolUtil'
 
-Mock.mock('/mock/instance/search', 'get', () => {
+Mock.mock(devTool.mockUrl('/mock/instance/search'), 'get', () => {
   let total = Mock.mock('@integer(8, 1000)')
   let list = []
   for (let i = 0; i < total; i++) {
@@ -26,17 +27,11 @@ Mock.mock('/mock/instance/search', 'get', () => {
       name: 'shop-user',
       deployState: Mock.Random.pick(['Running', 'Pending', 'Terminating', 'Crashing']),
       deployCluster: 'tx-shanghai-1',
-      registerStates: [
-        {
-          label: 'Registed',
-          value: 'Registed',
-          level: 'healthy'
-        }
-      ],
+      registerState: 'Registed',
       registerClusters: ['ali-hangzhou-1', 'ali-hangzhou-2'],
       cpu: '1.2c',
       memory: '2349MB',
-      startTime: '2023-06-09 03:47:10',
+      startTime_k8s: '2023-06-09 03:47:10',
       registerTime: '2023-06-09 03:48:20',
       labels: {
         region: 'beijing',
@@ -46,20 +41,21 @@ Mock.mock('/mock/instance/search', 'get', () => {
   }
   return {
     code: 200,
-    message: 'success',
+    msg: 'success',
     data: Mock.mock({
-      total: total,
-      curPage: 1,
-      pageSize: 10,
-      data: list
+      pageInfo: {
+        Total: total,
+        NextOffset: '0'
+      },
+      list: list
     })
   }
 })
 
-Mock.mock('/mock/instance/detail', 'get', () => {
+Mock.mock(devTool.mockUrl('/mock/instance/detail'), 'get', () => {
   return {
     code: 200,
-    message: 'success',
+    msg: 'success',
     data: {
       deployState: 'Running',
       registerStates: 'Unregisted',
@@ -82,15 +78,15 @@ Mock.mock('/mock/instance/detail', 'get', () => {
       probes: {
         startupProbe: {
           type: 'http',
-          port: 22222
+          open: true
         },
         readinessProbe: {
           type: 'http',
-          port: 22222
+          open: true
         },
-        livenessPronbe: {
+        livenessProbe: {
           type: 'http',
-          port: 22222
+          open: true
         }
       }
     }
diff --git a/ui-vue3/src/api/mock/mockServer.ts b/ui-vue3/src/api/mock/mockServer.ts
index 0a325da0d..f161abd17 100644
--- a/ui-vue3/src/api/mock/mockServer.ts
+++ b/ui-vue3/src/api/mock/mockServer.ts
@@ -16,19 +16,29 @@
  */
 
 import Mock from 'mockjs'
+import devTool from '../../utils/DevToolUtil'
+Mock.mock(devTool.mockUrl('/mock/metadata'), 'get', {
+  code: 200,
+  msg: 'success',
+  data: {
+    registry: 'nacos://47.101.215.139:8848?username=nacos&password=nacos',
+    metadata: 'nacos://47.101.215.139:8848?username=nacos&password=nacos',
+    config: 'nacos://47.101.215.139:8848?username=nacos&password=nacos',
+    prometheus: 'http://prometheus.observability.svc.cluster.local:9090/',
+    grafana: 'http://47.251.100.138:3000/d/a0b114ca-edf7-4dfe-ac2c-34a4fc545fed/application',
+    tracing: 'http://47.251.100.138:3000/d/e968a89b-f03d-42e3-8ad3-930ae815cb0f/application'
+  }
+})
 
-Mock.mock('/mock/metrics/metadata', 'get', {
+Mock.mock(devTool.mockUrl('/mock/overview'), 'get', {
   code: 200,
-  message: '成功',
+  msg: 'success',
   data: {
-    versions: ['dubbo-golang-3.0.4'],
-    protocols: ['tri'],
-    rules: ['DemoService:1.0.0:test.configurators', 'DemoService4:bb:aa.configurators'],
-    configCenter: '127.0.0.1:2181',
-    registry: '127.0.0.1:2181',
-    metadataCenter: '127.0.0.1:2181',
-    // make sure the X-Frame-Options is forbidden
-    grafana: `http://${window.location.host}/admin/home`,
-    prometheus: '127.0.0.1:9090'
+    appCount: 0,
+    serviceCount: 0,
+    insCount: 0,
+    protocols: {},
+    releases: {},
+    discoveries: {}
   }
 })
diff --git a/ui-vue3/src/api/mock/mockService.ts b/ui-vue3/src/api/mock/mockService.ts
index 2383bcd35..cf38bd032 100644
--- a/ui-vue3/src/api/mock/mockService.ts
+++ b/ui-vue3/src/api/mock/mockService.ts
@@ -20,15 +20,16 @@ import devTool from '@/utils/DevToolUtil'
 
 Mock.mock(devTool.mockUrl('/mock/service/search'), 'get', {
   code: 200,
-  message: 'success',
+  msg: 'success',
   data: {
-    total: 8,
-    curPage: 1,
-    pageSize: 5,
-    data: [
+    pageInfo: {
+      Total: 8,
+      NextOffset: '0'
+    },
+    list: [
       {
         serviceName: 'org.apache.dubbo.samples.UserService',
-        versionGroup: [
+        versionGroups: [
           {
             version: '1.0.0',
             group: 'group1'
@@ -52,7 +53,7 @@ Mock.mock(devTool.mockUrl('/mock/service/search'), 'get', {
       },
       {
         serviceName: 'org.apache.dubbo.samples.OrderService',
-        versionGroup: [
+        versionGroups: [
           {
             version: '1.0.0',
             group: 'group1'
@@ -76,7 +77,7 @@ Mock.mock(devTool.mockUrl('/mock/service/search'), 'get', {
       },
       {
         serviceName: 'org.apache.dubbo.samples.DetailService',
-        versionGroup: [
+        versionGroups: [
           {
             version: '1.0.0',
             group: 'group1'
@@ -100,7 +101,7 @@ Mock.mock(devTool.mockUrl('/mock/service/search'), 'get', {
       },
       {
         serviceName: 'org.apache.dubbo.samples.PayService',
-        versionGroup: [
+        versionGroups: [
           {
             version: '1.0.0',
             group: 'group1'
@@ -124,7 +125,7 @@ Mock.mock(devTool.mockUrl('/mock/service/search'), 'get', {
       },
       {
         serviceName: 'org.apache.dubbo.samples.CommentService',
-        versionGroup: [
+        versionGroups: [
           {
             version: '1.0.0',
             group: 'group1'
@@ -148,7 +149,7 @@ Mock.mock(devTool.mockUrl('/mock/service/search'), 'get', {
       },
       {
         serviceName: 'org.apache.dubbo.samples.RepayService',
-        versionGroup: [
+        versionGroups: [
           {
             version: '1.0.0',
             group: 'group1'
@@ -172,7 +173,7 @@ Mock.mock(devTool.mockUrl('/mock/service/search'), 'get', {
       },
       {
         serviceName: 'org.apche.dubbo.samples.TransportService',
-        versionGroup: [
+        versionGroups: [
           {
             version: '1.0.0',
             group: 'group1'
@@ -196,7 +197,7 @@ Mock.mock(devTool.mockUrl('/mock/service/search'), 'get', {
       },
       {
         serviceName: 'org.apche.dubbo.samples.DistributionService',
-        versionGroup: [
+        versionGroups: [
           {
             version: '1.0.0',
             group: 'group1'
@@ -221,3 +222,17 @@ Mock.mock(devTool.mockUrl('/mock/service/search'), 'get', {
     ]
   }
 })
+
+Mock.mock(devTool.mockUrl('/mock/service/distribution'), 'get', () => {
+  return {
+    code: 200,
+    msg: 'success',
+    data: {
+      pageInfo: {
+        Total: 8,
+        NextOffset: '0'
+      },
+      list: []
+    }
+  }
+})
diff --git a/ui-vue3/src/utils/SearchUtil.ts b/ui-vue3/src/utils/SearchUtil.ts
index bb91f0967..50c5e4776 100644
--- a/ui-vue3/src/utils/SearchUtil.ts
+++ b/ui-vue3/src/utils/SearchUtil.ts
@@ -78,7 +78,7 @@ export class SearchDomain {
     handleResult && this.onSearch(handleResult)
   }
 
-  async onSearch(handleResult: Function) {
+  async onSearch(handleResult?: Function) {
     this.table.loading = true
     setTimeout(() => {
       this.table.loading = false
diff --git a/ui-vue3/src/views/resources/applications/tabs/instance.vue b/ui-vue3/src/views/resources/applications/tabs/instance.vue
index 28d4b500a..53f8ade0e 100644
--- a/ui-vue3/src/views/resources/applications/tabs/instance.vue
+++ b/ui-vue3/src/views/resources/applications/tabs/instance.vue
@@ -49,7 +49,9 @@
           <a-tag>{{ text }}</a-tag>
         </template>
         <template v-if="column.dataIndex === 'labels'">
-          <a-tag :color="PRIMARY_COLOR" v-for="(value, key) in text">{{ key }} : {{ value }}</a-tag>
+          <a-tag :color="PRIMARY_COLOR" v-for="(value, key) in text"
+            >{{ key }} : {{ value }}</a-tag
+          >
         </template>
 
         <template v-if="column.dataIndex === 'registerTime'">
@@ -61,182 +63,189 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, provide, reactive } from 'vue'
-import { INSTANCE_DEPLOY_COLOR, INSTANCE_REGISTER_COLOR, PRIMARY_COLOR } from '@/base/constants'
-import { Icon } from '@iconify/vue'
-import SearchTable from '@/components/SearchTable.vue'
-import { SearchDomain } from '@/utils/SearchUtil'
-import { PROVIDE_INJECT_KEY } from '@/base/enums/ProvideInject'
-import { useRoute, useRouter } from 'vue-router'
-import { getApplicationInstanceInfo, getApplicationInstanceStatistics } from '@/api/service/app'
-import { formattedDate } from '@/utils/DateUtil'
+import { onMounted, provide, reactive } from "vue";
+import {
+  INSTANCE_DEPLOY_COLOR,
+  INSTANCE_REGISTER_COLOR,
+  PRIMARY_COLOR,
+} from "@/base/constants";
+import { Icon } from "@iconify/vue";
+import SearchTable from "@/components/SearchTable.vue";
+import { SearchDomain } from "@/utils/SearchUtil";
+import { PROVIDE_INJECT_KEY } from "@/base/enums/ProvideInject";
+import { useRoute, useRouter } from "vue-router";
+import {
+  getApplicationInstanceInfo,
+  getApplicationInstanceStatistics,
+} from "@/api/service/app";
+import { formattedDate } from "@/utils/DateUtil";
 
-const route = useRoute()
-const router = useRouter()
+const route = useRoute();
+const router = useRouter();
 
-let __null = PRIMARY_COLOR
+let __null = PRIMARY_COLOR;
 let statisticsInfo = reactive({
   info: <{ [key: string]: string }>{},
-  report: <{ [key: string]: { value: string; icon: string } }>{}
-})
+  report: <{ [key: string]: { value: string; icon: string } }>{},
+});
 
 onMounted(async () => {
-  let statistics = (await getApplicationInstanceStatistics({})).data
-  statisticsInfo.info = <{ [key: string]: string }>statistics
+  let statistics = (await getApplicationInstanceStatistics({})).data;
+  statisticsInfo.info = <{ [key: string]: string }>statistics;
   statisticsInfo.report = {
     providers: {
-      icon: 'carbon:branch',
-      value: statisticsInfo.info.instanceTotal
+      icon: "carbon:branch",
+      value: statisticsInfo.info.instanceTotal,
     },
     consumers: {
-      icon: 'mdi:merge',
-      value: statisticsInfo.info.versionTotal
+      icon: "mdi:merge",
+      value: statisticsInfo.info.versionTotal,
     },
     cpu: {
-      icon: 'carbon:branch',
-      value: statisticsInfo.info.cpuTotal
+      icon: "carbon:branch",
+      value: statisticsInfo.info.cpuTotal,
     },
     memory: {
-      icon: 'mdi:merge',
-      value: statisticsInfo.info.memoryTotal
-    }
-  }
-})
+      icon: "mdi:merge",
+      value: statisticsInfo.info.memoryTotal,
+    },
+  };
+});
 
 const columns = [
   {
-    title: 'instanceDomain.ip',
-    dataIndex: 'ip',
-    key: 'ip',
+    title: "instanceDomain.ip",
+    dataIndex: "ip",
+    key: "ip",
     sorter: true,
     width: 150,
-    fixed: 'left'
+    fixed: "left",
   },
   {
-    title: 'instanceDomain.name',
-    dataIndex: 'name',
-    key: 'name',
+    title: "instanceDomain.name",
+    dataIndex: "name",
+    key: "name",
     sorter: true,
-    width: 180
+    width: 180,
   },
   {
-    title: 'instanceDomain.deployState',
-    dataIndex: 'deployState',
-    key: 'deployState',
+    title: "instanceDomain.deployState",
+    dataIndex: "deployState",
+    key: "deployState",
     sorter: true,
-    width: 150
+    width: 150,
   },
   {
-    title: 'instanceDomain.deployCluster',
-    dataIndex: 'deployClusters',
-    key: 'deployClusters',
+    title: "instanceDomain.deployCluster",
+    dataIndex: "deployClusters",
+    key: "deployClusters",
     sorter: true,
-    width: 180
+    width: 180,
   },
   {
-    title: 'instanceDomain.registerState',
-    dataIndex: 'registerState',
-    key: 'registerState',
+    title: "instanceDomain.registerState",
+    dataIndex: "registerState",
+    key: "registerState",
     sorter: true,
-    width: 150
+    width: 150,
   },
   {
-    title: 'instanceDomain.registerClusters',
-    dataIndex: 'registerCluster',
-    key: 'registerCluster',
+    title: "instanceDomain.registerClusters",
+    dataIndex: "registerCluster",
+    key: "registerCluster",
     sorter: true,
-    width: 200
+    width: 200,
   },
   {
-    title: 'instanceDomain.cpu',
-    dataIndex: 'cpu',
-    key: 'cpu',
+    title: "instanceDomain.cpu",
+    dataIndex: "cpu",
+    key: "cpu",
     sorter: true,
-    width: 120
+    width: 120,
   },
   {
-    title: 'instanceDomain.memory',
-    dataIndex: 'memory',
-    key: 'memory',
+    title: "instanceDomain.memory",
+    dataIndex: "memory",
+    key: "memory",
     sorter: true,
-    width: 120
+    width: 120,
   },
   {
-    title: 'instanceDomain.startTime',
-    dataIndex: 'startTime',
-    key: 'startTime',
+    title: "instanceDomain.startTime",
+    dataIndex: "startTime",
+    key: "startTime",
     sorter: true,
-    width: 150
+    width: 150,
   },
   {
-    title: 'instanceDomain.registerTime',
-    dataIndex: 'registerTime',
-    key: 'registerTime',
+    title: "instanceDomain.registerTime",
+    dataIndex: "registerTime",
+    key: "registerTime",
     sorter: true,
-    width: 150
+    width: 150,
   },
   {
-    title: 'instanceDomain.labels',
-    dataIndex: 'labels',
-    key: 'labels',
+    title: "instanceDomain.labels",
+    dataIndex: "labels",
+    key: "labels",
     sorter: true,
-    fixed: 'right',
-    width: 200
-  }
-]
+    fixed: "right",
+    width: 200,
+  },
+];
 
-let appNameParam: any = route.params?.pathId
+let appNameParam: any = route.params?.pathId;
 const searchDomain = reactive(
   new SearchDomain(
     [
       {
-        label: '',
-        param: 'type',
+        label: "",
+        param: "type",
         defaultValue: 1,
         dict: [
-          { label: 'ip', value: 1 },
-          { label: 'name', value: 2 },
-          { label: 'label', value: 3 }
+          { label: "ip", value: 1 },
+          { label: "name", value: 2 },
+          { label: "label", value: 3 },
         ],
         style: {
-          width: '100px'
-        }
+          width: "100px",
+        },
       },
       {
-        label: '',
-        param: 'search',
+        label: "",
+        param: "search",
         style: {
-          width: '300px'
-        }
+          width: "300px",
+        },
       },
       {
-        label: '',
-        param: 'appName',
+        label: "",
+        param: "appName",
         defaultValue: appNameParam,
         dict: [],
-        dictType: 'APPLICATION_NAME'
-      }
+        dictType: "APPLICATION_NAME",
+      },
     ],
     getApplicationInstanceInfo,
     columns,
-    { pageSize: 4 },
+    { pageSize: 10 },
     true
   )
-)
+);
 
 onMounted(() => {
   searchDomain.tableStyle = {
-    scrollX: '100',
-    scrollY: '500px'
-  }
-  searchDomain.onSearch()
-})
+    scrollX: "100",
+    scrollY: "500px",
+  };
+  searchDomain.onSearch();
+});
 
 const viewDetail = (serviceName: string) => {
-  router.push('/resources/services/detail/' + serviceName)
-}
+  router.push("/resources/services/detail/" + serviceName);
+};
 
-provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
+provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain);
 </script>
 <style lang="less" scoped>
 .__container_app_instance {
@@ -262,7 +271,7 @@ provide(PROVIDE_INJECT_KEY.SEARCH_DOMAIN, searchDomain)
   .statistic-icon-big {
     width: 38px;
     height: 38px;
-    background: v-bind('PRIMARY_COLOR');
+    background: v-bind("PRIMARY_COLOR");
     line-height: 38px;
     vertical-align: middle;
     text-align: center;
diff --git a/ui-vue3/src/views/resources/instances/tabs/detail.vue b/ui-vue3/src/views/resources/instances/tabs/detail.vue
index 6d6ebea61..e449e16ae 100644
--- a/ui-vue3/src/views/resources/instances/tabs/detail.vue
+++ b/ui-vue3/src/views/resources/instances/tabs/detail.vue
@@ -169,7 +169,7 @@
               :labelStyle="{ fontWeight: 'bold' }"
             >
               <p
-                v-if="instanceDetail?.node.length > 0"
+                v-if="instanceDetail?.node"
                 @click="copyIt(instanceDetail?.node)"
                 class="description-item-content with-card"
               >
@@ -195,7 +195,7 @@
             >
               <a-card class="description-item-card">
                 <p
-                  v-if="instanceDetail?.image.length > 0"
+                  v-if="instanceDetail?.image"
                   @click="copyIt(instanceDetail?.image)"
                   class="description-item-content with-card"
                 >
diff --git a/ui-vue3/vite.config.ts b/ui-vue3/vite.config.ts
index e9557fb31..ce4df9d7a 100644
--- a/ui-vue3/vite.config.ts
+++ b/ui-vue3/vite.config.ts
@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import {fileURLToPath, URL} from 'node:url'
-import {defineConfig} from 'vite'
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 
@@ -29,12 +29,11 @@ export default defineConfig({
     server: {
         proxy: {
             // with options: http://localhost:5173/api/bar-> http://jsonplaceholder.typicode.com/bar
-                '/api': {
+            '/api': {
                 target: 'http://jsonplaceholder.typicode.com',
                 changeOrigin: true,
                 rewrite: (path) => path.replace(/^\/api/, ''),
             },
-
         },
     },
     plugins: [