From 382d7bfaa1a203de25fa25488091ac94dc307019 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Wed, 13 Sep 2023 18:04:31 +0800
Subject: [PATCH] feat: add ImageMj page view

---
 api/service/mj_service.go             |   4 +-
 web/src/components/ChatMidJourney.vue |   3 +-
 web/src/router.js                     |   9 +-
 web/src/views/ChatPlus.vue            |   4 +-
 web/src/views/Home.vue                |  13 +--
 web/src/views/ImageMj.vue             | 153 +++++++++++++++++++++++---
 6 files changed, 144 insertions(+), 42 deletions(-)

diff --git a/api/service/mj_service.go b/api/service/mj_service.go
index b88c27bb..c26adce1 100644
--- a/api/service/mj_service.go
+++ b/api/service/mj_service.go
@@ -110,8 +110,8 @@ func (s *MjService) Run() {
 			continue
 		}
 
-		// 锁定任务执行通道，直到任务超时（10分钟）
-		s.redis.Set(ctx, MjRunningJobKey, utils.JsonEncode(task), time.Minute*10)
+		// 锁定任务执行通道，直到任务超时（5分钟）
+		s.redis.Set(ctx, MjRunningJobKey, utils.JsonEncode(task), time.Minute*5)
 	}
 }
 
diff --git a/web/src/components/ChatMidJourney.vue b/web/src/components/ChatMidJourney.vue
index 75928df8..fd4fd49c 100644
--- a/web/src/components/ChatMidJourney.vue
+++ b/web/src/components/ChatMidJourney.vue
@@ -10,8 +10,9 @@
           <div class="text" v-html="data.html"></div>
           <div class="images" v-if="data.image?.url !== ''">
             <el-image :src="data.image?.url"
-                      :zoom-rate="1.0"
+                      :zoom-rate="1.2"
                       :preview-src-list="[data.image?.url]"
+                      fit="cover"
                       :initial-index="0" loading="lazy">
               <template #placeholder>
                 <div class="image-slot"
diff --git a/web/src/router.js b/web/src/router.js
index 75203463..d490d4aa 100644
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -4,7 +4,7 @@ const routes = [
     {
         name: 'home',
         path: '/',
-        redirect: '/chat',
+        redirect: '/mj',
         meta: {title: '首页'},
         component: () => import('@/views/Home.vue'),
         children: [
@@ -14,13 +14,6 @@ const routes = [
                 meta: {title: '创作中心'},
                 component: () => import('@/views/ChatPlus.vue'),
             },
-            {
-                name: 'chat-id',
-                path: '/chat/:id',
-                meta: {title: '创作中心'},
-                component: () => import('@/views/ChatPlus.vue'),
-                props: true // 将路由参数传递给组件的 props
-            },
             {
                 name: 'image-mj',
                 path: '/mj',
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index cc8e2bae..b94b9a0a 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -342,7 +342,7 @@ onMounted(() => {
             newChat();
           } else {
             // 加载对话
-            changeChat(chat)
+            loadChat(chat)
           }
         }).catch((e) => {
           ElMessage.error('获取聊天角色失败: ' + e.messages)
@@ -423,7 +423,6 @@ const newChat = function () {
 
 // 切换会话
 const changeChat = (chat) => {
-  router.push("/chat/" + chat.chat_id)
   localStorage.setItem("chat_id", chat.chat_id)
   loadChat(chat)
 }
@@ -880,6 +879,5 @@ const getModelValue = (model_id) => {
 </script>
 
 <style scoped lang="stylus">
-@import '@/assets/iconfont/iconfont.css';
 @import "@/assets/css/chat-plus.styl"
 </style>
\ No newline at end of file
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 9f772033..6ceb6923 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -39,16 +39,6 @@ import {isMobile} from "@/utils/libs";
 import {ref} from "vue";
 
 const router = useRouter();
-checkSession().then(() => {
-  if (isMobile()) {
-    router.push("/mobile")
-  } else {
-    router.push("/chat")
-  }
-}).catch(() => {
-  router.push("/login")
-})
-
 const logo = '/images/logo.png';
 const navs = ref([
   {path: "/chat", icon: "wechat", title: "对话聊天"},
@@ -60,7 +50,7 @@ const navs = ref([
   {path: "/member", icon: "vip-user", title: "会员计划"},
   {path: "/invite", icon: "share", title: "推广计划"},
 ])
-const curPath = ref(navs.value[0].path)
+const curPath = ref(router.currentRoute.value.path)
 
 const changeNav = (item) => {
   curPath.value = item.path
@@ -69,6 +59,7 @@ const changeNav = (item) => {
 </script>
 
 <style lang="stylus" scoped>
+@import '@/assets/iconfont/iconfont.css';
 .home {
   display: flex;
   background-color: #25272D;
diff --git a/web/src/views/ImageMj.vue b/web/src/views/ImageMj.vue
index a90df491..bc8402c7 100644
--- a/web/src/views/ImageMj.vue
+++ b/web/src/views/ImageMj.vue
@@ -1,39 +1,158 @@
 <template>
-  <div class="page-mj" :style="{ height: winHeight + 'px' }">
+  <div class="page-mj">
     <div class="inner">
-      <h1>MidJourney 绘画中心</h1>
-      <h2>页面正在紧锣密鼓开发中，敬请期待！</h2>
+      <div class="mj-box">
+        <h2>MidJourney 创作中心</h2>
+
+        <div class="mj-params">
+          <div class="param-line">
+            <span>图片比例：</span>
+            <el-tooltip
+                effect="light"
+                content="生成图片的尺寸比例"
+                placement="right"
+            >
+              <el-icon>
+                <InfoFilled/>
+              </el-icon>
+            </el-tooltip>
+          </div>
+
+          <div class="param-line">
+            <el-row :gutter="10">
+              <el-col :span="8">
+                <div class="grid-content">
+                  <div class="shape vertical"></div>
+                  <div class="text">竖图</div>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content">
+                  <div class="shape square"></div>
+                  <div class="text">方图</div>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="grid-content">
+                  <div class="shape horizontal"></div>
+                  <div class="text">横图</div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+
+          <div class="param-line">
+            <span>模型选择：</span>
+            <el-tooltip
+                effect="light"
+                content="MJ: 偏真实通用模型 <br/>NIJI: 偏动漫风格、适用于二次元模型"
+                raw-content
+                placement="right"
+            >
+              <el-icon>
+                <InfoFilled/>
+              </el-icon>
+            </el-tooltip>
+          </div>
+        </div>
+      </div>
+      <div class="task-list-box" :style="{ height: listBoxHeight + 'px' }">
+        <h2>任务列表</h2>
+
+        <h2>创作记录</h2>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
 import {ref} from "vue"
+import {InfoFilled} from "@element-plus/icons-vue";
 
-const winHeight = ref(window.innerHeight)
+const listBoxHeight = window.innerHeight - 20
+const params = ref({
+  rate: '16:9'
+})
 </script>
 
 <style lang="stylus" scoped>
 .page-mj {
-  display: flex;
-  justify-content: center;
-  align-items center
   background-color: #282c34;
 
   .inner {
-    text-align center
+    display: flex;
 
-    h1 {
-      color: #202020;
-      font-size: 80px;
-      font-weight: bold;
-      letter-spacing: 0.1em;
-      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
+    .mj-box {
+      margin 10px
+      background-color #262626
+      border 1px solid #454545
+      min-width 300px
+      padding 10px
+      border-radius 10px
+      color #ffffff;
+      font-size 14px
+
+      h2 {
+        font-weight: bold;
+        font-size 20px
+        text-align center
+        color #47fff1
+      }
+
+      .mj-params {
+        margin-top 10px
+
+        .param-line {
+          padding 6px 10px 6px 10px
+
+          .el-icon {
+            position relative
+            top 3px
+          }
+
+          .grid-content {
+            background-color #383838
+            border-radius 5px
+            padding 5px 6px
+            display flex
+            cursor pointer
+
+            .shape {
+              width 16px
+              height 16px
+              margin-right 5px
+              border 1px solid #C4C4C4
+              border-radius 3px
+            }
+
+            .shape.vertical {
+              width 12px
+              height 20px
+            }
+
+            .shape.horizontal {
+              height 12px
+              width 20px
+              position relative
+              top 3px
+            }
+          }
+
+        }
+      }
     }
 
-    h2 {
-      color #ffffff;
-      font-weight: bold;
+
+    .task-list-box {
+      width 100%
+      padding 10px
+      color #ffffff
+      overflow-x hidden
+      overflow-y auto
+
+      h2 {
+        font-size 20px
+      }
     }
   }