feat: 开发中...

blog-frontend/src/components/HeaderComponent.vue

@@ -8,6 +8,7 @@ import { UserInfoResponseVORoleEnum } from "@/swagger";
 const menuIndex = ref<string>(document.location.pathname);
 
 onMounted(() => {
+  menuIndex.value = document.location.pathname;
   // 获取站点标题
   api.SettingController.getSettingContent(siteSetting.keys.site.title).then(
     (response) => {

blog-frontend/src/views/BlogReadView.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
 import { ref } from "vue";
 import { useRoute } from "vue-router";
 
 import { api, globalStore } from "@/api";
 import router from "@/router";
 import type { BlogInfoResponseVO } from "@/swagger";
+import { ElMessage } from "element-plus";
 
 const blogInfo = ref<BlogInfoResponseVO>();
 
-const blogID = useRoute().params.id.toString();
+const blogID = parseInt(useRoute().params.id.toString());
 if (blogID) {
-  api.BlogController.getBlogInfo(parseInt(blogID)).then((resp) => {
+  api.BlogController.getBlogInfo(blogID).then((resp) => {
     const vo = resp.data;
     blogInfo.value = vo.content;
   });
@@ -21,6 +23,21 @@ function editBlog() {
 }
 
 function deleteBlog() {
+  api.BlogController.removeBlog(blogID).then((resp) => {
+    const vo = resp.data;
+    if (vo.code === 200) {
+      ElMessage({
+        type: "success",
+        message: "博文删除成功！",
+      });
+      router.push("/");
+    } else {
+      ElMessage({
+        type: "warning",
+        message: "博文删除失败：" + vo.msg,
+      });
+    }
+  });
   console.log("deleteBlog " + blogID);
 }
 </script>
@@ -50,10 +67,10 @@ function deleteBlog() {
   </el-container>
 </template>
 
-<style scoped>
+<style>
 .blog-container {
   padding: 0;
-  margin: 0;
+  margin: 0 auto;
   height: 100%;
   width: 100%;
 }
@@ -89,7 +106,30 @@ function deleteBlog() {
 }
 
 .blog-content {
-  width: 100%;
+  width: 95%;
+  margin: 0 auto;
   overflow-x: hidden;
 }
+.blog-content > h1,
+h2,
+h3,
+h4,
+h5 {
+  line-height: 64px;
+}
+
+.blog-content > p {
+  line-height: 24px;
+}
+
+.blog-content > * {
+  font-family: system-ui;
+  font-size: normal;
+}
+
+.blog-content > pre {
+  margin: 12px 0 12px 0;
+  padding: 12px 12px 12px 12px;
+  background-color: #ccc;
+}
 </style>

blog-frontend/src/views/IndexView.vue

@@ -42,21 +42,20 @@ function load() {
 
 <style scoped>
 .infinite-list {
+  width: 95%;
   height: 100%;
   padding: 0;
-  margin: 0;
+  margin: 0 auto;
   list-style: none;
-  margin-right: 10px;
 }
 
 .infinite-list .infinite-list-item {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 10px;
 }
 
-.infinite-list .infinite-list-item {
-  margin-top: 10px;
+ .infinite-list-item {
+  margin: 10px 10px 0 10px;
 }
 </style>