wip: snapshot full local workspace state
Some checks failed
Build and Push Docker Images / changes (push) Has been cancelled
Build and Push Docker Images / build-backend (push) Has been cancelled
Build and Push Docker Images / build-frontend (push) Has been cancelled
Build and Push Docker Images / build-admin-frontend (push) Has been cancelled
Some checks failed
Build and Push Docker Images / changes (push) Has been cancelled
Build and Push Docker Images / build-backend (push) Has been cancelled
Build and Push Docker Images / build-frontend (push) Has been cancelled
Build and Push Docker Images / build-admin-frontend (push) Has been cancelled
This commit is contained in:
@@ -1,376 +1,376 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import type { Component } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useUserStore } from '../stores/user'
|
||||
import { useStorybookStore } from '../stores/storybook'
|
||||
import { api } from '../api/client'
|
||||
import BaseButton from './ui/BaseButton.vue'
|
||||
import BaseInput from './ui/BaseInput.vue'
|
||||
import BaseSelect from './ui/BaseSelect.vue'
|
||||
import BaseTextarea from './ui/BaseTextarea.vue'
|
||||
import {
|
||||
SparklesIcon,
|
||||
PencilSquareIcon,
|
||||
BookOpenIcon,
|
||||
PhotoIcon,
|
||||
XMarkIcon,
|
||||
ExclamationCircleIcon,
|
||||
ShieldCheckIcon,
|
||||
UserGroupIcon,
|
||||
ShareIcon,
|
||||
CheckBadgeIcon,
|
||||
ArrowPathIcon,
|
||||
HeartIcon
|
||||
} from '@heroicons/vue/24/outline'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const storybookStore = useStorybookStore()
|
||||
|
||||
// State
|
||||
const inputType = ref<'keywords' | 'full_story'>('keywords')
|
||||
const outputMode = ref<'full_story' | 'storybook'>('full_story')
|
||||
const inputData = ref('')
|
||||
const educationTheme = ref('')
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
// Data
|
||||
interface ChildProfile {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
interface StoryUniverse {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
const profiles = ref<ChildProfile[]>([])
|
||||
const universes = ref<StoryUniverse[]>([])
|
||||
const selectedProfileId = ref('')
|
||||
const selectedUniverseId = ref('')
|
||||
const profileError = ref('')
|
||||
|
||||
// Themes
|
||||
type ThemeOption = { icon: Component; label: string; value: string }
|
||||
const themes: ThemeOption[] = [
|
||||
{ icon: ShieldCheckIcon, label: t('home.themeCourage'), value: '勇气' },
|
||||
{ icon: UserGroupIcon, label: t('home.themeFriendship'), value: '友谊' },
|
||||
{ icon: ShareIcon, label: t('home.themeSharing'), value: '分享' },
|
||||
{ icon: CheckBadgeIcon, label: t('home.themeHonesty'), value: '诚实' },
|
||||
{ icon: ArrowPathIcon, label: t('home.themePersistence'), value: '坚持' },
|
||||
{ icon: HeartIcon, label: t('home.themeTolerance'), value: '包容' },
|
||||
]
|
||||
|
||||
const profileOptions = computed(() =>
|
||||
profiles.value.map(profile => ({ value: profile.id, label: profile.name })),
|
||||
)
|
||||
const universeOptions = computed(() =>
|
||||
universes.value.map(universe => ({ value: universe.id, label: universe.name })),
|
||||
)
|
||||
|
||||
// Methods
|
||||
function close() {
|
||||
emit('update:modelValue', false)
|
||||
error.value = ''
|
||||
}
|
||||
|
||||
async function fetchProfiles() {
|
||||
if (!userStore.user) return
|
||||
profileError.value = ''
|
||||
try {
|
||||
const data = await api.get<{ profiles: ChildProfile[] }>('/api/profiles')
|
||||
profiles.value = data.profiles
|
||||
if (!selectedProfileId.value && profiles.value.length > 0) {
|
||||
selectedProfileId.value = profiles.value[0].id
|
||||
}
|
||||
} catch (e) {
|
||||
profileError.value = e instanceof Error ? e.message : '档案加载失败'
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchUniverses(profileId: string) {
|
||||
selectedUniverseId.value = ''
|
||||
if (!profileId) {
|
||||
universes.value = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
const data = await api.get<{ universes: StoryUniverse[] }>(`/api/profiles/${profileId}/universes`)
|
||||
universes.value = data.universes
|
||||
if (universes.value.length > 0) {
|
||||
selectedUniverseId.value = universes.value[0].id
|
||||
}
|
||||
} catch (e) {
|
||||
profileError.value = e instanceof Error ? e.message : '宇宙加载失败'
|
||||
}
|
||||
}
|
||||
|
||||
watch(selectedProfileId, (newId) => {
|
||||
if (newId) fetchUniverses(newId)
|
||||
})
|
||||
|
||||
watch(() => props.modelValue, (isOpen) => {
|
||||
if (isOpen) {
|
||||
fetchProfiles()
|
||||
}
|
||||
})
|
||||
|
||||
async function generateStory() {
|
||||
if (!inputData.value.trim()) {
|
||||
error.value = t('home.errorEmpty')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
const payload: Record<string, unknown> = {
|
||||
type: inputType.value,
|
||||
data: inputData.value,
|
||||
education_theme: educationTheme.value || undefined,
|
||||
}
|
||||
if (selectedProfileId.value) payload.child_profile_id = selectedProfileId.value
|
||||
if (selectedUniverseId.value) payload.universe_id = selectedUniverseId.value
|
||||
|
||||
if (outputMode.value === 'storybook') {
|
||||
const response = await api.post<any>('/api/storybook/generate', {
|
||||
keywords: inputData.value,
|
||||
education_theme: educationTheme.value || undefined,
|
||||
generate_images: true,
|
||||
page_count: 6,
|
||||
child_profile_id: selectedProfileId.value || undefined,
|
||||
universe_id: selectedUniverseId.value || undefined
|
||||
})
|
||||
|
||||
storybookStore.setStorybook(response)
|
||||
close()
|
||||
router.push('/storybook/view')
|
||||
} else {
|
||||
const result = await api.post<any>('/api/generate/full', payload)
|
||||
const query: Record<string, string> = {}
|
||||
if (result.errors && Object.keys(result.errors).length > 0) {
|
||||
if (result.errors.image) query.imageError = '1'
|
||||
}
|
||||
close()
|
||||
router.push({ path: `/story/${result.id}`, query })
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : '生成失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="transition-opacity duration-300"
|
||||
enter-from-class="opacity-0"
|
||||
enter-to-class="opacity-100"
|
||||
leave-active-class="transition-opacity duration-300"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="modelValue"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
>
|
||||
<!-- 遮罩层 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||
@click="close"
|
||||
></div>
|
||||
|
||||
<!-- 模态框内容 -->
|
||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-[#1C2035] border border-gray-700/50 rounded-3xl shadow-2xl p-6 md:p-8">
|
||||
<!-- 关闭按钮 -->
|
||||
<button
|
||||
@click="close"
|
||||
class="absolute top-4 right-4 p-2 rounded-full hover:bg-[var(--bg-elevated)] transition-colors z-10"
|
||||
>
|
||||
<XMarkIcon class="h-6 w-6 text-gray-400" />
|
||||
</button>
|
||||
|
||||
<!-- 标题 -->
|
||||
<h2 class="text-2xl font-bold text-gray-100 mb-6">
|
||||
{{ t('home.createModalTitle') }}
|
||||
</h2>
|
||||
|
||||
<!-- 输入类型切换 -->
|
||||
<div class="flex space-x-3 mb-6">
|
||||
<button
|
||||
@click="inputType = 'keywords'"
|
||||
:class="[
|
||||
'flex-1 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center space-x-2',
|
||||
inputType === 'keywords'
|
||||
? 'btn-magic text-[#0D0F1A] shadow-lg bg-gradient-to-r from-[#FFD369] to-[#FF9F43]'
|
||||
: 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
|
||||
]"
|
||||
>
|
||||
<SparklesIcon class="h-5 w-5" />
|
||||
<span>{{ t('home.inputTypeKeywords') }}</span>
|
||||
</button>
|
||||
<button
|
||||
@click="inputType = 'full_story'"
|
||||
:class="[
|
||||
'flex-1 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center space-x-2',
|
||||
inputType === 'full_story'
|
||||
? 'btn-magic text-[#0D0F1A] shadow-lg bg-gradient-to-r from-[#FFD369] to-[#FF9F43]'
|
||||
: 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
|
||||
]"
|
||||
>
|
||||
<PencilSquareIcon class="h-5 w-5" />
|
||||
<span>{{ t('home.inputTypeStory') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 呈现形式选择 (仅在关键词模式下可用) -->
|
||||
<div class="flex space-x-3 mb-6" v-if="inputType === 'keywords'">
|
||||
<button
|
||||
@click="outputMode = 'full_story'"
|
||||
:class="[
|
||||
'flex-1 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center space-x-2',
|
||||
outputMode === 'full_story'
|
||||
? 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-lg'
|
||||
: 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
|
||||
]"
|
||||
>
|
||||
<BookOpenIcon class="h-5 w-5" />
|
||||
<span>普通故事</span>
|
||||
</button>
|
||||
<button
|
||||
@click="outputMode = 'storybook'"
|
||||
:class="[
|
||||
'flex-1 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center space-x-2',
|
||||
outputMode === 'storybook'
|
||||
? 'bg-gradient-to-r from-amber-500 to-orange-600 text-white shadow-lg'
|
||||
: 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
|
||||
]"
|
||||
>
|
||||
<PhotoIcon class="h-5 w-5" />
|
||||
<span>绘本模式</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 孩子档案选择 -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-300 font-semibold mb-2">
|
||||
{{ t('home.selectProfile') }}
|
||||
<span class="text-gray-500 font-normal text-sm ml-1">{{ t('home.selectProfileOptional') }}</span>
|
||||
</label>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<BaseSelect
|
||||
v-model="selectedProfileId"
|
||||
:options="[{ value: '', label: t('home.noProfile') }, ...profileOptions]"
|
||||
/>
|
||||
<BaseSelect
|
||||
v-model="selectedUniverseId"
|
||||
:options="[{ value: '', label: t('home.noUniverse') }, ...universeOptions]"
|
||||
:disabled="!selectedProfileId || universes.length === 0"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="profileError" class="text-sm text-red-500 mt-2">{{ profileError }}</div>
|
||||
<div v-if="selectedProfileId && universes.length === 0" class="text-sm text-gray-500 mt-2">
|
||||
{{ t('home.noUniverseHint') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-300 font-semibold mb-2">
|
||||
{{ inputType === 'keywords' ? t('home.inputLabel') : t('home.inputLabelStory') }}
|
||||
</label>
|
||||
<BaseTextarea
|
||||
v-model="inputData"
|
||||
:placeholder="inputType === 'keywords' ? t('home.inputPlaceholder') : t('home.inputPlaceholderStory')"
|
||||
:rows="5"
|
||||
:maxLength="5000"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 教育主题选择 -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-300 font-semibold mb-2">
|
||||
{{ t('home.themeLabel') }}
|
||||
<span class="text-gray-500 font-normal text-sm ml-1">{{ t('home.themeOptional') }}</span>
|
||||
</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="theme in themes"
|
||||
:key="theme.value"
|
||||
@click="educationTheme = educationTheme === theme.value ? '' : theme.value"
|
||||
:class="[
|
||||
'px-4 py-2 rounded-lg font-medium transition-all duration-300 flex items-center space-x-1.5 text-sm',
|
||||
educationTheme === theme.value
|
||||
? 'bg-gradient-to-r from-[#FFD369] to-[#FF9F43] text-[#0D0F1A] shadow-md'
|
||||
: 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
|
||||
]"
|
||||
>
|
||||
<component :is="theme.icon" class="h-4 w-4" />
|
||||
<span>{{ theme.label }}</span>
|
||||
</button>
|
||||
<BaseInput
|
||||
v-model="educationTheme"
|
||||
:placeholder="t('home.themeCustom')"
|
||||
class="w-28"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误提示 -->
|
||||
<Transition
|
||||
enter-active-class="transition-all duration-300"
|
||||
enter-from-class="opacity-0 -translate-y-2"
|
||||
enter-to-class="opacity-100 translate-y-0"
|
||||
leave-active-class="transition-all duration-300"
|
||||
leave-from-class="opacity-100 translate-y-0"
|
||||
leave-to-class="opacity-0 -translate-y-2"
|
||||
>
|
||||
<div v-if="error" class="mb-4 p-3 bg-red-900/20 border border-red-800 text-red-400 rounded-xl flex items-center space-x-2">
|
||||
<ExclamationCircleIcon class="h-5 w-5 flex-shrink-0" />
|
||||
<span>{{ error }}</span>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<BaseButton
|
||||
class="w-full"
|
||||
size="lg"
|
||||
:loading="loading"
|
||||
:disabled="loading"
|
||||
@click="generateStory"
|
||||
>
|
||||
<template v-if="loading">
|
||||
{{ t('home.generating') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<SparklesIcon class="h-5 w-5 mr-2" />
|
||||
{{ t('home.startCreate') }}
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 临时添加一些 btn-magic 样式确保兼容 */
|
||||
.btn-magic {
|
||||
background: linear-gradient(135deg, #FFD369 0%, #FF9F43 100%);
|
||||
color: #0D0F1A;
|
||||
}
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import type { Component } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useUserStore } from '../stores/user'
|
||||
import { useStorybookStore } from '../stores/storybook'
|
||||
import { api } from '../api/client'
|
||||
import BaseButton from './ui/BaseButton.vue'
|
||||
import BaseInput from './ui/BaseInput.vue'
|
||||
import BaseSelect from './ui/BaseSelect.vue'
|
||||
import BaseTextarea from './ui/BaseTextarea.vue'
|
||||
import {
|
||||
SparklesIcon,
|
||||
PencilSquareIcon,
|
||||
BookOpenIcon,
|
||||
PhotoIcon,
|
||||
XMarkIcon,
|
||||
ExclamationCircleIcon,
|
||||
ShieldCheckIcon,
|
||||
UserGroupIcon,
|
||||
ShareIcon,
|
||||
CheckBadgeIcon,
|
||||
ArrowPathIcon,
|
||||
HeartIcon
|
||||
} from '@heroicons/vue/24/outline'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const storybookStore = useStorybookStore()
|
||||
|
||||
// State
|
||||
const inputType = ref<'keywords' | 'full_story'>('keywords')
|
||||
const outputMode = ref<'full_story' | 'storybook'>('full_story')
|
||||
const inputData = ref('')
|
||||
const educationTheme = ref('')
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
// Data
|
||||
interface ChildProfile {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
interface StoryUniverse {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
const profiles = ref<ChildProfile[]>([])
|
||||
const universes = ref<StoryUniverse[]>([])
|
||||
const selectedProfileId = ref('')
|
||||
const selectedUniverseId = ref('')
|
||||
const profileError = ref('')
|
||||
|
||||
// Themes
|
||||
type ThemeOption = { icon: Component; label: string; value: string }
|
||||
const themes: ThemeOption[] = [
|
||||
{ icon: ShieldCheckIcon, label: t('home.themeCourage'), value: '勇气' },
|
||||
{ icon: UserGroupIcon, label: t('home.themeFriendship'), value: '友谊' },
|
||||
{ icon: ShareIcon, label: t('home.themeSharing'), value: '分享' },
|
||||
{ icon: CheckBadgeIcon, label: t('home.themeHonesty'), value: '诚实' },
|
||||
{ icon: ArrowPathIcon, label: t('home.themePersistence'), value: '坚持' },
|
||||
{ icon: HeartIcon, label: t('home.themeTolerance'), value: '包容' },
|
||||
]
|
||||
|
||||
const profileOptions = computed(() =>
|
||||
profiles.value.map(profile => ({ value: profile.id, label: profile.name })),
|
||||
)
|
||||
const universeOptions = computed(() =>
|
||||
universes.value.map(universe => ({ value: universe.id, label: universe.name })),
|
||||
)
|
||||
|
||||
// Methods
|
||||
function close() {
|
||||
emit('update:modelValue', false)
|
||||
error.value = ''
|
||||
}
|
||||
|
||||
async function fetchProfiles() {
|
||||
if (!userStore.user) return
|
||||
profileError.value = ''
|
||||
try {
|
||||
const data = await api.get<{ profiles: ChildProfile[] }>('/api/profiles')
|
||||
profiles.value = data.profiles
|
||||
if (!selectedProfileId.value && profiles.value.length > 0) {
|
||||
selectedProfileId.value = profiles.value[0].id
|
||||
}
|
||||
} catch (e) {
|
||||
profileError.value = e instanceof Error ? e.message : '档案加载失败'
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchUniverses(profileId: string) {
|
||||
selectedUniverseId.value = ''
|
||||
if (!profileId) {
|
||||
universes.value = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
const data = await api.get<{ universes: StoryUniverse[] }>(`/api/profiles/${profileId}/universes`)
|
||||
universes.value = data.universes
|
||||
if (universes.value.length > 0) {
|
||||
selectedUniverseId.value = universes.value[0].id
|
||||
}
|
||||
} catch (e) {
|
||||
profileError.value = e instanceof Error ? e.message : '宇宙加载失败'
|
||||
}
|
||||
}
|
||||
|
||||
watch(selectedProfileId, (newId) => {
|
||||
if (newId) fetchUniverses(newId)
|
||||
})
|
||||
|
||||
watch(() => props.modelValue, (isOpen) => {
|
||||
if (isOpen) {
|
||||
fetchProfiles()
|
||||
}
|
||||
})
|
||||
|
||||
async function generateStory() {
|
||||
if (!inputData.value.trim()) {
|
||||
error.value = t('home.errorEmpty')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
const payload: Record<string, unknown> = {
|
||||
type: inputType.value,
|
||||
data: inputData.value,
|
||||
education_theme: educationTheme.value || undefined,
|
||||
}
|
||||
if (selectedProfileId.value) payload.child_profile_id = selectedProfileId.value
|
||||
if (selectedUniverseId.value) payload.universe_id = selectedUniverseId.value
|
||||
|
||||
if (outputMode.value === 'storybook') {
|
||||
const response = await api.post<any>('/api/storybook/generate', {
|
||||
keywords: inputData.value,
|
||||
education_theme: educationTheme.value || undefined,
|
||||
generate_images: true,
|
||||
page_count: 6,
|
||||
child_profile_id: selectedProfileId.value || undefined,
|
||||
universe_id: selectedUniverseId.value || undefined
|
||||
})
|
||||
|
||||
storybookStore.setStorybook(response)
|
||||
close()
|
||||
router.push('/storybook/view')
|
||||
} else {
|
||||
const result = await api.post<any>('/api/generate/full', payload)
|
||||
const query: Record<string, string> = {}
|
||||
if (result.errors && Object.keys(result.errors).length > 0) {
|
||||
if (result.errors.image) query.imageError = '1'
|
||||
}
|
||||
close()
|
||||
router.push({ path: `/story/${result.id}`, query })
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : '生成失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="transition-opacity duration-300"
|
||||
enter-from-class="opacity-0"
|
||||
enter-to-class="opacity-100"
|
||||
leave-active-class="transition-opacity duration-300"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="modelValue"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
>
|
||||
<!-- 遮罩层 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||
@click="close"
|
||||
></div>
|
||||
|
||||
<!-- 模态框内容 -->
|
||||
<div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-[#1C2035] border border-gray-700/50 rounded-3xl shadow-2xl p-6 md:p-8">
|
||||
<!-- 关闭按钮 -->
|
||||
<button
|
||||
@click="close"
|
||||
class="absolute top-4 right-4 p-2 rounded-full hover:bg-[var(--bg-elevated)] transition-colors z-10"
|
||||
>
|
||||
<XMarkIcon class="h-6 w-6 text-gray-400" />
|
||||
</button>
|
||||
|
||||
<!-- 标题 -->
|
||||
<h2 class="text-2xl font-bold text-gray-100 mb-6">
|
||||
{{ t('home.createModalTitle') }}
|
||||
</h2>
|
||||
|
||||
<!-- 输入类型切换 -->
|
||||
<div class="flex space-x-3 mb-6">
|
||||
<button
|
||||
@click="inputType = 'keywords'"
|
||||
:class="[
|
||||
'flex-1 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center space-x-2',
|
||||
inputType === 'keywords'
|
||||
? 'btn-magic text-[#0D0F1A] shadow-lg bg-gradient-to-r from-[#FFD369] to-[#FF9F43]'
|
||||
: 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
|
||||
]"
|
||||
>
|
||||
<SparklesIcon class="h-5 w-5" />
|
||||
<span>{{ t('home.inputTypeKeywords') }}</span>
|
||||
</button>
|
||||
<button
|
||||
@click="inputType = 'full_story'"
|
||||
:class="[
|
||||
'flex-1 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center space-x-2',
|
||||
inputType === 'full_story'
|
||||
? 'btn-magic text-[#0D0F1A] shadow-lg bg-gradient-to-r from-[#FFD369] to-[#FF9F43]'
|
||||
: 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
|
||||
]"
|
||||
>
|
||||
<PencilSquareIcon class="h-5 w-5" />
|
||||
<span>{{ t('home.inputTypeStory') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 呈现形式选择 (仅在关键词模式下可用) -->
|
||||
<div class="flex space-x-3 mb-6" v-if="inputType === 'keywords'">
|
||||
<button
|
||||
@click="outputMode = 'full_story'"
|
||||
:class="[
|
||||
'flex-1 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center space-x-2',
|
||||
outputMode === 'full_story'
|
||||
? 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-lg'
|
||||
: 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
|
||||
]"
|
||||
>
|
||||
<BookOpenIcon class="h-5 w-5" />
|
||||
<span>普通故事</span>
|
||||
</button>
|
||||
<button
|
||||
@click="outputMode = 'storybook'"
|
||||
:class="[
|
||||
'flex-1 py-3 rounded-xl font-semibold transition-all duration-300 flex items-center justify-center space-x-2',
|
||||
outputMode === 'storybook'
|
||||
? 'bg-gradient-to-r from-amber-500 to-orange-600 text-white shadow-lg'
|
||||
: 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
|
||||
]"
|
||||
>
|
||||
<PhotoIcon class="h-5 w-5" />
|
||||
<span>绘本模式</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 孩子档案选择 -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-300 font-semibold mb-2">
|
||||
{{ t('home.selectProfile') }}
|
||||
<span class="text-gray-500 font-normal text-sm ml-1">{{ t('home.selectProfileOptional') }}</span>
|
||||
</label>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<BaseSelect
|
||||
v-model="selectedProfileId"
|
||||
:options="[{ value: '', label: t('home.noProfile') }, ...profileOptions]"
|
||||
/>
|
||||
<BaseSelect
|
||||
v-model="selectedUniverseId"
|
||||
:options="[{ value: '', label: t('home.noUniverse') }, ...universeOptions]"
|
||||
:disabled="!selectedProfileId || universes.length === 0"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="profileError" class="text-sm text-red-500 mt-2">{{ profileError }}</div>
|
||||
<div v-if="selectedProfileId && universes.length === 0" class="text-sm text-gray-500 mt-2">
|
||||
{{ t('home.noUniverseHint') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-300 font-semibold mb-2">
|
||||
{{ inputType === 'keywords' ? t('home.inputLabel') : t('home.inputLabelStory') }}
|
||||
</label>
|
||||
<BaseTextarea
|
||||
v-model="inputData"
|
||||
:placeholder="inputType === 'keywords' ? t('home.inputPlaceholder') : t('home.inputPlaceholderStory')"
|
||||
:rows="5"
|
||||
:maxLength="5000"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 教育主题选择 -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-300 font-semibold mb-2">
|
||||
{{ t('home.themeLabel') }}
|
||||
<span class="text-gray-500 font-normal text-sm ml-1">{{ t('home.themeOptional') }}</span>
|
||||
</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="theme in themes"
|
||||
:key="theme.value"
|
||||
@click="educationTheme = educationTheme === theme.value ? '' : theme.value"
|
||||
:class="[
|
||||
'px-4 py-2 rounded-lg font-medium transition-all duration-300 flex items-center space-x-1.5 text-sm',
|
||||
educationTheme === theme.value
|
||||
? 'bg-gradient-to-r from-[#FFD369] to-[#FF9F43] text-[#0D0F1A] shadow-md'
|
||||
: 'bg-[#1C2035] text-gray-400 hover:border-[#FFD369] border border-white/10'
|
||||
]"
|
||||
>
|
||||
<component :is="theme.icon" class="h-4 w-4" />
|
||||
<span>{{ theme.label }}</span>
|
||||
</button>
|
||||
<BaseInput
|
||||
v-model="educationTheme"
|
||||
:placeholder="t('home.themeCustom')"
|
||||
class="w-28"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误提示 -->
|
||||
<Transition
|
||||
enter-active-class="transition-all duration-300"
|
||||
enter-from-class="opacity-0 -translate-y-2"
|
||||
enter-to-class="opacity-100 translate-y-0"
|
||||
leave-active-class="transition-all duration-300"
|
||||
leave-from-class="opacity-100 translate-y-0"
|
||||
leave-to-class="opacity-0 -translate-y-2"
|
||||
>
|
||||
<div v-if="error" class="mb-4 p-3 bg-red-900/20 border border-red-800 text-red-400 rounded-xl flex items-center space-x-2">
|
||||
<ExclamationCircleIcon class="h-5 w-5 flex-shrink-0" />
|
||||
<span>{{ error }}</span>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<BaseButton
|
||||
class="w-full"
|
||||
size="lg"
|
||||
:loading="loading"
|
||||
:disabled="loading"
|
||||
@click="generateStory"
|
||||
>
|
||||
<template v-if="loading">
|
||||
{{ t('home.generating') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<SparklesIcon class="h-5 w-5 mr-2" />
|
||||
{{ t('home.startCreate') }}
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 临时添加一些 btn-magic 样式确保兼容 */
|
||||
.btn-magic {
|
||||
background: linear-gradient(135deg, #FFD369 0%, #FF9F43 100%);
|
||||
color: #0D0F1A;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -84,4 +84,4 @@ function handleClick(event: MouseEvent) {
|
||||
<component v-else-if="props.icon" :is="props.icon" class="h-5 w-5" aria-hidden="true" />
|
||||
<slot />
|
||||
</component>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -40,4 +40,4 @@ const baseClasses = computed(() => [
|
||||
<div :class="[baseClasses, attrs.class]" v-bind="attrs">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -68,4 +68,4 @@ const passthroughAttrs = computed(() => {
|
||||
{{ props.error }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -64,4 +64,4 @@ function handleChange(event: Event) {
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -59,4 +59,4 @@ const passthroughAttrs = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -57,4 +57,4 @@ const headerClasses = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -42,4 +42,4 @@ function handleAction() {
|
||||
{{ props.actionText }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -33,4 +33,4 @@ const sizeClasses = computed(() => {
|
||||
{{ props.text }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -1,136 +1,136 @@
|
||||
<script setup lang="ts">
|
||||
import { XMarkIcon, CommandLineIcon } from '@heroicons/vue/24/outline'
|
||||
|
||||
defineProps<{
|
||||
modelValue: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
}>()
|
||||
|
||||
function close() {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
function loginWithGithub() {
|
||||
window.location.href = '/auth/github/signin'
|
||||
}
|
||||
|
||||
function loginWithGoogle() {
|
||||
window.location.href = '/auth/google/signin'
|
||||
}
|
||||
|
||||
function loginWithDev() {
|
||||
window.location.href = '/auth/dev/signin'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="transition-opacity duration-300"
|
||||
enter-from-class="opacity-0"
|
||||
enter-to-class="opacity-100"
|
||||
leave-active-class="transition-opacity duration-300"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="modelValue"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
>
|
||||
<!-- 遮罩层 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||
@click="close"
|
||||
></div>
|
||||
|
||||
<!-- 对话框 -->
|
||||
<div class="login-dialog glass rounded-3xl shadow-2xl p-8 w-full max-w-sm relative">
|
||||
<!-- 关闭按钮 -->
|
||||
<button
|
||||
@click="close"
|
||||
class="absolute top-4 right-4 p-2 rounded-full hover:bg-[var(--bg-elevated)] transition-colors"
|
||||
>
|
||||
<XMarkIcon class="h-5 w-5 text-[var(--text-muted)]" />
|
||||
</button>
|
||||
|
||||
<!-- 标题 -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="text-3xl mb-3">✨</div>
|
||||
<h2 class="text-xl font-bold text-[var(--text)] mb-2">
|
||||
登录开始创作
|
||||
</h2>
|
||||
<p class="text-sm text-[var(--text-muted)]">
|
||||
选择你的登录方式
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<div class="space-y-3">
|
||||
<button
|
||||
@click="loginWithDev"
|
||||
class="login-btn w-full py-3.5 px-4 rounded-xl font-semibold flex items-center justify-center gap-3 transition-all duration-300 bg-gray-700/50 hover:bg-gray-700 text-white border-dashed border-gray-600"
|
||||
>
|
||||
<CommandLineIcon class="w-5 h-5" />
|
||||
<span>开发模式一键登录</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="loginWithGithub"
|
||||
class="login-btn w-full py-3.5 px-4 rounded-xl font-semibold flex items-center justify-center gap-3 transition-all duration-300"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
<span>使用 GitHub 登录</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="loginWithGoogle"
|
||||
class="login-btn w-full py-3.5 px-4 rounded-xl font-semibold flex items-center justify-center gap-3 transition-all duration-300"
|
||||
>
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
||||
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
|
||||
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
||||
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
|
||||
</svg>
|
||||
<span>使用 Google 登录</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-dialog {
|
||||
--bg-deep: #0D0F1A;
|
||||
--bg-card: #151829;
|
||||
--bg-elevated: #1C2035;
|
||||
--accent: #FFD369;
|
||||
--text: #EAEAEA;
|
||||
--text-muted: #6B7280;
|
||||
--border: rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
.glass {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
border-color: var(--accent);
|
||||
background: rgba(255, 211, 105, 0.1);
|
||||
}
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
import { XMarkIcon, CommandLineIcon } from '@heroicons/vue/24/outline'
|
||||
|
||||
defineProps<{
|
||||
modelValue: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
}>()
|
||||
|
||||
function close() {
|
||||
emit('update:modelValue', false)
|
||||
}
|
||||
|
||||
function loginWithGithub() {
|
||||
window.location.href = '/auth/github/signin'
|
||||
}
|
||||
|
||||
function loginWithGoogle() {
|
||||
window.location.href = '/auth/google/signin'
|
||||
}
|
||||
|
||||
function loginWithDev() {
|
||||
window.location.href = '/auth/dev/signin'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="transition-opacity duration-300"
|
||||
enter-from-class="opacity-0"
|
||||
enter-to-class="opacity-100"
|
||||
leave-active-class="transition-opacity duration-300"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="modelValue"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
>
|
||||
<!-- 遮罩层 -->
|
||||
<div
|
||||
class="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||||
@click="close"
|
||||
></div>
|
||||
|
||||
<!-- 对话框 -->
|
||||
<div class="login-dialog glass rounded-3xl shadow-2xl p-8 w-full max-w-sm relative">
|
||||
<!-- 关闭按钮 -->
|
||||
<button
|
||||
@click="close"
|
||||
class="absolute top-4 right-4 p-2 rounded-full hover:bg-[var(--bg-elevated)] transition-colors"
|
||||
>
|
||||
<XMarkIcon class="h-5 w-5 text-[var(--text-muted)]" />
|
||||
</button>
|
||||
|
||||
<!-- 标题 -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="text-3xl mb-3">✨</div>
|
||||
<h2 class="text-xl font-bold text-[var(--text)] mb-2">
|
||||
登录开始创作
|
||||
</h2>
|
||||
<p class="text-sm text-[var(--text-muted)]">
|
||||
选择你的登录方式
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<div class="space-y-3">
|
||||
<button
|
||||
@click="loginWithDev"
|
||||
class="login-btn w-full py-3.5 px-4 rounded-xl font-semibold flex items-center justify-center gap-3 transition-all duration-300 bg-gray-700/50 hover:bg-gray-700 text-white border-dashed border-gray-600"
|
||||
>
|
||||
<CommandLineIcon class="w-5 h-5" />
|
||||
<span>开发模式一键登录</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="loginWithGithub"
|
||||
class="login-btn w-full py-3.5 px-4 rounded-xl font-semibold flex items-center justify-center gap-3 transition-all duration-300"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
<span>使用 GitHub 登录</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="loginWithGoogle"
|
||||
class="login-btn w-full py-3.5 px-4 rounded-xl font-semibold flex items-center justify-center gap-3 transition-all duration-300"
|
||||
>
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
||||
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
|
||||
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
||||
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
|
||||
</svg>
|
||||
<span>使用 Google 登录</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-dialog {
|
||||
--bg-deep: #0D0F1A;
|
||||
--bg-card: #151829;
|
||||
--bg-elevated: #1C2035;
|
||||
--accent: #FFD369;
|
||||
--text: #EAEAEA;
|
||||
--text-muted: #6B7280;
|
||||
--border: rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
.glass {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
border-color: var(--accent);
|
||||
background: rgba(255, 211, 105, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,4 +5,4 @@ export { default as BaseSelect } from './BaseSelect.vue'
|
||||
export { default as BaseTextarea } from './BaseTextarea.vue'
|
||||
export { default as LoadingSpinner } from './LoadingSpinner.vue'
|
||||
export { default as EmptyState } from './EmptyState.vue'
|
||||
export { default as ConfirmModal } from './ConfirmModal.vue'
|
||||
export { default as ConfirmModal } from './ConfirmModal.vue'
|
||||
|
||||
Reference in New Issue
Block a user