fix: 移动端样式

src/components/common/Setting/General.vue

@@ -151,38 +151,41 @@ 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">
-          <template #icon>
+          <NButton size="small" @click="exportData">
-            <SvgIcon icon="ri:download-2-fill" />
+            <template #icon>
-          </template>
+              <SvgIcon icon="ri:download-2-fill" />
-          {{ $t('common.export') }}
+            </template>
-        </NButton>
+            {{ $t('common.export') }}
-
+          </NButton>
-        <input id="fileInput" type="file" style="display:none" @change="importData">
+
-        <NButton @click="handleImportButtonClick">
+          <input id="fileInput" type="file" style="display:none" @change="importData">
-          <template #icon>
+          <NButton size="small" @click="handleImportButtonClick">
-            <SvgIcon icon="ri:upload-2-fill" />
+            <template #icon>
-          </template>
+              <SvgIcon icon="ri:upload-2-fill" />
-          {{ $t('common.import') }}
+            </template>
-        </NButton>
+            {{ $t('common.import') }}
-
+          </NButton>
-        <NPopconfirm placement="bottom" @positive-click="clearData">
+
-          <template #trigger>
+          <NPopconfirm placement="bottom" @positive-click="clearData">
-            <NButton>
+            <template #trigger>
-              <template #icon>
+              <NButton size="small">
-                <SvgIcon icon="ri:close-circle-line" />
+                <template #icon>
-              </template>
+                  <SvgIcon icon="ri:close-circle-line" />
-              {{ $t('common.clear') }}
+                </template>
-            </NButton>
+                {{ $t('common.clear') }}
-          </template>
+              </NButton>
-          {{ $t('chat.clearHistoryConfirm') }}
+            </template>
-        </NPopconfirm>
+            {{ $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>