some page ui optimization, add release v3.1.3

2025-11-09 02:33:42 +08:00 · 2023-09-20 11:39:11 +08:00
parent 59f316b341
commit 79ded6018b
17 changed files with 680 additions and 162 deletions
--- a/web/src/assets/css/image-mj.css
+++ b/web/src/assets/css/image-mj.css
@@ -206,7 +206,7 @@
 }
 .page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a {
  padding: 3px 0;
-  width: 50px;
+  width: 44px;
  text-align: center;
  border-radius: 5px;
  display: block;
@@ -217,6 +217,10 @@
 .page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul li a:hover {
  background-color: #6d6f78;
 }
+.page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line ul .show-prompt {
+  font-size: 18px;
+  cursor: pointer;
+}
 .page-mj .inner .task-list-box .el-image {
  width: 100%;
  height: 100%;
@@ -248,6 +252,10 @@
 .page-mj .inner .task-list-box .el-image.upscale img {
  height: 304px;
 }
+.page-mj .inner .task-list-box .el-image.upscale .el-image-viewer__wrapper img {
+  width: auto;
+  height: auto;
+}
 .mj-list-item-prompt .el-icon {
  margin-left: 10px;
  cursor: pointer;
--- a/web/src/assets/css/image-mj.styl
+++ b/web/src/assets/css/image-mj.styl
@@ -263,7 +263,7 @@

                  a {
                    padding 3px 0
-                    width 50px
+                    width 44px
                    text-align center
                    border-radius 5px
                    display block
@@ -276,6 +276,11 @@
                    }
                  }
                }
+
+                .show-prompt {
+                  font-size 18px
+                  cursor pointer
+                }
              }
            }
          }
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -36,7 +36,7 @@ const routes = [
                name: 'chat-role',
                path: '/apps',
                meta: {title: '应用中心'},
-                component: () => import('@/views/ChatRoles.vue'),
+                component: () => import('@/views/ChatApps.vue'),
            },
            {
                name: 'images',
--- a/web/src/views/ChatRoles.vue
+++ b/web/src/views/ChatRoles.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+  <div class="page-apps" :style="{ height: winHeight + 'px' }">
    <div class="inner">
      <h1>MidJourney 绘画中心</h1>
      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
@@ -14,7 +14,7 @@ const winHeight = ref(window.innerHeight)
 </script>

 <style lang="stylus" scoped>
-.page-mj {
+.page-apps {
  display: flex;
  justify-content: center;
  align-items center
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -202,10 +202,17 @@
                  :autosize="{ minRows: 4, maxRows: 6 }"
                  type="textarea"
                  ref="promptRef"
-                  placeholder="这里输入你的咒语，例如：A chinese girl walking in the middle of a cobblestone street"
+                  placeholder="这里输入你的英文咒语，例如：A chinese girl walking in the middle of a cobblestone street"
              />
            </div>

+            <div class="param-line pt">
+              <el-form-item label="剩余次数">
+                <template #default>
+                  <el-tag type="info">{{ imgCalls }}</el-tag>
+                </template>
+              </el-form-item>
+            </div>
          </el-form>
        </div>
        <div class="submit-btn">
@@ -281,43 +288,27 @@
            <ItemList :items="finishedJobs" v-if="finishedJobs.length > 0">
              <template #default="scope">
                <div class="job-item">
-                  <el-popover
-                      placement="top-start"
-                      title="提示词"
-                      :width="240"
-                      trigger="hover"
-                  >
-                    <template #reference>
-                      <el-image :src="scope.item.img_url" :class="scope.item.type === 'upscale'?'upscale':''"
-                                :zoom-rate="1.2"
-                                :preview-src-list="previewImgList"
-                                fit="cover"
-                                :initial-index="scope.index" loading="lazy" v-if="scope.item.progress > 0">
-                        <template #placeholder>
-                          <div class="image-slot">
-                            正在加载图片
-                          </div>
-                        </template>
-
-                        <template #error>
-                          <div class="image-slot">
-                            <el-icon>
-                              <Picture/>
-                            </el-icon>
-                          </div>
-                        </template>
-                      </el-image>
+                  <el-image
+                      :src="scope.item.type === 'upscale'?scope.item.img_url+'?imageView2/1/w/240/h/300/q/75':scope.item.img_url+'?imageView2/1/w/240/h/240/q/75'"
+                      :class="scope.item.type === 'upscale'?'upscale':''"
+                      :zoom-rate="1.2"
+                      :preview-src-list="previewImgList"
+                      fit="cover"
+                      :initial-index="scope.index" loading="lazy" v-if="scope.item.progress > 0">
+                    <template #placeholder>
+                      <div class="image-slot">
+                        正在加载图片
+                      </div>
                    </template>

-                    <template #default>
-                      <div class="mj-list-item-prompt">
-                        <span>{{ scope.item.prompt }}</span>
-                        <el-icon class="copy-prompt" :data-clipboard-text="scope.item.prompt">
-                          <DocumentCopy/>
+                    <template #error>
+                      <div class="image-slot">
+                        <el-icon>
+                          <Picture/>
                        </el-icon>
                      </div>
                    </template>
-                  </el-popover>
+                  </el-image>

                  <div class="opt" v-if="scope.item.type !== 'upscale'">
                    <div class="opt-line">
@@ -326,6 +317,18 @@
                        <li><a @click="upscale(2,scope.item)">U2</a></li>
                        <li><a @click="upscale(3,scope.item)">U3</a></li>
                        <li><a @click="upscale(4,scope.item)">U4</a></li>
+                        <li class="show-prompt">
+                          <el-tooltip
+                              class="box-item"
+                              effect="light"
+                              content="复制提示词"
+                              placement="top"
+                          >
+                            <el-icon class="copy-prompt" :data-clipboard-text="scope.item.prompt">
+                              <DocumentCopy/>
+                            </el-icon>
+                          </el-tooltip>
+                        </li>
                      </ul>
                    </div>

@@ -353,7 +356,7 @@

 <script setup>
 import {onMounted, ref} from "vue"
-import {DeleteFilled, DocumentCopy, InfoFilled, Picture, Plus} from "@element-plus/icons-vue";
+import {Comment, DeleteFilled, DocumentCopy, InfoFilled, Picture, Plus} from "@element-plus/icons-vue";
 import Compressor from "compressorjs";
 import {httpGet, httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
@@ -383,7 +386,7 @@ const params = ref({
  rate: rates[1].value,
  model: models[0].value,
  chaos: 0,
-  stylize: 100,
+  stylize: 0,
  seed: 0,
  raw: false,
  img: "",
@@ -397,6 +400,7 @@ const previewImgList = ref([])
 const router = useRouter()

 const socket = ref(null)
+const imgCalls = ref(0)

 const connect = () => {
  let host = process.env.VUE_APP_WS_HOST
@@ -418,7 +422,6 @@ const connect = () => {
      reader.readAsText(event.data, "UTF-8");
      reader.onload = () => {
        const data = JSON.parse(String(reader.result));
-        console.log(data)
        let isNew = true
        if (data.progress === 100) {
          for (let i = 0; i < finishedJobs.value.length; i++) {
@@ -436,6 +439,7 @@ const connect = () => {
          if (isNew) {
            finishedJobs.value.unshift(data)
          }
+          previewImgList.value.unshift(data["img_url"])
        } else {
          for (let i = 0; i < runningJobs.value.length; i++) {
            if (runningJobs.value[i].id === data.id) {
@@ -458,12 +462,18 @@ const connect = () => {
 }

 onMounted(() => {
-  checkSession().then(() => {
+  checkSession().then(user => {
+    imgCalls.value = user['img_calls']
+    // 获取运行中的任务
+    httpGet("/api/mj/jobs?status=0").then(res => {
+      runningJobs.value = res.data
+    }).catch(e => {
+      ElMessage.error("获取任务失败：" + e.message)
+    })
+
    // 获取运行中的任务
    httpGet("/api/mj/jobs?status=1").then(res => {
-      if (finishedJobs.value.length !== res.data.length) {
-        finishedJobs.value = res.data
-      }
+      finishedJobs.value = res.data
      previewImgList.value = []
      for (let index in finishedJobs.value) {
        previewImgList.value.push(finishedJobs.value[index]["img_url"])
@@ -472,21 +482,12 @@ onMounted(() => {
      ElMessage.error("获取任务失败：" + e.message)
    })

-    // 获取运行中的任务
-    httpGet("/api/mj/jobs?status=0").then(res => {
-      if (runningJobs.value.length !== res.data.length) {
-        runningJobs.value = res.data
-      }
-    }).catch(e => {
-      ElMessage.error("获取任务失败：" + e.message)
-    })
+    // 连接 socket
+    connect();
  }).catch(() => {
    router.push('/login')
  });

-  // 连接 socket
-  connect();
-
  const clipboard = new Clipboard('.copy-prompt');
  clipboard.on('success', () => {
    ElMessage.success({message: "复制成功！", duration: 500});
@@ -553,6 +554,7 @@ const generate = () => {
  params.value.session_id = getSessionId()
  httpPost("/api/mj/image", params.value).then(() => {
    ElMessage.success("绘画任务推送成功，请耐心等待任务执行...")
+    imgCalls.value -= 1
  }).catch(e => {
    ElMessage.error("任务推送失败：" + e.message)
  })
@@ -578,6 +580,7 @@ const send = (url, index, item) => {
    prompt: item.prompt,
  }).then(() => {
    ElMessage.success("任务推送成功，请耐心等待任务执行...")
+    imgCalls.value -= 1
  }).catch(e => {
    ElMessage.error("任务推送失败：" + e.message)
  })
--- a/web/src/views/ImageSd.vue
+++ b/web/src/views/ImageSd.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+  <div class="page-sd" :style="{ height: winHeight + 'px' }">
    <div class="inner">
      <h1>Stable Diffusion 绘画中心</h1>
      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
@@ -14,7 +14,7 @@ const winHeight = ref(window.innerHeight)
 </script>

 <style lang="stylus" scoped>
-.page-mj {
+.page-sd {
  display: flex;
  justify-content: center;
  align-items center
--- a/web/src/views/Images.vue
+++ b/web/src/views/Images.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+  <div class="page-images" :style="{ height: winHeight + 'px' }">
    <div class="inner">
      <h1>绘画作品广场</h1>
      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
@@ -14,7 +14,7 @@ const winHeight = ref(window.innerHeight)
 </script>

 <style lang="stylus" scoped>
-.page-mj {
+.page-images {
  display: flex;
  justify-content: center;
  align-items center
--- a/web/src/views/Invitation.vue
+++ b/web/src/views/Invitation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+  <div class="page-invitation" :style="{ height: winHeight + 'px' }">
    <div class="inner">
      <h1>会员推广计划</h1>
      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
@@ -14,7 +14,7 @@ const winHeight = ref(window.innerHeight)
 </script>

 <style lang="stylus" scoped>
-.page-mj {
+.page-invitation {
  display: flex;
  justify-content: center;
  align-items center
--- a/web/src/views/Knowledge.vue
+++ b/web/src/views/Knowledge.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+  <div class="page-knowledge" :style="{ height: winHeight + 'px' }">
    <div class="inner">
      <h1>会员知识库搜索</h1>
      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
@@ -14,7 +14,7 @@ const winHeight = ref(window.innerHeight)
 </script>

 <style lang="stylus" scoped>
-.page-mj {
+.page-knowledge {
  display: flex;
  justify-content: center;
  align-items center
--- a/web/src/views/Member.vue
+++ b/web/src/views/Member.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+  <div class="page-member" :style="{ height: winHeight + 'px' }">
    <div class="inner">
      <h1>会员充值中心</h1>
      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
@@ -14,7 +14,7 @@ const winHeight = ref(window.innerHeight)
 </script>

 <style lang="stylus" scoped>
-.page-mj {
+.page-member {
  display: flex;
  justify-content: center;
  align-items center