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

feat(workbench): persist topbar notification state

Browse Source
This commit is contained in:
caoxiaozhu
2026-06-03 21:43:35 +08:00
parent b9826a1985
commit 75d5c178e1
15 changed files with 799 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
web/src/assets/styles/components/top-bar.css
View File

@@ -475,7 +475,9 @@
top: calc(100% + 8px);
right: 0;
z-index: 60;
width: min(380px, calc(100vw - 32px));
width: clamp(340px, 34vw, 420px);
max-width: calc(100vw - 24px);
max-height: min(520px, calc(100vh - 96px));
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
gap: 0;
@@ -509,6 +511,7 @@
.notification-head-brand {
min-width: 0;
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 10px;
@@ -658,7 +661,8 @@
.notification-list {
display: flex;
flex-direction: column;
max-height: 280px;
min-height: 0;
max-height: min(336px, calc(100vh - 226px));
overflow-x: hidden;
overflow-y: auto;
padding: 6px 0;
@@ -681,9 +685,9 @@
.notification-row {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 14px;
grid-template-columns: 34px minmax(0, 1fr) 16px;
align-items: center;
gap: 10px;
gap: 9px;
min-height: 0;
padding: 10px 14px;
border: 0;
@@ -714,8 +718,8 @@
}
.notification-type-icon {
width: 36px;
height: 36px;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid var(--theme-primary-light-6);
@@ -755,8 +759,7 @@
gap: 4px;
}
.notification-copy strong,
.notification-copy small {
.notification-copy strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -793,9 +796,14 @@
}
.notification-copy small {
display: -webkit-box;
overflow: hidden;
color: #475569;
font-size: 12px;
line-height: 1.4;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.notification-meta {
@@ -808,10 +816,22 @@
.notification-meta em,
.notification-meta time {
min-width: 0;
overflow: hidden;
color: #94a3b8;
font-size: 11px;
font-style: normal;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.notification-meta em {
flex: 1 1 auto;
}
.notification-meta time {
flex: 0 0 auto;
}
.notification-row-arrow {
@@ -1127,6 +1147,37 @@
gap: 10px;
}
.notification-popover {
position: fixed;
top: 72px;
right: 12px;
left: 12px;
width: auto;
max-width: none;
max-height: calc(100vh - 92px);
}
.notification-head {
align-items: flex-start;
padding: 11px 12px 9px;
}
.notification-head-actions {
gap: 2px;
}
.notification-clear-btn {
padding: 0 8px;
}
.notification-list {
max-height: calc(100vh - 218px);
}
.notification-row {
padding: 9px 12px;
}
.company-switcher {
flex: 1 1 auto;
max-width: none;
@@ -1171,6 +1222,41 @@
}
@media (max-width: 420px) {
.notification-popover {
top: 64px;
right: 8px;
left: 8px;
max-height: calc(100vh - 78px);
}
.notification-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
}
.notification-head-brand {
gap: 8px;
}
.notification-head-icon,
.notification-type-icon {
width: 30px;
height: 30px;
}
.notification-tabs {
padding: 0 10px;
}
.notification-row {
grid-template-columns: 30px minmax(0, 1fr);
gap: 8px;
}
.notification-row-arrow {
display: none;
}
.topbar.detail-mode {
gap: 6px;
padding: 8px 12px;

70
web/src/components/layout/TopBar.vue
View File

@@ -316,6 +316,7 @@
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useDocumentCenterInbox } from '../../composables/useDocumentCenterInbox.js'
import { useTopBarNotificationStates } from '../../composables/useTopBarNotificationStates.js'
import EnterpriseSelect from '../shared/EnterpriseSelect.vue'
const props = defineProps({
@@ -400,8 +401,6 @@ const eyebrowLabel = computed(() => (
|| (isChat.value ? 'Smart Finance Q&A' : 'Smart Expense Operations')
))
const displayCompanyName = computed(() => String(props.companyName || '远光软件股份有限公司').trim() || '远光软件股份有限公司')
const NOTIFICATION_READ_STORAGE_KEY = 'x-financial.topbar.notifications.read'
const NOTIFICATION_HIDDEN_STORAGE_KEY = 'x-financial.topbar.notifications.hidden'
const MAX_NOTIFICATION_ITEMS = 30
const {
markDocumentInboxRowRead,
@@ -412,46 +411,21 @@ const {
stopDocumentInboxPolling
} = useDocumentCenterInbox()
let documentInboxInitialRefreshTimer = null
const readNotificationIds = ref(readNotificationIdSet(NOTIFICATION_READ_STORAGE_KEY))
const hiddenNotificationIds = ref(readNotificationIdSet(NOTIFICATION_HIDDEN_STORAGE_KEY))
const notificationOpen = ref(false)
const {
readNotificationIds,
hideNotificationStates,
isNotificationHidden,
isNotificationRead,
loadNotificationStates,
markNotificationStateRead
} = useTopBarNotificationStates()
const notificationTab = ref('unread')
function readNotificationIdSet(storageKey) {
if (typeof window === 'undefined') {
return new Set()
}
try {
const parsed = JSON.parse(window.localStorage.getItem(storageKey) || '[]')
return new Set(Array.isArray(parsed) ? parsed.map((item) => String(item || '').trim()).filter(Boolean) : [])
} catch {
return new Set()
}
}
function writeNotificationIdSet(storageKey, values) {
if (typeof window === 'undefined') {
return
}
window.localStorage.setItem(storageKey, JSON.stringify(Array.from(values).filter(Boolean)))
}
function updateNotificationIdSet(targetRef, storageKey, updater) {
const next = updater(new Set(targetRef.value))
targetRef.value = next
writeNotificationIdSet(storageKey, next)
}
function normalizeNotificationId(value) {
return String(value || '').trim()
}
function isNotificationHidden(id) {
return hiddenNotificationIds.value.has(normalizeNotificationId(id))
}
function formatNotificationTime(value) {
const date = new Date(value)
if (!Number.isFinite(date.getTime())) {
@@ -492,6 +466,7 @@ const documentNotificationItems = computed(() =>
if (!id || isNotificationHidden(id)) {
return null
}
const unread = Boolean(row.isUnread) && !isNotificationRead(id)
return {
id,
@@ -500,10 +475,10 @@ const documentNotificationItems = computed(() =>
description: resolveDocumentNotificationDescription(row),
time: formatNotificationTime(row.updatedAt || row.createdAt),
category: row.sourceLabel || '单据中心',
tone: resolveDocumentNotificationTone(row),
unread: Boolean(row.isUnread),
tone: resolveDocumentNotificationTone({ ...row, isUnread: unread }),
unread,
icon: row.source === 'approval' ? 'mdi mdi-clipboard-text-clock-outline' : 'mdi mdi-file-document-outline',
badge: row.isUnread ? '新' : '',
badge: unread ? '新' : '',
target: {
type: 'document',
id: row.claimId,
@@ -593,13 +568,9 @@ function markNotificationRead(item) {
if (item.kind === 'document' && item.documentRow) {
markDocumentInboxRowRead(item.documentRow)
return
}
updateNotificationIdSet(readNotificationIds, NOTIFICATION_READ_STORAGE_KEY, (next) => {
next.add(item.id)
return next
})
void markNotificationStateRead(item)
}
function clearAllNotifications() {
@@ -616,10 +587,7 @@ function clearAllNotifications() {
markDocumentInboxRowsRead(documentRows)
}
updateNotificationIdSet(hiddenNotificationIds, NOTIFICATION_HIDDEN_STORAGE_KEY, (next) => {
currentItems.forEach((item) => next.add(item.id))
return next
})
void hideNotificationStates(currentItems)
notificationTab.value = 'unread'
}
@@ -827,12 +795,20 @@ watch(
(activeView, previousView) => {
if (activeView === 'workbench' && previousView !== 'workbench') {
clearDocumentInboxInitialRefreshTimer()
void loadNotificationStates()
void refreshDocumentInbox({ force: true })
}
}
)
watch(notificationOpen, (open) => {
if (open) {
void loadNotificationStates()
}
})
onMounted(() => {
void loadNotificationStates()
scheduleDocumentInboxInitialRefresh()
startDocumentInboxPolling()
})

163
web/src/composables/useTopBarNotificationStates.js Normal file
View File

@@ -0,0 +1,163 @@
import { ref } from 'vue'
import { fetchNotificationStates, patchNotificationStates } from '../services/notificationStates.js'
const NOTIFICATION_READ_STORAGE_KEY = 'x-financial.topbar.notifications.read'
const NOTIFICATION_HIDDEN_STORAGE_KEY = 'x-financial.topbar.notifications.hidden'
function normalizeNotificationId(value) {
return String(value || '').trim()
}
function readNotificationIdSet(storageKey) {
if (typeof window === 'undefined') {
return new Set()
}
try {
const parsed = JSON.parse(window.localStorage.getItem(storageKey) || '[]')
return new Set(Array.isArray(parsed) ? parsed.map(normalizeNotificationId).filter(Boolean) : [])
} catch {
return new Set()
}
}
function writeNotificationIdSet(storageKey, values) {
if (typeof window === 'undefined') {
return
}
window.localStorage.setItem(storageKey, JSON.stringify(Array.from(values).filter(Boolean)))
}
function mergeRemoteStateIntoSets(states, readIds, hiddenIds) {
for (const item of Array.isArray(states) ? states : []) {
const id = normalizeNotificationId(item?.notification_id || item?.notificationId)
if (!id) {
continue
}
if (item.read_at || item.readAt) {
readIds.add(id)
}
if (item.hidden_at || item.hiddenAt) {
hiddenIds.add(id)
}
}
}
function buildContext(item) {
const target = item?.target || {}
return {
kind: String(item?.kind || '').trim(),
category: String(item?.category || '').trim(),
target_type: String(target?.type || '').trim()
}
}
function buildPatch(item, flags) {
const notificationId = normalizeNotificationId(item?.id || item?.notification_id || item?.notificationId)
if (!notificationId) {
return null
}
return {
notification_id: notificationId,
read: Boolean(flags?.read),
hidden: Boolean(flags?.hidden),
context_json: buildContext(item)
}
}
export function useTopBarNotificationStates() {
const readNotificationIds = ref(readNotificationIdSet(NOTIFICATION_READ_STORAGE_KEY))
const hiddenNotificationIds = ref(readNotificationIdSet(NOTIFICATION_HIDDEN_STORAGE_KEY))
const notificationStateSyncing = ref(false)
const notificationStateError = ref('')
function persistLocalSets() {
writeNotificationIdSet(NOTIFICATION_READ_STORAGE_KEY, readNotificationIds.value)
writeNotificationIdSet(NOTIFICATION_HIDDEN_STORAGE_KEY, hiddenNotificationIds.value)
}
function applyLocalPatch(patch) {
if (!patch?.notification_id) {
return
}
if (patch.read) {
readNotificationIds.value.add(patch.notification_id)
}
if (patch.hidden) {
hiddenNotificationIds.value.add(patch.notification_id)
}
readNotificationIds.value = new Set(readNotificationIds.value)
hiddenNotificationIds.value = new Set(hiddenNotificationIds.value)
persistLocalSets()
}
function applyRemoteStates(states) {
const nextReadIds = new Set(readNotificationIds.value)
const nextHiddenIds = new Set(hiddenNotificationIds.value)
mergeRemoteStateIntoSets(states, nextReadIds, nextHiddenIds)
readNotificationIds.value = nextReadIds
hiddenNotificationIds.value = nextHiddenIds
persistLocalSets()
}
async function loadNotificationStates() {
notificationStateSyncing.value = true
notificationStateError.value = ''
try {
applyRemoteStates(await fetchNotificationStates())
} catch (error) {
notificationStateError.value = error?.message || '通知状态同步失败'
} finally {
notificationStateSyncing.value = false
}
}
async function syncNotificationPatches(patches) {
const normalizedPatches = (Array.isArray(patches) ? patches : []).filter(Boolean)
if (!normalizedPatches.length) {
return
}
normalizedPatches.forEach(applyLocalPatch)
notificationStateError.value = ''
try {
applyRemoteStates(await patchNotificationStates(normalizedPatches))
} catch (error) {
notificationStateError.value = error?.message || '通知状态同步失败'
}
}
function isNotificationHidden(id) {
return hiddenNotificationIds.value.has(normalizeNotificationId(id))
}
function isNotificationRead(id) {
return readNotificationIds.value.has(normalizeNotificationId(id))
}
function markNotificationStateRead(item) {
return syncNotificationPatches([buildPatch(item, { read: true })])
}
function hideNotificationStates(items) {
const patches = (Array.isArray(items) ? items : [])
.map((item) => buildPatch(item, { read: true, hidden: true }))
.filter(Boolean)
return syncNotificationPatches(patches)
}
return {
hiddenNotificationIds,
readNotificationIds,
notificationStateSyncing,
notificationStateError,
hideNotificationStates,
isNotificationHidden,
isNotificationRead,
loadNotificationStates,
markNotificationStateRead
}
}

38
web/src/services/notificationStates.js Normal file
View File

@@ -0,0 +1,38 @@
import { apiRequest } from './api.js'
function normalizeStateItem(item) {
const notificationId = String(item?.notification_id || item?.notificationId || '').trim()
if (!notificationId) {
return null
}
return {
notification_id: notificationId,
read: Boolean(item?.read),
hidden: Boolean(item?.hidden),
context_json: item?.context_json && typeof item.context_json === 'object'
? item.context_json
: {}
}
}
export async function fetchNotificationStates() {
const payload = await apiRequest('/notification-states')
return Array.isArray(payload?.states) ? payload.states : []
}
export async function patchNotificationStates(states = []) {
const normalizedStates = (Array.isArray(states) ? states : [])
.map(normalizeStateItem)
.filter(Boolean)
if (!normalizedStates.length) {
return []
}
const payload = await apiRequest('/notification-states', {
method: 'POST',
body: JSON.stringify({ states: normalizedStates })
})
return Array.isArray(payload?.states) ? payload.states : []
}