sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions 1 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

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

@@ -350,17 +350,17 @@ onMounted(() => {
</script>
<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">
<div class="panel-header">
<h2 class="panel-title">热点预测</h2>
<div class="panel-header p-3 lg:p-3 md:p-2 p-2">
<h2 class="panel-title text-base lg:text-base md:text-base text-sm">热点预测</h2>
</div>
<!-- 搜索栏 -->
<div class="search-bar">
<div class="search-input-wrap">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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 flex-1 relative w-full">
<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"/>
<path d="M21 21l-4.35-4.35"/>
</svg>
@@ -368,7 +368,7 @@ onMounted(() => {
v-model="searchKeyword"
type="text"
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"
@keypress="handleSearchKeypress"
/>
@@ -376,7 +376,7 @@ onMounted(() => {
<button
@click="handleSearch"
: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-else>搜索</span>
@@ -384,11 +384,11 @@ onMounted(() => {
</div>
<!-- 筛选器 -->
<div class="filters-row">
<div class="filter-item">
<span class="filter-label">排序</span>
<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 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 text-xs text-gray-400 hidden sm:inline">排序</span>
<Select v-model="searchParams.sort_type">
<SelectTrigger class="h-[26px] w-[160px]">
<SelectTrigger class="h-[26px] w-full min-[481px]:w-[160px]">
<SelectValue placeholder="综合" />
</SelectTrigger>
<SelectContent>
@@ -398,10 +398,10 @@ onMounted(() => {
</SelectContent>
</Select>
</div>
<div class="filter-item">
<span class="filter-label">时间</span>
<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 text-xs text-gray-400 hidden sm:inline">时间</span>
<Select v-model="searchParams.publish_time">
<SelectTrigger class="h-[26px] w-[160px]">
<SelectTrigger class="h-[26px] w-full min-[481px]:w-[160px]">
<SelectValue placeholder="不限" />
</SelectTrigger>
<SelectContent>
@@ -412,10 +412,10 @@ onMounted(() => {
</SelectContent>
</Select>
</div>
<div class="filter-item">
<span class="filter-label">时长</span>
<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 text-xs text-gray-400 hidden sm:inline">时长</span>
<Select v-model="searchParams.filter_duration">
<SelectTrigger class="h-[26px] w-[160px]">
<SelectTrigger class="h-[26px] w-full min-[481px]:w-[160px]">
<SelectValue placeholder="不限" />
</SelectTrigger>
<SelectContent>
@@ -446,15 +446,15 @@ onMounted(() => {
</div>
<!-- 结果卡片 -->
<div v-else class="topic-list">
<div v-else class="topic-list flex flex-col gap-2">
<div
v-for="topic in hotTopics"
:key="topic.id"
@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 }"
>
<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
v-if="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"/>
</svg>
</div>
<span class="topic-num">{{ topic.id }}</span>
<span class="topic-num min-w-4 h-4 text-[10px]">{{ topic.id }}</span>
</div>
<div class="topic-content">
<h3 class="topic-title" @click.stop="openVideo(topic, $event)" :title="topic.title">
<div class="topic-content flex-1 min-w-0 flex flex-col gap-1">
<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) }}
</h3>
<div class="topic-meta">
<img v-if="topic.authorAvatar" :src="topic.authorAvatar" alt="" class="author-avatar" @error="handleImageError"/>
<span class="author-name">{{ topic.author }}</span>
<div class="topic-meta flex items-center gap-2">
<img v-if="topic.authorAvatar" :src="topic.authorAvatar" alt="" class="author-avatar w-3.5 h-3.5" @error="handleImageError"/>
<span class="author-name text-[11px] md:text-[10px] text-[10px]">{{ topic.author }}</span>
</div>
<div class="topic-stats">
<span class="stat-item">
<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>
<div class="topic-stats flex gap-2.5">
<span class="stat-item inline-flex items-center gap-0.5 text-[11px] md:text-[10px] text-[10px]">
<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) }}
</span>
<span class="stat-item">
<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>
<span class="stat-item inline-flex items-center gap-0.5 text-[11px] md:text-[10px] text-[10px]">
<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) }}
</span>
</div>
</div>
<button class="action-btn" @click.stop="handleCreate(topic)" title="提取文案">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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 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"/>
</svg>
</button>
@@ -500,16 +500,16 @@ onMounted(() => {
</section>
<!-- 右侧：创作工具 -->
<section class="create-panel">
<div class="panel-header">
<h2 class="panel-title">创作工具</h2>
<section class="create-panel lg:min-h-0 min-h-[400px]">
<div class="panel-header p-3 lg:p-3 md:p-2 p-2">
<h2 class="panel-title text-base lg:text-base md:text-base text-sm">创作工具</h2>
</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="block-header">
<label>文案内容</label>
<div class="form-block flex flex-col gap-2">
<div class="block-header flex justify-between items-center">
<label class="text-xs font-medium text-gray-600">文案内容</label>
<span v-if="isAnalyzing" class="status-tag analyzing">
<span class="tag-dot"></span>
分析中
@@ -520,13 +520,13 @@ onMounted(() => {
:rows="5"
placeholder="输入文案或点击热点卡片自动提取..."
: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 class="form-block">
<label>文案风格</label>
<div class="form-block flex flex-col gap-2">
<label class="text-xs font-medium text-gray-600">文案风格</label>
<StyleSelector
v-model="topicDetails.selectedAgentId"
placeholder="选择风格"
@@ -536,24 +536,24 @@ onMounted(() => {
</div>
<!-- 模式 & 幅度 -->
<div class="form-row">
<div class="form-block half">
<label>生成模式</label>
<div class="mode-switch">
<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 flex-1 lg:flex-1 flex-none flex flex-col gap-2">
<label class="text-xs font-medium text-gray-600">生成模式</label>
<div class="mode-switch flex gap-2">
<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'"
>标准</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'"
>PRO</button>
</div>
</div>
<div class="form-block half">
<div class="block-header">
<label>改写幅度</label>
<span class="level-num">{{ topicDetails.level }}%</span>
<div class="form-block half flex-1 lg:flex-1 flex-none flex flex-col gap-2">
<div class="block-header flex justify-between items-center">
<label class="text-xs font-medium text-gray-600">改写幅度</label>
<span class="level-num text-xs font-semibold text-primary-500">{{ topicDetails.level }}%</span>
</div>
<input
type="range"
@@ -568,7 +568,7 @@ onMounted(() => {
<!-- 生成按钮 -->
<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 }"
:disabled="!topicDetails.copywriting?.trim() || !topicDetails.selectedAgentId || isGenerating"
@click="handleGenerate"
@@ -578,28 +578,28 @@ onMounted(() => {
<span>生成中</span>
</template>
<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"/>
</svg>
<span>生成爆款</span>
</template>
</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">
<div v-if="generatedContent" class="result-block">
<div class="result-header">
<span class="result-title">生成结果</span>
<button class="copy-btn" @click="copyContent">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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 flex justify-between items-center mb-2.5 lg:mb-2.5 md:mb-2 mb-2">
<span class="result-title text-xs lg:text-xs md:text-[10px] text-[10px] font-medium text-gray-600">生成结果</span>
<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 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"/>
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
</svg>
复制
</button>
</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>
</Transition>
</div>
@@ -1186,15 +1186,4 @@ onMounted(() => {
opacity: 0;
transform: translateY(-8px);
}
// 响应式
@media (max-width: 900px) {
.forecast-page {
grid-template-columns: 1fr;
}
.create-panel {
min-height: 400px;
}
}
</style>