From a3810fb9e2d3f8d1a91ee84cc479ab7a7b2b8d3a Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Mon, 29 Jun 2026 18:02:38 +0800
Subject: [PATCH] style(NotificationTemplateEditorDialog): adjust overflow
 property and update min-block-size for template editor
 style(SearchBarDialog): change search icon and adjust dropdown width
 style(common.scss): refine hover effects and update shadow settings for card
 components style(AccountSettingNotification): improve layout and spacing for
 notification settings

---
 .../NotificationTemplateEditorDialog.vue      |   4 +-
 src/components/dialog/SearchBarDialog.vue     |   7 +-
 src/styles/common.scss                        | 149 +++++++++++++++---
 .../setting/AccountSettingNotification.vue    |  34 ++--
 4 files changed, 150 insertions(+), 44 deletions(-)

diff --git a/src/components/dialog/NotificationTemplateEditorDialog.vue b/src/components/dialog/NotificationTemplateEditorDialog.vue
index 3b6d7e09..3d2fef16 100644
--- a/src/components/dialog/NotificationTemplateEditorDialog.vue
+++ b/src/components/dialog/NotificationTemplateEditorDialog.vue
@@ -105,9 +105,9 @@ function submitTemplate() {
 <style scoped>
 .notification-template-editor-dialog {
   display: flex;
+  overflow: hidden;
   flex-direction: column;
   max-block-size: calc(100dvh - 2rem);
-  overflow: hidden;
 }
 
 .template-editor-header {
@@ -147,8 +147,8 @@ function submitTemplate() {
 
   .template-ace-editor {
     flex: 1 1 auto;
-    min-block-size: 0;
     block-size: auto;
+    min-block-size: 0;
   }
 
   .template-editor-actions {
diff --git a/src/components/dialog/SearchBarDialog.vue b/src/components/dialog/SearchBarDialog.vue
index dd9c077a..956a777c 100644
--- a/src/components/dialog/SearchBarDialog.vue
+++ b/src/components/dialog/SearchBarDialog.vue
@@ -466,7 +466,7 @@ onMounted(() => {
       <!-- 弹窗模式保留原有搜索输入区。 -->
       <div v-if="!display.mdAndUp.value" class="search-header">
         <div class="search-input-wrapper">
-          <VIcon icon="mdi-magnify" size="22" class="search-input-icon" />
+          <VIcon icon="mdi-text" size="22" class="search-input-icon" />
           <input
             ref="searchWordInput"
             v-model="searchWord"
@@ -795,7 +795,7 @@ onMounted(() => {
 
 .search-dialog--dropdown {
   border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
-  inline-size: min(40rem, calc(100vw - 2rem));
+  inline-size: min(32rem, calc(100vw - 2rem));
   max-block-size: min(72vh, 42rem);
 }
 
@@ -809,7 +809,6 @@ onMounted(() => {
   border-color: rgba(var(--v-theme-on-surface), 0.12);
   background: rgba(var(--v-theme-surface), 0.72);
   block-size: 42px;
-  box-shadow: var(--app-surface-shadow);
   padding-inline: 14px 8px;
 }
 
@@ -849,7 +848,6 @@ html[data-theme='transparent'] .search-desktop-activator .search-input-wrapper,
 
 .search-input-wrapper:focus-within {
   border-color: rgb(var(--v-theme-primary));
-  box-shadow: var(--app-surface-shadow);
 }
 
 .search-input-icon {
@@ -948,6 +946,7 @@ html[data-theme='transparent'] .search-desktop-activator .search-input-wrapper,
 
 .recent-searches-section {
   inline-size: 100%;
+  padding-block-start: 1rem;
 }
 
 .empty-hint {
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 1a703341..aec9c5bf 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -202,8 +202,8 @@ html[data-theme-radius='extra'] {
 }
 
 .app-hover-lift-card {
-  transition: transform 0.3s ease, box-shadow 0.2s ease;
   transform: translateZ(0);
+  transition: transform 0.3s ease, box-shadow 0.2s ease;
 }
 
 .app-hover-lift-card--hovering {
@@ -475,27 +475,133 @@ html[data-theme-radius='extra'] {
   transition: box-shadow 0.2s ease, border-radius 0.2s ease;
 }
 
-// 只给外层 surface 加边框和阴影，卡片内部的列表、表格等子组件保持平面，避免层级噪声。
-.v-card .v-list:not(.app-surface),
-.v-card .v-sheet:not(.app-surface),
-.v-card .v-table:not(.app-surface),
-.v-card .v-expansion-panel:not(.app-surface),
-.v-card .v-window:not(.app-surface),
-.v-card .v-toolbar:not(.app-surface),
-.v-card .v-navigation-drawer:not(.app-surface),
-.v-card .v-stepper:not(.app-surface),
-.v-card .v-alert:not(.app-surface),
-.v-card .v-avatar,
-.v-card .v-chip {
+// 只给外层卡片和弹窗外壳保留阴影，内部 surface / control / elevation 工具类统一保持平面，避免多层阴影叠加。
+.v-card :where(
+  .app-surface,
+  .app-surface-static,
+  .v-alert,
+  .v-avatar,
+  .v-btn,
+  .v-btn-group,
+  .v-card,
+  .v-chip,
+  .v-expansion-panel,
+  .v-expansion-panel__shadow,
+  .v-list,
+  .v-navigation-drawer,
+  .v-sheet,
+  .v-stepper,
+  .v-table,
+  .v-toolbar,
+  .v-window,
+  [class^='elevation-'],
+  [class*=' elevation-'],
+  [class^='shadow-'],
+  [class*=' shadow-']
+),
+.v-overlay__content > .v-card :where(
+  .app-surface,
+  .app-surface-static,
+  .v-alert,
+  .v-avatar,
+  .v-btn,
+  .v-btn-group,
+  .v-card,
+  .v-chip,
+  .v-expansion-panel,
+  .v-expansion-panel__shadow,
+  .v-list,
+  .v-navigation-drawer,
+  .v-sheet,
+  .v-stepper,
+  .v-table,
+  .v-toolbar,
+  .v-window,
+  [class^='elevation-'],
+  [class*=' elevation-'],
+  [class^='shadow-'],
+  [class*=' shadow-']
+),
+.v-overlay__content > .v-sheet :where(
+  .app-surface,
+  .app-surface-static,
+  .v-alert,
+  .v-avatar,
+  .v-btn,
+  .v-btn-group,
+  .v-card,
+  .v-chip,
+  .v-expansion-panel,
+  .v-expansion-panel__shadow,
+  .v-list,
+  .v-navigation-drawer,
+  .v-sheet,
+  .v-stepper,
+  .v-table,
+  .v-toolbar,
+  .v-window,
+  [class^='elevation-'],
+  [class*=' elevation-'],
+  [class^='shadow-'],
+  [class*=' shadow-']
+),
+.v-overlay__content > form > .v-card :where(
+  .app-surface,
+  .app-surface-static,
+  .v-alert,
+  .v-avatar,
+  .v-btn,
+  .v-btn-group,
+  .v-card,
+  .v-chip,
+  .v-expansion-panel,
+  .v-expansion-panel__shadow,
+  .v-list,
+  .v-navigation-drawer,
+  .v-sheet,
+  .v-stepper,
+  .v-table,
+  .v-toolbar,
+  .v-window,
+  [class^='elevation-'],
+  [class*=' elevation-'],
+  [class^='shadow-'],
+  [class*=' shadow-']
+),
+.v-overlay__content > form > .v-sheet :where(
+  .app-surface,
+  .app-surface-static,
+  .v-alert,
+  .v-avatar,
+  .v-btn,
+  .v-btn-group,
+  .v-card,
+  .v-chip,
+  .v-expansion-panel,
+  .v-expansion-panel__shadow,
+  .v-list,
+  .v-navigation-drawer,
+  .v-sheet,
+  .v-stepper,
+  .v-table,
+  .v-toolbar,
+  .v-window,
+  [class^='elevation-'],
+  [class*=' elevation-'],
+  [class^='shadow-'],
+  [class*=' shadow-']
+) {
+  --app-card-hover-shadow: none;
+  --app-card-rest-shadow: none;
+  --app-fab-shadow: none;
+  --app-fab-shadow-active: none;
+  --app-fab-shadow-hover: none;
+  --app-fab-shadow-strong: none;
+  --app-fab-shadow-strong-hover: none;
   --app-surface-hover-shadow: none;
   --app-surface-shadow: none;
-}
 
-// 弹窗内容里的嵌套卡片默认保持平面；弹窗自身仍由 overlay 规则控制阴影和圆角。
-.v-dialog > .v-overlay__content > .v-card :where(.v-card, .v-sheet, .v-list, .v-table, .v-expansion-panel):not(.app-card-colorful),
-.v-dialog > .v-overlay__content > .v-sheet :where(.v-card, .v-sheet, .v-list, .v-table, .v-expansion-panel):not(.app-card-colorful) {
-  --app-surface-hover-shadow: none;
-  --app-surface-shadow: none;
+  box-shadow: none !important;
 }
 
 // 主题定制器的 bordered 皮肤：保持原布局密度，只给非 Vuetify 外壳增加清晰边界。
@@ -541,7 +647,6 @@ html[data-theme-skin='bordered'] {
       rgba(var(--v-theme-surface), 0) 76%
     ),
     rgba(var(--v-theme-surface), var(--app-card-surface-opacity));
-  box-shadow: var(--app-surface-shadow);
   color: rgb(var(--v-theme-on-surface));
   transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
 
@@ -1188,12 +1293,12 @@ html[data-theme="transparent"] .app-card-colorful,
 }
 
 .v-dialog--fullscreen > .v-overlay__content {
+  display: flex;
+  justify-content: center;
   border-radius: 0 !important;
   box-shadow: none !important;
-  display: flex;
   inline-size: 100%;
   inset-inline: 0 !important;
-  justify-content: center;
   margin-inline: auto;
 }
 
diff --git a/src/views/setting/AccountSettingNotification.vue b/src/views/setting/AccountSettingNotification.vue
index 64636de8..d69a7327 100644
--- a/src/views/setting/AccountSettingNotification.vue
+++ b/src/views/setting/AccountSettingNotification.vue
@@ -433,18 +433,18 @@ useSilentSettingRefresh(loadPageData, {
                 <VIcon icon="mdi-plus" />
                 <VMenu :activator="'parent'" :close-on-content-click="true">
                   <VList>
-                     <VListItem @click="addNotification('wechat')">
-                       <VListItemTitle>{{ t('setting.notification.wechat') }}</VListItemTitle>
-                     </VListItem>
-                     <VListItem @click="addNotification('wechatclawbot')">
-                       <VListItemTitle>{{ t('setting.notification.wechatClawBot') }}</VListItemTitle>
-                     </VListItem>
-                     <VListItem @click="addNotification('feishu')">
-                       <VListItemTitle>{{ t('setting.notification.feishu') }}</VListItemTitle>
-                     </VListItem>
-                      <VListItem @click="addNotification('telegram')">
-                        <VListItemTitle>{{ t('setting.notification.telegram') }}</VListItemTitle>
-                      </VListItem>
+                    <VListItem @click="addNotification('wechat')">
+                      <VListItemTitle>{{ t('setting.notification.wechat') }}</VListItemTitle>
+                    </VListItem>
+                    <VListItem @click="addNotification('wechatclawbot')">
+                      <VListItemTitle>{{ t('setting.notification.wechatClawBot') }}</VListItemTitle>
+                    </VListItem>
+                    <VListItem @click="addNotification('feishu')">
+                      <VListItemTitle>{{ t('setting.notification.feishu') }}</VListItemTitle>
+                    </VListItem>
+                    <VListItem @click="addNotification('telegram')">
+                      <VListItemTitle>{{ t('setting.notification.telegram') }}</VListItemTitle>
+                    </VListItem>
                     <VListItem @click="addNotification('slack')">
                       <VListItemTitle>{{ t('setting.notification.slack') }}</VListItemTitle>
                     </VListItem>
@@ -600,11 +600,11 @@ useSilentSettingRefresh(loadPageData, {
   position: relative;
   display: flex;
   align-items: center;
+  padding: 1rem;
   cursor: pointer;
   gap: 0.875rem;
   inline-size: 100%;
   min-block-size: 5.25rem;
-  padding: 1rem;
   text-align: start;
 }
 
@@ -638,16 +638,18 @@ useSilentSettingRefresh(loadPageData, {
 }
 
 .template-card-subtitle {
-  margin-block-start: 0.25rem;
   color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-size: 0.75rem;
   line-height: 1.25;
+  margin-block-start: 0.25rem;
 }
 
 .template-card-arrow {
   flex: 0 0 auto;
   color: rgba(var(--v-theme-on-surface), 0.42);
-  transition: color 0.2s ease, transform 0.2s ease;
+  transition:
+    color 0.2s ease,
+    transform 0.2s ease;
 }
 
 .notification-template-card:hover .template-card-arrow {
@@ -661,8 +663,8 @@ useSilentSettingRefresh(loadPageData, {
   }
 
   .notification-template-card {
-    min-block-size: 4.75rem;
     padding: 0.875rem;
+    min-block-size: 4.75rem;
   }
 }
 </style>