v-uni-app-ui 1.0.0 → 1.0.4

package/components/config/style/basic.js

@@ -0,0 +1,346 @@
+export const styleConfig = {
+	// 基础样式配置
+	basic: {
+		// 背景颜色 - 按功能分类
+		backgroundColor: {
+			// 状态类背景色
+			default: '#307fff',
+			delete: '#ff5e5e',
+			success: '#31d283',
+			info: '#888888',
+			warning: '#fba000',
+			reversal: '#ffffff',
+			disabled: '#f5f5f5',
+
+			// 布局背景色
+			page: '#f8f8f8', // 页面背景
+			card: '#ffffff', // 卡片背景
+			section: '#fafafa', // 区域背景
+			mask: 'rgba(0, 0, 0, 0.5)', // 遮罩层背景
+
+			// 交互状态背景色
+			hover: '#f0f7ff', // 悬停背景
+			active: '#e6f0ff', // 激活背景
+			selected: '#307fff', // 选中背景
+			focus: 'rgba(48, 127, 255, 0.1)' // 聚焦背景
+		},
+
+		// 字体颜色 - 按语义分类
+		fontColor: {
+			// 状态类文字色
+			default: '#307fff',
+			delete: '#ff5e5e',
+			success: '#31d283',
+			info: '#888888',
+			warning: '#fba000',
+			reversal: '#ffffff',
+			disabled: '#cccccc',
+
+			// 层级文字色
+			primary: '#222222', // 主要文字
+			secondary: '#666666', // 次要文字
+			tertiary: '#969696', // 辅助文字
+			placeholder: '#cccccc', // 占位文字
+			description: '#888888', // 描述文字
+
+			// 特殊文字色
+			link: '#307fff', // 链接文字
+			error: '#ff5e5e', // 错误文字
+			warningText: '#fba000', // 警告文字
+			successText: '#31d283' // 成功文字
+		},
+
+		// 字体大小
+		fontSize: {
+			// 标题类
+			extraLargeTitle: '48rpx',
+			largeTitle: '42.5rpx',
+			mediumTitle: '34.5rpx',
+			smallTitle: '31.5rpx',
+			extraSmallTitle: '28rpx',
+
+			// 正文类
+			extraLargeText: '32rpx',
+			largeText: '29.5rpx',
+			mediumText: '25.5rpx',
+			smallText: '22.5rpx',
+			extraSmallText: '20rpx',
+
+			// 特殊类
+			message: '20.5rpx',
+			hint: '18.5rpx',
+			caption: '16rpx',
+			footnote: '14rpx'
+		},
+
+		// 字体其他属性
+		fontOther: {
+			fontFamily: "'Noto Sans CJK', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+			fontWeight: {
+				thin: 100,
+				light: 300,
+				regular: 400,
+				medium: 500,
+				bold: 700,
+				black: 900
+			},
+			lineHeight: {
+				tight: 1.2,
+				normal: 1.5,
+				relaxed: 1.75,
+				loose: 2
+			}
+		},
+
+		// 文字间距
+		letterSpacing: {
+			tight: '-0.5rpx',
+			normal: '0rpx',
+			wide: '0.5rpx',
+			extraWide: '1rpx'
+		},
+
+		// 边框设置
+		border: {
+			// 边框颜色
+			color: {
+				default: '#307fff',
+				delete: '#ff5e5e',
+				success: '#31d283',
+				info: '#888888',
+				warning: '#fba000',
+				divider: '#e0e0e0', // 分割线
+				light: '#f0f0f0', // 浅色边框
+				dark: '#d9d9d9', // 深色边框
+				primary: '#d0d0d0' // 主要边框颜色
+			},
+
+			// 边框宽度
+			width: {
+				primary: '1rpx', //主要宽度
+				secondary: '2rpx', //次要宽度
+				medium: '3rpx', //中等
+				thick: '7.5rpx' //粗
+			},
+
+			// 边框样式
+			style: {
+				solid: 'solid',
+				dashed: 'dashed',
+				dotted: 'dotted'
+			}
+		},
+
+		// 圆角设置
+		borderRadius: {
+			default: '8rpx',
+			none: '0',
+			extraSmall: '4rpx',
+			small: '8rpx',
+			medium: '12rpx',
+			large: '16rpx',
+			extraLarge: '24rpx',
+			full: '9999rpx',
+			circle: '35rpx'
+		},
+
+		// 透明度
+		opacity: {
+			// 交互状态
+			hover: 0.9,
+			active: 0.8,
+			click: 0.8,
+			disabled: 0.6,
+
+			// 视觉层次
+			subtle: 0.3,
+			medium: 0.5,
+			strong: 0.7,
+
+			// 组件
+			toast: 0.95,
+			mask: 0.4,
+			border: 0.3,
+			overlay: 0.2
+		},
+
+		// 间距系统
+		spacing: {
+			// 基础间距
+			extraSmall: '4rpx',
+			small: '8rpx',
+			medium: '12rpx',
+			large: '16rpx',
+			extraLarge: '24rpx',
+			extraExtraLarge: '32rpx',
+			superLarge: '48rpx',
+
+			// 布局间距
+			pagePadding: '32rpx',
+			cardPadding: '24rpx',
+			sectionPadding: '16rpx',
+			itemSpacing: '12rpx'
+		},
+
+		// 阴影系统
+		shadow: {
+			// 层级阴影
+			none: 'none',
+			small: '0 2rpx 8rpx rgba(0, 0, 0, 0.1)',
+			medium: '0 4rpx 12rpx rgba(0, 0, 0, 0.15)',
+			large: '0 8rpx 24rpx rgba(0, 0, 0, 0.2)',
+			extraLarge: '0 12rpx 48rpx rgba(0, 0, 0, 0.25)',
+
+			// 特殊阴影
+			focus: '0 0 0 3rpx rgba(48, 127, 255, 0.2)',
+			inset: 'inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1)',
+
+			// 颜色阴影
+			default: '0 4rpx 12rpx rgba(48, 127, 255, 0.3)',
+			success: '0 4rpx 12rpx rgba(49, 210, 131, 0.3)',
+			warning: '0 4rpx 12rpx rgba(251, 160, 0, 0.3)',
+			info: '0 4rpx 12rpx rgba(0, 0, 0, 0.3)',
+			delete: '0 4rpx 12rpx rgba(255, 94, 94, 0.3)'
+		},
+
+		// 动画时长
+		animation: {
+			duration: {
+				instant: '100ms',
+				fast: '200ms',
+				normal: '300ms',
+				slow: '500ms',
+				verySlow: '800ms'
+			},
+			easing: {
+				linear: 'linear',
+				easeInOut: 'ease-in-out',
+				easeOut: 'ease-out',
+				easeIn: 'ease-in',
+				easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)',
+				easeInOutCubic: 'cubic-bezier(0.65, 0, 0.35, 1)',
+				easeOutBack: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+				easeInOutBack: 'cubic-bezier(0.68, -0.6, 0.32, 1.6)'
+			},
+			transition: {
+				default: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
+			},
+		},
+
+		// z-index层级
+		zIndex: {
+			base: 0,
+			content: 10,
+			overlay: 100,
+			modal: 1000,
+			toast: 1100,
+			tooltip: 1200,
+			dropdown: 1300,
+			notification: 1400
+		}
+	},
+
+	// 暗黑模式配置
+	darkMode: {
+		backgroundColor: {
+			default: '#307fff',
+			delete: '#ff5e5e',
+			success: '#31d283',
+			info: '#888888',
+			warning: '#fba000',
+			reversal: '#1a1a1a',
+			disabled: '#2a2a2a',
+			page: '#121212',
+			card: '#1e1e1e',
+			section: '#2a2a2a',
+			mask: 'rgba(0, 0, 0, 0.7)',
+			hover: 'rgba(48, 127, 255, 0.2)',
+			active: 'rgba(48, 127, 255, 0.3)',
+			selected: '#307fff',
+			focus: 'rgba(48, 127, 255, 0.1)'
+		},
+		fontColor: {
+			default: '#307fff',
+			delete: '#ff5e5e',
+			success: '#31d283',
+			info: '#888888',
+			warning: '#fba000',
+			reversal: '#ffffff',
+			disabled: '#555555',
+			primary: '#ffffff',
+			secondary: '#cccccc',
+			tertiary: '#999999',
+			placeholder: '#666666',
+			description: '#888888',
+			link: '#307fff',
+			error: '#ff5e5e',
+			warningText: '#fba000',
+			successText: '#31d283'
+		},
+		border: {
+			color: {
+				default: '#307fff',
+				delete: '#ff5e5e',
+				success: '#31d283',
+				info: '#888888',
+				warning: '#fba000',
+				divider: '#333333',
+				light: '#2a2a2a',
+				dark: '#444444'
+			}
+		}
+	},
+
+	// 响应式断点（基于rpx）
+	breakpoints: {
+		mobile: '768rpx',
+		tablet: '1024rpx',
+		desktop: '1280rpx',
+		wide: '1440rpx'
+	},
+
+	// 组件特定配置
+	components: {
+		VButton: {
+			height: {
+				small: '50rpx',
+				medium: '60rpx',
+				large: '70rpx'
+			},
+			padding: {
+				small: '14rpx 10rpx',
+				medium: '15rpx 15rpx',
+				large: '20rpx 20rpx'
+			},
+			plain: {
+				backgroundColor: 'transparent',
+				borderWidth: '1rpx'
+			},
+			text: {
+				backgroundColor: 'transparent',
+				borderWidth: '0'
+			},
+			shape: {
+				default: {
+					width: "1rpx",
+					style: 'solid'
+				},
+				none: {
+					width: "1rpx",
+					style: 'solid'
+				},
+				circle: {
+					width: "1rpx",
+					style: 'solid'
+				}
+			}
+		},
+		VInput: {
+			height: {
+				small: '50rpx',
+				medium: '60rpx',
+				large: '70rpx'
+			},
+		}
+	}
+};

package/components/config/style/component-registry.js

@@ -0,0 +1,142 @@
+import {
+	styleConfig
+} from './basic.js'
+
+// 导入组件样式配置
+import ButtonStyleConfig from '@/components/config/style/components/button-style.js'
+import InputStyleConfig from '@/components/config/style/components/input-style.js'
+/**
+ * 默认组件样式配置
+ */
+const DefaultStyleConfig = {}
+
+/**
+ * 组件样式注册表
+ */
+const ComponentStyleRegistry = {
+	button: ButtonStyleConfig,
+	input: InputStyleConfig,
+	default: DefaultStyleConfig
+}
+
+/**
+ * 获取组件样式配置（合并默认配置）
+ * @param {string} componentName 组件名称
+ * @returns {Object} 组件样式配置
+ */
+export function getComponentStyleConfig(componentName) {
+	const config = ComponentStyleRegistry[componentName] || ComponentStyleRegistry.default
+
+	// 如果组件配置有默认样式，确保返回的是包含默认配置的对象
+	if (config) {
+		// 复制配置，确保不修改原始配置
+		const mergedConfig = {
+			...config
+		}
+
+		// 如果组件有自己的默认配置，将其合并到根级别
+		if (mergedConfig.default) {
+			// 注意：这里不直接合并，因为default可能在特定场景下使用
+			// 保持原有结构，PropertyMapper会处理default配置
+		}
+
+		return mergedConfig
+	}
+
+	return config
+}
+
+/**
+ * 注册组件样式配置
+ * @param {string} componentName 组件名称
+ * @param {Object} styleConfig 样式配置
+ * @param {boolean} mergeWithDefault 是否与现有默认配置合并
+ */
+export function registerComponentStyle(componentName, styleConfig, mergeWithDefault = true) {
+	if (!ComponentStyleRegistry[componentName]) {
+		ComponentStyleRegistry[componentName] = {}
+	}
+
+	if (mergeWithDefault) {
+		// 深度合并配置，包括默认配置
+		ComponentStyleRegistry[componentName] = deepMerge(
+			ComponentStyleRegistry[componentName],
+			styleConfig
+		)
+	} else {
+		// 直接覆盖
+		ComponentStyleRegistry[componentName] = styleConfig
+	}
+}
+
+/**
+ * 检查组件是否已注册样式
+ * @param {string} componentName 组件名称
+ * @returns {boolean}
+ */
+export function hasComponentStyle(componentName) {
+	return !!ComponentStyleRegistry[componentName]
+}
+
+/**
+ * 获取所有已注册的组件名称
+ * @returns {string[]}
+ */
+export function getRegisteredComponents() {
+	return Object.keys(ComponentStyleRegistry).filter(name => name !== 'default')
+}
+
+/**
+ * 深度合并对象
+ */
+function deepMerge(target, source) {
+	const result = {
+		...target
+	}
+
+	for (const key in source) {
+		if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+			if (target[key] && typeof target[key] === 'object') {
+				result[key] = deepMerge(target[key], source[key])
+			} else {
+				result[key] = source[key]
+			}
+		} else {
+			result[key] = source[key]
+		}
+	}
+
+	return result
+}
+
+/**
+ * 设置组件的默认样式配置
+ * @param {string} componentName 组件名称
+ * @param {Object} defaultConfig 默认样式配置
+ */
+export function setComponentDefaultConfig(componentName, defaultConfig) {
+	if (!ComponentStyleRegistry[componentName]) {
+		ComponentStyleRegistry[componentName] = {}
+	}
+
+	// 将默认配置合并到组件配置的default属性中
+	ComponentStyleRegistry[componentName].default = deepMerge(
+		ComponentStyleRegistry[componentName].default || {},
+		defaultConfig
+	)
+}
+
+// 导出注册表
+export {
+	ComponentStyleRegistry
+}
+
+// 默认导出
+export default {
+	getComponentStyleConfig,
+	registerComponentStyle,
+	hasComponentStyle,
+	getRegisteredComponents,
+	setComponentDefaultConfig,
+	ComponentStyleRegistry
+}

package/components/config/style/components/button-style.js

@@ -0,0 +1,160 @@
+import {
+	styleConfig
+} from "@/components/config/style/basic.js"
+export default {
+	size: {
+		'small': {
+			height: styleConfig.components.VButton.height.small,
+			padding: styleConfig.components.VButton.padding.small,
+			fontSize: styleConfig.basic.fontSize.smallText,
+		},
+		'medium': {
+			height: styleConfig.components.VButton.height.medium,
+			padding: styleConfig.components.VButton.padding.medium,
+			fontSize: styleConfig.basic.fontSize.mediumText,
+		},
+		'large': {
+			height: styleConfig.components.VButton.height.large,
+			padding: styleConfig.components.VButton.padding.large,
+			fontSize: styleConfig.basic.fontSize.largeText,
+		},
+	},
+	type: {
+		'default': {
+			backgroundColor: styleConfig.basic.backgroundColor.default,
+			color: styleConfig.basic.fontColor.reversal,
+			borderColor: styleConfig.basic.border.color.default
+		},
+		'success': {
+			backgroundColor: styleConfig.basic.backgroundColor.success,
+			color: styleConfig.basic.fontColor.reversal,
+			borderColor: styleConfig.basic.border.color.success
+		},
+		'warning': {
+			backgroundColor: styleConfig.basic.backgroundColor.warning,
+			color: styleConfig.basic.fontColor.reversal,
+			borderColor: styleConfig.basic.border.color.warning
+		},
+		'info': {
+			backgroundColor: styleConfig.basic.backgroundColor.info,
+			color: styleConfig.basic.fontColor.reversal,
+			borderColor: styleConfig.basic.border.color.info
+		},
+		'delete': {
+			backgroundColor: styleConfig.basic.backgroundColor.delete,
+			color: styleConfig.basic.fontColor.reversal,
+			borderColor: styleConfig.basic.border.color.delete
+		},
+
+		// 镂空类型
+		'default-plain': {
+			backgroundColor: styleConfig.components.VButton.plain.backgroundColor,
+			color: styleConfig.basic.fontColor.default,
+			borderColor: styleConfig.basic.border.color.default,
+			borderWidth: styleConfig.components.VButton.plain.borderWidth
+		},
+		'success-plain': {
+			backgroundColor: styleConfig.components.VButton.plain.backgroundColor,
+			color: styleConfig.basic.fontColor.success,
+			borderColor: styleConfig.basic.border.color.success,
+			borderWidth: styleConfig.components.VButton.plain.borderWidth
+		},
+		'warning-plain': {
+			backgroundColor: styleConfig.components.VButton.plain.backgroundColor,
+			color: styleConfig.basic.fontColor.warning,
+			borderColor: styleConfig.basic.border.color.warning,
+			borderWidth: styleConfig.components.VButton.plain.borderWidth
+		},
+		'delete-plain': {
+			backgroundColor: styleConfig.components.VButton.plain.backgroundColor,
+			color: styleConfig.basic.fontColor.delete,
+			borderColor: styleConfig.basic.border.color.delete,
+			borderWidth: styleConfig.components.VButton.plain.borderWidth
+		},
+		'info-plain': {
+			backgroundColor: styleConfig.components.VButton.plain.backgroundColor,
+			color: styleConfig.basic.fontColor.info,
+			borderColor: styleConfig.basic.border.color.info,
+			borderWidth: styleConfig.components.VButton.plain.borderWidth
+		},
+		//文本
+		'default-text': {
+			backgroundColor: styleConfig.components.VButton.text.backgroundColor,
+			color: styleConfig.basic.fontColor.default,
+			borderColor: styleConfig.basic.border.color.default,
+			borderWidth: styleConfig.components.VButton.text.borderWidth
+		},
+		'success-text': {
+			backgroundColor: styleConfig.components.VButton.text.backgroundColor,
+			color: styleConfig.basic.fontColor.success,
+			borderColor: styleConfig.basic.border.color.success,
+			borderWidth: styleConfig.components.VButton.text.borderWidth
+		},
+		'warning-text': {
+			backgroundColor: styleConfig.components.VButton.text.backgroundColor,
+			color: styleConfig.basic.fontColor.warning,
+			borderColor: styleConfig.basic.border.color.warning,
+			borderWidth: styleConfig.components.VButton.text.borderWidth
+		},
+		'delete-text': {
+			backgroundColor: styleConfig.components.VButton.text.backgroundColor,
+			color: styleConfig.basic.fontColor.delete,
+			borderColor: styleConfig.basic.border.color.delete,
+			borderWidth: styleConfig.components.VButton.text.borderWidth
+		},
+		'info-text': {
+			backgroundColor: styleConfig.components.VButton.text.backgroundColor,
+			color: styleConfig.basic.fontColor.info,
+			borderColor: styleConfig.basic.border.color.info,
+			borderWidth: styleConfig.components.VButton.text.borderWidth
+		}
+	},
+	shape: {
+		'default': {
+			borderWidth: styleConfig.components.VButton.shape.default.width,
+			borderStyle: styleConfig.components.VButton.shape.default.style,
+			borderRadius: styleConfig.basic.borderRadius.default
+		},
+		'none': {
+			borderWidth: styleConfig.components.VButton.shape.none.width,
+			borderStyle: styleConfig.components.VButton.shape.none.style,
+			borderRadius: styleConfig.basic.borderRadius.none
+		},
+		'circle': {
+			borderWidth: styleConfig.components.VButton.shape.circle.width,
+			borderStyle: styleConfig.components.VButton.shape.circle.style,
+			borderRadius: styleConfig.basic.borderRadius.circle
+		}
+	},
+	default: {
+		cursor: 'pointer',
+		transition: styleConfig.basic.animation.transition.default,
+		display: 'inline-flex',
+		alignItems: 'center',
+		justifyContent: 'center',
+		_pseudo: {
+			'--hover': {
+				opacity: styleConfig.basic.opacity.hover,
+				boxShadow: {
+					type: {
+						default: styleConfig.basic.shadow.default,
+						success: styleConfig.basic.shadow.success,
+						warning: styleConfig.basic.shadow.warning,
+						info: styleConfig.basic.shadow.info,
+						delete: styleConfig.basic.shadow.delete,
+
+						'default-text': styleConfig.basic.shadow.none,
+						'success-text': styleConfig.basic.shadow.none,
+						'warning-text': styleConfig.basic.shadow.none,
+						'delete-text': styleConfig.basic.shadow.none,
+						'info-text': styleConfig.basic.shadow.none,
+					},
+				}
+			},
+			'--active': {
+				opacity: styleConfig.basic.opacity.active,
+				boxShadow: styleConfig.basic.shadow.none
+			}
+		}
+	},
+}