@ploykit/ui 0.5.0 → 0.6.2

package/src/pages/admin/WorkspacesPage.tsx

@@ -0,0 +1,299 @@
+
+import { useEffect, useState } from 'react';
+import { Link, useSearchParams } from 'react-router';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { components } from '@ploykit/client';
+import { DataTable, type Column } from '../../components/DataTable';
+import { PageEmpty, PageError, PageHeader } from '../../components/Page';
+import { toast } from '../../components/toast';
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import { Input } from '../../components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../components/ui/select';
+import { useApi } from '@ploykit/hooks';
+import { formatDate } from '../../lib/utils';
+import {
+  ADMIN_PAGE_SIZE,
+  adminError,
+  adminListQuery,
+  type AdminListEnvelope,
+} from './shared';
+
+type AdminWorkspace = components['schemas']['AdminWorkspace'];
+
+
+interface AdminPlanView {
+  code: string;
+  name: string;
+  currency: string;
+  trial_days: number;
+  sort_no: number;
+}
+
+
+const FALLBACK_PLAN_CODES = ['free'];
+
+export function WorkspacesPage() {
+  const api = useApi();
+  const qc = useQueryClient();
+  
+  const [searchParams, setSearchParams] = useSearchParams();
+  const q = searchParams.get('q') ?? '';
+  const page = Math.max(
+    1,
+    Number.parseInt(searchParams.get('page') ?? '1', 10) || 1,
+  );
+  const applyFilter = (nextQ: string, nextPage: number) => {
+    const sp = new URLSearchParams(searchParams);
+    if (nextQ) sp.set('q', nextQ);
+    else sp.delete('q');
+    if (nextPage > 1) sp.set('page', String(nextPage));
+    else sp.delete('page');
+    setSearchParams(sp, { replace: true });
+  };
+  const setPage = (p: number) => applyFilter(q, p);
+  
+  const [searchInput, setSearchInput] = useState(q);
+  useEffect(() => {
+    const t = setTimeout(() => {
+      const next = searchInput.trim();
+      if (next !== q) applyFilter(next, 1);
+    }, 300);
+    return () => clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchInput]);
+
+  const wsQ = useQuery({
+    queryKey: ['admin', 'workspaces', page, q],
+    queryFn: () =>
+      api.get<AdminListEnvelope<AdminWorkspace>>(
+        `/api/admin/workspaces${adminListQuery(page, ADMIN_PAGE_SIZE, { q })}`,
+      ),
+  });
+
+  
+  
+  
+  
+  const plansQ = useQuery({
+    queryKey: ['admin', 'plans'],
+    queryFn: () =>
+      api.get<{ items: string[]; plans?: AdminPlanView[] }>('/api/admin/plans'),
+  });
+  const planCodes = plansQ.data?.items?.length
+    ? plansQ.data.items
+    : FALLBACK_PLAN_CODES;
+  
+  
+  const planName = new Map(
+    (plansQ.data?.plans ?? [])
+      .filter((p) => p.name)
+      .map((p) => [p.code, p.name] as const),
+  );
+  const planTrial = new Map(
+    (plansQ.data?.plans ?? [])
+      .filter((p) => p.trial_days > 0)
+      .map((p) => [p.code, p.trial_days] as const),
+  );
+  
+  
+  const planLabel = (code: string) => {
+    const name = planName.get(code) ?? code;
+    return planTrial.has(code)
+      ? `${name}（新订阅享 ${planTrial.get(code)} 天试用）`
+      : name;
+  };
+
+  const planM = useMutation({
+    mutationFn: (v: { ws: AdminWorkspace; planCode: string }) =>
+      api.patch(`/api/admin/workspaces/${v.ws.id}/plan`, {
+        plan_code: v.planCode,
+      }),
+    onSuccess: (_d, v) => {
+      toast.success(
+        `${v.ws.name} 套餐已变更为 ${planLabel(v.planCode)}`,
+      );
+      void qc.invalidateQueries({ queryKey: ['admin', 'workspaces'] });
+      
+      void qc.invalidateQueries({ queryKey: ['admin', 'workspace'] });
+      void qc.invalidateQueries({ queryKey: ['admin', 'stats'] });
+    },
+    onError: (e) => toast.error(adminError(e, '套餐变更失败')),
+  });
+
+  const raw = wsQ.data?.items ?? [];
+  const total = wsQ.data?.total ?? 0;
+  
+  const pastEnd = !wsQ.isPending && raw.length === 0 && page > 1;
+
+  const columns: Column<AdminWorkspace>[] = [
+    {
+      key: 'name',
+      header: '工作区',
+      render: (ws) => (
+        
+        
+        <div className="min-w-0 max-w-[24rem]">
+          <p className="truncate font-medium">
+            {/* 工作区名 = 详情入口（/admin/workspaces/:id：成员/配额/删除操作面） */}
+            <Link
+              to={`/admin/workspaces/${ws.id}`}
+              className="transition-colors hover:text-primary hover:underline"
+            >
+              {ws.name}
+            </Link>
+          </p>
+          <p className="truncate font-mono text-xs text-muted-foreground">
+            {ws.slug}
+          </p>
+        </div>
+      ),
+    },
+    {
+      key: 'owner_email',
+      header: '属主',
+      
+      
+      className: 'w-48',
+      render: (ws) => (
+        <span className="truncate text-muted-foreground" title={ws.owner_email ?? undefined}>
+          {ws.owner_email ?? '—'}
+        </span>
+      ),
+    },
+    {
+      key: 'plan_code',
+      header: '套餐',
+      className: 'w-44',
+      render: (ws) => {
+        const mutating = planM.isPending && planM.variables?.ws.id === ws.id;
+        const known = planCodes.includes(ws.plan_code);
+        return (
+          <div className="flex items-center gap-2">
+            <Select
+              value={ws.plan_code}
+              onValueChange={(v) => {
+                if (typeof v === 'string' && v !== ws.plan_code)
+                  planM.mutate({ ws, planCode: v });
+              }}
+            >
+              <SelectTrigger
+                size="sm"
+                className="max-md:h-10"
+                disabled={mutating}
+                aria-label={`变更 ${ws.name} 套餐`}
+              >
+                <SelectValue>{planLabel(ws.plan_code)}</SelectValue>
+              </SelectTrigger>
+              <SelectContent align="start">
+                {planCodes.map((code) => (
+                  <SelectItem key={code} value={code}>
+                    {planLabel(code)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {/* 非目录码：原值仍可见（Select 显示原 plan_code），打标提示 */}
+            {!known && (
+              <Badge variant="outline" className="text-muted-foreground">
+                未知套餐
+              </Badge>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      key: 'member_count',
+      header: '成员数',
+      className: 'w-20',
+      render: (ws) => <span className="tabular-nums">{ws.member_count}</span>,
+    },
+    {
+      key: 'created_at',
+      header: '创建时间',
+      className: 'w-28',
+      render: (ws) => (
+        <span className="whitespace-nowrap text-muted-foreground">
+          {formatDate(ws.created_at)}
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <PageHeader
+        title="工作区"
+        description="平台全部工作区；支持名称/slug 搜索，行内可直接变更套餐（审计留痕）"
+      />
+
+      {/* B-workspaces-4：跨页找工作区不再只能逐页手翻（服务端 ilike 检索）。 */}
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <Input
+          className="w-72"
+          placeholder="按名称 / slug 前缀搜索…"
+          aria-label="搜索工作区"
+          value={searchInput}
+          onChange={(e) => setSearchInput(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') applyFilter(searchInput.trim(), 1);
+          }}
+        />
+        {q && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              setSearchInput('');
+              applyFilter('', 1);
+            }}
+          >
+            清除搜索
+          </Button>
+        )}
+      </div>
+
+      {wsQ.isError ? (
+        <PageError
+          message={adminError(wsQ.error, '工作区列表加载失败')}
+          onRetry={() => void wsQ.refetch()}
+        />
+      ) : (
+        <DataTable
+          columns={columns}
+          rows={raw}
+          rowKey={(ws) => ws.id}
+          loading={wsQ.isPending}
+          pagination={{
+            page,
+            pageSize: ADMIN_PAGE_SIZE,
+            total,
+            onPageChange: setPage,
+          }}
+          empty={
+            
+            pastEnd ? (
+              <div className="flex flex-col items-center gap-2">
+                <PageEmpty label="没有更多工作区了" hint="当前页数据可能已被删除" />
+                <Button variant="outline" size="sm" onClick={() => setPage(1)}>
+                  返回第一页
+                </Button>
+              </div>
+            ) : q ? (
+              <PageEmpty label="没有匹配的工作区" hint="换个关键词或清除搜索" />
+            ) : (
+              <PageEmpty label="暂无工作区" />
+            )
+          }
+        />
+      )}
+    </div>
+  );
+}

package/src/pages/admin/__tests__/AdminSettingsPage.test.tsx

@@ -0,0 +1,260 @@
+
+import '@testing-library/jest-dom/vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { AdminSettingsPage } from '../AdminSettingsPage';
+
+const mockedGet = vi.hoisted(() => vi.fn());
+const mockedPut = vi.hoisted(() => vi.fn());
+const mockedPost = vi.hoisted(() => vi.fn());
+const toastMocks = vi.hoisted(() => ({
+  success: vi.fn(),
+  error: vi.fn(),
+  info: vi.fn(),
+}));
+vi.mock('@ploykit/client', () => ({
+  api: {
+    get: mockedGet,
+    put: mockedPut,
+    post: mockedPost,
+    patch: vi.fn(),
+    delete: vi.fn(),
+  },
+  ApiError: class ApiError extends Error {
+    status: number;
+    code: string;
+    constructor(status: number, code: string, message: string) {
+      super(message);
+      this.status = status;
+      this.code = code;
+    }
+  },
+}));
+vi.mock('../../../components/toast', () => ({ toast: toastMocks }));
+
+const ENVELOPE = {
+  items: { banner_text: '今晚例行维护', banner_kind: 'warn' },
+  effective: {
+    banner_text: '今晚例行维护',
+    banner_kind: 'warn',
+    maintenance_mode: '0',
+    allow_signup: '1',
+    allowed_domains: '',
+  },
+  defaults: {
+    banner_text: '',
+    banner_kind: 'info',
+    maintenance_mode: '0',
+    allow_signup: '1',
+    allowed_domains: '',
+  },
+  descriptions: {
+    banner_text: '站点公告文本（空 = 无公告）',
+    banner_kind: '公告样式',
+    maintenance_mode: '维护模式说明',
+    allow_signup: '注册开关说明',
+    allowed_domains: '域名白名单说明',
+  },
+};
+
+function renderPage() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={qc}>
+      <AdminSettingsPage />
+    </QueryClientProvider>,
+  );
+}
+
+beforeEach(() => {
+  mockedGet.mockReset().mockResolvedValue(ENVELOPE);
+  mockedPut.mockReset().mockResolvedValue({ key: '', value: '' });
+  mockedPost.mockReset().mockResolvedValue({ mode: 'smtp', status: 'sent' });
+});
+
+describe('AdminSettingsPage', () => {
+  it('渲染四卡并按 effective 回填表单（公告预览同步）', async () => {
+    renderPage();
+    
+    expect(await screen.findByText('顶部公告横条')).toBeInTheDocument();
+    expect(screen.getByText('全站"维护中"提示条')).toBeInTheDocument();
+    expect(screen.getByText('注册开关与域名白名单')).toBeInTheDocument();
+    expect(screen.getByText('发送测试邮件')).toBeInTheDocument();
+    
+    expect(screen.getByLabelText('公告文本')).toHaveValue('今晚例行维护');
+    expect(screen.getByRole('status')).toHaveTextContent('今晚例行维护');
+    expect(screen.getByText('展示中')).toBeInTheDocument();
+    expect(screen.getByText('开放注册')).toBeInTheDocument();
+    
+    expect(mockedGet).toHaveBeenCalledWith('/api/admin/settings');
+  });
+
+  it('修改公告并保存 → PUT banner_text + banner_kind 两键', async () => {
+    renderPage();
+    await screen.findByText('顶部公告横条');
+    fireEvent.change(screen.getByLabelText('公告文本'), {
+      target: { value: '新公告：本周日停机' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '保存公告' }));
+
+    await waitFor(() => expect(mockedPut).toHaveBeenCalledTimes(2));
+    expect(mockedPut).toHaveBeenCalledWith('/api/admin/settings/banner_text', {
+      value: '新公告：本周日停机',
+    });
+    expect(mockedPut).toHaveBeenCalledWith('/api/admin/settings/banner_kind', {
+      value: 'warn',
+    });
+    
+    expect(screen.getByRole('status')).toHaveTextContent('新公告：本周日停机');
+  });
+
+  it('保存域名白名单 → PUT allowed_domains', async () => {
+    renderPage();
+    await screen.findByText('注册开关与域名白名单');
+    fireEvent.change(screen.getByLabelText(/域名白名单/), {
+      target: { value: 'corp.com, edu.cn' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '保存白名单' }));
+
+    await waitFor(() => expect(mockedPut).toHaveBeenCalledTimes(1));
+    expect(mockedPut).toHaveBeenCalledWith(
+      '/api/admin/settings/allowed_domains',
+      {
+        value: 'corp.com, edu.cn',
+      },
+    );
+  });
+
+  it('发送测试邮件 → POST test-email；dev 通道提示看日志', async () => {
+    mockedPost.mockResolvedValueOnce({
+      mode: 'dev',
+      hint: '当前为开发邮件通道（emaildev）：邮件内容已打日志，请到后端日志查看，真实邮箱不会收到',
+    });
+    renderPage();
+    await screen.findByText('发送测试邮件');
+    fireEvent.change(screen.getByLabelText('测试邮件收件邮箱'), {
+      target: { value: 'ops@example.com' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '发送' }));
+
+    await waitFor(() => expect(mockedPost).toHaveBeenCalledTimes(1));
+    expect(mockedPost).toHaveBeenCalledWith('/api/admin/settings/test-email', {
+      to: 'ops@example.com',
+    });
+    expect(await screen.findByText(/后端日志查看/)).toBeInTheDocument();
+  });
+
+  it('测试邮件失败 → 展示错误结果，不静默', async () => {
+    mockedPost.mockRejectedValueOnce(new Error('smtp connect refused'));
+    renderPage();
+    await screen.findByText('发送测试邮件');
+    fireEvent.change(screen.getByLabelText('测试邮件收件邮箱'), {
+      target: { value: 'ops@example.com' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '发送' }));
+
+    expect(await screen.findByText(/发送失败/)).toBeInTheDocument();
+  });
+
+  
+  it('限流卡：按 effective 回填三键', async () => {
+    mockedGet.mockResolvedValueOnce({
+      ...ENVELOPE,
+      effective: {
+        ...ENVELOPE.effective,
+        rate_limit_per_user_per_min: '600',
+        rate_limit_per_ip_per_min: '60',
+        rate_limit_allowlist: '10.0.0.5, 192.168.0.0/16',
+      },
+    });
+    renderPage();
+    expect(
+      await screen.findByText('每用户 / 每 IP 限流与豁免名单'),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText('每用户请求/分（0 = 关闭）')).toHaveValue('600');
+    expect(
+      screen.getByLabelText('每 IP 请求/分（认证路径；0 = 关闭）'),
+    ).toHaveValue('60');
+    expect(screen.getByLabelText(/豁免名单/)).toHaveValue(
+      '10.0.0.5, 192.168.0.0/16',
+    );
+    expect(screen.getByText('启用中')).toBeInTheDocument();
+  });
+
+  it('保存限流配置 → PUT 三键（user/ip/allowlist）', async () => {
+    renderPage();
+    await screen.findByText('每用户 / 每 IP 限流与豁免名单');
+
+    fireEvent.change(screen.getByLabelText('每用户请求/分（0 = 关闭）'), {
+      target: { value: '600' },
+    });
+    fireEvent.change(
+      screen.getByLabelText('每 IP 请求/分（认证路径；0 = 关闭）'),
+      { target: { value: '30' } },
+    );
+    fireEvent.change(screen.getByLabelText(/豁免名单/), {
+      target: { value: '10.0.0.5' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '保存限流配置' }));
+
+    await waitFor(() => expect(mockedPut).toHaveBeenCalledTimes(3));
+    expect(mockedPut).toHaveBeenCalledWith(
+      '/api/admin/settings/rate_limit_per_user_per_min',
+      { value: '600' },
+    );
+    expect(mockedPut).toHaveBeenCalledWith(
+      '/api/admin/settings/rate_limit_per_ip_per_min',
+      { value: '30' },
+    );
+    expect(mockedPut).toHaveBeenCalledWith(
+      '/api/admin/settings/rate_limit_allowlist',
+      { value: '10.0.0.5' },
+    );
+  });
+
+  it('B-settings-10：限流空值/非法值 → 拒绝保存并就地提示（不再静默按 0 落库）', async () => {
+    renderPage();
+    await screen.findByText('每用户 / 每 IP 限流与豁免名单');
+
+    
+    fireEvent.change(screen.getByLabelText('每用户请求/分（0 = 关闭）'), {
+      target: { value: '' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '保存限流配置' }));
+
+    expect(
+      await screen.findByText('每用户限流：不能留空：填写 0 表示关闭限流'),
+    ).toBeInTheDocument();
+    expect(mockedPut).not.toHaveBeenCalled();
+
+    
+    fireEvent.change(screen.getByLabelText('每用户请求/分（0 = 关闭）'), {
+      target: { value: 'abc' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: '保存限流配置' }));
+    expect(
+      await screen.findByText(/每用户限流：必须是 0\.\.100000 的整数/),
+    ).toBeInTheDocument();
+    expect(mockedPut).not.toHaveBeenCalled();
+  });
+
+  it('B-settings-1：限流三键部分失败 → 如实汇报部分写入（成功键已生效）', async () => {
+    mockedPut.mockImplementation(async (url: string) => {
+      if (url.endsWith('rate_limit_per_ip_per_min')) {
+        throw new Error('必须是 0..100000 的整数');
+      }
+      return {};
+    });
+    renderPage();
+    await screen.findByText('每用户 / 每 IP 限流与豁免名单');
+
+    fireEvent.click(screen.getByRole('button', { name: '保存限流配置' }));
+    await waitFor(() => expect(mockedPut).toHaveBeenCalledTimes(3));
+    await waitFor(() => expect(toastMocks.error).toHaveBeenCalled());
+    const msg = toastMocks.error.mock.calls[0][0] as string;
+    expect(msg).toContain('部分保存');
+    expect(msg).toContain('成功 2/3');
+    expect(msg).toContain('每 IP 限流');
+  });
+});