feat: update home page view

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

@@ -39,6 +39,16 @@
         </div>
       </div>
 
+      <div v-if="isLoadingPosts" class="loading-container">
+        <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+      </div>
+
+      <div v-else-if="articles.length === 0">
+        <div class="no-posts-container">
+          <div class="no-posts-text">暂时没有帖子 :( 点击发帖发送第一篇相关帖子吧!</div>
+        </div>
+      </div>
+
       <div class="article-item" v-for="article in articles" :key="article.id">
         <div class="article-main-container">
           <router-link class="article-item-title main-item" :to="`/posts/${article.id}`">
@@ -86,6 +96,9 @@ import { stripMarkdown } from '../utils/markdown'
 import { API_BASE_URL } from '../main'
 import CategorySelect from '../components/CategorySelect.vue'
 import TagSelect from '../components/TagSelect.vue'
+import { hatch } from 'ldrs'
+hatch.register()
+
 
 export default {
   name: 'HomePageView',
@@ -96,10 +109,11 @@ export default {
   data() {
     return {
       selectedCategory: '',
-      selectedTags: []
+      selectedTags: [],
     }
   },
   setup() {
+    const isLoadingPosts = ref(false)
     const topics = ref(['最新', '排行榜', '热门', '类别'])
     const selectedTopic = ref('最新')
 
@@ -107,7 +121,9 @@ export default {
 
     const fetchPosts = async () => {
       try {
+        isLoadingPosts.value = true
         const res = await fetch(`${API_BASE_URL}/api/posts`)
+        isLoadingPosts.value = false
         if (!res.ok) return
         const data = await res.json()
         articles.value = data.map(p => ({
@@ -130,7 +146,7 @@ export default {
 
     const sanitizeDescription = (text) => stripMarkdown(text)
 
-    return { topics, selectedTopic, articles, sanitizeDescription }
+    return { topics, selectedTopic, articles, sanitizeDescription, isLoadingPosts }
   }
 }
 </script>
@@ -191,6 +207,25 @@ export default {
   margin-left: 10px;
 }
 
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
+.no-posts-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
+.no-posts-text {
+  font-size: 14px;
+  opacity: 0.7;
+}
+
 .topic-container {
   display: flex;
   flex-direction: row;

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

@@ -2,7 +2,7 @@
   <div class="post-page-container">
     <div class="post-page-main-container" ref="mainContainer" @scroll="onScroll">
       <div class="article-title-container">
-        <div class="article-title">请不要把互联网上的戾气带来这里！</div>
+        <div class="article-title">{{ title }}</div>
         <div class="article-info-container">
           <div class="article-info-item">
             <i class="fas fa-user"></i>
@@ -99,6 +99,7 @@ export default {
     const route = useRoute()
     const postId = route.params.id
 
+    const title = ref('')
     const postContent = ref('')
     const tags = ref([])
     const comments = ref([])
@@ -122,6 +123,7 @@ export default {
         if (!res.ok) return
         const data = await res.json()
         postContent.value = data.content
+        title.value = data.title
         tags.value = data.tags || []
         comments.value = (data.comments || []).map(mapComment)
         postTime.value = new Date(data.createdAt).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' })
@@ -198,6 +200,7 @@ export default {
 
     return {
       postContent,
+      title,
       tags,
       comments,
       postTime,
@@ -211,6 +214,7 @@ export default {
       onScroll: updateCurrentIndex,
       copyPostLink,
       renderMarkdown
+    }
   }
 }
 </script>
@@ -456,6 +460,4 @@ export default {
 .copy-link:hover {
   background-color: #e2e2e2;
 }
-
-
 </style>

open-isle-cli/vue.config.js

@@ -1,4 +1,7 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  configureWebpack: {
+    devtool: 'source-map'
+  },
 })

package-lock.json

@@ -2,5 +2,17 @@
   "name": "OpenIsle",
   "lockfileVersion": 3,
   "requires": true,
-  "packages": {}
+  "packages": {
+    "": {
+      "dependencies": {
+        "ldrs": "^1.1.7"
+      }
+    },
+    "node_modules/ldrs": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/ldrs/-/ldrs-1.1.7.tgz",
+      "integrity": "sha512-rZnfveeY1SeS3F3ifUVd9AVGTFHmQ0qzp5fuszAirnrVkjqJBLrm99vtr/Mxbby4XgadUYv+DsFqyk2p4FV40Q==",
+      "license": "MIT"
+    }
+  }
 }

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "ldrs": "^1.1.7"
+  }
+}