v-uni-app-ui 1.0.2 → 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

@@ -3,7 +3,7 @@ export const config = {
 	backgroundColor: {
 		default: '#307fff',
 		delete: '#ff5e5e',
-		succeed: '#31d283',
+		success: '#31d283',
 		info: '#888888',
 		warn: '#fba000',
 		reversal: '#ffffff',
@@ -13,7 +13,7 @@ export const config = {
 	fontColor: {
 		default: '#307fff',
 		delete: '#ff5e5e',
-		succeed: '#31d283',
+		success: '#31d283',
 		info: '#888888',
 		warn: '#fba000',
 		mianTitle: '#222222',
@@ -44,7 +44,7 @@ export const config = {
 	border: {
 		default: '#307fff',
 		delete: '#ff5e5e',
-		succeed: '#31d283',
+		success: '#31d283',
 		info: '#888888',
 		warn: '#fba000',
 		color: '#e0e0e0'

package/components/icon/iconfont.css

@@ -0,0 +1,87 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 5074649 */
+  src: url('iconfont.woff2?t=1768618926322') format('woff2'),
+       url('iconfont.woff?t=1768618926322') format('woff'),
+       url('iconfont.ttf?t=1768618926322') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-chenggong:before {
+  content: "\e621";
+}
+
+.icon-xiazai:before {
+  content: "\e61e";
+}
+
+.icon-guanbi:before {
+  content: "\e60d";
+}
+
+.icon-youxiang:before {
+  content: "\e623";
+}
+
+.icon-youxiang1:before {
+  content: "\e64c";
+}
+
+.icon-shang:before {
+  content: "\e63c";
+}
+
+.icon-xia:before {
+  content: "\e63d";
+}
+
+.icon-zuo:before {
+  content: "\e63e";
+}
+
+.icon-shangchuan:before {
+  content: "\e71a";
+}
+
+.icon-jianshao:before {
+  content: "\e638";
+}
+
+.icon-zengjia:before {
+  content: "\e640";
+}
+
+.icon-shoujihao:before {
+  content: "\e76d";
+}
+
+.icon-24gl-infoCircle:before {
+  content: "\e97d";
+}
+
+.icon-24gl-pictureSplit:before {
+  content: "\e9ee";
+}
+
+.icon-jinggao:before {
+  content: "\e84f";
+}
+
+.icon-you:before {
+  content: "\e614";
+}
+
+.icon-shipinjiazaishibai1-01:before {
+  content: "\e63f";
+}
+
+.icon-url:before {
+  content: "\e646";
+}
+