feat: 开发中...

blog-frontend/src/views/BlogEditView.vue

@@ -10,9 +10,10 @@ import type {
   IEditorConfig,
 } from "@wangeditor/editor";
 
-import { api, globalStore } from "@/api";
-import type { BlogInfoResponseVO, BlogUpdateRequireVO } from "@/swagger";
 import { ElMessage } from "element-plus";
+
+import { api } from "@/api";
+import type { BlogUpdateRequireVO } from "@/swagger";
 import router from "@/router";
 
 const editorRef = shallowRef();
@@ -24,7 +25,7 @@ const editBlog = reactive<BlogUpdateRequireVO>({
   content: "",
   tags: [],
 });
-let tags = ref<string>();
+const tagInput = ref<string>("");
 const blogID = parseInt(useRoute().params.id.toString());
 
 onMounted(() => {
@@ -82,6 +83,29 @@ function cancelSave() {
   router.push("/blog/" + blogID + "/read/");
 }
 
+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 实例，重要！
 }
@@ -122,11 +146,29 @@ function handleCreated(editor: IDomEditor) {
             maxlength="512"
             show-word-limit
             type="textarea"
+            autosize
             v-model="editBlog.abstracts"
           />
         </el-form-item>
-        <el-form-item label="标签">
-          <el-input placeholder="用 '|' 隔开" v-model="tags" />
+        <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
+              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" />