v-uni-app-ui 1.0.0 → 1.0.4

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

@@ -0,0 +1,377 @@
+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

@@ -0,0 +1,213 @@
+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

@@ -0,0 +1,123 @@
+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'
+	}
+};