mobilegpt-vue3 基于vite4+vant高仿ChatGPT实战

原创

andy2018

发布于 2023-05-23 11:43:19

7420

发布于 2023-05-23 11:43:19

文章被收录于专栏：h5h5

最近闲暇时间利用vite4搭建了一个vue3移动端仿chatgpt聊天模板vue3-mobilegpt。

chatgpt-vue3-mobile 配合Vant4组件库，支持light/dark主题模式。

使用技术

开发工具：Cursor
框架技术：vite4+vue3+vue-router+pinia2
组件库：Vant^4.3.1 + ve-plus^0.3.2
代码高亮：highlight.js^11.7.0
markdown解析：vue3-markdown-it
数据存储：pinia-plugin-persistedstate^3.1.0
样式处理：sass^1.62.1

开发工具使用Cursor，一款vscode精简版，搭载了AI编程功能。

基于vite4.x构建项目框架，全部采用vue3 setup语法模式编码开发项目。

<script setup>
  import { Loaded } from '@/plugins/loaded'
  // 初始化
  Loaded()
</script>

<template>
  <div class="vgpt__container flexbox flex-col">
    <router-view />
  </div>
</template>

<style scoped></style>

vite.config.js配置

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { parseEnv } from './src/utils/env'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const viteEnv = loadEnv(mode, process.cwd())
  const env = parseEnv(viteEnv)

  return {
    plugins: [vue()],

    // base: '/',
    // mode: 'development', // development|production

    /*构建选项*/
    build: {
      // minify: 'esbuild', // 打包方式 esbuild(打包快)|terser
      // chunkSizeWarningLimit: 2000, // 打包大小警告
      // rollupOptions: {
      // 	output: {
      // 		chunkFileNames: 'assets/js/[name]-[hash].js',
      // 		entryFileNames: 'assets/js/[name]-[hash].js',
      // 		assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
      // 	}
      // }
    },
    esbuild: {
      // 打包去除 console.log 和 debugger
      drop: env.VITE_DROP_CONSOLE ? ['console', 'debugger'] : []
    },

    /*开发服务器选项*/
    server: {
      // 端口
      port: env.VITE_PORT,
      // 是否浏览器自动打开
      open: env.VITE_OPEN,
      // 开启https
      https: env.VITE_HTTPS,
      // 代理配置
      proxy: {
        // ...
      }
    },

    resolve: {
      // 设置别名
      alias: {
        '@': resolve(__dirname, 'src'),
        '@assets': resolve(__dirname, 'src/assets'),
        '@components': resolve(__dirname, 'src/components'),
        '@views': resolve(__dirname, 'src/views')
      }
    }
  }
})

主入口main.js

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'

import Router from './router'
import Store from './store'

import Plugins from './plugins'

const app = createApp(App)

app.use(Router)
app.use(Store)
app.use(Plugins)

app.mount('#app')

pinia状态管理

/**
 * 状态管理 Pinia util
 * @author YXY
 */

import { createPinia } from 'pinia'
// 引入pinia本地持久化存储
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

vue3-mobilegpt聊天编辑框

聊天编辑框使用Input组件实现功能，支持多行文本、自定义前后缀插槽等功能。

<template>
    <div class="vgpt__editor">
        <div class="vgpt__editor-inner flexbox">
            <Input
                class="flex1"
                ref="editorRef"
                v-model="editorText"
                type="textarea"
                :autosize="{maxRows: 6}"
                clearable
                placeholder="Prompt..."
                @keydown="handleKeydown"
                @clear="handleClear"
                style="margin: 0 5px;"
            >
                <template #suffix>
                    <Button class="btn" type="link" @click.stop>
                        <Icon name="ve-icon-image" size="16" cursor />
                        <input ref="uploadImgRef" type="file" title="" accept="image/*" @change="handleUploadImage" />
                    </Button>
                    <van-popover v-model:show="showPopover" placement="top">
                        <template #reference>
                            <Button class="btn" type="link" icon="ve-icon-audio"></Button>
                        </template>
                        <div class="flexbox flex-alignc flex-col" style="padding: 15px 0; min-width: 120px;">
                            <Icon name="ve-icon-yuyin" size="40" color="#0fa27e" />
                            <p class="fs-12 mb-15 c-999">网络不给力</p>
                            <van-button size="mini"><i></i>开始讲话</van-button>
                        </div>
                    </van-popover>
                </template>
            </Input>
            <Button type="primary" icon="ve-icon-arrowup" circle :disabled="!editorText" @click="handleSubmit"></Button>
        </div>
    </div>
</template>

聊天数据使用pinia缓存插件pinia-plugin-persistedstate存储在本地。

/**
 * 会话状态管理Pinia
 * @author YXY
 * @contact Q：282310962
 */

import { defineStore } from 'pinia'
import { guid, isEmpty } from '@/utils'

export const chatStore = defineStore('chat', {
    state: () => ({
        sessionId: '',
        session: []
    }),
    actions: {
        // 创建新会话
        createSession(ssid) {
            this.sessionId = ssid
            this.session.push({
                sessionId: ssid,
                title: '',
                data: []
            })
        },

        // 新增会话
        addSession(message) {
            // 判断当前会话uuid是否存在，不存在创建新会话
            if(!this.sessionId) {
                const ssid = guid()
                this.createSession(ssid)
            }
            this.session.map(item => {
                if(item.sessionId == this.sessionId) {
                    if(!item.title) {
                        item.title = message.content
                    }
                    item.data.push(message)
                }
            })
        },

        // 获取会话
        getSession() {
            return this.session.find(item => item.sessionId == this.sessionId)
        },

        // 移除会话
        removeSession(ssid) {
            const index = this.session.findIndex(item => item?.sessionId === ssid)
            if(index > -1) {
                this.session.splice(index, 1)
            }
            this.sessionId = ''
        },
        // 删除某一条会话
        deleteSession(ssid) {
            this.session.map(item => {
                if(item.sessionId == this.sessionId) {
                    if(item.data && !isEmpty(item.data)) {
                        item.data.map((it, key) => {
                            if(it.key == ssid) {
                                item.data.splice(key, 1)
                            }
                        })
                    }
                }
            })
        },

        // 清空会话
        clearSession() {
            this.session = []
            this.sessionId = ''
        }
    },
    // 本地持久化存储(默认存储localStorage)
    persist: true
})