Initial commit
This commit is contained in:
wanghep
240
frontend/src/App.vue
Normal file
240
frontend/src/App.vue
Normal file
@ -0,0 +1,240 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue'
|
||||
import AppSidebar from './components/dashboard/AppSidebar.vue'
|
||||
import ClsNewsPanel from './components/dashboard/ClsNewsPanel.vue'
|
||||
import InputPanel from './components/dashboard/InputPanel.vue'
|
||||
import OpinionPanel from './components/dashboard/OpinionPanel.vue'
|
||||
import { useFinanceDashboard } from './composables/useFinanceDashboard'
|
||||
import { formatDate } from './lib/format'
|
||||
|
||||
const dashboard = useFinanceDashboard()
|
||||
const {
|
||||
activeSection,
|
||||
selectedDate,
|
||||
statusMessage,
|
||||
clsNews,
|
||||
opinionReport,
|
||||
inputAccounts,
|
||||
availableDates,
|
||||
loading,
|
||||
initializeDashboard,
|
||||
setSection,
|
||||
setSelectedDate,
|
||||
updateAccountLinks,
|
||||
saveInput,
|
||||
generateReport,
|
||||
refreshNews,
|
||||
} = dashboard
|
||||
|
||||
onMounted(() => {
|
||||
void initializeDashboard()
|
||||
})
|
||||
|
||||
const sectionTitle = computed(() => ({
|
||||
cls: '财联社新闻',
|
||||
opinions: '大V观点',
|
||||
input: '日报录入',
|
||||
}[activeSection.value]))
|
||||
|
||||
const sectionSubtitle = computed(() => ({
|
||||
cls: '左侧日期会同步联动热点概览和 7x24 资讯列表，仅查看所选日期当日内容。',
|
||||
opinions: '按日期拆分日报，顶部保留摘要，正文按文章展开，并清晰展示对应板块。',
|
||||
input: '按公众号补录当日文章链接，支持多链接、去重保存和直接生成日报。',
|
||||
}[activeSection.value]))
|
||||
|
||||
const sidebarSummary = computed(() => {
|
||||
if (activeSection.value === 'cls') {
|
||||
return clsNews.value?.summary.overview ?? '等待财联社资讯数据。'
|
||||
}
|
||||
if (activeSection.value === 'opinions') {
|
||||
return opinionReport.value?.summary ?? '选择日期后查看对应日报内容。'
|
||||
}
|
||||
return '录入页支持同一账号多链接补录，空链接不保存，重复链接自动去重。'
|
||||
})
|
||||
|
||||
const sidebarSectors = computed(() => {
|
||||
if (activeSection.value === 'cls') {
|
||||
return clsNews.value?.summary.watch_list ?? []
|
||||
}
|
||||
return opinionReport.value?.focus_sectors ?? []
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-shell">
|
||||
<AppSidebar
|
||||
:active-section="activeSection"
|
||||
:selected-date="selectedDate"
|
||||
:available-dates="availableDates"
|
||||
:summary="sidebarSummary"
|
||||
:focus-sectors="sidebarSectors"
|
||||
@select-date="setSelectedDate"
|
||||
@select-section="setSection"
|
||||
/>
|
||||
|
||||
<main class="workspace">
|
||||
<header class="workspace-head">
|
||||
<div class="head-copy">
|
||||
<p class="workspace-label">Finance Dashboard</p>
|
||||
<h2 class="workspace-title">{{ sectionTitle }}</h2>
|
||||
<p class="workspace-subtitle">{{ sectionSubtitle }}</p>
|
||||
</div>
|
||||
<div class="status-card">
|
||||
<span class="status-label">当前日期</span>
|
||||
<strong class="status-date">{{ formatDate(selectedDate) }}</strong>
|
||||
<p class="status-copy">{{ statusMessage }}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="workspace-stage">
|
||||
<ClsNewsPanel
|
||||
v-if="activeSection === 'cls'"
|
||||
:news="clsNews"
|
||||
:loading="loading.news"
|
||||
:selected-date="selectedDate"
|
||||
@refresh="refreshNews"
|
||||
/>
|
||||
|
||||
<OpinionPanel
|
||||
v-else-if="activeSection === 'opinions'"
|
||||
:report="opinionReport"
|
||||
:loading="loading.report"
|
||||
:selected-date="selectedDate"
|
||||
:available-dates="availableDates"
|
||||
@select-date="setSelectedDate"
|
||||
/>
|
||||
|
||||
<InputPanel
|
||||
v-else
|
||||
:selected-date="selectedDate"
|
||||
:accounts="inputAccounts"
|
||||
:loading="loading.input"
|
||||
:saving="loading.save"
|
||||
:generating="loading.generate"
|
||||
@select-date="setSelectedDate"
|
||||
@update-links="updateAccountLinks($event.accountId, $event.links)"
|
||||
@save="saveInput"
|
||||
@generate="generateReport"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 320px minmax(0, 1fr);
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.workspace-head {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.head-copy {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 14px 18px;
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: var(--radius-xl);
|
||||
background: rgba(255, 251, 245, 0.96);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.workspace-label {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.workspace-title {
|
||||
margin: 0;
|
||||
font-family: "Palatino Linotype", "STSong", "Songti SC", serif;
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
color: var(--ink-strong);
|
||||
}
|
||||
|
||||
.workspace-subtitle {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.status-card {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 4px;
|
||||
min-width: 230px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: var(--radius-xl);
|
||||
background: rgba(255, 251, 245, 0.96);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.status-date {
|
||||
font-size: 20px;
|
||||
color: var(--ink-strong);
|
||||
}
|
||||
|
||||
.status-copy {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: var(--ink-main);
|
||||
}
|
||||
|
||||
.workspace-stage {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.workspace-stage > * {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1160px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: minmax(240px, auto) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.workspace-head {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user