rebuild technique fetch

server/src/routes/topic.js

@@ -8,7 +8,8 @@ const topics = [
   // 帖子的数组
   {
     topicId: 1,
-    topicTitle: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
+    topicTitle:
+      '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
     topicFloorCount: 1,
     topicContent: '<h1>啊这可海星</h1>',
     topicPublishTime: Date.now(),
@@ -111,7 +112,7 @@ const topics = [
   },
   {
     topicId: 2,
-    topicTitle: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
+    topicTitle: '啊这可海星',
     topicFloorCount: 1,
     topicContent: '<h1>啊这可海星</h1>',
     topicPublishTime: Date.now(),

src/components/WangEditor.vue

@@ -60,7 +60,6 @@ const editorConfig = {
 
 const handleCreated = (editor: IDomEditor) => {
   editorRef.value = editor
-  console.log(editor.getConfig())
 }
 
 onMounted(() => {

src/views/technique/Technique.vue

@@ -3,6 +3,28 @@ import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
 import SingleTopic from './components/SingleTopic.vue'
 import Pagination from './components/Pagination.vue'
 import Aside from './components/Aside.vue'
+
+import { ref, onMounted } from 'vue'
+import { getTopicRangeApi } from '@/api/topic/index'
+import { KUNGalgameTopic } from '@/api/topic/types/topic'
+
+// 在组件中定义响应式的帖子数据
+const topics = ref<KUNGalgameTopic[]>([])
+
+// 在组件挂载时调用 fetchTopics 获取帖子数据
+onMounted(async () => {
+  try {
+    const start = 0 // 起始位置
+    const count = 17 // 获取的帖子数量
+
+    // TODO: 这里接口获取到的数据太多了，其实获取 title，like，view，comment，text 这几个字段就足够了
+    const fetchedTopics = await getTopicRangeApi(start, count)
+
+    topics.value = fetchedTopics
+  } catch (error) {
+    console.error('Error fetching topics:', error)
+  }
+})
 </script>
 
 <template>
@@ -11,23 +33,14 @@ import Aside from './components/Aside.vue'
     <KUNGalgameTopBar />
     <!-- 内容区 -->
     <div class="content">
-      <Aside />
+      <Aside class="aside" />
       <!-- 文章容器 -->
       <div class="article">
         <!-- 所有文章的容器 -->
         <div class="article-container">
-          <SingleTopic />
+          <div class="topic" v-for="topic in topics" :key="topic.topicId">
-          <SingleTopic />
+            <SingleTopic :data="topic" />
-          <SingleTopic />
+          </div>
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
         </div>
         <Pagination />
       </div>
@@ -84,4 +97,21 @@ import Aside from './components/Aside.vue'
   /* 设置 grid 布局的块间距，gap 取代了之前的 grid-gap */
   gap: 10px;
 }
+
+.topic {
+  width: 100%;
+  height: 100%;
+}
+
+@media (max-width: 1000px) {
+  .aside {
+    display: none;
+  }
+  .article {
+    margin-left: 0;
+  }
+  .content {
+    padding: 0;
+  }
+}
 </style>

src/views/technique/components/SingleTopic.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+
+const props = defineProps(['data'])
+
+// TODO: 后端接口字段名还未定，不能确定
 </script>
 
 <template>
@@ -11,16 +15,10 @@ import { Icon } from '@iconify/vue'
     <span></span>
     <span></span>
     <!-- 帖子的标题 -->
-    <div class="topic-title">啊这可海星</div>
+    <div class="topic-title">{{ props.data.topicTitle }}</div>
     <!-- 帖子的内容预览 -->
     <div class="topic-content">
-      <p>
+      <p>{{ props.data.topicContent }}</p>
-        啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-        啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-        啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-        啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-        啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-      </p>
     </div>
     <!-- 帖子的状态 -->
     <div class="topic-status">
@@ -33,22 +31,9 @@ import { Icon } from '@iconify/vue'
     </div>
     <!-- 帖子的标签 -->
     <div class="topic-tags">
+      <Icon class="icon" icon="ant-design:tag-twotone" />
       <!-- 单个标签 -->
-      <span
+      <span v-for="kun in props.data.topicTags">{{ kun }}</span>
-        ><Icon
-          class="icon"
-          icon="ant-design:tag-twotone"
-        />啊这可海星啊这可海星</span
-      >
-      <span>啊这可海星啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
-      <span>啊这可海星</span>
     </div>
   </div>
 </template>
@@ -58,8 +43,6 @@ import { Icon } from '@iconify/vue'
 .topic {
   border: 1px solid var(--kungalgame-trans-blue-4);
   border-radius: 5px;
-  /* 帖子内容距离边的距离 */
-  padding: 0 10px;
   background-color: var(--kungalgame-trans-white-2);
   /* 相对于底部状态的定位 */
   position: relative;
@@ -67,6 +50,7 @@ import { Icon } from '@iconify/vue'
   /* 隐藏 hover 的颜色露出 */
   overflow: hidden;
   box-sizing: border-box;
+  max-width: 350px;
 }
 /* 单个帖子 hover */
 .topic:hover {
@@ -160,8 +144,8 @@ import { Icon } from '@iconify/vue'
 }
 /* 帖子标题 */
 .topic-title {
-  height: 30px;
+  padding: 10px;
-  font-size: 20px;
+  font-size: 17px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -174,19 +158,22 @@ import { Icon } from '@iconify/vue'
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 11;
+  -webkit-line-clamp: 10;
   overflow: hidden;
   -webkit-box-orient: vertical;
+  padding: 0 10px;
 }
 /* 帖子的状态 */
 .topic-status {
   height: 30px;
-  width: 90%;
+  width: 100%;
+  padding: 0 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   /* 相对于帖子绝对定位 */
   position: absolute;
+  background-color: var(--kungalgame-trans-white-2);
   bottom: 0;
 }
 /* 帖子的标签 */