feat: optiminize

app/containers/Settings/AppSetting.tsx

@@ -57,9 +57,7 @@ export default function AppSetting(props: AppSettingProps) {
   return (
     <List
       widgetStyle={{
-        selectClassName: isMobileScreen
-          ? "min-w-select-mobile"
-          : "min-w-select",
+        selectClassName: "min-w-select-mobile md:min-w-select",
         rangeNextLine: isMobileScreen,
       }}
     >

app/containers/Settings/SettingHeader.tsx

@@ -10,37 +10,35 @@ export interface ChatHeaderProps {
 export default function SettingHeader(props: ChatHeaderProps) {
   const { isMobileScreen, goback } = props;
 
-  const navigate = useNavigate();
-
-  let containerClassName = "";
-  let titleClassName = "mr-4";
-  let mainTitleClassName = "";
-  let subTitleClassName = "";
-
-  if (isMobileScreen) {
-    containerClassName = "h-menu-title-mobile bg-settings-header-mobile";
-    titleClassName = "flex flex-col items-center justify-center gap-0.5 text";
-    mainTitleClassName = "text-sm-title h-[19px] leading-5";
-    subTitleClassName = "text-sm-mobile-tab leading-4";
-  }
-
   return (
     <div
-      className={`relative flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap border-b border-settings-header ${containerClassName}`}
+      className={`
+        relative flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap border-b border-settings-header 
+        max-md:h-menu-title-mobile max-md:bg-settings-header-mobile
+      `}
       data-tauri-drag-region
     >
       {isMobileScreen ? (
         <div
-          className="absolute left-4 top-[50%] translate-y-[-50%]"
+          className="absolute left-4 top-[50%] translate-y-[-50%] cursor-pointer"
           onClick={() => goback()}
         >
           <GobackIcon />
         </div>
       ) : null}
 
-      <div className={`flex-1 ${titleClassName}`}>
+      <div
+        className={`
+        flex-1 
+        max-md:flex max-md:flex-col max-md:items-center max-md:justify-center max-md:gap-0.5 max-md:text
+        md:mr-4
+      `}
+      >
         <div
-          className={`line-clamp-1 cursor-pointer text-text-settings-panel-header-title text-chat-header-title font-common ${mainTitleClassName}`}
+          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
+          `}
         >
           {Locale.Settings.Title}
         </div>

app/containers/Settings/SettingPanel.tsx

@@ -47,26 +47,27 @@ export default function Settings(props: MenuWrapperInspectProps) {
 
   const clientConfig = useMemo(() => getClientConfig(), []);
 
-  let containerClassName =
-    "h-[calc(100%-1.25rem)] my-2.5 ml-1 mr-2.5 rounded-md";
-  let listBodyClassName = "px-6 py-8";
-  let cardClassName = "max-w-setting-list mb-8";
-
-  if (isMobileScreen) {
-    containerClassName = "h-setting-panel-mobile";
-    listBodyClassName = "gap-5 w-[100%] px-4 py-5";
-    cardClassName = "mb-6";
-  }
+  const cardClassName = "mb-6 md:max-w-setting-list md:mb-8";
 
   return (
     <div
-      className={`flex flex-col overflow-hidden bg-settings-panel ${containerClassName}`}
+      className={`
+        flex flex-col overflow-hidden bg-settings-panel 
+        h-setting-panel-mobile
+        md:h-[calc(100%-1.25rem)] md:my-2.5 md:ml-1 md:mr-2.5 md:rounded-md
+      `}
     >
       <SettingHeader
         isMobileScreen={isMobileScreen}
         goback={() => setShowPanel?.(false)}
       />
-      <div className={`!overflow-x-hidden ${listBodyClassName}`}>
+      <div
+        className={`
+        !overflow-x-hidden 
+        max-md:gap-5 max-md:w-[100%] px-4 py-5
+        md:px-6 md:py-8
+      `}
+      >
         <Card className={cardClassName} title={Locale.Settings.Basic.Title}>
           <AppSetting />
         </Card>

app/containers/Settings/index.tsx

@@ -12,21 +12,21 @@ export default MenuLayout(function SettingList(props) {
 
   const { isMobileScreen } = config;
 
-  let layoutClassName = "pt-7 px-4";
-  let titleClassName = "pb-5";
-  let itemClassName = "";
-
-  if (isMobileScreen) {
-    layoutClassName = "h-[100%] mx-[-1.5rem] px-6 py-6 bg-settings-menu-mobile";
-    titleClassName = "h-menu-title-mobile";
-    itemClassName = "p-4 bg-settings-menu-item-mobile";
-  }
-
   return (
-    <div className={` ${layoutClassName}`}>
+    <div
+      className={`
+      px-6
+      max-md:h-[100%] max-md:mx-[-1.5rem] max-md:py-6 max-md:bg-settings-menu-mobile
+      md:pt-7 md:px-4
+    `}
+    >
       <div data-tauri-drag-region>
         <div
-          className={`flex items-center justify-between ${titleClassName}`}
+          className={`
+            flex items-center justify-between 
+            max-md:h-menu-title-mobile
+            md:pb-5
+          `}
           data-tauri-drag-region
         >
           <div className="text-setting-title text-text-settings-menu-title font-common font-setting-title">
@@ -39,11 +39,14 @@ export default MenuLayout(function SettingList(props) {
         className={`flex flex-col overflow-y-auto overflow-x-hidden w-[100%]`}
       >
         <div
-          className={`p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
-                border border-settings-menu-item-selected border-opacity-0 rounded-md
-                hover:border-opacity-100 hover:font-semibold hover:bg-settings-menu-item-selected ${itemClassName}
-                flex justify-between items-center
-            `}
+          className={`
+            p-4 font-common text-setting-items font-normal text-text-settings-menu-item-title
+            border 
+            border-opacity-0 rounded-md
+            hover:border-opacity-100 hover:font-semibold hover:bg-settings-menu-item-selected 
+            flex justify-between items-center
+            max-md:bg-settings-menu-item-mobile
+          `}
           onClick={() => {
             setShowPanel?.(true);
           }}