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

package/src/styles/theme.scss

@@ -0,0 +1,66 @@
+/* ============================================================
+ * Kratos 移动端主题令牌（暗黑 / 明亮双主题）
+ * 变量挂在页面根类 .theme-dark / .theme-light 上，页面样式只消费变量。
+ * ============================================================ */
+
+/* 暗黑主题：深色数据驾驶舱 */
+.theme-dark {
+  --kratos-color-background: #060a12;
+  --kratos-bg-gradient: linear-gradient(180deg, #081120 0%, #060a12 40%);
+  --kratos-color-surface: rgba(255, 255, 255, 0.035);
+  --kratos-color-surface-2: rgba(255, 255, 255, 0.06);
+  --kratos-color-surface-solid: #070d18;
+  --kratos-color-border: rgba(255, 255, 255, 0.08);
+  --kratos-color-border-accent: rgba(120, 230, 215, 0.16);
+  --kratos-color-primary: #28f0d4;
+  --kratos-color-primary-deep: #13c7b4;
+  --kratos-color-on-primary: #031513;
+  --kratos-color-primary-soft: rgba(40, 240, 212, 0.08);
+  --kratos-color-primary-soft-2: rgba(40, 240, 212, 0.1);
+  --kratos-color-primary-edge: rgba(40, 240, 212, 0.3);
+  --kratos-color-info: #45c2ff;
+  --kratos-color-warning: #ffb648;
+  --kratos-color-danger: #ff4d6d;
+  --kratos-color-danger-soft: rgba(255, 77, 109, 0.1);
+  --kratos-color-violet: #9b8cff;
+  --kratos-color-text: #e9f4f6;
+  --kratos-color-text-muted: #8aa0b4;
+  --kratos-color-text-dim: #4e6378;
+  --kratos-color-track: rgba(255, 255, 255, 0.06);
+  --kratos-color-mask: rgba(2, 6, 12, 0.55);
+  --kratos-dock-bg: rgba(10, 18, 30, 0.72);
+  --kratos-glow: 0 0 24px rgba(40, 240, 212, 0.35);
+  --kratos-glow-soft: 0 0 40px rgba(40, 240, 212, 0.06);
+  --kratos-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+}
+
+/* 明亮主题 */
+.theme-light {
+  --kratos-color-background: #eef3f8;
+  --kratos-bg-gradient: linear-gradient(180deg, #f4f9fd 0%, #e9f1f8 60%);
+  --kratos-color-surface: #ffffff;
+  --kratos-color-surface-2: #eef4fa;
+  --kratos-color-surface-solid: #ffffff;
+  --kratos-color-border: #e3eaf2;
+  --kratos-color-border-accent: rgba(0, 150, 134, 0.28);
+  --kratos-color-primary: #039e8c;
+  --kratos-color-primary-deep: #00b3a0;
+  --kratos-color-on-primary: #ffffff;
+  --kratos-color-primary-soft: rgba(3, 158, 140, 0.08);
+  --kratos-color-primary-soft-2: rgba(3, 158, 140, 0.1);
+  --kratos-color-primary-edge: rgba(3, 158, 140, 0.3);
+  --kratos-color-info: #1a93d8;
+  --kratos-color-warning: #d9880f;
+  --kratos-color-danger: #e0324f;
+  --kratos-color-danger-soft: rgba(224, 50, 79, 0.1);
+  --kratos-color-violet: #5f4fe0;
+  --kratos-color-text: #102232;
+  --kratos-color-text-muted: #5a7083;
+  --kratos-color-text-dim: #9aabbb;
+  --kratos-color-track: #e8eef5;
+  --kratos-color-mask: rgba(16, 34, 50, 0.45);
+  --kratos-dock-bg: rgba(255, 255, 255, 0.82);
+  --kratos-glow: 0 10px 26px rgba(0, 120, 110, 0.14);
+  --kratos-glow-soft: none;
+  --kratos-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+}

package/src/utils/index.ts

@@ -83,3 +83,24 @@ export const formatSrc = (src: string) => {
 
   return `${staticOrigin}/${src.replace(/^\/+/, '')}`
 }
+
+/**
+ * 微信小程序原生胶囊按钮（右上角 ⋯ / ◯）右侧避让宽度（px）。
+ * 自定义导航栏（navigationStyle: 'custom'）在 MP-WEIXIN 下仍会显示原生胶囊，
+ * 页头右侧若放置可交互图标/按钮需预留该宽度，避免与胶囊重叠；
+ * 非 MP-WEIXIN 平台返回 0，无需特殊处理。
+ */
+export const getMpCapsuleRightGap = (): number => {
+  // #ifdef MP-WEIXIN
+  try {
+    const menu = uni.getMenuButtonBoundingClientRect()
+    const { windowWidth } = uni.getSystemInfoSync()
+    return Math.max(0, Math.round(windowWidth - menu.left + 12))
+  } catch {
+    return 0
+  }
+  // #endif
+  // #ifndef MP-WEIXIN
+  return 0
+  // #endif
+}

package/src/utils/navigation.ts

@@ -77,5 +77,21 @@ export const navigateToLogin = (redirectUrl?: string) => {
   })
 }
 
+/** 跳转登录页并替换当前页面：路由守卫使用，避免反复拦截时在页面栈堆积登录页。 */
+export const redirectToLogin = (redirectUrl?: string) => {
+  // 模板直接绑定时会传入点击事件对象，只有字符串才是明确的回跳地址。
+  if (typeof redirectUrl === 'string' && redirectUrl) {
+    saveLoginRedirectUrl(redirectUrl)
+  } else {
+    saveCurrentRoute()
+  }
+  uni.redirectTo({
+    url: LOGIN_PAGE,
+    fail: () => {
+      uni.reLaunch({ url: LOGIN_PAGE })
+    },
+  })
+}
+
 /** 返回首页。 */
 export const switchTabToHome = () => uni.reLaunch({ url: homeTabPage })

package/src/views/pages/index/index.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { onLoad } from '@dcloudio/uni-app'
 import { computed, ref, watch } from 'vue'
-import { useSettingStore } from '../../../stores'
+import { useSettingStore, useThemeStore } from '../../../stores'
 import defaultLogo from '../../../static/images/logo_icon.png'
 import { formatSrc } from '../../../utils'
 import { useI18n } from '../../../locales'
 
 const settingStore = useSettingStore()
+const themeStore = useThemeStore()
 const { t } = useI18n()
 const mainTitle = computed(() => settingStore.getData('mainTitle') || t('core.home.main_title'))
 const subTitle = computed(() => settingStore.getData('subTitle') || t('core.home.sub_title'))
@@ -37,59 +38,73 @@ onLoad(() => {
 </script>
 
 <template>
-  <view class="page">
-    <view class="hero">
-      <image class="logo" :src="appLogo" mode="aspectFit" @error="handleLogoError" />
-      <view class="hero-copy">
-        <text class="title">{{ mainTitle }}</text>
-        <text class="subtitle">{{ subTitle }}</text>
+  <view class="home-page" :class="themeStore.themeClass">
+    <view class="k-grid-bg" aria-hidden="true"></view>
+    <view class="home-content">
+      <view class="home-top">
+        <view class="home-top__title">{{ mainTitle }}</view>
       </view>
-    </view>
 
-    <view class="section">
-      <text class="section-title">{{ t('core.home.tech_stack') }}</text>
-      <view class="info-list">
-        <view class="info-row">
-          <text class="info-label">{{ t('core.home.framework') }}</text>
-          <text class="info-value">uni-app + Vue 3</text>
-        </view>
-        <view class="info-row">
-          <text class="info-label">{{ t('core.home.language') }}</text>
-          <text class="info-value">TypeScript</text>
-        </view>
-        <view class="info-row">
-          <text class="info-label">{{ t('core.home.state_management') }}</text>
-          <text class="info-value">Pinia</text>
-        </view>
-        <view class="info-row">
-          <text class="info-label">{{ t('core.home.style_solution') }}</text>
-          <text class="info-value">Sass + rpx</text>
+      <view class="k-glass k-glass--lit home-hero">
+        <view class="k-cnr k-cnr--tl" aria-hidden="true"></view>
+        <view class="k-cnr k-cnr--tr" aria-hidden="true"></view>
+        <view class="k-cnr k-cnr--bl" aria-hidden="true"></view>
+        <view class="k-cnr k-cnr--br" aria-hidden="true"></view>
+        <view class="home-hero__main">
+          <image class="home-logo" :src="appLogo" mode="aspectFit" @error="handleLogoError" />
+          <view class="home-hero__copy">
+            <text class="home-subtitle">{{ subTitle }}</text>
+          </view>
         </view>
       </view>
-    </view>
 
-    <view class="section">
-      <text class="section-title">{{ t('core.home.demo_scope') }}</text>
-      <view class="demo-list">
-        <view class="demo-item">
-          <view class="demo-dot">1</view>
-          <view class="demo-copy">
-            <text class="demo-title">{{ t('core.home.cross_platform') }}</text>
-            <text class="demo-desc">{{ t('core.home.cross_platform_description') }}</text>
+      <view class="home-section">
+        <text class="home-section__title">{{ t('core.home.tech_stack') }}</text>
+        <view class="k-glass home-info-list">
+          <view class="k-field">
+            <text class="k-field__k">{{ t('core.home.framework') }}</text>
+            <text class="k-field__v">uni-app + Vue 3</text>
           </view>
-        </view>
-        <view class="demo-item">
-          <view class="demo-dot">2</view>
-          <view class="demo-copy">
-            <text class="demo-title">{{ t('core.home.account_capability') }}</text>
-            <text class="demo-desc">{{ t('core.home.account_capability_description') }}</text>
+          <view class="k-field">
+            <text class="k-field__k">{{ t('core.home.language') }}</text>
+            <text class="k-field__v">TypeScript</text>
+          </view>
+          <view class="k-field">
+            <text class="k-field__k">{{ t('core.home.state_management') }}</text>
+            <text class="k-field__v">Pinia</text>
+          </view>
+          <view class="k-field">
+            <text class="k-field__k">{{ t('core.home.style_solution') }}</text>
+            <text class="k-field__v">Sass + rpx</text>
           </view>
         </view>
-        <view class="demo-item">
-          <view class="demo-dot">3</view>
-          <view class="demo-copy">
-            <text class="demo-title">{{ t('core.home.static_home') }}</text>
-            <text class="demo-desc">{{ t('core.home.static_home_description') }}</text>
+      </view>
+
+      <view class="home-section">
+        <text class="home-section__title">{{ t('core.home.demo_scope') }}</text>
+        <view class="k-glass home-demo-list">
+          <view class="home-demo-item">
+            <view class="home-demo-dot">1</view>
+            <view class="home-demo-copy">
+              <text class="home-demo-title">{{ t('core.home.cross_platform') }}</text>
+              <text class="home-demo-desc">{{ t('core.home.cross_platform_description') }}</text>
+            </view>
+          </view>
+          <view class="home-demo-item">
+            <view class="home-demo-dot">2</view>
+            <view class="home-demo-copy">
+              <text class="home-demo-title">{{ t('core.home.account_capability') }}</text>
+              <text class="home-demo-desc">{{
+                t('core.home.account_capability_description')
+              }}</text>
+            </view>
+          </view>
+          <view class="home-demo-item">
+            <view class="home-demo-dot">3</view>
+            <view class="home-demo-copy">
+              <text class="home-demo-title">{{ t('core.home.static_home') }}</text>
+              <text class="home-demo-desc">{{ t('core.home.static_home_description') }}</text>
+            </view>
           </view>
         </view>
       </view>
@@ -98,151 +113,132 @@ onLoad(() => {
 </template>
 
 <style lang="scss">
-page {
-  background-color: #f7f7f8;
+.home-page {
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+  background: var(--kratos-bg-gradient);
 }
 
-.page {
-  min-height: 100vh;
-  padding: 44rpx 28rpx 56rpx;
-  box-sizing: border-box;
+.home-content {
+  position: relative;
+  z-index: 1;
+  padding: calc(env(safe-area-inset-top) + 20rpx) 32rpx 220rpx;
 
   /* #ifdef MP-WEIXIN */
-  padding-top: calc(44rpx + 44px);
+  padding-top: calc(44px + 24rpx);
   /* #endif */
 }
 
-.hero {
-  display: flex;
-  align-items: center;
-  padding: 34rpx 28rpx;
-  border-radius: 12rpx;
-  background-color: #27ba9b;
-  box-shadow: 0 8rpx 18rpx rgba(39, 186, 155, 0.18);
-}
-
-.logo {
-  flex: 0 0 auto;
-  width: 92rpx;
-  height: 92rpx;
-  border-radius: 20rpx;
-  background-color: #fff;
+.home-top {
+  padding: 8rpx 4rpx 24rpx;
 }
 
-.hero-copy {
-  min-width: 0;
-  margin-left: 22rpx;
+/* 页面大标题 */
+.home-top__title {
+  margin-top: 14rpx;
+  color: var(--kratos-color-text);
+  font-size: 44rpx;
+  font-weight: 800;
+  letter-spacing: -0.5rpx;
 }
 
-.eyebrow,
-.title,
-.subtitle {
-  display: block;
+.home-hero {
+  padding: 40rpx 36rpx;
 }
 
-.eyebrow {
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 20rpx;
-  letter-spacing: 2rpx;
-}
-
-.title {
-  margin-top: 8rpx;
-  color: #fff;
-  font-size: 40rpx;
-  font-weight: 600;
+.home-hero__main {
+  display: flex;
+  align-items: center;
 }
 
-.subtitle {
-  margin-top: 10rpx;
-  color: rgba(255, 255, 255, 0.86);
-  font-size: 24rpx;
+/* 简洁 Logo：圆角方块 + 细描边 */
+.home-logo {
+  flex: 0 0 auto;
+  width: 104rpx;
+  height: 104rpx;
+  border-radius: 26rpx;
+  border: 1rpx solid var(--kratos-color-border-accent);
+  background: var(--kratos-color-surface-2);
 }
 
-.section {
-  margin-top: 24rpx;
+.home-hero__copy {
+  min-width: 0;
+  margin-left: 26rpx;
 }
 
-.section-title {
+.home-subtitle {
   display: block;
-  margin: 0 8rpx 14rpx;
-  color: #26332f;
-  font-size: 28rpx;
-  font-weight: 600;
-}
-
-.info-list,
-.demo-list {
-  overflow: hidden;
-  border-radius: 10rpx;
-  background-color: #fff;
+  color: var(--kratos-color-text-muted);
+  font-size: 26rpx;
+  line-height: 1.6;
 }
 
-.info-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 26rpx 24rpx;
-  border-bottom: 1rpx solid #edf1ef;
+.home-section {
+  margin-top: 36rpx;
 }
 
-.info-row:last-child {
-  border-bottom: 0;
+.home-section__title {
+  display: block;
+  margin: 0 4rpx 16rpx;
+  color: var(--kratos-color-text-muted);
+  font-size: 26rpx;
+  font-weight: 700;
 }
 
-.info-label {
-  color: #66736f;
-  font-size: 26rpx;
+.home-info-list {
+  padding: 8rpx 28rpx;
 }
 
-.info-value {
-  color: #26332f;
-  font-size: 26rpx;
-  font-weight: 500;
+.home-demo-list {
+  padding: 10rpx 28rpx;
 }
 
-.demo-item {
+.home-demo-item {
   display: flex;
   align-items: flex-start;
-  padding: 26rpx 24rpx;
-  border-bottom: 1rpx solid #edf1ef;
-}
+  padding: 28rpx 0;
+  border-top: 1rpx solid var(--kratos-color-border);
 
-.demo-item:last-child {
-  border-bottom: 0;
+  &:first-child {
+    border-top: 0;
+  }
 }
 
-.demo-dot {
+.home-demo-dot {
   flex: 0 0 auto;
-  width: 42rpx;
-  height: 42rpx;
-  border-radius: 50%;
-  background-color: #e8f8f4;
-  color: #16806d;
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 14rpx;
+  background: var(--kratos-color-primary-soft);
+  border: 1rpx solid var(--kratos-color-primary-edge);
+  color: var(--kratos-color-primary);
   font-size: 24rpx;
-  line-height: 42rpx;
+  font-family: var(--kratos-font-mono);
+  font-weight: 700;
+  line-height: 46rpx;
   text-align: center;
 }
 
-.demo-copy {
+.home-demo-copy {
   min-width: 0;
-  margin-left: 18rpx;
+  margin-left: 22rpx;
 }
 
-.demo-title,
-.demo-desc {
+.home-demo-title,
+.home-demo-desc {
   display: block;
 }
 
-.demo-title {
-  color: #26332f;
+.home-demo-title {
+  color: var(--kratos-color-text);
   font-size: 28rpx;
-  font-weight: 500;
+  font-weight: 600;
 }
 
-.demo-desc {
+.home-demo-desc {
   margin-top: 8rpx;
-  color: #8a9691;
+  color: var(--kratos-color-text-muted);
   font-size: 24rpx;
   line-height: 1.5;
 }