mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-09 18:53:43 +08:00
merge v4.1.3
This commit is contained in:
RockYang
@@ -6,6 +6,8 @@
|
||||
|
||||
<script setup>
|
||||
import {ElConfigProvider} from 'element-plus';
|
||||
import {onMounted} from "vue";
|
||||
import {getSystemInfo} from "@/store/cache";
|
||||
|
||||
const debounce = (fn, delay) => {
|
||||
let timer
|
||||
@@ -26,6 +28,15 @@ window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
|
||||
super(callback);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getSystemInfo().then((res) => {
|
||||
const link = document.createElement('link')
|
||||
link.rel = 'shortcut icon'
|
||||
link.href = res.data.logo
|
||||
document.head.appendChild(link)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -1,378 +0,0 @@
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app .chat-page {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside {
|
||||
background-color: #252526;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .title-box {
|
||||
padding: 6px 10px;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .title-box span {
|
||||
padding-top: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
background-color: #28292a;
|
||||
border-top: 1px solid #2f3032;
|
||||
border-right: 1px solid #2f3032;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list .search-box {
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list .search-box .el-input__wrapper {
|
||||
background-color: #363535;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list .content {
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list .content .chat-list-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list .content .chat-list-item:hover {
|
||||
background-color: #343540;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list .content .chat-list-item .avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list .content .chat-list-item .chat-title-input {
|
||||
font-size: 14px;
|
||||
margin-top: 4px;
|
||||
margin-left: 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list .content .chat-list-item .chat-title {
|
||||
color: #c1c1c1;
|
||||
padding: 5px 10px;
|
||||
max-width: 220px;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list .content .chat-list-item .btn {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list .content .chat-list-item .btn .el-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list .content .chat-list-item.active {
|
||||
background-color: #343540;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .chat-list .content .chat-list-item.active .btn {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .tool-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 0 20px 10px 20px;
|
||||
border-top: 1px solid #3c3c3c;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .tool-box .user-info {
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .tool-box .user-info .el-dropdown-link {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .tool-box .user-info .el-dropdown-link .el-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .tool-box .user-info .el-dropdown-link .username {
|
||||
display: flex;
|
||||
line-height: 22px;
|
||||
width: 230px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-aside .tool-box .user-info .el-dropdown-link .el-icon {
|
||||
color: #ccc;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main {
|
||||
overflow: hidden;
|
||||
--el-main-padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-head {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #28292a;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-head .chat-config {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-head .chat-config .role-select-label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-head .chat-config .el-select {
|
||||
max-width: 150px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-head .chat-config .role-select {
|
||||
max-width: 130px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-head .chat-config .el-button .el-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-head .iconfont {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-head .is-circle {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-head .is-circle .iconfont {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-left: 1px solid #4f4f4f;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container .chat-box {
|
||||
overflow-y: scroll;
|
||||
--content-font-size: 16px;
|
||||
--content-color: #c1c1c1;
|
||||
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container .chat-box .chat-line {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container .re-generate {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container .re-generate .btn-box {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container .re-generate .btn-box .el-button .el-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container .input-box {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container .input-box .input-container {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container .input-box .input-container .el-textarea .el-textarea__inner::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container .input-box .input-container .select-file {
|
||||
position: absolute;
|
||||
right: 48px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container .input-box .input-container .send-btn {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container .input-box .input-container .send-btn .el-button {
|
||||
padding: 8px 5px;
|
||||
border-radius: 6px;
|
||||
background: #19c37d;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#app .chat-page .el-main .chat-box #container::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
#app .el-message-box {
|
||||
width: 90%;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
#app .el-message {
|
||||
min-width: 100px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.el-select-dropdown__wrap .el-select-dropdown__item .role-option {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.el-select-dropdown__wrap .el-select-dropdown__item .role-option .el-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.el-select-dropdown__wrap .el-select-dropdown__item .role-option span {
|
||||
margin-left: 5px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.account {
|
||||
display: flex;
|
||||
background-color: #90ffc2;
|
||||
color: #000;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.account .vip-logo .el-image {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.account .vip-info {
|
||||
padding: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.account .vip-info h4,
|
||||
.account .vip-info p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.account .vip-info h4 {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.account .vip-info p {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.account .pay-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-overlay-dialog .el-dialog .el-dialog__body .notice {
|
||||
padding: 0 20px 0 20px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.el-overlay-dialog .el-dialog .el-dialog__body .notice .el-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dialog-service {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog-service .el-image {
|
||||
width: 360px;
|
||||
}
|
||||
@@ -160,13 +160,15 @@ $borderColor = #4676d0;
|
||||
padding 5px
|
||||
border-radius 5px
|
||||
cursor pointer
|
||||
background-color #f2f2f2
|
||||
margin-right 10px
|
||||
.iconfont {
|
||||
font-size 18px
|
||||
color #19c37d
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background #D5FAD3
|
||||
background-color #D5FAD3
|
||||
}
|
||||
}
|
||||
|
||||
@@ -412,9 +414,10 @@ $borderColor = #4676d0;
|
||||
.el-dialog {
|
||||
.el-dialog__body {
|
||||
.notice {
|
||||
//padding 0 20px 0 20px
|
||||
line-height 1.8
|
||||
font-size 16px
|
||||
overflow auto
|
||||
height 100%
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -426,4 +429,11 @@ $borderColor = #4676d0;
|
||||
.el-image {
|
||||
width 360px;
|
||||
}
|
||||
}
|
||||
|
||||
.tools-dropdown {
|
||||
width auto
|
||||
.el-icon {
|
||||
margin-left 5px;
|
||||
}
|
||||
}
|
||||
@@ -23,6 +23,7 @@
|
||||
.el-image {
|
||||
width 48px
|
||||
height 48px
|
||||
border-radius 50%
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -54,8 +54,9 @@
|
||||
padding 10px 10px 0 10px
|
||||
}
|
||||
|
||||
.el-image {
|
||||
.logo {
|
||||
height 50px
|
||||
border-radius 50%
|
||||
}
|
||||
|
||||
.el-button {
|
||||
@@ -72,6 +73,9 @@
|
||||
.content {
|
||||
text-align: center;
|
||||
position relative
|
||||
display flex
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
@@ -88,6 +92,10 @@
|
||||
max-width 900px
|
||||
padding 20px
|
||||
|
||||
.el-space--horizontal {
|
||||
justify-content center
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width 200px
|
||||
.el-button {
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
.el-image {
|
||||
width 120px;
|
||||
cursor pointer
|
||||
border-radius 50%
|
||||
}
|
||||
}
|
||||
|
||||
@@ -96,7 +97,8 @@
|
||||
font-size 20px
|
||||
background: #E9F1F6;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
border-radius: 50%
|
||||
cursor pointer
|
||||
}
|
||||
.iconfont.icon-wechat {
|
||||
color #0bc15f
|
||||
|
||||
142
web/src/assets/css/luma.css
Normal file
142
web/src/assets/css/luma.css
Normal file
@@ -0,0 +1,142 @@
|
||||
.page-luma {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
background-color: #0e0808;
|
||||
overflow: auto;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
background: linear-gradient(180deg, rgba(75,62,53,0.8), rgba(144,50,181,0.3));
|
||||
}
|
||||
.page-luma .prompt-box {
|
||||
display: flex;
|
||||
max-width: 56rem;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
flex-flow: column;
|
||||
}
|
||||
.page-luma .prompt-box .images {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding-bottom: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
.page-luma .prompt-box .images .item {
|
||||
position: relative;
|
||||
}
|
||||
.page-luma .prompt-box .images .item .el-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 6px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.page-luma .prompt-box .images .item .el-icon {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
color: #545454;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
}
|
||||
.page-luma .prompt-box .images .item .el-icon:hover {
|
||||
color: #888;
|
||||
}
|
||||
.page-luma .prompt-box .prompt-container {
|
||||
width: 100%;
|
||||
}
|
||||
.page-luma .prompt-box .prompt-container .input-container {
|
||||
background: linear-gradient(90deg, rgba(75,62,53,0.8), rgba(144,50,181,0.3));
|
||||
border-radius: 28px;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
.page-luma .prompt-box .prompt-container .input-container .prompt-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
resize: none;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
line-height: 24px;
|
||||
overflow-wrap: break-word;
|
||||
scrollbar-width: none; /* 隐藏滚动条 */
|
||||
}
|
||||
.page-luma .prompt-box .prompt-container .input-container .prompt-input::placeholder {
|
||||
color: rgba(255,255,255,0.6);
|
||||
}
|
||||
.page-luma .prompt-box .prompt-container .input-container .prompt-input::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.page-luma .prompt-box .prompt-container .input-container .upload-icon,
|
||||
.page-luma .prompt-box .prompt-container .input-container .send-icon {
|
||||
color: #e1e1e1;
|
||||
}
|
||||
.page-luma .prompt-box .prompt-container .input-container .upload-icon .iconfont,
|
||||
.page-luma .prompt-box .prompt-container .input-container .send-icon .iconfont {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-luma .prompt-box .prompt-container .input-container .upload-icon {
|
||||
position: relative;
|
||||
}
|
||||
.page-luma .video-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.page-luma .video-container .h-title {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
font-size: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
.page-luma .video-container .videos .item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.page-luma .video-container .videos .item .video-box {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.page-luma .video-container .videos .item .video-box video,
|
||||
.page-luma .video-container .videos .item .video-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-luma .video-container .videos .item .video-name {
|
||||
color: #e1e1e1;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 6px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.page-luma .video-container .videos .item .opts {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.page-luma .video-container .videos .item .opts .btn {
|
||||
margin-right: 10px;
|
||||
background-color: rgba(255,255,255,0.15);
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
padding: 3px 15px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.page-luma .video-container .videos .item .opts .btn .iconfont {
|
||||
font-size: 12px;
|
||||
}
|
||||
.page-luma .video-container .videos .item .opts .btn:hover {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
354
web/src/assets/css/luma.styl
Normal file
354
web/src/assets/css/luma.styl
Normal file
@@ -0,0 +1,354 @@
|
||||
.page-luma {
|
||||
display flex
|
||||
height 100%
|
||||
background-color #0E0808
|
||||
overflow auto
|
||||
//justify-content center
|
||||
flex-flow column
|
||||
align-items center
|
||||
background: linear-gradient(180deg, rgba(75, 62, 53, 0.8), rgba(144, 50, 181, 0.3));
|
||||
|
||||
|
||||
.prompt-box {
|
||||
display flex
|
||||
max-width 56rem
|
||||
width 100%
|
||||
padding 20px
|
||||
flex-flow column
|
||||
|
||||
.images {
|
||||
display flex
|
||||
flex-flow row
|
||||
padding-bottom 10px
|
||||
justify-content center
|
||||
align-items center
|
||||
|
||||
.item {
|
||||
position relative
|
||||
|
||||
.el-image {
|
||||
width 100px
|
||||
height 100px
|
||||
border-radius 6px
|
||||
margin-right 10px
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
position absolute
|
||||
cursor pointer
|
||||
font-size 20px
|
||||
color #545454
|
||||
right 10px
|
||||
top 0
|
||||
|
||||
&:hover {
|
||||
color #888888
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-swap {
|
||||
margin-right 10px
|
||||
.icon-exchange{
|
||||
color #ffffff
|
||||
cursor pointer
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.prompt-container {
|
||||
width: 100%;
|
||||
.input-container {
|
||||
background: linear-gradient(90deg, rgba(75, 62, 53, 0.8), rgba(144, 50, 181, 0.3));
|
||||
border-radius: 28px;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.prompt-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
resize: none;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
line-height 24px
|
||||
overflow-wrap: break-word;
|
||||
|
||||
scrollbar-width: none; /* 隐藏滚动条 */
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-icon, .send-icon {
|
||||
color #e1e1e1
|
||||
.iconfont {
|
||||
font-size 20px
|
||||
cursor pointer
|
||||
}
|
||||
}
|
||||
.upload-icon {
|
||||
position relative
|
||||
}
|
||||
}
|
||||
.params {
|
||||
display flex
|
||||
justify-content right
|
||||
color #e1e1e1
|
||||
font-size 14px
|
||||
padding 10px 30px
|
||||
|
||||
.item-group {
|
||||
margin-left 20px
|
||||
.label {
|
||||
margin-right 5px
|
||||
position relative
|
||||
top 1px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.video-container {
|
||||
display flex
|
||||
flex-flow column
|
||||
width 100%
|
||||
padding 0 40px
|
||||
|
||||
.h-title {
|
||||
color #ffffff
|
||||
width 100%
|
||||
font-size 36px
|
||||
text-align left
|
||||
}
|
||||
|
||||
.list-box {
|
||||
padding 0
|
||||
.item {
|
||||
display flex
|
||||
flex-flow row
|
||||
align-items center
|
||||
height 100px
|
||||
padding 10px 15px
|
||||
border-radius 10px
|
||||
cursor pointer
|
||||
margin-bottom 10px
|
||||
|
||||
&:hover {
|
||||
background-color #2A2525
|
||||
}
|
||||
|
||||
.left {
|
||||
.container {
|
||||
width 160px
|
||||
position relative
|
||||
|
||||
.video{
|
||||
width 160px
|
||||
border-radius 5px
|
||||
}
|
||||
|
||||
.el-image {
|
||||
width 160px
|
||||
height 90px
|
||||
border-radius 5px
|
||||
}
|
||||
|
||||
.duration {
|
||||
position absolute
|
||||
bottom 0
|
||||
right 0
|
||||
background-color rgba(14,8,8,.7)
|
||||
padding 0 3px
|
||||
font-family 'Input Sans'
|
||||
font-size 14px
|
||||
font-weight 700
|
||||
border-radius .125rem
|
||||
}
|
||||
|
||||
.play {
|
||||
position absolute
|
||||
width: 100%
|
||||
height 100%
|
||||
top: 0;
|
||||
left: 50%;
|
||||
border none
|
||||
border-radius 5px
|
||||
background rgba(100, 100, 100, 0.3)
|
||||
cursor pointer
|
||||
color #ffffff
|
||||
opacity 0
|
||||
transform: translate(-50%, 0px);
|
||||
transition opacity 0.3s ease 0s
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.play {
|
||||
opacity 1
|
||||
//display block
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
width 100%
|
||||
//border 1px solid saddlebrown
|
||||
display flex
|
||||
justify-content center
|
||||
align-items flex-start
|
||||
flex-flow column
|
||||
padding 0 20px
|
||||
|
||||
.prompt,.failed {
|
||||
padding 6px 0
|
||||
font-size 16px
|
||||
max-height 80px
|
||||
line-height 28px
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
}
|
||||
.prompt {
|
||||
color rgb(250 247 245)
|
||||
}
|
||||
.failed {
|
||||
color #E4696B
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
display flex
|
||||
justify-content right
|
||||
min-width 200px;
|
||||
font-size 14px
|
||||
padding 0
|
||||
|
||||
.tools {
|
||||
display flex
|
||||
justify-content left
|
||||
align-items center
|
||||
flex-flow row
|
||||
height 90px
|
||||
|
||||
.btn-publish {
|
||||
padding 2px 10px
|
||||
|
||||
.text {
|
||||
margin-right 10px
|
||||
color #e1e1e1
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
background none
|
||||
padding 6px
|
||||
transition background 0.6s ease 0s
|
||||
color #726E6C
|
||||
|
||||
&:hover {
|
||||
background #5f5958
|
||||
color #e1e1e1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding 10px 20px
|
||||
display flex
|
||||
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)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-right 10px
|
||||
background-color #363030
|
||||
border none
|
||||
border-radius 5px
|
||||
padding 5px 10px
|
||||
cursor pointer
|
||||
|
||||
&:hover {
|
||||
background-color #5F5958
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -4,8 +4,6 @@
|
||||
|
||||
.el-dialog {
|
||||
.el-dialog__body {
|
||||
padding-top 10px
|
||||
|
||||
.pay-container {
|
||||
.amount {
|
||||
text-align center
|
||||
|
||||
@@ -13,6 +13,13 @@
|
||||
display flex
|
||||
flex-flow row
|
||||
justify-content: space-between;
|
||||
|
||||
.upload-music {
|
||||
.iconfont {
|
||||
margin-right 5px
|
||||
font-size 14px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.params {
|
||||
@@ -85,6 +92,10 @@
|
||||
height 50px
|
||||
border-radius 10px
|
||||
}
|
||||
.icon-mp3 {
|
||||
font-size 42px
|
||||
color #A85295
|
||||
}
|
||||
.title {
|
||||
display flex
|
||||
margin-left 10px
|
||||
@@ -266,7 +277,7 @@
|
||||
}
|
||||
|
||||
.right {
|
||||
min-width 320px;
|
||||
min-width 350px;
|
||||
font-size 14px
|
||||
padding 0 15px
|
||||
|
||||
@@ -292,7 +303,8 @@
|
||||
color #726E6C
|
||||
|
||||
&:hover {
|
||||
background #3C3737
|
||||
background #5f5958
|
||||
color #e1e1e1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4125778 */
|
||||
src: url('iconfont.woff2?t=1721896403264') format('woff2'),
|
||||
url('iconfont.woff?t=1721896403264') format('woff'),
|
||||
url('iconfont.ttf?t=1721896403264') 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,42 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-luma:before {
|
||||
content: "\e704";
|
||||
}
|
||||
|
||||
.icon-exchange:before {
|
||||
content: "\e6f5";
|
||||
}
|
||||
|
||||
.icon-merge:before {
|
||||
content: "\e901";
|
||||
}
|
||||
|
||||
.icon-upload:before {
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
.icon-concat:before {
|
||||
content: "\e630";
|
||||
}
|
||||
|
||||
.icon-email:before {
|
||||
content: "\e670";
|
||||
}
|
||||
|
||||
.icon-mobile:before {
|
||||
content: "\e79a";
|
||||
}
|
||||
|
||||
.icon-drag:before {
|
||||
content: "\e8ec";
|
||||
}
|
||||
|
||||
.icon-move:before {
|
||||
content: "\e6fd";
|
||||
}
|
||||
|
||||
.icon-link:before {
|
||||
content: "\e6b4";
|
||||
}
|
||||
@@ -61,7 +97,7 @@
|
||||
content: "\e608";
|
||||
}
|
||||
|
||||
.icon-mp:before {
|
||||
.icon-mp3:before {
|
||||
content: "\e6c4";
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,10 +1,73 @@
|
||||
{
|
||||
"id": "4125778",
|
||||
"name": "chatgpt",
|
||||
"name": "geekai",
|
||||
"font_family": "iconfont",
|
||||
"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",
|
||||
"font_class": "merge",
|
||||
"unicode": "e901",
|
||||
"unicode_decimal": 59649
|
||||
},
|
||||
{
|
||||
"icon_id": "10278208",
|
||||
"name": "上传",
|
||||
"font_class": "upload",
|
||||
"unicode": "e611",
|
||||
"unicode_decimal": 58897
|
||||
},
|
||||
{
|
||||
"icon_id": "23538484",
|
||||
"name": "拼接",
|
||||
"font_class": "concat",
|
||||
"unicode": "e630",
|
||||
"unicode_decimal": 58928
|
||||
},
|
||||
{
|
||||
"icon_id": "15838472",
|
||||
"name": "email",
|
||||
"font_class": "email",
|
||||
"unicode": "e670",
|
||||
"unicode_decimal": 58992
|
||||
},
|
||||
{
|
||||
"icon_id": "6151052",
|
||||
"name": "mobile-alt",
|
||||
"font_class": "mobile",
|
||||
"unicode": "e79a",
|
||||
"unicode_decimal": 59290
|
||||
},
|
||||
{
|
||||
"icon_id": "15617554",
|
||||
"name": "drag",
|
||||
"font_class": "drag",
|
||||
"unicode": "e8ec",
|
||||
"unicode_decimal": 59628
|
||||
},
|
||||
{
|
||||
"icon_id": "240317",
|
||||
"name": "move",
|
||||
"font_class": "move",
|
||||
"unicode": "e6fd",
|
||||
"unicode_decimal": 59133
|
||||
},
|
||||
{
|
||||
"icon_id": "880330",
|
||||
"name": "link",
|
||||
@@ -92,7 +155,7 @@
|
||||
{
|
||||
"icon_id": "4318807",
|
||||
"name": "mp3",
|
||||
"font_class": "mp",
|
||||
"font_class": "mp3",
|
||||
"unicode": "e6c4",
|
||||
"unicode_decimal": 59076
|
||||
},
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -2,26 +2,24 @@
|
||||
<el-dialog
|
||||
v-model="showDialog"
|
||||
:close-on-click-modal="true"
|
||||
style="max-width: 600px"
|
||||
:before-close="close"
|
||||
style="max-width: 400px"
|
||||
@close="close"
|
||||
:title="title"
|
||||
>
|
||||
<div class="form" id="bind-mobile-form">
|
||||
<el-alert v-if="username !== ''" type="info" show-icon :closable="false" style="margin-bottom: 20px;">
|
||||
<p>当前绑定账号：{{ username }}，只允许使绑定有效的手机号或者邮箱地址作为登录账号。</p>
|
||||
</el-alert>
|
||||
<div class="form">
|
||||
<div class="text-center" v-if="email !== ''">当前已绑定邮箱：{{ email }}</div>
|
||||
|
||||
<el-form :model="form" label-width="120px">
|
||||
<el-form-item label="新账号">
|
||||
<el-input v-model="form.username"/>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="邮箱地址">
|
||||
<el-input v-model="form.email"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码">
|
||||
<el-row :gutter="20">
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="16">
|
||||
<el-input v-model="form.code" maxlength="6"/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<send-msg size="" :receiver="form.username"/>
|
||||
<el-col :span="8" style="padding-left: 10px">
|
||||
<send-msg :receiver="form.email" type="email"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
@@ -39,55 +37,67 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, ref} from "vue";
|
||||
import {computed, ref, watch} from "vue";
|
||||
import SendMsg from "@/components/SendMsg.vue";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {httpPost} from "@/utils/http";
|
||||
import {validateEmail, validateMobile} from "@/utils/validate";
|
||||
import {checkSession} from "@/store/cache";
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
username: String
|
||||
});
|
||||
|
||||
const showDialog = computed(() => {
|
||||
return props.show
|
||||
})
|
||||
|
||||
const title = ref('重置登录账号')
|
||||
const title = ref('绑定邮箱')
|
||||
const email = ref('')
|
||||
const form = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
code: ''
|
||||
})
|
||||
|
||||
watch(showDialog, (val) => {
|
||||
if (val) {
|
||||
form.value.code = ''
|
||||
form.value.email = ''
|
||||
checkSession().then(user => {
|
||||
email.value = user.email
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['hide']);
|
||||
|
||||
const save = () => {
|
||||
if (!validateMobile(form.value.username) && !validateEmail(form.value.username)) {
|
||||
return ElMessage.error("请输入合法的手机号/邮箱地址")
|
||||
}
|
||||
if (form.value.code === '') {
|
||||
return ElMessage.error("请输入验证码");
|
||||
}
|
||||
|
||||
httpPost('/api/user/bind/username', form.value).then(() => {
|
||||
ElMessage.success({
|
||||
message: '绑定成功',
|
||||
duration: 1000,
|
||||
onClose: () => emits('hide', false)
|
||||
})
|
||||
httpPost('/api/user/bind/email', form.value).then(() => {
|
||||
ElMessage.success("绑定成功")
|
||||
emits('hide')
|
||||
}).catch(e => {
|
||||
ElMessage.error("绑定失败：" + e.message);
|
||||
})
|
||||
}
|
||||
|
||||
const close = function () {
|
||||
emits('hide', false);
|
||||
emits('hide');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
#bind-mobile-form {
|
||||
.form {
|
||||
.text-center {
|
||||
text-align center
|
||||
padding-bottom 15px
|
||||
font-size 14px
|
||||
color #a1a1a1
|
||||
font-weight 700
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
.el-row {
|
||||
width 100%
|
||||
110
web/src/components/BindMobile.vue
Normal file
110
web/src/components/BindMobile.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="showDialog"
|
||||
:close-on-click-modal="true"
|
||||
style="max-width: 400px"
|
||||
@close="close"
|
||||
:title="title"
|
||||
>
|
||||
<div class="form">
|
||||
<div class="text-center" v-if="mobile !== ''">当前已绑手机号：{{ mobile }}</div>
|
||||
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="手机号">
|
||||
<el-input v-model="form.mobile"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码">
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="16">
|
||||
<el-input v-model="form.code" maxlength="6"/>
|
||||
</el-col>
|
||||
<el-col :span="8" style="padding-left: 10px">
|
||||
<send-msg :receiver="form.mobile" type="mobile"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="save">
|
||||
提交绑定
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, ref, watch} from "vue";
|
||||
import SendMsg from "@/components/SendMsg.vue";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {httpPost} from "@/utils/http";
|
||||
import {checkSession} from "@/store/cache";
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
});
|
||||
|
||||
const showDialog = computed(() => {
|
||||
return props.show
|
||||
})
|
||||
|
||||
const title = ref('绑定手机')
|
||||
const mobile = ref('')
|
||||
const form = ref({
|
||||
mobile: '',
|
||||
code: ''
|
||||
})
|
||||
|
||||
watch(showDialog, (val) => {
|
||||
if (val) {
|
||||
form.value = {
|
||||
mobile: '',
|
||||
code: ''
|
||||
}
|
||||
|
||||
checkSession().then(user => {
|
||||
mobile.value = user.mobile
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['hide']);
|
||||
|
||||
const save = () => {
|
||||
if (form.value.code === '') {
|
||||
return ElMessage.error("请输入验证码");
|
||||
}
|
||||
|
||||
httpPost('/api/user/bind/mobile', form.value).then(() => {
|
||||
ElMessage.success("绑定成功")
|
||||
emits('hide')
|
||||
}).catch(e => {
|
||||
ElMessage.error("绑定失败：" + e.message);
|
||||
})
|
||||
}
|
||||
|
||||
const close = function () {
|
||||
emits('hide');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.form {
|
||||
.text-center {
|
||||
text-align center
|
||||
padding-bottom 15px
|
||||
font-size 14px
|
||||
color #a1a1a1
|
||||
font-weight 700
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
.el-row {
|
||||
width 100%
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
144
web/src/components/Captcha.vue
Normal file
144
web/src/components/Captcha.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<el-container class="captcha-box">
|
||||
<el-dialog
|
||||
v-model="show"
|
||||
:close-on-click-modal="true"
|
||||
:show-close="false"
|
||||
style="width: 360px;"
|
||||
>
|
||||
<slide-captcha
|
||||
v-if="isMobile()"
|
||||
:bg-img="bgImg"
|
||||
:bk-img="bkImg"
|
||||
:result="result"
|
||||
@refresh="getSlideCaptcha"
|
||||
@confirm="handleSlideConfirm"
|
||||
@hide="show = false"/>
|
||||
|
||||
<captcha-plus
|
||||
v-else
|
||||
:max-dot="maxDot"
|
||||
:image-base64="imageBase64"
|
||||
:thumb-base64="thumbBase64"
|
||||
width="300"
|
||||
@close="show = false"
|
||||
@refresh="handleRequestCaptCode"
|
||||
@confirm="handleConfirm"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from "vue";
|
||||
import lodash from 'lodash'
|
||||
import {validateEmail, validateMobile} from "@/utils/validate";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import CaptchaPlus from "@/components/CaptchaPlus.vue";
|
||||
import SlideCaptcha from "@/components/SlideCaptcha.vue";
|
||||
import {isMobile} from "@/utils/libs";
|
||||
import {showMessageError, showMessageOK} from "@/utils/dialog";
|
||||
|
||||
const show = ref(false)
|
||||
const maxDot = ref(5)
|
||||
const imageBase64 = ref('')
|
||||
const thumbBase64 = ref('')
|
||||
const captKey = ref('')
|
||||
const dots = ref(null)
|
||||
|
||||
const emits = defineEmits(['success']);
|
||||
const handleRequestCaptCode = () => {
|
||||
|
||||
httpGet('/api/captcha/get').then(res => {
|
||||
const data = res.data
|
||||
imageBase64.value = data.image
|
||||
thumbBase64.value = data.thumb
|
||||
captKey.value = data.key
|
||||
}).catch(e => {
|
||||
showMessageError('获取人机验证数据失败：' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
const handleConfirm = (dts) => {
|
||||
if (lodash.size(dts) <= 0) {
|
||||
return showMessageError('请进行人机验证再操作')
|
||||
}
|
||||
|
||||
let dotArr = []
|
||||
lodash.forEach(dts, (dot) => {
|
||||
dotArr.push(dot.x, dot.y)
|
||||
})
|
||||
dots.value = dotArr.join(',')
|
||||
httpPost('/api/captcha/check', {
|
||||
dots: dots.value,
|
||||
key: captKey.value
|
||||
}).then(() => {
|
||||
// ElMessage.success('人机验证成功')
|
||||
show.value = false
|
||||
emits('success', {key:captKey.value, dots:dots.value})
|
||||
}).catch(() => {
|
||||
showMessageError('人机验证失败')
|
||||
handleRequestCaptCode()
|
||||
})
|
||||
}
|
||||
|
||||
const loadCaptcha = () => {
|
||||
show.value = true
|
||||
// 手机用滑动验证码
|
||||
if (isMobile()) {
|
||||
getSlideCaptcha()
|
||||
} else {
|
||||
handleRequestCaptCode()
|
||||
}
|
||||
}
|
||||
|
||||
// 滑动验证码
|
||||
const bgImg = ref('')
|
||||
const bkImg = ref('')
|
||||
const result = ref(0)
|
||||
|
||||
const getSlideCaptcha = () => {
|
||||
result.value = 0
|
||||
httpGet("/api/captcha/slide/get").then(res => {
|
||||
bkImg.value = res.data.bkImg
|
||||
bgImg.value = res.data.bgImg
|
||||
captKey.value = res.data.key
|
||||
}).catch(e => {
|
||||
showMessageError('获取人机验证数据失败：' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
const handleSlideConfirm = (x) => {
|
||||
httpPost("/api/captcha/slide/check", {
|
||||
key: captKey.value,
|
||||
x: x
|
||||
}).then(() => {
|
||||
result.value = 1
|
||||
show.value = false
|
||||
emits('success',{key:captKey.value, x:x})
|
||||
}).catch(() => {
|
||||
result.value = 2
|
||||
})
|
||||
}
|
||||
|
||||
// 导出方法以便父组件调用
|
||||
defineExpose({
|
||||
loadCaptcha
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
|
||||
.captcha-box {
|
||||
.el-dialog {
|
||||
.el-dialog__header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -20,7 +20,7 @@
|
||||
:auto-upload="true"
|
||||
:show-file-list="false"
|
||||
:http-request="afterRead"
|
||||
accept=".doc,.docx,.jpg,.png,.jpeg,.xls,.xlsx,.ppt,.pptx,.pdf"
|
||||
accept=".doc,.docx,.jpg,.png,.jpeg,.xls,.xlsx,.ppt,.pptx,.pdf,.mp4,.mp3"
|
||||
>
|
||||
<el-icon class="avatar-uploader-icon">
|
||||
<Plus/>
|
||||
|
||||
@@ -33,11 +33,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref, watch} from "vue";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {onMounted, ref} from "vue";
|
||||
import {httpGet} from "@/utils/http";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {dateFormat} from "@/utils/libs";
|
||||
import {DocumentCopy} from "@element-plus/icons-vue";
|
||||
import Clipboard from "clipboard";
|
||||
|
||||
const items = ref([])
|
||||
@@ -60,7 +59,7 @@ onMounted(() => {
|
||||
|
||||
// 获取数据
|
||||
const fetchData = () => {
|
||||
httpPost('/api/invite/list', {page: page.value, page_size: pageSize.value}).then((res) => {
|
||||
httpGet('/api/invite/list', {page: page.value, page_size: pageSize.value}).then((res) => {
|
||||
if (res.data) {
|
||||
items.value = res.data.items
|
||||
total.value = res.data.total
|
||||
|
||||
@@ -47,16 +47,29 @@
|
||||
</div>
|
||||
|
||||
<el-row class="btn-row" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-col :span="24">
|
||||
<el-button class="login-btn" type="primary" size="large" @click="submitLogin">登录</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="text">
|
||||
<div class="reg">
|
||||
还没有账号？
|
||||
<el-tag @click="login = false">注册</el-tag>
|
||||
<el-button type="primary" class="forget" size="small" @click="login = false">注册</el-button>
|
||||
|
||||
<el-button type="info" class="forget" size="small" @click="showResetPass = true">忘记密码？</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="c-login" v-if="wechatLoginURL !== ''">
|
||||
<div class="text">其他登录方式：</div>
|
||||
<div class="login-type">
|
||||
<a class="wechat-login" :href="wechatLoginURL" @click="setRoute(router.currentRoute.value.path)"><i class="iconfont icon-wechat"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
@@ -68,7 +81,7 @@
|
||||
<div class="block">
|
||||
<el-input placeholder="手机号码"
|
||||
size="large"
|
||||
v-model="data.username"
|
||||
v-model="data.mobile"
|
||||
maxlength="11"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
@@ -93,7 +106,7 @@
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<send-msg size="large" :receiver="data.username"/>
|
||||
<send-msg size="large" :receiver="data.mobile" type="mobile"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@@ -102,7 +115,7 @@
|
||||
<div class="block">
|
||||
<el-input placeholder="邮箱地址"
|
||||
size="large"
|
||||
v-model="data.username"
|
||||
v-model="data.email"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
@@ -126,7 +139,7 @@
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<send-msg size="large" :receiver="data.username"/>
|
||||
<send-msg size="large" :receiver="data.email" type="email"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@@ -217,12 +230,16 @@
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<captcha v-if="enableVerify" @success="submit" ref="captchaRef"/>
|
||||
|
||||
<reset-pass @hide="showResetPass = false" :show="showResetPass"/>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref, watch} from "vue"
|
||||
import {httpPost} from "@/utils/http";
|
||||
import {onMounted, ref, watch} from "vue"
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {setUserToken} from "@/store/session";
|
||||
import {validateEmail, validateMobile} from "@/utils/validate";
|
||||
@@ -230,6 +247,10 @@ import {Checked, Close, Iphone, Lock, Message} from "@element-plus/icons-vue";
|
||||
import SendMsg from "@/components/SendMsg.vue";
|
||||
import {arrayContains} from "@/utils/libs";
|
||||
import {getSystemInfo} from "@/store/cache";
|
||||
import Captcha from "@/components/Captcha.vue";
|
||||
import ResetPass from "@/components/ResetPass.vue";
|
||||
import {setRoute} from "@/store/system";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const props = defineProps({
|
||||
@@ -242,8 +263,10 @@ watch(() => props.show, (newValue) => {
|
||||
|
||||
const login = ref(true)
|
||||
const data = ref({
|
||||
username: process.env.VUE_APP_USER,
|
||||
password: process.env.VUE_APP_PASS,
|
||||
username: "",
|
||||
password: "",
|
||||
mobile: "",
|
||||
email: "",
|
||||
repass: "",
|
||||
code: "",
|
||||
invite_code: ""
|
||||
@@ -251,38 +274,62 @@ const data = ref({
|
||||
const enableMobile = ref(false)
|
||||
const enableEmail = ref(false)
|
||||
const enableUser = ref(false)
|
||||
const enableRegister = ref(false)
|
||||
const enableRegister = ref(true)
|
||||
const wechatLoginURL = ref('')
|
||||
const activeName = ref("")
|
||||
const wxImg = ref("/images/wx.png")
|
||||
const captchaRef = ref(null)
|
||||
// eslint-disable-next-line no-undef
|
||||
const emits = defineEmits(['hide', 'success']);
|
||||
const action = ref("login")
|
||||
const enableVerify = ref(false)
|
||||
const showResetPass = ref(false)
|
||||
const router = useRouter()
|
||||
|
||||
getSystemInfo().then(res => {
|
||||
if (res.data) {
|
||||
const registerWays = res.data['register_ways']
|
||||
if (arrayContains(registerWays, "mobile")) {
|
||||
enableMobile.value = true
|
||||
activeName.value = activeName.value === "" ? "mobile" : activeName.value
|
||||
onMounted(() => {
|
||||
const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`
|
||||
httpGet("/api/user/clogin?return_url="+returnURL).then(res => {
|
||||
wechatLoginURL.value = res.data.url
|
||||
}).catch(e => {
|
||||
console.log(e.message)
|
||||
})
|
||||
|
||||
getSystemInfo().then(res => {
|
||||
if (res.data) {
|
||||
const registerWays = res.data['register_ways']
|
||||
if (arrayContains(registerWays, "mobile")) {
|
||||
enableMobile.value = true
|
||||
activeName.value = activeName.value === "" ? "mobile" : activeName.value
|
||||
}
|
||||
if (arrayContains(registerWays, "email")) {
|
||||
enableEmail.value = true
|
||||
activeName.value = activeName.value === "" ? "email" : activeName.value
|
||||
}
|
||||
if (arrayContains(registerWays, "username")) {
|
||||
enableUser.value = true
|
||||
activeName.value = activeName.value === "" ? "username" : activeName.value
|
||||
}
|
||||
// 是否启用注册
|
||||
enableRegister.value = res.data['enabled_register']
|
||||
// 使用后台上传的客服微信二维码
|
||||
if (res.data['wechat_card_url'] !== '') {
|
||||
wxImg.value = res.data['wechat_card_url']
|
||||
}
|
||||
enableVerify.value = res.data['enabled_verify']
|
||||
}
|
||||
if (arrayContains(registerWays, "email")) {
|
||||
enableEmail.value = true
|
||||
activeName.value = activeName.value === "" ? "email" : activeName.value
|
||||
}
|
||||
if (arrayContains(registerWays, "username")) {
|
||||
enableUser.value = true
|
||||
activeName.value = activeName.value === "" ? "username" : activeName.value
|
||||
}
|
||||
// 是否启用注册
|
||||
enableRegister.value = res.data['enabled_register']
|
||||
// 使用后台上传的客服微信二维码
|
||||
if (res.data['wechat_card_url'] !== '') {
|
||||
wxImg.value = res.data['wechat_card_url']
|
||||
}
|
||||
}
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取系统配置失败：" + e.message)
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取系统配置失败：" + e.message)
|
||||
})
|
||||
})
|
||||
|
||||
const submit = (verifyData) => {
|
||||
if (action.value === "login") {
|
||||
doLogin(verifyData)
|
||||
} else if (action.value === "register") {
|
||||
doRegister(verifyData)
|
||||
}
|
||||
}
|
||||
|
||||
// 登录操作
|
||||
const submitLogin = () => {
|
||||
if (data.value.username === '') {
|
||||
@@ -291,7 +338,18 @@ const submitLogin = () => {
|
||||
if (data.value.password === '') {
|
||||
return ElMessage.error('请输入密码');
|
||||
}
|
||||
if (enableVerify.value) {
|
||||
captchaRef.value.loadCaptcha()
|
||||
action.value = "login"
|
||||
} else {
|
||||
doLogin({})
|
||||
}
|
||||
}
|
||||
|
||||
const doLogin = (verifyData) => {
|
||||
data.value.key = verifyData.key
|
||||
data.value.dots = verifyData.dots
|
||||
data.value.x = verifyData.x
|
||||
httpPost('/api/user/login', data.value).then((res) => {
|
||||
setUserToken(res.data.token)
|
||||
ElMessage.success("登录成功！")
|
||||
@@ -304,15 +362,15 @@ const submitLogin = () => {
|
||||
|
||||
// 注册操作
|
||||
const submitRegister = () => {
|
||||
if (data.value.username === '') {
|
||||
if (activeName.value === 'username' && data.value.username === '') {
|
||||
return ElMessage.error('请输入用户名');
|
||||
}
|
||||
|
||||
if (activeName.value === 'mobile' && !validateMobile(data.value.username)) {
|
||||
if (activeName.value === 'mobile' && !validateMobile(data.value.mobile)) {
|
||||
return ElMessage.error('请输入合法的手机号');
|
||||
}
|
||||
|
||||
if (activeName.value === 'email' && !validateEmail(data.value.username)) {
|
||||
if (activeName.value === 'email' && !validateEmail(data.value.email)) {
|
||||
return ElMessage.error('请输入合法的邮箱地址');
|
||||
}
|
||||
|
||||
@@ -326,9 +384,21 @@ const submitRegister = () => {
|
||||
if ((activeName.value === 'mobile' || activeName.value === 'email') && data.value.code === '') {
|
||||
return ElMessage.error('请输入验证码');
|
||||
}
|
||||
if (enableVerify.value) {
|
||||
captchaRef.value.loadCaptcha()
|
||||
action.value = "register"
|
||||
} else {
|
||||
doRegister({})
|
||||
}
|
||||
}
|
||||
|
||||
const doRegister = (verifyData) => {
|
||||
data.value.key = verifyData.key
|
||||
data.value.dots = verifyData.dots
|
||||
data.value.x = verifyData.x
|
||||
data.value.reg_way = activeName.value
|
||||
httpPost('/api/user/register', data.value).then((res) => {
|
||||
setUserToken(res.data)
|
||||
setUserToken(res.data.token)
|
||||
ElMessage.success({
|
||||
"message": "注册成功!",
|
||||
onClose: () => {
|
||||
@@ -388,7 +458,7 @@ const close = function () {
|
||||
.btn-row {
|
||||
display flex
|
||||
|
||||
.el-button {
|
||||
.login-btn {
|
||||
width 100%
|
||||
}
|
||||
|
||||
@@ -400,6 +470,44 @@ const close = function () {
|
||||
}
|
||||
}
|
||||
|
||||
.forget {
|
||||
margin-left 10px
|
||||
}
|
||||
}
|
||||
|
||||
.c-login {
|
||||
display flex
|
||||
.text {
|
||||
font-size 16px
|
||||
color #a1a1a1
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.login-type {
|
||||
padding 15px
|
||||
display flex
|
||||
justify-content center
|
||||
|
||||
.iconfont {
|
||||
font-size 18px
|
||||
background: #E9F1F6;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.iconfont.icon-wechat {
|
||||
color #0bc15f
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reg {
|
||||
height 50px
|
||||
display flex
|
||||
align-items center
|
||||
|
||||
.el-button {
|
||||
margin-left 10px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
<el-dialog
|
||||
v-model="showDialog"
|
||||
:close-on-click-modal="true"
|
||||
:show-close="mobile !== ''"
|
||||
:before-close="close"
|
||||
:width="450"
|
||||
:title="title"
|
||||
|
||||
@@ -6,27 +6,44 @@
|
||||
width="540px"
|
||||
:before-close="close"
|
||||
:title="title"
|
||||
class="reset-pass-dialog"
|
||||
>
|
||||
<div class="form">
|
||||
|
||||
<el-form :model="form" label-width="80px" label-position="left">
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="form.username" placeholder="手机号/邮箱地址"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码">
|
||||
<div class="code-box">
|
||||
<el-input v-model="form.code" maxlength="6"/>
|
||||
<send-msg size="" :receiver="form.username" style="margin-left: 10px; min-width: 100px"/>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-tabs v-model="form.type" class="demo-tabs">
|
||||
<el-tab-pane label="手机号验证" name="mobile">
|
||||
<el-form-item label="手机号">
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码">
|
||||
<el-row class="code-row">
|
||||
<el-col :span="16">
|
||||
<el-input v-model="form.code" maxlength="6"/>
|
||||
</el-col>
|
||||
<el-col :span="8" class="send-button">
|
||||
<send-msg size="" :receiver="form.mobile" type="mobile"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="12" style="justify-content: right">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="邮箱验证" name="email">
|
||||
<el-form-item label="邮箱地址">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱地址"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码">
|
||||
<el-row class="code-row">
|
||||
<el-col :span="16">
|
||||
<el-input v-model="form.code" maxlength="6"/>
|
||||
</el-col>
|
||||
<el-col :span="8" class="send-button">
|
||||
<send-msg size="" :receiver="form.email" type="email"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码">
|
||||
<el-input v-model="form.password" type="password"/>
|
||||
</el-form-item>
|
||||
@@ -65,7 +82,9 @@ const showDialog = computed(() => {
|
||||
|
||||
const title = ref('重置密码')
|
||||
const form = ref({
|
||||
username: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
type: 'mobile',
|
||||
code: '',
|
||||
password: '',
|
||||
repass: ''
|
||||
@@ -74,12 +93,12 @@ const form = ref({
|
||||
const emits = defineEmits(['hide']);
|
||||
|
||||
const save = () => {
|
||||
if (!validateMobile(form.value.username) && !validateEmail(form.value.username)) {
|
||||
return ElMessage.error("请输入正确的手机号码/邮箱地址");
|
||||
}
|
||||
if (form.value.code === '') {
|
||||
return ElMessage.error("请输入验证码");
|
||||
}
|
||||
if (form.value.password.length < 8) {
|
||||
return ElMessage.error("密码长度必须大于8位");
|
||||
}
|
||||
if (form.value.repass !== form.value.password) {
|
||||
return ElMessage.error("两次输入密码不一致");
|
||||
}
|
||||
@@ -101,15 +120,24 @@ const close = function () {
|
||||
<style lang="stylus">
|
||||
.reset-pass {
|
||||
.form {
|
||||
padding 10px 20px
|
||||
padding 0 20px
|
||||
}
|
||||
.code-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%
|
||||
|
||||
.code-row {
|
||||
width 100%
|
||||
.send-button {
|
||||
padding-left 10px
|
||||
}
|
||||
}
|
||||
.el-dialog__footer {
|
||||
text-align center
|
||||
|
||||
.reset-pass-dialog {
|
||||
.el-dialog__footer {
|
||||
text-align center
|
||||
padding-top 0
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,121 +1,64 @@
|
||||
<template>
|
||||
<el-container class="captcha-box">
|
||||
<el-button type="primary" class="send-btn" :size="props.size" :disabled="!canSend" @click="loadCaptcha" plain>
|
||||
<el-container class="send-verify-code">
|
||||
<el-button type="primary" class="send-btn" :size="props.size" :disabled="!canSend" @click="sendMsg" plain>
|
||||
{{ btnText }}
|
||||
</el-button>
|
||||
|
||||
<el-dialog
|
||||
v-model="showCaptcha"
|
||||
:close-on-click-modal="true"
|
||||
:show-close="false"
|
||||
style="width: 360px;"
|
||||
>
|
||||
<slide-captcha
|
||||
v-if="isMobile()"
|
||||
:bg-img="bgImg"
|
||||
:bk-img="bkImg"
|
||||
:result="result"
|
||||
@refresh="getSlideCaptcha"
|
||||
@confirm="handleSlideConfirm"
|
||||
@hide="showCaptcha = false"/>
|
||||
|
||||
<captcha-plus
|
||||
v-else
|
||||
:max-dot="maxDot"
|
||||
:image-base64="imageBase64"
|
||||
:thumb-base64="thumbBase64"
|
||||
width="300"
|
||||
@close="showCaptcha = false"
|
||||
@refresh="handleRequestCaptCode"
|
||||
@confirm="handleConfirm"
|
||||
/>
|
||||
</el-dialog>
|
||||
<captcha @success="doSendMsg" ref="captchaRef"/>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 发送短信验证码组件
|
||||
import {ref} from "vue";
|
||||
import lodash from 'lodash'
|
||||
import {validateEmail, validateMobile} from "@/utils/validate";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import CaptchaPlus from "@/components/CaptchaPlus.vue";
|
||||
import SlideCaptcha from "@/components/SlideCaptcha.vue";
|
||||
import {isMobile} from "@/utils/libs";
|
||||
import {httpPost} from "@/utils/http";
|
||||
import {showMessageError, showMessageOK} from "@/utils/dialog";
|
||||
import Captcha from "@/components/Captcha.vue";
|
||||
import {getSystemInfo} from "@/store/cache";
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const props = defineProps({
|
||||
receiver: String,
|
||||
size: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'mobile'
|
||||
}
|
||||
});
|
||||
const btnText = ref('发送验证码')
|
||||
const canSend = ref(true)
|
||||
const showCaptcha = ref(false)
|
||||
const maxDot = ref(5)
|
||||
const imageBase64 = ref('')
|
||||
const thumbBase64 = ref('')
|
||||
const captKey = ref('')
|
||||
const dots = ref(null)
|
||||
const captchaRef = ref(null)
|
||||
const enableVerify = ref(false)
|
||||
|
||||
const handleRequestCaptCode = () => {
|
||||
|
||||
httpGet('/api/captcha/get').then(res => {
|
||||
const data = res.data
|
||||
imageBase64.value = data.image
|
||||
thumbBase64.value = data.thumb
|
||||
captKey.value = data.key
|
||||
}).catch(e => {
|
||||
showMessageError('获取人机验证数据失败：' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
const handleConfirm = (dots) => {
|
||||
if (lodash.size(dots) <= 0) {
|
||||
return showMessageError('请进行人机验证再操作')
|
||||
}
|
||||
|
||||
let dotArr = []
|
||||
lodash.forEach(dots, (dot) => {
|
||||
dotArr.push(dot.x, dot.y)
|
||||
})
|
||||
dots.value = dotArr.join(',')
|
||||
httpPost('/api/captcha/check', {
|
||||
dots: dots.value,
|
||||
key: captKey.value
|
||||
}).then(() => {
|
||||
// ElMessage.success('人机验证成功')
|
||||
showCaptcha.value = false
|
||||
sendMsg()
|
||||
}).catch(() => {
|
||||
showMessageError('人机验证失败')
|
||||
handleRequestCaptCode()
|
||||
})
|
||||
}
|
||||
|
||||
const loadCaptcha = () => {
|
||||
if (!validateMobile(props.receiver) && !validateEmail(props.receiver)) {
|
||||
return showMessageError("请输入合法的手机号/邮箱地址")
|
||||
}
|
||||
|
||||
showCaptcha.value = true
|
||||
// 手机用滑动验证码
|
||||
if (isMobile()) {
|
||||
getSlideCaptcha()
|
||||
} else {
|
||||
handleRequestCaptCode()
|
||||
}
|
||||
}
|
||||
getSystemInfo().then(res => {
|
||||
enableVerify.value = res.data['enabled_verify']
|
||||
})
|
||||
|
||||
const sendMsg = () => {
|
||||
if (!validateMobile(props.receiver) && props.type === 'mobile') {
|
||||
return showMessageError("请输入合法的手机号")
|
||||
}
|
||||
if (!validateEmail(props.receiver) && props.type === 'email') {
|
||||
return showMessageError("请输入合法的邮箱地址")
|
||||
}
|
||||
|
||||
if (enableVerify.value) {
|
||||
captchaRef.value.loadCaptcha()
|
||||
} else {
|
||||
doSendMsg({})
|
||||
}
|
||||
}
|
||||
|
||||
const doSendMsg = (data) => {
|
||||
if (!canSend.value) {
|
||||
return
|
||||
}
|
||||
|
||||
canSend.value = false
|
||||
httpPost('/api/sms/code', {receiver: props.receiver, key: captKey.value, dots: dots.value}).then(() => {
|
||||
httpPost('/api/sms/code', {receiver: props.receiver, key: data.key, dots: data.dots, x:data.x}).then(() => {
|
||||
showMessageOK('验证码发送成功')
|
||||
let time = 120
|
||||
let time = 60
|
||||
btnText.value = time
|
||||
const handler = setInterval(() => {
|
||||
time = time - 1
|
||||
@@ -132,52 +75,13 @@ const sendMsg = () => {
|
||||
showMessageError('验证码发送失败：' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
// 滑动验证码
|
||||
const bgImg = ref('')
|
||||
const bkImg = ref('')
|
||||
const result = ref(0)
|
||||
|
||||
const getSlideCaptcha = () => {
|
||||
result.value = 0
|
||||
httpGet("/api/captcha/slide/get").then(res => {
|
||||
bkImg.value = res.data.bkImg
|
||||
bgImg.value = res.data.bgImg
|
||||
captKey.value = res.data.key
|
||||
}).catch(e => {
|
||||
showMessageError('获取人机验证数据失败：' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
const handleSlideConfirm = (x) => {
|
||||
httpPost("/api/captcha/slide/check", {
|
||||
key: captKey.value,
|
||||
x: x
|
||||
}).then(() => {
|
||||
result.value = 1
|
||||
showCaptcha.value = false
|
||||
sendMsg()
|
||||
}).catch(() => {
|
||||
result.value = 2
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
.captcha-box {
|
||||
.send-verify-code {
|
||||
.send-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
.el-dialog__header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
93
web/src/components/ThirdLogin.vue
Normal file
93
web/src/components/ThirdLogin.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="showDialog"
|
||||
:close-on-click-modal="true"
|
||||
style="max-width: 400px"
|
||||
@close="close"
|
||||
:title="title"
|
||||
>
|
||||
<div class="third-login" v-loading="loading">
|
||||
<div class="item" v-if="wechatBindURL !== ''">
|
||||
<a class="link" :href="wechatBindURL"><i class="iconfont icon-wechat"></i></a>
|
||||
<span class="text ok" v-if="openid !== ''">已绑定</span>
|
||||
<span class="text" v-else>未绑定</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, ref, watch} from "vue";
|
||||
import {httpGet} from "@/utils/http";
|
||||
import {checkSession} from "@/store/cache";
|
||||
import {showMessageError} from "@/utils/dialog";
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
});
|
||||
const emits = defineEmits(['hide']);
|
||||
|
||||
const showDialog = computed(() => {
|
||||
return props.show
|
||||
})
|
||||
|
||||
|
||||
const title = ref('绑定第三方登录')
|
||||
const openid = ref('')
|
||||
const wechatBindURL = ref('')
|
||||
const loading = ref(true)
|
||||
|
||||
watch(showDialog, (val) => {
|
||||
if (val) {
|
||||
checkSession().then(user => {
|
||||
openid.value = user.openid
|
||||
})
|
||||
const returnURL = `${location.protocol}//${location.host}/login/callback?action=bind`
|
||||
httpGet("/api/user/clogin?return_url="+returnURL).then(res => {
|
||||
wechatBindURL.value = res.data.url
|
||||
loading.value = false
|
||||
}).catch(e => {
|
||||
showMessageError(e.message)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const close = function () {
|
||||
emits('hide');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.third-login {
|
||||
display flex
|
||||
justify-content center
|
||||
min-height 100px
|
||||
|
||||
.item {
|
||||
display flex
|
||||
flex-flow column
|
||||
align-items center
|
||||
|
||||
.link {
|
||||
display flex
|
||||
.iconfont {
|
||||
font-size 30px
|
||||
cursor pointer
|
||||
background #e9f1f6
|
||||
padding 10px
|
||||
border-radius 50%
|
||||
}
|
||||
margin-bottom 10px
|
||||
}
|
||||
|
||||
|
||||
.text {
|
||||
font-size 14px
|
||||
}
|
||||
|
||||
.icon-wechat,.ok {
|
||||
color: #0bc15f;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -20,10 +20,10 @@
|
||||
<div class="dialog-body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<template #footer>
|
||||
<template #footer v-if="!hideFooter">
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="cancel">{{cancelText}}</el-button>
|
||||
<el-button type="primary" @click="$emit('confirm')">{{confirmText}}</el-button>
|
||||
<el-button type="primary" @click="$emit('confirm')" v-if="!hideConfirm">{{confirmText}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@@ -43,6 +43,14 @@ const props = defineProps({
|
||||
type: Number,
|
||||
default: 500,
|
||||
},
|
||||
hideFooter:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hideConfirm:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确定',
|
||||
|
||||
@@ -12,10 +12,22 @@
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<div class="text">正在生成歌曲</div>
|
||||
<div class="text">
|
||||
<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;
|
||||
|
||||
@@ -26,6 +26,12 @@ const routes = [
|
||||
meta: {title: '创作中心'},
|
||||
component: () => import('@/views/ChatPlus.vue'),
|
||||
},
|
||||
{
|
||||
name: 'chat-id',
|
||||
path: '/chat/:id',
|
||||
meta: {title: '创作中心'},
|
||||
component: () => import('@/views/ChatPlus.vue'),
|
||||
},
|
||||
{
|
||||
name: 'image-mj',
|
||||
path: '/mj',
|
||||
@@ -97,6 +103,12 @@ const routes = [
|
||||
meta: {title: 'Suno音乐播放'},
|
||||
component: () => import('@/views/Song.vue'),
|
||||
},
|
||||
{
|
||||
name: 'luma',
|
||||
path: '/luma',
|
||||
meta: {title: 'Luma视频创作'},
|
||||
component: () => import('@/views/Luma.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -228,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: [
|
||||
|
||||
@@ -1,35 +1,20 @@
|
||||
import {httpGet} from "@/utils/http";
|
||||
import Storage from "good-storage";
|
||||
import {showMessageError} from "@/utils/dialog";
|
||||
|
||||
const userDataKey = "USER_INFO_CACHE_KEY"
|
||||
const adminDataKey = "ADMIN_INFO_CACHE_KEY"
|
||||
const systemInfoKey = "SYSTEM_INFO_CACHE_KEY"
|
||||
const licenseInfoKey = "LICENSE_INFO_CACHE_KEY"
|
||||
export function checkSession() {
|
||||
const item = Storage.get(userDataKey) ?? {expire:0, data:null}
|
||||
if (item.expire > Date.now()) {
|
||||
return Promise.resolve(item.data)
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
httpGet('/api/user/session').then(res => {
|
||||
item.data = res.data
|
||||
// cache expires after 5 minutes
|
||||
item.expire = Date.now() + 1000 * 60 * 5
|
||||
Storage.set(userDataKey, item)
|
||||
resolve(item.data)
|
||||
}).catch(err => {
|
||||
resolve(res.data)
|
||||
}).catch(e => {
|
||||
Storage.remove(userDataKey)
|
||||
reject(err)
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export function removeUserInfo() {
|
||||
Storage.remove(userDataKey)
|
||||
}
|
||||
|
||||
export function checkAdminSession() {
|
||||
const item = Storage.get(adminDataKey) ?? {expire:0, data:null}
|
||||
if (item.expire > Date.now()) {
|
||||
@@ -38,12 +23,12 @@ export function checkAdminSession() {
|
||||
return new Promise((resolve, reject) => {
|
||||
httpGet('/api/admin/session').then(res => {
|
||||
item.data = res.data
|
||||
// cache expires after 10 minutes
|
||||
item.expire = Date.now() + 1000 * 60 * 10
|
||||
item.expire = Date.now() + 1000 * 30
|
||||
Storage.set(adminDataKey, item)
|
||||
resolve(item.data)
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
}).catch(e => {
|
||||
Storage.remove(adminDataKey)
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -60,8 +45,7 @@ export function getSystemInfo() {
|
||||
return new Promise((resolve, reject) => {
|
||||
httpGet('/api/config/get?key=system').then(res => {
|
||||
item.data = res
|
||||
// cache expires after 10 minutes
|
||||
item.expire = Date.now() + 1000 * 60 * 10
|
||||
item.expire = Date.now() + 1000 * 30
|
||||
Storage.set(systemInfoKey, item)
|
||||
resolve(item.data)
|
||||
}).catch(err => {
|
||||
@@ -79,12 +63,11 @@ export function getLicenseInfo() {
|
||||
return new Promise((resolve, reject) => {
|
||||
httpGet('/api/config/license').then(res => {
|
||||
item.data = res
|
||||
// cache expires after 10 minutes
|
||||
item.expire = Date.now() + 1000 * 60 * 10
|
||||
item.expire = Date.now() + 1000 * 30
|
||||
Storage.set(licenseInfoKey, item)
|
||||
resolve(item.data)
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
resolve(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import {randString} from "@/utils/libs";
|
||||
import Storage from "good-storage";
|
||||
import {removeAdminInfo, removeUserInfo} from "@/store/cache";
|
||||
import {removeAdminInfo} from "@/store/cache";
|
||||
|
||||
/**
|
||||
* storage handler
|
||||
@@ -18,12 +18,12 @@ export function getUserToken() {
|
||||
}
|
||||
|
||||
export function setUserToken(token) {
|
||||
// 刷新 session 缓存
|
||||
Storage.set(UserTokenKey, token)
|
||||
}
|
||||
|
||||
export function removeUserToken() {
|
||||
Storage.remove(UserTokenKey)
|
||||
removeUserInfo()
|
||||
}
|
||||
|
||||
export function getAdminToken() {
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
import Storage from "good-storage";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const MOBILE_THEME = process.env.VUE_APP_KEY_PREFIX + "MOBILE_THEME"
|
||||
const ADMIN_THEME = process.env.VUE_APP_KEY_PREFIX + "ADMIN_THEME"
|
||||
@@ -62,4 +63,12 @@ export function FormatFileSize(bytes) {
|
||||
const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
export function setRoute(path) {
|
||||
Storage.set(process.env.VUE_APP_KEY_PREFIX + 'ROUTE_',path)
|
||||
}
|
||||
|
||||
export function getRoute() {
|
||||
return Storage.get(process.env.VUE_APP_KEY_PREFIX + 'ROUTE_')
|
||||
}
|
||||
@@ -69,3 +69,17 @@ export function httpPost(url, data = {}, options = {}) {
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export function httpDownload(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios({
|
||||
method: 'GET',
|
||||
url: url,
|
||||
responseType: 'blob' // 将响应类型设置为 `blob`
|
||||
}).then(response => {
|
||||
resolve(response)
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -220,3 +220,12 @@ export function showLoginDialog(router) {
|
||||
});
|
||||
}
|
||||
|
||||
export const replaceImg =(img) => {
|
||||
const devHost = "172.22.11.69"
|
||||
const localhost = "localhost"
|
||||
if (img.includes(localhost)) {
|
||||
return img?.replace(localhost, devHost)
|
||||
}
|
||||
return img
|
||||
}
|
||||
|
||||
|
||||
@@ -89,7 +89,8 @@ onMounted(() => {
|
||||
const getRoles = () => {
|
||||
checkSession().then(user => {
|
||||
roles.value = user.chat_roles
|
||||
}).catch(() => {
|
||||
}).catch(e => {
|
||||
console.log(e.message)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<el-container>
|
||||
<el-aside>
|
||||
<div class="chat-list">
|
||||
<el-button @click="newChat" color="#21aa93">
|
||||
<el-button @click="_newChat" color="#21aa93">
|
||||
<el-icon style="margin-right: 5px">
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
<div class="content" :style="{height: leftBoxHeight+'px'}">
|
||||
<el-row v-for="chat in chatList" :key="chat.chat_id">
|
||||
<div :class="chat.chat_id === activeChat.chat_id?'chat-list-item active':'chat-list-item'"
|
||||
<div :class="chat.chat_id === chatId?'chat-list-item active':'chat-list-item'"
|
||||
@click="loadChat(chat)">
|
||||
<el-image :src="chat.icon" class="avatar"/>
|
||||
<span class="chat-title-input" v-if="chat.edit">
|
||||
@@ -100,11 +100,25 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-dropdown :hide-on-click="false" trigger="click">
|
||||
<span class="setting"><i class="iconfont icon-plugin"></i></span>
|
||||
<template #dropdown>
|
||||
<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-tooltip :content="item.description" placement="right">
|
||||
<el-icon><InfoFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</el-dropdown-item>
|
||||
</el-checkbox-group>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<span class="setting" @click="showChatSetting = true">
|
||||
<el-tooltip class="box-item" effect="dark" content="对话设置">
|
||||
<i class="iconfont icon-config"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<i class="iconfont icon-config"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@@ -184,11 +198,13 @@
|
||||
>
|
||||
<div class="notice">
|
||||
<div v-html="notice"></div>
|
||||
|
||||
<p style="text-align: right">
|
||||
<el-button @click="notShow" type="success" plain>我知道了，不再显示</el-button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="notShow" type="success" plain>我知道了，不再显示</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<ChatSetting :show="showChatSetting" @hide="showChatSetting = false"/>
|
||||
@@ -200,7 +216,7 @@
|
||||
import {nextTick, onMounted, onUnmounted, ref, watch} from 'vue'
|
||||
import ChatPrompt from "@/components/ChatPrompt.vue";
|
||||
import ChatReply from "@/components/ChatReply.vue";
|
||||
import {Delete, Edit, More, Plus, Promotion, Search, Share, VideoPause} from '@element-plus/icons-vue'
|
||||
import {Delete, Edit, InfoFilled, More, Plus, Promotion, Search, Share, VideoPause} from '@element-plus/icons-vue'
|
||||
import 'highlight.js/styles/a11y-dark.css'
|
||||
import {
|
||||
isMobile,
|
||||
@@ -209,7 +225,7 @@ import {
|
||||
UUID
|
||||
} from "@/utils/libs";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getSessionId, getUserToken, removeUserToken} from "@/store/session";
|
||||
import {getSessionId, getUserToken} from "@/store/session";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {useRouter} from "vue-router";
|
||||
import Clipboard from "clipboard";
|
||||
@@ -221,23 +237,22 @@ import FileList from "@/components/FileList.vue";
|
||||
import ChatSetting from "@/components/ChatSetting.vue";
|
||||
import BackTop from "@/components/BackTop.vue";
|
||||
import {showMessageError} from "@/utils/dialog";
|
||||
import hl from "highlight.js";
|
||||
|
||||
const title = ref('ChatGPT-智能助手');
|
||||
const title = ref('GeekAI-智能助手');
|
||||
const models = ref([])
|
||||
const modelID = ref(0)
|
||||
const chatData = ref([]);
|
||||
const allChats = ref([]); // 会话列表
|
||||
const chatList = ref(allChats.value);
|
||||
const activeChat = ref({});
|
||||
const mainWinHeight = ref(0); // 主窗口高度
|
||||
const chatBoxHeight = ref(0); // 聊天内容框高度
|
||||
const leftBoxHeight = ref(0);
|
||||
const loading = ref(true);
|
||||
const loading = ref(false);
|
||||
const loginUser = ref(null);
|
||||
const roles = ref([]);
|
||||
const router = useRouter();
|
||||
const roleId = ref(0)
|
||||
const chatId = ref();
|
||||
const newChatItem = ref(null);
|
||||
const isLogin = ref(false)
|
||||
const showHello = ref(true)
|
||||
@@ -253,7 +268,27 @@ const listStyle = ref(store.chatListStyle)
|
||||
watch(() => store.chatListStyle, (newValue) => {
|
||||
listStyle.value = newValue
|
||||
});
|
||||
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()) {
|
||||
router.replace("/mobile/chat")
|
||||
@@ -289,6 +324,13 @@ httpGet("/api/config/get?key=notice").then(res => {
|
||||
ElMessage.error("获取系统配置失败：" + e.message)
|
||||
})
|
||||
|
||||
// 获取工具函数
|
||||
httpGet("/api/function/list").then(res => {
|
||||
tools.value = res.data
|
||||
}).catch(e => {
|
||||
showMessageError("获取工具函数失败：" + e.message)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
resizeElement();
|
||||
initData()
|
||||
@@ -314,60 +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(() => {
|
||||
loading.value = false
|
||||
// 加载模型
|
||||
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 => {})
|
||||
|
||||
}).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;
|
||||
@@ -417,6 +445,7 @@ const resizeElement = function () {
|
||||
|
||||
const _newChat = () => {
|
||||
if (isLogin.value) {
|
||||
chatId.value = UUID()
|
||||
newChat()
|
||||
}
|
||||
}
|
||||
@@ -427,6 +456,7 @@ const newChat = () => {
|
||||
store.setShowLoginDialog(true)
|
||||
return;
|
||||
}
|
||||
|
||||
const role = getRoleById(roleId.value)
|
||||
showHello.value = role.key === 'gpt';
|
||||
// if the role bind a model, disable model change
|
||||
@@ -456,9 +486,19 @@ const newChat = () => {
|
||||
edit: false,
|
||||
removing: false,
|
||||
};
|
||||
activeChat.value = {} //取消激活的会话高亮
|
||||
showStopGenerate.value = false;
|
||||
connect(null, roleId.value)
|
||||
router.push(`/chat/${chatId.value}`)
|
||||
loadHistory.value = true
|
||||
connect()
|
||||
}
|
||||
|
||||
// 切换工具
|
||||
const changeTool = () => {
|
||||
if (!isLogin.value) {
|
||||
return;
|
||||
}
|
||||
loadHistory.value = false
|
||||
socket.value.close()
|
||||
}
|
||||
|
||||
|
||||
@@ -469,16 +509,18 @@ const loadChat = function (chat) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeChat.value['chat_id'] === chat.chat_id) {
|
||||
if (chatId.value === chat.chat_id) {
|
||||
return;
|
||||
}
|
||||
|
||||
activeChat.value = chat
|
||||
newChatItem.value = null;
|
||||
roleId.value = chat.role_id;
|
||||
modelID.value = chat.model_id;
|
||||
chatId.value = chat.chat_id;
|
||||
showStopGenerate.value = false;
|
||||
connect(chat.chat_id, chat.role_id)
|
||||
router.push(`/chat/${chatId.value}`)
|
||||
loadHistory.value = true
|
||||
socket.value.close()
|
||||
}
|
||||
|
||||
// 编辑会话标题
|
||||
@@ -486,7 +528,6 @@ const tmpChatTitle = ref('');
|
||||
const editChatTitle = (chat) => {
|
||||
chat.edit = true;
|
||||
tmpChatTitle.value = chat.title;
|
||||
console.log(chat.chat_id)
|
||||
nextTick(() => {
|
||||
document.getElementById('chat-' + chat.chat_id).focus()
|
||||
})
|
||||
@@ -541,7 +582,7 @@ const removeChat = function (chat) {
|
||||
return e1.id === e2.id
|
||||
})
|
||||
// 重置会话
|
||||
newChat();
|
||||
_newChat();
|
||||
}).catch(e => {
|
||||
ElMessage.error("操作失败：" + e.message);
|
||||
})
|
||||
@@ -556,23 +597,10 @@ const prompt = ref('');
|
||||
const showStopGenerate = ref(false); // 停止生成
|
||||
const lineBuffer = ref(''); // 输出缓冲行
|
||||
const socket = ref(null);
|
||||
const activelyClose = ref(false); // 主动关闭
|
||||
const canSend = ref(true);
|
||||
const heartbeatHandle = ref(null)
|
||||
const sessionId = ref("")
|
||||
const connect = function (chat_id, role_id) {
|
||||
let isNewChat = false;
|
||||
if (!chat_id) {
|
||||
isNewChat = true;
|
||||
chat_id = UUID();
|
||||
}
|
||||
// 先关闭已有连接
|
||||
if (socket.value !== null) {
|
||||
activelyClose.value = true;
|
||||
socket.value.close();
|
||||
}
|
||||
|
||||
const _role = getRoleById(role_id);
|
||||
const connect = function () {
|
||||
const chatRole = getRoleById(roleId.value);
|
||||
// 初始化 WebSocket 对象
|
||||
sessionId.value = getSessionId();
|
||||
let host = process.env.VUE_APP_WS_HOST
|
||||
@@ -584,26 +612,15 @@ const connect = function (chat_id, role_id) {
|
||||
}
|
||||
}
|
||||
|
||||
const _socket = new WebSocket(host + `/api/chat/new?session_id=${sessionId.value}&role_id=${role_id}&chat_id=${chat_id}&model_id=${modelID.value}&token=${getUserToken()}`);
|
||||
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', () => {
|
||||
chatData.value = []; // 初始化聊天数据
|
||||
enableInput()
|
||||
activelyClose.value = false;
|
||||
|
||||
if (isNewChat) { // 加载打招呼信息
|
||||
loading.value = false;
|
||||
chatData.value.push({
|
||||
chat_id: chat_id,
|
||||
role_id: role_id,
|
||||
type: "reply",
|
||||
id: randString(32),
|
||||
icon: _role['icon'],
|
||||
content: _role['hello_msg'],
|
||||
})
|
||||
ElMessage.success({message: "对话连接成功！", duration: 1000})
|
||||
} else { // 加载聊天记录
|
||||
loadChatHistory(chat_id);
|
||||
if (loadHistory.value) {
|
||||
loadChatHistory(chatId.value)
|
||||
}
|
||||
loading.value = false
|
||||
});
|
||||
|
||||
_socket.addEventListener('message', event => {
|
||||
@@ -618,17 +635,16 @@ const connect = function (chat_id, role_id) {
|
||||
chatData.value.push({
|
||||
type: "reply",
|
||||
id: randString(32),
|
||||
icon: _role['icon'],
|
||||
icon: chatRole['icon'],
|
||||
prompt:prePrompt,
|
||||
content: "",
|
||||
});
|
||||
} else if (data.type === 'end') { // 消息接收完毕
|
||||
// 追加当前会话到会话列表
|
||||
if (isNewChat && newChatItem.value !== null) {
|
||||
if (newChatItem.value !== null) {
|
||||
newChatItem.value['title'] = tmpChatTitle.value;
|
||||
newChatItem.value['chat_id'] = chat_id;
|
||||
newChatItem.value['chat_id'] = chatId.value;
|
||||
chatList.value.unshift(newChatItem.value);
|
||||
activeChat.value = newChatItem.value;
|
||||
newChatItem.value = null; // 只追加一次
|
||||
}
|
||||
|
||||
@@ -640,7 +656,7 @@ const connect = function (chat_id, role_id) {
|
||||
httpPost("/api/chat/tokens", {
|
||||
text: "",
|
||||
model: getModelValue(modelID.value),
|
||||
chat_id: chat_id
|
||||
chat_id: chatId.value,
|
||||
}).then(res => {
|
||||
reply['created_at'] = new Date().getTime();
|
||||
reply['tokens'] = res.data;
|
||||
@@ -661,7 +677,7 @@ const connect = function (chat_id, role_id) {
|
||||
// 将聊天框的滚动条滑动到最底部
|
||||
nextTick(() => {
|
||||
document.getElementById('chat-box').scrollTo(0, document.getElementById('chat-box').scrollHeight)
|
||||
localStorage.setItem("chat_id", chat_id)
|
||||
localStorage.setItem("chat_id", chatId.value)
|
||||
})
|
||||
};
|
||||
}
|
||||
@@ -672,18 +688,8 @@ const connect = function (chat_id, role_id) {
|
||||
});
|
||||
|
||||
_socket.addEventListener('close', () => {
|
||||
if (activelyClose.value || socket.value === null) { // 忽略主动关闭
|
||||
return;
|
||||
}
|
||||
// 停止发送消息
|
||||
disableInput(true)
|
||||
loading.value = true;
|
||||
checkSession().then(() => {
|
||||
connect(chat_id, role_id)
|
||||
}).catch(() => {
|
||||
loading.value = true
|
||||
showMessageError("会话已断开，刷新页面...")
|
||||
});
|
||||
connect()
|
||||
});
|
||||
|
||||
socket.value = _socket;
|
||||
@@ -743,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({
|
||||
@@ -800,21 +810,20 @@ const clearAllChats = function () {
|
||||
})
|
||||
}
|
||||
|
||||
const logout = function () {
|
||||
activelyClose.value = true;
|
||||
httpGet('/api/user/logout').then(() => {
|
||||
removeUserToken()
|
||||
router.push("/login")
|
||||
}).catch(() => {
|
||||
ElMessage.error('注销失败！');
|
||||
})
|
||||
}
|
||||
|
||||
const loadChatHistory = function (chatId) {
|
||||
chatData.value = []
|
||||
httpGet('/api/chat/history?chat_id=' + chatId).then(res => {
|
||||
const data = res.data
|
||||
if (!data) {
|
||||
loading.value = false
|
||||
if (!data || data.length === 0) { // 加载打招呼信息
|
||||
const _role = getRoleById(roleId.value)
|
||||
chatData.value.push({
|
||||
chat_id: chatId,
|
||||
role_id: roleId.value,
|
||||
type: "reply",
|
||||
id: randString(32),
|
||||
icon: _role['icon'],
|
||||
content: _role['hello_msg'],
|
||||
})
|
||||
return
|
||||
}
|
||||
showHello.value = false
|
||||
@@ -828,7 +837,6 @@ const loadChatHistory = function (chatId) {
|
||||
nextTick(() => {
|
||||
document.getElementById('chat-box').scrollTo(0, document.getElementById('chat-box').scrollHeight)
|
||||
})
|
||||
loading.value = false
|
||||
}).catch(e => {
|
||||
// TODO: 显示重新加载按钮
|
||||
ElMessage.error('加载聊天记录失败：' + e.message);
|
||||
@@ -881,7 +889,6 @@ const shareChat = (chat) => {
|
||||
}
|
||||
|
||||
const url = location.protocol + '//' + location.host + '/chat/export?chat_id=' + chat.chat_id
|
||||
// console.log(url)
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
|
||||
|
||||
@@ -206,7 +206,7 @@
|
||||
import {nextTick, onMounted, onUnmounted, ref} from "vue"
|
||||
import {Delete, InfoFilled, Picture} 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 {useSharedStore} from "@/store/sharedata";
|
||||
@@ -338,7 +338,7 @@ const fetchRunningJobs = () => {
|
||||
}
|
||||
// 获取运行中的任务
|
||||
httpGet(`/api/dall/jobs?finish=false`).then(res => {
|
||||
runningJobs.value = res.data
|
||||
runningJobs.value = res.data.items
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取任务失败：" + e.message)
|
||||
})
|
||||
@@ -356,10 +356,10 @@ const fetchFinishJobs = () => {
|
||||
page.value = page.value + 1
|
||||
|
||||
httpGet(`/api/dall/jobs?finish=true&page=${page.value}&page_size=${pageSize.value}`).then(res => {
|
||||
if (res.data.length < pageSize.value) {
|
||||
if (res.data.items.length < pageSize.value) {
|
||||
isOver.value = true
|
||||
}
|
||||
const imageList = res.data
|
||||
const imageList = res.data.items
|
||||
for (let i = 0; i < imageList.length; i++) {
|
||||
imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75"
|
||||
}
|
||||
|
||||
@@ -72,7 +72,6 @@
|
||||
|
||||
<div v-else>
|
||||
<el-button size="small" color="#21aa93" @click="store.setShowLoginDialog(true)" round>登录</el-button>
|
||||
<el-button size="small" @click="router.push('/register')" round>注册</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -224,11 +223,10 @@ const init = () => {
|
||||
const logout = function () {
|
||||
httpGet('/api/user/logout').then(() => {
|
||||
removeUserToken()
|
||||
router.push("/login")
|
||||
// store.setShowLoginDialog(true)
|
||||
// loginUser.value = {}
|
||||
// // 刷新组件
|
||||
// routerViewKey.value += 1
|
||||
store.setShowLoginDialog(true)
|
||||
loginUser.value = {}
|
||||
// 刷新组件
|
||||
routerViewKey.value += 1
|
||||
}).catch(() => {
|
||||
ElMessage.error('注销失败！');
|
||||
})
|
||||
|
||||
@@ -816,7 +816,7 @@ const fetchRunningJobs = () => {
|
||||
}
|
||||
|
||||
httpGet(`/api/mj/jobs?finish=false`).then(res => {
|
||||
const jobs = res.data
|
||||
const jobs = res.data.items
|
||||
const _jobs = []
|
||||
for (let i = 0; i < jobs.length; i++) {
|
||||
if (jobs[i].progress === 101) {
|
||||
@@ -853,7 +853,7 @@ const fetchFinishJobs = () => {
|
||||
page.value = page.value + 1
|
||||
// 获取已完成的任务
|
||||
httpGet(`/api/mj/jobs?finish=true&page=${page.value}&page_size=${pageSize.value}`).then(res => {
|
||||
const jobs = res.data
|
||||
const jobs = res.data.items
|
||||
for (let i = 0; i < jobs.length; i++) {
|
||||
if (jobs[i]['img_url'] !== "") {
|
||||
if (jobs[i].type === 'upscale' || jobs[i].type === 'swapFace') {
|
||||
|
||||
@@ -549,7 +549,6 @@ 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 === '') {
|
||||
@@ -637,7 +636,7 @@ const fetchRunningJobs = () => {
|
||||
|
||||
// 获取运行中的任务
|
||||
httpGet(`/api/sd/jobs?finish=0`).then(res => {
|
||||
runningJobs.value = res.data
|
||||
runningJobs.value = res.data.items
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取任务失败：" + e.message)
|
||||
})
|
||||
@@ -655,10 +654,10 @@ const fetchFinishJobs = () => {
|
||||
page.value = page.value + 1
|
||||
|
||||
httpGet(`/api/sd/jobs?finish=1&page=${page.value}&page_size=${pageSize.value}`).then(res => {
|
||||
if (res.data.length < pageSize.value) {
|
||||
if (res.data.items.length < pageSize.value) {
|
||||
isOver.value = true
|
||||
}
|
||||
const imageList = res.data
|
||||
const imageList = res.data.items
|
||||
for (let i = 0; i < imageList.length; i++) {
|
||||
imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75"
|
||||
}
|
||||
|
||||
@@ -355,13 +355,13 @@ const getNext = () => {
|
||||
}
|
||||
httpGet(`${url}?page=${page.value}&page_size=${pageSize.value}`).then(res => {
|
||||
loading.value = false
|
||||
if (!res.data || res.data.length === 0) {
|
||||
if (!res.data.items || res.data.items.length === 0) {
|
||||
isOver.value = true
|
||||
return
|
||||
}
|
||||
|
||||
// 生成缩略图
|
||||
const imageList = res.data
|
||||
const imageList = res.data.items
|
||||
for (let i = 0; i < imageList.length; i++) {
|
||||
imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75"
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
:ellipsis="false"
|
||||
>
|
||||
<div class="menu-item">
|
||||
<el-image :src="logo" alt="Geek-AI"/>
|
||||
<el-image :src="logo" class="logo" alt="Geek-AI"/>
|
||||
<div class="title" :style="{color:theme.textColor}">{{ title }}</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
@@ -40,7 +40,7 @@
|
||||
|
||||
<div class="navs">
|
||||
<el-space wrap>
|
||||
<div v-for="item in navs" class="nav-item">
|
||||
<div v-for="item in navs" :key="item.url" class="nav-item">
|
||||
<el-button @click="router.push(item.url)" :color="theme.btnBgColor" :style="{color: theme.btnTextColor}" class="shadow" :dark="false">
|
||||
<i :class="'iconfont '+iconMap[item.url]"></i>
|
||||
<span>{{item.name}}</span>
|
||||
@@ -124,6 +124,7 @@ const iconMap =ref(
|
||||
"/apps": "icon-app",
|
||||
"/member": "icon-vip-user",
|
||||
"/invite": "icon-share",
|
||||
"/luma": "icon-luma",
|
||||
}
|
||||
)
|
||||
const bgStyle = {}
|
||||
|
||||
@@ -48,13 +48,15 @@
|
||||
<el-divider class="divider">其他登录方式</el-divider>
|
||||
|
||||
<div class="clogin">
|
||||
<a class="wechat-login" :href="wechatLoginURL"><i class="iconfont icon-wechat"></i></a>
|
||||
<a :href="wechatLoginURL" @click="setRoute(router.currentRoute.value.path)"><i class="iconfont icon-wechat"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<reset-pass @hide="showResetPass = false" :show="showResetPass"/>
|
||||
|
||||
<captcha v-if="enableVerify" @success="doLogin" ref="captchaRef"/>
|
||||
|
||||
<footer-bar/>
|
||||
</div>
|
||||
@@ -73,6 +75,9 @@ import {checkSession, getLicenseInfo, getSystemInfo} from "@/store/cache";
|
||||
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";
|
||||
|
||||
const router = useRouter();
|
||||
const title = ref('Geek-AI');
|
||||
@@ -82,12 +87,15 @@ const showResetPass = ref(false)
|
||||
const logo = ref("")
|
||||
const licenseConfig = ref({})
|
||||
const wechatLoginURL = ref('')
|
||||
const enableVerify = ref(false)
|
||||
const captchaRef = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
// 获取系统配置
|
||||
getSystemInfo().then(res => {
|
||||
logo.value = res.data.logo
|
||||
title.value = res.data.title
|
||||
enableVerify.value = res.data['enabled_verify']
|
||||
}).catch(e => {
|
||||
showMessageError("获取系统配置失败：" + e.message)
|
||||
})
|
||||
@@ -107,7 +115,7 @@ onMounted(() => {
|
||||
}).catch(() => {
|
||||
})
|
||||
|
||||
const returnURL = `${location.protocol}//${location.host}/login/callback`
|
||||
const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`
|
||||
httpGet("/api/user/clogin?return_url="+returnURL).then(res => {
|
||||
wechatLoginURL.value = res.data.url
|
||||
}).catch(e => {
|
||||
@@ -129,7 +137,21 @@ const login = function () {
|
||||
return showMessageError('请输入密码');
|
||||
}
|
||||
|
||||
httpPost('/api/user/login', {username: username.value.trim(), password: password.value.trim()}).then((res) => {
|
||||
if (enableVerify.value) {
|
||||
captchaRef.value.loadCaptcha()
|
||||
} else {
|
||||
doLogin({})
|
||||
}
|
||||
}
|
||||
|
||||
const doLogin = (verifyData) => {
|
||||
httpPost('/api/user/login', {
|
||||
username: username.value.trim(),
|
||||
password: password.value.trim(),
|
||||
key: verifyData.key,
|
||||
dots: verifyData.dots,
|
||||
x: verifyData.x
|
||||
}).then((res) => {
|
||||
setUserToken(res.data.token)
|
||||
if (isMobile()) {
|
||||
router.push('/mobile')
|
||||
@@ -141,7 +163,6 @@ const login = function () {
|
||||
showMessageError('登录失败，' + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
@@ -24,7 +24,8 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="finishLogin">我知道了</el-button>
|
||||
<el-button type="primary" class="copy-user-info" :data-clipboard-text="'用户名：'+username+' 密码：'+password">复制</el-button>
|
||||
<el-button type="danger" @click="finishLogin">关闭</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</el-dialog>
|
||||
@@ -33,12 +34,15 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from "vue"
|
||||
import {onMounted, onUnmounted, ref} from "vue"
|
||||
import {useRouter} from "vue-router"
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {httpGet} from "@/utils/http";
|
||||
import {setUserToken} from "@/store/session";
|
||||
import {isMobile} from "@/utils/libs";
|
||||
import Clipboard from "clipboard";
|
||||
import {showMessageError, showMessageOK} from "@/utils/dialog";
|
||||
import {getRoute} from "@/store/system";
|
||||
import {checkSession} from "@/store/cache";
|
||||
|
||||
const winHeight = ref(window.innerHeight)
|
||||
const loading = ref(true)
|
||||
@@ -49,12 +53,24 @@ const password = ref('')
|
||||
|
||||
|
||||
const code = router.currentRoute.value.query.code
|
||||
const action = router.currentRoute.value.query.action
|
||||
if (code === "") {
|
||||
ElMessage.error({message: "登录失败：code 参数不能为空",duration: 2000, onClose: () => router.push("/")})
|
||||
} else {
|
||||
checkSession().then(user => {
|
||||
// bind user
|
||||
doLogin(user.id)
|
||||
}).catch(() => {
|
||||
doLogin(0)
|
||||
})
|
||||
}
|
||||
|
||||
const doLogin = (userId) => {
|
||||
// 发送请求获取用户信息
|
||||
httpGet("/api/user/clogin/callback",{login_type: "wx",code: code}).then(res => {
|
||||
setUserToken(res.data.token)
|
||||
httpGet("/api/user/clogin/callback",{login_type: "wx",code: code, action:action, user_id: userId}).then(res => {
|
||||
if (res.data.token) {
|
||||
setUserToken(res.data.token)
|
||||
}
|
||||
if (res.data.username) {
|
||||
username.value = res.data.username
|
||||
password.value = res.data.password
|
||||
@@ -74,12 +90,26 @@ if (code === "") {
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const clipboard = ref(null)
|
||||
onMounted(() => {
|
||||
clipboard.value = new Clipboard('.copy-user-info');
|
||||
clipboard.value.on('success', () => {
|
||||
showMessageOK('复制成功！');
|
||||
})
|
||||
|
||||
clipboard.value.on('error', () => {
|
||||
showMessageError('复制失败！');
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clipboard.value.destroy();
|
||||
})
|
||||
|
||||
const finishLogin = () => {
|
||||
if (isMobile()) {
|
||||
router.push('/mobile')
|
||||
} else {
|
||||
router.push('/chat')
|
||||
}
|
||||
show.value = false
|
||||
router.push(getRoute())
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
342
web/src/views/Luma.vue
Normal file
342
web/src/views/Luma.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<div class="page-luma">
|
||||
<div class="prompt-box">
|
||||
<div class="images">
|
||||
<template v-for="(img, index) in images" :key="img">
|
||||
<div class="item">
|
||||
<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">
|
||||
<i class="iconfont icon-exchange" @click="switchReverse"></i>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="prompt-container">
|
||||
<div class="input-container">
|
||||
<div class="upload-icon" v-if="images.length < 2">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:auto-upload="true"
|
||||
:show-file-list="false"
|
||||
:http-request="upload"
|
||||
accept=".jpg,.png,.jpeg"
|
||||
>
|
||||
<i class="iconfont icon-image"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
<textarea
|
||||
class="prompt-input"
|
||||
:rows="row"
|
||||
v-model="formData.prompt"
|
||||
placeholder="请输入提示词或者上传图片"
|
||||
autofocus>
|
||||
</textarea>
|
||||
<div class="send-icon" @click="create">
|
||||
<i class="iconfont icon-send"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="params">
|
||||
<div class="item-group">
|
||||
<span class="label">循环参考图</span>
|
||||
<el-switch v-model="formData.loop" size="small" style="--el-switch-on-color:#BF78BF;" />
|
||||
</div>
|
||||
<div class="item-group">
|
||||
<span class="label">提示词优化</span>
|
||||
<el-switch v-model="formData.expand_prompt" size="small" style="--el-switch-on-color:#BF78BF;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
<div class="left">
|
||||
<div class="container">
|
||||
<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="failed" v-if="item.progress === 101">任务执行失败：{{item.err_msg}}，任务提示词：{{item.prompt}}</div>
|
||||
<div class="prompt" v-else>{{item.prompt}}</div>
|
||||
</div>
|
||||
<div class="right" v-if="item.progress === 100">
|
||||
<div class="tools">
|
||||
<button class="btn btn-publish">
|
||||
<span class="text">发布</span>
|
||||
<black-switch v-model:value="item.publish" @change="publishJob(item)" size="small" />
|
||||
</button>
|
||||
|
||||
<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 />
|
||||
</button>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="light" content="删除" placement="top">
|
||||
<button class="btn btn-icon" @click="removeJob(item)">
|
||||
<i class="iconfont icon-remove"></i>
|
||||
</button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<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 />
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination v-if="total > pageSize" background
|
||||
style="--el-pagination-button-bg-color:#414141;
|
||||
--el-pagination-button-color:#d1d1d1;
|
||||
--el-disabled-bg-color:#414141;
|
||||
--el-color-primary:#666666;
|
||||
--el-pagination-hover-color:#e1e1e1"
|
||||
layout="total,prev, pager, next"
|
||||
:hide-on-single-page="true"
|
||||
v-model:current-page="page"
|
||||
v-model:page-size="pageSize"
|
||||
@current-change="fetchData(page)"
|
||||
: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">
|
||||
您的浏览器不支持视频播放
|
||||
</video>
|
||||
</black-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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, 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";
|
||||
|
||||
const showDialog = ref(false)
|
||||
const currentVideoUrl = ref('')
|
||||
const row = ref(1)
|
||||
const images = ref([])
|
||||
|
||||
const formData = reactive({
|
||||
prompt: '',
|
||||
expand_prompt: false,
|
||||
loop: false,
|
||||
first_frame_img: '',
|
||||
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()
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
checkSession().then(user => {
|
||||
userId.value = user.id
|
||||
connect()
|
||||
})
|
||||
fetchData(1)
|
||||
})
|
||||
|
||||
const download = (item) => {
|
||||
const url = replaceImg(item.video_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 play = (item) => {
|
||||
currentVideoUrl.value = replaceImg(item.video_url)
|
||||
showDialog.value = true
|
||||
}
|
||||
|
||||
const removeJob = (item) => {
|
||||
ElMessageBox.confirm(
|
||||
'此操作将会删除任务相关文件，继续操作码?',
|
||||
'删除提示',
|
||||
{
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
httpGet("/api/video/remove", {id: item.id}).then(() => {
|
||||
ElMessage.success("任务删除成功")
|
||||
fetchData()
|
||||
}).catch(e => {
|
||||
ElMessage.error("任务删除失败：" + e.message)
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
|
||||
const publishJob = (item) => {
|
||||
httpGet("/api/video/publish", {id: item.id, publish:item.publish}).then(() => {
|
||||
ElMessage.success("操作成功")
|
||||
}).catch(e => {
|
||||
ElMessage.error("操作失败：" + e.message)
|
||||
})
|
||||
}
|
||||
|
||||
const upload = (file) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file.file, file.name);
|
||||
// 执行上传操作
|
||||
httpPost('/api/upload', formData).then((res) => {
|
||||
images.value.push(res.data.url)
|
||||
ElMessage.success({message: "上传成功", duration: 500})
|
||||
}).catch((e) => {
|
||||
ElMessage.error('图片上传失败:' + e.message)
|
||||
})
|
||||
};
|
||||
|
||||
const remove = (img) => {
|
||||
images.value = images.value.filter(item => item !== img)
|
||||
}
|
||||
|
||||
const switchReverse = () => {
|
||||
images.value = images.value.reverse()
|
||||
}
|
||||
const loading = ref(false)
|
||||
const list = ref([])
|
||||
const noData = ref(true)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(0)
|
||||
const fetchData = (_page) => {
|
||||
if (_page) {
|
||||
page.value = _page
|
||||
}
|
||||
httpGet("/api/video/list",{page:page.value, page_size:pageSize.value, type: 'luma'}).then(res => {
|
||||
total.value = res.data.total
|
||||
loading.value = false
|
||||
list.value = res.data.items
|
||||
noData.value = list.value.length === 0
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
noData.value = true
|
||||
})
|
||||
}
|
||||
|
||||
// 创建视频
|
||||
const create = () => {
|
||||
|
||||
const len = images.value.length;
|
||||
if(len){
|
||||
formData.first_frame_img = images.value[0]
|
||||
if(len === 2){
|
||||
formData.end_frame_img = images.value[1]
|
||||
}
|
||||
}
|
||||
|
||||
httpPost("/api/video/luma/create", formData).then(() => {
|
||||
fetchData(1)
|
||||
showMessageOK("创建任务成功")
|
||||
}).catch(e => {
|
||||
showMessageError("创建任务失败："+e.message)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import "@/assets/css/luma.styl"
|
||||
</style>
|
||||
@@ -201,7 +201,6 @@ window.onresize = () => {
|
||||
}
|
||||
|
||||
const socket = ref(null)
|
||||
const heartbeatHandle = ref(0)
|
||||
const connect = (userId) => {
|
||||
if (socket.value !== null) {
|
||||
socket.value.close()
|
||||
@@ -216,24 +215,9 @@ const connect = (userId) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 心跳函数
|
||||
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/markMap/client?user_id=${userId}&model_id=${modelID.value}`);
|
||||
_socket.addEventListener('open', () => {
|
||||
socket.value = _socket;
|
||||
// 发送心跳消息
|
||||
sendHeartbeat()
|
||||
});
|
||||
|
||||
_socket.addEventListener('message', event => {
|
||||
|
||||
@@ -7,13 +7,19 @@
|
||||
|
||||
<el-row class="user-opt" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
|
||||
<el-button type="primary" @click="showBindEmailDialog = true">绑定邮箱</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" @click="showBindMobileDialog = true">更改账号</el-button>
|
||||
<el-button type="primary" @click="showBindMobileDialog = true">绑定手机</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" @click="showThirdLoginDialog = true">第三方登录</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-button type="success" @click="showRedeemVerifyDialog = true">兑换码核销
|
||||
<el-button type="primary" @click="showRedeemVerifyDialog = true">卡密兑换
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
@@ -93,8 +99,10 @@
|
||||
<password-dialog v-if="isLogin" :show="showPasswordDialog" @hide="showPasswordDialog = false"
|
||||
@logout="logout"/>
|
||||
|
||||
<bind-mobile v-if="isLogin" :show="showBindMobileDialog" :username="user.username"
|
||||
@hide="showBindMobileDialog = 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"/>
|
||||
|
||||
@@ -143,13 +151,15 @@ 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/ResetAccount.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";
|
||||
|
||||
const list = ref([])
|
||||
const showPayDialog = ref(false)
|
||||
@@ -157,9 +167,11 @@ 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 showRedeemVerifyDialog = ref(false);
|
||||
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)
|
||||
|
||||
@@ -23,8 +23,8 @@
|
||||
--el-table-row-hover-bg-color:#373C47;
|
||||
--el-table-header-bg-color:#474E5C;
|
||||
--el-table-text-color:#d1d1d1">
|
||||
<el-table-column prop="username" label="用户"/>
|
||||
<el-table-column prop="model" label="模型"/>
|
||||
<el-table-column prop="username" label="用户" width="130px"/>
|
||||
<el-table-column prop="model" label="模型" width="130px"/>
|
||||
<el-table-column prop="type" label="类型">
|
||||
<template #default="scope">
|
||||
<el-tag size="small" :type="tagColors[scope.row.type]">{{ scope.row.type_str }}</el-tag>
|
||||
@@ -39,7 +39,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="balance" label="余额"/>
|
||||
<el-table-column label="发生时间">
|
||||
<el-table-column label="发生时间" width="160px">
|
||||
<template #default="scope">
|
||||
<span>{{ dateFormat(scope.row['created_at']) }}</span>
|
||||
</template>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<send-msg size="large" :receiver="data.username"/>
|
||||
<send-msg size="large" :receiver="data.username" type="mobile"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@@ -50,7 +50,7 @@
|
||||
<div class="block">
|
||||
<el-input placeholder="邮箱地址"
|
||||
size="large"
|
||||
v-model="data.username"
|
||||
v-model="data.email"
|
||||
autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
@@ -74,7 +74,7 @@
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<send-msg size="large" :receiver="data.username"/>
|
||||
<send-msg size="large" :receiver="data.email" type="email"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@@ -135,13 +135,17 @@
|
||||
|
||||
<el-row class="btn-row" :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-button class="login-btn" type="primary" size="large" @click="submitRegister">注册</el-button>
|
||||
<el-button class="login-btn" type="primary" size="large" @click="submitRegister" >注册</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="text-line">
|
||||
已经有账号？
|
||||
<el-link type="primary" @click="router.push('/login')">登录</el-link>
|
||||
<el-row class="text-line" :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-link type="primary" @click="router.push('/login')">登录</el-link>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-link type="primary" @click="router.push('/')">首页</el-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
@@ -160,6 +164,8 @@
|
||||
</el-result>
|
||||
</div>
|
||||
|
||||
<captcha v-if="enableVerify" @success="doSubmitRegister" ref="captchaRef"/>
|
||||
|
||||
<footer class="footer" v-if="!licenseConfig.de_copy">
|
||||
<footer-bar/>
|
||||
</footer>
|
||||
@@ -182,6 +188,7 @@ import {setUserToken} from "@/store/session";
|
||||
import {validateEmail, validateMobile} from "@/utils/validate";
|
||||
import {showMessageError, showMessageOK} from "@/utils/dialog";
|
||||
import {getLicenseInfo, getSystemInfo} from "@/store/cache";
|
||||
import Captcha from "@/components/Captcha.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const title = ref('');
|
||||
@@ -201,6 +208,13 @@ const enableRegister = ref(true)
|
||||
const activeName = ref("mobile")
|
||||
const wxImg = ref("/images/wx.png")
|
||||
const licenseConfig = ref({})
|
||||
const enableVerify = ref(false)
|
||||
const captchaRef = ref(null)
|
||||
|
||||
// 记录邀请码点击次数
|
||||
if (data.value.invite_code) {
|
||||
httpGet("/api/invite/hits",{code: data.value.invite_code})
|
||||
}
|
||||
|
||||
getSystemInfo().then(res => {
|
||||
if (res.data) {
|
||||
@@ -222,6 +236,7 @@ getSystemInfo().then(res => {
|
||||
if (res.data['wechat_card_url'] !== '') {
|
||||
wxImg.value = res.data['wechat_card_url']
|
||||
}
|
||||
enableVerify.value = res.data['enabled_verify']
|
||||
}
|
||||
}).catch(e => {
|
||||
ElMessage.error("获取系统配置失败：" + e.message)
|
||||
@@ -257,9 +272,21 @@ const submitRegister = () => {
|
||||
if ((activeName.value === 'mobile' || activeName.value === 'email') && data.value.code === '') {
|
||||
return showMessageError('请输入验证码');
|
||||
}
|
||||
|
||||
if (enableVerify.value) {
|
||||
captchaRef.value.loadCaptcha()
|
||||
} else {
|
||||
doSubmitRegister({})
|
||||
}
|
||||
}
|
||||
|
||||
const doSubmitRegister = (verifyData) => {
|
||||
data.value.key = verifyData.key
|
||||
data.value.dots = verifyData.dots
|
||||
data.value.x = verifyData.x
|
||||
data.value.reg_way = activeName.value
|
||||
httpPost('/api/user/register', data.value).then((res) => {
|
||||
setUserToken(res.data)
|
||||
setUserToken(res.data.token)
|
||||
showMessageOK({
|
||||
"message": "注册成功，即将跳转到对话主界面...",
|
||||
onClose: () => router.push("/chat"),
|
||||
@@ -313,6 +340,7 @@ const submitRegister = () => {
|
||||
.el-image {
|
||||
width 120px;
|
||||
cursor pointer
|
||||
border-radius 50%
|
||||
}
|
||||
}
|
||||
|
||||
@@ -357,6 +385,10 @@ const submitRegister = () => {
|
||||
justify-content center
|
||||
padding-top 10px;
|
||||
font-size 14px;
|
||||
|
||||
.el-col {
|
||||
text-align center
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,20 @@
|
||||
<el-tooltip effect="light" content="定义模式" placement="top">
|
||||
<black-switch v-model:value="custom" size="large" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="light" content="请上传6-60秒的原始音频，检测到人声的音频将仅设为私人音频。" placement="bottom-end">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:auto-upload="true"
|
||||
:show-file-list="false"
|
||||
:http-request="uploadAudio"
|
||||
accept=".wav,.mp3"
|
||||
>
|
||||
<el-button class="upload-music" color="#363030" round>
|
||||
<i class="iconfont icon-upload"></i>
|
||||
<span>上传音乐</span>
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</el-tooltip>
|
||||
<black-select v-model:value="data.model" :options="models" placeholder="请选择模型" style="width: 100px" />
|
||||
</div>
|
||||
|
||||
@@ -28,10 +42,10 @@
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="item"
|
||||
v-loading="generating"
|
||||
v-loading="isGenerating"
|
||||
element-loading-text="正在生成歌词..."
|
||||
element-loading-background="rgba(122, 122, 122, 0.8)">
|
||||
<black-input v-model:value="data.lyrics" type="textarea" :rows="10" placeholder="请在这里输入你自己写的歌词..."/>
|
||||
<black-input v-model:value="data.lyrics" type="textarea" :rows="10" :placeholder="promptPlaceholder"/>
|
||||
<button class="btn btn-lyric" @click="createLyric">生成歌词</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -137,7 +151,7 @@
|
||||
</div>
|
||||
<div class="right-box" v-loading="loading" element-loading-background="rgba(100,100,100,0.3)">
|
||||
<div class="list-box" v-if="!noData">
|
||||
<div v-for="item in list">
|
||||
<div v-for="item in list" :key="item.id">
|
||||
<div class="item" v-if="item.progress === 100">
|
||||
<div class="left">
|
||||
<div class="container">
|
||||
@@ -151,13 +165,18 @@
|
||||
<div class="center">
|
||||
<div class="title">
|
||||
<a :href="'/song/'+item.song_id" target="_blank">{{item.title}}</a>
|
||||
<span class="model">{{item.major_model_version}}</span>
|
||||
<span class="model" v-if="item.major_model_version">{{item.major_model_version}}</span>
|
||||
<span class="model" v-if="item.type === 4">用户上传</span>
|
||||
<span class="model" v-if="item.type === 3">
|
||||
<i class="iconfont icon-mp3"></i>
|
||||
完整歌曲
|
||||
</span>
|
||||
<span class="model" v-if="item.ref_song">
|
||||
<i class="iconfont icon-link"></i>
|
||||
{{item.ref_song.title}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="tags">{{item.tags}}</div>
|
||||
<div class="tags" v-if="item.tags">{{item.tags}}</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="tools">
|
||||
@@ -178,6 +197,12 @@
|
||||
</a>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="light" content="获取完整歌曲" placement="top" v-if="item.ref_song">
|
||||
<button class="btn btn-icon" @click="merge(item)">
|
||||
<i class="iconfont icon-concat"></i>
|
||||
</button>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="light" content="复制歌曲链接" placement="top">
|
||||
<button class="btn btn-icon copy-link" :data-clipboard-text="getShareURL(item)" >
|
||||
<i class="iconfont icon-share1"></i>
|
||||
@@ -209,7 +234,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>
|
||||
@@ -276,13 +301,13 @@ import MusicPlayer from "@/components/MusicPlayer.vue";
|
||||
import {compact} from "lodash";
|
||||
import {httpGet, httpPost} from "@/utils/http";
|
||||
import {showMessageError, showMessageOK} from "@/utils/dialog";
|
||||
import Generating from "@/components/ui/Generating.vue";
|
||||
import {checkSession} from "@/store/cache";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {formatTime} 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";
|
||||
|
||||
const winHeight = ref(window.innerHeight - 50)
|
||||
const custom = ref(false)
|
||||
@@ -329,6 +354,7 @@ const btnText = ref("开始创作")
|
||||
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)
|
||||
@@ -422,7 +448,11 @@ const create = () => {
|
||||
data.value.ref_task_id = refSong.value ? refSong.value.task_id : ""
|
||||
data.value.ref_song_id = refSong.value ? refSong.value.song_id : ""
|
||||
data.value.extend_secs = refSong.value ? refSong.value.extend_secs : 0
|
||||
if (custom.value) {
|
||||
if (refSong.value) {
|
||||
if (data.value.extend_secs > refSong.value.duration) {
|
||||
return showMessageError("续写开始时间不能超过原歌曲长度")
|
||||
}
|
||||
} else if (custom.value) {
|
||||
if (data.value.lyrics === "") {
|
||||
return showMessageError("请输入歌词")
|
||||
}
|
||||
@@ -434,9 +464,6 @@ const create = () => {
|
||||
return showMessageError("请输入歌曲描述")
|
||||
}
|
||||
}
|
||||
if (refSong.value && data.value.extend_secs > refSong.value.duration) {
|
||||
return showMessageError("续写开始时间不能超过原歌曲长度")
|
||||
}
|
||||
|
||||
httpPost("/api/suno/create", data.value).then(() => {
|
||||
fetchData(1)
|
||||
@@ -446,6 +473,35 @@ const create = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 拼接歌曲
|
||||
const merge = (item) => {
|
||||
httpPost("/api/suno/create", {song_id: item.song_id, type:3}).then(() => {
|
||||
fetchData(1)
|
||||
showMessageOK("创建任务成功")
|
||||
}).catch(e => {
|
||||
showMessageError("合并歌曲失败："+e.message)
|
||||
})
|
||||
}
|
||||
|
||||
const uploadAudio = (file) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file.file, file.name);
|
||||
// 执行上传操作
|
||||
httpPost('/api/upload', formData).then((res) => {
|
||||
httpPost("/api/suno/create", {audio_url: res.data.url, title:res.data.name, type:4}).then(() => {
|
||||
fetchData(1)
|
||||
showMessageOK("歌曲上传成功")
|
||||
}).catch(e => {
|
||||
showMessageError("歌曲上传失败："+e.message)
|
||||
})
|
||||
removeRefSong()
|
||||
ElMessage.success({message: "上传成功", duration: 500})
|
||||
}).catch((e) => {
|
||||
ElMessage.error('文件传失败:' + e.message)
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
// 续写歌曲
|
||||
const extend = (item) => {
|
||||
refSong.value = item
|
||||
@@ -453,6 +509,7 @@ const extend = (item) => {
|
||||
data.value.title = item.title
|
||||
custom.value = true
|
||||
btnText.value = "续写歌曲"
|
||||
promptPlaceholder.value = "输入额外的歌词，根据您之前的歌词来扩展歌曲..."
|
||||
}
|
||||
|
||||
// 更细歌曲
|
||||
@@ -485,6 +542,7 @@ watch(() => custom.value, (newValue) => {
|
||||
const removeRefSong = () => {
|
||||
refSong.value = null
|
||||
btnText.value = "开始创作"
|
||||
promptPlaceholder.value = "请在这里输入你自己写的歌词..."
|
||||
}
|
||||
|
||||
const play = (item) => {
|
||||
@@ -553,21 +611,21 @@ const uploadCover = (file) => {
|
||||
});
|
||||
}
|
||||
|
||||
const generating = ref(false)
|
||||
const isGenerating = ref(false)
|
||||
const createLyric = () => {
|
||||
if (data.value.lyrics === "") {
|
||||
return showMessageError("请输入歌词描述")
|
||||
}
|
||||
generating.value = true
|
||||
isGenerating.value = true
|
||||
httpPost("/api/suno/lyric", {prompt: data.value.lyrics}).then(res => {
|
||||
const lines = res.data.split('\n');
|
||||
data.value.title = lines.shift().replace(/\*/g,"")
|
||||
lines.shift()
|
||||
data.value.lyrics = lines.join('\n');
|
||||
generating.value = false
|
||||
isGenerating.value = false
|
||||
}).catch(e => {
|
||||
showMessageError("歌词生成失败："+e.message)
|
||||
generating.value = false
|
||||
isGenerating.value = false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -17,7 +17,10 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="应用名称" prop="name">
|
||||
<template #default="scope">
|
||||
<span class="sort" :data-id="scope.row.id">{{ scope.row.name }}</span>
|
||||
<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="key"/>
|
||||
@@ -373,6 +376,14 @@ const uploadImg = (file) => {
|
||||
}
|
||||
}
|
||||
|
||||
.sort {
|
||||
cursor move
|
||||
.iconfont {
|
||||
position relative
|
||||
top 1px
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding 20px 0
|
||||
display flex
|
||||
|
||||
@@ -13,7 +13,10 @@
|
||||
<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">{{ scope.row.name }}</span>
|
||||
<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 prop="value" label="模型值">
|
||||
@@ -346,6 +349,14 @@ const remove = function (row) {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.sort {
|
||||
cursor move
|
||||
.iconfont {
|
||||
position relative
|
||||
top 1px
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding 20px 0
|
||||
display flex
|
||||
|
||||
@@ -37,6 +37,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<captcha v-if="enableVerify" @success="doLogin" ref="captchaRef"/>
|
||||
|
||||
<footer class="footer">
|
||||
<footer-bar/>
|
||||
</footer>
|
||||
@@ -54,12 +56,15 @@ import {useRouter} from "vue-router";
|
||||
import FooterBar from "@/components/FooterBar.vue";
|
||||
import {setAdminToken} from "@/store/session";
|
||||
import {checkAdminSession, getSystemInfo} from "@/store/cache";
|
||||
import Captcha from "@/components/Captcha.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const title = ref('Geek-AI Console');
|
||||
const username = ref(process.env.VUE_APP_ADMIN_USER);
|
||||
const password = ref(process.env.VUE_APP_ADMIN_PASS);
|
||||
const logo = ref("")
|
||||
const enableVerify = ref(false)
|
||||
const captchaRef = ref(null)
|
||||
|
||||
checkAdminSession().then(() => {
|
||||
router.push("/admin")
|
||||
@@ -70,6 +75,7 @@ checkAdminSession().then(() => {
|
||||
getSystemInfo().then(res => {
|
||||
title.value = res.data.admin_title
|
||||
logo.value = res.data.logo
|
||||
enableVerify.value = res.data['enabled_verify']
|
||||
}).catch(e => {
|
||||
ElMessage.error("加载系统配置失败: " + e.message)
|
||||
})
|
||||
@@ -87,8 +93,21 @@ const login = function () {
|
||||
if (password.value === '') {
|
||||
return ElMessage.error('请输入密码');
|
||||
}
|
||||
if (enableVerify.value) {
|
||||
captchaRef.value.loadCaptcha()
|
||||
} else {
|
||||
doLogin({})
|
||||
}
|
||||
}
|
||||
|
||||
httpPost('/api/admin/login', {username: username.value.trim(), password: password.value.trim()}).then(res => {
|
||||
const doLogin = function (verifyData) {
|
||||
httpPost('/api/admin/login', {
|
||||
username: username.value.trim(),
|
||||
password: password.value.trim(),
|
||||
key: verifyData.key,
|
||||
dots: verifyData.dots,
|
||||
x: verifyData.x
|
||||
}).then(res => {
|
||||
setAdminToken(res.data.token)
|
||||
router.push("/admin")
|
||||
}).catch((e) => {
|
||||
@@ -126,6 +145,7 @@ const login = function () {
|
||||
.el-image {
|
||||
width 120px;
|
||||
cursor pointer
|
||||
border-radius 50%
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,10 @@
|
||||
<el-table :data="items" :row-key="row => row.id" table-layout="auto">
|
||||
<el-table-column prop="name" label="菜单名称">
|
||||
<template #default="scope">
|
||||
<span class="sort" :data-id="scope.row.id">{{ scope.row.name }}</span>
|
||||
<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 prop="icon" label="菜单图标">
|
||||
@@ -240,6 +243,14 @@ const uploadImg = (file) => {
|
||||
height 36px
|
||||
}
|
||||
|
||||
.sort {
|
||||
cursor move
|
||||
.iconfont {
|
||||
position relative
|
||||
top 1px
|
||||
}
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
@@ -9,7 +9,10 @@
|
||||
<el-table :data="items" :row-key="row => row.id" table-layout="auto">
|
||||
<el-table-column prop="name" label="产品名称">
|
||||
<template #default="scope">
|
||||
<span class="sort" :data-id="scope.row.id">{{ scope.row.name }}</span>
|
||||
<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 prop="price" label="产品价格"/>
|
||||
@@ -227,6 +230,14 @@ const remove = function (row) {
|
||||
}
|
||||
}
|
||||
|
||||
.sort {
|
||||
cursor move
|
||||
.iconfont {
|
||||
position relative
|
||||
top 1px
|
||||
}
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
@@ -107,6 +107,24 @@
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="启用验证码" prop="enabled_verify">
|
||||
<div class="tip-input">
|
||||
<el-switch v-model="system['enabled_verify']"/>
|
||||
<div class="info">
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
content="启用验证码之后，注册登录都会加载行为验证码，增加安全性。此功能需要购买验证码服务才会生效。"
|
||||
raw-content
|
||||
placement="right"
|
||||
>
|
||||
<el-icon>
|
||||
<InfoFilled/>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="注册方式" prop="register_ways">
|
||||
<el-checkbox-group v-model="system['register_ways']">
|
||||
<el-checkbox value="mobile">手机注册</el-checkbox>
|
||||
@@ -284,6 +302,9 @@
|
||||
<el-form-item label="Suno 算力" prop="suno_power">
|
||||
<el-input v-model.number="system['suno_power']" placeholder="使用 Suno 生成一首音乐消耗算力"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Luma 算力" prop="luma_power">
|
||||
<el-input v-model.number="system['luma_power']" placeholder="使用 Luma 生成一段视频消耗算力"/>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
@@ -358,6 +379,12 @@
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<h3>激活后可获得以下权限：</h3>
|
||||
<ol class="active-info">
|
||||
<li>1、使用任意第三方中转 API KEY，而不用局限于 GeekAI 推荐的白名单列表</li>
|
||||
<li>2、可以在相关页面去除 GeekAI 的版权信息，或者修改为自己的版权信息</li>
|
||||
</ol>
|
||||
|
||||
<el-form :model="system" label-width="150px" label-position="right">
|
||||
<el-form-item label="许可授权码" prop="license">
|
||||
<el-input v-model="licenseKey"/>
|
||||
@@ -574,6 +601,11 @@ const onUploadImg = (files, callback) => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.active-info {
|
||||
line-height 1.5
|
||||
padding 10px 0 30px 0
|
||||
}
|
||||
.el-descriptions {
|
||||
margin-bottom 20px
|
||||
.el-icon {
|
||||
|
||||
@@ -3,15 +3,16 @@
|
||||
<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>
|
||||
<el-table :data="users.items" border class="table" :row-key="row => row.id"
|
||||
@selection-change="handleSelectionChange" table-layout="auto">
|
||||
<el-table-column type="selection" width="38"></el-table-column>
|
||||
<el-table-column prop="mobile" label="账号">
|
||||
<el-table-column prop="id" label="ID"/>
|
||||
<el-table-column label="账号">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.username }}</span>
|
||||
<el-image v-if="scope.row.vip" :src="vipImg" style="height: 20px;position: relative; top:5px; left: 5px"/>
|
||||
@@ -169,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: []})
|
||||
@@ -262,9 +263,7 @@ const removeUser = function (user) {
|
||||
).then(() => {
|
||||
httpGet('/api/admin/user/remove', {id: user.id}).then(() => {
|
||||
ElMessage.success('操作成功！')
|
||||
users.value.items = removeArrayItem(users.value.items, user, function (v1, v2) {
|
||||
return v1.id === v2.id
|
||||
})
|
||||
fetchUserList(users.value.page, users.value.page_size)
|
||||
}).catch((e) => {
|
||||
ElMessage.error('操作失败，' + e.message)
|
||||
})
|
||||
@@ -282,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
|
||||
@@ -307,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) => {
|
||||
|
||||
@@ -225,10 +225,7 @@ const newChat = (item) => {
|
||||
}
|
||||
showPicker.value = false
|
||||
const options = item.selectedOptions
|
||||
router.push({
|
||||
name: "mobile-chat-session",
|
||||
params: {role_id: options[0].value, model_id: options[1].value, title: '新建会话', chat_id: 0}
|
||||
})
|
||||
router.push(`/mobile/chat/session?title=新对话&role_id=${options[0].value}&model_id=${options[1].value}&chat_id=0}`)
|
||||
}
|
||||
|
||||
const changeChat = (chat) => {
|
||||
|
||||
@@ -102,6 +102,7 @@
|
||||
<van-popup v-model:show="showPicker" position="bottom" class="popup">
|
||||
<van-picker
|
||||
:columns="columns"
|
||||
v-model="selectedValues"
|
||||
title="选择模型和角色"
|
||||
@cancel="showPicker = false"
|
||||
@confirm="newChat"
|
||||
@@ -153,6 +154,7 @@ const loginUser = ref(null)
|
||||
// const showMic = ref(false)
|
||||
const showPicker = ref(false)
|
||||
const columns = ref([roles.value, models.value])
|
||||
const selectedValues = ref([roleId.value, modelId.value])
|
||||
|
||||
checkSession().then(user => {
|
||||
loginUser.value = user
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="mobile-user-profile container">
|
||||
<div class="content">
|
||||
<van-form>
|
||||
<van-form v-if="isLogin">
|
||||
<div class="avatar">
|
||||
<van-image :src="fileList[0].url" size="80" width="80" fit="cover" round />
|
||||
<!-- <van-uploader v-model="fileList"-->
|
||||
@@ -160,7 +160,7 @@ import {httpGet, httpPost} from "@/utils/http";
|
||||
import Compressor from 'compressorjs';
|
||||
import {dateFormat, isWeChatBrowser, showLoginDialog} from "@/utils/libs";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {checkSession} from "@/store/cache";
|
||||
import {checkSession, getSystemInfo} from "@/store/cache";
|
||||
import {useRouter} from "vue-router";
|
||||
import {removeUserToken} from "@/store/session";
|
||||
import bus from '@/store/eventbus'
|
||||
|
||||
@@ -165,7 +165,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} from "@/store/cache";
|
||||
import {checkSession, getSystemInfo} from "@/store/cache";
|
||||
import {useRouter} from "vue-router";
|
||||
import {getSessionId} from "@/store/session";
|
||||
import {
|
||||
@@ -183,7 +183,6 @@ const listBoxHeight = ref(window.innerHeight - 40)
|
||||
const mjBoxHeight = ref(window.innerHeight - 150)
|
||||
const item = ref({})
|
||||
const isLogin = ref(false)
|
||||
const activeColspan = ref([""])
|
||||
|
||||
window.onresize = () => {
|
||||
listBoxHeight.value = window.innerHeight - 40
|
||||
@@ -318,7 +317,7 @@ const initData = () => {
|
||||
const fetchRunningJobs = () => {
|
||||
// 获取运行中的任务
|
||||
httpGet(`/api/dall/jobs?finish=0`).then(res => {
|
||||
const jobs = res.data
|
||||
const jobs = res.data.items
|
||||
const _jobs = []
|
||||
for (let i = 0; i < jobs.length; i++) {
|
||||
if (jobs[i].progress === -1) {
|
||||
@@ -346,13 +345,14 @@ const pageSize = ref(10)
|
||||
const fetchFinishJobs = (page) => {
|
||||
loading.value = true
|
||||
httpGet(`/api/dall/jobs?finish=1&page=${page}&page_size=${pageSize.value}`).then(res => {
|
||||
if (res.data.length < pageSize.value) {
|
||||
const jobs = res.data.items
|
||||
if (jobs.length < pageSize.value) {
|
||||
finished.value = true
|
||||
}
|
||||
if (page === 1) {
|
||||
finishedJobs.value = res.data
|
||||
finishedJobs.value = jobs
|
||||
} else {
|
||||
finishedJobs.value = finishedJobs.value.concat(res.data)
|
||||
finishedJobs.value = finishedJobs.value.concat(jobs)
|
||||
}
|
||||
loading.value = false
|
||||
}).catch(e => {
|
||||
|
||||
@@ -430,7 +430,7 @@ const connect = () => {
|
||||
// 获取运行中的任务
|
||||
const fetchRunningJobs = (userId) => {
|
||||
httpGet(`/api/mj/jobs?finish=0&user_id=${userId}`).then(res => {
|
||||
const jobs = res.data
|
||||
const jobs = res.data.items
|
||||
const _jobs = []
|
||||
for (let i = 0; i < jobs.length; i++) {
|
||||
if (jobs[i].progress === -1) {
|
||||
@@ -462,7 +462,7 @@ const fetchFinishJobs = (page) => {
|
||||
loading.value = true
|
||||
// 获取已完成的任务
|
||||
httpGet(`/api/mj/jobs?finish=1&page=${page}&page_size=${pageSize.value}`).then(res => {
|
||||
const jobs = res.data
|
||||
const jobs = res.data.items
|
||||
for (let i = 0; i < jobs.length; i++) {
|
||||
if (jobs[i].progress === 101) {
|
||||
showNotify({
|
||||
|
||||
@@ -382,7 +382,7 @@ const initData = () => {
|
||||
const fetchRunningJobs = () => {
|
||||
// 获取运行中的任务
|
||||
httpGet(`/api/sd/jobs?finish=0`).then(res => {
|
||||
const jobs = res.data
|
||||
const jobs = res.data.items
|
||||
const _jobs = []
|
||||
for (let i = 0; i < jobs.length; i++) {
|
||||
if (jobs[i].progress === -1) {
|
||||
@@ -410,13 +410,14 @@ const pageSize = ref(10)
|
||||
const fetchFinishJobs = (page) => {
|
||||
loading.value = true
|
||||
httpGet(`/api/sd/jobs?finish=1&page=${page}&page_size=${pageSize.value}`).then(res => {
|
||||
if (res.data.length < pageSize.value) {
|
||||
const jobs = res.data.items
|
||||
if (jobs.length < pageSize.value) {
|
||||
finished.value = true
|
||||
}
|
||||
if (page === 1) {
|
||||
finishedJobs.value = res.data
|
||||
finishedJobs.value = jobs
|
||||
} else {
|
||||
finishedJobs.value = finishedJobs.value.concat(res.data)
|
||||
finishedJobs.value = finishedJobs.value.concat(jobs)
|
||||
}
|
||||
loading.value = false
|
||||
}).catch(e => {
|
||||
|
||||
@@ -134,13 +134,13 @@ const onLoad = () => {
|
||||
const d = data.value[activeName.value]
|
||||
httpGet(`${d.url}?status=1&page=${d.page}&page_size=${d.pageSize}&publish=true`).then(res => {
|
||||
d.loading = false
|
||||
if (res.data.length === 0) {
|
||||
if (res.data.items.length === 0) {
|
||||
d.finished = true
|
||||
return
|
||||
}
|
||||
|
||||
// 生成缩略图
|
||||
const imageList = res.data
|
||||
const imageList = res.data.items
|
||||
for (let i = 0; i < imageList.length; i++) {
|
||||
imageList[i]["img_thumb"] = imageList[i]["img_url"] + "?imageView2/4/w/300/h/0/q/75"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user