X-Financial/src/App.vue

<template>
  <!-- Login Page -->
  <LoginView
    v-if="!loggedIn"
    @login="handleLogin"
    @recover-password="handleRecoverPassword"
    @sso-login="handleSsoLogin"
  />

  <!-- Main App -->
  <div v-else class="app">
    <SidebarRail
      :nav-items="navItems"
      :active-view="activeView"
      @navigate="handleNavigate"
      @open-chat="handleOpenChat"
    />

    <main
      class="main"
      :class="{
        'chat-main': activeView === 'chat',
        'overview-main': activeView === 'overview',
        'requests-main': activeView === 'requests',
        'approval-main': activeView === 'approval',
        'policies-main': activeView === 'policies'
      }"
    >
      <TopBar
        :current-view="topBarView"
        :search="search"
        :active-view="activeView"
        :ranges="ranges"
        :active-range="activeRange"
        :custom-range="customRange"
        @update:search="search = $event"
        @update:active-range="activeRange = $event"
        @update:custom-range="customRange = $event"
        @batch-approve="toast('已筛出 23 个低风险单据，可进入批量通过确认。')"
        @open-chat="handleOpenChat"
        @new-application="openTravelCreate"
      />

      <FilterBar
        v-if="activeView !== 'chat' && activeView !== 'overview' && activeView !== 'requests' && activeView !== 'approval' && activeView !== 'policies'"
        :compact="activeView === 'overview'"
        :filters="filters"
        :ranges="ranges"
        :active-range="activeRange"
        @update:active-range="activeRange = $event"
      />

      <section
        class="workarea"
        :class="{
          'chat-workarea': activeView === 'chat',
          'requests-workarea': activeView === 'requests',
          'approval-workarea': activeView === 'approval',
          'policies-workarea': activeView === 'policies'
        }"
      >
        <OverviewView
          v-if="activeView === 'overview'"
          :filtered-requests="filteredRequests"
          @ask="handleOpenChat"
          @approve="handleApprove"
          @reject="handleReject"
        />

        <TravelReimbursementCreateView
          v-else-if="activeView === 'chat' && travelCreateMode"
          @back-to-requests="backToRequests"
        />

        <ChatView
          v-else-if="activeView === 'chat'"
          :documents="filteredDocuments"
          :doc-search="docSearch"
          :messages="messages"
          :uploaded-files="uploadedFiles"
          :active-case="activeCase"
          :quick-prompts="travelPrompts"
          :draft="draft"
          :message-list="messageList"
          @send="sendMessage"
          @upload="handleUpload"
          @draft="draft = $event"
          @select-case="handleOpenChat"
          @approve-case="toast(`${activeCase?.id} 已生成通过意见。`)"
          @reject-case="toast(`${activeCase?.id} 已转人工复核。`)"
        />

        <RequestsView
          v-else-if="activeView === 'requests'"
          :filtered-requests="filteredRequests"
          @ask="handleOpenChat"
          @approve="handleApprove"
          @reject="handleReject"
          @create-request="openTravelCreate"
        />

        <ApprovalCenterView v-else-if="activeView === 'approval'" />

        <PoliciesView v-else-if="activeView === 'policies'" />

        <AuditView v-else />
      </section>
    </main>

  </div>

  <ToastNotification :toast-text="toastText" />
</template>

<script setup>
import './assets/styles/global.css'

import SidebarRail from './components/layout/SidebarRail.vue'
import TopBar from './components/layout/TopBar.vue'
import FilterBar from './components/layout/FilterBar.vue'
import ToastNotification from './components/shared/ToastNotification.vue'
import LoginView from './views/LoginView.vue'
import OverviewView from './views/OverviewView.vue'
import ChatView from './views/ChatView.vue'
import TravelReimbursementCreateView from './views/TravelReimbursementCreateView.vue'
import RequestsView from './views/RequestsView.vue'
import ApprovalCenterView from './views/ApprovalCenterView.vue'
import PoliciesView from './views/PoliciesView.vue'
import AuditView from './views/AuditView.vue'

import { ref, computed } from 'vue'
import { useNavigation, navItems } from './composables/useNavigation.js'
import { useRequests } from './composables/useRequests.js'
import { useChat } from './composables/useChat.js'
import { useToast } from './composables/useToast.js'
import { documents } from './data/requests.js'

const loggedIn = ref(false)
const travelCreateMode = ref(false)

function handleLogin(credentials) {
  if (credentials.username && credentials.password) {
    loggedIn.value = true
  }
}

function handleRecoverPassword() {
  toast('请联系系统管理员重置密码。')
}

function handleSsoLogin() {
  toast('SSO 登录通道建设中。')
}

const { activeView, currentView, setView } = useNavigation()
const { requests, search, filters, ranges, activeRange, filteredRequests, approveRequest, rejectRequest } = useRequests()
const { messages, draft, uploadedFiles, messageList, activeCase, prompts, sendMessage, handleUpload, openChat, openNewChat } = useChat(activeView)
const { toastText, toast } = useToast()

const docSearch = ref('')
const customRange = ref({ start: '2024-07-06', end: '2024-07-12' })
const travelPrompts = ['帮我提交出差申请', '预订机票', '预订酒店', '预订火车票', '查询差旅政策']

const topBarView = computed(() => {
  if (travelCreateMode.value) {
    return {
      title: '差旅报销助手',
      desc: '帮你填写报销、检查材料、跟踪进度'
    }
  }
  return currentView.value
})

const filteredDocuments = computed(() => {
  const key = docSearch.value.trim().toLowerCase()
  return documents.filter((doc) => {
    const matchesSearch = !key || `${doc.id}${doc.applicant}${doc.destination}${doc.type}`.toLowerCase().includes(key)
    return matchesSearch
  })
})

function handleApprove(request) {
  const msg = approveRequest(request)
  toast(msg)
}

function handleReject(request) {
  const msg = rejectRequest(request)
  toast(msg)
}

function handleNavigate(view) {
  travelCreateMode.value = false
  setView(view)
}

function handleOpenChat(request) {
  travelCreateMode.value = false
  openChat(request)
}

function openTravelCreate() {
  travelCreateMode.value = true
  activeView.value = 'chat'
}

function backToRequests() {
  travelCreateMode.value = false
  activeView.value = 'requests'
}
</script>

<style scoped>
.app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  background: var(--bg);
}
.main { min-width: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.main.overview-main {
  grid-template-rows: auto minmax(0, 1fr);
}
.main.chat-main {
  height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.main.requests-main,
.main.approval-main,
.main.policies-main {
  height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.workarea { overflow: auto; padding: 24px; }
.workarea.chat-workarea {
  min-height: 0;
  overflow: hidden;
}
.workarea.requests-workarea,
.workarea.approval-workarea,
.workarea.policies-workarea {
  min-height: 0;
  overflow: hidden;
  padding: 20px 24px;
}

@media (max-width: 1180px) {
  .app { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .app { display: block; }
  .workarea { padding: 18px 16px 28px; }
}
</style>