@zfqh/uview-x 0.0.0-stage → 0.0.2

package/components/uv-code/uv-code.vue

@@ -0,0 +1,156 @@
+<template>
+	<view class="uv-code" :class="[p.customClass]" :style="[$uv.addStyle(p.customStyle)]">
+		<!-- 此组件功能由js完成，无需写html逻辑 -->
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+	import { useI18n } from '../../hooks'
+
+	defineOptions({
+		name: 'uv-code',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * Code 验证码倒计时
+	 * @description 考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件不提供界面显示，只提供倒计时文本，由用户将文本嵌入到具体的场景
+	 * @tutorial https://www.uvui.cn/components/code.html
+	 * @property {String | Number}	seconds			倒计时所需的秒数（默认 60 ）
+	 * @property {String}			startText		开始前的提示语，默认 ''（使用内置文案「获取验证码」）
+	 * @property {String}			changeText		倒计时期间的提示语，必须带有字母"x"，默认 ''（使用内置文案「X秒重新获取」）
+	 * @property {String}			endText			倒计结束的提示语，默认 ''（使用内置文案「重新获取」）
+	 * @property {Boolean}			keepRunning		是否在H5刷新或各端返回再进入时继续倒计时（ 默认false ）
+	 * @property {String}			uniqueKey		为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * @event {Function}	change	倒计时期间，每秒触发一次
+	 * @event {Function}	start	开始倒计时触发
+	 * @event {Function}	end		结束倒计时触发
+	 * @example <uv-code ref="uCode" @change="codeChange" seconds="20"></uv-code>
+	 */
+	const p = defineProps(props)
+
+	const emit = defineEmits(['change', 'start', 'end'])
+
+	// 内置文案：props 优先，否则使用内置 i18n（locales/ 的 uv.code.*）
+	const { t } = useI18n({ useScope: 'global' })
+	const startTextValue = computed<string>(() => p.startText || t('uv.code.start'))
+	const changeTextValue = computed<string>(() => p.changeText || t('uv.code.change'))
+	const endTextValue = computed<string>(() => p.endText || t('uv.code.end'))
+
+	// 当前倒计时的秒数
+	const secNum = ref<any>(p.seconds)
+	// 定时器
+	let timer: any = null
+	// 是否可以执行验证码操作
+	const canGetCode = ref(true)
+
+	const changeEvent = (text: string) => {
+		emit('change', text)
+	}
+
+	// 保存时间戳，为了防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来
+	const setTimeToStorage = () => {
+		if (!p.keepRunning || !timer) return
+		// 倒计时尚未结束，结果大于0；倒计时已经开始，就会小于初始值，如果等于初始值，说明没有开始倒计时，无需处理
+		if (secNum.value > 0 && secNum.value <= Number(p.seconds)) {
+			// 获取当前时间戳，除以1000变成秒，再去除小数部分
+			const nowTimestamp = Math.floor(+new Date() / 1000)
+			// 将本该结束时候的时间戳保存起来 => 当前时间戳 + 剩余的秒数
+			uni.setStorageSync(p.uniqueKey + '_$uCountDownTimestamp', nowTimestamp + Number(secNum.value))
+		}
+	}
+
+	// 开始倒计时
+	const start = () => {
+		// 防止快速点击获取验证码的按钮而导致内部产生多个定时器导致混乱
+		if (timer) {
+			clearInterval(timer)
+			timer = null
+		}
+		emit('start')
+		canGetCode.value = false
+		// 这里放这句，是为了一开始时就提示，否则要等setInterval的1秒后才会有提示
+		changeEvent(changeTextValue.value.replace(/x|X/, String(secNum.value)))
+		timer = setInterval(() => {
+			secNum.value -= 1
+			if (secNum.value > 0) {
+				// 用当前倒计时的秒数替换提示字符串中的"x"字母
+				changeEvent(changeTextValue.value.replace(/x|X/, String(secNum.value)))
+			} else {
+				clearInterval(timer)
+				timer = null
+				changeEvent(endTextValue.value)
+				secNum.value = p.seconds
+				emit('end')
+				canGetCode.value = true
+			}
+		}, 1000)
+		setTimeToStorage()
+	}
+
+	// 重置，可以让用户再次获取验证码
+	const reset = () => {
+		canGetCode.value = true
+		if (timer) {
+			clearInterval(timer)
+			timer = null
+		}
+		secNum.value = p.seconds
+		changeEvent(endTextValue.value)
+	}
+
+	const checkKeepRunning = () => {
+		// 获取上一次退出页面(H5还包括刷新)时的时间戳，如果没有上次的保存，此值可能为空
+		const lastTimestamp = Number(uni.getStorageSync(p.uniqueKey + '_$uCountDownTimestamp'))
+		if (!lastTimestamp) {
+			changeEvent(startTextValue.value)
+			return
+		}
+		// 当前秒的时间戳
+		const nowTimestamp = Math.floor(+new Date() / 1000)
+		// 判断当前的时间戳，是否小于上一次的本该按设定结束，却提前结束的时间戳
+		if (p.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) {
+			// 剩余尚未执行完的倒计秒数
+			secNum.value = lastTimestamp - nowTimestamp
+			// 清除本地保存的变量
+			uni.removeStorageSync(p.uniqueKey + '_$uCountDownTimestamp')
+			// 开始倒计时
+			start()
+		} else {
+			// 如果不存在需要继续上一次的倒计时，执行正常的逻辑
+			changeEvent(startTextValue.value)
+		}
+	}
+
+	watch(
+		() => p.seconds,
+		(n: any) => {
+			secNum.value = n
+		},
+		{ immediate: true }
+	)
+
+	onMounted(() => {
+		checkKeepRunning()
+	})
+
+	onUnmounted(() => {
+		setTimeToStorage()
+		clearInterval(timer)
+		timer = null
+	})
+
+	defineExpose({
+		start,
+		reset,
+		// 父级（merchant login/forgot/change-password）通过 ref 读取 canGetCode 控制按钮 disabled/文案
+		canGetCode
+	})
+</script>

package/components/uv-dialog/props.ts

@@ -0,0 +1,56 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  modelValue: { type: Boolean, default: false },
+  mode: { type: String, default: 'center' },
+  size: { type: String, default: 'normal' },
+  title: { type: String, default: '' },
+  content: { type: String, default: '' },
+  showHeader: { type: Boolean, default: true },
+  showTitle: { type: Boolean, default: true },
+  showContent: { type: Boolean, default: true },
+  showFooter: { type: Boolean, default: true },
+  showCancelButton: { type: Boolean, default: true },
+  showConfirmButton: { type: Boolean, default: true },
+  titleAlign: { type: String, default: 'center' },
+  titleBold: { type: Boolean, default: true },
+  align: { type: String, default: 'left' },
+  width: { type: [String, Number], default: 325 },
+  cancelText: { type: String, default: '' },
+  confirmText: { type: String, default: '' },
+  headerBorder: { type: Boolean, default: false },
+  footerBorder: { type: Boolean, default: false },
+  closeOnConfirm: { type: Boolean, default: true },
+  closeOnCancel: { type: Boolean, default: true },
+  cancelProps: { type: Object, default: () => ({}) },
+  confirmProps: { type: Object, default: () => ({}) },
+  buttonProps: { type: Object, default: () => ({}) },
+  headerStyle: { type: Object, default: () => ({}) },
+  titleStyle: { type: Object, default: () => ({}) },
+  footerStyle: { type: Object, default: () => ({}) },
+  contentStyle: { type: Object, default: () => ({}) },
+  scrollStyle: { type: Object, default: () => ({}) },
+  customStyle: { type: [Object, String], default: () => ({}) },
+  customClass: { type: String, default: '' },
+  // 透传 uv-popup
+  duration: { type: [String, Number], default: 300 },
+  overlay: { type: Boolean, default: true },
+  overlayOpacity: { type: [Number, String], default: 0.4 },
+  overlayStyle: { type: [Object, String], default: '' },
+  closeOnClickOverlay: { type: Boolean, default: true },
+  zIndex: { type: [Number, String], default: 10075 },
+  closeable: { type: Boolean, default: false },
+  closeIconPos: { type: String, default: 'top-right' },
+  closeIconColor: { type: String, default: '#909399' },
+  closeIconSize: { type: [String, Number], default: 18 },
+  bgColor: { type: String, default: '#ffffff' },
+  round: { type: [Number, String], default: 8 },
+  zoom: { type: Boolean, default: true },
+  safeAreaInsetBottom: { type: Boolean, default: true },
+
+  ...config.props.dialog,
+};
+
+export default props;

package/components/uv-dialog/uv-dialog.vue

@@ -0,0 +1,492 @@
+<template>
+	<uv-popup
+		ref="popupRef"
+		:mode="cfg.mode"
+		:duration="Number(cfg.duration)"
+		:z-index="cfg.zIndex"
+		:bg-color="cfg.bgColor"
+		:overlay="cfg.overlay"
+		:overlay-opacity="cfg.overlayOpacity"
+		:overlay-style="cfg.overlayStyle"
+		:close-on-click-overlay="cfg.closeOnClickOverlay"
+		:closeable="cfg.closeable"
+		:close-icon-pos="cfg.closeIconPos"
+		:close-icon-color="cfg.closeIconColor"
+		:close-icon-size="cfg.closeIconSize"
+		:zoom="cfg.zoom"
+		:round="cfg.round"
+		:safe-area-inset-bottom="cfg.safeAreaInsetBottom && cfg.mode === 'bottom'"
+		@change="onPopupChange"
+		@close="onPopupClose"
+	>
+		<view class="uv-dialog" :class="[p.customClass]" :style="[dialogStyle]">
+			<slot v-if="cfg.showHeader" name="header">
+				<view class="uv-dialog__header" :class="[headerClass]" :style="[headerStyleCom]">
+					<text
+						v-if="cfg.showTitle"
+						class="uv-dialog__title"
+						:class="[cfg.titleBold ? 'uv-dialog__title--bold' : '']"
+						:style="[titleStyleCom]"
+					>{{ titleText }}</text>
+				</view>
+			</slot>
+			<slot v-if="cfg.showContent" name="content">
+				<scroll-view
+					<!-- #ifdef UNI-APP-X -->
+					direction="vertical"
+					<!-- #endif -->
+					<!-- #ifndef UNI-APP-X -->
+					scroll-y="true"
+					<!-- #endif -->
+					class="uv-dialog__scroll"
+					:style="[scrollStyleCom]"
+				>
+					<view class="uv-dialog__content" :class="[contentClass]" :style="[contentStyleCom]">
+						<slot>
+							<text class="uv-dialog__content-text" :style="[contentTextStyle]">{{ cfg.content }}</text>
+						</slot>
+					</view>
+				</scroll-view>
+			</slot>
+			<slot v-if="cfg.showFooter" name="footer">
+				<view
+					v-if="showCancelBtn || showConfirmBtn"
+					class="uv-dialog__footer"
+					:class="[cfg.footerBorder ? 'uv-dialog__footer--border' : '']"
+					:style="[footerStyleCom]"
+				>
+					<view v-if="showCancelBtn" class="uv-dialog__footer-btn">
+						<uv-button
+							:text="cancelTextValue"
+							:type="cancelButton.type"
+							:size="cancelButton.size"
+							:shape="cancelButton.shape"
+							:plain="cancelButton.plain"
+							:hairline="cancelButton.hairline"
+							:disabled="cancelButton.disabled"
+							:loading="cancelButton.loading"
+							:loading-mode="cancelButton.loadingMode"
+							:custom-style="cancelButton.customStyle"
+							@click="onCancel"
+						/>
+					</view>
+					<view v-if="showCancelBtn && showConfirmBtn" class="uv-dialog__footer-gap" :style="[gapStyle]"></view>
+					<view v-if="showConfirmBtn" class="uv-dialog__footer-btn">
+						<uv-button
+							:text="confirmTextValue"
+							:type="confirmButton.type"
+							:size="confirmButton.size"
+							:shape="confirmButton.shape"
+							:plain="confirmButton.plain"
+							:hairline="confirmButton.hairline"
+							:disabled="confirmButton.disabled"
+							:loading="confirmButton.loading"
+							:loading-mode="confirmButton.loadingMode"
+							:custom-style="confirmButton.customStyle"
+							@click="onConfirm"
+						/>
+					</view>
+				</view>
+			</slot>
+		</view>
+	</uv-popup>
+</template>
+
+<script setup lang="ts">
+	import { computed, nextTick, onMounted, ref, watch } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+	import { useI18n } from '../../hooks'
+
+	defineOptions({
+		name: 'uv-dialog',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * Dialog 业务对话框
+	 * @description 基于 uv-popup 的业务对话框：标题/内容/底部取消确认/关闭/确认回调，支持 ref.open() 返回 Promise；
+	 * 标题与按钮内置文案支持 i18n（内置 zh-Hans / en，可通过 createI18n messages 覆盖 uv.dialog.*）
+	 * @tutorial https://www.uvui.cn/components/popup.html
+	 * @property {Boolean} modelValue 是否显示（v-model）
+	 * @property {String} mode 弹出方式，默认 center
+	 * @property {String} size 尺寸，mini/normal/large
+	 * @property {String} title 标题，默认 ''（使用内置文案「提示」）
+	 * @property {String} content 内容文本
+	 * @property {Boolean} showHeader 是否显示头部
+	 * @property {Boolean} showTitle 是否显示标题
+	 * @property {Boolean} showContent 是否显示内容
+	 * @property {Boolean} showFooter 是否显示底部
+	 * @property {Boolean} showCancelButton 是否显示取消按钮，默认 true（隐藏按钮请用它，不要传 false 文案）
+	 * @property {Boolean} showConfirmButton 是否显示确认按钮，默认 true（隐藏按钮请用它，不要传 false 文案）
+	 * @property {String} titleAlign 标题对齐，left/center/right/between/around
+	 * @property {Boolean} titleBold 标题加粗
+	 * @property {String} align 内容对齐，left/center/right
+	 * @property {String | Number} width center 模式宽度，默认 325
+	 * @property {String} cancelText 取消文案，默认 ''（使用内置「取消」）
+	 * @property {String} confirmText 确认文案，默认 ''（使用内置「确定」）
+	 * @property {Boolean} headerBorder 头部下边框
+	 * @property {Boolean} footerBorder 底部上边框
+	 * @property {Boolean} closeOnConfirm 确认后是否自动关闭
+	 * @property {Boolean} closeOnCancel 取消后是否自动关闭
+	 * @property {Object} cancelProps 取消按钮 props 覆盖
+	 * @property {Object} confirmProps 确认按钮 props 覆盖
+	 * @property {Object} buttonProps 底部按钮公共 props
+	 * @property {Object} headerStyle 头部样式
+	 * @property {Object} titleStyle 标题样式
+	 * @property {Object} footerStyle 底部样式
+	 * @property {Object} contentStyle 内容区样式
+	 * @property {Object} scrollStyle 滚动区样式
+	 * @property {Object} customStyle 最外层样式
+	 * @property {String} customClass 最外层 class
+	 * @event {Function} open 对话框打开
+	 * @event {Function} close 对话框关闭
+	 * @event {Function} confirm 点击确认
+	 * @event {Function} cancel 点击取消
+	 * @event {Function} change 弹层状态变化
+	 */
+	const p = defineProps(props)
+
+	const emit = defineEmits(['update:modelValue', 'open', 'close', 'confirm', 'cancel', 'change'])
+
+	interface DialogMetrics {
+		titleSize: number
+		contentSize: number
+		lineHeight: number
+		padding: number
+		gap: number
+	}
+
+	const sizeMap: Record<string, DialogMetrics> = {
+		mini: { titleSize: 14, contentSize: 12, lineHeight: 18, padding: 12, gap: 8 },
+		normal: { titleSize: 17, contentSize: 14, lineHeight: 20, padding: 16, gap: 12 },
+		large: { titleSize: 19, contentSize: 16, lineHeight: 24, padding: 20, gap: 16 }
+	}
+
+	const popupRef = ref<any>(null)
+	const visible = ref(false)
+	const overrides = ref<Record<string, any>>({})
+	let resolveFn: ((value: any) => void) | null = null
+	let pendingAction: 'confirm' | 'cancel' | 'close' = 'close'
+
+	const cfg = computed<Record<string, any>>(() => Object.assign({}, p, overrides.value))
+	const metrics = computed<DialogMetrics>(() => sizeMap[String(cfg.value.size)] || sizeMap.normal)
+
+	// 内置文案：props / open(opts) 覆盖优先，否则使用内置 i18n（locales/ 的 uv.dialog.*）
+	const { t } = useI18n({ useScope: 'global' })
+	const titleText = computed<string>(() => String(cfg.value.title || '') || t('uv.dialog.title'))
+	const cancelTextValue = computed<string>(() => String(cfg.value.cancelText || '') || t('uv.dialog.cancel'))
+	const confirmTextValue = computed<string>(() => String(cfg.value.confirmText || '') || t('uv.dialog.confirm'))
+	// 按钮显隐只由 show*Button 控制（文案只能是 String，不能传 false 隐藏按钮）
+	const showCancelBtn = computed(() => Boolean(cfg.value.showCancelButton))
+	const showConfirmBtn = computed(() => Boolean(cfg.value.showConfirmButton))
+
+	const addUnit = (value: string | number) => $uv.addUnit(value)
+
+	const titleAlignValue = computed(() => {
+		const map: Record<string, string> = {
+			left: 'flex-start',
+			center: 'center',
+			right: 'flex-end',
+			between: 'space-between',
+			around: 'space-around'
+		}
+		return map[String(cfg.value.titleAlign)] || 'center'
+	})
+
+	const headerClass = computed(() => ['uv-dialog__header--' + (cfg.value.titleAlign || 'center')])
+	const contentClass = computed(() => ['uv-dialog__content--' + (cfg.value.align || 'left')])
+
+	const dialogStyle = computed(() => {
+		const style: any = {}
+		if (cfg.value.mode === 'center') {
+			style.width = addUnit(cfg.value.width)
+		}
+		return $uv.deepMerge(style, $uv.addStyle(cfg.value.customStyle))
+	})
+
+	const headerStyleCom = computed(() => {
+		const m = metrics.value
+		const style: any = {
+			paddingTop: m.padding + 'px',
+			paddingLeft: m.padding + 'px',
+			paddingRight: m.padding + 'px',
+			paddingBottom: Math.round(m.padding / 2) + 'px',
+			justifyContent: titleAlignValue.value
+		}
+		if (cfg.value.headerBorder) {
+			style.borderBottomWidth = '1px'
+			style.borderBottomStyle = 'solid'
+			style.borderBottomColor = '#f2f3f5'
+		}
+		return $uv.deepMerge(style, $uv.addStyle(cfg.value.headerStyle))
+	})
+
+	const titleStyleCom = computed(() => {
+		const m = metrics.value
+		const style: any = {
+			fontSize: m.titleSize + 'px',
+			lineHeight: m.titleSize + 8 + 'px',
+			color: '#303133'
+		}
+		return $uv.deepMerge(style, $uv.addStyle(cfg.value.titleStyle))
+	})
+
+	const scrollStyleCom = computed(() => {
+		const style: any = {}
+		// #ifdef WEB || H5
+		style.maxHeight = '60vh'
+		// #endif
+		// #ifndef WEB || H5
+		try {
+			const info = $uv.sys()
+			style.maxHeight = Math.floor(Number(info.windowHeight || 800) * 0.6) + 'px'
+		} catch (e) {
+			style.maxHeight = '500px'
+		}
+		// #endif
+		return $uv.deepMerge(style, $uv.addStyle(cfg.value.scrollStyle))
+	})
+
+	const contentStyleCom = computed(() => {
+		const m = metrics.value
+		const style: any = {
+			paddingLeft: m.padding + 'px',
+			paddingRight: m.padding + 'px',
+			paddingTop: Math.round(m.padding / 2) + 'px',
+			paddingBottom: m.padding + 'px'
+		}
+		const align = String(cfg.value.align || 'left')
+		const textAlign = align === 'center' ? 'center' : align === 'right' ? 'right' : 'left'
+		style.textAlign = textAlign
+		style.alignItems = textAlign === 'center' ? 'center' : textAlign === 'right' ? 'flex-end' : 'flex-start'
+		return $uv.deepMerge(style, $uv.addStyle(cfg.value.contentStyle))
+	})
+
+	const contentTextStyle = computed(() => {
+		const m = metrics.value
+		const style: any = {
+			fontSize: m.contentSize + 'px',
+			lineHeight: m.lineHeight + 'px',
+			color: '#606266'
+		}
+		const align = String(cfg.value.align || 'left')
+		style.textAlign = align === 'center' ? 'center' : align === 'right' ? 'right' : 'left'
+		return $uv.deepMerge(style, $uv.addStyle(cfg.value.contentStyle))
+	})
+
+	const footerStyleCom = computed(() => {
+		const m = metrics.value
+		const style: any = {
+			paddingLeft: m.padding + 'px',
+			paddingRight: m.padding + 'px',
+			paddingBottom: m.padding + 'px',
+			paddingTop: m.padding + 'px'
+		}
+		if (cfg.value.footerBorder) {
+			style.borderTopWidth = '1px'
+			style.borderTopStyle = 'solid'
+			style.borderTopColor = '#f2f3f5'
+		}
+		return $uv.deepMerge(style, $uv.addStyle(cfg.value.footerStyle))
+	})
+
+	const gapStyle = computed(() => ({ width: metrics.value.gap + 'px' }))
+
+	const resolveButtonProps = (specific: Record<string, any>, isCancel: boolean) => {
+		const base: any = cfg.value.buttonProps || {}
+		const extra: any = specific || {}
+		return {
+			type: extra.type !== undefined ? extra.type : base.type !== undefined ? base.type : 'primary',
+			size: extra.size !== undefined ? extra.size : base.size !== undefined ? base.size : cfg.value.size,
+			shape: extra.shape !== undefined ? extra.shape : base.shape !== undefined ? base.shape : 'square',
+			plain: extra.plain !== undefined ? extra.plain : base.plain !== undefined ? base.plain : isCancel,
+			hairline: extra.hairline !== undefined ? extra.hairline : base.hairline !== undefined ? base.hairline : true,
+			disabled: extra.disabled !== undefined ? extra.disabled : base.disabled !== undefined ? base.disabled : false,
+			loading: extra.loading !== undefined ? extra.loading : base.loading !== undefined ? base.loading : false,
+			loadingMode:
+				extra.loadingMode !== undefined
+					? extra.loadingMode
+					: base.loadingMode !== undefined
+						? base.loadingMode
+						: 'spinner',
+			customStyle: Object.assign({}, base.customStyle || {}, extra.customStyle || {})
+		}
+	}
+
+	const cancelButton = computed(() => resolveButtonProps(cfg.value.cancelProps, true))
+	const confirmButton = computed(() => resolveButtonProps(cfg.value.confirmProps, false))
+
+	const finish = (payload: Record<string, any>) => {
+		if (resolveFn) {
+			resolveFn(payload)
+			resolveFn = null
+		}
+	}
+
+	const doOpen = (opts: Record<string, any> = {}) => {
+		overrides.value = Object.assign({}, opts)
+		if (visible.value) return
+		visible.value = true
+		emit('open')
+		emit('update:modelValue', true)
+		nextTick(() => {
+			popupRef.value && popupRef.value.open()
+		})
+	}
+
+	const doClose = () => {
+		pendingAction = 'close'
+		if (popupRef.value) {
+			popupRef.value.close()
+		} else {
+			visible.value = false
+			emit('update:modelValue', false)
+			finish({ close: true })
+		}
+	}
+
+	const open = (opts: Record<string, any> = {}) => {
+		return new Promise<Record<string, any>>((resolve) => {
+			resolveFn = resolve
+			doOpen(opts)
+		})
+	}
+
+	const close = () => {
+		doClose()
+	}
+
+	const confirm = () => {
+		emit('confirm')
+		pendingAction = 'confirm'
+		if (cfg.value.closeOnConfirm) {
+			doCloseByAction()
+		} else {
+			finish({ confirm: true })
+		}
+	}
+
+	const cancel = () => {
+		emit('cancel')
+		pendingAction = 'cancel'
+		if (cfg.value.closeOnCancel) {
+			doCloseByAction()
+		} else {
+			finish({ cancel: true })
+		}
+	}
+
+	// confirm/cancel 触发关闭时保留 pendingAction，避免被 doClose 重置为 close
+	const doCloseByAction = () => {
+		if (popupRef.value) {
+			popupRef.value.close()
+		} else {
+			onPopupClose()
+		}
+	}
+
+	const onConfirm = () => {
+		confirm()
+	}
+
+	const onCancel = () => {
+		cancel()
+	}
+
+	const onPopupChange = (e: any) => {
+		emit('change', e)
+	}
+
+	const onPopupClose = () => {
+		const wasVisible = visible.value
+		visible.value = false
+		emit('update:modelValue', false)
+		overrides.value = {}
+		if (wasVisible) emit('close')
+		const action = pendingAction
+		pendingAction = 'close'
+		if (action === 'confirm') finish({ confirm: true })
+		else if (action === 'cancel') finish({ cancel: true })
+		else finish({ close: true })
+	}
+
+	watch(
+		() => p.modelValue,
+		(value) => {
+			if (value) {
+				if (!visible.value) doOpen()
+			} else {
+				if (visible.value) doClose()
+			}
+		}
+	)
+
+	onMounted(() => {
+		if (p.modelValue) doOpen()
+	})
+
+	defineExpose({
+		open,
+		close,
+		confirm,
+		cancel
+	})
+</script>
+
+<style lang="scss">
+	@import '../../styles/color.scss';
+
+	.uv-dialog {
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uv-dialog__header {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.uv-dialog__title--bold {
+		font-weight: bold;
+	}
+
+	.uv-dialog__scroll {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uv-dialog__content {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uv-dialog__footer {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.uv-dialog__footer-btn {
+		flex: 1;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+</style>