feat: 更新密码显示按钮样式，增加图标和可访问性属性

frontend/index.html

@@ -144,7 +144,18 @@
                 </label>
                 <span class="input-action-wrap">
                   <input id="password" name="password" type="password" maxlength="4096" autocomplete="current-password" />
-                  <button id="reveal-password" class="input-action" type="button" aria-label="显示密码">显示</button>
+                  <button id="reveal-password" class="input-action" type="button" aria-label="显示密码" aria-pressed="false">
+                    <svg class="reveal-icon reveal-icon-eye" viewBox="0 0 24 24" aria-hidden="true">
+                      <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" />
+                      <circle cx="12" cy="12" r="3" />
+                    </svg>
+                    <svg class="reveal-icon reveal-icon-eye-off" viewBox="0 0 24 24" aria-hidden="true">
+                      <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
+                      <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
+                      <path d="M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
+                      <line x1="2" x2="22" y1="2" y2="22" />
+                    </svg>
+                  </button>
                 </span>
               </div>
 

frontend/src/main.ts

@@ -312,7 +312,7 @@ const ui = {
 
 function updateRevealPasswordButton(): void {
   const revealed = ui.password.type === 'text';
-  ui.revealPassword.textContent = revealed ? bilingual('隐藏', 'Hide') : bilingual('显示', 'Show');
+  ui.revealPassword.setAttribute('aria-pressed', revealed ? 'true' : 'false');
   ui.revealPassword.setAttribute('aria-label', revealed
     ? bilingual('隐藏密码', 'Hide password')
     : bilingual('显示密码', 'Show password'));

frontend/src/style.css

@@ -715,7 +715,7 @@ button:disabled {
 }
 
 .input-action-wrap input {
-  padding-right: 82px;
+  padding-right: 44px;
 }
 
 .input-action {
@@ -723,6 +723,9 @@ button:disabled {
   top: 5px;
   right: 5px;
   bottom: 5px;
+  display: grid;
+  width: 34px;
+  place-items: center;
   border: 0;
   border-radius: 5px;
   background: var(--surface-2);
@@ -732,6 +735,32 @@ button:disabled {
   text-transform: uppercase;
 }
 
+.input-action:hover {
+  color: var(--text);
+}
+
+.reveal-icon {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+}
+
+.reveal-icon-eye-off {
+  display: none;
+}
+
+.input-action[aria-pressed='true'] .reveal-icon-eye {
+  display: none;
+}
+
+.input-action[aria-pressed='true'] .reveal-icon-eye-off {
+  display: block;
+}
+
 .key-field {
   display: grid;
   gap: 9px;