From 3e5b1844405e7f45c272081796819cb9e189585c Mon Sep 17 00:00:00 2001
From: liuwei <liuwei@wdtrgf.com.cn>
Date: Thu, 23 Apr 2026 09:45:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=B0=8F=E5=B1=8F=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=9A=E4=BC=98=E5=8C=96=E4=BF=AE=E6=94=B9=E5=AF=86?=
 =?UTF-8?q?=E7=A0=81=E5=85=A5=E5=8F=A3=E4=B8=8E=E5=BC=B9=E7=AA=97=E7=9A=84?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

变更项：

1. 顶栏新增 1024/768 响应式规则，解决用户信息与改密/退出按钮在小屏挤压错位问题。

2. 小屏下隐藏 user-pill，收紧按钮间距与尺寸，避免导航和操作区互相挤占。

3. 为修改密码弹窗增加 custom-class，宽度改为视口自适应，防止移动端超宽。

4. 仅对密码弹窗在超小屏启用标签堆叠布局，修复表单字段显示紊乱。
---
 admin/dashboard/templates/base.html | 122 +++++++++++++++++++++++++++-
 1 file changed, 121 insertions(+), 1 deletion(-)

diff --git a/admin/dashboard/templates/base.html b/admin/dashboard/templates/base.html
index 624d5c4..5b787f6 100644
--- a/admin/dashboard/templates/base.html
+++ b/admin/dashboard/templates/base.html
@@ -718,6 +718,125 @@
             font-size: 12px;
             line-height: 1.7;
         }
+
+        /* 修改密码弹窗：默认宽度受限，避免在中小屏超出视口。 */
+        .password-dialog {
+            width: min(460px, 92vw) !important;
+        }
+
+        @media (max-width: 1024px) {
+            .topbar {
+                gap: 10px;
+                padding-left: 12px;
+                padding-right: 12px;
+            }
+
+            .brand-subtitle {
+                display: none;
+            }
+
+            .main-nav-link {
+                padding: 0 10px;
+                min-height: 34px;
+                font-size: 13px;
+            }
+
+            .topbar-right {
+                gap: 8px;
+            }
+
+            .user-pill {
+                display: none;
+            }
+
+            .account-btn,
+            .logout-btn {
+                padding: 8px 10px !important;
+                font-size: 12px !important;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .topbar {
+                height: auto;
+                flex-wrap: wrap;
+                align-items: stretch;
+                padding-top: 10px;
+                padding-bottom: 10px;
+            }
+
+            .topbar-left {
+                width: 100%;
+                flex-wrap: wrap;
+                gap: 8px;
+            }
+
+            .brand {
+                min-width: 0;
+            }
+
+            .brand-title {
+                font-size: 15px;
+            }
+
+            .main-nav {
+                width: 100%;
+                order: 3;
+            }
+
+            .topbar-right {
+                margin-left: auto;
+                width: auto;
+            }
+
+            .account-btn,
+            .logout-btn {
+                padding: 6px 8px !important;
+                min-width: 32px;
+            }
+
+            .account-btn span,
+            .logout-btn span {
+                display: none;
+            }
+
+            .subnav-bar {
+                top: auto;
+                position: static;
+                height: auto;
+                flex-wrap: wrap;
+                padding: 10px 12px;
+                gap: 10px;
+            }
+
+            .subnav-right {
+                width: 100%;
+                flex-wrap: wrap;
+            }
+
+            .sub-nav {
+                width: 100%;
+            }
+
+            .layout-shell {
+                height: calc(100vh - 150px);
+            }
+        }
+
+        @media (max-width: 640px) {
+            /* 小屏下仅对“修改密码”弹窗做堆叠标签，不影响其它弹窗。 */
+            .password-dialog .el-form-item__label {
+                float: none;
+                display: block;
+                text-align: left;
+                line-height: 20px;
+                padding: 0 0 6px;
+            }
+
+            .password-dialog .el-form-item__content {
+                margin-left: 0 !important;
+            }
+        }
     </style>
 
     <link rel="stylesheet" href="/static/css/element-ui/theme-chalk/index.min.css">
@@ -812,7 +931,8 @@
             title="修改后台登录密码"
             :visible.sync="passwordDialogVisible"
             width="460px"
-            :close-on-click-modal="false">
+            :close-on-click-modal="false"
+            custom-class="password-dialog">
             <el-form
                 ref="passwordFormRef"
                 :model="passwordForm"