@ploykit/ui 0.5.0 → 0.6.2

package/src/pages/workspace/WorkspaceAuditPage.tsx

@@ -0,0 +1,229 @@
+
+import { useEffect, useMemo, useState } from 'react'
+import { useSearchParams } from 'react-router'
+import { Download, Search } from 'lucide-react'
+import { PageHeader, PageLoading, PageError, PageEmpty } from '../../components/Page'
+import { DataTable, type Column } from '../../components/DataTable'
+import { Button } from '../../components/ui/button'
+import { Input } from '../../components/ui/input'
+import { toast } from '../../components/toast'
+import {
+  useAudit, exportAuditCsv,
+  type AuditFilters, type PKAuditEvent,
+} from '@ploykit/hooks'
+import { formatDateTime } from '../../lib/utils'
+import { apiErrorMessage } from '../../lib/api-error'
+
+const PAGE_SIZE = 20
+
+
+interface FilterDraft {
+  action: string
+  actorId: string
+  resourceType: string
+  from: string
+  to: string
+}
+
+
+function draftFromParams(p: URLSearchParams): FilterDraft {
+  return {
+    action: p.get('action') ?? '',
+    actorId: p.get('actor_id') ?? '',
+    resourceType: p.get('resource_type') ?? '',
+    from: p.get('from') ?? '',
+    to: p.get('to') ?? '',
+  }
+}
+
+
+function paramsFromDraft(d: FilterDraft, offset: number): URLSearchParams {
+  const p = new URLSearchParams()
+  if (d.action.trim()) p.set('action', d.action.trim())
+  if (d.actorId.trim()) p.set('actor_id', d.actorId.trim())
+  if (d.resourceType.trim()) p.set('resource_type', d.resourceType.trim())
+  if (d.from) p.set('from', d.from)
+  if (d.to) p.set('to', d.to)
+  if (offset > 0) p.set('offset', String(offset))
+  return p
+}
+
+function toFilters(d: FilterDraft): AuditFilters {
+  return {
+    action: d.action.trim(),
+    actorId: d.actorId.trim(),
+    resourceType: d.resourceType.trim(),
+    from: d.from ? `${d.from}T00:00:00Z` : '',
+    to: d.to ? `${d.to}T23:59:59Z` : '',
+  }
+}
+
+export interface WorkspaceAuditPageProps {}
+
+export function WorkspaceAuditPage(_props: WorkspaceAuditPageProps = {}) {
+  const [searchParams, setSearchParams] = useSearchParams()
+  
+  const [draft, setDraft] = useState<FilterDraft>(() => draftFromParams(searchParams))
+  
+  useEffect(() => {
+    setDraft(draftFromParams(searchParams))
+  }, [searchParams])
+  const [rangeError, setRangeError] = useState<string | null>(null)
+  const appliedDraft = useMemo(() => draftFromParams(searchParams), [searchParams])
+  const applied = useMemo(() => toFilters(appliedDraft), [appliedDraft])
+  const offset = Math.max(0, Number.parseInt(searchParams.get('offset') ?? '0', 10) || 0)
+
+  const { wsId, items, total, loading, error, refetch } = useAudit(applied, PAGE_SIZE, offset)
+
+  const apply = () => {
+    
+    if (draft.from && draft.to && draft.from > draft.to) {
+      setRangeError('起始日期不能晚于结束日期')
+      return
+    }
+    setRangeError(null)
+    setSearchParams(paramsFromDraft(draft, 0))
+  }
+
+  const onPageChange = (p: number) => {
+    setSearchParams(paramsFromDraft(appliedDraft, Math.max(0, (p - 1) * PAGE_SIZE)))
+  }
+
+  const exportCsv = async () => {
+    try {
+      await exportAuditCsv(applied)
+      toast.success('CSV 导出已开始下载')
+    } catch (e) {
+      toast.error(apiErrorMessage(e, '导出失败'))
+    }
+  }
+
+  const columns: Column<PKAuditEvent>[] = [
+    {
+      key: 'created_at', header: '时间', className: 'w-[16%]',
+      render: (e) => <span className="whitespace-nowrap text-muted-foreground">{formatDateTime(e.created_at)}</span>,
+    },
+    {
+      key: 'actor', header: '操作者', className: 'w-[20%]',
+      render: (e) => {
+        const email = typeof e.actor_snapshot?.email === 'string' ? e.actor_snapshot.email : ''
+        return (
+          <div className="min-w-0">
+            <p className="truncate">{email || e.actor_id || '—'}</p>
+            <p className="text-xs text-muted-foreground">{e.actor_type}</p>
+          </div>
+        )
+      },
+    },
+    {
+      key: 'action', header: '动作', className: 'w-[22%]',
+      render: (e) => <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">{e.action}</code>,
+    },
+    {
+      key: 'resource', header: '资源', className: 'w-[42%]',
+      render: (e) => (
+        <div className="min-w-0">
+          <p className="truncate">{e.resource_type}</p>
+          {e.resource_id && <p className="truncate font-mono text-xs text-muted-foreground">{e.resource_id}</p>}
+        </div>
+      ),
+    },
+  ]
+
+  if (!wsId) {
+    return (
+      <div>
+        <PageHeader title="审计日志" description="工作区内的关键操作记录" />
+        <PageEmpty label="请先创建并选择一个工作区" />
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <PageHeader title="审计日志" description="工作区内的关键操作记录（保留最近事件，按时间倒序）" />
+
+      <div className="mb-4 flex flex-wrap items-end gap-2">
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="text-muted-foreground">动作</span>
+          <Input
+            className="w-44"
+            placeholder="如 workspace.rename"
+            value={draft.action}
+            onChange={(e) => setDraft((d) => ({ ...d, action: e.target.value }))}
+          />
+        </label>
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="text-muted-foreground">操作者 ID</span>
+          <Input
+            className="w-52"
+            placeholder="actor uuid"
+            value={draft.actorId}
+            onChange={(e) => setDraft((d) => ({ ...d, actorId: e.target.value }))}
+          />
+        </label>
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="text-muted-foreground">资源类型</span>
+          <Input
+            className="w-40"
+            placeholder="如 workspace"
+            value={draft.resourceType}
+            onChange={(e) => setDraft((d) => ({ ...d, resourceType: e.target.value }))}
+          />
+        </label>
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="text-muted-foreground">开始日期</span>
+          <Input
+            className="w-40"
+            type="date"
+            value={draft.from}
+            onChange={(e) => setDraft((d) => ({ ...d, from: e.target.value }))}
+          />
+        </label>
+        <label className="flex flex-col gap-1 text-sm">
+          <span className="text-muted-foreground">结束日期</span>
+          <Input
+            className="w-40"
+            type="date"
+            value={draft.to}
+            onChange={(e) => setDraft((d) => ({ ...d, to: e.target.value }))}
+          />
+        </label>
+        <Button onClick={apply}>
+          <Search /> 查询
+        </Button>
+        <Button variant="outline" onClick={exportCsv}>
+          <Download /> 导出 CSV
+        </Button>
+      </div>
+
+      {/* P3-40：日期区间错误就地可见（不静默发起恒空查询） */}
+      {rangeError && (
+        <p role="alert" className="mb-4 text-sm text-destructive">
+          {rangeError}
+        </p>
+      )}
+
+      {loading ? (
+        <PageLoading label="加载审计日志…" />
+      ) : error ? (
+        <PageError message={apiErrorMessage(error, '审计日志加载失败')} onRetry={() => refetch()} />
+      ) : (
+        <>
+          <DataTable
+            columns={columns}
+            rows={items}
+            rowKey={(e) => e.id}
+            empty={<PageEmpty label="暂无审计记录" hint="调整过滤条件或触发一些操作后再来" />}
+            pagination={{
+              page: Math.floor(offset / PAGE_SIZE) + 1,
+              pageSize: PAGE_SIZE,
+              total,
+              onPageChange,
+            }}
+          />
+        </>
+      )}
+    </div>
+  )
+}

package/src/pages/workspace/WorkspaceGeneralPage.tsx

@@ -0,0 +1,184 @@
+
+import { useState } from 'react'
+import { useNavigate } from 'react-router'
+import { useQueryClient } from '@tanstack/react-query'
+import { z } from 'zod'
+import { PageHeader, PageError } from '../../components/Page'
+import { SettingsCard } from '../../components/SettingsCard'
+import { FormField } from '../../components/FormField'
+import { 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 { useApi } from '@ploykit/hooks'
+import { useWorkspace } from '@ploykit/hooks'
+import { useZodForm } from '@ploykit/hooks'
+import { queryKeys, type PKWorkspace } from '@ploykit/hooks'
+import { apiErrorMessage } from '../../lib/api-error'
+import { roleSatisfies } from '@ploykit/hooks'
+
+
+
+const renameSchema = z.object({
+  name: z.string().trim().min(1, '请输入工作区名称').max(64, '名称最多 64 字符'),
+})
+type RenameForm = z.infer<typeof renameSchema>
+
+export interface WorkspaceGeneralPageProps {
+  
+  exitTo?: string
+}
+
+export function WorkspaceGeneralPage({ exitTo = '/app' }: WorkspaceGeneralPageProps = {}) {
+  const { current, clear } = useWorkspace()
+  const api = useApi()
+  const confirm = useConfirm()
+  const navigate = useNavigate()
+  const qc = useQueryClient()
+  const [saving, setSaving] = useState(false)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+
+  const ws = current
+  const form = useZodForm<RenameForm>({
+    schema: renameSchema,
+    defaultValues: { name: ws?.name ?? '' },
+    values: ws ? { name: ws.name } : undefined, // 工作区数据到达后同步进表单
+  })
+
+  if (!ws) {
+    return (
+      <div>
+        <PageHeader title="工作区概况" />
+        <PageError message="工作区不存在或尚未选择" onRetry={() => qc.invalidateQueries({ queryKey: queryKeys.workspaceList })} />
+      </div>
+    )
+  }
+
+  
+  
+  const canRename = roleSatisfies(ws.role, 'admin')
+  const canDelete = roleSatisfies(ws.role, 'owner')
+
+  const refreshList = async () => {
+    await qc.invalidateQueries({ queryKey: queryKeys.workspace })
+  }
+
+  const handleRename = form.handleSubmit(async (values) => {
+    setSaving(true)
+    try {
+      await api.patch<PKWorkspace>(`/api/workspaces/${ws.id}`, { name: values.name })
+      await refreshList()
+      toast.success('工作区名称已更新')
+    } catch (e) {
+      toast.error(apiErrorMessage(e, '重命名失败'))
+    } finally {
+      setSaving(false)
+    }
+  })
+
+  const afterExit = async () => {
+    clear()
+    await refreshList()
+    navigate(exitTo)
+  }
+
+  const handleLeave = async () => {
+    if (!(await confirm({
+      title: '退出工作区',
+      description: `退出后将失去「${ws.name}」的访问权限；你创建的数据会保留在工作区内。`,
+      confirmText: '退出', danger: true,
+    }))) return
+    try {
+      await api.post(`/api/workspaces/${ws.id}/leave`)
+      toast.success('已退出工作区')
+      await afterExit()
+    } catch (e) {
+      
+      
+      
+      toast.error(is409(e)
+        ? '最后一个所有者不能离开工作区，请先转移所有权或删除工作区'
+        : apiErrorMessage(e, '退出失败'))
+    }
+  }
+
+  const handleDelete = async () => {
+    try {
+      await api.delete(`/api/workspaces/${ws.id}`)
+      toast.success('工作区已删除')
+      await afterExit()
+    } catch (e) {
+      
+      toast.error(apiErrorMessage(e, '删除失败'))
+    }
+  }
+
+  return (
+    <div>
+      <PageHeader title="工作区概况" description={`工作区 ${ws.name}（${ws.slug}）的基础设置`} />
+
+      <SettingsCard
+        title="基础信息"
+        description="工作区名称对成员可见；slug 是 URL 标识，创建后不可修改。"
+      >
+        <form className="max-w-md space-y-4" onSubmit={handleRename}>
+          <FormField label="工作区名称" error={form.formState.errors.name?.message} htmlFor="ws-name">
+            <Input id="ws-name" disabled={!canRename} {...form.register('name')} />
+          </FormField>
+          <FormField label="Slug（只读）" htmlFor="ws-slug">
+            <Input id="ws-slug" value={ws.slug} readOnly disabled />
+          </FormField>
+          {canRename && (
+            <Button type="submit" disabled={saving}>{saving ? '保存中…' : '保存修改'}</Button>
+          )}
+        </form>
+      </SettingsCard>
+
+      <SettingsCard danger title="危险区" description="以下操作影响全部成员，请谨慎执行。">
+        <div className="space-y-4">
+          <div className="flex flex-row items-center justify-between gap-4 rounded-lg border p-4">
+            <div>
+              <p className="text-sm font-medium">退出工作区</p>
+              <p className="mt-0.5 text-sm text-muted-foreground">
+                退出后你将不再是「{ws.name}」的成员。最后一位 owner 无法退出。
+              </p>
+            </div>
+            <Button variant="outline" onClick={handleLeave}>退出工作区</Button>
+          </div>
+
+          {canDelete && (
+            <div className="flex flex-row items-center justify-between gap-4 rounded-lg border border-destructive/40 p-4">
+              <div>
+                <p className="text-sm font-medium text-destructive">删除工作区</p>
+                <p className="mt-0.5 text-sm text-muted-foreground">
+                  硬删除工作区及其全部数据，操作不可恢复。
+                </p>
+              </div>
+              <Button variant="destructive" onClick={() => setDeleteOpen(true)}>删除工作区</Button>
+            </div>
+          )}
+        </div>
+      </SettingsCard>
+
+      <ImpactConfirmation
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        onConfirm={handleDelete}
+        title={`删除工作区「${ws.name}」`}
+        impacts={[
+          '工作区全部数据将被永久删除，且不可恢复',
+          '所有成员立即失去访问权限',
+          '未撤销的邀请与分享链接同时失效',
+          '历史审计记录将保留（合规要求），但不再关联可访问的工作区',
+        ]}
+        confirmText="永久删除"
+        danger
+      />
+    </div>
+  )
+}
+
+function is409(e: unknown): boolean {
+  return typeof e === 'object' && e !== null && 'status' in e && (e as { status?: number }).status === 409
+}