（14-4-01）ChatGPT聊天系统（GPT-3.5/4.0+ Vue+pnpm+SQLite3）：系统前端（1）

14.6  系统前端

本项目的前端功能是通过Vue实现的，建立和项目后端API的连接，实现ChatGPT聊天页面功能。在本节的内容中，将详细讲解本项目前端模块的实现过程。

14.6.1  设置代理

编写文件proxy.ts创建Vite开发服务器代理的函数，其作用是在开发环境中将来自前端应用程序的HTTP请求转发到后端API服务器，以便项目测试和调试。在文件文件proxy.ts中定义了一个名为 createViteProxy 的函数，该函数接受如下两个参数：

1. isOpenProxy：一个布尔值，指示代理是否打开。当代理关闭时，函数将返回 undefined。
2. viteEnv：一个包含当前Vite环境变量的对象，例如 VITE_APP_API_BASE_URL 等。

文件proxy.ts的主要实现代码如下所示。

import type { ProxyOptions } from 'vite'

export function createViteProxy(isOpenProxy: boolean, viteEnv: ImportMetaEnv) {
  if (!isOpenProxy)
    return

  const proxy: Record<string, string | ProxyOptions> = {
    '/api': {
      target: viteEnv.VITE_APP_API_BASE_URL,
      changeOrigin: true,
      rewrite: path => path.replace('/api/', '/'),
    },
  }

  return proxy
}

如果打开代理，函数createViteProxy()将创建一个名为 proxy 的对象，并使用 viteEnv.VITE_APP_API_BASE_URL 作为后端API服务器的基本URL。然后，它将设置 /api 路径的代理规则，以便将来自前端应用程序的HTTP请求重定向到后端API服务器。同时，还可以通过 rewrite 属性将URL中的路径重写为API服务器的实际路径，例如将 /api/users 重写为 /users。

最后，它将返回代理配置对象（proxy），供Vite开发服务器使用。

14.6.2  HTTP请求

编写文件frontend\src\api\index.ts，功能是在前台页面向后台服务器发送HTTP请求，主要实现代码如下所示。

export function fetchChatAPI<T = any>(
  prompt: string,
  options?: { conversationId?: string; parentMessageId?: string },
  signal?: GenericAbortSignal,
) {
  return post<T>({
    url: '/chat',
    data: { prompt, options },
    signal,
  })
}

export function fetchChatConfig<T = any>() {
  return post<T>({
    url: '/config',
  })
}

export function fetchChatAPIProcess<T = any>(
  params: {
    prompt: string
    options?: { conversationId?: string; parentMessageId?: string }
    baseURI?: string
    accessToken?: string
    isGPT4?: boolean
    signal?: GenericAbortSignal
    onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void },
) {
  const settingStore = useSettingStore()

  return post<T>({
    url: '/chat-process',
    data: { prompt: params.prompt, options: params.options, systemMessage: settingStore.systemMessage, baseURI: params.baseURI, accessToken: params.accessToken, isGPT4: params.isGPT4 },
    signal: params.signal,
    onDownloadProgress: params.onDownloadProgress,
  })
}

export function fetchSession<T>() {
  return post<T>({
    url: '/session',
  })
}

export function fetchVerify<T>(token: string) {
  return post<T>({
    url: '/verify',
    data: { token },
  })
}

在上述代码中实现了用于向服务器发送HTTP请求的方法，它们使用库axios来执行网络请求，并返回Promise对象以便在异步环境中使用。对上述方法的具体说明如下：

1. 方法fetchChatAPI()：向 /chat 接口发送POST请求，传递一个名为 prompt 的字符串参数和一个可选的包含 conversationId 和 parentMessageId 属性的对象，用于获取聊天机器人的回复。该函数返回一个泛型类型 T 的Promise对象，可以通过 then 方法处理响应结果。
2. 方法fetchChatConfig<T>()：向 /config 接口发送POST请求，用于获取聊天机器人的配置信息。该函数返回一个泛型类型 T 的Promise对象，可以通过 then 方法处理响应结果。
3. 方法fetchChatAPIProcess<T>(params: {...})：向 /chat-process 接口发送POST请求，传递一个包含多个参数的对象，用于获取聊天机器人的回复和处理过程。该函数返回一个泛型类型 T 的Promise对象，可以通过 then 方法处理响应结果。
4. 方法fetchSession<T>()：向 /session 接口发送POST请求，获取当前用户的会话信息。该函数返回一个泛型类型 T 的Promise对象，可以通过 then 方法处理响应结果。
5. 方法fetchVerify<T>(token: string)：向 /verify 接口发送POST请求，传递一个名为 token 的字符串参数，用于验证用户的身份。该函数返回一个泛型类型 T 的Promise对象，可以通过 then 方法处理响应结果。

上述方法都是基于 post 方法封装而成的，其中使用了一些默认请求配置，例如基本URL、请求头、超时时间等。此外，方法fetchChatAPIProcess()还支持在下载过程中获取进度信息，并接受一个可取消的 signal 参数，以便在需要时取消请求。

在实际应用程序中，我们可能需要根据具体业务需求定义更多的HTTP请求函数，并针对不同的接口和数据类型进行适当的错误处理和数据转换。

14.6.3  ChatGPT聊天界面侧边栏

编写文件frontend/src/views/chat/layout/sider/index.vue实现ChatGPT聊天界面的左侧边栏功能，主要实现代码如下所示。

const appStore = useAppStore()
const chatStore = useChatStore()

const { isMobile } = useBasicLayout()
const show = ref(false)

const collapsed = computed(() => appStore.siderCollapsed)

function handleAdd() {
  chatStore.addHistory({ title: 'New Chat', uuid: Date.now(), isEdit: false })
  if (isMobile.value)
    appStore.setSiderCollapsed(true)
}

function handleUpdateCollapsed() {
  appStore.setSiderCollapsed(!collapsed.value)
}

const getMobileClass = computed<CSSProperties>(() => {
  if (isMobile.value) {
    return {
      position: 'fixed',
      zIndex: 50,
    }
  }
  return {}
})

const mobileSafeArea = computed(() => {
  if (isMobile.value) {
    return {
      paddingBottom: 'env(safe-area-inset-bottom)',
    }
  }
  return {}
})

watch(
  isMobile,
  (val) => {
    appStore.setSiderCollapsed(val)
  },
  {
    immediate: true,
    flush: 'post',
  },
)
</script>

<template>
  <NLayoutSider
    :collapsed="collapsed"
    :collapsed-width="0"
    :width="260"
    :show-trigger="isMobile ? false : 'arrow-circle'"
    collapse-mode="transform"
    position="absolute"
    bordered
    :style="getMobileClass"
    @update-collapsed="handleUpdateCollapsed"
  >
    <div class="flex flex-col h-full" :style="mobileSafeArea">
      <main class="flex flex-col flex-1 min-h-0">
        <div class="p-4">
          <NButton dashed block @click="handleAdd">
            {{ $t('chat.newChatButton') }}
          </NButton>
        </div>
        <div class="flex-1 min-h-0 pb-4 overflow-hidden">
          <List />
        </div>
        <div class="p-4">
          <NButton block @click="show = true">
            {{ $t('store.siderButton') }}
          </NButton>
        </div>
      </main>
      <Footer />
    </div>
  </NLayoutSider>
  <template v-if="isMobile">
    <div v-show="!collapsed" class="fixed inset-0 z-40 bg-black/40" @click="handleUpdateCollapsed" />
  </template>
  <PromptStore v-model:visible="show" />
</template>

上述代码使用了多个Vue.js实用工具，例如使用computed、ref、watch等来管理侧边栏的状态和显示内容。在侧边栏中还包括了一个“新建聊天”按钮，用于创建新的聊天会话，并在侧边栏中显示已有的聊天历史记录。同时，在移动设备上，该组件还会自动适应安全区域，并提供了一个可折叠的侧边栏菜单。此外，在侧边栏中还包括了一个Footer组件，用于显示底部的版权信息。最后，该组件还引用了PromptStore组件，并在需要时显示该组件的模态对话框。