feat: post main layout

open-isle-cli/src/components/HeaderComponent.vue

@@ -4,7 +4,7 @@
       <button class="menu-btn" @click="$emit('toggle-menu')">
         <i class="fas fa-bars"></i> 
       </button>
-      <div class="logo-container">
+      <div class="logo-container" @click="goToHome">
         <img alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="60" height="60">
         <div class="logo-text">OpenIsle</div>
       </div>
@@ -14,7 +14,12 @@
 
 <script>
 export default {
-  name: 'HeaderComponent'
+  name: 'HeaderComponent',
+  methods: {
+    goToHome() {
+      this.$router.push('/')
+    }
+  }
 }
 </script>
 
@@ -34,6 +39,7 @@ export default {
   align-items: center;
   font-size: 20px;
   font-weight: bold;
+  cursor: pointer;
 }
 
 .header-content {

open-isle-cli/src/views/HomePageView.vue

@@ -403,6 +403,13 @@ export default {
 
 .article-item-title {
   font-size: 20px;
+  text-decoration: none;  
+  color: black;
+}
+
+.article-item-title:hover {
+  color: var(--primary-color);
+  text-decoration: underline;
 }
 
 .article-item-description {

open-isle-cli/src/views/PostPageView.vue

@@ -1,34 +1,115 @@
 <template>
   <div class="post-page">
-    <h2>{{ post?.title }}</h2>
-    <div v-if="post">{{ post.content }}</div>
-    <div v-else>Loading...</div>
+    <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">
+            <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-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="article-content">
+        <div class="user-name">Nagisa77</div>
+        <div class="article-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>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
+// import { onMounted, ref } from 'vue'
+// import { useRoute } from 'vue-router'
 
 export default {
   name: 'PostPageView',
   setup() {
-    const route = useRoute()
-    const post = ref(null)
+    // const route = useRoute()
+    // const post = ref(null)
 
-    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)
-      }
-    })
+    // 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 { post }
   }
 }
 </script>
@@ -37,4 +118,153 @@ export default {
 .post-page {
   padding: 20px;
 }
+
+.article-title-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.article-title {
+  font-size: 30px;
+  font-weight: bold;
+}
+
+.article-info-container {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+  gap: 10px;
+  align-items: center;
+}
+
+.article-info-item {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+}
+
+.article-tags-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.article-tag-item {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+}
+
+.article-content-container {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.user-avatar-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.user-avatar-item {
+  width: 50px;
+  height: 50px;
+}
+
+.user-avatar-item-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.article-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.user-name {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.article-content-text {
+  font-size: 16px;
+  line-height: 1.8;
+  opacity: 0.7;
+}
+
+.article-footer-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-top: 60px;
+}
+
+.reactions-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.reactions-viewer {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  align-items: center;
+}
+
+.reactions-viewer-item-container {
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+  align-items: center;
+}
+
+.reactions-viewer-item {
+  font-size: 16px;
+}
+
+.reactions-count {
+  font-size: 16px;
+  opacity: 0.5;
+}
+
+.make-reaction-container {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+}
+
+.make-reaction-item {
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 50%;
+  opacity: 0.7;
+}
+
+.like-reaction {
+  font-size: 20px;
+  color: #ff0000;
+}
+
+.like-reaction:hover {
+  background-color: #ffe2e2;
+}
+
+.copy-link {
+  font-size: 20px;
+}
+
+.copy-link:hover {
+  background-color: #e2e2e2;
+}
+
 </style>