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

package/src/utils/http.ts

@@ -11,6 +11,7 @@ import {
 } from './auth'
 import { saveCurrentRoute } from './navigation'
 import { getLocaleRequestHeaders, t } from '../locales'
+import { useThemeStore } from '../stores/theme'
 
 const apiBasePath = process.env.VITE_APP_BASE_API || '/api'
 const apiTargetUrl = process.env.VITE_APP_API_URL || ''
@@ -265,11 +266,13 @@ async function promptRelogin(): Promise<void> {
   if (isPromptingRelogin) return
   isPromptingRelogin = true
   try {
+    const theme = useThemeStore.getState().theme
     const modal = await Taro.showModal({
       title: t('common.title.notice'),
       content: t('core.auth.session_expired'),
       showCancel: false,
       confirmText: t('core.auth.login_again'),
+      confirmColor: theme === 'light' ? '#039e8c' : '#28f0d4',
     })
     if (!modal.confirm) return
     await new Promise((resolve) => setTimeout(resolve, 80))

package/src/utils/index.ts

@@ -1,3 +1,5 @@
+import Taro from '@tarojs/taro'
+
 const configuredStaticUrl =
   process.env.VITE_APP_STATIC_URL || process.env.VITE_APP_API_URL || ''
 
@@ -44,3 +46,20 @@ export function formatSrc(src: string): string {
     ? `${staticOrigin}${src}`
     : `${staticOrigin}/${src.replace(/^\/+/, '')}`
 }
+
+/**
+ * 微信小程序原生胶囊按钮（右上角 ⋯ / ◯）右侧避让宽度（px）。
+ * 自定义导航栏（navigationStyle: 'custom'）在 weapp 下仍会显示原生胶囊，
+ * 页头右侧若放置可交互图标/按钮需预留该宽度，避免与胶囊重叠；
+ * 非 weapp 平台返回 0，无需特殊处理。
+ */
+export function getMpCapsuleRightGap(): number {
+  if (process.env.TARO_ENV !== 'weapp') return 0
+  try {
+    const menu = Taro.getMenuButtonBoundingClientRect()
+    const { windowWidth } = Taro.getSystemInfoSync()
+    return Math.max(0, Math.round(windowWidth - menu.left + 12))
+  } catch {
+    return 0
+  }
+}

package/src/utils/navigation.ts

@@ -80,6 +80,18 @@ export function navigateToLogin(redirectUrl?: string): void {
   })
 }
 
+/** 跳转登录页并替换当前页面：路由守卫使用，避免反复拦截时在页面栈堆积登录页。 */
+export function redirectToLogin(redirectUrl?: string): void {
+  if (typeof redirectUrl === 'string' && redirectUrl) saveLoginRedirectUrl(redirectUrl)
+  else saveCurrentRoute()
+  void Taro.redirectTo({
+    url: LOGIN_PAGE,
+    fail: () => {
+      void Taro.reLaunch({ url: LOGIN_PAGE })
+    },
+  })
+}
+
 /** 返回首页。 */
 export function switchTabToHome(): Promise<TaroGeneral.CallbackResult> {
   return Taro.reLaunch({ url: homeTabPage })

package/src/views/pages/index/index.scss

@@ -1,122 +1,118 @@
+page {
+  background-color: #eef3f8;
+}
+
 .home-page {
+  position: relative;
   min-height: 100vh;
-  padding: 44px 28px 56px;
-  box-sizing: border-box;
-  background-color: #f7f7f8;
+  overflow: hidden;
+  background: var(--kratos-bg-gradient);
+}
+
+.home-page--weapp .home-content {
+  /* 44PX 是系统导航栏高度，88px 按设计稿转换为 44 物理像素。 */
+  padding-top: calc(44PX + 88px);
 }
 
-.home-page--weapp {
-  padding-top: calc(44px + 44PX);
+.home-content {
+  position: relative;
+  z-index: 1;
+  padding: calc(env(safe-area-inset-top) + 20px) 32px 220px;
+}
+
+.home-top {
+  padding: 8px 4px 24px;
+}
+
+/* 页面大标题 */
+.home-top__title {
+  margin-top: 14px;
+  color: var(--kratos-color-text);
+  font-size: 44px;
+  font-weight: 800;
+  letter-spacing: -0.5px;
 }
 
 .home-hero {
+  padding: 40px 36px;
+}
+
+.home-hero__main {
   display: flex;
   align-items: center;
-  padding: 34px 28px;
-  border-radius: 12px;
-  background-color: #27ba9b;
-  box-shadow: 0 8px 18px rgba(39, 186, 155, 0.18);
 }
 
+/* 简洁 Logo：圆角方块 + 细描边 */
 .home-logo {
   flex: 0 0 auto;
-  width: 92px;
-  height: 92px;
-  border-radius: 20px;
-  background-color: #fff;
+  width: 104px;
+  height: 104px;
+  border-radius: 26px;
+  border: 1PX solid var(--kratos-color-border-accent);
+  background: var(--kratos-color-surface-2);
 }
 
 .home-hero__copy {
   min-width: 0;
-  margin-left: 22px;
+  margin-left: 26px;
 }
 
-.home-title,
 .home-subtitle {
   display: block;
-}
-
-.home-title {
-  margin-top: 8px;
-  color: #fff;
-  font-size: 40px;
-  font-weight: 600;
-}
-
-.home-subtitle {
-  margin-top: 10px;
-  color: rgba(255, 255, 255, 0.86);
-  font-size: 24px;
+  color: var(--kratos-color-text-muted);
+  font-size: 26px;
+  line-height: 1.6;
 }
 
 .home-section {
-  margin-top: 24px;
+  margin-top: 36px;
 }
 
 .home-section__title {
   display: block;
-  margin: 0 8px 14px;
-  color: #26332f;
-  font-size: 28px;
-  font-weight: 600;
-}
-
-.home-info-list,
-.home-demo-list {
-  overflow: hidden;
-  border-radius: 10px;
-  background-color: #fff;
-}
-
-.home-info-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 26px 24px;
-  border-bottom: 1px solid #edf1ef;
-
-  &:last-child {
-    border-bottom: 0;
-  }
+  margin: 0 4px 16px;
+  color: var(--kratos-color-text-muted);
+  font-size: 26px;
+  font-weight: 700;
 }
 
-.home-info-label {
-  color: #66736f;
-  font-size: 26px;
+.home-info-list {
+  padding: 8px 28px;
 }
 
-.home-info-value {
-  color: #26332f;
-  font-size: 26px;
-  font-weight: 500;
+.home-demo-list {
+  padding: 10px 28px;
 }
 
 .home-demo-item {
   display: flex;
   align-items: flex-start;
-  padding: 26px 24px;
-  border-bottom: 1px solid #edf1ef;
+  padding: 28px 0;
+  border-top: 1PX solid var(--kratos-color-border);
 
-  &:last-child {
-    border-bottom: 0;
+  &:first-child {
+    border-top: 0;
   }
 }
 
 .home-demo-dot {
   flex: 0 0 auto;
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  background-color: #e8f8f4;
-  color: #16806d;
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  background: var(--kratos-color-primary-soft);
+  border: 1PX solid var(--kratos-color-primary-edge);
+  color: var(--kratos-color-primary);
   font-size: 24px;
-  line-height: 42px;
+  font-family: var(--kratos-font-mono);
+  font-weight: 700;
+  line-height: 46px;
   text-align: center;
 }
 
 .home-demo-copy {
   min-width: 0;
-  margin-left: 18px;
+  margin-left: 22px;
 }
 
 .home-demo-title,
@@ -125,14 +121,14 @@
 }
 
 .home-demo-title {
-  color: #26332f;
+  color: var(--kratos-color-text);
   font-size: 28px;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .home-demo-desc {
   margin-top: 8px;
-  color: #8a9691;
+  color: var(--kratos-color-text-muted);
   font-size: 24px;
   line-height: 1.5;
 }

package/src/views/pages/index/index.tsx

@@ -2,7 +2,7 @@ import { Image, Text, View } from '@tarojs/components'
 import { useLoad } from '@tarojs/taro'
 import { useEffect, useState } from 'react'
 import defaultLogo from '@liujitcn/kratos-taro-app-core/static/images/logo_icon.png'
-import { useSettingStore } from '../../../stores'
+import { useSettingStore, useThemeStore } from '../../../stores'
 import { formatSrc } from '../../../utils'
 import './index.scss'
 import { useI18n } from '../../../locales'
@@ -10,6 +10,7 @@ import { useI18n } from '../../../locales'
 /** 应用首页。 */
 export default function HomePage() {
   const { t } = useI18n()
+  const themeStore = useThemeStore()
   const settings = useSettingStore((state) => state.data)
   const loadData = useSettingStore((state) => state.loadData)
   const mainTitle = settings?.get('mainTitle') || t('core.home.main_title')
@@ -37,46 +38,61 @@ export default function HomePage() {
     [t('core.home.account_capability'), t('core.home.account_capability_description')],
     [t('core.home.static_home'), t('core.home.static_home_description')],
   ]
-
   return (
-    <View className={`home-page${process.env.TARO_ENV === 'weapp' ? ' home-page--weapp' : ''}`}>
-      <View className='home-hero'>
-        <Image
-          className='home-logo'
-          src={appLogo}
-          mode='aspectFit'
-          onError={() => setAppLogo(defaultLogo)}
-        />
-        <View className='home-hero__copy'>
-          <Text className='home-title'>{mainTitle}</Text>
-          <Text className='home-subtitle'>{subTitle}</Text>
+    <View
+      className={`home-page${process.env.TARO_ENV === 'weapp' ? ' home-page--weapp' : ''} ${
+        themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'
+      }`}
+    >
+      <View className='k-grid-bg' aria-hidden />
+      <View className='home-content'>
+        <View className='home-top'>
+          <View className='home-top__title'>{mainTitle}</View>
         </View>
-      </View>
 
-      <View className='home-section'>
-        <Text className='home-section__title'>{t('core.home.tech_stack')}</Text>
-        <View className='home-info-list'>
-          {stack.map(([label, value]) => (
-            <View className='home-info-row' key={label}>
-              <Text className='home-info-label'>{label}</Text>
-              <Text className='home-info-value'>{value}</Text>
+        <View className='k-glass k-glass--lit home-hero'>
+          <View className='k-cnr k-cnr--tl' aria-hidden />
+          <View className='k-cnr k-cnr--tr' aria-hidden />
+          <View className='k-cnr k-cnr--bl' aria-hidden />
+          <View className='k-cnr k-cnr--br' aria-hidden />
+          <View className='home-hero__main'>
+            <Image
+              className='home-logo'
+              src={appLogo}
+              mode='aspectFit'
+              onError={() => setAppLogo(defaultLogo)}
+            />
+            <View className='home-hero__copy'>
+              <Text className='home-subtitle'>{subTitle}</Text>
             </View>
-          ))}
+          </View>
         </View>
-      </View>
 
-      <View className='home-section'>
-        <Text className='home-section__title'>{t('core.home.demo_scope')}</Text>
-        <View className='home-demo-list'>
-          {demos.map(([title, description], index) => (
-            <View className='home-demo-item' key={title}>
-              <View className='home-demo-dot'>{index + 1}</View>
-              <View className='home-demo-copy'>
-                <Text className='home-demo-title'>{title}</Text>
-                <Text className='home-demo-desc'>{description}</Text>
+        <View className='home-section'>
+          <Text className='home-section__title'>{t('core.home.tech_stack')}</Text>
+          <View className='k-glass home-info-list'>
+            {stack.map(([label, value]) => (
+              <View className='k-field' key={label}>
+                <Text className='k-field__k'>{label}</Text>
+                <Text className='k-field__v'>{value}</Text>
               </View>
-            </View>
-          ))}
+            ))}
+          </View>
+        </View>
+
+        <View className='home-section'>
+          <Text className='home-section__title'>{t('core.home.demo_scope')}</Text>
+          <View className='k-glass home-demo-list'>
+            {demos.map(([title, description], index) => (
+              <View className='home-demo-item' key={title}>
+                <View className='home-demo-dot'>{index + 1}</View>
+                <View className='home-demo-copy'>
+                  <Text className='home-demo-title'>{title}</Text>
+                  <Text className='home-demo-desc'>{description}</Text>
+                </View>
+              </View>
+            ))}
+          </View>
         </View>
       </View>
     </View>