From 92756acd4014e8567d3fe83ee7b49657086e5550 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Thu, 3 Jul 2025 16:51:17 +0800
Subject: [PATCH] Use arrays for post and home views

---
 open-isle-cli/src/views/HomePageView.vue | 370 +++++++----------------
 open-isle-cli/src/views/PostPageView.vue | 319 ++++---------------
 2 files changed, 177 insertions(+), 512 deletions(-)

diff --git a/open-isle-cli/src/views/HomePageView.vue b/open-isle-cli/src/views/HomePageView.vue
index a3306d8d9..ad5420b88 100644
--- a/open-isle-cli/src/views/HomePageView.vue
+++ b/open-isle-cli/src/views/HomePageView.vue
@@ -10,295 +10,155 @@
     </div>
 
 
-    <div class="topic-container">
+  <div class="topic-container">
       <div class="topic-item-container">
-        <div class="topic-item selected">最新</div>
-        <div class="topic-item">排行榜</div>
-        <div class="topic-item">热门</div>
-        <div class="topic-item">类别</div> 
+        <div
+          v-for="topic in topics"
+          :key="topic"
+          class="topic-item"
+          :class="{ selected: topic === selectedTopic }"
+        >
+          {{ topic }}
+        </div>
       </div>
     </div>
 
-
     <div class="article-container">
-      <div class="article-item">
+      <div
+        class="article-item"
+        v-for="article in articles"
+        :key="article.id"
+      >
         <div class="article-main-container">
-          <router-link class="article-item-title" to="/posts/1">各位佬，科研项目python语言适合什么ai编程？</router-link>
-          <div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
+          <router-link
+            class="article-item-title"
+            :to="`/posts/${article.id}`"
+          >
+            {{ article.title }}
+          </router-link>
+          <div class="article-item-description">{{ article.description }}</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 class="article-info-item-text">{{ article.category }}</div>
             </div>
 
             <div class="article-tags-container">
-              <div class="article-tag-item">
+              <div
+                class="article-tag-item"
+                v-for="tag in article.tags"
+                :key="tag"
+              >
                 <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">AI</div>
-              </div>
-              <div class="article-tag-item">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">Python</div>
-              </div>
-              <div class="article-tag-item">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">Java</div>
+                <div class="article-tag-item-text">{{ tag }}</div>
               </div>
             </div>
           </div>
         </div>
 
         <div class="article-member-avatars-container">
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div> 
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
+          <div
+            class="article-member-avatar-item"
+            v-for="(avatar, idx) in article.members"
+            :key="idx"
+          >
+            <img
+              class="article-member-avatar-item-img"
+              :src="avatar"
+              alt="avatar"
+            >
           </div>
         </div>
         <div class="article-comments">
-          139
+          {{ article.comments }}
         </div>
         <div class="article-views">
-          2.4k
+          {{ article.views }}
         </div>
         <div class="article-time">
-          23小时前
+          {{ article.time }}
         </div>
       </div>
+    </div>
 
-      <div class="article-item">
-        <div class="article-main-container">
-          <div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
-          <div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </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">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">AI</div>
-              </div>
-              <div class="article-tag-item">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">Python</div>
-              </div>
-              <div class="article-tag-item">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">Java</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="article-member-avatars-container">
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div> 
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-        </div>
-        <div class="article-comments">
-          139
-        </div>
-        <div class="article-views">
-          2.4k
-        </div>
-        <div class="article-time">
-          23小时前
-        </div>
-      </div>
-      <div class="article-item">
-        <div class="article-main-container">
-          <div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
-          <div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </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">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">AI</div>
-              </div>
-              <div class="article-tag-item">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">Python</div>
-              </div>
-              <div class="article-tag-item">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">Java</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="article-member-avatars-container">
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div> 
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-        </div>
-        <div class="article-comments">
-          139
-        </div>
-        <div class="article-views">
-          2.4k
-        </div>
-        <div class="article-time">
-          23小时前
-        </div>
-      </div>
-      <div class="article-item">
-        <div class="article-main-container">
-          <div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
-          <div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </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">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">AI</div>
-              </div>
-              <div class="article-tag-item">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">Python</div>
-              </div>
-              <div class="article-tag-item">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">Java</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="article-member-avatars-container">
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div> 
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-        </div>
-        <div class="article-comments">
-          139
-        </div>
-        <div class="article-views">
-          2.4k
-        </div>
-        <div class="article-time">
-          23小时前
-        </div>
-      </div>
-      <div class="article-item">
-        <div class="article-main-container">
-          <div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
-          <div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </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">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">AI</div>
-              </div>
-              <div class="article-tag-item">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">Python</div>
-              </div>
-              <div class="article-tag-item">
-                <i class="fas fa-tag"></i>
-                <div class="article-tag-item-text">Java</div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="article-member-avatars-container">
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div> 
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-          <div class="article-member-avatar-item">
-            <img class="article-member-avatar-item-img" src="https://picsum.photos/200/200" alt="avatar">
-          </div>
-        </div>
-        <div class="article-comments">
-          139
-        </div>
-        <div class="article-views">
-          2.4k
-        </div>
-        <div class="article-time">
-          23小时前
-        </div>
-      </div>
-    </div> 
   </div>
 </template>
 
 <script>
+import { ref } from 'vue'
+
 export default {
-  name: 'HomePageView'
+  name: 'HomePageView',
+  setup() {
+    const topics = ref(['最新', '排行榜', '热门', '类别'])
+    const selectedTopic = ref('最新')
+
+    const baseAvatar = 'https://picsum.photos/200/200'
+    const articles = ref([
+      {
+        id: 1,
+        title: '各位佬，科研项目python语言适合什么ai编程？',
+        description:
+          '是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多',
+        category: '开发调优',
+        tags: ['AI', 'Python', 'Java'],
+        members: Array(5).fill(baseAvatar),
+        comments: 139,
+        views: '2.4k',
+        time: '23小时前'
+      },
+      {
+        id: 2,
+        title: '各位佬，科研项目python语言适合什么ai编程？',
+        description:
+          '是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多',
+        category: '开发调优',
+        tags: ['AI', 'Python', 'Java'],
+        members: Array(5).fill(baseAvatar),
+        comments: 139,
+        views: '2.4k',
+        time: '23小时前'
+      },
+      {
+        id: 3,
+        title: '各位佬，科研项目python语言适合什么ai编程？',
+        description:
+          '是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多',
+        category: '开发调优',
+        tags: ['AI', 'Python', 'Java'],
+        members: Array(5).fill(baseAvatar),
+        comments: 139,
+        views: '2.4k',
+        time: '23小时前'
+      },
+      {
+        id: 4,
+        title: '各位佬，科研项目python语言适合什么ai编程？',
+        description:
+          '是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多',
+        category: '开发调优',
+        tags: ['AI', 'Python', 'Java'],
+        members: Array(5).fill(baseAvatar),
+        comments: 139,
+        views: '2.4k',
+        time: '23小时前'
+      },
+      {
+        id: 5,
+        title: '各位佬，科研项目python语言适合什么ai编程？',
+        description:
+          '是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多',
+        category: '开发调优',
+        tags: ['AI', 'Python', 'Java'],
+        members: Array(5).fill(baseAvatar),
+        comments: 139,
+        views: '2.4k',
+        time: '23小时前'
+      }
+    ])
+
+    return { topics, selectedTopic, articles }
+  }
 }
 </script>
 
diff --git a/open-isle-cli/src/views/PostPageView.vue b/open-isle-cli/src/views/PostPageView.vue
index f0026043e..8e4030a1d 100644
--- a/open-isle-cli/src/views/PostPageView.vue
+++ b/open-isle-cli/src/views/PostPageView.vue
@@ -9,17 +9,13 @@
         </div>
 
         <div class="article-tags-container">
-          <div class="article-tag-item">
+          <div
+            class="article-tag-item"
+            v-for="tag in tags"
+            :key="tag"
+          >
             <i class="fas fa-tag"></i>
-            <div class="article-tag-item-text">AI</div>
-          </div>
-          <div class="article-tag-item">
-            <i class="fas fa-tag"></i>
-            <div class="article-tag-item-text">Python</div>
-          </div>
-          <div class="article-tag-item">
-            <i class="fas fa-tag"></i>
-            <div class="article-tag-item-text">Java</div>
+            <div class="article-tag-item-text">{{ tag }}</div>
           </div>
         </div>
       </div>
@@ -89,245 +85,24 @@
     </div>
 
     <div class="comments-container">
-      <div class="info-content-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="https://picsum.photos/200/200" alt="avatar">
+            <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">Nagisa77</div>
-            <div class="post-time">3月10日</div>
+            <div class="user-name">{{ comment.userName }}</div>
+            <div class="post-time">{{ comment.time }}</div>
           </div>
           <div class="info-content-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 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">
-            💩💩💩💩💩
-          </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 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">
-            是的
-          </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 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">
-            持续时间至最后一个不会好好说话的账号持有者被请出社区为止。
-          </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 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">
-            赞同楼主
-          </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 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">
-            这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息
+            {{ comment.text }}
           </div>
 
           <div class="article-footer-container">
@@ -364,28 +139,58 @@
 </template>
 
 <script>
-// import { onMounted, ref } from 'vue'
-// import { useRoute } from 'vue-router'
+import { ref } from 'vue'
 
 export default {
   name: 'PostPageView',
   setup() {
-    // const route = useRoute()
-    // const post = ref(null)
+    const tags = ref(['AI', 'Python', 'Java'])
+    const comments = ref([
+      {
+        id: 1,
+        userName: 'Nagisa77',
+        time: '3月10日',
+        avatar: 'https://picsum.photos/200/200',
+        text: '沙发🛋️🛋️🛋️🛋️'
+      },
+      {
+        id: 2,
+        userName: 'Nagisa77',
+        time: '3月10日',
+        avatar: 'https://picsum.photos/200/200',
+        text: '💩💩💩💩💩'
+      },
+      {
+        id: 3,
+        userName: 'Nagisa77',
+        time: '3月10日',
+        avatar: 'https://picsum.photos/200/200',
+        text: '是的'
+      },
+      {
+        id: 4,
+        userName: 'Nagisa77',
+        time: '3月10日',
+        avatar: 'https://picsum.photos/200/200',
+        text: '持续时间至最后一个不会好好说话的账号持有者被请出社区为止。'
+      },
+      {
+        id: 5,
+        userName: 'Nagisa77',
+        time: '3月10日',
+        avatar: 'https://picsum.photos/200/200',
+        text: '赞同楼主'
+      },
+      {
+        id: 6,
+        userName: 'Nagisa77',
+        time: '3月10日',
+        avatar: 'https://picsum.photos/200/200',
+        text: '这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息'
+      }
+    ])
 
-    // onMounted(async () => {
-    //   const id = route.params.id
-    //   try {
-    //     const res = await fetch(`/api/posts/${id}`)
-    //     if (res.ok) {
-    //       post.value = await res.json()
-    //     }
-    //   } catch (err) {
-    //     console.error(err)
-    //   }
-    // })
-
-    // return { post }
+    return { tags, comments }
   }
 }
 </script>