v-uni-app-ui 1.0.4 → 1.0.6

package/components/config/style/property-mapper.js

@@ -1,377 +0,0 @@
-import {
-	styleConfig
-} from '@/components/config/style/basic.js'
-
-/**
- * 属性映射规则配置
- * 定义属性名如何映射到样式
- */
-export const PropertyMappingRules = {
-	// 通用属性映射规则
-	common: {
-		// 尺寸属性 - 映射到尺寸相关的样式
-		size: {
-			target: 'size',
-			transform: (value, componentConfig, props) => {
-				return componentConfig.size && componentConfig.size[value] ?
-					componentConfig.size[value] :
-					null
-			}
-		},
-
-		// 类型属性 - 映射到类型相关的样式
-		type: {
-			target: 'type',
-			transform: (value, componentConfig, props) => {
-				const typeKey = otherTypeClassName(props, value)
-				return componentConfig.type && componentConfig.type[typeKey] ?
-					componentConfig.type[typeKey] :
-					null
-			}
-		},
-
-		// 形状/模型属性 - 映射到形状相关的样式
-		shape: {
-			target: 'shape',
-			transform: (value, componentConfig) => {
-				return componentConfig.shape && componentConfig.shape[value] ?
-					componentConfig.shape[value] :
-					null
-			}
-		},
-
-		// 状态属性 - 映射到状态相关的样式
-		disabled: {
-			target: 'status',
-			transform: (value, componentConfig) => {
-				if (!value) return null
-				return componentConfig.status && componentConfig.status.disabled ?
-					componentConfig.status.disabled : {
-						opacity: styleConfig.basic.opacity.disabled,
-						cursor: 'not-allowed'
-					}
-			}
-		},
-
-		loading: {
-			target: 'status',
-			transform: (value, componentConfig) => {
-				if (!value) return null
-				return componentConfig.status && componentConfig.status.loading ?
-					componentConfig.status.loading : {
-						opacity: styleConfig.basic.opacity.disabled,
-						cursor: 'progress'
-					}
-			}
-		},
-
-		// 变体属性
-		variant: {
-			target: 'variant',
-			transform: (value, componentConfig) => {
-				return componentConfig.variant && componentConfig.variant[value] ?
-					componentConfig.variant[value] :
-					null
-			}
-		},
-
-		// 布尔属性
-		block: {
-			target: 'overrides',
-			transform: (value, componentConfig) => {
-				if (!value) return null
-				return componentConfig.overrides && componentConfig.overrides.block ?
-					componentConfig.overrides.block : {
-						width: '100%',
-						display: 'flex'
-					}
-			}
-		},
-
-		iconOnly: {
-			target: 'overrides',
-			transform: (value, componentConfig) => {
-				if (!value) return null
-				return componentConfig.overrides && componentConfig.overrides.iconOnly ?
-					componentConfig.overrides.iconOnly : {
-						padding: '0',
-						display: 'flex',
-						alignItems: 'center',
-						justifyContent: 'center'
-					}
-			}
-		},
-
-		plain: {
-			target: 'type',
-			transform: () => null
-		},
-
-		text: {
-			target: 'type',
-			transform: () => null
-		}
-	},
-
-	// 组件特定的属性映射规则（可以覆盖通用规则）
-	componentSpecific: {
-		button: {
-			// 按钮特有的属性映射
-			stabilizationTime: {
-				target: 'custom',
-				transform: (value) => value > 0 ? {
-					transition: 'all 0.3s ease'
-				} : null
-			}
-		},
-	}
-}
-
-function otherTypeClassName(props, value) {
-	// 处理镂空类型
-	if (props.plain) {
-		return `${value}-plain`
-	}
-
-	// 处理文本类型
-	if (props.text) {
-		return `${value}-text`
-	}
-
-	return value
-}
-
-/**
- * 属性映射器
- */
-export class PropertyMapper {
-	constructor(componentName, componentConfig, customMaps = {}) {
-		this.componentName = componentName
-		this.componentConfig = componentConfig
-		this.customMaps = customMaps
-	}
-
-	/**
-	 * 映射单个属性
-	 */
-	mapProperty(propName, propValue, allProps) {
-		// 获取映射规则
-		let rule = this.getRule(propName)
-
-		if (!rule) {
-			// 如果没有找到规则，使用通用映射
-			return this.mapGenericProperty(propName, propValue)
-		}
-
-		// 应用转换规则
-		const result = rule.transform(propValue, this.componentConfig, allProps)
-
-		return result
-	}
-
-	/**
-	 * 获取属性映射规则
-	 */
-	getRule(propName) {
-		// 1. 首先检查组件特定规则
-		const componentRules = PropertyMappingRules.componentSpecific[this.componentName]
-		if (componentRules && componentRules[propName]) {
-			return componentRules[propName]
-		}
-
-		// 2. 检查通用规则
-		if (PropertyMappingRules.common[propName]) {
-			return PropertyMappingRules.common[propName]
-		}
-
-		// 3. 检查自定义映射
-		for (const mapType of Object.keys(this.customMaps)) {
-			if (this.customMaps[mapType] && this.customMaps[mapType][propName]) {
-				return {
-					target: mapType,
-					transform: (value) => this.customMaps[mapType][propName][value] || null
-				}
-			}
-		}
-
-		return null
-	}
-
-	/**
-	 * 映射通用属性（用于没有明确规则的属性）
-	 */
-	mapGenericProperty(propName, propValue) {
-		// 如果属性值本身就是样式对象
-		if (propValue && typeof propValue === 'object' && !Array.isArray(propValue)) {
-			return propValue
-		}
-
-		// 根据属性名猜测映射
-		const lowerName = propName.toLowerCase()
-
-		// 检查是否是颜色属性
-		if (lowerName.includes('color') || lowerName.includes('background')) {
-			if (typeof propValue === 'string' && propValue.startsWith('#')) {
-				return {
-					[propName]: propValue
-				}
-			}
-		}
-
-		// 检查是否是尺寸属性
-		if (lowerName.includes('width') || lowerName.includes('height') ||
-			lowerName.includes('size') || lowerName.includes('padding') ||
-			lowerName.includes('margin')) {
-			if (typeof propValue === 'string' || typeof propValue === 'number') {
-				return {
-					[propName]: propValue
-				}
-			}
-		}
-
-		// 检查是否是边框属性
-		if (lowerName.includes('border') || lowerName.includes('radius')) {
-			if (typeof propValue === 'string' || typeof propValue === 'number') {
-				return {
-					[propName]: propValue
-				}
-			}
-		}
-
-		return null
-	}
-
-	/**
-	 * 映射所有属性
-	 */
-	mapAllProperties(props) {
-		const style = {}
-
-		// 1. 首先应用组件的默认样式（不包括 _pseudo）
-		this.applyDefaultStyle(style)
-
-		// 2. 遍历所有属性
-		for (const [propName, propValue] of Object.entries(props)) {
-			// 跳过不需要处理的属性
-			if (this.shouldSkipProperty(propName)) {
-				continue
-			}
-
-			// 映射属性
-			const mappedStyle = this.mapProperty(propName, propValue, props)
-			// 合并到结果
-			if (mappedStyle && typeof mappedStyle === 'object') {
-				Object.assign(style, mappedStyle)
-			}
-		}
-
-		// 3. 处理自定义映射
-		this.applyCustomMaps(style, props)
-
-		// 4. 最后应用自定义样式（来自props.style）
-		this.applyInlineStyle(style, props)
-		return style
-	}
-
-	/**
-	 * 应用组件的默认样式
-	 */
-	applyDefaultStyle(style) {
-		// 如果组件配置中有default对象，将其样式合并（排除 _pseudo）
-		if (this.componentConfig && this.componentConfig.default) {
-			const {
-				_pseudo,
-				...defaultStyles
-			} = this.componentConfig.default
-			Object.assign(style, defaultStyles)
-		}
-	}
-
-	/**
-	 * 获取组件的伪类样式配置
-	 */
-	getPseudoStyles() {
-		if (this.componentConfig && this.componentConfig.default && this.componentConfig.default._pseudo) {
-			return this.componentConfig.default._pseudo
-		}
-		return {}
-	}
-
-	/**
-	 * 应用内联样式
-	 */
-	applyInlineStyle(style, props) {
-		if (props.style && typeof props.style === 'object') {
-			Object.assign(style, props.style)
-		}
-	}
-
-	/**
-	 * 检查是否应该跳过该属性
-	 */
-	shouldSkipProperty(propName) {
-		// 跳过 Vue 内置属性
-		const skipProps = ['key', 'ref', 'class', 'style', 'id', 'slot', 'boxStyle', 'className']
-		if (skipProps.includes(propName)) {
-			return true
-		}
-
-		// 跳过事件处理器
-		if (propName.startsWith('on') || propName.startsWith('@')) {
-			return true
-		}
-
-		return false
-	}
-
-	/**
-	 * 应用自定义映射
-	 */
-	applyCustomMaps(style, props) {
-		// 处理自定义尺寸映射
-		if (this.customMaps.size && props.size && this.customMaps.size[props.size]) {
-			Object.assign(style, this.customMaps.size[props.size])
-		}
-
-		// 处理自定义类型映射
-		if (this.customMaps.type && props.type) {
-			const typeKey = props.plain ? `${props.type}-plain` : props.type
-			if (this.customMaps.type[typeKey]) {
-				Object.assign(style, this.customMaps.type[typeKey])
-			}
-		}
-
-		// 处理其他自定义映射
-		for (const [mapType, mapConfig] of Object.entries(this.customMaps)) {
-			if (mapType === 'size' || mapType === 'type') {
-				continue
-			}
-
-			if (typeof mapConfig === 'object') {
-				for (const [key, value] of Object.entries(mapConfig)) {
-					if (props[key] !== undefined && value[props[key]]) {
-						Object.assign(style, value[props[key]])
-					}
-				}
-			}
-		}
-	}
-}
-
-/**
- * 注册新的属性映射规则
- */
-export function registerPropertyRule(componentName, propName, rule) {
-	if (!PropertyMappingRules.componentSpecific[componentName]) {
-		PropertyMappingRules.componentSpecific[componentName] = {}
-	}
-
-	PropertyMappingRules.componentSpecific[componentName][propName] = rule
-}
-
-/**
- * 注册通用属性映射规则
- */
-export function registerCommonPropertyRule(propName, rule) {
-	PropertyMappingRules.common[propName] = rule
-}

package/components/config/style/pseudo-processor.js

@@ -1,213 +0,0 @@
-export class PseudoProcessor {
-	constructor(config = {}) {
-		// 默认配置
-		this.config = {
-			// 变体优先级顺序
-			variantPriority: ['type', 'mode', 'size', 'shape', 'status'],
-
-			// 状态属性映射
-			stateMapping: {
-				plain: {
-					mode: 'outline'
-				},
-				text: {
-					mode: 'text'
-				},
-				disabled: {
-					status: 'disabled'
-				},
-				loading: {
-					status: 'loading'
-				}
-			},
-
-			// 查找策略配置
-			lookupStrategies: [
-				// 策略1: 完全匹配的组合键 (如: 'default-outline-small')
-				(obj, props, variantKey) => obj.combined && obj.combined[variantKey],
-
-				// 策略2: 基础类型匹配 (如: 'default')
-				(obj, props) => obj.type && obj.type[props.type || 'default'],
-
-				// 策略3: 状态属性匹配 (plain, text, disabled, loading)
-				(obj, props) => {
-					if (props.plain && obj.plain !== undefined) return obj.plain;
-					if (props.text && obj.text !== undefined) return obj.text;
-					if (props.disabled && obj.disabled !== undefined) return obj.disabled;
-					if (props.loading && obj.loading !== undefined) return obj.loading;
-					return null;
-				},
-
-				// 策略4: 变体属性匹配 (variant, size, shape)
-				(obj, props) => {
-					const variantProps = ['variant', 'size', 'shape', 'mode', 'status'];
-					for (const prop of variantProps) {
-						if (props[prop] && obj[prop] && obj[prop][props[prop]]) {
-							return obj[prop][props[prop]];
-						}
-					}
-					return null;
-				},
-
-				// 策略5: 默认值
-				(obj) => obj.default
-			]
-		};
-
-		// 合并自定义配置
-		if (config.variantPriority) this.config.variantPriority = config.variantPriority;
-		if (config.stateMapping) this.config.stateMapping = config.stateMapping;
-		if (config.lookupStrategies) this.config.lookupStrategies = config.lookupStrategies;
-	}
-
-	/**
-	 * 构建变体键名
-	 */
-	buildVariantKey(props) {
-		const parts = [props.type || 'default'];
-
-		// 合并状态映射
-		const allVariants = {
-			...props
-		};
-		for (const [state, mapping] of Object.entries(this.config.stateMapping)) {
-			if (props[state]) {
-				Object.assign(allVariants, mapping);
-			}
-		}
-
-		// 按优先级添加变体
-		for (const variant of this.config.variantPriority) {
-			if (allVariants[variant] && allVariants[variant] !== 'default') {
-				parts.push(allVariants[variant]);
-			}
-		}
-
-		return parts.join('-');
-	}
-
-	/**
-	 * 查找匹配的值
-	 */
-	findValue(value, props) {
-		// 如果是普通值，直接返回
-		if (typeof value !== 'object' || Array.isArray(value)) {
-			return value;
-		}
-
-		// 构建变体键
-		const variantKey = this.buildVariantKey(props);
-
-		// 按策略优先级查找值
-		for (const strategy of this.config.lookupStrategies) {
-			const result = strategy(value, props, variantKey);
-			if (result !== undefined && result !== null) {
-				return result;
-			}
-		}
-
-		return null;
-	}
-
-	/**
-	 * 合并伪类样式
-	 */
-	mergeWithPseudo(baseStyle, pseudoStyles, pseudoKey, isActive, componentProps = {}) {
-		if (!isActive || !pseudoStyles?.[pseudoKey]) {
-			return {
-				...baseStyle
-			};
-		}
-
-		const mergedStyle = {
-			...baseStyle
-		};
-		const pseudoStyle = pseudoStyles[pseudoKey];
-
-		for (const [property, value] of Object.entries(pseudoStyle)) {
-			if (value == null) continue;
-
-			const resolvedValue = this.findValue(value, componentProps);
-			if (resolvedValue != null) {
-				mergedStyle[property] = resolvedValue;
-			}
-		}
-
-		return mergedStyle;
-	}
-
-	/**
-	 * 批量合并伪类
-	 */
-	mergeMultiplePseudo(baseStyle, pseudoStyles, activePseudoStates, componentProps = {}) {
-		let result = {
-			...baseStyle
-		};
-
-		// 按定义的顺序合并伪类（优先级）
-		const pseudoOrder = ['--disabled', '--focus', '--hover', '--active'];
-
-		for (const pseudoKey of pseudoOrder) {
-			if (activePseudoStates[pseudoKey]) {
-				result = this.mergeWithPseudo(
-					result,
-					pseudoStyles,
-					pseudoKey,
-					true,
-					componentProps
-				);
-			}
-		}
-
-		return result;
-	}
-
-	/**
-	 * 简化版合并方法 - 兼容原方法签名
-	 */
-	merge(baseStyle, pseudoStyles, pseudoKey, isActive, componentProps = {}) {
-		return this.mergeWithPseudo(
-			baseStyle,
-			pseudoStyles,
-			pseudoKey,
-			isActive,
-			componentProps
-		);
-	}
-
-	/**
-	 * 添加自定义查找策略
-	 */
-	addStrategy(strategyFn, priority = 0) {
-		this.config.lookupStrategies.push({
-			fn: strategyFn,
-			priority
-		});
-
-		// 按优先级排序
-		this.config.lookupStrategies.sort((a, b) => b.priority - a.priority);
-	}
-
-	/**
-	 * 自定义状态映射
-	 */
-	addStateMapping(state, mapping) {
-		this.config.stateMapping[state] = mapping;
-	}
-}
-
-// 创建默认处理器实例
-export const defaultPseudoProcessor = new PseudoProcessor();
-
-/**
- * 创建快捷函数
- */
-export function mergeWithPseudo(baseStyle, pseudoStyles, pseudoKey, isActive, componentProps = {}) {
-	return defaultPseudoProcessor.mergeWithPseudo(
-		baseStyle,
-		pseudoStyles,
-		pseudoKey,
-		isActive,
-		componentProps
-	);
-}

package/components/config.js

@@ -1,123 +0,0 @@
-export const config = {
-	//背景颜色
-	backgroundColor: {
-		default: '#307fff',
-		delete: '#ff5e5e',
-		success: '#31d283',
-		info: '#888888',
-		warn: '#fba000',
-		reversal: '#ffffff',
-		disabled: '#f5f5f5'
-	},
-	//字体颜色
-	fontColor: {
-		default: '#307fff',
-		delete: '#ff5e5e',
-		success: '#31d283',
-		info: '#888888',
-		warn: '#fba000',
-		mianTitle: '#222222',
-		subTitle: '#666666',
-		mainText: '#333333',
-		text: '#969696',
-		hintText: '#cccccc',
-		reversal: '#ffffff'
-	},
-	//字体大小
-	fontSize: {
-		largeTitle: '42.5rpx',
-		mediumTitle: '34.5rpx',
-		smallTitle: '31.5rpx',
-		largeText: '29.5rpx',
-		mediumText: '25.5rpx',
-		smallText: '22.5rpx',
-		messageText: '20.5rpx',
-		hintText: '18.5rpx'
-	},
-	//字体其他
-	fontOther: {
-		fontFamily: "'Noto Sans CJK'"
-	},
-	//文字间距
-	letterSpacing: {},
-	//边框
-	border: {
-		default: '#307fff',
-		delete: '#ff5e5e',
-		success: '#31d283',
-		info: '#888888',
-		warn: '#fba000',
-		color: '#e0e0e0'
-	},
-	borderRadius: {
-		semicircle: '8rpx',
-		square: '0',
-		circle: '35rpx'
-	},
-	//透明度
-	opacity: {
-		//悬浮
-		hover: 0.9,
-		//点击
-		click: 0.8,
-		//禁用
-		disabled: 0.7,
-		//消息提示
-		toast: 0.7,
-		//遮罩层
-		mask: 0.4,
-		//边框
-		border: 0.3
-	},
-	//暗黑模式
-	darkMode: {
-		backgroundColor: '#333333',
-		fontColor: '#ffffff',
-		border: '#e0e0e0'
-	},
-	//图片
-	VImage: {
-		prefix: '/21cqttttttttttttttttttttttttttt/ldxyb/static/images/'
-	},
-	//文本框
-	VInput: {
-		boxShadow: '0 0 0 4rpx rgba(24, 144, 255, 0.2)'
-	},
-	//表单
-	VTable: {
-		backgroundColor: '#f5f5f5'
-	},
-	//上传图片按钮
-	VUploadFileButton: {
-		backgroundColor: '#f5f5f5'
-	},
-	//菜单
-	VMenu: {
-		backgroundColor: '#f5f5f5',
-		highlightBackgroundColor: '#e0e0e0'
-	},
-	//步骤条
-	VSteps: {
-		lineBackgroundColor: '#e0e0e0'
-	},
-	//下拉框
-	VSelectPicker: {
-		backgroundColor: '#f5f5f5'
-	},
-	//时间选择器
-	VDateTime: {
-		backgroundColor: '#f5f5f5'
-	},
-	//表单行
-	VFormItem: {
-		borderColor: '#e0e0e0'
-	},
-	//开关
-	VSwitch: {
-		backgroundColor: '#f5f5f5'
-	},
-	//宫格布局
-	VGrid:{
-		backgroundColor: '#f5f5f5'
-	}
-};