From 2c5f53ec003a52d8ea1865e58e1436edf1082021 Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Wed, 12 Aug 2026 18:50:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layouts/AppLayout.test.ts             | 13 ++-
 src/app/layouts/AppLayout.vue                 | 29 +++++--
 src/app/router/index.test.ts                  | 13 +++
 src/core/navigation/adminNavigation.test.ts   |  8 ++
 src/core/navigation/adminNavigation.ts        |  7 +-
 .../CustomerOverseasStorageFeePanel.vue       |  2 +-
 .../customers/overseasStorageFee.test.ts      | 16 ++++
 .../pages/OverseasStorageFeesView.vue         |  6 +-
 src/modules/iam/pages/RolesView.test.ts       | 10 +++
 src/modules/notifications/PROTOTYPE_MATRIX.md | 34 ++++----
 .../api/notificationCenter.test.ts            | 85 +++++++++++++++++++
 .../notifications/api/notificationCenter.ts   | 38 +++++++++
 .../components/ContractPendingNotice.vue      | 11 ---
 .../components/MessageComposerDialog.vue      | 82 ++++++++++++------
 .../components/TemplateEditorDialog.vue       | 65 +++++++-------
 .../notifications/notifications.test.ts       | 62 ++++++++++++++
 .../pages/MessageManagementView.vue           | 61 ++++---------
 .../pages/MessageTemplatesView.vue            | 47 +++-------
 .../notifications/pages/MyMessagesView.vue    | 53 +++---------
 src/modules/notifications/routes.ts           |  7 +-
 src/modules/notifications/types.ts            | 60 +++----------
 .../pages/OceanBookingDetailView.test.ts      |  6 ++
 .../pages/OceanBookingDetailView.vue          | 16 +++-
 src/modules/ocean-bookings/types.ts           |  2 +-
 .../locations/pages/LocationsView.test.ts     | 12 +++
 .../pallets/pages/PalletsView.test.ts         | 10 +++
 .../warehouses/pages/WarehousesView.test.ts   |  9 ++
 src/shared/components/DataTable.test.ts       | 26 +++++-
 src/shared/components/DataTable.vue           |  6 +-
 29 files changed, 513 insertions(+), 283 deletions(-)
 create mode 100644 src/modules/notifications/api/notificationCenter.test.ts
 create mode 100644 src/modules/notifications/api/notificationCenter.ts
 delete mode 100644 src/modules/notifications/components/ContractPendingNotice.vue
 create mode 100644 src/modules/notifications/notifications.test.ts

diff --git a/src/app/layouts/AppLayout.test.ts b/src/app/layouts/AppLayout.test.ts
index f7554da9..c740c98e 100644
--- a/src/app/layouts/AppLayout.test.ts
+++ b/src/app/layouts/AppLayout.test.ts
@@ -7,6 +7,9 @@ import { ElMessageBox } from 'element-plus'
 import { useAuthStore } from '@/core/auth/auth'
 import AppLayout from './AppLayout.vue'
 
+const { getUnreadCount } = vi.hoisted(() => ({ getUnreadCount: vi.fn() }))
+vi.mock('@/modules/notifications/api/notificationCenter', () => ({ getUnreadCount }))
+
 const CachedPage = defineComponent({
   setup() {
     const count = ref(0)
@@ -26,31 +29,35 @@ async function mountLayout(path = '/') {
   const auth = useAuthStore()
   auth.token = 'token'
   auth.user = { id: '1', name: '平台管理员', account: 'admin', roles: ['PLATFORM_ADMIN'] }
-  auth.permissions = ['platform:warehouse:list']
+  auth.permissions = ['platform:warehouse:list', 'platform:notification:view']
   const router = createRouter({
     history: createMemoryHistory(),
     routes: [
       { path: '/', name: 'home', component: { template: '<p>page</p>' }, meta: { requiresAuth: true, workspaceTab: false, keepAlive: false } },
       { path: '/customers', name: 'customers', component: CachedPage, meta: { title: '客户管理', showPageHeading: false, requiresAuth: true } },
       { path: '/warehouses', name: 'warehouses', component: { template: '<p>warehouses</p>' }, meta: { title: '仓库管理', requiresAuth: true } },
+      { path: '/notifications/mine', name: 'my-notifications', component: { template: '<p>messages</p>' }, meta: { title: '我的消息', requiresAuth: true } },
       { path: '/login', component: { template: '<p>login</p>' } },
     ],
   })
   await router.push(path)
   await router.isReady()
   const wrapper = mount(AppLayout, {
-    global: { plugins: [pinia, router], stubs: { AdminSidebarMenu: { template: '<nav />' }, WorkspaceTabs: { template: '<div class="workspace-tabs-stub" />' }, 'el-button': { emits: ['click'], template: '<button @click="$emit(\'click\')"><slot /></button>' } } },
+    global: { plugins: [pinia, router], stubs: { AdminSidebarMenu: { template: '<nav />' }, WorkspaceTabs: { template: '<div class="workspace-tabs-stub" />' }, 'el-dropdown': { template: '<div><slot /><slot name="dropdown" /></div>' }, 'el-dropdown-menu': { template: '<div><slot /></div>' }, 'el-dropdown-item': { emits: ['click'], template: '<button @click="$emit(\'click\')"><slot /></button>' }, 'el-button': { emits: ['click'], template: '<button @click="$emit(\'click\')"><slot /></button>' } } },
   })
   return { wrapper, router }
 }
 
 describe('AppLayout', () => {
-  beforeEach(() => vi.mocked(ElMessageBox.confirm).mockReset())
+  beforeEach(() => { vi.mocked(ElMessageBox.confirm).mockReset(); getUnreadCount.mockReset().mockResolvedValue(4) })
 
   it('shows the authenticated identity without a role preview switcher', async () => {
     const { wrapper } = await mountLayout()
     expect(wrapper.text()).toContain('登录身份：平台管理员（admin）')
     expect(wrapper.text()).not.toContain('权限预览')
+    await flushPromises()
+    expect(wrapper.get('[aria-label="消息中心，4 条未读"]').attributes('disabled')).toBeUndefined()
+    expect(wrapper.get('.notification-count').text()).toBe('4')
   })
 
   it('hides the shell heading when the route opts out', async () => {
diff --git a/src/app/layouts/AppLayout.vue b/src/app/layouts/AppLayout.vue
index 84f5f67a..52834104 100644
--- a/src/app/layouts/AppLayout.vue
+++ b/src/app/layouts/AppLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Bell, FileText, LogOut, Mail, Menu } from '@lucide/vue'
@@ -13,6 +13,7 @@ import { useAuthStore } from '@/core/auth/auth'
 import { useUnsavedWorkStore } from '@/core/unsaved-work/unsavedWork'
 import { canAccessWorkspaceRoute, workspaceRouteId, workspaceTabCandidate } from '@/core/workspace-tabs/routeWorkspace'
 import { MAX_CACHED_WORKSPACE_VIEWS, useWorkspaceTabsStore } from '@/core/workspace-tabs/workspaceTabs'
+import { getUnreadCount } from '@/modules/notifications/api/notificationCenter'
 
 const route = useRoute()
 const router = useRouter()
@@ -26,6 +27,8 @@ const pageTitle = computed(() => route.meta.title || '管理后台')
 const pageDescription = computed(() => route.meta.description || '')
 const showPageHeading = computed(() => route.meta.showPageHeading !== false)
 const menuCollapsed = computed(() => collapsed.value && !mobileMenuOpen.value)
+const unreadCount = ref<number | null>(null)
+const unreadLoading = ref(false)
 
 access.initializeAfterLogin()
 workspace.initialize(auth.user?.id || auth.user?.account || '')
@@ -92,6 +95,14 @@ function handleMenuToggle() {
   collapsed.value = !collapsed.value
 }
 
+async function loadUnreadCount() {
+  if (!access.can('platform:notification:view')) return
+  unreadLoading.value = true
+  try { unreadCount.value = await getUnreadCount() } catch { unreadCount.value = null } finally { unreadLoading.value = false }
+}
+
+function openNotificationPage(path: string) { void router.push(path) }
+
 watch(() => route.fullPath, () => {
   mobileMenuOpen.value = false
   syncCurrentRoute()
@@ -103,6 +114,8 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
   workspace.initialize(userId)
   void pruneInaccessibleTabs().then(syncCurrentRoute)
 })
+onMounted(() => { window.addEventListener('cc-notification-unread-changed', loadUnreadCount); void loadUnreadCount() })
+onBeforeUnmount(() => window.removeEventListener('cc-notification-unread-changed', loadUnreadCount))
 </script>
 
 <template>
@@ -129,14 +142,14 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
         ><Menu :size="22" /></button>
         <div v-if="showPageHeading" class="page-heading"><h1>{{ pageTitle }}</h1><p v-if="pageDescription">{{ pageDescription }}</p></div>
         <div class="header-user">
-          <el-dropdown disabled trigger="click" placement="bottom-end">
-            <button class="notification-trigger" type="button" aria-label="消息中心，后端契约待接入" disabled>
-              <Bell :size="18" /><span>消息中心</span><span class="notification-count">--</span>
+          <el-dropdown v-if="access.can('platform:notification:view')" trigger="click" placement="bottom-end">
+            <button class="notification-trigger" type="button" :aria-label="`消息中心，${unreadCount ?? '未知'} 条未读`">
+              <Bell :size="18" /><span>消息中心</span><span class="notification-count">{{ unreadLoading ? '…' : unreadCount ?? '!' }}</span>
             </button>
             <template #dropdown><el-dropdown-menu>
-              <el-dropdown-item disabled><Mail :size="15" />消息管理</el-dropdown-item>
-              <el-dropdown-item disabled><FileText :size="15" />模板管理</el-dropdown-item>
-              <el-dropdown-item disabled><Bell :size="15" />我的消息</el-dropdown-item>
+              <el-dropdown-item v-if="access.can('platform:notification:task:list')" @click="openNotificationPage('/notifications/messages')"><Mail :size="15" />消息管理</el-dropdown-item>
+              <el-dropdown-item v-if="access.can('platform:notification:template:list')" @click="openNotificationPage('/notifications/templates')"><FileText :size="15" />模板管理</el-dropdown-item>
+              <el-dropdown-item @click="openNotificationPage('/notifications/mine')"><Bell :size="15" />我的消息</el-dropdown-item>
             </el-dropdown-menu></template>
           </el-dropdown>
           <div class="user-avatar">{{ auth.user?.name.slice(0, 1) }}</div>
@@ -164,7 +177,7 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
 <style scoped>
 .app-header--without-page-heading .header-user { margin-left: auto; }
 .notification-trigger { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: var(--cc-muted); font: inherit; }
-.notification-trigger:disabled { cursor: not-allowed; opacity: .72; }
+.notification-trigger { cursor: pointer; }
 .notification-count { display: inline-flex; min-width: 22px; height: 18px; align-items: center; justify-content: center; padding: 0 5px; border-radius: 9px; background: #e5e7eb; color: #64748b; font-size: 11px; font-weight: 700; }
 @media (max-width: 720px) { .notification-trigger > span:not(.notification-count) { display: none; } }
 </style>
diff --git a/src/app/router/index.test.ts b/src/app/router/index.test.ts
index d9012210..60ae20d2 100644
--- a/src/app/router/index.test.ts
+++ b/src/app/router/index.test.ts
@@ -89,6 +89,19 @@ describe('admin router access metadata', () => {
     expect(route?.meta.permission).toBe('platform:download:list')
   })
 
+  it('registers message-center routes with the frozen IAM permissions', () => {
+    const expected = [
+      ['notification-messages', '/notifications/messages', 'platform:notification:task:list'],
+      ['notification-templates', '/notifications/templates', 'platform:notification:template:list'],
+      ['my-notifications', '/notifications/mine', 'platform:notification:view'],
+    ]
+    for (const [name, path, permission] of expected) {
+      const route = router.getRoutes().find((item) => item.name === name)
+      expect(route?.path).toBe(path)
+      expect(route?.meta.permission).toBe(permission)
+    }
+  })
+
   it('redirects the removed enterprise review route to the protected customer list', () => {
     const route = router.getRoutes().find((item) => item.name === 'enterprise-reviews')
 
diff --git a/src/core/navigation/adminNavigation.test.ts b/src/core/navigation/adminNavigation.test.ts
index 68c90bac..701e6ab2 100644
--- a/src/core/navigation/adminNavigation.test.ts
+++ b/src/core/navigation/adminNavigation.test.ts
@@ -22,6 +22,7 @@ describe('adminNavigation', () => {
       '财务管理',
       '销售管理',
       '通用',
+      '消息中心',
       '系统管理',
     ])
     expect(adminNavigation.find((item) => item.key === 'customers')?.children?.map((item) => item.title)).toEqual([
@@ -71,6 +72,11 @@ describe('adminNavigation', () => {
       '车辆列表',
       '下载中心',
     ])
+    expect(adminNavigation.find((item) => item.key === 'notifications')?.children?.map((item) => item.title)).toEqual([
+      '消息管理',
+      '模板管理',
+      '我的消息',
+    ])
     expect(adminNavigation.find((item) => item.key === 'system')?.children?.map((item) => item.title)).toEqual([
       '用户管理',
       '角色权限',
@@ -91,6 +97,7 @@ describe('adminNavigation', () => {
     expect(paths).not.toContain('/inbounds')
     expect(paths).not.toContain('/first-leg-pricing/customer-rules')
     expect(paths).toContain('/downloads')
+    expect(paths).toEqual(expect.arrayContaining(['/notifications/messages', '/notifications/templates', '/notifications/mine']))
     expect(paths).toContain('/master-data/fee-items')
     expect(paths).toContain('/container-loading')
     expect(paths).toContain('/container-loading/smart-loading')
@@ -143,6 +150,7 @@ describe('adminNavigation', () => {
     const paths = getNavigationLeaves(filtered).map((item) => item.path)
     expect(paths).toContain('/system/permissions')
     expect(paths).not.toContain('/prototype/finance/profit-report')
+    expect(paths).not.toContain('/notifications/messages')
     expect(paths).not.toContain('/customers')
     expect(filtered.map((item) => item.title)).toEqual(['首页数据看板', '系统管理'])
     expect(filtered).not.toBe(adminNavigation)
diff --git a/src/core/navigation/adminNavigation.ts b/src/core/navigation/adminNavigation.ts
index 79d80b7c..47486e3f 100644
--- a/src/core/navigation/adminNavigation.ts
+++ b/src/core/navigation/adminNavigation.ts
@@ -185,11 +185,10 @@ export const adminNavigation: AdminNavigationNode[] = [
     key: 'notifications',
     title: '消息中心',
     icon: Bell,
-    hidden: true,
     children: [
-      { key: 'notification-messages', title: '消息管理', icon: Bell, path: '/notifications/messages' },
-      { key: 'notification-templates', title: '模板管理', icon: Bell, path: '/notifications/templates' },
-      { key: 'my-notifications', title: '我的消息', icon: Bell, path: '/notifications/mine' },
+      { key: 'notification-messages', title: '消息管理', icon: Bell, path: '/notifications/messages', permission: 'platform:notification:task:list' },
+      { key: 'notification-templates', title: '模板管理', icon: Bell, path: '/notifications/templates', permission: 'platform:notification:template:list' },
+      { key: 'my-notifications', title: '我的消息', icon: Bell, path: '/notifications/mine', permission: 'platform:notification:view' },
     ],
   },
   {
diff --git a/src/modules/customers/CustomerOverseasStorageFeePanel.vue b/src/modules/customers/CustomerOverseasStorageFeePanel.vue
index 0cd94b24..9c89c636 100644
--- a/src/modules/customers/CustomerOverseasStorageFeePanel.vue
+++ b/src/modules/customers/CustomerOverseasStorageFeePanel.vue
@@ -79,7 +79,7 @@ onMounted(load)
     </template>
     <div v-else class="fee-empty">当前客户暂无海外仓费用配置</div>
     <AppDialog v-model="visible" title="编辑海外仓费用" width="min(1120px, calc(100vw - 28px))" :confirm-loading="saving" :show-cancel="false" @confirm="save">
-      <el-form ref="formRef" :model="form" label-position="top"><el-form-item label="币种"><el-select v-model="form.currency" style="width:180px"><el-option v-for="currency in currencies" :key="currency" :label="currency" :value="currency" /></el-select></el-form-item><div class="edit-groups"><div v-for="(group, groupIndex) in [storageTiers, returnTiers]" :key="groupIndex"><div class="edit-group-heading"><h3>{{ groupIndex === 0 ? '仓租（CBM/天）' : '退货仓储费（托/天）' }} · {{ group.length }}档</h3><el-button type="primary" plain size="small" :disabled="form.tiers.length >= 100" @click="addTier(groupIndex === 0 ? 'STORAGE' : 'RETURN_STORAGE')"><Plus :size="15" />新增阶梯</el-button></div><table><thead><tr><th>操作</th><th>开始天数</th><th>结束天数</th><th>价格</th></tr></thead><tbody><tr v-for="tier in group" :key="tier.id"><td><el-button link type="danger" :disabled="group.length <= 1" @click="removeTier(tier)"><Trash2 :size="15" />删除</el-button></td><td><el-input-number v-model="tier.startDay" :min="1" :max="36500" :controls="false" /></td><td><el-input-number v-if="tier.endDay !== null" v-model="tier.endDay" :min="1" :max="36500" :controls="false" /><span v-else>以上</span></td><td><el-input-number v-model="tier.unitPrice" :min="0" :precision="6" :controls="false" /></td></tr></tbody></table></div></div></el-form>
+      <el-form ref="formRef" :model="form" label-position="top"><el-form-item label="币种"><el-select v-model="form.currency" style="width:180px"><el-option v-for="currency in currencies" :key="currency" :label="currency" :value="currency" /></el-select></el-form-item><div class="edit-groups"><div v-for="(group, groupIndex) in [storageTiers, returnTiers]" :key="groupIndex"><div class="edit-group-heading"><h3>{{ groupIndex === 0 ? '仓租（CBM/天）' : '退货仓储费（托/天）' }} · {{ group.length }}档</h3><el-button type="primary" plain size="small" :disabled="form.tiers.length >= 100" @click="addTier(groupIndex === 0 ? 'STORAGE' : 'RETURN_STORAGE')"><Plus :size="15" />新增阶梯</el-button></div><table><thead><tr><th>操作</th><th>开始天数</th><th>结束天数</th><th>价格</th></tr></thead><tbody><tr v-for="tier in group" :key="tier.id"><td><el-button size="small" plain type="danger" :disabled="group.length <= 1" @click="removeTier(tier)"><Trash2 :size="15" />删除</el-button></td><td><el-input-number v-model="tier.startDay" :min="1" :max="36500" :controls="false" /></td><td><el-input-number v-if="tier.endDay !== null" v-model="tier.endDay" :min="1" :max="36500" :controls="false" /><span v-else>以上</span></td><td><el-input-number v-model="tier.unitPrice" :min="0" :precision="6" :controls="false" /></td></tr></tbody></table></div></div></el-form>
       <template #footer><div class="dialog-actions"><el-button :disabled="saving" @click="closeEditor">取消</el-button><el-button type="primary" :loading="saving" @click="save"><Save :size="16" />保存费用</el-button></div></template>
     </AppDialog>
   </section>
diff --git a/src/modules/customers/overseasStorageFee.test.ts b/src/modules/customers/overseasStorageFee.test.ts
index f2e35ae6..11a0164c 100644
--- a/src/modules/customers/overseasStorageFee.test.ts
+++ b/src/modules/customers/overseasStorageFee.test.ts
@@ -1,7 +1,12 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
 import { getCustomerOverseasStorageFees, updateCustomerOverseasStorageFees } from './overseasStorageFee'
 import { http } from '@/shared/api/http'
 
+const overseasListSource = readFileSync(resolve(process.cwd(), 'src/modules/customers/pages/OverseasStorageFeesView.vue'), 'utf8')
+const overseasPanelSource = readFileSync(resolve(process.cwd(), 'src/modules/customers/CustomerOverseasStorageFeePanel.vue'), 'utf8')
+
 vi.mock('@/shared/api/http', () => ({
   http: { get: vi.fn(), put: vi.fn() },
   unwrapApiResponse: <T>(response: { data: T }) => response.data,
@@ -12,6 +17,17 @@ const config = { id: 12, customerId: 9007199254740993n.toString(), customerName:
 describe('customer overseas storage fee api', () => {
   beforeEach(() => vi.clearAllMocks())
 
+  it('keeps overseas fee business actions as semantic buttons at narrow widths', () => {
+    expect(overseasListSource).toContain('border stripe')
+    expect(overseasListSource).toContain('size="small" plain type="primary"')
+    expect(overseasListSource).toContain('size="small" plain type="danger"')
+    expect(overseasListSource).toContain('<Pencil :size="15" />')
+    expect(overseasListSource).toContain('<Trash2 :size="15" />')
+    expect(overseasListSource).toContain('@media (max-width:720px)')
+    expect(overseasPanelSource).toContain('size="small" plain type="danger"')
+    expect(overseasPanelSource).toContain('@media (max-width:760px)')
+  })
+
   it('keeps customer ids as strings and uses the customer detail path', async () => {
     vi.mocked(http.get).mockResolvedValue({ data: config })
     const result = await getCustomerOverseasStorageFees(config.customerId)
diff --git a/src/modules/customers/pages/OverseasStorageFeesView.vue b/src/modules/customers/pages/OverseasStorageFeesView.vue
index 32574632..639eca45 100644
--- a/src/modules/customers/pages/OverseasStorageFeesView.vue
+++ b/src/modules/customers/pages/OverseasStorageFeesView.vue
@@ -70,8 +70,8 @@ onMounted(() => { void load() })
       <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" :fields="queryFields" ariaLabel="海外仓阶梯费用筛选" preference-key="overseas-storage-fees-query" @search="search" /></template>
       <template v-if="error" #state><section class="surface-panel error-state" role="alert"><div><strong>{{ error.message }}</strong><ApiErrorMeta :details="error" /></div><el-button type="primary" @click="load">重新加载</el-button></section></template>
     <section v-if="!error" class="surface-panel table-panel">
-      <DataTable v-model:page="page" v-model:page-size="size" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="overseas-storage-fees-table" row-key="id" empty-text="暂无海外仓阶梯费用配置" @update:page="load" @update:page-size="load">
-        <template #actions="{ row }"><el-button v-if="access.can('platform:customer:edit')" link type="primary" @click="openEdit(row as OverseasStorageFeeConfig)"><Pencil :size="15" />编辑</el-button></template>
+      <DataTable v-model:page="page" v-model:page-size="size" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="overseas-storage-fees-table" row-key="id" border stripe empty-text="暂无海外仓阶梯费用配置" @update:page="load" @update:page-size="load">
+        <template #actions="{ row }"><el-button v-if="access.can('platform:customer:edit')" size="small" plain type="primary" @click="openEdit(row as OverseasStorageFeeConfig)"><Pencil :size="15" />编辑</el-button></template>
         <template #storage="{ row }"><div class="tier-list"><div v-for="tier in tiersFor(row as OverseasStorageFeeConfig, 'STORAGE')" :key="tier.id" class="tier-item"><span>{{ label(tier) }}</span><strong>{{ tier.unitPrice }} {{ (row as OverseasStorageFeeConfig).currency }}</strong></div></div></template>
         <template #returnStorage="{ row }"><div class="tier-list"><div v-for="tier in tiersFor(row as OverseasStorageFeeConfig, 'RETURN_STORAGE')" :key="tier.id" class="tier-item"><span>{{ label(tier) }}</span><strong>{{ tier.unitPrice }} {{ (row as OverseasStorageFeeConfig).currency }}</strong></div></div></template>
         <template #pagination-left="{ total: tableTotal }"><span>共 {{ tableTotal }} 个客户</span></template>
@@ -79,7 +79,7 @@ onMounted(() => { void load() })
     </section>
     </ListPageLayout>
     <AppDialog v-model="dialogOpen" title="编辑海外仓阶梯费用" width="min(1120px, calc(100vw - 28px))" :confirm-loading="saving" @confirm="save">
-      <el-form label-position="top"><el-form-item label="币种"><el-select v-model="form.currency" style="width:180px"><el-option label="USD" value="USD" /><el-option label="CNY" value="CNY" /><el-option label="EUR" value="EUR" /></el-select></el-form-item><div class="groups"><div v-for="(group, index) in [storageTiers, returnTiers]" :key="index"><div class="group-heading"><h3>{{ index === 0 ? '仓租（CBM/天）' : '退货仓储费（托/天）' }} · {{ group.length }}档</h3><el-button type="primary" plain size="small" :disabled="form.tiers.length >= 100" @click="addTier(index === 0 ? 'STORAGE' : 'RETURN_STORAGE')"><Plus :size="15" />新增阶梯</el-button></div><el-table :data="group" size="small"><el-table-column label="操作" width="88" fixed="left"><template #default="{ row }"><el-button link type="danger" :disabled="group.length <= 1" @click="removeTier(row as OverseasStorageFeeTier)"><Trash2 :size="15" />删除</el-button></template></el-table-column><el-table-column label="开始天数"><template #default="{ row }"><el-input-number v-model="row.startDay" :min="1" :max="36500" :controls="false" /></template></el-table-column><el-table-column label="结束天数"><template #default="{ row }"><el-input-number v-if="row.endDay !== null" v-model="row.endDay" :min="1" :max="36500" :controls="false" /><span v-else>以上</span></template></el-table-column><el-table-column label="价格"><template #default="{ row }"><el-input-number v-model="row.unitPrice" :min="0" :precision="6" :controls="false" /></template></el-table-column></el-table></div></div></el-form>
+      <el-form label-position="top"><el-form-item label="币种"><el-select v-model="form.currency" style="width:180px"><el-option label="USD" value="USD" /><el-option label="CNY" value="CNY" /><el-option label="EUR" value="EUR" /></el-select></el-form-item><div class="groups"><div v-for="(group, index) in [storageTiers, returnTiers]" :key="index"><div class="group-heading"><h3>{{ index === 0 ? '仓租（CBM/天）' : '退货仓储费（托/天）' }} · {{ group.length }}档</h3><el-button type="primary" plain size="small" :disabled="form.tiers.length >= 100" @click="addTier(index === 0 ? 'STORAGE' : 'RETURN_STORAGE')"><Plus :size="15" />新增阶梯</el-button></div><el-table :data="group" size="small"><el-table-column label="操作" width="88" fixed="left"><template #default="{ row }"><el-button size="small" plain type="danger" :disabled="group.length <= 1" @click="removeTier(row as OverseasStorageFeeTier)"><Trash2 :size="15" />删除</el-button></template></el-table-column><el-table-column label="开始天数"><template #default="{ row }"><el-input-number v-model="row.startDay" :min="1" :max="36500" :controls="false" /></template></el-table-column><el-table-column label="结束天数"><template #default="{ row }"><el-input-number v-if="row.endDay !== null" v-model="row.endDay" :min="1" :max="36500" :controls="false" /><span v-else>以上</span></template></el-table-column><el-table-column label="价格"><template #default="{ row }"><el-input-number v-model="row.unitPrice" :min="0" :precision="6" :controls="false" /></template></el-table-column></el-table></div></div></el-form>
     </AppDialog>
   </div>
   </AdminPage>
diff --git a/src/modules/iam/pages/RolesView.test.ts b/src/modules/iam/pages/RolesView.test.ts
index 10a1a56a..d40fe53e 100644
--- a/src/modules/iam/pages/RolesView.test.ts
+++ b/src/modules/iam/pages/RolesView.test.ts
@@ -72,6 +72,16 @@ function mountView(pinia = createPinia()) {
 }
 
 describe('RolesView', () => {
+  it('uses bordered striped tables and semantic role operation buttons', () => {
+    expect(rolesSource).toContain('border stripe')
+    expect(rolesSource).toContain('size="small" plain type="primary"')
+    expect(rolesSource).toContain('size="small" plain :type=')
+    expect(rolesSource).toContain('size="small" plain type="danger"')
+    expect(rolesSource).toContain('<Pencil :size="15" />')
+    expect(rolesSource).toContain('<Power :size="15" />')
+    expect(rolesSource).toContain('<Trash2 :size="15" />')
+    expect(rolesSource).toContain('@media (max-width: 720px)')
+  })
   beforeEach(() => {
     setActivePinia(createPinia())
     vi.mocked(listPlatformRoles).mockReset()
diff --git a/src/modules/notifications/PROTOTYPE_MATRIX.md b/src/modules/notifications/PROTOTYPE_MATRIX.md
index 7a1896e0..d51500cd 100644
--- a/src/modules/notifications/PROTOTYPE_MATRIX.md
+++ b/src/modules/notifications/PROTOTYPE_MATRIX.md
@@ -1,20 +1,22 @@
 # Admin 消息中心原型核对矩阵
 
-事实来源：`docs/悦/货代SAAS平台后台/货代SaaS平台原型.html`。本矩阵只记录原型已经明确的承载方式；后端契约与权限码尚未冻结，本模块当前不请求接口、不保存本地业务数据、不模拟操作成功。
+原型事实来源：`docs/悦/货代SAAS平台后台/货代SaaS平台原型.html`。接口事实来源：`iam/src/main/resources/openapi/notification-v1.yaml`。当前实现仅支持站内信，不扩展微信、邮件或短信渠道。
 
-| 页面 | 操作 | 原型证据 | 原型承载方式 | 原型尺寸/布局 | 当前骨架 | 结论 |
-|---|---|---|---|---|---|---|
-| 消息管理 | 列表/查询 | `page-msg-manage`，6040-6049 行 | 页面内表格 | 类型、状态、标题/内容筛选；新建与导出位于表格工具栏 | 正式路由 `/notifications/messages`，查询栏 + 空表格 | 按项目列表规范还原；操作列移至第一列 |
-| 消息管理 | 新建消息 | `modal-msg-create`，9229-9243 行；`showMsgCreate`，14661 行 | 居中弹框 | 最大宽度约 680px；基础信息、接收对象、定时发送；底部取消/草稿/立即发送 | 680px `AppDialog`，仅站内信，提交按钮禁用 | 保留原型承载；真实接收对象、草稿及发送等待契约 |
-| 消息管理 | 立即/定时发送 | `sendMsg`，14678 行；定时控件 9241 行 | 新建消息弹框内 | 定时开关 + 日期时间；立即发送按钮 | 控件可核对，提交禁用 | 等待发送命令、幂等及定时规则契约 |
-| 消息管理 | 草稿 | `saveMsgAsDraft`，14697 行 | 新建消息弹框内 | 独立“存为草稿”按钮 | 按钮保留但禁用 | 等待草稿创建/更新契约 |
-| 消息管理 | 详情 | `renderMsgManage`，14588 行仅有“详情”按钮 | 未定义 | 未定义 | 列表操作边界预留，不创建容器 | 待产品确认弹框/抽屉/独立页面 |
-| 消息管理 | 发送统计 | 表格“已读/总数”列，6048 行 | 未定义 | 仅有聚合列，无统计操作或详情容器 | 统计列预留 | 等待统计字段和承载方式确认 |
-| 模板管理 | 列表/查询 | `page-msg-template`，6052-6060 行 | 页面内表格 | CODE、内容筛选；新增/导入/导出位于表格工具栏 | 正式路由 `/notifications/templates`，查询栏 + 空表格 | 操作列移至第一列；导入导出因契约缺失禁用 |
-| 模板管理 | 新增模板 | `modal-msg-template-create`，9246-9274 行 | 居中弹框 | 最大宽度约 760px；变量快捷插入、字符计数、内容预览 | 760px `AppDialog`；只保留站内系统模板 | 保留原型承载，不扩展微信/邮件/短信真实渠道 |
-| 模板管理 | 编辑模板 | `renderMsgTemplate`，14594 行仅有“编辑”按钮 | 未定义 | 未定义 | 列表操作边界预留，不复用新增弹框作推断 | 待产品确认承载方式与不可变字段规则 |
-| 我的消息 | 列表/查询 | `page-msg-my`，6063-6071 行 | 页面内表格 | 状态、类型筛选；全部已读/清空已读位于表格工具栏 | 正式路由 `/notifications/mine`，查询栏 + 空表格 | 操作列移至第一列；批量操作禁用 |
-| 我的消息 | 查看 | `renderMsgMy`，14656 行仅有“查看”按钮 | 未定义 | 未定义 | 列表操作边界预留，不创建容器 | 待产品确认承载方式 |
-| 我的消息 | 标为已读/清空 | 6064、14656 行 | 列表按钮 | 单条、全部标为已读及清空已读 | 按钮预留并禁用 | 等待读状态、批量命令与删除语义契约 |
-| 顶部入口 | 未读入口/三页跳转 | `topMessageMenu`，838-847 行 | 顶部下拉菜单 | 铃铛、“消息中心”、未读徽标；消息管理/模板管理/我的消息三项 | 顶部下拉骨架，未读显示“--”，菜单禁用 | 等待未读汇总接口及页面权限码后启用 |
+| 页面 | 操作 | 原型承载方式 | 当前实现 | 契约差异与结论 |
+|---|---|---|---|---|
+| 消息管理 | 列表/查询 | `page-msg-manage` 页面内表格 | `/notifications/messages` 展示通知任务，支持任务号/标题、分类、状态查询；操作列固定第一列 | 冻结契约只提供任务列表，未提供按消息正文管理的列表；按任务 DTO 展示任务号、接收人数、定时/发送时间与状态 |
+| 消息管理 | 新建消息 | `modal-msg-create`，约 680px 居中弹框 | 680px `AppDialog`；选择激活模板、平台员工/指定企业范围、接收对象、模板变量 | `tenantId` 仅在适配边界作为兼容字段；页面统一使用“企业/客户”文案 |
+| 消息管理 | 立即/定时发送 | 新建消息弹框内 | 调用 `POST /platform/v1/notifications`；立即发送传 `scheduledAt=null`，定时发送传 ISO 时间；生成幂等键 | 契约已覆盖两种发送方式；仅创建任务，不静默模拟发送成功 |
+| 消息管理 | 草稿 | 新建消息弹框内“存为草稿” | 不展示 | 冻结契约没有消息草稿创建、更新或查询 API，不能提供伪草稿 |
+| 消息管理 | 取消/重试 | 原型未明确 | CREATED/SCHEDULED 可取消，RETRYING/DEAD 可重试 | 按冻结任务 API 与状态约束补充，分别受 `task:cancel`、`task:retry` 权限控制 |
+| 消息管理 | 详情/发送统计 | 原型仅有详情按钮和“已读/总数”聚合列，未定义容器 | 不展示操作或伪统计 | 冻结契约无任务详情、收件人明细、已读统计 API；待后端补充契约后再承载 |
+| 模板管理 | 列表/查询 | `page-msg-template` 页面内表格 | `/notifications/templates` 查询 CODE、分类、名称/标题、状态；操作列固定第一列 | 对接模板分页 API；原型导入/导出因无 API 不展示 |
+| 模板管理 | 新增模板 | `modal-msg-template-create`，约 760px 居中弹框 | 760px `AppDialog`；CODE、名称、分类、标题/正文、变量白名单、预览；保存为 DRAFT | 仅支持 `IN_APP`，不展示真实渠道选择 |
+| 模板管理 | 编辑模板 | 原型仅有编辑按钮，未定义容器 | 复用同尺寸模板弹框，仅 DRAFT 可编辑，CODE 不可变并携带 version | 冻结契约明确只允许编辑草稿，复用表单避免重复交互 |
+| 模板管理 | 状态流转 | 原型未定义 | DRAFT 可激活，ACTIVE 可禁用，DISABLED 无操作 | 严格执行 `DRAFT -> ACTIVE -> DISABLED`；禁用后不可恢复 |
+| 我的消息 | 列表/查询 | `page-msg-my` 页面内表格 | `/notifications/mine` 查询当前平台员工收件箱，支持状态、分类筛选；操作列固定第一列 | 使用 `platform` app，服务端从登录上下文隔离，不传企业 ID |
+| 我的消息 | 查看/标为已读 | 原型仅有查看按钮；支持单条和全部已读 | 680px 居中详情弹框；打开未读详情自动标记；支持单条和全部标为已读 | 对接 detail/read/read-all；变更后刷新顶部未读数 |
+| 我的消息 | 清空已读 | 原型列表按钮 | 不展示 | 首期没有删除或清空已读 API，不能展示可点击后报错的入口 |
+| 顶部入口 | 未读入口/三页跳转 | `topMessageMenu` 顶部下拉 | 有收件箱权限时加载真实未读数；按任务/模板权限展示管理入口，始终提供“我的消息” | 对接 `/platform/v1/notifications/unread-count`；加载失败显示异常标记并保留可访问入口 |
 
+接口依赖：所有响应经 `{code,data}` 解包；分页统一读取 `records/page/size/total/pages`；响应中的 `int64` ID 在前端保持字符串。写请求中的企业、用户和成员 ID 也在类型适配边界保持数字字符串，避免 JavaScript 大整数精度损失，由服务端 Long DTO 解析。
diff --git a/src/modules/notifications/api/notificationCenter.test.ts b/src/modules/notifications/api/notificationCenter.test.ts
new file mode 100644
index 00000000..4b4a5de3
--- /dev/null
+++ b/src/modules/notifications/api/notificationCenter.test.ts
@@ -0,0 +1,85 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { http } from '@/shared/api/http'
+import {
+  cancelTask,
+  changeTemplateStatus,
+  createNotification,
+  getInboxDetail,
+  getUnreadCount,
+  listInbox,
+  listTasks,
+  listTemplates,
+  markAllInboxRead,
+  markInboxRead,
+  retryTask,
+  updateTemplate,
+} from './notificationCenter'
+
+vi.mock('@/shared/api/http', () => ({
+  http: { get: vi.fn(), post: vi.fn(), put: vi.fn() },
+  unwrapApiResponse: <T>(response: { data: T }) => response.data,
+}))
+
+const envelope = <T>(data: T) => ({ code: '200', data })
+const inbox = { id: '9007199254740993', category: 'ORDER', title: '已发货', status: 'UNREAD' as const, sentAt: '2026-08-12T10:00:00Z', readAt: null }
+const template = { id: 12, templateCode: 'ORDER_SENT', templateName: '订单已发货', category: 'ORDER', channel: 'IN_APP' as const, titleTemplate: '已发货', bodyTemplate: '正文', variableWhitelist: [], status: 'DRAFT' as const, version: 1 }
+const task = { id: 13, taskNo: 'NT-13', category: 'ORDER', title: '已发货', status: 'CREATED' as const, recipientCount: 2, scheduledAt: null, sentAt: null, duplicated: false }
+
+describe('notificationCenter API', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('uses the platform inbox paths and normalizes envelope pagination and ids', async () => {
+    vi.mocked(http.get).mockResolvedValueOnce(envelope({ records: [inbox], page: '1', size: '20', total: '1', pages: '1' }))
+    const result = await listInbox({ page: 1, size: 20, status: 'UNREAD' })
+    expect(http.get).toHaveBeenCalledWith('/platform/v1/notifications', { params: { page: 1, size: 20, status: 'UNREAD' } })
+    expect(result).toMatchObject({ page: 1, size: 20, total: 1, pages: 1 })
+    expect(result.records[0]?.id).toBe(String(inbox.id))
+
+    vi.mocked(http.get).mockResolvedValueOnce(envelope({ unreadCount: '7' }))
+    expect(await getUnreadCount()).toBe(7)
+    expect(http.get).toHaveBeenLastCalledWith('/platform/v1/notifications/unread-count')
+  })
+
+  it('gets and marks inbox messages without a request body', async () => {
+    vi.mocked(http.get).mockResolvedValueOnce(envelope({ ...inbox, body: '正文', sourceType: null, sourceId: null }))
+    vi.mocked(http.put)
+      .mockResolvedValueOnce(envelope({ ...inbox, body: '正文', sourceType: null, sourceId: null }))
+      .mockResolvedValueOnce(envelope({ updatedCount: '3' }))
+    await getInboxDetail('10/20')
+    await markInboxRead('10/20')
+    expect(await markAllInboxRead()).toBe(3)
+    expect(http.get).toHaveBeenCalledWith('/platform/v1/notifications/10%2F20')
+    expect(http.put).toHaveBeenNthCalledWith(1, '/platform/v1/notifications/10%2F20/read')
+    expect(http.put).toHaveBeenNthCalledWith(2, '/platform/v1/notifications/read-all')
+  })
+
+  it('posts the frozen create-notification DTO unchanged', async () => {
+    vi.mocked(http.post).mockResolvedValueOnce(envelope(task))
+    const payload = { tenantId: '0', templateCode: 'ORDER_SENT', recipientType: 'PLATFORM_ROLE' as const, roleCode: 'PLATFORM_ADMIN', variables: {}, scheduledAt: null, idempotencyKey: 'notification-1' }
+    expect((await createNotification(payload)).id).toBe('13')
+    expect(http.post).toHaveBeenCalledWith('/platform/v1/notifications', payload)
+  })
+
+  it('uses template list, update, and one-way status paths', async () => {
+    vi.mocked(http.get).mockResolvedValueOnce(envelope({ records: [template], page: 1, size: 20, total: 1, pages: 1 }))
+    vi.mocked(http.put).mockResolvedValue(envelope(template))
+    await listTemplates({ page: 1, size: 20, status: 'DRAFT' })
+    const update = { templateName: '新名称', category: 'ORDER', titleTemplate: '标题', bodyTemplate: '正文', variableWhitelist: [], version: 1 }
+    await updateTemplate('12', update)
+    await changeTemplateStatus('12', 'ACTIVE', 1)
+    expect(http.get).toHaveBeenCalledWith('/platform/v1/notification-templates', { params: { page: 1, size: 20, status: 'DRAFT' } })
+    expect(http.put).toHaveBeenNthCalledWith(1, '/platform/v1/notification-templates/12', update)
+    expect(http.put).toHaveBeenNthCalledWith(2, '/platform/v1/notification-templates/12/status', { targetStatus: 'ACTIVE', version: 1 })
+  })
+
+  it('uses task list, cancel, and retry paths without request bodies', async () => {
+    vi.mocked(http.get).mockResolvedValueOnce(envelope({ records: [task], page: 1, size: 20, total: 1, pages: 1 }))
+    vi.mocked(http.put).mockResolvedValue(envelope(task))
+    await listTasks({ page: 1, size: 20, status: 'CREATED' })
+    await cancelTask('13')
+    await retryTask('13')
+    expect(http.get).toHaveBeenCalledWith('/platform/v1/notification-tasks', { params: { page: 1, size: 20, status: 'CREATED' } })
+    expect(http.put).toHaveBeenNthCalledWith(1, '/platform/v1/notification-tasks/13/cancel')
+    expect(http.put).toHaveBeenNthCalledWith(2, '/platform/v1/notification-tasks/13/retry')
+  })
+})
diff --git a/src/modules/notifications/api/notificationCenter.ts b/src/modules/notifications/api/notificationCenter.ts
new file mode 100644
index 00000000..4b71a4b8
--- /dev/null
+++ b/src/modules/notifications/api/notificationCenter.ts
@@ -0,0 +1,38 @@
+import { http, unwrapApiResponse, type ApiEnvelope } from '@/shared/api/http'
+import type { CreateNotificationRequest, CreateTemplateRequest, InboxDetail, InboxItem, InboxStatus, NotificationTask, NotificationTaskStatus, NotificationTemplate, PageResult, TemplateStatus, UpdateTemplateRequest } from '../types'
+
+type RawId = string | number
+type RawPage<T> = Omit<PageResult<T>, 'page' | 'size' | 'total' | 'pages'> & { page: RawId; size: RawId; total: RawId; pages: RawId }
+type RawInbox = Omit<InboxItem, 'id'> & { id: RawId }
+type RawInboxDetail = Omit<InboxDetail, 'id'> & { id: RawId }
+type RawTemplate = Omit<NotificationTemplate, 'id'> & { id: RawId }
+type RawTask = Omit<NotificationTask, 'id'> & { id: RawId }
+
+const inboxPath = '/platform/v1/notifications'
+const templatePath = '/platform/v1/notification-templates'
+const taskPath = '/platform/v1/notification-tasks'
+const id = (value: RawId) => String(value)
+const page = <T>(value: RawPage<T>): PageResult<T> => ({ ...value, page: Number(value.page), size: Number(value.size), total: Number(value.total), pages: Number(value.pages) })
+const inbox = (value: RawInbox): InboxItem => ({ ...value, id: id(value.id) })
+const inboxDetail = (value: RawInboxDetail): InboxDetail => ({ ...value, id: id(value.id) })
+const template = (value: RawTemplate): NotificationTemplate => ({ ...value, id: id(value.id) })
+const task = (value: RawTask): NotificationTask => ({ ...value, id: id(value.id) })
+
+export async function listInbox(query: { page: number; size: number; status?: InboxStatus; category?: string }) {
+  const response = await http.get<ApiEnvelope<RawPage<RawInbox>>, ApiEnvelope<RawPage<RawInbox>>>(inboxPath, { params: query })
+  const data = unwrapApiResponse(response)
+  return page({ ...data, records: data.records.map(inbox) })
+}
+export async function getUnreadCount() { const response = await http.get<ApiEnvelope<{ unreadCount: RawId }>, ApiEnvelope<{ unreadCount: RawId }>>(`${inboxPath}/unread-count`); return Number(unwrapApiResponse(response).unreadCount) }
+export async function getInboxDetail(messageId: string) { const response = await http.get<ApiEnvelope<RawInboxDetail>, ApiEnvelope<RawInboxDetail>>(`${inboxPath}/${encodeURIComponent(messageId)}`); return inboxDetail(unwrapApiResponse(response)) }
+export async function markInboxRead(messageId: string) { const response = await http.put<ApiEnvelope<RawInboxDetail>, ApiEnvelope<RawInboxDetail>>(`${inboxPath}/${encodeURIComponent(messageId)}/read`); return inboxDetail(unwrapApiResponse(response)) }
+export async function markAllInboxRead() { const response = await http.put<ApiEnvelope<{ updatedCount: RawId }>, ApiEnvelope<{ updatedCount: RawId }>>(`${inboxPath}/read-all`); return Number(unwrapApiResponse(response).updatedCount) }
+
+export async function createNotification(payload: CreateNotificationRequest) { const response = await http.post<ApiEnvelope<RawTask>, ApiEnvelope<RawTask>>(inboxPath, payload); return task(unwrapApiResponse(response)) }
+export async function listTemplates(query: { page: number; size: number; templateCode?: string; category?: string; title?: string; status?: TemplateStatus }) { const response = await http.get<ApiEnvelope<RawPage<RawTemplate>>, ApiEnvelope<RawPage<RawTemplate>>>(templatePath, { params: query }); const data = unwrapApiResponse(response); return page({ ...data, records: data.records.map(template) }) }
+export async function createTemplate(payload: CreateTemplateRequest) { const response = await http.post<ApiEnvelope<RawTemplate>, ApiEnvelope<RawTemplate>>(templatePath, payload); return template(unwrapApiResponse(response)) }
+export async function updateTemplate(templateId: string, payload: UpdateTemplateRequest) { const response = await http.put<ApiEnvelope<RawTemplate>, ApiEnvelope<RawTemplate>>(`${templatePath}/${encodeURIComponent(templateId)}`, payload); return template(unwrapApiResponse(response)) }
+export async function changeTemplateStatus(templateId: string, targetStatus: Exclude<TemplateStatus, 'DRAFT'>, version: number) { const response = await http.put<ApiEnvelope<RawTemplate>, ApiEnvelope<RawTemplate>>(`${templatePath}/${encodeURIComponent(templateId)}/status`, { targetStatus, version }); return template(unwrapApiResponse(response)) }
+export async function listTasks(query: { page: number; size: number; taskNo?: string; category?: string; title?: string; status?: NotificationTaskStatus }) { const response = await http.get<ApiEnvelope<RawPage<RawTask>>, ApiEnvelope<RawPage<RawTask>>>(taskPath, { params: query }); const data = unwrapApiResponse(response); return page({ ...data, records: data.records.map(task) }) }
+export async function cancelTask(taskId: string) { const response = await http.put<ApiEnvelope<RawTask>, ApiEnvelope<RawTask>>(`${taskPath}/${encodeURIComponent(taskId)}/cancel`); return task(unwrapApiResponse(response)) }
+export async function retryTask(taskId: string) { const response = await http.put<ApiEnvelope<RawTask>, ApiEnvelope<RawTask>>(`${taskPath}/${encodeURIComponent(taskId)}/retry`); return task(unwrapApiResponse(response)) }
diff --git a/src/modules/notifications/components/ContractPendingNotice.vue b/src/modules/notifications/components/ContractPendingNotice.vue
deleted file mode 100644
index 5fe7cd5c..00000000
--- a/src/modules/notifications/components/ContractPendingNotice.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <el-alert
-    title="消息中心后端契约与权限码尚未冻结"
-    type="info"
-    :closable="false"
-    show-icon
-  >
-    当前页面仅用于核对原型布局与交互承载。列表不会加载演示数据，写操作不会模拟成功。
-  </el-alert>
-</template>
-
diff --git a/src/modules/notifications/components/MessageComposerDialog.vue b/src/modules/notifications/components/MessageComposerDialog.vue
index 8af7a86d..d28207f4 100644
--- a/src/modules/notifications/components/MessageComposerDialog.vue
+++ b/src/modules/notifications/components/MessageComposerDialog.vue
@@ -1,41 +1,69 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
 import AppDialog from '@/shared/components/AppDialog.vue'
+import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import { PlatformTenantSelector } from '@/modules/iam'
+import { createNotification } from '../api/notificationCenter'
+import type { NotificationTemplate, RecipientType } from '../types'
+import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 
+const props = defineProps<{ templates: NotificationTemplate[] }>()
 const open = defineModel<boolean>({ default: false })
-const scheduled = ref(false)
-const form = reactive({ type: '系统通知', priority: '普通', title: '', content: '', target: '全部企业用户', receivers: '', scheduleAt: '' })
-const contractHint = computed(() => scheduled.value ? '定时发送规则与接口待后端契约冻结' : '草稿与立即发送接口待后端契约冻结')
+const emit = defineEmits<{ success: [] }>()
+const submitting = ref(false)
+const error = ref<ApiErrorDetails | null>(null)
+const scope = ref<'platform' | 'customer'>('platform')
+const recipientIdsText = ref('')
+const variables = reactive<Record<string, string>>({})
+const form = reactive({ tenantId: '0', templateCode: '', recipientType: 'PLATFORM_ROLE' as RecipientType, roleCode: '', scheduledAt: '' })
+const selectedTemplate = computed(() => props.templates.find((item) => item.templateCode === form.templateCode) ?? null)
+const scheduled = computed({ get: () => Boolean(form.scheduledAt), set: (value) => { if (!value) form.scheduledAt = '' } })
+const needsIds = computed(() => ['USER', 'MEMBERSHIP'].includes(form.recipientType))
+const needsRole = computed(() => ['TENANT_ROLE', 'PLATFORM_ROLE'].includes(form.recipientType))
+const allowedRecipients = computed(() => scope.value === 'platform'
+  ? [{ label: '指定平台用户', value: 'USER' }, { label: '平台角色', value: 'PLATFORM_ROLE' }]
+  : [{ label: '指定企业成员', value: 'MEMBERSHIP' }, { label: '企业角色', value: 'TENANT_ROLE' }, { label: '企业全部成员', value: 'TENANT_ALL' }])
+
+watch(scope, (value) => { form.tenantId = value === 'platform' ? '0' : ''; form.recipientType = value === 'platform' ? 'PLATFORM_ROLE' : 'TENANT_ALL'; form.roleCode = ''; recipientIdsText.value = '' })
+watch(selectedTemplate, (value) => { for (const key of Object.keys(variables)) delete variables[key]; for (const key of value?.variableWhitelist ?? []) variables[key] = '' })
+
+function reset() { scope.value = 'platform'; Object.assign(form, { tenantId: '0', templateCode: '', recipientType: 'PLATFORM_ROLE', roleCode: '', scheduledAt: '' }); recipientIdsText.value = ''; error.value = null; for (const key of Object.keys(variables)) delete variables[key] }
+function parseIds() { return [...new Set(recipientIdsText.value.split(/[\s,，]+/).map((value) => value.trim()).filter(Boolean))] }
+function idempotencyKey() { return typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : `notification-${Date.now()}-${Math.random().toString(36).slice(2)}` }
+async function submit() {
+  error.value = null
+  const recipientIds = parseIds()
+  if (!form.templateCode) return ElMessage.warning('请选择已激活模板')
+  if (scope.value === 'customer' && !form.tenantId) return ElMessage.warning('请选择目标企业')
+  if (needsIds.value && (!recipientIds.length || recipientIds.some((value) => !/^\d+$/.test(value)))) return ElMessage.warning('请输入有效的数字用户或成员 ID')
+  if (needsRole.value && !form.roleCode.trim()) return ElMessage.warning('请输入角色编码')
+  if (Object.values(variables).some((value) => !value.trim())) return ElMessage.warning('请填写全部模板变量')
+  submitting.value = true
+  try {
+    await createNotification({ tenantId: form.tenantId, templateCode: form.templateCode, recipientType: form.recipientType, ...(needsIds.value ? { recipientIds } : {}), ...(needsRole.value ? { roleCode: form.roleCode.trim() } : {}), variables: { ...variables }, scheduledAt: form.scheduledAt ? new Date(form.scheduledAt).toISOString() : null, idempotencyKey: idempotencyKey() })
+    ElMessage.success(form.scheduledAt ? '消息已定时' : '消息发送任务已创建')
+    open.value = false; reset(); emit('success')
+  } catch (reason) { error.value = getApiErrorDetails(reason, '消息发送失败') } finally { submitting.value = false }
+}
 </script>
 
 <template>
-  <AppDialog v-model="open" title="新建消息" width="min(680px, calc(100vw - 28px))" :show-confirm="false" destroy-on-close>
-    <el-alert :title="contractHint" type="info" :closable="false" show-icon />
+  <AppDialog v-model="open" title="新建消息" width="min(680px, calc(100vw - 28px))" :show-confirm="false" destroy-on-close @cancel="reset">
+    <el-alert v-if="error" type="error" :closable="false" show-icon><template #title><span>{{ error.message }}</span><ApiErrorMeta :details="error" /></template></el-alert>
     <el-form class="message-form" label-position="top">
-      <div class="form-grid">
-        <el-form-item label="消息类型" required><el-select v-model="form.type"><el-option label="系统通知" value="系统通知" /><el-option label="业务提醒" value="业务提醒" /><el-option label="异常告警" value="异常告警" /><el-option label="运单动态" value="运单动态" /></el-select></el-form-item>
-        <el-form-item label="优先级"><el-select v-model="form.priority"><el-option label="普通" value="普通" /><el-option label="重要" value="重要" /><el-option label="紧急" value="紧急" /></el-select></el-form-item>
-      </div>
-      <el-form-item label="消息标题" required><el-input v-model="form.title" placeholder="请输入消息标题" /></el-form-item>
-      <el-form-item label="消息内容" required><el-input v-model="form.content" type="textarea" :rows="5" placeholder="请输入消息内容" /></el-form-item>
-      <div class="form-grid">
-        <el-form-item label="接收对象" required><el-select v-model="form.target"><el-option label="全部企业用户" value="全部企业用户" /><el-option label="全部企业管理员" value="全部企业管理员" /><el-option label="全部平台操作员" value="全部平台操作员" /><el-option label="全部平台财务" value="全部平台财务" /><el-option label="指定用户" value="指定用户" /></el-select></el-form-item>
-        <el-form-item label="发送方式"><el-input model-value="站内信" disabled /></el-form-item>
-      </div>
-      <el-form-item v-if="form.target === '指定用户'" label="指定接收人"><el-input v-model="form.receivers" type="textarea" :rows="2" placeholder="接收人选择契约待确认" disabled /></el-form-item>
-      <el-form-item label="定时发送"><div class="schedule-row"><el-switch v-model="scheduled" aria-label="启用定时发送" /><span>启用</span><el-date-picker v-model="form.scheduleAt" type="datetime" placeholder="选择发送时间" :disabled="!scheduled" /></div></el-form-item>
+      <div class="form-grid"><el-form-item label="发送范围" required><el-segmented v-model="scope" :options="[{ label: '平台员工', value: 'platform' }, { label: '指定企业', value: 'customer' }]" /></el-form-item><el-form-item label="发送方式"><el-input model-value="站内信" disabled /></el-form-item></div>
+      <PlatformTenantSelector v-if="scope === 'customer'" v-model="form.tenantId" label="目标企业" />
+      <el-form-item label="消息模板" required><el-select v-model="form.templateCode" filterable placeholder="请选择已激活模板"><el-option v-for="item in templates" :key="item.id" :label="`${item.templateName}（${item.templateCode}）`" :value="item.templateCode" /></el-select></el-form-item>
+      <div class="form-grid"><el-form-item label="接收对象" required><el-select v-model="form.recipientType"><el-option v-for="item in allowedRecipients" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item><el-form-item v-if="needsRole" label="角色编码" required><el-input v-model="form.roleCode" maxlength="64" placeholder="请输入服务端角色编码" /></el-form-item></div>
+      <el-form-item v-if="needsIds" label="接收人 ID" required><el-input v-model="recipientIdsText" type="textarea" :rows="2" placeholder="多个数字 ID 使用逗号或换行分隔，最多 1000 个" /></el-form-item>
+      <section v-if="selectedTemplate?.variableWhitelist.length" class="variables"><strong>模板变量</strong><el-form-item v-for="key in selectedTemplate.variableWhitelist" :key="key" :label="key" required><el-input v-model="variables[key]" maxlength="2000" /></el-form-item></section>
+      <el-form-item label="定时发送"><div class="schedule-row"><el-switch v-model="scheduled" aria-label="启用定时发送" /><span>启用</span><el-date-picker v-model="form.scheduledAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="选择发送时间" :disabled="!scheduled" /></div></el-form-item>
     </el-form>
-    <template #footer="{ close }"><div class="dialog-actions"><el-button @click="close">取消</el-button><el-button disabled>存为草稿</el-button><el-button type="primary" disabled>{{ scheduled ? '确认定时发送' : '立即发送' }}</el-button></div></template>
+    <template #footer="{ close }"><div class="dialog-actions"><el-button :disabled="submitting" @click="close">取消</el-button><el-button type="primary" :loading="submitting" @click="submit">{{ scheduled ? '确认定时发送' : '立即发送' }}</el-button></div></template>
   </AppDialog>
 </template>
 
 <style scoped>
-.message-form { margin-top: 18px; }
-.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
-.form-grid :deep(.el-select), .schedule-row :deep(.el-date-editor) { width: 100%; }
-.schedule-row { display: grid; width: 100%; grid-template-columns: auto auto minmax(180px, 1fr); align-items: center; gap: 8px; }
-.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
-.dialog-actions :deep(.el-button) { margin-left: 0; }
-@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; gap: 0; } .schedule-row { grid-template-columns: auto 1fr; } .schedule-row :deep(.el-date-editor) { grid-column: 1 / -1; } }
+.message-form { margin-top: 18px; }.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.form-grid :deep(.el-select),.message-form > :deep(.el-form-item .el-select),.schedule-row :deep(.el-date-editor) { width: 100%; }.variables { margin-bottom: 16px; padding: 14px; border: 1px solid var(--cc-border); border-radius: 8px; }.variables > strong { display: block; margin-bottom: 12px; font-size: 13px; }.schedule-row { display:grid;width:100%;grid-template-columns:auto auto minmax(180px,1fr);align-items:center;gap:8px }.dialog-actions {display:flex;justify-content:flex-end;gap:10px}.dialog-actions :deep(.el-button){margin-left:0}@media(max-width:560px){.form-grid{grid-template-columns:1fr;gap:0}.schedule-row{grid-template-columns:auto 1fr}.schedule-row :deep(.el-date-editor){grid-column:1/-1}}
 </style>
-
diff --git a/src/modules/notifications/components/TemplateEditorDialog.vue b/src/modules/notifications/components/TemplateEditorDialog.vue
index 591b4422..630fdb30 100644
--- a/src/modules/notifications/components/TemplateEditorDialog.vue
+++ b/src/modules/notifications/components/TemplateEditorDialog.vue
@@ -1,50 +1,47 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
 import AppDialog from '@/shared/components/AppDialog.vue'
+import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
+import { createTemplate, updateTemplate } from '../api/notificationCenter'
+import type { NotificationTemplate } from '../types'
 
+const props = defineProps<{ template?: NotificationTemplate | null }>()
 const open = defineModel<boolean>({ default: false })
+const emit = defineEmits<{ success: [] }>()
+const submitting = ref(false)
+const error = ref<ApiErrorDetails | null>(null)
 const contentInput = ref<{ textarea?: HTMLTextAreaElement } | null>(null)
-const form = reactive({ code: '', title: '', content: '' })
-const variables = [{ label: '客户名称', value: 'customerName' }, { label: '订单号', value: 'orderNo' }, { label: '柜号', value: 'containerNo' }, { label: '金额', value: 'amount' }, { label: '日期', value: 'date' }]
-const preview = computed(() => form.title || form.content ? `[系统] ${form.title || '未填写标题'}\n${form.content || '未填写模板内容'}` : '填写标题和内容后，将在这里显示预览效果。')
+const whitelistText = ref('')
+const form = reactive({ code: '', name: '', category: '', title: '', content: '' })
+const editing = computed(() => Boolean(props.template))
+const preview = computed(() => form.title || form.content ? `[站内信] ${form.title || '未填写标题'}\n${form.content || '未填写模板内容'}` : '填写标题和内容后，将在这里显示预览效果。')
+const whitelist = computed(() => [...new Set(whitelistText.value.split(/[\s,，]+/).map((v) => v.trim()).filter(Boolean))])
 
+watch([open, () => props.template], ([isOpen]) => { if (!isOpen) return; const item = props.template; Object.assign(form, item ? { code: item.templateCode, name: item.templateName, category: item.category, title: item.titleTemplate, content: item.bodyTemplate } : { code: '', name: '', category: '', title: '', content: '' }); whitelistText.value = item?.variableWhitelist.join(', ') ?? ''; error.value = null }, { immediate: true })
 function normalizeCode(value: string) { form.code = value.replace(/[^A-Za-z0-9_]/g, '').toUpperCase() }
-function insertVariable(name: string) {
-  const textarea = contentInput.value?.textarea
-  const value = `\${${name}}`
-  const start = textarea?.selectionStart ?? form.content.length
-  const end = textarea?.selectionEnd ?? start
-  form.content = `${form.content.slice(0, start)}${value}${form.content.slice(end)}`.slice(0, 1000)
+function insertVariable(name: string) { if (!whitelist.value.includes(name)) whitelistText.value = [...whitelist.value, name].join(', '); const textarea = contentInput.value?.textarea; const value = `\${${name}}`; const start = textarea?.selectionStart ?? form.content.length; const end = textarea?.selectionEnd ?? start; form.content = `${form.content.slice(0,start)}${value}${form.content.slice(end)}`.slice(0,10000) }
+async function submit() {
+  error.value = null
+  if (!/^[A-Z][A-Z0-9_]{0,63}$/.test(form.code)) return ElMessage.warning('模板CODE须以字母开头，仅支持大写字母、数字和下划线')
+  if (!form.name.trim() || !form.category.trim() || !form.title.trim() || !form.content.trim()) return ElMessage.warning('请填写完整模板信息')
+  if (whitelist.value.some((key) => !/^[a-z][a-z0-9_]{0,31}$/.test(key))) return ElMessage.warning('变量名须以小写字母开头，仅支持小写字母、数字和下划线')
+  const payload = { templateName: form.name.trim(), category: form.category.trim(), titleTemplate: form.title.trim(), bodyTemplate: form.content.trim(), variableWhitelist: whitelist.value }
+  submitting.value = true
+  try { if (props.template) await updateTemplate(props.template.id, { ...payload, version: props.template.version }); else await createTemplate({ templateCode: form.code, ...payload }); ElMessage.success(props.template ? '模板已更新' : '模板草稿已创建'); open.value = false; emit('success') } catch (reason) { error.value = getApiErrorDetails(reason, '模板保存失败') } finally { submitting.value = false }
 }
 </script>
 
 <template>
-  <AppDialog v-model="open" title="新增消息模板" width="min(760px, calc(100vw - 28px))" :show-confirm="false" destroy-on-close>
-    <el-alert title="当前仅承载站内系统消息模板；保存接口待后端契约冻结" type="info" :closable="false" show-icon />
-    <el-form class="template-form" label-position="top">
-      <div class="form-grid">
-        <el-form-item label="模板CODE" required><el-input :model-value="form.code" maxlength="40" placeholder="如：ORDER_SHIPPED_NOTICE" @update:model-value="normalizeCode(String($event))" /><small>仅支持字母、数字和下划线</small></el-form-item>
-        <el-form-item label="模板类型" required><el-input model-value="系统" disabled /></el-form-item>
-      </div>
-      <el-form-item label="模板标题" required><el-input v-model="form.title" maxlength="60" show-word-limit placeholder="请输入模板标题" /></el-form-item>
-      <el-form-item label="模板内容" required><el-input ref="contentInput" v-model="form.content" type="textarea" :rows="6" maxlength="1000" show-word-limit placeholder="请输入模板内容" /></el-form-item>
-      <div class="variable-row"><span>常用变量</span><el-button v-for="item in variables" :key="item.value" size="small" @click="insertVariable(item.value)">{{ item.label }}</el-button></div>
-      <section class="template-preview"><strong>内容预览</strong><p>{{ preview }}</p></section>
-    </el-form>
-    <template #footer="{ close }"><div class="dialog-actions"><el-button @click="close">取消</el-button><el-button type="primary" disabled>保存模板</el-button></div></template>
+  <AppDialog v-model="open" :title="editing ? '编辑消息模板' : '新增消息模板'" width="min(760px, calc(100vw - 28px))" :show-confirm="false" destroy-on-close>
+    <el-alert v-if="error" type="error" :closable="false" show-icon><template #title><span>{{ error.message }}</span><ApiErrorMeta :details="error" /></template></el-alert>
+    <el-alert v-else title="首期仅支持站内信；新模板保存为草稿，草稿激活后不可再编辑。" type="info" :closable="false" show-icon />
+    <el-form class="template-form" label-position="top"><div class="form-grid"><el-form-item label="模板CODE" required><el-input :model-value="form.code" maxlength="64" :disabled="editing" placeholder="如：ORDER_SHIPPED_NOTICE" @update:model-value="normalizeCode(String($event))" /></el-form-item><el-form-item label="模板名称" required><el-input v-model="form.name" maxlength="128" /></el-form-item></div><div class="form-grid"><el-form-item label="业务分类" required><el-input v-model="form.category" maxlength="64" /></el-form-item><el-form-item label="模板类型"><el-input model-value="站内信" disabled /></el-form-item></div><el-form-item label="消息标题模板" required><el-input v-model="form.title" maxlength="256" show-word-limit /></el-form-item><el-form-item label="消息正文模板" required><el-input ref="contentInput" v-model="form.content" type="textarea" :rows="6" maxlength="10000" show-word-limit /></el-form-item><el-form-item label="变量白名单"><el-input v-model="whitelistText" placeholder="多个变量使用逗号分隔，如 customer_name, order_no" /></el-form-item><div class="variable-row"><span>常用变量</span><el-button v-for="name in ['customer_name','order_no','container_no','amount','date']" :key="name" size="small" @click="insertVariable(name)">{{ name }}</el-button></div><section class="template-preview"><strong>内容预览</strong><p>{{ preview }}</p></section></el-form>
+    <template #footer="{ close }"><div class="dialog-actions"><el-button :disabled="submitting" @click="close">取消</el-button><el-button type="primary" :loading="submitting" @click="submit">保存模板</el-button></div></template>
   </AppDialog>
 </template>
 
 <style scoped>
-.template-form { margin-top: 18px; }
-.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
-small { display: block; margin-top: 5px; color: var(--cc-muted); font-size: 12px; }
-.variable-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--cc-muted); font-size: 12px; }
-.variable-row :deep(.el-button) { margin-left: 0; }
-.template-preview { overflow: hidden; border: 1px solid var(--cc-border); border-radius: 8px; }
-.template-preview strong { display: block; padding: 9px 14px; border-bottom: 1px solid var(--cc-border); background: #f8fafc; color: var(--cc-text); font-size: 13px; }
-.template-preview p { min-height: 76px; margin: 0; padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--cc-muted); font-size: 13px; line-height: 1.7; }
-.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
-.dialog-actions :deep(.el-button) { margin-left: 0; }
-@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; gap: 0; } }
+.template-form{margin-top:18px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.variable-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;color:var(--cc-muted);font-size:12px}.variable-row :deep(.el-button){margin-left:0}.template-preview{overflow:hidden;border:1px solid var(--cc-border);border-radius:8px}.template-preview strong{display:block;padding:9px 14px;border-bottom:1px solid var(--cc-border);background:#f8fafc;font-size:13px}.template-preview p{min-height:76px;margin:0;padding:16px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--cc-muted);font-size:13px;line-height:1.7}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}.dialog-actions :deep(.el-button){margin-left:0}@media(max-width:560px){.form-grid{grid-template-columns:1fr;gap:0}}
 </style>
diff --git a/src/modules/notifications/notifications.test.ts b/src/modules/notifications/notifications.test.ts
new file mode 100644
index 00000000..fcb5b021
--- /dev/null
+++ b/src/modules/notifications/notifications.test.ts
@@ -0,0 +1,62 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import MessageComposerDialog from './components/MessageComposerDialog.vue'
+import TemplateEditorDialog from './components/TemplateEditorDialog.vue'
+
+const source = (path: string) => readFileSync(fileURLToPath(new URL(path, import.meta.url)), 'utf8')
+
+const dialogStubs = {
+  AppDialog: { props: ['width'], template: '<div class="dialog" :data-width="width"><slot /><slot name="footer" :close="() => {}" /></div>' },
+  ApiErrorMeta: true,
+  PlatformTenantSelector: true,
+  'el-alert': true,
+  'el-form': { template: '<form><slot /></form>' },
+  'el-form-item': { template: '<label><slot /></label>' },
+  'el-segmented': true,
+  'el-select': { template: '<select><slot /></select>' },
+  'el-option': true,
+  'el-input': true,
+  'el-switch': true,
+  'el-date-picker': true,
+  'el-button': { props: ['disabled'], template: '<button :disabled="disabled"><slot /></button>' },
+}
+
+describe('notification center contract UI', () => {
+  it.each([
+    './pages/MessageManagementView.vue',
+    './pages/MessageTemplatesView.vue',
+    './pages/MyMessagesView.vue',
+  ])('keeps actions as the first table column in %s', (path) => {
+    const content = source(path)
+    expect(content).toMatch(/const columns:[^=]+\s*=\s*\[\{key:'actions',label:'操作'/)
+  })
+
+  it('does not expose unsupported clear-read or disabled-template restore actions', () => {
+    expect(source('./pages/MyMessagesView.vue')).not.toContain('清空已读')
+    const templates = source('./pages/MessageTemplatesView.vue')
+    expect(templates).toContain("status!=='DISABLED'")
+    expect(templates).toContain("status==='DRAFT'?'激活':'禁用'")
+  })
+
+  it('uses the prototype composer width and exposes the real send command', () => {
+    const wrapper = mount(MessageComposerDialog, {
+      props: { modelValue: true, templates: [] },
+      global: { stubs: dialogStubs },
+    })
+    expect(wrapper.get('.dialog').attributes('data-width')).toContain('680px')
+    expect(wrapper.findAll('button').some((button) => button.text() === '立即发送' && !button.attributes('disabled'))).toBe(true)
+    expect(wrapper.text()).not.toContain('存为草稿')
+  })
+
+  it('uses the prototype editor width and exposes the real save command', () => {
+    const wrapper = mount(TemplateEditorDialog, {
+      props: { modelValue: true },
+      global: { stubs: dialogStubs },
+    })
+    expect(wrapper.get('.dialog').attributes('data-width')).toContain('760px')
+    const save = wrapper.findAll('button').find((button) => button.text() === '保存模板')
+    expect(save?.attributes('disabled')).toBeUndefined()
+  })
+})
diff --git a/src/modules/notifications/pages/MessageManagementView.vue b/src/modules/notifications/pages/MessageManagementView.vue
index 37186cd4..3337c2dc 100644
--- a/src/modules/notifications/pages/MessageManagementView.vue
+++ b/src/modules/notifications/pages/MessageManagementView.vue
@@ -1,46 +1,19 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { Download, Eye, Plus, Send } from '@lucide/vue'
-import AdminPage from '@/shared/components/AdminPage.vue'
-import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
-import ListPageLayout from '@/shared/components/ListPageLayout.vue'
-import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
-import ContractPendingNotice from '@/modules/notifications/components/ContractPendingNotice.vue'
-import MessageComposerDialog from '@/modules/notifications/components/MessageComposerDialog.vue'
-
-const page = ref(1)
-const pageSize = ref(20)
-const composerOpen = ref(false)
-const filters = ref<QueryModel>({ type: '', status: '', keyword: '' })
-const queryFields: QueryField[] = [
-  { key: 'type', type: 'select', label: '消息类型', placeholder: '全部类型', options: [{ label: '系统通知', value: '系统通知' }, { label: '业务提醒', value: '业务提醒' }, { label: '异常告警', value: '异常告警' }] },
-  { key: 'status', type: 'select', label: '消息状态', placeholder: '全部状态', options: [{ label: '已发送', value: '已发送' }, { label: '草稿', value: '草稿' }] },
-  { key: 'keyword', type: 'input', label: '标题或内容', placeholder: '消息标题/内容' },
-]
-const columns: DataTableColumn[] = [
-  { key: 'actions', label: '操作', width: 190, fixed: 'left', slotName: 'actions' },
-  { key: 'id', prop: 'id', label: '消息ID', minWidth: 170 },
-  { key: 'title', prop: 'title', label: '标题', minWidth: 220 },
-  { key: 'type', prop: 'type', label: '类型', width: 110 },
-  { key: 'target', prop: 'target', label: '接收对象', minWidth: 150 },
-  { key: 'sentAt', prop: 'sentAt', label: '发送时间', width: 170 },
-  { key: 'readSummary', prop: 'readSummary', label: '已读/总数', width: 110 },
-  { key: 'status', prop: 'status', label: '状态', width: 100 },
-]
+import { onMounted, ref, watch } from 'vue'
+import { Plus, RotateCcw, XCircle } from '@lucide/vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import AdminPage from '@/shared/components/AdminPage.vue'; import DataTable,{type DataTableColumn} from '@/shared/components/DataTable.vue'; import ListPageLayout from '@/shared/components/ListPageLayout.vue'; import QueryToolbar,{type QueryField,type QueryModel} from '@/shared/components/QueryToolbar.vue'; import LoadErrorState from '@/shared/components/LoadErrorState.vue'; import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import MessageComposerDialog from '../components/MessageComposerDialog.vue'; import { cancelTask, listTasks, listTemplates, retryTask } from '../api/notificationCenter'; import type { NotificationTask, NotificationTaskStatus, NotificationTemplate } from '../types'; import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'; import { useAccessPreviewStore } from '@/core/access/accessPreview'
+const access=useAccessPreviewStore(),page=ref(1),pageSize=ref(20),loading=ref(false),actionId=ref(''),error=ref<ApiErrorDetails|null>(null),composerOpen=ref(false),templates=ref<NotificationTemplate[]>([]),result=ref({records:[] as NotificationTask[],total:0,pages:0}),filters=ref<QueryModel>({category:'',status:'',keyword:''})
+const queryFields:QueryField[]=[{key:'category',type:'input',label:'业务分类',placeholder:'业务分类'},{key:'status',type:'select',label:'任务状态',placeholder:'全部状态',options:['CREATED','SCHEDULED','DISPATCHING','RETRYING','SENT','DEAD','CANCELLED'].map(value=>({label:statusLabel(value as NotificationTaskStatus),value}))},{key:'keyword',type:'input',label:'任务号或标题',placeholder:'任务号/消息标题'}]
+const columns:DataTableColumn[]=[{key:'actions',label:'操作',width:180,fixed:'left',slotName:'actions'},{key:'taskNo',prop:'taskNo',label:'任务号',minWidth:190},{key:'title',prop:'title',label:'标题',minWidth:220},{key:'category',prop:'category',label:'业务分类',width:130},{key:'recipientCount',prop:'recipientCount',label:'接收人数',width:100},{key:'scheduledAt',label:'定时发送',width:170,slotName:'scheduledAt'},{key:'sentAt',label:'发送时间',width:170,slotName:'sentAt'},{key:'status',label:'状态',width:110,slotName:'status'}]
+function statusLabel(v:NotificationTaskStatus){return {CREATED:'已创建',SCHEDULED:'待定时发送',DISPATCHING:'发送中',RETRYING:'重试中',SENT:'已发送',DEAD:'发送失败',CANCELLED:'已取消'}[v]}
+function formatDate(v:string|null){return v?new Date(v).toLocaleString('zh-CN',{hour12:false}):'—'}
+async function load(){loading.value=true;error.value=null;try{const keyword=String(filters.value.keyword||'').trim();const data=await listTasks({page:page.value,size:pageSize.value,category:String(filters.value.category||'').trim()||undefined,status:(filters.value.status||undefined) as NotificationTaskStatus|undefined,...(keyword.startsWith('NT')?{taskNo:keyword}:{title:keyword||undefined})});result.value={records:data.records,total:data.total,pages:data.pages}}catch(e){error.value=getApiErrorDetails(e,'消息任务加载失败')}finally{loading.value=false}}
+async function loadTemplates(){if(!access.can('platform:notification:create'))return;try{const data=await listTemplates({page:1,size:200,status:'ACTIVE'});templates.value=data.records}catch(e){ElMessage.error(getApiErrorMessage(e,'可用模板加载失败'))}}
+function search(){page.value===1?void load():page.value=1}
+async function action(row:NotificationTask,type:'cancel'|'retry'){try{await ElMessageBox.confirm(type==='cancel'?'确定取消该消息任务吗？':'确定重试该消息任务吗？',type==='cancel'?'取消任务':'重试任务',{type:'warning'});actionId.value=row.id;if(type==='cancel')await cancelTask(row.id);else await retryTask(row.id);ElMessage.success(type==='cancel'?'任务已取消':'任务已提交重试');await load()}catch(e){if(e!=='cancel'&&e!=='close')ElMessage.error(getApiErrorMessage(e,type==='cancel'?'取消失败':'重试失败'))}finally{actionId.value=''}}
+watch([page,pageSize],load);onMounted(()=>{void load();void loadTemplates()})
 </script>
-
-<template>
-  <AdminPage><ListPageLayout aria-label="消息管理列表">
-    <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" aria-label="消息筛选" ariaLabel="消息筛选" :fields="queryFields" preference-key="notifications-messages-query" /></template>
-    <template #state><ContractPendingNotice /></template>
-    <section class="surface-panel table-panel">
-      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="[]" :columns="columns" preference-key="notifications-messages-table" :total="0" row-key="id" empty-text="接口接入后显示平台消息">
-        <template #toolbar-actions><el-button type="primary" @click="composerOpen = true"><Plus :size="16" />新建消息</el-button><el-button disabled><Download :size="16" />导出Excel</el-button></template>
-        <template #pagination-left><span>共 0 条消息</span></template>
-        <template #actions><div class="table-actions"><el-button link type="primary" disabled><Eye :size="15" />详情</el-button><el-button link type="primary" disabled><Send :size="15" />发送</el-button></div></template>
-      </DataTable>
-    </section>
-  </ListPageLayout><MessageComposerDialog v-model="composerOpen" /></AdminPage>
-</template>
-
-<style scoped>.table-actions { display: flex; min-height: 32px; align-items: center; gap: 8px; }.table-actions :deep(.el-button + .el-button) { margin-left: 0; }</style>
+<template><AdminPage><ListPageLayout aria-label="消息管理列表"><template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="消息任务筛选" :fields="queryFields" preference-key="notifications-messages-query" @search="search" /></template><template v-if="error" #state><LoadErrorState title="消息任务加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template><section v-if="!error" class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" preference-key="notifications-messages-table" :loading="loading" :total="result.total" row-key="id" empty-text="暂无消息任务"><template #toolbar-actions><el-button v-if="access.can('platform:notification:create')" type="primary" :disabled="!templates.length" @click="composerOpen=true"><Plus :size="16"/>新建消息</el-button></template><template #pagination-left><span>共 {{ result.total }} 个任务</span></template><template #actions="{row}"><div class="table-actions"><el-button v-if="access.can('platform:notification:task:cancel')&&['CREATED','SCHEDULED'].includes((row as NotificationTask).status)" link type="danger" :loading="actionId===(row as NotificationTask).id" @click="action(row as NotificationTask,'cancel')"><XCircle :size="15"/>取消</el-button><el-button v-if="access.can('platform:notification:task:retry')&&['RETRYING','DEAD'].includes((row as NotificationTask).status)" link type="primary" :loading="actionId===(row as NotificationTask).id" @click="action(row as NotificationTask,'retry')"><RotateCcw :size="15"/>重试</el-button></div></template><template #scheduledAt="{row}">{{formatDate((row as NotificationTask).scheduledAt)}}</template><template #sentAt="{row}">{{formatDate((row as NotificationTask).sentAt)}}</template><template #status="{row}"><el-tag>{{statusLabel((row as NotificationTask).status)}}</el-tag></template></DataTable></section></ListPageLayout><MessageComposerDialog v-model="composerOpen" :templates="templates" @success="load"/></AdminPage></template>
+<style scoped>.table-actions{display:flex;min-height:32px;align-items:center;gap:8px}.table-actions :deep(.el-button+.el-button){margin-left:0}</style>
diff --git a/src/modules/notifications/pages/MessageTemplatesView.vue b/src/modules/notifications/pages/MessageTemplatesView.vue
index 33da458a..e0093c9f 100644
--- a/src/modules/notifications/pages/MessageTemplatesView.vue
+++ b/src/modules/notifications/pages/MessageTemplatesView.vue
@@ -1,37 +1,14 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { Download, FileUp, Pencil, Plus } from '@lucide/vue'
-import AdminPage from '@/shared/components/AdminPage.vue'
-import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
-import ListPageLayout from '@/shared/components/ListPageLayout.vue'
-import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
-import ContractPendingNotice from '@/modules/notifications/components/ContractPendingNotice.vue'
-import TemplateEditorDialog from '@/modules/notifications/components/TemplateEditorDialog.vue'
-
-const page = ref(1)
-const pageSize = ref(20)
-const editorOpen = ref(false)
-const filters = ref<QueryModel>({ code: '', content: '' })
-const queryFields: QueryField[] = [{ key: 'code', type: 'input', label: '模板CODE', placeholder: '模板CODE' }, { key: 'content', type: 'input', label: '模板内容', placeholder: '模板内容' }]
-const columns: DataTableColumn[] = [
-  { key: 'actions', label: '操作', width: 110, fixed: 'left', slotName: 'actions' },
-  { key: 'code', prop: 'code', label: '模板CODE', minWidth: 190 },
-  { key: 'title', prop: 'title', label: '模板标题', minWidth: 180 },
-  { key: 'content', prop: 'content', label: '模板内容', minWidth: 320 },
-  { key: 'type', prop: 'type', label: '模板类型', width: 110 },
-]
+import { onMounted, ref, watch } from 'vue'; import { Pencil, Plus, Power } from '@lucide/vue'; import { ElMessage, ElMessageBox } from 'element-plus'
+import AdminPage from '@/shared/components/AdminPage.vue'; import DataTable,{type DataTableColumn} from '@/shared/components/DataTable.vue'; import ListPageLayout from '@/shared/components/ListPageLayout.vue'; import QueryToolbar,{type QueryField,type QueryModel} from '@/shared/components/QueryToolbar.vue'; import LoadErrorState from '@/shared/components/LoadErrorState.vue'; import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'; import TemplateEditorDialog from '../components/TemplateEditorDialog.vue'; import { changeTemplateStatus, listTemplates } from '../api/notificationCenter'; import type { NotificationTemplate, TemplateStatus } from '../types'; import { getApiErrorDetails,getApiErrorMessage,type ApiErrorDetails } from '@/shared/api/http'; import { useAccessPreviewStore } from '@/core/access/accessPreview'
+const access=useAccessPreviewStore(),page=ref(1),pageSize=ref(20),loading=ref(false),actionId=ref(''),error=ref<ApiErrorDetails|null>(null),editorOpen=ref(false),editing=ref<NotificationTemplate|null>(null),result=ref({records:[] as NotificationTemplate[],total:0,pages:0}),filters=ref<QueryModel>({code:'',category:'',title:'',status:''})
+const queryFields:QueryField[]=[{key:'code',type:'input',label:'模板CODE',placeholder:'模板CODE'},{key:'category',type:'input',label:'业务分类',placeholder:'业务分类'},{key:'title',type:'input',label:'名称或标题',placeholder:'模板名称/标题'},{key:'status',type:'select',label:'状态',placeholder:'全部状态',options:[{label:'草稿',value:'DRAFT'},{label:'已激活',value:'ACTIVE'},{label:'已禁用',value:'DISABLED'}]}]
+const columns:DataTableColumn[]=[{key:'actions',label:'操作',width:190,fixed:'left',slotName:'actions'},{key:'templateCode',prop:'templateCode',label:'模板CODE',minWidth:190},{key:'templateName',prop:'templateName',label:'模板名称',minWidth:170},{key:'category',prop:'category',label:'业务分类',width:130},{key:'titleTemplate',prop:'titleTemplate',label:'消息标题模板',minWidth:220},{key:'bodyTemplate',prop:'bodyTemplate',label:'正文模板',minWidth:320,showOverflowTooltip:true},{key:'status',label:'状态',width:100,slotName:'status'},{key:'version',prop:'version',label:'版本',width:80}]
+function statusLabel(v:TemplateStatus){return {DRAFT:'草稿',ACTIVE:'已激活',DISABLED:'已禁用'}[v]}
+async function load(){loading.value=true;error.value=null;try{const d=await listTemplates({page:page.value,size:pageSize.value,templateCode:String(filters.value.code||'').trim()||undefined,category:String(filters.value.category||'').trim()||undefined,title:String(filters.value.title||'').trim()||undefined,status:(filters.value.status||undefined) as TemplateStatus|undefined});result.value={records:d.records,total:d.total,pages:d.pages}}catch(e){error.value=getApiErrorDetails(e,'模板加载失败')}finally{loading.value=false}}
+function search(){page.value===1?void load():page.value=1}function create(){editing.value=null;editorOpen.value=true}function edit(row:NotificationTemplate){editing.value=row;editorOpen.value=true}
+async function changeStatus(row:NotificationTemplate){const target=row.status==='DRAFT'?'ACTIVE':'DISABLED';try{await ElMessageBox.confirm(target==='ACTIVE'?'激活后模板不可再编辑，确定继续吗？':'禁用后首期不可重新启用，确定继续吗？',target==='ACTIVE'?'激活模板':'禁用模板',{type:'warning'});actionId.value=row.id;await changeTemplateStatus(row.id,target,row.version);ElMessage.success(target==='ACTIVE'?'模板已激活':'模板已禁用');await load()}catch(e){if(e!=='cancel'&&e!=='close')ElMessage.error(getApiErrorMessage(e,'模板状态变更失败'))}finally{actionId.value=''}}
+watch([page,pageSize],load);onMounted(load)
 </script>
-
-<template>
-  <AdminPage><ListPageLayout aria-label="消息模板列表">
-    <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" aria-label="消息模板筛选" ariaLabel="消息模板筛选" :fields="queryFields" preference-key="notifications-templates-query" /></template>
-    <template #state><ContractPendingNotice /></template>
-    <section class="surface-panel table-panel">
-      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="[]" :columns="columns" preference-key="notifications-templates-table" :total="0" row-key="code" empty-text="接口接入后显示站内消息模板">
-        <template #toolbar-actions><el-button type="primary" @click="editorOpen = true"><Plus :size="16" />新增模板</el-button><el-button disabled><Download :size="16" />导出</el-button><el-button disabled><FileUp :size="16" />导入</el-button></template>
-        <template #pagination-left><span>共 0 个模板</span></template>
-        <template #actions><el-button link type="primary" disabled><Pencil :size="15" />编辑</el-button></template>
-      </DataTable>
-    </section>
-  </ListPageLayout><TemplateEditorDialog v-model="editorOpen" /></AdminPage>
-</template>
+<template><AdminPage><ListPageLayout aria-label="消息模板列表"><template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="消息模板筛选" :fields="queryFields" preference-key="notifications-templates-query" @search="search"/></template><template v-if="error" #state><LoadErrorState title="模板加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error"/></template></LoadErrorState></template><section v-if="!error" class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" preference-key="notifications-templates-table" :loading="loading" :total="result.total" row-key="id" empty-text="暂无消息模板"><template #toolbar-actions><el-button v-if="access.can('platform:notification:template:create')" type="primary" @click="create"><Plus :size="16"/>新增模板</el-button></template><template #pagination-left><span>共 {{result.total}} 个模板</span></template><template #actions="{row}"><div class="table-actions"><el-button v-if="access.can('platform:notification:template:edit')&&(row as NotificationTemplate).status==='DRAFT'" link type="primary" @click="edit(row as NotificationTemplate)"><Pencil :size="15"/>编辑</el-button><el-button v-if="access.can('platform:notification:template:status')&&(row as NotificationTemplate).status!=='DISABLED'" link :type="(row as NotificationTemplate).status==='ACTIVE'?'danger':'primary'" :loading="actionId===(row as NotificationTemplate).id" @click="changeStatus(row as NotificationTemplate)"><Power :size="15"/>{{(row as NotificationTemplate).status==='DRAFT'?'激活':'禁用'}}</el-button></div></template><template #status="{row}"><el-tag>{{statusLabel((row as NotificationTemplate).status)}}</el-tag></template></DataTable></section></ListPageLayout><TemplateEditorDialog v-model="editorOpen" :template="editing" @success="load"/></AdminPage></template>
+<style scoped>.table-actions{display:flex;min-height:32px;align-items:center;gap:8px}.table-actions :deep(.el-button+.el-button){margin-left:0}</style>
diff --git a/src/modules/notifications/pages/MyMessagesView.vue b/src/modules/notifications/pages/MyMessagesView.vue
index 87f51d61..933fb5c2 100644
--- a/src/modules/notifications/pages/MyMessagesView.vue
+++ b/src/modules/notifications/pages/MyMessagesView.vue
@@ -1,41 +1,16 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { CheckCheck, Eye, Trash2 } from '@lucide/vue'
-import AdminPage from '@/shared/components/AdminPage.vue'
-import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
-import ListPageLayout from '@/shared/components/ListPageLayout.vue'
-import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
-import ContractPendingNotice from '@/modules/notifications/components/ContractPendingNotice.vue'
-
-const page = ref(1)
-const pageSize = ref(20)
-const filters = ref<QueryModel>({ status: '', type: '' })
-const queryFields: QueryField[] = [
-  { key: 'status', type: 'select', label: '消息状态', placeholder: '全部状态', options: [{ label: '未读', value: '未读' }, { label: '已读', value: '已读' }] },
-  { key: 'type', type: 'select', label: '消息类型', placeholder: '全部类型', options: [{ label: '系统通知', value: '系统通知' }, { label: '业务提醒', value: '业务提醒' }, { label: '任务待办', value: '任务待办' }] },
-]
-const columns: DataTableColumn[] = [
-  { key: 'actions', label: '操作', width: 210, fixed: 'left', slotName: 'actions' },
-  { key: 'title', prop: 'title', label: '消息标题', minWidth: 220 },
-  { key: 'summary', prop: 'summary', label: '内容摘要', minWidth: 320 },
-  { key: 'type', prop: 'type', label: '类型', width: 110 },
-  { key: 'sentAt', prop: 'sentAt', label: '发送时间', width: 170 },
-  { key: 'status', prop: 'status', label: '状态', width: 100 },
-]
+import { onMounted, ref, watch } from 'vue'; import { CheckCheck, Eye } from '@lucide/vue'; import { ElMessage } from 'element-plus'
+import AdminPage from '@/shared/components/AdminPage.vue'; import AppDialog from '@/shared/components/AppDialog.vue'; import DataTable,{type DataTableColumn} from '@/shared/components/DataTable.vue'; import ListPageLayout from '@/shared/components/ListPageLayout.vue'; import QueryToolbar,{type QueryField,type QueryModel} from '@/shared/components/QueryToolbar.vue'; import LoadErrorState from '@/shared/components/LoadErrorState.vue'; import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'; import { getInboxDetail,listInbox,markAllInboxRead,markInboxRead } from '../api/notificationCenter'; import type { InboxDetail,InboxItem,InboxStatus } from '../types'; import { getApiErrorDetails,getApiErrorMessage,type ApiErrorDetails } from '@/shared/api/http'
+const page=ref(1),pageSize=ref(20),loading=ref(false),actionId=ref(''),error=ref<ApiErrorDetails|null>(null),detailOpen=ref(false),detailLoading=ref(false),detail=ref<InboxDetail|null>(null),result=ref({records:[] as InboxItem[],total:0,pages:0}),filters=ref<QueryModel>({status:'',category:''})
+const queryFields:QueryField[]=[{key:'status',type:'select',label:'消息状态',placeholder:'全部状态',options:[{label:'未读',value:'UNREAD'},{label:'已读',value:'READ'}]},{key:'category',type:'input',label:'业务分类',placeholder:'业务分类'}]
+const columns:DataTableColumn[]=[{key:'actions',label:'操作',width:210,fixed:'left',slotName:'actions'},{key:'title',prop:'title',label:'消息标题',minWidth:240},{key:'category',prop:'category',label:'业务分类',width:140},{key:'sentAt',label:'发送时间',width:170,slotName:'sentAt'},{key:'status',label:'状态',width:100,slotName:'status'}]
+function formatDate(v:string|null){return v?new Date(v).toLocaleString('zh-CN',{hour12:false}):'—'}
+async function load(){loading.value=true;error.value=null;try{const d=await listInbox({page:page.value,size:pageSize.value,status:(filters.value.status||undefined) as InboxStatus|undefined,category:String(filters.value.category||'').trim()||undefined});result.value={records:d.records,total:d.total,pages:d.pages}}catch(e){error.value=getApiErrorDetails(e,'我的消息加载失败')}finally{loading.value=false}}
+function search(){page.value===1?void load():page.value=1}
+async function openDetail(row:InboxItem){detailOpen.value=true;detailLoading.value=true;detail.value=null;try{detail.value=await getInboxDetail(row.id);if(detail.value.status==='UNREAD'){detail.value=await markInboxRead(row.id);await load();window.dispatchEvent(new CustomEvent('cc-notification-unread-changed'))}}catch(e){ElMessage.error(getApiErrorMessage(e,'消息详情加载失败'))}finally{detailLoading.value=false}}
+async function markRead(row:InboxItem){actionId.value=row.id;try{await markInboxRead(row.id);ElMessage.success('已标为已读');await load();window.dispatchEvent(new CustomEvent('cc-notification-unread-changed'))}catch(e){ElMessage.error(getApiErrorMessage(e,'标记已读失败'))}finally{actionId.value=''}}
+async function markAll(){try{const count=await markAllInboxRead();ElMessage.success(count?`已将 ${count} 条消息标为已读`:'没有需要更新的未读消息');await load();window.dispatchEvent(new CustomEvent('cc-notification-unread-changed'))}catch(e){ElMessage.error(getApiErrorMessage(e,'全部标为已读失败'))}}
+watch([page,pageSize],load);onMounted(load)
 </script>
-
-<template>
-  <AdminPage><ListPageLayout aria-label="我的消息列表">
-    <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" aria-label="我的消息筛选" ariaLabel="我的消息筛选" :fields="queryFields" preference-key="notifications-mine-query" /></template>
-    <template #state><ContractPendingNotice /></template>
-    <section class="surface-panel table-panel">
-      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="[]" :columns="columns" preference-key="notifications-mine-table" :total="0" row-key="id" empty-text="接口接入后显示当前员工的消息">
-        <template #toolbar-actions><el-button disabled><CheckCheck :size="16" />全部标为已读</el-button><el-button disabled><Trash2 :size="16" />清空已读</el-button></template>
-        <template #pagination-left><span>共 0 条消息</span></template>
-        <template #actions><div class="table-actions"><el-button link type="primary" disabled><Eye :size="15" />查看</el-button><el-button link type="primary" disabled><CheckCheck :size="15" />标为已读</el-button></div></template>
-      </DataTable>
-    </section>
-  </ListPageLayout></AdminPage>
-</template>
-
-<style scoped>.table-actions { display: flex; min-height: 32px; align-items: center; gap: 8px; }.table-actions :deep(.el-button + .el-button) { margin-left: 0; }</style>
+<template><AdminPage><ListPageLayout aria-label="我的消息列表"><template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="我的消息筛选" :fields="queryFields" preference-key="notifications-mine-query" @search="search"/></template><template v-if="error" #state><LoadErrorState title="我的消息加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error"/></template></LoadErrorState></template><section v-if="!error" class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" preference-key="notifications-mine-table" :loading="loading" :total="result.total" row-key="id" empty-text="暂无消息"><template #toolbar-actions><el-button @click="markAll"><CheckCheck :size="16"/>全部标为已读</el-button></template><template #pagination-left><span>共 {{result.total}} 条消息</span></template><template #actions="{row}"><div class="table-actions"><el-button link type="primary" @click="openDetail(row as InboxItem)"><Eye :size="15"/>查看</el-button><el-button v-if="(row as InboxItem).status==='UNREAD'" link type="primary" :loading="actionId===(row as InboxItem).id" @click="markRead(row as InboxItem)"><CheckCheck :size="15"/>标为已读</el-button></div></template><template #sentAt="{row}">{{formatDate((row as InboxItem).sentAt)}}</template><template #status="{row}"><el-tag :type="(row as InboxItem).status==='UNREAD'?'danger':'info'">{{(row as InboxItem).status==='UNREAD'?'未读':'已读'}}</el-tag></template></DataTable></section></ListPageLayout><AppDialog v-model="detailOpen" title="消息详情" width="min(680px, calc(100vw - 28px))" :loading="detailLoading" :show-confirm="false"><article v-if="detail" class="message-detail"><header><div><h3>{{detail.title}}</h3><p>{{detail.category}} · {{formatDate(detail.sentAt)}}</p></div><el-tag :type="detail.status==='UNREAD'?'danger':'info'">{{detail.status==='UNREAD'?'未读':'已读'}}</el-tag></header><div class="message-body">{{detail.body}}</div><dl v-if="detail.sourceType||detail.sourceId"><div><dt>来源类型</dt><dd>{{detail.sourceType||'—'}}</dd></div><div><dt>来源标识</dt><dd>{{detail.sourceId||'—'}}</dd></div></dl></article></AppDialog></AdminPage></template>
+<style scoped>.table-actions{display:flex;min-height:32px;align-items:center;gap:8px}.table-actions :deep(.el-button+.el-button){margin-left:0}.message-detail header{display:flex;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--cc-border)}.message-detail h3{margin:0;font-size:17px}.message-detail p{margin:6px 0 0;color:var(--cc-muted);font-size:12px}.message-body{padding:20px 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8}.message-detail dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--cc-border)}.message-detail dl>div{padding:12px}.message-detail dt{color:var(--cc-muted);font-size:12px}.message-detail dd{margin:5px 0 0;overflow-wrap:anywhere}@media(max-width:480px){.message-detail header{flex-direction:column}.message-detail dl{grid-template-columns:1fr}}</style>
diff --git a/src/modules/notifications/routes.ts b/src/modules/notifications/routes.ts
index 696b2560..07ef4d0c 100644
--- a/src/modules/notifications/routes.ts
+++ b/src/modules/notifications/routes.ts
@@ -5,19 +5,18 @@ export const notificationRoutes = [
     path: 'notifications/messages',
     name: 'notification-messages',
     component: () => import('@/modules/notifications/pages/MessageManagementView.vue'),
-    meta: { title: '消息管理', description: '创建并管理平台站内消息' },
+    meta: { title: '消息管理', description: '创建并管理平台站内消息', permission: 'platform:notification:task:list' },
   },
   {
     path: 'notifications/templates',
     name: 'notification-templates',
     component: () => import('@/modules/notifications/pages/MessageTemplatesView.vue'),
-    meta: { title: '模板管理', description: '维护平台站内消息模板' },
+    meta: { title: '模板管理', description: '维护平台站内消息模板', permission: 'platform:notification:template:list' },
   },
   {
     path: 'notifications/mine',
     name: 'my-notifications',
     component: () => import('@/modules/notifications/pages/MyMessagesView.vue'),
-    meta: { title: '我的消息', description: '查看当前平台员工收到的站内消息' },
+    meta: { title: '我的消息', description: '查看当前平台员工收到的站内消息', permission: 'platform:notification:view' },
   },
 ] satisfies RouteRecordRaw[]
-
diff --git a/src/modules/notifications/types.ts b/src/modules/notifications/types.ts
index 33d93f16..48c36f8c 100644
--- a/src/modules/notifications/types.ts
+++ b/src/modules/notifications/types.ts
@@ -1,50 +1,14 @@
-export type NotificationMessageType = 'SYSTEM' | 'BUSINESS' | 'ALERT' | 'TASK'
-export type NotificationMessageStatus = 'DRAFT' | 'SCHEDULED' | 'SENT' | 'CANCELLED'
-export type NotificationReadStatus = 'UNREAD' | 'READ'
+export type InboxStatus = 'UNREAD' | 'READ'
+export type TemplateStatus = 'DRAFT' | 'ACTIVE' | 'DISABLED'
+export type NotificationTaskStatus = 'CREATED' | 'SCHEDULED' | 'DISPATCHING' | 'RETRYING' | 'SENT' | 'DEAD' | 'CANCELLED'
+export type RecipientType = 'USER' | 'MEMBERSHIP' | 'TENANT_ROLE' | 'TENANT_ALL' | 'PLATFORM_ROLE'
 
-export interface NotificationMessageListItem {
-  id: string
-  title: string
-  type: NotificationMessageType
-  recipientSummary: string
-  sentAt: string | null
-  readCount: number | null
-  recipientCount: number | null
-  status: NotificationMessageStatus
-}
+export interface PageResult<T> { records: T[]; page: number; size: number; total: number; pages: number }
+export interface InboxItem { id: string; category: string; title: string; status: InboxStatus; sentAt: string; readAt: string | null }
+export interface InboxDetail extends InboxItem { body: string; sourceType: string | null; sourceId: string | null }
+export interface NotificationTemplate { id: string; templateCode: string; templateName: string; category: string; channel: 'IN_APP'; titleTemplate: string; bodyTemplate: string; variableWhitelist: string[]; status: TemplateStatus; version: number }
+export interface NotificationTask { id: string; taskNo: string; category: string; title: string; status: NotificationTaskStatus; recipientCount: number; scheduledAt: string | null; sentAt: string | null; duplicated: boolean }
 
-export interface NotificationInboxItem {
-  id: string
-  title: string
-  summary: string
-  type: NotificationMessageType
-  sentAt: string
-  readStatus: NotificationReadStatus
-}
-
-export interface NotificationTemplateListItem {
-  id: string
-  code: string
-  title: string
-  content: string
-  type: 'SYSTEM'
-}
-
-export interface NotificationListResult<T> {
-  records: T[]
-  total: number
-  pages: number
-}
-
-export interface NotificationComposerModel {
-  type: NotificationMessageType
-  priority: 'NORMAL' | 'IMPORTANT' | 'URGENT'
-  title: string
-  content: string
-  recipientScope: string
-  recipientIds: string[]
-  scheduledAt: string | null
-}
-
-// These view models deliberately contain no endpoint paths or transport DTO names.
-// Frozen backend DTOs will be mapped at the future api/ boundary instead of leaking into pages.
+export interface CreateNotificationRequest { tenantId: string; templateCode: string; recipientType: RecipientType; recipientIds?: string[]; roleCode?: string; variables: Record<string, string>; scheduledAt: string | null; idempotencyKey: string; sourceEventId?: string | null }
+export interface CreateTemplateRequest { templateCode: string; templateName: string; category: string; titleTemplate: string; bodyTemplate: string; variableWhitelist: string[] }
+export interface UpdateTemplateRequest extends Omit<CreateTemplateRequest, 'templateCode'> { version: number }
diff --git a/src/modules/ocean-bookings/pages/OceanBookingDetailView.test.ts b/src/modules/ocean-bookings/pages/OceanBookingDetailView.test.ts
index 57bb9e2e..15a97d10 100644
--- a/src/modules/ocean-bookings/pages/OceanBookingDetailView.test.ts
+++ b/src/modules/ocean-bookings/pages/OceanBookingDetailView.test.ts
@@ -48,6 +48,12 @@ describe('OceanBookingDetailView interaction contract', () => {
     expect(source).toContain('v-model="container.capacityCbm"')
     expect(source).toContain('v-model="container.maxWeightKg"')
     expect(source).toContain('releaseOceanBooking(id.value, releaseRequest)')
+    expect(source).toContain('capacityCbm: null')
+    expect(source).toContain('maxWeightKg: null')
+    expect(source).toContain('function validateContainerRequirements()')
+    expect(source).toContain('容量、限重和数量必须大于 0')
+    expect(source).not.toContain('capacityCbm: 68')
+    expect(source).not.toContain('maxWeightKg: 28000')
   })
 
   it('keeps view, create and edit on the formal detail route with a return action', () => {
diff --git a/src/modules/ocean-bookings/pages/OceanBookingDetailView.vue b/src/modules/ocean-bookings/pages/OceanBookingDetailView.vue
index d509caf2..707630ba 100644
--- a/src/modules/ocean-bookings/pages/OceanBookingDetailView.vue
+++ b/src/modules/ocean-bookings/pages/OceanBookingDetailView.vue
@@ -85,7 +85,7 @@ function blankParties(): OceanBookingParty[] {
 function blankData(): OceanBookingDraftData {
   return {
     customerId: '', customerName: '', channelCode: '', channelName: '', warehouseId: '', warehouseName: '', parties: blankParties(),
-    containerRequirements: [{ containerType: '40HC', containerKind: 'FCL', capacityCbm: 68, maxWeightKg: 28000, quantity: 1 }],
+    containerRequirements: [{ containerType: '40HC', containerKind: 'FCL', capacityCbm: null, maxWeightKg: null, quantity: 1 }],
   }
 }
 const form = reactive<OceanBookingSaveRequest>({ expectedVersion: 0, data: blankData() })
@@ -151,7 +151,7 @@ function applyDetail(value: OceanBookingDetail) {
     estimatedSailingAt: value.estimatedSailingAt, estimatedArrivalAt: value.estimatedArrivalAt,
     remark: value.remark,
     parties: value.parties.length ? value.parties.map(({ partyType, partyName, contactName, contactPhone, address }) => ({ partyType, partyName, contactName, contactPhone, address })) : blankParties(),
-    containerRequirements: value.containerRequirements.length ? value.containerRequirements.map(({ containerType, containerKind, capacityCbm, maxWeightKg, quantity }) => ({ containerType, containerKind, capacityCbm, maxWeightKg, quantity })) : [{ containerType: '40HC', containerKind: 'FCL', capacityCbm: 68, maxWeightKg: 28000, quantity: 1 }],
+    containerRequirements: value.containerRequirements.length ? value.containerRequirements.map(({ containerType, containerKind, capacityCbm, maxWeightKg, quantity }) => ({ containerType, containerKind, capacityCbm: capacityCbm ?? null, maxWeightKg: maxWeightKg ?? null, quantity: quantity ?? null })) : [{ containerType: '40HC', containerKind: 'FCL', capacityCbm: null, maxWeightKg: null, quantity: 1 }],
   }
 }
 async function load() {
@@ -169,6 +169,7 @@ async function save() {
     actionError.value = { message: '发货人、收货人和通知人名称均为必填项' }
     return
   }
+  if (!validateContainerRequirements()) return
   saving.value = true
   actionError.value = null
   try {
@@ -214,6 +215,7 @@ async function submitChange() {
 async function runAction(action: OceanBookingAction) {
   if (!detail.value || action === 'change-request') { if (action === 'change-request') openChangeDialog(); return }
   actionError.value = null
+  if (!validateContainerRequirements()) return
   try {
     const reason = await requiredReason(action)
     await ElMessageBox.confirm(`确认执行“${actionLabels[action]}”吗？`, actionLabels[action], { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' })
@@ -227,7 +229,15 @@ async function runAction(action: OceanBookingAction) {
     if (cause !== 'cancel' && !(cause instanceof Error && cause.message === 'cancel')) actionError.value = getApiErrorDetails(cause)
   } finally { actionSaving.value = false }
 }
-function addContainer() { form.data.containerRequirements.push({ containerType: '40HC', containerKind: 'FCL', capacityCbm: 68, maxWeightKg: 28000, quantity: 1 }) }
+function validateContainerRequirements() {
+  const invalid = form.data.containerRequirements.find((container) => !(Number(container.capacityCbm) > 0) || !(Number(container.maxWeightKg) > 0) || !(Number(container.quantity) > 0))
+  if (invalid) {
+    actionError.value = { message: `箱型 ${invalid.containerType || '未命名'} 的容量、限重和数量必须大于 0，请补充后再提交` }
+    return false
+  }
+  return true
+}
+function addContainer() { form.data.containerRequirements.push({ containerType: '40HC', containerKind: 'FCL', capacityCbm: null, maxWeightKg: null, quantity: 1 }) }
 function removeContainer(index: number) { if (form.data.containerRequirements.length > 1) form.data.containerRequirements.splice(index, 1) }
 
 onMounted(() => { void load(); void loadOptions() })
diff --git a/src/modules/ocean-bookings/types.ts b/src/modules/ocean-bookings/types.ts
index 8f71e39b..9de849fb 100644
--- a/src/modules/ocean-bookings/types.ts
+++ b/src/modules/ocean-bookings/types.ts
@@ -1,7 +1,7 @@
 export type OceanBookingStatus = 'DRAFT' | 'SUBMITTED' | 'CONFIRMED' | 'RELEASED' | 'FAILED' | 'CHANGE_PENDING' | 'CANCELLED'
 
 export interface OceanBookingParty { id?: string; partyType: string; partyName: string; contactName?: string | null; contactPhone?: string | null; address?: string | null }
-export interface OceanBookingContainer { id?: string; containerType: string; quantity: number; containerKind?: string | null; capacityCbm: number; maxWeightKg: number }
+export interface OceanBookingContainer { id?: string; containerType: string; quantity: number | null; containerKind?: string | null; capacityCbm: number | null; maxWeightKg: number | null }
 export interface OceanBookingContainerAllocation extends OceanBookingContainer { allocatedQuantity?: number | null }
 export interface OceanBookingDraftData {
   customerId: string; customerName: string; parties: OceanBookingParty[]; containerRequirements: OceanBookingContainer[]
diff --git a/src/modules/warehouse-resources/locations/pages/LocationsView.test.ts b/src/modules/warehouse-resources/locations/pages/LocationsView.test.ts
index 6ffe9239..fe733060 100644
--- a/src/modules/warehouse-resources/locations/pages/LocationsView.test.ts
+++ b/src/modules/warehouse-resources/locations/pages/LocationsView.test.ts
@@ -142,6 +142,18 @@ enableAutoUnmount(afterEach)
 afterAll(() => vi.unstubAllGlobals())
 
 describe('LocationsView', () => {
+  it('uses bordered striped tables and explicit semantic row actions', () => {
+    expect(locationsSource).toContain('border')
+    expect(locationsSource).toContain('stripe')
+    expect(locationsSource).toContain('size="small" plain type="primary"')
+    expect(locationsSource).toMatch(/size="small"\s+plain\s+:type=/)
+    expect(locationsSource).toMatch(/size="small"\s+plain\s+type="danger"/)
+    expect(locationsSource).toContain('<Eye :size="15" />')
+    expect(locationsSource).toContain('<Pencil :size="15" />')
+    expect(locationsSource).toContain('<Power :size="15" />')
+    expect(locationsSource).toContain('<Trash2 :size="15" />')
+    expect(locationsSource).toContain('@media (max-width: 720px)')
+  })
   it('uses the prototype-sized centered editor while retaining the detail drawer', () => {
     expect(locationsSource).toContain("drawerMode.value === 'view' ? AppDrawer : AppDialog")
     expect(locationsSource).toContain("width: 'min(560px, calc(100vw - 28px))'")
diff --git a/src/modules/warehouse-resources/pallets/pages/PalletsView.test.ts b/src/modules/warehouse-resources/pallets/pages/PalletsView.test.ts
index 4b79eb93..65aff93a 100644
--- a/src/modules/warehouse-resources/pallets/pages/PalletsView.test.ts
+++ b/src/modules/warehouse-resources/pallets/pages/PalletsView.test.ts
@@ -112,6 +112,16 @@ enableAutoUnmount(afterEach)
 afterAll(() => vi.unstubAllGlobals())
 
 describe('PalletsView', () => {
+  it('uses bordered striped tables and explicit semantic row actions', () => {
+    expect(palletsSource).toContain('border')
+    expect(palletsSource).toContain('stripe')
+    expect(palletsSource).toContain('size="small" plain type="primary"')
+    expect(palletsSource).toMatch(/size="small"\s+plain\s+type="danger"/)
+    expect(palletsSource).toContain('<Eye :size="15" />')
+    expect(palletsSource).toContain('<Pencil :size="15" />')
+    expect(palletsSource).toContain('<Trash2 :size="15" />')
+    expect(palletsSource).toContain('@media (max-width: 720px)')
+  })
   it('uses the prototype-sized centered editor while retaining the detail drawer', () => {
     expect(palletsSource).toContain('<AppDrawer v-model="detailOpen"')
     expect(palletsSource).toContain('<AppDialog v-model="editorOpen" :title="editorTitle" width="min(560px, calc(100vw - 28px))"')
diff --git a/src/modules/warehouses/pages/WarehousesView.test.ts b/src/modules/warehouses/pages/WarehousesView.test.ts
index 2a88b43d..1b3b5c57 100644
--- a/src/modules/warehouses/pages/WarehousesView.test.ts
+++ b/src/modules/warehouses/pages/WarehousesView.test.ts
@@ -175,6 +175,15 @@ enableAutoUnmount(afterEach)
 afterAll(() => vi.unstubAllGlobals())
 
 describe('WarehousesView', () => {
+  it('uses bordered striped tables and semantic operation buttons', () => {
+    expect(warehousesSource).toContain('border')
+    expect(warehousesSource).toContain('stripe')
+    expect(warehousesSource).toContain('size="small" plain type="primary"')
+    expect(warehousesSource).toMatch(/size="small"\s+plain\s+:type=/)
+    expect(warehousesSource).toContain('<Pencil :size="15" />')
+    expect(warehousesSource).toContain('<Power :size="15" />')
+    expect(warehousesSource).toContain('@media (max-width: 720px)')
+  })
   it('uses the prototype-sized centered warehouse editor with a fixed footer', () => {
     expect(warehousesSource).toContain('<AppDialog v-model="editorOpen" :title="editorLabel" width="min(650px, calc(100vw - 28px))"')
     expect(warehousesSource).not.toContain('<AppDrawer v-model="editorOpen"')
diff --git a/src/shared/components/DataTable.test.ts b/src/shared/components/DataTable.test.ts
index 7aa4a16c..792c264d 100644
--- a/src/shared/components/DataTable.test.ts
+++ b/src/shared/components/DataTable.test.ts
@@ -5,7 +5,11 @@ import DataTable, { createPaginationItems, normalizePage, normalizePageSizes, ty
 import LayoutPreferenceList from './LayoutPreferenceList.vue'
 import { UI_PREFERENCE_SCOPE, preferenceStorageKey } from '@/shared/utils/uiLayoutPreference'
 
-const TableStub = defineComponent({ template: '<div><slot /></div>', methods: { doLayout() {} } })
+const TableStub = defineComponent({
+  props: { border: Boolean, stripe: Boolean },
+  template: '<div class="table-stub" :data-border="String(border)" :data-stripe="String(stripe)"><slot /></div>',
+  methods: { doLayout() {} },
+})
 const ColumnStub = defineComponent({
   inheritAttrs: false,
   props: { label: String, prop: String },
@@ -69,6 +73,26 @@ describe('DataTable pagination helpers', () => {
 describe('DataTable column preferences', () => {
   beforeEach(() => localStorage.clear())
 
+  it('enables bordered striped business tables by default and allows explicit opt-out', () => {
+    const defaultTable = shallowMount(DataTable, {
+      props: { data: [], columns: configurableColumns },
+      global: {
+        stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
+        directives: { loading: {} },
+      },
+    })
+    expect(defaultTable.get('.table-stub').attributes()).toMatchObject({ 'data-border': 'true', 'data-stripe': 'true' })
+
+    const plainTable = shallowMount(DataTable, {
+      props: { data: [], columns: configurableColumns, border: false, stripe: false },
+      global: {
+        stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub },
+        directives: { loading: {} },
+      },
+    })
+    expect(plainTable.get('.table-stub').attributes()).toMatchObject({ 'data-border': 'false', 'data-stripe': 'false' })
+  })
+
   it('uses key as the data property for ordinary columns only', () => {
     const wrapper = shallowMount(DataTable, {
       props: {
diff --git a/src/shared/components/DataTable.vue b/src/shared/components/DataTable.vue
index 02e076a6..b6f39d0d 100644
--- a/src/shared/components/DataTable.vue
+++ b/src/shared/components/DataTable.vue
@@ -64,12 +64,16 @@ const props = withDefaults(defineProps<{
   pageSizes?: number[]
   preferenceKey?: string
   columnSettingsMode?: 'auto' | 'show' | 'hide'
+  border?: boolean
+  stripe?: boolean
 }>(), {
   loading: false,
   emptyText: '暂无数据',
   total: undefined,
   pageSizes: () => [10, 20, 50, 100],
   columnSettingsMode: 'auto',
+  border: true,
+  stripe: true,
 })
 
 const page = defineModel<number>('page', { default: 1 })
@@ -294,7 +298,7 @@ function setPage(value: number) {
         </div>
       </div>
     </div>
-    <el-table ref="tableRef" v-bind="$attrs" v-loading="loading" :data="data" :empty-text="emptyText" :aria-busy="loading">
+    <el-table ref="tableRef" v-bind="$attrs" v-loading="loading" :data="data" :empty-text="emptyText" :border="border" :stripe="stripe" :aria-busy="loading">
       <el-table-column
         v-for="(column, index) in visibleColumns"
         :key="columnRenderKey(column, index)"