Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front

src/views/home/components/Input.vue

@@ -89,11 +89,17 @@
 								<div
 									v-for="item in styleOptions"
 									:key="item.value"
-									class="fida-style-popover-item"
+									class="fida-style-popover-item flex flex-center"
 									:class="{ 'is-selected': tempSelectedValue === item.value }"
 									@click="selectStyle(item.value)"
 								>
-									<span class="fida-option-label">{{ $t(item.label) }}</span>
+									<img
+										:src="getStyleImage(typeValue, item.value)"
+										class="style-bg"
+									/>
+									<span class="fida-option-label flex flex-center">{{
+										item.label
+									}}</span>
 									<img
 										v-show="tempSelectedValue === item.value"
 										src="@/assets/images/checked.png"
@@ -179,6 +185,7 @@
 	import lightIcon from '@/assets/images/light-icon.png'
 	import closeIcon from '@/assets/images/close-icon.png'
 	import { createProject } from '@/api/agent'
+	import { getStyleImage } from './style'
 	// import Tag from './Tag.vue'
 
 	const router = useRouter()
@@ -237,15 +244,21 @@
 	}
 
 	const styleKeys: string[] = [
+		'Venetian Modern',
 		'Coastal',
+		'Maximalism',
+		'Memphis',
 		'Verdant',
-		'Traditional',
-		'CenturyChrome',
-		'ModernRevival',
-		'Tuscan2000s',
+		'Century Chrome',
+		'Modern Revival',
+		'Transitional',
+		"Tuscan 2000's",
+		'Kitsch-core',
 		'Bauhaus',
 		'Constructivism',
-		'NordicNoir'
+		'Nordic Noir',
+		'Dopamine',
+		'Squiggle'
 	]
 
 	const editorRef = ref<HTMLDivElement | null>(null)
@@ -506,7 +519,8 @@
 	const areaOptions = ref<any[]>(areaList)
 	const styleOptions = ref<any[]>(
 		styleKeys.map((key) => ({
-			label: `Input.styles.${key}`,
+			label: key,
+			// label: `Input.styles.${key}`,
 			value: key
 		}))
 	)
@@ -810,14 +824,10 @@
 	.fida-style-popover-item {
 		height: 9.1rem;
 		width: 9.1rem;
-		background-color: #a6a6a6;
-		border-radius: 0.8rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		border-radius: 1.4rem;
 		cursor: pointer;
-		transition: all 0.2s ease;
 		position: relative;
+		border: none;
 		.checked-item-icon {
 			position: absolute;
 			bottom: 0;
@@ -826,16 +836,18 @@
 			width: 2.4rem;
 			height: 2.4rem;
 		}
-	}
-
-	.fida-style-popover-item:hover {
-		background-color: #e8e8e8;
+		.style-bg {
+			width: 100%;
+			height: 100%;
+			border-radius: 1.4rem;
+		}
 	}
 
 	.fida-style-popover-item.is-selected {
-		background-color: #e3f2fd;
+		// background-color: #e3f2fd;
+		border: 0.3rem solid #000;
 		.fida-option-label {
-			color: #000;
+			background-color: none;
 		}
 		// border-color: #2196f3;
 	}
@@ -847,6 +859,11 @@
 		color: #fff;
 		text-align: center;
 		padding: 0.5rem;
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		background-color: rgba(0, 0, 0, 0.3);
+		border-radius: 1.4rem;
 	}
 
 	.fida-style-popover-footer {

src/views/home/components/style.ts

@@ -0,0 +1,59 @@
+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'
+]