feat: 开发中...

blog-frontend/package.json

@@ -10,6 +10,7 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
+    "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.3.4",
     "element-plus": "^2.2.32",

blog-frontend/src/api/index.ts

@@ -1,3 +1,2 @@
 export * from "./api.js";
 export * from "./global-store.js";
-export * from "@/swagger";

blog-frontend/src/components/BlogComponent.vue

@@ -1,69 +1,75 @@
-
-
 <script setup lang="ts">
-import router from '@/router';
+import router from "@/router";
 
-import type { BlogInfoResponseVO } from '@/swagger';
+import type { BlogInfoResponseVO } from "@/swagger";
 
 const props = defineProps<{
-    blog: BlogInfoResponseVO
-}>()
+  blog: BlogInfoResponseVO;
+}>();
 
 function showBlog() {
-    router.push("/blog/" + props.blog.id + "/read/")
+  router.push("/blog/" + props.blog.id + "/read/");
 }
 
 function showCreator() {
-    console.log("showCreator")
+  console.log("showCreator");
 }
 
 function showUpdater() {
-    console.log("showUpdater")
+  console.log("showUpdater");
 }
 </script>
 
 <template>
-    <el-card class="blog-card">
-        <template #header>
-            <div class="blog-card-header">
-                <p @click="showBlog">{{ blog.title }}</p>
-                <p @click="showCreator">
-                    <el-avatar :size="24" src="/favicon.ico" />
-                    {{ blog.creator?.nickname + ' 发表于：' + blog.updateTime?.toLocaleString() }}
-                </p>
-            </div>
-        </template>
-        <div class="blog-card-content" v-html="blog.content"> </div>
-        <div class="blog-card-footer">
-            <p @click="showUpdater">
-                <el-avatar :size="24" src="/favicon.ico" />
-                {{ blog.updater?.nickname + ' 最后修改于：' + blog.updateTime?.toLocaleString() }}
-            </p>
-        </div>
-    </el-card>
+  <el-card class="blog-card">
+    <template #header>
+      <div class="blog-card-header">
+        <p @click="showBlog">{{ blog.title }}</p>
+        <p @click="showCreator">
+          <el-avatar :size="24" src="/favicon.ico" />
+          {{
+            blog.creator?.nickname +
+            " 发表于：" +
+            blog.updateTime?.toLocaleString()
+          }}
+        </p>
+      </div>
+    </template>
+    <div class="blog-card-content" v-html="blog.content"></div>
+    <div class="blog-card-footer">
+      <p @click="showUpdater">
+        <el-avatar :size="24" src="/favicon.ico" />
+        {{
+          blog.updater?.nickname +
+          " 最后修改于：" +
+          blog.updateTime?.toLocaleString()
+        }}
+      </p>
+    </div>
+  </el-card>
 </template>
 
 <style scoped>
 .blog-card {
-    width: 100%;
-    cursor: pointer;
+  width: 100%;
+  cursor: pointer;
 }
 
 .blog-card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .blog-card-header :hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 .blog-card-footer :hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 .item {
-    margin-bottom: 18px;
+  margin-bottom: 18px;
 }
 </style>

blog-frontend/src/components/HeaderComponent.vue

@@ -1,13 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 
-import {
-  UserInfoResponseVORoleEnum,
-  api,
-  globalStore,
-  siteSetting,
-} from "@/api";
+import { api, globalStore, siteSetting } from "@/api";
 import router from "@/router";
+import { UserInfoResponseVORoleEnum } from "@/swagger";
 
 const menuIndex = ref<string>(document.location.pathname);
 

blog-frontend/src/components/manage/SiteManageComponent.vue

@@ -19,9 +19,9 @@ function changeSetting(id: string, content: string) {
     }
   });
 }
+
 function changeFooterHTML(htmlText: string) {
   siteSetting.footer = htmlText;
-
   changeSetting(siteSetting.keys.site.footer, htmlText);
 }
 
@@ -29,8 +29,6 @@ function changeCustomCSS(cssText: string) {
   let cssElement = document.getElementById("custom-css");
   siteSetting.css = cssText;
   if (cssElement != null) cssElement.innerText = cssText;
-  // prettier
-
   changeSetting(siteSetting.keys.site.css, cssText);
 }
 </script>

blog-frontend/src/router/index.ts

@@ -1,50 +1,50 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      name: 'index',
-      component: () => import('@/views/IndexView.vue')
+      path: "/",
+      name: "index",
+      component: () => import("@/views/IndexView.vue"),
     },
     {
-      path: '/register',
-      name: 'register',
-      component: () => import('@/views/RegisterView.vue')
+      path: "/register",
+      name: "register",
+      component: () => import("@/views/RegisterView.vue"),
     },
     {
-      path: '/login',
-      name: 'login',
-      component: () => import('@/views/LoginView.vue')
+      path: "/login",
+      name: "login",
+      component: () => import("@/views/LoginView.vue"),
     },
     {
-      path: '/manage',
-      name: 'manage',
-      component: () => import('@/views/ManagePaneView.vue')
+      path: "/manage",
+      name: "manage",
+      component: () => import("@/views/ManagePaneView.vue"),
     },
     {
-      path: '/tags',
-      name: 'tags',
-      component: () => import('@/views/TagsView.vue')
+      path: "/tags",
+      name: "tags",
+      component: () => import("@/views/TagsView.vue"),
     },
     {
-      path: '/blog/:id',
-      name: 'blog',
+      path: "/blog/:id",
+      name: "blog",
       children: [
         {
-          path: 'read',
-          name: 'read',
-          component: () => import('@/views/BlogReadView.vue')
+          path: "read",
+          name: "read",
+          component: () => import("@/views/BlogReadView.vue"),
         },
         {
-          path: 'edit',
-          name: 'edit',
-          component: () => import('@/views/BlogEditView.vue')
-        }
-      ]
+          path: "edit",
+          name: "edit",
+          component: () => import("@/views/BlogEditView.vue"),
+        },
+      ],
     },
-  ]
-})
+  ],
+});
 
-export default router
+export default router;

blog-frontend/src/views/BlogReadView.vue

@@ -3,8 +3,8 @@ import { ref } from "vue";
 import { useRoute } from "vue-router";
 
 import { api } from "@/api";
-import type { BlogInfoResponseVO } from "@/swagger";
 import router from "@/router";
+import type { BlogInfoResponseVO } from "@/swagger";
 
 const blogInfo = ref<BlogInfoResponseVO>();
 
@@ -16,24 +16,35 @@ if (blogID) {
   });
 }
 
-function edit() {
+function editBlog() {
   router.push("/blog/" + blogID + "/edit/");
 }
+
+function deleteBlog() {
+  console.log("deleteBlog " + blogID);
+}
 </script>
 
 <template>
   <el-container class="blog-container">
     <el-header class="blog-header">
-      <h1 class="blog-title">{{ blogInfo?.title }}</h1>
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <h1>{{ blogInfo?.creator?.nickname }}</h1>
+        </el-col>
+        <el-col :span="16">
+          <h1 class="blog-title">{{ blogInfo?.title }}</h1>
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary" @click="editBlog">编辑</el-button>
+          <el-button type="danger" @click="deleteBlog">删除</el-button>
+        </el-col>
+      </el-row>
     </el-header>
-    <el-container>
-      <el-aside width="200px" class="blog-aside">
-        <el-button type="primary" @click="edit">编辑</el-button>
-      </el-aside>
-      <el-container>
-        <el-main v-html="blogInfo?.content"> </el-main>
-      </el-container>
-    </el-container>
+    <el-main class="blog-main">
+      <el-scrollbar class="blog-content" v-html="blogInfo?.content">
+      </el-scrollbar>
+    </el-main>
   </el-container>
 </template>
 
@@ -46,25 +57,22 @@ function edit() {
 }
 
 .blog-header {
-  background-color: aqua;
-  height: auto;
-  padding: 5px 0 5px 0;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  margin: 0;
+  text-align: center;
 }
 
 .blog-title {
-  text-align: center;
   font-size: xx-large;
 }
 
-.blog-aside {
-  border-width: 0 1px 0 0;
-  border-style: solid;
-}
-
 .blog-content {
+  height: 100%;
+  width: 100%;
 }
 
-.flex-grow {
-  flex-grow: 1;
+.blog-main {
+  width: 100%;
 }
 </style>

blog-frontend/src/views/IndexView.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { reactive } from "vue";
+
+import { api } from "@/api";
 import BlogComponent from "@/components/BlogComponent.vue";
-import { api, type BlogInfoResponseVO } from "@/api";
+import type { BlogInfoResponseVO } from "@/swagger";
 
 let page = 0;
 const blogs = reactive<Array<BlogInfoResponseVO>>([]);

blog-frontend/src/views/LoginView.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { reactive } from "vue";
-import router from "@/router";
 
 import { ElMessage } from "element-plus";
 
 import { api } from "@/api";
+import router from "@/router";
 
 const form = reactive({
   email: "",

blog-frontend/src/views/ManagePaneView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import SiteManageComponent from "@/components/manage/SiteManageComponent.vue";
+
 import { globalStore } from "@/api";
+import SiteManageComponent from "@/components/manage/SiteManageComponent.vue";
 
 const activeName = ref<string>("site");