feat: 完善项目架构和功能

- 修复路由配置，实现根路径自动重定向到/project - 新增Gitea OAuth认证系统和相关组件 - 完善日志系统实现，包含pino日志工具和中间件 - 重构页面结构，分离项目管理和环境管理页面 - 新增CORS、Session等关键中间件 - 优化前端请求封装和类型定义 - 修复TypeScript类型错误和参数传递问题
2025-09-04 23:19:52 +08:00
parent d178df54da
commit ef473d6084
34 changed files with 1022 additions and 196 deletions
--- a/apps/server/app.ts
+++ b/apps/server/app.ts
@@ -1,10 +1,13 @@
 import Koa from 'koa';
 import { initMiddlewares } from './middlewares/index.ts';
+import { log } from './libs/logger.ts';

 const app = new Koa();

 initMiddlewares(app);

-app.listen(3000, () => {
-  console.log('server started at http://localhost:3000');
+const PORT = process.env.PORT || 3001;
+
+app.listen(PORT, () => {
+  log.info('APP', 'Server started at port %d', PORT);
 });
--- a/apps/server/controllers/application.ts
+++ b/apps/server/controllers/application.ts
@@ -1,5 +1,6 @@
 import type { Context } from 'koa';
 import prisma from '../libs/db.ts';
+import { log } from '../libs/logger.ts';
 import { BusinessError } from '../middlewares/exception.ts';
 import { Controller, Get } from '../decorators/route.ts';

@@ -7,6 +8,7 @@ import { Controller, Get } from '../decorators/route.ts';
 export class ApplicationController {
  @Get('/list')
  async list(ctx: Context) {
+    log.debug('app', 'session %o', ctx.session);
    try {
      const list = await prisma.application.findMany({
        where: {
@@ -24,7 +26,6 @@ export class ApplicationController {

  @Get('/detail/:id')
  async detail(ctx: Context) {
-    try {
    const { id } = ctx.params;
    const app = await prisma.application.findUnique({
      where: { id: Number(id) },
@@ -35,16 +36,5 @@ export class ApplicationController {
    }

    return app;
-    } catch (error) {
-      if (error instanceof BusinessError) {
-        throw error;
-      }
-      throw new BusinessError('获取应用详情失败', 1003, 500);
-    }
  }
 }
-
-// 保持向后兼容的导出方式
-const applicationController = new ApplicationController();
-export const list = applicationController.list.bind(applicationController);
-export const detail = applicationController.detail.bind(applicationController);
--- a/apps/server/controllers/auth.ts
+++ b/apps/server/controllers/auth.ts
@@ -0,0 +1,66 @@
+import type { Context } from 'koa';
+import { Controller, Get, Post } from '../decorators/route.ts';
+import prisma from '../libs/db.ts';
+import { log } from '../libs/logger.ts';
+import { gitea } from '../libs/gitea.ts';
+
+@Controller('/auth')
+export class AuthController {
+  private readonly TAG = 'Auth';
+
+  @Get('/url')
+  async url() {
+    return {
+      url: `${process.env.GITEA_URL}/login/oauth/authorize?client_id=${process.env.GITEA_CLIENT_ID}&redirect_uri=${process.env.GITEA_REDIRECT_URI}&response_type=code&state=STATE`,
+    };
+  }
+
+  @Post('/login')
+  async login(ctx: Context) {
+    if (!ctx.session.isNew) {
+      return ctx.session.user;
+    }
+    const { code } = (ctx.request as any).body;
+    const { access_token } = await gitea.getToken(code);
+    const giteaUser = await gitea.getUserInfo(access_token);
+    log.debug(this.TAG, 'gitea user: %o', giteaUser);
+    const exist = await prisma.user.findFirst({
+      where: {
+        login: giteaUser.login,
+        email: giteaUser.email,
+      },
+    });
+    if (exist == null) {
+      const createdUser = await prisma.user.create({
+        data: {
+          id: giteaUser.id,
+          login: giteaUser.login,
+          email: giteaUser.email,
+          username: giteaUser.username,
+          avatar_url: giteaUser.avatar_url,
+          active: giteaUser.active,
+          createdAt: giteaUser.created,
+        },
+      });
+      log.debug(this.TAG, '新建用户成功 %o', createdUser);
+      ctx.session.user = createdUser;
+    } else {
+      const updatedUser = await prisma.user.update({
+        where: {
+          id: exist.id,
+        },
+        data: {
+          login: giteaUser.login,
+          email: giteaUser.email,
+          username: giteaUser.username,
+          avatar_url: giteaUser.avatar_url,
+          active: giteaUser.active,
+          createdAt: giteaUser.created,
+        },
+      });
+      log.debug(this.TAG, '更新用户信息成功 %o', updatedUser);
+      ctx.session.user = updatedUser;
+    }
+    return ctx.session.user;
+  }
+}
--- a/apps/server/libs/gitea.ts
+++ b/apps/server/libs/gitea.ts
@@ -0,0 +1,94 @@
+interface TokenResponse {
+  access_token: string;
+  token_type: string;
+  expires_in: number;
+  refresh_token: string;
+}
+
+interface GiteaUser {
+  id: number;
+  login: string;
+  login_name: string;
+  source_id: number;
+  full_name: string;
+  email: string;
+  avatar_url: string;
+  html_url: string;
+  language: string;
+  is_admin: boolean;
+  last_login: string;
+  created: string;
+  restricted: boolean;
+  active: boolean;
+  prohibit_login: boolean;
+  location: string;
+  website: string;
+  description: string;
+  visibility: string;
+  followers_count: number;
+  following_count: number;
+  starred_repos_count: number;
+  username: string;
+}
+
+class Gitea {
+  private get config() {
+    return {
+      giteaUrl: process.env.GITEA_URL!,
+      clientId: process.env.GITEA_CLIENT_ID!,
+      clientSecret: process.env.GITEA_CLIENT_SECRET!,
+      redirectUri: process.env.GITEA_REDIRECT_URI!,
+    }
+  }
+
+  async getToken(code: string) {
+    const { giteaUrl, clientId, clientSecret, redirectUri } = this.config;
+    console.log('this.config', this.config);
+    const response = await fetch(
+      `${giteaUrl}/login/oauth/access_token`,
+      {
+        method: 'POST',
+        headers: this.getHeaders(),
+        body: JSON.stringify({
+          client_id: clientId,
+          client_secret: clientSecret,
+          code,
+          grant_type: 'authorization_code',
+          redirect_uri: redirectUri,
+        }),
+      },
+    );
+    if (!response.ok) {
+      console.log(await response.json());
+      throw new Error(`Fetch failed: ${response.status}`);
+    }
+    return (await response.json()) as TokenResponse;
+  }
+  /**
+   * 获取用户信息
+   * @param accessToken 访问令牌
+   */
+  async getUserInfo(accessToken: string) {
+    const response = await fetch(`${this.config.giteaUrl}/api/v1/user`, {
+      method: 'GET',
+      headers: this.getHeaders(accessToken),
+    });
+    if (!response.ok) {
+      throw new Error(`Fetch failed: ${response.status}`);
+    }
+    const result = (await response.json()) as GiteaUser;
+    return result;
+  }
+
+  private getHeaders(accessToken?: string) {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+    if (accessToken) {
+      headers['Authorization'] = `token ${accessToken}`;
+    }
+    return headers;
+  }
+}
+
+export const gitea = new Gitea();
--- a/apps/server/libs/logger.ts
+++ b/apps/server/libs/logger.ts
@@ -0,0 +1,38 @@
+import pino from 'pino';
+
+class Logger {
+  private readonly logger: pino.Logger;
+
+  constructor() {
+    this.logger = pino({
+      transport: {
+        target: 'pino-pretty',
+        options: {
+          singleLine: true,
+          colorize: true,
+          translateTime: 'SYS:standard',
+          ignore: 'pid,hostname',
+        },
+      },
+      level: 'debug',
+    });
+  }
+
+  debug(tag: string, message: string, ...args: unknown[]) {
+    if (args.length > 0) {
+      this.logger.debug({ TAG: tag }, message, ...(args as []));
+    } else {
+      this.logger.debug({ TAG: tag }, message);
+    }
+  }
+
+  info(tag: string, message: string, ...args: unknown[]) {
+    this.logger.info({ TAG: tag }, message, ...(args as []));
+  }
+
+  error(tag: string, message: string, ...args: unknown[]) {
+    this.logger.error({ TAG: tag }, message, ...(args as []));
+  }
+}
+
+export const log = new Logger();
--- a/apps/server/libs/route-scanner.ts
+++ b/apps/server/libs/route-scanner.ts
@@ -74,8 +74,6 @@ export class RouteScanner {
        default:
          console.warn(`未支持的HTTP方法: ${route.method}`);
      }
-
-      console.log(`注册路由: ${route.method} ${fullPath} -> ${ControllerClass.name}.${route.propertyKey}`);
    });
  }

@@ -115,10 +113,7 @@ export class RouteScanner {
        const result = await method.call(instance, ctx, next);

        // 如果控制器返回了数据，则包装成统一响应格式
-        if (result !== undefined) {
        ctx.body = createAutoSuccessResponse(result);
-        }
-        // 如果控制器没有返回数据，说明已经自己处理了响应
      } catch (error) {
        // 错误由全局异常处理中间件处理
        throw error;
--- a/apps/server/middlewares/cors.ts
+++ b/apps/server/middlewares/cors.ts
@@ -0,0 +1,17 @@
+import cors from '@koa/cors';
+import type Koa from 'koa';
+import type { Middleware } from './types.ts';
+
+export class CORS implements Middleware {
+  apply(app: Koa) {
+    app.use(
+      cors({
+        credentials: true,
+        allowHeaders: ['Content-Type'],
+        origin(ctx) {
+          return ctx.get('Origin') || '*';
+        },
+      }),
+    );
+  }
+}
--- a/apps/server/middlewares/exception.ts
+++ b/apps/server/middlewares/exception.ts
@@ -1,5 +1,6 @@
 import type Koa from 'koa';
 import type { Middleware } from './types.ts';
+import { log } from '../libs/logger.ts';

 /**
 * 统一响应体结构
@@ -36,11 +37,11 @@ export class Exception implements Middleware {
        await next();

        // 如果没有设置响应体，则返回404
-        if (ctx.status === 404 && !ctx.body) {
-          this.sendResponse(ctx, 404, '接口不存在', null, 404);
+        if (ctx.status === 404) {
+          this.sendResponse(ctx, 404, 'Not Found', null, 404);
        }
      } catch (error) {
-        console.error('全局异常捕获:', error);
+        log.error('Exception', 'catch error: %o', error);
        this.handleError(ctx, error);
      }
    });
@@ -55,11 +56,16 @@ export class Exception implements Middleware {
      this.sendResponse(ctx, error.code, error.message, null, error.httpStatus);
    } else if (error.status) {
      // Koa HTTP 错误
-      const message = error.status === 401 ? '未授权访问' :
-                     error.status === 403 ? '禁止访问' :
-                     error.status === 404 ? '资源不存在' :
-                     error.status === 422 ? '请求参数错误' :
-                     error.message || '请求失败';
+      const message =
+        error.status === 401
+          ? '未授权访问'
+          : error.status === 403
+            ? '禁止访问'
+            : error.status === 404
+              ? '资源不存在'
+              : error.status === 422
+                ? '请求参数错误'
+                : error.message || '请求失败';

      this.sendResponse(ctx, error.status, message, null, error.status);
    } else {
@@ -80,13 +86,13 @@ export class Exception implements Middleware {
    code: number,
    message: string,
    data: any = null,
-    httpStatus = 200
+    httpStatus = 200,
  ): void {
    const response: ApiResponse = {
      code,
      message,
      data,
-      timestamp: Date.now()
+      timestamp: Date.now(),
    };

    ctx.status = httpStatus;
@@ -98,12 +104,15 @@ export class Exception implements Middleware {
 /**
 * 创建成功响应的辅助函数
 */
-export function createSuccessResponse<T>(data: T, message = '操作成功'): ApiResponse<T> {
+export function createSuccessResponse<T>(
+  data: T,
+  message = '操作成功',
+): ApiResponse<T> {
  return {
    code: 0,
    message,
    data,
-    timestamp: Date.now()
+    timestamp: Date.now(),
  };
 }

@@ -128,11 +137,15 @@ export function createAutoSuccessResponse<T>(data: T): ApiResponse<T> {
 /**
 * 创建失败响应的辅助函数
 */
-export function createErrorResponse(code: number, message: string, data?: any): ApiResponse {
+export function createErrorResponse(
+  code: number,
+  message: string,
+  data?: any,
+): ApiResponse {
  return {
    code,
    message,
    data,
-    timestamp: Date.now()
+    timestamp: Date.now(),
  };
 }
--- a/apps/server/middlewares/index.ts
+++ b/apps/server/middlewares/index.ts
@@ -1,7 +1,9 @@
 import { Router } from './router.ts';
-import { ResponseTime } from './responseTime.ts';
 import { Exception } from './exception.ts';
 import { BodyParser } from './body-parser.ts';
+import { Session } from './session.ts';
+import { CORS } from './cors.ts';
+import { HttpLogger } from './logger.ts';
 import type Koa from 'koa';

 /**
@@ -9,17 +11,19 @@ import type Koa from 'koa';
 * @param app Koa
 */
 export function initMiddlewares(app: Koa) {
+  // 日志中间件需要最早注册，记录所有请求
+  new HttpLogger().apply(app);
+
  // 全局异常处理中间件必须最先注册
-  const exception = new Exception();
-  exception.apply(app);
+  new Exception().apply(app);
+
+  // Session 中间件需要在请求体解析之前注册
+  new Session().apply(app);

  // 请求体解析中间件
-  const bodyParser = new BodyParser();
-  bodyParser.apply(app);
+  new BodyParser().apply(app);

-  const responseTime = new ResponseTime();
-  responseTime.apply(app);
+  new CORS().apply(app);

-  const router = new Router();
-  router.apply(app);
+  new Router().apply(app);
 }
--- a/apps/server/middlewares/logger.ts
+++ b/apps/server/middlewares/logger.ts
@@ -0,0 +1,14 @@
+import Koa, { type Context } from 'koa';
+import { log } from '../libs/logger.ts';
+import type { Middleware } from './types.ts';
+
+export class HttpLogger implements Middleware {
+  apply(app: Koa): void {
+    app.use(async (ctx: Context, next: Koa.Next) => {
+      const start = Date.now();
+      await next();
+      const ms = Date.now() - start;
+      log.info('HTTP', `${ctx.method} ${ctx.url} - ${ms}ms`)
+    });
+  }
+}
--- a/apps/server/middlewares/responseTime.ts
+++ b/apps/server/middlewares/responseTime.ts
@@ -1,13 +0,0 @@
-import type { Middleware } from './types.ts';
-import type Koa from 'koa';
-
-export class ResponseTime implements Middleware {
-  apply(app: Koa): void {
-    app.use(async (ctx, next) => {
-      const start = Date.now();
-      await next();
-      const ms = Date.now() - start;
-      ctx.set('X-Response-Time', `${ms}ms`);
-    });
-  }
-}
--- a/apps/server/middlewares/router.ts
+++ b/apps/server/middlewares/router.ts
@@ -1,36 +1,16 @@
 import KoaRouter from '@koa/router';
 import type Koa from 'koa';
 import type { Middleware } from './types.ts';
-import { createAutoSuccessResponse } from './exception.ts';
 import { RouteScanner } from '../libs/route-scanner.ts';
 import { ApplicationController } from '../controllers/application.ts';
 import { UserController } from '../controllers/user.ts';
-import * as application from '../controllers/application.ts';
-
-/**
- * 包装控制器函数，统一处理响应格式
- */
-function wrapController(controllerFn: Function) {
-  return async (ctx: Koa.Context, next: Koa.Next) => {
-    try {
-      // 调用控制器函数获取返回数据
-      const result = await controllerFn(ctx, next);
-
-      // 如果控制器返回了数据，则包装成统一响应格式
-      if (result !== undefined) {
-        ctx.body = createAutoSuccessResponse(result);
-      }
-      // 如果控制器没有返回数据，说明已经自己处理了响应
-    } catch (error) {
-      // 错误由全局异常处理中间件处理
-      throw error;
-    }
-  };
-}
+import { AuthController } from '../controllers/auth.ts';
+import { log } from '../libs/logger.ts';

 export class Router implements Middleware {
  private router: KoaRouter;
  private routeScanner: RouteScanner;
+  private readonly TAG = 'Router';

  constructor() {
    this.router = new KoaRouter({
@@ -54,14 +34,18 @@ export class Router implements Middleware {
    // 注册所有使用装饰器的控制器
    this.routeScanner.registerControllers([
      ApplicationController,
-      UserController
+      UserController,
+      AuthController,
    ]);

    // 输出注册的路由信息
    const routes = this.routeScanner.getRegisteredRoutes();
-    console.log('装饰器路由注册完成:');
-    routes.forEach(route => {
-      console.log(`  ${route.method} ${route.path} -> ${route.controller}.${route.action}`);
+    log.debug(this.TAG, '装饰器路由注册完成:');
+    routes.forEach((route) => {
+      log.debug(
+        this.TAG,
+        `  ${route.method} ${route.path} -> ${route.controller}.${route.action}`,
+      );
    });
  }

--- a/apps/server/middlewares/session.ts
+++ b/apps/server/middlewares/session.ts
@@ -0,0 +1,24 @@
+import session from 'koa-session';
+import type Koa from 'koa';
+import type { Middleware } from './types.ts';
+
+export class Session implements Middleware {
+  apply(app: Koa): void {
+    app.keys = ['foka-ci'];
+    app.use(
+      session(
+        {
+          key: 'foka.sid',
+          maxAge: 86400000,
+          autoCommit: true /** (boolean) automatically commit headers (default true) */,
+          overwrite: true /** (boolean) can overwrite or not (default true) */,
+          httpOnly: true /** (boolean) httpOnly or not (default true) */,
+          signed: true /** (boolean) signed or not (default true) */,
+          rolling: false /** (boolean) Force a session identifier cookie to be set on every response. The expiration is reset to the original maxAge, resetting the expiration countdown. (default is false) */,
+          renew: false /** (boolean) renew session when session is nearly expired, so we can always keep user logged in. (default is false)*/,
+        },
+        app,
+      ),
+    );
+  }
+}
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -10,14 +10,19 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
+    "@koa/cors": "^5.0.0",
    "@koa/router": "^14.0.0",
    "@prisma/client": "^6.15.0",
-    "koa": "^3.0.1"
+    "koa": "^3.0.1",
+    "koa-session": "^7.0.2",
+    "pino": "^9.9.1",
+    "pino-pretty": "^13.1.1"
  },
  "devDependencies": {
    "@tsconfig/node-ts": "^23.6.1",
    "@tsconfig/node22": "^22.0.2",
    "@types/koa": "^3.0.0",
+    "@types/koa__cors": "^5.0.0",
    "@types/koa__router": "^12.0.4",
    "@types/node": "^24.3.0",
    "prisma": "^6.15.0",
--- a/apps/server/prisma/data/dev.db
+++ b/apps/server/prisma/data/dev.db
--- a/apps/server/prisma/schema.prisma
+++ b/apps/server/prisma/schema.prisma
@@ -33,3 +33,17 @@ model Environment {
  createdBy   String
  updatedBy   String
 }
+
+model User {
+  id         Int      @id @default(autoincrement())
+  username   String
+  login      String
+  email      String
+  avatar_url String?
+  active     Boolean  @default(true)
+  valid      Int      @default(1)
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+  createdBy  String   @default("system")
+  updatedBy  String   @default("system")
+}
--- a/apps/web/.env
+++ b/apps/web/.env
@@ -0,0 +1 @@
+BASE_URL=http://192.168.1.36:3001
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,8 +12,9 @@
  },
  "dependencies": {
    "@arco-design/web-react": "^2.66.4",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "axios": "^1.11.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
    "react-router": "^7.8.0"
  },
  "devDependencies": {
--- a/apps/web/rsbuild.config.ts
+++ b/apps/web/rsbuild.config.ts
@@ -1,16 +1,24 @@
-import { ArcoDesignPlugin } from "@arco-plugins/unplugin-react";
-import { defineConfig } from "@rsbuild/core";
-import { pluginReact } from "@rsbuild/plugin-react";
-import { pluginLess } from "@rsbuild/plugin-less";
+import { ArcoDesignPlugin } from '@arco-plugins/unplugin-react';
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginLess } from '@rsbuild/plugin-less';
 import { pluginSvgr } from '@rsbuild/plugin-svgr';

 export default defineConfig({
  plugins: [pluginReact(), pluginLess(), pluginSvgr()],
+  html: {
+    title: 'Foka CI',
+  },
+  source: {
+    define: {
+      'process.env.BASE_URL': JSON.stringify(process.env.BASE_URL),
+    },
+  },
  tools: {
    rspack: {
      plugins: [
        new ArcoDesignPlugin({
-          defaultLanguage: "zh-CN",
+          defaultLanguage: 'zh-CN',
        }),
      ],
    },
--- a/apps/web/src/assets/images/gitea.svg
+++ b/apps/web/src/assets/images/gitea.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
+<g>
+	<path id="teabag" style="fill:#FFFFFF" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8
+		c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4
+		c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"/>
+	<g>
+		<g>
+			<path style="fill:#609926" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2
+				c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5
+				c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5
+				c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3
+				c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1
+				C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4
+				c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7
+				S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55
+				c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8
+				l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"/>
+			<path style="fill:#609926" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4
+				c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1
+				c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9
+				c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3
+				c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3
+				c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29
+				c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8
+				C343.2,346.5,335,363.3,326.8,380.1z"/>
+		</g>
+	</g>
+</g>
+</svg>
--- a/apps/web/src/index.tsx
+++ b/apps/web/src/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from '@pages/App';
 import { BrowserRouter } from 'react-router';
@@ -8,10 +7,8 @@ const rootEl = document.getElementById('root');
 if (rootEl) {
  const root = ReactDOM.createRoot(rootEl);
  root.render(
-    <React.StrictMode>
    <BrowserRouter>
      <App />
-      </BrowserRouter>
-    </React.StrictMode>,
+    </BrowserRouter>,
  );
 }
--- a/apps/web/src/pages/App.tsx
+++ b/apps/web/src/pages/App.tsx
@@ -1,14 +1,17 @@
-import { Route, Routes } from 'react-router';
+import { Route, Routes, Navigate } from 'react-router';
 import Home from '@pages/home';
 import Login from '@pages/login';
-import Application from '@pages/application';
+import Project from '@pages/project';
+import Env from '@pages/env';

 import '@styles/index.css';
 const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />}>
-        <Route path="application" element={<Application />} index />
+        <Route index element={<Navigate to="project" replace />} />
+        <Route path="project" element={<Project />} />
+        <Route path="env" element={<Env />} />
      </Route>
      <Route path="/login" element={<Login />} />
    </Routes>
--- a/apps/web/src/pages/application/index.tsx
+++ b/apps/web/src/pages/application/index.tsx
@@ -1,12 +0,0 @@
-import { useState } from "react";
-
-function Application() {
-  const [apps, setApps] = useState<Application[]>([]);
-  return (
-    <div>
-      application
-    </div>
-  )
-}
-
-export default Application;
--- a/apps/web/src/pages/env/index.tsx
+++ b/apps/web/src/pages/env/index.tsx
@@ -0,0 +1,12 @@
+import { useState } from "react";
+
+function Env() {
+  const [env, setEnv] = useState([]);
+  return (
+    <div>
+      env page
+    </div>
+  )
+}
+
+export default Env;
--- a/apps/web/src/pages/home/index.tsx
+++ b/apps/web/src/pages/home/index.tsx
@@ -11,7 +11,7 @@ import {
 } from '@arco-design/web-react/icon';
 import { useState } from 'react';
 import Logo from '@assets/images/logo.svg?react';
-import { Outlet } from 'react-router';
+import { Link, Outlet } from 'react-router';

 function Home() {
  const [collapsed, setCollapsed] = useState(false);
@@ -33,24 +33,16 @@ function Home() {
          defaultSelectedKeys={['0_1']}
        >
          <Menu.Item key="0">
-            <IconApps />
-            Navigation 1
+            <Link to="/project" className="flex flex-row items-center">
+              <IconApps fontSize={18} />
+              项目管理
+            </Link>
          </Menu.Item>
          <Menu.Item key="1">
-            <IconRobot />
-            Navigation 2
-          </Menu.Item>
-          <Menu.Item key="2">
-            <IconBulb />
-            Navigation 3
-          </Menu.Item>
-          <Menu.Item key="3">
-            <IconSafe />
-            Navigation 4
-          </Menu.Item>
-          <Menu.Item key="4">
-            <IconFire />
-            Navigation 5
+            <Link to="/env" className="flex flex-row items-center">
+              <IconRobot fontSize={18} />
+              环境管理
+            </Link>
          </Menu.Item>
        </Menu>
      </Layout.Sider>
--- a/apps/web/src/pages/login/index.tsx
+++ b/apps/web/src/pages/login/index.tsx
@@ -1,16 +1,41 @@
-import { Input, Space } from '@arco-design/web-react';
-import { IconUser, IconInfoCircle } from '@arco-design/web-react/icon';
+import { Button } from '@arco-design/web-react';
+import Gitea from '@assets/images/gitea.svg?react';
+import { loginService } from './service';
+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router';
+
 function Login() {
+  const [ searchParams ] = useSearchParams();
+  const navigate = useNavigate();
+  const authCode = searchParams.get('code');
+
+  const onLoginClick = async () => {
+    const url = await loginService.getAuthUrl();
+    if (url) {
+      window.location.href = url;
+    }
+  };
+
+  useEffect(() => {
+    if (authCode) {
+      loginService.login(authCode, navigate);
+    }
+  }, [authCode, navigate]);
+
  return (
-    <div>
-      <Space direction='vertical'>
-        <Input placeholder="username" prefix={<IconUser />} size="large" />
-        <Input.Password
-          placeholder="password"
-          prefix={<IconInfoCircle />}
+    <div className="flex  justify-center items-center h-[100vh]">
+      <Button
+        type="primary"
+        color="green"
+        shape="round"
        size="large"
-        />
-      </Space>
+        onClick={onLoginClick}
+      >
+        <span className="flex items-center gap-2">
+          <Gitea className="w-5 h-5" />
+          <span>Gitea 授权登录</span>
+        </span>
+      </Button>
    </div>
  );
 }
--- a/apps/web/src/pages/login/service.ts
+++ b/apps/web/src/pages/login/service.ts
@@ -0,0 +1,39 @@
+import { net } from '@shared';
+import type { AuthURLResponse } from './types';
+import type { NavigateFunction } from 'react-router';
+import { Notification } from '@arco-design/web-react';
+
+class LoginService {
+  async getAuthUrl() {
+    const { code, data } = await net.request<AuthURLResponse>({
+      method: 'GET',
+      url: '/api/auth/url',
+      params: {
+        redirect: encodeURIComponent(`${location.origin}/login`),
+      },
+    });
+    if (code === 0) {
+      return data.url;
+    }
+  }
+
+  async login(authCode: string, navigate: NavigateFunction) {
+    const { data, code } = await net.request<AuthURLResponse>({
+      method: 'POST',
+      url: '/api/auth/login',
+      data: {
+        code: authCode,
+      },
+    });
+    if (code === 0) {
+      localStorage.setItem('user', JSON.stringify(data));
+      navigate('/');
+      Notification.success({
+        title: '提示',
+        content: '登录成功'
+      });
+    }
+  }
+}
+
+export const loginService = new LoginService();
--- a/apps/web/src/pages/login/types.ts
+++ b/apps/web/src/pages/login/types.ts
@@ -0,0 +1,5 @@
+import type { APIResponse } from '@shared';
+
+export type AuthURLResponse = APIResponse<{
+  url: string;
+}>
--- a/apps/web/src/pages/project/index.tsx
+++ b/apps/web/src/pages/project/index.tsx
@@ -0,0 +1,8 @@
+import { useState } from 'react';
+
+function Project() {
+  const [projects, setProjects] = useState([]);
+  return <div>project page</div>;
+}
+
+export default Project;
--- a/apps/web/src/pages/application/types.ts
+++ b/apps/web/src/pages/application/types.ts
@@ -1,15 +1,15 @@
-enum AppStatus {
+enum BuildStatus {
  Idle = "Pending",
  Running = "Running",
  Stopped = "Stopped",
 }

-export interface Application {
+export interface Project {
  id: string;
  name: string;
  description: string;
  git: string;
  env: Record<string, string>;
  createdAt: string;
-  status: AppStatus;
+  status: BuildStatus;
 }
--- a/apps/web/src/shared/index.ts
+++ b/apps/web/src/shared/index.ts
@@ -0,0 +1 @@
+export * from './request';
--- a/apps/web/src/shared/request.ts
+++ b/apps/web/src/shared/request.ts
@@ -0,0 +1,26 @@
+import axios, { Axios, type AxiosRequestConfig } from 'axios';
+
+class Net {
+  private readonly instance: Axios;
+  constructor() {
+    this.instance = axios.create({
+      baseURL: process.env.BASE_URL,
+      timeout: 20000,
+      withCredentials: true,
+    });
+  }
+
+  async request<T>(config: AxiosRequestConfig): Promise<T> {
+    const { data } = await this.instance.request<T>(config);
+    return data;
+  }
+}
+
+export interface APIResponse<T> {
+  code: number;
+  data: T;
+  message: string;
+  timestamp: number;
+}
+
+export const net = new Net();
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -23,7 +23,8 @@
     "paths": {
      "@pages/*": ["./src/pages/*"],
      "@styles/*": ["./src/styles/*"],
-      "@assets/*": ["./src/assets/*"]
+      "@assets/*": ["./src/assets/*"],
+      "@shared": ["./src/shared"]
    }
  },
  "include": ["src"]
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml