merge v4.1.5

web/.env.development

@@ -6,6 +6,6 @@ VUE_APP_ADMIN_USER=admin
 VUE_APP_ADMIN_PASS=admin123
 VUE_APP_KEY_PREFIX=GeekAI_DEV_
 VUE_APP_TITLE="Geek-AI 创作系统"
-VUE_APP_VERSION=v4.1.2
+VUE_APP_VERSION=v4.1.5
 VUE_APP_DOCS_URL=https://docs.geekai.me
 VUE_APP_GIT_URL=https://github.com/yangjian102621/geekai

web/.env.production

@@ -1,7 +1,7 @@
 VUE_APP_API_HOST=
 VUE_APP_WS_HOST=
 VUE_APP_KEY_PREFIX=GeekAI_
-VUE_APP_VERSION=v4.1.3
+VUE_APP_VERSION=v4.1.5
 VUE_APP_TITLE="Geek-AI 创作系统"
 VUE_APP_DOCS_URL=https://docs.geekai.me
 VUE_APP_GIT_URL=https://github.com/yangjian102621/geekai

web/package.json

@@ -27,7 +27,6 @@
     "markmap-view": "^0.16.0",
     "md-editor-v3": "^2.2.1",
     "memfs": "^4.9.3",
-    "mitt": "^3.0.1",
     "pinia": "^2.1.4",
     "qrcode": "^1.5.3",
     "qs": "^6.11.1",

web/src/App.vue

@@ -6,8 +6,14 @@
 
 <script setup>
 import {ElConfigProvider} from 'element-plus';
-import {onMounted} from "vue";
-import {getSystemInfo} from "@/store/cache";
+import {onMounted, ref, watch} from "vue";
+import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
+import {isChrome, isMobile} from "@/utils/libs";
+import {showMessageInfo} from "@/utils/dialog";
+import {useSharedStore} from "@/store/sharedata";
+import {getUserToken} from "@/store/session";
+import {router} from "@/router";
+import {onBeforeRouteLeave, onBeforeRouteUpdate} from "vue-router";
 
 const debounce = (fn, delay) => {
   let timer
@@ -29,14 +35,58 @@ window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
   }
 }
 
+const store = useSharedStore()
 onMounted(() => {
+  // 获取系统参数
   getSystemInfo().then((res) => {
     const link = document.createElement('link')
     link.rel = 'shortcut icon'
     link.href = res.data.logo
     document.head.appendChild(link)
   })
+  if (!isChrome() && !isMobile()) {
+    showMessageInfo("建议使用 Chrome 浏览器以获得最佳体验。")
+  }
+
+  checkSession().then(() => {
+    store.setIsLogin(true)
+  }).catch(()=>{})
 })
+
+watch(() => store.isLogin, (val) => {
+  if (val) {
+    connect()
+  }
+})
+
+const handler = ref(0)
+// 初始化 websocket 连接
+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 clientId = getClientId()
+  const _socket = new WebSocket(host + `/api/ws?client_id=${clientId}&token=${getUserToken()}`);
+  _socket.addEventListener('open', () => {
+    console.log('WebSocket 已连接')
+    handler.value = setInterval(() => {
+      if (_socket.readyState === WebSocket.OPEN) {
+        _socket.send(JSON.stringify({"type":"ping"}))
+      }
+    },5000)
+  })
+  _socket.addEventListener('close', () => {
+    clearInterval(handler.value)
+    connect()
+  });
+  store.setSocket(_socket)
+}
+
 </script>
 
 
@@ -66,7 +116,8 @@ html, body {
     margin 0;
 
     .el-dialog__body {
-      max-height 90vh
+      max-height 80vh
+      overflow-y auto
     }
   }
 }

web/src/assets/css/chat-app.styl

@@ -2,14 +2,54 @@
   background-color: #282c34;
   height 100%
 
-  .inner {
+  .apps-type-nav{
+    height 43px
+    padding 8px 0;
+    margin-bottom 3px
+  }
+
+  .scrollbar-type-nav{
+    display flex
+    align-items center
+    height 43px
+    padding 0 5px
+    li{
+      flex-shrink 0
+      display flex
+      align-items center
+      justify-content center
+      margin 0 10px
+      height 26px
+      border-radius 4px
+      border 1px solid rgb(80,80,80)
+      padding 2px 12px
+      background rgba(60,60,60 0.9)
+      color #fff
+      font-size 14px
+      cursor pointer
+
+      .image {
+        width 22px
+        height 22px
+        overflow hidden
+        margin-right 5px
+        border-radius 50%
+      }
+      &.active{
+        background #21aa93;
+      }
+    }
+  }
+
+
+  .app-list-container {
     display flex
     color #ffffff
-    padding 15px;
+    padding 2px 15px;
     overflow-y visible
     overflow-x hidden
 
-    .list-box {
+    .item__list-box {
       .item {
         display flex
         flex-flow row

web/src/assets/css/luma.styl

@@ -141,7 +141,7 @@
         display flex
         flex-flow row
         align-items center
-        height 100px
+        min-height 100px
         padding 10px 15px
         border-radius 10px
         cursor pointer
@@ -262,6 +262,10 @@
                 background #5f5958
                 color #e1e1e1
               }
+
+              .downloading {
+                width 16px
+              }
             }
           }
         }

web/src/assets/css/member.styl

@@ -2,53 +2,6 @@
   background-color: #282c34;
   height 100%
 
-  .el-dialog {
-    .el-dialog__body {
-      .pay-container {
-        .amount {
-          text-align center
-
-          span {
-            color #f56c6c
-          }
-        }
-
-        .count-down {
-          display flex
-          justify-content center
-        }
-
-        .pay-qrcode {
-          display flex
-          justify-content center
-
-          .el-image {
-            width 360px;
-            height 360px;
-          }
-        }
-
-        .tip {
-          display flex
-          justify-content center
-
-          .el-icon {
-            font-size 24px
-          }
-
-          .text {
-            font-size: 16px
-            margin-left 10px
-          }
-        }
-
-        .tip.success {
-          color #07c160
-        }
-      }
-    }
-  }
-
   .title {
     text-align center
     background-color #25272d
@@ -110,6 +63,7 @@
           overflow hidden
           cursor pointer
           transition: all 0.3s ease; /* 添加过渡效果 */
+          margin-bottom 20px
 
           .image-container {
             display flex
@@ -175,10 +129,32 @@
             .pay-way {
               padding 10px 0
               display flex
-              justify-content: space-between
+              justify-content: center
+              flex-wrap wrap
 
-              .iconfont {
-                margin-right 5px
+              .el-button {
+                margin 10px 5px 0 5px
+                padding 0
+
+                .icon-alipay,.icon-wechat-pay {
+                  color #ffffff
+                }
+                .icon-qq {
+                  color #15A6E8
+                  font-size 24px
+                }
+                .icon-jd-pay {
+                  color #ffffff
+                  font-size 24px
+                }
+                .icon-douyin {
+                  color #0a0a0a
+                  font-size 22px
+                }
+                .icon-paypal {
+                  font-size 14px
+                  color #009CDE
+                }
               }
             }
           }
@@ -200,4 +176,17 @@
     }
   }
 
+}
+
+.pay-dialog {
+  .product-info {
+    text-align center
+    color #333333
+    font-size 16px
+
+    .price {
+      color #f56c6c
+      font-weight 700
+    }
+  }
 }

web/src/assets/css/mobile/image-mj.styl

@@ -191,7 +191,25 @@
             }
           }
 
+          .failed {
+            display flex
+            flex-flow column
+            justify-content center
 
+            .title {
+              margin-bottom 20px
+              text-align center
+              color #ee0a24
+              font-size 18px
+            }
+            .opt {
+              display flex
+              justify-content center
+              .van-button {
+                margin 0 5px
+              }
+            }
+          }
         }
       }
     }

web/src/assets/css/mobile/image-sd.styl

@@ -179,6 +179,26 @@
           }
 
 
+          .failed {
+            display flex
+            flex-flow column
+            justify-content center
+
+            .title {
+              margin-bottom 20px
+              text-align center
+              color #ee0a24
+              font-size 18px
+            }
+            .opt {
+              display flex
+              justify-content center
+              .van-button {
+                margin 0 5px
+              }
+            }
+          }
+
         }
       }
     }

web/src/assets/css/suno.styl

@@ -306,6 +306,10 @@
                 background #5f5958
                 color #e1e1e1
               }
+
+              .downloading {
+                width 16px
+              }
             }
           }
         }

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1725929120246') format('woff2'),
-       url('iconfont.woff?t=1725929120246') format('woff'),
-       url('iconfont.ttf?t=1725929120246') format('truetype');
+  src: url('iconfont.woff2?t=1726622198991') format('woff2'),
+       url('iconfont.woff?t=1726622198991') format('woff'),
+       url('iconfont.ttf?t=1726622198991') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-paypal:before {
+  content: "\e666";
+}
+
+.icon-douyin:before {
+  content: "\e8db";
+}
+
+.icon-qq:before {
+  content: "\e69f";
+}
+
+.icon-jd-pay:before {
+  content: "\e8dd";
+}
+
 .icon-luma:before {
   content: "\e704";
 }

web/src/assets/iconfont/iconfont.json

@@ -5,6 +5,34 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "7443846",
+      "name": "PayPal",
+      "font_class": "paypal",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    },
+    {
+      "icon_id": "18166694",
+      "name": "抖音",
+      "font_class": "douyin",
+      "unicode": "e8db",
+      "unicode_decimal": 59611
+    },
+    {
+      "icon_id": "1244217",
+      "name": "qq",
+      "font_class": "qq",
+      "unicode": "e69f",
+      "unicode_decimal": 59039
+    },
+    {
+      "icon_id": "18166714",
+      "name": "京东支付",
+      "font_class": "jd-pay",
+      "unicode": "e8dd",
+      "unicode_decimal": 59613
+    },
     {
       "icon_id": "41645421",
       "name": "luma-logo",

web/src/components/ChatPrompt.vue

@@ -132,18 +132,19 @@ const content =ref(processPrompt(props.data.content))
 const files = ref([])
 
 onMounted(() => {
-  // if (!finalTokens.value) {
-  //   httpPost("/api/chat/tokens", {text: props.data.content, model: props.data.model}).then(res => {
-  //     finalTokens.value = res.data;
-  //   }).catch(() => {
-  //   })
-  // }
+  processFiles()
+})
+
+const processFiles = () => {
+  if (!props.data.content) {
+    return
+  }
 
   const linkRegex = /(https?:\/\/\S+)/g;
   const links = props.data.content.match(linkRegex);
   if (links) {
     httpPost("/api/upload/list", {urls: links}).then(res => {
-      files.value = res.data
+      files.value = res.data.items
 
       for (let link of links) {
         if (isExternalImg(link, files.value)) {
@@ -159,8 +160,7 @@ onMounted(() => {
 
   }
   content.value = md.render(content.value.trim())
-})
-
+}
 const isExternalImg = (link, files) => {
   return isImage(link) && !files.find(file => file.url === link)
 }

web/src/components/ChatSetting.vue

@@ -15,7 +15,9 @@
             <el-radio value="chat">对话样式</el-radio>
           </el-radio-group>
         </el-form-item>
-
+        <el-form-item label="流式输出：">
+          <el-switch v-model="data.stream" @change="(val) => {store.setChatStream(val)}" />
+        </el-form-item>
       </el-form>
     </div>
   </el-dialog>
@@ -28,6 +30,7 @@ const store = useSharedStore();
 
 const data = ref({
   style: store.chatListStyle,
+  stream: store.chatStream,
 })
 // eslint-disable-next-line no-undef
 const props = defineProps({

web/src/components/FileList.vue

@@ -60,6 +60,7 @@ const removeFile = (file) => {
     display flex
     flex-flow row
     margin-right 10px
+    max-width 600px
     position relative
 
     .el-image {

web/src/components/FileSelect.vue

@@ -1,57 +1,64 @@
 <template>
   <el-container class="file-select-box">
-    <a class="file-upload-img" @click="fetchFiles">
+    <a class="file-upload-img" @click="fetchFiles(1)">
       <i class="iconfont icon-attachment-st"></i>
     </a>
     <el-dialog
+        class="file-list-dialog"
         v-model="show"
         :close-on-click-modal="true"
         :show-close="true"
         :width="800"
         title="文件管理"
     >
-
-      <div class="file-list">
-        <el-row :gutter="20">
-          <el-col :span="3">
-            <div class="grid-content">
-              <el-upload
-                  class="avatar-uploader"
-                  :auto-upload="true"
-                  :show-file-list="false"
-                  :http-request="afterRead"
-                  accept=".doc,.docx,.jpg,.png,.jpeg,.xls,.xlsx,.ppt,.pptx,.pdf,.mp4,.mp3"
-              >
-                <el-icon class="avatar-uploader-icon">
-                  <Plus/>
-                </el-icon>
-              </el-upload>
-            </div>
-          </el-col>
-          <el-col :span="3" v-for="file in fileList" :key="file.url">
-            <div class="grid-content">
-              <el-tooltip
-                  class="box-item"
-                  effect="dark"
-                  :content="file.name"
-                  placement="top">
-                <el-image :src="file.url" fit="cover" v-if="isImage(file.ext)" @click="insertURL(file)"/>
-                <el-image :src="GetFileIcon(file.ext)" fit="cover" v-else @click="insertURL(file)"/>
-              </el-tooltip>
-
-              <div class="opt">
-                <el-button type="danger" size="small" :icon="Delete" @click="removeFile(file)" circle/>
+      <el-scrollbar ref="scrollbarRef" max-height="80vh" style="height: 100%;" @scroll="onScroll">
+        <div class="file-list">
+          <el-row :gutter="20">
+            <el-col :span="3">
+              <div class="grid-content">
+                <el-upload
+                    class="avatar-uploader"
+                    :auto-upload="true"
+                    :show-file-list="false"
+                    :http-request="afterRead"
+                    accept=".doc,.docx,.jpg,.png,.jpeg,.xls,.xlsx,.ppt,.pptx,.pdf,.mp4,.mp3"
+                >
+                  <el-icon class="avatar-uploader-icon">
+                    <Plus/>
+                  </el-icon>
+                </el-upload>
               </div>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
+            </el-col>
+            <el-col :span="3" v-for="file in fileData.items" :key="file.url">
+              <div class="grid-content">
+                <el-tooltip
+                    class="box-item"
+                    effect="dark"
+                    :content="file.name"
+                    placement="top">
+                  <el-image :src="file.url" fit="cover" v-if="isImage(file.ext)" @click="insertURL(file)"/>
+                  <el-image :src="GetFileIcon(file.ext)" fit="cover" v-else @click="insertURL(file)"/>
+                </el-tooltip>
+
+                <div class="opt">
+                  <el-button type="danger" size="small" :icon="Delete" @click="removeFile(file)" circle/>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row justify="center" v-if="!fileData.isLastPage" @click="fetchFiles(fileData.page)">
+            <el-link>加载更多</el-link>
+            
+          </el-row>
+        </div>        
+      </el-scrollbar>
+
     </el-dialog>
   </el-container>
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {reactive, ref} from "vue";
 import {ElMessage} from "element-plus";
 import {httpGet, httpPost} from "@/utils/http";
 import {Delete, Plus} from "@element-plus/icons-vue";
@@ -64,15 +71,45 @@ const props = defineProps({
 const emits = defineEmits(['selected']);
 const show = ref(false)
 const fileList = ref([])
+const scrollbarRef = ref(null)
+const fileData = reactive({
+  items:[],
+  page: 1,
+  isLastPage: true,
+})
 
-const fetchFiles = () => {
-  show.value = true
-  httpPost("/api/upload/list").then(res => {
-    fileList.value = res.data
+const fetchFiles = (pageNo) => {
+  if(pageNo === 1) show.value = true
+  httpPost("/api/upload/list", { page: pageNo || 1, page_size: 30 }).then(res => {
+    const { items, page, total_page } = res.data
+
+    if(page === 1){
+      fileData.items = items
+    }else{
+      fileData.items = [...fileData.items, ...items]
+    }
+
+    fileData.isLastPage = (page === total_page)
+
+    if(!fileData.isLastPage){
+      fileData.page = page + 1
+    }
+    
   }).catch(() => {
   })
 }
 
+// el-scrollbar 滚动回调
+const onScroll = (options) => {
+  const wrapRef = scrollbarRef.value.wrapRef
+  scrollbarRef.value.moveY = wrapRef.scrollTop * 100 / wrapRef.clientHeight
+  scrollbarRef.value.moveX = wrapRef.scrollLeft * 100 / wrapRef.clientWidth
+  const poor = wrapRef.scrollHeight - wrapRef.clientHeight
+  // 判断滚动到底部 自动加载数据
+  if (options.scrollTop + 2 >= poor && !fileData.isLastPage) {
+    fetchFiles(fileData.page)
+  }
+}
 
 const afterRead = (file) => {
   const formData = new FormData();
@@ -92,6 +129,7 @@ const removeFile = (file) => {
       return v1.id === v2.id
     })
     ElMessage.success("文件删除成功！")
+    fetchFiles(1)
   }).catch((e) => {
     ElMessage.error('文件删除失败:' + e.message)
   })
@@ -120,9 +158,10 @@ const insertURL = (file) => {
 
     .el-dialog__body {
       //padding 0
+      overflow hidden
 
       .file-list {
-
+        margin-right 10px
         .grid-content {
           margin-bottom 10px
           position relative

web/src/components/ItemList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="list-box" ref="containerRef">
+  <div class="item__list-box" ref="containerRef">
     <el-row :gutter="gap">
       <el-col v-for="item in items" :key="item.id" :span="span" :style="{marginBottom:gap+'px'} ">
         <slot :item="item"></slot>
@@ -54,9 +54,10 @@ const calcSpan = () => {
 window.onresize = () => calcSpan()
 </script>
 
-<style scoped lang="stylus">
+<style lang="stylus">
 
-.list-box {
+.item__list-box {
+  width 100%
 }
 
 </style>

web/src/components/LoginDialog.vue

@@ -251,6 +251,7 @@ import Captcha from "@/components/Captcha.vue";
 import ResetPass from "@/components/ResetPass.vue";
 import {setRoute} from "@/store/system";
 import {useRouter} from "vue-router";
+import {useSharedStore} from "@/store/sharedata";
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
@@ -263,8 +264,8 @@ watch(() => props.show, (newValue) => {
 
 const login = ref(true)
 const data = ref({
-  username: "",
-  password: "",
+  username: process.env.VUE_APP_USER,
+  password: process.env.VUE_APP_PASS,
   mobile: "",
   email: "",
   repass: "",
@@ -285,6 +286,9 @@ const action = ref("login")
 const enableVerify = ref(false)
 const showResetPass = ref(false)
 const router = useRouter()
+const store = useSharedStore()
+// 是否需要验证码，输入一次密码错之后就要验证码
+const needVerify = ref(false)
 
 onMounted(() => {
   const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`
@@ -297,17 +301,17 @@ onMounted(() => {
   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, "username")) {
+        enableUser.value = true
+        activeName.value = 'username'
       }
       if (arrayContains(registerWays, "email")) {
         enableEmail.value = true
-        activeName.value = activeName.value === "" ? "email" : activeName.value
+        activeName.value = 'email'
       }
-      if (arrayContains(registerWays, "username")) {
-        enableUser.value = true
-        activeName.value = activeName.value === "" ? "username" : activeName.value
+      if (arrayContains(registerWays, "mobile")) {
+        enableMobile.value = true
+        activeName.value = 'mobile'
       }
       // 是否启用注册
       enableRegister.value = res.data['enabled_register']
@@ -338,7 +342,7 @@ const submitLogin = () => {
   if (data.value.password === '') {
     return ElMessage.error('请输入密码');
   }
-  if (enableVerify.value) {
+  if (enableVerify.value && needVerify.value) {
     captchaRef.value.loadCaptcha()
     action.value = "login"
   } else {
@@ -352,11 +356,14 @@ const doLogin = (verifyData) => {
   data.value.x = verifyData.x
   httpPost('/api/user/login', data.value).then((res) => {
     setUserToken(res.data.token)
+    store.setIsLogin(true)
     ElMessage.success("登录成功！")
     emits("hide")
     emits('success')
+    needVerify.value = false
   }).catch((e) => {
     ElMessage.error('登录失败，' + e.message)
+    needVerify.value = true
   })
 }
 
@@ -384,7 +391,7 @@ const submitRegister = () => {
   if ((activeName.value === 'mobile' || activeName.value === 'email') && data.value.code === '') {
     return ElMessage.error('请输入验证码');
   }
-  if (enableVerify.value) {
+  if (enableVerify.value && activeName.value === 'username') {
     captchaRef.value.loadCaptcha()
     action.value = "register"
   } else {

web/src/components/TaskList.vue

@@ -1,28 +1,14 @@
 <template>
   <div class="running-job-list">
     <div class="running-job-box" v-if="list.length > 0">
-      <div class="job-item" v-for="item in list">
+      <div class="job-item" v-for="item in list" :key="item.id">
         <div v-if="item.progress > 0" class="job-item-inner">
-          <el-image v-if="item.img_url" :src="item['img_url']" fit="cover" loading="lazy">
-            <template #placeholder>
-              <div class="image-slot">
-                正在加载图片
-              </div>
-            </template>
 
-            <template #error>
-              <div class="image-slot">
-                <el-icon>
-                  <Picture/>
-                </el-icon>
-              </div>
-            </template>
-          </el-image>
+        <div class="progress" v-if="item.progress > 0">
+          <el-progress type="circle" :percentage="item.progress" :width="100"
+                       color="#47fff1"/>
+        </div>
 
-          <div class="progress">
-            <el-progress type="circle" :percentage="item.progress" :width="100"
-                         color="#47fff1"/>
-          </div>
         </div>
         <el-image fit="cover" v-else>
           <template #error>
@@ -39,11 +25,7 @@
 </template>
 
 <script setup>
-import {ref} from "vue";
-import {CircleCloseFilled, Picture} from "@element-plus/icons-vue";
-import {isImage, removeArrayItem, substr} from "@/utils/libs";
-import {FormatFileSize, GetFileIcon, GetFileType} from "@/store/system";
-
+// eslint-disable-next-line no-undef
 const props = defineProps({
   list: {
     type: Array,

web/src/components/UserOrder.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="user-bill" v-loading="loading">
+  <div class="user-bill" v-loading="loading" element-loading-background="rgba(255,255,255,.3)">
     <el-row v-if="items.length > 0">
       <el-table :data="items" :row-key="row => row.id" table-layout="auto" border
                 style="--el-table-border-color:#373C47;
@@ -22,7 +22,8 @@
             <span>{{ scope.row.remark?.power }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="pay_way" label="支付方式"/>
+        <el-table-column prop="pay_method" label="支付渠道"/>
+        <el-table-column prop="pay_name" label="支付名称"/>
         <el-table-column label="支付时间">
           <template #default="scope">
             <span v-if="scope.row['pay_time']">{{ dateFormat(scope.row['pay_time']) }}</span>

web/src/components/admin/AdminHeader.vue

@@ -52,13 +52,14 @@
   </div>
 </template>
 <script setup>
-import {computed, onMounted, ref} from 'vue';
+import {onMounted, ref, watch} from 'vue';
 import {getMenuItems, useSidebarStore} from '@/store/sidebar';
 import {useRouter} from "vue-router";
 import {ArrowDown, ArrowRight, Expand, Fold, Moon, Sunny} from "@element-plus/icons-vue";
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {removeAdminToken} from "@/store/session";
+import {useSharedStore} from "@/store/sharedata";
 
 const version = ref(process.env.VUE_APP_VERSION)
 const avatar = ref('/images/user-info.jpg')
@@ -66,24 +67,18 @@ const sidebar = useSidebarStore();
 const router = useRouter();
 const breadcrumb = ref([])
 
-// eslint-disable-next-line no-undef
-const props = defineProps({
-  theme: String,
-});
-
-const theme = computed(() => {
-  return props.theme
+const store = useSharedStore()
+const dark = ref(store.adminTheme === 'dark')
+const theme = ref(store.adminTheme)
+watch(() => store.adminTheme, (val) => {
+  theme.value = val
 })
-const dark = ref(props.theme === 'dark' ? true : false)
 
-
-// eslint-disable-next-line no-undef
-const emits = defineEmits(['changeTheme']);
 const changeTheme = () => {
-  emits('changeTheme', dark.value)
+  store.setAdminTheme(dark.value ? 'dark' : 'light')
 }
 
-router.afterEach((to, from) => {
+router.afterEach((to) => {
   initBreadCrumb(to.path)
 });
 

web/src/components/admin/AdminSidebar.vue

@@ -52,11 +52,12 @@
 </template>
 
 <script setup>
-import {computed, ref} from 'vue';
+import {computed, ref, watch} from 'vue';
 import {setMenuItems, useSidebarStore} from '@/store/sidebar';
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {useRoute} from "vue-router";
+import {useSharedStore} from "@/store/sharedata";
 
 const title = ref('')
 const logo = ref('')
@@ -68,16 +69,11 @@ httpGet('/api/admin/config/get?key=system').then(res => {
 }).catch(e => {
   ElMessage.error("加载系统配置失败: " + e.message)
 })
-
-// eslint-disable-next-line no-undef
-const props = defineProps({
-  theme: String,
-});
-
-const theme = computed(() => {
-  return props.theme
+const store = useSharedStore()
+const theme = ref(store.adminTheme)
+watch(() => store.adminTheme, (val) => {
+  theme.value = val
 })
-
 const items = [
   {
     icon: 'home',
@@ -90,12 +86,22 @@ const items = [
     index: '/admin/user',
     title: '用户管理',
   },
-
   {
     icon: 'menu',
-    index: '/admin/app',
+    index: '1',
     title: '应用管理',
+    subs: [
+      {
+        index: '/admin/app',
+        title: '应用列表',
+      },
+      {
+        index: '/admin/app/type',
+        title: '应用分类',
+      },
+    ],
   },
+  
   {
     icon: 'api-key',
     index: '/admin/apikey',

web/src/components/admin/AdminTags.vue

@@ -38,17 +38,14 @@ import {onBeforeRouteUpdate, useRoute, useRouter} from 'vue-router';
 import {ArrowDown, Close} from "@element-plus/icons-vue";
 import {checkAdminSession} from "@/store/cache";
 import {ElMessageBox} from "element-plus";
-import {computed} from "vue";
+import {useSharedStore} from "@/store/sharedata";
+import {ref, watch} from "vue";
 
-// eslint-disable-next-line no-undef
-const props = defineProps({
-  theme: String,
-});
-
-const theme = computed(() => {
-  return props.theme
+const store = useSharedStore()
+const theme = ref(store.adminTheme)
+watch(() => store.adminTheme, (val) => {
+  theme.value = val
 })
-
 const router = useRouter();
 checkAdminSession().catch(() => {
   ElMessageBox({

web/src/components/ui/BlackInput.vue

@@ -47,6 +47,7 @@ watch(() => props.value, (newValue) => {
   model.value = newValue
 })
 const model = ref(props.value)
+// eslint-disable-next-line no-undef
 const emits = defineEmits(['update:value']);
 const onInput = (value) => {
   emits('update:value',value)

web/src/components/ui/ItemsInput.vue

@@ -0,0 +1,79 @@
+<template>
+  <!-- 多项目输入组件 -->
+  <div class="items-input-box">
+    <el-tag
+        v-for="tag in tags"
+        :key="tag"
+        closable
+        :disable-transitions="false"
+        @close="handleClose(tag)"
+    >
+      {{ tag }}
+    </el-tag>
+    <el-input
+        v-if="inputVisible"
+        ref="InputRef"
+        v-model="inputValue"
+        class="w-20"
+        size="small"
+        @keyup.enter="handleInputConfirm"
+        @blur="handleInputConfirm"
+    />
+    <el-button v-else class="button-new-tag" size="small" @click="showInput">
+      + 新增
+    </el-button>
+  </div>
+</template>
+<script setup>
+
+import {nextTick, ref, watch} from "vue";
+// eslint-disable-next-line no-undef
+const props = defineProps({
+  value : {
+    type: Array,
+    default: () => []
+  },
+});
+// eslint-disable-next-line no-undef
+const emits = defineEmits(['update:value']);
+const tags = ref(props.value)
+const inputValue = ref('')
+const inputVisible = ref(false)
+const InputRef = ref(null)
+
+watch(() => props.value, (newValue) => {
+  tags.value = newValue
+})
+
+const handleClose = (tag) => {
+  tags.value.splice(tags.value.indexOf(tag), 1)
+}
+
+const showInput = () => {
+  inputVisible.value = true
+  nextTick(() => {
+    InputRef.value?.input?.focus()
+  })
+}
+
+const handleInputConfirm = () => {
+  if (inputValue.value) {
+    tags.value.push(inputValue.value)
+  }
+  inputVisible.value = false
+  inputValue.value = ''
+  emits('update:value', tags.value)
+}
+</script>
+
+<style scoped lang="stylus">
+.items-input-box {
+  display flex
+
+  .el-tag {
+    display flex
+    margin-right 6px
+  }
+}
+
+</style>

web/src/router.js

@@ -139,9 +139,15 @@ const routes = [
     {
         path: '/admin/login',
         name: 'admin-login',
-        meta: {title: 'Geek-AI 控制台登录'},
+        meta: {title: '控制台登录'},
         component: () => import('@/views/admin/Login.vue'),
     },
+    {
+        path: '/payReturn',
+        name: 'pay-return',
+        meta: {title: '支付回调'},
+        component: () => import('@/views/PayReturn.vue'),
+    },
     {
         name: 'admin',
         path: '/admin',
@@ -170,9 +176,15 @@ const routes = [
             {
                 path: '/admin/app',
                 name: 'admin-app',
-                meta: {title: '应用管理'},
+                meta: {title: '应用列表'},
                 component: () => import('@/views/admin/Apps.vue'),
             },
+            {
+                path: '/admin/app/type',
+                name: 'admin-app-type',
+                meta: {title: '应用分类'},
+                component: () => import('@/views/admin/AppType.vue'),
+            },
             {
                 path: '/admin/apikey',
                 name: 'admin-apikey',
@@ -237,6 +249,18 @@ const routes = [
     },
 
 
+    {
+        name: 'mobile-login',
+        path: '/mobile/login',
+        meta: {title: '用户登录'},
+        component: () => import('@/views/Login.vue'),
+    },
+    {
+        name: 'mobile-register',
+        path: '/mobile/register',
+        meta: {title: '用户注册'},
+        component: () => import('@/views/Register.vue'),
+    },
     {
         name: 'mobile',
         path: '/mobile',

web/src/store/cache.js

@@ -1,5 +1,6 @@
 import {httpGet} from "@/utils/http";
 import Storage from "good-storage";
+import {randString} from "@/utils/libs";
 
 const userDataKey = "USER_INFO_CACHE_KEY"
 const adminDataKey = "ADMIN_INFO_CACHE_KEY"
@@ -70,4 +71,14 @@ export function getLicenseInfo() {
             resolve(err)
         })
     })
+}
+
+export function getClientId() {
+    let clientId = Storage.get('client_id')
+    if (clientId) {
+        return clientId
+    }
+    clientId = randString(42)
+    Storage.set('client_id', clientId)
+    return clientId
 }

web/src/store/eventbus.js

@@ -1,6 +0,0 @@
-// 导入mitt包
-import mitt from 'mitt'
-// 创建EventBus实例对象
-const bus = mitt()
-// 共享出eventbus的实例对象
-export default bus

web/src/store/session.js

@@ -16,7 +16,6 @@ export function getSessionId() {
 export function getUserToken() {
     return Storage.get(UserTokenKey) ?? ""
 }
-
 export function setUserToken(token) {
     // 刷新 session 缓存
     Storage.set(UserTokenKey, token)

web/src/store/sharedata.js

@@ -4,7 +4,12 @@ import Storage from 'good-storage'
 export const useSharedStore = defineStore('shared', {
     state: () => ({
         showLoginDialog: false,
-        chatListStyle: Storage.get("chat_list_style","chat")
+        chatListStyle: Storage.get("chat_list_style","chat"),
+        chatStream: Storage.get("chat_stream",true),
+        socket: {conn:null, handlers:{}},
+        mobileTheme: Storage.get("mobile_theme", "light"),
+        adminTheme: Storage.get("admin_theme", "light"),
+        isLogin: false
     }),
     getters: {},
     actions: {
@@ -14,6 +19,59 @@ export const useSharedStore = defineStore('shared', {
         setChatListStyle(value) {
             this.chatListStyle = value;
             Storage.set("chat_list_style", value);
+        },
+        setChatStream(value) {
+            this.chatStream = value;
+            Storage.set("chat_stream", value);
+        },
+        setSocket(value) {
+            for (const key in this.socket.handlers) {
+                this.setMessageHandler(value, this.socket.handlers[key])
+            }
+            this.socket.conn = value
+        },
+        addMessageHandler(key, callback) {
+            if (!this.socket.handlers[key]) {
+                this.socket.handlers[key] = callback;
+            }
+            this.setMessageHandler(this.socket.conn, callback)
+        },
+
+        setMessageHandler(conn, callback) {
+            if (!conn) {
+                return
+            }
+            conn.addEventListener('message', (event) => {
+                try {
+                    if (event.data instanceof Blob) {
+                        const reader = new FileReader();
+                        reader.readAsText(event.data, "UTF-8");
+                        reader.onload = () => {
+                            callback(JSON.parse(String(reader.result)))
+                        }
+                    }
+                } catch (e) {
+                    console.warn(e)
+                }
+            })
+        },
+
+        removeMessageHandler(key) {
+            if (this.socket.conn && this.socket.conn.readyState === WebSocket.OPEN) {
+                this.socket.conn.removeEventListener('message', this.socket.handlers[key])
+            }
+            delete this.socket.handlers[key]
+        },
+        setMobileTheme(theme) {
+            this.mobileTheme = theme
+            Storage.set("mobile_theme", theme)
+        },
+        setAdminTheme(theme) {
+            this.adminTheme = theme
+            Storage.set("admin_theme", theme)
+        },
+        setIsLogin(value) {
+            this.isLogin = value
         }
-    }
+    },
 });

web/src/store/system.js

@@ -6,26 +6,6 @@
 // * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
 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"
-
-export function getMobileTheme() {
-    return Storage.get(MOBILE_THEME) ? Storage.get(MOBILE_THEME) : 'light'
-}
-
-export function setMobileTheme(theme) {
-    Storage.set(MOBILE_THEME, theme)
-}
-
-export function getAdminTheme() {
-    return Storage.get(ADMIN_THEME) ? Storage.get(ADMIN_THEME) : 'light'
-}
-
-export function setAdminTheme(theme) {
-    Storage.set(ADMIN_THEME, theme)
-}
 
 export function GetFileIcon(ext) {
     const files = {
@@ -71,4 +51,4 @@ export function setRoute(path) {
 
 export function getRoute() {
     return Storage.get(process.env.VUE_APP_KEY_PREFIX + 'ROUTE_')
-}
+}

web/src/utils/http.js

@@ -17,7 +17,6 @@ axios.defaults.headers.post['Content-Type'] = 'application/json'
 axios.interceptors.request.use(
     config => {
         // set token
-        config.headers['Chat-Token'] = getSessionId();
         config.headers['Authorization'] = getUserToken();
         config.headers['Admin-Authorization'] = getAdminToken();
         return config
@@ -28,10 +27,11 @@ axios.interceptors.response.use(
     response => {
         return response
     }, error => {
-        if (error.response.status === 401 || error.response.status === 400) {
+        if (error.response.status === 401) {
             if (error.response.request.responseURL.indexOf("/api/admin") !== -1) {
                 removeAdminToken()
             } else {
+                console.log("FUCK")
                 removeUserToken()
             }
             error.response.data.message = "请先登录"

web/src/utils/libs.js

@@ -181,6 +181,10 @@ export function isImage(url) {
 }
 
 export function processContent(content) {
+    if (!content) {
+        return ""
+    }
+    
     // 如果是图片链接地址，则直接替换成图片标签
     const linkRegex = /(https?:\/\/\S+)/g;
     const links = content.match(linkRegex);
@@ -214,18 +218,23 @@ export function showLoginDialog(router) {
         message:
             '此操作需要登录才能进行，前往登录？',
     }).then(() => {
-        router.push("/login")
+        router.push("/mobile/login")
     }).catch(() => {
         // on cancel
     });
 }
 
 export const replaceImg =(img) => {
-    const devHost = "172.22.11.69"
-    const localhost = "localhost"
+    const devHost = process.env.VUE_APP_API_HOST
+    const localhost = "http://localhost:5678"
     if (img.includes(localhost)) {
         return img?.replace(localhost, devHost)
     }
     return img
 }
+export function isChrome() {
+    const userAgent = navigator.userAgent.toLowerCase();
+    return /chrome/.test(userAgent) && !/edg/.test(userAgent);
+}
+
 

web/src/views/ChatApps.vue

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

web/src/views/ChatPlus.vue

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

web/src/views/Dalle.vue

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

web/src/views/Home.vue

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

web/src/views/ImageMj.vue

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

web/src/views/ImageSd.vue

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

web/src/views/Index.vue

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

web/src/views/Login.vue

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

web/src/views/Luma.vue

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

web/src/views/MarkMap.vue

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

web/src/views/Member.vue

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

web/src/views/PayReturn.vue

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

web/src/views/Register.vue

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

web/src/views/Suno.vue

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

web/src/views/Test.vue

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

web/src/views/admin/ApiKey.vue

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

web/src/views/admin/AppType.vue

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

web/src/views/admin/Apps.vue

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

web/src/views/admin/Home.vue

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

web/src/views/admin/Login.vue

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

web/src/views/admin/Order.vue

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

web/src/views/admin/SysConfig.vue

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

web/src/views/admin/Users.vue

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

web/src/views/mobile/ChatList.vue

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

web/src/views/mobile/ChatSession.vue

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

web/src/views/mobile/Home.vue

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

web/src/views/mobile/Index.vue

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

web/src/views/mobile/Profile.vue

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

web/src/views/mobile/pages/ImageDall.vue

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

web/src/views/mobile/pages/ImageMj.vue

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

web/src/views/mobile/pages/ImageSd.vue

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

web/vue.config.js

@@ -21,5 +21,11 @@ module.exports = defineConfig({
     devServer: {
         allowedHosts: "all",
         port: 8888,
+        proxy: {
+            '/static/upload/': {
+              target:  process.env.VUE_APP_API_HOST,
+              changeOrigin: true,
+            }
+          }
     }
 })