feat: 语言设定改为下拉框选择

Author: Chanzhaoyu

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">