From f8a997aad4522cfdc6697044228cc21db2956fcb Mon Sep 17 00:00:00 2001 From: zhongyingmin Date: Wed, 17 Sep 2025 23:44:30 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=8A=80=E8=83=BD?= =?UTF-8?q?=E6=A0=91=E8=B7=AF=E7=94=B1=EF=BC=8C=E4=BC=98=E5=8C=96=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=BC=93=E5=AD=98=E5=92=8C=E5=9B=BE=E7=89=87=E9=A2=84?= =?UTF-8?q?=E8=A7=88=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 10 +- src/assets/images/skill/右滑.png | Bin 0 -> 8578 bytes src/assets/images/skill/居中构图.png | Bin 0 -> 22105 bytes src/assets/images/skill/左滑.png | Bin 0 -> 8427 bytes src/assets/images/skill/技能树-亮.png | Bin 0 -> 325516 bytes src/assets/images/skill/技能树-灰.png | Bin 0 -> 110393 bytes src/assets/images/skill/技能树背景.png | Bin 0 -> 1642339 bytes src/assets/images/skill/景别.png | Bin 0 -> 17164 bytes src/assets/images/skill/画面构图未选中.png | Bin 0 -> 16352 bytes src/assets/images/skill/画面构图选中.png | Bin 0 -> 26819 bytes src/assets/images/work/桂花酒酿小圆子.png | Bin 0 -> 1284570 bytes src/components/ImagePreview/ImagePreview.vue | 326 +++++++++++++++++++ src/components/ImagePreview/index.ts | 1 + src/components/ImagePreview/service.ts | 32 ++ src/components/index.ts | 3 + src/router/index.ts | 17 + src/views/home/action.vue | 23 +- src/views/skill/index.vue | 273 ++++++++++++++++ src/views/skill/video.vue | 43 +++ src/views/vlog/index.vue | 11 + src/views/vlog/video/index.vue | 2 +- src/views/vlog/work/index.vue | 25 +- vite.config.ts | 3 + 23 files changed, 751 insertions(+), 18 deletions(-) create mode 100644 src/assets/images/skill/右滑.png create mode 100644 src/assets/images/skill/居中构图.png create mode 100644 src/assets/images/skill/左滑.png create mode 100644 src/assets/images/skill/技能树-亮.png create mode 100644 src/assets/images/skill/技能树-灰.png create mode 100644 src/assets/images/skill/技能树背景.png create mode 100644 src/assets/images/skill/景别.png create mode 100644 src/assets/images/skill/画面构图未选中.png create mode 100644 src/assets/images/skill/画面构图选中.png create mode 100644 src/assets/images/work/桂花酒酿小圆子.png create mode 100644 src/components/ImagePreview/ImagePreview.vue create mode 100644 src/components/ImagePreview/index.ts create mode 100644 src/components/ImagePreview/service.ts create mode 100644 src/views/skill/index.vue create mode 100644 src/views/skill/video.vue diff --git a/src/App.vue b/src/App.vue index 89e1b44..06916d3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,13 +1,18 @@ diff --git a/src/components/ImagePreview/index.ts b/src/components/ImagePreview/index.ts new file mode 100644 index 0000000..68573df --- /dev/null +++ b/src/components/ImagePreview/index.ts @@ -0,0 +1 @@ +export { default as ImagePreview } from './service.ts' diff --git a/src/components/ImagePreview/service.ts b/src/components/ImagePreview/service.ts new file mode 100644 index 0000000..4a3bc4e --- /dev/null +++ b/src/components/ImagePreview/service.ts @@ -0,0 +1,32 @@ +import { createVNode, render, reactive } from 'vue' +import ImagePreviewVue from './ImagePreview.vue' + +type PreviewOptions = { + images: string[] + startIndex?: number + maskClosable?: boolean + zIndex?: number + // Supply scale metrics provider compatible with useScale + getScaleMetrics: () => { scale: number; offsetX: number; offsetY: number } +} + +let container: HTMLElement | null = null + +export default function previewImage(options: PreviewOptions) { + if (!container) { + container = document.createElement('div') + document.body.appendChild(container) + } + + const state = reactive({ visible: true }) + + const vnode = createVNode(ImagePreviewVue, { + ...options, + onClose: () => { + state.visible = false + render(null, container!) + } + }) + + render(vnode, container) +} diff --git a/src/components/index.ts b/src/components/index.ts index 3b55f96..8045278 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -13,3 +13,6 @@ export * from './ProgressBar' // 切换组件 export * from './Switcher' + +// 图片预览（函数式） +export * from './ImagePreview' diff --git a/src/router/index.ts b/src/router/index.ts index 356ca48..a66a6de 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -52,6 +52,23 @@ const routes: RouteRecordRaw[] = [ title: '视频' } }, + //技能树 + { + path: '/skill', + name: 'Skill', + component: () => import('@/views/skill/index.vue'), + meta: { + title: '技能树' + } + }, + { + path: '/skill/video', + name: 'SkillVdieo', + component: () => import('@/views/skill/video.vue'), + meta: { + title: '技能树视频' + } + }, //中期拍摄 { path: '/midterm', diff --git a/src/views/home/action.vue b/src/views/home/action.vue index 20a80a6..4d7510b 100644 --- a/src/views/home/action.vue +++ b/src/views/home/action.vue @@ -16,8 +16,8 @@ const isImageLoading = ref(false) // 预加载图片映射 const imageMap = { vlog: IMAGE_PATHS.ACTION.VIDEO1, - film: IMAGE_PATHS.ACTION.VIDEO2, - interview: IMAGE_PATHS.ACTION.VIDEO3 + film: IMAGE_PATHS.ACTION.VIDEO3, + interview: IMAGE_PATHS.ACTION.VIDEO2 } // 预加载所有图片 @@ -63,6 +63,12 @@ const selectedImage = computed(() => { return getBackgroundImage(imageMap[selectedModule.value]) }) +const handleSkill = () => { + router.push({ + name: 'Skill' + }) +} + // 生命周期 onMounted(() => { preloadImages() @@ -90,8 +96,10 @@ onMounted(() => { @click.stop="handleClick" > + @@ -127,16 +135,5 @@ onMounted(() => { alt="" /> - - diff --git a/src/views/skill/index.vue b/src/views/skill/index.vue new file mode 100644 index 0000000..ef11e82 --- /dev/null +++ b/src/views/skill/index.vue @@ -0,0 +1,273 @@ + + + + + diff --git a/src/views/skill/video.vue b/src/views/skill/video.vue new file mode 100644 index 0000000..b097650 --- /dev/null +++ b/src/views/skill/video.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/src/views/vlog/index.vue b/src/views/vlog/index.vue index 23107a5..e0a200f 100644 --- a/src/views/vlog/index.vue +++ b/src/views/vlog/index.vue @@ -27,6 +27,10 @@ const handleWorkClick = () => { router.push({ name: 'Work' }) } +const handleClose = () => { + router.back() +} + onMounted(() => { if (route.query.key === 'video') { currentStep.value = 1 @@ -42,6 +46,13 @@ onMounted(() => { :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }" > + + +
{ steps.value = [ { id: 'step1', - content: '已完成专业剖析,即可查看脚本' + content: '恭喜你，已完成专业剖析的学习，点击【查看脚本】回顾视频脚本吧!' } ] return diff --git a/src/views/vlog/work/index.vue b/src/views/vlog/work/index.vue index fc43349..0e3be86 100644 --- a/src/views/vlog/work/index.vue +++ b/src/views/vlog/work/index.vue @@ -1,10 +1,13 @@ -