@wzyjs/cli 0.3.31 → 0.3.36

package/template/web/middle/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/middle/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/middle/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('middle')
+    } 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/middle/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/middle/src/components/base/Layout/Sidebar/index.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import Link from 'next/link'
+import { useSession } from 'next-auth/react'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { resolveMiddleMenuPages, type MiddleResolvedPage } from '@wzyjs/middle-sdk/page'
+
+import {
+  AppstoreOutlined,
+  LinkOutlined,
+  Typography,
+  getIconNode,
+} from '@/components'
+
+const menuItemClassName = (isActive: boolean) => [
+  'flex h-10 items-center gap-2 rounded-md px-3 text-sm font-medium transition-colors',
+  isActive
+    ? 'bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-200'
+    : 'text-slate-600 hover:bg-slate-100 hover:text-slate-950 dark:text-[#aab4c2] dark:hover:bg-[#202632] dark:hover:text-[#e8edf5]',
+].join(' ')
+
+const getPageIcon = (item: MiddleResolvedPage) => (
+  getIconNode(item.page.icon) ?? (item.isExternal ? <LinkOutlined /> : <AppstoreOutlined />)
+)
+
+const MenuItemContent = (props: { item: MiddleResolvedPage }) => {
+  const { item } = props
+
+  return (
+    <>
+      <span className='text-base leading-none'>{getPageIcon(item)}</span>
+      <span className='truncate'>{item.page.name}</span>
+    </>
+  )
+}
+
+export const LayoutSidebar = () => {
+  const { data: session } = useSession()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  const menuItems = resolveMiddleMenuPages(session?.pages ?? [], {
+    iframePagePath: '/middle',
+    pathname,
+    iframeUrl: searchParams.get('url'),
+  })
+
+  return (
+    <aside className='hidden w-56 shrink-0 border-r border-slate-200 bg-white/90 transition-colors dark:border-[#303846] dark:bg-[#171c23] md:block'>
+      <nav className='p-3' aria-label='主菜单'>
+        <div className='flex flex-col gap-1'>
+          {menuItems.length ? menuItems.map(item => {
+            if (item.isBlank) {
+              return (
+                <a
+                  key={item.page.path}
+                  href={item.href}
+                  target={item.target}
+                  rel={item.rel}
+                  className={menuItemClassName(false)}
+                >
+                  <MenuItemContent item={item} />
+                </a>
+              )
+            }
+
+            return (
+              <Link
+                key={item.page.path}
+                href={item.href}
+                aria-current={item.isActive ? 'page' : undefined}
+                className={menuItemClassName(item.isActive)}
+              >
+                <MenuItemContent item={item} />
+              </Link>
+            )
+          }) : (
+            <div className='px-3 py-2 text-sm leading-6'>
+              <Typography.Text type='secondary'>
+                暂未获取到中台菜单，请重新登录或检查当前账号是否已启用应用访问。
+              </Typography.Text>
+            </div>
+          )}
+        </div>
+      </nav>
+    </aside>
+  )
+}

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

@@ -0,0 +1,35 @@
+'use client'
+
+import { type ReactNode } from 'react'
+import { usePathname } from 'next/navigation'
+
+import { LayoutHeader } from './Header'
+import { LayoutHeaderProvider } from './Header/context'
+import { LayoutSidebar } from './Sidebar'
+import { useDisplay } from '../display'
+
+interface LayoutProps {
+  children: ReactNode
+}
+
+export const Layout = (props: LayoutProps) => {
+  const { children } = props
+  const { isEmbedded } = useDisplay()
+  const pathname = usePathname()
+
+  const shouldShowSidebar = !isEmbedded && !pathname?.startsWith('/auth/')
+
+  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 />}
+        <div className='flex min-h-0 flex-1'>
+          {shouldShowSidebar ? <LayoutSidebar /> : null}
+          <main className='min-w-0 flex-1 overflow-auto'>
+            {children}
+          </main>
+        </div>
+      </LayoutHeaderProvider>
+    </div>
+  )
+}

package/template/web/middle/src/components/base/Providers/MiddleProvider.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { type ReactNode, useMemo, useState } from 'react'
+import { getSession } from 'next-auth/react'
+import { middle } from '@wzyjs/middle-sdk/api/react'
+
+import { env } from '@/env'
+import { getQueryClient } from '@/utils'
+
+interface MiddleProviderProps {
+  children: ReactNode
+}
+
+export const MiddleProvider = (props: MiddleProviderProps) => {
+  const { children } = props
+
+  const [queryClient] = useState(getQueryClient)
+
+  const accessToken = useMemo(
+    () => async () => (await getSession())?.middleAccessToken,
+    [],
+  )
+
+  return (
+    <middle.Provider
+      accessToken={accessToken}
+      baseUrl={env.NEXT_PUBLIC_MIDDLE_API_URL}
+      queryClient={queryClient}
+    >
+      {children}
+    </middle.Provider>
+  )
+}

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

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

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

@@ -0,0 +1,57 @@
+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(),
+    NEXTAUTH_URL: z.string().url(),
+    NEXTAUTH_SECRET: z.string().min(1),
+    MIDDLE_OIDC_CLIENT_ID: z.string().min(1),
+    MIDDLE_OIDC_CLIENT_SECRET: z.string().min(1),
+  },
+
+  /**
+   * 在此处指定客户端环境变量模式。
+   * 这样可以确保应用程序不会使用无效的环境变量构建。
+   * 要将它们暴露给客户端，请使用 `NEXT_PUBLIC_` 前缀。
+   */
+  client: {
+    NEXT_PUBLIC_MIDDLE_API_URL: z.string().url(),
+    NEXT_PUBLIC_MIDDLE_APPID: z.string().min(1),
+  },
+
+  /**
+   * 在这里显式传入运行时环境变量的实际值。
+   * `server` / `client` 负责声明校验规则，
+   * `runtimeEnv` 负责把 `process.env` 中对应的值提供给 `createEnv`。
+   */
+  runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+    // 数据库
+    DATABASE_URL: process.env.DATABASE_URL,
+    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
+    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
+    NEXT_PUBLIC_MIDDLE_API_URL: process.env.NEXT_PUBLIC_MIDDLE_API_URL,
+    NEXT_PUBLIC_MIDDLE_APPID: process.env.NEXT_PUBLIC_MIDDLE_APPID,
+    MIDDLE_OIDC_CLIENT_ID: process.env.MIDDLE_OIDC_CLIENT_ID,
+    MIDDLE_OIDC_CLIENT_SECRET: process.env.MIDDLE_OIDC_CLIENT_SECRET,
+  },
+
+  /**
+   * 使用 `SKIP_ENV_VALIDATION` 运行 `build` 或 `dev` 可以跳过环境变量验证。
+   * 这在 Docker 构建时特别有用。
+   */
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+
+  /**
+   * 使空字符串被视为未定义。
+   * 例如：`SOME_VAR: z.string()` 和 `SOME_VAR=''` 将抛出错误。
+   */
+  emptyStringAsUndefined: true,
+})

package/template/web/middle/src/server/auth/next-auth/options.ts

@@ -0,0 +1,26 @@
+import { createMiddleNextAuthOptions, type MiddleNextAuthSessionFields } from '@wzyjs/middle-sdk/login'
+
+import { env } from '@/env'
+
+declare module 'next-auth' {
+  interface Session extends MiddleNextAuthSessionFields {
+    user: {
+      id: string
+      name?: string | null
+      email?: string | null
+      image?: string | null
+    }
+  }
+}
+
+export const auth = createMiddleNextAuthOptions({
+  cookiePrefix: '__WZYJS_APP_PACKAGE_NAME__',
+  clientId: env.MIDDLE_OIDC_CLIENT_ID,
+  clientSecret: env.MIDDLE_OIDC_CLIENT_SECRET,
+  secret: env.NEXTAUTH_SECRET,
+  issuer: env.NEXT_PUBLIC_MIDDLE_API_URL,
+  pages: {
+    signIn: '/auth/signin',
+    error: '/auth/error',
+  },
+})

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

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

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

@@ -0,0 +1,16 @@
+import { TRPCError } from '@trpc/server'
+
+import { createTRPCProcedure } from './init'
+
+export const publicProcedure = createTRPCProcedure
+
+export const procedure = createTRPCProcedure.use(({ ctx, next }) => {
+  if (!ctx.session?.user?.id) {
+    throw new TRPCError({
+      code: 'UNAUTHORIZED',
+      message: '请先登录',
+    })
+  }
+
+  return next()
+})

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

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

package/template/web/middle/src/server/utils/middle.ts

@@ -0,0 +1,34 @@
+import 'server-only'
+
+import { createMiddleApi } from '@wzyjs/middle-sdk/api/node'
+import { createMiddleProxyUrlFactory } from '@wzyjs/middle-sdk/proxy'
+import { createMiddleUploadFileFactory } from '@wzyjs/middle-sdk/upload'
+import { getServerSession } from 'next-auth'
+
+import { env } from '@/env'
+import { auth } from '@/server/auth/next-auth/options'
+
+const getMiddleAccessToken = async () => {
+  const session = await getServerSession(auth)
+  const accessToken = session?.middleAccessToken
+
+  if (!accessToken) {
+    throw new Error('暂未获取到中台登录态，请重新登录后再试')
+  }
+  return accessToken
+}
+
+export const middle = createMiddleApi({
+  baseUrl: env.NEXT_PUBLIC_MIDDLE_API_URL,
+  accessToken: getMiddleAccessToken,
+})
+
+export const createMiddleProxyUrl = createMiddleProxyUrlFactory({
+  appid: env.NEXT_PUBLIC_MIDDLE_APPID,
+  baseUrl: env.NEXT_PUBLIC_MIDDLE_API_URL,
+})
+
+export const uploadMiddleFile = createMiddleUploadFileFactory({
+  accessToken: getMiddleAccessToken,
+  baseUrl: env.NEXT_PUBLIC_MIDDLE_API_URL,
+})

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

@@ -0,0 +1,3 @@
+export type { MiddleAppInfo } from '@wzyjs/middle-sdk/login'
+export type { MiddlePage } from '@wzyjs/middle-sdk/page'
+export type { ApiRouterInput, ApiRouterOutput } from '@/server/trpc'

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

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

package/template/web/middle/src/utils/middle.ts

@@ -0,0 +1,28 @@
+import { createMiddleProxyUrlFactory } from '@wzyjs/middle-sdk/proxy'
+import { createMiddleUploadFileFactory } from '@wzyjs/middle-sdk/upload'
+import { getSession } from 'next-auth/react'
+
+import { env } from '@/env'
+
+export { middle } from '@wzyjs/middle-sdk/api/react'
+
+const getMiddleAccessToken = async () => {
+  const session = await getSession()
+  const accessToken = session?.middleAccessToken
+
+  if (!accessToken) {
+    throw new Error('暂未获取到中台登录态，请重新登录后再试')
+  }
+
+  return accessToken
+}
+
+export const createMiddleProxyUrl = createMiddleProxyUrlFactory({
+  appid: env.NEXT_PUBLIC_MIDDLE_APPID,
+  baseUrl: env.NEXT_PUBLIC_MIDDLE_API_URL,
+})
+
+export const uploadMiddleFile = createMiddleUploadFileFactory({
+  accessToken: getMiddleAccessToken,
+  baseUrl: env.NEXT_PUBLIC_MIDDLE_API_URL,
+})