feat(auth): replace browser Basic Auth popup with custom Shadcn SSO AuthGateModal and .hl-input system

stacks/portal/web/src/components/AgyTerminalModal.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { usePortalStore } from '../store/usePortalStore';
+import { AuthGateCard } from './AuthGateModal';
 
 export const AgyTerminalModal: React.FC = () => {
   const { showAgyModal, setShowAgyModal, getEffectiveMode } = usePortalStore();
-
+  const [authChecked, setAuthChecked] = useState(false);
-  if (!showAgyModal) return null;
+  const [authenticated, setAuthenticated] = useState(false);
 
   const mode = getEffectiveMode();
   const url =
@@ -14,6 +15,28 @@ export const AgyTerminalModal: React.FC = () => {
       ? 'https://agy.home.961504.xyz:10443'
       : 'https://agy.961504.xyz';
 
+  useEffect(() => {
+    if (!showAgyModal) return;
+    if (mode === 'lan') {
+      setAuthenticated(true);
+      setAuthChecked(true);
+      return;
+    }
+    setAuthChecked(false);
+    fetch('/api/auth/status', { credentials: 'include' })
+      .then((r) => r.json())
+      .then((d) => {
+        setAuthenticated(Boolean(d.authenticated));
+        setAuthChecked(true);
+      })
+      .catch(() => {
+        setAuthenticated(false);
+        setAuthChecked(true);
+      });
+  }, [showAgyModal, mode]);
+
+  if (!showAgyModal) return null;
+
   return (
     <div className="fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex items-center justify-center p-3 sm:p-6">
       <div className="w-full h-full max-w-6xl hl-card flex flex-col overflow-hidden shadow-2xl">
@@ -45,7 +68,22 @@ export const AgyTerminalModal: React.FC = () => {
             </button>
           </div>
         </div>
-        <iframe src={url} title="AGY Cloud Workbench" className="w-full flex-1 bg-black border-0" />
+
+        {!authChecked ? (
+          <div className="flex-1 flex items-center justify-center text-xs font-mono-num" style={{ color: 'var(--text-muted)' }}>
+            正在校验 HomeLab SSO 通行证...
+          </div>
+        ) : !authenticated ? (
+          <div className="flex-1 flex items-center justify-center p-4" style={{ backgroundColor: 'var(--bg-page)' }}>
+            <AuthGateCard
+              targetUrl={url}
+              onSuccess={() => setAuthenticated(true)}
+              onCancel={() => setShowAgyModal(false)}
+            />
+          </div>
+        ) : (
+          <iframe src={url} title="AGY Cloud Workbench" className="w-full flex-1 bg-black border-0" />
+        )}
       </div>
     </div>
   );

stacks/portal/web/src/components/AuthGateModal.tsx

@@ -0,0 +1,200 @@
+import React, { useState } from 'react';
+import { Check, Eye, EyeOff, Lock, ShieldCheck, Terminal, User } from 'lucide-react';
+
+interface AuthGateCardProps {
+  targetUrl?: string;
+  onSuccess?: () => void;
+  onCancel?: () => void;
+  embedded?: boolean;
+}
+
+export const AuthGateCard: React.FC<AuthGateCardProps> = ({
+  targetUrl = 'https://agy.961504.xyz',
+  onSuccess,
+  onCancel,
+  embedded = false,
+}) => {
+  const [username, setUsername] = useState('ixvii0iv');
+  const [password, setPassword] = useState('');
+  const [showPass, setShowPass] = useState(false);
+  const [rememberMe, setRememberMe] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!username.trim() || !password) {
+      setErrorMsg('请输入用户名与访问密钥');
+      return;
+    }
+    setLoading(true);
+    setErrorMsg(null);
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ username: username.trim(), password, remember: rememberMe }),
+      });
+      const data = await res.json();
+      if (res.ok && data.ok) {
+        onSuccess?.();
+      } else {
+        setErrorMsg(data.message || '认证未通过，请检查密码');
+      }
+    } catch {
+      setErrorMsg('网络请求异常，请稍后重试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      className={`w-full max-w-md hl-card p-6 space-y-5 ${
+        embedded ? '' : 'shadow-2xl'
+      }`}
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between gap-3 border-b hl-border pb-4">
+        <div className="flex items-center gap-3">
+          <div
+            className="w-10 h-10 rounded-xl flex items-center justify-center border hl-border shrink-0"
+            style={{ backgroundColor: 'var(--accent-soft)', color: 'var(--accent)' }}
+          >
+            <ShieldCheck className="w-5 h-5" />
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <h3 className="text-sm font-bold tracking-tight">HomeLab 统一安全通行证</h3>
+              <span
+                className="text-[10px] font-mono-num px-1.5 py-0.5 rounded font-semibold"
+                style={{ backgroundColor: 'var(--success-soft)', color: 'var(--success)' }}
+              >
+                SSO 2.0
+              </span>
+            </div>
+            <p className="text-xs font-mono-num mt-0.5 truncate max-w-[260px]" style={{ color: 'var(--text-muted)' }}>
+              {targetUrl}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Form */}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1.5">
+          <label className="block text-xs font-semibold" style={{ color: 'var(--text-muted)' }}>
+            管理员账号 (Username)
+          </label>
+          <div className="hl-input-group">
+            <User className="w-4 h-4 shrink-0" style={{ color: 'var(--text-subtle)' }} />
+            <input
+              type="text"
+              autoComplete="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="输入管理员账号 (如 ixvii0iv)"
+              className="font-mono-num"
+            />
+          </div>
+        </div>
+
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between">
+            <label className="block text-xs font-semibold" style={{ color: 'var(--text-muted)' }}>
+              访问通行密钥 (Access Key)
+            </label>
+            <span className="text-[10px] font-mono-num" style={{ color: 'var(--text-subtle)' }}>
+              与 Mac mini 密码一致
+            </span>
+          </div>
+          <div className="hl-input-group">
+            <Lock className="w-4 h-4 shrink-0" style={{ color: 'var(--text-subtle)' }} />
+            <input
+              type={showPass ? 'text' : 'password'}
+              autoComplete="current-password"
+              autoFocus
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="输入访问密钥..."
+              className="font-mono-num"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPass(!showPass)}
+              className="p-1 rounded hover:opacity-80 cursor-pointer"
+              style={{ color: 'var(--text-muted)' }}
+              title={showPass ? '隐藏密码' : '显示密码'}
+            >
+              {showPass ? <EyeOff className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
+            </button>
+          </div>
+        </div>
+
+        {/* Custom Checkbox */}
+        <div className="flex items-center justify-between pt-0.5">
+          <button
+            type="button"
+            onClick={() => setRememberMe(!rememberMe)}
+            className="flex items-center gap-2 text-xs cursor-pointer select-none"
+            style={{ color: 'var(--text-muted)' }}
+          >
+            <span
+              className="w-4 h-4 rounded flex items-center justify-center border transition-colors"
+              style={
+                rememberMe
+                  ? {
+                      backgroundColor: 'var(--accent)',
+                      borderColor: 'var(--accent)',
+                      color: '#ffffff',
+                    }
+                  : {
+                      backgroundColor: 'var(--bg-muted)',
+                      borderColor: 'var(--border-color)',
+                    }
+              }
+            >
+              {rememberMe && <Check className="w-3 h-3" />}
+            </span>
+            <span>在此设备保持 30 天免密通行 (*.961504.xyz)</span>
+          </button>
+        </div>
+
+        {errorMsg && (
+          <div
+            className="px-3 py-2 rounded-lg text-xs font-medium border"
+            style={{
+              backgroundColor: 'rgba(239, 68, 68, 0.1)',
+              borderColor: 'rgba(239, 68, 68, 0.3)',
+              color: '#ef4444',
+            }}
+          >
+            {errorMsg}
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex items-center justify-end gap-2.5 pt-2">
+          {onCancel && (
+            <button
+              type="button"
+              onClick={onCancel}
+              className="hl-btn-outline px-4 py-2 text-xs font-medium cursor-pointer"
+            >
+              取消
+            </button>
+          )}
+          <button
+            type="submit"
+            disabled={loading}
+            className="hl-btn-primary px-5 py-2 text-xs font-semibold flex items-center gap-2 cursor-pointer"
+          >
+            <Terminal className="w-3.5 h-3.5" />
+            <span>{loading ? '正在验证签名...' : '解锁并进入工作台'}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};

stacks/portal/web/src/components/StorybookWorkbench.tsx

@@ -1,14 +1,30 @@
 import React, { useState } from 'react';
-import { BookOpen, Check, Layers, Layout, Palette, Sparkles, Terminal } from 'lucide-react';
+import {
+  BookOpen,
+  Check,
+  KeyRound,
+  Layers,
+  Layout,
+  Palette,
+  Search,
+  Sparkles,
+  Terminal,
+} from 'lucide-react';
 import { LAYOUT_PRESETS, THEME_PALETTES, type LayoutPresetId } from '../design-system/tokens';
 import { usePortalStore } from '../store/usePortalStore';
+import { AuthGateCard } from './AuthGateModal';
 import { ServiceCard } from './ServiceCard';
 import { SshShelf } from './SshShelf';
 
-type StoryId = 'layout-architecture' | 'theme-tokens' | 'service-card' | 'ssh-shelf';
+type StoryId =
+  | 'layout-architecture'
+  | 'theme-tokens'
+  | 'form-inputs'
+  | 'service-card'
+  | 'ssh-shelf';
 
 export const StorybookWorkbench: React.FC = () => {
-  const [activeStory, setActiveStory] = useState<StoryId>('layout-architecture');
+  const [activeStory, setActiveStory] = useState<StoryId>('form-inputs');
   const {
     theme,
     resolvedTheme,
@@ -17,12 +33,17 @@ export const StorybookWorkbench: React.FC = () => {
     setLayoutPreset,
     setViewMode,
     telemetry,
+    showToast,
   } = usePortalStore();
 
   // Interactive Playground Props for ServiceCard story
   const [demoOnline, setDemoOnline] = useState(true);
   const [demoAction, setDemoAction] = useState<'drawer' | 'backup' | undefined>('drawer');
 
+  // Interactive Playground Props for Form Inputs story
+  const [demoSearch, setDemoSearch] = useState('');
+  const [demoHost, setDemoHost] = useState('192.168.31.164');
+
   const stories: Array<{ id: StoryId; group: string; title: string; icon: React.ReactNode }> = [
     {
       id: 'layout-architecture',
@@ -36,16 +57,22 @@ export const StorybookWorkbench: React.FC = () => {
       title: '02. 双主题色板与自动切换规范',
       icon: <Palette className="w-3.5 h-3.5" />,
     },
+    {
+      id: 'form-inputs',
+      group: 'COMPONENTS / 核心组件',
+      title: '03. Input & AuthGate 输入框与登录弹窗',
+      icon: <KeyRound className="w-3.5 h-3.5" />,
+    },
     {
       id: 'service-card',
       group: 'COMPONENTS / 核心组件',
-      title: '03. ServiceCard 内联遥测卡片',
+      title: '04. ServiceCard 内联遥测卡片',
       icon: <Layers className="w-3.5 h-3.5" />,
     },
     {
       id: 'ssh-shelf',
       group: 'COMPONENTS / 核心组件',
-      title: '04. SshShelf 快捷指令栏',
+      title: '05. SshShelf 快捷指令栏',
       icon: <Terminal className="w-3.5 h-3.5" />,
     },
   ];
@@ -60,7 +87,7 @@ export const StorybookWorkbench: React.FC = () => {
               <BookOpen className="w-4 h-4" style={{ color: 'var(--accent)' }} />
               <span className="text-xs font-bold uppercase tracking-wider">Storybook 组件库</span>
             </div>
-            <span className="text-[10px] font-mono-num px-1.5 py-0.5 rounded hl-muted">v3.1</span>
+            <span className="text-[10px] font-mono-num px-1.5 py-0.5 rounded hl-muted">v3.2</span>
           </div>
 
           <div className="space-y-1">
@@ -295,7 +322,93 @@ export const StorybookWorkbench: React.FC = () => {
             </div>
           )}
 
-          {/* STORY 3: ServiceCard Interactive Playground */}
+          {/* STORY 3: Custom Form Inputs & AuthGate Card */}
+          {activeStory === 'form-inputs' && (
+            <div className="hl-card p-6 space-y-6">
+              <div className="border-b hl-border pb-4 flex items-center justify-between">
+                <div>
+                  <span
+                    className="text-[11px] font-mono-num uppercase tracking-wider"
+                    style={{ color: 'var(--accent)' }}
+                  >
+                    Components / Form Controls & SSO Auth Gate
+                  </span>
+                  <h2 className="text-lg font-bold mt-0.5">
+                    统一自定义输入框 (`.hl-input`) 与 SSO 认证卡片（彻底禁用浏览器原生弹窗）
+                  </h2>
+                </div>
+                <KeyRound className="w-4 h-4" style={{ color: 'var(--accent)' }} />
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
+                {/* Left: Input Primitives Showcase */}
+                <div className="p-5 rounded-xl hl-muted border hl-border space-y-4">
+                  <div className="text-xs font-bold uppercase tracking-wider" style={{ color: 'var(--text-muted)' }}>
+                    1. 基础表单输入组件规范 (`.hl-input` / `.hl-input-group`)
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <label className="block text-xs font-medium" style={{ color: 'var(--text-muted)' }}>
+                      带前缀图标与快捷键提示的搜索框
+                    </label>
+                    <div className="hl-input-group">
+                      <Search className="w-4 h-4 shrink-0" style={{ color: 'var(--text-subtle)' }} />
+                      <input
+                        type="text"
+                        value={demoSearch}
+                        onChange={(e) => setDemoSearch(e.target.value)}
+                        placeholder="搜索服务、SSH 指令或节点..."
+                      />
+                      <kbd
+                        className="px-1.5 py-0.5 text-[10px] font-mono-num rounded hl-card border hl-border"
+                        style={{ color: 'var(--text-muted)' }}
+                      >
+                        ⌘K
+                      </kbd>
+                    </div>
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <label className="block text-xs font-medium" style={{ color: 'var(--text-muted)' }}>
+                      等宽字体 IP / 域名输入框 (`.hl-input .font-mono-num`)
+                    </label>
+                    <input
+                      type="text"
+                      value={demoHost}
+                      onChange={(e) => setDemoHost(e.target.value)}
+                      className="hl-input font-mono-num"
+                      placeholder="192.168.31.164"
+                    />
+                  </div>
+
+                  <div className="p-3 rounded-lg hl-card text-[11px] leading-relaxed space-y-1" style={{ color: 'var(--text-muted)' }}>
+                    <div className="font-semibold" style={{ color: 'var(--text-main)' }}>
+                      为什么不再出现浏览器默认输入框和弹窗？
+                    </div>
+                    <p>
+                      1. 全局 CSS 已设置 <code>appearance: none</code> 与自定义聚焦光环{' '}
+                      <code>box-shadow: 0 0 0 3px var(--accent-soft)</code>，并覆盖了 Chrome 自动填充的黄色背景。
+                    </p>
+                    <p>
+                      2. Caddy 网关已移除 <code>basicauth</code>，改用 <code>forward_auth</code> 对接右侧的{' '}
+                      <strong>HomeLab SSO 2.0 统一认证卡片</strong>，一次登录全域名 30 天免密通行。
+                    </p>
+                  </div>
+                </div>
+
+                {/* Right: Live AuthGateCard Preview */}
+                <div className="flex flex-col items-center">
+                  <AuthGateCard
+                    embedded
+                    targetUrl="https://agy.961504.xyz"
+                    onSuccess={() => showToast('SSO 认证成功！已签发 30 天全域名通行 Cookie')}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* STORY 4: ServiceCard Interactive Playground */}
           {activeStory === 'service-card' && (
             <div className="hl-card p-6 space-y-6">
               <div className="border-b hl-border pb-4 flex items-center justify-between">
@@ -366,7 +479,7 @@ export const StorybookWorkbench: React.FC = () => {
             </div>
           )}
 
-          {/* STORY 4: SshShelf */}
+          {/* STORY 5: SshShelf */}
           {activeStory === 'ssh-shelf' && (
             <div className="hl-card p-6 space-y-6">
               <div className="border-b hl-border pb-4">