fix: ui issues

src/pages/model-routes/config/index.ts

@@ -14,7 +14,7 @@ export const TargetStatusLabelMap = {
 
 export const TargetStatus: Record<string, StatusType> = {
   [TargetStatusValueMap.Active]: StatusMaps.success,
-  [TargetStatusValueMap.Unavailable]: StatusMaps.error
+  [TargetStatusValueMap.Unavailable]: StatusMaps.warning
 };
 
 // actions for each row

src/pages/model-routes/config/types.ts

@@ -43,5 +43,8 @@ export interface RouteTarget {
   name: string;
   route_name: string;
   route_id: number;
+  provider_id: number;
+  provider_model_name: string;
+  fallback_status_codes: string[];
   state: string;
 }

src/pages/model-routes/forms/targets.tsx

@@ -1,6 +1,7 @@
 import MetadataList from '@/components/metadata-list';
 import SealCascader from '@/components/seal-form/seal-cascader';
 import SealInput from '@/components/seal-form/seal-input';
+import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
@@ -10,6 +11,7 @@ import useTargetSourceModels from '../hooks/use-target-source-models';
 
 const TargetsForm = forwardRef((props, ref) => {
   const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
   const { sourceModels, loading, fetchSourceModels } = useTargetSourceModels();
   const form = Form.useFormInstance<FormData>();
   const targets = Form.useWatch('targets', form) || [];
@@ -38,19 +40,11 @@ const TargetsForm = forwardRef((props, ref) => {
   }));
 
   const handleTargetsChange = (value: any[], index: number, options: any[]) => {
-    console.log(
-      'handleTargetsChange:',
-      value,
-      index,
-      options,
-      dataList,
-      sourceModels
-    );
     const selectedOption =
       options?.find?.((opt) => opt.value === value[1]) || {};
     const targetList = [...targets];
     targetList[index] = {
-      weight: targetList[index]?.weight || null,
+      weight: targetList[index]?.weight,
       ...selectedOption?.data
     };
 
@@ -68,11 +62,19 @@ const TargetsForm = forwardRef((props, ref) => {
     const newDataList = [
       ...dataList,
       {
-        weight: null,
+        weight: 100,
         value: []
       }
     ];
     setDataList(newDataList);
+    const newTargets = [
+      ...targets,
+      {
+        weight: 100,
+        value: []
+      }
+    ];
+    form.setFieldValue('targets', newTargets);
   };
 
   const handleOnDelete = (index: number, item: any) => {
@@ -85,13 +87,19 @@ const TargetsForm = forwardRef((props, ref) => {
   };
 
   const handleFallbackChange = (value: any[], options?: any[]) => {
+    if (!value || value.length === 0) {
+      form.setFieldValue('fallback_target', null);
+      setFallbackValues({
+        value: []
+      });
+      return;
+    }
     const selectedOption =
       options?.find?.((opt) => opt.value === value[1]) || {};
 
     form.setFieldValue('fallback_target', {
       ...selectedOption?.data
     });
-    console.log('handleFallbackChange:', value, dataList);
     setFallbackValues({
       value: value
     });
@@ -163,27 +171,29 @@ const TargetsForm = forwardRef((props, ref) => {
         name="targets"
         data-field="targets"
         rules={[
-          ({ getFieldValue }) => ({
+          {
             validator(rule, value) {
-              if (_.keys(value).length > 0) {
-                if (_.some(_.keys(value), (k: string) => !value[k])) {
+              if (value && value?.length > 0) {
+                if (_.some(value, (item: any) => !item.weight)) {
                   return Promise.reject(
-                    intl.formatMessage(
-                      {
-                        id: 'common.validate.value'
-                      },
-                      {
-                        name: intl.formatMessage({
-                          id: 'models.form.selector'
-                        })
-                      }
-                    )
+                    getRuleMessage('input', 'routes.form.target.weight')
+                  );
+                }
+
+                if (
+                  _.some(
+                    dataList,
+                    (item: any) => !item.value || item.value.length === 0
+                  )
+                ) {
+                  return Promise.reject(
+                    getRuleMessage('input', 'providers.form.target.placeholder')
                   );
                 }
               }
               return Promise.resolve();
             }
-          })
+          }
         ]}
       >
         <MetadataList
@@ -203,6 +213,9 @@ const TargetsForm = forwardRef((props, ref) => {
               <SealCascader
                 required
                 showSearch
+                status={
+                  !item.value || item.value.length === 0 ? 'error' : 'success'
+                }
                 expandTrigger="hover"
                 multiple={false}
                 alwaysFocus={true}
@@ -235,6 +248,8 @@ const TargetsForm = forwardRef((props, ref) => {
               <SealInput.Number
                 style={{ flex: 100 }}
                 min={0}
+                step={1}
+                status={item.weight === null ? 'error' : 'success'}
                 value={item.weight}
                 onChange={(value) => handleOnWeightChange(value, index)}
                 placeholder={intl.formatMessage({

src/pages/model-routes/hooks/use-access-control.ts

@@ -1,9 +1,11 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import useBodyScroll from '@/hooks/use-body-scroll';
 import { useState } from 'react';
 import { RouteItem as ListItem } from '../config/types';
 
 const useAccessControl = () => {
+  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const [openModalStatus, setOpenModalStatus] = useState<{
     open: boolean;
     action: PageActionType;
@@ -27,6 +29,7 @@ const useAccessControl = () => {
       currentData,
       title: title
     });
+    saveScrollHeight();
   };
 
   const closeModal = () => {
@@ -36,6 +39,7 @@ const useAccessControl = () => {
       currentData: undefined,
       title: ''
     });
+    restoreScrollHeight();
   };
 
   return {

src/pages/model-routes/hooks/use-create-route.ts

@@ -1,9 +1,11 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import useBodyScroll from '@/hooks/use-body-scroll';
 import { useState } from 'react';
 import { RouteItem as ListItem } from '../config/types';
 
 const useCreateRoute = (options?: { refresh: () => void }) => {
+  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const [openModalStatus, setOpenModalStatus] = useState<{
     open: boolean;
     action: PageActionType;
@@ -27,6 +29,7 @@ const useCreateRoute = (options?: { refresh: () => void }) => {
       currentData,
       title: title
     });
+    saveScrollHeight();
   };
 
   const closeModal = () => {
@@ -36,6 +39,7 @@ const useCreateRoute = (options?: { refresh: () => void }) => {
       currentData: undefined,
       title: ''
     });
+    restoreScrollHeight();
   };
 
   return {

src/pages/model-routes/index.tsx

@@ -275,7 +275,7 @@ const ModelRoutes: React.FC = () => {
             loadend={dataSource.loadend}
             rowSelection={rowSelection}
             columns={columns}
-            childParentKey="access_id"
+            childParentKey="route_id"
             expandable={true}
             empty={
               <NoResult