[O] Use tg-blog component

src/views/Life.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="Life" v-if="posts.length !== 0">
+    <div id="Life">
         <div id="header">
             <p>欢迎！</p>
             <p>
@@ -9,69 +9,20 @@
                 这里是我记录生活的地方，没有固定格式内容，更新也会比较频繁。
             </p>
         </div>
-        <PostView :p="p" v-for="p in posts" :key="p.id"/>
+        <TgBlog postsUrl="https://test-tg-data.hydev.org/liaotalk/posts.json"></TgBlog>
     </div>
 </template>
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
-import {hosts} from "@/scripts/constants";
-import moment from "moment";
-import PostView from "@/components/Post.vue";
+import { TgBlog } from "tg-blog";
+import 'tg-blog/dist/style.css'
 
-export interface Image {
-    href: string
-    url: string
-    style: {
-        left: number
-        top: number
-        width: number
-        height: number
-        'margin-right': number
-        'margin-bottom': number
-    }
-}
-
-export interface Post {
-    id: string
-    date: string
-
-    text?: string
-
-    type?: string // If type doesn't exist, it's a regular message
-    views?: string // Service messages have no view count
-    reply?: {
-        url: string
-        text: string
-        thumb?: string
-    }
-    video?: {
-        thumb: string
-        duration: string
-        src: string
-    }
-    images?: Image[]
-    img_group_style?: {
-        width: number
-        height: number
-    }
-}
-
-@Options({components: {PostView}})
+@Options({components: {
+    TgBlog
+}})
 export default class Blog extends Vue
 {
-    posts: Post[] = []
-
-    created(): void
-    {
-        fetch(`${hosts.api}/posts.json`).then(it => it.json()).then(it => {
-            this.posts = it
-            this.posts.forEach(it => it.date = moment(it.date).format('YYYY-MM-DD h:mm'))
-            this.posts.reverse()
-            this.posts = this.posts.filter(it => it.type !== 'service')
-            console.log(it)
-        })
-    }
 }
 </script>
 
@@ -80,7 +31,7 @@ export default class Blog extends Vue
 
 #Life
     margin: 20px auto
-    font-size: 0.8em
+    //font-size: 0.92em
     width: min(450px, 80vw)
 
     #header

tsconfig.json

@@ -25,7 +25,8 @@
         ],
 
         "emitDecoratorMetadata": true,
-        "allowJs": true
+        "allowJs": true,
+        "resolveJsonModule": true
     },
     "include": [
         "src/**/*.ts",

vite.config.ts

@@ -32,6 +32,7 @@ export default defineConfig({
     alias: {
       ...tsconfigPathAliases,
       vue: "vue/dist/vue.esm-bundler.js"
-    }
+    },
+    dedupe: ['vue'],
   }
 });