feat: rebuild warm operations workbench

apps/web/src/auth/console-auth-settings.tsx

@@ -1,4 +1,5 @@
 import { type FormEvent, useEffect, useState } from 'react';
+import { Button, Card, Title } from 'animal-island-ui';
 
 import type { ConsoleAuthDataSource, ConsoleAuthStatus } from './console-auth.js';
 import { createConsoleAuthApiDataSource } from './console-auth.js';
@@ -70,66 +71,70 @@ export function ConsoleAuthSettings({
     <section className="settings-page" aria-labelledby="password-protection-title">
       <header className="page-heading">
         <p className="eyebrow">SYSTEM SETTINGS</p>
-        <h1 id="password-protection-title">密码保护</h1>
+        <h1 id="password-protection-title">
+          <Title color="app-green">密码保护</Title>
+        </h1>
         <p>可在当前管理台直接完成首次密码设置；请在可信网络中初始化并妥善保管密码。</p>
         <p>当前部署为 HTTP，仅适用于可信内网；公网使用必须在前置代理启用 HTTPS。</p>
         <p>参考单实例 SimAdmin 的访问方式，为整个聚合工作台增加统一登录保护。</p>
       </header>
       {error && !status ? <p role="alert">{error}</p> : null}
       {status ? (
-        <form className="settings-card auth-settings" onSubmit={(event) => void save(event)}>
-          <label className="toggle-row">
-            <span>
-              <strong>启用密码保护</strong>
-              <small>启用后，访问实例、短信和设置前都需要先登录。</small>
-            </span>
-            <input
-              type="checkbox"
-              checked={enabled}
-              onChange={(event) => {
-                setEnabled(event.target.checked);
-                setNotice('');
-              }}
-            />
-          </label>
-          {enabled && !status.configured ? (
-            <div className="auth-password-fields">
-              <label htmlFor="new-console-password">设置访问密码</label>
+        <Card pattern="default" className="settings-card">
+          <form className="auth-settings" onSubmit={(event) => void save(event)}>
+            <label className="toggle-row">
+              <span>
+                <strong>启用密码保护</strong>
+                <small>启用后，访问实例、短信和设置前都需要先登录。</small>
+              </span>
               <input
-                id="new-console-password"
-                type="password"
-                autoComplete="new-password"
-                value={password}
-                onChange={(event) => setPassword(event.target.value)}
+                type="checkbox"
+                checked={enabled}
+                onChange={(event) => {
+                  setEnabled(event.target.checked);
+                  setNotice('');
+                }}
               />
-              <label htmlFor="confirm-console-password">确认访问密码</label>
-              <input
-                id="confirm-console-password"
-                type="password"
-                autoComplete="new-password"
-                value={confirmation}
-                onChange={(event) => setConfirmation(event.target.value)}
-              />
-              <small>至少 8 位，同时包含字母和数字。密码仅保存为不可逆哈希。</small>
-            </div>
-          ) : null}
-          {status.configured ? <p>访问密码已配置，不会在页面或 API 中回显。</p> : null}
-          {error ? <p role="alert">{error}</p> : null}
-          {notice ? <p role="status">{notice}</p> : null}
-          <button type="submit" disabled={saving}>
-            {saving ? '正在保存…' : '保存密码保护设置'}
-          </button>
-          {status.protectionEnabled && status.authenticated ? (
-            <button
-              type="button"
-              onClick={() => {
-                void source.logout().then(() => window.location.reload());
-              }}
-            >
-              退出登录
-            </button>
-          ) : null}
-        </form>
+            </label>
+            {enabled && !status.configured ? (
+              <div className="auth-password-fields">
+                <label htmlFor="new-console-password">设置访问密码</label>
+                <input
+                  id="new-console-password"
+                  type="password"
+                  autoComplete="new-password"
+                  value={password}
+                  onChange={(event) => setPassword(event.target.value)}
+                />
+                <label htmlFor="confirm-console-password">确认访问密码</label>
+                <input
+                  id="confirm-console-password"
+                  type="password"
+                  autoComplete="new-password"
+                  value={confirmation}
+                  onChange={(event) => setConfirmation(event.target.value)}
+                />
+                <small>至少 8 位，同时包含字母和数字。密码仅保存为不可逆哈希。</small>
+              </div>
+            ) : null}
+            {status.configured ? <p>访问密码已配置，不会在页面或 API 中回显。</p> : null}
+            {error ? <p role="alert">{error}</p> : null}
+            {notice ? <p role="status">{notice}</p> : null}
+            <Button htmlType="submit" type="primary" disabled={saving} loading={saving}>
+              {saving ? '正在保存…' : '保存密码保护设置'}
+            </Button>
+            {status.protectionEnabled && status.authenticated ? (
+              <Button
+                htmlType="button"
+                onClick={() => {
+                  void source.logout().then(() => window.location.reload());
+                }}
+              >
+                退出登录
+              </Button>
+            ) : null}
+          </form>
+        </Card>
       ) : !error ? (
         <p role="status">正在读取设置…</p>
       ) : null}