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

feat: 功能优化

Browse Source
This commit is contained in:
sion123
2026-01-17 19:33:59 +08:00
parent fecd47e25d
commit 091e3d2d05
22 changed files with 1871 additions and 1229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { message, Select } from 'ant-design-vue'
import TikhubService, { InterfaceType, MethodType, ParamType } from '@/api/tikhub'
import { CommonService } from '@/api/common'
import { UserPromptApi } from '@/api/userPrompt'
@@ -25,10 +25,10 @@ const generatedContent = ref('')
const searchParams = reactive({
keyword: '',
offset: 0,
sort_type: 1,
publish_time: 7,
sort_type: '1',
publish_time: '7',
filter_duration: '0',
content_type: 0
content_type: '0'
})
// 创作详情
@@ -450,42 +450,42 @@ onMounted(async () => {
<div class="param-row">
<div class="param-item">
<label class="param-label">排序方式</label>
<select v-model="searchParams.sort_type" class="param-select">
<option value="0">综合排序</option>
<option value="1">最多点赞</option>
<option value="2">最新发布</option>
</select>
<a-select v-model:value="searchParams.sort_type" class="param-select">
<a-select-option value="0">综合排序</a-select-option>
<a-select-option value="1">最多点赞</a-select-option>
<a-select-option value="2">最新发布</a-select-option>
</a-select>
</div>
<div class="param-item">
<label class="param-label">发布时间</label>
<select v-model="searchParams.publish_time" class="param-select">
<option value="0">不限</option>
<option value="1">最近一天</option>
<option value="7">最近一周</option>
<option value="180">最近半年</option>
</select>
<a-select v-model:value="searchParams.publish_time" class="param-select">
<a-select-option value="0">不限</a-select-option>
<a-select-option value="1">最近一天</a-select-option>
<a-select-option value="7">最近一周</a-select-option>
<a-select-option value="180">最近半年</a-select-option>
</a-select>
</div>
<div class="param-item">
<label class="param-label">视频时长</label>
<select v-model="searchParams.filter_duration" class="param-select">
<option value="0">不限</option>
<option value="0-1">1分钟以内</option>
<option value="1-5">1-5分钟</option>
<option value="5-10000">5分钟以上</option>
</select>
<a-select v-model:value="searchParams.filter_duration" class="param-select">
<a-select-option value="0">不限</a-select-option>
<a-select-option value="0-1">1分钟以内</a-select-option>
<a-select-option value="1-5">1-5分钟</a-select-option>
<a-select-option value="5-10000">5分钟以上</a-select-option>
</a-select>
</div>
</div>
<div class="param-row">
<div class="param-item">
<label class="param-label">内容类型</label>
<select v-model="searchParams.content_type" class="param-select">
<option value="0">不限</option>
<option value="1">视频</option>
<option value="2">图集</option>
</select>
<a-select v-model:value="searchParams.content_type" class="param-select">
<a-select-option value="0">不限</a-select-option>
<a-select-option value="1">视频</a-select-option>
<a-select-option value="2">图集</a-select-option>
</a-select>
</div>
</div>
</div>
@@ -693,22 +693,18 @@ onMounted(async () => {
<!-- 生成文案按钮 -->
<div class="pt-2">
<button
class="cyber-button"
:class="{
'cyber-button--disabled': !topicDetails.copywriting?.trim() || !topicDetails.stylePromptId || isGenerating,
'cyber-button--loading': isGenerating
}"
class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white py-3 rounded-lg font-bold shadow-lg shadow-indigo-500/30 transition flex items-center justify-center group"
style="color: white !important;"
:disabled="!topicDetails.copywriting?.trim() || !topicDetails.stylePromptId || isGenerating"
@click="handleGenerate"
>
<span v-if="isGenerating" class="cyber-button__loading">
<span class="cyber-button__spinner"></span>
<span class="cyber-button__text">生成中...</span>
<span v-if="isGenerating" class="flex items-center justify-center" style="color: white;">
<span class="spinner mr-2"></span>
<span>生成中...</span>
</span>
<span v-else class="cyber-button__content">
<span class="cyber-button__glow"></span>
<span class="cyber-button__text">生成爆款</span>
<span class="cyber-button__arrow">→</span>
<span v-else class="flex items-center justify-center" style="color: white;">
<i class="fa-solid fa-wand-magic-sparkles mr-2 group-hover:rotate-12 transition" style="color: white;"></i>
<span>生成爆款</span>
</span>
</button>
</div>
@@ -833,24 +829,9 @@ onMounted(async () => {
.param-select {
width: 100%;
padding: 6px 8px;
font-size: 14px;
color: var(--color-text);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 4px;
transition: all 0.2s;
}
.param-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}
.param-select:hover {
border-color: var(--color-primary);
}
.search-input-wrapper {
display: flex;
@@ -1270,149 +1251,6 @@ onMounted(async () => {
user-select: none;
}
/* 赛博朋克风格按钮 - 蓝色主题 */
.cyber-button {
position: relative;
width: 100%;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
color: var(--color-primary);
background: transparent;
border: 1px solid var(--color-primary);
border-radius: 0;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow:
0 0 10px rgba(59, 130, 246, 0.3),
inset 0 0 10px rgba(59, 130, 246, 0.1);
}
.cyber-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
transition: left 0.5s ease;
}
.cyber-button:hover::before {
left: 100%;
}
.cyber-button:hover:not(.cyber-button--disabled) {
background: rgba(59, 130, 246, 0.1);
box-shadow:
0 0 20px rgba(59, 130, 246, 0.5),
0 0 40px rgba(59, 130, 246, 0.3),
inset 0 0 20px rgba(59, 130, 246, 0.2);
transform: translateY(-1px);
}
.cyber-button:active:not(.cyber-button--disabled) {
transform: translateY(0);
box-shadow:
0 0 15px rgba(59, 130, 246, 0.4),
inset 0 0 15px rgba(59, 130, 246, 0.15);
}
.cyber-button__content {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
z-index: 1;
}
.cyber-button__glow {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(59, 130, 246, 0.4);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
pointer-events: none;
}
.cyber-button:hover:not(.cyber-button--disabled) .cyber-button__glow {
width: 200px;
height: 200px;
}
.cyber-button__text {
position: relative;
z-index: 2;
text-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
}
.cyber-button__arrow {
position: relative;
z-index: 2;
transition: transform 0.3s ease;
font-size: 16px;
}
.cyber-button:hover:not(.cyber-button--disabled) .cyber-button__arrow {
transform: translateX(4px);
}
.cyber-button__loading {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
z-index: 1;
}
.cyber-button__spinner {
width: 14px;
height: 14px;
border: 2px solid rgba(59, 130, 246, 0.3);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: cyber-spin 0.8s linear infinite;
}
@keyframes cyber-spin {
to {
transform: rotate(360deg);
}
}
.cyber-button--disabled,
.cyber-button:disabled {
opacity: 0.4;
cursor: not-allowed;
border-color: rgba(59, 130, 246, 0.3);
box-shadow: none;
color: rgba(59, 130, 246, 0.5);
}
.cyber-button--disabled:hover,
.cyber-button:disabled:hover {
background: transparent;
box-shadow: none;
transform: none;
}
.cyber-button--loading {
cursor: wait;
}
.cyber-button--loading:hover {
transform: none;
}
/* 语音分析loading指示器 */
.analyzing-indicator {
@@ -1426,4 +1264,20 @@ onMounted(async () => {
.analyzing-text {
color: var(--color-primary);
}
/* 按钮加载动画 */
.spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>