From 18179613fc890e0911c7096e6bfa739bd8bf75a0 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Thu, 26 Dec 2024 18:50:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=20Dalle=20=E7=BB=98=E5=9B=BE=E9=A1=B5=E9=9D=A2=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=A8=A1=E5=9E=8B=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/css/mobile/chat-session.styl |  14 +-
 web/src/assets/css/mobile/image-sd.styl     |   1 +
 web/src/assets/css/theme-dark.styl          |  12 +-
 web/src/views/Login.vue                     |   4 +-
 web/src/views/mobile/ChatSession.vue        | 590 ++++++++++----------
 web/src/views/mobile/Profile.vue            | 277 +++++----
 web/src/views/mobile/pages/ImageDall.vue    | 512 +++++++++--------
 web/src/views/mobile/pages/ImageMj.vue      | 582 ++++++++++---------
 web/src/views/mobile/pages/ImageSd.vue      | 529 ++++++++----------
 9 files changed, 1215 insertions(+), 1306 deletions(-)

diff --git a/web/src/assets/css/mobile/chat-session.styl b/web/src/assets/css/mobile/chat-session.styl
index 65a73fd3..c4d8dbd3 100644
--- a/web/src/assets/css/mobile/chat-session.styl
+++ b/web/src/assets/css/mobile/chat-session.styl
@@ -79,12 +79,12 @@
   }
 }
 
-.van-theme-dark {
-  .mobile-chat {
-    .chat-list-wrapper {
-      background #232425;
-    }
-  }
-}
+// .van-theme-dark {
+//   .mobile-chat {
+//     .chat-list-wrapper {
+//       background #232425;
+//     }
+//   }
+// }
 
 @import "model-select.styl"
\ No newline at end of file
diff --git a/web/src/assets/css/mobile/image-sd.styl b/web/src/assets/css/mobile/image-sd.styl
index f470422a..31c036f5 100644
--- a/web/src/assets/css/mobile/image-sd.styl
+++ b/web/src/assets/css/mobile/image-sd.styl
@@ -183,6 +183,7 @@
             display flex
             flex-flow column
             justify-content center
+            height 200px
 
             .title {
               margin-bottom 20px
diff --git a/web/src/assets/css/theme-dark.styl b/web/src/assets/css/theme-dark.styl
index 25ded2c3..5946a768 100644
--- a/web/src/assets/css/theme-dark.styl
+++ b/web/src/assets/css/theme-dark.styl
@@ -57,9 +57,6 @@
   .more-menus span.title{
     color:#000;
   }
-  .menu-list .menu-list-item.active .el-icon{
-    background: #0080006e;
-  }
 
   // 操作按钮
   --btn-bg: rgba(86, 86, 95, .5);
@@ -79,4 +76,13 @@
 
   --code-bg-color: #424242;
   --code-text-color: #fff;
+
+  // vant 主题样式
+  --van-cell-background: #141a36;
+  --van-cell-background-light: #242a46;
+  --van-button-default-background: #141a36;
+  --van-background: #141a36;
+  --van-tabbar-background: #141a36;
+  --van-nav-bar-background: #1B244A;
+  --van-dropdown-menu-background: #141a36;
 }
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 3d91b600..999001dd 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -132,8 +132,8 @@ const login = async function () {
 const store = useSharedStore();
 const doLogin = (verifyData) => {
   httpPost("/api/user/login", {
-    username: username.value.trim(),
-    password: password.value.trim(),
+    username: username.value,
+    password: password.value,
     key: verifyData.key,
     dots: verifyData.dots,
     x: verifyData.x,
diff --git a/web/src/views/mobile/ChatSession.vue b/web/src/views/mobile/ChatSession.vue
index 5fdcd338..b5ac8c1f 100644
--- a/web/src/views/mobile/ChatSession.vue
+++ b/web/src/views/mobile/ChatSession.vue
@@ -12,69 +12,47 @@
         </template>
         <template #left>
           <span class="setting">
-            <van-icon name="setting-o" @click="showPicker = true"/>
+            <van-icon name="add-o" @click="showPicker = true" />
           </span>
         </template>
         <template #right>
-          <van-icon name="share-o" @click="showShare = true"/>
+          <van-icon name="share-o" @click="showShare = true" />
         </template>
-
       </van-nav-bar>
 
-      <van-share-sheet
-          v-model:show="showShare"
-          title="立即分享给好友"
-          :options="shareOptions"
-          @select="shareChat"
-      />
+      <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="shareOptions" @select="shareChat" />
 
       <div class="chat-list-wrapper">
-        <div id="message-list-box" :style="{height: winHeight + 'px'}" class="message-list-box">
-          <van-list
-              v-model:error="error"
-              :finished="finished"
-              error-text="请求失败，点击重新加载"
-              @load="onLoad"
-          >
+        <div id="message-list-box" :style="{ height: winHeight + 'px' }" class="message-list-box">
+          <van-list v-model:error="error" :finished="finished" error-text="请求失败，点击重新加载" @load="onLoad">
             <van-cell v-for="item in chatData" :key="item" :border="false" class="message-line">
-              <chat-prompt
-                  v-if="item.type==='prompt'"
-                  :content="item.content"
-                  :icon="item.icon"/>
-              <chat-reply v-else-if="item.type==='reply'"
-                          :content="item.content"
-                          :icon="item.icon"
-                          :org-content="item.orgContent"/>
+              <chat-prompt v-if="item.type === 'prompt'" :content="item.content" :icon="item.icon" />
+              <chat-reply v-else-if="item.type === 'reply'" :content="item.content" :icon="item.icon" :org-content="item.orgContent" />
             </van-cell>
           </van-list>
         </div>
       </div>
 
-
       <div class="chat-box-wrapper">
         <van-sticky ref="bottomBarRef" :offset-bottom="0" position="bottom">
-          <van-cell-group inset>
-            <van-field
-                v-model="prompt"
-                center
-                clearable
-                placeholder="输入你的问题"
-            >
-              <!--              <template #left-icon>-->
-              <!--                <van-button round type="success" class="button-voice" @click="inputVoice">-->
-              <!--                  <el-icon>-->
-              <!--                    <Microphone/>-->
-              <!--                  </el-icon>-->
-              <!--                </van-button>-->
-              <!--              </template>-->
+          <van-cell-group inset style="--van-cell-background: var(--van-cell-background-light)">
+            <!-- <div class="flex flex-row p-2">
+              <file-list :files="[{ url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', name: 'test.png', ext: 'png', size: 1024 }]" />
+            </div> -->
+            <van-field v-model="prompt" center clearable placeholder="输入你的问题">
+              <template #left-icon>
+                <!-- <div class="flex flex-row">
+                  <span class="rounded-full size-6 flex items-center justify-center"><i class="iconfont icon-attachment-cl"></i></span>
+                </div> -->
+              </template>
 
               <template #button>
                 <van-button size="small" type="primary" @click="sendMessage">发送</van-button>
               </template>
               <template #extra>
                 <div class="icon-box">
-                  <van-icon v-if="showStopGenerate" name="stop-circle-o" @click="stopGenerate"/>
-                  <van-icon v-if="showReGenerate" name="play-circle-o" @click="reGenerate"/>
+                  <van-icon v-if="showStopGenerate" name="stop-circle-o" @click="stopGenerate" />
+                  <van-icon v-if="showReGenerate" name="play-circle-o" @click="reGenerate" />
                 </div>
               </template>
             </van-field>
@@ -83,7 +61,7 @@
       </div>
     </div>
 
-    <button id="copy-link-btn" style="display: none;" :data-clipboard-text="url">复制链接地址</button>
+    <button id="copy-link-btn" style="display: none" :data-clipboard-text="url">复制链接地址</button>
 
     <!--    <van-overlay :show="showMic" z-index="100">-->
     <!--      <div class="mic-wrapper">-->
@@ -100,21 +78,10 @@
   </div>
 
   <van-popup v-model:show="showPicker" position="bottom" class="popup">
-    <van-picker
-        :columns="columns"
-        v-model="selectedValues"
-        title="选择模型和角色"
-        @cancel="showPicker = false"
-        @confirm="newChat"
-    >
+    <van-picker :columns="columns" v-model="selectedValues" title="选择模型和角色" @cancel="showPicker = false" @confirm="newChat">
       <template #option="item">
         <div class="picker-option">
-          <van-image
-              v-if="item.icon"
-              :src="item.icon"
-              fit="cover"
-              round
-          />
+          <van-image v-if="item.icon" :src="item.icon" fit="cover" round />
           <span>{{ item.text }}</span>
         </div>
       </template>
@@ -123,148 +90,162 @@
 </template>
 
 <script setup>
-import {nextTick, onMounted, onUnmounted, ref, watch} from "vue";
-import {showImagePreview, showNotify, showToast} from "vant";
-import {useRouter} from "vue-router";
-import {processContent, randString, renderInputText, UUID} from "@/utils/libs";
-import {httpGet} from "@/utils/http";
+import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { showImagePreview, showNotify, showToast } from "vant";
+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 "highlight.js/styles/a11y-dark.css";
 import ChatPrompt from "@/components/mobile/ChatPrompt.vue";
 import ChatReply from "@/components/mobile/ChatReply.vue";
-import {checkSession, getClientId} from "@/store/cache";
+import { checkSession, getClientId } from "@/store/cache";
 import Clipboard from "clipboard";
-import { showMessageError} from "@/utils/dialog";
-import {useSharedStore} from "@/store/sharedata";
+import { showMessageError } from "@/utils/dialog";
+import { useSharedStore } from "@/store/sharedata";
+import emoji from "markdown-it-emoji";
+import mathjaxPlugin from "markdown-it-mathjax3";
+import MarkdownIt from "markdown-it";
+import FileList from "@/components/FileList.vue";
+const winHeight = ref(0);
+const navBarRef = ref(null);
+const bottomBarRef = ref(null);
+const router = useRouter();
 
-const winHeight = ref(0)
-const navBarRef = ref(null)
-const bottomBarRef = ref(null)
-const router = useRouter()
-
-const roles = ref([])
-const roleId = ref(parseInt(router.currentRoute.value.query["role_id"]))
-const role = ref({})
-const models = ref([])
-const modelId = ref(parseInt(router.currentRoute.value.query["model_id"]))
-const modelValue = ref("")
-const title = ref(router.currentRoute.value.query["title"])
-const chatId = ref(router.currentRoute.value.query["chat_id"])
-const loginUser = ref(null)
+const roles = ref([]);
+const roleId = ref(parseInt(router.currentRoute.value.query["role_id"]));
+const role = ref({});
+const models = ref([]);
+const modelId = ref(parseInt(router.currentRoute.value.query["model_id"]));
+const modelValue = ref("");
+const title = ref(router.currentRoute.value.query["title"]);
+const chatId = ref(router.currentRoute.value.query["chat_id"]);
+const loginUser = ref(null);
 // const showMic = ref(false)
-const showPicker = ref(false)
-const columns = ref([roles.value, models.value])
-const selectedValues = ref([roleId.value, modelId.value])
+const showPicker = ref(false);
+const columns = ref([roles.value, models.value]);
+const selectedValues = ref([roleId.value, modelId.value]);
 
-checkSession().then(user => {
-  loginUser.value = user
-}).catch(() => {
-  router.push('/login')
-})
+checkSession()
+  .then((user) => {
+    loginUser.value = user;
+  })
+  .catch(() => {
+    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']
+  httpGet("/api/model/list")
+    .then((res) => {
+      models.value = res.data;
+      if (!modelId.value) {
+        modelId.value = models.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
+      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;
       }
-      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})
+      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})
-  })
-}
+    .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()
-  })
+  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 = "新建对话"
-  chatId.value = UUID()
-  loadModels()
+  title.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')({
+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 md = new MarkdownIt({
   breaks: true,
   html: true,
   linkify: true,
   typographer: true,
   highlight: function (str, lang) {
-    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
+    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
     // 显示复制代码按钮
     const copyBtn = `<span class="copy-code-mobile" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
-<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(/<\/textarea>/g, '&lt;/textarea>')}</textarea>`
+<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(
+      /<\/textarea>/g,
+      "&lt;/textarea>"
+    )}</textarea>`;
     if (lang && hl.getLanguage(lang)) {
-      const langHtml = `<span class="lang-name">${lang}</span>`
+      const langHtml = `<span class="lang-name">${lang}</span>`;
       // 处理代码高亮
-      const preCode = hl.highlight(lang, str, true).value
+      const preCode = hl.highlight(lang, str, true).value;
       // 将代码包裹在 pre 中
-      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
+      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`;
     }
 
     // 处理代码高亮
-    const preCode = md.utils.escapeHtml(str)
+    const preCode = md.utils.escapeHtml(str);
     // 将代码包裹在 pre 中
-    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
-  }
+    return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`;
+  },
 });
-md.use(mathjaxPlugin)
+md.use(mathjaxPlugin);
+md.use(emoji);
 onMounted(() => {
-  winHeight.value = window.innerHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight - 70
+  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})
-  })
+  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) => {
+  store.addMessageHandler("chat", (data) => {
     if (data.channel !== "chat" || data.clientId !== getClientId()) {
-      return
+      return;
     }
 
-    if (data.type === 'error') {
-      showMessageError(data.body)
-      return
+    if (data.type === "error") {
+      showMessageError(data.body);
+      return;
     }
 
     if (isNewMsg.value) {
@@ -272,127 +253,132 @@ onMounted(() => {
         type: "reply",
         id: randString(32),
         icon: role.value.icon,
-        content: data.body
+        content: data.body,
       });
       if (!title.value) {
-        title.value = previousText.value
+        title.value = previousText.value;
       }
       lineBuffer.value = data.body;
-      isNewMsg.value = false
-    } else if (data.type === 'end') { // 消息接收完毕
-      enableInput()
-      lineBuffer.value = ''; // 清空缓冲
-      isNewMsg.value = true
+      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));
+      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');
+        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()
+          hl.highlightElement(block);
+        });
+        scrollListBox();
 
-        const items = document.querySelectorAll('.message-line')
-        const imgs = items[items.length - 1].querySelectorAll('img')
+        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
+            continue;
           }
-          imgs[i].addEventListener('click', (e) => {
-            e.stopPropagation()
+          imgs[i].addEventListener("click", (e) => {
+            e.stopPropagation();
             showImagePreview([imgs[i].src]);
-          })
+          });
         }
-      })
+      });
     }
-  })
-})
+  });
+});
 
 onUnmounted(() => {
-  store.removeMessageHandler("chat")
-})
+  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()
-}
+  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;
+  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;
       }
 
-      data[i].orgContent = data[i].content;
-      data[i].content = md.render(processContent(data[i].content))
-      chatData.value.push(data[i]);
-    }
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].type === "prompt") {
+          chatData.value.push(data[i]);
+          continue;
+        }
 
-    nextTick(() => {
-      hl.configure({ignoreUnescapedHTML: true})
-      const blocks = document.querySelector("#message-list-box").querySelectorAll('pre code');
-      blocks.forEach((block) => {
-        hl.highlightElement(block)
-      })
+        data[i].orgContent = data[i].content;
+        data[i].content = md.render(processContent(data[i].content));
+        chatData.value.push(data[i]);
+      }
 
-      scrollListBox()
+      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
-  })
-}
+    .catch(() => {
+      error.value = true;
+    });
+};
 
 // 创建 socket 连接
-const prompt = ref('');
+const prompt = ref("");
 const showStopGenerate = ref(false); // 停止生成
 const showReGenerate = ref(false); // 重新生成
-const previousText = ref(''); // 上一次提问
-const lineBuffer = ref(''); // 输出缓冲行
-const canSend = ref(true)
-const isNewMsg = ref(true)
-const stream = ref(store.chatStream)
-watch(() => store.chatStream, (newValue) => {
-  stream.value = newValue
-});
+const previousText = ref(""); // 上一次提问
+const lineBuffer = ref(""); // 输出缓冲行
+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();
@@ -487,38 +473,36 @@ watch(() => store.chatStream, (newValue) => {
 //   socket.value = _socket;
 // }
 
-
-
 const disableInput = (force) => {
   canSend.value = false;
   showReGenerate.value = false;
   showStopGenerate.value = !force;
-}
+};
 
 const enableInput = () => {
   canSend.value = true;
   showReGenerate.value = previousText.value !== "";
   showStopGenerate.value = false;
-}
+};
 
 // 将聊天框的滚动条滑动到最底部
 const scrollListBox = () => {
-  document.getElementById('message-list-box').scrollTo(0, document.getElementById('message-list-box').scrollHeight + 46)
-}
+  document.getElementById("message-list-box").scrollTo(0, document.getElementById("message-list-box").scrollHeight + 46);
+};
 
 const sendMessage = () => {
   if (canSend.value === false) {
     showToast("AI 正在作答中，请稍后...");
-    return
+    return;
   }
 
   if (store.socket.conn.readyState !== WebSocket.OPEN) {
     showToast("连接断开，正在重连...");
-    return
+    return;
   }
 
   if (prompt.value.trim().length === 0) {
-    showToast("请输入需要 AI 回答的问题")
+    showToast("请输入需要 AI 回答的问题");
     return false;
   }
 
@@ -532,91 +516,95 @@ const sendMessage = () => {
   });
 
   nextTick(() => {
-    scrollListBox()
-  })
+    scrollListBox();
+  });
 
-  disableInput(false)
-  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
-    }
-  }));
+  disableInput(false);
+  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 = '';
+  prompt.value = "";
   return true;
-}
+};
 
 const stopGenerate = () => {
   showStopGenerate.value = false;
   httpGet("/api/chat/stop?session_id=" + getClientId()).then(() => {
-    enableInput()
-  })
-}
+    enableInput();
+  });
+};
 
 const reGenerate = () => {
-  disableInput(false)
-  const text = '重新生成上述问题的答案：' + previousText.value;
+  disableInput(false);
+  const text = "重新生成上述问题的答案：" + previousText.value;
   // 追加消息
   chatData.value.push({
     type: "prompt",
     id: randString(32),
     icon: loginUser.value.avatar,
-    content: renderInputText(text)
+    content: renderInputText(text),
   });
-  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
-    }
-  }));
-}
+  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)
+const showShare = ref(false);
 const shareOptions = [
-  {name: '微信', icon: 'wechat'},
-  {name: '复制链接', icon: 'link'},
-]
+  { name: "微信", icon: "wechat" },
+  { name: "复制链接", icon: "link" },
+];
 const shareChat = (option) => {
-  showShare.value = false
+  showShare.value = false;
   if (option.icon === "wechat") {
-    showToast({message: "当前会话已经导出，请通过浏览器或者微信的自带分享功能分享给好友", duration: 5000})
+    showToast({ message: "当前会话已经导出，请通过浏览器或者微信的自带分享功能分享给好友", duration: 5000 });
     router.push({
       path: "/mobile/chat/export",
-      query: {title: title.value, chat_id: chatId.value, role: role.value.name, model: modelValue.value}
-    })
+      query: { title: title.value, chat_id: chatId.value, role: role.value.name, model: modelValue.value },
+    });
   } else if (option.icon === "link") {
-    document.getElementById('copy-link-btn').click();
+    document.getElementById("copy-link-btn").click();
   }
-}
+};
 
 const getRoleById = function (rid) {
   for (let i = 0; i < roles.value.length; i++) {
-    if (roles.value[i]['id'] === rid) {
+    if (roles.value[i]["id"] === rid) {
       return roles.value[i];
     }
   }
   return null;
-}
+};
 
 const getModelName = (model_id) => {
   for (let i = 0; i < models.value.length; i++) {
     if (models.value[i].id === model_id) {
-      return models.value[i].text
+      return models.value[i].text;
     }
   }
-  return ""
-}
+  return "";
+};
 
 // // eslint-disable-next-line no-undef
 // const recognition = new webkitSpeechRecognition() || SpeechRecognition();
@@ -647,4 +635,4 @@ const getModelName = (model_id) => {
 
 <style lang="stylus">
 @import "@/assets/css/mobile/chat-session.styl"
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/mobile/Profile.vue b/web/src/views/mobile/Profile.vue
index 7d204f21..bca27b80 100644
--- a/web/src/views/mobile/Profile.vue
+++ b/web/src/views/mobile/Profile.vue
@@ -4,24 +4,14 @@
       <van-form v-if="isLogin">
         <div class="avatar">
           <van-image :src="fileList[0].url" size="80" width="80" fit="cover" round />
-<!--          <van-uploader v-model="fileList"-->
-<!--                        reupload max-count="1"-->
-<!--                        :deletable="false"-->
-<!--                        :after-read="afterRead"/>-->
+          <!--          <van-uploader v-model="fileList"-->
+          <!--                        reupload max-count="1"-->
+          <!--                        :deletable="false"-->
+          <!--                        :after-read="afterRead"/>-->
         </div>
         <van-cell-group inset v-model="form">
-          <van-field
-              v-model="form.username"
-              label="账号"
-              readonly
-              disabled
-          />
-          <van-field
-              v-model="form.nickname"
-              label="昵称"
-              readonly
-              disabled
-          />
+          <van-field v-model="form.username" label="账号" readonly />
+          <van-field v-model="form.nickname" label="昵称" readonly />
 
           <van-field label="算力">
             <template #input>
@@ -34,7 +24,6 @@
               {{ dateFormat(form.expired_time) }}
             </template>
           </van-field>
-
         </van-cell-group>
       </van-form>
 
@@ -59,14 +48,10 @@
           <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">
+              <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>
+                  <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>
@@ -74,9 +59,7 @@
 
           <van-cell-group>
             <van-cell title="商品价格">
-              <span class="price">
-                ￥{{ item.discount }}
-              </span>
+              <span class="price"> ￥{{ item.discount }} </span>
               （
               <del>￥{{ item.price }}</del>
               ）
@@ -92,29 +75,21 @@
           </van-cell-group>
         </div>
       </div>
-
     </div>
 
-    <van-dialog v-model:show="showPasswordDialog" title="修改密码" show-cancel-button
-                @confirm="updatePass"
-                @cancel="showPasswordDialog = false"
-                :before-close="beforeClose">
+    <van-dialog
+      v-model:show="showPasswordDialog"
+      title="修改密码"
+      show-cancel-button
+      @confirm="updatePass"
+      @cancel="showPasswordDialog = false"
+      :before-close="beforeClose"
+    >
       <van-form>
         <van-cell-group inset>
-          <van-field
-              v-model="pass.old"
-              placeholder="旧密码"
-          />
-          <van-field
-              v-model="pass.new"
-              type="password"
-              placeholder="新密码"
-          />
-          <van-field
-              v-model="pass.renew"
-              type="password"
-              placeholder="确认密码"
-          />
+          <van-field v-model="pass.old" placeholder="旧密码" />
+          <van-field v-model="pass.new" type="password" placeholder="新密码" />
+          <van-field v-model="pass.renew" type="password" placeholder="确认密码" />
         </van-cell-group>
       </van-form>
     </van-dialog>
@@ -125,13 +100,13 @@
           <van-cell-group inset>
             <van-field name="switch" label="暗黑主题">
               <template #input>
-                <van-switch v-model="dark" @change="(val) => store.setTheme(val?'dark':'light')"/>
+                <van-switch v-model="dark" @change="(val) => store.setTheme(val ? 'dark' : 'light')" />
               </template>
             </van-field>
 
             <van-field name="switch" label="流式输出">
               <template #input>
-                <van-switch v-model="stream" @change="(val) => store.setChatStream(val)"/>
+                <van-switch v-model="stream" @change="(val) => store.setChatStream(val)" />
               </template>
             </van-field>
             <!--            <van-field-->
@@ -151,81 +126,87 @@
         </van-form>
       </div>
     </van-action-sheet>
-
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import {showFailToast, showLoadingToast, showNotify, showSuccessToast} from "vant";
-import {httpGet, httpPost} from "@/utils/http";
-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 {useSharedStore} from "@/store/sharedata";
+import { onMounted, ref } from "vue";
+import { showFailToast, showLoadingToast, showNotify, showSuccessToast } from "vant";
+import { httpGet, httpPost } from "@/utils/http";
+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 { useSharedStore } from "@/store/sharedata";
 
 const form = ref({
-  username: 'GeekMaster',
-  nickname: '极客学长@001',
-  mobile: '1300000000',
-  avatar: '',
+  username: "GeekMaster",
+  nickname: "极客学长@001",
+  mobile: "1300000000",
+  avatar: "",
   power: 0,
-})
+});
 const fileList = ref([
   {
-    url: '/images/user-info.png',
-    message: '上传中...',
-  }
+    url: "/images/user-info.png",
+    message: "上传中...",
+  },
 ]);
 
-const products = ref([])
-const vipMonthPower = ref(0)
-const payWays = ref({})
-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.theme === 'dark')
+const products = ref([]);
+const vipMonthPower = ref(0);
+const payWays = ref({});
+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.theme === "dark");
 
 onMounted(() => {
-  checkSession().then(user => {
-    userId.value = user.id
-    isLogin.value = true
-    httpGet('/api/user/profile').then(res => {
-      form.value = res.data
-      fileList.value[0].url = form.value.avatar
-    }).catch((e) => {
-      console.log(e.message)
-      showFailToast('获取用户信息失败')
-    });
-  }).catch(() => {
-
-  })
+  checkSession()
+    .then((user) => {
+      userId.value = user.id;
+      isLogin.value = true;
+      httpGet("/api/user/profile")
+        .then((res) => {
+          form.value = res.data;
+          fileList.value[0].url = form.value.avatar;
+        })
+        .catch((e) => {
+          console.log(e.message);
+          showFailToast("获取用户信息失败");
+        });
+    })
+    .catch(() => {});
 
   // 获取产品列表
-  httpGet("/api/product/list").then((res) => {
-    products.value = res.data
-  }).catch(e => {
-    showFailToast("获取产品套餐失败：" + e.message)
-  })
+  httpGet("/api/product/list")
+    .then((res) => {
+      products.value = res.data;
+    })
+    .catch((e) => {
+      showFailToast("获取产品套餐失败：" + e.message);
+    });
 
-  getSystemInfo().then(res => {
-    vipMonthPower.value = res.data['vip_month_power']
-  }).catch(e => {
-    showFailToast("获取系统配置失败：" + e.message)
-  })
+  getSystemInfo()
+    .then((res) => {
+      vipMonthPower.value = res.data["vip_month_power"];
+    })
+    .catch((e) => {
+      showFailToast("获取系统配置失败：" + e.message);
+    });
 
-  httpGet("/api/payment/payWays").then(res => {
-    payWays.value = res.data
-  }).catch(e => {
-    ElMessage.error("获取支付方式失败：" + e.message)
-  })
-
-})
+  httpGet("/api/payment/payWays")
+    .then((res) => {
+      payWays.value = res.data;
+    })
+    .catch((e) => {
+      ElMessage.error("获取支付方式失败：" + e.message);
+    });
+});
 
 // const afterRead = (file) => {
 //   file.status = 'uploading';
@@ -255,55 +236,56 @@ onMounted(() => {
 //   });
 // }
 
-const showPasswordDialog = ref(false)
+const showPasswordDialog = ref(false);
 const pass = ref({
   old: "",
   new: "",
-  renew: ""
-})
+  renew: "",
+});
 
 const beforeClose = (action) => {
   new Promise((resolve) => {
-    resolve(action === 'confirm');
+    resolve(action === "confirm");
   });
-}
-
+};
 
 // 提交修改密码
 const updatePass = () => {
-  if (pass.value.old === '') {
-    return showNotify({type: "danger", message: "请输入旧密码"})
+  if (pass.value.old === "") {
+    return showNotify({ type: "danger", message: "请输入旧密码" });
   }
   if (!pass.value.new || pass.value.new.length < 8) {
-    return showNotify({type: "danger", message: "密码的长度为8-16个字符"})
+    return showNotify({ type: "danger", message: "密码的长度为8-16个字符" });
   }
   if (pass.value.renew !== pass.value.new) {
-    return showNotify({type: "danger", message: "两次输入密码不一致"})
+    return showNotify({ type: "danger", message: "两次输入密码不一致" });
   }
-  httpPost('/api/user/password', {
+  httpPost("/api/user/password", {
     old_pass: pass.value.old,
     password: pass.value.new,
-    repass: pass.value.renew
-  }).then(() => {
-    showSuccessToast("更新成功！")
-    showPasswordDialog.value = false
-  }).catch((e) => {
-    showFailToast('更新失败，' + e.message)
-    showPasswordDialog.value = false
+    repass: pass.value.renew,
   })
-}
+    .then(() => {
+      showSuccessToast("更新成功！");
+      showPasswordDialog.value = false;
+    })
+    .catch((e) => {
+      showFailToast("更新失败，" + e.message);
+      showPasswordDialog.value = false;
+    });
+};
 
-const pay = (product,payWay) => {
+const pay = (product, payWay) => {
   if (!isLogin.value) {
-    return showLoginDialog(router)
+    return showLoginDialog(router);
   }
 
   showLoadingToast({
-    message: '正在创建订单',
+    message: "正在创建订单",
     forbidClick: true,
   });
-  let host = process.env.VUE_APP_API_HOST
-  if (host === '') {
+  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`, {
@@ -312,24 +294,27 @@ const pay = (product,payWay) => {
     pay_type: payWay.pay_type,
     user_id: userId.value,
     host: host,
-    device: "wechat"
-  }).then(res => {
-    location.href = res.data
-  }).catch(e => {
-    showFailToast("生成支付订单失败：" + e.message)
+    device: "wechat",
   })
-}
+    .then((res) => {
+      location.href = res.data;
+    })
+    .catch((e) => {
+      showFailToast("生成支付订单失败：" + e.message);
+    });
+};
 
 const logout = function () {
-  httpGet('/api/user/logout').then(() => {
-    removeUserToken();
-    store.setIsLogin(false)
-    router.push('/');
-  }).catch(() => {
-    showFailToast('注销失败！');
-  })
-}
-
+  httpGet("/api/user/logout")
+    .then(() => {
+      removeUserToken();
+      store.setIsLogin(false);
+      router.push("/");
+    })
+    .catch(() => {
+      showFailToast("注销失败！");
+    });
+};
 </script>
 
 <style lang="stylus">
@@ -405,4 +390,4 @@ const logout = function () {
     padding 16px
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/mobile/pages/ImageDall.vue b/web/src/views/mobile/pages/ImageDall.vue
index 872d1641..90081507 100644
--- a/web/src/views/mobile/pages/ImageDall.vue
+++ b/web/src/views/mobile/pages/ImageDall.vue
@@ -3,62 +3,38 @@
     <van-form @submit="generate">
       <van-cell-group inset>
         <div>
-          <van-field
-              v-model="quality"
-              is-link
-              label="图片质量"
-              placeholder="选择图片质量"
-              @click="showQualityPicker = true"
-          />
+          <van-field v-model="selectedModel" is-link label="生图模型" placeholder="选择生图模型" @click="showModelPicker = true" />
+          <van-popup v-model:show="showModelPicker" position="bottom" teleport="#app">
+            <van-picker :columns="models" @cancel="showModelPicker = false" @confirm="modelConfirm" />
+          </van-popup>
+        </div>
+        <div>
+          <van-field v-model="quality" is-link label="图片质量" placeholder="选择图片质量" @click="showQualityPicker = true" />
           <van-popup v-model:show="showQualityPicker" position="bottom" teleport="#app">
-            <van-picker
-                :columns="qualities"
-                @cancel="showQualityPicker = false"
-                @confirm="qualityConfirm"
-            />
+            <van-picker :columns="qualities" @cancel="showQualityPicker = false" @confirm="qualityConfirm" />
           </van-popup>
         </div>
 
         <div>
-          <van-field
-              v-model="size"
-              is-link
-              label="图片尺寸"
-              placeholder="选择图片尺寸"
-              @click="showSizePicker = true"
-          />
+          <van-field v-model="size" is-link label="图片尺寸" placeholder="选择图片尺寸" @click="showSizePicker = true" />
           <van-popup v-model:show="showSizePicker" position="bottom" teleport="#app">
-            <van-picker
-                :columns="sizes"
-                @cancel="showSizePicker = false"
-                @confirm="sizeConfirm"
-            />
+            <van-picker :columns="sizes" @cancel="showSizePicker = false" @confirm="sizeConfirm" />
           </van-popup>
         </div>
 
         <div>
-          <van-field
-              v-model="style"
-              is-link
-              label="图片样式"
-              placeholder="选择图片样式"
-              @click="showStylePicker = true"
-          />
+          <van-field v-model="style" is-link label="图片样式" placeholder="选择图片样式" @click="showStylePicker = true" />
           <van-popup v-model:show="showStylePicker" position="bottom" teleport="#app">
-            <van-picker
-                :columns="styles"
-                @cancel="showStylePicker = false"
-                @confirm="styleConfirm"
-            />
+            <van-picker :columns="styles" @cancel="showStylePicker = false" @confirm="styleConfirm" />
           </van-popup>
         </div>
 
         <van-field
-            v-model="params.prompt"
-            rows="3"
-            autosize
-            type="textarea"
-            placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"
+          v-model="params.prompt"
+          rows="3"
+          autosize
+          type="textarea"
+          placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"
         />
 
         <div class="text-line pt-6">
@@ -66,33 +42,25 @@
         </div>
 
         <div class="text-line">
-          <van-button round block type="primary" native-type="submit">
-            立即生成
-          </van-button>
+          <van-button round block type="primary" native-type="submit"> 立即生成 </van-button>
         </div>
       </van-cell-group>
     </van-form>
 
     <h3>任务列表</h3>
-    <div class="running-job-list">
-      <van-empty v-if="runningJobs.length ===0"
-                 image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
-                 image-size="80"
-                 description="暂无记录"
+    <div class="running-job-list pt-3 pb-3">
+      <van-empty
+        v-if="runningJobs.length === 0"
+        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
+        image-size="80"
+        description="暂无记录"
       />
       <van-grid :gutter="10" :column-num="3" v-else>
         <van-grid-item v-for="item in runningJobs" :key="item.id">
           <div v-if="item.progress > 0">
             <van-image src="/images/img-holder.png"></van-image>
             <div class="progress">
-              <van-circle
-                  v-model:current-rate="item.progress"
-                  :rate="item.progress"
-                  :speed="100"
-                  :text="item.progress+'%'"
-                  :stroke-width="60"
-                  size="90px"
-              />
+              <van-circle v-model:current-rate="item.progress" :rate="item.progress" :speed="100" :text="item.progress + '%'" :stroke-width="60" size="90px" />
             </div>
           </div>
 
@@ -100,26 +68,27 @@
             <span class="icon"><i class="iconfont icon-quick-start"></i></span>
             <span class="text">排队中</span>
           </div>
-
         </van-grid-item>
       </van-grid>
     </div>
 
     <h3>创作记录</h3>
     <div class="finish-job-list">
-      <van-empty v-if="finishedJobs.length ===0"
-                 image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
-                 image-size="80"
-                 description="暂无记录"
+      <van-empty
+        v-if="finishedJobs.length === 0"
+        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
+        image-size="80"
+        description="暂无记录"
       />
 
-      <van-list v-else
-                v-model:error="error"
-                v-model:loading="loading"
-                :finished="finished"
-                error-text="请求失败，点击重新加载"
-                finished-text="没有更多了"
-                @load="onLoad"
+      <van-list
+        v-else
+        v-model:error="error"
+        v-model:loading="loading"
+        :finished="finished"
+        error-text="请求失败，点击重新加载"
+        finished-text="没有更多了"
+        @load="onLoad"
       >
         <van-grid :gutter="10" :column-num="2">
           <van-grid-item v-for="item in finishedJobs" :key="item.id">
@@ -127,25 +96,19 @@
               <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>
+                <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'"
-                  lazy-load
-                  @click="imageView(item)"
-                  fit="cover">
+              <van-image :src="item['img_url']" :class="item['can_opt'] ? '' : 'upscale'" lazy-load @click="imageView(item)" fit="cover">
                 <template v-slot:loading>
-                  <van-loading type="spinner" size="20"/>
+                  <van-loading type="spinner" size="20" />
                 </template>
               </van-image>
 
               <div class="remove">
-                <el-button type="danger" :icon="Delete" @click="removeImage($event, item)" circle/>
-                <el-button type="warning" v-if="item.publish" @click="publishImage($event,item, false)"
-                           circle>
+                <el-button type="danger" :icon="Delete" @click="removeImage($event, item)" circle />
+                <el-button type="warning" v-if="item.publish" @click="publishImage($event, item, false)" circle>
                   <i class="iconfont icon-cancel-share"></i>
                 </el-button>
                 <el-button type="success" v-else @click="publishImage($event, item, true)" circle>
@@ -159,277 +122,302 @@
           </van-grid-item>
         </van-grid>
       </van-list>
-
     </div>
     <button style="display: none" class="copy-prompt-dall" :data-clipboard-text="prompt" id="copy-btn-dall">复制</button>
   </div>
 </template>
 
 <script setup>
-import {onMounted, onUnmounted, ref} from "vue"
-import {Delete} from "@element-plus/icons-vue";
-import {httpGet, httpPost} from "@/utils/http";
+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, getClientId, getSystemInfo} from "@/store/cache";
-import {useRouter} from "vue-router";
-import {getSessionId} from "@/store/session";
-import {
-  showConfirmDialog,
-  showDialog,
-  showFailToast,
-  showImagePreview,
-  showNotify,
-  showSuccessToast,
-  showToast
-} from "vant";
-import {showLoginDialog} from "@/utils/libs";
-import {useSharedStore} from "@/store/sharedata";
+import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
+import { useRouter } from "vue-router";
+import { getSessionId } from "@/store/session";
+import { showConfirmDialog, showDialog, showFailToast, showImagePreview, showNotify, showSuccessToast, 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 isLogin = ref(false)
+const listBoxHeight = ref(window.innerHeight - 40);
+const mjBoxHeight = ref(window.innerHeight - 150);
+const isLogin = ref(false);
 
 window.onresize = () => {
-  listBoxHeight.value = window.innerHeight - 40
-  mjBoxHeight.value = window.innerHeight - 150
-}
+  listBoxHeight.value = window.innerHeight - 40;
+  mjBoxHeight.value = window.innerHeight - 150;
+};
 
 const qualities = [
-  {text: "标准", value: "standard"},
-  {text: "高清", value: "hd"},
-]
+  { text: "标准", value: "standard" },
+  { text: "高清", value: "hd" },
+];
 const sizes = [
-  {text:"1024x1024",value:"1024x1024"},
-  {text:"1792x1024",value:"1792x1024"},
-  {text: "1024x1792",value:"1024x1792"},
-]
+  { text: "1024x1024", value: "1024x1024" },
+  { text: "1792x1024", value: "1792x1024" },
+  { text: "1024x1792", value: "1024x1792" },
+];
 const styles = [
-  {text: "生动", value: "vivid"},
-  {text: "自然", value: "natural"}
-]
+  { text: "生动", value: "vivid" },
+  { text: "自然", value: "natural" },
+];
 const params = ref({
   client_id: getClientId(),
   quality: qualities[0].value,
   size: sizes[0].value,
   style: styles[0].value,
-  prompt: ""
-})
-const quality = ref(qualities[0].text)
-const size = ref(sizes[0].text)
-const style = ref(styles[0].text)
+  prompt: "",
+});
+const quality = ref(qualities[0].text);
+const size = ref(sizes[0].text);
+const style = ref(styles[0].text);
 
-const showQualityPicker = ref(false)
-const showStylePicker = ref(false)
-const showSizePicker = ref(false)
+const showQualityPicker = ref(false);
+const showStylePicker = ref(false);
+const showSizePicker = ref(false);
+const showModelPicker = ref(false);
 
+const runningJobs = ref([]);
+const finishedJobs = ref([]);
+const router = useRouter();
+const power = ref(0);
+const dallPower = ref(0); // 画一张 DALL 图片消耗算力
 
-const runningJobs = ref([])
-const finishedJobs = ref([])
-const router = useRouter()
-const power = ref(0)
-const dallPower = ref(0) // 画一张 DALL 图片消耗算力
+const userId = ref(0);
+const store = useSharedStore();
+const clipboard = ref(null);
+const prompt = ref("");
+const models = ref([]);
+const selectedModel = ref(null);
 
-const userId = ref(0)
-const store = useSharedStore()
-const clipboard = ref(null)
-const prompt = ref('')
 onMounted(() => {
-  initData()
+  initData();
   clipboard.value = new Clipboard(".copy-prompt-dall");
-  clipboard.value.on('success', () => {
-    showNotify({type: 'success', message: '复制成功', duration: 1000})
-  })
-  clipboard.value.on('error', () => {
-    showNotify({type: 'danger', message: '复制失败', duration: 2000})
-  })
+  clipboard.value.on("success", () => {
+    showNotify({ type: "success", message: "复制成功", duration: 1000 });
+  });
+  clipboard.value.on("error", () => {
+    showNotify({ type: "danger", message: "复制失败", duration: 2000 });
+  });
 
-  getSystemInfo().then(res => {
-    dallPower.value = res.data.dall_power
-  }).catch(e => {
-    showNotify({type: "danger", message: "获取系统配置失败：" + e.message})
-  })
+  getSystemInfo()
+    .then((res) => {
+      dallPower.value = res.data.dall_power;
+    })
+    .catch((e) => {
+      showNotify({ type: "danger", message: "获取系统配置失败：" + e.message });
+    });
 
   store.addMessageHandler("dall", (data) => {
     if (data.channel !== "dall" || data.clientId !== getClientId()) {
-      return
+      return;
     }
     if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 1
-      fetchFinishJobs(1)
+      page.value = 1;
+      fetchFinishJobs(1);
     }
-    fetchRunningJobs()
-  })
+    fetchRunningJobs();
+  });
 
-})
+  // 获取模型列表
+  httpGet("/api/dall/models")
+    .then((res) => {
+      for (let i = 0; i < res.data.length; i++) {
+        models.value.push({ text: res.data[i].name, value: res.data[i].id });
+      }
+      selectedModel.value = models.value[0]?.text;
+      params.value.model_id = models.value[0]?.value;
+    })
+    .catch((e) => {
+      showMessageError("获取模型列表失败：" + e.message);
+    });
+});
 
 onUnmounted(() => {
-  clipboard.value.destroy()
-  store.removeMessageHandler("dall")
-})
-
+  clipboard.value.destroy();
+  store.removeMessageHandler("dall");
+});
 
 const initData = () => {
-  checkSession().then(user => {
-    power.value = user['power']
-    isLogin.value = true
-    fetchRunningJobs()
-    fetchFinishJobs(1)
-  }).catch(() => {
-    loading.value = false
-  });
-}
+  checkSession()
+    .then((user) => {
+      power.value = user["power"];
+      isLogin.value = true;
+      fetchRunningJobs();
+      fetchFinishJobs(1);
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+};
 
 const fetchRunningJobs = () => {
   // 获取运行中的任务
-  httpGet(`/api/dall/jobs?finish=0`).then(res => {
-    runningJobs.value = res.data.items
-  }).catch(e => {
-    showNotify({type: "danger", message: "获取任务失败：" + e.message})
-  })
-}
+  httpGet(`/api/dall/jobs?finish=0`)
+    .then((res) => {
+      runningJobs.value = res.data.items;
+    })
+    .catch((e) => {
+      showNotify({ type: "danger", message: "获取任务失败：" + e.message });
+    });
+};
 
-const loading = ref(false)
-const finished = ref(false)
-const error = ref(false)
-const page = ref(0)
-const pageSize = ref(10)
+const loading = ref(false);
+const finished = ref(false);
+const error = ref(false);
+const page = ref(0);
+const pageSize = ref(10);
 // 获取已完成的任务
 const fetchFinishJobs = (page) => {
-  loading.value = true
-  httpGet(`/api/dall/jobs?finish=1&page=${page}&page_size=${pageSize.value}`).then(res => {
-    const jobs = res.data.items
-    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'
+  loading.value = true;
+  httpGet(`/api/dall/jobs?finish=1&page=${page}&page_size=${pageSize.value}`)
+    .then((res) => {
+      const jobs = res.data.items;
+      if (jobs.length < pageSize.value) {
+        finished.value = true;
       }
-      _jobs.push(jobs[i])
-    }
-    if (page === 1) {
-      finishedJobs.value = _jobs
-    } else {
-      finishedJobs.value = finishedJobs.value.concat(_jobs)
-    }
-    loading.value = false
-  }).catch(e => {
-    loading.value = false
-    showNotify({type: "danger", message: "获取任务失败：" + e.message})
-  })
-}
+      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;
+      } else {
+        finishedJobs.value = finishedJobs.value.concat(_jobs);
+      }
+      loading.value = false;
+    })
+    .catch((e) => {
+      loading.value = false;
+      showNotify({ type: "danger", message: "获取任务失败：" + e.message });
+    });
+};
 
 const onLoad = () => {
-  page.value += 1
-  fetchFinishJobs(page.value)
-}
+  page.value += 1;
+  fetchFinishJobs(page.value);
+};
 
 // 创建绘图任务
-const promptRef = ref(null)
+const promptRef = ref(null);
 const generate = () => {
   if (!isLogin.value) {
-    return showLoginDialog(router)
+    return showLoginDialog(router);
   }
 
-  if (params.value.prompt === '') {
-    promptRef.value.focus()
-    return showToast("请输入绘画提示词！")
+  if (params.value.prompt === "") {
+    promptRef.value.focus();
+    return showToast("请输入绘画提示词！");
   }
 
   if (!params.value.seed) {
-    params.value.seed = -1
+    params.value.seed = -1;
   }
-  params.value.session_id = getSessionId()
-  httpPost("/api/dall/image", params.value).then(() => {
-    showSuccessToast("绘画任务推送成功，请耐心等待任务执行...")
-    power.value -= dallPower.value
-    fetchRunningJobs()
-  }).catch(e => {
-    showFailToast("任务推送失败：" + e.message)
-  })
-}
+  params.value.session_id = getSessionId();
+  httpPost("/api/dall/image", params.value)
+    .then(() => {
+      showSuccessToast("绘画任务推送成功，请耐心等待任务执行...");
+      power.value -= dallPower.value;
+      fetchRunningJobs();
+    })
+    .catch((e) => {
+      showFailToast("任务推送失败：" + e.message);
+    });
+};
 
 const showPrompt = (item) => {
-  prompt.value = item.prompt
+  prompt.value = item.prompt;
   showConfirmDialog({
     title: "绘画提示词",
     message: item.prompt,
     confirmButtonText: "复制",
     cancelButtonText: "关闭",
-  }).then(() => {
-    document.querySelector('#copy-btn-dall').click()
-  }).catch(() => {
-  });
-}
+  })
+    .then(() => {
+      document.querySelector("#copy-btn-dall").click();
+    })
+    .catch(() => {});
+};
 
 const showErrMsg = (item) => {
   showDialog({
-    title: '错误详情',
-    message: item['err_msg'],
+    title: "错误详情",
+    message: item["err_msg"],
   }).then(() => {
     // on close
   });
-}
+};
 
 const removeImage = (event, item) => {
-  event.stopPropagation()
+  event.stopPropagation();
   showConfirmDialog({
-    title: '标题',
-    message:
-        '此操作将会删除任务和图片，继续操作码?',
-  }).then(() => {
-    httpGet("/api/dall/remove", {id: item.id, user_id: item.user_id}).then(() => {
-      showSuccessToast("任务删除成功")
-      fetchFinishJobs(1)
-    }).catch(e => {
-      showFailToast("任务删除失败：" + e.message)
+    title: "标题",
+    message: "此操作将会删除任务和图片，继续操作码?",
+  })
+    .then(() => {
+      httpGet("/api/dall/remove", { id: item.id, user_id: item.user_id })
+        .then(() => {
+          showSuccessToast("任务删除成功");
+          fetchFinishJobs(1);
+        })
+        .catch((e) => {
+          showFailToast("任务删除失败：" + e.message);
+        });
     })
-  }).catch(() => {
-    showToast("您取消了操作")
-  });
-}
+    .catch(() => {
+      showToast("您取消了操作");
+    });
+};
 
 // 发布图片到作品墙
 const publishImage = (event, item, action) => {
-  event.stopPropagation()
-  let text = "图片发布"
+  event.stopPropagation();
+  let text = "图片发布";
   if (action === false) {
-    text = "取消发布"
+    text = "取消发布";
   }
-  httpGet("/api/dall/publish", {id: item.id, action: action, user_id: item.user_id}).then(() => {
-    showSuccessToast(text + "成功")
-    item.publish = action
-  }).catch(e => {
-    showFailToast(text + "失败：" + e.message)
-  })
-}
+  httpGet("/api/dall/publish", { id: item.id, action: action, user_id: item.user_id })
+    .then(() => {
+      showSuccessToast(text + "成功");
+      item.publish = action;
+    })
+    .catch((e) => {
+      showFailToast(text + "失败：" + e.message);
+    });
+};
 
 const imageView = (item) => {
-  showImagePreview([item['img_url']]);
-}
-
+  showImagePreview([item["img_url"]]);
+};
 
 const qualityConfirm = (item) => {
   params.value.quality = item.selectedOptions[0].value;
-  quality.value = item.selectedOptions[0].text
-  showQualityPicker.value = false
-}
+  quality.value = item.selectedOptions[0].text;
+  showQualityPicker.value = false;
+};
 
 const styleConfirm = (item) => {
   params.value.style = item.selectedOptions[0].value;
-  style.value = item.selectedOptions[0].text
-  showStylePicker.value = false
-}
+  style.value = item.selectedOptions[0].text;
+  showStylePicker.value = false;
+};
 
-const sizeConfirm =(item) => {
-  params.value.size = item.selectedOptions[0].value
-  size.value=item.selectedOptions[0].text
-  showSizePicker.value =false
-}
+const sizeConfirm = (item) => {
+  params.value.size = item.selectedOptions[0].value;
+  size.value = item.selectedOptions[0].text;
+  showSizePicker.value = false;
+};
 
+const modelConfirm = (item) => {
+  params.value.model_id = item.selectedOptions[0].value;
+  selectedModel.value = item.selectedOptions[0].text;
+  showModelPicker.value = false;
+};
 </script>
 
 <style lang="stylus">
 @import "@/assets/css/mobile/image-sd.styl"
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/mobile/pages/ImageMj.vue b/web/src/views/mobile/pages/ImageMj.vue
index 725136d3..acbf28ff 100644
--- a/web/src/views/mobile/pages/ImageMj.vue
+++ b/web/src/views/mobile/pages/ImageMj.vue
@@ -5,9 +5,7 @@
       <div class="text-line">
         <van-row :gutter="10">
           <van-col :span="4" v-for="item in rates" :key="item.value">
-            <div
-                :class="item.value === params.rate ? 'rate active' : 'rate'"
-                @click="changeRate(item)">
+            <div :class="item.value === params.rate ? 'rate active' : 'rate'" @click="changeRate(item)">
               <div class="icon">
                 <van-image :src="item.img" fit="cover"></van-image>
               </div>
@@ -20,13 +18,12 @@
       <div class="text-line">
         <van-row :gutter="10">
           <van-col :span="8" v-for="item in models" :key="item.value">
-            <div :class="item.value === params.model ? 'model active' : 'model'"
-                 @click="changeModel(item)">
+            <div :class="item.value === params.model ? 'model active' : 'model'" @click="changeModel(item)">
               <div class="icon">
                 <van-image :src="item.img" fit="cover"></van-image>
               </div>
               <div class="text">
-                <van-text-ellipsis :content="item.text"/>
+                <van-text-ellipsis :content="item.text" />
               </div>
             </div>
           </van-col>
@@ -35,8 +32,7 @@
       <div class="text-line">
         <van-field label="创意度">
           <template #input>
-            <van-slider v-model.number="params.chaos" :max="100" :step="1"
-                        @update:model-value="showToast('当前值：' + params.chaos)"/>
+            <van-slider v-model.number="params.chaos" :max="100" :step="1" @update:model-value="showToast('当前值：' + params.chaos)" />
           </template>
         </van-field>
       </div>
@@ -44,8 +40,7 @@
       <div class="text-line">
         <van-field label="风格化">
           <template #input>
-            <van-slider v-model.number="params.stylize" :max="1000" :step="1"
-                        @update:model-value="showToast('当前值：' + params.stylize)"/>
+            <van-slider v-model.number="params.stylize" :max="1000" :step="1" @update:model-value="showToast('当前值：' + params.stylize)" />
           </template>
         </van-field>
       </div>
@@ -53,7 +48,7 @@
       <div class="text-line">
         <van-field label="原始模式">
           <template #input>
-            <van-switch v-model="params.raw"/>
+            <van-switch v-model="params.raw" />
           </template>
         </van-field>
       </div>
@@ -62,62 +57,53 @@
         <van-tabs v-model:active="activeName" @change="tabChange" animated>
           <van-tab title="文生图" name="txt2img">
             <div class="text-line">
-              <van-field v-model="params.prompt"
-                         rows="3"
-                         autosize
-                         type="textarea"
-                         placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"/>
+              <van-field
+                v-model="params.prompt"
+                rows="3"
+                autosize
+                type="textarea"
+                placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"
+              />
             </div>
           </van-tab>
           <van-tab title="图生图" name="img2img">
             <div class="text-line">
-              <van-field v-model="params.prompt"
-                         rows="3"
-                         autosize
-                         type="textarea"
-                         placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"/>
+              <van-field
+                v-model="params.prompt"
+                rows="3"
+                autosize
+                type="textarea"
+                placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"
+              />
             </div>
 
             <div class="text-line">
-              <van-uploader v-model="imgList" :after-read="uploadImg"/>
+              <van-uploader v-model="imgList" :after-read="uploadImg" />
             </div>
             <div class="text-line">
               <van-field label="垫图权重">
                 <template #input>
-                  <van-slider v-model.number="params.iw" :max="1" :step="0.01"
-                              @update:model-value="showToast('当前值：' + params.iw)"/>
+                  <van-slider v-model.number="params.iw" :max="1" :step="0.01" @update:model-value="showToast('当前值：' + params.iw)" />
                 </template>
               </van-field>
             </div>
 
             <div class="tip-text">提示：只有于 niji6 和 v6 模型支持一致性功能，如果选择其他模型此功能将会生成失败。</div>
             <van-cell-group>
-              <van-field
-                  v-model="params.cref"
-                  center
-                  clearable
-                  label="角色一致性"
-                  placeholder="请输入图片URL或者上传图片"
-              >
+              <van-field v-model="params.cref" center clearable label="角色一致性" placeholder="请输入图片URL或者上传图片">
                 <template #button>
                   <van-uploader @click="beforeUpload('cref')" :after-read="uploadImg">
-                    <van-button size="mini" type="primary" icon="plus"/>
+                    <van-button size="mini" type="primary" icon="plus" />
                   </van-uploader>
                 </template>
               </van-field>
             </van-cell-group>
 
             <van-cell-group>
-              <van-field
-                  v-model="params.sref"
-                  center
-                  clearable
-                  label="风格一致性"
-                  placeholder="请输入图片URL或者上传图片"
-              >
+              <van-field v-model="params.sref" center clearable label="风格一致性" placeholder="请输入图片URL或者上传图片">
                 <template #button>
                   <van-uploader @click="beforeUpload('sref')" :after-read="uploadImg">
-                    <van-button size="mini" type="primary" icon="plus"/>
+                    <van-button size="mini" type="primary" icon="plus" />
                   </van-uploader>
                 </template>
               </van-field>
@@ -126,8 +112,7 @@
             <div class="text-line">
               <van-field label="一致性权重">
                 <template #input>
-                  <van-slider v-model.number="params.cw" :max="100" :step="1"
-                              @update:model-value="showToast('当前值：' + params.cw)"/>
+                  <van-slider v-model.number="params.cw" :max="100" :step="1" @update:model-value="showToast('当前值：' + params.cw)" />
                 </template>
               </van-field>
             </div>
@@ -135,13 +120,13 @@
           <van-tab title="融图" name="blend">
             <div class="tip-text">请上传两张以上的图片，最多不超过五张，超过五张图片请使用图生图功能。</div>
             <div class="text-line">
-              <van-uploader v-model="imgList" :after-read="uploadImg"/>
+              <van-uploader v-model="imgList" :after-read="uploadImg" />
             </div>
           </van-tab>
           <van-tab title="换脸" name="swapFace">
             <div class="tip-text">请上传两张有脸部的图片，用左边图片的脸替换右边图片的脸。</div>
             <div class="text-line">
-              <van-uploader v-model="imgList" :after-read="uploadImg"/>
+              <van-uploader v-model="imgList" :after-read="uploadImg" />
             </div>
           </van-tab>
         </van-tabs>
@@ -150,13 +135,7 @@
       <div class="text-line">
         <van-collapse v-model="activeColspan">
           <van-collapse-item title="反向提示词" name="neg_prompt">
-            <van-field
-                v-model="params.neg_prompt"
-                rows="3"
-                autosize
-                type="textarea"
-                placeholder="不想出现在图片上的元素(例如：树，建筑)"
-            />
+            <van-field v-model="params.neg_prompt" rows="3" autosize type="textarea" placeholder="不想出现在图片上的元素(例如：树，建筑)" />
           </van-collapse-item>
         </van-collapse>
       </div>
@@ -166,32 +145,24 @@
       </div>
 
       <div class="text-line">
-        <van-button round block type="primary" native-type="submit">
-          立即生成
-        </van-button>
+        <van-button round block type="primary" native-type="submit"> 立即生成 </van-button>
       </div>
     </van-form>
 
     <h3>任务列表</h3>
-    <div class="running-job-list">
-      <van-empty v-if="runningJobs.length ===0"
-                 image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
-                 image-size="80"
-                 description="暂无记录"
+    <div class="running-job-list pt-3 pb-3">
+      <van-empty
+        v-if="runningJobs.length === 0"
+        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
+        image-size="80"
+        description="暂无记录"
       />
       <van-grid :gutter="10" :column-num="3" v-else>
         <van-grid-item v-for="item in runningJobs" :key="item.id">
           <div v-if="item.progress > 0">
             <van-image src="/images/img-holder.png"></van-image>
             <div class="progress">
-              <van-circle
-                  v-model:current-rate="item.progress"
-                  :rate="item.progress"
-                  :speed="100"
-                  :text="item.progress+'%'"
-                  :stroke-width="60"
-                  size="90px"
-              />
+              <van-circle v-model:current-rate="item.progress" :rate="item.progress" :speed="100" :text="item.progress + '%'" :stroke-width="60" size="90px" />
             </div>
           </div>
 
@@ -199,26 +170,27 @@
             <span class="icon"><i class="iconfont icon-quick-start"></i></span>
             <span class="text">排队中</span>
           </div>
-
         </van-grid-item>
       </van-grid>
     </div>
 
     <h3>创作记录</h3>
     <div class="finish-job-list">
-      <van-empty v-if="finishedJobs.length ===0"
-                 image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
-                 image-size="80"
-                 description="暂无记录"
+      <van-empty
+        v-if="finishedJobs.length === 0"
+        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
+        image-size="80"
+        description="暂无记录"
       />
 
-      <van-list v-else
-                v-model:error="error"
-                v-model:loading="loading"
-                :finished="finished"
-                error-text="请求失败，点击重新加载"
-                finished-text="没有更多了"
-                @load="onLoad"
+      <van-list
+        v-else
+        v-model:error="error"
+        v-model:loading="loading"
+        :finished="finished"
+        error-text="请求失败，点击重新加载"
+        finished-text="没有更多了"
+        @load="onLoad"
       >
         <van-grid :gutter="10" :column-num="2">
           <van-grid-item v-for="item in finishedJobs" :key="item.id">
@@ -230,23 +202,17 @@
               </div>
             </div>
             <div class="job-item" v-else>
-              <van-image
-                  :src="item['thumb_url']"
-                  :class="item['can_opt'] ? '' : 'upscale'"
-                  lazy-load
-                  @click="imageView(item)"
-                  fit="cover">
+              <van-image :src="item['thumb_url']" :class="item['can_opt'] ? '' : 'upscale'" lazy-load @click="imageView(item)" fit="cover">
                 <template v-slot:loading>
-                  <van-loading type="spinner" size="20"/>
+                  <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"/>
+                  <van-loading type="circular" color="#1989fa" size="40" />
                 </template>
               </van-image>
 
               <div class="opt" v-if="item['can_opt']">
-
                 <van-grid :gutter="3" :column-num="4">
                   <van-grid-item><a @click="upscale(1, item)" class="opt-btn">U1</a></van-grid-item>
                   <van-grid-item><a @click="upscale(2, item)" class="opt-btn">U2</a></van-grid-item>
@@ -260,9 +226,8 @@
               </div>
 
               <div class="remove">
-                <el-button type="danger" :icon="Delete" @click="removeImage(item)" circle/>
-                <el-button type="warning" v-if="item.publish" @click="publishImage(item, false)"
-                           circle>
+                <el-button type="danger" :icon="Delete" @click="removeImage(item)" circle />
+                <el-button type="warning" v-if="item.publish" @click="publishImage(item, false)" circle>
                   <i class="iconfont icon-cancel-share"></i>
                 </el-button>
                 <el-button type="success" v-else @click="publishImage(item, true)" circle>
@@ -276,7 +241,6 @@
           </van-grid-item>
         </van-grid>
       </van-list>
-
     </div>
 
     <button style="display: none" class="copy-prompt" :data-clipboard-text="prompt" id="copy-btn">复制</button>
@@ -284,37 +248,37 @@
 </template>
 
 <script setup>
-import {nextTick, onMounted, onUnmounted, ref} from "vue";
-import {showConfirmDialog, showFailToast, showImagePreview, showNotify, showSuccessToast, showToast,showDialog } from "vant";
-import {httpGet, httpPost} from "@/utils/http";
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
+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, getClientId, getSystemInfo} from "@/store/cache";
-import {useRouter} from "vue-router";
-import {Delete} from "@element-plus/icons-vue";
-import {showLoginDialog} from "@/utils/libs";
+import { getSessionId } from "@/store/session";
+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";
+import { useSharedStore } from "@/store/sharedata";
 
-const activeColspan = ref([""])
+const activeColspan = ref([""]);
 
 const rates = [
-  {css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png"},
-  {css: "size2-3", value: "2:3", text: "2:3", img: "/images/mj/rate_3_4.png"},
-  {css: "size3-4", value: "3:4", text: "3:4", img: "/images/mj/rate_3_4.png"},
-  {css: "size4-3", value: "4:3", text: "4:3", img: "/images/mj/rate_4_3.png"},
-  {css: "size16-9", value: "16:9", text: "16:9", img: "/images/mj/rate_16_9.png"},
-  {css: "size9-16", value: "9:16", text: "9:16", img: "/images/mj/rate_9_16.png"},
-]
+  { css: "square", value: "1:1", text: "1:1", img: "/images/mj/rate_1_1.png" },
+  { css: "size2-3", value: "2:3", text: "2:3", img: "/images/mj/rate_3_4.png" },
+  { css: "size3-4", value: "3:4", text: "3:4", img: "/images/mj/rate_3_4.png" },
+  { css: "size4-3", value: "4:3", text: "4:3", img: "/images/mj/rate_4_3.png" },
+  { css: "size16-9", value: "16:9", text: "16:9", img: "/images/mj/rate_16_9.png" },
+  { css: "size9-16", value: "9:16", text: "9:16", img: "/images/mj/rate_9_16.png" },
+];
 const models = [
-  {text: "MJ-6.0", value: " --v 6", img: "/images/mj/mj-v6.png"},
-  {text: "MJ-5.2", value: " --v 5.2", img: "/images/mj/mj-v5.2.png"},
-  {text: "Niji5", value: " --niji 5", img: "/images/mj/mj-niji.png"},
-  {text: "Niji5 可爱", value: " --niji 5 --style cute", img: "/images/mj/nj1.jpg"},
-  {text: "Niji5 风景", value: " --niji 5 --style scenic", img: "/images/mj/nj2.jpg"},
-  {text: "Niji6", value: " --niji 6", img: "/images/mj/nj3.jpg"},
-]
-const imgList = ref([])
+  { text: "MJ-6.0", value: " --v 6", img: "/images/mj/mj-v6.png" },
+  { text: "MJ-5.2", value: " --v 5.2", img: "/images/mj/mj-v5.2.png" },
+  { text: "Niji5", value: " --niji 5", img: "/images/mj/mj-niji.png" },
+  { text: "Niji5 可爱", value: " --niji 5 --style cute", img: "/images/mj/nj1.jpg" },
+  { text: "Niji5 风景", value: " --niji 5 --style scenic", img: "/images/mj/nj2.jpg" },
+  { text: "Niji6", value: " --niji 6", img: "/images/mj/nj3.jpg" },
+];
+const imgList = ref([]);
 const params = ref({
   client_id: getClientId(),
   task_type: "image",
@@ -333,168 +297,178 @@ const params = ref({
   cref: "",
   sref: "",
   cw: 0,
-})
-const userId = ref(0)
-const router = useRouter()
-const runningJobs = ref([])
-const finishedJobs = ref([])
-const power = ref(0)
-const activeName = ref("txt2img")
-const isLogin = ref(false)
-const prompt = ref('')
-const store = useSharedStore()
-const clipboard = ref(null)
+});
+const userId = ref(0);
+const router = useRouter();
+const runningJobs = ref([]);
+const finishedJobs = ref([]);
+const power = ref(0);
+const activeName = ref("txt2img");
+const isLogin = ref(false);
+const prompt = ref("");
+const store = useSharedStore();
+const clipboard = ref(null);
 
 onMounted(() => {
   clipboard.value = new Clipboard(".copy-prompt");
-  clipboard.value.on('success', () => {
-    showNotify({type: 'success', message: '复制成功', duration: 1000})
-  })
-  clipboard.value.on('error', () => {
-    showNotify({type: 'danger', message: '复制失败', duration: 2000})
-  })
-
-  checkSession().then(user => {
-    power.value = user['power']
-    userId.value = user.id
-    isLogin.value = true
-    fetchRunningJobs()
-    fetchFinishJobs(1)
-  }).catch(() => {
-    // router.push('/login')
+  clipboard.value.on("success", () => {
+    showNotify({ type: "success", message: "复制成功", duration: 1000 });
   });
+  clipboard.value.on("error", () => {
+    showNotify({ type: "danger", message: "复制失败", duration: 2000 });
+  });
+
+  checkSession()
+    .then((user) => {
+      power.value = user["power"];
+      userId.value = user.id;
+      isLogin.value = true;
+      fetchRunningJobs();
+      fetchFinishJobs(1);
+    })
+    .catch(() => {
+      // router.push('/login')
+    });
 
   store.addMessageHandler("mj", (data) => {
     if (data.channel !== "mj" || data.clientId !== getClientId()) {
-      return
+      return;
     }
     if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 1
-      fetchFinishJobs(1)
+      page.value = 1;
+      fetchFinishJobs(1);
     }
-    fetchRunningJobs()
-  })
-
-})
+    fetchRunningJobs();
+  });
+});
 
 onUnmounted(() => {
-  clipboard.value.destroy()
-  store.removeMessageHandler("mj")
-})
+  clipboard.value.destroy();
+  store.removeMessageHandler("mj");
+});
 
-const mjPower = ref(1)
-const mjActionPower = ref(1)
-getSystemInfo().then(res => {
-  mjPower.value = res.data["mj_power"]
-  mjActionPower.value = res.data["mj_action_power"]
-}).catch(e => {
-  showNotify({type: "danger", message: "获取系统配置失败：" + e.message})
-})
+const mjPower = ref(1);
+const mjActionPower = ref(1);
+getSystemInfo()
+  .then((res) => {
+    mjPower.value = res.data["mj_power"];
+    mjActionPower.value = res.data["mj_action_power"];
+  })
+  .catch((e) => {
+    showNotify({ type: "danger", message: "获取系统配置失败：" + e.message });
+  });
 
 // 获取运行中的任务
 const fetchRunningJobs = (userId) => {
-  httpGet(`/api/mj/jobs?finish=0&user_id=${userId}`).then(res => {
-    const jobs = res.data.items
-    const _jobs = []
-    for (let i = 0; i < jobs.length; i++) {
-      if (jobs[i].progress === -1) {
-        showNotify({
-          message: `任务执行失败：${jobs[i]['err_msg']}`,
-          type: 'danger',
-        })
-        if (jobs[i].type === 'image') {
-          power.value += mjPower.value
-        } else {
-          power.value += mjActionPower.value
+  httpGet(`/api/mj/jobs?finish=0&user_id=${userId}`)
+    .then((res) => {
+      const jobs = res.data.items;
+      const _jobs = [];
+      for (let i = 0; i < jobs.length; i++) {
+        if (jobs[i].progress === -1) {
+          showNotify({
+            message: `任务执行失败：${jobs[i]["err_msg"]}`,
+            type: "danger",
+          });
+          if (jobs[i].type === "image") {
+            power.value += mjPower.value;
+          } else {
+            power.value += mjActionPower.value;
+          }
+          continue;
         }
-        continue
+        _jobs.push(jobs[i]);
       }
-      _jobs.push(jobs[i])
-    }
-    runningJobs.value = _jobs
-  }).catch(e => {
-    showNotify({type: "danger", message: "获取任务失败：" + e.message})
-  })
-}
+      runningJobs.value = _jobs;
+    })
+    .catch((e) => {
+      showNotify({ type: "danger", message: "获取任务失败：" + e.message });
+    });
+};
 
-const loading = ref(false)
-const finished = ref(false)
-const error = ref(false)
-const page = ref(0)
-const pageSize = ref(10)
+const loading = ref(false);
+const finished = ref(false);
+const error = ref(false);
+const page = ref(0);
+const pageSize = ref(10);
 const fetchFinishJobs = (page) => {
-  loading.value = true
+  loading.value = true;
   // 获取已完成的任务
-  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].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'
-      }
+  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].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";
+        }
 
-      if (jobs[i].type !== 'upscale' && jobs[i].progress === 100){
-        jobs[i]['can_opt'] = true
+        if (jobs[i].type !== "upscale" && jobs[i].progress === 100) {
+          jobs[i]["can_opt"] = true;
+        }
       }
-    }
-    if (jobs.length < pageSize.value) {
-      finished.value = true
-    }
-    if (page === 1) {
-      finishedJobs.value = jobs
-    } else {
-      finishedJobs.value = finishedJobs.value.concat(jobs)
-    }
-    nextTick(() => loading.value = false)
-  }).catch(e => {
-    loading.value = false
-    error.value = true
-    showFailToast("获取任务失败：" + e.message)
-  })
-}
+      if (jobs.length < pageSize.value) {
+        finished.value = true;
+      }
+      if (page === 1) {
+        finishedJobs.value = jobs;
+      } else {
+        finishedJobs.value = finishedJobs.value.concat(jobs);
+      }
+      nextTick(() => (loading.value = false));
+    })
+    .catch((e) => {
+      loading.value = false;
+      error.value = true;
+      showFailToast("获取任务失败：" + e.message);
+    });
+};
 
 const onLoad = () => {
-  page.value += 1
-  fetchFinishJobs(page.value)
+  page.value += 1;
+  fetchFinishJobs(page.value);
 };
 
 // 切换图片比例
 const changeRate = (item) => {
-  params.value.rate = item.value
-}
+  params.value.rate = item.value;
+};
 // 切换模型
 const changeModel = (item) => {
-  params.value.model = item.value
-}
+  params.value.model = item.value;
+};
 
-const imgKey = ref("")
+const imgKey = ref("");
 const beforeUpload = (key) => {
-  imgKey.value = key
-}
+  imgKey.value = key;
+};
 
 // 图片上传
 const uploadImg = (file) => {
-  file.status = "uploading"
+  file.status = "uploading";
   // 压缩图片并上传
   new Compressor(file.file, {
     quality: 0.6,
     success(result) {
       const formData = new FormData();
-      formData.append('file', result, result.name);
+      formData.append("file", result, result.name);
       // 执行上传操作
-      httpPost('/api/upload', formData).then(res => {
-        file.url = res.data.url
-        if (imgKey.value !== "") { // 单张图片上传
-          params.value[imgKey.value] = res.data.url
-          imgKey.value = ''
-        }
-        file.status = "done"
-      }).catch(e => {
-        file.status = 'failed'
-        file.message = '上传失败'
-        showFailToast("图片上传失败：" + e.message)
-      })
+      httpPost("/api/upload", formData)
+        .then((res) => {
+          file.url = res.data.url;
+          if (imgKey.value !== "") {
+            // 单张图片上传
+            params.value[imgKey.value] = res.data.url;
+            imgKey.value = "";
+          }
+          file.status = "done";
+        })
+        .catch((e) => {
+          file.status = "failed";
+          file.message = "上传失败";
+          showFailToast("图片上传失败：" + e.message);
+        });
     },
     error(err) {
       console.log(err.message);
@@ -511,113 +485,123 @@ const send = (url, index, item) => {
     message_hash: item.hash,
     session_id: getSessionId(),
     prompt: item.prompt,
-  }).then(() => {
-    showSuccessToast("任务推送成功，请耐心等待任务执行...")
-    power.value -= mjActionPower.value
-    fetchRunningJobs()
-  }).catch(e => {
-    showFailToast("任务推送失败：" + e.message)
   })
-}
+    .then(() => {
+      showSuccessToast("任务推送成功，请耐心等待任务执行...");
+      power.value -= mjActionPower.value;
+      fetchRunningJobs();
+    })
+    .catch((e) => {
+      showFailToast("任务推送失败：" + e.message);
+    });
+};
 
 // 图片放大任务
 const upscale = (index, item) => {
-  send('/api/mj/upscale', index, item)
-}
+  send("/api/mj/upscale", index, item);
+};
 
 // 图片变换任务
 const variation = (index, item) => {
-  send('/api/mj/variation', index, item)
-}
+  send("/api/mj/variation", index, item);
+};
 
 const generate = () => {
   if (!isLogin.value) {
-    return showLoginDialog(router)
+    return showLoginDialog(router);
   }
 
-  if (params.value.prompt === '' && params.value.task_type === "image") {
-    return showFailToast("请输入绘画提示词！")
+  if (params.value.prompt === "" && params.value.task_type === "image") {
+    return showFailToast("请输入绘画提示词！");
   }
   if (params.value.model.indexOf("niji") !== -1 && params.value.raw) {
-    return showFailToast("动漫模型不允许启用原始模式")
+    return showFailToast("动漫模型不允许启用原始模式");
   }
-  params.value.session_id = getSessionId()
-  params.value.img_arr = imgList.value.map(img => img.url)
-  httpPost("/api/mj/image", params.value).then(() => {
-    showToast("绘画任务推送成功，请耐心等待任务执行")
-    power.value -= mjPower.value
-    fetchRunningJobs()
-  }).catch(e => {
-    showFailToast("任务推送失败：" + e.message)
-  })
-}
+  params.value.session_id = getSessionId();
+  params.value.img_arr = imgList.value.map((img) => img.url);
+  httpPost("/api/mj/image", params.value)
+    .then(() => {
+      showToast("绘画任务推送成功，请耐心等待任务执行");
+      power.value -= mjPower.value;
+      fetchRunningJobs();
+    })
+    .catch((e) => {
+      showFailToast("任务推送失败：" + e.message);
+    });
+};
 
 const removeImage = (item) => {
   showConfirmDialog({
-    title: '删除提示',
-    message:
-        '此操作将会删除任务和图片，继续操作码?',
-  }).then(() => {
-    httpGet("/api/mj/remove", {id: item.id, user_id: item.user_id}).then(() => {
-      showSuccessToast("任务删除成功")
-      fetchFinishJobs(1)
-    }).catch(e => {
-      showFailToast("任务删除失败：" + e.message)
+    title: "删除提示",
+    message: "此操作将会删除任务和图片，继续操作码?",
+  })
+    .then(() => {
+      httpGet("/api/mj/remove", { id: item.id, user_id: item.user_id })
+        .then(() => {
+          showSuccessToast("任务删除成功");
+          fetchFinishJobs(1);
+        })
+        .catch((e) => {
+          showFailToast("任务删除失败：" + e.message);
+        });
     })
-  }).catch(() => {
-    showToast("您取消了操作")
-  });
-}
+    .catch(() => {
+      showToast("您取消了操作");
+    });
+};
 // 发布图片到作品墙
 const publishImage = (item, action) => {
-  let text = "图片发布"
+  let text = "图片发布";
   if (action === false) {
-    text = "取消发布"
+    text = "取消发布";
   }
-  httpGet("/api/mj/publish", {id: item.id, action: action,user_id: item.user_id}).then(() => {
-    showSuccessToast(text + "成功")
-    item.publish = action
-  }).catch(e => {
-    showFailToast(text + "失败：" + e.message)
-  })
-}
+  httpGet("/api/mj/publish", { id: item.id, action: action, user_id: item.user_id })
+    .then(() => {
+      showSuccessToast(text + "成功");
+      item.publish = action;
+    })
+    .catch((e) => {
+      showFailToast(text + "失败：" + e.message);
+    });
+};
 
 const showPrompt = (item) => {
-  prompt.value = item.prompt
+  prompt.value = item.prompt;
   showConfirmDialog({
     title: "绘画提示词",
     message: item.prompt,
     confirmButtonText: "复制",
     cancelButtonText: "关闭",
-  }).then(() => {
-    document.querySelector('#copy-btn').click()
-  }).catch(() => {
-  });
-}
+  })
+    .then(() => {
+      document.querySelector("#copy-btn").click();
+    })
+    .catch(() => {});
+};
 
 const showErrMsg = (item) => {
   showDialog({
-    title: '错误详情',
-    message: item['err_msg'],
+    title: "错误详情",
+    message: item["err_msg"],
   }).then(() => {
     // on close
   });
-}
+};
 
 const imageView = (item) => {
-  showImagePreview([item['img_url']]);
-}
+  showImagePreview([item["img_url"]]);
+};
 
 // 切换菜单
 const tabChange = (tab) => {
   if (tab === "txt2img" || tab === "img2img") {
-    params.value.task_type = "image"
+    params.value.task_type = "image";
   } else {
-    params.value.task_type = tab
+    params.value.task_type = tab;
   }
-}
+};
 </script>
 
 <style lang="stylus">
 @import "@/assets/css/mobile/image-mj.styl"
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/views/mobile/pages/ImageSd.vue b/web/src/views/mobile/pages/ImageSd.vue
index 3d17bbc5..23521362 100644
--- a/web/src/views/mobile/pages/ImageSd.vue
+++ b/web/src/views/mobile/pages/ImageSd.vue
@@ -3,20 +3,9 @@
     <van-form @submit="generate">
       <van-cell-group inset>
         <div>
-          <van-field
-              v-model="params.sampler"
-              is-link
-              readonly
-              label="采样方法"
-              placeholder="选择采样方法"
-              @click="showSamplerPicker = true"
-          />
+          <van-field v-model="params.sampler" is-link readonly label="采样方法" placeholder="选择采样方法" @click="showSamplerPicker = true" />
           <van-popup v-model:show="showSamplerPicker" position="bottom" teleport="#app">
-            <van-picker
-                :columns="samplers"
-                @cancel="showSamplerPicker = false"
-                @confirm="samplerConfirm"
-            />
+            <van-picker :columns="samplers" @cancel="showSamplerPicker = false" @confirm="samplerConfirm" />
           </van-popup>
         </div>
 
@@ -24,92 +13,69 @@
           <template #input>
             <van-row gutter="20">
               <van-col span="12">
-                <el-input v-model="params.width" size="small" placeholder="宽"/>
+                <el-input v-model="params.width" size="small" placeholder="宽" />
               </van-col>
               <van-col span="12">
-                <el-input v-model="params.height" size="small" placeholder="高"/>
+                <el-input v-model="params.height" size="small" placeholder="高" />
               </van-col>
             </van-row>
           </template>
         </van-field>
 
-        <van-field v-model.number="params.steps" label="迭代步数"
-                   placeholder="">
+        <van-field v-model.number="params.steps" label="迭代步数" placeholder="">
           <template #right-icon>
-            <van-icon name="info-o"
-                      @click="showInfo('值越大则代表细节越多，同时也意味着出图速度越慢，一般推荐20-30')"/>
+            <van-icon name="info-o" @click="showInfo('值越大则代表细节越多，同时也意味着出图速度越慢，一般推荐20-30')" />
           </template>
         </van-field>
         <van-field v-model.number="params.cfg_scale" label="引导系数" placeholder="">
           <template #right-icon>
-            <van-icon name="info-o"
-                      @click="showInfo('提示词引导系数，图像在多大程度上服从提示词，较低值会产生更有创意的结果')"/>
+            <van-icon name="info-o" @click="showInfo('提示词引导系数，图像在多大程度上服从提示词，较低值会产生更有创意的结果')" />
           </template>
         </van-field>
         <van-field v-model.number="params.seed" label="随机因子" placeholder="">
           <template #right-icon>
-            <van-icon name="info-o"
-                      @click="showInfo('随机数种子，相同的种子会得到相同的结果，设置为 -1 则每次随机生成种子')"/>
+            <van-icon name="info-o" @click="showInfo('随机数种子，相同的种子会得到相同的结果，设置为 -1 则每次随机生成种子')" />
           </template>
         </van-field>
 
         <van-field label="高清修复">
           <template #input>
-            <van-switch v-model="params.hd_fix"/>
+            <van-switch v-model="params.hd_fix" />
           </template>
         </van-field>
 
         <div v-if="params.hd_fix">
           <div>
-            <van-field
-                v-model="params.hd_scale_alg"
-                is-link
-                readonly
-                label="放大算法"
-                placeholder="选择放大算法"
-                @click="showUpscalePicker = true"
-            />
+            <van-field v-model="params.hd_scale_alg" is-link readonly label="放大算法" placeholder="选择放大算法" @click="showUpscalePicker = true" />
             <van-popup v-model:show="showUpscalePicker" position="bottom" teleport="#app">
-              <van-picker
-                  :columns="upscaleAlgArr"
-                  @cancel="showUpscalePicker = false"
-                  @confirm="upscaleConfirm"
-              />
+              <van-picker :columns="upscaleAlgArr" @cancel="showUpscalePicker = false" @confirm="upscaleConfirm" />
             </van-popup>
           </div>
 
-          <van-field v-model.number="params.hd_scale" label="放大倍数"/>
-          <van-field v-model.number="params.hd_steps" label="迭代步数"/>
+          <van-field v-model.number="params.hd_scale" label="放大倍数" />
+          <van-field v-model.number="params.hd_steps" label="迭代步数" />
 
           <van-field label="重绘幅度">
             <template #input>
-              <van-slider v-model.number="params.hd_redraw_rate" :max="1" :step="0.1"
-                          @update:model-value="showToast('当前值：' + params.hd_redraw_rate)"/>
+              <van-slider v-model.number="params.hd_redraw_rate" :max="1" :step="0.1" @update:model-value="showToast('当前值：' + params.hd_redraw_rate)" />
             </template>
             <template #right-icon>
-              <van-icon name="info-o"
-                        @click="showInfo('决定算法对图像内容的影响程度，较大的值将得到越有创意的图像')"/>
+              <van-icon name="info-o" @click="showInfo('决定算法对图像内容的影响程度，较大的值将得到越有创意的图像')" />
             </template>
           </van-field>
         </div>
 
         <van-field
-            v-model="params.prompt"
-            rows="3"
-            autosize
-            type="textarea"
-            placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"
+          v-model="params.prompt"
+          rows="3"
+          autosize
+          type="textarea"
+          placeholder="请在此输入绘画提示词，系统会自动翻译中文提示词，高手请直接输入英文提示词"
         />
 
         <van-collapse v-model="activeColspan">
           <van-collapse-item title="反向提示词" name="neg_prompt">
-            <van-field
-                v-model="params.neg_prompt"
-                rows="3"
-                autosize
-                type="textarea"
-                placeholder="不想出现在图片上的元素(例如：树，建筑)"
-            />
+            <van-field v-model="params.neg_prompt" rows="3" autosize type="textarea" placeholder="不想出现在图片上的元素(例如：树，建筑)" />
           </van-collapse-item>
         </van-collapse>
 
@@ -118,33 +84,25 @@
         </div>
 
         <div class="text-line">
-          <van-button round block type="primary" native-type="submit">
-            立即生成
-          </van-button>
+          <van-button round block type="primary" native-type="submit"> 立即生成 </van-button>
         </div>
       </van-cell-group>
     </van-form>
 
     <h3>任务列表</h3>
-    <div class="running-job-list">
-      <van-empty v-if="runningJobs.length ===0"
-                 image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
-                 image-size="80"
-                 description="暂无记录"
+    <div class="running-job-list pt-3 pb-3">
+      <van-empty
+        v-if="runningJobs.length === 0"
+        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
+        image-size="80"
+        description="暂无记录"
       />
       <van-grid :gutter="10" :column-num="3" v-else>
         <van-grid-item v-for="item in runningJobs" :key="item.id">
           <div v-if="item.progress > 0">
             <van-image src="/images/img-holder.png"></van-image>
             <div class="progress">
-              <van-circle
-                  v-model:current-rate="item.progress"
-                  :rate="item.progress"
-                  :speed="100"
-                  :text="item.progress+'%'"
-                  :stroke-width="60"
-                  size="90px"
-              />
+              <van-circle v-model:current-rate="item.progress" :rate="item.progress" :speed="100" :text="item.progress + '%'" :stroke-width="60" size="90px" />
             </div>
           </div>
 
@@ -152,26 +110,27 @@
             <span class="icon"><i class="iconfont icon-quick-start"></i></span>
             <span class="text">排队中</span>
           </div>
-
         </van-grid-item>
       </van-grid>
     </div>
 
     <h3>创作记录</h3>
     <div class="finish-job-list">
-      <van-empty v-if="finishedJobs.length ===0"
-                 image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
-                 image-size="80"
-                 description="暂无记录"
+      <van-empty
+        v-if="finishedJobs.length === 0"
+        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
+        image-size="80"
+        description="暂无记录"
       />
 
-      <van-list v-else
-                v-model:error="error"
-                v-model:loading="loading"
-                :finished="finished"
-                error-text="请求失败，点击重新加载"
-                finished-text="没有更多了"
-                @load="onLoad"
+      <van-list
+        v-else
+        v-model:error="error"
+        v-model:loading="loading"
+        :finished="finished"
+        error-text="请求失败，点击重新加载"
+        finished-text="没有更多了"
+        @load="onLoad"
       >
         <van-grid :gutter="10" :column-num="2">
           <van-grid-item v-for="item in finishedJobs" :key="item.id">
@@ -179,25 +138,19 @@
               <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>
+                <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'"
-                  lazy-load
-                  @click="imageView(item)"
-                  fit="cover">
+              <van-image :src="item['img_url']" :class="item['can_opt'] ? '' : 'upscale'" lazy-load @click="imageView(item)" fit="cover">
                 <template v-slot:loading>
-                  <van-loading type="spinner" size="20"/>
+                  <van-loading type="spinner" size="20" />
                 </template>
               </van-image>
 
               <div class="remove">
-                <el-button type="danger" :icon="Delete" @click="removeImage($event, item)" circle/>
-                <el-button type="warning" v-if="item.publish" @click="publishImage($event,item, false)"
-                           circle>
+                <el-button type="danger" :icon="Delete" @click="removeImage($event, item)" circle />
+                <el-button type="warning" v-if="item.publish" @click="publishImage($event, item, false)" circle>
                   <i class="iconfont icon-cancel-share"></i>
                 </el-button>
                 <el-button type="success" v-else @click="publishImage($event, item, true)" circle>
@@ -211,59 +164,50 @@
           </van-grid-item>
         </van-grid>
       </van-list>
-
     </div>
     <button style="display: none" class="copy-prompt-sd" :data-clipboard-text="prompt" id="copy-btn-sd">复制</button>
   </div>
 </template>
 
 <script setup>
-import {onMounted, onUnmounted, ref} from "vue"
-import {Delete} from "@element-plus/icons-vue";
-import {httpGet, httpPost} from "@/utils/http";
+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, getClientId, getSystemInfo} from "@/store/cache";
-import {useRouter} from "vue-router";
-import {getSessionId} from "@/store/session";
-import {
-  showConfirmDialog,
-  showDialog,
-  showFailToast,
-  showImagePreview,
-  showNotify,
-  showSuccessToast,
-  showToast
-} from "vant";
-import {showLoginDialog} from "@/utils/libs";
-import {useSharedStore} from "@/store/sharedata";
+import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
+import { useRouter } from "vue-router";
+import { getSessionId } from "@/store/session";
+import { showConfirmDialog, showDialog, showFailToast, showImagePreview, showNotify, showSuccessToast, 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 isLogin = ref(false)
-const activeColspan = ref([""])
+const listBoxHeight = ref(window.innerHeight - 40);
+const mjBoxHeight = ref(window.innerHeight - 150);
+const isLogin = ref(false);
+const activeColspan = ref([""]);
 
 window.onresize = () => {
-  listBoxHeight.value = window.innerHeight - 40
-  mjBoxHeight.value = window.innerHeight - 150
-}
+  listBoxHeight.value = window.innerHeight - 40;
+  mjBoxHeight.value = window.innerHeight - 150;
+};
 const samplers = ref([
-  {text: "Euler a", value: "Euler a"},
-  {text: "DPM++ 2S a Karras", value: "DPM++ 2S a Karras"},
-  {text: "DPM++ 2M Karras", value: "DPM++ 2M Karras"},
-  {text: "DPM++ 2M SDE Karras", value: "DPM++ 2M SDE Karras"},
-  {text: "DPM++ 2M Karras", value: "DPM++ 2M Karras"},
-  {text: "DPM++ 3M SDE Karras", value: "DPM++ 3M SDE Karras"},
-])
-const showSamplerPicker = ref(false)
+  { text: "Euler a", value: "Euler a" },
+  { text: "DPM++ 2S a Karras", value: "DPM++ 2S a Karras" },
+  { text: "DPM++ 2M Karras", value: "DPM++ 2M Karras" },
+  { text: "DPM++ 2M SDE Karras", value: "DPM++ 2M SDE Karras" },
+  { text: "DPM++ 2M Karras", value: "DPM++ 2M Karras" },
+  { text: "DPM++ 3M SDE Karras", value: "DPM++ 3M SDE Karras" },
+]);
+const showSamplerPicker = ref(false);
 
 const upscaleAlgArr = ref([
-  {text: "Latent", value: "Latent"},
-  {text: "ESRGAN_4x", value: "ESRGAN_4x"},
-  {text: "ESRGAN 4x+", value: "ESRGAN 4x+"},
-  {text: "SwinIR_4x", value: "SwinIR_4x"},
-  {text: "LDSR", value: "LDSR"},
-])
-const showUpscalePicker = ref(false)
+  { text: "Latent", value: "Latent" },
+  { text: "ESRGAN_4x", value: "ESRGAN_4x" },
+  { text: "ESRGAN 4x+", value: "ESRGAN 4x+" },
+  { text: "SwinIR_4x", value: "SwinIR_4x" },
+  { text: "LDSR", value: "LDSR" },
+]);
+const showUpscalePicker = ref(false);
 
 const params = ref({
   client_id: getClientId(),
@@ -280,224 +224,237 @@ const params = ref({
   hd_steps: 0,
   prompt: "",
   neg_prompt: "nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet",
-})
+});
 
-const runningJobs = ref([])
-const finishedJobs = ref([])
-const router = useRouter()
+const runningJobs = ref([]);
+const finishedJobs = ref([]);
+const router = useRouter();
 // 检查是否有画同款的参数
-const _params = router.currentRoute.value.params["copyParams"]
+const _params = router.currentRoute.value.params["copyParams"];
 if (_params) {
-  params.value = JSON.parse(_params)
+  params.value = JSON.parse(_params);
 }
-const power = ref(0)
-const sdPower = ref(0) // 画一张 SD 图片消耗算力
+const power = ref(0);
+const sdPower = ref(0); // 画一张 SD 图片消耗算力
 
-const userId = ref(0)
-const store = useSharedStore()
-const clipboard = ref(null)
-const prompt = ref('')
+const userId = ref(0);
+const store = useSharedStore();
+const clipboard = ref(null);
+const prompt = ref("");
 onMounted(() => {
-  initData()
+  initData();
   clipboard.value = new Clipboard(".copy-prompt-sd");
-  clipboard.value.on('success', () => {
-    showNotify({type: 'success', message: '复制成功', duration: 1000})
-  })
-  clipboard.value.on('error', () => {
-    showNotify({type: 'danger', message: '复制失败', duration: 2000})
-  })
+  clipboard.value.on("success", () => {
+    showNotify({ type: "success", message: "复制成功", duration: 1000 });
+  });
+  clipboard.value.on("error", () => {
+    showNotify({ type: "danger", message: "复制失败", duration: 2000 });
+  });
 
-  getSystemInfo().then(res => {
-    sdPower.value = res.data.sd_power
-    params.value.neg_prompt = res.data.sd_neg_prompt
-  }).catch(e => {
-    showNotify({type: "danger", message: "获取系统配置失败：" + e.message})
-  })
+  getSystemInfo()
+    .then((res) => {
+      sdPower.value = res.data.sd_power;
+      params.value.neg_prompt = res.data.sd_neg_prompt;
+    })
+    .catch((e) => {
+      showNotify({ type: "danger", message: "获取系统配置失败：" + e.message });
+    });
 
   store.addMessageHandler("sd", (data) => {
     if (data.channel !== "sd" || data.clientId !== getClientId()) {
-      return
+      return;
     }
     if (data.body === "FINISH" || data.body === "FAIL") {
-      page.value = 1
-      fetchFinishJobs(1)
+      page.value = 1;
+      fetchFinishJobs(1);
     }
-    fetchRunningJobs()
-  })
-
-})
+    fetchRunningJobs();
+  });
+});
 
 onUnmounted(() => {
-  clipboard.value.destroy()
-  store.removeMessageHandler("sd")
-})
-
+  clipboard.value.destroy();
+  store.removeMessageHandler("sd");
+});
 
 const initData = () => {
-  checkSession().then(user => {
-    power.value = user['power']
-    userId.value = user.id
-    isLogin.value = true
-    fetchRunningJobs()
-    fetchFinishJobs(1)
-  }).catch(() => {
-    loading.value = false
-  });
-}
+  checkSession()
+    .then((user) => {
+      power.value = user["power"];
+      userId.value = user.id;
+      isLogin.value = true;
+      fetchRunningJobs();
+      fetchFinishJobs(1);
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+};
 
 const fetchRunningJobs = () => {
   // 获取运行中的任务
-  httpGet(`/api/sd/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 += sdPower.value
-        continue
+  httpGet(`/api/sd/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 += sdPower.value;
+          continue;
+        }
+        _jobs.push(jobs[i]);
       }
-      _jobs.push(jobs[i])
-    }
-    runningJobs.value = _jobs
-  }).catch(e => {
-    showNotify({type: "danger", message: "获取任务失败：" + e.message})
-  })
-}
+      runningJobs.value = _jobs;
+    })
+    .catch((e) => {
+      showNotify({ type: "danger", message: "获取任务失败：" + e.message });
+    });
+};
 
-const loading = ref(false)
-const finished = ref(false)
-const error = ref(false)
-const page = ref(0)
-const pageSize = ref(10)
+const loading = ref(false);
+const finished = ref(false);
+const error = ref(false);
+const page = ref(0);
+const pageSize = ref(10);
 // 获取已完成的任务
 const fetchFinishJobs = (page) => {
-  loading.value = true
-  httpGet(`/api/sd/jobs?finish=1&page=${page}&page_size=${pageSize.value}`).then(res => {
-    const jobs = res.data.items
-    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'
+  loading.value = true;
+  httpGet(`/api/sd/jobs?finish=1&page=${page}&page_size=${pageSize.value}`)
+    .then((res) => {
+      const jobs = res.data.items;
+      if (jobs.length < pageSize.value) {
+        finished.value = true;
       }
-      _jobs.push(jobs[i])
-    }
-    if (page === 1) {
-      finishedJobs.value = _jobs
-    } else {
-      finishedJobs.value = finishedJobs.value.concat(_jobs)
-    }
-    loading.value = false
-  }).catch(e => {
-    loading.value = false
-    showNotify({type: "danger", message: "获取任务失败：" + e.message})
-  })
-}
+      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;
+      } else {
+        finishedJobs.value = finishedJobs.value.concat(_jobs);
+      }
+      loading.value = false;
+    })
+    .catch((e) => {
+      loading.value = false;
+      showNotify({ type: "danger", message: "获取任务失败：" + e.message });
+    });
+};
 
 const onLoad = () => {
-  page.value += 1
-  fetchFinishJobs(page.value)
-}
+  page.value += 1;
+  fetchFinishJobs(page.value);
+};
 
 // 创建绘图任务
-const promptRef = ref(null)
+const promptRef = ref(null);
 const generate = () => {
   if (!isLogin.value) {
-    return showLoginDialog(router)
+    return showLoginDialog(router);
   }
 
-  if (params.value.prompt === '') {
-    promptRef.value.focus()
-    return showToast("请输入绘画提示词！")
+  if (params.value.prompt === "") {
+    promptRef.value.focus();
+    return showToast("请输入绘画提示词！");
   }
 
   if (!params.value.seed) {
-    params.value.seed = -1
+    params.value.seed = -1;
   }
-  params.value.session_id = getSessionId()
-  httpPost("/api/sd/image", params.value).then(() => {
-    showSuccessToast("绘画任务推送成功，请耐心等待任务执行...")
-    power.value -= sdPower.value
-    fetchRunningJobs()
-  }).catch(e => {
-    showFailToast("任务推送失败：" + e.message)
-  })
-}
+  params.value.session_id = getSessionId();
+  httpPost("/api/sd/image", params.value)
+    .then(() => {
+      showSuccessToast("绘画任务推送成功，请耐心等待任务执行...");
+      power.value -= sdPower.value;
+      fetchRunningJobs();
+    })
+    .catch((e) => {
+      showFailToast("任务推送失败：" + e.message);
+    });
+};
 
 const showPrompt = (item) => {
-  prompt.value = item.prompt
+  prompt.value = item.prompt;
   showConfirmDialog({
     title: "绘画提示词",
     message: item.prompt,
     confirmButtonText: "复制",
     cancelButtonText: "关闭",
-  }).then(() => {
-    document.querySelector('#copy-btn-sd').click()
-  }).catch(() => {
-  });
-}
+  })
+    .then(() => {
+      document.querySelector("#copy-btn-sd").click();
+    })
+    .catch(() => {});
+};
 
 const showErrMsg = (item) => {
   showDialog({
-    title: '错误详情',
-    message: item['err_msg'],
+    title: "错误详情",
+    message: item["err_msg"],
   }).then(() => {
     // on close
   });
-}
+};
 
 const removeImage = (event, item) => {
-  event.stopPropagation()
+  event.stopPropagation();
   showConfirmDialog({
-    title: '标题',
-    message:
-        '此操作将会删除任务和图片，继续操作码?',
-  }).then(() => {
-    httpGet("/api/sd/remove", {id: item.id, user_id: item.user}).then(() => {
-      showSuccessToast("任务删除成功")
-      fetchFinishJobs(1)
-    }).catch(e => {
-      showFailToast("任务删除失败：" + e.message)
+    title: "标题",
+    message: "此操作将会删除任务和图片，继续操作码?",
+  })
+    .then(() => {
+      httpGet("/api/sd/remove", { id: item.id, user_id: item.user })
+        .then(() => {
+          showSuccessToast("任务删除成功");
+          fetchFinishJobs(1);
+        })
+        .catch((e) => {
+          showFailToast("任务删除失败：" + e.message);
+        });
     })
-  }).catch(() => {
-    showToast("您取消了操作")
-  });
-}
+    .catch(() => {
+      showToast("您取消了操作");
+    });
+};
 
 // 发布图片到作品墙
 const publishImage = (event, item, action) => {
-  event.stopPropagation()
-  let text = "图片发布"
+  event.stopPropagation();
+  let text = "图片发布";
   if (action === false) {
-    text = "取消发布"
+    text = "取消发布";
   }
-  httpGet("/api/sd/publish", {id: item.id, action: action, user_id: item.user}).then(() => {
-    showSuccessToast(text + "成功")
-    item.publish = action
-  }).catch(e => {
-    showFailToast(text + "失败：" + e.message)
-  })
-}
+  httpGet("/api/sd/publish", { id: item.id, action: action, user_id: item.user })
+    .then(() => {
+      showSuccessToast(text + "成功");
+      item.publish = action;
+    })
+    .catch((e) => {
+      showFailToast(text + "失败：" + e.message);
+    });
+};
 
 const imageView = (item) => {
-  showImagePreview([item['img_url']]);
-}
-
+  showImagePreview([item["img_url"]]);
+};
 
 const samplerConfirm = (item) => {
   params.value.sampler = item.selectedOptions[0].text;
-  showSamplerPicker.value = false
-}
+  showSamplerPicker.value = false;
+};
 
 const upscaleConfirm = (item) => {
   params.value.hd_scale_alg = item.selectedOptions[0].text;
-  showUpscalePicker.value = false
-}
+  showUpscalePicker.value = false;
+};
 
 const showInfo = (message) => {
   showDialog({
@@ -506,9 +463,9 @@ const showInfo = (message) => {
   }).then(() => {
     // on close
   });
-}
+};
 </script>
 
 <style lang="stylus">
 @import "@/assets/css/mobile/image-sd.styl"
-</style>
\ No newline at end of file
+</style>