xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2026-03-04 03:04:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

merge v4.1.5

Browse Source
This commit is contained in:
RockYang
2025-02-11 09:45:26 +08:00
parent 188fb23f08 1086e1d631
commit cebf8497a4
163 changed files with 5667 additions and 14603 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
web/src/views/ChatApps.vue
View File

@@ -1,7 +1,21 @@
<template>
<div>
<div class="page-apps custom-scroll">
<div class="inner" :style="{height: listBoxHeight + 'px'}">
<div class="apps-type-nav">
<el-scrollbar>
<ul class="scrollbar-type-nav">
<li :class="{active: typeId === ''}" @click="getAppList('')">全部分类</li>
<li v-for="item in appTypes" :key="item.id" :class="{active: typeId === item.id}" @click="getAppList(item.id)">
<div class="image" v-if="item.icon">
<el-image :src="item.icon" fit="cover"/>
</div>
{{ item.name }}
</li>
</ul>
</el-scrollbar>
</div>
<div class="app-list-container" :style="{height: listBoxHeight + 'px'}">
<ItemList :items="list" v-if="list.length > 0" :gap="15" :width="300">
<template #default="scope">
<div class="item">
@@ -50,6 +64,9 @@
<!-- </div>-->
</template>
</ItemList>
<div v-else style="width: 100%">
<el-empty description="暂无数据" />
</div>
</div>
</div>
</div>
@@ -64,25 +81,18 @@ import {arrayContains, removeArrayItem, substr} from "@/utils/libs";
import {useRouter} from "vue-router";
import {useSharedStore} from "@/store/sharedata";
import ItemList from "@/components/ItemList.vue";
import {Plus} from "@element-plus/icons-vue";
const listBoxHeight = window.innerHeight - 87
const listBoxHeight = window.innerHeight - 133
const typeId = ref('')
const appTypes = ref([])
const list = ref([])
const roles = ref([])
const store = useSharedStore();
onMounted(() => {
httpGet("/api/role/list").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)
}
list.value = items
}).catch(e => {
ElMessage.error("获取应用失败：" + e.message)
})
getAppType()
getAppList()
getRoles()
})
@@ -94,6 +104,28 @@ const getRoles = () => {
})
}
const getAppType = () => {
httpGet("/api/app/type/list").then((res) => {
appTypes.value = res.data
}).catch(e => {
ElMessage.error("获取分类失败：" + e.message)
})
}
const getAppList = (tid = '') => {
typeId.value = tid;
httpGet("/api/app/list", { tid }).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)
}
list.value = items
}).catch(e => {
ElMessage.error("获取应用失败：" + e.message)
})
}
const updateRole = (row, opt) => {
checkSession().then(() => {
const title = ref("")
@@ -112,7 +144,7 @@ const updateRole = (row, opt) => {
}
roles.value = removeArrayItem(roles.value, row.key)
}
httpPost("/api/role/update", {keys: roles.value}).then(() => {
httpPost("/api/app/update", {keys: roles.value}).then(() => {
ElMessage.success({message: title.value + "成功！", duration: 1000})
}).catch(e => {
ElMessage.error(title.value + "失败：" + e.message)

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

@@ -106,7 +106,7 @@
<el-dropdown-menu class="tools-dropdown">
<el-checkbox-group v-model="toolSelected">
<el-dropdown-item v-for="item in tools" :key="item.id">
<el-checkbox :value="item.id" :label="item.label" @change="changeTool" />
<el-checkbox :value="item.id" :label="item.label" />
<el-tooltip :content="item.description" placement="right">
<el-icon><InfoFilled /></el-icon>
</el-tooltip>
@@ -225,11 +225,10 @@ import {
UUID
} from "@/utils/libs";
import {ElMessage, ElMessageBox} from "element-plus";
import {getSessionId, getUserToken} from "@/store/session";
import {httpGet, httpPost} from "@/utils/http";
import {useRouter} from "vue-router";
import Clipboard from "clipboard";
import {checkSession, getSystemInfo} from "@/store/cache";
import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
import Welcome from "@/components/Welcome.vue";
import {useSharedStore} from "@/store/sharedata";
import FileSelect from "@/components/FileSelect.vue";
@@ -270,7 +269,15 @@ watch(() => store.chatListStyle, (newValue) => {
});
const tools = ref([])
const toolSelected = ref([])
const loadHistory = ref(false)
const stream = ref(store.chatStream)
watch(() => store.chatStream, (newValue) => {
stream.value = newValue
});
if (isMobile()) {
router.push('/mobile/chat')
}
// 初始化角色ID参数
if (router.currentRoute.value.query.role_id) {
@@ -290,10 +297,6 @@ if (!chatId.value) {
})
}
if (isMobile()) {
router.replace("/mobile/chat")
}
// 获取系统配置
getSystemInfo().then(res => {
title.value = res.data.title
@@ -331,6 +334,13 @@ httpGet("/api/function/list").then(res => {
showMessageError("获取工具函数失败：" + e.message)
})
// 创建 socket 连接
const prompt = ref('');
const showStopGenerate = ref(false); // 停止生成
const lineBuffer = ref(''); // 输出缓冲行
const canSend = ref(true);
const isNewMsg = ref(true)
onMounted(() => {
resizeElement();
initData()
@@ -345,15 +355,76 @@ onMounted(() => {
})
window.onresize = () => resizeElement();
store.addMessageHandler("chat", (data) => {
// 丢去非本频道和本客户端的消息
if (data.channel !== 'chat' || data.clientId !== getClientId()) {
return
}
if (data.type === 'error') {
ElMessage.error(data.body)
return
}
const chatRole = getRoleById(roleId.value)
if (isNewMsg.value && data.type !== 'end') {
const prePrompt = chatData.value[chatData.value.length-1]?.content
chatData.value.push({
type: "reply",
id: randString(32),
icon: chatRole['icon'],
prompt:prePrompt,
content: data.body,
});
isNewMsg.value = false
lineBuffer.value = data.body;
} else if (data.type === 'end') { // 消息接收完毕
// 追加当前会话到会话列表
if (newChatItem.value !== null) {
newChatItem.value['title'] = tmpChatTitle.value;
newChatItem.value['chat_id'] = chatId.value;
chatList.value.unshift(newChatItem.value);
newChatItem.value = null; // 只追加一次
}
enableInput()
lineBuffer.value = ''; // 清空缓冲
// 获取 token
const reply = chatData.value[chatData.value.length - 1]
httpPost("/api/chat/tokens", {
text: "",
model: getModelValue(modelID.value),
chat_id: chatId.value,
}).then(res => {
reply['created_at'] = new Date().getTime();
reply['tokens'] = res.data;
// 将聊天框的滚动条滑动到最底部
nextTick(() => {
document.getElementById('chat-box').scrollTo(0, document.getElementById('chat-box').scrollHeight)
})
}).catch(() => {
})
isNewMsg.value = true
} else if (data.type === 'text') {
lineBuffer.value += data.body;
const reply = chatData.value[chatData.value.length - 1]
if (reply) {
reply['content'] = lineBuffer.value;
}
}
// 将聊天框的滚动条滑动到最底部
nextTick(() => {
document.getElementById('chat-box').scrollTo(0, document.getElementById('chat-box').scrollHeight)
localStorage.setItem("chat_id", chatId.value)
})
})
});
onUnmounted(() => {
if (socket.value !== null) {
socket.value.close()
socket.value = null
}
store.removeMessageHandler("chat")
})
// 初始化数据
const initData = () => {
@@ -364,7 +435,7 @@ const initData = () => {
modelID.value = models.value[0].id
}
// 加载角色列表
httpGet(`/api/role/list`,{id:roleId.value}).then((res) => {
httpGet(`/api/app/list/user`,{id:roleId.value}).then((res) => {
roles.value = res.data;
if (!roleId.value) {
roleId.value = roles.value[0]['id']
@@ -374,9 +445,8 @@ const initData = () => {
checkSession().then((user) => {
loginUser.value = user
isLogin.value = true
newChat();
}).catch(e => {})
}).catch(() => {})
}).catch((e) => {
ElMessage.error('获取聊天角色失败: ' + e.messages)
@@ -398,13 +468,9 @@ const initData = () => {
// 允许在输入框粘贴文件
inputRef.value.addEventListener('paste', (event) => {
const items = (event.clipboardData || window.clipboardData).items;
let fileFound = false;
for (let item of items) {
if (item.kind === 'file') {
const file = item.getAsFile();
fileFound = true;
const formData = new FormData();
formData.append('file', file);
loading.value = true
@@ -421,10 +487,6 @@ const initData = () => {
break;
}
}
if (!fileFound) {
document.getElementById('status').innerText = 'No file found in paste data.';
}
});
}
@@ -487,21 +549,10 @@ const newChat = () => {
removing: false,
};
showStopGenerate.value = false;
loadChatHistory(chatId.value)
router.push(`/chat/${chatId.value}`)
loadHistory.value = true
connect()
}
// 切换工具
const changeTool = () => {
if (!isLogin.value) {
return;
}
loadHistory.value = false
socket.value.close()
}
// 切换会话
const loadChat = function (chat) {
if (!isLogin.value) {
@@ -512,15 +563,13 @@ const loadChat = function (chat) {
if (chatId.value === chat.chat_id) {
return;
}
newChatItem.value = null;
roleId.value = chat.role_id;
modelID.value = chat.model_id;
chatId.value = chat.chat_id;
showStopGenerate.value = false;
router.push(`/chat/${chatId.value}`)
loadHistory.value = true
socket.value.close()
loadChatHistory(chatId.value)
router.replace(`/chat/${chatId.value}`)
}
// 编辑会话标题
@@ -592,109 +641,6 @@ const removeChat = function (chat) {
}
// 创建 socket 连接
const prompt = ref('');
const showStopGenerate = ref(false); // 停止生成
const lineBuffer = ref(''); // 输出缓冲行
const socket = ref(null);
const canSend = ref(true);
const sessionId = ref("")
const connect = function () {
const chatRole = getRoleById(roleId.value);
// 初始化 WebSocket 对象
sessionId.value = getSessionId();
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
loading.value = true
const toolIds = toolSelected.value.join(',')
const _socket = new WebSocket(host + `/api/chat/new?session_id=${sessionId.value}&role_id=${roleId.value}&chat_id=${chatId.value}&model_id=${modelID.value}&token=${getUserToken()}&tools=${toolIds}`);
_socket.addEventListener('open', () => {
enableInput()
if (loadHistory.value) {
loadChatHistory(chatId.value)
}
loading.value = false
});
_socket.addEventListener('message', event => {
try {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(event.data, "UTF-8");
reader.onload = () => {
const data = JSON.parse(String(reader.result));
if (data.type === 'start') {
const prePrompt = chatData.value[chatData.value.length-1]?.content
chatData.value.push({
type: "reply",
id: randString(32),
icon: chatRole['icon'],
prompt:prePrompt,
content: "",
});
} else if (data.type === 'end') { // 消息接收完毕
// 追加当前会话到会话列表
if (newChatItem.value !== null) {
newChatItem.value['title'] = tmpChatTitle.value;
newChatItem.value['chat_id'] = chatId.value;
chatList.value.unshift(newChatItem.value);
newChatItem.value = null; // 只追加一次
}
enableInput()
lineBuffer.value = ''; // 清空缓冲
// 获取 token
const reply = chatData.value[chatData.value.length - 1]
httpPost("/api/chat/tokens", {
text: "",
model: getModelValue(modelID.value),
chat_id: chatId.value,
}).then(res => {
reply['created_at'] = new Date().getTime();
reply['tokens'] = res.data;
// 将聊天框的滚动条滑动到最底部
nextTick(() => {
document.getElementById('chat-box').scrollTo(0, document.getElementById('chat-box').scrollHeight)
})
}).catch(() => {
})
} else {
lineBuffer.value += data.content;
const reply = chatData.value[chatData.value.length - 1]
if (reply) {
reply['content'] = lineBuffer.value;
}
}
// 将聊天框的滚动条滑动到最底部
nextTick(() => {
document.getElementById('chat-box').scrollTo(0, document.getElementById('chat-box').scrollHeight)
localStorage.setItem("chat_id", chatId.value)
})
};
}
} catch (e) {
console.warn(e)
}
});
_socket.addEventListener('close', () => {
disableInput(true)
connect()
});
socket.value = _socket;
}
const disableInput = (force) => {
canSend.value = false;
showStopGenerate.value = !force;
@@ -743,6 +689,11 @@ const sendMessage = function () {
return;
}
if (store.socket.conn.readyState !== WebSocket.OPEN) {
ElMessage.warning("连接断开，正在重连...");
return
}
if (canSend.value === false) {
ElMessage.warning("AI 正在作答中，请稍后...");
return
@@ -757,7 +708,7 @@ const sendMessage = function () {
if (files.value.length === 1) {
content += files.value.map(file => file.url).join(" ")
} else if (files.value.length > 1) {
showMessageError("当前只支持一个文件！")
showMessageError("当前只支持上传一个文件！")
return false
}
// 追加消息
@@ -776,7 +727,18 @@ const sendMessage = function () {
showHello.value = false
disableInput(false)
socket.value.send(JSON.stringify({type: "chat", content: content}));
store.socket.conn.send(JSON.stringify({
channel: 'chat',
type:'text',
body:{
role_id: roleId.value,
model_id: modelID.value,
chat_id: chatId.value,
content: content,
tools:toolSelected.value,
stream: stream.value
}
}));
tmpChatTitle.value = content
prompt.value = ''
files.value = []
@@ -812,9 +774,11 @@ const clearAllChats = function () {
const loadChatHistory = function (chatId) {
chatData.value = []
loading.value = true
httpGet('/api/chat/history?chat_id=' + chatId).then(res => {
loading.value = false
const data = res.data
if (!data || data.length === 0) { // 加载打招呼信息
if ((!data || data.length === 0) && chatData.value.length === 0) { // 加载打招呼信息
const _role = getRoleById(roleId.value)
chatData.value.push({
chat_id: chatId,
@@ -845,7 +809,7 @@ const loadChatHistory = function (chatId) {
const stopGenerate = function () {
showStopGenerate.value = false;
httpGet("/api/chat/stop?session_id=" + sessionId.value).then(() => {
httpGet("/api/chat/stop?session_id=" + getClientId()).then(() => {
enableInput()
})
}
@@ -853,7 +817,7 @@ const stopGenerate = function () {
// 重新生成
const reGenerate = function (prompt) {
disableInput(false)
const text = '重新生成下面问题的答案：' + prompt;
const text = '重新回答下述问题：' + prompt;
// 追加消息
chatData.value.push({
type: "prompt",
@@ -861,7 +825,18 @@ const reGenerate = function (prompt) {
icon: loginUser.value.avatar,
content: text
});
socket.value.send(JSON.stringify({type: "chat", content: prompt}));
store.socket.conn.send(JSON.stringify({
channel: 'chat',
type:'text',
body:{
role_id: roleId.value,
model_id: modelID.value,
chat_id: chatId.value,
content: text,
tools:toolSelected.value,
stream: stream.value
}
}));
}
const chatName = ref('')

68
web/src/views/Dalle.vue
View File

@@ -156,14 +156,14 @@
<el-tooltip content="删除" placement="top" effect="light">
<el-button type="danger" :icon="Delete" @click="removeImage(slotProp.item)" circle/>
</el-tooltip>
<el-tooltip content="分享" placement="top" effect="light" v-if="slotProp.item.publish">
<el-tooltip content="取消分享" placement="top" effect="light" v-if="slotProp.item.publish">
<el-button type="warning"
@click="publishImage(slotProp.item, false)"
circle>
<i class="iconfont icon-cancel-share"></i>
</el-button>
</el-tooltip>
<el-tooltip content="取消分享" placement="top" effect="light" v-else>
<el-tooltip content="分享" placement="top" effect="light" v-else>
<el-button type="success" @click="publishImage(slotProp.item, true)" circle>
<i class="iconfont icon-share-bold"></i>
</el-button>
@@ -208,7 +208,7 @@ import {Delete, InfoFilled, Picture} from "@element-plus/icons-vue";
import {httpGet, httpPost} from "@/utils/http";
import {ElMessage, ElMessageBox} from "element-plus";
import Clipboard from "clipboard";
import {checkSession, getSystemInfo} from "@/store/cache";
import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
import {useSharedStore} from "@/store/sharedata";
import TaskList from "@/components/TaskList.vue";
import BackTop from "@/components/BackTop.vue";
@@ -240,6 +240,7 @@ const styles = [
{name: "自然", value: "natural"}
]
const params = ref({
client_id: getClientId(),
quality: "standard",
size: "1024x1024",
style: "vivid",
@@ -268,14 +269,25 @@ onMounted(() => {
}).catch(e => {
ElMessage.error("获取系统配置失败：" + e.message)
})
store.addMessageHandler("dall",(data) => {
// 丢弃无关消息
if (data.channel !== "dall" || data.clientId !== getClientId()) {
return
}
if (data.body === "FINISH" || data.body === "FAIL") {
page.value = 0
isOver.value = false
fetchFinishJobs()
}
nextTick(() => fetchRunningJobs())
})
})
onUnmounted(() => {
clipboard.value.destroy()
if (socket.value !== null) {
socket.value.close()
socket.value = null
}
store.removeMessageHandler("dall")
})
const initData = () => {
@@ -287,51 +299,10 @@ const initData = () => {
page.value = 0
fetchRunningJobs()
fetchFinishJobs()
connect()
}).catch(() => {
});
}
const socket = ref(null)
const heartbeatHandle = ref(null)
const connect = () => {
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
const _socket = new WebSocket(host + `/api/dall/client?user_id=${userId.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(event.data, "UTF-8")
reader.onload = () => {
const message = String(reader.result)
if (message === "FINISH" || message === "FAIL") {
page.value = 0
isOver.value = false
fetchFinishJobs(page.value)
}
nextTick(() => fetchRunningJobs())
}
}
});
_socket.addEventListener('close', () => {
if (socket.value !== null) {
connect()
}
})
}
const fetchRunningJobs = () => {
if (!isLogin.value) {
return
@@ -391,6 +362,7 @@ const generate = () => {
httpPost("/api/dall/image", params.value).then(() => {
ElMessage.success("任务执行成功！")
power.value -= dallPower.value
fetchRunningJobs()
}).catch(e => {
ElMessage.error("任务执行失败：" + e.message)
})

1
web/src/views/Home.vue
View File

@@ -224,6 +224,7 @@ const logout = function () {
httpGet('/api/user/logout').then(() => {
removeUserToken()
store.setShowLoginDialog(true)
store.setIsLogin(false)
loginUser.value = {}
// 刷新组件
routerViewKey.value += 1

90
web/src/views/ImageMj.vue
View File

@@ -215,7 +215,7 @@
<div class="param-line">
<div class="img-inline">
<div class="img-list-box">
<div class="img-item" v-for="imgURL in imgList">
<div class="img-item" v-for="imgURL in imgList" :key="imgURL">
<el-image :src="imgURL" fit="cover"/>
<el-button type="danger" :icon="Delete" @click="removeUploadImage(imgURL)" circle/>
</div>
@@ -293,7 +293,7 @@
<div class="text">请上传两张以上的图片，最多不超过五张，超过五张图片请使用图生图功能</div>
<div class="img-inline">
<div class="img-list-box">
<div class="img-item" v-for="imgURL in imgList">
<div class="img-item" v-for="imgURL in imgList" :key="imgURL">
<el-image :src="imgURL" fit="cover"/>
<el-button type="danger" :icon="Delete" @click="removeUploadImage(imgURL)" circle/>
</div>
@@ -312,7 +312,7 @@
<div class="text">请上传两张有脸部的图片，用左边图片的脸替换右边图片的脸</div>
<div class="img-inline">
<div class="img-list-box">
<div class="img-item" v-for="imgURL in imgList">
<div class="img-item" v-for="imgURL in imgList" :key="imgURL">
<el-image :src="imgURL" fit="cover"/>
<el-button type="danger" :icon="Delete" @click="removeUploadImage(imgURL)" circle/>
</div>
@@ -602,13 +602,13 @@
</template>
<script setup>
import {onMounted, onUnmounted, ref} from "vue"
import {nextTick, onMounted, onUnmounted, ref} from "vue"
import {ChromeFilled, Delete, DocumentCopy, InfoFilled, Picture, Plus, UploadFilled} from "@element-plus/icons-vue";
import Compressor from "compressorjs";
import {httpGet, httpPost} from "@/utils/http";
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import Clipboard from "clipboard";
import {checkSession, getSystemInfo} from "@/store/cache";
import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
import {useRouter} from "vue-router";
import {getSessionId} from "@/store/session";
import {copyObj, removeArrayItem} from "@/utils/libs";
@@ -678,6 +678,7 @@ const options = [
const router = useRouter()
const initParams = {
client_id: getClientId(),
task_type: "image",
rate: rates[0].value,
model: models[0].value,
@@ -704,66 +705,10 @@ const activeName = ref('txt2img')
const runningJobs = ref([])
const finishedJobs = ref([])
const socket = ref(null)
const power = ref(0)
const userId = ref(0)
const isLogin = ref(false)
const heartbeatHandle = ref(null)
const connect = () => {
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
// 心跳函数
const sendHeartbeat = () => {
clearTimeout(heartbeatHandle.value)
new Promise((resolve, reject) => {
if (socket.value !== null) {
socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"}))
}
resolve("success")
}).then(() => {
heartbeatHandle.value = setTimeout(() => sendHeartbeat(), 5000)
});
}
const _socket = new WebSocket(host + `/api/mj/client?user_id=${userId.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
// 发送心跳消息
sendHeartbeat()
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(event.data, "UTF-8")
reader.onload = () => {
const message = String(reader.result)
if (message === "FINISH" || message === "FAIL") {
page.value = 0
isOver.value = false
fetchFinishJobs(page.value)
}
fetchRunningJobs()
}
}
});
_socket.addEventListener('close', () => {
if (socket.value !== null) {
connect()
}
});
}
const clipboard = ref(null)
onMounted(() => {
initData()
@@ -775,14 +720,25 @@ onMounted(() => {
clipboard.value.on('error', () => {
ElMessage.error('复制失败！');
})
store.addMessageHandler("mj",(data) => {
// 丢弃无关消息
if (data.channel !== "mj" || data.clientId !== getClientId()) {
return
}
if (data.body === "FINISH" || data.body === "FAIL") {
page.value = 0
isOver.value = false
fetchFinishJobs()
}
nextTick(() => fetchRunningJobs())
})
})
onUnmounted(() => {
clipboard.value.destroy()
if (socket.value !== null) {
socket.value.close()
socket.value = null
}
store.removeMessageHandler("mj")
})
// 初始化数据
@@ -794,7 +750,6 @@ const initData = () => {
page.value = 0
fetchRunningJobs()
fetchFinishJobs()
connect()
}).catch(() => {
});
@@ -952,6 +907,7 @@ const generate = () => {
httpPost("/api/mj/image", params.value).then(() => {
ElMessage.success("绘画任务推送成功，请耐心等待任务执行...")
power.value -= mjPower.value
fetchRunningJobs()
}).catch(e => {
ElMessage.error("任务推送失败：" + e.message)
})
@@ -970,6 +926,7 @@ const variation = (index, item) => {
const send = (url, index, item) => {
httpPost(url, {
index: index,
client_id: getClientId(),
channel_id: item.channel_id,
message_id: item.message_id,
message_hash: item.hash,
@@ -978,6 +935,7 @@ const send = (url, index, item) => {
}).then(() => {
ElMessage.success("任务推送成功，请耐心等待任务执行...")
power.value -= mjActionPower.value
fetchRunningJobs()
}).catch(e => {
ElMessage.error("任务推送失败：" + e.message)
})

68
web/src/views/ImageSd.vue
View File

@@ -487,11 +487,11 @@
<script setup>
import {nextTick, onMounted, onUnmounted, ref} from "vue"
import {Delete, DocumentCopy, InfoFilled, Orange, Picture} from "@element-plus/icons-vue";
import {Delete, DocumentCopy, InfoFilled, Orange} from "@element-plus/icons-vue";
import {httpGet, httpPost} from "@/utils/http";
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import {ElMessage, ElMessageBox} from "element-plus";
import Clipboard from "clipboard";
import {checkSession, getSystemInfo} from "@/store/cache";
import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
import {useRouter} from "vue-router";
import {getSessionId} from "@/store/session";
import {useSharedStore} from "@/store/sharedata";
@@ -520,6 +520,7 @@ const samplers = ["Euler a", "DPM++ 2S a", "DPM++ 2M", "DPM++ SDE", "DPM++ 2M SD
const schedulers = ["Automatic", "Karras", "Exponential", "Uniform"]
const scaleAlg = ["Latent", "ESRGAN_4x", "R-ESRGAN 4x+", "SwinIR_4x", "LDSR"]
const params = ref({
client_id: getClientId(),
width: 1024,
height: 1024,
sampler: samplers[0],
@@ -547,46 +548,7 @@ if (_params) {
const power = ref(0)
const sdPower = ref(0) // 画一张 SD 图片消耗算力
const socket = ref(null)
const userId = ref(0)
const connect = () => {
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
const _socket = new WebSocket(host + `/api/sd/client?user_id=${userId.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(event.data, "UTF-8")
reader.onload = () => {
const message = String(reader.result)
if (message === "FINISH" || message === "FAIL") {
page.value = 0
isOver.value = false
fetchFinishJobs()
}
nextTick(() => fetchRunningJobs())
}
}
});
_socket.addEventListener('close', () => {
if (socket.value !== null) {
connect()
}
})
}
const clipboard = ref(null)
onMounted(() => {
initData()
@@ -605,14 +567,26 @@ onMounted(() => {
}).catch(e => {
ElMessage.error("获取系统配置失败：" + e.message)
})
store.addMessageHandler("sd",(data) => {
// 丢弃无关消息
if (data.channel !== "sd" || data.clientId !== getClientId()) {
return
}
if (data.body === "FINISH" || data.body === "FAIL") {
page.value = 0
isOver.value = false
fetchFinishJobs()
}
nextTick(() => fetchRunningJobs())
})
})
onUnmounted(() => {
clipboard.value.destroy()
if (socket.value !== null) {
socket.value.close()
socket.value = null
}
store.removeMessageHandler("sd")
})
@@ -624,7 +598,6 @@ const initData = () => {
page.value = 0
fetchRunningJobs()
fetchFinishJobs()
connect()
}).catch(() => {
});
}
@@ -694,6 +667,7 @@ const generate = () => {
httpPost("/api/sd/image", params.value).then(() => {
ElMessage.success("绘画任务推送成功，请耐心等待任务执行...")
power.value -= sdPower.value
fetchRunningJobs()
}).catch(e => {
ElMessage.error("任务推送失败：" + e.message)
})

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

@@ -61,13 +61,13 @@ import {useRouter} from "vue-router";
import FooterBar from "@/components/FooterBar.vue";
import {httpGet} from "@/utils/http";
import {ElMessage} from "element-plus";
import {isMobile} from "@/utils/libs";
import {checkSession, getLicenseInfo, getSystemInfo} from "@/store/cache";
import {isMobile} from "@/utils/libs";
const router = useRouter()
if (isMobile()) {
router.push("/mobile")
router.push("/mobile/index")
}
const title = ref("")

10
web/src/views/Login.vue
View File

@@ -76,8 +76,8 @@ import {setUserToken} from "@/store/session";
import ResetPass from "@/components/ResetPass.vue";
import {showMessageError} from "@/utils/dialog";
import Captcha from "@/components/Captcha.vue";
import QRCode from "qrcode";
import {setRoute} from "@/store/system";
import {useSharedStore} from "@/store/sharedata";
const router = useRouter();
const title = ref('Geek-AI');
@@ -89,6 +89,8 @@ const licenseConfig = ref({})
const wechatLoginURL = ref('')
const enableVerify = ref(false)
const captchaRef = ref(null)
// 是否需要验证码，输入一次密码错之后就要验证码
const needVerify = ref(false)
onMounted(() => {
// 获取系统配置
@@ -137,13 +139,14 @@ const login = function () {
return showMessageError('请输入密码');
}
if (enableVerify.value) {
if (enableVerify.value && needVerify.value) {
captchaRef.value.loadCaptcha()
} else {
doLogin({})
}
}
const store = useSharedStore()
const doLogin = (verifyData) => {
httpPost('/api/user/login', {
username: username.value.trim(),
@@ -153,6 +156,8 @@ const doLogin = (verifyData) => {
x: verifyData.x
}).then((res) => {
setUserToken(res.data.token)
store.setIsLogin(true)
needVerify.value = false
if (isMobile()) {
router.push('/mobile')
} else {
@@ -161,6 +166,7 @@ const doLogin = (verifyData) => {
}).catch((e) => {
showMessageError('登录失败，' + e.message)
needVerify.value = true
})
}
</script>

90
web/src/views/Luma.vue
View File

@@ -55,25 +55,6 @@
<el-container class="video-container" v-loading="loading" element-loading-background="rgba(100,100,100,0.3)">
<h2 class="h-title">你的作品</h2>
<!-- <el-row :gutter="20" class="videos" v-if="!noData">-->
<!-- <el-col :span="8" class="item" :key="item.id" v-for="item in videos">-->
<!-- <div class="video-box" @mouseover="item.playing = true" @mouseout="item.playing = false">-->
<!-- <img :src="item.cover" :alt="item.name" v-show="!item.playing"/>-->
<!-- <video :src="item.url" preload="auto" :autoplay="true" loop="loop" muted="muted" v-show="item.playing">-->
<!-- 您的浏览器不支持视频播放-->
<!-- </video>-->
<!-- </div>-->
<!-- <div class="video-name">{{item.name}}</div>-->
<!-- <div class="opts">-->
<!-- <button class="btn" @click="download(item)" :disabled="item.downloading">-->
<!-- <i class="iconfont icon-download" v-if="!item.downloading"></i>-->
<!-- <el-image src="/images/loading.gif" fit="cover" v-else />-->
<!-- <span>下载</span>-->
<!-- </button>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<div class="list-box" v-if="!noData">
<div v-for="item in list" :key="item.id">
<div class="item">
@@ -106,7 +87,7 @@
<el-tooltip effect="light" content="下载视频" placement="top">
<button class="btn btn-icon" @click="download(item)" :disabled="item.downloading">
<i class="iconfont icon-download" v-if="!item.downloading"></i>
<el-image src="/images/loading.gif" fit="cover" v-else />
<el-image src="/images/loading.gif" class="downloading" fit="cover" v-else />
</button>
</el-tooltip>
<el-tooltip effect="light" content="删除" placement="top">
@@ -141,8 +122,8 @@
:total="total"/>
</div>
</el-container>
<black-dialog v-model:show="showDialog" title="预览视频" hide-footer @cancal="showDialog = false" :width="1000">
<video style="width: 100%;" :src="currentVideoUrl" preload="auto" :autoplay="true" loop="loop" muted="muted" v-show="showDialog">
<black-dialog v-model:show="showDialog" title="预览视频" hide-footer @cancal="showDialog = false" width="auto">
<video style="width: 100%; max-height: 90vh;" :src="currentVideoUrl" preload="auto" :autoplay="true" loop="loop" muted="muted" v-show="showDialog">
您的浏览器不支持视频播放
</video>
</black-dialog>
@@ -150,16 +131,17 @@
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {onMounted, onUnmounted, reactive, ref} from "vue";
import {CircleCloseFilled} from "@element-plus/icons-vue";
import {httpDownload, httpPost, httpGet} from "@/utils/http";
import {checkSession} from "@/store/cache";
import {checkSession, getClientId} from "@/store/cache";
import {showMessageError, showMessageOK} from "@/utils/dialog";
import { replaceImg } from "@/utils/libs"
import {ElMessage, ElMessageBox} from "element-plus";
import BlackSwitch from "@/components/ui/BlackSwitch.vue";
import Generating from "@/components/ui/Generating.vue";
import BlackDialog from "@/components/ui/BlackDialog.vue";
import {useSharedStore} from "@/store/sharedata";
const showDialog = ref(false)
const currentVideoUrl = ref('')
@@ -167,6 +149,7 @@ const row = ref(1)
const images = ref([])
const formData = reactive({
client_id: getClientId(),
prompt: '',
expand_prompt: false,
loop: false,
@@ -174,49 +157,26 @@ const formData = reactive({
end_frame_img: ''
})
const socket = ref(null)
const userId = ref(0)
const connect = () => {
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
const _socket = new WebSocket(host + `/api/video/client?user_id=${userId.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(event.data, "UTF-8")
reader.onload = () => {
const message = String(reader.result)
if (message === "FINISH" || message === "FAIL") {
fetchData()
}
}
}
});
_socket.addEventListener('close', () => {
if (socket.value !== null) {
connect()
}
});
}
const store = useSharedStore()
onMounted(()=>{
checkSession().then(user => {
userId.value = user.id
connect()
checkSession().then(() => {
fetchData(1)
})
fetchData(1)
store.addMessageHandler("luma",(data) => {
// 丢弃无关消息
if (data.channel !== "luma" || data.clientId !== getClientId()) {
return
}
if (data.body === "FINISH" || data.body === "FAIL") {
fetchData(1)
}
})
})
onUnmounted(() => {
store.removeMessageHandler("luma")
})
const download = (item) => {

121
web/src/views/MarkMap.vue
View File

@@ -45,7 +45,7 @@
<div class="param-line">
<el-button color="#47fff1" :dark="false" round @click="generateAI" :loading="loading">
智能生成思维导图
生成思维导图
</el-button>
</div>
@@ -79,10 +79,7 @@
</el-button>
</div>
<div class="markdown" v-if="loading">
<div :style="{ height: rightBoxHeight + 'px', overflow:'auto',width:'80%' }" v-html="html"></div>
</div>
<div class="body" id="markmap" v-show="!loading">
<div class="body" id="markmap">
<svg ref="svgRef" :style="{ height: rightBoxHeight + 'px' }"/>
<div id="toolbar"></div>
</div>
@@ -94,11 +91,11 @@
</template>
<script setup>
import {nextTick, onUnmounted, ref} from 'vue';
import {nextTick, ref} from 'vue';
import {Markmap} from 'markmap-view';
import {Transformer} from 'markmap-lib';
import {checkSession, getSystemInfo} from "@/store/cache";
import {httpGet} from "@/utils/http";
import {httpGet, httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {Download} from "@element-plus/icons-vue";
import {Toolbar} from 'markmap-toolbar';
@@ -106,11 +103,9 @@ import {useSharedStore} from "@/store/sharedata";
const leftBoxHeight = ref(window.innerHeight - 105)
const rightBoxHeight = ref(window.innerHeight - 115)
const title = ref("")
const prompt = ref("")
const text = ref("")
const md = require('markdown-it')({breaks: true});
const content = ref(text.value)
const html = ref("")
@@ -118,13 +113,12 @@ const isLogin = ref(false)
const loginUser = ref({power: 0})
const transformer = new Transformer();
const store = useSharedStore();
const loading = ref(false)
const svgRef = ref(null)
const markMap = ref(null)
const models = ref([])
const modelID = ref(0)
const loading = ref(false)
getSystemInfo().then(res => {
text.value = res.data['mark_map_text']
@@ -150,15 +144,15 @@ const initData = () => {
models.value.push(v)
}
modelID.value = models.value[0].id
checkSession().then(user => {
loginUser.value = user
isLogin.value = true
connect(user.id)
}).catch(() => {
});
}).catch(e => {
ElMessage.error("获取模型失败：" + e.message)
})
checkSession().then(user => {
loginUser.value = user
isLogin.value = true
}).catch(() => {
});
}
const update = () => {
@@ -188,77 +182,11 @@ const processContent = (text) => {
return arr.join("\n")
}
onUnmounted(() => {
if (socket.value !== null) {
socket.value.close()
}
socket.value = null
})
window.onresize = () => {
leftBoxHeight.value = window.innerHeight - 145
rightBoxHeight.value = window.innerHeight - 85
}
const socket = ref(null)
const connect = (userId) => {
if (socket.value !== null) {
socket.value.close()
}
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
const _socket = new WebSocket(host + `/api/markMap/client?user_id=${userId}&model_id=${modelID.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(event.data, "UTF-8")
const model = getModelById(modelID.value)
reader.onload = () => {
const data = JSON.parse(String(reader.result))
switch (data.type) {
case "start":
text.value = ""
break
case "middle":
text.value += data.content
html.value = md.render(processContent(text.value))
break
case "end":
loading.value = false
content.value = processContent(text.value)
loginUser.value.power -= model.power
nextTick(() => update())
break
case "error":
loading.value = false
ElMessage.error(data.content)
break
}
}
}
})
_socket.addEventListener('close', () => {
loading.value = false
checkSession().then(() => {
connect(userId)
}).catch(() => {
})
});
}
const generate = () => {
text.value = content.value
update()
@@ -276,19 +204,26 @@ const generateAI = () => {
return
}
loading.value = true
socket.value.send(JSON.stringify({type: "message", content: prompt.value}))
}
const changeModel = () => {
if (socket.value !== null) {
socket.value.send(JSON.stringify({type: "model_id", content: modelID.value}))
}
httpPost("/api/markMap/gen", {
prompt:prompt.value,
model_id: modelID.value
}).then(res => {
text.value = res.data
content.value = processContent(text.value)
const model = getModelById(modelID.value)
loginUser.value.power -= model.power
nextTick(() => update())
loading.value = false
}).catch(e => {
ElMessage.error("生成思维导图失败：" + e.message)
loading.value = false
})
}
const getModelById = (modelId) => {
for (let e of models.value) {
if (e.id === modelId) {
return e
for (let m of models.value) {
if (m.id === modelId) {
return m
}
}
}

294
web/src/views/Member.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<div class="member custom-scroll">
<div class="member custom-scroll" v-loading="loading" element-loading-background="rgba(255,255,255,.3)" :element-loading-text="loadingText">
<div class="inner">
<div class="user-profile">
<user-profile :key="profileKey"/>
@@ -22,10 +22,6 @@
<el-button type="primary" @click="showRedeemVerifyDialog = true">卡密兑换
</el-button>
</el-col>
<el-col :span="24" style="padding-top: 30px" v-if="isLogin">
<el-button type="danger" round @click="logout">退出登录</el-button>
</el-col>
</el-row>
</div>
@@ -36,57 +32,63 @@
</el-alert>
</div>
<ItemList :items="list" v-if="list.length > 0" :gap="15" :width="240">
<template #default="scope">
<el-row v-if="list.length > 0" :gutter="20" class="list-box">
<el-col v-for="item in list" :key="item" :span="6">
<div class="product-item">
<div class="image-container">
<el-image :src="vipImg" fit="cover"/>
</div>
<div class="product-title">
<span class="name">{{ scope.item.name }}</span>
<span class="name">{{ item.name }}</span>
</div>
<div class="product-info">
<div class="info-line">
<span class="label">商品原价：</span>
<span class="price">￥{{ scope.item.price }}</span>
<span class="price">￥{{ item.price }}</span>
</div>
<div class="info-line">
<span class="label">促销立减：</span>
<span class="price">￥{{ scope.item.discount }}</span>
<span class="price">￥{{ item.discount }}</span>
</div>
<div class="info-line">
<span class="label">有效期：</span>
<span class="expire" v-if="scope.item.days > 0">{{ scope.item.days }}天</span>
<span class="expire" v-if="item.days > 0">{{ item.days }}天</span>
<span class="expire" v-else>长期有效</span>
</div>
<div class="info-line">
<span class="label">算力值：</span>
<span class="power" v-if="scope.item.power > 0">{{ scope.item.power }}</span>
<span class="power" v-else>{{ vipMonthPower }}</span>
<span class="power">{{ item.power }}</span>
</div>
<div class="pay-way">
<el-button type="primary" @click="alipay(scope.item)" size="small" v-if="payWays['alipay']">
<i class="iconfont icon-alipay"></i> 支付宝
</el-button>
<el-button type="success" @click="huPiPay(scope.item)" size="small" v-if="payWays['hupi']">
<span v-if="payWays['hupi']['name'] === 'wechat'"><i
class="iconfont icon-wechat-pay"></i> 微信</span>
<span v-else><i class="iconfont icon-alipay"></i> 支付宝</span>
</el-button>
<el-button type="success" @click="PayJs(scope.item)" size="small" v-if="payWays['payjs']">
<span><i class="iconfont icon-wechat-pay"></i> 微信</span>
</el-button>
<el-button type="success" @click="wechatPay(scope.item)" size="small" v-if="payWays['wechat']">
<i class="iconfont icon-wechat-pay"></i> 微信
</el-button>
<span type="primary" v-for="payWay in payWays" @click="pay(item,payWay)" :key="payWay">
<el-button v-if="payWay.pay_type==='alipay'" color="#15A6E8" circle>
<i class="iconfont icon-alipay" ></i>
</el-button>
<el-button v-else-if="payWay.pay_type==='qqpay'" circle>
<i class="iconfont icon-qq"></i>
</el-button>
<el-button v-else-if="payWay.pay_type==='paypal'" class="paypal" round>
<i class="iconfont icon-paypal"></i>
</el-button>
<el-button v-else-if="payWay.pay_type==='jdpay'" color="#E1251B" circle>
<i class="iconfont icon-jd-pay"></i>
</el-button>
<el-button v-else-if="payWay.pay_type==='douyin'" class="douyin" circle>
<i class="iconfont icon-douyin"></i>
</el-button>
<el-button v-else circle class="wechat" color="#67C23A">
<i class="iconfont icon-wechat-pay"></i>
</el-button>
</span>
</div>
</div>
</div>
</template>
</ItemList>
</el-col>
</el-row>
<el-empty description="暂无数据" v-else />
<h2 class="headline">消费账单</h2>
@@ -96,49 +98,24 @@
</div>
</div>
<password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false"
@logout="logout"/>
<password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false"/>
<bind-mobile v-if="isLogin" :show="showBindMobileDialog" @hide="showBindMobileDialog = false"/>
<bind-email v-if="isLogin" :show="showBindEmailDialog" @hide="showBindEmailDialog = false"/>
<third-login v-if="isLogin" :show="showThirdLoginDialog" @hide="showThirdLoginDialog = false"/>
<redeem-verify v-if="isLogin" :show="showRedeemVerifyDialog" @hide="redeemCallback"/>
<el-dialog
v-model="showPayDialog"
:close-on-click-modal="false"
:show-close="true"
:width="400"
@close="closeOrder"
:title="'实付金额：￥'+amount">
<div class="pay-container">
<div class="count-down">
<count-down :second="orderTimeout" @timeout="refreshPayCode" ref="countDownRef"/>
</div>
<div class="pay-qrcode" v-loading="loading">
<el-image :src="qrcode"/>
</div>
<div class="tip success" v-if="text !== ''">
<el-icon>
<SuccessFilled/>
</el-icon>
<span class="text">{{ text }}</span>
</div>
<div class="tip" v-else>
<el-icon>
<InfoFilled/>
</el-icon>
<span class="text">请打开手机{{ payName }}扫码支付</span>
</div>
</div>
</el-dialog>
</div>
<el-dialog v-model="showDialog" :show-close=false :close-on-click-modal="false" hide-footer width="auto" class="pay-dialog">
<div v-if="qrImg !== ''">
<div class="product-info">请使用微信扫码支付：<span class="price">￥{{price}}</span></div>
<el-image :src="qrImg" fit="cover" />
</div>
<div style="padding-bottom: 10px; text-align: center">
<el-button type="success" @click="payCallback(true)">支付成功</el-button>
<el-button type="danger" @click="payCallback(false)">支付失败</el-button>
</div>
</el-dialog>
</div>
</template>
@@ -146,52 +123,40 @@
import {onMounted, ref} from "vue"
import {ElMessage} from "element-plus";
import {httpGet, httpPost} from "@/utils/http";
import ItemList from "@/components/ItemList.vue";
import {InfoFilled, SuccessFilled} from "@element-plus/icons-vue";
import {checkSession, getSystemInfo} from "@/store/cache";
import UserProfile from "@/components/UserProfile.vue";
import PasswordDialog from "@/components/PasswordDialog.vue";
import BindMobile from "@/components/BindMobile.vue";
import RedeemVerify from "@/components/RedeemVerify.vue";
import {useRouter} from "vue-router";
import {removeUserToken} from "@/store/session";
import UserOrder from "@/components/UserOrder.vue";
import CountDown from "@/components/CountDown.vue";
import {useSharedStore} from "@/store/sharedata";
import BindEmail from "@/components/BindEmail.vue";
import ThirdLogin from "@/components/ThirdLogin.vue";
import QRCode from "qrcode";
const list = ref([])
const showPayDialog = ref(false)
const vipImg = ref("/images/vip.png")
const enableReward = ref(false) // 是否启用众筹功能
const rewardImg = ref('/images/reward.png')
const qrcode = ref("")
const showPasswordDialog = ref(false)
const showBindMobileDialog = ref(false)
const showBindEmailDialog = ref(false)
const showRedeemVerifyDialog = ref(false)
const showThirdLoginDialog = ref(false)
const text = ref("")
const user = ref(null)
const isLogin = ref(false)
const router = useRouter()
const curPayProduct = ref(null)
const activeOrderNo = ref("")
const countDownRef = ref(null)
const orderTimeout = ref(1800)
const loading = ref(true)
const loadingText = ref("加载中...")
const orderPayInfoText = ref("")
const vipMonthPower = ref(0)
const powerPrice = ref(0)
const payWays = ref({})
const amount = ref(0)
const payName = ref("支付宝")
const curPay = ref("alipay") // 当前支付方式
const payWays = ref([])
const vipInfoText = ref("")
const store = useSharedStore()
const profileKey = ref(0)
const showDialog = ref(false)
const qrImg = ref("")
const price = ref(0)
onMounted(() => {
@@ -204,6 +169,7 @@ onMounted(() => {
httpGet("/api/product/list").then((res) => {
list.value = res.data
loading.value = false
}).catch(e => {
ElMessage.error("获取产品套餐失败：" + e.message)
})
@@ -215,8 +181,6 @@ onMounted(() => {
if (res.data['order_pay_timeout'] > 0) {
orderTimeout.value = res.data['order_pay_timeout']
}
vipMonthPower.value = res.data['vip_month_power']
powerPrice.value = res.data['power_price']
vipInfoText.value = res.data['vip_info_text']
}).catch(e => {
ElMessage.error("获取系统配置失败：" + e.message)
@@ -229,137 +193,47 @@ onMounted(() => {
})
})
// refresh payment qrcode
const refreshPayCode = () => {
if (curPay.value === 'alipay') {
alipay(curPayProduct.value)
} else if (curPay.value === 'hupi') {
huPiPay(curPayProduct.value)
} else if (curPay.value === 'payjs') {
PayJs(curPayProduct.value)
const pay = (product, payWay) => {
if (!isLogin.value) {
store.setShowLoginDialog(true)
return
}
}
const genPayQrcode = () => {
loading.value = true
text.value = ""
httpPost("/api/payment/qrcode", {
pay_way: curPay.value,
product_id: curPayProduct.value.id,
user_id: user.value.id
loadingText.value = "正在生成支付订单..."
let host = process.env.VUE_APP_API_HOST
if (host === '') {
host = `${location.protocol}//${location.host}`;
}
httpPost(`${process.env.VUE_APP_API_HOST}/api/payment/doPay`, {
product_id: product.id,
pay_way: payWay.pay_way,
pay_type: payWay.pay_type,
user_id: user.value.id,
host: host,
device: "jump"
}).then(res => {
showPayDialog.value = true
qrcode.value = res.data['image']
activeOrderNo.value = res.data['order_no']
queryOrder(activeOrderNo.value)
showDialog.value = true
loading.value = false
// 重置计数器
if (countDownRef.value) {
countDownRef.value.resetTimer()
}
}).catch(e => {
ElMessage.error("生成支付订单失败：" + e.message)
})
}
const alipay = (row) => {
payName.value = "支付宝"
curPay.value = "alipay"
amount.value = (row.price - row.discount).toFixed(2)
if (!isLogin.value) {
store.setShowLoginDialog(true)
return
}
if (row) {
curPayProduct.value = row
}
genPayQrcode()
}
// 虎皮椒支付
const huPiPay = (row) => {
payName.value = payWays.value["hupi"]["name"] === "wechat" ? '微信' : '支付宝'
curPay.value = "hupi"
amount.value = (row.price - row.discount).toFixed(2)
if (!isLogin.value) {
store.setShowLoginDialog(true)
return
}
if (row) {
curPayProduct.value = row
}
genPayQrcode()
}
// PayJS 支付
const PayJs = (row) => {
payName.value = '微信'
curPay.value = "payjs"
amount.value = (row.price - row.discount).toFixed(2)
if (!isLogin.value) {
store.setShowLoginDialog(true)
return
}
if (row) {
curPayProduct.value = row
}
genPayQrcode()
}
const wechatPay = (row) => {
payName.value = '微信'
curPay.value = "wechat"
amount.value = (row.price - row.discount).toFixed(2)
if (!isLogin.value) {
store.setShowLoginDialog(true)
return
}
if (row) {
curPayProduct.value = row
}
genPayQrcode()
}
const queryOrder = (orderNo) => {
httpGet("/api/order/query", {order_no: orderNo}).then(res => {
if (res.data.status === 1) {
text.value = "扫码成功，请在手机上进行支付！"
queryOrder(orderNo)
} else if (res.data.status === 2) {
text.value = "支付成功，正在刷新页面"
if (curPay.value === "payjs") {
setTimeout(() => location.reload(), 3000)
} else {
setTimeout(() => location.reload(), 500)
}
if (payWay.pay_way === 'wechat') {
price.value = Number((product.price - product.discount).toFixed(2))
QRCode.toDataURL(res.data, {width: 300, height: 300, margin: 2}, (error, url) => {
if (error) {
console.error(error)
} else {
qrImg.value = url;
}
})
} else {
// 如果当前订单没有过期，继续等待订单的下一个状态
if (activeOrderNo.value === orderNo) {
queryOrder(orderNo)
}
window.open(res.data, '_blank');
}
}).catch(e => {
ElMessage.error("查询支付状态失败：" + e.message)
setTimeout(() => {
ElMessage.error("生成支付订单失败：" + e.message)
loading.value = false
}, 500)
})
}
const logout = function () {
httpGet('/api/user/logout').then(() => {
removeUserToken();
router.push('/login');
}).catch(() => {
ElMessage.error('注销失败！');
})
}
const closeOrder = () => {
activeOrderNo.value = ''
}
const redeemCallback = (success) => {
showRedeemVerifyDialog.value = false
if (success) {
@@ -367,6 +241,14 @@ const redeemCallback = (success) => {
}
}
const payCallback = (success) => {
showDialog.value = false
if (success) {
profileKey.value += 1
}
}
</script>
<style lang="stylus">

18
web/src/views/PayReturn.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div>
支付回调
</div>
</template>
<script setup>
import {useRouter} from "vue-router";
import {isMobile} from "@/utils/libs";
const router = useRouter()
console.log(router.currentRoute.value.query)
if (isMobile()) {
router.push('/mobile/profile')
} else {
window.close()
}
</script>

40
web/src/views/Register.vue
View File

@@ -16,7 +16,7 @@
<div class="block">
<el-input placeholder="手机号码"
size="large"
v-model="data.username"
v-model="data.mobile"
maxlength="11"
autocomplete="off">
<template #prefix>
@@ -41,7 +41,7 @@
</el-input>
</el-col>
<el-col :span="12">
<send-msg size="large" :receiver="data.username" type="mobile"/>
<send-msg size="large" :receiver="data.mobile" type="mobile"/>
</el-col>
</el-row>
</div>
@@ -183,7 +183,7 @@ import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import FooterBar from "@/components/FooterBar.vue";
import SendMsg from "@/components/SendMsg.vue";
import {arrayContains} from "@/utils/libs";
import {arrayContains, isMobile} from "@/utils/libs";
import {setUserToken} from "@/store/session";
import {validateEmail, validateMobile} from "@/utils/validate";
import {showMessageError, showMessageOK} from "@/utils/dialog";
@@ -195,6 +195,8 @@ const title = ref('');
const logo = ref("")
const data = ref({
username: '',
mobile: '',
email: '',
password: '',
code: '',
repass: '',
@@ -221,14 +223,18 @@ getSystemInfo().then(res => {
title.value = res.data.title
logo.value = res.data.logo
const registerWays = res.data['register_ways']
if (arrayContains(registerWays, "mobile")) {
enableMobile.value = true
if (arrayContains(registerWays, "username")) {
enableUser.value = true
activeName.value = 'username'
}
if (arrayContains(registerWays, "email")) {
enableEmail.value = true
activeName.value = 'email'
}
if (arrayContains(registerWays, "username")) {
enableUser.value = true
if (arrayContains(registerWays, "mobile")) {
enableMobile.value = true
activeName.value = 'mobile'
}
// 是否启用注册
enableRegister.value = res.data['enabled_register']
@@ -250,15 +256,15 @@ getLicenseInfo().then(res => {
// 注册操作
const submitRegister = () => {
if (data.value.username === '') {
if (activeName.value === 'username' && data.value.username === '') {
return showMessageError('请输入用户名');
}
if (activeName.value === 'mobile' && !validateMobile(data.value.username)) {
if (activeName.value === 'mobile' && !validateMobile(data.value.mobile)) {
return showMessageError('请输入合法的手机号');
}
if (activeName.value === 'email' && !validateEmail(data.value.username)) {
if (activeName.value === 'email' && !validateEmail(data.value.email)) {
return showMessageError('请输入合法的邮箱地址');
}
@@ -273,7 +279,8 @@ const submitRegister = () => {
return showMessageError('请输入验证码');
}
if (enableVerify.value) {
// 如果是用户名和密码登录，那么需要加载验证码
if (enableVerify.value && activeName.value === 'username') {
captchaRef.value.loadCaptcha()
} else {
doSubmitRegister({})
@@ -287,11 +294,12 @@ const doSubmitRegister = (verifyData) => {
data.value.reg_way = activeName.value
httpPost('/api/user/register', data.value).then((res) => {
setUserToken(res.data.token)
showMessageOK({
"message": "注册成功，即将跳转到对话主界面...",
onClose: () => router.push("/chat"),
duration: 1000
})
showMessageOK("注册成功，即将跳转到对话主界面...")
if (isMobile()) {
router.push('/mobile/index')
} else {
router.push('/chat')
}
}).catch((e) => {
showMessageError('注册失败，' + e.message)
})

106
web/src/views/Suno.vue
View File

@@ -190,11 +190,10 @@
</button>
<el-tooltip effect="light" content="下载歌曲" placement="top">
<a :href="item.audio_url" :download="item.title+'.mp3'" target="_blank">
<button class="btn btn-icon">
<i class="iconfont icon-download"></i>
</button>
</a>
<button class="btn btn-icon" @click="download(item)">
<i class="iconfont icon-download" v-if="!item.downloading"></i>
<el-image src="/images/loading.gif" class="downloading" fit="cover" v-else />
</button>
</el-tooltip>
<el-tooltip effect="light" content="获取完整歌曲" placement="top" v-if="item.ref_song">
@@ -299,15 +298,16 @@ import BlackSwitch from "@/components/ui/BlackSwitch.vue";
import BlackInput from "@/components/ui/BlackInput.vue";
import MusicPlayer from "@/components/MusicPlayer.vue";
import {compact} from "lodash";
import {httpGet, httpPost} from "@/utils/http";
import {httpDownload, httpGet, httpPost} from "@/utils/http";
import {showMessageError, showMessageOK} from "@/utils/dialog";
import {checkSession} from "@/store/cache";
import {checkSession, getClientId} from "@/store/cache";
import {ElMessage, ElMessageBox} from "element-plus";
import {formatTime} from "@/utils/libs";
import {formatTime, replaceImg} from "@/utils/libs";
import Clipboard from "clipboard";
import BlackDialog from "@/components/ui/BlackDialog.vue";
import Compressor from "compressorjs";
import Generating from "@/components/ui/Generating.vue";
import {useSharedStore} from "@/store/sharedata";
const winHeight = ref(window.innerHeight - 50)
const custom = ref(false)
@@ -334,6 +334,7 @@ const tags = ref([
{label: "嘻哈", value: "hip hop"},
])
const data = ref({
client_id: getClientId(),
model: "chirp-v3-0",
tags: "",
lyrics: "",
@@ -344,8 +345,8 @@ const data = ref({
extend_secs: 0,
ref_song_id: "",
})
const loading = ref(true)
const noData = ref(false)
const loading = ref(false)
const noData = ref(true)
const playList = ref([])
const playerRef = ref(null)
const showPlayer = ref(false)
@@ -355,45 +356,7 @@ const refSong = ref(null)
const showDialog = ref(false)
const editData = ref({title:"",cover:"",id:0})
const promptPlaceholder = ref('请在这里输入你自己写的歌词...')
const socket = ref(null)
const userId = ref(0)
const connect = () => {
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
const _socket = new WebSocket(host + `/api/suno/client?user_id=${userId.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(event.data, "UTF-8")
reader.onload = () => {
const message = String(reader.result)
console.log(message)
if (message === "FINISH" || message === "FAIL") {
fetchData()
}
}
}
});
_socket.addEventListener('close', () => {
if (socket.value !== null) {
connect()
}
});
}
const store = useSharedStore()
const clipboard = ref(null)
onMounted(() => {
clipboard.value = new Clipboard('.copy-link');
@@ -405,15 +368,25 @@ onMounted(() => {
ElMessage.error('复制失败！');
})
checkSession().then(user => {
userId.value = user.id
connect()
checkSession().then(() => {
fetchData(1)
}).catch(() => {})
store.addMessageHandler("suno",(data) => {
// 丢弃无关消息
if (data.channel !== "suno" || data.clientId !== getClientId()) {
return
}
if (data.body === "FINISH" || data.body === "FAIL") {
fetchData(1)
}
})
fetchData(1)
})
onUnmounted(() => {
clipboard.value.destroy()
store.removeMessageHandler("suno")
})
const page = ref(1)
@@ -423,6 +396,7 @@ const fetchData = (_page) => {
if (_page) {
page.value = _page
}
loading.value = true
httpGet("/api/suno/list",{page:page.value, page_size:pageSize.value}).then(res => {
total.value = res.data.total
const items = []
@@ -483,6 +457,30 @@ const merge = (item) => {
})
}
// 下载歌曲
const download = (item) => {
const url = replaceImg(item.audio_url)
const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`
// parse filename
const urlObj = new URL(url);
const fileName = urlObj.pathname.split('/').pop();
item.downloading = true
httpDownload(downloadURL).then(response => {
const blob = new Blob([response.data]);
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
item.downloading = false
}).catch(() => {
showMessageError("下载失败")
item.downloading = false
})
}
const uploadAudio = (file) => {
const formData = new FormData();
formData.append('file', file.file, file.name);
@@ -587,7 +585,7 @@ const publishJob = (item) => {
}
const getShareURL = (item) => {
return `${location.protocol}//${location.host}/song/${item.id}`
return `${location.protocol}//${location.host}/song/${item.song_id}`
}
const uploadCover = (file) => {

20
web/src/views/Test.vue
View File

@@ -5,20 +5,12 @@
</template>
<script setup>
import {ref, onMounted, onUpdated} from 'vue';
import {Markmap} from 'markmap-view';
import {loadJS, loadCSS} from 'markmap-common';
import {Transformer} from 'markmap-lib';
import {httpPost} from "@/utils/http";
import {onMounted, ref} from "vue";
const data=ref("")
httpPost("/api/test/sse",{
"message":"你是什么模型",
"user_id":123
}).then(res=>{
// const source = new EventSource("http://localhost:5678/api/test/sse");
// source.onmessage = function(event) {
// console.log(event.data)
// };
const data = ref('abc')
onMounted(() => {
})
</script>

2
web/src/views/admin/ApiKey.vue
View File

@@ -194,7 +194,7 @@ const fetchData = () => {
const add = function () {
showDialog.value = true
title.value = "新增 API KEY"
item.value = {enabled: true,api_url:"https://api.geekai.pro"}
item.value = {enabled: true,api_url: "https://api.geekai.pro"}
}
const edit = function (row) {

214
web/src/views/admin/AppType.vue Normal file
View File

@@ -0,0 +1,214 @@
<template>
<div class="container app-type" v-loading="loading">
<div class="handle-box">
<el-button type="primary" :icon="Plus" @click="add">新增</el-button>
</div>
<el-row>
<el-table :data="items" :row-key="row => row.id" table-layout="auto">
<el-table-column type="selection" width="38"></el-table-column>
<el-table-column prop="name" label="分类名称">
<template #default="scope">
<span class="sort" :data-id="scope.row.id">
<i class="iconfont icon-drag"></i>
{{ scope.row.name }}
</span>
</template>
</el-table-column>
<el-table-column label="图标" prop="icon">
<template #default="scope">
<el-image v-if="scope.row.icon" :src="scope.row.icon" style="width: 45px; height: 45px; border-radius: 50%"/>
<el-tag type="info" v-else>无图标</el-tag>
</template>
</el-table-column>
<el-table-column prop="enabled" label="启用状态">
<template #default="scope">
<el-switch v-model="scope.row['enabled']" @change="enableSet(scope.row)"/>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="scope">
<el-button size="small" type="primary" @click="edit(scope.row)">编辑</el-button>
<el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row)" :width="200">
<template #reference>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-row>
<el-dialog
v-model="showDialog"
:title="title"
:close-on-click-modal="false"
style="width: 90%; max-width: 600px;"
>
<el-form :model="item" label-width="120px" ref="formRef" :rules="rules">
<el-form-item label="分类名称：" prop="name">
<el-input v-model="item.name" autocomplete="off"/>
</el-form-item>
<el-form-item label="应用图标：" prop="icon">
<el-input v-model="item.icon">
<template #append>
<el-upload
:auto-upload="true"
:show-file-list="false"
:http-request="uploadImg"
>
上传
</el-upload>
</template>
</el-input>
</el-form-item>
<el-form-item label="启用状态：" prop="enable">
<el-switch v-model="item.enabled" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="showDialog = false">取消</el-button>
<el-button type="primary" @click="save">提交</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import {onMounted, onUnmounted, reactive, ref} from "vue";
import {httpGet, httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {removeArrayItem} from "@/utils/libs";
import {Sortable} from "sortablejs";
import Compressor from "compressorjs";
// 变量定义
const items = ref([])
const item = ref({})
const showDialog = ref(false)
const title = ref("")
const rules = reactive({
name: [{required: true, message: '请输入分类名称', trigger: 'change',}],
})
const loading = ref(true)
const formRef = ref(null)
// 获取数据
const fetchData = () => {
httpGet('/api/admin/app/type/list').then((res) => {
if (res.data) {
items.value = res.data
}
loading.value = false
}).catch(() => {
ElMessage.error("获取数据失败");
})
}
onMounted(() => {
fetchData()
const drawBodyWrapper = document.querySelector('.el-table__body tbody')
// 初始化拖动排序插件
Sortable.create(drawBodyWrapper, {
sort: true,
animation: 500,
onEnd({newIndex, oldIndex, from}) {
if (oldIndex === newIndex) {
return
}
const sortedData = Array.from(from.children).map(row => row.querySelector('.sort').getAttribute('data-id'));
const ids = []
const sorts = []
sortedData.forEach((id, index) => {
ids.push(parseInt(id))
sorts.push(index + 1)
items.value[index].sort_num = index + 1
})
httpPost("/api/admin/app/type/sort", {ids: ids, sorts: sorts}).then(() => {
}).catch(e => {
ElMessage.error("排序失败：" + e.message)
})
}
})
})
const add = function () {
title.value = "新增分类"
showDialog.value = true
item.value = { enabled: true, }
}
const edit = function (row) {
title.value = "修改分类"
showDialog.value = true
item.value = row
}
const save = function () {
formRef.value.validate((valid) => {
if (!item.value.sort_num) {
item.value.sort_num = items.value.length
}
if (valid) {
showDialog.value = false
httpPost('/api/admin/app/type/save', item.value).then(() => {
ElMessage.success('操作成功！')
fetchData()
}).catch((e) => {
ElMessage.error('操作失败，' + e.message)
})
} else {
return false
}
})
}
// 设置启用状态
const enableSet = (row) => {
httpPost('/api/admin/app/type/enable', {id: row.id, enabled: row.enabled}).then(() => {
ElMessage.success("操作成功！")
}).catch(e => {
ElMessage.error("操作失败：" + e.message)
})
}
// 删除数据
const remove = function (row) {
httpGet('/api/admin/app/type/remove?id=' + row.id).then(() => {
ElMessage.success("删除成功！")
items.value = removeArrayItem(items.value, row, (v1, v2) => {
return v1.id === v2.id
})
}).catch((e) => {
ElMessage.error("删除失败：" + e.message)
})
}
// 图片上传
const uploadImg = (file) => {
// 压缩图片并上传
new Compressor(file.file, {
quality: 0.6,
success(result) {
const formData = new FormData();
formData.append('file', result, result.name);
// 执行上传操作
httpPost('/api/admin/upload', formData).then((res) => {
item.value.icon = res.data.url
ElMessage.success('上传成功')
}).catch((e) => {
ElMessage.error('上传失败:' + e.message)
})
},
error(e) {
ElMessage.error('上传失败:' + e.message)
},
});
};
</script>

31
web/src/views/admin/Apps.vue
View File

@@ -23,6 +23,7 @@
</span>
</template>
</el-table-column>
<el-table-column label="应用类型" prop="type_name"/>
<el-table-column label="应用标识" prop="key"/>
<el-table-column label="绑定模型" prop="model_name"/>
<el-table-column label="启用状态">
@@ -62,6 +63,21 @@
autocomplete="off"
/>
</el-form-item>
<el-form-item label="应用分类：" prop="tid">
<el-select
v-model="role.tid"
filterable
placeholder="请选择分类"
clearable
>
<el-option
v-for="item in appTypes"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="应用标志：" prop="key">
<el-input
@@ -195,6 +211,7 @@ const rules = reactive({
hello_msg: [{required: true, message: '请输入打招呼信息', trigger: 'change',}]
})
const appTypes = ref([])
const models = ref([])
onMounted(() => {
fetchData()
@@ -206,11 +223,25 @@ onMounted(() => {
ElMessage.error("获取AI模型数据失败");
})
// get app type
httpGet('/api/admin/app/type/list?enable=1').then((res) => {
appTypes.value = res.data
}).catch(() => {
ElMessage.error("获取应用分类数据失败");
})
})
const fetchData = () => {
// 获取应用列表
httpGet('/api/admin/role/list').then((res) => {
// 初始化数据
// const arr = res.data;
// for (let i = 0; i < arr.length; i++) {
// if(arr[i].model_id == 0){
// arr[i].model_id = ''
// }
// }
tableData.value = res.data
sortedTableData.value = copyObj(tableData.value)
loading.value = false

25
web/src/views/admin/Home.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="admin-home" v-if="isLogin">
<admin-sidebar v-model:theme="theme"/>
<admin-sidebar/>
<div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
<admin-header v-model:theme="theme" @changeTheme="changeTheme"/>
<admin-tags v-model:theme="theme"/>
<admin-header/>
<admin-tags/>
<div :class="'content '+theme" :style="{height:contentHeight+'px'}">
<router-view v-slot="{ Component }">
<transition name="move" mode="out-in">
@@ -24,14 +24,15 @@ import AdminSidebar from "@/components/admin/AdminSidebar.vue";
import AdminTags from "@/components/admin/AdminTags.vue";
import {useRouter} from "vue-router";
import {checkAdminSession} from "@/store/cache";
import {ref} from "vue";
import {getAdminTheme, setAdminTheme} from "@/store/system";
import {ref, watch} from "vue";
import {useSharedStore} from "@/store/sharedata";
const sidebar = useSidebarStore();
const tags = useTagsStore();
const isLogin = ref(false)
const contentHeight = window.innerHeight - 80
const theme = ref(getAdminTheme())
const store = useSharedStore()
const theme = ref(store.adminTheme)
// 获取会话信息
const router = useRouter();
@@ -41,14 +42,10 @@ checkAdminSession().then(() => {
router.replace('/admin/login')
})
const changeTheme = (value) => {
if (value) {
theme.value = 'dark'
} else {
theme.value = 'light'
}
setAdminTheme(theme.value)
}
watch(() => store.adminTheme, (val) => {
theme.value = val
})
</script>

54
web/src/views/admin/Login.vue
View File

@@ -2,46 +2,38 @@
<div class="admin-login">
<div class="main">
<div class="contain">
<div class="logo">
<el-image :src="logo" fit="cover" @click="router.push('/')"/>
<div class="logo" @click="router.push('/')">
<el-image :src="logo" fit="cover"/>
</div>
<div class="header">{{ title }}</div>
<h1 class="header">{{ title }}</h1>
<div class="content">
<div class="block">
<el-input placeholder="请输入用户名" size="large" v-model="username" autocomplete="off" autofocus
@keyup="keyupHandle">
<template #prefix>
<el-icon>
<UserFilled/>
</el-icon>
</template>
</el-input>
</div>
<el-input v-model="username" placeholder="请输入用户名" size="large"
autocomplete="off" autofocus @keyup.enter="login">
<template #prefix>
<el-icon>
<UserFilled/>
</el-icon>
</template>
</el-input>
<div class="block">
<el-input placeholder="请输入密码" size="large" v-model="password" show-password autocomplete="off"
@keyup="keyupHandle">
<template #prefix>
<el-icon>
<Lock/>
</el-icon>
</template>
</el-input>
</div>
<el-input v-model="password" placeholder="请输入密码" size="large"
show-password autocomplete="off" @keyup.enter="login">
<template #prefix>
<el-icon>
<Lock/>
</el-icon>
</template>
</el-input>
<el-row class="btn-row">
<el-button class="login-btn" size="large" type="primary" @click="login">登录</el-button>
</el-row>
</div>
</div>
<captcha v-if="enableVerify" @success="doLogin" ref="captchaRef"/>
<footer class="footer">
<footer-bar/>
</footer>
<footer-bar class="footer"/>
</div>
</div>
</template>
@@ -80,12 +72,6 @@ getSystemInfo().then(res => {
ElMessage.error("加载系统配置失败: " + e.message)
})
const keyupHandle = (e) => {
if (e.key === 'Enter') {
login();
}
}
const login = function () {
if (username.value === '') {
return ElMessage.error('请输入用户名');

4
web/src/views/admin/Order.vue
View File

@@ -26,6 +26,7 @@
<el-row>
<el-table :data="items" :row-key="row => row.id" table-layout="auto">
<el-table-column prop="order_no" label="订单号"/>
<el-table-column prop="trade_no" label="交易号"/>
<el-table-column prop="username" label="下单用户"/>
<el-table-column prop="subject" label="产品名称"/>
<el-table-column prop="amount" label="订单金额"/>
@@ -47,7 +48,8 @@
<el-tag v-else>未支付</el-tag>
</template>
</el-table-column>
<el-table-column prop="pay_way" label="支付方式"/>
<el-table-column prop="pay_method" label="支付渠道"/>
<el-table-column prop="pay_name" label="支付名称"/>
<el-table-column label="操作" width="180">
<template #default="scope">

50
web/src/views/admin/SysConfig.vue
View File

@@ -133,6 +133,10 @@
</el-checkbox-group>
</el-form-item>
<el-form-item label="邮件域名白名单" prop="register_ways">
<items-input v-model:value="system['email_white_list']"/>
</el-form-item>
<el-form-item label="微信客服二维码" prop="wechat_card_url">
<el-input v-model="system['wechat_card_url']" placeholder="微信客服二维码">
<template #append>
@@ -396,6 +400,18 @@
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="修复数据" name="fixData">
<div class="container">
<p class="text">有些版本升级的时候更新了数据库的结构，比如字段名字改了，需要把之前的字段的值转移到其他字段，这些无法通过简单的 SQL 语句可以实现的，需要手动写程序修正数据。</p>
<p class="text">当前版本 v4.1.4 需要修正用户数据，增加了 mobile 和 email 字段，需要把之前用手机号或者邮箱注册的用户的 username 字段数据初始化到 mobile 或者 email 字段。另外，需要把订单的支付渠道从名字称修正为 key。</p>
<el-text type="danger">请注意：在修复数据前，请先备份好数据库，以免数据丢失！</el-text>
<p><el-button type="primary" @click="fixData">立即修复</el-button></p>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
@@ -404,12 +420,13 @@
import {onMounted, reactive, ref} from "vue";
import {httpGet, httpPost} from "@/utils/http";
import Compressor from "compressorjs";
import {ElMessage} from "element-plus";
import {ElMessage, ElMessageBox} from "element-plus";
import {InfoFilled, UploadFilled,Select,CloseBold} from "@element-plus/icons-vue";
import MdEditor from "md-editor-v3";
import 'md-editor-v3/lib/style.css';
import Menu from "@/views/admin/Menu.vue";
import {copyObj, dateFormat} from "@/utils/libs";
import ItemsInput from "@/components/ui/ItemsInput.vue";
const activeName = ref('basic')
const system = ref({models: []})
@@ -458,7 +475,7 @@ onMounted(() => {
})
const fetchLicense = () => {
httpGet("/api/admin/config/get/license").then(res => {
httpGet("/api/admin/config/license").then(res => {
license.value = res.data
}).catch(e => {
ElMessage.error("获取 License 失败：" + e.message)
@@ -475,7 +492,6 @@ const save = function (key) {
if (key === 'system') {
systemFormRef.value.validate((valid) => {
if (valid) {
system.value['power_price'] = parseFloat(system.value['power_price']) ?? 0
httpPost('/api/admin/config/update', {key: key, config: system.value, config_bak: configBak.value}).then(() => {
ElMessage.success("操作成功！")
}).catch(e => {
@@ -498,7 +514,7 @@ const active = () => {
if (licenseKey.value === "") {
return ElMessage.error("请输入授权码")
}
httpPost("/api/admin/active", {license: licenseKey.value}).then(res => {
httpPost("/api/admin/config/active", {license: licenseKey.value}).then(res => {
ElMessage.success("授权成功，机器编码为：" + res.data)
fetchLicense()
}).catch(e => {
@@ -552,6 +568,28 @@ const onUploadImg = (files, callback) => {
})
};
const fixData = () => {
ElMessageBox.confirm(
'在修复数据前，请先备份好数据库，以免数据丢失！是否继续操作?',
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
loading.value = true
httpGet("/api/admin/config/fixData").then(() => {
ElMessage.success("数据修复成功")
loading.value = false
}).catch(e => {
loading.value = false
ElMessage.error("数据修复失败：" + e.message)
})
})
}
</script>
@@ -602,6 +640,10 @@ const onUploadImg = (files, callback) => {
}
.text {
font-size 14px
}
.active-info {
line-height 1.5
padding 10px 0 30px 0

8
web/src/views/admin/Users.vue
View File

@@ -18,6 +18,8 @@
<el-image v-if="scope.row.vip" :src="vipImg" style="height: 20px;position: relative; top:5px; left: 5px"/>
</template>
</el-table-column>
<el-table-column prop="mobile" label="手机"/>
<el-table-column prop="email" label="邮箱"/>
<el-table-column prop="nickname" label="昵称"/>
<el-table-column prop="power" label="剩余算力"/>
<el-table-column label="状态" width="80">
@@ -73,6 +75,12 @@
<el-form-item label="账号：" prop="username">
<el-input v-model="user.username" autocomplete="off"/>
</el-form-item>
<el-form-item label="手机：" prop="mobile">
<el-input v-model="user.mobile" autocomplete="off"/>
</el-form-item>
<el-form-item label="邮箱：" prop="email">
<el-input v-model="user.email" autocomplete="off"/>
</el-form-item>
<el-form-item v-if="add" label="密码：" prop="password">
<el-input v-model="user.password" autocomplete="off" placeholder="8-16位"/>
</el-form-item>

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

@@ -105,7 +105,7 @@ checkSession().then((user) => {
loginUser.value = user
isLogin.value = true
// 加载角色列表
httpGet(`/api/role/list`).then((res) => {
httpGet(`/api/app/list/user`).then((res) => {
if (res.data) {
const items = res.data
for (let i = 0; i < items.length; i++) {
@@ -139,7 +139,7 @@ checkSession().then((user) => {
finished.value = true
// 加载角色列表
httpGet('/api/role/list').then((res) => {
httpGet('/api/app/list/user').then((res) => {
if (res.data) {
const items = res.data
for (let i = 0; i < items.length; i++) {
@@ -182,7 +182,7 @@ const onLoad = () => {
error.value = true
showFailToast("加载会话列表失败")
})
})
}).catch(() => {})
};
const search = () => {
@@ -225,7 +225,7 @@ const newChat = (item) => {
}
showPicker.value = false
const options = item.selectedOptions
router.push(`/mobile/chat/session?title=新对话&role_id=${options[0].value}&model_id=${options[1].value}&chat_id=0}`)
router.push(`/mobile/chat/session?title=新对话&role_id=${options[0].value}&model_id=${options[1].value}`)
}
const changeChat = (chat) => {

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

@@ -123,19 +123,19 @@
</template>
<script setup>
import {nextTick, onMounted, onUnmounted, ref} from "vue";
import {nextTick, onMounted, onUnmounted, ref, watch} from "vue";
import {showImagePreview, showNotify, showToast} from "vant";
import {onBeforeRouteLeave, useRouter} from "vue-router";
import {useRouter} from "vue-router";
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'
import ChatPrompt from "@/components/mobile/ChatPrompt.vue";
import ChatReply from "@/components/mobile/ChatReply.vue";
import {getSessionId, getUserToken} from "@/store/session";
import {checkSession} from "@/store/cache";
import {checkSession, getClientId} from "@/store/cache";
import Clipboard from "clipboard";
import {showLoginDialog} from "@/utils/dialog";
import { showMessageError} from "@/utils/dialog";
import {useSharedStore} from "@/store/sharedata";
const winHeight = ref(0)
const navBarRef = ref(null)
@@ -162,95 +162,63 @@ checkSession().then(user => {
router.push('/login')
})
const loadModels = () => {
// 加载模型
httpGet('/api/model/list').then(res => {
models.value = res.data
if (!modelId.value) {
modelId.value = models.value[0].id
}
for (let i = 0; i < models.value.length; i++) {
models.value[i].text = models.value[i].name
models.value[i].mValue = models.value[i].value
models.value[i].value = models.value[i].id
}
modelValue.value = getModelName(modelId.value)
// 加载角色列表
httpGet(`/api/app/list/user`,{id: roleId.value}).then((res) => {
roles.value = res.data;
if (!roleId.value) {
roleId.value = roles.value[0]['id']
}
// build data for role picker
for (let i = 0; i < roles.value.length; i++) {
roles.value[i].text = roles.value[i].name
roles.value[i].value = roles.value[i].id
roles.value[i].helloMsg = roles.value[i].hello_msg
}
role.value = getRoleById(roleId.value)
columns.value = [roles.value, models.value]
selectedValues.value = [roleId.value, modelId.value]
loadChatHistory()
}).catch((e) => {
showNotify({type: "danger", message: '获取聊天角色失败: ' + e.messages})
})
}).catch(e => {
showNotify({type: "danger", message: "加载模型失败: " + e.message})
})
}
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
loadModels()
}).catch(() => {
loadModels()
})
} else {
title.value = "新建对话"
}
// 加载模型
httpGet('/api/model/list').then(res => {
models.value = res.data
if (!modelId.value) {
modelId.value = models.value[0].id
}
for (let i = 0; i < models.value.length; i++) {
models.value[i].text = models.value[i].name
models.value[i].mValue = models.value[i].value
models.value[i].value = models.value[i].id
}
modelValue.value = getModelName(modelId.value)
// 加载角色列表
httpGet(`/api/role/list`).then((res) => {
roles.value = res.data;
if (!roleId.value) {
roleId.value = roles.value[0]['id']
}
// build data for role picker
for (let i = 0; i < roles.value.length; i++) {
roles.value[i].text = roles.value[i].name
roles.value[i].value = roles.value[i].id
roles.value[i].helloMsg = roles.value[i].hello_msg
}
role.value = getRoleById(roleId.value)
columns.value = [roles.value, models.value]
// 新建对话
if (!chatId.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 = 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) => {
e.clearSelection()
showNotify({type: 'success', message: '复制成功', duration: 1000})
})
clipboard.on('error', () => {
showNotify({type: 'danger', message: '复制失败', duration: 2000})
})
})
onUnmounted(() => {
if (socket.value !== null) {
socket.value.close()
socket.value = null
}
})
const newChat = (item) => {
showPicker.value = false
const options = item.selectedOptions
roleId.value = options[0].value
modelId.value = options[1].value
modelValue.value = getModelName(modelId.value)
chatId.value = ""
chatData.value = []
role.value = getRoleById(roleId.value)
title.value = "新建对话"
connect(chatId.value, roleId.value, modelId.value)
chatId.value = UUID()
loadModels()
}
const chatData = ref([])
const loading = ref(false)
const finished = ref(false)
const error = ref(false)
const store = useSharedStore()
const url = ref(location.protocol + '//' + location.host + '/mobile/chat/export?chat_id=' + chatId.value)
const mathjaxPlugin = require('markdown-it-mathjax3')
const md = require('markdown-it')({
breaks: true,
@@ -277,187 +245,249 @@ const md = require('markdown-it')({
}
});
md.use(mathjaxPlugin)
onMounted(() => {
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) => {
e.clearSelection()
showNotify({type: 'success', message: '复制成功', duration: 1000})
})
clipboard.on('error', () => {
showNotify({type: 'danger', message: '复制失败', duration: 2000})
})
const onLoad = () => {
if (chatId.value) {
checkSession().then(() => {
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;
}
store.addMessageHandler("chat",(data) => {
if (data.channel !== "chat" || data.clientId !== getClientId()) {
return
}
data[i].orgContent = data[i].content;
data[i].content = md.render(processContent(data[i].content))
chatData.value.push(data[i]);
if (data.type === 'error') {
showMessageError(data.body)
return
}
if (isNewMsg.value) {
chatData.value.push({
type: "reply",
id: randString(32),
icon: role.value.icon,
content: data.body
});
if (!title.value) {
title.value = previousText.value
}
lineBuffer.value = data.body;
isNewMsg.value = false
} else if (data.type === 'end') { // 消息接收完毕
enableInput()
lineBuffer.value = ''; // 清空缓冲
isNewMsg.value = true
} else {
lineBuffer.value += data.body;
const reply = chatData.value[chatData.value.length - 1]
reply['orgContent'] = lineBuffer.value;
reply['content'] = md.render(processContent(lineBuffer.value));
nextTick(() => {
hl.configure({ignoreUnescapedHTML: true})
const lines = document.querySelectorAll('.message-line');
const blocks = lines[lines.length - 1].querySelectorAll('pre code');
blocks.forEach((block) => {
hl.highlightElement(block)
})
scrollListBox()
const items = document.querySelectorAll('.message-line')
const imgs = items[items.length - 1].querySelectorAll('img')
for (let i = 0; i < imgs.length; i++) {
if (!imgs[i].src) {
continue
}
nextTick(() => {
hl.configure({ignoreUnescapedHTML: true})
const blocks = document.querySelector("#message-list-box").querySelectorAll('pre code');
blocks.forEach((block) => {
hl.highlightElement(block)
})
scrollListBox()
imgs[i].addEventListener('click', (e) => {
e.stopPropagation()
showImagePreview([imgs[i].src]);
})
}
connect(chatId.value, roleId.value, modelId.value);
}).catch(() => {
error.value = true
})
}).catch(() => {
})
}
};
// 离开页面时主动关闭 websocket 连接，节省网络资源
onBeforeRouteLeave(() => {
if (socket.value !== null) {
activelyClose.value = true;
clearTimeout(heartbeatHandle.value)
socket.value.close();
}
}
})
})
onUnmounted(() => {
store.removeMessageHandler("chat")
})
const newChat = (item) => {
showPicker.value = false
const options = item.selectedOptions
roleId.value = options[0].value
modelId.value = options[1].value
modelValue.value = getModelName(modelId.value)
chatId.value = UUID()
chatData.value = []
role.value = getRoleById(roleId.value)
title.value = "新建对话"
loadChatHistory()
}
const onLoad = () => {
// checkSession().then(() => {
// connect()
// }).catch(() => {
// })
}
const loadChatHistory = () => {
httpGet('/api/chat/history?chat_id=' + chatId.value).then(res => {
const role = getRoleById(roleId.value)
// 加载状态结束
finished.value = true;
const data = res.data
if (data.length === 0) {
chatData.value.push({
type: "reply",
id: randString(32),
icon: role.icon,
content: role.hello_msg,
orgContent: role.hello_msg,
})
return
}
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]);
}
nextTick(() => {
hl.configure({ignoreUnescapedHTML: true})
const blocks = document.querySelector("#message-list-box").querySelectorAll('pre code');
blocks.forEach((block) => {
hl.highlightElement(block)
})
scrollListBox()
})
}).catch(() => {
error.value = true
})
}
// 创建 socket 连接
const prompt = ref('');
const showStopGenerate = ref(false); // 停止生成
const showReGenerate = ref(false); // 重新生成
const previousText = ref(''); // 上一次提问
const lineBuffer = ref(''); // 输出缓冲行
const socket = ref(null);
const activelyClose = ref(false); // 主动关闭
const canSend = ref(true);
const heartbeatHandle = ref(null)
const connect = function (chat_id, role_id, model_id) {
let isNewChat = false;
if (!chat_id) {
isNewChat = true;
chat_id = UUID();
}
const canSend = ref(true)
const isNewMsg = ref(true)
const stream = ref(store.chatStream)
watch(() => store.chatStream, (newValue) => {
stream.value = newValue
});
// const connect = function () {
// // 初始化 WebSocket 对象
// const _sessionId = getSessionId();
// let host = process.env.VUE_APP_WS_HOST
// if (host === '') {
// if (location.protocol === 'https:') {
// host = 'wss://' + location.host;
// } else {
// host = 'ws://' + location.host;
// }
// }
// const _socket = new WebSocket(host + `/api/chat/new?session_id=${_sessionId}&role_id=${roleId.value}&chat_id=${chatId.value}&model_id=${modelId.value}&token=${getUserToken()}`);
// _socket.addEventListener('open', () => {
// loading.value = false
// previousText.value = '';
// canSend.value = true;
//
// if (loadHistory.value) { // 加载历史消息
// loadChatHistory()
// }
// });
//
// _socket.addEventListener('message', event => {
// if (event.data instanceof Blob) {
// const reader = new FileReader();
// reader.readAsText(event.data, "UTF-8");
// reader.onload = () => {
// const data = JSON.parse(String(reader.result));
// if (data.type === 'error') {
// showMessageError(data.message)
// return
// }
//
// if (isNewMsg.value && data.type !== 'end') {
// chatData.value.push({
// type: "reply",
// id: randString(32),
// icon: role.value.icon,
// content: data.content
// });
// if (!title.value) {
// title.value = previousText.value
// }
// lineBuffer.value = data.content;
// isNewMsg.value = false
// } else if (data.type === 'end') { // 消息接收完毕
// enableInput()
// lineBuffer.value = ''; // 清空缓冲
// isNewMsg.value = true
// } else {
// lineBuffer.value += data.content;
// const reply = chatData.value[chatData.value.length - 1]
// reply['orgContent'] = lineBuffer.value;
// reply['content'] = md.render(processContent(lineBuffer.value));
//
// nextTick(() => {
// hl.configure({ignoreUnescapedHTML: true})
// const lines = document.querySelectorAll('.message-line');
// const blocks = lines[lines.length - 1].querySelectorAll('pre code');
// blocks.forEach((block) => {
// hl.highlightElement(block)
// })
// scrollListBox()
//
// const items = document.querySelectorAll('.message-line')
// const imgs = items[items.length - 1].querySelectorAll('img')
// for (let i = 0; i < imgs.length; i++) {
// if (!imgs[i].src) {
// continue
// }
// imgs[i].addEventListener('click', (e) => {
// e.stopPropagation()
// showImagePreview([imgs[i].src]);
// })
// }
// })
// }
//
// };
// }
//
// });
//
// _socket.addEventListener('close', () => {
// // 停止发送消息
// canSend.value = true
// loadHistory.value = false
// // 重连
// connect()
// });
//
// socket.value = _socket;
// }
// 初始化 WebSocket 对象
const _sessionId = getSessionId();
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
// 心跳函数
const sendHeartbeat = () => {
if (socket.value !== null) {
new Promise((resolve) => {
socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"}))
resolve("success")
}).then(() => {
heartbeatHandle.value = setTimeout(() => sendHeartbeat(), 5000)
});
}
}
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 = '';
canSend.value = true;
activelyClose.value = false;
if (isNewChat) { // 加载打招呼信息
chatData.value.push({
type: "reply",
id: randString(32),
icon: role.value.icon,
content: role.value.hello_msg,
orgContent: role.value.hello_msg,
})
}
// 发送心跳消息
sendHeartbeat()
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(event.data, "UTF-8");
reader.onload = () => {
const data = JSON.parse(String(reader.result));
if (data.type === 'start') {
chatData.value.push({
type: "reply",
id: randString(32),
icon: role.value.icon,
content: ""
});
if (isNewChat) {
title.value = previousText.value
}
} else if (data.type === 'end') { // 消息接收完毕
enableInput()
lineBuffer.value = ''; // 清空缓冲
} else {
lineBuffer.value += data.content;
const reply = chatData.value[chatData.value.length - 1]
reply['orgContent'] = lineBuffer.value;
reply['content'] = md.render(processContent(lineBuffer.value));
nextTick(() => {
hl.configure({ignoreUnescapedHTML: true})
const lines = document.querySelectorAll('.message-line');
const blocks = lines[lines.length - 1].querySelectorAll('pre code');
blocks.forEach((block) => {
hl.highlightElement(block)
})
scrollListBox()
const items = document.querySelectorAll('.message-line')
const imgs = items[items.length - 1].querySelectorAll('img')
for (let i = 0; i < imgs.length; i++) {
if (!imgs[i].src) {
continue
}
imgs[i].addEventListener('click', (e) => {
e.stopPropagation()
showImagePreview([imgs[i].src]);
})
}
})
}
};
}
});
_socket.addEventListener('close', () => {
if (activelyClose.value || socket.value === null) { // 忽略主动关闭
return;
}
// 停止发送消息
canSend.value = true;
// 重连
checkSession().then(() => {
connect(chat_id, role_id, model_id)
}).catch(() => {
showLoginDialog(router)
});
});
socket.value = _socket;
}
const disableInput = (force) => {
canSend.value = false;
@@ -482,6 +512,11 @@ const sendMessage = () => {
return
}
if (store.socket.conn.readyState !== WebSocket.OPEN) {
showToast("连接断开，正在重连...");
return
}
if (prompt.value.trim().length === 0) {
showToast("请输入需要 AI 回答的问题")
return false;
@@ -501,7 +536,17 @@ const sendMessage = () => {
})
disableInput(false)
socket.value.send(JSON.stringify({type: "chat", content: prompt.value}));
store.socket.conn.send(JSON.stringify({
channel: 'chat',
type:'text',
body:{
role_id: roleId.value,
model_id: modelId.value,
chat_id: chatId.value,
content: prompt.value,
stream: stream.value
}
}));
previousText.value = prompt.value;
prompt.value = '';
return true;
@@ -509,7 +554,7 @@ const sendMessage = () => {
const stopGenerate = () => {
showStopGenerate.value = false;
httpGet("/api/chat/stop?session_id=" + getSessionId()).then(() => {
httpGet("/api/chat/stop?session_id=" + getClientId()).then(() => {
enableInput()
})
}
@@ -524,7 +569,17 @@ const reGenerate = () => {
icon: loginUser.value.avatar,
content: renderInputText(text)
});
socket.value.send(JSON.stringify({type: "chat", content: previousText.value}));
store.socket.conn.send(JSON.stringify({
channel: 'chat',
type:'text',
body:{
role_id: roleId.value,
model_id: modelId.value,
chat_id: chatId.value,
content: previousText.value,
stream: stream.value
}
}));
}
const showShare = ref(false)

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

@@ -17,23 +17,15 @@
</template>
<script setup>
import {ref} from "vue";
import {getMobileTheme, setMobileTheme} from "@/store/system";
import {useRouter} from "vue-router";
import {isMobile} from "@/utils/libs";
import bus from '@/store/eventbus'
const router = useRouter()
if (!isMobile()) {
router.replace('/')
}
import {ref, watch} from "vue";
import {useSharedStore} from "@/store/sharedata";
const active = ref('home')
const theme = ref(getMobileTheme())
const store = useSharedStore()
const theme = ref(store.mobileTheme)
bus.on('changeTheme', (value) => {
theme.value = value
setMobileTheme(theme.value)
watch(() => store.mobileTheme, (val) => {
theme.value = val
})
</script>

2
web/src/views/mobile/Index.vue
View File

@@ -109,7 +109,7 @@ onMounted(() => {
})
const fetchApps = () => {
httpGet("/api/role/list").then((res) => {
httpGet("/api/app/list").then((res) => {
const items = res.data
// 处理 hello message
for (let i = 0; i < items.length; i++) {

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

@@ -56,25 +56,21 @@
<div class="product-list">
<h3>充值套餐</h3>
<div class="item" v-for="item in products" :key="item.id">
<h4 class="title">
<span>{{ item.name }}</span>
<div class="buy-btn">
<van-button type="primary" @click="pay('alipay',item)" size="small" v-if="payWays['alipay']">
<i class="iconfont icon-alipay"></i> 支付宝
</van-button>
<van-button type="success" @click="pay('hupi',item)" size="small" v-if="payWays['hupi']">
<span v-if="payWays['hupi']['name'] === 'wechat'"><i class="iconfont icon-wechat-pay"></i> 微信</span>
<span v-else><i class="iconfont icon-alipay"></i> 支付宝</span>
</van-button>
<van-button type="success" @click="pay('payjs',item)" size="small" v-if="payWays['payjs']">
<span><i class="iconfont icon-wechat-pay"></i> 微信</span>
</van-button>
<van-button type="primary" @click="pay('wechat',item)" size="small" v-if="payWays['wechat']">
<i class="iconfont icon-wechat-pay"></i> 微信
</van-button>
<div class="title">
<span class="name">{{ item.name }}</span>
<div class="pay-btn">
<div v-for="payWay in payWays" @click="pay(item,payWay)" :key="payWay">
<span>
<van-button type="primary" size="small" v-if="payWay.pay_type==='alipay'" >
<i class="iconfont icon-alipay"></i> 支付宝
</van-button>
<van-button type="success" size="small" v-if="payWay.pay_type==='wxpay'" >
<i class="iconfont icon-wechat-pay"></i> 微信支付
</van-button>
</span>
</div>
</div>
</h4>
</div>
<van-cell-group>
<van-cell title="商品价格">
@@ -129,7 +125,13 @@
<van-cell-group inset>
<van-field name="switch" label="暗黑主题">
<template #input>
<van-switch v-model="dark" @change="changeTheme"/>
<van-switch v-model="dark" @change="(val) => store.setMobileTheme(val?'dark':'light')"/>
</template>
</van-field>
<van-field name="switch" label="流式输出">
<template #input>
<van-switch v-model="stream" @change="(val) => store.setChatStream(val)"/>
</template>
</van-field>
<!-- <van-field-->
@@ -155,16 +157,14 @@
<script setup>
import {onMounted, ref} from "vue";
import {showFailToast, showNotify, showSuccessToast} from "vant";
import {showFailToast, showLoadingToast, showNotify, showSuccessToast} from "vant";
import {httpGet, httpPost} from "@/utils/http";
import Compressor from 'compressorjs';
import {dateFormat, isWeChatBrowser, showLoginDialog} from "@/utils/libs";
import {dateFormat, showLoginDialog} from "@/utils/libs";
import {ElMessage} from "element-plus";
import {checkSession, getSystemInfo} from "@/store/cache";
import {useRouter} from "vue-router";
import {removeUserToken} from "@/store/session";
import bus from '@/store/eventbus'
import {getMobileTheme} from "@/store/system";
import {useSharedStore} from "@/store/sharedata";
const form = ref({
username: 'GeekMaster',
@@ -187,6 +187,9 @@ const router = useRouter()
const userId = ref(0)
const isLogin = ref(false)
const showSettings = ref(false)
const store = useSharedStore()
const stream = ref(store.chatStream)
const dark = ref(store.mobileTheme === 'dark')
onMounted(() => {
checkSession().then(user => {
@@ -224,33 +227,33 @@ onMounted(() => {
})
const afterRead = (file) => {
file.status = 'uploading';
file.message = '上传中...';
// 压缩图片并上传
new Compressor(file.file, {
quality: 0.6,
success(result) {
const formData = new FormData();
formData.append('file', result, result.name);
// 执行上传操作
httpPost('/api/upload', formData).then((res) => {
form.value.avatar = res.data.url
file.status = 'success'
httpPost('/api/user/profile/update', form.value).then(() => {
showSuccessToast('上传成功')
}).catch(() => {
showFailToast('上传失败')
})
}).catch((e) => {
showNotify({type: 'danger', message: '上传失败：' + e.message})
})
},
error(err) {
console.log(err.message);
},
});
}
// const afterRead = (file) => {
// file.status = 'uploading';
// file.message = '上传中...';
// // 压缩图片并上传
// new Compressor(file.file, {
// quality: 0.6,
// success(result) {
// const formData = new FormData();
// formData.append('file', result, result.name);
// // 执行上传操作
// httpPost('/api/upload', formData).then((res) => {
// form.value.avatar = res.data.url
// file.status = 'success'
// httpPost('/api/user/profile/update', form.value).then(() => {
// showSuccessToast('上传成功')
// }).catch(() => {
// showFailToast('上传失败')
// })
// }).catch((e) => {
// showNotify({type: 'danger', message: '上传失败：' + e.message})
// })
// },
// error(err) {
// console.log(err.message);
// },
// });
// }
const showPasswordDialog = ref(false)
const pass = ref({
@@ -290,21 +293,28 @@ const updatePass = () => {
})
}
const pay = (payWay, item) => {
const pay = (product,payWay) => {
if (!isLogin.value) {
return showLoginDialog(router)
}
httpPost("/api/payment/mobile", {
pay_way: payWay,
product_id: item.id,
user_id: userId.value
showLoadingToast({
message: '正在创建订单',
forbidClick: true,
});
let host = process.env.VUE_APP_API_HOST
if (host === '') {
host = `${location.protocol}//${location.host}`;
}
httpPost(`${process.env.VUE_APP_API_HOST}/api/payment/doPay`, {
product_id: product.id,
pay_way: payWay.pay_way,
pay_type: payWay.pay_type,
user_id: userId.value,
host: host,
device: "wechat"
}).then(res => {
if (isWeChatBrowser() && payWay === 'wechat') {
showFailToast("请在系统自带浏览器打开支付页面，或者在 PC 端进行扫码支付")
} else {
location.href = res.data.url
}
location.href = res.data
}).catch(e => {
showFailToast("生成支付订单失败：" + e.message)
})
@@ -313,18 +323,13 @@ const pay = (payWay, item) => {
const logout = function () {
httpGet('/api/user/logout').then(() => {
removeUserToken();
store.setIsLogin(false)
router.push('/');
}).catch(() => {
showFailToast('注销失败！');
})
}
const dark = ref(getMobileTheme() === 'dark')
const changeTheme = () => {
bus.emit('changeTheme', dark.value ? 'dark' : 'light')
}
</script>
<style lang="stylus">
@@ -363,13 +368,19 @@ const changeTheme = () => {
overflow hidden
.title {
padding 0 12px
padding 12px
position relative
.buy-btn {
.name {
font-size 16px
font-weight 700
}
.pay-btn {
position absolute
top -5px
top 5px
right 10px
display flex
.van-button {
font-size 14px

136
web/src/views/mobile/pages/ImageDall.vue
View File

@@ -81,11 +81,9 @@
description="暂无记录"
/>
<van-grid :gutter="10" :column-num="3" v-else>
<van-grid-item v-for="item in runningJobs">
<van-grid-item v-for="item in runningJobs" :key="item.id">
<div v-if="item.progress > 0">
<van-image :src="item['img_url']">
<template v-slot:error>加载失败</template>
</van-image>
<van-image src="/images/img-holder.png"></van-image>
<div class="progress">
<van-circle
v-model:current-rate="item.progress"
@@ -124,8 +122,15 @@
@load="onLoad"
>
<van-grid :gutter="10" :column-num="2">
<van-grid-item v-for="item in finishedJobs">
<div class="job-item">
<van-grid-item v-for="item in finishedJobs" :key="item.id">
<div class="failed" v-if="item.progress === 101">
<div class="title">任务失败</div>
<div class="opt">
<van-button size="small" @click="showErrMsg(item)">详情</van-button>
<van-button type="danger" @click="removeImage($event,item)" size="small">删除</van-button>
</div>
</div>
<div class="job-item" v-else>
<van-image
:src="item['img_url']"
:class="item['can_opt'] ? '' : 'upscale'"
@@ -165,7 +170,7 @@ import {onMounted, onUnmounted, ref} from "vue"
import {Delete} from "@element-plus/icons-vue";
import {httpGet, httpPost} from "@/utils/http";
import Clipboard from "clipboard";
import {checkSession, getSystemInfo} from "@/store/cache";
import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
import {useRouter} from "vue-router";
import {getSessionId} from "@/store/session";
import {
@@ -178,10 +183,10 @@ import {
showToast
} from "vant";
import {showLoginDialog} from "@/utils/libs";
import {useSharedStore} from "@/store/sharedata";
const listBoxHeight = ref(window.innerHeight - 40)
const mjBoxHeight = ref(window.innerHeight - 150)
const item = ref({})
const isLogin = ref(false)
window.onresize = () => {
@@ -203,6 +208,7 @@ const styles = [
{text: "自然", value: "natural"}
]
const params = ref({
client_id: getClientId(),
quality: qualities[0].value,
size: sizes[0].value,
style: styles[0].value,
@@ -223,56 +229,8 @@ const router = useRouter()
const power = ref(0)
const dallPower = ref(0) // 画一张 DALL 图片消耗算力
const socket = ref(null)
const userId = ref(0)
const heartbeatHandle = ref(null)
const connect = () => {
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
// 心跳函数
const sendHeartbeat = () => {
clearTimeout(heartbeatHandle.value)
new Promise((resolve, reject) => {
if (socket.value !== null) {
socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"}))
}
resolve("success")
}).then(() => {
heartbeatHandle.value = setTimeout(() => sendHeartbeat(), 5000)
});
}
const _socket = new WebSocket(host + `/api/dall/client?user_id=${userId.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
// 发送心跳消息
sendHeartbeat()
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
fetchRunningJobs()
finished.value = false
page.value = 1
fetchFinishJobs(page.value)
}
});
_socket.addEventListener('close', () => {
if (socket.value !== null) {
connect()
}
});
}
const store = useSharedStore()
const clipboard = ref(null)
const prompt = ref('')
onMounted(() => {
@@ -290,25 +248,32 @@ onMounted(() => {
}).catch(e => {
showNotify({type: "danger", message: "获取系统配置失败：" + e.message})
})
store.addMessageHandler("dall", (data) => {
if (data.channel !== "dall" || data.clientId !== getClientId()) {
return
}
if (data.body === "FINISH" || data.body === "FAIL") {
page.value = 1
fetchFinishJobs(1)
}
fetchRunningJobs()
})
})
onUnmounted(() => {
clipboard.value.destroy()
if (socket.value !== null) {
socket.value.close()
socket.value = null
}
store.removeMessageHandler("dall")
})
const initData = () => {
checkSession().then(user => {
power.value = user['power']
userId.value = user.id
isLogin.value = true
fetchRunningJobs()
fetchFinishJobs(1)
connect()
}).catch(() => {
loading.value = false
});
@@ -317,20 +282,7 @@ const initData = () => {
const fetchRunningJobs = () => {
// 获取运行中的任务
httpGet(`/api/dall/jobs?finish=0`).then(res => {
const jobs = res.data.items
const _jobs = []
for (let i = 0; i < jobs.length; i++) {
if (jobs[i].progress === -1) {
showNotify({
message: `任务ID：${jobs[i]['task_id']} 原因：${jobs[i]['err_msg']}`,
type: 'danger',
})
power.value += dallPower.value
continue
}
_jobs.push(jobs[i])
}
runningJobs.value = _jobs
runningJobs.value = res.data.items
}).catch(e => {
showNotify({type: "danger", message: "获取任务失败：" + e.message})
})
@@ -349,10 +301,17 @@ const fetchFinishJobs = (page) => {
if (jobs.length < pageSize.value) {
finished.value = true
}
const _jobs = []
for (let i = 0; i < jobs.length; i++) {
if (jobs[i].progress === -1) {
jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?imageView2/1/w/480/h/600/q/75'
}
_jobs.push(jobs[i])
}
if (page === 1) {
finishedJobs.value = jobs
finishedJobs.value = _jobs
} else {
finishedJobs.value = finishedJobs.value.concat(jobs)
finishedJobs.value = finishedJobs.value.concat(_jobs)
}
loading.value = false
}).catch(e => {
@@ -385,6 +344,7 @@ const generate = () => {
httpPost("/api/dall/image", params.value).then(() => {
showSuccessToast("绘画任务推送成功，请耐心等待任务执行...")
power.value -= dallPower.value
fetchRunningJobs()
}).catch(e => {
showFailToast("任务推送失败：" + e.message)
})
@@ -403,6 +363,15 @@ const showPrompt = (item) => {
});
}
const showErrMsg = (item) => {
showDialog({
title: '错误详情',
message: item['err_msg'],
}).then(() => {
// on close
});
}
const removeImage = (event, item) => {
event.stopPropagation()
showConfirmDialog({
@@ -412,6 +381,7 @@ const removeImage = (event, item) => {
}).then(() => {
httpGet("/api/dall/remove", {id: item.id, user_id: item.user_id}).then(() => {
showSuccessToast("任务删除成功")
fetchFinishJobs(1)
}).catch(e => {
showFailToast("任务删除失败：" + e.message)
})
@@ -458,14 +428,6 @@ const sizeConfirm =(item) => {
showSizePicker.value =false
}
const showInfo = (message) => {
showDialog({
title: "参数说明",
message: message,
}).then(() => {
// on close
});
}
</script>
<style lang="stylus">

140
web/src/views/mobile/pages/ImageMj.vue
View File

@@ -180,11 +180,9 @@
description="暂无记录"
/>
<van-grid :gutter="10" :column-num="3" v-else>
<van-grid-item v-for="item in runningJobs">
<van-grid-item v-for="item in runningJobs" :key="item.id">
<div v-if="item.progress > 0">
<van-image :src="item['img_url']">
<template v-slot:error>加载失败</template>
</van-image>
<van-image src="/images/img-holder.png"></van-image>
<div class="progress">
<van-circle
v-model:current-rate="item.progress"
@@ -223,8 +221,15 @@
@load="onLoad"
>
<van-grid :gutter="10" :column-num="2">
<van-grid-item v-for="item in finishedJobs">
<div class="job-item">
<van-grid-item v-for="item in finishedJobs" :key="item.id">
<div class="failed" v-if="item.progress === 101">
<div class="title">任务失败</div>
<div class="opt">
<van-button size="small" @click="showErrMsg(item)">详情</van-button>
<van-button type="danger" @click="removeImage(item)" size="small">删除</van-button>
</div>
</div>
<div class="job-item" v-else>
<van-image
:src="item['thumb_url']"
:class="item['can_opt'] ? '' : 'upscale'"
@@ -234,6 +239,10 @@
<template v-slot:loading>
<van-loading type="spinner" size="20"/>
</template>
<template v-slot:error>
<span style="margin-bottom: 20px">正在下载图片</span>
<van-loading type="circular" color="#1989fa" size="40"/>
</template>
</van-image>
<div class="opt" v-if="item['can_opt']">
@@ -276,15 +285,16 @@
<script setup>
import {nextTick, onMounted, onUnmounted, ref} from "vue";
import {showConfirmDialog, showFailToast, showImagePreview, showNotify, showSuccessToast, showToast} from "vant";
import {showConfirmDialog, showFailToast, showImagePreview, showNotify, showSuccessToast, showToast,showDialog } from "vant";
import {httpGet, httpPost} from "@/utils/http";
import Compressor from "compressorjs";
import {getSessionId} from "@/store/session";
import {checkSession, getSystemInfo} from "@/store/cache";
import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
import {useRouter} from "vue-router";
import {Delete} from "@element-plus/icons-vue";
import {showLoginDialog} from "@/utils/libs";
import Clipboard from "clipboard";
import {useSharedStore} from "@/store/sharedata";
const activeColspan = ref([""])
@@ -306,6 +316,7 @@ const models = [
]
const imgList = ref([])
const params = ref({
client_id: getClientId(),
task_type: "image",
rate: rates[0].value,
model: models[0].value,
@@ -327,11 +338,11 @@ const userId = ref(0)
const router = useRouter()
const runningJobs = ref([])
const finishedJobs = ref([])
const socket = ref(null)
const power = ref(0)
const activeName = ref("txt2img")
const isLogin = ref(false)
const prompt = ref('')
const store = useSharedStore()
const clipboard = ref(null)
onMounted(() => {
@@ -349,19 +360,26 @@ onMounted(() => {
isLogin.value = true
fetchRunningJobs()
fetchFinishJobs(1)
connect()
}).catch(() => {
// router.push('/login')
});
store.addMessageHandler("mj", (data) => {
if (data.channel !== "mj" || data.clientId !== getClientId()) {
return
}
if (data.body === "FINISH" || data.body === "FAIL") {
page.value = 1
fetchFinishJobs(1)
}
fetchRunningJobs()
})
})
onUnmounted(() => {
clipboard.value.destroy()
if (socket.value !== null) {
socket.value.close()
socket.value = null
}
store.removeMessageHandler("mj")
})
const mjPower = ref(1)
@@ -373,60 +391,6 @@ getSystemInfo().then(res => {
showNotify({type: "danger", message: "获取系统配置失败：" + e.message})
})
const heartbeatHandle = ref(null)
const connect = () => {
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
// 心跳函数
const sendHeartbeat = () => {
clearTimeout(heartbeatHandle.value)
new Promise((resolve, reject) => {
if (socket.value !== null) {
socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"}))
}
resolve("success")
}).then(() => {
heartbeatHandle.value = setTimeout(() => sendHeartbeat(), 5000)
});
}
const _socket = new WebSocket(host + `/api/mj/client?user_id=${userId.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
// 发送心跳消息
sendHeartbeat()
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(event.data, "UTF-8")
reader.onload = () => {
const message = String(reader.result)
if (message === "FINISH" || message === "FAIL") {
page.value = 1
fetchFinishJobs(1)
}
fetchRunningJobs()
}
}
});
_socket.addEventListener('close', () => {
if (socket.value !== null) {
connect()
}
});
}
// 获取运行中的任务
const fetchRunningJobs = (userId) => {
httpGet(`/api/mj/jobs?finish=0&user_id=${userId}`).then(res => {
@@ -464,27 +428,10 @@ const fetchFinishJobs = (page) => {
httpGet(`/api/mj/jobs?finish=1&page=${page}&page_size=${pageSize.value}`).then(res => {
const jobs = res.data.items
for (let i = 0; i < jobs.length; i++) {
if (jobs[i].progress === 101) {
showNotify({
message: `任务ID：${jobs[i]['task_id']} 原因：${jobs[i]['err_msg']}`,
type: 'danger',
})
if (jobs[i].type === 'image') {
power.value += mjPower.value
} else {
power.value += mjActionPower.value
}
continue
}
if (jobs[i]['use_proxy']) {
jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?x-oss-process=image/quality,q_60&format=webp'
if (jobs[i].type === 'upscale' || jobs[i].type === 'swapFace') {
jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?imageView2/1/w/480/h/600/q/75'
} else {
if (jobs[i].type === 'upscale' || jobs[i].type === 'swapFace') {
jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?imageView2/1/w/480/h/600/q/75'
} else {
jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?imageView2/1/w/480/h/480/q/75'
}
jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?imageView2/1/w/480/h/480/q/75'
}
if ((jobs[i].type === 'image' || jobs[i].type === 'variation') && jobs[i].progress === 100){
@@ -557,6 +504,7 @@ const uploadImg = (file) => {
const send = (url, index, item) => {
httpPost(url, {
client_id: getClientId(),
index: index,
channel_id: item.channel_id,
message_id: item.message_id,
@@ -566,6 +514,7 @@ const send = (url, index, item) => {
}).then(() => {
showSuccessToast("任务推送成功，请耐心等待任务执行...")
power.value -= mjActionPower.value
fetchRunningJobs()
}).catch(e => {
showFailToast("任务推送失败：" + e.message)
})
@@ -597,6 +546,7 @@ const generate = () => {
httpPost("/api/mj/image", params.value).then(() => {
showToast("绘画任务推送成功，请耐心等待任务执行")
power.value -= mjPower.value
fetchRunningJobs()
}).catch(e => {
showFailToast("任务推送失败：" + e.message)
})
@@ -604,12 +554,13 @@ const generate = () => {
const removeImage = (item) => {
showConfirmDialog({
title: '标题',
title: '删除提示',
message:
'此操作将会删除任务和图片，继续操作码?',
}).then(() => {
httpGet("/api/mj/remove", {id: item.id, user_id: item.user_id}).then(() => {
showSuccessToast("任务删除成功")
fetchFinishJobs(1)
}).catch(e => {
showFailToast("任务删除失败：" + e.message)
})
@@ -644,6 +595,15 @@ const showPrompt = (item) => {
});
}
const showErrMsg = (item) => {
showDialog({
title: '错误详情',
message: item['err_msg'],
}).then(() => {
// on close
});
}
const imageView = (item) => {
showImagePreview([item['img_url']]);
}

112
web/src/views/mobile/pages/ImageSd.vue
View File

@@ -133,11 +133,9 @@
description="暂无记录"
/>
<van-grid :gutter="10" :column-num="3" v-else>
<van-grid-item v-for="item in runningJobs">
<van-grid-item v-for="item in runningJobs" :key="item.id">
<div v-if="item.progress > 0">
<van-image :src="item['img_url']">
<template v-slot:error>加载失败</template>
</van-image>
<van-image src="/images/img-holder.png"></van-image>
<div class="progress">
<van-circle
v-model:current-rate="item.progress"
@@ -176,8 +174,15 @@
@load="onLoad"
>
<van-grid :gutter="10" :column-num="2">
<van-grid-item v-for="item in finishedJobs">
<div class="job-item">
<van-grid-item v-for="item in finishedJobs" :key="item.id">
<div class="failed" v-if="item.progress === 101">
<div class="title">任务失败</div>
<div class="opt">
<van-button size="small" @click="showErrMsg(item)">详情</van-button>
<van-button type="danger" @click="removeImage($event,item)" size="small">删除</van-button>
</div>
</div>
<div class="job-item" v-else>
<van-image
:src="item['img_url']"
:class="item['can_opt'] ? '' : 'upscale'"
@@ -217,7 +222,7 @@ import {onMounted, onUnmounted, ref} from "vue"
import {Delete} from "@element-plus/icons-vue";
import {httpGet, httpPost} from "@/utils/http";
import Clipboard from "clipboard";
import {checkSession, getSystemInfo} from "@/store/cache";
import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
import {useRouter} from "vue-router";
import {getSessionId} from "@/store/session";
import {
@@ -230,10 +235,10 @@ import {
showToast
} from "vant";
import {showLoginDialog} from "@/utils/libs";
import {useSharedStore} from "@/store/sharedata";
const listBoxHeight = ref(window.innerHeight - 40)
const mjBoxHeight = ref(window.innerHeight - 150)
const item = ref({})
const isLogin = ref(false)
const activeColspan = ref([""])
@@ -261,6 +266,7 @@ const upscaleAlgArr = ref([
const showUpscalePicker = ref(false)
const params = ref({
client_id: getClientId(),
width: 1024,
height: 1024,
sampler: samplers.value[0].value,
@@ -287,56 +293,8 @@ if (_params) {
const power = ref(0)
const sdPower = ref(0) // 画一张 SD 图片消耗算力
const socket = ref(null)
const userId = ref(0)
const heartbeatHandle = ref(null)
const connect = () => {
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
// 心跳函数
const sendHeartbeat = () => {
clearTimeout(heartbeatHandle.value)
new Promise((resolve, reject) => {
if (socket.value !== null) {
socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"}))
}
resolve("success")
}).then(() => {
heartbeatHandle.value = setTimeout(() => sendHeartbeat(), 5000)
});
}
const _socket = new WebSocket(host + `/api/sd/client?user_id=${userId.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
// 发送心跳消息
sendHeartbeat()
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
fetchRunningJobs()
finished.value = false
page.value = 1
fetchFinishJobs(page.value)
}
});
_socket.addEventListener('close', () => {
if (socket.value !== null) {
connect()
}
});
}
const store = useSharedStore()
const clipboard = ref(null)
const prompt = ref('')
onMounted(() => {
@@ -355,14 +313,23 @@ onMounted(() => {
}).catch(e => {
showNotify({type: "danger", message: "获取系统配置失败：" + e.message})
})
store.addMessageHandler("sd", (data) => {
if (data.channel !== "sd" || data.clientId !== getClientId()) {
return
}
if (data.body === "FINISH" || data.body === "FAIL") {
page.value = 1
fetchFinishJobs(1)
}
fetchRunningJobs()
})
})
onUnmounted(() => {
clipboard.value.destroy()
if (socket.value !== null) {
socket.value.close()
socket.value = null
}
store.removeMessageHandler("sd")
})
@@ -373,7 +340,6 @@ const initData = () => {
isLogin.value = true
fetchRunningJobs()
fetchFinishJobs(1)
connect()
}).catch(() => {
loading.value = false
});
@@ -414,10 +380,17 @@ const fetchFinishJobs = (page) => {
if (jobs.length < pageSize.value) {
finished.value = true
}
const _jobs = []
for (let i = 0; i < jobs.length; i++) {
if (jobs[i].progress === -1) {
jobs[i]['thumb_url'] = jobs[i]['img_url'] + '?imageView2/1/w/480/h/600/q/75'
}
_jobs.push(jobs[i])
}
if (page === 1) {
finishedJobs.value = jobs
finishedJobs.value = _jobs
} else {
finishedJobs.value = finishedJobs.value.concat(jobs)
finishedJobs.value = finishedJobs.value.concat(_jobs)
}
loading.value = false
}).catch(e => {
@@ -450,6 +423,7 @@ const generate = () => {
httpPost("/api/sd/image", params.value).then(() => {
showSuccessToast("绘画任务推送成功，请耐心等待任务执行...")
power.value -= sdPower.value
fetchRunningJobs()
}).catch(e => {
showFailToast("任务推送失败：" + e.message)
})
@@ -468,6 +442,15 @@ const showPrompt = (item) => {
});
}
const showErrMsg = (item) => {
showDialog({
title: '错误详情',
message: item['err_msg'],
}).then(() => {
// on close
});
}
const removeImage = (event, item) => {
event.stopPropagation()
showConfirmDialog({
@@ -477,6 +460,7 @@ const removeImage = (event, item) => {
}).then(() => {
httpGet("/api/sd/remove", {id: item.id, user_id: item.user}).then(() => {
showSuccessToast("任务删除成功")
fetchFinishJobs(1)
}).catch(e => {
showFailToast("任务删除失败：" + e.message)
})