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>
|
||||
<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>
|
||||
<SidebarRail
|
||||
:nav-items="filteredNavItems"
|
||||
:active-view="activeView"
|
||||
:company-name="companyProfile.name"
|
||||
:current-user="currentUser"
|
||||
@navigate="handleNavigate"
|
||||
@open-chat="openSmartEntry"
|
||||
@logout="handleLogout"
|
||||
/>
|
||||
|
||||
<main
|
||||
class="main"
|
||||
@@ -158,6 +122,7 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import SidebarRail from '../components/layout/SidebarRail.vue'
|
||||
import TopBar from '../components/layout/TopBar.vue'
|
||||
import FilterBar from '../components/layout/FilterBar.vue'
|
||||
import OverviewView from './OverviewView.vue'
|
||||
@@ -179,17 +144,13 @@ const employeeSummary = ref(null)
|
||||
const knowledgeSummary = ref(null)
|
||||
const auditDetailOpen = ref(false)
|
||||
|
||||
const {
|
||||
activeCase,
|
||||
activeRange,
|
||||
activeView,
|
||||
closeRequestDetail,
|
||||
closeSmartEntry,
|
||||
customRange,
|
||||
detailMode,
|
||||
docSearch,
|
||||
draft,
|
||||
filteredDocuments,
|
||||
const {
|
||||
activeRange,
|
||||
activeView,
|
||||
closeRequestDetail,
|
||||
closeSmartEntry,
|
||||
customRange,
|
||||
detailMode,
|
||||
filteredRequests,
|
||||
filters,
|
||||
handleApprove,
|
||||
@@ -224,209 +185,3 @@ 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>
|
||||
|
||||
Reference in New Issue
Block a user