initial commit: enrich functionality and configure for Hugging Face

.gitignore

@@ -0,0 +1,25 @@
+# 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?
+.vite

Dockerfile

@@ -0,0 +1,37 @@
+# 使用 Node.js 18 官方镜像
+FROM node:18-alpine AS builder
+
+# 设置工作目录
+WORKDIR /app
+
+# 复制 package.json 和 lock 文件
+COPY package*.json ./
+
+# 安装依赖
+RUN npm install
+
+# 复制所有源代码
+COPY . .
+
+# 构建前端应用
+RUN npm run build
+
+# 运行环境阶段
+FROM node:18-alpine
+
+WORKDIR /app
+
+# 复制构建好的文件和必要文件
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/package*.json ./
+COPY --from=builder /app/node_modules ./node_modules
+
+# 设置环境变量
+ENV NODE_ENV=production
+ENV PORT=7860
+
+# 暴露端口
+EXPOSE 7860
+
+# 启动命令
+CMD ["npm", "start"]

README.md

@@ -0,0 +1,74 @@
+---
+title: "Koa 现代化中文 Web 应用"
+emoji: 🚀
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+short_description: "Koa 现代化中文 Web 应用"
+---
+
+# Koa Web 应用 🚀
+
+这是一个基于 Koa 和 React 构建的高性能、全中文 Web 服务框架。本项目旨在为开发者提供一个开箱即用的 Web 应用模板，包含完整的后端 API 和前端界面。
+
+## ✨ 特性
+
+- 🌏 **全中文支持**：界面内容、代码注释及文档均采用中文。
+- ⚡ **高性能**：利用 Koa 的轻量级异步中间件和 React 18 的高效渲染。
+- 📱 **响应式设计**：完美适配手机、平板及桌面设备。
+- 🐳 **容器化部署**：提供 Docker 和 docker-compose 配置文件。
+- 🚀 **一键部署**：完美支持 Hugging Face Spaces 部署。
+
+## 🛠️ 技术栈
+
+- **前端**: React 18, Tailwind CSS, Lucide Icons, Vite
+- **后端**: Koa 2, Koa-Router, Koa-Bodyparser
+- **工具**: TypeScript, Docker, Node.js 18+
+
+## 🚀 快速开始
+
+### 1. 本地开发
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发环境 (前端: 5173, 后端: 3001)
+npm run dev
+```
+
+### 2. 生产构建
+
+```bash
+# 构建前端并准备生产环境
+npm run build
+
+# 启动生产服务
+npm start
+```
+
+### 3. Docker 部署
+
+```bash
+# 构建并运行
+docker build -t koa-web-app .
+docker run -p 3000:3000 koa-web-app
+```
+
+## 📂 项目结构
+
+```text
+koa-web-app/
+├── api/                # Koa 后端服务
+│   ├── routes/         # 路由定义
+│   └── app.ts          # Koa 应用核心
+├── src/                # React 前端应用
+│   ├── components/     # 组件
+│   └── pages/          # 页面
+├── Dockerfile          # Docker 配置
+└── README.md           # 项目文档
+```
+
+## 📝 许可证
+
+MIT License

api/app.ts

@@ -0,0 +1,69 @@
+import Koa from 'koa'
+import bodyParser from 'koa-bodyparser'
+import logger from 'koa-logger'
+import cors from '@koa/cors'
+import serve from 'koa-static'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import systemRouter from './routes/system.js'
+import dataRouter from './routes/data.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const app = new Koa()
+
+// 中间件配置
+app.use(cors())
+app.use(logger())
+app.use(bodyParser({
+  jsonLimit: '10mb',
+  formLimit: '10mb'
+}))
+
+// 错误处理
+app.use(async (ctx, next) => {
+  try {
+    await next()
+  } catch (err: unknown) {
+    const error = err as { status?: number; message?: string }
+    ctx.status = error.status || 500
+    ctx.body = {
+      success: false,
+      error: error.message || '服务器内部错误'
+    }
+    ctx.app.emit('error', err, ctx)
+  }
+})
+
+// 路由注册
+app.use(systemRouter.routes()).use(systemRouter.allowedMethods())
+app.use(dataRouter.routes()).use(dataRouter.allowedMethods())
+
+// 生产环境下托管静态文件
+if (process.env.NODE_ENV === 'production') {
+  const distPath = path.resolve(__dirname, '../dist')
+  app.use(serve(distPath))
+  
+  // 处理 SPA 路由
+  app.use(async (ctx, next) => {
+    if (ctx.status === 404 && !ctx.path.startsWith('/api')) {
+      ctx.type = 'html'
+      ctx.body = await import('fs').then(fs => fs.readFileSync(path.join(distPath, 'index.html')))
+    } else {
+      await next()
+    }
+  })
+}
+
+// 404 处理
+app.use(async (ctx) => {
+  if (ctx.status === 404) {
+    ctx.body = {
+      success: false,
+      error: '接口未找到'
+    }
+  }
+})
+
+export default app

api/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Vercel deploy entry handler, for serverless deployment
+ */
+import type { VercelRequest, VercelResponse } from '@vercel/node';
+import app from './app.js';
+
+export default function handler(req: VercelRequest, res: VercelResponse) {
+  return app.callback()(req, res);
+}

api/routes/data.ts

@@ -0,0 +1,40 @@
+import Router from 'koa-router'
+
+const router = new Router({ prefix: '/api/data' })
+
+// Mock 数据
+const mockTasks = [
+  { id: 1, title: '完成 Koa 后端开发', completed: true, category: '开发' },
+  { id: 2, title: '配置 Hugging Face 部署', completed: false, category: '部署' },
+  { id: 3, title: '编写项目中文文档', completed: true, category: '文档' },
+  { id: 4, title: '优化 React 前端 UI', completed: false, category: '设计' },
+  { id: 5, title: '集成 Docker 容器化', completed: true, category: '运维' },
+]
+
+/**
+ * 获取任务列表
+ */
+router.get('/tasks', async (ctx) => {
+  ctx.body = {
+    success: true,
+    data: mockTasks,
+    total: mockTasks.length
+  }
+})
+
+/**
+ * 获取系统状态
+ */
+router.get('/stats', async (ctx) => {
+  ctx.body = {
+    success: true,
+    data: {
+      activeUsers: 128,
+      totalRequests: 5432,
+      uptime: process.uptime(),
+      version: '1.0.0'
+    }
+  }
+})
+
+export default router

api/routes/system.ts

@@ -0,0 +1,44 @@
+import Router from 'koa-router'
+import os from 'os'
+
+const router = new Router({ prefix: '/api' })
+
+/**
+ * 健康检查接口
+ */
+router.get('/health', async (ctx) => {
+  ctx.body = {
+    status: 'ok',
+    timestamp: Date.now(),
+  }
+})
+
+/**
+ * 系统信息接口
+ */
+router.get('/info', async (ctx) => {
+  const used = process.memoryUsage().heapUsed / 1024 / 1024
+  ctx.body = {
+    nodeVersion: process.version,
+    platform: process.platform,
+    memoryUsage: {
+      used: Math.round(used * 100) / 100,
+      total: Math.round(os.totalmem() / 1024 / 1024 * 100) / 100,
+      unit: 'MB',
+    },
+  }
+})
+
+/**
+ * 服务器时间接口
+ */
+router.get('/time', async (ctx) => {
+  const now = new Date()
+  ctx.body = {
+    serverTime: now.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' }),
+    timezone: 'Asia/Shanghai',
+    utc: now.toISOString(),
+  }
+})
+
+export default router

api/server.ts

@@ -0,0 +1,34 @@
+/**
+ * local server entry file, for local development
+ */
+import app from './app.js';
+
+/**
+ * start server with port
+ */
+const PORT = process.env.PORT || 7860;
+
+const server = app.listen(PORT, () => {
+  console.log(`Server ready on port ${PORT}`);
+});
+
+/**
+ * close server
+ */
+process.on('SIGTERM', () => {
+  console.log('SIGTERM signal received');
+  server.close(() => {
+    console.log('Server closed');
+    process.exit(0);
+  });
+});
+
+process.on('SIGINT', () => {
+  console.log('SIGINT signal received');
+  server.close(() => {
+    console.log('Server closed');
+    process.exit(0);
+  });
+});
+
+export default app;

docker-compose.yml

@@ -0,0 +1,11 @@
+version: '3.8'
+
+services:
+  koa-app:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - PORT=3000
+    restart: unless-stopped

eslint.config.js

@@ -0,0 +1,28 @@
+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'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

index.html

@@ -0,0 +1,24 @@
+<!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>My Trae Project</title>
+    <script type="module">
+      if (import.meta.hot?.on) {
+        import.meta.hot.on('vite:error', (error) => {
+          if (error.err) {
+            console.error(
+              [error.err.message, error.err.frame].filter(Boolean).join('\n'),
+            )
+          }
+        })
+      }
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

nodemon.json

@@ -0,0 +1,10 @@
+{
+  "watch": ["api"],
+  "ext": "ts,mts,js,json",
+  "ignore": ["api/dist/*"],
+  "exec": "tsx api/server.ts",
+  "env": {
+    "NODE_ENV": "development"
+  },
+  "delay": 1000
+}

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "koa-web-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "client:dev": "vite",
+    "build": "vite build",
+    "start": "NODE_ENV=production tsx api/server.ts",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "check": "tsc --noEmit",
+    "server:dev": "nodemon",
+    "dev": "concurrently \"npm run client:dev\" \"npm run server:dev\""
+  },
+  "dependencies": {
+    "@koa/cors": "^5.0.0",
+    "@types/koa": "^3.0.1",
+    "@types/koa-bodyparser": "^4.3.13",
+    "@types/koa-cors": "^0.0.6",
+    "@types/koa-logger": "^3.1.5",
+    "@types/koa-router": "^7.4.9",
+    "@types/koa-static": "^4.0.4",
+    "clsx": "^2.1.1",
+    "dotenv": "^17.2.1",
+    "koa": "^3.1.2",
+    "koa-bodyparser": "^4.4.1",
+    "koa-logger": "^4.0.0",
+    "koa-router": "^14.0.0",
+    "koa-static": "^5.0.0",
+    "lucide-react": "^0.511.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.3.0",
+    "tailwind-merge": "^3.0.2",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.25.0",
+    "@types/node": "^22.15.30",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vercel/node": "^5.3.6",
+    "@vitejs/plugin-react": "^4.4.1",
+    "autoprefixer": "^10.4.21",
+    "babel-plugin-react-dev-locator": "^1.0.0",
+    "concurrently": "^9.2.0",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "nodemon": "^3.1.10",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
+    "tsx": "^4.20.3",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5",
+    "vite-plugin-trae-solo-badge": "^1.0.0",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

postcss.config.js

@@ -0,0 +1,10 @@
+/** WARNING: DON'T EDIT THIS FILE */
+/** WARNING: DON'T EDIT THIS FILE */
+/** WARNING: DON'T EDIT THIS FILE */
+
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/App.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Navbar from './components/Navbar';
+import Home from './pages/Home';
+import About from './pages/About';
+import ApiDocs from './pages/ApiDocs';
+import Tasks from './pages/Tasks';
+
+const App: React.FC = () => {
+  return (
+    <Router>
+      <div className="min-h-screen bg-gray-50 flex flex-col">
+        <Navbar />
+        <main className="flex-grow container mx-auto px-4 py-8 sm:px-6 lg:px-8">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/tasks" element={<Tasks />} />
+            <Route path="/about" element={<About />} />
+            <Route path="/api-docs" element={<ApiDocs />} />
+          </Routes>
+        </main>
+        <footer className="bg-white border-t border-gray-200 py-8">
+          <div className="container mx-auto px-4 text-center text-gray-500 text-sm">
+            <p>© {new Date().getFullYear()} Koa Web 应用 - 极致性能，全中文支持</p>
+          </div>
+        </footer>
+      </div>
+    </Router>
+  );
+};
+
+export default App;

src/components/Empty.tsx

@@ -0,0 +1,8 @@
+import { cn } from '@/lib/utils'
+
+// Empty component
+export default function Empty() {
+  return (
+    <div className={cn('flex h-full items-center justify-center')}>Empty</div>
+  )
+}

src/components/Navbar.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Menu, X, Activity } from 'lucide-react';
+
+const Navbar: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+
+  const navItems = [
+    { name: '首页', path: '/' },
+    { name: '任务管理', path: '/tasks' },
+    { name: '关于', path: '/about' },
+    { name: 'API文档', path: '/api-docs' },
+  ];
+
+  return (
+    <nav className="bg-blue-900 text-white shadow-lg sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center">
+            <Link to="/" className="flex items-center space-x-2">
+              <Activity className="h-8 w-8 text-blue-400" />
+              <span className="font-bold text-xl">Koa Web 应用</span>
+            </Link>
+          </div>
+          
+          <div className="hidden md:block">
+            <div className="ml-10 flex items-baseline space-x-4">
+              {navItems.map((item) => (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                    location.pathname === item.path
+                      ? 'bg-blue-800 text-white'
+                      : 'text-blue-100 hover:bg-blue-800 hover:text-white'
+                  }`}
+                >
+                  {item.name}
+                </Link>
+              ))}
+            </div>
+          </div>
+
+          <div className="md:hidden">
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className="inline-flex items-center justify-center p-2 rounded-md text-blue-100 hover:text-white hover:bg-blue-800 focus:outline-none"
+            >
+              {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile menu */}
+      {isOpen && (
+        <div className="md:hidden bg-blue-900 border-t border-blue-800">
+          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+            {navItems.map((item) => (
+              <Link
+                key={item.path}
+                to={item.path}
+                onClick={() => setIsOpen(false)}
+                className={`block px-3 py-2 rounded-md text-base font-medium ${
+                  location.pathname === item.path
+                    ? 'bg-blue-800 text-white'
+                    : 'text-blue-100 hover:bg-blue-800 hover:text-white'
+                }`}
+              >
+                {item.name}
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+};
+
+export default Navbar;

src/hooks/useTheme.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+type Theme = 'light' | 'dark';
+
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const savedTheme = localStorage.getItem('theme') as Theme;
+    if (savedTheme) {
+      return savedTheme;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
+  };
+
+  return {
+    theme,
+    toggleTheme,
+    isDark: theme === 'dark'
+  };
+} 

src/index.css

@@ -0,0 +1,32 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  @apply bg-gray-50 text-gray-900;
+}
+
+@layer components {
+  .btn-primary {
+    @apply bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition-all active:scale-95;
+  }
+}
+
+/* 自定义动画 */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-in {
+  animation: fadeIn 0.5s ease-out forwards;
+}

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))
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/pages/About.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Shield, Zap, Globe, Layout, Package, Code } from 'lucide-react';
+
+const About: React.FC = () => {
+  const features = [
+    {
+      icon: <Globe className="h-6 w-6 text-blue-500" />,
+      title: '完全汉化',
+      description: '所有界面元素、注释和文档均使用中文，对国内开发者友好。'
+    },
+    {
+      icon: <Layout className="h-6 w-6 text-purple-500" />,
+      title: '响应式布局',
+      description: '基于 Tailwind CSS 构建，完美适配手机、平板和桌面设备。'
+    },
+    {
+      icon: <Zap className="h-6 w-6 text-yellow-500" />,
+      title: '高性能',
+      description: '利用 Koa 的异步中间件机制和 React 的高效渲染能力。'
+    },
+    {
+      icon: <Shield className="h-6 w-6 text-green-500" />,
+      title: '生产就绪',
+      description: '提供 Docker 和 Hugging Face 部署配置，支持快速上线。'
+    }
+  ];
+
+  const techStack = [
+    { name: 'React', version: '18.x', type: '前端框架' },
+    { name: 'Koa', version: '2.x', type: '后端框架' },
+    { name: 'TypeScript', version: '5.x', type: '开发语言' },
+    { name: 'Tailwind CSS', version: '3.x', type: '样式框架' },
+    { name: 'Vite', version: '5.x', type: '构建工具' },
+    { name: 'Lucide React', version: '最新', type: '图标库' }
+  ];
+
+  return (
+    <div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
+      <section className="text-center">
+        <h1 className="text-3xl font-bold text-blue-900 mb-4">关于项目</h1>
+        <p className="text-gray-600 max-w-3xl mx-auto">
+          Koa Web 应用是一个示例性质的完整 Web 项目，旨在展示如何结合现代前端技术与稳健的后端框架
+          来构建可扩展、易维护的应用程序。
+        </p>
+      </section>
+
+      <section>
+        <h2 className="text-2xl font-bold text-blue-900 mb-8 text-center">核心特性</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {features.map((feature, index) => (
+            <div key={index} className="flex space-x-4 bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
+              <div className="flex-shrink-0">{feature.icon}</div>
+              <div>
+                <h3 className="text-lg font-bold text-gray-900 mb-1">{feature.title}</h3>
+                <p className="text-gray-600">{feature.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-2xl font-bold text-blue-900 mb-8 text-center">技术栈说明</h2>
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+          {techStack.map((tech, index) => (
+            <div key={index} className="bg-blue-50 p-4 rounded-xl border border-blue-100 text-center">
+              <div className="text-blue-900 font-bold mb-1">{tech.name}</div>
+              <div className="text-blue-700 text-xs mb-1">{tech.version}</div>
+              <div className="text-gray-500 text-[10px] uppercase tracking-wider">{tech.type}</div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="bg-gray-900 text-white p-12 rounded-3xl text-center">
+        <Package className="h-12 w-12 text-blue-400 mx-auto mb-6" />
+        <h2 className="text-2xl font-bold mb-4">想要贡献代码？</h2>
+        <p className="text-gray-400 mb-8 max-w-2xl mx-auto">
+          本项目是开源的，欢迎通过提交 Pull Request 或 Issue 来帮助我们改进。
+          我们重视每一位开发者的建议。
+        </p>
+        <button className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-bold transition-colors">
+          访问 GitHub 仓库
+        </button>
+      </section>
+    </div>
+  );
+};
+
+export default About;

src/pages/ApiDocs.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Copy, Terminal, ExternalLink } from 'lucide-react';
+
+const ApiDocs: React.FC = () => {
+  const apis = [
+    {
+      method: 'GET',
+      path: '/api/health',
+      description: '健康检查接口，用于监控服务状态',
+      example: '{ "status": "ok", "timestamp": 1710123456789 }'
+    },
+    {
+      method: 'GET',
+      path: '/api/info',
+      description: '系统信息接口，返回运行平台、Node 版本和内存使用情况',
+      example: '{ "nodeVersion": "v18.17.0", "platform": "linux", "memoryUsage": { "used": 45.2, "total": 128, "unit": "MB" } }'
+    },
+    {
+      method: 'GET',
+      path: '/api/time',
+      description: '服务器时间接口，返回当前服务器的本地时间和 UTC 时间',
+      example: '{ "serverTime": "2024-03-11 10:00:00", "timezone": "Asia/Shanghai", "utc": "2024-03-11T02:00:00.000Z" }'
+    }
+  ];
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-12 animate-in fade-in duration-500">
+      <section>
+        <h1 className="text-3xl font-bold text-blue-900 mb-4">API 文档</h1>
+        <p className="text-gray-600">
+          后端服务提供以下 RESTful API 接口。所有接口均返回 JSON 格式数据。
+          默认 API 前缀为 <code className="bg-gray-100 px-1 rounded">/api</code>。
+        </p>
+      </section>
+
+      <section className="space-y-8">
+        {apis.map((api, index) => (
+          <div key={index} className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+            <div className="p-6">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center space-x-3">
+                  <span className={`px-3 py-1 rounded-full text-xs font-bold ${
+                    api.method === 'GET' ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'
+                  }`}>
+                    {api.method}
+                  </span>
+                  <code className="text-lg font-mono font-bold text-gray-900">{api.path}</code>
+                </div>
+                <button 
+                  onClick={() => navigator.clipboard.writeText(api.path)}
+                  className="text-gray-400 hover:text-blue-600 transition-colors"
+                  title="复制代码"
+                >
+                  <Copy className="h-4 w-4" />
+                </button>
+              </div>
+              <p className="text-gray-600 mb-6">{api.description}</p>
+              
+              <div className="space-y-3">
+                <div className="flex items-center space-x-2 text-sm font-medium text-gray-500">
+                  <Terminal className="h-4 w-4" />
+                  <span>响应示例</span>
+                </div>
+                <pre className="bg-gray-900 text-blue-400 p-4 rounded-xl overflow-x-auto font-mono text-sm leading-relaxed">
+                  {JSON.stringify(JSON.parse(api.example), null, 2)}
+                </pre>
+              </div>
+            </div>
+          </div>
+        ))}
+      </section>
+
+      <section className="bg-blue-900 text-white p-8 rounded-3xl">
+        <h2 className="text-xl font-bold mb-4 flex items-center">
+          <ExternalLink className="h-5 w-5 mr-2" />
+          错误处理
+        </h2>
+        <p className="text-blue-200 mb-4">
+          当发生错误时，API 会返回 4xx 或 5xx 状态码，并包含以下格式的错误信息：
+        </p>
+        <pre className="bg-blue-950 p-4 rounded-xl text-blue-300 font-mono text-sm">
+{`{
+  "success": false,
+  "error": "错误描述信息"
+}`}
+        </pre>
+      </section>
+    </div>
+  );
+};
+
+export default ApiDocs;

src/pages/Home.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from 'react';
+import { Cpu, Server, Clock, CheckCircle } from 'lucide-react';
+
+interface SystemInfo {
+  nodeVersion: string;
+  platform: string;
+  memoryUsage: {
+    used: number;
+    total: number;
+    unit: string;
+  };
+}
+
+interface ServerTime {
+  serverTime: string;
+  timezone: string;
+}
+
+const Home: React.FC = () => {
+  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
+  const [serverTime, setServerTime] = useState<ServerTime | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchData = async () => {
+    try {
+      const [infoRes, timeRes] = await Promise.all([
+        fetch('/api/info'),
+        fetch('/api/time')
+      ]);
+      const infoData = await infoRes.json();
+      const timeData = await timeRes.json();
+      setSystemInfo(infoData);
+      setServerTime(timeData);
+    } catch (error) {
+      console.error('获取数据失败:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+    const interval = setInterval(fetchData, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="space-y-8 animate-in fade-in duration-500">
+      <section className="text-center py-12 bg-white rounded-2xl shadow-sm border border-gray-100">
+        <h1 className="text-4xl font-extrabold text-blue-900 mb-4">
+          欢迎使用 Koa Web 应用
+        </h1>
+        <p className="text-lg text-gray-600 max-w-2xl mx-auto px-4">
+          这是一个基于 Koa 和 React 构建的高性能 Web 服务框架。
+          项目已完全汉化，支持移动端适配，并具备容器化部署能力。
+        </p>
+      </section>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {/* 系统状态卡片 */}
+        <StatusCard
+          icon={<CheckCircle className="h-6 w-6 text-green-500" />}
+          title="运行状态"
+          value="正常"
+          description="系统服务运行中"
+        />
+        <StatusCard
+          icon={<Cpu className="h-6 w-6 text-blue-500" />}
+          title="内存使用"
+          value={loading ? '加载中...' : `${systemInfo?.memoryUsage.used} / ${systemInfo?.memoryUsage.total} ${systemInfo?.memoryUsage.unit}`}
+          description="当前堆内存占用"
+        />
+        <StatusCard
+          icon={<Server className="h-6 w-6 text-purple-500" />}
+          title="运行平台"
+          value={loading ? '加载中...' : systemInfo?.platform || '未知'}
+          description={`Node.js ${systemInfo?.nodeVersion || ''}`}
+        />
+        <StatusCard
+          icon={<Clock className="h-6 w-6 text-orange-500" />}
+          title="服务器时间"
+          value={loading ? '加载中...' : serverTime?.serverTime.split(' ')[1] || ''}
+          description={serverTime?.serverTime.split(' ')[0] || ''}
+        />
+      </div>
+
+      <section className="bg-blue-50 p-8 rounded-2xl border border-blue-100">
+        <h2 className="text-2xl font-bold text-blue-900 mb-4">快速开始</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div className="flex flex-col space-y-2">
+            <span className="font-semibold text-blue-800">1. 安装依赖</span>
+            <code className="bg-blue-100 p-2 rounded text-sm text-blue-900">npm install</code>
+          </div>
+          <div className="flex flex-col space-y-2">
+            <span className="font-semibold text-blue-800">2. 启动开发环境</span>
+            <code className="bg-blue-100 p-2 rounded text-sm text-blue-900">npm run dev</code>
+          </div>
+          <div className="flex flex-col space-y-2">
+            <span className="font-semibold text-blue-800">3. 生产部署</span>
+            <code className="bg-blue-100 p-2 rounded text-sm text-blue-900">docker-compose up -d</code>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+interface StatusCardProps {
+  icon: React.ReactNode;
+  title: string;
+  value: string;
+  description: string;
+}
+
+const StatusCard: React.FC<StatusCardProps> = ({ icon, title, value, description }) => (
+  <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
+    <div className="flex items-center space-x-3 mb-4">
+      {icon}
+      <h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider">{title}</h3>
+    </div>
+    <div className="text-2xl font-bold text-gray-900 mb-1">{value}</div>
+    <div className="text-xs text-gray-500">{description}</div>
+  </div>
+);
+
+export default Home;

src/pages/Tasks.tsx

@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from 'react';
+import { CheckCircle2, Circle, ListTodo, Activity } from 'lucide-react';
+
+interface Task {
+  id: number;
+  title: string;
+  completed: boolean;
+  category: string;
+}
+
+interface Stats {
+  activeUsers: number;
+  totalRequests: number;
+  uptime: number;
+  version: string;
+}
+
+const Tasks: React.FC = () => {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [tasksRes, statsRes] = await Promise.all([
+          fetch('/api/data/tasks'),
+          fetch('/api/data/stats')
+        ]);
+
+        if (!tasksRes.ok || !statsRes.ok) {
+          throw new Error('获取数据失败');
+        }
+
+        const tasksData = await tasksRes.json();
+        const statsData = await statsRes.json();
+
+        if (tasksData.success) setTasks(tasksData.data);
+        if (statsData.success) setStats(statsData.data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : '未知错误');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-center my-8">
+        <p>出错了: {error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900 flex items-center gap-2">
+            <ListTodo className="h-8 w-8 text-blue-600" />
+            任务管理
+          </h1>
+          <p className="mt-2 text-gray-600">展示从后端接口获取的实时数据示例</p>
+        </div>
+      </div>
+
+      {/* 统计卡片 */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
+          <div className="flex items-center gap-3 text-blue-600 mb-2">
+            <Activity className="h-5 w-5" />
+            <span className="text-sm font-medium">活跃用户</span>
+          </div>
+          <p className="text-2xl font-bold text-gray-900">{stats?.activeUsers}</p>
+        </div>
+        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
+          <div className="flex items-center gap-3 text-green-600 mb-2">
+            <CheckCircle2 className="h-5 w-5" />
+            <span className="text-sm font-medium">总请求数</span>
+          </div>
+          <p className="text-2xl font-bold text-gray-900">{stats?.totalRequests}</p>
+        </div>
+        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
+          <div className="flex items-center gap-3 text-purple-600 mb-2">
+            <Activity className="h-5 w-5" />
+            <span className="text-sm font-medium">运行时长</span>
+          </div>
+          <p className="text-2xl font-bold text-gray-900">{Math.floor(stats?.uptime || 0)}s</p>
+        </div>
+        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
+          <div className="flex items-center gap-3 text-orange-600 mb-2">
+            <CheckCircle2 className="h-5 w-5" />
+            <span className="text-sm font-medium">版本</span>
+          </div>
+          <p className="text-2xl font-bold text-gray-900">{stats?.version}</p>
+        </div>
+      </div>
+
+      {/* 任务列表 */}
+      <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
+        <div className="px-6 py-4 border-b border-gray-200 bg-gray-50/50">
+          <h2 className="font-semibold text-gray-900">项目进度</h2>
+        </div>
+        <div className="divide-y divide-gray-100">
+          {tasks.map((task) => (
+            <div key={task.id} className="px-6 py-4 flex items-center justify-between hover:bg-gray-50 transition-colors">
+              <div className="flex items-center gap-3">
+                {task.completed ? (
+                  <CheckCircle2 className="h-5 w-5 text-green-500" />
+                ) : (
+                  <Circle className="h-5 w-5 text-gray-300" />
+                )}
+                <div>
+                  <p className={`font-medium ${task.completed ? 'text-gray-400 line-through' : 'text-gray-900'}`}>
+                    {task.title}
+                  </p>
+                  <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">{task.category}</span>
+                </div>
+              </div>
+              <span className={`text-sm px-2.5 py-1 rounded-full ${
+                task.completed ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'
+              }`}>
+                {task.completed ? '已完成' : '进行中'}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Tasks;

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+
+export default {
+  darkMode: "class",
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    container: {
+      center: true,
+    },
+    extend: {},
+  },
+  plugins: [],
+};

tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": false,
+    "noUncheckedSideEffectImports": false,
+    "forceConsistentCasingInFileNames": false,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "types": [
+      "node",
+      "express"
+    ]
+  },
+  "include": [
+    "src",
+    "api"
+  ]
+}

vercel.json

@@ -0,0 +1,12 @@
+{
+  "rewrites": [
+    {
+      "source": "/api/(.*)",
+      "destination": "/api/index"
+    },
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}

vite.config.ts

@@ -0,0 +1,47 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from "vite-tsconfig-paths";
+import { traeBadgePlugin } from 'vite-plugin-trae-solo-badge';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: [
+          'react-dev-locator',
+        ],
+      },
+    }),
+    traeBadgePlugin({
+      variant: 'dark',
+      position: 'bottom-right',
+      prodOnly: true,
+      clickable: true,
+      clickUrl: 'https://www.trae.ai/solo?showJoin=1',
+      autoTheme: true,
+      autoThemeTarget: '#root'
+    }), 
+    tsconfigPaths(),
+  ],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+        secure: false,
+        configure: (proxy, _options) => {
+          proxy.on('error', (err, _req, _res) => {
+            console.log('proxy error', err);
+          });
+          proxy.on('proxyReq', (proxyReq, req, _res) => {
+            console.log('Sending Request to the Target:', req.method, req.url);
+          });
+          proxy.on('proxyRes', (proxyRes, req, _res) => {
+            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
+          });
+        },
+      }
+    }
+  }
+})