feat:初始化工程

src/components/Content/BlogDetail.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="blog-detail blog-section card-item" id="blog-section">
+    <div class="blog-title">
+      <span class="title">{{ blogStore.currentBlog.title }}</span>
+      <blog-label :basic-blog="getBasicBlog(blogStore.currentBlog)"/>
+    </div>
+
+    <div class="blog-md card-item">
+      <MdPreview editorId="blog-id"
+                 v-model="blogStore.currentBlog.content"
+                 :theme="appStore.isDark ? 'dark' : 'light'"/>
+    </div>
+
+    <div class="blog-copyright">
+      <span>
+        <strong>本文作者: </strong> Cxx
+      </span>
+      <span>
+        <strong>本文链接: </strong>
+        <a href="https://www.microsoft.com/">{{ currentUrl.href }}</a>
+      </span>
+      <span>
+        <strong>版权声明: </strong>
+        本博客所有文章除特别声明外，均采用
+        <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">©BY-NC-SA</a>
+        许可协议。转载请注明出处！
+      </span>
+    </div>
+
+    <div class="blog-ending">
+      <span>-------------本文结束♥感谢您的阅读♥给个五星好评吧~~-------------</span>
+    </div>
+
+    <blog-comment-edit :parent-id="0"/>
+
+    <blog-comment />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BlogLabel from '@/components/Content/BlogLabel.vue'
+import BlogCommentEdit from '@/components/Comment/BlogCommentEdit.vue'
+import BlogComment from '@/components/Comment/BlogComment.vue'
+import { MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
+import { useBlogStore } from '@/store/blog.ts'
+import { useAppStore } from '@/store/app'
+import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
+import { useRoute } from 'vue-router'
+import { onMounted } from 'vue'
+
+const blogStore = useBlogStore()
+const appStore = useAppStore()
+const route = useRoute()
+
+const currentUrl = new URL(window.location.href)
+
+onMounted(async () => {
+  const blogId = route.params.id as number
+  blogStore.currentBlogId = blogId
+  await blogStore.queryBlogById(blogId)
+})
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/blog/blog.detail.module.scss";
+</style>