refactor: split project into web and server directories
- Move frontend to web/ directory - Add server/ directory for backend - Restructure project for前后端分离架构 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
802
web/src/components/business/PersonalWorkbench.vue
Normal file
802
web/src/components/business/PersonalWorkbench.vue
Normal file
@@ -0,0 +1,802 @@
|
||||
<template>
|
||||
<section class="workbench">
|
||||
<PanelHead
|
||||
v-if="showHeader"
|
||||
eyebrow="Personal Workspace"
|
||||
title="个人工作台"
|
||||
note="把今天要处理的待办、报销进度和制度更新集中到一个入口。"
|
||||
/>
|
||||
|
||||
<article class="panel assistant-hero">
|
||||
<div class="assistant-visual" aria-hidden="true">
|
||||
<div class="assistant-core">
|
||||
<img class="assistant-image" :src="robotAssistant" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="assistant-copy">
|
||||
<span class="assistant-tag">AI 报销助手</span>
|
||||
<h3>描述费用或上传票据，AI 直接帮你判断怎么报</h3>
|
||||
<p>自动识别报销类别、核对附件完整性，并生成可继续提交的报销草稿。</p>
|
||||
|
||||
<div class="assistant-input">
|
||||
<textarea
|
||||
v-model="assistantDraft"
|
||||
rows="1"
|
||||
placeholder="例如：我昨天请客户吃饭花了 860 元，还打车去了客户公司"
|
||||
@keydown.ctrl.enter.prevent="openAssistantWithDraft"
|
||||
/>
|
||||
<button type="button" class="hero-action" @click="openAssistantWithDraft">开始识别</button>
|
||||
</div>
|
||||
|
||||
<div class="assistant-tools">
|
||||
<button type="button" class="ghost-action" @click="emit('openAssistant', { prompt: '', source: 'upload' })">
|
||||
<i class="mdi mdi-upload-outline"></i>
|
||||
<span>上传票据</span>
|
||||
</button>
|
||||
|
||||
<div class="assistant-skills">
|
||||
<span v-for="item in assistantSkills" :key="item">{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="workbench-grid">
|
||||
<article class="panel list-panel">
|
||||
<div class="section-head">
|
||||
<div class="title-with-badge">
|
||||
<h3>今日待办</h3>
|
||||
<span class="alert-badge">{{ todoAlertCount }}</span>
|
||||
</div>
|
||||
<button type="button" class="link-action">查看全部 <i class="mdi mdi-chevron-right"></i></button>
|
||||
</div>
|
||||
|
||||
<div class="list-body">
|
||||
<div v-for="item in todoItems" :key="item.title" class="todo-row">
|
||||
<div class="todo-icon" :style="{ '--icon-color': item.color }">
|
||||
<i :class="item.icon"></i>
|
||||
</div>
|
||||
|
||||
<div class="todo-copy">
|
||||
<strong>{{ item.title }}</strong>
|
||||
<p class="todo-advice">
|
||||
<span class="todo-advice-label">{{ item.tipLabel }}</span>
|
||||
<span class="todo-advice-text">{{ item.suggestion }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button type="button" class="row-action" @click="emit('openAssistant')">{{ item.action }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="panel list-panel">
|
||||
<div class="section-head">
|
||||
<div class="title-with-badge">
|
||||
<h3>报销进度</h3>
|
||||
<span class="alert-badge">{{ progressAlertCount }}</span>
|
||||
</div>
|
||||
<button type="button" class="link-action">查看全部 <i class="mdi mdi-chevron-right"></i></button>
|
||||
</div>
|
||||
|
||||
<div class="list-body">
|
||||
<div v-for="item in progressItems" :key="item.id" class="progress-row">
|
||||
<div class="todo-icon" :style="{ '--icon-color': item.color }">
|
||||
<i :class="item.icon"></i>
|
||||
</div>
|
||||
|
||||
<div class="todo-copy progress-copy">
|
||||
<strong>{{ item.title }}</strong>
|
||||
<p>提交时间：{{ item.date }}</p>
|
||||
</div>
|
||||
|
||||
<strong class="progress-amount">{{ item.amount }}</strong>
|
||||
<span class="progress-status" :class="item.tone">{{ item.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<article class="panel policy-panel">
|
||||
<div class="section-head">
|
||||
<h3>最新报销制度</h3>
|
||||
<button type="button" class="link-action">查看全部 <i class="mdi mdi-chevron-right"></i></button>
|
||||
</div>
|
||||
|
||||
<div class="policy-table">
|
||||
<div class="policy-head policy-row">
|
||||
<span class="policy-title-cell">制度名称</span>
|
||||
<span class="policy-summary-cell">摘要</span>
|
||||
<span class="policy-date-cell">发布日期</span>
|
||||
</div>
|
||||
|
||||
<div v-for="item in policyItems" :key="item.name" class="policy-row">
|
||||
<strong class="policy-title-cell">{{ item.name }}</strong>
|
||||
<span class="policy-summary-cell">{{ item.summary }}</span>
|
||||
<span class="policy-date-cell">{{ item.date }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import PanelHead from '../shared/PanelHead.vue'
|
||||
import robotAssistant from '../../assets/robot-assistant.png'
|
||||
|
||||
defineProps({
|
||||
showHeader: { type: Boolean, default: true }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['openAssistant'])
|
||||
const assistantDraft = ref('')
|
||||
|
||||
function openAssistantWithDraft() {
|
||||
emit('openAssistant', {
|
||||
prompt: assistantDraft.value.trim(),
|
||||
source: 'workbench'
|
||||
})
|
||||
}
|
||||
|
||||
const assistantSkills = ['识别报销类别', '检查缺少材料', '生成报销草稿']
|
||||
|
||||
const todoItems = [
|
||||
{
|
||||
title: '业务招待报销建议补参与人员',
|
||||
tipLabel: 'AI 建议',
|
||||
suggestion: '补充客户单位、客户人数、我方陪同人员',
|
||||
action: '去补充',
|
||||
icon: 'mdi mdi-account-group-outline',
|
||||
color: '#10b981'
|
||||
},
|
||||
{
|
||||
title: '差旅报销单待提交',
|
||||
tipLabel: 'AI 建议',
|
||||
suggestion: '补齐出发交通，可直接生成报销单',
|
||||
action: '继续填写',
|
||||
icon: 'mdi mdi-briefcase-outline',
|
||||
color: '#16a34a'
|
||||
},
|
||||
{
|
||||
title: '有 5 张票据未关联报销单',
|
||||
tipLabel: 'AI 建议',
|
||||
suggestion: '其中 3 张疑似交通费，可合并生成交通报销',
|
||||
action: '去整理',
|
||||
icon: 'mdi mdi-receipt-text-outline',
|
||||
color: '#3b82f6'
|
||||
}
|
||||
]
|
||||
|
||||
const todoAlertCount = todoItems.length
|
||||
|
||||
const progressItems = [
|
||||
{
|
||||
id: 'travel',
|
||||
title: '差旅报销',
|
||||
amount: '¥3,280',
|
||||
date: '2026-05-03',
|
||||
status: '主管审批中',
|
||||
tone: 'success',
|
||||
icon: 'mdi mdi-airplane',
|
||||
color: '#10b981'
|
||||
},
|
||||
{
|
||||
id: 'transport',
|
||||
title: '交通报销',
|
||||
amount: '¥126',
|
||||
date: '2026-05-02',
|
||||
status: '财务复核中',
|
||||
tone: 'info',
|
||||
icon: 'mdi mdi-car-outline',
|
||||
color: '#3b82f6'
|
||||
},
|
||||
{
|
||||
id: 'office',
|
||||
title: '办公采购',
|
||||
amount: '¥458',
|
||||
date: '2026-05-01',
|
||||
status: '已到账',
|
||||
tone: 'mint',
|
||||
icon: 'mdi mdi-cart-outline',
|
||||
color: '#16a34a'
|
||||
}
|
||||
]
|
||||
|
||||
const progressAlertCount = progressItems.filter((item) => item.status !== '已到账').length
|
||||
|
||||
const policyItems = [
|
||||
{
|
||||
name: '差旅报销管理办法（2026版）',
|
||||
summary: '更新住宿标准与交通等级规则',
|
||||
date: '2026-05-04'
|
||||
},
|
||||
{
|
||||
name: '业务招待费用报销规范',
|
||||
summary: '明确参与人员与事由填写要求',
|
||||
date: '2026-05-02'
|
||||
},
|
||||
{
|
||||
name: '交通费用报销细则',
|
||||
summary: '补充网约车与停车费报销说明',
|
||||
date: '2026-04-28'
|
||||
},
|
||||
{
|
||||
name: '票据与附件提交规范通知',
|
||||
summary: '统一附件命名与上传要求',
|
||||
date: '2026-04-25'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.workbench {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 164px minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
padding: 24px 26px;
|
||||
border: 1px solid rgba(16, 185, 129, 0.12);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 34%),
|
||||
radial-gradient(circle at right 20%, rgba(59, 130, 246, 0.07), transparent 28%),
|
||||
linear-gradient(135deg, #f7fffb 0%, #ffffff 48%, #f5fbff 100%);
|
||||
}
|
||||
|
||||
.assistant-hero::before,
|
||||
.assistant-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 999px;
|
||||
background: rgba(16, 185, 129, 0.06);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.assistant-hero::before {
|
||||
right: -48px;
|
||||
bottom: -58px;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.assistant-hero::after {
|
||||
right: 92px;
|
||||
top: -44px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.assistant-visual {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.assistant-core {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 36px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
|
||||
box-shadow:
|
||||
0 20px 44px rgba(15, 23, 42, 0.08),
|
||||
inset 0 -10px 18px rgba(16, 185, 129, 0.10);
|
||||
color: #0f9f78;
|
||||
}
|
||||
|
||||
.assistant-core::before,
|
||||
.assistant-core::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: #d1fae5;
|
||||
}
|
||||
|
||||
.assistant-core::before {
|
||||
top: -12px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.10);
|
||||
}
|
||||
|
||||
.assistant-core::after {
|
||||
top: -4px;
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.assistant-core .mdi {
|
||||
font-size: 68px;
|
||||
}
|
||||
|
||||
.assistant-image {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.12));
|
||||
}
|
||||
|
||||
.assistant-copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.assistant-tag {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(16, 185, 129, 0.10);
|
||||
color: #0f9f78;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.assistant-copy h3 {
|
||||
color: #0f172a;
|
||||
font-size: 28px;
|
||||
line-height: 1.25;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.assistant-copy p {
|
||||
max-width: 760px;
|
||||
color: #5b6b83;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.assistant-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
min-height: 52px;
|
||||
padding: 6px 8px 6px 14px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.28);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.assistant-input textarea {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
max-height: 24px;
|
||||
resize: none;
|
||||
border: 0;
|
||||
padding: 1px 0;
|
||||
background: transparent;
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.assistant-input textarea::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.assistant-input textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hero-action,
|
||||
.ghost-action,
|
||||
.row-action,
|
||||
.link-action,
|
||||
.row-link {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.hero-action {
|
||||
height: 36px;
|
||||
padding: 0 20px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 10px 22px rgba(16, 185, 129, 0.18);
|
||||
}
|
||||
|
||||
.assistant-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ghost-action {
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid rgba(16, 185, 129, 0.34);
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
color: #0f9f78;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.assistant-skills {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
color: #22a06b;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.assistant-skills span {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.assistant-skills span + span::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -7px;
|
||||
top: 50%;
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: rgba(16, 185, 129, 0.22);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.workbench-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.list-panel,
|
||||
.policy-panel {
|
||||
padding: 20px 22px;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-head h3 {
|
||||
color: #0f172a;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.title-with-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.alert-badge {
|
||||
min-width: 22px;
|
||||
height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 7px;
|
||||
border-radius: 999px;
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
box-shadow: 0 6px 14px rgba(239, 68, 68, 0.22);
|
||||
}
|
||||
|
||||
.link-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #10b981;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.list-body {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.todo-row,
|
||||
.progress-row {
|
||||
display: grid;
|
||||
grid-template-columns: 48px minmax(0, 1fr) auto;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.todo-row:first-child,
|
||||
.progress-row:first-child {
|
||||
padding-top: 4px;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.todo-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 14px;
|
||||
background: color-mix(in srgb, var(--icon-color) 12%, white);
|
||||
color: var(--icon-color);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.todo-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.todo-copy strong {
|
||||
display: block;
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.todo-copy p {
|
||||
margin-top: 4px;
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.todo-advice {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.todo-advice-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 22px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
background: #ecfdf5;
|
||||
color: #059669;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.todo-advice-text {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.row-action {
|
||||
height: 38px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid rgba(16, 185, 129, 0.36);
|
||||
border-radius: 10px;
|
||||
color: #10b981;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-row {
|
||||
grid-template-columns: 48px minmax(0, 1fr) minmax(84px, auto) minmax(104px, auto);
|
||||
gap: 14px 16px;
|
||||
}
|
||||
|
||||
.progress-copy strong {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.progress-amount {
|
||||
color: #0f172a;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 104px;
|
||||
min-height: 34px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.progress-status.success,
|
||||
.policy-status.success {
|
||||
background: #eafaf2;
|
||||
color: #16935f;
|
||||
}
|
||||
|
||||
.progress-status.info,
|
||||
.policy-status.info {
|
||||
background: #eff6ff;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.progress-status.mint {
|
||||
background: #edfdf5;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.policy-table {
|
||||
border: 1px solid #e7edf5;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.policy-row {
|
||||
display: grid;
|
||||
grid-template-columns: 2.2fr 2.4fr 1fr;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
min-height: 56px;
|
||||
padding: 0 18px;
|
||||
border-top: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.policy-head {
|
||||
min-height: 44px;
|
||||
background: #f8fbff;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.policy-row strong,
|
||||
.policy-row span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.policy-row strong {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.policy-row span {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.policy-title-cell,
|
||||
.policy-summary-cell {
|
||||
justify-self: stretch;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.policy-date-cell {
|
||||
justify-self: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.assistant-copy h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.policy-row {
|
||||
grid-template-columns: 1.8fr 1.8fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.assistant-hero {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.assistant-visual {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.workbench-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.assistant-hero,
|
||||
.list-panel,
|
||||
.policy-panel {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.assistant-input {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.assistant-input textarea {
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
max-height: 40px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.hero-action,
|
||||
.ghost-action,
|
||||
.row-action {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.todo-row,
|
||||
.progress-row {
|
||||
grid-template-columns: 48px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.progress-amount {
|
||||
grid-column: 2;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.row-action,
|
||||
.progress-status {
|
||||
grid-column: 2;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.policy-table {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.policy-head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.policy-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid #edf2f7;
|
||||
}
|
||||
|
||||
.policy-row strong,
|
||||
.policy-row span {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
web/src/components/business/RequestTable.vue
Normal file
63
web/src/components/business/RequestTable.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<article class="panel queue-panel" :class="{ expanded }">
|
||||
<PanelHead eyebrow="Approval queue" title="待处理报销申请" note="可直接通过、退回，或把当前单据带入合规对话继续追问。" />
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="col in columns" :key="col">{{ col }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="request in requests" :key="request.id">
|
||||
<td>
|
||||
<strong>{{ request.person }}</strong>
|
||||
<p>{{ request.dept }}</p>
|
||||
</td>
|
||||
<td>
|
||||
<strong>{{ request.category }} · {{ request.amount }}</strong>
|
||||
<p>{{ request.id }}</p>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge" :class="request.status">{{ request.verdict }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge" :class="request.slaStatus">{{ request.sla }}</span>
|
||||
</td>
|
||||
<td>{{ request.risk }}</td>
|
||||
<td>
|
||||
<div class="row-actions">
|
||||
<button class="mini-btn" @click="emit('approve', request)">通过</button>
|
||||
<button class="mini-btn" @click="emit('ask', request)">询问 AI</button>
|
||||
<button class="mini-btn" @click="emit('reject', request)">退回</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PanelHead from '../shared/PanelHead.vue'
|
||||
|
||||
defineProps({
|
||||
requests: { type: Array, required: true },
|
||||
expanded: Boolean
|
||||
})
|
||||
|
||||
const emit = defineEmits(['ask', 'approve', 'reject'])
|
||||
const columns = ['申请人', '费用与金额', 'AI 结论', 'SLA', '关键风险', '操作']
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.queue-panel { padding: 20px; }
|
||||
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
|
||||
table { width: 100%; min-width: 860px; border-collapse: collapse; }
|
||||
th, td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
|
||||
th { background: var(--surface-soft); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
|
||||
td strong { color: var(--ink); }
|
||||
td p { margin-top: 4px; color: var(--muted); font-size: 12px; }
|
||||
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
</style>
|
||||
172
web/src/components/charts/BarChart.vue
Normal file
172
web/src/components/charts/BarChart.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="bar-chart">
|
||||
<div class="rank-labels">
|
||||
<div v-for="(item, idx) in items" :key="item.name" class="rank-label">
|
||||
<span class="rank-badge" :class="medalClass(idx)">
|
||||
<svg v-if="idx < 3" width="18" height="18" viewBox="0 0 18 18">
|
||||
<circle cx="9" cy="9" r="8" :fill="medalFill(idx)" />
|
||||
<text x="9" y="13" text-anchor="middle" fill="#fff" font-size="10" font-weight="700">{{ idx + 1 }}</text>
|
||||
</svg>
|
||||
<template v-else>{{ idx + 1 }}</template>
|
||||
</span>
|
||||
<span class="rank-name">{{ item.name || item.shortName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-area">
|
||||
<Bar :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { Bar } from 'vue-chartjs'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
BarElement,
|
||||
Tooltip
|
||||
} from 'chart.js'
|
||||
|
||||
ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip)
|
||||
|
||||
const props = defineProps({
|
||||
items: { type: Array, required: true }
|
||||
})
|
||||
|
||||
const medalClass = (idx) => {
|
||||
if (idx === 0) return 'gold'
|
||||
if (idx === 1) return 'silver'
|
||||
if (idx === 2) return 'bronze'
|
||||
return ''
|
||||
}
|
||||
|
||||
const medalFill = (idx) => {
|
||||
if (idx === 0) return '#f59e0b'
|
||||
if (idx === 1) return '#94a3b8'
|
||||
if (idx === 2) return '#cd7f32'
|
||||
return '#94a3b8'
|
||||
}
|
||||
|
||||
const formatValue = (value) => {
|
||||
if (value >= 1_000_000) return `¥${(value / 1_000_000).toFixed(1)}M`
|
||||
if (value >= 1_000) return `¥${(value / 1_000).toFixed(1)}K`
|
||||
return `¥${value}`
|
||||
}
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: props.items.map((i) => i.name || i.shortName),
|
||||
datasets: [{
|
||||
data: props.items.map((i) => i.value || i.amount),
|
||||
backgroundColor: props.items.map((i) => i.color),
|
||||
borderRadius: 6,
|
||||
borderSkipped: false,
|
||||
barPercentage: 0.7,
|
||||
categoryPercentage: 0.85
|
||||
}]
|
||||
}))
|
||||
|
||||
const chartOptions = {
|
||||
indexAxis: 'y',
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
layout: {
|
||||
padding: { left: 0, right: 12 }
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(255,255,255,0.96)',
|
||||
titleColor: '#1e293b',
|
||||
bodyColor: '#64748b',
|
||||
borderColor: '#e2e8f0',
|
||||
borderWidth: 1,
|
||||
padding: 10,
|
||||
boxPadding: 4,
|
||||
cornerRadius: 6,
|
||||
callbacks: {
|
||||
title: () => '',
|
||||
label: (ctx) => ` ${formatValue(ctx.parsed.x)}`
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: '#f1f5f9',
|
||||
drawTicks: false
|
||||
},
|
||||
ticks: {
|
||||
color: '#94a3b8',
|
||||
font: { size: 11 },
|
||||
padding: 4,
|
||||
callback: (value) => formatValue(value)
|
||||
},
|
||||
border: { display: false }
|
||||
},
|
||||
y: {
|
||||
grid: { display: false },
|
||||
border: { display: false },
|
||||
ticks: { display: false }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bar-chart {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rank-labels {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.rank-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 34px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rank-badge {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rank-badge:not(.gold):not(.silver):not(.bronze) {
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.rank-badge svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rank-name {
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.chart-area {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
height: 240px;
|
||||
}
|
||||
</style>
|
||||
194
web/src/components/charts/DonutChart.vue
Normal file
194
web/src/components/charts/DonutChart.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="donut-chart">
|
||||
<div class="donut-body">
|
||||
<Doughnut :data="chartData" :options="chartOptions" />
|
||||
<div class="donut-center">
|
||||
<strong>{{ centerValue }}</strong>
|
||||
<span>{{ centerLabel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="donut-legend">
|
||||
<div v-for="item in items" :key="item.name" class="legend-row">
|
||||
<i :style="{ background: item.color }"></i>
|
||||
<span class="legend-name">{{ item.name }}</span>
|
||||
<span class="legend-val">{{ item.display }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
ArcElement,
|
||||
Tooltip,
|
||||
Legend
|
||||
} from 'chart.js'
|
||||
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip, Legend)
|
||||
|
||||
const props = defineProps({
|
||||
items: { type: Array, required: true },
|
||||
centerValue: { type: String, required: true },
|
||||
centerLabel: { type: String, required: true }
|
||||
})
|
||||
|
||||
const progress = useAnimationProgress([() => props.items], 1150)
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: props.items.map((i) => i.name),
|
||||
datasets: [{
|
||||
data: props.items.map((i) => Math.max(Number((i.value * progress.value).toFixed(1)), 0.001)),
|
||||
backgroundColor: props.items.map((i) => i.color),
|
||||
borderWidth: 0,
|
||||
cutout: '68%',
|
||||
spacing: 3,
|
||||
borderRadius: 4
|
||||
}]
|
||||
}))
|
||||
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: {
|
||||
animateRotate: true,
|
||||
animateScale: true,
|
||||
duration: 900,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
transitions: {
|
||||
active: {
|
||||
animation: {
|
||||
duration: 180
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(255,255,255,0.96)',
|
||||
titleColor: '#1e293b',
|
||||
bodyColor: '#64748b',
|
||||
borderColor: '#e2e8f0',
|
||||
borderWidth: 1,
|
||||
padding: 10,
|
||||
boxPadding: 4,
|
||||
cornerRadius: 6,
|
||||
usePointStyle: true,
|
||||
callbacks: {
|
||||
label: (ctx) => {
|
||||
const total = ctx.dataset.data.reduce((a, b) => a + b, 0) || 1
|
||||
const pct = ((ctx.parsed / total) * 100).toFixed(1)
|
||||
return ` ${ctx.label}: ${pct}%`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.donut-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
.donut-body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin: 0 auto;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.donut-center {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
pointer-events: none;
|
||||
text-align: center;
|
||||
animation: donutCenterIn 620ms ease both;
|
||||
animation-delay: 360ms;
|
||||
}
|
||||
|
||||
.donut-center strong {
|
||||
color: #1e293b;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.donut-center span {
|
||||
margin-top: 4px;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.donut-legend {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px 16px;
|
||||
animation: donutLegendIn 560ms ease both;
|
||||
animation-delay: 480ms;
|
||||
}
|
||||
|
||||
.legend-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.legend-row i {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.legend-name {
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.legend-val {
|
||||
margin-left: auto;
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
@keyframes donutCenterIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(.92);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes donutLegendIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.donut-center,
|
||||
.donut-legend {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
168
web/src/components/charts/GaugeChart.vue
Normal file
168
web/src/components/charts/GaugeChart.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="gauge-chart">
|
||||
<div class="gauge-body">
|
||||
<Doughnut :data="chartData" :options="chartOptions" />
|
||||
<div class="gauge-center">
|
||||
<strong>{{ animatedRatio }}%</strong>
|
||||
<span>已执行</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gauge-summary">
|
||||
<div>
|
||||
<span>预算总额</span>
|
||||
<strong>{{ total }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>已执行</span>
|
||||
<strong>{{ used }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>剩余可用</span>
|
||||
<strong>{{ left }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { Doughnut } from 'vue-chartjs'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
ArcElement,
|
||||
Tooltip
|
||||
} from 'chart.js'
|
||||
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip)
|
||||
|
||||
const props = defineProps({
|
||||
ratio: { type: [Number, String], required: true },
|
||||
total: { type: String, required: true },
|
||||
used: { type: String, required: true },
|
||||
left: { type: String, required: true }
|
||||
})
|
||||
|
||||
const ratioValue = computed(() => Number(props.ratio))
|
||||
const progress = useAnimationProgress([() => props.ratio], 1150)
|
||||
const animatedRatio = computed(() => Number((ratioValue.value * progress.value).toFixed(0)))
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: ['已执行', '剩余'],
|
||||
datasets: [{
|
||||
data: [animatedRatio.value, 100 - animatedRatio.value],
|
||||
backgroundColor: ['#10b981', '#e2e8f0'],
|
||||
borderWidth: 0
|
||||
}]
|
||||
}))
|
||||
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
rotation: -90,
|
||||
circumference: 180,
|
||||
cutout: '65%',
|
||||
animation: {
|
||||
animateRotate: true,
|
||||
duration: 900,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: { enabled: false }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gauge-chart {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gauge-body {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gauge-center {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
animation: gaugeCenterIn 620ms ease both;
|
||||
animation-delay: 360ms;
|
||||
}
|
||||
|
||||
.gauge-center strong {
|
||||
color: #10b981;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.gauge-center span {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.gauge-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
text-align: center;
|
||||
animation: gaugeSummaryIn 560ms ease both;
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
|
||||
.gauge-summary span {
|
||||
display: block;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gauge-summary strong {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #1e293b;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@keyframes gaugeCenterIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gaugeSummaryIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.gauge-center,
|
||||
.gauge-summary {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
216
web/src/components/charts/TrendChart.vue
Normal file
216
web/src/components/charts/TrendChart.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="trend-chart">
|
||||
<div class="chart-legend">
|
||||
<span><i style="background:#10b981"></i>申请量（单）</span>
|
||||
<span><i style="background:#3b82f6"></i>审批完成量（单）</span>
|
||||
<span><i style="background:#8b5cf6"></i>平均审批时长（小时）</span>
|
||||
</div>
|
||||
<div class="chart-body">
|
||||
<Bar :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { Bar } from 'vue-chartjs'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
BarElement,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Filler,
|
||||
Tooltip,
|
||||
Legend
|
||||
} from 'chart.js'
|
||||
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'
|
||||
|
||||
ChartJS.register(CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler, Tooltip, Legend)
|
||||
|
||||
const props = defineProps({
|
||||
labels: { type: Array, required: true },
|
||||
applications: { type: Array, required: true },
|
||||
approved: { type: Array, required: true },
|
||||
avgHours: { type: Array, required: true }
|
||||
})
|
||||
|
||||
const progress = useAnimationProgress([
|
||||
() => props.labels,
|
||||
() => props.applications,
|
||||
() => props.approved,
|
||||
() => props.avgHours
|
||||
], 1200)
|
||||
|
||||
const scaleSeries = (series, decimals = 0) =>
|
||||
series.map((value) => Number((Number(value) * progress.value).toFixed(decimals)))
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: props.labels,
|
||||
datasets: [
|
||||
{
|
||||
label: '申请量（单）',
|
||||
data: scaleSeries(props.applications),
|
||||
backgroundColor: '#10b981',
|
||||
borderRadius: 4,
|
||||
barPercentage: 0.6,
|
||||
categoryPercentage: 0.5,
|
||||
order: 2
|
||||
},
|
||||
{
|
||||
label: '审批完成量（单）',
|
||||
data: scaleSeries(props.approved),
|
||||
backgroundColor: '#3b82f6',
|
||||
borderRadius: 4,
|
||||
barPercentage: 0.6,
|
||||
categoryPercentage: 0.5,
|
||||
order: 2
|
||||
},
|
||||
{
|
||||
label: '平均审批时长（小时）',
|
||||
data: scaleSeries(props.avgHours, 1),
|
||||
borderColor: '#8b5cf6',
|
||||
backgroundColor: 'transparent',
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#ffffff',
|
||||
pointBorderColor: '#8b5cf6',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 5,
|
||||
type: 'line',
|
||||
yAxisID: 'y1',
|
||||
order: 1
|
||||
}
|
||||
]
|
||||
}))
|
||||
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: {
|
||||
duration: 900,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
events: ['click', 'mousemove', 'mouseout'],
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
external: externalTooltip
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: {
|
||||
color: '#64748b',
|
||||
font: { size: 11 }
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: 250,
|
||||
grid: { color: '#f1f5f9' },
|
||||
ticks: {
|
||||
color: '#64748b',
|
||||
font: { size: 11 },
|
||||
stepSize: 50
|
||||
}
|
||||
},
|
||||
y1: {
|
||||
position: 'right',
|
||||
beginAtZero: true,
|
||||
max: 15,
|
||||
grid: { display: false },
|
||||
ticks: {
|
||||
color: '#64748b',
|
||||
font: { size: 11 },
|
||||
stepSize: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function externalTooltip(context) {
|
||||
const { chart, tooltip } = context
|
||||
|
||||
let el = chart.canvas.parentNode.querySelector('.chart-tooltip')
|
||||
if (!el) {
|
||||
el = document.createElement('div')
|
||||
el.classList.add('chart-tooltip')
|
||||
el.style.cssText =
|
||||
'position:absolute;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;pointer-events:none;transition:opacity .15s,transform .15s;font-family:Inter,system-ui,sans-serif;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,.08);z-index:10;opacity:0;transform:translateY(4px)'
|
||||
chart.canvas.parentNode.appendChild(el)
|
||||
}
|
||||
|
||||
if (tooltip.opacity === 0) {
|
||||
el.style.opacity = '0'
|
||||
return
|
||||
}
|
||||
|
||||
if (tooltip.body) {
|
||||
const titleLines = tooltip.title || []
|
||||
const bodyLines = tooltip.body.map((b) => b.lines)
|
||||
|
||||
const colors = tooltip.labelColors
|
||||
const dot = (color, text) =>
|
||||
`<div style="display:flex;align-items:center;gap:6px;margin-top:4px"><span style="width:8px;height:8px;border-radius:50%;background:${color};flex-shrink:0"></span><span style="color:#64748b">${text}</span></div>`
|
||||
|
||||
el.innerHTML =
|
||||
`<div style="font-weight:600;color:#1e293b;margin-bottom:4px">${titleLines.join('')}</div>` +
|
||||
bodyLines
|
||||
.map((lines, i) =>
|
||||
lines.map((line) => dot(colors[i]?.backgroundColor || colors[i]?.borderColor || '#999', line))
|
||||
)
|
||||
.join('')
|
||||
}
|
||||
|
||||
const { offsetLeft, offsetTop } = chart.canvas
|
||||
const left = offsetLeft + tooltip.caretX
|
||||
const top = offsetTop + tooltip.caretY
|
||||
|
||||
el.style.opacity = '1'
|
||||
el.style.transform = 'translateY(0)'
|
||||
el.style.left = `${left}px`
|
||||
el.style.top = `${top - el.offsetHeight - 12}px`
|
||||
el.style.transform = `translate(-50%, 0)`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.trend-chart {
|
||||
height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.chart-legend i {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.chart-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
54
web/src/components/layout/DocFilterBar.vue
Normal file
54
web/src/components/layout/DocFilterBar.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<section class="doc-filters" aria-label="单据筛选">
|
||||
<div 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">
|
||||
<span class="filter-label">申请类型</span>
|
||||
<Dropdown v-model="docFilters.type" :options="docTypes" placeholder="选择类型" appendTo="body" class="filter-dropdown" />
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-label">单据状态</span>
|
||||
<Dropdown v-model="docFilters.status" :options="docStatuses" placeholder="选择状态" appendTo="body" class="filter-dropdown" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Dropdown from 'primevue/dropdown'
|
||||
|
||||
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)}月`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.doc-filters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(180px, 1fr));
|
||||
gap: 14px;
|
||||
padding: 16px 28px;
|
||||
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%; }
|
||||
</style>
|
||||
156
web/src/components/layout/FilterBar.vue
Normal file
156
web/src/components/layout/FilterBar.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<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>
|
||||
</template>
|
||||
<div class="segmented-wrap" :class="{ compact }">
|
||||
<span v-if="!compact">时间范围</span>
|
||||
<div class="segmented" role="tablist" aria-label="处理视图">
|
||||
<button
|
||||
v-for="range in ranges"
|
||||
:key="range"
|
||||
:class="{ active: activeRange === range }"
|
||||
type="button"
|
||||
@click="emit('update:activeRange', range)"
|
||||
>
|
||||
{{ range }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
filters: { type: Object, required: true },
|
||||
ranges: { type: Array, required: true },
|
||||
activeRange: { type: String, required: true },
|
||||
compact: { type: Boolean, default: false }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:activeRange'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.filters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
|
||||
gap: 14px;
|
||||
padding: 0 16px 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.filters.compact {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.filters label,
|
||||
.segmented-wrap {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
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;
|
||||
}
|
||||
|
||||
.segmented {
|
||||
align-self: end;
|
||||
display: inline-flex;
|
||||
gap: 0;
|
||||
min-height: 40px;
|
||||
padding: 3px;
|
||||
border-radius: 10px;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.segmented button {
|
||||
position: relative;
|
||||
min-height: 34px;
|
||||
padding: 0 20px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.segmented button:hover:not(.active) {
|
||||
color: #334155;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.filters {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.segmented-wrap {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.filters {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.segmented {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
323
web/src/components/layout/SidebarRail.vue
Normal file
323
web/src/components/layout/SidebarRail.vue
Normal file
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<aside class="rail" aria-label="主导航">
|
||||
<div class="rail-brand">
|
||||
<div class="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>
|
||||
</div>
|
||||
<strong class="brand-name">星海科技</strong>
|
||||
<button class="brand-toggle" type="button" aria-label="打开 AI 助手" @click="emit('openChat')">
|
||||
<i class="mdi mdi-chevron-double-left"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="rail-nav" aria-label="功能导航">
|
||||
<button
|
||||
v-for="item in decoratedNavItems"
|
||||
:key="item.id"
|
||||
class="nav-btn"
|
||||
:class="{ active: activeView === item.id }"
|
||||
type="button"
|
||||
@click="emit('navigate', item.id)"
|
||||
>
|
||||
<span class="nav-icon" v-html="item.icon"></span>
|
||||
<span class="nav-label">{{ item.displayLabel }}</span>
|
||||
<span v-if="item.badge" class="nav-badge">{{ item.badge }}</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<button class="rail-user" type="button" aria-label="打开用户菜单">
|
||||
<span class="user-avatar">张</span>
|
||||
<span class="user-copy">
|
||||
<strong>张晓明</strong>
|
||||
<span>财务管理员</span>
|
||||
</span>
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
navItems: { type: Array, required: true },
|
||||
activeView: { type: String, required: true }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['navigate', 'openChat'])
|
||||
|
||||
const sidebarMeta = {
|
||||
overview: { label: '总览' },
|
||||
workbench: { label: '个人工作台' },
|
||||
requests: { label: '差旅申请/报销' },
|
||||
approval: { label: '审批中心', badge: '12' },
|
||||
chat: { label: 'AI助手' },
|
||||
policies: { label: '知识管理' },
|
||||
audit: { label: '技能中心' },
|
||||
employees: { label: '员工管理' }
|
||||
}
|
||||
|
||||
const decoratedNavItems = computed(() =>
|
||||
props.navItems.map((item) => ({
|
||||
...item,
|
||||
displayLabel: sidebarMeta[item.id]?.label ?? item.label,
|
||||
badge: sidebarMeta[item.id]?.badge
|
||||
}))
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rail {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,250,.96)),
|
||||
#fff;
|
||||
border-right: 1px solid #dbe4ee;
|
||||
box-shadow: 1px 0 0 rgba(15,23,42,.02);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.rail-brand {
|
||||
min-height: 86px;
|
||||
display: grid;
|
||||
grid-template-columns: 32px minmax(0, 1fr) 28px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 22px 20px 18px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #07936f;
|
||||
}
|
||||
|
||||
.brand-mark svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
min-width: 0;
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.brand-toggle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: #718096;
|
||||
transition: background 180ms var(--ease), color 180ms var(--ease);
|
||||
}
|
||||
|
||||
.brand-toggle:hover {
|
||||
background: #eef7f4;
|
||||
color: #07936f;
|
||||
}
|
||||
|
||||
.rail-nav {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 14px;
|
||||
padding: 16px 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
text-align: left;
|
||||
transition:
|
||||
background 180ms var(--ease),
|
||||
border-color 180ms var(--ease),
|
||||
color 180ms var(--ease),
|
||||
box-shadow 180ms var(--ease);
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: rgba(16,185,129,.07);
|
||||
color: #0f9f78;
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: linear-gradient(90deg, rgba(16,185,129,.16), rgba(16,185,129,.08));
|
||||
border-color: rgba(16,185,129,.10);
|
||||
color: #059669;
|
||||
box-shadow: inset 3px 0 0 #10b981;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 7px;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.nav-btn :deep(svg) {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
min-width: 0;
|
||||
color: currentColor;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
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;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.rail-user {
|
||||
min-width: 0;
|
||||
min-height: 74px;
|
||||
display: grid;
|
||||
grid-template-columns: 38px minmax(0, 1fr) 22px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
padding: 16px 20px 18px;
|
||||
border: 0;
|
||||
border-top: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
text-align: left;
|
||||
transition: background 180ms var(--ease), border-color 180ms var(--ease);
|
||||
}
|
||||
|
||||
.rail-user:hover {
|
||||
border-top-color: #e2e8f0;
|
||||
background: rgba(255,255,255,.72);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
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,.18);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.user-copy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.user-copy strong {
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.user-copy span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rail-user .mdi {
|
||||
justify-self: end;
|
||||
color: #718096;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.rail {
|
||||
position: relative;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.rail {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #dbe4ee;
|
||||
}
|
||||
|
||||
.rail-brand {
|
||||
min-height: 68px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.rail-nav {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 8px 16px 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
min-width: 148px;
|
||||
}
|
||||
|
||||
.rail-user {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
635
web/src/components/layout/TopBar.vue
Normal file
635
web/src/components/layout/TopBar.vue
Normal file
@@ -0,0 +1,635 @@
|
||||
<template>
|
||||
<header class="topbar" :class="{ 'chat-mode': isChat }">
|
||||
<div class="title-group">
|
||||
<div class="eyebrow">{{ isChat ? 'Smart Finance Q&A' : 'Smart Expense Operations' }}</div>
|
||||
<h1>{{ currentView.title }}</h1>
|
||||
<p>{{ currentView.desc }}</p>
|
||||
</div>
|
||||
|
||||
<div class="top-actions">
|
||||
<template v-if="isChat">
|
||||
<div class="kpi-chips">
|
||||
<div v-for="kpi in chatKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
|
||||
<span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
|
||||
<span class="chip-label">{{ kpi.label }}</span>
|
||||
<span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="isOverview">
|
||||
<div class="range-combo" aria-label="首页时间范围">
|
||||
<div class="range-shell">
|
||||
<span class="range-meta">
|
||||
<i class="mdi mdi-calendar"></i>
|
||||
<span>{{ activeDateLabel }}</span>
|
||||
</span>
|
||||
|
||||
<div class="range-tabs" role="tablist" aria-label="时间范围">
|
||||
<button
|
||||
v-for="option in rangeOptions"
|
||||
:key="option.value"
|
||||
type="button"
|
||||
role="tab"
|
||||
:aria-selected="activeRange === option.value"
|
||||
:class="{ active: activeRange === option.value }"
|
||||
@click="setRange(option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="custom-range-wrap">
|
||||
<button
|
||||
class="custom-range-btn"
|
||||
type="button"
|
||||
:class="{ active: isCustomRange }"
|
||||
:aria-expanded="calendarOpen"
|
||||
aria-haspopup="dialog"
|
||||
@click="calendarOpen = !calendarOpen"
|
||||
>
|
||||
<i class="mdi mdi-calendar-plus"></i>
|
||||
<span>选择时间段</span>
|
||||
</button>
|
||||
|
||||
<div v-if="calendarOpen" class="calendar-popover" role="dialog" aria-label="选择看板时间段">
|
||||
<header>
|
||||
<strong>选择看板时间段</strong>
|
||||
<button type="button" aria-label="关闭日期选择" @click="calendarOpen = false">
|
||||
<i class="mdi mdi-close"></i>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="date-fields">
|
||||
<label>
|
||||
<span>开始日期</span>
|
||||
<input v-model="draftStart" type="date" />
|
||||
</label>
|
||||
<label>
|
||||
<span>结束日期</span>
|
||||
<input v-model="draftEnd" type="date" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<button class="ghost-btn" type="button" @click="calendarOpen = false">取消</button>
|
||||
<button class="apply-btn" type="button" :disabled="!canApplyCustomRange" @click="applyCustomRange">
|
||||
应用
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="isRequests">
|
||||
<div class="kpi-chips">
|
||||
<div v-for="kpi in requestKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
|
||||
<span class="chip-value">{{ kpi.value }}<small>单</small></span>
|
||||
<span class="chip-label">{{ kpi.label }}</span>
|
||||
<span class="chip-delta" :class="kpi.trend">{{ kpi.delta }} <i :class="kpi.arrow"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="isApproval">
|
||||
<div class="kpi-chips">
|
||||
<div v-for="kpi in approvalKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
|
||||
<span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
|
||||
<span class="chip-label">{{ kpi.label }}</span>
|
||||
<span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topbar-spacer"></div>
|
||||
<button class="create-top-btn" type="button">
|
||||
<i class="mdi mdi-check-circle"></i>
|
||||
<span>批量通过</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template v-else-if="isPolicies">
|
||||
<div class="kpi-chips">
|
||||
<div v-for="kpi in knowledgeKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
|
||||
<span class="chip-value">{{ kpi.value }}</span>
|
||||
<span class="chip-label">{{ kpi.label }}</span>
|
||||
<span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
currentView: { type: Object, required: true },
|
||||
search: { type: String, default: '' },
|
||||
activeView: { type: String, default: '' },
|
||||
ranges: { type: Array, default: () => [] },
|
||||
activeRange: { type: String, default: '' },
|
||||
customRange: {
|
||||
type: Object,
|
||||
default: () => ({ start: '2024-07-06', end: '2024-07-12' })
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:search',
|
||||
'update:activeRange',
|
||||
'update:customRange',
|
||||
'batchApprove',
|
||||
'openChat',
|
||||
'newApplication'
|
||||
])
|
||||
|
||||
const isChat = computed(() => props.activeView === 'chat')
|
||||
const isOverview = computed(() => props.activeView === 'overview')
|
||||
const isRequests = computed(() => props.activeView === 'requests')
|
||||
const isApproval = computed(() => props.activeView === 'approval')
|
||||
const isPolicies = computed(() => props.activeView === 'policies')
|
||||
|
||||
const requestKpis = [
|
||||
{ label: '全部单据', value: 30, delta: '+8', trend: 'up', arrow: 'mdi mdi-arrow-up', color: '#10b981' },
|
||||
{ label: '待提交', value: 5, delta: '-1', trend: 'down', arrow: 'mdi mdi-arrow-down', color: '#f59e0b' },
|
||||
{ label: '审批中', value: 8, delta: '+2', trend: 'up', arrow: 'mdi mdi-arrow-up', color: '#3b82f6' },
|
||||
{ label: '已完成', value: 17, delta: '+7', trend: 'up', arrow: 'mdi mdi-arrow-up', color: '#10b981' }
|
||||
]
|
||||
|
||||
const chatKpis = [
|
||||
{ label: '今日已问数', value: 86, unit: '次', meta: '较昨日 +18', trend: 'up', color: '#10b981' },
|
||||
{ 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: 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' }
|
||||
]
|
||||
|
||||
const knowledgeKpis = [
|
||||
{ label: '文档总数', value: '1,248', meta: '较上周 +68', trend: 'up', icon: 'mdi mdi-file-document-outline', color: '#10b981' },
|
||||
{ label: '文件夹总数', value: '36', meta: '较上周 +2', trend: 'up', icon: 'mdi mdi-folder-outline', color: '#3b82f6' },
|
||||
{ label: '问答总量', value: '8,562', meta: '较上周 +321', trend: 'up', icon: 'mdi mdi-comment-text-multiple-outline', color: '#8b5cf6' },
|
||||
{ label: '知识命中率', value: '87.3%', meta: '较上周 +1.2%', trend: 'up', icon: 'mdi mdi-bullseye-arrow', color: '#f59e0b' }
|
||||
]
|
||||
const calendarOpen = ref(false)
|
||||
const draftStart = ref(props.customRange.start)
|
||||
const draftEnd = ref(props.customRange.end)
|
||||
|
||||
const fallbackRangeLabels = ['今日', '本周', '本月']
|
||||
const dateLabels = {
|
||||
'今日': '2024-07-12',
|
||||
'本周': '2024-07-06 ~ 2024-07-12',
|
||||
'本月': '2024-07'
|
||||
}
|
||||
|
||||
const rangeOptions = computed(() =>
|
||||
props.ranges.map((range, index) => ({
|
||||
value: range,
|
||||
label: fallbackRangeLabels[index] ?? String(range)
|
||||
}))
|
||||
)
|
||||
|
||||
const activeOption = computed(() =>
|
||||
rangeOptions.value.find((option) => option.value === props.activeRange) ?? rangeOptions.value[0]
|
||||
)
|
||||
|
||||
const isCustomRange = computed(() => props.activeRange === 'custom')
|
||||
const activeDateLabel = computed(() => {
|
||||
if (isCustomRange.value) return formatRangeLabel(props.customRange.start, props.customRange.end)
|
||||
return dateLabels[activeOption.value?.label] ?? '2024-07-06 ~ 2024-07-12'
|
||||
})
|
||||
|
||||
const canApplyCustomRange = computed(() =>
|
||||
Boolean(draftStart.value && draftEnd.value && draftStart.value <= draftEnd.value)
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.customRange,
|
||||
(range) => {
|
||||
draftStart.value = range.start
|
||||
draftEnd.value = range.end
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
function setRange(range) {
|
||||
emit('update:activeRange', range)
|
||||
calendarOpen.value = false
|
||||
}
|
||||
|
||||
function applyCustomRange() {
|
||||
if (!canApplyCustomRange.value) return
|
||||
emit('update:customRange', { start: draftStart.value, end: draftEnd.value })
|
||||
emit('update:activeRange', 'custom')
|
||||
calendarOpen.value = false
|
||||
}
|
||||
|
||||
function formatRangeLabel(start, end) {
|
||||
if (!start || !end) return '选择时间段'
|
||||
if (start === end) return start
|
||||
return `${start} ~ ${end}`
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.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,
|
||||
.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>
|
||||
27
web/src/components/shared/InfoRow.vue
Normal file
27
web/src/components/shared/InfoRow.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="info-row">
|
||||
<div class="rank">{{ rank }}</div>
|
||||
<div>
|
||||
<strong>{{ title }}</strong>
|
||||
<p>{{ note }}</p>
|
||||
</div>
|
||||
<span class="badge" :class="tone">{{ badge }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
rank: String,
|
||||
title: String,
|
||||
note: String,
|
||||
badge: String,
|
||||
tone: String
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.info-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
|
||||
.rank { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #fff; color: var(--primary); font-size: 12px; font-weight: 850; box-shadow: inset 0 0 0 1px var(--line); }
|
||||
.info-row strong { color: var(--ink); }
|
||||
.info-row p { margin-top: 4px; color: var(--muted); }
|
||||
</style>
|
||||
21
web/src/components/shared/PanelHead.vue
Normal file
21
web/src/components/shared/PanelHead.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="panel-head">
|
||||
<div class="eyebrow">{{ eyebrow }}</div>
|
||||
<h2>{{ title }}</h2>
|
||||
<p>{{ note }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
eyebrow: String,
|
||||
title: String,
|
||||
note: String
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.panel-head { margin-bottom: 18px; }
|
||||
.panel-head h2 { margin-top: 4px; color: var(--ink); font-size: 20px; }
|
||||
.panel-head p { margin-top: 6px; color: var(--muted); font-size: 13px; }
|
||||
</style>
|
||||
141
web/src/components/shared/RollingValue.vue
Normal file
141
web/src/components/shared/RollingValue.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<span ref="root" class="rv" :aria-label="value">
|
||||
<template v-for="(char, i) in chars" :key="`${i}-${charKinds[i]}`">
|
||||
<span
|
||||
v-if="isDigit(char)"
|
||||
class="rv-col"
|
||||
:style="{ '--y': `-${targetOffset(char)}em`, '--wait': `${i * 28 + 120}ms` }"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span class="rv-strip" :class="{ go: on }">
|
||||
<span v-for="d in len" :key="d" class="rv-d">{{ (d - 1) % 10 }}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span v-else class="rv-static" :class="{ currency: char === '¥', unit: /[a-zA-Z%]/.test(char) }" aria-hidden="true">{{ char }}</span>
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
value: { type: String, required: true },
|
||||
preRoll: { type: Number, default: 2 }
|
||||
})
|
||||
|
||||
const PRE = props.preRoll * 10
|
||||
const chars = computed(() => props.value.split(''))
|
||||
const charKinds = computed(() => chars.value.map((char) => isDigit(char) ? 'digit' : 'static'))
|
||||
const len = (props.preRoll + 1) * 10
|
||||
|
||||
function isDigit(c) { return /\d/.test(c) }
|
||||
function targetOffset(c) { return PRE + Number(c) }
|
||||
|
||||
const on = ref(false)
|
||||
const root = ref(null)
|
||||
let observer = null
|
||||
|
||||
function roll() {
|
||||
if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
|
||||
on.value = true
|
||||
return
|
||||
}
|
||||
|
||||
on.value = false
|
||||
nextTick(() => {
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
on.value = true
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!('IntersectionObserver' in window)) {
|
||||
roll()
|
||||
return
|
||||
}
|
||||
|
||||
observer = new IntersectionObserver((entries) => {
|
||||
if (entries.some((entry) => entry.isIntersecting)) {
|
||||
roll()
|
||||
observer?.disconnect()
|
||||
}
|
||||
}, { threshold: 0.2 })
|
||||
|
||||
if (root.value) observer.observe(root.value)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => observer?.disconnect())
|
||||
watch(() => props.value, roll)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rv {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.rv-col {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: .64em;
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
vertical-align: 0;
|
||||
}
|
||||
|
||||
.rv-strip {
|
||||
display: block;
|
||||
transform: translate3d(0, 0, 0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.rv-strip.go {
|
||||
animation: digitRoll 2.35s cubic-bezier(.45, 0, .18, 1) var(--wait, 0ms) both;
|
||||
}
|
||||
|
||||
.rv-d {
|
||||
height: 1em;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.rv-static {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 1em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.rv-static.currency {
|
||||
margin-right: .02em;
|
||||
}
|
||||
|
||||
.rv-static.unit {
|
||||
margin-left: .04em;
|
||||
}
|
||||
|
||||
@keyframes digitRoll {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(0, var(--y, 0), 0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.rv-strip {
|
||||
animation: none;
|
||||
transform: translateY(var(--y, 0));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
31
web/src/components/shared/ToastNotification.vue
Normal file
31
web/src/components/shared/ToastNotification.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<Transition name="toast">
|
||||
<div v-if="toastText" class="toast" role="status" aria-live="polite">{{ toastText }}</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
toastText: String
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toast {
|
||||
position: fixed;
|
||||
right: 22px;
|
||||
bottom: 22px;
|
||||
max-width: min(380px, calc(100vw - 44px));
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
background: #0b1220;
|
||||
color: #fff;
|
||||
box-shadow: 0 18px 48px rgba(16,24,40,.16);
|
||||
z-index: 120;
|
||||
animation: fadeUp 180ms var(--ease) both;
|
||||
}
|
||||
.toast-enter-active { transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
|
||||
.toast-leave-active { transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
|
||||
.toast-enter-from { opacity: 0; transform: translateY(10px); }
|
||||
.toast-leave-to { opacity: 0; transform: translateY(-6px); }
|
||||
</style>
|
||||
Reference in New Issue
Block a user