Merge pull request #55 from nagisa77/codex/add-post-page-for-/posts/postid

Add post view page

open-isle-cli/src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomePageView from '../views/HomePageView.vue'
 import MessagePageView from '../views/MessagePageView.vue'
 import AboutPageView from '../views/AboutPageView.vue'
+import PostPageView from '../views/PostPageView.vue'
 
 const routes = [
   {
@@ -18,6 +19,11 @@ const routes = [
     path: '/about',
     name: 'about',
     component: AboutPageView
+  },
+  {
+    path: '/posts/:id',
+    name: 'post',
+    component: PostPageView
   }
 ]
 

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

@@ -23,7 +23,7 @@
     <div class="article-container">
       <div class="article-item">
         <div class="article-main-container">
-          <div class="article-item-title">各位佬，科研项目python语言适合什么ai编程？</div>
+          <router-link class="article-item-title" to="/posts/1">各位佬，科研项目python语言适合什么ai编程？</router-link>
           <div class="article-item-description">是的，L站目前每天都有不少各色各样的佬友加入。对于一个在线社区来说，不断壮大和涌入新的血液是一件好事。但我每天都要问问自己，这里面有没有问题？真的完全是好事吗？在这个过程中我嗅到了一丝危险的气息：有人试图同质化这里，把这里当作互联网上另⋯阅读更多 </div>
           <div class="article-info-container">
             <div class="article-info-item">

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

@@ -0,0 +1,40 @@
+<template>
+  <div class="post-page">
+    <h2>{{ post?.title }}</h2>
+    <div v-if="post">{{ post.content }}</div>
+    <div v-else>Loading...</div>
+  </div>
+</template>
+
+<script>
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+export default {
+  name: 'PostPageView',
+  setup() {
+    const route = useRoute()
+    const post = ref(null)
+
+    onMounted(async () => {
+      const id = route.params.id
+      try {
+        const res = await fetch(`/api/posts/${id}`)
+        if (res.ok) {
+          post.value = await res.json()
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    })
+
+    return { post }
+  }
+}
+</script>
+
+<style scoped>
+.post-page {
+  padding: 20px;
+}
+</style>