feat:移植工程
This commit is contained in:
62
src/components/Blog/Archive/BlogArchive.vue
Normal file
62
src/components/Blog/Archive/BlogArchive.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="blog-archive blog-section">
|
||||
<h4 class="module-title">文章归档</h4>
|
||||
|
||||
<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">
|
||||
<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: 'BlogDetail', params: { id: blogId } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/styles/blog/blog.archive.module.scss";
|
||||
</style>
|
||||
40
src/components/Blog/Category/BlogCategory.vue
Normal file
40
src/components/Blog/Category/BlogCategory.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="blog-category blog-section">
|
||||
<h4 class="module-title">文章分类</h4>
|
||||
|
||||
<span class="total">目前共计{{ blogStore.blogCategoryList.length }}个分类</span>
|
||||
|
||||
<div class="category-list">
|
||||
<div v-for="(item, index) in blogStore.blogCategoryList"
|
||||
:key="index" class="item" @click="viewBlogCategoryClick(item.name)">
|
||||
<span class="label">{{ item.name }}</span>
|
||||
<span class="value">{{ `(${item.count})` }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useBlogStore } from '@/store/blog.ts'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const blogStore = useBlogStore()
|
||||
const router = useRouter()
|
||||
|
||||
onMounted(() => {
|
||||
blogStore.queryBlogCategory()
|
||||
})
|
||||
|
||||
/**
|
||||
* 点击查看博客分类信息
|
||||
* @param name 类别名称
|
||||
*/
|
||||
const viewBlogCategoryClick = async (name: string) => {
|
||||
await router.push({ name: 'BlogCategoryName', params: { name } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "@/styles/blog/blog.category.module.scss";
|
||||
</style>
|
||||
41
src/components/Blog/Category/BlogCategoryDetail.vue
Normal file
41
src/components/Blog/Category/BlogCategoryDetail.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="blog-category-detail blog-section">
|
||||
<span class="name">{{ route.params?.name }}</span>
|
||||
|
||||
<div class="category-detail-list">
|
||||
<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>
|
||||
55
src/components/Blog/Content/BlogDetail.vue
Normal file
55
src/components/Blog/Content/BlogDetail.vue
Normal file
@@ -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>
|
||||
92
src/components/Blog/Content/BlogLabel.vue
Normal file
92
src/components/Blog/Content/BlogLabel.vue
Normal file
@@ -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>
|
||||
68
src/components/Blog/Content/BlogOverview.vue
Normal file
68
src/components/Blog/Content/BlogOverview.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user