rebuild editor

2023-06-07 22:16:33 +08:00 · 2023-06-07 22:16:33 +08:00 · ded02351f8
parent b3a4794194
commit ded02351f8
10 changed files with 406 additions and 288 deletions
--- a/server/index.js
+++ b/server/index.js
@ -21,10 +21,14 @@ const loginRoutes = require('./routes/login')
 // 注册路由
 const registerRoutes = require('./routes/register')

+// 上传图片路由
+const uploadImagesRoutes = require('./routes/upload-image')
+
 app.use('/kungalgamer', userRoutes)
 app.use('/topic', topicRoutes)
 app.use('/login', loginRoutes)
 app.use('/register', registerRoutes)
+app.use('/upload', uploadImagesRoutes)

 app.use((err, req, res, next) => {
  console.error(err.stack)
--- a/server/package.json
+++ b/server/package.json
@ -13,6 +13,7 @@
  "dependencies": {
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
-    "express": "^4.18.2"
+    "express": "^4.18.2",
+    "multer": "1.4.5-lts.1"
  }
 }
--- a/server/pnpm-lock.yaml
+++ b/server/pnpm-lock.yaml
@ -14,6 +14,9 @@ dependencies:
  express:
    specifier: ^4.18.2
    version: 4.18.2
+  multer:
+    specifier: 1.4.5-lts.1
+    version: 1.4.5-lts.1

 packages:

@ -25,6 +28,10 @@ packages:
      negotiator: 0.6.3
    dev: false

+  /append-field@1.0.0:
+    resolution: {integrity: sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==}
+    dev: false
+
  /array-flatten@1.1.1:
    resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
    dev: false
@ -69,6 +76,17 @@ packages:
      - supports-color
    dev: false

+  /buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+    dev: false
+
+  /busboy@1.6.0:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+    dependencies:
+      streamsearch: 1.1.0
+    dev: false
+
  /bytes@3.1.2:
    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
    engines: {node: '>= 0.8'}
@ -81,6 +99,16 @@ packages:
      get-intrinsic: 1.2.1
    dev: false

+  /concat-stream@1.6.2:
+    resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
+    engines: {'0': node >= 0.8}
+    dependencies:
+      buffer-from: 1.1.2
+      inherits: 2.0.4
+      readable-stream: 2.3.8
+      typedarray: 0.0.6
+    dev: false
+
  /content-disposition@0.5.4:
    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
    engines: {node: '>= 0.6'}
@ -102,6 +130,10 @@ packages:
    engines: {node: '>= 0.6'}
    dev: false

+  /core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+    dev: false
+
  /cors@2.8.5:
    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
    engines: {node: '>= 0.10'}
@ -270,6 +302,10 @@ packages:
    engines: {node: '>= 0.10'}
    dev: false

+  /isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+    dev: false
+
  /media-typer@0.3.0:
    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
    engines: {node: '>= 0.6'}
@ -302,6 +338,17 @@ packages:
    hasBin: true
    dev: false

+  /minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+    dev: false
+
+  /mkdirp@0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+    dev: false
+
  /ms@2.0.0:
    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
    dev: false
@ -310,6 +357,19 @@ packages:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
    dev: false

+  /multer@1.4.5-lts.1:
+    resolution: {integrity: sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==}
+    engines: {node: '>= 6.0.0'}
+    dependencies:
+      append-field: 1.0.0
+      busboy: 1.6.0
+      concat-stream: 1.6.2
+      mkdirp: 0.5.6
+      object-assign: 4.1.1
+      type-is: 1.6.18
+      xtend: 4.0.2
+    dev: false
+
  /negotiator@0.6.3:
    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
    engines: {node: '>= 0.6'}
@ -340,6 +400,10 @@ packages:
    resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
    dev: false

+  /process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+    dev: false
+
  /proxy-addr@2.0.7:
    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
    engines: {node: '>= 0.10'}
@ -380,6 +444,22 @@ packages:
      unpipe: 1.0.0
    dev: false

+  /readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+    dev: false
+
+  /safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+    dev: false
+
  /safe-buffer@5.2.1:
    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
    dev: false
@ -438,6 +518,17 @@ packages:
    engines: {node: '>= 0.8'}
    dev: false

+  /streamsearch@1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+    dev: false
+
+  /string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: false
+
  /toidentifier@1.0.1:
    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
    engines: {node: '>=0.6'}
@ -451,11 +542,19 @@ packages:
      mime-types: 2.1.35
    dev: false

+  /typedarray@0.0.6:
+    resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
+    dev: false
+
  /unpipe@1.0.0:
    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
    engines: {node: '>= 0.8'}
    dev: false

+  /util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+    dev: false
+
  /utils-merge@1.0.1:
    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
    engines: {node: '>= 0.4.0'}
@ -465,3 +564,8 @@ packages:
    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
    engines: {node: '>= 0.8'}
    dev: false
+
+  /xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+    dev: false
--- a/server/routes/upload-image.js
+++ b/server/routes/upload-image.js
@ -0,0 +1,47 @@
+// upload-image.js
+const express = require('express')
+const router = express.Router()
+const multer = require('multer')
+const path = require('path')
+
+const upload = multer({
+  dest: '../assets/upload/images', // 指定上传的目标文件夹
+})
+
+router.post('/img', upload.single('image'), (req, res) => {
+  if (!req.file) {
+    res
+      .status(400)
+      .json({ errno: 1, data: null, error: 'No image file provided' })
+    return
+  }
+
+  // 从req.file对象中获取上传的文件信息
+  const fileName = req.file.filename
+  const filePath = req.file.path
+
+  // 将上传的文件移动到指定的目标文件夹
+  const targetPath = path.join(__dirname, 'images', fileName)
+  fs.rename(filePath, targetPath, (err) => {
+    if (err) {
+      res
+        .status(500)
+        .json({ errno: 1, data: null, error: 'Failed to move uploaded file' })
+      return
+    }
+
+    const imageUrl = `/images/${fileName}`
+    const responseData = {
+      errno: 0,
+      data: {
+        url: imageUrl,
+        alt: 'Image description',
+        href: 'Image link',
+      },
+    }
+
+    res.json(responseData)
+  })
+})
+
+module.exports = router
--- a/src/components/WangEditor.vue
+++ b/src/components/WangEditor.vue
@ -6,6 +6,9 @@ import '@wangeditor/editor/dist/css/style.css' // 引入 css
 import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

+// 覆盖编辑器原生样式
+import '@/styles/editor/editor.scss'
+
 // 编辑器实例，必须用 shallowRef，重要！
 const editorRef = shallowRef()

@ -19,104 +22,15 @@ onMounted(() => {
  }, 1500)
 })

-// 工具栏配置
-const toolbarConfig = {
-  /* 
-        // 菜单 key
-    'headerSelect', // h1, h2, h3, h4 选择
-    'bold', // 加粗
-    'italic', // 斜体
-    'through', // 删除线
-    'underline', // 下划线
-    'bulletedList', // 无序列表
-    'numberedList', // 有序列表
-    'color', // 文字颜色
-    'insertLink', // 插入链接
-    'fontSize', // 字体大小
-    'lineHeight', // 行高
-    'uploadImage', // 上传图片
-    'delIndent', // 缩进
-    'indent', // 增进
-    'deleteImage', //删除图片
-    'divider', // 分割线
-    'insertTable', // 插入表格
-    'justifyCenter', // 居中对齐
-    'justifyJustify', // 两端对齐
-    'justifyLeft', // 左对齐
-    'justifyRight', // 右对齐
-    'undo', // 撤销
-    'redo', // 重做
-    'clearStyle', // 清除格式
-    'fullScreen', // 全屏
-    */
-  toolbarKeys: [
-    'bold',
-    'underline',
-    'italic',
-    'through',
-    'code',
-    'sub',
-    'sup',
-    'clearStyle',
-    'color',
-    'bgColor',
-    'fontSize',
-    'fontFamily',
-    'indent',
-    'delIndent',
-    'justifyLeft',
-    'justifyRight',
-    'justifyCenter',
-    'justifyJustify',
-    'lineHeight',
-    'insertImage',
-    'deleteImage',
-    'editImage',
-    'viewImageLink',
-    'imageWidth30',
-    'imageWidth50',
-    'imageWidth100',
-    'divider',
-    'emotion',
-    'insertLink',
-    'editLink',
-    'unLink',
-    'viewLink',
-    'codeBlock',
-    'blockquote',
-    'headerSelect',
-    'header1',
-    'header2',
-    'header3',
-    'header4',
-    'header5',
-    'todo',
-    'redo',
-    'undo',
-    'fullScreen',
-    'enter',
-    'bulletedList',
-    'numberedList',
-    'insertTable',
-    'deleteTable',
-    'insertTableRow',
-    'deleteTableRow',
-    'insertTableCol',
-    'deleteTableCol',
-    'tableHeader',
-    'tableFullWidth',
-    'insertVideo',
-    'uploadVideo',
-    'editVideoSize',
-    'uploadImage',
-    'codeSelectLang',
-  ],
-}
-
 // 编辑器配置
 const editorConfig = {
  placeholder: '请输入内容...',
-  MENU_CONF: {},
+  MENU_CONF: {
+    uploadImage: {
+      // server: 'http://127.0.0.1:10007/upload/img',
+      // uploadFileName: 'image',
+    },
+  },
 }

 const handleCreated = (editor: any) => {
@ -134,11 +48,7 @@ onBeforeUnmount(() => {
 <template>
  <!-- 编辑器 -->
  <div class="editor—wrapper">
-    <Toolbar
-      class="toolbar-container"
-      :editor="editorRef"
-      :defaultConfig="toolbarConfig"
-    />
+    <Toolbar class="toolbar-container" :editor="editorRef" />
    <Editor
      class="editor-container"
      style="height: 427px; overflow-y: hidden"
--- a/src/styles/editor/editor.scss
+++ b/src/styles/editor/editor.scss
@ -0,0 +1,29 @@
+/* wangEditor5 使用了 Shadow DOM，不能直接修改颜色，在全局覆盖 */
+
+:root {
+  // textarea - css vars
+  --w-e-textarea-bg-color: var(--kungalgame-white);
+  --w-e-textarea-color: var(--kungalgame-font-color-3);
+  --w-e-textarea-border-color: var(--kungalgame-blue-1);
+  --w-e-textarea-slight-border-color: var(--kungalgame-white);
+  --w-e-textarea-slight-color: var(--kungalgame-white);
+  --w-e-textarea-slight-bg-color: var(--kungalgame-white);
+  --w-e-textarea-selected-border-color: var(
+    --kungalgame-blue-1
+  ); // 选中的元素，如选中了分割线
+  --w-e-textarea-handler-bg-color: var(
+    --kungalgame-blue-4
+  ); // 工具，如图片拖拽按钮
+
+  // toolbar - css vars
+  --w-e-toolbar-color: var(--kungalgame-font-color-1);
+  --w-e-toolbar-bg-color: var(--kungalgame-white);
+  --w-e-toolbar-active-color: var(--kungalgame-font-color-3);
+  --w-e-toolbar-active-bg-color: var(--kungalgame-white);
+  --w-e-toolbar-disabled-color: var(--kungalgame-red-4);
+  --w-e-toolbar-border-color: var(--kungalgame-blue-4);
+
+  // modal - css vars
+  --w-e-modal-button-bg-color: var(--kungalgame-white);
+  --w-e-modal-button-border-color: var(--kungalgame-blue-4);
+}
--- a/src/views/edit/Edit.vue
+++ b/src/views/edit/Edit.vue
@ -1,6 +1,8 @@
 <script setup lang="ts">
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
 import WangEditor from '@/components/WangEditor.vue'
+import Footer from './components/Footer.vue'
+import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 </script>

 <template>
@ -22,57 +24,11 @@ import WangEditor from '@/components/WangEditor.vue'
        <WangEditor class="editor" />
      </div>

-      <!-- 内容区的底部 -->
-      <div class="content-footer">
-        <!-- 标签的总容器 -->
-        <div class="tags-container">
-          <!-- 标签输入框 -->
-          <input
-            type="text"
-            placeholder="请输入帖子的关键词（单个关键词 10 个字符以内，至少选择一个、最多 7 个）, 输入文字按下 ' Enter ' 创建关键词"
-          />
-          <!-- 标签的提示词 -->
-          <div class="tags-info">热门关键词（点击选择）:</div>
-          <!-- 标签容器 -->
-          <div class="tags">
-            <span>啊这可海星</span>
-            <span>啊这可海星</span>
-            <span>啊这可海星</span>
-            <span>啊这可海星</span>
-            <span>啊这可海星</span>
-            <span>啊这可海星</span>
-            <span>啊这可海星</span>
-            <span>啊这可海星</span>
-            <span>啊这可海星</span>
-            <span>啊这可海星</span>
-          </div>
-        </div>
-        <!-- 话题分类的容器 -->
-        <div class="topic-group">
-          <div>点击选择帖子的分区（可多选）:</div>
-          <!-- 分类容器的按钮集合 -->
-          <div class="group-btn">
-            <button>galgame</button>
-            <button>技术交流</button>
-            <button>其它</button>
-          </div>
-        </div>
-        <!-- 按钮的容器 -->
-        <div class="btn-container">
-          <!-- 确认按钮 -->
-          <button class="confirm-btn">确认发布</button>
-          <!-- 预览编辑 -->
-          <button class="preview-btn">预览结果</button>
-          <!-- 保存按钮 -->
-          <button class="save-btn">保存草稿</button>
-        </div>
-      </div>
+      <Footer />
    </div>
    <!-- 版权 -->
-    <div class="copyright">
-      <span>Copyright © 2023 KUNgalgame</span>
-      <span>All rights reserved | Version 0.01</span>
-    </div>
+    <KUNGalgameFooter style="margin: 0 auto; margin-bottom: 17px" />
+    <span style="margin: 0 auto">Editor powered by wangEditor</span>
  </div>
 </template>

@ -127,142 +83,4 @@ import WangEditor from '@/components/WangEditor.vue'
 .topic-title input:focus {
  box-shadow: 0px 0px 5px var(--kungalgame-blue-4);
 }
-/* 内容区的底部样式 */
-.content-footer {
-  /* 距离内容区的距离 */
-  margin-top: 17px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-/* 标签的总容器 */
-.tags-container {
-  width: 97%;
-}
-/* 标签输入框 */
-.tags-container input {
-  background-color: var(--kungalgame-trans-white-9);
-  /* 输入标签的字体 */
-  font-size: 17px;
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid var(--kungalgame-blue-4);
-  padding: 5px;
-}
-/* 标签输入框 focus */
-.tags-container input:focus {
-  box-shadow: 0px 0px 3px var(--kungalgame-blue-4);
-}
-.tags-info {
-  margin: 10px 0;
-}
-/* 单个标签容器 */
-.tags {
-  display: flex;
-  flex-wrap: wrap;
-}
-/* 单个标签的样式 */
-.tags > span {
-  margin: 5px;
-  display: block;
-  white-space: nowrap;
-  font-size: 14px;
-  padding: 3px;
-  background-color: var(--kungalgame-trans-blue-1);
-  cursor: pointer;
-}
-.tags > span:hover {
-  background-color: var(--kungalgame-trans-red-1);
-}
-/* 话题分类的容器 */
-.topic-group {
-  /* 相对于标签容器的占比 */
-  width: 97%;
-  margin: 10px 0;
-}
-/* 分类容器的按钮集合 */
-.group-btn {
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  margin: 20px 0;
-}
-/* 单个按钮的样式 */
-.group-btn > button {
-  height: 30px;
-  width: 20%;
-  font-size: 17px;
-  cursor: pointer;
-  border: 1px solid var(--kungalgame-purple-4);
-  background-color: var(--kungalgame-trans-purple-1);
-  color: var(--kungalgame-purple-4);
-}
-/* 按钮的容器 */
-.btn-container {
-  width: 97%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  /* 距离最底端的距离 */
-  margin-bottom: 20px;
-}
-/* 单个按钮的样式 */
-.btn-container button {
-  height: 40px;
-  width: 27%;
-  font-size: 20px;
-  white-space: nowrap;
-  overflow: hidden;
-  cursor: pointer;
-  &:hover {
-    color: var(--kungalgame-white);
-  }
-}
-/* 确认按钮的样式 */
-.confirm-btn {
-  color: var(--kungalgame-blue-4);
-  background-color: var(--kungalgame-trans-blue-1);
-  border: 1px solid var(--kungalgame-blue-4);
-}
-.confirm-btn:hover {
-  background-color: var(--kungalgame-blue-4);
-  transition: 0.1s;
-}
-.confirm-btn:active {
-  background-color: var(--kungalgame-blue-2);
-  transform: scale(0.8);
-}
-/* 预览按钮的样式 */
-.preview-btn {
-  color: var(--kungalgame-red-4);
-  background-color: var(--kungalgame-trans-red-1);
-  border: 1px solid var(--kungalgame-red-4);
-}
-.preview-btn:hover {
-  background-color: var(--kungalgame-red-4);
-  transition: 0.1s;
-}
-.preview-btn:active {
-  background-color: var(--kungalgame-red-2);
-  transform: scale(0.8);
-}
-/* 保存按钮的样式 */
-.save-btn {
-  color: var(--kungalgame-orange-4);
-  background-color: var(--kungalgame-trans-orange-1);
-  border: 1px solid var(--kungalgame-orange-4);
-}
-.save-btn:hover {
-  background-color: var(--kungalgame-orange-4);
-  transition: 0.1s;
-}
-.save-btn:active {
-  background-color: var(--kungalgame-orange-2);
-  transform: scale(0.8);
-}
-/* 版权 */
-.copyright {
-  margin: 0 auto;
-  margin-bottom: 17px;
-}
 </style>
--- a/src/views/edit/components/Button.vue
+++ b/src/views/edit/components/Button.vue
@ -0,0 +1,112 @@
+<script setup lang="ts"></script>
+
+<template>
+  <!-- 话题分类的容器 -->
+  <div class="topic-group">
+    <div>点击选择帖子的分区（可多选）:</div>
+    <!-- 分类容器的按钮集合 -->
+    <div class="group-btn">
+      <button>galgame</button>
+      <button>技术交流</button>
+      <button>其它</button>
+    </div>
+  </div>
+  <!-- 按钮的容器 -->
+  <div class="btn-container">
+    <!-- 确认按钮 -->
+    <button class="confirm-btn">确认发布</button>
+    <!-- 预览编辑 -->
+    <button class="preview-btn">预览结果</button>
+    <!-- 保存按钮 -->
+    <button class="save-btn">保存草稿</button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 话题分类的容器 */
+.topic-group {
+  /* 相对于标签容器的占比 */
+  width: 97%;
+  margin: 10px 0;
+}
+/* 分类容器的按钮集合 */
+.group-btn {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 0;
+}
+/* 单个按钮的样式 */
+.group-btn > button {
+  height: 30px;
+  width: 20%;
+  font-size: 17px;
+  cursor: pointer;
+  border: 1px solid var(--kungalgame-purple-4);
+  background-color: var(--kungalgame-trans-purple-1);
+  color: var(--kungalgame-purple-4);
+}
+/* 按钮的容器 */
+.btn-container {
+  width: 97%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  /* 距离最底端的距离 */
+  margin-bottom: 20px;
+}
+/* 单个按钮的样式 */
+.btn-container button {
+  height: 40px;
+  width: 27%;
+  font-size: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  &:hover {
+    color: var(--kungalgame-white);
+  }
+}
+/* 确认按钮的样式 */
+.confirm-btn {
+  color: var(--kungalgame-blue-4);
+  background-color: var(--kungalgame-trans-blue-1);
+  border: 1px solid var(--kungalgame-blue-4);
+}
+.confirm-btn:hover {
+  background-color: var(--kungalgame-blue-4);
+  transition: 0.1s;
+}
+.confirm-btn:active {
+  background-color: var(--kungalgame-blue-2);
+  transform: scale(0.8);
+}
+/* 预览按钮的样式 */
+.preview-btn {
+  color: var(--kungalgame-red-4);
+  background-color: var(--kungalgame-trans-red-1);
+  border: 1px solid var(--kungalgame-red-4);
+}
+.preview-btn:hover {
+  background-color: var(--kungalgame-red-4);
+  transition: 0.1s;
+}
+.preview-btn:active {
+  background-color: var(--kungalgame-red-2);
+  transform: scale(0.8);
+}
+/* 保存按钮的样式 */
+.save-btn {
+  color: var(--kungalgame-orange-4);
+  background-color: var(--kungalgame-trans-orange-1);
+  border: 1px solid var(--kungalgame-orange-4);
+}
+.save-btn:hover {
+  background-color: var(--kungalgame-orange-4);
+  transition: 0.1s;
+}
+.save-btn:active {
+  background-color: var(--kungalgame-orange-2);
+  transform: scale(0.8);
+}
+</style>
--- a/src/views/edit/components/Footer.vue
+++ b/src/views/edit/components/Footer.vue
@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Tags from './Tags.vue'
+import Button from './Button.vue'
+</script>
+
+<template>
+  <!-- 内容区的底部 -->
+  <div class="content-footer">
+    <Tags />
+
+    <Button />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 内容区的底部样式 */
+.content-footer {
+  /* 距离内容区的距离 */
+  margin-top: 17px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>
--- a/src/views/edit/components/Tags.vue
+++ b/src/views/edit/components/Tags.vue
@ -0,0 +1,69 @@
+<script setup lang="ts"></script>
+
+<template>
+  <!-- 标签的总容器 -->
+  <div class="tags-container">
+    <!-- 标签输入框 -->
+    <input
+      type="text"
+      placeholder="请输入帖子的关键词（单个关键词 10 个字符以内，至少选择一个、最多 7 个）, 输入文字按下 ' Enter ' 创建关键词"
+    />
+    <!-- 标签的提示词 -->
+    <div class="tags-info">热门关键词（点击选择）:</div>
+    <!-- 标签容器 -->
+    <div class="tags">
+      <span>啊这可海星</span>
+      <span>啊这可海星</span>
+      <span>啊这可海星</span>
+      <span>啊这可海星</span>
+      <span>啊这可海星</span>
+      <span>啊这可海星</span>
+      <span>啊这可海星</span>
+      <span>啊这可海星</span>
+      <span>啊这可海星</span>
+      <span>啊这可海星</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 标签的总容器 */
+.tags-container {
+  width: 97%;
+}
+/* 标签输入框 */
+.tags-container input {
+  background-color: var(--kungalgame-trans-white-9);
+  /* 输入标签的字体 */
+  font-size: 17px;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--kungalgame-blue-4);
+  padding: 5px;
+}
+/* 标签输入框 focus */
+.tags-container input:focus {
+  box-shadow: 0px 0px 3px var(--kungalgame-blue-4);
+}
+.tags-info {
+  margin: 10px 0;
+}
+/* 单个标签容器 */
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+}
+/* 单个标签的样式 */
+.tags > span {
+  margin: 5px;
+  display: block;
+  white-space: nowrap;
+  font-size: 14px;
+  padding: 3px;
+  background-color: var(--kungalgame-trans-blue-1);
+  cursor: pointer;
+}
+.tags > span:hover {
+  background-color: var(--kungalgame-trans-red-1);
+}
+</style>