twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-30 09:24:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add danmaku demo (#362)

Browse Source 
* feat: add danmaku demo

* fix: /@/改为@/

* fix: update
This commit is contained in:
一万 2022-10-28 12:27:59 +08:00 committed by GitHub
parent aa83ea83fa
commit ceb1ec6e6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 769 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locales/en.yaml
View File

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

1
locales/zh-CN.yaml
View File

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

1
package.json
View File

@ -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",

163
pnpm-lock.yaml generated
View File

@ -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:

8
src/router/modules/components.ts
View File

@ -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")
}
}
]
};

460
src/views/components/danmaku/danmu.js Normal file
View File

@ -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 };

215
src/views/components/danmaku/index.vue Normal file
View File

@ -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>

2
src/views/components/draggable/index.vue
View File

@ -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"