From 57cf32ac18a13f3bae13d5685f566bb3e955d726 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=B1=BC=E5=BC=80=E5=8F=91?= <git@xiaoyu.com>
Date: Wed, 10 Jun 2026 09:26:22 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=AE=BE=E7=BD=AE=E5=AF=86=E7=A0=81?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E6=A0=87=E9=A2=98=E4=B8=8E=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86=E6=94=B9=E4=B8=BA=E5=90=8C=E8=A1=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 标签左对齐（60px 宽度），输入框右侧自适应
- 错误提示也跟随缩进对齐
---
 .../src/components/Modal/SetPasswordModal.tsx | 206 ++++++++++--------
 1 file changed, 112 insertions(+), 94 deletions(-)

diff --git a/tauri-app/src/components/Modal/SetPasswordModal.tsx b/tauri-app/src/components/Modal/SetPasswordModal.tsx
index aaa3d4b..40a8a46 100644
--- a/tauri-app/src/components/Modal/SetPasswordModal.tsx
+++ b/tauri-app/src/components/Modal/SetPasswordModal.tsx
@@ -95,12 +95,24 @@ export default function SetPasswordModal({
     marginBottom: '16px',
   };
 
-  const labelStyle: React.CSSProperties = {
-    display: 'block',
+  const rowStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+  };
+
+  const rowLabelStyle: React.CSSProperties = {
     fontSize: '13px',
     fontWeight: 500,
     color: 'var(--text-secondary)',
-    marginBottom: '6px',
+    width: '60px',
+    flexShrink: 0,
+    textAlign: 'right',
+  };
+
+  const rowInputWrapStyle: React.CSSProperties = {
+    flex: 1,
+    position: 'relative',
   };
 
   const errorStyle: React.CSSProperties = {
@@ -153,18 +165,65 @@ export default function SetPasswordModal({
         <div>
           {hasPassword && (
             <div style={fieldStyle}>
-              <label style={labelStyle}>旧密码</label>
-              <div style={{ position: 'relative' }}>
+              <div style={rowStyle}>
+                <label style={rowLabelStyle}>旧密码</label>
+                <div style={rowInputWrapStyle}>
+                  <input
+                    type={showOld ? 'text' : 'password'}
+                    placeholder="请输入旧密码"
+                    value={oldPassword}
+                    onChange={e => setOldPassword(e.target.value)}
+                    style={inputStyle}
+                    onKeyDown={e => { if (e.key === 'Enter') handleSubmit(); }}
+                  />
+                  <button
+                    onClick={() => setShowOld(!showOld)}
+                    style={{
+                      position: 'absolute',
+                      right: '10px',
+                      top: '50%',
+                      transform: 'translateY(-50%)',
+                      background: 'none',
+                      border: 'none',
+                      cursor: 'pointer',
+                      color: 'var(--text-tertiary)',
+                      padding: '4px',
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
+                  >
+                    {showOld ? (
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                        <circle cx="12" cy="12" r="3" />
+                      </svg>
+                    ) : (
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+                        <line x1="1" y1="1" x2="23" y2="23" />
+                      </svg>
+                    )}
+                  </button>
+                </div>
+              </div>
+              <div style={{ ...errorStyle, paddingLeft: '72px' }} />
+            </div>
+          )}
+
+          <div style={fieldStyle}>
+            <div style={rowStyle}>
+              <label style={rowLabelStyle}>新密码</label>
+              <div style={rowInputWrapStyle}>
                 <input
-                  type={showOld ? 'text' : 'password'}
-                  placeholder="请输入旧密码"
-                  value={oldPassword}
-                  onChange={e => setOldPassword(e.target.value)}
+                  type={showNew ? 'text' : 'password'}
+                  placeholder="至少6位字符"
+                  value={newPassword}
+                  onChange={e => setNewPassword(e.target.value)}
                   style={inputStyle}
                   onKeyDown={e => { if (e.key === 'Enter') handleSubmit(); }}
                 />
                 <button
-                  onClick={() => setShowOld(!showOld)}
+                  onClick={() => setShowNew(!showNew)}
                   style={{
                     position: 'absolute',
                     right: '10px',
@@ -179,7 +238,7 @@ export default function SetPasswordModal({
                     alignItems: 'center',
                   }}
                 >
-                  {showOld ? (
+                  {showNew ? (
                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                       <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
                       <circle cx="12" cy="12" r="3" />
@@ -192,94 +251,53 @@ export default function SetPasswordModal({
                   )}
                 </button>
               </div>
-              <div style={errorStyle} />
             </div>
-          )}
-
-          <div style={fieldStyle}>
-            <label style={labelStyle}>新密码</label>
-            <div style={{ position: 'relative' }}>
-              <input
-                type={showNew ? 'text' : 'password'}
-                placeholder="至少6位字符"
-                value={newPassword}
-                onChange={e => setNewPassword(e.target.value)}
-                style={inputStyle}
-                onKeyDown={e => { if (e.key === 'Enter') handleSubmit(); }}
-              />
-              <button
-                onClick={() => setShowNew(!showNew)}
-                style={{
-                  position: 'absolute',
-                  right: '10px',
-                  top: '50%',
-                  transform: 'translateY(-50%)',
-                  background: 'none',
-                  border: 'none',
-                  cursor: 'pointer',
-                  color: 'var(--text-tertiary)',
-                  padding: '4px',
-                  display: 'flex',
-                  alignItems: 'center',
-                }}
-              >
-                {showNew ? (
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                ) : (
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
-                    <line x1="1" y1="1" x2="23" y2="23" />
-                  </svg>
-                )}
-              </button>
-            </div>
-            <div style={errorStyle}>{pwdTooShort ? '密码至少需要6位' : ''}</div>
+            <div style={{ ...errorStyle, paddingLeft: '72px' }}>{pwdTooShort ? '密码至少需要6位' : ''}</div>
           </div>
 
           <div style={fieldStyle}>
-            <label style={labelStyle}>确认密码</label>
-            <div style={{ position: 'relative' }}>
-              <input
-                type={showConfirm ? 'text' : 'password'}
-                placeholder="再次输入新密码"
-                value={confirmPassword}
-                onChange={e => setConfirmPassword(e.target.value)}
-                style={inputStyle}
-                onKeyDown={e => { if (e.key === 'Enter') handleSubmit(); }}
-              />
-              <button
-                onClick={() => setShowConfirm(!showConfirm)}
-                style={{
-                  position: 'absolute',
-                  right: '10px',
-                  top: '50%',
-                  transform: 'translateY(-50%)',
-                  background: 'none',
-                  border: 'none',
-                  cursor: 'pointer',
-                  color: 'var(--text-tertiary)',
-                  padding: '4px',
-                  display: 'flex',
-                  alignItems: 'center',
-                }}
-              >
-                {showConfirm ? (
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                ) : (
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
-                    <line x1="1" y1="1" x2="23" y2="23" />
-                  </svg>
-                )}
-              </button>
+            <div style={rowStyle}>
+              <label style={rowLabelStyle}>确认密码</label>
+              <div style={rowInputWrapStyle}>
+                <input
+                  type={showConfirm ? 'text' : 'password'}
+                  placeholder="再次输入新密码"
+                  value={confirmPassword}
+                  onChange={e => setConfirmPassword(e.target.value)}
+                  style={inputStyle}
+                  onKeyDown={e => { if (e.key === 'Enter') handleSubmit(); }}
+                />
+                <button
+                  onClick={() => setShowConfirm(!showConfirm)}
+                  style={{
+                    position: 'absolute',
+                    right: '10px',
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    color: 'var(--text-tertiary)',
+                    padding: '4px',
+                    display: 'flex',
+                    alignItems: 'center',
+                  }}
+                >
+                  {showConfirm ? (
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                      <circle cx="12" cy="12" r="3" />
+                    </svg>
+                  ) : (
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+                      <line x1="1" y1="1" x2="23" y2="23" />
+                    </svg>
+                  )}
+                </button>
+              </div>
             </div>
-            <div style={errorStyle}>{pwdMismatch ? '两次输入的密码不一致' : ''}</div>
+            <div style={{ ...errorStyle, paddingLeft: '72px' }}>{pwdMismatch ? '两次输入的密码不一致' : ''}</div>
           </div>
         </div>