@didaoktv/didaoui-uniapp 1.3.3 → 1.3.5

package/README.md

@@ -1,4 +1,4 @@
-# @didaoktv/didaoui-uniapp
+# @didaoktv/didaoui-uniapp
 
 专为 KTV 场景打造的 UniApp 组件库。
 
@@ -6,7 +6,7 @@
 
 - **帝王级配色** — 帝王金 `#F5A623` + 皇家蓝 `#2D4BA0` 双主色，暗色主题默认
 - **玻璃拟态设计** — 多层级玻璃拟态效果，打造高端夜店沉浸感
-- **89 个精心打磨的组件** — 覆盖表单、导航、布局卡片、数据展示、浮层反馈、交互、画布七大类，含 KTV 业务组件（房态卡、账单明细、工单卡、日历、二维码）
+- **90 个精心打磨的组件** — 覆盖表单、导航、布局卡片、数据展示、浮层反馈、交互、画布七大类，含 KTV 业务组件（房态卡、账单明细、工单卡、日历、二维码）
 - **Vue3 + TypeScript** — 完整类型定义，Composition API
 - **多端兼容** — H5 / 微信小程序 / 抖音小程序 / Android / iOS
 
@@ -54,7 +54,7 @@ import { DdButton, DdInput } from '@didaoktv/didaoui-uniapp'
 | 导航    | 12 | Navigation, TopNavbar, SwipeableTab, SegmentedTab, Drawer, Tabbar, TabbarItem, Backtop, Collapse, CollapseItem, DropdownMenu, DropdownItem    |
 | 布局/卡片 | 8  | Card, RoomCard, FeatureGrid, Sticky, BillDetail, WorkorderCard, Calendar, Qrcode                                                              |
 | 数据展示  | 24 | Tag, StatCard, ChampionCard, Avatar, AvatarGroup, Badge, ListCell, Cell, CellGroup, CountDown, Divider, Image, Progress, Skeleton, EmptyState, Step, Steps, Text, Link, Copy, Album, Coupon, Parse, Markdown |
-| 浮层反馈  | 10 | Modal, ActionSheet, Toast, Alert, Loading, Dialog, Overlay, Popup, Popover, PopoverItem                                                       |
+| 浮层反馈  | 11 | Modal, ActionSheet, Toast, Alert, Loading, Dialog, Overlay, Popup, Popover, PopoverItem, Portal                                                   |
 | 交互    | 5  | SwipeAction, Swipe, SwipeItem, PullRefresh, Loadmore                                                                                         |
 | 小程序专属 | 2  | CapsuleButton, MiniProgramNavbar                                                                                                             |
 | 画布    | 5  | Canvas, Barcode, Cropper, Signature, Poster                                                                                                  |

package/components/dd-action-sheet/dd-action-sheet.vue

@@ -1,4 +1,5 @@
 <template>
+  <dd-portal>
   <view class="dd-action-sheet">
     <view
       class="dd-action-sheet__mask"
@@ -33,9 +34,11 @@
       <view class="dd-action-sheet__safe-bottom"></view>
     </view>
   </view>
+  </dd-portal>
 </template>
 
 <script setup lang="ts">
+import DdPortal from '../dd-portal/dd-portal.vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
 
 interface ActionItem {

package/components/dd-alert/dd-alert.vue

@@ -1,4 +1,5 @@
 <template>
+  <dd-portal>
   <view class="dd-alert">
     <view
       class="dd-alert__mask"
@@ -21,10 +22,12 @@
       </view>
     </view>
   </view>
+  </dd-portal>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import DdPortal from '../dd-portal/dd-portal.vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
 
 type AlertType = 'info' | 'success' | 'warning' | 'error' | 'confirm'

package/components/dd-car-keyboard/carPlate.ts

@@ -0,0 +1,47 @@
+// 车牌号键盘纯逻辑：键位布局、按位锁键、光标推进（供 dd-car-keyboard.vue 消费）
+export const MAX_LEN = 8
+
+export interface KeyItem {
+	label: string
+	locked: boolean
+}
+
+// 省份行（参考实现末行含字母 W 为笔误，此处修正为 港/澳）
+export const PROVINCE_ROWS: string[][] = [
+	['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],
+	['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
+	['粤', '桂', '琼', '渝', '川', '贵', '云', '藏'],
+	['陕', '甘', '青', '宁', '新', '港', '澳']
+]
+
+const DIGIT_ROW = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
+const EN_ROW2_DEFAULT = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '挂']
+// 第 6 位（新能源序号位）去掉 O，追加 学/挂
+const EN_ROW2_ENERGY = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P', '学', '挂']
+const EN_ROW3 = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警']
+const EN_ROW4 = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港', '澳']
+
+// 按位锁键：1 位禁数字与特殊字；2-5/7 位禁 O 与特殊字；6 位（新能源）仅禁 O
+export function getLockedKeys(pos: number): string[] {
+	if (pos <= 0) return []
+	if (pos === 1) return [...DIGIT_ROW, '学', '挂', '警', '港', '澳']
+	if (pos === MAX_LEN - 2) return ['O']
+	return ['O', '学', '挂', '警', '港', '澳']
+}
+
+// pos=0 返回省份键盘，其余位返回字母数字键盘（带锁定态）
+export function getKeyRows(pos: number): KeyItem[][] {
+	if (pos === 0) {
+		return PROVINCE_ROWS.map((row) => row.map((label) => ({ label, locked: false })))
+	}
+	const row2 = pos === MAX_LEN - 2 ? EN_ROW2_ENERGY : EN_ROW2_DEFAULT
+	const locked = getLockedKeys(pos)
+	return [DIGIT_ROW, row2, EN_ROW3, EN_ROW4].map((row) =>
+		row.map((label) => ({ label, locked: locked.includes(label) }))
+	)
+}
+
+// 填完第 7 位后收起键盘（返回 -1），新能源位（第 8 位）由用户主动点选
+export function nextPos(pos: number): number {
+	return pos < MAX_LEN - 2 ? pos + 1 : -1
+}

package/components/dd-car-keyboard/dd-car-keyboard.vue

@@ -1,315 +1,277 @@
 <template>
-	<view
-		class="dd-keyboard"
-		@touchmove.stop.prevent="noop"
-	>
-		<view
-			v-for="(group, i) in abc ? engKeyBoardList : areaList"
-			:key="i"
-			class="dd-keyboard__button"
-			:index="i"
-			:class="[i + 1 === 4 && 'dd-keyboard__button--center']"
-		>
+	<view class="dd-car-keyboard" :class="customClass" :style="customStyle">
+		<!-- 车牌格子：7 位普通 + 第 8 位新能源（绿框） -->
+		<view class="dd-car-keyboard__boxes">
 			<view
-				v-if="i === 3"
-				class="dd-keyboard__button__inner-wrapper"
+				v-for="(char, index) in cells"
+				:key="index"
+				class="dd-car-keyboard__box"
+				:class="[
+					active === index && 'dd-car-keyboard__box--active',
+					index === 7 && 'dd-car-keyboard__box--energy'
+				]"
+				@tap="onBoxTap(index)"
 			>
 				<view
-					class="dd-keyboard__button__inner-wrapper__left"
-					hover-class="dd-keyboard-hover"
-					:hover-stay-time="200"
-					@tap="changeCarInputMode"
+					v-if="active === index"
+					class="dd-car-keyboard__box-line"
+				></view>
+				<view
+					v-if="index === 7"
+					class="dd-car-keyboard__badge"
 				>
-					<text
-						class="dd-keyboard__button__inner-wrapper__left__lang"
-						:class="[!abc && 'dd-keyboard__button__inner-wrapper__left__lang--active']"
-					>中</text>
-					<text class="dd-keyboard__button__inner-wrapper__left__line">/</text>
-					<text
-						class="dd-keyboard__button__inner-wrapper__left__lang"
-						:class="[abc && 'dd-keyboard__button__inner-wrapper__left__lang--active']"
-					>英</text>
+					<text class="dd-car-keyboard__badge-text">新能源</text>
 				</view>
+				<text class="dd-car-keyboard__box-text">{{ char }}</text>
+			</view>
+		</view>
+
+		<!-- 键盘弹层：0 位省份键盘，其余位字母数字键盘（按位锁键） -->
+		<view
+			v-if="active >= 0"
+			class="dd-car-keyboard__panel"
+			@touchmove.stop.prevent="noop"
+		>
+			<view class="dd-car-keyboard__close" @tap="closeKeyboard">
+				<text class="dd-car-keyboard__close-text">关闭</text>
 			</view>
 			<view
-				class="dd-keyboard__button__inner-wrapper"
-				v-for="(item, j) in group"
-				:key="j"
+				v-for="(row, rowIndex) in keyRows"
+				:key="rowIndex"
+				class="dd-car-keyboard__row"
 			>
 				<view
-					class="dd-keyboard__button__inner-wrapper__inner"
-					:hover-stay-time="200"
-					@tap="carInputClick(i, j)"
-					hover-class="dd-keyboard-hover"
+					v-for="item in row"
+					:key="item.label"
+					class="dd-car-keyboard__key"
+					:class="[item.locked && 'dd-car-keyboard__key--lock']"
+					hover-class="dd-car-keyboard__key--hover"
+					:hover-stay-time="100"
+					@tap="onKeyTap(item)"
 				>
-					<text class="dd-keyboard__button__inner-wrapper__inner__text">{{ item }}</text>
+					<text class="dd-car-keyboard__key-text">{{ item.label }}</text>
 				</view>
-			</view>
-			<view
-				v-if="i === 3"
-				@touchstart="backspaceClick"
-				@touchend="clearTimer"
-				class="dd-keyboard__button__inner-wrapper"
-			>
 				<view
-					class="dd-keyboard__button__inner-wrapper__right"
-					hover-class="dd-keyboard-hover"
-					:hover-stay-time="200"
+					v-if="rowIndex === 3"
+					class="dd-car-keyboard__key dd-car-keyboard__key--del"
+					hover-class="dd-car-keyboard__key--hover"
+					:hover-stay-time="100"
+					@tap="onBackspaceTap"
 				>
-					<dd-icon
-					size="28"
-					name="backspace"
-				></dd-icon>
+					<dd-icon size="22" name="backspace"></dd-icon>
 				</view>
 			</view>
 		</view>
 	</view>
 </template>
 
-<script>
-	import { props } from './props';
-	import { mpMixin } from '../../libs/mixin/mpMixin';
-	import { mixin } from '../../libs/mixin/mixin';
-	import { randomArray, sleep } from '../../libs/function/index';
-	/**
-	 * keyboard 键盘组件
-	 * @description 自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
-	 * @property {Boolean} random 是否打乱键盘的顺序
-	 * @event {Function} change 点击键盘触发
-	 * @event {Function} backspace 点击退格键触发
-	 * @example <dd-keyboard ref="carKeyboard" mode="car" v-model="show"></dd-keyboard>
-	 */
-	export default {
-		name: "dd-car-keyboard",
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
-				abc: false
-			};
-		},
-		computed: {
-			areaList() {
-				let data = [
-					'京',
-					'沪',
-					'粤',
-					'津',
-					'冀',
-					'豫',
-					'云',
-					'辽',
-					'黑',
-					'湘',
-					'皖',
-					'鲁',
-					'苏',
-					'浙',
-					'赣',
-					'鄂',
-					'桂',
-					'甘',
-					'晋',
-					'陕',
-					'蒙',
-					'吉',
-					'闽',
-					'贵',
-					'渝',
-					'川',
-					'青',
-					'琼',
-					'宁',
-					'挂',
-					'藏',
-					'港',
-					'澳',
-					'新',
-					'使',
-					'学'
-				];
-				let tmp = [];
-				// 打乱顺序
-				if (this.random) data = randomArray(data);
-				// 切割成二维数组
-				tmp[0] = data.slice(0, 10);
-				tmp[1] = data.slice(10, 20);
-				tmp[2] = data.slice(20, 30);
-				tmp[3] = data.slice(30, 36);
-				return tmp;
-			},
-			engKeyBoardList() {
-				let data = [
-					1,
-					2,
-					3,
-					4,
-					5,
-					6,
-					7,
-					8,
-					9,
-					0,
-					'Q',
-					'W',
-					'E',
-					'R',
-					'T',
-					'Y',
-					'U',
-					'I',
-					'O',
-					'P',
-					'A',
-					'S',
-					'D',
-					'F',
-					'G',
-					'H',
-					'J',
-					'K',
-					'L',
-					'Z',
-					'X',
-					'C',
-					'V',
-					'B',
-					'N',
-					'M'
-				];
-				let tmp = [];
-				if (this.random) data = randomArray(data);
-				tmp[0] = data.slice(0, 10);
-				tmp[1] = data.slice(10, 20);
-				tmp[2] = data.slice(20, 30);
-				tmp[3] = data.slice(30, 36);
-				return tmp;
-			}
-		},
-		emits: ["change", "backspace"],
-		methods: {
-			// 点击键盘按钮
-			carInputClick(i, j) {
-				let value = '';
-				// 不同模式，获取不同数组的值
-				if (this.abc) value = this.engKeyBoardList[i][j];
-				else value = this.areaList[i][j];
-				// 如果允许自动切换，则将中文状态切换为英文
-				if (!this.abc && this.autoChange) sleep(200).then(() => this.abc = true)
-				this.$emit('change', value);
-			},
-			// 修改汽车牌键盘的输入模式，中文|英文
-			changeCarInputMode() {
-				this.abc = !this.abc;
-			},
-			// 点击退格键
-			backspaceClick() {
-				this.$emit('backspace');
-				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
-				this.timer = null;
-				this.timer = setInterval(() => {
-					this.$emit('backspace');
-				}, 250);
-			},
-			clearTimer() {
-				clearInterval(this.timer);
-				this.timer = null;
-			},
-		}
-	};
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+import { MAX_LEN, getKeyRows, nextPos, type KeyItem } from './carPlate'
+
+/**
+ * dd-car-keyboard 车牌号输入键盘
+ * 车牌格子 + 弹出键盘一体：0 位省份简称，其余位字母数字，按位锁键，末位为新能源（绿牌）位
+ * @property {String} modelValue 车牌号（v-model）
+ * @event {Function} update:modelValue 输入变化
+ * @event {Function} focus 键盘弹出
+ * @event {Function} blur 键盘收起
+ * @example <dd-car-keyboard v-model="plateNo" />
+ */
+
+interface Props {
+	modelValue?: string
+	customClass?: string
+	customStyle?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: '',
+	customClass: '',
+	customStyle: ''
+})
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', val: string): void
+	(e: 'focus', val: string): void
+	(e: 'blur', val: string): void
+}>()
+
+// 空位用空格占位（与退格逻辑配合：清当前位后停留在该位）
+const cells = ref<string[]>(Array(MAX_LEN).fill(' '))
+const active = ref(-1)
+
+// 键位布局/按位锁键纯逻辑见 ./carPlate
+const keyRows = computed(() => getKeyRows(active.value))
+
+// 外部 v-model 同步到格子（支持清空与部分更新）
+watch(
+	() => props.modelValue,
+	(val) => {
+		const list = (val || '').split('')
+		cells.value = Array.from({ length: MAX_LEN }, (_, i) => list[i] ?? ' ')
+	},
+	{ immediate: true }
+)
+
+const keyboardVisible = computed(() => active.value >= 0)
+watch(keyboardVisible, (visible) => {
+	if (visible) emit('focus', props.modelValue)
+	else emit('blur', props.modelValue)
+})
+
+function noop() {}
+
+function onBoxTap(index: number) {
+	active.value = index
+}
+
+function onKeyTap(item: KeyItem) {
+	if (item.locked || active.value < 0) return
+	cells.value[active.value] = item.label
+	active.value = nextPos(active.value)
+	emitValue()
+}
+
+function closeKeyboard() {
+	active.value = -1
+}
+
+function onBackspaceTap() {
+	if (active.value < 0) return
+	if (cells.value[active.value] === ' ' && active.value > 0) {
+		active.value--
+	}
+	cells.value[active.value] = ' '
+	emitValue()
+}
+
+function emitValue() {
+	emit('update:modelValue', cells.value.join('').trim())
+}
 </script>
 
 <style lang="scss" scoped>
+/* 头部固定引入；只消费 $dd-* token，样式值写 var(--dd-x, $dd-x) 兜底形式 */
 @import '../../scss/variables';
 @import '../../scss/dd-shared';
-	$dd-car-keyboard-background-color: var(--dd-bg-section, #{$dd-bg-section}) !default;
-	$dd-car-keyboard-padding:6px 0 6px !default;
-	$dd-car-keyboard-button-inner-width:64rpx !default;
-	$dd-car-keyboard-button-inner-background-color:var(--dd-surface-container-high, #{$dd-surface-container-high}) !default;
-	$dd-car-keyboard-button-height:80rpx !default;
-	$dd-car-keyboard-button-inner-box-shadow:0 1px 0px var(--dd-bg, #{$dd-bg}) !default;
-	$dd-car-keyboard-button-border-radius:4px !default;
-	$dd-car-keyboard-button-inner-margin:8rpx 5rpx !default;
-	$dd-car-keyboard-button-text-font-size:16px !default;
-	$dd-car-keyboard-button-text-color:var(--dd-text-primary, #{$dd-text-primary}) !default;
-	$dd-car-keyboard-center-inner-margin: 0 4rpx !default;
-	$dd-car-keyboard-special-button-width:134rpx !default;
-	$dd-car-keyboard-lang-font-size:16px !default;
-	$dd-car-keyboard-lang-color:var(--dd-text-primary, #{$dd-text-primary}) !default;
-	$dd-car-keyboard-active-color:var(--dd-primary-400, #{$dd-primary-400}) !default;
-	$dd-car-keyboard-line-font-size:15px !default;
-	$dd-car-keyboard-line-color:var(--dd-text-primary, #{$dd-text-primary}) !default;
-	$dd-car-keyboard-line-margin:0 1px !default;
-	$dd-car-keyboard-dd-keyboard-hover-background-color:var(--dd-surface-hover, #{$dd-surface-hover}) !default;
-
-	.dd-keyboard {
-		@include flex(column);
-		justify-content: space-around;
-		background-color: $dd-car-keyboard-background-color;
-		align-items: stretch;
-		padding: $dd-car-keyboard-padding;
-
-		&__button {
-			@include flex;
-			justify-content: center;
-			flex: 1;
-			/* #ifndef APP-NVUE */
-			/* #endif */
-
-			&__inner-wrapper {
-				box-shadow: $dd-car-keyboard-button-inner-box-shadow;
-				margin: $dd-car-keyboard-button-inner-margin;
-				border-radius: $dd-car-keyboard-button-border-radius;
-
-				&__inner {
-					@include flex;
-					justify-content: center;
-					align-items: center;
-					width: $dd-car-keyboard-button-inner-width;
-					background-color: $dd-car-keyboard-button-inner-background-color;
-					height: $dd-car-keyboard-button-height;
-					border-radius: $dd-car-keyboard-button-border-radius;
-
-					&__text {
-						font-size: $dd-car-keyboard-button-text-font-size;
-						color: $dd-car-keyboard-button-text-color;
-					}
-				}
-
-				&__left,
-				&__right {
-					border-radius: $dd-car-keyboard-button-border-radius;
-					width: $dd-car-keyboard-special-button-width;
-					height: $dd-car-keyboard-button-height;
-					background-color: $dd-car-keyboard-dd-keyboard-hover-background-color;
-					color: $dd-car-keyboard-button-text-color; // 退格图标 color=inherit，由此处控制
-					@include flex;
-					justify-content: center;
-					align-items: center;
-					box-shadow: $dd-car-keyboard-button-inner-box-shadow;
-				}
-
-				&__left {
-					&__line {
-						font-size: $dd-car-keyboard-line-font-size;
-						color: $dd-car-keyboard-line-color;
-						margin: $dd-car-keyboard-line-margin;
-					}
-
-					&__lang {
-						font-size: $dd-car-keyboard-lang-font-size;
-						color: $dd-car-keyboard-lang-color;
-
-						&--active {
-							color: $dd-car-keyboard-active-color;
-						}
-					}
-				}
-			}
+
+$dd-car-keyboard-gap: 8rpx !default;
+$dd-car-keyboard-box-height: 76rpx !default;
+$dd-car-keyboard-box-border: 1px solid var(--dd-border-default, #{$dd-border-default}) !default;
+$dd-car-keyboard-key-height: 76rpx !default;
+$dd-car-keyboard-panel-padding: 0 var(--dd-space-2, #{$dd-space-2}) var(--dd-space-2, #{$dd-space-2}) !default;
+
+.dd-car-keyboard {
+	&__boxes {
+		@include flex;
+		gap: $dd-car-keyboard-gap;
+	}
+
+	&__box {
+		@include flex;
+		position: relative;
+		justify-content: center;
+		align-items: center;
+		flex: 1;
+		height: $dd-car-keyboard-box-height;
+		border: $dd-car-keyboard-box-border;
+		border-radius: var(--dd-radius-md, #{$dd-radius-md});
+
+		&--active {
+			border-color: var(--dd-primary-400, #{$dd-primary-400});
+		}
+
+		&--energy {
+			border-color: var(--dd-success-500, #{$dd-success-500});
+		}
+	}
+
+	&__box-line {
+		position: absolute;
+		bottom: 6rpx;
+		left: 15%;
+		width: 70%;
+		height: 4rpx;
+		background-color: var(--dd-primary-400, #{$dd-primary-400});
+	}
+
+	&__box-text {
+		font-size: 17px;
+		color: var(--dd-text-primary, #{$dd-text-primary});
+	}
+
+	&__badge {
+		@include flex;
+		justify-content: center;
+		position: absolute;
+		top: -14rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		padding: 0 6rpx;
+		background-color: var(--dd-success-500, #{$dd-success-500});
+		border-radius: var(--dd-radius-sm, #{$dd-radius-sm});
+	}
+
+	&__badge-text {
+		font-size: 10px;
+		color: var(--dd-success-contrast, #{$dd-success-contrast});
+	}
+
+	&__panel {
+		position: fixed;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 10075; // ponytail: 取 libs/config/zIndex.js popup 值，模板内不能用表达式故字面量
+		background-color: var(--dd-bg-section, #{$dd-bg-section});
+		padding: $dd-car-keyboard-panel-padding;
+	}
+
+	&__close {
+		@include flex;
+		justify-content: flex-end;
+		padding: var(--dd-space-2, #{$dd-space-2}) 0;
+	}
+
+	&__close-text {
+		padding: 0 var(--dd-space-2, #{$dd-space-2});
+		font-size: 13.5px;
+		color: var(--dd-text-secondary, #{$dd-text-secondary});
+	}
+
+	&__row {
+		@include flex;
+		margin-top: var(--dd-space-2, #{$dd-space-2});
+		gap: $dd-car-keyboard-gap;
+	}
+
+	&__key {
+		@include flex;
+		justify-content: center;
+		align-items: center;
+		flex: 1;
+		height: $dd-car-keyboard-key-height;
+		background-color: var(--dd-surface-container-high, #{$dd-surface-container-high});
+		border-radius: var(--dd-radius-md, #{$dd-radius-md});
+
+		&--lock {
+			opacity: 0.35;
+		}
+
+		&--hover {
+			background-color: var(--dd-surface-hover, #{$dd-surface-hover});
+		}
+
+		&--del {
+			flex: 2;
+			color: var(--dd-text-primary, #{$dd-text-primary}); // 图标 color=inherit，由此处控制
 		}
 	}
 
-	.dd-keyboard-hover {
-		background-color: $dd-car-keyboard-dd-keyboard-hover-background-color;
+	&__key-text {
+		font-size: 16px;
+		color: var(--dd-text-primary, #{$dd-text-primary});
 	}
+}
 </style>

package/components/dd-date-picker/dd-date-picker.vue

@@ -1,4 +1,5 @@
 <template>
+  <dd-portal>
   <view class="dd-dp" :class="{ 'dd-dp--open': show }">
     <view class="dd-dp__mask" @click="onMaskClick"></view>
     <view class="dd-dp__sheet">
@@ -21,10 +22,12 @@
       </picker-view>
     </view>
   </view>
+  </dd-portal>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
+import DdPortal from '../dd-portal/dd-portal.vue'
 
 interface Props {
   show?: boolean

package/components/dd-dialog/dd-dialog.vue

@@ -1,15 +1,18 @@
 <template>
-  <view class="dd-dialog">
-    <view
-      class="dd-dialog__mask"
-      :class="{ 'dd-dialog__mask--show': modelValue }"
-      @click="onOverlayClick"
-    ></view>
-    <view
-      class="dd-dialog__card"
-      :class="[{ 'dd-dialog__card--show': modelValue }, `dd-dialog__card--${theme}`]"
-      :style="{ width: widthValue, maxWidth: '92vw' }"
-    >
+  <!-- 内容经 portal 提升到页面根节点：规避 transform 祖先劫持 fixed 定位（详见 dd-portal 组件） -->
+  <dd-portal>
+    <view class="dd-dialog">
+      <view
+        class="dd-dialog__mask"
+        :class="{ 'dd-dialog__mask--show': modelValue }"
+        :style="{ zIndex: maskZIndex }"
+        @click="onOverlayClick"
+      ></view>
+      <view
+        class="dd-dialog__card"
+        :class="[{ 'dd-dialog__card--show': modelValue }, `dd-dialog__card--${theme}`]"
+        :style="{ width: widthValue, maxWidth: '92vw', zIndex: cardZIndex }"
+      >
       <view v-if="title" class="dd-dialog__header">
         <text class="dd-dialog__title">{{ title }}</text>
       </view>
@@ -55,10 +58,17 @@
       </view>
     </view>
   </view>
+  </dd-portal>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import zIndexConfig from '../../libs/config/zIndex.js'
+import DdPortal from '../dd-portal/dd-portal.vue'
+
+/* z-index 统一取 libs/config/zIndex.js（弹窗需压在 popup 面板之上、toast 之下） */
+const maskZIndex = zIndexConfig.dialogMask
+const cardZIndex = zIndexConfig.dialog
 
 interface Props {
   modelValue?: boolean
@@ -148,7 +158,7 @@ function onCancel() {
     background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     opacity: 0;
     visibility: hidden;
-    z-index: 2000;
+    /* z-index 由 script 注入（libs/config/zIndex.js） */
     @include dd-transition(opacity 0.3s ease, visibility 0.3s);
 
     &--show {
@@ -164,7 +174,6 @@ function onCancel() {
     transform: translate(-50%, -50%) scale(0.9);
     opacity: 0;
     visibility: hidden;
-    z-index: 2001;
     background: var(--dd-bg-elevated, #{$dd-bg-elevated});
     border: 1px solid var(--dd-border-default, #{$dd-border-default});
     border-radius: $dd-radius-lg;

package/components/dd-drawer/dd-drawer.vue

@@ -1,4 +1,5 @@
 <template>
+  <dd-portal>
   <view class="dd-drawer">
     <view
       class="dd-drawer__mask"
@@ -36,10 +37,12 @@
       </scroll-view>
     </view>
   </view>
+  </dd-portal>
 </template>
 
 <script setup lang="ts">
 import { watch } from 'vue'
+import DdPortal from '../dd-portal/dd-portal.vue'
 
 interface Props {
   modelValue?: boolean

package/components/dd-dropdown-item/dd-dropdown-item.vue

@@ -13,6 +13,7 @@
         :class="{ 'dd-dropdown-item__arrow--open': isOpen }"
       />
     </view>
+    <dd-portal>
     <view
       v-if="ctx"
       class="dd-dropdown-item__panel"
@@ -41,11 +42,13 @@
         </view>
       </scroll-view>
     </view>
+    </dd-portal>
   </view>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue'
+import DdPortal from '../dd-portal/dd-portal.vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
 
 interface DropdownOption {

package/components/dd-dropdown-menu/dd-dropdown-menu.vue

@@ -3,6 +3,7 @@
     <view class="dd-dropdown__bar">
       <slot></slot>
     </view>
+    <dd-portal>
     <view
       v-if="overlay"
       class="dd-dropdown__overlay"
@@ -10,6 +11,7 @@
       :style="overlayStyle"
       @click="onOverlayClick"
     ></view>
+    </dd-portal>
   </view>
 </template>
 
@@ -21,6 +23,7 @@ let activeMenuClose: (() => void) | null = null
 
 <script setup lang="ts">
 import { getCurrentInstance, onMounted, onUnmounted, provide, reactive, ref } from 'vue'
+import DdPortal from '../dd-portal/dd-portal.vue'
 
 interface Props {
   activeColor?: string

package/components/dd-keyboard/dd-keyboard.vue

@@ -29,7 +29,7 @@
 				<text
 				    v-if="showTips"
 				    class="dd-keyboard__tooltip__item dd-keyboard__tooltip__tips"
-				>{{tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘'}}</text>
+				>{{tips ? tips : mode == 'number' ? '数字键盘' : '身份证键盘'}}</text>
 			</view>
 			<view
 			    hover-class="dd-keyboard-hover"
@@ -42,23 +42,14 @@
 				>{{showConfirm && confirmText}}</text>
 			</view>
 			</view>
-			<template v-if="mode == 'number' || mode == 'card'">
-				<dd-number-keyboard
+			<!-- 车牌号输入已独立为 dd-car-keyboard（车牌格子+按位锁键键盘一体），此处仅保留 number/card 数字键盘 -->
+			<dd-number-keyboard
 			    :random="random"
 			    @backspace="backspace"
 			    @change="change"
 			    :mode="mode"
 			    :dotDisabled="dotDisabled"
 			></dd-number-keyboard>
-			</template>
-			<template v-else>
-				<dd-car-keyboard
-			    :random="random"
-			    :autoChange="autoChange"
-			    @backspace="backspace"
-			    @change="change"
-			></dd-car-keyboard>
-		</template>
 	</view>
 	</dd-popup>
 </template>
@@ -70,8 +61,8 @@
 
 	/**
 	 * keyboard 键盘
-	 * @description 自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
-	 * @property {String}			mode				键盘类型，见官网基本使用的说明 （默认 'number' ）
+	 * @description 自定义的键盘面板，内含了数字键盘，身份证号键盘2种模式，都有可以打乱按键顺序的选项。车牌号输入请使用 dd-car-keyboard。
+	 * @property {String}			mode				键盘类型：number-数字键盘，card-身份证键盘 （默认 'number' ）
 	 * @property {Boolean}			dotDisabled			是否显示"."按键，只在mode=number时有效 （默认 false ）
 	 * @property {Boolean}			tooltip				是否显示键盘顶部工具条 （默认 true ）
 	 * @property {Boolean}			showTips			是否显示工具条中间的提示 （默认 true ）

package/components/dd-keyboard/keyboard.js

@@ -15,7 +15,6 @@ export default {
         overlay: true,
         zIndex: 10075,
         cancelText: '取消',
-        confirmText: '确定',
-        autoChange: false
+        confirmText: '确定'
     }
 }

package/components/dd-keyboard/props.js

@@ -79,11 +79,6 @@ export const props = defineMixin({
         confirmText: {
             type: String,
             default: () => defProps.keyboard.confirmText
-        },
-        // 输入一个中文后，是否自动切换到英文
-        autoChange: {
-            type: Boolean,
-            default: () => defProps.keyboard.autoChange
         }
     }
 })

package/components/dd-loading/dd-loading.vue

@@ -1,5 +1,7 @@
 <template>
-  <view v-if="fullscreen" class="dd-loading dd-loading--fullscreen" :style="{ zIndex: 9999 }">
+  <!-- 仅全屏分支传送；inline 分支必须留在原位（传送会破坏布局流） -->
+  <dd-portal v-if="fullscreen">
+  <view class="dd-loading dd-loading--fullscreen" :style="{ zIndex: 9999 }">
     <view class="dd-loading__mask"></view>
     <view class="dd-loading__box">
       <view class="dd-loading__core" :class="[`dd-loading__core--${type}`, `dd-loading__core--${size}`]" :style="coreStyle">
@@ -17,6 +19,7 @@
       <text v-if="text" class="dd-loading__text">{{ text }}</text>
     </view>
   </view>
+  </dd-portal>
   <view v-else class="dd-loading" :class="[`dd-loading--inline`, `dd-loading--${type}`, `dd-loading--${size}`]">
     <view class="dd-loading__core" :class="[`dd-loading__core--${type}`, `dd-loading__core--${size}`]" :style="coreStyle">
       <template v-if="type === 'spinner'">
@@ -36,6 +39,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import DdPortal from '../dd-portal/dd-portal.vue'
 
 interface Props {
   type?: 'spinner' | 'dots' | 'pulse'

package/components/dd-modal/dd-modal.vue

@@ -4,6 +4,7 @@ let activeModalClose: (() => void) | null = null
 </script>
 
 <template>
+  <dd-portal>
   <view class="dd-modal">
     <view
       v-if="visible"
@@ -56,10 +57,12 @@ let activeModalClose: (() => void) | null = null
       <view class="dd-modal__safe-bottom"></view>
     </view>
   </view>
+  </dd-portal>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch, onUnmounted, nextTick } from 'vue'
+import DdPortal from '../dd-portal/dd-portal.vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
 
 interface Props {

package/components/dd-overlay/dd-overlay.vue

@@ -1,4 +1,5 @@
 <template>
+  <dd-portal>
   <view
     class="dd-overlay"
     :class="{ 'dd-overlay--show': modelValue }"
@@ -9,10 +10,12 @@
   >
     <slot></slot>
   </view>
+  </dd-portal>
 </template>
 
 <script setup lang="ts">
 import { watch } from 'vue'
+import DdPortal from '../dd-portal/dd-portal.vue'
 
 interface Props {
   modelValue?: boolean

package/components/dd-picker/dd-picker.vue

@@ -1,4 +1,5 @@
 <template>
+  <dd-portal>
   <view class="dd-picker" :class="{ 'dd-picker--open': show }">
     <view class="dd-picker__mask" @click="onMaskClick"></view>
     <view class="dd-picker__sheet">
@@ -26,10 +27,12 @@
       </view>
     </view>
   </view>
+  </dd-portal>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
+import DdPortal from '../dd-portal/dd-portal.vue'
 
 interface PickerItem {
   text: string
@@ -42,6 +45,8 @@ interface Props {
   title?: string
   loading?: boolean
   readonly?: boolean
+  // 每次打开时各列定位到的索引（缺省/超界则回落到当前值或 0），用于回显已有选中项（如房型筛选当前值）
+  defaultIndexes?: number[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -50,6 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
   title: '',
   loading: false,
   readonly: false,
+  defaultIndexes: () => [],
 })
 
 const emit = defineEmits<{
@@ -77,6 +83,21 @@ watch(
   { immediate: true }
 )
 
+// 打开时按 defaultIndexes 回显各列索引；非法值（超界/非数字）回落当前值或 0
+watch(
+  () => props.show,
+  (v) => {
+    if (!v) return
+    const cols = normalizedColumns.value
+    const d = props.defaultIndexes
+    indexes.value = cols.map((_, i) => {
+      const preset = d[i]
+      if (typeof preset !== 'number' || preset < 0) return indexes.value[i] ?? 0
+      return Math.min(preset, Math.max(0, (cols[i]?.length || 1) - 1))
+    })
+  }
+)
+
 function emitChange() {
   const items = normalizedColumns.value.map((col, i) => col[indexes.value[i] ?? 0] || { text: '', value: null })
   return {
@@ -116,6 +137,11 @@ function onConfirm() {
   background-image: linear-gradient(180deg, var(--dd-surface-container, #{$dd-surface-container}), transparent 60%),
                     linear-gradient(0deg, var(--dd-surface-container, #{$dd-surface-container}), transparent 60%);
 }
+// ponytail: H5 picker-view 吸附 itemSize 取 indicator 框高度(默认34px)，必须与行高一致拖动松手才对齐。
+// 需与下方 .dd-picker__item 的 88rpx 保持一致；改行高时必须同步改这里。小程序为原生组件此规则天然无效，安全。
+:deep(.uni-picker-view-indicator) {
+  height: 88rpx;
+}
 .dd-picker {
   &__mask {
     position: fixed;

package/components/dd-popup/dd-popup.vue

@@ -1,4 +1,6 @@
 <template>
+  <!-- 内容经 portal 提升到页面根节点：popup 可安全嵌套进另一弹层/transform 祖先，不被其劫持 fixed 定位（详见 dd-portal 组件） -->
+  <dd-portal>
   <view class="dd-popup" :style="{ '--dd-popup-duration': `${props.duration}s` }">
     <view
       v-if="visible && overlay"
@@ -24,11 +26,13 @@
       <slot></slot>
     </view>
   </view>
+  </dd-portal>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch, onUnmounted, nextTick } from 'vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
+import DdPortal from '../dd-portal/dd-portal.vue'
 
 interface Props {
   modelValue?: boolean

package/components/dd-portal/dd-portal.vue

@@ -0,0 +1,22 @@
+<template>
+  <!-- 弹层传送适配器：把插槽内容提升到页面根节点，规避 transform / filter / backdrop-filter 祖先
+       对 position:fixed 的包含块劫持（如弹层嵌在 dd-popup 面板内时，fixed 会被 popup 的
+       常驻 transform 捕获，导致弹窗相对面板而非视口定位、遮罩只盖住面板）。
+       库内消费方：dd-dialog / dd-popup / dd-modal / dd-alert / dd-action-sheet / dd-drawer /
+       dd-toast / dd-loading(全屏) / dd-overlay / dd-picker / dd-date-picker / dd-dropdown-menu / dd-dropdown-item -->
+  <!-- #ifdef H5 -->
+  <Teleport to="body">
+    <slot></slot>
+  </Teleport>
+  <!-- #endif -->
+  <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+  <root-portal>
+    <slot></slot>
+  </root-portal>
+  <!-- #endif -->
+  <!-- #ifndef H5 || MP-WEIXIN || MP-ALIPAY -->
+  <!-- ponytail: 其余平台（App/抖音等）无等价传送能力，原位渲染保持旧行为；
+       这些平台上弹层勿嵌在 transform 祖先（如 dd-popup 面板）内 -->
+  <slot></slot>
+  <!-- #endif -->
+</template>

package/components/dd-toast/dd-toast.vue

@@ -1,4 +1,5 @@
 <template>
+  <dd-portal>
   <view class="dd-toast" :class="[`dd-toast--${toastState.position}`, { 'dd-toast--show': toastState.visible }]">
     <view class="dd-toast__capsule">
       <view v-if="showIcon" class="dd-toast__icon">
@@ -8,6 +9,7 @@
       <text v-if="toastState.message" class="dd-toast__msg">{{ toastState.message }}</text>
     </view>
   </view>
+  </dd-portal>
 </template>
 
 <script lang="ts">
@@ -77,6 +79,7 @@ export function showError(message: string) {
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import DdPortal from '../dd-portal/dd-portal.vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
 
 // text 类型强制隐藏图标

package/index.ts

@@ -75,7 +75,8 @@ import DdCoupon from './components/dd-coupon/dd-coupon.vue'
 import DdParse from './components/dd-parse/dd-parse.vue'
 import DdMarkdown from './components/dd-markdown/dd-markdown.vue'
 
-// === Overlay (10) ===
+// === Overlay (11) ===
+import DdPortal from './components/dd-portal/dd-portal.vue'
 import DdModal from './components/dd-modal/dd-modal.vue'
 import DdActionSheet from './components/dd-action-sheet/dd-action-sheet.vue'
 import DdToast from './components/dd-toast/dd-toast.vue'
@@ -119,7 +120,7 @@ const components = {
   DdImage, DdProgress, DdSkeleton, DdEmptyState, DdStep, DdSteps,
   DdText, DdLink, DdCopy, DdAlbum, DdCoupon, DdParse, DdMarkdown,
   DdModal, DdActionSheet, DdToast, DdAlert, DdLoading,
-  DdDialog, DdOverlay, DdPopup, DdPopover, DdPopoverItem,
+  DdPortal, DdDialog, DdOverlay, DdPopup, DdPopover, DdPopoverItem,
   DdSwipeAction, DdSwipe, DdSwipeItem, DdPullRefresh, DdLoadmore,
   DdCapsuleButton, DdMiniProgramNavbar,
   DdCanvas, DdBarcode, DdCropper, DdSignature, DdPoster,
@@ -149,7 +150,7 @@ export {
   DdImage, DdProgress, DdSkeleton, DdEmptyState, DdStep, DdSteps,
   DdText, DdLink, DdCopy, DdAlbum, DdCoupon, DdParse, DdMarkdown,
   DdModal, DdActionSheet, DdToast, DdAlert, DdLoading,
-  DdDialog, DdOverlay, DdPopup, DdPopover, DdPopoverItem,
+  DdPortal, DdDialog, DdOverlay, DdPopup, DdPopover, DdPopoverItem,
   DdSwipeAction, DdSwipe, DdSwipeItem, DdPullRefresh, DdLoadmore,
   DdCapsuleButton, DdMiniProgramNavbar,
   DdCanvas, DdBarcode, DdCropper, DdSignature, DdPoster,

package/libs/config/props.js

@@ -21,7 +21,6 @@ const componentKeys = [
     'button',
     'calendar',
     'calendarStrip',
-    'carKeyboard',
     'card',
     'cell',
     'cellGroup',

package/libs/config/zIndex.d.ts

@@ -0,0 +1,14 @@
+// libs/config/zIndex.js 的类型声明（该库多为 JS 文件，allowJs 未开启，TS 侧导入需要此声明）
+declare const zIndex: {
+  toast: number
+  noNetwork: number
+  popup: number
+  mask: number
+  dialogMask: number
+  dialog: number
+  navbar: number
+  topTips: number
+  sticky: number
+  indexListSticky: number
+}
+export default zIndex

package/libs/config/zIndex.js

@@ -13,6 +13,9 @@ export default {
     // popup包含popup，actionsheet，keyboard，picker的值
     popup: 10075,
     mask: 10070,
+    // dialog 独立于 popup 体系：弹窗需压在 popup 面板(popup+1)之上，又不遮住 noNetwork/toast
+    dialogMask: 10077,
+    dialog: 10078,
     navbar: 980,
     topTips: 975,
     sticky: 970,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@didaoktv/didaoui-uniapp",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "帝到KTV UniApp 组件库",
   "main": "index.ts",
   "types": "index.ts",

package/components/dd-car-keyboard/carKeyboard.js

@@ -1,6 +0,0 @@
-export default {
-    // 车牌号键盘
-    carKeyboard: {
-        random: false
-    }
-}

package/components/dd-car-keyboard/props.js

@@ -1,19 +0,0 @@
-import { defineMixin } from '../../libs/vue'
-import CarKeyboardDefaultProps from './carKeyboard'
-import { registerComponentProps } from '../../libs/config/props.js'
-
-const defProps = registerComponentProps(CarKeyboardDefaultProps)
-export const props = defineMixin({
-    props: {
-        // 是否打乱键盘按键的顺序
-        random: {
-            type: Boolean,
-            default: false
-        },
-        // 输入一个中文后，是否自动切换到英文
-        autoChange: {
-            type: Boolean,
-            default: false
-        }
-    }
-})