feat: 添加高优先级投标折叠功能并优化链接样式

为高优先级投标表格添加折叠/展开功能,当数据为空时自动折叠
优化链接样式,统一设置无下划线及悬停颜色
This commit is contained in:
dmy
2026-01-12 15:52:58 +08:00
parent f2630ed01c
commit 3647b9a2e5
3 changed files with 61 additions and 177 deletions

View File

@@ -76,3 +76,14 @@ const handleSizeChange = (size: number) => {
emit('fetch', currentPage.value, pageSize.value, selectedSource.value || undefined)
}
</script>
<style scoped>
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: #409eff;
}
</style>

View File

@@ -11,22 +11,31 @@
<el-col :span="24">
<el-card class="box-card" shadow="hover">
<template #header>
<div class="card-header">
<div class="card-header" @click="toggleHighPriority" style="cursor: pointer;">
<span>High Priority Bids</span>
<el-tag type="danger">Top 10</el-tag>
<div style="display: flex; align-items: center; gap: 10px;">
<el-tag type="danger">Top 10</el-tag>
<el-icon :style="{ transform: highPriorityCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 0.3s' }">
<ArrowDown />
</el-icon>
</div>
</div>
</template>
<el-table :data="highPriorityBids" style="width: 100%" size="small">
<el-table-column prop="title" label="Title">
<template #default="scope">
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
</template>
</el-table-column>
<el-table-column prop="source" label="Source" width="240" />
<el-table-column prop="publishDate" label="Date" width="120">
<template #default="scope">{{ formatDate(scope.row.publishDate) }}</template>
</el-table-column>
</el-table>
<el-collapse-transition>
<div v-show="!highPriorityCollapsed">
<el-table :data="highPriorityBids" style="width: 100%" size="small">
<el-table-column prop="title" label="Title">
<template #default="scope">
<a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
</template>
</el-table-column>
<el-table-column prop="source" label="Source" width="240" />
<el-table-column prop="publishDate" label="Date" width="120">
<template #default="scope">{{ formatDate(scope.row.publishDate) }}</template>
</el-table-column>
</el-table>
</div>
</el-collapse-transition>
</el-card>
</el-col>
</el-row>
@@ -83,7 +92,7 @@
import { ref, computed, watch } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import { Refresh, ArrowDown } from '@element-plus/icons-vue'
interface Props {
todayBids: any[]
@@ -103,6 +112,19 @@ const emit = defineEmits<{
const selectedKeywords = ref<string[]>([])
const dateRange = ref<[string, string] | null>(null)
const crawling = ref(false)
const highPriorityCollapsed = ref(false)
// 切换 High Priority Bids 的折叠状态
const toggleHighPriority = () => {
highPriorityCollapsed.value = !highPriorityCollapsed.value
}
// 监听 highPriorityBids当没有数据时自动折叠
watch(() => props.highPriorityBids, (newBids) => {
if (newBids.length === 0) {
highPriorityCollapsed.value = true
}
}, { immediate: true })
// 从 localStorage 加载保存的关键字
const loadSavedKeywords = () => {
@@ -207,9 +229,7 @@ const setLast3Days = () => {
const filteredCount = result.length
console.log('setLast3Days result, totalBids:', totalBids, 'filteredCount:', filteredCount)
if (totalBids === 0) {
ElMessage.warning('暂无数据,请先抓取数据')
}
// 只在手动点击按钮时显示提示,初始化时不显示
}
// 设置日期范围为最近7天
@@ -244,9 +264,7 @@ const setLast7Days = () => {
const filteredCount = result.length
console.log('setLast7Days result, totalBids:', totalBids, 'filteredCount:', filteredCount)
if (totalBids === 0) {
ElMessage.warning('暂无数据,请先抓取数据')
}
// 只在手动点击按钮时显示提示,初始化时不显示
}
const handleCrawl = async () => {
@@ -268,6 +286,9 @@ const handleCrawl = async () => {
// 初始化时加载保存的关键字
loadSavedKeywords()
// 初始化时设置默认日期范围为最近3天
setLast3Days()
</script>
<style scoped>
@@ -276,4 +297,13 @@ loadSavedKeywords()
justify-content: space-between;
align-items: center;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: #409eff;
}
</style>