vue3-mobileGPT 基于vite4移動端智能AI聊天模闆

#夏日生活打卡季#

最近chatGPT釋出了IOS端App應用。閑暇之餘也使用vue3開發了一個移動端仿chatGPT聊天模闆。

vue3-mobilegpt 運用vite4建構項目，使用vue3編碼開發，全部采用vue3 setup文法模式。

<script setup>
	import { ref } from 'vue'
	import { useRouter } from 'vue-router'

	import ChatNew from '@/components/ChatNew.vue'
	import ChatList from '@/components/ChatList.vue'
	import ExtraLink from '@/components/ExtraLink.vue'

	import { guid } from '@/utils'

	import { appStore } from '@/store/modules/app'
	import { chatStore } from '@/store/modules/chat'

	const props = defineProps({
		title: { type: [String, Number] }
	})

	const router = useRouter()

	const appState = appStore()
	const chatState = chatStore()

	const showSidebar = ref(false)

	// 建立新會話
	const handleCreate = () => {
		const ssid = guid()
		chatState.createSession(ssid)
		router.push('/')
	}

	const changeMode = () => {
		appState.config.isDark = !appState.config.isDark
		appState.changeDark()
	}
</script>

<template>
	<Navbar :back="false" 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>

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

使用技術

"pinia": "^2.0.36",
"pinia-plugin-persistedstate": "^3.1.0",
"sass": "^1.62.1",
"vant": "^4.3.1",
"ve-plus": "^0.3.2",
"vue": "^3.2.47",
"vue-router": "^4.2.0",
"vite": "^4.3.2"           

vue3狀态管理使用pinia，配合pinia-plugin-persistedstate進行本地存儲。

OK，這次的分享就先到這裡了。