From 7c4e06037a2964c52772a344ee8240a19c708539 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Fri, 16 Jun 2023 20:15:29 +0800
Subject: [PATCH] rebuild technique fetch

---
 server/src/routes/topic.js                    |  5 +-
 src/components/WangEditor.vue                 |  1 -
 src/views/technique/Technique.vue             | 56 ++++++++++++++-----
 .../technique/components/SingleTopic.vue      | 45 ++++++---------
 4 files changed, 62 insertions(+), 45 deletions(-)

diff --git a/server/src/routes/topic.js b/server/src/routes/topic.js
index 4ed38f42..f22a7cfd 100644
--- a/server/src/routes/topic.js
+++ b/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(),
diff --git a/src/components/WangEditor.vue b/src/components/WangEditor.vue
index 92da3630..b42a870f 100644
--- a/src/components/WangEditor.vue
+++ b/src/components/WangEditor.vue
@@ -60,7 +60,6 @@ const editorConfig = {
 
 const handleCreated = (editor: IDomEditor) => {
   editorRef.value = editor
-  console.log(editor.getConfig())
 }
 
 onMounted(() => {
diff --git a/src/views/technique/Technique.vue b/src/views/technique/Technique.vue
index 47e7ff43..a3eb95b2 100644
--- a/src/views/technique/Technique.vue
+++ b/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 />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
-          <SingleTopic />
+          <div class="topic" v-for="topic in topics" :key="topic.topicId">
+            <SingleTopic :data="topic" />
+          </div>
         </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>
diff --git a/src/views/technique/components/SingleTopic.vue b/src/views/technique/components/SingleTopic.vue
index 782ff054..163d7674 100644
--- a/src/views/technique/components/SingleTopic.vue
+++ b/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>
+      <p>{{ props.data.topicContent }}</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
-        ><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>
+      <span v-for="kun in props.data.topicTags">{{ kun }}</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;
-  font-size: 20px;
+  padding: 10px;
+  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;
 }
 /* 帖子的标签 */