@wzyjs/cli 0.3.31 → 0.3.36

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

@@ -0,0 +1,27 @@
+'use client'
+
+import { type ReactNode } from 'react'
+
+import { LayoutHeader } from './Header'
+import { LayoutHeaderProvider } from './Header/context'
+import { useDisplay } from '../display'
+
+interface LayoutProps {
+  children: ReactNode
+}
+
+export const Layout = (props: LayoutProps) => {
+  const { children } = props
+  const { isEmbedded } = useDisplay()
+
+  return (
+    <div className='flex h-screen flex-col overflow-hidden bg-slate-50 text-slate-950 transition-colors dark:bg-[#14171c] dark:text-[#e8edf5]'>
+      <LayoutHeaderProvider>
+        {isEmbedded ? null : <LayoutHeader />}
+        <main className='flex-1 overflow-auto'>
+          {children}
+        </main>
+      </LayoutHeaderProvider>
+    </div>
+  )
+}

package/template/web/base/src/components/base/Providers/TRPCReactProvider.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { type ReactNode, useState } from 'react'
+import { QueryClientProvider } from '@tanstack/react-query'
+
+import { api, createApiClient, getQueryClient } from '@/utils'
+
+export interface TRPCReactProviderProps {
+  children: ReactNode
+}
+
+export const TRPCReactProvider = (props: TRPCReactProviderProps) => {
+  const { children } = props
+
+  const [apiClient] = useState(createApiClient)
+  const [queryClient] = useState(getQueryClient)
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <api.Provider client={apiClient} queryClient={queryClient}>
+        {children}
+      </api.Provider>
+    </QueryClientProvider>
+  )
+}

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

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

package/template/web/base/src/components/base/display/DisplayProvider.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { Suspense, useMemo } from 'react'
+import { useSearchParams } from 'next/navigation'
+
+import { defaultDisplay } from './consts'
+import { DisplayContext } from './context'
+import { type DisplayProviderProps } from './types'
+import { getDisplay } from './utils'
+
+const DisplayFallbackProvider = (props: DisplayProviderProps) => {
+  const { children } = props
+
+  return (
+    <DisplayContext.Provider value={defaultDisplay}>
+      {children}
+    </DisplayContext.Provider>
+  )
+}
+
+const DisplaySearchParamsProvider = (props: DisplayProviderProps) => {
+  const { children } = props
+  const searchParams = useSearchParams()
+
+  const display = useMemo(() => getDisplay(searchParams), [searchParams])
+
+  return (
+    <DisplayContext.Provider value={display}>
+      {children}
+    </DisplayContext.Provider>
+  )
+}
+
+export const DisplayProvider = (props: DisplayProviderProps) => {
+  const { children } = props
+
+  return (
+    <Suspense fallback={<DisplayFallbackProvider>{children}</DisplayFallbackProvider>}>
+      <DisplaySearchParamsProvider>
+        {children}
+      </DisplaySearchParamsProvider>
+    </Suspense>
+  )
+}

package/template/web/base/src/components/base/display/consts.ts

@@ -0,0 +1,10 @@
+import { type Display } from './types'
+
+export const urlParamKeys = {
+  embedded: 'embedded',
+  theme: 'theme',
+} as const
+
+export const defaultDisplay: Display = {
+  isEmbedded: false,
+}

package/template/web/base/src/components/base/display/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react'
+
+import { defaultDisplay } from './consts'
+import { type Display } from './types'
+
+export const DisplayContext = createContext<Display>(defaultDisplay)

package/template/web/base/src/components/base/display/index.ts

@@ -0,0 +1,4 @@
+export { DisplayProvider } from './DisplayProvider'
+export { useDisplay } from './useDisplay'
+export { getDisplay, getThemeModeFromValue } from './utils'
+export type { Display } from './types'

package/template/web/base/src/components/base/display/types.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react'
+
+import { type ThemeMode } from '../theme/consts'
+
+export interface Display {
+  isEmbedded: boolean
+  themeMode?: ThemeMode
+}
+
+export interface DisplayProviderProps {
+  children: ReactNode
+}

package/template/web/base/src/components/base/display/useDisplay.ts

@@ -0,0 +1,9 @@
+'use client'
+
+import { useContext } from 'react'
+
+import { DisplayContext } from './context'
+
+export const useDisplay = () => {
+  return useContext(DisplayContext)
+}

package/template/web/base/src/components/base/display/utils.ts

@@ -0,0 +1,18 @@
+import { type ThemeMode, themeModes } from '../theme/consts'
+import { urlParamKeys } from './consts'
+import { type Display } from './types'
+
+export const getThemeModeFromValue = (value: string | null): ThemeMode | undefined => {
+  if (value === themeModes.system || value === themeModes.light || value === themeModes.dark) {
+    return value
+  }
+
+  return undefined
+}
+
+export const getDisplay = (searchParams: URLSearchParams): Display => {
+  return {
+    isEmbedded: searchParams.get(urlParamKeys.embedded) === '1',
+    themeMode: getThemeModeFromValue(searchParams.get(urlParamKeys.theme)),
+  }
+}

package/template/web/base/src/components/base/theme/ThemeProvider.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { type ReactNode, useEffect, useMemo, useState } from 'react'
+
+import { ConfigProvider, zh_CN } from '@/components'
+
+import { useProjectLocalStorage } from '@/hooks'
+
+import { AppThemeContext, type AppThemeContextValue } from './context'
+import { getThemeModeFromValue, useDisplay } from '../display'
+import { getNextThemeMode, getThemeAlgorithm, getSystemThemeMode } from './utils'
+import { baseThemeToken, darkThemeToken, themeStoragePath, themeModes, type ThemeMode } from './consts'
+
+interface AppThemeProviderProps {
+  children: ReactNode
+}
+
+export const ThemeProvider = (props: AppThemeProviderProps) => {
+  const { children } = props
+
+  const { themeMode } = useDisplay()
+  const { getValue, setValue } = useProjectLocalStorage('__WZYJS_APP_PACKAGE_NAME__')
+  const [storedMode, setStoredMode] = useState<ThemeMode>(themeModes.system)
+  const [systemMode, setSystemMode] = useState<ThemeMode>(themeModes.light)
+  const [isThemeReady, setIsThemeReady] = useState(false)
+
+  const mode = themeMode ?? storedMode
+  const resolvedMode: ThemeMode = mode === themeModes.system ? systemMode : mode
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const updateSystemMode = () => setSystemMode(getSystemThemeMode())
+
+    updateSystemMode()
+
+    const savedMode = getValue<ThemeMode>(themeStoragePath)
+    setStoredMode(getThemeModeFromValue(savedMode ?? null) ?? themeModes.system)
+
+    setIsThemeReady(true)
+
+    mediaQuery.addEventListener('change', updateSystemMode)
+
+    return () => {
+      mediaQuery.removeEventListener('change', updateSystemMode)
+    }
+  }, [getValue])
+
+  useEffect(() => {
+    if (!isThemeReady) {
+      return
+    }
+
+    setValue(themeStoragePath, storedMode)
+    document.documentElement.classList.toggle(themeModes.dark, resolvedMode === themeModes.dark)
+    document.documentElement.style.colorScheme = resolvedMode
+  }, [isThemeReady, resolvedMode, setValue, storedMode])
+
+  const themeValue = useMemo<AppThemeContextValue>(() => ({
+    mode,
+    resolvedMode,
+    setMode: setStoredMode,
+    toggleMode: () => setStoredMode(getNextThemeMode),
+  }), [mode, resolvedMode])
+
+  return (
+    <AppThemeContext.Provider value={themeValue}>
+      <ConfigProvider
+        locale={zh_CN}
+        theme={{
+          algorithm: getThemeAlgorithm(resolvedMode),
+          token: {
+            ...baseThemeToken,
+            ...(resolvedMode === themeModes.dark
+              ? darkThemeToken
+              : {}),
+          },
+        }}
+      >
+        {children}
+      </ConfigProvider>
+    </AppThemeContext.Provider>
+  )
+}

package/template/web/base/src/components/base/theme/ThemeToggle.tsx

@@ -0,0 +1,26 @@
+import { Button, Dropdown } from '@/components'
+
+import { useAppTheme } from './useAppTheme'
+import { type ThemeMode, themeComponent, themeLabel, themeMenuItems } from './consts'
+
+export const ThemeToggle = () => {
+  const { mode, setMode } = useAppTheme()
+
+  return (
+    <Dropdown
+      trigger={['click']}
+      placement='bottomRight'
+      menu={{
+        items: themeMenuItems,
+        selectedKeys: [mode],
+        onClick: ({ key }) => setMode(key as ThemeMode),
+      }}
+    >
+      <Button
+        shape='circle'
+        icon={themeComponent[mode]}
+        aria-label={`当前主题：${themeLabel[mode]}`}
+      />
+    </Dropdown>
+  )
+}

package/template/web/base/src/components/base/theme/consts.tsx

@@ -0,0 +1,59 @@
+import { type ReactNode } from 'react'
+
+import { DesktopOutlined, MoonOutlined, SunOutlined, type MenuProps } from '@/components'
+
+export const themeStoragePath = 'theme.mode'
+
+export const themeModes = {
+  system: 'system',
+  light: 'light',
+  dark: 'dark',
+} as const
+
+export type ThemeMode = typeof themeModes[keyof typeof themeModes]
+
+export const themeMenuItems: MenuProps['items'] = [
+  {
+    key: themeModes.system,
+    icon: <DesktopOutlined />,
+    label: '跟随系统',
+  },
+  {
+    key: themeModes.light,
+    icon: <SunOutlined />,
+    label: '明亮模式',
+  },
+  {
+    key: themeModes.dark,
+    icon: <MoonOutlined />,
+    label: '暗黑模式',
+  },
+]
+
+export const themeLabel: Record<ThemeMode, string> = {
+  [themeModes.system]: '跟随系统',
+  [themeModes.light]: '明亮模式',
+  [themeModes.dark]: '暗黑模式',
+}
+
+export const themeComponent: Record<ThemeMode, ReactNode> = {
+  [themeModes.system]: <DesktopOutlined />,
+  [themeModes.light]: <SunOutlined />,
+  [themeModes.dark]: <MoonOutlined />,
+}
+
+export const baseThemeToken = {
+  borderRadius: 8,
+  colorPrimary: '#2563eb',
+  fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+}
+
+export const darkThemeToken = {
+  colorBgLayout: '#14171c',
+  colorBgContainer: '#1b2028',
+  colorBgElevated: '#202632',
+  colorBorder: '#303846',
+  colorFillAlter: '#242b36',
+  colorText: '#e8edf5',
+  colorTextSecondary: '#aab4c2',
+}

package/template/web/base/src/components/base/theme/context.ts

@@ -0,0 +1,14 @@
+'use client'
+
+import { createContext } from 'react'
+
+import { type ThemeMode } from './consts'
+
+export interface AppThemeContextValue {
+  mode: ThemeMode
+  setMode: (mode: ThemeMode) => void
+  toggleMode: () => void
+  resolvedMode: ThemeMode
+}
+
+export const AppThemeContext = createContext<AppThemeContextValue | null>(null)

package/template/web/base/src/components/base/theme/useAppTheme.ts

@@ -0,0 +1,15 @@
+'use client'
+
+import { useContext } from 'react'
+
+import { AppThemeContext } from './context'
+
+export const useAppTheme = () => {
+  const context = useContext(AppThemeContext)
+
+  if (!context) {
+    throw new Error('useAppTheme must be used within AppThemeProvider')
+  }
+
+  return context
+}

package/template/web/base/src/components/base/theme/utils.ts

@@ -0,0 +1,17 @@
+import { theme } from '@/components'
+import { type ThemeMode, themeModes } from './consts'
+
+export const getNextThemeMode = (mode: ThemeMode): ThemeMode => {
+  if (mode === themeModes.system) {
+    return themeModes.light
+  }
+  return mode === themeModes.light ? themeModes.dark : themeModes.system
+}
+
+export const getThemeAlgorithm = (mode: ThemeMode) => {
+  return mode === themeModes.dark ? theme.darkAlgorithm : theme.defaultAlgorithm
+}
+
+export const getSystemThemeMode = () => {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? themeModes.dark : themeModes.light
+}

package/template/web/base/src/components/index.ts

@@ -0,0 +1 @@
+export * from '@wzyjs/uis/web'

package/template/web/base/src/consts/index.ts

@@ -0,0 +1,6 @@
+export const authExemptPaths = [
+  '/auth/signin',
+  '/auth/unauthorized',
+  '/auth/disabled',
+  '/auth/error',
+]

package/template/web/base/src/enums/index.ts

@@ -0,0 +1 @@
+export {}

package/template/web/base/src/env.js

@@ -0,0 +1,44 @@
+import { z } from 'zod'
+import { createEnv } from '@t3-oss/env-nextjs'
+
+export const env = createEnv({
+  /**
+   * 在此处指定服务器端环境变量模式。
+   * 这样可以确保应用程序不会使用无效的环境变量构建。
+   */
+  server: {
+    NODE_ENV: z.enum(['development', 'test', 'production']).default('development'),
+    // 数据库
+    DATABASE_URL: z.string().url(),
+  },
+
+  /**
+   * 在此处指定客户端环境变量模式。
+   * 这样可以确保应用程序不会使用无效的环境变量构建。
+   * 要将它们暴露给客户端，请使用 `NEXT_PUBLIC_` 前缀。
+   */
+  client: {},
+
+  /**
+   * 在这里显式传入运行时环境变量的实际值。
+   * `server` / `client` 负责声明校验规则，
+   * `runtimeEnv` 负责把 `process.env` 中对应的值提供给 `createEnv`。
+   */
+  runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+    // 数据库
+    DATABASE_URL: process.env.DATABASE_URL,
+  },
+
+  /**
+   * 使用 `SKIP_ENV_VALIDATION` 运行 `build` 或 `dev` 可以跳过环境变量验证。
+   * 这在 Docker 构建时特别有用。
+   */
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+
+  /**
+   * 使空字符串被视为未定义。
+   * 例如：`SOME_VAR: z.string()` 和 `SOME_VAR=''` 将抛出错误。
+   */
+  emptyStringAsUndefined: true,
+})

package/template/web/base/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from '@wzyjs/hooks/web'

package/template/web/base/src/server/db/client.ts

@@ -0,0 +1,19 @@
+import { PrismaClient } from '@prisma/client'
+
+import { env } from '@/env'
+
+const createPrismaClient = () => {
+  return new PrismaClient({
+    log: env.NODE_ENV === 'development' ? ['error', 'warn'] : ['error'],
+  })
+}
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: ReturnType<typeof createPrismaClient> | undefined
+}
+
+export const db = globalForPrisma.prisma ?? createPrismaClient()
+
+if (env.NODE_ENV !== 'production') {
+  globalForPrisma.prisma = db
+}

package/template/web/base/src/server/routers/index.ts

@@ -0,0 +1,3 @@
+import { createRouter } from '../generated/trpc/routers'
+
+export default createRouter()

package/template/web/base/src/server/trpc/context.ts

@@ -0,0 +1,14 @@
+import { db } from '@/server/db/client'
+
+import { enhance } from '../generated/enhancer/enhance'
+
+export const createTRPCContext = async (opts?: { req?: Request }) => {
+  return {
+    // db, 严禁使用这个模块，而应该使用 prisma
+    req: opts?.req,
+    headers: opts?.req?.headers,
+    prisma: enhance(db),
+  }
+}
+
+export type TRPCContext = Awaited<ReturnType<typeof createTRPCContext>>

package/template/web/base/src/server/trpc/index.ts

@@ -0,0 +1 @@
+export { apiRouter, type ApiRouter, type ApiRouterInput, type ApiRouterOutput } from './router'

package/template/web/base/src/server/trpc/init.ts

@@ -0,0 +1,27 @@
+import { initTRPC } from '@trpc/server'
+import superjson from 'superjson'
+import { ZodError } from 'zod'
+import { fromZodError } from 'zod-validation-error'
+
+import { type TRPCContext } from './context'
+
+const t = initTRPC.context<TRPCContext>().create({
+  transformer: superjson,
+  errorFormatter({ shape, error }) {
+    return {
+      ...shape,
+      data: {
+        ...shape.data,
+        formattedError:
+          error.cause instanceof ZodError
+            ? fromZodError(error.cause).message
+            : null,
+      },
+    }
+  },
+})
+
+export const createCallerFactory = t.createCallerFactory
+export const createTRPCRouter = t.router
+export const createTRPCProcedure = t.procedure
+export const mergeTRPCRouters = t.mergeRouters

package/template/web/base/src/server/trpc/procedures.ts

@@ -0,0 +1,5 @@
+import { createTRPCProcedure } from './init'
+
+export const publicProcedure = createTRPCProcedure
+
+export const procedure = createTRPCProcedure

package/template/web/base/src/server/trpc/router.ts

@@ -0,0 +1,11 @@
+import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server'
+
+import routes from '../routers'
+
+export const apiRouter = routes
+
+export type ApiRouter = typeof apiRouter
+
+export type ApiRouterInput = inferRouterInputs<ApiRouter>
+
+export type ApiRouterOutput = inferRouterOutputs<ApiRouter>

package/template/web/base/src/server/utils/index.ts

@@ -0,0 +1 @@
+export * from '@wzyjs/utils/node'

package/template/web/base/src/styles/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/template/web/base/src/types/index.ts

@@ -0,0 +1 @@
+export type { ApiRouterInput, ApiRouterOutput } from '@/server/trpc'

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

@@ -0,0 +1,4 @@
+export * from '@wzyjs/utils/web'
+
+export { getQueryClient } from './query-client'
+export { api, createApiClient } from './trpc'

package/template/web/base/src/utils/query-client/index.ts

@@ -0,0 +1,31 @@
+import SuperJSON from 'superjson'
+import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query'
+
+let clientQueryClientSingleton: QueryClient | undefined = undefined
+
+const createQueryClient = () => {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 30 * 1000,
+      },
+      hydrate: {
+        deserializeData: SuperJSON.deserialize,
+      },
+      dehydrate: {
+        serializeData: SuperJSON.serialize,
+        shouldDehydrateQuery: (query) => {
+          return defaultShouldDehydrateQuery(query) || query.state.status === 'pending'
+        },
+      },
+    },
+  })
+}
+
+export const getQueryClient = () => {
+  if (typeof window === 'undefined') {
+    return createQueryClient()
+  }
+
+  return (clientQueryClientSingleton ??= createQueryClient())
+}

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

@@ -0,0 +1,23 @@
+'use client'
+
+import SuperJSON from 'superjson'
+
+import { createTRPCReact } from '@trpc/react-query'
+import { httpBatchLink } from '@trpc/client'
+
+import { type ApiRouter } from '@/server/trpc'
+import { errorLink, getBaseUrl } from './utils'
+
+export const api = createTRPCReact<ApiRouter>()
+
+export const createApiClient = () => {
+  return api.createClient({
+    links: [
+      errorLink,
+      httpBatchLink({
+        transformer: SuperJSON,
+        url: getBaseUrl() + '/api/trpc',
+      }),
+    ],
+  })
+}