From 451a456f580f8109584a12716ee0e81001e09880 Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Wed, 8 Mar 2023 08:38:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Setting/General.vue | 62 ++++++++++++-----------
 src/components/common/Setting/index.vue   |  2 +-
 2 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/components/common/Setting/General.vue b/src/components/common/Setting/General.vue
index 2516cbb..954d031 100644
--- a/src/components/common/Setting/General.vue
+++ b/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">
-          <template #icon>
-            <SvgIcon icon="ri:download-2-fill" />
-          </template>
-          {{ $t('common.export') }}
-        </NButton>
-
-        <input id="fileInput" type="file" style="display:none" @change="importData">
-        <NButton @click="handleImportButtonClick">
-          <template #icon>
-            <SvgIcon icon="ri:upload-2-fill" />
-          </template>
-          {{ $t('common.import') }}
-        </NButton>
-
-        <NPopconfirm placement="bottom" @positive-click="clearData">
-          <template #trigger>
-            <NButton>
-              <template #icon>
-                <SvgIcon icon="ri:close-circle-line" />
-              </template>
-              {{ $t('common.clear') }}
-            </NButton>
-          </template>
-          {{ $t('chat.clearHistoryConfirm') }}
-        </NPopconfirm>
+        <div class="flex flex-wrap items-center gap-4">
+          <NButton size="small" @click="exportData">
+            <template #icon>
+              <SvgIcon icon="ri:download-2-fill" />
+            </template>
+            {{ $t('common.export') }}
+          </NButton>
+
+          <input id="fileInput" type="file" style="display:none" @change="importData">
+          <NButton size="small" @click="handleImportButtonClick">
+            <template #icon>
+              <SvgIcon icon="ri:upload-2-fill" />
+            </template>
+            {{ $t('common.import') }}
+          </NButton>
+
+          <NPopconfirm placement="bottom" @positive-click="clearData">
+            <template #trigger>
+              <NButton size="small">
+                <template #icon>
+                  <SvgIcon icon="ri:close-circle-line" />
+                </template>
+                {{ $t('common.clear') }}
+              </NButton>
+            </template>
+            {{ $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>
diff --git a/src/components/common/Setting/index.vue b/src/components/common/Setting/index.vue
index 3b27464..3200b7c 100644
--- a/src/components/common/Setting/index.vue
+++ b/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>