feat: 开发中...

2023-04-04 02:10:45 +08:00
parent 8b9df58c29
commit bb336c3c17
23 changed files with 335 additions and 181 deletions
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/PageableVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/PageableVO.java
@@ -1,8 +1,8 @@
 package cn.hamster3.application.blog.vo;

+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;
-import org.jetbrains.annotations.NotNull;
 import org.springframework.data.domain.Page;

 import java.util.List;
@@ -13,22 +13,27 @@ public class PageableVO<T> {
    /**
     * 当前查询页码
     */
-    private int pageNumber;
+    @NotNull
+    private Integer pageNumber;
    /**
     * 当前查询页面大小
     */
-    private int pageSize;
+    @NotNull
+    private Integer pageSize;
    /**
     * 总元素数量
     */
-    private long totalElements;
+    @NotNull
+    private Long totalElements;
    /**
     * 总页码
     */
-    private int totalPage;
+    @NotNull
+    private Integer totalPage;
    /**
     * 当前查询内容
     */
+    @NotNull
    private List<T> elements;

    @NotNull
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/ResponseVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/ResponseVO.java
@@ -46,5 +46,4 @@ public class ResponseVO<T> {
    public static <T> ResponseVO<T> notFound() {
        return new ResponseVO<>(404, "Not Found", null);
    }
-
 }
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/attach/AttachInfoResponseVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/attach/AttachInfoResponseVO.java
@@ -1,5 +1,6 @@
 package cn.hamster3.application.blog.vo.attach;

+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;

@@ -9,8 +10,12 @@ import java.util.UUID;
@Data
@AllArgsConstructor
 public class AttachInfoResponseVO {
+    @NotNull
    private Long id;
+    @NotNull
    private UUID creator;
+    @NotNull
    private Date createTime;
+    @NotNull
    private Date updateTime;
 }
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/blog/BlogInfoResponseVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/blog/BlogInfoResponseVO.java
@@ -3,6 +3,7 @@ package cn.hamster3.application.blog.vo.blog;
 import cn.hamster3.application.blog.vo.user.UserInfoResponseVO;
 import lombok.AllArgsConstructor;
 import lombok.Data;
+import jakarta.validation.constraints.NotNull;

 import java.util.Date;
 import java.util.Set;
@@ -10,17 +11,27 @@ import java.util.Set;
@Data
@AllArgsConstructor
 public class BlogInfoResponseVO {
+    @NotNull
    private Long id;
+    @NotNull
    private String title;
+    @NotNull
    private String abstracts;
-    //    private String password;
+    @NotNull
    private String content;
+    @NotNull
    private Boolean top;
+    @NotNull
    private Boolean publish;
+    @NotNull
    private Set<String> tags;
    //    private List<BlogAttachEntity> attachEntities;
+    @NotNull
    private UserInfoResponseVO creator;
+    @NotNull
    private UserInfoResponseVO updater;
+    @NotNull
    private Date createTime;
+    @NotNull
    private Date updateTime;
 }
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/setting/SettingInfoResponseVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/setting/SettingInfoResponseVO.java
@@ -1,5 +1,6 @@
 package cn.hamster3.application.blog.vo.setting;

+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;

@@ -8,8 +9,12 @@ import java.util.Date;
@Data
@AllArgsConstructor
 public class SettingInfoResponseVO {
+    @NotNull
    private String id;
+    @NotNull
    private String content;
+    @NotNull
    private Date createTime;
+    @NotNull
    private Date updateTime;
 }
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/setting/SettingUpdateRequireVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/setting/SettingUpdateRequireVO.java
@@ -1,5 +1,6 @@
 package cn.hamster3.application.blog.vo.setting;

+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.NoArgsConstructor;
@@ -8,5 +9,6 @@ import lombok.NoArgsConstructor;
@NoArgsConstructor
@AllArgsConstructor
 public class SettingUpdateRequireVO {
+    @NotNull
    private String content;
 }
--- a/blog-backend/src/main/java/cn/hamster3/application/blog/vo/user/UserInfoResponseVO.java
+++ b/blog-backend/src/main/java/cn/hamster3/application/blog/vo/user/UserInfoResponseVO.java
@@ -1,6 +1,7 @@
 package cn.hamster3.application.blog.vo.user;

 import cn.hamster3.application.blog.constant.UserRole;
+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;

@@ -10,12 +11,18 @@ import java.util.UUID;
@Data
@AllArgsConstructor
 public class UserInfoResponseVO {
+    @NotNull
    private UUID id;
+    @NotNull
    private String email;
+    @NotNull
    private String nickname;
+    @NotNull
    private UserRole role;
    //    private List<BlogEntity> blogEntities;
 //    private List<AttachEntity> attachEntities;
+    @NotNull
    private Date createTime;
+    @NotNull
    private Date updateTime;
 }
--- a/blog-frontend/src/components/BlogCardComponent.vue
+++ b/blog-frontend/src/components/BlogCardComponent.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import router from "@/router";
+
+import type { BlogInfoResponseVO } from "@/swagger";
+
+const props = defineProps<{
+  blog: BlogInfoResponseVO;
+}>();
+
+function showBlog() {
+  router.push("/blog/" + props.blog.id + "/read/");
+}
+
+function showCreator() {
+  console.log("showCreator");
+}
+
+function showUpdater() {
+  console.log("showUpdater");
+}
+</script>
+
+<template>
+  <el-card class="blog-card">
+    <template #header>
+      <div class="blog-card-header">
+        <p @click="showBlog" class="blog-card-title">{{ blog.title }}</p>
+        <div>
+          <p>
+            <el-avatar :size="24" src="/favicon.ico" />
+            {{ blog.creator?.nickname }}
+          </p>
+          <p @click="showCreator" class="blog-card-creater">
+            {{ " 发表于：" + blog.updateTime?.toLocaleString() }}
+          </p>
+        </div>
+      </div>
+    </template>
+    <div class="blog-card-body">
+      <div class="blog-card-abstract" v-html="blog.abstracts"></div>
+      <div class="blog-card-footer">
+        <div @click="showUpdater">
+          <p>
+            {{ " 最后修改于：" + blog.updateTime?.toLocaleString() }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+.blog-card {
+  width: 100%;
+  cursor: pointer;
+}
+
+.blog-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.blog-card-header :hover {
+  text-decoration: underline;
+}
+
+.blog-card-title {
+  font-size: x-large;
+}
+
+.blog-card-creater {
+  font-size: medium;
+}
+
+.blog-card-abstract {
+  font-size: medium;
+  margin-bottom: 20px;
+}
+
+.blog-card-footer {
+  padding-top: 20px;
+  border: 1px solid #ccc;
+  border-bottom-width: 0;
+  border-left-width: 0;
+  border-right-width: 0;
+}
+.blog-card-footer :hover {
+  text-decoration: underline;
+}
+</style>
--- a/blog-frontend/src/components/BlogComponent.vue
+++ b/blog-frontend/src/components/BlogComponent.vue
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import router from "@/router";
-
-import type { BlogInfoResponseVO } from "@/swagger";
-
-const props = defineProps<{
-  blog: BlogInfoResponseVO;
-}>();
-
-function showBlog() {
-  router.push("/blog/" + props.blog.id + "/read/");
-}
-
-function showCreator() {
-  console.log("showCreator");
-}
-
-function 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>
-</template>
-
-<style scoped>
-.blog-card {
-  width: 100%;
-  cursor: pointer;
-}
-
-.blog-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.blog-card-header :hover {
-  text-decoration: underline;
-}
-
-.blog-card-footer :hover {
-  text-decoration: underline;
-}
-
-.item {
-  margin-bottom: 18px;
-}
-</style>
--- a/blog-frontend/src/components/HeaderComponent.vue
+++ b/blog-frontend/src/components/HeaderComponent.vue
@@ -43,6 +43,7 @@ function onSelectMenu(index: string) {
    mode="horizontal"
    :ellipsis="false"
    @select="onSelectMenu"
+    class="blog-header-menu"
  >
    <el-menu-item index="/">
      {{ siteSetting.title }}
--- a/blog-frontend/src/swagger/models/attach-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/attach-info-response-vo.ts
@@ -22,23 +22,23 @@ export interface AttachInfoResponseVO {
     * @type {number}
     * @memberof AttachInfoResponseVO
     */
-    id?: number;
+    id: number;
    /**
     * 
     * @type {string}
     * @memberof AttachInfoResponseVO
     */
-    creator?: string;
+    creator: string;
    /**
     * 
     * @type {Date}
     * @memberof AttachInfoResponseVO
     */
-    createTime?: Date;
+    createTime: Date;
    /**
     * 
     * @type {Date}
     * @memberof AttachInfoResponseVO
     */
-    updateTime?: Date;
+    updateTime: Date;
 }
--- a/blog-frontend/src/swagger/models/blog-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/blog-info-response-vo.ts
@@ -23,65 +23,65 @@ export interface BlogInfoResponseVO {
     * @type {number}
     * @memberof BlogInfoResponseVO
     */
-    id?: number;
+    id: number;
    /**
     * 
     * @type {string}
     * @memberof BlogInfoResponseVO
     */
-    title?: string;
+    title: string;
    /**
     * 
     * @type {string}
     * @memberof BlogInfoResponseVO
     */
-    abstracts?: string;
+    abstracts: string;
    /**
     * 
     * @type {string}
     * @memberof BlogInfoResponseVO
     */
-    content?: string;
+    content: string;
    /**
     * 
     * @type {boolean}
     * @memberof BlogInfoResponseVO
     */
-    top?: boolean;
+    top: boolean;
    /**
     * 
     * @type {boolean}
     * @memberof BlogInfoResponseVO
     */
-    publish?: boolean;
+    publish: boolean;
    /**
     * 
     * @type {Array<string>}
     * @memberof BlogInfoResponseVO
     */
-    tags?: Array<string>;
+    tags: Array<string>;
    /**
     * 
     * @type {UserInfoResponseVO}
     * @memberof BlogInfoResponseVO
     */
-    creator?: UserInfoResponseVO;
+    creator: UserInfoResponseVO;
    /**
     * 
     * @type {UserInfoResponseVO}
     * @memberof BlogInfoResponseVO
     */
-    updater?: UserInfoResponseVO;
+    updater: UserInfoResponseVO;
    /**
     * 
     * @type {Date}
     * @memberof BlogInfoResponseVO
     */
-    createTime?: Date;
+    createTime: Date;
    /**
     * 
     * @type {Date}
     * @memberof BlogInfoResponseVO
     */
-    updateTime?: Date;
+    updateTime: Date;
 }
--- a/blog-frontend/src/swagger/models/pageable-voattach-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/pageable-voattach-info-response-vo.ts
@@ -23,29 +23,29 @@ export interface PageableVOAttachInfoResponseVO {
     * @type {number}
     * @memberof PageableVOAttachInfoResponseVO
     */
-    page?: number;
+    pageNumber: number;
    /**
     * 
     * @type {number}
     * @memberof PageableVOAttachInfoResponseVO
     */
-    size?: number;
+    pageSize: number;
    /**
     * 
     * @type {number}
     * @memberof PageableVOAttachInfoResponseVO
     */
-    totalElements?: number;
+    totalElements: number;
    /**
     * 
     * @type {number}
     * @memberof PageableVOAttachInfoResponseVO
     */
-    totalPage?: number;
+    totalPage: number;
    /**
     * 
     * @type {Array<AttachInfoResponseVO>}
     * @memberof PageableVOAttachInfoResponseVO
     */
-    elements?: Array<AttachInfoResponseVO>;
+    elements: Array<AttachInfoResponseVO>;
 }
--- a/blog-frontend/src/swagger/models/pageable-voblog-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/pageable-voblog-info-response-vo.ts
@@ -23,29 +23,29 @@ export interface PageableVOBlogInfoResponseVO {
     * @type {number}
     * @memberof PageableVOBlogInfoResponseVO
     */
-    page?: number;
+    pageNumber: number;
    /**
     * 
     * @type {number}
     * @memberof PageableVOBlogInfoResponseVO
     */
-    size?: number;
+    pageSize: number;
    /**
     * 
     * @type {number}
     * @memberof PageableVOBlogInfoResponseVO
     */
-    totalElements?: number;
+    totalElements: number;
    /**
     * 
     * @type {number}
     * @memberof PageableVOBlogInfoResponseVO
     */
-    totalPage?: number;
+    totalPage: number;
    /**
     * 
     * @type {Array<BlogInfoResponseVO>}
     * @memberof PageableVOBlogInfoResponseVO
     */
-    elements?: Array<BlogInfoResponseVO>;
+    elements: Array<BlogInfoResponseVO>;
 }
--- a/blog-frontend/src/swagger/models/pageable-vosetting-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/pageable-vosetting-info-response-vo.ts
@@ -23,29 +23,29 @@ export interface PageableVOSettingInfoResponseVO {
     * @type {number}
     * @memberof PageableVOSettingInfoResponseVO
     */
-    page?: number;
+    pageNumber: number;
    /**
     * 
     * @type {number}
     * @memberof PageableVOSettingInfoResponseVO
     */
-    size?: number;
+    pageSize: number;
    /**
     * 
     * @type {number}
     * @memberof PageableVOSettingInfoResponseVO
     */
-    totalElements?: number;
+    totalElements: number;
    /**
     * 
     * @type {number}
     * @memberof PageableVOSettingInfoResponseVO
     */
-    totalPage?: number;
+    totalPage: number;
    /**
     * 
     * @type {Array<SettingInfoResponseVO>}
     * @memberof PageableVOSettingInfoResponseVO
     */
-    elements?: Array<SettingInfoResponseVO>;
+    elements: Array<SettingInfoResponseVO>;
 }
--- a/blog-frontend/src/swagger/models/pageable-vouser-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/pageable-vouser-info-response-vo.ts
@@ -23,29 +23,29 @@ export interface PageableVOUserInfoResponseVO {
     * @type {number}
     * @memberof PageableVOUserInfoResponseVO
     */
-    page?: number;
+    pageNumber: number;
    /**
     * 
     * @type {number}
     * @memberof PageableVOUserInfoResponseVO
     */
-    size?: number;
+    pageSize: number;
    /**
     * 
     * @type {number}
     * @memberof PageableVOUserInfoResponseVO
     */
-    totalElements?: number;
+    totalElements: number;
    /**
     * 
     * @type {number}
     * @memberof PageableVOUserInfoResponseVO
     */
-    totalPage?: number;
+    totalPage: number;
    /**
     * 
     * @type {Array<UserInfoResponseVO>}
     * @memberof PageableVOUserInfoResponseVO
     */
-    elements?: Array<UserInfoResponseVO>;
+    elements: Array<UserInfoResponseVO>;
 }
--- a/blog-frontend/src/swagger/models/setting-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/setting-info-response-vo.ts
@@ -22,23 +22,23 @@ export interface SettingInfoResponseVO {
     * @type {string}
     * @memberof SettingInfoResponseVO
     */
-    id?: string;
+    id: string;
    /**
     * 
     * @type {string}
     * @memberof SettingInfoResponseVO
     */
-    content?: string;
+    content: string;
    /**
     * 
     * @type {Date}
     * @memberof SettingInfoResponseVO
     */
-    createTime?: Date;
+    createTime: Date;
    /**
     * 
     * @type {Date}
     * @memberof SettingInfoResponseVO
     */
-    updateTime?: Date;
+    updateTime: Date;
 }
--- a/blog-frontend/src/swagger/models/setting-update-require-vo.ts
+++ b/blog-frontend/src/swagger/models/setting-update-require-vo.ts
@@ -22,5 +22,5 @@ export interface SettingUpdateRequireVO {
     * @type {string}
     * @memberof SettingUpdateRequireVO
     */
-    content?: string;
+    content: string;
 }
--- a/blog-frontend/src/swagger/models/user-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/user-info-response-vo.ts
@@ -22,37 +22,37 @@ export interface UserInfoResponseVO {
     * @type {string}
     * @memberof UserInfoResponseVO
     */
-    id?: string;
+    id: string;
    /**
     * 
     * @type {string}
     * @memberof UserInfoResponseVO
     */
-    email?: string;
+    email: string;
    /**
     * 
     * @type {string}
     * @memberof UserInfoResponseVO
     */
-    nickname?: string;
+    nickname: string;
    /**
     * 
     * @type {string}
     * @memberof UserInfoResponseVO
     */
-    role?: UserInfoResponseVORoleEnum;
+    role: UserInfoResponseVORoleEnum;
    /**
     * 
     * @type {Date}
     * @memberof UserInfoResponseVO
     */
-    createTime?: Date;
+    createTime: Date;
    /**
     * 
     * @type {Date}
     * @memberof UserInfoResponseVO
     */
-    updateTime?: Date;
+    updateTime: Date;
 }

 /**
--- a/blog-frontend/src/views/BlogEditView.vue
+++ b/blog-frontend/src/views/BlogEditView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, shallowRef } from "vue";
+import { onMounted, reactive, ref, shallowRef } from "vue";
 import { useRoute } from "vue-router";

 import "@wangeditor/editor/dist/css/style.css";
@@ -10,62 +10,159 @@ import type {
  IEditorConfig,
 } from "@wangeditor/editor";

-import { api } from "@/api";
-import type { BlogInfoResponseVO } from "@/swagger";
+import { api, globalStore } from "@/api";
+import type { BlogInfoResponseVO, BlogUpdateRequireVO } from "@/swagger";
+import { ElMessage } from "element-plus";
+import router from "@/router";

 const editorRef = shallowRef();
 const toolbarConfig: IToolbarConfig = {};
 const editorConfig: IEditorConfig = {};
-const content = ref<string>("<p>hello</p>");

-const handleCreated = (editor: IDomEditor) => {
-  editorRef.value = editor; // 记录 editor 实例，重要！
-};
-const blogInfo = ref<BlogInfoResponseVO>();
+const editBlog = reactive<BlogUpdateRequireVO>({
+  title: "",
+  content: "",
+  tags: [],
+});
+let tags = ref<string>();
+const blogID = parseInt(useRoute().params.id.toString());

-const blogID = useRoute().params.id.toString();
-if (blogID) {
-  api.BlogController.getBlogInfo(parseInt(blogID)).then((resp) => {
+onMounted(() => {
+  if (blogID) {
+    api.BlogController.getBlogInfo(blogID).then((resp) => {
      const vo = resp.data;
-    blogInfo.value = vo.content || {};
+      if (vo.code === 200) {
+        const blog = vo.content;
+        editBlog.title = blog?.title ?? "";
+        editBlog.abstracts = blog?.abstracts;
+        editBlog.tags = blog?.tags ?? [];
+        editBlog.top = blog?.top;
+        editBlog.publish = blog?.publish;
+        editBlog.content = blog?.content ?? "";
+        tags.value = blog?.tags.toString();
+      } else {
+        ElMessage({
+          type: "error",
+          message: "加载博文内容失败：" + vo.msg,
        });
+        location.pathname = "/";
+        console.log("not login!");
+      }
+    });
+  } else {
+    ElMessage({
+      type: "error",
+      message: "加载博文内容失败！",
+    });
+    location.pathname = "/";
+    console.log("not login!");
+  }
+});
+
+function saveBlog() {
+  api.BlogController.updateBlog(editBlog, blogID).then((resp) => {
+    const vo = resp.data;
+    if (vo.code === 200) {
+      ElMessage({
+        type: "success",
+        message: "更新博文成功！",
+      });
+      console.log("update blog " + blogID + " success!");
+      router.push("/blog/" + blogID + "/read/");
+    } else {
+      ElMessage({
+        type: "error",
+        message: "更新博文失败: " + vo.msg,
+      });
+    }
+  });
+}
+
+function cancelSave() {
+  router.push("/blog/" + blogID + "/read/");
+}
+
+function handleCreated(editor: IDomEditor) {
+  editorRef.value = editor; // 记录 editor 实例，重要！
 }
 </script>

 <template>
-  <el-form> </el-form>
+  <el-container class="edit-container">
+    <el-aside class="edit-content-side">
+      <div class="edit-content-toolbar">
        <Toolbar
-    class="editor-toolbar"
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          mode="default"
        />
-  <div class="editor">
+      </div>
+      <el-scrollbar class="edit-content-scrollbar">
        <Editor
-      v-model="content"
+          v-model="editBlog.content"
          :defaultConfig="editorConfig"
          mode="default"
          @onCreated="handleCreated"
        />
-  </div>
+      </el-scrollbar>
+    </el-aside>
+    <el-main>
+      <el-form :model="editBlog">
+        <el-form-item label="博文标题">
+          <el-input
+            placeholder="博文标题"
+            maxlength="128"
+            show-word-limit
+            v-model="editBlog.title"
+          />
+        </el-form-item>
+        <el-form-item label="博文摘要">
+          <el-input
+            placeholder="博文摘要"
+            maxlength="512"
+            show-word-limit
+            type="textarea"
+            v-model="editBlog.abstracts"
+          />
+        </el-form-item>
+        <el-form-item label="标签">
+          <el-input placeholder="用 '|' 隔开" v-model="tags" />
+        </el-form-item>
+        <el-form-item label="是否置顶">
+          <el-switch v-model="editBlog.top" />
+        </el-form-item>
+        <el-form-item label="是否公开">
+          <el-switch v-model="editBlog.publish" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="saveBlog">保存</el-button>
+          <el-button @click="cancelSave">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-main>
+  </el-container>
 </template>

 <style scoped>
-.editor-div {
+.edit-container {
  height: 100%;
+  padding: 0 20px 0 20px;
+  margin: 0;
+}
+
+.edit-content-side {
+  height: 100%;
+  width: 80%;
+}
+
+.edit-content-toolbar {
+  height: 80px;
  border: 1px solid #ccc;
+  border-top-width: 0;
 }
-
-.editor-toolbar {
-  border-bottom: 1px solid #ccc;
-  height: auto;
-}
-
-.editor-scrollbar {
-  height: 100%;
-}
-
-.editor {
-  height: 80%;
+.edit-content-scrollbar {
+  height: calc(100% - 80px);
+  border: 1px solid #ccc;
+  border-bottom: 0;
 }
 </style>
--- a/blog-frontend/src/views/BlogReadView.vue
+++ b/blog-frontend/src/views/BlogReadView.vue
@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import { useRoute } from "vue-router";

-import { api } from "@/api";
+import { api, globalStore } from "@/api";
 import router from "@/router";
 import type { BlogInfoResponseVO } from "@/swagger";

@@ -12,7 +12,7 @@ const blogID = useRoute().params.id.toString();
 if (blogID) {
  api.BlogController.getBlogInfo(parseInt(blogID)).then((resp) => {
    const vo = resp.data;
-    blogInfo.value = vo.content || {};
+    blogInfo.value = vo.content;
  });
 }

@@ -30,19 +30,20 @@ function deleteBlog() {
    <el-header class="blog-header">
      <el-row :gutter="20">
        <el-col :span="4">
-          <h1>{{ blogInfo?.creator?.nickname }}</h1>
+          <p>{{ blogInfo?.creator.nickname }}</p>
        </el-col>
        <el-col :span="16">
          <h1 class="blog-title">{{ blogInfo?.title }}</h1>
        </el-col>
-        <el-col :span="4">
+        <el-col :span="4" v-if="globalStore.currentUserInfo?.role === 'ADMIN'">
          <el-button type="primary" @click="editBlog">编辑</el-button>
          <el-button type="danger" @click="deleteBlog">删除</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="blog-main">
-      <el-scrollbar class="blog-content" v-html="blogInfo?.content">
+      <el-scrollbar class="blog-content">
+        <div v-html="blogInfo?.content"></div>
      </el-scrollbar>
    </el-main>
  </el-container>
@@ -63,8 +64,13 @@ function deleteBlog() {
  text-align: center;
 }

+.blog-author {
+  font-size: x-large;
+  white-space: nowrap;
+}
+
 .blog-title {
-  font-size: xx-large;
+  font-size: x-large;
 }

 .blog-content {
@@ -74,5 +80,6 @@ function deleteBlog() {

 .blog-main {
  width: 100%;
+  padding: 0;
 }
 </style>
--- a/blog-frontend/src/views/IndexView.vue
+++ b/blog-frontend/src/views/IndexView.vue
@@ -2,7 +2,7 @@
 import { reactive } from "vue";

 import { api } from "@/api";
-import BlogComponent from "@/components/BlogComponent.vue";
+import BlogCardComponent from "@/components/BlogCardComponent.vue";
 import type { BlogInfoResponseVO } from "@/swagger";

 let page = 0;
@@ -17,13 +17,12 @@ function load() {
      item.updateTime = new Date(item?.updateTime ?? 0);
      blogs.push(item);
    }
-    console.log(page);
-    if (page?.elements?.length ?? 0 > 0) {
+    if (page?.elements.length ?? 0 > 0) {
      console.log(
        "loaded page " +
-          page?.page +
+          page?.pageNumber +
          " for element count: " +
-          page?.elements?.length
+          page?.elements.length
      );
    }
  });
@@ -35,7 +34,7 @@ function load() {
  <el-scrollbar style="overflow: auto">
    <ul class="infinite-list" v-infinite-scroll="load">
      <li v-for="blog in blogs" :key="blog.id" class="infinite-list-item">
-        <BlogComponent :blog="blog"></BlogComponent>
+        <BlogCardComponent :blog="blog" v-if="blog.publish"></BlogCardComponent>
      </li>
    </ul>
  </el-scrollbar>
--- a/blog-frontend/src/views/RegisterView.vue
+++ b/blog-frontend/src/views/RegisterView.vue
@@ -13,7 +13,7 @@ const form = reactive<{
 });

 const onSubmit = () => {
-  api.UserController.register(form).then((resp) => {
+  api.UserController.registerUser(form).then((resp) => {
    let vo = resp.data;
    if (vo.code === 200) {
      console.log("register success!");