@teamix-evo/ui 0.6.1 → 0.7.0

package/src/examples/evaluators/stories.tsx

@@ -0,0 +1,502 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/sidebar';
+import { PageShell } from '@/components/page-shell';
+import { PageHeader, PageHeaderHeading } from '@/components/page-header';
+import { Card, CardContent } from '@/components/card';
+import { Button } from '@/components/button';
+import { Input } from '@/components/input';
+import { DataTable } from '@/components/data-table';
+import type { DataTableColumn } from '@/components/data-table';
+import { Tag } from '@/components/tag';
+import { TooltipProvider } from '@/components/tooltip';
+import {
+  Search,
+  Bot,
+  BookOpen,
+  Sparkles,
+  FlaskConical,
+  BarChart3,
+  MoreVertical,
+  PanelLeftClose,
+  LayoutGrid,
+  Wrench,
+  Brain,
+  MessageSquare,
+  FileText,
+  ListChecks,
+  Activity,
+  ClipboardList,
+  ChevronDown,
+  Plus,
+} from 'lucide-react';
+
+const meta: Meta = {
+  title: '页面示例 · Page Examples/评估器 标准列表',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export default meta;
+
+type Story = StoryObj;
+
+// ─── Mock Data ─────────────────────────────────────────────────────────────
+
+interface Evaluator extends Record<string, unknown> {
+  id: string;
+  name: string;
+  type: string;
+  metrics: string;
+  status: 'active' | 'inactive' | 'draft';
+  creator: string;
+  creatorUsername: string;
+  createdAt: string;
+}
+
+const evaluators: Evaluator[] = [
+  {
+    id: '1',
+    name: '通用问答质量评估',
+    type: '模型评估',
+    metrics: '准确率、流畅度、相关性',
+    status: 'active',
+    creator: '张明',
+    creatorUsername: 'zhangming',
+    createdAt: '2026-05-10 14:30:00',
+  },
+  {
+    id: '2',
+    name: 'RAG 检索质量评估',
+    type: '检索评估',
+    metrics: '召回率、精确率、MRR',
+    status: 'active',
+    creator: '李华',
+    creatorUsername: 'lihua',
+    createdAt: '2026-05-08 10:15:00',
+  },
+  {
+    id: '3',
+    name: '安全合规检测器',
+    type: '安全评估',
+    metrics: '违规率、敏感词命中',
+    status: 'active',
+    creator: '王磊',
+    creatorUsername: 'wanglei',
+    createdAt: '2026-05-06 16:45:00',
+  },
+  {
+    id: '4',
+    name: '代码生成评估',
+    type: '模型评估',
+    metrics: 'Pass@1、编译通过率',
+    status: 'draft',
+    creator: '赵婷',
+    creatorUsername: 'zhaoting',
+    createdAt: '2026-05-04 09:20:00',
+  },
+  {
+    id: '5',
+    name: '多轮对话一致性评估',
+    type: '对话评估',
+    metrics: '上下文一致性、话题连贯性',
+    status: 'active',
+    creator: '张明',
+    creatorUsername: 'zhangming',
+    createdAt: '2026-05-02 11:30:00',
+  },
+  {
+    id: '6',
+    name: '摘要生成评估',
+    type: '模型评估',
+    metrics: 'ROUGE-L、信息覆盖率',
+    status: 'inactive',
+    creator: '李华',
+    creatorUsername: 'lihua',
+    createdAt: '2026-04-28 15:10:00',
+  },
+  {
+    id: '7',
+    name: '意图识别评估',
+    type: '分类评估',
+    metrics: 'F1-Score、准确率',
+    status: 'active',
+    creator: '王磊',
+    creatorUsername: 'wanglei',
+    createdAt: '2026-04-25 08:50:00',
+  },
+  {
+    id: '8',
+    name: '知识库问答评估',
+    type: '检索评估',
+    metrics: 'EM、F1、召回率',
+    status: 'active',
+    creator: '赵婷',
+    creatorUsername: 'zhaoting',
+    createdAt: '2026-04-22 13:40:00',
+  },
+];
+
+// ─── Table Columns ─────────────────────────────────────────────────────────
+
+const columns: DataTableColumn<Evaluator>[] = [
+  {
+    key: 'name',
+    title: '评估器名称',
+    dataIndex: 'name',
+    width: 200,
+    sortable: true,
+    render: (value) => (
+      <span className="cursor-pointer font-medium text-primary">
+        {value as string}
+      </span>
+    ),
+  },
+  {
+    key: 'type',
+    title: '类型',
+    dataIndex: 'type',
+    width: 120,
+  },
+  {
+    key: 'metrics',
+    title: '评测指标',
+    dataIndex: 'metrics',
+    width: 220,
+  },
+  {
+    key: 'status',
+    title: '状态',
+    dataIndex: 'status',
+    width: 100,
+    render: (value) => {
+      const statusMap: Record<
+        string,
+        { status: 'success' | 'default' | 'warning'; text: string }
+      > = {
+        active: { status: 'success', text: '已启用' },
+        inactive: { status: 'default', text: '已停用' },
+        draft: { status: 'warning', text: '草稿' },
+      };
+      const config = statusMap[value as string] ?? statusMap['active'];
+      return (
+        <Tag variant="status" status={config!.status}>
+          {config!.text}
+        </Tag>
+      );
+    },
+  },
+  {
+    key: 'creator',
+    title: '创建人',
+    dataIndex: 'creator',
+    width: 150,
+    render: (_value, record) => (
+      <span className="text-sm">
+        {record.creator}{' '}
+        <span className="text-muted-foreground">
+          ({record.creatorUsername})
+        </span>
+      </span>
+    ),
+  },
+  {
+    key: 'createdAt',
+    title: '创建时间',
+    dataIndex: 'createdAt',
+    width: 180,
+    sortable: true,
+    render: (value) => <span className="tabular-nums">{value as string}</span>,
+  },
+  {
+    key: 'actions',
+    title: '操作',
+    width: 160,
+    align: 'right',
+    render: () => (
+      <div className="flex items-center justify-end gap-3">
+        <span className="cursor-pointer text-primary">详情</span>
+        <span className="cursor-pointer text-primary">编辑</span>
+        <span className="cursor-pointer text-destructive">删除</span>
+      </div>
+    ),
+  },
+];
+
+// ─── OP Sidebar ────────────────────────────────────────────────────────────
+
+/**
+ * OP Logo — inline SVG（来源：_assets/OP_LOGO.svg）
+ */
+function OpLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 84 84"
+      className={className}
+    >
+      <defs>
+        <clipPath id="opai-logo-clip-evaluators">
+          <rect x="0" y="0" width="84" height="84" rx="18" />
+        </clipPath>
+      </defs>
+      <g clipPath="url(#opai-logo-clip-evaluators)">
+        <rect x="0" y="0" width="84" height="84" rx="18" fill="currentColor" />
+        <path
+          d="M56.628 43.209L48.407 45.869C46.698 46.422 45.142 44.688 45.876 43.048L60.648 10.047C61.316 8.554 62.798 7.594 64.434 7.594L70.258 7.594C71.893 7.594 73.376 8.554 74.044 10.047L88.816 43.048C89.55 44.688 87.994 46.422 86.284 45.869L78.063 43.209C77.784 43.119 77.556 42.914 77.436 42.646L69.239 24.334C68.507 22.698 66.185 22.698 65.453 24.334L57.255 42.646C57.136 42.914 56.908 43.119 56.628 43.209ZM54.737 51.511C53.792 51.195 53.792 49.859 54.737 49.543L63.03 46.774C63.3 46.684 63.521 46.487 63.641 46.229L66.407 40.304C66.779 39.506 67.914 39.506 68.286 40.304L71.052 46.229C71.172 46.487 71.393 46.684 71.663 46.774L79.956 49.543C80.901 49.859 80.901 51.195 79.956 51.511L71.663 54.28C71.393 54.37 71.172 54.567 71.052 54.825L68.286 60.75C67.914 61.548 66.779 61.548 66.407 60.75L63.641 54.825C63.521 54.567 63.3 54.37 63.03 54.28L54.737 51.511Z"
+          fillRule="evenodd"
+          fill="white"
+          transform="matrix(0.707 0.707 -0.707 0.707 18.752 -30.083)"
+        />
+      </g>
+    </svg>
+  );
+}
+
+function OpentrekSidebar() {
+  return (
+    <Sidebar collapsible="none">
+      <SidebarHeader className="px-4 pt-4 pb-0">
+        <div className="flex items-center justify-between">
+          <div className="flex h-8 items-center gap-2">
+            <OpLogo className="size-6 shrink-0 text-foreground" />
+            <span className="text-base font-black leading-tight tracking-tight">
+              OPENTREK
+              {/* eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- demo badge 10px 无对应 token */}
+              <span className="ml-1 text-[10px] font-bold tracking-wider text-muted-foreground">
+                DEV
+              </span>
+            </span>
+          </div>
+          <button
+            type="button"
+            className="flex size-7 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground"
+          >
+            <PanelLeftClose className="size-4" />
+          </button>
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent className="pt-4">
+        {/* 空间选择器 */}
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="产品研发空间">
+                  <Bot className="size-4" />
+                  <span>产品研发空间</span>
+                  <ChevronDown className="ml-auto size-3.5 text-muted-foreground" />
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* 概览 */}
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="概览">
+                  <LayoutGrid className="size-4" />
+                  <span>概览</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* 开发 */}
+        <SidebarGroup>
+          <SidebarGroupLabel>开发</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="智能体">
+                  <Bot className="size-4" />
+                  <span>智能体</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="工具箱">
+                  <Wrench className="size-4" />
+                  <span>工具箱</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Skills Hub / 记忆体 / 知识库 / 提示词 */}
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="Skills Hub">
+                  <Sparkles className="size-4" />
+                  <span>Skills Hub</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="记忆体">
+                  <Brain className="size-4" />
+                  <span>记忆体</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="知识库">
+                  <BookOpen className="size-4" />
+                  <span>知识库</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="提示词">
+                  <MessageSquare className="size-4" />
+                  <span>提示词</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* 评测 */}
+        <SidebarGroup>
+          <SidebarGroupLabel>评测</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="评测集">
+                  <FileText className="size-4" />
+                  <span>评测集</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton isActive tooltip="评估器">
+                  <FlaskConical className="size-4" />
+                  <span>评估器</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="评测任务">
+                  <ListChecks className="size-4" />
+                  <span>评测任务</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* 观测 */}
+        <SidebarGroup>
+          <SidebarGroupLabel>观测</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="指标监控">
+                  <BarChart3 className="size-4" />
+                  <span>指标监控</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="Trace追踪">
+                  <Activity className="size-4" />
+                  <span>Trace追踪</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="操作记录">
+                  <ClipboardList className="size-4" />
+                  <span>操作记录</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter>
+        <div className="flex items-center gap-2 px-3 py-3">
+          <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold">
+            食
+          </div>
+          <span className="truncate text-sm font-medium">少食</span>
+          <button
+            type="button"
+            className="ml-auto flex size-7 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground"
+          >
+            <MoreVertical className="size-4" />
+          </button>
+        </div>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
+
+// ─── Page Story ────────────────────────────────────────────────────────────
+
+/** 评估器 - OT-STD-2 简单标准列表 */
+export const Default: Story = {
+  render: () => (
+    <TooltipProvider>
+      <PageShell
+        sidebar={<OpentrekSidebar />}
+        background="muted"
+        // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- Storybook 固定高度展示
+        className="h-[900px]"
+      >
+        <div className="flex-1 p-5">
+          <Card>
+            <CardContent className="flex flex-col gap-4">
+              {/* PageHeader */}
+              <PageHeader>
+                <PageHeaderHeading>
+                  <span className="text-lg font-medium">评估器</span>
+                </PageHeaderHeading>
+              </PageHeader>
+
+              {/* ActionToolbar: F 变体 (Primary + Search) */}
+              <div className="flex items-center gap-2">
+                <Button variant="default" color="primary">
+                  <Plus className="size-4" />
+                  新建评估器
+                </Button>
+                <div className="relative ml-5">
+                  <Input
+                    placeholder="搜索评估器名称..."
+                    className="w-56 pr-8"
+                  />
+                  <Search className="absolute right-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+                </div>
+              </div>
+
+              {/* DataTable */}
+              <DataTable<Evaluator>
+                columns={columns}
+                dataSource={evaluators}
+                rowKey="id"
+                pagination={{
+                  current: 1,
+                  pageSize: 10,
+                  total: 24,
+                }}
+              />
+            </CardContent>
+          </Card>
+        </div>
+      </PageShell>
+    </TooltipProvider>
+  ),
+};

package/src/hooks/use-radix-popper-guard.ts

@@ -0,0 +1,51 @@
+'use client';
+
+import * as React from 'react';
+
+/**
+ * 防止 Radix DismissableLayer 级联关闭 hook。
+ *
+ * 当弹窗 / 抽屉内嵌 Select / Popover / HoverCard 等 Radix Popper 浮层时，
+ * 点击 Popper 外部（但仍在 Dialog / Sheet 内）会被 DismissableLayer 误判为"外部点击"，
+ * 从而连带关闭宿主弹窗。本 hook 通过 pointerdown 捕获阶段嗅探 `[data-radix-popper-content-wrapper]`
+ * 是否存在来决定是否阻止级联关闭。
+ *
+ * 用法：
+ * ```tsx
+ * const { onPointerDownOutside } = useRadixPopperGuard();
+ * <DialogContent onPointerDownOutside={onPointerDownOutside} />
+ * ```
+ *
+ * 逻辑：
+ * - pointerdown 捕获阶段：记录当前 DOM 是否存在 `[data-radix-popper-content-wrapper]`（即有 Popper 处于打开状态）
+ * - onPointerDownOutside 回调：若上一次捕获阶段标记为"有 Popper 打开"，则 `e.preventDefault()` 阻止 DismissableLayer 触发 dismiss
+ * - 若无 Popper（正常遮罩点击），不阻止，DismissableLayer 原生 dismiss 机制正常触发
+ */
+export function useRadixPopperGuard() {
+  const popperOpenRef = React.useRef(false);
+
+  React.useEffect(() => {
+    function handlePointerDown() {
+      popperOpenRef.current = !!document.querySelector(
+        '[data-radix-popper-content-wrapper]',
+      );
+    }
+
+    // 在捕获阶段侦听，确保在 Radix DismissableLayer 处理之前执行
+    document.addEventListener('pointerdown', handlePointerDown, true);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown, true);
+    };
+  }, []);
+
+  const onPointerDownOutside = React.useCallback(
+    (e: { preventDefault: () => void }) => {
+      if (popperOpenRef.current) {
+        e.preventDefault();
+      }
+    },
+    [],
+  );
+
+  return { onPointerDownOutside };
+}