@teamix-evo/ui 0.6.1 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamix-evo/ui",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Source-injected UI components for Teamix Evo (shadcn-based, antd capabilities)",
   "type": "module",
   "files": [
@@ -52,8 +52,8 @@
     "vite-tsconfig-paths": "^6.1.1",
     "zod": "^3",
     "@teamix-evo/eslint-config": "0.2.3",
-    "@teamix-evo/tokens": "^0.7.2",
-    "@teamix-evo/registry": "0.12.0"
+    "@teamix-evo/registry": "0.12.0",
+    "@teamix-evo/tokens": "^0.7.3"
   },
   "publishConfig": {
     "access": "public",

package/src/components/dialog/index.tsx

@@ -23,6 +23,7 @@ import * as React from 'react';
 import { Dialog as DialogPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
+import { useRadixPopperGuard } from '@/hooks/use-radix-popper-guard';
 import { XIcon } from 'lucide-react';
 
 export interface DialogProps
@@ -95,6 +96,7 @@ function DialogContent({
   children,
   size = 'sm',
   showCloseButton = true,
+  onPointerDownOutside,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   /** 内容区尺寸。 @default 'sm' */
@@ -102,12 +104,18 @@ function DialogContent({
   /** 是否显示右上角关闭按钮。 @default true */
   showCloseButton?: boolean;
 }) {
+  const guard = useRadixPopperGuard();
+
   return (
     <DialogPortal>
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
         data-size={size}
+        onPointerDownOutside={(e) => {
+          guard.onPointerDownOutside(e);
+          onPointerDownOutside?.(e);
+        }}
         className={cn(
           // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- mobile viewport needs calc(100% - 2rem) for safe inset; box-shadow drives via component-level token --dialog-shadow per ADR 0026.
           'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-md bg-popover text-sm text-popover-foreground shadow-[var(--dialog-shadow,0px_6px_24px_0px_rgba(0,0,0,0.1))] duration-100 outline-none data-[size=sm]:sm:max-w-md data-[size=md]:sm:max-w-xl data-[size=lg]:sm:max-w-3xl data-[size=xl]:sm:max-w-6xl data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
@@ -199,7 +207,8 @@ function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="dialog-footer"
       className={cn(
-        'flex flex-col-reverse gap-2 border-t border-transparent px-5 py-4 sm:flex-row sm:justify-end',
+        // eslint-disable-next-line teamix-evo/no-bare-border -- border-footer-separator 是 @theme 声明的语义 token，已加入 lint-core 白名单
+        'flex flex-col-reverse gap-2 border-t border-footer-separator px-5 py-4 sm:flex-row sm:justify-end',
         className,
       )}
       {...props}

package/src/components/sheet/index.tsx

@@ -25,6 +25,7 @@ import * as React from 'react';
 import { Dialog as SheetPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
+import { useRadixPopperGuard } from '@/hooks/use-radix-popper-guard';
 import { XIcon } from 'lucide-react';
 
 export interface SheetProps
@@ -104,6 +105,7 @@ function SheetContent({
   side = 'right',
   size = 'sm',
   showCloseButton = true,
+  onPointerDownOutside,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   /** 弹出方向。 @default 'right' */
@@ -113,6 +115,8 @@ function SheetContent({
   /** 是否显示右上角关闭按钮。 @default true */
   showCloseButton?: boolean;
 }) {
+  const guard = useRadixPopperGuard();
+
   return (
     <SheetPortal>
       <SheetOverlay />
@@ -120,6 +124,10 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         data-size={size}
+        onPointerDownOutside={(e) => {
+          guard.onPointerDownOutside(e);
+          onPointerDownOutside?.(e);
+        }}
         className={cn(
           // 基础布局：fixed 定位 + flex 列容器 + token 化阴影（抽屉与背景的边界由阴影表达，不画 border）
           // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- box-shadow 走 component-level token --drawer-shadow，按 ADR 0026 在源码内显式声明。
@@ -237,7 +245,8 @@ function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="sheet-footer"
       className={cn(
-        'flex flex-col gap-2 border-t border-transparent px-4 py-2.5 sm:flex-row sm:justify-start',
+        // eslint-disable-next-line teamix-evo/no-bare-border -- border-footer-separator 是 @theme 声明的语义 token，已加入 lint-core 白名单
+        'flex flex-col gap-2 border-t border-footer-separator px-4 py-2.5 sm:flex-row sm:justify-start',
         className,
       )}
       {...props}

package/src/components/tabs/index.tsx

@@ -269,7 +269,7 @@ const tabsTriggerVariants = cva(
   {
     variants: {
       variant: {
-        line: '-mb-px border-b-2 border-transparent text-muted-foreground data-[state=active]:border-primary data-[state=active]:text-foreground group-data-[orientation=vertical]/tabs:mb-0 group-data-[orientation=vertical]/tabs:-mr-px group-data-[orientation=vertical]/tabs:border-b-0 group-data-[orientation=vertical]/tabs:border-r-2 group-data-[orientation=vertical]/tabs:justify-start',
+        line: '-mb-px border-b-2 border-transparent text-muted-foreground data-[state=active]:border-tab-indicator data-[state=active]:text-foreground group-data-[orientation=vertical]/tabs:mb-0 group-data-[orientation=vertical]/tabs:-mr-px group-data-[orientation=vertical]/tabs:border-b-0 group-data-[orientation=vertical]/tabs:border-r-2 group-data-[orientation=vertical]/tabs:justify-start',
         capsule:
           'rounded-md text-muted-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
         // text 模式：trigger 间 ::after 竖线分隔（8px 高、1px 宽、垂直居中、border 色）

package/src/examples/built-in-assets/stories.tsx

@@ -0,0 +1,572 @@
+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 { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/tabs';
+import { Input } from '@/components/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/select';
+import { Avatar, AvatarFallback } from '@/components/avatar';
+import { Badge } from '@/components/badge';
+import { Tag } from '@/components/tag';
+import { TooltipProvider } from '@/components/tooltip';
+import {
+  Search,
+  Bot,
+  BookOpen,
+  Sparkles,
+  ShieldCheck,
+  FlaskConical,
+  BarChart3,
+  MoreVertical,
+  PanelLeftClose,
+  LayoutGrid,
+  Wrench,
+  Brain,
+  MessageSquare,
+  FileText,
+  ListChecks,
+  Activity,
+  ClipboardList,
+  ChevronDown,
+} from 'lucide-react';
+
+const meta: Meta = {
+  title: '页面示例 · Page Examples/内置资产 卡片列表',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export default meta;
+
+type Story = StoryObj;
+
+// ─── Mock Data ─────────────────────────────────────────────────────────────
+
+const builtInSkills = [
+  {
+    id: '1',
+    name: '网络搜索',
+    subName: 'web-search',
+    version: 'v1.0.0',
+    description: 'Web search and content extraction with Tavily and Exa ...',
+    category: 'AI能力',
+    categoryPalette: 'blue' as const,
+    security: 'safe' as const,
+    installStatus: 'installed' as const,
+    createdAt: '2026-04-16',
+    avatarColor: 'bg-primary',
+  },
+  {
+    id: '2',
+    name: '曙光环境综合运维工具集',
+    subName: 'sgenv',
+    version: 'v1.0.0',
+    description: '统一CLI入口，覆盖环境代理查询、数据库信息、DockerID...',
+    category: '数据处理',
+    categoryPalette: 'green' as const,
+    security: 'safe' as const,
+    installStatus: 'installed' as const,
+    createdAt: '2026-04-16',
+    avatarColor: 'bg-success',
+  },
+  {
+    id: '3',
+    name: '经验总结与改进',
+    subName: 'self-improvement',
+    version: 'v1.0.0',
+    description: 'Captures learnings, errors, and corrections to enable c...',
+    category: '自动化',
+    categoryPalette: 'orange' as const,
+    security: 'safe' as const,
+    installStatus: 'has-update' as const,
+    createdAt: '2026-04-16',
+    avatarColor: 'bg-data-4',
+  },
+  {
+    id: '4',
+    name: '天气查询',
+    subName: 'weather',
+    version: 'v1.0.0',
+    description: 'Get current weather and forecasts (no API required).',
+    category: 'AI能力',
+    categoryPalette: 'blue' as const,
+    security: 'safe' as const,
+    installStatus: 'not-installed' as const,
+    createdAt: '2026-04-16',
+    avatarColor: 'bg-primary',
+  },
+  {
+    id: '5',
+    name: 'A/B test方案制定',
+    subName: 'ab-test-setup',
+    version: 'v1.0.0',
+    description: 'When the user wants to plan, design, or implement an ...',
+    category: '数据处理',
+    categoryPalette: 'green' as const,
+    security: 'safe' as const,
+    installStatus: 'not-installed' as const,
+    createdAt: '2026-04-16',
+    avatarColor: 'bg-warning',
+  },
+  {
+    id: '6',
+    name: '代码质控',
+    subName: 'code-quality-checker',
+    version: 'v1.0.0',
+    description: '代码质量检测技能，在代码更新完成后自动进行多维度质量...',
+    category: '数据处理',
+    categoryPalette: 'green' as const,
+    security: 'safe' as const,
+    installStatus: 'not-installed' as const,
+    createdAt: '2026-04-16',
+    avatarColor: 'bg-brand-3',
+  },
+  {
+    id: '7',
+    name: '分析追踪',
+    subName: 'analytics-tracking',
+    version: 'v1.0.0',
+    description: 'When the user wants to set up, improve, or audit analyt...',
+    category: 'AI能力',
+    categoryPalette: 'blue' as const,
+    security: 'safe' as const,
+    installStatus: 'not-installed' as const,
+    createdAt: '2026-04-16',
+    avatarColor: 'bg-success',
+  },
+  {
+    id: '8',
+    name: '头脑风暴',
+    subName: 'brainstorming',
+    version: 'v1.0.0',
+    description: 'You MUST use this before any creative work - creating ...',
+    category: 'AI能力',
+    categoryPalette: 'blue' as const,
+    security: 'safe' as const,
+    installStatus: 'not-installed' as const,
+    createdAt: '2026-04-16',
+    avatarColor: 'bg-warning',
+  },
+  {
+    id: '9',
+    name: '深度研究',
+    subName: 'deep-research',
+    version: 'v1.0.0',
+    description: '综合多来源信息并引用的深度研究助手，适用于进行深...',
+    category: 'AI能力',
+    categoryPalette: 'blue' as const,
+    security: 'safe' as const,
+    installStatus: 'not-installed' as const,
+    createdAt: '2026-04-16',
+    avatarColor: 'bg-data-4',
+  },
+];
+
+// ─── Sidebar ───────────────────────────────────────────────────────────────
+
+/**
+ * OP Logo — inline SVG（来源：_assets/OP_LOGO.svg）
+ * 外层 rect 使用 fill="currentColor" 适配主题，内层图案使用 fill="white"
+ */
+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-built-in-assets">
+          <rect x="0" y="0" width="84" height="84" rx="18" />
+        </clipPath>
+      </defs>
+      <g clipPath="url(#opai-logo-clip-built-in-assets)">
+        <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 isActive 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 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>
+  );
+}
+
+// ─── ItemCard (Labeled Fields 布局，匹配目标设计) ─────────────────────────
+
+function ItemCard({ skill }: { skill: (typeof builtInSkills)[number] }) {
+  return (
+    <Card className="group/item relative cursor-pointer transition-shadow hover:shadow-md">
+      <CardContent className="flex flex-col gap-2.5">
+        {/* Title Row: Avatar + Name + SubName */}
+        <div className="flex items-center gap-3">
+          <Avatar className="size-10 shrink-0 rounded-lg">
+            <AvatarFallback
+              className={`rounded-lg text-base font-semibold text-white ${skill.avatarColor}`}
+            >
+              {skill.name.charAt(0)}
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0 flex-1">
+            <div className="truncate text-sm font-semibold text-foreground">
+              {skill.name}
+            </div>
+            <div className="truncate text-xs text-muted-foreground">
+              {skill.subName}
+            </div>
+          </div>
+        </div>
+
+        {/* 描述 */}
+        <div className="text-xs text-muted-foreground">
+          <span className="text-foreground/70">描述：</span>
+          <span className="line-clamp-1">{skill.description}</span>
+        </div>
+
+        {/* 版本 */}
+        <div className="text-xs text-muted-foreground">
+          <span className="text-foreground/70">版本：</span>
+          {skill.version}
+        </div>
+
+        {/* 安全扫描 */}
+        <div className="flex items-center gap-1 text-xs">
+          <span className="text-foreground/70">安全扫描：</span>
+          {skill.security === 'safe' ? (
+            <Badge
+              variant="outline"
+              className="h-5 gap-0.5 px-1.5 text-success"
+            >
+              <ShieldCheck className="size-3" />
+              安全
+            </Badge>
+          ) : (
+            <Badge
+              variant="outline"
+              className="h-5 gap-0.5 px-1.5 text-destructive"
+            >
+              <ShieldCheck className="size-3" />
+              有风险
+            </Badge>
+          )}
+        </div>
+
+        {/* 安装状态 */}
+        <div className="flex items-center gap-1 text-xs">
+          <span className="text-foreground/70">安装状态：</span>
+          {skill.installStatus === 'installed' && (
+            <Tag variant="status" status="success">
+              已安装
+            </Tag>
+          )}
+          {skill.installStatus === 'not-installed' && (
+            <span className="text-muted-foreground">未安装</span>
+          )}
+          {skill.installStatus === 'has-update' && (
+            <Tag variant="status" status="warning">
+              有更新
+            </Tag>
+          )}
+        </div>
+
+        {/* 标签分类 */}
+        <div className="flex items-center gap-1 text-xs">
+          <span className="text-foreground/70">标签分类：</span>
+          <Tag palette={skill.categoryPalette}>{skill.category}</Tag>
+        </div>
+
+        {/* 创建时间 */}
+        <div className="text-xs text-muted-foreground">
+          <span>📅 创建时间：{skill.createdAt}</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ─── Page Story ────────────────────────────────────────────────────────────
+
+/** Skills Hub - OT-CL-1 Tab导航卡片列表（内置Skills Tab） */
+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">Skills Hub</span>
+                </PageHeaderHeading>
+              </PageHeader>
+
+              {/* Tabs */}
+              <Tabs defaultValue="builtin" className="flex-col">
+                <TabsList variant="line">
+                  <TabsTrigger value="workspace">空间Skills</TabsTrigger>
+                  <TabsTrigger value="shared">共享Skills</TabsTrigger>
+                  <TabsTrigger value="builtin">内置Skills</TabsTrigger>
+                </TabsList>
+
+                <TabsContent
+                  value="builtin"
+                  className="flex flex-col gap-4 pt-4"
+                >
+                  {/* ActionToolbar */}
+                  <div className="flex items-center gap-2">
+                    <div className="relative">
+                      <Input
+                        placeholder="搜索Skills名称..."
+                        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 className="ml-auto">
+                      <Select defaultValue="all">
+                        <SelectTrigger className="w-24">
+                          <SelectValue placeholder="全部" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="all">全部</SelectItem>
+                          <SelectItem value="ai">AI能力</SelectItem>
+                          <SelectItem value="data">数据处理</SelectItem>
+                          <SelectItem value="auto">自动化</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  {/* CardGrid - 3列 */}
+                  <div className="grid grid-cols-3 gap-4">
+                    {builtInSkills.map((skill) => (
+                      <ItemCard key={skill.id} skill={skill} />
+                    ))}
+                  </div>
+                </TabsContent>
+
+                <TabsContent value="workspace" className="pt-4">
+                  <p className="text-sm text-muted-foreground">
+                    空间Skills内容区（卡片列表）
+                  </p>
+                </TabsContent>
+
+                <TabsContent value="shared" className="pt-4">
+                  <p className="text-sm text-muted-foreground">
+                    共享Skills内容区（卡片列表）
+                  </p>
+                </TabsContent>
+              </Tabs>
+            </CardContent>
+          </Card>
+        </div>
+      </PageShell>
+    </TooltipProvider>
+  ),
+};

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 };
+}