feat: 添加投标项目查看器的Ionic移动端应用
新增基于Ionic + Vue 3 + TypeScript + Tailwind CSS的移动端应用，适配Android平台。主要功能包括AI推荐项目展示、爬虫信息统计、置顶项目管理和下拉刷新功能。同时更新前后端API端口配置为3300。
This commit is contained in:
dmy
21
ionic-app/src/App.vue
Normal file
21
ionic-app/src/App.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { IonApp, IonRouterOutlet } from '@ionic/vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IonApp>
|
||||
<IonRouterOutlet />
|
||||
</IonApp>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
219
ionic-app/src/components/AiRecommendations.vue
Normal file
219
ionic-app/src/components/AiRecommendations.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonChip, IonLabel, IonSpinner, IonRefresher, IonRefresherContent, RefresherEventDetail } from '@ionic/vue'
|
||||
import { getAiRecommendations, togglePin } from '@/utils/api'
|
||||
import type { AiRecommendation } from '@/types'
|
||||
|
||||
const recommendations = ref<AiRecommendation[]>([])
|
||||
const loading = ref<boolean>(true)
|
||||
const error = ref<string>('')
|
||||
|
||||
const loadRecommendations = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
const items = await getAiRecommendations()
|
||||
recommendations.value = items || []
|
||||
} catch (err: any) {
|
||||
error.value = `加载失败: ${err.message || err}`
|
||||
console.error('加载 AI 推荐失败:', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getConfidenceColor = (confidence: number): string => {
|
||||
if (confidence >= 80) return '#27ae60'
|
||||
if (confidence >= 60) return '#f39c12'
|
||||
return '#e74c3c'
|
||||
}
|
||||
|
||||
const getConfidenceLabel = (confidence: number): string => {
|
||||
if (confidence >= 80) return '高'
|
||||
if (confidence >= 60) return '中'
|
||||
return '低'
|
||||
}
|
||||
|
||||
const handleRefresh = async (event: CustomEvent<RefresherEventDetail>) => {
|
||||
await loadRecommendations()
|
||||
const target = event.target as any
|
||||
if (target && target.complete) {
|
||||
target.complete()
|
||||
}
|
||||
}
|
||||
|
||||
const handleTogglePin = async (item: AiRecommendation) => {
|
||||
try {
|
||||
const newPinStatus = !item.pin
|
||||
await togglePin(item.title, newPinStatus)
|
||||
item.pin = newPinStatus
|
||||
} catch (err) {
|
||||
console.error('切换置顶状态失败:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateStr?: string): string => {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadRecommendations()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
loadRecommendations
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IonRefresher slot="fixed" @ionRefresh="handleRefresh">
|
||||
<IonRefresherContent></IonRefresherContent>
|
||||
</IonRefresher>
|
||||
|
||||
<div v-if="loading" class="loading-container">
|
||||
<IonSpinner name="crescent" />
|
||||
<p class="loading-text">加载中...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="error-container">
|
||||
<p class="error-text">{{ error }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="recommendations.length === 0" class="empty-container">
|
||||
<p class="empty-text">暂无推荐项目</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="recommendation-list">
|
||||
<IonCard v-for="item in recommendations" :key="item.id" class="recommendation-card">
|
||||
<IonCardHeader>
|
||||
<div class="card-header">
|
||||
<IonChip :style="{ backgroundColor: getConfidenceColor(item.confidence) }" class="confidence-chip">
|
||||
<IonLabel class="confidence-label">
|
||||
{{ getConfidenceLabel(item.confidence) }} ({{ item.confidence }}%)
|
||||
</IonLabel>
|
||||
</IonChip>
|
||||
<IonCardSubtitle class="date-text">{{ formatDate(item.publishDate) }}</IonCardSubtitle>
|
||||
</div>
|
||||
<IonCardTitle class="title-text">{{ item.title }}</IonCardTitle>
|
||||
</IonCardHeader>
|
||||
<IonCardContent>
|
||||
<div class="card-footer">
|
||||
<span class="source-text">{{ item.source }}</span>
|
||||
<button
|
||||
@click="handleTogglePin(item)"
|
||||
:class="['pin-button', { pinned: item.pin }]"
|
||||
>
|
||||
{{ item.pin ? '已置顶' : '置顶' }}
|
||||
</button>
|
||||
</div>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.loading-container,
|
||||
.error-container,
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-text,
|
||||
.error-text,
|
||||
.empty-text {
|
||||
margin-top: 16px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.recommendation-list {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.recommendation-card {
|
||||
margin: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.confidence-chip {
|
||||
color: #fff;
|
||||
padding: 4px 12px;
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.confidence-label {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.source-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.pin-button {
|
||||
padding: 6px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.pin-button.pinned {
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
border-color: #e74c3c;
|
||||
}
|
||||
|
||||
.pin-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
</style>
|
||||
299
ionic-app/src/components/CrawlInfo.vue
Normal file
299
ionic-app/src/components/CrawlInfo.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonBadge, IonSpinner, IonRefresher, IonRefresherContent, RefresherEventDetail } from '@ionic/vue'
|
||||
import { getCrawlInfoStats } from '@/utils/api'
|
||||
import type { CrawlInfoStat } from '@/types'
|
||||
|
||||
const crawlStats = ref<CrawlInfoStat[]>([])
|
||||
const loading = ref<boolean>(true)
|
||||
const error = ref<string>('')
|
||||
|
||||
const loadCrawlStats = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
const stats = await getCrawlInfoStats()
|
||||
crawlStats.value = stats || []
|
||||
} catch (err: any) {
|
||||
error.value = `加载失败: ${err.message || err}`
|
||||
console.error('加载爬虫统计信息失败:', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusText = (stat: CrawlInfoStat): string => {
|
||||
if (stat.error) {
|
||||
return '出错'
|
||||
}
|
||||
if (stat.count > 0) {
|
||||
return '正常'
|
||||
}
|
||||
return '无数据'
|
||||
}
|
||||
|
||||
const getStatusColor = (stat: CrawlInfoStat): string => {
|
||||
if (stat.error) {
|
||||
return '#f8d7da'
|
||||
}
|
||||
if (stat.count > 0) {
|
||||
return '#d4edda'
|
||||
}
|
||||
return '#e2e3e5'
|
||||
}
|
||||
|
||||
const getStatusTextColor = (stat: CrawlInfoStat): string => {
|
||||
if (stat.error) {
|
||||
return '#721c24'
|
||||
}
|
||||
if (stat.count > 0) {
|
||||
return '#155724'
|
||||
}
|
||||
return '#383d41'
|
||||
}
|
||||
|
||||
const handleRefresh = async (event: CustomEvent<RefresherEventDetail>) => {
|
||||
await loadCrawlStats()
|
||||
const target = event.target as any
|
||||
if (target && target.complete) {
|
||||
target.complete()
|
||||
}
|
||||
}
|
||||
|
||||
const formatDateTime = (dateStr: string | null): string => {
|
||||
if (!dateStr) return '-'
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||||
}
|
||||
|
||||
const totalCount = computed(() => {
|
||||
return crawlStats.value.reduce((sum: number, item: CrawlInfoStat) => sum + item.count, 0)
|
||||
})
|
||||
|
||||
const activeSources = computed(() => {
|
||||
return crawlStats.value.filter((item: CrawlInfoStat) => item.count > 0).length
|
||||
})
|
||||
|
||||
const errorSources = computed(() => {
|
||||
return crawlStats.value.filter((item: CrawlInfoStat) => item.error && item.error.trim()).length
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
loadCrawlStats()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
loadCrawlStats
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IonRefresher slot="fixed" @ionRefresh="handleRefresh">
|
||||
<IonRefresherContent></IonRefresherContent>
|
||||
</IonRefresher>
|
||||
|
||||
<div v-if="loading" class="loading-container">
|
||||
<IonSpinner name="crescent" />
|
||||
<p class="loading-text">加载中...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="error-container">
|
||||
<p class="error-text">{{ error }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="crawlStats.length === 0" class="empty-container">
|
||||
<p class="empty-text">暂无爬虫统计信息</p>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<IonCard class="summary-card">
|
||||
<IonCardHeader>
|
||||
<IonCardTitle>统计摘要</IonCardTitle>
|
||||
</IonCardHeader>
|
||||
<IonCardContent>
|
||||
<div class="summary-grid">
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">爬虫来源总数</span>
|
||||
<span class="summary-value">{{ crawlStats.length }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">本次获取总数</span>
|
||||
<span class="summary-value">{{ totalCount }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">有数据来源</span>
|
||||
<span class="summary-value">{{ activeSources }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">出错来源</span>
|
||||
<span class="summary-value error">{{ errorSources }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
|
||||
<div class="crawl-list">
|
||||
<IonCard v-for="stat in crawlStats" :key="stat.source" class="crawl-card">
|
||||
<IonCardContent class="crawl-card-content">
|
||||
<div class="crawl-header">
|
||||
<span class="source-name">{{ stat.source }}</span>
|
||||
<IonBadge
|
||||
:style="{
|
||||
backgroundColor: getStatusColor(stat),
|
||||
color: getStatusTextColor(stat)
|
||||
}"
|
||||
class="status-badge"
|
||||
>
|
||||
{{ getStatusText(stat) }}
|
||||
</IonBadge>
|
||||
</div>
|
||||
<div class="crawl-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">本次获取数量:</span>
|
||||
<span class="detail-value">{{ stat.count }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">最近更新时间:</span>
|
||||
<span class="detail-value">{{ formatDateTime(stat.latestUpdate) }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">最新工程时间:</span>
|
||||
<span class="detail-value">{{ formatDateTime(stat.latestPublishDate) }}</span>
|
||||
</div>
|
||||
<div v-if="stat.error && stat.error.trim()" class="detail-item error">
|
||||
<span class="detail-label">错误信息:</span>
|
||||
<span class="detail-value">{{ stat.error }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.loading-container,
|
||||
.error-container,
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-text,
|
||||
.error-text,
|
||||
.empty-text {
|
||||
margin-top: 16px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.summary-value.error {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.crawl-list {
|
||||
padding: 0 16px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.crawl-card {
|
||||
margin: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.crawl-card-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.crawl-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.source-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.crawl-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.detail-item.error {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
199
ionic-app/src/components/PinnedBids.vue
Normal file
199
ionic-app/src/components/PinnedBids.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonSpinner, IonRefresher, IonRefresherContent, RefresherEventDetail } from '@ionic/vue'
|
||||
import { getPinnedBids, togglePin } from '@/utils/api'
|
||||
import type { BidItem } from '@/types'
|
||||
|
||||
const pinnedBids = ref<BidItem[]>([])
|
||||
const loading = ref<boolean>(true)
|
||||
const error = ref<string>('')
|
||||
|
||||
const loadPinnedBids = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
const items = await getPinnedBids()
|
||||
pinnedBids.value = items || []
|
||||
} catch (err: any) {
|
||||
error.value = `加载失败: ${err.message || err}`
|
||||
console.error('加载置顶项目失败:', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefresh = async (event: CustomEvent<RefresherEventDetail>) => {
|
||||
await loadPinnedBids()
|
||||
const target = event.target as any
|
||||
if (target && target.complete) {
|
||||
target.complete()
|
||||
}
|
||||
}
|
||||
|
||||
const handleTogglePin = async (item: BidItem) => {
|
||||
try {
|
||||
await togglePin(item.title, false)
|
||||
pinnedBids.value = pinnedBids.value.filter((bid: BidItem) => bid.title !== item.title)
|
||||
} catch (err) {
|
||||
console.error('取消置顶失败:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string): string => {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadPinnedBids()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
loadPinnedBids
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IonRefresher slot="fixed" @ionRefresh="handleRefresh">
|
||||
<IonRefresherContent></IonRefresherContent>
|
||||
</IonRefresher>
|
||||
|
||||
<div v-if="loading" class="loading-container">
|
||||
<IonSpinner name="crescent" />
|
||||
<p class="loading-text">加载中...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="error-container">
|
||||
<p class="error-text">{{ error }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="pinnedBids.length === 0" class="empty-container">
|
||||
<p class="empty-text">暂无置顶项目</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="pinned-list">
|
||||
<IonCard v-for="item in pinnedBids" :key="item.id" class="pinned-card">
|
||||
<IonCardHeader>
|
||||
<IonCardTitle class="title-text">{{ item.title }}</IonCardTitle>
|
||||
</IonCardHeader>
|
||||
<IonCardContent>
|
||||
<div class="card-details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">来源:</span>
|
||||
<span class="detail-value">{{ item.source }}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">发布日期:</span>
|
||||
<span class="detail-value">{{ formatDate(item.publishDate) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a :href="item.url" target="_blank" class="view-link">查看详情</a>
|
||||
<button @click="handleTogglePin(item)" class="unpin-button">取消置顶</button>
|
||||
</div>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.loading-container,
|
||||
.error-container,
|
||||
.empty-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-text,
|
||||
.error-text,
|
||||
.empty-text {
|
||||
margin-top: 16px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.pinned-list {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.pinned-card {
|
||||
margin: 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.view-link {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.unpin-button {
|
||||
padding: 6px 16px;
|
||||
border: 1px solid #e74c3c;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
color: #e74c3c;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.unpin-button:active {
|
||||
transform: scale(0.95);
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
28
ionic-app/src/main.ts
Normal file
28
ionic-app/src/main.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { createApp } from 'vue'
|
||||
import { IonicVue } from '@ionic/vue'
|
||||
|
||||
/* Core CSS required for Ionic components to work properly */
|
||||
import '@ionic/vue/css/core.css'
|
||||
|
||||
/* Basic CSS for apps built with Ionic */
|
||||
import '@ionic/vue/css/normalize.css'
|
||||
import '@ionic/vue/css/structure.css'
|
||||
import '@ionic/vue/css/typography.css'
|
||||
import '@ionic/vue/css/padding.css'
|
||||
import '@ionic/vue/css/float-elements.css'
|
||||
import '@ionic/vue/css/text-alignment.css'
|
||||
import '@ionic/vue/css/text-transformation.css'
|
||||
import '@ionic/vue/css/flex-utils.css'
|
||||
import '@ionic/vue/css/display.css'
|
||||
|
||||
/* Theme variables */
|
||||
import './theme/variables.css'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(IonicVue)
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
81
ionic-app/src/pages/HomePage.vue
Normal file
81
ionic-app/src/pages/HomePage.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonSegment, IonSegmentButton, IonIcon, IonLabel, IonButtons, IonButton } from '@ionic/vue'
|
||||
import { sparkles, statsChart, pin, logOutOutline } from 'ionicons/icons'
|
||||
import AiRecommendations from '@/components/AiRecommendations.vue'
|
||||
import CrawlInfo from '@/components/CrawlInfo.vue'
|
||||
import PinnedBids from '@/components/PinnedBids.vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const activeTab = ref('pinned')
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const aiRecommendationsRef = ref()
|
||||
const crawlInfoRef = ref()
|
||||
const pinnedBidsRef = ref()
|
||||
|
||||
const handleTabChange = (tab: string) => {
|
||||
activeTab.value = tab
|
||||
// 刷新对应标签页的数据
|
||||
if (tab === 'recommendations' && aiRecommendationsRef.value) {
|
||||
aiRecommendationsRef.value.loadRecommendations()
|
||||
} else if (tab === 'crawl' && crawlInfoRef.value) {
|
||||
crawlInfoRef.value.loadCrawlStats()
|
||||
} else if (tab === 'pinned' && pinnedBidsRef.value) {
|
||||
pinnedBidsRef.value.loadPinnedBids()
|
||||
}
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
authStore.logout()
|
||||
// 路由守卫会自动跳转到登录页
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>投标项目查看器</IonTitle>
|
||||
<IonButtons slot="end">
|
||||
<IonButton @click="handleLogout">
|
||||
<IonIcon :icon="logOutOutline" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent>
|
||||
<IonSegment :value="activeTab" @ionChange="(e: any) => handleTabChange(e.detail.value)" class="segment-container">
|
||||
<IonSegmentButton value="pinned">
|
||||
<IonIcon :icon="pin" />
|
||||
<IonLabel>置顶项目</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton value="recommendations">
|
||||
<IonIcon :icon="sparkles" />
|
||||
<IonLabel>AI 推荐</IonLabel>
|
||||
</IonSegmentButton>
|
||||
<IonSegmentButton value="crawl">
|
||||
<IonIcon :icon="statsChart" />
|
||||
<IonLabel>爬虫信息</IonLabel>
|
||||
</IonSegmentButton>
|
||||
|
||||
</IonSegment>
|
||||
|
||||
<div class="tab-content">
|
||||
<AiRecommendations v-if="activeTab === 'recommendations'" ref="aiRecommendationsRef" />
|
||||
<CrawlInfo v-if="activeTab === 'crawl'" ref="crawlInfoRef" />
|
||||
<PinnedBids v-if="activeTab === 'pinned'" ref="pinnedBidsRef" />
|
||||
</div>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.segment-container {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
</style>
|
||||
121
ionic-app/src/pages/LoginPage.vue
Normal file
121
ionic-app/src/pages/LoginPage.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonLabel, IonInput, IonButton, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonSpinner } from '@ionic/vue'
|
||||
import { useIonRouter } from '@ionic/vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useIonRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!username.value || !password.value) {
|
||||
error.value = '请输入用户名和密码'
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
await authStore.login(username.value, password.value)
|
||||
router.push('/home')
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '登录失败，请检查用户名和密码'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>登录</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent class="login-content">
|
||||
<IonCard class="login-card">
|
||||
<IonCardHeader>
|
||||
<IonCardTitle>投标项目查看器</IonCardTitle>
|
||||
</IonCardHeader>
|
||||
<IonCardContent>
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<IonItem class="input-item">
|
||||
<IonLabel position="floating">用户名</IonLabel>
|
||||
<IonInput
|
||||
v-model="username"
|
||||
type="text"
|
||||
placeholder="请输入用户名"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</IonItem>
|
||||
|
||||
<IonItem class="input-item">
|
||||
<IonLabel position="floating">密码</IonLabel>
|
||||
<IonInput
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</IonItem>
|
||||
|
||||
<IonButton
|
||||
expand="block"
|
||||
@click="handleLogin"
|
||||
:disabled="loading"
|
||||
class="login-button"
|
||||
>
|
||||
<IonSpinner v-if="loading" name="crescent" slot="start" />
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</IonButton>
|
||||
</IonCardContent>
|
||||
</IonCard>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-content {
|
||||
--background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
margin: 20px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
margin-top: 24px;
|
||||
--background: #667eea;
|
||||
--color: #fff;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
42
ionic-app/src/router/index.ts
Normal file
42
ionic-app/src/router/index.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { createRouter, createWebHistory } from '@ionic/vue-router'
|
||||
import HomePage from '@/pages/HomePage.vue'
|
||||
import LoginPage from '@/pages/LoginPage.vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/login'
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: LoginPage
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
component: HomePage,
|
||||
meta: { requiresAuth: true }
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
// 路由守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
const authStore = useAuthStore()
|
||||
|
||||
if (to.meta.requiresAuth && !authStore.state.value.isAuthenticated) {
|
||||
// 需要认证但未登录，跳转到登录页
|
||||
next('/login')
|
||||
} else if (to.path === '/login' && authStore.state.value.isAuthenticated) {
|
||||
// 已登录用户访问登录页，跳转到首页
|
||||
next('/home')
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
79
ionic-app/src/stores/auth.ts
Normal file
79
ionic-app/src/stores/auth.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
import { ref } from 'vue'
|
||||
import api from '@/utils/api'
|
||||
|
||||
interface AuthState {
|
||||
isAuthenticated: boolean
|
||||
username: string | null
|
||||
token: string | null
|
||||
}
|
||||
|
||||
const state = ref<AuthState>({
|
||||
isAuthenticated: false,
|
||||
username: null,
|
||||
token: null
|
||||
})
|
||||
|
||||
export const useAuthStore = () => {
|
||||
const login = async (username: string, password: string) => {
|
||||
// 创建 Basic Auth token
|
||||
const credentials = btoa(`${username}:${password}`)
|
||||
const token = `Basic ${credentials}`
|
||||
|
||||
// 保存 token 到 localStorage
|
||||
localStorage.setItem('auth_token', token)
|
||||
localStorage.setItem('auth_username', username)
|
||||
|
||||
// 更新 API 实例的默认 headers
|
||||
api.defaults.headers.common['Authorization'] = token
|
||||
|
||||
// 更新状态
|
||||
state.value = {
|
||||
isAuthenticated: true,
|
||||
username,
|
||||
token
|
||||
}
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
// 清除 localStorage
|
||||
localStorage.removeItem('auth_token')
|
||||
localStorage.removeItem('auth_username')
|
||||
|
||||
// 清除 API headers
|
||||
delete api.defaults.headers.common['Authorization']
|
||||
|
||||
// 更新状态
|
||||
state.value = {
|
||||
isAuthenticated: false,
|
||||
username: null,
|
||||
token: null
|
||||
}
|
||||
}
|
||||
|
||||
const checkAuth = () => {
|
||||
const token = localStorage.getItem('auth_token')
|
||||
const username = localStorage.getItem('auth_username')
|
||||
|
||||
if (token && username) {
|
||||
api.defaults.headers.common['Authorization'] = token
|
||||
state.value = {
|
||||
isAuthenticated: true,
|
||||
username,
|
||||
token
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
// 初始化时检查认证状态
|
||||
checkAuth()
|
||||
|
||||
return {
|
||||
state,
|
||||
login,
|
||||
logout,
|
||||
checkAuth
|
||||
}
|
||||
}
|
||||
229
ionic-app/src/theme/variables.css
Normal file
229
ionic-app/src/theme/variables.css
Normal file
@@ -0,0 +1,229 @@
|
||||
/* Ionic Variables and Theming. For more info, please see:
|
||||
http://ionicframework.com/docs/theming/theming-base-variables */
|
||||
|
||||
/** Ionic CSS Variables **/
|
||||
:root {
|
||||
/** primary **/
|
||||
--ion-color-primary: #3880ff;
|
||||
--ion-color-primary-rgb: 56, 128, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3171e0;
|
||||
--ion-color-primary-tint: #4c8dff;
|
||||
|
||||
/** secondary **/
|
||||
--ion-color-secondary: #3dc2ff;
|
||||
--ion-color-secondary-rgb: 61, 194, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #36abe0;
|
||||
--ion-color-secondary-tint: #50c8ff;
|
||||
|
||||
/** tertiary **/
|
||||
--ion-color-tertiary: #5260ff;
|
||||
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #4854e0;
|
||||
--ion-color-tertiary-tint: #6370ff;
|
||||
|
||||
/** success **/
|
||||
--ion-color-success: #2dd36f;
|
||||
--ion-color-success-rgb: 45, 211, 111;
|
||||
--ion-color-success-contrast: #ffffff;
|
||||
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-success-shade: #28ba62;
|
||||
--ion-color-success-tint: #42d77d;
|
||||
|
||||
/** warning **/
|
||||
--ion-color-warning: #ffc409;
|
||||
--ion-color-warning-rgb: 255, 196, 9;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0ac08;
|
||||
--ion-color-warning-tint: #ffca22;
|
||||
|
||||
/** danger **/
|
||||
--ion-color-danger: #eb445a;
|
||||
--ion-color-danger-rgb: 235, 68, 90;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #cf3c4f;
|
||||
--ion-color-danger-tint: #ed576b;
|
||||
|
||||
/** dark **/
|
||||
--ion-color-dark: #222428;
|
||||
--ion-color-dark-rgb: 34, 36, 40;
|
||||
--ion-color-dark-contrast: #ffffff;
|
||||
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-dark-shade: #1e2023;
|
||||
--ion-color-dark-tint: #383a3e;
|
||||
|
||||
/** medium **/
|
||||
--ion-color-medium: #92949c;
|
||||
--ion-color-medium-rgb: 146, 148, 156;
|
||||
--ion-color-medium-contrast: #ffffff;
|
||||
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-medium-shade: #808289;
|
||||
--ion-color-medium-tint: #9d9fa6;
|
||||
|
||||
/** light **/
|
||||
--ion-color-light: #f4f5f8;
|
||||
--ion-color-light-rgb: 244, 245, 248;
|
||||
--ion-color-light-contrast: #000000;
|
||||
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-light-shade: #d7d8da;
|
||||
--ion-color-light-tint: #f5f6f9;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/*
|
||||
* Dark Colors
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
body.dark {
|
||||
--ion-color-primary: #428cff;
|
||||
--ion-color-primary-rgb: 66, 140, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3a7be0;
|
||||
--ion-color-primary-tint: #5598ff;
|
||||
|
||||
--ion-color-secondary: #50c8ff;
|
||||
--ion-color-secondary-rgb: 80, 200, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #46b0e0;
|
||||
--ion-color-secondary-tint: #62ceff;
|
||||
|
||||
--ion-color-tertiary: #6a64ff;
|
||||
--ion-color-tertiary-rgb: 106, 100, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #5d58e0;
|
||||
--ion-color-tertiary-tint: #7974ff;
|
||||
|
||||
--ion-color-success: #2fdf75;
|
||||
--ion-color-success-rgb: 47, 223, 117;
|
||||
--ion-color-success-contrast: #000000;
|
||||
--ion-color-success-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-success-shade: #29c467;
|
||||
--ion-color-success-tint: #44e283;
|
||||
|
||||
--ion-color-warning: #ffd534;
|
||||
--ion-color-warning-rgb: 255, 213, 52;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0bb2e;
|
||||
--ion-color-warning-tint: #ffd948;
|
||||
|
||||
--ion-color-danger: #ff4961;
|
||||
--ion-color-danger-rgb: 255, 73, 97;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #e04055;
|
||||
--ion-color-danger-tint: #ff5b71;
|
||||
|
||||
--ion-color-dark: #f4f5f8;
|
||||
--ion-color-dark-rgb: 244, 245, 248;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-dark-shade: #d7d8da;
|
||||
--ion-color-dark-tint: #f5f6f9;
|
||||
|
||||
--ion-color-medium: #989aa2;
|
||||
--ion-color-medium-rgb: 152, 154, 162;
|
||||
--ion-color-medium-contrast: #000000;
|
||||
--ion-color-medium-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
|
||||
--ion-color-light: #222428;
|
||||
--ion-color-light-rgb: 34, 36, 40;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-light-shade: #1e2023;
|
||||
--ion-color-light-tint: #383a3e;
|
||||
}
|
||||
|
||||
/*
|
||||
* iOS Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.ios body.dark {
|
||||
--ion-background-color: #03060b;
|
||||
--ion-background-color-rgb: 3, 6, 11;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
|
||||
--ion-color-step-50: #0d0d0d;
|
||||
--ion-color-step-100: #1a1a1a;
|
||||
--ion-color-step-150: #262626;
|
||||
--ion-color-step-200: #333333;
|
||||
--ion-color-step-250: #404040;
|
||||
--ion-color-step-300: #4d4d4d;
|
||||
--ion-color-step-350: #595959;
|
||||
--ion-color-step-400: #666666;
|
||||
--ion-color-step-450: #737373;
|
||||
--ion-color-step-500: #808080;
|
||||
--ion-color-step-550: #8c8c8c;
|
||||
--ion-color-step-600: #999999;
|
||||
--ion-color-step-650: #a6a6a6;
|
||||
--ion-color-step-700: #b3b3b3;
|
||||
--ion-color-step-750: #bfbfbf;
|
||||
--ion-color-step-800: #cccccc;
|
||||
--ion-color-step-850: #d9d9d9;
|
||||
--ion-color-step-900: #e6e6e6;
|
||||
--ion-color-step-950: #f2f2f2;
|
||||
|
||||
--ion-item-background: #000000;
|
||||
|
||||
--ion-card-background: #1c1c1d;
|
||||
}
|
||||
|
||||
/*
|
||||
* Material Design Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.md body.dark {
|
||||
--ion-background-color: #121212;
|
||||
--ion-background-color-rgb: 18, 18, 18;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
|
||||
--ion-border-color: #222222;
|
||||
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
|
||||
--ion-toolbar-background: #1f1f1f;
|
||||
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
|
||||
--ion-card-background: #1e1e1e;
|
||||
}
|
||||
}
|
||||
40
ionic-app/src/types/index.ts
Normal file
40
ionic-app/src/types/index.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
// 投标项目类型
|
||||
export interface BidItem {
|
||||
id: string
|
||||
title: string
|
||||
url: string
|
||||
publishDate: string
|
||||
source: string
|
||||
pin: boolean
|
||||
createdAt?: string
|
||||
updatedAt?: string
|
||||
}
|
||||
|
||||
// AI 推荐类型
|
||||
export interface AiRecommendation {
|
||||
id: string
|
||||
title: string
|
||||
url: string
|
||||
source: string
|
||||
confidence: number
|
||||
publishDate?: string
|
||||
pin?: boolean
|
||||
}
|
||||
|
||||
// 爬虫统计信息类型
|
||||
export interface CrawlInfoStat {
|
||||
source: string
|
||||
count: number
|
||||
latestUpdate: string | null
|
||||
latestPublishDate: string | null
|
||||
error: string | null
|
||||
}
|
||||
|
||||
// API 响应类型
|
||||
export interface ApiResponse<T> {
|
||||
data: T
|
||||
message?: string
|
||||
}
|
||||
|
||||
// 日期范围类型
|
||||
export type DateRange = [string, string] | null
|
||||
90
ionic-app/src/utils/api.ts
Normal file
90
ionic-app/src/utils/api.ts
Normal file
@@ -0,0 +1,90 @@
|
||||
import axios from 'axios'
|
||||
import type { BidItem, AiRecommendation, CrawlInfoStat, DateRange } from '@/types'
|
||||
|
||||
// 从环境变量读取 API 基础地址
|
||||
const BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001'
|
||||
|
||||
// 创建 axios 实例
|
||||
const api = axios.create({
|
||||
baseURL: BASE_URL,
|
||||
timeout: 30000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
api.interceptors.request.use(
|
||||
(config) => {
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
return response
|
||||
},
|
||||
(error) => {
|
||||
console.error('API 请求错误:', error)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* 获取置顶投标项目
|
||||
*/
|
||||
export function getPinnedBids(): Promise<BidItem[]> {
|
||||
return api.get('/api/bids/pinned').then(res => res.data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最新 AI 推荐
|
||||
*/
|
||||
export function getAiRecommendations(): Promise<AiRecommendation[]> {
|
||||
return api.get('/api/ai/latest-recommendations').then(res => res.data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取爬虫统计信息
|
||||
*/
|
||||
export function getCrawlInfoStats(): Promise<CrawlInfoStat[]> {
|
||||
return api.get('/api/bids/crawl-info-stats').then(res => res.data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换置顶状态
|
||||
*/
|
||||
export function togglePin(title: string, pin: boolean): Promise<void> {
|
||||
return api.patch(`/api/bids/${encodeURIComponent(title)}/pin`, { pin }).then(res => res.data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 按日期范围获取工程
|
||||
*/
|
||||
export function getBidsByDateRange(startDate: string, endDate?: string): Promise<BidItem[]> {
|
||||
const params: any = { startDate }
|
||||
if (endDate) {
|
||||
params.endDate = endDate
|
||||
}
|
||||
return api.get('/api/bids/by-date-range', { params }).then(res => res.data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 AI 推荐（发送 bids 数据）
|
||||
*/
|
||||
export function fetchAiRecommendations(bids: { title: string }[]): Promise<AiRecommendation[]> {
|
||||
return api.post('/api/ai/recommendations', { bids }).then(res => res.data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存 AI 推荐结果
|
||||
*/
|
||||
export function saveAiRecommendations(recommendations: AiRecommendation[]): Promise<void> {
|
||||
return api.post('/api/ai/save-recommendations', { recommendations }).then(res => res.data)
|
||||
}
|
||||
|
||||
export default api
|
||||
9
ionic-app/src/vite-env.d.ts
vendored
Normal file
9
ionic-app/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_BASE_URL: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
Reference in New Issue
Block a user