From a7aab01f051487327e5ce52b6a8905208c546e8c Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Fri, 18 Sep 2026 15:49:44 +0800
Subject: [变更性质] feat(frontend) [新增功能] 12 页面组件全量
 shadcn：Card/Button/Table/Tabs/Select/Alert；375 底部 Tab Bar 改用 Tabs
 组件实现 [实现方案] 页面级手写 class
 全部移除（.btn/.banner/table.data/.badge/.tabs/.metric-row/.m-tile/.hint
 等改为 shadcn + tailwind
 工具类）；Modal/DatasetWizard/DatasetCard/DiffView/CodeEditor/Status/Layout
 同步 [影响范围] src/pages/*.svelte、src/components/*.svelte
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/AccountPage.svelte | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

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

diff --git a/frontend/src/pages/AccountPage.svelte b/frontend/src/pages/AccountPage.svelte
index 9e90e78..c85dc53 100644
--- a/frontend/src/pages/AccountPage.svelte
+++ b/frontend/src/pages/AccountPage.svelte
@@ -104,11 +104,11 @@
 </script>
 
 <Page title="账户与安全" subtitle="资料、密码与个人会话管理">
-  <div class="stack">
-    <Card.Root size="sm" >
+  <div class="flex flex-col gap-3">
+    <Card.Root size="sm">
       <Card.Header><Card.Title>个人信息</Card.Title></Card.Header>
-      <form onsubmit={saveProfile} class="row">
-        <div style="flex:1 1 200px">
+      <form onsubmit={saveProfile} class="flex flex-wrap items-center gap-3">
+        <div class="flex-[1_1_200px]">
           <Label for="acc-name">姓名</Label>
           <Input id="acc-name" bind:value={nameInput} autocomplete="name" />
         </div>
@@ -127,10 +127,10 @@
       <Status busy={false} error={profileErr} empty={profileOk} />
     </Card.Root>
 
-    <Card.Root size="sm" >
+    <Card.Root size="sm">
       <Card.Header><Card.Title>修改密码</Card.Title></Card.Header>
-      <form onsubmit={changePassword} class="stack">
-        <div class="grid3 wrap-3">
+      <form onsubmit={changePassword} class="flex flex-col gap-3">
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
           <div>
             <Label for="pw-cur">当前密码</Label>
             <Input id="pw-cur" type="password" bind:value={curPw} required autocomplete="current-password" />
@@ -144,7 +144,7 @@
             <Input id="pw-new2" type="password" bind:value={newPw2} required autocomplete="new-password" minlength={8} />
           </div>
         </div>
-        <div class="row">
+        <div>
           <Button type="submit" disabled={pwBusy}>
             {pwBusy ? '更新中…' : '更新密码'}
           </Button>
@@ -153,7 +153,7 @@
       </form>
     </Card.Root>
 
-    <Card.Root size="sm" >
+    <Card.Root size="sm">
       <Card.Header><Card.Title>登录会话</Card.Title></Card.Header>
       <Status busy={sessBusy} error={sessErr} busyText="载入会话…" empty={null} />
       {#if !sessBusy && !sessErr && sessions.length === 0}
@@ -174,9 +174,9 @@
               <Table.Row>
                 <Table.Cell>{fmtDateTime(s.created_at)}</Table.Cell>
                 <Table.Cell>{fmtDateTime(s.last_seen_at)}</Table.Cell>
-                <Table.Cell class="hint">{s.user_agent?.slice(0, 60) ?? '—'}</Table.Cell>
+                <Table.Cell class="text-sm text-muted-foreground">{s.user_agent?.slice(0, 60) ?? '—'}</Table.Cell>
                 <Table.Cell>
-                  <div class="row">
+                  <div class="flex items-center gap-2 flex-wrap">
                     {#if s.current}<Badge variant="secondary">当前会话</Badge>{/if}
                     <Button variant="outline" size="sm" class="text-destructive" disabled={s.current && sessions.length === 1} onclick={() => void revoke(s)}>
                       {s.current ? '注销当前' : '撤销'}
@@ -189,7 +189,7 @@
         </Table.Root>
       {/if}
       <Status busy={false} error={null} empty={sessMsg} />
-      <p class="hint">更改密码或被管理员停用时，其他会话将自动失效。</p>
+      <p class="text-sm text-muted-foreground">更改密码或被管理员停用时，其他会话将自动失效。</p>
     </Card.Root>
   </div>
 </Page>
\ No newline at end of file
-- 
cgit v1.2.3