完善模特换衣的弹窗内容和交互

apps/web-vue/src/views/quickCreation/components/ModelTryOnDialog.vue

@@ -63,7 +63,8 @@
                         </el-button>
                     </div>
                 </div>
-                <div v-if="bodyMode === 'origin'" class="tip-box flex-items-center gap-8 h-44 px-16 round-10 fs-12 color-888">
+                <div v-if="bodyMode === 'origin'"
+                    class="tip-box flex-items-center gap-8 h-44 px-16 round-10 fs-12 color-888">
                     <el-icon class="tip-icon">
                         <Opportunity />
                     </el-icon>
@@ -99,8 +100,8 @@
                 <div v-else class="face-panel p-18 round-16">
                     <div class="face-tabs flex-items-center gap-16 mb-14">
                         <el-button v-for="item in faceSources" :key="item.value"
-                            class="h-32 px-16 round-8 border-none fs-12"
-                            :class="{ active: faceSource === item.value }" text @click="faceSource = item.value">
+                            class="h-32 px-16 round-8 border-none fs-12" :class="{ active: faceSource === item.value }"
+                            text @click="faceSource = item.value">
                             {{ item.label }}
                         </el-button>
                     </div>
@@ -129,32 +130,43 @@
                     </div>
                     <div class="switch-tabs flex-items-center h-34 p-4 round-8">
                         <el-button v-for="item in clothSources" :key="item.value"
-                            class="h-26 px-12 round-6 border-none fs-12"
-                            :class="{ active: clothSource === item.value }" text @click="clothSource = item.value">
+                            class="h-26 px-12 round-6 border-none fs-12" :class="{ active: clothSource === item.value }"
+                            text @click="clothSource = item.value">
                             {{ item.label }}
                         </el-button>
                     </div>
                 </div>
-                <div class="cloth-list flex gap-14">
-                    <div v-for="item in clothes" :key="item.id" class="cloth-card relative h-182 round-10 hidden">
-                        <img :src="item.image" :alt="item.name" class="w-full h-full cover" />
-                        <span class="cloth-tag absolute left-8 bottom-8 h-22 lh-22 px-8 round-6 fs-10 color-fff">
-                            {{ item.name }}
-                        </span>
+                <div v-if="clothSource==='multi'">
+                    <div class="cloth-list flex gap-14">
+                        <div v-for="item in clothes" :key="item.id" class="cloth-card relative h-182 round-10 hidden">
+                            <img :src="item.image" :alt="item.name" class="w-full h-full cover" />
+                            <span class="cloth-tag absolute left-8 bottom-8 h-22 lh-22 px-8 round-6 fs-10 color-fff">
+                                {{ item.name }}
+                            </span>
+                        </div>
+                        <div class="cloth-card add-cloth flex-col flex-center h-182 round-10 pointer">
+                            <el-icon class="fs-24 mb-8">
+                                <Plus />
+                            </el-icon>
+                            <span class="fs-12 color-888">添加上传衣服</span>
+                        </div>
                     </div>
-                    <div class="cloth-card add-cloth flex-col flex-center h-182 round-10 pointer">
-                        <el-icon class="fs-24 mb-8">
-                            <Plus />
+                    <p class="flex-items-center mt-12 fs-12 lh-20 color-888">
+                        <el-icon class="tip-icon mr-6">
+                            <Opportunity />
                         </el-icon>
-                        <span class="fs-12 color-888">添加上传衣服</span>
+                        一次决定多张衣服照片进行上传，系统将自动对每件衣服与模特、场景进行真实穿戴试衣 Lookbook 生成。
+                    </p>
+                </div>
+                <div v-else class="tip-box p-16 round-10 fs-12">
+                    <div>
+                        粘贴商品链接/ID (不同商品url/id请用“、”隔开)
+                    </div>
+                    <div class="flex gap-10 mt-10">
+                        <el-input placeholder="粘贴商品链接/ID，请用“、”隔开" />
+                        <el-button>自动解析商品</el-button>
                     </div>
                 </div>
-                <p class="flex-items-center mt-12 fs-12 lh-20 color-888">
-                    <el-icon class="tip-icon mr-6">
-                        <Opportunity />
-                    </el-icon>
-                    一次决定多张衣服照片进行上传，系统将自动对每件衣服与模特、场景进行真实穿戴试衣 Lookbook 生成。
-                </p>
 
                 <div class="section-line my-24"></div>
 
@@ -186,15 +198,15 @@
             </section>
 
             <footer class="dialog-footer flex-between px-24 py-14">
-                <div class="fs-14 color-888">
+                <div class="fs-12 color-888">
                     算力点数扣除
                     <strong class="color-main fs-16 mx-4">50</strong>
                     点数
                     <span class="fs-12 ml-6">（每件生成消耗 25 点）</span>
                 </div>
                 <div class="flex-items-center">
-                    <el-button class="h-32 px-22" @click="dialogVisible = false">取消</el-button>
-                    <el-button type="primary" class="submit-btn h-32 px-28 border-none">
+                    <el-button class="h-32 px-22 fs-12" @click="dialogVisible = false">取消</el-button>
+                    <el-button type="primary" class="submit-btn fs-12 h-32 px-28 border-none">
                         <el-icon>
                             <MagicStick />
                         </el-icon>