Fix chat mobile adaptation (#48)

Co-authored-by: Germey <germey@acedata.cloud>
AceDataCloud · Jun 15, 2024 · b082f52 · b082f52
1 parent 2199a8c
commit b082f52
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 11 deletions.
diff --git a/change/@acedatacloud-nexior-f13a1f2e-bd4b-46ae-942f-3815a3b7fdd6.json b/change/@acedatacloud-nexior-f13a1f2e-bd4b-46ae-942f-3815a3b7fdd6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "make adaptation for mobile",
+  "packageName": "@acedatacloud/nexior",
+  "email": "germey@acedata.cloud",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/application/Status.vue b/src/components/application/Status.vue
@@ -180,6 +180,11 @@ export default defineComponent({
 .actions {
   margin: 0 5px;
   display: inline-block;
+  @media (max-width: 767px) {
+    display: block;
+    margin: 5px auto 0 auto;
+    width: fit-content;
+  }
   .el-button {
     border-radius: 20px;
   }

diff --git a/src/components/chat/InputBox.vue b/src/components/chat/InputBox.vue
@@ -197,7 +197,8 @@ textarea.input:focus {
 
 <style lang="scss" scoped>
 .input-box {
-  width: 800px;
+  width: 100%;
+  max-width: 800px;
   margin: auto;
   position: relative;
   border-radius: 20px;

diff --git a/src/components/chat/Introduction.vue b/src/components/chat/Introduction.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="introduction">
     <el-row class="items" justify="center" :gutter="15">
-      <el-col v-for="(item, itemKey) in items" :key="itemKey" :md="6" :sm="12" :xs="24">
+      <el-col v-for="(item, itemKey) in items" :key="itemKey" :md="6" :sm="12" :xs="12">
         <introduction-item
           :content="item.content"
           :icon="item.icon"
@@ -67,7 +67,8 @@ export default defineComponent({
   justify-content: center;
 
   .items {
-    width: 800px;
+    max-width: 800px;
+    width: 100%;
     margin: auto;
   }
 }

diff --git a/src/components/chat/IntroductionItem.vue b/src/components/chat/IntroductionItem.vue
@@ -49,11 +49,12 @@ export default defineComponent({
 .item {
   height: 100px;
   font-size: 14px;
-  background-color: var(--el-color-white);
+  background-color: var(--el-color-color);
   color: var(--el-text-color-primary);
   border: 1px solid var(--el-border-color-lighter);
   padding: 10px 20px;
   border-radius: 20px;
+  margin-bottom: 15px;
   &:hover {
     background-color: var(--el-bg-color-page);
   }

diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue
@@ -46,7 +46,6 @@ import {
   ERROR_CODE_USED_UP,
   ROLE_ASSISTANT
 } from '@/constants';
-// import message from '@/i18n/zh/common/message';
 import { ROUTE_CONSOLE_APPLICATION_BUY } from '@/router';
 
 interface IData {
@@ -171,6 +170,7 @@ export default defineComponent({
   .content {
     border-radius: 20px;
     padding: 8px 15px;
+    width: 100%;
     max-width: 800px;
     .image {
       max-width: 100%;

diff --git a/src/components/chat/SidePanel.vue b/src/components/chat/SidePanel.vue
@@ -192,6 +192,10 @@ export default defineComponent({
   height: 100%;
   border-right: 1px solid var(--el-border-color);
 
+  @media (max-width: 767px) {
+    border-right: none;
+  }
+
   .conversations {
     width: 100%;
     display: flex;

diff --git a/src/components/midjourney/preset/ModelSelector.vue b/src/components/midjourney/preset/ModelSelector.vue
@@ -35,7 +35,7 @@ export default defineComponent({
           image: 'https://cdn.acedata.cloud/2023-10-06-174633.png'
         },
         {
-          value: 'niji',
+          value: 'niji 5',
           label: this.$t('midjourney.model.niji'),
           image: 'https://cdn.acedata.cloud/2023-10-06-174008.png'
         }

diff --git a/src/layouts/Chat.vue b/src/layouts/Chat.vue
@@ -11,7 +11,7 @@
     <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">
+    <el-drawer v-model="drawer" :with-header="false" size="290px" class="drawer">
       <side-panel />
     </el-drawer>
   </div>

diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
@@ -3,6 +3,7 @@
     <template #chat>
       <model-selector2 class="selector" />
       <application-status
+        class="status"
         :initializing="initializing"
         :application="application"
         :need-apply="needApply"
@@ -294,9 +295,10 @@ export default defineComponent({
 
 .dialogue {
   flex: 1;
-  width: 800px;
+  width: 100%;
+  max-width: 800px;
   margin: 15px auto;
-  overflow-y: scroll;
+  overflow-y: auto;
   position: relative;
   .messages {
     padding-top: 30px;
@@ -308,4 +310,10 @@ export default defineComponent({
 .bottom {
   width: 100%;
 }
+
+@media (max-width: 767px) {
+  .status {
+    margin-top: 20px;
+  }
+}
 </style>
diff --git a/src/store/common/state.ts b/src/store/common/state.ts
@@ -13,8 +13,7 @@ export default (): IRootState => {
       expiration: undefined
     },
     setting: {
-      // if PC, set default to true, else false
-      navigationCollapsed: window.innerWidth < 768
+      navigationCollapsed: true
     },
     chatdoc: chatdocState(),
     chat: chatState(),