@svton/cli 1.0.2 → 1.0.4

package/dist/index.js

@@ -74,9 +74,12 @@ var import_fs_extra = __toESM(require("fs-extra"));
 var import_path = __toESM(require("path"));
 async function copyTemplateFiles(config) {
   const { template, projectPath } = config;
-  const cliDir = import_path.default.dirname(import_path.default.dirname(__dirname));
-  const frameworkRoot = import_path.default.dirname(import_path.default.dirname(cliDir));
-  const templateDir = import_path.default.join(frameworkRoot, "templates");
+  const cliPackageRoot = import_path.default.dirname(__dirname);
+  let templateDir = import_path.default.join(cliPackageRoot, "templates");
+  if (!await import_fs_extra.default.pathExists(templateDir)) {
+    const frameworkRoot = import_path.default.dirname(import_path.default.dirname(cliPackageRoot));
+    templateDir = import_path.default.join(frameworkRoot, "templates");
+  }
   logger.debug(`Copying template files from: ${templateDir}`);
   if (!await import_fs_extra.default.pathExists(templateDir)) {
     logger.warn("Template directory not found, using built-in minimal templates");
@@ -745,7 +748,7 @@ async function createProjectFromTemplate(config) {
 }
 
 // package.json
-var version = "1.0.2";
+var version = "1.0.4";
 
 // src/index.ts
 async function cli() {

package/dist/index.mjs

@@ -47,9 +47,12 @@ import fs from "fs-extra";
 import path from "path";
 async function copyTemplateFiles(config) {
   const { template, projectPath } = config;
-  const cliDir = path.dirname(path.dirname(__dirname));
-  const frameworkRoot = path.dirname(path.dirname(cliDir));
-  const templateDir = path.join(frameworkRoot, "templates");
+  const cliPackageRoot = path.dirname(__dirname);
+  let templateDir = path.join(cliPackageRoot, "templates");
+  if (!await fs.pathExists(templateDir)) {
+    const frameworkRoot = path.dirname(path.dirname(cliPackageRoot));
+    templateDir = path.join(frameworkRoot, "templates");
+  }
   logger.debug(`Copying template files from: ${templateDir}`);
   if (!await fs.pathExists(templateDir)) {
     logger.warn("Template directory not found, using built-in minimal templates");
@@ -718,7 +721,7 @@ async function createProjectFromTemplate(config) {
 }
 
 // package.json
-var version = "1.0.2";
+var version = "1.0.4";
 
 // src/index.ts
 async function cli() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svton/cli",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Svton CLI - Create full-stack applications with NestJS, Next.js, and Taro",
   "keywords": [
     "cli",
@@ -30,6 +30,7 @@
   "files": [
     "dist",
     "bin",
+    "templates",
     "README.md",
     "LICENSE"
   ],

package/templates/apps/admin/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />

package/templates/apps/admin/next.config.js

@@ -0,0 +1,15 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ['@svton/hooks'],
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
+  },
+};
+
+module.exports = nextConfig;

package/templates/apps/admin/package.json.tpl

@@ -0,0 +1,54 @@
+{
+  "name": "{{ORG_NAME}}/admin",
+  "version": "1.0.0",
+  "description": "{{PROJECT_NAME}} 管理后台",
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start -p 3001",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf .next"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.3",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@svton/api-client": "^1.0.0",
+    "@svton/hooks": "^1.0.0",
+    "@svton/types": "^1.0.0",
+    "axios": "^1.7.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
+    "lucide-react": "^0.462.0",
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.49.0",
+    "swr": "^2.2.5",
+    "tailwind-merge": "^3.0.0",
+    "zod": "^3.22.4",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "autoprefixer": "^10.4.22",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "^15.0.0",
+    "postcss": "^8.5.0",
+    "tailwindcss": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.7.0"
+  }
+}

package/templates/apps/admin/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/apps/admin/src/app/globals.css

@@ -0,0 +1,37 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/apps/admin/src/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: '管理后台',
+  description: '项目管理后台',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="zh-CN">
+      <body>{children}</body>
+    </html>
+  );
+}

package/templates/apps/admin/src/app/login/page.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { usePersistFn } from '@svton/hooks';
+import type { LoginDto } from '{{ORG_NAME}}/types';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [form, setForm] = useState<LoginDto>({ phone: '', password: '' });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = usePersistFn(async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      // 这里应该使用 @svton/api-client 的 API
+      // const response = await apiClient.auth.login(form);
+      // localStorage.setItem('token', response.data.accessToken);
+      
+      // 模拟登录成功
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      router.push('/users');
+    } catch (err: any) {
+      setError(err.message || '登录失败');
+    } finally {
+      setLoading(false);
+    }
+  });
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="max-w-md w-full space-y-8 p-8 bg-white rounded-lg shadow">
+        <div>
+          <h2 className="text-center text-3xl font-bold text-gray-900">
+            管理后台
+          </h2>
+          <p className="mt-2 text-center text-sm text-gray-600">
+            请登录您的账号
+          </p>
+        </div>
+
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded">
+              {error}
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="phone" className="block text-sm font-medium text-gray-700">
+                手机号
+              </label>
+              <input
+                id="phone"
+                type="tel"
+                required
+                value={form.phone}
+                onChange={(e) => setForm({ ...form, phone: e.target.value })}
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                placeholder="请输入手机号"
+              />
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                密码
+              </label>
+              <input
+                id="password"
+                type="password"
+                required
+                value={form.password}
+                onChange={(e) => setForm({ ...form, password: e.target.value })}
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                placeholder="请输入密码"
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? '登录中...' : '登录'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/templates/apps/admin/src/app/page.tsx

@@ -0,0 +1,8 @@
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-24">
+      <h1 className="text-4xl font-bold">管理后台</h1>
+      <p className="mt-4 text-gray-600">欢迎使用管理后台</p>
+    </main>
+  );
+}

package/templates/apps/admin/src/app/users/page.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { usePersistFn } from '@svton/hooks';
+import type { UserVo, UserListParams } from '{{ORG_NAME}}/types';
+
+export default function UsersPage() {
+  const [users, setUsers] = useState<UserVo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [params, setParams] = useState<UserListParams>({
+    page: 1,
+    pageSize: 10,
+  });
+  const [total, setTotal] = useState(0);
+
+  const fetchUsers = usePersistFn(async () => {
+    setLoading(true);
+    try {
+      // 这里应该使用 @svton/api-client 的 API
+      // const response = await apiClient.users.list(params);
+      // setUsers(response.data.list);
+      // setTotal(response.data.total);
+      
+      // 模拟数据
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      setUsers([
+        {
+          id: 1,
+          phone: '13800138000',
+          nickname: '测试用户',
+          avatar: '',
+          role: 'user',
+          status: 1,
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+        },
+      ]);
+      setTotal(1);
+    } catch (error) {
+      console.error('获取用户列表失败', error);
+    } finally {
+      setLoading(false);
+    }
+  });
+
+  useEffect(() => {
+    fetchUsers();
+  }, [params]);
+
+  const handlePageChange = usePersistFn((page: number) => {
+    setParams({ ...params, page });
+  });
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div className="px-4 py-6 sm:px-0">
+          <div className="bg-white rounded-lg shadow">
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h1 className="text-2xl font-bold text-gray-900">用户管理</h1>
+            </div>
+
+            {loading ? (
+              <div className="p-8 text-center text-gray-500">加载中...</div>
+            ) : (
+              <>
+                <div className="overflow-x-auto">
+                  <table className="min-w-full divide-y divide-gray-200">
+                    <thead className="bg-gray-50">
+                      <tr>
+                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          ID
+                        </th>
+                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          手机号
+                        </th>
+                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          昵称
+                        </th>
+                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          角色
+                        </th>
+                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          状态
+                        </th>
+                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          创建时间
+                        </th>
+                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          操作
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="bg-white divide-y divide-gray-200">
+                      {users.map((user) => (
+                        <tr key={user.id}>
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                            {user.id}
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                            {user.phone}
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                            {user.nickname}
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                            {user.role}
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <span
+                              className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
+                                user.status === 1
+                                  ? 'bg-green-100 text-green-800'
+                                  : 'bg-red-100 text-red-800'
+                              }`}
+                            >
+                              {user.status === 1 ? '启用' : '禁用'}
+                            </span>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            {new Date(user.createdAt).toLocaleDateString()}
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                            <button className="text-blue-600 hover:text-blue-900 mr-4">
+                              编辑
+                            </button>
+                            <button className="text-red-600 hover:text-red-900">
+                              删除
+                            </button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+
+                <div className="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
+                  <div className="text-sm text-gray-700">
+                    共 {total} 条记录
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => handlePageChange(params.page! - 1)}
+                      disabled={params.page === 1}
+                      className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      上一页
+                    </button>
+                    <button
+                      onClick={() => handlePageChange(params.page! + 1)}
+                      disabled={params.page! * params.pageSize! >= total}
+                      className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      下一页
+                    </button>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/apps/admin/src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/templates/apps/admin/src/hooks/useAPI.ts

@@ -0,0 +1,130 @@
+/**
+ * Admin 端 useAPI Hook
+ * 基于 SWR 提供高级功能：
+ * - 自动缓存和重新验证
+ * - 乐观更新
+ * - 依赖刷新
+ * - 条件请求
+ * - 分页支持
+ */
+
+import useSWR, { type SWRConfiguration, type SWRResponse } from 'swr';
+import useSWRInfinite, { type SWRInfiniteConfiguration } from 'swr/infinite';
+import useSWRMutation, { type SWRMutationConfiguration } from 'swr/mutation';
+import { apiAsync } from '@/lib/api-client';
+import type { ApiName, ApiParams, ApiResponse } from '@svton/api-client';
+// 引入类型定义以启用模块增强
+import '@svton/types';
+
+/**
+ * 生成 SWR key
+ */
+function generateKey<K extends ApiName>(apiName: K, params?: ApiParams<K>): string | null {
+  if (params === undefined || params === null) {
+    return null; // 条件请求：params 为空时不发起请求
+  }
+  return JSON.stringify([apiName, params]);
+}
+
+/**
+ * SWR fetcher
+ */
+async function fetcher<K extends ApiName>(key: string): Promise<ApiResponse<K>> {
+  const [apiName, params] = JSON.parse(key);
+  return (
+    params !== undefined
+      ? await (apiAsync as any)(apiName, params)
+      : await (apiAsync as any)(apiName)
+  ) as ApiResponse<K>;
+}
+
+/**
+ * useQuery Hook - 用于数据获取（GET 请求）
+ *
+ * 特性：
+ * - ✅ 自动缓存：相同请求自动复用缓存
+ * - ✅ 自动重新验证：窗口聚焦、网络恢复时自动刷新
+ * - ✅ 依赖刷新：params 变化时自动重新请求
+ * - ✅ 条件请求：params 为 null 时不发起请求
+ * - ✅ 乐观更新：支持 mutate 进行本地更新
+ *
+ * @example
+ * ```tsx
+ * function ContentList() {
+ *   const { data, error, isLoading, mutate } = useQuery('GET:/contents', {
+ *     page: 1,
+ *     pageSize: 20
+ *   });
+ *
+ *   if (isLoading) return <div>加载中...</div>;
+ *   if (error) return <div>错误: {error.message}</div>;
+ *
+ *   return <div>{data?.items.map(...)}</div>;
+ * }
+ * ```
+ */
+export function useQuery<K extends ApiName>(
+  apiName: K,
+  params?: ApiParams<K> | null,
+  config?: SWRConfiguration<ApiResponse<K>>,
+): SWRResponse<ApiResponse<K>> {
+  const key = generateKey(apiName, params as ApiParams<K>);
+
+  return useSWR<ApiResponse<K>>(key, fetcher, {
+    revalidateOnFocus: true, // 窗口聚焦时重新验证
+    revalidateOnReconnect: true, // 网络恢复时重新验证
+    dedupingInterval: 2000, // 2秒内去重
+    ...config,
+  });
+}
+
+/**
+ * useMutation Hook - 用于数据提交（POST/PUT/DELETE 请求）
+ *
+ * @example
+ * ```tsx
+ * function CreateContent() {
+ *   const { trigger, isMutating } = useMutation('POST:/contents');
+ *
+ *   const handleSubmit = async (formData) => {
+ *     try {
+ *       const result = await trigger({
+ *         title: formData.title,
+ *         body: formData.body,
+ *       });
+ *       console.log('Created:', result);
+ *     } catch (error) {
+ *       console.error('Failed:', error);
+ *     }
+ *   };
+ *
+ *   return <Button onClick={handleSubmit} loading={isMutating}>提交</Button>;
+ * }
+ * ```
+ */
+export function useMutation<K extends ApiName>(
+  apiName: K,
+  config?: SWRMutationConfiguration<ApiResponse<K>, Error, string, ApiParams<K>>,
+) {
+  const key = apiName; // mutation 使用 apiName 作为 key
+
+  return useSWRMutation<ApiResponse<K>, Error, string, ApiParams<K>>(
+    key,
+    async (_key, { arg }) => {
+      return (
+        arg !== undefined ? await (apiAsync as any)(apiName, arg) : await (apiAsync as any)(apiName)
+      ) as ApiResponse<K>;
+    },
+    config,
+  );
+}
+
+/**
+ * 手动刷新指定 key 的缓存
+ */
+export { mutate } from 'swr';
+
+/**
+ * 全局 SWR 配置
+ */
+export type { SWRConfiguration };