YG-Soft/X-Financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance layout components, data layer and global styles

Browse Source 
- SidebarRail, TopBar, FilterBar: improved navigation and filtering UX

- metrics.js, requests.js: expanded data with multi-range trend series

- composables: enhanced useChat, useNavigation, useRequests

- global.css: refined design tokens and utility classes

- Add DocFilterBar component and LoginView page

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
WIN-JHFT4D3SIVT\caoxiaozhu
2026-04-29 23:35:56 +08:00
parent 7141e1d11a
commit e54ebd072a
15 changed files with 845 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/business/RequestTable.vue
View File

@@ -22,7 +22,7 @@
<span class="badge" :class="request.status">{{ request.verdict }}</span>
</td>
<td>
<span class="badge" :class="request.sla.includes('51') ? 'danger' : ''">{{ request.sla }}</span>
<span class="badge" :class="request.slaStatus">{{ request.sla }}</span>
</td>
<td>{{ request.risk }}</td>
<td>

54
src/components/layout/DocFilterBar.vue Normal file
View 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>

132
src/components/layout/FilterBar.vue
View File

@@ -1,6 +1,7 @@
<template>
<section class="filters" aria-label="筛选条件">
<label>
<section class="filters" :class="{ compact }" aria-label="筛选条件">
<template v-if="!compact">
<label>
<span>法人主体</span>
<select v-model="filters.entity">
<option>全部主体</option>
@@ -13,10 +14,10 @@
<span>费用类型</span>
<select v-model="filters.category">
<option>全部费用</option>
<option>差旅交通</option>
<option>住宿</option>
<option>业务招待</option>
<option>办公采购</option>
<option>机票</option>
<option>酒店</option>
<option>火车/用车</option>
<option>餐补及杂费</option>
</select>
</label>
<label>
@@ -27,17 +28,21 @@
<option>需解释</option>
<option>低风险</option>
</select>
</label>
<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>
</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>
@@ -46,7 +51,8 @@
defineProps({
filters: { type: Object, required: true },
ranges: { type: Array, required: true },
activeRange: { type: String, required: true }
activeRange: { type: String, required: true },
compact: { type: Boolean, default: false }
})
const emit = defineEmits(['update:activeRange'])
@@ -55,15 +61,89 @@ const emit = defineEmits(['update:activeRange'])
<style scoped>
.filters {
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
gap: 14px;
padding: 16px 28px;
padding: 0 16px 12px;
border-bottom: 1px solid var(--line);
background: var(--surface);
background: #fff;
}
.filters.compact {
display: flex;
justify-content: flex-end;
padding: 0 16px 12px;
}
.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-grid;
grid-auto-flow: column;
gap: 8px;
min-height: 30px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.segmented button {
min-height: 30px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
background: #fff;
color: #334155;
font-size: 14px;
font-weight: 400;
}
.segmented button.active {
background: #f1f5f9;
color: #1e293b;
font-weight: 500;
box-shadow: none;
}
@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%;
}
}
.filters label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.filters select { height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); }
.segmented { align-self: end; display: inline-grid; grid-auto-flow: column; gap: 4px; min-height: 42px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.segmented button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-weight: 700; }
.segmented button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
</style>

200
src/components/layout/SidebarRail.vue
View File

@@ -1,6 +1,15 @@
<template>
<aside class="rail" aria-label="主导航">
<div class="mark">RO</div>
<div class="rail-brand">
<div class="brand-mark">星</div>
<div class="brand-copy">
<strong>星海科技</strong>
</div>
<button class="brand-toggle" type="button" aria-label="打开合规对话" @click="emit('openChat')">
<i class="pi pi-angle-left"></i>
</button>
</div>
<nav class="rail-nav">
<button
v-for="item in navItems"
@@ -8,30 +17,33 @@
class="nav-btn"
:class="{ active: activeView === item.id }"
type="button"
:aria-label="item.label"
:title="item.label"
@click="emit('navigate', item.id)"
>
<span v-html="item.icon"></span>
<span class="nav-icon" v-html="item.icon"></span>
<span class="nav-copy">
<strong>{{ item.label }}</strong>
</span>
</button>
</nav>
<button class="nav-btn muted" type="button" aria-label="打开合规对话" title="打开合规对话" @click="emit('openChat')">
<span v-html="messageIcon"></span>
</button>
<div class="rail-user">
<div class="user-avatar">张</div>
<div class="user-copy">
<strong>张晓明</strong>
<span>财务管理员</span>
</div>
<i class="pi pi-angle-down"></i>
</div>
</aside>
</template>
<script setup>
import { icons } from '../../data/icons.js'
defineProps({
navItems: { type: Array, required: true },
activeView: { type: String, required: true }
})
const emit = defineEmits(['navigate', 'openChat'])
const messageIcon = icons.message
</script>
<style scoped>
@@ -41,30 +53,164 @@ const messageIcon = icons.message
height: 100dvh;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 18px;
padding: 18px 12px;
background: var(--nav);
color: #fff;
gap: 0;
padding: 0;
background: #fff;
border-right: 1px solid var(--line);
z-index: 20;
}
.mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg,#fff,#9db2ff); color: #10215c; font-weight: 850; }
.rail-nav { display: grid; gap: 10px; align-content: start; }
.nav-btn {
width: 48px;
min-height: 48px;
.rail-brand,
.rail-user {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
}
.rail-brand {
padding: 16px;
border-bottom: 1px solid var(--line);
}
.brand-mark,
.user-avatar {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 6px;
background: var(--primary);
color: #fff;
font-size: 16px;
font-weight: 700;
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 999px;
background: #e2f6ef;
color: #047857;
}
.brand-copy,
.user-copy,
.nav-copy {
min-width: 0;
display: grid;
}
.brand-copy strong,
.user-copy strong,
.nav-copy strong {
color: var(--ink);
font-size: 14px;
}
.user-copy span,
.nav-copy small {
margin-top: 2px;
color: var(--muted);
font-size: 12px;
line-height: 1.3;
}
.brand-toggle {
width: 28px;
min-height: 28px;
display: grid;
place-items: center;
border: 0;
border-radius: 14px;
border-radius: 6px;
background: transparent;
color: var(--nav-muted);
transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
color: #94a3b8;
}
.rail-nav {
display: grid;
gap: 4px;
align-content: start;
padding: 16px 12px;
overflow-y: auto;
}
.nav-btn {
width: 100%;
min-height: 42px;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 12px;
padding: 0 12px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: #475569;
text-align: left;
transition: background 160ms var(--ease), color 160ms var(--ease);
}
.nav-btn:hover,
.nav-btn.active {
background: rgba(16,185,129,.10);
color: var(--primary);
}
.nav-icon {
width: 20px;
height: 20px;
display: grid;
place-items: center;
}
.nav-btn :deep(svg) {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.rail-user {
padding: 16px;
border-top: 1px solid var(--line);
background: #fff;
}
.rail-user .pi {
color: var(--muted);
}
@media (max-width: 980px) {
.rail {
position: relative;
height: auto;
gap: 14px;
}
.rail-nav {
grid-auto-flow: row;
}
}
.nav-btn:hover, .nav-btn.active { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-1px); }
.nav-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
.rail { position: sticky; height: auto; grid-template-columns: auto 1fr auto; grid-template-rows: none; padding: 10px 12px; }
.rail-nav { display: flex; overflow-x: auto; }
.rail {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 14px;
}
.rail-nav {
display: flex;
overflow-x: auto;
padding-bottom: 2px;
}
.nav-btn {
min-width: 190px;
}
}
</style>

169
src/components/layout/TopBar.vue
View File

@@ -1,56 +1,163 @@
<template>
<header class="topbar">
<div>
<div class="eyebrow">Global finance operations</div>
<div class="title-group">
<div class="eyebrow">Smart Expense Operations</div>
<h1>{{ currentView.title }}</h1>
<p>{{ currentView.desc }}</p>
</div>
<div class="top-actions">
<label class="search">
<span v-html="searchIcon"></span>
<input :value="search" type="search" placeholder="搜索申请人、单号、费用类型" @input="emit('update:search', $event.target.value)" />
</label>
<button class="btn" type="button" @click="emit('batchApprove')">
<span v-html="checkIcon"></span>
批量通过
</button>
<button class="btn primary" type="button" @click="emit('openChat')">
<span v-html="messageIcon"></span>
合规对话
</button>
<span class="search-wrap">
<i class="pi pi-search search-icon"></i>
<input :value="search" type="search" :placeholder="isChat ? '搜索单号、申请人、目的地' : '搜索申请人、单号、费用类型'" @input="emit('update:search', $event.target.value)" />
</span>
<div v-if="!isChat" class="date-chip">
<i class="pi pi-calendar"></i>
<span>2024-07-06 ~ 2024-07-12</span>
</div>
<template v-if="isChat">
<button class="top-btn primary" type="button" @click="emit('newApplication')">
<i class="pi pi-plus"></i>
<span>新建出差申请</span>
</button>
</template>
<template v-else>
<button class="top-btn primary" type="button" @click="emit('openChat')">
<i class="pi pi-sparkles"></i>
<span>AI 助手</span>
</button>
</template>
</div>
</header>
</template>
<script setup>
import { icons } from '../../data/icons.js'
import { computed } from 'vue'
defineProps({
const props = defineProps({
currentView: { type: Object, required: true },
search: { type: String, default: '' }
search: { type: String, default: '' },
activeView: { type: String, default: '' }
})
const emit = defineEmits(['update:search', 'batchApprove', 'openChat'])
const emit = defineEmits(['update:search', 'batchApprove', 'openChat', 'newApplication'])
const searchIcon = icons.search
const checkIcon = icons.check
const messageIcon = icons.message
const isChat = computed(() => props.activeView === 'chat')
</script>
<style scoped>
.topbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 22px 28px;
border-bottom: 1px solid var(--line);
background: rgba(255,255,255,.9);
backdrop-filter: blur(14px);
padding: 16px;
background: #fff;
}
.title-group {
min-width: 0;
}
.topbar p {
margin-top: 4px;
max-width: 720px;
color: var(--muted);
font-size: 14px;
line-height: 1.45;
}
.top-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
flex-wrap: wrap;
}
.search-wrap {
position: relative;
width: 256px;
}
.search-icon {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
font-size: 14px;
}
.search-wrap input {
width: 100%;
height: 40px;
padding: 0 14px 0 38px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 14px;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.search-wrap input:focus {
border-color: #10b981;
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.16);
outline: none;
}
.date-chip {
height: 40px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 32px 0 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
background: #fff;
color: var(--text);
font-size: 14px;
font-weight: 400;
}
.date-chip .pi {
color: #94a3b8;
}
.top-btn {
height: 40px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 16px;
border: 0;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
transition: background 160ms ease;
}
.top-btn.primary {
background: var(--primary);
color: #fff;
}
.top-btn.primary:hover {
background: #0ea672;
}
@media (max-width: 760px) {
.topbar {
flex-direction: column;
align-items: stretch;
padding: 18px 16px;
}
.top-actions,
.search-wrap,
.date-chip {
width: 100%;
}
}
.topbar p { margin-top: 6px; color: var(--muted); font-size: 13px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.search { position: relative; min-width: 300px; }
.search span { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); }
.search span svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.search input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 1px solid var(--line); border-radius: var(--radius); }
</style>