2481 lines
58 KiB
Vue
2481 lines
58 KiB
Vue
<template>
|
||
<aside class="floating-sidebar">
|
||
<!-- IP类型选择 -->
|
||
<div class="form-section" >
|
||
<div class="expression-info">
|
||
<span class="expression-description">
|
||
{{ $t('iPandCardLeft.ipType') }}
|
||
</span>
|
||
</div>
|
||
<div class="ip-type-grid">
|
||
<div
|
||
class="ip-type-card"
|
||
:class="{ active: ipType === 1 }"
|
||
@click="handleIpTypeSelect(1)"
|
||
>
|
||
<div class="ip-type-label">{{ $t('iPandCardLeft.character') }}</div>
|
||
</div>
|
||
<div
|
||
class="ip-type-card"
|
||
:class="{ active: ipType === 2 }"
|
||
@click="handleIpTypeSelect(2)"
|
||
>
|
||
<div class="ip-type-label">{{ $t('iPandCardLeft.animal') }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 表情选择 -->
|
||
<div class="form-section" v-if="false">
|
||
<!-- <label class="section-label">表情选择</label> -->
|
||
<div class="expression-info">
|
||
<span class="expression-description">
|
||
选择一个表情来丰富您的角色形象
|
||
</span>
|
||
</div>
|
||
<div class="expression-grid">
|
||
<div
|
||
v-for="expression in expressions"
|
||
:key="expression.id"
|
||
class="expression-card"
|
||
:class="{ active: selectedExpression?.id === expression.id }"
|
||
@click="handleExpressionSelect(expression)"
|
||
>
|
||
<div class="expression-preview">
|
||
<img :src="expression.imageUrl" :alt="expression.name">
|
||
</div>
|
||
<div class="expression-name">{{ expression.name }}</div>
|
||
<div v-if="selectedExpression?.id === expression.id" class="expression-selected">✓</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 文本提示输入 -->
|
||
<div class="form-section">
|
||
<div class="expression-info">
|
||
<span class="expression-description">
|
||
{{ $t('iPandCardLeft.textPrompt') }}
|
||
</span>
|
||
</div>
|
||
<div class="prompt-input-container">
|
||
<div class="textarea-wrapper">
|
||
<textarea
|
||
class="prompt-input custom-scrollbar"
|
||
:placeholder="$t('iPandCardLeft.placeholder.characterDescription')"
|
||
v-model="formData.prompt"
|
||
@input="autoResizeTextarea"
|
||
ref="textareaRef"
|
||
:disabled="isOptimizing"
|
||
></textarea>
|
||
<!-- 扫描线动画效果 -->
|
||
<div v-if="isOptimizing" class="scan-overlay">
|
||
<div class="scan-line"></div>
|
||
</div>
|
||
<!-- <button
|
||
class="optimizer-btn"
|
||
@click="handleOptimizePrompt"
|
||
:disabled="isOptimizing || !prompt.trim()"
|
||
>
|
||
<span class="btn-icon">🪄</span>
|
||
</button> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 参考图片上传 -->
|
||
<div class="form-section">
|
||
<div class="expression-info">
|
||
<span class="expression-description">
|
||
{{ $t('iPandCardLeft.addReferenceImage') }}
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="image-upload-area"
|
||
@click="triggerFileUpload"
|
||
@dragover.prevent="handleDragOver"
|
||
@dragenter.prevent="handleDragEnter"
|
||
@dragleave.prevent="handleDragLeave"
|
||
@drop.prevent="handleDrop"
|
||
:class="{ 'drag-over': isDragOver, 'uploading': isUploading }"
|
||
>
|
||
<!-- 图片预览 -->
|
||
<div v-if="formData.previewImage && !isUploading" class="image-preview">
|
||
<img :src="formData.previewImage" alt="Selected image">
|
||
<button class="remove-image" @click.stop="removeImage">×</button>
|
||
</div>
|
||
<!-- 上传进度 -->
|
||
<div v-else-if="isUploading" class="upload-progress">
|
||
<div class="upload-spinner">
|
||
<div class="spinner-ring"></div>
|
||
<div class="spinner-ring"></div>
|
||
<div class="spinner-ring"></div>
|
||
</div>
|
||
<div class="upload-progress-text">loading...</div>
|
||
</div>
|
||
<!-- 上传提示 -->
|
||
<div v-else class="upload-prompt">
|
||
<div class="upload-icon">+</div>
|
||
<span class="upload-text">{{ $t('iPandCardLeft.uploadOrSelectImage') }}</span>
|
||
<span class="drag-text">{{ $t('iPandCardLeft.dragImageHere') }}</span>
|
||
</div>
|
||
<!-- 隐藏的文件输入 -->
|
||
<input
|
||
ref="fileInput"
|
||
type="file"
|
||
accept="image/*"
|
||
@change="handleFileChange"
|
||
class="hidden-file-input"
|
||
>
|
||
</div>
|
||
</div>
|
||
<!-- 材质选择 -->
|
||
<div class="form-section" v-if="false">
|
||
<label class="section-label">{{ $t('iPandCardLeft.material.title') }}</label>
|
||
<div class="material-selection">
|
||
<div class="material-info">
|
||
<span class="material-description">
|
||
{{ $t('iPandCardLeft.material.description') }}
|
||
</span>
|
||
</div>
|
||
<div class="material-grid">
|
||
<div
|
||
v-for="material in materials"
|
||
:key="material.id"
|
||
class="material-card"
|
||
:class="{ active: selectedMaterial?.id === material.id }"
|
||
@click="handleMaterialSelect(material)"
|
||
>
|
||
<div class="material-preview">
|
||
<img v-if="material.imageUrl" :src="material.imageUrl" :alt="material.name">
|
||
<div v-else class="material-placeholder">
|
||
<div class="placeholder-icon">{{ material.icon }}</div>
|
||
<div class="placeholder-text">{{ material.name }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="material-details">
|
||
<div class="material-name">{{ material.name }}</div>
|
||
<div class="material-type">{{ material.type }}</div>
|
||
</div>
|
||
<div v-if="selectedMaterial?.id === material.id" class="material-selected">✓</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 颜色选择 -->
|
||
<div class="form-section" v-if="selectedMaterial">
|
||
<label class="section-label">{{ $t('iPandCardLeft.color.title') }}</label>
|
||
<div class="color-selection">
|
||
<div class="color-info">
|
||
<span class="color-description">
|
||
{{ $t('iPandCardLeft.color.description', { material: selectedMaterial.name }) }}
|
||
</span>
|
||
</div>
|
||
<div class="color-grid">
|
||
<div
|
||
v-for="color in availableColors"
|
||
:key="color.id"
|
||
class="color-card"
|
||
:class="{ active: selectedColor?.id === color.id }"
|
||
@click="handleColorSelect(color)"
|
||
>
|
||
<div class="color-preview" :style="{ backgroundColor: color.hex }">
|
||
<div v-if="selectedColor?.id === color.id" class="color-selected">✓</div>
|
||
</div>
|
||
<div class="color-details">
|
||
<div class="color-name">{{ color.name }}</div>
|
||
<div class="color-hex">{{ color.hex }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 电子模块选择 -->
|
||
<div class="form-section" v-if="false">
|
||
<label class="section-label">{{ $t('iPandCardLeft.electronicModule') }}</label>
|
||
<div class="module-selection">
|
||
<div class="module-grid">
|
||
<div
|
||
v-for="module in electronicModules"
|
||
:key="module.id"
|
||
class="module-card"
|
||
:class="{ active: selectedModule?.id === module.id }"
|
||
@click="handleModuleSelect(module)"
|
||
>
|
||
<div class="module-icon">{{ module.icon }}</div>
|
||
<div class="module-info">
|
||
<div class="module-name">{{ module.name }}</div>
|
||
</div>
|
||
<div v-if="selectedModule?.id === module.id" class="module-selected">✓</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 草图选择系统 -->
|
||
<div class="form-section" v-if="selectedModule">
|
||
<label class="section-label">{{ $t('iPandCardLeft.sketch.title') }}</label>
|
||
<div class="sketch-selection">
|
||
<div class="sketch-info">
|
||
<span class="sketch-description">
|
||
{{ $t('iPandCardLeft.sketch.description', { module: selectedModule.name }) }}
|
||
</span>
|
||
</div>
|
||
<div class="sketch-grid">
|
||
<div
|
||
v-for="sketch in availableSketches"
|
||
:key="sketch.id"
|
||
class="sketch-card"
|
||
:class="{ active: selectedSketch?.id === sketch.id }"
|
||
@click="handleSketchSelect(sketch)"
|
||
>
|
||
<div class="sketch-preview">
|
||
<img v-if="sketch.imageUrl" :src="sketch.imageUrl" :alt="sketch.name">
|
||
</div>
|
||
<div class="sketch-details">
|
||
<div class="sketch-name">{{ sketch.name }}</div>
|
||
<div class="sketch-proportions">{{ sketch.proportions }}</div>
|
||
</div>
|
||
<div v-if="selectedSketch?.id === sketch.id" class="sketch-selected">✓</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 图片数量选择 -->
|
||
<div class="form-section" v-if="false">
|
||
<div class="expression-info">
|
||
<span class="expression-description">
|
||
选择图片数量
|
||
</span>
|
||
</div>
|
||
<div class="quantity-options">
|
||
<button
|
||
v-for="num in [1, 2, 3, 4]"
|
||
:key="num"
|
||
class="quantity-option"
|
||
:class="{ active: generateCount === num }"
|
||
@click="handleQuantitySelect(num)"
|
||
>
|
||
{{ num }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- 生成按钮 -->
|
||
<div class="generate-section">
|
||
<el-button
|
||
type="primary"
|
||
class="generate-btn"
|
||
@click="handleGenerate"
|
||
:disabled="isGenerateButtonDisabled"
|
||
>
|
||
{{ $t('common.generate') }}
|
||
</el-button>
|
||
</div>
|
||
</aside>
|
||
</template>
|
||
|
||
<script setup>
|
||
// import lts from '../../assets/sketches/lts.png'
|
||
// import mk2dy from '../../assets/sketches/mk2dy.png'
|
||
import { ref, onMounted, watch, nextTick, computed, getCurrentInstance, reactive } from 'vue';
|
||
import { ElMessage } from 'element-plus';
|
||
// import cz1 from '../../assets/material/cz1.jpg'
|
||
import { FileServer } from '@deotaland/utils';
|
||
const filePlug = new FileServer();
|
||
// 定义事件
|
||
const emit = defineEmits(['image-generated', 'model-generated', 'generate-requested', 'import-character', 'navigate-back', 'updateProjectInfo']);
|
||
const props = defineProps({
|
||
Info: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
})
|
||
// 获取 i18n 实例
|
||
const { proxy } = getCurrentInstance();
|
||
const $t = proxy.$t;
|
||
|
||
const formData = ref({
|
||
prompt: '',
|
||
previewImage:'',
|
||
})
|
||
|
||
const textareaRef = ref(null);
|
||
const fileInput = ref(null); // 文件输入引用
|
||
const generateCount = ref(4); // 生成数量，默认为1
|
||
const isOptimizing = ref(false); // 优化状态
|
||
const isDragOver = ref(false); // 拖拽状态
|
||
const isUploading = ref(false); // 图片上传状态
|
||
// IP类型选择（人物/动物），默认人物，并保存到本地
|
||
const ipType = ref(1);
|
||
const handleIpTypeSelect = (type) => {
|
||
ipType.value = type;
|
||
// try {
|
||
// localStorage.setItem('ipType', type);
|
||
// } catch (e) {
|
||
// // 忽略本地存储异常
|
||
// }
|
||
};
|
||
// 新增：电子模块和草图选择相关状态
|
||
const selectedModule = ref(null); // 选中的电子模块
|
||
const selectedSketch = ref(null); // 选中的草图
|
||
const selectedMaterial = ref(null); // 选中的材质
|
||
const selectedColor = ref(null); // 选中的颜色
|
||
const selectedExpression = ref(null); // 选中的表情
|
||
const selectedHairColor = ref(null); // 选中的发色
|
||
const selectedSkinColor = ref(null); // 选中的肤色
|
||
|
||
// 表情数据：改为动态遍历 assets/email 目录
|
||
const expressions = ref([]);
|
||
|
||
const init = () => {
|
||
}
|
||
onMounted(() => {
|
||
init()
|
||
// loadExpressions();
|
||
});
|
||
|
||
// 颜色数据库 - 基于材质类型提供不同的颜色选项
|
||
const colorDatabase = ref({
|
||
metal_brushed: [
|
||
{ id: 'silver', name: 'Silver', hex: '#C0C0C0', description: 'Classic silver metallic' },
|
||
{ id: 'gold', name: 'Gold', hex: '#FFD700', description: 'Luxurious gold finish' },
|
||
{ id: 'copper', name: 'Copper', hex: '#B87333', description: 'Warm copper tone' },
|
||
{ id: 'titanium', name: 'Titanium', hex: '#878681', description: 'Modern titanium gray' },
|
||
{ id: 'bronze', name: 'Bronze', hex: '#CD7F32', description: 'Antique bronze' },
|
||
{ id: 'steel', name: 'Steel', hex: '#71797E', description: 'Industrial steel gray' }
|
||
],
|
||
plastic_matte: [
|
||
{ id: 'white', name: 'White', hex: '#FFFFFF', description: 'Pure white' },
|
||
{ id: 'black', name: 'Black', hex: '#2C2C2C', description: 'Deep black' },
|
||
{ id: 'red', name: 'Red', hex: '#E53E3E', description: 'Vibrant red' },
|
||
{ id: 'blue', name: 'Blue', hex: '#3182CE', description: 'Ocean blue' },
|
||
{ id: 'green', name: 'Green', hex: '#38A169', description: 'Forest green' },
|
||
{ id: 'yellow', name: 'Yellow', hex: '#D69E2E', description: 'Sunny yellow' },
|
||
{ id: 'purple', name: 'Purple', hex: '#805AD5', description: 'Royal purple' },
|
||
{ id: 'orange', name: 'Orange', hex: '#DD6B20', description: 'Bright orange' }
|
||
],
|
||
carbon_fiber: [
|
||
{ id: 'carbon_black', name: 'Carbon Black', hex: '#1A1A1A', description: 'Classic carbon black' },
|
||
{ id: 'carbon_gray', name: 'Carbon Gray', hex: '#4A4A4A', description: 'Lighter carbon gray' },
|
||
{ id: 'carbon_blue', name: 'Carbon Blue', hex: '#1E3A8A', description: 'Blue carbon weave' },
|
||
{ id: 'carbon_red', name: 'Carbon Red', hex: '#991B1B', description: 'Red carbon accent' }
|
||
],
|
||
wood_natural: [
|
||
{ id: 'oak', name: 'Oak', hex: '#DEB887', description: 'Natural oak wood' },
|
||
{ id: 'walnut', name: 'Walnut', hex: '#8B4513', description: 'Rich walnut brown' },
|
||
{ id: 'maple', name: 'Maple', hex: '#F5DEB3', description: 'Light maple wood' },
|
||
{ id: 'cherry', name: 'Cherry', hex: '#A0522D', description: 'Cherry wood red' },
|
||
{ id: 'mahogany', name: 'Mahogany', hex: '#C04000', description: 'Deep mahogany' },
|
||
{ id: 'pine', name: 'Pine', hex: '#FFEAA7', description: 'Light pine wood' }
|
||
],
|
||
ceramic_glossy: [
|
||
{ id: 'ceramic_white', name: 'Ceramic White', hex: '#FAFAFA', description: 'Pure ceramic white' },
|
||
{ id: 'ceramic_cream', name: 'Cream', hex: '#FFF8DC', description: 'Warm cream ceramic' },
|
||
{ id: 'ceramic_blue', name: 'Ceramic Blue', hex: '#4FC3F7', description: 'Sky blue ceramic' },
|
||
{ id: 'ceramic_green', name: 'Ceramic Green', hex: '#81C784', description: 'Mint green ceramic' },
|
||
{ id: 'ceramic_pink', name: 'Ceramic Pink', hex: '#F48FB1', description: 'Soft pink ceramic' }
|
||
],
|
||
fabric_soft: [
|
||
{ id: 'fabric_beige', name: 'Beige', hex: '#F5F5DC', description: 'Natural beige fabric' },
|
||
{ id: 'fabric_gray', name: 'Gray', hex: '#808080', description: 'Neutral gray fabric' },
|
||
{ id: 'fabric_navy', name: 'Navy', hex: '#000080', description: 'Deep navy fabric' },
|
||
{ id: 'fabric_burgundy', name: 'Burgundy', hex: '#800020', description: 'Rich burgundy fabric' },
|
||
{ id: 'fabric_olive', name: 'Olive', hex: '#808000', description: 'Olive green fabric' },
|
||
{ id: 'fabric_cream', name: 'Cream', hex: '#FFFDD0', description: 'Soft cream fabric' }
|
||
]
|
||
});
|
||
|
||
// 材质数据
|
||
// const materials = ref([
|
||
// {
|
||
// id: 'metal_brushed',
|
||
// name: '白毛绒',
|
||
// type: 'Metal',
|
||
// icon: '🔩',
|
||
// imageUrl: cz1, // 可以添加实际的材质图片URL
|
||
// description: 'Industrial brushed metal finish',
|
||
// properties: {
|
||
// reflectivity: 0.8,
|
||
// roughness: 0.3,
|
||
// metallic: 1.0
|
||
// }
|
||
// }
|
||
// // ,
|
||
// // {
|
||
// // id: 'plastic_matte',
|
||
// // name: '材质2',
|
||
// // type: 'Plastic',
|
||
// // icon: '🧱',
|
||
// // imageUrl: '',
|
||
// // description: 'Non-reflective plastic surface',
|
||
// // properties: {
|
||
// // reflectivity: 0.1,
|
||
// // roughness: 0.9,
|
||
// // metallic: 0.0
|
||
// // }
|
||
// // }
|
||
// ]);
|
||
|
||
// 电子模块数据
|
||
const electronicModules = ref([
|
||
{
|
||
id: 'arduino_uno',
|
||
name: 'D1 Mini',
|
||
icon: '🔌',
|
||
category: 'microcontroller',
|
||
compatibility: ['basic', 'intermediate', 'advanced']
|
||
},
|
||
{
|
||
id: 'raspberry_pi',
|
||
name: 'D1 Plus Pi',
|
||
icon: '🔌',
|
||
category: 'computer',
|
||
compatibility: ['intermediate', 'advanced']
|
||
},
|
||
]);
|
||
|
||
// 草图数据 - 基于选中的电子模块动态生成
|
||
// const sketchDatabase = ref({
|
||
// arduino_uno: [
|
||
// {
|
||
// id: 'humanoid_basic',
|
||
// name: 'Basic Humanoid',
|
||
// proportions: 'Head:Body = 1:1',
|
||
// pose: 'standing',
|
||
// imageUrl: lts,
|
||
// description: 'Classic humanoid proportions suitable for Arduino-based robots',
|
||
// compatibility: ['arduino_uno', 'servo_motor'],
|
||
// headToBodyRatio: '5:5'
|
||
// }
|
||
// ],
|
||
// raspberry_pi: [
|
||
// {
|
||
// id: 'advanced_humanoid',
|
||
// name: 'Advanced Humanoid',
|
||
// proportions: 'Head:Body = 1:2.5',
|
||
// pose: 'dynamic',
|
||
// imageUrl: mk2dy,
|
||
// description: 'Sophisticated design leveraging Raspberry Pi capabilities',
|
||
// compatibility: ['raspberry_pi', 'camera_module'],
|
||
// headToBodyRatio: '6:4'
|
||
// },
|
||
// ],
|
||
// esp32: [
|
||
// {
|
||
// id: 'iot_character',
|
||
// name: 'IoT Character',
|
||
// proportions: 'Head:Body = 1:6',
|
||
// pose: 'connected',
|
||
// imageUrl: '/src/assets/sketches/esp32_compact.svg',
|
||
// description: 'IoT-enabled character design for ESP32',
|
||
// compatibility: ['esp32']
|
||
// }
|
||
// ],
|
||
// servo_motor: [
|
||
// {
|
||
// id: 'articulated_figure',
|
||
// name: 'Articulated Figure',
|
||
// proportions: 'Head:Body = 1:7',
|
||
// pose: 'articulated',
|
||
// imageUrl: '/src/assets/sketches/arduino_standing.svg',
|
||
// description: 'Design emphasizing joint movement and servo integration',
|
||
// compatibility: ['servo_motor', 'arduino_uno']
|
||
// }
|
||
// ],
|
||
// led_matrix: [
|
||
// {
|
||
// id: 'display_character',
|
||
// name: 'Display Character',
|
||
// proportions: 'Head:Body = 1:6',
|
||
// pose: 'expressive',
|
||
// imageUrl: '/src/assets/sketches/arduino_sitting.svg',
|
||
// description: 'Character design featuring LED matrix display integration',
|
||
// compatibility: ['led_matrix', 'arduino_uno']
|
||
// }
|
||
// ],
|
||
// camera_module: [
|
||
// {
|
||
// id: 'vision_robot',
|
||
// name: 'Vision Robot',
|
||
// proportions: 'Head:Body = 1:6',
|
||
// pose: 'observing',
|
||
// imageUrl: '/src/assets/sketches/raspberry_action.svg',
|
||
// description: 'Design optimized for camera module and computer vision',
|
||
// compatibility: ['camera_module', 'raspberry_pi']
|
||
// }
|
||
// ]
|
||
// });
|
||
|
||
// 计算属性：基于选中模块获取可用草图
|
||
const availableSketches = computed(() => {
|
||
if (!selectedModule.value) return [];
|
||
return sketchDatabase.value[selectedModule.value.id] || [];
|
||
});
|
||
|
||
// 计算属性：基于选中材质获取可用颜色
|
||
const availableColors = computed(() => {
|
||
if (!selectedMaterial.value) return [];
|
||
return colorDatabase.value[selectedMaterial.value.id] || [];
|
||
});
|
||
|
||
const characterProfile = ref(null); // 字符档案
|
||
// 新增：材质选择处理函数
|
||
const handleMaterialSelect = (material) => {
|
||
// 如果点击的是已选中的材质，则取消选择
|
||
if (selectedMaterial.value?.id === material.id) {
|
||
selectedMaterial.value = null;
|
||
selectedColor.value = null; // 同时重置颜色选择
|
||
} else {
|
||
selectedMaterial.value = material;
|
||
// 重置颜色选择
|
||
selectedColor.value = null;
|
||
}
|
||
};
|
||
|
||
// 新增：颜色选择处理函数
|
||
const handleColorSelect = (color) => {
|
||
// 如果点击的是已选中的颜色，则取消选择
|
||
if (selectedColor.value?.id === color.id) {
|
||
selectedColor.value = null;
|
||
} else {
|
||
selectedColor.value = color;
|
||
}
|
||
};
|
||
|
||
// 新增：电子模块选择处理函数
|
||
const handleModuleSelect = (module) => {
|
||
// 如果点击的是已选中的模块，则取消选择
|
||
if (selectedModule.value?.id === module.id) {
|
||
selectedModule.value = null;
|
||
selectedSketch.value = null; // 同时重置草图选择
|
||
} else {
|
||
selectedModule.value = module;
|
||
// 重置草图选择
|
||
selectedSketch.value = null;
|
||
|
||
}
|
||
};
|
||
|
||
// 新增：表情选择处理函数
|
||
const handleExpressionSelect = (expression) => {
|
||
// 如果点击的是已选中的表情，则取消选择
|
||
if (selectedExpression.value?.id === expression.id) {
|
||
selectedExpression.value = null;
|
||
} else {
|
||
selectedExpression.value = expression;
|
||
}
|
||
};
|
||
|
||
|
||
|
||
// 新增：草图选择处理函数
|
||
const handleSketchSelect = (sketch) => {
|
||
// 如果点击的是已选中的草图，则取消选择
|
||
if (selectedSketch.value?.id === sketch.id) {
|
||
selectedSketch.value = null;
|
||
} else {
|
||
selectedSketch.value = sketch;
|
||
}
|
||
};
|
||
|
||
// 综合输入验证函数
|
||
const validateGenerationInputs = () => {
|
||
const errors = []
|
||
const warnings = []
|
||
// 验证参考图像 - 现在必须上传参考图片
|
||
if (!(formData.value.previewImage || formData.value.prompt)) {
|
||
errors.push($t('common.validation.referenceImageRequired'))
|
||
}
|
||
return { errors, warnings }
|
||
}
|
||
|
||
// 计算属性：判断生成按钮是否应该禁用
|
||
const isGenerateButtonDisabled = computed(() => {
|
||
const validation = validateGenerationInputs();
|
||
return validation.errors.length > 0;
|
||
});
|
||
|
||
// 错误处理函数
|
||
const handleValidationError = (errors) => {
|
||
if (errors.length > 0) {
|
||
// 显示第一个错误消息（已经通过 i18n 翻译）
|
||
const errorMessage = typeof errors[0] === 'string' ? errors[0] : String(errors[0])
|
||
ElMessage.error(errorMessage)
|
||
}
|
||
}
|
||
|
||
const handleProcessingError = (error, context = '') => {
|
||
console.error(`处理错误 ${context}:`, error)
|
||
|
||
let userMessage = '操作失败'
|
||
|
||
if (error.message) {
|
||
if (error.message.includes('network') || error.message.includes('fetch')) {
|
||
userMessage = '网络连接失败，请检查网络后重试'
|
||
} else if (error.message.includes('timeout')) {
|
||
userMessage = '请求超时，请稍后重试'
|
||
} else if (error.message.includes('quota') || error.message.includes('limit')) {
|
||
userMessage = '已达到使用限制，请稍后重试'
|
||
} else if (error.message.includes('format') || error.message.includes('invalid')) {
|
||
userMessage = '输入格式不正确，请检查后重试'
|
||
} else {
|
||
userMessage = `操作失败: ${error.message}`
|
||
}
|
||
}
|
||
|
||
ElMessage.error(userMessage)
|
||
|
||
// 记录详细错误信息用于调试
|
||
if (process.env.NODE_ENV === 'development') {
|
||
console.error('详细错误信息:', {
|
||
context,
|
||
error: error.stack || error,
|
||
timestamp: new Date().toISOString(),
|
||
userAgent: navigator.userAgent
|
||
})
|
||
}
|
||
}
|
||
|
||
|
||
// 处理数量选择
|
||
const handleQuantitySelect = (num) => {
|
||
generateCount.value = num;
|
||
};
|
||
|
||
// 处理生成按钮点击
|
||
const handleGenerate = async () => {
|
||
console.log('生成数量:', generateCount.value);
|
||
// 执行综合验证
|
||
const validation = validateGenerationInputs();
|
||
if (validation.errors.length > 0) {
|
||
handleValidationError(validation.errors);
|
||
return;
|
||
}
|
||
try {
|
||
await handleGenerateWithMultipleImages();
|
||
// // 检查是否选择了电子模块和草图（新功能）
|
||
// if (selectedModule.value && selectedSketch.value) {
|
||
// // 使用多图像生成模式
|
||
|
||
// } else {
|
||
// // 使用原有的单图像生成模式
|
||
// await handleGenerateWithSingleImage();
|
||
// }
|
||
} catch (error) {
|
||
console.error('生成过程出错:', error);
|
||
handleProcessingError(error, '图像生成');
|
||
}
|
||
};
|
||
|
||
// 新增：多图像生成处理函数（仅草图参考）
|
||
const handleGenerateWithMultipleImages = async () => {
|
||
try {
|
||
// 构建角色档案，只包含草图信息，不包含电子模块
|
||
const profile = {
|
||
appearance: formData.value.prompt,
|
||
};
|
||
// 传递参数给父组件，只包含草图信息
|
||
const params = {
|
||
profile: profile,
|
||
inspirationImage: formData.value.previewImage,
|
||
count: generateCount.value,
|
||
ipType:ipType.value,
|
||
}
|
||
emit('generate-requested', params);
|
||
} catch (error) {
|
||
console.error('创建多图像角色档案失败:', error);
|
||
handleProcessingError(error, '多图像角色档案创建');
|
||
}
|
||
};
|
||
// 自适应调整textarea高度
|
||
const autoResizeTextarea = () => {
|
||
if (textareaRef.value) {
|
||
// 重置高度以准确计算内容高度
|
||
textareaRef.value.style.height = 'auto';
|
||
|
||
// 设置高度限制
|
||
const minHeight = 40; // 最小高度，适合单行文本
|
||
const maxHeight = 300; // 最大高度，与CSS保持一致
|
||
const scrollHeight = textareaRef.value.scrollHeight;
|
||
|
||
// 计算实际需要的高度
|
||
const newHeight = Math.max(minHeight, Math.min(maxHeight, scrollHeight));
|
||
textareaRef.value.style.height = newHeight + 'px';
|
||
|
||
// 如果内容超过最大高度，确保滚动条可见
|
||
if (scrollHeight > maxHeight) {
|
||
textareaRef.value.style.overflowY = 'auto';
|
||
} else {
|
||
textareaRef.value.style.overflowY = 'hidden';
|
||
}
|
||
}
|
||
};
|
||
// 触发文件上传
|
||
const triggerFileUpload = () => {
|
||
fileInput.value?.click();
|
||
};
|
||
// 处理文件选择
|
||
const handleFileChange = async (event) => {
|
||
const file = event.target.files?.[0];
|
||
if (file) {
|
||
isUploading.value = true;
|
||
try {
|
||
const imgUrl = await filePlug.uploadFile(file);
|
||
formData.value.previewImage = imgUrl;
|
||
} catch (error) {
|
||
console.error('图片上传失败:', error);
|
||
ElMessage.error('图片上传失败，请重试');
|
||
} finally {
|
||
isUploading.value = false;
|
||
}
|
||
}
|
||
};
|
||
|
||
// 移除已上传的图片
|
||
const removeImage = () => {
|
||
formData.value.previewImage = '';
|
||
if (fileInput.value) {
|
||
fileInput.value.value = ''; // 重置文件输入
|
||
}
|
||
};
|
||
|
||
// 拖拽事件处理函数
|
||
const handleDragOver = (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
};
|
||
|
||
const handleDragEnter = (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
isDragOver.value = true;
|
||
};
|
||
|
||
const handleDragLeave = (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
// 只有当拖拽离开整个上传区域时才设置为false
|
||
if (event.target === event.currentTarget) {
|
||
isDragOver.value = false;
|
||
}
|
||
};
|
||
|
||
const handleDrop = async (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
isDragOver.value = false;
|
||
|
||
const files = event.dataTransfer.files;
|
||
if (files && files.length > 0) {
|
||
const file = files[0];
|
||
// 检查文件类型是否为图片
|
||
if (file.type.startsWith('image/')) {
|
||
console.log('拖拽上传文件:', file);
|
||
isUploading.value = true;
|
||
try {
|
||
const imgUrl = await filePlug.uploadFile(file);
|
||
formData.value.previewImage = imgUrl;
|
||
} catch (error) {
|
||
console.error('拖拽上传失败:', error);
|
||
ElMessage.error('图片上传失败，请重试');
|
||
} finally {
|
||
isUploading.value = false;
|
||
}
|
||
} else {
|
||
ElMessage.error('请选择有效的图片文件');
|
||
}
|
||
}
|
||
};
|
||
|
||
// 监听 prompt 变化，自动调整 textarea 高度
|
||
watch(() => formData.value.prompt, () => {
|
||
nextTick(() => {
|
||
autoResizeTextarea();
|
||
});
|
||
});
|
||
|
||
// 组件挂载后初始化
|
||
onMounted(() => {
|
||
autoResizeTextarea();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.import-btn {
|
||
width: 100%;
|
||
background-color: #381e16 !important;
|
||
border-color: #381e16 !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
.import-btn:hover,
|
||
.import-btn:focus {
|
||
filter: brightness(1.1);
|
||
}
|
||
.prompt-input-container {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.textarea-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 扫描线动画效果 */
|
||
.scan-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.1);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
z-index: 5;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.scan-line {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: linear-gradient(90deg,
|
||
transparent 0%,
|
||
rgba(99, 102, 241, 0.8) 20%,
|
||
rgba(99, 102, 241, 1) 50%,
|
||
rgba(99, 102, 241, 0.8) 80%,
|
||
transparent 100%);
|
||
animation: scan 2s linear infinite;
|
||
box-shadow: 0 0 10px 2px rgba(99, 102, 241, 0.5);
|
||
}
|
||
|
||
@keyframes scan {
|
||
0% {
|
||
top: 0;
|
||
opacity: 0;
|
||
}
|
||
10% {
|
||
opacity: 1;
|
||
}
|
||
90% {
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
top: calc(100% - 2px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
/* 浮动侧边栏样式 */
|
||
.floating-sidebar {
|
||
max-width: calc(100vw - 20px); /* 确保不超过视口宽度减去外边距 */
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
/* box-shadow: 0 4px 20px rgba(107, 70, 193, 0.3); */
|
||
border: 1px solid rgba(167, 139, 250, 0.2);
|
||
overflow-y: auto; /* 仅在侧边栏内容过多时允许垂直滚动 */
|
||
max-height: calc(100vh - 20px); /* 限制侧边栏最大高度 */
|
||
position: relative;
|
||
background-color: #293140;
|
||
min-width: 300px;
|
||
}
|
||
|
||
.floating-sidebar::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(45deg, rgba(167, 139, 250, 0.05) 0%, transparent 50%, rgba(107, 70, 193, 0.05) 100%);
|
||
pointer-events: none;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
/* 侧边栏头部样式 */
|
||
.sidebar-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid rgba(167, 139, 250, 0.2);
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 返回按钮样式 */
|
||
.back-button {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 12px;
|
||
background: rgba(167, 139, 250, 0.15);
|
||
border: 1px solid rgba(167, 139, 250, 0.3);
|
||
border-radius: 8px;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
backdrop-filter: blur(10px);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.back-button:hover {
|
||
background: rgba(167, 139, 250, 0.25);
|
||
border-color: #A78BFA;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3);
|
||
}
|
||
|
||
.back-button:active {
|
||
transform: translateY(0);
|
||
transition: all 0.1s ease;
|
||
}
|
||
|
||
.back-button svg {
|
||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.back-button:hover svg {
|
||
transform: translateX(-2px);
|
||
}
|
||
|
||
.back-text {
|
||
font-weight: 500;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.back-button {
|
||
padding: 6px 10px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.back-button svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
|
||
.back-text {
|
||
display: none; /* 移动端隐藏文字，只显示图标 */
|
||
}
|
||
}
|
||
|
||
/* IP类型图片选择样式 */
|
||
.ip-type-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 8px;
|
||
}
|
||
|
||
.ip-type-card {
|
||
position: relative;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
|
||
background-color: var(--bg-color, rgba(255, 255, 255, 0.05));
|
||
height: 34px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.ip-type-card:hover {
|
||
border-color: var(--border-hover-color, rgba(255, 255, 255, 0.2));
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.ip-type-card.active {
|
||
background-color: rgba(167, 139, 250, 0.2);
|
||
border-color: #A78BFA;
|
||
box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.4);
|
||
}
|
||
|
||
.ip-type-label {
|
||
color: var(--text-color, #fff);
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 适应亮色主题 */
|
||
:root {
|
||
--border-color: rgba(0, 0, 0, 0.1);
|
||
--bg-color: rgba(0, 0, 0, 0.05);
|
||
--border-hover-color: rgba(0, 0, 0, 0.2);
|
||
--text-color: #333;
|
||
}
|
||
|
||
/* 深色主题特定样式 */
|
||
.dark-theme {
|
||
--border-color: rgba(255, 255, 255, 0.1);
|
||
--bg-color: rgba(255, 255, 255, 0.05);
|
||
--border-hover-color: rgba(255, 255, 255, 0.2);
|
||
--text-color: #fff;
|
||
}
|
||
|
||
/* 确保当前主题下的样式正确应用 */
|
||
.ip-type-label {
|
||
color: var(--el-text-color-regular);
|
||
}
|
||
|
||
.ip-type-card {
|
||
border-color: var(--el-border-color-light);
|
||
background-color: var(--el-bg-color-light);
|
||
}
|
||
|
||
.ip-type-card:hover {
|
||
border-color: var(--el-border-color);
|
||
}
|
||
|
||
.ip-type-card.active:hover {
|
||
border-color: #A78BFA;
|
||
}
|
||
|
||
.logo-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.logo-text {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.credits {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.credits-icon {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.credits-amount {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #ffcc00;
|
||
}
|
||
|
||
.credits-label {
|
||
font-size: 12px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 表单区域样式 */
|
||
.form-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-label {
|
||
display: block;
|
||
font-size: 14px;
|
||
margin-bottom: 8px;
|
||
margin-top: 16px;
|
||
padding: 6px 10px;
|
||
background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(107, 70, 193, 0.05) 100%);
|
||
border-radius: 6px;
|
||
border-left: 3px solid #A78BFA;
|
||
font-weight: 500;
|
||
color: #E9D5FF;
|
||
}
|
||
|
||
/* 选择框样式 */
|
||
.model-select {
|
||
width: 100%;
|
||
padding: 10px 12px;
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 6px;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
appearance: none;
|
||
position: relative;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-5 h-5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 12px center;
|
||
background-size: 16px;
|
||
}
|
||
|
||
.model-select:focus {
|
||
outline: none;
|
||
border-color: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
/* 图片上传区域样式 */
|
||
.image-upload-area {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 180px;
|
||
border: 2px dashed rgba(221, 221, 221, 0.5);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
overflow: hidden;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.image-upload-area:hover {
|
||
border-color: #675b5c;
|
||
background-color: rgba(99, 102, 241, 0.05);
|
||
}
|
||
|
||
/* 拖拽状态样式 */
|
||
.image-upload-area.drag-over {
|
||
border-color: #6366f1;
|
||
background-color: rgba(99, 102, 241, 0.1);
|
||
transform: scale(1.02);
|
||
box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
|
||
}
|
||
|
||
/* 上传状态样式 */
|
||
.image-upload-area.uploading {
|
||
border-color: #6B46C1;
|
||
background-color: rgba(107, 70, 193, 0.05);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 上传进度样式 */
|
||
.upload-progress {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
/* 旋转加载动画 */
|
||
.upload-spinner {
|
||
position: relative;
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
|
||
.spinner-ring {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 3px solid transparent;
|
||
border-top: 3px solid #6B46C1;
|
||
border-radius: 50%;
|
||
animation: spin 1.2s linear infinite;
|
||
}
|
||
|
||
.spinner-ring:nth-child(2) {
|
||
width: 36px;
|
||
height: 36px;
|
||
top: 6px;
|
||
left: 6px;
|
||
border-top-color: #A78BFA;
|
||
animation-duration: 1s;
|
||
animation-direction: reverse;
|
||
}
|
||
|
||
.spinner-ring:nth-child(3) {
|
||
width: 24px;
|
||
height: 24px;
|
||
top: 12px;
|
||
left: 12px;
|
||
border-top-color: #C4B5FD;
|
||
animation-duration: 0.8s;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.upload-progress-text {
|
||
font-size: 14px;
|
||
color: #6B46C1;
|
||
font-weight: 500;
|
||
animation: pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 0.8; }
|
||
50% { opacity: 1; }
|
||
}
|
||
|
||
.upload-prompt {
|
||
text-align: center;
|
||
color: #666;
|
||
}
|
||
|
||
.upload-icon {
|
||
font-size: 32px;
|
||
color: #999;
|
||
margin-bottom: 8px;
|
||
display: block;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.drag-text {
|
||
font-size: 14px;
|
||
color: #6366f1;
|
||
margin-top: 8px;
|
||
display: block;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 隐藏文件输入 */
|
||
.hidden-file-input {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
opacity: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 图片预览样式 */
|
||
.image-preview {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.image-preview img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* 移除图片按钮 */
|
||
.remove-image {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
color: white;
|
||
border: none;
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.remove-image:hover {
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
.upload-icon {
|
||
font-size: 32px;
|
||
opacity: 0.6;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 14px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.generate-worldview-btn {
|
||
width: 100%;
|
||
padding: 10px 16px;
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 6px;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.generate-worldview-btn:hover {
|
||
background-color: rgba(255, 255, 255, 0.15);
|
||
border-color: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
/* 文本输入区域 */
|
||
.prompt-input {
|
||
width: 100%;
|
||
min-height: 40px; /* 最小高度，适合单行文本 */
|
||
max-height: 300px; /* 设置最大高度 */
|
||
padding: 12px 12px 40px 12px; /* 增加底部内边距，为按钮留出空间 */
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 6px;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
resize: none; /* 禁用手动调整大小 */
|
||
overflow-y: hidden; /* 初始隐藏滚动条，内容多时通过JS控制 */
|
||
margin-bottom: 0; /* 移除底部边距，因为按钮现在是绝对定位 */
|
||
line-height: 1.5; /* 设置行高，便于计算高度 */
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
|
||
.prompt-input:disabled {
|
||
opacity: 0.7;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.prompt-input::placeholder {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.prompt-input:focus {
|
||
outline: none;
|
||
border-color: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.textarea-wrapper:has(.prompt-input:disabled) .prompt-input {
|
||
border-color: rgba(99, 102, 241, 0.5);
|
||
box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3);
|
||
}
|
||
|
||
.optimizer-btn {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
right: 8px;
|
||
padding: 6px 12px;
|
||
background-color: #6366f1;
|
||
border: none;
|
||
border-radius: 6px;
|
||
color: white;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
transition: background-color 0.2s;
|
||
z-index: 10;
|
||
}
|
||
|
||
.optimizer-btn:hover:not(:disabled) {
|
||
background-color: #4f46e5;
|
||
}
|
||
|
||
.optimizer-btn:disabled {
|
||
background-color: #9ca3af;
|
||
cursor: not-allowed;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* 风格选项 */
|
||
.style-options {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 8px;
|
||
}
|
||
|
||
.style-option {
|
||
padding: 10px 12px;
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 6px;
|
||
color: #ffffff;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.style-option:hover {
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.style-option.active {
|
||
background-color: rgba(255, 204, 0, 0.2);
|
||
border-color: #ffcc00;
|
||
color: #ffcc00;
|
||
}
|
||
|
||
/* 数量选项 */
|
||
.quantity-options {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 8px;
|
||
}
|
||
|
||
.quantity-option {
|
||
padding: 10px 12px;
|
||
background-color: rgba(167, 139, 250, 0.1);
|
||
border: 1px solid rgba(167, 139, 250, 0.2);
|
||
border-radius: 6px;
|
||
color: #A78BFA;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
text-align: center;
|
||
}
|
||
|
||
.quantity-option:hover {
|
||
background-color: rgba(167, 139, 250, 0.2);
|
||
border-color: rgba(167, 139, 250, 0.4);
|
||
}
|
||
|
||
.quantity-option.active {
|
||
background: linear-gradient(135deg, rgba(167, 139, 250, 0.3) 0%, rgba(124, 58, 237, 0.3) 100%);
|
||
border-color: #A78BFA;
|
||
color: #A78BFA;
|
||
box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.3);
|
||
}
|
||
|
||
/* 生成按钮区域 */
|
||
.generate-section {
|
||
margin-top: 32px;
|
||
}
|
||
|
||
/* 横向控制布局 */
|
||
.generate-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 生成按钮样式 */
|
||
.generate-btn {
|
||
width: 100%;
|
||
--el-button-bg-color: #7C3AED;
|
||
--el-button-hover-bg-color: #8B5CF6;
|
||
--el-button-active-bg-color: #6B46C1;
|
||
--el-button-font-weight: 500;
|
||
--el-button-font-size: 16px;
|
||
--el-button-border-radius: 8px;
|
||
--el-button-border-color: #7C3AED;
|
||
--el-button--base-line-height: 2.5;
|
||
height: 40px;
|
||
}
|
||
|
||
.generate-3d-btn {
|
||
flex: 1;
|
||
--el-button-bg-color: #10b981;
|
||
--el-button-hover-bg-color: #059669;
|
||
--el-button-active-bg-color: #047857;
|
||
--el-button-font-weight: 500;
|
||
--el-button-font-size: 16px;
|
||
--el-button-border-radius: 8px;
|
||
--el-button-border-color: #10b981;
|
||
--el-button--base-line-height: 2.5;
|
||
height: 40px;
|
||
}
|
||
|
||
|
||
/* 下拉菜单项样式优化 */
|
||
:deep(.el-dropdown-menu) {
|
||
--el-dropdown-menu-bg-color: #fff;
|
||
--el-dropdown-menu-border-color: #e0e0e0;
|
||
--el-dropdown-menu-item-hover-bg-color: #fff2f0;
|
||
--el-dropdown-menu-item-hover-color: #ff4d4f;
|
||
--el-dropdown-menu-item-active-color: #ff4d4f;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
:deep(.el-dropdown-menu__item) {
|
||
padding: 10px 20px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
:deep(.el-dropdown-menu__item:hover) {
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
|
||
|
||
.btn-icon {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.floating-sidebar {
|
||
width: 100%;
|
||
max-width: none;
|
||
margin: 0;
|
||
padding: 15px;
|
||
max-height: calc(100vh - 10px);
|
||
}
|
||
}
|
||
|
||
/* 表情选择样式 */
|
||
.expression-selection {
|
||
width: 100%;
|
||
}
|
||
|
||
.expression-info {
|
||
margin-bottom: 12px;
|
||
padding: 8px 12px;
|
||
background: linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(107, 70, 193, 0.05) 100%);
|
||
border-radius: 6px;
|
||
border-left: 3px solid #A78BFA;
|
||
}
|
||
|
||
.expression-description {
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.expression-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 8px;
|
||
}
|
||
|
||
.expression-card {
|
||
position: relative;
|
||
padding: 8px;
|
||
background: linear-gradient(135deg, rgba(167, 139, 250, 0.08) 0%, rgba(107, 70, 193, 0.05) 100%);
|
||
border: 1px solid rgba(167, 139, 250, 0.2);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.expression-card:hover {
|
||
background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(107, 70, 193, 0.1) 100%);
|
||
border-color: rgba(167, 139, 250, 0.3);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(167, 139, 250, 0.2);
|
||
}
|
||
|
||
.expression-card.active {
|
||
background: linear-gradient(135deg, rgba(167, 139, 250, 0.25) 0%, rgba(124, 58, 237, 0.2) 100%);
|
||
border-color: #A78BFA;
|
||
box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.4);
|
||
}
|
||
|
||
.expression-preview {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.expression-preview img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.expression-name {
|
||
font-size: 11px;
|
||
color: #ffffff;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.expression-selected {
|
||
position: absolute;
|
||
top: 4px;
|
||
right: 4px;
|
||
width: 16px;
|
||
height: 16px;
|
||
background: linear-gradient(135deg, #A78BFA, #7C3AED);
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
box-shadow: 0 2px 4px rgba(167, 139, 250, 0.3);
|
||
}
|
||
|
||
/* 发色选择样式 */
|
||
.hair-color-info {
|
||
margin-bottom: 12px;
|
||
padding: 8px 12px;
|
||
background-color: rgba(59, 130, 246, 0.1);
|
||
border-radius: 6px;
|
||
border-left: 3px solid #3b82f6;
|
||
}
|
||
|
||
.hair-color-description {
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.hair-color-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 8px;
|
||
}
|
||
|
||
.hair-color-card {
|
||
position: relative;
|
||
padding: 8px;
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.hair-color-card:hover {
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
border-color: rgba(255, 255, 255, 0.2);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.hair-color-card.active {
|
||
background-color: rgba(59, 130, 246, 0.2);
|
||
border-color: #3b82f6;
|
||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
|
||
}
|
||
|
||
.hair-color-preview {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
margin-bottom: 6px;
|
||
position: relative;
|
||
}
|
||
|
||
.hair-color-selected {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
color: #3b82f6;
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.hair-color-name {
|
||
font-size: 11px;
|
||
color: #ffffff;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
/* 肤色选择样式 */
|
||
.skin-color-info {
|
||
margin-bottom: 12px;
|
||
padding: 8px 12px;
|
||
background-color: rgba(236, 72, 153, 0.1);
|
||
border-radius: 6px;
|
||
border-left: 3px solid #ec4899;
|
||
}
|
||
|
||
.skin-color-description {
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.skin-color-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 8px;
|
||
}
|
||
|
||
.skin-color-card {
|
||
position: relative;
|
||
padding: 8px;
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.skin-color-card:hover {
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
border-color: rgba(255, 255, 255, 0.2);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.skin-color-card.active {
|
||
background-color: rgba(236, 72, 153, 0.2);
|
||
border-color: #ec4899;
|
||
box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3);
|
||
}
|
||
|
||
.skin-color-preview {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
margin-bottom: 6px;
|
||
position: relative;
|
||
}
|
||
|
||
.skin-color-selected {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
color: #ec4899;
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.skin-color-name {
|
||
font-size: 11px;
|
||
color: #ffffff;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 480px) {
|
||
.expression-grid, .hair-color-grid, .skin-color-grid {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
}
|
||
|
||
/* 材质选择样式 */
|
||
.material-selection {
|
||
width: 100%;
|
||
}
|
||
|
||
.material-info {
|
||
margin-bottom: 12px;
|
||
padding: 8px 12px;
|
||
background-color: rgba(168, 85, 247, 0.1);
|
||
border-radius: 6px;
|
||
border-left: 3px solid #a855f7;
|
||
}
|
||
|
||
.material-description {
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.material-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
}
|
||
|
||
.material-card {
|
||
position: relative;
|
||
padding: 10px;
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
min-height: 100px;
|
||
}
|
||
|
||
.material-card:hover {
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
border-color: rgba(255, 255, 255, 0.2);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.material-card.active {
|
||
background-color: rgba(168, 85, 247, 0.2);
|
||
border-color: #a855f7;
|
||
box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.3);
|
||
}
|
||
|
||
.material-preview {
|
||
width: 40px;
|
||
height: 40px;
|
||
flex-shrink: 0;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.material-preview img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.material-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.material-placeholder .placeholder-icon {
|
||
font-size: 18px;
|
||
margin-bottom: 2px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.material-placeholder .placeholder-text {
|
||
font-size: 8px;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.material-details {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.material-name {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.material-type {
|
||
font-size: 10px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.material-selected {
|
||
position: absolute;
|
||
top: 6px;
|
||
right: 6px;
|
||
width: 18px;
|
||
height: 18px;
|
||
background-color: #a855f7;
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 颜色选择样式 */
|
||
.color-selection {
|
||
width: 100%;
|
||
}
|
||
|
||
.color-info {
|
||
margin-bottom: 12px;
|
||
padding: 8px 12px;
|
||
background-color: rgba(34, 197, 94, 0.1);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.color-description {
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.color-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 8px;
|
||
}
|
||
|
||
.color-card {
|
||
position: relative;
|
||
padding: 8px;
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
min-width: 80px;
|
||
}
|
||
|
||
.color-card:hover {
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
border-color: rgba(255, 255, 255, 0.2);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.color-card.active {
|
||
background-color: rgba(34, 197, 94, 0.2);
|
||
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
|
||
}
|
||
|
||
.color-preview {
|
||
position: relative;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
margin-bottom: 6px;
|
||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.color-selected {
|
||
color: white;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
.color-details {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.color-name {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
margin-bottom: 2px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.color-hex {
|
||
font-size: 9px;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
/* 电子模块选择样式 */
|
||
.module-selection {
|
||
width: 100%;
|
||
}
|
||
|
||
.module-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.module-card {
|
||
position: relative;
|
||
padding: 12px;
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.module-card:hover {
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
border-color: rgba(255, 255, 255, 0.2);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.module-card.active {
|
||
background-color: rgba(99, 102, 241, 0.2);
|
||
border-color: #6366f1;
|
||
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
|
||
}
|
||
|
||
.module-icon {
|
||
font-size: 24px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.module-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.module-name {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.module-size {
|
||
font-size: 11px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.module-selected {
|
||
position: absolute;
|
||
top: 6px;
|
||
right: 6px;
|
||
width: 18px;
|
||
height: 18px;
|
||
background-color: #6366f1;
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 草图选择样式 */
|
||
.sketch-selection {
|
||
width: 100%;
|
||
}
|
||
|
||
.sketch-info {
|
||
margin-bottom: 12px;
|
||
padding: 8px 12px;
|
||
background-color: rgba(99, 102, 241, 0.1);
|
||
border-radius: 6px;
|
||
border-left: 3px solid #6366f1;
|
||
}
|
||
|
||
.sketch-description {
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.sketch-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 10px;
|
||
}
|
||
|
||
.sketch-card {
|
||
position: relative;
|
||
padding: 12px;
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.sketch-card:hover {
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
border-color: rgba(255, 255, 255, 0.2);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.sketch-card.active {
|
||
background-color: rgba(34, 197, 94, 0.2);
|
||
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
|
||
}
|
||
|
||
.sketch-preview {
|
||
width: 60px;
|
||
height: 60px;
|
||
flex-shrink: 0;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.sketch-preview img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.sketch-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.placeholder-icon {
|
||
font-size: 20px;
|
||
margin-bottom: 4px;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.placeholder-text {
|
||
font-size: 10px;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.sketch-details {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.sketch-name {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.sketch-proportions {
|
||
font-size: 11px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.sketch-selected {
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
width: 20px;
|
||
height: 20px;
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 480px) {
|
||
.module-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.module-card {
|
||
padding: 10px;
|
||
}
|
||
|
||
.sketch-card {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
|
||
.sketch-preview {
|
||
width: 50px;
|
||
height: 50px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.color-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
|
||
.color-card {
|
||
min-height: 70px;
|
||
padding: 6px;
|
||
}
|
||
|
||
.color-preview {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
}
|
||
|
||
/* 亮色主题样式 */
|
||
:global(:root:not(.dark)) {
|
||
.floating-sidebar {
|
||
background-color: #FFFFFF;
|
||
border-right: 1px solid #E5E7EB;
|
||
color: #374151;
|
||
}
|
||
|
||
.sidebar-header {
|
||
background-color: #F9FAFB;
|
||
border-bottom: 1px solid #E5E7EB;
|
||
}
|
||
|
||
.back-button {
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #E5E7EB;
|
||
color: #374151;
|
||
}
|
||
|
||
.back-button:hover {
|
||
background-color: #F3F4F6;
|
||
border-color: #D1D5DB;
|
||
}
|
||
|
||
.ip-type-card {
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #E5E7EB;
|
||
color: #374151;
|
||
}
|
||
|
||
.ip-type-card:hover {
|
||
background-color: #F9FAFB;
|
||
border-color: #D1D5DB;
|
||
}
|
||
|
||
.ip-type-card.active {
|
||
background-color: rgba(99, 102, 241, 0.1);
|
||
border-color: #6366f1;
|
||
}
|
||
|
||
.image-upload-area {
|
||
background-color: #FFFFFF;
|
||
border: 2px dashed #D1D5DB;
|
||
color: #6B7280;
|
||
}
|
||
|
||
.image-upload-area:hover {
|
||
background-color: #F9FAFB;
|
||
border-color: #9CA3AF;
|
||
}
|
||
|
||
.image-upload-area.drag-over {
|
||
background-color: #F3F4F6;
|
||
border-color: #6366f1;
|
||
}
|
||
|
||
.remove-image {
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
color: white;
|
||
}
|
||
|
||
.remove-image:hover {
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
.prompt-input {
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #D1D5DB;
|
||
color: #374151;
|
||
}
|
||
|
||
.prompt-input:focus {
|
||
border-color: #6366f1;
|
||
}
|
||
|
||
.prompt-input::placeholder {
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.optimizer-btn {
|
||
background-color: #6366f1;
|
||
color: white;
|
||
}
|
||
|
||
.optimizer-btn:hover:not(:disabled) {
|
||
background-color: #4f46e5;
|
||
}
|
||
|
||
.style-option {
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #D1D5DB;
|
||
color: #374151;
|
||
}
|
||
|
||
.style-option:hover {
|
||
background-color: #F9FAFB;
|
||
border-color: #9CA3AF;
|
||
}
|
||
|
||
.style-option.active {
|
||
background-color: rgba(255, 204, 0, 0.1);
|
||
border-color: #ffcc00;
|
||
color: #b45309;
|
||
}
|
||
|
||
.quantity-option {
|
||
background-color: rgba(167, 139, 250, 0.05);
|
||
border: 1px solid rgba(167, 139, 250, 0.2);
|
||
color: #6B46C1;
|
||
}
|
||
|
||
.quantity-option:hover {
|
||
background-color: rgba(167, 139, 250, 0.1);
|
||
border-color: rgba(167, 139, 250, 0.3);
|
||
}
|
||
|
||
.quantity-option.active {
|
||
background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%);
|
||
border-color: #6B46C1;
|
||
color: #6B46C1;
|
||
}
|
||
|
||
.generate-btn {
|
||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||
color: white;
|
||
}
|
||
|
||
.generate-btn:hover:not(:disabled) {
|
||
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
|
||
}
|
||
|
||
.generate-btn:disabled {
|
||
background-color: #9CA3AF;
|
||
}
|
||
|
||
.expression-card {
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #E5E7EB;
|
||
color: #374151;
|
||
}
|
||
|
||
.expression-card:hover {
|
||
background-color: #F9FAFB;
|
||
border-color: #D1D5DB;
|
||
}
|
||
|
||
.expression-card.active {
|
||
background-color: rgba(34, 197, 94, 0.1);
|
||
}
|
||
|
||
.hair-color-card,
|
||
.skin-color-card,
|
||
.material-card,
|
||
.color-card,
|
||
.module-card,
|
||
.sketch-card {
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #E5E7EB;
|
||
color: #374151;
|
||
}
|
||
|
||
.hair-color-card:hover,
|
||
.skin-color-card:hover,
|
||
.material-card:hover,
|
||
.color-card:hover,
|
||
.module-card:hover,
|
||
.sketch-card:hover {
|
||
background-color: #F9FAFB;
|
||
border-color: #D1D5DB;
|
||
}
|
||
|
||
.hair-color-card.active,
|
||
.skin-color-card.active,
|
||
.material-card.active,
|
||
.color-card.active,
|
||
.module-card.active,
|
||
.sketch-card.active {
|
||
background-color: rgba(34, 197, 94, 0.1);
|
||
}
|
||
|
||
.color-preview,
|
||
.hair-color-preview,
|
||
.skin-color-preview {
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.material-preview,
|
||
.module-preview {
|
||
background-color: #F9FAFB;
|
||
}
|
||
|
||
.upload-icon,
|
||
.placeholder-icon {
|
||
opacity: 0.6;
|
||
color: #6B7280;
|
||
}
|
||
|
||
.upload-text,
|
||
.drag-text,
|
||
.expression-name,
|
||
.hair-color-name,
|
||
.skin-color-name,
|
||
.material-name,
|
||
.material-type,
|
||
.color-name,
|
||
.module-name,
|
||
.module-size,
|
||
.sketch-name,
|
||
.sketch-proportions,
|
||
.placeholder-text {
|
||
color: #374151;
|
||
}
|
||
|
||
.expression-description,
|
||
.hair-color-description,
|
||
.skin-color-description,
|
||
.material-description {
|
||
color: #6B7280;
|
||
}
|
||
|
||
.scan-overlay {
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.scan-line {
|
||
background: linear-gradient(90deg, transparent, #6366f1, transparent);
|
||
}
|
||
|
||
.section-label,
|
||
.form-section label {
|
||
/* color: #374151; */
|
||
}
|
||
|
||
.generate-worldview-btn {
|
||
background-color: #FFFFFF;
|
||
border: 1px solid #D1D5DB;
|
||
color: #374151;
|
||
}
|
||
|
||
.generate-worldview-btn:hover {
|
||
background-color: #F9FAFB;
|
||
border-color: #9CA3AF;
|
||
}
|
||
|
||
.sketch-info {
|
||
background-color: rgba(99, 102, 241, 0.05);
|
||
border-left: 3px solid #6366f1;
|
||
}
|
||
|
||
.sketch-description {
|
||
color: #6B7280;
|
||
}
|
||
}
|
||
</style> |