feat: 开发中...

2023-04-03 20:59:23 +08:00
parent e2bdd6a674
commit f2981ace22
52 changed files with 1576 additions and 847 deletions
--- a/blog-frontend/index.html
+++ b/blog-frontend/index.html
@@ -1,18 +1,16 @@
 <!DOCTYPE html>
 <html>
-
-<head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="叁只仓鼠的个人博客">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="叁只仓鼠的个人博客" />
    <title>网站标题</title>
-    <style id="custom-css"> </style>
-</head>
+    <style id="custom-css"></style>
+  </head>

-<body>
+  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
-</body>
-
-</html>
+  </body>
+</html>
--- a/blog-frontend/package-lock.json
+++ b/blog-frontend/package-lock.json
--- a/blog-frontend/package.json
+++ b/blog-frontend/package.json
@@ -10,6 +10,7 @@
    "type-check": "vue-tsc --noEmit"
  },
  "dependencies": {
+    "@wangeditor/editor-for-vue": "^5.1.12",
    "axios": "^1.3.4",
    "element-plus": "^2.2.32",
    "vue": "^3.2.45",
--- a/blog-frontend/src/App.vue
+++ b/blog-frontend/src/App.vue
@@ -1,61 +1,63 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
-import { RouterView } from 'vue-router'
-import HeaderComponent from "@/components/HeaderComponent.vue"
-import FooterComponent from "@/components/FooterComponent.vue"
+import { onMounted } from "vue";
+import { RouterView } from "vue-router";
+import HeaderComponent from "@/components/HeaderComponent.vue";
+import FooterComponent from "@/components/FooterComponent.vue";

-import { api, globalStore, siteSetting } from '@/api';
+import { api, globalStore, siteSetting } from "@/api";

 globalStore.load();

 // 获取当前登录的用户信息
 api.updateCurrentUserInfo();
 onMounted(() => {
-  api.SettingController.getSettingContent(siteSetting.keys.site.css)
-    .then(resp => {
-      const vo = resp.data
+  api.SettingController.getSettingContent(siteSetting.keys.site.css).then(
+    (resp) => {
+      const vo = resp.data;
      if (vo.code === 200) {
-        const cssText = vo.data ?? ""
-        let cssElement = document.getElementById("custom-css")
-        siteSetting.css = cssText
-        if (cssElement != null) cssElement.innerText = cssText
+        const cssText = vo.content ?? "";
+        let cssElement = document.getElementById("custom-css");
+        siteSetting.css = cssText;
+        if (cssElement != null) cssElement.innerText = cssText;
      }
-    })
-})
-
+    }
+  );
+});
 </script>

 <template>
-  <el-container class="blog-container">
-    <el-header class="blog-header">
+  <el-container class="app-container">
+    <el-header class="app-header">
      <HeaderComponent />
    </el-header>
-    <el-main class="blog-main">
+    <el-main class="app-main">
      <RouterView />
    </el-main>
-    <el-footer class="blog-footer">
+    <el-footer class="app-footer">
      <FooterComponent />
    </el-footer>
  </el-container>
 </template>

 <style scoped>
-.blog-container {
+.app-container {
  width: 100%;
  height: 100%;
 }

-.blog-header {
-  height: auto;
+.app-header {
+  margin: 0;
 }

-.blog-main {
-  height: auto;
-}
-
-.blog-footer {
+.app-main {
  padding: 0;
-  height: auto;
-  background-color: aqua;
+  margin: 0;
+  width: 100%;
+}
+
+.app-footer {
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: aqua;
 }
 </style>
--- a/blog-frontend/src/api/api.ts
+++ b/blog-frontend/src/api/api.ts
@@ -1,29 +1,34 @@
-import { UserControllerApiFactory, BlogControllerApiFactory, SettingControllerApiFactory, AttachControllerApiFactory, Configuration } from "@/swagger"
-import { globalStore } from "./global-store"
+import {
+  UserControllerApiFactory,
+  BlogControllerApiFactory,
+  SettingControllerApiFactory,
+  AttachControllerApiFactory,
+  Configuration,
+} from "@/swagger";
+import { globalStore } from "./global-store";

 export const apiConfig: Configuration = {
-    baseOptions: {
-        withCredentials: true
-    }
-}
+  baseOptions: {
+    withCredentials: true,
+  },
+};

 export const api = {
-    AttachController: AttachControllerApiFactory(apiConfig),
-    UserController: UserControllerApiFactory(apiConfig),
-    BlogController: BlogControllerApiFactory(apiConfig),
-    SettingController: SettingControllerApiFactory(apiConfig),
-    updateCurrentUserInfo: function () {
-        this.UserController.getCurrentUserInfo()
-            .then(resp => {
-                let vo = resp.data
-                if (vo.code === 200) {
-                    globalStore.currentUserInfo = vo.data
-                    console.log("current user info: ", vo.data)
-                } else {
-                    globalStore.currentUserInfo = undefined
-                    console.warn("ckeck current user info failed!")
-                }
-                globalStore.save()
-            })
-    }
-}
+  AttachController: AttachControllerApiFactory(apiConfig),
+  UserController: UserControllerApiFactory(apiConfig),
+  BlogController: BlogControllerApiFactory(apiConfig),
+  SettingController: SettingControllerApiFactory(apiConfig),
+  updateCurrentUserInfo: function () {
+    this.UserController.getCurrentUserInfo().then((resp) => {
+      let vo = resp.data;
+      if (vo.code === 200) {
+        globalStore.currentUserInfo = vo.content;
+        console.log("current user info: ", vo.content);
+      } else {
+        globalStore.currentUserInfo = undefined;
+        console.warn("ckeck current user info failed!");
+      }
+      globalStore.save();
+    });
+  },
+};
--- a/blog-frontend/src/api/global-store.ts
+++ b/blog-frontend/src/api/global-store.ts
@@ -1,39 +1,32 @@
-import { reactive, ref } from "vue"
+import { reactive, ref } from "vue";

-import type { UserInfoResponseVO } from "@/swagger"
+import type { UserInfoResponseVO } from "@/swagger";

 export const globalStore = reactive<{
-    currentUserInfo?: UserInfoResponseVO,
-    load: Function
-    save: Function
+  currentUserInfo?: UserInfoResponseVO;
+  load: Function;
+  save: Function;
 }>({
-    load: function () {
-        this.currentUserInfo = JSON.parse(window.localStorage.getItem("currentUserInfo") || "{}")
-        console.log("local storage user info: ", this.currentUserInfo)
-    },
-    save: function () {
-        if (this.currentUserInfo?.id) {
-            window.localStorage.setItem("currentUserInfo", JSON.stringify(this.currentUserInfo))
-        } else {
-            window.localStorage.removeItem("currentUserInfo")
-        }
-    }
-})
+  load: function () {},
+  save: function () {},
+});

 export const siteSetting = reactive({
-    keys: {
-        site: {
-            title: "site.title",
-            navigation: "site.navigation",
-            css: "site.css",
-            footer: "site.footer"
-        }
+  keys: {
+    site: {
+      title: "site.title",
+      navigation: "site.navigation",
+      css: "site.css",
+      footer: "site.footer",
    },
-    title: "网站标题",
-    footer: "",
-    css: "",
-    navigation: ref<Array<{
-        url: string,
-        text: string
-    }>>(),
-})
+  },
+  title: "网站标题",
+  footer: "",
+  css: "",
+  navigation: ref<
+    Array<{
+      url: string;
+      text: string;
+    }>
+  >(),
+});
--- a/blog-frontend/src/api/index.ts
+++ b/blog-frontend/src/api/index.ts
@@ -1,3 +1,3 @@
-export * from "./api.js"
-export * from "./global-store.js"
-export * from "@/swagger"
+export * from "./api.js";
+export * from "./global-store.js";
+export * from "@/swagger";
--- a/blog-frontend/src/assets/base.css
+++ b/blog-frontend/src/assets/base.css
@@ -65,10 +65,11 @@ body {
  background: var(--color-background);
  transition: color 0.5s, background-color 0.5s;
  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-}
+}
--- a/blog-frontend/src/assets/main.css
+++ b/blog-frontend/src/assets/main.css
@@ -1,4 +1,4 @@
-@import './base.css';
+@import "./base.css";

 html,
 body,
@@ -7,4 +7,4 @@ body,
  height: 100%;
  margin: 0;
  padding: 0;
-}
+}
--- a/blog-frontend/src/components/BlogComponent.vue
+++ b/blog-frontend/src/components/BlogComponent.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()

 function showBlog() {
-    router.push("/blog/" + props.blog.id + "/")
+    router.push("/blog/" + props.blog.id + "/read/")
 }

 function showCreator() {
--- a/blog-frontend/src/components/FooterComponent.vue
+++ b/blog-frontend/src/components/FooterComponent.vue
@@ -1,44 +1,41 @@
-
 <script setup lang="ts">
-import { onMounted } from 'vue';
-import { api, siteSetting } from '@/api';
+import { onMounted } from "vue";
+import { api, siteSetting } from "@/api";

 onMounted(() => {
-    // 获取站点页脚
-    api.SettingController.getSettingContent(siteSetting.keys.site.footer)
-        .then(response => {
-            let vo = response.data;
-            if (vo.code === 200) {
-                let title = vo.data ?? ""
-                siteSetting.footer = title
-            }
-        })
-})
+  // 获取站点页脚
+  api.SettingController.getSettingContent(siteSetting.keys.site.footer).then(
+    (resp) => {
+      let vo = resp.data;
+      if (vo.code === 200) {
+        siteSetting.footer = vo.content ?? "";
+      } else {
+        console.warn("error on get site footer: " + vo.msg);
+      }
+    }
+  );
+});
 </script>

 <template>
-    <p class="footer-text">
-        <a href="https://cn.vuejs.org/">Vue3</a>
-        |
-        <a href="https://router.vuejs.org/zh/">Vue Router</a>
-        |
-        <a href="https://element-plus.gitee.io/zh-CN/">Element UI Plus</a>
-        |
-        <a href="/swagger-ui/index.html">Swagger</a>
-        |
-        <a href="https://editor.swagger.io/">Swagger Editor</a>
-    </p>
-    <p class="footer-text">{{ siteSetting.footer }}</p>
-    <p class="footer-text">
-        <a
-            href="https://wakatime.com/badge/user/c10390d9-fe36-43e9-b9c9-26fa3c018b61/project/3d0e9b5e-f213-478b-ae46-f4e70196bfe4"><img
-                src="https://wakatime.com/badge/user/c10390d9-fe36-43e9-b9c9-26fa3c018b61/project/3d0e9b5e-f213-478b-ae46-f4e70196bfe4.svg"
-                alt="wakatime"></a>
-    </p>
+  <p class="footer-line">
+    <a href="https://cn.vuejs.org/">Vue3</a>
+    |
+    <a href="https://router.vuejs.org/zh/">Vue Router</a>
+    |
+    <a href="https://element-plus.gitee.io/zh-CN/">Element UI Plus</a>
+    |
+    <a href="https://www.wangeditor.com/">wangEditor 5</a>
+    |
+    <a href="/swagger-ui/index.html">Swagger</a>
+    |
+    <a href="https://editor.swagger.io/">Swagger Editor</a>
+  </p>
+  <div class="footer-line" v-html="siteSetting.footer"></div>
 </template>

 <style scoped>
-.footer-text {
-    text-align: center;
+.footer-line {
+  text-align: center;
 }
-</style>
+</style>
--- a/blog-frontend/src/components/HeaderComponent.vue
+++ b/blog-frontend/src/components/HeaderComponent.vue
@@ -1,72 +1,88 @@
-
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted } from "vue";

-import { UserInfoResponseVORoleEnum, api, globalStore, siteSetting } from "@/api"
-import router from '@/router';
+import {
+  UserInfoResponseVORoleEnum,
+  api,
+  globalStore,
+  siteSetting,
+} from "@/api";
+import router from "@/router";

-const menuIndex = ref<string>(document.location.pathname)
+const menuIndex = ref<string>(document.location.pathname);

 onMounted(() => {
-    // 获取站点标题
-    api.SettingController.getSettingContent(siteSetting.keys.site.title)
-        .then(response => {
-            let vo = response.data;
-            if (vo.code === 200) {
-                let title = vo.data ?? "网站标题"
-                siteSetting.title = title
-                document.title = title
-            }
-        })
-})
+  // 获取站点标题
+  api.SettingController.getSettingContent(siteSetting.keys.site.title).then(
+    (response) => {
+      let vo = response.data;
+      if (vo.code === 200) {
+        let title = vo.content ?? "网站标题";
+        siteSetting.title = title;
+        document.title = title;
+      }
+    }
+  );
+});

 function onSelectMenu(index: string) {
-    switch (index) {
-        case '/logout': {
-            globalStore.currentUserInfo = undefined
-            globalStore.save()
-            router.push("/")
-            menuIndex.value = "/"
-            break;
-        }
-        default: {
-            router.push(index)
-        }
+  switch (index) {
+    case "/logout": {
+      globalStore.currentUserInfo = undefined;
+      globalStore.save();
+      router.push("/");
+      menuIndex.value = "/";
+      break;
    }
+    default: {
+      router.push(index);
+    }
+  }
 }
 </script>

 <template>
-    <el-menu :default-active="menuIndex" mode="horizontal" :ellipsis="false" @select="onSelectMenu">
-        <el-menu-item index="/">
-            {{ siteSetting.title }}
-        </el-menu-item>
-        <el-menu-item index="/tags">
-            标签
-        </el-menu-item>
-        <el-menu-item v-for="customMenu in siteSetting.navigation" :index="customMenu.text">
-            {{ customMenu.text }}
-        </el-menu-item>
+  <el-menu
+    :default-active="menuIndex"
+    mode="horizontal"
+    :ellipsis="false"
+    @select="onSelectMenu"
+  >
+    <el-menu-item index="/">
+      {{ siteSetting.title }}
+    </el-menu-item>
+    <el-menu-item index="/tags"> 标签 </el-menu-item>
+    <el-menu-item
+      v-for="customMenu in siteSetting.navigation"
+      :index="customMenu.text"
+    >
+      {{ customMenu.text }}
+    </el-menu-item>

-        <div class="flex-grow" />
+    <div class="flex-grow" />

-        <el-menu-item index="/login" v-if="!globalStore.currentUserInfo?.id">
-            登录
-        </el-menu-item>
-        <el-menu-item index="/register" v-if="!globalStore.currentUserInfo?.id">
-            注册
-        </el-menu-item>
-        <el-menu-item index="/manage" v-if="globalStore.currentUserInfo?.role === UserInfoResponseVORoleEnum.ADMIN">
-            管理面板
-        </el-menu-item>
-        <el-menu-item index="/logout" v-if="globalStore.currentUserInfo?.id">
-            注销
-        </el-menu-item>
-    </el-menu>
+    <el-menu-item index="/login" v-if="!globalStore.currentUserInfo?.id">
+      登录
+    </el-menu-item>
+    <el-menu-item index="/register" v-if="!globalStore.currentUserInfo?.id">
+      注册
+    </el-menu-item>
+    <el-menu-item
+      index="/manage"
+      v-if="
+        globalStore.currentUserInfo?.role === UserInfoResponseVORoleEnum.ADMIN
+      "
+    >
+      管理面板
+    </el-menu-item>
+    <el-menu-item index="/logout" v-if="globalStore.currentUserInfo?.id">
+      注销
+    </el-menu-item>
+  </el-menu>
 </template>

 <style scoped>
 .flex-grow {
-    flex-grow: 1;
+  flex-grow: 1;
 }
-</style>
+</style>
--- a/blog-frontend/src/components/manage/SiteManageComponent.vue
+++ b/blog-frontend/src/components/manage/SiteManageComponent.vue
@@ -1,28 +1,67 @@
-
 <script setup lang="ts">
-import { api, siteSetting } from '@/api';
+import { api, siteSetting } from "@/api";
+import { ElMessage } from "element-plus";
+
 function changeSetting(id: string, content: string) {
-    api.SettingController.updateSetting({ content }, id)
+  api.SettingController.updateSetting({ content }, id).then((resp) => {
+    const vo = resp.data;
+    if (vo.code === 200) {
+      console.log("success change setting '" + id + "' to '" + content + "'");
+      ElMessage({
+        type: "success",
+        message: "更新设置成功！",
+      });
+    } else {
+      ElMessage({
+        type: "error",
+        message: "更新站点设置失败: " + vo.msg,
+      });
+    }
+  });
+}
+function changeFooterHTML(htmlText: string) {
+  siteSetting.footer = htmlText;
+
+  changeSetting(siteSetting.keys.site.footer, htmlText);
 }

 function changeCustomCSS(cssText: string) {
-    let cssElement = document.getElementById("custom-css")
-    siteSetting.css = cssText
-    if (cssElement != null) cssElement.innerText = cssText
-    api.SettingController.updateSetting({ "content": cssText }, siteSetting.keys.site.css)
+  let cssElement = document.getElementById("custom-css");
+  siteSetting.css = cssText;
+  if (cssElement != null) cssElement.innerText = cssText;
+  // prettier
+
+  changeSetting(siteSetting.keys.site.css, cssText);
 }
 </script>
+
 <template>
-    <el-input v-model="siteSetting.title" placeholder="网站标题"
-        @change="changeSetting(siteSetting.keys.site.title, siteSetting.title)" show-word-limit maxlength="10" />
-    <el-input v-model="siteSetting.footer" placeholder="页脚文本（支持HTML）"
-        @change="changeSetting(siteSetting.keys.site.footer, siteSetting.footer)" show-word-limit maxlength="1024" />
-    <el-input v-model="siteSetting.css" placeholder="自定义CSS" @change="changeCustomCSS(siteSetting.css)" type="textarea"
-        autosize />
+  <el-input
+    v-model="siteSetting.title"
+    placeholder="网站标题"
+    @change="changeSetting(siteSetting.keys.site.title, siteSetting.title)"
+    show-word-limit
+    maxlength="10"
+  />
+  <el-input
+    type="textarea"
+    show-word-limit
+    maxlength="1024"
+    v-model="siteSetting.footer"
+    placeholder="页脚文本（支持HTML）"
+    @change="changeFooterHTML(siteSetting.footer)"
+  />
+  <el-input
+    type="textarea"
+    autosize
+    v-model="siteSetting.css"
+    placeholder="自定义CSS"
+    @change="changeCustomCSS(siteSetting.css)"
+  />
 </template>

 <style scoped>
 .el-input {
-    margin-bottom: 5px;
+  margin-bottom: 5px;
 }
-</style>
+</style>
--- a/blog-frontend/src/main.ts
+++ b/blog-frontend/src/main.ts
@@ -1,12 +1,12 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";

-import './assets/main.css'
-import 'element-plus/dist/index.css'
+import "./assets/main.css";
+import "element-plus/dist/index.css";

-const app = createApp(App)
+const app = createApp(App);

-app.use(router)
+app.use(router);

-app.mount('#app')
+app.mount("#app");
--- a/blog-frontend/src/router/index.ts
+++ b/blog-frontend/src/router/index.ts
@@ -29,9 +29,20 @@ const router = createRouter({
      component: () => import('@/views/TagsView.vue')
    },
    {
-      path: '/blog/:id/',
+      path: '/blog/:id',
      name: 'blog',
-      component: () => import('@/views/BlogReadView.vue')
+      children: [
+        {
+          path: 'read',
+          name: 'read',
+          component: () => import('@/views/BlogReadView.vue')
+        },
+        {
+          path: 'edit',
+          name: 'edit',
+          component: () => import('@/views/BlogEditView.vue')
+        }
+      ]
    },
  ]
 })
--- a/blog-frontend/src/swagger/apis/blog-controller-api.ts
+++ b/blog-frontend/src/swagger/apis/blog-controller-api.ts
@@ -18,8 +18,8 @@ import { Configuration } from '../configuration';
 import { BASE_PATH, COLLECTION_FORMATS, RequestArgs, BaseAPI, RequiredError } from '../base';
 import { BlogUpdateRequireVO } from '../models';
 import { ResponseVOBlogInfoResponseVO } from '../models';
-import { ResponseVOListBlogInfoResponseVO } from '../models';
 import { ResponseVOLong } from '../models';
+import { ResponseVOPageableVOBlogInfoResponseVO } from '../models';
 import { ResponseVOVoid } from '../models';
 /**
 * BlogControllerApi - axios parameter creator
@@ -296,7 +296,7 @@ export const BlogControllerApiFp = function(configuration?: Configuration) {
         * @param {*} [options] Override http request option.
         * @throws {RequiredError}
         */
-        async getBlogInfoList(page: number, size: number, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOListBlogInfoResponseVO>>> {
+        async getBlogInfoList(page: number, size: number, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOPageableVOBlogInfoResponseVO>>> {
            const localVarAxiosArgs = await BlogControllerApiAxiosParamCreator(configuration).getBlogInfoList(page, size, options);
            return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
                const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
@@ -369,7 +369,7 @@ export const BlogControllerApiFactory = function (configuration?: Configuration,
         * @param {*} [options] Override http request option.
         * @throws {RequiredError}
         */
-        async getBlogInfoList(page: number, size: number, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOListBlogInfoResponseVO>> {
+        async getBlogInfoList(page: number, size: number, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOPageableVOBlogInfoResponseVO>> {
            return BlogControllerApiFp(configuration).getBlogInfoList(page, size, options).then((request) => request(axios, basePath));
        },
        /**
@@ -434,7 +434,7 @@ export class BlogControllerApi extends BaseAPI {
     * @throws {RequiredError}
     * @memberof BlogControllerApi
     */
-    public async getBlogInfoList(page: number, size: number, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOListBlogInfoResponseVO>> {
+    public async getBlogInfoList(page: number, size: number, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOPageableVOBlogInfoResponseVO>> {
        return BlogControllerApiFp(this.configuration).getBlogInfoList(page, size, options).then((request) => request(this.axios, this.basePath));
    }
    /**
--- a/blog-frontend/src/swagger/apis/user-controller-api.ts
+++ b/blog-frontend/src/swagger/apis/user-controller-api.ts
@@ -322,10 +322,10 @@ export const UserControllerApiAxiosParamCreator = function (configuration?: Conf
         * @param {*} [options] Override http request option.
         * @throws {RequiredError}
         */
-        register: async (body: UserCreateRequireVO, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+        registerUser: async (body: UserCreateRequireVO, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
            // verify required parameter 'body' is not null or undefined
            if (body === null || body === undefined) {
-                throw new RequiredError('body','Required parameter body was null or undefined when calling register.');
+                throw new RequiredError('body','Required parameter body was null or undefined when calling registerUser.');
            }
            const localVarPath = `/api/v1/user/`;
            // use dummy base URL string because the URL constructor only accepts absolute URLs.
@@ -511,8 +511,8 @@ export const UserControllerApiFp = function(configuration?: Configuration) {
         * @param {*} [options] Override http request option.
         * @throws {RequiredError}
         */
-        async register(body: UserCreateRequireVO, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOUserInfoResponseVO>>> {
-            const localVarAxiosArgs = await UserControllerApiAxiosParamCreator(configuration).register(body, options);
+        async registerUser(body: UserCreateRequireVO, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => Promise<AxiosResponse<ResponseVOUserInfoResponseVO>>> {
+            const localVarAxiosArgs = await UserControllerApiAxiosParamCreator(configuration).registerUser(body, options);
            return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
                const axiosRequestArgs :AxiosRequestConfig = {...localVarAxiosArgs.options, url: basePath + localVarAxiosArgs.url};
                return axios.request(axiosRequestArgs);
@@ -613,8 +613,8 @@ export const UserControllerApiFactory = function (configuration?: Configuration,
         * @param {*} [options] Override http request option.
         * @throws {RequiredError}
         */
-        async register(body: UserCreateRequireVO, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOUserInfoResponseVO>> {
-            return UserControllerApiFp(configuration).register(body, options).then((request) => request(axios, basePath));
+        async registerUser(body: UserCreateRequireVO, options?: AxiosRequestConfig): Promise<AxiosResponse<ResponseVOUserInfoResponseVO>> {
+            return UserControllerApiFp(configuration).registerUser(body, options).then((request) => request(axios, basePath));
        },
        /**
         * 
@@ -715,8 +715,8 @@ export class UserControllerApi extends BaseAPI {
     * @throws {RequiredError}
     * @memberof UserControllerApi
     */
-    public async register(body: UserCreateRequireVO, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOUserInfoResponseVO>> {
-        return UserControllerApiFp(this.configuration).register(body, options).then((request) => request(this.axios, this.basePath));
+    public async registerUser(body: UserCreateRequireVO, options?: AxiosRequestConfig) : Promise<AxiosResponse<ResponseVOUserInfoResponseVO>> {
+        return UserControllerApiFp(this.configuration).registerUser(body, options).then((request) => request(this.axios, this.basePath));
    }
    /**
     * 
--- a/blog-frontend/src/swagger/models/attach-entity.ts
+++ b/blog-frontend/src/swagger/models/attach-entity.ts
@@ -1,57 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * OpenAPI definition
- * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
- *
- * OpenAPI spec version: v0
- * 
- *
- * NOTE: This class is auto generated by the swagger code generator program.
- * https://github.com/swagger-api/swagger-codegen.git
- * Do not edit the class manually.
- */
-import { UserEntity } from './user-entity';
-/**
- * 
- * @export
- * @interface AttachEntity
- */
-export interface AttachEntity {
-    /**
-     * 
-     * @type {number}
-     * @memberof AttachEntity
-     */
-    id?: number;
-    /**
-     * 
-     * @type {Array<string>}
-     * @memberof AttachEntity
-     */
-    data?: Array<string>;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof AttachEntity
-     */
-    creator?: UserEntity;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof AttachEntity
-     */
-    updater?: UserEntity;
-    /**
-     * 
-     * @type {Date}
-     * @memberof AttachEntity
-     */
-    createTime?: Date;
-    /**
-     * 
-     * @type {Date}
-     * @memberof AttachEntity
-     */
-    updateTime?: Date;
-}
--- a/blog-frontend/src/swagger/models/blog-attach-entity.ts
+++ b/blog-frontend/src/swagger/models/blog-attach-entity.ts
@@ -1,64 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * OpenAPI definition
- * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
- *
- * OpenAPI spec version: v0
- * 
- *
- * NOTE: This class is auto generated by the swagger code generator program.
- * https://github.com/swagger-api/swagger-codegen.git
- * Do not edit the class manually.
- */
-import { BlogEntity } from './blog-entity';
-import { UserEntity } from './user-entity';
-/**
- * 
- * @export
- * @interface BlogAttachEntity
- */
-export interface BlogAttachEntity {
-    /**
-     * 
-     * @type {number}
-     * @memberof BlogAttachEntity
-     */
-    id?: number;
-    /**
-     * 
-     * @type {Array<string>}
-     * @memberof BlogAttachEntity
-     */
-    data?: Array<string>;
-    /**
-     * 
-     * @type {BlogEntity}
-     * @memberof BlogAttachEntity
-     */
-    blogEntity?: BlogEntity;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof BlogAttachEntity
-     */
-    creator?: UserEntity;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof BlogAttachEntity
-     */
-    updater?: UserEntity;
-    /**
-     * 
-     * @type {Date}
-     * @memberof BlogAttachEntity
-     */
-    createTime?: Date;
-    /**
-     * 
-     * @type {Date}
-     * @memberof BlogAttachEntity
-     */
-    updateTime?: Date;
-}
--- a/blog-frontend/src/swagger/models/blog-entity.ts
+++ b/blog-frontend/src/swagger/models/blog-entity.ts
@@ -1,100 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * OpenAPI definition
- * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
- *
- * OpenAPI spec version: v0
- * 
- *
- * NOTE: This class is auto generated by the swagger code generator program.
- * https://github.com/swagger-api/swagger-codegen.git
- * Do not edit the class manually.
- */
-import { BlogAttachEntity } from './blog-attach-entity';
-import { UserEntity } from './user-entity';
-/**
- * 
- * @export
- * @interface BlogEntity
- */
-export interface BlogEntity {
-    /**
-     * 
-     * @type {number}
-     * @memberof BlogEntity
-     */
-    id?: number;
-    /**
-     * 
-     * @type {string}
-     * @memberof BlogEntity
-     */
-    title?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof BlogEntity
-     */
-    abstracts?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof BlogEntity
-     */
-    password?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof BlogEntity
-     */
-    content?: string;
-    /**
-     * 
-     * @type {boolean}
-     * @memberof BlogEntity
-     */
-    top?: boolean;
-    /**
-     * 
-     * @type {boolean}
-     * @memberof BlogEntity
-     */
-    publish?: boolean;
-    /**
-     * 
-     * @type {Array<string>}
-     * @memberof BlogEntity
-     */
-    tags?: Array<string>;
-    /**
-     * 
-     * @type {Array<BlogAttachEntity>}
-     * @memberof BlogEntity
-     */
-    attachEntities?: Array<BlogAttachEntity>;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof BlogEntity
-     */
-    creator?: UserEntity;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof BlogEntity
-     */
-    updater?: UserEntity;
-    /**
-     * 
-     * @type {Date}
-     * @memberof BlogEntity
-     */
-    createTime?: Date;
-    /**
-     * 
-     * @type {Date}
-     * @memberof BlogEntity
-     */
-    updateTime?: Date;
-}
--- a/blog-frontend/src/swagger/models/blog-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/blog-info-response-vo.ts
@@ -11,8 +11,7 @@
 * https://github.com/swagger-api/swagger-codegen.git
 * Do not edit the class manually.
 */
-import { BlogAttachEntity } from './blog-attach-entity';
-import { UserEntity } from './user-entity';
+import { UserInfoResponseVO } from './user-info-response-vo';
 /**
 * 
 * @export
@@ -37,12 +36,6 @@ export interface BlogInfoResponseVO {
     * @memberof BlogInfoResponseVO
     */
    abstracts?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof BlogInfoResponseVO
-     */
-    password?: string;
    /**
     * 
     * @type {string}
@@ -69,22 +62,16 @@ export interface BlogInfoResponseVO {
    tags?: Array<string>;
    /**
     * 
-     * @type {Array<BlogAttachEntity>}
+     * @type {UserInfoResponseVO}
     * @memberof BlogInfoResponseVO
     */
-    attachEntities?: Array<BlogAttachEntity>;
+    creator?: UserInfoResponseVO;
    /**
     * 
-     * @type {UserEntity}
+     * @type {UserInfoResponseVO}
     * @memberof BlogInfoResponseVO
     */
-    creator?: UserEntity;
-    /**
-     * 
-     * @type {UserEntity}
-     * @memberof BlogInfoResponseVO
-     */
-    updater?: UserEntity;
+    updater?: UserInfoResponseVO;
    /**
     * 
     * @type {Date}
--- a/blog-frontend/src/swagger/models/index.ts
+++ b/blog-frontend/src/swagger/models/index.ts
@@ -1,8 +1,5 @@
 export * from './attach-attach-idbody';
-export * from './attach-entity';
 export * from './attach-info-response-vo';
-export * from './blog-attach-entity';
-export * from './blog-entity';
 export * from './blog-info-response-vo';
 export * from './blog-update-require-vo';
 export * from './pageable-voattach-info-response-vo';
@@ -10,7 +7,6 @@ export * from './pageable-voblog-info-response-vo';
 export * from './pageable-vosetting-info-response-vo';
 export * from './pageable-vouser-info-response-vo';
 export * from './response-voblog-info-response-vo';
-export * from './response-volist-blog-info-response-vo';
 export * from './response-volong';
 export * from './response-vopageable-voattach-info-response-vo';
 export * from './response-vopageable-voblog-info-response-vo';
@@ -23,7 +19,6 @@ export * from './response-vovoid';
 export * from './setting-info-response-vo';
 export * from './setting-update-require-vo';
 export * from './user-create-require-vo';
-export * from './user-entity';
 export * from './user-info-response-vo';
 export * from './user-login-require-vo';
 export * from './user-update-require-vo';
--- a/blog-frontend/src/swagger/models/pageable-voattach-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/pageable-voattach-info-response-vo.ts
@@ -47,5 +47,5 @@ export interface PageableVOAttachInfoResponseVO {
     * @type {Array<AttachInfoResponseVO>}
     * @memberof PageableVOAttachInfoResponseVO
     */
-    data?: 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
@@ -47,5 +47,5 @@ export interface PageableVOBlogInfoResponseVO {
     * @type {Array<BlogInfoResponseVO>}
     * @memberof PageableVOBlogInfoResponseVO
     */
-    data?: 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
@@ -47,5 +47,5 @@ export interface PageableVOSettingInfoResponseVO {
     * @type {Array<SettingInfoResponseVO>}
     * @memberof PageableVOSettingInfoResponseVO
     */
-    data?: 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
@@ -47,5 +47,5 @@ export interface PageableVOUserInfoResponseVO {
     * @type {Array<UserInfoResponseVO>}
     * @memberof PageableVOUserInfoResponseVO
     */
-    data?: Array<UserInfoResponseVO>;
+    elements?: Array<UserInfoResponseVO>;
 }
--- a/blog-frontend/src/swagger/models/response-voblog-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/response-voblog-info-response-vo.ts
@@ -35,5 +35,5 @@ export interface ResponseVOBlogInfoResponseVO {
     * @type {BlogInfoResponseVO}
     * @memberof ResponseVOBlogInfoResponseVO
     */
-    data?: BlogInfoResponseVO;
+    content?: BlogInfoResponseVO;
 }
--- a/blog-frontend/src/swagger/models/response-volist-blog-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/response-volist-blog-info-response-vo.ts
@@ -1,39 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * OpenAPI definition
- * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
- *
- * OpenAPI spec version: v0
- * 
- *
- * NOTE: This class is auto generated by the swagger code generator program.
- * https://github.com/swagger-api/swagger-codegen.git
- * Do not edit the class manually.
- */
-import { BlogInfoResponseVO } from './blog-info-response-vo';
-/**
- * 
- * @export
- * @interface ResponseVOListBlogInfoResponseVO
- */
-export interface ResponseVOListBlogInfoResponseVO {
-    /**
-     * 
-     * @type {number}
-     * @memberof ResponseVOListBlogInfoResponseVO
-     */
-    code?: number;
-    /**
-     * 
-     * @type {string}
-     * @memberof ResponseVOListBlogInfoResponseVO
-     */
-    msg?: string;
-    /**
-     * 
-     * @type {Array<BlogInfoResponseVO>}
-     * @memberof ResponseVOListBlogInfoResponseVO
-     */
-    data?: Array<BlogInfoResponseVO>;
-}
--- a/blog-frontend/src/swagger/models/response-volong.ts
+++ b/blog-frontend/src/swagger/models/response-volong.ts
@@ -34,5 +34,5 @@ export interface ResponseVOLong {
     * @type {number}
     * @memberof ResponseVOLong
     */
-    data?: number;
+    content?: number;
 }
--- a/blog-frontend/src/swagger/models/response-vopageable-voattach-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/response-vopageable-voattach-info-response-vo.ts
@@ -35,5 +35,5 @@ export interface ResponseVOPageableVOAttachInfoResponseVO {
     * @type {PageableVOAttachInfoResponseVO}
     * @memberof ResponseVOPageableVOAttachInfoResponseVO
     */
-    data?: PageableVOAttachInfoResponseVO;
+    content?: PageableVOAttachInfoResponseVO;
 }
--- a/blog-frontend/src/swagger/models/response-vopageable-voblog-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/response-vopageable-voblog-info-response-vo.ts
@@ -35,5 +35,5 @@ export interface ResponseVOPageableVOBlogInfoResponseVO {
     * @type {PageableVOBlogInfoResponseVO}
     * @memberof ResponseVOPageableVOBlogInfoResponseVO
     */
-    data?: PageableVOBlogInfoResponseVO;
+    content?: PageableVOBlogInfoResponseVO;
 }
--- a/blog-frontend/src/swagger/models/response-vopageable-vosetting-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/response-vopageable-vosetting-info-response-vo.ts
@@ -35,5 +35,5 @@ export interface ResponseVOPageableVOSettingInfoResponseVO {
     * @type {PageableVOSettingInfoResponseVO}
     * @memberof ResponseVOPageableVOSettingInfoResponseVO
     */
-    data?: PageableVOSettingInfoResponseVO;
+    content?: PageableVOSettingInfoResponseVO;
 }
--- a/blog-frontend/src/swagger/models/response-vopageable-vouser-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/response-vopageable-vouser-info-response-vo.ts
@@ -35,5 +35,5 @@ export interface ResponseVOPageableVOUserInfoResponseVO {
     * @type {PageableVOUserInfoResponseVO}
     * @memberof ResponseVOPageableVOUserInfoResponseVO
     */
-    data?: PageableVOUserInfoResponseVO;
+    content?: PageableVOUserInfoResponseVO;
 }
--- a/blog-frontend/src/swagger/models/response-vosetting-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/response-vosetting-info-response-vo.ts
@@ -35,5 +35,5 @@ export interface ResponseVOSettingInfoResponseVO {
     * @type {SettingInfoResponseVO}
     * @memberof ResponseVOSettingInfoResponseVO
     */
-    data?: SettingInfoResponseVO;
+    content?: SettingInfoResponseVO;
 }
--- a/blog-frontend/src/swagger/models/response-vostring.ts
+++ b/blog-frontend/src/swagger/models/response-vostring.ts
@@ -34,5 +34,5 @@ export interface ResponseVOString {
     * @type {string}
     * @memberof ResponseVOString
     */
-    data?: string;
+    content?: string;
 }
--- a/blog-frontend/src/swagger/models/response-vouser-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/response-vouser-info-response-vo.ts
@@ -35,5 +35,5 @@ export interface ResponseVOUserInfoResponseVO {
     * @type {UserInfoResponseVO}
     * @memberof ResponseVOUserInfoResponseVO
     */
-    data?: UserInfoResponseVO;
+    content?: UserInfoResponseVO;
 }
--- a/blog-frontend/src/swagger/models/response-vovoid.ts
+++ b/blog-frontend/src/swagger/models/response-vovoid.ts
@@ -34,5 +34,5 @@ export interface ResponseVOVoid {
     * @type {any}
     * @memberof ResponseVOVoid
     */
-    data?: any;
+    content?: any;
 }
--- a/blog-frontend/src/swagger/models/user-create-require-vo.ts
+++ b/blog-frontend/src/swagger/models/user-create-require-vo.ts
@@ -34,5 +34,5 @@ export interface UserCreateRequireVO {
     * @type {string}
     * @memberof UserCreateRequireVO
     */
-    password?: string;
+    password: string;
 }
--- a/blog-frontend/src/swagger/models/user-entity.ts
+++ b/blog-frontend/src/swagger/models/user-entity.ts
@@ -1,87 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * OpenAPI definition
- * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
- *
- * OpenAPI spec version: v0
- * 
- *
- * NOTE: This class is auto generated by the swagger code generator program.
- * https://github.com/swagger-api/swagger-codegen.git
- * Do not edit the class manually.
- */
-import { AttachEntity } from './attach-entity';
-import { BlogEntity } from './blog-entity';
-/**
- * 
- * @export
- * @interface UserEntity
- */
-export interface UserEntity {
-    /**
-     * 
-     * @type {string}
-     * @memberof UserEntity
-     */
-    id?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof UserEntity
-     */
-    email: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof UserEntity
-     */
-    nickname: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof UserEntity
-     */
-    password?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof UserEntity
-     */
-    role?: UserEntityRoleEnum;
-    /**
-     * 
-     * @type {Array<BlogEntity>}
-     * @memberof UserEntity
-     */
-    blogEntities?: Array<BlogEntity>;
-    /**
-     * 
-     * @type {Array<AttachEntity>}
-     * @memberof UserEntity
-     */
-    attachEntities?: Array<AttachEntity>;
-    /**
-     * 
-     * @type {Date}
-     * @memberof UserEntity
-     */
-    createTime?: Date;
-    /**
-     * 
-     * @type {Date}
-     * @memberof UserEntity
-     */
-    updateTime?: Date;
-}
-
-/**
-    * @export
-    * @enum {string}
-    */
-export enum UserEntityRoleEnum {
-    GUEST = 'GUEST',
-    AUTHOR = 'AUTHOR',
-    ADMIN = 'ADMIN'
-}
-
--- a/blog-frontend/src/swagger/models/user-info-response-vo.ts
+++ b/blog-frontend/src/swagger/models/user-info-response-vo.ts
@@ -11,8 +11,6 @@
 * https://github.com/swagger-api/swagger-codegen.git
 * Do not edit the class manually.
 */
-import { AttachEntity } from './attach-entity';
-import { BlogEntity } from './blog-entity';
 /**
 * 
 * @export
@@ -43,18 +41,6 @@ export interface UserInfoResponseVO {
     * @memberof UserInfoResponseVO
     */
    role?: UserInfoResponseVORoleEnum;
-    /**
-     * 
-     * @type {Array<BlogEntity>}
-     * @memberof UserInfoResponseVO
-     */
-    blogEntities?: Array<BlogEntity>;
-    /**
-     * 
-     * @type {Array<AttachEntity>}
-     * @memberof UserInfoResponseVO
-     */
-    attachEntities?: Array<AttachEntity>;
    /**
     * 
     * @type {Date}
--- a/blog-frontend/src/views/BlogEditView.vue
+++ b/blog-frontend/src/views/BlogEditView.vue
@@ -1,33 +1,71 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import router from '@/router';
+import { ref, shallowRef } from "vue";
+import { useRoute } from "vue-router";

-import type { BlogInfoResponseVO } from '@/swagger';
-import { api } from '@/api';
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import type {
+  IDomEditor,
+  IToolbarConfig,
+  IEditorConfig,
+} from "@wangeditor/editor";

-const blogInfo = ref<BlogInfoResponseVO>()
+import { api } from "@/api";
+import type { BlogInfoResponseVO } from "@/swagger";

-onMounted(() => {
-    const blogID = router.currentRoute.value.params?.id?.toString() || "1"
-    if (blogID) {
-        api.BlogController.getBlogInfo(parseInt(blogID))
-            .then(resp => {
-                const vo = resp.data
-                blogInfo.value = vo.data || {}
-            })
-    }
-})
+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 blogID = useRoute().params.id.toString();
+if (blogID) {
+  api.BlogController.getBlogInfo(parseInt(blogID)).then((resp) => {
+    const vo = resp.data;
+    blogInfo.value = vo.content || {};
+  });
+}
 </script>

 <template>
-    <h1 class="blog-title">{{ blogInfo?.title }}</h1>
-    <div class="blog-content" v-html="blogInfo?.content"></div>
+  <el-form> </el-form>
+  <Toolbar
+    class="editor-toolbar"
+    :editor="editorRef"
+    :defaultConfig="toolbarConfig"
+    mode="default"
+  />
+  <div class="editor">
+    <Editor
+      v-model="content"
+      :defaultConfig="editorConfig"
+      mode="default"
+      @onCreated="handleCreated"
+    />
+  </div>
 </template>

 <style scoped>
-.blog-title {
-    text-align: center;
+.editor-div {
+  height: 100%;
+  border: 1px solid #ccc;
 }

-.blog-content {}
-</style>
+.editor-toolbar {
+  border-bottom: 1px solid #ccc;
+  height: auto;
+}
+
+.editor-scrollbar {
+  height: 100%;
+}
+
+.editor {
+  height: 80%;
+}
+</style>
--- a/blog-frontend/src/views/BlogReadView.vue
+++ b/blog-frontend/src/views/BlogReadView.vue
@@ -1,33 +1,70 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import router from '@/router';
+import { ref } from "vue";
+import { useRoute } from "vue-router";

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

-const blogInfo = ref<BlogInfoResponseVO>()
+const blogInfo = ref<BlogInfoResponseVO>();

-onMounted(() => {
-    const blogID = router.currentRoute.value.params?.id?.toString() || "1"
-    if (blogID) {
-        api.BlogController.getBlogInfo(parseInt(blogID))
-            .then(resp => {
-                const vo = resp.data
-                blogInfo.value = vo.data || {}
-            })
-    }
-})
+const blogID = useRoute().params.id.toString();
+if (blogID) {
+  api.BlogController.getBlogInfo(parseInt(blogID)).then((resp) => {
+    const vo = resp.data;
+    blogInfo.value = vo.content || {};
+  });
+}
+
+function edit() {
+  router.push("/blog/" + blogID + "/edit/");
+}
 </script>

 <template>
-    <h1 class="blog-title">{{ blogInfo?.title }}</h1>
-    <div class="blog-content" v-html="blogInfo?.content"></div>
+  <el-container class="blog-container">
+    <el-header class="blog-header">
+      <h1 class="blog-title">{{ blogInfo?.title }}</h1>
+    </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-container>
 </template>

 <style scoped>
-.blog-title {
-    text-align: center;
+.blog-container {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
 }

-.blog-content {}
-</style>
+.blog-header {
+  background-color: aqua;
+  height: auto;
+  padding: 5px 0 5px 0;
+}
+
+.blog-title {
+  text-align: center;
+  font-size: xx-large;
+}
+
+.blog-aside {
+  border-width: 0 1px 0 0;
+  border-style: solid;
+}
+
+.blog-content {
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+</style>
--- a/blog-frontend/src/views/IndexView.vue
+++ b/blog-frontend/src/views/IndexView.vue
@@ -1,55 +1,64 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
-import BlogComponent from '@/components/BlogComponent.vue';
-import { api, type BlogInfoResponseVO } from '@/api';
+import { reactive } from "vue";
+import BlogComponent from "@/components/BlogComponent.vue";
+import { api, type BlogInfoResponseVO } from "@/api";
+
+let page = 0;
+const blogs = reactive<Array<BlogInfoResponseVO>>([]);

-let page = 0
-const blogs = reactive<Array<BlogInfoResponseVO>>([])
 function load() {
-    api.BlogController.getBlogInfoList(page, 5)
-        .then(resp => {
-            const vo = resp.data
-            for (let item of vo.data ?? []) {
-                item.createTime = new Date(item?.createTime ?? 0)
-                item.updateTime = new Date(item?.updateTime ?? 0)
-                blogs.push(item)
-            }
-        })
-    page = page + 1;
+  api.BlogController.getBlogInfoList(page, 5).then((resp) => {
+    const vo = resp.data;
+    const page = vo.content;
+    for (let item of page?.elements ?? []) {
+      item.createTime = new Date(item?.createTime ?? 0);
+      item.updateTime = new Date(item?.updateTime ?? 0);
+      blogs.push(item);
+    }
+    console.log(page);
+    if (page?.elements?.length ?? 0 > 0) {
+      console.log(
+        "loaded page " +
+          page?.page +
+          " for element count: " +
+          page?.elements?.length
+      );
+    }
+  });
+  page = page + 1;
 }
 </script>

 <template>
-    <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>
-            </li>
-        </ul>
-    </el-scrollbar>
+  <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>
+      </li>
+    </ul>
+  </el-scrollbar>
 </template>
-  
+
 <style scoped>
 .infinite-list {
-    height: 100%;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    margin-right: 10px;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  margin-right: 10px;
 }

 .infinite-list .infinite-list-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    /* height: 50px; */
-    background: var(--el-color-primary-light-9);
-    margin: 10px;
-    color: var(--el-color-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* height: 50px; */
+  background: var(--el-color-primary-light-9);
+  margin: 10px;
+  color: var(--el-color-primary);
 }

-.infinite-list .infinite-list-item+.list-item {
-    margin-top: 10px;
+.infinite-list .infinite-list-item + .list-item {
+  margin-top: 10px;
 }
 </style>
-  
--- a/blog-frontend/src/views/LoginView.vue
+++ b/blog-frontend/src/views/LoginView.vue
@@ -1,67 +1,68 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
-import router from '@/router';
+import { reactive } from "vue";
+import router from "@/router";

-import { ElMessage } from 'element-plus';
+import { ElMessage } from "element-plus";

-import { api } from '@/api';
+import { api } from "@/api";

 const form = reactive({
-    email: '',
-    password: ''
-})
+  email: "",
+  password: "",
+});

 const onSubmit = () => {
-    api.UserController.loginUser(form)
-        .then(resp => {
-            let vo = resp.data;
-            if (vo.code === 200) {
-                ElMessage({
-                    message: vo.msg,
-                    type: 'success'
-                })
-                console.log('login success: ', vo.msg)
-                api.updateCurrentUserInfo();
-                router.push("/")
-            } else {
-                ElMessage({
-                    message: vo.msg,
-                    type: 'warning'
-                })
-                console.log('login failed: ', vo.msg)
-            }
-        })
-}
+  api.UserController.loginUser(form).then((resp) => {
+    let vo = resp.data;
+    if (vo.code === 200) {
+      ElMessage({
+        message: vo.msg,
+        type: "success",
+      });
+      console.log("login success: ", vo.msg);
+      api.updateCurrentUserInfo();
+      router.push("/");
+    } else {
+      ElMessage({
+        message: vo.msg,
+        type: "warning",
+      });
+      console.log("login failed: ", vo.msg);
+    }
+  });
+};
 </script>

 <template>
-    <el-card class="login-card">
-        <el-form :model="form" label-width="60px">
-            <el-form-item label="邮箱">
-                <el-input v-model="form.email" />
-            </el-form-item>
-            <el-form-item label="密码">
-                <el-input v-model="form.password" type="password" show-password />
-            </el-form-item>
-            <el-form-item>
-                <el-button class="login-button" type="primary" @click="onSubmit">登录</el-button>
-            </el-form-item>
-        </el-form>
-    </el-card>
+  <el-card class="login-card">
+    <el-form :model="form" label-width="60px">
+      <el-form-item label="邮箱">
+        <el-input v-model="form.email" />
+      </el-form-item>
+      <el-form-item label="密码">
+        <el-input v-model="form.password" type="password" show-password />
+      </el-form-item>
+      <el-form-item>
+        <el-button class="login-button" type="primary" @click="onSubmit"
+          >登录</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </el-card>
 </template>

 <style scoped>
 .login-div {
-    height: 100%;
+  height: 100%;
 }

 .login-card {
-    width: 480px;
-    margin: 0 auto;
+  width: 480px;
+  margin: 0 auto;
 }

 .login-button {
-    margin: 0 auto;
-    width: 80%;
+  margin: 0 auto;
+  width: 80%;
 }
-</style>
+</style>
--- a/blog-frontend/src/views/ManagePaneView.vue
+++ b/blog-frontend/src/views/ManagePaneView.vue
@@ -1,28 +1,27 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import SiteManageComponent from '@/components/manage/SiteManageComponent.vue';
-import { globalStore } from '@/api';
+import { onMounted, ref } from "vue";
+import SiteManageComponent from "@/components/manage/SiteManageComponent.vue";
+import { globalStore } from "@/api";

-const activeName = ref<string>('site')
+const activeName = ref<string>("site");

 onMounted(() => {
-    if (!globalStore.currentUserInfo?.id) {
-        location.pathname = "/"
-        console.log("not login!")
-    }
-})
+  if (!globalStore.currentUserInfo?.id) {
+    location.pathname = "/";
+    console.log("not login!");
+  }
+});
 </script>

 <template>
-    <el-tabs v-model="activeName" type="card" class="demo-tabs">
-        <el-tab-pane label="网站设置" name="site">
-            <SiteManageComponent />
-        </el-tab-pane>
-        <el-tab-pane label="博文设置" name="third">Role</el-tab-pane>
-        <el-tab-pane label="用户设置" name="user">Config</el-tab-pane>
-        <el-tab-pane label="评论设置" name="test">Role</el-tab-pane>
-    </el-tabs>
+  <el-tabs v-model="activeName" type="card" class="demo-tabs">
+    <el-tab-pane label="网站设置" name="site">
+      <SiteManageComponent />
+    </el-tab-pane>
+    <el-tab-pane label="博文设置" name="third">Role</el-tab-pane>
+    <el-tab-pane label="用户设置" name="user">Config</el-tab-pane>
+    <el-tab-pane label="评论设置" name="test">Role</el-tab-pane>
+  </el-tabs>
 </template>

-
-<style scoped></style> 
+<style scoped></style>
--- a/blog-frontend/src/views/RegisterView.vue
+++ b/blog-frontend/src/views/RegisterView.vue
@@ -1,65 +1,66 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
-import { api } from '@/api';
+import { reactive } from "vue";
+import { api } from "@/api";

 const form = reactive<{
-    email: string,
-    nickname: string,
-    password: string
+  email: string;
+  nickname: string;
+  password: string;
 }>({
-    email: '',
-    nickname: '',
-    password: ''
-})
+  email: "",
+  nickname: "",
+  password: "",
+});

 const onSubmit = () => {
-    api.UserController.register(form)
-        .then(resp => {
-            let vo = resp.data;
-            if (vo.code === 200) {
-                console.log('register success!')
-            } else {
-                console.warn('register failed: ', vo.msg)
-                return
-            }
-            api.updateCurrentUserInfo();
-        })
-}
+  api.UserController.register(form).then((resp) => {
+    let vo = resp.data;
+    if (vo.code === 200) {
+      console.log("register success!");
+    } else {
+      console.warn("register failed: ", vo.msg);
+      return;
+    }
+    api.updateCurrentUserInfo();
+  });
+};
 </script>

 <template>
-    <div class="register-div">
-        <el-card>
-            <el-form :model="form" label-width="60px">
-                <el-form-item label="邮箱">
-                    <el-input v-model="form.email" />
-                </el-form-item>
-                <el-form-item label="昵称">
-                    <el-input v-model="form.nickname" />
-                </el-form-item>
-                <el-form-item label="密码">
-                    <el-input v-model="form.password" type="password" show-password />
-                </el-form-item>
-                <el-form-item>
-                    <el-button class="register-button" type="primary" @click="onSubmit">注册</el-button>
-                </el-form-item>
-            </el-form>
-        </el-card>
-    </div>
+  <div class="register-div">
+    <el-card>
+      <el-form :model="form" label-width="60px">
+        <el-form-item label="邮箱">
+          <el-input v-model="form.email" />
+        </el-form-item>
+        <el-form-item label="昵称">
+          <el-input v-model="form.nickname" />
+        </el-form-item>
+        <el-form-item label="密码">
+          <el-input v-model="form.password" type="password" show-password />
+        </el-form-item>
+        <el-form-item>
+          <el-button class="register-button" type="primary" @click="onSubmit"
+            >注册</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
 </template>

 <style scoped>
 .register-div {
-    height: 100%;
+  height: 100%;
 }

 .el-card {
-    width: 480px;
-    margin: 0 auto;
+  width: 480px;
+  margin: 0 auto;
 }

 .register-button {
-    margin: 0 auto;
-    width: 80%;
+  margin: 0 auto;
+  width: 80%;
 }
-</style>
+</style>
--- a/blog-frontend/src/views/TagsView.vue
+++ b/blog-frontend/src/views/TagsView.vue
@@ -1,13 +1,7 @@
 <template>
-    <div>
-
-    </div>
+  <div></div>
 </template>

-<script setup lang="ts">
+<script setup lang="ts"></script>

-</script>
-
-<style scoped>
-
-</style>
+<style scoped></style>