perf：确保能拿到数据再渲染组件

frontend/src/App.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 const activeIndex = ref('1')
 import { DeviceProtocol, ProtocolCmd } from "@/dao/device";
 import { GetProtocolVersion, GetCurrentVersion } from '@/dao/protocol';
@@ -37,7 +37,7 @@ import { useProtocolVersionStore } from '@/stores/allProtocolVersion';
 const store = useProtocolVersionStore()
 const protocolStore = useProtocolInfoStore()
 
-onBeforeMount(async () => {
+onMounted(async () => {
   await GetProtocolVersion()
   .then(res => {
     store.protocolVersions.push(...res)

frontend/src/components/protocol/KitCollapse.vue

@@ -10,7 +10,7 @@
         </template>
         <div style="margin: auto; width: 90%">
           <collapse-table 
-            v-if="props.protocolCmd !== undefined" 
+            v-if="props.protocolCmd !== undefined && props.deviceProtocol !== undefined" 
             class="mt-4" 
             :info="props.deviceProtocol!" 
             :name="item" 

frontend/src/views/protocol/protocol.vue

@@ -9,8 +9,9 @@
   <!-- 折叠面板 -->
   <kit-collapse
     class="mt-4"
-    :device-protocol="deviceProtocol!"
-    :protocol-cmd="protocolCmd!" />
+    v-if="protocolStore.deviceProtocol !== undefined && protocolStore.protocolCmd !== undefined"
+    :device-protocol="protocolStore.deviceProtocol!"
+    :protocol-cmd="protocolStore.protocolCmd!" />
 
   <el-dialog title="新增协议" v-model="isShow">
     <el-form>
@@ -30,30 +31,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onBeforeMount } from 'vue';
+import { ref } from 'vue';
 import KitCollapse from '@/components/protocol/KitCollapse.vue';
 import { useProtocolInfoStore } from '@/stores/protocolInfo';
 import { useProtocolVersionStore } from '@/stores/allProtocolVersion';
-import type { DeviceProtocolResponse, ProtocolCmdResponse } from '@/components/protocol/types';
 
 const isShow = ref<boolean>(false)
 const formLabelWidth = '140px'
 const protocolStore = useProtocolInfoStore()
-const deviceProtocol = ref<DeviceProtocolResponse>()
-const protocolCmd = ref<ProtocolCmdResponse>()
-
-onBeforeMount(() => {
-  deviceProtocol.value = protocolStore.deviceProtocol
-  protocolCmd.value = protocolStore.protocolCmd
-})
 
 const protocolName = ref<string>('')
 const store = useProtocolVersionStore()
 const addProtocol = () => {
   isShow.value = false
   
-  deviceProtocol.value!.fields.push(protocolName.value)
-  deviceProtocol.value![protocolName.value] = []
+  protocolStore.deviceProtocol!.fields.push(protocolName.value)
+  protocolStore.deviceProtocol![protocolName.value] = []
   store.currentVersions.push({protocol_name: protocolName.value, version: "init"})
   store.protocolVersions.push({protocol_name: protocolName.value, version_paths: JSON.stringify([{version: "init"}])
 })

frontend/vite.config.ts.timestamp-1693012103983-a44e5ed33aab5.mjs

-// vite.config.ts
-import { defineConfig } from "file:///W:/work/NetCopilot/test/vue_django/frontend/node_modules/vite/dist/node/index.js";
-import vue from "file:///W:/work/NetCopilot/test/vue_django/frontend/node_modules/@vitejs/plugin-vue/dist/index.mjs";
-import legacy from "file:///W:/work/NetCopilot/test/vue_django/frontend/node_modules/@vitejs/plugin-legacy/dist/index.mjs";
-import UnoCSS from "file:///W:/work/NetCopilot/test/vue_django/frontend/node_modules/unocss/dist/vite.mjs";
-import { resolve } from "path";
-import process from "process";
-function pathResolve(dir) {
-  return resolve(process.cwd(), ".", dir);
-}
-var vite_config_default = defineConfig({
-  resolve: {
-    alias: {
-      "@": pathResolve("src")
-    },
-    extensions: [".ts", ".js", ".vue"]
-    // 使用路径别名时想要省略的后缀名，可以自己 增减
-  },
-  plugins: [
-    legacy({
-      targets: ["defaults", "not IE 11"]
-    }),
-    vue(),
-    UnoCSS()
-  ],
-  base: "./",
-  server: {
-    host: "0.0.0.0"
-  }
-});
-export {
-  vite_config_default as default
-};
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJXOlxcXFx3b3JrXFxcXE5ldENvcGlsb3RcXFxcdGVzdFxcXFx2dWVfZGphbmdvXFxcXGZyb250ZW5kXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJXOlxcXFx3b3JrXFxcXE5ldENvcGlsb3RcXFxcdGVzdFxcXFx2dWVfZGphbmdvXFxcXGZyb250ZW5kXFxcXHZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9XOi93b3JrL05ldENvcGlsb3QvdGVzdC92dWVfZGphbmdvL2Zyb250ZW5kL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCB2dWUgZnJvbSAnQHZpdGVqcy9wbHVnaW4tdnVlJ1xuaW1wb3J0IGxlZ2FjeSBmcm9tICdAdml0ZWpzL3BsdWdpbi1sZWdhY3knXG5pbXBvcnQgVW5vQ1NTIGZyb20gJ3Vub2Nzcy92aXRlJ1xuaW1wb3J0IHsgcmVzb2x2ZSB9IGZyb20gJ3BhdGgnXG5pbXBvcnQgcHJvY2VzcyBmcm9tICdwcm9jZXNzJ1xuXG5mdW5jdGlvbiBwYXRoUmVzb2x2ZShkaXI6IHN0cmluZyk6IHN0cmluZyB7XG4gIHJldHVybiByZXNvbHZlKHByb2Nlc3MuY3dkKCksICcuJywgZGlyKVxufTtcblxuXG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcmVzb2x2ZToge1xuICAgIGFsaWFzOiB7XG4gICAgICBcIkBcIjogcGF0aFJlc29sdmUoJ3NyYycpXG4gICAgfSxcbiAgICBleHRlbnNpb25zOiBbJy50cycsICcuanMnLCAnLnZ1ZSddIC8vIFx1NEY3Rlx1NzUyOFx1OERFRlx1NUY4NFx1NTIyQlx1NTQwRFx1NjVGNlx1NjBGM1x1ODk4MVx1NzcwMVx1NzU2NVx1NzY4NFx1NTQwRVx1N0YwMFx1NTQwRFx1RkYwQ1x1NTNFRlx1NEVFNVx1ODFFQVx1NURGMSBcdTU4OUVcdTUxQ0ZcbiAgfSxcbiAgcGx1Z2luczogW1xuICAgIGxlZ2FjeSh7XG4gICAgICB0YXJnZXRzOiBbJ2RlZmF1bHRzJywgJ25vdCBJRSAxMSddLFxuICAgIH0pLFxuICAgIHZ1ZSgpLFxuICAgIFVub0NTUygpXG4gIF0sXG4gIGJhc2U6ICAnLi8nLFxuICBzZXJ2ZXI6IHtcbiAgICBob3N0OiAnMC4wLjAuMCcsXG4gIH1cbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQStULFNBQVMsb0JBQW9CO0FBQzVWLE9BQU8sU0FBUztBQUNoQixPQUFPLFlBQVk7QUFDbkIsT0FBTyxZQUFZO0FBQ25CLFNBQVMsZUFBZTtBQUN4QixPQUFPLGFBQWE7QUFFcEIsU0FBUyxZQUFZLEtBQXFCO0FBQ3hDLFNBQU8sUUFBUSxRQUFRLElBQUksR0FBRyxLQUFLLEdBQUc7QUFDeEM7QUFJQSxJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTO0FBQUEsSUFDUCxPQUFPO0FBQUEsTUFDTCxLQUFLLFlBQVksS0FBSztBQUFBLElBQ3hCO0FBQUEsSUFDQSxZQUFZLENBQUMsT0FBTyxPQUFPLE1BQU07QUFBQTtBQUFBLEVBQ25DO0FBQUEsRUFDQSxTQUFTO0FBQUEsSUFDUCxPQUFPO0FBQUEsTUFDTCxTQUFTLENBQUMsWUFBWSxXQUFXO0FBQUEsSUFDbkMsQ0FBQztBQUFBLElBQ0QsSUFBSTtBQUFBLElBQ0osT0FBTztBQUFBLEVBQ1Q7QUFBQSxFQUNBLE1BQU87QUFBQSxFQUNQLFFBQVE7QUFBQSxJQUNOLE1BQU07QUFBQSxFQUNSO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K