forked from zhongyidian/super_video
183 lines
6.2 KiB
TypeScript
183 lines
6.2 KiB
TypeScript
// 图片资源映射 - 使用静态导入确保构建时包含所有图片
|
|
const imageModules = import.meta.glob('../assets/images/**/*.{png,jpg,jpeg,gif,svg,webp}', {
|
|
eager: true
|
|
})
|
|
|
|
//访问静态图片 - 使用静态导入确保构建后路径正确
|
|
export const getStaticImage = (path: string) => {
|
|
try {
|
|
// 确保路径以正确的格式结尾
|
|
const imagePath =
|
|
path.endsWith('.png') ||
|
|
path.endsWith('.jpg') ||
|
|
path.endsWith('.jpeg') ||
|
|
path.endsWith('.gif') ||
|
|
path.endsWith('.svg') ||
|
|
path.endsWith('.webp')
|
|
? `../assets/images/${path}`
|
|
: `../assets/images/${path}.png`
|
|
|
|
// 使用静态导入的模块
|
|
const module = imageModules[imagePath]
|
|
if (module && typeof module === 'object' && 'default' in module) {
|
|
return module.default as string
|
|
}
|
|
|
|
// 回退到URL方式
|
|
return new URL(imagePath, import.meta.url).href
|
|
} catch (error) {
|
|
console.error('Failed to load image:', path, error)
|
|
return ''
|
|
}
|
|
}
|
|
|
|
// 获取背景图片的专用函数
|
|
export const getBackgroundImage = (path: string) => {
|
|
const imageUrl = getStaticImage(path)
|
|
return imageUrl ? `url(${imageUrl})` : 'none'
|
|
}
|
|
|
|
// 预定义的图片路径常量
|
|
export const IMAGE_PATHS = {
|
|
HOME_BG: 'home/guide/bg',
|
|
ACTION_BG: 'home/action/bg',
|
|
GUIDE_DRAGON_BG: 'components/dragon-bg',
|
|
GUIDE_PERSON: 'components/person',
|
|
AI_TOOLS: 'home/ai工具组镜头',
|
|
SKILL_TREE: 'home/技能树-按钮',
|
|
|
|
//action
|
|
ACTION: {
|
|
FOOTER_BTN: 'home/action/footer-btn',
|
|
FOOTER_BG: 'home/action/footer-bg',
|
|
DOWN: 'home/action/down',
|
|
SKILLS_BTN: 'home/action/skills-btn',
|
|
// 模块按钮
|
|
MODULE_BTN1: 'home/action/btn1',
|
|
MODULE_BTN2: 'home/action/btn2',
|
|
MODULE_BTN3: 'home/action/btn3',
|
|
SELECTED_BTN1: 'home/action/selected-btn1',
|
|
SELECTED_BTN2: 'home/action/selected-btn2',
|
|
SELECTED_BTN3: 'home/action/selected-btn3',
|
|
VIDEO1: 'home/action/video1',
|
|
VIDEO2: 'home/action/video2',
|
|
VIDEO3: 'home/action/video3'
|
|
},
|
|
// vlog
|
|
VLOG: {
|
|
BG: 'vlog/bg',
|
|
BG_CENTER: 'vlog/bg-center',
|
|
TITLE: 'vlog/title',
|
|
PREPARE: 'vlog/制作变焦镜/入口节点/前期准备底板',
|
|
Midterm: 'vlog/制作变焦镜/入口节点/中期拍摄底板',
|
|
MidtermEquipment: 'vlog/制作变焦镜/入口节点/按钮-设备准备',
|
|
MidtermFraming: 'vlog/制作变焦镜/入口节点/按钮-实地取景',
|
|
MidtermShoot: 'vlog/制作变焦镜/入口节点/按钮-现场拍摄',
|
|
Scripting: 'vlog/制作变焦镜/入口节点/按钮选中-脚本撰写',
|
|
SelectArrow: 'vlog/制作变焦镜/入口节点/选中箭头',
|
|
Progress: 'vlog/进度数字/进度',
|
|
Zero: 'vlog/进度数字/0',
|
|
One: 'vlog/进度数字/1',
|
|
Two: 'vlog/进度数字/2',
|
|
Three: 'vlog/进度数字/3',
|
|
Four: 'vlog/进度数字/4',
|
|
Five: 'vlog/进度数字/5',
|
|
Six: 'vlog/进度数字/6',
|
|
Seven: 'vlog/进度数字/7',
|
|
Eight: 'vlog/进度数字/8',
|
|
Nine: 'vlog/进度数字/9',
|
|
Percentage: 'vlog/进度数字/percentage',
|
|
TASK_CAMERA: 'vlog/task-camera',
|
|
TASK_BTN_OK: 'vlog/task-btn-ok',
|
|
TASK_BTN: 'vlog/task-btn',
|
|
TASK_PERSON: 'vlog/person'
|
|
},
|
|
//Work
|
|
WORK: {
|
|
BG: 'work/bg',
|
|
BORDER: 'work/border',
|
|
BG_CENTER: 'work/bg-center',
|
|
TITLE: 'work/title',
|
|
IMAGE: 'work/image1',
|
|
TASK_CAMERA: 'work/task-camera',
|
|
TASK_BTN_OK: 'work/task-btn-ok',
|
|
TASK_BTN: 'work/task-btn',
|
|
TASK_PERSON: 'work/person'
|
|
},
|
|
|
|
//按钮
|
|
BUTTONS: {
|
|
BACK: 'home/按钮/返回',
|
|
NEXT: 'home/按钮/下一步',
|
|
START: 'home/按钮/开始',
|
|
COMPLETE: 'home/按钮/完成',
|
|
CANCEL: 'home/按钮/取消',
|
|
//继续 continue
|
|
CONTINUE: 'components/continue',
|
|
//跳过 escape
|
|
ESCAPE: 'components/escape',
|
|
//课程框架
|
|
COURSE_FRAME: 'home/guide/kc-btn',
|
|
//操作指引
|
|
OPERATE_GUIDE: 'home/guide/cz-btn',
|
|
//开始拍摄
|
|
START_FILMING: 'home/guide/action-btn'
|
|
},
|
|
// ai工具组镜头按钮
|
|
AI_TOOLS_BUTTONS: {
|
|
BACK: 'home/ai工具组镜头/返回',
|
|
NEXT: 'home/ai工具组镜头/下一步',
|
|
START: 'home/ai工具组镜头/开始',
|
|
COMPLETE: 'home/ai工具组镜头/完成',
|
|
CANCEL: 'home/ai工具组镜头/取消'
|
|
},
|
|
// 新手导航相关
|
|
NEWBIE_GUIDE: {
|
|
THREE_ELEMENTS: 'home/新手导航/三大基础要素',
|
|
UP_BUTTON: 'home/新手导航/上拉按钮',
|
|
DOWN_BUTTON: 'home/新手导航/下拉按钮',
|
|
LIGHT: 'home/新手导航/光',
|
|
COMPLETED: 'home/新手导航/完成新手导航后开放',
|
|
MASK: 'home/新手导航/新手导航下层遮罩',
|
|
UNSELECTED: 'home/新手导航/新手导航未选中',
|
|
BAR_BG: 'home/新手导航/新手导航栏-底板',
|
|
SELECTED: 'home/新手导航/新手导航选中高亮',
|
|
PANEL: 'home/新手导航/新手导航面板',
|
|
COMPOSITION: 'home/新手导航/构图',
|
|
NODE_COMPLETED: 'home/新手导航/节点-已完成',
|
|
NODE_CURRENT: 'home/新手导航/节点-当前节点',
|
|
NODE_LOCKED: 'home/新手导航/节点-未解锁',
|
|
CAMERA_MOVEMENT: 'home/新手导航/运镜',
|
|
PROGRESS_LIGHT: 'home/新手导航/进度条-亮',
|
|
PROGRESS_DARK: 'home/新手导航/进度条-暗'
|
|
},
|
|
// 模块区域相关
|
|
MODULE_AREA: {
|
|
CAMERA: 'home/模块区域/摄像头',
|
|
DISPLAY: 'home/模块区域/显示屏',
|
|
CAMERA_UNSELECTED: 'home/模块区域/未选中模块时摄像头',
|
|
NORMAL_BG: 'home/模块区域/正常模式底图',
|
|
SELECTED_VLOG: 'home/模块区域/选中区域-vlog',
|
|
SELECTED_THIRD: 'home/模块区域/选中区域-第三模块',
|
|
SELECTED_SECOND: 'home/模块区域/选中区域-第二模块',
|
|
POPUP_VLOG: 'home/模块区域/选中弹出-vlog'
|
|
},
|
|
// 节点数字
|
|
NODE_NUMBERS: Array.from({ length: 10 }, (_, i) => `home/节点数字/${i}`),
|
|
|
|
// 进度条组件相关
|
|
PROGRESS_BAR: {
|
|
TITLE: 'components/制作变焦镜-我的志愿者手记',
|
|
UNLOCKED: 'components/制作变焦镜-未解锁',
|
|
COMPLETE_BUTTON: 'components/进入-实战操作',
|
|
COMPLETE_BUTTON_DISABLED: 'components/完成前置-即可开启实战',
|
|
BACKGROUND: 'components/制作变焦镜-底板'
|
|
},
|
|
|
|
// 设备准备
|
|
EQUIPMENT: {
|
|
BG: 'equipment/设备准备-背景',
|
|
SELECT_THE_BUTTON: 'equipment/按钮选中-设备准备'
|
|
}
|
|
} as const
|