From 89552f87057503b19104dc9e785c9a54017304f3 Mon Sep 17 00:00:00 2001
From: Kerwin <me@zhanghuanglong.com>
Date: Sun, 11 Jun 2023 18:20:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=89=8B=E6=9C=BA=E7=89=88=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=20(Close=20=20#227)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Setting/Keys.vue  | 11 +++++++----
 src/components/common/Setting/index.vue |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/common/Setting/Keys.vue b/src/components/common/Setting/Keys.vue
index eee0a0d7..616965e9 100644
--- a/src/components/common/Setting/Keys.vue
+++ b/src/components/common/Setting/Keys.vue
@@ -6,10 +6,13 @@ import { KeyConfig, Status, UserRole, apiModelOptions, userRoleOptions } from '.
 import { fetchGetKeys, fetchUpdateApiKeyStatus, fetchUpsertApiKey } from '@/api'
 import { t } from '@/locales'
 import { useAuthStore } from '@/store'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
 
 const ms = useMessage()
 const dialog = useDialog()
 const authStore = useAuthStore()
+const { isMobile } = useBasicLayout()
+
 const loading = ref(false)
 const show = ref(false)
 const handleSaving = ref(false)
@@ -227,20 +230,20 @@ onMounted(async () => {
     </div>
   </div>
 
-  <NModal v-model:show="show" :auto-focus="false" preset="card" style="width:50%;">
+  <NModal v-model:show="show" :auto-focus="false" preset="card" :style="{ width: !isMobile ? '50%' : '100%' }">
     <div class="p-4 space-y-5 min-h-[200px]">
       <div class="space-y-6">
         <div class="flex items-center space-x-4">
           <span class="flex-shrink-0 w-[100px]">{{ $t('setting.apiModel') }}</span>
-          <div>
+          <div class="flex-1">
             <NSelect
-              style="width: 240px"
+              style="width: 100%"
               :value="keyConfig.keyModel"
               :options="apiModelOptions"
               @update-value="value => keyConfig.keyModel = value"
             />
           </div>
-          <p>
+          <p v-if="!isMobile">
             <a v-if="keyConfig.keyModel === 'ChatGPTAPI'" target="_blank" href="https://platform.openai.com/account/api-keys">Get Api Key</a>
             <a v-else target="_blank" href="https://chat.openai.com/api/auth/session">Get Access Token</a>
           </p>
diff --git a/src/components/common/Setting/index.vue b/src/components/common/Setting/index.vue
index 917f508e..c97ec9ce 100644
--- a/src/components/common/Setting/index.vue
+++ b/src/components/common/Setting/index.vue
@@ -45,7 +45,7 @@ const show = computed({
 </script>
 
 <template>
-  <NModal v-model:show="show" :auto-focus="false" preset="card" :style="{ 'width': '80%', 'min-height': !isMobile ? '800px' : 'auto' }">
+  <NModal v-model:show="show" :auto-focus="false" preset="card" :style="{ 'width': !isMobile ? '80%' : '100%', 'min-height': !isMobile ? '800px' : 'auto' }">
     <div>
       <NTabs v-model:value="active" type="line" animated>
         <NTabPane name="General" tab="General">