mirror of
https://gitee.com/wanwujie/sub2api
synced 2026-04-18 05:44:46 +08:00
739 lines
20 KiB
Vue
739 lines
20 KiB
Vue
|
<template>
|
|||
|
|
<div class="sora-creator-bar-wrapper">
|
|||
|
|
<div class="sora-creator-bar">
|
|||
|
|
<div class="sora-creator-bar-inner" :class="{ focused: isFocused }">
|
|||
|
|
<!-- 模型选择行 -->
|
|||
|
|
<div class="sora-creator-model-row">
|
|||
|
|
<div class="sora-model-select-wrapper">
|
|||
|
|
<select
|
|||
|
|
v-model="selectedFamily"
|
|||
|
|
class="sora-model-select"
|
|||
|
|
@change="onFamilyChange"
|
|||
|
|
>
|
|||
|
|
<optgroup v-if="videoFamilies.length" :label="t('sora.videoModels')">
|
|||
|
|
<option v-for="f in videoFamilies" :key="f.id" :value="f.id">{{ f.name }}</option>
|
|||
|
|
</optgroup>
|
|||
|
|
<optgroup v-if="imageFamilies.length" :label="t('sora.imageModels')">
|
|||
|
|
<option v-for="f in imageFamilies" :key="f.id" :value="f.id">{{ f.name }}</option>
|
|||
|
|
</optgroup>
|
|||
|
|
</select>
|
|||
|
|
<span class="sora-model-select-arrow">▼</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- 凭证选择器 -->
|
|||
|
|
<div class="sora-credential-select-wrapper">
|
|||
|
|
<select v-model="selectedCredentialId" class="sora-model-select">
|
|||
|
|
<option :value="0" disabled>{{ t('sora.selectCredential') }}</option>
|
|||
|
|
<optgroup v-if="apiKeyOptions.length" :label="t('sora.apiKeys')">
|
|||
|
|
<option v-for="k in apiKeyOptions" :key="'k'+k.id" :value="k.id">
|
|||
|
|
{{ k.name }}{{ k.group ? ' · ' + k.group.name : '' }}
|
|||
|
|
</option>
|
|||
|
|
</optgroup>
|
|||
|
|
<optgroup v-if="subscriptionOptions.length" :label="t('sora.subscriptions')">
|
|||
|
|
<option v-for="s in subscriptionOptions" :key="'s'+s.id" :value="-s.id">
|
|||
|
|
{{ s.group?.name || t('sora.subscription') }}
|
|||
|
|
</option>
|
|||
|
|
</optgroup>
|
|||
|
|
</select>
|
|||
|
|
<span class="sora-model-select-arrow">▼</span>
|
|||
|
|
</div>
|
|||
|
|
<!-- 无凭证提示 -->
|
|||
|
|
<span v-if="soraCredentialEmpty" class="sora-no-storage-badge">
|
|||
|
|
⚠ {{ t('sora.noCredentialHint') }}
|
|||
|
|
</span>
|
|||
|
|
<!-- 无存储提示 -->
|
|||
|
|
<span v-if="!hasStorage" class="sora-no-storage-badge">
|
|||
|
|
⚠ {{ t('sora.noStorageConfigured') }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 参考图预览 -->
|
|||
|
|
<div v-if="imagePreview" class="sora-image-preview-row">
|
|||
|
|
<div class="sora-image-preview-thumb">
|
|||
|
|
<img :src="imagePreview" alt="" />
|
|||
|
|
<button class="sora-image-preview-remove" @click="removeImage">✕</button>
|
|||
|
|
</div>
|
|||
|
|
<span class="sora-image-preview-label">{{ t('sora.referenceImage') }}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 输入框 -->
|
|||
|
|
<div class="sora-creator-input-wrapper">
|
|||
|
|
<textarea
|
|||
|
|
ref="textareaRef"
|
|||
|
|
v-model="prompt"
|
|||
|
|
class="sora-creator-textarea"
|
|||
|
|
:placeholder="t('sora.creatorPlaceholder')"
|
|||
|
|
rows="1"
|
|||
|
|
@input="autoResize"
|
|||
|
|
@focus="isFocused = true"
|
|||
|
|
@blur="isFocused = false"
|
|||
|
|
@keydown.enter.ctrl="submit"
|
|||
|
|
@keydown.enter.meta="submit"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 底部工具行 -->
|
|||
|
|
<div class="sora-creator-tools-row">
|
|||
|
|
<div class="sora-creator-tools-left">
|
|||
|
|
<!-- 方向选择（根据所选模型家族支持的方向动态渲染） -->
|
|||
|
|
<template v-if="availableAspects.length > 0">
|
|||
|
|
<button
|
|||
|
|
v-for="a in availableAspects"
|
|||
|
|
:key="a.value"
|
|||
|
|
class="sora-tool-btn"
|
|||
|
|
:class="{ active: currentAspect === a.value }"
|
|||
|
|
@click="currentAspect = a.value"
|
|||
|
|
>
|
|||
|
|
<span class="sora-tool-btn-icon">{{ a.icon }}</span> {{ a.label }}
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<span v-if="availableDurations.length > 0" class="sora-tool-divider" />
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 时长选择（根据所选模型家族支持的时长动态渲染） -->
|
|||
|
|
<template v-if="availableDurations.length > 0">
|
|||
|
|
<button
|
|||
|
|
v-for="d in availableDurations"
|
|||
|
|
:key="d"
|
|||
|
|
class="sora-tool-btn"
|
|||
|
|
:class="{ active: currentDuration === d }"
|
|||
|
|
@click="currentDuration = d"
|
|||
|
|
>
|
|||
|
|
{{ d }}s
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<span class="sora-tool-divider" />
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 视频数量（官方 Videos 1/2/3） -->
|
|||
|
|
<template v-if="availableVideoCounts.length > 0">
|
|||
|
|
<button
|
|||
|
|
v-for="count in availableVideoCounts"
|
|||
|
|
:key="count"
|
|||
|
|
class="sora-tool-btn"
|
|||
|
|
:class="{ active: currentVideoCount === count }"
|
|||
|
|
@click="currentVideoCount = count"
|
|||
|
|
>
|
|||
|
|
{{ count }}
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<span class="sora-tool-divider" />
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 图片上传 -->
|
|||
|
|
<button class="sora-upload-btn" :title="t('sora.uploadReference')" @click="triggerFileInput">
|
|||
|
|
📎
|
|||
|
|
</button>
|
|||
|
|
<input
|
|||
|
|
ref="fileInputRef"
|
|||
|
|
type="file"
|
|||
|
|
accept="image/png,image/jpeg,image/webp"
|
|||
|
|
style="display: none"
|
|||
|
|
@change="onFileChange"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 活跃任务计数 -->
|
|||
|
|
<span v-if="activeTaskCount > 0" class="sora-active-tasks-label">
|
|||
|
|
<span class="sora-pulse-indicator" />
|
|||
|
|
<span>{{ t('sora.generatingCount', { current: activeTaskCount, max: maxConcurrentTasks }) }}</span>
|
|||
|
|
</span>
|
|||
|
|
|
|||
|
|
<!-- 生成按钮 -->
|
|||
|
|
<button
|
|||
|
|
class="sora-generate-btn"
|
|||
|
|
:class="{ 'max-reached': isMaxReached }"
|
|||
|
|
:disabled="!canSubmit || generating || isMaxReached"
|
|||
|
|
@click="submit"
|
|||
|
|
>
|
|||
|
|
<span class="sora-generate-btn-icon">✨</span>
|
|||
|
|
<span>{{ generating ? t('sora.generating') : t('sora.generate') }}</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 文件大小错误 -->
|
|||
|
|
<p v-if="imageError" class="sora-image-error">{{ imageError }}</p>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed, onMounted } from 'vue'
|
|||
|
|
import { useI18n } from 'vue-i18n'
|
|||
|
|
import soraAPI, { type SoraModelFamily, type GenerateRequest } from '@/api/sora'
|
|||
|
|
import keysAPI from '@/api/keys'
|
|||
|
|
import { useSubscriptionStore } from '@/stores/subscriptions'
|
|||
|
|
import type { ApiKey, UserSubscription } from '@/types'
|
|||
|
|
|
|||
|
|
const MAX_IMAGE_SIZE = 20 * 1024 * 1024
|
|||
|
|
|
|||
|
|
/** 方向显示配置 */
|
|||
|
|
const ASPECT_META: Record<string, { icon: string; label: string }> = {
|
|||
|
|
landscape: { icon: '▬', label: '横屏' },
|
|||
|
|
portrait: { icon: '▮', label: '竖屏' },
|
|||
|
|
square: { icon: '◻', label: '方形' }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
generating: boolean
|
|||
|
|
activeTaskCount: number
|
|||
|
|
maxConcurrentTasks: number
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
generate: [req: GenerateRequest]
|
|||
|
|
fillPrompt: [prompt: string]
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const { t } = useI18n()
|
|||
|
|
|
|||
|
|
const prompt = ref('')
|
|||
|
|
const families = ref<SoraModelFamily[]>([])
|
|||
|
|
const selectedFamily = ref('')
|
|||
|
|
const currentAspect = ref('landscape')
|
|||
|
|
const currentDuration = ref(10)
|
|||
|
|
const currentVideoCount = ref(1)
|
|||
|
|
const isFocused = ref(false)
|
|||
|
|
const imagePreview = ref<string | null>(null)
|
|||
|
|
const imageError = ref('')
|
|||
|
|
const fileInputRef = ref<HTMLInputElement | null>(null)
|
|||
|
|
const textareaRef = ref<HTMLTextAreaElement | null>(null)
|
|||
|
|
const hasStorage = ref(true)
|
|||
|
|
|
|||
|
|
// 凭证相关状态
|
|||
|
|
const apiKeyOptions = ref<ApiKey[]>([])
|
|||
|
|
const subscriptionOptions = ref<UserSubscription[]>([])
|
|||
|
|
const selectedCredentialId = ref<number>(0) // >0 = api_key.id, <0 = -subscription.id
|
|||
|
|
|
|||
|
|
const soraCredentialEmpty = computed(() =>
|
|||
|
|
apiKeyOptions.value.length === 0 && subscriptionOptions.value.length === 0
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
// 按类型分组
|
|||
|
|
const videoFamilies = computed(() => families.value.filter(f => f.type === 'video'))
|
|||
|
|
const imageFamilies = computed(() => families.value.filter(f => f.type === 'image'))
|
|||
|
|
|
|||
|
|
// 当前选中的家族对象
|
|||
|
|
const currentFamily = computed(() => families.value.find(f => f.id === selectedFamily.value))
|
|||
|
|
|
|||
|
|
// 当前家族支持的方向列表
|
|||
|
|
const availableAspects = computed(() => {
|
|||
|
|
const fam = currentFamily.value
|
|||
|
|
if (!fam?.orientations?.length) return []
|
|||
|
|
return fam.orientations
|
|||
|
|
.map(o => ({ value: o, ...(ASPECT_META[o] || { icon: '?', label: o }) }))
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 当前家族支持的时长列表
|
|||
|
|
const availableDurations = computed(() => currentFamily.value?.durations ?? [])
|
|||
|
|
const availableVideoCounts = computed(() => (currentFamily.value?.type === 'video' ? [1, 2, 3] : []))
|
|||
|
|
|
|||
|
|
const isMaxReached = computed(() => props.activeTaskCount >= props.maxConcurrentTasks)
|
|||
|
|
const canSubmit = computed(() =>
|
|||
|
|
prompt.value.trim().length > 0 && selectedFamily.value && selectedCredentialId.value !== 0
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
/** 构建最终 model ID（family + orientation + duration） */
|
|||
|
|
function buildModelID(): string {
|
|||
|
|
const fam = currentFamily.value
|
|||
|
|
if (!fam) return selectedFamily.value
|
|||
|
|
|
|||
|
|
if (fam.type === 'image') {
|
|||
|
|
// 图像模型: "gpt-image"（方形）或 "gpt-image-landscape"
|
|||
|
|
return currentAspect.value === 'square'
|
|||
|
|
? fam.id
|
|||
|
|
: `${fam.id}-${currentAspect.value}`
|
|||
|
|
}
|
|||
|
|
// 视频模型: "sora2-landscape-10s"
|
|||
|
|
return `${fam.id}-${currentAspect.value}-${currentDuration.value}s`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 切换家族时自动调整方向和时长为首个可用值 */
|
|||
|
|
function onFamilyChange() {
|
|||
|
|
const fam = families.value.find(f => f.id === selectedFamily.value)
|
|||
|
|
if (!fam) return
|
|||
|
|
// 若当前方向不在新家族支持列表中，重置为首个
|
|||
|
|
if (fam.orientations?.length && !fam.orientations.includes(currentAspect.value)) {
|
|||
|
|
currentAspect.value = fam.orientations[0]
|
|||
|
|
}
|
|||
|
|
// 若当前时长不在新家族支持列表中，重置为首个
|
|||
|
|
if (fam.durations?.length && !fam.durations.includes(currentDuration.value)) {
|
|||
|
|
currentDuration.value = fam.durations[0]
|
|||
|
|
}
|
|||
|
|
if (fam.type !== 'video') {
|
|||
|
|
currentVideoCount.value = 1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function loadModels() {
|
|||
|
|
try {
|
|||
|
|
families.value = await soraAPI.getModels()
|
|||
|
|
if (families.value.length > 0 && !selectedFamily.value) {
|
|||
|
|
selectedFamily.value = families.value[0].id
|
|||
|
|
onFamilyChange()
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Failed to load models:', e)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function loadStorageStatus() {
|
|||
|
|
try {
|
|||
|
|
const status = await soraAPI.getStorageStatus()
|
|||
|
|
hasStorage.value = status.s3_enabled && status.s3_healthy
|
|||
|
|
} catch {
|
|||
|
|
hasStorage.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function loadSoraCredentials() {
|
|||
|
|
try {
|
|||
|
|
// 加载 API Keys，筛选 sora 平台 + active 状态
|
|||
|
|
const keysRes = await keysAPI.list(1, 100)
|
|||
|
|
apiKeyOptions.value = (keysRes.items || []).filter(
|
|||
|
|
(k: ApiKey) => k.status === 'active' && k.group?.platform === 'sora'
|
|||
|
|
)
|
|||
|
|
// 加载活跃订阅，筛选 sora 平台
|
|||
|
|
const subStore = useSubscriptionStore()
|
|||
|
|
const subs = await subStore.fetchActiveSubscriptions()
|
|||
|
|
subscriptionOptions.value = subs.filter(
|
|||
|
|
(s: UserSubscription) => s.status === 'active' && s.group?.platform === 'sora'
|
|||
|
|
)
|
|||
|
|
// 自动选择第一个
|
|||
|
|
if (apiKeyOptions.value.length > 0) {
|
|||
|
|
selectedCredentialId.value = apiKeyOptions.value[0].id
|
|||
|
|
} else if (subscriptionOptions.value.length > 0) {
|
|||
|
|
selectedCredentialId.value = -subscriptionOptions.value[0].id
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('Failed to load sora credentials:', e)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function autoResize() {
|
|||
|
|
const el = textareaRef.value
|
|||
|
|
if (!el) return
|
|||
|
|
el.style.height = 'auto'
|
|||
|
|
el.style.height = Math.min(el.scrollHeight, 120) + 'px'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function triggerFileInput() {
|
|||
|
|
fileInputRef.value?.click()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onFileChange(event: Event) {
|
|||
|
|
const input = event.target as HTMLInputElement
|
|||
|
|
const file = input.files?.[0]
|
|||
|
|
if (!file) return
|
|||
|
|
imageError.value = ''
|
|||
|
|
if (file.size > MAX_IMAGE_SIZE) {
|
|||
|
|
imageError.value = t('sora.imageTooLarge')
|
|||
|
|
input.value = ''
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const reader = new FileReader()
|
|||
|
|
reader.onload = (e) => {
|
|||
|
|
imagePreview.value = e.target?.result as string
|
|||
|
|
}
|
|||
|
|
reader.readAsDataURL(file)
|
|||
|
|
input.value = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeImage() {
|
|||
|
|
imagePreview.value = null
|
|||
|
|
imageError.value = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function submit() {
|
|||
|
|
if (!canSubmit.value || props.generating || isMaxReached.value) return
|
|||
|
|
const modelID = buildModelID()
|
|||
|
|
const req: GenerateRequest = {
|
|||
|
|
model: modelID,
|
|||
|
|
prompt: prompt.value.trim(),
|
|||
|
|
media_type: currentFamily.value?.type || 'video'
|
|||
|
|
}
|
|||
|
|
if ((currentFamily.value?.type || 'video') === 'video') {
|
|||
|
|
req.video_count = currentVideoCount.value
|
|||
|
|
}
|
|||
|
|
if (imagePreview.value) {
|
|||
|
|
req.image_input = imagePreview.value
|
|||
|
|
}
|
|||
|
|
if (selectedCredentialId.value > 0) {
|
|||
|
|
req.api_key_id = selectedCredentialId.value
|
|||
|
|
}
|
|||
|
|
emit('generate', req)
|
|||
|
|
prompt.value = ''
|
|||
|
|
imagePreview.value = null
|
|||
|
|
imageError.value = ''
|
|||
|
|
if (textareaRef.value) {
|
|||
|
|
textareaRef.value.style.height = 'auto'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 外部调用：填充提示词 */
|
|||
|
|
function fillPrompt(text: string) {
|
|||
|
|
prompt.value = text
|
|||
|
|
setTimeout(autoResize, 0)
|
|||
|
|
textareaRef.value?.focus()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
defineExpose({ fillPrompt })
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
loadModels()
|
|||
|
|
loadStorageStatus()
|
|||
|
|
loadSoraCredentials()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.sora-creator-bar-wrapper {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 40;
|
|||
|
|
background: linear-gradient(to top, var(--sora-bg-primary, #0D0D0D) 60%, transparent 100%);
|
|||
|
|
padding: 20px 24px 24px;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-creator-bar {
|
|||
|
|
max-width: 780px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
pointer-events: all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-creator-bar-inner {
|
|||
|
|
background: var(--sora-bg-secondary, #1A1A1A);
|
|||
|
|
border: 1px solid var(--sora-border-color, #2A2A2A);
|
|||
|
|
border-radius: var(--sora-radius-xl, 20px);
|
|||
|
|
padding: 12px 16px;
|
|||
|
|
transition: border-color 150ms ease, box-shadow 150ms ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-creator-bar-inner.focused {
|
|||
|
|
border-color: var(--sora-accent-primary, #14b8a6);
|
|||
|
|
box-shadow: 0 0 0 1px var(--sora-accent-primary, #14b8a6), var(--sora-shadow-glow, 0 0 20px rgba(20,184,166,0.3));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 模型选择行 */
|
|||
|
|
.sora-creator-model-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
padding: 0 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-model-select-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-model-select {
|
|||
|
|
appearance: none;
|
|||
|
|
background: var(--sora-bg-tertiary, #242424);
|
|||
|
|
color: var(--sora-text-primary, #FFF);
|
|||
|
|
padding: 5px 28px 5px 10px;
|
|||
|
|
border-radius: var(--sora-radius-sm, 8px);
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-family: "SF Mono", "Fira Code", monospace;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border: 1px solid transparent;
|
|||
|
|
transition: all 150ms ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-model-select:hover {
|
|||
|
|
border-color: var(--sora-bg-hover, #333);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-model-select:focus {
|
|||
|
|
border-color: var(--sora-accent-primary, #14b8a6);
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-model-select option {
|
|||
|
|
background: var(--sora-bg-secondary, #1A1A1A);
|
|||
|
|
color: var(--sora-text-primary, #FFF);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-model-select-arrow {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 8px;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
pointer-events: none;
|
|||
|
|
font-size: 10px;
|
|||
|
|
color: var(--sora-text-tertiary, #666);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-credential-select-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
max-width: 200px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 无存储提示 */
|
|||
|
|
.sora-no-storage-badge {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
padding: 3px 10px;
|
|||
|
|
background: rgba(245, 158, 11, 0.1);
|
|||
|
|
border: 1px solid rgba(245, 158, 11, 0.2);
|
|||
|
|
border-radius: var(--sora-radius-full, 9999px);
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: var(--sora-warning, #F59E0B);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 参考图预览 */
|
|||
|
|
.sora-image-preview-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
padding: 0 4px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-image-preview-thumb {
|
|||
|
|
position: relative;
|
|||
|
|
width: 48px;
|
|||
|
|
height: 48px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-image-preview-thumb img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
border: 1px solid var(--sora-border-color, #2A2A2A);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-image-preview-remove {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -6px;
|
|||
|
|
right: -6px;
|
|||
|
|
width: 18px;
|
|||
|
|
height: 18px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: var(--sora-error, #EF4444);
|
|||
|
|
color: white;
|
|||
|
|
font-size: 10px;
|
|||
|
|
border: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-image-preview-label {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--sora-text-tertiary, #666);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 输入框 */
|
|||
|
|
.sora-creator-input-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-creator-textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 44px;
|
|||
|
|
max-height: 120px;
|
|||
|
|
padding: 10px 4px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: var(--sora-text-primary, #FFF);
|
|||
|
|
background: transparent;
|
|||
|
|
resize: none;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
border: none;
|
|||
|
|
outline: none;
|
|||
|
|
font-family: inherit;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-creator-textarea::placeholder {
|
|||
|
|
color: var(--sora-text-muted, #4A4A4A);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部工具行 */
|
|||
|
|
.sora-creator-tools-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 4px 4px 0;
|
|||
|
|
border-top: 1px solid var(--sora-border-subtle, #1F1F1F);
|
|||
|
|
margin-top: 4px;
|
|||
|
|
padding-top: 10px;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-creator-tools-left {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-tool-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 5px;
|
|||
|
|
padding: 6px 12px;
|
|||
|
|
border-radius: var(--sora-radius-full, 9999px);
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--sora-text-secondary, #A0A0A0);
|
|||
|
|
background: var(--sora-bg-tertiary, #242424);
|
|||
|
|
border: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 150ms ease;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-tool-btn:hover {
|
|||
|
|
background: var(--sora-bg-hover, #333);
|
|||
|
|
color: var(--sora-text-primary, #FFF);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-tool-btn.active {
|
|||
|
|
background: rgba(20, 184, 166, 0.15);
|
|||
|
|
color: var(--sora-accent-primary, #14b8a6);
|
|||
|
|
border: 1px solid rgba(20, 184, 166, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-tool-btn-icon {
|
|||
|
|
font-size: 14px;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-tool-divider {
|
|||
|
|
width: 1px;
|
|||
|
|
height: 20px;
|
|||
|
|
background: var(--sora-border-color, #2A2A2A);
|
|||
|
|
margin: 0 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 上传按钮 */
|
|||
|
|
.sora-upload-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
border-radius: var(--sora-radius-sm, 8px);
|
|||
|
|
background: var(--sora-bg-tertiary, #242424);
|
|||
|
|
color: var(--sora-text-secondary, #A0A0A0);
|
|||
|
|
font-size: 16px;
|
|||
|
|
border: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 150ms ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-upload-btn:hover {
|
|||
|
|
background: var(--sora-bg-hover, #333);
|
|||
|
|
color: var(--sora-text-primary, #FFF);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 活跃任务计数 */
|
|||
|
|
.sora-active-tasks-label {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
padding: 4px 12px;
|
|||
|
|
background: rgba(20, 184, 166, 0.12);
|
|||
|
|
border: 1px solid rgba(20, 184, 166, 0.25);
|
|||
|
|
border-radius: var(--sora-radius-full, 9999px);
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--sora-accent-primary, #14b8a6);
|
|||
|
|
white-space: nowrap;
|
|||
|
|
animation: sora-fade-in 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-pulse-indicator {
|
|||
|
|
width: 6px;
|
|||
|
|
height: 6px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: var(--sora-accent-primary, #14b8a6);
|
|||
|
|
animation: sora-pulse-dot 1.5s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes sora-pulse-dot {
|
|||
|
|
0%, 100% { opacity: 1; }
|
|||
|
|
50% { opacity: 0.4; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes sora-fade-in {
|
|||
|
|
from { opacity: 0; transform: translateY(8px); }
|
|||
|
|
to { opacity: 1; transform: translateY(0); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 生成按钮 */
|
|||
|
|
.sora-generate-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
padding: 8px 24px;
|
|||
|
|
background: var(--sora-accent-gradient, linear-gradient(135deg, #14b8a6, #0d9488));
|
|||
|
|
border-radius: var(--sora-radius-full, 9999px);
|
|||
|
|
font-size: 13px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 150ms ease;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-generate-btn:hover:not(:disabled) {
|
|||
|
|
background: var(--sora-accent-gradient-hover, linear-gradient(135deg, #2dd4bf, #14b8a6));
|
|||
|
|
box-shadow: var(--sora-shadow-glow, 0 0 20px rgba(20,184,166,0.3));
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-generate-btn:active:not(:disabled) {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-generate-btn:disabled {
|
|||
|
|
opacity: 0.4;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
transform: none;
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-generate-btn.max-reached {
|
|||
|
|
opacity: 0.4;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-generate-btn-icon {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 图片错误 */
|
|||
|
|
.sora-image-error {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--sora-error, #EF4444);
|
|||
|
|
margin-top: 8px;
|
|||
|
|
pointer-events: all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 响应式 */
|
|||
|
|
@media (max-width: 600px) {
|
|||
|
|
.sora-creator-bar-wrapper {
|
|||
|
|
padding: 12px 12px 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-creator-tools-left {
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sora-tool-btn {
|
|||
|
|
padding: 5px 8px;
|
|||
|
|
font-size: 11px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|