frontend/src/views/user/SoraView.vue

<template>
  <div class="sora-root">
    <!-- Sora 页面内容 -->
    <div class="sora-page">
      <!-- 功能未启用提示 -->
      <div v-if="!soraEnabled" class="sora-not-enabled">
        <svg class="sora-not-enabled-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456z" />
        </svg>
        <h2 class="sora-not-enabled-title">{{ t('sora.notEnabled') }}</h2>
        <p class="sora-not-enabled-desc">{{ t('sora.notEnabledDesc') }}</p>
      </div>

      <!-- Sora 主界面 -->
      <template v-else>
        <!-- 自定义 Sora 头部 -->
        <header class="sora-header">
          <div class="sora-header-left">
            <!-- 返回主页按钮 -->
            <router-link :to="dashboardPath" class="sora-back-btn" :title="t('common.back')">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M15 19l-7-7 7-7" />
              </svg>
            </router-link>
            <nav class="sora-nav-tabs">
              <button
                v-for="tab in tabs"
                :key="tab.key"
                :class="['sora-nav-tab', activeTab === tab.key && 'active']"
                @click="activeTab = tab.key"
              >
                {{ tab.label }}
              </button>
            </nav>
          </div>
          <div class="sora-header-right">
            <SoraQuotaBar v-if="quota" :quota="quota" />
            <div v-if="activeTaskCount > 0" class="sora-queue-indicator">
              <span class="sora-queue-dot" :class="{ busy: hasGeneratingTask }"></span>
              <span>{{ activeTaskCount }} {{ t('sora.queueTasks') }}</span>
            </div>
          </div>
        </header>

        <!-- 内容区域 -->
        <main class="sora-main">
          <SoraGeneratePage
            v-show="activeTab === 'generate'"
            @task-count-change="onTaskCountChange"
          />
          <SoraLibraryPage
            v-show="activeTab === 'library'"
            @switch-to-generate="activeTab = 'generate'"
          />
        </main>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAppStore, useAuthStore } from '@/stores'
import SoraQuotaBar from '@/components/sora/SoraQuotaBar.vue'
import SoraGeneratePage from '@/components/sora/SoraGeneratePage.vue'
import SoraLibraryPage from '@/components/sora/SoraLibraryPage.vue'
import soraAPI, { type QuotaInfo } from '@/api/sora'

const { t } = useI18n()
const authStore = useAuthStore()
const appStore = useAppStore()

const soraEnabled = computed(() => appStore.cachedPublicSettings?.sora_client_enabled ?? false)

const activeTab = ref<'generate' | 'library'>('generate')
const quota = ref<QuotaInfo | null>(null)
const activeTaskCount = ref(0)
const hasGeneratingTask = ref(false)
const dashboardPath = computed(() => (authStore.isAdmin ? '/admin/dashboard' : '/dashboard'))

const tabs = computed(() => [
  { key: 'generate' as const, label: t('sora.tabGenerate') },
  { key: 'library' as const, label: t('sora.tabLibrary') }
])

function onTaskCountChange(counts: { active: number; generating: boolean }) {
  activeTaskCount.value = counts.active
  hasGeneratingTask.value = counts.generating
}

onMounted(async () => {
  if (!soraEnabled.value) return
  try {
    quota.value = await soraAPI.getQuota()
  } catch {
    // 配额查询失败不阻塞页面
  }
})
</script>

<style scoped>
/* ============================================================
   Sora 主题 CSS 变量 — 亮色模式（跟随应用主题）
   ============================================================ */
.sora-root {
  --sora-bg-primary: #F9FAFB;
  --sora-bg-secondary: #FFFFFF;
  --sora-bg-tertiary: #F3F4F6;
  --sora-bg-elevated: #FFFFFF;
  --sora-bg-hover: #E5E7EB;
  --sora-bg-input: #FFFFFF;
  --sora-text-primary: #111827;
  --sora-text-secondary: #6B7280;
  --sora-text-tertiary: #9CA3AF;
  --sora-text-muted: #D1D5DB;
  --sora-accent-primary: #14b8a6;
  --sora-accent-secondary: #0d9488;
  --sora-accent-gradient: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  --sora-accent-gradient-hover: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%);
  --sora-success: #10B981;
  --sora-warning: #F59E0B;
  --sora-error: #EF4444;
  --sora-info: #3B82F6;
  --sora-border-color: #E5E7EB;
  --sora-border-subtle: #F3F4F6;
  --sora-radius-sm: 8px;
  --sora-radius-md: 12px;
  --sora-radius-lg: 16px;
  --sora-radius-xl: 20px;
  --sora-radius-full: 9999px;
  --sora-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --sora-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --sora-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --sora-shadow-glow: 0 0 20px rgba(20,184,166,0.25);
  --sora-transition-fast: 150ms ease;
  --sora-transition-normal: 250ms ease;
  --sora-header-height: 56px;
  --sora-header-bg: rgba(249, 250, 251, 0.85);
  --sora-placeholder-gradient: linear-gradient(135deg, #e0e7ff 0%, #dbeafe 50%, #cffafe 100%);
  --sora-modal-backdrop: rgba(0, 0, 0, 0.4);

  min-height: 100vh;
  background: var(--sora-bg-primary);
  color: var(--sora-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   页面布局
   ============================================================ */
.sora-page {
  width: 100%;
}

/* ============================================================
   头部导航栏
   ============================================================ */
.sora-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--sora-header-height);
  background: var(--sora-header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--sora-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.sora-header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sora-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 返回按钮 */
.sora-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--sora-radius-sm);
  color: var(--sora-text-secondary);
  text-decoration: none;
  transition: all var(--sora-transition-fast);
}

.sora-back-btn:hover {
  background: var(--sora-bg-tertiary);
  color: var(--sora-text-primary);
}

/* Tab 导航 */
.sora-nav-tabs {
  display: flex;
  gap: 4px;
  background: var(--sora-bg-secondary);
  border-radius: var(--sora-radius-full);
  padding: 3px;
}

.sora-nav-tab {
  padding: 6px 20px;
  border-radius: var(--sora-radius-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--sora-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--sora-transition-fast);
  user-select: none;
}

.sora-nav-tab:hover {
  color: var(--sora-text-primary);
}

.sora-nav-tab.active {
  background: var(--sora-bg-tertiary);
  color: var(--sora-text-primary);
}

/* 队列指示器 */
.sora-queue-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--sora-bg-secondary);
  border-radius: var(--sora-radius-full);
  font-size: 12px;
  color: var(--sora-text-secondary);
}

.sora-queue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sora-success);
  animation: sora-pulse-dot 2s ease-in-out infinite;
}

.sora-queue-dot.busy {
  background: var(--sora-warning);
}

@keyframes sora-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================================
   主内容区
   ============================================================ */
.sora-main {
  min-height: calc(100vh - var(--sora-header-height));
}

/* ============================================================
   功能未启用
   ============================================================ */
.sora-not-enabled {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 40px;
}

.sora-not-enabled-icon {
  width: 64px;
  height: 64px;
  color: var(--sora-text-tertiary);
  margin-bottom: 16px;
}

.sora-not-enabled-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--sora-text-secondary);
  margin-bottom: 8px;
}

.sora-not-enabled-desc {
  font-size: 14px;
  color: var(--sora-text-tertiary);
  max-width: 400px;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 900px) {
  .sora-header {
    padding: 0 16px;
  }

  .sora-header-left {
    gap: 12px;
  }
}

@media (max-width: 600px) {
  .sora-nav-tab {
    padding: 5px 14px;
    font-size: 12px;
  }
}

/* 滚动条 */
.sora-root ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.sora-root ::-webkit-scrollbar-track {
  background: transparent;
}

.sora-root ::-webkit-scrollbar-thumb {
  background: var(--sora-bg-hover);
  border-radius: 3px;
}

.sora-root ::-webkit-scrollbar-thumb:hover {
  background: var(--sora-text-tertiary);
}
</style>

<style>
/* 暗色模式：必须明确命中 .sora-root，避免被 scoped 编译后的变量覆盖问题 */
html.dark .sora-root {
  --sora-bg-primary: #020617;
  --sora-bg-secondary: #0f172a;
  --sora-bg-tertiary: #1e293b;
  --sora-bg-elevated: #1e293b;
  --sora-bg-hover: #334155;
  --sora-bg-input: #0f172a;
  --sora-text-primary: #f1f5f9;
  --sora-text-secondary: #94a3b8;
  --sora-text-tertiary: #64748b;
  --sora-text-muted: #475569;
  --sora-border-color: #334155;
  --sora-border-subtle: #1e293b;
  --sora-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sora-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --sora-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --sora-shadow-glow: 0 0 20px rgba(20, 184, 166, 0.3);
  --sora-header-bg: rgba(2, 6, 23, 0.85);
  --sora-placeholder-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #020617 100%);
  --sora-modal-backdrop: rgba(0, 0, 0, 0.7);
}
</style>