refactor(web): OverflowTags replace

web/src/components/OverflowTags/index.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState, useLayoutEffect, useCallback, type ReactNode } from 'react'
-import { Popover } from 'antd'
+import { Popover, type PopoverProps } from 'antd'
 import Tag, { type TagProps } from '@/components/Tag'
 
 interface OverflowTagsProps {
@@ -7,9 +7,10 @@ interface OverflowTagsProps {
   gap?: number;
   numTagColor?: TagProps['color'];
   numTag?: (num?: number) => ReactNode;
+  popoverProps?: PopoverProps | false;
 }
 
-const OverflowTags = ({ items, gap = 8, numTagColor = 'default', numTag }: OverflowTagsProps) => {
+const OverflowTags = ({ items, gap = 8, numTagColor = 'default', numTag, popoverProps }: OverflowTagsProps) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const measureRef = useRef<HTMLDivElement>(null)
   const [visibleCount, setVisibleCount] = useState(items.length)
@@ -66,11 +67,15 @@ const OverflowTags = ({ items, gap = 8, numTagColor = 'default', numTag }: Overf
         {items.map((item, i) => <span key={i}>{item}</span>)}
         <Tag>+0</Tag>
       </div>
-      <Popover content={
-        <div style={{ display: 'flex', gap, flexWrap: 'wrap', maxWidth: 300 }}>
-          {items.map((item, i) => <span key={i}>{item}</span>)}
-        </div>
-      }>
+      <Popover
+        content={
+          <div style={{ display: 'flex', gap, flexWrap: 'wrap', maxWidth: 300 }}>
+            {items.map((item, i) => <span key={i}>{item}</span>)}
+          </div>
+        }
+        {...(popoverProps || {})}
+        open={popoverProps === false ? false : undefined}
+      >
         <div style={{ display: 'flex', gap, alignItems: 'center', flexWrap: 'nowrap' }}>
           {items.slice(0, visibleCount).map((item, i) => <span key={i}>{item}</span>)}
           {hidden > 0 && numTag

web/src/components/Tag/index.tsx

@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-02 15:29:57 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-02 15:29:57 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-04-22 11:39:15
  */
 /**
  * Tag Component
@@ -23,6 +23,7 @@ export interface TagProps {
   children: ReactNode;
   /** Additional CSS classes */
   className?: string;
+  variant?: 'outline' | 'borderless'
 }
 
 /** Color theme mappings with text, border, and background colors */
@@ -37,9 +38,9 @@ const colors = {
 }
 
 /** Custom tag component with color themes */
-const Tag: FC<TagProps> = ({ color = 'processing', children, className }) => {
+const Tag: FC<TagProps> = ({ color = 'processing', children, className, variant = 'outline' }) => {
   return (
-    <span className={`rb:inline-block rb:px-1 rb:py-0.5 rb:rounded-sm rb:text-[12px] rb:font-regular! rb:leading-4 rb:border ${colors[color]} ${className || ''}`}>
+    <span className={`rb:inline-block rb:px-1 rb:py-0.5 rb:rounded-sm rb:text-[12px] rb:font-regular! rb:leading-4 rb:border ${colors[color]} ${className || ''}, ${variant === 'borderless' ? 'rb:border-none!' : ''}`}>
       {children}
     </span>
   )

web/src/views/ModelManagement/List.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:50:10 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 19:18:55
+ * @Last Modified time: 2026-04-22 10:31:49
  */
 /**
  * Model List View
@@ -11,13 +11,14 @@
  */
 
 import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Button, Flex, Row, Col, Tooltip, Popover } from 'antd'
+import { Button, Flex, Row, Col, Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next';
 
 import type { ProviderModelItem, KeyConfigModalRef, ModelListDetailRef, ModelListItem, BaseRef } from './types'
 import RbCard from '@/components/RbCard'
 import { getModelNewList } from '@/api/models'
 import PageEmpty from '@/components/Empty/PageEmpty';
+import OverflowTags from '@/components/OverflowTags';
 import Tag from '@/components/Tag';
 import KeyConfigModal from './components/KeyConfigModal'
 import ModelListDetail from './components/ModelListDetail'
@@ -76,13 +77,9 @@ const ModelList = forwardRef<BaseRef, { query: any; handleEdit: (vo?: ModelListI
                     <div className="rb:wrap-break-word rb:line-clamp-1">{String(item.provider).charAt(0).toUpperCase() + String(item.provider).slice(1)}</div>
                   </Tooltip>
 
-                  <Popover content={
-                    <Flex gap={8} className="rb:overflow-hidden rb:flex-nowrap rb:w-auto!">{item.tags.map(tag => <Tag key={tag} className="rb:shrink-0">{t(`modelNew.${tag}`)}</Tag>)}</Flex>
-                  }>
-                    <Flex gap={8} className="rb:overflow-hidden rb:flex-nowrap rb:w-auto!">
-                      {item.tags.map(tag => <Tag key={tag} className="rb:shrink-0">{t(`modelNew.${tag}`)}</Tag>)}
-                    </Flex>
-                  </Popover>
+                  <OverflowTags
+                    items={item.tags.map(tag => <Tag>{t(`modelNew.${tag}`)}</Tag>)}
+                  />
                 </Flex>}
                 isNeedTooltip={false}
                 footer={<Row gutter={9} className="rb:pt-2!">

web/src/views/ModelManagement/components/ModelListDetail.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:49:45 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 18:06:23
+ * @Last Modified time: 2026-04-22 10:24:32
  */
 /**
  * Model List Detail Drawer
@@ -12,12 +12,13 @@
 
 import { useState, useImperativeHandle, forwardRef, useRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Switch, Row, Col, Space, Tooltip, Popover } from 'antd'
+import { Button, Switch, Row, Col, Tooltip } from 'antd'
 
 import type { ProviderModelItem, ModelListItem, ModelListDetailRef, MultiKeyConfigModalRef } from '../types';
 import RbDrawer from '@/components/RbDrawer';
 import RbCard from '@/components/RbCard/Card'
 import Tag from '@/components/Tag';
+import OverflowTags from '@/components/OverflowTags';
 import PageEmpty from '@/components/Empty/PageEmpty';
 import MultiKeyConfigModal from './MultiKeyConfigModal'
 import { getModelNewList, updateModelStatus, modelTypeUrl } from '@/api/models'
@@ -139,18 +140,13 @@ const ModelListDetail = forwardRef<ModelListDetailRef, ModelListDetailProps>(({
               key={item.id}
               title={item.name}
               subTitle={
-                <Popover content={
-                  <Space size={8} className="rb:mt-1!">
-                    <Tag>{t(`modelNew.${item.type}`)}</Tag>
-                    <Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>
-                    {item.capability?.map(vo => <Tag key={vo}>{t(`modelNew.${vo}`)}</Tag>)}
-                  </Space>}>
-                  <Space size={8} className="rb:mt-1!">
-                    <Tag>{t(`modelNew.${item.type}`)}</Tag>
-                    <Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>
-                    {item.capability?.map(vo => <Tag key={vo}>{t(`modelNew.${vo}`)}</Tag>)}
-                  </Space>
-                </Popover>}
+                <OverflowTags
+                  items={[
+                    <Tag>{t(`modelNew.${item.type}`)}</Tag>,
+                    <Tag color="warning">{item.api_keys.length}{t('modelNew.apiKeyNum')}</Tag>,
+                    ...(item.capability ?? []).map(vo => <Tag>{t(`modelNew.${vo}`)}</Tag>)
+                  ]}
+                />}
               avatarUrl={getLogoUrl(item.logo)}
               avatar={
                 <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">

web/src/views/Ontology/index.tsx

@@ -2,13 +2,13 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 14:10:15 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 15:03:09
+ * @Last Modified time: 2026-04-22 11:47:38
  */
 import { type FC, useState, useRef } from 'react';
 import type { MenuInfo } from 'rc-menu/lib/interface';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Row, Col, Flex, Space, App, Tooltip, Dropdown } from 'antd'
+import { Row, Col, Flex, Space, Tooltip } from 'antd'
 
 import SearchInput from '@/components/SearchInput';
 import OntologyModal from './components/OntologyModal'
@@ -21,6 +21,9 @@ import { formatDateTime } from '@/utils/format'
 import OntologyImportModal from './components/OntologyImportModal'
 import OntologyExportModal from './components/OntologyExportModal'
 import RbButton from '@/components/RbButton'
+import MoreDropdown from '@/components/MoreDropdown'
+import useDeleteConfirm from '@/hooks/useDeleteConfirm'
+import OverflowTags from '@/components/OverflowTags'
 
 /**
  * Ontology management page component
@@ -30,7 +33,7 @@ const Ontology: FC = () => {
   // Hooks
   const { t } = useTranslation();
   const navigate = useNavigate()
-  const { modal, message } = App.useApp();
+  const deleteConfirm = useDeleteConfirm();
   
   // State
   const [query, setQuery] = useState<Query>({});
@@ -65,18 +68,9 @@ const Ontology: FC = () => {
    */
   const handleDelete = (item: OntologyItem, e: MenuInfo) => {
     e.domEvent.stopPropagation();
-    modal.confirm({
-      title: t('common.confirmDeleteDesc', { name: item.scene_name }),
-      okText: t('common.delete'),
-      cancelText: t('common.cancel'),
-      okType: 'danger',
-      onOk: () => {
-        deleteOntologyScene(item.scene_id)
-          .then(() => {
-            message.success(t('common.deleteSuccess'))
-            scrollListRef.current?.refresh()
-          })
-      }
+    deleteConfirm({
+      name: item.scene_name,
+      onOk: () => deleteOntologyScene(item.scene_id).then(() => scrollListRef.current?.refresh()),
     })
   }
   
@@ -145,27 +139,22 @@ const Ontology: FC = () => {
                     {item.is_system_default  && <Tag color="warning">{t('common.default')}</Tag>}
                   </Space>
                 </Flex>
-                <Dropdown
-                  menu={{
-                    items: [
-                      {
-                        key: 'edit',
-                        icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit_bold.svg')]" />,
-                        label: t('common.edit'),
-                        onClick: (e: MenuInfo) => handleEdit(item, e),
-                      },
-                      {
-                        key: 'delete',
-                        icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red_big.svg')]" />,
-                        label: t('common.delete'),
-                        onClick: (e: MenuInfo) => handleDelete(item, e),
-                      },
-                    ]
-                  }}
-                  placement="bottomRight"
-                >
-                  <div onClick={(e) => e.stopPropagation()} className="rb:cursor-pointer rb:size-5.5 rb:bg-[url('@/assets/images/common/more.svg')] rb:hover:bg-[url('@/assets/images/common/more_hover.svg')]"></div>
-                </Dropdown>
+                <MoreDropdown
+                  items={[
+                    {
+                      key: 'edit',
+                      icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/edit_bold.svg')]" />,
+                      label: t('common.edit'),
+                      onClick: (e: MenuInfo) => handleEdit(item, e),
+                    },
+                    {
+                      key: 'delete',
+                      icon: <div className="rb:size-4 rb:bg-cover rb:cursor-pointer rb:bg-[url('@/assets/images/common/delete_red_big.svg')]" />,
+                      label: t('common.delete'),
+                      onClick: (e: MenuInfo) => handleDelete(item, e),
+                    },
+                  ]}
+                />
               </Flex>
             }
             isNeedTooltip={false}
@@ -177,16 +166,13 @@ const Ontology: FC = () => {
               <div className="rb:h-10 rb:wrap-break-word rb:line-clamp-2 rb:leading-5">{item.scene_description}</div>
             </Tooltip>
 
-            <Flex gap={8} wrap align="center" className="rb:mt-2!">
-              <Flex gap={8} className="rb:flex-1 rb:overflow-hidden rb:wrap-break-word! rb:line-clamp-1!">
-                {item.entity_type?.map((type, i) => (
-                  <span key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">{type}</span>
-                ))}
-              </Flex>
-              {item.type_num > 3 && (
-                <span className="rb:bg-[#F6F6F6] rb:rounded-full rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">+{item.type_num - 3}</span>
-              )}
-            </Flex>
+            <div className="rb:mt-2">
+              <OverflowTags
+                popoverProps={false}
+                items={[...item.entity_type?.map((type, i) => <Tag key={i} variant="borderless" color="dark">{type}</Tag>), <Tag variant="borderless" color="dark">{`+${item.type_num - 3}`}</Tag>]}
+                numTag={(num?: number) => <Tag variant="borderless" color="dark">{`+${item.type_num - 3 + (num ? num - 1 : 0)}`}</Tag>}
+              />
+            </div>
 
             <Row className="rb:mt-4!">
               {(['created_at', 'updated_at'] as const).map(key => (

web/src/views/ToolManagement/Custom.tsx

@@ -16,6 +16,8 @@ import BodyWrapper from '@/components/Empty/BodyWrapper'
 import RbCard from '@/components/RbCard'
 import { getTools, deleteTool } from '@/api/tools'
 import { formatDateTime } from '@/utils/format'
+import OverflowTags from '@/components/OverflowTags'
+import Tag from '@/components/Tag'
 
 const Custom = forwardRef<CustomRef, { getStatusTag: (status: string) => ReactNode; keyword?: string | undefined }>(({ getStatusTag, keyword }, ref) => {
   const { t } = useTranslation();
@@ -110,24 +112,12 @@ const Custom = forwardRef<CustomRef, { getStatusTag: (status: string) => ReactNo
                 isNeedTooltip={false}
               >
                 {item.tags?.length > 0
-                  ? <Flex gap={8} wrap align="center">
-                    <Flex gap={6}>
-                      {item.tags?.slice(0, 2).map((type, i) => (
-                        <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">{type}</div>
-                      ))}
-                    </Flex>
-                    {item.tags.length > 2 && (
-                      <Tooltip
-                        title={<Flex wrap gap={6}>{item.tags?.slice(2, item.tags.length).map((type, i) => (
-                          <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5 rb:text-[#171719]">{type}</div>
-                        ))}</Flex>}
-                        color="white"
-                        placement="bottom"
-                      >
-                        <div className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">+{item.tags.length - 2}</div>
-                      </Tooltip>
-                    )}
-                  </Flex>
+                  ? <div>
+                    <OverflowTags
+                      items={item.tags?.map((type, i) => <Tag variant="borderless" color="dark" key={i}>{type}</Tag>)}
+                      numTag={(num?: number) => <Tag variant="borderless" color="dark">{`+${num}`}</Tag>}
+                    />
+                  </div>
                   : <div className="rb:text-[#A8A9AA] rb:leading-5">{t('tool.noTags')}</div>
                 }
                 <Row className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-2! rb:px-3! rb:leading-5 rb:mt-4!">

web/src/views/ToolManagement/Inner.tsx

@@ -17,6 +17,8 @@ import JsonToolModal from './components/JsonToolModal'
 import InnerToolModal from './components/InnerToolModal'
 import { getTools } from '@/api/tools'
 import { InnerConfigData } from './constant'
+import OverflowTags from '@/components/OverflowTags'
+import Tag from '@/components/Tag'
 
 const Inner: React.FC<{ getStatusTag: (status: string) => ReactNode; keyword?: string | undefined }> = ({ getStatusTag, keyword }) => {
   const { t } = useTranslation();
@@ -98,24 +100,12 @@ const Inner: React.FC<{ getStatusTag: (status: string) => ReactNode; keyword?: s
                   <div className="rb:h-10 rb:wrap-break-word rb:line-clamp-2 rb:leading-5">{t(`tool.${item.config_data.tool_class}_features`)}</div>
                 </Tooltip>
 
-                <Flex gap={8} wrap align="center" className="rb:mt-2! rb:mb-4!">
-                  <Flex gap={6}>
-                    {InnerConfigData[item.config_data.tool_class].features?.slice(0, 2).map((type, i) => (
-                      <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">{t(`tool.${type}`)}</div>
-                    ))}
-                  </Flex>
-                  {InnerConfigData[item.config_data.tool_class].features.length > 2 && (
-                    <Tooltip
-                      title={<Flex wrap gap={6}>{InnerConfigData[item.config_data.tool_class].features?.slice(2, InnerConfigData[item.config_data.tool_class].features.length).map((type, i) => (
-                        <div key={i} className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5 rb:text-[#171719]">{t(`tool.${type}`)}</div>
-                      ))}</Flex>}
-                      color="white"
-                      placement="bottom"
-                    >
-                      <div className="rb:bg-[#F6F6F6] rb:rounded-md rb:py-px rb:px-1 rb:text-[12px] rb:leading-4.5">+{InnerConfigData[item.config_data.tool_class].features.length - 2}</div>
-                    </Tooltip>
-                  )}
-                </Flex>
+                <div className="rb:mt-2 rb:mb-4">
+                  <OverflowTags
+                    items={InnerConfigData[item.config_data.tool_class].features?.map((type, i) => <Tag key={i} variant="borderless" color="dark">{t(`tool.${type}`)}</Tag>)}
+                    numTag={(num?: number) => <Tag variant="borderless" color="dark">{`+${num}`}</Tag>}
+                  />
+                </div>
 
                 <Row className="rb:bg-[#F6F6F6] rb:rounded-lg rb:py-2! rb:px-3! rb:leading-5">
                   {item.config_data.tool_class === 'DateTimeTool'