fix ui

src/layouts/components/ShortcutBar.vue

@@ -67,8 +67,7 @@ async function sendMessage() {
       user_message.value = ''
       sendButtonDisabled.value = false
       scrollMessageToEnd()
-    }
+    } catch (error) {
-    catch (error) {
       console.error(error)
     }
   }
@@ -92,10 +91,7 @@ onMounted(() => {
   >
     <!-- Menu Activator -->
     <template #activator="{ props }">
-      <IconBtn
+      <IconBtn class="me-2" v-bind="props">
-        class="me-2"
-        v-bind="props"
-      >
         <VIcon icon="mdi-checkbox-multiple-blank-outline" />
       </IconBtn>
     </template>
@@ -111,132 +107,61 @@ onMounted(() => {
       </VCardItem>
       <div class="ps ps--active-y">
         <VRow class="ma-0 mt-n1">
-          <VCol
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e">
-            cols="6"
+            <VListItem class="pa-4" @click="nameTestDialog = true">
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
+              <VAvatar size="48" variant="tonal">
-          >
-            <VListItem
-              class="pa-4"
-              @click="nameTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
                 <VIcon icon="mdi-text-recognition" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
+              <h6 class="text-base font-weight-medium mt-2 mb-0">识别</h6>
-                识别
-              </h6>
               <span class="text-sm">名称识别测试</span>
             </VListItem>
           </VCol>
-          <VCol
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
-            cols="6"
+            <VListItem class="pa-4" @click="ruleTestDialog = true">
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
+              <VAvatar size="48" variant="tonal">
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="ruleTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
                 <VIcon icon="mdi-filter-cog-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
+              <h6 class="text-base font-weight-medium mt-2 mb-0">优先级</h6>
-                优先级
-              </h6>
               <span class="text-sm">优先级规则测试</span>
             </VListItem>
           </VCol>
         </VRow>
         <VRow class="ma-0 mt-n1 border-t">
-          <VCol
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
-            cols="6"
+            <VListItem class="pa-4" @click="loggingDialog = true">
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
+              <VAvatar size="48" variant="tonal">
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="loggingDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
                 <VIcon icon="mdi-file-document-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
+              <h6 class="text-base font-weight-medium mt-2 mb-0">日志</h6>
-                日志
-              </h6>
               <span class="text-sm">实时日志</span>
             </VListItem>
           </VCol>
-          <VCol
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon" @click="() => {}">
-            cols="6"
+            <VListItem class="pa-4" @click="netTestDialog = true">
-            class="text-center cursor-pointer pa-0 shortcut-icon"
+              <VAvatar size="48" variant="tonal">
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="netTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
                 <VIcon icon="mdi-network-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
+              <h6 class="text-base font-weight-medium mt-2 mb-0">网络</h6>
-                网络
-              </h6>
               <span class="text-sm">网速连通性测试</span>
             </VListItem>
           </VCol>
         </VRow>
         <VRow class="ma-0 mt-n1 border-t">
-          <VCol
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
-            cols="6"
+            <VListItem class="pa-4" @click="systemTestDialog = true">
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
+              <VAvatar size="48" variant="tonal">
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="systemTestDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
                 <VIcon icon="mdi-cog-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
+              <h6 class="text-base font-weight-medium mt-2 mb-0">系统</h6>
-                系统
-              </h6>
               <span class="text-sm">健康检查</span>
             </VListItem>
           </VCol>
-          <VCol
+          <VCol cols="6" class="text-center cursor-pointer pa-0 shortcut-icon border-e" @click="() => {}">
-            cols="6"
+            <VListItem class="pa-4" @click="messageDialog = true">
-            class="text-center cursor-pointer pa-0 shortcut-icon border-e"
+              <VAvatar size="48" variant="tonal">
-            @click="() => {}"
-          >
-            <VListItem
-              class="pa-4"
-              @click="messageDialog = true"
-            >
-              <VAvatar
-                size="48"
-                variant="tonal"
-              >
                 <VIcon icon="mdi-message-outline" />
               </VAvatar>
-              <h6 class="text-base font-weight-medium mt-2 mb-0">
+              <h6 class="text-base font-weight-medium mt-2 mb-0">消息</h6>
-                消息
-              </h6>
               <span class="text-sm">消息中心</span>
             </VListItem>
           </VCol>
@@ -245,12 +170,7 @@ onMounted(() => {
     </VCard>
   </VMenu>
   <!-- 名称测试弹窗 -->
-  <VDialog
+  <VDialog v-if="nameTestDialog" v-model="nameTestDialog" max-width="50rem" scrollable>
-    v-if="nameTestDialog"
-    v-model="nameTestDialog"
-    max-width="50rem"
-    :fullscreen="displayWidth < (50 * 16)"
-  >
     <VCard title="名称识别测试">
       <DialogCloseBtn @click="nameTestDialog = false" />
       <VCardItem>
@@ -259,12 +179,7 @@ onMounted(() => {
     </VCard>
   </VDialog>
   <!-- 网络测试弹窗 -->
-  <VDialog
+  <VDialog v-if="netTestDialog" v-model="netTestDialog" scrollable max-width="35rem">
-    v-if="netTestDialog"
-    v-model="netTestDialog"
-    max-width="35rem"
-    :fullscreen="displayWidth < (35 * 16)"
-  >
     <VCard title="网络测试">
       <DialogCloseBtn @click="netTestDialog = false" />
       <VCardItem>
@@ -278,7 +193,7 @@ onMounted(() => {
     v-model="loggingDialog"
     scrollable
     max-width="70rem"
-    :fullscreen="displayWidth < (70 * 16)"
+    :fullscreen="displayWidth < 70 * 16"
   >
     <VCard>
       <DialogCloseBtn @click="loggingDialog = false" />
@@ -286,7 +201,9 @@ onMounted(() => {
         <VCardTitle class="inline-flex">
           实时日志
           <a class="mx-2 inline-flex items-center justify-center" :href="allLoggingUrl()" target="_blank">
-            <div class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700">
+            <div
+              class="inline-flex cursor-pointer items-center rounded-full bg-gray-600 px-2 text-sm text-gray-200 ring-1 ring-gray-500 transition hover:bg-gray-700"
+            >
               <VIcon icon="mdi-open-in-new" />
               <span class="ms-1">在新窗口中打开</span>
             </div>
@@ -299,13 +216,7 @@ onMounted(() => {
     </VCard>
   </VDialog>
   <!-- 规则测试弹窗 -->
-  <VDialog
+  <VDialog v-if="ruleTestDialog" v-model="ruleTestDialog" max-width="50rem" scrollable>
-    v-if="ruleTestDialog"
-    v-model="ruleTestDialog"
-    max-width="50rem"
-    scrollable
-    :fullscreen="displayWidth < (50 * 16)"
-  >
     <VCard title="优先级测试">
       <DialogCloseBtn @click="ruleTestDialog = false" />
       <VCardText>
@@ -319,7 +230,7 @@ onMounted(() => {
     v-model="systemTestDialog"
     max-width="50rem"
     scrollable
-    :fullscreen="displayWidth < (50 * 16)"
+    :fullscreen="displayWidth < 50 * 16"
   >
     <VCard title="系统健康检查">
       <DialogCloseBtn @click="systemTestDialog = false" />
@@ -334,7 +245,7 @@ onMounted(() => {
     v-model="messageDialog"
     max-width="60rem"
     scrollable
-    :fullscreen="displayWidth < (60 * 16)"
+    :fullscreen="displayWidth < 60 * 16"
   >
     <VCard title="消息中心">
       <DialogCloseBtn @click="messageDialog = false" />
@@ -355,13 +266,7 @@ onMounted(() => {
           @keydown.enter="sendMessage"
         >
           <template #append>
-            <VBtn
+            <VBtn color="primary" :disabled="sendButtonDisabled" @click="sendMessage"> 发送 </VBtn>
-              color="primary"
-              :disabled="sendButtonDisabled"
-              @click="sendMessage"
-            >
-              发送
-            </VBtn>
           </template>
         </VTextField>
       </VCardItem>