From 220cc2341ed56fae84992223def51d87879faafa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=96=BB=E5=8B=87=E7=A5=A5?= <237899745@qq.com>
Date: Mon, 24 Nov 2025 21:11:48 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E4=BC=98=E5=8C=96=E5=AD=98?=
 =?UTF-8?q?=E5=82=A8=E7=AE=A1=E7=90=86=E5=8D=A1=E7=89=87=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

前端优化：
- 使用 flexbox 布局确保卡片等高
- 按钮自动对齐到卡片底部
- 添加 align-items: stretch 确保卡片高度一致
- 使用 margin-top: auto 将按钮区域推到底部

视觉改进：
- 两个存储卡片高度保持一致
- 操作按钮在同一水平线上对齐
- 整体布局更加美观和协调

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app.html | 42 +++++++++++++++++++++++-------------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/frontend/app.html b/frontend/app.html
index eeea275..a1a96bc 100644
--- a/frontend/app.html
+++ b/frontend/app.html
@@ -1254,8 +1254,8 @@
               </div>
             </div>
 
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px;">
-              <div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04);">
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; align-items: stretch;">
+              <div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; height: 100%;">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                   <div style="font-weight: 700; color: #0f172a; display: flex; gap: 8px; align-items: center;">
                     <i class="fas fa-hard-drive"></i> 本地存储
@@ -1275,12 +1275,14 @@
                     }"></div>
                   </div>
                 </div>
-                <button class="btn btn-primary" style="width: 100%; border-radius: 10px;" :disabled="storageType === 'local' || storageSwitching" @click="switchStorage('local')">
-                  <i class="fas fa-bolt"></i> 用本地存储
-                </button>
+                <div style="margin-top: auto;">
+                  <button class="btn btn-primary" style="width: 100%; border-radius: 10px;" :disabled="storageType === 'local' || storageSwitching" @click="switchStorage('local')">
+                    <i class="fas fa-bolt"></i> 用本地存储
+                  </button>
+                </div>
               </div>
 
-              <div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04);">
+              <div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; height: 100%;">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                   <div style="font-weight: 700; color: #0f172a; display: flex; gap: 8px; align-items: center;">
                     <i class="fas fa-server"></i> SFTP 存储
@@ -1294,19 +1296,21 @@
                 <div v-else style="font-size: 13px; color: #b45309; background: #fff7ed; border: 1px dashed #fcd34d; padding: 10px; border-radius: 8px; margin-bottom: 10px;">
                   <i class="fas fa-exclamation-circle"></i> 先填写 SFTP 连接信息再切换
                 </div>
-                <button
-                  class="btn"
-                  :class="user?.has_ftp_config ? 'btn-primary' : 'btn-secondary'"
-                  style="width: 100%; border-radius: 10px;"
-                  :disabled="storageType === 'sftp' || storageSwitching"
-                  @click="switchStorage('sftp')">
-                  <i class="fas fa-random"></i>
-                  {{ user?.has_ftp_config ? '切到 SFTP 存储' : '去配置 SFTP' }}
-                </button>
-                <div style="margin-top: 8px; text-align: center;">
-                  <a style="color: #4b5fc9; font-size: 13px; text-decoration: none; cursor: pointer;" @click.prevent="openSftpConfigModal">
-                    <i class="fas fa-tools"></i> 配置 / 修改 SFTP
-                  </a>
+                <div style="margin-top: auto;">
+                  <button
+                    class="btn"
+                    :class="user?.has_ftp_config ? 'btn-primary' : 'btn-secondary'"
+                    style="width: 100%; border-radius: 10px;"
+                    :disabled="storageType === 'sftp' || storageSwitching"
+                    @click="switchStorage('sftp')">
+                    <i class="fas fa-random"></i>
+                    {{ user?.has_ftp_config ? '切到 SFTP 存储' : '去配置 SFTP' }}
+                  </button>
+                  <div style="margin-top: 8px; text-align: center;">
+                    <a style="color: #4b5fc9; font-size: 13px; text-decoration: none; cursor: pointer;" @click.prevent="openSftpConfigModal">
+                      <i class="fas fa-tools"></i> 配置 / 修改 SFTP
+                    </a>
+                  </div>
                 </div>
               </div>
             </div>