tang-ui-x 1.0.0

package/components/VbenFrom/index.uvue

@@ -0,0 +1,392 @@
+<script  setup lang="uts" >
+
+	import RadioButton from '@/components/RadioButton/index'
+	import CheckboxButton from '@/components/CheckboxButton/index'
+
+	type FormOption = { label : string; value : string | number }
+	type FormSchema = {
+		field : string
+		label : string
+		component : 'input' | 'textarea' | 'select' | 'date' | 'radio' | 'checkbox' | 'switch'
+		placeholder ?: string
+		required ?: boolean
+		options ?: FormOption[]
+		type ?: string
+	}
+
+	type Props = {
+		schemas : FormSchema[]
+		activeColor ?: string
+		inactiveColor ?: string
+		backgroundColor ?: string
+		hideButtons ?: boolean // 是否隐藏默认按钮
+	}
+
+	const props = withDefaults(defineProps<Props>(), {
+		activeColor: '#00bba7',
+		inactiveColor: '#666666',
+		backgroundColor: '#ffffff',
+		hideButtons: false,
+	})
+
+	const emit = defineEmits(['submit', 'reset'])
+
+	/** 使用 defineModel 实现双向数据绑定 */
+	const model = defineModel<Record<string, any>>({ default: () => ({}) })
+
+	/** 验证错误状态 */
+	const errors = reactive<Record<string, string>>({})
+
+	/** 动态 CSS 变量 */
+	const cssVars = computed(() => ({
+		'--hover-active-color': props.activeColor,
+		'--hover-inactive-color': props.inactiveColor,
+		'--hover-bg-color': props.backgroundColor,
+	}))
+
+
+	/** placeholder */
+
+	const hanldePlaceholder=(item : FormSchema): string => {
+		return item.placeholder || `请输入${item.label}`
+	}
+	/** 处理范围选择器选项 */
+	const hanldeRange = (options) => {
+		return options?.map(o => o.label) || []
+	}
+
+
+	/** select 选中项文字 */
+	const getSelectLabel = (item : FormSchema) => {
+		const opt = item.options?.find(o => o.value === model.value[item.field])
+		return opt?.label || ''
+	}
+
+	/** 选择器变化 */
+	const onSelectChange = (e : any, item : FormSchema) => {
+		const index = e.detail.value as number
+		const value = item.options?.[index]?.value ?? ''
+		model.value[item.field] = value
+		validateField(item)
+	}
+
+
+	/** 选择时间 */
+	const onTimeChange = (e : any, item : FormSchema) => {
+		model.value[item.field] = e.detail.value
+		validateField(item)
+	}
+
+	/** 验证单个字段 */
+	const validateField = (item : FormSchema) => {
+		if (item.required && !model.value[item.field]) {
+			errors[item.field] = `请输入${item.label}`
+		} else {
+			delete errors[item.field]
+		}
+	}
+
+	/** 单选变化 */
+	const onRadioChange = (value : string | number, item : FormSchema) => {
+		model.value[item.field] = value
+		validateField(item)
+	}
+
+	/** 多选变化 */
+	const onCheckboxChange = (values : (string | number)[], item : FormSchema) => {
+		model.value[item.field] = values
+		validateField(item)
+	}
+
+ /** 提交表单 */
+const onFormSubmit = async (e: UniFormSubmitEvent): Promise<{ valid: boolean, values: any }> => {
+  // 清空所有错误
+  Object.keys(errors).forEach(k => delete errors[k])
+
+  // 验证所有必填项
+  let hasError = false
+  for (const item of props.schemas) {
+    validateField(item)
+    if (item.required && !model.value[item.field]) {
+      hasError = true
+    }
+  }
+
+  // 如果有错误，阻止提交
+  if (hasError) {
+    console.warn('表单验证失败，存在必填项未填写')
+    return { valid: false, values: null }
+  }
+
+  // ✅ 返回异步提交结果
+  try {
+    await emit('submit', model.value)
+    return { valid: true, values: model.value}
+  } catch (err) {
+    console.error('表单提交失败:', err)
+    return { valid: false, values: null }
+  }
+}
+
+
+	/** 重置表单 */
+	const onFormReset = () => {
+		Object.keys(model.value).forEach(k => (model.value[k] = ''))
+		Object.keys(errors).forEach(k => delete errors[k])
+		emit('reset')
+	}
+
+	// 对外暴露的方法
+	defineExpose({
+		/** 提交表单 */
+		submit:async () => {
+	 return	await	onFormSubmit({} as UniFormSubmitEvent)
+		},
+		/** 重置表单 */
+		reset: () => {
+			onFormReset()
+		},
+		/** 验证所有字段 */
+		validate: () => {
+			Object.keys(errors).forEach(k => delete errors[k])
+			let hasError = false
+			for (const item of props.schemas) {
+				validateField(item)
+				if (item.required && !model.value[item.field]) {
+					hasError = true
+				}
+			}
+			return !hasError
+		},
+		/** 获取表单数据 */
+		getFormData: () => ({ ...model.value }),
+		/** 获取错误信息 */
+		getErrors: () => ({ ...errors })
+	})
+</script>
+
+<template>
+	<view class="vform-container" :style="cssVars">
+		<form @submit="onFormSubmit" @reset="onFormReset">
+			<view v-for="(item, index) in schemas" class="form-item-box" :key="index">
+				<view class="form-item">
+					<view class="label">
+						<text>{{ item.label }}</text>
+						<text v-if="item.required" class="required">*</text>
+					</view>
+
+					<view class="components">
+						<input v-if="item.component === 'input'" v-model="model[item.field]" :placeholder="hanldePlaceholder(item)"
+							:type="item.type || 'text'" :name="item.field" class="input" @input="validateField(item)" />
+
+						<!-- 文本域 -->
+						<textarea v-if="item.component === 'textarea'" v-model="model[item.field]"
+							:placeholder="hanldePlaceholder(item)" :name="item.field" class="textarea"
+							@input="validateField(item)"></textarea>
+
+						<!-- 下拉选择 -->
+						<picker v-else-if="item.component === 'select'" mode="selector" :name="item.field"
+							:range="hanldeRange(item.options)" @change="onSelectChange($event, item)">
+							<view class="select">
+								{{ getSelectLabel(item) || '请选择' }}
+							</view>
+						</picker>
+
+						<!-- 日期选择 -->
+						<picker v-else-if="item.component === 'date'" mode="date" :name="item.field" :value="model[item.field]"
+							@change="onTimeChange($event, item)">
+							<view class="select">
+								{{ model[item.field] || '请选择日期' }}
+							</view>
+						</picker>
+					</view>
+				</view>
+				<!-- 错误提示 -->
+				<view v-if="errors[item.field]" class="error-message">
+					<text>{{ errors[item.field] }}</text>
+				</view>
+			</view>
+
+			<!-- 默认按钮区域（可通过hideButtons隐藏） -->
+			<view v-if="!hideButtons" class="form-footer">
+				<button class="btn btn-submit" form-type="submit" type="primary">提交</button>
+				<button class="btn btn-reset" form-type="reset" type="default">重置</button>
+			</view>
+		</form>
+	</view>
+</template>
+
+<style lang="scss" scoped>
+$color-primary: #14b8a6;
+$color-secondary: #2dd4bf;
+$color-accent: #5eead4;
+$color-error: #ff6b6b;
+$color-warning: #feca57;
+
+$color-text: #333;
+$color-border: rgba(0, 0, 0, 0.05);
+$color-bg-light: rgba(255, 255, 255, 0.8);
+$color-disabled: #e0e0e0;
+$color-disabled-text: #999;
+
+// 深色模式
+$dark-bg: rgba(30, 30, 30, 0.95);
+$dark-bg-sub: rgba(40, 40, 40, 0.8);
+$dark-bg-item: rgba(50, 50, 50, 0.8);
+$dark-border: rgba(255, 255, 255, 0.1);
+$dark-text: #fff;
+
+
+.vform-container {
+	/* 移除默认背景和内边距，完全由父组件控制 */
+	background-color: transparent;
+	padding: 40rpx 32rpx 32rpx;
+}
+
+.form-item-box {
+	/* 移除默认布局，完全由自定义样式控制 */
+	align-items: flex-start;
+	width: 100%;
+	margin: 10rpx 0;
+	padding: 16rpx 24rpx;
+	border-radius: 16rpx;
+	border: 1rpx solid $color-border;
+	transition: all 0.3s ease;
+
+	&:focus-within {
+		background: #fff;
+		border-color: $color-primary ;
+		box-shadow: 0 0 0 4rpx rgba($color-primary, 0.1);
+		transform: translateY(-2rpx);
+	}
+}
+
+.form-item {
+	/* 移除默认布局，完全由自定义样式控制 */
+	flex-direction: row;
+	align-items: flex-start;
+	width: 100%;
+
+	border-radius: 16rpx;
+	background: $color-bg-light;
+	transition: all 0.3s ease;
+
+
+}
+
+.label {
+	flex-direction: row;
+	margin-bottom: 12rpx;
+	color: $color-text ;
+	font-weight: 500;
+	font-size: 28rpx;
+	padding: 10rpx 0;
+	margin-right: 12rpx;
+}
+
+.required {
+	color: $color-error ;
+}
+
+.components {
+	flex: 1;
+	justify-content: center
+}
+
+.input,
+.textarea,
+.select {
+	/* 移除所有默认样式，完全由自定义样式控制 */
+	display: flex;
+	justify-content: center;
+	border: none;
+	padding: 0;
+	margin: 0;
+	font-size: inherit;
+	color: inherit;
+	border-radius: 0;
+	outline: none;
+	resize: none;
+	min-height: 34px;
+}
+
+/* 确保输入框样式完全被自定义样式覆盖 */
+.input:focus,
+.textarea:focus,
+.select:focus {
+	width: 100%;
+	background: transparent;
+	border: none;
+	padding: 12rpx 0;
+	font-size: 30rpx;
+	color: $color-text ;
+	transition: all 0.3s ease;
+	border-bottom: 2rpx solid transparent;
+	text-align: left;
+
+	&:focus {
+		border-bottom-color: $color-primary ;
+		outline: none;
+	}
+}
+
+.radio-button-container,
+.checkbox-button-container,
+uni-picker {
+	width: 100%;
+	background: transparent;
+	border: none;
+	padding: 0;
+	text-align: left;
+}
+
+
+uni-picker {
+	/* 移除默认样式 */
+	width: auto;
+	text-align: left;
+}
+
+.form-footer {
+	flex-direction: row;
+	gap: 8px;
+}
+
+.btn {
+	/* 移除默认按钮样式 */
+	flex: 1;
+	transition: all 0.3s ease;
+
+	&:active {
+		opacity: 0.7;
+		transform: scale(0.98);
+	}
+}
+
+.btn-submit {
+	background-color: $color-primary;
+	color: $dark-text
+}
+
+.btn-reset {
+	border-width: 1px;
+	border-style: solid;
+	border-color: $color-primary;
+	color: $color-primary;
+}
+
+.error-message {
+	margin-top: 8rpx;
+	text-align: left;
+	color: $color-error ;
+	font-size: 24rpx;
+	line-height: 1.4;
+}
+
+.error-message text {
+	color: $color-error;
+	font-size: 24rpx;
+	line-height: 1.4;
+	text-align: right;
+}
+</style>

package/composables/useModal.uts

@@ -0,0 +1,294 @@
+/**
+ * 模态框管理组合式函数
+ * @module composables/useModal
+ */
+
+import { ref, reactive } from 'vue'
+import type { ModalOptions } from '../types/index.uts'
+
+/** 模态框队列 */
+const modalQueue = ref<ModalOptions[]>([])
+
+/** 当前显示的模态框 */
+const currentModal = ref<ModalOptions | null>(null)
+
+/** 是否显示模态框 */
+const isVisible = ref(false)
+
+/**
+ * 模态框管理组合式函数
+ * @returns {Object} 模态框管理对象
+ */
+export function useModal() {
+  /**
+   * 显示模态框
+   * @param {ModalOptions} options - 模态框配置
+   * @returns {Promise<boolean>} 用户选择结果
+   */
+  const show = (options: ModalOptions): Promise<boolean> => {
+    return new Promise((resolve, reject) => {
+      try {
+        // 默认配置
+        const defaultOptions: ModalOptions = {
+          title: '',
+          content: '',
+          showCancel: true,
+          cancelText: '取消',
+          confirmText: '确定',
+          onConfirm: () => resolve(true),
+          onCancel: () => resolve(false)
+        }
+
+        // 合并配置
+        const modalConfig = { ...defaultOptions, ...options }
+
+        // 添加到队列
+        modalQueue.value.push(modalConfig)
+
+        // 如果当前没有显示模态框，则显示第一个
+        if (!isVisible.value) {
+          showNext()
+        }
+      } catch (error) {
+        console.error('显示模态框失败:', error)
+        reject(error)
+      }
+    })
+  }
+
+  /**
+   * 显示确认框
+   * @param {string} content - 内容
+   * @param {string} title - 标题
+   * @returns {Promise<boolean>} 用户选择结果
+   */
+  const confirm = (content: string, title: string = '提示'): Promise<boolean> => {
+    return show({
+      title,
+      content,
+      showCancel: true
+    })
+  }
+
+  /**
+   * 显示提示框
+   * @param {string} content - 内容
+   * @param {string} title - 标题
+   * @returns {Promise<boolean>} 确认结果
+   */
+  const alert = (content: string, title: string = '提示'): Promise<boolean> => {
+    return show({
+      title,
+      content,
+      showCancel: false
+    })
+  }
+
+  /**
+   * 显示输入框
+   * @param {string} title - 标题
+   * @param {string} placeholder - 占位符
+   * @param {string} defaultValue - 默认值
+   * @returns {Promise<string | null>} 输入内容
+   */
+  const prompt = (title: string, placeholder: string = '', defaultValue: string = ''): Promise<string | null> => {
+    return new Promise((resolve) => {
+      // 使用 uni.showModal 的 editable 属性（部分平台支持）
+      // #ifdef MP-WEIXIN || MP-ALIPAY
+      uni.showModal({
+        title,
+        content: defaultValue,
+        editable: true,
+        placeholderText: placeholder,
+        success: (res) => {
+          if (res.confirm) {
+            resolve(res.content || '')
+          } else {
+            resolve(null)
+          }
+        },
+        fail: () => {
+          resolve(null)
+        }
+      })
+      // #endif
+
+      // 其他平台使用默认模态框
+      // #ifndef MP-WEIXIN || MP-ALIPAY
+      show({
+        title,
+        content: `请输入: ${placeholder}`,
+        showCancel: true,
+        onConfirm: () => resolve(defaultValue),
+        onCancel: () => resolve(null)
+      })
+      // #endif
+    })
+  }
+
+  /**
+   * 显示加载框
+   * @param {string} title - 加载提示
+   * @param {boolean} mask - 是否显示遮罩
+   * @returns {Function} 关闭函数
+   */
+  const loading = (title: string = '加载中...', mask: boolean = true): (() => void) => {
+    uni.showLoading({
+      title,
+      mask
+    })
+
+    return () => {
+      uni.hideLoading()
+    }
+  }
+
+  /**
+   * 显示操作菜单
+   * @param {string[]} items - 菜单项
+   * @param {string} title - 标题
+   * @returns {Promise<number>} 选择的索引
+   */
+  const actionSheet = (items: string[], title?: string): Promise<number> => {
+    return new Promise((resolve) => {
+      uni.showActionSheet({
+        itemList: items,
+        title,
+        success: (res) => {
+          resolve(res.tapIndex)
+        },
+        fail: () => {
+          resolve(-1)
+        }
+      })
+    })
+  }
+
+  /**
+   * 显示下一个模态框
+   */
+  const showNext = () => {
+    if (modalQueue.value.length > 0) {
+      currentModal.value = modalQueue.value.shift() || null
+      isVisible.value = true
+
+      // 使用 uni.showModal
+      if (currentModal.value) {
+        uni.showModal({
+          title: currentModal.value.title || '',
+          content: currentModal.value.content,
+          showCancel: currentModal.value.showCancel,
+          cancelText: currentModal.value.cancelText,
+          confirmText: currentModal.value.confirmText,
+          success: (res) => {
+            if (res.confirm && currentModal.value?.onConfirm) {
+              currentModal.value.onConfirm()
+            } else if (res.cancel && currentModal.value?.onCancel) {
+              currentModal.value.onCancel()
+            }
+
+            // 处理完当前模态框后，显示下一个
+            isVisible.value = false
+            currentModal.value = null
+
+            if (modalQueue.value.length > 0) {
+              setTimeout(() => showNext(), 300)
+            }
+          }
+        })
+      }
+    }
+  }
+
+  /**
+   * 关闭当前模态框
+   */
+  const close = () => {
+    if (currentModal.value?.onCancel) {
+      currentModal.value.onCancel()
+    }
+
+    isVisible.value = false
+    currentModal.value = null
+
+    // 显示下一个
+    if (modalQueue.value.length > 0) {
+      setTimeout(() => showNext(), 300)
+    }
+  }
+
+  /**
+   * 清空模态框队列
+   */
+  const clear = () => {
+    modalQueue.value = []
+    currentModal.value = null
+    isVisible.value = false
+  }
+
+  /**
+   * 获取队列长度
+   * @returns {number} 队列长度
+   */
+  const getQueueLength = (): number => {
+    return modalQueue.value.length
+  }
+
+  return {
+    // 状态
+    isVisible,
+    currentModal,
+    modalQueue,
+
+    // 方法
+    show,
+    confirm,
+    alert,
+    prompt,
+    loading,
+    actionSheet,
+    close,
+    clear,
+    getQueueLength
+  }
+}
+
+/**
+ * 获取模态框实例（单例模式）
+ */
+let modalInstance: ReturnType<typeof useModal> | null = null
+
+export function getModalInstance() {
+  if (!modalInstance) {
+    modalInstance = useModal()
+  }
+  return modalInstance
+}
+
+/**
+ * 快捷方法：显示确认框
+ */
+export function showConfirm(content: string, title?: string): Promise<boolean> {
+  return getModalInstance().confirm(content, title)
+}
+
+/**
+ * 快捷方法：显示提示框
+ */
+export function showAlert(content: string, title?: string): Promise<boolean> {
+  return getModalInstance().alert(content, title)
+}
+
+/**
+ * 快捷方法：显示加载框
+ */
+export function showLoading(title?: string, mask?: boolean): () => void {
+  return getModalInstance().loading(title, mask)
+}
+
+/**
+ * 快捷方法：显示操作菜单
+ */
+export function showActionSheet(items: string[], title?: string): Promise<number> {
+  return getModalInstance().actionSheet(items, title)
+}