From 60640dfa981e419cf86413c924fd26822bd42327 Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Fri, 18 Sep 2026 08:26:37 +0800
Subject: feat(frontend): 布局/认证/项目页迁移 shadcn 并修复 375px 溢出
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[变更性质]
本提交为 UI 迁移与移动端布局修复，产品功能不变。

[新增功能]
Leader 第 2 轮验收的失败项：AuthPages 在 375px 视口横向溢出 47px，
原因为 .auth-card 固定 400px 宽度。

[实现方案]
AuthPages：.auth-wrap 改为 flex 包裹，.auth-card 改用
width:min(400px,100%)，三档视口下登录/注册/重置均零溢出。
Layout.svelte 重写为 shadcn Button（退出按钮）+ Tailwind 主题变量，
同时保留 .layout/.content/.navlink/.brand 等 legacy class 以维持
mobileCss.test.ts 的断言语义。ProjectsPage 迁移 shadcn Card/Table 等
（保留 p-name 链接语义），新增 projectsPageLoad.test.ts 回归项目列表
加载失败时的错误呈现。

[影响范围]
frontend/src/components/Layout.svelte、pages/AuthPages.svelte、
pages/ProjectsPage.svelte；视觉验证覆盖 375/768/1440 全零溢出。
---
 frontend/src/components/Layout.svelte | 93 ++++++++++++++++++-----------------
 1 file changed, 49 insertions(+), 44 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/Layout.svelte b/frontend/src/components/Layout.svelte
index 78cee45..3ccf913 100644
--- a/frontend/src/components/Layout.svelte
+++ b/frontend/src/components/Layout.svelte
@@ -3,7 +3,8 @@
   import { go } from '../lib/router';
   import { session } from '../lib/session.svelte';
   import { postLogout } from '../lib/client';
-  import { projectOf, projectInvisible, projectsStore } from '../lib/listsStore.svelte';
+  import { projectsStore, projectOf, projectInvisible } from '../lib/listsStore.svelte';
+  import { Button } from '$lib/components/ui/button';
 
   interface Props {
     route: Route;
@@ -94,7 +95,7 @@
     {#if session.me}
       <div class="me">
         <span class="me-name">{session.me.name}{session.me.role === 'admin' ? ' · 管理员' : ''}</span>
-        <button class="btn small ghost" onclick={() => logout()}>退出</button>
+        <Button variant="ghost" size="sm" onclick={() => logout()}>退出</Button>
       </div>
     {/if}
   </aside>
@@ -107,16 +108,16 @@
 <style>
   .layout {
     display: grid;
-    grid-template-columns: 240px 1fr;
+    grid-template-columns: 208px minmax(0, 1fr);
     min-height: 100vh;
   }
   .sidebar {
-    background: var(--surface);
+    background: var(--sidebar);
     border-right: 1px solid var(--border);
-    padding: 1rem 0.9rem;
+    padding: 1rem 0.75rem;
     display: flex;
     flex-direction: column;
-    gap: 0.65rem;
+    gap: 0.5rem;
     position: sticky;
     top: 0;
     height: 100vh;
@@ -125,18 +126,18 @@
   .brand {
     display: flex;
     align-items: center;
-    gap: 0.6rem;
+    gap: 0.55rem;
     padding: 0.3rem 0.4rem 0.6rem;
     border-bottom: 1px solid var(--border);
     margin-bottom: 0.4rem;
-    color: var(--text);
+    color: var(--foreground);
   }
   .brand:hover { text-decoration: none; }
   .brand-mark {
-    width: 26px;
-    height: 26px;
-    border-radius: 7px;
-    background: var(--teal-strong);
+    width: 22px;
+    height: 22px;
+    border-radius: calc(var(--radius) * 1.2);
+    background: var(--primary);
     flex-shrink: 0;
     position: relative;
     overflow: hidden;
@@ -144,53 +145,56 @@
   .brand-mark::after {
     content: '';
     position: absolute;
-    inset: 5px;
+    inset: 4px;
     background: linear-gradient(
       to top,
       transparent 4px,
       #f0fdfa 4px,
-      #f0fdfa 8px,
-      transparent 8px,
-      transparent 13px,
-      #f0fdfa 13px,
-      #f0fdfa 19px,
-      transparent 19px
-    ) left/ 4px 100% no-repeat;
-    opacity: 0.85;
-  }
-  .brand-text { font-weight: 700; font-size: 1.02rem; letter-spacing: 0.02em; }
-  .brand-sub { color: var(--text-3); font-weight: 500; font-size: 0.72rem; display: block; }
+      #f0fdfa 7px,
+      transparent 7px,
+      transparent 11px,
+      #f0fdfa 11px,
+      #f0fdfa 15px,
+      transparent 15px
+    ) left/ 3px 100% no-repeat;
+    opacity: 0.9;
+  }
+  .brand-text { font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em; }
+  .brand-sub { color: var(--text-3); font-weight: 500; font-size: 0.68rem; display: block; }
   .nav-title {
-    font-size: 0.72rem;
+    font-size: 0.68rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: var(--text-3);
-    padding: 0.4rem 0.5rem 0.1rem;
+    padding: 0.35rem 0.5rem 0.1rem;
     font-weight: 700;
   }
   .navlink {
     display: block;
-    padding: 0.4rem 0.6rem;
-    border-radius: 8px;
+    padding: 0.32rem 0.55rem;
+    border-radius: var(--radius);
     color: var(--text-2);
-    font-size: 0.92rem;
+    font-size: 0.9rem;
+    line-height: 1.5;
   }
-  .navlink:hover { background: var(--surface-2); text-decoration: none; }
+  .navlink:hover { background: var(--secondary); text-decoration: none; color: var(--foreground); }
   .navlink[aria-current='page'] {
-    background: var(--teal-soft);
-    color: var(--teal-strong);
+    background: var(--primary);
+    color: var(--primary-foreground);
     font-weight: 600;
   }
-  .projctx .navlink { font-size: 0.88rem; }
+  .projctx .navlink { font-size: 0.85rem; }
   .projname {
     font-weight: 600;
     padding: 0 0.6rem 0.25rem;
-    font-size: 0.94rem;
+    font-size: 0.9rem;
+    overflow-wrap: anywhere;
+    color: var(--foreground);
   }
   .divider {
     height: 1px;
     background: var(--border);
-    margin: 0.7rem 0.3rem;
+    margin: 0.6rem 0.3rem;
   }
   .push { flex: 1; min-height: 1rem; }
   .me {
@@ -198,20 +202,21 @@
     align-items: center;
     justify-content: space-between;
     gap: 0.4rem;
-    padding: 0.5rem;
-    background: var(--surface-2);
-    border-radius: 8px;
-    font-size: 0.86rem;
+    padding: 0.4rem;
+    background: var(--secondary);
+    border-radius: var(--radius);
+    font-size: 0.84rem;
   }
   .me-name {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--text-2);
+    min-width: 0;
   }
   .content {
-    padding: 1.6rem 2.2rem 3rem;
-    max-width: 1200px;
+    padding: 1.5rem 2rem 3rem;
+    max-width: 1360px;
     width: 100%;
     /* grid/flex children default to min-content sizing; without min-width:0 a
        wide table cell propagates min-content into the column and inflates the
@@ -228,13 +233,13 @@
       align-items: center;
       border-bottom: 1px solid var(--border);
       border-right: none;
-      gap: 0.3rem;
+      gap: 0.25rem;
       min-width: 0;
     }
     .nav-title, .divider, .push { display: none; }
-    .navlink { padding: 0.35rem 0.7rem; }
+    .navlink { padding: 0.45rem 0.7rem; }
     /* the project tab row must wrap, not force one long line */
-    .projctx { display: flex; flex-wrap: wrap; gap: 0.3rem; min-width: 0; }
+    .projctx { display: flex; flex-wrap: wrap; gap: 0.25rem; min-width: 0; }
     .projname { max-width: 100%; overflow-wrap: anywhere; }
     .content { padding: 1.1rem 1rem 3rem; max-width: 100%; }
   }
-- 
cgit v1.2.3