优化客户端登录界面视觉

登录检查、登录页和错误页统一使用陶泥儿产品形象与平台浅色主题。

优化登录卡片、输入控件、切换按钮及窄屏布局。

补充认证界面测试并同步更新客户端技术方案。

apps/ai-game-creator-shell/src/app/AuthenticatedClient.tsx

@@ -7,6 +7,7 @@ import {
   useState,
 } from 'react';
 
+import brandIcon from '../../../../packages/shared/src/icons/taonier-product-ip.png';
 import type { AuthUser } from '../../../../packages/shared/src/contracts/auth';
 import {
   clearStoredAuthAccessToken,
@@ -72,9 +73,12 @@ export class ClientRuntimeErrorBoundary extends Component<
       return this.props.children;
     }
     return (
-      <main className="client-auth-shell" aria-label="客户端页面加载失败">
+      <main
+        className="client-auth-shell platform-theme platform-theme--light"
+        aria-label="客户端页面加载失败"
+      >
         <section className="client-auth-panel">
-          <span className="client-auth-logo">tn</span>
+          <img className="client-auth-logo" src={brandIcon} alt="陶泥儿" />
           <div>
             <h1>客户端页面加载失败</h1>
             <p className="client-auth-status">{this.state.errorMessage}</p>
@@ -389,9 +393,12 @@ export function AuthenticatedClient({
 
   if (authStatus === 'checking') {
     return (
-      <main className="client-auth-shell" aria-label="登录状态检查">
+      <main
+        className="client-auth-shell platform-theme platform-theme--light"
+        aria-label="登录状态检查"
+      >
         <section className="client-auth-panel">
-          <span className="client-auth-logo">tn</span>
+          <img className="client-auth-logo" src={brandIcon} alt="陶泥儿" />
           <h1>正在检查登录状态</h1>
         </section>
       </main>
@@ -400,9 +407,12 @@ export function AuthenticatedClient({
 
   if (!authUser) {
     return (
-      <main className="client-auth-shell" aria-label="登录">
+      <main
+        className="client-auth-shell platform-theme platform-theme--light"
+        aria-label="登录"
+      >
         <form className="client-auth-panel" onSubmit={handleLoginSubmit}>
-          <span className="client-auth-logo">tn</span>
+          <img className="client-auth-logo" src={brandIcon} alt="陶泥儿" />
           <div>
             <h1>登录陶泥儿 GameAgent</h1>
             <p>登录后进入首页和本地项目工作区</p>

apps/ai-game-creator-shell/src/styles.css

@@ -123,50 +123,72 @@ textarea {
   display: grid;
   min-height: 100vh;
   padding: 24px;
-  background: #f8fafc;
-  color: #111827;
+  overflow: hidden;
+  background: var(--platform-body-fill);
+  color: var(--platform-text-strong);
   place-items: center;
 }
 
 .client-auth-panel {
+  position: relative;
   display: grid;
   width: min(360px, 100%);
   gap: 16px;
   padding: 28px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  background: #fff;
-  box-shadow: 0 18px 52px rgb(15 23 42 / 12%);
+  overflow: hidden;
+  border: 1px solid var(--platform-surface-border);
+  border-radius: 24px;
+  background: var(--platform-panel-fill);
+  box-shadow: var(--platform-panel-shadow);
+}
+
+.client-auth-panel::before {
+  position: absolute;
+  top: -94px;
+  right: -76px;
+  width: 204px;
+  height: 204px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    var(--platform-hero-glow-b),
+    transparent 68%
+  );
+  content: '';
+  pointer-events: none;
 }
 
 .client-auth-logo {
-  display: grid;
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  background: #101010;
-  color: #fff;
-  font-size: 12px;
-  font-weight: 800;
-  place-items: center;
+  position: relative;
+  z-index: 1;
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+  filter: drop-shadow(0 9px 15px rgb(182 98 63 / 18%));
 }
 
 .client-auth-panel h1 {
+  position: relative;
+  z-index: 1;
   margin: 0;
   font-size: 24px;
   letter-spacing: 0;
 }
 
 .client-auth-panel p {
+  position: relative;
+  z-index: 1;
   margin: 6px 0 0;
-  color: #6b7280;
+  color: var(--platform-text-soft);
   font-size: 13px;
 }
 
 .client-auth-panel label {
+  position: relative;
+  z-index: 1;
   display: grid;
   gap: 7px;
-  color: #374151;
+  color: var(--platform-text-base);
   font-size: 13px;
   font-weight: 700;
 }
@@ -175,42 +197,68 @@ textarea {
   height: 38px;
   min-width: 0;
   padding: 0 11px;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  background: #fff;
-  color: #111827;
+  border: 1px solid var(--platform-subpanel-border);
+  border-radius: 12px;
+  background: var(--platform-input-fill);
+  color: var(--platform-text-strong);
   font: inherit;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    background 160ms ease;
 }
 
 .client-auth-panel select {
   height: 38px;
   min-width: 0;
   padding: 0 11px;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  background: #fff;
-  color: #111827;
+  border: 1px solid var(--platform-subpanel-border);
+  border-radius: 12px;
+  background: var(--platform-input-fill);
+  color: var(--platform-text-strong);
   font: inherit;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    background 160ms ease;
 }
 
 .client-auth-panel select:focus {
-  border-color: #111827;
-  outline: 2px solid rgb(17 24 39 / 10%);
+  border-color: var(--platform-surface-hover-border);
+  outline: 2px solid var(--platform-input-focus-ring);
+  background: var(--platform-input-fill-focus);
 }
 
 .client-auth-panel input:focus {
-  border-color: #111827;
-  outline: 2px solid rgb(17 24 39 / 10%);
+  border-color: var(--platform-surface-hover-border);
+  outline: 2px solid var(--platform-input-focus-ring);
+  background: var(--platform-input-fill-focus);
 }
 
 .client-auth-panel button {
+  position: relative;
+  z-index: 1;
   height: 38px;
-  border: 0;
-  border-radius: 8px;
-  background: #111827;
-  color: #fff;
+  border: 1px solid var(--platform-button-primary-border);
+  border-radius: 12px;
+  background: var(--platform-button-primary-fill);
+  box-shadow: var(--platform-profile-action-shadow);
+  color: var(--platform-button-primary-text);
   font-weight: 700;
   cursor: pointer;
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    filter 160ms ease;
+}
+
+.client-auth-panel button:not(:disabled):hover {
+  filter: brightness(1.04);
+  transform: translateY(-1px);
+}
+
+.client-auth-panel button:not(:disabled):active {
+  transform: translateY(0);
 }
 
 .client-auth-panel button:disabled {
@@ -219,23 +267,29 @@ textarea {
 }
 
 .client-auth-tabs {
+  position: relative;
+  z-index: 1;
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 6px;
   padding: 4px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  background: #f8fafc;
+  border: 1px solid var(--platform-subpanel-border);
+  border-radius: 14px;
+  background: var(--platform-subpanel-fill);
 }
 
 .client-auth-tabs button {
+  border-color: transparent;
   background: transparent;
-  color: #4b5563;
+  box-shadow: none;
+  color: var(--platform-text-soft);
 }
 
 .client-auth-tabs button.is-active {
-  background: #111827;
-  color: #fff;
+  border-color: var(--platform-button-primary-border);
+  background: var(--platform-button-primary-fill);
+  box-shadow: 0 8px 18px rgb(182 98 63 / 18%);
+  color: var(--platform-button-primary-text);
 }
 
 .client-auth-code-row {
@@ -255,6 +309,17 @@ textarea {
   overflow-wrap: anywhere;
 }
 
+@media (max-width: 480px) {
+  .client-auth-shell {
+    padding: 16px;
+  }
+
+  .client-auth-panel {
+    padding: 24px;
+    border-radius: 20px;
+  }
+}
+
 .launcher-shell {
   --launcher-sidebar-width: 64px;
   display: grid;
@@ -1604,8 +1669,7 @@ textarea {
 .launcher-development-canvas {
   display: grid;
   min-height: 300px;
-  background:
-    linear-gradient(#f3f4f6 1px, transparent 1px),
+  background: linear-gradient(#f3f4f6 1px, transparent 1px),
     linear-gradient(90deg, #f3f4f6 1px, transparent 1px), #fff;
   background-size: 24px 24px;
   place-items: center;
@@ -2456,8 +2520,7 @@ textarea {
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  background:
-    linear-gradient(45deg, #101827 25%, transparent 25%),
+  background: linear-gradient(45deg, #101827 25%, transparent 25%),
     linear-gradient(-45deg, #101827 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, #101827 75%),
     linear-gradient(-45deg, transparent 75%, #101827 75%), #0b1220;
@@ -3032,28 +3095,24 @@ textarea {
 }
 
 .launcher-card-collage span:nth-child(1) {
-  background:
-    radial-gradient(circle at 45% 38%, #6b5c43 0 18%, transparent 19%),
+  background: radial-gradient(circle at 45% 38%, #6b5c43 0 18%, transparent 19%),
     radial-gradient(circle at 62% 54%, #2f2a23 0 25%, transparent 26%),
     linear-gradient(135deg, #91a17e, #2c3327);
 }
 
 .launcher-card-collage span:nth-child(2) {
-  background:
-    radial-gradient(circle at 58% 45%, #b28b5a 0 16%, transparent 17%),
+  background: radial-gradient(circle at 58% 45%, #b28b5a 0 16%, transparent 17%),
     radial-gradient(circle at 48% 55%, #302114 0 24%, transparent 25%),
     linear-gradient(135deg, #d9e8ef, #9fb0a0);
 }
 
 .launcher-card-collage span:nth-child(3) {
-  background:
-    radial-gradient(circle at 50% 54%, #eac9c0 0 22%, transparent 23%),
+  background: radial-gradient(circle at 50% 54%, #eac9c0 0 22%, transparent 23%),
     linear-gradient(135deg, #f7d9d5, #dab6aa);
 }
 
 .launcher-card-collage span:nth-child(4) {
-  background:
-    radial-gradient(circle at 56% 50%, #32271b 0 22%, transparent 23%),
+  background: radial-gradient(circle at 56% 50%, #32271b 0 22%, transparent 23%),
     linear-gradient(135deg, #8e6c4e, #2b211b);
 }
 
@@ -3077,8 +3136,12 @@ textarea {
 .launcher-card-pattern > div {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  background:
-    linear-gradient(45deg, transparent 46%, #fff 46% 54%, transparent 54%),
+  background: linear-gradient(
+      45deg,
+      transparent 46%,
+      #fff 46% 54%,
+      transparent 54%
+    ),
     linear-gradient(135deg, #55405a, #e4b2a7);
 }
 
@@ -5458,8 +5521,7 @@ iframe.preview-frame {
   .game-resource-card-visual,
 .game-resource-card[data-preview-kind='media-image'] .game-resource-card-visual,
 .game-resource-card[data-preview-kind='video'] .game-resource-card-visual {
-  background:
-    linear-gradient(45deg, #f1ebe7 25%, transparent 25%),
+  background: linear-gradient(45deg, #f1ebe7 25%, transparent 25%),
     linear-gradient(-45deg, #f1ebe7 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, #f1ebe7 75%),
     linear-gradient(-45deg, transparent 75%, #f1ebe7 75%), #faf7f5;

apps/ai-game-creator-shell/tests/appSurface/auth.suite.ts

@@ -35,6 +35,31 @@ export function registerAuthTests() {
     delete window.__TAURI__;
   });
 
+  it('renders the unauthenticated client with the shared light platform theme and product image', async () => {
+    vi.spyOn(globalThis, 'fetch').mockImplementation(
+      async (input: RequestInfo | URL) => {
+        if (String(input) === '/api/auth/refresh') {
+          return new Response('', { status: 401 });
+        }
+        throw new Error(`unexpected fetch ${String(input)}`);
+      },
+    );
+
+    render(
+      React.createElement(AuthenticatedClient, null, () =>
+        React.createElement('main', { 'aria-label': '已登录' }),
+      ),
+    );
+
+    const login = await screen.findByRole('main', { name: '登录' });
+    expect(login.className).toContain('platform-theme');
+    expect(login.className).toContain('platform-theme--light');
+    expect(screen.getByRole('img', { name: '陶泥儿' })).not.toBeNull();
+    expect(
+      screen.getByRole('heading', { name: '登录陶泥儿 GameAgent' }),
+    ).not.toBeNull();
+  });
+
   it('keeps the client at login when the native platform session cannot be installed', async () => {
     window.__TAURI__ = {
       core: {

docs/technical/【技术方案】AI游戏创作智能体App实施计划-2026-06-24.md

@@ -780,6 +780,7 @@ game-project/
 
 - `apps/ai-game-creator-shell` 是独立 Tauri App，不复用 `apps/desktop-shell`。
 - 独立客户端启动时先进入平台登录检查；未登录页默认展示手机号验证码登录，并保留密码登录切换。验证码登录调用平台后端 `/api/auth/phone/send-code` 与 `/api/auth/phone/login`，密码登录继续调用 `/api/auth/entry`；Tauri dev 下 `/api` 走本轮动态 AGC Vite 代理，普通发布版静态窗口下通过 Tauri 原生 HTTP transport 固定访问开发服务器 `https://dev.genarrative.world/api/*`，避开 WebView CORS 预检并持久化刷新 Cookie。原生 HTTP capability 只允许该 HTTPS origin 的 `/api/*`，客户端解析层也拒绝其它 release origin；game-chat release 继续不依赖平台登录和 `api-server`。网络层失败时展示登录服务不可达提示，不裸露 WebView 的 `Load failed`。
+- 登录检查、未登录和客户端页面加载失败三种认证外壳统一使用共享陶泥儿产品形象与平台浅色主题 token；登录卡片、输入框、方式切换和主按钮沿用平台暖色视觉，并在不超过 `480px` 的窄视口收紧留白。视觉优化不改变服务器选择、验证码、密码、登录态安装或错误恢复语义。
 - `npm run agc` 的本地 SpacetimeDB owner identity 以独立 `spacetimeDataDir` 为作用域，不绑定可能漂移的监听端口；旧端口作用域记录仅在同一 data dir 下身份唯一时自动迁移，出现多个不同旧身份时失败关闭。`.app/dev-stack.json` 必须记录规范化 `spacetimeDataDir`，独立壳只复用数据库名和该目录同时匹配且健康的后端，旧 schema 状态或共享目录状态缺少此字段时不得复用。POSIX 子进程在 `spawn` 返回时立即登记 `error / exit` 生命周期、保存 detached leader 的 PGID 并把句柄交给外层；即使 direct leader 已先退出，也必须继续向负 PGID 发信号清理同组后代。后端 ready 前的 SIGINT、SIGTERM、超时或 ENOENT 都必须走同一进程组清理链路，不能遗留 npm、Cargo 或 SpacetimeDB。非 Linux Runtime 执行 `project.verify` 时，`npm run` 参数校验必须允许受控的 `--silent`、`--ignore-scripts` 位于脚本名前，并继续拒绝缺少真实脚本名的调用。
 - Tauri Rust 入口保持薄壳：`src-tauri/src/main.rs` 只保留共享类型 / 常量、模块声明、CLI preflight、`tauri::Builder`、运行时配置初始化和 `invoke_handler` 清单；命令行入口放在 `cli.rs`，Tauri command 包装放在 `commands.rs`，运行时配置与 LLM 配置检查放在 `config.rs`，Agent loop 与生成编排放在 `agent.rs`，上传 / 画板 / 平台美术生成接入放在 `assets.rs`，本地项目文件、记忆、对话、权限、checkpoint、manifest 和通用路径工具放在 `project.rs`，本地 HTTP 预览与 preview 命令放在 `preview.rs`，旧窗口兼容命令放在 `windows.rs`，Rust 单测放在 `tests.rs`。后续继续拆分时保持 Tauri command 名、JSON 字段、`.agent/*` 路径和错误语义不变。
 - 本地项目初始化会创建 `game/`、`assets/`、`memory/`、`memory/agents/`、`exports/`、`.agent/logs/`，写入 `.agent/manifest.json`，生成 append-only JSONL 本地项目索引 `.agent/agent.db`，并生成默认 `game/index.html`。