From 23809a9191f390ea3e168a9b7721206e84b14508 Mon Sep 17 00:00:00 2001 From: gaofeihang <2635294817@qq.com> Date: Wed, 17 Sep 2025 10:51:36 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E8=84=9A=E6=9C=AC=E6=92=B0?= =?UTF-8?q?=E5=86=99=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/prepare/index.vue | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/views/prepare/index.vue b/src/views/prepare/index.vue index 4de2f26..d45805b 100644 --- a/src/views/prepare/index.vue +++ b/src/views/prepare/index.vue @@ -24,7 +24,7 @@ const currentHighlight = computed(() => const router = useRouter() -const currentStep = ref(0) +const currentStep = ref(1) const handleComplete = () => { console.log('完成前置条件') @@ -48,6 +48,7 @@ interface SimpleStep { const handleStepChangeGui = (_step: SimpleStep | null, index: number) => { stepIndex.value = index } +const highlightShow = ref(true) 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 @@ - + + diff --git a/src/router/index.ts b/src/router/index.ts index 356ca48..7df54f2 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -76,6 +76,14 @@ const routes: RouteRecordRaw[] = [ meta: { title: '脚本准备' } + }, + { + path: '/preparedetail', + name: 'Preparedetail', + component: () => import('@/views/preparedetail/index.vue'), + meta: { + title: '脚本准备详情' + } } ] diff --git a/src/views/preparedetail/index.vue b/src/views/preparedetail/index.vue new file mode 100644 index 0000000..d618c37 --- /dev/null +++ b/src/views/preparedetail/index.vue @@ -0,0 +1,49 @@ + + + + +