@didaoktv/didaoui-uniapp 1.3.5 → 1.3.7

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

@@ -26,48 +26,66 @@
 			</view>
 		</view>
 
-		<!-- 键盘弹层：0 位省份键盘，其余位字母数字键盘（按位锁键） -->
-		<view
-			v-if="active >= 0"
-			class="dd-car-keyboard__panel"
-			@touchmove.stop.prevent="noop"
+		<!-- 键盘弹层：与其他键盘模式一致，经 dd-popup 弹出（遮罩/动效/底部安全区），0 位省份键盘，其余位字母数字键盘（按位锁键） -->
+		<dd-popup
+			v-model="popupShow"
+			position="bottom"
+			:z-index="zIndexConfig.popup"
 		>
-			<view class="dd-car-keyboard__close" @tap="closeKeyboard">
-				<text class="dd-car-keyboard__close-text">关闭</text>
-			</view>
-			<view
-				v-for="(row, rowIndex) in keyRows"
-				:key="rowIndex"
-				class="dd-car-keyboard__row"
-			>
-				<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 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
-					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"
+					v-for="(row, rowIndex) in keyRows"
+					:key="rowIndex"
+					class="dd-car-keyboard__row"
 				>
-					<dd-icon size="22" 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 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'
 
 /**
@@ -76,7 +94,7 @@ import { MAX_LEN, getKeyRows, nextPos, type KeyItem } from './carPlate'
  * @property {String} modelValue 车牌号（v-model）
  * @event {Function} update:modelValue 输入变化
  * @event {Function} focus 键盘弹出
- * @event {Function} blur 键盘收起
+ * @event {Function} blur 键盘收起（含遮罩/取消/完成触发）
  * @example <dd-car-keyboard v-model="plateNo" />
  */
 
@@ -120,7 +138,13 @@ watch(keyboardVisible, (visible) => {
 	else emit('blur', props.modelValue)
 })
 
-function noop() {}
+// 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
@@ -219,25 +243,40 @@ $dd-car-keyboard-panel-padding: 0 var(--dd-space-2, #{$dd-space-2}) var(--dd-spa
 	}
 
 	&__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 {
+	// 工具条对齐 dd-keyboard：取消 / 提示 / 完成
+	&__tooltip {
 		@include flex;
-		justify-content: flex-end;
-		padding: var(--dd-space-2, #{$dd-space-2}) 0;
+		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;
+			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});
+			}
+		}
 	}
 
-	&__close-text {
-		padding: 0 var(--dd-space-2, #{$dd-space-2});
-		font-size: 13.5px;
-		color: var(--dd-text-secondary, #{$dd-text-secondary});
+	&__hover {
+		opacity: 0.7;
 	}
 
 	&__row {

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

@@ -124,15 +124,20 @@ function handleClick(e: Event) {
   padding: 0 24rpx 0 $dd-space-4;
   background: var(--dd-bg-elevated, #{$dd-bg-elevated});
   font-size: $dd-font-size-body;
+  // vant 式恒定行高（24px），title/value/label/icon 全部基线对齐
+  line-height: $dd-line-height-lead;
   color: var(--dd-text-primary, #{$dd-text-primary});
   @include dd-hairline-bottom(var(--dd-border-subtle, #{$dd-border-subtle}));
 
+  // vant 式：高度 = 垂直 padding + 行高（12/16px × 2 + 23.8px ≈ 96/112rpx），内容天然居中
   &--normal {
-    min-height: 96rpx;
+    padding-top: $dd-space-3;
+    padding-bottom: $dd-space-3;
   }
 
   &--large {
-    min-height: 112rpx;
+    padding-top: $dd-space-4;
+    padding-bottom: $dd-space-4;
   }
 
   &--center {
@@ -154,7 +159,8 @@ function handleClick(e: Event) {
     margin-right: $dd-space-2;
     display: flex;
     align-items: center;
-    height: 100%;
+    // ponytail: stretch 拉伸到兄弟 content 高度使图标居中于首行；title+label 多行时会居中于整块而非首行（vant 是贴首行），如需精确可改为固定行高盒
+    align-self: stretch;
   }
 
   &__icon-text {
@@ -167,7 +173,7 @@ function handleClick(e: Event) {
     color: var(--dd-error, #{$dd-error});
     font-size: $dd-font-size-body;
     margin-right: 4rpx;
-    line-height: $dd-line-height-caption;
+    line-height: inherit;
     text {
       line-height: 1;
     }
@@ -179,7 +185,6 @@ function handleClick(e: Event) {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: $dd-space-2 0;
   }
 
   &__title {

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-dialog/dd-dialog.vue

@@ -17,8 +17,9 @@
         <text class="dd-dialog__title">{{ title }}</text>
       </view>
       <view class="dd-dialog__body" :class="{ 'dd-dialog__body--isolated': !title }">
+        <!-- message 与 slot 共存（slot 在下）：prompt 型弹窗需同时展示说明文案与输入内容 -->
         <text v-if="message" class="dd-dialog__message">{{ message }}</text>
-        <slot v-else></slot>
+        <slot></slot>
       </view>
       <view v-if="showConfirmButton || showCancelButton" class="dd-dialog__footer" :class="`dd-dialog__footer--${theme}`">
         <template v-if="theme === 'round-button'">
@@ -83,6 +84,8 @@ interface Props {
   cancelColor?: string
   width?: string | number
   closeOnClickOverlay?: boolean
+  /** 异步关闭：确认/取消/遮罩只发事件不自动关窗，由调用方（如表单校验）自行控制 modelValue */
+  asyncClose?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -98,6 +101,7 @@ const props = withDefaults(defineProps<Props>(), {
   cancelColor: '',
   width: '640rpx',
   closeOnClickOverlay: false,
+  asyncClose: false,
 })
 
 const emit = defineEmits<{
@@ -133,17 +137,17 @@ function close() {
 function onOverlayClick() {
   if (!props.closeOnClickOverlay) return
   emit('cancel')
-  close()
+  if (!props.asyncClose) close()
 }
 
 function onConfirm() {
   emit('confirm')
-  close()
+  if (!props.asyncClose) close()
 }
 
 function onCancel() {
   emit('cancel')
-  close()
+  if (!props.asyncClose) close()
 }
 </script>
 
@@ -237,6 +241,11 @@ function onCancel() {
     &--cancel {
       border-right: 1px solid var(--dd-border-subtle, #{$dd-border-subtle});
     }
+
+    /* 确认按钮文字默认主色；confirmColor 传入时走内联样式覆盖 */
+    &--confirm .dd-dialog__btn-text {
+      color: var(--dd-primary, #{$dd-primary});
+    }
   }
 
   &__btn-text {

package/components/dd-empty-state/dd-empty-state.vue

@@ -88,11 +88,11 @@ function onAction() {
 
   &__icon {
     margin-bottom: $dd-space-4;
+    font-size: 120rpx;
+    line-height: 1;
   }
 
   &__emoji {
-    font-size: 120rpx;
-    line-height: 1;
     animation: dd-empty-float 3s ease-in-out infinite;
   }
 

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

@@ -10,6 +10,7 @@
 		>
 			<view
 				class="dd-keyboard__button-wrapper__button"
+				:class="[btnBgGray(index) && 'dd-keyboard__button-wrapper__button--gray']"
 				:style="[itemStyle(index)]"
 				@tap="keyboardClick(item)"
 				hover-class="dd-keyboard-hover"
@@ -25,8 +26,10 @@
 				class="dd-keyboard__button-wrapper__button dd-keyboard__button-wrapper__button--gray"
 				hover-class="dd-keyboard-hover"
 				:hover-stay-time="200"
-				@touchstart.stop="backspaceClick"
+				@touchstart.stop="backspaceTouchStart"
 				@touchend="clearTimer"
+				@touchcancel="clearTimer"
+				@tap="backspaceTap"
 			>
 				<dd-icon
 				name="backspace"
@@ -61,6 +64,7 @@
 				backspace: 'backspace', // 退格键内容
 				dot: '.', // 点
 				timer: null, // 长按多次删除的事件监听
+				isTouch: false, // 本次退格是否来自触摸（防 tap 重复删除）
 				cardX: 'X' // 身份证的X符号
 			};
 		},
@@ -88,15 +92,15 @@
 					}
 				}
 			},
-			// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间
+			// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，"0"键占位两个空间（flex 拉伸为 2 倍宽）
 			itemStyle() {
 				return index => {
 					let style = {};
-					if (this.mode == 'number' && this.dotDisabled && index == 9) style.width = '464rpx';
+					if (this.mode == 'number' && this.dotDisabled && index == 9) style.flex = '2 1 30%';
 					return style;
 				};
 			},
-			// 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候
+			// 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候（"."键 / 身份证"X"键）
 			btnBgGray() {
 				return index => {
 					if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && !this
@@ -109,8 +113,9 @@
 		},
 		emits: ["backspace", "change"],
 		methods: {
-			// 点击退格键
-			backspaceClick() {
+			// 点击退格键（触摸路径：touchstart 立删 + 长按连删；鼠标路径：tap 单删，isTouch 防移动端触摸后 tap 二次删除）
+			backspaceTouchStart() {
+				this.isTouch = true
 				this.$emit('backspace');
 				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
 				this.timer = null;
@@ -118,6 +123,13 @@
 					this.$emit('backspace');
 				}, 250);
 			},
+			backspaceTap() {
+				if (this.isTouch) {
+					this.isTouch = false;
+					return;
+				}
+				this.$emit('backspace');
+			},
 			clearTimer() {
 				clearInterval(this.timer);
 				this.timer = null;
@@ -137,12 +149,8 @@
 @import '../../scss/dd-shared';
 	$dd-number-keyboard-background-color: var(--dd-bg-section, #{$dd-bg-section}) !default;
 	$dd-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
-	$dd-number-keyboard-button-width:222rpx !default;
-	$dd-number-keyboard-button-margin:4px 6rpx !default;
-	$dd-number-keyboard-button-border-top-left-radius:4px !default;
-	$dd-number-keyboard-button-border-top-right-radius:4px !default;
-	$dd-number-keyboard-button-border-bottom-left-radius:4px !default;
-	$dd-number-keyboard-button-border-bottom-right-radius:4px !default;
+	$dd-number-keyboard-gap:6rpx !default;
+	$dd-number-keyboard-button-border-radius:var(--dd-radius-sm, #{$dd-radius-sm}) !default;
 	$dd-number-keyboard-button-height: 90rpx!default;
 	$dd-number-keyboard-button-background-color:var(--dd-surface-container-high, #{$dd-surface-container-high}) !default;
 	$dd-number-keyboard-button-box-shadow:0 2px 0px var(--dd-bg, #{$dd-bg}) !default;
@@ -155,30 +163,25 @@
 	.dd-keyboard {
 		@include flex;
 		flex-direction: row;
-		justify-content: space-around;
-		background-color: $dd-number-keyboard-background-color;
 		flex-wrap: wrap;
+		gap: $dd-number-keyboard-gap;
+		background-color: $dd-number-keyboard-background-color;
 		padding: $dd-number-keyboard-padding;
 
+		// ponytail: 弹性三等分替代固定 222rpx 宽——容器宽度不足 702rpx 时固定宽会挤成 2 列
 		&__button-wrapper {
+			flex: 1 1 30%;
 			box-shadow: $dd-number-keyboard-button-box-shadow;
-			margin: $dd-number-keyboard-button-margin;
-			border-top-left-radius: $dd-number-keyboard-button-border-top-left-radius;
-			border-top-right-radius: $dd-number-keyboard-button-border-top-right-radius;
-			border-bottom-left-radius: $dd-number-keyboard-button-border-bottom-left-radius;
-			border-bottom-right-radius: $dd-number-keyboard-button-border-bottom-right-radius;
+			border-radius: $dd-number-keyboard-button-border-radius;
 
 			&__button {
-				width: $dd-number-keyboard-button-width;
+				width: 100%;
 				height: $dd-number-keyboard-button-height;
 				background-color: $dd-number-keyboard-button-background-color;
 				@include flex;
 				justify-content: center;
 				align-items: center;
-				border-top-left-radius: $dd-number-keyboard-button-border-top-left-radius;
-				border-top-right-radius: $dd-number-keyboard-button-border-top-right-radius;
-				border-bottom-left-radius: $dd-number-keyboard-button-border-bottom-left-radius;
-				border-bottom-right-radius: $dd-number-keyboard-button-border-bottom-right-radius;
+				border-radius: $dd-number-keyboard-button-border-radius;
 
 				&__text {
 					font-size: $dd-number-keyboard-text-font-size;
@@ -187,9 +190,9 @@
 				}
 
 				&--gray {
-				background-color: $dd-number-keyboard-gray-background-color;
-				color: $dd-number-keyboard-text-color; // 退格图标 color=inherit，由此处控制
-			}
+					background-color: $dd-number-keyboard-gray-background-color;
+					color: $dd-number-keyboard-text-color; // 退格图标 color=inherit，由此处控制
+				}
 			}
 		}
 	}

package/components/dd-segmented-tab/dd-segmented-tab.vue

@@ -2,6 +2,7 @@
   <view
     v-if="variant === 'pill'"
     class="dd-seg dd-seg--pill"
+    :class="{ 'dd-seg--sm': size === 'sm' }"
   >
     <view
       ref="trackRef"
@@ -22,7 +23,11 @@
       ></view>
     </view>
   </view>
-  <view v-else class="dd-seg dd-seg--text">
+  <view
+    v-else
+    class="dd-seg dd-seg--text"
+    :class="{ 'dd-seg--sm': size === 'sm' }"
+  >
     <view
       v-for="(opt, index) in options"
       :key="index"
@@ -44,12 +49,15 @@ interface Props {
   modelValue?: number
   options?: (string | { label: string })[]
   variant?: 'pill' | 'text'
+  /** 尺寸：md 标准；sm 小号（与页面 24rpx 字号胶囊控件同高，用于工具行等紧凑场景） */
+  size?: 'sm' | 'md'
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: 0,
   options: () => [],
   variant: 'pill',
+  size: 'md',
 })
 
 const emit = defineEmits<{
@@ -135,6 +143,15 @@ watch(() => props.options, measure)
     }
   }
 
+  // sm 小号：字号 caption（12px=24rpx）、更紧内边距，整体高度对齐页面 24rpx 字号胶囊
+  &.dd-seg--sm {
+    .dd-seg__item {
+      min-width: 96rpx;
+      padding: $dd-space-1;
+      font-size: $dd-font-size-caption;
+    }
+  }
+
   .dd-seg__indicator {
     position: absolute;
     top: $dd-space-1;
@@ -154,6 +171,12 @@ watch(() => props.options, measure)
   flex-direction: row;
   gap: $dd-space-6;
 
+  &.dd-seg--sm {
+    .dd-seg-text__item {
+      font-size: $dd-font-size-caption;
+    }
+  }
+
   .dd-seg-text__item {
     position: relative;
     padding: $dd-space-2 0;

package/package.json

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