@teamix-evo/ui 0.7.0 → 0.7.2

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

@@ -1,572 +0,0 @@
-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>
-  ),
-};