@wzyjs/cli 0.3.32 → 0.3.36

package/template/web/base/next.config.js

@@ -0,0 +1,29 @@
+// 只要 Next 读取配置，这个文件就会先执行一次。如果环境变量缺了或格式不对，项目会尽早报错，而不是等运行到某个接口时才炸。
+import './src/env.js'
+
+/** @type {import('next').NextConfig} */
+const config = {
+  output: 'standalone', // 减小打包体积
+  logging: {
+    incomingRequests: false, // 控制台不显示每次请求的日志
+  },
+  poweredByHeader: false, // 响应头里不暴露 x-powered-by: Next.js
+  productionBrowserSourceMaps: false, // 生产环境不生成浏览器端的 .map 文件
+  // transpilePackages: [], // 即使这个包在 node_modules 里，也要把它当源码重新编译
+  experimental: {
+    serverSourceMaps: false, // 不生成服务端的 .map 文件
+  },
+  // 裁掉 Prisma 未使用的 wasm/edge runtime，保留 native query engine，减小 standalone 体积
+  outputFileTracingExcludes: {
+    '/**': [
+      'node_modules/.bun/@prisma+client@*/node_modules/@prisma/client/runtime/query_*',
+      'node_modules/.bun/@prisma+client@*/node_modules/@prisma/client/runtime/wasm-*',
+      'node_modules/.bun/@prisma+client@*/node_modules/@prisma/client/runtime/edge*',
+      'node_modules/.bun/@prisma+client@*/node_modules/.prisma/client/query_engine_bg.*',
+      'node_modules/.bun/@prisma+client@*/node_modules/.prisma/client/wasm*',
+      'node_modules/.bun/@prisma+client@*/node_modules/.prisma/client/edge.js',
+    ],
+  },
+}
+
+export default config

package/template/web/base/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "__WZYJS_APP_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "NODE_ENV=production next build --turbopack",
+    "start": "next start",
+    "generate": "rm -rf src/server/generated && zenstack generate --output ./src/server/generated/.zenstack --no-compile --schema ./prisma/schema.zmodel",
+    "db:push": "prisma db push",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "check": "bun run lint && bun run typecheck",
+    "postinstall": "bun run generate"
+  },
+  "dependencies": {
+    "@prisma/client": "^6.14.0",
+    "@t3-oss/env-nextjs": "^0.10.1",
+    "@tanstack/react-query": "^5.50.0",
+    "@trpc/client": "^11.7.0",
+    "@trpc/next": "^11.7.0",
+    "@trpc/react-query": "^11.7.0",
+    "@trpc/server": "^11.7.0",
+    "@wzyjs/hooks": "workspace:*",
+    "@wzyjs/next": "workspace:*",
+    "@wzyjs/uis": "workspace:*",
+    "@wzyjs/utils": "workspace:*",
+    "@zenstackhq/runtime": "2.22.1",
+    "@zenstackhq/trpc": "2.22.1",
+    "antd": "^6.3.1",
+    "next": "^16.2.4",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "server-only": "^0.0.1",
+    "superjson": "^2.2.1",
+    "zenstack": "2.22.1",
+    "zod": "^3.23.3",
+    "zod-validation-error": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "19.1.10",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "^16.2.4",
+    "postcss": "^8.4.39",
+    "prisma": "^6.14.0",
+    "prisma-json-types-generator": "^3.3.0",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5"
+  }
+}

package/template/web/base/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+  },
+}

package/template/web/base/prisma/models/demo/DemoItem.zmodel

@@ -0,0 +1,8 @@
+import "@wzyjs/next/Base"
+
+model DemoItem extends Base {
+  title       String
+  description String
+
+  @@allow('all', true)
+}

package/template/web/base/prisma/schema.prisma

@@ -0,0 +1,29 @@
+//////////////////////////////////////////////////////////////////////////////////////////////
+// DO NOT MODIFY THIS FILE                                                                  //
+// This file is automatically generated by ZenStack CLI and should not be manually updated. //
+//////////////////////////////////////////////////////////////////////////////////////////////
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+generator client {
+  provider = "prisma-client-js"
+  output   = "../src/server/generated/prisma-client"
+}
+
+generator json {
+  provider = "prisma-json-types-generator"
+}
+
+model DemoItem {
+  id          String    @id() @default(cuid())
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime? @updatedAt()
+  sort        Int?
+  enabled     Boolean   @default(true)
+  isDeleted   Boolean   @default(false)
+  title       String
+  description String
+}

package/template/web/base/prisma/schema.zmodel

@@ -0,0 +1 @@
+import "./models/demo/DemoItem"

package/template/web/base/src/app/api/trpc/[trpc]/route.ts

@@ -0,0 +1,24 @@
+import type { NextRequest } from 'next/server'
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
+
+import { apiRouter } from '@/server/trpc'
+import { createTRPCContext } from '@/server/trpc/context'
+import { cors } from '@/server/utils'
+
+const handler = async (req: NextRequest) => {
+  const response = await fetchRequestHandler({
+    req,
+    router: apiRouter,
+    endpoint: '/api/trpc',
+    createContext: () => createTRPCContext({ req }),
+    onError: ({ path, error }) => {
+      console.error(666, `❌ ${req.method} ${req.nextUrl.pathname} failed on ${path ?? '<no-path>'}: ${error.message}`)
+    },
+  })
+
+  return cors.applyCorsHeaders(req, response)
+}
+
+const OPTIONS = cors.createCorsPreflightResponse
+
+export { handler as GET, handler as POST, OPTIONS }

package/template/web/base/src/app/auth/disabled/page.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import Link from 'next/link'
+
+import { Button, PanelPage, Result, StopOutlined, Typography } from '@/components'
+
+export default function DisabledPage() {
+  return (
+    <PanelPage eyebrow='Access Disabled' title='账号已禁用'>
+      <Result
+        status='403'
+        icon={<StopOutlined style={{ color: '#f5222d' }} />}
+        title='当前账号已被禁用'
+        subTitle={(
+          <Typography.Paragraph className='!mb-0 !text-sm !leading-6 !text-slate-600 dark:!text-slate-300'>
+            登录模块接入后，这里会展示当前账号在应用里的禁用状态。
+          </Typography.Paragraph>
+        )}
+        extra={(
+          <Link href='/auth/signin'>
+            <Button type='primary' danger className='!rounded-lg'>
+              返回登录页
+            </Button>
+          </Link>
+        )}
+      />
+    </PanelPage>
+  )
+}

package/template/web/base/src/app/auth/error/page.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
+
+import { Button, PanelPage, Result, Typography } from '@/components'
+
+const errorMessageMap: Record<string, string> = {
+  OAuthSignin: '无法发起登录，请稍后再试。',
+  OAuthCallback: '登录回调失败，请检查回调地址配置。',
+  OAuthCreateAccount: '创建登录账号失败，请稍后再试。',
+  EmailCreateAccount: '创建登录账号失败，请稍后再试。',
+  Callback: '登录流程中断，请重新发起登录。',
+  OAuthAccountNotLinked: '当前邮箱已绑定其他登录方式。',
+  EmailSignin: '邮件登录失败。',
+  CredentialsSignin: '账号校验失败。',
+  SessionRequired: '当前页面需要先登录。',
+  default: '登录失败，请稍后重试。',
+}
+
+export default function AuthErrorPage() {
+  const searchParams = useSearchParams()
+  const error = searchParams.get('error') || 'default'
+
+  return (
+    <PanelPage eyebrow='Authentication Exception' title='登录失败'>
+      <Result
+        status='error'
+        title='本次认证没有成功完成'
+        subTitle={errorMessageMap[error]}
+        extra={[
+          <Link href='/auth/signin' key='signin'>
+            <Button type='primary' className='!rounded-lg px-6'>
+              返回登录页
+            </Button>
+          </Link>,
+        ]}
+      />
+
+      <div className='mx-4 mb-4 rounded-lg bg-white/70 p-5 dark:bg-white/5 sm:mx-6'>
+        <Typography.Paragraph className='!mb-0 text-center !text-sm !leading-6 !text-slate-500 dark:!text-slate-300'>
+          登录模块接入后，请检查对应的客户端配置、回调地址和会话密钥。
+        </Typography.Paragraph>
+      </div>
+    </PanelPage>
+  )
+}

package/template/web/base/src/app/auth/signin/page.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { Suspense } from 'react'
+
+import { useSearchParams } from 'next/navigation'
+
+import { Button, PanelPage, Space, Spin, Typography } from '@/components'
+
+const { Text } = Typography
+
+const SignInPage = () => {
+  const searchParams = useSearchParams()
+  const error = searchParams.get('error')
+
+  return (
+    <PanelPage
+      eyebrow='Secure Sign In'
+      title='账号登录'
+      description='登录模块接入后，这里会展示对应的登录入口。'
+    >
+      <Space orientation='vertical' size='large' className='w-full'>
+        {error ? (
+          <div className='rounded-lg border border-red-200 bg-red-50/90 p-4 text-left dark:border-red-500/30 dark:bg-red-500/10'>
+            <div className='text-sm font-semibold text-red-700 dark:text-red-300'>
+              登录流程没有完成
+            </div>
+            <p className='mt-2 text-sm leading-6 text-red-600 dark:text-red-200'>
+              请重试一次；如果问题持续出现，优先检查登录配置和回调地址。
+            </p>
+          </div>
+        ) : null}
+
+        <Button type='primary' size='large' className='!h-12 !rounded-lg !text-sm !font-semibold shadow-sm' block disabled>
+          登录模块待接入
+        </Button>
+
+        <div className='rounded-lg bg-white/70 p-5 text-center dark:bg-white/5'>
+          <Text className='text-sm leading-6 text-slate-500 dark:text-slate-300'>
+            基础模板只保留页面骨架。使用 `google` 或 `middle` 模板后会替换为真实登录流程。
+          </Text>
+        </div>
+      </Space>
+    </PanelPage>
+  )
+}
+
+export default function SignIn() {
+  return (
+    <Suspense fallback={<Spin />}>
+      <SignInPage />
+    </Suspense>
+  )
+}

package/template/web/base/src/app/auth/unauthorized/page.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { useRouter, useSearchParams } from 'next/navigation'
+
+import {
+  ArrowRightOutlined,
+  Button,
+  PanelPage,
+  Result,
+  RetweetOutlined,
+  StopOutlined,
+  Typography,
+} from '@/components'
+
+import { getSafeCallbackPath } from '@/utils'
+
+export default function UnauthorizedPage() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+
+  const retryUrl = getSafeCallbackPath(searchParams.get('callbackUrl'), '/')
+
+  return (
+    <PanelPage eyebrow='Access Control' title='访问受限'>
+      <Result
+        status='403'
+        title='当前账号暂无访问权限'
+        icon={<StopOutlined style={{ color: '#f5222d' }} />}
+        subTitle={(
+          <Typography.Paragraph className='!mb-0 !text-sm !leading-6 !text-slate-600 dark:!text-slate-300'>
+            登录模块接入后，这里会展示当前账号的权限状态。
+          </Typography.Paragraph>
+        )}
+        extra={(
+          <div className='flex w-full flex-col gap-3 sm:flex-row sm:justify-center'>
+            <Button
+              type='primary'
+              icon={<RetweetOutlined />}
+              className='!rounded-lg'
+              onClick={() => {
+                router.push(retryUrl)
+              }}
+            >
+              重试
+            </Button>
+            <Button
+              icon={<ArrowRightOutlined />}
+              className='!rounded-lg'
+              onClick={() => {
+                router.push('/')
+              }}
+            >
+              回到首页
+            </Button>
+          </div>
+        )}
+      />
+    </PanelPage>
+  )
+}

package/template/web/base/src/app/demo/page.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { Button } from '@/components'
+import { api } from '@/utils'
+
+export default function DemoPage() {
+  const itemsQuery = api.demoItem.findMany.useQuery({
+    orderBy: { createdAt: 'desc' },
+    select: {
+      id: true,
+      title: true,
+      description: true,
+    },
+    take: 20,
+  })
+
+  const createItem = api.demoItem.create.useMutation({
+    onSuccess: () => {
+      void itemsQuery.refetch()
+    },
+  })
+
+  const onCreate = () => {
+    void createItem.mutateAsync({
+      data: {
+        title: `示例记录 ${new Date().toLocaleTimeString('zh-CN')}`,
+        description: 'Created from middle template',
+      },
+    })
+  }
+
+  return (
+    <div className='mx-auto max-w-3xl px-5 py-8'>
+      <div className='mb-6 flex items-center justify-between gap-4'>
+        <h1 className='text-2xl font-semibold'>Demo Items</h1>
+        <Button type='primary' loading={createItem.isPending} onClick={onCreate}>
+          新增示例
+        </Button>
+      </div>
+
+      {itemsQuery.isLoading ? (
+        <div className='text-sm text-slate-500 dark:text-[#aab4c2]'>加载中...</div>
+      ) : itemsQuery.data?.length ? (
+        <div className='space-y-3'>
+          {itemsQuery.data.map(item => (
+            <div key={item.id} className='rounded-lg border border-slate-200 bg-white p-4 dark:border-[#303846] dark:bg-[#171c23]'>
+              <div className='font-medium'>{item.title}</div>
+              <div className='mt-2 text-xs text-slate-500 dark:text-[#aab4c2]'>{item.description || '-'}</div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className='rounded-lg border border-slate-200 bg-white p-6 text-sm text-slate-500 dark:border-[#303846] dark:bg-[#171c23] dark:text-[#aab4c2]'>
+          暂无数据，点“新增示例”创建一条。
+        </div>
+      )}
+    </div>
+  )
+}

package/template/web/base/src/app/layout.tsx

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react'
+import { type Metadata } from 'next'
+
+import { Providers } from '@/components/base/Providers'
+import { Layout } from '@/components/base/Layout'
+
+import '@/styles/globals.css'
+
+export const metadata: Metadata = {
+  title: '__WZYJS_APP_DISPLAY_NAME__',
+  icons: [{ rel: 'icon', url: '/favicon.ico' }],
+}
+
+interface RootLayoutProps {
+  children: ReactNode
+}
+
+export default function RootLayout(props: RootLayoutProps) {
+  const { children } = props
+
+  return (
+    <html lang='zh-CN' suppressHydrationWarning>
+      <body suppressHydrationWarning>
+        <Providers>
+          <Layout>
+            {children}
+          </Layout>
+        </Providers>
+      </body>
+    </html>
+  )
+}

package/template/web/base/src/app/not-found.tsx

@@ -0,0 +1,21 @@
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <main className='flex min-h-screen items-center justify-center bg-slate-50 px-5 py-8 transition-colors dark:bg-[#14171c]'>
+      <section className='w-full max-w-xl rounded-lg border border-slate-200 bg-white p-8 text-center shadow-sm transition-colors dark:border-[#303846] dark:bg-[#1b2028]'>
+        <p className='text-sm font-semibold uppercase text-slate-400 dark:text-slate-500'>404</p>
+        <h1 className='mt-3 text-3xl font-semibold text-slate-950 dark:text-[#e8edf5]'>页面没有找到</h1>
+        <p className='mt-4 text-sm leading-6 text-slate-500 dark:text-[#aab4c2]'>
+          这个页面可能已经移动、删除，或者地址输入有误。
+        </p>
+        <Link
+          href='/'
+          className='mt-6 inline-flex h-10 items-center rounded-lg bg-slate-950 px-4 text-sm font-medium text-white transition-colors hover:bg-slate-800 dark:bg-[#e8edf5] dark:text-[#14171c] dark:hover:bg-white'
+        >
+          回到首页
+        </Link>
+      </section>
+    </main>
+  )
+}

package/template/web/base/src/app/page.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import { useMemo } from 'react'
+
+import { Button, PlusOutlined, Spin } from '@/components'
+import { api } from '@/utils'
+
+export default function HomePage() {
+  const projectName = '__WZYJS_APP_DISPLAY_NAME__'
+  const utils = api.useUtils()
+
+  const demoItemsQuery = api.demoItem.findMany.useQuery({
+    orderBy: { createdAt: 'desc' },
+    take: 10,
+  })
+
+  const createDemoItem = api.demoItem.create.useMutation({
+    onSuccess: async () => {
+      await utils.demoItem.findMany.invalidate()
+    },
+  })
+
+  const items = useMemo(() => demoItemsQuery.data ?? [], [demoItemsQuery.data])
+
+  const onCreate = () => {
+    const index = items.length + 1
+    createDemoItem.mutate({
+      data: {
+        title: `Demo Item ${index}`,
+        description: `Created from ${projectName}`,
+      },
+    })
+  }
+
+  return (
+    <div className='px-5 py-10 text-slate-950 dark:text-[#e8edf5]'>
+      <section className='mx-auto max-w-5xl rounded-lg border border-slate-200 bg-white p-8 shadow-sm dark:border-[#303846] dark:bg-[#1b2028] sm:p-10'>
+        <div className='max-w-2xl'>
+          <p className='text-xs font-semibold uppercase text-sky-700 dark:text-sky-300'>
+            Template Project
+          </p>
+          <h1 className='mt-5 text-4xl font-semibold text-slate-950 dark:text-[#f8fafc] sm:text-5xl'>
+            {projectName}
+          </h1>
+          <p className='mt-5 text-base leading-8 text-slate-600 dark:text-[#aab4c2]'>
+            这里保留 Next.js、tRPC、Prisma 和 ZenStack 接入。登录和业务模块按实际项目需要再添加。
+          </p>
+        </div>
+
+        <div className='mt-10 rounded-lg border border-slate-200 bg-slate-50 p-5 dark:border-[#303846] dark:bg-[#202632]'>
+          <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+            <div>
+              <h2 className='text-base font-semibold text-slate-950 dark:text-[#f8fafc]'>Demo Items</h2>
+              <p className='mt-1 text-sm text-slate-500 dark:text-[#aab4c2]'>
+                这个列表通过 tRPC 读取 `DemoItem` 数据。
+              </p>
+            </div>
+            <Button
+              type='primary'
+              icon={<PlusOutlined />}
+              loading={createDemoItem.isPending}
+              onClick={onCreate}
+            >
+              创建一条
+            </Button>
+          </div>
+
+          <div className='mt-5 space-y-3'>
+            {demoItemsQuery.isLoading ? (
+              <div className='flex items-center justify-center rounded-lg border border-dashed border-slate-300 bg-white py-8 dark:border-[#3b4656] dark:bg-[#1b2028]'>
+                <Spin />
+              </div>
+            ) : null}
+
+            {!demoItemsQuery.isLoading && items.length === 0 ? (
+              <div className='rounded-lg border border-dashed border-slate-300 bg-white p-6 text-center text-sm text-slate-500 dark:border-[#3b4656] dark:bg-[#1b2028] dark:text-[#aab4c2]'>
+                暂无数据，点击按钮创建一条。
+              </div>
+            ) : null}
+
+            {items.map(item => (
+              <div key={item.id} className='rounded-lg border border-slate-200 bg-white p-4 dark:border-[#303846] dark:bg-[#1b2028]'>
+                <div className='font-medium text-slate-950 dark:text-[#f8fafc]'>{item.title}</div>
+                <div className='mt-1 text-sm leading-6 text-slate-500 dark:text-[#aab4c2]'>{item.description}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

package/template/web/base/src/components/base/Layout/Header/context.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+
+interface LayoutHeaderContextValue {
+  leftContent?: ReactNode
+  setLeftContent: (content?: ReactNode) => void
+}
+
+const LayoutHeaderContext = createContext<LayoutHeaderContextValue | undefined>(undefined)
+
+interface LayoutHeaderProviderProps {
+  children: ReactNode
+}
+
+export const LayoutHeaderProvider = (props: LayoutHeaderProviderProps) => {
+  const { children } = props
+  const [leftContent, setLeftContentState] = useState<ReactNode>()
+
+  const setLeftContent = useCallback((content?: ReactNode) => {
+    setLeftContentState(content)
+  }, [])
+
+  const value = useMemo<LayoutHeaderContextValue>(() => ({
+    leftContent,
+    setLeftContent,
+  }), [leftContent, setLeftContent])
+
+  return (
+    <LayoutHeaderContext.Provider value={value}>
+      {children}
+    </LayoutHeaderContext.Provider>
+  )
+}
+
+export const useLayoutHeader = () => {
+  const context = useContext(LayoutHeaderContext)
+
+  if (!context) {
+    throw new Error('useLayoutHeader must be used within LayoutHeaderProvider')
+  }
+
+  return context
+}
+
+export const useLayoutHeaderLeft = (content?: ReactNode) => {
+  const { setLeftContent } = useLayoutHeader()
+
+  useEffect(() => {
+    setLeftContent(content)
+
+    return () => {
+      setLeftContent(undefined)
+    }
+  }, [content, setLeftContent])
+}

package/template/web/base/src/components/base/Layout/Header/index.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { Button, MenuOutlined } from '@/components'
+
+import { useLayoutHeader } from './context'
+import { ThemeToggle } from '../../theme/ThemeToggle'
+
+export const LayoutHeader = () => {
+  const { leftContent } = useLayoutHeader()
+
+  return (
+    <header className='flex h-[72px] shrink-0 items-center justify-between border-b border-slate-200/80 bg-white/95 px-5 backdrop-blur transition-colors dark:border-[#303846] dark:bg-[#1b2028]/95'>
+      <div className='min-w-0 flex-1'>
+        {leftContent ?? (
+          <div className='flex min-w-0 items-center gap-3'>
+            <Button
+              type='primary'
+              icon={<MenuOutlined />}
+              className='flex h-9 w-9 items-center justify-center rounded-lg shadow-sm'
+            />
+            <div className='truncate text-xl font-semibold tracking-normal text-slate-950 dark:text-[#e8edf5]'>
+              __WZYJS_APP_DISPLAY_NAME__
+            </div>
+          </div>
+        )}
+      </div>
+      <div className='ml-4 flex shrink-0 items-center gap-3'>
+        <ThemeToggle />
+      </div>
+    </header>
+  )
+}