mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-09 18:53:43 +08:00
Merge branch 'main' into husm_2024-09-02
This commit is contained in:
胡双明
@@ -49,8 +49,9 @@
|
||||
|
||||
.btn-swap {
|
||||
margin-right 10px
|
||||
.icon{
|
||||
fill #fff
|
||||
.icon-exchange{
|
||||
color #ffffff
|
||||
cursor pointer
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -135,12 +136,14 @@
|
||||
}
|
||||
|
||||
.list-box {
|
||||
padding 0 0 0 20px
|
||||
padding 0
|
||||
.item {
|
||||
display flex
|
||||
flex-flow row
|
||||
align-items center
|
||||
padding 5px 0
|
||||
height 100px
|
||||
padding 10px 15px
|
||||
border-radius 10px
|
||||
cursor pointer
|
||||
margin-bottom 10px
|
||||
|
||||
@@ -210,45 +213,28 @@
|
||||
flex-flow column
|
||||
padding 0 20px
|
||||
|
||||
.title {
|
||||
.prompt,.failed {
|
||||
padding 6px 0
|
||||
font-size 16px
|
||||
font-weight 700
|
||||
color rgb(250 247 245)
|
||||
a {
|
||||
color rgb(250 247 245)
|
||||
&:hover {
|
||||
text-decoration underline
|
||||
}
|
||||
}
|
||||
|
||||
.model {
|
||||
color #E2E8F0
|
||||
background-color #1C1616
|
||||
border 1px solid #8f8f8f
|
||||
font-weight normal
|
||||
font-size 14px
|
||||
padding 1px 3px
|
||||
border-radius 5px
|
||||
margin-left 10px
|
||||
|
||||
.iconfont {
|
||||
font-size 12px
|
||||
}
|
||||
}
|
||||
max-height 80px
|
||||
line-height 28px
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
}
|
||||
|
||||
.tags {
|
||||
font-size 14px
|
||||
color #d1d1d1
|
||||
padding 3px 0
|
||||
.prompt {
|
||||
color rgb(250 247 245)
|
||||
}
|
||||
.failed {
|
||||
color #E4696B
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display flex
|
||||
justify-content right
|
||||
min-width 200px;
|
||||
font-size 14px
|
||||
padding 0 15px
|
||||
padding 0
|
||||
|
||||
.tools {
|
||||
display flex
|
||||
@@ -262,6 +248,7 @@
|
||||
|
||||
.text {
|
||||
margin-right 10px
|
||||
color #e1e1e1
|
||||
}
|
||||
}
|
||||
|
||||
@@ -272,52 +259,18 @@
|
||||
color #726E6C
|
||||
|
||||
&:hover {
|
||||
background #3C3737
|
||||
background #5f5958
|
||||
color #e1e1e1
|
||||
}
|
||||
|
||||
.downloading {
|
||||
width 16px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.task {
|
||||
height 100px
|
||||
background-color #2A2525
|
||||
display flex
|
||||
align-items center
|
||||
margin-bottom 10px
|
||||
.left {
|
||||
display flex
|
||||
justify-content left
|
||||
align-items center
|
||||
padding 20px
|
||||
width 320px
|
||||
.title {
|
||||
font-size 14px
|
||||
color #e1e1e1
|
||||
white-space: nowrap; /* 防止文字换行 */
|
||||
overflow: hidden; /* 隐藏溢出的内容 */
|
||||
text-overflow: ellipsis; /* 用省略号表示溢出的内容 */
|
||||
}
|
||||
}
|
||||
.center {
|
||||
display flex
|
||||
width 100%
|
||||
justify-content center
|
||||
.failed {
|
||||
display flex
|
||||
align-items center
|
||||
color #E4696B
|
||||
font-size 14px
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display flex
|
||||
width 100px
|
||||
justify-content center
|
||||
align-items center
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
@@ -326,67 +279,67 @@
|
||||
justify-content center
|
||||
}
|
||||
|
||||
.videos {
|
||||
.item {
|
||||
margin-bottom 20px
|
||||
|
||||
.video-box {
|
||||
width 100%
|
||||
aspect-ratio: 16/9;
|
||||
border-radius 10px
|
||||
video,img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius 10px
|
||||
cursor pointer
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.video-name {
|
||||
color #e1e1e1
|
||||
font-size 16px
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
padding 6px 0
|
||||
text-align center
|
||||
}
|
||||
|
||||
.opts {
|
||||
display flex
|
||||
justify-content center
|
||||
.btn {
|
||||
margin-right 10px
|
||||
background-color hsla(0,0%,100%,.15)
|
||||
border none
|
||||
border-radius 20px
|
||||
padding 3px 15px
|
||||
cursor pointer
|
||||
color #ffffff
|
||||
font-size 14px
|
||||
|
||||
.iconfont {
|
||||
font-size 11px
|
||||
position relative
|
||||
margin-right 5px
|
||||
top -2px
|
||||
}
|
||||
|
||||
.el-image {
|
||||
width 14px
|
||||
height 14px
|
||||
margin-right 5px
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color hsla(0,0%,100%,.2)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//.videos {
|
||||
// .item {
|
||||
// margin-bottom 20px
|
||||
//
|
||||
// .video-box {
|
||||
// width 100%
|
||||
// aspect-ratio: 16/9;
|
||||
// border-radius 10px
|
||||
// video,img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// object-fit: cover;
|
||||
// border-radius 10px
|
||||
// cursor pointer
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//
|
||||
// .video-name {
|
||||
// color #e1e1e1
|
||||
// font-size 16px
|
||||
// white-space nowrap
|
||||
// overflow hidden
|
||||
// text-overflow ellipsis
|
||||
// padding 6px 0
|
||||
// text-align center
|
||||
// }
|
||||
//
|
||||
// .opts {
|
||||
// display flex
|
||||
// justify-content center
|
||||
// .btn {
|
||||
// margin-right 10px
|
||||
// background-color hsla(0,0%,100%,.15)
|
||||
// border none
|
||||
// border-radius 20px
|
||||
// padding 3px 15px
|
||||
// cursor pointer
|
||||
// color #ffffff
|
||||
// font-size 14px
|
||||
//
|
||||
// .iconfont {
|
||||
// font-size 11px
|
||||
// position relative
|
||||
// margin-right 5px
|
||||
// top -2px
|
||||
// }
|
||||
//
|
||||
// .el-image {
|
||||
// width 14px
|
||||
// height 14px
|
||||
// margin-right 5px
|
||||
// }
|
||||
//
|
||||
// &:hover {
|
||||
// background-color hsla(0,0%,100%,.2)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
||||
@@ -303,7 +303,12 @@
|
||||
color #726E6C
|
||||
|
||||
&:hover {
|
||||
background #3C3737
|
||||
background #5f5958
|
||||
color #e1e1e1
|
||||
}
|
||||
|
||||
.downloading {
|
||||
width 16px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4125778 */
|
||||
src: url('iconfont.woff2?t=1725000514997') format('woff2'),
|
||||
url('iconfont.woff?t=1725000514997') format('woff'),
|
||||
url('iconfont.ttf?t=1725000514997') format('truetype');
|
||||
src: url('iconfont.woff2?t=1725929120246') format('woff2'),
|
||||
url('iconfont.woff?t=1725929120246') format('woff'),
|
||||
url('iconfont.ttf?t=1725929120246') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@@ -13,6 +13,14 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-luma:before {
|
||||
content: "\e704";
|
||||
}
|
||||
|
||||
.icon-exchange:before {
|
||||
content: "\e6f5";
|
||||
}
|
||||
|
||||
.icon-merge:before {
|
||||
content: "\e901";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -5,6 +5,20 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "41645421",
|
||||
"name": "luma-logo",
|
||||
"font_class": "luma",
|
||||
"unicode": "e704",
|
||||
"unicode_decimal": 59140
|
||||
},
|
||||
{
|
||||
"icon_id": "7573248",
|
||||
"name": "exchange",
|
||||
"font_class": "exchange",
|
||||
"unicode": "e6f5",
|
||||
"unicode_decimal": 59125
|
||||
},
|
||||
{
|
||||
"icon_id": "8094809",
|
||||
"name": "merge-cells",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -13,11 +13,21 @@
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<div class="text">
|
||||
<slot>正在生成歌曲</slot>
|
||||
<slot>{{message}}</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// eslint-disable-next-line
|
||||
defineProps({
|
||||
message: {
|
||||
type: String,
|
||||
default: '任务正在执行',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus">
|
||||
.container {
|
||||
display: flex;
|
||||
|
||||
@@ -240,7 +240,7 @@ const routes = [
|
||||
{
|
||||
name: 'mobile',
|
||||
path: '/mobile',
|
||||
meta: {title: 'Geek-AI v4.0'},
|
||||
meta: {title: '首页'},
|
||||
component: () => import('@/views/mobile/Home.vue'),
|
||||
redirect: '/mobile/index',
|
||||
children: [
|
||||
|
||||
@@ -9,6 +9,8 @@
|
||||
* Util lib functions
|
||||
*/
|
||||
import {showConfirmDialog} from "vant";
|
||||
import {httpDownload} from "@/utils/http";
|
||||
import {showMessageError} from "@/utils/dialog";
|
||||
|
||||
// generate a random string
|
||||
export function randString(length) {
|
||||
@@ -221,10 +223,10 @@ export function showLoginDialog(router) {
|
||||
}
|
||||
|
||||
export const replaceImg =(img) => {
|
||||
const devhost = "172.22.11.69"
|
||||
const localhost = "localhost"
|
||||
const devHost = process.env.VUE_APP_API_HOST
|
||||
const localhost = "http://localhost:5678"
|
||||
if (img.includes(localhost)) {
|
||||
return img?.replace(localhost, devhost)
|
||||
return img?.replace(localhost, devHost)
|
||||
}
|
||||
return img
|
||||
}
|
||||
|
||||
@@ -272,10 +272,22 @@ const tools = ref([])
|
||||
const toolSelected = ref([])
|
||||
const loadHistory = ref(false)
|
||||
|
||||
// 初始化角色ID参数
|
||||
if (router.currentRoute.value.query.role_id) {
|
||||
roleId.value = parseInt(router.currentRoute.value.query.role_id)
|
||||
}
|
||||
|
||||
// 初始化 ChatID
|
||||
chatId.value = router.currentRoute.value.params.id
|
||||
if (!chatId.value) {
|
||||
chatId.value = UUID()
|
||||
}else { // 查询对话信息
|
||||
httpGet("/api/chat/detail", {chat_id: chatId.value}).then(res => {
|
||||
roleId.value = res.data.role_id
|
||||
modelID.value = res.data.model_id
|
||||
}).catch(e => {
|
||||
console.error("获取对话信息失败："+e.message)
|
||||
})
|
||||
}
|
||||
|
||||
if (isMobile()) {
|
||||
@@ -344,59 +356,46 @@ onUnmounted(() => {
|
||||
|
||||
// 初始化数据
|
||||
const initData = () => {
|
||||
// 检查会话
|
||||
checkSession().then((user) => {
|
||||
loginUser.value = user
|
||||
isLogin.value = true
|
||||
|
||||
// 获取会话列表
|
||||
httpGet("/api/chat/list").then((res) => {
|
||||
if (res.data) {
|
||||
chatList.value = res.data;
|
||||
allChats.value = res.data;
|
||||
}
|
||||
if (router.currentRoute.value.query.role_id) {
|
||||
roleId.value = parseInt(router.currentRoute.value.query.role_id)
|
||||
}
|
||||
// 加载模型
|
||||
httpGet('/api/model/list').then(res => {
|
||||
models.value = res.data
|
||||
modelID.value = models.value[0].id
|
||||
// 加载角色列表
|
||||
httpGet(`/api/role/list`,{id:roleId.value}).then((res) => {
|
||||
roles.value = res.data;
|
||||
if (!roleId.value) {
|
||||
roleId.value = roles.value[0]['id']
|
||||
}
|
||||
|
||||
newChat();
|
||||
}).catch((e) => {
|
||||
ElMessage.error('获取聊天角色失败: ' + e.messages)
|
||||
})
|
||||
}).catch(e => {
|
||||
ElMessage.error("加载模型失败: " + e.message)
|
||||
})
|
||||
}).catch(() => {
|
||||
ElMessage.error("加载会话列表失败！")
|
||||
})
|
||||
}).catch(() => {
|
||||
// 加载模型
|
||||
httpGet('/api/model/list',{id:roleId.value}).then(res => {
|
||||
models.value = res.data
|
||||
// 加载模型
|
||||
httpGet('/api/model/list').then(res => {
|
||||
models.value = res.data
|
||||
if (!modelID.value) {
|
||||
modelID.value = models.value[0].id
|
||||
}).catch(e => {
|
||||
ElMessage.error("加载模型失败: " + e.message)
|
||||
})
|
||||
|
||||
}
|
||||
// 加载角色列表
|
||||
httpGet(`/api/role/list`).then((res) => {
|
||||
httpGet(`/api/role/list`,{id:roleId.value}).then((res) => {
|
||||
roles.value = res.data;
|
||||
roleId.value = roles.value[0]['id'];
|
||||
if (!roleId.value) {
|
||||
roleId.value = roles.value[0]['id']
|
||||
}
|
||||
|
||||
// 如果登录状态就创建对话连接
|
||||
checkSession().then((user) => {
|
||||
loginUser.value = user
|
||||
isLogin.value = true
|
||||
|
||||
newChat();
|
||||
})
|
||||
|
||||
}).catch((e) => {
|
||||
ElMessage.error('获取聊天角色失败: ' + e.messages)
|
||||
})
|
||||
}).catch(e => {
|
||||
ElMessage.error("加载模型失败: " + e.message)
|
||||
})
|
||||
|
||||
// 获取会话列表
|
||||
httpGet("/api/chat/list").then((res) => {
|
||||
if (res.data) {
|
||||
chatList.value = res.data;
|
||||
allChats.value = res.data;
|
||||
}
|
||||
}).catch(() => {
|
||||
ElMessage.error("加载会话列表失败！")
|
||||
})
|
||||
|
||||
// 允许在输入框粘贴文件
|
||||
inputRef.value.addEventListener('paste', (event) => {
|
||||
const items = (event.clipboardData || window.clipboardData).items;
|
||||
let fileFound = false;
|
||||
@@ -750,12 +749,16 @@ const sendMessage = function () {
|
||||
}
|
||||
|
||||
if (prompt.value.trim().length === 0 || canSend.value === false) {
|
||||
showMessageError("请输入要发送的消息！")
|
||||
return false;
|
||||
}
|
||||
// 如果携带了文件，则串上文件地址
|
||||
let content = prompt.value
|
||||
if (files.value.length > 0) {
|
||||
if (files.value.length === 1) {
|
||||
content += files.value.map(file => file.url).join(" ")
|
||||
} else if (files.value.length > 1) {
|
||||
showMessageError("当前只支持一个文件！")
|
||||
return false
|
||||
}
|
||||
// 追加消息
|
||||
chatData.value.push({
|
||||
|
||||
@@ -124,6 +124,7 @@ const iconMap =ref(
|
||||
"/apps": "icon-app",
|
||||
"/member": "icon-vip-user",
|
||||
"/invite": "icon-share",
|
||||
"/luma": "icon-luma",
|
||||
}
|
||||
)
|
||||
const bgStyle = {}
|
||||
|
||||
@@ -7,10 +7,8 @@
|
||||
<el-image :src="replaceImg(img)" fit="cover"/>
|
||||
<el-icon @click="remove(img)"><CircleCloseFilled /></el-icon>
|
||||
</div>
|
||||
<div class="btn-swap" v-if="images.length == 2 && index == 0">
|
||||
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" @click="switchReverse">
|
||||
<path d="M96 416h832c0.32 0 0.576-0.192 0.896-0.192a30.656 30.656 0 0 0 30.976-30.976c-0.064-0.256 0.128-0.512 0.128-0.832a31.424 31.424 0 0 0-14.912-26.368l-188.48-188.48a30.72 30.72 0 1 0-43.456 43.456L852.544 352H96a32 32 0 0 0 0 64z m832 192H96c-0.32 0-0.576 0.192-0.896 0.192a30.528 30.528 0 0 0-30.976 30.976c0.064 0.256-0.128 0.512-0.128 0.832 0 11.264 6.144 20.672 14.912 26.368l188.48 188.48a30.72 30.72 0 1 0 43.456-43.456L171.456 672H928a32 32 0 0 0 0-64z"></path>
|
||||
</svg>
|
||||
<div class="btn-swap" v-if="images.length === 2 && index === 0">
|
||||
<i class="iconfont icon-exchange" @click="switchReverse"></i>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -57,45 +55,48 @@
|
||||
<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">
|
||||
<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> -->
|
||||
<!-- <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" v-if="item.progress === 100">
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<div class="container">
|
||||
<video class="video" :src="replaceImg(item.video_url)" preload="auto" loop="loop" muted="muted">
|
||||
您的浏览器不支持视频播放
|
||||
</video>
|
||||
<!-- <el-image :src="item.cover_url" fit="cover" /> -->
|
||||
<!-- <div class="duration">{{formatTime(item.duration)}}</div> -->
|
||||
<button class="play" @click="play(item)">
|
||||
<img src="/images/play.svg" alt=""/>
|
||||
</button>
|
||||
<div v-if="item.progress === 100">
|
||||
<video class="video" :src="replaceImg(item.video_url)" preload="auto" loop="loop" muted="muted">
|
||||
您的浏览器不支持视频播放
|
||||
</video>
|
||||
<button class="play" @click="play(item)">
|
||||
<img src="/images/play.svg" alt=""/>
|
||||
</button>
|
||||
</div>
|
||||
<el-image :src="item.cover_url" fit="cover" v-else-if="item.progress > 100" />
|
||||
<generating message="正在生成视频" v-else />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="title">{{item.prompt}}</div>
|
||||
<div class="tags" v-if="item.prompt_ext">{{item.prompt_ext}}</div>
|
||||
<div class="failed" v-if="item.progress === 101">任务执行失败：{{item.err_msg}}，任务提示词：{{item.prompt}}</div>
|
||||
<div class="prompt" v-else>{{item.prompt}}</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right" v-if="item.progress === 100">
|
||||
<div class="tools">
|
||||
<button class="btn btn-publish">
|
||||
<span class="text">发布</span>
|
||||
@@ -105,7 +106,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">
|
||||
@@ -115,32 +116,15 @@
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task" v-else>
|
||||
<div style="width: 160px; height: 90px; flex-shrink: 0; display: flex; align-items: center;" v-if="item.params.start_img_url">
|
||||
<el-image style="width: 100%; height: 100%; border-radius: 5px;" :src="replaceImg(item.params.start_img_url)" fit="cover" />
|
||||
</div>
|
||||
<div class="left">
|
||||
<div class="title">
|
||||
<span v-if="item.title">{{item.title}}</span>
|
||||
<span v-else>{{item.prompt}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="failed" v-if="item.progress === 101">
|
||||
{{item.err_msg}}
|
||||
</div>
|
||||
<generating v-else>正在生成视频</generating>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button type="info" @click="removeJob(item)" circle>
|
||||
<div class="right-error" v-else>
|
||||
<el-button type="danger" @click="removeJob(item)" circle>
|
||||
<i class="iconfont icon-remove"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty :image-size="100" description="没有任何作品，赶紧去创作吧！" v-else/>
|
||||
<el-empty :image-size="100" description="没有任何作品，赶紧去创作吧！" v-else />
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination v-if="total > pageSize" background
|
||||
@@ -170,10 +154,9 @@ import {onMounted, reactive, ref} from "vue";
|
||||
import {CircleCloseFilled} from "@element-plus/icons-vue";
|
||||
import {httpDownload, httpPost, httpGet} from "@/utils/http";
|
||||
import {checkSession} from "@/store/cache";
|
||||
import {showMessageError} from "@/utils/dialog";
|
||||
import {showMessageError, showMessageOK} from "@/utils/dialog";
|
||||
import { replaceImg } from "@/utils/libs"
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import Clipboard from "clipboard";
|
||||
import BlackSwitch from "@/components/ui/BlackSwitch.vue";
|
||||
import Generating from "@/components/ui/Generating.vue";
|
||||
import BlackDialog from "@/components/ui/BlackDialog.vue";
|
||||
@@ -185,50 +168,12 @@ const images = ref([])
|
||||
|
||||
const formData = reactive({
|
||||
prompt: '',
|
||||
expand_prompt: true,
|
||||
loop: true,
|
||||
expand_prompt: false,
|
||||
loop: false,
|
||||
first_frame_img: '',
|
||||
end_frame_img: ''
|
||||
})
|
||||
|
||||
const videos = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 'a dancing girl',
|
||||
url: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/watermarked_video01944f69966f14d33b6c4486a8cfb8dde.mp4',
|
||||
cover: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/video_0_thumb.jpg',
|
||||
playing: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 'a dancing girl a dancing girl a dancing girl a dancing girl a dancing girl',
|
||||
url: 'https://storage.cdn-luma.com/dream_machine/92efa55a-f381-4161-a999-54f8fe460fca/watermarked_video0e5aad607a0644c66850d1d77022db847.mp4',
|
||||
cover: 'https://storage.cdn-luma.com/dream_machine/92efa55a-f381-4161-a999-54f8fe460fca/video_1_thumb.jpg',
|
||||
playing: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 'a dancing girl',
|
||||
url: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/watermarked_video01944f69966f14d33b6c4486a8cfb8dde.mp4',
|
||||
cover: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/video_0_thumb.jpg',
|
||||
playing: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 'a dancing girl',
|
||||
url: 'https://storage.cdn-luma.com/dream_machine/92efa55a-f381-4161-a999-54f8fe460fca/watermarked_video0e5aad607a0644c66850d1d77022db847.mp4',
|
||||
cover: 'https://storage.cdn-luma.com/dream_machine/92efa55a-f381-4161-a999-54f8fe460fca/video_1_thumb.jpg',
|
||||
playing: false
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 'a dancing girl',
|
||||
url: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/watermarked_video01944f69966f14d33b6c4486a8cfb8dde.mp4',
|
||||
cover: 'https://storage.cdn-luma.com/dream_machine/d133794f-3124-4059-a9f2-e5fed79f0d5b/video_0_thumb.jpg',
|
||||
playing: false
|
||||
},
|
||||
])
|
||||
|
||||
const socket = ref(null)
|
||||
const userId = ref(0)
|
||||
const connect = () => {
|
||||
@@ -361,20 +306,12 @@ const fetchData = (_page) => {
|
||||
}
|
||||
httpGet("/api/video/list",{page:page.value, page_size:pageSize.value, type: 'luma'}).then(res => {
|
||||
total.value = res.data.total
|
||||
const items = []
|
||||
for (let v of res.data.items) {
|
||||
if (v.progress === 100) {
|
||||
//v.major_model_version = v['raw_data']['major_model_version']
|
||||
}
|
||||
items.push(v)
|
||||
}
|
||||
loading.value = false
|
||||
list.value = items
|
||||
list.value = res.data.items
|
||||
noData.value = list.value.length === 0
|
||||
}).catch(e => {
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
noData.value = true
|
||||
showMessageError("获取作品列表失败："+e.message)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -384,7 +321,7 @@ const create = () => {
|
||||
const len = images.value.length;
|
||||
if(len){
|
||||
formData.first_frame_img = images.value[0]
|
||||
if(len == 2){
|
||||
if(len === 2){
|
||||
formData.end_frame_img = images.value[1]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
@@ -234,7 +233,7 @@
|
||||
<div class="failed" v-if="item.progress === 101">
|
||||
{{item.err_msg}}
|
||||
</div>
|
||||
<generating v-else />
|
||||
<generating v-else message="正在生成歌曲" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button type="info" @click="removeJob(item)" circle>
|
||||
@@ -299,11 +298,11 @@ 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 {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";
|
||||
@@ -483,6 +482,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);
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<div class="handle-box">
|
||||
<el-input v-model="query.username" placeholder="账号" class="handle-input mr10"></el-input>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
|
||||
|
||||
<el-button type="success" :icon="Plus" @click="addUser">新增用户</el-button>
|
||||
<el-button type="danger" :icon="Delete" @click="multipleDelete">删除</el-button>
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
@@ -170,8 +170,8 @@
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {dateFormat, disabledDate, removeArrayItem} from "@/utils/libs";
|
||||
import {Plus, Search} from "@element-plus/icons-vue";
|
||||
import {dateFormat, disabledDate} from "@/utils/libs";
|
||||
import {Delete, Plus, Search} from "@element-plus/icons-vue";
|
||||
|
||||
// 变量定义
|
||||
const users = ref({page: 1, page_size: 15, items: []})
|
||||
@@ -281,7 +281,7 @@ const userEdit = function (row) {
|
||||
}
|
||||
|
||||
const addUser = () => {
|
||||
user.value = {}
|
||||
user.value = {chat_id: 0, chat_roles: [], chat_models: []}
|
||||
title.value = '添加用户'
|
||||
showUserEditDialog.value = true
|
||||
add.value = true
|
||||
@@ -306,8 +306,36 @@ const saveUser = function () {
|
||||
})
|
||||
}
|
||||
|
||||
const userIds = ref([])
|
||||
const handleSelectionChange = function (rows) {
|
||||
// console.log(rows)
|
||||
userIds.value = []
|
||||
rows.forEach((row) => {
|
||||
userIds.value.push(row.id)
|
||||
})
|
||||
}
|
||||
|
||||
const multipleDelete = function () {
|
||||
ElMessageBox.confirm(
|
||||
'此操作将会永久删除用户信息和聊天记录，确认操作吗?',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
loading.value = true
|
||||
httpGet('/api/admin/user/remove', {ids: userIds.value}).then(() => {
|
||||
ElMessage.success('操作成功！')
|
||||
fetchUserList(users.value.page, users.value.page_size)
|
||||
loading.value = false
|
||||
}).catch((e) => {
|
||||
ElMessage.error('操作失败，' + e.message)
|
||||
loading.value = false
|
||||
})
|
||||
}).catch(() => {
|
||||
ElMessage.info('操作被取消')
|
||||
})
|
||||
}
|
||||
|
||||
const resetPass = (row) => {
|
||||
|
||||
Reference in New Issue
Block a user