feat: 添加项目置顶功能
在仪表盘中添加置顶项目功能,包括: - 新增置顶项目展示区域 - 为AI推荐项目添加置顶/取消置顶操作 - 后端接口支持置顶状态管理
This commit is contained in:
@@ -7,6 +7,55 @@
|
||||
获取 AI 推荐
|
||||
</el-button>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card class="box-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>Pined</span>
|
||||
<el-tag type="danger">{{ pinnedBids.length }} 个置顶</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="pinnedLoading" style="text-align: center; padding: 40px;">
|
||||
<el-icon class="is-loading" :size="30"><Loading /></el-icon>
|
||||
<p style="margin-top: 10px; color: #909399;">加载中...</p>
|
||||
</div>
|
||||
<div v-else-if="pinnedBids.length === 0" style="text-align: center; padding: 40px; color: #909399;">
|
||||
<el-icon :size="40"><InfoFilled /></el-icon>
|
||||
<p style="margin-top: 10px;">暂无置顶项目</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-table :data="pinnedBids" style="width: 100%" size="small">
|
||||
<el-table-column label="Pin" width="60" align="center">
|
||||
<template #default="scope">
|
||||
<el-icon
|
||||
:style="{
|
||||
color: '#f56c6c',
|
||||
cursor: 'pointer',
|
||||
fontSize: '18px'
|
||||
}"
|
||||
@click="togglePinnedPin(scope.row)"
|
||||
>
|
||||
<Paperclip />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="项目名称">
|
||||
<template #default="scope">
|
||||
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="source" label="来源" width="200" />
|
||||
<el-table-column prop="publishDate" label="发布日期" width="180">
|
||||
<template #default="scope">
|
||||
{{ formatDate(scope.row.publishDate) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card class="box-card" shadow="hover">
|
||||
@@ -27,6 +76,20 @@
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-table :data="aiRecommendations" style="width: 100%" size="small">
|
||||
<el-table-column label="Pin" width="60" align="center">
|
||||
<template #default="scope">
|
||||
<el-icon
|
||||
:style="{
|
||||
color: scope.row.pin ? '#f56c6c' : '#909399',
|
||||
cursor: 'pointer',
|
||||
fontSize: '18px'
|
||||
}"
|
||||
@click="togglePin(scope.row)"
|
||||
>
|
||||
<Paperclip />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="项目名称">
|
||||
<template #default="scope">
|
||||
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
|
||||
@@ -114,7 +177,7 @@
|
||||
import { ref, watch } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { MagicStick, Loading, InfoFilled, List, ArrowDown } from '@element-plus/icons-vue'
|
||||
import { MagicStick, Loading, InfoFilled, List, ArrowDown, Paperclip } from '@element-plus/icons-vue'
|
||||
|
||||
|
||||
interface AIRecommendation {
|
||||
@@ -123,6 +186,7 @@ interface AIRecommendation {
|
||||
source: string
|
||||
confidence: number
|
||||
publishDate?: string
|
||||
pin?: boolean
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@@ -137,6 +201,8 @@ const dateRange = ref<[string, string] | null>(null)
|
||||
const showAllBids = ref(false)
|
||||
const bidsLoading = ref(false)
|
||||
const bidsByDateRange = ref<any[]>([])
|
||||
const pinnedBids = ref<any[]>([])
|
||||
const pinnedLoading = ref(false)
|
||||
|
||||
// 从 localStorage 加载保存的日期范围
|
||||
const loadSavedDateRange = () => {
|
||||
@@ -159,15 +225,39 @@ watch(dateRange, (newDateRange) => {
|
||||
const loadLatestRecommendations = async () => {
|
||||
try {
|
||||
const response = await axios.get('/api/ai/latest-recommendations')
|
||||
aiRecommendations.value = response.data
|
||||
const recommendations = response.data
|
||||
|
||||
// 获取所有置顶的项目
|
||||
const pinnedResponse = await axios.get('/api/bids/pinned')
|
||||
const pinnedTitles = new Set(pinnedResponse.data.map((b: any) => b.title))
|
||||
|
||||
// 更新每个推荐项目的 pin 状态
|
||||
aiRecommendations.value = recommendations.map((rec: any) => ({
|
||||
...rec,
|
||||
pin: pinnedTitles.has(rec.title)
|
||||
}))
|
||||
} catch (error) {
|
||||
console.error('Failed to load latest recommendations:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化时加载保存的日期范围和最新的 AI 推荐
|
||||
// 加载置顶项目
|
||||
const loadPinnedBids = async () => {
|
||||
pinnedLoading.value = true
|
||||
try {
|
||||
const response = await axios.get('/api/bids/pinned')
|
||||
pinnedBids.value = response.data
|
||||
} catch (error) {
|
||||
console.error('Failed to load pinned bids:', error)
|
||||
} finally {
|
||||
pinnedLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化时加载保存的日期范围、最新的 AI 推荐和置顶项目
|
||||
loadSavedDateRange()
|
||||
loadLatestRecommendations()
|
||||
loadPinnedBids()
|
||||
|
||||
// 设置日期范围为最近3天
|
||||
const setLast3Days = () => {
|
||||
@@ -225,7 +315,8 @@ const fetchAIRecommendations = async () => {
|
||||
url: bid?.url || '',
|
||||
source: bid?.source || '',
|
||||
confidence: rec.confidence,
|
||||
publishDate: bid?.publishDate
|
||||
publishDate: bid?.publishDate,
|
||||
pin: bid?.pin || false
|
||||
}
|
||||
})
|
||||
|
||||
@@ -299,6 +390,53 @@ const getConfidenceType = (confidence: number) => {
|
||||
if (confidence >= 70) return 'warning'
|
||||
return 'info'
|
||||
}
|
||||
|
||||
// 切换 AI 推荐项目的 Pin 状态
|
||||
const togglePin = async (item: AIRecommendation) => {
|
||||
try {
|
||||
const newPinStatus = !item.pin
|
||||
await axios.patch(`/api/bids/${encodeURIComponent(item.title)}/pin`, { pin: newPinStatus })
|
||||
item.pin = newPinStatus
|
||||
if (newPinStatus) {
|
||||
// 添加到置顶列表
|
||||
pinnedBids.value.unshift({
|
||||
title: item.title,
|
||||
url: item.url,
|
||||
source: item.source,
|
||||
publishDate: item.publishDate,
|
||||
pin: true
|
||||
})
|
||||
} else {
|
||||
// 从置顶列表移除
|
||||
const index = pinnedBids.value.findIndex(b => b.title === item.title)
|
||||
if (index !== -1) {
|
||||
pinnedBids.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
ElMessage.success(newPinStatus ? '已置顶' : '已取消置顶')
|
||||
} catch (error) {
|
||||
ElMessage.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 切换置顶列表的 Pin 状态
|
||||
const togglePinnedPin = async (item: any) => {
|
||||
try {
|
||||
await axios.patch(`/api/bids/${encodeURIComponent(item.title)}/pin`, { pin: false })
|
||||
const index = pinnedBids.value.findIndex(b => b.title === item.title)
|
||||
if (index !== -1) {
|
||||
pinnedBids.value.splice(index, 1)
|
||||
}
|
||||
// 同时更新 AI 推荐列表中的状态
|
||||
const aiItem = aiRecommendations.value.find(r => r.title === item.title)
|
||||
if (aiItem) {
|
||||
aiItem.pin = false
|
||||
}
|
||||
ElMessage.success('已取消置顶')
|
||||
} catch (error) {
|
||||
ElMessage.error('操作失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user