@wzyjs/cli 0.3.32 → 0.3.36

package/template/web/base/src/utils/trpc/utils.ts

@@ -0,0 +1,61 @@
+'use client'
+
+import { type TRPCLink } from '@trpc/client'
+import { observable } from '@trpc/server/observable'
+
+import { message } from '@/components'
+import { authExemptPaths } from '@/consts'
+import { type ApiRouter } from '@/server/trpc'
+
+const isRN = () => {
+  return typeof navigator !== 'undefined' && navigator.product === 'ReactNative'
+}
+
+const redirectToSignIn = () => {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const authExemptPathSet = new Set(authExemptPaths)
+  if (authExemptPathSet.has(window.location.pathname)) {
+    return
+  }
+
+  const callbackUrl = `${window.location.pathname}${window.location.search}${window.location.hash}`
+  window.location.replace(`/auth/signin?callbackUrl=${encodeURIComponent(callbackUrl)}`)
+}
+
+export const getBaseUrl = () => {
+  if (isRN()) {
+    if (__DEV__) {
+      return 'http://192.168.1.16:3000'
+    }
+    return 'https://app.zhenyu.pro'
+  }
+  if (typeof window !== 'undefined') {
+    return window.location.origin
+  }
+  return `http://localhost:${process.env.PORT ?? 3000}`
+}
+
+export const errorLink: TRPCLink<ApiRouter> = () => {
+  return ({ next, op }) => {
+    return observable(observer => {
+      const subscription = next(op).subscribe({
+        next: value => observer.next(value),
+        complete: () => observer.complete(),
+        error: err => {
+          if (isRN()) {
+            console.error(666, 'tRPC request failed:', err)
+          } else if (err.data?.code === 'UNAUTHORIZED') {
+            redirectToSignIn()
+          } else {
+            void message.error(err.data?.formattedError || err.message || '操作失败')
+          }
+          observer.error(err)
+        },
+      })
+      return () => subscription.unsubscribe()
+    })
+  }
+}

package/template/web/base/tailwind.config.cjs

@@ -0,0 +1,7 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.tsx', './src/**/*.ts'],
+  darkMode: 'class',
+  plugins: [],
+  theme: {},
+}

package/template/web/base/tsconfig.json

@@ -0,0 +1,46 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "checkJs": true,
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "noEmit": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "incremental": true,
+    "tsBuildInfoFile": ".next/cache/tsconfig.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@prisma/client": ["./src/server/generated/prisma-client"]
+    }
+  },
+  "include": [
+    ".eslintrc.cjs",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.cjs",
+    "**/*.js",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "src/server/generated",
+    "**/.next"
+  ]
+}

package/template/web/google/_env

@@ -0,0 +1,8 @@
+# 数据库配置
+DATABASE_URL=postgresql://root:password.@localhost:5432/demo
+
+# Google 登录
+NEXTAUTH_URL=http://localhost:4000
+NEXTAUTH_SECRET=
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=

package/template/web/google/package.json

@@ -0,0 +1,55 @@
+{
+  "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": {
+    "@auth/prisma-adapter": "^2.9.1",
+    "@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/utils": "workspace:*",
+    "@wzyjs/uis": "workspace:*",
+    "@zenstackhq/runtime": "2.22.1",
+    "@zenstackhq/trpc": "2.22.1",
+    "antd": "^6.3.1",
+    "next": "^16.2.4",
+    "next-auth": "^4.24.11",
+    "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/google/prisma/models/auth/Account.zmodel

@@ -0,0 +1,26 @@
+import "@wzyjs/next/Base"
+import "./User"
+
+model AuthAccount extends Base {
+  userId            String
+  type              String
+  provider          String
+  providerAccountId String
+  refresh_token     String?  @db.Text
+  access_token      String?  @db.Text
+  expires_at        Int?
+  token_type        String?
+  scope             String?
+  id_token          String?  @db.Text
+  session_state     String?
+
+  user              AuthUser @relation("AuthUserToAccount", fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([provider, providerAccountId])
+  @@deny('all', auth() == null)
+  @@deny('read', isDeleted)
+  @@deny('read', userId != auth().id)
+  @@deny('create', true)
+  @@deny('update', true)
+  @@deny('delete', true)
+}

package/template/web/google/prisma/models/auth/Session.zmodel

@@ -0,0 +1,17 @@
+import "@wzyjs/next/Base"
+import "./User"
+
+model AuthSession extends Base {
+  sessionToken String   @unique
+  userId       String
+  expires      DateTime
+
+  user         AuthUser @relation("AuthUserToSession", fields: [userId], references: [id], onDelete: Cascade)
+
+  @@deny('all', auth() == null)
+  @@deny('read', isDeleted)
+  @@deny('read', userId != auth().id)
+  @@deny('create', true)
+  @@deny('update', true)
+  @@deny('delete', true)
+}

package/template/web/google/prisma/models/auth/User.zmodel

@@ -0,0 +1,22 @@
+import "@wzyjs/next/Base"
+
+import "./Account"
+import "./Session"
+
+model AuthUser extends Base {
+  email         String        @unique @deny('update', true)
+  emailVerified DateTime?
+  name          String?
+  image         String?
+
+  accounts      AuthAccount[] @relation("AuthUserToAccount")
+  sessions      AuthSession[] @relation("AuthUserToSession")
+
+  @@auth()
+  @@deny('all', auth() == null)
+  @@deny('read', isDeleted)
+  @@deny('read', id != auth().id)
+  @@deny('update', id != auth().id)
+  @@deny('create', true)
+  @@deny('delete', true)
+}

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

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

package/template/web/google/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,7 @@
+import NextAuth from 'next-auth'
+
+import { auth } from '@/server/auth/next-auth/options'
+
+const handler = NextAuth(auth)
+
+export { handler as GET, handler as POST }

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

@@ -0,0 +1,56 @@
+'use client'
+
+import Link from 'next/link'
+import { Suspense } from 'react'
+import { useSearchParams } from 'next/navigation'
+
+import { Button, PanelPage, Result, Spin, Typography } from '@/components'
+
+const errorMessageMap: Record<string, string> = {
+  OAuthSignin: '无法发起 Google 登录，请稍后再试。',
+  OAuthCallback: 'Google 登录回调失败，请检查回调地址配置。',
+  OAuthCreateAccount: '创建登录账号失败，请稍后再试。',
+  EmailCreateAccount: '创建登录账号失败，请稍后再试。',
+  Callback: '登录流程中断，请重新发起登录。',
+  OAuthAccountNotLinked: '当前邮箱已绑定其他登录方式。',
+  EmailSignin: '邮件登录失败。',
+  CredentialsSignin: '账号校验失败。',
+  SessionRequired: '当前页面需要先登录。',
+  default: '登录失败，请稍后重试。',
+}
+
+const AuthErrorContent = () => {
+  const searchParams = useSearchParams()
+  const error = searchParams.get('error') || 'default'
+
+  return (
+    <PanelPage eyebrow='Authentication Exception' title='登录失败'>
+      <Result
+        status='error'
+        title='本次认证没有成功完成'
+        subTitle={errorMessageMap[error] ?? errorMessageMap.default}
+        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'>
+          请检查 Google OAuth Client、NEXTAUTH_URL 和 NEXTAUTH_SECRET 配置。
+        </Typography.Paragraph>
+      </div>
+    </PanelPage>
+  )
+}
+
+export default function AuthErrorPage() {
+  return (
+    <Suspense fallback={<Spin />}>
+      <AuthErrorContent />
+    </Suspense>
+  )
+}

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

@@ -0,0 +1,83 @@
+'use client'
+
+import { Suspense, useEffect } from 'react'
+import { signIn, useSession } from 'next-auth/react'
+import { useRouter, useSearchParams } from 'next/navigation'
+
+import { App, Button, GoogleOutlined, PanelPage, Space, Spin, Typography } from '@/components'
+import { getSafeCallbackPath } from '@/utils'
+
+const { Text } = Typography
+
+const SignInPage = () => {
+  const { message } = App.useApp()
+  const { data: session, status } = useSession()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+
+  const callbackUrl = getSafeCallbackPath(searchParams.get('callbackUrl'), '/')
+  const error = searchParams.get('error')
+
+  useEffect(() => {
+    if (status === 'authenticated' && session) {
+      router.push(callbackUrl)
+    }
+  }, [callbackUrl, router, session, status])
+
+  const onGoogleSignIn = async () => {
+    try {
+      await signIn('google', { callbackUrl })
+    } catch (signinError) {
+      console.error(666, '登录失败:', signinError)
+      void message.error('登录失败，请稍后重试')
+    }
+  }
+
+  return (
+    <PanelPage
+      eyebrow='Google Sign In'
+      title='账号登录'
+      description='使用 Google 账号登录后即可访问应用。'
+    >
+      <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'>
+              请重试一次；如果问题持续出现，优先检查 Google Client 配置和回调地址。
+            </p>
+          </div>
+        ) : null}
+
+        <Button
+          type='primary'
+          size='large'
+          className='!h-12 !rounded-lg !text-sm !font-semibold shadow-sm'
+          icon={<GoogleOutlined />}
+          onClick={() => {
+            void onGoogleSignIn()
+          }}
+          block
+        >
+          使用 Google 登录
+        </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'>
+            首次使用前，请在 `.env` 中配置 Google OAuth Client 信息。
+          </Text>
+        </div>
+      </Space>
+    </PanelPage>
+  )
+}
+
+export default function SignIn() {
+  return (
+    <Suspense fallback={<Spin />}>
+      <SignInPage />
+    </Suspense>
+  )
+}

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

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react'
+import { type Metadata } from 'next'
+
+import { AuthGuard } from '@/components/base/AuthGuard'
+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>
+          <AuthGuard>
+            <Layout>
+              {children}
+            </Layout>
+          </AuthGuard>
+        </Providers>
+      </body>
+    </html>
+  )
+}

package/template/web/google/src/components/base/AuthGuard/Loading.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { Spin, Typography } from '@/components'
+
+export const LayoutLoading = () => {
+  return (
+    <div className='flex min-h-screen items-center justify-center bg-slate-50 p-6 text-slate-950 transition-colors dark:bg-[#14171c] dark:text-[#e8edf5]'>
+      <div className='w-full max-w-md rounded-lg border border-slate-200 bg-white p-8 text-center shadow-sm dark:border-[#303846] dark:bg-[#1b2028]'>
+        <Spin size='large' />
+        <Typography.Title level={4} className='!mb-0 !mt-6 !text-xl !font-semibold !text-slate-950 dark:!text-[#e8edf5]'>
+          正在加载
+        </Typography.Title>
+        <Typography.Text className='mt-3 text-sm leading-6 text-slate-500 dark:text-slate-300'>
+          请稍候，正在准备页面内容。
+        </Typography.Text>
+      </div>
+    </div>
+  )
+}

package/template/web/google/src/components/base/AuthGuard/index.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { type ReactNode, useEffect } from 'react'
+import { useSession } from 'next-auth/react'
+import { usePathname, useRouter } from 'next/navigation'
+
+import { authExemptPaths } from '@/consts'
+
+import { LayoutLoading } from './Loading'
+
+interface AuthGuardProps {
+  children: ReactNode
+}
+
+export const AuthGuard = (props: AuthGuardProps) => {
+  const { children } = props
+
+  const { status } = useSession()
+  const pathname = usePathname()
+  const router = useRouter()
+
+  const isAuthExemptPath = pathname ? authExemptPaths.includes(pathname) : false
+
+  useEffect(() => {
+    if (!pathname || status !== 'unauthenticated' || isAuthExemptPath) {
+      return
+    }
+
+    router.replace(`/auth/signin?callbackUrl=${encodeURIComponent(pathname)}`)
+  }, [isAuthExemptPath, pathname, router, status])
+
+  if (status === 'loading') {
+    return <LayoutLoading />
+  }
+
+  if (isAuthExemptPath) {
+    return children
+  }
+
+  if (status === 'unauthenticated') {
+    return null
+  }
+
+  return children
+}

package/template/web/google/src/components/base/Layout/Header/UserAuthStatus.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { signIn, signOut, useSession } from 'next-auth/react'
+
+import {
+  App,
+  Avatar,
+  Button,
+  Dropdown,
+  LoginOutlined,
+  LogoutOutlined,
+  Space,
+  UserOutlined,
+  type MenuProps,
+} from '@/components'
+
+export const UserAuthStatus = () => {
+  const { message } = App.useApp()
+  const { data: session, status } = useSession()
+
+  const onLogin = async () => {
+    try {
+      await signIn('google')
+    } catch (error) {
+      console.error(666, '登录失败:', error)
+      void message.error('登录失败，请稍后重试')
+    }
+  }
+
+  const onLogout = async () => {
+    try {
+      await signOut({ callbackUrl: '/auth/signin' })
+    } catch (error) {
+      console.error(666, '退出登录失败:', error)
+      void message.error('退出登录失败，请稍后重试')
+    }
+  }
+
+  if (status === 'loading') {
+    return (
+      <div className='px-2 text-sm text-slate-400 dark:text-slate-500'>
+        加载中...
+      </div>
+    )
+  }
+
+  if (status === 'unauthenticated') {
+    return (
+      <Button
+        type='text'
+        size='small'
+        className='flex items-center text-slate-700 dark:!text-slate-200'
+        icon={<LoginOutlined />}
+        onClick={onLogin}
+      >
+        登录
+      </Button>
+    )
+  }
+
+  const items: MenuProps['items'] = [
+    {
+      key: 'profile',
+      label: (
+        <div className='max-w-[220px] p-2'>
+          <div className='truncate font-medium'>{session?.user?.name}</div>
+          <div className='truncate text-xs text-slate-500'>{session?.user?.email}</div>
+        </div>
+      ),
+    },
+    {
+      key: 'logout',
+      label: '退出登录',
+      icon: <LogoutOutlined />,
+      onClick: onLogout,
+    },
+  ]
+
+  return (
+    <Dropdown menu={{ items }} placement='bottomRight'>
+      <Space className='flex cursor-pointer items-center rounded-lg px-2 py-1 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800'>
+        <Avatar
+          size='small'
+          src={session?.user?.image || undefined}
+          icon={!session?.user?.image ? <UserOutlined /> : undefined}
+        />
+        <span className='hidden max-w-[140px] overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-700 dark:text-[#e8edf5] sm:inline'>
+          {session?.user?.name || session?.user?.email || '已登录用户'}
+        </span>
+      </Space>
+    </Dropdown>
+  )
+}

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

@@ -0,0 +1,34 @@
+'use client'
+
+import { Button, MenuOutlined } from '@/components'
+
+import { UserAuthStatus } from './UserAuthStatus'
+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'>
+        <UserAuthStatus />
+        <ThemeToggle />
+      </div>
+    </header>
+  )
+}

package/template/web/google/src/components/base/Providers/index.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { type ReactNode } from 'react'
+import { SessionProvider } from 'next-auth/react'
+
+import { App, AntdRegistry } from '@/components'
+
+import { DisplayProvider } from '../display'
+import { TRPCReactProvider } from './TRPCReactProvider'
+import { ThemeProvider } from '../theme/ThemeProvider'
+
+export interface ProvidersProps {
+  children: ReactNode
+}
+
+export const Providers = (props: ProvidersProps) => {
+  const { children } = props
+
+  return (
+    <TRPCReactProvider>
+      <SessionProvider>
+        <DisplayProvider>
+          <AntdRegistry>
+            <ThemeProvider>
+              <App>
+                {children}
+              </App>
+            </ThemeProvider>
+          </AntdRegistry>
+        </DisplayProvider>
+      </SessionProvider>
+    </TRPCReactProvider>
+  )
+}