npm - @wzyjs/cli - Versions diffs - 0.3.32 → 0.3.37 - Mend

@wzyjs/cli 0.3.32 → 0.3.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (107) hide show

package/template/web/middle/src/app/auth/unauthorized/page.tsx ADDED Viewed

@@ -0,0 +1,88 @@
+'use client'
+import { signOut, useSession } from 'next-auth/react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import {
+  ArrowRightOutlined,
+  Button,
+  LogoutOutlined,
+  PanelPage,
+  Result,
+  RetweetOutlined,
+  StopOutlined,
+  Typography,
+} from '@/components'
+import { getSafeCallbackPath } from '@/utils'
+export default function UnauthorizedPage() {
+  const { data: session } = useSession()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const retryUrl = getSafeCallbackPath(searchParams.get('callbackUrl'), '/')
+  const onSignOut = async () => {
+    await signOut({ callbackUrl: '/auth/signin' })
+  }
+  return (
+    <PanelPage eyebrow='需要授权' title='暂时不能访问'>
+      <Result
+        status='403'
+        title='你还没有这个页面的访问权限'
+        icon={<StopOutlined style={{ color: '#f5222d' }} />}
+        subTitle={(
+          <div className='mt-4 space-y-4'>
+            <Typography.Paragraph className='!mb-0 !text-sm !leading-6 !text-slate-600 dark:!text-slate-300'>
+              请联系管理员开通权限。权限生效后，你可以回来重试，或切换到已经授权的账号。
+            </Typography.Paragraph>
+            <div className='rounded-lg border border-slate-200/70 bg-white/70 px-4 py-3 text-left dark:border-white/10 dark:bg-white/5'>
+              <div className='text-xs font-semibold uppercase text-slate-500 dark:text-slate-400'>
+                当前登录账号
+              </div>
+              <div className='mt-2 break-all text-sm font-medium text-slate-900 dark:text-slate-100'>
+                {session?.user?.email || '暂未读取到账号信息'}
+              </div>
+            </div>
+          </div>
+        )}
+        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>
+            <Button
+              type='primary'
+              danger
+              icon={<LogoutOutlined />}
+              className='!rounded-lg'
+              onClick={() => {
+                void onSignOut()
+              }}
+            >
+              换个账号登录
+            </Button>
+          </div>
+        )}
+      />
+    </PanelPage>
+  )
+}

package/template/web/middle/src/app/layout.tsx ADDED Viewed

@@ -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/middle/src/app/middle/page.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { Suspense } from 'react'
+import { MiddleIframeRoutePage } from '@wzyjs/middle-sdk/page'
+export default function MiddleIframePage() {
+  return (
+    <Suspense>
+      <MiddleIframeRoutePage />
+    </Suspense>
+  )
+}

package/template/web/middle/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+'use client'
+import { useSession } from 'next-auth/react'
+export default function HomePage() {
+  const { data: session } = useSession()
+  return (
+    <div className='min-h-full bg-slate-50 px-5 py-8 text-slate-950 dark:bg-[#14171c] dark:text-[#e8edf5]'>
+      <section className='mx-auto max-w-4xl border-b border-slate-200 pb-6 dark:border-[#303846]'>
+        <h1 className='text-2xl font-semibold tracking-normal'>
+          __WZYJS_APP_DISPLAY_NAME__
+        </h1>
+        <p className='mt-3 text-sm leading-6 text-slate-600 dark:text-[#aab4c2]'>
+          {session?.user?.name || session?.user?.email || '当前账号'} 已登录。
+        </p>
+      </section>
+    </div>
+  )
+}

package/template/web/middle/src/components/base/AuthGuard/Loading.tsx ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,103 @@
+'use client'
+import Link from 'next/link'
+import { useSession } from 'next-auth/react'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { resolveMiddleMenuGroups, 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 subMenuItemClassName = (isActive: boolean) => [
+  menuItemClassName(isActive),
+  'h-9 pl-8 text-[13px]',
+].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 menuGroups = resolveMiddleMenuGroups({
+    iframePagePath: '/middle',
+    pages: session?.pages,
+    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-3'>
+          {menuGroups.length ? menuGroups.map(group => (
+            <section key={group.groupName} className='flex flex-col gap-1'>
+              <div className='px-3 pt-1 text-[11px] font-semibold tracking-[0.08em] text-slate-400 dark:text-[#6f7b8d]'>
+                {group.groupName}
+              </div>
+              <div className='flex flex-col gap-1'>
+                {group.items.map(item => {
+                  if (item.isBlank) {
+                    return (
+                      <a
+                        key={item.page.path}
+                        href={item.href}
+                        target={item.target}
+                        rel={item.rel}
+                        className={subMenuItemClassName(false)}
+                      >
+                        <MenuItemContent item={item} />
+                      </a>
+                    )
+                  }
+                  return (
+                    <Link
+                      key={item.page.path}
+                      href={item.href}
+                      aria-current={item.isActive ? 'page' : undefined}
+                      className={subMenuItemClassName(item.isActive)}
+                    >
+                      <MenuItemContent item={item} />
+                    </Link>
+                  )
+                })}
+              </div>
+            </section>
+          )) : (
+            <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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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