mobilegpt-vue3 基于vue3+vant建構移動端chatgpt模闆

#夏日生活打卡季#

今天給大家分享一款最近開發的vue3移動版chatgpt聊天模闆Vue3MobileGPT。

mobilegpt-vue3 運用vue3+vue-router+pinia2+vant+vue3-markdown等技術開發mobile端仿chatgpt聊天執行個體模闆。

支援light/dark兩種主題模式、側邊彈框菜單等功能。

技術棧

開發工具：Vscode
架構技術：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           

項目結構

基于vite4.x搭建架構，全部采用vue3 setup文法糖編碼規範。

導覽列Navbar.vue

<Navbar :back="false" bgcolor="transparent" color="#0fa27e" transparent>
	<template #right>
		<i class="iconfont ml-20 fs-42" :class="appState.config.isDark ? 've-icon-sunny' : 've-icon-dark'" @click="changeMode"></i>
	</template>
</Navbar>           

<Navbar :back="false" bgcolor="linear-gradient(45deg,#41d1ad 25%,#705cf6)" color="#fff" center zIndex="1000">
	<div style="padding: 0 12px;" @click="showSidebar=true"><i class="iconfont ve-icon-menu fs-42"></i></div>
	<template #title>{{ title || 'Vue3-MobileGPT'}}</template>
	<template #right>
		<i class="iconfont ve-icon-plus-circle fs-42" @click="handleCreate"></i>
		<!-- light+dark -->
		<i class="iconfont ml-20 fs-42" :class="appState.config.isDark ? 've-icon-sunny' : 've-icon-dark'" @click="changeMode"></i>
	</template>
</Navbar>           

支援自定義标題、背景色、自定義插槽等功能。

側邊欄菜單使用了v3popup彈框元件。

<!-- 側邊欄菜單 -->
<v3-popup v-model="showSidebar" position="left" :zIndex="1000">
	<aside class="ve__layout-aside flexbox flex-col" style="height: 100%;">
		<ChatNew @update="showSidebar=false" />
		<div class="flex1" style="overflow-y: auto;">
			<ChatList @update="showSidebar=false" />
		</div>
		<ExtraLink />
	</aside>
</v3-popup>           

如上圖：聊天會話框使用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-plugin-persistedstate插件。

/**
 * 會話狀态存儲管理
 * @author YXY
 */

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
})           

好了，以上就是vue3+pinia2開發移動版chatgpt聊天模闆的一些分享。