mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-17 16:56:38 +08:00
feat: add index page for mobile
This commit is contained in:
RockYang
parent
b354b88876
commit
99df028237
@ -7,6 +7,8 @@
|
||||
* 功能优化：优化首页登录注册页面的 UI
|
||||
* BUG修复：修复License验证的逻辑漏洞
|
||||
* Bug修复：后台添加用户的时候密码规则限制跟前台注册保持一致
|
||||
* 功能新增：管理后台支持切换主题，支持 light 和 dark 模式
|
||||
* 功能新增：移动端新增 DALL-E 绘画功能
|
||||
|
||||
## v4.0.4
|
||||
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -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"`
|
||||
}
|
||||
|
||||
@ -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,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
|
||||
|
||||
@ -32,7 +32,6 @@ window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
|
||||
|
||||
<style lang="stylus">
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
.mobile-chat-list {
|
||||
.content {
|
||||
padding-top 46px
|
||||
padding-bottom 60px
|
||||
|
||||
.van-list {
|
||||
.van-cell__value {
|
||||
.chat-list-item {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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')
|
||||
|
||||
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
@ -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++) {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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
234
web/src/views/mobile/Index.vue
Normal 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>
|
||||
@ -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
|
||||
|
||||
@ -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%
|
||||
Loading…
Reference in New Issue
Block a user