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

package/dist/index.mjs

@@ -234,7 +234,9 @@ var systemPages = {
       navigationBarTitleText: ""
     }
   },
-  "pagesMember/settings/settings": { style: { navigationBarTitleText: "" } },
+  "pagesMember/settings/settings": {
+    style: { navigationStyle: "custom", navigationBarTitleText: "" }
+  },
   "pagesMember/ai/index": {
     style: {
       navigationStyle: "custom",
@@ -254,7 +256,9 @@ var systemPages = {
       navigationBarTitleText: ""
     }
   },
-  "pagesMember/message/detail": { style: { navigationBarTitleText: "" } }
+  "pagesMember/message/detail": {
+    style: { navigationStyle: "custom", navigationBarTitleText: "" }
+  }
 };
 
 // src/locales/zh-CN.json

package/dist/module.mjs

@@ -10,7 +10,9 @@ var systemPages = {
       navigationBarTitleText: ""
     }
   },
-  "pagesMember/settings/settings": { style: { navigationBarTitleText: "" } },
+  "pagesMember/settings/settings": {
+    style: { navigationStyle: "custom", navigationBarTitleText: "" }
+  },
   "pagesMember/ai/index": {
     style: {
       navigationStyle: "custom",
@@ -30,7 +32,9 @@ var systemPages = {
       navigationBarTitleText: ""
     }
   },
-  "pagesMember/message/detail": { style: { navigationBarTitleText: "" } }
+  "pagesMember/message/detail": {
+    style: { navigationStyle: "custom", navigationBarTitleText: "" }
+  }
 };
 
 // src/locales/zh-CN.json

package/package.json

@@ -7,7 +7,7 @@
     "type": "git",
     "url": "git@github.com:liujitcn/kratos-admin.git"
   },
-  "version": "0.0.78",
+  "version": "0.0.80",
   "type": "module",
   "files": [
     "dist",
@@ -35,7 +35,7 @@
     "@dcloudio/uni-app": "3.0.0-5010520260709002",
     "@dcloudio/uni-ui": "^1.4.28",
     "vue": "^3.4.21",
-    "@liujitcn/kratos-uni-app-core": "^0.0.78"
+    "@liujitcn/kratos-uni-app-core": "^0.0.80"
   },
   "devDependencies": {
     "esbuild": "^0.20.2",

package/src/pages.ts

@@ -9,7 +9,9 @@ export const systemPages: Record<string, KratosAppPageConfig> = {
       navigationBarTitleText: '',
     },
   },
-  'pagesMember/settings/settings': { style: { navigationBarTitleText: '' } },
+  'pagesMember/settings/settings': {
+    style: { navigationStyle: 'custom', navigationBarTitleText: '' },
+  },
   'pagesMember/ai/index': {
     style: {
       navigationStyle: 'custom',
@@ -29,5 +31,7 @@ export const systemPages: Record<string, KratosAppPageConfig> = {
       navigationBarTitleText: '',
     },
   },
-  'pagesMember/message/detail': { style: { navigationBarTitleText: '' } },
+  'pagesMember/message/detail': {
+    style: { navigationStyle: 'custom', navigationBarTitleText: '' },
+  },
 }

package/src/views/pages/my/my.vue

@@ -1,20 +1,41 @@
 <script setup lang="ts">
-import { useSettingStore, useUserStore } from '@liujitcn/kratos-uni-app-core/stores'
+import { useSettingStore, useThemeStore, useUserStore } from '@liujitcn/kratos-uni-app-core/stores'
 import { computed } from 'vue'
-import { formatSrc } from '@liujitcn/kratos-uni-app-core/utils/index'
+import { formatSrc, getMpCapsuleRightGap } from '@liujitcn/kratos-uni-app-core/utils/index'
 import { navigateToLogin } from '@liujitcn/kratos-uni-app-core/utils/navigation'
 import { navigateAppRoute } from '@liujitcn/kratos-uni-app-core'
 import defaultAvatar from '@liujitcn/kratos-uni-app-core/static/images/avatar.png'
-import centerBackground from '@liujitcn/kratos-uni-app-core/static/images/center_bg.png'
 import { useI18n } from '@liujitcn/kratos-uni-app-core'
 
 // 获取会员信息
 const userStore = useUserStore()
 const settingStore = useSettingStore()
+const themeStore = useThemeStore()
 const { t } = useI18n()
 const isLoggedIn = computed(() => userStore.isAuthenticated())
 const profile = computed(() => userStore.userInfo)
 
+/** MP-WEIXIN 原生胶囊按钮右侧避让宽度，写入 --mp-capsule-gap 供 .k-top 预留空间。 */
+const capsuleGap = getMpCapsuleRightGap()
+
+/** 昵称或占位账号首字符，用于渐变头像兜底。 */
+const avatarText = computed(() => (profile.value?.nick_name || 'U').slice(0, 1))
+
+/** 设计稿齿轮线稿，随主题取色的 data URI，替代 CSS 手绘图标。 */
+const gearIcon = computed(() => {
+  const color = themeStore.theme === 'light' ? '#102232' : '#e9f4f6'
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8 2 2 0 1 1-2.8 2.8 1.6 1.6 0 0 0-2.7 1.1 2 2 0 1 1-4 0 1.6 1.6 0 0 0-2.6-1.1 2 2 0 1 1-2.8-2.8A1.6 1.6 0 0 0 3 13.9a2 2 0 1 1 0-4 1.6 1.6 0 0 0 1.5-2.7 2 2 0 1 1 2.8-2.8A1.6 1.6 0 0 0 10 4.6a2 2 0 1 1 4 0 1.6 1.6 0 0 0 2.7.6 2 2 0 1 1 2.8 2.8 1.6 1.6 0 0 0-.1 2.6"/></svg>`
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
+})
+
+/** 个人卡账号行：登录展示账号，未登录提示去登录。 */
+const accountText = computed(() => {
+  if (isLoggedIn.value && profile.value) {
+    return profile.value.user_name || profile.value.nick_name || ''
+  }
+  return t('system.profile.login_prompt')
+})
+
 /** 打开移动端 AI 助手静态页，未登录时先进入登录流程。 */
 const navigateToAi = () => {
   if (!userStore.ensureAuthenticated()) {
@@ -38,207 +59,100 @@ const navigateToProfile = () => navigateAppRoute('app/profile')
 </script>
 
 <template>
-  <scroll-view
-    enable-back-to-top
-    class="viewport"
-    scroll-y
-    :style="{ backgroundImage: `url(${centerBackground})` }"
-  >
-    <!-- 个人资料 -->
-    <view class="profile">
-      <!-- 情况1：已登录 -->
-      <view class="overview" v-if="isLoggedIn && profile">
-        <view @tap="navigateToProfile">
-          <image
-            v-if="profile.avatar"
-            class="avatar"
-            :src="formatSrc(profile.avatar)"
-            mode="aspectFill"
-          ></image>
-          <image v-else class="avatar" :src="defaultAvatar" mode="aspectFill"></image>
-        </view>
-        <view class="meta">
-          <view class="nickname">
-            {{ profile.nick_name }}
-          </view>
-          <view class="extra" @tap="navigateToProfile">
-            <text class="update">{{ t('system.profile.avatar_update') }}</text>
-          </view>
+  <scroll-view enable-back-to-top class="my-viewport" scroll-y :class="themeStore.themeClass">
+    <view class="my-content">
+      <!-- 顶栏：标题 + 设置入口（Tab 根页，无返回） -->
+      <view class="k-top" :style="{ '--mp-capsule-gap': `${capsuleGap}px` }">
+        <view class="k-top__title">{{ t('core.navigation.my') }}</view>
+        <view class="k-ic" @tap="navigateToSettings">
+          <image class="my-gear" :src="gearIcon" mode="aspectFit" />
         </view>
       </view>
-      <!-- 情况2：未登录 -->
-      <view class="overview" v-else>
-        <view @tap="navigateToLogin">
-          <image class="avatar gray" mode="aspectFill" :src="defaultAvatar"></image>
+
+      <view class="my-stack">
+        <!-- 个人资料 -->
+        <view class="k-glass k-glass--lit k-pfx my-profile" @tap="navigateToProfile">
+          <view class="k-cnr k-cnr--tr" aria-hidden="true"></view>
+          <view class="k-cnr k-cnr--bl" aria-hidden="true"></view>
+          <view class="my-pfx-main">
+            <image
+              v-if="isLoggedIn && profile"
+              class="k-pfx__av"
+              :src="profile.avatar ? formatSrc(profile.avatar) : defaultAvatar"
+              mode="aspectFill"
+            ></image>
+            <view v-else class="k-pfx__av">{{ avatarText }}</view>
+            <view class="my-pfx-meta">
+              <view class="k-pfx__nm">
+                {{ isLoggedIn && profile ? profile.nick_name : t('system.profile.not_logged_in') }}
+              </view>
+              <view class="k-pfx__ac">{{ accountText }}</view>
+            </view>
+          </view>
+          <view class="k-pfx__ent">{{ t('system.profile.title') }} ›</view>
         </view>
-        <view class="meta">
-          <view @tap="navigateToLogin" class="nickname">{{
-            t('system.profile.not_logged_in')
-          }}</view>
-          <view class="extra">
-            <text class="tips">{{ t('system.profile.login_prompt') }}</text>
+
+        <!-- AI 助手入口 -->
+        <view v-if="settingStore.aiEnabled" class="k-aix" @tap="navigateToAi">
+          <view class="k-aix__ic">AI</view>
+          <view class="my-aix-copy">
+            <view class="k-aix__t">{{ t('system.settings.ai_title') }}</view>
+            <view class="k-aix__d">{{ t('system.settings.ai_description') }}</view>
           </view>
+          <view class="k-aix__b">{{ t('system.settings.go_ask') }}</view>
         </view>
       </view>
-      <view class="settings" @tap="navigateToSettings">{{ t('core.settings.title') }}</view>
-    </view>
-    <!-- AI 助手入口 -->
-    <view v-if="settingStore.aiEnabled" class="ai-entry" @tap="navigateToAi">
-      <view class="ai-entry__icon">AI</view>
-      <view class="ai-entry__content">
-        <view class="ai-entry__title">{{ t('system.settings.ai_title') }}</view>
-        <view class="ai-entry__desc">{{ t('system.settings.ai_description') }}</view>
-      </view>
-      <view class="ai-entry__action">{{ t('system.settings.go_ask') }}</view>
     </view>
   </scroll-view>
 </template>
 
 <style lang="scss">
-page {
+.my-viewport {
   height: 100%;
-  overflow: hidden;
-  background-color: #f7f7f8;
+  min-height: 100vh;
+  box-sizing: border-box;
+  background: var(--kratos-bg-gradient);
 }
 
-/* AI 助手入口 */
-.ai-entry {
-  position: relative;
-  z-index: 99;
-  display: flex;
-  align-items: center;
-  margin: 20rpx 20rpx 0;
-  padding: 26rpx 24rpx;
-  border-radius: 10rpx;
-  background-color: #fff;
-  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
-}
+.my-content {
+  padding: calc(env(safe-area-inset-top) + 24rpx) 32rpx calc(40rpx + env(safe-area-inset-bottom));
 
-.ai-entry__icon {
-  flex-shrink: 0;
-  width: 92rpx;
-  height: 92rpx;
-  border-radius: 24rpx;
-  color: #fff;
-  font-size: 28rpx;
-  font-weight: 700;
-  line-height: 92rpx;
-  text-align: center;
-  background-color: #27ba9b;
+  /* #ifdef MP-WEIXIN */
+  padding-top: calc(44px + 24rpx);
+  /* #endif */
 }
 
-.ai-entry__content {
-  flex: 1;
-  min-width: 0;
-  margin-left: 18rpx;
+.my-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+  margin-top: 16rpx;
 }
 
-.ai-entry__title {
-  color: #1e1e1e;
-  font-size: 30rpx;
-  font-weight: 600;
-  line-height: 40rpx;
+.my-gear {
+  width: 34rpx;
+  height: 34rpx;
 }
 
-.ai-entry__desc {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-top: 8rpx;
-  color: #747f7c;
-  font-size: 24rpx;
-  line-height: 32rpx;
+/* k-pfx 仅定义 flex 排布，卡片内边距交由页面控制 */
+.my-profile {
+  padding: 36rpx 30rpx;
 }
 
-.ai-entry__action {
-  flex-shrink: 0;
-  margin-left: 16rpx;
-  padding: 10rpx 18rpx;
-  border-radius: 999rpx;
-  color: #16806d;
-  font-size: 24rpx;
-  background-color: #e8f8f4;
+.my-pfx-main {
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+  min-width: 0;
 }
 
-.viewport {
-  height: 100%;
-  min-height: 100vh;
-  box-sizing: border-box;
-  background-color: #f7f7f8;
-  background-repeat: no-repeat;
-  background-size: 100% auto;
+.my-pfx-meta {
+  min-width: 0;
 }
 
-/* 用户信息 */
-.profile {
-  margin-top: 30rpx;
-  position: relative;
-
-  /* #ifdef MP-WEIXIN */
-  padding-top: 44px;
-  /* #endif */
-
-  .overview {
-    display: flex;
-    height: 120rpx;
-    padding: 0 36rpx;
-    color: #fff;
-  }
-
-  .avatar {
-    width: 120rpx;
-    height: 120rpx;
-    border-radius: 50%;
-    background-color: #eee;
-  }
-
-  .gray {
-    filter: grayscale(100%);
-  }
-
-  .meta {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    line-height: 30rpx;
-    padding: 16rpx 0;
-    margin-left: 20rpx;
-  }
-
-  .nickname {
-    max-width: 180rpx;
-    margin-bottom: 16rpx;
-    font-size: 30rpx;
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .extra {
-    display: flex;
-    font-size: 20rpx;
-  }
-
-  .tips {
-    font-size: 22rpx;
-  }
-
-  .update {
-    padding: 3rpx 10rpx 1rpx;
-    color: rgba(255, 255, 255, 0.8);
-    border: 1rpx solid rgba(255, 255, 255, 0.8);
-    margin-right: 10rpx;
-    border-radius: 30rpx;
-  }
-
-  .settings {
-    position: absolute;
-    bottom: 0;
-    right: 40rpx;
-    font-size: 30rpx;
-    color: #fff;
-  }
+/* k-aix 中部文案占位伸展 */
+.my-aix-copy {
+  flex: 1;
+  min-width: 0;
 }
 </style>

package/src/views/pagesMember/ai/components/Composer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useI18n } from '@liujitcn/kratos-uni-app-core'
+import { useThemeStore } from '@liujitcn/kratos-uni-app-core/stores'
 import type { AiAttachment } from '../../../../rpc/base/v1/ai_session'
 import type { AiProviderModelOption } from '../../../../rpc/base/v1/ai_provider'
 import type { AiKnowledgeOption } from '../../../../rpc/base/v1/ai_knowledge'
@@ -48,6 +49,9 @@ const emit = defineEmits<{
 
 const showModelPicker = ref(false)
 const showKnowledgePicker = ref(false)
+const themeStore = useThemeStore()
+const iconColor = computed(() => (themeStore.theme === 'light' ? '#5a7083' : '#8aa0b4'))
+const primaryIconColor = computed(() => (themeStore.theme === 'light' ? '#039e8c' : '#28f0d4'))
 
 const selectedModelDisplayName = computed(() => {
   const provider = props.modelProviders.find((item) => item.provider_id === props.providerId)
@@ -100,7 +104,7 @@ function handleKnowledgeToggle(knowledgeId: number) {
       <text class="composer-model-chip__label">{{
         selectedModelDisplayName || modelPlaceholder
       }}</text>
-      <uni-icons type="down" size="12" color="#8a8f99" />
+      <uni-icons type="down" size="12" :color="iconColor" />
     </view>
     <view
       class="composer-model-chip"
@@ -116,11 +120,11 @@ function handleKnowledgeToggle(knowledgeId: number) {
           ? t('system.ai.knowledge.selected_count', { count: knowledgeIds.length })
           : t('system.ai.knowledge.title')
       }}</text>
-      <uni-icons type="down" size="12" color="#8a8f99" />
+      <uni-icons type="down" size="12" :color="iconColor" />
     </view>
     <view class="composer-main">
       <button class="attach-button" hover-class="none" @tap="emit('attach')">
-        <uni-icons type="plusempty" size="30" color="#111" />
+        <uni-icons type="plusempty" size="30" :color="iconColor" />
       </button>
       <view class="composer-card">
         <view v-if="attachments.length" class="composer-attachments">
@@ -148,7 +152,7 @@ function handleKnowledgeToggle(knowledgeId: number) {
           hover-class="none"
           @tap="emit('record')"
         >
-          <uni-icons type="mic" size="28" :color="recording ? '#00a96b' : '#111'" />
+          <uni-icons type="mic" size="28" :color="recording ? primaryIconColor : iconColor" />
         </button>
       </view>
       <button
@@ -158,7 +162,7 @@ function handleKnowledgeToggle(knowledgeId: number) {
         hover-class="none"
         @tap="emit('send')"
       >
-        <uni-icons type="paperplane" size="28" :color="disabled ? '#111' : '#00a96b'" />
+        <uni-icons type="paperplane" size="28" :color="disabled ? iconColor : primaryIconColor" />
       </button>
     </view>
 
@@ -199,9 +203,10 @@ function handleKnowledgeToggle(knowledgeId: number) {
 .composer {
   flex-shrink: 0;
   width: 100%;
-  padding: 14rpx 24rpx 18rpx;
+  padding: 14rpx 24rpx calc(18rpx + env(safe-area-inset-bottom));
   overflow: hidden;
-  background-color: transparent;
+  background: var(--kratos-color-surface, #fff);
+  border-top: 1rpx solid var(--kratos-color-border-accent, rgba(120, 230, 215, 0.16));
   box-sizing: border-box;
 }
 
@@ -211,9 +216,9 @@ function handleKnowledgeToggle(knowledgeId: number) {
   gap: 16rpx;
   min-height: 124rpx;
   padding: 22rpx 18rpx;
+  border: 1rpx solid var(--kratos-color-border, #e3eaf2);
   border-radius: 24rpx;
-  background-color: #fff;
-  box-shadow: 0 12rpx 34rpx rgba(15, 23, 42, 0.08);
+  background: var(--kratos-color-surface, #fff);
   box-sizing: border-box;
 }
 
@@ -225,11 +230,10 @@ function handleKnowledgeToggle(knowledgeId: number) {
   height: 56rpx;
   padding: 0 24rpx;
   margin: 0 8rpx 12rpx;
-  color: #1f2937;
-  background: #fff;
-  border: 2rpx solid #d6dae2;
+  color: var(--kratos-color-text, #102232);
+  background: var(--kratos-color-surface, #fff);
+  border: 1rpx solid var(--kratos-color-border-accent, rgba(0, 150, 134, 0.28));
   border-radius: 28rpx;
-  box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.04);
   box-sizing: border-box;
 }
 
@@ -239,7 +243,7 @@ function handleKnowledgeToggle(knowledgeId: number) {
 
 .composer-model-chip__spark {
   flex-shrink: 0;
-  color: #00a96b;
+  color: var(--kratos-color-primary, #039e8c);
   font-size: 26rpx;
   line-height: 26rpx;
 }
@@ -262,9 +266,10 @@ function handleKnowledgeToggle(knowledgeId: number) {
   justify-content: center;
   width: 72rpx;
   height: 72rpx;
-  border: 2rpx solid #d6dae2;
+  border: 1rpx solid var(--kratos-color-border, #e3eaf2);
   border-radius: 50%;
-  background-color: #fff;
+  background: var(--kratos-color-surface, #fff);
+  color: var(--kratos-color-text-muted, #5a7083);
   box-shadow: none;
   box-sizing: border-box;
 }
@@ -278,9 +283,9 @@ function handleKnowledgeToggle(knowledgeId: number) {
   gap: 10rpx;
   min-height: 72rpx;
   padding: 0 12rpx 0 28rpx;
-  border: 2rpx solid #d6dae2;
+  border: 1rpx solid var(--kratos-color-border, #e3eaf2);
   border-radius: 38rpx;
-  background-color: #fff;
+  background: var(--kratos-color-surface-2, #eef4fa);
   box-shadow: none;
   box-sizing: border-box;
 }
@@ -299,11 +304,12 @@ function handleKnowledgeToggle(knowledgeId: number) {
   text-overflow: ellipsis;
   white-space: nowrap;
   padding: 6rpx 12rpx;
+  border: 1rpx solid var(--kratos-color-primary-edge, rgba(0, 150, 134, 0.3));
   border-radius: 8rpx;
-  color: #16806d;
+  color: var(--kratos-color-primary, #039e8c);
   font-size: 20rpx;
   line-height: 28rpx;
-  background-color: #e8f8f4;
+  background: var(--kratos-color-primary-soft, rgba(3, 158, 140, 0.08));
 }
 
 .composer-input {
@@ -313,15 +319,15 @@ function handleKnowledgeToggle(knowledgeId: number) {
   max-height: 126rpx;
   padding: 14rpx 0;
   box-sizing: border-box;
-  color: #333;
+  color: var(--kratos-color-text, #102232);
   font-size: 29rpx;
   line-height: 42rpx;
   overflow-y: auto;
-  background-color: transparent;
+  background: transparent;
 }
 
 .composer-placeholder {
-  color: #8d929c;
+  color: var(--kratos-color-text-dim, #9aabbb);
   font-size: 29rpx;
 }
 
@@ -337,24 +343,25 @@ function handleKnowledgeToggle(knowledgeId: number) {
 .voice-button {
   width: 60rpx;
   height: 60rpx;
-  background-color: transparent;
+  background: transparent;
 }
 
 .voice-button.active {
-  background-color: #e8f8f4;
+  background: var(--kratos-color-primary-soft, rgba(3, 158, 140, 0.08));
 }
 
 .send-button {
   width: 74rpx;
   height: 74rpx;
-  background-color: #f2f2f2;
+  background: var(--kratos-color-track, #e8eef5);
 }
 
 .send-button.is-disabled {
-  background-color: #f2f2f2;
+  background: var(--kratos-color-track, #e8eef5);
 }
 
 .send-button:not(.is-disabled) {
-  background-color: #e7f7f2;
+  background: var(--kratos-color-primary-soft-2, rgba(3, 158, 140, 0.1));
+  border: 1rpx solid var(--kratos-color-primary-edge, rgba(0, 150, 134, 0.3));
 }
 </style>