uniapp-chatgpt跨端仿ChatGPT实例|uniapp+vue3+pinia多端聊天模板

基于uniapp+vite4+pinia跨多端实现chatgpt会话模板Uniapp-ChatGPT。

uni-chatgpt 使用uni-app+vite4+vue3+pinia+uview-plus等技术构建多端仿制ChatGPT手机端APP会话应用模板。支持编译到h5+小程序+APP端，支持渲染markdown语法及代码高亮、解决软键盘撑起布局问题。

◆ 效果预览

编译 [H5+小程序+App端] 效果如下

◆ 技术栈

• 编辑器：HbuilderX 3.8.4
• 框架技术：Uniapp+Vite4+Vue3+Pinia
• UI组件库：uView-plus^3.1.31
• markdown渲染：markdown-it
• 代码高亮：highlight.js
• 本地缓存：pinia-plugin-unistorage
• 弹框组件：ua-popup（基于uniapp封装跨端弹层组件）
• 自定义组件：导航条ua-navbar+菜单栏ua-tabbar
• 支持编译：小程序+H5+APP端

◆ 功能特性

1. 沉浸式自定义顶部导航条+底部tabbar
2. 支持h5+小程序+App端渲染markdown语法及代码高亮
3. 基于pinia全局状态管理
4. 基于uview-plus跨端vue3组件库
5. 支持会话本地缓存

◆ 项目结构目录

基于hbuilderx创建的项目，整个项目页面全部采用uniapp vue3语法编码开发。

如果对uniapp结合vue3创建多端项目感兴趣，可以去看看之前的分享文章。

https://www.cnblogs.com/xiaoyan2017/p/17487018.html

◆ Uniapp自定义多端Navbar+Tabbar组件

项目中顶部navbar和底部tabbar均是自定义组件实现功能，保证整体风格统一协调。

如下图：在components目录下新建组件。支持easycom模式，无需引入，直接可以使用。

<ua-navbar back="false" custom :title="title" size="40rpx" center fixed :bgcolor="bgcolor">
    <template #left>
        <view @click="showSidebar=true"><text class="iconfont ve-icon-menuon"></text></view>
    </template>
    <template #right>
        <text class="iconfont ve-icon-plus fs-36" @click="handleNewChat"></text>
    </template>
</ua-navbar>