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

package/src/views/pagesMember/message/detail.tsx

@@ -1,7 +1,7 @@
-import { useLoad } from '@tarojs/taro'
+import Taro, { useLoad } from '@tarojs/taro'
 import { Button, RichText, Text, View } from '@tarojs/components'
 import { useState } from 'react'
-import { navigateAppView, t } from '@liujitcn/kratos-taro-app-core'
+import { homeTabPage, navigateAppView, t, useThemeStore } from '@liujitcn/kratos-taro-app-core'
 import { UniIcon } from '@liujitcn/kratos-taro-app-ui'
 import { defNotificationService } from '../../../api/base/v1/notification'
 import type { Notification } from '../../../rpc/base/v1/notification'
@@ -11,6 +11,7 @@ import './message.scss'
 
 /** Taro 站内信详情页面。 */
 export default function MessageDetailPage() {
+  const themeStore = useThemeStore()
   const [detail, setDetail] = useState<Notification>()
 
   useLoad((options) => {
@@ -53,32 +54,49 @@ export default function MessageDetailPage() {
     navigateAppView(detail.action_target, params)
   }
 
-  if (!detail) return <View className='empty'>{t('core.status.loading')}</View>
+  /** 返回消息列表，页面栈为空时回到首页。 */
+  function onBack() {
+    void Taro.navigateBack({ fail: () => void Taro.reLaunch({ url: homeTabPage }) })
+  }
+
   return (
-    <View className='detail-page'>
-      <Text className='detail-title'>{detail.title}</Text>
-      <View className='detail-meta'>
-        <View className='detail-category' style={{ color: detail.category_color || undefined }}>
-          <UniIcon
-            className='detail-category__icon'
-            type={resolveMessageCategoryIcon(detail.category_icon)}
-            size={18}
-            color={detail.category_color || '#64748b'}
-          />
-          <Text>{detail.category_name}</Text>
-        </View>
-        <Text>{resolveSenderName(detail.sender_name)}</Text>
-        <Text>{detail.received_at}</Text>
+    <View
+      className={`detail-page ${themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'}`}
+    >
+      <View className={`k-page-nav ${process.env.TARO_ENV === 'weapp' ? 'k-page-nav--weapp' : ''}`}>
+        <View className='k-page-nav__back' aria-label={t('common.action.back')} onClick={onBack} />
+        <View className='k-page-nav__title'>{t('system.notification.title')}</View>
+        <View className='k-page-nav__side' aria-hidden />
       </View>
-      {detail.content_format === MessageContentFormat.MESSAGE_CONTENT_FORMAT_RICH_TEXT ? (
-        <RichText className='detail-content-rich' nodes={detail.content} />
+      {detail ? (
+        <>
+          <Text className='detail-title'>{detail.title}</Text>
+          <View className='detail-meta'>
+            <View className='detail-category' style={{ color: detail.category_color || undefined }}>
+              <UniIcon
+                className='detail-category__icon'
+                type={resolveMessageCategoryIcon(detail.category_icon)}
+                size={18}
+                color={detail.category_color || '#64748b'}
+              />
+              <Text>{detail.category_name}</Text>
+            </View>
+            <Text>{resolveSenderName(detail.sender_name)}</Text>
+            <Text>{detail.received_at}</Text>
+          </View>
+          {detail.content_format === MessageContentFormat.MESSAGE_CONTENT_FORMAT_RICH_TEXT ? (
+            <RichText className='detail-content-rich' nodes={detail.content} />
+          ) : (
+            <Text className='detail-content'>{detail.content}</Text>
+          )}
+          {detail.action_type === MessageActionType.MESSAGE_ACTION_TYPE_VIEW_KEY && (
+            <Button className='detail-action' onClick={openAction}>
+              {t('common.action.view')}
+            </Button>
+          )}
+        </>
       ) : (
-        <Text className='detail-content'>{detail.content}</Text>
-      )}
-      {detail.action_type === MessageActionType.MESSAGE_ACTION_TYPE_VIEW_KEY && (
-        <Button className='detail-action' onClick={openAction}>
-          {t('common.action.view')}
-        </Button>
+        <View className='detail-loading'>{t('core.status.loading')}</View>
       )}
     </View>
   )

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

@@ -1,7 +1,8 @@
+import type { CSSProperties } from 'react'
 import { useDidShow } from '@tarojs/taro'
-import { Button, ScrollView, Text, View } from '@tarojs/components'
+import { Button, Text, View } from '@tarojs/components'
 import { useRef, useState } from 'react'
-import { navigateAppView, t } from '@liujitcn/kratos-taro-app-core'
+import { getMpCapsuleRightGap, navigateAppView, t, useThemeStore } from '@liujitcn/kratos-taro-app-core'
 import { UniIcon } from '@liujitcn/kratos-taro-app-ui'
 import { defNotificationService } from '../../../api/base/v1/notification'
 import type { Notification, NotificationCategory } from '../../../rpc/base/v1/notification'
@@ -12,6 +13,10 @@ import './message.scss'
 
 /** Taro 站内信收件箱页面。 */
 export default function MessageInboxPage() {
+  const themeStore = useThemeStore()
+  /** MP-WEIXIN 原生胶囊按钮右侧避让宽度，写入 --mp-capsule-gap 供 .k-top 预留空间。 */
+  const capsuleGap = getMpCapsuleRightGap()
+  const topNavStyle = { '--mp-capsule-gap': `${capsuleGap}px` } as CSSProperties
   const [items, setItems] = useState<Notification[]>([])
   const [cursorId, setCursorId] = useState(0)
   const [loading, setLoading] = useState(false)
@@ -151,119 +156,123 @@ export default function MessageInboxPage() {
   }
 
   return (
-    <View className='message-page'>
-      <View className='message-header'>
+    <View
+      className={`message-page ${
+        themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'
+      }`}
+    >
+      <View className='k-top message-header' style={topNavStyle}>
         <View className='message-header__title'>
-          <Text className='message-title'>{t('system.notification.title')}</Text>
+          <Text className='k-top__t2'>{t('system.notification.title')}</Text>
           {unreadTotal > 0 && <View className='message-unread-dot' aria-hidden='true' />}
         </View>
         {selectedView !== NotificationView.NOTIFICATION_VIEW_ARCHIVED && unreadTotal > 0 && (
-          <Button
-            className='message-action message-action--read message-header__action'
+          <View
+            className='k-ch k-ch--pri'
             onClick={() => void markAllRead().catch(() => undefined)}
           >
             {t('system.notification.mark_all_read')}
-          </Button>
-        )}
-      </View>
-      <View className='message-controls'>
-        <ScrollView className='message-category-scroll' scrollX showScrollbar={false}>
-          <View className='message-category-list'>
-            <Button
-              className={categoryId === undefined ? 'message-category active' : 'message-category'}
-              onClick={() => changeCategory()}
-            >
-              {t('system.notification.view.inbox')}
-            </Button>
-            {categoryOptions.map((category) => (
-              <Button
-                key={category.id}
-                className={
-                  categoryId === category.id ? 'message-category active' : 'message-category'
-                }
-                onClick={() => changeCategory(category.id)}
-              >
-                <UniIcon
-                  className='message-category__icon'
-                  type={resolveMessageCategoryIcon(category.icon)}
-                  size={16}
-                  color={categoryId === category.id ? '#fff' : category.color || '#64748b'}
-                />
-                {category.name}
-              </Button>
-            ))}
           </View>
-        </ScrollView>
-        <View className='message-tabs'>
-          {viewOptions.map((option) => (
-            <Button
-              key={option.value}
-              className={selectedView === option.value ? 'message-tab active' : 'message-tab'}
-              onClick={() => changeView(option.value)}
-            >
-              {t(option.key)}
-            </Button>
-          ))}
-        </View>
+        )}
       </View>
-      {items.map((item) => (
+      <View className='k-chips'>
         <View
-          className='message-item'
-          key={item.id}
-          onClick={() => void openDetail(item).catch(() => undefined)}
+          className={`k-ch${categoryId === undefined ? ' k-ch--pri' : ''}`}
+          onClick={() => changeCategory()}
         >
-          <View className='message-item__main'>
-            <Text className={`message-item__title ${item.read_at ? '' : 'unread'}`}>
-              {item.title}
-            </Text>
-            <Text className='message-item__time'>{item.received_at}</Text>
-          </View>
-          <View className='message-item__category'>
+          {t('system.notification.view.inbox')}
+        </View>
+        {categoryOptions.map((category) => (
+          <View
+            key={category.id}
+            className={`k-ch${categoryId === category.id ? ' k-ch--pri' : ''}`}
+            onClick={() => changeCategory(category.id)}
+          >
             <UniIcon
-              className='message-item__category-icon'
-              type={resolveMessageCategoryIcon(item.category_icon)}
+              type={resolveMessageCategoryIcon(category.icon)}
               size={16}
-              color={item.category_color || '#64748b'}
+              color={category.color || '#64748b'}
             />
-            <Text>{item.category_name}</Text>
+            {category.name}
           </View>
-          <View className='message-item__actions'>
-            {selectedView !== NotificationView.NOTIFICATION_VIEW_ARCHIVED && item.allow_archive && (
-              <Button
-                size='mini'
-                onClick={(event) => {
-                  event.stopPropagation()
-                  void toggleArchive(item).catch(() => undefined)
-                }}
-              >
-                {t('system.notification.action.archive')}
-              </Button>
-            )}
-            {selectedView === NotificationView.NOTIFICATION_VIEW_ARCHIVED && (
-              <Button
-                size='mini'
-                onClick={(event) => {
-                  event.stopPropagation()
-                  void toggleArchive(item).catch(() => undefined)
-                }}
-              >
-                {t('system.notification.action.restore')}
-              </Button>
-            )}
-            {item.allow_delete && (
-              <Button
-                size='mini'
-                onClick={(event) => {
-                  event.stopPropagation()
-                  void deleteItem(item).catch(() => undefined)
-                }}
-              >
-                {t('system.notification.action.delete')}
-              </Button>
+        ))}
+      </View>
+      <View className='k-pills message-tabs'>
+        {viewOptions.map((option) => (
+          <View
+            key={option.value}
+            className={`k-pills__item message-tab${
+              selectedView === option.value ? ' k-pills__item--on' : ''
+            }`}
+            onClick={() => changeView(option.value)}
+          >
+            {t(option.key)}
+          </View>
+        ))}
+      </View>
+      <View className='k-msg-list'>
+        {items.map((item) => (
+          <View
+            className={`k-msg-item${item.read_at ? '' : ' k-msg-item--unread'}`}
+            key={item.id}
+            onClick={() => void openDetail(item).catch(() => undefined)}
+          >
+            <View className='k-msg-item__head'>
+              <View className='k-msg-item__icon'>
+                <UniIcon
+                  type={resolveMessageCategoryIcon(item.category_icon)}
+                  size={18}
+                  color={item.category_color || '#64748b'}
+                />
+              </View>
+              <View className='message-item__body'>
+                <Text className='k-msg-item__title'>{item.title}</Text>
+                <Text className='k-msg-item__meta'>{item.category_name}</Text>
+              </View>
+              <Text className='k-msg-item__time'>{item.received_at}</Text>
+            </View>
+            {(selectedView === NotificationView.NOTIFICATION_VIEW_ARCHIVED ||
+              item.allow_archive ||
+              item.allow_delete) && (
+              <View className='k-msg-item__actions'>
+                {selectedView !== NotificationView.NOTIFICATION_VIEW_ARCHIVED && item.allow_archive && (
+                  <Text
+                    className='k-msg-item__action'
+                    onClick={(event) => {
+                      event.stopPropagation()
+                      void toggleArchive(item).catch(() => undefined)
+                    }}
+                  >
+                    {t('system.notification.action.archive')}
+                  </Text>
+                )}
+                {selectedView === NotificationView.NOTIFICATION_VIEW_ARCHIVED && (
+                  <Text
+                    className='k-msg-item__action'
+                    onClick={(event) => {
+                      event.stopPropagation()
+                      void toggleArchive(item).catch(() => undefined)
+                    }}
+                  >
+                    {t('system.notification.action.restore')}
+                  </Text>
+                )}
+                {item.allow_delete && (
+                  <Text
+                    className='k-msg-item__action'
+                    onClick={(event) => {
+                      event.stopPropagation()
+                      void deleteItem(item).catch(() => undefined)
+                    }}
+                  >
+                    {t('system.notification.action.delete')}
+                  </Text>
+                )}
+              </View>
             )}
           </View>
-        </View>
-      ))}
+        ))}
+      </View>
       {!finished && (
         <Button
           className='load-more'

package/src/views/pagesMember/message/message.scss

@@ -1,245 +1,144 @@
 .message-page {
   box-sizing: border-box;
   min-height: 100vh;
-  padding: 16px 24px calc(120px + env(safe-area-inset-bottom));
-  background: var(--kratos-color-background, #f7f8fa);
-  color: var(--kratos-color-text, #1f2937);
+  padding: 16px 24px calc(200px + env(safe-area-inset-bottom));
+  background: var(--kratos-bg-gradient);
+  color: var(--kratos-color-text);
 }
 
 .message-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
   padding: 20px 4px 24px;
 }
+
 .message-header__title {
   display: flex;
   align-items: center;
   min-width: 0;
 }
-.message-title {
-  display: block;
-  color: var(--kratos-color-text, #1f2937);
-  font-size: 40px;
-  font-weight: 700;
-  line-height: 1.35;
-}
+
 .message-unread-dot {
   width: 12px;
   height: 12px;
-  margin-left: 8px;
+  margin-left: 12px;
   border-radius: 50%;
-  background: #e5484d;
-}
-.message-controls {
-  margin-bottom: 24px;
-}
-.message-category-scroll {
-  width: 100%;
-  white-space: nowrap;
-}
-.message-category-list {
-  display: flex;
-  gap: 12px;
-  width: max-content;
-  padding-bottom: 4px;
-}
-.message-category,
-.message-tabs,
-.message-item__actions {
-  display: flex;
-  align-items: center;
-}
-.message-category {
-  flex-shrink: 0;
-  width: auto;
-  height: 64px;
-  margin: 0;
-  padding: 0 22px;
-  border: 1px solid var(--kratos-color-border, #e2e8f0);
-  border-radius: 32px;
-  background: #fff;
-  color: var(--kratos-color-text-muted, #6b7280);
-  font-size: 24px;
-  line-height: 64px;
-  white-space: nowrap;
-}
-.message-category__icon,
-.message-item__category-icon {
-  flex: 0 0 auto;
-  margin-right: 8px;
-}
-.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 16px var(--kratos-color-danger);
 }
+
 .message-tabs {
-  gap: 12px;
-  margin-top: 18px;
-  padding: 6px;
-  border-radius: 12px;
-  background: #eef1f3;
-}
-.message-tab::after,
-.message-category::after,
-.message-action::after,
-.message-item__actions button::after,
-.load-more::after {
-  border: 0;
-}
-.message-item__actions {
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 12px;
+  display: flex;
+  margin-top: 4px;
 }
+
 .message-tab {
-  box-sizing: border-box;
   flex: 1;
-  min-width: 0;
-  height: 68px;
-  margin: 0;
-  padding: 0 12px;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--kratos-color-text-muted, #6b7280);
-  font-size: 26px;
-  line-height: 68px;
-  white-space: nowrap;
-}
-.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: 68px;
-  margin: 0;
-  padding: 0 20px;
-  border: 0;
-  border-radius: 8px;
-  background: #eef1f3;
-  color: var(--kratos-color-text, #1f2937);
-  font-size: 24px;
-  line-height: 68px;
-  white-space: nowrap;
-}
-.message-action--read {
-  background: #e8f8f4;
-  color: var(--kratos-color-primary, #16806d);
-}
-.message-header__action {
-  height: 56px;
-  padding: 0 18px;
-  line-height: 56px;
-}
-.message-item__actions button {
-  height: 56px;
-  padding: 0 16px;
-  font-size: 22px;
-  line-height: 56px;
-}
-.message-item {
-  margin-bottom: 16px;
-  padding: 28px;
-  border-radius: 12px;
-  background: #fff;
-  box-shadow: 0 4px 16px rgba(31, 41, 55, 0.05);
 }
-.message-item__main {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-}
-.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: 24px;
-}
-.message-item__time {
-  flex-shrink: 0;
+  min-width: 0;
 }
-.message-item__category {
-  display: flex;
-  align-items: center;
-  margin-top: 14px;
+
+.message-item__body .k-msg-item__meta {
+  display: block;
 }
+
 .load-more {
   box-sizing: border-box;
   width: 100%;
-  height: 72px;
+  height: 76px;
   margin-top: 24px;
   padding: 0 24px;
+  border: 1PX solid var(--kratos-color-border);
+  border-radius: 16px;
+  background: var(--kratos-color-surface-2);
+  color: var(--kratos-color-text);
+  font-size: 26px;
+  line-height: 74px;
+}
+
+.load-more::after {
   border: 0;
-  border-radius: 8px;
-  background: #eef1f3;
-  color: var(--kratos-color-text, #1f2937);
-  font-size: 28px;
-  line-height: 72px;
 }
+
 .empty {
   padding: 120px 0;
-  color: var(--kratos-color-text-muted, #6b7280);
+  color: var(--kratos-color-text-dim);
+  font-family: var(--kratos-font-mono);
   text-align: center;
 }
+
 .detail-page {
   box-sizing: border-box;
   min-height: 100vh;
   padding: 24px 30px calc(96px + env(safe-area-inset-bottom));
-  background: var(--kratos-color-background, #f7f8fa);
+  background: var(--kratos-bg-gradient);
+  color: var(--kratos-color-text);
 }
+
+.detail-loading {
+  padding: 120px 0;
+  color: var(--kratos-color-text-dim);
+  font-family: var(--kratos-font-mono);
+  text-align: center;
+}
+
 .detail-title {
   display: block;
-  color: var(--kratos-color-text, #1f2937);
+  padding-top: 16px;
+  color: var(--kratos-color-text);
   font-size: 42px;
-  font-weight: 700;
+  font-weight: 800;
   line-height: 1.35;
 }
+
 .detail-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   margin: 24px 0 36px;
-  color: var(--kratos-color-text-muted, #6b7280);
-  font-size: 24px;
+  padding-bottom: 28px;
+  border-bottom: 1PX solid var(--kratos-color-border);
+  color: var(--kratos-color-text-muted);
+  font-size: 22px;
+  font-family: var(--kratos-font-mono);
 }
+
 .detail-category {
   display: inline-flex;
   align-items: center;
 }
+
 .detail-category__icon {
   margin-right: 8px;
 }
-.detail-content {
-  color: var(--kratos-color-text, #1f2937);
-  font-size: 30px;
-  line-height: 1.8;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
+
+.detail-content,
 .detail-content-rich {
   display: block;
-  color: var(--kratos-color-text, #1f2937);
+  padding: 28px;
+  border: 1PX solid var(--kratos-color-border);
+  border-radius: 20px;
+  background: var(--kratos-color-surface);
+  color: var(--kratos-color-text);
   font-size: 30px;
   line-height: 1.8;
   overflow-wrap: anywhere;
 }
+
+.detail-content {
+  white-space: pre-wrap;
+}
+
+.detail-action {
+  width: 100%;
+  height: 88px;
+  margin-top: 36px;
+  border: 1PX solid var(--kratos-color-border-accent);
+  border-radius: 20px;
+  background: var(--kratos-color-primary-soft);
+  color: var(--kratos-color-primary);
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 86px;
+}