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

feat: 引入 ECharts 统一图表并完善员工画像标签分页

Browse Source 
后端优化员工行为画像服务和辅助函数，完善系统设置模型和
配置持久化，前端引入 ECharts 替换所有图表组件实现统一
渲染，新增员工画像标签分页器和数字员工工作记录组件，优
化工作台响应式布局和登录页过渡动画，完善预算中心和数字
员工页面样式细节。
This commit is contained in:
caoxiaozhu
2026-05-28 16:24:59 +08:00
parent 8a4a777be7
commit e384318046
53 changed files with 4698 additions and 2468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

369
web/src/components/business/ExpenseProfileDetailModal.vue
View File

@@ -17,15 +17,15 @@
<template #header>
<header class="profile-dialog-header">
<div class="profile-dialog-title-block">
<span class="profile-dialog-eyebrow">Expense Behavior Profile</span>
<h2 id="expense-profile-modal-title">{{ userName }}的费用画像详情</h2>
<p>基于近 30 天费用操作、AI 协作、提单效率和预审质量形成。</p>
<span class="profile-dialog-eyebrow">User Behavior Profile</span>
<h2 id="expense-profile-modal-title">{{ userName }}的用户画像详情</h2>
<p>基于真实费用操作、AI 协作、流程质量和审核行为形成。</p>
</div>
<ElButton
class="profile-dialog-close"
text
aria-label="关闭费用画像详情"
aria-label="关闭用户画像详情"
@click="emitClose"
>
<i class="mdi mdi-close"></i>
@@ -33,8 +33,13 @@
</header>
</template>
<section class="profile-dialog-content" aria-label="费用画像分析">
<section class="profile-summary-grid" aria-label="画像核心指标">
<section class="profile-dialog-content" aria-label="用户画像分析">
<div v-if="profileStatusText" :class="['profile-dialog-alert', profileStatusTone]">
<i :class="loading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-information-outline'"></i>
<span>{{ profileStatusText }}</span>
</div>
<section v-if="metrics.length" class="profile-summary-grid" aria-label="画像核心指标">
<article v-for="metric in metrics" :key="metric.key" class="profile-summary-item">
<span>{{ metric.label }}</span>
<strong>{{ metric.value }}<small>{{ metric.unit }}</small></strong>
@@ -51,48 +56,43 @@
</div>
</div>
<div class="profile-tag-list">
<article
v-for="tag in tags"
:key="tag.code"
:class="['profile-tag-item', `profile-tag-item--${tag.tone}`]"
>
<div class="profile-tag-copy">
<strong>{{ tag.displayLabel || tag.label }}</strong>
<span>{{ tag.reason }}</span>
</div>
<ElTag
class="profile-score-tag"
:type="resolveProfileTagType(tag.tone)"
effect="light"
>
{{ tag.score }}
</ElTag>
</article>
</div>
<ExpenseProfileTagPager v-if="tags.length" :tags="tags" :visible="visible" />
<p v-else class="profile-panel-empty">暂无可展示的画像标签。</p>
</section>
<section class="profile-panel profile-radar-panel" aria-label="行为雷达图">
<div class="profile-section-title">
<div>
<span>行为雷达</span>
<small>使用项目图表组件组织，分数越高特征越明显</small>
<small>分数越高，行为特征越明显</small>
</div>
</div>
<div class="profile-radar-layout">
<div v-if="radarDimensions.length" class="profile-radar-layout">
<RadarChart
:key="radarRenderKey"
class="profile-radar-chart"
:items="radarDimensions"
label="费用画像评分"
label="用户画像评分"
/>
</div>
<p v-else class="profile-panel-empty profile-radar-empty">暂无可展示的雷达维度。</p>
<ul class="profile-radar-list">
<li v-for="dimension in radarDimensions" :key="dimension.code">
<span>{{ dimension.label }}</span>
<strong>{{ dimension.score }}</strong>
</li>
</ul>
<div v-if="tags.length" class="profile-behavior-tags" aria-label="行为标签">
<span class="profile-behavior-tags-title">行为标签：</span>
<div class="profile-behavior-tag-list">
<span
v-for="tag in tags"
:key="`behavior-${tag.code}`"
:class="[
'profile-behavior-tag',
`profile-behavior-tag--${tag.tone}`,
`profile-behavior-tag--accent-${tag.colorIndex || 0}`
]"
>
{{ tag.label || tag.displayLabel }}
</span>
</div>
</div>
</section>
</div>
@@ -105,7 +105,7 @@
</div>
</div>
<div class="profile-operation-list">
<div v-if="operations.length" class="profile-operation-list">
<article v-for="operation in operations" :key="operation.id" class="profile-operation-row">
<time>{{ operation.time }}</time>
<div class="profile-operation-copy">
@@ -121,24 +121,23 @@
</ElTag>
</article>
</div>
<p v-else class="profile-panel-empty">暂无最近操作记录。</p>
</section>
</section>
<template #footer>
<footer class="profile-dialog-footer">
<span>画像仅用于辅助分析，不作为自动审批或处罚依据。</span>
<ElButton class="profile-dialog-explain" type="primary" @click="emitExplain">
<i class="mdi mdi-robot-outline"></i>
<span>让 AI 解读画像</span>
</ElButton>
</footer>
</template>
</ElDialog>
</template>
<script setup>
import { computed, nextTick, ref, watch } from 'vue'
import { ElButton, ElDialog, ElTag } from 'element-plus'
import ExpenseProfileTagPager from './ExpenseProfileTagPager.vue'
import RadarChart from '../charts/RadarChart.vue'
const props = defineProps({
@@ -147,36 +146,47 @@ const props = defineProps({
metrics: { type: Array, default: () => [] },
tags: { type: Array, default: () => [] },
radarDimensions: { type: Array, default: () => [] },
operations: { type: Array, default: () => [] }
operations: { type: Array, default: () => [] },
loading: { type: Boolean, default: false },
errorMessage: { type: String, default: '' },
emptyReason: { type: String, default: '' }
})
const emit = defineEmits(['close', 'explain'])
const emit = defineEmits(['close'])
const radarRenderKey = ref(0)
function emitClose() {
emit('close')
}
function emitExplain() {
emit('explain')
}
function handleVisibleChange(value) {
if (!value) {
emitClose()
}
}
function resolveProfileTagType(tone) {
const normalized = String(tone || '').trim()
const profileStatusText = computed(() => {
if (props.loading) {
return '正在读取真实用户画像数据...'
}
if (props.errorMessage) {
return props.errorMessage
}
if (props.emptyReason) {
return props.emptyReason
}
return ''
})
if (['warning', 'risk', 'amber'].includes(normalized)) {
return 'warning'
const profileStatusTone = computed(() => {
if (props.errorMessage) {
return 'is-error'
}
if (['danger', 'high'].includes(normalized)) {
return 'danger'
if (props.emptyReason) {
return 'is-empty'
}
return 'primary'
}
return 'is-loading'
})
function resolveOperationStatusType(tone) {
const normalized = String(tone || '').trim()
@@ -192,6 +202,27 @@ function resolveOperationStatusType(tone) {
}
return 'info'
}
function scheduleRadarFrame(callback) {
if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
window.requestAnimationFrame(callback)
return
}
callback()
}
watch(
() => props.visible,
async (visible) => {
if (!visible) {
return
}
await nextTick()
scheduleRadarFrame(() => {
radarRenderKey.value += 1
})
}
)
</script>
<style scoped>
@@ -255,6 +286,7 @@ function resolveOperationStatusType(tone) {
}
.profile-dialog-footer {
justify-content: flex-start;
border-top: 1px solid #e2e8f0;
}
@@ -313,6 +345,31 @@ function resolveOperationStatusType(tone) {
background: #f8fafc;
}
.profile-dialog-alert {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 11px;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 4px;
background: #ffffff;
color: #475569;
font-size: 12px;
font-weight: 750;
}
.profile-dialog-alert.is-error {
border-color: rgba(220, 38, 38, 0.24);
background: #fff7f7;
color: #b91c1c;
}
.profile-dialog-alert.is-empty {
border-color: rgba(245, 158, 11, 0.28);
background: #fffaf0;
color: #92400e;
}
.profile-summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -320,8 +377,7 @@ function resolveOperationStatusType(tone) {
}
.profile-summary-item,
.profile-panel,
.profile-tag-item {
.profile-panel {
border: 1px solid #e2e8f0;
border-radius: 4px;
background: #ffffff;
@@ -380,6 +436,18 @@ function resolveOperationStatusType(tone) {
padding: 12px;
}
.profile-tags-panel {
grid-template-rows: auto minmax(0, 1fr);
align-content: start;
min-height: 352px;
}
.profile-radar-panel {
grid-template-rows: auto minmax(0, 1fr) auto;
align-content: start;
min-height: 352px;
}
.profile-section-title {
display: flex;
align-items: center;
@@ -399,35 +467,30 @@ function resolveOperationStatusType(tone) {
font-weight: 850;
}
.profile-tag-list,
.profile-operation-list {
display: grid;
gap: 8px;
}
.profile-tag-item {
.profile-panel-empty {
margin: 0;
padding: 18px 12px;
border: 1px dashed #cbd5e1;
border-radius: 4px;
background: #f8fafc;
color: #64748b;
font-size: 12px;
line-height: 1.5;
font-weight: 700;
text-align: center;
}
.profile-radar-empty {
min-height: 308px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 9px 10px;
transition:
border-color 180ms var(--ease),
background-color 180ms var(--ease);
place-items: center;
}
.profile-tag-item:hover {
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.24);
background: #fbfdff;
}
.profile-tag-copy {
min-width: 0;
display: grid;
gap: 3px;
}
.profile-tag-copy strong,
.profile-operation-copy strong {
overflow: hidden;
color: #0f172a;
@@ -437,16 +500,6 @@ function resolveOperationStatusType(tone) {
white-space: nowrap;
}
.profile-tag-copy span {
overflow: hidden;
color: #64748b;
font-size: 11.5px;
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-score-tag,
.profile-operation-status {
border-radius: 4px;
font-weight: 800;
@@ -454,39 +507,105 @@ function resolveOperationStatusType(tone) {
.profile-radar-layout {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(120px, 0.72fr);
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 14px;
justify-items: stretch;
min-height: 360px;
animation: profileRadarEnter 360ms cubic-bezier(0.2, 0, 0, 1) both;
}
.profile-radar-chart {
height: 260px;
width: 100%;
height: 360px;
}
.profile-radar-list {
.profile-behavior-tags {
display: grid;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
gap: 8px;
padding-top: 10px;
border-top: 1px solid #e8eef5;
}
.profile-radar-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: #475569;
font-size: 12px;
font-weight: 700;
}
.profile-radar-list strong {
.profile-behavior-tags-title {
color: #0f172a;
font-size: 13px;
font-size: 12px;
font-weight: 850;
}
.profile-behavior-tag-list {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.profile-behavior-tag {
--behavior-tag-rgb: 58, 124, 165;
--behavior-tag-text: #235d7e;
max-width: 132px;
overflow: hidden;
padding: 4px 9px;
border: 1px solid rgba(var(--behavior-tag-rgb), 0.24);
border-radius: 999px;
background: rgba(var(--behavior-tag-rgb), 0.08);
color: var(--behavior-tag-text);
font-size: 11.5px;
line-height: 1.25;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
animation: profileBehaviorTagIn 260ms cubic-bezier(0.2, 0, 0, 1) both;
}
.profile-behavior-tag--risk {
--behavior-tag-rgb: 245, 158, 11;
--behavior-tag-text: #92400e;
}
.profile-behavior-tag--positive {
--behavior-tag-rgb: 16, 185, 129;
--behavior-tag-text: #047857;
}
.profile-behavior-tag--accent-0 {
--behavior-tag-rgb: 58, 124, 165;
--behavior-tag-text: #235d7e;
}
.profile-behavior-tag--accent-1 {
--behavior-tag-rgb: 15, 159, 143;
--behavior-tag-text: #0f766e;
}
.profile-behavior-tag--accent-2 {
--behavior-tag-rgb: 245, 158, 11;
--behavior-tag-text: #92400e;
}
.profile-behavior-tag--accent-3 {
--behavior-tag-rgb: 124, 58, 237;
--behavior-tag-text: #5b21b6;
}
.profile-behavior-tag--accent-4 {
--behavior-tag-rgb: 220, 38, 38;
--behavior-tag-text: #991b1b;
}
.profile-behavior-tag--accent-5 {
--behavior-tag-rgb: 37, 99, 235;
--behavior-tag-text: #1d4ed8;
}
.profile-behavior-tag--accent-6 {
--behavior-tag-rgb: 22, 163, 74;
--behavior-tag-text: #15803d;
}
.profile-behavior-tag--accent-7 {
--behavior-tag-rgb: 219, 39, 119;
--behavior-tag-text: #be185d;
}
.profile-operation-row {
display: grid;
grid-template-columns: 88px minmax(0, 1fr) auto;
@@ -511,16 +630,6 @@ function resolveOperationStatusType(tone) {
justify-self: end;
}
.profile-dialog-explain {
min-height: 32px;
border-radius: 4px;
font-weight: 800;
}
.profile-dialog-explain i {
margin-right: 6px;
}
@keyframes expenseProfileDialogIn {
0% {
opacity: 0;
@@ -533,6 +642,30 @@ function resolveOperationStatusType(tone) {
}
}
@keyframes profileRadarEnter {
0% {
opacity: 0;
transform: translateY(8px) scale(0.985);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes profileBehaviorTagIn {
0% {
opacity: 0;
transform: translateY(4px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes expenseProfileDialogOut {
0% {
opacity: 1;
@@ -583,7 +716,9 @@ function resolveOperationStatusType(tone) {
@media (prefers-reduced-motion: reduce) {
:global(.expense-profile-dialog-zoom-enter-active .expense-profile-dialog),
:global(.expense-profile-dialog-zoom-leave-active .expense-profile-dialog) {
:global(.expense-profile-dialog-zoom-leave-active .expense-profile-dialog),
.profile-radar-layout,
.profile-behavior-tag {
animation-duration: 1ms !important;
}
}

322
web/src/components/business/ExpenseProfileTagPager.vue Normal file
View File

@@ -0,0 +1,322 @@
<template>
<div class="profile-tag-pager">
<div :key="activePageIndex" class="profile-tag-list">
<article
v-for="(tag, index) in visibleTags"
:key="tag.code"
:class="[
'profile-tag-item',
`profile-tag-item--${tag.tone}`,
`profile-tag-item--accent-${resolveTagAccentIndex(tag, index)}`
]"
>
<div class="profile-tag-copy">
<strong>{{ tag.displayLabel || tag.label }}</strong>
<span>{{ tag.reason }}</span>
</div>
<ElTag class="profile-score-tag" :type="resolveProfileTagType(tag.tone)" effect="light">
{{ tag.score }}
</ElTag>
</article>
<article
v-for="item in placeholderCount"
:key="`placeholder-${activePageIndex}-${item}`"
class="profile-tag-item profile-tag-item--placeholder"
aria-hidden="true"
></article>
</div>
<div v-if="pageCount > 1" class="profile-tag-pagination" aria-label="画像标签分页">
<ElButton
class="profile-tag-page-btn"
text
:disabled="activePageIndex === 0"
aria-label="上一页画像标签"
@click="goPreviousPage"
>
<i class="mdi mdi-chevron-left"></i>
</ElButton>
<div class="profile-tag-page-dots">
<button
v-for="page in tagPages"
:key="page"
type="button"
:class="['profile-tag-page-dot', { 'is-active': page === activePageIndex }]"
:aria-label="`切换到第 ${page + 1} 页画像标签`"
:aria-current="page === activePageIndex ? 'page' : undefined"
@click="goToPage(page)"
></button>
</div>
<ElButton
class="profile-tag-page-btn"
text
:disabled="activePageIndex >= pageCount - 1"
aria-label="下一页画像标签"
@click="goNextPage"
>
<i class="mdi mdi-chevron-right"></i>
</ElButton>
</div>
<div v-else class="profile-tag-pagination profile-tag-pagination--single" aria-hidden="true">
<span></span>
</div>
</div>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
import { ElButton, ElTag } from 'element-plus'
const TAG_PAGE_SIZE = 5
const props = defineProps({
tags: { type: Array, default: () => [] },
visible: { type: Boolean, default: false }
})
const pageIndex = ref(0)
const pageCount = computed(() => Math.max(1, Math.ceil(props.tags.length / TAG_PAGE_SIZE)))
const activePageIndex = computed(() => Math.min(pageIndex.value, pageCount.value - 1))
const tagPages = computed(() => Array.from({ length: pageCount.value }, (_, index) => index))
const visibleTags = computed(() => {
const start = activePageIndex.value * TAG_PAGE_SIZE
return props.tags.slice(start, start + TAG_PAGE_SIZE)
})
const placeholderCount = computed(() => Math.max(0, TAG_PAGE_SIZE - visibleTags.value.length))
const tagIdentity = computed(() => props.tags.map((tag) => tag.code || tag.label).join('|'))
function resolveProfileTagType(tone) {
const normalized = String(tone || '').trim()
if (['warning', 'risk', 'amber'].includes(normalized)) {
return 'warning'
}
if (['danger', 'high'].includes(normalized)) {
return 'danger'
}
return 'primary'
}
function goToPage(nextPage) {
pageIndex.value = Math.min(Math.max(Number(nextPage) || 0, 0), pageCount.value - 1)
}
function goPreviousPage() {
goToPage(activePageIndex.value - 1)
}
function goNextPage() {
goToPage(activePageIndex.value + 1)
}
function resolveTagAccentIndex(tag, index) {
const explicitIndex = Number(tag?.colorIndex ?? tag?.color_index)
if (Number.isFinite(explicitIndex)) {
return Math.max(0, Math.round(explicitIndex)) % 8
}
return (activePageIndex.value * TAG_PAGE_SIZE + index) % 8
}
watch(pageCount, () => {
goToPage(activePageIndex.value)
})
watch([() => props.visible, tagIdentity], ([visible]) => {
if (visible) {
goToPage(0)
}
})
</script>
<style scoped>
.profile-tag-pager {
min-height: 308px;
display: grid;
grid-template-rows: 272px 26px;
gap: 10px;
}
.profile-tag-list {
display: grid;
grid-template-rows: repeat(5, 48px);
align-content: start;
gap: 8px;
min-height: 272px;
animation: profileTagPageIn 180ms cubic-bezier(0.2, 0, 0, 1) both;
}
.profile-tag-item {
--tag-accent-rgb: 58, 124, 165;
--tag-accent-text: #235d7e;
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 7px 10px;
border: 1px solid rgba(var(--tag-accent-rgb), 0.2);
border-left: 3px solid rgb(var(--tag-accent-rgb));
border-radius: 4px;
background: rgba(var(--tag-accent-rgb), 0.045);
transition:
border-color 180ms var(--ease),
background-color 180ms var(--ease);
}
.profile-tag-item:hover {
border-color: rgba(var(--tag-accent-rgb), 0.34);
background: rgba(var(--tag-accent-rgb), 0.075);
}
.profile-tag-item--placeholder {
visibility: hidden;
pointer-events: none;
}
.profile-tag-copy {
min-width: 0;
display: grid;
gap: 3px;
}
.profile-tag-copy strong {
overflow: hidden;
color: var(--tag-accent-text);
font-size: 13px;
font-weight: 850;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-tag-copy span {
overflow: hidden;
color: #64748b;
font-size: 11.5px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-score-tag {
border-color: rgba(var(--tag-accent-rgb), 0.28);
background-color: rgba(var(--tag-accent-rgb), 0.1);
color: var(--tag-accent-text);
border-radius: 4px;
font-weight: 800;
}
.profile-tag-item--accent-0 {
--tag-accent-rgb: 58, 124, 165;
--tag-accent-text: #235d7e;
}
.profile-tag-item--accent-1 {
--tag-accent-rgb: 15, 159, 143;
--tag-accent-text: #0f766e;
}
.profile-tag-item--accent-2 {
--tag-accent-rgb: 245, 158, 11;
--tag-accent-text: #92400e;
}
.profile-tag-item--accent-3 {
--tag-accent-rgb: 124, 58, 237;
--tag-accent-text: #5b21b6;
}
.profile-tag-item--accent-4 {
--tag-accent-rgb: 220, 38, 38;
--tag-accent-text: #991b1b;
}
.profile-tag-item--accent-5 {
--tag-accent-rgb: 37, 99, 235;
--tag-accent-text: #1d4ed8;
}
.profile-tag-item--accent-6 {
--tag-accent-rgb: 22, 163, 74;
--tag-accent-text: #15803d;
}
.profile-tag-item--accent-7 {
--tag-accent-rgb: 219, 39, 119;
--tag-accent-text: #be185d;
}
.profile-tag-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 26px;
}
.profile-tag-pagination--single {
pointer-events: none;
}
.profile-tag-page-btn {
width: 24px;
height: 24px;
min-height: 24px;
padding: 0;
border-radius: 4px;
color: #475569;
}
.profile-tag-page-btn :deep(i) {
font-size: 16px;
}
.profile-tag-page-dots {
display: flex;
align-items: center;
gap: 6px;
}
.profile-tag-page-dot {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 999px;
background: #cbd5e1;
cursor: pointer;
transition:
width 180ms var(--ease),
background-color 180ms var(--ease);
}
.profile-tag-page-dot.is-active {
width: 18px;
background: #3a7ca5;
}
@keyframes profileTagPageIn {
0% {
opacity: 0;
transform: translateY(4px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.profile-tag-list,
.profile-tag-page-dot {
animation-duration: 1ms !important;
transition-duration: 1ms !important;
}
}
</style>

107
web/src/components/business/PersonalWorkbench.vue
View File

@@ -221,7 +221,7 @@
<article class="panel workbench-card side-panel usage-profile-panel">
<div class="section-head side-card-head">
<h2>费用画像</h2>
<h2>用户画像</h2>
<button
type="button"
class="detail-action"
@@ -230,11 +230,11 @@
@click="openExpenseProfileModal"
>
<span>查看详情</span>
<i class="mdi mdi-chevron-right"></i>
<i :class="employeeProfileLoading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-chevron-right'"></i>
</button>
</div>
<div class="insight-profile-list" aria-label="费用画像">
<div class="insight-profile-list" aria-label="用户画像">
<div
v-for="metric in visibleUsageProfileMetrics"
:key="metric.key"
@@ -264,8 +264,10 @@
:tags="expenseProfileTags"
:radar-dimensions="expenseProfileRadarDimensions"
:operations="expenseProfileOperations"
:loading="employeeProfileLoading"
:error-message="employeeProfileError"
:empty-reason="expenseProfileEmptyReason"
@close="closeExpenseProfileModal"
@explain="explainExpenseProfile"
/>
</section>
</template>
@@ -281,20 +283,26 @@ import { useToast } from '../../composables/useToast.js'
import {
assistantCapabilities,
buildExpenseStatItems,
expenseProfileOperations,
expenseProfileRadarDimensions,
expenseProfileTags,
progressItems,
progressSteps,
quickPromptItems,
todoItems,
usageProfileMetrics
} from '../../data/personalWorkbench.js'
import { fetchAgentRuns } from '../../services/agentAssets.js'
import { clearUserConversations, fetchLatestConversation } from '../../services/orchestrator.js'
import { fetchCurrentEmployeeLatestProfile } from '../../services/reimbursements.js'
import {
ASSISTANT_SESSION_SNAPSHOT_EVENT,
hasAssistantSessionSnapshot
} from '../../utils/assistantSessionSnapshot.js'
import {
buildProfileOperationsFromAgentRuns,
buildUserProfileMetricCards,
buildUserProfileSummaryMetrics,
normalizeUserProfileRadarDimensions,
normalizeUserProfileTags,
resolveCurrentUserProfileError
} from '../../utils/employeeProfileViewModel.js'
const props = defineProps({
showHeader: { type: Boolean, default: true },
@@ -313,6 +321,11 @@ const pendingAction = ref('')
const latestExpenseConversation = ref(null)
const hasLocalExpenseSnapshot = ref(false)
const expenseProfileModalOpen = ref(false)
const employeeProfile = ref(null)
const employeeProfileRuns = ref([])
const employeeProfileLoading = ref(false)
const employeeProfileError = ref('')
let employeeProfileLoadSeq = 0
const MAX_ATTACHMENTS = 10
const SESSION_TYPE_EXPENSE = 'expense'
const SESSION_TYPE_KNOWLEDGE = 'knowledge'
@@ -359,16 +372,34 @@ const visibleExpenseStatItems = computed(() => {
.filter(Boolean)
})
const visibleUsageProfileMetrics = computed(() => {
const preferredKeys = ['ai-usage', 'submit-efficiency', 'auto-pass-rate', 'audit-duration']
return preferredKeys
.map((key) => usageProfileMetrics.find((item) => item.key === key))
.filter(Boolean)
return buildUserProfileMetricCards(
employeeProfile.value,
employeeProfileRuns.value,
currentUser.value
).slice(0, 4)
})
const expenseProfileModalMetrics = computed(() => {
const preferredKeys = ['stay-duration', 'ai-usage', 'auto-pass-rate', 'audit-duration']
return preferredKeys
.map((key) => usageProfileMetrics.find((item) => item.key === key))
.filter(Boolean)
return buildUserProfileSummaryMetrics(
employeeProfile.value,
employeeProfileRuns.value,
currentUser.value
)
})
const expenseProfileTags = computed(() => normalizeUserProfileTags(employeeProfile.value))
const expenseProfileRadarDimensions = computed(() => normalizeUserProfileRadarDimensions(employeeProfile.value))
const expenseProfileOperations = computed(() =>
buildProfileOperationsFromAgentRuns(employeeProfileRuns.value, currentUser.value)
)
const expenseProfileEmptyReason = computed(() => String(employeeProfile.value?.empty_reason || '').trim())
const currentUserProfileKey = computed(() => {
const user = currentUser.value || {}
return [
user.username,
user.email,
user.name,
user.employeeNo,
user.employee_no
].map((item) => String(item || '').trim()).filter(Boolean).join('|')
})
const visibleTodoItems = computed(() => todoItems.slice(0, 5))
const visibleProgressItems = computed(() => progressItems.slice(0, 5))
@@ -469,19 +500,46 @@ function openPromptAssistant(prompt) {
})
}
async function loadCurrentEmployeeProfile() {
const sequence = ++employeeProfileLoadSeq
employeeProfileLoading.value = true
employeeProfileError.value = ''
const [profileResult, runsResult] = await Promise.allSettled([
fetchCurrentEmployeeLatestProfile({
scene: 'operations',
window_days: 90,
expense_type_scope: 'overall'
}),
fetchAgentRuns({ limit: 100 })
])
if (sequence !== employeeProfileLoadSeq) {
return
}
if (profileResult.status === 'fulfilled') {
employeeProfile.value = profileResult.value || null
} else {
employeeProfile.value = null
employeeProfileError.value = resolveCurrentUserProfileError(profileResult.reason)
}
employeeProfileRuns.value = runsResult.status === 'fulfilled' ? runsResult.value || [] : []
employeeProfileLoading.value = false
}
function openExpenseProfileModal() {
expenseProfileModalOpen.value = true
if (!employeeProfile.value && !employeeProfileLoading.value) {
void loadCurrentEmployeeProfile()
}
}
function closeExpenseProfileModal() {
expenseProfileModalOpen.value = false
}
function explainExpenseProfile() {
closeExpenseProfileModal()
openPromptAssistant('请根据我的费用画像标签、行为雷达和最近 5 次操作，解释我的费用使用特点和可以优化的地方。')
}
function handleWorkbenchEnter(event) {
if (event.isComposing) {
return
@@ -570,6 +628,7 @@ async function handleExpenseConversationAction() {
onMounted(() => {
refreshLocalExpenseSnapshot()
refreshLatestExpenseConversation()
loadCurrentEmployeeProfile()
window.addEventListener(ASSISTANT_SESSION_SNAPSHOT_EVENT, handleAssistantSessionSnapshotChange)
})
@@ -585,6 +644,12 @@ watch(
}
}
)
watch(currentUserProfileKey, (nextKey, previousKey) => {
if (nextKey && nextKey !== previousKey) {
loadCurrentEmployeeProfile()
}
})
</script>
<style scoped src="../../assets/styles/components/personal-workbench.css"></style>