v-uni-app-ui 1.0.0 → 1.0.4

package/README.md

@@ -0,0 +1,147 @@
+# v-uni-app ui Bate版(1.0.3)
+
+#### 一、框架定位
+    1.新一代轻量级跨端解决方案​。
+    2.基于 Uni-App 的自研 UI 框架 vuniapp 设计方案。
+    3.专为 Uni-App 生态打造的模块化 UI 框架，面向高效开发与极致性能而生。
+
+#### 二、核心目标​​
+| ​​特性​​	​ | 技术实现​                              |
+|----------|------------------------------------|
+| ​​零学习成本​ | 完全兼容 Uni-App 原生语法，支持 Vue3 版本 |
+| 原子化架构​   | 组件支持单文件独立运行，最低仅需 3KB 即可启用核心功能      |
+| 工程化友好​   | 独创 文件级按需加载 机制，无需配置构建工具             |
+| 智能样式​    | 基于 CSS 变量的主题系统，支持运行时动态换肤           |
+| 增强型组件​   | 内置数据驱动表单生成器、可视化布局编排器等进阶工具          |
+
+#### 二、框架结构​​
+v-uni-app-ui
+│  config.js (预计在上线正式1.0.0废弃)
+│
+├─config
+│  ├─css
+│  │      basic.scss 基础样式配置
+│  │
+│  ├─interface
+│  │  │  basic-type.js 基础枚举
+│  │  │  components-interface.ts 组件接口
+│  │  │
+│  │  ├─monitor
+│  │  │  │  property-monitor.ts 映射监控
+│  │  │  │
+│  │  │  └─components 组件监控
+│  │  │          input-monitor.js 
+│  │  │
+│  │  └─props props统一封装
+│  │      │  basic-props.ts 基础Props
+│  │      │  props-tools.ts Props类型验证
+│  │      │
+│  │      └─components 组件Props
+│  │              button-props.ts
+│  │              input-props.ts
+│  │
+│  ├─style style组件样式
+│  │  │  basic.js 基础样式
+│  │  │  component-registry.js 组件样式注册
+│  │  │  components-style.js 组件style配置
+│  │  │  property-mapper.js 样式映射配置
+│  │  │  pseudo-processor.js 伪元素映射
+│  │  │
+│  │  └─components style组件封装
+│  │          button-style.js
+│  │          input-style.js
+│  │
+│  └─type (预计在上线正式1.0.0废弃)
+├─icon 图标库
+│      iconfont.css
+│      iconfont.js
+│      iconfont.json
+│      iconfont.ttf
+│      iconfont.woff
+│      iconfont.woff2
+|
+├─layout 布局组件
+│
+├─model 模型组件
+│  ├─compound 复合组件
+│  │
+│  └─native 原生组件
+│
+└─utils 工具包
+        validator.ts
+
+##### 1. Model 组件层​​（核心交互单元）
+
+| 模块   | 功能特性               | 技术实现            |
+|------|--------------------|-----------------|
+| 原子组件 | Button/Input 等基础元素 | 基于 uni-app 封装 |
+| 复合组件 | 表单生成器/选择器/级联选择器    | 基于 原子组件 封装、可以随意删减复合组件    |
+
+##### 2.Layout 布局层​​（视觉编排系统）
+
+| 模块    | 功能特性    | 技术实现                      |
+|-------|---------|---------------------------|
+| 基础布局  | 多种流式布局  | CSS Flex / Grid + 自定义属性变量 |
+| 响应式系统 | 多端自适应方案 |       -                   |
+
+
+#### 四、版本说明
+
+我们正在废弃Bate版原有的架构，将最使用更加高度自由化、灵活化、适配化的组件。
+我们已经修改如下：
+V-Btton
+V-Input
+
+
+
+#### 五、支持环境
+
+| 环境名称      | 是否支持 |
+|-----------|------|
+| APP（Vue3） | √    |
+| H5        | √    |
+| 微信小程序(H5)     | √    |
+| 支付宝(H5)       | √    |
+| 360小程序    | ×    |
+| 等等        | ×    |
+
+#### 五、支持设备
+| 设备名称 | 是否支持 |
+|------|------|
+| 安卓   | √    |
+| IOS  | √    |
+| 鸿蒙   | √    |
+
+
+
+### 六、企业级应用案例
+1. 湖南省政务平台《湘易办》
+    - 应用场景​​：娄底市政务办事大厅系统
+    - 技术亮点​​：实现 100+ 表单页面的可视化配置、跨端组件复用率达到 80%、核心业务模块开发效率提升 50%↑
+    - 用户反馈​​："通过 v-uni-app 的布局系统，我们仅用 5 天就完成了原本需要 2 周工期的政务门户改版"
+
+### 七、开发者生态
+##### 贡献者计划
+
+| 角色    | 成员     | 主要贡献           |
+|-------|--------|----------------|
+| 核心开发者 | 方笔山、短短 | 框架架构设计、核心模块开发  |
+| 质量保障  | 抱歉、风   | 多端兼容性测试、性能优化   |
+| 社区运营  | 橙子     | 文档体系建设、开发者社区维护 |
+
+##### 高校合作
+- 湖南工业大学
+- 湖南师范大学
+
+#### 联系我们
+
+| 渠道   | 联系方式                             | 响应时间   |
+|------|----------------------------------|--------|
+| 紧急问题 | QQ: 2214685773 (12h 工单)          | 12 小时内 |
+| 技术咨询 | kwc1234@qq.com                   | 12 小时内 |
+| 文档中心 | https://docs.qq.com/doc/DWEVjQnZVbXBsdnBu | -      |
+| GitEE 仓库 | https://gitee.com/kwc410/vuniapp | -      |
+
+#### 招募
+
+招募前端开发人员由于本项目为开源项目前期不会提供任何资金，将会在后续根据下载量分红 1000(下载量)/10(RMB)

package/components/config/css/basic.scss

@@ -0,0 +1,19 @@
+.loading-icon {
+	margin: 0 8rpx 0 0;
+	.spinner {
+		width: 20rpx;
+		height: 20rpx;
+		border: 1rpx solid;
+		border-radius: 50%;
+		border-top-color: white;
+		animation: spin 1s ease-in-out infinite;
+	}
+}
+
+
+
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}

package/components/config/interface/basic-type.js

@@ -0,0 +1,16 @@
+// 基础类型定义
+export type BasicType = 'default' | 'delete' | 'success' | 'info' | 'warning'
+export type BasicSize = 'small' | 'medium' | 'large'
+export type BasicDetailedSize = 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'
+export type BasicShape = 'semicircle' | 'square' | 'round'
+export type BasicHorizontallyPosition = 'left' | 'right' | 'center'
+export type BasicVerticalPosition = 'top' | 'bottom' | 'center'
+export type BasicPosition = 'left' | 'right' | 'top' | 'bottom' | 'center'
+
+// 交互类型
+export type InteractionMode = 'hover' | 'active' | 'focus' | 'disabled'
+
+//组件类型定义
+export type ButtonShape = 'default' | 'none' | 'circle'
+export type InputType = 'text' | 'id' | 'safe-password' | 'password' | 'number' | 'digit' | 'numeric' | 'decimal' |
+	'email' | 'phone' | 'url' | 'textarea' | 'name' | 'search' | 'none'

package/components/config/interface/monitor/property-monitor.ts

@@ -0,0 +1,136 @@
+import { watch, onUnmounted, WatchStopHandle, WatchSource, Ref } from 'vue';
+
+type EmitFn = (event: string, ...args: any[]) => void;
+
+interface MonitorOptions<T = any> {
+	deep?: boolean;
+	immediate?: boolean;
+	onChange?: (newValue: T, oldValue: T) => void;
+	emitEvent?: string;
+	lazy?: boolean;
+	enabled?: Ref<boolean>;
+}
+
+interface MonitorInstance extends WatchStopHandle {
+	start: () => void;
+}
+
+interface BaseConfig<T = any> extends MonitorOptions<T> {
+	propertyName: string;
+}
+
+interface PropsConfig<T = any> extends BaseConfig<T> {
+	source?: never; // 明确禁止source
+}
+
+interface SourceConfig<T = any> extends BaseConfig<T> {
+	source: WatchSource<T>;
+}
+
+type ConfigItem<T = any> = PropsConfig<T> | SourceConfig<T>;
+
+function isSourceConfig<T = any>(config: ConfigItem<T>): config is SourceConfig<T> {
+	return 'source' in config && config.source !== undefined;
+}
+
+export function usePropertyMonitor<T = any>(props: Record<string, any>, propertyName: string, emit: EmitFn, options?: MonitorOptions<T>): MonitorInstance;
+
+export function usePropertyMonitor<T = any>(config: SourceConfig<T>, emit: EmitFn): MonitorInstance;
+
+export function usePropertyMonitor<T = any>(configs: ConfigItem<T>[], emit: EmitFn): MonitorInstance;
+
+export function usePropertyMonitor<T = any>(
+	propsOrConfigs: any,
+	propertyNameOrEmit: string | EmitFn,
+	emitOrOptions?: EmitFn | MonitorOptions<T>,
+	options?: MonitorOptions<T>
+): MonitorInstance {
+	// 参数解析
+	const isBatch = Array.isArray(propsOrConfigs);
+	const emitFn = typeof propertyNameOrEmit === 'function' ? propertyNameOrEmit : (emitOrOptions as EmitFn);
+
+	const configs: ConfigItem<T>[] = [];
+
+	if (isBatch) {
+		configs.push(...propsOrConfigs);
+	} else if (typeof propsOrConfigs === 'object' && !('source' in propsOrConfigs)) {
+		// Props模式：提取 propertyName 和 options
+		const propertyName = propertyNameOrEmit as string;
+		const monitorOptions = typeof emitOrOptions === 'function' ? options : (emitOrOptions as MonitorOptions<T>);
+
+		configs.push({
+			propertyName,
+			...(monitorOptions || {})
+		});
+	} else {
+		// 单配置模式
+		configs.push(propsOrConfigs as ConfigItem<T>);
+	}
+
+	let stopHandles: WatchStopHandle[] = [];
+	let started = false;
+
+	const createWatchers = () => {
+		if (stopHandles.length) {
+			stopHandles.forEach((stop) => stop());
+			stopHandles = [];
+		}
+
+		configs.forEach((config) => {
+			const { propertyName, onChange, emitEvent, enabled, ...watchOpts } = config;
+
+			const shouldWatch = enabled ? enabled.value : true;
+			if (!shouldWatch) return;
+
+			const watchSource = isSourceConfig(config) ? config.source : () => (propsOrConfigs as Record<string, any>)[propertyName!];
+
+			const stop = watch(
+				watchSource,
+				(newValue, oldValue) => {
+					onChange?.(newValue, oldValue);
+					emitFn(emitEvent ?? `update:${propertyName}`, newValue);
+				},
+				watchOpts
+			);
+
+			stopHandles.push(stop);
+		});
+	};
+
+	// 监听enabled变化
+	configs.forEach((config) => {
+		if (config.enabled) {
+			watch(
+				config.enabled,
+				() => {
+					if (started) {
+						createWatchers();
+					}
+				},
+				{ immediate: false }
+			);
+		}
+	});
+
+	const start = () => {
+		if (!started) {
+			started = true;
+			createWatchers();
+		}
+	};
+
+	const stop = () => {
+		stopHandles.forEach((handle) => handle());
+		stopHandles = [];
+		started = false;
+	};
+
+	const isLazy = configs.some((c) => c.lazy);
+	if (!isLazy) {
+		start();
+	}
+
+	onUnmounted(stop);
+
+	return Object.assign(stop, { start });
+}

package/components/config/interface/props/basic-props.ts

@@ -0,0 +1,88 @@
+// 简化 BasicPropsDefinition 类型
+type VuePropDefinition = {
+	type: any;
+	default?: any;
+	required?: boolean;
+	validator?: (value: any) => boolean;
+};
+
+/**
+ * 通用组件基础 props 定义
+ * 所有组件都会自动继承这些 props
+ */
+export const BasicProps = {
+	id: {
+		type: String,
+		default: ''
+	},
+	className: {
+		type: String,
+		default: ''
+	},
+	boxStyle: {
+		type: Object,
+		default: () => ({})
+	},
+	style: {
+		type: Object,
+		default: () => ({})
+	},
+	accessibility:{
+		type:Object,
+		default:()=>({})
+	}
+} as const;
+
+// 获取基础属性的键名类型
+type BasicPropsKeys = keyof typeof BasicProps;
+
+/**
+ * 创建扩展基础 props 的验证器
+ */
+export function extendWithBasicProps<T extends Record<string, VuePropDefinition>>(
+	componentProps: T,
+	options: {
+		exclude?: BasicPropsKeys[];
+		override?: Partial<Record<BasicPropsKeys, any>>;
+	} = {}
+): Record<string, VuePropDefinition> {
+	const { exclude = [], override = {} } = options;
+	const mergedProps: Record<string, VuePropDefinition> = {};
+
+	// 添加基础 props
+	Object.entries(BasicProps).forEach(([key, value]) => {
+		if (!exclude.includes(key as BasicPropsKeys)) {
+			const propKey = key as BasicPropsKeys;
+			if (override[propKey] !== undefined) {
+				// 修复：正确处理覆盖值
+				mergedProps[key] = {
+					...value,
+					default: typeof override[propKey] === 'object' && override[propKey] !== null && 'default' in override[propKey] ? override[propKey].default : override[propKey]
+				};
+			} else {
+				mergedProps[key] = value;
+			}
+		}
+	});
+
+	// 添加组件特定 props
+	Object.entries(componentProps).forEach(([key, value]) => {
+		mergedProps[key] = value;
+	});
+
+	return mergedProps;
+}
+
+/**
+ * 从 props 配置中提取类型
+ */
+export type ExtractPropTypes<T> = {
+	[K in keyof T]: T[K] extends { type: any } ? (T[K] extends { default?: infer D } ? (D extends () => infer R ? R : D) : any) : any;
+};
+
+/**
+ * 创建 Vue 兼容的 props 定义
+ */
+export function createVueProps<T extends Record<string, VuePropDefinition>>(props: T): T {
+	return props;
+}

package/components/config/interface/props/components/button-props.ts

@@ -0,0 +1,85 @@
+import type { PropType } from 'vue';
+import { extendWithBasicProps, ExtractPropTypes } from '@/components/config/interface/props/basic-props';
+import { BasicType, ButtonShape, BasicSize } from '@/components/config/interface/basic-type.js';
+import { Validators } from '@/components/utils/validator';
+import { PropTools } from '@/components/config/interface/props/props-tools';
+/**
+ * 按钮组件 props 定义
+ */
+const buttonProps = extendWithBasicProps(
+	{
+		//使用PropTools简写
+		shape: PropTools.enum<ButtonShape>(['default', 'none', 'circle'], 'default', 'buttonShape'),
+		type: {
+			type: String as PropType<BasicType>,
+			default: 'default',
+			validator: Validators.enum(['default', 'success', 'warning', 'info', 'delete'], 'buttonType')
+		},
+		size: PropTools.enum<BasicSize>(['small', 'medium', 'large'], 'medium', 'buttonSize'),
+		disabled: PropTools.boolean(false),
+		loading: PropTools.boolean(false),
+		plain: PropTools.boolean(false),
+		text: PropTools.boolean(false),
+		stabilizationTime: {
+			type: Number,
+			default: 0,
+			validator: Validators.numberRange(0, 1_000_000, 'Stabilization time must be between 0 and 1,000,000 ms.')
+		},
+		debounceTime: {
+			type: Number,
+			default: 0,
+			validator: Validators.numberRange(0, 1_000_000, 'The anti-shake waiting time must be between 0 and 1,000,000 milliseconds.')
+		},
+		intervalUpdateTime: {
+			type: Number,
+			default: 1000,
+			validator: Validators.numberRange(100, 100_000, 'Interval must be between 100 and 100,000 ms.')
+		},
+		degressionTime: {
+			type: Number,
+			default: 1000,
+			validator: Validators.numberRange(100, 10_000, 'Degression time must be between 100 and 10,000 ms.')
+		},
+		resetOnClick: PropTools.boolean(false),
+		hoverStartTime: {
+			type: Number,
+			default: 20,
+			validator: Validators.numberRange(10, 10_000, 'hover start time must be between 10 and 10,000 ms.')
+		},
+		hoverStayTime: {
+			type: Number,
+			default: 70,
+			validator: Validators.numberRange(10, 10_000, 'hover stay time must be between 10 and 10,000 ms.')
+		},
+		//组合校验
+		// customProp: {
+		// 	type: String,
+		// 	default: '',
+		// 	validator: Validators.combine(
+		// 		Validators.required('This field is required.'),
+		// 		Validators.length(3, 20, 'Length must be 3-20 characters.'),
+		// 		Validators.pattern(/^[a-zA-Z0-9_]+$/, 'Only letters, numbers and underscore are allowed.')
+		// 	)
+		// }
+	},
+	{
+		override: {
+			id: {
+				default: 'VButton'
+			},
+			className: {
+				default: 'v-button'
+			},
+			boxStyle: {
+				default: {
+					width: 'auto',
+					height: '50rpx',
+					padding: '14rpx 2rpx'
+				}
+			},
+			accessibility: {}
+		}
+	}
+);
+export default buttonProps;
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>;

package/components/config/interface/props/components/input-props.ts

@@ -0,0 +1,69 @@
+import { extendWithBasicProps, ExtractPropTypes } from '@/components/config/interface/props/basic-props';
+import { InputType, BasicSize, BasicHorizontallyPosition } from '@/components/config/interface/basic-type.js';
+import { Validators } from '@/components/utils/validator';
+import { PropTools } from '@/components/config/interface/props/props-tools';
+
+/**
+ * 文本框组件 props 定义
+ */
+const inputProps = extendWithBasicProps(
+	{
+		value: PropTools.string(),
+		size: PropTools.enum<BasicSize>(['small', 'medium', 'large'], 'medium', 'inputSize'),
+		placeholder: PropTools.array(),
+		placeholderTimeNumber: {
+			type: Number,
+			default: 0,
+			validator: Validators.numberRange(0, 1_000_000, 'The prompt switching time must be between 0 and 1,000,000 milliseconds.')
+		},
+		maxlength: {
+			type: Number,
+			default: -1,
+			validator: Validators.numberRange(-1, 1_0000_0000, 'The prompt switching time must be between 0 and 1,000,000 milliseconds.')
+		},
+		disabled: PropTools.boolean(false),
+		type: PropTools.enum<InputType>(
+			['text', 'id', 'safe-password', 'password', 'number', 'digit', 'numeric', 'decimal', 'email', 'phone', 'url', 'textarea', 'name', 'search', 'none'],
+			'text',
+			'inputType'
+		),
+		isWordCounter: PropTools.boolean(false),
+		textPosition: PropTools.enum<BasicHorizontallyPosition>(['left', 'right', 'center'], 'left', 'inputTextPosition'),
+		autoFocus: PropTools.boolean(false),
+		validators: PropTools.string(),
+		placeholderStyle: PropTools.object(),
+		cursor: PropTools.number(),
+		selectionStart: {
+			type: Number,
+			default: -1,
+			validator: Validators.numberRange(-1, 10_000, 'selection start must be between -1 and 10,000 milliseconds.')
+		},
+		selectionEnd: {
+			type: Number,
+			default: -1,
+			validator: Validators.numberRange(-1, 10_000, 'selection end must be between -1 and 10,000 milliseconds.')
+		},
+		isIcon: PropTools.boolean(false),
+		hiddenSymbols: PropTools.string('·'),
+		randomNumber: PropTools.boolean(false),
+		cursorColor: PropTools.string(),
+		focus: PropTools.boolean(false),
+		autoBlur: PropTools.boolean(false),
+		cursorSpacing:PropTools.number(0),
+	},
+	{
+		override: {
+			id: {
+				default: 'VInput'
+			},
+			className: {
+				default: 'v-input'
+			},
+			boxStyle: {
+				default: {}
+			}
+		}
+	}
+);
+export default inputProps;
+export type inputProps = ExtractPropTypes<typeof inputProps>;

package/components/config/interface/props/props-tools.ts

@@ -0,0 +1,64 @@
+import { Validators } from '@/components/utils/validator.ts';
+
+// 简化类型定义
+type SimplePropDefinition = {
+	type: any;
+	default?: any;
+	required?: boolean;
+	validator?: (value: any) => boolean;
+};
+
+// 简化的属性创建函数
+export function createProp<T>(type: any, defaultValue?: T, validator?: (value: any) => boolean): SimplePropDefinition {
+	const prop: SimplePropDefinition = { type };
+
+	if (defaultValue !== undefined) {
+		prop.default = defaultValue;
+	}
+
+	if (validator) {
+		prop.validator = validator;
+	}
+
+	return prop;
+}
+
+// 快捷方法
+export const PropTools = {
+	// 基础类型
+	string: (defaultValue: string = '', validator?: (value: string) => boolean) => createProp(String, defaultValue, validator),
+
+	number: (defaultValue: number = 0, validator?: (value: number) => boolean) => createProp(Number, defaultValue, validator),
+
+	boolean: (defaultValue: boolean = false) => createProp(Boolean, defaultValue),
+
+	array: <T>(defaultValue: T[] = []) => createProp(Array, () => defaultValue),
+
+	object: <T extends Record<string, any>>(defaultValue: T = {} as T) => createProp(Object, () => defaultValue),
+
+	function: <T extends Function>(defaultValue?: T) => createProp(Function, defaultValue),
+
+	// 枚举类型
+	enum: <T extends string>(allowedValues: readonly T[], defaultValue: T, displayName?: string) =>
+		createProp(String, defaultValue, Validators.enum(allowedValues, `${displayName || '属性'}必须是以下值之一: ${allowedValues.join(', ')}`)),
+
+	// 任意类型
+	any: (defaultValue: any = null) => createProp(null, defaultValue),
+
+	// 常用属性
+	id: () => createProp(String, ''),
+	className: () => createProp(String, ''),
+	style: () => createProp(Object, () => ({})),
+
+	// 带验证的属性
+	stringLength: (defaultValue: string = '', min?: number, max?: number) => createProp(String, defaultValue, Validators.length(min, max)),
+
+	numberRange: (defaultValue: number, min: number, max: number) => createProp(Number, defaultValue, Validators.numberRange(min, max)),
+
+	// 格式验证
+	email: (defaultValue: string = '') => createProp(String, defaultValue, Validators.email()),
+
+	phoneNumber: (defaultValue: string = '') => createProp(String, defaultValue, Validators.phoneNumber()),
+
+	url: (defaultValue: string = '') => createProp(String, defaultValue, Validators.url())
+};