@zjlab-fe/data-hub-ui 0.32.5 → 0.32.6

package/COMPONENTS_SKILL.md

@@ -1,17 +1,19 @@
 # @zjlab-fe/data-hub-ui 组件库 Skill 参考文档
 
-> **版本**：0.14.2 | **包名**：`@zjlab-fe/data-hub-ui` | **自动生成，请勿手动编辑**
+> **版本**：0.26.4 | **包名**：`@zjlab-fe/data-hub-ui` | **自动生成，请勿手动编辑**
 >
 > 本文档包含所有公开组件的 API 参考与使用说明，供 AI 编码助手作为 skill 参考。
 > 安装：`npm install @zjlab-fe/data-hub-ui`
 
 ## 目录
 
+- [SDK-modal](#SDK-modal)
 - [apply-perm-modal（申请权限弹窗）](#apply-perm-modal)
 - [auth-tag（权限标签）](#auth-tag)
 - [bench-card（卡片）](#bench-card)
 - [confirm-again（二次确认）](#confirm-again)
 - [copy（复制）](#copy)
+- [corpus-card](#corpus-card)
 - [feature-card（功能点卡片）](#feature-card)
 - [file-preview（文件预览）](#file-preview)
 - [file-uploader（文件上传）](#file-uploader)
@@ -20,16 +22,203 @@
 - [header（头部导航）](#header)
 - [input-tag（标签/关键字输入）](#input-tag)
 - [menu（菜单）](#menu)
+- [model-card](#model-card)
+- [notion-editor](#notion-editor)
 - [operator-chain（卡片式操作链）](#operator-chain)
 - [permission-editor（权限编辑器）](#permission-editor)
 - [popover-select（带描述浮层下拉框）](#popover-select)
 - [radio-card（单选卡片）](#radio-card)
 - [section-heading（区块标题）](#section-heading)
 - [status-tag（状态标签）](#status-tag)
+- [tag-group-filter（标签组过滤器）](#tag-group-filter)
+- [tag-view（标签视图）](#tag-view)
 - [tip-tap（富文本编辑器）](#tip-tap)
 
 ---
 
+## SDK-modal
+
+**导入方式：**
+
+```ts
+import { SDKModal } from '@zjlab-fe/data-hub-ui';
+```
+
+用于展示 SDK 使用代码的弹窗组件。支持静态传入代码和异步加载两种方式，同时支持组件式和命令式两种调用形式。
+
+### 代码演示
+
+**示例代码（index.tsx）：**
+
+```tsx
+import { useState } from 'react';
+import { Button, Space } from 'antd';
+import SDKModal from '@/components/SDK-modal';
+
+const MOCK_SDK_CODE = `import mktable
+
+client = mktable.Client(
+    host="https://api.example.com",
+    token="your-access-token"
+)
+
+dataset = client.dataset.get("ds-xxxxxxxx")
+df = dataset.to_dataframe()`;
+
+function mockLoadSDK(): Promise<string> {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(MOCK_SDK_CODE), 1200);
+  });
+}
+
+function mockLoadSDKError(): Promise<string> {
+  return new Promise((_, reject) => {
+    setTimeout(() => reject(new Error('加载失败')), 1200);
+  });
+}
+
+export default function Demo() {
+  const [open, setOpen] = useState(false);
+  const [openAsync, setOpenAsync] = useState(false);
+  const [openAsyncError, setOpenAsyncError] = useState(false);
+
+  const handleShowImperative = () => {
+    SDKModal.show({
+      title: '命令式 · 静态 SDK 代码',
+      SDKCode: MOCK_SDK_CODE,
+      documentLink: 'https://example.com/docs/sdk',
+      onClose: () => console.log('命令式弹窗已关闭'),
+    });
+  };
+
+  const handleShowImperativeAsync = () => {
+    SDKModal.show({
+      title: '命令式 · 异步加载 SDK 代码',
+      loadSDK: mockLoadSDK,
+      documentLink: 'https://example.com/docs/sdk',
+      locale: 'en',
+      onClose: () => console.log('命令式异步弹窗已关闭'),
+    });
+  };
+
+  return (
+    <div style={{ padding: 24 }}>
+      # SDK Modal 使用示例
+
+      ### 1. 组件式 · 静态 SDK 代码
+      <p>直接传入 SDKCode，弹窗打开即展示，无需异步加载。</p>
+      <Button onClick={() => setOpen(true)}>打开（静态）</Button>
+      <SDKModal
+        open={open}
+        title="组件式 · Python SDK 下载代码"
+        SDKCode={MOCK_SDK_CODE}
+        documentLink="https://example.com/docs/sdk"
+        onClose={() => setOpen(false)}
+      />
+
+      ### 2. 组件式 · 异步加载 SDK 代码
+      <p>通过 loadSDK 异步获取代码，弹窗打开时展示 Loading 状态。</p>
+      <Button onClick={() => setOpenAsync(true)}>打开（异步）</Button>
+      <SDKModal
+        open={openAsync}
+        title="组件式 · 异步加载 SDK"
+        loadSDK={mockLoadSDK}
+        documentLink="https://example.com/docs/sdk"
+        locale="zh"
+        onClose={() => setOpenAsync(false)}
+      />
+
+      ### 3. 组件式 · 异步加载 SDK 代码（失败）
+      <p>通过 loadSDK 异步获取代码，加载失败时展示错误信息。</p>
+      <Button onClick={() => setOpenAsyncError(true)}>打开（异步）</Button>
+      <SDKModal
+        open={openAsyncError}
+        title="组件式 · 异步加载 SDK"
+        loadSDK={mockLoadSDKError}
+        documentLink="https://example.com/docs/sdk"
+        locale="zh"
+        onClose={() => setOpenAsyncError(false)}
+      />
+
+      ### 3. 命令式 · 静态 SDK 代码
+      <p>调用 SDKModal.show()，无需在 JSX 中声明，适合在事件回调中使用。</p>
+      <Space>
+        <Button onClick={handleShowImperative}>打开（静态）</Button>
+        <Button onClick={handleShowImperativeAsync}>打开（异步 + 英文 locale）</Button>
+      </Space>
+    </div>
+  );
+}
+```
+### 调用方式
+
+#### 组件式
+
+```tsx
+import SDKModal from '@/components/SDK-modal';
+
+<SDKModal
+  open={open}
+  title="Python SDK 下载代码"
+  SDKCode={code}
+  documentLink="https://example.com/docs/sdk"
+  onClose={() => setOpen(false)}
+/>
+```
+
+#### 命令式
+
+```tsx
+import SDKModal from '@/components/SDK-modal';
+
+SDKModal.show({
+  title: 'Python SDK 下载代码',
+  loadSDK: () => fetchSDKCode(),
+  documentLink: 'https://example.com/docs/sdk',
+  onClose: () => console.log('closed'),
+});
+```
+
+### API
+
+#### SDKModalProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| open | 弹窗是否可见 | `boolean` | — |
+| title | 弹窗标题 | `string` | — |
+| onClose | 关闭回调 | `() => void` | — |
+| SDKCode | 静态 SDK 代码字符串，与 `loadSDK` 二选一 | `string` | — |
+| loadSDK | 异步获取 SDK 代码的函数，与 `SDKCode` 二选一 | `() => Promise<string>` | — |
+| modalConfig | 覆盖默认 Modal 配置，与 antd ModalProps 一致 | `ModalProps` | — |
+| documentLink | 文档链接地址，有值时在代码块下方展示链接 | `string` | — |
+| locale | 语言，`'zh'` 中文 / `'en'` 英文 | `'zh' \| 'en'` | `'zh'` |
+
+#### SDKModalConfig
+
+`SDKModalConfig = Omit<SDKModalProps, 'open'>`，用于命令式调用 `SDKModal.show(config)`。
+
+#### 内置语言包
+
+| locale 值 | 语言 | confirm | documentPrefix | documentLinkText |
+|-----------|------|---------|----------------|-----------------|
+| `'zh'`（默认）| 中文 | 知道了 | 详情请查看 | 使用文档 |
+| `'en'` | 英文 | Got it | For more details, see | Documentation |
+
+```tsx
+SDKModal.show({
+  title: 'Python SDK',
+  SDKCode: code,
+  locale: 'en',
+  onClose: () => {},
+});
+```
+
+### 务必遵守以下事项，禁止逾越
+1. `SDKCode` 和 `loadSDK`选择一项传入， 禁止同时传入。同时传入时，仅生效 `SDKCode`。
+
+---
+
 ## apply-perm-modal（申请权限弹窗）
 
 **导入方式：**
@@ -299,6 +488,243 @@ copy函数入参如下：
 
 ---
 
+## corpus-card
+
+**导入方式：**
+
+```ts
+import { CorpusCard } from '@zjlab-fe/data-hub-ui';
+```
+
+基于 React + Ant Design 实现的语料卡片组件，支持卡片点击激活、详情按钮、标签展示等功能，适用于语料库、模板列表等场景。
+
+### 代码演示
+
+**示例代码（index.tsx）：**
+
+```tsx
+import CorpusCard from '@/components/corpus-card';
+import mockdata from './mockdata';
+import { useState } from 'react';
+
+export default function Demo() {
+  const [activeCardId, setActiveCardId] = useState<number | null>(null);
+
+  const onDetailClick = (id: number) => {
+    console.log('详情点击', id);
+  };
+
+  const onCardClick = (id: number) => {
+    console.log('卡片点击', id);
+    setActiveCardId(id);
+  };
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
+      {mockdata.data.totalList.map((item) => (
+        <CorpusCard
+          card={item}
+          key={item.id}
+          isActive={activeCardId === item.id}
+          onClick={onDetailClick}
+          onCardClick={onCardClick}
+          width={480}
+        />
+      ))}
+    </div>
+  );
+}
+```
+### API
+
+#### CorpusCard
+
+| 参数        | 说明         | 类型                         | 默认值     | 必须 |
+| --------- | ---------- | -------------------------- | ------- | -- |
+| card       | 卡片数据       | `ProcessTemplateListItem`  | -       | 是  |
+| isActive   | 卡片是否激活     | `boolean`                  | `false` | 否  |
+| width      | 卡片宽度       | `number`                   | `375`   | 否  |
+| onClick    | 详情按钮点击回调  | `(id: number) => void`     | -       | 否  |
+| onCardClick | 卡片点击回调     | `(id: number) => void`     | -       | 否  |
+
+### 接口定义
+
+#### ProcessTemplateListItem 接口
+
+卡片数据接口（前端只关注这几个就行）
+
+| 属性                | 说明           | 类型                  | 必须 |
+| ----------------- | ------------ | ------------------- | -- |
+| id                | 卡片唯一标识       | `number`            | 是  |
+| name              | 卡片标题         | `string`            | 是  |
+| description       | 卡片描述         | `string`            | 是  |
+| labels            | 标签列表         | `ProcessTemplateLabel[]` | 是  |
+| labelTypeColorMap | 标签类型颜色映射     | `LabelTypeColor[]`  | 否  |
+
+#### ProcessTemplateLabel 接口
+
+标签数据接口
+
+| 属性    | 说明    | 类型      | 必须 |
+| ----- | ---- | ------- | -- |
+| id    | 标签ID  | `number` | 是  |
+| name  | 标签名称  | `string` | 是  |
+| type  | 标签类型  | `number` | 是  |
+
+#### LabelTypeColor 接口
+
+标签类型颜色配置接口
+
+| 属性          | 说明    | 类型      | 必须 |
+| ----------- | ---- | ------- | -- |
+| type        | 标签类型  | `number` | 是  |
+| bgColor     | 背景颜色  | `string` | 是  |
+| borderColor | 边框颜色  | `string` | 是  |
+| textColor   | 文字颜色  | `string` | 是  |
+
+### 使用说明
+
+#### 1. 基础用法
+
+```tsx
+import CorpusCard from '@/components/corpus-card';
+
+const cardData = {
+  id: 1,
+  name: '语料模板1',
+  description: '这是一个示例语料模板描述',
+  labels: [
+    { id: 1, name: '数据处理', type: 1 },
+    { id: 2, name: '文本分析', type: 2 },
+  ],
+};
+
+const App = () => {
+  const handleDetailClick = (id: number) => {
+    console.log('详情点击', id);
+  };
+
+  const handleCardClick = (id: number) => {
+    console.log('卡片点击', id);
+  };
+
+  return (
+    <CorpusCard
+      card={cardData}
+      onClick={handleDetailClick}
+      onCardClick={handleCardClick}
+    />
+  );
+};
+```
+
+#### 2. 卡片激活状态
+
+```tsx
+import { useState } from 'react';
+import CorpusCard from '@/components/corpus-card';
+
+const App = () => {
+  const [activeCardId, setActiveCardId] = useState<number | null>(null);
+
+  const handleCardClick = (id: number) => {
+    setActiveCardId(id);
+  };
+
+  return (
+    <div>
+      {cards.map((card) => (
+        <CorpusCard
+          key={card.id}
+          card={card}
+          isActive={activeCardId === card.id}
+          onCardClick={handleCardClick}
+        />
+      ))}
+    </div>
+  );
+};
+```
+
+#### 3. 自定义卡片宽度
+
+```tsx
+import CorpusCard from '@/components/corpus-card';
+
+const App = () => {
+  return (
+    <CorpusCard
+      card={cardData}
+      width={400}
+      onClick={handleDetailClick}
+      onCardClick={handleCardClick}
+    />
+  );
+};
+```
+
+#### 4. 网格布局（每行平铺三个卡片）
+
+```tsx
+import CorpusCard from '@/components/corpus-card';
+
+const App = () => {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
+      {cards.map((card) => (
+        <CorpusCard
+          key={card.id}
+          card={card}
+          onClick={handleDetailClick}
+          onCardClick={handleCardClick}
+        />
+      ))}
+    </div>
+  );
+};
+```
+
+#### 5. 带标签颜色映射
+
+```tsx
+import CorpusCard from '@/components/corpus-card';
+
+const cardData = {
+  id: 1,
+  name: '语料模板1',
+  description: '这是一个示例语料模板描述',
+  labels: [
+    { id: 1, name: '数据处理', type: 1 },
+    { id: 2, name: '文本分析', type: 2 },
+  ],
+  labelTypeColorMap: [
+    { type: 1, bgColor: '#e6f7ff', borderColor: '#91d5ff', textColor: '#1890ff' },
+    { type: 2, bgColor: '#f6ffed', borderColor: '#b7eb8f', textColor: '#52c41a' },
+  ],
+};
+
+const App = () => {
+  return (
+    <CorpusCard
+      card={cardData}
+      onClick={handleDetailClick}
+      onCardClick={handleCardClick}
+    />
+  );
+};
+```
+
+### 注意事项
+
+1. 卡片默认宽度为 375px，可通过 `width` 属性自定义
+2. 激活状态下卡片会有蓝色边框和背景色渐变效果
+3. 详情按钮点击不会触发卡片点击事件（已阻止事件冒泡）
+4. 标签颜色可通过 `labelTypeColorMap` 自定义，未配置则使用默认样式
+5. 卡片标题和描述支持文本溢出省略显示
+6. 建议使用 CSS Grid 布局实现卡片网格排列，如每行平铺三个卡片
+
+---
+
 ## feature-card（功能点卡片）
 
 **导入方式：**
@@ -674,7 +1100,7 @@ export default function Demo() {
     'xlsx/csv': 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/test/method_Caledonian.csv',
     pdf: 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/test/1.pdf',
     image: 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/test/figure9.png',
-    markdown: 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/test/b1047.md',
+    markdown: 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/test/formula.md',
     txt: 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/test/test.txt',
     json: 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/test/test.json',
     jsonl: 'https://haina-datahub.zero2x.org/ossRoute/frontend/test/ocr_test.jsonl',
@@ -852,6 +1278,9 @@ export default function Demo() {
             openInModal={false}
             modalProps={{ show, onCancel: () => setShow(false) }}
             filePath={fileMap['pdf']}
+            httpHeaders={{
+              Authorization: 'Bearer 123456',
+            }}
           />
         </div>
       ),
@@ -865,6 +1294,9 @@ export default function Demo() {
             openInModal={false}
             modalProps={{ show, onCancel: () => setShow(false) }}
             filePath={fileMap['image']}
+            httpHeaders={{
+              Authorization: 'Bearer 123456',
+            }}
           />
         </div>
       ),
@@ -2273,7 +2705,7 @@ export default function Demo() {
 import { Menu } from '@zjlab-fe/data-hub-ui';
 ```
 
-符合团队设计规范的menu菜单
+基于 React + Ant Design 实现的后台系统左侧可折叠侧边栏菜单组件，支持路由菜单、外链菜单、自动路由匹配选中、折叠/展开切换、折叠态 Tooltip 提示，适配企业级后台布局规范。
 
 ### 代码演示
 
@@ -2283,64 +2715,646 @@ import { Menu } from '@zjlab-fe/data-hub-ui';
 import { useState } from 'react';
 import { DatabaseOutlined, TagsOutlined, FilterOutlined } from '@ant-design/icons';
 import Menu from '../index';
-const menus = [
-  {
-    label: '数据增强',
-    key: 'data-enhance',
-    icon: <DatabaseOutlined></DatabaseOutlined>,
-  },
+import { MenuItem } from '../index';
+
+import { Layout, theme } from 'antd';
+const { Content } = Layout;
+
+const menus: MenuItem[] = [
   {
     label: '数据管理',
     key: 'data-management',
-    icon: <TagsOutlined />,
+    icon: <DatabaseOutlined />,
+    children: [
+      {
+        label: '数据集',
+        key: 'data-management-dataset',
+        icon: <DatabaseOutlined />,
+      },
+    ],
+  },
+  {
+    label: '数据加工',
+    key: 'data-processing',
+    children: [
+      {
+        label: '语料生产服务',
+        key: 'data-processing-corpus',
+        icon: <TagsOutlined />,
+      },
+      {
+        label: '语料生产服务',
+        key: '_blank',
+        type: 'link',
+        icon: <FilterOutlined />,
+      },
+      {
+        label: '可视化工作流',
+        key: 'data-processing-workflow',
+        icon: <FilterOutlined />,
+      },
+    ],
+  },
+  {
+    label: '特色工具',
+    key: 'feature-tools',
+    children: [
+      {
+        label: '网页语料生产',
+        key: 'feature-tools-web',
+        icon: <TagsOutlined />,
+      },
+      {
+        label: '文档语料生产',
+        key: 'feature-tools-doc',
+        icon: <TagsOutlined />,
+      },
+    ],
+  },
+  {
+    label: '数据标注',
+    key: 'data-labeling',
+    children: [
+      {
+        label: '文档标注',
+        key: 'data-labeling-doc',
+        icon: <TagsOutlined />,
+      },
+    ],
+  },
+  {
+    label: '模型服务',
+    key: 'model-service',
+    children: [
+      {
+        label: '模型训练',
+        key: 'model-service-train',
+        icon: <FilterOutlined />,
+      },
+      {
+        label: '模型部署',
+        key: 'model-service-deploy',
+        icon: <FilterOutlined />,
+      },
+      {
+        label: '模型管理',
+        key: 'model-service-manage',
+        icon: <FilterOutlined />,
+      },
+    ],
   },
-  { label: '模型管理', key: 'model-management', icon: <FilterOutlined /> },
 ];
-
 export default function Demo() {
   const [collapsed, setCollapsed] = useState(false);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>(['data-management-dataset']);
+
+  const {
+    token: { colorBgContainer, borderRadiusLG },
+  } = theme.useToken();
+
+  const handleMenuClick = (item: MenuItem) => {
+    console.log('当前点击的菜单', item);
+    const key = item.key;
+    setSelectedKeys([key]);
+  };
+
+  const handleCollapse = (collapsed: boolean) => {
+    setCollapsed(collapsed);
+    console.log('当前菜单是否收起', collapsed);
+  };
 
   return (
-    <>
-      <Menu title="数据增强" menus={menus} collapsed={collapsed} onCollapse={setCollapsed}></Menu>
-    </>
+    <Layout style={{ minHeight: '100vh' }}>
+      <Menu
+        menus={menus}
+        onClick={handleMenuClick}
+        onCollapse={handleCollapse}
+        collapsed={collapsed}
+        selectedKeys={selectedKeys}
+      />
+      <Layout>
+        <Content
+          style={{
+            margin: '24px 16px',
+            padding: 24,
+            minHeight: 280,
+            background: colorBgContainer,
+            borderRadius: borderRadiusLG,
+          }}
+        >
+          <p>当前选中的菜单: {selectedKeys || '无'}</p>
+          <p>菜单状态: {collapsed ? '收起' : '展开'}</p>
+          <p>右侧内容区域，会根据菜单的展开/收起自动调整宽度</p>
+        </Content>
+      </Layout>
+    </Layout>
   );
 }
 ```
 ### API
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 | 必须 |
-| --- | --- | --- | --- | --- | --- |
-| menus    | 菜单项目 | 
-| title    | 菜单标题 | 
-| collapsed    | 是否折叠 | `boolean` | - | - | |
-| onCollapse | 折叠的回调 | `(e: React.MouseEvent<HTMLButtonElement>) => void;` | - | - | |
+#### Menu
 
----
+| 参数          | 说明                    | 类型                              | 默认值     | 必须 |
+| ----------- | --------------------- | ------------------------------- | ------- | -- |
+| menus       | 菜单配置数据，支持一级分组 + 二级子菜单 | `MenuItem[]`                    | -       | 是  |
+| collapsed   | 侧边栏是否折叠（受控属性）         | `boolean`                       | `false` | 否  |
+| onCollapse  | 折叠状态切换的回调函数           | `(collapsed: boolean) => void`  | -       | 否  |
+| onClick     | 菜单点击时的回调函数            | `(item: MenuItem) => void`      | -       | 否  |
+| onSelect    | 菜单选中项变化的回调函数          | `(key: string \| null) => void` | -       | 否  |
 
-## operator-chain（卡片式操作链）
+### 接口定义
 
-**导入方式：**
+#### MenuType 类型
 
-```ts
-import { OperatorChain } from '@zjlab-fe/data-hub-ui';
-```
-```ts
-// 类型导入
-import type { OperatorChainProps, SingleCardItem, OperatorChainRef } from '@zjlab-fe/data-hub-ui';
-```
+菜单类型枚举
 
-用于展示和管理算子流程的链式组件
-支持数据导入导出节点
-支持是否可编辑模式
-符合团队样式规范
-
-### 代码演示
-
-**示例代码（index.tsx）：**
+| 取值        | 说明             |
+| --------- | -------------- |
+| `default` | 默认路由菜单（点击跳转路由） |
+| `link`    | 外链菜单（点击不跳转路由）  |
+
+#### MenuItem 接口
+
+菜单项配置接口
+
+| 属性         | 说明            | 类型                | 必须             |
+| ---------- | ------------- | ----------------- | -------------- |
+| label      | 菜单显示文本        | `string`          | 是              |
+| key        | 菜单唯一标识/路由跳转路径 | `string`          | 是              |
+| type       | 菜单类型          | `MenuType`        | 否（默认`default`） |
+| icon       | 菜单默认图标        | `React.ReactNode` | 否              |
+| activeicon | 菜单激活态图标（预留）   | `React.ReactNode` | 否              |
+| children   | 二级子菜单列表       | `MenuItem[]`      | 否              |
+
+### 使用说明
+
+#### 1. 基础用法（路由菜单）
 
 ```tsx
-import { Button, Flex, message } from 'antd';
+import Menu from '@/components/menu';
+import { HomeOutlined, SettingOutlined } from '@ant-design/icons';
+
+// 重要：组件仅生效于菜单第二层级，一级菜单仅作为分组，不支持点击、激活等交互
+const menus = [
+  {
+    label: '数据管理',
+    children: [
+      { label: '用户管理', key: '/data/user', icon: <SettingOutlined /> },
+      { label: '角色管理', key: '/data/role', icon: <SettingOutlined /> },
+    ],
+  },
+  {
+    label: '系统管理',
+    children: [
+      { label: '用户管理', key: '/system/user', icon: <SettingOutlined /> },
+      { label: '角色管理', key: '/system/role', icon: <SettingOutlined /> },
+    ],
+  },
+];
+
+const App = () => {
+  return <Menu menus={menus} />;
+};
+```
+
+#### 2. 受控折叠用法
+
+```tsx
+import { useState } from 'react';
+import Menu from '@/components/menu';
+
+const App = () => {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <Menu
+      menus={menus}
+      collapsed={collapsed}
+      onCollapse={(val) => setCollapsed(val)}
+    />
+  );
+};
+```
+
+#### 3. 外链菜单用法
+
+```tsx
+const menus = [
+  {
+    label: '帮助中心',
+    // 外链菜单必须配置 type="link"，否则会触发路由跳转
+    key: 'https://www.xxx.com/help',
+    type: 'link', 
+  },
+];
+
+const handleMenuClick = (item) => {
+  if (item.type === 'link') {
+    window.open(item.key, '_blank');
+  }
+};
+
+// 外链菜单无激活状态，需通过 onClick 回调自行处理跳转逻辑
+<Menu menus={menus} onClick={handleMenuClick} />;
+```
+
+#### 4. 完整回调用法
+
+```tsx
+const App = () => {
+  const handleMenuClick = (item) => {
+    console.log('点击菜单：', item);
+  };
+
+  const handleSelect = (key) => {
+    console.log('选中菜单key：', key);
+  };
+
+  return (
+    <Menu
+      menus={menus}
+      onClick={handleMenuClick}
+      onSelect={handleSelect}
+    />
+  );
+};
+```
+
+### 注意事项
+
+1. 组件仅对菜单第二层级生效，一级菜单仅作为分组展示，配置 key、icon、路由等属性均无效
+2. 外链菜单必须显式配置 type='link'，配置后点击不会触发内部路由跳转
+3. 外链菜单无激活高亮状态，仅作为普通点击项使用
+4. 组件需配合 Ant Design Layout 布局使用，默认支持响应式布局，适配不同屏幕尺寸
+
+---
+
+## model-card
+
+**导入方式：**
+
+```ts
+import { ModelCard } from '@zjlab-fe/data-hub-ui';
+```
+```ts
+// 类型导入
+import type { ModelCardProps } from '@zjlab-fe/data-hub-ui';
+```
+
+用于展示模型信息，包括模型名称、提供方、描述、标签、支持训练、支持部署、支持评测、图标、评分、操作按钮等。
+
+### 代码演示
+
+#### 示例
+
+展示模型信息
+
+**示例代码（index.tsx）：**
+
+```tsx
+import ModelCard from '../index';
+
+const cardList = [
+  {
+    id: 1,
+    name: '模型1',
+    provider: '模型提供方1',
+    description: '这是一个模型1的描述',
+    tags: ['标签1', '标签2'],
+    supportTraining: true,
+    supportDeployment: true,
+    supportEvaluation: true,
+    image: 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/modelicon/default.png',
+    stars: 4,
+    onTrain: () => {},
+    onDeploy: () => {},
+    onEvaluate: () => {},
+    onExperience: () => {},
+  },
+  {
+    id: 2,
+    name: '模型2',
+    provider: '模型提供方2',
+    description: '这是一个模型2的描述',
+    tags: ['标签3', '标签4'],
+    supportTraining: true,
+    supportDeployment: true,
+    supportEvaluation: true,
+    image: 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/modelicon/default.png',
+    stars: 3,
+    onTrain: () => {},
+    onDeploy: () => {},
+    onEvaluate: () => {},
+    onExperience: () => {},
+  },
+];
+
+export default function Demo() {
+  return (
+    <div>
+      {cardList.map((item) => (
+        <ModelCard key={item.id} {...item} />
+      ))}
+    </div>
+  );
+}
+```
+### API
+
+| 参数 | 说明 | 类型 | 默认值 | 必须 |
+| --- | --- | --- | --- | --- |
+| `id` | number | 主键ID | 是 |
+| `name` | string | 模型名称 | 是 |
+| `provider` | string | 提供方 | 是 |
+| `description` | string | 模型描述（一句话） | 是 |
+| `tags` | string[] | 模型标签 | 是 |
+| `supportTraining` | Boolean | 是否支持模型训练 | 是 |
+| `supportDeployment` | Boolean | 是否支持模型部署 | 是 |
+| `supportEvaluation` | Boolean | 是否支持模型评测 | 是 |
+| `image` | string | 模型图标URL | 否 |
+| `stars` | number | 模型评分 | 是 |
+| `onTrain` | () => void | 模型训练操作回调 | 是 |
+| `onDeploy` | () => void | 模型部署操作回调 | 是 |
+| `onEvaluate` | () => void | 模型评测操作回调 | 是 |
+| `onExperience` | () => void | 模型体验操作回调 | 是 |
+
+---
+
+## notion-editor
+
+Notion 风格的富文本编辑器，基于 BlockNote 实现。支持标题、段落、图片、文件、表格、待办列表、代码块等多种内容类型，支持 Markdown/HTML 粘贴，适用于文档编辑、知识库内容录入等场景。
+
+### 代码演示
+
+#### 基础用法
+
+支持图片/文件上传、初始化内容、获取/重置内容
+
+**示例代码（index.tsx）：**
+
+```tsx
+import React, { useRef } from 'react';
+import NotionEditor, { NotionEditorHandle, Block, PartialBlock } from '../index';
+import axios from 'axios';
+import { Button, Flex } from 'antd';
+export default function NotionEditorDemo() {
+  const editorRef = useRef<NotionEditorHandle>(null);
+  const onFileUpload: (file: File) => Promise<string> = async (file) => {
+    // 1. 获取预签名URL
+    const { data } = await axios.get('/api/fes/docs/resource/getUploadUrl', {
+      params: { id: 'c7fe927b-0045-4b36-8b3e-e16259876e18', fileName: file.name },
+      headers: {
+        Authorization:
+          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGFpbXMiOnsiYWNjb3VudF90eXBlIjoiMSIsInVzZXJfaWQiOiIxODIxMDA0MTkyMzI4ODQ3MzYwIiwidXNlcl9uYW1lIjoid21zdGVzdDEiLCJhY2NvdW50X3N0YXR1cyI6IjAifSwiZXhwIjoxNzgxMTYxNjk0fQ.E7zDJ_piFjAHeCfyq9lkudHyoP6LFinYdsSCbAlJy2k',
+      },
+    });
+    const { uploadUrl, fileUrl } = data.data;
+
+    // 2. 上传
+    await axios.put(uploadUrl, file, {
+      headers: { 'Content-Type': file.type || 'application/octet-stream' },
+    });
+
+    return fileUrl;
+  };
+
+  const onImageUploadByUrl: (url: string) => Promise<string> = async (url) => {
+    const { data } = await axios.post(
+      '/api/fes/docs/resource/uploadImageByUrl',
+      {
+        imageUrl: url,
+        id: 'c7fe927b-0045-4b36-8b3e-e16259876e18',
+      },
+      {
+        headers: {
+          Authorization:
+            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjbGFpbXMiOnsiYWNjb3VudF90eXBlIjoiMSIsInVzZXJfaWQiOiIxODIxMDA0MTkyMzI4ODQ3MzYwIiwidXNlcl9uYW1lIjoid21zdGVzdDEiLCJhY2NvdW50X3N0YXR1cyI6IjAifSwiZXhwIjoxNzgxMTYxNjk0fQ.E7zDJ_piFjAHeCfyq9lkudHyoP6LFinYdsSCbAlJy2k',
+        },
+      },
+    );
+    return data?.data?.url || data?.url || (typeof data?.data === 'string' ? data.data : '');
+  };
+
+  const onChange = (content: Block[]) => {
+    console.log('+++ content:', content);
+  };
+
+  const initContent: PartialBlock[] = [
+    {
+      id: '088a4484-f40b-4c17-92b2-b7c7e89d8d06',
+      type: 'heading',
+      props: {
+        backgroundColor: 'default',
+        textColor: 'default',
+        textAlignment: 'left',
+        level: 1,
+        isToggleable: false,
+      },
+      content: [
+        {
+          type: 'text',
+          text: '这是标题',
+          styles: {},
+        },
+      ],
+      children: [],
+    },
+    {
+      id: '90dd94e1-a217-4dd3-9406-d225e3ab3a38',
+      type: 'paragraph',
+      props: {
+        backgroundColor: 'default',
+        textColor: 'default',
+        textAlignment: 'left',
+      },
+      content: [
+        {
+          type: 'text',
+          text: '这是内容',
+          styles: {},
+        },
+      ],
+      children: [],
+    },
+    {
+      id: '0e537fae-38d8-4d47-b645-bcdea812f04a',
+      type: 'image',
+      props: {
+        textAlignment: 'left',
+        backgroundColor: 'default',
+        name: 'Snipaste_2025-12-11_10-50-04.png',
+        url: 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/public/attachments/test/0d4169ec-390e-482f-b367-75abdb1ad310.png',
+        caption: '',
+        showPreview: true,
+      },
+      children: [],
+    },
+    {
+      id: 'd029cee5-443a-4422-b3b8-f7fef48f8aa4',
+      type: 'file',
+      props: {
+        name: '立体化学-0.pdf',
+        url: 'https://haina-datahub.zero2x.org/ossRoute/frontend/resources/public/attachments/test/11a32231-887e-4610-91dc-83bcd78224b0.pdf',
+        caption: '',
+        backgroundColor: 'default',
+      },
+      children: [],
+    },
+    {
+      id: 'e0b7af21-7bc8-4e04-8959-c217673e1b95',
+      type: 'paragraph',
+      props: {
+        backgroundColor: 'default',
+        textColor: 'default',
+        textAlignment: 'left',
+      },
+      content: [],
+      children: [],
+    },
+  ];
+  return (
+    <div style={{ height: '800px', overflow: 'auto' }}>
+      <Flex gap={24} style={{ padding: 24 }}>
+        <Button
+          type="primary"
+          onClick={() => {
+            console.log(editorRef.current?.getContent());
+          }}
+        >
+          获取内容(查看控制台)
+        </Button>
+        <Button
+          type="primary"
+          onClick={() => {
+            console.log(
+              editorRef.current?.setContent([
+                {
+                  id: '088a4484-f40b-4c17-92b2-b7c7e89d8d06',
+                  type: 'heading',
+                  props: {
+                    backgroundColor: 'default',
+                    textColor: 'default',
+                    textAlignment: 'left',
+                    level: 1,
+                    isToggleable: false,
+                  },
+                  content: [
+                    {
+                      type: 'text',
+                      text: '这是重置后的标题',
+                      styles: {},
+                    },
+                  ],
+                  children: [],
+                },
+                {
+                  id: '90dd94e1-a217-4dd3-9406-d225e3ab3a38',
+                  type: 'paragraph',
+                  props: {
+                    backgroundColor: 'default',
+                    textColor: 'default',
+                    textAlignment: 'left',
+                  },
+                  content: [
+                    {
+                      type: 'text',
+                      text: '这是重置后的内容',
+                      styles: {},
+                    },
+                  ],
+                  children: [],
+                },
+                {
+                  id: 'd029cee5-443a-4422-b3b8-f7fef48f8aa4',
+                  type: 'paragraph',
+                  props: {
+                    backgroundColor: 'default',
+                    textColor: 'default',
+                    textAlignment: 'left',
+                  },
+                  content: [],
+                  children: [],
+                },
+              ]),
+            );
+          }}
+        >
+          重置内容
+        </Button>
+      </Flex>
+
+      <NotionEditor
+        ref={editorRef}
+        docId="test"
+        onImageUpload={onFileUpload}
+        onImageUploadByUrl={onImageUploadByUrl}
+        onFileUpload={onFileUpload}
+        initContent={initContent}
+        editable
+        onChange={onChange}
+      />
+    </div>
+  );
+}
+```
+### API
+
+#### NotionEditorHandle
+
+| 方法 | 说明 | 类型 |
+| --- | --- | --- |
+| getContent | 获取编辑器当前所有 block 内容 | `() => Block[]` |
+| setContent | 设置编辑器内容（替换全部） | `(content: Block[]) => void` |
+| focus | 聚焦编辑器 | `() => void` |
+| isEmpty | 编辑器是否为空 | `() => boolean` |
+
+#### NotionEditorProps
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 | 必须 |
+| --- | --- | --- | --- | --- | --- |
+| initContent | 初始内容 | `PartialBlock[]` | - | | |
+| editable | 是否可编辑 | `boolean` | `false` | | |
+| className | 自定义类名 | `string` | `''` | | |
+| docId | 粘贴 copy JSON 时用于替换附件 URL 中文档 ID 的值 | `string` | - | | |
+| onChange | 编辑器内容变化时的回调 | `(blocks: Block[]) => void` | - | | |
+| onImageUpload | 图片上传处理函数，返回图片访问 URL | `(file: File) => Promise<string>` | - | | |
+| onImageUploadByUrl | 通过 URL 上传图片的处理函数（用于解析 Markdown 中的图片链接） | `(url: string) => Promise<string>` | - | | |
+| onFileUpload | 文件上传处理函数，返回文件访问 URL | `(file: File) => Promise<string>` | - | | |
+
+#### 注意
+
+- `onImageUpload` 和 `onFileUpload` 未传入时，上传的文件会使用 `URL.createObjectURL` 生成本地临时 URL
+- 编辑器内置中文语言包，粘贴时自动识别 Markdown 或 HTML 格式
+- 自定义文件块渲染，点击文件块可在新窗口打开文件
+- 支持表格单元格拆分（`splitCells: true`）
+
+---
+
+## operator-chain（卡片式操作链）
+
+**导入方式：**
+
+```ts
+import { OperatorChain } from '@zjlab-fe/data-hub-ui';
+```
+```ts
+// 类型导入
+import type { OperatorChainProps, SingleCardItem, OperatorChainRef } from '@zjlab-fe/data-hub-ui';
+```
+
+用于展示和管理算子流程的链式组件
+支持数据导入导出节点
+支持是否可编辑模式
+符合团队样式规范
+不支持样式定制
+
+### 代码演示
+
+**示例代码（index.tsx）：**
+
+```tsx
+import { Button, Flex, message } from 'antd';
 import OperatorChain, { OperatorChainRef, SingleCardItem } from '../index';
 import { useRef } from 'react';
 
@@ -2362,37 +3376,146 @@ const cards = [
     description: 'Description 3',
   },
 ];
-
 const memu = [
+  {
+    id: '1',
+    title: 'Operator 1',
+    description: 'Description 1',
+    type: '数据清洗算子',
+    typeId: 1,
+  },
+  {
+    id: '2',
+    title: 'Operator 2',
+    description: 'Description 2',
+    type: '特征提取算子',
+    typeId: 2,
+  },
+  {
+    id: '3',
+    title: 'Operator 3',
+    description: 'Description 3',
+    type: '数据聚合算子',
+    typeId: 3,
+  },
   {
     id: '4',
     title: 'Operator 4',
     description: 'Description 4',
+    type: '数据过滤算子',
+    typeId: 4,
   },
   {
     id: '5',
     title: 'Operator 5',
     description: 'Description 5',
+    type: '格式转换算子',
+    typeId: 5,
   },
   {
     id: '6',
     title: 'Operator 6',
     description: 'Description 6',
+    type: '数据清洗算子',
+    typeId: 1,
   },
   {
     id: '7',
     title: 'Operator 7',
     description: 'Description 7',
+    type: '特征提取算子',
+    typeId: 2,
   },
   {
     id: '8',
     title: 'Operator 8',
     description: 'Description 8',
+    type: '数据聚合算子',
+    typeId: 3,
   },
   {
     id: '9',
     title: 'Operator 9',
     description: 'Description 9',
+    type: '数据过滤算子',
+    typeId: 4,
+  },
+  {
+    id: '10',
+    title: 'Operator 10',
+    description: 'Description 10',
+    type: '格式转换算子',
+    typeId: 5,
+  },
+  {
+    id: '11',
+    title: 'Operator 11',
+    description: 'Description 11',
+    type: '数据清洗算子',
+    typeId: 1,
+  },
+  {
+    id: '12',
+    title: 'Operator 12',
+    description: 'Description 12',
+    type: '特征提取算子',
+    typeId: 2,
+  },
+  {
+    id: '13',
+    title: 'Operator 13',
+    description: 'Description 13',
+    type: '数据聚合算子',
+    typeId: 3,
+  },
+  {
+    id: '14',
+    title: 'Operator 14',
+    description: 'Description 14',
+    type: '数据过滤算子',
+    typeId: 4,
+  },
+  {
+    id: '15',
+    title: 'Operator 15',
+    description: 'Description 15',
+    type: '格式转换算子',
+    typeId: 5,
+  },
+  {
+    id: '16',
+    title: 'Operator 16',
+    description: 'Description 16',
+    type: '数据清洗算子',
+    typeId: 1,
+  },
+  {
+    id: '17',
+    title: 'Operator 17',
+    description: 'Description 17',
+    type: '特征提取算子',
+    typeId: 2,
+  },
+  {
+    id: '18',
+    title: 'Operator 18',
+    description: 'Description 18',
+    type: '数据聚合算子',
+    typeId: 3,
+  },
+  {
+    id: '19',
+    title: 'Operator 19',
+    description: 'Description 19',
+    type: '数据过滤算子',
+    typeId: 4,
+  },
+  {
+    id: '20',
+    title: 'Operator 20',
+    description: 'Description 20',
+    type: '格式转换算子',
+    typeId: 5,
   },
 ];
 
@@ -2427,10 +3550,6 @@ export default function Demo() {
             onActive={handleActive}
             isEdit={true}
             ref={chainRef} // 绑定ref
-            dropdownStyle={{
-              width: '250px',
-              maxHeight: '250px',
-            }}
           />
 
           <Flex align="center" gap={5}>
@@ -2459,7 +3578,7 @@ export default function Demo() {
 
         <div>
           ### 禁止编辑模式
-          <OperatorChain defaultValues={cards} menu={memu} isEdit={false} width="240px" />
+          <OperatorChain defaultValues={cards} menu={memu} isEdit={false} />
         </div>
       </div>
     </div>
@@ -2479,8 +3598,7 @@ export default function Demo() {
 | onClick | 点击卡片时的回调 | `(id: string) => void` | - | 否 |
 | onChange | 卡片数据变化时的回调 | `(values: SingleCardItem[]) => void` | - | 否 |
 | onActive | 激活卡片变化时的回调 | `(id: string \| null) => void` | - | 否 |
-| width | 组件宽度 | `string` | `'240px'` | 否 |
-| dropdownStyle | 下拉菜单样式 | `{ width?: string \| number; maxHeight?: string \| number; overflowY?: React.CSSProperties['overflowY']; }` | `{ width: '200px', maxHeight: '200px', overflowY: 'auto' }` | 否 |
+
 
 ### 接口定义
 
@@ -2491,6 +3609,8 @@ export default function Demo() {
 | id | 卡片唯一标识 | `string` | 是 |
 | title | 卡片标题 | `string` | 否 |
 | description | 卡片描述 | `string` | 否 |
+| type | 算子类型 | `string` | 否 |
+| typeId | 算子类型id | `number` | 否 |
 
 #### OperatorChainRef 接口
 
@@ -2507,8 +3627,9 @@ export default function Demo() {
 import { OperatorChain } from '@/components/operator-chain';
 
 const defaultValues = [
-  { id: '1', title: '数据清洗', description: '清洗原始数据' },
-  { id: '2', title: '数据转换', description: '转换数据格式' },
+  { id: '1', title: '数据清洗', description: '清洗原始数据' ,type: '数据处理', typeId: 1},
+  { id: '2', title: '数据转换', description: '转换数据格式' ,type: '数据转换', typeId: 2},
+  { id: '3', title: '数据聚合', description: '聚合统计数据' ,type: '数据聚合', typeId: 3},
 ];
 
 <OperatorChain 
@@ -2562,9 +3683,11 @@ const handleGetData = () => {
 import { OperatorChain } from '@/components/operator-chain';
 
 const menu = [
-  { id: 'filter', title: '数据过滤', description: '过滤符合条件的数据' },
-  { id: 'transform', title: '数据转换', description: '转换数据格式' },
-  { id: 'aggregate', title: '数据聚合', description: '聚合统计数据' },
+  { id: 'filter1', title: '数据过滤1', description: '过滤符合条件的数据', type: '数据处理', typeId: 1 },
+  { id: 'filter2', title: '数据过滤2', description: '过滤符合条件的数据', type: '数据处理', typeId: 1 },
+  { id: 'transform1', title: '数据转换1', description: '转换数据格式', type: '数据转换', typeId: 2 },
+  { id: 'transform2', title: '数据转换2', description: '转换数据格式', type: '数据转换', typeId: 2 },
+  { id: 'aggregate1', title: '数据聚合1', description: '聚合统计数据', type: '数据聚合', typeId: 3 },
 ];
 
 <OperatorChain 
@@ -2579,12 +3702,34 @@ const menu = [
 />
 ```
 
+#### 5. 使用带有类型信息的菜单数据
+
+```tsx
+import { OperatorChain } from '@/components/operator-chain';
+
+const menu = [
+  { id: 'filter1', title: '数据过滤1', description: '过滤符合条件的数据', type: '数据处理', typeId: 1 },
+  { id: 'filter2', title: '数据过滤2', description: '过滤符合条件的数据', type: '数据处理', typeId: 1 },
+  { id: 'transform1', title: '数据转换1', description: '转换数据格式', type: '数据转换', typeId: 2 },
+  { id: 'transform2', title: '数据转换2', description: '转换数据格式', type: '数据转换', typeId: 2 },
+  { id: 'aggregate1', title: '数据聚合1', description: '聚合统计数据', type: '数据聚合', typeId: 3 },
+];
+
+<OperatorChain 
+  isEdit={true}
+  menu={menu}
+  defaultValues={[{ id: '1', title: '初始算子', description: '默认算子' }]}
+/>
+```
+
 ### 注意事项
 
 1. `dataIO` 模式下，组件会自动在首尾添加 `IMPORT` 和 `EXPORT` 节点
 2. `default` 模式下，不会自动添加导入导出节点
 3. 编辑模式下需要传入 `menu` 属性才能使用添加功能
-4. 非编辑模式下，添加按钮和删除按钮不会显示
+4. 非编辑模式下，添加按钮和删除按钮不会显示
+5. 当 `menu` 数据中包含 `type` 和 `typeId` 字段时，下拉菜单会显示类型筛选功能
+6. 下拉菜单支持按算子类型和标题进行搜索过滤
 
 ---
 
@@ -3630,24 +4775,663 @@ export default function Demo() {
 import { StatusTag } from '@zjlab-fe/data-hub-ui';
 ```
 
-> 该组件暂无 README 文档，以下为 demo 示例代码，可参考用法。
+状态标签组件，用于展示运行、成功、失败等状态信息。支持四种视觉样式，覆盖表格、表单、卡片、标题栏等常见使用场景。
 
-### 示例代码（index.tsx）
+### 何时使用
+
+- 需要在列表、表格中展示任务或数据状态
+- 需要在表单、详情页中以标签形式展示状态
+- 需要在卡片、面板中展示轻量状态标识
+- 需要在标题栏中展示带圆点的状态标识
+
+### 样式变体
+
+`variant` 按标签自身的视觉属性命名，而非使用场景：
+
+| variant | 说明 | 典型场景 |
+| --- | --- | --- |
+| `filled` | 浅色填充底，无边框 | 卡片、面板 |
+| `bordered` | 带边框的标签 | 表单页、详情页 |
+| `dot` | 圆点 + 文字，无背景 | 表格列 |
+| `dotFilled` | 圆点 + 浅色填充底 + 描边，中性文字色 | 标题栏 |
+
+### 状态类型
+
+| type | 说明 |
+| --- | --- |
+| `running` | 进行中 |
+| `success` | 成功 / 完成 |
+| `failed` | 失败 |
+| `stopped` | 已终止 / 已停止 |
+| `waiting` | 等待中 / 排队中，视觉与 `stopped` 一致 |
+| `warning` | 警告 / 冲突 |
+
+### 代码演示
+
+**示例代码（index.tsx）：**
 
 ```tsx
 import StatusTag from '@/components/status-tag';
+
+const statusList = [
+  { type: 'running' as const, label: '过程中' },
+  { type: 'success' as const, label: '完成' },
+  { type: 'failed' as const, label: '失败' },
+  { type: 'stopped' as const, label: '已终止' },
+  { type: 'waiting' as const, label: '等待中' },
+  { type: 'warning' as const, label: '冲突' },
+];
+
+const variantList = [
+  { variant: 'dot' as const, title: '点状（表格中使用）' },
+  { variant: 'bordered' as const, title: '带边框（表单页使用）' },
+  { variant: 'filled' as const, title: '填充底（卡片中使用）' },
+  { variant: 'dotFilled' as const, title: '圆点填充底（标题栏使用）' },
+];
+
 export default function Demo() {
   return (
-    <>
-      <StatusTag type="running">进行状态</StatusTag>
-      <StatusTag type="failed">失败状态</StatusTag>
-      <StatusTag type="success">成功状态</StatusTag>
-      <StatusTag type="stopped">停止状态</StatusTag>
-      <StatusTag type="pending">等待状态</StatusTag>
-    </>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, padding: 24 }}>
+      {variantList.map(({ variant, title }) => (
+        <section key={variant}>
+          #### {title}
+          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            {statusList.map(({ type, label }) => (
+              <StatusTag key={`${variant}-${type}`} type={type} variant={variant}>
+                {label}
+              </StatusTag>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
   );
 }
 ```
+### API
+
+#### StatusTag
+
+| 参数 | 说明 | 类型 | 默认值 | 必须 |
+| --- | --- | --- | --- | --- |
+| type | 状态类型 | `'running' \| 'success' \| 'failed' \| 'stopped' \| 'waiting' \| 'warning'` | `'running'` | 否 |
+| variant | 视觉样式 | `'filled' \| 'bordered' \| 'dot' \| 'dotFilled'` | `'filled'` | 否 |
+| className | 自定义类名 | `string` | - | 否 |
+| children | 标签文案 | `React.ReactNode` | - | 否 |
+
+### 使用示例
+
+```tsx
+import { StatusTag } from '@zjlab-fe/data-hub-ui';
+
+// 填充底（默认）
+<StatusTag type="running">运行中</StatusTag>
+<StatusTag type="success">运行成功</StatusTag>
+<StatusTag type="failed">运行失败</StatusTag>
+<StatusTag type="stopped">已终止</StatusTag>
+<StatusTag type="waiting">等待中</StatusTag>
+<StatusTag type="warning">冲突</StatusTag>
+
+// 点状，适合表格列
+<StatusTag type="success" variant="dot">完成</StatusTag>
+<StatusTag type="failed" variant="dot">失败</StatusTag>
+
+// 带边框，适合表单页
+<StatusTag type="running" variant="bordered">过程中</StatusTag>
+<StatusTag type="warning" variant="bordered">冲突</StatusTag>
+
+// 圆点填充底，适合标题栏
+<StatusTag type="running" variant="dotFilled">处理中</StatusTag>
+<StatusTag type="waiting" variant="dotFilled">排队中</StatusTag>
+```
+
+### 注意事项
+
+1. **文案自定义**：状态文案通过 `children` 传入，组件不内置文案映射，便于适配不同业务语义（如「运行中」/「过程中」）。
+2. **样式预设**：颜色、背景、边框等样式由 `type` + `variant` 组合决定，无需手动传色值。
+3. **默认样式**：未传 `variant` 时默认为 `filled`，与卡片场景的设计稿一致。
+4. **waiting 与 stopped**：两种状态语义不同，但视觉样式保持一致。
+5. **dotFilled 文字色**：标题栏样式下文字固定为中性色，状态差异体现在圆点和底色上。
+
+---
+
+## tag-group-filter（标签组过滤器）
+
+**导入方式：**
+
+```ts
+import { TagGroupFilter } from '@zjlab-fe/data-hub-ui';
+```
+
+标签分组筛选组件，支持多组标签的分类筛选和数据体量范围筛选。
+
+#### 特性
+
+- **分组展示**：支持多个标签组的折叠/展开
+- **多选筛选**：每组标签支持多选，独立管理选中状态
+- **数据体量筛选**：内置数据大小范围筛选器（KB/MB/GB/TB）
+- **智能布局**：集成 TagView 组件，自动处理标签溢出
+- **清空功能**：支持快速清空单组或全部选中项
+- **响应式折叠**：记住各组折叠状态，自动展开所有组
+
+### 代码演示
+
+**示例代码（index.tsx）：**
+
+```tsx
+import React, { useState } from 'react';
+import TagGroupFilter from '@/components/tag-group-filter';
+import { Card } from '@/demo/shared';
+
+export default function Demo() {
+  // 基础标签分组数据
+  const [tagSelected1, setTagSelected1] = useState<Record<string, string[]>>({
+    category: [],
+    type: [],
+  });
+
+  const basicTagGroupDatas = [
+    {
+      key: 'category',
+      title: '分类',
+      children: [
+        {
+          children: [
+            { value: 'ai', name: '人工智能' },
+            { value: 'ml', name: '机器学习' },
+            { value: 'dl', name: '深度学习' },
+            { value: 'nlp', name: '自然语言处理' },
+            { value: 'cv', name: '计算机视觉' },
+            { value: 'dm', name: '数据挖掘' },
+          ],
+        },
+      ],
+    },
+    {
+      key: 'type',
+      title: '类型',
+      children: [
+        {
+          children: [
+            { value: 'image', name: '图像' },
+            { value: 'text', name: '文本' },
+            { value: 'audio', name: '音频' },
+            { value: 'video', name: '视频' },
+            { value: 'structured', name: '结构化数据' },
+          ],
+        },
+      ],
+    },
+  ];
+
+  // 带子标题的标签分组数据
+  const [tagSelected2, setTagSelected2] = useState<Record<string, string[]>>({
+    domain: [],
+    industry: [],
+  });
+
+  const subTitleTagGroupDatas = [
+    {
+      key: 'domain',
+      title: '技术领域',
+      children: [
+        {
+          subTitle: '热门领域',
+          children: [
+            { value: 'llm', name: '大语言模型' },
+            { value: 'aigc', name: 'AIGC' },
+            { value: 'multimodal', name: '多模态' },
+          ],
+        },
+        {
+          subTitle: '传统领域',
+          children: [
+            { value: 'search', name: '搜索引擎' },
+            { value: 'recommendation', name: '推荐系统' },
+            { value: 'ads', name: '广告投放' },
+          ],
+        },
+      ],
+    },
+    {
+      key: 'industry',
+      title: '行业应用',
+      children: [
+        {
+          children: [
+            { value: 'finance', name: '金融' },
+            { value: 'healthcare', name: '医疗' },
+            { value: 'education', name: '教育' },
+            { value: 'retail', name: '零售' },
+            { value: 'manufacturing', name: '制造' },
+          ],
+        },
+      ],
+    },
+  ];
+
+  // 带数据体量筛选
+  const [tagSelected3, setTagSelected3] = useState<Record<string, string[]>>({
+    source: [],
+  });
+
+  const [dataSizeValue, setDataSizeValue] = useState<string[]>(['', '']);
+
+  const dataSizeTagGroupDatas = [
+    {
+      key: 'source',
+      title: '数据来源',
+      children: [
+        {
+          children: [
+            { value: 'public', name: '公开数据集' },
+            { value: 'private', name: '私有数据' },
+            { value: 'synthetic', name: '合成数据' },
+            { value: 'user-generated', name: '用户生成内容' },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div style={{ padding: 24, display: 'grid', gap: 24, maxWidth: 1200, margin: '0 auto' }}>
+      {/* 基础用法 */}
+      <Card title="基础用法 - Basic Usage">
+        <p style={{ marginBottom: 16, color: '#666' }}>展示多个标签分组，支持折叠/展开和多选</p>
+        <div style={{ marginBottom: 12, padding: 12, background: '#f5f5f5', borderRadius: 4 }}>
+          <strong>当前选中：</strong>
+          <pre style={{ margin: '8px 0 0', fontSize: 12 }}>{JSON.stringify(tagSelected1, null, 2)}</pre>
+        </div>
+        <div style={{ width: 350, border: '1px solid #e8e8e8', borderRadius: 4, padding: 12 }}>
+          <TagGroupFilter
+            tagGroupDatas={basicTagGroupDatas}
+            tagSelected={tagSelected1}
+            onTagChange={setTagSelected1}
+          />
+        </div>
+      </Card>
+
+      {/* 带子标题 */}
+      <Card title="带子标题 - With Subtitles">
+        <p style={{ marginBottom: 16, color: '#666' }}>每个分组可以包含多个子分组，用子标题区分</p>
+        <div style={{ marginBottom: 12, padding: 12, background: '#f5f5f5', borderRadius: 4 }}>
+          <strong>当前选中：</strong>
+          <pre style={{ margin: '8px 0 0', fontSize: 12 }}>{JSON.stringify(tagSelected2, null, 2)}</pre>
+        </div>
+        <div style={{ width: 350, border: '1px solid #e8e8e8', borderRadius: 4, padding: 12 }}>
+          <TagGroupFilter
+            tagGroupDatas={subTitleTagGroupDatas}
+            tagSelected={tagSelected2}
+            onTagChange={setTagSelected2}
+          />
+        </div>
+      </Card>
+
+      {/* 带数据体量筛选 */}
+      <Card title="带数据体量筛选 - With Data Size Filter">
+        <p style={{ marginBottom: 16, color: '#666' }}>启用数据体量范围筛选器，支持 KB/MB/GB/TB 单位</p>
+        <div style={{ marginBottom: 12, padding: 12, background: '#f5f5f5', borderRadius: 4 }}>
+          <strong>标签选中：</strong>
+          <pre style={{ margin: '8px 0 0', fontSize: 12 }}>{JSON.stringify(tagSelected3, null, 2)}</pre>
+          <strong style={{ marginTop: 8, display: 'block' }}>数据体量范围：</strong>
+          <span style={{ fontSize: 12 }}>
+            {dataSizeValue[0] || '最小值'} - {dataSizeValue[1] || '最大值'}
+          </span>
+        </div>
+        <div style={{ width: 350, border: '1px solid #e8e8e8', borderRadius: 4, padding: 12 }}>
+          <TagGroupFilter
+            tagGroupDatas={dataSizeTagGroupDatas}
+            tagSelected={tagSelected3}
+            onTagChange={setTagSelected3}
+            needDataSizeFilter={true}
+            dataSizeValue={dataSizeValue}
+            onDataSizeChange={setDataSizeValue}
+          />
+        </div>
+      </Card>
+
+      {/* 综合示例 */}
+      <Card title="综合示例 - Comprehensive Example">
+        <p style={{ marginBottom: 16, color: '#666' }}>结合多种功能的完整示例</p>
+        <div style={{ width: 350, border: '1px solid #e8e8e8', borderRadius: 4, padding: 12 }}>
+          <TagGroupFilter
+            tagGroupDatas={[
+              ...basicTagGroupDatas,
+              {
+                key: 'format',
+                title: '格式',
+                children: [
+                  {
+                    children: [
+                      { value: 'json', name: 'JSON' },
+                      { value: 'csv', name: 'CSV' },
+                      { value: 'parquet', name: 'Parquet' },
+                      { value: 'tfrecord', name: 'TFRecord' },
+                    ],
+                  },
+                ],
+              },
+            ]}
+            tagSelected={tagSelected1}
+            onTagChange={setTagSelected1}
+            needDataSizeFilter={true}
+            dataSizeValue={dataSizeValue}
+            onDataSizeChange={setDataSizeValue}
+          />
+        </div>
+      </Card>
+    </div>
+  );
+}
+```
+### API
+
+#### TagGroupFilter
+
+| 参数 | 说明 | 类型 | 默认值 | 必须 |
+| --- | --- | --- | --- | --- |
+| tagGroupDatas | 标签分组数据 | `ITagGroupDataItem[]` | - | 是 |
+| tagSelected | 已选中的标签（按组 key 索引） | `Record<string, string[]>` | - | 是 |
+| needDataSizeFilter | 是否显示数据体量筛选器 | `boolean` | `false` | 否 |
+| isEn | 是否为英文环境 | `boolean` | `false` | 否 |
+| dataSizeValue | 数据体量筛选值 `[min, max]` | `string[]` | - | 否 |
+| tagClassName | 自定义标签类名 | `{ default?: string; checked?: string }` | - | 否 |
+| onTagChange | 标签选中变化回调 | `(tagSelected: Record<string, string[]>) => void` | - | 是 |
+| onDataSizeChange | 数据体量筛选变化回调 | `(value: string[]) => void` | - | 否 |
+
+#### 数据结构
+
+##### ITagGroupDataItem
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| key | 分组的唯一标识 | `string` |
+| title | 分组标题 | `string` |
+| children | 标签列表项 | `ITagListItem[]` |
+
+##### ITagListItem
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| subTitle | 子标题（可选） | `string` |
+| children | 标签选项列表 | `{ value: string; name: string }[]` |
+
+#### 使用示例
+
+```tsx
+import TagGroupFilter from '@zjlab-fe/data-hub-ui/components/tag-group-filter';
+import { useState } from 'react';
+
+// 基础用法
+const [tagSelected, setTagSelected] = useState<Record<string, string[]>>({
+  category: [],
+  type: [],
+});
+
+const tagGroupDatas = [
+  {
+    key: 'category',
+    title: '分类',
+    children: [
+      {
+        children: [
+          { value: 'ai', name: '人工智能' },
+          { value: 'ml', name: '机器学习' },
+          { value: 'dl', name: '深度学习' },
+        ],
+      },
+    ],
+  },
+  {
+    key: 'type',
+    title: '类型',
+    children: [
+      {
+        children: [
+          { value: 'image', name: '图像' },
+          { value: 'text', name: '文本' },
+          { value: 'audio', name: '音频' },
+        ],
+      },
+    ],
+  },
+];
+
+<TagGroupFilter
+  tagGroupDatas={tagGroupDatas}
+  tagSelected={tagSelected}
+  onTagChange={setTagSelected}
+/>;
+
+// 带数据体量筛选
+const [dataSizeValue, setDataSizeValue] = useState<string[]>(['', '']);
+
+<TagGroupFilter
+  tagGroupDatas={tagGroupDatas}
+  tagSelected={tagSelected}
+  onTagChange={setTagSelected}
+  needDataSizeFilter={true}
+  dataSizeValue={dataSizeValue}
+  onDataSizeChange={setDataSizeValue}
+/>;
+
+// 带子标题的分组
+const tagGroupDatasWithSubTitle = [
+  {
+    key: 'domain',
+    title: '领域',
+    children: [
+      {
+        subTitle: '热门领域',
+        children: [
+          { value: 'cv', name: '计算机视觉' },
+          { value: 'nlp', name: '自然语言处理' },
+        ],
+      },
+      {
+        subTitle: '其他领域',
+        children: [
+          { value: 'speech', name: '语音识别' },
+          { value: 'robot', name: '机器人' },
+        ],
+      },
+    ],
+  },
+];
+```
+
+#### 注意事项
+
+1. **数据体量筛选位置**：当 `needDataSizeFilter` 为 true 时，数据体量筛选器会自动插入到第三个位置（索引 2）
+2. **选中状态管理**：`tagSelected` 是一个对象，key 为分组的 key，value 为该组选中的标签值数组
+3. **折叠状态**：组件会自动展开所有分组，用户可手动折叠/展开
+4. **清空功能**：点击分组标题旁的清空图标可清空该组所有选中项
+6. **数据体量格式**：`dataSizeValue` 数组格式为 `["{value}{unit}", "{value}{unit}"]`，如 `["100kb", "5gb"]`
+7. **单位转换**：数据体量筛选器内部会将所有值转换为 MB 进行比较，确保范围有效性
+
+---
+
+## tag-view（标签视图）
+
+**导入方式：**
+
+```ts
+import { TagView } from '@zjlab-fe/data-hub-ui';
+```
+
+智能标签展示组件，支持多选、溢出处理、高亮标记等功能。
+
+#### 特性
+
+- **智能溢出处理**：自动计算容器宽度，支持多行显示
+- **两种溢出模式**：Tooltip 提示模式或展开/收起模式
+- **支持选择**：可选中标签，支持自定义选中/未选中样式
+- **高亮标记**：支持 `<mark>` 标签高亮显示部分内容
+- **响应式**：使用 ResizeObserver 监听容器尺寸变化
+
+### 代码演示
+
+**示例代码（index.tsx）：**
+
+```tsx
+import React, { useState } from 'react';
+import TagView from '@/components/tag-view';
+import { Card, RadioGroup } from '@/demo/shared';
+
+export default function Demo() {
+  const [selected, setSelected] = useState<string[]>([]);
+  const [maxLine, setMaxLine] = useState<number>(1);
+
+  // 基础标签数据
+  const basicTags = [
+    { value: 'tag1', name: '人工智能' },
+    { value: 'tag2', name: '机器学习' },
+    { value: 'tag3', name: '深度学习' },
+    { value: 'tag4', name: '自然语言处理' },
+    { value: 'tag5', name: '计算机视觉' },
+    { value: 'tag6', name: '数据挖掘' },
+    { value: 'tag7', name: '大数据分析' },
+    { value: 'tag8', name: '云计算' },
+    { value: 'tag9', name: '边缘计算' },
+    { value: 'tag10', name: '物联网' },
+  ];
+
+  // 带高亮标记的标签数据
+  const highlightTags = [
+    { value: 'tag1', name: '<mark>AI</mark>助手' },
+    { value: 'tag2', name: '<mark>智能</mark>推荐' },
+    { value: 'tag3', name: '<mark>自动</mark>化测试' },
+    { value: 'tag4', name: '<mark>实时</mark>分析' },
+    { value: 'tag5', name: '<mark>分布式</mark>计算' },
+  ];
+
+  return (
+    <div style={{ padding: 24, display: 'grid', gap: 24, maxWidth: 1200, margin: '0 auto' }}>
+      {/* 基础用法 */}
+      <Card title="基础用法 - Basic Usage">
+        <p style={{ marginBottom: 16, color: '#666' }}>展示一组标签，支持自动换行和溢出处理</p>
+        <TagView list={basicTags} maxLine={2} />
+      </Card>
+
+      {/* 带选择功能 */}
+      <Card title="带选择功能 - With Selection">
+        <p style={{ marginBottom: 16, color: '#666' }}>点击标签进行选中/取消选中，已选中的标签会高亮显示</p>
+        <div style={{ marginBottom: 12 }}>
+          <strong>已选中：</strong>
+          {selected.length > 0 ? selected.join(', ') : '无'}
+        </div>
+        <TagView list={basicTags} selected={selected} onChange={setSelected} maxLine={2} />
+      </Card>
+
+      {/* 高亮标记 */}
+      <Card title="高亮标记 - Highlight Marks">
+        <p style={{ marginBottom: 16, color: '#666' }}>支持使用 &lt;mark&gt; 标签高亮显示部分内容</p>
+        <TagView list={highlightTags} maxLine={2} />
+      </Card>
+
+      {/* 溢出模式 */}
+      <Card title="溢出模式 - Overflow Mode">
+        <div style={{ display: 'grid', gap: 16, marginBottom: 20 }}>
+          <RadioGroup<string>
+            label="最大行数 Max Line"
+            value={String(maxLine)}
+            options={[
+              { value: '1', label: '1 行' },
+              { value: '2', label: '2 行' },
+              { value: '3', label: '3 行' },
+            ]}
+            onChange={(val) => setMaxLine(Number(val))}
+          />
+        </div>
+        <div style={{ border: '1px solid #e8e8e8', padding: 16, borderRadius: 4, width: '300px' }}>
+          <TagView
+            list={basicTags}
+            maxLine={maxLine}
+            needTooltip={true}
+            selected={selected}
+            onChange={setSelected}
+          />
+        </div>
+      </Card>
+    </div>
+  );
+}
+```
+### API
+
+#### TagView
+
+| 参数 | 说明 | 类型 | 默认值 | 必须 |
+| --- | --- | --- | --- | --- |
+| list | 标签列表数据 | `{ value: string; name: string }[]` | `[]` | 是 |
+| maxLine | 最多显示行数 | `number` | `1` | 否 |
+| needTooltip | 省略部分是否使用 Tooltip，false 则使用展开/收起模式 | `boolean` | `false` | 否 |
+| selected | 已选中的标签值数组 | `string[]` | - | 否 |
+| style | 自定义样式 | `React.CSSProperties` | - | 否 |
+| onChange | 选中状态变化回调 | `(selected: string[]) => void` | - | 否 |
+| tagClassName | 自定义标签类名 | `{ default?: string; checked?: string }` | - | 否 |
+
+#### 数据结构
+
+##### list 项
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| value | 标签的唯一标识值 | `string` |
+| name | 标签显示的名称，支持 `<mark>` 高亮 | `string` |
+
+#### 使用示例
+
+```tsx
+import TagView from '@zjlab-fe/data-hub-ui/components/tag-view';
+
+// 基础用法
+<TagView
+  list={[
+    { value: 'tag1', name: '标签1' },
+    { value: 'tag2', name: '标签2' },
+    { value: 'tag3', name: '标签3' },
+  ]}
+/>
+
+// 带选择功能
+const [selected, setSelected] = useState<string[]>([]);
+
+<TagView
+  list={tags}
+  selected={selected}
+  onChange={setSelected}
+  maxLine={2}
+  tagClassName={{
+    default: 'custom-default-class',
+    checked: 'custom-checked-class',
+  }}
+/>
+
+// 使用 Tooltip 模式处理溢出
+<TagView
+  list={tags}
+  maxLine={1}
+  needTooltip={true}
+/>
+
+// 带高亮标记
+<TagView
+  list={[
+    { value: 'tag1', name: '<mark>关键</mark>标签1' },
+    { value: 'tag2', name: '普通标签2' },
+  ]}
+/>
+```
+
+#### 注意事项
+
+1. **空数据处理**：当 `list` 为空数组时，组件不会渲染任何内容
+2. **高亮标记**：`name` 字段支持 `<mark>` 和 `</mark>` 标签包裹需要高亮的文本
+3. **响应式更新**：组件会自动监听容器尺寸变化并重新计算布局
+4. **选择模式**：只有传入 `selected` 属性时，标签才可点击选择
+5. **溢出计算**：基于实际 DOM 元素宽度进行精确计算，确保布局准确
 
 ---