style: 全局 UI 主题皮肤重构与样式模块化
引入 Element Plus 主题定制和主题皮肤 composable，将全局 样式拆分为组件级独立 CSS 文件（侧边栏、顶栏、工作台等）， 统一色彩变量和间距规范，重构所有视图和组件样式以适配新 主题系统，优化图表和知识图谱组件视觉表现，提取审计和差 旅报销相关子组件。
This commit is contained in:
caoxiaozhu
@@ -1,41 +1,57 @@
|
||||
<template>
|
||||
<section class="doc-filters" aria-label="单据筛选">
|
||||
<div class="filter-item">
|
||||
<label class="filter-item">
|
||||
<span class="filter-label">申请月份</span>
|
||||
<Dropdown v-model="docFilters.month" :options="docMonths" placeholder="选择月份" appendTo="body" class="filter-dropdown">
|
||||
<template #option="{ option }">
|
||||
{{ formatMonth(option) }}
|
||||
</template>
|
||||
<template #value="{ value }">
|
||||
{{ formatMonth(value) }}
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<EnterpriseSelect
|
||||
v-model="docFilters.month"
|
||||
:options="monthOptions"
|
||||
placeholder="选择月份"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="filter-item">
|
||||
<span class="filter-label">申请类型</span>
|
||||
<Dropdown v-model="docFilters.type" :options="docTypes" placeholder="选择类型" appendTo="body" class="filter-dropdown" />
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<EnterpriseSelect
|
||||
v-model="docFilters.type"
|
||||
:options="docTypes"
|
||||
placeholder="选择类型"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="filter-item">
|
||||
<span class="filter-label">单据状态</span>
|
||||
<Dropdown v-model="docFilters.status" :options="docStatuses" placeholder="选择状态" appendTo="body" class="filter-dropdown" />
|
||||
</div>
|
||||
<EnterpriseSelect
|
||||
v-model="docFilters.status"
|
||||
:options="docStatuses"
|
||||
placeholder="选择状态"
|
||||
/>
|
||||
</label>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Dropdown from 'primevue/dropdown'
|
||||
import { computed } from 'vue'
|
||||
|
||||
defineProps({
|
||||
import EnterpriseSelect from '../shared/EnterpriseSelect.vue'
|
||||
|
||||
const props = defineProps({
|
||||
docFilters: { type: Object, required: true },
|
||||
docMonths: { type: Array, required: true },
|
||||
docTypes: { type: Array, required: true },
|
||||
docStatuses: { type: Array, required: true }
|
||||
})
|
||||
|
||||
function formatMonth(m) {
|
||||
if (!m) return ''
|
||||
const [y, mm] = m.split('-')
|
||||
return `${y}年${parseInt(mm)}月`
|
||||
const monthOptions = computed(() =>
|
||||
props.docMonths.map((month) => ({
|
||||
label: formatMonth(month),
|
||||
value: month
|
||||
}))
|
||||
)
|
||||
|
||||
function formatMonth(month) {
|
||||
if (!month) return ''
|
||||
const [year, rawMonth] = String(month).split('-')
|
||||
return `${year}年${Number.parseInt(rawMonth, 10)}月`
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -43,12 +59,27 @@ function formatMonth(m) {
|
||||
.doc-filters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(180px, 1fr));
|
||||
gap: 14px;
|
||||
padding: 16px 28px;
|
||||
gap: 12px;
|
||||
padding: 14px 24px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
}
|
||||
.filter-item { display: grid; gap: 6px; }
|
||||
.filter-label { color: var(--muted); font-size: 12px; font-weight: 700; }
|
||||
.filter-dropdown { width: 100%; }
|
||||
|
||||
.filter-item {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.doc-filters {
|
||||
grid-template-columns: 1fr;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,35 +1,34 @@
|
||||
<template>
|
||||
<section class="filters" :class="{ compact }" aria-label="筛选条件">
|
||||
<template v-if="!compact">
|
||||
<label>
|
||||
<span>法人主体</span>
|
||||
<select v-model="filters.entity">
|
||||
<option>全部主体</option>
|
||||
<option>Northstar China Ltd.</option>
|
||||
<option>Northstar Singapore Pte.</option>
|
||||
<option>Northstar US Inc.</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>费用类型</span>
|
||||
<select v-model="filters.category">
|
||||
<option>全部费用</option>
|
||||
<option>机票</option>
|
||||
<option>酒店</option>
|
||||
<option>火车/用车</option>
|
||||
<option>餐补及杂费</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>风险等级</span>
|
||||
<select v-model="filters.risk">
|
||||
<option>全部风险</option>
|
||||
<option>高风险</option>
|
||||
<option>需解释</option>
|
||||
<option>低风险</option>
|
||||
</select>
|
||||
<label class="filter-field">
|
||||
<span>法人主体</span>
|
||||
<EnterpriseSelect
|
||||
v-model="filters.entity"
|
||||
:options="entityOptions"
|
||||
placeholder="选择主体"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="filter-field">
|
||||
<span>费用类型</span>
|
||||
<EnterpriseSelect
|
||||
v-model="filters.category"
|
||||
:options="categoryOptions"
|
||||
placeholder="选择费用"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="filter-field">
|
||||
<span>风险等级</span>
|
||||
<EnterpriseSelect
|
||||
v-model="filters.risk"
|
||||
:options="riskOptions"
|
||||
placeholder="选择风险"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<div class="segmented-wrap" :class="{ compact }">
|
||||
<span v-if="!compact">时间范围</span>
|
||||
<div class="segmented" role="tablist" aria-label="处理视图">
|
||||
@@ -48,6 +47,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import EnterpriseSelect from '../shared/EnterpriseSelect.vue'
|
||||
|
||||
defineProps({
|
||||
filters: { type: Object, required: true },
|
||||
ranges: { type: Array, required: true },
|
||||
@@ -56,13 +57,35 @@ defineProps({
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:activeRange'])
|
||||
|
||||
const entityOptions = [
|
||||
'全部主体',
|
||||
'Northstar China Ltd.',
|
||||
'Northstar Singapore Pte.',
|
||||
'Northstar US Inc.'
|
||||
]
|
||||
|
||||
const categoryOptions = [
|
||||
'全部费用',
|
||||
'机票',
|
||||
'酒店',
|
||||
'火车/用车',
|
||||
'餐补及杂费'
|
||||
]
|
||||
|
||||
const riskOptions = [
|
||||
'全部风险',
|
||||
'高风险',
|
||||
'需解释',
|
||||
'低风险'
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.filters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
|
||||
gap: 14px;
|
||||
gap: 12px;
|
||||
padding: 0 16px 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: #fff;
|
||||
@@ -74,7 +97,7 @@ const emit = defineEmits(['update:activeRange'])
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.filters label,
|
||||
.filter-field,
|
||||
.segmented-wrap {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
@@ -83,15 +106,6 @@ const emit = defineEmits(['update:activeRange'])
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.filters select {
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.segmented-wrap {
|
||||
justify-self: end;
|
||||
}
|
||||
@@ -99,38 +113,40 @@ const emit = defineEmits(['update:activeRange'])
|
||||
.segmented {
|
||||
align-self: end;
|
||||
display: inline-flex;
|
||||
gap: 0;
|
||||
min-height: 40px;
|
||||
padding: 3px;
|
||||
border-radius: 10px;
|
||||
background: #f1f5f9;
|
||||
min-height: 36px;
|
||||
padding: 2px;
|
||||
border: 1px solid #d8dee8;
|
||||
border-radius: 4px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.segmented button {
|
||||
position: relative;
|
||||
min-height: 34px;
|
||||
padding: 0 20px;
|
||||
min-height: 30px;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 3px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition:
|
||||
background 160ms var(--ease),
|
||||
color 160ms var(--ease),
|
||||
box-shadow 160ms var(--ease);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.segmented button:hover:not(.active) {
|
||||
color: #334155;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.segmented button.active {
|
||||
background: #fff;
|
||||
color: #1e293b;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
color: var(--primary-active);
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
|
||||
@@ -244,514 +244,4 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.rail {
|
||||
--rail-motion-duration: 320ms;
|
||||
--rail-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--rail-fade-duration: 160ms;
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: var(--desktop-stage-height, 100dvh);
|
||||
min-height: var(--desktop-stage-height, 100dvh);
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 250, 0.96)), #fff;
|
||||
border-right: 1px solid #dbe4ee;
|
||||
box-shadow: 1px 0 0 rgba(15, 23, 42, 0.02);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.rail-brand {
|
||||
position: relative;
|
||||
min-height: 92px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
padding: 22px 16px 18px;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
padding var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
gap var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
flex: 0 0 auto;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #07936f;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
height var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
margin var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.custom-logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-mark svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
max-width: 124px;
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
max-width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
opacity var(--rail-fade-duration) var(--rail-motion-ease),
|
||||
transform var(--rail-fade-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.rail-collapse-btn {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 31px;
|
||||
z-index: 2;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid rgba(148, 163, 184, 0.22);
|
||||
border-radius: 9px;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
color: #64748b;
|
||||
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
|
||||
transition:
|
||||
top var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
right var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
transform var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
background 180ms var(--ease),
|
||||
border-color 180ms var(--ease),
|
||||
color 180ms var(--ease),
|
||||
box-shadow 180ms var(--ease);
|
||||
}
|
||||
|
||||
.rail-collapse-btn:hover {
|
||||
border-color: rgba(16, 185, 129, 0.28);
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.rail-collapse-btn .mdi {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.rail-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex: 1;
|
||||
transition:
|
||||
padding var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
gap var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
padding var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
gap var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
background 180ms var(--ease),
|
||||
border-color 180ms var(--ease),
|
||||
color 180ms var(--ease);
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: rgba(16, 185, 129, 0.07);
|
||||
color: #0f9f78;
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: #ecfdf5;
|
||||
border-color: rgba(16, 185, 129, 0.12);
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
flex: 0 0 28px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 7px;
|
||||
color: currentColor;
|
||||
transition:
|
||||
flex-basis var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
height var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.nav-btn :deep(svg) {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 128px;
|
||||
color: currentColor;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
transition:
|
||||
max-width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
opacity var(--rail-fade-duration) var(--rail-motion-ease),
|
||||
transform var(--rail-fade-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
flex: 0 0 auto;
|
||||
min-width: 34px;
|
||||
height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
background: #ff5b67;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
transition:
|
||||
min-width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
max-width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
padding var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
opacity var(--rail-fade-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.nav-unread-dot {
|
||||
flex: 0 0 auto;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 999px;
|
||||
background: #ef4444;
|
||||
box-shadow: 0 6px 14px rgba(239, 68, 68, 0.26);
|
||||
}
|
||||
|
||||
.rail-user {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 78px;
|
||||
margin: 0;
|
||||
padding: 16px 20px 18px;
|
||||
border-top: 1px solid #edf2f7;
|
||||
transition: padding var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.user-summary {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 4px;
|
||||
color: #64748b;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
gap var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
padding var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
background 180ms var(--ease);
|
||||
}
|
||||
|
||||
.rail-user:hover .user-summary {
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
flex: 0 0 36px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, #0f9f78, #65d6b4);
|
||||
box-shadow: 0 6px 14px rgba(15, 159, 120, 0.18);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
transition:
|
||||
flex-basis var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
height var(--rail-motion-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.user-copy {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 116px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
opacity: 1;
|
||||
transition:
|
||||
max-width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
opacity var(--rail-fade-duration) var(--rail-motion-ease),
|
||||
transform var(--rail-fade-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.user-copy strong {
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-copy span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-summary .mdi {
|
||||
flex: 0 0 18px;
|
||||
font-size: 18px;
|
||||
transition:
|
||||
max-width var(--rail-motion-duration) var(--rail-motion-ease),
|
||||
opacity var(--rail-fade-duration) var(--rail-motion-ease);
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: calc(100% - 6px);
|
||||
min-width: 132px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.96);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
pointer-events: none;
|
||||
transition: all 180ms var(--ease);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.rail-user:hover .user-menu {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.user-menu-item {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: transparent;
|
||||
color: #dc2626;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
transition: all 180ms var(--ease);
|
||||
}
|
||||
|
||||
/* ========================================= */
|
||||
/* COLLAPSED STATE */
|
||||
/* ========================================= */
|
||||
|
||||
.rail-collapsed .rail-brand {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
padding: 24px 8px 14px;
|
||||
}
|
||||
|
||||
.rail-collapsed .brand-mark {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rail-collapsed .brand-mark svg {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.rail-collapsed .brand-name {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
max-width: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rail-collapsed .rail-collapse-btn {
|
||||
position: static;
|
||||
top: auto;
|
||||
right: auto;
|
||||
align-self: center;
|
||||
width: 36px;
|
||||
height: 32px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.rail-collapsed .rail-nav {
|
||||
gap: 10px;
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
.rail-collapsed .nav-btn {
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.rail-collapsed .nav-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex: 0 0 32px;
|
||||
}
|
||||
|
||||
.rail-collapsed .nav-label {
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
|
||||
.rail-collapsed .nav-badge {
|
||||
max-width: 0;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rail-collapsed .nav-unread-dot {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 11px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.rail-collapsed {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.rail-collapsed .rail-user {
|
||||
position: relative;
|
||||
z-index: 6;
|
||||
padding: 14px 8px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.rail-collapsed .user-summary {
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.rail-user-menu-floating {
|
||||
position: fixed;
|
||||
z-index: 12000;
|
||||
min-width: 132px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.96);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
|
||||
transform: translateY(-50%);
|
||||
animation: railUserMenuIn 180ms var(--rail-motion-ease) both;
|
||||
}
|
||||
|
||||
.rail-user-menu-floating .user-menu-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes railUserMenuIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50%) translateX(-6px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.rail-collapsed .user-copy,
|
||||
.rail-collapsed .user-summary .mdi {
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.rail {
|
||||
position: relative;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.rail *,
|
||||
.rail *::before,
|
||||
.rail *::after {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped src="../../assets/styles/components/sidebar-rail.css"></style>
|
||||
|
||||
@@ -262,7 +262,7 @@ const workbenchKpis = computed(() => {
|
||||
unit: '笔',
|
||||
meta: '本月累计',
|
||||
trend: monthlyCount > 0 ? 'up' : 'down',
|
||||
color: '#10b981'
|
||||
color: 'var(--theme-primary)'
|
||||
},
|
||||
{
|
||||
label: '本月报销总金额',
|
||||
@@ -299,10 +299,10 @@ const requestKpis = computed(() => {
|
||||
const completed = Number(summary.completed ?? 0)
|
||||
|
||||
return [
|
||||
{ label: '全部单据', value: total, delta: '当前', trend: 'up', arrow: 'mdi mdi-minus', color: '#10b981' },
|
||||
{ label: '全部单据', value: total, delta: '当前', trend: 'up', arrow: 'mdi mdi-minus', color: 'var(--theme-primary)' },
|
||||
{ label: '草稿', value: draft, delta: '待提交', trend: draft > 0 ? 'down' : 'up', arrow: draft > 0 ? 'mdi mdi-arrow-down' : 'mdi mdi-minus', color: '#f59e0b' },
|
||||
{ label: '审批中', value: inProgress, delta: '处理中', trend: inProgress > 0 ? 'up' : 'down', arrow: inProgress > 0 ? 'mdi mdi-arrow-up' : 'mdi mdi-minus', color: '#3b82f6' },
|
||||
{ label: '已完成', value: completed, delta: '已归档', trend: 'up', arrow: 'mdi mdi-arrow-up' , color: '#10b981' }
|
||||
{ label: '已完成', value: completed, delta: '已归档', trend: 'up', arrow: 'mdi mdi-arrow-up' , color: 'var(--success)' }
|
||||
]
|
||||
})
|
||||
|
||||
@@ -314,10 +314,10 @@ const documentKpis = computed(() => {
|
||||
const archived = Number(summary.archived ?? 0)
|
||||
|
||||
return [
|
||||
{ label: '全部单据', value: total, delta: '当前', trend: 'up', arrow: 'mdi mdi-minus', color: '#10b981' },
|
||||
{ label: '全部单据', value: total, delta: '当前', trend: 'up', arrow: 'mdi mdi-minus', color: 'var(--theme-primary)' },
|
||||
{ label: '待提交', value: toSubmit, delta: '草稿待办', trend: toSubmit > 0 ? 'down' : 'up', arrow: toSubmit > 0 ? 'mdi mdi-arrow-down' : 'mdi mdi-minus', color: '#f59e0b' },
|
||||
{ label: '待我处理', value: toProcess, delta: '审批待办', trend: toProcess > 0 ? 'down' : 'up', arrow: toProcess > 0 ? 'mdi mdi-arrow-down' : 'mdi mdi-minus', color: '#3b82f6' },
|
||||
{ label: '已归档', value: archived, delta: '归档入账', trend: 'up', arrow: 'mdi mdi-arrow-up', color: '#10b981' }
|
||||
{ label: '已归档', value: archived, delta: '归档入账', trend: 'up', arrow: 'mdi mdi-arrow-up', color: 'var(--success)' }
|
||||
]
|
||||
})
|
||||
|
||||
@@ -329,25 +329,25 @@ const logsKpis = computed(() => {
|
||||
const failed = Number(summary.failed ?? 0)
|
||||
|
||||
return [
|
||||
{ label: 'Hermes 总任务', value: total, unit: '条', meta: '当前', trend: 'up', color: '#10b981' },
|
||||
{ label: 'Hermes 总任务', value: total, unit: '条', meta: '当前', trend: 'up', color: 'var(--theme-primary)' },
|
||||
{ label: '运行中', value: running, unit: '条', meta: running > 0 ? '实时执行' : '暂无执行', trend: running > 0 ? 'up' : 'down', color: '#3b82f6' },
|
||||
{ label: '已完成', value: completed, unit: '条', meta: total ? `占比 ${Math.round((completed / total) * 100)}%` : '等待数据', trend: 'up', color: '#10b981' },
|
||||
{ label: '已完成', value: completed, unit: '条', meta: total ? `占比 ${Math.round((completed / total) * 100)}%` : '等待数据', trend: 'up', color: 'var(--success)' },
|
||||
{ label: '失败数', value: failed, unit: '条', meta: failed > 0 ? '需要关注' : '运行正常', trend: failed > 0 ? 'down' : 'up', color: '#ef4444' }
|
||||
]
|
||||
})
|
||||
|
||||
const chatKpis = [
|
||||
{ label: '今日已问数', value: 86, unit: '次', meta: '较昨日 +18', trend: 'up', color: '#10b981' },
|
||||
{ label: '今日已问数', value: 86, unit: '次', meta: '较昨日 +18', trend: 'up', color: 'var(--theme-primary)' },
|
||||
{ label: '已解决问题', value: 72, unit: '条', meta: '解决率 83.7%', trend: 'up', color: '#3b82f6' },
|
||||
{ label: '知识命中率', value: '92.3', unit: '%', meta: '较昨日 +2.6%', trend: 'up', color: '#8b5cf6' },
|
||||
{ label: '平均响应时长', value: 2.1, unit: 's', meta: '较昨日 -0.3s', trend: 'down', color: '#f59e0b' }
|
||||
]
|
||||
|
||||
const approvalKpis = [
|
||||
{ label: '待审批单据', value: 12, unit: '单', meta: '较昨日 +3', trend: 'up', color: '#059669' },
|
||||
{ label: '待审批单据', value: 12, unit: '单', meta: '较昨日 +3', trend: 'up', color: 'var(--theme-primary)' },
|
||||
{ label: '高风险单据', value: 4, unit: '单', meta: '较昨日 +1', trend: 'up', color: '#ef4444' },
|
||||
{ label: '即将超时', value: 3, unit: '单', meta: '30 分钟内', trend: 'down', color: '#f59e0b' },
|
||||
{ label: '今日已处理', value: 28, unit: '单', meta: '通过率 86%', trend: 'up', color: '#10b981' }
|
||||
{ label: '今日已处理', value: 28, unit: '单', meta: '通过率 86%', trend: 'up', color: 'var(--success)' }
|
||||
]
|
||||
|
||||
const knowledgeKpis = computed(() => {
|
||||
@@ -360,7 +360,7 @@ const knowledgeKpis = computed(() => {
|
||||
value: String(totalDocuments),
|
||||
meta: '',
|
||||
trend: 'up',
|
||||
color: '#10b981'
|
||||
color: 'var(--theme-primary)'
|
||||
}
|
||||
]
|
||||
})
|
||||
@@ -381,7 +381,7 @@ const employeeKpis = computed(() => {
|
||||
unit: '人',
|
||||
meta: `覆盖 ${departments} 个部门`,
|
||||
trend: 'up',
|
||||
color: '#10b981'
|
||||
color: 'var(--theme-primary)'
|
||||
},
|
||||
{
|
||||
label: '在职账号',
|
||||
@@ -499,438 +499,4 @@ function buildPresetRangeLabel(label) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 18px 24px 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.topbar.chat-mode {
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
}
|
||||
|
||||
.title-group {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(59, 130, 246, 0.10));
|
||||
color: #0d9668;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
color: #0f172a;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.topbar p {
|
||||
margin-top: 6px;
|
||||
max-width: 720px;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.top-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.range-combo {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.range-shell {
|
||||
height: 42px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 3px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
|
||||
}
|
||||
|
||||
.range-meta {
|
||||
height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.range-meta .mdi {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.range-tabs {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.range-tabs button {
|
||||
height: 34px;
|
||||
min-width: 54px;
|
||||
padding: 0 14px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.range-tabs button:hover:not(.active) {
|
||||
background: #f1f5f9;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.range-tabs button.active {
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
box-shadow: 0 6px 14px rgba(16, 185, 129, .18);
|
||||
}
|
||||
|
||||
.custom-range-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-range-btn {
|
||||
height: 42px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 13px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.custom-range-btn:hover,
|
||||
.custom-range-btn.active {
|
||||
border-color: rgba(16, 185, 129, .34);
|
||||
background: #f6fffb;
|
||||
color: #0f9f78;
|
||||
}
|
||||
|
||||
.calendar-popover {
|
||||
position: absolute;
|
||||
top: calc(100% + 10px);
|
||||
right: 0;
|
||||
width: 336px;
|
||||
z-index: 40;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
|
||||
}
|
||||
|
||||
.calendar-popover header,
|
||||
.calendar-popover footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.calendar-popover header strong {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.calendar-popover header button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.date-fields {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.date-fields label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.date-fields span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-fields input {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 8px;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ghost-btn,
|
||||
.apply-btn {
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.ghost-btn {
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
border: 0;
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.apply-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.kpi-chips {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.detail-alert-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.detail-alert-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 999px;
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-alert-pill i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.detail-alert-pill.success {
|
||||
border-color: #bbf7d0;
|
||||
background: #f0fdf4;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.detail-alert-pill.danger {
|
||||
border-color: #fecaca;
|
||||
background: #fff1f2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.kpi-chip {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 2px 10px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--chip-color) 8%, #fff), color-mix(in srgb, var(--chip-color) 3%, #f8fafc));
|
||||
border: 1px solid color-mix(in srgb, var(--chip-color) 18%, #e2e8f0);
|
||||
}
|
||||
|
||||
.chip-value {
|
||||
grid-row: 1 / 3;
|
||||
align-self: center;
|
||||
color: #0f172a;
|
||||
font-size: 22px;
|
||||
font-weight: 850;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.chip-value small {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.chip-label {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.chip-delta {
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.chip-delta.up { color: #059669; }
|
||||
.chip-delta.down { color: #f59e0b; }
|
||||
|
||||
.topbar-spacer {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.create-top-btn {
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 18px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
box-shadow: 0 8px 18px rgba(5, 150, 105, 0.18);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.create-top-btn:hover {
|
||||
background: #047857;
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.range-combo {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.topbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.top-actions,
|
||||
.search-wrap,
|
||||
.search-wrap.wide,
|
||||
.detail-alert-strip,
|
||||
.month-chip,
|
||||
.qa-filter,
|
||||
.new-question-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.range-combo {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.range-shell {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.range-meta {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.custom-range-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar-popover {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.range-combo {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.range-shell {
|
||||
height: auto;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.range-meta {
|
||||
width: 100%;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.range-tabs {
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.range-tabs button {
|
||||
flex: 1;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.calendar-popover {
|
||||
width: min(336px, calc(100vw - 32px));
|
||||
}
|
||||
|
||||
.date-fields {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped src="../../assets/styles/components/top-bar.css"></style>
|
||||
|
||||
Reference in New Issue
Block a user