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/lib/projectsPageLoad.test.ts | 46 +++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 frontend/src/lib/projectsPageLoad.test.ts

(limited to 'frontend/src/lib')

diff --git a/frontend/src/lib/projectsPageLoad.test.ts b/frontend/src/lib/projectsPageLoad.test.ts
new file mode 100644
index 0000000..baf1cee
--- /dev/null
+++ b/frontend/src/lib/projectsPageLoad.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor, cleanup } from '@testing-library/svelte';
+
+vi.mock('../lib/client', () => {
+  const real = vi.importActual<typeof import('../lib/client')>('../lib/client');
+  return { ...real, listProjects: vi.fn() };
+});
+
+import ProjectsPage from '../pages/ProjectsPage.svelte';
+import { listProjects } from '../lib/client';
+import type { Project } from '../lib/types';
+
+function project(i: number): Project {
+  return {
+    id: `p${i}`,
+    name: `项目${i}`,
+    description: null,
+    draft_code: '',
+    draft_generation: 0,
+    created_at: '2026-09-17T01:00:00Z',
+    updated_at: '2026-09-17T01:00:00Z'
+  };
+}
+
+beforeEach(() => {
+  vi.mocked(listProjects).mockReset();
+});
+
+afterEach(() => cleanup());
+
+describe('projects page loads the list (159399 QA regression: load() existed but was wired nowhere, UI always showed 还没有项目)', () => {
+  it('listProjects is called on mount and existing rows render', async () => {
+    vi.mocked(listProjects).mockResolvedValue({ items: [project(1), project(2)] });
+    render(ProjectsPage);
+    await waitFor(() => expect(listProjects).toHaveBeenCalled());
+    await screen.findByText('项目1');
+    await screen.findByText('项目2');
+    expect(screen.queryByText('还没有项目')).toBeNull();
+  });
+
+  it('load failure is surfaced as a visible error, not an empty "no projects" state', async () => {
+    vi.mocked(listProjects).mockRejectedValue(new Error('HTTP500: server unavailable'));
+    render(ProjectsPage);
+    await screen.findByText(/server unavailable/);
+  });
+});
-- 
cgit v1.2.3