<template>
  <div class="creative-studio">
    <div class="main-content">
      <!-- 历史面板切换按钮 -->
      <div :class="['toggle-history-btn', { 'btn-hidden': !showHistory }]" @click="toggleHistoryPanel">
        <el-icon>
          <ArrowLeft v-if="showHistory" />
          <ArrowRight v-else />
        </el-icon>
      </div>
      
      <!-- 左侧创作历史面板 -->
      <div class="history-panel" :class="{ 'hidden': !showHistory }">
        <div class="history-content">
          <div class="history-header">
            <div class="header-left">
              <el-icon><Clock /></el-icon>
              <h3>创作历史</h3>
            </div>
            <div class="header-right">
              <el-button type="primary" size="small" @click="createNewProject">
                <el-icon><Plus /></el-icon>
                新建创作
              </el-button>
            </div>
          </div>
          <div class="history-list">
            <div 
              v-for="history in creationHistory" 
              :key="history.id"
              class="history-item"
              @click="loadHistoryProject(history)"
            >
              <div class="history-info">
                <h4>{{ history.name }}</h4>
                <p>基于 {{ history.template }}</p>
                <span class="history-time">{{ formatTime(history.createdAt) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 中间主要内容面板 -->
      <div class="main-panel">
        <!-- 模板选择界面 -->
        <div v-if="displayMode === 'templates'" class="template-panel">
          <div class="panel-header">
            <h3>创作模板</h3>
            <el-input
              v-model="templateSearchQuery"
              placeholder="搜索模板..."
              size="small"
              clearable
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>

          <div class="template-categories">
            <el-tabs v-model="activeTemplateCategory" @tab-change="handleCategoryChange">
              <el-tab-pane label="图片生成" name="image">
                <div class="template-grid">
                  <div 
                    v-for="template in imageTemplates" 
                    :key="template.id"
                    :class="['template-card', { active: selectedTemplate?.id === template.id }]"
                    @click="selectTemplate(template)"
                  >
                    <div class="template-preview">
                      <div class="preview-placeholder">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </div>
                    <div class="template-info">
                      <h4>{{ template.name }}</h4>
                      <p>{{ template.description }}</p>
                      <div class="template-tags">
                        <el-tag v-for="tag in template.tags" :key="tag" size="small">{{ tag }}</el-tag>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>

              <el-tab-pane label="PPT生成" name="ppt">
                <div class="template-grid">
                  <div 
                    v-for="template in pptTemplates" 
                    :key="template.id"
                    :class="['template-card', { active: selectedTemplate?.id === template.id }]"
                    @click="selectTemplate(template)"
                  >
                    <div class="template-preview">
                      <div class="preview-placeholder">
                        <el-icon><Document /></el-icon>
                      </div>
                    </div>
                    <div class="template-info">
                      <h4>{{ template.name }}</h4>
                      <p>{{ template.description }}</p>
                      <div class="template-tags">
                        <el-tag v-for="tag in template.tags" :key="tag" size="small">{{ tag }}</el-tag>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>

              <el-tab-pane label="Word文档" name="word">
                <div class="template-grid">
                  <div 
                    v-for="template in wordTemplates" 
                    :key="template.id"
                    :class="['template-card', { active: selectedTemplate?.id === template.id }]"
                    @click="selectTemplate(template)"
                  >
                    <div class="template-preview">
                      <div class="preview-placeholder">
                        <el-icon><Document /></el-icon>
                      </div>
                    </div>
                    <div class="template-info">
                      <h4>{{ template.name }}</h4>
                      <p>{{ template.description }}</p>
                      <div class="template-tags">
                        <el-tag v-for="tag in template.tags" :key="tag" size="small">{{ tag }}</el-tag>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>

              <el-tab-pane label="视频生成" name="video">
                <div class="template-grid">
                  <div 
                    v-for="template in videoTemplates" 
                    :key="template.id"
                    :class="['template-card', { active: selectedTemplate?.id === template.id }]"
                    @click="selectTemplate(template)"
                  >
                    <div class="template-preview">
                      <div class="preview-placeholder">
                        <el-icon><VideoPlay /></el-icon>
                      </div>
                    </div>
                    <div class="template-info">
                      <h4>{{ template.name }}</h4>
                      <p>{{ template.description }}</p>
                      <div class="template-tags">
                        <el-tag v-for="tag in template.tags" :key="tag" size="small">{{ tag }}</el-tag>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <!-- 创作配置界面 -->
        <div v-else-if="displayMode === 'config'" class="creation-panel">
          <div class="panel-header">
            <div style="display: flex; align-items: center; gap: 12px;">
              <el-button text @click="goBackToTemplates">
                <el-icon><ArrowLeft /></el-icon>
                返回
              </el-button>
              <h3>创作配置</h3>
            </div>
            <el-button v-if="selectedTemplate" type="primary" @click="startCreation" :loading="isCreating">
              <el-icon><Operation /></el-icon>
              开始创作
            </el-button>
          </div>

          <div v-if="!selectedTemplate" class="no-template">
            <el-empty description="请先选择一个创作模板" />
          </div>

          <div v-else class="creation-config">
            <!-- 需求描述 -->
            <div class="config-section">
              <h4>创作需求</h4>
              <el-input
                v-model="creationRequirement"
                type="textarea"
                :rows="4"
                placeholder="请详细描述您的创作需求，例如：为新产品制作一张现代简约风格的宣传海报，突出产品的科技感和品质感..."
                maxlength="1000"
                show-word-limit
              />
            </div>

            <!-- 素材上传 -->
            <div class="config-section">
              <h4>参考素材</h4>
              <el-upload
                class="upload-demo"
                action="#"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">
                  <el-icon><UploadFilled /></el-icon>
                  上传素材
                </el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    最多可上传3个文件，支持图片、文档等格式
                  </div>
                </template>
              </el-upload>
            </div>

            <!-- 高级配置 -->
            <div class="config-section">
              <h4>高级配置</h4>
              <el-collapse v-model="activeAdvancedConfig">
                <el-collapse-item name="style" title="样式配置">
                  <div class="collapse-content">
                    <div class="config-item">
                      <label>配色方案</label>
                      <el-select v-model="styleConfig.colorScheme" placeholder="选择配色方案">
                        <el-option label="现代简约" value="modern" />
                        <el-option label="科技感" value="tech" />
                        <el-option label="温馨自然" value="natural" />
                        <el-option label="商务专业" value="business" />
                      </el-select>
                    </div>
                    <div class="config-item">
                      <label>尺寸规格</label>
                      <el-select v-model="styleConfig.dimensions" placeholder="选择尺寸">
                        <el-option label="1920x1080 (高清)" value="1920x1080" />
                        <el-option label="1200x628 (社交媒体)" value="1200x628" />
                        <el-option label="800x600 (标准)" value="800x600" />
                      </el-select>
                    </div>
                    <div class="config-item">
                      <label>质量设置</label>
                      <el-select v-model="styleConfig.quality" placeholder="选择质量">
                        <el-option label="高" value="high" />
                        <el-option label="中" value="medium" />
                        <el-option label="低" value="low" />
                      </el-select>
                    </div>
                  </div>
                </el-collapse-item>
                <el-collapse-item name="content" title="内容配置">
                  <div class="collapse-content">
                    <div class="config-item">
                      <label>自动生成文案</label>
                      <el-switch v-model="contentConfig.autoGenerateText" />
                    </div>
                    <div class="config-item">
                      <label>语言风格</label>
                      <el-select v-model="contentConfig.languageStyle" placeholder="选择语言风格">
                        <el-option label="正式" value="formal" />
                        <el-option label="活泼" value="lively" />
                        <el-option label="专业" value="professional" />
                      </el-select>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧结果展示区域 -->
      <div class="result-panel">
        <div class="panel-header">
          <h3>创作结果</h3>
          <div class="result-actions">
            <el-button v-if="creationResults.length > 0" text @click="downloadAll">
              <el-icon><Download /></el-icon>
              下载全部
            </el-button>
          </div>
        </div>

        <div v-if="isCreating" class="creation-progress">
          <el-progress type="dashboard" :percentage="creationProgress" />
          <p>{{ currentStep }}</p>
        </div>

        <div v-else-if="creationResults.length > 0" class="results-grid">
          <div 
            v-for="result in creationResults" 
            :key="result.id"
            class="result-card"
          >
            <div class="result-preview">
              <div class="preview-placeholder">
                <el-icon v-if="result.type === 'image'">
                  <Picture />
                </el-icon>
                <el-icon v-else-if="result.type === 'ppt' || result.type === 'word'">
                  <Document />
                </el-icon>
                <el-icon v-else-if="result.type === 'video'">
                  <VideoPlay />
                </el-icon>
              </div>
            </div>
            <div class="result-info">
              <h4>{{ result.name }}</h4>
              <p>{{ result.description }}</p>
              <div class="result-actions">
                <el-button size="small" @click="downloadResult(result)">
                  <el-icon><Download /></el-icon>
                  下载
                </el-button>
                <el-button size="small" type="danger" @click="deleteResult(result)">
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <div v-else class="no-results">
          <el-empty description="创作结果将显示在这里" />
        </div>
      </div>
    </div>


  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  Search,
  Clock,
  Document,
  VideoPlay,
  UploadFilled,
  Download,
  Delete,
  Picture,
  Close,
  Operation,
  ArrowLeft
} from '@element-plus/icons-vue'

// 响应式数据
const templateSearchQuery = ref('')
const activeTemplateCategory = ref('image')
const selectedTemplate = ref(null)
const creationRequirement = ref('')
const activeAdvancedConfig = ref(['style'])
const displayMode = ref('templates') // 'templates' 或 'config'
const styleConfig = ref({
  colorScheme: 'modern',
  dimensions: '1920x1080',
  quality: 'high'
})
const contentConfig = ref({
  autoGenerateText: true,
  languageStyle: 'formal'
})
const fileList = ref([])
const isCreating = ref(false)
const creationProgress = ref(0)
const currentStep = ref('')
const creationResults = ref([])
const showHistory = ref(true)

// 模板数据
const imageTemplates = ref([
  {
    id: 'img-social-1',
    name: '社交媒体海报',
    description: '适合社交媒体分享的宣传海报',
    tags: ['社交媒体', '海报', '宣传']
  },
  {
    id: 'img-ad-1',
    name: '商品广告图',
    description: '电商商品展示广告设计',
    tags: ['电商', '广告', '商品']
  },
  {
    id: 'img-brand-1',
    name: '品牌视觉设计',
    description: '企业品牌形象设计模板',
    tags: ['品牌', '设计', '企业']
  }
])

const pptTemplates = ref([
  {
    id: 'ppt-business-1',
    name: '商务汇报PPT',
    description: '适用于商务汇报、项目展示',
    tags: ['商务', '汇报', '专业']
  },
  {
    id: 'ppt-education-1',
    name: '教育培训PPT',
    description: '教学课件、培训材料制作',
    tags: ['教育', '培训', '课件']
  }
])

const wordTemplates = ref([
  {
    id: 'word-report-1',
    name: '工作报告',
    description: '标准化工作报告模板',
    tags: ['报告', '工作', '文档']
  },
  {
    id: 'word-proposal-1',
    name: '项目提案',
    description: '项目提案书模板',
    tags: ['提案', '项目', '商务']
  }
])

const videoTemplates = ref([
  {
    id: 'video-promo-1',
    name: '产品宣传视频',
    description: '产品介绍和宣传视频制作',
    tags: ['宣传', '产品', '营销']
  },
  {
    id: 'video-tutorial-1',
    name: '教程演示视频',
    description: '操作教程和演示视频',
    tags: ['教程', '演示', '教育']
  }
])

// 历史记录数据
const creationHistory = ref([
  {
    id: 'history-1',
    name: '春季新品海报',
    template: '商品广告海报',
    createdAt: new Date(Date.now() - 1000 * 60 * 30)
  },
  {
    id: 'history-2',
    name: '季度总结PPT',
    template: '商务汇报PPT',
    createdAt: new Date(Date.now() - 1000 * 60 * 60 * 2)
  }
])

// 方法
const handleCategoryChange = () => {
  selectedTemplate.value = null
  creationRequirement.value = ''
}

const goBackToTemplates = () => {
  displayMode.value = 'templates'
}

const selectTemplate = (template: any) => {
  selectedTemplate.value = template
  creationRequirement.value = ''
  styleConfig.value = {
    colorScheme: 'modern',
    dimensions: '1920x1080',
    quality: 'high'
  }
  // 切换到创作配置显示模式
  displayMode.value = 'config'
}

const createNewProject = () => {
  selectedTemplate.value = null
  creationRequirement.value = ''
  creationResults.value = []
  activeTemplateCategory.value = 'image'
  displayMode.value = 'templates'
}

const startCreation = async () => {
  if (!selectedTemplate.value) {
    ElMessage.error('请选择创作模板')
    return
  }
  
  if (!creationRequirement.value.trim()) {
    ElMessage.error('请输入创作需求')
    return
  }
  
  isCreating.value = true
  creationProgress.value = 0
  
  try {
    // 模拟创作流程
    await simulateCreationProcess()
    
    // 模拟生成结果
    const mockResults = generateMockResults()
    creationResults.value.push(...mockResults)
    
    ElMessage.success('创作完成！')
  } catch (error) {
    ElMessage.error('创作失败，请重试')
    console.error('Creation error:', error)
  } finally {
    isCreating.value = false
  }
}

const simulateCreationProcess = async () => {
  const steps = [
    { progress: 25, message: '正在解析创作需求...' },
    { progress: 50, message: '正在处理上传素材...' },
    { progress: 75, message: '正在执行创作工作流...' },
    { progress: 100, message: '正在生成最终结果...' }
  ]
  
  for (const stepInfo of steps) {
    creationProgress.value = stepInfo.progress
    currentStep.value = stepInfo.message
    await new Promise(resolve => setTimeout(resolve, 1500))
  }
}

const generateMockResults = () => {
  return [
    {
      id: `result-${Date.now()}`,
      name: `${selectedTemplate.value.name}_1`,
      description: `基于您的需求生成的${selectedTemplate.value.name}`,
      type: activeTemplateCategory.value,
      createdAt: new Date()
    }
  ]
}

const downloadResult = (result: any) => {
  ElMessage.success(`正在下载 ${result.name}`)
}

const downloadAll = () => {
  ElMessage.success('正在打包下载所有结果')
}

const deleteResult = (result: any) => {
  ElMessageBox.confirm('确定要删除这个创作结果吗？', '确认删除', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = creationResults.value.findIndex(r => r.id === result.id)
    if (index > -1) {
      creationResults.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  })
}

const loadHistoryProject = (history: any) => {
  ElMessage.success(`正在加载 ${history.name}`)
  showHistory.value = false
}

const formatTime = (date: Date) => {
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffMins = Math.floor(diffMs / (1000 * 60))
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
  
  if (diffMins < 60) {
    return `${diffMins}分钟前`
  } else if (diffHours < 24) {
    return `${diffHours}小时前`
  } else {
    return `${diffDays}天前`
  }
}

const toggleHistoryPanel = () => {
  showHistory.value = !showHistory.value
}

// 文件上传处理函数
const handleRemove = (file: any) => {
  const index = fileList.value.indexOf(file)
  if (index > -1) {
    fileList.value.splice(index, 1)
  }
}

const handlePreview = (file: any) => {
  console.log('Preview file:', file)
}

const handleExceed = (files: any, fileList: any) => {
  ElMessage.warning(`最多只能上传3个文件，此次选择了${files.length}个文件，已自动忽略多余文件`)
}

const beforeRemove = (file: any) => {
  return ElMessageBox.confirm(`确定要删除 ${file.name}？`).then(
    () => true,
    () => false
  )
}
</script>

<style scoped>
.creative-studio {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
  background-color: #0f172a;
  overflow-x: hidden;
}

.studio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 60px;
  border-bottom: 1px solid #475569;
  background-color: #1e293b;
}

.studio-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #e2e8f0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.main-content {
  display: flex;
  flex: 1;
  width: 100%;
  overflow: hidden;
  gap: 16px;
  padding: 16px;
  box-sizing: border-box;
  position: relative;
}

/* 历史面板切换按钮 */
.toggle-history-btn {
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  width: 30px;
  height: 60px;
  background-color: #2d3748;
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
  transition: left 0.3s ease;
  color: #e2e8f0;
}

/* 历史面板隐藏时按钮的样式 */
.toggle-history-btn.btn-hidden {
  left: 0px;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
  border-radius: 0 8px 8px 0;
}

.toggle-history-btn:hover {
  background-color: #334155;
}

/* 左侧历史面板 */
.main-content .history-panel {
  width: 280px;
  background-color: #2d3748;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  position: relative;
  top: auto;
  right: auto;
  height: auto;
  border-left: none;
  transform: translateX(0);
}

.main-content .history-panel.hidden {
  transform: translateX(-100%);
  margin-left: -280px; /* 完全隐藏面板空间 */
  padding: 0;
  overflow: hidden;
}

.main-content .history-panel.hidden + .main-panel {
  margin-left: -16px;
}

.main-content .history-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-content .history-header {
  padding: 20px;
  border-bottom: 1px solid #334155;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-content .history-header .header-right {
  display: flex;
  align-items: center;
}

.main-content .history-header .header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.main-content .history-header h3 {
  margin: 0;
  color: #e2e8f0;
  font-size: 16px;
}

.main-content .history-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.main-content .history-item {
  padding: 16px;
  margin: 0 8px 8px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  border-bottom: 1px solid #334155;
  position: relative;
  overflow: hidden;
}

.main-content .history-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
  transition: left 0.5s ease;
}

.main-content .history-item:hover::before {
  left: 100%;
}

.main-content .history-item:hover {
  background: #334155;
  border-color: #475569;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.main-content .history-item:last-child {
  border-bottom: none;
}

.main-content .history-item.active {
  background: rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.main-content .history-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: #e2e8f0;
}

.main-content .history-info p {
  margin: 0 0 4px 0;
  font-size: 12px;
  color: #94a3b8;
}

.main-content .history-time {
  font-size: 12px;
  color: #64748b;
}

/* 中间主要内容面板 */
.main-panel {
  width: 400px; /* 固定宽度 */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 0; /* 防止flex子元素溢出 */
}

.template-panel, .creation-panel {
  background-color: #2d3748;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #334155;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #e2e8f0;
  flex: 1;
  min-width: 120px;
}

/* 返回按钮样式 */
.panel-header .el-button--text {
  color: #94a3b8;
  transition: color 0.3s ease;
}

.panel-header .el-button--text:hover {
  color: #cbd5e1;
}

.panel-header .el-button--text .el-icon {
  color: inherit;
  margin-right: 4px;
}

.panel-header .el-input {
  width: 200px;
  max-width: 100%;
}

.template-categories {
  margin-bottom: 20px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.template-card {
  border: 1px solid #334155;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  background-color: #2d3748;
}

.template-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: #409eff;
}

.template-card.active {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.template-preview {
  height: 120px;
  background-color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-placeholder {
  font-size: 40px;
  color: #94a3b8;
}

.template-info {
  padding: 12px;
}

.template-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: #e2e8f0;
}

.template-info p {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.template-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.creation-config {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.config-section {
  margin-bottom: 16px;
}

.config-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: #e2e8f0;
}

.no-template {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.collapse-content {
  padding: 16px 0;
}

.config-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
}

.config-item label {
  width: 100px;
  font-size: 14px;
  color: #cbd5e1;
}

.result-panel {
  flex: 4; /* 4份宽度 */
  background-color: #2d3748;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  padding: 20px;
  overflow-y: auto;
  border-left: 1px solid #334155;
  min-width: 0; /* 防止flex子元素溢出 */
}

.creation-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.creation-progress p {
  margin-top: 16px;
  color: #94a3b8;
}

.results-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.result-card {
  border: 1px solid #334155;
  border-radius: 8px;
  overflow: hidden;
  background-color: #334155;
}

.result-preview {
  height: 100px;
  background-color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-info {
  padding: 12px;
}

.result-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: #e2e8f0;
}

.result-info p {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: #94a3b8;
}

.result-actions {
  display: flex;
  gap: 8px;
}

.no-results {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}



/* Element Plus 组件深色主题覆盖 */
:deep(.el-tabs__header) {
  background: #2d3748;
  margin: 0;
  padding: 0 0 16px 0;
}

:deep(.el-tabs__nav-wrap::after) {
  background: #334155;
}

:deep(.el-tabs__item) {
  color: #cbd5e1;
  border-bottom: 2px solid transparent;
}

:deep(.el-tabs__item.is-active) {
  color: #409eff;
}

:deep(.el-input__wrapper) {
  background-color: #334155;
  border-color: #475569;
}

:deep(.el-input__inner) {
  color: #e2e8f0;
}

:deep(.el-collapse-item__header) {
  color: #e2e8f0;
  background-color: #2d3748;
  border-bottom: 1px solid #334155;
}

:deep(.el-collapse-item__content) {
  background-color: #2d3748;
  color: #e2e8f0;
}

:deep(.el-select__wrapper) {
  background-color: #334155;
  border-color: #475569;
}

:deep(.el-select__placeholder) {
  color: #94a3b8;
}

:deep(.el-select__input) {
  color: #e2e8f0;
}

:deep(.el-option) {
  color: #e2e8f0;
}

:deep(.el-option:hover) {
  background-color: #334155;
}

:deep(.el-upload__tip) {
  color: #94a3b8;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .result-panel {
    width: 100%;
    margin-top: 16px;
    height: 300px;
    border-left: none;
    border-top: 1px solid #334155;
  }
}
</style>