feat: complete the missing UI

app/containers/Settings/SettingPanel.tsx

@@ -47,7 +47,7 @@ export default function Settings(props: MenuWrapperInspectProps) {
 
   const clientConfig = useMemo(() => getClientConfig(), []);
 
-  const cardClassName = "mb-6 md:max-w-setting-list md:mb-8";
+  const cardClassName = "mb-6 md:max-w-setting-list md:mb-8 last:mb-0";
 
   return (
     <div
@@ -63,46 +63,61 @@ export default function Settings(props: MenuWrapperInspectProps) {
       />
       <div
         className={`
-        !overflow-x-hidden 
-        max-md:gap-5 max-md:w-[100%] px-4 py-5
-        md:px-6 md:py-8
-      `}
+          max-md:w-[100%]
+          px-4 py-5
+          md:px-6 md:py-8
+          flex items-start justify-center
+          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}>
-          <ProviderSetting />
-        </Card>
-        <Card className={cardClassName} title={Locale.Settings.Models.Title}>
-          <List
-            widgetStyle={{
-              selectClassName: "min-w-select-mobile-lg",
-              rangeNextLine: isMobileScreen,
-            }}
+        <div
+          className={`
+            !overflow-x-hidden 
+            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}
           >
-            <ModelConfigList
-              modelConfig={config.modelConfig}
-              updateConfig={(updater) => {
-                const modelConfig = { ...config.modelConfig };
-                updater(modelConfig);
-                config.update((config) => (config.modelConfig = modelConfig));
+            <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,
               }}
-            />
-          </List>
-        </Card>
-        <Card className={cardClassName} title={Locale.Settings.Danger.Title}>
-          <DangerItems />
-        </Card>
+            >
+              <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>
+        </div>
       </div>
     </div>
   );

app/containers/Settings/components/AppSetting.tsx

@@ -63,6 +63,8 @@ export default function AppSetting(props: AppSettingProps) {
     <List
       widgetStyle={{
         selectClassName: "min-w-select-mobile md:min-w-select",
+        inputClassName: "md:min-w-select",
+        rangeClassName: "md:min-w-select",
         rangeNextLine: isMobileScreen,
       }}
     >

app/containers/Settings/components/DangerItems.tsx

@@ -71,6 +71,9 @@ export default function DangerItems() {
   return (
     <List
       widgetStyle={{
+        selectClassName: "min-w-select-mobile md:min-w-select",
+        inputClassName: "md:min-w-select",
+        rangeClassName: "md:min-w-select",
         rangeNextLine: isMobileScreen,
         inputNextLine: isMobileScreen,
       }}

app/containers/Settings/components/PromptSetting.tsx

@@ -8,6 +8,8 @@ import { SearchService, usePromptStore } from "@/app/store/prompt";
 import Switch from "@/app/components/Switch";
 import Btn from "@/app/components/Btn";
 
+import EditIcon from "@/app/icons/editIcon.svg";
+
 export interface PromptSettingProps {}
 
 export default function PromptSetting(props: PromptSettingProps) {
@@ -48,6 +50,7 @@ export default function PromptSetting(props: PromptSettingProps) {
               text={
                 <span className={textStyle}>{Locale.Settings.Prompt.Edit}</span>
               }
+              prefixIcon={config.isMobileScreen ? undefined : <EditIcon />}
             ></Btn>
           </div>
         </ListItem>

app/containers/Settings/components/ProviderSetting.tsx

@@ -26,6 +26,9 @@ export default function ProviderSetting() {
     <List
       id={SlotID.CustomModel}
       widgetStyle={{
+        selectClassName: "min-w-select-mobile md:min-w-select",
+        inputClassName: "md:min-w-select",
+        rangeClassName: "md:min-w-select",
         inputNextLine: isMobileScreen,
       }}
     >

app/containers/Settings/components/SyncItems.tsx

@@ -1,3 +1,8 @@
+import ConfigIcon from "@/app/icons/configIcon2.svg";
+import ExportIcon from "@/app/icons/exportIcon.svg";
+import ImportIcon from "@/app/icons/importIcon.svg";
+import SyncIcon from "@/app/icons/syncIcon.svg";
+
 import { showToast } from "@/app/components/ui-lib";
 import { useChatStore } from "@/app/store/chat";
 import { useMaskStore } from "@/app/store/mask";
@@ -9,6 +14,7 @@ import Locale from "@/app/locales";
 import SyncConfigModal from "./SyncConfigModal";
 import List, { ListItem } from "@/app/components/List";
 import Btn from "@/app/components/Btn";
+import { useAppConfig } from "@/app/store";
 
 export default function SyncItems() {
   const syncStore = useSyncStore();
@@ -19,6 +25,8 @@ export default function SyncItems() {
     return syncStore.cloudSync();
   }, [syncStore]);
 
+  const { isMobileScreen } = useAppConfig();
+
   const [showSyncConfigModal, setShowSyncConfigModal] = useState(false);
 
   const stateOverview = useMemo(() => {
@@ -53,6 +61,7 @@ export default function SyncItems() {
                 setShowSyncConfigModal(true);
               }}
               text={<span className={textStyle}>{Locale.UI.Config}</span>}
+              prefixIcon={isMobileScreen ? undefined : <ConfigIcon />}
             ></Btn>
             {couldSync && (
               <Btn
@@ -66,6 +75,7 @@ export default function SyncItems() {
                   }
                 }}
                 text={<span className={textStyle}>{Locale.UI.Sync}</span>}
+                prefixIcon={<SyncIcon />}
               ></Btn>
             )}
           </div>
@@ -81,12 +91,14 @@ export default function SyncItems() {
                 syncStore.export();
               }}
               text={<span className={textStyle}>{Locale.UI.Export}</span>}
+              prefixIcon={<ExportIcon />}
             ></Btn>
             <Btn
               onClick={async () => {
                 syncStore.import();
               }}
               text={<span className={textStyle}>{Locale.UI.Import}</span>}
+              prefixIcon={<ImportIcon />}
             ></Btn>
           </div>
         </ListItem>