infinilabs · ayangweb · Nov 5, 2025
diff --git a/web/eslint.config.js b/web/eslint.config.js
@@ -82,8 +82,9 @@ export default defineConfig(
         }
       ],
 
-      'react-refresh/only-export-components': ['warn', { allowExportNames: ['loader', 'action'] }],
+      'react-hooks/exhaustive-deps': 'off',
 
+      'react-refresh/only-export-components': ['warn', { allowExportNames: ['loader', 'action'] }],
       'sort/import-members': ['error', { caseSensitive: true, natural: true }],
       'sort/imports': ['off'],
       'sort/string-enums': ['error', { caseSensitive: false, natural: true }],

diff --git a/web/package.json b/web/package.json
@@ -49,6 +49,7 @@
     "update-pkg": "sa update-pkg"
   },
   "dependencies": {
+    "@ant-design/charts": "^2.6.6",
     "@better-scroll/core": "2.5.1",
     "@iconify/react": "5.0.2",
     "@reduxjs/toolkit": "2.3.0",

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/locales/langs/en-us/route.ts b/web/src/locales/langs/en-us/route.ts
@@ -4,6 +4,9 @@ const route: App.I18n.Schema['translation']['route'] = {
   500: 'Server Error',
   about: 'About',
   'ai-assistant': 'AI Assistant',
+  'ai-assistant_edit': 'Edit AI Assistant',
+  'ai-assistant_list': 'AI Assistant',
+  'ai-assistant_new': 'New AI Assistant',
   'api-token': 'API Token',
   'api-token_list': 'API Token',
   'data-source': 'Data Source',
@@ -52,27 +55,26 @@ const route: App.I18n.Schema['translation']['route'] = {
   manage_role: 'Role Manage',
   manage_user: 'User Manage',
   'manage_user-detail': 'User Detail',
+  'mcp-server': 'MCP Server',
+  'mcp-server_edit': 'Edit MCP Server',
+  'mcp-server_list': 'MCP Server',
+  'mcp-server_new': 'New MCP Server',
+  'model-provider': 'LLM Provider',
+  'model-provider_edit': 'Edit LLM Provider',
+  'model-provider_list': 'LLM Provider',
+  'model-provider_new': 'New LLM Provider',
   'multi-menu': 'Multi Menu',
   'multi-menu_first': 'Menu One',
   'multi-menu_first_child': 'Menu One Child',
   'multi-menu_second': 'Menu Two',
   'multi-menu_second_child': 'Menu Two Child',
   'multi-menu_second_child_home': 'Menu Two Child Home',
-  'user-center': 'User Center',
-  'server': 'Server',
-  'ai-assistant_list': 'AI Assistant',
-  'ai-assistant_new': 'New AI Assistant',
-  'ai-assistant_edit': 'Edit AI Assistant',
-  'settings': 'Settings',
-  'model-provider': 'LLM Provider',
-  'model-provider_list': 'LLM Provider',
-  'model-provider_new': 'New LLM Provider',
-  'model-provider_edit': 'Edit LLM Provider',
-  'mcp-server': 'MCP Server',
-  'mcp-server_list': 'MCP Server',
-  'mcp-server_new': 'New MCP Server',
-  'mcp-server_edit': 'Edit MCP Server',
-  'search': 'Search'
+  pipeline: 'Pipeline',
+  pipeline_list: 'Pipeline',
+  search: 'Search',
+  server: 'Server',
+  settings: 'Settings',
+  'user-center': 'User Center'
 };
 
 export default route;
diff --git a/web/src/locales/langs/zh-cn/route.ts b/web/src/locales/langs/zh-cn/route.ts
@@ -4,9 +4,13 @@ const route: App.I18n.Schema['translation']['route'] = {
   500: '服务器错误',
   about: '关于',
   'ai-assistant': 'AI 助手',
+  'ai-assistant_edit': '编辑 AI 助手',
+  'ai-assistant_list': 'AI 助手',
+  'ai-assistant_new': '新增 AI 助手',
   'api-token': 'API Token',
   'api-token_list': 'API Token',
   'data-source': '数据源',
+  'data-source_detail': '数据源详情',
   'data-source_edit': '编辑数据源',
   'data-source_list': '数据源',
   'data-source_new': '新增数据源',
@@ -52,28 +56,26 @@ const route: App.I18n.Schema['translation']['route'] = {
   manage_role: '角色管理',
   manage_user: '用户管理',
   'manage_user-detail': '用户详情',
+  'mcp-server': 'MCP 服务器',
+  'mcp-server_edit': '编辑 MCP 服务器',
+  'mcp-server_list': 'MCP 服务器',
+  'mcp-server_new': '新增 MCP 服务器',
+  'model-provider': '模型提供商',
+  'model-provider_edit': '编辑模型提供商',
+  'model-provider_list': '模型提供商',
+  'model-provider_new': '新增模型提供商',
   'multi-menu': '多级菜单',
   'multi-menu_first': '菜单一',
   'multi-menu_first_child': '菜单一子菜单',
   'multi-menu_second': '菜单二',
   'multi-menu_second_child': '菜单二子菜单',
   'multi-menu_second_child_home': '菜单二子菜单首页',
-  'server': '服务端',
-  'ai-assistant_list': 'AI 助手',
-  'ai-assistant_new': '新增 AI 助手',
-  'ai-assistant_edit': '编辑 AI 助手',
-  'data-source_detail': '数据源详情',
-  'settings': '设置',
-  'model-provider': '模型提供商',
-  'model-provider_list': '模型提供商',
-  'model-provider_new': '新增模型提供商',
-  'model-provider_edit': '编辑模型提供商',
-  'mcp-server': 'MCP 服务器',
-  'mcp-server_list': 'MCP 服务器',
-  'mcp-server_new': '新增 MCP 服务器',
-  'mcp-server_edit': '编辑 MCP 服务器',
-  'user-center': '个人中心',
-  'search': '搜索'
+  pipeline: '流水线',
+  pipeline_list: '流水线',
+  search: '搜索',
+  server: '服务端',
+  settings: '设置',
+  'user-center': '个人中心'
 };
 
 export default route;
diff --git a/web/src/pages/pipeline/details/components/Steps/index.tsx b/web/src/pages/pipeline/details/components/Steps/index.tsx
@@ -0,0 +1,35 @@
+import { Collapse } from 'antd';
+
+const Steps = () => {
+  return (
+    <Collapse
+      className="bg-black/2 flex-none! dark:bg-white/4"
+      defaultActiveKey={['1']}
+      expandIconPosition="end"
+      items={[
+        {
+          children: <p>消息清洗</p>,
+          key: '1',
+          label: '消息清洗'
+        },
+        {
+          children: <p>FAQ 提取</p>,
+          key: '2',
+          label: 'FAQ 提取'
+        },
+        {
+          children: <p>Embedding 生成</p>,
+          key: '3',
+          label: 'Embedding 生成'
+        },
+        {
+          children: <p>保存结果</p>,
+          key: '4',
+          label: '保存结果'
+        }
+      ]}
+    />
+  );
+};
+
+export default Steps;
diff --git a/web/src/pages/pipeline/details/components/Summary/index.tsx b/web/src/pages/pipeline/details/components/Summary/index.tsx
@@ -0,0 +1,63 @@
+import { FlowGraph } from '@ant-design/graphs';
+import { Flex, Table } from 'antd';
+
+const Summary = () => {
+  const [data, setData] = useState(undefined);
+
+  useMount(() => {
+    fetch('https://assets.antv.antgroup.com/g6/flow-analysis.json')
+      .then(res => res.json())
+      .then(setData);
+  });
+
+  const columns = [
+    {
+      dataIndex: 'step',
+      title: 'Step'
+    },
+    {
+      dataIndex: 'type',
+      title: 'Type'
+    },
+    {
+      dataIndex: 'type',
+      title: 'Type'
+    },
+    {
+      dataIndex: 'message',
+      title: 'Message'
+    },
+    {
+      dataIndex: 'timestamp',
+      title: 'Timestamp'
+    }
+  ];
+
+  return (
+    <Flex
+      vertical
+      gap={32}
+    >
+      <FlowGraph
+        autoFit="view"
+        data={data}
+        height={350}
+        labelField={d => d.value.title}
+      />
+
+      <Flex
+        vertical
+        gap={16}
+      >
+        <b>运行提醒</b>
+
+        <Table
+          bordered
+          columns={columns}
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Summary;
diff --git a/web/src/pages/pipeline/details/index.scss b/web/src/pages/pipeline/details/index.scss
@@ -0,0 +1,68 @@
+.settings-tabs {
+  .ant-tabs-nav {
+    margin-bottom: 0px;
+    height: 40px;
+  }
+  .ant-tabs-ink-bar {
+    height: 4px !important;
+  }
+  .ant-tabs-nav-wrap {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  .ant-tabs-tab {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+  .ant-tabs-tab:not(:first-child) {
+    margin-left: 38px;
+  }
+  .ant-tabs-content {
+    display: none;
+    min-height: calc(100vh - 176px);
+    height: auto;
+    padding: 0px 24px;
+  }
+}
+
+.settings-tabs-content {
+  min-height: calc(100vh - 176px);
+  height: auto;
+  padding: 12px 16px;
+  display: flex; 
+  flex-direction: column; 
+}
+
+.settings-tabs-content > div {
+  flex: 1;
+  width: 100%;
+}
+
+.settings-form {
+  & > .ant-form-item > .ant-row {
+    & > .ant-form-item-label {
+      width: 160px;
+    }
+    & > .ant-form-item-control {
+      max-width: 520px;
+    }
+  }
+  .deepseek-icon > div > div {
+    font-size: 32px;
+    padding-top: 3px;
+    margin-right: -8px;
+  }
+  .sub-form-item {
+    .ant-form-item-label > label {
+      color: var(--ant-color-text-description);
+      font-size: var(--ant-font-size);
+      line-height: var(--ant-line-height);
+    }
+  }
+}
+
+.settings-form-help {
+  color: var(--ant-color-text-description);
+  font-size: var(--ant-font-size);
+  line-height: var(--ant-line-height);
+}
diff --git a/web/src/pages/pipeline/details/index.tsx b/web/src/pages/pipeline/details/index.tsx
@@ -0,0 +1,85 @@
+import { Button, Card, Flex, Tabs } from 'antd';
+
+import Steps from './components/Steps';
+import Summary from './components/Summary';
+
+import './index.scss';
+
+export function Component() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const onChange = (key: string) => {
+    setSearchParams({ tab: key });
+  };
+
+  const items = [
+    {
+      component: Summary,
+      key: 'summary',
+      label: 'Summary'
+    },
+    {
+      component: Steps,
+      key: 'steps',
+      label: 'Steps'
+    }
+  ];
+
+  const activeKey = useMemo(() => {
+    return searchParams.get('tab') || items[0].key;
+  }, [searchParams]);
+
+  const activeItem = useMemo(() => {
+    return items.find(item => item.key === activeKey);
+  }, [activeKey]);
+
+  return (
+    <Flex
+      vertical
+      gap={8}
+    >
+      <Card>
+        <Flex
+          align="center"
+          justify="space-between"
+        >
+          <Flex
+            vertical
+            gap={12}
+          >
+            <b>FAQ 提取 #1234</b>
+            <span className="text-color-3 text-xs">Triggered via schedule 18 hours ago</span>
+          </Flex>
+
+          <Flex
+            vertical
+            gap={12}
+          >
+            <b>Success</b>
+            <span className="text-color-3 text-xs">Status</span>
+          </Flex>
+
+          <Flex
+            vertical
+            gap={12}
+          >
+            <b>22m 40s</b>
+            <span className="text-color-3 text-xs">Total duration</span>
+          </Flex>
+
+          <Button type="primary">重新运行</Button>
+        </Flex>
+      </Card>
+
+      <Card styles={{ body: { padding: 0 } }}>
+        <Tabs
+          activeKey={activeKey}
+          className="settings-tabs"
+          items={items}
+          onChange={onChange}
+        />
+        <div className="settings-tabs-content">{activeItem?.component ? <activeItem.component /> : null}</div>
+      </Card>
+    </Flex>
+  );
+}