From 8923e938d2aa8ba7bb8c49c5c5b5304d070a492b Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Mon, 30 Sep 2024 14:20:59 +0800
Subject: [PATCH] optimize the vue component communication, replace event
 listening with share data

---
 web/package.json                          |   1 -
 web/public/images/img-holder.png          | Bin 0 -> 1042 bytes
 web/src/assets/css/mobile/image-mj.styl   |  18 ++
 web/src/assets/css/mobile/image-sd.styl   |  20 ++
 web/src/components/admin/AdminHeader.vue  |  23 +-
 web/src/components/admin/AdminSidebar.vue |  16 +-
 web/src/components/admin/AdminTags.vue    |  15 +-
 web/src/store/eventbus.js                 |   6 -
 web/src/store/sharedata.js                |  15 +-
 web/src/store/system.js                   |  19 --
 web/src/views/ChatPlus.vue                |   7 +-
 web/src/views/Dalle.vue                   |   1 +
 web/src/views/ImageMj.vue                 |   1 +
 web/src/views/ImageSd.vue                 |   1 +
 web/src/views/Luma.vue                    |   6 +-
 web/src/views/Suno.vue                    |   1 +
 web/src/views/admin/Home.vue              |  25 +-
 web/src/views/mobile/ChatSession.vue      | 356 +++++++++++++---------
 web/src/views/mobile/Home.vue             |  13 +-
 web/src/views/mobile/Profile.vue          |  21 +-
 web/src/views/mobile/pages/ImageDall.vue  | 136 +++------
 web/src/views/mobile/pages/ImageMj.vue    | 140 +++------
 web/src/views/mobile/pages/ImageSd.vue    | 112 +++----
 23 files changed, 473 insertions(+), 480 deletions(-)
 create mode 100644 web/public/images/img-holder.png
 delete mode 100644 web/src/store/eventbus.js

diff --git a/web/package.json b/web/package.json
index 46943877..984ca9b5 100644
--- a/web/package.json
+++ b/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",
diff --git a/web/public/images/img-holder.png b/web/public/images/img-holder.png
new file mode 100644
index 0000000000000000000000000000000000000000..761da7c0976100161f4f49c3ecb6f25daba4c337
GIT binary patch
literal 1042
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!5PS-41f%w%mkqB{|6WZIT$h-vY8o`7?=bZ
znFSgDA7PLII+BTr8R$|tU}a}vV`S#w0?KL$0413iSs0m_St0U_ObpB{tb%Mp!it9M
zN=71%n@vIzOB#V{MS*s}&44gifWqQ}j10`E;*A?G{=db*1GJP$kXewyp5ga_j!vf{
zB?ToVCW1t1e122+I_<j;SDmh|e7yTu&)+>CDxUXQKKS_g;M8m8fu(g}+twafzO>Nv
zdehb0^Jh-)zp*cDrR%wGx?WGGG=66|-pBB~LoCEMYt6dF`@Q4*tTHy0O^=Y;&*$d+
z>YS!}x6s%0P1m(-%MARYpTD)exLElW<Bvlxli&15N;AKa<M^}B@r(PLgsyAvg##|U
z`*t%rciQyg?nb{jK0C93&GD({y~8IS=eSoCv4dyrouv-nmIxo5UBlwy;Nk)%czpgd
zyeO`}a`K<})Lf~*WuF)As`j3|{rI(K_o9_Kb*pZ^FFAQ?{pK%kbA1!)6+^TReE)d+
zPGxXr`tO5hAOH55|FH7$_ie{gb(1Fta7OA>t__&9YTmyKOC~XWU{v`tDWS@6&y88p
zzntTD`}8e2dUf-aXZvN_=Dl+jEjXjSBYD24>YD1+&aqFlKAa5tQXiU9a_;EM)1S8O
zSG#xSm-LRCt_!}+nG*I*Z_Ov&__&a#{`Xd#=3H{(X7v8+_q!)1=d3%weA{oyHRYSG
zbG<D#)J@tnO{`7DNQ|fAncrU*ACXrzTMs+*WiS2gHSuxHalhY^B6Tb){S{O`=T{4#
zRAODf?8I{Ib>=rMzAe2HzwByc=++4*ldM8Qr}W?G|HZ$Ek;R)Su-?<#?0A-Ek~mW<
z%O|J)D@7v0FZfS1*q?m-EN+6JAfuoFm=Mx=@nwy-+5E6GN2VpOKcX_JQf0Eg%H%hb
z-^|n$P=0wOtME<q#;>zp={cW@_7gJ=Q&eaQy|gsdM#z$-O2tq2@+<v~@AikU+jU!F
z>$Ka=y{Uc2pU%Cv=*;o&I-ZjZnZ>2KxjC#JK1zC|Js~DJ`Km(^JHw8Z0)`9|IG;3r
PG+IPdDg`Cv`u{fpStWB^

literal 0
HcmV?d00001

diff --git a/web/src/assets/css/mobile/image-mj.styl b/web/src/assets/css/mobile/image-mj.styl
index 8989946b..e482b931 100644
--- a/web/src/assets/css/mobile/image-mj.styl
+++ b/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
+              }
+            }
+          }
         }
       }
     }
diff --git a/web/src/assets/css/mobile/image-sd.styl b/web/src/assets/css/mobile/image-sd.styl
index d6f07cc3..f470422a 100644
--- a/web/src/assets/css/mobile/image-sd.styl
+++ b/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
+              }
+            }
+          }
+
         }
       }
     }
diff --git a/web/src/components/admin/AdminHeader.vue b/web/src/components/admin/AdminHeader.vue
index bd2a468d..0a1501c8 100644
--- a/web/src/components/admin/AdminHeader.vue
+++ b/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)
 });
 
diff --git a/web/src/components/admin/AdminSidebar.vue b/web/src/components/admin/AdminSidebar.vue
index 22b7bea8..6f420968 100644
--- a/web/src/components/admin/AdminSidebar.vue
+++ b/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',
diff --git a/web/src/components/admin/AdminTags.vue b/web/src/components/admin/AdminTags.vue
index 4842b820..7ae301ed 100644
--- a/web/src/components/admin/AdminTags.vue
+++ b/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({
diff --git a/web/src/store/eventbus.js b/web/src/store/eventbus.js
deleted file mode 100644
index f8a14c1c..00000000
--- a/web/src/store/eventbus.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// 导入mitt包
-import mitt from 'mitt'
-// 创建EventBus实例对象
-const bus = mitt()
-// 共享出eventbus的实例对象
-export default bus
\ No newline at end of file
diff --git a/web/src/store/sharedata.js b/web/src/store/sharedata.js
index dcbdd0ea..b27a032d 100644
--- a/web/src/store/sharedata.js
+++ b/web/src/store/sharedata.js
@@ -8,6 +8,8 @@ export const useSharedStore = defineStore('shared', {
         chatStream: Storage.get("chat_stream",true),
         socket: WebSocket,
         messageHandlers:{},
+        mobileTheme: Storage.get("mobile_theme", "light"),
+        adminTheme: Storage.get("admin_theme", "light"),
     }),
     getters: {},
     actions: {
@@ -51,6 +53,17 @@ export const useSharedStore = defineStore('shared', {
                     this.setMessageHandler(callback)
                 }, 1000)
             }
+        },
+        removeMessageHandler(key) {
+            delete this.messageHandlers[key]
+        },
+        setMobileTheme(theme) {
+            this.mobileTheme = theme
+            Storage.set("mobile_theme", theme)
+        },
+        setAdminTheme(theme) {
+            this.adminTheme = theme
+            Storage.set("admin_theme", theme)
         }
-    }
+    },
 });
diff --git a/web/src/store/system.js b/web/src/store/system.js
index 57685bbb..d9523657 100644
--- a/web/src/store/system.js
+++ b/web/src/store/system.js
@@ -7,25 +7,6 @@
 
 import Storage from "good-storage";
 
-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 = {
         ".docx": "doc.png",
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index 27dcc5c1..36d8459a 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -213,7 +213,7 @@
 
 </template>
 <script setup>
-import {nextTick, onMounted, ref, watch} from 'vue'
+import {nextTick, onMounted, onUnmounted, ref, watch} from 'vue'
 import ChatPrompt from "@/components/ChatPrompt.vue";
 import ChatReply from "@/components/ChatReply.vue";
 import {Delete, Edit, InfoFilled, More, Plus, Promotion, Search, Share, VideoPause} from '@element-plus/icons-vue'
@@ -422,6 +422,10 @@ onMounted(() => {
     })
   })
 });
+
+onUnmounted(() => {
+  store.removeMessageHandler("chat")
+})
 // 初始化数据
 const initData = () => {
 
@@ -774,6 +778,7 @@ const clearAllChats = function () {
 
 const loadChatHistory = function (chatId) {
   chatData.value = []
+  loading.value = true
   httpGet('/api/chat/history?chat_id=' + chatId).then(res => {
     const data = res.data
     if ((!data || data.length === 0) && chatData.value.length === 0) { // 加载打招呼信息
diff --git a/web/src/views/Dalle.vue b/web/src/views/Dalle.vue
index fc7a54dd..b0ff89d3 100644
--- a/web/src/views/Dalle.vue
+++ b/web/src/views/Dalle.vue
@@ -287,6 +287,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   clipboard.value.destroy()
+  store.removeMessageHandler("dall")
 })
 
 const initData = () => {
diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue
index 2547146c..a6bf09e9 100644
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -738,6 +738,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   clipboard.value.destroy()
+  store.removeMessageHandler("mj")
 })
 
 // 初始化数据
diff --git a/web/src/views/ImageSd.vue b/web/src/views/ImageSd.vue
index a9309c93..89432918 100644
--- a/web/src/views/ImageSd.vue
+++ b/web/src/views/ImageSd.vue
@@ -586,6 +586,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   clipboard.value.destroy()
+  store.removeMessageHandler("sd")
 })
 
 
diff --git a/web/src/views/Luma.vue b/web/src/views/Luma.vue
index 089f41f8..7f20e826 100644
--- a/web/src/views/Luma.vue
+++ b/web/src/views/Luma.vue
@@ -131,7 +131,7 @@
 </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, getClientId} from "@/store/cache";
@@ -175,6 +175,10 @@ onMounted(()=>{
   })
 })
 
+onUnmounted(() => {
+  store.removeMessageHandler("luma")
+})
+
 const download = (item) => {
   const url = replaceImg(item.video_url)
   const downloadURL = `${process.env.VUE_APP_API_HOST}/api/download?url=${url}`
diff --git a/web/src/views/Suno.vue b/web/src/views/Suno.vue
index 355886ff..b2105000 100644
--- a/web/src/views/Suno.vue
+++ b/web/src/views/Suno.vue
@@ -386,6 +386,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   clipboard.value.destroy()
+  store.removeMessageHandler("suno")
 })
 
 const page = ref(1)
diff --git a/web/src/views/admin/Home.vue b/web/src/views/admin/Home.vue
index a6b40256..346c4131 100644
--- a/web/src/views/admin/Home.vue
+++ b/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>
 
diff --git a/web/src/views/mobile/ChatSession.vue b/web/src/views/mobile/ChatSession.vue
index 979939c9..ff2e7fa4 100644
--- a/web/src/views/mobile/ChatSession.vue
+++ b/web/src/views/mobile/ChatSession.vue
@@ -125,15 +125,14 @@
 <script setup>
 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 { showMessageError} from "@/utils/dialog";
 import {useSharedStore} from "@/store/sharedata";
@@ -191,7 +190,7 @@ const loadModels = () => {
       role.value = getRoleById(roleId.value)
       columns.value = [roles.value, models.value]
       selectedValues.value = [roleId.value, modelId.value]
-      connect()
+      loadChatHistory()
     }).catch((e) => {
       showNotify({type: "danger", message: '获取聊天角色失败: ' + e.messages})
     })
@@ -214,48 +213,12 @@ if (chatId.value) {
   loadModels()
 }
 
-
-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 = UUID()
-  chatData.value = []
-  role.value = getRoleById(roleId.value)
-  title.value = "新建对话"
-  loadHistory.value = true
-  connect()
-}
-
 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,
@@ -282,7 +245,91 @@ 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})
+  })
+
+  store.addMessageHandler("chat",(data) => {
+    if (data.channel !== "chat" || data.clientId !== getClientId()) {
+      return
+    }
+
+    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
+          }
+          imgs[i].addEventListener('click', (e) => {
+            e.stopPropagation()
+            showImagePreview([imgs[i].src]);
+          })
+        }
+      })
+    }
+  })
+})
+
+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(() => {
@@ -334,121 +381,113 @@ const loadChatHistory = () => {
   })
 }
 
-// 离开页面时主动关闭 websocket 连接，节省网络资源
-onBeforeRouteLeave(() => {
-  if (socket.value !== null) {
-    socket.value.close();
-  }
-})
-
 // 创建 socket 连接
 const prompt = ref('');
 const showStopGenerate = ref(false); // 停止生成
 const showReGenerate = ref(false); // 重新生成
 const previousText = ref(''); // 上一次提问
 const lineBuffer = ref(''); // 输出缓冲行
-const socket = ref(null);
 const canSend = ref(true)
 const isNewMsg = ref(true)
-const loadHistory = ref(true)
-const store = useSharedStore()
 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;
+// 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;
+// }
 
-    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;
-}
 
 const disableInput = (force) => {
   canSend.value = false;
@@ -473,6 +512,11 @@ const sendMessage = () => {
     return
   }
 
+  if (store.socket.readyState !== WebSocket.OPEN) {
+    showToast("连接断开，正在重连...");
+    return
+  }
+
   if (prompt.value.trim().length === 0) {
     showToast("请输入需要 AI 回答的问题")
     return false;
@@ -492,7 +536,17 @@ const sendMessage = () => {
   })
 
   disableInput(false)
-  socket.value.send(JSON.stringify({stream: stream.value, content: prompt.value}));
+  store.socket.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;
@@ -500,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()
   })
 }
@@ -515,7 +569,17 @@ const reGenerate = () => {
     icon: loginUser.value.avatar,
     content: renderInputText(text)
   });
-  socket.value.send(JSON.stringify({stream: stream.value, content: previousText.value}));
+  store.socket.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)
diff --git a/web/src/views/mobile/Home.vue b/web/src/views/mobile/Home.vue
index de1cc105..7b9d759a 100644
--- a/web/src/views/mobile/Home.vue
+++ b/web/src/views/mobile/Home.vue
@@ -17,11 +17,10 @@
 </template>
 
 <script setup>
-import {ref} from "vue";
-import {getMobileTheme, setMobileTheme} from "@/store/system";
+import {ref, watch} from "vue";
 import {useRouter} from "vue-router";
 import {isMobile} from "@/utils/libs";
-import bus from '@/store/eventbus'
+import {useSharedStore} from "@/store/sharedata";
 
 const router = useRouter()
 if (!isMobile()) {
@@ -29,11 +28,11 @@ if (!isMobile()) {
 }
 
 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>
diff --git a/web/src/views/mobile/Profile.vue b/web/src/views/mobile/Profile.vue
index 630516b5..40650fbe 100644
--- a/web/src/views/mobile/Profile.vue
+++ b/web/src/views/mobile/Profile.vue
@@ -125,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-->
@@ -158,9 +164,7 @@ 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 QRCode from "qrcode";
+import {useSharedStore} from "@/store/sharedata";
 
 const form = ref({
   username: 'GeekMaster',
@@ -183,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 => {
@@ -322,12 +329,6 @@ const logout = function () {
   })
 }
 
-const dark = ref(getMobileTheme() === 'dark')
-
-const changeTheme = () => {
-  bus.emit('changeTheme', dark.value ? 'dark' : 'light')
-}
-
 </script>
 
 <style lang="stylus">
diff --git a/web/src/views/mobile/pages/ImageDall.vue b/web/src/views/mobile/pages/ImageDall.vue
index a87565e8..872d1641 100644
--- a/web/src/views/mobile/pages/ImageDall.vue
+++ b/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">
diff --git a/web/src/views/mobile/pages/ImageMj.vue b/web/src/views/mobile/pages/ImageMj.vue
index 0b4eac41..5bf562b1 100644
--- a/web/src/views/mobile/pages/ImageMj.vue
+++ b/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']]);
 }
diff --git a/web/src/views/mobile/pages/ImageSd.vue b/web/src/views/mobile/pages/ImageSd.vue
index d5455b41..3d17bbc5 100644
--- a/web/src/views/mobile/pages/ImageSd.vue
+++ b/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)
     })