@ploykit/ui 0.6.0 → 0.6.2

package/src/lib/api-error.ts

@@ -0,0 +1,98 @@
+
+import { ApiError } from '@ploykit/client'
+
+
+const KNOWN_MESSAGES: Record<string, string> = {
+  'invalid credentials': '邮箱或密码不正确，请检查后重试',
+  
+  
+  'current password incorrect': '当前密码不正确，请确认后重新输入',
+  '当前密码不正确，请确认后重新输入': '当前密码不正确，请确认后重新输入',
+  '新密码不能与当前密码相同': '新密码不能与当前密码相同，请换一个新密码',
+  'email already registered': '该邮箱已注册，可直接登录或换个邮箱重试',
+  'slug already taken': '该标识已被占用，请换个工作区名称重试',
+  'already a member': '该用户已是本工作区成员，无需重复邀请',
+  'invitation already pending': '该邮箱已有一封待处理的邀请，可先撤销旧邀请再重发',
+  'target is already an owner': '对方已是所有者，无需重复转让所有权',
+  
+  'name required (<=64 chars)': '名称不能为空，且不超过 64 字节（约 21 个汉字）',
+  'name required': '名称不能为空',
+}
+
+
+const KNOWN_MESSAGE_PREFIXES: Array<[prefix: string, text: string]> = [
+  
+  ['slug must be', '标识格式有误：需 4-40 位小写字母、数字或连字符（-），且不能以连字符开头或结尾'],
+  
+  
+  ['last owner cannot leave', '最后一个所有者不能离开工作区，请先转移所有权或删除工作区'],
+  
+  ['avatar_url must be', '头像链接格式有误：需以 http(s) 开头且不超过 2048 字符'],
+  
+  ['workspace cannot be deleted', '工作区暂时无法删除：存在未满足的前置条件（如未完结订单或活跃资源），请先处理后再试'],
+  
+  ['egress:', '回调地址不可达私网/被安全策略拦截，请改用公网 https 地址'],
+  ['egressx:', '回调地址不可达私网/被安全策略拦截，请改用公网 https 地址'],
+]
+
+
+const KNOWN_CODES: Record<string, string> = {
+  E_QUOTA_EXCEEDED: '配额已用尽，可在 设置→计费 升级套餐后重试',
+  E_TIMEOUT: '请求超时，网络可能较慢，请稍后重试',
+  E_ABORTED: '请求已取消',
+  
+  E_CHANNEL_TEST_UNSUPPORTED: '该支付渠道不支持测试连接（manual 渠道无外部端点可探测）',
+  
+  E_MALFORMED_RESPONSE: '服务返回了无法识别的响应，请稍后重试；若持续出现请联系平台管理员',
+  
+  E_VALIDATION: '请求参数有误，请检查填写内容后重试',
+  
+  E_INVALID_CRON: 'Cron 表达式格式有误（应为 5 段：分 时 日 月 周），请检查后重试',
+  E_INVALID_TZ: '时区无效，请填写 IANA 时区名（如 Asia/Shanghai）',
+  
+  
+  E_CONFLICT: '操作与当前状态冲突，请刷新页面查看最新状态后再试',
+}
+
+
+function detailsText(details: unknown): string | undefined {
+  return typeof details === 'string' && details.trim() !== '' ? details.trim() : undefined
+}
+
+function knownMessage(message: string): string | undefined {
+  const normalized = message.trim().toLowerCase()
+  const exact = KNOWN_MESSAGES[normalized]
+  if (exact) return exact
+  return KNOWN_MESSAGE_PREFIXES.find(([prefix]) => normalized.startsWith(prefix))?.[1]
+}
+
+export function apiErrorMessage(err: unknown, fallback = '操作失败'): string {
+  if (err instanceof ApiError) {
+    
+    const byMessage = knownMessage(err.message)
+    if (byMessage) return byMessage
+    
+    
+    const details = detailsText(err.details)
+    if (details) return details
+    
+    
+    if (err.code && KNOWN_CODES[err.code]) return KNOWN_CODES[err.code]
+    if (err.status === 402) {
+      return '当前套餐不支持此操作。可在 设置→计费 升级套餐'
+    }
+    if (err.status === 401) return '登录已过期或未登录，请重新登录后再试'
+    if (err.status === 429) {
+      
+      const wait = err.retryAfter !== undefined && err.retryAfter > 0 ? `（约 ${err.retryAfter} 秒后可重试）` : ''
+      return `请求过于频繁，请稍后再试${wait}`
+    }
+    if (err.status >= 500) return '服务暂时不可用，请稍后重试；若持续出现请联系平台管理员'
+    if (err.status === 404) return '不存在或无权访问'
+    if (err.status === 403) return '权限不足' + (err.message && err.message !== 'forbidden' ? `：${err.message}` : '')
+    return err.message || fallback
+  }
+  
+  if (err instanceof TypeError) return '网络连接失败，请检查网络后重试'
+  return err instanceof Error && err.message ? err.message : fallback
+}

package/src/lib/utils.ts

@@ -0,0 +1,109 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+
+
+export type StatusTone = 'positive' | 'critical' | 'warning' | 'neutral' | 'brand'
+
+
+export const STATUS_TONE_CLASS: Record<StatusTone, string> = {
+  positive: 'bg-(--success)/10 text-(--success) border-(--success)/30',
+  critical: 'bg-(--destructive)/10 text-(--destructive) border-(--destructive)/30',
+  warning: 'bg-(--warning)/15 text-(--warning) border-(--warning)/40',
+  neutral: 'bg-muted text-muted-foreground border-border',
+  brand: 'bg-primary/10 text-primary border-primary/20',
+}
+
+
+export function statusTone(status: string): StatusTone {
+  const s = status.toLowerCase()
+  if (['active','paid','delivered','completed','success','running','entitled','done'].includes(s)) return 'positive'
+  if (['failed','dead','error','disabled','canceled','expired','removed'].includes(s)) return 'critical'
+  if (['pending','warned','suspended','retrying'].includes(s)) return 'warning'
+  if (['owner','admin','pro','recommended'].includes(s)) return 'brand'
+  return 'neutral'
+}
+
+
+
+
+export const STATUS_LABEL: Record<string, string> = {
+  pending: '待处理',
+  accepted: '已接受',
+  declined: '已拒绝',
+  revoked: '已撤销',
+  expired: '已过期',
+  redeemed: '已兑换',
+  paid: '已支付',
+  canceled: '已取消',
+  active: '生效中',
+  inactive: '未启用',
+  enabled: '已启用',
+  disabled: '已禁用',
+  delivered: '已投递',
+  failed: '失败',
+  retrying: '重试中',
+  completed: '已完成',
+  done: '已完成',
+  running: '运行中',
+  success: '成功',
+  error: '错误',
+  
+  dead: '死信/投递失败',
+  warned: '已警告',
+  suspended: '已暂停',
+  removed: '已移除',
+  entitled: '已生效',
+  refunded: '已退款',
+}
+
+
+export function statusLabel(status: string): string {
+  return STATUS_LABEL[status.toLowerCase()] ?? status
+}
+
+
+
+
+export function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
+}
+
+
+export function formatDateTime(iso: string): string {
+  return new Date(iso).toLocaleString('zh-CN', {
+    year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false,
+  })
+}
+
+
+
+
+export function browserTzLabel(): string {
+  for (const nameType of ['shortOffset', 'short'] as const) {
+    try {
+      
+      const opts = { timeZoneName: nameType } as Intl.DateTimeFormatOptions
+      const parts = new Intl.DateTimeFormat('en-US', opts).formatToParts(new Date())
+      const label = parts.find((p) => p.type === 'timeZoneName')?.value
+      if (label) return label
+    } catch {
+      // 试下一档兜底
+    }
+  }
+  return '本地时区'
+}
+
+
+export function formatDateTimeTz(iso: string): string {
+  return `${formatDateTime(iso)} (${browserTzLabel()})`
+}
+
+export function shortID(id: string, len = 8): string {
+  return id.slice(0, len)
+}

package/src/pages/LandingPage.tsx

@@ -0,0 +1,88 @@
+
+import { Link } from 'react-router'
+
+export interface Feature { icon: string; title: string; desc: string }
+export interface Plan {
+  name: string; price: string; period?: string; recommended?: boolean
+  features: string[]; cta: string
+}
+
+export function LandingPage({ brand, tagline, description, features, plans, registerPath = '/register', loginPath = '/login' }: {
+  brand: string
+  tagline: string
+  description: string
+  features: Feature[]
+  plans: Plan[]
+  
+  registerPath?: string
+  
+  loginPath?: string
+}) {
+  return (
+    <div className="min-h-screen bg-card">
+      <header className="border-b border-border">
+        <div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
+          <span className="text-xl font-bold text-foreground">{brand}</span>
+          <div className="flex items-center gap-3">
+            <Link to={loginPath} className="px-4 py-2 text-sm font-medium text-foreground rounded-lg hover:bg-muted">
+              登录
+            </Link>
+            <Link to={registerPath} className="px-4 py-2 bg-primary text-primary-foreground text-sm font-medium rounded-lg hover:bg-primary/80">
+              免费注册
+            </Link>
+          </div>
+        </div>
+      </header>
+
+      <section className="max-w-6xl mx-auto px-4 pt-20 pb-16 text-center">
+        <h1 className="text-5xl font-bold text-foreground tracking-tight">{tagline}</h1>
+        <p className="mt-4 text-xl text-muted-foreground max-w-2xl mx-auto">{description}</p>
+        <Link to={registerPath} className="mt-8 inline-block px-6 py-3 bg-primary text-primary-foreground font-medium rounded-lg hover:bg-primary/80 text-lg">
+          免费开始
+        </Link>
+      </section>
+
+      <section className="bg-muted py-16">
+        <div className="max-w-6xl mx-auto px-4">
+          <h2 className="text-3xl font-bold text-center text-foreground mb-12">核心功能</h2>
+          <div className="grid md:grid-cols-3 gap-8">
+            {features.map((f, i) => (
+              <div key={`${i}-${f.title}`} className="p-6 bg-card rounded-xl border border-border">
+                <div className="text-3xl mb-3">{f.icon}</div>
+                <h3 className="text-lg font-semibold text-foreground">{f.title}</h3>
+                <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{f.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="py-16">
+        <div className="max-w-6xl mx-auto px-4">
+          <h2 className="text-3xl font-bold text-center text-foreground mb-12">定价</h2>
+          <div className="grid md:grid-cols-2 gap-8 max-w-3xl mx-auto">
+            {plans.map((p, i) => (
+              <div key={`${i}-${p.name}`} className={`p-8 bg-card rounded-xl ${p.recommended ? 'border-2 border-primary relative' : 'border border-border'}`}>
+                {p.recommended && (
+                  <span className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-primary text-primary-foreground text-xs font-medium rounded-full">推荐</span>
+                )}
+                <h3 className="text-lg font-semibold text-foreground">{p.name}</h3>
+                <p className="mt-1 text-3xl font-bold text-foreground">{p.price}<span className="text-sm text-muted-foreground">{p.period ?? '/月'}</span></p>
+                <ul className="mt-6 space-y-3 text-sm text-muted-foreground">
+                  {p.features.map((f, j) => <li key={`${j}-${f}`}>✓ {f}</li>)}
+                </ul>
+                <Link to={registerPath} className={`mt-6 block text-center py-2.5 rounded-lg font-medium ${p.recommended ? 'bg-primary text-primary-foreground hover:bg-primary/80' : 'border border-input text-foreground hover:bg-muted'}`}>
+                  {p.cta}
+                </Link>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <footer className="border-t border-border py-8 text-center text-sm text-muted-foreground">
+        © 2026 {brand}. All rights reserved.
+      </footer>
+    </div>
+  )
+}

package/src/pages/LoginPage.tsx

@@ -0,0 +1,291 @@
+
+import { useEffect, useState, type FormEvent } from 'react'
+import { useLocation } from 'react-router'
+import { useLogin } from '@ploykit/hooks'
+import { useApi } from '@ploykit/hooks'
+import { useAuth } from '@ploykit/hooks'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../components/ui/tabs'
+import { Button } from '../components/ui/button'
+import { Input } from '../components/ui/input'
+import { FormField } from '../components/FormField'
+import { apiErrorMessage } from '../lib/api-error'
+
+
+export interface OAuthProviderOption {
+  id: string
+  label: string
+}
+
+
+const SEND_COOLDOWN_S = 60
+
+
+export function loginRedirectTarget(from: unknown, fallback = '/app'): string {
+  if (typeof from !== 'string') return fallback
+  if (!from.startsWith('/') || from.startsWith('//')) return fallback
+  return from
+}
+
+export interface LoginPageProps {
+
+  resetPath?: string
+
+  registerPath?: string
+
+  oauthProviders?: OAuthProviderOption[]
+
+  enableFedLogin?: boolean
+
+  /**
+   * 纯密码形态（企业内部工具）：隐藏验证码 Tab，页面直接是密码登录——
+   * 不渲染 Tabs 结构，OAuth 槽位照常由 oauthProviders 控制（不传即无）。
+   */
+  passwordOnly?: boolean
+
+  onSuccess?: () => void
+
+  title?: string
+  description?: string
+}
+
+export function LoginPage({
+  resetPath = '/forgot-password',
+  registerPath = '/register',
+  oauthProviders = [],
+  enableFedLogin = false,
+  passwordOnly = false,
+  onSuccess,
+  title = '登录',
+  description = '登录你的账号',
+}: LoginPageProps) {
+  const { submit, loading, error: codeError } = useLogin()
+  const api = useApi()
+  const { refresh } = useAuth()
+  
+  const from = loginRedirectTarget(
+    (useLocation().state as { from?: unknown } | null)?.from,
+  )
+
+  const [email, setEmail] = useState('')
+  const [code, setCode] = useState('')
+  const [codeSent, setCodeSent] = useState(false)
+
+  
+  const [sending, setSending] = useState(false)
+  const [sendError, setSendError] = useState<string | null>(null)
+  const [cooldown, setCooldown] = useState(0)
+
+  useEffect(() => {
+    if (cooldown <= 0) return
+    const t = setInterval(() => setCooldown((c) => c - 1), 1_000)
+    return () => clearInterval(t)
+  }, [cooldown])
+
+  const [password, setPassword] = useState('')
+  const [pwLoading, setPwLoading] = useState(false)
+  const [pwError, setPwError] = useState<string | null>(null)
+
+  const succeed = onSuccess ?? (() => { window.location.href = from })
+
+  const handleSendCode = async () => {
+    if (!email || sending || cooldown > 0) return
+    setSending(true)
+    setSendError(null)
+    try {
+      await api.post('/auth/send-code', { email })
+      setCodeSent(true)
+      setCooldown(SEND_COOLDOWN_S)
+    } catch (e) {
+      
+      setSendError(apiErrorMessage(e, '验证码发送失败，请稍后重试'))
+    } finally {
+      setSending(false)
+    }
+  }
+
+  const handleCodeSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    const result = await submit(email, code)
+    if (result.ok) succeed()
+  }
+
+  const handlePasswordSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setPwError(null)
+    setPwLoading(true)
+    try {
+      await api.post('/auth/login', { email, password })
+      await refresh()
+      succeed()
+    } catch (err) {
+      
+      setPwError(apiErrorMessage(err, '登录失败'))
+    } finally {
+      setPwLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="w-full max-w-sm space-y-4 p-8 bg-white rounded-lg shadow">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold">{title}</h1>
+          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+        </div>
+
+        {passwordOnly ? (
+          <form onSubmit={handlePasswordSubmit} className="space-y-4 pt-2">
+            <FormField label="邮箱" htmlFor="login-pw-email">
+              <Input
+                id="login-pw-email" type="email" value={email} required
+                onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com"
+                autoComplete="email"
+              />
+            </FormField>
+            <FormField label="密码" htmlFor="login-pw-password">
+              <Input
+                id="login-pw-password" type="password" value={password} required
+                onChange={(e) => setPassword(e.target.value)} placeholder="输入密码"
+                autoComplete="current-password"
+              />
+            </FormField>
+            {pwError && <p role="alert" className="text-destructive text-sm">{pwError}</p>}
+            <Button type="submit" className="w-full" disabled={pwLoading || !email || !password}>
+              {pwLoading ? '登录中…' : '登录'}
+            </Button>
+          </form>
+        ) : (
+        <Tabs defaultValue="code">
+          <TabsList className="w-full">
+            <TabsTrigger value="code">验证码登录</TabsTrigger>
+            <TabsTrigger value="password">密码登录</TabsTrigger>
+          </TabsList>
+
+          {/* 验证码模式（默认） */}
+          <TabsContent value="code">
+            <form onSubmit={handleCodeSubmit} className="space-y-4 pt-2">
+              <div className="space-y-1">
+                <label htmlFor="login-email" className="text-sm text-foreground">邮箱</label>
+                <input
+                  id="login-email"
+                  type="email" value={email} onChange={(e) => setEmail(e.target.value)}
+                  placeholder="you@example.com" required autoComplete="email"
+                  className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+                />
+              </div>
+              <div className="space-y-1">
+                <label htmlFor="login-code" className="text-sm text-foreground">验证码</label>
+                <div className="flex gap-2">
+                  <input
+                    id="login-code"
+                    type="text" value={code} onChange={(e) => setCode(e.target.value)}
+                    placeholder="6位数字" maxLength={6} required autoComplete="one-time-code"
+                    className="flex-1 px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+                  />
+                  <button
+                    type="button" onClick={handleSendCode}
+                    disabled={sending || cooldown > 0 || !email}
+                    className="px-4 py-2 text-sm text-primary border border-primary/30 rounded-md hover:bg-primary/10 disabled:opacity-50"
+                  >
+                    {cooldown > 0
+                      ? `重发（${cooldown}s）`
+                      : codeSent
+                        ? '重新发送'
+                        : sending
+                          ? '发送中…'
+                          : '发送'}
+                  </button>
+                </div>
+              </div>
+              {/* P3-29：错误 p 补 role="alert"（读屏即时播报） */}
+              {sendError && <p role="alert" className="text-destructive text-sm">{sendError}</p>}
+              {codeError && <p role="alert" className="text-destructive text-sm">{codeError}</p>}
+              <button
+                type="submit" disabled={loading || !email || !code}
+                className="w-full py-2 px-4 bg-primary text-primary-foreground rounded-md hover:bg-primary/80 disabled:opacity-50"
+              >
+                {loading ? '登录中…' : '登录'}
+              </button>
+            </form>
+          </TabsContent>
+
+          {/* 密码模式 */}
+          <TabsContent value="password">
+            <form onSubmit={handlePasswordSubmit} className="space-y-4 pt-2">
+              <FormField label="邮箱" htmlFor="login-pw-email">
+                <Input
+                  id="login-pw-email" type="email" value={email} required
+                  onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com"
+                  autoComplete="email"
+                />
+              </FormField>
+              <FormField label="密码" htmlFor="login-pw-password">
+                <Input
+                  id="login-pw-password" type="password" value={password} required
+                  onChange={(e) => setPassword(e.target.value)} placeholder="输入密码"
+                  autoComplete="current-password"
+                />
+              </FormField>
+              {pwError && <p role="alert" className="text-destructive text-sm">{pwError}</p>}
+              <Button type="submit" className="w-full" disabled={pwLoading || !email || !password}>
+                {pwLoading ? '登录中…' : '登录'}
+              </Button>
+            </form>
+          </TabsContent>
+        </Tabs>
+        )}
+
+        {oauthProviders.length > 0 && (
+          <div className="space-y-2 pt-1" data-testid="oauth-providers">
+            <div className="relative py-2 text-center">
+              <span className="absolute inset-x-0 top-1/2 border-t border-border" />
+              <span className="relative z-10 bg-card px-2 text-xs text-muted-foreground">或使用以下方式登录</span>
+            </div>
+            {oauthProviders.map((p) => (
+              <a
+                key={p.id}
+                href={'/auth/oauth/' + p.id + '/start'}
+                className="block w-full py-2 px-4 text-center text-sm border border-input rounded-md hover:bg-background"
+              >
+                使用 {p.label} 登录
+              </a>
+            ))}
+          </div>
+        )}
+
+        {enableFedLogin && (
+          <details className="pt-1" data-testid="fed-login">
+            <summary className="text-sm text-muted-foreground cursor-pointer select-none">企业登录</summary>
+            <form method="get" action="/auth/fed/start" className="mt-2 space-y-2">
+              <input
+                type="text" name="workspace" placeholder="工作区标识（slug）" required
+                className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+              <button
+                type="submit"
+                className="w-full py-2 px-4 bg-primary text-primary-foreground text-sm rounded-md hover:bg-primary/80"
+              >
+                通过企业 IdP 登录
+              </button>
+            </form>
+          </details>
+        )}
+
+        {(resetPath || registerPath) && (
+          <div className="flex items-center justify-between text-sm">
+            {resetPath && (
+              <a href={resetPath} className="text-primary hover:underline">
+                忘记密码？
+              </a>
+            )}
+            {registerPath && (
+              <a href={registerPath} data-testid="register-link" className="text-primary hover:underline">
+                创建账号
+              </a>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/pages/__tests__/LandingPage.test.tsx

@@ -0,0 +1,58 @@
+
+import '@testing-library/jest-dom/vitest'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router'
+import { describe, it, expect } from 'vitest'
+import { LandingPage } from '../LandingPage'
+
+const FEATURES = [
+  { icon: '⚡', title: '快速', desc: '秒级启动' },
+  { icon: '🔒', title: '安全', desc: '企业级权限' },
+  { icon: '🧩', title: '快速', desc: '重名标题回归（P3-31）' },
+]
+const PLANS = [
+  { name: 'Free', price: '¥0', features: ['基础功能', '基础功能'], cta: '免费开始' },
+  { name: 'Free', price: '¥99', recommended: true, features: ['全部功能'], cta: '升级' },
+]
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <LandingPage
+        brand="Ploykit"
+        tagline="多租户 SaaS 脚手架"
+        description="开箱即用的框架"
+        features={FEATURES}
+        plans={PLANS}
+        registerPath="/register"
+        loginPath="/login"
+      />
+    </MemoryRouter>,
+  )
+}
+
+describe('LandingPage', () => {
+  it('渲染品牌/标语/功能/定价', () => {
+    renderPage()
+    expect(screen.getByText('Ploykit')).toBeInTheDocument()
+    expect(screen.getByText('多租户 SaaS 脚手架')).toBeInTheDocument()
+    expect(screen.getAllByText('快速').length).toBe(2) 
+  })
+
+  it('登录/注册 CTA 指向可配路径', () => {
+    renderPage()
+    expect(screen.getByRole('link', { name: '登录' })).toHaveAttribute(
+      'href',
+      '/login',
+    )
+    const register = screen.getAllByRole('link', { name: /免费注册|免费开始/ })
+    for (const link of register) {
+      expect(link).toHaveAttribute('href', '/register')
+    }
+  })
+
+  it('推荐档位带"推荐"标记', () => {
+    renderPage()
+    expect(screen.getByText('推荐')).toBeInTheDocument()
+  })
+})