@didaoktv/didaoui-uniapp 1.4.1 → 1.4.3

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

@@ -0,0 +1,260 @@
+<template>
+  <view
+    class="dd-goods-card"
+    :class="[
+      `dd-goods-card--${layout}`,
+      { 'dd-goods-card--disabled': disabled },
+    ]"
+    :style="customStyle"
+    :hover-class="hoverable ? 'dd-goods-card--hover' : ''"
+    :hover-stay-time="120"
+    @click="onClick"
+  >
+    <!-- 缩略图 + 金色角标 -->
+    <view class="dd-goods-card__thumb">
+      <slot name="thumb">
+        <image
+          class="dd-goods-card__thumb-img"
+          :src="thumb"
+          :mode="thumbMode"
+        ></image>
+      </slot>
+      <text v-if="tag" class="dd-goods-card__tag">{{ tag }}</text>
+    </view>
+
+    <!-- 信息区 -->
+    <view class="dd-goods-card__body">
+      <slot name="default">
+        <text v-if="title" class="dd-goods-card__title">{{ title }}</text>
+        <text v-if="desc" class="dd-goods-card__desc">{{ desc }}</text>
+
+        <view class="dd-goods-card__price-row">
+          <view class="dd-goods-card__price">
+            <dd-price
+              v-if="price !== undefined && price !== null && price !== ''"
+              :rate="price"
+              :currency="currency"
+              :decimal-length="decimalLength"
+            ></dd-price>
+            <text v-if="originPrice" class="dd-goods-card__price-origin">
+              {{ currency }}{{ originPrice }}
+            </text>
+          </view>
+          <text v-if="num" class="dd-goods-card__num">×{{ num }}</text>
+        </view>
+
+        <view v-if="$slots.bottom" class="dd-goods-card__bottom">
+          <slot name="bottom"></slot>
+        </view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import DdPrice from '../dd-price/dd-price.vue'
+
+interface Props {
+  /** 商品图片地址 */
+  thumb?: string
+  /** 商品名称 */
+  title?: string
+  /** 商品描述/规格说明 */
+  desc?: string
+  /** 单价（元，直接展示）；不传不渲染 */
+  price?: string | number
+  /** 划线原价（元，直接展示） */
+  originPrice?: string | number
+  /** 货币符号 */
+  currency?: string
+  /** 价格小数位数 */
+  decimalLength?: string | number
+  /** 角标文案（如「热卖」「售罄」） */
+  tag?: string
+  /** 布局：horizontal 横向（左图右文）/ vertical 竖向（上图下文） */
+  layout?: 'horizontal' | 'vertical'
+  /** 已选数量（右下角，不传不渲染） */
+  num?: string | number
+  /** 置灰（售罄等不可点场景） */
+  disabled?: boolean
+  /** 图片裁剪模式，透传 image mode */
+  thumbMode?: string
+  /** 是否启用按压反馈 */
+  hoverable?: boolean
+  /** 自定义根节点样式 */
+  customStyle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  thumb: '',
+  title: '',
+  desc: '',
+  price: undefined,
+  originPrice: '',
+  currency: '¥',
+  decimalLength: 2,
+  tag: '',
+  layout: 'horizontal',
+  num: '',
+  disabled: false,
+  thumbMode: 'aspectFill',
+  hoverable: true,
+  customStyle: '',
+})
+
+const emit = defineEmits<{ (e: 'click', val: Event): void }>()
+
+function onClick(e: Event) {
+  if (props.disabled) return
+  emit('click', e)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-goods-card {
+  display: flex;
+  box-sizing: border-box;
+  background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+  // radius 非可换肤 token，走 SCSS 值（与 dd-card 同口径）
+  border-radius: $dd-radius-lg;
+  box-shadow: var(--dd-shadow-1, #{$dd-shadow-1});
+  overflow: hidden;
+  @include dd-transition(all 0.3s ease);
+
+  &--hover {
+    transform: translateY(-4rpx);
+    box-shadow: var(--dd-shadow-2, #{$dd-shadow-2});
+  }
+
+  // ponytail: 置灰用整卡降透明度，配合角标「售罄」示意；如需保留文字可读性再改 per-part 置灰
+  &--disabled {
+    opacity: 0.55;
+  }
+
+  &__thumb {
+    position: relative;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    &-img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__tag {
+    position: absolute;
+    top: $dd-space-1;
+    left: $dd-space-1;
+    padding: 2rpx $dd-space-2;
+    border-radius: $dd-radius-sm;
+    background: linear-gradient(
+      135deg,
+      $dd-primary-600,
+      var(--dd-primary, #{$dd-primary})
+    );
+    color: var(--dd-primary-contrast, #{$dd-primary-contrast});
+    font-size: 20rpx;
+    line-height: 1.4;
+    z-index: 1;
+  }
+
+  &__body {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__title {
+    color: var(--dd-text-primary, #{$dd-text-primary});
+    font-size: 28rpx;
+    font-weight: 600;
+    line-height: 1.4;
+    @include dd-ellipsis;
+  }
+
+  &__desc {
+    margin-top: $dd-space-1;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
+    font-size: 24rpx;
+    line-height: 1.4;
+    // 两行省略
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  &__price-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: auto;
+  }
+
+  &__price {
+    display: inline-flex;
+    align-items: baseline;
+    color: var(--dd-error-400, #{$dd-error-400});
+    font-weight: 600;
+  }
+
+  &__price-origin {
+    margin-left: $dd-space-2;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
+    font-size: 22rpx;
+    font-weight: 400;
+    text-decoration: line-through;
+  }
+
+  &__num {
+    margin-left: $dd-space-2;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
+    font-size: 24rpx;
+  }
+
+  &__bottom {
+    margin-top: $dd-space-2;
+    width: 100%;
+  }
+}
+
+// 横向：左图右文，图 140rpx 见方
+.dd-goods-card--horizontal {
+  padding: $dd-space-3;
+
+  .dd-goods-card__thumb {
+    width: 140rpx;
+    height: 140rpx;
+    border-radius: $dd-radius-md;
+  }
+
+  .dd-goods-card__body {
+    padding-left: $dd-space-3;
+  }
+
+  .dd-goods-card__title {
+    @include dd-ellipsis;
+  }
+}
+
+// 竖向：上图下文，图占满整宽
+.dd-goods-card--vertical {
+  flex-direction: column;
+  padding: 0;
+
+  .dd-goods-card__thumb {
+    width: 100%;
+    aspect-ratio: 1;
+  }
+
+  .dd-goods-card__body {
+    padding: $dd-space-3;
+  }
+}
+</style>

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

@@ -12,11 +12,11 @@
   >
     <view class="dd-sidebar-item__text">
       <slot name="title">{{ title }}</slot>
+      <view v-if="badge" class="dd-sidebar-item__badge">
+        <text class="dd-sidebar-item__badge-text">{{ badge }}</text>
+      </view>
+      <view v-else-if="dot" class="dd-sidebar-item__dot"></view>
     </view>
-    <view v-if="badge" class="dd-sidebar-item__badge">
-      <text class="dd-sidebar-item__badge-text">{{ badge }}</text>
-    </view>
-    <view v-else-if="dot" class="dd-sidebar-item__dot"></view>
   </view>
 </template>
 
@@ -91,23 +91,26 @@ function onClick() {
   }
 
   &--disabled {
+    // ponytail: 用透明度淡化，随主题自适应；文字对比度随之下降以强化「禁用」观感
+    opacity: 0.45;
     color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   }
 
   &__text {
+    display: inline-flex;
+    align-items: center;
     @include dd-ellipsis(1);
   }
 
   &__badge {
-    position: absolute;
-    top: $dd-space-2;
-    right: $dd-space-2;
     min-width: $dd-space-4;
     height: $dd-space-4;
+    margin-left: $dd-space-1;
     padding: 0 $dd-space-1;
     border-radius: $dd-radius-full;
     background: var(--dd-error, #{$dd-error});
     @include dd-flex-center;
+    flex-shrink: 0;
   }
 
   &__badge-text {
@@ -117,11 +120,10 @@ function onClick() {
   }
 
   &__dot {
-    position: absolute;
-    top: $dd-space-2;
-    right: $dd-space-2;
+    flex-shrink: 0;
     width: $dd-space-2;
     height: $dd-space-2;
+    margin-left: $dd-space-1;
     border-radius: 50%;
     background: var(--dd-error, #{$dd-error});
   }

package/components/dd-tree-select/dd-tree-select.vue

@@ -164,10 +164,12 @@ function onItemClick(child: TreeSelectChild) {
   }
 
   &__item {
+    position: relative;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     min-height: 96rpx;
-    padding: 0 $dd-space-4;
+    padding: 0 88rpx 0 $dd-space-4;
     font-weight: 600;
     color: var(--dd-text-primary, #{$dd-text-primary});
 
@@ -176,8 +178,7 @@ function onItemClick(child: TreeSelectChild) {
     }
 
     &--active {
-      background: var(--dd-primary, #{$dd-primary});
-      color: $dd-neutral-50;
+      color: var(--dd-primary, #{$dd-primary});
     }
 
     &--disabled {
@@ -196,9 +197,12 @@ function onItemClick(child: TreeSelectChild) {
   }
 
   &__selected {
-    margin-left: $dd-space-2;
+    position: absolute;
+    top: 50%;
+    right: $dd-space-4;
+    transform: translateY(-50%);
     font-size: 32rpx;
-    color: $dd-neutral-50;
+    color: var(--dd-primary, #{$dd-primary});
   }
 }
 </style>

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/package.json

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

package/scss/_variables.scss

@@ -116,7 +116,7 @@ $dd-surface-container-low: $dd-neutral-800 !default;
 $dd-surface-container: $dd-neutral-800 !default;
 $dd-surface-container-high: $dd-neutral-700 !default;
 $dd-surface-container-highest: $dd-neutral-600 !default;
-$dd-bg-section: $dd-neutral-800 !default;
+$dd-bg-section: $dd-neutral-900 !default;
 $dd-bg-card: $dd-neutral-800 !default;
 $dd-bg-elevated: $dd-neutral-800 !default;
 // 弹出层专用底色：比卡片（neutral-800）亮一档，形成 页面→卡片→弹出层 的抬升层级