revert a9d4e8ee50

revert Merge remote-tracking branch 'origin/personal/lsd/user'

# Conflicts:
#	package.json
#	src/main.js
#	src/store/authentication.js

package-lock.json

@@ -8,7 +8,10 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@ckeditor/ckeditor5-vue": "^6.0.0",
+        "@element-plus/icons-vue": "^2.3.1",
         "axios": "^1.7.2",
+        "ckeditor5": "^42.0.0",
         "element-plus": "^2.7.6",
         "vue": "^3.4.29",
         "vue-router": "^4.4.0",
@@ -31,6 +34,536 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@ckeditor/ckeditor5-adapter-ckfinder": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-adapter-ckfinder/-/ckeditor5-adapter-ckfinder-42.0.0.tgz",
+      "integrity": "sha512-d07ywmOA3ZwqL9tTT1c8oAScqqhA0Az8GC6HqIkPuSaCRKVC55aOLDkmPyACiHFkUkrhmCV9ldkVKoqptxRJVQ==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-alignment": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-alignment/-/ckeditor5-alignment-42.0.0.tgz",
+      "integrity": "sha512-hr1v5shN3D41EhnliLc5Svrg/JfyoKnSgnFLvejTYdd8HCyVqfiedgFCYP/goeSZTaGPpAIPojYdpQwtJON6+Q==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-autoformat": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-autoformat/-/ckeditor5-autoformat-42.0.0.tgz",
+      "integrity": "sha512-dGMwLPk4Q3Np/dVAOqwVefnS0dRGqARmcnV9lhpeC44mw+1ba3pxpCitxHkZY8epQHkLyhOuacWTPqSqAcB+bQ==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-autosave": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-autosave/-/ckeditor5-autosave-42.0.0.tgz",
+      "integrity": "sha512-Tqd8xbvjF6WTMl8R0QaCU0IW/TdqR1SlH/qXuLd+D96crCcXArRFdJ+oIjw6eJ436iI1Yp0aHzZb/KAnZ75Jww==",
+      "dependencies": {
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-basic-styles": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-basic-styles/-/ckeditor5-basic-styles-42.0.0.tgz",
+      "integrity": "sha512-CWMlmdTilDMlMrTA4UzxkSIpxliafcAC6mp2doDkm3MZ1K6+YewHpcxHRuZAsBMYGkmQSLq0YcqdTnDXoICSXA==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-block-quote": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-block-quote/-/ckeditor5-block-quote-42.0.0.tgz",
+      "integrity": "sha512-VBXHHHALhW+iBfyAiQxskV45ozVGuanKRNagVXHPba0QLIEa2JUN75/5RVZVw3qr2BqS1wUKCrbb4qHeF94Otw==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-ckbox": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-ckbox/-/ckeditor5-ckbox-42.0.0.tgz",
+      "integrity": "sha512-QcfLRpherNotB8XxMzHYk+CeAcqNOHan5e+kBN+mOcPkIcsbapt7RPI680YChw/sv/0yY8/5SbvXdcsn+KCFzw==",
+      "dependencies": {
+        "blurhash": "2.0.5",
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-ckfinder": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-ckfinder/-/ckeditor5-ckfinder-42.0.0.tgz",
+      "integrity": "sha512-P5hCrP4EPWRdIg7vXh2PjpovWq1SLgfjRCqC+a9hs5q/W3nYc+SIZbawJOV/kr5eq/E1O4e2flehGG7Y22AKVw==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-clipboard": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-clipboard/-/ckeditor5-clipboard-42.0.0.tgz",
+      "integrity": "sha512-/ajaQ5q0auwNsZEX1rveGQ5lBpeuhWWAVo/Ouv1IJT77G6nFDubqlYcKZEidGne2v1wtIgDK+nddnlxVdX8tvQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "42.0.0",
+        "@ckeditor/ckeditor5-engine": "42.0.0",
+        "@ckeditor/ckeditor5-ui": "42.0.0",
+        "@ckeditor/ckeditor5-utils": "42.0.0",
+        "@ckeditor/ckeditor5-widget": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-cloud-services": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-cloud-services/-/ckeditor5-cloud-services-42.0.0.tgz",
+      "integrity": "sha512-PfH3PPB9fkweXSBfHzTbsHP/jEfDmkueGKGVkO7Z/luCASWjtNfQypykkkrDnMRv1PMJmBnK9wheWEGqBoS4kA==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-code-block": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-code-block/-/ckeditor5-code-block-42.0.0.tgz",
+      "integrity": "sha512-RsXWRo6pbI2MsMHE+AE03UqEHgzErj/EO1lQy4vqgNNHqhXWqjMQZo4WSnzboczHRjNi3cNNFIw6r4nqm1Yz9w==",
+      "dependencies": {
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-core": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-core/-/ckeditor5-core-42.0.0.tgz",
+      "integrity": "sha512-0WZTQM4JD3qobXNTPRMq0o1t+vYRWzkzX0LwoooZVn7NKIqCrYqVsTuV0xsN7qT0vdFNRvA9TYYfinw7j9Y4rw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-engine": "42.0.0",
+        "@ckeditor/ckeditor5-utils": "42.0.0",
+        "@ckeditor/ckeditor5-watchdog": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-easy-image": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-easy-image/-/ckeditor5-easy-image-42.0.0.tgz",
+      "integrity": "sha512-Sb0DxfeN/BSq17ITkEoiCNMIqVcpV4JvNzDe7NlYnzmo6zL5HLX8Qd/fQAV44MrTZY8Lifkd4zqFSmSCcCZC2g==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-editor-balloon": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-editor-balloon/-/ckeditor5-editor-balloon-42.0.0.tgz",
+      "integrity": "sha512-tTszKMob0WO7J3xEIi2GQxtDgY19dUTcGHBqpMRE2bcGTUKeeeqjfJwnNww/kDjYR+e4fmz9U5VRVg8PKQZVqQ==",
+      "dependencies": {
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-editor-classic": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-editor-classic/-/ckeditor5-editor-classic-42.0.0.tgz",
+      "integrity": "sha512-/Np+DH2AVlkPVk3pkIJxJaJp2x+2GXkvn3wo/5ZFGbVBXI+e9todALoRRg2dB9EVRpv08I3ajzk5k1yl6MFa5w==",
+      "dependencies": {
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-editor-decoupled": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-editor-decoupled/-/ckeditor5-editor-decoupled-42.0.0.tgz",
+      "integrity": "sha512-bTgtSsu2f7QOMtWXZ2BQvnZ/DHRQE/wL9qN5MBhTbNf7vcayEEo++GJ/3sgLctzL7FxRCY0IqRvSrBf4fLFEZg==",
+      "dependencies": {
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-editor-inline": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-editor-inline/-/ckeditor5-editor-inline-42.0.0.tgz",
+      "integrity": "sha512-JUe8YV59Ek4lornaa5hXQQOFkDxA3l0tp9qVIdkl2WONI1pjtK1aMxWJgeybxRGDHPSJW2Wyu/kNKw2slQP+Jg==",
+      "dependencies": {
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-editor-multi-root": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-editor-multi-root/-/ckeditor5-editor-multi-root-42.0.0.tgz",
+      "integrity": "sha512-l/+xnoVIGJeX3qU8CEKdc5RNr0Bbch2t5VNNK+N9An4SrK4ScLESyrKsIoWc4XPOoyhNe1j0luT8Ix35ftDroQ==",
+      "dependencies": {
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-engine": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-engine/-/ckeditor5-engine-42.0.0.tgz",
+      "integrity": "sha512-9JhZDAu+IAJYD3SCrssrDU9XmEYfu+1XtYKslNlXRweNIf5QlVeZhb3pTjcR/4lbxNuYXc/VSNsFfEjbPKm1/g==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-utils": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-enter": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-enter/-/ckeditor5-enter-42.0.0.tgz",
+      "integrity": "sha512-HlSMX9jYZ1fob5L5+dJ7dmYxJT2RVzgO95IeMXvbsSMEQ5IC1ZhE8UIcaStNTUZ7SNQzhcX6cqUrPO8Zhh46xw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "42.0.0",
+        "@ckeditor/ckeditor5-engine": "42.0.0",
+        "@ckeditor/ckeditor5-utils": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-essentials": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-essentials/-/ckeditor5-essentials-42.0.0.tgz",
+      "integrity": "sha512-DYWrEcraXiw+S9lbAk3UfvOnSe2ActOchk15hTishQKhRBzPqLDWr8bTYy4TwgwaMJg1gW9KK5o19oHLfW0P3A==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-find-and-replace": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-find-and-replace/-/ckeditor5-find-and-replace-42.0.0.tgz",
+      "integrity": "sha512-WrScnK58umy8LqGpYvQieJd8mgo9yYKVoG0KnDrlj+Q2hZhGqta5jt1CRlYOQLO2QsVg9POt6oioUTiWee60ag==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-ui": "42.0.0",
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-font": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-font/-/ckeditor5-font-42.0.0.tgz",
+      "integrity": "sha512-7ds9luaUDdHrmdZ6JKPn82+DkJAJ3Ej5Rdta8xfcnI1kDvGcLPRzwPCHeM5AD8RRqHX28B87U4FaOk9ehOE+Nw==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-heading": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-heading/-/ckeditor5-heading-42.0.0.tgz",
+      "integrity": "sha512-KLquk1q0yOjw9rGgq+beigc3uzIk5+5fq1VJCfyeq2qkrLdezWf21Up0h8zCBjJGt4Dw7jodJyMnK4GH3885Xw==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-highlight": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-highlight/-/ckeditor5-highlight-42.0.0.tgz",
+      "integrity": "sha512-aWEv0yHVmzj9JRpXnURWSs64lphei+Bc6PbiecpQJvidjmFSgmVO0pFGtHe+iMmGy7S4TTGnPVEnq4IS0gGdgQ==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-horizontal-line": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-horizontal-line/-/ckeditor5-horizontal-line-42.0.0.tgz",
+      "integrity": "sha512-9YIYENX3YM2WXLItD1rqMq+Lqc3daRT4E18C2FXgfrMUQNYDyM5UFzsi6HahjvRe2pbYOx0MwYGvaHgSjBVsCQ==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-html-embed": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-html-embed/-/ckeditor5-html-embed-42.0.0.tgz",
+      "integrity": "sha512-nh4ROlPU6enn9uOYigOsJHegnZslVs3UYOhLsod2JBOB2spF0AcoqOtk/Oh6SLajDa0iZ+oi1U7iNxXvekcysQ==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-html-support": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-html-support/-/ckeditor5-html-support-42.0.0.tgz",
+      "integrity": "sha512-HPwiaz9Ah2BjuS2UgLdYv+APo+k0HJG79M/dgC3rNLX0O3IoWBDBXfcRhWKiGE1FBV3l1jt8eQgnaqsuKC6PIw==",
+      "dependencies": {
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-image": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-image/-/ckeditor5-image-42.0.0.tgz",
+      "integrity": "sha512-lKq4OuhLDNS4sip4/yl/vGDuOitTCInMYEhvwZXlm6eFem75FTJnL1Co5+zKIVWktWvH2eFqmOGjv2jKrJIVgw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-ui": "42.0.0",
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-indent": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-indent/-/ckeditor5-indent-42.0.0.tgz",
+      "integrity": "sha512-Ba7cTreIEFoF0mJXRjBZdwgyzSvdmnqtlwMInM/IBIJDo6Vi4zx4svA2G1PvY/hV3UCvCAxzSqQ7s62yQT4KEQ==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-language": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-language/-/ckeditor5-language-42.0.0.tgz",
+      "integrity": "sha512-x1cFYKtxBz1dhWXZ6DGvegCks7st6N1jFL55kyDgkvZqjsui/aPSvHnrcT6T0UO2sjMwAJh5/be5PXAJJ1yL0g==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-link": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-link/-/ckeditor5-link-42.0.0.tgz",
+      "integrity": "sha512-myphicJKjwv1LZ0pFdd1u4VOQieonPoNezRhsrFBkLTqIADgMp3+2PETyls5W8JZnua4sg/724Wa9TPmn9BLAA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-ui": "42.0.0",
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-list": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-list/-/ckeditor5-list-42.0.0.tgz",
+      "integrity": "sha512-taBQvwlhWmzFGGxOa5QH+XFeFRPke2X+3L/bdp/PJb9ZBX/wuqDL/cECQwDjblbGG8Iu1pDBOZSMG/bIknZjog==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-markdown-gfm": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-markdown-gfm/-/ckeditor5-markdown-gfm-42.0.0.tgz",
+      "integrity": "sha512-wtNpAkBiyobHbeLpsnnf9aroSIIjvKYsNxeNqB7P55ZyRN+mLdGQxp2ozPgCIjeb34SaalJ1VtiRnPS+B+NbaQ==",
+      "dependencies": {
+        "ckeditor5": "42.0.0",
+        "marked": "4.0.12",
+        "turndown": "7.2.0",
+        "turndown-plugin-gfm": "1.0.2"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-media-embed": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-media-embed/-/ckeditor5-media-embed-42.0.0.tgz",
+      "integrity": "sha512-cbaTwnnNC8Li497WrArw4BcENQcv+b7FH7Q93bjytQN8vrxZR8+eWfCHbaR8dNewAWLI4/jNp9S64koOMOhUTQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-ui": "42.0.0",
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-mention": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-mention/-/ckeditor5-mention-42.0.0.tgz",
+      "integrity": "sha512-6jC5vGfHAeYarmgecw4cWj7u1E4EgFZlQh6Z15WcQ2OeHTiBLh1fGFPM10gKauIYfUsmHfsVFsafGyByFQsZBw==",
+      "dependencies": {
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-minimap": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-minimap/-/ckeditor5-minimap-42.0.0.tgz",
+      "integrity": "sha512-cTbZqve6xYh5D4XSecU1AEx5Rl2gRm2U91G3O53GddhuScG9tchmZ2n3kzFz6FkDcYpgWJBLK5uEdSBede+YeQ==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-page-break": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-page-break/-/ckeditor5-page-break-42.0.0.tgz",
+      "integrity": "sha512-2Bg4cAMBs1RGIMn0CZSnADSG+Zn19u0/qMfxR5Js5AolMjsMFcvfHVHrP7WTPfYKz0S0F9LLWTEjyf3f6PU3Og==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-paragraph": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-paragraph/-/ckeditor5-paragraph-42.0.0.tgz",
+      "integrity": "sha512-CNEc+YBDD5vysMxzSkCRXNtCeWJH2Drq2ynFc6YAOVXnfAQvpW3PnuwHMUQvS6r1BCk35xEbUpuRLCXxOuoipg==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "42.0.0",
+        "@ckeditor/ckeditor5-ui": "42.0.0",
+        "@ckeditor/ckeditor5-utils": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-paste-from-office": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-paste-from-office/-/ckeditor5-paste-from-office-42.0.0.tgz",
+      "integrity": "sha512-pfBOovJz+CnXXX4XQLJQTBRWHTnlG7gibzzMnnmK+KIzsjlVOGrl09c2uafQo0QvgNSH0bF6Yhxn6T2CTCWcYw==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-remove-format": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-remove-format/-/ckeditor5-remove-format-42.0.0.tgz",
+      "integrity": "sha512-lS/fEoSM2HOhA+Ocve3gwRjlqKhZQx5Rbm3PBzAQJAZosfxCeCLcg2RJb1zGD4mGsY2urWAeRVNNckJObcNM9Q==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-restricted-editing": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-restricted-editing/-/ckeditor5-restricted-editing-42.0.0.tgz",
+      "integrity": "sha512-5WnyJ+rLbh206Y3XbOxNKxpdNi9X4nE+O/Pk7TLgvkZ2S4UdptplaycXk9mTHZvtRWCs1VLW629WoEoHXPGtxg==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-select-all": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-select-all/-/ckeditor5-select-all-42.0.0.tgz",
+      "integrity": "sha512-6tnRtB5TIsgUh6I+lahvIYxsL61M+b0XvLQCPpIiYHn+V6htEESoniz7vVxEgwNXnCuCFoHvO+IpjC6ugd0ESA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "42.0.0",
+        "@ckeditor/ckeditor5-ui": "42.0.0",
+        "@ckeditor/ckeditor5-utils": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-show-blocks": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-show-blocks/-/ckeditor5-show-blocks-42.0.0.tgz",
+      "integrity": "sha512-ZQ/u1/7fU2ZA57q3i6yTsHSgzAPQ60uK49/R/zQYCQsAzxGXavvQ0qOwbpzaR1O+y942w1n0E5roXyTelTHaPQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-ui": "42.0.0",
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-source-editing": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-source-editing/-/ckeditor5-source-editing-42.0.0.tgz",
+      "integrity": "sha512-p2KtKpcX2vuPNA85n5mQRwouEAWGqFpXiblMCdDtp8Ajql1EcGa66edOP8qeyT1CpsJ6PM/sZ86otKKGTFl4yQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-theme-lark": "42.0.0",
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-special-characters": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-special-characters/-/ckeditor5-special-characters-42.0.0.tgz",
+      "integrity": "sha512-WXKjyCE4AZG0yWRkRI3EvoYU8L+U1Ckz9cdeUEpPC7MFBZT2o28pGDyE8jzjmt51tOIZUNuSnwUCF1+kRn+xKg==",
+      "dependencies": {
+        "ckeditor5": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-style": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-style/-/ckeditor5-style-42.0.0.tgz",
+      "integrity": "sha512-0WaRKAuslHEpmwz+ebQYAwmH047QPt0Kp2XiXxvbVyeSgpmX6c8AzbrkCT11kGCpC1VEdiqg8AkroPQCO+VDnw==",
+      "dependencies": {
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-table": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-table/-/ckeditor5-table-42.0.0.tgz",
+      "integrity": "sha512-D3RwXDIsUX8MGUfg2bpcfObF0seYUllqW0aMalPPcpKVwO9Yjh98FXi8CQyrLp7Ig7ef8yFQv6I5y38Gze8Utw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-ui": "42.0.0",
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-theme-lark": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-theme-lark/-/ckeditor5-theme-lark-42.0.0.tgz",
+      "integrity": "sha512-G9rda0cxoi2qrTxsUQyOTnj8cH/66ZRPYd2v2cCuWxfjkNELzqjWtl1e9v5cQQvUrxcp7gPCTOtvc3lchdD5tg==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-ui": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-typing": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-typing/-/ckeditor5-typing-42.0.0.tgz",
+      "integrity": "sha512-6FDkdEDrWKBnEX+C4qqQ2j5VD26Z+VBr2vtprYtRykRCYpc/n4pbbz9ecjXnJ/E8ftm44nCMcBxbg8HPEjroyw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "42.0.0",
+        "@ckeditor/ckeditor5-engine": "42.0.0",
+        "@ckeditor/ckeditor5-utils": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-ui": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-ui/-/ckeditor5-ui-42.0.0.tgz",
+      "integrity": "sha512-Z69x9u8UkUP7P1F6u7loUGXqUiNtEXBz+2flXHxBq6JVnGh5rZ3ZtVhWQRaOSAIVp+ub/BwEcwzqq4itI1Tuog==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "42.0.0",
+        "@ckeditor/ckeditor5-utils": "42.0.0",
+        "color-convert": "2.0.1",
+        "color-parse": "1.4.2",
+        "lodash-es": "4.17.21",
+        "vanilla-colorful": "0.7.2"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-undo": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-undo/-/ckeditor5-undo-42.0.0.tgz",
+      "integrity": "sha512-7H4hD4k0jmrSk5n1cYKlj2rmuICIwdGFX3WMPv2KuEKI1WYZBE10KLf6bB15EFoMVvBFepX0TjfEVXTO6Ul5rw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "42.0.0",
+        "@ckeditor/ckeditor5-engine": "42.0.0",
+        "@ckeditor/ckeditor5-ui": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-upload": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-upload/-/ckeditor5-upload-42.0.0.tgz",
+      "integrity": "sha512-UPRre84p6qPyPVhDsfuVh5rNGcaZjSIQhGdqOPfgMWc4QYOKNf7Y7TvW+9xzUVXyHbo2pcvOq6/Ldw6z4zk10g==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "42.0.0",
+        "@ckeditor/ckeditor5-utils": "42.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-utils": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-utils/-/ckeditor5-utils-42.0.0.tgz",
+      "integrity": "sha512-9f3eAjh7sgYC+Cth0yEHaWBJpPFWWehPa3efAlSjuKl0NhW2mzSU5s9SMRNDS5MJAI+oTIOLP5/SV/pNCbiT3A==",
+      "dependencies": {
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-vue": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-vue/-/ckeditor5-vue-6.0.0.tgz",
+      "integrity": "sha512-ElqUiyWpDYJZcyHGC4B51NYhz6QTowsY8TGuz8bxGoADaNf6yJkv8jWwCbGPEWwQGLsskih4naBMCOn4hizJww==",
+      "dependencies": {
+        "lodash-es": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "ckeditor5": ">=42.0.0 || ^0.0.0-nightly",
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-watchdog": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-watchdog/-/ckeditor5-watchdog-42.0.0.tgz",
+      "integrity": "sha512-rNk1GtiIx6KYaE/B4atNOb7QNB916RbFfq4MsOPPVow+64XF3Ljvx14qX1I/da+WH3EbpoBwbJqnIlu7aLa0Ww==",
+      "dependencies": {
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-widget": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-widget/-/ckeditor5-widget-42.0.0.tgz",
+      "integrity": "sha512-HbPQCCwsBfRWSHOM0Qn1MFvlAym1S3XvQzqe7tEPZ577RLSk0H4FEvv6YxpUNjsjujYlDsUK+dF8zVye7Cv7tw==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-core": "42.0.0",
+        "@ckeditor/ckeditor5-engine": "42.0.0",
+        "@ckeditor/ckeditor5-enter": "42.0.0",
+        "@ckeditor/ckeditor5-typing": "42.0.0",
+        "@ckeditor/ckeditor5-ui": "42.0.0",
+        "@ckeditor/ckeditor5-utils": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@ckeditor/ckeditor5-word-count": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/@ckeditor/ckeditor5-word-count/-/ckeditor5-word-count-42.0.0.tgz",
+      "integrity": "sha512-+P8Q7hWdkq+sTt2+qAgz+OsOsTTdqluyYgrKRx9DvjLRsF+VmlHwNTaOMqcnU1EWNfFcjevQHoTugmqm+dWquQ==",
+      "dependencies": {
+        "ckeditor5": "42.0.0",
+        "lodash-es": "4.17.21"
+      }
+    },
     "node_modules/@ctrl/tinycolor": {
       "version": "3.6.1",
       "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
@@ -442,6 +975,11 @@
       "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
+    "node_modules/@mixmark-io/domino": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/@mixmark-io/domino/-/domino-2.2.0.tgz",
+      "integrity": "sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw=="
+    },
     "node_modules/@popperjs/core": {
       "name": "@sxzz/popperjs-es",
       "version": "2.11.7",
@@ -896,6 +1434,99 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/blurhash": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/blurhash/-/blurhash-2.0.5.tgz",
+      "integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w=="
+    },
+    "node_modules/ckeditor5": {
+      "version": "42.0.0",
+      "resolved": "https://registry.npmmirror.com/ckeditor5/-/ckeditor5-42.0.0.tgz",
+      "integrity": "sha512-l/Qdw61+nAhkNfXRzPp3a6W75XGnKBKWlJqEbgMGclgAvaqgWE7MAz9VqQCJSeMK8PjgFH1EcBMPRmG+6W8QRQ==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-adapter-ckfinder": "42.0.0",
+        "@ckeditor/ckeditor5-alignment": "42.0.0",
+        "@ckeditor/ckeditor5-autoformat": "42.0.0",
+        "@ckeditor/ckeditor5-autosave": "42.0.0",
+        "@ckeditor/ckeditor5-basic-styles": "42.0.0",
+        "@ckeditor/ckeditor5-block-quote": "42.0.0",
+        "@ckeditor/ckeditor5-ckbox": "42.0.0",
+        "@ckeditor/ckeditor5-ckfinder": "42.0.0",
+        "@ckeditor/ckeditor5-clipboard": "42.0.0",
+        "@ckeditor/ckeditor5-cloud-services": "42.0.0",
+        "@ckeditor/ckeditor5-code-block": "42.0.0",
+        "@ckeditor/ckeditor5-core": "42.0.0",
+        "@ckeditor/ckeditor5-easy-image": "42.0.0",
+        "@ckeditor/ckeditor5-editor-balloon": "42.0.0",
+        "@ckeditor/ckeditor5-editor-classic": "42.0.0",
+        "@ckeditor/ckeditor5-editor-decoupled": "42.0.0",
+        "@ckeditor/ckeditor5-editor-inline": "42.0.0",
+        "@ckeditor/ckeditor5-editor-multi-root": "42.0.0",
+        "@ckeditor/ckeditor5-engine": "42.0.0",
+        "@ckeditor/ckeditor5-enter": "42.0.0",
+        "@ckeditor/ckeditor5-essentials": "42.0.0",
+        "@ckeditor/ckeditor5-find-and-replace": "42.0.0",
+        "@ckeditor/ckeditor5-font": "42.0.0",
+        "@ckeditor/ckeditor5-heading": "42.0.0",
+        "@ckeditor/ckeditor5-highlight": "42.0.0",
+        "@ckeditor/ckeditor5-horizontal-line": "42.0.0",
+        "@ckeditor/ckeditor5-html-embed": "42.0.0",
+        "@ckeditor/ckeditor5-html-support": "42.0.0",
+        "@ckeditor/ckeditor5-image": "42.0.0",
+        "@ckeditor/ckeditor5-indent": "42.0.0",
+        "@ckeditor/ckeditor5-language": "42.0.0",
+        "@ckeditor/ckeditor5-link": "42.0.0",
+        "@ckeditor/ckeditor5-list": "42.0.0",
+        "@ckeditor/ckeditor5-markdown-gfm": "42.0.0",
+        "@ckeditor/ckeditor5-media-embed": "42.0.0",
+        "@ckeditor/ckeditor5-mention": "42.0.0",
+        "@ckeditor/ckeditor5-minimap": "42.0.0",
+        "@ckeditor/ckeditor5-page-break": "42.0.0",
+        "@ckeditor/ckeditor5-paragraph": "42.0.0",
+        "@ckeditor/ckeditor5-paste-from-office": "42.0.0",
+        "@ckeditor/ckeditor5-remove-format": "42.0.0",
+        "@ckeditor/ckeditor5-restricted-editing": "42.0.0",
+        "@ckeditor/ckeditor5-select-all": "42.0.0",
+        "@ckeditor/ckeditor5-show-blocks": "42.0.0",
+        "@ckeditor/ckeditor5-source-editing": "42.0.0",
+        "@ckeditor/ckeditor5-special-characters": "42.0.0",
+        "@ckeditor/ckeditor5-style": "42.0.0",
+        "@ckeditor/ckeditor5-table": "42.0.0",
+        "@ckeditor/ckeditor5-theme-lark": "42.0.0",
+        "@ckeditor/ckeditor5-typing": "42.0.0",
+        "@ckeditor/ckeditor5-ui": "42.0.0",
+        "@ckeditor/ckeditor5-undo": "42.0.0",
+        "@ckeditor/ckeditor5-upload": "42.0.0",
+        "@ckeditor/ckeditor5-utils": "42.0.0",
+        "@ckeditor/ckeditor5-watchdog": "42.0.0",
+        "@ckeditor/ckeditor5-widget": "42.0.0",
+        "@ckeditor/ckeditor5-word-count": "42.0.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/color-parse": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/color-parse/-/color-parse-1.4.2.tgz",
+      "integrity": "sha512-RI7s49/8yqDj3fECFZjUI1Yi0z/Gq1py43oNJivAIIDSyJiOZLfYCRQEgn8HEVAj++PcRe8AnL2XF0fRJ3BTnA==",
+      "dependencies": {
+        "color-name": "^1.0.0"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1091,6 +1722,17 @@
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
     },
+    "node_modules/marked": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmmirror.com/marked/-/marked-4.0.12.tgz",
+      "integrity": "sha512-hgibXWrEDNBWgGiK18j/4lkS6ihTe9sxtV4Q1OQppb/0zzyPSzoFANBa5MfsG/zgsWklmNnhm0XACZOH/0HBiQ==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/memoize-one": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
@@ -1223,6 +1865,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/turndown": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/turndown/-/turndown-7.2.0.tgz",
+      "integrity": "sha512-eCZGBN4nNNqM9Owkv9HAtWRYfLA4h909E/WGAWWBpmB275ehNhZyk87/Tpvjbp0jjNl9XwCsbe6bm6CqFsgD+A==",
+      "dependencies": {
+        "@mixmark-io/domino": "^2.2.0"
+      }
+    },
+    "node_modules/turndown-plugin-gfm": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/turndown-plugin-gfm/-/turndown-plugin-gfm-1.0.2.tgz",
+      "integrity": "sha512-vwz9tfvF7XN/jE0dGoBei3FXWuvll78ohzCZQuOb+ZjWrs3a0XhQVomJEb2Qh4VHTPNRO4GPZh0V7VRbiWwkRg=="
+    },
+    "node_modules/vanilla-colorful": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmmirror.com/vanilla-colorful/-/vanilla-colorful-0.7.2.tgz",
+      "integrity": "sha512-z2YZusTFC6KnLERx1cgoIRX2CjPRP0W75N+3CC6gbvdX5Ch47rZkEMGO2Xnf+IEmi3RiFLxS18gayMA27iU7Kg=="
+    },
     "node_modules/vite": {
       "version": "5.3.1",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-5.3.1.tgz",

package.json

@@ -9,7 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ckeditor/ckeditor5-vue": "^6.0.0",
+    "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.7.2",
+    "ckeditor5": "^42.0.0",
     "element-plus": "^2.7.6",
     "vue": "^3.4.29",
     "vue-router": "^4.4.0",

src/main.js

@@ -3,6 +3,7 @@ import './style.css'
 import App from './App.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import CKEditor from '@ckeditor/ckeditor5-vue';
 
 import router from './router'
 import store from './store'
@@ -11,4 +12,5 @@ const app = createApp(App)
 app.use(ElementPlus)
 app.use(router)
 app.use(store)
+app.use(CKEditor)
 app.mount('#app')

src/router/authentication.js

@@ -1,10 +1,36 @@
-// ！！！这是一个示例，请根据实际情况修改！！！
+import Login from '../views/authentication/Login.vue';
-// import Login from '../views/authentication/Login.vue'
+import Register from '../views/authentication/Register.vue';
-// import Register from '../views/authentication/Register.vue'
+import ManageProfile from '../views/authentication/ManageProfile.vue';
-// import Profile from '../views/authentication/Profile.vue'
+import Profile from '../views/authentication/Profile.vue';
+import store from '../store';
+import {createRouter, createWebHistory} from "vue-router";
 
-export default [
+const routes = [
-    // { path: '/login', component: Login },
+  { path: '/login', component: Login },
-    // { path: '/register', component: Register },
+  { path: '/register', component: Register },
-    // { path: '/profile', component: Profile }
+  { path: '/manageProfile', component: ManageProfile },
-]
+  {
+    path: '/profile',
+    component: Profile,
+    meta: { requiresAuth: true },
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    if (!store.getters['authentication/isAuthenticated']) {
+      next('/login');
+    } else {
+      next();
+    }
+  } else {
+    next();
+  }
+});
+
+export default routes;

src/router/newsManagement.js

@@ -1,9 +1,11 @@
-// import NewsList from '../views/news-management/NewsList.vue'
+import NewsList from '../views/news-management/NewsList.vue'
+import EditNews from "@views/news-management/EditNews.vue";
 // import NewsDetail from '../views/news-management/NewsDetail.vue'
 // import NewsEdit from '../views/news-management/NewsEdit.vue'
 
 export default [
-    // { path: '/news', component: NewsList },
+    { path: '/news', component: NewsList },
+    { path: '/news/edit', component: EditNews, name: 'editNews' },
     // { path: '/news/:id', component: NewsDetail },
     // { path: '/news/:id/edit', component: NewsEdit }
 ]

src/store/authentication.js

@@ -1,30 +1,43 @@
+import axios from 'axios';
+
 const state = {
-    user: null
+    isAuthenticated: false,
-}
+    token: null,
+};
 
 const mutations = {
-    setUser(state, user) {
+    setUser(state, {token}) {
-        state.user = user
+        state.isAuthenticated = true;
-    }
+        state.token = token;
-}
+    },
+    clearUser(state) {
+        state.isAuthenticated = false;
+        state.token = null;
+    },
+};
 
 const actions = {
-    login({ commit }, user) {
+    async login({commit}, credentials) {
-        commit('setUser', user)
+        const response = await axios.post('/api/login', credentials);
+        if (response.status === 200) {
+            commit('setUser', {token: response.data.token});
+        }
+        return response;
     },
-    logout({ commit }) {
+    logout({commit}) {
-        commit('setUser', null)
+        commit('clearUser');
-    }
+    },
-}
+};
 
 const getters = {
-    isAuthenticated: state => !!state.user
+    isAuthenticated: (state) => state.isAuthenticated,
-}
+    token: (state) => state.token,
+};
 
 export default {
     namespaced: true,
     state,
     mutations,
     actions,
-    getters
+    getters,
-}
+};

src/style.css

@@ -1,4 +1,158 @@
+@import url('https://fonts.googleapis.com/css2?family=Oswald&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
 body, html {
     margin: 0;
     padding: 0;
-}
+}
+
+@media print {
+    body {
+        margin: 0 !important;
+    }
+}
+
+.main-container {
+    font-family: 'Lato';
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.ck-content {
+    font-family: 'Lato';
+    line-height: 1.6;
+    word-break: break-word;
+}
+
+.editor-container_classic-editor .editor-container__editor {
+    min-width: 750px;
+    max-width: 1000px;
+    width: 100%;
+}
+
+.ck-content h3.category {
+    font-family: 'Oswald';
+    font-size: 20px;
+    font-weight: bold;
+    color: #555;
+    letter-spacing: 10px;
+    margin: 0;
+    padding: 0;
+}
+
+.ck-content h2.document-title {
+    font-family: 'Oswald';
+    font-size: 50px;
+    font-weight: bold;
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+.ck-content h3.document-subtitle {
+    font-family: 'Oswald';
+    font-size: 20px;
+    color: #555;
+    margin: 0 0 1em;
+    font-weight: bold;
+    padding: 0;
+}
+
+.ck-content p.info-box {
+    --background-size: 30px;
+    --background-color: #e91e63;
+    padding: 1.2em 2em;
+    border: 1px solid var(--background-color);
+    background: linear-gradient(
+            135deg,
+            var(--background-color) 0%,
+            var(--background-color) var(--background-size),
+            transparent var(--background-size)
+    ),
+    linear-gradient(
+            135deg,
+            transparent calc(100% - var(--background-size)),
+            var(--background-color) calc(100% - var(--background-size)),
+            var(--background-color)
+    );
+    border-radius: 10px;
+    margin: 1.5em 2em;
+    box-shadow: 5px 5px 0 #ffe6ef;
+}
+
+.ck-content blockquote.side-quote {
+    font-family: 'Oswald';
+    font-style: normal;
+    float: right;
+    width: 35%;
+    position: relative;
+    border: 0;
+    overflow: visible;
+    z-index: 1;
+    margin-left: 1em;
+}
+
+.ck-content blockquote.side-quote::before {
+    content: '“';
+    position: absolute;
+    top: -37px;
+    left: -10px;
+    display: block;
+    font-size: 200px;
+    color: #e7e7e7;
+    z-index: -1;
+    line-height: 1;
+}
+
+.ck-content blockquote.side-quote p {
+    font-size: 2em;
+    line-height: 1;
+}
+
+.ck-content blockquote.side-quote p:last-child:not(:first-child) {
+    font-size: 1.3em;
+    text-align: right;
+    color: #555;
+}
+
+.ck-content span.marker {
+    background: yellow;
+}
+
+.ck-content span.spoiler {
+    background: #000;
+    color: #000;
+}
+
+.ck-content span.spoiler:hover {
+    background: #000;
+    color: #fff;
+}
+
+.ck-content pre.fancy-code {
+    border: 0;
+    margin-left: 2em;
+    margin-right: 2em;
+    border-radius: 10px;
+}
+
+.ck-content pre.fancy-code::before {
+    content: '';
+    display: block;
+    height: 13px;
+    margin-bottom: 8px;
+    background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==) no-repeat;
+}
+
+.ck-content pre.fancy-code-dark {
+    background: #272822;
+    color: #fff;
+    box-shadow: 5px 5px 0 #0000001f;
+}
+
+.ck-content pre.fancy-code-bright {
+    background: #dddfe0;
+    color: #000;
+    box-shadow: 5px 5px 0 #b3b3b3;
+}

src/views/authentication/Login.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { ref } from 'vue';
+import { ElInput, ElButton, ElCheckbox, ElForm, ElFormItem, ElMessage } from 'element-plus';
+import 'element-plus/dist/index.css';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+
+const store = useStore();
+const router = useRouter();
+
+const username = ref('');
+const password = ref('');
+const rememberMe = ref(false);
+
+const handleLogin = async () => {
+  console.log('Logging in with', { username: username.value, password: password.value, rememberMe: rememberMe.value });
+
+  try {
+    const response = await store.dispatch('authentication/login', {
+      username: username.value,
+      password: password.value,
+    });
+
+    if (response.status === 200) {
+      ElMessage.success('登录成功');
+      router.push('/profile');
+    } else {
+      ElMessage.error('登录失败，请稍后再试');
+    }
+  } catch (error) {
+    if (error.response && error.response.status === 401) {
+      ElMessage.error('用户名或密码错误');
+    } else {
+      ElMessage.error('登录失败，请稍后再试');
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="login-container">
+    <div class="login-box">
+      <h2>测盟汇管理系统</h2>
+      <ElForm @submit.prevent="handleLogin">
+        <ElFormItem>
+          <label for="username">
+            <i class="fas fa-user"></i> 账号
+          </label>
+          <ElInput v-model="username" type="text" id="username" placeholder="请输入您的账号" required />
+        </ElFormItem>
+        <ElFormItem>
+          <label for="password">
+            <i class="fas fa-lock"></i> 密码
+          </label>
+          <ElInput v-model="password" type="password" id="password" placeholder="请输入您的密码" required />
+        </ElFormItem>
+        <ElFormItem>
+          <ElCheckbox v-model="rememberMe" id="rememberMe">记住密码</ElCheckbox>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="primary" native-type="submit" class="login-button">登录</ElButton>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="text" @click="() => $router.push('/register')">注册</ElButton>
+        </ElFormItem>
+      </ElForm>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: url('background.jpg') no-repeat center center;
+  background-size: cover;
+}
+
+.login-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  width: 20%;
+}
+
+h2 {
+  margin-bottom: 1rem;
+}
+
+.el-form-item {
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+.el-form-item label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.el-input {
+  width: 100%;
+}
+
+.el-button {
+  width: 100%;
+  padding: 0.75rem;
+}
+
+.el-button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.el-button--primary:hover {
+  background-color: #0056b3;
+}
+</style>

src/views/authentication/ManageProfile.vue

@@ -0,0 +1,219 @@
+<script setup>
+import {onMounted, ref} from 'vue';
+import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElRadio, ElRadioGroup, ElTabPane, ElTabs} from 'element-plus';
+import 'element-plus/dist/index.css';
+import axios from "axios";
+import {useStore} from 'vuex';
+import {useRouter} from 'vue-router';
+
+const store = useStore();
+const router = useRouter();
+
+const token = store.getters['authentication/token'];
+const nickname = ref('');
+const phoneNumber = ref('');
+const email = ref('');
+const gender = ref('');
+const department = ref('');
+const role = ref('');
+const currentPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+
+onMounted(
+    async () => {
+      try {
+        // 从Vuex中获取JWT token
+        if (!token) {
+          store.commit('authentication/logout');
+          router.push('/login');
+        }
+
+        // 发送请求并附带token参数
+        const response = await axios.get(`/api/userProfile?token=${token}`);
+
+        if (response.status === 200) {
+          const user = response.data;
+          nickname.value = user.nickname;
+          phoneNumber.value = user.phoneNumber;
+          email.value = user.email;
+          gender.value = user.gender;
+          department.value = user.department;
+          role.value = user.role;
+        } else {
+          ElMessage.error('获取用户信息失败，请重试');
+        }
+      } catch (error) {
+        console.error('Error fetching user profile:', error);
+        ElMessage.error('获取用户信息失败，请重试');
+      }
+    }
+)
+
+const handleSaveProfile = async () => {
+  console.log('Saving profile with', {
+    nickname: nickname.value,
+    phoneNumber: phoneNumber.value,
+    email: email.value,
+    gender: gender.value,
+    department: department.value,
+    role: role.value
+  });
+  // 处理保存资料逻辑
+  try {
+    const response = await axios.post('/api/manageUserProfile', {
+      token: token,
+      nickname: nickname.value,
+      phoneNumber: phoneNumber.value,
+      email: email.value,
+      gender: gender.value,
+      department: department.value,
+      role: role.value
+    });
+    if (response.status === 200) {
+      ElMessage.success('资料保存成功');
+    } else {
+      ElMessage.error('保存用户信息失败，请重试');
+    }
+  } catch (error) {
+    console.info('Error saving user profile:', error);
+    ElMessage.error('保存用户信息失败，请重试');
+  }
+
+};
+
+const handleChangePassword = async () => {
+  if (newPassword.value !== confirmPassword.value) {
+    ElMessage.error('新密码和确认密码不一致');
+    return;
+  }
+  // console.log('Changing password with', {currentPassword: currentPassword.value, newPassword: newPassword.value});
+  // 处理修改密码逻辑
+  try {
+    const response = await axios.post('/api/changePassword', {
+      token: token,
+      currentPassword: currentPassword.value,
+      newPassword: newPassword.value
+    });
+    if (response.status === 200) {
+      ElMessage.success('密码修改成功，请重新登录');
+      store.commit('authentication/logout');
+      router.push('/login');
+    } else {
+      ElMessage.error('修改密码失败，请重试');
+    }
+  } catch (error) {
+    console.info('Error changing password:', error);
+    ElMessage.error('修改密码失败，请重试');
+  }
+};
+</script>
+
+<template>
+  <div class="profile-container">
+    <div class="profile-box">
+      <h2>基本资料</h2>
+      <ElTabs>
+        <ElTabPane label="基本资料">
+          <ElForm @submit.prevent="handleSaveProfile" label-width="100px">
+            <ElFormItem label="用户昵称">
+              <ElInput v-model="nickname" type="text" placeholder="请输入用户昵称" required/>
+            </ElFormItem>
+            <ElFormItem label="手机号码">
+              <ElInput v-model="phoneNumber" type="text" placeholder="请输入手机号码" required/>
+            </ElFormItem>
+            <ElFormItem label="邮箱">
+              <ElInput v-model="email" type="email" placeholder="请输入邮箱" required/>
+            </ElFormItem>
+            <ElFormItem label="性别">
+              <ElRadioGroup v-model="gender">
+                <ElRadio label="男">男</ElRadio>
+                <ElRadio label="女">女</ElRadio>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem label="部门">
+              <ElInput v-model="department" type="text" placeholder="请输入部门" required/>
+            </ElFormItem>
+            <ElFormItem label="角色">
+              <ElInput v-model="role" type="text" placeholder="请输入角色" required/>
+            </ElFormItem>
+            <!--            <ElFormItem label="角色">-->
+            <!--              <ElSelect v-model="role" placeholder="请选择角色" required>-->
+            <!--                <ElOption label="管理员" value="admin"/>-->
+            <!--                <ElOption label="用户" value="user"/>-->
+            <!--              </ElSelect>-->
+            <!--            </ElFormItem>-->
+            <ElFormItem>
+              <ElButton type="primary" @click="handleSaveProfile">保存</ElButton>
+              <ElButton type="danger">取消</ElButton>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+        <ElTabPane label="修改密码">
+          <ElForm @submit.prevent="handleChangePassword" label-width="100px">
+            <ElFormItem label="旧密码">
+              <ElInput v-model="currentPassword" type="password" placeholder="请输入旧密码" required/>
+            </ElFormItem>
+            <ElFormItem label="新密码">
+              <ElInput v-model="newPassword" type="password" placeholder="请输入新密码" required/>
+            </ElFormItem>
+            <ElFormItem label="确认密码">
+              <ElInput v-model="confirmPassword" type="password" placeholder="请输入确认密码" required/>
+            </ElFormItem>
+            <ElFormItem>
+              <ElButton type="primary" @click="handleChangePassword">修改密码</ElButton>
+            </ElFormItem>
+          </ElForm>
+        </ElTabPane>
+      </ElTabs>
+      <ElButton type="text" @click="() => $router.push('/profile')">返回</ElButton>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.profile-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: white;
+}
+
+.profile-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 90%;
+  max-width: 600px;
+}
+
+h2 {
+  margin-bottom: 1rem;
+}
+
+.el-form-item {
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+.el-form-item label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.el-input {
+  width: 100%;
+}
+
+.el-button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.el-button--primary:hover {
+  background-color: #0056b3;
+}
+</style>

src/views/authentication/Profile.vue

@@ -0,0 +1,144 @@
+<script setup>
+import {onMounted, ref} from 'vue';
+import 'element-plus/dist/index.css';
+import {useStore} from 'vuex';
+import axios from "axios";
+import {ElButton, ElMessage} from "element-plus";
+import {useRouter} from 'vue-router';
+
+const store = useStore();
+const router = useRouter();
+
+const nickname = ref('');
+const phoneNumber = ref('');
+const email = ref('');
+const department = ref('');
+const role = ref('');
+const createdAt = ref('');
+
+onMounted(async () => {
+  try {
+    // 从Vuex中获取JWT token
+    const token = store.getters['authentication/token'];
+    if (!token) {
+      store.commit('authentication/logout');
+      router.push('/login');
+    }
+
+    // 发送请求并附带token参数
+    const response = await axios.get(`/api/userProfile?token=${token}`);
+
+    if (response.status === 200) {
+      const user = response.data;
+      nickname.value = user.nickname;
+      phoneNumber.value = user.phoneNumber;
+      email.value = user.email;
+      department.value = user.department;
+      role.value = user.role;
+      createdAt.value = user.createdAt;
+    } else {
+      ElMessage.error("获取用户信息失败，请重试");
+    }
+  } catch (error) {
+    console.error('Error fetching user profile:', error);
+    ElMessage.error("获取用户信息失败，请重试");
+  }
+});
+</script>
+
+
+<template>
+  <div class="profile-container">
+    <div class="profile-box">
+      <h2>个人信息</h2>
+      <div class="profile-image">
+        <img src="@assets/avatar.jpg" alt="Profile Image"/>
+      </div>
+      <div class="profile-info">
+        <div class="divider"></div>
+        <div class="info-item">
+          <span class="info-label">用户昵称：</span>
+          <span class="info-value">{{ nickname }}</span>
+        </div>
+        <div class="divider"></div>
+        <div class="info-item">
+          <span class="info-label">手机号码：</span>
+          <span class="info-value">{{ phoneNumber }}</span>
+        </div>
+        <div class="divider"></div>
+        <div class="info-item">
+          <span class="info-label">用户邮箱：</span>
+          <span class="info-value">{{ email }}</span>
+        </div>
+        <div class="divider"></div>
+        <div class="info-item">
+          <span class="info-label">所属部门：</span>
+          <span class="info-value">{{ department }}</span>
+        </div>
+        <div class="divider"></div>
+        <div class="info-item">
+          <span class="info-label">所属角色：</span>
+          <span class="info-value">{{ role }}</span>
+        </div>
+        <div class="divider"></div>
+        <div class="info-item">
+          <span class="info-label">创建日期：</span>
+          <span class="info-value">{{ createdAt }}</span>
+        </div>
+        <div class="divider"></div>
+      </div>
+      <ElButton type="text" @click="() => $router.push('/manageProfile')">修改信息</ElButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.profile-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: white;
+}
+
+.profile-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 30%;
+  max-width: 300px;
+  text-align: center;
+}
+
+.profile-image img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin-bottom: 1rem;
+}
+
+.profile-info {
+  text-align: left;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.info-label {
+  font-weight: bold;
+}
+
+.info-value {
+  color: #555;
+}
+
+.divider {
+  height: 1px;
+  background: #e0e0e0;
+  margin: 0.5rem 0;
+}
+</style>

src/views/authentication/Register.vue

@@ -0,0 +1,161 @@
+<script setup>
+import {ref} from 'vue';
+import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElMessageBox} from 'element-plus';
+import 'element-plus/dist/index.css';
+import axios from 'axios';
+import {useRouter} from 'vue-router';
+
+const username = ref('');
+const phoneNumber = ref('');
+const password = ref('');
+const verificationCode = ref('');
+const correctCode = ref('');
+const router = useRouter();
+const verificationCodeImage = ref('');
+
+const handleRegister = async () => {
+  console.log('Registering with', {
+    username: username.value,
+    phoneNumber: phoneNumber.value,
+    password: password.value,
+    verificationCode: verificationCode.value
+  });
+  if (verificationCode.value!==correctCode.value){
+    await ElMessageBox.alert("验证码错误");
+    return
+  }
+
+  try {
+    const response = await axios.post('/api/register', {
+      username: username.value,
+      phoneNumber: phoneNumber.value,
+      password: password.value,
+      verificationCode: verificationCode.value,
+    });
+
+    if (response.status === 200) {
+      ElMessage.success(response.data.message);
+      router.push('/login');
+    } else {
+      await ElMessageBox.alert(response.data.message);
+    }
+  } catch (error) {
+    await ElMessageBox.alert(error.response.data.message || '注册失败，请稍后再试');
+  }
+};
+
+const getVerificationCode = async () => {
+  try {
+    const response = await axios.get('/api/getVerificationCode');
+
+    if (response.status === 200) {
+      verificationCodeImage.value = '/api/'+response.data.path; // 更新验证码图片路径
+      correctCode.value = response.data.code;
+      ElMessage.success('验证码已获取');
+    } else {
+      ElMessage.error('获取验证码失败，请稍后再试');
+    }
+  } catch (error) {
+    ElMessage.error('获取验证码失败，请稍后再试');
+  }
+};
+</script>
+
+<template>
+  <div class="register-container">
+    <div class="register-box">
+      <h2>企业租户注册</h2>
+      <ElForm @submit.prevent="handleRegister">
+        <ElFormItem>
+          <label for="userName">用户名称</label>
+          <ElInput v-model="username" type="text" id="userName" placeholder="请输入企业名称" required/>
+        </ElFormItem>
+        <ElFormItem>
+          <label for="phoneNumber">手机号码</label>
+          <ElInput v-model="phoneNumber" type="text" id="phoneNumber" placeholder="请输入企业联系方式" required/>
+        </ElFormItem>
+        <ElFormItem>
+          <label for="password">密码</label>
+          <ElInput v-model="password" type="password" id="password" placeholder="请输入密码" required/>
+        </ElFormItem>
+        <ElFormItem>
+          <label for="verificationCode">验证码</label>
+          <ElInput v-model="verificationCode" type="text" id="verificationCode" placeholder="请输入验证码" required>
+            <template #append>
+              <ElButton type="primary" @click="getVerificationCode" class="verification-button">获取验证码</ElButton>
+            </template>
+          </ElInput>
+        </ElFormItem>
+        <ElFormItem v-if="verificationCodeImage">
+          <img :src="verificationCodeImage" alt="验证码" />
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="primary" native-type="submit" class="register-button">注册</ElButton>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="text" @click="() => $router.push('/login')">返回登录</ElButton>
+        </ElFormItem>
+      </ElForm>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.register-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: url('background.jpg') no-repeat center center;
+  background-size: cover;
+}
+
+.register-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  width: 20%;
+}
+
+h2 {
+  margin-bottom: 1rem;
+}
+
+.el-form-item {
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+.el-form-item label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.el-input {
+  width: 100%;
+}
+
+.verification-button {
+  width: 120px; /* 确保按钮宽度合适 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0; /* 去除默认内边距 */
+}
+
+.el-button {
+  width: 100%;
+  padding: 0.75rem;
+}
+
+.el-button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.el-button--primary:hover {
+  background-color: #0056b3;
+}
+</style>

src/views/news-management/EditNews.vue

@@ -0,0 +1,594 @@
+<script setup>
+import {onMounted, ref} from 'vue';
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElMessageBox,
+  ElOption,
+  ElSelect,
+  ElUpload
+} from 'element-plus';
+import {
+  AccessibilityHelp,
+  Alignment,
+  Autoformat,
+  AutoLink,
+  Autosave,
+  BalloonToolbar,
+  BlockQuote,
+  Bold,
+  ClassicEditor,
+  CodeBlock,
+  Essentials,
+  FindAndReplace,
+  GeneralHtmlSupport,
+  Heading,
+  HorizontalLine,
+  Indent,
+  IndentBlock,
+  Italic,
+  Link,
+  Paragraph,
+  SelectAll,
+  Style,
+  Table,
+  TableCaption,
+  TableCellProperties,
+  TableColumnResize,
+  TableProperties,
+  TableToolbar,
+  TextTransformation,
+  Undo
+} from 'ckeditor5';
+
+import translations from 'ckeditor5/translations/zh-cn.js';
+
+import 'ckeditor5/ckeditor5.css';
+import {Delete, Plus, Refresh, ZoomIn} from "@element-plus/icons-vue";
+import {useRoute, useRouter} from "vue-router";
+import {useStore} from "vuex";
+import axios from "axios";
+
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const token = ref('')
+const form = ref({
+  token: '',
+  title: '',
+  author: '',
+  content: '',
+  summary: '',
+  tenant: '',
+  imagePath: ''
+});
+const createMode = ref(false);
+const componentMode = ref(false);
+const modeTitle = ref('');
+
+const fileList = ref([]); // 用于存储上传文件的列表
+const basePath = '/api/news'
+const uploadUrl = basePath + '/uploadPic'; // 上传的后端地址
+const dialogImageUrl = ref('');
+const dialogVisible = ref(false);  // 用于图片放大预览
+const props = defineProps({
+  mode: {
+    type: String,
+    required: false
+  },
+  id: {
+    type: String,
+    required: false
+  }
+});
+const containerStyle = ref('form-container')
+
+const emit = defineEmits(['setNewsDialogInvisible']);
+const setNewsDialogInvisible = (changed) => {
+  emit('setNewsDialogInvisible', changed);
+};
+
+//下面是编辑模式需要的一些变量
+const id = ref('');
+
+const beforeUpload = (file) => {
+  // 检查文件类型是否为图片（png, jpg, jpeg）
+  const isImage = file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/jpeg';
+  if (!isImage) {
+    ElMessage.error('只能上传 png/jpg/jpeg 格式的图片文件！');
+    return false;
+  }
+
+  // 检查文件大小是否超过 5MB
+  const isLt5M = file.size / 1024 / 1024 < 5;
+  if (!isLt5M) {
+    ElMessage.error('上传文件大小不能超过 5MB！');
+    return false;
+  }
+
+  return true;
+};
+
+const handleSuccess = (response, file, fileList) => {
+  file.url = response.url;
+};
+
+const handleError = (error, file, fileList) => {
+  ElMessage.error('图片上传失败，请重试！');
+};
+
+const handleChange = (file, fileList) => {
+  // 处理文件选择变化时的逻辑，确保只选择最新上传的文件
+  if (fileList.length > 1) {
+    fileList.splice(0, fileList.length - 1)
+  }
+};
+
+const handlePictureCardPreview = (file) => {
+  dialogImageUrl.value = file.url
+  dialogVisible.value = true
+}
+const handleRemove = (file) => {
+  fileList.value = fileList.value.filter((item) => item.uid !== file.uid);
+  console.log(file)
+}
+
+const handleCommit = async () => {
+  // 判断form中的每一个字段都不为空字符串且不为null
+  if (form.value.title === '' || form.value.author === '' || form.value.content === '' || form.value.summary === '' || form.value.tenant === '') {
+    await ElMessageBox.alert('请填写完整信息！');
+    return;
+  }
+  if (fileList.value.length === 0) {
+    await ElMessageBox.alert('请选择图片！');
+    return;
+  }
+  form.value.imagePath = fileList.value[0].url;
+  if (createMode.value) {
+    try {
+      const response = await axios.post(basePath, form.value);
+      ElMessage.success('添加成功！');
+      if (componentMode){
+        setNewsDialogInvisible(true);
+      }
+      else{
+        router.push('/news');
+      }
+    } catch (e) {
+      await ElMessageBox.alert(e.response.data.message);
+    }
+  } else {
+    try {
+      const response = await axios.put(`${basePath}/${id.value}`, form.value);
+      ElMessage.success('修改成功！');
+      if (componentMode){
+        setNewsDialogInvisible(true);
+      }
+      else{
+        router.push('/news');
+      }
+    } catch (e) {
+      await ElMessageBox.alert(e.response.data.message);
+    }
+
+  }
+};
+
+const handleCancel = () => {
+  if (componentMode){
+    setNewsDialogInvisible(false);
+  }
+  else{
+    router.push('/news');
+  }
+};
+
+const isLayoutReady = ref(false);
+const config = ref(null); // CKEditor needs the DOM tree before calculating the configuration.
+const editor = ClassicEditor;
+
+const fetchNewsDetail = async () => {
+  let params = {
+    token: token.value,
+  }
+  const res = await axios.get(basePath + '/' + id.value, {params});
+  form.value.title = res.data.title;
+  form.value.author = res.data.author;
+  form.value.content = res.data.content;
+  form.value.summary = res.data.summary;
+  form.value.tenant = res.data.tenant;
+  form.value.imagePath = res.data.imagePath;
+  fileList.value.push({url: res.data.imagePath});
+}
+
+onMounted(() => {
+  token.value = store.getters['authentication/token'];
+  form.value.token = token.value;
+  if (props.mode !== undefined){
+    componentMode.value = true;
+    containerStyle.value = 'form-container-component'
+    if (props.mode === 'create'){
+      createMode.value = true;
+      modeTitle.value = '添加资讯';
+    }
+    else if (props.mode === 'edit'){
+      createMode.value = false;
+      id.value = props.id;
+      modeTitle.value = '修改资讯';
+      fetchNewsDetail();
+    }
+  }
+  else if (route.query.mode === 'create' || route.params.mode === 'create') {
+    createMode.value = true;
+    modeTitle.value = '添加资讯';
+  } else if (route.query.mode === 'edit' || route.params.mode === 'edit') {
+    id.value = route.params.id === undefined ? route.query.id : route.params.id;
+    createMode.value = false;
+    modeTitle.value = '修改资讯';
+    fetchNewsDetail();
+  }
+
+  config.value = {
+    toolbar: {
+      items: [
+        'undo',
+        'redo',
+        '|',
+        'heading',
+        'style',
+        '|',
+        'bold',
+        'italic',
+        '|',
+        'link',
+        'insertTable',
+        'blockQuote',
+        'codeBlock',
+        '|',
+        'alignment',
+        '|',
+        'indent',
+        'outdent'
+      ],
+      shouldNotGroupWhenFull: false
+    },
+    plugins: [
+      AccessibilityHelp,
+      Alignment,
+      Autoformat,
+      AutoLink,
+      Autosave,
+      BalloonToolbar,
+      BlockQuote,
+      Bold,
+      CodeBlock,
+      Essentials,
+      FindAndReplace,
+      GeneralHtmlSupport,
+      Heading,
+      HorizontalLine,
+      Indent,
+      IndentBlock,
+      Italic,
+      Link,
+      Paragraph,
+      SelectAll,
+      Style,
+      Table,
+      TableCaption,
+      TableCellProperties,
+      TableColumnResize,
+      TableProperties,
+      TableToolbar,
+      TextTransformation,
+      Undo
+    ],
+    balloonToolbar: ['bold', 'italic', '|', 'link'],
+    heading: {
+      options: [
+        {
+          model: 'paragraph',
+          title: 'Paragraph',
+          class: 'ck-heading_paragraph'
+        },
+        {
+          model: 'heading1',
+          view: 'h1',
+          title: 'Heading 1',
+          class: 'ck-heading_heading1'
+        },
+        {
+          model: 'heading2',
+          view: 'h2',
+          title: 'Heading 2',
+          class: 'ck-heading_heading2'
+        },
+        {
+          model: 'heading3',
+          view: 'h3',
+          title: 'Heading 3',
+          class: 'ck-heading_heading3'
+        },
+        {
+          model: 'heading4',
+          view: 'h4',
+          title: 'Heading 4',
+          class: 'ck-heading_heading4'
+        },
+        {
+          model: 'heading5',
+          view: 'h5',
+          title: 'Heading 5',
+          class: 'ck-heading_heading5'
+        },
+        {
+          model: 'heading6',
+          view: 'h6',
+          title: 'Heading 6',
+          class: 'ck-heading_heading6'
+        }
+      ]
+    },
+    htmlSupport: {
+      allow: [
+        {
+          name: /^.*$/,
+          styles: true,
+          attributes: true,
+          classes: true
+        }
+      ]
+    },
+    initialData: '',
+    language: 'zh-cn',
+    link: {
+      addTargetToExternalLinks: true,
+      defaultProtocol: 'https://',
+      decorators: {
+        toggleDownloadable: {
+          mode: 'manual',
+          label: 'Downloadable',
+          attributes: {
+            download: 'file'
+          }
+        }
+      }
+    },
+    menuBar: {
+      isVisible: true
+    },
+    placeholder: '请在此处输入你的文章',
+    style: {
+      definitions: [
+        {
+          name: 'Article category',
+          element: 'h3',
+          classes: ['category']
+        },
+        {
+          name: 'Title',
+          element: 'h2',
+          classes: ['document-title']
+        },
+        {
+          name: 'Subtitle',
+          element: 'h3',
+          classes: ['document-subtitle']
+        },
+        {
+          name: 'Info box',
+          element: 'p',
+          classes: ['info-box']
+        },
+        {
+          name: 'Side quote',
+          element: 'blockquote',
+          classes: ['side-quote']
+        },
+        {
+          name: 'Marker',
+          element: 'span',
+          classes: ['marker']
+        },
+        {
+          name: 'Spoiler',
+          element: 'span',
+          classes: ['spoiler']
+        },
+        {
+          name: 'Code (dark)',
+          element: 'pre',
+          classes: ['fancy-code', 'fancy-code-dark']
+        },
+        {
+          name: 'Code (bright)',
+          element: 'pre',
+          classes: ['fancy-code', 'fancy-code-bright']
+        }
+      ]
+    },
+    table: {
+      contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
+    },
+    translations: [translations]
+  };
+
+  isLayoutReady.value = true;
+});
+</script>
+
+<template>
+  <div :class="containerStyle">
+    <ElForm :model="form" label-width="120px" @submit.prevent="handleCommit">
+      <h2>{{ modeTitle }}</h2>
+      <ElFormItem label="新闻标题" required>
+        <ElInput v-model="form.title" placeholder="请输入新闻标题" required></ElInput>
+      </ElFormItem>
+      <ElFormItem label="新闻图片路径" required>
+        <el-upload
+            :action="uploadUrl"
+            :limit="2"
+            :before-upload="beforeUpload"
+            :on-success="handleSuccess"
+            :on-error="handleError"
+            :on-change="handleChange"
+            :file-list="fileList"
+            list-type="picture-card"
+            auto-upload
+            v-model:file-list="fileList"
+            required
+        >
+          <template #file="{ file }">
+            <div>
+              <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
+              <span class="el-upload-list__item-actions">
+          <span
+              class="el-upload-list__item-preview"
+              @click="handlePictureCardPreview(file)"
+          >
+            <el-icon><zoom-in/></el-icon>
+          </span>
+          <span
+              class="el-upload-list__item-delete"
+              @click="handleRemove(file)"
+          >
+            <el-icon><Delete/></el-icon>
+          </span>
+        </span>
+            </div>
+          </template>
+          <el-icon v-if="fileList.length === 0">
+            <Plus/>
+          </el-icon>
+          <el-icon v-else>
+            <Refresh/>
+          </el-icon>
+        </el-upload>
+        <div class="tip">
+          请上传大小不超过 <span style="color: red;">5MB</span> 格式为 <span style="color: red;">png/jpg/jpeg</span> 的文件
+        </div>
+      </ElFormItem>
+      <ElFormItem label="新闻内容" required>
+        <div class="editor-container editor-container_classic-editor editor-container_include-style"
+             ref="editorContainerElement">
+          <div class="editor-container__editor">
+            <div ref="editorElement">
+              <ckeditor v-if="isLayoutReady" v-model="form.content" :editor="editor" :config="config"/>
+            </div>
+          </div>
+        </div>
+      </ElFormItem>
+      <ElFormItem label="作者" required>
+        <ElInput v-model="form.author" placeholder="请输入作者" required></ElInput>
+      </ElFormItem>
+      <ElFormItem label="新闻简介" required>
+        <ElInput v-model="form.summary" placeholder="请输入新闻简介" required></ElInput>
+      </ElFormItem>
+      <ElFormItem label="选择租户" required>
+        <ElSelect v-model="form.tenant" placeholder="请选择" class="dynamic-width-select">
+          <ElOption label="Option 1" value="option1"></ElOption>
+          <ElOption label="Option 2" value="option2"></ElOption>
+          <ElOption label="Option 3" value="option3"></ElOption>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem>
+        <ElButton type="primary" native-type="submit">确定</ElButton>
+        <ElButton @click="handleCancel">取消</ElButton>
+      </ElFormItem>
+    </ElForm>
+  </div>
+
+  <el-dialog v-model="dialogVisible" class="image-preview">
+    <img w-full :src="dialogImageUrl" alt="Preview Image"/>
+  </el-dialog>
+</template>
+
+<style scoped>
+.form-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: white;
+  overflow-y: auto; /* 使容器在内容溢出时出现滚动条 */
+}
+
+.image-preview {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.image-preview img {
+  max-width: 100%;
+  height: auto;
+}
+
+.tip {
+  margin-top: 8px;
+  color: #727272;
+  font-size: 12px;
+}
+
+.el-form {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 55%;
+  max-height: 90vh; /* 确保表单不会超过视口高度 */
+  overflow-y: auto; /* 使表单在内容溢出时出现滚动条 */
+}
+
+.el-form-item {
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+.el-form-item label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.el-input,
+.el-select {
+  width: 100%;
+}
+
+.el-button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.el-button--primary:hover {
+  background-color: #0056b3;
+}
+
+.dynamic-width-select {
+  min-width: 30%;
+  max-width: 100%;
+  width: auto; /* 使宽度根据内容调整 */
+}
+
+.form-container-component {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  background: white;
+  overflow-y: auto; /* 使容器在内容溢出时出现滚动条 */
+}
+
+.form-container-component .el-form {
+  background: white;
+  padding: 2rem;
+
+  width: 100%;
+  height: 100%;
+  max-height: 90vh; /* 确保表单不会超过视口高度 */
+  overflow-y: auto; /* 使表单在内容溢出时出现滚动条 */
+}
+</style>

src/views/news-management/NewsList.vue

@@ -0,0 +1,306 @@
+<script setup>
+import {onMounted, ref} from 'vue';
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElMessageBox,
+  ElPagination,
+  ElTable,
+  ElTableColumn
+} from 'element-plus';
+import axios from "axios";
+import {useStore} from "vuex";
+import {useRouter} from "vue-router";
+import EditNews from "@views/news-management/EditNews.vue";
+
+const router = useRouter();
+
+const store = useStore();
+const token = store.getters['authentication/token']
+
+const searchTitle = ref('');
+const searchPath = ref('');
+const searchAuthor = ref('');
+const searchSummary = ref('');
+const sortOrder = ref('');
+
+const allNewsData = ref([]);
+const newsData = ref([]);
+
+const currentPage = ref(1);
+const pageSize = ref(10);
+const newsCount = ref(0);
+const firstTimeLoad = ref(true);
+
+const selections = ref([]);
+
+const editNewsDialogVisible = ref(false);
+const editNewsDialogMode = ref('create');
+const editId = ref("");
+
+const searchMode = ref(false);
+const loadNews = async () => {
+  if (searchMode.value) {
+    newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
+    return;
+  }
+  if (firstTimeLoad.value || allNewsData.value.length < (currentPage.value * pageSize) && (currentPage.value * pageSize) <= newsCount) {
+    // console.error(allNewsData.value.length, currentPage.value, pageSize.value, newsCount.value)
+    let params = {
+      token: token,
+      start: allNewsData.value.length,
+      end: allNewsData.value.length + pageSize.value * 2
+    }
+    try {
+      const response = await axios.get('/api/news', {params})
+      const data = response.data
+      newsCount.value = data.newsCount;
+      allNewsData.value.push(...data.newsList);
+      ElMessage.success('列表已刷新');
+    } catch (e) {
+      console.log(e)
+    }
+    firstTimeLoad.value = false;
+  }
+  newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
+  // console.error((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value, newsData.value);
+};
+
+onMounted(() => {
+  loadNews();
+
+})
+
+
+const handleSearch = async () => {
+  const params = {
+    token: token,
+    title: searchTitle.value,
+    author: searchAuthor.value,
+    summary: searchSummary.value,
+    imagePath: searchPath.value
+  }
+
+  try {
+    const response = await axios.post('/api/news/search', params);
+    const data = response.data;
+    allNewsData.value = data.newsList;
+    newsCount.value = data.newsCount;
+    newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
+    searchMode.value = true;
+    ElMessage.success('搜索成功');
+  } catch (e) {
+    ElMessage.error('搜索失败');
+    console.error(e);
+  }
+};
+
+
+const handleReset = async () => {
+  searchTitle.value = '';
+  searchPath.value = '';
+  searchAuthor.value = '';
+  searchSummary.value = '';
+  sortOrder.value = '';
+
+  searchMode.value = false;
+  await refreshNewsList();
+};
+
+const handleCreateButton = () => {
+  editNewsDialogMode.value = 'create'
+  openEditNewsDialog()
+};
+
+const handleEditButton = () => {
+  if (selections.value.length === 1) {
+    editNewsDialogMode.value = 'edit'
+    editId.value = selections.value[0].id
+    openEditNewsDialog()
+    return
+  }
+  //读取每一个selection中的选项id并新建标签页分别跳转打开编辑页面
+  selections.value.forEach(selection => {
+    const url = router.resolve({name: 'editNews', query: {mode: 'edit', id: selection.id}}).href;
+    window.open(url, '_blank');
+  });
+};
+
+// 删除按钮的处理方法
+const handleDeleteButton = () => {
+  if (selections.value.length === 0) {
+    ElMessage.warning('请选择要删除的资讯');
+    return;
+  }
+
+  ElMessageBox.confirm(
+      `你是否确认要删除<span style="color: red; ">${selections.value.length}</span>条资讯`,
+      '警告',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }
+  ).then(async () => {
+    try {
+      for (const selection of selections.value) {
+        await axios.delete(`/api/news/${selection.id}`, {params: {token: token}});
+      }
+      ElMessage.success('删除成功');
+      // 刷新列表
+      await refreshNewsList()
+    } catch (e) {
+      ElMessage.error('删除失败');
+      console.error(e);
+    }
+  }).catch(() => {
+    ElMessage.info('已取消删除');
+  });
+};
+
+const handleSelectionChange = (newSelections) => {
+  selections.value = newSelections
+}
+
+const handleEditInTable = async (index) => {
+  // router.push({name: 'editNews', query: {mode: 'edit', id: newsData.value[index].id}})
+    editNewsDialogMode.value = 'edit'
+    editId.value = newsData.value[index].id
+    openEditNewsDialog()
+};
+
+const handleDeleteInTable = async (index) => {
+  try {
+    await axios.delete(`/api/news/${newsData.value[index].id}`, {params: {token: token,}})
+    newsData.value.splice(index, 1);
+    allNewsData.value.splice(index, 1);
+    newsCount.value--;
+  } catch (e) {
+    ElMessage.error('删除失败')
+    console.error(e)
+  }
+};
+const refreshNewsList = async () => {
+  newsData.value = [];
+  allNewsData.value = [];
+  newsCount.value = 0;
+  currentPage.value = 1;
+  firstTimeLoad.value = true;
+  await loadNews();
+};
+
+const openEditNewsDialog = () => {
+  editNewsDialogVisible.value = true;
+};
+
+const setNewsDialogInvisible = (changed) => {
+  editNewsDialogVisible.value = false;
+  if (changed){
+    refreshNewsList();
+  }
+}
+</script>
+
+<template>
+  <div class="container">
+    <div class="search-container">
+      <el-form inline>
+        <el-form-item label="新闻标题">
+          <el-input v-model="searchTitle" placeholder="请输入标题"/>
+        </el-form-item>
+        <el-form-item label="新闻图片路径">
+          <el-input v-model="searchPath" placeholder="请输入路径"/>
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input v-model="sortOrder" placeholder="请输入排序"/>
+        </el-form-item>
+        <el-form-item label="作者">
+          <el-input v-model="searchAuthor" placeholder="请输入作者"/>
+        </el-form-item>
+        <el-form-item label="新闻简介">
+          <el-input v-model="searchSummary" placeholder="请输入简介"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="button-container">
+      <el-button type="success" @click="handleCreateButton">新增</el-button>
+      <el-button type="warning" @click="handleEditButton">修改</el-button>
+      <el-button type="danger" @click="handleDeleteButton">删除</el-button>
+    </div>
+
+    <el-table :data="newsData" style="width: 100%;"
+              @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55"></el-table-column>
+      <el-table-column prop="title" label="新闻标题" align="center"></el-table-column>
+      <el-table-column prop="author" label="作者" align="center"></el-table-column>
+      <el-table-column prop="summary" label="新闻简介" align="center"></el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button @click="handleEditInTable(scope.$index)" type="text">修改</el-button>
+          <el-button @click="handleDeleteInTable(scope.$index)" type="text">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination-container">
+      <el-pagination
+          @size-change="pageSize = $event;loadNews()"
+          @current-change="currentPage = $event;loadNews()"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="newsCount"
+          :page-sizes="[10, 20, 50, 100]"
+      >
+      </el-pagination>
+    </div>
+  </div>
+  <el-dialog
+      v-model="editNewsDialogVisible"
+      width="60%"
+      top="8vh"
+      destroy-on-close
+  >
+    <EditNews :mode="editNewsDialogMode" :id="editId" @setNewsDialogInvisible="setNewsDialogInvisible"/>
+  </el-dialog>
+</template>
+
+<style scoped>
+.container {
+  padding: 20px;
+}
+
+.search-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-bottom: 20px;
+}
+
+.button-container {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.el-table {
+  margin-bottom: 20px;
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+</style>