From 73bf8c01a95bd2a6e16652eb25922ed887643992 Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Mon, 13 Mar 2023 08:21:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AF=AD=E8=A8=80=E8=AE=BE=E5=AE=9A?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E4=B8=8B=E6=8B=89=E6=A1=86=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Setting/General.vue | 25 +++++++++++++----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/common/Setting/General.vue b/src/components/common/Setting/General.vue
index e75b0a9..bb9514a 100644
--- a/src/components/common/Setting/General.vue
+++ b/src/components/common/Setting/General.vue
@@ -1,16 +1,19 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { NButton, NInput, NPopconfirm, useMessage } from 'naive-ui'
+import { NButton, NInput, NPopconfirm, NSelect, useMessage } from 'naive-ui'
 import type { Language, Theme } from '@/store/modules/app/helper'
 import { SvgIcon } from '@/components/common'
 import { useAppStore, useUserStore } from '@/store'
 import type { UserInfo } from '@/store/modules/user/helper'
 import { getCurrentDate } from '@/utils/functions'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { t } from '@/locales'
 
 const appStore = useAppStore()
 const userStore = useUserStore()
 
+const { isMobile } = useBasicLayout()
+
 const ms = useMessage()
 
 const theme = computed(() => appStore.theme)
@@ -148,7 +151,10 @@ function handleImportButtonClick(): void {
         </NButton>
       </div>
 
-      <div class="flex items-center space-x-4">
+      <div
+        class="flex items-center space-x-4"
+        :class="isMobile && 'items-start'"
+      >
         <span class="flex-shrink-0 w-[100px]">{{ $t('setting.chatHistory') }}</span>
 
         <div class="flex flex-wrap items-center gap-4">
@@ -199,15 +205,12 @@ function handleImportButtonClick(): void {
       <div class="flex items-center space-x-4">
         <span class="flex-shrink-0 w-[100px]">{{ $t('setting.language') }}</span>
         <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)"
-            >
-              {{ item.label }}
-            </NButton>
-          </template>
+          <NSelect
+            style="width: 140px"
+            :value="language"
+            :options="languageOptions"
+            @update-value="value => appStore.setLanguage(value)"
+          />
         </div>
       </div>
       <div class="flex items-center space-x-4">