feat:移植工程

src/views/mobile-home/blog/archive.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="blog-archive blog-section common-mobile-view">
+    <el-date-picker
+        v-model="currentYear"
+        type="year" placeholder="请选择年份"
+        style="width: 100px"
+        @change="changeDateEvent"
+    />
+
+    <span class="total">共计{{ blogStore.blogList.length }}篇文章</span>
+
+    <el-timeline class="time-line card-item">
+      <el-timeline-item v-for="(value, index) in blogStore.blogList" :key="index">
+        <div class="item">
+          <span class="date">{{ value.createTime }}</span>
+          <span class="title" @click="viewBlogClick(index)">{{ value.title }}</span>
+        </div>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBlogStore } from '@/store/blog.ts'
+import { useRouter } from 'vue-router'
+import { onMounted, ref } from 'vue'
+
+const blogStore = useBlogStore()
+const router = useRouter()
+const currentYear = ref(new Date())
+
+onMounted(() => {
+  blogStore.queryBlogByCondition({
+    year: (new Date()).getFullYear()
+  })
+})
+
+/**
+ * 选择年份事件
+ * @param value 年份
+ */
+const changeDateEvent = async (value: Date) => {
+  await blogStore.queryBlogByCondition({
+    year: value.getFullYear()
+  })
+}
+
+/**
+ * 点击查看博客按钮
+ * @param index 索引
+ */
+const viewBlogClick = async (index: number) => {
+  const blogId = blogStore.blogList[index].id
+  await router.push({ name: 'MobileHomeBlogDetailId', params: { id: blogId } })
+}
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/blog/blog.archive.module.scss";
+</style>

src/views/mobile-home/blog/category.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="blog-category blog-section common-mobile-view">
+    <span class="total">目前共计{{ blogStore.blogCategoryList.length }}个分类</span>
+
+    <div class="category-list card-item">
+      <div v-for="(item, index) in blogStore.blogCategoryList"
+           :key="index" class="item" @click="viewBlogCategoryClick(item.name)">
+        <i class="fa-solid fa-book"></i>
+        <div class="content">
+          <span class="label">{{ item.name }}</span>
+          <span class="value">共 {{ item.count }} 篇文档</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBlogStore } from '@/store/blog.ts'
+import { useAppStore } from '@/store/app.ts'
+import { useRouter } from 'vue-router'
+import { onMounted } from 'vue'
+
+const blogStore = useBlogStore()
+const appStore = useAppStore()
+const router = useRouter()
+
+onMounted(() => {
+  blogStore.queryBlogCategory()
+})
+
+/**
+ * 点击查看博客分类信息
+ * @param name 类别名称
+ */
+const viewBlogCategoryClick = async (name: string) => {
+  appStore.isShowMobileBack = true
+  await router.push({ name: 'MobileHomeBlogCategoryName', params: { name } })
+}
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/blog/blog.category.module.scss";
+</style>

src/views/mobile-home/blog/category[name].vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="blog-category-detail blog-section common-mobile-view">
+    <span class="name">{{ route.params?.name }}</span>
+
+    <div class="category-detail-list card-item">
+      <div v-for="(item, index) in blogStore.blogList"
+           :key="index" class="item" @click="viewBlogClick(index)">
+        <span class="number">{{ index+1 }}</span>
+        <span class="date">{{ item?.createTime }}</span>
+        <span class="title">{{ item.title }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBlogStore } from '@/store/blog.ts'
+import { useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
+import { onMounted } from 'vue'
+
+const blogStore = useBlogStore()
+const router = useRouter()
+const route = useRoute()
+
+onMounted(async () => {
+  const categoryName = route.params.name as string
+  await blogStore.queryBlogByCondition({
+    category: categoryName
+  })
+})
+
+const viewBlogClick = async (index: number) => {
+  const blogId = blogStore.blogList[index].id
+  await router.push({ name: 'BlogDetailId', params: { id: blogId } })
+}
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/blog/blog.category.detail.module.scss";
+</style>

src/views/mobile-home/blog/detail[id].vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="blog-detail-mobile blog-section common-mobile-view" 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/views/mobile-home/blog/overview.vue

@@ -0,0 +1,76 @@
+<template>
+  <div ref="blogOverviewRef" class="blog-content-list blog-section common-mobile-view">
+    <div v-if="blogStore.blogList.length === 0"
+         class="blog-content blog-content-empty" >
+    </div>
+
+    <div class="blog-content blog-content-summary card-item"
+         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>
+
+    <arrive-bottom v-if="blogStore.isScrollEnd"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BlogLabel from '@/components/Blog/Content/BlogLabel.vue'
+import ArriveBottom from '@/components/Mobile/ArriveButton.vue'
+import { useRouter } from 'vue-router'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { useBlogStore } from '@/store/blog.ts'
+import { getBasicBlog } from '@/utils/blog/blogUtil.ts'
+
+const blogOverviewRef = ref()
+const router = useRouter()
+const blogStore = useBlogStore()
+
+onMounted(async () => {
+  blogStore.pageInfo = {
+    currentPage: 1,
+    pageSize: 3,
+    totalSize: 1
+  }
+  blogStore.blogList = []
+  await blogStore.queryMobileBlog()
+  blogOverviewRef.value.addEventListener('scroll', handleScroll)
+})
+
+onBeforeUnmount(() => {
+  blogOverviewRef.value.removeEventListener('scroll', handleScroll)
+})
+
+/**
+ * 点击阅读博客按钮
+ * @param index 索引
+ */
+const readBlogClick = async (index: number) => {
+  const blogId = blogStore.blogList[index].id
+  await router.push({ name: 'MobileHomeBlogDetailId', params: { id: blogId } })
+}
+
+const handleScroll = () => {
+  const el = blogOverviewRef.value
+  if (el.scrollTop + el.clientHeight >= el.scrollHeight - 10) {
+    const { currentPage, pageSize, totalSize } = blogStore.pageInfo
+    blogStore.isScrollEnd = pageSize * currentPage > totalSize
+    if (!blogStore.isScrollEnd) {
+      blogStore.pageInfo.currentPage++
+      blogStore.queryMobileBlog()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/blog/blog.overview.module.scss";
+</style>