refactor: streamline layout, views routing and component composition
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
15
src/App.vue
15
src/App.vue
@@ -90,10 +90,15 @@
|
||||
@reject-case="toast(`${activeCase?.id} 已转人工复核。`)"
|
||||
/>
|
||||
|
||||
<TravelReimbursementCreateView
|
||||
v-else-if="activeView === 'requests' && detailMode"
|
||||
@back-to-requests="detailMode = false"
|
||||
/>
|
||||
|
||||
<RequestsView
|
||||
v-else-if="activeView === 'requests'"
|
||||
:filtered-requests="filteredRequests"
|
||||
@ask="handleOpenChat"
|
||||
@ask="detailMode = true"
|
||||
@approve="handleApprove"
|
||||
@reject="handleReject"
|
||||
@create-request="openTravelCreate"
|
||||
@@ -137,6 +142,7 @@ import { documents } from './data/requests.js'
|
||||
|
||||
const loggedIn = ref(false)
|
||||
const travelCreateMode = ref(false)
|
||||
const detailMode = ref(false)
|
||||
|
||||
function handleLogin(credentials) {
|
||||
if (credentials.username && credentials.password) {
|
||||
@@ -162,10 +168,10 @@ const customRange = ref({ start: '2024-07-06', end: '2024-07-12' })
|
||||
const travelPrompts = ['帮我提交出差申请', '预订机票', '预订酒店', '预订火车票', '查询差旅政策']
|
||||
|
||||
const topBarView = computed(() => {
|
||||
if (travelCreateMode.value) {
|
||||
if (travelCreateMode.value || detailMode.value) {
|
||||
return {
|
||||
title: '差旅报销助手',
|
||||
desc: '帮你填写报销、检查材料、跟踪进度'
|
||||
title: '差旅报销详情',
|
||||
desc: '查看报销单据详情、票据识别与审批进度'
|
||||
}
|
||||
}
|
||||
return currentView.value
|
||||
@@ -191,6 +197,7 @@ function handleReject(request) {
|
||||
|
||||
function handleNavigate(view) {
|
||||
travelCreateMode.value = false
|
||||
detailMode.value = false
|
||||
setView(view)
|
||||
}
|
||||
|
||||
|
||||
@@ -217,19 +217,19 @@ const rankedDepartments = computed(() => {
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
gap: 16px;
|
||||
animation: fadeUp 260ms var(--ease) both;
|
||||
}
|
||||
|
||||
.kpi-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
position: relative;
|
||||
padding: 20px 20px 16px;
|
||||
padding: 12px 14px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: 3px solid var(--accent);
|
||||
@@ -246,19 +246,19 @@ const rankedDepartments = computed(() => {
|
||||
.kpi-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.kpi-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
border-radius: 7px;
|
||||
background: color-mix(in srgb, var(--accent) 10%, white);
|
||||
color: var(--accent);
|
||||
font-size: 18px;
|
||||
font-size: 14px;
|
||||
flex: 0 0 auto;
|
||||
animation: iconPop 560ms var(--ease) both;
|
||||
animation-delay: calc(var(--delay, 0ms) + 100ms);
|
||||
@@ -266,9 +266,9 @@ const rankedDepartments = computed(() => {
|
||||
|
||||
.kpi-label {
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -276,15 +276,14 @@ const rankedDepartments = computed(() => {
|
||||
|
||||
.kpi-value {
|
||||
display: block;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
min-height: 22px;
|
||||
color: #0f172a;
|
||||
font-size: clamp(20px, 1.6vw, 26px);
|
||||
font-size: clamp(16px, 1.2vw, 20px);
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@@ -292,20 +291,20 @@ const rankedDepartments = computed(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding-top: 12px;
|
||||
gap: 6px;
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.kpi-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
padding: 2px 8px;
|
||||
gap: 2px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.kpi-badge.up {
|
||||
@@ -319,12 +318,12 @@ const rankedDepartments = computed(() => {
|
||||
}
|
||||
|
||||
.kpi-badge .mdi {
|
||||
font-size: 13px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.kpi-delta {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,17 +2,6 @@
|
||||
<section class="knowledge-page">
|
||||
<div class="knowledge-grid">
|
||||
<section class="knowledge-main">
|
||||
<div class="knowledge-metrics panel">
|
||||
<article v-for="item in metrics" :key="item.label" class="metric-card" :style="{ '--accent': item.accent }">
|
||||
<span class="metric-icon"><i :class="item.icon"></i></span>
|
||||
<div>
|
||||
<p>{{ item.label }} <i v-if="item.help" class="mdi mdi-help-circle-outline"></i></p>
|
||||
<strong>{{ item.value }}</strong>
|
||||
<small>{{ item.meta }}</small>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<article class="library-panel panel">
|
||||
<header class="panel-title">
|
||||
<h2>文档库 / 文件夹</h2>
|
||||
@@ -100,12 +89,12 @@
|
||||
<aside class="analytics-column">
|
||||
<article class="ops-card panel">
|
||||
<header class="card-head">
|
||||
<h2>知识运营概览 <i class="mdi mdi-help-circle-outline"></i></h2>
|
||||
<h2>知识运营概览</h2>
|
||||
</header>
|
||||
<div class="ops-grid">
|
||||
<div v-for="item in opsMetrics" :key="item.label" class="ops-item" :style="{ '--accent': item.accent }">
|
||||
<span><i :class="item.icon"></i></span>
|
||||
<div>
|
||||
<span class="ops-icon"><i :class="item.icon"></i></span>
|
||||
<div class="ops-text">
|
||||
<strong>{{ item.value }}</strong>
|
||||
<p>{{ item.label }}</p>
|
||||
<small>{{ item.meta }}</small>
|
||||
@@ -116,7 +105,7 @@
|
||||
|
||||
<article class="top-card panel">
|
||||
<header class="card-head">
|
||||
<h2>热门问题 TOP5 <i class="mdi mdi-help-circle-outline"></i></h2>
|
||||
<h2>热门问题 TOP5</h2>
|
||||
<button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
|
||||
</header>
|
||||
<ol class="hot-list">
|
||||
@@ -128,38 +117,9 @@
|
||||
</ol>
|
||||
</article>
|
||||
|
||||
<article class="feedback-card panel">
|
||||
<header class="card-head">
|
||||
<h2>用户点赞最多 <i class="mdi mdi-help-circle-outline"></i></h2>
|
||||
<button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
|
||||
</header>
|
||||
<ul class="feedback-list positive">
|
||||
<li v-for="(item, idx) in likedAnswers" :key="item.title">
|
||||
<span class="rank-badge" :class="idx === 0 ? 'hot' : idx < 3 ? 'warm' : 'normal'">{{ idx + 1 }}</span>
|
||||
<span>{{ item.title }}</span>
|
||||
<b><i class="mdi mdi-thumb-up"></i>{{ item.count }}</b>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="feedback-card panel">
|
||||
<header class="card-head">
|
||||
<h2>用户点踩较多 / 待优化 <i class="mdi mdi-help-circle-outline"></i></h2>
|
||||
<button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
|
||||
</header>
|
||||
<ul class="feedback-list negative">
|
||||
<li v-for="(item, idx) in dislikedAnswers" :key="item.title">
|
||||
<span class="rank-badge" :class="idx === 0 ? 'hot' : idx < 3 ? 'warm' : 'normal'">{{ idx + 1 }}</span>
|
||||
<span>{{ item.title }}</span>
|
||||
<b><i class="mdi mdi-thumb-down"></i>{{ item.count }}</b>
|
||||
<em>待优化</em>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="trend-card panel">
|
||||
<header class="card-head">
|
||||
<h2>近7天提问趋势 <i class="mdi mdi-help-circle-outline"></i></h2>
|
||||
<h2>近7天提问趋势</h2>
|
||||
<button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
|
||||
</header>
|
||||
<svg class="trend-chart" viewBox="0 0 420 190" role="img" aria-label="近7天提问趋势">
|
||||
@@ -171,9 +131,38 @@
|
||||
</svg>
|
||||
</article>
|
||||
|
||||
<article class="feedback-card panel">
|
||||
<header class="card-head">
|
||||
<h2>用户反馈</h2>
|
||||
<button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
|
||||
</header>
|
||||
<div class="feedback-split">
|
||||
<div class="feedback-half">
|
||||
<h3><i class="mdi mdi-thumb-up"></i> 点赞最多</h3>
|
||||
<ul class="feedback-list positive">
|
||||
<li v-for="(item, idx) in likedAnswers" :key="item.title">
|
||||
<span class="rank-badge" :class="idx === 0 ? 'hot' : idx < 3 ? 'warm' : 'normal'">{{ idx + 1 }}</span>
|
||||
<span>{{ item.title }}</span>
|
||||
<b><i class="mdi mdi-thumb-up"></i>{{ item.count }}</b>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feedback-half">
|
||||
<h3><i class="mdi mdi-thumb-down"></i> 待优化</h3>
|
||||
<ul class="feedback-list negative">
|
||||
<li v-for="(item, idx) in dislikedAnswers" :key="item.title">
|
||||
<span class="rank-badge" :class="idx === 0 ? 'hot' : idx < 3 ? 'warm' : 'normal'">{{ idx + 1 }}</span>
|
||||
<span>{{ item.title }}</span>
|
||||
<b><i class="mdi mdi-thumb-down"></i>{{ item.count }}</b>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="recent-card panel">
|
||||
<header class="card-head">
|
||||
<h2>最近更新知识 <i class="mdi mdi-help-circle-outline"></i></h2>
|
||||
<h2>最近更新知识</h2>
|
||||
<button type="button">更多 <i class="mdi mdi-chevron-right"></i></button>
|
||||
</header>
|
||||
<ul class="recent-list">
|
||||
@@ -192,13 +181,6 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const metrics = [
|
||||
{ label: '文档总数', value: '1,248', meta: '较上周 +68', icon: 'mdi mdi-file-document-outline', accent: '#10b981', help: true },
|
||||
{ label: '文件夹总数', value: '36', meta: '较上周 +2', icon: 'mdi mdi-folder', accent: '#3b82f6' },
|
||||
{ label: '问答总量', value: '8,562', meta: '较上周 +321', icon: 'mdi mdi-comment-text-multiple-outline', accent: '#8b5cf6' },
|
||||
{ label: '知识命中率', value: '87.3%', meta: '较上周 +1.2%', icon: 'mdi mdi-bullseye-arrow', accent: '#f59e0b' }
|
||||
]
|
||||
|
||||
const folders = [
|
||||
{ name: '财务知识库', count: 36, icon: 'mdi mdi-folder', active: false },
|
||||
{ name: '制度政策', count: 8, icon: 'mdi mdi-folder', active: false },
|
||||
@@ -304,78 +286,19 @@ const recentKnowledge = [
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.knowledge-main {
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.analytics-column {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-auto-rows: minmax(0, auto);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.knowledge-metrics {
|
||||
min-height: 96px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
min-height: 96px;
|
||||
display: grid;
|
||||
grid-template-columns: 54px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
grid-auto-rows: minmax(176px, 1fr);
|
||||
gap: 14px;
|
||||
padding: 16px 20px;
|
||||
border-right: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.metric-card:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--accent) 14%, white);
|
||||
color: var(--accent);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.metric-card p {
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.metric-card p i,
|
||||
.card-head h2 i {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.metric-card strong {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
color: #0f172a;
|
||||
font-size: 24px;
|
||||
font-weight: 850;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.metric-card small {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.library-panel {
|
||||
@@ -389,7 +312,7 @@ const recentKnowledge = [
|
||||
.panel-title h2,
|
||||
.card-head h2 {
|
||||
color: #0f172a;
|
||||
font-size: 19px;
|
||||
font-size: 16px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
@@ -677,79 +600,90 @@ th {
|
||||
}
|
||||
|
||||
.ops-card {
|
||||
grid-column: span 1;
|
||||
padding: 16px 18px;
|
||||
grid-column: span 2;
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
.ops-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px 12px;
|
||||
margin-top: 18px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.ops-item {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
gap: 9px;
|
||||
align-items: start;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ops-item > span {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
.ops-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--accent) 12%, white);
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--accent) 10%, #f8fafc);
|
||||
color: var(--accent);
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ops-item strong {
|
||||
color: #0f172a;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.ops-item p {
|
||||
margin-top: 3px;
|
||||
color: #334155;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.ops-item small {
|
||||
.ops-text strong {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: #64748b;
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
font-weight: 850;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.ops-text p {
|
||||
margin-top: 2px;
|
||||
color: #334155;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ops-text small {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
color: #94a3b8;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.top-card,
|
||||
.feedback-card,
|
||||
.trend-card,
|
||||
.recent-card {
|
||||
padding: 16px 18px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.hot-list,
|
||||
.feedback-list,
|
||||
.recent-list {
|
||||
.feedback-card {
|
||||
grid-column: span 2;
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
.hot-list {
|
||||
display: grid;
|
||||
gap: 13px;
|
||||
margin: 16px 0 0;
|
||||
gap: 6px;
|
||||
margin: 10px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hot-list li {
|
||||
min-height: 32px;
|
||||
min-height: 28px;
|
||||
display: grid;
|
||||
grid-template-columns: 24px minmax(0, 1fr) auto;
|
||||
grid-template-columns: 22px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 6px;
|
||||
transition: background 120ms ease;
|
||||
}
|
||||
|
||||
.hot-list li:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.hot-list span {
|
||||
@@ -759,7 +693,7 @@ th {
|
||||
place-items: center;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -770,77 +704,27 @@ th {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.hot-list strong,
|
||||
.feedback-list span {
|
||||
.hot-list strong {
|
||||
min-width: 0;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.hot-list b {
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.feedback-list li {
|
||||
min-height: 32px;
|
||||
display: grid;
|
||||
grid-template-columns: 24px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.feedback-list.negative li {
|
||||
grid-template-columns: 24px minmax(0, 1fr) auto auto;
|
||||
}
|
||||
|
||||
.feedback-list b {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #059669;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.feedback-list .rank-badge {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.feedback-list .rank-badge.hot { background: #ef4444; }
|
||||
.feedback-list .rank-badge.warm { background: #f59e0b; }
|
||||
.feedback-list .rank-badge.normal { background: #f1f5f9; color: #64748b; }
|
||||
|
||||
.feedback-list.negative b {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.feedback-list em {
|
||||
padding: 4px 8px;
|
||||
border-radius: 7px;
|
||||
background: #fee2e2;
|
||||
color: #ef4444;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 850;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.trend-chart {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
margin-top: 12px;
|
||||
height: 160px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.trend-chart line {
|
||||
@@ -855,13 +739,105 @@ th {
|
||||
.trend-chart polyline {
|
||||
fill: none;
|
||||
stroke: #10b981;
|
||||
stroke-width: 3;
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.trend-chart circle {
|
||||
fill: #fff;
|
||||
stroke: #10b981;
|
||||
stroke-width: 3;
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
|
||||
.feedback-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.feedback-half h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
color: #334155;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.feedback-half h3 i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.feedback-half:first-child h3 i { color: #059669; }
|
||||
.feedback-half:last-child h3 i { color: #ef4444; }
|
||||
|
||||
.feedback-list {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.feedback-list li {
|
||||
min-height: 26px;
|
||||
display: grid;
|
||||
grid-template-columns: 20px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 6px;
|
||||
transition: background 120ms ease;
|
||||
}
|
||||
|
||||
.feedback-list li:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.feedback-list span {
|
||||
min-width: 0;
|
||||
color: #334155;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.feedback-list .rank-badge {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.feedback-list .rank-badge.hot { background: #ef4444; }
|
||||
.feedback-list .rank-badge.warm { background: #f59e0b; }
|
||||
.feedback-list .rank-badge.normal { background: #f1f5f9; color: #64748b; }
|
||||
|
||||
.feedback-list b {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 850;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.feedback-list.positive b { color: #059669; }
|
||||
.feedback-list.negative b { color: #ef4444; }
|
||||
|
||||
.recent-list {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 10px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.recent-list li {
|
||||
@@ -869,21 +845,29 @@ th {
|
||||
grid-template-columns: 18px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
transition: background 120ms ease;
|
||||
}
|
||||
|
||||
.recent-list li:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.recent-list strong {
|
||||
color: #334155;
|
||||
font-size: 12px;
|
||||
font-weight: 850;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.recent-list time {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 1380px) {
|
||||
@@ -894,11 +878,19 @@ th {
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.knowledge-metrics,
|
||||
.analytics-column {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.ops-card,
|
||||
.feedback-card {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.feedback-split {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.library-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -910,7 +902,7 @@ th {
|
||||
}
|
||||
|
||||
.ops-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,21 +1,6 @@
|
||||
<template>
|
||||
<section class="travel-page">
|
||||
<div class="travel-kpis">
|
||||
<article v-for="item in kpis" :key="item.label" class="travel-kpi panel" :style="{ '--accent': item.accent }">
|
||||
<span class="kpi-icon"><i :class="item.icon"></i></span>
|
||||
<div>
|
||||
<p>{{ item.label }}</p>
|
||||
<strong>{{ item.value }} <small>单</small></strong>
|
||||
<span :class="item.trend">较上月 {{ item.delta }} <i :class="item.arrow"></i></span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<article class="travel-list panel">
|
||||
<header class="list-head">
|
||||
<h2>我的差旅报销单</h2>
|
||||
</header>
|
||||
|
||||
<nav class="status-tabs" aria-label="差旅报销状态">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
@@ -67,17 +52,6 @@
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-actions">
|
||||
<button class="export-btn" type="button">
|
||||
<i class="mdi mdi-upload"></i>
|
||||
<span>导出</span>
|
||||
</button>
|
||||
<button class="create-btn" type="button" @click="emit('createRequest')">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
<span>发起报销</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="hint"><i class="mdi mdi-information-outline"></i> 点击任意行可查看单据详情</p>
|
||||
@@ -141,7 +115,14 @@
|
||||
<button v-for="p in totalPages" :key="p" class="page-number" :class="{ active: currentPage === p }" type="button" :aria-current="currentPage === p ? 'page' : undefined" @click="currentPage = p">{{ p }}</button>
|
||||
<button class="page-nav" type="button" :disabled="currentPage === totalPages" aria-label="下一页" @click="currentPage++"><i class="mdi mdi-chevron-right"></i></button>
|
||||
</div>
|
||||
<button class="page-size" type="button">{{ pageSize }} 条/页 <i class="mdi mdi-chevron-down"></i></button>
|
||||
<div class="page-size-wrap">
|
||||
<button class="page-size" type="button" @click="pageSizeOpen = !pageSizeOpen">
|
||||
{{ pageSize }} 条/页 <i class="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
<div v-if="pageSizeOpen" class="page-size-dropdown" role="listbox">
|
||||
<button v-for="size in pageSizes" :key="size" type="button" role="option" :aria-selected="pageSize === size" :class="{ active: pageSize === size }" @click="changePageSize(size)">{{ size }} 条/页</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
@@ -154,7 +135,7 @@ defineProps({
|
||||
filteredRequests: { type: Array, required: true }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['ask', 'approve', 'reject', 'createRequest'])
|
||||
const emit = defineEmits(['ask', 'approve', 'reject'])
|
||||
|
||||
const activeTab = ref('全部')
|
||||
const tabs = ['全部', '待提交', '审批中', '待出行', '已完成']
|
||||
@@ -178,13 +159,6 @@ function applyDateRange() {
|
||||
datePopover.value = false
|
||||
}
|
||||
|
||||
const kpis = [
|
||||
{ label: '全部单据', value: 30, delta: '+8', trend: 'up good', arrow: 'mdi mdi-arrow-up', icon: 'mdi mdi-clipboard-text-outline', accent: '#10b981' },
|
||||
{ label: '待提交', value: 5, delta: '-1', trend: 'down good', arrow: 'mdi mdi-arrow-down', icon: 'mdi mdi-send', accent: '#f59e0b' },
|
||||
{ label: '审批中', value: 8, delta: '+2', trend: 'up bad', arrow: 'mdi mdi-arrow-up', icon: 'mdi mdi-clock-outline', accent: '#3b82f6' },
|
||||
{ label: '已完成', value: 17, delta: '+7', trend: 'up good', arrow: 'mdi mdi-arrow-up', icon: 'mdi mdi-check', accent: '#10b981' }
|
||||
]
|
||||
|
||||
const rows = [
|
||||
{ id: 'BR240715001', reason: '华东区域客户拜访', city: '上海、苏州、杭州', period: '07-14~07-17 (4天)', applyTime: '2024-07-13', amount: '￥4,280.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '待预订酒店', travelTone: 'warning' },
|
||||
{ id: 'BR240714010', reason: '年度战略合作伙伴会议', city: '北京', period: '07-15~07-16 (2天)', applyTime: '2024-07-12', amount: '￥1,860.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '待订机票', travelTone: 'warning' },
|
||||
@@ -219,7 +193,15 @@ const rows = [
|
||||
]
|
||||
|
||||
const currentPage = ref(1)
|
||||
const pageSize = 10
|
||||
const pageSize = ref(10)
|
||||
const pageSizes = [10, 20, 50]
|
||||
const pageSizeOpen = ref(false)
|
||||
|
||||
function changePageSize(size) {
|
||||
pageSize.value = size
|
||||
pageSizeOpen.value = false
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
if (activeTab.value === '全部') return rows
|
||||
@@ -227,11 +209,11 @@ const filteredRows = computed(() => {
|
||||
})
|
||||
|
||||
const totalCount = computed(() => filteredRows.value.length)
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / pageSize)))
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / pageSize.value)))
|
||||
|
||||
const visibleRows = computed(() => {
|
||||
const start = (currentPage.value - 1) * pageSize
|
||||
return filteredRows.value.slice(start, start + pageSize)
|
||||
const start = (currentPage.value - 1) * pageSize.value
|
||||
return filteredRows.value.slice(start, start + pageSize.value)
|
||||
})
|
||||
|
||||
watch(activeTab, () => { currentPage.value = 1 })
|
||||
@@ -242,90 +224,20 @@ watch(activeTab, () => { currentPage.value = 1 })
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
animation: fadeUp 220ms var(--ease) both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.travel-kpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.travel-kpi {
|
||||
min-height: 96px;
|
||||
display: grid;
|
||||
grid-template-columns: 54px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.kpi-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--accent) 14%, white);
|
||||
color: var(--accent);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.travel-kpi p {
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.travel-kpi strong {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
color: #0f172a;
|
||||
font-size: 26px;
|
||||
font-weight: 850;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.travel-kpi small {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.travel-kpi span:not(.kpi-icon) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 7px;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.travel-kpi .good i {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.travel-kpi .bad i {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.travel-list {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
|
||||
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
|
||||
padding: 16px 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-head h2 {
|
||||
color: #0f172a;
|
||||
font-size: 19px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.list-search {
|
||||
position: relative;
|
||||
width: 220px;
|
||||
@@ -402,8 +314,7 @@ watch(activeTab, () => { currentPage.value = 1 })
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.filter-set,
|
||||
.toolbar-actions {
|
||||
.filter-set {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@@ -411,8 +322,6 @@ watch(activeTab, () => { currentPage.value = 1 })
|
||||
}
|
||||
|
||||
.filter-btn,
|
||||
.export-btn,
|
||||
.create-btn,
|
||||
.page-size {
|
||||
min-height: 38px;
|
||||
display: inline-flex;
|
||||
@@ -424,11 +333,6 @@ watch(activeTab, () => { currentPage.value = 1 })
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-btn,
|
||||
.export-btn,
|
||||
.page-size {
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
@@ -558,23 +462,11 @@ watch(activeTab, () => { currentPage.value = 1 })
|
||||
}
|
||||
|
||||
.filter-btn:hover,
|
||||
.export-btn:hover,
|
||||
.page-size:hover {
|
||||
border-color: rgba(16, 185, 129, .32);
|
||||
color: #0f9f78;
|
||||
}
|
||||
|
||||
.create-btn {
|
||||
border: 0;
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 18px rgba(5, 150, 105, .18);
|
||||
}
|
||||
|
||||
.create-btn:hover {
|
||||
background: #047857;
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -589,7 +481,6 @@ watch(activeTab, () => { currentPage.value = 1 })
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
min-height: 495px;
|
||||
margin-top: 10px;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
@@ -598,6 +489,7 @@ watch(activeTab, () => { currentPage.value = 1 })
|
||||
}
|
||||
|
||||
table {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-width: 1140px;
|
||||
border-collapse: collapse;
|
||||
@@ -623,6 +515,9 @@ td {
|
||||
}
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background: #f7fafc;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
@@ -763,11 +658,50 @@ tbody tr:last-child td {
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.travel-kpis {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
.page-size-wrap {
|
||||
position: relative;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.page-size-dropdown {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
right: 0;
|
||||
z-index: 40;
|
||||
display: grid;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-size-dropdown button {
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
padding: 0 20px;
|
||||
transition: background 120ms ease, color 120ms ease;
|
||||
}
|
||||
|
||||
.page-size-dropdown button:hover {
|
||||
background: #f0fdf4;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.page-size-dropdown button.active {
|
||||
background: #059669;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.list-toolbar,
|
||||
.list-foot {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -775,12 +709,7 @@ tbody tr:last-child td {
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.travel-kpis {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.travel-list,
|
||||
.travel-kpi {
|
||||
.travel-list {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@@ -790,13 +719,10 @@ tbody tr:last-child td {
|
||||
}
|
||||
|
||||
.filter-btn,
|
||||
.export-btn,
|
||||
.create-btn,
|
||||
.page-size {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toolbar-actions,
|
||||
.filter-set {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user