X-Financial/web/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',
        'workbench-main': activeView === 'workbench',
        'requests-main': activeView === 'requests',
        'approval-main': activeView === 'approval',
        'policies-main': activeView === 'policies',
        'audit-main': activeView === 'audit',
        'employees-main': activeView === 'employees'
      }"
    >
      <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 !== 'workbench' && activeView !== 'requests' && activeView !== 'approval' && activeView !== 'policies' && activeView !== 'audit' && activeView !== 'employees'"
        :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',
          'audit-workarea': activeView === 'audit',
          'employees-workarea': activeView === 'employees'
        }"
      >
        <OverviewView
          v-if="activeView === 'overview'"
          :filtered-requests="filteredRequests"
          @ask="handleOpenChat"
          @approve="handleApprove"
          @reject="handleReject"
        />

        <PersonalWorkbenchView
          v-else-if="activeView === 'workbench'"
          @open-assistant="openSmartEntry"
        />

        <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} 已转人工复核。`)"
        />

        <TravelRequestDetailView
          v-else-if="activeView === 'requests' && detailMode"
          :request="selectedTravelRequest"
          @back-to-requests="closeRequestDetail"
          @open-assistant="openSmartEntry"
        />

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

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

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

        <AuditView v-else-if="activeView === 'audit'" />

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

    <TravelReimbursementCreateView
      v-if="smartEntryOpen"
      :key="smartEntrySessionId"
      :initial-prompt="smartEntryContext.prompt"
      :entry-source="smartEntryContext.source"
      :request-context="smartEntryContext.request"
      @close="closeSmartEntry"
    />
  </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 PersonalWorkbenchView from './views/PersonalWorkbenchView.vue'
import ChatView from './views/ChatView.vue'
import TravelReimbursementCreateView from './views/TravelReimbursementCreateView.vue'
import TravelRequestDetailView from './views/TravelRequestDetailView.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 EmployeeManagementView from './views/EmployeeManagementView.vue'

import { useAppShell } from './composables/useAppShell.js'

const {
  activeCase,
  activeRange,
  activeView,
  closeRequestDetail,
  closeSmartEntry,
  customRange,
  detailMode,
  docSearch,
  draft,
  filteredDocuments,
  filteredRequests,
  filters,
  handleApprove,
  handleLogin,
  handleNavigate,
  handleOpenChat,
  handleRecoverPassword,
  handleReject,
  handleSsoLogin,
  handleUpload,
  loggedIn,
  messageList,
  messages,
  navItems,
  openRequestDetail,
  openSmartEntry,
  openTravelCreate,
  ranges,
  search,
  selectedTravelRequest,
  sendMessage,
  smartEntryContext,
  smartEntryOpen,
  smartEntrySessionId,
  toast,
  toastText,
  topBarView,
  travelPrompts,
  uploadedFiles
} = useAppShell()
</script>

<style scoped src="./assets/styles/app.css"></style>