refactor: fixed the problem that the scroll component could not remember the height

refactor: lint code
2024-05-03 17:03:46 +08:00 · 2024-05-03 17:03:28 +08:00 · 2024-05-03 00:48:49 +08:00 · 2024-05-02 14:24:23 +08:00 · 2024-05-02 03:29:04 +08:00 · 2024-05-02 00:01:41 +08:00
14 changed files with 235 additions and 415 deletions
--- a/README.md
+++ b/README.md
@@ -51,10 +51,18 @@ Github Pages: [https://dy.ttentau.top/](https://dy.ttentau.top/)
 ## 运行
 注意：本项目仅适用于学习和研究，不得用于商业使用

-### 快速部署至Vercel
+### 快速部署至 Vercel

 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)

+### 部署到 Docker
+```bash
+# pull Docker image
+docker pull ghcr.io/zyronon/douyin-vue:latest
+
+# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
+docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
+```
 ### 本地开发
 **注意：必须 git 命令 clone 下来才能运行，下载 zip 包是无法运行的。如果 clone 速度太慢，推荐使用 gitee 地址**

--- a/src/App.vue
+++ b/src/App.vue
@@ -78,14 +78,16 @@ onMounted(() => {
    location.href = BASE_URL + '/'
    setVh()
  })
-  //禁止选中文字
-  document.onselectstart = new Function('return false') as any
 })
 </script>

 <style lang="less">
@import './assets/less/index';

+* {
+  user-select: none;
+}
+
 #app {
  height: 100%;
  width: 100%;
--- a/src/assets/data/posts6.json
+++ b/src/assets/data/posts6.json
@@ -54,9 +54,7 @@
      },
      "cover": {
        "uri": "tos-cn-i-0813/oYVDeaFZyENAAAAKXCYfxD6hI4zADNAURgtySl",
-        "url_list": [
-          "jwWCPZVTIA4IKM-8WipLF.png"
-        ],
+        "url_list": ["jwWCPZVTIA4IKM-8WipLF.png"],
        "width": 720,
        "height": 720
      },
@@ -227,15 +225,11 @@
      "cover_url": [
        {
          "uri": "douyin-user-image-file/f2196ddaa37f3097932d8a29ff0d0ca5",
-          "url_list": [
-            "AiIEMkIA7Cb3s5c4e7e6g.png"
-          ]
+          "url_list": ["AiIEMkIA7Cb3s5c4e7e6g.png"]
        },
        {
          "uri": "c8510002be9a3a61aad2",
-          "url_list": [
-            "aHzLr77vcdBMUil15rXBa.png"
-          ]
+          "url_list": ["aHzLr77vcdBMUil15rXBa.png"]
        }
      ],
      "district": "",
@@ -258,9 +252,7 @@
        "share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
        "share_image_url": {
          "uri": "tos-cn-p-0015/oge0HBDnlBbbZHjeDc4WtAI7AA0xb88gd9Ipjc",
-          "url_list": [
-            "5jTb5yW0_50o6UaLR5hvo.png"
-          ]
+          "url_list": ["5jTb5yW0_50o6UaLR5hvo.png"]
        },
        "share_qrcode_url": {
          "uri": "216a001823018b74cedd",
@@ -283,15 +275,11 @@
      "white_cover_url": [
        {
          "uri": "douyin-user-image-file/f2196ddaa37f3097932d8a29ff0d0ca5",
-          "url_list": [
-            "N_SVO2HXIpaY04hgsXYDI.png"
-          ]
+          "url_list": ["N_SVO2HXIpaY04hgsXYDI.png"]
        },
        {
          "uri": "318f1000413827e122102",
-          "url_list": [
-            "Sfz4PgDDqyNYHkFyXub5g.png"
-          ]
+          "url_list": ["Sfz4PgDDqyNYHkFyXub5g.png"]
        }
      ]
    }
@@ -348,9 +336,7 @@
      },
      "cover": {
        "uri": "2071800047c9d7f961529",
-        "url_list": [
-          "_T0vQPZKXrNC6ulECmMes.png"
-        ],
+        "url_list": ["_T0vQPZKXrNC6ulECmMes.png"],
        "width": 720,
        "height": 720
      },
@@ -478,15 +464,11 @@
      "cover_url": [
        {
          "uri": "douyin-user-image-file/f0e0fa1c47be6c2eedb3bbc077b2e89b",
-          "url_list": [
-            "eTzFhGSTt3FN9Wu_SwYfJ.png"
-          ]
+          "url_list": ["eTzFhGSTt3FN9Wu_SwYfJ.png"]
        },
        {
          "uri": "c8510002be9a3a61aad2",
-          "url_list": [
-            "ycPju2wLo8QdUH3BhOHfP.png"
-          ]
+          "url_list": ["ycPju2wLo8QdUH3BhOHfP.png"]
        }
      ],
      "district": "",
@@ -509,9 +491,7 @@
        "share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
        "share_image_url": {
          "uri": "tos-cn-p-0015/oMYiIAfY7PDPW4RWABzAIB6KeiygIB7AVxhctZ",
-          "url_list": [
-            "yynTGOW4ukH0o6ivqStEd.png"
-          ]
+          "url_list": ["yynTGOW4ukH0o6ivqStEd.png"]
        },
        "share_qrcode_url": {
          "uri": "3306001c73315193d5b5",
@@ -534,15 +514,11 @@
      "white_cover_url": [
        {
          "uri": "douyin-user-image-file/f0e0fa1c47be6c2eedb3bbc077b2e89b",
-          "url_list": [
-            "3Lbs4vjci4a5PWPjuHqGO.png"
-          ]
+          "url_list": ["3Lbs4vjci4a5PWPjuHqGO.png"]
        },
        {
          "uri": "318f1000413827e122102",
-          "url_list": [
-            "2QCe-HDrBnJc06gcYCeTW.png"
-          ]
+          "url_list": ["2QCe-HDrBnJc06gcYCeTW.png"]
        }
      ]
    }
@@ -602,9 +578,7 @@
      },
      "cover": {
        "uri": "tos-cn-i-0813/oQKse1TDAG7fAI4EGEeLASDnAQEoABSnbJ2BvM",
-        "url_list": [
-          "NYLpBo9emIte6nynBBQNe.png"
-        ],
+        "url_list": ["NYLpBo9emIte6nynBBQNe.png"],
        "width": 720,
        "height": 720
      },
@@ -766,15 +740,11 @@
      "cover_url": [
        {
          "uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f",
-          "url_list": [
-            "2eFwyUS9yN8r7wJCXHUvb.png"
-          ]
+          "url_list": ["2eFwyUS9yN8r7wJCXHUvb.png"]
        },
        {
          "uri": "c8510002be9a3a61aad2",
-          "url_list": [
-            "0yrHnPaNjbwpkaPNo7s4x.png"
-          ]
+          "url_list": ["0yrHnPaNjbwpkaPNo7s4x.png"]
        }
      ],
      "district": "",
@@ -797,9 +767,7 @@
        "share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
        "share_image_url": {
          "uri": "tos-cn-p-0015/oceLdA0zALBI8CoyKiCfhU69IBlNq4RsbgzSAu",
-          "url_list": [
-            "qnOWDz5lUek2B1I5MPHa-.png"
-          ]
+          "url_list": ["qnOWDz5lUek2B1I5MPHa-.png"]
        },
        "share_qrcode_url": {
          "uri": "216a0023aa35c71d4381",
@@ -822,15 +790,11 @@
      "white_cover_url": [
        {
          "uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f",
-          "url_list": [
-            "ejF34o5i413UeROTNoYFI.png"
-          ]
+          "url_list": ["ejF34o5i413UeROTNoYFI.png"]
        },
        {
          "uri": "318f1000413827e122102",
-          "url_list": [
-            "x9tjnPkC-OscQ480dZZAR.png"
-          ]
+          "url_list": ["x9tjnPkC-OscQ480dZZAR.png"]
        }
      ]
    }
@@ -890,9 +854,7 @@
      },
      "cover": {
        "uri": "tos-cn-i-0813/oAgAlhXilAAJ6u5MAzCgDBGefASENIN9XA3lyP",
-        "url_list": [
-          "dRGIZeauclEl_diysOXxZ.png"
-        ],
+        "url_list": ["dRGIZeauclEl_diysOXxZ.png"],
        "width": 720,
        "height": 720
      },
@@ -1093,15 +1055,11 @@
      "cover_url": [
        {
          "uri": "douyin-user-image-file/fc185d55c7e3c95a57f88ef99f6c5a63",
-          "url_list": [
-            "GH2GQ_6U9XovU9wyhraHy.png"
-          ]
+          "url_list": ["GH2GQ_6U9XovU9wyhraHy.png"]
        },
        {
          "uri": "c8510002be9a3a61aad2",
-          "url_list": [
-            "Zd0yXNnpYUJtfs1PoJMQ2.png"
-          ]
+          "url_list": ["Zd0yXNnpYUJtfs1PoJMQ2.png"]
        }
      ],
      "district": null,
@@ -1124,9 +1082,7 @@
        "share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
        "share_image_url": {
          "uri": "tos-cn-p-0015/o0lXhVW8g4D9AIzIlnIX23ftAOAzNet3BcBpzK",
-          "url_list": [
-            "ZRRKVy4ShmXRvpIEPMYoa.png"
-          ]
+          "url_list": ["ZRRKVy4ShmXRvpIEPMYoa.png"]
        },
        "share_qrcode_url": {
          "uri": "6f940019bd6b1c90b090",
@@ -1149,15 +1105,11 @@
      "white_cover_url": [
        {
          "uri": "douyin-user-image-file/fc185d55c7e3c95a57f88ef99f6c5a63",
-          "url_list": [
-            "5mEqucAqJ1I440RfZH2t6.png"
-          ]
+          "url_list": ["5mEqucAqJ1I440RfZH2t6.png"]
        },
        {
          "uri": "318f1000413827e122102",
-          "url_list": [
-            "72skmrYgEr7JkUqAbch-Q.png"
-          ]
+          "url_list": ["72skmrYgEr7JkUqAbch-Q.png"]
        }
      ]
    }
@@ -1217,9 +1169,7 @@
      },
      "cover": {
        "uri": "tos-cn-p-0015/e468ce3333034b1db0c987b00f2b5af3",
-        "url_list": [
-          "od74MFuaQhZyh-PZyPN1S.png"
-        ],
+        "url_list": ["od74MFuaQhZyh-PZyPN1S.png"],
        "width": 720,
        "height": 720
      },
@@ -1355,15 +1305,11 @@
      "cover_url": [
        {
          "uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f",
-          "url_list": [
-            "2eFwyUS9yN8r7wJCXHUvb.png"
-          ]
+          "url_list": ["2eFwyUS9yN8r7wJCXHUvb.png"]
        },
        {
          "uri": "c8510002be9a3a61aad2",
-          "url_list": [
-            "0yrHnPaNjbwpkaPNo7s4x.png"
-          ]
+          "url_list": ["0yrHnPaNjbwpkaPNo7s4x.png"]
        }
      ],
      "district": "",
@@ -1386,9 +1332,7 @@
        "share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
        "share_image_url": {
          "uri": "tos-cn-p-0015/oceLdA0zALBI8CoyKiCfhU69IBlNq4RsbgzSAu",
-          "url_list": [
-            "qnOWDz5lUek2B1I5MPHa-.png"
-          ]
+          "url_list": ["qnOWDz5lUek2B1I5MPHa-.png"]
        },
        "share_qrcode_url": {
          "uri": "216a0023aa35c71d4381",
@@ -1411,15 +1355,11 @@
      "white_cover_url": [
        {
          "uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f",
-          "url_list": [
-            "ejF34o5i413UeROTNoYFI.png"
-          ]
+          "url_list": ["ejF34o5i413UeROTNoYFI.png"]
        },
        {
          "uri": "318f1000413827e122102",
-          "url_list": [
-            "x9tjnPkC-OscQ480dZZAR.png"
-          ]
+          "url_list": ["x9tjnPkC-OscQ480dZZAR.png"]
        }
      ]
    }
@@ -1479,9 +1419,7 @@
      },
      "cover": {
        "uri": "tos-cn-i-0813/5f0a61be754f42089db66c01854674bd",
-        "url_list": [
-          "Yo64h_V2GqTSG3CSkWOOY.png"
-        ],
+        "url_list": ["Yo64h_V2GqTSG3CSkWOOY.png"],
        "width": 720,
        "height": 720
      },
@@ -1654,15 +1592,11 @@
      "cover_url": [
        {
          "uri": "douyin-user-file/4eec4c18569133d5990381a62ba49327",
-          "url_list": [
-            "fmO_JqQD-ukKguwbdyoiL.png"
-          ]
+          "url_list": ["fmO_JqQD-ukKguwbdyoiL.png"]
        },
        {
          "uri": "c8510002be9a3a61aad2",
-          "url_list": [
-            "n3chqEY3p_JKnn2jSdd2b.png"
-          ]
+          "url_list": ["n3chqEY3p_JKnn2jSdd2b.png"]
        }
      ],
      "district": null,
@@ -1685,9 +1619,7 @@
        "share_desc": "长按复制此条消息，打开抖音搜索，查看TA的更多作品。",
        "share_image_url": {
          "uri": "tos-cn-p-0015/o80AiAzNXCD7yDQlX88bABg7YfimvUQ49SneAq",
-          "url_list": [
-            "vE3YDSQkYb_YZdfgDRZU8.png"
-          ]
+          "url_list": ["vE3YDSQkYb_YZdfgDRZU8.png"]
        },
        "share_qrcode_url": {
          "uri": "315100005802d9a7fc08a",
@@ -1710,15 +1642,11 @@
      "white_cover_url": [
        {
          "uri": "douyin-user-file/4eec4c18569133d5990381a62ba49327",
-          "url_list": [
-            "OvKvfthk8TXKeVpwEkQNq.png"
-          ]
+          "url_list": ["OvKvfthk8TXKeVpwEkQNq.png"]
        },
        {
          "uri": "318f1000413827e122102",
-          "url_list": [
-            "XIX6McGHe3ffHggOT8Rql.png"
-          ]
+          "url_list": ["XIX6McGHe3ffHggOT8Rql.png"]
        }
      ]
    }
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -51,7 +51,7 @@ export default {
    },
    radius: {
      type: String,
-      default: '3'
+      default: '6'
    }
  },
  data() {
@@ -159,9 +159,9 @@ export default {
  }

  &.white {
-    background: white;
+    background: white !important;
    color: black;
-    border: 1px solid gainsboro;
+    border: 1px solid gainsboro !important;
  }

  &.info {
--- a/src/components/NoMore.vue
+++ b/src/components/NoMore.vue
@@ -14,7 +14,7 @@ export default {
@import '../assets/less/index';

 .NoMore {
-  font-size: 12rem;
+  font-size: 13rem;
  height: 60rem;
  display: flex;
  align-items: center;
--- a/src/components/ScrollList.vue
+++ b/src/components/ScrollList.vue
@@ -1,5 +1,10 @@
 <template>
-  <Scroll :loading="state.loading" :full-loading="!state.list.length" @pulldown="loadData">
+  <Scroll
+    ref="scroll"
+    :loading="state.loading"
+    :full-loading="!state.list.length"
+    @pulldown="loadData"
+  >
    <slot :list="state.list"></slot>
    <NoMore v-if="state.total !== 0 && state.total === state.list.length" />
  </Scroll>
@@ -10,6 +15,7 @@ import { onMounted, reactive } from 'vue'
 import { _notice } from '@/utils'
 import Scroll from '@/components/Scroll.vue'
 import NoMore from '@/components/NoMore.vue'
+import { useScroll } from '@/utils/hooks/useScroll.ts'

 const props = defineProps({
  api: {
@@ -19,6 +25,7 @@ const props = defineProps({
    }
  }
 })
+const scroll = useScroll()

 const state = reactive({
  list: [],
--- a/src/pages/home/slide/LongVideo.vue
+++ b/src/pages/home/slide/LongVideo.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { reactive, ref, watch } from 'vue'
 import { _checkImgUrl, _duration, _formatNumber, _stopPropagation } from '@/utils'
-import { recommendedLongVideo, recommendedVideo } from '@/api/videos'
+import { recommendedLongVideo } from '@/api/videos'
 import ScrollList from '@/components/ScrollList.vue'
 import { useNav } from '@/utils/hooks/useNav'

--- a/src/pages/me/RequestUpdate.vue
+++ b/src/pages/me/RequestUpdate.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="RequestUpdate" id="RequestUpdate">
-    <BaseHeader>
+    <BaseHeader :is-fixed="false">
      <template v-slot:center>
        <span class="f16">求更新</span>
      </template>
@@ -112,9 +112,13 @@ function toggleRequestUpdate() {
  overflow: auto;
  color: white;
  font-size: 14rem;
+  display: flex;
+  flex-direction: column;

  .content {
-    padding: 60rem 15rem 60rem 15rem;
+    flex: 1;
+    overflow: auto;
+    padding: 15rem 15rem 60rem 15rem;

    .none {
      display: flex;
--- a/src/pages/message/AllMessage.vue
+++ b/src/pages/message/AllMessage.vue
@@ -1,6 +1,6 @@
 <template>
  <div id="AllMessage">
-    <BaseHeader>
+    <BaseHeader :is-fixed="false">
      <template v-slot:center>
        <div class="center" @click="data.isShowType = !data.isShowType">
          <span class="f16">{{ showTypeText }}</span>
@@ -43,112 +43,42 @@
        <div class="mask" @click="data.isShowType = false"></div>
      </div>
    </transition>
-    <div class="content">
-      <Loading v-if="data.loading" />
-      <Scroll
-        v-else
-        ref="mainScroll"
-        :use-refresh="true"
-        :loading="data.loadingMore"
-        @refresh="refresh"
-        @pulldown="loadData"
-      >
-        <div class="messages">
-          <div class="message" @click="nav('/message/visitors')">
-            <div class="left">
-              <img
-                v-lazy="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])"
-                alt=""
-                class="avatar"
-              />
-            </div>
-            <div class="right">
-              <div class="desc">
-                <div class="top">
-                  <div class="name">主页访客</div>
-                </div>
-                <div class="desc-content">4人最近访问了你的主页，看看他们是谁</div>
-                <div class="bottom">
-                  <div class="time">01-11</div>
-                </div>
-              </div>
-              <img
-                v-lazy="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])"
-                alt=""
-                class="poster"
-              />
-            </div>
+    <Scroll ref="mainScroll">
+      <div class="messages">
+        <div
+          class="message"
+          v-for="(item, i) in store.friends.all"
+          :key="i"
+          @click="nav('/message/visitors')"
+        >
+          <div class="left">
+            <img v-lazy="_checkImgUrl(item.avatar)" alt="" class="avatar" />
          </div>
-          <div class="message" :key="i" v-for="(item, i) in showMessageList" @click="_no">
-            <div class="left">
-              <img v-lazy="_checkImgUrl(item.author.avatar)" alt="" class="avatar" />
-              <img
-                v-if="data.selectShowType === 2"
-                src="@/assets/img/icon/message/love-message.webp"
-                alt=""
-                class="type"
-              />
-              <img
-                v-if="data.selectShowType === 3"
-                src="@/assets/img/icon/message/call-message.webp"
-                alt=""
-                class="type"
-              />
-              <img
-                v-if="data.selectShowType === 4"
-                src="@/assets/img/icon/message/comment-message.webp"
-                alt=""
-                class="type"
-              />
-            </div>
-            <div class="right">
-              <div class="desc">
-                <div class="top">
-                  <div class="name">{{ item.author.nickname }}</div>
-                  <div class="tag">朋友</div>
-                </div>
-                <div class="desc-content">
-                  <span v-if="data.selectShowType === 1">好好看啊</span>
-                  <span v-if="data.selectShowType === 2">赞了你的作品</span>
-                  <span v-if="data.selectShowType === 3">@{{ store.userinfo.nickname }}</span>
-                  <span v-if="data.selectShowType === 4">好好看啊</span>
-                </div>
-                <div class="bottom">
-                  <div class="type" v-if="data.selectShowType === 3">在评论中提到了你</div>
-                  <div class="type" v-if="data.selectShowType === 4">回复了你的评论</div>
-                  <div class="time">01-11</div>
-                </div>
+          <div class="right">
+            <div class="desc">
+              <div class="name">{{ item.name }}</div>
+              <div class="bottom">
+                <div class="desc-content">近期访问过你的主页</div>
+                <div class="time">01-11</div>
              </div>
-              <img
-                v-lazy="_checkImgUrl(item.video + '?vframe/jpg/offset/0/w/300')"
-                alt=""
-                class="poster"
-              />
            </div>
-          </div>
-          <div class="look-all" v-if="!data.showAll" @click="data.showAll = true">
-            <span>查看全部</span>
-            <dy-back />
+            <img
+              v-lazy="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])"
+              alt=""
+              class="poster"
+            />
          </div>
        </div>
-        <div class="title">
-          <span>朋友推荐</span>
-          <img src="@/assets/img/icon/about-gray.png" alt="" />
-        </div>
-        <Peoples v-model:list="data.recommend" :loading="data.loadingMore" mode="recommend" />
-      </Scroll>
-    </div>
+      </div>
+    </Scroll>
  </div>
 </template>
 <script setup lang="ts">
 import Scroll from '@/components/Scroll.vue'
-import Loading from '@/components/Loading.vue'
-import Peoples from '../people/components/Peoples.vue'
-import resource from '@/assets/data/resource.js'
 import { useBaseStore } from '@/store/pinia'
-import { _checkImgUrl, _no, _sleep, cloneDeep } from '@/utils'
+import { _checkImgUrl } from '@/utils'

-import { computed, onMounted, reactive } from 'vue'
+import { computed, reactive } from 'vue'
 import { useNav } from '@/utils/hooks/useNav.js'

 defineOptions({
@@ -158,20 +88,10 @@ defineOptions({
 const store = useBaseStore()
 const nav = useNav()
 const data = reactive({
-  loading: false,
-  loadingMore: false,
  isShowType: false,
-  showAll: false,
-  recommend: [],
-  fans: [],
-  messages: [],
  selectShowType: 1
 })

-onMounted(() => {
-  getData()
-})
-
 const showTypeText = computed(() => {
  switch (data.selectShowType) {
    case 1:
@@ -187,52 +107,10 @@ const showTypeText = computed(() => {
  }
 })

-const showMessageList = computed(() => {
-  if (data.showAll) {
-    return data.messages
-  }
-  return data.messages.slice(0, 2)
-})
-
-async function getData() {
-  data.loading = true
-  await _sleep(800)
-  data.loading = false
-  data.recommend = cloneDeep(store.friends.all)
-  data.fans = cloneDeep(store.friends.all)
-  data.recommend.map((v) => {
-    v.type = -1
-  })
-  data.messages = cloneDeep(resource.videos)
-}
-
 function toggleShowType(index) {
  data.selectShowType = index
  data.isShowType = false
 }
-
-// function remove(index) {
-//   _notice('将不会再为你推荐该用户')
-//   data.recommend.splice(index, 1)
-// }
-
-async function refresh() {
-  await _sleep(1000)
-  //TODO
-  // data.$refs.mainScroll.refreshEnd()
-}
-
-async function loadData() {
-  if (data.loadingMore) return
-  data.loadingMore = true
-  await _sleep(500)
-  data.loadingMore = false
-  let temp = cloneDeep(store.friends.all)
-  temp.map((v) => {
-    v.type = -1
-  })
-  data.recommend = data.recommend.concat(temp)
-}
 </script>

 <style scoped lang="less">
@@ -242,9 +120,12 @@ async function loadData() {
  right: 0;
  bottom: 0;
  top: 0;
+  background: var(--color-message);
  overflow: auto;
  color: white;
  font-size: 14rem;
+  display: flex;
+  flex-direction: column;

  .center {
    display: flex;
@@ -254,6 +135,7 @@ async function loadData() {
      width: 15rem;
      transform: rotate(180deg);
      transition: all 0.3s;
+      margin-left: 3rem;
    }

    .show {
@@ -269,10 +151,12 @@ async function loadData() {
    margin-top: var(--common-header-height);

    .dialog-content {
-      background: var(--main-bg);
+      border-radius: 0 0 4rem 4rem;
+      background: var(--color-message);
+      overflow: hidden;

      img {
-        width: 16rem;
+        width: 18rem;
      }
    }

@@ -285,121 +169,82 @@ async function loadData() {
    }
  }

-  .content {
-    padding: 0 var(--page-padding);
-    padding-top: var(--common-header-height);
+  .scroll {
+    flex: 1;
+    padding: 0 10rem;
+  }

-    .scroll {
-      height: calc(var(--vh, 1vh) * 100 - var(--common-header-height));
-    }
-
-    .messages {
-      .message {
-        margin-bottom: 20rem;
-        display: flex;
-
-        &:first-child {
-          margin-top: 20rem;
-        }
-
-        .left {
-          display: flex;
-          align-items: center;
-          position: relative;
-
-          .avatar {
-            width: 48rem;
-            height: 48rem;
-            border-radius: 50%;
-          }
-
-          .type {
-            position: absolute;
-            right: 0;
-            bottom: 10rem;
-            width: 17rem;
-            padding: 2.5rem;
-            border-radius: 50%;
-            background: black;
-          }
-
-          margin-right: 10rem;
-        }
-
-        .right {
-          flex: 1;
-          display: flex;
-          justify-content: space-between;
-
-          .desc {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-
-            .top {
-              //margin-bottom: 10rem;
-              display: flex;
-              align-items: center;
-
-              .tag {
-                color: var(--second-text-color);
-                padding: 1rem 4rem;
-                margin-left: 10rem;
-                border-radius: 2rem;
-                background: var(--second-btn-color-tran);
-                font-size: 10rem;
-              }
-            }
-
-            .bottom {
-              //margin-top: 10rem;
-              display: flex;
-              align-items: center;
-              font-size: 12rem;
-              color: var(--second-text-color);
-
-              .type {
-                margin-right: 10rem;
-              }
-            }
-          }
-
-          .poster {
-            margin-left: 10rem;
-            width: 64rem;
-            height: 64rem;
-            object-fit: cover;
-            border-radius: 3rem;
-          }
-        }
-      }
-
-      .look-all {
-        font-size: 12rem;
-        color: var(--second-text-color);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .close {
-          margin-left: 10rem;
-          transform: rotate(270deg) !important;
-          width: 12rem;
-          height: 12rem;
-        }
-      }
-    }
-
-    .title {
-      margin-top: 15rem;
-      margin-bottom: 10rem;
-      font-size: 12rem;
+  .messages {
+    .message {
+      margin-bottom: 20rem;
      display: flex;
+      gap: 10rem;
+
+      &:first-child {
+        margin-top: 20rem;
+      }
+
+      .left {
+        display: flex;
+        align-items: center;
+        position: relative;
+
+        .avatar {
+          width: 58rem;
+          height: 58rem;
+          border-radius: 50%;
+        }
+      }
+
+      .right {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+
+        .desc {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          gap: 5rem;
+          color: white;
+          font-size: 16rem;
+
+          .bottom {
+            display: flex;
+            align-items: center;
+            font-size: 13rem;
+            color: lightgrey;
+
+            .time {
+              font-size: 12rem;
+              margin-left: 10rem;
+              color: var(--second-text-color);
+            }
+          }
+        }
+
+        .poster {
+          margin-left: 10rem;
+          width: 58rem;
+          height: 70rem;
+          object-fit: cover;
+          border-radius: 3rem;
+        }
+      }
+    }
+
+    .look-all {
+      font-size: 12rem;
+      color: var(--second-text-color);
+      display: flex;
+      justify-content: center;
      align-items: center;

-      img {
-        margin-left: 5rem;
-        width: 13rem;
+      .close {
+        margin-left: 10rem;
+        transform: rotate(270deg) !important;
+        width: 12rem;
+        height: 12rem;
      }
    }
  }
--- a/src/pages/message/Fans.vue
+++ b/src/pages/message/Fans.vue
@@ -81,6 +81,7 @@ onMounted(getData)
  bottom: 0;
  top: 0;
  overflow: auto;
+  background: var(--color-message);
  color: white;
  font-size: 14rem;

--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -8,9 +8,9 @@
      </header>

      <Scroll ref="mainScroll">
-        <div class="friends pl1r">
+        <div class="friends">
          <div
-            class="friend pr1r pl1r"
+            class="friend"
            @click="nav('/message/chat')"
            :key="index"
            v-for="(item, index) in store.friends.all"
@@ -20,12 +20,13 @@
            </div>
            <span>{{ item.name }}</span>
          </div>
-          <div class="friend pr10p">
-            <img src="../../assets/img/icon/message/setting.png" alt="" />
-            <span class="ml1r">状态设置</span>
+          <div class="friend">
+            <div class="avatar">
+              <img src="../../assets/img/icon/message/setting.png" alt="" />
+            </div>
+            <span>状态设置</span>
          </div>
        </div>
-        <div class="line mt2r"></div>
        <div class="messages">
          <!--      粉丝-->
          <div class="message" @click="nav('/message/fans')">
@@ -54,7 +55,7 @@
                <div class="name">
                  <span>互动消息</span>
                </div>
-                <div class="detail">xxx 赞了你的评论</div>
+                <div class="detail">xxx 近期访问过你的主页</div>
              </div>
              <div class="right">
                <dy-back class="arrow" mode="gray" img="back" direction="right" />
@@ -433,11 +434,13 @@ import { useBaseStore } from '@/store/pinia'
 import { computed, onMounted, reactive, watch } from 'vue'
 import { useNav } from '@/utils/hooks/useNav.js'
 import { _checkImgUrl, _sleep, cloneDeep } from '@/utils'
+import { useScroll } from '@/utils/hooks/useScroll'

 defineOptions({
  name: 'Message'
 })

+const mainScroll = useScroll()
 const store = useBaseStore()
 const nav = useNav()
 const data = reactive({
@@ -521,6 +524,8 @@ async function loadRecommendData() {

  .no-search {
    height: calc(var(--vh, 1vh) * 100);
+    display: flex;
+    flex-direction: column;

    > header {
      padding: 0 20rem;
@@ -772,36 +777,48 @@ async function loadRecommendData() {
    }

    .scroll {
-      height: calc(100% - var(--common-header-height) - var(--footer-height));
+      flex: 1;
      padding-top: 10rem;
+      padding-bottom: var(--footer-height);
    }

    .friends {
      overflow-x: scroll;
      display: flex;
      font-size: 14rem;
+      padding: 0 10rem;
+      gap: 20rem;

      .friend {
+        @width: 70rem;
+        width: @width;
+        min-width: @width;
+
        &:nth-last-child(1) {
-          img {
-            margin: 0 10rem;
-            padding: 17rem;
-            background: var(--second-btn-color-tran);
-            width: 30rem;
-            height: 30rem;
+          .avatar {
+            height: @width;
            border-radius: 50%;
-            margin-bottom: 6rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: var(--second-btn-color-tran);
+            margin-bottom: 10rem;
+
+            img {
+              width: 35rem;
+              height: 35rem;
+            }
          }
        }

        .avatar {
          position: relative;
          margin-bottom: 6rem;
+          width: 100%;

          img {
-            @width: 64rem;
-            width: @width;
-            height: @width;
+            width: 100%;
+            height: 100%;
            border-radius: 50%;
          }

@@ -821,7 +838,7 @@ async function loadRecommendData() {
        span {
          width: 64rem;
          font-size: 12rem;
-          color: lightgray;
+          color: white;
          display: block;
          text-align: center;
          word-break: break-all;
@@ -833,6 +850,8 @@ async function loadRecommendData() {
    }

    .messages {
+      margin-top: 20rem;
+
      .message {
        display: flex;
        align-items: center;
@@ -874,12 +893,12 @@ async function loadRecommendData() {
          flex: 1;
          display: flex;
          justify-content: space-between;
-          @padding: 14rem;
+          @padding: 16rem;
          padding: @padding 0 @padding 0;

          .left {
            .name {
-              font-size: 14rem;
+              font-size: 16rem;
              color: white;
              display: flex;
              align-items: flex-start;
@@ -896,7 +915,7 @@ async function loadRecommendData() {

            .detail {
              color: var(--second-text-color);
-              font-size: 12rem;
+              font-size: 14rem;
              margin-top: 4rem;
              display: flex;
              align-items: center;
--- a/src/pages/message/notice/SystemNotice.vue
+++ b/src/pages/message/notice/SystemNotice.vue
@@ -68,11 +68,13 @@ import { nextTick, onMounted, reactive, watch } from 'vue'
 import Scroll from '@/components/Scroll.vue'
 import { useNav } from '@/utils/hooks/useNav.js'
 import { _no, _sleep } from '@/utils'
+import { useScroll } from '@/utils/hooks/useScroll'

 defineOptions({
  name: 'SystemNotice'
 })

+const mainScroll = useScroll()
 const nav = useNav()
 const data = reactive({
  loading: false,
--- a/src/utils/hooks/useBase.ts
+++ b/src/utils/hooks/useBase.ts
@@ -1,13 +0,0 @@
-import { onActivated, onDeactivated } from 'vue'
-
-export function useBase() {
-  const mainScroll = $ref()
-  const mainScrollTop = $ref(0)
-  onActivated(() => {
-    console.log('onActivated')
-  })
-
-  onDeactivated(() => {
-    console.log('onDeactivated')
-  })
-}
--- a/src/utils/hooks/useScroll.ts
+++ b/src/utils/hooks/useScroll.ts
@@ -0,0 +1,17 @@
+import { onActivated, onDeactivated, ref } from 'vue'
+
+export function useScroll() {
+  const mainScroll = ref()
+  let mainScrollTop = $ref(0)
+  onActivated(() => {
+    if (mainScroll.value && mainScroll.value.wrapper) {
+      mainScroll.value.wrapper.scrollTop = mainScrollTop
+    }
+  })
+  onDeactivated(() => {
+    if (mainScroll.value && mainScroll.value.wrapper) {
+      mainScrollTop = mainScroll.value.wrapper.scrollTop
+    }
+  })
+  return mainScroll
+}
Author	SHA1	Message	Date
zyronon	eff3277513	refactor: fixed the problem that the scroll component could not remember the height	2024-05-03 17:03:46 +08:00
zyronon	d2b532a760	refactor: fixed the problem that the scroll component could not remember the height	2024-05-03 17:03:28 +08:00
zyronon	de415aeafa	refactor: lint code	2024-05-03 00:48:49 +08:00
Zyronon	af2809ec73	Merge pull request #75 from Zihan-Hu/master refactor: use CSS to prevent selecting	2024-05-02 14:24:23 +08:00
zyronon	2545739964	docs: update README.md	2024-05-02 03:29:04 +08:00
Zihan Hu	64332a93dd	refactor: use CSS to prevent selecting	2024-05-02 00:01:41 +08:00