feat: 服务添加预测

react-ui/src/pages/ModelDeployment/VersionInfo/index.less

@@ -6,14 +6,13 @@
     flex-direction: column;
     height: calc(100% - 60px);
     margin-top: 10px;
-    padding: 30px 30px 0;
+    padding: 10px 30px 0;
     background-color: white;
     border-radius: 10px;
 
     &__tabs {
       flex: 1;
       min-height: 0;
-      margin-top: 20px;
       padding-bottom: 10px;
 
       :global {

react-ui/src/pages/ModelDeployment/VersionInfo/index.tsx

@@ -3,9 +3,9 @@
  * @Date: 2024-04-16 13:58:08
  * @Description: 服务版本详情
  */
+import FullScreenFrame from '@/components/FullScreenFrame';
 import KFIcon from '@/components/KFIcon';
 import PageTitle from '@/components/PageTitle';
-import SubAreaTitle from '@/components/SubAreaTitle';
 import { getServiceVersionInfoReq } from '@/services/modelDeployment';
 import { to } from '@/utils/promise';
 import { useParams } from '@umijs/max';
@@ -18,6 +18,7 @@ import { ServiceVersionData } from '../types';
 import styles from './index.less';
 
 export enum ModelDeploymentTabKey {
+  Basic = 'Basic', // 基本信息
   Predict = 'Predict', // 预测
   Guide = 'Guide', // 调用指南
   Log = 'Log', // 服务日志
@@ -43,10 +44,23 @@ function ServiceVersionInfo() {
   }, [id]);
 
   const tabItems = [
+    {
+      key: ModelDeploymentTabKey.Basic,
+      label: '基本信息',
+      icon: <KFIcon type="icon-jibenxinxi" />,
+      children: <VersionBasicInfo info={versionInfo} />,
+    },
     {
       key: ModelDeploymentTabKey.Predict,
       label: '预测',
       icon: <KFIcon type="icon-yuce" />,
+      children: (
+        <div style={{ height: '100%', width: '100%' }}>
+          {versionInfo?.page_path && (
+            <FullScreenFrame url={versionInfo?.page_path}></FullScreenFrame>
+          )}
+        </div>
+      ),
     },
     {
       key: ModelDeploymentTabKey.Guide,
@@ -66,12 +80,6 @@ function ServiceVersionInfo() {
     <div className={styles['service-version-info']}>
       <PageTitle title="服务版本详情"></PageTitle>
       <div className={styles['service-version-info__content']}>
-        <SubAreaTitle
-          title="基本信息"
-          image={require('@/assets/img/mirror-basic.png')}
-          style={{ marginBottom: '26px' }}
-        ></SubAreaTitle>
-        <VersionBasicInfo info={versionInfo} />
         <div className={styles['service-version-info__content__tabs']}>
           <Tabs items={tabItems} />
         </div>

react-ui/src/pages/ModelDeployment/components/VersionBasicInfo/index.tsx

@@ -79,6 +79,10 @@ function VersionBasicInfo({ info }: BasicInfoProps) {
       label: 'API URL',
       value: info?.url,
     },
+    {
+      label: '文档地址',
+      value: info?.doc_path,
+    },
     {
       label: '副本数量',
       value: info?.replicas,
@@ -104,7 +108,14 @@ function VersionBasicInfo({ info }: BasicInfoProps) {
     },
   ];
 
-  return <BasicInfo datas={datas} labelWidth={66} labelAlign="justify"></BasicInfo>;
+  return (
+    <BasicInfo
+      datas={datas}
+      labelWidth={66}
+      labelAlign="justify"
+      style={{ marginTop: 10 }}
+    ></BasicInfo>
+  );
 }
 
 export default VersionBasicInfo;

react-ui/src/pages/ModelDeployment/types.ts

@@ -49,6 +49,8 @@ export type ServiceVersionData = {
   update_time: string;
   create_time: string;
   created_by: string;
+  doc_path?: string; // 文档地址
+  page_path?: string; // 预测地址
 };
 
 // 操作类型