feat: 新增员工行为画像算法与费用风险标签体系

后端新增员工行为画像算法模块,支持标签规则引擎和评分计算,
完善员工模型、银行信息、序列化和导入逻辑,优化报销审批流
和工作流常量,增强 Hermes 同步和知识同步能力,前端新增费
用画像详情弹窗、雷达图和风险卡片组件,完善登录页和工作台
样式,优化文档中心和归档中心交互,补充单元测试。
This commit is contained in:
caoxiaozhu
2026-05-28 12:09:49 +08:00
parent 04cd6d0f81
commit 8a4a777be7
96 changed files with 9835 additions and 704 deletions

View File

@@ -0,0 +1,590 @@
<template>
<ElDialog
:model-value="visible"
append-to-body
align-center
width="min(1040px, calc(100vw - 48px))"
:show-close="false"
:lock-scroll="true"
:destroy-on-close="false"
class="expense-profile-dialog"
modal-class="expense-profile-dialog-overlay"
body-class="expense-profile-dialog-body"
transition="expense-profile-dialog-zoom"
aria-labelledby="expense-profile-modal-title"
@update:model-value="handleVisibleChange"
>
<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>
</div>
<ElButton
class="profile-dialog-close"
text
aria-label="关闭费用画像详情"
@click="emitClose"
>
<i class="mdi mdi-close"></i>
</ElButton>
</header>
</template>
<section class="profile-dialog-content" aria-label="费用画像分析">
<section 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>
<em>{{ metric.hint }}</em>
</article>
</section>
<div class="profile-analysis-grid">
<section class="profile-panel profile-tags-panel" aria-label="画像标签">
<div class="profile-section-title">
<div>
<span>画像标签</span>
<small>按分数和业务解释排序</small>
</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>
</section>
<section class="profile-panel profile-radar-panel" aria-label="行为雷达图">
<div class="profile-section-title">
<div>
<span>行为雷达</span>
<small>使用项目图表组件组织分数越高特征越明显</small>
</div>
</div>
<div class="profile-radar-layout">
<RadarChart
class="profile-radar-chart"
:items="radarDimensions"
label="费用画像评分"
/>
<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>
</section>
</div>
<section class="profile-panel profile-operation-panel" aria-label="最近 5 次操作内容">
<div class="profile-section-title">
<div>
<span>最近 5 次操作内容</span>
<small>用于理解画像标签的近期行为依据</small>
</div>
</div>
<div 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">
<strong>{{ operation.action }}</strong>
<span>{{ operation.target }} · {{ operation.channel }}</span>
</div>
<ElTag
class="profile-operation-status"
:type="resolveOperationStatusType(operation.tone)"
effect="light"
>
{{ operation.status }}
</ElTag>
</article>
</div>
</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 { ElButton, ElDialog, ElTag } from 'element-plus'
import RadarChart from '../charts/RadarChart.vue'
const props = defineProps({
visible: { type: Boolean, default: false },
userName: { type: String, default: '同事' },
metrics: { type: Array, default: () => [] },
tags: { type: Array, default: () => [] },
radarDimensions: { type: Array, default: () => [] },
operations: { type: Array, default: () => [] }
})
const emit = defineEmits(['close', 'explain'])
function emitClose() {
emit('close')
}
function emitExplain() {
emit('explain')
}
function handleVisibleChange(value) {
if (!value) {
emitClose()
}
}
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 resolveOperationStatusType(tone) {
const normalized = String(tone || '').trim()
if (['success', 'positive', 'emerald'].includes(normalized)) {
return 'success'
}
if (['warning', 'risk', 'amber'].includes(normalized)) {
return 'warning'
}
if (['danger', 'high'].includes(normalized)) {
return 'danger'
}
return 'info'
}
</script>
<style scoped>
:global(.expense-profile-dialog-overlay) {
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.34), rgba(15, 23, 42, 0.4)),
rgba(15, 23, 42, 0.36);
}
:global(.expense-profile-dialog.el-dialog) {
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 4px;
background: #ffffff;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
}
:global(.expense-profile-dialog .el-dialog__header),
:global(.expense-profile-dialog .expense-profile-dialog-body),
:global(.expense-profile-dialog .el-dialog__footer) {
padding: 0;
margin: 0;
}
:global(.expense-profile-dialog-zoom-enter-active),
:global(.expense-profile-dialog-zoom-leave-active) {
transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1);
}
:global(.expense-profile-dialog-zoom-enter-active .expense-profile-dialog),
:global(.expense-profile-dialog-zoom-leave-active .expense-profile-dialog) {
transform-origin: center center;
will-change: transform, opacity;
}
:global(.expense-profile-dialog-zoom-enter-active .expense-profile-dialog) {
animation: expenseProfileDialogIn 240ms cubic-bezier(0.2, 0, 0, 1) both;
}
:global(.expense-profile-dialog-zoom-leave-active .expense-profile-dialog) {
animation: expenseProfileDialogOut 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
:global(.expense-profile-dialog-zoom-enter-from),
:global(.expense-profile-dialog-zoom-leave-to) {
opacity: 0;
}
.profile-dialog-header,
.profile-dialog-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
background: #ffffff;
}
.profile-dialog-header {
border-bottom: 1px solid #e2e8f0;
}
.profile-dialog-footer {
border-top: 1px solid #e2e8f0;
}
.profile-dialog-title-block {
min-width: 0;
}
.profile-dialog-eyebrow,
.profile-section-title small {
color: #64748b;
font-size: 10px;
font-weight: 850;
letter-spacing: 0;
text-transform: uppercase;
}
.profile-dialog-header h2 {
margin: 3px 0 4px;
color: #0f172a;
font-size: 19px;
line-height: 1.25;
font-weight: 850;
}
.profile-dialog-header p,
.profile-dialog-footer span {
margin: 0;
color: #64748b;
font-size: 12px;
line-height: 1.5;
font-weight: 650;
}
.profile-dialog-close {
width: 32px;
height: 32px;
min-height: 32px;
padding: 0;
border-radius: 4px;
color: #334155;
font-size: 18px;
}
.profile-dialog-close:hover {
background: #eef4fb;
color: var(--theme-primary-active);
}
.profile-dialog-content {
max-height: min(660px, calc(100vh - 190px));
min-height: 0;
display: grid;
gap: 12px;
padding: 14px;
overflow: auto;
background: #f8fafc;
}
.profile-summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.profile-summary-item,
.profile-panel,
.profile-tag-item {
border: 1px solid #e2e8f0;
border-radius: 4px;
background: #ffffff;
}
.profile-summary-item {
min-width: 0;
display: grid;
gap: 4px;
padding: 10px 12px;
}
.profile-summary-item span,
.profile-operation-copy span,
.profile-operation-row time {
color: #64748b;
font-size: 11.5px;
font-weight: 650;
}
.profile-summary-item strong {
color: #0f172a;
font-size: 18px;
line-height: 1.15;
font-weight: 850;
font-variant-numeric: tabular-nums;
}
.profile-summary-item small {
margin-left: 2px;
color: #64748b;
font-size: 11px;
font-weight: 650;
}
.profile-summary-item em {
overflow: hidden;
color: #94a3b8;
font-size: 11px;
font-style: normal;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-analysis-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
gap: 12px;
}
.profile-panel {
min-width: 0;
display: grid;
gap: 10px;
padding: 12px;
}
.profile-section-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.profile-section-title > div {
min-width: 0;
display: grid;
gap: 2px;
}
.profile-section-title span {
color: #0f172a;
font-size: 14px;
font-weight: 850;
}
.profile-tag-list,
.profile-operation-list {
display: grid;
gap: 8px;
}
.profile-tag-item {
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);
}
.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;
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.4;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-score-tag,
.profile-operation-status {
border-radius: 4px;
font-weight: 800;
}
.profile-radar-layout {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(120px, 0.72fr);
align-items: center;
gap: 14px;
}
.profile-radar-chart {
height: 260px;
}
.profile-radar-list {
display: grid;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
}
.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 {
color: #0f172a;
font-size: 13px;
font-weight: 850;
}
.profile-operation-row {
display: grid;
grid-template-columns: 88px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 9px 0;
border-top: 1px solid #e8eef5;
}
.profile-operation-row:first-child {
border-top: 0;
padding-top: 0;
}
.profile-operation-copy {
min-width: 0;
display: grid;
gap: 3px;
}
.profile-operation-status {
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;
transform: scale3d(0.94, 0.94, 1);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes expenseProfileDialogOut {
0% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
100% {
opacity: 0;
transform: scale3d(0.96, 0.96, 1);
}
}
@media (max-width: 860px) {
:global(.expense-profile-dialog.el-dialog) {
width: calc(100vw - 24px) !important;
}
.profile-summary-grid,
.profile-analysis-grid,
.profile-radar-layout {
grid-template-columns: 1fr;
}
.profile-dialog-content {
max-height: calc(100vh - 170px);
}
}
@media (max-width: 560px) {
.profile-dialog-header,
.profile-dialog-footer {
align-items: flex-start;
}
.profile-dialog-footer {
flex-direction: column;
}
.profile-operation-row {
grid-template-columns: 1fr;
align-items: start;
}
.profile-operation-status {
justify-self: start;
}
}
@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) {
animation-duration: 1ms !important;
}
}
</style>

View File

@@ -9,8 +9,7 @@
<article class="panel assistant-hero" :style="{ '--assistant-bg-image': `url(${homepageBackground})` }">
<div class="assistant-copy">
<h1>你的专属 <span>AI 财务助手</span></h1>
<p>智能理解财务业务提供数据洞察与方案建议高效处理日常事务</p>
<h1>{{ displayUserName }}我是您的 <span>AI 费用助手</span></h1>
<input
ref="fileInputRef"
@@ -92,10 +91,10 @@
</div>
</article>
<div class="capability-grid" aria-label="AI 财务助手能力">
<div :class="['capability-grid', capabilityGridClass]" aria-label="AI 财务助手能力">
<button
v-for="item in assistantCapabilities"
:key="item.title"
v-for="item in visibleAssistantCapabilities"
:key="item.key"
type="button"
class="capability-card panel"
:class="`capability-card--${item.tone}`"
@@ -226,7 +225,9 @@
<button
type="button"
class="detail-action"
@click="openPromptAssistant('查看我的费用画像详情,并总结 AI 使用、提单效率和预审通过率。')"
aria-haspopup="dialog"
:aria-expanded="expenseProfileModalOpen"
@click="openExpenseProfileModal"
>
<span>查看详情</span>
<i class="mdi mdi-chevron-right"></i>
@@ -255,12 +256,24 @@
</article>
</aside>
</div>
<ExpenseProfileDetailModal
:visible="expenseProfileModalOpen"
:user-name="displayUserName"
:metrics="expenseProfileModalMetrics"
:tags="expenseProfileTags"
:radar-dimensions="expenseProfileRadarDimensions"
:operations="expenseProfileOperations"
@close="closeExpenseProfileModal"
@explain="explainExpenseProfile"
/>
</section>
</template>
<script setup>
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import PanelHead from '../shared/PanelHead.vue'
import ExpenseProfileDetailModal from './ExpenseProfileDetailModal.vue'
import WorkbenchListIcon from '../shared/WorkbenchListIcon.vue'
import homepageBackground from '../../assets/homepage_backgraound.png'
import { useSystemState } from '../../composables/useSystemState.js'
@@ -268,6 +281,9 @@ import { useToast } from '../../composables/useToast.js'
import {
assistantCapabilities,
buildExpenseStatItems,
expenseProfileOperations,
expenseProfileRadarDimensions,
expenseProfileTags,
progressItems,
progressSteps,
quickPromptItems,
@@ -296,15 +312,45 @@ const selectedFiles = ref([])
const pendingAction = ref('')
const latestExpenseConversation = ref(null)
const hasLocalExpenseSnapshot = ref(false)
const expenseProfileModalOpen = ref(false)
const MAX_ATTACHMENTS = 10
const SESSION_TYPE_EXPENSE = 'expense'
const SESSION_TYPE_KNOWLEDGE = 'knowledge'
const FINANCIAL_CAPABILITY_KEYS = new Set(['budget-planning', 'finance-analysis'])
const FINANCIAL_CAPABILITY_ROLE_CODES = new Set(['budget_monitor', 'executive', 'admin'])
const FINANCIAL_CAPABILITY_ROLE_LABELS = new Set(['预算监控员', '高级财务人员', '管理员'])
const hasExpenseConversation = computed(() =>
Boolean(latestExpenseConversation.value?.conversation_id || latestExpenseConversation.value?.conversationId)
|| hasLocalExpenseSnapshot.value
)
const displayUserName = computed(() => {
const user = currentUser.value || {}
return String(user.name || user.username || '同事').trim() || '同事'
})
const expenseActionLabel = computed(() => (hasExpenseConversation.value ? '继续报销' : '新建报销'))
const currentRoleCodes = computed(() => {
const user = currentUser.value || {}
const rawCodes = Array.isArray(user.roleCodes)
? user.roleCodes
: Array.isArray(user.role_codes)
? user.role_codes
: []
return new Set(rawCodes.map((code) => String(code || '').trim().toLowerCase()).filter(Boolean))
})
const canViewFinancialCapabilities = computed(() => {
const user = currentUser.value || {}
const roleLabel = String(user.role || '').trim()
return Boolean(user.isAdmin)
|| FINANCIAL_CAPABILITY_ROLE_LABELS.has(roleLabel)
|| Array.from(currentRoleCodes.value).some((code) => FINANCIAL_CAPABILITY_ROLE_CODES.has(code))
})
const visibleAssistantCapabilities = computed(() =>
assistantCapabilities.filter((item) => canViewFinancialCapabilities.value || !FINANCIAL_CAPABILITY_KEYS.has(item.key))
)
const capabilityGridClass = computed(() =>
canViewFinancialCapabilities.value ? 'capability-grid--privileged' : 'capability-grid--standard'
)
const expenseStatItems = computed(() => buildExpenseStatItems(props.workbenchSummary))
const visibleExpenseStatItems = computed(() => {
const preferredKeys = ['monthly-amount', 'monthly-count', 'in-review', 'pending-payment']
@@ -318,6 +364,12 @@ const visibleUsageProfileMetrics = computed(() => {
.map((key) => usageProfileMetrics.find((item) => item.key === key))
.filter(Boolean)
})
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)
})
const visibleTodoItems = computed(() => todoItems.slice(0, 5))
const visibleProgressItems = computed(() => progressItems.slice(0, 5))
const todoAlertCount = computed(() => visibleTodoItems.value.length)
@@ -417,6 +469,19 @@ function openPromptAssistant(prompt) {
})
}
function openExpenseProfileModal() {
expenseProfileModalOpen.value = true
}
function closeExpenseProfileModal() {
expenseProfileModalOpen.value = false
}
function explainExpenseProfile() {
closeExpenseProfileModal()
openPromptAssistant('请根据我的费用画像标签、行为雷达和最近 5 次操作,解释我的费用使用特点和可以优化的地方。')
}
function handleWorkbenchEnter(event) {
if (event.isComposing) {
return