sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 优化响应式布局和样式调整
Some checks failed
Build and Deploy / deploy (push) Has been cancelled
Details

Browse Source 
- 调整 ChatDrawer 组件宽度为响应式设计
- 重构 MyFavoritesModal 组件，移除保存功能，优化搜索和样式
- 优化 Forecast 页面的响应式布局和样式
- 调整登录页验证码组件尺寸适配移动端
- 修复 Verify 组件在移动端的宽度问题
This commit is contained in:
sion123
2026-03-23 11:56:44 +08:00
parent b9a1763e71
commit 6564d95a6b
5 changed files with 132 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/web-gold/src/components/agents/ChatDrawer.vue
View File

@@ -180,7 +180,7 @@ watch(() => props.visible, (val) => {
<template> <template>
<Sheet :open="visible" @update:open="handleClose"> <Sheet :open="visible" @update:open="handleClose">
<SheetContent side="right" class="w-full sm:w-[560px] p-0 flex flex-col bg-background"> <SheetContent side="right" class="w-full sm:w-[420px] md:w-[560px] lg:w-[640px] p-0 flex flex-col bg-background">
<!-- Header --> <!-- Header -->
<SheetHeader class="shrink-0"> <SheetHeader class="shrink-0">
<ChatDrawerHeader :agent="agent" @history="openHistory" /> <ChatDrawerHeader :agent="agent" @history="openHistory" />

140
frontend/app/web-gold/src/components/agents/MyFavoritesModal.vue
View File

@@ -19,8 +19,6 @@ import {
AlertDialogTrigger AlertDialogTrigger
} from '@/components/ui/alert-dialog' } from '@/components/ui/alert-dialog'
import SavePromptModal from '@/components/SavePromptModal.vue'
// Props // Props
const props = defineProps({ const props = defineProps({
visible: { visible: {
@@ -30,22 +28,19 @@ const props = defineProps({
}) })
// Emits // Emits
const emit = defineEmits(['update:visible', 'refresh']) const emit = defineEmits(['update:visible', 'refresh', 'chat'])
// State // State
const loading = ref(false) const loading = ref(false)
const promptList = ref([]) const promptList = ref([])
const searchKeyword = ref('') const searchKeyword = ref('')
const showSaveModal = ref(false)
const editingPrompt = ref(null)
// Computed // Computed - 只搜索名称
const filteredList = computed(() => { const filteredList = computed(() => {
if (!searchKeyword.value.trim()) return promptList.value if (!searchKeyword.value.trim()) return promptList.value
const keyword = searchKeyword.value.trim().toLowerCase() const keyword = searchKeyword.value.trim().toLowerCase()
return promptList.value.filter(item => return promptList.value.filter(item =>
item.name.toLowerCase().includes(keyword) || item.name.toLowerCase().includes(keyword)
(item.content && item.content.toLowerCase().includes(keyword))
) )
}) })
@@ -65,7 +60,6 @@ async function loadList() {
promptList.value = res.data.map(item => ({ promptList.value = res.data.map(item => ({
id: item.id, id: item.id,
name: item.name, name: item.name,
content: item.content,
category: item.category, category: item.category,
useCount: item.useCount || 0 useCount: item.useCount || 0
})) }))
@@ -82,20 +76,9 @@ function handleClose() {
emit('update:visible', false) emit('update:visible', false)
} }
function handleCreate() {
editingPrompt.value = null
showSaveModal.value = true
}
function handleEdit(item) {
editingPrompt.value = { ...item }
showSaveModal.value = true
}
async function handleDelete(id) { async function handleDelete(id) {
try { try {
await UserPromptApi.deleteUserPrompt(id) await UserPromptApi.deleteUserPrompt(id)
// 从列表中移除
const index = promptList.value.findIndex(p => p.id === id) const index = promptList.value.findIndex(p => p.id === id)
if (index !== -1) { if (index !== -1) {
promptList.value.splice(index, 1) promptList.value.splice(index, 1)
@@ -108,26 +91,25 @@ async function handleDelete(id) {
} }
} }
function handleSaveSuccess() { function handleUse(item) {
showSaveModal.value = false emit('chat', {
loadList() id: item.id,
emit('refresh') name: item.name,
categoryName: item.category || '我的风格'
})
handleClose()
} }
</script> </script>
<template> <template>
<Dialog :open="visible" @update:open="$emit('update:visible', $event)"> <Dialog :open="visible" @update:open="$emit('update:visible', $event)">
<DialogContent class="sm:max-w-[700px]"> <DialogContent class="sm:max-w-[500px]">
<DialogHeader> <DialogHeader>
<DialogTitle>我创建的</DialogTitle> <DialogTitle>我创建的风格</DialogTitle>
</DialogHeader> </DialogHeader>
<!-- 操作栏 --> <!-- 操作栏 -->
<div class="flex gap-3 mb-4"> <div class="flex gap-3 mb-4">
<Button @click="handleCreate">
<Icon icon="lucide:plus" class="size-4" />
新建风格
</Button>
<Button variant="outline" @click="loadList" :disabled="loading"> <Button variant="outline" @click="loadList" :disabled="loading">
<Icon v-if="loading" icon="lucide:loader-2" class="size-4 animate-spin" /> <Icon v-if="loading" icon="lucide:loader-2" class="size-4 animate-spin" />
<Icon v-else icon="lucide:refresh-cw" class="size-4" /> <Icon v-else icon="lucide:refresh-cw" class="size-4" />
@@ -139,7 +121,7 @@ function handleSaveSuccess() {
<div class="mb-4"> <div class="mb-4">
<Input <Input
v-model="searchKeyword" v-model="searchKeyword"
placeholder="搜索风格..." placeholder="搜索风格名称..."
/> />
</div> </div>
@@ -156,24 +138,26 @@ function handleSaveSuccess() {
class="prompt-card" class="prompt-card"
> >
<div class="card-header"> <div class="card-header">
<span class="card-name">{{ item.name }}</span> <div class="card-info">
<span class="card-name">{{ item.name }}</span>
<span class="card-category" v-if="item.category">{{ item.category }}</span>
</div>
<div class="flex gap-2"> <div class="flex gap-2">
<Button variant="link" size="sm" class="h-auto p-0" @click="handleEdit(item)"> <Button variant="default" size="sm" @click="handleUse(item)">
<Icon icon="lucide:pencil" class="size-4" /> <Icon icon="lucide:message-circle" class="size-4" />
编辑 使用
</Button> </Button>
<AlertDialog> <AlertDialog>
<AlertDialogTrigger as-child> <AlertDialogTrigger as-child>
<Button variant="link" size="sm" class="h-auto p-0 text-destructive"> <Button variant="ghost" size="sm" class="text-muted-foreground hover:text-destructive">
<Icon icon="lucide:trash-2" class="size-4" /> <Icon icon="lucide:trash-2" class="size-4" />
删除
</Button> </Button>
</AlertDialogTrigger> </AlertDialogTrigger>
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle>确认删除</AlertDialogTitle> <AlertDialogTitle>确认删除</AlertDialogTitle>
<AlertDialogDescription> <AlertDialogDescription>
确定要删除此风格吗？此操作无法撤销。 确定要删除"{{ item.name }}"吗？此操作无法撤销。
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
@@ -184,9 +168,7 @@ function handleSaveSuccess() {
</AlertDialog> </AlertDialog>
</div> </div>
</div> </div>
<div class="card-content">{{ item.content }}</div>
<div class="card-footer"> <div class="card-footer">
<span class="card-category" v-if="item.category">{{ item.category }}</span>
<span class="text-xs text-muted-foreground">使用 {{ item.useCount || 0 }} 次</span> <span class="text-xs text-muted-foreground">使用 {{ item.useCount || 0 }} 次</span>
</div> </div>
</div> </div>
@@ -194,17 +176,10 @@ function handleSaveSuccess() {
<!-- 空状态 --> <!-- 空状态 -->
<div class="empty-state" v-else> <div class="empty-state" v-else>
<Icon icon="lucide:star" class="empty-icon" /> <Icon icon="lucide:sparkles" class="empty-icon" />
<p class="empty-title">暂无收藏的风格</p> <p class="empty-title">暂无创建的风格</p>
<p class="empty-desc">点击"新建风格"创建您的第一个风格</p> <p class="empty-desc">在对话中可保存生成的内容为风格</p>
</div> </div>
<!-- 保存弹窗 -->
<SavePromptModal
v-model:visible="showSaveModal"
:prompt="editingPrompt"
@success="handleSaveSuccess"
/>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</template> </template>
@@ -213,21 +188,21 @@ function handleSaveSuccess() {
.prompt-list { .prompt-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 10px;
max-height: 400px; max-height: 400px;
overflow-y: auto; overflow-y: auto;
} }
.prompt-card { .prompt-card {
padding: 16px; padding: 14px 16px;
border: 1px solid var(--color-gray-200); border: 1px solid var(--border);
border-radius: 8px; border-radius: 10px;
background: var(--color-bg-card); background: var(--card);
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &:hover {
border-color: var(--color-primary-300); border-color: var(--primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px oklch(0.55 0.14 270 / 0.1);
} }
} }
@@ -235,38 +210,41 @@ function handleSaveSuccess() {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 8px; }
.card-info {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
} }
.card-name { .card-name {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
color: var(--color-gray-900); color: var(--foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.card-content { .card-category {
font-size: 13px; font-size: 11px;
color: var(--color-gray-600); padding: 2px 8px;
line-height: 1.5; background: var(--muted);
display: -webkit-box; color: var(--muted-foreground);
-webkit-line-clamp: 2; border-radius: 6px;
-webkit-box-orient: vertical; flex-shrink: 0;
overflow: hidden;
margin-bottom: 8px;
} }
.card-footer { .card-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
align-items: center; align-items: center;
font-size: 12px; margin-top: 8px;
} padding-top: 8px;
border-top: 1px solid var(--border);
.card-category {
padding: 2px 8px;
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
border-radius: 10px;
} }
.empty-state { .empty-state {
@@ -279,8 +257,8 @@ function handleSaveSuccess() {
} }
.empty-icon { .empty-icon {
font-size: 48px; font-size: 40px;
color: #f59e0b; color: var(--primary);
margin-bottom: 16px; margin-bottom: 16px;
opacity: 0.5; opacity: 0.5;
} }
@@ -288,13 +266,13 @@ function handleSaveSuccess() {
.empty-title { .empty-title {
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
color: var(--color-gray-900); color: var(--foreground);
margin: 0 0 8px 0; margin: 0 0 8px 0;
} }
.empty-desc { .empty-desc {
font-size: 13px; font-size: 13px;
color: var(--color-gray-500); color: var(--muted-foreground);
margin: 0; margin: 0;
} }
</style> </style>

137
frontend/app/web-gold/src/views/trends/Forecast.vue
View File

@@ -350,17 +350,17 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="forecast-page"> <div class="forecast-page lg:grid-cols-[1fr_400px] grid-cols-1 gap-4 lg:gap-4 md:gap-3 gap-2">
<!-- 左侧：热点搜索 --> <!-- 左侧：热点搜索 -->
<section class="search-panel"> <section class="search-panel">
<div class="panel-header"> <div class="panel-header p-3 lg:p-3 md:p-2 p-2">
<h2 class="panel-title">热点预测</h2> <h2 class="panel-title text-base lg:text-base md:text-base text-sm">热点预测</h2>
</div> </div>
<!-- 搜索栏 --> <!-- 搜索栏 -->
<div class="search-bar"> <div class="search-bar flex lg:flex-row flex-col gap-2 lg:gap-2 md:gap-2 p-2 lg:p-3 md:p-2 p-2">
<div class="search-input-wrap"> <div class="search-input-wrap flex-1 relative w-full">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg class="search-icon absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/> <circle cx="11" cy="11" r="8"/>
<path d="M21 21l-4.35-4.35"/> <path d="M21 21l-4.35-4.35"/>
</svg> </svg>
@@ -368,7 +368,7 @@ onMounted(() => {
v-model="searchKeyword" v-model="searchKeyword"
type="text" type="text"
placeholder="搜索热门内容..." placeholder="搜索热门内容..."
class="search-input" class="search-input w-full h-10 lg:h-[38px] md:h-9 h-10 text-base lg:text-base md:text-sm text-base"
:disabled="isLoading" :disabled="isLoading"
@keypress="handleSearchKeypress" @keypress="handleSearchKeypress"
/> />
@@ -376,7 +376,7 @@ onMounted(() => {
<button <button
@click="handleSearch" @click="handleSearch"
:disabled="isLoading || !searchKeyword.trim()" :disabled="isLoading || !searchKeyword.trim()"
class="search-btn" class="search-btn w-full lg:w-auto lg:px-[18px] md:px-3.5 px-0 h-10 lg:h-[38px] md:h-9 h-10"
> >
<span v-if="isLoading" class="btn-spinner"></span> <span v-if="isLoading" class="btn-spinner"></span>
<span v-else>搜索</span> <span v-else>搜索</span>
@@ -384,11 +384,11 @@ onMounted(() => {
</div> </div>
<!-- 筛选器 --> <!-- 筛选器 -->
<div class="filters-row"> <div class="filters-row flex lg:flex-row md:flex-wrap flex-col gap-2 lg:gap-3 md:gap-2 p-0 lg:px-4 md:px-3 px-2 pb-2 lg:pb-3 md:pb-2 pb-2">
<div class="filter-item"> <div class="filter-item flex items-center gap-2 lg:flex-1 lg:min-w-[140px] md:flex-1 md:min-w-[140px] w-full">
<span class="filter-label">排序</span> <span class="filter-label text-xs text-gray-400 hidden sm:inline">排序</span>
<Select v-model="searchParams.sort_type"> <Select v-model="searchParams.sort_type">
<SelectTrigger class="h-[26px] w-[160px]"> <SelectTrigger class="h-[26px] w-full min-[481px]:w-[160px]">
<SelectValue placeholder="综合" /> <SelectValue placeholder="综合" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -398,10 +398,10 @@ onMounted(() => {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div class="filter-item"> <div class="filter-item flex items-center gap-2 lg:flex-1 lg:min-w-[140px] md:flex-1 md:min-w-[140px] w-full">
<span class="filter-label">时间</span> <span class="filter-label text-xs text-gray-400 hidden sm:inline">时间</span>
<Select v-model="searchParams.publish_time"> <Select v-model="searchParams.publish_time">
<SelectTrigger class="h-[26px] w-[160px]"> <SelectTrigger class="h-[26px] w-full min-[481px]:w-[160px]">
<SelectValue placeholder="不限" /> <SelectValue placeholder="不限" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -412,10 +412,10 @@ onMounted(() => {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div class="filter-item"> <div class="filter-item flex items-center gap-2 lg:flex-1 lg:min-w-[140px] md:flex-1 md:min-w-[140px] w-full">
<span class="filter-label">时长</span> <span class="filter-label text-xs text-gray-400 hidden sm:inline">时长</span>
<Select v-model="searchParams.filter_duration"> <Select v-model="searchParams.filter_duration">
<SelectTrigger class="h-[26px] w-[160px]"> <SelectTrigger class="h-[26px] w-full min-[481px]:w-[160px]">
<SelectValue placeholder="不限" /> <SelectValue placeholder="不限" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -446,15 +446,15 @@ onMounted(() => {
</div> </div>
<!-- 结果卡片 --> <!-- 结果卡片 -->
<div v-else class="topic-list"> <div v-else class="topic-list flex flex-col gap-2">
<div <div
v-for="topic in hotTopics" v-for="topic in hotTopics"
:key="topic.id" :key="topic.id"
@click="handleSelectTopic(topic)" @click="handleSelectTopic(topic)"
class="topic-card" class="topic-card flex items-start gap-3 lg:gap-3 md:gap-2 gap-2 p-3 lg:p-3 md:p-2 p-2"
:class="{ selected: selectedTopic === topic.id }" :class="{ selected: selectedTopic === topic.id }"
> >
<div class="topic-cover"> <div class="topic-cover relative shrink-0 w-[88px] lg:w-[88px] md:w-[76px] w-[64px] h-[50px] lg:h-[50px] md:h-[44px] h-[38px]">
<img <img
v-if="topic.cover" v-if="topic.cover"
:src="topic.cover" :src="topic.cover"
@@ -466,31 +466,31 @@ onMounted(() => {
<path d="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm0 2v12h16V6H4zm6 2l5 4-5 4V8z"/> <path d="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm0 2v12h16V6H4zm6 2l5 4-5 4V8z"/>
</svg> </svg>
</div> </div>
<span class="topic-num">{{ topic.id }}</span> <span class="topic-num min-w-4 h-4 text-[10px]">{{ topic.id }}</span>
</div> </div>
<div class="topic-content"> <div class="topic-content flex-1 min-w-0 flex flex-col gap-1">
<h3 class="topic-title" @click.stop="openVideo(topic, $event)" :title="topic.title"> <h3 class="topic-title text-sm lg:text-sm md:text-xs text-xs" @click.stop="openVideo(topic, $event)" :title="topic.title">
{{ truncateTitle(topic.title, 32) }} {{ truncateTitle(topic.title, 32) }}
</h3> </h3>
<div class="topic-meta"> <div class="topic-meta flex items-center gap-2">
<img v-if="topic.authorAvatar" :src="topic.authorAvatar" alt="" class="author-avatar" @error="handleImageError"/> <img v-if="topic.authorAvatar" :src="topic.authorAvatar" alt="" class="author-avatar w-3.5 h-3.5" @error="handleImageError"/>
<span class="author-name">{{ topic.author }}</span> <span class="author-name text-[11px] md:text-[10px] text-[10px]">{{ topic.author }}</span>
</div> </div>
<div class="topic-stats"> <div class="topic-stats flex gap-2.5">
<span class="stat-item"> <span class="stat-item inline-flex items-center gap-0.5 text-[11px] md:text-[10px] text-[10px]">
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"/></svg> <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"/></svg>
{{ formatNumber(topic.playCount) }} {{ formatNumber(topic.playCount) }}
</span> </span>
<span class="stat-item"> <span class="stat-item inline-flex items-center gap-0.5 text-[11px] md:text-[10px] text-[10px]">
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.834a1 1 0 001.555.832L12 13.202a5 5 0 001.196-.599l.707-.707a1 1 0 00.293-.707V8.465a1 1 0 00-1.707-.707L12 8.465V5a2 2 0 00-2-2H7a1 1 0 000 2h3v3z"/></svg> <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.834a1 1 0 001.555.832L12 13.202a5 5 0 001.196-.599l.707-.707a1 1 0 00.293-.707V8.465a1 1 0 00-1.707-.707L12 8.465V5a2 2 0 00-2-2H7a1 1 0 000 2h3v3z"/></svg>
{{ formatNumber(topic.diggCount) }} {{ formatNumber(topic.diggCount) }}
</span> </span>
</div> </div>
</div> </div>
<button class="action-btn" @click.stop="handleCreate(topic)" title="提取文案"> <button class="action-btn shrink-0 w-7 lg:w-7 md:w-6 w-6 h-7 lg:h-7 md:h-6 h-6" @click.stop="handleCreate(topic)" title="提取文案">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg class="w-4 lg:w-4 md:w-3.5 w-3.5 h-4 lg:h-4 md:h-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 5v14M5 12h14"/> <path d="M12 5v14M5 12h14"/>
</svg> </svg>
</button> </button>
@@ -500,16 +500,16 @@ onMounted(() => {
</section> </section>
<!-- 右侧：创作工具 --> <!-- 右侧：创作工具 -->
<section class="create-panel"> <section class="create-panel lg:min-h-0 min-h-[400px]">
<div class="panel-header"> <div class="panel-header p-3 lg:p-3 md:p-2 p-2">
<h2 class="panel-title">创作工具</h2> <h2 class="panel-title text-base lg:text-base md:text-base text-sm">创作工具</h2>
</div> </div>
<div class="create-form"> <div class="create-form flex flex-col gap-4 lg:gap-4 md:gap-3 gap-3 p-4 lg:p-4 md:p-3 p-2 overflow-y-auto">
<!-- 文案输入 --> <!-- 文案输入 -->
<div class="form-block"> <div class="form-block flex flex-col gap-2">
<div class="block-header"> <div class="block-header flex justify-between items-center">
<label>文案内容</label> <label class="text-xs font-medium text-gray-600">文案内容</label>
<span v-if="isAnalyzing" class="status-tag analyzing"> <span v-if="isAnalyzing" class="status-tag analyzing">
<span class="tag-dot"></span> <span class="tag-dot"></span>
分析中 分析中
@@ -520,13 +520,13 @@ onMounted(() => {
:rows="5" :rows="5"
placeholder="输入文案或点击热点卡片自动提取..." placeholder="输入文案或点击热点卡片自动提取..."
:disabled="isAnalyzing" :disabled="isAnalyzing"
class="content-input min-h-[120px]" class="content-input min-h-[120px] lg:min-h-[120px] md:min-h-[100px] min-h-[100px] text-sm lg:text-sm md:text-xs text-xs"
/> />
</div> </div>
<!-- 风格选择 --> <!-- 风格选择 -->
<div class="form-block"> <div class="form-block flex flex-col gap-2">
<label>文案风格</label> <label class="text-xs font-medium text-gray-600">文案风格</label>
<StyleSelector <StyleSelector
v-model="topicDetails.selectedAgentId" v-model="topicDetails.selectedAgentId"
placeholder="选择风格" placeholder="选择风格"
@@ -536,24 +536,24 @@ onMounted(() => {
</div> </div>
<!-- 模式 & 幅度 --> <!-- 模式 & 幅度 -->
<div class="form-row"> <div class="form-row flex lg:flex-row flex-col gap-4 lg:gap-3 md:gap-3 gap-3">
<div class="form-block half"> <div class="form-block half flex-1 lg:flex-1 flex-none flex flex-col gap-2">
<label>生成模式</label> <label class="text-xs font-medium text-gray-600">生成模式</label>
<div class="mode-switch"> <div class="mode-switch flex gap-2">
<button <button
:class="['mode-btn', { active: topicDetails.modelType === 'forecast_standard' }]" :class="['mode-btn flex-1 h-9 lg:h-9 md:h-8 h-8 text-sm lg:text-sm md:text-xs text-xs', { active: topicDetails.modelType === 'forecast_standard' }]"
@click="topicDetails.modelType = 'forecast_standard'" @click="topicDetails.modelType = 'forecast_standard'"
>标准</button> >标准</button>
<button <button
:class="['mode-btn', { active: topicDetails.modelType === 'forecast_pro' }]" :class="['mode-btn flex-1 h-9 lg:h-9 md:h-8 h-8 text-sm lg:text-sm md:text-xs text-xs', { active: topicDetails.modelType === 'forecast_pro' }]"
@click="topicDetails.modelType = 'forecast_pro'" @click="topicDetails.modelType = 'forecast_pro'"
>PRO</button> >PRO</button>
</div> </div>
</div> </div>
<div class="form-block half"> <div class="form-block half flex-1 lg:flex-1 flex-none flex flex-col gap-2">
<div class="block-header"> <div class="block-header flex justify-between items-center">
<label>改写幅度</label> <label class="text-xs font-medium text-gray-600">改写幅度</label>
<span class="level-num">{{ topicDetails.level }}%</span> <span class="level-num text-xs font-semibold text-primary-500">{{ topicDetails.level }}%</span>
</div> </div>
<input <input
type="range" type="range"
@@ -568,7 +568,7 @@ onMounted(() => {
<!-- 生成按钮 --> <!-- 生成按钮 -->
<button <button
class="generate-btn" class="generate-btn w-full h-11 lg:h-11 md:h-10 h-10 text-base lg:text-base md:text-sm text-sm mt-auto"
:class="{ loading: isGenerating }" :class="{ loading: isGenerating }"
:disabled="!topicDetails.copywriting?.trim() || !topicDetails.selectedAgentId || isGenerating" :disabled="!topicDetails.copywriting?.trim() || !topicDetails.selectedAgentId || isGenerating"
@click="handleGenerate" @click="handleGenerate"
@@ -578,28 +578,28 @@ onMounted(() => {
<span>生成中</span> <span>生成中</span>
</template> </template>
<template v-else> <template v-else>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/> <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg> </svg>
<span>生成爆款</span> <span>生成爆款</span>
</template> </template>
</button> </button>
<p class="points-hint">生成爆款文案将消耗积分</p> <p class="points-hint text-center text-xs lg:text-xs md:text-[10px] text-[10px] text-gray-500 mt-2">生成爆款文案将消耗积分</p>
<!-- 生成结果 --> <!-- 生成结果 -->
<Transition name="slide-up"> <Transition name="slide-up">
<div v-if="generatedContent" class="result-block"> <div v-if="generatedContent" class="result-block pt-4 lg:pt-4 md:pt-3 pt-3 border-t border-gray-200">
<div class="result-header"> <div class="result-header flex justify-between items-center mb-2.5 lg:mb-2.5 md:mb-2 mb-2">
<span class="result-title">生成结果</span> <span class="result-title text-xs lg:text-xs md:text-[10px] text-[10px] font-medium text-gray-600">生成结果</span>
<button class="copy-btn" @click="copyContent"> <button class="copy-btn inline-flex items-center gap-1 px-2.5 lg:px-2.5 md:px-2 px-2 py-1 lg:py-1 md:py-0.5 py-0.5 text-xs lg:text-xs md:text-[10px] text-[10px]" @click="copyContent">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2"/> <rect x="9" y="9" width="13" height="13" rx="2"/>
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/> <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
</svg> </svg>
复制 复制
</button> </button>
</div> </div>
<div class="result-content">{{ generatedContent }}</div> <div class="result-content p-3.5 lg:p-3.5 md:p-3 p-2 text-sm lg:text-sm md:text-xs text-xs leading-relaxed max-h-60 lg:max-h-60 md:max-h-52 max-h-44">{{ generatedContent }}</div>
</div> </div>
</Transition> </Transition>
</div> </div>
@@ -1186,15 +1186,4 @@ onMounted(() => {
opacity: 0; opacity: 0;
transform: translateY(-8px); transform: translateY(-8px);
} }
// 响应式
@media (max-width: 900px) {
.forecast-page {
grid-template-columns: 1fr;
}
.create-panel {
min-height: 400px;
}
}
</style> </style>

8
yudao-ui-admin-vue3/src/components/Verifition/src/Verify.vue
View File

File diff suppressed because one or more lines are too long

2
yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
View File

@@ -82,7 +82,7 @@
v-if="loginData.captchaEnable === 'true'" v-if="loginData.captchaEnable === 'true'"
ref="verify" ref="verify"
:captchaType="captchaType" :captchaType="captchaType"
:imgSize="{ width: '400px', height: '200px' }" :imgSize="{ width: '310px', height: '155px' }"
mode="pop" mode="pop"
@success="handleLogin" @success="handleLogin"
/> />