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

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

@@ -23,6 +23,7 @@ import Composer from './components/Composer.vue'
 import SessionDrawer from './components/SessionDrawer.vue'
 import WelcomePanel from './components/WelcomePanel.vue'
 import { navigateAppRoute, useI18n } from '@liujitcn/kratos-uni-app-core'
+import { useThemeStore } from '@liujitcn/kratos-uni-app-core/stores'
 import {
   type AiStreamEvent,
   type AiStreamPayload,
@@ -72,6 +73,9 @@ const PENDING_MESSAGE_ID = 'pending'
 const MAX_ATTACHMENT_COUNT = 6
 const STARTER_PROMPT_PAGE_SIZE = 4
 const { locale, t } = useI18n()
+const themeStore = useThemeStore()
+/** 导航图标随主题取色，uni-icons 的 color 属性不接受 CSS 变量。 */
+const navIconColor = computed(() => (themeStore.theme === 'light' ? '#102232' : '#e9f4f6'))
 
 const windowInfo = uni.getWindowInfo()
 let safeAreaTop =
@@ -260,7 +264,8 @@ const deleteSession = async (sessionID: string) => {
       title: session?.title || t('system.ai.current_session'),
     }),
     confirmText: t('common.action.delete'),
-    confirmColor: '#cf4444',
+    confirmColor: themeStore.theme === 'light' ? '#e0324f' : '#ff4d6d',
+    cancelColor: themeStore.theme === 'light' ? '#5a7083' : '#8aa0b4',
   })
   if (!result.confirm) {
     return
@@ -476,13 +481,21 @@ async function loadAiShortcuts() {
   }
   loadingShortcuts.value = true
   try {
-    const [response, providerResponse, knowledgeResponse] = await Promise.all([
+    const [shortcutResult, providerResult, knowledgeResult] = await Promise.allSettled([
       defAiToolService.ListAiShortcut({ terminal: AI_TERMINAL }),
       defAiModelService.ListAiProviderModelOptions({}),
       defAiKnowledgeService.ListAiKnowledgeOptions({}),
     ])
+    if (shortcutResult.status === 'rejected') throw shortcutResult.reason
+    if (providerResult.status === 'rejected') throw providerResult.reason
+    if (knowledgeResult.status === 'rejected' && isAuthExpiredError(knowledgeResult.reason)) {
+      throw knowledgeResult.reason
+    }
+    const response = shortcutResult.value
+    const providerResponse = providerResult.value
     modelProviders.value = providerResponse.providers ?? []
-    knowledgeOptions.value = knowledgeResponse.options ?? []
+    knowledgeOptions.value =
+      knowledgeResult.status === 'fulfilled' ? (knowledgeResult.value.options ?? []) : []
     selectedKnowledgeIds.value = selectedKnowledgeIds.value.filter((id) =>
       knowledgeOptions.value.some((option) => option.id === id),
     )
@@ -497,6 +510,7 @@ async function loadAiShortcuts() {
     selectedProviderId.value = 0
     selectedModelName.value = ''
     knowledgeOptions.value = []
+    selectedKnowledgeIds.value = []
     showError(error, t('system.ai.load_shortcuts_failed'))
   } finally {
     loadingShortcuts.value = false
@@ -1262,15 +1276,21 @@ function showError(error: unknown, fallback: string) {
 </script>
 
 <template>
-  <view class="ai-page">
-    <view class="ai-navbar">
-      <button class="nav-back-button" hover-class="none" @tap="navigateBack">
-        <uni-icons type="left" size="24" color="#111" />
-      </button>
-      <view class="ai-navbar__title">{{ t('system.ai.chat_title') }}</view>
-      <button class="nav-menu-button" hover-class="none" @tap="toggleSessionDrawer">
-        <uni-icons type="bars" size="24" color="#111" />
-      </button>
+  <view class="ai-page" :class="themeStore.themeClass">
+    <view class="ai-navbar k-page-nav">
+      <view
+        class="k-page-nav__back"
+        :aria-label="t('common.action.back')"
+        @tap="navigateBack"
+      ></view>
+      <view class="k-page-nav__title">{{ t('system.ai.chat_title') }}</view>
+      <view
+        class="k-page-nav__side k-ic"
+        :aria-label="t('system.ai.history')"
+        @tap="toggleSessionDrawer"
+      >
+        <uni-icons type="bars" size="22" :color="navIconColor" />
+      </view>
     </view>
 
     <scroll-view
@@ -1383,12 +1403,6 @@ function showError(error: unknown, fallback: string) {
 </template>
 
 <style lang="scss">
-page {
-  height: 100%;
-  overflow: hidden;
-  background-color: #f6f6f6;
-}
-
 .ai-page {
   position: relative;
   display: flex;
@@ -1397,79 +1411,13 @@ page {
   height: 100vh;
   height: 100dvh;
   overflow: hidden;
-  color: #333;
-  background-color: #f6f6f6;
+  color: var(--kratos-color-text);
+  background: var(--kratos-bg-gradient);
 }
 
 .ai-navbar {
   flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  background-color: #fff;
-  border-bottom: 1rpx solid #eceef1;
-
-  height: 44px;
-
-  /* #ifdef MP-WEIXIN */
-  height: 88px;
-  padding-top: 44px;
-  /* #endif */
-}
-
-/* #ifdef MP-WEIXIN */
-.ai-navbar {
-  position: relative;
-}
-
-.ai-navbar .nav-back-button,
-.ai-navbar .nav-menu-button {
-  position: absolute;
-  bottom: 0;
-}
-
-.ai-navbar .nav-back-button {
-  left: 0;
-}
-
-.ai-navbar .nav-menu-button {
-  left: 56rpx;
-  right: auto;
-}
-
-.ai-navbar__title {
-  width: 100%;
-  height: 44px;
-  line-height: 44px;
-}
-/* #endif */
-
-.nav-back-button,
-.nav-menu-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 88rpx;
-  height: 44px;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  line-height: normal;
-}
-
-.nav-back-button::after,
-.nav-menu-button::after {
-  border: 0;
-}
-
-.ai-navbar__title {
-  flex: 1;
-  color: #111;
-  font-size: 32rpx;
-  font-weight: 600;
-  text-align: center;
+  padding: 0 24rpx;
 }
 
 .ai-body {
@@ -1502,16 +1450,21 @@ page {
 }
 
 .user-bubble {
-  color: #fff;
-  background-color: #27ba9b;
+  color: var(--kratos-color-on-primary);
+  background: linear-gradient(
+    135deg,
+    var(--kratos-color-primary-deep) 0%,
+    var(--kratos-color-primary) 100%
+  );
   border-bottom-right-radius: 6rpx;
+  box-shadow: var(--kratos-glow);
 }
 
 .ai-bubble {
-  color: #333;
-  background-color: #fff;
+  color: var(--kratos-color-text);
+  background: var(--kratos-color-surface);
+  border: 1rpx solid var(--kratos-color-border);
   border-bottom-left-radius: 6rpx;
-  box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.05);
 }
 
 .bubble.is-streaming {
@@ -1529,12 +1482,13 @@ page {
   align-items: center;
   gap: 12rpx;
   margin-bottom: 8rpx;
-  color: #8a8f99;
+  color: var(--kratos-color-text-muted);
   font-size: 20rpx;
+  font-family: var(--kratos-font-mono);
 }
 
 .reply-tag {
-  color: #16806d;
+  color: var(--kratos-color-primary);
 }
 
 .attachment-list {
@@ -1548,8 +1502,9 @@ page {
   max-width: 100%;
   padding: 12rpx;
   margin-top: 8rpx;
-  border-radius: 10rpx;
-  background-color: rgba(255, 255, 255, 0.72);
+  border: 1rpx solid var(--kratos-color-border);
+  border-radius: 12rpx;
+  background: var(--kratos-color-surface-2);
   box-sizing: border-box;
 }
 
@@ -1557,12 +1512,13 @@ page {
   flex-shrink: 0;
   width: 48rpx;
   height: 48rpx;
-  border-radius: 8rpx;
-  color: #16806d;
-  font-size: 22rpx;
-  line-height: 48rpx;
+  border-radius: 10rpx;
+  color: var(--kratos-color-primary);
+  font-size: 20rpx;
+  line-height: 46rpx;
   text-align: center;
-  background-color: #e8f8f4;
+  background: var(--kratos-color-primary-soft);
+  border: 1rpx solid var(--kratos-color-primary-edge);
 }
 
 .attachment-info {
@@ -1583,14 +1539,16 @@ page {
 
 .attachment-meta {
   margin-top: 4rpx;
-  color: #8a8f99;
+  color: var(--kratos-color-text-muted);
   font-size: 19rpx;
+  font-family: var(--kratos-font-mono);
 }
 
 .tool-row,
 .loading-session {
-  color: #8a8f99;
+  color: var(--kratos-color-text-muted);
   font-size: 22rpx;
+  font-family: var(--kratos-font-mono);
   line-height: 34rpx;
 }
 

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

@@ -2,11 +2,14 @@
 import { onLoad } 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 { homeTabPage } from '@liujitcn/kratos-uni-app-core/utils/navigation'
 import { defNotificationService } from '../../../api/base/v1/notification'
 import type { Notification } from '../../../rpc/base/v1/notification'
 import { MessageActionType, MessageContentFormat } from '../../../rpc/base/v1/notification'
 import { resolveMessageCategoryIcon } from './icons'
 
+const themeStore = useThemeStore()
 const detail = ref<Notification>()
 
 onLoad((options) => {
@@ -49,40 +52,52 @@ function openAction() {
   }
   navigateAppView(detail.value.action_target, params)
 }
+
+/** 返回消息列表，页面栈为空时回到首页。 */
+function onBack() {
+  uni.navigateBack({ fail: () => uni.reLaunch({ url: homeTabPage }) })
+}
 </script>
 
 <template>
-  <view class="detail-page" v-if="detail">
-    <text class="detail-title">{{ detail.title }}</text>
-    <view class="detail-meta">
-      <view class="detail-category" :style="{ color: detail.category_color || undefined }">
-        <uni-icons
-          class="detail-category__icon"
-          :type="resolveMessageCategoryIcon(detail.category_icon)"
-          size="18"
-          :color="detail.category_color || '#64748b'"
-          aria-hidden="true"
-        />
-        <text>{{ detail.category_name }}</text>
-      </view>
-      <text>{{ resolveSenderName(detail.sender_name) }}</text>
-      <text>{{ detail.received_at }}</text>
+  <view class="detail-page" :class="themeStore.themeClass">
+    <view class="k-page-nav">
+      <view class="k-page-nav__back" :aria-label="t('common.action.back')" @tap="onBack"></view>
+      <view class="k-page-nav__title">{{ t('system.notification.title') }}</view>
+      <view class="k-page-nav__side" aria-hidden="true"></view>
     </view>
-    <rich-text
-      v-if="detail.content_format === MessageContentFormat.MESSAGE_CONTENT_FORMAT_RICH_TEXT"
-      class="detail-content-rich"
-      :nodes="detail.content"
-    />
-    <text v-else class="detail-content">{{ detail.content }}</text>
-    <button
-      v-if="detail.action_type === MessageActionType.MESSAGE_ACTION_TYPE_VIEW_KEY"
-      class="detail-action"
-      @tap="openAction"
-    >
-      {{ t('common.action.view') }}
-    </button>
+    <template v-if="detail">
+      <text class="detail-title">{{ detail.title }}</text>
+      <view class="detail-meta">
+        <view class="detail-category" :style="{ color: detail.category_color || undefined }">
+          <uni-icons
+            class="detail-category__icon"
+            :type="resolveMessageCategoryIcon(detail.category_icon)"
+            size="18"
+            :color="detail.category_color || '#64748b'"
+            aria-hidden="true"
+          />
+          <text>{{ detail.category_name }}</text>
+        </view>
+        <text>{{ resolveSenderName(detail.sender_name) }}</text>
+        <text>{{ detail.received_at }}</text>
+      </view>
+      <rich-text
+        v-if="detail.content_format === MessageContentFormat.MESSAGE_CONTENT_FORMAT_RICH_TEXT"
+        class="detail-content-rich"
+        :nodes="detail.content"
+      />
+      <text v-else class="detail-content">{{ detail.content }}</text>
+      <button
+        v-if="detail.action_type === MessageActionType.MESSAGE_ACTION_TYPE_VIEW_KEY"
+        class="detail-action"
+        @tap="openAction"
+      >
+        {{ t('common.action.view') }}
+      </button>
+    </template>
+    <view v-else class="detail-loading">{{ t('core.status.loading') }}</view>
   </view>
-  <view v-else class="empty">{{ t('core.status.loading') }}</view>
 </template>
 
 <style scoped lang="scss">
@@ -90,14 +105,21 @@ function openAction() {
   box-sizing: border-box;
   min-height: 100vh;
   padding: 24rpx 30rpx calc(96rpx + env(safe-area-inset-bottom));
-  background: var(--kratos-color-background, #f7f8fa);
-  color: var(--kratos-color-text, #1f2937);
+  background: var(--kratos-bg-gradient);
+  color: var(--kratos-color-text);
+}
+.detail-loading {
+  padding: 120rpx 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: 16rpx;
+  color: var(--kratos-color-text);
   font-size: 42rpx;
-  font-weight: 700;
+  font-weight: 800;
   line-height: 1.35;
 }
 .detail-meta {
@@ -105,8 +127,11 @@ function openAction() {
   flex-wrap: wrap;
   gap: 18rpx;
   margin: 24rpx 0 36rpx;
-  color: var(--kratos-color-text-muted, #6b7280);
-  font-size: 24rpx;
+  padding-bottom: 28rpx;
+  border-bottom: 1rpx solid var(--kratos-color-border);
+  color: var(--kratos-color-text-muted);
+  font-size: 22rpx;
+  font-family: var(--kratos-font-mono);
 }
 .detail-category {
   display: inline-flex;
@@ -116,7 +141,12 @@ function openAction() {
   margin-right: 8rpx;
 }
 .detail-content {
-  color: var(--kratos-color-text, #1f2937);
+  display: block;
+  padding: 28rpx;
+  border: 1rpx solid var(--kratos-color-border);
+  border-radius: 20rpx;
+  background: var(--kratos-color-surface);
+  color: var(--kratos-color-text);
   font-size: 30rpx;
   line-height: 1.8;
   white-space: pre-wrap;
@@ -124,14 +154,32 @@ function openAction() {
 }
 .detail-content-rich {
   display: block;
-  color: var(--kratos-color-text, #1f2937);
+  padding: 28rpx;
+  border: 1rpx solid var(--kratos-color-border);
+  border-radius: 20rpx;
+  background: var(--kratos-color-surface);
+  color: var(--kratos-color-text);
   font-size: 30rpx;
   line-height: 1.8;
   overflow-wrap: anywhere;
 }
+.detail-action {
+  margin-top: 36rpx;
+  border: 1rpx solid var(--kratos-color-border-accent);
+  border-radius: 20rpx;
+  background: var(--kratos-color-primary-soft);
+  color: var(--kratos-color-primary);
+  font-size: 28rpx;
+  font-weight: 700;
+  line-height: 88rpx;
+}
 .empty {
+  box-sizing: border-box;
+  min-height: 100vh;
   padding-top: 180rpx;
-  color: var(--kratos-color-text-muted, #6b7280);
+  background: var(--kratos-bg-gradient);
+  color: var(--kratos-color-text-dim);
+  font-family: var(--kratos-font-mono);
   text-align: center;
 }
 </style>