feat(web): update views
- AppShellRouteView.vue: update app shell route view - PoliciesView.vue: update policies view - TravelReimbursementCreateView.vue: update travel reimbursement create view
This commit is contained in:
caoxiaozhu
@@ -1,50 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app">
|
<div class="app">
|
||||||
<header class="shell-header">
|
<SidebarRail
|
||||||
<div class="shell-brand">
|
:nav-items="filteredNavItems"
|
||||||
<span class="shell-brand-mark" aria-hidden="true">
|
:active-view="activeView"
|
||||||
<svg viewBox="0 0 36 36">
|
:company-name="companyProfile.name"
|
||||||
<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" />
|
:current-user="currentUser"
|
||||||
<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" />
|
@navigate="handleNavigate"
|
||||||
</svg>
|
@open-chat="openSmartEntry"
|
||||||
</span>
|
@logout="handleLogout"
|
||||||
<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
|
<main
|
||||||
class="main"
|
class="main"
|
||||||
@@ -158,6 +122,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { computed, ref } from 'vue'
|
import { computed, ref } from 'vue'
|
||||||
|
|
||||||
|
import SidebarRail from '../components/layout/SidebarRail.vue'
|
||||||
import TopBar from '../components/layout/TopBar.vue'
|
import TopBar from '../components/layout/TopBar.vue'
|
||||||
import FilterBar from '../components/layout/FilterBar.vue'
|
import FilterBar from '../components/layout/FilterBar.vue'
|
||||||
import OverviewView from './OverviewView.vue'
|
import OverviewView from './OverviewView.vue'
|
||||||
@@ -179,17 +144,13 @@ const employeeSummary = ref(null)
|
|||||||
const knowledgeSummary = ref(null)
|
const knowledgeSummary = ref(null)
|
||||||
const auditDetailOpen = ref(false)
|
const auditDetailOpen = ref(false)
|
||||||
|
|
||||||
const {
|
const {
|
||||||
activeCase,
|
activeRange,
|
||||||
activeRange,
|
activeView,
|
||||||
activeView,
|
closeRequestDetail,
|
||||||
closeRequestDetail,
|
closeSmartEntry,
|
||||||
closeSmartEntry,
|
customRange,
|
||||||
customRange,
|
detailMode,
|
||||||
detailMode,
|
|
||||||
docSearch,
|
|
||||||
draft,
|
|
||||||
filteredDocuments,
|
|
||||||
filteredRequests,
|
filteredRequests,
|
||||||
filters,
|
filters,
|
||||||
handleApprove,
|
handleApprove,
|
||||||
@@ -224,209 +185,3 @@ function handleLogout() {
|
|||||||
logout('manual')
|
logout('manual')
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
|
||||||
|
|||||||
@@ -36,27 +36,28 @@
|
|||||||
</button>
|
</button>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<section class="document-area">
|
<section class="document-area" :class="{ 'read-only': !isAdmin }">
|
||||||
<div
|
<div
|
||||||
class="upload-zone"
|
v-if="isAdmin"
|
||||||
:class="{ disabled: !isAdmin, busy: uploading }"
|
class="upload-zone"
|
||||||
@click="triggerUpload"
|
:class="{ busy: uploading }"
|
||||||
@dragover.prevent
|
@click="triggerUpload"
|
||||||
@drop.prevent="handleDrop"
|
@dragover.prevent
|
||||||
>
|
@drop.prevent="handleDrop"
|
||||||
<input
|
>
|
||||||
ref="uploadInput"
|
<input
|
||||||
class="upload-input"
|
ref="uploadInput"
|
||||||
|
class="upload-input"
|
||||||
type="file"
|
type="file"
|
||||||
multiple
|
multiple
|
||||||
@change="handleFileInput"
|
@change="handleFileInput"
|
||||||
/>
|
/>
|
||||||
<i class="mdi mdi-cloud-upload"></i>
|
<i class="mdi mdi-cloud-upload"></i>
|
||||||
<strong>{{ isAdmin ? (uploading ? '正在上传文件...' : '拖拽文档到此处，或点击上传') : '知识文件只读查阅' }}</strong>
|
<strong>{{ uploading ? '正在上传文件...' : '拖拽文档到此处，或点击上传' }}</strong>
|
||||||
<span>{{ uploadHint }}</span>
|
<span>{{ uploadHint }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="doc-table-wrap">
|
<div class="doc-table-wrap">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
|||||||
@@ -48,7 +48,7 @@
|
|||||||
|
|
||||||
<div class="assistant-layout" :class="{ 'can-show-insight': hasInsightPanelContent, 'has-insight': showInsightPanel }">
|
<div class="assistant-layout" :class="{ 'can-show-insight': hasInsightPanelContent, 'has-insight': showInsightPanel }">
|
||||||
<section class="dialog-panel">
|
<section class="dialog-panel">
|
||||||
<div class="dialog-toolbar">
|
<div v-if="shortcuts.length" class="dialog-toolbar">
|
||||||
<button
|
<button
|
||||||
v-for="shortcut in shortcuts"
|
v-for="shortcut in shortcuts"
|
||||||
:key="shortcut.label"
|
:key="shortcut.label"
|
||||||
|
|||||||
Reference in New Issue
Block a user