X-Financial/web/src/views/AppShellRouteView.vue

<template>
  <div class="app">
    <header class="shell-header">
      <div class="shell-brand">
        <span class="shell-brand-mark" aria-hidden="true">
          <svg viewBox="0 0 36 36">
            <path d="M19.8 4.5c5.7 1.1 9.9 5.7 10.5 11.6-2.8-.9-5.5-.7-7.9.6-2.8 1.5-4.5 4.3-5.2 8.2-4.4-2.8-6.5-6.5-6.3-11.1.2-4.2 3.5-7.8 8.9-9.3Z" />
            <path d="M9 7.6c-3 3.5-4 7.3-2.9 11.2 1.2 4.2 4.6 7 10.1 8.5-2 1.8-4.6 2.6-7.6 2.3C5.1 26.7 3.5 23.1 3.7 19 4 14.4 5.7 10.6 9 7.6Z" />
          </svg>
        </span>
        <div class="shell-brand-copy">
          <strong>{{ companyProfile.name || 'X-Financial' }}</strong>
          <span>费用与报销运营平台</span>
        </div>
      </div>

      <div class="shell-user-actions">
        <div class="shell-user" aria-label="当前登录用户">
          <span class="shell-user-avatar">{{ currentUser.avatar || '用' }}</span>
          <span class="shell-user-copy">
            <strong>{{ currentUser.name || '当前用户' }}</strong>
            <span>{{ currentUser.role || '系统角色' }}</span>
          </span>
        </div>

        <button class="shell-logout" type="button" @click="handleLogout">
          <i class="mdi mdi-logout-variant"></i>
          <span>退出登录</span>
        </button>
      </div>
    </header>

    <nav class="shell-nav" aria-label="主导航">
      <div class="shell-nav-scroll">
        <button
          v-for="item in filteredNavItems"
          :key="item.id"
          class="shell-nav-btn"
          :class="{ active: activeView === item.id }"
          type="button"
          @click="handleNavigate(item.id)"
        >
          <span class="shell-nav-icon" v-html="item.icon"></span>
          <span>{{ item.label }}</span>
        </button>
      </div>
    </nav>

    <main
      class="main"
      :class="{
        'overview-main': activeView === 'overview',
        'workbench-main': activeView === 'workbench',
        'requests-main': activeView === 'requests',
        'approval-main': activeView === 'approval',
        'policies-main': activeView === 'policies',
        'audit-main': activeView === 'audit',
        'audit-detail-main': activeView === 'audit' && auditDetailOpen,
        'employees-main': activeView === 'employees',
        'settings-main': activeView === 'settings'
      }"
    >
      <TopBar
        v-if="activeView !== 'settings' && !(activeView === 'audit' && auditDetailOpen)"
        :current-view="topBarView"
        :search="search"
        :active-view="activeView"
        :ranges="ranges"
        :active-range="activeRange"
        :employee-summary="employeeSummary"
        :knowledge-summary="knowledgeSummary"
        :request-summary="requestSummary"
        :custom-range="customRange"
        @update:search="search = $event"
        @update:active-range="activeRange = $event"
        @update:custom-range="customRange = $event"
        @batch-approve="toast('已批量通过 23 条审批任务。')"
        @new-application="openTravelCreate"
      />

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

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

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

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

        <RequestsView
          v-else-if="activeView === 'requests'"
          :filtered-requests="filteredRequests"
          :has-data="requests.length > 0"
          :loading="requestsLoading"
          :error="requestsError"
          @ask="openRequestDetail"
          @approve="handleApprove"
          @reject="handleReject"
          @reload="reloadRequests"
          @create-request="openTravelCreate"
        />

        <ApprovalCenterView v-else-if="activeView === 'approval'" />
        <PoliciesView v-else-if="activeView === 'policies'" @summary-change="knowledgeSummary = $event" />
        <AuditView v-else-if="activeView === 'audit'" @detail-open-change="auditDetailOpen = $event" />
        <EmployeeManagementView v-else-if="activeView === 'employees'" @overview-change="employeeSummary = $event" />
        <SettingsView v-else />
      </section>
    </main>

    <TravelReimbursementCreateView
      v-if="smartEntryOpen"
      :key="smartEntrySessionId"
      :initial-prompt="smartEntryContext.prompt"
      :initial-files="smartEntryContext.files"
      :initial-conversation="smartEntryContext.conversation"
      :entry-source="smartEntryContext.source"
      :request-context="smartEntryContext.request"
      @close="closeSmartEntry"
      @draft-saved="handleDraftSaved"
    />
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'

import TopBar from '../components/layout/TopBar.vue'
import FilterBar from '../components/layout/FilterBar.vue'
import OverviewView from './OverviewView.vue'
import PersonalWorkbenchView from './PersonalWorkbenchView.vue'
import TravelReimbursementCreateView from './TravelReimbursementCreateView.vue'
import TravelRequestDetailView from './TravelRequestDetailView.vue'
import RequestsView from './RequestsView.vue'
import ApprovalCenterView from './ApprovalCenterView.vue'
import PoliciesView from './PoliciesView.vue'
import AuditView from './AuditView.vue'
import EmployeeManagementView from './EmployeeManagementView.vue'
import SettingsView from './SettingsView.vue'

import { useAppShell } from '../composables/useAppShell.js'
import { useSystemState } from '../composables/useSystemState.js'
import { filterNavItemsByAccess } from '../utils/accessControl.js'

const employeeSummary = ref(null)
const knowledgeSummary = ref(null)
const auditDetailOpen = ref(false)

const {
  activeCase,
  activeRange,
  activeView,
  closeRequestDetail,
  closeSmartEntry,
  customRange,
  detailMode,
  docSearch,
  draft,
  filteredDocuments,
  filteredRequests,
  filters,
  handleApprove,
  handleDraftSaved,
  handleNavigate,
  handleReject,
  handleRequestDeleted,
  handleRequestUpdated,
  navItems,
  openRequestDetail,
  openSmartEntry,
  openTravelCreate,
  ranges,
  requestSummary,
  requestsError,
  requestsLoading,
  reloadRequests,
  requests,
  search,
  selectedRequest,
  smartEntryContext,
  smartEntryOpen,
  smartEntrySessionId,
  toast,
  topBarView
} = useAppShell()

const { companyProfile, currentUser, logout } = useSystemState()
const filteredNavItems = computed(() => filterNavItemsByAccess(navItems, currentUser.value))

function handleLogout() {
  logout('manual')
}
</script>

<style scoped>
.shell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid #e2e8f0;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.9), rgba(255, 255, 255, 0.98)),
    #fff;
}

.shell-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.shell-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  flex: 0 0 auto;
}

.shell-brand-mark svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.shell-brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.shell-brand-copy strong {
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}

.shell-brand-copy span {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.shell-user-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.shell-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #dbe4ee;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
}

.shell-user-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f9f78, #34d399);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.shell-user-copy {
  display: grid;
  gap: 1px;
}

.shell-user-copy strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 750;
}

.shell-user-copy span {
  color: #64748b;
  font-size: 12px;
}

.shell-logout {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.shell-logout:hover {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(254, 242, 242, 0.9);
  color: #dc2626;
}

.shell-nav {
  padding: 12px 24px 0;
  background: #fff;
}

.shell-nav-scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
}

.shell-nav-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid #dbe4ee;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.shell-nav-btn:hover {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(240, 253, 250, 0.96);
  color: #059669;
}

.shell-nav-btn.active {
  border-color: rgba(16, 185, 129, 0.2);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.06));
  color: #047857;
  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.12);
}

.shell-nav-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
}

.shell-nav-btn :deep(svg) {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  .shell-header {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 16px 12px;
  }

  .shell-user-actions {
    justify-content: space-between;
  }

  .shell-nav {
    padding: 10px 16px 0;
  }
}
</style>