style: 💄 (settings)优化设置页面布局和样式

- 将底部按钮放入footer插槽中，保留原有的样式

#ICWDUU

src/layouts/components/Settings/index.vue

@@ -107,40 +107,35 @@
     </div>
 
     <!-- 操作按钮区域 - 固定到底部 -->
-    <div class="action-footer">
+    <template #footer>
-      <div class="action-divider"></div>
+      <div class="action-buttons">
-      <div class="action-card">
+        <el-tooltip
-        <div class="action-buttons">
+          content="复制配置将生成当前设置的代码，覆盖 src/settings.ts 下的 defaultSettings 变量"
-          <el-tooltip
+          placement="top"
-            content="复制配置将生成当前设置的代码，覆盖 src/settings.ts 下的 defaultSettings 变量"
+        >
-            placement="top"
+          <el-button
+            type="primary"
+            size="default"
+            :icon="copyIcon"
+            :loading="copyLoading"
+            @click="handleCopySettings"
           >
-            <el-button
+            {{ copyLoading ? "复制中..." : t("settings.copyConfig") }}
-              type="primary"
+          </el-button>
-              size="default"
+        </el-tooltip>
-              :icon="copyIcon"
+        <el-tooltip content="重置将恢复所有设置为默认值" placement="top">
-              :loading="copyLoading"
+          <el-button
-              class="action-btn"
+            type="warning"
-              @click="handleCopySettings"
+            size="default"
-            >
+            :icon="resetIcon"
-              {{ copyLoading ? "复制中..." : t("settings.copyConfig") }}
+            :loading="resetLoading"
-            </el-button>
+            @click="handleResetSettings"
-          </el-tooltip>
+          >
-          <el-tooltip content="重置将恢复所有设置为默认值" placement="top">
+            {{ resetLoading ? "重置中..." : t("settings.resetConfig") }}
-            <el-button
+          </el-button>
-              type="warning"
+        </el-tooltip>
-              size="default"
-              :icon="resetIcon"
-              :loading="resetLoading"
-              class="action-btn"
-              @click="handleResetSettings"
-            >
-              {{ resetLoading ? "重置中..." : t("settings.resetConfig") }}
-            </el-button>
-          </el-tooltip>
-        </div>
       </div>
-    </div>
+    </template>
   </el-drawer>
 </template>
 
@@ -326,47 +321,22 @@ const handleCloseDrawer = () => {
 .settings-content {
   height: calc(100vh - 120px); /* 减去头部和底部按钮的高度 */
   padding: 20px;
-  padding-bottom: 20px;
   overflow-y: auto;
 }
 
 /* 底部操作区域样式 */
-.action-footer {
+.action-buttons {
-  position: absolute;
+  display: flex;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 10;
-  padding: 0;
-  background: var(--el-bg-color);
-  border-top: 1px solid var(--el-border-color-light);
 
-  .action-divider {
+  & > .el-button {
-    display: none; /* 移除重复的分割线 */
+    flex: 1;
-  }
+    font-size: 14px;
+    border-radius: 8px;
+    transition: all 0.3s ease;
 
-  .action-card {
+    &:hover {
-    padding: 16px 20px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    margin: 0;
+      transform: translateY(-2px);
-    background: var(--el-fill-color-extra-light);
-    border: none;
-    border-radius: 0;
-
-    .action-buttons {
-      display: flex;
-      gap: 12px;
-
-      .action-btn {
-        flex: 1;
-        font-size: 14px;
-        border-radius: 8px;
-        transition: all 0.3s ease;
-
-        &:hover {
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-          transform: translateY(-2px);
-        }
-      }
     }
   }
 }