feat: complete the missing UI

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>