complete topic aside table, add some DB table

2023-05-31 13:31:43 +08:00 · 2023-05-31 13:31:43 +08:00 · 968861ce18
parent 6389da1e0e
commit 968861ce18
7 changed files with 92 additions and 135 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -18,6 +18,7 @@
    "sina",
    "tanstack",
    "Upvotes",
+    "VARCHAR",
    "weixin"
  ],
  "i18n-ally.localesPaths": ["src/language"],
--- a/server/table.md
+++ b/server/table.md
@ -0,0 +1,48 @@
+
+
+topic table
+
+|     Column Name     | Data Type |            Description             |
+| :-----------------: | :-------: | :--------------------------------: |
+|      topic_id       |    INT    |            帖子ID（P）             |
+|     topic_title     |  VARCHAR  |              帖子标题              |
+|  topic_floor_count  |    INT    |             帖子楼层数             |
+|    topic_content    |   TEXT    |              帖子内容              |
+| topic_publish_time  | TIMESTAMP |            帖子发布时间            |
+|  topic_popularity   |    INT    |             帖子热度值             |
+|     topic_tags      | JSON/TEXT | 帖子标签（以 JSON 或文本形式存储） |
+|    topic_upvotes    |    INT    |             帖子被推数             |
+|     topic_views     |    INT    |             帖子浏览数             |
+|     topic_likes     |    INT    |             帖子点赞数             |
+|   topic_dislikes    |    INT    |             帖子被踩数             |
+|    topic_status     |  VARCHAR  |   帖子状态（正常、被推、封禁等）   |
+|   topic_is_edited   |  BOOLEAN  |         帖子是否被重新编辑         |
+|  topic_edited_time  | TIMESTAMP |        帖子重新编辑的时间戳        |
+| topic_author_avatar |  VARCHAR  |          发布人的头像 URL          |
+|  topic_author_name  |  VARCHAR  |            发布人的名字            |
+| topic_author_points |    INT    |           发布人的萌萌点           |
+|   topic_partition   |  VARCHAR  |             帖子的分区             |
+
+
+
+
+
+reply table
+
+|  Column Name   | Data Type |             Description              |
+| :------------: | :-------: | :----------------------------------: |
+|    reply_id    |    INT    |             回复ID（P）              |
+|    post_id     |    INT    |           回复所属的帖子ID           |
+| replier_avatar |  VARCHAR  |           回复人的头像 URL           |
+|  replier_name  |  VARCHAR  |             回复人的名字             |
+| replier_points |    INT    |            回复人的萌萌点            |
+|   replied_to   |  VARCHAR  |            被回复的人名字            |
+|   is_edited    |  BOOLEAN  |          回复是否被重新编辑          |
+|  edited_time   | TIMESTAMP |         回复重新编辑的时间戳         |
+|   reply_time   | TIMESTAMP |              回复时间戳              |
+| reply_content  |   TEXT    |               回复内容               |
+| reply_upvotes  |    INT    |              回复被推数              |
+|  reply_likes   |    INT    |              回复点赞数              |
+| reply_dislikes |    INT    |              回复被踩数              |
+|  comment_data  | JSON/TEXT | 回复的评论（以 JSON 或文本形式存储） |
+|  reply_count   |    INT    |            单个回复的数量            |
--- a/src/views/topic/aside/KUNGalgameTopicAside.vue
+++ b/src/views/topic/aside/KUNGalgameTopicAside.vue
@ -7,16 +7,15 @@
 -->
 <script setup lang="ts">
 import TopicAsideNav from './components/TopicAsideNav.vue'
-import TopicAsideSame from './components/TopicAsideSame.vue'
-import TopicAsideMaster from './components/Topic.vue'
+import Topic from './components/Topic.vue'
 // 导入 Footer
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 </script>
 <template>
  <div class="content-left-part">
    <TopicAsideNav />
-    <TopicAsideSame />
-    <TopicAsideMaster />
+    <Topic style="margin-bottom: 17px" />
+    <Topic :isMasterTopics="true" />
    <KUNGalgameFooter />
  </div>
 </template>
@ -26,7 +25,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
  top: 70px;
  position: sticky;
  /* 左侧区域的总高度 */
-  height: 1000px;
+  height: 940px;
  /* 左侧区域宽度 */
  width: 250px;
  /* 左侧内容区为弹性盒，方便分成上下两部分 */
--- a/src/views/topic/aside/components/Topic.vue
+++ b/src/views/topic/aside/components/Topic.vue
@ -9,9 +9,15 @@ const props = defineProps(['isMasterTopics'])

 <template>
  <!-- 楼主的其它帖子 -->
-  <div class="topic">
+  <div class="topic" :class="$props.isMasterTopics ? 'master' : ''">
    <ul>
-      <li>{{ $t('topic.aside.master') }}</li>
+      <li>
+        {{
+          $props.isMasterTopics
+            ? $t('topic.aside.master')
+            : $t('topic.aside.tags')
+        }}
+      </li>
      <li v-for="kun in asideTopic" :key="kun.index">
        <router-link :to="kun.router">{{ kun.name }}</router-link>
      </li>
@ -26,18 +32,18 @@ const props = defineProps(['isMasterTopics'])
  height: 1px;
  flex-grow: 4;
  /* 上方区域的配色 */
-  border: 1px solid $kungalgame-trans-pink-2;
+  border: 1px solid $kungalgame-trans-blue-2;
  /* 隐藏溢出的颜色 */
  overflow: hidden;
  border-radius: 5px;
-  background-color: $kungalgame-trans-pink-0;
+  background-color: $kungalgame-trans-blue-0;
  box-shadow: $shadow;
  ul {
    height: 100%;
    /* 整体为一个无序列表，列表为弹性盒 */
    display: flex;
    flex-direction: column;
-    li {
+    & > li {
      height: 1px;
      width: 100%;
      /* 每个项目相对于标题的占比 */
@ -50,8 +56,8 @@ const props = defineProps(['isMasterTopics'])
      /* 内边距盒子 */
      box-sizing: border-box;
      &:hover {
-        border-left: 4px solid $kungalgame-blue-3;
-        background-color: $kungalgame-trans-pink-1;
+        border-left: 4px solid $kungalgame-pink-3;
+        background-color: $kungalgame-trans-blue-1;
        transition: 0.3s;
      }
      a {
@ -75,15 +81,33 @@ const props = defineProps(['isMasterTopics'])
        /* 相对于单个帖子标题的比例 */
        flex-grow: 2;
        line-height: 40px;
-        font-size: 1.8ch;
+        font-size: 14px;
        font-weight: bold;
-        background-color: $kungalgame-trans-pink-1;
+        color: $kungalgame-font-color-2;
+        background-color: $kungalgame-trans-blue-1;
        /* 与单个帖子标题的分割线 */
-        border-bottom: 1px solid $kungalgame-trans-pink-2;
+        border-bottom: 1px solid $kungalgame-trans-blue-2;
        /* 水平居中 */
        justify-content: center;
      }
    }
  }
 }
+.master {
+  border: 1px solid $kungalgame-trans-pink-2;
+  background-color: $kungalgame-trans-pink-0;
+  ul > li {
+    &:hover {
+      border-left: 4px solid $kungalgame-blue-3;
+      background-color: $kungalgame-trans-pink-1;
+    }
+    &:nth-child(1) {
+      /* 左侧没有 border，没有 hover */
+      border-left: 0;
+      background-color: $kungalgame-trans-pink-1;
+      /* 与单个帖子标题的分割线 */
+      border-bottom: 1px solid $kungalgame-trans-pink-2;
+    }
+  }
+}
 </style>
--- a/src/views/topic/aside/components/TopicAsideSame.vue
+++ b/src/views/topic/aside/components/TopicAsideSame.vue
@ -1,107 +0,0 @@
-<!-- 
-  这里是帖子区相同标签下的其他帖子，这个部分的内容将会被设置为和楼主帖子标签相同的帖子
- -->
-<script setup lang="ts"></script>
-
-<template>
-  <!-- 相同标签下的其它帖子 -->
-  <div class="same-tag-topic">
-    <ul>
-      <li><a href="#">相同标签下的其它帖子</a></li>
-      <li>
-        <a href="#"
-          >啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星</a
-        >
-      </li>
-      <li>
-        <a href="#">啊这可海星啊这可海星啊这可海星啊这可海星</a>
-      </li>
-      <li>
-        <a href="#"
-          >啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星</a
-        >
-      </li>
-      <li>
-        <a href="#"
-          >啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星</a
-        >
-      </li>
-      <li><a href="#">啊这啊这可海星啊这可海星</a></li>
-    </ul>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/* 相同标签下的其它帖子 */
-.same-tag-topic {
-  height: 1px;
-  flex-grow: 4;
-  width: 100%;
-  /* 上方区域的配色 */
-  border: 1px solid $kungalgame-trans-blue-2;
-  /* 隐藏溢出的颜色 */
-  overflow: hidden;
-  border-radius: 5px;
-  background-color: $kungalgame-trans-blue-0;
-  /* 左侧两个部分之间的距离 */
-  margin-bottom: 17px;
-  /* 盒子的阴影 */
-  box-shadow: $shadow;
-}
-.same-tag-topic ul {
-  height: 100%;
-  /* 整体为一个无序列表，列表为弹性盒 */
-  display: flex;
-  flex-direction: column;
-}
-.same-tag-topic ul li {
-  height: 1px;
-  width: 100%;
-  /* 每个项目相对于标题的占比 */
-  flex-grow: 3;
-  display: flex;
-  /* 垂直居中 */
-  align-items: center;
-  /* 设置左侧的 border 方便制作 hover */
-  border-left: 4px solid transparent;
-  /* 内边距盒子 */
-  box-sizing: border-box;
-}
-/* 上方的 hover 效果 */
-.same-tag-topic ul li:hover {
-  border-left: 4px solid $kungalgame-pink-3;
-  background-color: $kungalgame-trans-blue-1;
-  transition: 0.3s;
-}
-/* 单个标题的样式 */
-.same-tag-topic ul li a {
-  /* 左右两侧的距离 */
-  margin: 0 17px;
-  color: $kungalgame-font-color-3;
-  /* 标题显示两行、超出部分隐藏 */
-  overflow: hidden; /* 超出部分隐藏 */
-  text-overflow: ellipsis; /* 显示省略号 */
-  display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
-  -webkit-box-orient: vertical; /* 设置为纵向排列 */
-  -webkit-line-clamp: 2; /* 显示两行文本 */
-  /* 标题的字体属性 */
-  font-size: small;
-  line-height: 1.5em;
-  box-sizing: border-box;
-}
-/* 大标题（相同标签下的其它帖子）的样式 */
-.same-tag-topic ul li:nth-child(1) {
-  /* 左侧没有 border，没有 hover */
-  border-left: 0;
-  /* 相对于单个帖子标题的比例 */
-  flex-grow: 2;
-  line-height: 40px;
-  font-size: 1.8ch;
-  font-weight: bold;
-  background-color: $kungalgame-trans-blue-1;
-  /* 与单个帖子标题的分割线 */
-  border-bottom: 1px solid $kungalgame-trans-blue-2;
-  /* 水平居中 */
-  justify-content: center;
-}
-</style>
--- a/src/views/topic/aside/components/topic.ts
+++ b/src/views/topic/aside/components/topic.ts
@ -8,27 +8,27 @@ interface topic {
 export const asideTopic: topic[] = [
  {
    index: 1,
-    name: '啊这可海星',
+    name: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
    router: '/topic',
  },
  {
    index: 2,
-    name: '啊这可海星',
+    name: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
    router: '/topic',
  },
  {
    index: 3,
-    name: '啊这可海星',
+    name: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
    router: '/topic',
  },
  {
    index: 4,
-    name: '啊这可海星',
+    name: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
    router: '/topic',
  },
  {
    index: 5,
-    name: '啊这可海星',
+    name: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
    router: '/topic',
  },
 ]
--- a/src/views/topic/content/components/KUNGalgamerInfo.vue
+++ b/src/views/topic/content/components/KUNGalgamerInfo.vue
@ -8,8 +8,6 @@
    <div class="master-avatar">
      <!-- 楼主的头像图片 -->
      <img src="@/assets/images/KUN.jpg" alt="KUN" />
-      <!-- 楼主的等级 -->
-      <div class="master-ranking">站长</div>
    </div>
    <!-- 楼主的名字 -->
    <div class="master-name">啊这可海星啊这</div>
@ -31,12 +29,6 @@
  width: 100px;
  margin-top: 17px;
 }
-/* 楼主的等级 */
-.master-ranking {
-  font-size: 10px;
-  position: absolute;
-  margin-left: 90px;
-}
 /* 楼主的头像图片 */
 .master-avatar img {
  width: 100px;