uview-ultra 4.5.53 → 4.5.71

package/components/up-transition/vue.ani-style.scss

@@ -25,13 +25,18 @@ $up-zoom-scale: scale(0.95);
 	opacity: 0
 }
 
-.up-fade-zoom-enter,
+.up-fade-enter-to {
+	opacity: 1;
+}.up-fade-zoom-enter,
 .up-fade-zoom-leave-to {
 	transform: $up-zoom-scale;
 	opacity: 0;
 }
 
-.up-fade-zoom-enter-active,
+.up-fade-zoom-enter-to {
+	transform: scale(1);
+	opacity: 1;
+}.up-fade-zoom-enter-active,
 .up-fade-zoom-leave-active {
 	transition-property: transform, opacity;
 }
@@ -53,25 +58,37 @@ $up-zoom-scale: scale(0.95);
 	opacity: 0
 }
 
-.up-fade-down-enter,
+.up-fade-up-enter-to {
+	transform: translateY(0);
+	opacity: 1;
+}.up-fade-down-enter,
 .up-fade-down-leave-to {
 	transform: translateY(-100%);
 	opacity: 0
 }
 
-.up-fade-left-enter,
+.up-fade-down-enter-to {
+	transform: translateY(0);
+	opacity: 1;
+}.up-fade-left-enter,
 .up-fade-left-leave-to {
 	transform: translateX(-100%);
 	opacity: 0
 }
 
-.up-fade-right-enter,
+.up-fade-left-enter-to {
+	transform: translateX(0);
+	opacity: 1;
+}.up-fade-right-enter,
 .up-fade-right-leave-to {
 	transform: translateX(100%);
 	opacity: 0
 }
 
-.up-slide-down-enter-active,
+.up-fade-right-enter-to {
+	transform: translateX(0);
+	opacity: 1;
+}.up-slide-down-enter-active,
 .up-slide-down-leave-active,
 .up-slide-left-enter-active,
 .up-slide-left-leave-active,
@@ -87,22 +104,34 @@ $up-zoom-scale: scale(0.95);
 	transform: translateY(100%)
 }
 
-.up-slide-down-enter,
+.up-slide-up-enter-to {
+	transform: translateY(0);
+	opacity: 1;
+}.up-slide-down-enter,
 .up-slide-down-leave-to {
 	transform: translateY(-100%)
 }
 
-.up-slide-left-enter,
+.up-slide-down-enter-to {
+	transform: translateY(0);
+	opacity: 1;
+}.up-slide-left-enter,
 .up-slide-left-leave-to {
 	transform: translateX(-100%)
 }
 
-.up-slide-right-enter,
+.up-slide-left-enter-to {
+	transform: translateX(0);
+	opacity: 1;
+}.up-slide-right-enter,
 .up-slide-right-leave-to {
 	transform: translateX(100%)
 }
 
-.up-zoom-enter-active,
+.up-slide-right-enter-to {
+	transform: translateX(0);
+	opacity: 1;
+}.up-zoom-enter-active,
 .up-zoom-leave-active {
 	transition-property: transform
 }

package/libs/theme/theme.js

@@ -95,7 +95,8 @@ export const themeState = {
     vars: {}
 }
 
-const THEME_MODE_STORAGE_KEY = 'u-theme-mode'
+const THEME_MODE_STORAGE_KEY = 'up-theme-mode'
+const LEGACY_THEME_MODE_STORAGE_KEY = 'u-theme-mode'
 const THEME_MODE_SYSTEM = 'system'
 const THEME_MODE_MANUAL = ['light', 'dark']
 const LIGHT_THEME_TOKEN_FIELD_MAP = Object.freeze({
@@ -229,7 +230,16 @@ function getExplicitRuntimeColorValue(token, runtimeColorMap = {}) {
 function readThemePreferenceFromStorage() {
     try {
         if (typeof uni !== 'undefined' && typeof uni.getStorageSync === 'function') {
-            const mode = uni.getStorageSync(THEME_MODE_STORAGE_KEY)
+            let mode = uni.getStorageSync(THEME_MODE_STORAGE_KEY)
+            // 旧 `u-theme-mode` 迁移（fork 时代 key）。
+            if (typeof mode !== 'string' || mode.length === 0) {
+                const legacy = uni.getStorageSync(LEGACY_THEME_MODE_STORAGE_KEY)
+                if (typeof legacy === 'string' && legacy.length > 0) {
+                    mode = legacy
+                    uni.setStorageSync(THEME_MODE_STORAGE_KEY, legacy)
+                    uni.removeStorageSync(LEGACY_THEME_MODE_STORAGE_KEY)
+                }
+            }
             return normalizeThemePreference(mode)
         }
     } catch (e) {}

package/libs/theme/theme.uts

@@ -92,7 +92,11 @@ const EXTRA_LIGHT_VARS: UTSJSONObject = {
     // 于是没有底色 —— 而 App 端也不支持 `backdrop-filter`，两层一没，滚动时顶栏看起来
     // 跟全透明没区别（这正是「开了 frosted 却没效果」的原因）。
     '--up-navbar-glass-bg': 'rgba(255, 255, 255, 0.75)',
-    '--up-navbar-glass-border': 'rgba(0, 0, 0, 0.08)'
+    '--up-navbar-glass-border': 'rgba(0, 0, 0, 0.08)',
+    // 底栏激活项的实心块底色：默认 #1c1c1f（原硬编码值）。
+    // 与主色无关——激活块要衬托彩色填充图标，跟主色联动反而会撞色。
+    // iOS 27 风格：浅灰选中块（应用方 2026-10-30 指定）
+    '--up-tabbar-active-bg': '#e9e9eb'
 }
 
 const EXTRA_DARK_VARS: UTSJSONObject = {
@@ -107,7 +111,10 @@ const EXTRA_DARK_VARS: UTSJSONObject = {
     '--up-calendar-month-mark-color': 'rgba(255, 255, 255, 0.04)',
     // 暗色下不透明度要更高：暗底上叠亮内容，72% 会糊成一片读不清。
     '--up-navbar-glass-bg': 'rgba(28, 28, 30, 0.78)',
-    '--up-navbar-glass-border': 'rgba(255, 255, 255, 0.12)'
+    '--up-navbar-glass-border': 'rgba(255, 255, 255, 0.12)',
+    // 深色下保持 #3a3a3c：纯黑会融进深色底栏，激活块消失。
+    // 深色：比底栏底（#1c1c1e 系）微亮一档的选中块
+    '--up-tabbar-active-bg': '#2c2c2e'
 }
 
 // 主题色字段 -> CSS 变量 token（不含 --up-/--u- 前缀）
@@ -141,7 +148,9 @@ const FIELD_TOKENS: UTSJSONObject = {
     'disabledColor': 'disabled-color'
 }
 
-const THEME_MODE_STORAGE_KEY = 'u-theme-mode'
+const THEME_MODE_STORAGE_KEY = 'up-theme-mode'
+/** 旧存储 key（fork 时代 `u-` 前缀）。首次读取时迁移到 `up-theme-mode` 后即可弃用。 */
+const LEGACY_THEME_MODE_STORAGE_KEY = 'u-theme-mode'
 
 // ---------------- 响应式状态 ----------------
 
@@ -178,11 +187,23 @@ function pickColor(colors: UTSJSONObject, field: string, fallback: string): stri
     return fallback
 }
 
-/** 读取 config.uts color 中显式配置的 token（支持 up-/u- 双前缀 key） */
-function configColorOverride(token: string): string {
+/**
+ * 读取 config.uts color 中显式配置的 token（支持 up-/u- 双前缀 key）。
+ *
+ * 支持**按主题模式**覆盖：`up-primary-light` / `up-primary-dark` 后缀键优先于单值键
+ * `up-primary`——应用要「浅色主色换黑系、深色保持原主色」这类需求时不用写 JS。
+ */
+function configColorOverride(token: string, isDark: boolean): string {
     const colorMap = config['color']
     if (!(colorMap instanceof UTSJSONObject)) return ''
     const conf = colorMap as UTSJSONObject
+    const modeSuffix = isDark ? 'dark' : 'light'
+    const modeUpKey = `up-${token}-${modeSuffix}`
+    const modeUKey = `u-${token}-${modeSuffix}`
+    const modeUpValue = conf[modeUpKey]
+    if (typeof modeUpValue === 'string' && (modeUpValue as string).length > 0) return modeUpValue as string
+    const modeUValue = conf[modeUKey]
+    if (typeof modeUValue === 'string' && (modeUValue as string).length > 0) return modeUValue as string
     const upKey = `up-${token}`
     const uKey = `u-${token}`
     const upValue = conf[upKey]
@@ -224,7 +245,9 @@ export function getThemeVars(mode: string | null = null): UTSJSONObject {
     UTSJSONObject.keys(FIELD_TOKENS).forEach((field: string) => {
         const token = FIELD_TOKENS[field] as string
         const fallback = pickColor(base, field, isDark ? '#1f1f1f' : '#303133')
-        const override = configColorOverride(token)
+        // 优先级：运行时品牌色（设置页切换）> config 覆盖（编译期/模式后缀）> 主题表默认。
+        const runtimePrimary = token == "primary" ? upThemePrimaryColor.value : ""
+        const override = runtimePrimary.length > 0 ? runtimePrimary : configColorOverride(token, isDark)
         const value = override.length > 0 ? override : fallback
         vars[`--up-${token}`] = value
         vars[`--u-${token}`] = value
@@ -306,6 +329,43 @@ export function upThemeVar(varName: string, fallbackColor: string = ''): string
     return fallbackColor
 }
 
+/**
+ * 读取主题色并**附加透明度**，返回 rgba() 字符串。
+ *
+ * 为什么需要它：`--up-primary` 是十六进制串，CSS 里没法直接给它加 alpha —— 业务侧
+ * 想要「主色 12% 的浅底」（图标底衬、选中态背景、发光阴影）时只能硬编码一个
+ * rgba 蓝，主色一换就不同步。这里在脚本侧把当前主色解析成 rgba，随主题与运行时
+ * 品牌色一起变化。
+ *
+ * 注意 `--up-primary-light` 不是这个用途：那是主题表里**独立的浅色档**（浅色
+ * #ecf5ff / 深色 #10243a），不随主色计算，不能当「主色 + alpha」用。
+ *
+ * @param varName 变量名（如 `--up-primary`）
+ * @param alpha 0-1 的透明度
+ * @param fallbackColor 变量取不到时的兜底十六进制色
+ */
+export function upThemeColorAlpha(varName: string, alpha: number, fallbackColor: string = '#2979ff'): string {
+    const base = upThemeVar(varName, fallbackColor)
+    const rgb = parseHexColor(base)
+    if (rgb == null) return base
+    const clamped = alpha < 0 ? 0 : (alpha > 1 ? 1 : alpha)
+    const a = Math.round(clamped * 1000) / 1000
+    return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${a})`
+}
+
+/** `#RGB` / `#RRGGBB` → [r, g, b]；其它格式（已是 rgba 等）返回 null。 */
+function parseHexColor(value: string): number[] | null {
+    const match = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(value.trim())
+    if (match == null) return null
+    let body = match[1]
+    if (body.length == 3) {
+        body = `${body[0]}${body[0]}${body[1]}${body[1]}${body[2]}${body[2]}`
+    }
+    const parsed = parseInt(body, 16)
+    if (isNaN(parsed)) return null
+    return [(parsed >> 16) & 0xff, (parsed >> 8) & 0xff, parsed & 0xff]
+}
+
 /** 当前是否暗黑（响应式）。 */
 export function upThemeIsDark(): boolean {
     return upThemeMode.value === 'dark'
@@ -383,6 +443,55 @@ function applyTheme(mode: string): void {
     } catch (e) {}
 }
 
+// ---------------- 运行时主色（品牌色）切换 ----------------
+
+const THEME_PRIMARY_STORAGE_KEY = "up-theme-primary"
+/** 旧 key：4.5.66 首版误用了 `u-` 前缀，读取时迁移。 */
+const LEGACY_THEME_PRIMARY_STORAGE_KEY = "u-theme-primary"
+
+/** 当前生效的主色（运行时覆盖值；空串表示未覆盖、走 config/默认）。 */
+export const upThemePrimaryColor = ref<string>("")
+
+/**
+ * 设置运行时主色并立即生效 + 持久化。传空串清除覆盖、回到 config 默认。
+ *
+ * 与 `config.color['up-primary-light']` 的区别：config 是**编译期**配置
+ * （发布不同品牌包时改它），这里是**运行时**用户可切换的品牌色（设置页取色器）。
+ * 二者优先级：运行时值 > config 覆盖 > 主题表默认。
+ *
+ * 只覆盖主色单值（浅/深共用）——浅色用黑系、深色保持默认蓝这类按模式区分的
+ * 场景仍走 config 的 `up-primary-light/-dark` 后缀键。
+ */
+export function setThemePrimaryColor(color: string): void {
+    const normalized = normalizeHexColor(color)
+    upThemePrimaryColor.value = normalized
+    try {
+        if (normalized.length > 0) {
+            uni.setStorageSync(THEME_PRIMARY_STORAGE_KEY, normalized)
+        } else {
+            uni.removeStorageSync(THEME_PRIMARY_STORAGE_KEY)
+        }
+    } catch (e) {}
+    applyTheme(upThemeMode.value)
+}
+
+/** 读取当前运行时主色覆盖值（未覆盖返回空串）。 */
+export function getThemePrimaryColor(): string {
+    return upThemePrimaryColor.value
+}
+
+function normalizeHexColor(value: string): string {
+    const color = value.trim()
+    if (color.length == 0) return ""
+    const match = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(color)
+    if (match == null) return ""
+    const body = match[1]
+    if (body.length == 3) {
+        return `#${body[0]}${body[0]}${body[1]}${body[1]}${body[2]}${body[2]}`.toLowerCase()
+    }
+    return `#${body}`.toLowerCase()
+}
+
 /** 设置并持久化主题偏好（'light' | 'dark'）。 */
 export function setTheme(mode: string): void {
     const preference = normalizeThemeMode(mode)
@@ -412,9 +521,35 @@ export function setThemePreference(mode: string): void {
  * 在 App.uvue onLaunch 或 main.uts 中调用一次。
  */
 export function initThemeSystem(): void {
+    // 运行时主色覆盖值（设置页取色器写入）——必须在首次 getThemeVars 前加载，
+    // 否则首屏会用默认色、切主题时才跳变。
+    try {
+        let storedPrimary = uni.getStorageSync(THEME_PRIMARY_STORAGE_KEY)
+        // 旧 `u-theme-primary` 迁移：读到了就搬到新 key 并清掉旧的。
+        if (typeof storedPrimary !== "string" || (storedPrimary as string).length == 0) {
+            const legacyPrimary = uni.getStorageSync(LEGACY_THEME_PRIMARY_STORAGE_KEY)
+            if (typeof legacyPrimary === "string" && (legacyPrimary as string).length > 0) {
+                storedPrimary = legacyPrimary
+                uni.setStorageSync(THEME_PRIMARY_STORAGE_KEY, legacyPrimary as string)
+                uni.removeStorageSync(LEGACY_THEME_PRIMARY_STORAGE_KEY)
+            }
+        }
+        if (typeof storedPrimary === "string" && (storedPrimary as string).length > 0) {
+            upThemePrimaryColor.value = normalizeHexColor(storedPrimary as string)
+        }
+    } catch (e) {}
     let stored = 'system'
     try {
-        const value = uni.getStorageSync(THEME_MODE_STORAGE_KEY)
+        let value = uni.getStorageSync(THEME_MODE_STORAGE_KEY)
+        // 旧 `u-theme-mode` 迁移（fork 时代的 key）。
+        if (typeof value !== 'string' || (value as string).length == 0) {
+            const legacyMode = uni.getStorageSync(LEGACY_THEME_MODE_STORAGE_KEY)
+            if (typeof legacyMode === 'string' && (legacyMode as string).length > 0) {
+                value = legacyMode
+                uni.setStorageSync(THEME_MODE_STORAGE_KEY, legacyMode as string)
+                uni.removeStorageSync(LEGACY_THEME_MODE_STORAGE_KEY)
+            }
+        }
         if (typeof value === 'string') stored = normalizeThemePreference(value as string)
     } catch (e) {}
     upThemePreference.value = stored
@@ -425,10 +560,19 @@ export function initThemeSystem(): void {
     }
     if (!hasRegisterThemeListener) {
         hasRegisterThemeListener = true
+        /*
+         * `uni.onThemeChange` 只有 web / 小程序端有，uni-app x 的 App 端没有这个 API ——
+         * 直接调用会让 App 启动即抛 `TypeError: uni.onThemeChange is not a function`。
+         *
+         * App 端不注册监听：系统主题在每次启动时由 `getSystemTheme()` 重新读一次，
+         * 运行期切系统深浅色需要用户重新进设置页触发（或下次冷启动生效）。
+         */
+        // #ifdef WEB
         uni.onThemeChange((res) => {
             if (upThemePreference.value === 'system') {
                 applyTheme(res.theme)
             }
         })
+        // #endif
     }
 }

package/package.json

@@ -2,7 +2,7 @@
   "id": "uview-ultra",
   "name": "uview-ultra",
   "displayName": "零云®UviewUltra v4重磅发布，大满贯全面兼容uniapp-x、uniapp鸿蒙组件库。",
-  "version": "4.5.53",
+  "version": "4.5.71",
   "description": "uview-ultra全面兼容uni-app/uni-app-x/鸿蒙/nvue，全面的组件和便捷的工具会让您信手拈来，如鱼得水",
   "keywords": [
     "uview",