From 61f5c545953bb4ee20b123bf9671ac35d7f1f3c1 Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Fri, 18 Sep 2026 12:03:32 +0800
Subject: [变更性质] feat(frontend) [新增功能] round3 页面组件全量迁移
 shadcn-svelte（12 页面 + Modal/DatasetWizard/DatasetCard/Status） [实现方案]
 .btn→Button、.banner→Alert、table.data→Table.Root、.badge→Badge、.tabs→Tabs.Root、.metric-card/form.card→Card.Root；ProjectStrategyTab
 div 配对修复 [影响范围] src/pages/*.svelte、src/components/*.svelte
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/AuthPages.svelte | 65 ++++++++++++++++++++-----------------
 1 file changed, 36 insertions(+), 29 deletions(-)

(limited to 'frontend/src/pages/AuthPages.svelte')

diff --git a/frontend/src/pages/AuthPages.svelte b/frontend/src/pages/AuthPages.svelte
index 7495d62..88ca07a 100644
--- a/frontend/src/pages/AuthPages.svelte
+++ b/frontend/src/pages/AuthPages.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
   import type { Route } from '../lib/router';
+  import { Button } from '$lib/components/ui/button';
+  import { Input } from '$lib/components/ui/input';
+  import { Label } from '$lib/components/ui/label';
+  import { Alert } from '$lib/components/ui/alert';
+  import * as Card from '$lib/components/ui/card';
+  import { Separator } from '$lib/components/ui/separator';
+
   import { session } from '../lib/session.svelte';
   import { go } from '../lib/router';
   import { postLogin, postRegister, postResetPassword } from '../lib/client';
@@ -86,7 +93,7 @@
 </script>
 
 <section class="auth-wrap">
-  <div class="auth-card card" role="main">
+  <Card.Root class="auth-card" role="main">
     <div class="auth-brand">
       <span class="mark" aria-hidden="true"></span>
       <h1>策研 <span class="sub">Strategy Lab</span></h1>
@@ -96,63 +103,63 @@
     {#if mode === 'register'}
       <form onsubmit={register}>
         <div>
-          <label for="inv">邀请令牌</label>
-          <input id="inv" bind:value={inviteToken} required autocomplete="off" />
+          <Label for="inv">邀请令牌</Label>
+          <Input id="inv" bind:value={inviteToken} required autocomplete="off" />
           <p class="hint">单次有效，来自管理员邀请</p>
         </div>
         <div>
-          <label for="nm">姓名</label>
-          <input id="nm" bind:value={name} required autocomplete="name" />
+          <Label for="nm">姓名</Label>
+          <Input id="nm" bind:value={name} required autocomplete="name" />
         </div>
         <div>
-          <label for="em">邮箱</label>
-          <input id="em" type="email" bind:value={email} required autocomplete="email" />
+          <Label for="em">邮箱</Label>
+          <Input id="em" type="email" bind:value={email} required autocomplete="email" />
         </div>
         <div>
-          <label for="pw">密码</label>
-          <input id="pw" type="password" bind:value={password} required autocomplete="new-password" minlength={8} />
+          <Label for="pw">密码</Label>
+          <Input id="pw" type="password" bind:value={password} required autocomplete="new-password" minlength={8} />
           <div class="hint">至少 8 位</div>
         </div>
-        {#if resultError}<div class="banner error" role="alert">{resultError}</div>{/if}
-        <button type="submit" class="btn primary" disabled={busy}>{busy ? '创建中…' : '开通账户'}</button>
+        {#if resultError}<Alert variant="destructive" class="bg-[var(--danger-soft)] border-[#f2c7c7]">{resultError}</Alert>{/if}
+        <Button type="submit" disabled={busy}>{busy ? '创建中…' : '开通账户'}</Button>
         <p class="hint">已有账户？ <a href="#/login">登录</a></p>
       </form>
     {:else if mode === 'reset'}
       {#if done}
-        <div class="banner info">{done}</div>
+        <Alert class="bg-[var(--brand-soft)] border-[#bfe9db]">{done}</Alert>
         <p><a href="#/login">前往登录</a></p>
       {:else}
         <form onsubmit={reset}>
           <div>
-            <label for="rt">重置令牌</label>
-            <input id="rt" bind:value={resetToken} autocomplete="off" />
+            <Label for="rt">重置令牌</Label>
+            <Input id="rt" bind:value={resetToken} autocomplete="off" />
             <p class="hint">由管理员线下发放的恢复链接自动填入；不支持邮箱自动发送</p>
           </div>
           <div>
-            <label for="np">新密码</label>
-            <input id="np" type="password" bind:value={newPassword} required autocomplete="new-password" minlength={8} />
+            <Label for="np">新密码</Label>
+            <Input id="np" type="password" bind:value={newPassword} required autocomplete="new-password" minlength={8} />
           </div>
           <div>
-            <label for="np2">再输入一次新密码</label>
-            <input id="np2" type="password" bind:value={pw2} required autocomplete="new-password" minlength={8} />
+            <Label for="np2">再输入一次新密码</Label>
+            <Input id="np2" type="password" bind:value={pw2} required autocomplete="new-password" minlength={8} />
           </div>
-          {#if resultError}<div class="banner error" role="alert">{resultError}</div>{/if}
-          <button type="submit" class="btn primary" disabled={busy}>{busy ? '重置中…' : '重置密码'}</button>
+          {#if resultError}<Alert variant="destructive" class="bg-[var(--danger-soft)] border-[#f2c7c7]">{resultError}</Alert>{/if}
+          <Button type="submit" disabled={busy}>{busy ? '重置中…' : '重置密码'}</Button>
           <p class="hint">想起密码了？ <a href="#/login">直接登录</a></p>
         </form>
       {/if}
     {:else}
       <form onsubmit={login}>
         <div>
-          <label for="le">邮箱</label>
-          <input id="le" type="email" bind:value={email} required autocomplete="email" />
+          <Label for="le">邮箱</Label>
+          <Input id="le" type="email" bind:value={email} required autocomplete="email" />
         </div>
         <div>
-          <label for="lp">密码</label>
-          <input id="lp" type="password" bind:value={password} required autocomplete="current-password" />
+          <Label for="lp">密码</Label>
+          <Input id="lp" type="password" bind:value={password} required autocomplete="current-password" />
         </div>
-        {#if resultError}<div class="banner error" role="alert">{resultError}</div>{/if}
-        <button type="submit" class="btn primary" disabled={busy}>{busy ? '登录中…' : '登录'}</button>
+        {#if resultError}<Alert variant="destructive" class="bg-[var(--danger-soft)] border-[#f2c7c7]">{resultError}</Alert>{/if}
+        <Button type="submit" disabled={busy}>{busy ? '登录中…' : '登录'}</Button>
         <p class="hint">
           开通新账户需要管理员邀请： <a href="#/register">用邀请令牌注册</a>
           {#if route.query.get('invite')}<span>（邀请令牌已自动填入）</span>{/if}
@@ -160,7 +167,7 @@
         <p class="hint">忘记密码？请联系管理员获取 <a href="#/reset">恢复链接</a></p>
       </form>
     {/if}
-  </div>
+  </Card.Root>
 </section>
 
 <style>
@@ -178,10 +185,10 @@
       radial-gradient(700px 350px at 85% -60px, rgba(13, 148, 136, 0.08), transparent),
       var(--bg);
   }
-  .auth-card { width: min(400px, 100%); padding: 2rem 1.75rem 1.8rem; }
+  :global(.auth-card) { width: min(400px, 100%); padding: 2rem 1.75rem 1.8rem; }
   /* round2 登录页留白重排：标题区与表单拉开，卡片下缘留呼吸感 */
   @media (min-width: 768px) {
-    .auth-card { padding: 2.4rem 2.2rem 2.1rem; }
+    :global(.auth-card) { padding: 2.4rem 2.2rem 2.1rem; }
   }
   .auth-brand { margin-bottom: 1.35rem; }
   .auth-brand h1 { margin-bottom: 0.3rem; }
-- 
cgit v1.2.3