From 561bdf413791fcf7cc84f3c7c3c454739bf3d617 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 9 Apr 2025 15:22:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20ScrollToTopBtn=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4=E6=8C=89=E9=92=AE=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=92=8C=E5=B0=BA=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@core/components/ScrollToTopBtn.vue | 28 ++++++------
 src/layouts/components/ShortcutBar.vue  | 57 +++++++++++++++++++------
 2 files changed, 58 insertions(+), 27 deletions(-)

diff --git a/src/@core/components/ScrollToTopBtn.vue b/src/@core/components/ScrollToTopBtn.vue
index 111d15fa..c7870785 100644
--- a/src/@core/components/ScrollToTopBtn.vue
+++ b/src/@core/components/ScrollToTopBtn.vue
@@ -47,41 +47,39 @@ onUnmounted(() => {
 /* Global Action Button Styles (FAB) */
 .global-action-buttons {
   position: fixed;
-  bottom: 30px;
-  right: 30px;
   z-index: 100;
   display: flex;
   flex-direction: column;
   gap: 16px;
+  inset-block-end: 30px;
+  inset-inline-end: 30px;
 }
 
 .global-action-button {
-  width: 44px;
-  height: 44px;
-  background-color: rgba(var(--v-theme-background), 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
   border-radius: 50%;
   backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
+  background-color: rgba(var(--v-theme-background), 0.8);
+  block-size: 44px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 8%);
   color: rgb(var(--v-theme-on-surface));
+  cursor: pointer;
+  inline-size: 44px;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 
   &:hover {
     background-color: rgba(var(--v-theme-background), 0.95);
-    transform: translateY(-4px);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
     color: rgb(var(--v-theme-primary));
+    transform: translateY(-4px);
   }
 
   svg {
+    block-size: 20px;
+    inline-size: 20px;
     transition: all 0.3s ease;
-    width: 20px;
-    height: 20px;
   }
 }
 </style>
diff --git a/src/layouts/components/ShortcutBar.vue b/src/layouts/components/ShortcutBar.vue
index e0fc76c3..d2dc22de 100644
--- a/src/layouts/components/ShortcutBar.vue
+++ b/src/layouts/components/ShortcutBar.vue
@@ -202,9 +202,16 @@ onMounted(() => {
     </VCard>
   </VMenu>
   <!-- 名称测试弹窗 -->
-  <VDialog v-if="nameTestDialog" v-model="nameTestDialog" max-width="50rem" scrollable>
-    <VCard title="名称识别测试">
-      <DialogCloseBtn @click="nameTestDialog = false" />
+  <VDialog v-if="nameTestDialog" v-model="nameTestDialog" max-width="35rem" scrollable>
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-text-recognition" class="me-2" />
+          名称识别测试
+        </VCardTitle>
+        <DialogCloseBtn @click="nameTestDialog = false" />
+      </VCardItem>
+      <VDivider />
       <VCardText>
         <NameTestView />
       </VCardText>
@@ -212,8 +219,14 @@ onMounted(() => {
   </VDialog>
   <!-- 网络测试弹窗 -->
   <VDialog v-if="netTestDialog" v-model="netTestDialog" max-width="35rem" max-height="85vh" scrollable>
-    <VCard title="网络测试">
-      <DialogCloseBtn @click="netTestDialog = false" />
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-network" class="me-2" />
+          网速连通性测试
+        </VCardTitle>
+        <DialogCloseBtn @click="netTestDialog = false" />
+      </VCardItem>
       <VDivider />
       <VCardText>
         <NetTestView />
@@ -232,6 +245,7 @@ onMounted(() => {
       <DialogCloseBtn @click="loggingDialog = false" />
       <VCardItem>
         <VCardTitle class="inline-flex">
+          <VIcon icon="mdi-file-document" class="me-2" />
           实时日志
           <a class="mx-2 inline-flex items-center justify-center" :href="allLoggingUrl()" target="_blank">
             <div
@@ -250,9 +264,16 @@ onMounted(() => {
     </VCard>
   </VDialog>
   <!-- 规则测试弹窗 -->
-  <VDialog v-if="ruleTestDialog" v-model="ruleTestDialog" max-width="50rem" scrollable>
-    <VCard title="规则测试">
-      <DialogCloseBtn @click="ruleTestDialog = false" />
+  <VDialog v-if="ruleTestDialog" v-model="ruleTestDialog" max-width="40rem" scrollable>
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-filter-cog" class="me-2" />
+          规则测试
+        </VCardTitle>
+        <DialogCloseBtn @click="ruleTestDialog = false" />
+      </VCardItem>
+      <VDivider />
       <VCardText>
         <RuleTestView />
       </VCardText>
@@ -260,8 +281,14 @@ onMounted(() => {
   </VDialog>
   <!-- 系统健康检查弹窗 -->
   <VDialog v-if="systemTestDialog" v-model="systemTestDialog" max-width="35rem" max-height="85vh" scrollable>
-    <VCard title="系统健康检查">
-      <DialogCloseBtn @click="systemTestDialog = false" />
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-cog" class="me-2" />
+          系统健康检查
+        </VCardTitle>
+        <DialogCloseBtn @click="systemTestDialog = false" />
+      </VCardItem>
       <VDivider />
       <VCardText>
         <ModuleTestView />
@@ -276,8 +303,14 @@ onMounted(() => {
     scrollable
     :fullscreen="!display.mdAndUp.value"
   >
-    <VCard title="消息中心">
-      <DialogCloseBtn @click="messageDialog = false" />
+    <VCard>
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-message" class="me-2" />
+          消息中心
+        </VCardTitle>
+        <DialogCloseBtn @click="messageDialog = false" />
+      </VCardItem>
       <VDivider />
       <VCardText ref="chatContainer">
         <MessageView @scroll="scrollMessageToEnd" />