xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-04 16:23:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add index page for mobile

Browse Source
This commit is contained in:
RockYang
2024-04-28 19:09:26 +08:00
parent 039d949523
commit 7f31a301e3
28 changed files with 640 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@@ -7,6 +7,8 @@
* 功能优化：优化首页登录注册页面的 UI
* BUG修复：修复License验证的逻辑漏洞
* Bug修复：后台添加用户的时候密码规则限制跟前台注册保持一致
* 功能新增：管理后台支持切换主题，支持 light 和 dark 模式
* 功能新增：移动端新增 DALL-E 绘画功能
## v4.0.4

10
api/handler/chatimpl/chat_item_handler.go
View File

@@ -187,12 +187,20 @@ func (h *ChatHandler) Detail(c *gin.Context) {
return
}
// 填充角色名称
var role model.ChatRole
res = h.DB.Where("id", chatItem.RoleId).First(&role)
if res.Error != nil {
resp.ERROR(c, "Role not found")
return
}
var chatItemVo vo.ChatItem
err := utils.CopyObject(chatItem, &chatItemVo)
if err != nil {
resp.ERROR(c, err.Error())
return
}
chatItemVo.RoleName = role.Name
resp.SUCCESS(c, chatItemVo)
}

15
api/store/vo/chat_item.go
View File

@@ -2,11 +2,12 @@ package vo
type ChatItem struct {
BaseVo
UserId uint `json:"user_id"`
Icon string `json:"icon"`
RoleId uint `json:"role_id"`
ChatId string `json:"chat_id"`
ModelId uint `json:"model_id"`
Model string `json:"model"`
Title string `json:"title"`
UserId uint `json:"user_id"`
Icon string `json:"icon"`
RoleId uint `json:"role_id"`
RoleName string `json:"role_name"`
ChatId string `json:"chat_id"`
ModelId uint `json:"model_id"`
Model string `json:"model"`
Title string `json:"title"`
}

2
web/.env.development
View File

@@ -6,4 +6,4 @@ VUE_APP_ADMIN_USER=admin
VUE_APP_ADMIN_PASS=admin123
VUE_APP_KEY_PREFIX=ChatPLUS_DEV_
VUE_APP_TITLE="Geek-AI 创作系统"
VUE_APP_VERSION=v4.0.4
VUE_APP_VERSION=v4.0.5

2
web/.env.production
View File

@@ -2,4 +2,4 @@ VUE_APP_API_HOST=
VUE_APP_WS_HOST=
VUE_APP_KEY_PREFIX=ChatPLUS_
VUE_APP_TITLE="Geek-AI 创作系统"
VUE_APP_VERSION=v4.0.4
VUE_APP_VERSION=v4.0.5

1
web/src/App.vue
View File

@@ -32,7 +32,6 @@ window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
<style lang="stylus">
html, body {
height: 100%;
margin: 0;
padding: 0;
}

3
web/src/assets/css/mobile/chat-list.styl
View File

@@ -1,5 +1,8 @@
.mobile-chat-list {
.content {
padding-top 46px
padding-bottom 60px
.van-list {
.van-cell__value {
.chat-list-item {

25
web/src/assets/css/mobile/chat-session.styl
View File

@@ -1,14 +1,23 @@
.mobile-chat {
.message-list-box {
//padding-top 50px
padding-bottom 10px
overflow-x auto
background #F5F5F5;
.van-nav-bar {
position static
}
.van-cell {
background none
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
.chat-list-wrapper {
padding 10px 0 10px 0
background #F5F5F5;
overflow hidden
.message-list-box {
overflow auto
.van-cell {
background none
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
}
}
.chat-box-wrapper {

9
web/src/components/SendMsg.vue
View File

@@ -11,7 +11,7 @@
style="width:90%;max-width: 360px;"
>
<slide-captcha
v-if="isIphone()"
v-if="isMobile()"
:bg-img="bgImg"
:bk-img="bkImg"
:result="result"
@@ -42,8 +42,9 @@ import {ElMessage} from "element-plus";
import {httpGet, httpPost} from "@/utils/http";
import CaptchaPlus from "@/components/CaptchaPlus.vue";
import SlideCaptcha from "@/components/SlideCaptcha.vue";
import {isIphone} from "@/utils/libs";
import {isMobile} from "@/utils/libs";
// eslint-disable-next-line no-undef
const props = defineProps({
receiver: String,
size: String,
@@ -98,8 +99,8 @@ const loadCaptcha = () => {
}
showCaptcha.value = true
// iphone 手机用滑动验证码
if (isIphone()) {
// 手机用滑动验证码
if (isMobile()) {
getSlideCaptcha()
} else {
handleRequestCaptCode()

31
web/src/components/admin/AdminHeader.vue
View File

@@ -36,20 +36,9 @@
</span>
<template #dropdown>
<el-dropdown-menu>
<a href="https://github.com/yangjian102621/chatgpt-plus" target="_blank">
<el-dropdown-item>
<i class="iconfont icon-github"></i>
<span>{{ sysTitle }}</span>
</el-dropdown-item>
</a>
<el-dropdown-item>
<i class="iconfont icon-version"></i> 当前版本：{{ version }}
</el-dropdown-item>
<el-dropdown-item @click="showDialog = true">
<i class="iconfont icon-reward"></i>
<span>打赏作者</span>
</el-dropdown-item>
<el-dropdown-item divided @click="logout">
<i class="iconfont icon-logout"></i>
<span>退出登录</span>
@@ -60,36 +49,19 @@
</div>
</div>
<el-dialog
v-model="showDialog"
:show-close="true"
class="donate-dialog"
width="400px"
title="请作者喝杯咖啡"
>
<el-alert type="info" :closable="false">
<p>如果你觉得这个项目对你有帮助，并且情况允许的话，可以请作者喝杯咖啡，非常感谢你的支持～</p>
</el-alert>
<p>
<el-image :src="donateImg"/>
</p>
</el-dialog>
</div>
</template>
<script setup>
import {computed, onMounted, ref} from 'vue';
import {getMenuItems, useSidebarStore} from '@/store/sidebar';
import {useRouter} from 'vue-router';
import {useRouter} from "vue-router";
import {ArrowDown, ArrowRight, Expand, Fold, Moon, Sunny} from "@element-plus/icons-vue";
import {httpGet} from "@/utils/http";
import {ElMessage} from "element-plus";
import {removeAdminToken} from "@/store/session";
const sysTitle = ref(process.env.VUE_APP_TITLE)
const version = ref(process.env.VUE_APP_VERSION)
const avatar = ref('/images/user-info.jpg')
const donateImg = ref('/images/wechat-pay.png')
const showDialog = ref(false)
const sidebar = useSidebarStore();
const router = useRouter();
const breadcrumb = ref([])
@@ -187,7 +159,6 @@ const logout = function () {
font-size: 22px;
color: #303133;
background-color #ffffff
border-bottom 1px solid #eaecef
.collapse-btn {
display: flex;

12
web/src/components/admin/AdminSidebar.vue
View File

@@ -1,9 +1,9 @@
<template>
<div :class="'sidebar '+theme">
<div class="logo">
<a class="logo" href="/" target="_blank">
<el-image :src="logo"/>
<span class="text" v-show="!sidebar.collapse">{{ title }}</span>
</div>
</a>
<el-menu
class="sidebar-el-menu"
@@ -54,9 +54,9 @@
<script setup>
import {computed, ref} from 'vue';
import {setMenuItems, useSidebarStore} from '@/store/sidebar';
import {useRoute} from 'vue-router';
import {httpGet} from "@/utils/http";
import {ElMessage} from "element-plus";
import {useRoute} from "vue-router";
const title = ref('Chat-Plus-Admin')
const logo = ref('/images/logo.png')
@@ -199,6 +199,7 @@ setMenuItems(items)
width 219px
background-color #324157
padding 6px 15px;
cursor pointer
.el-image {
width 36px;
@@ -248,6 +249,7 @@ setMenuItems(items)
.logo {
background var(--el-bg-color)
border-right 1px solid var(--el-border-color)
.text {
color var(--el-text-color-regular)
@@ -269,6 +271,10 @@ setMenuItems(items)
.sidebar-el-menu:not(.el-menu--collapse) {
width: 250px;
}
.el-menu {
border-color var(--el-border-color)
}
}
</style>

116
web/src/components/admin/AdminTags.vue
View File

@@ -118,71 +118,75 @@ const handleTags = (command) => {
// });
</script>
<style>
<style scoped lang="stylus">
.tags {
position: relative;
height: 30px;
overflow: hidden;
background: #fff;
padding-right: 120px;
padding 5px 120px 5px 10px
-webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
ul {
box-sizing: border-box;
width: 100%;
height: 100%;
.tags-li {
display: flex;
align-items: center;
float: left;
margin: 3px 5px 2px 3px;
border-radius: 3px;
font-size: 12px;
overflow: hidden;
cursor: pointer;
height: 23px;
border: 1px solid var(--el-border-color);
background: var(--el-bg-color);
padding: 0 5px 0 12px;
color: var(--el-text-color);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
&:hover {
background: var(--el-menu-bg-color-dark);
}
}
.tags-li-title {
float: left;
max-width: 80px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 5px;
color: #666;
}
.tags-li.active .tags-li-title {
color: var(--el-color-primary)
}
}
.tags-close-box {
position: absolute;
right: 0;
top: 7px;
box-sizing: border-box;
padding-top: 1px;
text-align: center;
width: 110px;
height: 30px;
background: var(--el-bg-color);
z-index: 10;
}
}
.tags ul {
box-sizing: border-box;
width: 100%;
height: 100%;
.tags.dark {
border-bottom 1px solid var(--el-border-color)
}
.tags-li {
display: flex;
align-items: center;
float: left;
margin: 3px 5px 2px 3px;
border-radius: 3px;
font-size: 12px;
overflow: hidden;
cursor: pointer;
height: 23px;
border: 1px solid var(--el-border-color);
background: var(--el-bg-color);
padding: 0 5px 0 12px;
color: var(--el-text-color);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.tags-li:hover {
background: var(--el-menu-bg-color-dark);
}
.tags-li-title {
float: left;
max-width: 80px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 5px;
color: #666;
}
.tags-li.active .tags-li-title {
color: var(--el-color-primary)
}
.tags-close-box {
position: absolute;
right: 0;
top: 2px;
box-sizing: border-box;
padding-top: 1px;
text-align: center;
width: 110px;
height: 30px;
background: var(--el-bg-color);
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
z-index: 10;
}
</style>

1
web/src/components/mobile/ChatPrompt.vue
View File

@@ -16,6 +16,7 @@ import {onMounted, ref} from "vue";
import Clipboard from "clipboard";
import {showNotify} from "vant";
// eslint-disable-next-line no-unused-vars,no-undef
const props = defineProps({
content: {
type: String,

6
web/src/main.js
View File

@@ -14,7 +14,7 @@ import {
Collapse,
CollapseItem,
ConfigProvider,
Dialog,
Dialog, Divider,
DropdownItem,
DropdownMenu,
Empty,
@@ -28,7 +28,7 @@ import {
Lazyload,
List,
Loading,
NavBar,
NavBar, NoticeBar,
Notify,
Overlay,
Picker,
@@ -97,6 +97,8 @@ app.use(Lazyload);
app.use(ImagePreview);
app.use(Tab);
app.use(Tabs);
app.use(Divider);
app.use(NoticeBar);
app.use(router).use(ElementPlus).mount('#app')

31
web/src/router.js
View File

@@ -201,8 +201,13 @@ const routes = [
path: '/mobile',
meta: {title: 'Geek-AI v4.0'},
component: () => import('@/views/mobile/Home.vue'),
redirect: '/mobile/chat',
redirect: '/mobile/index',
children: [
{
path: '/mobile/index',
name: 'mobile-index',
component: () => import('@/views/mobile/Index.vue'),
},
{
path: '/mobile/chat',
name: 'mobile-chat',
@@ -219,22 +224,22 @@ const routes = [
component: () => import('@/views/mobile/Profile.vue'),
},
{
path: '/mobile/img-wall',
path: '/mobile/imgWall',
name: 'mobile-img-wall',
component: () => import('@/views/mobile/ImgWall.vue'),
component: () => import('@/views/mobile/pages/ImgWall.vue'),
},
{
path: '/mobile/chat/session',
name: 'mobile-chat-session',
component: () => import('@/views/mobile/ChatSession.vue'),
},
{
path: '/mobile/chat/export',
name: 'mobile-chat-export',
component: () => import('@/views/mobile/ChatExport.vue'),
},
]
},
{
path: '/mobile/chat/session',
name: 'mobile-chat-session',
component: () => import('@/views/mobile/ChatSession.vue'),
},
{
path: '/mobile/chat/export',
name: 'mobile-chat-export',
component: () => import('@/views/mobile/ChatExport.vue'),
},
{
name: 'test',

14
web/src/utils/libs.js
View File

@@ -1,6 +1,8 @@
/**
* Util lib functions
*/
import {showConfirmDialog} from "vant";
import {useRouter} from "vue-router";
// generate a random string
export function randString(length) {
@@ -224,3 +226,15 @@ export function escapeHTML(html) {
export function isIphone() {
return /iPhone/i.test(navigator.userAgent) && !/iPad/i.test(navigator.userAgent);
}
export function showLoginDialog(router) {
showConfirmDialog({
title: '登录',
message:
'当前操作需要登录才能进行，前往登录？',
}).then(() => {
router.push("/login")
}).catch(() => {
// on cancel
});
}

9
web/src/views/ChatPlus.vue
View File

@@ -355,7 +355,6 @@ const initData = () => {
// 加载角色列表
httpGet(`/api/role/list`).then((res) => {
roles.value = res.data;
console.log()
if (router.currentRoute.value.params.role_id) {
roleId.value = parseInt(router.currentRoute.value.params["role_id"])
} else {
@@ -901,14 +900,6 @@ const exportChat = () => {
window.open(url, '_blank');
}
const getChatById = (chatId) => {
for (let index in chatList.value) {
if (chatList.value[index].chat_id === chatId) {
return chatList.value[index]
}
}
return null
}
const getModelValue = (model_id) => {
for (let i = 0; i < models.value.length; i++) {

6
web/src/views/Index.vue
View File

@@ -34,16 +34,16 @@
<p>{{ slogan }}</p>
<el-button @click="router.push('/chat')" color="#ffffff" style="color:#007bff" :dark="false">
<i class="iconfont icon-chat"></i>
<span>AI聊天</span>
<span>AI 对话</span>
</el-button>
<el-button @click="router.push('/mj')" color="#C4CCFD" style="color:#424282" :dark="false">
<i class="iconfont icon-mj"></i>
<span>AI-MJ绘画</span>
<span>MJ 绘画</span>
</el-button>
<el-button @click="router.push('/sd')" color="#4AE6DF" style="color:#424282" :dark="false">
<i class="iconfont icon-sd"></i>
<span>AI-SD绘画</span>
<span>SD 绘画</span>
</el-button>
<el-button @click="router.push('/xmind')" color="#FFFD55" style="color:#424282" :dark="false">
<i class="iconfont icon-xmind"></i>

59
web/src/views/mobile/ChatExport.vue
View File

@@ -1,18 +1,16 @@
<template>
<div class="chat-export-mobile">
<div class="chat-box">
<van-sticky :offset-top="0" position="top">
<van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
<template #title>
<van-dropdown-menu>
<van-dropdown-item :title="title">
<van-cell center title="角色"> {{ role }}</van-cell>
<van-cell center title="模型">{{ model }}</van-cell>
</van-dropdown-item>
</van-dropdown-menu>
</template>
</van-nav-bar>
</van-sticky>
<van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
<template #title>
<van-dropdown-menu>
<van-dropdown-item :title="title">
<van-cell center title="角色"> {{ role }}</van-cell>
<van-cell center title="模型">{{ model }}</van-cell>
</van-dropdown-item>
</van-dropdown-menu>
</template>
</van-nav-bar>
<div class="chat-list-wrapper">
<div id="message-list-box" class="message-list-box">
@@ -53,13 +51,14 @@ import {useRouter} from "vue-router";
import {httpGet} from "@/utils/http";
import 'highlight.js/styles/a11y-dark.css'
import hl from "highlight.js";
import {showFailToast} from "vant";
const chatData = ref([])
const router = useRouter()
const chatId = router.currentRoute.value.query['chat_id']
const title = router.currentRoute.value.query['title']
const role = router.currentRoute.value.query['role']
const model = router.currentRoute.value.query['model']
const title = ref('')
const role = ref('')
const model = ref('')
const finished = ref(false)
const error = ref(false)
@@ -117,28 +116,42 @@ const onLoad = () => {
error.value = true
})
httpGet(`/api/chat/detail?chat_id=${chatId}`).then(res => {
title.value = res.data.title
model.value = res.data.model
role.value = res.data.role_name
}).catch(e => {
showFailToast('加载对话失败：' + e.message)
})
};
</script>
<style lang="stylus">
.chat-export-mobile {
background #F5F5F5;
height 100vh
.van-nav-bar {
position static
}
.chat-box {
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
background #F5F5F5;
.message-list-box {
background #F5F5F5;
padding-top 50px
padding-bottom: 10px
.chat-list-wrapper {
padding 10px 0 10px 0
.van-cell {
background none
.message-list-box {
background #F5F5F5;
padding-bottom: 10px
.van-cell {
background none
}
}
}
.van-nav-bar__title {
.van-dropdown-menu__title {
margin-right 10px

77
web/src/views/mobile/ChatList.vue
View File

@@ -82,7 +82,6 @@ import {httpGet, httpPost} from "@/utils/http";
import {showConfirmDialog, showFailToast, showSuccessToast} from "vant";
import {checkSession} from "@/action/session";
import {router} from "@/router";
import {setChatConfig} from "@/store/chat";
import {removeArrayItem} from "@/utils/libs";
const title = ref("会话列表")
@@ -153,15 +152,6 @@ const onLoad = () => {
})
};
const getModelValue = (model_id) => {
for (let i = 0; i < models.value.length; i++) {
if (models.value[i].value === model_id) {
return models.value[i].text
}
}
return ""
}
const search = () => {
if (chatName.value === '') {
chats.value = allChats.value
@@ -195,42 +185,45 @@ const clearAllChatHistory = () => {
const newChat = (item) => {
showPicker.value = false
const options = item.selectedOptions
setChatConfig({
role: {
id: options[0].value,
name: options[0].text,
icon: options[0].icon,
helloMsg: options[0].helloMsg
},
model: options[1].value,
modelValue: getModelValue(options[1].value),
title: '新建会话',
chatId: 0
// setChatConfig({
// role: {
// id: options[0].value,
// name: options[0].text,
// icon: options[0].icon,
// helloMsg: options[0].helloMsg
// },
// model: options[1].value,
// modelValue: getModelValue(options[1].value),
// title: '新建会话',
// chatId: 0
// })
router.push({
name: "mobile-chat-session",
params: {role_id: options[0].value, model_id: options[1].value, title: '新建会话', chat_id: 0}
})
router.push('/mobile/chat/session')
}
const changeChat = (chat) => {
let role = {}
for (let i = 0; i < roles.value.length; i++) {
if (roles.value[i].value === chat.role_id) {
role = roles.value[i]
break
}
}
setChatConfig({
role: {
id: chat.role_id,
name: role.text,
icon: role.icon
},
model: chat.model_id,
modelValue: getModelValue(chat.model_id),
title: chat.title,
chatId: chat.chat_id,
helloMsg: chat.hello_msg,
})
router.push('/mobile/chat/session')
// let role = {}
// for (let i = 0; i < roles.value.length; i++) {
// if (roles.value[i].value === chat.role_id) {
// role = roles.value[i]
// break
// }
// }
// setChatConfig({
// role: {
// id: chat.role_id,
// name: role.text,
// icon: role.icon
// },
// model: chat.model_id,
// modelValue: getModelValue(chat.model_id),
// title: chat.title,
// chatId: chat.chat_id,
// helloMsg: chat.hello_msg,
// })
router.push(`/mobile/chat/session?chat_id=${chat.chat_id}`)
}
const editChat = (row) => {

282
web/src/views/mobile/ChatSession.vue
View File

@@ -1,23 +1,21 @@
<template>
<div class="app-background">
<div class="mobile-chat" v-loading="loading" element-loading-text="正在连接会话...">
<van-sticky ref="navBarRef" :offset-top="0" position="top">
<van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
<template #title>
<van-dropdown-menu>
<van-dropdown-item :title="title">
<van-cell center title="角色"> {{ role.name }}</van-cell>
<van-cell center title="模型">{{ modelValue }}</van-cell>
</van-dropdown-item>
</van-dropdown-menu>
</template>
<van-nav-bar left-arrow left-text="返回" @click-left="router.back()" ref="navBarRef">
<template #title>
<van-dropdown-menu>
<van-dropdown-item :title="title">
<van-cell center title="角色"> {{ role.name }}</van-cell>
<van-cell center title="模型">{{ modelValue }}</van-cell>
</van-dropdown-item>
</van-dropdown-menu>
</template>
<template #right>
<van-icon name="share-o" @click="showShare = true"/>
</template>
<template #right>
<van-icon name="share-o" @click="showShare = true"/>
</template>
</van-nav-bar>
</van-sticky>
</van-nav-bar>
<van-share-sheet
v-model:show="showShare"
@@ -38,23 +36,19 @@
<chat-prompt
v-if="item.type==='prompt'"
:content="item.content"
:created-at="dateFormat(item['created_at'])"
:icon="item.icon"
:model="model"
:tokens="item['tokens']"/>
:icon="item.icon"/>
<chat-reply v-else-if="item.type==='reply'"
:content="item.content"
:created-at="dateFormat(item['created_at'])"
:icon="item.icon"
:org-content="item.orgContent"
:tokens="item['tokens']"/>
:org-content="item.orgContent"/>
</van-cell>
</van-list>
</div>
</div>
<div class="chat-box-wrapper">
<van-sticky ref="bottomBarRef" :offset-bottom="0" position="bottom">
<van-cell-group inset>
<van-field
v-model="prompt"
@@ -62,13 +56,13 @@
clearable
placeholder="输入你的问题"
>
<template #left-icon>
<van-button round type="success" class="button-voice" @click="inputVoice">
<el-icon>
<Microphone/>
</el-icon>
</van-button>
</template>
<!-- <template #left-icon>-->
<!-- <van-button round type="success" class="button-voice" @click="inputVoice">-->
<!-- <el-icon>-->
<!-- <Microphone/>-->
<!-- </el-icon>-->
<!-- </van-button>-->
<!-- </template>-->
<template #button>
<van-button size="small" type="primary" @click="sendMessage">发送</van-button>
@@ -87,18 +81,18 @@
<button id="copy-link-btn" style="display: none;" :data-clipboard-text="url">复制链接地址</button>
<van-overlay :show="showMic" z-index="100">
<div class="mic-wrapper">
<div class="image">
<van-image
width="100"
height="100"
src="/images/mic.gif"
/>
</div>
<van-button type="success" @click="stopVoice">说完了</van-button>
</div>
</van-overlay>
<!-- <van-overlay :show="showMic" z-index="100">-->
<!-- <div class="mic-wrapper">-->
<!-- <div class="image">-->
<!-- <van-image-->
<!-- width="100"-->
<!-- height="100"-->
<!-- src="/images/mic.gif"-->
<!-- />-->
<!-- </div>-->
<!-- <van-button type="success" @click="stopVoice">说完了</van-button>-->
<!-- </div>-->
<!-- </van-overlay>-->
</div>
</template>
@@ -106,8 +100,7 @@
import {nextTick, onMounted, onUnmounted, ref} from "vue";
import {showImagePreview, showNotify, showToast} from "vant";
import {onBeforeRouteLeave, useRouter} from "vue-router";
import {dateFormat, processContent, randString, renderInputText, UUID} from "@/utils/libs";
import {getChatConfig} from "@/store/chat";
import {processContent, randString, renderInputText, UUID} from "@/utils/libs";
import {httpGet} from "@/utils/http";
import hl from "highlight.js";
import 'highlight.js/styles/a11y-dark.css'
@@ -116,26 +109,66 @@ import ChatReply from "@/components/mobile/ChatReply.vue";
import {getSessionId, getUserToken} from "@/store/session";
import {checkSession} from "@/action/session";
import Clipboard from "clipboard";
import {Microphone} from "@element-plus/icons-vue";
const winHeight = ref(0)
const navBarRef = ref(null)
const bottomBarRef = ref(null)
const router = useRouter()
const chatConfig = getChatConfig()
const role = chatConfig.role
const model = chatConfig.model
const modelValue = chatConfig.modelValue
const title = chatConfig.title
const chatId = chatConfig.chatId
const roles = ref([])
const roleId = ref(parseInt(router.currentRoute.value.query["role_id"]))
const role = ref({})
const models = ref([])
const modelId = ref(parseInt(router.currentRoute.value.query["model_id"]))
const modelValue = ref("")
const title = ref(router.currentRoute.value.query["title"])
const chatId = ref(router.currentRoute.value.query["chat_id"])
const loginUser = ref(null)
const showMic = ref(false)
// const showMic = ref(false)
const url = location.protocol + '//' + location.host + '/mobile/chat/export?chat_id=' + chatId
checkSession().then(user => {
loginUser.value = user
}).catch(() => {
router.push('/login')
})
if (chatId.value) {
httpGet(`/api/chat/detail?chat_id=${chatId.value}`).then(res => {
title.value = res.data.title
modelId.value = res.data.model_id
roleId.value = res.data.role_id
}).catch(() => {
})
} else {
title.value = "新建对话"
}
// 加载模型
httpGet('/api/model/list').then(res => {
models.value = res.data
if (!modelId.value) {
modelId.value = models.value[0].id
}
modelValue.value = getModelValue(modelId.value)
// 加载角色列表
httpGet(`/api/role/list`).then((res) => {
roles.value = res.data;
if (!roleId.value) {
roleId.value = roles.value[0]['id']
}
role.value = getRoleById(roleId.value)
connect(chatId.value, roleId.value, modelId.value)
}).catch((e) => {
showNotify({type: "danger", message: '获取聊天角色失败: ' + e.messages})
})
}).catch(e => {
showNotify({type: "danger", message: "加载模型失败: " + e.message})
})
const url = ref(location.protocol + '//' + location.host + '/mobile/chat/export?chat_id=' + chatId.value)
onMounted(() => {
winHeight.value = document.body.offsetHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight
winHeight.value = window.innerHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight - 70
const clipboard = new Clipboard(".content-mobile,.copy-code-mobile,#copy-link-btn");
clipboard.on('success', (e) => {
@@ -156,12 +189,6 @@ const loading = ref(false)
const finished = ref(false)
const error = ref(false)
checkSession().then(user => {
loginUser.value = user
}).catch(() => {
router.push('/login')
})
const latexPlugin = require('markdown-it-latex2img')
const mathjaxPlugin = require('markdown-it-mathjax')
const md = require('markdown-it')({
@@ -193,39 +220,38 @@ md.use(mathjaxPlugin)
const onLoad = () => {
httpGet('/api/chat/history?chat_id=' + chatId).then(res => {
// 加载状态结束
finished.value = true;
const data = res.data
if (data && data.length > 0) {
for (let i = 0; i < data.length; i++) {
if (data[i].type === "prompt") {
if (chatId.value) {
httpGet('/api/chat/history?chat_id=' + chatId.value).then(res => {
// 加载状态结束
finished.value = true;
const data = res.data
if (data && data.length > 0) {
for (let i = 0; i < data.length; i++) {
if (data[i].type === "prompt") {
chatData.value.push(data[i]);
continue;
}
data[i].orgContent = data[i].content;
data[i].content = md.render(processContent(data[i].content))
chatData.value.push(data[i]);
continue;
}
data[i].orgContent = data[i].content;
data[i].content = md.render(processContent(data[i].content))
chatData.value.push(data[i]);
}
nextTick(() => {
hl.configure({ignoreUnescapedHTML: true})
const blocks = document.querySelector("#message-list-box").querySelectorAll('pre code');
blocks.forEach((block) => {
hl.highlightElement(block)
})
nextTick(() => {
hl.configure({ignoreUnescapedHTML: true})
const blocks = document.querySelector("#message-list-box").querySelectorAll('pre code');
blocks.forEach((block) => {
hl.highlightElement(block)
scrollListBox()
})
scrollListBox()
})
}
// 连接会话
connect(chatId, role.id);
}).catch(() => {
error.value = true
})
}
connect(chatId.value, roleId.value, modelId.value);
}).catch(() => {
error.value = true
})
}
};
// 离开页面时主动关闭 websocket 连接，节省网络资源
@@ -248,7 +274,7 @@ const socket = ref(null);
const activelyClose = ref(false); // 主动关闭
const canSend = ref(true);
const heartbeatHandle = ref(null)
const connect = function (chat_id, role_id) {
const connect = function (chat_id, role_id, model_id) {
let isNewChat = false;
if (!chat_id) {
isNewChat = true;
@@ -278,7 +304,7 @@ const connect = function (chat_id, role_id) {
}
}
const _socket = new WebSocket(host + `/api/chat/new?session_id=${_sessionId}&role_id=${role_id}&chat_id=${chat_id}&model_id=${model}&token=${getUserToken()}`);
const _socket = new WebSocket(host + `/api/chat/new?session_id=${_sessionId}&role_id=${role_id}&chat_id=${chat_id}&model_id=${model_id}&token=${getUserToken()}`);
_socket.addEventListener('open', () => {
loading.value = false
previousText.value = '';
@@ -289,9 +315,9 @@ const connect = function (chat_id, role_id) {
chatData.value.push({
type: "reply",
id: randString(32),
icon: role.icon,
content: role.helloMsg,
orgContent: role.helloMsg,
icon: role.value.icon,
content: role.value.hello_msg,
orgContent: role.value.hello_msg,
})
}
@@ -309,7 +335,7 @@ const connect = function (chat_id, role_id) {
chatData.value.push({
type: "reply",
id: randString(32),
icon: role.icon,
icon: role.value.icon,
content: ""
});
} else if (data.type === 'end') { // 消息接收完毕
@@ -358,10 +384,10 @@ const connect = function (chat_id, role_id) {
canSend.value = true;
// 重连
checkSession().then(() => {
connect(chat_id, role_id)
connect(chat_id, role_id, model_id)
}).catch(() => {
loading.value = true
setTimeout(() => connect(chat_id, role_id), 3000)
setTimeout(() => connect(chat_id, role_id, model_id), 3000)
});
});
@@ -447,38 +473,56 @@ const shareChat = (option) => {
showToast({message: "当前会话已经导出，请通过浏览器或者微信的自带分享功能分享给好友", duration: 5000})
router.push({
path: "/mobile/chat/export",
query: {title: title, chat_id: chatId, role: role.name, model: modelValue}
query: {title: title, chat_id: chatId, role: role.value.name, model: modelValue}
})
} else if (option.icon === "link") {
document.getElementById('copy-link-btn').click();
}
}
// eslint-disable-next-line no-undef
const recognition = new webkitSpeechRecognition() || SpeechRecognition();
//recognition.lang = 'zh-CN' // 设置语音识别语言
recognition.onresult = function (event) {
prompt.value = event.results[0][0].transcript
};
recognition.onerror = function (event) {
showMic.value = false
recognition.stop()
showNotify({type: 'danger', message: '语音识别错误:' + event.error})
};
recognition.onend = function () {
console.log('语音识别结束');
};
const inputVoice = () => {
showMic.value = true
recognition.start();
const getRoleById = function (rid) {
for (let i = 0; i < roles.value.length; i++) {
if (roles.value[i]['id'] === rid) {
return roles.value[i];
}
}
return null;
}
const stopVoice = () => {
showMic.value = false
recognition.stop()
const getModelValue = (model_id) => {
for (let i = 0; i < models.value.length; i++) {
if (models.value[i].id === model_id) {
return models.value[i].value
}
}
return ""
}
// // eslint-disable-next-line no-undef
// const recognition = new webkitSpeechRecognition() || SpeechRecognition();
// //recognition.lang = 'zh-CN' // 设置语音识别语言
// recognition.onresult = function (event) {
// prompt.value = event.results[0][0].transcript
// };
//
// recognition.onerror = function (event) {
// showMic.value = false
// recognition.stop()
// showNotify({type: 'danger', message: '语音识别错误:' + event.error})
// };
//
// recognition.onend = function () {
// console.log('语音识别结束');
// };
// const inputVoice = () => {
// showMic.value = true
// recognition.start();
// }
//
// const stopVoice = () => {
// showMic.value = false
// recognition.stop()
// }
</script>
<style lang="stylus">

19
web/src/views/mobile/Home.vue
View File

@@ -4,9 +4,9 @@
<router-view/>
<van-tabbar route v-model="active" @change="onChange">
<van-tabbar-item to="/mobile/chat" name="home" icon="chat-o">对话</van-tabbar-item>
<van-tabbar-item to="/mobile/index" name="home" icon="home-o">首页</van-tabbar-item>
<van-tabbar-item to="/mobile/chat" name="chat" icon="chat-o">对话</van-tabbar-item>
<van-tabbar-item to="/mobile/image" name="image" icon="photo-o">绘图</van-tabbar-item>
<van-tabbar-item to="/mobile/img-wall" name="apps" icon="apps-o">广场</van-tabbar-item>
<van-tabbar-item to="/mobile/profile" name="profile" icon="user-o">我的</van-tabbar-item>
</van-tabbar>
@@ -20,16 +20,11 @@ import {ref} from "vue";
import {getMobileTheme} from "@/store/system";
import {useRouter} from "vue-router";
import {isMobile} from "@/utils/libs";
import {checkSession} from "@/action/session";
const router = useRouter()
checkSession().then(() => {
if (!isMobile()) {
router.replace('/chat')
}
}).catch(() => {
router.push('/login')
})
if (!isMobile()) {
router.replace('/')
}
const active = ref('home')
const onChange = (index) => {
@@ -47,9 +42,7 @@ const onChange = (index) => {
width 100%
}
.content {
padding 46px 10px 60px 10px
}
padding 0 10px
}
}

4
web/src/views/mobile/Image.vue
View File

@@ -16,8 +16,8 @@
<script setup>
import {ref} from "vue";
import ImageMj from "@/views/mobile/ImageMj.vue";
import ImageSd from "@/views/mobile/ImageSd.vue";
import ImageMj from "@/views/mobile/pages/ImageMj.vue";
import ImageSd from "@/views/mobile/pages/ImageSd.vue";
const activeName = ref("mj")
</script>

234
web/src/views/mobile/Index.vue Normal file
View File

@@ -0,0 +1,234 @@
<template>
<div class="index container">
<h2 class="title">{{title}}</h2>
<van-notice-bar left-icon="info-o" :scrollable="true">
你有多少想象力，AI就有多大创造力。我辈之人，先干为敬，陪您先把 AI 用起来。
</van-notice-bar>
<div class="content">
<van-grid :column-num="3" :gutter="10" border>
<van-grid-item @click="router.push('chat')">
<template #icon>
<i class="iconfont icon-chat"></i>
</template>
<template #text>
<div class="text">AI 对话</div>
</template>
</van-grid-item>
<van-grid-item @click="router.push('image')">
<template #icon>
<i class="iconfont icon-mj"></i>
</template>
<template #text>
<div class="text">AI 绘画</div>
</template>
</van-grid-item>
<van-grid-item @click="router.push('imgWall')">
<template #icon>
<van-icon name="photo-o" />
</template>
<template #text>
<div class="text">AI 画廊</div>
</template>
</van-grid-item>
</van-grid>
<div class="app-list">
<van-list
v-model:loading="loading"
:finished="true"
finished-text=""
@load="fetchApps"
>
<van-cell v-for="item in apps" :key="item.id">
<div>
<div class="item">
<div class="image">
<van-image :src="item.icon" />
</div>
<div class="info">
<div class="info-title">{{item.name}}{{item.name}}{{item.name}}{{item.name}}</div>
<div class="info-text">{{item.hello_msg}}</div>
</div>
</div>
<div class="btn">
<div v-if="hasRole(item.key)">
<van-button size="small" type="success" @click="useRole(item.id)">使用</van-button>
<van-button size="small" type="danger" @click="updateRole(item,'remove')">移除</van-button>
</div>
<van-button v-else size="small"
style="--el-color-primary:#009999"
@click="updateRole(item, 'add')">
<van-icon name="add-o" />
<span>添加应用</span>
</van-button>
</div>
</div>
</van-cell>
</van-list>
</div>
</div>
</div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {checkSession} from "@/action/session";
import {httpGet, httpPost} from "@/utils/http";
import {arrayContains, removeArrayItem, showLoginDialog, substr} from "@/utils/libs";
import {showNotify} from "vant";
import {ElMessage} from "element-plus";
const title = ref(process.env.VUE_APP_TITLE)
const router = useRouter()
const isLogin = ref(false)
const apps = ref([])
const loading = ref(false)
const roles = ref([])
onMounted(() => {
checkSession().then((user) => {
isLogin.value = true
roles.value = user.chat_roles
})
fetchApps()
})
const fetchApps = () => {
httpGet("/api/role/list?all=true").then((res) => {
const items = res.data
// 处理 hello message
for (let i = 0; i < items.length; i++) {
items[i].intro = substr(items[i].hello_msg, 80)
}
apps.value = items
}).catch(e => {
showNotify({type:"danger", message:"获取应用失败：" + e.message})
})
}
const updateRole = (row, opt) => {
if (!isLogin.value) {
return showLoginDialog(router)
}
const title = ref("")
if (opt === "add") {
title.value = "添加应用"
const exists = arrayContains(roles.value, row.key)
if (exists) {
return
}
roles.value.push(row.key)
} else {
title.value = "移除应用"
const exists = arrayContains(roles.value, row.key)
if (!exists) {
return
}
roles.value = removeArrayItem(roles.value, row.key)
}
httpPost("/api/role/update", {keys: roles.value}).then(() => {
ElMessage.success({message: title.value + "成功！", duration: 1000})
}).catch(e => {
ElMessage.error(title.value + "失败：" + e.message)
})
}
const hasRole = (roleKey) => {
return arrayContains(roles.value, roleKey, (v1, v2) => v1 === v2)
}
const useRole = (roleId) => {
if (!isLogin.value) {
return showLoginDialog(router)
}
router.push(`/mobile/chat/session?role_id=${roleId}`)
}
</script>
<style scoped lang="stylus">
.index {
color var(--van-text-color)
.title {
display flex
justify-content center
}
--van-notice-bar-font-size: 16px
.content {
padding 15px 0 60px 0
.van-grid-item {
.iconfont {
font-size 20px
}
.text {
display flex
width 100%
padding 10px
justify-content center
font-size 14px
}
}
.app-list {
padding-top 10px
.item {
display flex
.image {
width 80px
height 80px
min-width 80px
border-radius 5px
overflow hidden
}
.info {
text-align left
padding 0 10px
.info-title {
color var(--van-text-color)
font-size 1.25rem
line-height 1.75rem
letter-spacing: .025em;
font-weight: 600;
word-break: break-all;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.info-text {
padding 5px 0
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-break: break-all;
font-size: .875rem;
}
}
}
.btn {
padding 5px 0
.van-button {
margin-right 10px
.van-icon {
margin-right 5px
}
}
}
}
}
}
</style>

5
web/src/views/mobile/Profile.vue
View File

@@ -27,7 +27,7 @@
</template>
</van-field>
<van-field label="VIP到期时间" v-if="form.expired_time > 0">
<van-field label="会员有效期" v-if="form.expired_time > 0">
<template #input>
<van-tag type="warning">{{ dateFormat(form.expired_time) }}</van-tag>
</template>
@@ -260,6 +260,9 @@ const pay = (payWay, item) => {
<style lang="stylus">
.mobile-user-profile {
.content {
padding-top 46px
padding-bottom 60px
.van-field__label {
width 100px
text-align right

0
web/src/views/mobile/ImageMj.vue → web/src/views/mobile/pages/ImageMj.vue
View File

0
web/src/views/mobile/ImageSd.vue → web/src/views/mobile/pages/ImageSd.vue
View File

14
web/src/views/mobile/ImgWall.vue → web/src/views/mobile/pages/ImgWall.vue
View File

@@ -1,9 +1,7 @@
<template>
<div class="img-wall container">
<van-nav-bar :title="title"/>
<div class="content">
<van-tabs v-model:active="activeName">
<van-tabs v-model:active="activeName" animated sticky>
<van-tab title="MidJourney" name="mj">
<van-list
v-model:error="data['mj'].error"
@@ -42,12 +40,10 @@
</template>
<script setup>
import {onMounted, ref} from "vue";
import {httpGet, httpPost} from "@/utils/http";
import {showDialog, showFailToast, showSuccessToast} from "vant";
import {ElMessage} from "element-plus";
import {ref} from "vue";
import {httpGet} from "@/utils/http";
import {showDialog, showFailToast} from "vant";
const title = ref('图片创作广场')
const activeName = ref("mj")
const data = ref({
"mj": {
@@ -121,8 +117,6 @@ const showPrompt = (item) => {
<style lang="stylus">
.img-wall {
.content {
padding-top 60px
.van-cell__value {
.van-image {
width 100%