@didaoktv/didaoui-uniapp 1.4.2 → 2.0.0

package/README.md

@@ -6,7 +6,7 @@
 
 - **帝王级配色** — 帝王金 `#F5A623` + 皇家蓝 `#2D4BA0` 双主色，暗色主题默认
 - **玻璃拟态设计** — 多层级玻璃拟态效果，打造高端夜店沉浸感
-- **95 个精心打磨的组件** — 覆盖表单、导航、布局卡片、数据展示、浮层反馈、交互、画布七大类，含 KTV 业务组件（房态卡、账单明细、工单卡、日历、二维码）
+- **96 个精心打磨的组件** — 覆盖表单、导航、布局卡片、数据展示、浮层反馈、交互、画布七大类，含 KTV 业务组件（房态卡、账单明细、工单卡、日历、二维码）
 - **Vue3 + TypeScript** — 完整类型定义，Composition API
 - **多端兼容** — H5 / 微信小程序 / 抖音小程序 / Android / iOS
 
@@ -52,7 +52,7 @@ import { DdButton, DdInput } from '@didaoktv/didaoui-uniapp'
 | ----- | -- | --------------------------------------------------------------------------------------------------------------------------------------------- |
 | 表单输入  | 24 | Button, CodeButton, Input, Form, Field, Switch, Checkbox, CheckboxGroup, Radio, RadioGroup, Stepper, SearchBar, Slider, DatePicker, Picker, Rate, Upload, Icon, Keyboard, NumberKeyboard, CarKeyboard, Cascader, GoodsSku, TreeSelect |
 | 导航     | 14 | Navigation, TopNavbar, SegmentedTab, SwipeableTab, Drawer, Tabbar, TabbarItem, Backtop, Collapse, CollapseItem, DropdownMenu, DropdownItem, Sidebar, SidebarItem |  |
-| 布局/卡片 | 9  | Card, RoomCard, FeatureGrid, Sticky, BillDetail, WorkorderCard, Calendar, Qrcode, SubmitBar                                                              |
+| 布局/卡片 | 10 | Card, RoomCard, GoodsCard, FeatureGrid, Sticky, BillDetail, WorkorderCard, Calendar, Qrcode, SubmitBar                                                             |
 | 数据展示  | 25 | Tag, StatCard, ChampionCard, Avatar, AvatarGroup, Badge, ListCell, Cell, CellGroup, CountDown, Divider, Image, Progress, Skeleton, EmptyState, Step, Steps, Text, Link, Copy, Album, Coupon, Parse, Markdown, Price |
 | 浮层反馈  | 11 | Modal, ActionSheet, Toast, Alert, Loading, Dialog, Overlay, Popup, Popover, PopoverItem, Portal                                                   |
 | 交互    | 5  | SwipeAction, Swipe, SwipeItem, PullRefresh, Loadmore                                                                                         |

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

@@ -4,9 +4,10 @@
     <view
       class="dd-action-sheet__mask"
       :class="{ 'dd-action-sheet__mask--show': modelValue }"
+      :style="{ zIndex: zIndexConfig.dialogMask }"
       @click="onMaskClick"
     ></view>
-    <view class="dd-action-sheet__panel" :class="{ 'dd-action-sheet__panel--show': modelValue }">
+    <view class="dd-action-sheet__panel" :class="{ 'dd-action-sheet__panel--show': modelValue }" :style="{ zIndex: zIndexConfig.dialog }">
       <view class="dd-action-sheet__handle"></view>
       <view v-if="title" class="dd-action-sheet__title">
         <text class="dd-action-sheet__title-text">{{ title }}</text>
@@ -40,6 +41,8 @@
 <script setup lang="ts">
 import DdPortal from '../dd-portal/dd-portal.vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
+// z-index 统一取 libs/config/zIndex.js（对话框族与 dd-dialog 同档：dialogMask/dialog）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface ActionItem {
   name: string
@@ -104,7 +107,6 @@ function onClose() {
     background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     opacity: 0;
     visibility: hidden;
-    z-index: 1000;
     @include dd-transition(opacity 0.3s, visibility 0.3s);
 
     &--show {
@@ -120,7 +122,6 @@ function onClose() {
     right: 0;
     bottom: 0;
     transform: translateY(100%);
-    z-index: 1001;
     @include dd-glass;
     border-radius: $dd-radius-2xl $dd-radius-2xl 0 0;
     padding: $dd-space-3 $dd-space-4 $dd-space-4;

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

@@ -4,9 +4,10 @@
     <view
       class="dd-alert__mask"
       :class="{ 'dd-alert__mask--show': modelValue }"
+      :style="{ zIndex: zIndexConfig.dialogMask }"
       @click="onMaskClick"
     ></view>
-    <view class="dd-alert__card" :class="{ 'dd-alert__card--show': modelValue }">
+    <view class="dd-alert__card" :class="{ 'dd-alert__card--show': modelValue }" :style="{ zIndex: zIndexConfig.dialog }">
       <view class="dd-alert__icon" :class="[`dd-alert__icon--${type}`]">
         <dd-icon :name="iconName" class="dd-alert__icon-text" />
       </view>
@@ -29,6 +30,8 @@
 import { computed } from 'vue'
 import DdPortal from '../dd-portal/dd-portal.vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
+// z-index 统一取 libs/config/zIndex.js（对话框族与 dd-dialog 同档：dialogMask/dialog）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 type AlertType = 'info' | 'success' | 'warning' | 'error' | 'confirm'
 
@@ -103,7 +106,6 @@ function onMaskClick() {
     background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     opacity: 0;
     visibility: hidden;
-    z-index: 1000;
     @include dd-transition(opacity 0.25s, visibility 0.25s);
 
     &--show {
@@ -119,7 +121,6 @@ function onMaskClick() {
     transform: translate(-50%, -50%) scale(0.9);
     opacity: 0;
     visibility: hidden;
-    z-index: 1001;
     width: 560rpx;
     background: var(--dd-bg-elevated, #{$dd-bg-elevated});
     border: 1px solid var(--dd-border-default, #{$dd-border-default});

package/components/dd-backtop/dd-backtop.vue

@@ -2,7 +2,7 @@
   <view
     class="dd-backtop"
     :class="{ 'dd-backtop--show': visible }"
-    :style="{ right: right + 'rpx', bottom: bottom + 'rpx' }"
+    :style="{ right: right + 'rpx', bottom: bottom + 'rpx', zIndex: zIndexConfig.sticky + 1 }"
     @click="onClick"
   >
     <slot name="icon">
@@ -14,6 +14,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
+// z-index 统一取 libs/config/zIndex.js：sticky 档 + 1，浮钮须盖住吸顶元素
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   scrollTop?: number
@@ -47,7 +49,6 @@ function onClick() {
 
 .dd-backtop {
   position: fixed;
-  z-index: $dd-z-index-fixed;
   width: 80rpx;
   height: 80rpx;
   border-radius: $dd-radius-full;

package/components/dd-badge/dd-badge.vue

@@ -5,6 +5,7 @@
       v-if="visible"
       class="dd-badge__sup"
       :class="[`dd-badge__sup--${type}`, `dd-badge__sup--${variant}`]"
+      :style="{ zIndex: zIndexConfig.base }"
     >
       <text v-if="type === 'number'" class="dd-badge__num">{{ displayContent }}</text>
       <text v-else-if="type === 'text'" class="dd-badge__txt">{{ content }}</text>
@@ -14,6 +15,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+// z-index 统一取 libs/config/zIndex.js（角标抬到宿主内容之上取 base 档）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   type?: 'dot' | 'number' | 'text'
@@ -72,7 +75,6 @@ const visible = computed(() => {
     top: 0;
     right: 0;
     transform: translate(25%, -25%);
-    z-index: 1;
     box-sizing: border-box;
     display: flex;
     align-items: center;

package/components/dd-barcode/dd-barcode.vue

@@ -26,6 +26,7 @@
       v-if="!useCanvas && calcSizeDone"
       ref="barcodeImageCanvas"
       class="dd-barcode__hidden-canvas"
+      :style="{ zIndex: zcBase }"
       :canvas-id="tempCanvasId"
       :width="canvasWidth"
       :height="canvasHeight"
@@ -36,6 +37,8 @@
 
 <script>
 import { nextTick } from 'vue'
+// z-index 统一取 libs/config/zIndex.js（离屏隐藏画布归 base 档）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 export default {
   name: 'dd-barcode',
@@ -156,6 +159,8 @@ export default {
   },
   data() {
     return {
+      // 离屏隐藏画布层级（base 档，Options API 经 data 暴露给模板）
+      zcBase: zIndexConfig.base,
       canvasId: 'barcode-' + Math.random().toString(36).substr(2, 9),
       tempCanvasId: 'barcode-temp-' + Math.random().toString(36).substr(2, 9),
       barcodeImage: '',
@@ -1012,7 +1017,6 @@ export default {
   position: fixed;
   top: -10000px;
   left: -10000px;
-  z-index: -1;
 }
 
 .error-container {

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

@@ -30,7 +30,6 @@
 		<dd-popup
 			v-model="popupShow"
 			position="bottom"
-			:z-index="zIndexConfig.popup"
 		>
 			<view class="dd-car-keyboard__panel">
 				<view class="dd-car-keyboard__tooltip">
@@ -83,7 +82,6 @@
 
 <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'

package/components/dd-cascader/dd-cascader.vue

@@ -5,7 +5,6 @@
     :closeable="closeable"
     :safe-area-inset-bottom="true"
     :close-on-click-overlay="maskCloseAble"
-    :z-index="uZIndex"
     @close="close"
   >
     <!-- column 头部：垂直步骤（ponytail: dd-steps 无 dot 模式，用默认数字圆点步骤） -->
@@ -111,8 +110,6 @@ interface Props {
   childrenKey?: string
   /** 是否允许通过点击遮罩关闭Picker */
   maskCloseAble?: boolean
-  /** 弹出的z-index值 */
-  zIndex?: string | number
   /** 是否在选择最后一级时自动关闭并触发confirm */
   autoClose?: boolean
   /** 选中项目的展示方向：column 垂直方向适合文字长度过长 */
@@ -131,7 +128,6 @@ const props = withDefaults(defineProps<Props>(), {
   labelKey: 'label',
   childrenKey: 'children',
   maskCloseAble: true,
-  zIndex: 0,
   autoClose: false,
   headerDirection: 'row',
   optionsCols: 2,
@@ -207,8 +203,6 @@ const genTabsList = computed(() => {
   return tabsList
 })
 
-const uZIndex = computed(() => (props.zIndex ? Number(props.zIndex) : 2000))
-
 function getSelectedValues(): Array<string | number> {
   const result: Array<string | number> = []
   for (let i = 0; i < selectedValueIndexs.value.length; i++) {

package/components/dd-coupon/dd-coupon.vue

@@ -9,7 +9,7 @@
     :style="couponStyle"
     @click="handleClick"
   >
-    <view class="dd-coupon__content">
+    <view class="dd-coupon__content" :style="{ zIndex: zIndexConfig.base + 1 }">
       <!-- 左侧金额区域：unit + amount 基线对齐，limit 换行在下 -->
       <view class="dd-coupon__amount">
         <view class="dd-coupon__amount-main">
@@ -50,7 +50,7 @@
     </view>
 
     <!-- 红包顶部金条纹 -->
-    <view v-if="shape === 'envelope'" class="dd-coupon__stripe"></view>
+    <view v-if="shape === 'envelope'" class="dd-coupon__stripe" :style="{ zIndex: zIndexConfig.base }"></view>
 
     <!-- 默认插槽，可用于添加额外内容 -->
     <slot></slot>
@@ -59,6 +59,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+// z-index 统一取 libs/config/zIndex.js（内容层 base 档内 +1，打孔伪元素经 CSS 变量透传 base 档）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   /** 金额 */
@@ -114,6 +116,8 @@ const couponStyle = computed(() => {
   const style: Record<string, string> = {}
   if (props.bgColor) style.background = props.bgColor
   if (props.color) style.color = props.color
+  // 伪元素（::before/::after 打孔圆）无法 :style 注入，经 CSS 变量透传档位值
+  style['--dd-coupon-notch-z'] = String(zIndexConfig.base)
   return style
 })
 
@@ -148,7 +152,7 @@ function handleClick() {
       height: 48rpx;
       background: var(--dd-bg, #{$dd-bg});
       border-radius: 50%;
-      z-index: 1;
+      z-index: var(--dd-coupon-notch-z);
     }
 
     &::after {
@@ -161,7 +165,7 @@ function handleClick() {
       height: 48rpx;
       background: var(--dd-bg, #{$dd-bg});
       border-radius: 50%;
-      z-index: 1;
+      z-index: var(--dd-coupon-notch-z);
     }
   }
 
@@ -201,7 +205,6 @@ function handleClick() {
     justify-content: space-between;
     padding: 0 $dd-space-4;
     position: relative;
-    z-index: 2;
     box-sizing: border-box;
   }
 
@@ -312,7 +315,6 @@ function handleClick() {
       var(--dd-primary, #{$dd-primary}) 10rpx,
       var(--dd-primary, #{$dd-primary}) 20rpx
     );
-    z-index: 1;
   }
 
   &--envelope .dd-coupon__content {

package/components/dd-cropper/dd-cropper.vue

@@ -1,9 +1,9 @@
 <template>
 	<view class="dd-cropper">
-		<dd-canvas ref="avatarCanvas" :canvas-id="'avatar-canvas-' + instanceId" class="my-canvas" :width="windowWidth || 0" :height="windowHeight || 0" :style="{ top: styleTop, height: cvsStyleHeight }" bg-color="transparent"></dd-canvas>
-		<dd-canvas ref="operCanvas" :canvas-id="'oper-canvas-' + instanceId" class="oper-canvas" :width="windowWidth || 0" :height="windowHeight || 0" :style="{ top: styleTop, height: cvsStyleHeight }" bg-color="transparent" @touchstart="start" @touchmove="move" @touchend="end"></dd-canvas>
-		<dd-canvas ref="prvCanvas" :canvas-id="'prv-canvas-' + instanceId" class="prv-canvas" :width="windowWidth || 0" :height="windowHeight || 0" bg-color="transparent" @touchstart="hideImg" :style="{ height: cvsStyleHeight, top: prvTop }"></dd-canvas>
-		<view class="oper-wrapper" :style="{ display: styleDisplay }">
+		<dd-canvas ref="avatarCanvas" :canvas-id="'avatar-canvas-' + instanceId" class="my-canvas" :width="windowWidth || 0" :height="windowHeight || 0" :style="{ top: styleTop, height: cvsStyleHeight, zIndex: zc }" bg-color="transparent"></dd-canvas>
+		<dd-canvas ref="operCanvas" :canvas-id="'oper-canvas-' + instanceId" class="oper-canvas" :width="windowWidth || 0" :height="windowHeight || 0" :style="{ top: styleTop, height: cvsStyleHeight, zIndex: zcOper }" bg-color="transparent" @touchstart="start" @touchmove="move" @touchend="end"></dd-canvas>
+		<dd-canvas ref="prvCanvas" :canvas-id="'prv-canvas-' + instanceId" class="prv-canvas" :width="windowWidth || 0" :height="windowHeight || 0" bg-color="transparent" @touchstart="hideImg" :style="{ height: cvsStyleHeight, top: prvTop, zIndex: zcPrv }"></dd-canvas>
+		<view class="oper-wrapper" :style="{ display: styleDisplay, zIndex: zcBar }">
 			<view class="oper">
 				<view class="btn-wrapper" v-if="showOper">
 					<view @click="select" hover-class="hover" :style="{ width: btnWidth }">
@@ -37,12 +37,21 @@
 </template>
 
 <script>
+	import zIndexConfig from '../../libs/config/zIndex.js'
+
 	// 画布系组件（dd-canvas / dd-signature / dd-qrcode 同族）统一采用 Options API，
 	// 命令式 canvas 状态挂在 this 上不走响应式，避免触摸高频重绘的代理开销。
 
 	// 底部操作条高度（px），与样式 .oper-wrapper 的 height 保持一致
 	const tabHeight = 50;
 
+	// z-index 统一取 libs/config/zIndex.js（cropper 档 + 显式偏移；Options API 经 data 暴露给模板）。
+	// ×2 原语义：预览层须盖过工作画布与操作条。
+	const Z_CROPPER = zIndexConfig.cropper
+	const Z_CROPPER_OPER = Z_CROPPER + 1
+	const Z_CROPPER_PRV = Z_CROPPER * 2
+	const Z_CROPPER_BAR = Z_CROPPER + 9
+
 	export default {
 		name: "dd-cropper",
 		emits: ['avtinit', 'confirm', 'cancel'],
@@ -160,6 +169,11 @@
 				letChangeSize: false,
 				// 底部安全区大小
 				safeAreaInsetsBottom: 0,
+				// z-index 档位（libs/config/zIndex.js cropper 档派生，见 script 头部常量）
+				zc: Z_CROPPER,
+				zcOper: Z_CROPPER_OPER,
+				zcPrv: Z_CROPPER_PRV,
+				zcBar: Z_CROPPER_BAR,
 			};
 		},
 		created() {
@@ -1211,7 +1225,7 @@
 			position: fixed !important;
 			background: $dd-color-black;
 			left: 0;
-			z-index: $dd-z-index-cropper;
+			/* z-index 由模板注入（libs/config/zIndex.js cropper 档） */
 			width: 100%;
 		}
 
@@ -1219,7 +1233,6 @@
 			display: flex;
 			position: fixed !important;
 			left: 0;
-			z-index: $dd-z-index-cropper + 1;
 			width: 100%;
 		}
 
@@ -1228,7 +1241,6 @@
 			position: fixed !important;
 			background: $dd-color-black;
 			left: 0;
-			z-index: $dd-z-index-cropper * 2;
 			width: 100%;
 		}
 
@@ -1241,7 +1253,6 @@
 			width: 100%;
 			left: 0;
 			bottom: 0;
-			z-index: $dd-z-index-cropper + 9;
 			flex-direction: row;
 		}
 

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

@@ -1,8 +1,8 @@
 <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">
+    <view class="dd-dp__mask" :style="{ zIndex: zIndexConfig.overlay }" @click="onMaskClick"></view>
+    <view class="dd-dp__sheet" :style="{ zIndex: zIndexConfig.popup }">
       <view class="dd-dp__toolbar">
         <text class="dd-dp__cancel" @click="onCancel">取消</text>
         <text class="dd-dp__title">{{ title }}</text>
@@ -28,6 +28,8 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import DdPortal from '../dd-portal/dd-portal.vue'
+// z-index 统一取 libs/config/zIndex.js（picker 底部面板：overlay/popup 档）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   show?: boolean
@@ -189,7 +191,6 @@ function onConfirm() {
   &__mask {
     position: fixed;
     inset: 0;
-    z-index: $dd-z-index-overlay;
     background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     opacity: 0;
     pointer-events: none;
@@ -201,7 +202,6 @@ function onConfirm() {
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: $dd-z-index-popup;
     background: var(--dd-bg-popup, #{$dd-bg-popup});
     border-radius: $dd-radius-2xl $dd-radius-2xl 0 0;
     transform: translateY(100%);

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

@@ -4,12 +4,13 @@
     <view
       class="dd-drawer__mask"
       :class="{ 'dd-drawer__mask--show': modelValue }"
+      :style="{ zIndex: zIndexConfig.dialogMask }"
       @click="onMaskClick"
     ></view>
     <view
       class="dd-drawer__panel"
       :class="[`dd-drawer__panel--${position}`, { 'dd-drawer__panel--show': modelValue }]"
-      :style="{ width: width }"
+      :style="{ width: width, zIndex: zIndexConfig.dialog }"
     >
       <view v-if="$slots.header" class="dd-drawer__header">
         <slot name="header"></slot>
@@ -43,6 +44,8 @@
 <script setup lang="ts">
 import { watch } from 'vue'
 import DdPortal from '../dd-portal/dd-portal.vue'
+// z-index 统一取 libs/config/zIndex.js（对话框族与 dd-dialog 同档：dialogMask/dialog）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   modelValue?: boolean
@@ -106,7 +109,6 @@ function onMaskClick() {
   -webkit-backdrop-filter: blur(8px);
   opacity: 0;
   visibility: hidden;
-  z-index: 1000;
   @include dd-transition(opacity 0.3s ease, visibility 0.3s ease);
 
   &--show {
@@ -123,7 +125,6 @@ function onMaskClick() {
   flex-direction: column;
   background: var(--dd-surface, #{$dd-surface});
   overflow: hidden;
-  z-index: 1001;
   // ponytail: cubic-bezier 取 iOS 标准滑出曲线，遮罩淡入同期 0.3s，合上略快收尾
   transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
   will-change: transform;

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

@@ -50,6 +50,8 @@
 import { computed, inject, ref } from 'vue'
 import DdPortal from '../dd-portal/dd-portal.vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
+// z-index 统一取 libs/config/zIndex.js（下拉面板取 base 档内 +1，盖住 bar 与遮罩）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface DropdownOption {
   text: string
@@ -93,9 +95,9 @@ const panelStyle = computed(() => {
   if (!ctx) return {}
   const winH = uni.getWindowInfo?.().windowHeight || 667
   if (direction.value === 'down') {
-    return { top: ctx.barRect.bottom + 'px', left: '0', right: '0' }
+    return { top: ctx.barRect.bottom + 'px', left: '0', right: '0', zIndex: zIndexConfig.base + 1 }
   }
-  return { bottom: winH - ctx.barRect.top + 'px', left: '0', right: '0' }
+  return { bottom: winH - ctx.barRect.top + 'px', left: '0', right: '0', zIndex: zIndexConfig.base + 1 }
 })
 
 function onTrigger() {
@@ -149,7 +151,6 @@ function onSelect(opt: DropdownOption) {
 
   &__panel {
     position: fixed;
-    z-index: 10;
     background: var(--dd-surface, #{$dd-surface});
     max-height: 50vh;
     overflow: hidden;
@@ -170,7 +171,6 @@ function onSelect(opt: DropdownOption) {
       transform: translateY(0);
       opacity: 1;
       visibility: visible;
-      z-index: 11;
       pointer-events: auto;
     }
   }

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

@@ -1,6 +1,6 @@
 <template>
-  <view class="dd-dropdown" :class="{ 'dd-dropdown--active': activeId !== null }" ref="rootRef">
-    <view class="dd-dropdown__bar">
+  <view class="dd-dropdown" :class="{ 'dd-dropdown--active': activeId !== null }" :style="rootStyle" ref="rootRef">
+    <view class="dd-dropdown__bar" :style="{ zIndex: zIndexConfig.base + 1 }">
       <slot></slot>
     </view>
     <dd-portal>
@@ -22,8 +22,10 @@ let activeMenuClose: (() => void) | null = null
 </script>
 
 <script setup lang="ts">
-import { getCurrentInstance, onMounted, onUnmounted, provide, reactive, ref } from 'vue'
+import { computed, getCurrentInstance, onMounted, onUnmounted, provide, reactive, ref } from 'vue'
 import DdPortal from '../dd-portal/dd-portal.vue'
+// z-index 统一取 libs/config/zIndex.js（激活时整档抬到 sticky，遮罩 base，bar 档内 +1）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   activeColor?: string
@@ -44,6 +46,8 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{ (e: 'change', id: number): void }>()
 
 const activeId = ref<number | null>(null)
+// 激活时整体抬到 sticky 档，避免被同页其他菜单的 bar 盖住 panel
+const rootStyle = computed(() => (activeId.value !== null ? { zIndex: zIndexConfig.sticky } : {}))
 const counter = ref(0)
 const barRect = reactive({ top: 0, bottom: 0, height: 0 })
 const overlayStyle = ref({})
@@ -71,11 +75,13 @@ function measureBar() {
         overlayStyle.value = {
           top: barRect.bottom + 'px',
           bottom: '0',
+          zIndex: zIndexConfig.base,
         }
       } else {
         overlayStyle.value = {
           top: '0',
           bottom: winH - barRect.top + 'px',
+          zIndex: zIndexConfig.base,
         }
       }
     })
@@ -142,16 +148,10 @@ onUnmounted(() => {
 .dd-dropdown {
   position: relative;
   width: 100%;
-
-  // 激活时整体抬高层级，避免被同页其他菜单的 bar 盖住 panel
-  &--active {
-    z-index: 100;
-  }
 }
 
 .dd-dropdown__bar {
   position: relative;
-  z-index: 11;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -167,7 +167,6 @@ onUnmounted(() => {
   background: var(--dd-glass-bg, #{$dd-glass-bg});
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  z-index: 9;
   opacity: 0;
   visibility: hidden;
   @include dd-transition(opacity 0.3s, visibility 0.3s);