refactor: 重构博客管理模块

src/apis/bill.ts

@@ -5,7 +5,6 @@ import {
   IBillPay,
   IBillQuery,
   IBillRecord,
-  IBillSummaryStats
 } from '@/types/bill'
 import { IStatsChart } from 'vue3-common/dist/types'
 
@@ -69,42 +68,42 @@ export const queryBillCategoryApi = (): Promise<IBillCategory[]> =>
 
 export const addBillPayApi = (billPay: IBillPay): Promise<boolean> =>
   cloudService({
-    url: '/admin-service/bill-manage/pay',
+    url: '/home-service/bill-manage/pay',
     method: 'post',
     data: billPay
   })
 
 export const updateBillPayApi = (id: number, billPay: IBillPay): Promise<boolean> =>
   cloudService({
-    url: `/admin-service/bill-manage/pay/${id}`,
+    url: `/home-service/bill-manage/pay/${id}`,
     method: 'put',
     data: billPay
   })
 
 export const addBillBookApi = (billBook: IBillBook): Promise<boolean> =>
   cloudService({
-    url: '/admin-service/bill-manage/book',
+    url: '/home-service/bill-manage/book',
     method: 'post',
     data: billBook
   })
 
 export const updateBillBookApi = (id: number, billBook: IBillBook): Promise<boolean> =>
   cloudService({
-    url: `/admin-service/bill-manage/book/${id}`,
+    url: `/home-service/bill-manage/book/${id}`,
     method: 'put',
     data: billBook
   })
 
 export const addBillCategoryApi = (billCategory: IBillCategory): Promise<boolean> =>
   cloudService({
-    url: '/admin-service/bill-manage/category',
+    url: '/home-service/bill-manage/category',
     method: 'post',
     data: billCategory
   })
 
 export const updateBillCategoryApi = (id: number, billCategory: IBillCategory): Promise<boolean> =>
   cloudService({
-    url: `/admin-service/bill-manage/category/${id}`,
+    url: `/home-service/bill-manage/category/${id}`,
     method: 'put',
     data: billCategory
   })

src/components/Home/Bill/BillBook.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="admin-module">
+  <div class="bill-setting">
     <div class="button-container">
       <el-button type="primary" @click="addNewBookClick">新增账本</el-button>
     </div>
@@ -10,28 +10,28 @@
         :header-cell-style="tableHeaderStyle()"
         :cell-style="tableCellStyle()"
         :row-style="tableRowStyle()"
-        style="width: 50%"
+        style="width: 100%"
         class="card-item">
-      <el-table-column type="index" align="center" width="50" />
+      <el-table-column type="index" align="center" width="50"/>
-      <el-table-column prop="name" label="名称" align="center" min-width="10%"/>
+      <el-table-column prop="name" label="名称" align="center" width="100"/>
-      <el-table-column label="图标" align="center" min-width="10%">
+      <el-table-column label="图标" align="center" width="80">
         <template #default="scope">
           <i :class="scope.row.icon" :style="{color: scope.row.color, fontSize: '24px'}"></i>
         </template>
       </el-table-column>
-      <el-table-column fixed="right" label="操作" align="center" width="200">
+      <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button type="primary" @click="editBookClick(scope.row)">编辑</el-button>
+          <el-button type="primary" size="small" @click="editBookClick(scope.row)">编辑</el-button>
-          <el-button type="danger" @click="deleteBookClick(scope.row)">删除</el-button>
+          <el-button type="danger" size="small" @click="deleteBookClick(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <el-dialog v-model="billInfo.billBookDialog.visible"
                :title="billInfo.billBookDialog.title"
-               center width="500" @open="openDialogEvent">
+               center width="80%" @open="openDialogEvent">
       <el-form ref="formRef" :model="billInfo.billBookDialog.data"
-               :rules="rules" label-width="100px">
+               :rules="rules" label-position="top" label-width="100px">
         <el-form-item label="账本名称" prop="name">
           <el-input v-model="billInfo.billBookDialog.data.name" autocomplete="off"
                     placeholder="请输入类型名称"

src/components/Home/Bill/BillCategory.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="admin-module">
+  <div class="bill-setting">
     <div class="button-container">
       <el-select
           v-model="billInfo.bookName"
@@ -24,32 +24,31 @@
         :row-style="tableRowStyle()"
         class="card-item">
       <el-table-column type="index" align="center" width="50"/>
-      <el-table-column prop="name" label="名称" align="center" min-width="10%"/>
+      <el-table-column prop="name" label="名称" align="center" width="80"/>
-      <el-table-column prop="bookName" label="账本" align="center" min-width="10%"/>
+      <el-table-column label="类型" align="center" width="80">
-      <el-table-column label="类型" align="center" min-width="10%">
         <template #default="scope">
           <el-tag v-if="scope.row.type === 'expensive'" effect="dark" color="#CA6C65">支出</el-tag>
           <el-tag v-else effect="dark" color="#6FBB69">收入</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="图标" align="center" min-width="10%">
+      <el-table-column label="图标" align="center" width="80">
         <template #default="scope">
           <i :class="scope.row.icon" :style="{color: scope.row.color, fontSize: '24px'}"></i>
         </template>
       </el-table-column>
-      <el-table-column fixed="right" label="操作" align="center" width="200">
+      <el-table-column label="操作" align="center" width="150">
         <template #default="scope">
-          <el-button type="primary" @click="editCategoryClick(scope.row)">编辑</el-button>
+          <el-button type="primary" size="small" @click="editCategoryClick(scope.row)">编辑</el-button>
-          <el-button type="danger" @click="deleteCategoryClick(scope.row)">删除</el-button>
+          <el-button type="danger" size="small" @click="deleteCategoryClick(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <el-dialog v-model="billInfo.billCategoryDialog.visible"
                :title="billInfo.billCategoryDialog.title"
-               center width="500" @open="openDialogEvent">
+               center width="80%" @open="openDialogEvent">
       <el-form ref="formRef" :model="billInfo.billCategoryDialog.data"
-               :rules="rules" label-width="100px">
+               :rules="rules" label-position="top" label-width="100px">
         <el-form-item label="账本名称" prop="bookName">
           <el-select
               v-model="billInfo.billCategoryDialog.data.bookName"

src/components/Home/Bill/BillPay.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="admin-module">
+  <div class="bill-setting">
     <div class="button-container">
       <el-button type="primary" @click="addNewPayClick">新增账户</el-button>
     </div>
@@ -10,28 +10,28 @@
         :header-cell-style="tableHeaderStyle()"
         :cell-style="tableCellStyle()"
         :row-style="tableRowStyle()"
-        style="width: 50%"
+        style="width: 100%"
         class="card-item">
       <el-table-column type="index" align="center" width="50" />
-      <el-table-column prop="name" label="名称" align="center" min-width="10%"/>
+      <el-table-column prop="name" label="名称" align="center" width="100"/>
-      <el-table-column label="图标" align="center" min-width="10%">
+      <el-table-column label="图标" align="center" width="80">
         <template #default="scope">
           <i :class="scope.row.icon" :style="{color: scope.row.color, fontSize: '24px'}"></i>
         </template>
       </el-table-column>
-      <el-table-column fixed="right" label="操作" align="center" width="200">
+      <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button type="primary" @click="editPayClick(scope.row)">编辑</el-button>
+          <el-button type="primary" size="small" @click="editPayClick(scope.row)">编辑</el-button>
-          <el-button type="danger" @click="deletePayClick(scope.row)">删除</el-button>
+          <el-button type="danger" size="small" @click="deletePayClick(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <el-dialog v-model="billInfo.billPayDialog.visible"
                :title="billInfo.billPayDialog.title"
-               center width="500" @open="openDialogEvent">
+               center width="80%" @open="openDialogEvent">
       <el-form ref="formRef" :model="billInfo.billPayDialog.data"
-               :rules="rules" label-width="100px">
+               :rules="rules" label-position="top" label-width="100px">
         <el-form-item label="账户名称" prop="name">
           <el-input v-model="billInfo.billPayDialog.data.name" autocomplete="off"
                     placeholder="请输入类型名称"

src/components/Home/Login/CommonLogin.vue

@@ -83,9 +83,9 @@ import { useUserStore } from '@/store/user'
 import { ElMessage, FormRules } from 'element-plus'
 import { onMounted, reactive, ref } from 'vue'
 import { loginRules } from '@/utils/element/elRules'
-import { isMobile } from 'vue3-common/utils/layoutUtil'
 import { getLocalStorage, setLocalStorage } from 'vue3-common/utils/storageUtil'
 import { ILoginType } from '@/types/auth'
+import {isMobile} from "vue3-common/utils/layoutUtil";
 
 const rules = reactive<FormRules>(loginRules)
 const authStore = useAuthStore()
@@ -106,6 +106,18 @@ const handleLogin = async (type: ILoginType) => {
     if (valid) {
       authStore.loginLoading = true
 
+      if (type === 'common' && !isMobile()) {
+        ElMessage.error("目前只支持移动端")
+        authStore.loginLoading = false
+        return
+      }
+
+      if (type === 'admin' && isMobile()) {
+        ElMessage.error("目前只支持PC端")
+        authStore.loginLoading = false
+        return
+      }
+
       try {
         await authStore.handleLogin(type)
         userStore.handleSession(authStore.homeSession)
@@ -115,10 +127,8 @@ const handleLogin = async (type: ILoginType) => {
           setLocalStorage('loginForm', JSON.stringify(authStore.loginForm))
         }
 
-        if (isMobile()) {
+        if (type === 'common') {
           await router.push('/mobile-home')
-        } else if (type === 'common') {
-          await router.push('/home')
         } else {
           await router.push('/admin')
         }

src/layout/mobile-home/TabBar.vue

@@ -15,6 +15,11 @@
       <i class="fa-solid fa-chart-pie"></i>
       <span>统计</span>
     </router-link>
+    <router-link v-if="path.includes('bill')" to="/mobile-home/bill/setting"
+                 @click="routerClick()" class="item">
+      <i class="fa-solid fa-gear"></i>
+      <span>设置</span>
+    </router-link>
 
     <router-link v-if="path.includes('food')" to="/mobile-home/food/recipe"
                  @click="routerClick()" class="item">

src/router/home.ts

@@ -1,12 +1,7 @@
-import HomeLayout from '@/layout/home/index.vue'
 import MobileHomeLayout from '@/layout/mobile-home/index.vue'
 import { getRoutersByModules, sortRoutesByOrder } from 'vue3-common/utils/routerUtil'
-import { homeMeta } from '@/views/home/meta'
 import { mobileHomeMeta } from '@/views/mobile-home/meta.ts'
-import { isMobile } from 'vue3-common/utils/layoutUtil'
 
-const homeRoutes = isMobile()
+const homeRoutes = getRoutersByModules(import.meta.glob('@/views/mobile-home/**/*.vue'), MobileHomeLayout, mobileHomeMeta)
-  ? getRoutersByModules(import.meta.glob('@/views/mobile-home/**/*.vue'), MobileHomeLayout, mobileHomeMeta)
-  : getRoutersByModules(import.meta.glob('@/views/home/**/*.vue'), HomeLayout, homeMeta)
 
 export default sortRoutesByOrder(homeRoutes)

src/styles/admin.layout.module.scss

@@ -190,11 +190,6 @@ $transition-time: 0.28s;
     flex-direction: column;
     align-items: center;
     gap: 1vh;
-
-    .button-container {
-      display: flex;
-      gap: 1vw;
-    }
   }
 
   .card-item {

src/styles/home/bill.mobile.module.scss

@@ -73,4 +73,17 @@
       width: 80px;
     }
   }
+
+  .bill-setting {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .button-container {
+      align-self: center;
+
+      display: flex;
+      gap: 10px;
+    }
+  }
 }

src/views/admin/blog/article.vue

@@ -28,8 +28,9 @@
       </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="200">
+      <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>
@@ -78,6 +79,14 @@ const addNewBlogClick = () => {
   router.push({ name: 'AdminBlogDetailId', params: { id: 0 } })
 }
 
+/**
+ * 点击预览博客按钮
+ * @param blog 博客
+ */
+const previewBlogClick = async (blog: IBlog) => {
+  await router.push({ name: 'AdminBlogPreviewId', params: { id: blog.id } })
+}
+
 /**
  * 点击编辑博客按钮
  * @param blog 博客

src/views/admin/blog/detail[id].vue

@@ -33,11 +33,8 @@
     <MdEditor v-model="blogStore.newBlog.content" @onUploadImg="onUploadImg"/>
 
     <div class="button-container">
-      <el-button type="primary" @click="submitFormEvent">保存</el-button>
-    </div>
-
-    <div class="back-button">
       <el-button type="primary" @click="backClick">返回</el-button>
+      <el-button type="primary" @click="submitFormEvent">保存</el-button>
     </div>
   </div>
 </template>
@@ -148,11 +145,5 @@ const backClick = () => {
   .md-editor {
     height: 80vh;
   }
-
-  .back-button {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-  }
 }
 </style>

src/views/admin/blog/preview[id].vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="admin-module">
+    <h3>{{ blogStore.currentBlog.title }}</h3>
+
+    <MdPreview editorId="blog-id" v-model="blogStore.currentBlog.content"/>
+
+    <div class="button-container">
+      <el-button type="primary" @click="backClick">返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { useBlogStore } from '@/store/blog.ts'
+import { MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
+import { useRouter, useRoute } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+const blogStore = useBlogStore()
+
+
+onMounted(async () => {
+  const blogId = route.params.id as number
+  await blogStore.queryAdminBlogById(blogId)
+  blogStore.newBlog = blogStore.currentBlog
+})
+
+const backClick = () => {
+  router.push('/admin/blog/article')
+}
+</script>

src/views/admin/meta.ts

@@ -20,49 +20,29 @@ export const adminMeta: IRouteMetaConfig = {
   '/admin/blog/article': {
     title: '文章管理',
     icon: '',
-    order: 1
   },
   '/admin/blog/category': {
     title: '类别管理',
     icon: '',
-    order: 2
   },
   '/admin/blog/visit': {
     title: '访问记录',
     icon: '',
-    order: 3
   },
   '/admin/blog/detail/:id': {
     title: '详细',
     icon: '',
-    order: 4,
     hidden: true
   },
-  '/admin/bill': {
+  '/admin/blog/preview/:id': {
-    title: '账单管理',
+    title: '详细',
-    icon: 'admin-bill',
-    order: 3,
-    redirect: '/admin/bill/book'
-  },
-  '/admin/bill/book': {
-    title: '账本管理',
     icon: '',
-    order: 1
+    hidden: true
-  },
-  '/admin/bill/pay': {
-    title: '账户管理',
-    icon: '',
-    order: 2
-  },
-  '/admin/bill/category': {
-    title: '类别管理',
-    icon: '',
-    order: 3
   },
   '/admin/quartz': {
     title: '定时任务',
     icon: 'admin-quartz',
-    order: 4,
+    order: 3,
     redirect: '/admin/quartz/index'
   },
   '/admin/quartz/index': {
@@ -72,7 +52,7 @@ export const adminMeta: IRouteMetaConfig = {
   '/admin/account': {
     title: '账号管理',
     icon: 'admin-account',
-    order: 5,
+    order: 4,
     redirect: '/admin/account/index'
   },
   '/admin/account/index': {

src/views/mobile-home/bill/setting.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="mobile-bill-view common-mobile-view">
+    <el-tabs v-model="activeName" type="card">
+      <el-tab-pane label="账本" name="book">
+        <bill-book />
+      </el-tab-pane>
+      <el-tab-pane label="账户" name="pay">
+        <bill-pay />
+      </el-tab-pane>
+      <el-tab-pane label="类别" name="category">
+        <bill-category />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BillBook from '@/components/Home/Bill/BillBook.vue'
+import BillPay from '@/components/Home/Bill/BillPay.vue'
+import BillCategory from '@/components/Home/Bill/BillCategory.vue'
+import { ref } from 'vue'
+
+const activeName = ref('book')
+</script>
+
+<style lang="scss">
+@use "@/styles/home/bill.mobile.module.scss";
+</style>

src/views/mobile-home/meta.ts

@@ -45,6 +45,10 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '账单内容',
     icon: ''
   },
+  '/mobile-home/bill/setting': {
+    title: '账单设置',
+    icon: ''
+  },
   '/mobile-home/food': {
     title: '美食记录',
     icon: 'home-food',