433 lines
11 KiB
Vue
433 lines
11 KiB
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>
|