Merge branch 'main' of https://gitee.com/zzyyymm/super_video
This commit is contained in:
gaofeihang committed
commit
f22333f6f5
29 files changed
+696
-59
No files matched your search
@@ -0,0 +1 @@
|
||||
src/assets/video/*.mp4 filter=lfs diff=lfs merge=lfs -text
|
||||
@@ -12,6 +12,9 @@ node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
# 忽略所有 .mp4 文件
|
||||
*.mp4
|
||||
public/video/*
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
|
||||
Generated
+151
-5
@@ -8,6 +8,9 @@ importers:
|
||||
|
||||
.:
|
||||
dependencies:
|
||||
less:
|
||||
specifier: ^4.4.1
|
||||
version: 4.4.1
|
||||
vue:
|
||||
specifier: ^3.5.18
|
||||
version: 3.5.21(typescript@5.8.3)
|
||||
@@ -26,7 +29,7 @@ importers:
|
||||
version: 24.3.3
|
||||
'@vitejs/plugin-vue':
|
||||
specifier: ^6.0.1
|
||||
version: 6.0.1(vite@7.1.5(@types/node@24.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.1))(vue@3.5.21(typescript@5.8.3))
|
||||
version: 6.0.1(vite@7.1.5(@types/node@24.3.3)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(yaml@2.8.1))(vue@3.5.21(typescript@5.8.3))
|
||||
'@vue/tsconfig':
|
||||
specifier: ^0.7.0
|
||||
version: 0.7.0(typescript@5.8.3)(vue@3.5.21(typescript@5.8.3))
|
||||
@@ -74,7 +77,7 @@ importers:
|
||||
version: 8.43.0(eslint@9.35.0(jiti@2.5.1))(typescript@5.8.3)
|
||||
vite:
|
||||
specifier: ^7.1.2
|
||||
version: 7.1.5(@types/node@24.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.1)
|
||||
version: 7.1.5(@types/node@24.3.3)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(yaml@2.8.1)
|
||||
vue-tsc:
|
||||
specifier: ^3.0.5
|
||||
version: 3.0.7(typescript@5.8.3)
|
||||
@@ -849,6 +852,9 @@ packages:
|
||||
engines: {node: '>=16'}
|
||||
hasBin: true
|
||||
|
||||
copy-anything@2.0.6:
|
||||
resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
|
||||
|
||||
cosmiconfig-typescript-loader@6.1.0:
|
||||
resolution: {integrity: sha512-tJ1w35ZRUiM5FeTzT7DtYWAFFv37ZLqSRkGi2oeCK1gPhvaWjkAtfXvLmvE1pRfxxp9aQo6ba/Pvg1dKj05D4g==}
|
||||
engines: {node: '>=v18'}
|
||||
@@ -938,6 +944,10 @@ packages:
|
||||
resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
errno@0.1.8:
|
||||
resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
|
||||
hasBin: true
|
||||
|
||||
error-ex@1.3.2:
|
||||
resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
|
||||
|
||||
@@ -1139,6 +1149,9 @@ packages:
|
||||
resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
graceful-fs@4.2.11:
|
||||
resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
|
||||
|
||||
graphemer@1.4.0:
|
||||
resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
|
||||
|
||||
@@ -1159,6 +1172,10 @@ packages:
|
||||
engines: {node: '>=18'}
|
||||
hasBin: true
|
||||
|
||||
iconv-lite@0.6.3:
|
||||
resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
ignore@5.3.2:
|
||||
resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
|
||||
engines: {node: '>= 4'}
|
||||
@@ -1167,6 +1184,11 @@ packages:
|
||||
resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
|
||||
engines: {node: '>= 4'}
|
||||
|
||||
image-size@0.5.5:
|
||||
resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
hasBin: true
|
||||
|
||||
import-fresh@3.3.1:
|
||||
resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
|
||||
engines: {node: '>=6'}
|
||||
@@ -1225,6 +1247,9 @@ packages:
|
||||
resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
is-what@3.14.1:
|
||||
resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
|
||||
|
||||
isexe@2.0.0:
|
||||
resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
|
||||
|
||||
@@ -1268,6 +1293,11 @@ packages:
|
||||
keyv@4.5.4:
|
||||
resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
|
||||
|
||||
less@4.4.1:
|
||||
resolution: {integrity: sha512-X9HKyiXPi0f/ed0XhgUlBeFfxrlDP3xR4M7768Zl+WXLUViuL9AOPPJP4nCV0tgRWvTYvpNmN0SFhZOQzy16PA==}
|
||||
engines: {node: '>=14'}
|
||||
hasBin: true
|
||||
|
||||
levn@0.4.1:
|
||||
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
@@ -1401,6 +1431,10 @@ packages:
|
||||
magic-string@0.30.19:
|
||||
resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
|
||||
|
||||
make-dir@2.1.0:
|
||||
resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
meow@12.1.1:
|
||||
resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
|
||||
engines: {node: '>=16.10'}
|
||||
@@ -1413,6 +1447,11 @@ packages:
|
||||
resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
|
||||
engines: {node: '>=8.6'}
|
||||
|
||||
mime@1.6.0:
|
||||
resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
|
||||
engines: {node: '>=4'}
|
||||
hasBin: true
|
||||
|
||||
mimic-function@5.0.1:
|
||||
resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
|
||||
engines: {node: '>=18'}
|
||||
@@ -1452,6 +1491,11 @@ packages:
|
||||
natural-compare@1.4.0:
|
||||
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
|
||||
|
||||
needle@3.3.1:
|
||||
resolution: {integrity: sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==}
|
||||
engines: {node: '>= 4.4.x'}
|
||||
hasBin: true
|
||||
|
||||
node-releases@2.0.21:
|
||||
resolution: {integrity: sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==}
|
||||
|
||||
@@ -1509,6 +1553,10 @@ packages:
|
||||
resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
parse-node-version@1.0.1:
|
||||
resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
|
||||
engines: {node: '>= 0.10'}
|
||||
|
||||
path-browserify@1.0.1:
|
||||
resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
|
||||
|
||||
@@ -1551,6 +1599,10 @@ packages:
|
||||
resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
pify@4.0.1:
|
||||
resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
pirates@4.0.7:
|
||||
resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
|
||||
engines: {node: '>= 6'}
|
||||
@@ -1609,6 +1661,9 @@ packages:
|
||||
engines: {node: '>=14'}
|
||||
hasBin: true
|
||||
|
||||
prr@1.0.1:
|
||||
resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
|
||||
|
||||
punycode@2.3.1:
|
||||
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
|
||||
engines: {node: '>=6'}
|
||||
@@ -1663,6 +1718,16 @@ packages:
|
||||
run-parallel@1.2.0:
|
||||
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
|
||||
|
||||
safer-buffer@2.1.2:
|
||||
resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
|
||||
|
||||
sax@1.4.1:
|
||||
resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
|
||||
|
||||
semver@5.7.2:
|
||||
resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
|
||||
hasBin: true
|
||||
|
||||
semver@7.7.2:
|
||||
resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
|
||||
engines: {node: '>=10'}
|
||||
@@ -1692,6 +1757,10 @@ packages:
|
||||
resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
source-map@0.6.1:
|
||||
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
split2@4.2.0:
|
||||
resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
|
||||
engines: {node: '>= 10.x'}
|
||||
@@ -1780,6 +1849,9 @@ packages:
|
||||
ts-interface-checker@0.1.13:
|
||||
resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
|
||||
|
||||
tslib@2.8.1:
|
||||
resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
|
||||
|
||||
type-check@0.4.0:
|
||||
resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
@@ -2409,10 +2481,10 @@ snapshots:
|
||||
'@typescript-eslint/types': 8.43.0
|
||||
eslint-visitor-keys: 4.2.1
|
||||
|
||||
'@vitejs/plugin-vue@6.0.1(vite@7.1.5(@types/node@24.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.1))(vue@3.5.21(typescript@5.8.3))':
|
||||
'@vitejs/plugin-vue@6.0.1(vite@7.1.5(@types/node@24.3.3)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(yaml@2.8.1))(vue@3.5.21(typescript@5.8.3))':
|
||||
dependencies:
|
||||
'@rolldown/pluginutils': 1.0.0-beta.29
|
||||
vite: 7.1.5(@types/node@24.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.1)
|
||||
vite: 7.1.5(@types/node@24.3.3)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(yaml@2.8.1)
|
||||
vue: 3.5.21(typescript@5.8.3)
|
||||
|
||||
'@volar/language-core@2.4.23':
|
||||
@@ -2673,6 +2745,10 @@ snapshots:
|
||||
meow: 12.1.1
|
||||
split2: 4.2.0
|
||||
|
||||
copy-anything@2.0.6:
|
||||
dependencies:
|
||||
is-what: 3.14.1
|
||||
|
||||
cosmiconfig-typescript-loader@6.1.0(@types/node@24.3.3)(cosmiconfig@9.0.0(typescript@5.8.3))(typescript@5.8.3):
|
||||
dependencies:
|
||||
'@types/node': 24.3.3
|
||||
@@ -2736,6 +2812,11 @@ snapshots:
|
||||
|
||||
environment@1.1.0: {}
|
||||
|
||||
errno@0.1.8:
|
||||
dependencies:
|
||||
prr: 1.0.1
|
||||
optional: true
|
||||
|
||||
error-ex@1.3.2:
|
||||
dependencies:
|
||||
is-arrayish: 0.2.1
|
||||
@@ -2971,6 +3052,9 @@ snapshots:
|
||||
|
||||
globals@16.4.0: {}
|
||||
|
||||
graceful-fs@4.2.11:
|
||||
optional: true
|
||||
|
||||
graphemer@1.4.0: {}
|
||||
|
||||
has-flag@4.0.0: {}
|
||||
@@ -2983,10 +3067,18 @@ snapshots:
|
||||
|
||||
husky@9.1.7: {}
|
||||
|
||||
iconv-lite@0.6.3:
|
||||
dependencies:
|
||||
safer-buffer: 2.1.2
|
||||
optional: true
|
||||
|
||||
ignore@5.3.2: {}
|
||||
|
||||
ignore@7.0.5: {}
|
||||
|
||||
image-size@0.5.5:
|
||||
optional: true
|
||||
|
||||
import-fresh@3.3.1:
|
||||
dependencies:
|
||||
parent-module: 1.0.1
|
||||
@@ -3030,6 +3122,8 @@ snapshots:
|
||||
dependencies:
|
||||
text-extensions: 2.4.0
|
||||
|
||||
is-what@3.14.1: {}
|
||||
|
||||
isexe@2.0.0: {}
|
||||
|
||||
jackspeak@3.4.3:
|
||||
@@ -3064,6 +3158,20 @@ snapshots:
|
||||
dependencies:
|
||||
json-buffer: 3.0.1
|
||||
|
||||
less@4.4.1:
|
||||
dependencies:
|
||||
copy-anything: 2.0.6
|
||||
parse-node-version: 1.0.1
|
||||
tslib: 2.8.1
|
||||
optionalDependencies:
|
||||
errno: 0.1.8
|
||||
graceful-fs: 4.2.11
|
||||
image-size: 0.5.5
|
||||
make-dir: 2.1.0
|
||||
mime: 1.6.0
|
||||
needle: 3.3.1
|
||||
source-map: 0.6.1
|
||||
|
||||
levn@0.4.1:
|
||||
dependencies:
|
||||
prelude-ls: 1.2.1
|
||||
@@ -3183,6 +3291,12 @@ snapshots:
|
||||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.5.5
|
||||
|
||||
make-dir@2.1.0:
|
||||
dependencies:
|
||||
pify: 4.0.1
|
||||
semver: 5.7.2
|
||||
optional: true
|
||||
|
||||
meow@12.1.1: {}
|
||||
|
||||
merge2@1.4.1: {}
|
||||
@@ -3192,6 +3306,9 @@ snapshots:
|
||||
braces: 3.0.3
|
||||
picomatch: 2.3.1
|
||||
|
||||
mime@1.6.0:
|
||||
optional: true
|
||||
|
||||
mimic-function@5.0.1: {}
|
||||
|
||||
minimatch@3.1.2:
|
||||
@@ -3222,6 +3339,12 @@ snapshots:
|
||||
|
||||
natural-compare@1.4.0: {}
|
||||
|
||||
needle@3.3.1:
|
||||
dependencies:
|
||||
iconv-lite: 0.6.3
|
||||
sax: 1.4.1
|
||||
optional: true
|
||||
|
||||
node-releases@2.0.21: {}
|
||||
|
||||
normalize-path@3.0.0: {}
|
||||
@@ -3278,6 +3401,8 @@ snapshots:
|
||||
json-parse-even-better-errors: 2.3.1
|
||||
lines-and-columns: 1.2.4
|
||||
|
||||
parse-node-version@1.0.1: {}
|
||||
|
||||
path-browserify@1.0.1: {}
|
||||
|
||||
path-exists@4.0.0: {}
|
||||
@@ -3303,6 +3428,9 @@ snapshots:
|
||||
|
||||
pify@2.3.0: {}
|
||||
|
||||
pify@4.0.1:
|
||||
optional: true
|
||||
|
||||
pirates@4.0.7: {}
|
||||
|
||||
postcss-import@15.1.0(postcss@8.5.6):
|
||||
@@ -3350,6 +3478,9 @@ snapshots:
|
||||
|
||||
prettier@3.6.2: {}
|
||||
|
||||
prr@1.0.1:
|
||||
optional: true
|
||||
|
||||
punycode@2.3.1: {}
|
||||
|
||||
queue-microtask@1.2.3: {}
|
||||
@@ -3416,6 +3547,15 @@ snapshots:
|
||||
dependencies:
|
||||
queue-microtask: 1.2.3
|
||||
|
||||
safer-buffer@2.1.2:
|
||||
optional: true
|
||||
|
||||
sax@1.4.1:
|
||||
optional: true
|
||||
|
||||
semver@5.7.2:
|
||||
optional: true
|
||||
|
||||
semver@7.7.2: {}
|
||||
|
||||
shebang-command@2.0.0:
|
||||
@@ -3438,6 +3578,9 @@ snapshots:
|
||||
|
||||
source-map-js@1.2.1: {}
|
||||
|
||||
source-map@0.6.1:
|
||||
optional: true
|
||||
|
||||
split2@4.2.0: {}
|
||||
|
||||
string-argv@0.3.2: {}
|
||||
@@ -3546,6 +3689,8 @@ snapshots:
|
||||
|
||||
ts-interface-checker@0.1.13: {}
|
||||
|
||||
tslib@2.8.1: {}
|
||||
|
||||
type-check@0.4.0:
|
||||
dependencies:
|
||||
prelude-ls: 1.2.1
|
||||
@@ -3579,7 +3724,7 @@ snapshots:
|
||||
|
||||
util-deprecate@1.0.2: {}
|
||||
|
||||
vite@7.1.5(@types/node@24.3.3)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.1):
|
||||
vite@7.1.5(@types/node@24.3.3)(jiti@2.5.1)(less@4.4.1)(lightningcss@1.30.1)(yaml@2.8.1):
|
||||
dependencies:
|
||||
esbuild: 0.25.9
|
||||
fdir: 6.5.0(picomatch@4.0.3)
|
||||
@@ -3591,6 +3736,7 @@ snapshots:
|
||||
'@types/node': 24.3.3
|
||||
fsevents: 2.3.3
|
||||
jiti: 2.5.1
|
||||
less: 4.4.1
|
||||
lightningcss: 1.30.1
|
||||
yaml: 2.8.1
|
||||
|
||||
|
||||
File renamed without changes.
Binary file not shown.
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
File renamed without changes.
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
File renamed without changes.
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
File renamed without changes.
File renamed without changes.
@@ -6,9 +6,12 @@
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.GUIDE_DRAGON_BG) }"></div> -->
|
||||
|
||||
<!-- 导学小龙UI区域 -->
|
||||
<div class="guide-ui absolute left-16 top-1/2 transform -translate-y-1/2">
|
||||
<div class="guide-ui absolute left-16" :style="positionStyle">
|
||||
<!-- 主UI面板 -->
|
||||
<div class="guide-panel" :style="{ backgroundImage: getBackgroundImage('components/box') }">
|
||||
<div
|
||||
class="guide-panel bg-no-repeat"
|
||||
:style="{ backgroundImage: getBackgroundImage('components/box') }"
|
||||
>
|
||||
<!-- 标题区域 -->
|
||||
|
||||
<ImgButton
|
||||
@@ -48,7 +51,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 小龙角色区域 -->
|
||||
<div class="dragon-character absolute right-16 top-1/2 transform -translate-y-1/2">
|
||||
<div class="dragon-character absolute right-16" :style="positionStyle">
|
||||
<div class="dragon-container">
|
||||
<!-- 小龙角色图片 -->
|
||||
<img :src="getStaticImage(IMAGE_PATHS.GUIDE_PERSON)" alt="导学小龙" class="dragon-image" />
|
||||
@@ -60,6 +63,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { getStaticImage, getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
|
||||
@@ -70,6 +74,8 @@ interface Props {
|
||||
currentStep?: number
|
||||
/** 总步骤数 */
|
||||
totalSteps?: number
|
||||
/** 垂直偏移（仅Y轴），支持 number(px) 或 '10%'/'120px' */
|
||||
positionOffsetY?: number | string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
@@ -78,10 +84,11 @@ interface Emits {
|
||||
(e: 'complete'): void
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
showSkip: true,
|
||||
currentStep: 1,
|
||||
totalSteps: 1
|
||||
totalSteps: 1,
|
||||
positionOffsetY: '50%'
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
@@ -99,6 +106,21 @@ const handleSkip = () => {
|
||||
const handleContinue = () => {
|
||||
emit('next')
|
||||
}
|
||||
|
||||
// 根据 position 计算垂直定位类
|
||||
const normalizeOffset = (value: number | string) => {
|
||||
if (typeof value === 'number') return `${value}px`
|
||||
return value
|
||||
}
|
||||
|
||||
const positionStyle = computed(() => {
|
||||
const y = normalizeOffset(props.positionOffsetY)
|
||||
// 百分比：按中心定位；px：按像素直接定位
|
||||
if (typeof props.positionOffsetY === 'string' && props.positionOffsetY.includes('%')) {
|
||||
return { top: y, transform: 'translateY(-50%)' }
|
||||
}
|
||||
return { top: y, transform: 'translateY(0)' }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -166,11 +188,11 @@ const handleContinue = () => {
|
||||
}
|
||||
|
||||
.content-text {
|
||||
@apply text-white leading-relaxed font-bold text-4xl flex-1;
|
||||
@apply text-white leading-normal font-bold text-4xl flex-1;
|
||||
}
|
||||
|
||||
.progress-indicator {
|
||||
@apply absolute bottom-6 right-6;
|
||||
@apply absolute bottom-6 right-10;
|
||||
}
|
||||
|
||||
.progress-dots {
|
||||
@@ -239,17 +261,17 @@ const handleContinue = () => {
|
||||
}
|
||||
}
|
||||
|
||||
.dragon-character {
|
||||
.dragon-container {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(-50%) translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-50%) translateY(-10px);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -12,6 +12,7 @@
|
||||
:show-skip="currentStep < totalSteps"
|
||||
:current-step="currentStep"
|
||||
:total-steps="totalSteps"
|
||||
:position-offset-y="props.positionOffsetY"
|
||||
@next="handleNext"
|
||||
@skip="handleSkip"
|
||||
@complete="handleComplete"
|
||||
@@ -27,8 +28,16 @@
|
||||
:total-steps="totalSteps"
|
||||
/>
|
||||
</div>
|
||||
<!-- 兼容原有的配置形式 -->
|
||||
<div v-else v-html="currentStepContent"></div>
|
||||
<!-- 兼容原有的配置形式：也包裹 GuideStepsItem，获得继续按钮 -->
|
||||
<GuideStepsItem
|
||||
v-else
|
||||
:is-last-step="currentStep >= totalSteps"
|
||||
:current-step="currentStep"
|
||||
:total-steps="totalSteps"
|
||||
@continue="handleNext"
|
||||
>
|
||||
{{ currentStepContent }}
|
||||
</GuideStepsItem>
|
||||
</template>
|
||||
</GuideDragon>
|
||||
</div>
|
||||
@@ -40,6 +49,7 @@
|
||||
import { ref, computed, useSlots, onMounted, onUnmounted, reactive } from 'vue'
|
||||
import SpotlightOverlay from './SpotlightOverlay.vue'
|
||||
import GuideDragon from './GuideDragon.vue'
|
||||
import GuideStepsItem from './GuideStepsItem.vue'
|
||||
|
||||
interface GuideStep {
|
||||
id: string
|
||||
@@ -63,6 +73,8 @@ interface Props {
|
||||
highlightPadding?: number
|
||||
/** 高亮圆角，默认16 */
|
||||
highlightRadius?: number
|
||||
/** 垂直偏移（仅Y轴），支持 number(px) 或 '10%'/'120px' */
|
||||
positionOffsetY?: number | string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
@@ -78,7 +90,8 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
autoPlayInterval: 0,
|
||||
highlightSelector: null,
|
||||
highlightPadding: 8,
|
||||
highlightRadius: 16
|
||||
highlightRadius: 16,
|
||||
positionOffsetY: '50%'
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emits>()
|
||||
@@ -138,7 +151,7 @@ const currentStepContent = computed(() => {
|
||||
if (!step) return ''
|
||||
|
||||
if (!step.title) {
|
||||
return `<p>${step.content}</p>`
|
||||
return `${step.content}`
|
||||
}
|
||||
|
||||
return `
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<span class="guide-steps-item">
|
||||
<slot />
|
||||
<ImgButton
|
||||
v-if="!isLastStep"
|
||||
v-if="currentStep !== totalSteps"
|
||||
:image="IMAGE_PATHS.BUTTONS.CONTINUE"
|
||||
class="continue-button"
|
||||
@click="handleContinue"
|
||||
|
||||
@@ -79,7 +79,7 @@ const borderRadius = props.borderRadius
|
||||
.spotlight-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
pointer-events: auto;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,8 @@ export interface GuideDragonProps {
|
||||
showSkip?: boolean
|
||||
currentStep?: number
|
||||
totalSteps?: number
|
||||
/** 垂直偏移（仅Y轴），支持 number(px) 或 '10%'/'120px' */
|
||||
positionOffsetY?: number | string
|
||||
}
|
||||
|
||||
// 引导步骤组件Props类型
|
||||
@@ -19,6 +21,8 @@ export interface GuideStepsProps {
|
||||
autoStart?: boolean
|
||||
keyboardNavigation?: boolean
|
||||
autoPlayInterval?: number
|
||||
/** 垂直偏移（仅Y轴），支持 number(px) 或 '10%'/'120px' */
|
||||
positionOffsetY?: number | string
|
||||
}
|
||||
|
||||
// 引导组件事件类型
|
||||
|
||||
+8
-1
@@ -44,7 +44,14 @@ const routes: RouteRecordRaw[] = [
|
||||
title: '发现与记录'
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
path: '/video',
|
||||
name: 'Video',
|
||||
component: () => import('@/views/vlog/video/index.vue'),
|
||||
meta: {
|
||||
title: '视频'
|
||||
}
|
||||
},
|
||||
//中期拍摄
|
||||
{
|
||||
path: '/midterm',
|
||||
|
||||
@@ -112,6 +112,7 @@ export const IMAGE_PATHS = {
|
||||
START: 'home/按钮/开始',
|
||||
COMPLETE: 'home/按钮/完成',
|
||||
CANCEL: 'home/按钮/取消',
|
||||
CLOSE: 'home/按钮/关闭',
|
||||
//继续 continue
|
||||
CONTINUE: 'components/continue',
|
||||
//跳过 escape
|
||||
@@ -123,6 +124,13 @@ export const IMAGE_PATHS = {
|
||||
//开始拍摄
|
||||
START_FILMING: 'home/guide/action-btn'
|
||||
},
|
||||
|
||||
//components
|
||||
COMPONENTS: {
|
||||
CLOSE: 'components/close',
|
||||
//返回
|
||||
BACK: 'components/back'
|
||||
},
|
||||
// ai工具组镜头按钮
|
||||
AI_TOOLS_BUTTONS: {
|
||||
BACK: 'home/ai工具组镜头/返回',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import { ModuleSwitcher } from './components/ModuleSwitcher'
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
@@ -121,6 +121,11 @@ onMounted(() => {
|
||||
class="absolute top-60 right-1/2 translate-x-1/2"
|
||||
@click="handleCloseGuide"
|
||||
/>
|
||||
<img
|
||||
class="absolute bottom-0 left-1/2 -translate-x-1/2"
|
||||
:src="getStaticImage('home/新手导航')"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- <GuideSteps @complete="handleComplete" @skip="handleSkip">
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<img src="@/assets/images/equipment/选中按钮.png" alt="" />
|
||||
<img src="@/assets/images/equipment/手机-亮.png" alt="" />
|
||||
</span>
|
||||
<span>手机支架</span>
|
||||
</div>
|
||||
<!-- 设备准备按钮 -->
|
||||
<div class="equipment-bt">
|
||||
@@ -21,14 +22,58 @@
|
||||
:class="hiddenbar ? 'equipment-unfold1' : 'equipment-unfold2'"
|
||||
@click="hiddenbarclick()"
|
||||
>
|
||||
<img src="@/assets/images/equipment/按钮-展开.png" alt="" />
|
||||
<img
|
||||
:src="
|
||||
hiddenbar
|
||||
? '/src/assets/images/equipment/按钮-展开.png'
|
||||
: '/src/assets/images/equipment/按钮-收缩.png'
|
||||
"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equipment-layout">
|
||||
<div class="equipment-home">
|
||||
<div
|
||||
class="equipment-leftbutton"
|
||||
@click="prevPhone"
|
||||
:style="{ visibility: currentIndex > 0 ? 'visible' : 'hidden' }"
|
||||
>
|
||||
<img src="@/assets/images/equipment/按钮-左滑.png" alt="" />
|
||||
</div>
|
||||
<div class="equipment-phoneImg">
|
||||
<img :src="phoneList[currentIndex].phoneImg" alt="" />
|
||||
</div>
|
||||
<div
|
||||
class="equipment-rightbutton"
|
||||
@click="nextPhone"
|
||||
:style="{ visibility: currentIndex < phoneList.length - 1 ? 'visible' : 'hidden' }"
|
||||
>
|
||||
<img src="@/assets/images/equipment/按钮-右滑.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="equipment-purpose">
|
||||
<div class="plate">
|
||||
<img src="@/assets/images/equipment/浮空屏.png" alt="" />
|
||||
</div>
|
||||
<div class="title">
|
||||
<img src="@/assets/images/equipment/标题-安卓小米.png" alt="" />
|
||||
<!-- <img src="@/assets/images/equipment/标题-苹果.png" alt=""> -->
|
||||
</div>
|
||||
<div class="text">
|
||||
<img src="@/assets/images/equipment/内容-安卓小米.png" alt="" />
|
||||
<!-- <img src="@/assets/images/equipment/内容-苹果.png" alt=""> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 引导步骤 -->
|
||||
<GuideSteps
|
||||
@complete="handleComplete"
|
||||
@skip="handleSkip"
|
||||
:keyboard-navigation="true"
|
||||
position-offset-y="85%"
|
||||
:steps="steps"
|
||||
:highlight-selector="currentHighlight"
|
||||
:highlight-padding="12"
|
||||
:highlight-radius="20"
|
||||
@step-change="handleStepChange"
|
||||
>
|
||||
<GuideStepsItem>
|
||||
<img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
|
||||
@@ -41,33 +86,73 @@
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
import { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
||||
|
||||
import { ref } from 'vue'
|
||||
const hiddenbar = ref()
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const steps = [
|
||||
{ id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
|
||||
{ id: 'step2', content: '这是主要内容区域的边框' }
|
||||
]
|
||||
const stepIndex = ref(0)
|
||||
const hiddenbar = ref(false)
|
||||
const currentIndex = ref(0) // 当前显示的图片索引
|
||||
|
||||
const phoneList = ref([
|
||||
{ phoneImg: '/src/assets/images/equipment/设备-手机1.png' },
|
||||
{ phoneImg: '/src/assets/images/equipment/设备-手机2.png' }
|
||||
])
|
||||
|
||||
const hiddenbarclick = () => {
|
||||
hiddenbar.value = !hiddenbar.value
|
||||
}
|
||||
|
||||
const handleComplete = () => {
|
||||
console.log('引导完成')
|
||||
// 下一张图片
|
||||
const nextPhone = () => {
|
||||
if (currentIndex.value < phoneList.value.length - 1) {
|
||||
currentIndex.value++
|
||||
}
|
||||
}
|
||||
|
||||
const handleSkip = () => {
|
||||
console.log('跳过引导')
|
||||
// 上一张图片
|
||||
const prevPhone = () => {
|
||||
if (currentIndex.value > 0) {
|
||||
currentIndex.value--
|
||||
}
|
||||
}
|
||||
|
||||
interface SimpleStep {
|
||||
id: string
|
||||
content: string
|
||||
}
|
||||
|
||||
const handleStepChange = (_step: SimpleStep | null, index: number) => {
|
||||
stepIndex.value = index
|
||||
}
|
||||
|
||||
const currentHighlight = computed(() =>
|
||||
stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
<style lang="less">
|
||||
.equipment-index {
|
||||
// display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.equipment-bg {
|
||||
display: flex;
|
||||
// display: flex;
|
||||
}
|
||||
|
||||
.equipment-layout {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.equipment-bar {
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
|
||||
.equipment-bt {
|
||||
position: absolute;
|
||||
@@ -83,29 +168,27 @@ const handleSkip = () => {
|
||||
|
||||
.equipment-unfold1 {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
right: -110px;
|
||||
top: 490px;
|
||||
left: -41px;
|
||||
width: 150px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
/* 确保图片按比例缩放 */
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-unfold2 {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
right: -69px;
|
||||
top: 490px;
|
||||
left: 268px;
|
||||
width: 150px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
/* 确保图片按比例缩放 */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -119,5 +202,88 @@ const handleSkip = () => {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.guide-ui {
|
||||
top: 80% !important;
|
||||
}
|
||||
|
||||
.dragon-character {
|
||||
top: 80% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-home {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.equipment-leftbutton {
|
||||
position: absolute;
|
||||
top: 511px;
|
||||
left: 350px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.equipment-phoneImg {
|
||||
position: absolute;
|
||||
top: 313px;
|
||||
left: 500px;
|
||||
width: 446px;
|
||||
height: 484px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-rightbutton {
|
||||
position: absolute;
|
||||
top: 511px;
|
||||
right: 770px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.equipment-purpose {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 1200px;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
top: 74px;
|
||||
left: 1292px;
|
||||
width: 364px;
|
||||
}
|
||||
|
||||
.plate {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 1200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -25,6 +25,11 @@ const handleWorkClick = () => {
|
||||
// 处理任务取景按钮点击逻辑
|
||||
router.push({ name: 'Work' })
|
||||
}
|
||||
|
||||
const handleClick = () => {
|
||||
// 处理任务取景按钮点击逻辑
|
||||
router.push({ name: 'equipment' })
|
||||
}
|
||||
const highlightShow = ref(true)
|
||||
</script>
|
||||
|
||||
@@ -59,7 +64,10 @@ const highlightShow = ref(true)
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.Midterm" />
|
||||
</div>
|
||||
<!-- 进度百分比 -->
|
||||
<div v-if="highlightShow" class="absolute left-1/2 top-[12%] -translate-x-1/2">
|
||||
<div
|
||||
v-if="highlightShow"
|
||||
class="absolute left-1/2 top-[12%] -translate-x-1/2 pointer-events-none"
|
||||
>
|
||||
<div class="flex">
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.Progress" />
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.Four" />
|
||||
@@ -73,7 +81,11 @@ const highlightShow = ref(true)
|
||||
class="absolute left-[21%] top-[9%] -translate-x-1/2"
|
||||
style="z-index: 998"
|
||||
>
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.MidtermEquipment" class="ml-[60px]" />
|
||||
<ImgButton
|
||||
:image="IMAGE_PATHS.VLOG.MidtermEquipment"
|
||||
@click="handleClick"
|
||||
class="ml-[60px]"
|
||||
/>
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.MidtermFraming" class="ml-[40px]" />
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.MidtermShoot" class="ml-[20px]" />
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,6 @@ import { ProgressBar } from '@/components'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { GuideSteps } from '@/components/Guide'
|
||||
type WorkTab = 'vlog' | 'case' | 'profession' | 'idea'
|
||||
const steps = [
|
||||
{
|
||||
id: 'step1',
|
||||
@@ -115,7 +114,11 @@ const highlightShow = ref(true)
|
||||
:highlight-padding="12"
|
||||
:highlight-radius="20"
|
||||
@step-change="handleStepChangeGui"
|
||||
/>
|
||||
>
|
||||
<GuideStepsItem>
|
||||
<img src="@/assets/images/midterm/前期准备引导1.png" alt="" />
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
</div>
|
||||
<div
|
||||
v-if="highlightShow"
|
||||
@@ -130,6 +133,7 @@ const highlightShow = ref(true)
|
||||
.guide-ui {
|
||||
top: 80% !important;
|
||||
}
|
||||
|
||||
.dragon-character {
|
||||
top: 80% !important;
|
||||
}
|
||||
|
||||
@@ -2,11 +2,12 @@
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
|
||||
import { ref } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { ProgressBar } from '@/components'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const currentStep = ref(0)
|
||||
|
||||
@@ -25,6 +26,12 @@ const handleWorkClick = () => {
|
||||
// 处理任务取景按钮点击逻辑
|
||||
router.push({ name: 'Work' })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (route.query.key === 'video') {
|
||||
currentStep.value = 1
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -51,7 +58,10 @@ const handleWorkClick = () => {
|
||||
class="absolute left-24 top-24"
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
|
||||
>
|
||||
<ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" @click="handleWorkClick" />
|
||||
<ImgButton
|
||||
:image="currentStep === 1 ? IMAGE_PATHS.VLOG.TASK_BTN_OK : IMAGE_PATHS.VLOG.TASK_BTN"
|
||||
@click="handleWorkClick"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 引导任务 -->
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, nextTick, onMounted, ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import ImgButton from '@/components/Button/ImgButton.vue'
|
||||
import { GuideSteps } from '@/components/Guide'
|
||||
import { getStaticImage, IMAGE_PATHS } from '@/utils'
|
||||
import second from '/video/Vlog模块_任务取景框_专业剖析_基础景别运用.mp4'
|
||||
import third from '/video/Vlog模块_任务取景框_专业剖析_画面构图.mp4'
|
||||
import fourth from '/video/Vlog模块_任务取景框_专业剖析_脚本策划.mp4'
|
||||
import five from '/video/Vlog模块_任务取景框_专业剖析_动态事件跟拍与抓拍.mp4'
|
||||
import six from '/video/Vlog模块_任务取景框_专业剖析_素材导入、剪辑拼接.mp4'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const videoRef = ref()
|
||||
const status = ref(false)
|
||||
|
||||
//引导步骤
|
||||
const steps = ref([
|
||||
{
|
||||
id: 'step1',
|
||||
content: '试着用这些方法记录身边的小事，你会发现，原来平凡的日子里有这么多值得捕捉的瞬间。'
|
||||
}
|
||||
])
|
||||
|
||||
// 视频列表
|
||||
const videoList = [second, third, fourth, five, six]
|
||||
const currentVideoIndex = ref(0)
|
||||
|
||||
//按顺序播放
|
||||
const currentVideo = computed(() => videoList[currentVideoIndex.value])
|
||||
const handleVideoChange = () => {
|
||||
if (currentVideoIndex.value < videoList.length - 1) {
|
||||
currentVideoIndex.value++
|
||||
} else {
|
||||
status.value = true
|
||||
steps.value = [
|
||||
{
|
||||
id: 'step1',
|
||||
content: '已完成专业剖析,即可查看脚本'
|
||||
}
|
||||
]
|
||||
return
|
||||
}
|
||||
nextTick(() => {
|
||||
if (!videoRef.value) return
|
||||
videoRef.value.muted = false
|
||||
videoRef.value.volume = 1
|
||||
videoRef.value.play()
|
||||
})
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
const image = computed(() => route.query.image as string)
|
||||
const key = computed(() => route.query.key as string)
|
||||
|
||||
const handleClick = () => {
|
||||
if (!videoRef.value) return
|
||||
videoRef.value.muted = false
|
||||
videoRef.value.volume = 1
|
||||
}
|
||||
|
||||
const handlePlay = () => {
|
||||
if (!videoRef.value) return
|
||||
videoRef.value.muted = false
|
||||
videoRef.value.volume = 1
|
||||
}
|
||||
|
||||
const handleComplete = () => {
|
||||
if (key.value === 'profession') {
|
||||
router.push({
|
||||
name: 'Work',
|
||||
query: {
|
||||
key: 'work'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
router.push({
|
||||
name: 'midterm',
|
||||
query: {
|
||||
key: 'midterm'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (key.value === 'idea') {
|
||||
status.value = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-full relative bg-white/10" @click="handleClick">
|
||||
<ImgButton class="absolute left-4 top-4 z-10" :image="image"></ImgButton>
|
||||
<ImgButton
|
||||
class="absolute right-0 top-0 z-10"
|
||||
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
||||
@click="handleClose"
|
||||
/>
|
||||
<div v-if="key === 'vlog'" :src="image">
|
||||
<img :src="getStaticImage('work/vlog背景全屏待定')" alt="" />
|
||||
</div>
|
||||
<video
|
||||
ref="videoRef"
|
||||
v-else-if="key === 'case'"
|
||||
src="/video/案例赏析-美食小确幸：桂花酒酿小圆子.mp4"
|
||||
controls
|
||||
@play="handlePlay"
|
||||
></video>
|
||||
<!-- 专业剖析 -->
|
||||
<video
|
||||
ref="videoRef"
|
||||
v-else-if="key === 'profession'"
|
||||
:src="currentVideo"
|
||||
controls
|
||||
@play="handlePlay"
|
||||
@ended="handleVideoChange"
|
||||
></video>
|
||||
<div v-else-if="key === 'idea'" :src="image">
|
||||
<img :src="getStaticImage('work/思路提点全屏')" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 引导与高亮 -->
|
||||
<GuideSteps v-if="status" :steps="steps" position-offset-y="85%" @complete="handleComplete" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* 核心：保持视频比例，多余部分被裁剪 */
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
@@ -44,4 +44,8 @@ const items = [
|
||||
]
|
||||
|
||||
const onChange = (val: string) => emit('change', val as WorkTab)
|
||||
|
||||
defineExpose({
|
||||
items
|
||||
})
|
||||
</script>
|
||||
@@ -1,20 +1,61 @@
|
||||
<script lang="tsx" setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { getBackgroundImage, IMAGE_PATHS, getStaticImage } from '@/utils'
|
||||
import { ImgButton } from '@/components/Button'
|
||||
import WorkSideSwitcher from './components/WorkSideSwitcher.vue'
|
||||
import { GuideSteps } from '@/components/Guide'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
type WorkTab = 'vlog' | 'case' | 'profession' | 'idea'
|
||||
|
||||
const selected = ref<WorkTab>('vlog')
|
||||
const stepIndex = ref(0)
|
||||
const workSideSwitcherRef = ref<InstanceType<typeof WorkSideSwitcher>>()
|
||||
|
||||
const status = ref(false)
|
||||
|
||||
//引导步骤
|
||||
const steps = [
|
||||
{ id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
|
||||
{ id: 'step2', content: '这是主要内容区域的边框' }
|
||||
{
|
||||
id: 'step1',
|
||||
content:
|
||||
'现在我们要一起走进 Vlog 的世界。简单说，Vlog 就是用视频记录生活的一种方式 —— 它像一本会动的日记，能把我们身边的小事、瞬间的心情，通过镜头变得生动又具体。'
|
||||
},
|
||||
{ id: 'step2', content: '接下来，我们就通过一个具体的案例，看看 Vlog 是怎么“捕捉美好” 的吧。' }
|
||||
]
|
||||
|
||||
//切换图片
|
||||
const sideSwitcherItems = ref([
|
||||
{
|
||||
key: 'vlog',
|
||||
description: '记录身边的美好',
|
||||
image: 'work/vlog初识框'
|
||||
},
|
||||
{
|
||||
key: 'case',
|
||||
description: '美食小确幸:桂花酒酿小圆子',
|
||||
image: 'work/案例背景待定'
|
||||
},
|
||||
{
|
||||
key: 'profession',
|
||||
description: '美食小确幸:桂花酒酿小圆子',
|
||||
image: 'work/案例背景待定'
|
||||
},
|
||||
{
|
||||
key: 'idea',
|
||||
description: '美食小确幸:桂花酒酿小圆子',
|
||||
image: 'work/思路提点小屏'
|
||||
}
|
||||
])
|
||||
|
||||
//当前选中的item
|
||||
const currentItem = computed(() => {
|
||||
return sideSwitcherItems.value.find(item => item.key === selected.value)
|
||||
})
|
||||
|
||||
const currentHighlight = computed(() =>
|
||||
stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
|
||||
)
|
||||
@@ -26,6 +67,38 @@ interface SimpleStep {
|
||||
const handleStepChange = (_step: SimpleStep | null, index: number) => {
|
||||
stepIndex.value = index
|
||||
}
|
||||
|
||||
const handleSideSwitcherChange = (value: WorkTab) => {
|
||||
if (selected.value === value) return
|
||||
}
|
||||
|
||||
const handleImageClick = () => {
|
||||
router.push({
|
||||
name: 'Video',
|
||||
query: {
|
||||
image:
|
||||
workSideSwitcherRef.value?.items.find(item => item.key === selected.value)?.activeImage ||
|
||||
'',
|
||||
key: selected.value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
//状态是否完成前置
|
||||
const isComplete = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
if (route.query.key === 'work') {
|
||||
selected.value = 'profession'
|
||||
isComplete.value = true
|
||||
} else {
|
||||
status.value = true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -36,6 +109,13 @@ const handleStepChange = (_step: SimpleStep | null, index: number) => {
|
||||
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.BG) }"
|
||||
></div>
|
||||
|
||||
<!-- 关闭 -->
|
||||
<ImgButton
|
||||
class="absolute right-0 top-0"
|
||||
:image="IMAGE_PATHS.COMPONENTS.CLOSE"
|
||||
@click="handleClose"
|
||||
/>
|
||||
|
||||
<!-- border图片 -->
|
||||
<div
|
||||
class="work-border absolute top-[140px] left-24 inset-0 bg-cover bg-center bg-no-repeat z-10 w-[1360px] h-[800px] p-10"
|
||||
@@ -48,31 +128,42 @@ const handleStepChange = (_step: SimpleStep | null, index: number) => {
|
||||
<span
|
||||
class="mt-24 text-white font-bold text-6xl [text-shadow:0_2px_4px_rgba(0,0,0,0.2),0_0_6px_rgba(0,207,255,0.9),0_0_14px_rgba(0,207,255,0.7)]"
|
||||
>
|
||||
记录身边的美好</span
|
||||
{{ currentItem?.description }}</span
|
||||
>
|
||||
</div>
|
||||
<img class="rounded-[62px]" src="@/assets/images/work/image1.png" alt="" />
|
||||
<img
|
||||
@click="handleImageClick"
|
||||
class="rounded-[62px] cursor-pointer"
|
||||
:src="getStaticImage(currentItem?.image || '')"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 左侧选项切换 -->
|
||||
<div class="absolute right-4 top-32 z-20">
|
||||
<WorkSideSwitcher
|
||||
ref="workSideSwitcherRef"
|
||||
v-model="selected"
|
||||
@change="() => {}"
|
||||
@change="handleSideSwitcherChange"
|
||||
:item-class="'w-[462px] h-[142px] '"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 任务取景按钮 -->
|
||||
<ImgButton class="absolute right-14 bottom-10" :image="IMAGE_PATHS.WORK.TASK_BTN" />
|
||||
<ImgButton
|
||||
class="absolute right-14 bottom-10"
|
||||
:image="isComplete ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
|
||||
/>
|
||||
|
||||
<!-- 引导与高亮 -->
|
||||
<GuideSteps
|
||||
v-if="status"
|
||||
:steps="steps"
|
||||
:highlight-selector="currentHighlight"
|
||||
:highlight-padding="12"
|
||||
:highlight-radius="20"
|
||||
@step-change="handleStepChange"
|
||||
position-offset-y="85%"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
Reference in new issue
Block a user