@zfqh/uview-x 0.0.0-stage → 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.0.2](http://10.10.10.16/caoben/front-end-tools/compare/@zfqh/uview-x@0.0.1...@zfqh/uview-x@0.0.2) (2026-11-09)
+
+**Note:** Version bump only for package @zfqh/uview-x
+
+
+
+
+
+## 0.0.1 (2026-11-09)
+
+**Note:** Version bump only for package @zfqh/uview-x

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 aniu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,127 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @zfqh/uview-x
+
+面向 uni-app x 蒸汽模式（Vapor）与经典 uni-app Vue3 的 UV UI 组件库，由 `@gmcb/uv-ui` fork 并完成多端适配：App 支持 uni-app x 蒸汽模式与经典 nvue，H5 / 微信小程序支持 uni-app x VDOM 与经典 Vue3 VDOM。组件保持 `.vue`，沿用 uv-ui 的 `uv-*` 组件名与主要 API。
+
+## 安装
+
+```bash
+npm i @zfqh/uview-x
+```
+
+## 接入
+
+`main.ts` 注册插件，注册后脚本可用 `uni.$uv`、模板可用 `$uv`：
+
+```ts
+import { createSSRApp } from 'vue';
+import App from './App.uvue';
+import uviewX from '@zfqh/uview-x';
+
+export function createApp() {
+  const app = createSSRApp(App);
+  app.use(uviewX as any);
+  return { app };
+}
+```
+
+`pages.json` 配置 easycom，组件按需自动引入：
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^uv-(.*)": "@zfqh/uview-x/components/uv-$1/uv-$1.vue"
+    }
+  }
+}
+```
+
+`uni.scss` 引入主题变量，`App.uvue` 引入全局工具样式：
+
+```scss
+@import '@zfqh/uview-x/theme.scss';
+```
+
+```vue
+<style lang="scss">
+@import '@zfqh/uview-x/styles/index.scss';
+</style>
+```
+
+App x 需在 `manifest.json` 开启蒸汽模式：`"uni-app-x": { "vapor": true, "styleIsolationVersion": "2", "vapor-default-script-lang": "ts" }`，完整配置见 `examples/uview-vapor/manifest.json`。
+
+## 组件示例
+
+```vue
+<template>
+  <uv-button type="primary" text="提交" @click="onSubmit" />
+  <uv-icon name="search" :size="24" />
+  <uv-line />
+</template>
+```
+
+已适配组件以 `components/uv-*` 为准。业务对话框 `uv-dialog`（基于 `uv-popup`，`open()` 返回 Promise）示例见 `examples/uview-vapor/pages/feedback/dialog/` 与 `examples/uview-nvue/pages/feedback/dialog/`，完整说明见 `AGENTS.md`。
+
+## 工具与 hooks
+
+入口同时导出 `hooks`、`utils`、`libs` 的公共 API（`libs` 仅汇总第三方库公共入口），例如：
+
+```ts
+import { $uv, config, useDebounce, useThrottle, Request, dayjs } from '@zfqh/uview-x';
+
+config.color.primary;
+uni.$uv.config.color.primary; // 同一个对象
+
+// 组件全局 props；需在组件加载前调用，后续修改不影响已加载组件
+uni.$uv.setConfig({
+  props: {
+    button: { type: { default: 'primary' } },
+    input: { color: { default: '#303133' } },
+  },
+});
+```
+
+## 国际化
+
+组件内置文案（`uv-dialog` / `uv-code` / `uv-form` / `timeFrom`）随包提供 `zh-Hans`、`en` 两套语言包；`createI18n` 会自动合并，用户 `messages` 传同名 key 即可覆盖（键空间 `uv.*`）。
+
+```ts
+// main.ts：创建 i18n（自动合并组件内置语言包），再安装到 Vue app
+import { createI18n } from '@zfqh/uview-x';
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'zh-Hans',
+  fallbackLocale: 'zh-Hans',
+  messages: {
+    // 只覆盖想自定义的 key，未传的以内置文案兜底
+    'zh-Hans': { uv: { dialog: { title: '温馨提示' } } },
+    en: { uv: { dialog: { title: 'Notice' } } },
+  },
+});
+
+app.use(i18n);
+```
+
+```ts
+// 页面内
+import { useI18n, setLocale, getLocale } from '@zfqh/uview-x';
+
+const { t } = useI18n();
+
+t('uv.dialog.title'); // 未创建实例时也能取到内置文案（自动降级）
+setLocale('en'); // 更新实例 + 写入 storage 的 UNI_LOCALE + 调用 uni.setLocale
+getLocale(); // 读取当前语言（优先 storage UNI_LOCALE）
+```
+
+- 公共 API：`createI18n` / `getLocale` / `getLocaleMessage` / `setLocale` + `useI18n`；`useI18n` 在未创建实例时降级读组件内置语言包，不会抛错。
+- 内置文案键空间：`uv.dialog.title/cancel/confirm`、`uv.code.start/change/end`、`uv.time.*`、`uv.form.*`（async-validator 校验文案，保留 `%s` 占位符）。
+- `uv-dialog` 的 `title` / `cancelText` / `confirmText` 默认 `''` 时取内置文案；隐藏按钮用 `showCancelButton` / `showConfirmButton`（文本只能是 String，不能传 `false`）。
+- 完整 API、平台差异与降级规则见 `AGENTS.md` §12.1。
+
+## 文档
+
+- 开发约定、组件 API、平台差异与验证：[AGENTS.md](AGENTS.md)
+- 示例工程：`examples/uview-vapor`（蒸汽模式）、`examples/uview-nvue`（nvue）
+- 参考：[uni-app x 蒸汽模式](https://doc.dcloud.net.cn/uni-app-x/app-vapor.html) · [uv-ui 官方文档](https://www.uvui.cn)

package/components/uv-badge/props.ts

@@ -0,0 +1,83 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  // 是否显示圆点
+  isDot: {
+    type: Boolean,
+    default: false,
+  },
+  // 显示的内容
+  value: {
+    type: [Number, String],
+    default: '',
+  },
+  // 是否显示
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  // 最大值，超过最大值会显示 '{max}+'
+  max: {
+    type: [Number, String],
+    default: 999,
+  },
+  // 主题类型，error|warning|success|primary
+  type: {
+    type: [String, null],
+    default: 'error',
+  },
+  // 当数值为 0 时，是否展示 Badge
+  showZero: {
+    type: Boolean,
+    default: false,
+  },
+  // 背景颜色，优先级比type高，如设置，type参数会失效
+  bgColor: {
+    type: [String, null],
+    default: null,
+  },
+  // 字体颜色
+  color: {
+    type: [String, null],
+    default: null,
+  },
+  // 徽标形状，circle-四角均为圆角，horn-左下角为直角
+  shape: {
+    type: [String, null],
+    default: 'circle',
+  },
+  // 设置数字的显示方式，overflow|ellipsis|limit
+  numberType: {
+    type: [String, null],
+    default: 'overflow',
+  },
+  // 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
+  offset: {
+    type: Array,
+    default: () => [],
+  },
+  // 是否反转背景和字体颜色
+  inverted: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否绝对定位
+  absolute: {
+    type: Boolean,
+    default: false,
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.badge,
+};
+
+export default props;

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

@@ -0,0 +1,186 @@
+<template>
+	<text
+		v-if="showBadge"
+		class="uv-badge"
+		:class="badgeClasses"
+		:style="[$uv.addStyle(p.customStyle), badgeStyle]"
+	>{{ badgeText }}</text>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+
+	defineOptions({
+		name: 'uv-badge',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * badge 徽标数
+	 * @description 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
+	 * @tutorial https://www.uvui.cn/components/badge.html
+	 * @property {Boolean} 			isDot 		是否显示圆点 （默认 false ）
+	 * @property {String | Number} 	value 		显示的内容
+	 * @property {Boolean} 			show 		是否显示 （默认 true ）
+	 * @property {String | Number} 	max 		最大值，超过最大值会显示 '{max}+'  （默认999）
+	 * @property {String} 			type 		主题类型，error|warning|success|primary （默认 'error' ）
+	 * @property {Boolean} 			showZero	当数值为 0 时，是否展示 Badge （默认 false ）
+	 * @property {String} 			bgColor 	背景颜色，优先级比type高，如设置，type参数会失效
+	 * @property {String} 			color 		字体颜色 （默认 '#ffffff' ）
+	 * @property {String} 			shape 		徽标形状，circle-四角均为圆角，horn-左下角为直角 （默认 'circle' ）
+	 * @property {String} 			numberType	设置数字的显示方式，overflow|ellipsis|limit  （默认 'overflow'）
+	 * @property {Array} 			offset		设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
+	 * @property {Boolean} 			inverted	是否反转背景和字体颜色（默认 false ）
+	 * @property {Boolean} 			absolute	是否绝对定位（默认 false ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @example <uv-badge :type="type" :count="count"></uv-badge>
+	 */
+	const p = defineProps(props)
+
+	// 主题类型，未设置时默认 error
+	const propsType = computed(() => p.type || 'error')
+
+	// 是否显示 badge
+	const showBadge = computed(() => {
+		const valueIsZero = Number(p.value) === 0
+		return p.show && ((valueIsZero ? p.showZero : true) || p.isDot)
+	})
+
+	const badgeClasses = computed<string[]>(() => {
+		const classes: string[] = [p.isDot ? 'uv-badge--dot' : 'uv-badge--not-dot']
+		if (p.inverted) classes.push('uv-badge--inverted')
+		if (p.shape === 'horn') classes.push('uv-badge--horn')
+		classes.push(`uv-badge--${propsType.value}${p.inverted ? '--inverted' : ''}`)
+		if (p.customClass) classes.push(p.customClass)
+		return classes
+	})
+
+	const badgeStyle = computed(() => {
+		const style: any = {}
+		if (p.color) style.color = p.color
+		if (p.bgColor && !p.inverted) style.backgroundColor = p.bgColor
+		if (p.absolute) {
+			style.position = 'absolute'
+			// 如果有设置offset参数
+			if (p.offset.length) {
+				// 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)
+			}
+		}
+		return style
+	})
+
+	const showValue = computed(() => {
+		switch (p.numberType) {
+			case 'overflow':
+				return Number(p.value) > Number(p.max) ? `${p.max}+` : p.value
+			case 'ellipsis':
+				return Number(p.value) > Number(p.max) ? '...' : p.value
+			case 'limit':
+				return Number(p.value) > 999
+					? Number(p.value) >= 9999
+						? `${Math.floor((p.value as any) / 1e4 * 100) / 100}w`
+						: `${Math.floor((p.value as any) / 1e3 * 100) / 100}k`
+					: p.value
+			default:
+				return Number(p.value)
+		}
+	})
+
+	// 圆点模式不展示文字
+	const badgeText = computed(() => (p.isDot ? '' : showValue.value))
+</script>
+
+<style lang="scss">
+	@import '../../styles/components.scss';
+	@import '../../styles/color.scss';
+
+	$uv-badge-primary: $uv-primary !default;
+	$uv-badge-error: $uv-error !default;
+	$uv-badge-success: $uv-success !default;
+	$uv-badge-info: $uv-info !default;
+	$uv-badge-warning: $uv-warning !default;
+	$uv-badge-dot-radius: 100px !default;
+	$uv-badge-dot-size: 8px !default;
+	$uv-badge-text-font-size: 11px !default;
+	$uv-badge-text-padding: 2px 5px !default;
+	$uv-badge-text-align: center !default;
+	$uv-badge-text-color: #ffffff !default;
+
+	.uv-badge {
+		border-top-right-radius: $uv-badge-dot-radius;
+		border-top-left-radius: $uv-badge-dot-radius;
+		border-bottom-left-radius: $uv-badge-dot-radius;
+		border-bottom-right-radius: $uv-badge-dot-radius;
+		@include flex;
+		line-height: $uv-badge-text-font-size;
+		text-align: $uv-badge-text-align;
+		font-size: $uv-badge-text-font-size;
+		color: $uv-badge-text-color;
+	}
+
+	.uv-badge--dot {
+		height: $uv-badge-dot-size;
+		width: $uv-badge-dot-size;
+	}
+
+	.uv-badge--inverted {
+		font-size: 13px;
+	}
+
+	.uv-badge--not-dot {
+		padding: $uv-badge-text-padding;
+	}
+
+	.uv-badge--horn {
+		border-bottom-left-radius: 0;
+	}
+
+	.uv-badge--primary {
+		background-color: $uv-badge-primary;
+	}
+
+	.uv-badge--primary--inverted {
+		color: $uv-badge-primary;
+	}
+
+	.uv-badge--error {
+		background-color: $uv-badge-error;
+	}
+
+	.uv-badge--error--inverted {
+		color: $uv-badge-error;
+	}
+
+	.uv-badge--success {
+		background-color: $uv-badge-success;
+	}
+
+	.uv-badge--success--inverted {
+		color: $uv-badge-success;
+	}
+
+	.uv-badge--info {
+		background-color: $uv-badge-info;
+	}
+
+	.uv-badge--info--inverted {
+		color: $uv-badge-info;
+	}
+
+	.uv-badge--warning {
+		background-color: $uv-badge-warning;
+	}
+
+	.uv-badge--warning--inverted {
+		color: $uv-badge-warning;
+	}
+</style>

package/components/uv-button/props.ts

@@ -0,0 +1,148 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  hairline: {
+    type: Boolean,
+    default: true,
+  },
+  type: {
+    type: String,
+    default: 'info',
+  },
+  size: {
+    type: String,
+    default: 'normal',
+  },
+  shape: {
+    type: String,
+    default: 'square',
+  },
+  radius: {
+    type: [String, Number],
+    default: null,
+  },
+  plain: {
+    type: Boolean,
+    default: false,
+  },
+  // 浅色按钮：背景使用主题色的 light 色值，文字/图标使用主题色。
+  // 与 plain 冲突时 plain 优先（light 不生效）。
+  light: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  loadingText: {
+    type: [String, Number],
+    default: '',
+  },
+  loadingMode: {
+    type: String,
+    default: 'spinner',
+  },
+  loadingSize: {
+    type: [String, Number],
+    default: 14,
+  },
+  openType: {
+    type: String,
+    default: '',
+  },
+  formType: {
+    type: String,
+    default: '',
+  },
+  appParameter: {
+    type: String,
+    default: '',
+  },
+  hoverStopPropagation: {
+    type: Boolean,
+    default: true,
+  },
+  lang: {
+    type: String,
+    default: 'en',
+  },
+  sessionFrom: {
+    type: String,
+    default: '',
+  },
+  sendMessageTitle: {
+    type: String,
+    default: '',
+  },
+  sendMessagePath: {
+    type: String,
+    default: '',
+  },
+  sendMessageImg: {
+    type: String,
+    default: '',
+  },
+  showMessageCard: {
+    type: Boolean,
+    default: true,
+  },
+  dataName: {
+    type: String,
+    default: '',
+  },
+  throttleTime: {
+    type: [String, Number],
+    default: 0,
+  },
+  hoverStartTime: {
+    type: [String, Number],
+    default: 0,
+  },
+  hoverStayTime: {
+    type: [String, Number],
+    default: 200,
+  },
+  text: {
+    type: [String, Number],
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  iconSize: {
+    type: [String, Number],
+    default: '',
+  },
+  iconColor: {
+    type: String,
+    default: '#000000',
+  },
+  color: {
+    type: String,
+    default: '',
+  },
+  customTextStyle: {
+    type: [Object, String],
+    default: '',
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.button,
+};
+
+export default props;