From c37455ca59dd6c6aa1067b7cf9bc8aaf185ad12e Mon Sep 17 00:00:00 2001
From: tim <nagisa12164@163.com>
Date: Thu, 3 Jul 2025 18:58:14 +0800
Subject: [PATCH] feat: update pageview

---
 open-isle-cli/src/views/PostPageView.vue | 186 +++++++++++++----------
 1 file changed, 103 insertions(+), 83 deletions(-)

diff --git a/open-isle-cli/src/views/PostPageView.vue b/open-isle-cli/src/views/PostPageView.vue
index c7e6f1dea..7d5ea1b76 100644
--- a/open-isle-cli/src/views/PostPageView.vue
+++ b/open-isle-cli/src/views/PostPageView.vue
@@ -1,100 +1,54 @@
 <template>
-  <div class="post-page">
-    <div class="article-title-container">
-      <div class="article-title">请不要把互联网上的戾气带来这里！</div>
-      <div class="article-info-container">
-        <div class="article-info-item">
-          <i class="fas fa-user"></i>
-          <div class="article-info-item-text">开发调优</div>
-        </div>
-
-        <div class="article-tags-container">
-          <div class="article-tag-item" v-for="tag in tags" :key="tag">
-            <i class="fas fa-tag"></i>
-            <div class="article-tag-item-text">{{ tag }}</div>
+  <div class="post-page-container">
+    <div class="post-page-main-container">
+      <div class="article-title-container">
+        <div class="article-title">请不要把互联网上的戾气带来这里！</div>
+        <div class="article-info-container">
+          <div class="article-info-item">
+            <i class="fas fa-user"></i>
+            <div class="article-info-item-text">开发调优</div>
           </div>
-        </div>
-      </div>
-    </div>
 
-    <div class="info-content-container">
-      <div class="user-avatar-container">
-        <div class="user-avatar-item">
-          <img class="user-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-        </div>
-      </div>
-
-      <div class="info-content">
-        <div class="info-content-header">
-          <div class="user-name">Nagisa77</div>
-          <div class="post-time">3月10日</div>
-        </div>
-        <div class="info-content-text">
-          是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。
-
-          但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另一个可以随意发泄情绪的地方！甚至试图占领舆论高地，把这里堂而皇之地变成另一个垃圾场。
-
-          这是要万分警惕和坚决予以打击的！L站的愿景是成为新的理想型社区，让每一个一身疲惫的佬友在这里得到放松。哪怕有一刻放松手中攥紧的武器，徜徉在和谐的氛围中得到喘息和治愈。
-
-          我和管理们都始终坚定这一点，丝毫不会放松！千里之堤溃于蚁穴，如果任由戾气蔓延，争端四起，最终这里的愿景将会完全破产。所以有病要医，不是同路人不必强行融合。任何把戾气带来这里，试图在这里建立另一个互联网垃圾场的人都是不受欢迎的，都要被驱逐出社区。
-
-          请好好说话，友善交流！我们完全支持、鼓励友好交流分享，每个人都可以。键盘是你与人交流分享、互通有无的桥梁，不只是你谋取私利的工具，更不是肆意挥舞用来攻击的武器。
-
-          自本公告发布之日起，我们将严肃处理以下3类发言：
-
-          傲慢轻蔑回复。
-          阴阳怪气回复。
-          攻击谩骂回复。
-          如有以上发言，我们将视言论破坏程度采取但不限于：删帖、临时封禁、永久封禁等举措。请各位佬友帮忙积极监督，感谢你们为共建美好社区做出的贡献！请一定一定不要把互联网上的戾气带来这里，这里就要做不一样。
-
-          持续时间至最后一个不会好好说话的账号持有者被请出社区为止。
-        </div>
-
-        <div class="article-footer-container">
-          <div class="reactions-container">
-            <div class="reactions-viewer">
-              <div class="reactions-viewer-item-container">
-                <div class="reactions-viewer-item">
-                  🤣
-                </div>
-                <div class="reactions-viewer-item">
-                  ❤️
-                </div>
-                <div class="reactions-viewer-item">
-                  👏
-                </div>
-              </div>
-              <div class="reactions-count">1882</div>
-            </div>
-
-            <div class="make-reaction-container">
-              <div class="make-reaction-item like-reaction">
-                <i class="far fa-heart"></i>
-              </div>
-              <div class="make-reaction-item copy-link">
-                <i class="fas fa-link"></i>
-              </div>
+          <div class="article-tags-container">
+            <div class="article-tag-item" v-for="tag in tags" :key="tag">
+              <i class="fas fa-tag"></i>
+              <div class="article-tag-item-text">{{ tag }}</div>
             </div>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="comments-container">
-      <div class="info-content-container" v-for="comment in comments" :key="comment.id">
+      <div class="info-content-container">
         <div class="user-avatar-container">
           <div class="user-avatar-item">
-            <img class="user-avatar-item-img" :src="comment.avatar" alt="avatar">
+            <img class="user-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
           </div>
         </div>
 
         <div class="info-content">
           <div class="info-content-header">
-            <div class="user-name">{{ comment.userName }}</div>
-            <div class="post-time">{{ comment.time }}</div>
+            <div class="user-name">Nagisa77</div>
+            <div class="post-time">3月10日</div>
           </div>
           <div class="info-content-text">
-            {{ comment.text }}
+            是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。
+
+            但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另一个可以随意发泄情绪的地方！甚至试图占领舆论高地，把这里堂而皇之地变成另一个垃圾场。
+
+            这是要万分警惕和坚决予以打击的！L站的愿景是成为新的理想型社区，让每一个一身疲惫的佬友在这里得到放松。哪怕有一刻放松手中攥紧的武器，徜徉在和谐的氛围中得到喘息和治愈。
+
+            我和管理们都始终坚定这一点，丝毫不会放松！千里之堤溃于蚁穴，如果任由戾气蔓延，争端四起，最终这里的愿景将会完全破产。所以有病要医，不是同路人不必强行融合。任何把戾气带来这里，试图在这里建立另一个互联网垃圾场的人都是不受欢迎的，都要被驱逐出社区。
+
+            请好好说话，友善交流！我们完全支持、鼓励友好交流分享，每个人都可以。键盘是你与人交流分享、互通有无的桥梁，不只是你谋取私利的工具，更不是肆意挥舞用来攻击的武器。
+
+            自本公告发布之日起，我们将严肃处理以下3类发言：
+
+            傲慢轻蔑回复。
+            阴阳怪气回复。
+            攻击谩骂回复。
+            如有以上发言，我们将视言论破坏程度采取但不限于：删帖、临时封禁、永久封禁等举措。请各位佬友帮忙积极监督，感谢你们为共建美好社区做出的贡献！请一定一定不要把互联网上的戾气带来这里，这里就要做不一样。
+
+            持续时间至最后一个不会好好说话的账号持有者被请出社区为止。
           </div>
 
           <div class="article-footer-container">
@@ -126,6 +80,58 @@
           </div>
         </div>
       </div>
+
+      <div class="comments-container">
+        <div class="info-content-container" v-for="comment in comments" :key="comment.id">
+          <div class="user-avatar-container">
+            <div class="user-avatar-item">
+              <img class="user-avatar-item-img" :src="comment.avatar" alt="avatar">
+            </div>
+          </div>
+
+          <div class="info-content">
+            <div class="info-content-header">
+              <div class="user-name">{{ comment.userName }}</div>
+              <div class="post-time">{{ comment.time }}</div>
+            </div>
+            <div class="info-content-text">
+              {{ comment.text }}
+            </div>
+
+            <div class="article-footer-container">
+              <div class="reactions-container">
+                <div class="reactions-viewer">
+                  <div class="reactions-viewer-item-container">
+                    <div class="reactions-viewer-item">
+                      🤣
+                    </div>
+                    <div class="reactions-viewer-item">
+                      ❤️
+                    </div>
+                    <div class="reactions-viewer-item">
+                      👏
+                    </div>
+                  </div>
+                  <div class="reactions-count">1882</div>
+                </div>
+
+                <div class="make-reaction-container">
+                  <div class="make-reaction-item like-reaction">
+                    <i class="far fa-heart"></i>
+                  </div>
+                  <div class="make-reaction-item copy-link">
+                    <i class="fas fa-link"></i>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="post-page-scroller-container">
+      scroller
     </div>
   </div>
 </template>
@@ -188,10 +194,24 @@ export default {
 </script>
 
 <style scoped>
-.post-page {
-  padding: 20px;
+.post-page-container {
+  display: flex;
+  flex-direction: row;
+  height: calc(100vh - var(--header-height));
+}
+
+.post-page-main-container {
   overflow-y: auto;
-  height: calc(100vh - var(--header-height) - 40px);
+  padding: 20px;
+  height: calc(100% - 40px);
+  width: calc(85% - 40px);
+}
+
+.post-page-scroller-container {
+  overflow-y: auto;
+  height: 100%;
+  width: 15%;
+  background-color: #f0f0f0;
 }
 
 .article-title-container {