feat(web): Index/model/space/tool ui upgrade

2026-03-23 11:37:04 +08:00
parent 0775fad5f0
commit 4dbb2bf2e2
47 changed files with 1094 additions and 1123 deletions
--- a/web/src/views/ModelManagement/Group.tsx
+++ b/web/src/views/ModelManagement/Group.tsx
@@ -1,8 +1,8 @@
 /*
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:50:00 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 16:50:00 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-20 18:50:41
 */
 /**
 * Group Model View
@@ -12,14 +12,15 @@

 import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import clsx from 'clsx'
-import { Button } from 'antd'
+import { Button, Flex, Tooltip, Space } from 'antd'
 import { useTranslation } from 'react-i18next';

 import type { ProviderModelItem, ModelListItem, DescriptionItem, BaseRef } from './types'
-import RbCard from '@/components/RbCard/Card'
+import RbCard from '@/components/RbCard'
 import { getModelNewList } from '@/api/models'
 import PageEmpty from '@/components/Empty/PageEmpty';
 import { formatDateTime } from '@/utils/format';
+import Tag from '@/components/Tag'

 /**
 * Group model list component
@@ -50,11 +51,6 @@ const Group = forwardRef <BaseRef,{ query: any; handleEdit: (data: ModelListItem
        label: t(`modelNew.type`),
        children: data.type ? t(`modelNew.${data.type}`) : '-',
      },
-      {
-        key: 'is_active',
-        label: t(`modelNew.status`),
-        children: data.is_active ? t(`common.statusEnabled`) : t(`common.statusDisabled`),
-      },
      {
        key: 'created_at',
        label: t(`modelNew.created_at`),
@@ -73,31 +69,36 @@ const Group = forwardRef <BaseRef,{ query: any; handleEdit: (data: ModelListItem
      {list.length === 0
        ? <PageEmpty />
        :(
-          <div className="rb:grid rb:grid-cols-4 rb:gap-4">
+          <div className="rb:grid rb:grid-cols-4 rb:gap-3">
            {list.map(item => (
              <RbCard
                key={item.id}
-                title={item.name}
                avatarUrl={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]">
-                    {item.name[0]}
-                  </div>
-                }
+                avatarText={item.name[0]}
+                title={<Flex vertical gap={6}>
+                  <Tooltip title={item.name}>
+                    <div className="rb:wrap-break-word rb:line-clamp-1">{item.name}</div>
+                  </Tooltip>
+                  <Space>
+                    <Tag color={item.is_active ? 'success' : 'error'}>{item.is_active ? t(`common.statusEnabled`) : t(`common.statusDisabled`)}</Tag>
+                  </Space>
+                </Flex>}
+                isNeedTooltip={false}
+                footer={<Button className="rb:h-9!" type="primary" ghost block onClick={() => handleEdit(item)}>{t('modelNew.configureBtn')}</Button>}
              >
-                {formatData(item)?.map((description: DescriptionItem) => (
-                  <div
-                    key={description.key}
-                    className="rb:flex rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3"
-                  >
-                    <span className="rb:whitespace-nowrap">{(description.label as string)}</span>
-                    <span className={clsx({
-                      "rb:text-[#212332]": description.key !== 'is_active',
-                      "rb:text-[#369F21] rb:font-medium": description.key === 'is_active' && item.is_active,
-                    })}>{(description.children as string)}</span>
-                  </div>
-                ))}
-                <Button className="rb:mt-2" type="primary" ghost block onClick={() => handleEdit(item)}>{t('modelNew.configureBtn')}</Button>
+                <Flex vertical gap={8}>
+                  {formatData(item)?.map((description: DescriptionItem) => (
+                    <div
+                      key={description.key}
+                      className="rb:flex rb:justify-between rb:text-[14px] rb:leading-5"
+                    >
+                      <span className="rb:whitespace-nowrap rb:text-[#5B6167]">{(description.label as string)}</span>
+                      <span className={clsx({
+                        "rb:font-medium": description.key === 'type',
+                      })}>{(description.children as string)}</span>
+                    </div>
+                  ))}
+                </Flex>
              </RbCard>
            ))}
          </div>
--- a/web/src/views/ModelManagement/List.tsx
+++ b/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-02-27 10:20:51
+ * @Last Modified time: 2026-03-20 18:51:27
 */
 /**
 * Model List View
@@ -11,11 +11,11 @@
 */

 import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Button, Flex, Row, Col } from 'antd'
+import { Button, Flex, Row, Col, Tooltip, Space } from 'antd'
 import { useTranslation } from 'react-i18next';

 import type { ProviderModelItem, KeyConfigModalRef, ModelListDetailRef, ModelListItem, BaseRef } from './types'
-import RbCard from '@/components/RbCard/Card'
+import RbCard from '@/components/RbCard'
 import { getModelNewList } from '@/api/models'
 import PageEmpty from '@/components/Empty/PageEmpty';
 import Tag from '@/components/Tag';
@@ -69,26 +69,26 @@ const ModelList = forwardRef<BaseRef, { query: any; handleEdit: (vo?: ModelListI
            {list.map(item => (
              <RbCard
                key={item.provider}
-                title={t(`modelNew.${item.provider}`)}
                avatarUrl={getListLogoUrl(item.provider, 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]">
-                    {item.provider[0].toUpperCase()}
-                  </div>
-                }
-                bodyClassName="rb:relative rb:pb-[64px]! rb:h-[calc(100%-64px)]!"
+                avatarText={item.provider[0].toUpperCase()}
+                title={<Flex vertical gap={6}>
+                  <Tooltip title={t(`modelNew.${item.provider}`)}>
+                    <div className="rb:wrap-break-word rb:line-clamp-1">{t(`modelNew.${item.provider}`)}</div>
+                  </Tooltip>
+                  <Space>
+                    <Flex gap={8} wrap>{item.tags.map(tag => <Tag key={tag}>{t(`modelNew.${tag}`)}</Tag>)}</Flex>
+                  </Space>
+                </Flex>}
+                isNeedTooltip={false}
+                footer={<Row gutter={9} className="rb:pt-2!">
+                  <Col span={12}>
+                    <Button className="rb:h-9!" block onClick={() => handleShowModel(item)}>{t('modelNew.showModel')}</Button>
+                  </Col>
+                  <Col span={12}>
+                    <Button className="rb:h-9!" type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
+                  </Col>
+                </Row>}
              >
-                <Flex gap={8} wrap>{item.tags.map(tag => <Tag key={tag}>{t(`modelNew.${tag}`)}</Tag>)}</Flex>
-                <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
-                  <Row gutter={12}>
-                    <Col span={12}>
-                      <Button block onClick={() => handleShowModel(item)}>{t('modelNew.showModel')}</Button>
-                    </Col>
-                    <Col span={12}>
-                      <Button type="primary" ghost block onClick={() => handleKeyConfig(item)}>{t('modelNew.keyConfig')}</Button>
-                    </Col>
-                  </Row>
-                </div>
              </RbCard>
            ))}
          </div>
--- a/web/src/views/ModelManagement/Square.tsx
+++ b/web/src/views/ModelManagement/Square.tsx
@@ -1,8 +1,8 @@
 /*
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:50:14 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 16:50:14 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-23 11:33:44
 */
 /**
 * Model Square View
@@ -10,17 +10,17 @@
 * Allows adding models and viewing details
 */

-import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { Button, Space, App, Divider, Flex, Tooltip } from 'antd'
+import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Button, Space, App, Flex, Tooltip } from 'antd'
 import { UsergroupAddOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';

-import type { ModelPlaza, ModelPlazaItem, ModelSquareDetailRef, BaseRef } from './types'
-import RbCard from '@/components/RbCard/Card'
+import type { ModelPlaza, ModelPlazaItem, BaseRef } from './types'
+import RbCard from '@/components/RbCard'
 import { getModelPlaza, addModelPlaza } from '@/api/models'
 import PageEmpty from '@/components/Empty/PageEmpty';
 import Tag from '@/components/Tag';
-import ModelSquareDetail from './components/ModelSquareDetail'
 import { getLogoUrl } from './utils'

 /**
@@ -29,7 +29,6 @@ import { getLogoUrl } from './utils'
 const ModelSquare = forwardRef <BaseRef, { query: any; }>(({ query }, ref) => {
  const { t } = useTranslation();
  const { message } = App.useApp()
-  const modelSquareDetailRef = useRef<ModelSquareDetailRef>(null)
  const [list, setList] = useState<ModelPlaza[]>([])
  useEffect(() => {
    getList()
@@ -38,14 +37,12 @@ const ModelSquare = forwardRef <BaseRef, { query: any; }>(({ query }, ref) => {
  const getList = () => {
    getModelPlaza(query)
      .then(res => {
-        setList((res as ModelPlaza[]) || [])
+        const response = res as ModelPlaza[]
+        setList(response || [])
+        setActiveProvider(response[0]?.provider || null)
      })
  }

-  /** Open model detail drawer */
-  const handleMore = (vo: ModelPlaza) => {
-    modelSquareDetailRef.current?.handleOpen(vo)
-  }
  /** Add model to workspace */
  const handleAdd = (item: ModelPlazaItem) => {
    addModelPlaza(item.id)
@@ -59,61 +56,86 @@ const ModelSquare = forwardRef <BaseRef, { query: any; }>(({ query }, ref) => {
  useImperativeHandle(ref, () => ({
    getList,
  }));
+
+  const [activeProvider, setActiveProvider] = useState<string | null>(null)
  return (
    <>
      {list.length === 0
        ? <PageEmpty />
-        : list.map(vo => (
-          <div key={vo.provider}>
-            <div className="rb:flex rb:justify-between rb:items-center rb:bg-[rgba(21,94,239,0.12)] rb:px-4 rb:py-2.5 rb:leading-5 rb:mb-4 rb:mt-6 rb:rounded-md">
-              <div className="rb:font-medium">{t(`modelNew.${vo.provider}`)}</div>
-              <Button type="link" onClick={() => handleMore(vo)}>{t('modelNew.viewAll')}({t(`modelNew.modelCount`, { count: vo.models.length })})&gt;</Button>
-            </div>
-
-            <div className="rb:grid rb:grid-cols-3 rb:gap-4">
-              {vo.models.slice(0, 6).map(item => (
-                <RbCard
-                  key={item.id}
-                  title={item.name}
-                  subTitle={<Space size={8}>
-                    <Tag className="rb:mt-1">{t(`modelNew.${item.type}`)}</Tag>
-                    {item.is_official && <Tag color="success" className="rb:mt-1">{t(`modelNew.official`)}</Tag>}
-                  </Space>}
-                  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]">
-                      {item.name[0]}
-                    </div>
-                  }
-                  bodyClassName="rb:relative rb:pb-[80px]! rb:h-[calc(100%-64px)]!"
-                >
-                  <Tooltip title={item.description}>
-                    <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:font-regular rb:wrap-break-word rb:line-clamp-2 rb:mt-3">{item.description}</div>
-                  </Tooltip>
-                  <Flex gap={8} wrap className="rb:mt-3!">{item.tags.map((tag, tagIndex) => <Tag key={tagIndex}>{tag}</Tag>)}</Flex>
-                  <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
-                    <Divider size="middle" />
-                    <Flex justify="space-between">
-                      <Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
-                      <Space>
-                        {item.is_added
-                          ? <Button type="primary" disabled>{t('modelNew.added')}</Button>
-                          : <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>{item.is_deprecated ? t('modelNew.deprecated') : `+ ${t('common.add')}`}</Button>
-                        }
-                      </Space>
+        : <>
+          <Space size={8} className="rb:mb-3!">
+            {list.map(vo => (
+              <div
+                key={vo.provider}
+                className={clsx('rb:border rb:border-[#171719] rb:rounded-full rb:px-2 rb:py-1 rb:cursor-pointer', {
+                  'rb:text-white rb:bg-[#171719]': activeProvider === vo.provider,
+                  'rb:text-[#171719]': activeProvider === vo.provider,
+                })}
+                onClick={() => setActiveProvider(vo.provider)}
+              >{t(`modelNew.${vo.provider}`)}</div>
+            ))}
+          </Space>
+          {list.filter(vo => vo.provider === activeProvider).map(vo => (
+            <div key={vo.provider} className="rb:max-h-[calc(100%-50px)] rb:overflow-y-auto">
+              <div className="rb:grid rb:grid-cols-3 rb:gap-4">
+                {vo.models.map(item => (
+                  <RbCard
+                    key={item.id}
+                    avatarUrl={getLogoUrl(item.logo)}
+                    avatarText={item.name[0]}
+                    title={
+                      <Flex justify="space-between" gap={16}>
+                        <Flex vertical gap={6}>
+                          <Tooltip title={item.name}>
+                            <div className="rb:wrap-break-word rb:line-clamp-1">{item.name}</div>
+                          </Tooltip>
+                          <Space size={8} className="rb:mt-1!">
+                            <Tag>{t(`modelNew.${item.type}`)}</Tag>
+                            {item.is_official && <Tag color="success">{t(`modelNew.official`)}</Tag>}
+                          </Space>
+                        </Flex>
+                        <Button
+                          size="small"
+                          disabled={item.is_added || item.is_deprecated}
+                          onClick={() => handleAdd(item)}
+                        >{item.is_deprecated ? t('modelNew.deprecated') : '+'}</Button>
                    </Flex>
-                  </div>
-                </RbCard>
-              ))}
-            </div>
-          </div>
-        ))
-      }
+                    }
+                    isNeedTooltip={false}
+                    footer={<Flex justify="space-between" align="center" className="rb:text-[#5B6167] rb:text-[12px]">
+                      @{t(`modelNew.${vo.provider}`)}
+                      <Space size={4}><UsergroupAddOutlined /> {item.add_count}</Space>
+                    </Flex>}
+                  >
+                    <Tooltip title={item.description}>
+                      <div className="rb:h-10 rb:leading-5 rb:wrap-break-word rb:line-clamp-2">{item.description}</div>
+                    </Tooltip>

-      <ModelSquareDetail
-        ref={modelSquareDetailRef}
-        refresh={getList}
-      />
+                    <Flex gap={8} wrap align="center" className="rb:mt-2!">
+                      <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>
+                  </RbCard>
+                ))}
+              </div>
+            </div>
+          ))}
+        </>
+      }
    </>
  )
 })
--- a/web/src/views/ModelManagement/components/ModelSquareDetail.tsx
+++ b/web/src/views/ModelManagement/components/ModelSquareDetail.tsx
@@ -1,130 +0,0 @@
-/*
- * @Author: ZhaoYing 
- * @Date: 2026-02-03 16:49:49 
- * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-04 11:50:31
- */
-/**
- * Model Square Detail Drawer
- * Displays all models from a specific provider in the model square
- * Allows adding models and editing custom models
- */
-
-import { useState, useImperativeHandle, forwardRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button, Space, App, Flex, Tooltip, Divider } from 'antd'
-import { UsergroupAddOutlined } from '@ant-design/icons';
-
-import type { ModelPlaza, ModelPlazaItem, ModelSquareDetailRef } from '../types';
-import RbDrawer from '@/components/RbDrawer';
-import { getModelPlaza, addModelPlaza } from '@/api/models'
-import RbCard from '@/components/RbCard/Card'
-import Tag from '@/components/Tag';
-import PageEmpty from '@/components/Empty/PageEmpty';
-import { getLogoUrl } from '../utils'
-
-/**
- * Component props
- */
-interface ModelSquareDetailProps {
-  /** Callback to refresh parent list */
-  refresh: () => void;
-}
-
-/**
- * Model square detail drawer component
- */
-const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProps>(({ refresh }, ref) => {
-  const { t } = useTranslation();
-  const { message } = App.useApp()
-  const [model, setModel] = useState<ModelPlaza>({} as ModelPlaza)
-  const [open, setOpen] = useState(false);
-
-  const [list, setList] = useState<ModelPlazaItem[]>([])
-
-  /** Open drawer with model plaza data */
-  const handleOpen = (vo: ModelPlaza) => {
-    setModel(vo)
-    setOpen(true)
-    getList(vo)
-  }
-  /** Close drawer */
-  const handleClose = () => {
-    setOpen(false)
-    refresh()
-  }
-  /** Fetch model list for provider */
-  const getList = (vo: ModelPlaza) => {
-    getModelPlaza({ provider: vo.provider })
-      .then(res => {
-        const response = res as ModelPlaza[]
-        setList(response.length > 0 ? response[0].models : [])
-      })
-  }
-  /** Add model to workspace */
-  const handleAdd = (item: ModelPlazaItem) => {
-    addModelPlaza(item.id)
-      .then(() => {
-        message.success(`${item.name}${t('modelNew.addSuccess')}`)
-        getList(model)
-      })
-  }
-
-  /** Expose methods to parent component */
-  useImperativeHandle(ref, () => ({
-      handleOpen,
-  }));
-
-  return (
-    <RbDrawer
-      title={<>{t(`modelNew.${model.provider}`)} {t('modelNew.modelList')} ({list.length}{t('modelNew.item')})</>}
-      open={open}
-      onClose={handleClose}
-    >
-      <div className="rb:h-full rb:overflow-y-auto">
-        {list.length === 0 
-          ? <PageEmpty />
-          : <div className="rb:grid rb:grid-cols-2 rb:gap-4">
-            {list.map(item => (
-              <RbCard
-                key={item.id}
-                title={item.name}
-                subTitle={<Space size={8} className="rb:mt-1!">
-                  <Tag>{t(`modelNew.${item.type}`)}</Tag>
-                  {item.is_official && <Tag color="success">{t(`modelNew.official`)}</Tag>}
-                  {item.capability?.filter(item => item !== 'video').map(vo => <Tag key={vo}>{t(`modelNew.${vo}`)}</Tag>)}
-                </Space>}
-                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]">
-                    {item.name[0]}
-                  </div>
-                }
-                bodyClassName="rb:relative rb:pb-[80px]! rb:h-[calc(100%-64px)]!"
-              >
-                <Tooltip title={item.description}>
-                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:font-regular rb:wrap-break-word rb:line-clamp-2 rb:mt-3">{item.description}</div>
-                </Tooltip>
-                <Flex gap={8} wrap className="rb:mt-3!">{item.tags.map((tag, tagIndex) => <Tag key={tagIndex}>{tag}</Tag>)}</Flex>
-                <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
-                  <Divider size="middle" />
-                  <Flex justify="space-between">
-                    <Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
-                    <Space>
-                      {item.is_added
-                        ? <Button type="primary" disabled>{t('modelNew.added')}</Button>
-                        : <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>{item.is_deprecated ? t('modelNew.deprecated') : `+ ${t('common.add')}`}</Button>
-                      }
-                    </Space>
-                  </Flex>
-                </div>
-              </RbCard>
-            ))}
-            </div>
-          }
-      </div>
-    </RbDrawer>
-  );
-});
-
-export default ModelSquareDetail;
--- a/web/src/views/ModelManagement/index.tsx
+++ b/web/src/views/ModelManagement/index.tsx
@@ -1,8 +1,8 @@
 /*
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:50:05 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 16:50:05 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-20 19:02:31
 */
 /**
 * Model Management Main Page
@@ -84,7 +84,7 @@ const tabKeys = ['group', 'list', 'square']
  }

  return (
-    <>
+    <Flex vertical gap={16}>
      <Flex justify="space-between" align="center">
        <PageTabs
          value={activeTab}
@@ -100,19 +100,19 @@ const tabKeys = ['group', 'list', 'square']
                  url={modelTypeUrl}
                  hasAll={false}
                  format={(items) => items.map((item) => ({ label: t(`modelNew.${item}`), value: String(item) }))}
-                  className="rb:w-30"
+                  className="rb:w-40"
                  allowClear={true}
                  placeholder={t('modelNew.type')}
                />
              </Form.Item>
            }
-            {(activeTab === 'list' || activeTab === 'square') &&
+            {activeTab === 'list' &&
              <Form.Item name="provider" noStyle>
                <CustomSelect
                  url={modelProviderUrl}
                  hasAll={false}
                  format={(items) => items.map((item) => ({ label: t(`modelNew.${item}`), value: String(item) }))}
-                  className="rb:w-30"
+                  className="rb:w-40"
                  allowClear={true}
                  placeholder={t('modelNew.provider')}
                />
@@ -123,7 +123,6 @@ const tabKeys = ['group', 'list', 'square']
                <SearchInput
                  maxLength={50}
                  placeholder={t(`modelNew.${activeTab}SearchPlaceholder`)}
-                  className="rb:w-70!"
                />
              </Form.Item>
            }
@@ -133,7 +132,7 @@ const tabKeys = ['group', 'list', 'square']
        </Form>
      </Flex>

-      <div className="rb:w-full rb:h-[calc(100%-48px)] rb:my-4">
+      <div className="rb:w-full rb:h-[calc(100vh-125px)] rb:overflow-y-auto">
        {activeTab === 'group' && <GroupModel ref={groupRef} query={query} handleEdit={handleEdit} />}
        {activeTab === 'list' && <ModelList ref={modelListRef} query={query} handleEdit={handleEdit} />}
        {activeTab === 'square' && <ModelSquare query={query} />}
@@ -146,7 +145,7 @@ const tabKeys = ['group', 'list', 'square']
        ref={customModelModalRef}
        refresh={handleRefresh}
      />
-    </>
+    </Flex>
  )
 }

--- a/web/src/views/ModelManagement/types.ts
+++ b/web/src/views/ModelManagement/types.ts
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:50:18 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-07 16:14:25
+ * @Last Modified time: 2026-03-20 20:21:45
 */
 /**
 * Type definitions for Model Management
@@ -270,14 +270,6 @@ export interface ModelPlazaItem {
  is_omni?: boolean;
 }

-/**
- * Model square detail ref interface
- */
-export interface ModelSquareDetailRef {
-  /** Open detail drawer with model plaza data */
-  handleOpen: (vo: ModelPlaza) => void;
-}
-
 /**
 * Custom model form data
 */