feat: bugfix

app/containers/Settings/SettingPanel.tsx

@@ -18,7 +18,7 @@ import ProviderSetting from "./components/ProviderSetting";
 import ModelConfigList from "./components/ModelSetting";
 
 export default function Settings(props: MenuWrapperInspectProps) {
-  const { setShowPanel } = props;
+  const { setShowPanel, id } = props;
 
   const navigate = useNavigate();
   const accessStore = useAccessStore();
@@ -49,12 +49,63 @@ export default function Settings(props: MenuWrapperInspectProps) {
 
   const cardClassName = "mb-6 md:mb-8 last:mb-0";
 
+  const itemMap = {
+    [Locale.Settings.GeneralSettings]: (
+      <>
+        <Card className={cardClassName} title={Locale.Settings.Basic.Title}>
+          <AppSetting />
+        </Card>
+
+        <Card className={cardClassName} title={Locale.Settings.Mask.Title}>
+          <MaskSetting />
+        </Card>
+        <Card className={cardClassName} title={Locale.Settings.Prompt.Title}>
+          <PromptSetting />
+        </Card>
+        <Card className={cardClassName} title={Locale.Settings.Provider.Title}>
+          <ProviderSetting />
+        </Card>
+
+        <Card className={cardClassName} title={Locale.Settings.Danger.Title}>
+          <DangerItems />
+        </Card>
+      </>
+    ),
+    [Locale.Settings.ModelSettings]: (
+      <Card className={cardClassName} title={Locale.Settings.Models.Title}>
+        <List
+          widgetStyle={{
+            // selectClassName: "min-w-select-mobile-lg",
+            selectClassName: "min-w-select-mobile md:min-w-select",
+            inputClassName: "md:min-w-select",
+            rangeClassName: "md:min-w-select",
+            rangeNextLine: isMobileScreen,
+          }}
+        >
+          <ModelConfigList
+            modelConfig={config.modelConfig}
+            updateConfig={(updater) => {
+              const modelConfig = { ...config.modelConfig };
+              updater(modelConfig);
+              config.update((config) => (config.modelConfig = modelConfig));
+            }}
+          />
+        </List>
+      </Card>
+    ),
+    [Locale.Settings.DataSettings]: (
+      <Card className={cardClassName} title={Locale.Settings.Sync.Title}>
+        <SyncItems />
+      </Card>
+    ),
+  };
+
   return (
     <div
       className={`
         flex flex-col overflow-hidden bg-settings-panel 
         h-setting-panel-mobile
-        md:h-[calc(100%-1.25rem)] md:my-2.5 md:mr-2.5 md:rounded-md
+        md:h-[100%] md:mr-2.5 md:rounded-md
       `}
     >
       <SettingHeader
@@ -78,47 +129,7 @@ export default function Settings(props: MenuWrapperInspectProps) {
             overflow-y-auto
           `}
         >
-          <Card className={cardClassName} title={Locale.Settings.Basic.Title}>
-            <AppSetting />
-          </Card>
-          <Card className={cardClassName} title={Locale.Settings.Sync.Title}>
-            <SyncItems />
-          </Card>
-          <Card className={cardClassName} title={Locale.Settings.Mask.Title}>
-            <MaskSetting />
-          </Card>
-          <Card className={cardClassName} title={Locale.Settings.Prompt.Title}>
-            <PromptSetting />
-          </Card>
-          <Card
-            className={cardClassName}
-            title={Locale.Settings.Provider.Title}
-          >
-            <ProviderSetting />
-          </Card>
-          <Card className={cardClassName} title={Locale.Settings.Models.Title}>
-            <List
-              widgetStyle={{
-                // selectClassName: "min-w-select-mobile-lg",
-                selectClassName: "min-w-select-mobile md:min-w-select",
-                inputClassName: "md:min-w-select",
-                rangeClassName: "md:min-w-select",
-                rangeNextLine: isMobileScreen,
-              }}
-            >
-              <ModelConfigList
-                modelConfig={config.modelConfig}
-                updateConfig={(updater) => {
-                  const modelConfig = { ...config.modelConfig };
-                  updater(modelConfig);
-                  config.update((config) => (config.modelConfig = modelConfig));
-                }}
-              />
-            </List>
-          </Card>
-          <Card className={cardClassName} title={Locale.Settings.Danger.Title}>
-            <DangerItems />
-          </Card>
+          {itemMap[id] || null}
         </div>
       </div>
     </div>

app/containers/Settings/components/SettingHeader.tsx

@@ -36,7 +36,7 @@ export default function SettingHeader(props: ChatHeaderProps) {
         <div
           className={`
           line-clamp-1 cursor-pointer text-text-settings-panel-header-title text-chat-header-title font-common 
-          max-md:text-sm-title max-md:h-chat-header-title-mobile max-md:leading-5
+          max-md:text-sm-title max-md:h-chat-header-title-mobile max-md:leading-5 !font-medium
           `}
         >
           {Locale.Settings.Title}

app/containers/Settings/index.tsx

@@ -1,3 +1,4 @@
+"use client";
 import Locale from "@/app/locales";
 import MenuLayout from "@/app/components/MenuLayout";
 
@@ -5,24 +6,38 @@ import Panel from "./SettingPanel";
 
 import GotoIcon from "@/app/icons/goto.svg";
 import { useAppConfig } from "@/app/store";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+
+export const list = [
+  {
+    id: Locale.Settings.GeneralSettings,
+    title: Locale.Settings.GeneralSettings,
+    icon: null,
+  },
+  {
+    id: Locale.Settings.ModelSettings,
+    title: Locale.Settings.ModelSettings,
+    icon: null,
+  },
+  {
+    id: Locale.Settings.DataSettings,
+    title: Locale.Settings.DataSettings,
+    icon: null,
+  },
+];
 
 export default MenuLayout(function SettingList(props) {
-  const { setShowPanel } = props;
+  const { setShowPanel, setExternalProps } = props;
   const config = useAppConfig();
 
   const { isMobileScreen } = config;
 
-  const list = [
-    {
-      id: Locale.Settings.GeneralSettings,
-      title: Locale.Settings.GeneralSettings,
-      icon: null,
-    },
-  ];
-
   const [selected, setSelected] = useState(list[0].id);
 
+  useEffect(() => {
+    setExternalProps?.(list[0]);
+  }, []);
+
   return (
     <div
       className={`
@@ -39,28 +54,28 @@ export default MenuLayout(function SettingList(props) {
           `}
           data-tauri-drag-region
         >
-          <div className="text-setting-title text-text-settings-menu-title font-common font-setting-title">
+          <div className="text-setting-title text-text-settings-menu-title font-common !font-bold">
             {Locale.Settings.Title}
           </div>
         </div>
       </div>
 
       <div
-        className={`flex flex-col overflow-y-auto overflow-x-hidden w-[100%]`}
+        className={`flex flex-col gap-2 overflow-y-auto overflow-x-hidden w-[100%]`}
       >
         {list.map((i) => (
           <div
             key={i.id}
             className={`
               p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
-             cursor-pointer
+              cursor-pointer
               border 
               rounded-md
 
               bg-chat-menu-session-unselected border-chat-menu-session-unselected
               ${
                 selected === i.id && !isMobileScreen
-                  ? `!bg-chat-menu-session-selected !border-chat-menu-session-selected`
+                  ? `!bg-chat-menu-session-selected !border-chat-menu-session-selected !font-medium`
                   : `hover:bg-chat-menu-session-hovered hover:chat-menu-session-hovered`
               }
 
@@ -70,6 +85,8 @@ export default MenuLayout(function SettingList(props) {
             `}
             onClick={() => {
               setShowPanel?.(true);
+              setExternalProps?.(i);
+              setSelected(i.id);
             }}
           >
             {i.title}