Files
FiDA_Front/src/views/home/components/style.ts
2026-02-26 13:04:52 +08:00

60 lines
1.4 KiB
TypeScript

const sofaImages = import.meta.glob('@/assets/images/sofa/*.png', { eager: true })
const deskImages = import.meta.glob('@/assets/images/desk/*.png', { eager: true })
const chairImages = import.meta.glob('@/assets/images/chair/*.png', { eager: true })
const imagesMaps = {
sofa: sofaImages,
desk: deskImages,
chair: chairImages
}
function slugify(str) {
return str
.toLowerCase()
.trim()
.replace(/['"]/g, '') // 去掉撇号
.replace(/[^a-z0-9\s-]+/g, '') // 只保留字母数字空格-
.replace(/\s+/g, '-') // 空格转 -
.replace(/-+/g, '-')
}
/**
* 动态获取风格对应的图片 URL
* @param { 'sofa' | 'desk' | 'chair' } type
* @param { string } style // 必须和 styleList 里的字符串完全一致
* @returns { string | null } 返回可直接用于 <img :src=""> 的 URL
*/
export function getStyleImage(types, style) {
if (!types) types = 'Sofa'
const type = types.toLowerCase()
const map = imagesMaps[type]
const fileName = `${slugify(style)}.png`
const key = `/src/assets/images/${type}/${fileName}`
console.log('types',types, 'style',style, 'fileName',fileName, 'key',key);
if (map[key]) {
return map[key].default
}
return ''
}
const styleList = [
'Venetian Modern',
'Coastal',
'Maximalism',
'Memphis',
'Verdant',
'Century Chrome',
'Modern Revival',
'Transitional',
"Tuscan 2000's",
'Kitsch-core',
'Bauhaus',
'Constructivism',
'Nordic Noir',
'Dopamine',
'Squiggle'
]