@didaoktv/didaoui-uniapp 1.4.2 → 2.0.0

package/components/dd-pull-refresh/dd-pull-refresh.vue

@@ -3,9 +3,9 @@
     <view
       class="dd-pull-refresh__track"
       :class="{ 'dd-pull-refresh__track--anim': !pulling }"
-      :style="{ transform: `translateY(${distance}px)` }"
+      :style="{ transform: `translateY(${distance}px)`, zIndex: zIndexConfig.base + 1 }"
     >
-      <view class="dd-pull-refresh__head" :style="{ height: headHeightPx + 'px' }">
+      <view class="dd-pull-refresh__head" :style="{ height: headHeightPx + 'px', zIndex: zIndexConfig.base }">
         <view class="dd-pull-refresh__head-inner">
           <view v-if="status === 'loading'" class="dd-pull-refresh__spinner"></view>
           <text class="dd-pull-refresh__text">{{ statusText }}</text>
@@ -32,6 +32,8 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
+// z-index 统一取 libs/config/zIndex.js（内容层 base 档内 +1，下拉头垫底取 base 档）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 type Status = 'pulling' | 'loosing' | 'loading' | 'success'
 
@@ -182,7 +184,6 @@ watch(
   &__track {
     position: relative;
     height: 100%;
-    z-index: 1;
     background: var(--dd-bg, #{$dd-bg});
 
     &--anim {
@@ -197,7 +198,6 @@ watch(
     right: 0;
     overflow: hidden;
     transform: translateY(-100%);
-    z-index: 0;
   }
 
   &__head-inner {

package/components/dd-qrcode/dd-qrcode.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
     <view class="dd-qrcode"
           :id="rootId"
           :style="{
@@ -496,13 +496,6 @@ export default {
 
     &__content {
         position: relative;
-
-        &__canvas {
-            position: fixed;
-            top: -99999rpx;
-            left: -99999rpx;
-            z-index: -99999;
-        }
     }
 }
 </style>

package/components/dd-room-card/dd-room-card.vue

@@ -9,7 +9,7 @@
     <!-- grid 模式: 方形卡 + 顶部状态栏 -->
     <template v-if="view === 'grid'">
       <view class="dd-room-card__topbar"></view>
-      <view v-if="type === 'vip'" class="dd-room-card__vip-tag"><text>VIP</text></view>
+      <view v-if="type === 'vip'" class="dd-room-card__vip-tag" :style="{ zIndex: zIndexConfig.base + 1 }"><text>VIP</text></view>
       <view class="dd-room-card__grid-inner">
         <text class="dd-room-card__no">{{ roomNo }}</text>
         <view class="dd-room-card__status">
@@ -44,6 +44,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+// z-index 统一取 libs/config/zIndex.js（VIP 角标抬到卡片内容之上取 base 档内 +1）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   view?: 'grid' | 'list'
@@ -169,7 +171,6 @@ function onClick() {
   position: absolute;
   top: 12rpx;
   right: 12rpx;
-  z-index: 2;
   padding: 2rpx 12rpx;
   background: var(--dd-gradient-primary, #{$dd-gradient-primary});
   border-radius: $dd-radius-sm;

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

@@ -13,6 +13,7 @@
         :key="index"
         class="dd-seg__item"
         :class="{ 'dd-seg__item--active': index === modelValue }"
+        :style="{ zIndex: zIndexConfig.base }"
         @click="onSelect(index)"
       >
         <text class="dd-seg__label">{{ labelOf(opt) }}</text>
@@ -44,6 +45,8 @@
 <script setup lang="ts">
 import { nextTick, onMounted, ref, watch } from 'vue'
 import { getCurrentInstance } from 'vue'
+// z-index 统一取 libs/config/zIndex.js（分段项盖住滑块指示器取 base 档）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   modelValue?: number
@@ -128,7 +131,6 @@ watch(() => props.options, measure)
 
   .dd-seg__item {
     position: relative;
-    z-index: 1;
     min-width: 120rpx;
     padding: 12rpx $dd-space-4;
     @include dd-flex-center;

package/components/dd-step/dd-step.vue

@@ -42,6 +42,8 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
+// z-index 统一取 libs/config/zIndex.js（圆点/连接线的层内叠放取 base 档）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 type StepStatus = 'wait' | 'process' | 'finish'
 
@@ -81,11 +83,15 @@ const isActive = computed(() => status.value === 'finish' || status.value === 'p
 const circleStyle = computed(() => ({
   background: isActive.value ? activeColor.value : '#2A2A2A',
   color: isActive.value ? '#FFFFFF' : inactiveColor.value,
+  // z-index 统一取 libs/config/zIndex.js（圆点 base 档内 +1，盖住连接线）
+  zIndex: zIndexConfig.base + 1,
 }))
 
 // ponytail: 水平连接线整段按本步骤 status 着色，current/首个 wait 左半段颜色为近似值
 const lineStyle = computed(() => ({
   background: status.value === 'finish' ? activeColor.value : inactiveColor.value,
+  // z-index 统一取 libs/config/zIndex.js（连接线垫底取 base 档）
+  zIndex: zIndexConfig.base,
 }))
 </script>
 
@@ -125,7 +131,6 @@ const lineStyle = computed(() => ({
     right: 0;
     height: 1px;
     transform: translateY(-50%);
-    z-index: 0;
 
     &--first {
       left: 50%;
@@ -143,7 +148,6 @@ const lineStyle = computed(() => ({
 
   &__circle {
     position: relative;
-    z-index: 1;
     width: $dd-size-icon-md;
     height: $dd-size-icon-md;
     border-radius: $dd-radius-full;

package/components/dd-sticky/dd-sticky.vue

@@ -10,6 +10,8 @@
 
 <script setup lang="ts">
 import { computed, getCurrentInstance, onMounted, onUnmounted, ref } from 'vue'
+// z-index 统一取 libs/config/zIndex.js：默认吸顶层级取 sticky 档（zIndex prop 保留可覆盖）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   offsetTop?: number // rpx
@@ -19,7 +21,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   offsetTop: 0,
-  zIndex: 99,
+  zIndex: zIndexConfig.sticky,
   disabled: false,
 })
 

package/components/dd-submit-bar/dd-submit-bar.vue

@@ -4,7 +4,7 @@
     class="dd-submit-bar__placeholder"
     :class="{ 'dd-submit-bar__placeholder--safe': safeAreaInsetBottom }"
   ></view>
-  <view class="dd-submit-bar" :class="{ 'dd-submit-bar--safe': safeAreaInsetBottom }">
+  <view class="dd-submit-bar" :class="{ 'dd-submit-bar--safe': safeAreaInsetBottom }" :style="{ zIndex: zIndexConfig.sticky }">
     <slot name="top"></slot>
     <view v-if="hasTip" class="dd-submit-bar__tip">
       <dd-icon v-if="tipIcon" :name="tipIcon" class="dd-submit-bar__tip-icon" />
@@ -44,6 +44,8 @@ import type { CSSProperties } from 'vue'
 import DdButton from '../dd-button/dd-button.vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
 import DdPrice from '../dd-price/dd-price.vue'
+// z-index 统一取 libs/config/zIndex.js（底部固定条取 sticky 档）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   /** 提示文案（tip 区域，如「小计不含服务费」） */
@@ -128,7 +130,6 @@ function onSubmit() {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: $dd-z-index-sticky;
   background: var(--dd-bg-card, #{$dd-bg-card});
 
   &--safe {

package/components/dd-swipe/dd-swipe.vue

@@ -14,7 +14,7 @@
       <slot></slot>
     </swiper>
     <slot name="indicator" :active="current" :count="count">
-      <view v-if="showIndicators && count > 1" class="dd-swipe__indicators" :class="`dd-swipe__indicators--${vertical ? 'vertical' : 'horizontal'}`">
+      <view v-if="showIndicators && count > 1" class="dd-swipe__indicators" :class="`dd-swipe__indicators--${vertical ? 'vertical' : 'horizontal'}`" :style="{ zIndex: zIndexConfig.base + 1 }">
         <view
           v-for="i in count"
           :key="i"
@@ -30,6 +30,8 @@
 
 <script setup lang="ts">
 import { computed, provide, ref } from 'vue'
+// z-index 统一取 libs/config/zIndex.js（指示点盖住轮播内容取 base 档内 +1）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   width?: string
@@ -113,7 +115,6 @@ defineExpose({ jumpTo, current })
   &__indicators {
     position: absolute;
     display: flex;
-    z-index: 2;
 
     &--horizontal {
       bottom: $dd-space-3;

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

@@ -1,7 +1,7 @@
 <template>
   <view class="dd-swipe-action" :class="{ 'dd-swipe-action--disabled': disabled }">
     <!-- 左侧操作层 (右滑露出) -->
-    <view class="dd-swipe-action__actions dd-swipe-action__actions--left" :style="{ width: leftWidthPx + 'px' }">
+    <view class="dd-swipe-action__actions dd-swipe-action__actions--left" :style="{ width: leftWidthPx + 'px', zIndex: zIndexConfig.base }">
       <view
         v-for="(action, i) in leftActions"
         :key="'l' + i"
@@ -14,7 +14,7 @@
       </view>
     </view>
     <!-- 右侧操作层 (左滑露出) -->
-    <view class="dd-swipe-action__actions dd-swipe-action__actions--right" :style="{ width: rightWidthPx + 'px' }">
+    <view class="dd-swipe-action__actions dd-swipe-action__actions--right" :style="{ width: rightWidthPx + 'px', zIndex: zIndexConfig.base }">
       <view
         v-for="(action, i) in rightActions"
         :key="'r' + i"
@@ -30,7 +30,7 @@
     <view
       class="dd-swipe-action__content"
       :class="{ 'dd-swipe-action__content--anim': animating }"
-      :style="{ transform: `translateX(${translateX}px)` }"
+      :style="{ transform: `translateX(${translateX}px)`, zIndex: zIndexConfig.base + 1 }"
       @touchstart="onTouchStart"
       @touchmove.stop.prevent="onTouchMove"
       @touchend="onTouchEnd"
@@ -44,6 +44,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
+// z-index 统一取 libs/config/zIndex.js（操作层 base 档，内容层档内 +1 盖住操作层）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface SwipeAction {
   text?: string
@@ -187,7 +189,6 @@ defineExpose({ close })
     top: 0;
     bottom: 0;
     display: flex;
-    z-index: 0;
 
     &--left {
       left: 0;
@@ -234,7 +235,6 @@ defineExpose({ close })
 
   &__content {
     position: relative;
-    z-index: 1;
     width: 100%;
     background: var(--dd-bg-elevated, #{$dd-bg-elevated});
     transform: translateX(0);

package/components/dd-tabbar/dd-tabbar.vue

@@ -11,6 +11,7 @@
       'dd-tabbar--border': border,
       'dd-tabbar--safe': safeAreaInsetBottom,
     }"
+    :style="{ zIndex: zIndexConfig.sticky }"
   >
     <slot></slot>
   </view>
@@ -18,6 +19,8 @@
 
 <script setup lang="ts">
 import { computed, provide, ref } from 'vue'
+// z-index 统一取 libs/config/zIndex.js（fixed 时吸底层级取 sticky 档；非 fixed 时为 static，z-index 天然失效）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   modelValue?: string | number
@@ -96,7 +99,6 @@ provide('ddTabbar', {
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: $dd-z-index-sticky;
   }
 }
 

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

@@ -1,6 +1,6 @@
 <template>
   <dd-portal>
-  <view class="dd-toast" :class="[`dd-toast--${toastState.position}`, { 'dd-toast--show': toastState.visible }]">
+  <view class="dd-toast" :class="[`dd-toast--${toastState.position}`, { 'dd-toast--show': toastState.visible }]" :style="{ zIndex: zIndexConfig.toast }">
     <view class="dd-toast__capsule">
       <view v-if="showIcon" class="dd-toast__icon">
         <view v-if="toastState.type === 'loading'" class="dd-toast__spinner"></view>
@@ -81,6 +81,8 @@ export function showError(message: string) {
 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（toast 必须压过 dialog/popup/keyboard 等一切弹出层）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 // text 类型强制隐藏图标
 const showIcon = computed(() => toastState.icon && toastState.type !== 'text')
@@ -105,7 +107,7 @@ const iconName = computed(() => {
   transform: translateX(-50%) scale(0.9);
   opacity: 0;
   visibility: hidden;
-  z-index: $dd-z-index-toast;
+  /* z-index 由模板注入（libs/config/zIndex.js） */
   @include dd-no-touch; // pointer-events none
   @include dd-transition(opacity 0.25s ease, transform 0.25s ease, visibility 0.25s);
 

package/components/dd-top-navbar/dd-top-navbar.vue

@@ -6,6 +6,7 @@
       'dd-topbar--transparent': transparent,
       'dd-topbar--border': border && !transparent,
     }"
+    :style="{ zIndex: zIndexConfig.sticky }"
   >
     <view
       v-if="fixed && statusBarHeight > 0"
@@ -39,6 +40,8 @@
 import { computed } from 'vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
 import { getStatusBarHeight, isH5 } from '../../libs/utils'
+// z-index 统一取 libs/config/zIndex.js（fixed 时吸顶层级取 sticky 档；非 fixed 时为 static，z-index 天然失效）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   title?: string
@@ -102,7 +105,6 @@ function onBack() {
     top: 0;
     left: 0;
     right: 0;
-    z-index: $dd-z-index-sticky;
   }
 
   &--transparent {

package/index.ts

@@ -42,9 +42,10 @@ import DdDropdownItem from './components/dd-dropdown-item/dd-dropdown-item.vue'
 import DdSidebar from './components/dd-sidebar/dd-sidebar.vue'
 import DdSidebarItem from './components/dd-sidebar-item/dd-sidebar-item.vue'
 
-// === Layout (9) ===
+// === Layout (10) ===
 import DdCard from './components/dd-card/dd-card.vue'
 import DdRoomCard from './components/dd-room-card/dd-room-card.vue'
+import DdGoodsCard from './components/dd-goods-card/dd-goods-card.vue'
 import DdFeatureGrid from './components/dd-feature-grid/dd-feature-grid.vue'
 import DdSticky from './components/dd-sticky/dd-sticky.vue'
 import DdBillDetail from './components/dd-bill-detail/dd-bill-detail.vue'
@@ -120,7 +121,7 @@ const components = {
   DdDrawer, DdTabbar, DdTabbarItem, DdBacktop,
   DdCollapse, DdCollapseItem, DdDropdownMenu, DdDropdownItem,
   DdSidebar, DdSidebarItem,
-  DdCard, DdRoomCard, DdFeatureGrid, DdSticky, DdBillDetail, DdWorkorderCard, DdCalendar, DdQrcode,
+  DdCard, DdRoomCard, DdGoodsCard, DdFeatureGrid, DdSticky, DdBillDetail, DdWorkorderCard, DdCalendar, DdQrcode,
   DdSubmitBar,
   DdTag, DdStatCard, DdChampionCard, DdAvatar, DdAvatarGroup, DdBadge,
   DdListCell, DdCell, DdCellGroup, DdCountDown, DdDivider,
@@ -152,7 +153,7 @@ export {
   DdDrawer, DdTabbar, DdTabbarItem, DdBacktop,
   DdCollapse, DdCollapseItem, DdDropdownMenu, DdDropdownItem,
   DdSidebar, DdSidebarItem,
-  DdCard, DdRoomCard, DdFeatureGrid, DdSticky, DdBillDetail, DdWorkorderCard, DdCalendar, DdQrcode,
+  DdCard, DdRoomCard, DdGoodsCard, DdFeatureGrid, DdSticky, DdBillDetail, DdWorkorderCard, DdCalendar, DdQrcode,
   DdSubmitBar,
   DdTag, DdStatCard, DdChampionCard, DdAvatar, DdAvatarGroup, DdBadge,
   DdListCell, DdCell, DdCellGroup, DdCountDown, DdDivider,

package/libs/config/zIndex.d.ts

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

package/libs/config/zIndex.js

@@ -1,23 +1,16 @@
-// uniapp在H5中各API的z-index值如下：
-/**
- * actionsheet: 999
- * modal: 999
- * navigate: 998
- * tabbar: 998
- * toast: 999
- */
+// z-index 唯一真源档位表（ADR 0013）：组件只准选档或档内 +1 派生，禁止魔数。
+// uniapp 在 H5 中各 API 的 z-index 平台事实（页面层必须低于它们）：
+//   actionsheet: 999 / modal: 999 / toast: 999 / navigate: 998 / tabbar: 998
 
 export default {
-    toast: 10090,
-    noNetwork: 10080,
-    // 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,
-    indexListSticky: 965
+    base: 1,        // 普通层内叠放
+    sticky: 100,    // 页面内吸顶/吸底/导航族/浮钮（H5 须低于平台弹层 998）
+    overlay: 2000,  // 遮罩
+    popup: 2001,    // 弹层面板（overlay+1）
+    dialogMask: 2010, // 对话框遮罩
+    dialog: 2011,     // 对话框面板（dialogMask+1）
+    noNetwork: 2020,  // 断网提示
+    cropper: 2025,    // 全屏裁剪工作界面（非提示类，须低于 loading/toast）
+    loading: 2030,    // 全屏加载
+    toast: 2040,      // 提示（最高）
 }

package/package.json

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

package/scss/_variables.scss

@@ -359,15 +359,3 @@ $dd-popup-duration: 0.3s !default;
 $dd-popover-offset: 8px !default;
 $dd-step-inactive-color: $dd-neutral-500 !default;
 $dd-step-active-color: $dd-primary-500 !default;
-
-// === z-index 层级 ===
-$dd-z-index-base: 1 !default;
-$dd-z-index-sticky: 100 !default;
-$dd-z-index-fixed: 1000 !default;
-$dd-z-index-overlay: 2000 !default;
-$dd-z-index-popup: 2001 !default;
-$dd-z-index-modal: 3000 !default;
-$dd-z-index-toast: 4000 !default;
-$dd-z-index-loading: 5000 !default;
-// 全屏裁剪覆盖层：三画布 + 操作条需压过全部全局层级
-$dd-z-index-cropper: 100000 !default;