feat:重构模块

2025-09-22 19:42:28 +08:00
parent b0935a05fd
commit e8a3339f43
32 changed files with 132 additions and 6542 deletions
--- a/src/views/blog/article.vue
+++ b/src/views/blog/article.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="admin-module">
+    <div class="button-container">
+      <el-button type="primary" @click="addNewBlogClick">新增文章</el-button>
+    </div>
+
+    <el-table
+        :data="blogStore.blogList"
+        border stripe
+        :header-cell-style="tableHeaderStyle()"
+        :cell-style="tableCellStyle()"
+        :row-style="tableRowStyle()"
+        class="card-item">
+      <el-table-column type="index" align="center" width="50" />
+      <el-table-column prop="title" label="标题" align="center" min-width="10%"/>
+      <el-table-column prop="category" label="类别" align="center" min-width="10%" />
+      <el-table-column label="精品" align="center" min-width="10%">
+        <template #default="scope">
+          <el-tag type="success" v-if="scope.row.isGreat">是</el-tag>
+          <el-tag type="danger" v-else>否</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="置顶" align="center" min-width="10%">
+        <template #default="scope">
+          <el-tag type="success" v-if="scope.row.topValue > 1">是</el-tag>
+          <el-tag type="danger" v-else>否</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="wordCount" label="字数" align="center" min-width="10%" />
+      <el-table-column prop="visitCount" label="阅读次数" align="center" min-width="10%" />
+      <el-table-column fixed="right" label="操作" align="center" width="250">
+        <template #default="scope">
+          <el-button type="primary" @click="previewBlogClick(scope.row)">预览</el-button>
+          <el-button type="primary" @click="editBlogClick(scope.row)">编辑</el-button>
+          <el-button type="danger" @click="deleteBlogClick(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+        v-model:current-page="blogStore.pageInfo.currentPage"
+        :page-size="blogStore.pageInfo.pageSize"
+        :total="blogStore.pageInfo.totalSize"
+        layout="total, prev, pager, next"
+        @change="changePageClick"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { useBlogStore } from '@/store/blog.ts'
+import { IBlog } from '@/types/blog.ts'
+import { commonElMessageBox, tableCellStyle, tableHeaderStyle, tableRowStyle } from 'vue3-common/utils/elUtil'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const blogStore = useBlogStore()
+
+onMounted(async () => {
+  await blogStore.queryBlogList()
+})
+
+/**
+ * 点击切换博客页数按钮
+ * @param page 页码
+ * @param pageSize 每页大小
+ */
+const changePageClick = async (page: number, pageSize: number) => {
+  blogStore.pageInfo.currentPage = page
+  blogStore.pageInfo.pageSize = pageSize
+  await blogStore.queryBlogList()
+}
+
+/**
+ * 点击新增博客按钮
+ */
+const addNewBlogClick = () => {
+  router.push({ name: 'BlogDetailId', params: { id: 0 } })
+}
+
+/**
+ * 点击预览博客按钮
+ * @param blog 博客
+ */
+const previewBlogClick = async (blog: IBlog) => {
+  await router.push({ name: 'BlogPreviewId', params: { id: blog.id } })
+}
+
+/**
+ * 点击编辑博客按钮
+ * @param blog 博客
+ */
+const editBlogClick = async (blog: IBlog) => {
+  await router.push({ name: 'BlogDetailId', params: { id: blog.id } })
+}
+
+/**
+ * 点击删除博客按钮
+ * @param blog 博客
+ */
+const deleteBlogClick = (blog: IBlog) => {
+  blogStore.blogApiType = 'DELETE'
+
+  commonElMessageBox('是否确认删除该博客?').then(() => {
+    blogStore.handleBlogApi(blog.id)
+  })
+}
+</script>