@didaoktv/didaoui-uniapp 1.3.4 → 1.3.6

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

@@ -1,315 +1,316 @@
 <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"
-				>
-					<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>
-				</view>
-			</view>
-			<view
-				class="dd-keyboard__button__inner-wrapper"
-				v-for="(item, j) in group"
-				:key="j"
-			>
+					v-if="active === index"
+					class="dd-car-keyboard__box-line"
+				></view>
 				<view
-					class="dd-keyboard__button__inner-wrapper__inner"
-					:hover-stay-time="200"
-					@tap="carInputClick(i, j)"
-					hover-class="dd-keyboard-hover"
+					v-if="index === 7"
+					class="dd-car-keyboard__badge"
 				>
-					<text class="dd-keyboard__button__inner-wrapper__inner__text">{{ item }}</text>
+					<text class="dd-car-keyboard__badge-text">新能源</text>
 				</view>
+				<text class="dd-car-keyboard__box-text">{{ char }}</text>
 			</view>
-			<view
-				v-if="i === 3"
-				@touchstart="backspaceClick"
-				@touchend="clearTimer"
-				class="dd-keyboard__button__inner-wrapper"
-			>
+		</view>
+
+		<!-- 键盘弹层：与其他键盘模式一致，经 dd-popup 弹出（遮罩/动效/底部安全区），0 位省份键盘，其余位字母数字键盘（按位锁键） -->
+		<dd-popup
+			v-model="popupShow"
+			position="bottom"
+			:z-index="zIndexConfig.popup"
+		>
+			<view class="dd-car-keyboard__panel">
+				<view class="dd-car-keyboard__tooltip">
+					<view hover-class="dd-car-keyboard__hover" :hover-stay-time="100">
+						<text
+							class="dd-car-keyboard__tooltip-item dd-car-keyboard__tooltip-item--cancel"
+							@tap="closeKeyboard"
+						>取消</text>
+					</view>
+					<view>
+						<text class="dd-car-keyboard__tooltip-item dd-car-keyboard__tooltip-item--tips">车牌键盘</text>
+					</view>
+					<view hover-class="dd-car-keyboard__hover" :hover-stay-time="100">
+						<text
+							class="dd-car-keyboard__tooltip-item dd-car-keyboard__tooltip-item--submit"
+							@tap="closeKeyboard"
+						>完成</text>
+					</view>
+				</view>
 				<view
-					class="dd-keyboard__button__inner-wrapper__right"
-					hover-class="dd-keyboard-hover"
-					:hover-stay-time="200"
+					v-for="(row, rowIndex) in keyRows"
+					:key="rowIndex"
+					class="dd-car-keyboard__row"
 				>
-					<dd-icon
-					size="28"
-					name="backspace"
-				></dd-icon>
+					<view
+						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-car-keyboard__key-text">{{ item.label }}</text>
+					</view>
+					<view
+						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="22" name="backspace"></dd-icon>
+					</view>
 				</view>
 			</view>
-		</view>
+		</dd-popup>
 	</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 zIndexConfig from '../../libs/config/zIndex.js'
+import DdIcon from '../dd-icon/dd-icon.vue'
+import DdPopup from '../dd-popup/dd-popup.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)
+})
+
+// dd-popup 关闭路径（遮罩/取消/完成）统一经 update:modelValue 收敛回 active
+const popupShow = computed({
+	get: () => active.value >= 0,
+	set: (val: boolean) => {
+		if (!val) active.value = -1
+	}
+})
+
+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;
+
+$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 {
+		padding: $dd-car-keyboard-panel-padding;
+	}
+
+	// 工具条对齐 dd-keyboard：取消 / 提示 / 完成
+	&__tooltip {
+		@include flex;
+		justify-content: space-between;
+		background-color: var(--dd-bg-elevated, #{$dd-bg-elevated});
+		padding: 14px 12px;
+
+		&-item {
+			color: var(--dd-text-primary, #{$dd-text-primary});
 			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;
-						}
-					}
-				}
+			text-align: center;
+			font-size: 15px;
+
+			&--cancel {
+				text-align: left;
+				color: var(--dd-text-tertiary, #{$dd-text-tertiary});
+			}
+
+			&--tips {
+				color: var(--dd-text-tertiary, #{$dd-text-tertiary});
+			}
+
+			&--submit {
+				text-align: right;
+				color: var(--dd-primary-400, #{$dd-primary-400});
 			}
 		}
 	}
 
-	.dd-keyboard-hover {
-		background-color: $dd-car-keyboard-dd-keyboard-hover-background-color;
+	&__hover {
+		opacity: 0.7;
+	}
+
+	&__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，由此处控制
+		}
+	}
+
+	&__key-text {
+		font-size: 16px;
+		color: var(--dd-text-primary, #{$dd-text-primary});
 	}
+}
 </style>

package/components/dd-cell-group/dd-cell-group.vue

@@ -42,7 +42,6 @@ withDefaults(defineProps<Props>(), {
   &--inset {
     border-radius: $dd-radius-lg;
     overflow: hidden;
-    margin: 0 24rpx;
   }
 
   &--border {

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