@ploykit/ui 0.7.2 → 0.8.0

package/README.md

@@ -194,6 +194,21 @@ import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@
 - **工具**：`cn`、`formatDate` / `formatDateTime` / `shortID`、`statusTone` / `statusLabel`、`apiErrorMessage`、`FormField`、`CronInput`。
 - 基础 UI 件（Button / Input / Card / Tabs / AlertDialog / DropdownMenu / Popover / Switch / Checkbox / Progress / Avatar / Breadcrumb / Empty / Field / Label / Tooltip / Skeleton / Separator…）全部从 barrel 导出；也可走子路径 `import { Button } from '@ploykit/ui/components/ui/button'`（推荐统一走 barrel）。
 
+## Tailwind v4 集成
+
+本包组件的 class 全部走语义令牌（`bg-card`、`text-muted-foreground`…），需要 Tailwind 扫描到本包源码才会生成对应规则。Tailwind v4 的自动内容探测会跳过 node_modules，因此按消费方式二选一：
+
+- **monorepo 消费方**（workspace 软链）：可保留自己写的 `@source "<相对路径>/packages/ui/src";`，也可改用下面的 import（推荐——相对路径在产品拆出独立仓库后会静默失效，曾有产品因此上线了无样式的登录页数周未察觉）。
+- **独立（npm）消费方**：在 CSS 入口（如 `src/index.css`）加一行：
+
+```css
+@import "@ploykit/ui/tailwind.css";
+```
+
+`@ploykit/ui/tailwind.css` 内部只有一条 `@source "./src";`。`@source` 相对样式表文件自身解析，因此无论包位于 monorepo workspace 还是 node_modules，都指向包内的 `src/`，无需消费方关心安装路径。
+
+令牌定义（`--card` / `--popover` 等 CSS 变量与 `@theme` 映射）仍由消费方按 shadcn 惯例在自己的 CSS 里提供（参见 `example/web/src/index.css`）。
+
 ## 自定义三个层级
 
 1. **换皮**：CSS/Tailwind 覆盖样式（组件全部走 design token：`bg-popover`、`text-muted-foreground` 等）。

package/dist/components/NotificationBell.js

@@ -40,7 +40,7 @@ export function NotificationBell({ onNavigate }) {
         document.addEventListener('mousedown', onClickOutside);
         return () => document.removeEventListener('mousedown', onClickOutside);
     }, []);
-    return (_jsxs("div", { ref: ref, className: "relative", children: [_jsxs("button", { onClick: () => setOpen(!open), className: "relative p-2 text-muted-foreground hover:text-foreground hover:bg-accent rounded-md\n          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", "aria-label": "\u901A\u77E5", "aria-haspopup": "true", "aria-expanded": open, children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }), unread > 0 && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px]\n            px-1 text-xs font-bold text-white bg-destructive rounded-full", children: unread > 99 ? '99+' : unread }))] }), open && (_jsxs("div", { className: "absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border z-50", role: "dialog", "aria-label": "\u901A\u77E5\u5217\u8868", onKeyDown: (e) => { if (e.key === 'Escape')
+    return (_jsxs("div", { ref: ref, className: "relative", children: [_jsxs("button", { onClick: () => setOpen(!open), className: "relative p-2 text-muted-foreground hover:text-foreground hover:bg-accent rounded-md\n          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", "aria-label": "\u901A\u77E5", "aria-haspopup": "true", "aria-expanded": open, children: [_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) }), unread > 0 && (_jsx("span", { className: "absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[18px] h-[18px]\n            px-1 text-xs font-bold text-white bg-destructive rounded-full", children: unread > 99 ? '99+' : unread }))] }), open && (_jsxs("div", { className: "absolute right-0 mt-2 w-80 bg-popover rounded-lg shadow-lg border z-50", role: "dialog", "aria-label": "\u901A\u77E5\u5217\u8868", onKeyDown: (e) => { if (e.key === 'Escape')
                     setOpen(false); }, children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b", children: [_jsx("span", { className: "text-sm font-semibold", children: "\u901A\u77E5" }), unread > 0 && (_jsx("button", { onClick: () => markAllReadM.mutate(), disabled: markAllReadM.isPending, className: "text-xs text-primary hover:underline disabled:opacity-50\n                  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded", children: "\u5168\u90E8\u5DF2\u8BFB" }))] }), _jsx("ul", { className: "max-h-80 overflow-y-auto list-none p-0 m-0", "data-slot": "notification-list", children: listQ.isPending ? (_jsx("li", { className: "py-8 text-center text-sm text-muted-foreground", "aria-live": "polite", children: "\u52A0\u8F7D\u4E2D\u2026" })) : notifications.length === 0 ? (_jsx("li", { className: "py-8 text-center text-sm text-muted-foreground", children: "\u6682\u65E0\u901A\u77E5" })) : notifications.map((n) => (_jsx("li", { className: "border-b last:border-0", children: _jsxs("button", { type: "button", onClick: () => { if (n.link)
                                     onNavigate?.(n.link); markReadM.mutate(n.id); setOpen(false); }, className: cn('w-full text-left px-4 py-3 cursor-pointer hover:bg-muted ' +
                                     'focus-visible:outline-none focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring', !n.read_at && 'bg-accent/50'), children: [_jsxs("span", { className: "flex items-start justify-between gap-2", children: [_jsx("span", { className: "text-sm font-medium text-foreground", children: n.title }), n.count > 1 && (_jsxs("span", { className: "text-xs bg-muted text-muted-foreground px-1.5 py-0.5 rounded-full shrink-0", children: ["\u00D7", n.count] }))] }), n.body && _jsx("span", { className: "block mt-0.5 text-xs text-muted-foreground line-clamp-2", children: n.body }), _jsx("span", { className: "block mt-1 text-[10px] text-muted-foreground", children: formatDateTime(n.created_at) })] }) }, n.id))) })] }))] }));

package/dist/index.d.ts

@@ -87,6 +87,7 @@ export { UsersPage } from './pages/admin/UsersPage';
 export { UserDetailPage } from './pages/admin/UserDetailPage';
 export { WorkspacesPage } from './pages/admin/WorkspacesPage';
 export { WorkspaceDetailPage } from './pages/admin/WorkspaceDetailPage';
+export { PlansPage } from './pages/admin/PlansPage';
 export { OrdersPage } from './pages/admin/OrdersPage';
 export { WebhookDeliveriesPage } from './pages/admin/WebhookDeliveriesPage';
 export { AuditPage } from './pages/admin/AuditPage';

package/dist/index.js

@@ -71,6 +71,7 @@ export { UsersPage } from './pages/admin/UsersPage.js';
 export { UserDetailPage } from './pages/admin/UserDetailPage.js';
 export { WorkspacesPage } from './pages/admin/WorkspacesPage.js';
 export { WorkspaceDetailPage } from './pages/admin/WorkspaceDetailPage.js';
+export { PlansPage } from './pages/admin/PlansPage.js';
 export { OrdersPage } from './pages/admin/OrdersPage.js';
 export { WebhookDeliveriesPage } from './pages/admin/WebhookDeliveriesPage.js';
 export { AuditPage } from './pages/admin/AuditPage.js';

package/dist/pages/LoginPage.js

@@ -77,7 +77,7 @@ export function LoginPage({ resetPath = '/forgot-password', registerPath = '/reg
             setPwLoading(false);
         }
     };
-    return (_jsx("div", { className: "min-h-screen flex items-center justify-center bg-background", children: _jsxs("div", { className: "w-full max-w-sm space-y-4 p-8 bg-white rounded-lg shadow", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-2xl font-bold", children: title }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })] }), passwordOnly ? (_jsxs("form", { onSubmit: handlePasswordSubmit, className: "space-y-4 pt-2", children: [_jsx(FormField, { label: "\u90AE\u7BB1", htmlFor: "login-pw-email", children: _jsx(Input, { id: "login-pw-email", type: "email", value: email, required: true, onChange: (e) => setEmail(e.target.value), placeholder: "you@example.com", autoComplete: "email" }) }), _jsx(FormField, { label: "\u5BC6\u7801", htmlFor: "login-pw-password", children: _jsx(Input, { id: "login-pw-password", type: "password", value: password, required: true, onChange: (e) => setPassword(e.target.value), placeholder: "\u8F93\u5165\u5BC6\u7801", autoComplete: "current-password" }) }), pwError && _jsx("p", { role: "alert", className: "text-destructive text-sm", children: pwError }), _jsx(Button, { type: "submit", className: "w-full", disabled: pwLoading || !email || !password, children: pwLoading ? '登录中…' : '登录' })] })) : (_jsxs(Tabs, { defaultValue: "code", children: [_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "code", children: "\u9A8C\u8BC1\u7801\u767B\u5F55" }), _jsx(TabsTrigger, { value: "password", children: "\u5BC6\u7801\u767B\u5F55" })] }), _jsx(TabsContent, { value: "code", children: _jsxs("form", { onSubmit: handleCodeSubmit, className: "space-y-4 pt-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: "login-email", className: "text-sm text-foreground", children: "\u90AE\u7BB1" }), _jsx("input", { id: "login-email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@example.com", required: true, autoComplete: "email", className: "w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-ring" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: "login-code", className: "text-sm text-foreground", children: "\u9A8C\u8BC1\u7801" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { id: "login-code", type: "text", value: code, onChange: (e) => setCode(e.target.value), placeholder: "6\u4F4D\u6570\u5B57", maxLength: 6, required: true, autoComplete: "one-time-code", className: "flex-1 px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-ring" }), _jsx("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", children: cooldown > 0
+    return (_jsx("div", { className: "min-h-screen flex items-center justify-center bg-background", children: _jsxs("div", { className: "w-full max-w-sm space-y-4 p-8 bg-card rounded-lg shadow", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-2xl font-bold", children: title }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })] }), passwordOnly ? (_jsxs("form", { onSubmit: handlePasswordSubmit, className: "space-y-4 pt-2", children: [_jsx(FormField, { label: "\u90AE\u7BB1", htmlFor: "login-pw-email", children: _jsx(Input, { id: "login-pw-email", type: "email", value: email, required: true, onChange: (e) => setEmail(e.target.value), placeholder: "you@example.com", autoComplete: "email" }) }), _jsx(FormField, { label: "\u5BC6\u7801", htmlFor: "login-pw-password", children: _jsx(Input, { id: "login-pw-password", type: "password", value: password, required: true, onChange: (e) => setPassword(e.target.value), placeholder: "\u8F93\u5165\u5BC6\u7801", autoComplete: "current-password" }) }), pwError && _jsx("p", { role: "alert", className: "text-destructive text-sm", children: pwError }), _jsx(Button, { type: "submit", className: "w-full", disabled: pwLoading || !email || !password, children: pwLoading ? '登录中…' : '登录' })] })) : (_jsxs(Tabs, { defaultValue: "code", children: [_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "code", children: "\u9A8C\u8BC1\u7801\u767B\u5F55" }), _jsx(TabsTrigger, { value: "password", children: "\u5BC6\u7801\u767B\u5F55" })] }), _jsx(TabsContent, { value: "code", children: _jsxs("form", { onSubmit: handleCodeSubmit, className: "space-y-4 pt-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: "login-email", className: "text-sm text-foreground", children: "\u90AE\u7BB1" }), _jsx("input", { id: "login-email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@example.com", required: true, autoComplete: "email", className: "w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-ring" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: "login-code", className: "text-sm text-foreground", children: "\u9A8C\u8BC1\u7801" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { id: "login-code", type: "text", value: code, onChange: (e) => setCode(e.target.value), placeholder: "6\u4F4D\u6570\u5B57", maxLength: 6, required: true, autoComplete: "one-time-code", className: "flex-1 px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-ring" }), _jsx("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", children: cooldown > 0
                                                             ? `重发（${cooldown}s）`
                                                             : codeSent
                                                                 ? '重新发送'

package/dist/pages/admin/AdminSettingsPage.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import { Copy } from 'lucide-react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { FormField } from '../../components/FormField.js';
 import { PageError, PageHeader } from '../../components/Page.js';
@@ -26,6 +27,18 @@ function parseRateLimit(raw) {
     }
     return { ok: true, v: s };
 }
+// SMTP 端口：留空合法（后端缺省 587），非空必须是 1..65535 的整数
+function parseSmtpPort(raw) {
+    const s = raw.trim();
+    if (s === '') {
+        return { ok: true, v: '' };
+    }
+    const n = Number(s);
+    if (!Number.isFinite(n) || !Number.isInteger(n) || n < 1 || n > 65535) {
+        return { ok: false, msg: '必须是 1..65535 的整数（留空 = 用缺省 587）' };
+    }
+    return { ok: true, v: s };
+}
 async function putKeys(api, entries) {
     const results = [];
     for (const e of entries) {
@@ -39,6 +52,18 @@ async function putKeys(api, entries) {
     }
     return results;
 }
+// UP-6 登录方式卡：复制回调地址（与 OverviewPage 复制工作区 ID 同款降级策略）
+function copyCallbackUrl(name, url) {
+    if (typeof navigator.clipboard?.writeText === 'function') {
+        void navigator.clipboard
+            .writeText(url)
+            .then(() => toast.success(`${name} 回调地址已复制`))
+            .catch(() => toast.error(`复制失败，完整地址：${url}`));
+    }
+    else {
+        toast.info(`当前环境不支持自动复制，完整地址：${url}`);
+    }
+}
 export function AdminSettingsPage() {
     const api = useApi();
     const qc = useQueryClient();
@@ -55,6 +80,15 @@ export function AdminSettingsPage() {
     const [rlPerIP, setRlPerIP] = useState('30');
     const [rlAllowlist, setRlAllowlist] = useState('');
     const [rlError, setRlError] = useState(null);
+    const [smtpHost, setSmtpHost] = useState('');
+    const [smtpPort, setSmtpPort] = useState('');
+    const [smtpUser, setSmtpUser] = useState('');
+    // UP-1 水合规则：smtp_pass 永不回填（真实值与掩码回显都不进 state），
+    // state 保持空串、placeholder 显示掩码；留空保存 = 不修改密码
+    const [smtpPass, setSmtpPass] = useState('');
+    const [smtpFrom, setSmtpFrom] = useState('');
+    const [smtpError, setSmtpError] = useState(null);
+    const [verifyMeta, setVerifyMeta] = useState('');
     const [hydrated, setHydrated] = useState(false);
     const eff = settingsQ.data?.effective;
     useEffect(() => {
@@ -68,6 +102,11 @@ export function AdminSettingsPage() {
         setRlPerUser(eff.rate_limit_per_user_per_min ?? '0');
         setRlPerIP(eff.rate_limit_per_ip_per_min ?? '30');
         setRlAllowlist(eff.rate_limit_allowlist ?? '');
+        setSmtpHost(eff.smtp_host ?? '');
+        setSmtpPort(eff.smtp_port ?? '');
+        setSmtpUser(eff.smtp_user ?? '');
+        setSmtpFrom(eff.smtp_from ?? '');
+        setVerifyMeta(eff.site_verification_meta ?? '');
         setHydrated(true);
     }, [eff, hydrated]);
     const afterSave = () => {
@@ -157,6 +196,48 @@ export function AdminSettingsPage() {
             toast.error(msg, { duration: ERROR_TOAST_MS });
         },
     });
+    // SMTP 发信配置（UP-1）：五键批量提交；smtp_pass 留空（含掩码未动）时
+    // 从提交列表剔除，绝不把空值/掩码落库
+    const smtpM = useMutation({
+        mutationFn: async () => {
+            const port = parseSmtpPort(smtpPort);
+            if (!port.ok)
+                throw new Error(`SMTP 端口：${port.msg}`);
+            setSmtpError(null);
+            const entries = [
+                { key: 'smtp_host', label: 'SMTP 主机', value: smtpHost.trim() },
+                { key: 'smtp_port', label: 'SMTP 端口', value: port.v },
+                { key: 'smtp_user', label: 'SMTP 用户名', value: smtpUser.trim() },
+                ...(smtpPass !== ''
+                    ? [{ key: 'smtp_pass', label: 'SMTP 密码', value: smtpPass }]
+                    : []),
+                { key: 'smtp_from', label: '发件人地址', value: smtpFrom.trim() },
+            ];
+            return putKeys(api, entries);
+        },
+        onSuccess: (results) => reportKeySaves(results, 'SMTP 配置已保存（发信热读，即时生效）', 'SMTP 配置'),
+        onError: (e) => {
+            const msg = e instanceof Error ? e.message : 'SMTP 配置保存失败';
+            setSmtpError(msg);
+            toast.error(msg, { duration: ERROR_TOAST_MS });
+        },
+    });
+    // 站长验证（UP-2）：原样提交，后端归一为 name|content 存储（400 = 校验拒绝）
+    const verifyM = useMutation({
+        mutationFn: () => api.put('/api/admin/settings/site_verification_meta', {
+            value: verifyMeta.trim(),
+        }),
+        onSuccess: () => {
+            toast.success('站长验证配置已保存');
+            afterSave();
+        },
+        onError: (e) => {
+            toast.error(adminError(e, '站长验证配置保存失败'), {
+                duration: ERROR_TOAST_MS,
+            });
+            void rollbackToServer();
+        },
+    });
     const [testTo, setTestTo] = useState('');
     const [testMsg, setTestMsg] = useState(null);
     const testEmailM = useMutation({
@@ -177,7 +258,9 @@ export function AdminSettingsPage() {
         return (_jsx(PageError, { message: adminError(settingsQ.error, '设置加载失败'), onRetry: () => void settingsQ.refetch() }));
     }
     const desc = settingsQ.data?.descriptions ?? {};
-    return (_jsxs("div", { className: "space-y-6", children: [_jsx(PageHeader, { title: "\u7CFB\u7EDF", description: "\u7AD9\u70B9\u516C\u544A\u3001\u7EF4\u62A4\u6A21\u5F0F\u3001\u6CE8\u518C\u7BA1\u63A7\u3001API \u9650\u6D41\u4E0E\u90AE\u4EF6\u901A\u9053\u2014\u2014\u4FDD\u5B58\u540E\u5168\u7AD9\u5373\u65F6\u751F\u6548\uFF08API \u9650\u6D41\u9664\u5916\uFF1A\u91CD\u542F\u540E\u751F\u6548\uFF09" }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { children: "\u7AD9\u70B9\u516C\u544A" }), _jsx(CardTitle, { children: "\u9876\u90E8\u516C\u544A\u6A2A\u6761" }), _jsx(CardAction, { children: _jsx(Badge, { variant: bannerText.trim() ? 'secondary' : 'outline', children: bannerText.trim() ? '展示中' : '未展示' }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: desc.banner_text }), _jsxs("div", { className: "rounded-lg border border-dashed", children: [_jsx(SiteBanner, { text: bannerText, kind: bannerKind }), !bannerText.trim() && (_jsx("p", { className: "px-4 py-2 text-xs text-muted-foreground", children: "\u9884\u89C8\uFF1A\u516C\u544A\u4E3A\u7A7A\u65F6\u4E0D\u6E32\u67D3\u6A2A\u6761" }))] }), _jsx(FormField, { label: "\u516C\u544A\u6587\u672C", htmlFor: "banner-text", children: _jsx("textarea", { id: "banner-text", className: "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", placeholder: "\u5982\uFF1A\u4ECA\u665A 22:00\u201323:00 \u4F8B\u884C\u7EF4\u62A4\uFF0C\u671F\u95F4\u53EF\u80FD\u77ED\u6682\u4E0D\u53EF\u7528", maxLength: 500, value: bannerText, onChange: (e) => setBannerText(e.target.value) }) }), _jsx(FormField, { label: "\u6837\u5F0F", htmlFor: "banner-kind", children: _jsxs(Select, { value: bannerKind, onValueChange: (v) => setBannerKind(v === 'warn' ? 'warn' : 'info'), children: [_jsx(SelectTrigger, { id: "banner-kind", size: "sm", "aria-label": "\u516C\u544A\u6837\u5F0F", className: "w-40", children: _jsx(SelectValue, { children: bannerKind === 'warn' ? '警示（橙红）' : '信息（蓝）' }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "info", children: "\u4FE1\u606F\uFF08\u84DD\uFF09" }), _jsx(SelectItem, { value: "warn", children: "\u8B66\u793A\uFF08\u6A59\u7EA2\uFF09" })] })] }) }), _jsx("div", { children: _jsx(Button, { size: "sm", disabled: bannerM.isPending || !hydrated, onClick: () => bannerM.mutate(), children: bannerM.isPending ? '保存中…' : '保存公告' }) })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { children: "\u7EF4\u62A4\u6A21\u5F0F" }), _jsx(CardTitle, { children: "\u5168\u7AD9\"\u7EF4\u62A4\u4E2D\"\u63D0\u793A\u6761" }), _jsx(CardAction, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: maintenance ? 'destructive' : 'outline', children: maintenance ? '维护中' : '正常运行' }), _jsx(Switch, { checked: maintenance, onCheckedChange: (v) => {
+    const mailMode = settingsQ.data?.mail_mode ?? '';
+    const oauth = settingsQ.data?.oauth;
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(PageHeader, { title: "\u7CFB\u7EDF", description: "\u7AD9\u70B9\u516C\u544A\u3001\u7EF4\u62A4\u6A21\u5F0F\u3001\u6CE8\u518C\u7BA1\u63A7\u3001API \u9650\u6D41\u3001\u90AE\u4EF6\u901A\u9053\u3001\u7AD9\u957F\u9A8C\u8BC1\u4E0E\u767B\u5F55\u65B9\u5F0F\u2014\u2014\u4FDD\u5B58\u540E\u5168\u7AD9\u5373\u65F6\u751F\u6548\uFF08API \u9650\u6D41\u9664\u5916\uFF1A\u91CD\u542F\u540E\u751F\u6548\uFF09" }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { children: "\u7AD9\u70B9\u516C\u544A" }), _jsx(CardTitle, { children: "\u9876\u90E8\u516C\u544A\u6A2A\u6761" }), _jsx(CardAction, { children: _jsx(Badge, { variant: bannerText.trim() ? 'secondary' : 'outline', children: bannerText.trim() ? '展示中' : '未展示' }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: desc.banner_text }), _jsxs("div", { className: "rounded-lg border border-dashed", children: [_jsx(SiteBanner, { text: bannerText, kind: bannerKind }), !bannerText.trim() && (_jsx("p", { className: "px-4 py-2 text-xs text-muted-foreground", children: "\u9884\u89C8\uFF1A\u516C\u544A\u4E3A\u7A7A\u65F6\u4E0D\u6E32\u67D3\u6A2A\u6761" }))] }), _jsx(FormField, { label: "\u516C\u544A\u6587\u672C", htmlFor: "banner-text", children: _jsx("textarea", { id: "banner-text", className: "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", placeholder: "\u5982\uFF1A\u4ECA\u665A 22:00\u201323:00 \u4F8B\u884C\u7EF4\u62A4\uFF0C\u671F\u95F4\u53EF\u80FD\u77ED\u6682\u4E0D\u53EF\u7528", maxLength: 500, value: bannerText, onChange: (e) => setBannerText(e.target.value) }) }), _jsx(FormField, { label: "\u6837\u5F0F", htmlFor: "banner-kind", children: _jsxs(Select, { value: bannerKind, onValueChange: (v) => setBannerKind(v === 'warn' ? 'warn' : 'info'), children: [_jsx(SelectTrigger, { id: "banner-kind", size: "sm", "aria-label": "\u516C\u544A\u6837\u5F0F", className: "w-40", children: _jsx(SelectValue, { children: bannerKind === 'warn' ? '警示（橙红）' : '信息（蓝）' }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "info", children: "\u4FE1\u606F\uFF08\u84DD\uFF09" }), _jsx(SelectItem, { value: "warn", children: "\u8B66\u793A\uFF08\u6A59\u7EA2\uFF09" })] })] }) }), _jsx("div", { children: _jsx(Button, { size: "sm", disabled: bannerM.isPending || !hydrated, onClick: () => bannerM.mutate(), children: bannerM.isPending ? '保存中…' : '保存公告' }) })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { children: "\u7EF4\u62A4\u6A21\u5F0F" }), _jsx(CardTitle, { children: "\u5168\u7AD9\"\u7EF4\u62A4\u4E2D\"\u63D0\u793A\u6761" }), _jsx(CardAction, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: maintenance ? 'destructive' : 'outline', children: maintenance ? '维护中' : '正常运行' }), _jsx(Switch, { checked: maintenance, onCheckedChange: (v) => {
                                                 if (saveM.isPending)
                                                     return;
                                                 setMaintenance(v);
@@ -203,8 +286,16 @@ export function AdminSettingsPage() {
                                                 setRlPerIP(e.target.value);
                                                 if (rlError?.startsWith('每 IP'))
                                                     setRlError(null);
-                                            }, "aria-invalid": rlError?.startsWith('每 IP') ? true : undefined }) })] }), _jsx(FormField, { label: "\u8C41\u514D\u540D\u5355\uFF08\u9017\u53F7\u5206\u9694 IP \u6216 CIDR\uFF0C\u7A7A = \u65E0\u8C41\u514D\uFF09", htmlFor: "rl-allowlist", children: _jsx(Input, { id: "rl-allowlist", className: "font-mono", placeholder: "\u5982 10.0.0.5, 192.168.0.0/16", value: rlAllowlist, onChange: (e) => setRlAllowlist(e.target.value) }) }), _jsx("div", { children: _jsx(Button, { size: "sm", variant: "outline", disabled: rateLimitM.isPending || !hydrated, onClick: () => rateLimitM.mutate(), children: rateLimitM.isPending ? '保存中…' : '保存限流配置' }) })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { children: "\u90AE\u4EF6\u901A\u9053" }), _jsx(CardTitle, { children: "\u53D1\u9001\u6D4B\u8BD5\u90AE\u4EF6" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "\u9A8C\u8BC1\u51FA\u7AD9\u90AE\u4EF6\u901A\u9053\u8FDE\u901A\u6027\u3002\u5B9E\u9645\u884C\u4E3A\u53D6\u51B3\u4E8E\u90E8\u7F72\u65F6\u7684\u90AE\u4EF6\u901A\u9053\uFF1A\u5F00\u53D1\u901A\u9053\u53EA\u6253\u65E5\u5FD7\u3001 \u4E0D\u771F\u53D1\u4FE1\uFF1B\u63A5\u5165 SMTP \u540E\u6B64\u6309\u94AE\u53D1\u9001\u771F\u5B9E\u90AE\u4EF6\u3002" }), _jsxs("div", { className: "flex max-w-md gap-2", children: [_jsx(Input, { type: "email", placeholder: "\u6536\u4EF6\u90AE\u7BB1\uFF0C\u5982 ops@example.com", value: testTo, onChange: (e) => setTestTo(e.target.value), "aria-label": "\u6D4B\u8BD5\u90AE\u4EF6\u6536\u4EF6\u90AE\u7BB1" }), _jsx(Button, { size: "sm", className: "shrink-0", disabled: testEmailM.isPending || !testTo.trim(), onClick: () => {
+                                            }, "aria-invalid": rlError?.startsWith('每 IP') ? true : undefined }) })] }), _jsx(FormField, { label: "\u8C41\u514D\u540D\u5355\uFF08\u9017\u53F7\u5206\u9694 IP \u6216 CIDR\uFF0C\u7A7A = \u65E0\u8C41\u514D\uFF09", htmlFor: "rl-allowlist", children: _jsx(Input, { id: "rl-allowlist", className: "font-mono", placeholder: "\u5982 10.0.0.5, 192.168.0.0/16", value: rlAllowlist, onChange: (e) => setRlAllowlist(e.target.value) }) }), _jsx("div", { children: _jsx(Button, { size: "sm", variant: "outline", disabled: rateLimitM.isPending || !hydrated, onClick: () => rateLimitM.mutate(), children: rateLimitM.isPending ? '保存中…' : '保存限流配置' }) })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { children: "\u53D1\u4FE1\u901A\u9053" }), _jsx(CardTitle, { children: "SMTP \u53D1\u4FE1\u914D\u7F6E" }), _jsx(CardAction, { children: _jsx(Badge, { variant: mailMode === 'smtp' ? 'secondary' : 'outline', children: mailMode === 'smtp'
+                                        ? 'SMTP 直发'
+                                        : mailMode === 'dev'
+                                            ? '开发通道'
+                                            : '未接入' }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("p", { className: "text-sm text-muted-foreground", children: [desc.smtp_host, " \u914D\u7F6E\u540E\u51FA\u7AD9\u90AE\u4EF6\u8D70 SMTP \u76F4\u53D1\uFF0C\u4FDD\u5B58\u5373\u65F6\u751F\u6548\uFF08\u53D1\u4FE1\u70ED\u8BFB\uFF0C \u65E0\u9700\u91CD\u542F\uFF09\u3002\u51FA\u4E8E\u5B89\u5168\uFF0C\u5BC6\u7801\u4E0D\u56DE\u663E\u2014\u2014\u8F93\u5165\u6846\u6052\u4E3A\u7A7A\u3001\u5360\u4F4D\u7B26\u663E\u793A\u63A9\u7801\uFF0C \u7559\u7A7A\u4FDD\u5B58\u8868\u793A\u4E0D\u4FEE\u6539\u5F53\u524D\u5BC6\u7801\u3002"] }), _jsxs("div", { className: "grid max-w-3xl gap-4 sm:grid-cols-2", children: [_jsx(FormField, { label: "SMTP \u670D\u52A1\u5668", htmlFor: "smtp-host", children: _jsx(Input, { id: "smtp-host", placeholder: "\u5982 smtp.example.com\uFF1B\u7559\u7A7A = \u5F00\u53D1\u901A\u9053", value: smtpHost, onChange: (e) => setSmtpHost(e.target.value) }) }), _jsx(FormField, { label: "\u7AEF\u53E3\uFF08\u7559\u7A7A = \u7F3A\u7701 587\uFF09", htmlFor: "smtp-port", error: smtpError?.startsWith('SMTP 端口') ? smtpError : undefined, children: _jsx(Input, { id: "smtp-port", type: "text", inputMode: "numeric", placeholder: "\u7F3A\u7701 587", value: smtpPort, onChange: (e) => {
+                                                setSmtpPort(e.target.value);
+                                                if (smtpError?.startsWith('SMTP 端口'))
+                                                    setSmtpError(null);
+                                            }, "aria-invalid": smtpError?.startsWith('SMTP 端口') ? true : undefined }) }), _jsx(FormField, { label: "SMTP \u7528\u6237\u540D", htmlFor: "smtp-user", children: _jsx(Input, { id: "smtp-user", className: "font-mono", placeholder: "\u5982 no-reply@example.com", value: smtpUser, onChange: (e) => setSmtpUser(e.target.value) }) }), _jsx(FormField, { label: "SMTP \u5BC6\u7801\uFF08\u7559\u7A7A = \u4E0D\u4FEE\u6539\uFF09", htmlFor: "smtp-pass", children: _jsx(Input, { id: "smtp-pass", type: "password", placeholder: "******", autoComplete: "new-password", value: smtpPass, onChange: (e) => setSmtpPass(e.target.value) }) }), _jsx(FormField, { label: "\u53D1\u4EF6\u4EBA\u5730\u5740", htmlFor: "smtp-from", children: _jsx(Input, { id: "smtp-from", type: "email", placeholder: "\u5982 no-reply@example.com", value: smtpFrom, onChange: (e) => setSmtpFrom(e.target.value) }) })] }), _jsx("div", { children: _jsx(Button, { size: "sm", variant: "outline", disabled: smtpM.isPending || !hydrated, onClick: () => smtpM.mutate(), children: smtpM.isPending ? '保存中…' : '保存 SMTP 配置' }) })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { children: "\u90AE\u4EF6\u901A\u9053" }), _jsx(CardTitle, { children: "\u53D1\u9001\u6D4B\u8BD5\u90AE\u4EF6" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "\u9A8C\u8BC1\u51FA\u7AD9\u90AE\u4EF6\u901A\u9053\u8FDE\u901A\u6027\u3002\u5B9E\u9645\u884C\u4E3A\u53D6\u51B3\u4E8E\u90E8\u7F72\u65F6\u7684\u90AE\u4EF6\u901A\u9053\uFF1A\u5F00\u53D1\u901A\u9053\u53EA\u6253\u65E5\u5FD7\u3001 \u4E0D\u771F\u53D1\u4FE1\uFF1B\u63A5\u5165 SMTP \u540E\u6B64\u6309\u94AE\u53D1\u9001\u771F\u5B9E\u90AE\u4EF6\u3002" }), _jsxs("div", { className: "flex max-w-md gap-2", children: [_jsx(Input, { type: "email", placeholder: "\u6536\u4EF6\u90AE\u7BB1\uFF0C\u5982 ops@example.com", value: testTo, onChange: (e) => setTestTo(e.target.value), "aria-label": "\u6D4B\u8BD5\u90AE\u4EF6\u6536\u4EF6\u90AE\u7BB1" }), _jsx(Button, { size: "sm", className: "shrink-0", disabled: testEmailM.isPending || !testTo.trim(), onClick: () => {
                                             setTestMsg(null);
                                             testEmailM.mutate();
-                                        }, children: testEmailM.isPending ? '发送中…' : '发送' })] }), testMsg && (_jsx("p", { role: "status", className: "rounded-md border bg-muted px-3 py-2 text-sm text-muted-foreground", children: testMsg }))] })] })] }));
+                                        }, children: testEmailM.isPending ? '发送中…' : '发送' })] }), testMsg && (_jsx("p", { role: "status", className: "rounded-md border bg-muted px-3 py-2 text-sm text-muted-foreground", children: testMsg }))] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { children: "\u7AD9\u957F\u9A8C\u8BC1" }), _jsx(CardTitle, { children: "\u641C\u7D22\u5F15\u64CE\u7AD9\u70B9\u9A8C\u8BC1" }), _jsx(CardAction, { children: _jsx(Badge, { variant: verifyMeta.trim() ? 'secondary' : 'outline', children: verifyMeta.trim() ? '已注入' : '未配置' }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("p", { className: "text-sm text-muted-foreground", children: [desc.site_verification_meta, " \u7C98\u8D34\u641C\u7D22\u5E73\u53F0\uFF08Google Search Console / Bing \u7B49\uFF09\u63D0\u4F9B\u7684\u5B8C\u6574 meta \u6807\u7B7E\uFF0C\u6216 name|content \u5BF9\uFF1B\u4FDD\u5B58\u540E\u5F52\u4E00\u4E3A name|content \u5B58\u50A8\uFF0C\u9875\u9762\u6CE8\u5165\u65F6\u7531\u670D\u52A1\u7AEF\u91CD\u7EC4\u6807\u7B7E\uFF0C \u8F93\u5165\u7684\u539F\u6587\u4E0D\u56DE\u663E\u3002"] }), _jsx(FormField, { label: "\u9A8C\u8BC1\u6807\u8BB0\uFF08\u5B8C\u6574 meta \u6807\u7B7E\u6216 name|content \u5BF9\uFF09", htmlFor: "site-verification-meta", children: _jsx("textarea", { id: "site-verification-meta", className: "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", placeholder: '<meta name="google-site-verification" content="abc123XYZ" /> 或 google-site-verification|abc123XYZ', value: verifyMeta, onChange: (e) => setVerifyMeta(e.target.value) }) }), _jsx("div", { children: _jsx(Button, { size: "sm", variant: "outline", disabled: verifyM.isPending || !hydrated, onClick: () => verifyM.mutate(), children: verifyM.isPending ? '保存中…' : '保存验证配置' }) })] })] }), oauth && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardDescription, { children: "\u767B\u5F55\u65B9\u5F0F" }), _jsx(CardTitle, { children: "OAuth \u7B2C\u4E09\u65B9\u767B\u5F55" }), _jsx(CardAction, { children: _jsx(Badge, { variant: oauth.length > 0 ? 'secondary' : 'outline', children: oauth.length > 0 ? `已启用 ${oauth.length} 个` : '未启用' }) })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "\u4E0B\u65B9\u56DE\u8C03\u5730\u5740\u4E3A\u6309\u7AD9\u70B9 base URL \u63A8\u7B97\u7684\u671F\u671B\u503C\uFF0C\u5B9E\u9645\u4EE5\u8BF7\u6C42 Host \u73B0\u7B97\u2014\u2014\u53CD\u5411\u4EE3\u7406\u5FC5\u987B\u8F6C\u53D1 Host \u4E0E X-Forwarded-Proto\uFF0C \u5426\u5219\u767B\u5F55\u4F1A\u62A5 redirect_uri_mismatch\u3002" }), oauth.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u5C1A\u672A\u914D\u7F6E\u4EFB\u4F55 OAuth \u767B\u5F55\u65B9\u5F0F\u2014\u2014\u8BBE\u7F6E GOOGLE_CLIENT_ID / GOOGLE_SECRET\u3001GITHUB_CLIENT_ID / GITHUB_SECRET \u73AF\u5883\u53D8\u91CF\u5E76\u91CD\u542F\u540E\u5728\u6B64\u663E\u793A\u3002" })) : (_jsx("ul", { className: "space-y-2", children: oauth.map((p) => (_jsxs("li", { className: "flex flex-wrap items-center gap-2 text-sm", children: [_jsx(Badge, { variant: "secondary", children: p.name }), _jsx("code", { className: "font-mono text-xs break-all text-muted-foreground", children: p.callback_url }), _jsx(Button, { variant: "ghost", size: "sm", className: "size-6 shrink-0 p-0 text-muted-foreground", "aria-label": `复制 ${p.name} 回调地址`, title: `复制 ${p.name} 回调地址`, onClick: () => copyCallbackUrl(p.name, p.callback_url), children: _jsx(Copy, { size: 12, "aria-hidden": "true" }) })] }, p.name))) }))] })] }))] }));
 }

package/dist/pages/admin/AdminShell.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link, Navigate, useLocation } from 'react-router';
-import { Activity, ArrowLeft, Building2, KeyRound, LayoutDashboard, Receipt, ScrollText, Settings, ShieldCheck, Users, Webhook, } from 'lucide-react';
+import { Activity, ArrowLeft, Building2, CreditCard, KeyRound, LayoutDashboard, Receipt, ScrollText, Settings, ShieldCheck, Users, Webhook, } from 'lucide-react';
 import { buttonVariants } from '../../components/ui/button.js';
 import { UserMenu } from '../../components/UserMenu.js';
 import { useAuth } from '@ploykit/hooks';
@@ -21,6 +21,11 @@ const NAV = [
         label: '工作区',
         icon: _jsx(Building2, { size: 16, "aria-hidden": "true" }),
     },
+    {
+        to: '/admin/plans',
+        label: '套餐',
+        icon: _jsx(CreditCard, { size: 16, "aria-hidden": "true" }),
+    },
     {
         to: '/admin/orders',
         label: '订单',

package/dist/pages/admin/PlansPage.d.ts

@@ -0,0 +1,9 @@
+export interface AdminPlanView {
+    code: string;
+    name: string;
+    currency: string;
+    trial_days: number;
+    sort_no: number;
+    limits: Record<string, number>;
+}
+export declare function PlansPage(): import("react").JSX.Element;

package/dist/pages/admin/PlansPage.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ChevronDown, ChevronRight, Plus } from 'lucide-react';
+import { FormField } from '../../components/FormField.js';
+import { PageEmpty, PageError, PageHeader } from '../../components/Page.js';
+import { toast } from '../../components/toast.js';
+import { Badge } from '../../components/ui/badge.js';
+import { Button } from '../../components/ui/button.js';
+import { Input } from '../../components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../components/ui/select.js';
+import { useApi } from '@ploykit/hooks';
+import { adminError } from './shared.js';
+// 服务端校验兜底（limits 键 ^[a-z][a-z0-9_]{0,63}$、值整数、-1=无限哨兵）；
+// 这里做同规则的轻量前置，避免明显的坏请求打过去。
+const LIMIT_KEY_RE = /^[a-z][a-z0-9_]{0,63}$/;
+const CURRENCY_RE = /^[A-Z]{3}$/;
+const INT_RE = /^-?\d+$/;
+const COMMON_CURRENCIES = ['USD', 'EUR', 'CNY', 'GBP'];
+// 已知价格键：渲染为数值输入并给单位提示；其余键给"高级键"弱提示但放行
+// （limits 是自由 KV，billing 不认识的键无害）。
+const KNOWN_PRICE_KEYS = new Set([
+    'price_monthly_cents',
+    'price_yearly_cents',
+    'price_one_time_cents',
+]);
+const UNLIMITED = -1;
+function draftFrom(plan) {
+    return {
+        name: plan.name,
+        currency: plan.currency,
+        sortNo: String(plan.sort_no),
+        limits: Object.entries(plan.limits ?? {}).map(([key, value]) => ({
+            key,
+            value: String(value),
+        })),
+    };
+}
+function buildBody(d) {
+    const name = d.name.trim();
+    if (!name)
+        return { error: '名称不能为空' };
+    if (!CURRENCY_RE.test(d.currency.trim()))
+        return { error: '币种需为 3 位大写字母（如 USD）' };
+    const sortNo = d.sortNo.trim();
+    if (!INT_RE.test(sortNo))
+        return { error: '排序需为整数' };
+    const limits = {};
+    for (const row of d.limits) {
+        const k = row.key.trim();
+        const v = row.value.trim();
+        // 整行留空的行忽略（误触加行不阻塞保存）
+        if (!k && !v)
+            continue;
+        if (!k)
+            return { error: '存在未填写键名的限制行' };
+        if (!LIMIT_KEY_RE.test(k))
+            return {
+                error: `限制键 ${k} 格式有误：小写字母开头，仅小写字母/数字/下划线`,
+            };
+        if (k in limits)
+            return { error: `限制键 ${k} 重复` };
+        if (!INT_RE.test(v))
+            return { error: `限制 ${k} 的值需为整数（${UNLIMITED} 表示无限）` };
+        limits[k] = Number(v);
+    }
+    return { body: { name, currency: d.currency.trim(), sort_no: Number(sortNo), limits } };
+}
+function PlanCard({ plan, open, saving, apiError, onToggle, onSave }) {
+    const [draft, setDraft] = useState(() => draftFrom(plan));
+    const [customCurrency, setCustomCurrency] = useState(!COMMON_CURRENCIES.includes(plan.currency));
+    const [formError, setFormError] = useState(null);
+    // 保存成功后列表失效重取，新 plan 到达即重置草稿（列表即时反映）
+    useEffect(() => {
+        setDraft(draftFrom(plan));
+        setCustomCurrency(!COMMON_CURRENCIES.includes(plan.currency));
+        setFormError(null);
+    }, [plan]);
+    const limitCount = draft.limits.length;
+    const addRow = () => setDraft((d) => ({ ...d, limits: [...d.limits, { key: '', value: '' }] }));
+    const removeRow = (i) => setDraft((d) => ({
+        ...d,
+        limits: d.limits.filter((_, idx) => idx !== i),
+    }));
+    const setRow = (i, patch) => setDraft((d) => ({
+        ...d,
+        limits: d.limits.map((row, idx) => (idx === i ? { ...row, ...patch } : row)),
+    }));
+    const submit = () => {
+        setFormError(null);
+        const { body, error } = buildBody(draft);
+        if (!body) {
+            setFormError(error ?? '表单有误');
+            return;
+        }
+        onSave(plan.code, body);
+    };
+    const shownError = formError ?? apiError;
+    return (_jsxs("li", { className: "rounded-lg border", children: [_jsxs("button", { type: "button", onClick: onToggle, "aria-expanded": open, "aria-label": `编辑套餐 ${plan.code}`, className: "flex w-full flex-wrap items-center gap-x-3 gap-y-1 px-4 py-3 text-left transition-colors hover:bg-muted/40", children: [open ? (_jsx(ChevronDown, { size: 16, "aria-hidden": "true", className: "shrink-0 text-muted-foreground" })) : (_jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "shrink-0 text-muted-foreground" })), _jsx("span", { className: "font-medium", children: plan.name }), _jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground", title: "\u5957\u9910\u4EE3\u7801\u4E0D\u53EF\u4FEE\u6539", children: plan.code }), _jsx(Badge, { variant: "outline", children: plan.currency }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["\u6392\u5E8F ", plan.sort_no] }), plan.trial_days > 0 && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["\u8BD5\u7528 ", plan.trial_days, " \u5929"] })), _jsxs("span", { className: "text-xs text-muted-foreground", children: [limitCount, " \u9879\u9650\u5236"] }), _jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: open ? '收起' : '展开编辑' })] }), open && (_jsxs("form", { className: "border-t px-4 py-4", onSubmit: (e) => {
+                    e.preventDefault();
+                    submit();
+                }, children: [_jsx("p", { className: "mb-4 text-xs text-muted-foreground", children: "\u4FDD\u5B58\u540E\u7ACB\u5373\u751F\u6548\uFF08\u76F4\u8BFB\u5E93\u65E0\u7F13\u5B58\uFF09\uFF1B\u5DF2\u521B\u5EFA\u8BA2\u5355\u7684\u91D1\u989D\u4E0D\u53D7\u5F71\u54CD\u3002" }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_jsx(FormField, { label: "\u540D\u79F0", htmlFor: `plans-name-${plan.code}`, children: _jsx(Input, { id: `plans-name-${plan.code}`, value: draft.name, onChange: (e) => setDraft((d) => ({ ...d, name: e.target.value })) }) }), _jsxs(FormField, { label: "\u5E01\u79CD", description: "3 \u4F4D\u5927\u5199\u5B57\u6BCD\uFF1B\u5E38\u7528\u5E01\u79CD\u53EF\u9009\uFF0C\u4E5F\u53EF\u81EA\u7531\u8F93\u5165", children: [_jsxs(Select, { value: customCurrency ? 'custom' : draft.currency, onValueChange: (v) => {
+                                            if (v === 'custom') {
+                                                setCustomCurrency(true);
+                                            }
+                                            else {
+                                                setCustomCurrency(false);
+                                                setDraft((d) => ({ ...d, currency: v }));
+                                            }
+                                        }, children: [_jsx(SelectTrigger, { "aria-label": "\u5E01\u79CD", size: "sm", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { align: "start", children: [COMMON_CURRENCIES.map((c) => (_jsx(SelectItem, { value: c, children: c }, c))), _jsx(SelectItem, { value: "custom", children: "\u81EA\u5B9A\u4E49\u2026" })] })] }), customCurrency && (_jsx(Input, { className: "mt-2 font-mono", "aria-label": "\u81EA\u5B9A\u4E49\u5E01\u79CD", placeholder: "\u5982 JPY", value: draft.currency, onChange: (e) => setDraft((d) => ({
+                                            ...d,
+                                            currency: e.target.value
+                                                .toUpperCase()
+                                                .replace(/[^A-Z]/g, '')
+                                                .slice(0, 3),
+                                        })) }))] }), _jsx(FormField, { label: "\u6392\u5E8F", htmlFor: `plans-sort-${plan.code}`, description: "\u5C55\u793A\u987A\u5E8F\uFF08\u4EFB\u610F\u6574\u6570\uFF09", children: _jsx(Input, { id: `plans-sort-${plan.code}`, type: "text", inputMode: "numeric", value: draft.sortNo, onChange: (e) => setDraft((d) => ({ ...d, sortNo: e.target.value })) }) })] }), _jsxs("div", { className: "mt-6", children: [_jsxs("div", { className: "mb-2 flex flex-wrap items-center justify-between gap-2", children: [_jsx("p", { className: "text-sm font-medium", children: "\u9650\u5236\uFF08limits\uFF09" }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 14, "aria-hidden": "true" }), " \u6DFB\u52A0\u9650\u5236\u952E"] })] }), _jsxs("p", { className: "mb-2 text-xs text-muted-foreground", children: ["\u503C\u4E3A\u6574\u6570\uFF0C", UNLIMITED, " \u8868\u793A\u65E0\u9650\uFF08Unlimited\uFF09\uFF1B\u952E\u540D\u5C0F\u5199\u5B57\u6BCD\u5F00\u5934\uFF0C\u4EC5\u5C0F\u5199\u5B57\u6BCD/\u6570\u5B57/\u4E0B\u5212\u7EBF\u3002\u672A\u77E5\u952E\u539F\u6837\u4FDD\u5B58\uFF08\u9AD8\u7EA7\u952E\uFF0C\u670D\u52A1\u7AEF\u653E\u884C\uFF09\u3002"] }), _jsxs("div", { className: "space-y-2", children: [draft.limits.map((row, i) => {
+                                        const key = row.key.trim();
+                                        const knownPrice = KNOWN_PRICE_KEYS.has(key);
+                                        const unknownKey = key !== '' && !knownPrice;
+                                        const unlimited = row.value.trim() === String(UNLIMITED);
+                                        return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Input, { "aria-label": "\u9650\u5236\u952E\u540D", className: "w-48 font-mono", placeholder: "\u952E\u540D\uFF0C\u5982 credits", value: row.key, onChange: (e) => setRow(i, { key: e.target.value }) }), _jsx(Input, { "aria-label": "\u9650\u5236\u503C", type: "text", inputMode: "numeric", className: "w-36", placeholder: `整数；${UNLIMITED} = 无限`, value: row.value, onChange: (e) => setRow(i, { value: e.target.value }) }), knownPrice && (_jsx("span", { className: "text-xs text-muted-foreground", children: "\u4EF7\u683C\uFF08\u5355\u4F4D\uFF1A\u5206\uFF09" })), unknownKey && (_jsx(Badge, { variant: "outline", className: "text-muted-foreground", title: "billing \u4E0D\u8BA4\u8BC6\u7684\u9AD8\u7EA7\u952E\uFF1A\u539F\u6837\u4FDD\u5B58\uFF0C\u670D\u52A1\u7AEF\u653E\u884C", children: "\u9AD8\u7EA7\u952E" })), unlimited && (_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Unlimited\uFF08\u65E0\u9650\uFF09" })), _jsx("span", { className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `删除限制 ${key || i + 1}`, onClick: () => removeRow(i), children: "\u5220\u9664" })] }, i));
+                                    }), draft.limits.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u6682\u65E0\u9650\u5236\u952E\uFF08limits \u4E3A\u7A7A\u5BF9\u8C61\uFF09" }))] })] }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-3", children: [_jsx(Button, { type: "submit", size: "sm", disabled: saving, children: saving ? '保存中…' : '保存' }), shownError && (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: shownError }))] })] }))] }));
+}
+export function PlansPage() {
+    const api = useApi();
+    const qc = useQueryClient();
+    const [openCodes, setOpenCodes] = useState(() => new Set());
+    const toggle = (code) => setOpenCodes((prev) => {
+        const next = new Set(prev);
+        if (next.has(code))
+            next.delete(code);
+        else
+            next.add(code);
+        return next;
+    });
+    const plansQ = useQuery({
+        queryKey: ['admin', 'plans'],
+        queryFn: () => api.get('/api/admin/plans'),
+    });
+    // 每卡独立的保存错误（404/400 后端消息就地展示，不弹 toast 抢焦点）
+    const [cardErrors, setCardErrors] = useState({});
+    const saveM = useMutation({
+        mutationFn: (v) => api.patch(`/api/admin/plans/${encodeURIComponent(v.code)}`, v.body),
+        onSuccess: (_d, v) => {
+            toast.success(`套餐 ${v.code} 已保存`);
+            setCardErrors((prev) => {
+                if (!(v.code in prev))
+                    return prev;
+                const next = { ...prev };
+                delete next[v.code];
+                return next;
+            });
+            // 列表即时反映（WorkspacesPage 的套餐下拉同键，一并失效）
+            void qc.invalidateQueries({ queryKey: ['admin', 'plans'] });
+        },
+        onError: (e, v) => setCardErrors((prev) => ({
+            ...prev,
+            [v.code]: adminError(e, `套餐 ${v.code} 保存失败`),
+        })),
+    });
+    const plans = [...(plansQ.data?.plans ?? [])].sort((a, b) => a.sort_no - b.sort_no || a.code.localeCompare(b.code));
+    return (_jsxs("div", { children: [_jsx(PageHeader, { title: "\u5957\u9910", description: "\u5957\u9910\u76EE\u5F55\u7F16\u8F91\uFF1A\u540D\u79F0 / \u5E01\u79CD / \u6392\u5E8F\u4E0E limits\uFF0C\u4FDD\u5B58\u5373\u751F\u6548\uFF08\u76F4\u8BFB\u5E93\u65E0\u7F13\u5B58\uFF09\uFF1B\u5DF2\u521B\u5EFA\u8BA2\u5355\u91D1\u989D\u4E0D\u53D7\u5F71\u54CD" }), plansQ.isError ? (_jsx(PageError, { message: adminError(plansQ.error, '套餐列表加载失败'), onRetry: () => void plansQ.refetch() })) : plansQ.isPending ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "\u52A0\u8F7D\u5957\u9910\u4E2D\u2026" })) : plans.length === 0 ? (_jsx(PageEmpty, { label: "\u6682\u65E0\u5957\u9910", hint: "\u5957\u9910\u7531\u8BA1\u8D39\u79CD\u5B50\u6570\u636E\u521B\u5EFA\uFF1B\u6B64\u9875\u7F16\u8F91\u5DF2\u5B58\u5728\u7684\u5957\u9910" })) : (_jsx("ul", { className: "space-y-3", children: plans.map((plan) => (_jsx(PlanCard, { plan: plan, open: openCodes.has(plan.code), saving: saveM.isPending && saveM.variables?.code === plan.code, apiError: cardErrors[plan.code], onToggle: () => toggle(plan.code), onSave: (code, body) => saveM.mutate({ code, body }) }, plan.code))) }))] }));
+}

package/dist/pages/workspace/BillingPage.js

@@ -87,7 +87,10 @@ export function BillingPage({ channel = 'stripe' } = {}) {
             : null;
     const orders = subscription?.orders ?? [];
     const currentPlanCode = subscription?.plan_code ?? null;
-    const sortedPlans = [...plans].sort((a, b) => a.sort_no - b.sort_no);
+    // UP-8/D4 (docs/plan-upstream-shuijing-admin-billing.md): filter by price-key capability, not code-prefix — a plan with neither price_monthly_cents nor price_yearly_cents (one_time pack) must not render as a ¥0 subscription card.
+    const sortedPlans = [...plans]
+        .filter((p) => p.limits.price_monthly_cents !== undefined || p.limits.price_yearly_cents !== undefined)
+        .sort((a, b) => a.sort_no - b.sort_no);
     const checkoutDescription = payChannel === 'manual'
         ? '升级立即生效；下单后请联系管理员完成线下转账，订单在管理员核销后生效。'
         : payChannel === 'stripe'
@@ -169,7 +172,7 @@ export function BillingPage({ channel = 'stripe' } = {}) {
                                             setPayChannelSel(v);
                                             syncParams({ channel: v });
                                         }
-                                    }, children: [_jsx(SelectTrigger, { size: "sm", className: "w-44", "aria-label": "\u652F\u4ED8\u6E20\u9053", children: _jsx(SelectValue, { children: channelLabel(payChannel) }) }), _jsx(SelectContent, { children: channelOptions.map((code) => (_jsx(SelectItem, { value: code, children: channelLabel(code) }, code))) })] }) })] }), manualNote && (_jsx("p", { role: "note", className: "mb-4 rounded-lg border-(--warning)/40 bg-(--warning)/15 px-3 py-2 text-sm text-(--warning)", children: manualNote })), _jsx("div", { className: "grid gap-4 lg:grid-cols-3", children: sortedPlans.map((plan) => {
+                                    }, children: [_jsx(SelectTrigger, { size: "sm", className: "w-44", "aria-label": "\u652F\u4ED8\u6E20\u9053", children: _jsx(SelectValue, { children: channelLabel(payChannel) }) }), _jsx(SelectContent, { children: channelOptions.map((code) => (_jsx(SelectItem, { value: code, children: channelLabel(code) }, code))) })] }) })] }), manualNote && (_jsx("p", { role: "note", className: "mb-4 rounded-lg border-(--warning)/40 bg-(--warning)/15 px-3 py-2 text-sm text-(--warning)", children: manualNote })), sortedPlans.length === 0 && (_jsx(PageEmpty, { label: "\u6682\u65E0\u53EF\u8BA2\u9605\u5957\u9910", hint: "\u7AD9\u70B9\u5C1A\u672A\u914D\u7F6E\u6309\u6708\u6216\u6309\u5E74\u8BA2\u9605\u7684\u5957\u9910\u3002" })), _jsx("div", { className: "grid gap-4 lg:grid-cols-3", children: sortedPlans.map((plan) => {
                             const isCurrent = plan.code === currentPlanCode;
                             const price = priceCentsOf(plan, interval);
                             const features = Object.entries(plan.limits)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ploykit/ui",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,11 +15,13 @@
       "types": "./dist/components/ui/*.d.ts",
       "default": "./dist/components/ui/*.js"
     },
+    "./tailwind.css": "./tailwind.css",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "tailwind.css"
   ],
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
@@ -30,8 +32,8 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.8.0",
-    "@ploykit/client": "^0.7.2",
-    "@ploykit/hooks": "^0.7.2",
+    "@ploykit/client": "^0.7.4",
+    "@ploykit/hooks": "^0.8.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cn": "^0.4.0",

package/src/components/NotificationBell.tsx

@@ -81,7 +81,7 @@ export function NotificationBell({ onNavigate }: { onNavigate?: (link: string) =
 
       {open && (
         <div
-          className="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border z-50"
+          className="absolute right-0 mt-2 w-80 bg-popover rounded-lg shadow-lg border z-50"
           role="dialog"
           aria-label="通知列表"
           onKeyDown={(e) => { if (e.key === 'Escape') setOpen(false) }}

package/src/index.ts

@@ -143,6 +143,7 @@ export { UsersPage } from './pages/admin/UsersPage'
 export { UserDetailPage } from './pages/admin/UserDetailPage'
 export { WorkspacesPage } from './pages/admin/WorkspacesPage'
 export { WorkspaceDetailPage } from './pages/admin/WorkspaceDetailPage'
+export { PlansPage } from './pages/admin/PlansPage'
 export { OrdersPage } from './pages/admin/OrdersPage'
 export { WebhookDeliveriesPage } from './pages/admin/WebhookDeliveriesPage'
 export { AuditPage } from './pages/admin/AuditPage'

package/src/pages/LoginPage.tsx

@@ -127,7 +127,7 @@ export function LoginPage({
 
   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="w-full max-w-sm space-y-4 p-8 bg-card 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>