feat(web): update model management

2026-01-27 20:07:53 +08:00
parent 74f0018962
commit 75b3ea1f05
24 changed files with 1768 additions and 360 deletions
--- a/web/src/views/ModelManagement/Group.tsx
+++ b/web/src/views/ModelManagement/Group.tsx
@@ -0,0 +1,97 @@
+import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import clsx from 'clsx'
+import { Button } from 'antd'
+import { useTranslation } from 'react-i18next';
+
+import type { ProviderModelItem, ModelListItem, DescriptionItem, BaseRef } from './types'
+import RbCard from '@/components/RbCard/Card'
+import { getModelNewList } from '@/api/models'
+import PageEmpty from '@/components/Empty/PageEmpty';
+import { formatDateTime } from '@/utils/format';
+
+const Group = forwardRef <BaseRef,{ query: any; handleEdit: (data: ModelListItem) => void; }>(({ query, handleEdit }, ref) => {
+  const { t } = useTranslation();
+  const [list, setList] = useState<ModelListItem[]>([])
+  useEffect(() => {
+    getList()
+  }, [query])
+  const getList = () => {
+    getModelNewList({
+      ...query,
+      is_composite: true,
+      is_active: true,
+    })
+      .then(res => {
+        const response = res as ProviderModelItem[]
+        setList(response[0]?.models || [])
+      })
+  }
+  const formatData = (data: ModelListItem) => {
+    return [
+      {
+        key: 'type',
+        label: t(`modelNew.type`),
+        children: data.type || '-',
+      },
+      {
+        key: 'provider',
+        label: t(`modelNew.provider`),
+        children: data.provider || '-',
+      },
+      {
+        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`),
+        children: data.created_at ? formatDateTime(data.created_at, 'YYYY-MM-DD HH:mm:ss') : '-',
+      },
+    ]
+  }
+
+  useImperativeHandle(ref, () => ({
+    getList,
+  }));
+
+  return (
+    <>
+      {list.length === 0
+        ? <PageEmpty />
+        :(
+          <div className="rb:grid rb:grid-cols-4 rb:gap-4">
+            {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>
+                }
+              >
+                {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>
+              </RbCard>
+            ))}
+          </div>
+        )
+      }
+    </>
+  )
+})
+
+export default Group