red point

Author: stepbystepcode

src/components/EditorComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <mavon-editor :codeStyle=codeStyle :externalLink="externalLink" :ishljs="true" :autofocus="false" placeholder=" "
+  <mavon-editor :subfield="false" defaultOpen="preview" :codeStyle=codeStyle :externalLink="externalLink" :ishljs="true" :autofocus="false" placeholder=" "
                 :toolbars="toolbars" />
 </template>
 

src/layouts/ChatLayout.vue

@@ -105,7 +105,10 @@ const $q = useQuasar()
 watch(
   () => $q.screen.width,
   (newWidth) => {
-    store.isMobile = newWidth < 400
+    if (route.path.includes('login')||route.path.includes('signup')||route.path.includes('avatar')||route.path.includes('file'))
+      store.isMobile=true;
+    else
+    store.isMobile = newWidth < 450
   }
 )
 const setColor = () => {

src/pages/EditorPage.vue

@@ -10,7 +10,7 @@
   </div>
   <div class="row">
     <div class="q-pa-md q-gutter-sm">
-      <q-tree v-if="final" ref="treeObj" :nodes="final" node-key="key" style="min-width: 27vw;max-width: 27vw;"
+      <q-tree v-if="final" ref="treeObj" :nodes="final" node-key="key"
               selected-color="primary" v-model:selected="key" @update:selected="select(key)" default-expand-all/>
     </div>
     <div class="container">
@@ -63,9 +63,9 @@ const touch=()=>{
       showLoaderOnConfirm: true,
       preConfirm: (login) => {
         commandReq(5, selectFolder.value+login,'').then(res => {
-          if (res.data === 'success') Swal.fire('Success', '', 'success').then(() => {
+          if (res.data.code === 200) Swal.fire('Success', '', 'success').then(() => {
             commandReq(0, '', '').then(res => {
-              tree(res.data);
+              tree(JSON.parse(res.data.message));
             })
           })
           else Swal.fire('Fail', '', 'error')
@@ -89,10 +89,10 @@ const addFolder = () => {
       showLoaderOnConfirm: true,
       preConfirm: (login) => {
         commandReq(4, selectFolder.value+login,'').then(res => {
-          if (res.data === 'success') Swal.fire('Success', '', 'success').then(() => {
+          if (res.data.code === 200) Swal.fire('Success', '', 'success').then(() => {
 
             commandReq(0, '', '').then(res => {
-              tree(res.data);
+              tree(JSON.parse(res.data.message));
             })
           })
           else Swal.fire('Fail', '', 'error')
@@ -119,7 +119,7 @@ const deleteFile = () => {
       Swal.fire('Success', '', 'success').then(()=>{
 
         commandReq(0, '', '').then(res => {
-          tree(res.data);
+          tree(JSON.parse(res.data.message));
         })
       })
     })
@@ -165,13 +165,13 @@ const select = (key) => {
     selectFile.value = selectNode.value.label;
     selectFolder.value = selectFolder.value === selectFile.value ? selectNode.value.path+'/' :selectNode.value.path.slice(0, selectNode.value.path.length - selectFile.value.length - 1) ;
     commandReq(6, selectNode.value.path, '').then(res => {
-      content.value = res.data.toString();
+      content.value = res.data.message.toString();
     })
   }
 }
 onMounted(() => {
   commandReq(0, '', '').then(res => {
-    tree(res.data);
+    tree(JSON.parse(res.data.message));
   })
 })
 const tree = (res) => {
@@ -259,14 +259,14 @@ const paste = (n) => {
     copyed.value = false;
 
     commandReq(0, '', '').then(res => {
-      tree(res.data);
+      tree(JSON.parse(res.data.message));
     })
   } else {
     commandReq(2, movefile.value, selectFolder.value);
     moved.value = false;
 
     commandReq(0, '', '').then(res => {
-      tree(res.data);
+      tree(JSON.parse(res.data.message));
     })
 
   }
@@ -299,17 +299,19 @@ const imgAdd = (pos, file) => {
       'content-type': 'multipart/form-data'
     }
   }).then((res) => {
-    const url = `http://8.130.48.157:8081/api/file/get?filename=${res.data}`;
+    const url = `http://8.130.48.157:8081/api/file/get?filename=${res.data.message}`;
     content.value = content.value.replace(/!\[[^\]]+\]\([^)]+\)/, `![](${url})`);
   })
 }
 
 </script>
 
 <style lang="scss" scoped>
+.container{
+  flex:1;
+}
 .content {
   padding: 24px;
-
   .box {
     padding: 24px;
     border: 1px solid #e3e6e8;

src/pages/ListPage.vue

@@ -1,7 +1,7 @@
 <template>
   <q-page class="column" v-if="list">
     <div class="person items-center relative-position" v-for="(person, i) in list" :key="i" v-ripple.early>
-      <div class="row items-center" @click="router.push(`/chat/person/${person.username}`)"
+      <div class="row items-center" @click="store.unread[person.username]=0;router.push(`/chat/person/${person.username}`)"
            v-touch-hold.mouse="handleHold"
            :style="`width: 100vw;background-color:${selected===person.username?'gainsboro':'none'};`">
         <q-avatar class="q-ma-md"><img :src="store.avatar(person.avatar)" alt=""></q-avatar>
@@ -10,8 +10,11 @@
                                                                 class="q-mb-sm">{{ person.username }}</span><span
             class="text-grey q-mr-md"
             v-if="store.history[person.username]">{{ time(store.history[person.username].at(-1).time) }}</span></div>
+          <div class="row justify-between">
           <span v-if="store.history[person.username]"
                 style="color:#808080">{{ store.history[person.username].at(-1).content }}</span>
+            <div style="background: red;border-radius: 100px" class="q-px-sm text-white q-mr-md" v-if="store.unread[person.username]">{{store.unread[person.username]}}</div>
+          </div>
         </div>
       </div>
       <q-separator/>

src/stores/check.ts

@@ -1,43 +1,47 @@
-import { defineStore } from 'pinia';
-import { ref} from 'vue'
+import {defineStore} from 'pinia';
+import {ref} from 'vue'
 import axios from 'axios'
-
-import { LocalStorage } from 'quasar'
+import {LocalStorage, Screen} from 'quasar'
 
 export const useCheckStore = defineStore('check', () => {
+  const isMobile = ref((window.location.href.includes('login') || window.location.href.includes('signup') || window.location.href.includes('avatar') || window.location.href.includes('file')) ? true : Screen.width < 450)
   const history = ref({})
   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 unread = ref({});
+  const avatar = (n: number) => {
     const str = avatarList[n];
     return `https://ooo.0x0.ooo/2023/10/03/${str}.webp`
   }
   const update = () => {
-    if(window.location.pathname!=='/login'&&window.location.pathname!=='/signup')
-    axios.post('http://8.130.48.157:8081/api/check?type=new','' ,{
+    if (window.location.pathname !== '/login' && window.location.pathname !== '/signup')
+      axios.post('http://8.130.48.157:8081/api/check?type=new', '', {
 
-      headers: {
-      Authorization: `Bearer ${LocalStorage.getItem('token')}`
-    }}
+          headers: {
+            Authorization: `Bearer ${LocalStorage.getItem('token')}`
+          }
+        }
       )
-      .then(res => {
-          if(res.data.message!==null){
+        .then(res => {
+          if (res.data.message !== null) {
             const key = Object.keys(res.data.message)[0];
             if (!history.value[key]) history.value[key] = [];
             history.value[key] = [...history.value[key], ...res.data.message[key]];
+            if (!unread.value[key])
+              unread.value[key] = 0;
+            unread.value[key]+=res.data.message[key].length;
             LocalStorage.set('history', history.value)
-            if(!order.value) order.value = {};
+            if (!order.value) order.value = {};
             if (!(key in order.value)) order.value[key] = [];
             order.value[key] = res.data.message[key][0].time
             LocalStorage.set('order', order.value)
           }
-      })
+        })
   }
   setInterval(update, 500)
 
-  return { history,info,order,avatar,isMobile }
+  return {history, info, order, avatar, isMobile, unread}
   // state: () => ({
   //   history:{}
   // }),