Merge pull request #7 from Yaosanqi137/feature/p2-web-shell-auth

Feature/p2 web shell auth

README.md

@@ -72,7 +72,7 @@
 > 状态说明：`[x]` 已完成，`[ ]` 进行中/未开始（请随开发进度更新）
 
 | 顺序 | 功能实现项（用户视角）             | 你会看到的效果                          | 状态 |
-|---|---|---|---|
+| ---- | ---------------------------------- | --------------------------------------- | ---- |
 | 1    | 明确产品能力与交互流程             | 确认 TodoList 的核心使用方式与页面路径  | [x]  |
 | 2    | 实现基础登录（邮箱验证码）         | 可以注册/登录并进入主页面               | [ ]  |
 | 3    | 实现任务基础能力（增删改查）       | 可以创建、编辑、删除、完成任务          | [ ]  |
@@ -151,6 +151,97 @@ TodoList/
 
 ---
 
+## 部署与使用
+
+### 1. 环境要求
+
+- Node.js `20.x`
+- pnpm `9.15.2`
+- PostgreSQL `14+`（本地或远程都可）
+- 可选：MinIO / S3（附件上传功能使用）
+
+### 2. 安装依赖
+
+```bash
+pnpm install
+```
+
+### 3. 后端环境变量配置
+
+1. 复制环境变量示例文件：
+
+```bash
+cp apps/api/.env.example apps/api/.env
+# PowerShell:
+# Copy-Item apps/api/.env.example apps/api/.env
+```
+
+2. 至少修改以下配置：
+
+- `DATABASE_URL`：你的 PostgreSQL 连接串
+- `AUTH_ACCESS_SECRET`：生产环境请改为高强度随机值
+- `MAIL_SMTP_*`：邮件服务器配置（验证码/提醒邮件）
+- `OAUTH_*`：第三方登录配置（未接入可先保留示例值）
+- `S3_*`：对象存储配置（未启用附件可后续再配）
+
+### 4. 初始化数据库
+
+```bash
+pnpm --filter @todolist/api exec prisma db push
+```
+
+### 5. 本地开发启动
+
+1. 启动后端（默认端口 `3000`）：
+
+```bash
+pnpm --filter @todolist/api start:dev
+```
+
+2. 启动前端（默认端口 `5173`）：
+
+```bash
+pnpm --filter web dev
+```
+
+3. 若前端需连接非默认后端地址，可设置：
+
+```bash
+VITE_API_BASE_URL=http://localhost:3000
+```
+
+### 6. 生产构建与运行
+
+1. 构建：
+
+```bash
+pnpm run build
+```
+
+2. 运行 API（需先构建）：
+
+```bash
+pnpm --filter @todolist/api start
+```
+
+3. 发布 Web：
+
+- `apps/web/dist` 为静态资源产物，建议使用 Nginx/静态托管服务发布。
+
+### 7. CI/CD 说明（当前仓库）
+
+- PR 质量检查：`.github/workflows/pr-quality.yml`
+- Web 部署模板：`.github/workflows/deploy-web.yml`
+- Admin 部署模板：`.github/workflows/deploy-admin.yml`
+- API 镜像构建：`.github/workflows/api-docker-image.yml`
+
+说明：
+
+- Web/Admin 工作流通过 Webhook 触发真实部署，需在仓库 Secrets 配置：
+  - `WEB_DEPLOY_WEBHOOK_URL`
+  - `ADMIN_DEPLOY_WEBHOOK_URL`
+- API 镜像工作流仅在存在 `apps/api/Dockerfile` 时执行镜像构建与推送。
+
 ## License
 
 本项目遵循 [GNUv3](./LICENSE)。

apps/api/.env.example

@@ -1,27 +1,65 @@
+# -----------------------------------------------------------------------------
+# TodoList API 环境变量示例
+# 用法：
+# 1) 复制为 apps/api/.env
+# 2) 按实际环境替换值（尤其是密钥、密码、令牌）
+# -----------------------------------------------------------------------------
+
+# [数据库] PostgreSQL 连接串
+# 格式：postgresql://<user>:<password>@<host>:<port>/<db>?schema=public
 DATABASE_URL="postgresql://postgres:postgres@localhost:5432/todolist?schema=public"
+
+# [鉴权] Access Token 签名密钥（生产环境必须使用高强度随机值）
 AUTH_ACCESS_SECRET="dev-access-secret"
+# [鉴权] Access Token 有效期（秒），默认 15 分钟
 AUTH_ACCESS_EXPIRES_IN_SECONDS="900"
+# [鉴权] Refresh Token 有效期（秒），默认 30 天
 AUTH_REFRESH_EXPIRES_IN_SECONDS="2592000"
+# [鉴权] 邮箱验证码有效期（秒），默认 5 分钟
 AUTH_EMAIL_CODE_TTL_SECONDS="300"
+# [2FA] TOTP 签发方名称（会显示在验证器 App 中）
 AUTH_TOTP_ISSUER="TodoList"
+
+# [OAuth - GitHub] 第三方登录配置
 OAUTH_GITHUB_CLIENT_ID="github-client-id"
 OAUTH_GITHUB_CLIENT_SECRET="github-client-secret"
 OAUTH_GITHUB_CALLBACK_URL="http://localhost:3000/auth/oauth/github/callback"
+
+# [OAuth - QQ] 第三方登录配置
 OAUTH_QQ_CLIENT_ID="qq-client-id"
 OAUTH_QQ_CLIENT_SECRET="qq-client-secret"
 OAUTH_QQ_CALLBACK_URL="http://localhost:3000/auth/oauth/qq/callback"
 OAUTH_QQ_AUTH_URL="https://graph.qq.com/oauth2.0/authorize"
 OAUTH_QQ_TOKEN_URL="https://graph.qq.com/oauth2.0/token"
+
+# [OAuth - 微信] 第三方登录配置
 OAUTH_WECHAT_CLIENT_ID="wechat-client-id"
 OAUTH_WECHAT_CLIENT_SECRET="wechat-client-secret"
 OAUTH_WECHAT_CALLBACK_URL="http://localhost:3000/auth/oauth/wechat/callback"
 OAUTH_WECHAT_AUTH_URL="https://open.weixin.qq.com/connect/qrconnect"
 OAUTH_WECHAT_TOKEN_URL="https://api.weixin.qq.com/sns/oauth2/access_token"
+
+# [对象存储] S3/MinIO 配置（附件上传）
+# 本地开发可使用 MinIO，生产可切换到云厂商 S3 兼容服务
 S3_ENDPOINT="http://127.0.0.1:9000"
 S3_REGION="us-east-1"
 S3_BUCKET="todolist"
 S3_ACCESS_KEY_ID="minioadmin"
 S3_SECRET_ACCESS_KEY="minioadmin"
+# MinIO 常用 true；AWS S3 常用 false
 S3_FORCE_PATH_STYLE="true"
+# 预签名上传 URL 的有效期（秒）
 S3_PRESIGN_EXPIRES_SECONDS="900"
+# 对外访问附件的基础地址（用于拼接公开 URL）
 S3_PUBLIC_BASE_URL="http://127.0.0.1:9000"
+
+# [邮件] SMTP 配置（验证码/DDL 提醒邮件）
+MAIL_SMTP_HOST="smtp.example.com"
+MAIL_SMTP_PORT="465"
+# 465 通常为 true（SSL），587 通常为 false（STARTTLS）
+MAIL_SMTP_SECURE="true"
+MAIL_SMTP_USER="no-reply@example.com"
+MAIL_SMTP_PASS="replace-with-smtp-password"
+# 发件人显示名称与地址
+MAIL_FROM_NAME="TodoList"
+MAIL_FROM_ADDRESS="no-reply@example.com"

apps/api/package.json

@@ -20,6 +20,7 @@
     "@nestjs/testing": "^11.1.18",
     "@types/jest": "^30.0.0",
     "@types/node": "^25.5.2",
+    "@types/nodemailer": "^8.0.0",
     "@types/passport-github2": "^1.2.9",
     "@types/passport-oauth2": "^1.8.0",
     "@types/supertest": "^7.2.0",
@@ -47,6 +48,7 @@
     "@prisma/client": "^7.6.0",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.15.1",
+    "nodemailer": "^8.0.4",
     "otplib": "^13.4.0",
     "passport": "^0.7.0",
     "passport-github2": "^0.1.12",

apps/api/src/auth/auth-mail.service.ts

@@ -0,0 +1,131 @@
+import {
+  Injectable,
+  InternalServerErrorException,
+  Logger,
+  ServiceUnavailableException
+} from "@nestjs/common";
+import { ConfigService } from "@nestjs/config";
+import { createTransport, type Transporter } from "nodemailer";
+
+type MailRuntimeConfig = {
+  host: string;
+  port: number;
+  secure: boolean;
+  user: string;
+  pass: string;
+  fromName: string;
+  fromAddress: string;
+};
+
+@Injectable()
+export class AuthMailService {
+  private readonly logger = new Logger(AuthMailService.name);
+  private cachedConfig: MailRuntimeConfig | null = null;
+  private transporter: Transporter | null = null;
+
+  constructor(private readonly configService: ConfigService) {}
+
+  async sendLoginCode(email: string, code: string, ttlSeconds: number): Promise<void> {
+    const config = this.getRuntimeConfig();
+    const transporter = this.getTransporter(config);
+
+    try {
+      await transporter.sendMail({
+        from: this.resolveFromField(config),
+        to: email,
+        subject: "TodoList 登录验证码",
+        text: `你的验证码是 ${code}，${ttlSeconds} 秒内有效。`,
+        html: `<p>你的验证码是 <strong>${code}</strong>，${ttlSeconds} 秒内有效。</p>`
+      });
+    } catch (error) {
+      this.logger.error(
+        `验证码邮件发送失败: ${email}`,
+        error instanceof Error ? error.stack : undefined
+      );
+      throw new ServiceUnavailableException("验证码邮件发送失败，请稍后重试");
+    }
+  }
+
+  private getTransporter(config: MailRuntimeConfig): Transporter {
+    if (this.transporter) {
+      return this.transporter;
+    }
+
+    this.transporter = createTransport({
+      host: config.host,
+      port: config.port,
+      secure: config.secure,
+      auth: {
+        user: config.user,
+        pass: config.pass
+      }
+    });
+
+    return this.transporter;
+  }
+
+  private getRuntimeConfig(): MailRuntimeConfig {
+    if (this.cachedConfig) {
+      return this.cachedConfig;
+    }
+
+    const host = this.getRequiredString("MAIL_SMTP_HOST");
+    const port = this.getRequiredNumber("MAIL_SMTP_PORT");
+    const secure = this.getBoolean("MAIL_SMTP_SECURE", port === 465);
+    const user = this.getRequiredString("MAIL_SMTP_USER");
+    const pass = this.getRequiredString("MAIL_SMTP_PASS");
+    const fromName = this.configService.get<string>("MAIL_FROM_NAME")?.trim() || "TodoList";
+    const fromAddress = this.configService.get<string>("MAIL_FROM_ADDRESS")?.trim() || user;
+
+    const config: MailRuntimeConfig = {
+      host,
+      port,
+      secure,
+      user,
+      pass,
+      fromName,
+      fromAddress
+    };
+
+    this.cachedConfig = config;
+    return config;
+  }
+
+  private getRequiredString(key: string): string {
+    const value = this.configService.get<string>(key)?.trim();
+    if (!value) {
+      throw new InternalServerErrorException(`邮件配置缺失: ${key}`);
+    }
+
+    return value;
+  }
+
+  private getRequiredNumber(key: string): number {
+    const rawValue = this.configService.get<string>(key)?.trim();
+    if (!rawValue) {
+      throw new InternalServerErrorException(`邮件配置缺失: ${key}`);
+    }
+
+    const parsedValue = Number(rawValue);
+    if (!Number.isFinite(parsedValue)) {
+      throw new InternalServerErrorException(`邮件配置格式错误: ${key}`);
+    }
+
+    return parsedValue;
+  }
+
+  private getBoolean(key: string, fallback: boolean): boolean {
+    const rawValue = this.configService.get<string>(key);
+    if (!rawValue) {
+      return fallback;
+    }
+
+    const normalizedValue = rawValue.trim().toLowerCase();
+    return normalizedValue === "true" || normalizedValue === "1";
+  }
+
+  private resolveFromField(config: MailRuntimeConfig): string {
+    const sanitizedName = config.fromName.replace(/"/g, "");
+    return `"${sanitizedName}" <${config.fromAddress}>`;
+  }
+}

apps/api/src/auth/auth.controller.ts

@@ -14,7 +14,7 @@ export class AuthController {
   @Post("email/send-code")
   async sendEmailCode(
     @Body() body: SendEmailCodeDto
-  ): Promise<{ success: boolean; expiresInSeconds: number; debugCode: string }> {
+  ): Promise<{ success: boolean; expiresInSeconds: number }> {
     return this.authService.sendEmailCode(body.email);
   }
 

apps/api/src/auth/auth.module.ts

@@ -3,6 +3,7 @@ import { ConfigModule, ConfigService } from "@nestjs/config";
 import { JwtModule } from "@nestjs/jwt";
 import { PassportModule } from "@nestjs/passport";
 import { AuthController } from "./auth.controller";
+import { AuthMailService } from "./auth-mail.service";
 import { AuthService } from "./auth.service";
 import { GithubStrategy } from "./strategies/github.strategy";
 import { QqStrategy } from "./strategies/qq.strategy";
@@ -27,6 +28,6 @@ import { WechatStrategy } from "./strategies/wechat.strategy";
     })
   ],
   controllers: [AuthController],
-  providers: [AuthService, GithubStrategy, QqStrategy, WechatStrategy]
+  providers: [AuthService, AuthMailService, GithubStrategy, QqStrategy, WechatStrategy]
 })
 export class AuthModule {}

apps/api/src/auth/auth.service.ts

@@ -3,6 +3,8 @@ import { ConfigService } from "@nestjs/config";
 import { JwtService } from "@nestjs/jwt";
 import { randomUUID } from "node:crypto";
 import { authenticator } from "@otplib/preset-default";
+import { AuthMailService } from "./auth-mail.service";
+import { PrismaService } from "../prisma/prisma.service";
 
 type EmailCodeEntry = {
   code: string;
@@ -14,17 +16,6 @@ type AuthUser = {
   email: string;
 };
 
-type RefreshTokenEntry = {
-  userId: string;
-  expiresAt: number;
-  revokedAt?: number;
-};
-
-type TwoFactorEntry = {
-  secret: string;
-  enabled: boolean;
-};
-
 type AuthTokenResult = {
   accessToken: string;
   tokenType: "Bearer";
@@ -37,29 +28,26 @@ type AuthTokenResult = {
 @Injectable()
 export class AuthService {
   private readonly emailCodeStore = new Map<string, EmailCodeEntry>();
-  private readonly userStoreByEmail = new Map<string, AuthUser>();
-  private readonly userStoreById = new Map<string, AuthUser>();
-  private readonly refreshTokenStore = new Map<string, RefreshTokenEntry>();
-  private readonly twoFactorStore = new Map<string, TwoFactorEntry>();
 
   constructor(
     private readonly configService: ConfigService,
-    private readonly jwtService: JwtService
+    private readonly jwtService: JwtService,
+    private readonly authMailService: AuthMailService,
+    private readonly prismaService: PrismaService
   ) {}
 
-  async sendEmailCode(
+  async sendEmailCode(email: string): Promise<{ success: boolean; expiresInSeconds: number }> {
-    email: string
-  ): Promise<{ success: boolean; expiresInSeconds: number; debugCode: string }> {
     const ttlSeconds = Number(this.configService.get("AUTH_EMAIL_CODE_TTL_SECONDS") ?? 300);
     const code = this.generateCode();
     const expiresAt = Date.now() + ttlSeconds * 1000;
+    const normalizedEmail = email.toLowerCase();
 
-    this.emailCodeStore.set(email.toLowerCase(), { code, expiresAt });
+    await this.authMailService.sendLoginCode(normalizedEmail, code, ttlSeconds);
+    this.emailCodeStore.set(normalizedEmail, { code, expiresAt });
 
     return {
       success: true,
-      expiresInSeconds: ttlSeconds,
+      expiresInSeconds: ttlSeconds
-      debugCode: code
     };
   }
 
@@ -82,53 +70,92 @@ export class AuthService {
 
     this.emailCodeStore.delete(lowerEmail);
 
-    const user = this.getOrCreateUser(lowerEmail);
+    const user = await this.getOrCreateUser(lowerEmail);
     return this.issueTokens(user);
   }
 
   async refreshTokens(refreshToken: string): Promise<AuthTokenResult> {
-    const entry = this.refreshTokenStore.get(refreshToken);
+    const entry = await this.prismaService.refreshToken.findUnique({
+      where: {
+        tokenHash: refreshToken
+      },
+      include: {
+        user: {
+          select: {
+            id: true,
+            email: true
+          }
+        }
+      }
+    });
+
     if (!entry) {
       throw new UnauthorizedException("刷新令牌不存在");
     }
+
     if (entry.revokedAt) {
       throw new UnauthorizedException("刷新令牌已注销");
     }
-    if (entry.expiresAt < Date.now()) {
+
-      this.refreshTokenStore.delete(refreshToken);
+    if (entry.expiresAt.getTime() < Date.now()) {
+      await this.prismaService.refreshToken.update({
+        where: {
+          id: entry.id
+        },
+        data: {
+          revokedAt: new Date()
+        }
+      });
       throw new UnauthorizedException("刷新令牌已过期");
     }
 
-    const user = this.userStoreById.get(entry.userId);
+    await this.prismaService.refreshToken.update({
-    if (!user) {
+      where: {
-      throw new UnauthorizedException("用户不存在");
+        id: entry.id
+      },
+      data: {
+        revokedAt: new Date()
       }
+    });
 
-    entry.revokedAt = Date.now();
+    return this.issueTokens(entry.user);
-    return this.issueTokens(user);
   }
 
   async revokeRefreshToken(refreshToken: string): Promise<{ success: boolean }> {
-    const entry = this.refreshTokenStore.get(refreshToken);
+    await this.prismaService.refreshToken.updateMany({
-    if (!entry) {
+      where: {
-      return { success: true };
+        tokenHash: refreshToken,
+        revokedAt: null
+      },
+      data: {
+        revokedAt: new Date()
       }
+    });
 
-    entry.revokedAt = Date.now();
     return { success: true };
   }
 
   async enrollTwoFactor(
     email: string
   ): Promise<{ userId: string; secret: string; otpauthUrl: string; enabled: boolean }> {
-    const user = this.getOrCreateUser(email.toLowerCase());
+    const user = await this.getOrCreateUser(email.toLowerCase());
     const secret = authenticator.generateSecret();
     const issuer = this.configService.get<string>("AUTH_TOTP_ISSUER") ?? "TodoList";
     const otpauthUrl = authenticator.keyuri(user.email, issuer, secret);
 
-    this.twoFactorStore.set(user.id, {
+    await this.prismaService.userSecurity.upsert({
-      secret,
+      where: {
-      enabled: false
+        userId: user.id
+      },
+      update: {
+        twoFactorSecret: secret,
+        twoFactorEnabled: false
+      },
+      create: {
+        userId: user.id,
+        twoFactorSecret: secret,
+        twoFactorEnabled: false
+      }
     });
 
     return {
@@ -143,38 +170,54 @@ export class AuthService {
     email: string,
     token: string
   ): Promise<{ success: boolean; enabled: boolean }> {
-    const user = this.getOrCreateUser(email.toLowerCase());
+    const user = await this.getOrCreateUser(email.toLowerCase());
-    const entry = this.twoFactorStore.get(user.id);
+    const security = await this.prismaService.userSecurity.findUnique({
-    if (!entry) {
+      where: {
+        userId: user.id
+      },
+      select: {
+        twoFactorSecret: true
+      }
+    });
+
+    if (!security?.twoFactorSecret) {
       throw new UnauthorizedException("尚未启用两步验证");
     }
 
-    const valid = authenticator.check(token, entry.secret);
+    const valid = authenticator.check(token, security.twoFactorSecret);
     if (!valid) {
       throw new UnauthorizedException("两步验证码错误");
     }
 
-    entry.enabled = true;
+    await this.prismaService.userSecurity.update({
+      where: {
+        userId: user.id
+      },
+      data: {
+        twoFactorEnabled: true
+      }
+    });
+
     return {
       success: true,
       enabled: true
     };
   }
 
-  private getOrCreateUser(email: string): AuthUser {
+  private async getOrCreateUser(email: string): Promise<AuthUser> {
-    const existingUser = this.userStoreByEmail.get(email);
+    return this.prismaService.user.upsert({
-    if (existingUser) {
+      where: {
-      return existingUser;
-    }
-
-    const newUser = {
-      id: randomUUID(),
         email
-    };
+      },
-    this.userStoreByEmail.set(email, newUser);
+      update: {},
-    this.userStoreById.set(newUser.id, newUser);
+      create: {
-
+        email
-    return newUser;
+      },
+      select: {
+        id: true,
+        email: true
+      }
+    });
   }
 
   private generateCode(): string {
@@ -194,9 +237,12 @@ export class AuthService {
     });
     const refreshToken = `${randomUUID()}${randomUUID()}`;
 
-    this.refreshTokenStore.set(refreshToken, {
+    await this.prismaService.refreshToken.create({
+      data: {
         userId: user.id,
-      expiresAt: Date.now() + refreshExpiresInSeconds * 1000
+        tokenHash: refreshToken,
+        expiresAt: new Date(Date.now() + refreshExpiresInSeconds * 1000)
+      }
     });
 
     return {

apps/api/src/main.ts

@@ -5,6 +5,10 @@ import { AppModule } from "./app.module";
 
 async function bootstrap(): Promise<void> {
   const app = await NestFactory.create(AppModule);
+  app.enableCors({
+    origin: true,
+    credentials: true
+  });
   app.useGlobalPipes(
     new ValidationPipe({
       transform: true,

apps/web/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/web/README.md

@@ -0,0 +1,57 @@
+# TodoList Web 前端
+
+这是 TodoList 的用户端前端应用（SPA + PWA），基于 `React + TypeScript + Vite`。
+
+## 技术栈
+
+- React
+- TypeScript
+- Vite
+- Tailwind CSS
+- shadcn/ui
+
+## 本地开发
+
+在仓库根目录执行：
+
+```bash
+pnpm install
+pnpm --filter web dev
+```
+
+默认开发地址：
+
+- `http://localhost:5173`
+
+## 后端接口地址
+
+前端默认请求：
+
+- `http://localhost:3000`
+
+如需自定义，请在运行前设置环境变量：
+
+```bash
+VITE_API_BASE_URL=http://localhost:3000
+```
+
+## 构建与预览
+
+```bash
+pnpm --filter web build
+pnpm --filter web preview
+```
+
+## 当前功能进度（阶段性）
+
+- 邮箱验证码登录页面
+- OAuth 回调页面
+- 会话本地缓存与启动恢复
+- 基础工作台页面骨架
+
+## 目录说明
+
+- `src/pages`：页面组件
+- `src/components`：通用 UI 组件
+- `src/services`：接口请求与会话处理
+- `src/lib`：工具函数

apps/web/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

apps/web/eslint.config.js

@@ -0,0 +1,23 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser
+    }
+  }
+]);

apps/web/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>web</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/web/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@fontsource-variable/geist": "^5.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.7.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.14.0",
+    "shadcn": "^4.1.2",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.1"
+  }
+}

apps/web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

apps/web/public/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>

apps/web/src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

apps/web/src/App.tsx

@@ -0,0 +1,113 @@
+import { useState } from "react";
+import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { EmailLoginPage } from "@/pages/email-login-page";
+import { OAuthCallbackPage } from "@/pages/oauth-callback-page";
+import { TodoShellPage } from "@/pages/todo-shell-page";
+import { revokeRefreshToken, type EmailLoginResult } from "@/services/auth-api";
+import {
+  clearSession,
+  loadSession,
+  saveSession,
+  type WebSession
+} from "@/services/session-storage";
+
+function toWebSession(payload: EmailLoginResult): WebSession {
+  return {
+    accessToken: payload.accessToken,
+    refreshToken: payload.refreshToken,
+    user: {
+      id: payload.user.id,
+      email: payload.user.email
+    }
+  };
+}
+
+function App() {
+  const [session, setSession] = useState<WebSession | null>(() => loadSession());
+  const [loggingOut, setLoggingOut] = useState(false);
+  const navigate = useNavigate();
+
+  async function handleLogout(): Promise<void> {
+    if (!session || loggingOut) {
+      return;
+    }
+
+    try {
+      setLoggingOut(true);
+      await revokeRefreshToken(session.refreshToken);
+    } catch {
+      // 登出流程以本地会话清理为最终兜底，避免页面卡在登录态。
+    } finally {
+      clearSession();
+      setSession(null);
+      setLoggingOut(false);
+      navigate("/login/email", { replace: true });
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-[#f6f8f7] text-[#122117]">
+      <header className="border-b border-[#d7e2db] bg-white/90 backdrop-blur">
+        <div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-4">
+          <div className="flex items-center gap-2">
+            <div className="h-8 w-8 rounded-lg bg-[#0a7a5a]" />
+            <span className="text-lg font-semibold tracking-tight">TodoList</span>
+          </div>
+          {session ? (
+            <div className="flex items-center gap-3">
+              <span className="text-sm text-[#3a5a4a]">{session.user.email}</span>
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                onClick={handleLogout}
+                disabled={loggingOut}
+              >
+                {loggingOut ? "退出中..." : "退出登录"}
+              </Button>
+            </div>
+          ) : (
+            <span className="text-sm text-[#3a5a4a]">未登录</span>
+          )}
+        </div>
+      </header>
+      <main className="mx-auto w-full max-w-6xl px-4 py-8">
+        <Routes>
+          <Route
+            path="/login/email"
+            element={
+              <EmailLoginPage
+                onLoginSuccess={(payload) => {
+                  const nextSession = toWebSession(payload);
+                  saveSession(nextSession);
+                  setSession(nextSession);
+                  navigate("/");
+                }}
+              />
+            }
+          />
+          <Route
+            path="/auth/callback/:provider"
+            element={
+              <OAuthCallbackPage
+                onBootstrapSession={(nextSession) => {
+                  setSession(nextSession);
+                }}
+              />
+            }
+          />
+          <Route
+            path="/"
+            element={
+              session ? <TodoShellPage session={session} /> : <Navigate to="/login/email" replace />
+            }
+          />
+          <Route path="*" element={<Navigate to={session ? "/" : "/login/email"} replace />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}
+
+export default App;

apps/web/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

apps/web/src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+/* eslint-disable react-refresh/only-export-components */
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

apps/web/src/index.css

@@ -0,0 +1,21 @@
+@import "@fontsource-variable/geist";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --radius: 0.625rem;
+  --background: #f6f8f7;
+  --foreground: #122117;
+  --primary: #0a7a5a;
+  --primary-foreground: #ffffff;
+  --border: #d7e2db;
+  font-family: "Geist Variable", "Noto Sans SC", sans-serif;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--background);
+  color: var(--foreground);
+}

apps/web/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

apps/web/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);

apps/web/src/pages/email-login-page.tsx

@@ -0,0 +1,155 @@
+import { useMemo, useState } from "react";
+import type { FormEvent } from "react";
+import { Button } from "@/components/ui/button";
+import { loginWithEmailCode, sendEmailCode, type EmailLoginResult } from "@/services/auth-api";
+
+type EmailLoginPageProps = {
+  onLoginSuccess: (payload: EmailLoginResult) => void;
+};
+
+const DEFAULT_API_BASE_URL = "http://localhost:3000";
+
+function resolveApiBaseUrl(): string {
+  const envBaseUrl = import.meta.env.VITE_API_BASE_URL as string | undefined;
+  if (!envBaseUrl) {
+    return DEFAULT_API_BASE_URL;
+  }
+
+  return envBaseUrl.replace(/\/+$/, "");
+}
+
+export function EmailLoginPage({ onLoginSuccess }: EmailLoginPageProps) {
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [sendingCode, setSendingCode] = useState(false);
+  const [loggingIn, setLoggingIn] = useState(false);
+  const [codeCooldown, setCodeCooldown] = useState(0);
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const canSendCode = useMemo(() => {
+    return email.trim().length > 0 && !sendingCode && codeCooldown <= 0;
+  }, [codeCooldown, email, sendingCode]);
+
+  const canLogin = useMemo(() => {
+    return email.trim().length > 0 && code.trim().length === 6 && !loggingIn;
+  }, [code, email, loggingIn]);
+
+  async function handleSendCode(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    if (!canSendCode) {
+      return;
+    }
+
+    try {
+      setSendingCode(true);
+      setError(null);
+      setMessage(null);
+      const result = await sendEmailCode(email.trim());
+      setMessage(`验证码已发送，有效期 ${result.expiresInSeconds} 秒。`);
+
+      let remain = 60;
+      setCodeCooldown(remain);
+      const timer = window.setInterval(() => {
+        remain -= 1;
+        setCodeCooldown(remain);
+        if (remain <= 0) {
+          window.clearInterval(timer);
+        }
+      }, 1000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "发送验证码失败");
+    } finally {
+      setSendingCode(false);
+    }
+  }
+
+  async function handleLogin(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault();
+    if (!canLogin) {
+      return;
+    }
+
+    try {
+      setLoggingIn(true);
+      setError(null);
+      setMessage(null);
+      const result = await loginWithEmailCode(email.trim(), code.trim());
+      onLoginSuccess(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "登录失败");
+    } finally {
+      setLoggingIn(false);
+    }
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-md rounded-xl border border-[#d7e2db] bg-white p-6 shadow-sm">
+      <h1 className="text-2xl font-semibold text-[#122117]">邮箱验证码登录</h1>
+      <p className="mt-2 text-sm text-[#3a5a4a]">
+        输入邮箱后获取验证码，再完成登录。你也可以直接使用第三方账号登录。
+      </p>
+
+      <form className="mt-6 space-y-3" onSubmit={handleSendCode}>
+        <label className="block text-sm font-medium text-[#244236]" htmlFor="email">
+          邮箱
+        </label>
+        <input
+          id="email"
+          type="email"
+          className="w-full rounded-md border border-[#bfd0c7] px-3 py-2 text-sm outline-none focus:border-[#0a7a5a]"
+          placeholder="you@example.com"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+        />
+        <Button type="submit" disabled={!canSendCode} className="w-full">
+          {sendingCode ? "发送中..." : codeCooldown > 0 ? `${codeCooldown} 秒后重发` : "发送验证码"}
+        </Button>
+      </form>
+
+      <form className="mt-4 space-y-3" onSubmit={handleLogin}>
+        <label className="block text-sm font-medium text-[#244236]" htmlFor="code">
+          验证码
+        </label>
+        <input
+          id="code"
+          type="text"
+          inputMode="numeric"
+          maxLength={6}
+          className="w-full rounded-md border border-[#bfd0c7] px-3 py-2 text-sm outline-none focus:border-[#0a7a5a]"
+          placeholder="6位数字验证码"
+          value={code}
+          onChange={(event) => setCode(event.target.value)}
+        />
+        <Button
+          type="submit"
+          disabled={!canLogin}
+          className="w-full bg-[#0a7a5a] text-white hover:bg-[#0a7a5a]/90"
+        >
+          {loggingIn ? "登录中..." : "立即登录"}
+        </Button>
+      </form>
+
+      <div className="mt-6 grid grid-cols-1 gap-2">
+        <a href={`${resolveApiBaseUrl()}/auth/oauth/github`}>
+          <Button type="button" variant="outline" className="w-full">
+            使用 GitHub 登录
+          </Button>
+        </a>
+        <a href={`${resolveApiBaseUrl()}/auth/oauth/qq`}>
+          <Button type="button" variant="outline" className="w-full">
+            使用 QQ 登录
+          </Button>
+        </a>
+        <a href={`${resolveApiBaseUrl()}/auth/oauth/wechat`}>
+          <Button type="button" variant="outline" className="w-full">
+            使用微信登录
+          </Button>
+        </a>
+      </div>
+
+      {message ? <p className="mt-4 text-sm text-[#0a7a5a]">{message}</p> : null}
+      {error ? <p className="mt-2 text-sm text-[#b42318]">{error}</p> : null}
+    </div>
+  );
+}

apps/web/src/pages/oauth-callback-page.tsx

@@ -0,0 +1,65 @@
+import { useMemo } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { saveSession, type WebSession } from "@/services/session-storage";
+
+type OAuthCallbackPageProps = {
+  onBootstrapSession: (session: WebSession) => void;
+};
+
+export function OAuthCallbackPage({ onBootstrapSession }: OAuthCallbackPageProps) {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const parseResult = useMemo(() => {
+    const accessToken = searchParams.get("accessToken");
+    const refreshToken = searchParams.get("refreshToken");
+    const userId = searchParams.get("userId");
+    const email = searchParams.get("email");
+
+    if (!accessToken || !refreshToken || !userId || !email) {
+      return {
+        ok: false as const,
+        reason: "回调参数不完整，暂时无法建立会话。"
+      };
+    }
+
+    return {
+      ok: true as const,
+      session: {
+        accessToken,
+        refreshToken,
+        user: {
+          id: userId,
+          email
+        }
+      }
+    };
+  }, [searchParams]);
+
+  function handleContinue(): void {
+    if (!parseResult.ok) {
+      navigate("/login/email", { replace: true });
+      return;
+    }
+
+    saveSession(parseResult.session);
+    onBootstrapSession(parseResult.session);
+    navigate("/", { replace: true });
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-md rounded-xl border border-[#d7e2db] bg-white p-6 shadow-sm">
+      <h1 className="text-2xl font-semibold text-[#122117]">OAuth 回调处理中</h1>
+      <p className="mt-2 text-sm text-[#3a5a4a]">
+        {parseResult.ok ? "已收到回调参数，点击继续进入工作台。" : parseResult.reason}
+      </p>
+      <Button
+        className="mt-6 w-full bg-[#0a7a5a] text-white hover:bg-[#0a7a5a]/90"
+        onClick={handleContinue}
+      >
+        {parseResult.ok ? "继续" : "返回邮箱登录"}
+      </Button>
+    </div>
+  );
+}

apps/web/src/pages/todo-shell-page.tsx

@@ -0,0 +1,16 @@
+import type { WebSession } from "@/services/session-storage";
+
+type TodoShellPageProps = {
+  session: WebSession | null;
+};
+
+export function TodoShellPage({ session }: TodoShellPageProps) {
+  return (
+    <div className="rounded-xl border border-[#d7e2db] bg-white p-6 shadow-sm">
+      <h1 className="text-2xl font-semibold text-[#122117]">TodoList 工作台</h1>
+      <p className="mt-2 text-sm text-[#3a5a4a]">
+        {session ? `当前登录邮箱：${session.user.email}` : "当前未建立登录会话，请先完成登录。"}
+      </p>
+    </div>
+  );
+}

apps/web/src/services/auth-api.ts

@@ -0,0 +1,98 @@
+export type SendEmailCodeResult = {
+  success: boolean;
+  expiresInSeconds: number;
+};
+
+export type EmailLoginResult = {
+  accessToken: string;
+  tokenType: "Bearer";
+  expiresInSeconds: number;
+  refreshToken: string;
+  refreshExpiresInSeconds: number;
+  user: {
+    id: string;
+    email: string;
+  };
+};
+
+type RevokeRefreshTokenResult = {
+  success: boolean;
+};
+
+const DEFAULT_API_BASE_URL = "http://localhost:3000";
+
+function resolveApiBaseUrl(): string {
+  const envBaseUrl = import.meta.env.VITE_API_BASE_URL as string | undefined;
+  if (!envBaseUrl) {
+    return DEFAULT_API_BASE_URL;
+  }
+
+  return envBaseUrl.replace(/\/+$/, "");
+}
+
+async function parseErrorMessage(response: Response): Promise<string> {
+  try {
+    const body = (await response.json()) as { message?: string | string[] };
+    if (Array.isArray(body.message)) {
+      return body.message.join("，");
+    }
+    if (typeof body.message === "string" && body.message.trim()) {
+      return body.message;
+    }
+  } catch {
+    return `请求失败（${response.status}）`;
+  }
+
+  return `请求失败（${response.status}）`;
+}
+
+export async function sendEmailCode(email: string): Promise<SendEmailCodeResult> {
+  const response = await fetch(`${resolveApiBaseUrl()}/auth/email/send-code`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ email })
+  });
+
+  if (!response.ok) {
+    throw new Error(await parseErrorMessage(response));
+  }
+
+  const body = (await response.json()) as SendEmailCodeResult;
+  return body;
+}
+
+export async function loginWithEmailCode(email: string, code: string): Promise<EmailLoginResult> {
+  const response = await fetch(`${resolveApiBaseUrl()}/auth/email/login`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ email, code })
+  });
+
+  if (!response.ok) {
+    throw new Error(await parseErrorMessage(response));
+  }
+
+  const body = (await response.json()) as EmailLoginResult;
+  return body;
+}
+
+export async function revokeRefreshToken(refreshToken: string): Promise<RevokeRefreshTokenResult> {
+  const response = await fetch(`${resolveApiBaseUrl()}/auth/token/revoke`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ refreshToken })
+  });
+
+  if (!response.ok) {
+    throw new Error(await parseErrorMessage(response));
+  }
+
+  const body = (await response.json()) as RevokeRefreshTokenResult;
+  return body;
+}

apps/web/src/services/session-storage.ts

@@ -0,0 +1,67 @@
+import type { EmailLoginResult } from "@/services/auth-api";
+
+const SESSION_STORAGE_KEY = "todolist.web.session";
+
+export type WebSession = {
+  accessToken: string;
+  refreshToken: string;
+  user: {
+    id: string;
+    email: string;
+  };
+};
+
+function isValidSession(payload: unknown): payload is WebSession {
+  if (!payload || typeof payload !== "object") {
+    return false;
+  }
+
+  const data = payload as {
+    accessToken?: unknown;
+    refreshToken?: unknown;
+    user?: {
+      id?: unknown;
+      email?: unknown;
+    };
+  };
+
+  return (
+    typeof data.accessToken === "string" &&
+    typeof data.refreshToken === "string" &&
+    typeof data.user?.id === "string" &&
+    typeof data.user?.email === "string"
+  );
+}
+
+export function loadSession(): WebSession | null {
+  const raw = window.localStorage.getItem(SESSION_STORAGE_KEY);
+  if (!raw) {
+    return null;
+  }
+
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (!isValidSession(parsed)) {
+      return null;
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+export function saveSession(payload: EmailLoginResult | WebSession): void {
+  const session: WebSession = {
+    accessToken: payload.accessToken,
+    refreshToken: payload.refreshToken,
+    user: {
+      id: payload.user.id,
+      email: payload.user.email
+    }
+  };
+  window.localStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(session));
+}
+
+export function clearSession(): void {
+  window.localStorage.removeItem(SESSION_STORAGE_KEY);
+}

apps/web/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

apps/web/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

apps/web/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

apps/web/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

apps/web/vite.config.ts

@@ -0,0 +1,13 @@
+import path from "node:path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src")
+    }
+  }
+});