优化

src/modules/notifications/pages/PlatformNotificationsView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, ref, watch } from 'vue'
-import { Bell, CheckCheck, Eye, RefreshCcw } from '@lucide/vue'
+import { CheckCheck } from '@lucide/vue'
 import { ElMessage } from 'element-plus'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import AppDrawer from '@/shared/components/AppDrawer.vue'
@@ -78,7 +79,7 @@ onMounted(() => void load())
 </script>
 
 <template>
-  <AdminPage>
+  <AdminPage class="admin-density">
     <ListPageLayout aria-label="我的消息列表">
       <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="我的消息筛选" :fields="queryFields" preference-key="notifications-inbox-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>
@@ -86,14 +87,14 @@ onMounted(() => void load())
         <DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" :loading="loading" :total="result.total" row-key="id" empty-text="暂无消息">
           <template #toolbar-actions><el-button v-if="canReadAll && unreadCount" type="primary" plain :disabled="loading" @click="markAllRead"><CheckCheck :size="16" />全部标为已读</el-button></template>
           <template #pagination-left><span>共 {{ result.total }} 条<span v-if="unreadCount">，未读 {{ unreadCount }} 条</span></span></template>
-          <template #actions="{ row }"><div class="table-actions"><el-button link type="primary" @click="openDetail(row as NotificationInboxItem)"><Eye :size="15" />查看</el-button><el-button v-if="canRead && (row as NotificationInboxItem).status === 'UNREAD'" link type="primary" @click="markRead(row as NotificationInboxItem)"><CheckCheck :size="15" />标为已读</el-button></div></template>
+          <template #actions="{ row }"><div class="density-actions"><el-button class="density-action" data-tone="neutral" @click="openDetail(row as NotificationInboxItem)">查看</el-button><el-button v-if="canRead && (row as NotificationInboxItem).status === 'UNREAD'" class="density-action" data-tone="neutral" @click="markRead(row as NotificationInboxItem)">标为已读</el-button></div></template>
           <template #category="{ row }">{{ notificationCategoryLabel((row as NotificationInboxItem).category) }}</template>
           <template #sentAt="{ row }">{{ formatDate((row as NotificationInboxItem).sentAt) }}</template>
           <template #status="{ row }"><el-tag :type="(row as NotificationInboxItem).status === 'UNREAD' ? 'danger' : 'info'">{{ statusLabel((row as NotificationInboxItem).status) }}</el-tag></template>
         </DataTable>
       </section>
     </ListPageLayout>
-    <AppDrawer v-model="detailOpen" title="消息详情" size="min(680px, 94vw)" :loading="detailLoading" :show-footer="false" destroy-on-close>
+    <AppDrawer class="admin-density admin-density-drawer" v-model="detailOpen" title="消息详情" size="min(680px, 94vw)" :loading="detailLoading" :show-footer="false" destroy-on-close>
       <LoadErrorState v-if="detailError" title="消息详情加载失败" :message="detailError.message" :loading="detailLoading"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
       <article v-else-if="detail" class="notification-detail"><header><h2>{{ detail.title }}</h2><el-tag :type="detail.status === 'UNREAD' ? 'danger' : 'info'">{{ statusLabel(detail.status) }}</el-tag></header><p class="meta">{{ notificationCategoryLabel(detail.category) }} · {{ formatDate(detail.sentAt) }}</p><div class="body">{{ detail.body || '暂无消息内容' }}</div></article>
     </AppDrawer>
@@ -101,10 +102,8 @@ onMounted(() => void load())
 </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; }
-.notification-detail header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-.notification-detail h2 { margin: 0; color: var(--text-primary, #1f2937); font-size: 20px; line-height: 1.4; }
-.notification-detail .meta { color: var(--text-secondary, #64748b); font-size: 12px; }
-.notification-detail .body { padding-top: 16px; border-top: 1px solid var(--border-color, #e5e7eb); color: var(--text-primary, #1f2937); white-space: pre-wrap; line-height: 1.8; }
+.notification-detail header { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5); }
+.notification-detail h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: var(--admin-font-title); line-height: 1.4; }
+.notification-detail .meta { margin: var(--admin-space-5) 0; color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.notification-detail .body { padding-top: var(--admin-space-6); border-top: 1px solid var(--cc-border); color: var(--cc-text); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
 </style>