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

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