style: polish snackbar appearance (#9173)

dashboard/src/App.vue

@@ -7,9 +7,12 @@
   <v-snackbar v-if="toastStore.current" v-model="snackbarShow" :color="toastStore.current.color"
     :timeout="toastStore.current.timeout" :multi-line="toastStore.current.multiLine"
     :location="toastStore.current.location" close-on-back>
-    {{ toastStore.current.message }}
+    <div class="app-snackbar-message">
+      <v-icon v-if="toastIcon" :icon="toastIcon" size="24" />
+      <span>{{ toastStore.current.message }}</span>
+    </div>
     <template #actions v-if="toastStore.current.closable">
-      <v-btn variant="text" @click="snackbarShow = false">关闭</v-btn>
+      <v-btn icon="mdi-close" variant="text" size="small" aria-label="Close notification" @click="snackbarShow = false" />
     </template>
   </v-snackbar>
 </template>
@@ -32,6 +35,14 @@ const snackbarShow = computed({
   }
 })
 
+const toastIcon = computed(() => ({
+  success: 'mdi-check-circle-outline',
+  error: 'mdi-alert-circle-outline',
+  warning: 'mdi-alert-outline',
+  info: 'mdi-information-outline',
+  primary: 'mdi-information-outline'
+})[toastStore.current?.color] || '')
+
 onMounted(() => {
   const desktopBridge = window.astrbotDesktop
   if (!desktopBridge?.onTrayRestartBackend) {

dashboard/src/components/extension/McpServersSection.vue

@@ -292,7 +292,7 @@
     </v-dialog>
 
     <!-- 消息提示 -->
-    <v-snackbar :timeout="3000" elevation="24" :color="save_message_success" v-model="save_message_snack" location="top">
+    <v-snackbar :timeout="3000" elevation="6" :color="save_message_success" v-model="save_message_snack" location="top">
       {{ save_message }}
     </v-snackbar>
   </div>

dashboard/src/components/extension/SkillsSection.vue

@@ -746,7 +746,7 @@
       v-model="snackbar.show"
       :timeout="3500"
       :color="snackbar.color"
-      elevation="24"
+      elevation="6"
     >
       {{ snackbar.message }}
     </v-snackbar>

dashboard/src/components/extension/componentPanel/index.vue

@@ -314,7 +314,7 @@ watch(viewMode, async (mode) => {
   />
 
   <!-- Snackbar -->
-  <v-snackbar :timeout="2000" elevation="24" :color="snackbar.color" v-model="snackbar.show">
+  <v-snackbar :timeout="2000" elevation="6" :color="snackbar.color" v-model="snackbar.show">
     {{ snackbar.message }}
   </v-snackbar>
 </template>

dashboard/src/plugins/vuetify.ts

@@ -21,6 +21,10 @@ export default createVuetify({
     VCard: {
       rounded: 'lg'
     },
+    VSnackbar: {
+      elevation: 6,
+      rounded: 'lg'
+    },
     VTextField: {
       rounded: 'lg'
     },

dashboard/src/scss/_override.scss

@@ -20,6 +20,42 @@ html {
 .v-overlay.v-snackbar {
   --v-layout-left: 0px !important;
   --v-layout-right: 0px !important;
+
+  .v-snackbar__wrapper {
+    min-height: 52px;
+    border-radius: 8px !important;
+    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.16) !important;
+  }
+
+  .v-snackbar__content {
+    padding: 14px 18px;
+    line-height: 1.35;
+    font-weight: 600;
+  }
+
+  .v-snackbar__actions {
+    margin-inline-end: 6px;
+  }
+
+  .v-snackbar__actions .v-btn {
+    color: inherit;
+  }
+
+  .v-snackbar__wrapper.bg-success {
+    color: #ffffff !important;
+    background-color: #457c3c !important;
+  }
+}
+
+.app-snackbar-message {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+
+  .v-icon {
+    flex: 0 0 auto;
+    opacity: 0.95;
+  }
 }
 
 .customizer-btn .icon {

dashboard/src/views/ConfigPage.vue

@@ -166,7 +166,7 @@
     </v-card>
   </v-dialog>
 
-  <v-snackbar :timeout="3000" elevation="24" :color="save_message_success" v-model="save_message_snack">
+  <v-snackbar :timeout="3000" elevation="6" :color="save_message_success" v-model="save_message_snack">
     {{ save_message }}
   </v-snackbar>
 

dashboard/src/views/ConversationPage.vue

@@ -377,7 +377,7 @@
         </v-dialog>
 
         <!-- 消息提示 -->
-        <v-snackbar :timeout="3000" elevation="24" :color="messageType" v-model="showMessage" location="top">
+        <v-snackbar :timeout="3000" elevation="6" :color="messageType" v-model="showMessage" location="top">
             {{ message }}
         </v-snackbar>
     </div>

dashboard/src/views/ExtensionPage.vue

@@ -510,7 +510,7 @@ const updateDialogPluginLogo = computed(() => {
 
   <v-snackbar
     :timeout="2000"
-    elevation="24"
+    elevation="6"
     :color="snack_success"
     v-model="snack_show"
     location="bottom center"

dashboard/src/views/PlatformPage.vue

@@ -220,7 +220,7 @@
     </v-dialog>
 
     <!-- 消息提示 -->
-    <v-snackbar :timeout="3000" elevation="24" :color="save_message_success" v-model="save_message_snack"
+    <v-snackbar :timeout="3000" elevation="6" :color="save_message_success" v-model="save_message_snack"
       location="top">
       {{ save_message }}
     </v-snackbar>

dashboard/src/views/SessionManagementPage.vue

@@ -650,7 +650,7 @@
       </v-dialog>
 
       <!-- 提示信息 -->
-      <v-snackbar v-model="snackbar" :timeout="3000" elevation="24" :color="snackbarColor" location="top">
+      <v-snackbar v-model="snackbar" :timeout="3000" elevation="6" :color="snackbarColor" location="top">
         {{ snackbarText }}
       </v-snackbar>
 

dashboard/src/views/persona/PersonaManager.vue

@@ -257,7 +257,7 @@
         </v-dialog>
 
         <!-- 消息提示 -->
-        <v-snackbar :timeout="3000" elevation="24" :color="messageType" v-model="showMessage" location="top">
+        <v-snackbar :timeout="3000" elevation="6" :color="messageType" v-model="showMessage" location="top">
             {{ message }}
         </v-snackbar>
     </div>