feat: 开发中...

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;
+      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;
-    blogInfo.value = vo.content || {};
+    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>
-  <Toolbar
-    class="editor-toolbar"
-    :editor="editorRef"
-    :defaultConfig="toolbarConfig"
-    mode="default"
-  />
-  <div class="editor">
-    <Editor
-      v-model="content"
-      :defaultConfig="editorConfig"
-      mode="default"
-      @onCreated="handleCreated"
-    />
-  </div>
+  <el-container class="edit-container">
+    <el-aside class="edit-content-side">
+      <div class="edit-content-toolbar">
+        <Toolbar
+          :editor="editorRef"
+          :defaultConfig="toolbarConfig"
+          mode="default"
+        />
+      </div>
+      <el-scrollbar class="edit-content-scrollbar">
+        <Editor
+          v-model="editBlog.content"
+          :defaultConfig="editorConfig"
+          mode="default"
+          @onCreated="handleCreated"
+        />
+      </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>