今天给大家分享一款最近开发的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聊天模板的一些分享。