feat: add danmaku demo (#362)

* feat: add danmaku demo

* fix: /@/改为@/

* fix: update

locales/en.yaml

@@ -94,6 +94,7 @@ menus:
   hsPdf: PDF Preview
   hsExecl: Export Excel
   hsInfiniteScroll: Table Infinite Scroll
+  hsdanmaku: Danmaku Components
 status:
   hsLoad: Loading...
 login:

locales/zh-CN.yaml

@@ -94,6 +94,7 @@ menus:
   hsPdf: PDF预览
   hsExecl: 导出Excel
   hsInfiniteScroll: 表格无限滚动
+  hsdanmaku: 弹幕组件
 status:
   hsLoad: 加载中...
 login:

package.json

@@ -77,6 +77,7 @@
     "vue-router": "^4.1.6",
     "vue-types": "^4.2.1",
     "vue-virtual-scroller": "^2.0.0-alpha.1",
+    "vue3-danmaku": "^1.0.0",
     "vuedraggable": "^4.1.0",
     "vxe-table": "^4.3.5",
     "xe-utils": "^3.5.7",

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-lockfileVersion: 5.3
+lockfileVersion: 5.4
 
 specifiers:
   "@amap/amap-jsapi-loader": ^1.0.1
@@ -120,6 +120,7 @@ specifiers:
   vue-tsc: ^0.40.13
   vue-types: ^4.2.1
   vue-virtual-scroller: ^2.0.0-alpha.1
+  vue3-danmaku: ^1.0.0
   vuedraggable: ^4.1.0
   vxe-table: ^4.3.5
   xe-utils: ^3.5.7
@@ -132,14 +133,14 @@ dependencies:
   "@logicflow/core": 1.1.29
   "@logicflow/extension": 1.1.29
   "@pureadmin/components": 1.1.0_vue@3.2.40
-  "@pureadmin/descriptions": 1.1.0
-  "@pureadmin/table": 1.2.0
-  "@pureadmin/utils": 1.1.5_888d42e6b1d4aaf209a7326195b5949d
+  "@pureadmin/descriptions": 1.1.0_element-plus@2.2.18
+  "@pureadmin/table": 1.2.0_element-plus@2.2.18
+  "@pureadmin/utils": 1.1.5_rcgufzvr2svpecnhgjqzlnmutu
   "@vueuse/core": 9.4.0_vue@3.2.40
   "@vueuse/motion": 2.0.0-beta.12_vue@3.2.40
   "@vueuse/shared": 9.4.0_vue@3.2.40
   "@wangeditor/editor": 5.1.21
-  "@wangeditor/editor-for-vue": 5.1.12_671b67f2147af6cd32d57e9d16d7b064
+  "@wangeditor/editor-for-vue": 5.1.12_m4nwp4qupl3m2mwvp2ornv5qmq
   animate.css: 4.1.1
   axios: 1.1.3
   china-area-data: 5.0.1
@@ -154,12 +155,12 @@ dependencies:
   jsbarcode: 3.11.5
   lodash: 4.17.21
   lodash-es: 4.17.21
-  lodash-unified: 1.0.2_da03a4540fbd16bbaafbb96724306afd
+  lodash-unified: 1.0.2_3ib2ivapxullxkx3xftsimdk7u
   mitt: 3.0.0
   mockjs: 1.1.0
   nprogress: 0.2.0
   path: 0.12.7
-  pinia: 2.0.23_typescript@4.8.4+vue@3.2.40
+  pinia: 2.0.23_bfjwoga25wxjazzogo7o372nwq
   qrcode: 1.5.1
   qs: 6.11.0
   resize-observer-polyfill: 1.5.1
@@ -176,6 +177,7 @@ dependencies:
   vue-router: 4.1.6_vue@3.2.40
   vue-types: 4.2.1_vue@3.2.40
   vue-virtual-scroller: 2.0.0-alpha.1_vue@3.2.40
+  vue3-danmaku: 1.0.0_vue@3.2.40
   vuedraggable: 4.1.0_vue@3.2.40
   vxe-table: 4.3.5_vue@3.2.40+xe-utils@3.5.7
   xe-utils: 3.5.7
@@ -207,19 +209,19 @@ devDependencies:
   "@types/qrcode": 1.5.0
   "@types/qs": 6.9.7
   "@types/sortablejs": 1.15.0
-  "@typescript-eslint/eslint-plugin": 5.39.0_1147f3ed0a9e510f1c5601e9a85ce93e
-  "@typescript-eslint/parser": 5.39.0_eslint@8.25.0+typescript@4.8.4
+  "@typescript-eslint/eslint-plugin": 5.39.0_cfd7h3iktziq6hcwahu2qxhjhy
+  "@typescript-eslint/parser": 5.39.0_z4bbprzjrhnsfa24uvmcbu7f5q
   "@vitejs/plugin-legacy": 2.2.0_terser@5.15.1+vite@3.1.8
   "@vitejs/plugin-vue": 3.1.2_vite@3.1.8+vue@3.2.40
   "@vitejs/plugin-vue-jsx": 2.0.1_vite@3.1.8+vue@3.2.40
-  "@vue/eslint-config-prettier": 7.0.0_eslint@8.25.0+prettier@2.7.1
-  "@vue/eslint-config-typescript": 10.0.0_07d3deb2283d82fbf0376bf257049d49
+  "@vue/eslint-config-prettier": 7.0.0_znq2sm4m5bonjw4qqm6mwhbe2q
+  "@vue/eslint-config-typescript": 10.0.0_a7j55mrihwbpx4bxnpzfobe5je
   "@vue/runtime-core": 3.2.40
   autoprefixer: 10.4.12_postcss@8.4.17
   cloc: 2.10.0
   cssnano: 5.1.13_postcss@8.4.17
   eslint: 8.25.0
-  eslint-plugin-prettier: 4.2.1_eslint@8.25.0+prettier@2.7.1
+  eslint-plugin-prettier: 4.2.1_znq2sm4m5bonjw4qqm6mwhbe2q
   eslint-plugin-vue: 8.7.1_eslint@8.25.0
   font-awesome: 4.7.0
   husky: 7.0.4
@@ -236,12 +238,12 @@ devDependencies:
   sass: 1.55.0
   sass-loader: 13.1.0_sass@1.55.0
   stylelint: 14.13.0
-  stylelint-config-html: 1.1.0_b9c99d24315b3a6965b56c7031c3b115
+  stylelint-config-html: 1.1.0_xhez2jbrlm5gsznvnryddq5rcu
   stylelint-config-prettier: 9.0.3_stylelint@14.13.0
   stylelint-config-recommended: 6.0.0_stylelint@14.13.0
   stylelint-config-standard: 24.0.0_stylelint@14.13.0
   stylelint-order: 5.0.0_stylelint@14.13.0
-  tailwindcss: 3.2.1
+  tailwindcss: 3.2.1_postcss@8.4.17
   terser: 5.15.1
   typescript: 4.8.4
   unplugin-vue-define-options: 0.7.3_vite@3.1.8+vue@3.2.40
@@ -806,7 +808,7 @@ packages:
       "@commitlint/execute-rule": 13.2.0
       "@commitlint/resolve-extends": 13.2.0
       "@commitlint/types": 13.2.0
-      "@endemolshinegroup/cosmiconfig-typescript-loader": 3.0.2_72d781bdd7b0c1239c8cb5d589ccc43e
+      "@endemolshinegroup/cosmiconfig-typescript-loader": 3.0.2_ollydpoxwdashhemwxkyttgehy
       chalk: 4.1.2
       cosmiconfig: 7.0.1
       lodash: 4.17.21
@@ -902,7 +904,7 @@ packages:
       chalk: 4.1.2
     dev: true
 
-  /@csstools/selector-specificity/2.0.2_cd239324a5aeb6e3cee0fb61f6a33448:
+  /@csstools/selector-specificity/2.0.2_zurzgjffv23ohtxa7nq7nizuja:
     resolution:
       {
         integrity: sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
@@ -935,7 +937,7 @@ packages:
       vue: 3.2.40
     dev: false
 
-  /@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_72d781bdd7b0c1239c8cb5d589ccc43e:
+  /@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_ollydpoxwdashhemwxkyttgehy:
     resolution:
       {
         integrity: sha512-QRVtqJuS1mcT56oHpVegkKBlgtWjXw/gHNWO3eL9oyB5Sc7HBoc2OLG/nYpVfT/Jejvo3NUrD0Udk7XgoyDKkA==
@@ -1174,7 +1176,6 @@ packages:
       "@intlify/message-compiler": 9.2.2
       "@intlify/shared": 9.2.2
       "@intlify/vue-devtools": 9.2.2
-    dev: false
 
   /@intlify/devtools-if/9.2.2:
     resolution:
@@ -1184,7 +1185,6 @@ packages:
     engines: { node: ">= 14" }
     dependencies:
       "@intlify/shared": 9.2.2
-    dev: false
 
   /@intlify/message-compiler/9.2.2:
     resolution:
@@ -1195,7 +1195,6 @@ packages:
     dependencies:
       "@intlify/shared": 9.2.2
       source-map: 0.6.1
-    dev: false
 
   /@intlify/message-compiler/9.3.0-beta.6:
     resolution:
@@ -1214,7 +1213,6 @@ packages:
         integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==
       }
     engines: { node: ">= 14" }
-    dev: false
 
   /@intlify/shared/9.3.0-beta.6:
     resolution:
@@ -1263,7 +1261,6 @@ packages:
     dependencies:
       "@intlify/core-base": 9.2.2
       "@intlify/shared": 9.2.2
-    dev: false
 
   /@jridgewell/gen-mapping/0.1.1:
     resolution:
@@ -1396,29 +1393,29 @@ packages:
       vue: 3.2.40
     dev: false
 
-  /@pureadmin/descriptions/1.1.0:
+  /@pureadmin/descriptions/1.1.0_element-plus@2.2.18:
     resolution:
       {
         integrity: sha512-Bi6lasPjc8P61kMcCXZjCd9ne99rj+whwUJ1ulKQX7JFupBhjo71Vu0TV5I7oEN52lZuvV1+F0EhJlEoIHpGFQ==
       }
+    peerDependencies:
+      element-plus: ^2.0.0
     dependencies:
       "@element-plus/icons-vue": 2.0.9_vue@3.2.40
       element-plus: 2.2.18_vue@3.2.40
       vue: 3.2.40
-    transitivePeerDependencies:
-      - "@vue/composition-api"
     dev: false
 
-  /@pureadmin/table/1.2.0:
+  /@pureadmin/table/1.2.0_element-plus@2.2.18:
     resolution:
       {
         integrity: sha512-mJBpMj0YkaqTM5TDz+ek/f8h74qRLhDc/gLJhBq0wpyfCgG++Jd/9i+QUj8gedA5oN8IL6LOSFbcvlGDYxHgkw==
       }
+    peerDependencies:
+      element-plus: ^2.0.0
     dependencies:
       element-plus: 2.2.18_vue@3.2.40
       vue: 3.2.40
-    transitivePeerDependencies:
-      - "@vue/composition-api"
     dev: false
 
   /@pureadmin/theme/2.4.0:
@@ -1432,7 +1429,7 @@ packages:
       string-hash: 1.1.3
     dev: true
 
-  /@pureadmin/utils/1.1.5_888d42e6b1d4aaf209a7326195b5949d:
+  /@pureadmin/utils/1.1.5_rcgufzvr2svpecnhgjqzlnmutu:
     resolution:
       {
         integrity: sha512-5nQZyFAbs59gkMBj0WLox7BlY7llILR/ENo2QNEKW6avMt8sDL1+858EFjEbELl6enPsVvJpoCTxatmZzVjyAw==
@@ -1692,7 +1689,7 @@ packages:
       }
     dev: false
 
-  /@typescript-eslint/eslint-plugin/5.39.0_1147f3ed0a9e510f1c5601e9a85ce93e:
+  /@typescript-eslint/eslint-plugin/5.39.0_cfd7h3iktziq6hcwahu2qxhjhy:
     resolution:
       {
         integrity: sha512-xVfKOkBm5iWMNGKQ2fwX5GVgBuHmZBO1tCRwXmY5oAIsPscfwm2UADDuNB8ZVYCtpQvJK4xpjrK7jEhcJ0zY9A==
@@ -1706,10 +1703,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      "@typescript-eslint/parser": 5.39.0_eslint@8.25.0+typescript@4.8.4
+      "@typescript-eslint/parser": 5.39.0_z4bbprzjrhnsfa24uvmcbu7f5q
       "@typescript-eslint/scope-manager": 5.39.0
-      "@typescript-eslint/type-utils": 5.39.0_eslint@8.25.0+typescript@4.8.4
-      "@typescript-eslint/utils": 5.39.0_eslint@8.25.0+typescript@4.8.4
+      "@typescript-eslint/type-utils": 5.39.0_z4bbprzjrhnsfa24uvmcbu7f5q
+      "@typescript-eslint/utils": 5.39.0_z4bbprzjrhnsfa24uvmcbu7f5q
       debug: 4.3.4
       eslint: 8.25.0
       ignore: 5.2.0
@@ -1721,7 +1718,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.39.0_eslint@8.25.0+typescript@4.8.4:
+  /@typescript-eslint/parser/5.39.0_z4bbprzjrhnsfa24uvmcbu7f5q:
     resolution:
       {
         integrity: sha512-PhxLjrZnHShe431sBAGHaNe6BDdxAASDySgsBCGxcBecVCi8NQWxQZMcizNA4g0pN51bBAn/FUfkWG3SDVcGlA==
@@ -1755,7 +1752,7 @@ packages:
       "@typescript-eslint/visitor-keys": 5.39.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.39.0_eslint@8.25.0+typescript@4.8.4:
+  /@typescript-eslint/type-utils/5.39.0_z4bbprzjrhnsfa24uvmcbu7f5q:
     resolution:
       {
         integrity: sha512-KJHJkOothljQWzR3t/GunL0TPKY+fGJtnpl+pX+sJ0YiKTz3q2Zr87SGTmFqsCMFrLt5E0+o+S6eQY0FAXj9uA==
@@ -1769,7 +1766,7 @@ packages:
         optional: true
     dependencies:
       "@typescript-eslint/typescript-estree": 5.39.0_typescript@4.8.4
-      "@typescript-eslint/utils": 5.39.0_eslint@8.25.0+typescript@4.8.4
+      "@typescript-eslint/utils": 5.39.0_z4bbprzjrhnsfa24uvmcbu7f5q
       debug: 4.3.4
       eslint: 8.25.0
       tsutils: 3.21.0_typescript@4.8.4
@@ -1810,7 +1807,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.39.0_eslint@8.25.0+typescript@4.8.4:
+  /@typescript-eslint/utils/5.39.0_z4bbprzjrhnsfa24uvmcbu7f5q:
     resolution:
       {
         integrity: sha512-+DnY5jkpOpgj+EBtYPyHRjXampJfC0yUZZzfzLuUWVZvCuKqSdJVC8UhdWipIw7VKNTfwfAPiOWzYkAwuIhiAg==
@@ -2082,7 +2079,6 @@ packages:
       {
         integrity: sha512-Ku31WzpOV/8cruFaXaEZKF81WkNnvCSlBY4eOGtz5WMSdJvX1v1WWlSMGZeqUwPtQ27ZZz7B62erEMq8JDjcXw==
       }
-    dev: false
 
   /@vue/devtools-api/6.4.5:
     resolution:
@@ -2091,7 +2087,7 @@ packages:
       }
     dev: false
 
-  /@vue/eslint-config-prettier/7.0.0_eslint@8.25.0+prettier@2.7.1:
+  /@vue/eslint-config-prettier/7.0.0_znq2sm4m5bonjw4qqm6mwhbe2q:
     resolution:
       {
         integrity: sha512-/CTc6ML3Wta1tCe1gUeO0EYnVXfo3nJXsIhZ8WJr3sov+cGASr6yuiibJTL6lmIBm7GobopToOuB3B6AWyV0Iw==
@@ -2102,11 +2098,11 @@ packages:
     dependencies:
       eslint: 8.25.0
       eslint-config-prettier: 8.5.0_eslint@8.25.0
-      eslint-plugin-prettier: 4.2.1_3d430c1653672911bd9e295f62a81c27
+      eslint-plugin-prettier: 4.2.1_hvbqyfstm4urdpm6ffpwfka4e4
       prettier: 2.7.1
     dev: true
 
-  /@vue/eslint-config-typescript/10.0.0_07d3deb2283d82fbf0376bf257049d49:
+  /@vue/eslint-config-typescript/10.0.0_a7j55mrihwbpx4bxnpzfobe5je:
     resolution:
       {
         integrity: sha512-F94cL8ug3FaYXlCfU5/wiGjk1qeadmoBpRGAOBq+qre3Smdupa59dd6ZJrsfRODpsMPyTG7330juMDsUvpZ3Rw==
@@ -2120,8 +2116,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      "@typescript-eslint/eslint-plugin": 5.39.0_1147f3ed0a9e510f1c5601e9a85ce93e
-      "@typescript-eslint/parser": 5.39.0_eslint@8.25.0+typescript@4.8.4
+      "@typescript-eslint/eslint-plugin": 5.39.0_cfd7h3iktziq6hcwahu2qxhjhy
+      "@typescript-eslint/parser": 5.39.0_z4bbprzjrhnsfa24uvmcbu7f5q
       eslint: 8.25.0
       eslint-plugin-vue: 8.7.1_eslint@8.25.0
       typescript: 4.8.4
@@ -2177,7 +2173,6 @@ packages:
       "@vue/runtime-core": 3.2.40
       "@vue/shared": 3.2.40
       csstype: 2.6.21
-    dev: false
 
   /@vue/server-renderer/3.2.40_vue@3.2.40:
     resolution:
@@ -2190,7 +2185,6 @@ packages:
       "@vue/compiler-ssr": 3.2.40
       "@vue/shared": 3.2.40
       vue: 3.2.40
-    dev: false
 
   /@vue/shared/3.2.38:
     resolution:
@@ -2306,7 +2300,7 @@ packages:
       - vue
     dev: false
 
-  /@wangeditor/basic-modules/1.1.6_8e9c3f2d53e24946235186f566b5df7d:
+  /@wangeditor/basic-modules/1.1.6_r2od6lkt4jeumi2rq32wnno7pu:
     resolution:
       {
         integrity: sha512-wckcFm/kEAHpTn7dTmN0+7POFoygqt9bZdNHJUkdKObXtAerml8RdjrkHRcwJFCkSELbrNK63fvkwS0+FsabfA==
@@ -2319,7 +2313,7 @@ packages:
       slate: ^0.72.0
       snabbdom: ^3.1.0
     dependencies:
-      "@wangeditor/core": 1.1.17_83942e33b1d7a7a6aab922626cc5c0f9
+      "@wangeditor/core": 1.1.17_qokc4m5r26t2nkvzejrgzroa7e
       dom7: 3.0.0
       is-url: 1.2.4
       lodash.throttle: 4.1.1
@@ -2328,7 +2322,7 @@ packages:
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/code-highlight/1.0.3_09ee01fa17e2225308c1a4102713ffcf:
+  /@wangeditor/code-highlight/1.0.3_bhxad6qx4irfgcgbuqicoe77z4:
     resolution:
       {
         integrity: sha512-iazHwO14XpCuIWJNTQTikqUhGKyqj+dUNWJ9288Oym9M2xMVHvnsOmDU2sgUDWVy+pOLojReMPgXCsvvNlOOhw==
@@ -2339,14 +2333,14 @@ packages:
       slate: ^0.72.0
       snabbdom: ^3.1.0
     dependencies:
-      "@wangeditor/core": 1.1.17_83942e33b1d7a7a6aab922626cc5c0f9
+      "@wangeditor/core": 1.1.17_qokc4m5r26t2nkvzejrgzroa7e
       dom7: 3.0.0
       prismjs: 1.29.0
       slate: 0.72.8
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/core/1.1.17_83942e33b1d7a7a6aab922626cc5c0f9:
+  /@wangeditor/core/1.1.17_qokc4m5r26t2nkvzejrgzroa7e:
     resolution:
       {
         integrity: sha512-u0jThy5qrpZo969LNykhb2fpHxEO6p3eKIeouZVnWpA2k9WjbOwtG35bmsUSQhjI5eb316t0ijJhaO4aDfwpuw==
@@ -2389,7 +2383,7 @@ packages:
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/editor-for-vue/5.1.12_671b67f2147af6cd32d57e9d16d7b064:
+  /@wangeditor/editor-for-vue/5.1.12_m4nwp4qupl3m2mwvp2ornv5qmq:
     resolution:
       {
         integrity: sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==
@@ -2410,13 +2404,13 @@ packages:
     dependencies:
       "@uppy/core": 2.3.4
       "@uppy/xhr-upload": 2.1.3_@uppy+core@2.3.4
-      "@wangeditor/basic-modules": 1.1.6_8e9c3f2d53e24946235186f566b5df7d
-      "@wangeditor/code-highlight": 1.0.3_09ee01fa17e2225308c1a4102713ffcf
-      "@wangeditor/core": 1.1.17_83942e33b1d7a7a6aab922626cc5c0f9
-      "@wangeditor/list-module": 1.0.5_09ee01fa17e2225308c1a4102713ffcf
-      "@wangeditor/table-module": 1.1.4_525e8752da7b7ef13fcac1d5a4016600
-      "@wangeditor/upload-image-module": 1.0.2_336cc64bbdb395b57ea48f5d2b9e116f
-      "@wangeditor/video-module": 1.1.4_3c8f5193f1074f961b626ddee7c314e9
+      "@wangeditor/basic-modules": 1.1.6_r2od6lkt4jeumi2rq32wnno7pu
+      "@wangeditor/code-highlight": 1.0.3_bhxad6qx4irfgcgbuqicoe77z4
+      "@wangeditor/core": 1.1.17_qokc4m5r26t2nkvzejrgzroa7e
+      "@wangeditor/list-module": 1.0.5_bhxad6qx4irfgcgbuqicoe77z4
+      "@wangeditor/table-module": 1.1.4_kjpiouw2pn7pcp6kyhk2ialgaa
+      "@wangeditor/upload-image-module": 1.0.2_gnwmms55wok3k7ver5osxhqrn4
+      "@wangeditor/video-module": 1.1.4_hshvde7ra5hzmg3cnxpopqyu5e
       dom7: 3.0.0
       is-hotkey: 0.2.0
       lodash.camelcase: 4.3.0
@@ -2431,7 +2425,7 @@ packages:
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/list-module/1.0.5_09ee01fa17e2225308c1a4102713ffcf:
+  /@wangeditor/list-module/1.0.5_bhxad6qx4irfgcgbuqicoe77z4:
     resolution:
       {
         integrity: sha512-uDuYTP6DVhcYf7mF1pTlmNn5jOb4QtcVhYwSSAkyg09zqxI1qBqsfUnveeDeDqIuptSJhkh81cyxi+MF8sEPOQ==
@@ -2442,13 +2436,13 @@ packages:
       slate: ^0.72.0
       snabbdom: ^3.1.0
     dependencies:
-      "@wangeditor/core": 1.1.17_83942e33b1d7a7a6aab922626cc5c0f9
+      "@wangeditor/core": 1.1.17_qokc4m5r26t2nkvzejrgzroa7e
       dom7: 3.0.0
       slate: 0.72.8
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/table-module/1.1.4_525e8752da7b7ef13fcac1d5a4016600:
+  /@wangeditor/table-module/1.1.4_kjpiouw2pn7pcp6kyhk2ialgaa:
     resolution:
       {
         integrity: sha512-5saanU9xuEocxaemGdNi9t8MCDSucnykEC6jtuiT72kt+/Hhh4nERYx1J20OPsTCCdVr7hIyQenFD1iSRkIQ6w==
@@ -2462,7 +2456,7 @@ packages:
       slate: ^0.72.0
       snabbdom: ^3.1.0
     dependencies:
-      "@wangeditor/core": 1.1.17_83942e33b1d7a7a6aab922626cc5c0f9
+      "@wangeditor/core": 1.1.17_qokc4m5r26t2nkvzejrgzroa7e
       dom7: 3.0.0
       lodash.isequal: 4.5.0
       lodash.throttle: 4.1.1
@@ -2471,7 +2465,7 @@ packages:
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/upload-image-module/1.0.2_336cc64bbdb395b57ea48f5d2b9e116f:
+  /@wangeditor/upload-image-module/1.0.2_gnwmms55wok3k7ver5osxhqrn4:
     resolution:
       {
         integrity: sha512-z81lk/v71OwPDYeQDxj6cVr81aDP90aFuywb8nPD6eQeECtOymrqRODjpO6VGvCVxVck8nUxBHtbxKtjgcwyiA==
@@ -2488,15 +2482,15 @@ packages:
     dependencies:
       "@uppy/core": 2.3.4
       "@uppy/xhr-upload": 2.1.3_@uppy+core@2.3.4
-      "@wangeditor/basic-modules": 1.1.6_8e9c3f2d53e24946235186f566b5df7d
-      "@wangeditor/core": 1.1.17_83942e33b1d7a7a6aab922626cc5c0f9
+      "@wangeditor/basic-modules": 1.1.6_r2od6lkt4jeumi2rq32wnno7pu
+      "@wangeditor/core": 1.1.17_qokc4m5r26t2nkvzejrgzroa7e
       dom7: 3.0.0
       lodash.foreach: 4.5.0
       slate: 0.72.8
       snabbdom: 3.5.1
     dev: false
 
-  /@wangeditor/video-module/1.1.4_3c8f5193f1074f961b626ddee7c314e9:
+  /@wangeditor/video-module/1.1.4_hshvde7ra5hzmg3cnxpopqyu5e:
     resolution:
       {
         integrity: sha512-ZdodDPqKQrgx3IwWu4ZiQmXI8EXZ3hm2/fM6E3t5dB8tCaIGWQZhmqd6P5knfkRAd3z2+YRSRbxOGfoRSp/rLg==
@@ -2512,7 +2506,7 @@ packages:
     dependencies:
       "@uppy/core": 2.3.4
       "@uppy/xhr-upload": 2.1.3_@uppy+core@2.3.4
-      "@wangeditor/core": 1.1.17_83942e33b1d7a7a6aab922626cc5c0f9
+      "@wangeditor/core": 1.1.17_qokc4m5r26t2nkvzejrgzroa7e
       dom7: 3.0.0
       nanoid: 3.3.4
       slate: 0.72.8
@@ -3269,7 +3263,6 @@ packages:
         integrity: sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==
       }
     engines: { node: ^12.20.0 || >=14 }
-    dev: false
 
   /compare-func/2.0.0:
     resolution:
@@ -3338,8 +3331,8 @@ packages:
     engines: { node: ">=10" }
     hasBin: true
     dependencies:
-      is-text-path: 1.0.1
       JSONStream: 1.3.5
+      is-text-path: 1.0.1
       lodash: 4.17.21
       meow: 8.1.2
       split2: 3.2.2
@@ -3579,7 +3572,6 @@ packages:
       {
         integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
       }
-    dev: false
 
   /d/1.0.1:
     resolution:
@@ -3953,7 +3945,7 @@ packages:
       escape-html: 1.0.3
       lodash: 4.17.21
       lodash-es: 4.17.21
-      lodash-unified: 1.0.2_da03a4540fbd16bbaafbb96724306afd
+      lodash-unified: 1.0.2_3ib2ivapxullxkx3xftsimdk7u
       memoize-one: 6.0.0
       normalize-wheel-es: 1.2.0
       vue: 3.2.40
@@ -4391,7 +4383,7 @@ packages:
       eslint: 8.25.0
     dev: true
 
-  /eslint-plugin-prettier/4.2.1_3d430c1653672911bd9e295f62a81c27:
+  /eslint-plugin-prettier/4.2.1_hvbqyfstm4urdpm6ffpwfka4e4:
     resolution:
       {
         integrity: sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
@@ -4411,7 +4403,7 @@ packages:
       prettier-linter-helpers: 1.0.0
     dev: true
 
-  /eslint-plugin-prettier/4.2.1_eslint@8.25.0+prettier@2.7.1:
+  /eslint-plugin-prettier/4.2.1_znq2sm4m5bonjw4qqm6mwhbe2q:
     resolution:
       {
         integrity: sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
@@ -5849,7 +5841,7 @@ packages:
       }
     dev: false
 
-  /lodash-unified/1.0.2_da03a4540fbd16bbaafbb96724306afd:
+  /lodash-unified/1.0.2_3ib2ivapxullxkx3xftsimdk7u:
     resolution:
       {
         integrity: sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==
@@ -6220,7 +6212,6 @@ packages:
     hasBin: true
     dependencies:
       commander: 9.4.1
-    dev: false
 
   /mousetrap/1.6.5:
     resolution:
@@ -6631,7 +6622,7 @@ packages:
     engines: { node: ">=0.10.0" }
     dev: true
 
-  /pinia/2.0.23_typescript@4.8.4+vue@3.2.40:
+  /pinia/2.0.23_bfjwoga25wxjazzogo7o372nwq:
     resolution:
       {
         integrity: sha512-N15hFf4o5STrxpNrib1IEb1GOArvPYf1zPvQVRGOO1G1d74Ak0J0lVyalX/SmrzdT4Q0nlEFjbURsmBmIGUR5Q==
@@ -8105,7 +8096,7 @@ packages:
       postcss-selector-parser: 6.0.10
     dev: true
 
-  /stylelint-config-html/1.1.0_b9c99d24315b3a6965b56c7031c3b115:
+  /stylelint-config-html/1.1.0_xhez2jbrlm5gsznvnryddq5rcu:
     resolution:
       {
         integrity: sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==
@@ -8176,7 +8167,7 @@ packages:
     engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
     hasBin: true
     dependencies:
-      "@csstools/selector-specificity": 2.0.2_cd239324a5aeb6e3cee0fb61f6a33448
+      "@csstools/selector-specificity": 2.0.2_zurzgjffv23ohtxa7nq7nizuja
       balanced-match: 2.0.0
       colord: 2.9.3
       cosmiconfig: 7.0.1
@@ -8313,13 +8304,15 @@ packages:
       strip-ansi: 6.0.1
     dev: true
 
-  /tailwindcss/3.2.1:
+  /tailwindcss/3.2.1_postcss@8.4.17:
     resolution:
       {
         integrity: sha512-Uw+GVSxp5CM48krnjHObqoOwlCt5Qo6nw1jlCRwfGy68dSYb/LwS9ZFidYGRiM+w6rMawkZiu1mEMAsHYAfoLg==
       }
     engines: { node: ">=12.13.0" }
     hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
     dependencies:
       arg: 5.0.2
       chokidar: 3.5.3
@@ -8556,7 +8549,6 @@ packages:
       }
     engines: { node: ">=4.2.0" }
     hasBin: true
-    dev: true
 
   /unidragger/2.4.0:
     resolution:
@@ -8901,7 +8893,6 @@ packages:
       "@intlify/vue-devtools": 9.2.2
       "@vue/devtools-api": 6.4.4
       vue: 3.2.40
-    dev: false
 
   /vue-json-pretty/2.2.2_vue@3.2.40:
     resolution:
@@ -9025,6 +9016,16 @@ packages:
       "@vue/runtime-dom": 3.2.40
       "@vue/server-renderer": 3.2.40_vue@3.2.40
       "@vue/shared": 3.2.40
+
+  /vue3-danmaku/1.0.0_vue@3.2.40:
+    resolution:
+      {
+        integrity: sha512-1DVPQeQBdv/iGyuumebZLKPHcfvSgPwxe/ExKF1jc/dJ3MINbXkw23iIajE8JKNvttagOX7eZnuwWnQ4ug8pqg==
+      }
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.2.40
     dev: false
 
   /vuedraggable/4.1.0_vue@3.2.40:

src/router/modules/components.ts

@@ -117,6 +117,14 @@ const componentsRouter: RouteConfigsTable = {
       meta: {
         title: $t("menus.hsjsoneditor")
       }
+    },
+    {
+      path: "/components/danmaku",
+      name: "Danmaku",
+      component: () => import("@/views/components/danmaku/index.vue"),
+      meta: {
+        title: $t("menus.hsdanmaku")
+      }
     }
   ]
 };

src/views/components/danmaku/danmu.js

@@ -0,0 +1,460 @@
+const customDanmus = [
+  {
+    avatar:
+      "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAFBAYBAgMAB//aAAgBAQAAAAD7HU4ObhMC3AnlYvY8ISwA+6WDOd4/RA96FVeF66BOVWB3TsAOgZC27wv/xAAYAQEBAQEBAAAAAAAAAAAAAAACAwQAAf/aAAgBAhAAAAC3sw8uyRDQPV//xAAYAQADAQEAAAAAAAAAAAAAAAAAAgMBBP/aAAgBAxAAAACQ7LfmoUTNvFf/xAA0EAACAQMBBAcHAwUAAAAAAAABAgMABBESBRMxQRAhIjJRYbEUIzRCUnOBM3KSU2KRoeH/2gAIAQEAAT8AmmSCJpHOAoq6vZp8lmITkgonSQCMZxikkdGDxsVbxFbK2l7TGUkwHQfy6Ln4if7jetbcdglvH9TFv40hD71CGzlQpAyACRkt4VcxojxOdIj06GzwA5VKkilGUdjUcNxD9XlwI5g1Bfm0u4nC5UHDeYNWu0LS4B3D6mHHIwaufiJ/uN61tm6Et6GPCIbv8mtqi4gtrFkzjeuxIGRq+TP4orI1jpK+8MHAfVprYcM8kVysmoIGiwG8UfVgVcwh1ecDGiYcvlNWk7W9zDKucqwyPEVOczzfvb1q/wBkXWqR4Sja8nDHGCajAEagHIAx/jourmK0haaV9KrWyrFZLRZJ07MqNhc8Q3M/irfZFlaOGQF2HzOc1cACeYD+o3r0XptYEJKAyMx06TgsxOaupr+MhkIQk6TlfPlkVNCIxBc3A9onLjRG/WtWV1BPFlRp09TpzBHLoufiJ/uN69G05JLxt8C2ksQpTiAMHIq0mQz6HnMnZwurBwBRhKTLLK5Y6Oz/AGf9qwla3u4TykBRh/sdFx8RN9xvWpri43Unv5O6fmNSSSCHGtsb0DGfKrFm3zdZ7o9RUskhMnbbu+NLJJrh7bfqJz869onxjfSY/callk3knvG7x51//8QAIxEAAgEEAQMFAAAAAAAAAAAAAQIRAAMSMRAEIXETMjNBUf/aAAgBAgEBPwBMUTNv3tSdQrgZDYpwMmx0N8PdFv0iBMAyKS4QroF99JcxDhhMntwxgUCoJIER90jZCeG2PBpvjNWtHzx//8QAIBEAAgICAgIDAAAAAAAAAAAAAQIAERASAyEyM0GBkf/aAAgBAwEBPwBtmbURuErdRb1W/nCIW3vqMgJVr8YyWVIyvYG/5CKwJze36jY//9k=",
+    name: "美绪",
+    text: "马什么梅？"
+  },
+  {
+    avatar:
+      "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAABQIDBAEGB//aAAgBAQAAAAD65hzG3WLcATfCbHYQ9IY0uiEfRkU1IOr+RoUG1ornWj7Y6//EABgBAQADAQAAAAAAAAAAAAAAAAQAAgUD/9oACAECEAAAACEf3IJba51tGDNq/wD/xAAYAQEAAwEAAAAAAAAAAAAAAAAEAQMFAv/aAAgBAxAAAABSg0MWQdj+c6VozP/EAC0QAAIBAwMBBgUFAAAAAAAAAAECEQADBBASMUEiUVJhcZEFExQhgSAyQoKx/9oACAEBAAE/AKu5oEi2A3meKOXf8cfgV9Xe2kEgyOeCKsZSXAqs0XP91z7+wC3MSCzeg/RbuG06uO8T6a5kNkOOu0CpUXWQMdo4kQRPQihPd9tH+4jXIw0yDukq0RNHFu2/iOVku0pfx7foHt91MttbMyN7njqQDo3BPkdWEqRJEjkV8QOV2LVq2xBBlkoq+y181CrgHn1nXHffZQ+UH8aEwCaEoJP9qzbe+ySOUO7XCuxca2f5CR6jS477H7bftPWt7+NvekdzbWXYyo60rvtXtHgda3v4j71Yd/qLPaPJ6+Vb38be9f/EACYRAAECBAQHAQAAAAAAAAAAAAECAwAEEBIREzFSITNBQlFhgXL/2gAIAQIBAT8AffKDYjXqYznd5hhwuI46ijjOOaSfaYUm232Ik9F/KKQFRMN2LHgiJVdrmG6s32fYa5iP0Kf/xAAmEQABAgQFBAMAAAAAAAAAAAABAgMAEBESBBNCUoEhMTNhUXFy/9oACAEDAQE/AGGAoXK4EZLWwQ+2G19Oxk28RlhI9GEqur9xi9HMm3C2qtAfRhhy9J+axiUXIrtnhdfEOeNf5Mv/2Q==",
+    name: "博士",
+    text: "马东什么？"
+  },
+  {
+    avatar:
+      "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAxAAACAgMBAAAAAAAAAAAAAAAABgQFAQIHAwEBAAMBAAAAAAAAAAAAAAAAAwABAgT/2gAMAwEAAhADEAAAAI7CsPnN1VeZ0okpTbSWASKzwmMPRy3PuuWhpv4KvQ7pcJYTUb+hdLQYWJoaVU+RU3jcXiaoegAhWOAPeeaBd1wGtf/EAC4QAAIBAwIEBAUFAQAAAAAAAAECAwAEEQUhBhASMRMiQWEUI3KBoSAzQlFSkv/aAAgBAQABPwDTxidHHbdTyZGjdkcYYelBGKM4HlUgH7/osXInRfQsK0q18abxGHkj/JrV0KXrEfzUGtLiE0F1G48r4GfcVJDJFI0TbMp52W91D9VXt42mWQCu0QUqHZQC7SyDIRA22QO5NXkFyLeFpnWRggYsMZw/+ioAPsRVlOtrpsshx+6d2OFGw3J/oVK897YR6nbfORCTkp0OVQ7lRk5Aq5gMZSVR8qVepfbPpy0jDSRyEZxIg/6JrjKJytlEEJ63uJD7ttXB6Tn41bhW8Mwxxjqzt3OBWrx+Bw9fQsRvIgBzjYutcP3F8upWVmZZltvjFPQW22BqeAJpHh+kWyeyhsL+KXS9RcB1WLpYZGSc4NcKwxTrcRy+qrj2IJIqe3S5AEsSOAcgMobB+9Lb9KhVAAHYCntRIjI6hkYYZWGQRUGm2ltMssVsiSKCAVGMZqWFZ4fDY4XYn7ULaEgF182N/Me9cIuI3kY9gFodLAEHINFgKDKdqwK1LVotOMSsnWz5JAPYUeJZyTiKMVwv2n+la08npcZOBjke3LVWZtRuizE4kI5f/8QAIBEBAAIBAgcAAAAAAAAAAAAAAQARAwIQEiAhMTJBcf/aAAgBAgEBPwDL5HzkadfX0RDjmTSUJtks1MqWpVypk7uxt//EACARAQABAwMFAAAAAAAAAAAAAAEAAhEhAxATEiIxYXH/2gAIAQMBAT8A0m1L9l+2++Sg9sF45p1N7M6iUJYwM5GYW4ZmZT4Njb//2Q==",
+    name: "柚子",
+    text: "什么冬梅？"
+  }
+];
+
+// 弹幕来自b站首页
+const danmus = [
+  "草",
+  "高技术力",
+  "汤姆逊波纹疾走…啊哒哒哒哒哒哒……",
+  "此曲一出，非死即伤",
+  "这播放量不应该啊",
+  "牛皮！",
+  "全  文  背  诵",
+  "ohhhhhhh",
+  "NICE",
+  "草这死亡姿势",
+  "日常迫害团长",
+  "溜了溜了",
+  "火钳刘明",
+  "真实",
+  "汤姆逊波纹疾走",
+  "不  要  停  下  来  啊",
+  "泥 给 路 打 油",
+  "停下来了",
+  "草",
+  "完全一致",
+  "你怎么还没有被禁赛",
+  "6P41波纹疾走!!!",
+  "牛逼",
+  "草",
+  "草",
+  "cccccccc",
+  "人才不火系列",
+  "双厨狂喜",
+  "双厨曝炸",
+  "火钳留名",
+  "火钳留名",
+  "牛逼啊",
+  "草",
+  "草",
+  "要素过多",
+  "火钳刘明",
+  "高技术力suki",
+  "bo良ki影觉得很赞",
+  "你们的下一句话是名场面",
+  "Niiice",
+  "太草了",
+  "哈哈哈哈",
+  "火钳刘明",
+  "6p41疾走",
+  "袭击妈妈",
+  "占戈哥欠走己",
+  "又看jojo又玩r6的人恐怕太少了吧",
+  "好活当赏",
+  "要素过多",
+  "动作也太流畅了吧",
+  "世界名画",
+  "好活，当赏",
+  "全程高能",
+  "新人都是怪物.jpg",
+  "我的人质啊",
+  "袭击妈妈锁孔看她",
+  "完全不会画画（大嘘）",
+  "好活",
+  "爆头 2333333",
+  "把队友杀了的屑",
+  "动作指导:奥尔加",
+  "草",
+  "要素过多",
+  "噗",
+  "让你玩手机",
+  "6啊",
+  "我负责救人质",
+  "三厨狂喜",
+  "三厨狂喜",
+  "万能日语",
+  "耶———————格——————————",
+  "6P41波纹疾走",
+  "“哦”踩点还行",
+  "火钳刘明。",
+  "哎地唉洗",
+  "这枪不是m249啊，等等叫什么来的",
+  "火钳刘明",
+  "光棍节， 。去过",
+  "炸死队友哈哈哈",
+  "火钳刘明",
+  "火钳刘明",
+  "cao",
+  "火钳刘明",
+  "提前Niiiiiiiice！",
+  "火钳刘明",
+  "神仙UP",
+  "又被爆头了",
+  "6p41疾走",
+  "好活",
+  "人质好好笑啊",
+  "不要停下来啊",
+  "好活啊！！",
+  "6P41波纹疾走 （换成AK是不是更爽）",
+  "恭喜你发现宝藏",
+  "恭喜你发现宝藏",
+  "恭喜你发现宝藏",
+  "前方高能",
+  "封禁30分钟",
+  "火钳刘明",
+  "该赏",
+  "我靠，就冲着高帧数，投币了",
+  "不 要 停 下 来 啊（指你给路）",
+  "卧槽 无情",
+  "草",
+  "ADS草",
+  "世界线收束",
+  "火钳刘明",
+  "人质：给我把抢我跟他拼了",
+  "小车灵魂",
+  "卧槽这帧数",
+  "jojoの奇妙转场",
+  "niiiiiiice",
+  "好活",
+  "要素过多",
+  "6p41",
+  "TK*3移除对战",
+  "这场景布置有弹丸那味儿了",
+  "草",
+  "草",
+  "不要让战斗停下来",
+  "火钳留名",
+  "炸死俩盾哈哈",
+  "太草了，",
+  "万能日语",
+  "伪渲染(确信)",
+  "要素过多",
+  "火钳刘明",
+  "卧槽",
+  "炸死队友",
+  "危",
+  "这才是真正的高技术力",
+  "高技术力suki",
+  "火钳刘明",
+  "欺负我不懂日语系列",
+  "我打我自己",
+  "帧数爆炸",
+  "危",
+  "危",
+  "要素过多",
+  "巨真实这小车",
+  "牛逼",
+  "帧数高的吓人",
+  "5v5→3v3",
+  "我都是俄式救援",
+  "niiiiiiiiiiiice",
+  "别啊！",
+  "尼给路嗒呦",
+  "目测会火",
+  "双厨狂喜",
+  "人质已解救（脱）",
+  "哈哈哈哈哈",
+  "要素过多",
+  "nb",
+  "杀了两个队友不就被踢出去了吗",
+  "这是新人？",
+  "没毛病",
+  "一甲fuze",
+  "要素过多",
+  "大————头————",
+  "人————质————",
+  "这是组长吗？",
+  "不是M249，是PKP",
+  "卡其脱离太",
+  "等等JOJO是你？",
+  "我就是又看JOJO又玩r6",
+  "二乔？？？？？？",
+  "这也太流畅了吧",
+  "这tm能出番了这帧数和技术",
+  "kpm波纹疾走",
+  "大制作",
+  "太草了",
+  "耶——格——",
+  "高技术力",
+  "精神小车",
+  "左轮庸医",
+  "袭击人质，锁孔看他",
+  "奈~~斯 屑队友被杀✓",
+  "惨  盾兵  惨",
+  "打敌人误伤不算",
+  "不要停下来啊! (指解救人质)",
+  "嘴巴被贴胶还能说话的人质是鉴",
+  "哈哈哈哈哈哈哈哈哈",
+  "一局11杀",
+  "二乔同款姿势 哈哈",
+  "耶格！",
+  "看",
+  "鉴作无误",
+  "双出狂喜",
+  "为什么不是中文",
+  "经典咚咚咚………三声雷，带你飞",
+  "要素过多",
+  "jojo",
+  "三厨狂喜",
+  "我也是又看又玩",
+  "我都听到lisalisa了doge",
+  "你给路打油",
+  "确实质量很高啊",
+  "NICE",
+  "银魂？",
+  "火钳刘明",
+  "我就是又看jojo又玩R6（1631小时）的，你有什么事吗？",
+  "哟西哟西",
+  "要素过多",
+  "我也是看JOJO，玩r6",
+  "nokk",
+  "800小时r6加二刷jojo在此",
+  "好活",
+  "jojo",
+  "fuze the hostage",
+  "不要停下来！！！！！",
+  "pkppkp波纹疾走",
+  "新人都是怪物吗？",
+  "23333333",
+  "我先来，首页通知书",
+  "咚咚咚放这里。。。",
+  "火钳刘明",
+  "火钳刘明",
+  "火钳刘明",
+  "队友都炸",
+  "nice",
+  "哈哈哈哈",
+  "人质:危！",
+  "危",
+  "火钳刘明",
+  "人质  卒",
+  "你币有了",
+  "打投组",
+  "恭喜首頁通知書！",
+  "要素溢出",
+  "HOSTAGE KIA",
+  "233",
+  "是无托版的PKP",
+  "666",
+  "hostage KIA",
+  "tk哈哈哈",
+  "要素过多",
+  "这个肌肉我可以惹",
+  "6的飞起",
+  "jo风",
+  "混入了奇怪的东西",
+  "草",
+  "袭击妈妈，锁孔看她",
+  "哈哈哈哈哈哈",
+  "，",
+  "草",
+  "牛逼",
+  "高技术力啊",
+  "opp",
+  "X",
+  "组长！",
+  "草（中日双语）",
+  "哈哈哈哈哈哈",
+  "-500",
+  ".",
+  "看封面识内容系列",
+  "草",
+  "首页通知书",
+  "要素过多",
+  "但是不会画画",
+  "草",
+  "不要停下来啊！",
+  "梅开三度",
+  "四回啊四回",
+  "高帧好评",
+  "人质已解脱",
+  "草",
+  "强",
+  "好活！",
+  "好流畅",
+  "草",
+  "666",
+  "好活儿当赏",
+  "新人都是怪物系列",
+  "高技术力",
+  "niiiiiiiiiiiiiiice",
+  "人质危",
+  "哈哈哈哈",
+  "带制作，三连了",
+  "鉴作",
+  "咚咚咚",
+  "咚咚咚咚棒棒棒棒",
+  "要素过多",
+  "不应该是打中耳机吗",
+  "高技术力",
+  "完了",
+  "彩虹六号牛批",
+  "口罩都有荒木线，佛了",
+  "哈哈哈",
+  "要素爆炸",
+  "高技术力",
+  "cao caocaocaocao",
+  "哈哈哈哈哈哈哈",
+  "等等，2乔这里说的是30分钟",
+  "首页通知书",
+  "海     岸     线",
+  "pkp波纹疾走",
+  "耶————————格————————",
+  "人 质 凶 手 -500",
+  "队友：WDNMD",
+  "jojo？？？",
+  "点进来之前我以为是fuze饮料。。",
+  "要素过多",
+  "绝了",
+  "要素过多",
+  "灭 霸",
+  "新人都是魔鬼",
+  "帧数爆炸",
+  "Cluster Charge activated！",
+  "要素过多",
+  "Hostage KIA，Mission failed",
+  "人质已解脱。。。",
+  "开 幕 雷 击",
+  "哈哈哈哈",
+  "ADS草死了",
+  "+0",
+  "牛批牛批",
+  "拜见大神",
+  "阿虚",
+  "这帧数，感觉在看动漫",
+  "卡其脱离太",
+  "双厨狂喜",
+  "问问",
+  "不要停下来啊！！！！！",
+  "h",
+  "不要停下来啊",
+  "要真30分钟都不用结束回合了，都开始第二局游戏了",
+  "这也太强了",
+  "。。。。。。。。。。。。",
+  "hoho",
+  "要素过多",
+  "哈哈哈哈哈哈哈哈哈哈哈哈哈哈",
+  "哈哈哈哈哈哈哈哈哈哈",
+  ".00",
+  "哈哈",
+  "万能的日语",
+  "首页通知书",
+  "我卡了？",
+  "hhhhh",
+  "大盾闪盾好惨",
+  "哈哈哈哈哈哈哈哈哈",
+  "草",
+  "要素太多受不了哈哈哈哈哈哈哈",
+  "火钳刘明",
+  "首页通知书",
+  "lisalisa",
+  "这是什么蛇皮操作，看不懂",
+  "敌 我 不 分",
+  "草",
+  "666",
+  "哈哈哈哈啊哈哈哈",
+  "完全一致",
+  "要素过多",
+  "你又双叒叕发现了新的宝藏",
+  "火钳刘明",
+  "2333",
+  "高  技  术  力",
+  "三梗合一",
+  "四梗合一",
+  "火钳刘明",
+  "杀2个队友不是直接飞了吗",
+  "首页通知书",
+  "海岸线",
+  "是延迟",
+  "好活当赏",
+  "这个我遇到过，fuze就是我，人质敌人队友都被我杀掉了，被老外骂并被踢了",
+  "草素过多",
+  "人质——  再不能起",
+  "必须三联",
+  "开始吟唱",
+  "不要停下来啊",
+  "草",
+  "？？？？？？？？？？？？？？？？？",
+  "tab+shift",
+  "帧数高的和动画一样",
+  "wwwwwwwwwwww",
+  "好强",
+  "23333333",
+  "好活当赏",
+  "此曲一出",
+  "要素过载",
+  "火钳刘明",
+  "要素过载",
+  "好活！！！！",
+  "开始吟唱",
+  "我听得懂咋办，在线等，很急",
+  "哇哇哇好高清",
+  ".",
+  "医 学 奇 迹",
+  "jo里jo气的",
+  "jojo画风",
+  "哈哈哈哈哈哈",
+  "俄式反恐",
+  "别拦我，老子把3个ADS都丢他脸上",
+  "-500",
+  "万 能 日 语",
+  "666",
+  "人质杀手",
+  "做的真的棒。",
+  "我NM笑疯",
+  "双厨狂喜",
+  "玛撒卡！这是袭击妈妈配音？",
+  "nice",
+  "jojo!",
+  "JO小鬼来力",
+  "真实",
+  "我又玩R6又看JOJO",
+  "完  全  不  会  画  画",
+  "秀儿",
+  "是系统自动踢人的，老外来不及踢你",
+  "6p41波纹疾走",
+  "火钳刘明",
+  "lisalisa？？？？？",
+  "盾——兵——（悲）",
+  "就是没有汤姆逊，汤姆逊波纹疾走！！",
+  "要素过多",
+  "。。。。？？",
+  "组长你怎么了组长",
+  "UP:我 完 全 不 会 画 画",
+  "再来亿遍",
+  "泥给路带呦～",
+  "哈哈哈哈哈哈哈哈哈",
+  "哈哈哈哈哈哈哈哈哈",
+  "火钳刘明"
+];
+
+const getDanmuData = () => {
+  return danmus.map((text, index) => {
+    const _index = index % 3;
+    return {
+      avatar: customDanmus[_index].avatar,
+      name: customDanmus[_index].name,
+      text
+    };
+  });
+};
+
+export { customDanmus, danmus, getDanmuData };

src/views/components/danmaku/index.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { danmus as danmusData, getDanmuData } from "./danmu.js";
+import { onMounted, onUnmounted, reactive, ref } from "vue";
+import VueDanmaku from "vue3-danmaku";
+
+defineOptions({
+  name: "Danmaku"
+});
+
+const danmaku = ref<any>(null);
+const danmus = ref<any[]>(getDanmuData());
+const danmuMsg = ref<string>("");
+let timer = 0;
+const config = reactive({
+  channels: 5, // 轨道数量，为0则弹幕轨道数会撑满容器
+  useSlot: true, // 是否开启slot
+  loop: true, // 是否开启弹幕循环
+  speeds: 200, // 弹幕速度，实际为弹幕滚动完一整屏的秒数，值越小速度越快
+  fontSize: 20, // 文本模式下的字号
+  top: 10, // 弹幕轨道间的垂直间距
+  right: 0, // 同一轨道弹幕的水平间距
+  debounce: 100, // 弹幕刷新频率（多少毫秒插入一条弹幕，建议不小于50）
+  randomChannel: true // 随机弹幕轨道
+});
+
+onMounted(() => {
+  window.onresize = () => resizeHandler();
+});
+
+onUnmounted(() => {
+  window.onresize = null;
+});
+
+function play(type: string) {
+  switch (type) {
+    case "play":
+      danmaku.value.play();
+      break;
+    case "pause":
+      danmaku.value.pause();
+      break;
+    case "stop":
+      danmaku.value.stop();
+      break;
+    case "show":
+      danmaku.value.show();
+      break;
+    case "hide":
+      danmaku.value.hide();
+      break;
+    case "reset":
+      danmaku.value.reset();
+      break;
+    default:
+      break;
+  }
+}
+
+function switchSlot(slot: boolean) {
+  config.useSlot = slot;
+  danmus.value = slot ? getDanmuData() : danmusData;
+
+  setTimeout(() => {
+    danmaku.value.stop();
+    danmaku.value.play();
+  });
+}
+function speedsChange(val: number) {
+  if (config.speeds <= 10 && val === -10) {
+    return;
+  }
+  config.speeds += val;
+  danmaku.value.reset();
+}
+function fontChange(val: number) {
+  config.fontSize += val;
+  danmaku.value.reset();
+}
+function channelChange(val: number) {
+  if (!config.channels && val === -1) {
+    return;
+  }
+  config.channels += val;
+}
+function resizeHandler() {
+  if (timer) clearTimeout(timer);
+  timer = window.setTimeout(() => {
+    danmaku.value.resize();
+  }, 500);
+}
+function addDanmu() {
+  if (!danmuMsg.value) return;
+  const _danmuMsg = config.useSlot
+    ? {
+        avatar: "https://i.loli.net/2021/01/17/xpwbm3jKytfaNOD.jpg",
+        name: "你",
+        text: danmuMsg.value
+      }
+    : danmuMsg.value;
+  danmaku.value.add(_danmuMsg);
+  danmuMsg.value = "";
+}
+</script>
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          弹幕组件，采用开源的
+          <el-link
+            href="https://github.com/hellodigua/vue-danmaku/tree/vue3"
+            target="_blank"
+            style="font-size: 16px; margin: 0 4px 5px"
+          >
+            vue-danmaku
+          </el-link>
+        </span>
+      </div>
+    </template>
+    <div class="flex gap-5">
+      <vue-danmaku
+        ref="danmaku"
+        class="demo"
+        v-model:danmus="danmus"
+        isSuspend
+        v-bind="config"
+      >
+        <!-- 弹幕slot -->
+        <template v-slot:dm="{ danmu, index }">
+          <div class="danmu-item">
+            <img class="img" :src="danmu.avatar" />
+            <span>{{ index }}{{ danmu.name }}：</span>
+            <span>{{ danmu.text }}</span>
+          </div>
+        </template>
+      </vue-danmaku>
+      <div class="main">
+        <p>
+          播放：
+          <el-button @click="play('play')">播放</el-button>
+          <el-button @click="play('pause')">暂停</el-button>
+          <el-button @click="play('stop')">停止</el-button>
+        </p>
+        <p>
+          模式：
+          <el-button @click="switchSlot(true)">弹幕 slot</el-button>
+          <el-button @click="switchSlot(false)">普通文本</el-button>
+        </p>
+        <p>
+          显示：
+          <el-button @click="play('show')">显示</el-button>
+          <el-button @click="play('hide')">隐藏</el-button>
+        </p>
+        <p>
+          速度：
+          <el-button @click="speedsChange(-10)">减速</el-button>
+          <el-button @click="speedsChange(10)">增速</el-button>
+          <span class="ml-5">当前速度：{{ config.speeds }}像素/s</span>
+        </p>
+        <p>
+          字号：
+          <el-button :disabled="config.useSlot" @click="fontChange(-1)">
+            缩小
+          </el-button>
+          <el-button :disabled="config.useSlot" @click="fontChange(1)">
+            放大
+          </el-button>
+          <span class="ml-5">当前字号：{{ config.fontSize }}px</span>
+        </p>
+        <p>
+          轨道：
+          <el-button @click="channelChange(-1)">-1</el-button>
+          <el-button @click="channelChange(1)">+1</el-button>
+          <el-button @click="channelChange(-config.channels)"> 填满 </el-button>
+          <span class="ml-5">当前轨道：{{ config.channels }}</span>
+        </p>
+        <p class="flex">
+          <el-input
+            type="text"
+            placeholder="输入评论后，回车发送弹幕"
+            v-model="danmuMsg"
+            @keyup.enter="addDanmu"
+          />
+        </p>
+      </div>
+    </div>
+  </el-card>
+</template>
+<style lang="scss">
+.demo {
+  flex: 1;
+  height: 600px;
+  background: linear-gradient(45deg, #5ac381, #20568b);
+
+  .danmu-item {
+    display: flex;
+    align-items: center;
+
+    .img {
+      height: 25px;
+      width: 25px;
+      border-radius: 50%;
+      margin-right: 5px;
+    }
+  }
+}
+
+.main {
+  flex: 1;
+
+  p {
+    margin-top: 10px;
+  }
+}
+</style>

src/views/components/draggable/index.vue

@@ -54,7 +54,7 @@ onMounted(() => {
   <el-card>
     <template #header>
       <div class="card-header">
-        <span>
+        <span class="font-medium">
           拖拽组件，采用开源的
           <el-link
             href="https://sortablejs.github.io/vue.draggable.next/#/simple"