fix others topic icon, rebuild structure

src/views/Home/content/article/content/topic/SingleTopic.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
 import UserPart from './components/UserPart.vue'
 import TopicPart from './components/TopicPart.vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const toTopic = (url: string) => {
-  router.push(url)
-}
 </script>
 <template>
-  <div class="topic" @click="toTopic('/topic')">
+  <div class="topic">
     <UserPart />
-    <TopicPart />
+    <router-link to="/topic">
+      <TopicPart />
+    </router-link>
   </div>
 </template>
 <style lang="scss" scoped>

src/views/Home/content/article/content/topic/components/TopicPart.vue

@@ -38,10 +38,8 @@ import { Icon } from '@iconify/vue'
 <style lang="scss" scoped>
 /* 帖子信息 */
 .topic-info {
-  width: 1px;
+  width: 100%;
   height: 100%;
-  /* 单个帖子左右两部分发布人信息和帖子概览均为竖向弹性盒 */
-  flex-grow: 1;
   display: flex;
   flex-direction: column;
 }

src/views/Home/content/article/content/topic/components/UserPart.vue

@@ -21,6 +21,7 @@
   height: 100%;
   /* 单个帖子左右两部分发布人信息和帖子概览均为竖向弹性盒 */
   display: flex;
+  flex-shrink: 0;
   flex-direction: column;
   /* 发帖人信息距离帖子概览的距离 */
   margin: 0 5px;

src/views/topic/aside/nav/TopicAsideNav.vue

@@ -1,18 +1,20 @@
 <!-- 
   这里是帖子部分的功能区，有返回顶部等功能
  -->
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+</script>
 
 <template>
   <div class="topic-page-nav">
     <!-- 交互区容器 -->
     <ul class="topic-page-nav-container">
-      <li><i class="fa-solid fa-people-group fa-bounce"></i>进入帖子池</li>
-      <li><i class="fa-solid fa-arrows-up-to-line"></i>返回到顶端</li>
-      <li><i class="fa-solid fa-house"></i>返回到首页</li>
-      <li><i class="fa-regular fa-clock"></i>按时间排序</li>
-      <li><i class="fa-regular fa-thumbs-up"></i>按点赞排序</li>
-      <li><i class="fa-regular fa-comment-dots"></i>按回复排序</li>
+      <li><Icon class="icon" icon="line-md:text-box-multiple" />进入帖子池</li>
+      <li><Icon class="icon" icon="line-md:arrow-close-up" />返回到顶端</li>
+      <li><Icon class="icon" icon="line-md:home-twotone" />返回到首页</li>
+      <li><Icon class="icon" icon="svg-spinners:clock" />按时间排序</li>
+      <li><Icon class="icon" icon="line-md:thumbs-up-twotone" />按点赞排序</li>
+      <li><Icon class="icon" icon="fa-regular:comment-dots" />按回复排序</li>
     </ul>
   </div>
 </template>
@@ -54,7 +56,7 @@
   white-space: nowrap;
   cursor: pointer;
 }
-.topic-page-nav-container > li > i {
+.icon {
   margin-right: 4px;
   font-size: 17px;
 }
@@ -62,7 +64,7 @@
 .topic-page-nav-container > li::before {
   transform: scaleX(0);
   transform-origin: bottom right;
-  content: ' ';
+  content: '啊这可海星';
   display: block;
   position: absolute;
   top: 0;
@@ -70,7 +72,7 @@
   bottom: 0;
   left: 0;
   inset: 0 0 0 0;
-  background-color: $kungalgame-trans-red-4;
+  background-color: $kungalgame-red-4;
   z-index: -1;
   transition: transform 0.3s ease;
 }

src/views/topic/content/master/TopicMaster.vue

@@ -24,25 +24,25 @@ import Floor from '../components/Floor.vue'
 
 <template>
   <!-- 楼主帖子容器 -->
-  <div class="master-topic-container">
+  <div class="container">
     <Floor />
     <!-- 楼主帖子内容区的容器 -->
-    <div class="master-topic-content-container">
+    <div class="content-container">
       <TopicHeader />
       <!-- 楼主帖子内容区 -->
-      <div class="master-topic-content">
+      <div class="content">
         <!-- 内容区的顶部 -->
-        <div class="master-topic-content-top">
+        <div class="content-top">
           <Tags />
           <Time />
         </div>
         <!-- 内容区的中部 -->
-        <div class="master-topic-content-center">
+        <div class="content-center">
           <KUNGalgamerInfo />
           <TopicContent />
         </div>
         <!-- 内容区的底部 -->
-        <div class="master-topic-content-bottom">
+        <div class="content-bottom">
           <TopicStatus />
           <Rewrite />
         </div>
@@ -54,7 +54,7 @@ import Floor from '../components/Floor.vue'
 
 <style lang="scss" scoped>
 /* 楼主帖子容器 */
-.master-topic-container {
+.container {
   width: 100%;
   /* 楼主帖子最小高度 */
   min-height: 400px;
@@ -71,7 +71,7 @@ import Floor from '../components/Floor.vue'
   background-size: cover;
 }
 /* 楼主帖子内容区的容器 */
-.master-topic-content-container {
+.content-container {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -85,14 +85,14 @@ import Floor from '../components/Floor.vue'
 }
 
 /* 楼主帖子内容区 */
-.master-topic-content {
+.content {
   width: 100%;
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
 }
 /* 内容区的顶部 */
-.master-topic-content-top {
+.content-top {
   width: 100%;
   height: 40px;
   display: flex;
@@ -105,7 +105,7 @@ import Floor from '../components/Floor.vue'
 }
 
 /* 楼主的帖子和楼主的信息容器 */
-.master-topic-content-center {
+.content-center {
   width: 100%;
   display: flex;
   flex-shrink: 0;
@@ -113,7 +113,7 @@ import Floor from '../components/Floor.vue'
   box-sizing: border-box;
 }
 /* 内容区的底部 */
-.master-topic-content-bottom {
+.content-bottom {
   width: 100%;
   height: 20px;
   display: flex;

src/views/topic/content/others/TopicOthers.vue

@@ -4,16 +4,16 @@
   这个区域包含所有人回复给楼主的帖子，其中每个人的帖子将会被拆分成为单独的组件
  -->
 <script setup lang="ts">
-import SingleTopic from './single/SingleTopic.vue';
+import SingleTopic from './components/SingleTopic.vue'
 </script>
 
 <template>
   <!-- 其它人的回帖 -->
   <div class="other-topic-container">
     <!-- 每个人的单个帖子 -->
-    <SingleTopic/>
-    <SingleTopic/>
-    <SingleTopic/>
+    <SingleTopic />
+    <SingleTopic />
+    <SingleTopic />
   </div>
 </template>
 

src/views/topic/content/others/components/Comments.vue

@@ -2,38 +2,38 @@
   这是回复贴下方的评论区，包含了所有的评论，是一个单独的组件，它的子组件是单个评论
  -->
 <script setup lang="ts">
-import SingleComment from './components/SingleComment.vue';
+import SingleComment from './SingleComment.vue'
 </script>
 
 <template>
   <!-- 底部的评论 -->
-  <div class="other-topic-footer-bottom">
+  <div class="bottom">
     <!-- 评论的标题 -->
-    <div class="other-topic-comment-title">
+    <div class="comment-title">
       <span>评论</span>
     </div>
     <!-- 评论容器 -->
-    <div class="other-topic-comment-container">
-      <SingleComment/>
-      <SingleComment/>
-      <SingleComment/>
+    <div class="comment-container">
+      <SingleComment />
+      <SingleComment />
+      <SingleComment />
     </div>
   </div>
 </template>
 
 <style scoped>
 /* 底部的评论 */
-.other-topic-footer-bottom {
+.bottom {
   display: flex;
   align-items: center;
   margin-top: 10px;
 }
 /* 评论的标题 */
-.other-topic-comment-title {
+.comment-title {
   margin: 0 auto;
 }
 /* 评论容器 */
-.other-topic-comment-container {
+.comment-container {
   width: 95%;
   margin: 0 auto;
 }

src/views/topic/content/others/components/SingleComment.vue

@@ -4,18 +4,18 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="single-comment-container">
+  <div class="container">
     <!-- 用户头像 -->
-    <img src="../img/KUN.jpg" alt="KUN" />
+    <img src="@/assets/images/KUN.jpg" alt="KUN" />
     <!-- 单个评论的内容区 -->
-    <div class="single-comment-content">
+    <div class="content">
       <!-- 单个评论内容区顶部 -->
       <div class="single-comment-content-top">
         <!-- 顶部左侧名字 -->
         <div class="single-comment-left">
           鲲回复@<a href="#">啊这可海星啊这</a>
         </div>
-        <!-- 顶部吧右侧点赞、踩 -->
+        <!-- 顶部右侧点赞、踩 -->
         <div class="single-comment-right">
           <ul>
             <!-- 点赞 -->
@@ -40,17 +40,17 @@
 
 <style lang="scss" scoped>
 /* 单个评论容器 */
-.single-comment-container {
+.container {
   display: flex;
   margin: 10px 0;
 }
-.single-comment-container img {
+.container img {
   width: 50px;
   height: 50px;
   margin-right: 10px;
 }
 /* 单个评论的内容区 */
-.single-comment-content {
+.content {
   display: flex;
   flex-direction: column;
 }

src/views/topic/content/others/components/SingleTopic.vue

@@ -4,7 +4,14 @@
   里面包含着每个人的回复和下方回复这个人的评论
  -->
 <script setup lang="ts">
-import Comments from './comments/Comments.vue'
+// 导入评论组件
+import Comments from '../components/Comments.vue'
+// 导入 Footer 组件
+import TopicFooter from '../../components/TopicFooter.vue'
+// 导入发布时间组件
+import Time from '../../components/Time.vue'
+// 导入标签组件
+import Tags from '../../components/Tags.vue'
 </script>
 
 <template>
@@ -24,7 +31,7 @@ import Comments from './comments/Comments.vue'
             <!-- 其他人的头像 -->
             <div class="other-avatar">
               <!-- 其他人的头像图片 -->
-              <img src="../img/KUN.jpg" alt="KUN" />
+              <img src="@/assets/images/topic.jpg" alt="KUN" />
               <!-- 其他人的等级 -->
               <div class="other-ranking">萌葱</div>
             </div>
@@ -39,7 +46,7 @@ import Comments from './comments/Comments.vue'
             <div class="other-topic-content-right-top">
               <!-- 上部区域的左边 -->
               <div class="other-topic-content-right-top-left">
-                <span>回复给$<a href="#">啊这可海星啊这</a>（楼主）</span>
+                <span>回复给@<a href="#">啊这可海星啊这</a>（楼主）</span>
               </div>
               <!-- 上部区域的右边 -->
               <div class="other-topic-content-right-top-right">
@@ -69,83 +76,12 @@ import Comments from './comments/Comments.vue'
         </div>
         <!-- 其他人回帖的下部 -->
         <div class="other-topic-content-bottom">
-          <!-- 其他人回帖的下部分左侧 -->
-          <div class="other-topic-content-bottom-left">
-            <i class="fa-solid fa-tag"></i>
-            <ul>
-              <li>啊这可海星</li>
-              <li>啊这可海星</li>
-              <li>啊这可海星</li>
-              <li>啊这可海星</li>
-              <li>啊这可海星</li>
-            </ul>
-          </div>
-          <!-- 其他人回帖的下部分右侧 -->
-          <div class="other-topic-content-bottom-right">
-            <!-- 其他人回帖的时间 -->
-            <div class="other-topic-time">
-              <i class="fa-solid fa-hourglass-half"></i>
-              <div>发布于2019年10月7日-10:07:00</div>
-            </div>
-          </div>
+          <Tags />
+          <Time />
         </div>
       </div>
       <!-- 其它人回帖的底部 -->
-      <div class="other-topic-footer">
-        <!-- 顶部的点赞、推贴等 -->
-        <div class="other-topic-footer-top">
-          <!-- 点赞、推贴、踩 -->
-          <div class="other-topic-footer-top-left">
-            <ul>
-              <!-- 推贴 -->
-              <li>
-                <a href="#"><i class="fa-regular fa-hand-point-up"></i></a>
-              </li>
-              <!-- 点赞 -->
-              <li>
-                <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
-              </li>
-              <!-- 踩 -->
-              <li>
-                <a href="#"><i class="fa-regular fa-thumbs-down"></i></a>
-              </li>
-            </ul>
-          </div>
-          <!-- 回复、评论、编辑 -->
-          <div class="other-topic-footer-top-right">
-            <ul>
-              <!-- 回复按钮 -->
-              <li>
-                <div class="kungalgame-reply-btn">
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                  回帖
-                </div>
-              </li>
-              <!-- 回复 -->
-              <li>
-                <a href="#"><i class="fa-solid fa-reply"></i></a>
-              </li>
-              <!-- 评论 -->
-              <li>
-                <a href="#"><i class="fa-regular fa-comment-dots"></i></a>
-              </li>
-              <!-- 只看 -->
-              <li>
-                <a href="#"><i class="fa-solid fa-arrows-to-eye"></i></a>
-              </li>
-              <!-- 编辑 -->
-              <li>
-                <a href="#"><i class="fa-regular fa-pen-to-square"></i></a>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <!-- 底部的评论 -->
-        <Comments />
-      </div>
+      <TopicFooter />
     </div>
   </div>
 </template>