super update! add UI for desktop

Author: stepbystepcode

src/css/app.scss

@@ -7,4 +7,7 @@ input{
 }
 pre{
   background: #0d1117!important;
-}
+}
+.q-page-container{
+  margin-top:0!important;
+}

src/layouts/ChatLayout.vue

@@ -32,7 +32,7 @@
       </q-card>
     </q-dialog>
 
-    <q-drawer show-if-above bordered v-model="leftDrawerOpen">
+    <q-drawer bordered v-model="leftDrawerOpen">
       <div class="bg-primary column" v-if="store.info">
         <div class="q-pa-lg">
           <q-avatar @click="router.push('/avatar')" v-if="store.info" size="60px"><img
@@ -81,7 +81,11 @@
 
     </q-drawer>
 
-    <q-page-container>
+    <q-page-container style="display: flex">
+      <q-page-container :class="{'is-mobile':store.isMobile,half:!store.isMobile}" class="no-padding" style="background: #fff">
+        <router-view name="fakeSidebar"></router-view>
+    </q-page-container>
+      <q-page-container style="flex:1" :class="{half:!store.isMobile}" class="no-padding">
       <router-view v-slot="{ Component }">
         <transition
           enter-active-class="animated fadeInRight"
@@ -90,23 +94,30 @@
         </transition>
       </router-view>
     </q-page-container>
+    </q-page-container>
   </q-layout>
 </template>
 
 <script setup>
 import {useCheckStore} from 'stores/check';
 
 const $q = useQuasar()
+watch(
+  () => $q.screen.width,
+  (newWidth) => {
+    store.isMobile = newWidth < 400
+  }
+)
 const setColor = () => {
   document.querySelector(':root').style.setProperty('--q-primary', hexa.value);
   pickerShow.value = false;
   store.info.color = hexa.value;
   $q.localStorage.set('info', store.info);
 }
-
+console.log($q.screen)
 import {useRoute} from 'vue-router'
 import {useQuasar} from 'quasar'
-import {ref} from 'vue';
+import {ref, watch} from 'vue';
 import {useRouter} from 'vue-router';
 
 const route = useRoute();
@@ -120,6 +131,12 @@ const settings = () => {
 }
 const leftDrawerOpen = ref(false);
 
+watch(route, (newRoute) => {
+  if (newRoute.path.includes('person')) {
+    leftDrawerOpen.value = false
+  }
+})
+
 function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value
 }
@@ -150,4 +167,12 @@ try {
 </script>
 
 <style scoped lang="scss">
+.is-mobile{
+  display: none;
+}
+.half{
+  max-width: 50vw;
+  overflow: hidden;
+}
+
 </style>

src/pages/ChatPage.vue

@@ -9,12 +9,12 @@
     <!--         class="q-pa-md q-mb-xl">-->
     <div class=" q-pa-md q-mb-xl">
       <q-chat-message v-for="(item, i) in store.history[route.params.id]" :key="i"
-                      :avatar="store.avatar(<number>item.sender == route.params.id ? yourAvatar : myAvatar)"
+                      :avatar="store.avatar(item.sender === route.params.id ? yourAvatar : myAvatar)"
                       :bg-color="`${item.sender == route.params.id ? 'white' : 'info'}`" :text="[item.content]"
                       :stamp="item.time"
                       :sent="item.sender != route.params.id"/>
     </div>
-    <div class="row fixed bg-white window-width" style="bottom:0">
+    <div class="row fixed bg-white" :class="store.isMobile?'window-width':'half-width'" style="bottom:0">
       <q-input borderless v-model="message" placeholder="Message" style="flex:1" class="q-px-md"
                @keyup.enter="sendMessage()"></q-input>
       <q-btn @click="sendMessage()" flat :disable="!message.length">
@@ -151,4 +151,7 @@ const sendMessage = async () => {
   background: center repeat;
   background-size: 420px auto;
 }
+.half-width{
+  width: 50vw;
+}
 </style>

src/router/routes.ts

@@ -1,5 +1,6 @@
 import { RouteRecordRaw } from 'vue-router';
-
+import ListPage from 'pages/ListPage.vue';
+import ChatPage from 'pages/ChatPage.vue';
 const routes: RouteRecordRaw[] = [
   {
     path: '/file',
@@ -11,7 +12,7 @@ const routes: RouteRecordRaw[] = [
     path: '/chat',
     component: () => import('layouts/ChatLayout.vue'),
     children: [{ path: '/chat', component: () => import('pages/ListPage.vue') },
-    { path: '/chat/person/:id', component: () => import('pages/ChatPage.vue') },
+    { path: '/chat/person/:id', components: {fakeSidebar:ListPage,default:ChatPage} },
     { path: '/chat/newfriends', component: () => import('pages/NewFriends.vue') }]
   },
   {

src/stores/check.ts

@@ -9,6 +9,7 @@ export const useCheckStore = defineStore('check', () => {
   const info = ref({})
   const order = ref({})
   const avatarList = ['O1kmMD', 'O1ky0I', 'O1kvZ1', 'O1kZBG', 'O1k1Hv', 'O1kn1Y', 'O1kiMU', 'O1kF0p', 'O1kzKj', 'O1kMKK', 'O1bw5s', 'O1b3fB', 'O1bIpg', 'O1bukl', 'O1b88b', 'O1b6DP', 'O1b2n6', 'O1b9wF', 'O1blSD', 'O1bfAI', 'O1bY51', 'O1bsYG', 'O1bdpM', 'O1bckr', 'O1bS6c', 'O1bQDq', 'O1bGnv', 'O1bLCY', 'O1bHSU', 'O1bDAp', 'O1b4qj', 'O1bRYx']
+  const isMobile=ref(true)
   const avatar=(n:number)=>{
     const str = avatarList[n];
     return `https://ooo.0x0.ooo/2023/10/03/${str}.webp`
@@ -36,7 +37,7 @@ export const useCheckStore = defineStore('check', () => {
   }
   setInterval(update, 500)
 
-  return { history,info,order,avatar }
+  return { history,info,order,avatar,isMobile }
   // state: () => ({
   //   history:{}
   // }),