@ploykit/ui 0.6.0 → 0.6.2

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

@@ -0,0 +1,229 @@
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { LoginPage, loginRedirectTarget } from '../LoginPage'
+
+
+
+const loginMock = vi.hoisted(() => ({ submit: vi.fn(async () => ({ ok: true })) }))
+vi.mock('../../../../hooks/src/hooks/useLogin', () => ({
+  useLogin: () => ({
+    sendCode: vi.fn(),
+    submit: loginMock.submit,
+    loading: false,
+    error: null,
+  }),
+}))
+const mockedPost = vi.hoisted(() => vi.fn())
+vi.mock('../../../../hooks/src/hooks/useApi', () => ({
+  useApi: () => ({ post: mockedPost, get: vi.fn(), put: vi.fn(), patch: vi.fn(), delete: vi.fn() }),
+}))
+const mockedRefresh = vi.hoisted(() => vi.fn())
+vi.mock('../../../../hooks/src/hooks/useAuth', () => ({
+  useAuth: () => ({ refresh: mockedRefresh, user: null, workspaces: [], loading: false, logout: vi.fn() }),
+}))
+
+const locState = vi.hoisted(() => ({ state: null as unknown }))
+vi.mock('react-router', () => ({
+  useLocation: () => ({ state: locState.state }),
+}))
+
+beforeEach(() => {
+  mockedPost.mockReset().mockResolvedValue({ user: { id: 'u1' }, expires_at: '2026-01-01T00:00:00Z' })
+  mockedRefresh.mockReset().mockResolvedValue(undefined)
+  locState.state = null
+})
+
+function renderLogin(props: Parameters<typeof LoginPage>[0]) {
+  return render(<LoginPage {...props} />)
+}
+
+describe('LoginPage oauthProviders', () => {
+  it('传入 providers 渲染第三方登录按钮（href 指向 /auth/oauth/{id}/start）', () => {
+    renderLogin({
+      oauthProviders: [
+        { id: 'github', label: 'GitHub' },
+        { id: 'google', label: 'Google' },
+      ],
+    })
+    const gh = screen.getByRole('link', { name: /GitHub/ })
+    expect(gh).toHaveAttribute('href', '/auth/oauth/github/start')
+    const gg = screen.getByRole('link', { name: /Google/ })
+    expect(gg).toHaveAttribute('href', '/auth/oauth/google/start')
+  })
+
+  it('不传 providers 时不渲染第三方登录区块', () => {
+    const { container } = renderLogin({})
+    expect(container.querySelector('a[href^="/auth/oauth/"]')).toBeNull()
+  })
+})
+
+describe('LoginPage enableFedLogin', () => {
+  it('enableFedLogin 渲染折叠的企业登录表单（原生 GET /auth/fed/start）', () => {
+    const { container } = renderLogin({ enableFedLogin: true })
+    const form = container.querySelector('form[action="/auth/fed/start"]')
+    expect(form).not.toBeNull()
+    expect(form).toHaveAttribute('method', 'get')
+    const input = form!.querySelector('input[name="workspace"]')
+    expect(input).not.toBeNull()
+    expect(input).toHaveAttribute('required', '')
+  })
+
+  it('默认不渲染企业登录区块', () => {
+    const { container } = renderLogin({})
+    expect(container.querySelector('form[action="/auth/fed/start"]')).toBeNull()
+  })
+
+  it('enableFedLogin=false 显式传入也不渲染', () => {
+    const { container } = renderLogin({ enableFedLogin: false })
+    expect(container.querySelector('form[action="/auth/fed/start"]')).toBeNull()
+  })
+})
+
+describe('LoginPage 双模式 Tabs', () => {
+  it('默认展示验证码登录 Tab，可切到密码登录', () => {
+    renderLogin({})
+    expect(screen.getByRole('tab', { name: '验证码登录' })).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByRole('tab', { name: '密码登录' })).toBeInTheDocument()
+  })
+
+  it('密码模式提交 → POST /auth/login 携带 email/password 并触发 onSuccess', async () => {
+    const onSuccess = vi.fn()
+    renderLogin({ onSuccess })
+    fireEvent.click(screen.getByRole('tab', { name: '密码登录' }))
+
+    fireEvent.change(await screen.findByLabelText('邮箱'), { target: { value: 'user@example.com' } })
+    fireEvent.change(screen.getByLabelText('密码'), { target: { value: 'secret-password' } })
+    fireEvent.click(screen.getByRole('button', { name: '登录' }))
+
+    await waitFor(() => expect(mockedPost).toHaveBeenCalledTimes(1))
+    expect(mockedPost).toHaveBeenCalledWith('/auth/login', {
+      email: 'user@example.com',
+      password: 'secret-password',
+    })
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledTimes(1))
+  })
+
+  it('密码模式登录失败展示后端错误文案', async () => {
+    mockedPost.mockRejectedValueOnce(new Error('邮箱或密码错误'))
+    renderLogin({})
+    fireEvent.click(screen.getByRole('tab', { name: '密码登录' }))
+
+    fireEvent.change(await screen.findByLabelText('邮箱'), { target: { value: 'user@example.com' } })
+    fireEvent.change(screen.getByLabelText('密码'), { target: { value: 'wrong' } })
+    fireEvent.click(screen.getByRole('button', { name: '登录' }))
+
+    expect(await screen.findByText('邮箱或密码错误')).toBeInTheDocument()
+  })
+})
+
+describe('LoginPage 验证码发送（P3-26）', () => {
+  it('发送成功 → POST /auth/send-code，按钮进入重发倒计时（节流）', async () => {
+    renderLogin({})
+    fireEvent.change(screen.getByLabelText('邮箱'), { target: { value: 'user@example.com' } })
+    fireEvent.click(screen.getByRole('button', { name: '发送' }))
+
+    await waitFor(() =>
+      expect(mockedPost).toHaveBeenCalledWith('/auth/send-code', { email: 'user@example.com' }),
+    )
+    expect(await screen.findByRole('button', { name: /重发（60s）/ })).toBeDisabled()
+  })
+
+  it('发送失败 → 展示错误（role=alert），不误置"已发送"形态', async () => {
+    mockedPost.mockRejectedValueOnce(new Error('发送过于频繁'))
+    renderLogin({})
+    fireEvent.change(screen.getByLabelText('邮箱'), { target: { value: 'user@example.com' } })
+    fireEvent.click(screen.getByRole('button', { name: '发送' }))
+
+    const alert = await screen.findByRole('alert')
+    expect(alert).toHaveTextContent('发送过于频繁')
+    
+    expect(screen.getByRole('button', { name: '发送' })).toBeEnabled()
+  })
+})
+
+describe('LoginPage 认证辅助链接（aiblog-15：未挂载路由须可隐藏）', () => {
+  it('默认渲染 忘记密码/创建账号，指向 resetPath/registerPath 默认路由', () => {
+    renderLogin({})
+    expect(screen.getByRole('link', { name: '忘记密码？' })).toHaveAttribute('href', '/forgot-password')
+    expect(screen.getByRole('link', { name: '创建账号' })).toHaveAttribute('href', '/register')
+  })
+
+  it('resetPath/registerPath 传空串时对应链接隐藏（产品未挂载该路由）', () => {
+    renderLogin({ resetPath: '', registerPath: '' })
+    expect(screen.queryByRole('link', { name: '忘记密码？' })).toBeNull()
+    expect(screen.queryByRole('link', { name: '创建账号' })).toBeNull()
+  })
+
+  it('仅隐藏 reset 链接时 register 链接仍渲染', () => {
+    renderLogin({ resetPath: '' })
+    expect(screen.queryByRole('link', { name: '忘记密码？' })).toBeNull()
+    expect(screen.getByRole('link', { name: '创建账号' })).toBeInTheDocument()
+  })
+
+  it('自定义路径覆盖默认路由', () => {
+    renderLogin({ resetPath: '/my-reset', registerPath: '/my-register' })
+    expect(screen.getByRole('link', { name: '忘记密码？' })).toHaveAttribute('href', '/my-reset')
+    expect(screen.getByRole('link', { name: '创建账号' })).toHaveAttribute('href', '/my-register')
+  })
+})
+
+describe('LoginPage 深链回跳（B-settings-8）', () => {
+  it('location.state.from 为站内路径时，登录成功回跳该路径', async () => {
+    locState.state = { from: '/admin/settings' }
+    const onSuccess = vi.fn()
+    renderLogin({ onSuccess })
+    fireEvent.click(screen.getByRole('tab', { name: '密码登录' }))
+
+    fireEvent.change(await screen.findByLabelText('邮箱'), { target: { value: 'user@example.com' } })
+    fireEvent.change(screen.getByLabelText('密码'), { target: { value: 'secret-password' } })
+    fireEvent.click(screen.getByRole('button', { name: '登录' }))
+
+    await waitFor(() => expect(mockedRefresh).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledTimes(1))
+  })
+
+  it('loginRedirectTarget：仅站内相对路径可作回跳，站外/协议相对/缺失一律回退 /app', () => {
+    expect(loginRedirectTarget('/admin/settings')).toBe('/admin/settings')
+    expect(loginRedirectTarget('/app?x=1')).toBe('/app?x=1')
+    expect(loginRedirectTarget('//evil.example.com')).toBe('/app')
+    expect(loginRedirectTarget('https://evil.example.com')).toBe('/app')
+    expect(loginRedirectTarget(undefined)).toBe('/app')
+    expect(loginRedirectTarget(null)).toBe('/app')
+    expect(loginRedirectTarget('')).toBe('/app')
+    expect(loginRedirectTarget(123)).toBe('/app')
+  })
+})
+
+describe('LoginPage passwordOnly（aifengkong #4：企业内部纯密码形态）', () => {
+  it('passwordOnly 时无验证码 Tab/表单，密码表单直出', () => {
+    const { container } = renderLogin({ passwordOnly: true })
+    expect(screen.queryByRole('tab', { name: '验证码登录' })).toBeNull()
+    expect(screen.queryByRole('tab', { name: '密码登录' })).toBeNull()
+    expect(screen.getByLabelText('邮箱')).toBeInTheDocument()
+    expect(screen.getByLabelText('密码')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: '发送' })).toBeNull()
+    expect(container.querySelector('form')).not.toBeNull()
+  })
+
+  it('passwordOnly 提交走 /auth/login', async () => {
+    const onSuccess = vi.fn()
+    renderLogin({ passwordOnly: true, onSuccess })
+    fireEvent.change(screen.getByLabelText('邮箱'), { target: { value: 'user@example.com' } })
+    fireEvent.change(screen.getByLabelText('密码'), { target: { value: 'secret-password' } })
+    fireEvent.click(screen.getByRole('button', { name: '登录' }))
+    await waitFor(() =>
+      expect(mockedPost).toHaveBeenCalledWith('/auth/login', {
+        email: 'user@example.com',
+        password: 'secret-password',
+      }),
+    )
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledTimes(1))
+  })
+
+  it('默认形态不受影响（双 Tab 仍在）', () => {
+    renderLogin({})
+    expect(screen.getByRole('tab', { name: '验证码登录' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: '密码登录' })).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,138 @@
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ApiError } from '@ploykit/client'
+import { RegisterPage } from '../auth/RegisterPage'
+
+
+
+const mockedPost = vi.hoisted(() => vi.fn())
+const mockedRefresh = vi.hoisted(() => vi.fn())
+vi.mock('../../../../hooks/src/hooks/useApi', () => ({
+  useApi: () => ({ post: mockedPost, get: vi.fn(), put: vi.fn(), patch: vi.fn(), delete: vi.fn() }),
+}))
+vi.mock('../../../../hooks/src/hooks/useAuth', () => ({
+  useAuth: () => ({ refresh: mockedRefresh, user: null, workspaces: [], loading: false, logout: vi.fn() }),
+}))
+
+
+vi.mock('../../../../hooks/src/hooks/useSiteConfig', () => ({
+  useSiteConfig: () => ({ data: { allow_signup: '1' } }),
+}))
+
+const STRONG_PW = 'Abcdef1234!'
+
+beforeEach(() => {
+  mockedPost.mockReset().mockResolvedValue({ user: { id: 'u1' }, expires_at: '2026-01-01T00:00:00Z' })
+  mockedRefresh.mockReset().mockResolvedValue(undefined)
+})
+
+function fillValidForm() {
+  fireEvent.change(screen.getByLabelText('邮箱'), { target: { value: 'user@example.com' } })
+  fireEvent.change(screen.getByLabelText('密码'), { target: { value: STRONG_PW } })
+  fireEvent.change(screen.getByLabelText('昵称（可选）'), { target: { value: '小明' } })
+}
+
+describe('RegisterPage', () => {
+  it('渲染表单字段与"已有账号？登录"入口', () => {
+    render(<RegisterPage />)
+    expect(screen.getByLabelText('邮箱')).toBeInTheDocument()
+    expect(screen.getByLabelText('密码')).toBeInTheDocument()
+    expect(screen.getByLabelText('昵称（可选）')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '登录' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /创建账号/ })).toBeInTheDocument()
+  })
+
+  it('弱密码（少于三类字符）被 zod 拦截，不发起请求', async () => {
+    render(<RegisterPage />)
+    fireEvent.change(screen.getByLabelText('邮箱'), { target: { value: 'user@example.com' } })
+    fireEvent.change(screen.getByLabelText('密码'), { target: { value: 'abcdefghijk' } }) 
+    fireEvent.click(screen.getByRole('button', { name: /创建账号/ }))
+
+    expect(await screen.findByText('需包含大写/小写/数字/符号中的至少三类')).toBeInTheDocument()
+    expect(mockedPost).not.toHaveBeenCalled()
+  })
+
+  it('有效提交 → POST /auth/register 携带正确 payload 并触发 onSuccess', async () => {
+    const onSuccess = vi.fn()
+    render(<RegisterPage onSuccess={onSuccess} />)
+    fillValidForm()
+    fireEvent.click(screen.getByRole('button', { name: /创建账号/ }))
+
+    await waitFor(() => expect(mockedPost).toHaveBeenCalledTimes(1))
+    expect(mockedPost).toHaveBeenCalledWith('/auth/register', {
+      email: 'user@example.com',
+      password: STRONG_PW,
+      display_name: '小明',
+    })
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledTimes(1))
+    expect(mockedRefresh).toHaveBeenCalledTimes(1)
+  })
+
+  it('P1-2：昵称留空 → 不发 display_name 字段（空串会被服务端 400）', async () => {
+    const onSuccess = vi.fn()
+    render(<RegisterPage onSuccess={onSuccess} />)
+    fireEvent.change(screen.getByLabelText('邮箱'), { target: { value: 'user@example.com' } })
+    fireEvent.change(screen.getByLabelText('密码'), { target: { value: STRONG_PW } })
+    
+    fireEvent.click(screen.getByRole('button', { name: /创建账号/ }))
+
+    await waitFor(() => expect(mockedPost).toHaveBeenCalledTimes(1))
+    const payload = mockedPost.mock.calls[0][1] as Record<string, unknown>
+    expect('display_name' in payload).toBe(false)
+    expect(payload.email).toBe('user@example.com')
+    expect(payload.password).toBe(STRONG_PW)
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledTimes(1))
+  })
+
+  it('P1-2：昵称纯空格 → 同样不发 display_name 字段', async () => {
+    render(<RegisterPage onSuccess={vi.fn()} />)
+    fireEvent.change(screen.getByLabelText('邮箱'), { target: { value: 'user@example.com' } })
+    fireEvent.change(screen.getByLabelText('密码'), { target: { value: STRONG_PW } })
+    fireEvent.change(screen.getByLabelText('昵称（可选）'), { target: { value: '   ' } })
+    fireEvent.click(screen.getByRole('button', { name: /创建账号/ }))
+
+    await waitFor(() => expect(mockedPost).toHaveBeenCalledTimes(1))
+    const payload = mockedPost.mock.calls[0][1] as Record<string, unknown>
+    expect('display_name' in payload).toBe(false)
+  })
+
+  it('昵称首尾空白被裁剪后再提交', async () => {
+    render(<RegisterPage onSuccess={vi.fn()} />)
+    fireEvent.change(screen.getByLabelText('邮箱'), { target: { value: 'user@example.com' } })
+    fireEvent.change(screen.getByLabelText('密码'), { target: { value: STRONG_PW } })
+    fireEvent.change(screen.getByLabelText('昵称（可选）'), { target: { value: '  小明  ' } })
+    fireEvent.click(screen.getByRole('button', { name: /创建账号/ }))
+
+    await waitFor(() => expect(mockedPost).toHaveBeenCalledTimes(1))
+    expect(mockedPost).toHaveBeenCalledWith('/auth/register', {
+      email: 'user@example.com',
+      password: STRONG_PW,
+      display_name: '小明',
+    })
+  })
+
+  it('注册失败展示后端错误文案且不跳转', async () => {
+    mockedPost.mockRejectedValueOnce(new Error('该邮箱已被注册'))
+    const onSuccess = vi.fn()
+    render(<RegisterPage onSuccess={onSuccess} />)
+    fillValidForm()
+    fireEvent.click(screen.getByRole('button', { name: /创建账号/ }))
+
+    expect(await screen.findByRole('alert')).toHaveTextContent('该邮箱已被注册')
+    expect(onSuccess).not.toHaveBeenCalled()
+  })
+
+  it('RE2-3：重复邮箱（ApiError "email already registered"）映射为中文提示，不直出英文', async () => {
+    mockedPost.mockRejectedValueOnce(new ApiError(409, 'E_CONFLICT', 'email already registered'))
+    const onSuccess = vi.fn()
+    render(<RegisterPage onSuccess={onSuccess} />)
+    fillValidForm()
+    fireEvent.click(screen.getByRole('button', { name: /创建账号/ }))
+
+    const alert = await screen.findByRole('alert')
+    expect(alert).toHaveTextContent('该邮箱已注册，可直接登录或换个邮箱重试')
+    expect(alert).not.toHaveTextContent('email already registered')
+    expect(onSuccess).not.toHaveBeenCalled()
+  })
+})

package/src/pages/__tests__/ssr-smoke.test.tsx

@@ -0,0 +1,99 @@
+
+import { renderToString } from 'react-dom/server'
+import { MemoryRouter } from 'react-router'
+import { describe, expect, it, vi } from 'vitest'
+import { OnboardingChecklist } from '../../components/OnboardingChecklist'
+import { PloykitProvider } from '@ploykit/hooks'
+import { LandingPage } from '../LandingPage'
+import { LoginPage } from '../LoginPage'
+
+
+
+vi.mock('../../../../hooks/src/hooks/useAuth', () => ({
+  useAuth: () => ({
+    user: { email: 'ssr@example.com', display_name: 'SSR' },
+    workspaces: [{ id: 'ws-1', name: 'Acme' }],
+    loading: false,
+    error: null,
+    refresh: vi.fn(async () => {}),
+    logout: vi.fn(async () => {}),
+  }),
+}))
+
+
+
+const touched: string[] = []
+
+function poison(name: string): () => void {
+  const desc = Object.getOwnPropertyDescriptor(globalThis, name)
+  Object.defineProperty(globalThis, name, {
+    configurable: true,
+    get() {
+      touched.push(name)
+      throw new Error(`[SSR 冒烟] 渲染期访问了浏览器 API：${name}`)
+    },
+  })
+  return () => {
+    if (desc) Object.defineProperty(globalThis, name, desc)
+    else delete (globalThis as Record<string, unknown>)[name]
+  }
+}
+
+function withPoisonedStorage(render: () => string): string {
+  const restore = ['localStorage', 'sessionStorage'].map(poison)
+  try {
+    return render()
+  } finally {
+    restore.forEach((r) => r())
+  }
+}
+
+const landingProps = {
+  brand: 'PloykitSmoke',
+  tagline: '构建快',
+  description: '冒烟落地页',
+  features: [{ icon: '⚡', title: '快', desc: '很快' }],
+  plans: [{ name: 'Free', price: '¥0', features: ['a'], cta: '注册' }],
+}
+
+describe('ui 包 SSR 渲染冒烟（R2：渲染期禁摸浏览器 API）', () => {
+  it('LandingPage（MemoryRouter 内）：输出非空且不摸存储 API', () => {
+    const html = withPoisonedStorage(() =>
+      renderToString(
+        <MemoryRouter>
+          <LandingPage {...landingProps} />
+        </MemoryRouter>,
+      ),
+    )
+    expect(html.length).toBeGreaterThan(0)
+    expect(html).toContain('PloykitSmoke')
+    expect(touched).toEqual([])
+  })
+
+  it('LoginPage（PloykitProvider + MemoryRouter 内）：输出非空且不摸存储 API', () => {
+    const html = withPoisonedStorage(() =>
+      renderToString(
+        <PloykitProvider>
+          <MemoryRouter>
+            <LoginPage />
+          </MemoryRouter>
+        </PloykitProvider>,
+      ),
+    )
+    expect(html.length).toBeGreaterThan(0)
+    expect(html).toContain('登录')
+    expect(touched).toEqual([])
+  })
+
+  it('OnboardingChecklist（R2 回归对象）：渲染期不读 localStorage，输出非空', () => {
+    const html = withPoisonedStorage(() =>
+      renderToString(
+        <OnboardingChecklist items={[{ key: 'a', label: '冒烟引导项', done: false }]} />,
+      ),
+    )
+    
+    
+    expect(html).toContain('冒烟引导项')
+    expect(touched).toEqual([])
+  })
+})

package/src/pages/account/NotificationPreferencesPage.tsx

@@ -0,0 +1,138 @@
+
+import { useId } from 'react'
+import { PageHeader, PageLoading, PageError, PageEmpty } from '../../components/Page'
+import { Switch } from '../../components/ui/switch'
+import { toast } from '../../components/toast'
+import { useSEO } from '@ploykit/hooks'
+import {
+  useNotificationPrefs, useSetNotificationPref, type NotificationPreference,
+} from '@ploykit/hooks'
+
+export interface NotificationTypeMeta {
+  type: string
+  label: string
+  description?: string
+}
+
+export interface NotificationPreferencesPageProps {
+  
+  types?: NotificationTypeMeta[]
+  title?: string
+  description?: string
+  
+  siteName?: string
+  
+  emailChannelNote?: string
+}
+
+export function NotificationPreferencesPage({
+  types,
+  title = '通知偏好',
+  description = '选择每种通知的接收渠道；未显示的类型默认全部开启',
+  siteName,
+  emailChannelNote,
+}: NotificationPreferencesPageProps) {
+  const { prefs, loading, error, refetch } = useNotificationPrefs()
+  const { setPref } = useSetNotificationPref()
+  
+  
+  const uid = useId()
+  
+  
+  
+  useSEO({ title: siteName ? `${title} · ${siteName}` : title })
+
+  if (loading) return <div><PageHeader title={title} description={description} /><PageLoading /></div>
+  if (error) {
+    return (
+      <div>
+        <PageHeader title={title} description={description} />
+        <PageError message={error instanceof Error ? error.message : '偏好加载失败'} onRetry={() => refetch()} />
+      </div>
+    )
+  }
+
+  
+  const byType = new Map(prefs.map((p: NotificationPreference) => [p.notification_type, p]))
+  const list: NotificationTypeMeta[] =
+    types ?? prefs.map((p: NotificationPreference) => ({ type: p.notification_type, label: p.notification_type }))
+
+  if (list.length === 0) {
+    return (
+      <div>
+        <PageHeader title={title} description={description} />
+        <PageEmpty
+          label="暂无可配置的通知类型"
+          hint="通知类型目录由服务端下发：首次产生通知设置（或后端接入类型目录接口）后，会出现在这里；默认所有通知双渠道开启。"
+        />
+      </div>
+    )
+  }
+
+  const toggle = async (type: string, channel: 'email_enabled' | 'in_app_enabled', next: boolean) => {
+    try {
+      await setPref(type, { [channel]: next })
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : '保存失败') 
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader title={title} description={description} />
+
+      <div className="w-full max-w-4xl space-y-4">
+        {/* B2 诚实化：邮件未接线时产品传入的能力说明（单行渲染一次，不随行重复——
+            390 窄屏行内追加会挤压开关组造成溢出） */}
+        {emailChannelNote && (
+          <p className="text-sm text-muted-foreground">邮件渠道：{emailChannelNote}</p>
+        )}
+        {list.map(({ type, label, description: desc }) => {
+          const row = byType.get(type)
+          const inApp = row?.in_app_enabled ?? true
+          const email = row?.email_enabled ?? true
+          
+          
+          
+          
+          const inAppInputId = `${uid}-${type}-in-app`
+          const emailInputId = `${uid}-${type}-email`
+          const inAppLabelId = `${inAppInputId}-label`
+          const emailLabelId = `${emailInputId}-label`
+          return (
+            <div key={type} className="flex flex-row items-center justify-between gap-4 rounded-lg border p-4">
+              <div className="min-w-0">
+                <p className="text-sm font-medium">{label}</p>
+                {desc && <p className="mt-0.5 text-sm text-muted-foreground">{desc}</p>}
+              </div>
+              <div className="flex shrink-0 items-center gap-5">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <label id={inAppLabelId} htmlFor={inAppInputId} className="cursor-pointer select-none">
+                    站内<span className="sr-only">（{label}）</span>
+                  </label>
+                  <Switch
+                    id={inAppInputId}
+                    aria-labelledby={inAppLabelId}
+                    checked={inApp}
+                    onCheckedChange={(v) => toggle(type, 'in_app_enabled', v)}
+                  />
+                </div>
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <label id={emailLabelId} htmlFor={emailInputId} className="cursor-pointer select-none">
+                    邮件<span className="sr-only">（{label}）</span>
+                  </label>
+                  <Switch
+                    id={emailInputId}
+                    aria-labelledby={emailLabelId}
+                    checked={email}
+                    onCheckedChange={(v) => toggle(type, 'email_enabled', v)}
+                  />
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}