@liujitcn/kratos-uni-app-system 0.0.78 → 0.0.80

package/src/views/pagesMember/message/index.vue

@@ -2,12 +2,17 @@
 import { onShow } from '@dcloudio/uni-app'
 import { ref } from 'vue'
 import { navigateAppView, t } from '@liujitcn/kratos-uni-app-core'
+import { useThemeStore } from '@liujitcn/kratos-uni-app-core/stores'
+import { getMpCapsuleRightGap } from '@liujitcn/kratos-uni-app-core/utils/index'
 import { defNotificationService } from '../../../api/base/v1/notification'
 import type { Notification, NotificationCategory } from '../../../rpc/base/v1/notification'
 import { NotificationView } from '../../../rpc/base/v1/notification'
 import { notificationUnreadTotal, refreshNotificationSummary } from '../../../notification'
 import { resolveMessageCategoryIcon } from './icons'
 
+const themeStore = useThemeStore()
+/** MP-WEIXIN 原生胶囊按钮右侧避让宽度，写入 --mp-capsule-gap 供 .k-top 预留空间。 */
+const capsuleGap = getMpCapsuleRightGap()
 const items = ref<Notification[]>([])
 const loading = ref(false)
 const cursorId = ref(0)
@@ -113,93 +118,105 @@ async function openDetail(item: Notification) {
 </script>
 
 <template>
-  <view class="message-page">
-    <view class="message-header">
+  <view class="message-page" :class="themeStore.themeClass">
+    <view class="k-top message-header" :style="{ '--mp-capsule-gap': `${capsuleGap}px` }">
       <view class="message-header__title">
-        <text class="message-title">{{ t('system.notification.title') }}</text>
+        <text class="k-top__t2">{{ t('system.notification.title') }}</text>
         <view v-if="notificationUnreadTotal > 0" class="message-unread-dot" aria-hidden="true" />
       </view>
-      <button
+      <view
         v-if="
           selectedView !== NotificationView.NOTIFICATION_VIEW_ARCHIVED &&
           notificationUnreadTotal > 0
         "
-        class="message-action message-action--read message-header__action"
+        class="k-ch k-ch--pri"
         @tap="markAllRead"
       >
         {{ t('system.notification.mark_all_read') }}
-      </button>
-    </view>
-    <view class="message-controls">
-      <scroll-view class="message-category-scroll" scroll-x :show-scrollbar="false">
-        <view class="message-category-list">
-          <button
-            class="message-category"
-            :class="{ active: categoryId === undefined }"
-            @tap="changeCategory()"
-          >
-            {{ t('system.notification.view.inbox') }}
-          </button>
-          <button
-            v-for="category in categoryOptions"
-            :key="category.id"
-            class="message-category"
-            :class="{ active: categoryId === category.id }"
-            @tap="changeCategory(category.id)"
-          >
-            <uni-icons
-              class="message-category__icon"
-              :type="resolveMessageCategoryIcon(category.icon)"
-              size="16"
-              :color="categoryId === category.id ? '#fff' : category.color || '#64748b'"
-              aria-hidden="true"
-            />
-            {{ category.name }}
-          </button>
-        </view>
-      </scroll-view>
-      <view class="message-tabs">
-        <button
-          v-for="option in viewOptions"
-          :key="option.value"
-          :class="['message-tab', { active: selectedView === option.value }]"
-          @tap="changeView(option.value)"
-        >
-          {{ t(option.key) }}
-        </button>
       </view>
     </view>
-    <view v-for="item in items" :key="item.id" class="message-item" @tap="openDetail(item)">
-      <view class="message-item__main">
-        <text :class="['message-item__title', { unread: !item.read_at }]">{{ item.title }}</text>
-        <text class="message-item__time">{{ item.received_at }}</text>
+    <view class="k-chips">
+      <view class="k-ch" :class="{ 'k-ch--pri': categoryId === undefined }" @tap="changeCategory()">
+        {{ t('system.notification.view.inbox') }}
       </view>
-      <view class="message-item__category">
+      <view
+        v-for="category in categoryOptions"
+        :key="category.id"
+        class="k-ch"
+        :class="{ 'k-ch--pri': categoryId === category.id }"
+        @tap="changeCategory(category.id)"
+      >
         <uni-icons
-          class="message-item__category-icon"
-          :type="resolveMessageCategoryIcon(item.category_icon)"
+          :type="resolveMessageCategoryIcon(category.icon)"
           size="16"
-          :color="item.category_color || '#64748b'"
+          :color="category.color || '#64748b'"
           aria-hidden="true"
         />
-        <text>{{ item.category_name }}</text>
+        {{ category.name }}
       </view>
-      <view class="message-item__actions">
-        <button
-          v-if="selectedView !== NotificationView.NOTIFICATION_VIEW_ARCHIVED && item.allow_archive"
-          @tap.stop="toggleArchive(item)"
-        >
-          {{ t('system.notification.action.archive') }}
-        </button>
-        <button
-          v-if="selectedView === NotificationView.NOTIFICATION_VIEW_ARCHIVED"
-          @tap.stop="toggleArchive(item)"
+    </view>
+    <view class="k-pills message-tabs">
+      <view
+        v-for="option in viewOptions"
+        :key="option.value"
+        class="k-pills__item message-tab"
+        :class="{ 'k-pills__item--on': selectedView === option.value }"
+        @tap="changeView(option.value)"
+      >
+        {{ t(option.key) }}
+      </view>
+    </view>
+    <view class="k-msg-list">
+      <view
+        v-for="item in items"
+        :key="item.id"
+        class="k-msg-item"
+        :class="{ 'k-msg-item--unread': !item.read_at }"
+        @tap="openDetail(item)"
+      >
+        <view class="k-msg-item__head">
+          <view class="k-msg-item__icon">
+            <uni-icons
+              :type="resolveMessageCategoryIcon(item.category_icon)"
+              size="18"
+              :color="item.category_color || '#64748b'"
+              aria-hidden="true"
+            />
+          </view>
+          <view class="message-item__body">
+            <text class="k-msg-item__title">{{ item.title }}</text>
+            <text class="k-msg-item__meta">{{ item.category_name }}</text>
+          </view>
+          <text class="k-msg-item__time">{{ item.received_at }}</text>
+        </view>
+        <view
+          v-if="
+            selectedView === NotificationView.NOTIFICATION_VIEW_ARCHIVED ||
+            item.allow_archive ||
+            item.allow_delete
+          "
+          class="k-msg-item__actions"
         >
-          {{ t('system.notification.action.restore') }}
-        </button>
-        <button v-if="item.allow_delete" @tap.stop="deleteItem(item)">
-          {{ t('system.notification.action.delete') }}
-        </button>
+          <text
+            v-if="
+              selectedView !== NotificationView.NOTIFICATION_VIEW_ARCHIVED && item.allow_archive
+            "
+            class="k-msg-item__action"
+            @tap.stop="toggleArchive(item)"
+          >
+            {{ t('system.notification.action.archive') }}
+          </text>
+          <text
+            v-if="selectedView === NotificationView.NOTIFICATION_VIEW_ARCHIVED"
+            class="k-msg-item__action"
+            @tap.stop="toggleArchive(item)"
+          >
+            {{ t('system.notification.action.restore') }}
+          </text>
+          <text v-if="item.allow_delete" class="k-msg-item__action" @tap.stop="deleteItem(item)">
+            {{ t('system.notification.action.delete') }}
+          </text>
+        </view>
       </view>
     </view>
     <button v-if="!finished" class="load-more" :loading="loading" @tap="loadMore">
@@ -212,18 +229,20 @@ async function openDetail(item: Notification) {
 </template>
 
 <style scoped lang="scss">
+/* 仅页面局部布局；视觉词汇统一来自 core 的 .k-* 全局类。 */
 .message-page {
   box-sizing: border-box;
   min-height: 100vh;
-  padding: 16rpx 24rpx calc(120rpx + env(safe-area-inset-bottom));
-  background: var(--kratos-color-background, #f7f8fa);
-  color: var(--kratos-color-text, #1f2937);
+  padding: calc(16rpx + env(safe-area-inset-top)) 24rpx calc(200rpx + env(safe-area-inset-bottom));
+  background: var(--kratos-bg-gradient);
+  color: var(--kratos-color-text);
 }
+/* #ifdef MP-WEIXIN */
+.message-page {
+  padding-top: calc(44px + 16rpx);
+}
+/* #endif */
 .message-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20rpx;
   padding: 20rpx 4rpx 24rpx;
 }
 .message-header__title {
@@ -231,181 +250,45 @@ async function openDetail(item: Notification) {
   align-items: center;
   min-width: 0;
 }
-.message-title {
-  display: block;
-  font-size: 40rpx;
-  font-weight: 700;
-  line-height: 1.35;
-  color: var(--kratos-color-text, #1f2937);
-}
 .message-unread-dot {
   width: 12rpx;
   height: 12rpx;
-  margin-left: 8rpx;
+  margin-left: 12rpx;
   border-radius: 50%;
-  background: #e5484d;
-}
-.message-controls {
-  margin-bottom: 24rpx;
-}
-.message-category-scroll {
-  width: 100%;
-  white-space: nowrap;
-}
-.message-category-list {
-  display: flex;
-  gap: 12rpx;
-  width: max-content;
-  padding-bottom: 4rpx;
-}
-.message-category,
-.message-tabs,
-.message-item__actions {
-  display: flex;
-  align-items: center;
-}
-.message-category {
-  flex-shrink: 0;
-  height: 64rpx;
-  margin: 0;
-  padding: 0 22rpx;
-  border: 1rpx solid var(--kratos-color-border, #e2e8f0);
-  border-radius: 32rpx;
-  background: #fff;
-  color: var(--kratos-color-text-muted, #6b7280);
-  font-size: 24rpx;
-  line-height: 64rpx;
-  white-space: nowrap;
-}
-.message-category.active {
-  border-color: var(--kratos-color-primary, #27ba9b);
-  background: var(--kratos-color-primary, #27ba9b);
-  color: #fff;
+  background: var(--kratos-color-danger);
+  box-shadow: 0 0 16rpx var(--kratos-color-danger);
 }
 .message-tabs {
-  gap: 12rpx;
-  margin-top: 18rpx;
-  padding: 6rpx;
-  border-radius: 12rpx;
-  background: #eef1f3;
-}
-.message-item__actions {
-  gap: 12rpx;
-  flex-wrap: wrap;
-  justify-content: flex-end;
+  display: flex;
+  margin-top: 4rpx;
 }
 .message-tab {
-  box-sizing: border-box;
   flex: 1;
-  min-width: 0;
-  height: 68rpx;
-  margin: 0;
-  padding: 0 12rpx;
-  border: 0;
-  border-radius: 8rpx;
-  background: transparent;
-  color: var(--kratos-color-text-muted, #6b7280);
-  font-size: 26rpx;
-  line-height: 68rpx;
-  white-space: nowrap;
-}
-.message-tab::after,
-.message-category::after,
-.message-action::after,
-.message-item__actions button::after,
-.load-more::after {
-  border: 0;
-}
-.message-tab.active {
-  background: var(--kratos-color-primary, #27ba9b);
-  color: #fff;
-}
-.message-action,
-.message-item__actions button {
-  box-sizing: border-box;
-  flex-shrink: 0;
-  width: auto;
-  height: 68rpx;
-  margin: 0;
-  padding: 0 20rpx;
-  border: 0;
-  border-radius: 8rpx;
-  background: #eef1f3;
-  color: var(--kratos-color-text, #1f2937);
-  font-size: 24rpx;
-  line-height: 68rpx;
-  white-space: nowrap;
-}
-.message-action--read {
-  background: #e8f8f4;
-  color: var(--kratos-color-primary, #16806d);
 }
-.message-header__action {
-  height: 56rpx;
-  padding: 0 18rpx;
-  line-height: 56rpx;
-}
-.message-item__actions button {
-  height: 56rpx;
-  padding: 0 16rpx;
-  font-size: 22rpx;
-  line-height: 56rpx;
-}
-.message-item {
-  margin-bottom: 16rpx;
-  padding: 28rpx;
-  border-radius: 12rpx;
-  background: #fff;
-  box-shadow: 0 4rpx 16rpx rgba(31, 41, 55, 0.05);
-}
-.message-item__main {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20rpx;
-}
-.message-item__title {
-  display: block;
-  min-width: 0;
+.message-item__body {
   flex: 1;
-  overflow: hidden;
-  color: var(--kratos-color-text, #1f2937);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.message-item__title.unread {
-  color: var(--kratos-color-text, #1f2937);
-  font-weight: 700;
-}
-.message-item__time,
-.message-item__category {
-  color: var(--kratos-color-text-muted, #6b7280);
-  font-size: 24rpx;
-}
-.message-item__time {
-  flex-shrink: 0;
-}
-.message-item__category {
-  display: flex;
-  align-items: center;
-  margin-top: 14rpx;
+  min-width: 0;
 }
 .load-more {
   box-sizing: border-box;
   width: 100%;
-  height: 72rpx;
+  height: 76rpx;
   margin-top: 24rpx;
   padding: 0 24rpx;
+  border: 1rpx solid var(--kratos-color-border);
+  border-radius: 16rpx;
+  background: var(--kratos-color-surface-2);
+  color: var(--kratos-color-text);
+  font-size: 26rpx;
+  line-height: 74rpx;
+}
+.load-more::after {
   border: 0;
-  border-radius: 8rpx;
-  background: #eef1f3;
-  color: var(--kratos-color-text, #1f2937);
-  font-size: 28rpx;
-  line-height: 72rpx;
 }
 .empty {
   padding: 120rpx 0;
-  color: var(--kratos-color-text-muted, #6b7280);
+  color: var(--kratos-color-text-dim);
+  font-family: var(--kratos-font-mono);
   text-align: center;
 }
 </style>