feat:初始化工程

src/components/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>