cjfx/frontend/src/App.vue

<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>