From 6d9b9bd3f7678fbbb92cb3adc91f6a2518433a3a Mon Sep 17 00:00:00 2001 From: RockYang Date: Wed, 24 Jan 2024 17:34:30 +0800 Subject: [PATCH] feat: use vant replace element-plus as mobile UI framework --- web/public/index.html | 2 +- web/src/assets/css/mobile/apps.css | 17 - web/src/assets/css/mobile/apps.styl | 20 - web/src/assets/css/mobile/chat-list.css | 47 -- web/src/assets/css/mobile/chat-list.styl | 58 -- web/src/assets/css/mobile/chat-session.css | 57 +- web/src/assets/css/mobile/chat-session.styl | 112 +-- web/src/assets/css/mobile/custom-scroll.css | 13 - web/src/assets/css/mobile/custom-scroll.styl | 26 - web/src/assets/css/mobile/home.css | 45 -- web/src/assets/css/mobile/home.styl | 45 -- web/src/assets/css/mobile/image-list.css | 252 ------- web/src/assets/css/mobile/image-list.styl | 106 --- web/src/assets/css/mobile/image-sd.css | 252 ------- web/src/assets/css/mobile/image-sd.styl | 106 --- web/src/assets/css/mobile/invitation.css | 93 --- web/src/assets/css/mobile/invitation.styl | 94 --- web/src/assets/css/mobile/profile.css | 142 ---- web/src/assets/css/mobile/profile.styl | 149 ---- web/src/assets/css/mobile/sd-task-dialog.css | 72 -- web/src/assets/css/mobile/sd-task-dialog.styl | 96 --- web/src/assets/css/mobile/task-list.css | 106 --- web/src/assets/css/mobile/task-list.styl | 142 ---- web/src/router.js | 16 +- web/src/views/ChatPlus.vue | 22 +- web/src/views/ImageMj.vue | 21 +- web/src/views/mobile/Apps.vue | 15 - web/src/views/mobile/ChatList.vue | 46 +- web/src/views/mobile/ChatSession.vue | 248 ++++--- web/src/views/mobile/Home.vue | 58 +- web/src/views/mobile/ImageSd.vue | 657 ------------------ web/src/views/mobile/Invitation.vue | 152 ---- web/src/views/mobile/Profile.vue | 365 +++------- 33 files changed, 437 insertions(+), 3215 deletions(-) delete mode 100644 web/src/assets/css/mobile/apps.css delete mode 100644 web/src/assets/css/mobile/apps.styl delete mode 100644 web/src/assets/css/mobile/chat-list.css delete mode 100644 web/src/assets/css/mobile/chat-list.styl delete mode 100644 web/src/assets/css/mobile/custom-scroll.css delete mode 100644 web/src/assets/css/mobile/custom-scroll.styl delete mode 100644 web/src/assets/css/mobile/home.css delete mode 100644 web/src/assets/css/mobile/home.styl delete mode 100644 web/src/assets/css/mobile/image-list.css delete mode 100644 web/src/assets/css/mobile/image-list.styl delete mode 100644 web/src/assets/css/mobile/image-sd.css delete mode 100644 web/src/assets/css/mobile/image-sd.styl delete mode 100644 web/src/assets/css/mobile/invitation.css delete mode 100644 web/src/assets/css/mobile/invitation.styl delete mode 100644 web/src/assets/css/mobile/profile.css delete mode 100644 web/src/assets/css/mobile/profile.styl delete mode 100644 web/src/assets/css/mobile/sd-task-dialog.css delete mode 100644 web/src/assets/css/mobile/sd-task-dialog.styl delete mode 100644 web/src/assets/css/mobile/task-list.css delete mode 100644 web/src/assets/css/mobile/task-list.styl delete mode 100644 web/src/views/mobile/Apps.vue delete mode 100644 web/src/views/mobile/ImageSd.vue delete mode 100644 web/src/views/mobile/Invitation.vue diff --git a/web/public/index.html b/web/public/index.html index 9b7921be..4a3b2b4e 100644 --- a/web/public/index.html +++ b/web/public/index.html @@ -4,7 +4,7 @@ - + ChatGPT-Plus diff --git a/web/src/assets/css/mobile/apps.css b/web/src/assets/css/mobile/apps.css deleted file mode 100644 index 8def06a8..00000000 --- a/web/src/assets/css/mobile/apps.css +++ /dev/null @@ -1,17 +0,0 @@ -.title { - color: #fff; - text-align: center; - font-size: 16px; - font-weight: bold; -} -.app-background { - background-color: #282828; - height: 100vh; -} -.mobile-setting .content { - padding-top: 60px; -} -.mobile-setting .content .van-field__label { - width: 100px; - text-align: right; -} diff --git a/web/src/assets/css/mobile/apps.styl b/web/src/assets/css/mobile/apps.styl deleted file mode 100644 index 235dcbd4..00000000 --- a/web/src/assets/css/mobile/apps.styl +++ /dev/null @@ -1,20 +0,0 @@ -.title { - color #fff - text-align center - font-size 16px - font-weight bold -} -.app-background { - background-color #282828 - height 100vh -} -.mobile-setting { - .content { - padding-top 60px - - .van-field__label { - width 100px - text-align right - } - } -} \ No newline at end of file diff --git a/web/src/assets/css/mobile/chat-list.css b/web/src/assets/css/mobile/chat-list.css deleted file mode 100644 index 88410db8..00000000 --- a/web/src/assets/css/mobile/chat-list.css +++ /dev/null @@ -1,47 +0,0 @@ -.app-background { - background-color: #1c1c1c; - height: 100vh; -} -.mobile-chat-list { - background-color: #1c1c1c; - position: absolute; - top: 40px; - width: 100%; -} -.content .van-cell__value .chat-list-item { - display: flex; - font-size: 16px; - color: #fff; - background-color: #1c1c1c; -} -.content .van-cell__value .chat-list-item .van-image { - min-width: 32px; - width: 32px; - height: 32px; -} -.content .van-cell__value .chat-list-item .van-ellipsis { - margin-top: 5px; - margin-left: 10px; -} -.van-picker-column .picker-option { - display: flex; - width: 100%; - padding: 0 10px; -} -.van-picker-column .picker-option .van-image { - width: 20px; - height: 20px; - margin-right: 5px; -} -.van-nav-bar .van-nav-bar__right .van-icon { - font-size: 20px; -} -.popup { - background-color: #1c1c1c; -} -.dialog { - background-color: #1c1c1c; -} -.field { - background-color: #1c1c1c; -} diff --git a/web/src/assets/css/mobile/chat-list.styl b/web/src/assets/css/mobile/chat-list.styl deleted file mode 100644 index a5362d80..00000000 --- a/web/src/assets/css/mobile/chat-list.styl +++ /dev/null @@ -1,58 +0,0 @@ -$fontSize = 16px; -.app-background { - background-color: #1c1c1c; - height: 100vh; -} -.mobile-chat-list { - background-color: #1c1c1c; - position: absolute; - top: 40px; - width: 100%; -} - .content { - .van-cell__value { - .chat-list-item { - display flex - font-size $fontSize - color: #fff; - background-color: #1c1c1c; - .van-image { - min-width 32px - width 32px - height 32px - } - .van-ellipsis { - margin-top 5px; - margin-left 10px; - } - } - } - } - .van-picker-column { - .picker-option { - display flex - width 100% - padding 0 10px - .van-image { - width 20px; - height 20px; - margin-right 5px - } - } - } - .van-nav-bar { - .van-nav-bar__right { - .van-icon { - font-size 20px; - } - } - } - .popup { - background-color: #1c1c1c; - } - .dialog { - background-color: #1c1c1c; - } - .field { - background-color: #1c1c1c; - } \ No newline at end of file diff --git a/web/src/assets/css/mobile/chat-session.css b/web/src/assets/css/mobile/chat-session.css index 1d077298..ca21ccaa 100644 --- a/web/src/assets/css/mobile/chat-session.css +++ b/web/src/assets/css/mobile/chat-session.css @@ -1,45 +1,36 @@ -.app-background { - background-color: #1c1c1c; - height: 100vh; +.mobile-chat .message-list-box { + padding-top: 50px; + padding-bottom: 10px; + overflow-x: auto; + background: #f5f5f5; } -body, -.mobile-chat, -.van-sticky, -.van-nav-bar, -.van-list, -.message-list-box, -.van-cell, -.chat-box, -.van-cell-group, -.van-field { - background-color: #1c1c1c !important; - color: #fff !important; +.mobile-chat .message-list-box .van-cell { + background: none; + font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; } -.chat-box-wrapper { - position: fixed; - bottom: 0; - width: 100%; - background-color: #1c1c1c; +.mobile-chat .chat-box-wrapper .van-sticky .van-cell-group--inset { + margin: 0; } -.icon-box .van-icon, -.mobile-chat .van-nav-bar__title .van-dropdown-menu__title, -.mobile-chat .van-nav-bar__title .van-cell__title, -.mobile-chat .van-nav-bar__right .van-icon { - color: #fff !important; +.mobile-chat .chat-box-wrapper .van-sticky .van-cell-group--inset .van-cell { + padding: 10px; +} +.mobile-chat .chat-box-wrapper .van-sticky .van-cell-group--inset .van-cell .icon-box .van-icon { + font-size: 24px; + margin: 10px 0; +} +.mobile-chat .chat-box-wrapper .van-sticky .van-cell-group--inset .van-cell .button-voice { + padding: 0 5px; + height: 30px; } .mobile-chat .van-nav-bar__title .van-dropdown-menu__title { - margin-right: 15px; + margin-right: 10px; } .mobile-chat .van-nav-bar__title .van-cell__title { text-align: left; } -.mobile-chat .chat-list-wrapper { - position: fixed; - top: 50px; - bottom: 60px; - width: 100vw; - overflow-y: scroll; -} .mobile-chat .van-nav-bar__right .van-icon { font-size: 20px; } +.van-theme-dark .mobile-chat .message-list-box { + background: #232425; +} diff --git a/web/src/assets/css/mobile/chat-session.styl b/web/src/assets/css/mobile/chat-session.styl index 861cc8b6..9d6dbf89 100644 --- a/web/src/assets/css/mobile/chat-session.styl +++ b/web/src/assets/css/mobile/chat-session.styl @@ -1,51 +1,61 @@ -.app-background { - background-color #1c1c1c - height 100vh - } - body, - .mobile-chat, - .van-sticky, - .van-nav-bar, - .van-list, - .message-list-box - .van-cell, - .chat-box, - .van-cell-group, - .van-field { - background-color #1c1c1c !important - color #fff !important - } - .chat-box-wrapper { - position fixed - bottom 0 - width 100% - background-color #1c1c1c - } - .icon-box .van-icon, - .mobile-chat .van-nav-bar__title .van-dropdown-menu__title, - .mobile-chat .van-nav-bar__title .van-cell__title, - .mobile-chat .van-nav-bar__right .van-icon { - color #fff !important - } - .mobile-chat { - .van-nav-bar__title { - .van-dropdown-menu__title { - margin-right 15px - } - .van-cell__title { - text-align left - } - } - .chat-list-wrapper { - position fixed - top 50px - bottom 60px - width 100vw - overflow-y scroll - } - .van-nav-bar__right { - .van-icon { - font-size 20px - } - } - } \ No newline at end of file +.mobile-chat { + .message-list-box { + padding-top 50px + padding-bottom 10px + overflow-x auto + background #F5F5F5; + + .van-cell { + background none + font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; + } + } + + .chat-box-wrapper { + .van-sticky { + .van-cell-group--inset { + margin 0 + + .van-cell { + padding 10px + + .icon-box { + .van-icon { + font-size 24px + margin 10px 0 + } + } + + .button-voice { + padding 0 5px + height 30px + } + } + } + } + } + + .van-nav-bar__title { + .van-dropdown-menu__title { + margin-right 10px + } + + .van-cell__title { + text-align left + } + } + + .van-nav-bar__right { + .van-icon { + font-size 20px + } + } +} + +.van-theme-dark { + .mobile-chat { + .message-list-box { + background #232425; + } + } +} \ No newline at end of file diff --git a/web/src/assets/css/mobile/custom-scroll.css b/web/src/assets/css/mobile/custom-scroll.css deleted file mode 100644 index eb7e1d0a..00000000 --- a/web/src/assets/css/mobile/custom-scroll.css +++ /dev/null @@ -1,13 +0,0 @@ -.custom-scroll ::-webkit-scrollbar { - width: 8px; /* 滚动条宽度 */ -} -.custom-scroll ::-webkit-scrollbar-track { - background-color: #282c34; -} -.custom-scroll ::-webkit-scrollbar-thumb { - background-color: #444; - border-radius: 8px; -} -.custom-scroll ::-webkit-scrollbar-thumb:hover { - background-color: #666; -} diff --git a/web/src/assets/css/mobile/custom-scroll.styl b/web/src/assets/css/mobile/custom-scroll.styl deleted file mode 100644 index eb03fff7..00000000 --- a/web/src/assets/css/mobile/custom-scroll.styl +++ /dev/null @@ -1,26 +0,0 @@ -.custom-scroll { - /* 修改滚动条的颜色 */ - - ::-webkit-scrollbar { - width: 8px; /* 滚动条宽度 */ - } - - /* 修改滚动条轨道的背景颜色 */ - - ::-webkit-scrollbar-track { - background-color: #282C34; - } - - /* 修改滚动条的滑块颜色 */ - - ::-webkit-scrollbar-thumb { - background-color: #444444; - border-radius 8px - } - - /* 修改滚动条的滑块的悬停颜色 */ - - ::-webkit-scrollbar-thumb:hover { - background-color: #666666; - } -} \ No newline at end of file diff --git a/web/src/assets/css/mobile/home.css b/web/src/assets/css/mobile/home.css deleted file mode 100644 index 25214688..00000000 --- a/web/src/assets/css/mobile/home.css +++ /dev/null @@ -1,45 +0,0 @@ -.my-tabbar { - background-color: #171717; - box-shadow: -3px 4px 16px #000; - box-sizing: border-box; -} -.banner { - display: flex; - justify-content: center; - align-items: center; - background-color: #171717; - border-bottom-right-radius: 10px; - box-shadow: 0 -4px 13px #000; - height: 40px; - width: 100%; - position: fixed; - z-index: 2 /* Add z-index */; -} -.banner-title { - color: #2cc995; - font-size: 20px; - font-weight: bold; - text-shadow: 0 -4px 13px #000; -} -.mobile-home { - background-color: #171717; -} -.mobile-home .van-tabbar before { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 50px; - background-color: #171717; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - opacity: 0; - transition: opacity 0.5s; - z-index: -1; -} -.mobile-home .van-tabbar.activeTab before { - opacity: 1; -} -.router-view { - margin-bottom: 50px; -} diff --git a/web/src/assets/css/mobile/home.styl b/web/src/assets/css/mobile/home.styl deleted file mode 100644 index d03c2a51..00000000 --- a/web/src/assets/css/mobile/home.styl +++ /dev/null @@ -1,45 +0,0 @@ -.my-tabbar { - background-color #171717 - box-shadow -3px 4px 16px #000 - box-sizing border-box -} -.banner { - display flex - justify-content center - align-items center - background-color #171717 - border-bottom-right-radius 10px - box-shadow 0 -4px 13px #000 - height 40px - width 100% - position fixed - z-index 2 /* Add z-index */ -} -.banner-title { - color #2CC995 - font-size 20px - font-weight bold - text-shadow 0 -4px 13px #000 -} -.mobile-home { - background-color #171717 -} -.mobile-home .van-tabbar before { - position absolute - bottom 0 - left 0 - right 0 - height 50px - background-color #171717 - border-top-left-radius 10px - border-top-right-radius 10px - opacity 0 - transition opacity 0.5s - z-index -1 -} -.mobile-home .van-tabbar.activeTab before { - opacity 1 -} -.router-view { - margin-bottom 50px -} \ No newline at end of file diff --git a/web/src/assets/css/mobile/image-list.css b/web/src/assets/css/mobile/image-list.css deleted file mode 100644 index 909001cc..00000000 --- a/web/src/assets/css/mobile/image-list.css +++ /dev/null @@ -1,252 +0,0 @@ - -.page-sd { - background-color: #282828; -} -.page-sd .inner { - display: flex; -} -.page-sd .inner .sd-box { - margin: 10px; - background-color: #282828; - min-width: 92%; - max-width: 92%; - padding: 0px; - border-radius: 0px; - color: #fff; - font-size: 14px; -} -.page-sd .inner .sd-box h2 { - font-weight: bold; - font-size: 20px; - text-align: center; - color: #fff; -} -.page-sd .inner .sd-box ::-webkit-scrollbar { - width: 0; - height: 0; - background-color: transparent; -} -.page-sd .inner .sd-box .sd-params { - margin-top: 10px; - overflow: auto; -} -.page-sd .inner .sd-box .sd-params .param-line { - padding: 0 10px; -} -.page-sd .inner .sd-box .sd-params .param-line .el-icon { - position: relative; - top: 3px; -} -.page-sd .inner .sd-box .sd-params .param-line .el-input__suffix-inner .el-icon { - top: 0; -} -.page-sd .inner .sd-box .sd-params .param-line .grid-content, -.page-sd .inner .sd-box .sd-params .param-line .form-item-inner { - display: flex; -} -.page-sd .inner .sd-box .sd-params .param-line .grid-content .el-icon, -.page-sd .inner .sd-box .sd-params .param-line .form-item-inner .el-icon { - margin-left: 10px; - margin-top: 2px; -} -.page-sd .inner .sd-box .sd-params .param-line.pt { - padding-top: 5px; - padding-bottom: 5px; -} -.page-sd .inner .sd-box .submit-btn { - padding: 10px 15px 0 15px; - text-align: center; -} -.page-sd .inner .sd-box .submit-btn .el-button { - width: 100%; -} -.page-sd .inner .sd-box .submit-btn .el-button span { - color: #2d3a4b; -} -.page-sd .inner .el-form .el-form-item__label { - color: #fff; -} -.page-sd .inner .task-list-box { - width: 100%; - padding: 10px; - color: #fff; - overflow-x: hidden; -} -.page-sd .inner .task-list-box .running-job-list .job-item { - width: 100%; - padding: 2px; - background-color: #555; -} -.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner { - position: relative; - height: 100%; - overflow: hidden; -} -.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner .progress { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - display: flex; - justify-content: center; - align-items: center; -} -.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner .progress span { - font-size: 20px; - color: #fff; -} -.page-sd .inner .task-list-box .finish-job-list .job-item { - width: 100%; - height: 100%; - border: 1px solid #666; - padding: 6px; - overflow: hidden; - border-radius: 6px; - transition: all 0.3s ease; /* 添加过渡效果 */ -} -.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line { - margin: 6px 0; -} -.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul { - display: flex; - flex-flow: row; -} -.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li { - margin-right: 6px; -} -.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a { - padding: 3px 0; - width: 40px; - text-align: center; - border-radius: 5px; - display: block; - cursor: pointer; - background-color: #4e5058; - color: #fff; -} -.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover { - background-color: #6d6f78; -} -.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt { - font-size: 20px; - cursor: pointer; -} -.page-sd .inner .task-list-box .finish-job-list .animate:hover { - box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */ - transform: translateY(-10px); /* 向上移动10像素 */ -} -.page-sd .inner .task-list-box .el-image { - width: 100%; - height: 100%; - overflow: visible; -} -.page-sd .inner .task-list-box .el-image img { - height: 100%; -} -.page-sd .inner .task-list-box .el-image .el-image-viewer__wrapper img { - width: auto; - height: auto; -} -.page-sd .inner .task-list-box .el-image .image-slot { - display: flex; - flex-flow: column; - justify-content: center; - align-items: center; - height: 100%; - min-height: 200px; - color: #fff; - height: 240px; -} -.page-sd .inner .task-list-box .el-image .image-slot .iconfont { - font-size: 50px; - margin-bottom: 10px; -} -.page-sd .inner .task-list-box .el-image.upscale { - max-height: 100%; -} -.page-sd .inner .task-list-box .el-image.upscale img { - height: 100%; -} -.page-sd .inner .task-list-box .el-image.upscale .el-image-viewer__wrapper img { - width: auto; - height: auto; -} -.page-sd .el-overlay-dialog .el-dialog { - background-color: #1a1b1e; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__header .el-dialog__title { - color: #f5f5f5; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body { - padding: 0 0 0 15px !important; - display: flex; - height: 100%; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row { - width: 100%; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container { - display: flex; - justify-content: center; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot { - display: flex; - height: 100vh; - align-items: center; - justify-content: center; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot .el-icon { - font-size: 60px; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info { - background-color: #25262b; - padding: 1rem 1.5rem; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line { - width: 100%; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .prompt { - background-color: #35363b; - padding: 10px; - color: #999; - overflow: auto; - max-height: 100%; - min-height: 100%; - position: relative; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .prompt .el-icon { - position: absolute; - right: 10px; - bottom: 10px; - cursor: pointer; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper { - margin-top: 10px; - display: flex; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper label { - display: flex; - width:100%; - color: #a5a5a5; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper .item-value { - display: flex; - width: 100%; - background-color: #35363b; - padding: 2px 5px; - border-radius: 5px; - color: #f5f5f5; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params { - padding: 20px 0 10px 0; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params .el-button { - width: 100%; -} -.page-sd .mj-list-item-prompt .el-icon { - margin-left: 10px; - cursor: pointer; - position: relative; - top: 2px; -} diff --git a/web/src/assets/css/mobile/image-list.styl b/web/src/assets/css/mobile/image-list.styl deleted file mode 100644 index c01efe10..00000000 --- a/web/src/assets/css/mobile/image-list.styl +++ /dev/null @@ -1,106 +0,0 @@ -.page-sd { - background-color: #282828; - - .inner { - display: flex; - align-items: center; - justify-content: center; - - .sd-box { - background-color #282828 - min-width 92% - max-width 92% - padding 0px - border-radius 0px - color #ffffff; - font-size 14px - - h2 { - font-weight: bold; - font-size 20px - text-align center - color #fff - } - - // 隐藏滚动条 - - ::-webkit-scrollbar { - width: 0; - height: 0; - background-color: transparent; - } - - .sd-params { - margin-top 10px - overflow auto - - - .param-line { - padding 0 10px - - .el-icon { - position relative - top 3px - } - - .el-input__suffix-inner { - .el-icon { - top 0 - } - } - - .grid-content - .form-item-inner { - display flex - - .el-icon { - margin-left 10px - margin-top 2px - } - } - - } - - .param-line.pt { - padding-top 5px - padding-bottom 5px - } - } - - .submit-btn { - padding 10px 15px 0 15px - text-align center - - .el-button { - width 100% - - span { - color #2D3A4B - } - } - } - } - - .el-form { - .el-form-item__label { - color #ffffff - } - } - - @import "mobile/task-mobile-list.styl" - } - - @import "sd-task-mobile-dialog.styl" - - - .mj-list-item-prompt { - .el-icon { - margin-left 10px - cursor pointer - position relative - top 2px - } - } - -} - diff --git a/web/src/assets/css/mobile/image-sd.css b/web/src/assets/css/mobile/image-sd.css deleted file mode 100644 index 6502ea4c..00000000 --- a/web/src/assets/css/mobile/image-sd.css +++ /dev/null @@ -1,252 +0,0 @@ -.page-sd { - background-color: #282828; -} -.page-sd .inner { - display: flex; - align-items: center; - justify-content: center; -} -.page-sd .inner .sd-box { - background-color: #282828; - min-width: 92%; - max-width: 92%; - padding: 0px; - border-radius: 0px; - color: #fff; - font-size: 14px; -} -.page-sd .inner .sd-box h2 { - font-weight: bold; - font-size: 16px; - text-align: center; - color: #fff; -} -.page-sd .inner .sd-box ::-webkit-scrollbar { - width: 0; - height: 0; - background-color: transparent; -} -.page-sd .inner .sd-box .sd-params { - margin-top: 10px; - overflow: auto; -} -.page-sd .inner .sd-box .sd-params .param-line { - padding: 0 10px; -} -.page-sd .inner .sd-box .sd-params .param-line .el-icon { - position: relative; - top: 3px; -} -.page-sd .inner .sd-box .sd-params .param-line .el-input__suffix-inner .el-icon { - top: 0; -} -.page-sd .inner .sd-box .sd-params .param-line .grid-content, -.page-sd .inner .sd-box .sd-params .param-line .form-item-inner { - display: flex; -} -.page-sd .inner .sd-box .sd-params .param-line .grid-content .el-icon, -.page-sd .inner .sd-box .sd-params .param-line .form-item-inner .el-icon { - margin-left: 10px; - margin-top: 2px; -} -.page-sd .inner .sd-box .sd-params .param-line.pt { - padding-top: 5px; - padding-bottom: 5px; -} -.page-sd .inner .sd-box .submit-btn { - padding: 10px 15px 0 15px; - text-align: center; -} -.page-sd .inner .sd-box .submit-btn .el-button { - width: 100%; -} -.page-sd .inner .sd-box .submit-btn .el-button span { - color: #2d3a4b; -} -.page-sd .inner .el-form .el-form-item__label { - color: #fff; -} -.page-sd .inner .task-list-box { - width: 100%; - padding: 5px; - color: #fff; - overflow-x: hidden; -} -.page-sd .inner .task-list-box .running-job-list .job-item { - width: 100%; - padding: 2px; - background-color: #555; -} -.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner { - position: relative; - height: 100%; - overflow: hidden; -} -.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner .progress { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - display: flex; - justify-content: center; - align-items: center; -} -.page-sd .inner .task-list-box .running-job-list .job-item .job-item-inner .progress span { - font-size: 20px; - color: #fff; -} -.page-sd .inner .task-list-box .finish-job-list .job-item { - width: 100%; - height: 100%; - border: 1px solid #666; - padding: 6px; - overflow: hidden; - border-radius: 6px; - transition: all 0.3s ease; /* 添加过渡效果 */ -} -.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line { - margin: 6px 0; -} -.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul { - display: flex; - flex-flow: row; -} -.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li { - margin-right: 6px; -} -.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a { - padding: 3px 0; - width: 40px; - text-align: center; - border-radius: 5px; - display: block; - cursor: pointer; - background-color: #4e5058; - color: #fff; -} -.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover { - background-color: #6d6f78; -} -.page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt { - font-size: 20px; - cursor: pointer; -} -.page-sd .inner .task-list-box .finish-job-list .animate:hover { - box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */ - transform: translateY(-10px); /* 向上移动10像素 */ -} -.page-sd .inner .task-list-box .el-image { - width: 100%; - height: 100%; - overflow: visible; -} -.page-sd .inner .task-list-box .el-image img { - height: 240px; -} -.page-sd .inner .task-list-box .el-image .el-image-viewer__wrapper img { - width: auto; - height: auto; -} -.page-sd .inner .task-list-box .el-image .image-slot { - display: flex; - flex-flow: column; - justify-content: center; - align-items: center; - height: 100%; - min-height: 200px; - color: #fff; - height: 240px; -} -.page-sd .inner .task-list-box .el-image .image-slot .iconfont { - font-size: 50px; - margin-bottom: 10px; -} -.page-sd .inner .task-list-box .el-image.upscale { - max-height: 310px; -} -.page-sd .inner .task-list-box .el-image.upscale img { - height: 310px; -} -.page-sd .inner .task-list-box .el-image.upscale .el-image-viewer__wrapper img { - width: auto; - height: auto; -} -.page-sd .el-overlay-dialog .el-dialog { - background-color: #1a1b1e; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__header .el-dialog__title { - color: #f5f5f5; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body { - padding: 0 0 0 15px !important; - display: flex; - height: 100%; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row { - width: 100%; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container { - display: flex; - justify-content: center; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot { - display: flex; - height: 100vh; - align-items: center; - justify-content: center; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot .el-icon { - font-size: 60px; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info { - background-color: #25262b; - padding: 1rem 1.5rem; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line { - width: 100%; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .prompt { - background-color: #35363b; - padding: 10px; - color: #999; - overflow: auto; - max-height: 100px; - min-height: 50px; - position: relative; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .prompt .el-icon { - position: absolute; - right: 10px; - bottom: 10px; - cursor: pointer; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper { - margin-top: 10px; - display: flex; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper label { - display: flex; - width: 100px; - color: #a5a5a5; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper .item-value { - display: flex; - width: 100%; - background-color: #35363b; - padding: 2px 5px; - border-radius: 5px; - color: #f5f5f5; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params { - padding: 30px 0 10px 0; -} -.page-sd .el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params .el-button { - width: 100%; -} -.page-sd .mj-list-item-prompt .el-icon { - margin-left: 10px; - cursor: pointer; - position: relative; - top: 2px; -} diff --git a/web/src/assets/css/mobile/image-sd.styl b/web/src/assets/css/mobile/image-sd.styl deleted file mode 100644 index 7cc97a20..00000000 --- a/web/src/assets/css/mobile/image-sd.styl +++ /dev/null @@ -1,106 +0,0 @@ -.page-sd { - background-color: #282828; - - .inner { - display: flex; - align-items: center; - justify-content: center; - - .sd-box { - background-color #282828 - min-width 92% - max-width 92% - padding 0px - border-radius 0px - color #ffffff; - font-size 14px - - h2 { - font-weight: bold; - font-size 16px - text-align center - color #fff - } - - // 隐藏滚动条 - - ::-webkit-scrollbar { - width: 0; - height: 0; - background-color: transparent; - } - - .sd-params { - margin-top 10px - overflow auto - - - .param-line { - padding 0 10px - - .el-icon { - position relative - top 3px - } - - .el-input__suffix-inner { - .el-icon { - top 0 - } - } - - .grid-content - .form-item-inner { - display flex - - .el-icon { - margin-left 10px - margin-top 2px - } - } - - } - - .param-line.pt { - padding-top 5px - padding-bottom 5px - } - } - - .submit-btn { - padding 10px 15px 0 15px - text-align center - - .el-button { - width 100% - - span { - color #2D3A4B - } - } - } - } - - .el-form { - .el-form-item__label { - color #ffffff - } - } - - @import "./task-list.styl" - } - - @import "./sd-task-dialog.styl" - - - .mj-list-item-prompt { - .el-icon { - margin-left 10px - cursor pointer - position relative - top 2px - } - } - -} - diff --git a/web/src/assets/css/mobile/invitation.css b/web/src/assets/css/mobile/invitation.css deleted file mode 100644 index 2d8e6d55..00000000 --- a/web/src/assets/css/mobile/invitation.css +++ /dev/null @@ -1,93 +0,0 @@ -.page-invitation { - display: flex; - justify-content: center; - background-color: #1c1c1c; - height: 100vh; - overflow-x: hidden; - overflow-y: visible; -} -.page-invitation .inner { - max-width: 100%; - width: 100%; - color: #fff; -} -.page-invitation .inner .center { - display: flex; - justify-content: center; - align-items: center; -} -.page-invitation .inner .title { - color: #fff; - text-align: center; - font-size: 16px; - font-weight: bold; -} -.page-invitation .inner .share-box .info { - line-height: 1.5; - border: 1px solid #444; - border-radius: 10px; - padding: 10px; - margin: 10px; - background-color: #1c1c1c; -} -.page-invitation .inner .share-box .info strong { - color: #f56c6c; -} -.page-invitation .inner .share-box .invite-qrcode { - text-align: center; - margin: 15px; -} -.page-invitation .inner .share-box .invite-url { - margin: 10px; - padding: 8px; - display: flex; - justify-content: space-between; - border: 1px solid #444; - border-radius: 10px; - background-color: #1c1c1c; -} -.page-invitation .inner .share-box .invite-url span { - position: relative; - font-size: 14px; - font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; - top: 0px; -} -.page-invitation .inner .invite-stats { - padding: 10px 10px; -} -.page-invitation .inner .invite-stats .item-box { - border-radius: 10px; - padding: 10 0px; -} -.page-invitation .inner .invite-stats .item-box .el-col { - height: 80px; - display: flex; - align-items: center; - justify-content: center; -} -.page-invitation .inner .invite-stats .item-box .el-col .iconfont { - font-size: 30px; -} -.page-invitation .inner .invite-stats .item-box .el-col .item-info { - font-size: 14px; -} -.page-invitation .inner .invite-stats .item-box .el-col .item-info .text, -.page-invitation .inner .invite-stats .item-box .el-col .item-info .num { - padding: 3px 0; - text-align: center; -} -.page-invitation .inner .invite-stats .item-box .el-col .item-info .num { - font-size: 14px; -} -.page-invitation .inner .invite-stats .yellow { - background-color: #fec; - color: #d68f00; -} -.page-invitation .inner .invite-stats .blue { - background-color: #d6e4ff; - color: #1062fe; -} -.page-invitation .inner .invite-stats .green { - background-color: #e7f8eb; - color: #2d9f46; -} diff --git a/web/src/assets/css/mobile/invitation.styl b/web/src/assets/css/mobile/invitation.styl deleted file mode 100644 index b6a0b40c..00000000 --- a/web/src/assets/css/mobile/invitation.styl +++ /dev/null @@ -1,94 +0,0 @@ -.page-invitation { - display flex - justify-content center - background-color #1c1c1c - height 100vh - overflow-x hidden - overflow-y visible - .inner { - max-width 100% - width 100% - color #fff - .center { - display flex - justify-content center - align-items center - } - .title { - color #fff - text-align center - font-size 16px - font-weight bold - } - .share-box { - .info { - line-height 1.5 - border 1px solid #444444 - border-radius 10px - padding 10px - margin 10px - background-color #1c1c1c - strong { - color #f56c6c - } - } - .invite-qrcode { - text-align center - margin 15px - } - .invite-url { - margin 10px - padding 8px - display flex - justify-content space-between - border 1px solid #444444 - border-radius 10px - background-color #1c1c1c - span { - position relative - font-size 14px - font-family 'Microsoft YaHei', '微软雅黑', Arial, sans-serif - top 0px - } - } - } - .invite-stats { - padding 10px 10px - .item-box { - border-radius 10px - padding 10 0px - .el-col { - height 80px - display flex - align-items center - justify-content center - .iconfont { - font-size 30px - } - .item-info { - font-size 14px - .text, .num { - padding 3px 0 - text-align center - } - .num { - font-size 14px - } - } - } - } - .yellow { - background-color #ffeecc - color #D68F00 - } - .blue { - background-color #D6E4FF - color #1062FE - } - .green { - background-color #E7F8EB - color #2D9F46 - } - } - } -} \ No newline at end of file diff --git a/web/src/assets/css/mobile/profile.css b/web/src/assets/css/mobile/profile.css deleted file mode 100644 index b80f603f..00000000 --- a/web/src/assets/css/mobile/profile.css +++ /dev/null @@ -1,142 +0,0 @@ -.app-background { - background-color: #1c1c1c; - height: 100vh; -} -.member { - background-color: #1c1c1c; - height: 100vh; -} -.member .el-dialog .el-dialog__body { - padding-top: 5px; -} -.member .el-dialog .el-dialog__body .pay-container .count-down { - display: flex; - justify-content: center; -} -.member .el-dialog .el-dialog__body .pay-container .pay-qrcode { - display: flex; - justify-content: center; -} -.member .el-dialog .el-dialog__body .pay-container .pay-qrcode .el-image { - width: 280px; - height: 280px; -} -.member .el-dialog .el-dialog__body .pay-container .tip { - display: flex; - justify-content: center; -} -.member .el-dialog .el-dialog__body .pay-container .tip .el-icon { - font-size: 20px; -} -.member .el-dialog .el-dialog__body .pay-container .tip .text { - font-size: 16px; - margin-left: 10px; -} -.member .el-dialog .el-dialog__body .pay-container .tip.success { - color: #07c160; -} -.member .title { - text-align: center; - background-color: #1c1c1c; - font-size: 16px; - color: #fff; - padding: 5px; - font-weight: bold; -} -.member .inner { - color: #fff; - overflow-x: hidden; - overflow-y: visible; -} -.member .inner .user-profile { - padding: 0 20px 0 20px; - background-color: #1c1c1c; - color: #fff; - border-radius: 10px; - width: 100%; - height: 91vh; -} -.member .inner .user-profile .el-form-item__label { - color: #fff; - justify-content: start; -} -.member .inner .user-profile .user-opt .el-col { - padding: 8px; -} -.member .inner .user-profile .user-opt .el-col .el-button { - width: 100%; -} -.member .inner .product-box .info { - padding: 0 20px 0 20px; -} -.member .inner .product-box .info .el-alert__description { - font-size: 14px !important; - color: #1c1c1c; - margin: 0; -} -.member .inner .product-box .list-box { - padding: 0 20px 0 5px; -} -.member .inner .product-box .list-box .product-item { - border: 1px solid #5f5f5f; - border-radius: 6px; - overflow: hidden; - cursor: pointer; - transition: all 0.3s ease /* 添加过渡效果 */; -} -.member .inner .product-box .list-box .product-item .image-container { - display: flex; - justify-content: center; -} -.member .inner .product-box .list-box .product-item .image-container .el-image { - width: 50px; -} -.member .inner .product-box .list-box .product-item .image-container .el-image .el-image__inner { - border-radius: 10px; -} -.member .inner .product-box .list-box .product-item .product-title { - display: flex; - padding: 5px; -} -.member .inner .product-box .list-box .product-item .product-title .name { - width: 100%; - text-align: center; - font-size: 16px; - font-weight: bold; - color: #2cc995; -} -.member .inner .product-box .list-box .product-item .product-info { - padding: 10px 20px; - font-size: 14px; - color: #999; -} -.member .inner .product-box .list-box .product-item .product-info .info-line { - display: flex; - width: 100%; - padding: 2px 0; -} -.member .inner .product-box .list-box .product-item .product-info .info-line .label { - display: flex; - width: 100%; -} -.member .inner .product-box .list-box .product-item .product-info .info-line .price, -.member .inner .product-box .list-box .product-item .product-info .info-line .expire { - display: flex; - width: 100%; - justify-content: right; -} -.member .inner .product-box .list-box .product-item .product-info .info-line .price { - color: #f56c6c; -} -.member .inner .product-box .list-box .product-item .product-info .info-line .expire { - color: #409eff; -} -.member .inner .product-box .list-box .product-item .product-info .pay-way { - padding: 5px 0; - display: flex; - justify-content: space-between; -} -.member .inner .product-box .list-box .product-item hover { - box-shadow: 0 0 10px rgba(71,255,241,0.6) /* 添加阴影效果 */; - transform: translateY(-10px) /* 向上移动10像素 */; -} diff --git a/web/src/assets/css/mobile/profile.styl b/web/src/assets/css/mobile/profile.styl deleted file mode 100644 index ee8c4a2c..00000000 --- a/web/src/assets/css/mobile/profile.styl +++ /dev/null @@ -1,149 +0,0 @@ -.app-background { - background-color #1c1c1c - height 100vh -} -.member { - background-color #1c1c1c - height 100vh - .el-dialog { - .el-dialog__body { - padding-top 5px - .pay-container { - .count-down { - display flex - justify-content center - } - .pay-qrcode { - display flex - justify-content center - .el-image { - width 280px - height 280px - } - } - .tip { - display flex - justify-content center - .el-icon { - font-size 20px - } - .text { - font-size 16px - margin-left 10px - } - } - .tip.success { - color #07c160 - } - } - } - } - .title { - text-align center - background-color #1c1c1c - font-size 16px - color #ffffff - padding 5px - font-weight bold - } - .inner { - color #ffffff - overflow-x hidden - overflow-y visible - .user-profile { - padding 0 20px 0 20px - background-color #1c1c1c - color #ffffff - border-radius 10px - width 100% - height 91vh - .el-form-item__label { - color #ffffff - justify-content start - } - .user-opt { - .el-col { - padding 8px - .el-button { - width 100% - } - } - } - } - .product-box { - .info { - .el-alert__description { - font-size 14px !important - color #1c1c1c - margin 0 - } - padding 0 20px 0 20px - } - .list-box { - padding 0 20px 0 5px - .product-item { - border 1px solid #5f5f5f - border-radius 6px - overflow hidden - cursor pointer - transition all 0.3s ease /* 添加过渡效果 */ - .image-container { - display flex - justify-content center - .el-image { - width 50px - .el-image__inner { - border-radius 10px - } - } - } - .product-title { - display flex - padding 5px - .name { - width 100% - text-align center - font-size 16px - font-weight bold - color #2cc995 - } - } - .product-info { - padding 10px 20px - font-size 14px - color #999999 - .info-line { - display flex - width 100% - padding 2px 0 - .label { - display flex - width 100% - } - .price, .expire { - display flex - width 100% - justify-content right - } - .price { - color #f56c6c - } - .expire { - color #409eff - } - } - .pay-way { - padding 5px 0 - display flex - justify-content space-between - } - } - & hover { - box-shadow 0 0 10px rgba(71, 255, 241, 0.6) /* 添加阴影效果 */ - transform translateY(-10px) /* 向上移动10像素 */ - } - } - } - } - } -} \ No newline at end of file diff --git a/web/src/assets/css/mobile/sd-task-dialog.css b/web/src/assets/css/mobile/sd-task-dialog.css deleted file mode 100644 index 611e7d38..00000000 --- a/web/src/assets/css/mobile/sd-task-dialog.css +++ /dev/null @@ -1,72 +0,0 @@ -.el-overlay-dialog .el-dialog { - background-color: #1a1b1e; -} -.el-overlay-dialog .el-dialog .el-dialog__header .el-dialog__title { - color: #f5f5f5; -} -.el-overlay-dialog .el-dialog .el-dialog__body { - padding: 0 0 0 15px !important; - display: flex; - height: 100%; -} -.el-overlay-dialog .el-dialog .el-dialog__body .el-row { - width: 100%; -} -.el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container { - display: flex; - justify-content: center; -} -.el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot { - display: flex; - height: 100vh; - align-items: center; - justify-content: center; -} -.el-overlay-dialog .el-dialog .el-dialog__body .el-row .img-container .image-slot .el-icon { - font-size: 60px; -} -.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info { - background-color: #25262b; - padding: 1rem 1.5rem; -} -.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line { - width: 100%; -} -.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .prompt { - background-color: #35363b; - padding: 10px; - color: #999; - overflow: auto; - max-height: 100px; - min-height: 50px; - position: relative; -} -.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .prompt .el-icon { - position: absolute; - right: 10px; - bottom: 10px; - cursor: pointer; -} -.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper { - margin-top: 10px; - display: flex; -} -.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper label { - display: flex; - width: 100px; - color: #a5a5a5; -} -.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .info-line .wrapper .item-value { - display: flex; - width: 100%; - background-color: #35363b; - padding: 2px 5px; - border-radius: 5px; - color: #f5f5f5; -} -.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params { - padding: 30px 0 10px 0; -} -.el-overlay-dialog .el-dialog .el-dialog__body .el-row .task-info .copy-params .el-button { - width: 100%; -} diff --git a/web/src/assets/css/mobile/sd-task-dialog.styl b/web/src/assets/css/mobile/sd-task-dialog.styl deleted file mode 100644 index d0c93b1c..00000000 --- a/web/src/assets/css/mobile/sd-task-dialog.styl +++ /dev/null @@ -1,96 +0,0 @@ -.el-overlay-dialog { - .el-dialog { - background-color #1a1b1e - - .el-dialog__header { - .el-dialog__title { - color #F5F5F5 - } - } - - .el-dialog__body { - padding 0 0 0 15px !important - display flex - height 100% - - .el-row { - width 100% - - .img-container { - display flex - justify-content center - - .image-slot { - display flex - height 100vh - align-items center - justify-content center - - .el-icon { - font-size 60px - } - } - } - - .task-info { - background-color #25262b - padding 1rem 1.5rem - - .info-line { - width 100% - - .prompt { - background-color #35363b - padding 10px - color #999999 - overflow auto - max-height 100px - min-height 50px - - position relative - - .el-icon { - position absolute - right 10px - bottom 10px - cursor pointer - } - } - - .wrapper { - margin-top 10px - display flex - - label { - display flex - width 100px - color #a5a5a5 - } - - .item-value { - display flex - width 100% - background-color #35363b - padding 2px 5px - border-radius 5px - color #F5F5F5 - } - } - - } - - .copy-params { - padding 30px 0 10px 0 - - .el-button { - width 100% - } - } - } - } - - // end el-row - - } - } -} \ No newline at end of file diff --git a/web/src/assets/css/mobile/task-list.css b/web/src/assets/css/mobile/task-list.css deleted file mode 100644 index 6754ac94..00000000 --- a/web/src/assets/css/mobile/task-list.css +++ /dev/null @@ -1,106 +0,0 @@ -.task-list-box { - width: 100%; - padding: 5px; - color: #fff; - overflow-x: hidden; -} -.task-list-box .running-job-list .job-item { - width: 100%; - padding: 2px; - background-color: #555; -} -.task-list-box .running-job-list .job-item .job-item-inner { - position: relative; - height: 100%; - overflow: hidden; -} -.task-list-box .running-job-list .job-item .job-item-inner .progress { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - display: flex; - justify-content: center; - align-items: center; -} -.task-list-box .running-job-list .job-item .job-item-inner .progress span { - font-size: 20px; - color: #fff; -} -.task-list-box .finish-job-list .job-item { - width: 100%; - height: 100%; - border: 1px solid #666; - padding: 6px; - overflow: hidden; - border-radius: 6px; - transition: all 0.3s ease; /* 添加过渡效果 */ -} -.task-list-box .finish-job-list .job-item .opt .opt-line { - margin: 6px 0; -} -.task-list-box .finish-job-list .job-item .opt .opt-line ul { - display: flex; - flex-flow: row; -} -.task-list-box .finish-job-list .job-item .opt .opt-line ul li { - margin-right: 6px; -} -.task-list-box .finish-job-list .job-item .opt .opt-line ul li a { - padding: 3px 0; - width: 40px; - text-align: center; - border-radius: 5px; - display: block; - cursor: pointer; - background-color: #4e5058; - color: #fff; -} -.task-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover { - background-color: #6d6f78; -} -.task-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt { - font-size: 20px; - cursor: pointer; -} -.task-list-box .finish-job-list .animate:hover { - box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */ - transform: translateY(-10px); /* 向上移动10像素 */ -} -.task-list-box .el-image { - width: 100%; - height: 100%; - overflow: visible; -} -.task-list-box .el-image img { - height: 240px; -} -.task-list-box .el-image .el-image-viewer__wrapper img { - width: auto; - height: auto; -} -.task-list-box .el-image .image-slot { - display: flex; - flex-flow: column; - justify-content: center; - align-items: center; - height: 100%; - min-height: 200px; - color: #fff; - height: 240px; -} -.task-list-box .el-image .image-slot .iconfont { - font-size: 50px; - margin-bottom: 10px; -} -.task-list-box .el-image.upscale { - max-height: 310px; -} -.task-list-box .el-image.upscale img { - height: 310px; -} -.task-list-box .el-image.upscale .el-image-viewer__wrapper img { - width: auto; - height: auto; -} diff --git a/web/src/assets/css/mobile/task-list.styl b/web/src/assets/css/mobile/task-list.styl deleted file mode 100644 index 994a68d9..00000000 --- a/web/src/assets/css/mobile/task-list.styl +++ /dev/null @@ -1,142 +0,0 @@ -.task-list-box { - width 100% - padding 5px - color #ffffff - overflow-x hidden - - - .running-job-list { - .job-item { - //border: 1px solid #454545; - width: 100%; - padding 2px - background-color #555555 - - .job-item-inner { - position relative - height 100% - overflow hidden - - .progress { - position absolute - width 100% - height 100% - top 0 - left 0 - display flex - justify-content center - align-items center - - span { - font-size 20px - color #ffffff - } - } - } - } - } - - - .finish-job-list { - .job-item { - width 100% - height 100% - border 1px solid #666666 - padding 6px - overflow hidden - border-radius 6px - transition: all 0.3s ease; /* 添加过渡效果 */ - - .opt { - .opt-line { - margin 6px 0 - - ul { - display flex - flex-flow row - - li { - margin-right 6px - - a { - padding 3px 0 - width 40px - text-align center - border-radius 5px - display block - cursor pointer - background-color #4E5058 - color #ffffff - - &:hover { - background-color #6D6F78 - } - } - } - - .show-prompt { - font-size 20px - cursor pointer - } - } - } - } - } - - .animate { - &:hover { - box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */ - transform: translateY(-10px); /* 向上移动10像素 */ - } - } - - } - - .el-image { - width 100% - height 100% - overflow visible - - img { - height 240px - } - - .el-image-viewer__wrapper { - img { - width auto - height auto - } - } - - .image-slot { - display flex - flex-flow column - justify-content center - align-items center - height 100% - min-height 200px - color #ffffff - height 240px - - .iconfont { - font-size 50px - margin-bottom 10px - } - } - } - - .el-image.upscale { - max-height 310px - - img { - height 310px - } - - .el-image-viewer__wrapper { - img { - width auto - height auto - } - } - } -} \ No newline at end of file diff --git a/web/src/router.js b/web/src/router.js index 6cec3486..d0ba8254 100644 --- a/web/src/router.js +++ b/web/src/router.js @@ -176,26 +176,12 @@ const routes = [ name: 'mobile-chat-list', component: () => import('@/views/mobile/ChatList.vue'), }, - { - path: '/mobile/imageSd', - name: 'mobile-imageSd', - component: () => import('@/views/mobile/ImageSd.vue'), - }, - { - path: '/mobile/apps', - name: 'mobile-apps', - component: () => import('@/views/mobile/Apps.vue'), - }, + { path: '/mobile/profile', name: 'mobile-profile', component: () => import('@/views/mobile/Profile.vue'), }, - { - path: '/mobile/invitation', - name: 'mobile-invitation', - component: () => import('@/views/mobile/Invitation.vue'), - }, ] }, { diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue index cd7f8b4a..e61adcf5 100644 --- a/web/src/views/ChatPlus.vue +++ b/web/src/views/ChatPlus.vue @@ -567,6 +567,19 @@ const connect = function (chat_id, role_id) { host = 'ws://' + location.host; } } + + // 心跳函数 + const sendHeartbeat = () => { + clearTimeout(heartbeatHandle.value) + new Promise((resolve, reject) => { + if (socket.value !== null) { + socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"})) + } + resolve("success") + }).then(() => { + heartbeatHandle.value = setTimeout(() => sendHeartbeat(), 5000) + }); + } const _socket = new WebSocket(host + `/api/chat/new?session_id=${_sessionId}&role_id=${role_id}&chat_id=${chat_id}&model_id=${modelID.value}&token=${getUserToken()}`); _socket.addEventListener('open', () => { chatData.value = []; // 初始化聊天数据 @@ -589,15 +602,8 @@ const connect = function (chat_id, role_id) { } else { // 加载聊天记录 loadChatHistory(chat_id); } - // 发送心跳消息 - clearInterval(heartbeatHandle.value) - heartbeatHandle.value = setInterval(() => { - if (socket.value !== null) { - socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"})) - } - }, 5000); - + sendHeartbeat() }); _socket.addEventListener('message', event => { diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue index 6a909aab..a1cd80ff 100644 --- a/web/src/views/ImageMj.vue +++ b/web/src/views/ImageMj.vue @@ -573,17 +573,26 @@ const connect = () => { host = 'ws://' + location.host; } } + + // 心跳函数 + const sendHeartbeat = () => { + clearTimeout(heartbeatHandle.value) + new Promise((resolve, reject) => { + if (socket.value !== null) { + socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"})) + } + resolve("success") + }).then(() => { + heartbeatHandle.value = setTimeout(() => sendHeartbeat(), 5000) + }); + } + const _socket = new WebSocket(host + `/api/mj/client?user_id=${userId.value}`); _socket.addEventListener('open', () => { socket.value = _socket; // 发送心跳消息 - clearInterval(heartbeatHandle.value) - heartbeatHandle.value = setInterval(() => { - if (socket.value !== null) { - socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"})) - } - }, 5000); + sendHeartbeat() }); _socket.addEventListener('message', event => { diff --git a/web/src/views/mobile/Apps.vue b/web/src/views/mobile/Apps.vue deleted file mode 100644 index c4c3ab54..00000000 --- a/web/src/views/mobile/Apps.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - - - diff --git a/web/src/views/mobile/ChatList.vue b/web/src/views/mobile/ChatList.vue index 61ca3a4d..3bd4b0b5 100644 --- a/web/src/views/mobile/ChatList.vue +++ b/web/src/views/mobile/ChatList.vue @@ -261,5 +261,49 @@ const removeChat = (item) => { \ No newline at end of file diff --git a/web/src/views/mobile/ChatSession.vue b/web/src/views/mobile/ChatSession.vue index 973365a3..72ed540b 100644 --- a/web/src/views/mobile/ChatSession.vue +++ b/web/src/views/mobile/ChatSession.vue @@ -1,99 +1,103 @@ - \ No newline at end of file diff --git a/web/src/views/mobile/Home.vue b/web/src/views/mobile/Home.vue index d9971072..2ff621fd 100644 --- a/web/src/views/mobile/Home.vue +++ b/web/src/views/mobile/Home.vue @@ -1,26 +1,17 @@ - + \ No newline at end of file diff --git a/web/src/views/mobile/ImageSd.vue b/web/src/views/mobile/ImageSd.vue deleted file mode 100644 index ae874ee2..00000000 --- a/web/src/views/mobile/ImageSd.vue +++ /dev/null @@ -1,657 +0,0 @@ - - - - - diff --git a/web/src/views/mobile/Invitation.vue b/web/src/views/mobile/Invitation.vue deleted file mode 100644 index c6df7bc1..00000000 --- a/web/src/views/mobile/Invitation.vue +++ /dev/null @@ -1,152 +0,0 @@ - - - - - diff --git a/web/src/views/mobile/Profile.vue b/web/src/views/mobile/Profile.vue index 28dcaae6..1231fdf6 100644 --- a/web/src/views/mobile/Profile.vue +++ b/web/src/views/mobile/Profile.vue @@ -1,287 +1,128 @@