@liujitcn/kratos-uni-app-core 0.0.79 → 0.0.81

package/dist/module.mjs

@@ -7,8 +7,10 @@ var corePages = {
       navigationBarTitleText: ""
     }
   },
-  "pages/login/login": { style: { navigationBarTitleText: "" } },
-  "pages/login/protocal": { style: { navigationBarTitleText: "" } },
+  "pages/login/login": {
+    style: { navigationStyle: "custom", navigationBarTitleText: "" }
+  },
+  "pages/login/protocal": { style: { navigationStyle: "custom", navigationBarTitleText: "" } },
   "pages/webview/webview": {
     style: {
       navigationBarTitleText: "",
@@ -141,6 +143,9 @@ var zh_CN_default = {
   "core.settings.authorization": "\u6388\u6743\u7BA1\u7406",
   "core.settings.contact": "\u8054\u7CFB\u6211\u4EEC",
   "core.settings.feedback": "\u95EE\u9898\u53CD\u9988",
+  "core.settings.section_appearance": "\u5916\u89C2",
+  "core.settings.section_security": "\u8D26\u6237\u5B89\u5168",
+  "core.settings.section_more": "\u66F4\u591A \xB7 \u5C0F\u7A0B\u5E8F\u7AEF",
   "core.settings.logout_confirm": "\u662F\u5426\u9000\u51FA\u767B\u5F55\uFF1F",
   "core.settings.logout_failed": "\u9000\u51FA\u767B\u5F55\u5931\u8D25",
   "core.settings.mfa_bind_success": "\u591A\u56E0\u7D20\u8BA4\u8BC1\u7ED1\u5B9A\u6210\u529F",
@@ -170,7 +175,11 @@ var zh_CN_default = {
   "common.action.load_more": "\u52A0\u8F7D\u66F4\u591A",
   "common.status.loading": "\u52A0\u8F7D\u4E2D\u2026",
   "core.navigation.analytics": "\u5206\u6790",
-  "core.navigation.report": "\u62A5\u8868"
+  "core.navigation.report": "\u62A5\u8868",
+  "core.settings.theme": "\u4E3B\u9898\u5916\u89C2",
+  "core.theme.auto": "\u8DDF\u968F\u7CFB\u7EDF",
+  "core.theme.dark": "\u6697\u9ED1",
+  "core.theme.light": "\u660E\u4EAE"
 };
 
 // src/locales/en-US.json
@@ -291,6 +300,9 @@ var en_US_default = {
   "core.settings.authorization": "Authorization settings",
   "core.settings.contact": "Contact us",
   "core.settings.feedback": "Feedback",
+  "core.settings.section_appearance": "Appearance",
+  "core.settings.section_security": "Account security",
+  "core.settings.section_more": "More \xB7 Mini Program",
   "core.settings.logout_confirm": "Log out now?",
   "core.settings.logout_failed": "Logout failed",
   "core.settings.mfa_bind_success": "Multi-factor authentication enabled",
@@ -320,7 +332,11 @@ var en_US_default = {
   "common.action.load_more": "Load more",
   "common.status.loading": "Loading\u2026",
   "core.navigation.analytics": "Analytics",
-  "core.navigation.report": "Reports"
+  "core.navigation.report": "Reports",
+  "core.settings.theme": "Theme Appearance",
+  "core.theme.auto": "Follow System",
+  "core.theme.dark": "Dark",
+  "core.theme.light": "Light"
 };
 
 // src/locales/ja-JP.json
@@ -441,6 +457,9 @@ var ja_JP_default = {
   "core.settings.authorization": "\u8A8D\u53EF\u7BA1\u7406",
   "core.settings.contact": "\u304A\u554F\u3044\u5408\u308F\u305B",
   "core.settings.feedback": "\u554F\u984C\u306E\u30D5\u30A3\u30FC\u30C9\u30D0\u30C3\u30AF",
+  "core.settings.section_appearance": "\u5916\u89B3",
+  "core.settings.section_security": "\u30A2\u30AB\u30A6\u30F3\u30C8\u30BB\u30AD\u30E5\u30EA\u30C6\u30A3",
+  "core.settings.section_more": "\u305D\u306E\u4ED6\u30FB\u30DF\u30CB\u30D7\u30ED\u30B0\u30E9\u30E0",
   "core.settings.logout_confirm": "\u30ED\u30B0\u30A2\u30A6\u30C8\u3057\u307E\u3059\u304B?",
   "core.settings.logout_failed": "\u30ED\u30B0\u30A2\u30A6\u30C8\u306B\u5931\u6557\u3057\u307E\u3057\u305F",
   "core.settings.mfa_bind_success": "\u591A\u8981\u7D20\u8A8D\u8A3C\u3092\u6709\u52B9\u306B\u3057\u307E\u3057\u305F",
@@ -470,7 +489,11 @@ var ja_JP_default = {
   "common.action.load_more": "\u3055\u3089\u306B\u8AAD\u307F\u8FBC\u3080",
   "common.status.loading": "\u8AAD\u307F\u8FBC\u307F\u4E2D\u2026",
   "core.navigation.analytics": "\u5206\u6790",
-  "core.navigation.report": "\u30EC\u30DD\u30FC\u30C8"
+  "core.navigation.report": "\u30EC\u30DD\u30FC\u30C8",
+  "core.settings.theme": "\u30C6\u30FC\u30DE\u5916\u89B3",
+  "core.theme.auto": "\u30B7\u30B9\u30C6\u30E0\u306B\u5F93\u3046",
+  "core.theme.dark": "\u30C0\u30FC\u30AF",
+  "core.theme.light": "\u30E9\u30A4\u30C8"
 };
 
 // src/locales/zh-TW.json
@@ -591,6 +614,9 @@ var zh_TW_default = {
   "core.settings.authorization": "\u6388\u6B0A\u7BA1\u7406",
   "core.settings.contact": "\u806F\u7D61\u6211\u5011",
   "core.settings.feedback": "\u554F\u984C\u53CD\u994B",
+  "core.settings.section_appearance": "\u5916\u89C0",
+  "core.settings.section_security": "\u5E33\u6236\u5B89\u5168",
+  "core.settings.section_more": "\u66F4\u591A\u30FB\u5C0F\u7A0B\u5F0F\u7AEF",
   "core.settings.logout_confirm": "\u662F\u5426\u9000\u51FA\u767B\u5165\uFF1F",
   "core.settings.logout_failed": "\u9000\u51FA\u767B\u5165\u5931\u6557",
   "core.settings.mfa_bind_success": "\u591A\u56E0\u7D20\u8A8D\u8B49\u7D81\u5B9A\u6210\u529F",
@@ -620,7 +646,11 @@ var zh_TW_default = {
   "common.action.load_more": "\u8F09\u5165\u66F4\u591A",
   "common.status.loading": "\u8F09\u5165\u4E2D\u2026",
   "core.navigation.analytics": "\u5206\u6790",
-  "core.navigation.report": "\u5831\u8868"
+  "core.navigation.report": "\u5831\u8868",
+  "core.settings.theme": "\u4E3B\u984C\u5916\u89C0",
+  "core.theme.auto": "\u8DDF\u96A8\u7CFB\u7D71",
+  "core.theme.dark": "\u6697\u9ED1",
+  "core.theme.light": "\u660E\u4EAE"
 };
 
 // src/locales/generated.ts

package/package.json

@@ -7,7 +7,7 @@
     "type": "git",
     "url": "git@github.com:liujitcn/kratos-admin.git"
   },
-  "version": "0.0.79",
+  "version": "0.0.81",
   "type": "module",
   "files": [
     "dist",

package/src/components/BootstrapStatus.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { useI18n } from '../locales'
+import { useThemeStore } from '../stores'
 
 defineProps<{ title?: string; detail?: string }>()
 const { t } = useI18n()
+const themeStore = useThemeStore()
 </script>
 
 <template>
-  <view class="bootstrap-status">
+  <view class="bootstrap-status" :class="themeStore.themeClass">
     <image class="bootstrap-status__logo" src="../static/images/logo_icon.png" mode="aspectFit" />
     <text class="bootstrap-status__title">{{ title || t('core.status.loading') }}</text>
     <text v-if="detail" class="bootstrap-status__detail">{{ detail }}</text>
@@ -21,7 +23,7 @@ const { t } = useI18n()
   justify-content: center;
   flex-direction: column;
   padding: 48rpx;
-  background: #f8f8f8;
+  background: var(--kratos-bg-gradient);
   box-sizing: border-box;
 }
 .bootstrap-status__logo {
@@ -30,12 +32,12 @@ const { t } = useI18n()
   margin-bottom: 32rpx;
 }
 .bootstrap-status__title {
-  color: #222;
+  color: var(--kratos-color-text);
   font-size: 32rpx;
 }
 .bootstrap-status__detail {
   margin-top: 16rpx;
-  color: #777;
+  color: var(--kratos-color-text-muted);
   font-size: 24rpx;
   text-align: center;
 }

package/src/components/KratosSettingsPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
-import { useUserStore } from '../stores'
+import { computed, onMounted, ref } from 'vue'
+import { useThemeStore, useUserStore, type ThemeMode } from '../stores'
 import { navigateToLogin } from '../utils/navigation'
 import { getLanguageOptions, useI18n, type SupportedLocale } from '../locales'
 import { isAuthExpiredError } from '../utils/http'
@@ -15,6 +15,7 @@ defineSlots<{
 }>()
 
 const userStore = useUserStore()
+const themeStore = useThemeStore()
 const { locale, setLocale, t } = useI18n()
 
 const logoutLoading = ref(false)
@@ -24,6 +25,17 @@ const mfaEnabled = ref(false)
 const mfaMethod = ref('totp')
 const mfaStatusLoading = ref(false)
 const localeOptions = computed(() => getLanguageOptions())
+const themeModeOptions: ThemeMode[] = ['auto', 'dark', 'light']
+const themeModeLabels = computed(() =>
+  themeModeOptions.map((mode) =>
+    mode === 'auto'
+      ? t('core.theme.auto')
+      : mode === 'dark'
+        ? t('core.theme.dark')
+        : t('core.theme.light'),
+  ),
+)
+const themeModeIndex = computed(() => Math.max(0, themeModeOptions.indexOf(themeStore.mode)))
 const localeLabels = computed(() => localeOptions.value.map((item) => item.native_name))
 const localeIndex = computed(() =>
   Math.max(
@@ -32,10 +44,41 @@ const localeIndex = computed(() =>
   ),
 )
 
-watch(locale, () => void uni.setNavigationBarTitle({ title: t('core.settings.title') }), {
-  immediate: true,
+const settingsIcons = computed(() => {
+  const primary = themeStore.theme === 'light' ? '#039e8c' : '#28f0d4'
+  const warning = themeStore.theme === 'light' ? '#d9880f' : '#ffb648'
+  const violet = themeStore.theme === 'light' ? '#5f4fe0' : '#9b8cff'
+  const createIcon = (body: string, color: string) =>
+    `data:image/svg+xml;charset=utf-8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`)}`
+
+  return {
+    theme: createIcon('<path d="M21 12.8A8.5 8.5 0 1 1 11.2 3a6.5 6.5 0 0 0 9.8 9.8Z"/>', primary),
+    mfa: createIcon(
+      '<path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3Z"/><path d="m9 12 2 2 4-4"/>',
+      primary,
+    ),
+    language: createIcon(
+      '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/>',
+      primary,
+    ),
+    authorization: createIcon(
+      '<circle cx="8" cy="15" r="4"/><path d="m11 12 7-7 3 3-7 7"/><path d="m15 8 2 2"/>',
+      warning,
+    ),
+    feedback: createIcon('<path d="M4 5h16v12H8l-4 4z"/>', violet),
+    contact: createIcon(
+      '<path d="M4 5c0 9 6 15 15 15 1 0 2-1 2-2v-2l-4-2-2 2a11 11 0 0 1-5-5l2-2-2-4H6c-1 0-2 1-2 2Z"/>',
+      primary,
+    ),
+  }
 })
 
+/** 处理主题外观选择并持久化。 */
+const onThemeModeChange = (event: { detail: { value: string | number } }) => {
+  const nextMode = themeModeOptions[Number(event.detail.value)]
+  if (nextMode) themeStore.setMode(nextMode)
+}
+
 /** 处理语言选择并刷新动态本地化数据。 */
 const onLocaleChange = (event: { detail: { value: string | number } }) => {
   const nextLocale = localeOptions.value[Number(event.detail.value)]?.language_code as
@@ -107,6 +150,15 @@ const onMfaDisabled = async () => {
   uni.reLaunch({ url: '/pages/login/login' })
 }
 
+/** 返回个人中心，页面栈不可返回时回到首页。 */
+const onBack = () => {
+  uni.navigateBack({
+    fail: () => {
+      uni.reLaunch({ url: '/pages/index/index' })
+    },
+  })
+}
+
 // 公共设置模块挂载时加载 MFA 状态，兼容页面包装和业务插槽场景。
 onMounted(() => {
   if (!userStore.ensureAuthenticated()) {
@@ -126,7 +178,8 @@ const onLogout = () => {
   // 模态弹窗
   uni.showModal({
     content: t('core.settings.logout_confirm'),
-    confirmColor: '#27BA9B',
+    confirmColor: themeStore.theme === 'light' ? '#039e8c' : '#28f0d4',
+    cancelColor: themeStore.theme === 'light' ? '#5a7083' : '#8aa0b4',
     success: async (res) => {
       if (!res.confirm) {
         return
@@ -153,37 +206,98 @@ const onLogout = () => {
 </script>
 
 <template>
-  <view class="viewport">
+  <view class="settings-page" :class="themeStore.themeClass">
     <slot name="extensions" />
-    <view class="list">
-      <view v-if="userStore.isAuthenticated()" class="item arrow mfa-item" @tap="onMfaTap">
-        <text>{{ t('core.settings.mfa_title') }}</text>
-        <text class="mfa-value">{{ mfaStatusText }}</text>
+    <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('core.settings.title') }}</view>
+      <view class="k-page-nav__side" aria-hidden="true"></view>
+    </view>
+    <view class="settings-content">
+      <view class="k-set-cat">{{ t('core.settings.section_appearance') }}</view>
+      <picker :range="themeModeLabels" :value="themeModeIndex" @change="onThemeModeChange">
+        <view class="k-set-row k-set-row--arrow">
+          <view class="k-set-row__lead">
+            <view class="k-set-row__icon">
+              <image class="settings-row__icon" :src="settingsIcons.theme" mode="aspectFit" />
+            </view>
+            <text class="k-set-row__title">{{ t('core.settings.theme') }}</text>
+          </view>
+          <text class="k-set-row__value settings-row__value">{{
+            themeModeLabels[themeModeIndex]
+          }}</text>
+        </view>
+      </picker>
+
+      <view class="k-set-cat">{{ t('core.settings.section_security') }}</view>
+      <view v-if="userStore.isAuthenticated()" class="k-set-row k-set-row--arrow" @tap="onMfaTap">
+        <view class="k-set-row__lead">
+          <view class="k-set-row__icon">
+            <image class="settings-row__icon" :src="settingsIcons.mfa" mode="aspectFit" />
+          </view>
+          <text class="k-set-row__title">{{ t('core.settings.mfa_title') }}</text>
+        </view>
+        <text
+          class="k-set-row__value settings-row__value"
+          :class="{ 'k-set-row__value--on': mfaEnabled }"
+          >{{ mfaStatusText }}</text
+        >
       </view>
       <picker :range="localeLabels" :value="localeIndex" @change="onLocaleChange">
-        <view class="item arrow locale-item">
-          <text>{{ t('common.field.language') }}</text>
-          <text class="locale-value">{{ localeLabels[localeIndex] }}</text>
+        <view class="k-set-row k-set-row--arrow">
+          <view class="k-set-row__lead">
+            <view class="k-set-row__icon">
+              <image class="settings-row__icon" :src="settingsIcons.language" mode="aspectFit" />
+            </view>
+            <text class="k-set-row__title">{{ t('common.field.language') }}</text>
+          </view>
+          <text class="k-set-row__value settings-row__value">{{ localeLabels[localeIndex] }}</text>
         </view>
       </picker>
-    </view>
-    <!-- #ifdef MP-WEIXIN -->
-    <!-- 列表2 -->
-    <view class="list">
-      <button hover-class="none" class="item arrow" open-type="openSetting">
-        {{ t('core.settings.authorization') }}
+
+      <!-- #ifdef MP-WEIXIN -->
+      <view class="k-set-cat">{{ t('core.settings.section_more') }}</view>
+      <button
+        hover-class="none"
+        class="k-set-row k-set-row--arrow settings-row--button"
+        open-type="openSetting"
+      >
+        <view class="k-set-row__lead">
+          <view class="k-set-row__icon">
+            <image class="settings-row__icon" :src="settingsIcons.authorization" mode="aspectFit" />
+          </view>
+          <text class="k-set-row__title">{{ t('core.settings.authorization') }}</text>
+        </view>
       </button>
-      <button hover-class="none" class="item arrow" open-type="feedback">
-        {{ t('core.settings.feedback') }}
+      <button
+        hover-class="none"
+        class="k-set-row k-set-row--arrow settings-row--button"
+        open-type="feedback"
+      >
+        <view class="k-set-row__lead">
+          <view class="k-set-row__icon">
+            <image class="settings-row__icon" :src="settingsIcons.feedback" mode="aspectFit" />
+          </view>
+          <text class="k-set-row__title">{{ t('core.settings.feedback') }}</text>
+        </view>
       </button>
-      <button hover-class="none" class="item arrow" open-type="contact">
-        {{ t('core.settings.contact') }}
+      <button
+        hover-class="none"
+        class="k-set-row k-set-row--arrow settings-row--button"
+        open-type="contact"
+      >
+        <view class="k-set-row__lead">
+          <view class="k-set-row__icon">
+            <image class="settings-row__icon" :src="settingsIcons.contact" mode="aspectFit" />
+          </view>
+          <text class="k-set-row__title">{{ t('core.settings.contact') }}</text>
+        </view>
       </button>
-    </view>
-    <!-- #endif -->
-    <!-- 操作按钮 -->
-    <view class="action" v-if="userStore.isAuthenticated()">
-      <view @tap="onLogout" class="button">{{ t('common.action.logout') }}</view>
+      <!-- #endif -->
+
+      <view v-if="userStore.isAuthenticated()" class="k-set-logout" @tap="onLogout">{{
+        t('common.action.logout')
+      }}</view>
     </view>
   </view>
   <MfaManageDialog
@@ -196,101 +310,39 @@ const onLogout = () => {
 </template>
 
 <style scoped lang="scss">
-.viewport {
+.settings-page {
   min-height: 100vh;
-  padding: 20rpx;
   box-sizing: border-box;
-  background-color: #f4f4f4;
+  padding: 0 32rpx calc(40rpx + env(safe-area-inset-bottom));
+  background: var(--kratos-bg-gradient);
 }
-
-/* 列表 */
-.list {
-  padding: 0 20rpx;
-  background-color: #fff;
-  margin-bottom: 20rpx;
-  border-radius: 10rpx;
-  .item {
-    line-height: 90rpx;
-    padding-left: 10rpx;
-    font-size: 30rpx;
-    color: #333;
-    border-top: 1rpx solid #ddd;
-    position: relative;
-    text-align: left;
-    border-radius: 0;
-    background-color: #fff;
-    &::after {
-      width: auto;
-      height: auto;
-      left: auto;
-      border: none;
-    }
-    &::after {
-      right: 5rpx;
-    }
-  }
-  > .item:first-child {
-    border: none;
-  }
-  .arrow::after {
-    content: '›';
-    position: absolute;
-    top: 50%;
-    color: #ccc;
-    font-size: 36rpx;
-    transform: translateY(-50%);
-  }
+.settings-content {
+  padding-bottom: 20rpx;
 }
 
-.locale-item {
-  display: flex;
-  min-width: 0;
-  justify-content: space-between;
-  padding-right: 42rpx;
-
-  > text:first-child {
-    flex-shrink: 0;
-  }
+/* 行图标图片尺寸（挂在 .k-set-row__icon 内的 image 上） */
+.settings-row__icon {
+  width: 38rpx;
+  height: 38rpx;
 }
 
-.locale-value {
-  flex: 1;
+/* 行尾值文本截断（配合全局 .k-set-row__value 使用） */
+.settings-row__value {
   min-width: 0;
+  max-width: 45%;
   overflow: hidden;
-  margin-left: 24rpx;
-  color: #888;
-  text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.mfa-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-right: 42rpx;
-}
-
-.mfa-value {
-  max-width: 55%;
-  overflow: hidden;
-  color: #888;
-  font-size: 26rpx;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* 小程序 button 皮肤为 .k-set-row：去掉原生边框，保留箭头 ::after */
+.settings-row--button {
+  line-height: normal;
 }
 
-/* 操作按钮 */
-.action {
-  text-align: center;
-  line-height: 90rpx;
-  margin-top: 40rpx;
-  font-size: 32rpx;
-  color: #333;
-  .button {
-    background-color: #fff;
-    margin-bottom: 20rpx;
-    border-radius: 10rpx;
-  }
+.settings-row--button::after {
+  position: static;
+  border-left: 0;
+  border-bottom: 0;
 }
 </style>

package/src/components/KratosTabBar.vue

@@ -2,23 +2,37 @@
 import { computed, onMounted } from 'vue'
 import { resolveModuleIcon, resolveStaticView } from '../module'
 import { APP_MENU_ROOT_ID, useAppMenuBadge, useAppNavigation } from '../navigation'
-import { useI18n } from '../locales'
+import { useThemeStore } from '../stores'
 import { resolveRootMenuId } from '../navigation-tree.mjs'
 
 const props = defineProps<{ route: string }>()
 const { menus, tabBar, navigate } = useAppNavigation()
-const { t } = useI18n()
+const themeStore = useThemeStore()
 
-/** 按稳定 viewKey 优先取界面语言标签，未配置的菜单回退后端标题。 */
-const tabBarTitleKeys: Record<string, string> = {
-  HOME: 'core.navigation.home',
-  APP_ANALYTIC: 'core.navigation.analytics',
-  APP_REPORT: 'core.navigation.report',
-  MESSAGE_INBOX: 'core.navigation.message',
-  PROFILE_HOME: 'core.navigation.my',
+/** 设计稿导航坞线稿图标（viewKey → SVG path）。 */
+const TAB_ICON_PATHS: Record<string, string> = {
+  HOME: 'M3 11 12 3l9 8M5 10v10h14V10',
+  APP_ANALYTIC: 'M4 20V10M10 20V4M16 20v-7M21 20H3',
+  APP_REPORT: 'M6 4h9l5 5v11H6zM14 4v5h5',
+  MESSAGE_INBOX: 'M4 5h16v12H8l-4 4z',
+  PROFILE_HOME: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM4 21c0-4 3.5-6 8-6s8 2 8 6',
 }
-const tabBarTitle = (item: { viewKey: string; title: string }): string =>
-  (tabBarTitleKeys[item.viewKey] ? t(tabBarTitleKeys[item.viewKey]) : '') || item.title
+
+/** 按设计稿线稿生成随主题与激活态取色的图标地址，未知 viewKey 返回空串走后端图标兜底。 */
+const tabIconSrc = (viewKey: string, active: boolean): string => {
+  const path = TAB_ICON_PATHS[viewKey]
+  if (!path) return ''
+  const color = active
+    ? themeStore.theme === 'light'
+      ? '#039e8c'
+      : '#28f0d4'
+    : themeStore.theme === 'light'
+      ? '#9aabbb'
+      : '#4e6378'
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="${path}"/></svg>`
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
+}
+
 const activeMenu = computed(() => {
   const routeMenu = menus.value.find((menu) => resolveStaticView(menu.viewKey) === props.route)
   if (!routeMenu) return
@@ -36,11 +50,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <view v-if="visible" class="kratos-tab-bar">
+  <view v-if="visible" class="kratos-tab-bar" :class="themeStore.themeClass">
     <view
       v-for="item in tabBar"
       :key="item.id"
       class="kratos-tab-bar__item"
+      :class="{ 'kratos-tab-bar__item--active': activeMenu?.id === item.id }"
       @tap="navigate(item.path)"
     >
       <view
@@ -49,7 +64,13 @@ onMounted(() => {
         aria-hidden="true"
       />
       <image
-        v-if="resolveModuleIcon(item.icon)"
+        v-if="tabIconSrc(item.viewKey, activeMenu?.id === item.id)"
+        class="kratos-tab-bar__icon"
+        :src="tabIconSrc(item.viewKey, activeMenu?.id === item.id)"
+        mode="aspectFit"
+      />
+      <image
+        v-else-if="resolveModuleIcon(item.icon)"
         class="kratos-tab-bar__icon"
         :src="
           resolveModuleIcon(
@@ -65,7 +86,7 @@ onMounted(() => {
         aria-hidden="true"
       />
       <text :class="{ 'kratos-tab-bar__text--active': activeMenu?.id === item.id }">
-        {{ tabBarTitle(item) }}
+        {{ item.title }}
       </text>
     </view>
   </view>
@@ -73,20 +94,22 @@ onMounted(() => {
 
 <style scoped>
 .kratos-tab-bar {
-  --kratos-tab-bar-color: #333;
-  --kratos-tab-bar-active-color: #27ba9b;
+  --kratos-tab-bar-color: var(--kratos-color-text-dim, #4e6378);
+  --kratos-tab-bar-active-color: var(--kratos-color-primary, #28f0d4);
 
   position: fixed;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  right: 20rpx;
+  bottom: env(safe-area-inset-bottom);
+  left: 20rpx;
   z-index: 999;
-  box-sizing: border-box;
   display: flex;
-  height: calc(48px + env(safe-area-inset-bottom));
-  padding-bottom: env(safe-area-inset-bottom);
-  border-top: 1px solid #eee;
-  background: #fff;
+  height: 104rpx;
+  padding: 0 8rpx;
+  border: 1rpx solid var(--kratos-color-border-accent, rgba(120, 230, 215, 0.16));
+  border-radius: 30rpx;
+  background: var(--kratos-dock-bg, rgba(10, 18, 30, 0.72));
+  box-shadow: 0 24rpx 64rpx rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(32rpx);
 }
 .kratos-tab-bar__item {
   position: relative;
@@ -95,11 +118,24 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  transform: translateY(clamp(1px, env(safe-area-inset-bottom), 7px));
   color: var(--kratos-tab-bar-color);
   font-size: 10px;
   line-height: 12px;
 }
+
+/* 设计稿：激活项顶部霓虹发光条 */
+.kratos-tab-bar__item--active::before {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 26px;
+  height: 3px;
+  border-radius: 3px;
+  background: var(--kratos-tab-bar-active-color);
+  box-shadow: 0 0 12px var(--kratos-tab-bar-active-color);
+  content: '';
+  transform: translateX(-50%);
+}
 .kratos-tab-bar__icon {
   width: 28px;
   height: 28px;
@@ -135,7 +171,7 @@ onMounted(() => {
   height: 7px;
   border-right: 2px solid var(--kratos-tab-bar-color);
   border-bottom: 2px solid var(--kratos-tab-bar-color);
-  background: #fff;
+  background: var(--kratos-dock-bg, rgba(10, 18, 30, 0.72));
   content: '';
   transform: rotate(45deg);
 }
@@ -153,6 +189,8 @@ onMounted(() => {
 }
 .kratos-tab-bar__text--active {
   color: var(--kratos-tab-bar-active-color);
+  font-weight: 700;
+  text-shadow: 0 0 12px currentColor;
 }
 .kratos-tab-bar__badge {
   position: absolute;
@@ -161,8 +199,9 @@ onMounted(() => {
   width: 10px;
   height: 10px;
   box-sizing: border-box;
-  border: 2px solid #fff;
+  border: 2px solid var(--kratos-dock-bg, rgba(10, 18, 30, 0.72));
   border-radius: 50%;
-  background: #e5484d;
+  background: var(--kratos-color-danger, #ff4d6d);
+  box-shadow: 0 0 12px var(--kratos-color-danger, #ff4d6d);
 }
 </style>