Fix:Modify the personal center style #10703 (#11470)

### What problem does this PR solve?

Fix:Modify the personal center style #10703

- All form-label font styles are no longer bold
- Menus are not highlighted on first visit to the personal center

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/user-setting/components/user-setting-header/index.tsx

@@ -10,7 +10,7 @@ export const UserSettingHeader = ({
 }) => {
   return (
     <>
-      <header className="flex flex-col gap-1 justify-between items-start p-0">
+      <header className="flex flex-col gap-1.5 justify-between items-start p-0">
         <div className="text-2xl font-medium text-text-primary">{name}</div>
         {description && (
           <div className="text-sm text-text-secondary ">{description}</div>

web/src/pages/user-setting/data-source/data-source-detail-page/index.tsx

@@ -170,7 +170,7 @@ const SourceDetailPage = () => {
           </CardTitle>
         </CardHeader>
         <Separator className="border-border-button bg-border-button w-[calc(100%+2rem)] -translate-x-4 -translate-y-4" />
-        <CardContent className="p-2 flex flex-col gap-2 max-h-[calc(100vh-190px)] overflow-y-auto scrollbar-auto">
+        <CardContent className="p-2 flex flex-col gap-10 max-h-[calc(100vh-190px)] overflow-y-auto scrollbar-auto">
           <div className="max-w-[1200px]">
             <DynamicForm.Root
               ref={formRef}
@@ -181,8 +181,10 @@ const SourceDetailPage = () => {
               defaultValues={defaultValues}
             />
           </div>
-          <section className="flex flex-col gap-2 mt-6">
-            <div className="text-2xl text-text-primary">{t('setting.log')}</div>
+          <section className="flex flex-col gap-2">
+            <div className="text-2xl text-text-primary mb-2">
+              {t('setting.log')}
+            </div>
             <DataSourceLogsTable refresh_freq={detail?.refresh_freq || false} />
           </section>
         </CardContent>

web/src/pages/user-setting/data-source/index.tsx

@@ -120,6 +120,11 @@ const DataSource = () => {
       <div className="relative">
         <div className=" flex flex-col gap-4 max-h-[calc(100vh-230px)] overflow-y-auto overflow-x-hidden scrollbar-auto">
           <div className="flex flex-col gap-3">
+            {categorizedList?.length <= 0 && (
+              <div className="text-text-secondary w-full flex justify-center items-center h-20">
+                {t('setting.sourceEmptyTip')}
+              </div>
+            )}
             {categorizedList.map((item, index) => (
               <AddedSourceCard key={index} {...item} />
             ))}
@@ -127,9 +132,9 @@ const DataSource = () => {
           <section className="bg-transparent border-none mt-8">
             <header className="flex flex-row items-center justify-between space-y-0 p-0 pb-4">
               {/* <Users className="mr-2 h-5 w-5 text-[#1677ff]" /> */}
-              <CardTitle className="text-2xl font-semibold">
+              <CardTitle className="text-2xl font-semibold ">
                 {t('setting.availableSources')}
-                <div className="text-sm text-text-secondary font-normal">
+                <div className="text-sm text-text-secondary font-normal mt-1.5">
                   {t('setting.availableSourcesDescription')}
                 </div>
               </CardTitle>

web/src/pages/user-setting/setting-model/components/system-setting.tsx

@@ -161,6 +161,7 @@ const SystemSetting = ({ onOk, loading }: IProps) => {
           options={options}
           onChange={(value) => handleFieldChange(id, value)}
           placeholder={t('selectModelPlaceholder')}
+          emptyData={t('modelEmptyTip')}
         />
       </div>
     );

web/src/pages/user-setting/sidebar/hooks.tsx

@@ -1,12 +1,19 @@
 import { useLogout } from '@/hooks/login-hooks';
 import { Routes } from '@/routes';
-import { useCallback, useState } from 'react';
-import { useNavigate } from 'umi';
+import { useCallback, useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'umi';
 
 export const useHandleMenuClick = () => {
   const navigate = useNavigate();
   const [active, setActive] = useState<Routes>();
   const { logout } = useLogout();
+  const location = useLocation();
+  useEffect(() => {
+    const path = (location.pathname.split('/')?.[2] || '') as Routes;
+    if (path) {
+      setActive(('/' + path) as Routes);
+    }
+  }, [location]);
 
   const handleMenuClick = useCallback(
     (key: Routes) => () => {
@@ -20,5 +27,5 @@ export const useHandleMenuClick = () => {
     [logout, navigate],
   );
 
-  return { handleMenuClick, active };
+  return { handleMenuClick, active, setActive };
 };