Merge branch 'release/test' of http://8.163.30.128:10082/html/client-web into release/test

This commit is contained in:
2026-08-13 09:48:52 +08:00
13 changed files with 271 additions and 8 deletions
@@ -0,0 +1,58 @@
import { apiRequest } from '@/api/http'
import type { NotificationDetail, NotificationPage, NotificationQuery, NotificationStatus, NotificationSummary } from '../contracts'
/**
* The authenticated merchant session supplies the enterprise and member scope.
* No caller may provide tenant, customer, merchant, or user identifiers.
*/
interface NotificationWire {
id: string
title: string
category: string
sentAt: string
readAt?: string | null
status: NotificationStatus
body?: string
sourceType?: string | null
sourceId?: string | null
}
interface NotificationPageWire {
records: NotificationWire[]
total: number
page: number
size: number
pages: number
}
function mapSummary(item: NotificationWire): NotificationSummary {
return { id: String(item.id), title: item.title, summary: item.body ? item.body.slice(0, 120) : '', type: item.category, sentAt: item.sentAt, status: item.status }
}
export async function getMyNotifications(query: NotificationQuery = {}): Promise<NotificationPage> {
const response = await apiRequest<NotificationPageWire>({
method: 'GET',
url: '/merchant/v1/notifications',
params: { page: query.page, size: query.size, status: query.status, category: query.type },
})
const records = response.records.map(mapSummary)
return { records, total: response.total, page: response.page, size: response.size, pages: response.pages }
}
export async function getMyNotification(id: string): Promise<NotificationDetail> {
const response = await apiRequest<NotificationWire>({ method: 'GET', url: `/merchant/v1/notifications/${encodeURIComponent(id)}` })
return { ...mapSummary(response), content: response.body ?? '' }
}
export async function markMyNotificationRead(id: string): Promise<void> {
await apiRequest<NotificationWire>({ method: 'PUT', url: `/merchant/v1/notifications/${encodeURIComponent(id)}/read` })
}
export async function markAllMyNotificationsRead(): Promise<void> {
await apiRequest<{ updatedCount: number }>({ method: 'PUT', url: '/merchant/v1/notifications/read-all' })
}
export async function getMyUnreadNotificationCount(): Promise<number> {
const response = await apiRequest<{ unreadCount: number }>({ method: 'GET', url: '/merchant/v1/notifications/unread-count' })
return response.unreadCount
}
+30
View File
@@ -0,0 +1,30 @@
export type NotificationStatus = 'UNREAD' | 'READ'
export type NotificationType = string
export interface NotificationSummary {
id: string
title: string
summary: string
type: NotificationType
sentAt: string
status: NotificationStatus
}
export interface NotificationDetail extends NotificationSummary {
content: string
}
export interface NotificationQuery {
status?: NotificationStatus
type?: NotificationType
page?: number
size?: number
}
export interface NotificationPage {
records: NotificationSummary[]
total: number
page: number
size: number
pages: number
}
@@ -0,0 +1,38 @@
import assert from 'node:assert/strict'
import { readFile } from 'node:fs/promises'
import test from 'node:test'
const moduleRoot = new URL('./', import.meta.url)
test('activates message-center routes with the frozen merchant permission', async () => {
const source = await readFile(new URL('routes.ts', moduleRoot), 'utf8')
assert.match(source, /name: 'notifications-list'[\s\S]*release: 'active'/)
assert.match(source, /name: 'notification-detail'[\s\S]*release: 'active'/)
assert.match(source, /merchant:notification:view/)
})
test('does not accept browser-selected customer or user scope in the API boundary', async () => {
const source = await readFile(new URL('api/notifications.ts', moduleRoot), 'utf8')
assert.doesNotMatch(source, /tenantId|customerId|merchantId|userId/)
assert.match(source, /merchant\/v1\/notifications/)
assert.match(source, /unread-count/)
assert.match(source, /notifications\/\$\{encodeURIComponent\(id\)\}/)
assert.match(source, /notifications\/\$\{encodeURIComponent\(id\)\}\/read/)
assert.match(source, /read-all/)
assert.match(source, /category: query\.type/)
assert.match(source, /method: 'PUT'/)
assert.doesNotMatch(source, /method: 'POST'/)
})
test('keeps customer message actions first and covers the requested local states', async () => {
const source = await readFile(new URL('views/NotificationsView.vue', moduleRoot), 'utf8')
const operationColumn = source.indexOf('label="操作"')
const titleColumn = source.indexOf('label="消息标题"')
assert.ok(operationColumn >= 0 && operationColumn < titleColumn)
assert.match(source, /全部标为已读/)
assert.match(source, /标为已读/)
assert.match(source, /state-panel--error/)
assert.match(source, /暂无消息/)
assert.doesNotMatch(source, /清空已读|删除消息/)
assert.match(source, /Promise\.all\(\[load\(\), notifications\.refreshUnreadCount\(\)\]\)/)
})
+2
View File
@@ -0,0 +1,2 @@
export { useNotificationsStore } from './store/notifications'
+24
View File
@@ -0,0 +1,24 @@
import { Bell } from '@lucide/vue'
import type { ClientModuleManifest } from '../types.ts'
export const notificationsModule = {
key: 'notifications',
navigationGroup: { title: '消息中心', icon: Bell },
routes: [
{
path: 'notifications',
name: 'notifications-list',
component: () => import('./views/NotificationsView.vue'),
release: 'active',
meta: { title: '我的消息', description: '查看本企业成员可见的站内消息', permission: 'merchant:notification:view' },
navigation: { key: 'notifications-list', title: '我的消息', icon: Bell },
},
{
path: 'notifications/:notificationId',
name: 'notification-detail',
component: () => import('./views/NotificationDetailView.vue'),
release: 'active',
meta: { title: '消息详情', description: '查看消息正文', permission: 'merchant:notification:view', keepAlive: false },
},
],
} satisfies ClientModuleManifest
@@ -0,0 +1,27 @@
import { computed, ref } from 'vue'
import { defineStore } from 'pinia'
import { getMyUnreadNotificationCount } from '../api/notifications'
export const useNotificationsStore = defineStore('client-notifications', () => {
const unreadCount = ref<number | null>(null)
const loading = ref(false)
const errorMessage = ref('')
const hasUnread = computed(() => (unreadCount.value ?? 0) > 0)
async function refreshUnreadCount() {
loading.value = true
errorMessage.value = ''
try {
unreadCount.value = await getMyUnreadNotificationCount()
} catch (error) {
unreadCount.value = null
errorMessage.value = error instanceof Error ? error.message : '未读数量加载失败'
} finally {
loading.value = false
}
}
return { unreadCount, hasUnread, loading, errorMessage, refreshUnreadCount }
})
@@ -0,0 +1,14 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, Bell, RefreshCcw } from '@lucide/vue'
import { ApiError } from '@/api/http'
import { useNotificationsStore } from '../public'
import { getMyNotification, markMyNotificationRead } from '../api/notifications'
import type { NotificationDetail } from '../contracts'
const route = useRoute(); const router = useRouter(); const notifications = useNotificationsStore(); const detail = ref<NotificationDetail | null>(null); const loading = ref(false); const errorMessage = ref('')
async function load(){loading.value=true;errorMessage.value='';try{detail.value=await getMyNotification(String(route.params.notificationId));if(detail.value.status==='UNREAD'){await markMyNotificationRead(detail.value.id);detail.value={...detail.value,status:'READ'};await notifications.refreshUnreadCount()}}catch(error){errorMessage.value=error instanceof ApiError?error.message:'消息加载失败,请稍后重试'}finally{loading.value=false}}
onMounted(()=>{void load()})
</script>
<template><div class="notification-detail"><el-button link @click="router.push({ name: 'notifications-list' })"><ArrowLeft :size="16" />返回我的消息</el-button><header class="page-heading"><div><p class="eyebrow">消息详情</p><h1>{{ detail?.title || '消息详情' }}</h1></div><Bell :size="30" /></header><div v-if="errorMessage" class="state-panel state-panel--error" role="alert"><p>{{ errorMessage }}</p><el-button @click="load()"><RefreshCcw :size="15" />重试</el-button></div><article v-else v-loading="loading" class="content-card"><p class="meta">{{ detail?.sentAt }} · {{ detail?.type }}</p><p class="content">{{ detail?.content || '暂无消息内容' }}</p></article></div></template>
<style scoped>.notification-detail{display:flex;flex-direction:column;gap:16px}.page-heading{display:flex;justify-content:space-between;color:var(--navy)}.page-heading h1{margin:2px 0 5px;font-size:24px}.eyebrow{margin:0;color:var(--primary);font-size:11px;font-weight:700}.content-card{min-height:240px;padding:24px;border:1px solid var(--border);border-radius:8px;background:var(--surface,#fff)}.meta{color:var(--muted);font-size:12px}.content{white-space:pre-wrap;line-height:1.8;color:var(--navy)}.state-panel{display:flex;min-height:180px;align-items:center;justify-content:center;flex-direction:column;gap:12px}.state-panel--error{color:#b42318;background:#fff8f7;border:1px solid #f5c2bd;border-radius:6px}@media(max-width:720px){.content-card{padding:16px}.page-heading h1{font-size:21px}}</style>
@@ -0,0 +1,42 @@
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { Bell, RefreshCcw } from '@lucide/vue'
import { useRouter } from 'vue-router'
import { ApiError } from '@/api/http'
import { useNotificationsStore } from '../public'
import { getMyNotifications, markAllMyNotificationsRead, markMyNotificationRead } from '../api/notifications'
import type { NotificationPage, NotificationStatus, NotificationSummary, NotificationType } from '../contracts'
const router = useRouter()
const notifications = useNotificationsStore()
const loading = ref(false)
const errorMessage = ref('')
const page = ref<NotificationPage>({ records: [], total: 0, page: 1, size: 20, pages: 0 })
const filters = reactive<{ status?: NotificationStatus; type?: NotificationType }>({})
function messageOf(error: unknown) { return error instanceof ApiError ? error.message : '消息加载失败,请稍后重试' }
async function load(nextPage = page.value.page) {
loading.value = true; errorMessage.value = ''
try { page.value = await getMyNotifications({ ...filters, page: nextPage, size: page.value.size }) } catch (error) { errorMessage.value = messageOf(error); page.value = { records: [], total: 0, page: nextPage, size: 20, pages: 0 } } finally { loading.value = false }
}
async function markRead(row: NotificationSummary) { try { await markMyNotificationRead(row.id); await Promise.all([load(), notifications.refreshUnreadCount()]) } catch (error) { errorMessage.value = messageOf(error) } }
async function markAllRead() { try { await markAllMyNotificationsRead(); await Promise.all([load(), notifications.refreshUnreadCount()]) } catch (error) { errorMessage.value = messageOf(error) } }
function openDetail(row: NotificationSummary) { void router.push({ name: 'notification-detail', params: { notificationId: row.id } }) }
onMounted(() => { void Promise.all([load(), notifications.refreshUnreadCount()]) })
</script>
<template>
<div class="notification-page">
<header class="page-heading"><div><p class="eyebrow">消息中心</p><h1>我的消息</h1><p>仅显示当前登录企业和成员可见的站内消息。</p></div><Bell :size="34" stroke-width="1.5" aria-hidden="true" /></header>
<section class="content-card">
<form class="filter-bar" @submit.prevent="load(1)"><el-select v-model="filters.status" clearable placeholder="全部状态" aria-label="消息状态"><el-option label="未读" value="UNREAD" /><el-option label="已读" value="READ" /></el-select><el-input v-model="filters.type" clearable maxlength="64" placeholder="消息分类" aria-label="消息分类" /><el-button type="primary" native-type="submit" :loading="loading">查询</el-button><el-button :disabled="loading" @click="filters.status = undefined; filters.type = undefined; load(1)">重置</el-button><el-button class="mark-all" :disabled="loading" @click="markAllRead">全部标为已读</el-button></form>
<div v-if="errorMessage" class="state-panel state-panel--error" role="alert"><p>{{ errorMessage }}</p><el-button @click="load(page.page)"><RefreshCcw :size="15" />重试</el-button></div>
<el-table v-else v-loading="loading" :data="page.records" row-key="id" aria-label="我的消息列表"><el-table-column label="操作" width="150" fixed="left"><template #default="{ row }"><el-button link type="primary" @click="openDetail(row as NotificationSummary)">查看</el-button><el-button v-if="row.status === 'UNREAD'" link type="primary" @click="markRead(row as NotificationSummary)">标为已读</el-button></template></el-table-column><el-table-column prop="title" label="消息标题" min-width="180" /><el-table-column prop="summary" label="内容摘要" min-width="260" /><el-table-column prop="type" label="分类" width="140" /><el-table-column prop="sentAt" label="发送时间" width="180" /><el-table-column label="状态" width="90"><template #default="{ row }"><el-tag :type="row.status === 'UNREAD' ? 'danger' : 'info'">{{ row.status === 'UNREAD' ? '未读' : '已读' }}</el-tag></template></el-table-column><template #empty><div class="table-empty"><Bell :size="32" /><strong>暂无消息</strong><span>当前没有可查看的站内消息。</span></div></template></el-table>
<div v-if="!errorMessage && page.total > 0" class="pagination-row"><span>共 {{ page.total }} 条</span><el-pagination :current-page="page.page" :page-size="page.size" layout="prev, pager, next" :total="page.total" @current-change="load" /></div>
</section>
</div>
</template>
<style scoped>
.notification-page{display:flex;flex-direction:column;gap:16px}.page-heading{display:flex;justify-content:space-between;color:var(--navy)}.page-heading h1{margin:2px 0 5px;font-size:24px}.page-heading p:not(.eyebrow){margin:0;color:var(--muted);font-size:13px}.eyebrow{margin:0;color:var(--primary);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.content-card{padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface,#fff)}.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.mark-all{margin-left:auto}.state-panel{display:flex;min-height:180px;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center}.state-panel--error{color:#b42318;background:#fff8f7;border:1px solid #f5c2bd;border-radius:6px}.state-panel p{margin:0}.table-empty{display:flex;align-items:center;flex-direction:column;gap:8px;padding:42px 12px;color:var(--muted)}.table-empty strong{color:var(--navy)}.table-empty span{font-size:12px}.pagination-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;color:var(--muted);font-size:12px}@media(max-width:720px){.content-card{padding:12px}.mark-all{margin-left:0;width:100%}.filter-bar .el-select,.filter-bar>.el-button{flex:1}.pagination-row{align-items:flex-start;flex-direction:column}.page-heading h1{font-size:21px}}
</style>
+2
View File
@@ -7,6 +7,7 @@ import { orderManagementModule } from './order-management/routes.ts'
import { overseasWarehouseModule } from './overseas-warehouse/routes.ts'
import { systemModule } from './system/routes.ts'
import { tenantManagementModule } from './tenant-management/routes.ts'
import { notificationsModule } from './notifications/routes.ts'
import { getActiveWorkspaceRoutes, type ClientModuleManifest } from './types.ts'
export const clientModuleRegistry = [
@@ -18,6 +19,7 @@ export const clientModuleRegistry = [
financeModule,
tenantManagementModule,
accountModule,
notificationsModule,
systemModule,
] satisfies readonly ClientModuleManifest[]