fix: 优化设置页部分显示效果

frontend/src/views/setting/TabAdvanced.vue

@@ -1,19 +1,13 @@
 <script setup lang="ts">
-const {
-  goToLogs,
-  openDevTools,
-  mirrorConfigStatus,
-  refreshingConfig,
-  refreshMirrorConfig,
-  goToMirrorTest
-} = defineProps<{
+const props = defineProps<{
   goToLogs: () => void
   openDevTools: () => void
-  mirrorConfigStatus: { isUsingCloudConfig: boolean; version: string; lastUpdated: string; source: 'cloud' | 'fallback' }
   refreshingConfig: boolean
   refreshMirrorConfig: () => Promise<void>
   goToMirrorTest: () => void
 }>()
+
+const { goToLogs, openDevTools, refreshingConfig, refreshMirrorConfig, goToMirrorTest } = props
 </script>
 <template>
   <div class="tab-content">

frontend/src/views/setting/TabNotify.vue

@@ -2,19 +2,23 @@
 import { QuestionCircleOutlined } from '@ant-design/icons-vue'
 import type { SettingsData } from '@/types/settings'
 
-const { settings, sendTaskResultTimeOptions, handleSettingChange, testNotify, testingNotify } = defineProps<{
+const props = defineProps<{
   settings: SettingsData
   sendTaskResultTimeOptions: { label: string; value: string }[]
   handleSettingChange: (category: keyof SettingsData, key: string, value: any) => Promise<void>
   testNotify: () => Promise<void>
   testingNotify: boolean
 }>()
+
+const { settings, sendTaskResultTimeOptions, handleSettingChange, testNotify, testingNotify } = props
 </script>
+
 <template>
   <div class="tab-content">
     <div class="form-section">
       <div class="section-header">
         <h3>通知内容</h3>
+        <a-button type="primary" :loading="testingNotify" @click="testNotify" size="small" class="section-update-button primary-style">发送测试通知</a-button>
       </div>
       <a-row :gutter="24">
         <a-col :span="8">
@@ -319,17 +323,73 @@ const { settings, sendTaskResultTimeOptions, handleSettingChange, testNotify, te
       </a-row>
     </div>
 
-    <div class="form-section">
-      <div class="section-header">
-        <h3>通知测试</h3>
-      </div>
-      <a-row :gutter="24">
-        <a-col :span="24">
-          <a-space>
-            <a-button type="primary" :loading="testingNotify" @click="testNotify">发送测试通知</a-button>
-          </a-space>
-        </a-col>
-      </a-row>
-    </div>
+    <!-- 测试按钮已移至“通知内容”标题右侧 -->
   </div>
 </template>
+
+<style scoped>
+/* Header layout */
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* Doc link and header action parity */
+.section-header .section-update-button {
+  /* Apply doc-link visual tokens to the local update button only.
+     Do NOT touch global .section-doc-link so the real doc button remains unchanged. */
+  color: var(--ant-color-primary) !important;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--ant-color-primary);
+  transition: all 0.18s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  line-height: 1;
+}
+
+.section-header .section-update-button:hover {
+  color: var(--ant-color-primary-hover) !important;
+  background-color: var(--ant-color-primary-bg);
+  border-color: var(--ant-color-primary-hover);
+}
+
+/* Primary gradient style for the update button */
+
+.section-header .section-update-button.primary-style {
+  /* Keep gradient but match doc-link height/rounded corners for parity */
+  height: 32px;
+  padding: 4px 8px; /* same vertical padding as doc-link */
+  font-size: 14px; /* same as doc-link for visual parity */
+  font-weight: 500;
+  border-radius: 4px; /* same radius as doc-link */
+  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.18);
+  transition: transform 0.16s ease, box-shadow 0.16s ease;
+  background: linear-gradient(135deg, var(--ant-color-primary), var(--ant-color-primary-hover)) !important;
+  border: 1px solid var(--ant-color-primary) !important; /* subtle border to match doc-link rhythm */
+  color: #fff !important;
+}
+
+.section-header .section-update-button.primary-style:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(22, 119, 255, 0.22);
+}
+
+@media (max-width: 640px) {
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  .section-header .section-update-button {
+    margin-top: 4px;
+  }
+}
+
+</style>
+

frontend/src/views/setting/TabOthers.vue

@@ -13,8 +13,8 @@ const { version, backendUpdateInfo } = defineProps<{
       <div class="section-header">
         <h3>项目链接</h3>
       </div>
-      <a-row :gutter="24">
-        <a-col :span="8">
+      <div class="link-grid">
+        <div class="link-item">
           <div class="link-card">
             <div class="link-icon"><HomeOutlined /></div>
             <div class="link-content">
@@ -23,18 +23,18 @@ const { version, backendUpdateInfo } = defineProps<{
               <a href="https://auto-mas.top" target="_blank" class="link-button">访问官网</a>
             </div>
           </div>
-        </a-col>
-        <a-col :span="8">
+        </div>
+        <div class="link-item">
           <div class="link-card">
             <div class="link-icon"><GithubOutlined /></div>
             <div class="link-content">
               <h4>GitHub仓库</h4>
-              <p>查看源代码、提交issue和贡献</p>
+              <p>查看源代码、提交issue和捐赠</p>
               <a href="https://github.com/AUTO-MAS-Project/AUTO-MAS" target="_blank" class="link-button">访问仓库</a>
             </div>
           </div>
-        </a-col>
-        <a-col :span="8">
+        </div>
+        <div class="link-item">
           <div class="link-card">
             <div class="link-icon"><QqOutlined /></div>
             <div class="link-content">
@@ -43,8 +43,8 @@ const { version, backendUpdateInfo } = defineProps<{
               <a href="https://qm.qq.com/q/bd9fISNoME" target="_blank" class="link-button">加入群聊</a>
             </div>
           </div>
-        </a-col>
-      </a-row>
+        </div>
+      </div>
     </div>
 
     <div class="form-section">
@@ -74,3 +74,30 @@ const { version, backendUpdateInfo } = defineProps<{
     </div>
   </div>
 </template>
+
+<style scoped>
+/* Responsive grid for link cards: ensures cards expand to fill available width */
+.link-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 24px;
+  align-items: stretch;
+  width: 100%;
+}
+
+.link-item {
+  display: flex;
+}
+
+/* Make sure link-card fills its grid cell */
+.link-card {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.link-content {
+  flex: 1 1 auto;
+}
+
+</style>

frontend/src/views/setting/index.vue

@@ -34,11 +34,17 @@ const version = (import.meta as any).env?.VITE_APP_VERSION || '获取版本失
 const backendUpdateInfo = ref<VersionOut | null>(null)
 
 // 镜像配置状态
-const mirrorConfigStatus = ref({
+type MirrorConfigStatus = {
+  isUsingCloudConfig: boolean
+  version?: string
+  lastUpdated?: string
+  source: 'cloud' | 'fallback'
+}
+const mirrorConfigStatus = ref<MirrorConfigStatus>({
   isUsingCloudConfig: false,
-  version: '',
-  lastUpdated: '',
-  source: 'fallback' as 'cloud' | 'fallback',
+  version: undefined,
+  lastUpdated: undefined,
+  source: 'fallback',
 })
 const refreshingConfig = ref(false)
 
@@ -324,9 +330,12 @@ onMounted(() => {
 <style scoped>
 /* 统一样式，使用 :deep 作用到子组件内部 */
 .settings-container {
-  max-width: 1200px;
-  margin: 0 auto;
+  /* Allow the settings page to expand with the window width */
+  width: 100%;
+  max-width: none;
+  margin: 0;
   padding: 20px;
+  box-sizing: border-box;
 }
 .settings-header {
   margin-bottom: 24px;
@@ -340,6 +349,7 @@ onMounted(() => {
 .settings-content {
   background: var(--ant-color-bg-container);
   border-radius: 12px;
+  width: 100%;
 }
 .settings-tabs {
   margin: 0;
@@ -356,6 +366,7 @@ onMounted(() => {
 }
 :deep(.tab-content) {
   padding: 24px;
+  width: 100%;
 }
 :deep(.form-section) {
   margin-bottom: 32px;
@@ -536,6 +547,7 @@ onMounted(() => {
   color: #fff !important;
   text-decoration: none;
 }
+/* link-grid styles moved into TabOthers.vue (scoped) */
 :deep(.info-item) {
   display: flex;
   align-items: center;