From 5e920f1e31b44edee5c3f8485595f9483cf11028 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B4=94=E5=BA=86=E6=89=8D=E4=B8=A8=E9=9D=99=E8=A7=85?=
 <cqc@germey.cn>
Date: Tue, 2 Jan 2024 13:43:30 +0800
Subject: [PATCH] Adapt for Mobile Screen  (#14)

---
 ...-bf95337c-cdeb-4103-a356-38668274b45e.json |   7 +
 src/components/chat/Introduction.vue          |  10 +-
 src/components/chat/SidePanel.vue             |   4 +-
 src/components/common/Navigator.vue           |   4 +-
 src/components/midjourney/ChannelSelector.vue |   8 +
 .../midjourney/tasks/TaskFullList.vue         |  14 +-
 .../midjourney/tasks/TaskPreview.vue          |   2 +-
 src/layouts/Chat.vue                          |  71 ++++++---
 src/layouts/Console.vue                       |  42 +++++-
 src/layouts/Main.vue                          |  11 +-
 src/layouts/Midjourney.vue                    | 139 ++++++++++++++++++
 src/pages/chat/Conversation.vue               |  98 ++++++------
 src/pages/midjourney/History.vue              |  75 ++++------
 src/pages/midjourney/Index.vue                |  20 +--
 src/router/chat.ts                            |   2 +-
 15 files changed, 355 insertions(+), 152 deletions(-)
 create mode 100644 change/@zhishuyun-hub-bf95337c-cdeb-4103-a356-38668274b45e.json
 create mode 100644 src/layouts/Midjourney.vue

diff --git a/change/@zhishuyun-hub-bf95337c-cdeb-4103-a356-38668274b45e.json b/change/@zhishuyun-hub-bf95337c-cdeb-4103-a356-38668274b45e.json
new file mode 100644
index 0000000..7002cbe
--- /dev/null
+++ b/change/@zhishuyun-hub-bf95337c-cdeb-4103-a356-38668274b45e.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "adapt for mobile screen",
+  "packageName": "@zhishuyun/hub",
+  "email": "cqc@cuiqingcai.com",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/chat/Introduction.vue b/src/components/chat/Introduction.vue
index e0e436b..577f579 100644
--- a/src/components/chat/Introduction.vue
+++ b/src/components/chat/Introduction.vue
@@ -125,9 +125,15 @@ export default defineComponent({
 
 @media (max-width: 767px) {
   .introduction {
+    position: relative;
+    top: initial;
+    left: initial;
+    transform: initial;
     width: 90%;
-    left: 5%;
-    transform: translateY(-50%);
+    margin: auto;
+    .introduction-items {
+      margin-bottom: 0;
+    }
   }
 }
 </style>
diff --git a/src/components/chat/SidePanel.vue b/src/components/chat/SidePanel.vue
index 6aab239..27898c2 100644
--- a/src/components/chat/SidePanel.vue
+++ b/src/components/chat/SidePanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar">
+  <div class="panel">
     <el-skeleton v-if="loading && conversations === undefined" />
     <div v-else class="conversations">
       <div class="conversation" @click="onNewConversation">
@@ -130,7 +130,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.sidebar {
+.panel {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
diff --git a/src/components/common/Navigator.vue b/src/components/common/Navigator.vue
index 405ab20..d254964 100644
--- a/src/components/common/Navigator.vue
+++ b/src/components/common/Navigator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar">
+  <div class="navigator">
     <div class="top">
       <div v-for="(link, linkIndex) in links" :key="linkIndex" class="link">
         <el-tooltip effect="dark" :content="link.displayName" placement="right">
@@ -97,7 +97,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.sidebar {
+.navigator {
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/components/midjourney/ChannelSelector.vue b/src/components/midjourney/ChannelSelector.vue
index a29ef82..bc2cfee 100644
--- a/src/components/midjourney/ChannelSelector.vue
+++ b/src/components/midjourney/ChannelSelector.vue
@@ -108,4 +108,12 @@ export default defineComponent({
     }
   }
 }
+
+@media (max-width: 767px) {
+  .channel-selector {
+    .button {
+      padding: 20px 10px;
+    }
+  }
+}
 </style>
diff --git a/src/components/midjourney/tasks/TaskFullList.vue b/src/components/midjourney/tasks/TaskFullList.vue
index a32ba0e..e7a58dd 100644
--- a/src/components/midjourney/tasks/TaskFullList.vue
+++ b/src/components/midjourney/tasks/TaskFullList.vue
@@ -14,13 +14,9 @@
       </el-skeleton>
     </el-card>
   </div>
-  <el-row>
-    <el-col :span="10" :offset="14">
-      <div class="pagination">
-        <pagination :current-page="page" :page-size="limit" :total="total" @change="onPageChange" />
-      </div>
-    </el-col>
-  </el-row>
+  <div class="pagination">
+    <pagination :current-page="page" :page-size="limit" :total="total" @change="onPageChange" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -35,8 +31,6 @@ export default defineComponent({
   components: {
     TaskPreview,
     Pagination,
-    ElRow,
-    ElCol,
     ElSkeleton,
     ElSkeletonItem,
     ElCard
@@ -156,5 +150,7 @@ export default defineComponent({
 .pagination {
   height: 60px;
   padding-top: 10px;
+  width: fit-content;
+  margin: auto;
 }
 </style>
diff --git a/src/components/midjourney/tasks/TaskPreview.vue b/src/components/midjourney/tasks/TaskPreview.vue
index 2e78648..c17cf27 100644
--- a/src/components/midjourney/tasks/TaskPreview.vue
+++ b/src/components/midjourney/tasks/TaskPreview.vue
@@ -139,7 +139,7 @@ export default defineComponent({
       required: true
     },
     applications: {
-      type: Object as () => IApplication[],
+      type: Object as () => IApplication[] | undefined,
       required: true
     },
     full: {
diff --git a/src/layouts/Chat.vue b/src/layouts/Chat.vue
index 307287f..73ed2bf 100644
--- a/src/layouts/Chat.vue
+++ b/src/layouts/Chat.vue
@@ -1,25 +1,40 @@
 <template>
-  <div class="wrapper">
-    <div class="left">
-      <navigator />
+  <div class="main">
+    <div class="side">
+      <slot name="side">
+        <side-panel />
+      </slot>
     </div>
-    <div class="main">
-      <side-panel />
-      <router-view />
+    <div class="chat">
+      <slot name="chat" />
     </div>
+    <el-button round class="menu" @click="drawer = true">
+      <font-awesome-icon icon="fa-solid fa-bars" class="icon-menu" />
+    </el-button>
+    <el-drawer v-model="drawer" :with-header="false" size="340px" class="drawer">
+      <side-panel />
+    </el-drawer>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import Navigator from '@/components/common/Navigator.vue';
 import SidePanel from '@/components/chat/SidePanel.vue';
+import { ElDrawer, ElButton } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default defineComponent({
   name: 'LayoutChat',
   components: {
     SidePanel,
-    Navigator
+    ElDrawer,
+    ElButton,
+    FontAwesomeIcon
+  },
+  data() {
+    return {
+      drawer: false
+    };
   },
   async mounted() {
     await this.onGetApplications();
@@ -37,24 +52,44 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.wrapper {
-  width: 100%;
-  height: 100%;
+.main {
+  width: calc(100% - 60px);
   display: flex;
   flex-direction: row;
-  .left {
-    width: 60px;
+  .side {
+    width: 300px;
     height: 100%;
-    border-right: 1px solid var(--el-border-color);
+    overflow-y: scroll;
   }
-  .main {
+
+  .chat {
     height: 100%;
+    padding: 15px;
     flex: 1;
-    width: calc(100% - 60px);
-    width: 100%;
+    width: calc(100% - 300px);
     height: 100%;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+  }
+}
+
+.menu {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .side {
+    display: none;
+  }
+  .chat {
+    width: 100%;
+  }
+  .menu {
+    display: block;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+    z-index: 2000;
   }
 }
 </style>
diff --git a/src/layouts/Console.vue b/src/layouts/Console.vue
index 06f4cff..0bbbed1 100644
--- a/src/layouts/Console.vue
+++ b/src/layouts/Console.vue
@@ -4,9 +4,15 @@
       <navigator />
     </div>
     <div class="main">
-      <side-panel />
-      <router-view />
+      <side-panel class="side" />
+      <router-view class="operation" />
     </div>
+    <el-button round class="menu" @click="drawer = true">
+      <font-awesome-icon icon="fa-solid fa-bars" class="icon-menu" />
+    </el-button>
+    <el-drawer v-model="drawer" :with-header="false" size="340px" class="drawer">
+      <side-panel />
+    </el-drawer>
   </div>
 </template>
 
@@ -14,12 +20,22 @@
 import { defineComponent } from 'vue';
 import Navigator from '@/components/common/Navigator.vue';
 import SidePanel from '@/components/console/SidePanel.vue';
+import { ElDrawer, ElButton } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default defineComponent({
   name: 'LayoutConsole',
   components: {
     SidePanel,
-    Navigator
+    Navigator,
+    ElDrawer,
+    ElButton,
+    FontAwesomeIcon
+  },
+  data() {
+    return {
+      drawer: false
+    };
   }
 });
 </script>
@@ -43,4 +59,24 @@ export default defineComponent({
     flex-direction: row;
   }
 }
+
+@media screen and (max-width: 767px) {
+  .main {
+    .side {
+      display: none;
+    }
+    .panel {
+      width: 100%;
+      height: 100%;
+      overflow-y: scroll;
+    }
+  }
+  .menu {
+    display: block;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+    z-index: 1000;
+  }
+}
 </style>
diff --git a/src/layouts/Main.vue b/src/layouts/Main.vue
index d3cc03b..8d7b4ee 100644
--- a/src/layouts/Main.vue
+++ b/src/layouts/Main.vue
@@ -1,11 +1,7 @@
 <template>
   <div class="wrapper">
-    <div class="left">
-      <navigator />
-    </div>
-    <div class="main">
-      <router-view />
-    </div>
+    <navigator class="navigator" />
+    <router-view class="main" />
   </div>
 </template>
 
@@ -27,7 +23,8 @@ export default defineComponent({
   height: 100%;
   display: flex;
   flex-direction: row;
-  .left {
+  overflow: hidden;
+  .navigator {
     width: 60px;
     height: 100%;
     border-right: 1px solid var(--el-border-color);
diff --git a/src/layouts/Midjourney.vue b/src/layouts/Midjourney.vue
new file mode 100644
index 0000000..3797b02
--- /dev/null
+++ b/src/layouts/Midjourney.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="main">
+    <div class="presets">
+      <slot name="presets" />
+    </div>
+    <div class="operation">
+      <slot name="operation" />
+    </div>
+    <div class="results">
+      <slot name="results" />
+    </div>
+    <el-button round class="menu" @click="drawer = true">
+      <font-awesome-icon icon="fa-solid fa-gear" class="icon-menu" />
+    </el-button>
+    <el-button round class="menu2" @click="drawer2 = true">
+      <font-awesome-icon icon="fa-solid fa-bars" class="icon-menu" />
+    </el-button>
+    <el-drawer v-model="drawer" :with-header="false" size="300px" class="drawer">
+      <slot name="presets" />
+    </el-drawer>
+    <el-drawer v-model="drawer2" :show-close="true" size="400px" class="drawer2">
+      <slot name="results" />
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElDrawer, ElButton } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+export default defineComponent({
+  name: 'LayoutMidjourney',
+  components: {
+    ElDrawer,
+    ElButton,
+    FontAwesomeIcon
+  },
+  data() {
+    return {
+      drawer: false,
+      drawer2: false
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+.drawer2 {
+  .el-drawer__header {
+    margin-bottom: 0;
+  }
+  .el-drawer__body {
+    .tasks {
+      padding-top: 0;
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.main {
+  height: 100%;
+  width: calc(100% - 60px);
+  display: flex;
+  flex-direction: row;
+  .menu {
+    display: none;
+  }
+  .menu2 {
+    display: none;
+  }
+  .presets {
+    width: 260px;
+    height: 100%;
+    overflow-y: scroll;
+  }
+  .operation {
+    flex: 1;
+    padding: 15px;
+    height: 100%;
+    overflow-x: scroll;
+    .title {
+      font-size: 14px;
+      margin-bottom: 10px;
+    }
+    .btn.btn-generate {
+      width: 80px;
+      border-radius: 20px;
+    }
+  }
+  .results {
+    overflow-y: scroll;
+    width: 400px;
+    height: 100%;
+    border-left: 1px solid var(--el-border-color);
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1060px) {
+  .main {
+    .presets {
+      display: none;
+    }
+    .menu {
+      display: block;
+      position: fixed;
+      left: 80px;
+      top: 20px;
+      z-index: 2000;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .main {
+    .presets {
+      display: none;
+    }
+    .results {
+      display: none;
+    }
+    .menu {
+      display: block;
+      position: fixed;
+      left: 80px;
+      top: 20px;
+      z-index: 2000;
+    }
+    .menu2 {
+      display: block;
+      position: fixed;
+      right: 20px;
+      top: 20px;
+      z-index: 2000;
+    }
+  }
+}
+</style>
diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
index 956d89a..85dac72 100644
--- a/src/pages/chat/Conversation.vue
+++ b/src/pages/chat/Conversation.vue
@@ -1,28 +1,30 @@
 <template>
-  <div class="page">
-    <model-selector class="model-selector" />
-    <api-status
-      :initializing="initializing"
-      :application="application"
-      :api-id="model.apiId"
-      @refresh="$store.dispatch('chat/getApplications')"
-    />
-    <div class="dialogue">
-      <introduction v-if="messages.length === 0" @draft="onDraft" />
-      <div v-else class="messages">
-        <message v-for="(message, messageIndex) in messages" :key="messageIndex" :message="message" class="message" />
-      </div>
-    </div>
-    <div class="bottom">
-      <input-box
-        :question="question"
-        :references="references"
-        @update:question="question = $event"
-        @update:references="references = $event"
-        @submit="onSubmit"
+  <layout>
+    <template #chat>
+      <model-selector class="model-selector" />
+      <api-status
+        :initializing="initializing"
+        :application="application"
+        :api-id="model.apiId"
+        @refresh="$store.dispatch('chat/getApplications')"
       />
-    </div>
-  </div>
+      <div class="dialogue">
+        <introduction v-if="messages.length === 0" @draft="onDraft" />
+        <div v-else class="messages">
+          <message v-for="(message, messageIndex) in messages" :key="messageIndex" :message="message" class="message" />
+        </div>
+      </div>
+      <div class="bottom">
+        <input-box
+          :question="question"
+          :references="references"
+          @update:question="question = $event"
+          @update:references="references = $event"
+          @submit="onSubmit"
+        />
+      </div>
+    </template>
+  </layout>
 </template>
 
 <script lang="ts">
@@ -48,6 +50,7 @@ import { ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_CONVERSATION_NEW } from '@/router';
 import { Status } from '@/store/common/models';
 import { log } from '@/utils/log';
 import Introduction from '@/components/chat/Introduction.vue';
+import Layout from '@/layouts/Chat.vue';
 
 export interface IData {
   question: string;
@@ -62,7 +65,8 @@ export default defineComponent({
     Introduction,
     ModelSelector,
     Message,
-    ApiStatus
+    ApiStatus,
+    Layout
   },
   data(): IData {
     return {
@@ -161,7 +165,7 @@ export default defineComponent({
     async onScrollDown() {
       setTimeout(() => {
         const container = document.querySelector('.dialogue') as HTMLDivElement;
-        if (!container) {
+        if (!container || !this.messages || this.messages.length === 0) {
           return;
         }
         container.scrollTop = container?.scrollHeight;
@@ -259,36 +263,26 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.page {
+.model-selector {
+  width: max-content;
+  margin: auto;
+  margin-bottom: 10px;
+}
+
+.dialogue {
   flex: 1;
-  width: 100%;
   overflow-y: scroll;
-  padding: 15px;
-  height: 100%;
-  flex-direction: column;
-  display: flex;
-
-  .model-selector {
-    width: max-content;
-    margin: auto;
-    margin-bottom: 10px;
-  }
-
-  .dialogue {
-    flex: 1;
-    overflow-y: scroll;
-    margin: 20px 0;
-    position: relative;
-    .messages {
-      padding-top: 30px;
-      .message {
-        margin-bottom: 15px;
-      }
+  margin: 20px 0;
+  position: relative;
+  .messages {
+    padding-top: 30px;
+    .message {
+      margin-bottom: 15px;
     }
   }
-  .bottom {
-    width: 100%;
-    height: 90px;
-  }
+}
+.bottom {
+  width: 100%;
+  height: 90px;
 }
 </style>
diff --git a/src/pages/midjourney/History.vue b/src/pages/midjourney/History.vue
index 220ea35..35e81d7 100644
--- a/src/pages/midjourney/History.vue
+++ b/src/pages/midjourney/History.vue
@@ -1,23 +1,18 @@
 <template>
-  <div class="page">
-    <div class="presets">
-      <preset-panel />
-    </div>
-    <div class="main">
-      <channel-selector class="mb-4" />
-      <api-status
-        :initializing="initializing"
-        :application="application"
-        class="mb-4"
-        :api-id="channel.apiId"
-        @refresh="onGetApplications"
-      />
-      <task-full-list @custom="onCustom" />
-      <el-button type="primary" class="btn btn-generate" @click="onGenerateNew">
-        <font-awesome-icon icon="fa-solid fa-chevron-left" class="icon icon-rotate mr-1" />
-        {{ $t('midjourney.button.generateNew') }}
-      </el-button>
-    </div>
+  <div class="history">
+    <channel-selector class="mb-4" />
+    <api-status
+      :initializing="initializing"
+      :application="application"
+      class="mb-4"
+      :api-id="channel.apiId"
+      @refresh="onGetApplications"
+    />
+    <task-full-list @custom="onCustom" />
+    <el-button type="primary" class="btn btn-generate" @click="onGenerateNew">
+      <font-awesome-icon icon="fa-solid fa-chevron-left" class="icon icon-rotate mr-1" />
+      {{ $t('midjourney.button.generateNew') }}
+    </el-button>
   </div>
 </template>
 
@@ -44,7 +39,6 @@ const CALLBACK_URL = 'https://webhook.zhishuyun.com/midjourney';
 export default defineComponent({
   name: 'MidjourneyIndex',
   components: {
-    PresetPanel,
     TaskFullList,
     ChannelSelector,
     ApiStatus,
@@ -121,35 +115,24 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.page {
-  width: 100%;
-  height: 100%;
+.history {
+  flex: 1;
+  padding: 15px;
+  width: calc(100% - 260px);
   display: flex;
-  flex-direction: row;
-  .presets {
-    width: 260px;
-    height: 100%;
-    overflow-y: scroll;
-  }
-  .main {
-    flex: 1;
-    padding: 15px;
-    width: calc(100% - 260px);
-    display: flex;
-    flex-direction: column;
-    position: relative;
+  flex-direction: column;
+  position: relative;
 
-    .title {
-      font-size: 14px;
-      margin-bottom: 10px;
-    }
+  .title {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
 
-    .btn.btn-generate {
-      position: absolute;
-      left: 30px;
-      top: 30px;
-      border-radius: 20px;
-    }
+  .btn.btn-generate {
+    position: absolute;
+    left: 30px;
+    top: 30px;
+    border-radius: 20px;
   }
 }
 </style>
diff --git a/src/pages/midjourney/Index.vue b/src/pages/midjourney/Index.vue
index c9ea5de..6f3ae4b 100644
--- a/src/pages/midjourney/Index.vue
+++ b/src/pages/midjourney/Index.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="page">
-    <div class="presets">
+  <layout>
+    <template #presets>
       <preset-panel />
-    </div>
-    <div class="main">
+    </template>
+    <template #operation>
       <channel-selector class="mb-4" />
       <api-status
         :initializing="initializing"
@@ -22,15 +22,16 @@
           {{ $t('midjourney.button.generate') }}
         </el-button>
       </div>
-    </div>
-    <div class="result">
+    </template>
+    <template #results>
       <task-brief-list :applications="applications" @custom="onCustom" />
-    </div>
-  </div>
+    </template>
+  </layout>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import Layout from '@/layouts/Midjourney.vue';
 import PresetPanel from '@/components/midjourney/PresetPanel.vue';
 import PromptInput from '@/components/midjourney/PromptInput.vue';
 import ElementsSelector from '@/components/midjourney/ElementsSelector.vue';
@@ -73,7 +74,8 @@ export default defineComponent({
     ElButton,
     ApiStatus,
     TaskBriefList,
-    FinalPrompt
+    FinalPrompt,
+    Layout
   },
   data(): IData {
     return {
diff --git a/src/router/chat.ts b/src/router/chat.ts
index e6e0ca0..d62c4b5 100644
--- a/src/router/chat.ts
+++ b/src/router/chat.ts
@@ -2,7 +2,7 @@ import { ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_CONVERSATION_NEW } from './constant
 
 export default {
   path: '/chat',
-  component: () => import('@/layouts/Chat.vue'),
+  component: () => import('@/layouts/Main.vue'),
   children: [
     {
       path: '',