@ploykit/ui 0.0.0-stage → 0.1.0

package/dist/pages/workspace/MembersPage.js

@@ -0,0 +1,262 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useSearchParams } from 'react-router';
+import { z } from 'zod';
+import { UserPlus, Link2 } from 'lucide-react';
+import { PageHeader, PageLoading, PageError, PageEmpty, } from '../../components/Page';
+import { DataTable } from '../../components/DataTable';
+import { FormField } from '../../components/FormField';
+import { SecretModal, ImpactConfirmation } from '../../components/SecretModal';
+import { useConfirm } from '../../components/ConfirmDialog';
+import { toast } from '../../components/toast';
+import { Button } from '../../components/ui/Button';
+import { Input } from '../../components/ui/Input';
+import { Badge, StatusBadge } from '../../components/ui/Badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../components/ui/select';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from '../../components/ui/dialog';
+import { useZodForm } from '../../hooks/useZodForm';
+import { useMembers, useMemberMutations, ASSIGNABLE_ROLES, LIST_PAGE_SIZE, } from '../../hooks/useMembers';
+import { formatDateTime } from '../../lib/utils';
+import { apiErrorMessage } from '../../lib/api-error';
+import { roleSatisfies } from '../../lib/perm';
+const inviteSchema = z.object({
+    email: z.string().min(1, '请输入邮箱').email('邮箱格式不正确'),
+    role: z.enum(['admin', 'member']),
+});
+const shareLinkSchema = z.object({
+    role: z.enum(['admin', 'member']),
+    max_uses: z.number().int('须为整数').min(1, '至少 1 次').max(10000),
+    ttl_hours: z.number().int('须为整数').min(1, '至少 1 小时').max(24 * 30),
+});
+const ROLE_LABEL = { owner: '所有者', admin: '管理员', member: '成员' };
+const MEMBER_TABS = ['members', 'invitations', 'share-links'];
+function pageFromParams(v) {
+    const n = Number.parseInt(v ?? '', 10);
+    return Number.isInteger(n) && n >= 1 ? n : 1;
+}
+export function MembersPage(_props = {}) {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const tabParam = searchParams.get('tab');
+    const tab = tabParam !== null && MEMBER_TABS.includes(tabParam)
+        ? tabParam
+        : 'members';
+    const memberPage = pageFromParams(searchParams.get('mpage'));
+    const invitePage = pageFromParams(searchParams.get('ipage'));
+    const linkPage = pageFromParams(searchParams.get('lpage'));
+    const setTab = (t) => {
+        setSearchParams((prev) => {
+            const next = new URLSearchParams(prev);
+            next.set('tab', t);
+            return next;
+        });
+    };
+    const setPageParam = (key, page) => {
+        setSearchParams((prev) => {
+            const next = new URLSearchParams(prev);
+            next.set(key, String(page));
+            return next;
+        }, { replace: true });
+    };
+    const { wsId, myRole, members, membersTotal, invitations, invitationsTotal, shareLinks, shareLinksTotal, loading, membersError, invitationsError, shareLinksError, refetchAll, } = useMembers({ members: memberPage, invitations: invitePage, shareLinks: linkPage });
+    const mut = useMemberMutations();
+    const confirm = useConfirm();
+    const [inviteOpen, setInviteOpen] = useState(false);
+    const [shareOpen, setShareOpen] = useState(false);
+    const [secret, setSecret] = useState(null);
+    const [transferTarget, setTransferTarget] = useState(null);
+    const inviteForm = useZodForm({
+        schema: inviteSchema,
+        defaultValues: { email: '', role: 'member' },
+    });
+    const linkForm = useZodForm({
+        schema: shareLinkSchema,
+        defaultValues: { role: 'member', max_uses: 10, ttl_hours: 72 },
+    });
+    if (!wsId) {
+        return (_jsxs("div", { children: [_jsx(PageHeader, { title: "\u6210\u5458", description: "\u7BA1\u7406\u5F53\u524D\u5DE5\u4F5C\u533A\u7684\u6210\u5458\u3001\u9080\u8BF7\u4E0E\u5206\u4EAB\u94FE\u63A5" }), _jsx(PageEmpty, { label: "\u8BF7\u5148\u521B\u5EFA\u5E76\u9009\u62E9\u4E00\u4E2A\u5DE5\u4F5C\u533A" })] }));
+    }
+    if (loading)
+        return _jsx(PageLoading, { label: "\u52A0\u8F7D\u6210\u5458\u6570\u636E\u2026" });
+    if (membersError) {
+        return (_jsx(PageError, { message: apiErrorMessage(membersError, '成员数据加载失败'), onRetry: () => refetchAll() }));
+    }
+    const canManage = roleSatisfies(myRole ?? undefined, 'admin');
+    const canTransfer = myRole === 'owner';
+    const onRoleChange = async (m, role) => {
+        if (role === m.role)
+            return;
+        try {
+            await mut.updateRole.mutateAsync({ userId: m.user_id, role });
+            toast.success(`已将 ${m.email} 的角色改为 ${ROLE_LABEL[role] ?? role}`);
+        }
+        catch (e) {
+            toast.error(apiErrorMessage(e, '角色变更失败'));
+        }
+    };
+    const onRemove = async (m) => {
+        if (!(await confirm({
+            title: '移除成员',
+            description: `确定将 ${m.email} 移出本工作区？其将立即失去访问权限。`,
+            confirmText: '移除', danger: true,
+        })))
+            return;
+        try {
+            await mut.removeMember.mutateAsync(m.user_id);
+            toast.success('成员已移除');
+        }
+        catch (e) {
+            toast.error(apiErrorMessage(e, '移除失败') + (isConflict(e) ? '（请先转移或删除工作区）' : ''));
+        }
+    };
+    const onRevokeInvite = async (inv) => {
+        if (!(await confirm({
+            title: '撤销邀请',
+            description: `撤销发给 ${inv.email} 的邀请？对方将无法再接受。`,
+            confirmText: '撤销', danger: true,
+        })))
+            return;
+        try {
+            await mut.revokeInvitation.mutateAsync(inv.id);
+            toast.success('邀请已撤销');
+        }
+        catch (e) {
+            toast.error(apiErrorMessage(e, '撤销失败'));
+        }
+    };
+    const onRevokeLink = async (link) => {
+        if (!(await confirm({
+            title: '撤销分享链接',
+            description: `撤销前缀为 ${link.code_prefix}… 的分享链接？已兑换的成员不受影响。`,
+            confirmText: '撤销', danger: true,
+        })))
+            return;
+        try {
+            await mut.revokeShareLink.mutateAsync(link.id);
+            toast.success('分享链接已撤销');
+        }
+        catch (e) {
+            toast.error(apiErrorMessage(e, '撤销失败'));
+        }
+    };
+    const onTransfer = async () => {
+        const m = transferTarget;
+        if (!m)
+            return;
+        try {
+            await mut.transferOwnership.mutateAsync(m.user_id);
+            toast.success(`所有权已转让给 ${m.email}（你已降为成员）`);
+            setTransferTarget(null);
+        }
+        catch (e) {
+            toast.error(apiErrorMessage(e, '所有权转让失败'));
+        }
+    };
+    const submitInvite = inviteForm.handleSubmit(async (values) => {
+        try {
+            await mut.invite.mutateAsync(values);
+            toast.success(`邀请已发送至 ${values.email}`);
+            inviteForm.reset();
+            setInviteOpen(false);
+        }
+        catch (e) {
+            toast.error(apiErrorMessage(e, '邀请发送失败'));
+        }
+    });
+    const submitLink = linkForm.handleSubmit(async (values) => {
+        try {
+            const res = await mut.createShareLink.mutateAsync(values);
+            toast.success('分享链接已创建');
+            setSecret(res.code);
+            linkForm.reset();
+            setShareOpen(false);
+        }
+        catch (e) {
+            toast.error(apiErrorMessage(e, '创建分享链接失败'));
+        }
+    });
+    const memberColumns = [
+        {
+            key: 'email',
+            header: '邮箱',
+            className: 'w-[28%]',
+            render: (m) => (_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate font-medium text-foreground", children: m.email }), m.display_name && _jsx("p", { className: "truncate text-xs text-muted-foreground", children: m.display_name })] })),
+        },
+        {
+            key: 'role',
+            header: '角色',
+            className: 'w-[20%]',
+            render: (m) => m.role === 'owner' ? (_jsx(Badge, { variant: "outline", children: ROLE_LABEL.owner })) : canManage ? (_jsxs(Select, { value: m.role, onValueChange: (v) => typeof v === 'string' && onRoleChange(m, v), children: [_jsx(SelectTrigger, { size: "sm", "aria-label": `变更 ${m.email} 的角色`, children: _jsx(SelectValue, { children: ROLE_LABEL[m.role] ?? m.role }) }), _jsx(SelectContent, { children: ASSIGNABLE_ROLES.map((r) => (_jsx(SelectItem, { value: r, children: ROLE_LABEL[r] }, r))) })] })) : (_jsx(Badge, { variant: "secondary", children: ROLE_LABEL[m.role] ?? m.role })),
+        },
+        {
+            key: 'created_at',
+            header: '加入时间',
+            className: 'w-[22%]',
+            render: (m) => _jsx("span", { className: "text-muted-foreground", children: formatDateTime(m.created_at) }),
+        },
+        {
+            key: 'actions',
+            header: '操作',
+            className: 'w-[22%] text-right',
+            render: (m) => (_jsxs("div", { className: "flex items-center justify-end gap-1.5", children: [canTransfer && m.role !== 'owner' && (_jsx(Button, { size: "sm", variant: "outline", disabled: mut.transferOwnership.isPending, title: "\u76EE\u6807\u5347\u4E3A owner\uFF0C\u4F60\u964D\u4E3A member\uFF08\u5355\u4E8B\u52A1\u539F\u5B50\uFF09", onClick: () => setTransferTarget(m), children: "\u8F6C\u8BA9\u6240\u6709\u6743" })), m.role !== 'owner' && canManage ? (_jsx(Button, { size: "sm", variant: "destructive", disabled: mut.removeMember.isPending, onClick: () => onRemove(m), children: "\u79FB\u9664" })) : null] })),
+        },
+    ];
+    const invitationColumns = [
+        { key: 'email', header: '邮箱', render: (i) => _jsx("span", { className: "font-medium", children: i.email }) },
+        { key: 'role', header: '角色', render: (i) => _jsx(Badge, { variant: "secondary", children: ROLE_LABEL[i.role] ?? i.role }) },
+        { key: 'status', header: '状态', render: (i) => _jsx(StatusBadge, { status: i.status }) },
+        {
+            key: 'expires_at', header: '过期时间',
+            render: (i) => _jsx("span", { className: "text-muted-foreground", children: formatDateTime(i.expires_at) }),
+        },
+        {
+            key: 'actions', header: '操作', className: 'text-right',
+            render: (i) => i.status === 'pending' && canManage ? (_jsx(Button, { size: "sm", variant: "outline", disabled: mut.revokeInvitation.isPending, onClick: () => onRevokeInvite(i), children: "\u64A4\u9500" })) : null,
+        },
+    ];
+    const shareLinkColumns = [
+        {
+            key: 'code_prefix', header: '兑换码前缀',
+            render: (l) => _jsxs("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs", children: [l.code_prefix, "\u2026"] }),
+        },
+        { key: 'role', header: '授予角色', render: (l) => _jsx(Badge, { variant: "secondary", children: ROLE_LABEL[l.role] ?? l.role }) },
+        {
+            key: 'uses', header: '兑换 / 上限',
+            render: (l) => (_jsxs("span", { className: "tabular-nums", children: [l.uses, " / ", l.max_uses === -1 ? '不限' : l.max_uses] })),
+        },
+        {
+            key: 'expires_at', header: '过期时间',
+            render: (l) => _jsx("span", { className: "text-muted-foreground", children: formatDateTime(l.expires_at) }),
+        },
+        {
+            key: 'actions', header: '操作', className: 'text-right',
+            render: (l) => canManage ? (_jsx(Button, { size: "sm", variant: "outline", disabled: mut.revokeShareLink.isPending, onClick: () => onRevokeLink(l), children: "\u64A4\u9500" })) : null,
+        },
+    ];
+    return (_jsxs("div", { children: [_jsx(PageHeader, { title: "\u6210\u5458", description: "\u7BA1\u7406\u5F53\u524D\u5DE5\u4F5C\u533A\u7684\u6210\u5458\u3001\u9080\u8BF7\u4E0E\u5206\u4EAB\u94FE\u63A5", actions: canManage ? (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", onClick: () => setShareOpen(true), children: [_jsx(Link2, {}), " \u521B\u5EFA\u5206\u4EAB\u94FE\u63A5"] }), _jsxs(Button, { onClick: () => setInviteOpen(true), children: [_jsx(UserPlus, {}), " \u9080\u8BF7\u6210\u5458"] })] })) : undefined }), _jsxs(Tabs, { value: tab, onValueChange: setTab, children: [_jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "members", children: ["\u6210\u5458\uFF08", membersTotal, "\uFF09"] }), _jsxs(TabsTrigger, { value: "invitations", children: ["\u9080\u8BF7\uFF08", invitationsTotal, "\uFF09"] }), _jsxs(TabsTrigger, { value: "share-links", children: ["\u5206\u4EAB\u94FE\u63A5\uFF08", shareLinksTotal, "\uFF09"] })] }), _jsx(TabsContent, { value: "members", className: "mt-4", children: _jsx(DataTable, { columns: memberColumns, rows: members, rowKey: (m) => m.user_id, empty: _jsx(PageEmpty, { label: "\u6682\u65E0\u6210\u5458" }), pagination: {
+                                page: memberPage,
+                                pageSize: LIST_PAGE_SIZE,
+                                total: membersTotal,
+                                onPageChange: (p) => setPageParam('mpage', p),
+                            } }) }), _jsx(TabsContent, { value: "invitations", className: "mt-4", children: invitationsError ? (_jsx(PageError, { message: apiErrorMessage(invitationsError, '邀请列表加载失败'), onRetry: () => refetchAll() })) : (_jsx(DataTable, { columns: invitationColumns, rows: invitations, rowKey: (i) => i.id, empty: _jsx(PageEmpty, { label: "\u6682\u65E0\u9080\u8BF7", hint: "\u70B9\u51FB\u53F3\u4E0A\u89D2\u201C\u9080\u8BF7\u6210\u5458\u201D\u53D1\u9001\u65B0\u9080\u8BF7" }), pagination: {
+                                page: invitePage,
+                                pageSize: LIST_PAGE_SIZE,
+                                total: invitationsTotal,
+                                onPageChange: (p) => setPageParam('ipage', p),
+                            } })) }), _jsx(TabsContent, { value: "share-links", className: "mt-4", children: shareLinksError ? (_jsx(PageError, { message: apiErrorMessage(shareLinksError, '分享链接加载失败'), onRetry: () => refetchAll() })) : (_jsx(DataTable, { columns: shareLinkColumns, rows: shareLinks, rowKey: (l) => l.id, empty: _jsx(PageEmpty, { label: "\u6682\u65E0\u5206\u4EAB\u94FE\u63A5", hint: "\u5206\u4EAB\u94FE\u63A5\u53EF\u8BA9\u7528\u6237\u81EA\u52A9\u52A0\u5165\u5DE5\u4F5C\u533A\uFF1B\u70B9\u51FB\u53F3\u4E0A\u89D2\u201C\u521B\u5EFA\u5206\u4EAB\u94FE\u63A5\u201D\u751F\u6210\u5151\u6362\u7801" }), pagination: {
+                                page: linkPage,
+                                pageSize: LIST_PAGE_SIZE,
+                                total: shareLinksTotal,
+                                onPageChange: (p) => setPageParam('lpage', p),
+                            } })) })] }), _jsx(Dialog, { open: inviteOpen, onOpenChange: setInviteOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "\u9080\u8BF7\u6210\u5458" }), _jsx(DialogDescription, { children: "\u5411\u5BF9\u65B9\u90AE\u7BB1\u53D1\u9001\u52A0\u5165\u672C\u5DE5\u4F5C\u533A\u7684\u9080\u8BF7\u3002" })] }), _jsxs("form", { className: "space-y-4", onSubmit: submitInvite, noValidate: true, children: [_jsx(FormField, { label: "\u90AE\u7BB1", error: inviteForm.formState.errors.email?.message, htmlFor: "invite-email", children: _jsx(Input, { id: "invite-email", type: "email", autoComplete: "email", placeholder: "name@example.com", ...inviteForm.register('email') }) }), _jsx(FormField, { label: "\u89D2\u8272", error: inviteForm.formState.errors.role?.message, children: _jsxs(Select, { value: inviteForm.watch('role'), onValueChange: (v) => typeof v === 'string' && inviteForm.setValue('role', v), children: [_jsx(SelectTrigger, { className: "w-full", "aria-label": "\u9080\u8BF7\u89D2\u8272", children: _jsx(SelectValue, { children: ROLE_LABEL[inviteForm.watch('role')] }) }), _jsx(SelectContent, { children: ASSIGNABLE_ROLES.map((r) => (_jsx(SelectItem, { value: r, children: ROLE_LABEL[r] }, r))) })] }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => setInviteOpen(false), children: "\u53D6\u6D88" }), _jsx(Button, { type: "submit", disabled: mut.invite.isPending, children: mut.invite.isPending ? '发送中…' : '发送邀请' })] })] })] }) }), _jsx(Dialog, { open: shareOpen, onOpenChange: setShareOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "\u521B\u5EFA\u5206\u4EAB\u94FE\u63A5" }), _jsx(DialogDescription, { children: "\u751F\u6210\u53EF\u5206\u4EAB\u7684\u5151\u6362\u7801\uFF1B\u6301\u6709\u8005\u53EF\u6309\u6240\u9009\u89D2\u8272\u81EA\u52A9\u52A0\u5165\u5DE5\u4F5C\u533A\u3002\u5B8C\u6574\u5151\u6362\u7801\u4EC5\u521B\u5EFA\u65F6\u5C55\u793A\u4E00\u6B21\u3002" })] }), _jsxs("form", { className: "space-y-4", onSubmit: submitLink, children: [_jsx(FormField, { label: "\u6388\u4E88\u89D2\u8272", error: linkForm.formState.errors.role?.message, children: _jsxs(Select, { value: linkForm.watch('role'), onValueChange: (v) => typeof v === 'string' && linkForm.setValue('role', v), children: [_jsx(SelectTrigger, { className: "w-full", "aria-label": "\u5206\u4EAB\u94FE\u63A5\u89D2\u8272", children: _jsx(SelectValue, { children: ROLE_LABEL[linkForm.watch('role')] }) }), _jsx(SelectContent, { children: ASSIGNABLE_ROLES.map((r) => (_jsx(SelectItem, { value: r, children: ROLE_LABEL[r] }, r))) })] }) }), _jsx(FormField, { label: "\u6700\u5927\u5151\u6362\u6B21\u6570", error: linkForm.formState.errors.max_uses?.message, htmlFor: "link-max", children: _jsx(Input, { id: "link-max", type: "number", min: 1, ...linkForm.register('max_uses', { valueAsNumber: true }) }) }), _jsx(FormField, { label: "\u6709\u6548\u671F\uFF08\u5C0F\u65F6\uFF09", error: linkForm.formState.errors.ttl_hours?.message, htmlFor: "link-ttl", children: _jsx(Input, { id: "link-ttl", type: "number", min: 1, ...linkForm.register('ttl_hours', { valueAsNumber: true }) }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => setShareOpen(false), children: "\u53D6\u6D88" }), _jsx(Button, { type: "submit", disabled: mut.createShareLink.isPending, children: mut.createShareLink.isPending ? '创建中…' : '创建' })] })] })] }) }), _jsx(SecretModal, { open: secret !== null, onOpenChange: (o) => !o && setSecret(null), secretName: "\u5206\u4EAB\u94FE\u63A5\u5151\u6362\u7801", secretValue: secret ?? '' }), transferTarget && (_jsx(ImpactConfirmation, { open: true, onOpenChange: (o) => {
+                    if (!o)
+                        setTransferTarget(null);
+                }, onConfirm: () => void onTransfer(), title: `转让所有权给 ${transferTarget.email}`, confirmText: "\u786E\u8BA4\u8F6C\u8BA9", danger: true, impacts: [
+                    `${transferTarget.email} 将成为新 owner（获得工作区最高权与计费控制权）`,
+                    '你将降为 member（普通成员权限；转让单事务原子，失败不产生中间态）',
+                    '目标须是本工作区活跃成员且账号未禁用；钩子拦截/非法目标返回 409',
+                ] }))] }));
+}
+function isConflict(e) {
+    return typeof e === 'object' && e !== null && 'status' in e && e.status === 409;
+}

package/dist/pages/workspace/SchedulesPage.d.ts

@@ -0,0 +1,4 @@
+export declare const MISFIRE_LABEL: Record<string, string>;
+export interface SchedulesPageProps {
+}
+export declare function SchedulesPage(_props?: SchedulesPageProps): import("react").JSX.Element;

package/dist/pages/workspace/SchedulesPage.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Plus } from 'lucide-react';
+import { z } from 'zod';
+import { PageHeader, PageLoading, PageError, PageEmpty, } from '../../components/Page';
+import { DataTable } from '../../components/DataTable';
+import { FormField } from '../../components/FormField';
+import { CronInput, describeCron } from '../../components/CronInput';
+import { toast } from '../../components/toast';
+import { Button } from '../../components/ui/Button';
+import { Input } from '../../components/ui/Input';
+import { Switch } from '../../components/ui/switch';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from '../../components/ui/dialog';
+import { useApi } from '../../hooks/useApi';
+import { useWorkspace } from '../../hooks/useWorkspace';
+import { useZodForm } from '../../hooks/useZodForm';
+import { useConfirm } from '../../components/ConfirmDialog';
+import { browserTzLabel, formatDateTimeTz } from '../../lib/utils';
+import { apiErrorMessage } from '../../lib/api-error';
+export const MISFIRE_LABEL = {
+    skip: '错过跳过',
+    once: '错过补发',
+};
+function localTimezone() {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+    }
+    catch {
+        return 'UTC';
+    }
+}
+const createSchema = z.object({
+    kind: z.string().trim().min(1, '请填写触发标识（kind），如 task.cleanup'),
+    cron_expr: z.string().trim().regex(/^\S+\s+\S+\s+\S+\s+\S+\s+\S+$/, '表达式须为五字段：分 时 日 月 周'),
+    timezone: z.string().min(1, '请选择时区'),
+    misfire: z.enum(['skip', 'once']),
+});
+export function SchedulesPage(_props = {}) {
+    const { current } = useWorkspace();
+    const api = useApi();
+    const wsId = current?.id ?? '';
+    const base = '/api/schedules';
+    const [createOpen, setCreateOpen] = useState(false);
+    const tzLabel = browserTzLabel();
+    const plansQ = useQuery({
+        queryKey: ['schedules', wsId],
+        queryFn: () => api.get(base),
+        enabled: !!wsId,
+    });
+    const qc = useQueryClient();
+    const invalidate = () => qc.invalidateQueries({ queryKey: ['schedules', wsId] });
+    const onError = (e, fallback) => toast.error(apiErrorMessage(e, fallback));
+    const toggle = useMutation({
+        mutationFn: (p) => api.patch(`${base}/${p.id}`, { enabled: !p.enabled }),
+        onSuccess: async () => { toast.success('状态已更新'); await invalidate(); },
+        onError: (e) => onError(e, '操作失败'),
+    });
+    const create = useMutation({
+        mutationFn: (values) => api.post(base, values),
+        onSuccess: async () => { toast.success('计划已创建'); await invalidate(); },
+        onError: (e) => onError(e, '创建失败'),
+    });
+    const [editing, setEditing] = useState(null);
+    const updateM = useMutation({
+        mutationFn: (v) => api.patch(`${base}/${v.plan.id}`, v.body),
+        onSuccess: async (_d, v) => {
+            toast.success(`计划 ${v.plan.kind} 已更新`);
+            setEditing(null);
+            await invalidate();
+        },
+        onError: (e) => onError(e, '更新失败'),
+    });
+    const confirm = useConfirm();
+    const removeM = useMutation({
+        mutationFn: (p) => api.delete(`${base}/${p.id}`),
+        onSuccess: async (_d, p) => { toast.success(`计划 ${p.kind} 已删除`); await invalidate(); },
+        onError: (e) => onError(e, '删除失败'),
+    });
+    const onRemove = async (p) => {
+        const ok = await confirm({
+            title: '删除调度计划',
+            description: `确定删除计划 ${p.kind}（${describeCron(p.cron_expr)}，计划时区 ${p.timezone}）吗？` +
+                `下次触发 ${formatDateTimeTz(p.next_fire_at)}。删除后该计划不再触发，操作不可恢复。`,
+            confirmText: '删除',
+            danger: true,
+        });
+        if (ok)
+            removeM.mutate(p);
+    };
+    const form = useZodForm({
+        schema: createSchema,
+        defaultValues: { kind: '', cron_expr: '0 9 * * *', timezone: localTimezone(), misfire: 'skip' },
+    });
+    const cronValue = { cron: form.watch('cron_expr') ?? '', timezone: form.watch('timezone') ?? 'UTC' };
+    const setCron = (v) => {
+        form.setValue('cron_expr', v.cron, { shouldValidate: true });
+        form.setValue('timezone', v.timezone, { shouldValidate: true });
+    };
+    const submitCreate = form.handleSubmit((values) => {
+        create.mutate(values, {
+            onSuccess: () => {
+                form.reset();
+                setCreateOpen(false);
+            },
+        });
+    });
+    const editForm = useZodForm({
+        schema: createSchema,
+        defaultValues: { kind: '', cron_expr: '', timezone: 'UTC', misfire: 'skip' },
+        values: editing
+            ? {
+                kind: editing.kind,
+                cron_expr: editing.cron_expr,
+                timezone: editing.timezone,
+                misfire: editing.misfire === 'once' ? 'once' : 'skip',
+            }
+            : undefined,
+    });
+    const editCronValue = { cron: editForm.watch('cron_expr') ?? '', timezone: editForm.watch('timezone') ?? 'UTC' };
+    const setEditCron = (v) => {
+        editForm.setValue('cron_expr', v.cron, { shouldValidate: true });
+        editForm.setValue('timezone', v.timezone, { shouldValidate: true });
+    };
+    const submitEdit = editForm.handleSubmit((values) => {
+        if (!editing)
+            return;
+        const body = {};
+        if (values.cron_expr !== editing.cron_expr)
+            body.cron_expr = values.cron_expr;
+        if (values.timezone !== editing.timezone)
+            body.timezone = values.timezone;
+        if (values.misfire !== editing.misfire)
+            body.misfire = values.misfire;
+        if (Object.keys(body).length === 0) {
+            setEditing(null);
+            return;
+        }
+        updateM.mutate({ plan: editing, body });
+    });
+    const columns = [
+        {
+            key: 'kind', header: '触发',
+            render: (p) => (_jsxs("div", { className: "min-w-0", children: [_jsx("code", { className: "block max-w-[20rem] break-all rounded bg-muted px-1.5 py-0.5 font-mono text-xs", children: p.kind }), _jsx("p", { className: "mt-1 max-w-[20rem] break-words text-xs text-muted-foreground", children: describeCron(p.cron_expr) })] })),
+        },
+        {
+            key: 'cron', header: '表达式 / 时区',
+            render: (p) => (_jsxs("div", { className: "min-w-0", children: [_jsx("code", { className: "block max-w-[20rem] break-all font-mono text-xs", children: p.cron_expr }), _jsx("p", { className: "max-w-[20rem] break-words text-xs text-muted-foreground", children: p.timezone })] })),
+        },
+        {
+            key: 'misfire', header: '错过策略',
+            render: (p) => (_jsx("span", { className: "rounded border bg-muted px-1.5 py-0.5 text-xs", children: MISFIRE_LABEL[p.misfire] ?? p.misfire })),
+        },
+        {
+            key: 'next_fire_at', header: '下次触发',
+            render: (p) => (_jsx("span", { className: "whitespace-nowrap text-muted-foreground", title: `计划时区 ${p.timezone}；此处按浏览器本地时区（${tzLabel}）显示`, children: formatDateTimeTz(p.next_fire_at) })),
+        },
+        {
+            key: 'last_fired_at', header: '最近触发',
+            render: (p) => p.last_fired_at
+                ? (_jsx("span", { className: "whitespace-nowrap text-muted-foreground", title: `计划时区 ${p.timezone}；此处按浏览器本地时区（${tzLabel}）显示`, children: formatDateTimeTz(p.last_fired_at) }))
+                : _jsx("span", { className: "text-muted-foreground", children: "\u2014" }),
+        },
+        {
+            key: 'enabled', header: '启用',
+            render: (p) => (_jsx(Switch, { checked: p.enabled, disabled: toggle.isPending, onCheckedChange: () => toggle.mutate(p), "aria-label": `${p.enabled ? '停用' : '启用'}计划 ${p.kind}` })),
+        },
+        {
+            key: 'actions', header: '', className: 'text-right',
+            render: (p) => (_jsxs("div", { className: "flex justify-end gap-1", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setEditing(p), children: "\u7F16\u8F91" }), _jsx(Button, { variant: "ghost", size: "sm", className: "text-destructive hover:text-destructive", disabled: removeM.isPending, onClick: () => void onRemove(p), children: "\u5220\u9664" })] })),
+        },
+    ];
+    if (!wsId) {
+        return (_jsxs("div", { children: [_jsx(PageHeader, { title: "\u8C03\u5EA6", description: "\u7528\u6237\u81EA\u5B9A\u4E49\u5B9A\u65F6\u89E6\u53D1\uFF08cron + \u65F6\u533A\uFF09" }), _jsx(PageEmpty, { label: "\u8BF7\u5148\u521B\u5EFA\u5E76\u9009\u62E9\u4E00\u4E2A\u5DE5\u4F5C\u533A" })] }));
+    }
+    return (_jsxs("div", { children: [_jsx(PageHeader, { title: "\u8C03\u5EA6", description: `用户自定义定时触发（工作区：${current?.name ?? wsId}）`, actions: _jsxs(Button, { onClick: () => setCreateOpen(true), children: [_jsx(Plus, {}), " \u521B\u5EFA\u8BA1\u5212"] }) }), plansQ.isError ? (_jsx(PageError, { message: apiErrorMessage(plansQ.error, '计划列表加载失败'), onRetry: () => plansQ.refetch() })) : plansQ.isPending ? (_jsx(PageLoading, { label: "\u52A0\u8F7D\u8BA1\u5212\u2026" })) : (_jsx(DataTable, { columns: columns, rows: plansQ.data?.items ?? [], rowKey: (p) => p.id, empty: _jsx(PageEmpty, { label: "\u6682\u65E0\u8C03\u5EA6\u8BA1\u5212", hint: "\u70B9\u51FB\u53F3\u4E0A\u89D2\u201C\u521B\u5EFA\u8BA1\u5212\u201D\u8BBE\u7F6E\u7B2C\u4E00\u4E2A\u5B9A\u65F6\u89E6\u53D1" }) })), _jsx(Dialog, { open: createOpen, onOpenChange: setCreateOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "\u521B\u5EFA\u8C03\u5EA6\u8BA1\u5212" }), _jsx(DialogDescription, { children: "\u4E94\u5B57\u6BB5 cron \u8868\u8FBE\u5F0F + IANA \u65F6\u533A\uFF1B\u9519\u8FC7\u7B56\u7565\"\u8DF3\u8FC7\"\u7B49\u4E0B\u4E00\u4E2A\u5468\u671F\uFF0C \"\u8865\u53D1\"\u4F1A\u5148\u8865\u6700\u8FD1\u4E00\u6B21\u3002\u9884\u89C8\u7531\u540E\u7AEF\u8BA1\u7B97\uFF0C\u4E0E\u5B9E\u9645\u89E6\u53D1\u4E00\u81F4\u3002" })] }), _jsxs("form", { className: "space-y-4", onSubmit: submitCreate, children: [_jsx(FormField, { label: "\u89E6\u53D1\u6807\u8BC6\uFF08kind\uFF09", error: form.formState.errors.kind?.message, htmlFor: "sched-kind", children: _jsx(Input, { id: "sched-kind", placeholder: "task.cleanup", ...form.register('kind') }) }), _jsx(FormField, { label: "\u8C03\u5EA6\u89C4\u5219", error: form.formState.errors.cron_expr?.message ?? form.formState.errors.timezone?.message, children: _jsx(CronInput, { idPrefix: "sched", value: cronValue, onChange: setCron }) }), _jsx(FormField, { label: "\u9519\u8FC7\u7B56\u7565", error: form.formState.errors.misfire?.message, htmlFor: "sched-misfire", children: _jsxs("select", { id: "sched-misfire", className: "h-9 w-full rounded-md border border-input bg-transparent px-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", ...form.register('misfire'), children: [_jsx("option", { value: "skip", children: "\u9519\u8FC7\u8DF3\u8FC7\uFF08\u9ED8\u8BA4\uFF09" }), _jsx("option", { value: "once", children: "\u9519\u8FC7\u8865\u53D1\u4E00\u6B21" })] }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => setCreateOpen(false), children: "\u53D6\u6D88" }), _jsx(Button, { type: "submit", disabled: create.isPending, children: create.isPending ? '创建中…' : '创建计划' })] })] })] }) }), _jsx(Dialog, { open: editing !== null, onOpenChange: (o) => !o && setEditing(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "\u7F16\u8F91\u8C03\u5EA6\u8BA1\u5212" }), _jsxs(DialogDescription, { children: ["\u4FEE\u6539 ", editing?.kind, " \u7684\u8C03\u5EA6\u89C4\u5219\uFF1B\u53EA\u63D0\u4EA4\u6539\u52A8\u7684\u5B57\u6BB5\uFF0C\u4E0B\u6B21\u89E6\u53D1\u65F6\u95F4\u6309\u65B0\u89C4\u5219\u91CD\u65B0\u8BA1\u7B97\u3002"] })] }), _jsxs("form", { className: "space-y-4", onSubmit: submitEdit, children: [_jsx(FormField, { label: "\u89E6\u53D1\u6807\u8BC6\uFF08kind\uFF0C\u4E0D\u53EF\u4FEE\u6539\uFF09", htmlFor: "sched-edit-kind", children: _jsx(Input, { id: "sched-edit-kind", value: editing?.kind ?? '', readOnly: true, disabled: true }) }), _jsx(FormField, { label: "\u8C03\u5EA6\u89C4\u5219", error: editForm.formState.errors.cron_expr?.message ?? editForm.formState.errors.timezone?.message, children: _jsx(CronInput, { idPrefix: "sched-edit", value: editCronValue, onChange: setEditCron }) }), _jsx(FormField, { label: "\u9519\u8FC7\u7B56\u7565", error: editForm.formState.errors.misfire?.message, htmlFor: "sched-edit-misfire", children: _jsxs("select", { id: "sched-edit-misfire", className: "h-9 w-full rounded-md border border-input bg-transparent px-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", ...editForm.register('misfire'), children: [_jsx("option", { value: "skip", children: "\u9519\u8FC7\u8DF3\u8FC7\uFF08\u9ED8\u8BA4\uFF09" }), _jsx("option", { value: "once", children: "\u9519\u8FC7\u8865\u53D1\u4E00\u6B21" })] }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => setEditing(null), children: "\u53D6\u6D88" }), _jsx(Button, { type: "submit", disabled: updateM.isPending, children: updateM.isPending ? '保存中…' : '保存修改' })] })] })] }) })] }));
+}

package/dist/pages/workspace/UsagePage.d.ts

@@ -0,0 +1,15 @@
+import { type PKUsageItem } from '../../hooks/useUsage';
+interface ReservationDetail {
+    id: string;
+    amount: number;
+    status: string;
+    expires_at: string;
+}
+export type UsageItem = PKUsageItem & {
+    reserved?: number;
+    reservations?: ReservationDetail[];
+};
+export interface UsagePageProps {
+}
+export declare function UsagePage(_props?: UsagePageProps): import("react").JSX.Element;
+export {};

package/dist/pages/workspace/UsagePage.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Link } from 'react-router';
+import { PageHeader, PageLoading, PageError, PageEmpty } from '../../components/Page';
+import { Badge } from '../../components/ui/Badge';
+import { Card, CardHeader, CardTitle, CardAction, CardContent } from '../../components/ui/card';
+import { Progress, ProgressLabel, ProgressValue, } from '../../components/ui/progress';
+import { DataTable } from '../../components/DataTable';
+import { useUsage } from '../../hooks/useUsage';
+import { apiErrorMessage } from '../../lib/api-error';
+const NEAR_FULL_PCT = 80;
+const DIM_LABEL = {
+    tasks_monthly: '任务数（本月）',
+    workspaces: '工作区数',
+    seats: '成员席位',
+    webhooks: 'Webhook 订阅数',
+};
+function dimLabel(key) {
+    return DIM_LABEL[key] ?? key;
+}
+function fmtNum(n) {
+    return n.toLocaleString('zh-CN');
+}
+const RESERVATION_STATUS_LABEL = {
+    reserved: '预留中',
+    settled: '已结算',
+    released: '已释放',
+    expired: '已过期',
+};
+function reservationStatusLabel(status) {
+    return RESERVATION_STATUS_LABEL[status] ?? status;
+}
+function formatExpires(iso) {
+    return iso.slice(0, 16).replace('T', ' ');
+}
+function SegmentedProgress({ item, reserved, total }) {
+    const base = Math.max(total, 1);
+    const usedPct = Math.min(100, Math.round(((item.used + item.granted) / base) * 100));
+    const reservedPct = Math.min(100 - usedPct, Math.round((reserved / base) * 100));
+    const now = item.used + item.granted + reserved;
+    return (_jsx("div", { "data-slot": "progress", role: "progressbar", "aria-label": `${dimLabel(item.key)} 用量`, "aria-valuemin": 0, "aria-valuemax": Math.max(total, now), "aria-valuenow": now, "aria-valuetext": `已用 ${fmtNum(item.used)}${item.granted > 0 ? `（另获赠 ${fmtNum(item.granted)}）` : ''}，预留中 ${fmtNum(reserved)}，上限 ${fmtNum(total)}`, className: "flex flex-wrap gap-3", children: _jsxs("div", { className: "relative h-1.5 w-full overflow-hidden rounded-full bg-muted", children: [_jsx("div", { "data-testid": "progress-indicator-used", "data-slot": "progress-indicator-used", className: "absolute inset-y-0 left-0 bg-primary transition-all", style: { width: `${usedPct}%` } }), _jsx("div", { "data-testid": "progress-indicator-reserved", "data-slot": "progress-indicator-reserved", className: "absolute inset-y-0 bg-primary/40 transition-all", style: { width: `${reservedPct}%`, left: `${usedPct}%` } })] }) }));
+}
+const RESERVATION_COLUMNS = [
+    { key: 'amount', header: '数量' },
+    { key: 'status', header: '状态', render: (r) => reservationStatusLabel(r.status) },
+    { key: 'expires_at', header: '到期时间', render: (r) => formatExpires(r.expires_at) },
+];
+function UsageCard({ item }) {
+    const unlimited = item.limit < 0;
+    const reserved = item.reserved ?? 0;
+    const hasReserved = reserved > 0;
+    const total = unlimited ? Math.max(item.used + reserved, 1) : item.limit;
+    const pct = unlimited
+        ? Math.min(100, Math.round(((item.used + reserved) / Math.max(total, 10)) * 100))
+        : Math.min(100, Math.round(((item.used + item.granted + reserved) / Math.max(total, 1)) * 100));
+    const committed = item.used + item.granted + reserved;
+    const full = !unlimited && committed >= item.limit;
+    const nearFull = !unlimited && !full && pct >= NEAR_FULL_PCT;
+    const valueText = `${fmtNum(item.used)}${item.granted > 0 ? ` (+${fmtNum(item.granted)})` : ''} / ${unlimited ? '∞' : fmtNum(total)}`;
+    return (_jsxs(Card, { size: "sm", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { title: DIM_LABEL[item.key] ? item.key : undefined, children: dimLabel(item.key) }), unlimited && _jsx(CardAction, { children: _jsx(Badge, { variant: "secondary", children: "\u4E0D\u9650\u91CF" }) }), !unlimited && full && _jsx(CardAction, { children: _jsx(Badge, { variant: "destructive", children: "\u5DF2\u7528\u5C3D" }) })] }), _jsxs(CardContent, { children: [hasReserved ? (_jsxs(_Fragment, { children: [_jsx(SegmentedProgress, { item: item, reserved: reserved, total: total }), _jsxs("p", { className: "mt-1.5 text-sm text-muted-foreground", children: ["\u5DF2\u7528 ", _jsxs("span", { className: "font-medium text-foreground tabular-nums", children: [fmtNum(item.used), item.granted > 0 ? ` (+${fmtNum(item.granted)})` : ''] }), ' · 预留中 ', _jsx("span", { className: "font-medium text-foreground tabular-nums", children: fmtNum(reserved) }), ` / ${unlimited ? '∞' : fmtNum(total)}`] })] })) : (_jsxs(Progress, { value: pct, children: [_jsx(ProgressLabel, { children: dimLabel(item.key) }), _jsx(ProgressValue, { children: () => valueText })] })), !unlimited && (full || nearFull) && (_jsxs("p", { className: "mt-2 text-xs text-muted-foreground", children: [full ? `该维度配额已用尽${hasReserved ? '（含预留中）' : ''}，可升级套餐提高上限。` : '该维度配额即将用尽。', _jsx(Link, { to: "/settings/workspace/billing", className: "ml-1 inline-flex items-center py-1.5 -my-1.5 text-primary underline-offset-2 hover:underline", children: "\u5347\u7EA7\u5957\u9910" })] })), hasReserved && (item.reservations?.length ?? 0) > 0 && (_jsxs("details", { className: "mt-3 group", "data-testid": "reservation-details", children: [_jsxs("summary", { className: "cursor-pointer select-none text-xs text-muted-foreground hover:text-foreground", children: ["\u9884\u7559\u660E\u7EC6\uFF08", item.reservations.length, " \u7B14\uFF09"] }), _jsx("div", { className: "mt-2", children: _jsx(DataTable, { columns: RESERVATION_COLUMNS, rows: item.reservations, rowKey: (r) => r.id }) })] }))] })] }));
+}
+export function UsagePage(_props = {}) {
+    const { wsId, usage, loading, error, refetch } = useUsage();
+    if (!wsId) {
+        return (_jsxs("div", { children: [_jsx(PageHeader, { title: "\u7528\u91CF" }), _jsx(PageEmpty, { label: "\u8BF7\u5148\u521B\u5EFA\u5E76\u9009\u62E9\u4E00\u4E2A\u5DE5\u4F5C\u533A" })] }));
+    }
+    if (loading)
+        return _jsx(PageLoading, { label: "\u52A0\u8F7D\u7528\u91CF\u6570\u636E\u2026" });
+    if (error) {
+        return _jsx(PageError, { message: apiErrorMessage(error, '用量数据加载失败'), onRetry: () => refetch() });
+    }
+    return (_jsxs("div", { children: [_jsx(PageHeader, { title: "\u7528\u91CF", description: usage
+                    ? `当前套餐 ${usage.plan_code} · 计费周期 ${usage.period}（周期内累计，超限将按套餐规则限制或计费）`
+                    : undefined }), usage && usage.items.length > 0 ? (_jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: usage.items.map((item) => (_jsx(UsageCard, { item: item }, item.key))) })) : (_jsx(PageEmpty, { label: "\u5F53\u524D\u5957\u9910\u6CA1\u6709\u8BA1\u91CF\u7EF4\u5EA6" }))] }));
+}

package/dist/pages/workspace/WebhooksPage.d.ts

@@ -0,0 +1,3 @@
+export interface WebhooksPageProps {
+}
+export declare function WebhooksPage(_props?: WebhooksPageProps): import("react").JSX.Element;