feat:移植工程

src/components/Blog/Content/BlogDetail.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="blog-detail blog-section" 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">
+      <MdPreview editorId="blog-id" v-model="blogStore.currentBlog.content" />
+    </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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BlogLabel from '@/components/Blog/Content/BlogLabel.vue'
+import { MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
+import { useBlogStore } from '@/store/blog.ts'
+import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
+import { useRoute } from 'vue-router'
+import { onMounted } from 'vue'
+
+const blogStore = useBlogStore()
+const route = useRoute()
+
+const currentUrl = new URL(window.location.href)
+
+onMounted(async () => {
+  await blogStore.queryBlogById(route.params.id as number)
+})
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/blog/blog.detail.module.scss";
+</style>

src/components/Blog/Content/BlogLabel.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="label-list">
+    <div class="container">
+      <div class="top-value item" v-if="props.basicBlog?.topValue > 1">
+        <i class="fa-solid fa-thumbtack"></i>
+      </div>
+
+      <div v-if="props.basicBlog?.topValue > 1" class="item">|</div>
+
+      <div class="great item" v-if="props.basicBlog?.isGreat">
+        <i class="fa-regular fa-newspaper"></i>
+      </div>
+
+      <div v-if="props.basicBlog?.isGreat" class="item">|</div>
+
+      <div class="item">
+        <i class="fa-regular fa-calendar"></i>
+        <span class="date">{{ formatDate(props.basicBlog.createTime) }}</span>
+      </div>
+
+      <div class="item">|</div>
+
+      <div class="item">
+        <i class="fa-regular fa-calendar-check"></i>
+        <span class="date">{{ formatDate(props.basicBlog.createTime) }}</span>
+      </div>
+
+      <div class="item">|</div>
+
+      <div class="item">
+        <i class="fa-regular fa-folder"></i>
+        <span class="category" @click="viewBlogCategoryClick">
+          {{ props.basicBlog.category }}
+        </span>
+      </div>
+
+      <div class="item">|</div>
+
+      <div class="item">
+        <i class="fa-solid fa-eye"></i>
+        <span>{{ props.basicBlog.visitCount }} 次</span>
+      </div>
+    </div>
+
+    <div class="container">
+      <div class="item">
+        <i class="fa-regular fa-file-word"></i>
+        <span>{{ props.basicBlog.wordCount }} 字</span>
+      </div>
+
+      <div class="item">|</div>
+
+      <div class="item">
+        <i class="fa-regular fa-clock"></i>
+        <span>{{ props.basicBlog.readDuration.toFixed(0) }} 分钟</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, PropType } from 'vue'
+import { IBasicBlog } from '@/types/blog.ts'
+import { useBlogStore } from '@/store/blog.ts'
+import { useRouter } from 'vue-router'
+import { formatDate } from 'vue3-common/utils/dateUtil'
+
+const blogStore = useBlogStore()
+const router = useRouter()
+
+const props = defineProps({
+  basicBlog: {
+    required: true,
+    type: Object as PropType<IBasicBlog>
+  }
+})
+
+/**
+ * 点击查看博客分类按钮
+ */
+const viewBlogCategoryClick = async () => {
+  const category = props.basicBlog?.category as string
+  await blogStore.queryBlogByCondition({
+    category
+  })
+  await router.push({ name: 'CategoriesBlog', params: { name: category } })
+}
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/blog/blog.label.module.scss";
+</style>

src/components/Blog/Content/BlogOverview.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="blog-content-list blog-section">
+    <div v-if="blogStore.blogList.length === 0"
+         class="blog-content blog-content-empty" >
+    </div>
+
+    <div class="blog-content blog-content-summary"
+         v-for="(item, index) in blogStore.blogList" :key="index">
+      <span class="title">{{ item.title }}</span>
+
+      <blog-label :basic-blog="getBasicBlog(item)"/>
+
+      <p class="content">
+        {{ item.summary }}
+      </p>
+
+      <el-button type="primary" @click="readBlogClick(index)">阅读全文 »</el-button>
+      <hr/>
+    </div>
+
+    <el-pagination
+        v-model:current-page="blogStore.pageInfo.currentPage"
+        :page-size="blogStore.pageInfo.pageSize"
+        :total="blogStore.pageInfo.totalSize"
+        layout="total, prev, pager, next"
+        @current-change="changePageClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BlogLabel from '@/components/Blog/Content/BlogLabel.vue'
+import { useRouter } from 'vue-router'
+import { onMounted } from 'vue'
+import { useBlogStore } from '@/store/blog.ts'
+import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
+
+const router = useRouter()
+const blogStore = useBlogStore()
+
+onMounted(async () => {
+  await blogStore.queryBlog()
+})
+
+/**
+ * 点击阅读博客按钮
+ * @param index 索引
+ */
+const readBlogClick = async (index: number) => {
+  const blogId = blogStore.blogList[index].id
+  await router.push({ name: 'BlogDetailId', params: { id: blogId } })
+}
+
+/**
+ * 点击切换博客页数按钮
+ * @param page 页码
+ * @param pageSize 每页大小
+ */
+const changePageClick = async (page: number, pageSize: number) => {
+  blogStore.pageInfo.currentPage = page
+  blogStore.pageInfo.pageSize = pageSize
+  await blogStore.queryBlog()
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/blog/blog.overview.module.scss";
+</style>