@ai-partner-x/aiko-boot-cli 0.1.4

package/templates/scaffold-default/packages/mobile/src/components/LoginForm.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { appAuth } from '@scaffold/core';
+import type { NavigateFunction } from 'react-router-dom';
+
+interface LoginFormProps {
+  onSuccessRedirectTo?: string;
+  navigate: NavigateFunction;
+}
+
+export function LoginForm({ onSuccessRedirectTo = '/', navigate }: LoginFormProps) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+    try {
+      const result = await appAuth.login({ account: username, password });
+      if (result.success) {
+        navigate(result.redirectTo ?? onSuccessRedirectTo, { replace: true });
+      } else if (result.error) {
+        setError(result.error.message);
+      }
+    } 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');
+      setError(isNetwork ? '无法连接服务器，请稍后重试' : msg);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  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>}
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full rounded bg-blue-600 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+        >
+          {isSubmitting ? '登录中...' : '登录'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/templates/scaffold-default/packages/mobile/src/hooks/index.ts

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

package/templates/scaffold-default/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/templates/scaffold-default/packages/mobile/src/main.tsx

@@ -0,0 +1,19 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { appAuth, createBackendAuthProvider } from '@scaffold/core';
+import App from './App';
+import './app/globals.css';
+
+const container = document.getElementById('root')!;
+const root = createRoot(container);
+
+// Mobile 默认不配置 env 时，约定后端 API 在 scaffold/api 的默认端口 3001
+const apiBaseUrl = (import.meta.env.VITE_API_URL as string | undefined) ?? 'http://localhost:3001';
+
+appAuth.setup(createBackendAuthProvider(apiBaseUrl, { loginUrl: '/login' })).then(() => {
+  root.render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+});

package/templates/scaffold-default/packages/mobile/src/pages/HomePage.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+import { appAuth } from '@scaffold/core';
+import type { AuthUser } from '@scaffold/core';
+import { useNavigate } from 'react-router-dom';
+import { ROUTES } from '@/routes/routes';
+
+/**
+ * 移动端通用主页，展示产品名 AIKO-BOOT（与 admin 一致使用 appAuth）
+ */
+export function HomePage() {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    appAuth.getIdentity().then(setUser);
+  }, []);
+
+  const handleLogout = () => {
+    appAuth.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?.account ?? ''}</p>
+      </main>
+    </div>
+  );
+}

package/templates/scaffold-default/packages/mobile/src/pages/LoginPage.tsx

@@ -0,0 +1,24 @@
+import { useNavigate, useLocation } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
+import { appAuth } from '@scaffold/core';
+import { LoginForm } from '@/components/LoginForm';
+import { ROUTES } from '@/routes/routes';
+
+/**
+ * 登录页：已登录则重定向到主页；否则展示登录表单（与 admin 一致）
+ */
+export function LoginPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const from = (location.state as { from?: { pathname: string } } | null)?.from?.pathname;
+
+  if (appAuth.check().isAuthenticated) {
+    return <Navigate to={from ?? ROUTES.HOME} replace />;
+  }
+
+  return (
+    <main className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+      <LoginForm onSuccessRedirectTo={from ?? ROUTES.HOME} navigate={navigate} />
+    </main>
+  );
+}

package/templates/scaffold-default/packages/mobile/src/pages/index.ts

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

package/templates/scaffold-default/packages/mobile/src/routes/ProtectedRoute.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { appAuth } from '@scaffold/core';
+import type { AuthUser } from '@scaffold/core';
+import { ROUTES } from './routes';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+/**
+ * 需登录才能访问的页面包装器，未登录时重定向到登录页并记录来自的路径（与 admin 的 auth 中间件行为一致）
+ */
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const [user, setUser] = useState<AuthUser | null | undefined>(undefined);
+  const location = useLocation();
+
+  useEffect(() => {
+    appAuth.getIdentity().then(setUser);
+  }, []);
+
+  if (user === undefined) {
+    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/templates/scaffold-default/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/templates/scaffold-default/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/templates/scaffold-default/packages/mobile/src/types/index.ts

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

package/templates/scaffold-default/packages/mobile/src/vite-env.d.ts

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

package/templates/scaffold-default/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/templates/scaffold-default/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/templates/scaffold-default/packages/mobile/vite.config.ts

@@ -0,0 +1,20 @@
+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: {
+    // workspace package exports can change frequently during development;
+    // excluding avoids stale pre-bundled output missing new named exports.
+    exclude: ['@scaffold/core'],
+  },
+});

package/templates/scaffold-default/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'

package/templates/scaffold-default/scripts/postinstall.cjs

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+
+const { spawnSync } = require('node:child_process');
+
+function shouldSkip() {
+  if (process.env.SKIP_SQLITE_REBUILD === 'true') {
+    console.log('[postinstall] SKIP_SQLITE_REBUILD=true, skipping better-sqlite3 rebuild.');
+    return true;
+  }
+  if (process.env.CI === 'true') {
+    console.log('[postinstall] CI environment detected, skipping better-sqlite3 rebuild.');
+    return true;
+  }
+  return false;
+}
+
+function main() {
+  if (shouldSkip()) {
+    return;
+  }
+
+  const pkgManager = process.env.npm_execpath || 'pnpm';
+  console.log('[postinstall] Rebuilding better-sqlite3 via', pkgManager);
+
+  const result = spawnSync(
+    pkgManager,
+    ['rebuild', 'better-sqlite3'],
+    { stdio: 'inherit', shell: false }
+  );
+
+  if (result.error) {
+    console.warn('[postinstall] better-sqlite3 rebuild errored but is non-fatal:', result.error);
+    return;
+  }
+
+  if (result.status !== 0) {
+    console.warn('[postinstall] better-sqlite3 rebuild exited with code', result.status, '(treated as non-fatal).');
+  }
+}
+
+main();
+

package/templates/scaffold-default/scripts/rebuild-sqlite.cjs

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+const { spawnSync } = require('node:child_process');
+
+function main() {
+  const pkgManager = process.env.npm_execpath || 'pnpm';
+
+  const result = spawnSync(
+    pkgManager,
+    ['rebuild', 'better-sqlite3'],
+    { stdio: 'inherit', shell: false }
+  );
+
+  if (result.error) {
+    console.error('[rebuild-sqlite] Failed to start rebuild:', result.error);
+    process.exit(1);
+  }
+
+  process.exit(result.status ?? 0);
+}
+
+main();
+