uview-ultra 4.5.48 → 4.5.53

package/components/up-root/root.uts

@@ -0,0 +1,14 @@
+/*
+ * @Author       : jry
+ * @Description  : up-root 组件默认值
+ */
+export default {
+    // root组件
+    root: {
+        // 是否为根节点附加页面底色（--up-page-bg-color）
+        background: true,
+        // 是否内嵌全局 toast/notify 宿主
+        toastHost: true,
+        customStyle: {}
+    }
+} as UTSJSONObject

package/components/up-root/up-root.uvue

@@ -0,0 +1,57 @@
+<template>
+	<view class="up-root" :style="rootStyle">
+		<slot></slot>
+		<up-root-toast-host v-if="toastHost"></up-root-toast-host>
+	</view>
+</template>
+
+<script setup lang="uts">
+	/**
+	 * up-root 页面级根组件（uni-app x 蒸汽模式）。
+	 *
+	 * uni-app x 的 App.uvue 不允许 template，无法像老工程那样在应用根注入
+	 * 主题变量 —— 用 up-root 作为每个页面的根容器：把运行时主题系统的
+	 * CSS 变量表（--up-* / --u-*）绑定到根节点 style，页面与子组件
+	 * （styleIsolation: 'app-and-page'）即可通过 var(--up-*) 消费，
+	 * 切换暗黑时整页自动刷新。
+	 */
+	defineOptions({
+		name: 'up-root',
+		styleIsolation: 'app-and-page'
+	})
+
+	import { computed } from 'vue'
+	import { propsRoot } from './props.uts'
+	import { upThemeVarsStyle, upThemeVar } from '../../libs/theme/theme.uts'
+
+	const props = defineProps(propsRoot)
+
+	const rootStyle = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		const vars = upThemeVarsStyle()
+		UTSJSONObject.keys(vars).forEach((key: string) => {
+			const value = vars[key]
+			if (typeof value === 'string') {
+				style[key] = value
+			}
+		})
+		if (props.background) {
+			style['backgroundColor'] = upThemeVar('--up-page-bg-color', '#f3f4f6')
+			style['color'] = upThemeVar('--up-main-color', '#303133')
+		}
+		const customStyle = props.customStyle
+		if (customStyle instanceof UTSJSONObject) {
+			const custom = customStyle as UTSJSONObject
+			UTSJSONObject.keys(custom).forEach((key: string) => {
+				style[key] = custom[key]
+			})
+		}
+		return style
+	})
+</script>
+
+<style>
+	.up-root {
+		flex: 1;
+	}
+</style>

package/components/up-root/up-root.vue

@@ -0,0 +1,35 @@
+<template>
+	<view class="up-root" :style="[rootVars, backgroundStyle, customStyle]">
+		<slot></slot>
+		<RootToastHost v-if="toastHost"></RootToastHost>
+	</view>
+</template>
+
+<script setup>
+	/**
+	 * up-root 页面级根组件（uni-app Vue3 侧）。
+	 *
+	 * Vue3 侧的主题变量由 index.js 安装的全局属性 helpers 提供
+	 * （upThemeVars / upThemePageStyle），行为与 .uvue 版对齐。
+	 */
+	defineOptions({
+		name: 'up-root',
+		styleIsolation: 'app-and-page'
+	})
+
+	import { computed, getCurrentInstance } from 'vue'
+	import { propsRoot } from './props.js'
+	import RootToastHost from '../up-root-toast-host/up-root-toast-host.vue'
+
+	const props = defineProps(propsRoot)
+	const { proxy } = getCurrentInstance() || {}
+
+	const rootVars = computed(() => proxy?.upThemeVars || {})
+	const backgroundStyle = computed(() => (props.background ? (proxy?.upThemePageStyle || {}) : {}))
+</script>
+
+<style scoped>
+	.up-root {
+		min-height: 100vh;
+	}
+</style>

package/components/up-root-toast-host/up-root-toast-host.uvue

@@ -0,0 +1,27 @@
+<template>
+	<up-toast ref="toastRef"></up-toast>
+	<up-notify ref="notifyRef"></up-notify>
+</template>
+
+<script setup lang="uts">
+	defineOptions({
+		name: 'up-root-toast-host',
+		styleIsolation: 'app-and-page'
+	})
+
+	import { onBeforeUnmount, onMounted, ref } from 'vue'
+	import { setRootToastRef, setRootNotifyRef } from '../../libs/root/rootState.uts'
+
+	const toastRef = ref<ComponentPublicInstance | null>(null)
+	const notifyRef = ref<ComponentPublicInstance | null>(null)
+
+	onMounted(() => {
+		setRootToastRef(toastRef.value)
+		setRootNotifyRef(notifyRef.value)
+	})
+
+	onBeforeUnmount(() => {
+		setRootToastRef(null)
+		setRootNotifyRef(null)
+	})
+</script>

package/index.uts

@@ -81,9 +81,56 @@ class UPUtils {
 	}
 }
 const uputils = new UPUtils()
+
+// 运行时主题系统（蒸汽模式暗黑支持）
+import {
+	initThemeSystem,
+	setTheme,
+	setThemePreference,
+	getThemePreference,
+	getSystemTheme,
+	getThemeVars,
+	upThemeVar,
+	upThemeIsDark,
+	upThemeVarsStyle,
+	getThemePageStyle,
+	getThemeCardStyle,
+	getThemeTabBarStyle,
+	applyNativeThemeUI,
+	upThemeMode,
+	upThemePreference,
+	upThemeVersion,
+	upThemeVars
+} from './libs/theme/theme.uts'
+export {
+	initThemeSystem,
+	setTheme,
+	setThemePreference,
+	getThemePreference,
+	getSystemTheme,
+	getThemeVars,
+	upThemeVar,
+	upThemeIsDark,
+	upThemeVarsStyle,
+	getThemePageStyle,
+	getThemeCardStyle,
+	getThemeTabBarStyle,
+	applyNativeThemeUI
+}
+
+// 全局 root 宿主（up-root + 全局 toast/notify）
+import {
+	rootToast,
+	rootNotify,
+	setRootToastRef,
+	setRootNotifyRef
+} from './libs/root/rootState.uts'
+export { rootToast, rootNotify, setRootToastRef, setRootNotifyRef }
+
 export const install = (app: VueApp): void => {
 	app.config.globalProperties.$u = uputils
     app.config.globalProperties.$up = uputils
+	initThemeSystem()
 }
 
 export default {

package/libs/root/rootState.uts

@@ -0,0 +1,74 @@
+/**
+ * uni-app x（蒸汽模式）全局 root 宿主状态。
+ *
+ * up-root-toast-host.uvue 挂载时把 up-toast / up-notify 的组件实例注册进来，
+ * 业务侧通过 rootToast() / rootNotify() 触发全局提示；没有宿主时降级
+ * uni.showToast。
+ */
+import { ref } from 'vue'
+
+export const rootToastRef = ref<ComponentPublicInstance | null>(null)
+export const rootNotifyRef = ref<ComponentPublicInstance | null>(null)
+
+export function setRootToastRef(instance: ComponentPublicInstance | null): void {
+    rootToastRef.value = instance
+}
+
+export function setRootNotifyRef(instance: ComponentPublicInstance | null): void {
+    rootNotifyRef.value = instance
+}
+
+function normalizeOptions(options: UTSJSONObject | string): UTSJSONObject {
+    if (options instanceof String) {
+        const obj = {} as UTSJSONObject
+        obj['message'] = options.toString()
+        return obj
+    }
+    const source = options as UTSJSONObject
+    const message = source['message']
+    if (message == null) {
+        const title = source['title']
+        if (title != null && typeof title === 'string') {
+            source['message'] = title
+        }
+    }
+    return source
+}
+
+export function rootToast(options: UTSJSONObject | string): void {
+    const toastOptions = normalizeOptions(options)
+    const instance = rootToastRef.value
+    if (instance != null) {
+        instance.$callMethod('show', toastOptions)
+        return
+    }
+    const message = toastOptions['message']
+    if (message == null || typeof message !== 'string') return
+    const durationValue = toastOptions['duration']
+    let duration = 2000
+    if (typeof durationValue === 'number') duration = Math.round(durationValue as number)
+    uni.showToast({
+        title: message as string,
+        icon: 'none',
+        duration
+    })
+}
+
+export function rootNotify(options: UTSJSONObject | string): void {
+    const notifyOptions = normalizeOptions(options)
+    const instance = rootNotifyRef.value
+    if (instance != null) {
+        instance.$callMethod('show', notifyOptions)
+        return
+    }
+    const message = notifyOptions['message']
+    if (message == null || typeof message !== 'string') return
+    const durationValue = notifyOptions['duration']
+    let duration = 3000
+    if (typeof durationValue === 'number') duration = Math.round(durationValue as number)
+    uni.showToast({
+        title: message as string,
+        icon: 'none',
+        duration
+    })
+}