create-aiko 0.1.0

package/template/packages/mobile/src/App.tsx

@@ -0,0 +1,5 @@
+import { AppRouter } from '@/routes';
+
+export default function App() {
+  return <AppRouter />;
+}

package/template/packages/mobile/src/app/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/template/packages/mobile/src/components/LoginForm.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { useAuth } from '@scaffold/shared-auth';
+
+export function LoginForm() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const { user, login, isLoading, error, setError } = useAuth();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    try {
+      await login(username, password);
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : '登录失败';
+      const isNetwork =
+        msg.includes('fetch') ||
+        msg.includes('Failed to fetch') ||
+        msg.includes('NetworkError') ||
+        msg.includes('CONNECTION_REFUSED');
+      if (isNetwork) {
+        setError('无法连接 API，请先在 scaffold 目录执行：pnpm dev:api');
+      }
+    }
+  };
+
+  return (
+    <div className="w-full max-w-sm rounded-lg bg-white p-6 shadow">
+      <h1 className="text-xl font-semibold text-gray-900 mb-4">登录</h1>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
+            用户名
+          </label>
+          <input
+            id="username"
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            className="w-full rounded border border-gray-300 px-3 py-2 text-gray-900 focus:border-blue-500 focus:outline-none"
+            placeholder="admin"
+            autoComplete="username"
+          />
+        </div>
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+            密码
+          </label>
+          <input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full rounded border border-gray-300 px-3 py-2 text-gray-900 focus:border-blue-500 focus:outline-none"
+            placeholder="••••••••"
+            autoComplete="current-password"
+          />
+        </div>
+        {error && <p className="text-sm text-red-600">{error}</p>}
+        {user && (
+          <p className="text-sm text-green-600">
+            登录成功：{user.username}（{user.email}）
+          </p>
+        )}
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="w-full rounded bg-blue-600 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+        >
+          {isLoading ? '登录中...' : '登录'}
+        </button>
+      </form>
+      <p className="mt-4 text-xs text-gray-500">默认账号：admin / admin123</p>
+    </div>
+  );
+}

package/template/packages/mobile/src/hooks/index.ts

@@ -0,0 +1,5 @@
+/**
+ * 自定义 Hooks
+ */
+
+// 预留：如 useDebounce、useLocalStorage 等可在此导出

package/template/packages/mobile/src/lib/utils.ts

@@ -0,0 +1,7 @@
+/**
+ * 通用工具函数
+ */
+
+export function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}

package/template/packages/mobile/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { AuthProviderWrapper } from '@scaffold/shared-auth';
+import App from './App';
+import './app/globals.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <AuthProviderWrapper>
+      <App />
+    </AuthProviderWrapper>
+  </StrictMode>
+);

package/template/packages/mobile/src/pages/HomePage.tsx

@@ -0,0 +1,35 @@
+import { useAuth } from '@scaffold/shared-auth';
+import { useNavigate } from 'react-router-dom';
+import { ROUTES } from '@/routes/routes';
+
+/**
+ * 移动端通用主页，展示产品名 AIKO-BOOT
+ */
+export function HomePage() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate(ROUTES.LOGIN, { replace: true });
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col">
+      <header className="flex items-center justify-between px-4 py-3 bg-white border-b border-gray-200 safe-area-top">
+        <span className="text-lg font-medium text-gray-800">AIKO-BOOT</span>
+        <button
+          type="button"
+          onClick={handleLogout}
+          className="text-sm text-gray-600 hover:text-gray-900"
+        >
+          退出
+        </button>
+      </header>
+      <main className="flex-1 flex flex-col items-center justify-center px-4">
+        <h1 className="text-2xl font-semibold text-gray-900 mb-1">AIKO-BOOT</h1>
+        <p className="text-gray-500 text-sm">欢迎回来，{user?.username ?? ''}</p>
+      </main>
+    </div>
+  );
+}

package/template/packages/mobile/src/pages/LoginPage.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useAuth } from '@scaffold/shared-auth';
+import { LoginForm } from '@/components/LoginForm';
+import { ROUTES } from '@/routes/routes';
+
+/**
+ * 登录页：已登录则重定向到主页；登录成功后跳转到 from 或主页
+ */
+export function LoginPage() {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const from = (location.state as { from?: { pathname: string } } | null)?.from?.pathname;
+
+  useEffect(() => {
+    if (user) {
+      navigate(from ?? ROUTES.HOME, { replace: true });
+    }
+  }, [user, navigate, from]);
+
+  if (user) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <span className="text-gray-500">正在跳转...</span>
+      </div>
+    );
+  }
+
+  return (
+    <main className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+      <LoginForm />
+    </main>
+  );
+}

package/template/packages/mobile/src/pages/index.ts

@@ -0,0 +1,2 @@
+export { LoginPage } from './LoginPage';
+export { HomePage } from './HomePage';

package/template/packages/mobile/src/routes/ProtectedRoute.tsx

@@ -0,0 +1,29 @@
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from '@scaffold/shared-auth';
+import { ROUTES } from './routes';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+/**
+ * 需登录才能访问的页面包装器，未登录时重定向到登录页并记录来自的路径
+ */
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { user, isLoading } = useAuth();
+  const location = useLocation();
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <span className="text-gray-500">加载中...</span>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to={ROUTES.LOGIN} state={{ from: location }} replace />;
+  }
+
+  return <>{children}</>;
+}

package/template/packages/mobile/src/routes/index.tsx

@@ -0,0 +1,24 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { ProtectedRoute } from './ProtectedRoute';
+import { LoginPage } from '@/pages/LoginPage';
+import { HomePage } from '@/pages/HomePage';
+import { ROUTES } from './routes';
+
+export function AppRouter() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path={ROUTES.LOGIN} element={<LoginPage />} />
+        <Route
+          path={ROUTES.HOME}
+          element={
+            <ProtectedRoute>
+              <HomePage />
+            </ProtectedRoute>
+          }
+        />
+        <Route path="*" element={<Navigate to={ROUTES.HOME} replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}

package/template/packages/mobile/src/routes/routes.ts

@@ -0,0 +1,11 @@
+/**
+ * 路由路径常量，统一维护便于引用与重定向
+ */
+export const ROUTES = {
+  /** 登录页 */
+  LOGIN: '/login',
+  /** 主页（登录后） */
+  HOME: '/',
+} as const;
+
+export type RoutePath = (typeof ROUTES)[keyof typeof ROUTES];

package/template/packages/mobile/src/types/index.ts

@@ -0,0 +1,5 @@
+/**
+ * 全局类型定义
+ */
+
+// 预留：页面或组件需要的公共类型可在此声明

package/template/packages/mobile/src/vite-env.d.ts

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

package/template/packages/mobile/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/template/packages/mobile/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/packages/mobile/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 3002,
+  },
+  optimizeDeps: {
+    include: ['@scaffold/api/client', '@scaffold/shared'],
+    exclude: ['@scaffold/shared-auth'],
+  },
+});

package/template/packages/shared/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@scaffold/shared",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "lint": "eslint src"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.0"
+  }
+}

package/template/packages/shared/src/constants.ts

@@ -0,0 +1,8 @@
+/** API 基础 URL 环境变量 key（admin: VITE_API_URL, mobile: NEXT_PUBLIC_API_URL） */
+export const API_BASE_URL_KEY = 'API_URL';
+
+/** 默认 API 基础 URL */
+export const DEFAULT_API_BASE_URL = 'http://localhost:3001';
+
+/** 本地存储用户信息的 key，供 mobile/admin 鉴权模块统一使用 */
+export const AUTH_STORAGE_KEY = 'scaffold_auth';

package/template/packages/shared/src/index.ts

@@ -0,0 +1,5 @@
+export {
+  API_BASE_URL_KEY,
+  DEFAULT_API_BASE_URL,
+  AUTH_STORAGE_KEY,
+} from './constants';

package/template/packages/shared/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/template/packages/shared-auth/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@scaffold/shared-auth",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "lint": "eslint src"
+  },
+  "dependencies": {
+    "@scaffold/api": "workspace:*",
+    "@scaffold/shared": "workspace:*",
+    "react": "^19.2.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "typescript": "^5.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  }
+}

package/template/packages/shared-auth/src/AuthContext.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import { AuthApi } from '@scaffold/api/client';
+import type { LoginResultDto } from '@scaffold/api/client';
+import { AUTH_STORAGE_KEY } from '@scaffold/shared';
+
+/** 登录接口可能返回的 token 字段（JWT / OAuth2 常见形态），与 LoginResultDto 兼容 */
+export type AuthLoginResult = LoginResultDto & {
+  accessToken?: string;
+  refreshToken?: string;
+  /** 有效时长（秒），前端可据此算 expiresAt */
+  expiresIn?: number;
+};
+
+/** 持久化结构：user 必选，token 相关可选；无 token 时与仅存 user 的旧格式兼容 */
+export interface StoredAuth {
+  user: LoginResultDto;
+  accessToken?: string;
+  refreshToken?: string;
+  /** 毫秒时间戳，accessToken 过期时间 */
+  expiresAt?: number;
+}
+
+export interface AuthState {
+  user: LoginResultDto | null;
+  /** 当前 accessToken（有则可用于 getAuthHeaders，兼容 JWT/OAuth2） */
+  accessToken: string | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+export interface AuthContextValue extends AuthState {
+  login: (username: string, password: string) => Promise<void>;
+  logout: () => void;
+  setError: (error: string | null) => void;
+  /** 供请求封装注入鉴权头：有 accessToken 时返回 { Authorization: 'Bearer <token>' }，否则 {} */
+  getAuthHeaders: () => Record<string, string>;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+function readStoredAuth(): StoredAuth | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = localStorage.getItem(AUTH_STORAGE_KEY);
+    if (!raw) return null;
+    const data = JSON.parse(raw) as Partial<StoredAuth>;
+    if (!data?.user) return null;
+    return {
+      user: data.user,
+      accessToken: data.accessToken,
+      refreshToken: data.refreshToken,
+      expiresAt: data.expiresAt,
+    };
+  } catch {
+    return null;
+  }
+}
+
+function writeStoredAuth(stored: StoredAuth | null): void {
+  if (typeof window === 'undefined') return;
+  try {
+    if (stored?.user) {
+      localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(stored));
+    } else {
+      localStorage.removeItem(AUTH_STORAGE_KEY);
+    }
+  } catch (error) {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error('[AuthContext] Failed to write auth to storage', error);
+    }
+  }
+}
+
+export interface AuthProviderProps {
+  apiBaseUrl: string;
+  children: ReactNode;
+}
+
+export function AuthProvider({ apiBaseUrl, children }: AuthProviderProps) {
+  const [user, setUser] = useState<LoginResultDto | null>(null);
+  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hydrated, setHydrated] = useState(false);
+
+  const authApi = useMemo(() => new AuthApi(apiBaseUrl), [apiBaseUrl]);
+
+  useEffect(() => {
+    const stored = readStoredAuth();
+    if (stored) {
+      setUser(stored.user);
+      setAccessToken(stored.accessToken ?? null);
+    }
+    setHydrated(true);
+  }, []);
+
+  const login = useCallback(
+    async (username: string, password: string) => {
+      setError(null);
+      setIsLoading(true);
+      try {
+        const data = (await authApi.login({ username, password })) as AuthLoginResult;
+        const userInfo: LoginResultDto = {
+          id: data.id,
+          username: data.username,
+          email: data.email,
+        };
+        const expiresAt = data.expiresIn
+          ? Date.now() + data.expiresIn * 1000
+          : undefined;
+        const stored: StoredAuth = {
+          user: userInfo,
+          ...(data.accessToken && { accessToken: data.accessToken }),
+          ...(data.refreshToken && { refreshToken: data.refreshToken }),
+          ...(expiresAt !== undefined && { expiresAt }),
+        };
+        setUser(userInfo);
+        setAccessToken(data.accessToken ?? null);
+        writeStoredAuth(stored);
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : '登录失败';
+        setError(msg);
+        throw err;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [authApi]
+  );
+
+  const logout = useCallback(() => {
+    setUser(null);
+    setAccessToken(null);
+    setError(null);
+    writeStoredAuth(null);
+  }, []);
+
+  const getAuthHeaders = useCallback((): Record<string, string> => {
+    const token = hydrated ? accessToken : null;
+    return token ? { Authorization: `Bearer ${token}` } : {};
+  }, [accessToken, hydrated]);
+
+  const value = useMemo<AuthContextValue>(
+    () => ({
+      user: hydrated ? user : null,
+      accessToken: hydrated ? accessToken : null,
+      isLoading,
+      error,
+      login,
+      logout,
+      setError,
+      getAuthHeaders,
+    }),
+    [user, accessToken, hydrated, isLoading, error, login, logout, getAuthHeaders]
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth(): AuthContextValue {
+  const ctx = useContext(AuthContext);
+  if (ctx == null) {
+    throw new Error('useAuth must be used within AuthProvider');
+  }
+  return ctx;
+}

package/template/packages/shared-auth/src/AuthProviderWrapper.tsx

@@ -0,0 +1,29 @@
+import { AuthProvider } from './AuthContext';
+import { DEFAULT_API_BASE_URL } from '@scaffold/shared';
+
+function getApiBaseUrl(): string {
+  try {
+    if (typeof import.meta === 'undefined') return DEFAULT_API_BASE_URL;
+    const meta = import.meta as { env?: { VITE_API_URL?: string } };
+    const url = meta.env?.VITE_API_URL;
+    if (url) return url;
+  } catch {
+    // ignore
+  }
+  return DEFAULT_API_BASE_URL;
+}
+
+export interface AuthProviderWrapperProps {
+  children: React.ReactNode;
+  /** 可选：覆盖从环境变量读取的 API 基础 URL */
+  apiBaseUrl?: string;
+}
+
+/**
+ * 为应用根节点提供鉴权 Context，API 地址从 VITE_API_URL 或 shared 默认值读取。
+ * admin / mobile 可直接使用，无需各自维护一份。
+ */
+export function AuthProviderWrapper({ children, apiBaseUrl }: AuthProviderWrapperProps) {
+  const baseUrl = apiBaseUrl ?? getApiBaseUrl();
+  return <AuthProvider apiBaseUrl={baseUrl}>{children}</AuthProvider>;
+}

package/template/packages/shared-auth/src/index.ts

@@ -0,0 +1,10 @@
+export {
+  AuthProvider,
+  useAuth,
+  type AuthState,
+  type AuthContextValue,
+  type AuthProviderProps,
+  type AuthLoginResult,
+  type StoredAuth,
+} from './AuthContext';
+export { AuthProviderWrapper, type AuthProviderWrapperProps } from './AuthProviderWrapper';

package/template/packages/shared-auth/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "react-jsx",
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}