1699 lines
37 KiB
Vue
1699 lines
37 KiB
Vue
<template>
|
||
<div class="ai-3d-container">
|
||
<!-- Animated Background -->
|
||
<div class="bg-animation">
|
||
<div class="bg-gradient bg-gradient-1"></div>
|
||
<div class="bg-gradient bg-gradient-2"></div>
|
||
<div class="bg-gradient bg-gradient-3"></div>
|
||
</div>
|
||
|
||
<!-- 左侧生成栏 -->
|
||
<div class="left-panel">
|
||
<!-- Header with Logo -->
|
||
<div class="panel-logo">
|
||
<a-button type="text" class="back-btn" @click="handleBack">
|
||
<template #icon><ArrowLeftOutlined /></template>
|
||
</a-button>
|
||
<div class="logo-ring">
|
||
<div class="logo-icon">
|
||
<ThunderboltOutlined />
|
||
</div>
|
||
</div>
|
||
<div class="logo-text">
|
||
<h3>AI 3D Studio</h3>
|
||
<p>智能建模工作室</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-header">
|
||
<a-segmented
|
||
v-model:value="inputType"
|
||
:options="inputTypeOptions"
|
||
block
|
||
/>
|
||
</div>
|
||
|
||
<div class="panel-content">
|
||
<!-- 文生3D输入 -->
|
||
<div v-if="inputType === 'text'" class="text-input-section">
|
||
<div class="input-label">
|
||
<span class="label-icon">✨</span>
|
||
<span>创意描述</span>
|
||
</div>
|
||
<div class="input-hint">
|
||
用文字描述你的想法，AI 将为你生成精美的 3D 模型
|
||
</div>
|
||
<a-textarea
|
||
v-model:value="textContent"
|
||
placeholder="例如：一只卡通风格的橙色小猫，蓝色的大眼睛，尾巴卷曲..."
|
||
:rows="6"
|
||
:maxlength="150"
|
||
show-count
|
||
class="text-input"
|
||
/>
|
||
<div class="sample-section">
|
||
<div class="sample-header">
|
||
<span class="sample-title">灵感推荐</span>
|
||
<ReloadOutlined class="refresh-icon" @click="refreshSamples" />
|
||
</div>
|
||
<div class="sample-prompts">
|
||
<span
|
||
v-for="(sample, index) in currentSamples"
|
||
:key="index"
|
||
class="sample-tag"
|
||
@click="applySample(sample)"
|
||
>
|
||
{{ sample }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图生3D上传 -->
|
||
<div v-else class="image-input-section">
|
||
<div class="input-label">
|
||
<span class="label-icon">🖼️</span>
|
||
<span>参考图片</span>
|
||
</div>
|
||
<div class="input-hint">
|
||
上传参考图片，AI 将智能识别并生成 3D 模型
|
||
</div>
|
||
<a-upload-dragger
|
||
v-model:file-list="imageFileList"
|
||
:before-upload="handleBeforeUpload"
|
||
:max-count="1"
|
||
accept="image/*"
|
||
class="image-upload"
|
||
>
|
||
<p class="upload-icon">
|
||
<PictureOutlined />
|
||
</p>
|
||
<p class="upload-text">点击或拖拽图片到此处</p>
|
||
<p class="upload-hint">支持 JPG、PNG 格式，最大 10MB</p>
|
||
</a-upload-dragger>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-footer">
|
||
<button
|
||
class="generate-btn"
|
||
:class="{ 'is-loading': generating, 'is-disabled': !canGenerate }"
|
||
:disabled="!canGenerate"
|
||
@click="handleGenerate"
|
||
>
|
||
<span class="btn-bg"></span>
|
||
<span class="btn-content">
|
||
<LoadingOutlined v-if="generating" class="spin-icon" />
|
||
<ThunderboltOutlined v-else />
|
||
<span>{{ generating ? "生成中..." : "立即生成" }}</span>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧内容区 -->
|
||
<div class="right-panel">
|
||
<!-- 介绍区 -->
|
||
<div class="intro-section">
|
||
<div class="intro-badge">
|
||
<span class="badge-dot"></span>
|
||
<span>AI Powered</span>
|
||
</div>
|
||
<h1 class="intro-title">用一句话、一张图<br />创造你的 3D 世界</h1>
|
||
<p class="intro-desc">
|
||
借助先进的 AI 技术，将文字描述或图片瞬间转化为专业级 3D 模型
|
||
</p>
|
||
|
||
<div class="intro-features">
|
||
<div class="feature-card">
|
||
<div class="feature-icon gradient-1">
|
||
<span>✨</span>
|
||
</div>
|
||
<div class="feature-info">
|
||
<h3>AI 智能建模</h3>
|
||
<p>输入文字或图片，自动生成 3D 模型</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon gradient-2">
|
||
<span>👁</span>
|
||
</div>
|
||
<div class="feature-info">
|
||
<h3>实时预览</h3>
|
||
<p>支持旋转、缩放，全方位查看细节</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon gradient-3">
|
||
<span>📁</span>
|
||
</div>
|
||
<div class="feature-info">
|
||
<h3>作品管理</h3>
|
||
<p>自动保存至个人作品库，随时访问</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon gradient-4">
|
||
<span>🔄</span>
|
||
</div>
|
||
<div class="feature-info">
|
||
<h3>迭代优化</h3>
|
||
<p>基于已有作品再次生成与优化</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 创作历史区 -->
|
||
<div class="history-section">
|
||
<div class="history-header">
|
||
<div class="header-left">
|
||
<h2 class="history-title">创作历史</h2>
|
||
<span class="history-count"
|
||
>{{ allHistoryTotal || historyList.length }} 个作品</span
|
||
>
|
||
</div>
|
||
<a class="view-all" @click="goToHistory">
|
||
查看全部
|
||
<ArrowRightOutlined />
|
||
</a>
|
||
</div>
|
||
|
||
<div v-if="historyLoading" class="history-loading">
|
||
<div class="loading-spinner">
|
||
<div class="spinner-ring"></div>
|
||
<div class="spinner-ring"></div>
|
||
<div class="spinner-ring"></div>
|
||
</div>
|
||
<p>加载中...</p>
|
||
</div>
|
||
|
||
<div v-else-if="historyList.length === 0" class="history-empty">
|
||
<div class="empty-icon">
|
||
<FileImageOutlined />
|
||
</div>
|
||
<p class="empty-title">还没有创作记录</p>
|
||
<p class="empty-text">开始你的第一次 3D 创作之旅吧</p>
|
||
</div>
|
||
|
||
<div v-else ref="historyGridRef" class="history-grid">
|
||
<div
|
||
v-for="task in displayedHistoryList"
|
||
:key="task.id"
|
||
class="history-card"
|
||
@click="handleViewTask(task)"
|
||
>
|
||
<div class="card-glow"></div>
|
||
<div class="card-preview">
|
||
<img
|
||
v-if="task.status === 'completed' && task.previewUrl"
|
||
:src="getPreviewUrl(task)"
|
||
alt="预览"
|
||
class="preview-image"
|
||
@error="handleImageError"
|
||
@load="handleImageLoad"
|
||
/>
|
||
<div
|
||
v-else-if="
|
||
task.status === 'processing' || task.status === 'pending'
|
||
"
|
||
class="preview-loading"
|
||
>
|
||
<div class="loading-dots">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
<span class="loading-text">生成中</span>
|
||
</div>
|
||
<div
|
||
v-else-if="
|
||
task.status === 'failed' || task.status === 'timeout'
|
||
"
|
||
class="preview-failed"
|
||
>
|
||
<div class="failed-icon">
|
||
<CloseOutlined />
|
||
</div>
|
||
</div>
|
||
<div v-else class="preview-placeholder">
|
||
<FileImageOutlined />
|
||
</div>
|
||
|
||
<!-- Status Badge -->
|
||
<div class="status-badge" :class="`status-${task.status}`">
|
||
{{ getStatusText(task.status) }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-info">
|
||
<div class="card-desc" :title="task.inputContent">
|
||
{{ task.inputContent }}
|
||
</div>
|
||
<div class="card-meta">
|
||
<span class="card-time">
|
||
<ClockCircleOutlined />
|
||
{{ formatTime(task.createTime) }}
|
||
</span>
|
||
<div class="card-actions" @click.stop>
|
||
<a-tooltip v-if="task.status === 'completed'" title="预览">
|
||
<div class="action-btn" @click="handlePreview(task)">
|
||
<EyeOutlined />
|
||
</div>
|
||
</a-tooltip>
|
||
<a-tooltip
|
||
v-if="['failed', 'timeout'].includes(task.status)"
|
||
title="重试"
|
||
>
|
||
<div
|
||
class="action-btn"
|
||
:class="{ disabled: task.retryCount >= 3 }"
|
||
@click="handleRetry(task)"
|
||
>
|
||
<ReloadOutlined />
|
||
</div>
|
||
</a-tooltip>
|
||
<a-tooltip title="删除">
|
||
<div class="action-btn danger" @click="handleDelete(task)">
|
||
<DeleteOutlined />
|
||
</div>
|
||
</a-tooltip>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, onUnmounted, nextTick } from "vue"
|
||
import { useRouter, useRoute } from "vue-router"
|
||
import { message, Modal } from "ant-design-vue"
|
||
import {
|
||
ReloadOutlined,
|
||
PictureOutlined,
|
||
ThunderboltOutlined,
|
||
LoadingOutlined,
|
||
CloseOutlined,
|
||
FileImageOutlined,
|
||
EyeOutlined,
|
||
DeleteOutlined,
|
||
ArrowRightOutlined,
|
||
ArrowLeftOutlined,
|
||
ClockCircleOutlined,
|
||
} from "@ant-design/icons-vue"
|
||
import type { UploadFile } from "ant-design-vue"
|
||
import {
|
||
createAI3DTask,
|
||
getAI3DTasks,
|
||
getAI3DTask,
|
||
retryAI3DTask,
|
||
deleteAI3DTask,
|
||
type AI3DTask,
|
||
} from "@/api/ai-3d"
|
||
import { uploadFile } from "@/api/upload"
|
||
import { useAuthStore } from "@/stores/auth"
|
||
import dayjs from "dayjs"
|
||
|
||
// 获取认证状态
|
||
const authStore = useAuthStore()
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
|
||
// 返回首页
|
||
const handleBack = () => {
|
||
const tenantCode = route.params.tenantCode as string
|
||
router.push(`/${tenantCode}`)
|
||
}
|
||
|
||
// 跳转到历史记录页面
|
||
const goToHistory = () => {
|
||
const tenantCode = route.params.tenantCode as string
|
||
router.push(`/${tenantCode}/workbench/3d-lab/history`)
|
||
}
|
||
|
||
// 输入类型选项
|
||
const inputTypeOptions = [
|
||
{ label: "文生3D", value: "text" },
|
||
{ label: "图生3D", value: "image" },
|
||
]
|
||
|
||
// 示例提示词
|
||
const samplePrompts = [
|
||
["啄木鸟", "尖锐的嘴", "金黄色"],
|
||
["可爱的猫咪", "卡通风格", "蓝色眼睛"],
|
||
["机器人", "金属质感", "未来风格"],
|
||
["中式花瓶", "青花瓷", "精致纹理"],
|
||
["小恐龙", "Q版造型", "绿色皮肤"],
|
||
["宇航员", "太空服", "写实风格"],
|
||
]
|
||
|
||
// 状态
|
||
const inputType = ref<"text" | "image">("text")
|
||
const textContent = ref("")
|
||
const imageFileList = ref<UploadFile[]>()
|
||
const imageUrl = ref("")
|
||
const generating = ref(false)
|
||
const currentSampleIndex = ref(0)
|
||
|
||
// 历史记录
|
||
const historyList = ref<AI3DTask[]>([])
|
||
const historyLoading = ref(false)
|
||
const allHistoryTotal = ref(0)
|
||
|
||
// 历史网格容器引用和宽度
|
||
const historyGridRef = ref<HTMLElement | null>(null)
|
||
const historyGridWidth = ref(0)
|
||
|
||
// 轮询定时器
|
||
let pollingTimer: number | null = null
|
||
// ResizeObserver 用于监听容器宽度变化
|
||
let resizeObserver: ResizeObserver | null = null
|
||
|
||
// 计算属性
|
||
const currentSamples = computed(() => samplePrompts[currentSampleIndex.value])
|
||
|
||
const canGenerate = computed(() => {
|
||
// 首先检查用户是否有创建权限
|
||
if (!authStore.hasPermission("ai-3d:create")) {
|
||
return false
|
||
}
|
||
|
||
// 检查输入内容是否有效
|
||
if (inputType.value === "text") {
|
||
return textContent.value.trim().length > 0
|
||
} else {
|
||
return imageUrl.value.length > 0
|
||
}
|
||
})
|
||
|
||
// 计算一行最多能展示的卡片数量
|
||
// 卡片宽度 240px + 间距 20px = 260px
|
||
const maxCardsPerRow = computed(() => {
|
||
if (historyGridWidth.value === 0) return 6 // 默认值
|
||
const cardWidth = 240
|
||
const gap = 20
|
||
// 可用宽度 = 容器宽度 - 左右 padding (48px * 2)
|
||
const availableWidth = historyGridWidth.value - 96
|
||
// 计算能放多少个：可用宽度 / (卡片宽度 + 间距)
|
||
const count = Math.floor(availableWidth / (cardWidth + gap))
|
||
return Math.max(1, count) // 至少显示1个
|
||
})
|
||
|
||
// 限制显示的历史记录数量
|
||
const displayedHistoryList = computed(() => {
|
||
return historyList.value.slice(0, maxCardsPerRow.value)
|
||
})
|
||
|
||
// 刷新示例
|
||
const refreshSamples = () => {
|
||
currentSampleIndex.value =
|
||
(currentSampleIndex.value + 1) % samplePrompts.length
|
||
}
|
||
|
||
// 应用示例
|
||
const applySample = (sample: string) => {
|
||
if (textContent.value) {
|
||
textContent.value += "，" + sample
|
||
} else {
|
||
textContent.value = sample
|
||
}
|
||
}
|
||
|
||
// 聚焦输入
|
||
const focusInput = () => {
|
||
// 滚动到左侧面板
|
||
}
|
||
|
||
// 图片上传前处理
|
||
const handleBeforeUpload = async (file: File) => {
|
||
const isImage = file.type.startsWith("image/")
|
||
if (!isImage) {
|
||
message.error("只能上传图片文件")
|
||
return false
|
||
}
|
||
|
||
const isLt10M = file.size / 1024 / 1024 < 10
|
||
if (!isLt10M) {
|
||
message.error("图片大小不能超过 10MB")
|
||
return false
|
||
}
|
||
|
||
// 上传图片
|
||
try {
|
||
const result = await uploadFile(file)
|
||
imageUrl.value = result.url
|
||
message.success("图片上传成功")
|
||
} catch (error) {
|
||
message.error("图片上传失败")
|
||
return false
|
||
}
|
||
|
||
return false // 阻止默认上传行为
|
||
}
|
||
|
||
// 生成3D模型
|
||
const handleGenerate = async () => {
|
||
if (!canGenerate.value) return
|
||
|
||
generating.value = true
|
||
try {
|
||
const content =
|
||
inputType.value === "text" ? textContent.value.trim() : imageUrl.value
|
||
|
||
const task = await createAI3DTask({
|
||
inputType: inputType.value,
|
||
inputContent: content,
|
||
})
|
||
|
||
// 清空输入
|
||
if (inputType.value === "text") {
|
||
textContent.value = ""
|
||
} else {
|
||
imageFileList.value = []
|
||
imageUrl.value = ""
|
||
}
|
||
|
||
// 跳转到生成页面
|
||
const taskData = task.data || task // 兼容不同的响应格式
|
||
router.push({
|
||
name: "AI3DGenerate",
|
||
params: { taskId: taskData.id },
|
||
})
|
||
} catch (error: any) {
|
||
message.error(error.response?.data?.message || "提交失败，请重试")
|
||
} finally {
|
||
generating.value = false
|
||
}
|
||
}
|
||
|
||
// 获取历史记录（最近6条）
|
||
const fetchHistory = async () => {
|
||
historyLoading.value = true
|
||
try {
|
||
const res = await getAI3DTasks({ page: 1, pageSize: 6 })
|
||
const data = res.data || res // 兼容不同的响应格式
|
||
historyList.value = data.list || []
|
||
// 如果还没有获取过总数，则保存总数
|
||
if (!allHistoryTotal.value && data.total) {
|
||
allHistoryTotal.value = data.total
|
||
}
|
||
} catch (error) {
|
||
console.error("获取历史记录失败:", error)
|
||
} finally {
|
||
historyLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 开始轮询（检查处理中的任务）
|
||
const startPolling = () => {
|
||
if (pollingTimer) return
|
||
|
||
pollingTimer = window.setInterval(async () => {
|
||
const processingTasks = historyList.value.filter(
|
||
(t) => t.status === "pending" || t.status === "processing"
|
||
)
|
||
|
||
if (processingTasks.length === 0) {
|
||
stopPolling()
|
||
return
|
||
}
|
||
|
||
// 刷新历史记录
|
||
await fetchHistory()
|
||
}, 3000)
|
||
}
|
||
|
||
// 停止轮询
|
||
const stopPolling = () => {
|
||
if (pollingTimer) {
|
||
clearInterval(pollingTimer)
|
||
pollingTimer = null
|
||
}
|
||
}
|
||
|
||
// 预览3D模型
|
||
const handlePreview = (task: AI3DTask) => {
|
||
if (task.resultUrl) {
|
||
const tenantCode = route.params.tenantCode as string
|
||
router.push({
|
||
path: `/${tenantCode}/workbench/model-viewer`,
|
||
query: { url: task.resultUrl },
|
||
})
|
||
}
|
||
}
|
||
|
||
// 查看任务详情
|
||
const handleViewTask = (task: AI3DTask) => {
|
||
// 跳转到生成页面查看详情
|
||
router.push({
|
||
name: "AI3DGenerate",
|
||
params: { taskId: task.id },
|
||
})
|
||
}
|
||
|
||
// 重试任务
|
||
const handleRetry = async (task: AI3DTask) => {
|
||
if (task.retryCount >= 3) {
|
||
message.warning("已达到最大重试次数，请创建新任务")
|
||
return
|
||
}
|
||
|
||
try {
|
||
await retryAI3DTask(task.id)
|
||
message.success("重试已提交")
|
||
fetchHistory()
|
||
startPolling()
|
||
} catch (error: any) {
|
||
message.error(error.response?.data?.message || "重试失败")
|
||
}
|
||
}
|
||
|
||
// 删除任务
|
||
const handleDelete = (task: AI3DTask) => {
|
||
Modal.confirm({
|
||
title: "确认删除",
|
||
content: "确定要删除这条创作记录吗？",
|
||
okText: "删除",
|
||
okType: "danger",
|
||
cancelText: "取消",
|
||
async onOk() {
|
||
try {
|
||
await deleteAI3DTask(task.id)
|
||
message.success("删除成功")
|
||
fetchHistory()
|
||
} catch (error) {
|
||
message.error("删除失败")
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
// 获取预览图URL（通过代理访问，解决CORS问题）
|
||
const getPreviewUrl = (task: AI3DTask) => {
|
||
if (task.previewUrl) {
|
||
// 如果是腾讯云COS链接，通过代理访问
|
||
if (
|
||
task.previewUrl.includes("tencentcos.cn") ||
|
||
task.previewUrl.includes("qcloud.com")
|
||
) {
|
||
// 确保URL正确编码
|
||
const encodedUrl = encodeURIComponent(task.previewUrl)
|
||
return `/api/ai-3d/proxy-preview?url=${encodedUrl}`
|
||
}
|
||
// 其他URL直接返回
|
||
return task.previewUrl
|
||
}
|
||
return ""
|
||
}
|
||
|
||
// 获取状态文本
|
||
const getStatusText = (status: string) => {
|
||
const texts: Record<string, string> = {
|
||
pending: "等待中",
|
||
processing: "生成中",
|
||
completed: "已完成",
|
||
failed: "失败",
|
||
timeout: "超时",
|
||
}
|
||
return texts[status] || status
|
||
}
|
||
|
||
// 图片加载错误处理
|
||
const handleImageError = (event: Event) => {
|
||
const img = event.target as HTMLImageElement
|
||
console.error("预览图加载失败:", img.src)
|
||
// 可以在这里添加错误提示或显示占位图
|
||
}
|
||
|
||
// 图片加载成功处理
|
||
const handleImageLoad = () => {
|
||
// 图片加载成功，可以在这里做一些处理
|
||
console.log("预览图加载成功")
|
||
}
|
||
|
||
// 格式化时间
|
||
const formatTime = (time: string) => {
|
||
return dayjs(time).format("MM-DD HH:mm")
|
||
}
|
||
|
||
// 更新容器宽度
|
||
const updateGridWidth = () => {
|
||
if (historyGridRef.value) {
|
||
historyGridWidth.value = historyGridRef.value.offsetWidth
|
||
}
|
||
}
|
||
|
||
// 页面加载
|
||
onMounted(async () => {
|
||
await fetchHistory()
|
||
|
||
// 等待 DOM 更新后计算容器宽度
|
||
await nextTick()
|
||
updateGridWidth()
|
||
|
||
// 监听容器宽度变化
|
||
if (historyGridRef.value) {
|
||
resizeObserver = new ResizeObserver(() => {
|
||
updateGridWidth()
|
||
})
|
||
resizeObserver.observe(historyGridRef.value)
|
||
}
|
||
|
||
// 检查是否有处理中的任务，有则开启轮询
|
||
const hasProcessing = historyList.value.some(
|
||
(t) => t.status === "pending" || t.status === "processing"
|
||
)
|
||
if (hasProcessing) {
|
||
startPolling()
|
||
}
|
||
})
|
||
|
||
// 页面卸载
|
||
onUnmounted(() => {
|
||
stopPolling()
|
||
if (resizeObserver) {
|
||
resizeObserver.disconnect()
|
||
resizeObserver = null
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
// ==========================================
|
||
// 蓝色主题色彩方案 - 简洁统一
|
||
// ==========================================
|
||
// 主色调 - 蓝色系
|
||
$primary: #0958d9; // 主题蓝色（与系统统一）
|
||
$primary-light: #1677ff;
|
||
$primary-dark: #003eb3;
|
||
$secondary: #4096ff; // 浅蓝色作为辅助色
|
||
$accent: #1677ff; // 蓝色强调
|
||
$success: #52c41a;
|
||
$warning: #faad14;
|
||
$error: #ff4d4f;
|
||
|
||
// 背景色
|
||
$background: #f5f5f5; // 浅灰背景（与系统统一）
|
||
$surface: #ffffff; // 白色卡片
|
||
$surface-light: #fafafa;
|
||
|
||
// 文字色
|
||
$text: rgba(0, 0, 0, 0.85); // 深色文字
|
||
$text-secondary: rgba(0, 0, 0, 0.65);
|
||
$text-muted: rgba(0, 0, 0, 0.45);
|
||
$text-light: #ffffff; // 深色区域的白色文字
|
||
|
||
// 渐变 - 蓝色渐变
|
||
$gradient-primary: linear-gradient(135deg, $primary 0%, $primary-light 100%);
|
||
$gradient-secondary: linear-gradient(135deg, $accent 0%, $primary 100%);
|
||
|
||
.ai-3d-container {
|
||
display: flex;
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background: $background;
|
||
position: relative;
|
||
overflow: hidden;
|
||
align-items: stretch;
|
||
}
|
||
|
||
// ==========================================
|
||
// 简化背景动画 - 保留微妙效果
|
||
// ==========================================
|
||
.bg-animation {
|
||
position: absolute;
|
||
inset: 0;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.bg-gradient {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(100px);
|
||
opacity: 0.15;
|
||
animation: float 30s ease-in-out infinite;
|
||
|
||
&.bg-gradient-1 {
|
||
width: 600px;
|
||
height: 600px;
|
||
background: $primary;
|
||
top: -200px;
|
||
left: -100px;
|
||
}
|
||
|
||
&.bg-gradient-2 {
|
||
width: 500px;
|
||
height: 500px;
|
||
background: $primary-light;
|
||
bottom: -150px;
|
||
right: -100px;
|
||
animation-delay: -10s;
|
||
}
|
||
|
||
&.bg-gradient-3 {
|
||
width: 400px;
|
||
height: 400px;
|
||
background: $secondary;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
animation-delay: -20s;
|
||
opacity: 0.1;
|
||
}
|
||
}
|
||
|
||
@keyframes float {
|
||
0%,
|
||
100% {
|
||
transform: translate(0, 0) scale(1);
|
||
}
|
||
33% {
|
||
transform: translate(30px, -30px) scale(1.05);
|
||
}
|
||
66% {
|
||
transform: translate(-20px, 20px) scale(0.95);
|
||
}
|
||
}
|
||
|
||
// ==========================================
|
||
// Left Panel - 浅色变体
|
||
// ==========================================
|
||
.left-panel {
|
||
width: 380px;
|
||
min-height: 100vh;
|
||
background: rgba($surface, 0.5);
|
||
backdrop-filter: blur(20px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
z-index: 1;
|
||
align-self: stretch;
|
||
border-right: 1px solid rgba($primary, 0.1);
|
||
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.panel-logo {
|
||
padding: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
border-bottom: 1px solid rgba($primary, 0.1);
|
||
flex-shrink: 0;
|
||
|
||
.back-btn {
|
||
color: $text !important;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px !important;
|
||
border: 1px solid rgba($primary, 0.3) !important;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s !important;
|
||
flex-shrink: 0;
|
||
|
||
&:hover {
|
||
background: rgba($primary, 0.2) !important;
|
||
border-color: $primary !important;
|
||
transform: translateY(-1px);
|
||
}
|
||
}
|
||
|
||
.logo-ring {
|
||
position: relative;
|
||
width: 56px;
|
||
height: 56px;
|
||
border: 2px solid transparent;
|
||
border-radius: 50%;
|
||
background:
|
||
linear-gradient($surface, $surface) padding-box,
|
||
$gradient-primary border-box;
|
||
animation: rotateBorder 8s linear infinite;
|
||
}
|
||
|
||
.logo-icon {
|
||
position: absolute;
|
||
inset: 6px;
|
||
background: $gradient-primary;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
color: white;
|
||
}
|
||
|
||
.logo-text {
|
||
h3 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
background: $gradient-primary;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
p {
|
||
margin: 4px 0 0;
|
||
font-size: 12px;
|
||
color: $text-muted;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes rotateBorder {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.panel-header {
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid rgba($primary, 0.1);
|
||
flex-shrink: 0;
|
||
|
||
:deep(.ant-segmented) {
|
||
background: rgba($surface-light, 0.6);
|
||
border: 1px solid rgba($primary, 0.2);
|
||
|
||
.ant-segmented-item {
|
||
color: $text-muted;
|
||
|
||
&-selected {
|
||
background: $gradient-primary;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.panel-content {
|
||
flex: 1;
|
||
padding: 24px;
|
||
overflow-y: auto;
|
||
min-height: 0;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-track {
|
||
background: rgba($primary, 0.05);
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
background: rgba($primary, 0.3);
|
||
border-radius: 3px;
|
||
|
||
&:hover {
|
||
background: rgba($primary, 0.5);
|
||
}
|
||
}
|
||
}
|
||
|
||
.input-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: $text;
|
||
margin-bottom: 8px;
|
||
|
||
.label-icon {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.input-hint {
|
||
font-size: 13px;
|
||
color: $text-muted;
|
||
margin-bottom: 16px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.text-input {
|
||
background: rgba($surface-light, 0.6) !important;
|
||
border: 2px solid rgba($primary, 0.15) !important;
|
||
border-radius: 12px;
|
||
color: $text;
|
||
resize: none;
|
||
transition: all 0.3s;
|
||
|
||
&::placeholder {
|
||
color: rgba($text-muted, 0.5);
|
||
}
|
||
|
||
&:hover {
|
||
border-color: rgba($primary, 0.4) !important;
|
||
}
|
||
|
||
&:focus {
|
||
border-color: $primary !important;
|
||
box-shadow: 0 0 0 4px rgba($primary, 0.1) !important;
|
||
background: rgba($surface-light, 0.8) !important;
|
||
}
|
||
|
||
:deep(.ant-input-data-count) {
|
||
color: $text-muted;
|
||
}
|
||
}
|
||
|
||
.sample-section {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.sample-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
|
||
.sample-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: $text;
|
||
}
|
||
|
||
.refresh-icon {
|
||
color: $text-muted;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
font-size: 14px;
|
||
|
||
&:hover {
|
||
color: $primary-light;
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
.sample-prompts {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
|
||
.sample-tag {
|
||
padding: 6px 14px;
|
||
background: rgba($primary, 0.1);
|
||
border: 1px solid rgba($primary, 0.2);
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
color: $text;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
background: rgba($primary-light, 0.2);
|
||
border-color: $primary-light;
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
}
|
||
|
||
.image-upload {
|
||
:deep(.ant-upload-drag) {
|
||
background: rgba($surface-light, 0.6) !important;
|
||
border: 2px dashed rgba($primary, 0.3) !important;
|
||
border-radius: 12px;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
border-color: $primary-light !important;
|
||
background: rgba($surface-light, 0.8) !important;
|
||
}
|
||
|
||
.upload-icon {
|
||
color: $primary-light;
|
||
font-size: 56px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.upload-text {
|
||
color: $text;
|
||
font-size: 15px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.upload-hint {
|
||
color: $text-muted;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.panel-footer {
|
||
padding: 24px;
|
||
border-top: 1px solid rgba($primary, 0.1);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.generate-btn {
|
||
width: 100%;
|
||
height: 56px;
|
||
border: none;
|
||
border-radius: 14px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: transparent;
|
||
|
||
.btn-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: $gradient-primary;
|
||
transition: all 0.4s;
|
||
}
|
||
|
||
.btn-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
color: white;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.spin-icon {
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
&:hover:not(.is-disabled) {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 15px 35px rgba($primary, 0.4);
|
||
|
||
.btn-bg {
|
||
transform: scale(1.02);
|
||
}
|
||
}
|
||
|
||
&:active:not(.is-disabled) {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
&.is-disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
&.is-loading {
|
||
.btn-bg {
|
||
animation: gradientShift 2s ease infinite;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes gradientShift {
|
||
0%,
|
||
100% {
|
||
background: $gradient-primary;
|
||
}
|
||
50% {
|
||
background: $gradient-secondary;
|
||
}
|
||
}
|
||
|
||
// ==========================================
|
||
// Right Panel
|
||
// ==========================================
|
||
.right-panel {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
position: relative;
|
||
z-index: 1;
|
||
height: 100vh;
|
||
background: rgba($surface, 0.3);
|
||
backdrop-filter: blur(20px);
|
||
}
|
||
|
||
.intro-section {
|
||
padding: 48px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.intro-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 14px;
|
||
background: rgba($primary, 0.15);
|
||
border: 1px solid rgba($primary, 0.3);
|
||
border-radius: 20px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: $primary-light;
|
||
letter-spacing: 1px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 20px;
|
||
|
||
.badge-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
background: $accent;
|
||
border-radius: 50%;
|
||
animation: pulse 1.5s ease-in-out infinite;
|
||
}
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%,
|
||
100% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
transform: scale(0.8);
|
||
}
|
||
}
|
||
|
||
.intro-title {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
color: $text;
|
||
margin-bottom: 16px;
|
||
line-height: 1.3;
|
||
background: $gradient-primary;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.intro-desc {
|
||
font-size: 16px;
|
||
color: $text-muted;
|
||
margin-bottom: 32px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.intro-features {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
.feature-card {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
padding: 20px;
|
||
background: $surface-light;
|
||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||
border-radius: 8px;
|
||
transition: all 0.3s;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
flex-shrink: 0;
|
||
|
||
&.gradient-1 {
|
||
background: linear-gradient(135deg, $primary 0%, $primary-light 100%);
|
||
}
|
||
&.gradient-2 {
|
||
background: linear-gradient(135deg, $primary-light 0%, $accent 100%);
|
||
}
|
||
&.gradient-3 {
|
||
background: linear-gradient(135deg, $accent 0%, $primary 100%);
|
||
}
|
||
&.gradient-4 {
|
||
background: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
|
||
}
|
||
}
|
||
|
||
.feature-info {
|
||
flex: 1;
|
||
|
||
h3 {
|
||
margin: 0 0 4px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: $text;
|
||
}
|
||
|
||
p {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
color: $text-muted;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
|
||
// ==========================================
|
||
// History Section
|
||
// ==========================================
|
||
.history-section {
|
||
flex: 1;
|
||
min-height: 0;
|
||
padding: 32px 48px;
|
||
overflow-y: auto;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-track {
|
||
background: rgba($primary, 0.05);
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
background: rgba($primary, 0.3);
|
||
border-radius: 4px;
|
||
|
||
&:hover {
|
||
background: rgba($primary, 0.5);
|
||
}
|
||
}
|
||
}
|
||
|
||
.history-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 12px;
|
||
}
|
||
|
||
.history-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: $text;
|
||
margin: 0;
|
||
}
|
||
|
||
.history-count {
|
||
font-size: 14px;
|
||
color: $text-muted;
|
||
}
|
||
|
||
.view-all {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: $primary-light;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
color: $primary;
|
||
transform: translateX(4px);
|
||
}
|
||
}
|
||
|
||
.history-loading {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 300px;
|
||
gap: 16px;
|
||
color: $text-muted;
|
||
}
|
||
|
||
.loading-spinner {
|
||
position: relative;
|
||
width: 60px;
|
||
height: 60px;
|
||
|
||
.spinner-ring {
|
||
position: absolute;
|
||
inset: 0;
|
||
border: 2px solid transparent;
|
||
border-radius: 50%;
|
||
animation: spin 2s linear infinite;
|
||
|
||
&:nth-child(1) {
|
||
border-top-color: $primary;
|
||
animation-duration: 1.5s;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
border-right-color: $primary-light;
|
||
animation-duration: 2s;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
border-bottom-color: $accent;
|
||
animation-duration: 2.5s;
|
||
}
|
||
}
|
||
}
|
||
|
||
.history-empty {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 300px;
|
||
gap: 12px;
|
||
|
||
.empty-icon {
|
||
width: 80px;
|
||
height: 80px;
|
||
background: rgba($primary, 0.1);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32px;
|
||
color: $primary-light;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.empty-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: $text;
|
||
margin: 0;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 14px;
|
||
color: $text-muted;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.history-grid {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 20px;
|
||
overflow: hidden; // 移除滚动，只展示一行
|
||
flex-wrap: nowrap; // 不换行
|
||
}
|
||
|
||
.history-card {
|
||
flex-shrink: 0;
|
||
width: 240px;
|
||
background: $surface;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
position: relative;
|
||
|
||
&:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
|
||
.card-glow {
|
||
opacity: 0.3;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-glow {
|
||
position: absolute;
|
||
inset: -2px;
|
||
background: $primary;
|
||
border-radius: 10px;
|
||
z-index: -1;
|
||
opacity: 0;
|
||
filter: blur(8px);
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.card-preview {
|
||
height: 160px;
|
||
background: rgba($surface-light, 0.8);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.preview-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.5s;
|
||
}
|
||
|
||
.history-card:hover & .preview-image {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.preview-loading,
|
||
.preview-failed,
|
||
.preview-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
color: $text-muted;
|
||
font-size: 32px;
|
||
|
||
.loading-text {
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
.preview-failed {
|
||
.failed-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
background: linear-gradient(135deg, rgba($error, 0.15) 0%, rgba($error, 0.25) 100%);
|
||
border: 2px solid rgba($error, 0.3);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
color: $error;
|
||
animation: pulse-error 2s ease-in-out infinite;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes pulse-error {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
box-shadow: 0 0 0 0 rgba($error, 0.3);
|
||
}
|
||
50% {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 0 20px 5px rgba($error, 0.15);
|
||
}
|
||
}
|
||
|
||
.loading-dots {
|
||
display: flex;
|
||
gap: 6px;
|
||
|
||
span {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: $primary-light;
|
||
border-radius: 50%;
|
||
animation: dotPulse 1.4s ease-in-out infinite;
|
||
|
||
&:nth-child(1) {
|
||
animation-delay: 0s;
|
||
}
|
||
&:nth-child(2) {
|
||
animation-delay: 0.2s;
|
||
}
|
||
&:nth-child(3) {
|
||
animation-delay: 0.4s;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes dotPulse {
|
||
0%,
|
||
60%,
|
||
100% {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
30% {
|
||
transform: scale(1.5);
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
.status-badge {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 12px;
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
||
&.status-completed {
|
||
background: rgba($success, 0.2);
|
||
color: $success;
|
||
border-color: rgba($success, 0.3);
|
||
}
|
||
|
||
&.status-processing,
|
||
&.status-pending {
|
||
background: rgba($primary-light, 0.2);
|
||
color: $primary-light;
|
||
border-color: rgba($primary-light, 0.3);
|
||
}
|
||
|
||
&.status-failed,
|
||
&.status-timeout {
|
||
background: rgba($error, 0.2);
|
||
color: $error;
|
||
border-color: rgba($error, 0.3);
|
||
}
|
||
}
|
||
|
||
.card-info {
|
||
padding: 16px;
|
||
background: rgba(9, 88, 217, 0.15);
|
||
}
|
||
|
||
.card-desc {
|
||
font-size: 14px;
|
||
color: $text;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-bottom: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.card-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-time {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
color: $text-muted;
|
||
}
|
||
|
||
.card-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.action-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
background: rgba($primary, 0.1);
|
||
border: 1px solid rgba($primary, 0.2);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: $primary-light;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
background: rgba($primary-light, 0.2);
|
||
border-color: $primary-light;
|
||
color: $primary-light;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
&.danger {
|
||
&:hover {
|
||
background: rgba($accent, 0.2);
|
||
border-color: $accent;
|
||
color: $accent;
|
||
}
|
||
}
|
||
|
||
&.disabled {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
|
||
&:hover {
|
||
background: rgba($primary, 0.1);
|
||
border-color: rgba($primary, 0.2);
|
||
color: $primary-light;
|
||
transform: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ==========================================
|
||
// Responsive
|
||
// ==========================================
|
||
@media (max-width: 1024px) {
|
||
.left-panel {
|
||
width: 100%;
|
||
}
|
||
|
||
.intro-features {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.history-card {
|
||
width: 200px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.ai-3d-container {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.left-panel {
|
||
width: 100%;
|
||
}
|
||
|
||
.intro-section {
|
||
padding: 32px 24px;
|
||
}
|
||
|
||
.history-section {
|
||
padding: 24px;
|
||
}
|
||
|
||
.history-card {
|
||
width: 180px;
|
||
}
|
||
}
|
||
</style>
|