diff --git a/package.json b/package.json
index e3a76b2..06bb899 100644
--- a/package.json
+++ b/package.json
@@ -19,22 +19,24 @@
   "dependencies": {
     "3d-force-graph": "^1.73.3",
     "@element-plus/icons-vue": "^2.3.1",
+    "@vueup/vue-quill": "^1.2.0",
     "@vueuse/core": "^10.9.0",
     "ali-oss": "^6.20.0",
     "axios": "^1.6.8",
     "d3": "^5.16.0",
     "echarts": "^5.5.0",
-    "element-plus": "^2.6.0",
-    "jwt-decode": "^4.0.0",
-    "nanoid": "^5.0.7",
     "echarts-liquidfill": "^3.1.0",
+    "element-plus": "^2.6.0",
     "form-data": "^4.0.0",
     "jquery": "^3.7.1",
+    "jwt-decode": "^4.0.0",
+    "nanoid": "^5.0.7",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "three": "^0.163.0",
     "vue": "^3.4.27",
     "vue-echarts": "^6.7.2",
+    "vue-quill": "^1.5.1",
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c2418b7..517f898 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ dependencies:
   '@element-plus/icons-vue':
     specifier: ^2.3.1
     version: 2.3.1(vue@3.4.29)
+  '@vueup/vue-quill':
+    specifier: ^1.2.0
+    version: 1.2.0(vue@3.4.29)
   '@vueuse/core':
     specifier: ^10.9.0
     version: 10.9.0(vue@3.4.29)
@@ -59,6 +62,9 @@ dependencies:
   vue-echarts:
     specifier: ^6.7.2
     version: 6.7.3(echarts@5.5.0)(vue@3.4.29)
+  vue-quill:
+    specifier: ^1.5.1
+    version: 1.5.1
   vue-router:
     specifier: ^4.3.0
     version: 4.3.0(vue@3.4.29)
@@ -1239,6 +1245,16 @@ packages:
   /@vue/shared@3.4.29:
     resolution: {integrity: sha512-hQ2gAQcBO/CDpC82DCrinJNgOHI2v+FA7BDW4lMSPeBpQ7sRe2OLHWe5cph1s7D8DUQAwRt18dBDfJJ220APEA==}
 
+  /@vueup/vue-quill@1.2.0(vue@3.4.29):
+    resolution: {integrity: sha512-kd5QPSHMDpycklojPXno2Kw2JSiKMYduKYQckTm1RJoVDA557MnyUXgcuuDpry4HY/Rny9nGNcK+m3AHk94wag==}
+    peerDependencies:
+      vue: ^3.2.41
+    dependencies:
+      quill: 1.3.7
+      quill-delta: 4.2.2
+      vue: 3.4.29(typescript@5.2.2)
+    dev: false
+
   /@vueuse/core@10.9.0(vue@3.4.29):
     resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
     dependencies:
@@ -1599,7 +1615,6 @@ packages:
 
   /boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
-    dev: true
 
   /bowser@1.9.4:
     resolution: {integrity: sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==}
@@ -1730,6 +1745,17 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /cheerio@0.19.0:
+    resolution: {integrity: sha512-Fwcm3zkR37STnPC8FepSHeSYJM5Rd596TZOcfDUdojR4Q735aK1Xn+M+ISagNneuCwMjK28w4kX+ETILGNT/UQ==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      css-select: 1.0.0
+      dom-serializer: 0.1.1
+      entities: 1.1.2
+      htmlparser2: 3.8.3
+      lodash: 3.10.1
+    dev: false
+
   /chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -1758,7 +1784,6 @@ packages:
   /clone@2.1.2:
     resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
     engines: {node: '>=0.8'}
-    dev: true
 
   /collection-visit@1.0.0:
     resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==}
@@ -1893,6 +1918,15 @@ packages:
     engines: {node: '>=12 || >=16'}
     dev: true
 
+  /css-select@1.0.0:
+    resolution: {integrity: sha512-/xPlD7betkfd7ChGkLGGWx5HWyiHDOSn7aACLzdH0nwucPvB0EAm8hMBm7Xn7vGfAeRRN7KZ8wumGm8NoNcMRw==}
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 1.0.0
+      domutils: 1.4.3
+      nth-check: 1.0.2
+    dev: false
+
   /css-select@4.3.0:
     resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
     dependencies:
@@ -1919,6 +1953,10 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /css-what@1.0.0:
+    resolution: {integrity: sha512-60SUMPBreXrLXgvpM8kYpO0AOyMRhdRlXFX5BMQbZq1SIJCyNE56nqFQhmvREQdUJpedbGRYZ5wOyq3/F6q5Zw==}
+    dev: false
+
   /css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
@@ -2304,6 +2342,18 @@ packages:
     engines: {node: '>=0.10'}
     dev: true
 
+  /deep-equal@1.1.2:
+    resolution: {integrity: sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-arguments: 1.1.1
+      is-date-object: 1.0.5
+      is-regex: 1.1.4
+      object-is: 1.1.6
+      object-keys: 1.1.1
+      regexp.prototype.flags: 1.5.2
+    dev: false
+
   /deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
@@ -2330,7 +2380,6 @@ packages:
       define-data-property: 1.1.4
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
-    dev: true
 
   /define-property@0.2.5:
     resolution: {integrity: sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==}
@@ -2390,12 +2439,18 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /dom-serializer@0.1.1:
+    resolution: {integrity: sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==}
+    dependencies:
+      domelementtype: 1.3.1
+      entities: 1.1.2
+    dev: false
+
   /dom-serializer@0.2.2:
     resolution: {integrity: sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==}
     dependencies:
       domelementtype: 2.3.0
       entities: 2.2.0
-    dev: true
 
   /dom-serializer@1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
@@ -2415,11 +2470,15 @@ packages:
 
   /domelementtype@1.3.1:
     resolution: {integrity: sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==}
-    dev: true
 
   /domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
-    dev: true
+
+  /domhandler@2.3.0:
+    resolution: {integrity: sha512-q9bUwjfp7Eif8jWxxxPSykdRZAb6GkguBGSgvvCrhI9wB71W2K/Kvv4E61CF/mcCfnVJDeDWx/Vb/uAqbDj6UQ==}
+    dependencies:
+      domelementtype: 1.3.1
+    dev: false
 
   /domhandler@2.4.2:
     resolution: {integrity: sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==}
@@ -2441,6 +2500,19 @@ packages:
       domelementtype: 2.3.0
     dev: true
 
+  /domutils@1.4.3:
+    resolution: {integrity: sha512-ZkVgS/PpxjyJMb+S2iVHHEZjVnOUtjGp0/zstqKGTE9lrZtNHlNQmLwP/lhLMEApYbzc08BKMx9IFpKhaSbW1w==}
+    dependencies:
+      domelementtype: 1.3.1
+    dev: false
+
+  /domutils@1.5.1:
+    resolution: {integrity: sha512-gSu5Oi/I+3wDENBsOWBiRK1eoGxcywYSqg3rR960/+EfY0CF4EX1VPkgHOZ3WiS/Jg2DtliF6BhWcHlfpYUcGw==}
+    dependencies:
+      dom-serializer: 0.2.2
+      domelementtype: 1.3.1
+    dev: false
+
   /domutils@1.7.0:
     resolution: {integrity: sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==}
     dependencies:
@@ -2536,13 +2608,15 @@ packages:
     engines: {node: '>= 0.11.14'}
     dev: false
 
+  /entities@1.0.0:
+    resolution: {integrity: sha512-LbLqfXgJMmy81t+7c14mnulFHJ170cM6E+0vMXR9k/ZiZwgX8i5pNgjTCX3SO4VeUsFLV+8InixoretwU+MjBQ==}
+    dev: false
+
   /entities@1.1.2:
     resolution: {integrity: sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==}
-    dev: true
 
   /entities@2.2.0:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
-    dev: true
 
   /entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
@@ -2972,6 +3046,10 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /eventemitter3@2.0.3:
+    resolution: {integrity: sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==}
+    dev: false
+
   /expand-brackets@2.1.4:
     resolution: {integrity: sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==}
     engines: {node: '>=0.10.0'}
@@ -3001,6 +3079,10 @@ packages:
       is-extendable: 1.0.1
     dev: true
 
+  /extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+    dev: false
+
   /extglob@2.0.4:
     resolution: {integrity: sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==}
     engines: {node: '>=0.10.0'}
@@ -3021,6 +3103,14 @@ packages:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
 
+  /fast-diff@1.1.2:
+    resolution: {integrity: sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==}
+    dev: false
+
+  /fast-diff@1.2.0:
+    resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==}
+    dev: false
+
   /fast-diff@1.3.0:
     resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
     dev: true
@@ -3212,7 +3302,6 @@ packages:
 
   /functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
-    dev: true
 
   /gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
@@ -3380,7 +3469,6 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       has-symbols: 1.0.3
-    dev: true
 
   /has-value@0.3.1:
     resolution: {integrity: sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==}
@@ -3440,6 +3528,16 @@ packages:
       readable-stream: 3.6.2
     dev: true
 
+  /htmlparser2@3.8.3:
+    resolution: {integrity: sha512-hBxEg3CYXe+rPIua8ETe7tmG3XDn9B0edOE/e9wH2nLczxzgdu0m0aNHY+5wFZiviLWLdANPJTssa92dMcXQ5Q==}
+    dependencies:
+      domelementtype: 1.3.1
+      domhandler: 2.3.0
+      domutils: 1.5.1
+      entities: 1.0.0
+      readable-stream: 1.1.14
+    dev: false
+
   /htmlparser2@8.0.2:
     resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
     dependencies:
@@ -3534,6 +3632,14 @@ packages:
       hasown: 2.0.1
     dev: true
 
+  /is-arguments@1.1.1:
+    resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      has-tostringtag: 1.0.2
+    dev: false
+
   /is-array-buffer@3.0.4:
     resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
     engines: {node: '>= 0.4'}
@@ -3598,7 +3704,6 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.2
-    dev: true
 
   /is-descriptor@0.1.7:
     resolution: {integrity: sha512-C3grZTvObeN1xud4cRWl366OMXZTj0+HGyk4hvfpx4ZHt1Pb60ANSXqCK7pdOTeUQpRzECBSTphqvD7U+l22Eg==}
@@ -3696,7 +3801,6 @@ packages:
     dependencies:
       call-bind: 1.0.7
       has-tostringtag: 1.0.2
-    dev: true
 
   /is-shared-array-buffer@1.0.3:
     resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==}
@@ -3745,6 +3849,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /isarray@0.0.1:
+    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
+    dev: false
+
   /isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -3940,6 +4048,18 @@ packages:
       lodash-es: 4.17.21
     dev: false
 
+  /lodash.clonedeep@4.5.0:
+    resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
+    dev: false
+
+  /lodash.defaultsdeep@4.6.1:
+    resolution: {integrity: sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==}
+    dev: false
+
+  /lodash.isequal@4.5.0:
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    dev: false
+
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
@@ -3948,6 +4068,10 @@ packages:
     resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
     dev: true
 
+  /lodash@3.10.1:
+    resolution: {integrity: sha512-9mDDwqVIma6OZX79ZlDACZl8sBm0TEnkf99zV3iMA4GzkIT/9hiqP5mY0HoT1iNLCrKc/R1HByV+yJfRWVJryQ==}
+    dev: false
+
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
@@ -4207,6 +4331,12 @@ packages:
     resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
     dev: false
 
+  /nth-check@1.0.2:
+    resolution: {integrity: sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==}
+    dependencies:
+      boolbase: 1.0.0
+    dev: false
+
   /nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
     dependencies:
@@ -4229,10 +4359,17 @@ packages:
   /object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
 
+  /object-is@1.1.6:
+    resolution: {integrity: sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+    dev: false
+
   /object-keys@1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /object-visit@1.0.1:
     resolution: {integrity: sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==}
@@ -4341,6 +4478,10 @@ packages:
       p-limit: 3.1.0
     dev: true
 
+  /parchment@1.1.4:
+    resolution: {integrity: sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==}
+    dev: false
+
   /parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -4656,6 +4797,50 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
 
+  /quill-delta@3.6.3:
+    resolution: {integrity: sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      deep-equal: 1.1.2
+      extend: 3.0.2
+      fast-diff: 1.1.2
+    dev: false
+
+  /quill-delta@4.2.2:
+    resolution: {integrity: sha512-qjbn82b/yJzOjstBgkhtBjN2TNK+ZHP/BgUQO+j6bRhWQQdmj2lH6hXG7+nwwLF41Xgn//7/83lxs9n2BkTtTg==}
+    dependencies:
+      fast-diff: 1.2.0
+      lodash.clonedeep: 4.5.0
+      lodash.isequal: 4.5.0
+    dev: false
+
+  /quill-render@1.0.5:
+    resolution: {integrity: sha512-PJaOQXaYbVD9GCwR5fVz3S/OuarbNbvzfNu9EZK745qMpyWUAAbt9YUEY+cWWPwVwVIJ00XVJpQQl+xLA1gFEQ==}
+    dependencies:
+      cheerio: 0.19.0
+      escape-html: 1.0.3
+    dev: false
+
+  /quill@1.3.7:
+    resolution: {integrity: sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==}
+    dependencies:
+      clone: 2.1.2
+      deep-equal: 1.1.2
+      eventemitter3: 2.0.3
+      extend: 3.0.2
+      parchment: 1.1.4
+      quill-delta: 3.6.3
+    dev: false
+
+  /readable-stream@1.1.14:
+    resolution: {integrity: sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 0.0.1
+      string_decoder: 0.10.31
+    dev: false
+
   /readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
     dependencies:
@@ -4704,7 +4889,6 @@ packages:
       define-properties: 1.2.1
       es-errors: 1.3.0
       set-function-name: 2.0.2
-    dev: true
 
   /regexpp@3.2.0:
     resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
@@ -4923,7 +5107,6 @@ packages:
       es-errors: 1.3.0
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.2
-    dev: true
 
   /set-value@2.0.1:
     resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==}
@@ -5120,6 +5303,10 @@ packages:
       es-abstract: 1.22.5
     dev: true
 
+  /string_decoder@0.10.31:
+    resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==}
+    dev: false
+
   /string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
     dependencies:
@@ -5903,6 +6090,14 @@ packages:
       - supports-color
     dev: true
 
+  /vue-quill@1.5.1:
+    resolution: {integrity: sha512-4U3pMsBy2Vc4SSanZ6l1hzuB+m6vN9IERZzzOp+U2ziIcA6uGJYoxONmdPJkrMbcHpYYNrATqZOlWBuXqti30w==}
+    dependencies:
+      lodash.defaultsdeep: 4.6.1
+      quill: 1.3.7
+      quill-render: 1.0.5
+    dev: false
+
   /vue-router@4.3.0(vue@3.4.29):
     resolution: {integrity: sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==}
     peerDependencies:
diff --git a/src/api/user/record.js b/src/api/user/record.js
deleted file mode 100644
index edbafc1..0000000
--- a/src/api/user/record.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import request from '@/utils/request'
-//获取浏览记录列表
-export const getRecordListService = (params) =>
-  request.get('http://39.106.16.162:8080/learningrecords/getall', { params })
-//删除浏览记录
-export function DelRecordService(ids) {
-  return request.delete(
-    `http://39.106.16.162:8080/learningrecords/delete?ids=${ids}`,
-  )
-}
diff --git a/src/api/user/resource.js b/src/api/user/resource.js
deleted file mode 100644
index 0bfb6f8..0000000
--- a/src/api/user/resource.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import request from '@/utils/request'
-//获取ppt资源列表
-export const getpptResourceListService = (params) =>
-  request.get('http://localhost:8080/courses/getall', { params })
-export function DelpptResourceListService(ids) {
-  return request.delete(
-    `http://localhost:8080/learningrecords/delete?ids=${ids}`,
-  )
-}
diff --git a/src/views/MyCourseStudy/learningProcess.vue b/src/views/MyCourseStudy/learningProcess.vue
index ffd22a7..70cd812 100644
--- a/src/views/MyCourseStudy/learningProcess.vue
+++ b/src/views/MyCourseStudy/learningProcess.vue
@@ -1,10 +1,10 @@
 <script setup>
 // import router from '@/router'
 import { ref } from 'vue'
-//getRecordListService,
-import { DelRecordService } from '@/api/user/record.js'
+
 import { ElMessageBox, ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
+//导入接口
 import { LearningRecordsControllerService } from '../../../generated/services/LearningRecordsControllerService'
 const total = ref(0)
 const recordList = ref([])
@@ -19,12 +19,14 @@ const params = ref({
 
 //获取浏览记录列表
 const getrecordList = async () => {
-  console.log(1111111)
+  //console.log(1111111)
   loading.value = true
 
   // const res = await getRecordListService(params.value)
   const res = await LearningRecordsControllerService.getAllUsingGet3(
-    params.value,
+    params.value.userId,
+    params.value.pagenum,
+    params.value.pagesize,
   )
   recordList.value = res.data.records
   console.log(res)
@@ -55,7 +57,11 @@ const onDeleteRecord = async (ids) => {
     confirmButtonText: '确认',
     cancelButtonText: '取消',
   })
-  await DelRecordService(ids)
+  //await DelRecordService(ids)
+  console.log('hello')
+
+  await LearningRecordsControllerService.deleteRecordsUsingDelete3(ids)
+
   // console.log(ids)
   ElMessage({ type: 'success', message: '删除成功' })
   getrecordList()
@@ -97,7 +103,9 @@ const deleteSelected = async () => {
   })
 
   // 调用已封装好的删除接口进行删除操作
-  await DelRecordService(selectedIds.value)
+  await LearningRecordsControllerService.deleteRecordsUsingDelete3(
+    selectedIds.value,
+  )
     .then(() => {
       recordList.value = recordList.value.filter(
         (item) => !selectedIds.value.includes(item.id),
@@ -153,32 +161,39 @@ const goToAnotherPage = (address) => {
               v-if="showCheckbox"
             />
 
-            <div class="right">
-              <div class="video">
-                <img
-                  :src="record.content"
-                  style="width: 100%"
-                  height="100%"
-                  @click="goToAnotherPage(record.address)"
-                />
-              </div>
-              <div class="info">
-                <div class="tv">
-                  <div class="name">
-                    {{ record.coursesName }}
-                  </div>
-                  <el-icon
-                    style="float: right"
-                    @click="onDeleteRecord(record.id)"
-                  >
-                    <Delete />
-                  </el-icon>
-                </div>
-                <div class="tv">
-                  <div class="time">{{ record.time }}</div>
-                  <div class="views">{{ record.number }} 观看次数</div>
-                </div>
-              </div>
+            <img
+              class="img"
+              :src="record.content"
+              @click="goToAnotherPage(record.address)"
+              style="margin-bottom: 10px"
+            />
+
+            <div
+              style="
+                display: flex;
+                justify-content: space-between;
+                flex-grow: 1;
+                margin-top: 10px;
+                margin-bottom: 10px;
+              "
+            >
+              <p>
+                {{ record.coursesName }}
+              </p>
+              <el-icon @click="onDeleteRecord(record.id)">
+                <Delete />
+              </el-icon>
+            </div>
+            <div
+              style="
+                display: flex;
+                justify-content: space-between;
+                flex-grow: 1;
+                margin-top: 10px;
+              "
+            >
+              <p>{{ record.time }}</p>
+              <p>{{ record.number }} 观看次数</p>
             </div>
           </li>
         </ul>
@@ -203,10 +218,6 @@ const goToAnotherPage = (address) => {
 </template>
 
 <style scoped>
-.right {
-  float: right;
-}
-
 .record {
   display: flex;
   flex-direction: column;
@@ -226,58 +237,33 @@ const goToAnotherPage = (address) => {
   margin: 10px 0;
 }
 ul {
-  /* flex-wrap: wrap; */
-  /* margin-bottom: 10px; */
   list-style-type: none;
   padding: 10;
   display: flex;
   flex-wrap: wrap;
-  /* justify-content: space-evenly; */
+
   justify-content: start;
 }
 li {
   transition: filter 0.3s; /* 添加过渡动画 */
   flex: 0 0 20%;
-  /* width: 18%; */
+  flex-direction: column;
+
   margin-bottom: 10px;
+
   padding: 10px;
   box-sizing: border-box;
-  /* border: 1px solid #ccc; */
-  /* border-radius: 4px; */
-  /* text-align: center; */
+
   transition: box-shadow 0.3s;
   cursor: pointer;
+  align-items: center;
 }
 li:hover {
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
-.video {
+
+.img {
   width: 100%;
-  height: 150px;
-  background-color: #d7e8f2;
-}
-.info {
-  display: flex;
-  /* overflow: hidden; */
-  flex-direction: column;
-}
-.name {
-  float: left;
-  margin: 5px;
-  font-size: 15px;
-}
-.tv {
-  /* display: grid */
-  margin: 5px;
-  font-size: 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.time {
-  float: left;
-}
-.views {
-  float: right;
+  height: 100%;
 }
 </style>
diff --git a/src/views/courseResources/componse/resourceAdd.vue b/src/views/courseResources/componse/resourceAdd.vue
index 3901c3e..815c21a 100644
--- a/src/views/courseResources/componse/resourceAdd.vue
+++ b/src/views/courseResources/componse/resourceAdd.vue
@@ -1,5 +1,159 @@
-<script setup></script>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { CourseResourceControllerService } from '../../../../generated/services/CourseResourceControllerService'
+const props = defineProps(['dafulIndex'])
+import { QuillEditor } from '@vueup/vue-quill'
+import '@vueup/vue-quill/dist/vue-quill.snow.css'
+//默认抽屉隐藏
+const visibleDramwer = ref(false)
+//默认数据
+const defaultForm = {
+  description: '',
+  id: '',
+  img: '',
+  name: '',
+  type: '',
+  path: '',
+}
+//准备数据
+const formModel = ref({
+  ...defaultForm,
+})
+//表单的校验
+const rules = {
+  name: [
+    { required: true, message: '请输入资源名称', trigger: 'blur' },
+    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
+  ],
+}
+
+//组件对外暴露一个open 方法 根据传来的参数区分添加还是编辑
+const open = async (row) => {
+  visibleDramwer.value = true
+  //console.log(row.id)
+
+  if (row.id) {
+    //需要基于row.id 发送请求，获取编辑的详情数据，进行回显
+    const res = await CourseResourceControllerService.getAllUsingGet1(row.id)
+    //回显
+    formModel.value = res.data.records
+    console.log(res)
+
+    //图片回显
+    //富文本框回显
+    console.log('编辑回显')
+  } else {
+    //重置表单数据
+    formModel.value = {
+      ...defaultForm,
+    }
+  }
+}
+
+defineExpose({
+  open,
+})
+
+const selectVal = ref(props.dafulIndex)
+const selectOp = ref([
+  { label: 'ppt', value: '1' },
+  { label: '图片', value: '2' },
+  { label: '视频', value: '3' },
+  { label: 'PDF', value: '4' },
+  { label: '文件', value: '5' },
+  { label: '音频', value: '6' },
+])
+const handleSel = () => {}
+
+//上传图片
+import type { UploadProps, UploadUserFile } from 'element-plus'
+
+const fileList = ref<UploadUserFile[]>([])
+
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
+  console.log(uploadFile, uploadFiles)
+}
+
+const handlePreview: UploadProps['onPreview'] = (file) => {
+  console.log(file)
+}
+</script>
 <template>
-  <div></div>
+  <el-drawer
+    v-model="visibleDramwer"
+    :title="formModel.id ? '编辑资源' : '添加资源'"
+    direction="rtl"
+    size="50%"
+  >
+    <!-- 添加资源表单 -->
+    <el-form
+      class="resourceformModel"
+      :model="formModel"
+      ref="formRef"
+      :rules="rules"
+      label-width="100px"
+    >
+      <el-form-item label="资源名称" prop="name">
+        <el-input
+          v-model="formModel.name"
+          placeholder="请输入资源名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="资源类型">
+        <el-select
+          @change="handleSel"
+          v-model="selectVal"
+          placeholder="请选择资源类型"
+          size="large"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in selectOp"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="上传资源" prop="fileList">
+        <el-upload
+          v-model:file-list="fileList"
+          class="upload-demo"
+          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+          :on-preview="handlePreview"
+          :on-remove="handleRemove"
+          list-type="picture"
+        >
+          <el-button type="primary">点击上传资源</el-button>
+          <template #tip>
+            <div class="el-upload__tip">
+              jpg/png files with a size less than 500kb
+            </div>
+          </template>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="资源简介" prop="description">
+        <div class="editor">
+          <quill-editor
+            v-model:description="formModel.description"
+            content-type="html"
+            theme="snow"
+          ></quill-editor>
+        </div>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary">取消</el-button>
+        <el-button type="info">确定</el-button>
+      </el-form-item>
+    </el-form>
+  </el-drawer>
 </template>
-<style scoped></style>
+<style lang="scss" scoped>
+.editor {
+  width: 100%;
+
+  :deep(.ql-editor) {
+    min-height: 200px;
+  }
+}
+</style>
diff --git a/src/views/courseResources/index.vue b/src/views/courseResources/index.vue
index 6b1c643..119f6be 100644
--- a/src/views/courseResources/index.vue
+++ b/src/views/courseResources/index.vue
@@ -7,14 +7,14 @@ import pdf from '@/assets/icons/pdf (1).png'
 import test from '@/assets/icons/文件.png'
 import audio from '@/assets/icons/音频1.png'
 
+import { ElMessageBox, ElMessage } from 'element-plus'
 import { ref } from 'vue'
-//默认抽屉隐藏
-const visibleDramwer = ref(false)
-//定义一个selectedOption属性，用于存储当前选中的值
-const selectedOption = ref('')
 
-import { getpptResourceListService } from '@/api/user/resource.js'
-import { DelpptResourceListService } from '@/api/user/resource.js'
+import { LearningRecordsControllerService } from '../../../generated/services/LearningRecordsControllerService'
+import { CourseResourceControllerService } from '../../../generated/services/CourseResourceControllerService'
+
+import resourceAdd from './componse/resourceAdd.vue'
+
 const total = ref(0)
 const pptresourceList = ref([])
 const loading = ref(false)
@@ -27,7 +27,11 @@ const params = ref({
 //获取资源列表
 const getpptresourceList = async () => {
   loading.value = true
-  const res = await getpptResourceListService(params.value)
+  const res = await CourseResourceControllerService.getAllUsingGet1(
+    params.value.pagenum,
+    params.value.pagesize,
+    params.value.type,
+  )
   pptresourceList.value = res.data.records
   console.log(res)
   //获取资源列表
@@ -59,81 +63,49 @@ const onCurrentChange = (page) => {
 
 //删除资源 -通过ID进行删除
 const onDeleteResource = async (ids) => {
+  console.log(111111111111111)
   await ElMessageBox.confirm('你确认删除该条浏览信息吗？', '温馨提示', {
     type: 'warning',
     confirmButtonText: '确认',
     cancelButtonText: '取消',
   })
-  await DelpptResourceListService(ids)
-  // console.log(ids)
+  console.log(ids)
+  await CourseResourceControllerService.deleteRecordsUsingDelete1(ids)
   ElMessage({ type: 'success', message: '删除成功' })
   getpptresourceList()
 }
-//上传文件
-import tool from '@/utils/oss.js'
-const FileList = ref([])
-const upload = async (option) => {
-  const res = await tool.oss.upload(option.file)
-  console.log(22, res)
-  console.log(res.name)
-  const url = 'https://wenyu132.oss-cn-beijing.aliyuncs.com/' + res.name
-  console.log(url)
+
+const param = ref({
+  coursesId: '',
+  userId: '1',
+  open: '1',
+  download: '0',
+  content: '',
+  address: '/portal',
+  type: '4',
+})
+//点击生成浏览记录
+const generateRecords = async (rescource) => {
+  param.value.content = rescource.img
+  param.value.coursesId = rescource.id.toString()
+  await LearningRecordsControllerService.saveRecordsUsingPost1(param.value)
+  // console.log(param)
+}
+
+const resourceAddRef = ref()
+//添加资源
+const onAddResource = () => {
+  resourceAddRef.value.open({})
+}
+//编辑资源
+const onEditResource = (row) => {
+  resourceAddRef.value.open(row)
 }
 </script>
 <template>
   <div>
     <div class="top">
-      <el-button @click="visibleDramwer = true">添加资源</el-button>
-      <el-drawer v-model="visibleDramwer">
-        <!-- 添加资源表单 -->
-        <el-form>
-          <el-form-item label="资源名称">
-            <el-input placeholder="请输入资源名称"></el-input>
-          </el-form-item>
-          <el-form-item label="资源类型">
-            <el-select v-model="selectedOption" placeholder="资源类型">
-              <el-option
-                class="vertical-option"
-                label="选项1"
-                value="1"
-              ></el-option>
-              <el-option
-                class="vertical-option"
-                label="选项2"
-                value="2"
-              ></el-option>
-              <el-option
-                class="vertical-option"
-                label="选项3"
-                value="3"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="资源简介">
-            <el-input placeholder="请输入资源简介"></el-input>
-          </el-form-item>
-          <el-form-item label="上传资源">
-            <el-upload
-              v-model:file-list="FileList"
-              :http-request="upload"
-              class="upload-demo"
-              multiple
-            >
-              <el-button type="primary">点击上传</el-button>
-              <template #tip>
-                <div class="el-upload__tip">
-                  只能上传jpg/png文件,且不超过500kb
-                </div>
-              </template>
-            </el-upload>
-          </el-form-item>
-
-          <el-form-item class="bottom-box">
-            <el-button type="info" @click="onRemoval">取消</el-button>
-            <el-button type="primary">确定</el-button>
-          </el-form-item>
-        </el-form>
-      </el-drawer>
+      <el-button @click="onAddResource">添加资源</el-button>
     </div>
     <div class="body">
       <div class="nav">
@@ -155,7 +127,7 @@ const upload = async (option) => {
             </div>
           </el-col>
 
-          <el-col :span="4" @click="showComponent('3')">
+          <el-col :span="4" @click="changeType('3')">
             <div class="nav-info">
               <div class="nav-info-pic">
                 <img style="height: 50px" :src="video" />
@@ -165,13 +137,13 @@ const upload = async (option) => {
           </el-col>
           <el-col :span="4">
             <div class="nav-info">
-              <div class="nav-info-pic" @click="showComponent('4')">
+              <div class="nav-info-pic" @click="changeType('4')">
                 <img style="height: 50px" :src="pdf" />
               </div>
               <div class="nav-info-name">PDF</div>
             </div>
           </el-col>
-          <el-col :span="4" @click="showComponent('5')">
+          <el-col :span="4" @click="changeType('5')">
             <div class="nav-info">
               <div class="nav-info-pic">
                 <img style="height: 50px" :src="test" />
@@ -179,7 +151,7 @@ const upload = async (option) => {
               <div class="nav-info-name">文件</div>
             </div>
           </el-col>
-          <el-col :span="4" @click="showComponent('6')">
+          <el-col :span="4" @click="changeType('6')">
             <div class="nav-info">
               <div class="nav-info-pic">
                 <img style="height: 50px" :src="audio" />
@@ -199,22 +171,30 @@ const upload = async (option) => {
               :key="resource.id"
               v-loading="loading"
             >
-              <div>
-                <div class="icon">
-                  <el-icon @click="onDeleteResource(ids)">
-                    <Delete />
-                  </el-icon>
-                  <el-icon>
-                    <Edit />
-                  </el-icon>
-                </div>
-                <div class="vedio">
-                  <img style="height: 200px" :src="resource.img" />
-                </div>
-                <div class="resource-info">
-                  <div class="zy-name">{{ resource.name }}</div>
-                  <div class="zy-info">{{ resource.description }}</div>
-                </div>
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  margin-bottom: 10px;
+                "
+              >
+                <el-icon @click="onDeleteResource(resource.id)">
+                  <Delete />
+                </el-icon>
+                <el-icon @click="onEditResource(row)">
+                  <Edit />
+                </el-icon>
+              </div>
+              <div
+                class="vedio"
+                @click="generateRecords(resource)"
+                style="margin-top: 10px; margin-bottom: 10px"
+              >
+                <img :src="resource.img" />
+              </div>
+              <div class="box" style="display: flex; flex-direction: column">
+                <p style="margin-bottom: 10px">{{ resource.name }}</p>
+                <p style="margin-top: 10px">{{ resource.description }}</p>
               </div>
             </li>
           </ul>
@@ -235,6 +215,12 @@ const upload = async (option) => {
             style="margin-top: 20px; justify-content: flex-end"
           />
         </div>
+        <!-- 添加编辑的抽屉 -->
+        <resource-add
+          :dafulIndex="params.type"
+          ref="resourceAddRef"
+        ></resource-add>
+        <!--  -->
       </div>
     </div>
   </div>
@@ -282,7 +268,8 @@ ul {
 li {
   transition: filter 0.3s; /* 添加过渡动画 */
   flex: 0 0 20%;
-
+  flex-direction: column;
+  align-items: center;
   margin-bottom: 10px;
   padding: 10px;
   box-sizing: border-box;
@@ -306,23 +293,7 @@ li:hover {
   bottom: 0;
   margin: 0 auto;
 }
-.icon {
-  display: flex;
-  justify-content: space-between;
-}
-.resource-info {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.zy-name:hover {
-  color: rgb(138, 201, 243); /* 鼠标经过时将字体颜色设置为蓝色 */
-}
-.zy-name {
-  margin-top: 10px;
-  font-size: 20px;
-}
-.zy-info {
-  margin-top: 20px;
+.box p:hover {
+  font-weight: bold;
 }
 </style>