@zfqh/uview-x 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.0.7](http://10.10.10.16/caoben/front-end-tools/compare/@zfqh/uview-x@0.0.6...@zfqh/uview-x@0.0.7) (2026-11-11)
+
+**Note:** Version bump only for package @zfqh/uview-x
+
+
+
+
+
+## [0.0.6](http://10.10.10.16/caoben/front-end-tools/compare/@zfqh/uview-x@0.0.5...@zfqh/uview-x@0.0.6) (2026-11-11)
+
+**Note:** Version bump only for package @zfqh/uview-x
+
+
+
+
+
 ## [0.0.5](http://10.10.10.16/caoben/front-end-tools/compare/@zfqh/uview-x@0.0.4...@zfqh/uview-x@0.0.5) (2026-11-11)
 
 

package/README.md

@@ -1,6 +1,6 @@
 # @zfqh/uview-x
 
-面向 uni-app x 蒸汽模式（Vapor）、uni-app x H5 / 微信小程序（VDOM）与经典 uni-app Vue3 / nvue 的 UV UI 组件库，沿用 `uv-*` 组件名与 uv-ui API；入口同时提供 `$uv`、`config`、hooks 与第三方库导出。
+面向 uni-app x 蒸汽模式（Vapor）、uni-app x H5 / 微信小程序（VDOM）与经典 uni-app Vue3 / nvue 的 UV UI 组件库，沿用 `uv-*` 组件名与 uv-ui API；根入口默认导出插件并提供公共 API（`config` / `setConfig` / i18n / hooks / `route` / `http` / `compress` / `debounce` / `throttle` / `test`），其余工具与第三方库按深路径引入。
 
 ## 安装
 
@@ -10,20 +10,22 @@ npm i @zfqh/uview-x
 
 ## 快速开始
 
-`main.ts` 注册插件（仅安装 `$uv` 能力，不注册组件）：
+`main.ts` 注册插件（只应用运行时配置与 i18n，不注册组件、不注入全局对象）：
 
 ```ts
 import { createSSRApp } from 'vue';
 import App from './App.uvue';
-import uviewX from '@zfqh/uview-x';
+import UviewX from '@zfqh/uview-x';
 
 export function createApp() {
   const app = createSSRApp(App);
-  app.use(uviewX);
+  app.use(UviewX, { unit: 'px' });
   return { app };
 }
 ```
 
+也可以先 `import { setConfig } from '@zfqh/uview-x'` 并调用 `setConfig({ unit: 'px' })`，再 `app.use(UviewX)`；`app.use` 传入的同名字段会覆盖此前配置。
+
 页面推荐显式 import 组件（uni-app x Vapor 构建必需）：
 
 ```vue
@@ -63,18 +65,59 @@ dev 阶段也可使用 easycom（`pages.json`）：
 </style>
 ```
 
-全局配置（如 H5 滚动条，默认隐藏）需在 `app.use(uviewX)` 前通过 `uni.$uv.setConfig({ scrollbar: true })` 设置（安装时应用一次），详见 `AGENTS.md`。
+运行时配置（如 H5 滚动条，默认隐藏）同样可通过根入口导出的 `setConfig` 或插件 options 设置，例如 `import { setConfig } from '@zfqh/uview-x'; setConfig({ scrollbar: true })`；`setConfig` 可配置 unit / type / color / props / scrollbar 与 i18n，详见 `AGENTS.md`。
 
 ## 国际化
 
-默认简体中文；其他语言按需引入并合并（可选：`en`、`es`、`fr`、`ru`、`zh-Hant`）：
+默认英文（`en`）；其他语言按需引入并合并（可选：`zh-Hans`、`zh-Hant`、`es`、`fr`、`ru`）：
 
 ```ts
 import en from '@zfqh/uview-x/locales/en';
-// createI18n({ messages: { en: { ...en, ...自定义 } } })
-// 其他语言将路径中的 en 换成对应 locale 即可
+import zhHans from '@zfqh/uview-x/locales/zh-Hans';
+
+// 也可从 locales 聚合入口导入全部语言包
+// import { en, zhHans } from '@zfqh/uview-x/locales';
+// import locales from '@zfqh/uview-x/locales';
+
+app.use(UviewX, {
+  i18n: {
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: {
+      en,
+      'zh-Hans': zhHans,
+    },
+  },
+});
+
+// 或先 setConfig({ i18n: {...} })，再 app.use(UviewX)
+// createI18n({ locale: 'zh-Hans', messages: {...} }) 可覆盖当前 i18n 配置
+// 语言包使用扁平 key，例如 en['uv.dialog.title']
+```
+
+## 工具与第三方库
+
+根入口只提供公共 API；其余工具按文件深路径引入，不存在 `$uv` 聚合对象：
+
+```ts
+// 根入口：配置、导航、请求、压缩、防抖/节流、校验
+import { config, setConfig, route, http, compress, debounce, throttle, test } from '@zfqh/uview-x';
+import { useDebounce, useThrottle, useI18n, createI18n, getLocale, getLocaleMessage, setLocale } from '@zfqh/uview-x';
+
+// 其余工具：@zfqh/uview-x/utils/<file>
+import { colorGradient } from '@zfqh/uview-x/utils/color';
+import { addUnit, timeFormat } from '@zfqh/uview-x/utils/function';
+
+// 第三方库：@zfqh/uview-x/libs
+import { Request, dayjs } from '@zfqh/uview-x/libs';
 ```
 
+## 迁移提示
+
+- 已移除 `$uv` / `uni.$uv` / `app.config.globalProperties.$uv` 与 `utils`、`libs` 聚合导出，改为从根入口或深路径具名导入（见上节）。
+- `utils/index.ts` 已删除，工具从 `@zfqh/uview-x/utils/<file>` 引入；`utils/colorGradient.ts` 更名为 `utils/color.ts`。
+- SCSS 主题变量 `$uv-*` 保持不变。
+
 ## 文档
 
 - 开发约定、组件清单、完整 API、平台差异与验证：[AGENTS.md](AGENTS.md)

package/components/uv-badge/uv-badge.vue

@@ -3,13 +3,13 @@
 		v-if="showBadge"
 		class="uv-badge"
 		:class="badgeClasses"
-		:style="[$uv.addStyle(p.customStyle), badgeStyle]"
+		:style="[addStyle(p.customStyle), badgeStyle]"
 	>{{ badgeText }}</text>
 </template>
 
 <script setup lang="ts">
 	import { computed } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle, addUnit } from '../../utils/function'
 	import props from './props'
 
 	defineOptions({
@@ -71,8 +71,8 @@
 				// top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
 				const top = p.offset[0]
 				const right = p.offset[1] || top
-				style.top = $uv.addUnit(top)
-				style.right = $uv.addUnit(right)
+				style.top = addUnit(top)
+				style.right = addUnit(right)
 			}
 		}
 		return style

package/components/uv-button/uv-button.vue

@@ -24,7 +24,7 @@
 			:hover-class="hoverClass"
 			class="uv-button uv-reset-button"
 			:class="[bemClass, p.customClass, p.color ? 'uv-button--custom-color' : '']"
-			:style="[baseColor, radiusStyle, $uv.addStyle(p.customStyle)]"
+			:style="[baseColor, radiusStyle, addStyle(p.customStyle)]"
 			@click="clickHandler"
 			@getphonenumber="onGetPhoneNumber"
 			@getuserinfo="onGetUserInfo"
@@ -48,7 +48,7 @@
 				></uv-loading-icon>
 				<text
 					class="uv-button__loading-text"
-					:style="[{ fontSize: textSize + 'px', color: textColorCom }, $uv.addStyle(p.customTextStyle)]"
+					:style="[{ fontSize: textSize + 'px', color: textColorCom }, addStyle(p.customTextStyle)]"
 				>{{ p.loadingText || p.text }}</text>
 			</template>
 			<template v-else>
@@ -61,7 +61,7 @@
 				<slot>
 					<text
 						class="uv-button__text"
-						:style="[textStyleCom, $uv.addStyle(p.customTextStyle)]"
+						:style="[textStyleCom, addStyle(p.customTextStyle)]"
 					>{{ p.text }}</text>
 				</slot>
 				<slot name="suffix"></slot>
@@ -76,7 +76,7 @@
 			:hover-class="hoverClass"
 			class="uv-button uv-reset-button"
 			:class="[bemClass, p.customClass, p.color ? 'uv-button--custom-color' : '']"
-			:style="[baseColor, radiusStyle, $uv.addStyle(p.customStyle)]"
+			:style="[baseColor, radiusStyle, addStyle(p.customStyle)]"
 			@click="clickHandler"
 		>
 			<template v-if="p.loading">
@@ -87,7 +87,7 @@
 				></uv-loading-icon>
 				<text
 					class="uv-button__loading-text"
-					:style="[{ fontSize: textSize + 'px', color: textColorCom }, $uv.addStyle(p.customTextStyle)]"
+					:style="[{ fontSize: textSize + 'px', color: textColorCom }, addStyle(p.customTextStyle)]"
 				>{{ p.loadingText || p.text }}</text>
 			</template>
 			<template v-else>
@@ -100,7 +100,7 @@
 				<slot>
 					<text
 						class="uv-button__text"
-						:style="[textStyleCom, $uv.addStyle(p.customTextStyle)]"
+						:style="[textStyleCom, addStyle(p.customTextStyle)]"
 					>{{ p.text }}</text>
 				</slot>
 				<slot name="suffix"></slot>
@@ -112,7 +112,7 @@
 
 <script setup lang="ts">
 	import { computed } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle, addUnit } from '../../utils/function'
 	import props from './props'
 	import UvIcon from '../uv-icon/uv-icon.vue'
 	import UvLoadingIcon from '../uv-loading-icon/uv-loading-icon.vue'
@@ -276,7 +276,7 @@
 	const radiusStyle = computed(() => {
 		const style: any = {}
 		if (p.shape === 'square' && p.radius !== null && p.radius !== '') {
-			const value = $uv.addUnit(p.radius)
+			const value = addUnit(p.radius)
 			style.borderTopLeftRadius = value
 			style.borderTopRightRadius = value
 			style.borderBottomLeftRadius = value
@@ -296,7 +296,7 @@
 
 	const getIconSize = computed(() => {
 		const size = p.iconSize ? p.iconSize : textSize.value * 1.35
-		return $uv.addUnit(size)
+		return addUnit(size)
 	})
 
 	// 文本样式：颜色显式下发（nvue 的 text 不继承父节点颜色），
@@ -312,7 +312,7 @@
 
 	const btnWrapperStyle = computed(() => {
 		const style: any = {}
-		const customStyle = $uv.addStyle(p.customStyle)
+		const customStyle = addStyle(p.customStyle)
 		if (customStyle && customStyle.width) style.width = customStyle.width
 		return style
 	})

package/components/uv-checkbox/uv-checkbox.vue

@@ -40,7 +40,9 @@
 
 <script setup lang="ts">
 	import { computed, inject, nextTick, onUnmounted, ref, watch } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle, addUnit, error } from '../../utils/function'
+	import { deepMerge } from '../../utils/merge'
+	import { array as isArray } from '../../utils/test'
 	import props from './props'
 	import UvIcon from '../uv-icon/uv-icon.vue'
 	import { preventEvent } from '../../utils/compat'
@@ -97,7 +99,7 @@
 	}
 
 	if (!checkboxGroupContext) {
-		$uv.error('uv-checkbox必须搭配uv-checkbox-group组件使用')
+		error('uv-checkbox必须搭配uv-checkbox-group组件使用')
 	} else {
 		checkboxGroupContext.register(handle)
 	}
@@ -114,7 +116,7 @@
 		}
 		const parentValue = checkboxGroupContext ? checkboxGroupContext.value : []
 		// 父组件uv-checkbox-group的value可能是array，所以额外判断
-		if ($uv.test.array(parentValue)) {
+		if (isArray(parentValue)) {
 			// 查找数组是是否存在此name元素值
 			isChecked.value = parentValue.some((item: any) => item === p.name)
 		}
@@ -125,7 +127,7 @@
 	watch(
 		() => (checkboxGroupContext ? checkboxGroupContext.value : null),
 		(value: any) => {
-			if ($uv.test.array(value)) {
+			if (isArray(value)) {
 				isChecked.value = value.some((item: any) => item === p.name)
 			}
 		}
@@ -204,7 +206,7 @@
 
 	// label大小
 	const elLabelSize = computed(() => {
-		return $uv.addUnit(
+		return addUnit(
 			p.labelSize
 				? p.labelSize
 				: checkboxGroupContext && checkboxGroupContext.labelSize
@@ -249,8 +251,8 @@
 		const style: any = {}
 		style.backgroundColor = isChecked.value && !elDisabled.value ? elActiveColor.value : '#ffffff'
 		style.borderColor = isChecked.value && !elDisabled.value ? elActiveColor.value : elInactiveColor.value
-		style.width = $uv.addUnit(elSize.value)
-		style.height = $uv.addUnit(elSize.value)
+		style.width = addUnit(elSize.value)
+		style.height = addUnit(elSize.value)
 		if (elDisabled.value) {
 			// 与 uv-ui 一致：禁用时背景固定为 #ebedf0（原实现通过 CSS !important 覆盖），边框取未选中颜色
 			style.backgroundColor = '#ebedf0'
@@ -275,13 +277,13 @@
 	const checkboxStyle = computed(() => {
 		const style: any = {}
 		if (checkboxGroupContext && checkboxGroupContext.borderBottom && checkboxGroupContext.placement === 'row') {
-			$uv.error('检测到您将borderBottom设置为true，需要同时将uv-checkbox-group的placement设置为column才有效')
+			error('检测到您将borderBottom设置为true，需要同时将uv-checkbox-group的placement设置为column才有效')
 		}
 		// 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
 		if (checkboxGroupContext && checkboxGroupContext.borderBottom && checkboxGroupContext.placement === 'column') {
 			style.paddingBottom = '8px'
 		}
-		return $uv.deepMerge(style, $uv.addStyle(p.customStyle))
+		return deepMerge(style, addStyle(p.customStyle))
 	})
 
 	// 横向两端排列时，点击组件即可触发选中事件

package/components/uv-checkbox-group/uv-checkbox-group.vue

@@ -2,7 +2,7 @@
 	<view
 		class="uv-checkbox-group"
 		:class="[bemClass, p.customClass]"
-		:style="[$uv.addStyle(p.customStyle)]"
+		:style="[addStyle(p.customStyle)]"
 	>
 		<slot></slot>
 	</view>
@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 	import { computed, provide, reactive, watch } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle } from '../../utils/function'
 	import props from './props'
 
 

package/components/uv-code/uv-code.vue

@@ -1,12 +1,12 @@
 <template>
-	<view class="uv-code" :class="[p.customClass]" :style="[$uv.addStyle(p.customStyle)]">
+	<view class="uv-code" :class="[p.customClass]" :style="[addStyle(p.customStyle)]">
 		<!-- 此组件功能由js完成，无需写html逻辑 -->
 	</view>
 </template>
 
 <script setup lang="ts">
 	import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle } from '../../utils/function'
 	import props from './props'
 	import { useI18n } from '../../hooks'
 

package/components/uv-dialog/uv-dialog.vue

@@ -94,7 +94,8 @@
 
 <script setup lang="ts">
 	import { computed, nextTick, onMounted, ref, watch } from 'vue'
-	import { $uv } from '../../utils'
+	import { addStyle, addUnit, sys } from '../../utils/function'
+	import { deepMerge } from '../../utils/merge'
 	import props from './props'
 	import UvPopup from '../uv-popup/uv-popup.vue'
 	import UvButton from '../uv-button/uv-button.vue'
@@ -186,7 +187,7 @@
 	const showCancelBtn = computed(() => Boolean(cfg.value.showCancelButton))
 	const showConfirmBtn = computed(() => Boolean(cfg.value.showConfirmButton))
 
-	const addUnit = (value: string | number) => $uv.addUnit(value)
+	const addUnit = (value: string | number) => addUnit(value)
 
 	const titleAlignValue = computed(() => {
 		const map: Record<string, string> = {
@@ -207,7 +208,7 @@
 		if (cfg.value.mode === 'center') {
 			style.width = addUnit(cfg.value.width)
 		}
-		return $uv.deepMerge(style, $uv.addStyle(cfg.value.customStyle))
+		return deepMerge(style, addStyle(cfg.value.customStyle))
 	})
 
 	const headerStyleCom = computed(() => {
@@ -224,7 +225,7 @@
 			style.borderBottomStyle = 'solid'
 			style.borderBottomColor = '#f2f3f5'
 		}
-		return $uv.deepMerge(style, $uv.addStyle(cfg.value.headerStyle))
+		return deepMerge(style, addStyle(cfg.value.headerStyle))
 	})
 
 	const titleStyleCom = computed(() => {
@@ -234,7 +235,7 @@
 			lineHeight: m.titleSize + 8 + 'px',
 			color: '#303133'
 		}
-		return $uv.deepMerge(style, $uv.addStyle(cfg.value.titleStyle))
+		return deepMerge(style, addStyle(cfg.value.titleStyle))
 	})
 
 	const scrollStyleCom = computed(() => {
@@ -244,13 +245,13 @@
 		// #endif
 		// #ifndef WEB || H5
 		try {
-			const info = $uv.sys()
+			const info = sys()
 			style.maxHeight = Math.floor(Number(info.windowHeight || 800) * 0.6) + 'px'
 		} catch (e) {
 			style.maxHeight = '500px'
 		}
 		// #endif
-		return $uv.deepMerge(style, $uv.addStyle(cfg.value.scrollStyle))
+		return deepMerge(style, addStyle(cfg.value.scrollStyle))
 	})
 
 	const contentStyleCom = computed(() => {
@@ -265,7 +266,7 @@
 		const textAlign = align === 'center' ? 'center' : align === 'right' ? 'right' : 'left'
 		style.textAlign = textAlign
 		style.alignItems = textAlign === 'center' ? 'center' : textAlign === 'right' ? 'flex-end' : 'flex-start'
-		return $uv.deepMerge(style, $uv.addStyle(cfg.value.contentStyle))
+		return deepMerge(style, addStyle(cfg.value.contentStyle))
 	})
 
 	const contentTextStyle = computed(() => {
@@ -277,7 +278,7 @@
 		}
 		const align = String(cfg.value.align || 'left')
 		style.textAlign = align === 'center' ? 'center' : align === 'right' ? 'right' : 'left'
-		return $uv.deepMerge(style, $uv.addStyle(cfg.value.contentStyle))
+		return deepMerge(style, addStyle(cfg.value.contentStyle))
 	})
 
 	const footerStyleCom = computed(() => {
@@ -293,7 +294,7 @@
 			style.borderTopStyle = 'solid'
 			style.borderTopColor = '#f2f3f5'
 		}
-		return $uv.deepMerge(style, $uv.addStyle(cfg.value.footerStyle))
+		return deepMerge(style, addStyle(cfg.value.footerStyle))
 	})
 
 	const gapStyle = computed(() => ({ width: metrics.value.gap + 'px' }))