feat: 样本管理

2025-10-13 16:50:21 +08:00
parent 4e9ebc76f7
commit 9eb4f52f0e
25 changed files with 3066 additions and 344 deletions
--- a/config/proxy.ts
+++ b/config/proxy.ts
@@ -15,7 +15,7 @@ export default {
    // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
    '/admin-api/': {
      // 要代理的地址
-      target: 'http://114.132.60.20:48080',
+      target: 'http://192.168.1.231:48080',
      // 配置了这个可以从 http 代理到 https
      // 依赖 origin 的功能可能需要这个，比如 cookie
      changeOrigin: true,
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
    "jsencrypt": "^3.5.4",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
+    "react-infinite-scroll-component": "^6.1.0",
    "tinymce": "^8.1.2",
    "web-storage-cache": "^1.1.1"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
      react-dom:
        specifier: ^19.1.0
        version: 19.1.1(react@19.1.1)
+      react-infinite-scroll-component:
+        specifier: ^6.1.0
+        version: 6.1.0(react@19.1.1)
      tinymce:
        specifier: ^8.1.2
        version: 8.1.2
@@ -9023,6 +9026,11 @@ packages:
      react: ^16.6.0 || ^17.0.0 || ^18.0.0
      react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0

+  react-infinite-scroll-component@6.1.0:
+    resolution: {integrity: sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==}
+    peerDependencies:
+      react: '>=16.0.0'
+
  react-intl@3.12.1:
    resolution: {integrity: sha512-cgumW29mwROIqyp8NXStYsoIm27+8FqnxykiLSawWjOxGIBeLuN/+p2srei5SRIumcJefOkOIHP+NDck05RgHg==}
    peerDependencies:
@@ -10232,6 +10240,10 @@ packages:
  thread-stream@0.15.2:
    resolution: {integrity: sha512-UkEhKIg2pD+fjkHQKyJO3yoIvAP3N6RlNFt2dUhcS1FGvCD1cQa1M/PGknCLFIyZdtJOWQjejp7bdNqmN7zwdA==}

+  throttle-debounce@2.3.0:
+    resolution: {integrity: sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==}
+    engines: {node: '>=8'}
+
  throttle-debounce@5.0.2:
    resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
    engines: {node: '>=12.22'}
@@ -23302,6 +23314,11 @@ snapshots:
      react-fast-compare: 3.2.2
      shallowequal: 1.1.0

+  react-infinite-scroll-component@6.1.0(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+      throttle-debounce: 2.3.0
+
  react-intl@3.12.1(@types/react@19.1.12)(react@19.1.1):
    dependencies:
      '@formatjs/intl-displaynames': 1.2.10
@@ -24854,6 +24871,8 @@ snapshots:
    dependencies:
      real-require: 0.1.0

+  throttle-debounce@2.3.0: {}
+
  throttle-debounce@5.0.2: {}

  through@2.3.8: {}
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,15 +1,9 @@
 import type { Settings as LayoutSettings } from '@ant-design/pro-components';
 import { SettingDrawer } from '@ant-design/pro-components';
 import type { RequestConfig, RunTimeLayoutConfig } from '@umijs/max';
-import { history, Link, Navigate } from '@umijs/max';
-import { Modal, Spin } from 'antd';
-import React, {
-  Children,
-  Component,
-  createContext,
-  JSX,
-  Suspense,
-} from 'react';
+import { history, Navigate } from '@umijs/max';
+import { Spin } from 'antd';
+import React from 'react';
 import {
  AvatarDropdown,
  AvatarName,
@@ -18,17 +12,13 @@ import {
  SelectLang,
 } from '@/components';
 import { getInfo } from '@/services/login';
-import type { TokenType, UserInfoVO, UserVO } from '@/services/login/types';
+import type { UserInfoVO } from '@/services/login/types';
 import defaultSettings from '../config/defaultSettings';
 import { errorConfig } from './requestErrorConfig';
 import '@ant-design/v5-patch-for-react-19';
-import { getAccessToken, getRefreshToken, getTenantId } from '@/utils/auth';
-import {
-  transformBackendMenuToFlatRoutes,
-  transformMenuToRoutes,
-} from '@/utils/menuUtils';
+import { getAccessToken, getTenantId } from '@/utils/auth';
+
 import { CACHE_KEY, useCache } from './hooks/web/useCache';
-import { MenuVO } from './services/system/menu';

 const isDev = process.env.NODE_ENV === 'development';
 const isDevOrTest = isDev || process.env.CI;
@@ -198,7 +188,7 @@ export const request: RequestConfig = {
      };
      // 如果有token，则添加Authorization头
      if (token) {
-        headers['Authorization'] = `Bearer ${getAccessToken()}`;
+        headers.Authorization = `Bearer·${getAccessToken()}`;
      }
      return { url, options: { ...options, headers } };
    },
@@ -235,20 +225,19 @@ export const request: RequestConfig = {
 // umi 4 使用 modifyRoutes
 export function patchClientRoutes({ routes }: { routes: any }) {
  const { wsCache } = useCache();
-  console.log(2222);
  const globalMenus = wsCache.get(CACHE_KEY.ROLE_ROUTERS);
  const routerIndex = routes.findIndex((item: any) => item.path === '/');
  const parentId = routes[routerIndex].id;

  if (globalMenus) {
-    routes[routerIndex]['routes'].push(...loopMenuItem(globalMenus, parentId));
+    routes[routerIndex].routes.push(...loopMenuItem(globalMenus, parentId));
  }
 }

 const loopMenuItem = (menus: any[], pId: number | string): any[] => {
  return menus.flatMap((item) => {
    let Component: React.ComponentType<any> | null = null;
-    console.log(findFirstLeafRoute(item), 'item');
+    // console.log(findFirstLeafRoute(item), 'item');
    if (item.component && item.component.length > 0) {
      // 防止配置了路由，但本地暂未添加对应的页面，产生的错误
      Component = React.lazy(() => {
@@ -299,7 +288,7 @@ const loopMenuItem = (menus: any[], pId: number | string): any[] => {
  });
 };

-const findFirstLeafRoute = (menuItem: any, parent = '/'): string | null => {
+const _findFirstLeafRoute = (menuItem: any, parent = '/'): string | null => {
  // 如果没有子菜单，返回当前路径

  if (!menuItem.children || menuItem.children.length === 0) {
@@ -308,7 +297,8 @@ const findFirstLeafRoute = (menuItem: any, parent = '/'): string | null => {

  // 递归查找第一个叶子节点
  for (const child of menuItem.children) {
-    const leafRoute = findFirstLeafRoute(child, menuItem.path + '/');
+    // const leafRoute = findFirstLeafRoute(child, menuItem.path + "/");
+    const leafRoute = _findFirstLeafRoute(child, `${menuItem.path}/`);
    if (leafRoute) {
      return leafRoute;
    }
--- a/src/components/EnhancedProTable/index.tsx
+++ b/src/components/EnhancedProTable/index.tsx
@@ -1,13 +1,12 @@
 // components/EnhancedProTable/EnhancedProTable.tsx

-import { PlusOutlined } from '@ant-design/icons';
 import {
  type ActionType,
  type ParamsType,
  ProTable,
 } from '@ant-design/pro-components';
-import { Button, Space, Table } from 'antd';
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import { Button } from 'antd';
+import React, { forwardRef, useCallback } from 'react';
 import { formatPaginationTotal } from '@/utils/antd/tableHelpers';
 import type { BaseRecord, EnhancedProTableProps } from './types';

@@ -20,10 +19,9 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
    request,
    // actions = [],
    // permissions = [],
-    checkPermission = () => true,
+    // checkPermission = () => true,
    toolbarActions,
-    showIndex = true,
-    showSelection = true,
+    // showIndex = true,
    // showActions = true,
    // maxActionCount = 2,
    // onAdd,
@@ -32,28 +30,65 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
    // onView,
    // onExport,
    // customToolbarRender,
-    customActionRender,
+    // showSelection = true,
    rowKey = 'id',
+    // onRow,
+    // rowClassName,
+    // enableRowClick = false,
+    // clickableRowClassName = "clickable-row", // 添加可点击样式
    ...restProps
  } = props;

-  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
-  const [selectedRows, setSelectedRows] = useState<T[]>([]);
-  // 行选择配置
-  const rowSelection = useMemo(() => {
-    if (!showSelection) return undefined;
-    return {
-      selectedRowKeys,
-      selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
-      onChange: (keys: React.Key[], rows: T[]) => {
-        setSelectedRowKeys(keys);
-        setSelectedRows(rows);
-      },
-      getCheckboxProps: (record: T) => ({
-        name: record[rowKey]?.toString(),
-      }),
-    };
-  }, [showSelection, selectedRowKeys]);
+  // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  // const [selectedRows, setSelectedRows] = useState<T[]>([]);
+  // // 行选择配置
+  // const rowSelection = useMemo(() => {
+  //   if (!showSelection) return undefined;
+  //   return {
+  //     selectedRowKeys,
+  //     selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
+  //     onChange: (keys: React.Key[], rows: T[]) => {
+  //       setSelectedRowKeys(keys);
+  //       setSelectedRows(rows);
+  //     },
+  //     getCheckboxProps: (record: T) => ({
+  //       name: record[rowKey]?.toString(),
+  //     }),
+  //   };
+  // }, [showSelection, selectedRowKeys]);
+
+  // // 处理行点击事件
+  // const handleRowClick = useCallback(
+  //   (record: T, index?: number) => {
+  //     console.log("handleRowClick");
+  //     if (!enableRowClick) return {};
+  //     return {
+  //       onClick: (event: React.MouseEvent<HTMLElement>) => {
+  //         // 阻止事件冒泡到其他元素
+  //         event.stopPropagation();
+
+  //         // 如果点击的是 checkbox 或其他交互元素，不处理行选中
+  //         const target = event.target as HTMLElement;
+  //         console.log("handleRowClick");
+  //         if (
+  //           target.closest(".ant-checkbox") ||
+  //           target.closest(".ant-btn") ||
+  //           target.closest(".ant-dropdown") ||
+  //           target.closest("a")
+  //         ) {
+  //           return;
+  //         }
+
+  //         // // 切换选中状态
+  //         // handleRowSelect(record, !isSelected);
+
+  //         // // 调用原始的 onRow 点击事件
+  //         onRow?.(record, index)?.onClick?.(event);
+  //       },
+  //     };
+  //   },
+  //   [enableRowClick, onRow]
+  // );

  const toolBarRender = useCallback(() => {
    const toolbarElements =
@@ -64,8 +99,8 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
            type={action.type}
            danger={action.danger}
            disabled={action.disabled}
-            icon={<PlusOutlined />}
-            onClick={() => action.onClick(selectedRowKeys, selectedRows)}
+            // icon={action.icon ?? <PlusOutlined />}
+            onClick={() => action.onClick()}
          >
            {action.label}
          </Button>
@@ -80,7 +115,7 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
      actionRef={ref}
      request={request}
      rowKey={rowKey}
-      rowSelection={rowSelection}
+      rowSelection={props.rowSelection ?? false}
      toolBarRender={toolBarRender}
      manualRequest={false}
      showSorterTooltip
--- a/src/components/EnhancedProTable/types.ts
+++ b/src/components/EnhancedProTable/types.ts
@@ -58,6 +58,8 @@ export interface EnhancedProTableProps<T extends BaseRecord, U = any>
    params: U & { current?: number; pageSize?: number },
  ) => Promise<ApiResponse<T>>;
  loading?: boolean; // 添加 loading 属性
+  enableRowClick?: boolean; //开启行内点击
+  clickableRowClassName?: string;
  actions?: TableAction<T>[];
  toolbarActions?: ToolbarAction[];
  permissions?: string[];
--- a/src/components/GroupTag/GroupTagCore.less
+++ b/src/components/GroupTag/GroupTagCore.less
@@ -0,0 +1,301 @@
+// GroupTagCore.less
+.group-tag-core {
+  width: 100%;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  overflow: hidden;
+
+  // 编辑模式下的整体样式
+  &.edit-mode {
+    .search-wrapper {
+      .ant-input-affix-wrapper {
+        background-color: #f5f5f5;
+
+        .ant-input {
+          background-color: #f5f5f5;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+
+  .search-wrapper {
+    padding: 8px;
+    border-bottom: 1px solid #f0f0f0;
+
+    .ant-input-affix-wrapper {
+      width: 100%;
+    }
+  }
+
+  .content-wrapper {
+    flex: 1;
+    overflow: hidden;
+
+    .loading-wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 200px;
+      text-align: center;
+    }
+
+    .split-layout {
+      display: flex;
+      height: 100%;
+
+      .groups-panel {
+        width: 200px;
+        border-right: 1px solid #f0f0f0;
+        display: flex;
+        flex-direction: column;
+
+        .panel-header {
+          padding: 8px 12px;
+          background-color: #fafafa;
+          border-bottom: 1px solid #f0f0f0;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-weight: 500;
+          font-size: 14px;
+        }
+
+        .groups-list {
+          overflow: auto;
+          height: 40vh;
+          .group-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            border-bottom: 1px solid #f5f5f5;
+
+            &:hover {
+              background-color: #f5f5f5;
+            }
+
+            &.active {
+              background-color: #e6f7ff;
+              border-color: #91d5ff;
+            }
+
+            &.editing {
+              background-color: #fff7e6;
+              cursor: default;
+
+              &:hover {
+                background-color: #fff7e6;
+              }
+            }
+
+            &.disabled {
+              cursor: not-allowed;
+              opacity: 0.6;
+
+              &:hover {
+                background-color: inherit;
+              }
+
+              &.active:hover {
+                background-color: #e6f7ff;
+              }
+            }
+
+            .group-content {
+              flex: 1;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .group-name {
+                font-size: 13px;
+                color: #262626;
+              }
+
+              .edit-input-wrapper {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                width: 100%;
+
+                .ant-input {
+                  flex: 1;
+                  font-size: 12px;
+                }
+
+                .edit-actions {
+                  display: flex;
+                  gap: 2px;
+
+                  .ant-btn {
+                    padding: 0;
+                    width: 20px;
+                    height: 20px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    .anticon {
+                      font-size: 10px;
+                    }
+                  }
+                }
+              }
+            }
+
+            .ant-checkbox-wrapper {
+              margin-left: 8px;
+            }
+          }
+        }
+      }
+
+      .tags-panel {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .panel-header {
+          padding: 8px 12px;
+          background-color: #fafafa;
+          border-bottom: 1px solid #f0f0f0;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-weight: 500;
+          font-size: 14px;
+        }
+
+        .tags-list {
+          overflow: auto;
+          height: 40vh;
+          padding: 4px 0;
+
+          .loading-wrapper {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 60px;
+          }
+          .infinite-scroll-container {
+            height: 50vh !important;
+            overflow-y: auto;
+          }
+          .tag-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 6px 12px;
+            transition: background-color 0.2s;
+
+            &:hover {
+              background-color: #f5f5f5;
+            }
+
+            &.editing {
+              background-color: #fff7e6;
+
+              &:hover {
+                background-color: #fff7e6;
+              }
+            }
+
+            &.disabled {
+              opacity: 0.6;
+
+              &:hover {
+                background-color: inherit;
+              }
+            }
+
+            .ant-checkbox-wrapper {
+              flex: 1;
+
+              span:last-child {
+                color: #595959;
+                font-size: 13px;
+              }
+            }
+
+            .tag-name-only {
+              flex: 1;
+              color: #8c8c8c;
+              font-size: 13px;
+
+              .anticon {
+                color: #bfbfbf;
+              }
+            }
+
+            .tag-actions {
+              display: flex;
+              gap: 2px;
+              opacity: 0;
+              transition: opacity 0.2s;
+
+              .ant-btn {
+                padding: 0;
+                width: 20px;
+                height: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .anticon {
+                  font-size: 10px;
+                }
+              }
+            }
+
+            &:hover .tag-actions {
+              opacity: 1;
+            }
+
+            .edit-input-wrapper {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+              width: 100%;
+
+              .ant-input {
+                flex: 1;
+                font-size: 12px;
+              }
+
+              .edit-actions {
+                display: flex;
+                gap: 2px;
+
+                .ant-btn {
+                  padding: 0;
+                  width: 20px;
+                  height: 20px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+
+                  .anticon {
+                    font-size: 10px;
+                  }
+                }
+              }
+            }
+          }
+
+          .ant-empty {
+            padding: 40px 20px;
+
+            .ant-empty-description {
+              color: #8c8c8c;
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/components/GroupTag/GroupTagCore.tsx
+++ b/src/components/GroupTag/GroupTagCore.tsx
@@ -0,0 +1,343 @@
+// GroupTagCore.tsx - 修复缺失函数和API参数
+
+import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
+import {
+  Button,
+  type CheckboxChangeEvent,
+  Input,
+  message,
+  Space,
+  Spin,
+} from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
+import type { GroupItem, GroupTagCoreProps, TagItem } from './types';
+import './GroupTagCore.less';
+import { renderGroups, renderTags } from './component';
+import TagsModal from './TagsModal';
+
+const GroupTagCore: React.FC<GroupTagCoreProps> = (props) => {
+  const {
+    requset: { groupsApi, tagsApi },
+    editable = false,
+    value = [],
+    onChange,
+  } = props;
+  const [isInEditMode, _setIsInEditMode] = useState<boolean>(false);
+  // 编辑状态
+  const [loading, setLoading] = useState<boolean>(false);
+  const [loadingTags, setLoadingTags] = useState<boolean>(false);
+  const [groups, setGroups] = useState<GroupItem[]>([]);
+  const [currentGroup, setCurrentGroup] = useState<GroupItem>();
+  const [modalType, setModalType] = useState<'add' | 'edit' | 'delete'>();
+  const [type, setType] = useState<'group' | 'tag'>('group');
+  const [visible, setVisible] = useState<boolean>(false);
+  const [name, setName] = useState<string>('');
+  const [total, setTotal] = useState<number>(0);
+  const [currentId, setCurrentId] = useState<number>();
+  const [tagsModalValue, setTagsModalValue] = useState<{
+    tagName?: string;
+    groupIds?: number[];
+    id?: number;
+  }>({});
+  const [pageNo, setPageNo] = useState<number>(1);
+  const fetchGroups = useCallback(async () => {
+    try {
+      setLoading(true);
+      const groups = await groupsApi.get();
+      groups.length && setCurrentGroup(groups[0]);
+      setGroups(groups);
+      setCurrentId(groups[0].id);
+    } finally {
+      setLoading(false);
+    }
+  }, [groupsApi]);
+
+  const fetchTagsApi = useCallback(async () => {
+    try {
+      setLoadingTags(true);
+      const res = await tagsApi.get({ groupId: currentId, pageNo: 1 });
+      const newGroup = { ...currentGroup, tags: res.list };
+      const newData = groups.map((g) => (g.id === currentId ? newGroup : g));
+      setGroups(newData as GroupItem[]);
+      setCurrentGroup(newGroup as GroupItem);
+      setTotal(res.total);
+      setPageNo(1);
+    } finally {
+      setLoadingTags(false);
+    }
+  }, [tagsApi, groups, currentId]);
+  useEffect(() => {
+    fetchGroups();
+  }, []);
+
+  useEffect(() => {
+    if (currentId) {
+      fetchTagsApi();
+    }
+  }, [currentId]);
+
+  const onGroupClick = (group: GroupItem) => {
+    if (currentId !== group.id) {
+      setCurrentId(group.id);
+      setCurrentGroup(group);
+    }
+  };
+
+  useEffect(() => {
+    if (modalType === 'edit' && visible) {
+      if (type === 'group' && currentGroup) {
+        setName(currentGroup.groupName);
+      } else if (type === 'tag' && tagsModalValue) {
+        setName(tagsModalValue.tagName || '');
+      }
+    }
+    if (modalType === 'add') {
+      setName('');
+    }
+  }, [type, modalType, currentGroup, tagsModalValue, visible]);
+  const handleGroup = (type: 'add' | 'edit' | 'delete') => {
+    setType('group');
+    setModalType(type);
+    if (type === 'add' || type === 'edit') {
+      setVisible(true);
+    }
+  };
+
+  const handleTag = (type: 'add' | 'edit' | 'delete', tag?: TagItem) => {
+    setType('tag');
+    setModalType(type);
+    if (type === 'add' || type === 'edit') {
+      setVisible(true);
+    }
+    if (type === 'edit') {
+      setTagsModalValue({ tagName: tag?.tagName, id: tag?.id });
+    }
+  };
+
+  const handleAdd = async (value: {
+    groupName?: string;
+    groupIds?: number[];
+    tagName?: string;
+  }) => {
+    if (type === 'group') {
+      const id = await groupsApi.create({ groupName: value.groupName });
+      setGroups([{ id, groupName: value.groupName || '' }, ...groups]);
+    } else {
+      await tagsApi.create(value);
+      message.success('添加成功');
+      fetchTagsApi();
+    }
+    setVisible(false);
+  };
+
+  const handleEdit = async (value: {
+    tagName?: string;
+    groupIds?: number[];
+  }) => {
+    if (type === 'group') {
+      try {
+        setLoading(true);
+        await groupsApi.update({ id: currentGroup?.id, groupName: name });
+        const newData = groups.map((item) => {
+          if (item.id === currentGroup?.id) {
+            const itemData = { ...item, groupName: name };
+            setCurrentGroup(itemData);
+            return itemData;
+          } else {
+            return item;
+          }
+        });
+        setGroups(newData);
+      } finally {
+        setLoading(false);
+      }
+    } else {
+      await tagsApi.update({
+        groupIds: [currentGroup?.id],
+        id: tagsModalValue?.id,
+        ...value,
+      });
+      message.success('修改成功');
+      const newTag = currentGroup?.tags?.map((tag) => {
+        if (tag.id === tagsModalValue?.id) {
+          return { ...tag, tagName: value.tagName };
+        } else {
+          return tag;
+        }
+      });
+
+      const newGroup = { ...currentGroup, tags: newTag };
+      setCurrentGroup(newGroup as GroupItem);
+    }
+    setVisible(false);
+  };
+
+  const handleDelete = async (type: 'group' | 'tag', id: number) => {
+    if (type === 'group' && currentGroup) {
+      await groupsApi.delete(id);
+      const newGroups = groups.filter((group) => group.id !== id);
+      setGroups(newGroups);
+      if (id === currentId) {
+        setCurrentId(newGroups[0].id);
+        setCurrentGroup(newGroups[0]);
+      }
+    } else {
+      tagsApi.delete(id);
+    }
+  };
+
+  const handleConfirm = useCallback(
+    async (value: { tagName?: string; groupIds?: number[] }) => {
+      if (modalType === 'add') {
+        await handleAdd(value);
+      }
+
+      if (modalType === 'edit') {
+        await handleEdit(value);
+      }
+    },
+    [visible, type, modalType],
+  );
+
+  const handleCancle = useCallback(() => {
+    setVisible(false);
+  }, [visible]);
+
+  const onTagItemChange = (tag: TagItem, e: CheckboxChangeEvent) => {
+    if (e.target.checked) {
+      const data = [...value, tag];
+      onChange?.(data);
+    } else if (!editable) {
+      const data = value.filter((item) => item.id !== tag.id);
+      onChange?.(data);
+    }
+  };
+
+  const loadMoreData = async () => {
+    const res = await tagsApi.get({ groupId: currentId, pageNo: pageNo + 1 });
+    if (res.list.length === 0) {
+      return;
+    }
+
+    const newGroup = {
+      ...currentGroup,
+      tags: [...(currentGroup?.tags || []), ...res.list],
+    };
+    setCurrentGroup(newGroup as GroupItem);
+    setPageNo((prev) => prev + 1);
+  };
+
+  const onSearchTags = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const searchValue = (e.target as HTMLInputElement).value;
+    const res = await tagsApi.get({
+      groupId: currentId,
+      pageNo: 1,
+      tagName: searchValue,
+    });
+    const newGroup = {
+      ...currentGroup,
+      tags: res.list,
+    };
+    document.getElementById('scrollableDiv')?.scrollTo(0, 0);
+    setCurrentGroup(newGroup as GroupItem);
+    setPageNo(1);
+  };
+
+  return (
+    <div className={`group-tag-core`}>
+      <div className="search-wrapper">
+        <Input
+          prefix={<SearchOutlined />}
+          placeholder="搜索"
+          onPressEnter={onSearchTags}
+          allowClear
+          disabled={isInEditMode}
+        />
+      </div>
+
+      <div className="content-wrapper">
+        {loading ? (
+          <div className="loading-wrapper">
+            <Spin />
+            <div style={{ marginTop: 8 }}>加载数据中...</div>
+          </div>
+        ) : (
+          <div className="split-layout">
+            {/* 左侧分组列表 */}
+            <div className="groups-panel">
+              <div className="panel-header">
+                <span>分组</span>
+                {editable && !isInEditMode && (
+                  <Button
+                    type="text"
+                    size="small"
+                    icon={<PlusOutlined />}
+                    onClick={() => handleGroup('add')}
+                  >
+                    添加
+                  </Button>
+                )}
+              </div>
+              <div className="groups-list">
+                {renderGroups({
+                  editable,
+                  groups,
+                  currentId,
+                  onGroupClick,
+                  onEdit: () => handleGroup('edit'),
+                  onDelete: (id) => handleDelete('group', id),
+                })}
+              </div>
+            </div>
+
+            {/* 右侧标签列表 */}
+            <div className="tags-panel">
+              <div className="panel-header">
+                <span>标签</span>
+                <Space>
+                  {editable && currentGroup && !isInEditMode && (
+                    <Button
+                      type="text"
+                      size="small"
+                      icon={<PlusOutlined />}
+                      onClick={() => handleTag('add')}
+                    >
+                      添加
+                    </Button>
+                  )}
+                </Space>
+              </div>
+
+              <div className="tags-list" id="scrollableDiv">
+                <Spin spinning={loadingTags}>
+                  {renderTags({
+                    editable,
+                    value,
+                    list: currentGroup?.tags ?? [],
+                    total,
+                    loadMoreData,
+                    onEdit: (tag) => handleTag('edit', tag),
+                    onDelete: (id) => handleDelete('tag', id),
+                    onTagItemChange: onTagItemChange,
+                  })}
+                </Spin>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+      {/* 添加标签Modal */}
+      <TagsModal
+        value={tagsModalValue}
+        visible={visible}
+        type={type}
+        modalType={modalType}
+        onCancel={handleCancle}
+        onConfirm={handleConfirm}
+        groups={groups}
+      />
+    </div>
+  );
+};
+
+export default GroupTagCore;
--- a/src/components/GroupTag/GroupTagModal.tsx
+++ b/src/components/GroupTag/GroupTagModal.tsx
@@ -0,0 +1,63 @@
+// GroupTagModal.tsx - 修复死循环问题
+
+import { Modal } from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
+import GroupTagCore from './GroupTagCore';
+import type { GroupTagModalProps, TagItem } from './types';
+
+const GroupTagModal: React.FC<GroupTagModalProps> = ({
+  visible,
+  title,
+  width,
+  editable,
+  request,
+  onCancel,
+  onChange,
+}) => {
+  const [data, setData] = useState<TagItem[]>([]);
+
+  const handleOk = () => {
+    if (onChange) {
+      // const ids = data.map((item) => item.id);
+      onChange(data);
+    }
+
+    onCancel();
+  };
+
+  useEffect(() => {
+    if (!visible) {
+      setData([]);
+    }
+  }, [visible]);
+
+  const handleChange = useCallback(
+    (data: TagItem[]) => {
+      setData(data);
+    },
+    [data],
+  );
+
+  return (
+    <Modal
+      title={title}
+      open={visible}
+      onCancel={onCancel}
+      onOk={handleOk}
+      width={width}
+      okText="确定"
+      cancelText="取消"
+      destroyOnHidden
+      maskClosable={false}
+    >
+      <GroupTagCore
+        value={data}
+        requset={request}
+        editable={editable}
+        onChange={handleChange}
+      />
+    </Modal>
+  );
+};
+
+export default GroupTagModal;
--- a/src/components/GroupTag/GroupTagSelect.less
+++ b/src/components/GroupTag/GroupTagSelect.less
@@ -0,0 +1,400 @@
+// GroupTagSelect.less - 添加编辑模式样式
+.group-tag-select-wrapper {
+  width: 100%;
+
+  .group-tag-select {
+    width: 100%;
+
+    .ant-select-selector {
+      min-height: 32px;
+    }
+
+    .selected-tag {
+      margin: 2px;
+      font-size: 12px;
+      line-height: 20px;
+      border-radius: 4px;
+    }
+  }
+
+  &.disabled {
+    .selected-tag {
+      background-color: #f0f0f0;
+      border-color: #d9d9d9;
+      color: rgba(0, 0, 0, 0.25);
+    }
+  }
+}
+
+.group-tag-select-dropdown-wrapper {
+  .ant-select-dropdown {
+    padding: 0;
+    width: 600px !important;
+    min-width: 600px !important;
+  }
+}
+
+.group-tag-select-dropdown {
+  padding: 0;
+  width: 100%;
+
+  // 编辑模式下的整体样式
+  &.edit-mode {
+    .search-wrapper {
+      .ant-input-affix-wrapper {
+        background-color: #f5f5f5;
+
+        .ant-input {
+          background-color: #f5f5f5;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+
+  .search-wrapper {
+    padding: 8px;
+    border-bottom: 1px solid #f0f0f0;
+
+    .ant-input-affix-wrapper {
+      width: 100%;
+    }
+  }
+
+  .content-wrapper {
+    height: 400px;
+    overflow: hidden;
+
+    .loading-wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      text-align: center;
+    }
+
+    .split-layout {
+      display: flex;
+      height: 100%;
+
+      .groups-panel {
+        width: 200px;
+        border-right: 1px solid #f0f0f0;
+        display: flex;
+        flex-direction: column;
+
+        .panel-header {
+          padding: 8px 12px;
+          background-color: #fafafa;
+          border-bottom: 1px solid #f0f0f0;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-weight: 500;
+          font-size: 14px;
+        }
+
+        .groups-list {
+          flex: 1;
+          overflow-y: auto;
+
+          .group-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            border-bottom: 1px solid #f5f5f5;
+
+            &:hover {
+              background-color: #f5f5f5;
+            }
+
+            &.active {
+              background-color: #e6f7ff;
+              border-color: #91d5ff;
+            }
+
+            // 编辑状态样式
+            &.editing {
+              background-color: #fff7e6;
+              cursor: default;
+
+              &:hover {
+                background-color: #fff7e6;
+              }
+            }
+
+            // 禁用状态样式
+            &.disabled {
+              cursor: not-allowed;
+              opacity: 0.6;
+
+              &:hover {
+                background-color: inherit;
+              }
+
+              &.active:hover {
+                background-color: #e6f7ff;
+              }
+            }
+
+            .group-content {
+              flex: 1;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .group-name {
+                font-size: 13px;
+                color: #262626;
+              }
+
+              // 编辑输入框样式
+              .edit-input-wrapper {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                width: 100%;
+
+                .ant-input {
+                  flex: 1;
+                  font-size: 12px;
+                }
+
+                .edit-actions {
+                  display: flex;
+                  gap: 2px;
+
+                  .ant-btn {
+                    padding: 0;
+                    width: 20px;
+                    height: 20px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    .anticon {
+                      font-size: 10px;
+                    }
+                  }
+                }
+              }
+            }
+
+            .ant-checkbox-wrapper {
+              margin-left: 8px;
+            }
+          }
+        }
+      }
+
+      .tags-panel {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .panel-header {
+          padding: 8px 12px;
+          background-color: #fafafa;
+          border-bottom: 1px solid #f0f0f0;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-weight: 500;
+          font-size: 14px;
+        }
+
+        .tags-list {
+          flex: 1;
+          overflow-y: auto;
+          padding: 4px 0;
+
+          .loading-wrapper {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 60px;
+          }
+
+          .tag-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 6px 12px;
+            transition: background-color 0.2s;
+
+            &:hover {
+              background-color: #f5f5f5;
+            }
+
+            // 编辑状态样式
+            &.editing {
+              background-color: #fff7e6;
+
+              &:hover {
+                background-color: #fff7e6;
+              }
+            }
+
+            // 禁用状态样式
+            &.disabled {
+              opacity: 0.6;
+
+              &:hover {
+                background-color: inherit;
+              }
+            }
+
+            .ant-checkbox-wrapper {
+              flex: 1;
+
+              span:last-child {
+                color: #595959;
+                font-size: 13px;
+              }
+            }
+
+            // 编辑状态下只显示标签名称的样式
+            .tag-name-only {
+              flex: 1;
+              color: #8c8c8c;
+              font-size: 13px;
+
+              .anticon {
+                color: #bfbfbf;
+              }
+            }
+
+            // 标签操作按钮
+            .tag-actions {
+              display: flex;
+              gap: 2px;
+              opacity: 0;
+              transition: opacity 0.2s;
+
+              .ant-btn {
+                padding: 0;
+                width: 20px;
+                height: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .anticon {
+                  font-size: 10px;
+                }
+              }
+            }
+
+            &:hover .tag-actions {
+              opacity: 1;
+            }
+
+            // 编辑输入框样式
+            .edit-input-wrapper {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+              width: 100%;
+
+              .ant-input {
+                flex: 1;
+                font-size: 12px;
+              }
+
+              .edit-actions {
+                display: flex;
+                gap: 2px;
+
+                .ant-btn {
+                  padding: 0;
+                  width: 20px;
+                  height: 20px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+
+                  .anticon {
+                    font-size: 10px;
+                  }
+                }
+              }
+            }
+          }
+
+          .ant-empty {
+            padding: 40px 20px;
+
+            .ant-empty-description {
+              color: #8c8c8c;
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .group-tag-select-dropdown-wrapper {
+    .ant-select-dropdown {
+      width: 90vw !important;
+      min-width: 320px !important;
+    }
+  }
+
+  .group-tag-select-dropdown {
+    .content-wrapper {
+      height: 300px;
+
+      .split-layout {
+        .groups-panel {
+          width: 120px;
+
+          .panel-header {
+            font-size: 12px;
+            padding: 6px 8px;
+          }
+
+          .groups-list {
+            .group-item {
+              padding: 6px 8px;
+
+              .group-name {
+                font-size: 12px;
+              }
+            }
+          }
+        }
+
+        .tags-panel {
+          .panel-header {
+            font-size: 12px;
+            padding: 6px 8px;
+          }
+
+          .tags-list {
+            .tag-item {
+              padding: 4px 8px;
+
+              .ant-checkbox-wrapper {
+                span:last-child {
+                  font-size: 12px;
+                }
+              }
+
+              .tag-name-only {
+                font-size: 12px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/components/GroupTag/GroupTagSelect.tsx
+++ b/src/components/GroupTag/GroupTagSelect.tsx
@@ -0,0 +1,100 @@
+// GroupTagSelect.tsx - 适配真实数据结构
+
+import { Select, Tag } from 'antd';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import GroupTagCore from './GroupTagCore';
+import type { GroupTagSelectProps, TagItem } from './types';
+import './GroupTagSelect.less';
+
+const GroupTagSelect: React.FC<GroupTagSelectProps> = ({
+  value = [],
+  onChange,
+  placeholder = '请选择标签',
+  className = '',
+  request,
+  editable = false,
+}) => {
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const [selectedTags, setSelectedTags] = useState<TagItem[]>([]);
+
+  useEffect(() => {
+    const v = selectedTags.map((tag) => tag.id);
+    onChange?.(v);
+  }, [selectedTags]);
+  const onTagsItem = (value: TagItem[]) => {
+    console.log(value, 'value');
+    setSelectedTags(value);
+  };
+  // 渲染下拉内容
+  const dropdownRender = useCallback(
+    () => (
+      <GroupTagCore
+        value={selectedTags}
+        requset={request}
+        editable={false}
+        onChange={onTagsItem}
+      />
+    ),
+    [selectedTags, request, editable],
+  );
+
+  // const
+
+  // 获取选中标签的详细信息
+  const options = useMemo(() => {
+    return selectedTags.map((item: TagItem) => ({
+      ...item,
+      label: item.tagName,
+      value: item.id,
+    }));
+  }, [selectedTags]);
+  return (
+    <div className={`group-tag-select-wrapper ${className}`}>
+      <Select
+        mode="multiple"
+        value={value}
+        fieldNames={{ label: 'tagName', value: 'id' }}
+        onChange={(newValue) => {
+          // console.log(newValue, "newValue");
+          const selectedItems = options.filter((option) =>
+            newValue.includes(option.id),
+          );
+          setSelectedTags(selectedItems);
+          onChange?.(selectedItems as unknown as number[]);
+        }}
+        placeholder={placeholder}
+        className="group-tag-select"
+        popupRender={dropdownRender}
+        classNames={{
+          popup: {
+            root: 'group-tag-select-dropdown-wrapper',
+          },
+        }}
+        popupMatchSelectWidth={false}
+        dropdownStyle={{
+          width: 600,
+          minWidth: 600,
+        }}
+        options={options}
+        tagRender={(props) => {
+          const { label, closable, onClose } = props;
+          console.log(props);
+          return (
+            <Tag closable={closable} onClose={onClose} className="selected-tag">
+              {label}
+            </Tag>
+          );
+        }}
+        showSearch={false}
+        onSelect={() => {}}
+        onDeselect={() => {}}
+        allowClear={true}
+        onClear={() => setSelectedTags([])}
+        open={dropdownVisible}
+        onOpenChange={setDropdownVisible}
+      />
+    </div>
+  );
+};
+
+export default GroupTagSelect;
--- a/src/components/GroupTag/TagsModal.tsx
+++ b/src/components/GroupTag/TagsModal.tsx
@@ -0,0 +1,98 @@
+import { Form, Input, Modal, Select } from 'antd';
+import { useEffect, useState } from 'react';
+
+interface TagsModalProps {
+  visible: boolean;
+  type: 'group' | 'tag';
+  modalType?: 'add' | 'edit' | 'delete';
+  onCancel: () => void;
+  groups: { id: number; groupName: string }[];
+  value: {
+    id?: number;
+    tagName?: string;
+    groupIds?: number[];
+    groupName?: string;
+  };
+  onConfirm: (values: { tagName: string; groupIds?: number[] }) => void;
+}
+const TagsModal = (props: TagsModalProps) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const { value, visible, type, modalType, groups, onCancel, onConfirm } =
+    props;
+
+  useEffect(() => {
+    form.setFieldsValue(value);
+    return () => {
+      form.resetFields();
+      setLoading(false);
+    };
+  }, [visible, value]);
+  const handleOk = async () => {
+    try {
+      setLoading(true);
+      const values = await form.validateFields();
+      await onConfirm(values);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return (
+    <Modal
+      title={`${modalType === 'add' ? '添加' : '编辑'}${
+        type === 'group' ? '分组' : '标签'
+      }`}
+      open={visible}
+      onOk={handleOk}
+      onCancel={onCancel}
+      okText="确定"
+      confirmLoading={loading}
+      cancelText="取消"
+      destroyOnHidden
+      width={400}
+    >
+      <Form
+        name="form"
+        form={form}
+        labelCol={{ span: 4 }}
+        wrapperCol={{ span: 20 }}
+        style={{ maxWidth: 600, marginTop: 30 }}
+      >
+        {type === 'tag' && modalType === 'add' && (
+          <Form.Item
+            label="分组"
+            name="groupIds"
+            rules={[{ required: true, message: '请选择分组' }]}
+          >
+            <Select
+              mode="multiple"
+              style={{ width: '100%', marginBottom: 10 }}
+              options={groups}
+              placeholder="请选择分组"
+              fieldNames={{ label: 'groupName', value: 'id' }}
+            ></Select>
+          </Form.Item>
+        )}
+        {type === 'tag' ? (
+          <Form.Item
+            label="标签"
+            name="tagName"
+            rules={[{ required: true, message: '请输入标签' }]}
+          >
+            <Input placeholder="请输入标签" />
+          </Form.Item>
+        ) : (
+          <Form.Item
+            label="分组"
+            name="groupName"
+            rules={[{ required: true, message: '请输入分组' }]}
+          >
+            <Input placeholder="请输入分组" />
+          </Form.Item>
+        )}
+      </Form>
+    </Modal>
+  );
+};
+
+export default TagsModal;
--- a/src/components/GroupTag/component.tsx
+++ b/src/components/GroupTag/component.tsx
@@ -0,0 +1,179 @@
+import { DeleteFilled, EditFilled } from '@ant-design/icons';
+import {
+  Button,
+  Checkbox,
+  type CheckboxChangeEvent,
+  Divider,
+  Empty,
+  List,
+  Skeleton,
+} from 'antd';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import type { GroupItem, TagItem } from './types';
+
+interface GroupsProps {
+  groups: GroupItem[];
+  onGroupClick: (group: GroupItem) => void;
+  currentId?: number;
+  editable?: boolean;
+  total?: number;
+  loadMoreData?: () => void;
+  pageSize?: number;
+  onEdit?: () => void;
+  onDelete?: (id: number) => void;
+}
+export const renderGroups = (data: GroupsProps) => {
+  const {
+    groups,
+    currentId,
+    total = groups.length,
+    onEdit,
+    onDelete,
+    loadMoreData,
+    onGroupClick,
+    pageSize = 10,
+    editable = false,
+  } = data;
+  const hasMore = groups.length < total * pageSize;
+  if (groups.length === 0) {
+    return (
+      <Empty description="暂无分组" image={Empty.PRESENTED_IMAGE_SIMPLE} />
+    );
+  }
+
+  return (
+    <InfiniteScroll
+      dataLength={groups.length}
+      next={loadMoreData ? loadMoreData : () => {}}
+      hasMore={loadMoreData ? hasMore : false}
+      loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
+      endMessage={loadMoreData ? <Divider plain>我已经是底线了</Divider> : ''}
+      scrollableTarget="scrollableDiv"
+    >
+      <List
+        dataSource={groups}
+        renderItem={(item) => (
+          <List.Item
+            key={item.id}
+            onClick={() => onGroupClick(item)}
+            className={`group-item ${currentId === item.id ? 'active' : ''}`}
+          >
+            <div>{item.groupName}</div>
+            {editable && (
+              <div className="group-options">
+                <Button
+                  type="link"
+                  size="small"
+                  icon={<EditFilled />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit?.();
+                  }}
+                />
+                <Button
+                  type="link"
+                  size="small"
+                  icon={<DeleteFilled />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete?.(item.id);
+                  }}
+                />
+              </div>
+            )}
+          </List.Item>
+        )}
+      />
+    </InfiniteScroll>
+  );
+};
+
+interface GroupTagProps {
+  list: TagItem[];
+  total: number;
+  // onTagItemClick: (tag: TagItem) => void;
+  onEdit?: (tag: TagItem) => Promise<void> | void;
+  loadMoreData: () => void;
+  onDelete?: (id: number) => void;
+  editable?: boolean;
+  pageSize?: number;
+  value: TagItem[];
+  onTagItemChange: (tag: TagItem, e: CheckboxChangeEvent) => void;
+}
+export const renderTags = (data: GroupTagProps) => {
+  const {
+    list,
+    total = list.length,
+    loadMoreData,
+    onEdit,
+    onDelete,
+    onTagItemChange,
+    editable,
+    value,
+  } = data;
+  if (list.length === 0) {
+    return (
+      <Empty description="暂无分组" image={Empty.PRESENTED_IMAGE_SIMPLE} />
+    );
+  }
+  console.log(list.length);
+  return (
+    <InfiniteScroll
+      dataLength={list.length}
+      next={loadMoreData}
+      hasMore={list.length < total}
+      loader={<Skeleton paragraph={{ rows: 1 }} active />}
+      endMessage={<Divider plain>我已经是底线了</Divider>}
+      scrollableTarget="scrollableDiv"
+    >
+      <List
+        dataSource={list}
+        renderItem={(item) => (
+          <List.Item
+            key={item.id}
+            // onClick={() => onTagItemClick(item)}
+            className="tag-item"
+          >
+            <div>
+              {!editable && (
+                <Checkbox
+                  checked={
+                    // value.find((tag) => tag.id === item.id) ? true : false
+                    !!value.find((tag) => tag.id === item.id)
+                  }
+                  onChange={(e) => onTagItemChange(item, e)}
+                  style={{ marginRight: '8px' }}
+                />
+              )}
+              {item.tagName}
+            </div>
+
+            {editable && (
+              <div className="group-options">
+                <Button
+                  type="link"
+                  size="small"
+                  icon={<EditFilled />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit?.(item);
+                    // onEditGroup(item.id);
+                  }}
+                />
+                <Button
+                  type="link"
+                  size="small"
+                  icon={<DeleteFilled />}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete?.(item.id);
+                  }}
+                />
+              </div>
+            )}
+          </List.Item>
+        )}
+      />
+    </InfiniteScroll>
+  );
+};
--- a/src/components/GroupTag/types.ts
+++ b/src/components/GroupTag/types.ts
@@ -0,0 +1,96 @@
+// types.ts
+export interface TagItem {
+  id: number;
+  tagName: string;
+  createTime: string;
+  groupId?: number; // 可选，因为API返回的数据可能没有这个字段
+}
+
+export interface GroupItem {
+  id: number;
+  groupName: string;
+  createTime?: string;
+  tags?: TagItem[];
+}
+
+// API响应类型
+export interface TagsResponse {
+  list: TagItem[];
+  total: number;
+}
+
+// export interface GroupsResponse {
+//   data: GroupItem[];
+// }
+
+// 核心组件的Props
+export interface GroupTagCoreProps {
+  // groups: GroupItem[];
+  requset: RequsetConfig;
+  height?: number;
+  editable?: boolean;
+  onChange?: (value: TagItem[]) => void;
+  value: TagItem[];
+  // selectedTags: number[];
+  // onTagChange?: (selectedTags: number[]) => void;
+  // onGroupClick?: (groupId: number) => void;
+  // onLoadMoreTags?: (groupId: number, page: number) => Promise<TagsResponse>;
+  // loading?: boolean;
+  // loadingGroups?: Set<number>;
+  // loadingMoreTags?: Set<number>;
+  // editable?: boolean;
+  // onAddGroup?: () => void;
+  // onAddTag?: (groupId: number) => void;
+  // onDeleteGroup?: (groupId: number) => Promise<void> | void;
+  // onDeleteTag?: (tagId: number) => Promise<void> | void;
+  // onEditGroup?: (groupId: number, newName: string) => Promise<void> | void;
+  // onEditTag?: (tagId: number, newName: string) => Promise<void> | void;
+  // className?: string;
+  // height?: number;
+  // showSearch?: boolean;
+  // pageSize?: number;
+}
+
+interface RequsetConfig<T = any> {
+  groupsApi: {
+    get: (params?: T) => Promise<any>;
+    create: (params: any) => Promise<any>;
+    delete: (id: number) => Promise<any>;
+    update: (params: T) => Promise<any>;
+  };
+  tagsApi: {
+    get: (params?: T) => Promise<any>;
+    create: (params: T) => Promise<any>;
+    delete: (id: number) => Promise<any>;
+    update: (params: T) => Promise<any>;
+  };
+}
+// Select组件的Props
+export interface GroupTagSelectProps {
+  value?: number[];
+  onChange?: (value: number[]) => void;
+  placeholder?: string;
+  className?: string;
+  request: RequsetConfig;
+  editable?: boolean;
+  // onAddGroup?: (groupName: string) => Promise<void> | void;
+  // onAddTag?: (groupId: number, tagName: string) => Promise<void> | void;
+  // onDeleteGroup?: (groupId: number) => Promise<void> | void;
+  // onDeleteTag?: (tagId: number) => Promise<void> | void;
+  // pageSize?: number;
+}
+
+// Modal组件的Props
+export interface GroupTagModalProps {
+  visible: boolean;
+  editable?: boolean;
+  onChange?: (value: TagItem[]) => void;
+  className?: string;
+  onCancel: () => void;
+  request: RequsetConfig;
+  onOk?: (selectedTags: TagItem[]) => void;
+  title?: string;
+  width?: number;
+  height?: number;
+  value?: TagItem[];
+}
--- a/src/components/RenameRule/index.less
+++ b/src/components/RenameRule/index.less
@@ -0,0 +1,170 @@
+// RenameRule.less
+.rename-rule-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  .rename-rule-card-preview {
+    display: flex;
+    .left {
+      width: 200px;
+    }
+  }
+  &:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px);
+  }
+
+  .ant-card-head {
+    background: linear-gradient(135deg, #1890ff, #36cfc9);
+    border-radius: 8px 8px 0 0;
+
+    .ant-card-head-title {
+      color: white;
+      font-weight: 600;
+    }
+
+    .ant-card-extra {
+      .ant-btn {
+        border-radius: 6px;
+        transition: all 0.3s ease;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.3) !important;
+          transform: translateY(-1px);
+        }
+
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+
+  .ant-card-body {
+    padding: 24px;
+  }
+
+  // 输入框样式
+  .ant-input,
+  .ant-input-number,
+  .ant-select-selector {
+    border-radius: 6px;
+    transition: all 0.3s ease;
+
+    &:focus,
+    &.ant-select-focused {
+      border-color: #40a9ff;
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+    }
+  }
+
+  // 行间距
+  .ant-row {
+    align-items: center;
+
+    .ant-col {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  // 预览信息样式
+  .preview-info {
+    background: #f6f8fa;
+    border: 1px solid #e1e4e8;
+    border-radius: 6px;
+    padding: 12px 16px;
+    margin-top: 8px;
+
+    .ant-typography {
+      margin: 0;
+    }
+  }
+
+  // Checkbox 样式
+  .ant-checkbox-wrapper {
+    .ant-checkbox {
+      &.ant-checkbox-checked {
+        .ant-checkbox-inner {
+          background-color: #1890ff;
+          border-color: #1890ff;
+        }
+      }
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .ant-card-body {
+      padding: 16px;
+    }
+
+    .ant-row {
+      margin-bottom: 16px;
+
+      .ant-col {
+        margin-bottom: 8px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .ant-card-extra {
+      .ant-space {
+        flex-direction: column;
+        width: 100%;
+
+        .ant-btn {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  // 暗色主题
+  @media (prefers-color-scheme: dark) {
+    background: #1f1f1f;
+    border-color: #303030;
+
+    .ant-card-head {
+      background: linear-gradient(135deg, #1668dc, #13c2c2);
+    }
+
+    .preview-info {
+      background: #262626;
+      border-color: #434343;
+    }
+  }
+
+  // 动画效果
+  .ant-space-item {
+    transition: all 0.3s ease;
+  }
+
+  // 禁用状态
+  .ant-input:disabled,
+  .ant-input-number:disabled {
+    background-color: #f5f5f5;
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+// 全局动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.rename-rule-card {
+  animation: fadeIn 0.3s ease-out;
+}
--- a/src/components/RenameRule/index.tsx
+++ b/src/components/RenameRule/index.tsx
@@ -0,0 +1,398 @@
+// RenameRule.tsx - 修复占位符替换顺序
+
+import {
+  DownOutlined,
+  ExclamationCircleOutlined,
+  QuestionCircleOutlined,
+  UpOutlined,
+} from '@ant-design/icons';
+import {
+  Alert,
+  Button,
+  Card,
+  Input,
+  InputNumber,
+  Select,
+  Space,
+  Tooltip,
+  Typography,
+} from 'antd';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import './index.less';
+
+const { Text } = Typography;
+const { Option } = Select;
+
+export interface FileItem {
+  id: number;
+  originalName: string;
+}
+
+export interface RenameRule {
+  pattern: string;
+  startNumber: number;
+  numberDirection: 'up' | 'down';
+  matchPattern: string;
+  useMatch: boolean;
+  numberPadding: number;
+}
+
+export interface RenameResult extends FileItem {
+  newName: string;
+  isChanged: boolean;
+  isMatched: boolean;
+}
+
+interface RenameRuleProps {
+  files: FileItem[];
+  onPreview?: (results: RenameResult[]) => void;
+  onRename?: (results: RenameResult[]) => void;
+  loading?: boolean;
+  className?: string;
+}
+
+// 占位符配置
+// const PLACEHOLDERS = [
+//   { key: "$n", desc: "数字序号(不补零)", example: "1, 2, 3..." },
+//   { key: "$nn", desc: "数字序号(2位补零)", example: "01, 02, 03..." },
+//   { key: "$nnn", desc: "数字序号(3位补零)", example: "001, 002, 003..." },
+//   { key: "$nnnn", desc: "数字序号(4位补零)", example: "0001, 0002, 0003..." },
+//   { key: "$name", desc: "原文件名", example: "photo1" },
+//   { key: "$ext", desc: "扩展名(不含点)", example: "jpg" },
+//   { key: "$EXT", desc: "扩展名(大写)", example: "JPG" },
+// ];
+
+const RenameRuleComponent: React.FC<RenameRuleProps> = ({
+  files,
+  onPreview,
+  className,
+}) => {
+  const [rule, setRule] = useState<RenameRule>({
+    pattern: '',
+    startNumber: 1,
+    numberDirection: 'up',
+    matchPattern: '',
+    useMatch: false,
+    numberPadding: 2,
+  });
+
+  const [matchError, setMatchError] = useState<string>('');
+
+  // 初始化时自动设置模式
+  useEffect(() => {
+    console.log(files);
+    if (files.length > 0 && !rule.pattern) {
+      setRule((prev) => ({ ...prev, pattern: '$name$nn' }));
+    }
+  }, [files, rule.pattern]);
+
+  // 安全的正则表达式匹配
+  const isFileMatched = useCallback(
+    (file: FileItem, pattern: string): boolean => {
+      if (!pattern.trim()) return true;
+
+      try {
+        const regex = new RegExp(pattern, 'i');
+        const fullFileName = file.originalName;
+
+        return (
+          regex.test(file.originalName) ||
+          // regex.test(file.extension) ||
+          // regex.test(file.extension?.replace(".", "")) ||
+          regex.test(fullFileName)
+        );
+      } catch (error) {
+        console.warn('正则表达式错误:', error);
+        setMatchError(
+          `正则表达式错误: ${
+            error instanceof Error ? error.message : '未知错误'
+          }`,
+        );
+        return false;
+      }
+    },
+    [],
+  );
+
+  // 修复的占位符替换函数
+  const replacePlaceholders = useCallback(
+    (pattern: string, file: FileItem, fileIndex: number) => {
+      let result = pattern;
+
+      // 计算序号
+      let number: number;
+      if (rule.numberDirection === 'up') {
+        number = rule.startNumber + fileIndex;
+      } else {
+        number = rule.startNumber - fileIndex;
+      }
+
+      // 先用临时标记替换非数字占位符
+      const tempMarkers = {
+        name: '___TEMP_NAME___',
+        ext: '___TEMP_EXT___',
+        EXT: '___TEMP_EXT_UPPER___',
+      };
+
+      // 第一步：替换非数字占位符为临时标记
+      result = result.replace(/\$name/g, tempMarkers.name);
+      result = result.replace(/\$EXT/g, tempMarkers.EXT);
+      result = result.replace(/\$ext/g, tempMarkers.ext);
+
+      // 第二步：替换数字占位符（按长度从长到短，避免冲突）
+      result = result.replace(/\$nnnn/g, number.toString().padStart(4, '0'));
+      result = result.replace(/\$nnn/g, number.toString().padStart(3, '0'));
+      result = result.replace(/\$nn/g, number.toString().padStart(2, '0'));
+      result = result.replace(/\$n/g, number.toString());
+
+      // 第三步：将临时标记替换为实际值
+      result = result.replace(
+        new RegExp(tempMarkers.name, 'g'),
+        file.originalName,
+      );
+      // result = result.replace(
+      //   new RegExp(tempMarkers.ext, "g"),
+      //   // file.extension.replace(".", "")
+      // );
+      // result = result.replace(
+      //   new RegExp(tempMarkers.EXT, "g"),
+      //   file.extension.replace(".", "").toUpperCase()
+      // );
+
+      return result;
+    },
+    [rule.startNumber, rule.numberDirection],
+  );
+
+  // 使用 useMemo 缓存计算结果
+  const previewResults = useMemo(() => {
+    setMatchError('');
+
+    const matchedFiles: FileItem[] = [];
+    const allResults: RenameResult[] = [];
+
+    files.forEach((file) => {
+      const isMatched = rule.useMatch
+        ? isFileMatched(file, rule.matchPattern)
+        : true;
+
+      if (isMatched) {
+        matchedFiles.push(file);
+      }
+    });
+
+    files.forEach((file) => {
+      const isMatched = rule.useMatch
+        ? isFileMatched(file, rule.matchPattern)
+        : true;
+
+      if (!isMatched || !rule.pattern) {
+        allResults.push({
+          ...file,
+          newName: file.originalName,
+          isChanged: false,
+          isMatched,
+        });
+        return;
+      }
+
+      const matchedIndex = matchedFiles.findIndex((f) => f.id === file.id);
+      const newName = replacePlaceholders(rule.pattern, file, matchedIndex);
+      const isChanged = newName !== file.originalName;
+
+      allResults.push({
+        ...file,
+        newName,
+        isChanged,
+        isMatched,
+      });
+    });
+
+    return allResults;
+  }, [files, rule, isFileMatched, replacePlaceholders]);
+
+  // 调用预览回调
+  useEffect(() => {
+    if (onPreview) {
+      onPreview(previewResults);
+    }
+  }, [previewResults]);
+
+  // // 重置规则
+  // const handleReset = useCallback(() => {
+  //   setRule({
+  //     pattern: "$name$nn",
+  //     startNumber: 1,
+  //     numberDirection: "up",
+  //     matchPattern: "",
+  //     useMatch: false,
+  //     numberPadding: 2,
+  //   });
+  //   setMatchError("");
+  // }, []);
+
+  // 规则更新处理函数
+  const updateRule = useCallback((updates: Partial<RenameRule>) => {
+    setRule((prev) => ({ ...prev, ...updates }));
+    if (updates.matchPattern !== undefined) {
+      setMatchError('');
+    }
+  }, []);
+
+  // // 插入占位符
+  // const insertPlaceholder = useCallback(
+  //   (placeholder: string) => {
+  //     const input = document.querySelector(
+  //       ".pattern-input"
+  //     ) as HTMLInputElement;
+  //     if (input) {
+  //       const start = input.selectionStart || 0;
+  //       const end = input.selectionEnd || 0;
+  //       const currentValue = rule.pattern;
+  //       const newValue =
+  //         currentValue.slice(0, start) + placeholder + currentValue.slice(end);
+  //       updateRule({ pattern: newValue });
+
+  //       setTimeout(() => {
+  //         input.focus();
+  //         input.setSelectionRange(
+  //           start + placeholder.length,
+  //           start + placeholder.length
+  //         );
+  //       }, 0);
+  //     }
+  //   },
+  //   [rule.pattern, updateRule]
+  // );
+
+  // // 递增起始编号
+  // const incrementStartNumber = useCallback(() => {
+  //   updateRule({ startNumber: rule.startNumber + 1 });
+  // }, [rule.startNumber, updateRule]);
+
+  // // 递减起始编号
+  // const decrementStartNumber = useCallback(() => {
+  //   updateRule({ startNumber: Math.max(0, rule.startNumber - 1) });
+  // }, [rule.startNumber, updateRule]);
+
+  // 快速设置常用模式
+  const setQuickPattern = useCallback(
+    (pattern: string) => {
+      updateRule({ pattern });
+    },
+    [updateRule],
+  );
+  return (
+    <Card className={`rename-rule-card ${className || ''}`}>
+      <div className="rename-rule-card-preview">
+        <div className="left">
+          <Text strong style={{ marginBottom: 8, display: 'block' }}>
+            预览:
+          </Text>
+          {previewResults.map((item) => (
+            <p key={item.id}>{`${item.newName}`}</p>
+          ))}
+        </div>
+        <Space direction="vertical" style={{ width: '100%' }} size="large">
+          {/* 错误提示 */}
+          {matchError && (
+            <Alert
+              message="匹配模式错误"
+              description={matchError}
+              type="error"
+              icon={<ExclamationCircleOutlined />}
+              closable
+              onClose={() => setMatchError('')}
+            />
+          )}
+
+          <Space wrap>
+            <Text strong>快速模式:</Text>
+            <Button
+              size="small"
+              onClick={() => setQuickPattern('$name$nn')}
+              type={rule.pattern === '$name$nn' ? 'primary' : 'default'}
+            >
+              原名+序号
+            </Button>
+            <Button
+              size="small"
+              onClick={() => setQuickPattern('$nn_$name')}
+              type={rule.pattern === '$nn_$name' ? 'primary' : 'default'}
+            >
+              序号+原名
+            </Button>
+            <Button
+              size="small"
+              onClick={() => setQuickPattern('新文件$nnn')}
+              type={rule.pattern === '新文件$nnn' ? 'primary' : 'default'}
+            >
+              新文件+序号
+            </Button>
+            <Button
+              size="small"
+              onClick={() => setQuickPattern('$name_副本$nn')}
+              type={rule.pattern === '$name_副本$nn' ? 'primary' : 'default'}
+            >
+              原名+副本
+            </Button>
+          </Space>
+
+          {/* 命名模式 */}
+
+          <Space>
+            <Input
+              className="pattern-input"
+              placeholder="例如: $name$nn 或 新文件$nnn"
+              value={rule.pattern}
+              allowClear
+              onChange={(e) => updateRule({ pattern: e.target.value })}
+              suffix={
+                <Tooltip title="使用占位符创建命名规则">
+                  <QuestionCircleOutlined style={{ color: '#bfbfbf' }} />
+                </Tooltip>
+              }
+            />
+          </Space>
+          <Input
+            placeholder="例如: photo (匹配包含photo的文件) 或 \.jpg$ (匹配jpg文件)"
+            value={rule.matchPattern}
+            allowClear
+            onChange={(e) => updateRule({ matchPattern: e.target.value })}
+          />
+          <Space>
+            <Text strong>起始编号:</Text>
+            <InputNumber
+              min={0}
+              max={9999}
+              value={rule.startNumber}
+              onChange={(value) => updateRule({ startNumber: value || 1 })}
+              style={{ width: '60%', textAlign: 'center' }}
+              controls={true}
+            />
+            <Select
+              value={rule.numberDirection}
+              onChange={(value) => updateRule({ numberDirection: value })}
+              style={{ width: '100%' }}
+            >
+              <Option value="up">
+                <Space>
+                  <UpOutlined />
+                  递增
+                </Space>
+              </Option>
+              <Option value="down">
+                <Space>
+                  <DownOutlined />
+                  递减
+                </Space>
+              </Option>
+            </Select>
+          </Space>
+        </Space>
+      </div>
+    </Card>
+  );
+};
+
+export default React.memo(RenameRuleComponent);
--- a/src/components/TagEditor/index.tsx
+++ b/src/components/TagEditor/index.tsx
@@ -7,11 +7,12 @@ import React, { useMemo, useState } from 'react';

 interface TagEditorProps {
  value?: string[];
-  onChange?: (value: string[]) => void;
+  onChange?: (value: string[], active?: number) => void;
  placeholder?: string;
  maxCount?: number;
  tagProps?: TagProps;
  disabled?: boolean;
+  editable?: boolean;
 }

 const TagEditor: React.FC<TagEditorProps> = ({
@@ -20,6 +21,7 @@ const TagEditor: React.FC<TagEditorProps> = ({
  placeholder = '请输入标签',
  maxCount,
  tagProps,
+  editable = true,
  disabled = false,
 }) => {
  // const [tags, setTags] = useState<string[]>(value);
@@ -27,12 +29,15 @@ const TagEditor: React.FC<TagEditorProps> = ({
  const [inputValue, setInputValue] = useState('');

  const tags = useMemo(() => {
+    console.log(value);
+
    return value || [];
  }, [value]);

  const handleClose = (removedTag: string) => {
+    const active = tags.indexOf(removedTag);
    const newTags = tags.filter((tag) => tag !== removedTag);
-    onChange?.(newTags);
+    onChange?.(newTags, active);
  };

  const showInput = () => {
@@ -85,6 +90,7 @@ const TagEditor: React.FC<TagEditorProps> = ({
        />
      ) : (
        canAddMore &&
+        editable &&
        !disabled && (
          <Tag
            onClick={showInput}
--- a/src/components/Upload/UploadCard/index.tsx
+++ b/src/components/Upload/UploadCard/index.tsx
@@ -6,7 +6,7 @@ import {
 import { message, Upload } from 'antd';
 import type { RcFile, UploadFile, UploadProps } from 'antd/lib/upload';
 import React, { useState } from 'react';
-import { createSample, getSample } from '@/services/ai/sample';
+import { createSample } from '@/services/ai/sample';
 import styles from './index.module.less';

 const { Dragger } = Upload;
@@ -65,15 +65,11 @@ const AudioUploader: React.FC<AudioUploaderProps> = ({
  // 实际的后端接口上传
  const uploadToServer = async (file: File) => {
    const formData = new FormData();
-    formData.append('file', file);
-    // formData.append("type", "audio"); // 可以添加额外参数
+    formData.append('files', file);

    const response = await createSample(formData);
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    return response.json();
+    message.success('上传成功！');
+    return response;
  };

  const customRequest: UploadProps['customRequest'] = async (options) => {
@@ -81,27 +77,22 @@ const AudioUploader: React.FC<AudioUploaderProps> = ({

    try {
      setUploading(true);
-
      // 模拟进度更新
      onProgress?.({ percent: 10 });
-
      // 调用后端接口
      const result = await uploadToServer(file as File);
-
+      console.log(result, 'res');
      onProgress?.({ percent: 100 });
-
-      if (result.success && result.data) {
+      if (result) {
        // 构造返回数据
        const responseData = {
-          url: result.data.url,
-          name: result.data.filename || (file as File).name,
+          url: result[0].fileUrl,
+          name: result[0].fileName || (file as File).name,
          uid: (file as any).uid,
          status: 'done' as const,
-          response: result.data,
+          response: result,
        };
-
        onSuccess?.(responseData);
-        message.success('音频上传成功！');
      } else {
        throw new Error(result.message || '上传失败');
      }
@@ -114,13 +105,13 @@ const AudioUploader: React.FC<AudioUploaderProps> = ({
    }
  };

-  const handleChange: UploadProps['onChange'] = ({
-    fileList: newFileList,
-    file,
-  }) => {
-    setFileList(newFileList);
-    onChange?.(newFileList);
-  };
+  // const handleChange: UploadProps["onChange"] = ({
+  //   fileList: newFileList,
+  //   file,
+  // }) => {
+  //   setFileList(newFileList);
+  //   onChange?.(newFileList);
+  // };

  const handleRemove = (file: UploadFile): boolean => {
    const newFileList = fileList.filter((item) => item.uid !== file.uid);
--- a/src/pages/ai/sample-tag/components/tag-manager.tsx
+++ b/src/pages/ai/sample-tag/components/tag-manager.tsx
@@ -0,0 +1,83 @@
+// 使用示例 - App.tsx
+
+import { Modal, message, Space } from 'antd';
+import React, { useEffect, useState } from 'react';
+import RenameRule, {
+  type FileItem,
+  type RenameResult,
+} from '@/components/RenameRule';
+import { updateSamples } from '@/services/ai/sample';
+
+const TagManager: React.FC<{
+  visible: boolean;
+  files: FileItem[];
+  onCancel?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onOk?: () => void;
+}> = ({ visible, files: beforeFiles, onCancel, onOk }) => {
+  const [files, setFiles] = useState<FileItem[]>(beforeFiles);
+  useEffect(() => {
+    setFiles(beforeFiles);
+  }, [beforeFiles]);
+
+  const [previewResults, setPreviewResults] = useState<RenameResult[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  // 预览回调o+
+  const handlePreview = (results: RenameResult[]) => {
+    setPreviewResults(results);
+  };
+
+  const handleOk = async () => {
+    try {
+      setLoading(true);
+      const results = previewResults.map((result) => ({
+        id: result.id,
+        sampleName: `${result.newName}`,
+      }));
+      await updateSamples(results);
+      onOk?.();
+      message.success('重命名成功');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // // 重命名回调
+  // const handleRename = async (results: RenameResult[]) => {
+  //   setLoading(true);
+  //   try {
+  //     console.log("执行预览:", results);
+  //     // 模拟API调用
+  //     await new Promise((resolve) => setTimeout(resolve, 1000));
+  //     message.success(`成功重命名 ${results.length} 个文件`);
+  //   } catch (error) {
+  //     message.error("重命名失败");
+  //   } finally {
+  //     setLoading(false);
+  //   }
+  // };
+
+  return (
+    <Modal
+      width={800}
+      onCancel={onCancel}
+      onOk={handleOk}
+      open={visible}
+      title="重命名文件"
+    >
+      <div style={{ padding: '24px' }}>
+        <Space direction="vertical" style={{ width: '100%' }} size="large">
+          {/* 独立的重命名规则组件 */}
+          <RenameRule
+            files={files}
+            onPreview={handlePreview}
+            // onRename={handleRename}
+            loading={loading}
+          />
+        </Space>
+      </div>
+    </Modal>
+  );
+};
+
+export default TagManager;
--- a/src/pages/ai/sample-tag/config.tsx
+++ b/src/pages/ai/sample-tag/config.tsx
@@ -1,14 +1,21 @@
-import type {
-  ProColumns,
-  ProFormColumnsType,
-} from '@ant-design/pro-components';
-import dayjs from 'dayjs';
-import TagEditor from '@/components/TagEditor';
-import TinyMCEEditor from '@/components/Tinymce';
-export const baseTenantColumns: ProColumns<API.CategoryDO>[] = [
+import type { ProColumns } from '@ant-design/pro-components';
+import GroupTagSelect from '@/components/GroupTag/GroupTagSelect';
+import {
+  type AiSampleRespVO,
+  createSampleTag,
+  createSampleTagGroup,
+  deleteSampleTag,
+  deleteSampleTagGroup,
+  getSampleTagGroup,
+  getSampleTagPage,
+  updateSampleTag,
+  updateSampleTagGroup,
+} from '@/services/ai/sample';
+export const baseTenantColumns: ProColumns<AiSampleRespVO>[] = [
  {
    title: '样本名称',
-    dataIndex: 'sample_name',
+    dataIndex: 'sampleName',
+    // width: 500,
  },
  {
    title: '注释',
@@ -19,6 +26,36 @@ export const baseTenantColumns: ProColumns<API.CategoryDO>[] = [
    title: '标签',
    hideInTable: true,
    dataIndex: 'tag_name',
+    valueType: 'select',
+    search: {
+      transform: (value) => {
+        console.log(value);
+        return value.join(',');
+      },
+    },
+
+    renderFormItem: (_) => {
+      return (
+        <GroupTagSelect
+          request={{
+            groupsApi: {
+              get: getSampleTagGroup,
+              create: createSampleTagGroup,
+              delete: deleteSampleTagGroup,
+              update: updateSampleTagGroup,
+            },
+            tagsApi: {
+              get: getSampleTagPage,
+              create: createSampleTag,
+              delete: deleteSampleTag,
+              update: updateSampleTag,
+            },
+          }}
+          editable
+          placeholder="请选择技术栈"
+        />
+      );
+    },
  },
  {
    title: '样本格式',
@@ -27,107 +64,107 @@ export const baseTenantColumns: ProColumns<API.CategoryDO>[] = [
  },
 ];

-export const formColumns = (data: {
-  type: string;
-  grade: number;
-}): ProFormColumnsType[] => [
-  {
-    title: '类目',
-    dataIndex: 'grade',
-    valueType: 'radio',
-    fieldProps: {
-      value: data.grade || 1,
-      options: [
-        { label: '一级类目', value: 1 },
-        { label: '二级类目', value: 2 },
-        { label: '三级类目', value: 3 },
-      ],
-      disabled: data.type === 'create',
-    },
-  },
-  {
-    title: '类目名称',
-    dataIndex: 'username',
-    formItemProps: {
-      rules: [
-        {
-          required: true,
-          message: '请输入用户名',
-        },
-      ],
-    },
-  },
-  {
-    title: '排序权重',
-    dataIndex: 'sort',
-    valueType: 'digit',
-  },
-  {
-    title: '类目描述',
-    dataIndex: 'description',
-    valueType: 'textarea',
-    renderFormItem: () => {
-      return <TinyMCEEditor />;
-    },
-  },
-  {
-    title: '关联父级',
-    dataIndex: 'parentId',
-    valueType: 'select',
-    hideInForm: data.grade - 1 === 0,
-  },
-  {
-    title: '类目icon',
-    dataIndex: 'icon',
-  },
-  {
-    title: '类目标签',
-    dataIndex: 'tages',
-    renderFormItem: () => {
-      return (
-        <TagEditor
-          placeholder="输入标签名称"
-          maxCount={10}
-          tagProps={{
-            color: 'blue',
-          }}
-        />
-      );
-    },
-  },
-  {
-    title: '类目状态',
-    dataIndex: 'status',
-    hideInForm: data.type === 'create',
-  },
-  {
-    title: '类目ID',
-    dataIndex: 'categoryId',
-    hideInForm: data.type === 'create',
-  },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    valueType: 'dateTime',
-    hideInForm: data.type === 'create',
-  },
-  {
-    title: '创建人',
-    dataIndex: 'creator',
-    hideInForm: data.type === 'create',
-  },
-  {
-    title: '更新时间',
-    dataIndex: 'updateTime',
-    valueType: 'dateTime',
-    hideInForm: data.type === 'create',
-  },
-  {
-    title: '更新人',
-    dataIndex: 'updator',
-    hideInForm: data.type === 'create',
-  },
-];
+// export const formColumns = (data: {
+//   type: string;
+//   grade: number;
+// }): ProFormColumnsType[] => [
+//   {
+//     title: "类目",
+//     dataIndex: "grade",
+//     valueType: "radio",
+//     fieldProps: {
+//       value: data.grade || 1,
+//       options: [
+//         { label: "一级类目", value: 1 },
+//         { label: "二级类目", value: 2 },
+//         { label: "三级类目", value: 3 },
+//       ],
+//       disabled: data.type === "create",
+//     },
+//   },
+//   {
+//     title: "类目名称",
+//     dataIndex: "username",
+//     formItemProps: {
+//       rules: [
+//         {
+//           required: true,
+//           message: "请输入用户名",
+//         },
+//       ],
+//     },
+//   },
+//   {
+//     title: "排序权重",
+//     dataIndex: "sort",
+//     valueType: "digit",
+//   },
+//   {
+//     title: "类目描述",
+//     dataIndex: "description",
+//     valueType: "textarea",
+//     renderFormItem: () => {
+//       return <TinyMCEEditor />;
+//     },
+//   },
+//   {
+//     title: "关联父级",
+//     dataIndex: "parentId",
+//     valueType: "select",
+//     hideInForm: data.grade - 1 === 0,
+//   },
+//   {
+//     title: "类目icon",
+//     dataIndex: "icon",
+//   },
+//   {
+//     title: "类目标签",
+//     dataIndex: "tages",
+//     renderFormItem: () => {
+//       return (
+//         <TagEditor
+//           placeholder="输入标签名称"
+//           maxCount={10}
+//           tagProps={{
+//             color: "blue",
+//           }}
+//         />
+//       );
+//     },
+//   },
+//   {
+//     title: "类目状态",
+//     dataIndex: "status",
+//     hideInForm: data.type === "create",
+//   },
+//   {
+//     title: "类目ID",
+//     dataIndex: "categoryId",
+//     hideInForm: data.type === "create",
+//   },
+//   {
+//     title: "创建时间",
+//     dataIndex: "createTime",
+//     valueType: "dateTime",
+//     hideInForm: data.type === "create",
+//   },
+//   {
+//     title: "创建人",
+//     dataIndex: "creator",
+//     hideInForm: data.type === "create",
+//   },
+//   {
+//     title: "更新时间",
+//     dataIndex: "updateTime",
+//     valueType: "dateTime",
+//     hideInForm: data.type === "create",
+//   },
+//   {
+//     title: "更新人",
+//     dataIndex: "updator",
+//     hideInForm: data.type === "create",
+//   },
+// ];

 // {
 //   title: "模板内容",
--- a/src/pages/ai/sample-tag/detail.tsx
+++ b/src/pages/ai/sample-tag/detail.tsx
@@ -1,81 +1,332 @@
-import {
-  ProForm,
-  ProFormCascader,
-  ProFormCheckbox,
-  ProFormColorPicker,
-  ProFormDigit,
-  ProFormDigitRange,
-  ProFormGroup,
-  ProFormRadio,
-  ProFormSelect,
-  ProFormSlider,
-  ProFormSwitch,
-  ProFormText,
-} from '@ant-design/pro-components';
-import { Switch } from 'antd';
+import { ProForm, ProFormGroup, ProFormText } from '@ant-design/pro-components';
+import { Button, message, Space, Tag } from 'antd';
+import type { RowSelectionType } from 'antd/es/table/interface';
 import type { FormInstance } from 'antd/lib';
-import Mock from 'mockjs';
-import { useRef, useState } from 'react';
-import TagEditor from '@/components/TagEditor';
+import dayjs from 'dayjs';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import GroupTagModal from '@/components/GroupTag/GroupTagModal';
+import type { TagItem } from '@/components/GroupTag/types';
+import type { FileItem } from '@/components/RenameRule';
+import {
+  createSampleTag,
+  createSampleTagGroup,
+  deleteSample,
+  deleteSampleTag,
+  deleteSampleTagGroup,
+  deleteSampleTagRelate,
+  getSampleTagGroup,
+  getSampleTagPage,
+  relateSample,
+  updateSamples,
+  updateSampleTag,
+  updateSampleTagGroup,
+} from '@/services/ai/sample';
+import TagManager from './components/tag-manager';

-export const waitTime = (time: number = 100) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(true);
-    }, time);
-  });
-};
+interface SampleTagDetailProps<T> {
+  onRefresh?: (type?: string) => void;
+  type: RowSelectionType;
+  data?: T[];
+}

-const SampleTagDetail = () => {
-  const [readonly, setReadonly] = useState(false);
+const SampleTagDetail = <T extends Record<string, any>>(
+  props: SampleTagDetailProps<T>,
+) => {
  const formRef = useRef<FormInstance>(null);
+  const { type = 'radio', data } = props;
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+  const [tagManagerVisible, setTagManagerVisible] = useState<boolean>(false);
+  const [value, setValue] = useState<{
+    tagId?: number | number[];
+    id?: number;
+    remark?: string;
+    sampleIds?: number[];
+    tags?: TagItem[];
+    updateTime?: number;
+    createTime?: number;
+    sampleSize?: number;
+    sampleMineType?: string;
+    sampleTime?: number;
+  }>({});
+  const handleAddTag = useCallback(() => {
+    setModalVisible(true);
+  }, [modalVisible]);
+
+  // const radioData = data && data[0];
+
+  // // 当 radioData 改变时更新表单值
+  useEffect(() => {
+    if (type === 'radio') {
+      const item = data?.[0];
+      setValue({ ...item, sampleIds: [item?.id] });
+    } else {
+      const sampleIds = data?.map((sample) => sample.id) || [];
+      const tags = data?.map((sample) => {
+        return sample.tags;
+      });
+      const map = new Map();
+      const tags_total = tags
+        ?.flat()
+        .filter((v) => !map.has(v.id) && map.set(v.id, v));
+      setValue({ tags: tags_total as TagItem[], sampleIds });
+    }
+  }, [type, data]);
+  useEffect(() => {
+    formRef.current?.setFieldsValue(value);
+  }, [value]);
+
+  const tagNames = useMemo<FileItem[]>(() => {
+    return (
+      data?.map((tag) => {
+        return {
+          id: tag.id,
+          originalName: tag.sampleName,
+        };
+      }) || []
+    );
+  }, [data]);
+
+  const onListAddTag = async (tags: TagItem[]) => {
+    const sampleIds = data?.map((sample) => sample.id);
+    const ids = tags?.map((tag) => tag.id);
+    await relateSample({ tagId: ids, sampleIds: sampleIds as number[] });
+    setModalVisible(false);
+    const map = new Map();
+    const newTags = [...(value.tags || []), ...tags];
+    const tags_total = newTags
+      ?.flat()
+      .filter((v) => !map.has(v.id) && map.set(v.id, v));
+    setValue({ ...value, tags: tags_total });
+    // 执行刷新回调
+    message.success('添加标签成功');
+    if (props.onRefresh) {
+      props.onRefresh();
+    }
+  };
+
+  const handleDeleteAll = async () => {
+    const ids = data?.map((sample) => sample.id);
+    if (ids) {
+      await deleteSample(ids.join(','));
+      message.success('删除成功');
+
+      if (props.onRefresh) {
+        props.onRefresh('delete');
+      }
+    }
+  };
+
+  // 下载
+  const handleDownloadAll = () => {};
+
+  const handleTagManager = () => {
+    setTagManagerVisible(true);
+  };
+
+  const forMap = (tags: TagItem[]) => (
+    <div style={{ display: 'inline-block', marginBottom: 10 }}>
+      {tags.map((tag) => (
+        <Tag
+          closable
+          key={tag.id}
+          style={{ marginBottom: 10 }}
+          onClose={async (e) => {
+            e.preventDefault();
+            await deleteSampleTagRelate({
+              sampleIds: value.sampleIds || [],
+              tagId: [tag.id],
+            });
+            message.success('删除成功');
+            props?.onRefresh?.();
+            setValue({ ...value, tags: tags.filter((t) => t.id !== tag.id) });
+          }}
+        >
+          {tag.tagName}
+        </Tag>
+      ))}
+    </div>
+  );
+
+  const onRename = () => {
+    props.onRefresh?.();
+    setTagManagerVisible(false);
+  };

  return (
    <>
-      {/* <Switch
-        style={{
-          marginBlockEnd: 16,
-        }}
-        checked={readonly}
-        checkedChildren="编辑"
-        unCheckedChildren="只读"
-        onChange={setReadonly}
-      /> */}
-      <ProForm
-        readonly={readonly}
-        name="validate_other"
-        formRef={formRef}
-        initialValues={{
-          sample_name: '1111',
-        }}
-        onValuesChange={(_, values) => {
-          console.log(values);
-        }}
-        onFinish={async (value) => console.log(value)}
-      >
-        <ProFormGroup title="预览">{/* <audio></audio> */}</ProFormGroup>
+      <ProForm name="validate_other" formRef={formRef} submitter={false}>
+        {type === 'radio' && (
+          <ProFormGroup title="预览">
+            {data?.[0].sampleFilePath && (
+              <audio
+                controls
+                preload="true"
+                crossOrigin="anonymous"
+                style={{ marginBottom: 24 }}
+              >
+                <source src={data[0].sampleFilePath} />
+                <track kind="captions" />
+              </audio>
+            )}
+          </ProFormGroup>
+        )}
        <ProFormGroup title="基本信息">
+          {type === 'radio' && (
+            <ProFormText
+              width="md"
+              name="sampleName"
+              placeholder="请输入样本名称"
+              fieldProps={{
+                onBlur: async (e) => {
+                  if (e.target.value) {
+                    const newData =
+                      data?.map((sample) => {
+                        return {
+                          id: sample.id,
+                          sampleName: e.target.value,
+                        };
+                      }) || [];
+                    await updateSamples(newData);
+                    props?.onRefresh?.();
+                    message.success('更新成功');
+                  }
+                },
+              }}
+              rules={[{ required: true, message: '样本名称不能为空' }]}
+            />
+          )}
          <ProFormText
            width="md"
-            name="sample_name"
-            placeholder="请输入样本名称"
-            rules={[{ required: true, message: '样本名称不能为空' }]}
+            fieldProps={{
+              onBlur: async (e) => {
+                if (e.target.value) {
+                  const newData =
+                    data?.map((sample) => {
+                      return {
+                        id: sample.id,
+                        remark: e.target.value,
+                      };
+                    }) || [];
+                  await updateSamples(newData);
+                  props?.onRefresh?.();
+                }
+              },
+            }}
+            name="remark"
+            placeholder="请输入注释"
          />
-          <ProFormText width="md" name="remark" placeholder="请输入注释" />
        </ProFormGroup>
-        <ProFormGroup
-          title="标签"
-          style={{
-            gap: '0 32px',
-          }}
+
+        <ProFormGroup title="标签">
+          {/* <Form.Item name="tag"> */}
+          {forMap(value.tags || [])}
+        </ProFormGroup>
+        <Button
+          type="dashed"
+          block
+          style={{ marginBottom: 24 }}
+          onClick={handleAddTag}
        >
-          <ProForm.Item name="tags">
-            <TagEditor placeholder="输入标签名称" maxCount={10} />
-          </ProForm.Item>
-        </ProFormGroup>
+          添加标签
+        </Button>
+        <ProFormGroup title="文本信息" block></ProFormGroup>
+        <Space size={10} style={{ width: '100%', marginBottom: 12 }}>
+          <span>添加日期: </span>
+          <span>{dayjs(value.createTime).format('YYYY-MM-DD HH:mm:ss')}</span>
+        </Space>
+        <Space size={10} style={{ width: '100%', marginBottom: 12 }}>
+          <span>修改日期</span>
+          <span>{dayjs(value.updateTime).format('YYYY-MM-DD HH:mm:ss')}</span>
+        </Space>
+        <Space size={10} style={{ width: '100%', marginBottom: 12 }}>
+          <span>文件大小: </span>
+          <span>{value.sampleSize}</span>
+        </Space>
+        <Space size={10} style={{ width: '100%', marginBottom: 12 }}>
+          <span>格式: </span>
+          <span>{value.sampleMineType}</span>
+        </Space>
+        <Space size={10} style={{ width: '100%', marginBottom: 12 }}>
+          <span>时长: </span>
+          <span>{value.sampleTime}</span>
+        </Space>
+
+        {type === 'checkbox' && (
+          <>
+            <ProFormGroup title="其他"></ProFormGroup>
+            <Button
+              block
+              style={{ marginBottom: 24 }}
+              onClick={handleTagManager}
+            >
+              批量重命名
+            </Button>
+            <Button
+              block
+              style={{ marginBottom: 24 }}
+              onClick={handleDownloadAll}
+            >
+              下载到本地
+            </Button>
+            <Button
+              block
+              color="danger"
+              style={{ marginBottom: 24 }}
+              onClick={handleDeleteAll}
+            >
+              删除样本
+            </Button>
+          </>
+        )}
      </ProForm>
+      <GroupTagModal
+        visible={modalVisible}
+        onCancel={() => setModalVisible(false)}
+        onChange={onListAddTag}
+        editable={false}
+        value={value?.tags}
+        request={{
+          groupsApi: {
+            get: getSampleTagGroup,
+            create: createSampleTagGroup,
+            delete: deleteSampleTagGroup,
+            update: updateSampleTagGroup,
+          },
+          tagsApi: {
+            get: getSampleTagPage,
+            create: createSampleTag,
+            delete: deleteSampleTag,
+            update: updateSampleTag,
+          },
+        }}
+        title="管理技术标签"
+        width={800}
+        height={500}
+      />
+      <TagManager
+        visible={tagManagerVisible}
+        files={tagNames}
+        onOk={onRename}
+        onCancel={() => setTagManagerVisible(false)}
+      ></TagManager>
+      <Space style={{ width: '100%', justifyContent: 'center', padding: 12 }}>
+        <Button color="danger" onClick={() => {}}>
+          下载
+        </Button>
+        <Button color="danger" variant="solid" onClick={handleDeleteAll}>
+          删除
+        </Button>
+      </Space>
    </>
  );
 };

-export default SampleTagDetail;
+export default React.memo(SampleTagDetail) as <T extends Record<string, any>>(
+  props: SampleTagDetailProps<T>,
+) => React.ReactElement;
--- a/src/pages/ai/sample-tag/index.module.less
+++ b/src/pages/ai/sample-tag/index.module.less
@@ -2,14 +2,20 @@
  display: flex;
  width: 100%;
  background: #fff;
+  overflow: auto;
  :global {
    .ant-pro-table {
      flex: 1 auto;
    }
    .detail {
+      display: flex;
+      flex-direction: column;
      border-left: 1px solid #e8e8e8;
      width: 400px;
      padding: 16px;
+      form {
+        flex: 1;
+      }
    }
  }
 }
--- a/src/pages/ai/sample-tag/index.tsx
+++ b/src/pages/ai/sample-tag/index.tsx
@@ -1,59 +1,125 @@
 import type { ActionType } from '@ant-design/pro-components';
+import type { RowSelectionType } from 'antd/es/table/interface';
 import React, { useRef, useState } from 'react';
 import EnhancedProTable from '@/components/EnhancedProTable';
 import type { ToolbarAction } from '@/components/EnhancedProTable/types';
+import GroupTagModal from '@/components/GroupTag/GroupTagModal';
 import UploadCard from '@/components/Upload/UploadCard';
+import {
+  type AiSampleRespVO,
+  createSampleTag,
+  createSampleTagGroup,
+  deleteSampleTag,
+  deleteSampleTagGroup,
+  getSamplePage,
+  getSampleTagGroup,
+  getSampleTagPage,
+  type SampleReqVo,
+  updateSampleTag,
+  updateSampleTagGroup,
+} from '@/services/ai/sample';
 import { baseTenantColumns } from './config';
 import SampleTagDetail from './detail';
 import styles from './index.module.less';

 const SampleTag: React.FC = () => {
  const tableRef = useRef<ActionType>(null);
-  // const [detail, setDetail] = useState<any>(null);
-  // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
-  const handleAll = () => {
-    // console.log(tableRef.current.getSelectedRowKeys());
+
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const [selectedRows, setSelectedRows] = useState<AiSampleRespVO[]>([]);
+
+  const [selectTableType, setSelectTableType] =
+    useState<RowSelectionType>('radio');
+
+  const handleAll = (selectTableType: RowSelectionType) => {
+    setSelectedRows([]);
+    setSelectTableType(selectTableType === 'radio' ? 'checkbox' : 'radio');
+  };
+
+  const handleTags = () => {
+    setModalVisible(true);
  };
  const toolbarActions: ToolbarAction[] = [
    {
      key: 'add',
-      label: '批量编辑',
+      label: selectTableType === 'checkbox' ? '取消编辑' : '批量编辑',
+      onClick: () => handleAll(selectTableType),
+    },
+    {
+      key: 'tags',
+      label: '标签管理',
      type: 'primary',
-
-      onClick: handleAll,
+      onClick: handleTags,
    },
  ];
-  const onFetch = async (_params: API.getProductCategoryCategoryListParams) => {
-    // const data = await getCategoryList({
-    //   ...params,
-    // });
-    const data: any = [
-      { sample_name: 111, id: 1, remark: 222 },
-      { sample_name: 22, id: 2, remark: 33 },
-    ];
+  const onFetch = async (params: SampleReqVo) => {
+    const data = await getSamplePage({
+      ...params,
+    });
    return {
-      data: data,
+      data: data.list,
+      total: data.total,
      success: true,
    };
  };
-
+  const onRefresh = (type?: string) => {
+    tableRef.current?.reload();
+    tableRef.current?.onValuesChange({}, {});
+    type && setSelectedRows([]);
+  };
  return (
    <>
      <UploadCard />
      <div className={styles['tag-content']}>
-        <EnhancedProTable<API.CategoryDO>
+        <EnhancedProTable<AiSampleRespVO>
          ref={tableRef}
          columns={baseTenantColumns}
          request={onFetch}
          toolbarActions={toolbarActions}
          headerTitle="样本列表"
          showIndex={false}
-          showSelection={true}
+          enableRowClick={true}
+          rowSelection={{
+            type: selectTableType,
+            selectedRowKeys: selectedRows.map((item) => item.id) as React.Key[],
+            onChange: (_, selectedRows) => {
+              setSelectedRows(selectedRows);
+            },
+          }}
        />
-        <div className="detail">
-          <SampleTagDetail />
-        </div>
+        {selectedRows.length > 0 && (
+          <div className="detail">
+            <SampleTagDetail<AiSampleRespVO>
+              type={selectTableType}
+              data={selectedRows}
+              onRefresh={onRefresh}
+            />
+          </div>
+        )}
      </div>
+      <GroupTagModal
+        visible={modalVisible}
+        onCancel={() => setModalVisible(false)}
+        editable={true}
+        request={{
+          groupsApi: {
+            get: getSampleTagGroup,
+            create: createSampleTagGroup,
+            delete: deleteSampleTagGroup,
+            update: updateSampleTagGroup,
+          },
+          tagsApi: {
+            get: getSampleTagPage,
+            create: createSampleTag,
+            delete: deleteSampleTag,
+            update: updateSampleTag,
+          },
+        }}
+        title="管理技术标签"
+        width={800}
+        height={500}
+      />
    </>
  );
 };
--- a/src/requestErrorConfig.ts
+++ b/src/requestErrorConfig.ts
@@ -1,25 +1,19 @@
 import type { RequestOptions } from '@@/plugin-request/request';
 import type { RequestConfig } from '@umijs/max';
 import { request } from '@umijs/max';
-import { message, notification } from 'antd';
-import { deleteUserCache } from '@/hooks/web/useCache';
-import {
-  getAccessToken,
-  getRefreshToken,
-  getTenantId,
-  setToken,
-} from './utils/auth';
+import { message } from 'antd';
+import { getAccessToken, getRefreshToken, setToken } from './utils/auth';

-const tenantEnable = process.env.VITE_APP_TENANT_ENABLE;
+// const tenantEnable = process.env.VITE_APP_TENANT_ENABLE;
 // const { result_code, base_url, request_timeout } = config;
 // 错误处理方案： 错误类型
-enum ErrorShowType {
-  SILENT = 0,
-  WARN_MESSAGE = 1,
-  ERROR_MESSAGE = 2,
-  NOTIFICATION = 3,
-  REDIRECT = 9,
-}
+// enum ErrorShowType {
+//   SILENT = 0,
+//   WARN_MESSAGE = 1,
+//   ERROR_MESSAGE = 2,
+//   NOTIFICATION = 3,
+//   REDIRECT = 9,
+// }
 // 与后端约定的响应数据格式
 interface ResponseStructure {
  success: boolean;
@@ -27,27 +21,28 @@ interface ResponseStructure {
  code?: number;
  msg?: string;
 }
-const ignoreMsgs = [
-  '无效的刷新令牌', // 刷新令牌被删除时，不用提示
-  '刷新令牌已过期', // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面
-];

-import { EventEmitter } from 'events';
+// const ignoreMsgs = [
+//   "无效的刷新令牌", // 刷新令牌被删除时，不用提示
+//   "刷新令牌已过期", // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面
+// ];
+
+import { EventEmitter } from 'node:events';
 export const requestEventBus = new EventEmitter();
-const errorCode: { [key: string]: string } = {
-  '400': '请求参数不正确',
-  '401': '账号未登录',
-  '403': '当前操作没有权限',
-  '404': '访问资源不存在',
-  '405': '请求方法不正确',
-  '423': '请求失败，请稍后重试',
-  '429': '请求失败，请稍后重试',
-  '500': '系统异常',
-  '501': '功能未实现/未开启',
-  '502': '错误的配置项',
-  '900': '重复请求，请稍后重试',
-  default: '系统未知错误，请反馈给管理员',
-};
+// const errorCode: { [key: string]: string } = {
+//   "400": "请求参数不正确",
+//   "401": "账号未登录",
+//   "403": "当前操作没有权限",
+//   "404": "访问资源不存在",
+//   "405": "请求方法不正确",
+//   "423": "请求失败，请稍后重试",
+//   "429": "请求失败，请稍后重试",
+//   "500": "系统异常",
+//   "501": "功能未实现/未开启",
+//   "502": "错误的配置项",
+//   "900": "重复请求，请稍后重试",
+//   default: "系统未知错误，请反馈给管理员",
+// };

 /**
 * @name 错误处理
@@ -113,7 +108,7 @@ export const errorConfig: RequestConfig = {
      const errorInfo: ResponseStructure | undefined = error.info;
      if (error.name === 'BizError') {
        if (errorInfo) {
-          const { msg, code } = errorInfo;
+          const { msg } = errorInfo;
          message.error(msg);
        }
      } else if (error.response) {
@@ -123,7 +118,7 @@ export const errorConfig: RequestConfig = {
      } else if (error.request) {
        message.error('None response! Please retry.');
      } else {
-        message.error('发送请求时出了点问题:' + error.msg);
+        message.error(`发送请求时出了点问题:${error.msg}`);
      }
    },
  },
@@ -165,6 +160,9 @@ export const errorConfig: RequestConfig = {
      //   // 如果是忽略的错误码，直接返回 msg 异常
      //   return Promise.reject(msg);
      // }
+      if (!config.url) {
+        throw new Error('请求URL不能为空');
+      }
      // 发送请求时出了点问题
      if (code === 401) {
        if (!isRefreshToken) {
@@ -181,21 +179,25 @@ export const errorConfig: RequestConfig = {
            setToken(refreshTokenRes);
            // 发出 token 刷新事件
            requestEventBus.emit('token-refreshed');
-          } catch (e) {
+          } catch (_) {
            // 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。
            // 提示是否要登出。即不回放当前请求！不然会形成递归
            return handleAuthorized();
          } finally {
            isRefreshToken = false;
          }
-          return request(config.url!, config);
+          return request(config.url, config);
        } else {
          console.log('刷新令牌失败');
          //添加到队列，等待刷新获取到新的令牌
          return new Promise((resolve) => {
            requestList.push(() => {
-              config.headers!.Authorization = 'Bearer ' + getAccessToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
-              resolve(request(config.url!, config));
+              if (!config.url) {
+                throw new Error('请求URL不能为空');
+              }
+              if (config.headers)
+                config.headers.Authorization = `Bearer ${getAccessToken()}`; // 让每个请求携带自定义token 请根据实际情况自行修改
+              resolve(request(config.url, config));
            });
          });
        }
--- a/src/services/ai/sample/index.ts
+++ b/src/services/ai/sample/index.ts
@@ -94,7 +94,7 @@ export interface SampleReqVo extends PageParam {

 // 获得样本库分页
 export const getSamplePage = async (params: SampleReqVo) => {
-  return request("/ai/sample/get", {
+  return request("/ai/sample/page", {
    method: "GET",
    params,
  });
@@ -106,30 +106,6 @@ export const getSample = async (id: number) => {
  });
 };

-// 查询部门列表
-// export const getDeptPage = async (params: DeptReq): Promise<Dept[]> => {
-//     return await request.get({ url: "/system/dept/list", params });
-//   };
-
-export const getDeptPage = (params: SampleReqVo) => {
-  return request("/system/dept/list", {
-    method: "GET",
-    params,
-  });
-};
-
-// 查询部门详情
-// export const getDept = async (id: number) => {
-//     return await request.get({ url: "/system/dept/get?id=" + id });
-//   };
-
-export const getDept = (id: number) => {
-  return request("/system/dept/get", {
-    method: "GET",
-    params: { id },
-  });
-};
-
 // 创建样本库
 export const createSample = (formData: FormData) => {
  return request("/ai/sample/create", {
@@ -148,14 +124,123 @@ export const updateSample = (params: SampleReqVo) => {
  });
 };

-// 删除部门
-// export const deleteDept = async (id: number) => {
-//   return await request.delete({ url: "/system/dept/delete?id=" + id });
-// };
-
-export const deleteSample = (id: number) => {
+export const deleteSample = (id: string) => {
  return request("/ai/sample/delete", {
    method: "DELETE",
    params: { id },
  });
 };
+
+//获得样本标签分组库列表
+export const getSampleTagGroup = async () => {
+  return request("/ai/sampleTagGroup/list", {
+    method: "GET",
+  });
+};
+
+//创建样本标签分组库
+export const createSampleTagGroup = (data: { groupName: string }) => {
+  return request("/ai/sampleTagGroup/create", {
+    method: "POST",
+    data,
+  });
+};
+
+//添加关联标签
+
+export const relateSample = (data: {
+  tagId: number[];
+  sampleIds: number[];
+}) => {
+  return request("/ai/sample/relate", {
+    method: "PUT",
+    data,
+  });
+};
+
+// 删除管理标签
+export const deleteSampleTagRelate = (data: {
+  tagId: number[];
+  sampleIds: number[];
+}) => {
+  return request("/ai/sample/deleteRelate", {
+    method: "DELETE",
+    data,
+  });
+};
+
+//更新样本库
+export const updateSamples = (
+  params: { id: number; remark?: string; sampleName?: string }[]
+) => {
+  return request("/ai/sample/updates", {
+    method: "PUT",
+    data: params,
+  });
+};
+
+// 删除样本标签分组库
+
+export const deleteSampleTagGroup = async (id?: number) => {
+  return request("/ai/sampleTagGroup/delete", {
+    method: "DELETE",
+    params: { id },
+  });
+};
+
+//更新样本标签分组库
+
+export const updateSampleTagGroup = async (params: {
+  id: number;
+  groupName: string;
+}) => {
+  return request("/ai/sampleTagGroup/update", {
+    method: "PUT",
+    data: params,
+  });
+};
+
+//获得样本标签库分页
+
+export const getSampleTagPage = async (params: {
+  groupId?: number;
+  pageNo?: number;
+  pageSize?: number;
+}) => {
+  return request("/ai/sampleTag/page", {
+    method: "GET",
+    params,
+  });
+};
+
+//创建样本标签库
+
+export const createSampleTag = (data: {
+  groupIds: number[];
+  tagName: string;
+}) => {
+  return request("/ai/sampleTag/create", {
+    method: "POST",
+    data,
+  });
+};
+
+// 删除样本标签库
+export const deleteSampleTag = async (id?: number) => {
+  return request("/ai/sampleTag/delete", {
+    method: "DELETE",
+    params: { id },
+  });
+};
+
+//更新样本标签库
+
+export const updateSampleTag = async (params: {
+  groupIds: number[];
+  tagName: string;
+}) => {
+  return request("/ai/sampleTag/update", {
+    method: "PUT",
+    data: params,
+  });
+};