feat: 项目开发中...

2023-04-11 20:21:33 +08:00
parent 92f9601a9c
commit ef61fbf34c
9 changed files with 229 additions and 19 deletions
--- a/blog-frontend/src/components/HeaderComponent.vue
+++ b/blog-frontend/src/components/HeaderComponent.vue
@@ -5,10 +5,23 @@ import { api, globalStore, siteSetting } from "@/api";
 import router from "@/router";
 import { UserInfoResponseVORoleEnum } from "@/swagger";

-const menuIndex = ref<string>(document.location.pathname);
+const menuIndex = ref<string>("/");
+switch (document.location.pathname) {
+  case "/manage": {
+    menuIndex.value = "/manage";
+  }
+  case "/login": {
+    menuIndex.value = "/login";
+  }
+  case "/register": {
+    menuIndex.value = "/register";
+  }
+  default: {
+    menuIndex.value = "/";
+  }
+}

 onMounted(() => {
-  menuIndex.value = document.location.pathname;
  // 获取站点标题
  api.SettingController.getSettingContent(siteSetting.keys.site.title).then(
    (response) => {
--- a/blog-frontend/src/components/manage/AttachManageComponent.vue
+++ b/blog-frontend/src/components/manage/AttachManageComponent.vue
@@ -31,7 +31,7 @@ function loadPage(newPage: number) {
  });
 }

-function uploadAttach(options: UploadRequestOptions) {
+function createAttach(options: UploadRequestOptions) {
  return api.AttachController.createAttachForm(options.file).then((resp) => {
    const vo = resp.data;
    if (vo.code === 200) {
@@ -142,7 +142,7 @@ function deleteAttach(id: number) {
      </el-card>
    </div>
    <p style="text-align: center; margin-top: 12px; margin-bottom: 12px">
-      <el-upload :show-file-list="false" :http-request="uploadAttach">
+      <el-upload :show-file-list="false" :http-request="createAttach">
        <el-button type="primary"> 上传新附件 </el-button>
      </el-upload>
    </p>
--- a/blog-frontend/src/components/manage/BlogManageComponent.vue
+++ b/blog-frontend/src/components/manage/BlogManageComponent.vue
@@ -132,6 +132,11 @@ function loadPage(newPage: number) {
        </div>
      </el-card>
    </div>
+    <p style="text-align: center; margin-bottom: 15px">
+      <el-button type="primary" @click="$router.push('/blog/create')">
+        发表博文
+      </el-button>
+    </p>
    <div style="display: flex">
      <div style="flex-grow: 1"></div>
      <el-pagination
--- a/blog-frontend/src/components/manage/SiteManageComponent.vue
+++ b/blog-frontend/src/components/manage/SiteManageComponent.vue
@@ -74,6 +74,7 @@ function changeCustomCSS(cssText: string) {
 .manage-container {
  margin-right: 32px;
 }
+
 .imput-line {
  margin-bottom: 5px;
 }
--- a/blog-frontend/src/router/index.ts
+++ b/blog-frontend/src/router/index.ts
@@ -29,18 +29,29 @@ const router = createRouter({
      component: () => import("@/views/TagsView.vue"),
    },
    {
-      path: "/blog/:id",
+      path: "/blog",
      name: "blog",
      children: [
        {
-          path: "read",
-          name: "read",
-          component: () => import("@/views/BlogReadView.vue"),
+          path: "create",
+          name: "create",
+          component: () => import("@/views/BlogCreateView.vue"),
        },
        {
-          path: "edit",
-          name: "edit",
-          component: () => import("@/views/BlogEditView.vue"),
+          path: ":id",
+          name: "blogID",
+          children: [
+            {
+              path: "read",
+              name: "read",
+              component: () => import("@/views/BlogReadView.vue"),
+            },
+            {
+              path: "edit",
+              name: "edit",
+              component: () => import("@/views/BlogEditView.vue"),
+            },
+          ],
        },
      ],
    },
--- a/blog-frontend/src/views/BlogCreateView.vue
+++ b/blog-frontend/src/views/BlogCreateView.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { reactive, ref, shallowRef } from "vue";
+import { useRoute } from "vue-router";
+
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import type {
+  IDomEditor,
+  IToolbarConfig,
+  IEditorConfig,
+} from "@wangeditor/editor";
+
+import { ElMessage } from "element-plus";
+
+import { api } from "@/api";
+import type { BlogUpdateRequireVO } from "@/swagger";
+import router from "@/router";
+
+const editorRef = shallowRef();
+const toolbarConfig: IToolbarConfig = {};
+const editorConfig: IEditorConfig = {};
+
+const editBlog = reactive<BlogUpdateRequireVO>({
+  title: "",
+  content: "在这里输入博文内容",
+  tags: [],
+});
+const tagInput = ref<string>("");
+
+function saveBlog() {
+  api.BlogController.createBlog(editBlog).then((resp) => {
+    const vo = resp.data;
+    if (vo.code === 200) {
+      ElMessage({
+        type: "success",
+        message: "发表博文成功！",
+      });
+      console.log("create blog " + vo.content + " success!");
+      router.push("/blog/" + vo.content + "/read/");
+    } else {
+      ElMessage({
+        type: "error",
+        message: "发表博文失败: " + vo.msg,
+      });
+    }
+  });
+}
+
+function cancelSave() {
+  router.back();
+}
+
+function addTag() {
+  if (tagInput.value.length === 0) {
+    ElMessage({
+      type: "warning",
+      message: "请输入标签名称！",
+    });
+    return;
+  }
+  if (editBlog.tags.includes(tagInput.value)) {
+    ElMessage({
+      type: "warning",
+      message: "该博文已拥有相同的标签名称！",
+    });
+    return;
+  }
+  editBlog.tags.push(tagInput.value);
+  tagInput.value = "";
+}
+
+function removeTag(index: number) {
+  editBlog.tags.splice(index, 1);
+}
+
+function handleCreated(editor: IDomEditor) {
+  editorRef.value = editor; // 记录 editor 实例，重要！
+}
+</script>
+
+<template>
+  <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 class="edit-form-side">
+      <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="1024"
+            show-word-limit
+            type="textarea"
+            autosize
+            v-model="editBlog.abstracts"
+          />
+        </el-form-item>
+        <el-form-item label="标签" style="display: flex">
+          <el-tag
+            style="margin-left: 5px"
+            v-for="(tag, index) in editBlog.tags"
+            :key="index"
+            closable
+            size="large"
+            @close="removeTag(index)"
+          >
+            {{ tag }}
+          </el-tag>
+          <div style="margin-left: 5px">
+            <el-input
+              placeholder="输入新标签"
+              style="margin: 0 5px 0 0; width: 100px"
+              v-model="tagInput"
+            />
+            <el-button type="primary" @click="addTag">添加</el-button>
+          </div>
+        </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>
+.edit-container {
+  height: 100%;
+  padding: 0 20px 0 20px;
+  margin: 0;
+}
+
+.edit-content-side {
+  height: 100%;
+  width: 61.8%;
+  display: flex;
+  flex-direction: column;
+  border-style: solid;
+  border-width: 0 1px 0 1px;
+  border-color: #ccc;
+}
+
+.edit-content-toolbar {
+  border-bottom: 1px solid #ccc;
+}
+</style>
--- a/blog-frontend/src/views/BlogEditView.vue
+++ b/blog-frontend/src/views/BlogEditView.vue
@@ -133,7 +133,7 @@ function handleCreated(editor: IDomEditor) {
      <el-form :model="editBlog">
        <el-form-item label="博文标题">
          <el-input
-            placeholder="博文标题"
+            placeholder="请输入博文标题"
            maxlength="128"
            show-word-limit
            v-model="editBlog.title"
@@ -141,7 +141,7 @@ function handleCreated(editor: IDomEditor) {
        </el-form-item>
        <el-form-item label="博文摘要">
          <el-input
-            placeholder="博文摘要"
+            placeholder="请输入博文摘要"
            maxlength="1024"
            show-word-limit
            type="textarea"
@@ -163,6 +163,7 @@ function handleCreated(editor: IDomEditor) {

          <div style="margin-left: 5px">
            <el-input
+              placeholder="输入新标签"
              style="margin: 0 5px 0 0; width: 100px"
              v-model="tagInput"
            />
--- a/blog-frontend/src/views/BlogReadView.vue
+++ b/blog-frontend/src/views/BlogReadView.vue
@@ -109,8 +109,7 @@ function deleteBlog() {
  margin: 0 auto;
 }

-.blog-content > p,
-img {
+.blog-content img {
  width: 100%;
 }