fix: 移动端样式

src/components/common/Setting/General.vue

@@ -151,7 +151,8 @@ function handleImportButtonClick(): void {
       <div class="flex items-center space-x-4">
         <span class="flex-shrink-0 w-[100px]">{{ $t('setting.chatHistory') }}</span>
 
-        <NButton @click="exportData">
+        <div class="flex flex-wrap items-center gap-4">
+          <NButton size="small" @click="exportData">
             <template #icon>
               <SvgIcon icon="ri:download-2-fill" />
             </template>
@@ -159,7 +160,7 @@ function handleImportButtonClick(): void {
           </NButton>
 
           <input id="fileInput" type="file" style="display:none" @change="importData">
-        <NButton @click="handleImportButtonClick">
+          <NButton size="small" @click="handleImportButtonClick">
             <template #icon>
               <SvgIcon icon="ri:upload-2-fill" />
             </template>
@@ -168,7 +169,7 @@ function handleImportButtonClick(): void {
 
           <NPopconfirm placement="bottom" @positive-click="clearData">
             <template #trigger>
-            <NButton>
+              <NButton size="small">
                 <template #icon>
                   <SvgIcon icon="ri:close-circle-line" />
                 </template>
@@ -178,11 +179,13 @@ function handleImportButtonClick(): void {
             {{ $t('chat.clearHistoryConfirm') }}
           </NPopconfirm>
         </div>
+      </div>
       <div class="flex items-center space-x-4">
         <span class="flex-shrink-0 w-[100px]">{{ $t('setting.theme') }}</span>
-        <div class="flex items-center space-x-4">
+        <div class="flex flex-wrap items-center gap-4">
           <template v-for="item of themeOptions" :key="item.key">
             <NButton
+              size="small"
               :type="item.key === theme ? 'primary' : undefined"
               @click="appStore.setTheme(item.key)"
             >
@@ -195,9 +198,10 @@ function handleImportButtonClick(): void {
       </div>
       <div class="flex items-center space-x-4">
         <span class="flex-shrink-0 w-[100px]">{{ $t('setting.language') }}</span>
-        <div class="flex items-center space-x-4">
+        <div class="flex flex-wrap items-center gap-4">
           <template v-for="item of languageOptions" :key="item.key">
             <NButton
+              size="small"
               :type="item.key === language ? 'primary' : undefined"
               @click="appStore.setLanguage(item.key)"
             >
@@ -208,7 +212,7 @@ function handleImportButtonClick(): void {
       </div>
       <div class="flex items-center space-x-4">
         <span class="flex-shrink-0 w-[100px]">{{ $t('setting.resetUserInfo') }}</span>
-        <NButton @click="handleReset">
+        <NButton size="small" @click="handleReset">
           {{ $t('common.reset') }}
         </NButton>
       </div>

src/components/common/Setting/index.vue

@@ -31,7 +31,7 @@ const show = computed({
 
 <template>
   <NModal v-model:show="show" :auto-focus="false">
-    <NCard role="dialog" aria-modal="true" :bordered="false" style="width: 100%; max-width: 640px">
+    <NCard role="dialog" aria-modal="true" :bordered="false" style="width: 95%; max-width: 640px">
       <NTabs v-model:value="active" type="line" animated>
         <NTabPane name="General" tab="General">
           <template #tab>