feat: 支持 accessToken 请求 web api 调用 (#80)

* feat: 支持 markdown 格式和图片

* perf: 重载的时候滚动条保持

* chore: version 2.5.2

* feat: 添加文字换行

* chore: 添加新封面

* chore: 更新 cover

* feat: 支持 web api 的形式

* feat: 支持新模型和调整超时

* feat: 添加反向代理

* chore: 更新 README.md

* feat: 添加超时和反向代理显示

* chore: version 2.6.0

* chore: update README

src/api/index.ts

@@ -12,3 +12,9 @@ export function fetchChatAPI<T = any>(
     signal,
   })
 }
+
+export function fetchChatConfig<T = any>() {
+  return post<T>({
+    url: '/config',
+  })
+}

src/components/common/Setting/index.vue

@@ -0,0 +1,67 @@
+<script setup lang='ts'>
+import { computed, ref, watch } from 'vue'
+import { NCard, NModal } from 'naive-ui'
+import { fetchChatConfig } from '@/api'
+
+interface Props {
+  visible: boolean
+}
+
+interface Emit {
+  (e: 'update:visible', visible: boolean): void
+}
+
+interface ConfigState {
+  timeoutMs?: number
+  reverseProxy?: string
+  apiModel?: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const show = computed({
+  get() {
+    return props.visible
+  },
+  set(visible: boolean) {
+    emit('update:visible', visible)
+  },
+})
+
+const config = ref<ConfigState>()
+
+async function fetchConfig() {
+  try {
+    const { data } = await fetchChatConfig<ConfigState>()
+    config.value = data
+  }
+  catch (error) {
+    // ...
+  }
+}
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val)
+      fetchConfig()
+  },
+)
+</script>
+
+<template>
+  <NModal v-model:show="show" style="width: 80%; max-width: 460px;">
+    <NCard>
+      <div class="space-y-4">
+        <h1 class="text-xl font-bold">
+          当前后台设置
+        </h1>
+        <p>API方式：{{ config?.apiModel ?? '-' }}</p>
+        <p>反向代理：{{ config?.reverseProxy ?? '-' }}</p>
+        <p>超时时间：{{ config?.timeoutMs ?? '-' }}</p>
+      </div>
+    </NCard>
+  </NModal>
+</template>

src/components/common/index.ts

@@ -2,5 +2,6 @@ import HoverButton from './HoverButton/index.vue'
 import NaiveProvider from './NaiveProvider/index.vue'
 import SvgIcon from './SvgIcon/index.vue'
 import UserAvatar from './UserAvatar/index.vue'
+import Setting from './Setting/index.vue'
 
-export { HoverButton, NaiveProvider, SvgIcon, UserAvatar }
+export { HoverButton, NaiveProvider, SvgIcon, UserAvatar, Setting }

src/typings/env.d.ts

@@ -2,5 +2,6 @@
 
 interface ImportMetaEnv {
 	readonly VITE_GLOB_API_URL: string;
+	readonly VITE_GLOB_API_TIMEOUT: string;
 	readonly VITE_APP_API_BASE_URL: string;
 }

src/utils/request/axios.ts

@@ -2,7 +2,7 @@ import axios, { type AxiosResponse } from 'axios'
 
 const service = axios.create({
   baseURL: import.meta.env.VITE_GLOB_API_URL,
-  timeout: 30 * 1000,
+  timeout: !isNaN(+import.meta.env.VITE_GLOB_API_TIMEOUT) ? Number(import.meta.env.VITE_GLOB_API_TIMEOUT) : 60 * 1000,
 })
 
 service.interceptors.request.use(

src/views/chat/layout/sider/Footer.vue

@@ -0,0 +1,19 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+import { HoverButton, Setting, SvgIcon, UserAvatar } from '@/components/common'
+
+const show = ref(false)
+</script>
+
+<template>
+  <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t">
+    <UserAvatar />
+    <HoverButton tooltip="Setting" @click="show = true">
+      <span class="text-xl text-[#4f555e]">
+        <SvgIcon icon="ri:settings-4-line" />
+      </span>
+    </HoverButton>
+
+    <Setting v-model:visible="show" />
+  </footer>
+</template>

src/views/chat/layout/sider/index.vue

@@ -3,7 +3,7 @@ import type { CSSProperties } from 'vue'
 import { computed, watch } from 'vue'
 import { NButton, NLayoutSider } from 'naive-ui'
 import List from './List.vue'
-import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
+import Footer from './Footer.vue'
 import { useAppStore, useChatStore } from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 
@@ -67,14 +67,7 @@ watch(
           <List />
         </div>
       </main>
-      <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t">
-        <UserAvatar />
-        <HoverButton tooltip="Setting">
-          <span class="text-xl text-[#4f555e]">
-            <SvgIcon icon="ri:settings-4-line" />
-          </span>
-        </HoverButton>
-      </footer>
+      <Footer />
     </div>
   </NLayoutSider>
   <template v-if="isMobile">