@wzyjs/cli 0.3.32 → 0.3.37

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>
+  )
+}

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'