@didaoktv/didaoui-uniapp 1.3.9 → 1.4.1

package/README.md

@@ -6,7 +6,7 @@
 
 - **帝王级配色** — 帝王金 `#F5A623` + 皇家蓝 `#2D4BA0` 双主色，暗色主题默认
 - **玻璃拟态设计** — 多层级玻璃拟态效果，打造高端夜店沉浸感
-- **90 个精心打磨的组件** — 覆盖表单、导航、布局卡片、数据展示、浮层反馈、交互、画布七大类，含 KTV 业务组件（房态卡、账单明细、工单卡、日历、二维码）
+- **95 个精心打磨的组件** — 覆盖表单、导航、布局卡片、数据展示、浮层反馈、交互、画布七大类，含 KTV 业务组件（房态卡、账单明细、工单卡、日历、二维码）
 - **Vue3 + TypeScript** — 完整类型定义，Composition API
 - **多端兼容** — H5 / 微信小程序 / 抖音小程序 / Android / iOS
 
@@ -50,10 +50,10 @@ import { DdButton, DdInput } from '@didaoktv/didaoui-uniapp'
 
 | 分类    | 数量 | 组件                                                                                                                                            |
 | ----- | -- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| 表单输入  | 23 | Button, CodeButton, Input, Form, Field, Switch, Checkbox, CheckboxGroup, Radio, RadioGroup, Stepper, SearchBar, Slider, DatePicker, Picker, Rate, Upload, Icon, Keyboard, NumberKeyboard, CarKeyboard, Cascader, GoodsSku |
-| 导航    | 12 | Navigation, TopNavbar, SwipeableTab, SegmentedTab, Drawer, Tabbar, TabbarItem, Backtop, Collapse, CollapseItem, DropdownMenu, DropdownItem    |
-| 布局/卡片 | 8  | Card, RoomCard, FeatureGrid, Sticky, BillDetail, WorkorderCard, Calendar, Qrcode                                                              |
-| 数据展示  | 24 | Tag, StatCard, ChampionCard, Avatar, AvatarGroup, Badge, ListCell, Cell, CellGroup, CountDown, Divider, Image, Progress, Skeleton, EmptyState, Step, Steps, Text, Link, Copy, Album, Coupon, Parse, Markdown |
+| 表单输入  | 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                                                              |
+| 数据展示  | 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                                                                                         |
 | 小程序专属 | 2  | CapsuleButton, MiniProgramNavbar                                                                                                             |
@@ -77,7 +77,7 @@ import { DdButton, DdInput } from '@didaoktv/didaoui-uniapp'
 
 ### 圆角
 
-2 / 4 / 8 / 12 / 16 / 9999 px (Vant 对齐小圆角)
+2 / 4 / 8 / 12 / 16 / 9999 px
 
 ### 间距
 
@@ -144,13 +144,13 @@ $dd-primary: #d32f2f;
 
 ## 新增业务组件（2026-08-22 纳入设计系统）
 
-> 新组件统一以主流组件库（Vant 等）同名/同类组件为 API 设计基准，符合 uni-app 多端规范，只消费上层 `scss/_variables.scss` 既有 token。
+> 新组件统一以主流组件库同名/同类组件为 API 设计基准，符合 uni-app 多端规范，只消费上层 `scss/_variables.scss` 既有 token。
 
 | 组件 | 用途 | 参考基准 |
 |------|------|---------|
-| `dd-bill-detail` | 账单明细（商品项/小计/合计/支付状态/操作按钮 slot） | Vant `Card` + GoodsAction 聚合 |
-| `dd-workorder-card` | 工单条目卡片（类型/状态/进度/布置 checklist/完成确认） | Vant `Card` + `Tag` + Checklist |
-| `dd-calendar` | 月历 + 时段（日期多选区间/禁选/时段格） | Vant `Calendar` + 主流日历组件 |
+| `dd-bill-detail` | 账单明细（商品项/小计/合计/支付状态/操作按钮 slot） | 卡片 + 底部操作条聚合 |
+| `dd-workorder-card` | 工单条目卡片（类型/状态/进度/布置 checklist/完成确认） | 卡片 + 标签 + 清单聚合 |
+| `dd-calendar` | 月历 + 时段（日期多选区间/禁选/时段格） | 主流日历组件 |
 | `dd-qrcode` | 二维码渲染（canvas，内容/尺寸/前景色/背景色/logo） | 主流二维码组件 API |
 
 ## License

package/components/dd-button/dd-button.vue

@@ -198,7 +198,7 @@ function onClick(e: Event) {
   color: var(--dd-error-contrast, #{$dd-error-contrast});
 }
 
-// plain：线框按钮，透明底 + 保留各 type 的主题色文字/描边（对齐 Vant 语义）
+// plain：线框按钮，透明底 + 保留各 type 的主题色文字/描边
 .dd-btn--plain {
   background: transparent;
   border-color: currentColor;

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

@@ -124,12 +124,12 @@ 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 全部基线对齐
+  // 恒定行高（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），内容天然居中
+  // 高度 = 垂直 padding + 行高（12/16px × 2 + 23.8px ≈ 96/112rpx），内容天然居中
   &--normal {
     padding-top: $dd-space-3;
     padding-bottom: $dd-space-3;
@@ -159,7 +159,7 @@ function handleClick(e: Event) {
     margin-right: $dd-space-2;
     display: flex;
     align-items: center;
-    // ponytail: stretch 拉伸到兄弟 content 高度使图标居中于首行；title+label 多行时会居中于整块而非首行（vant 是贴首行），如需精确可改为固定行高盒
+    // ponytail: stretch 拉伸到兄弟 content 高度使图标居中于首行；title+label 多行时会居中于整块而非首行，如需精确可改为固定行高盒
     align-self: stretch;
   }
 

package/components/dd-checkbox/dd-checkbox.vue

@@ -43,7 +43,7 @@ const props = withDefaults(defineProps<Props>(), {
   indeterminate: false,
 })
 
-// 必须配合 dd-checkbox-group 使用（vant/uview 同款约定）
+// 必须配合 dd-checkbox-group 使用
 const group = inject<{
   props: { modelValue: any[]; disabled: boolean }
   isMaxed: { value: boolean }

package/components/dd-field/dd-field.vue

@@ -388,7 +388,7 @@ function scrollIntoView() {
   uni.pageScrollTo({ selector: `.${rootClass}`, duration: 300 })
 }
 
-/** 手动聚焦/失焦（vant focus()/blur() 对齐；blur 经 uni.hideKeyboard 收起键盘） */
+/** 手动聚焦/失焦（blur 经 uni.hideKeyboard 收起键盘） */
 const focusState = ref(false)
 
 function focusField() {
@@ -426,7 +426,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
 @import '../../scss/variables';
 @import '../../scss/mixins';
 
-// 样式对齐 vant 4 Field（cell：padding 10px 16px / line-height 24px / 16px 字号 / label 6.2em 主文本色）
+// 样式基准（cell：padding 10px 16px / line-height 24px / 16px 字号 / label 6.2em 主文本色）
 // 颜色全部走 $dd-* 主题 token；1px 发丝线为刻意的例外
 .dd-field {
   position: relative;
@@ -442,7 +442,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
   color: var(--dd-text-primary, #{$dd-text-primary});
   background: var(--dd-bg-elevated, #{$dd-bg-elevated});
 
-  // vant 式发丝线：两侧缩进 32rpx
+  // 发丝线：两侧缩进 32rpx
   &::after {
     position: absolute;
     box-sizing: border-box;
@@ -626,7 +626,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
     text-align: right;
   }
 
-  // error：输入文字与 placeholder 变红，label 不变（vant 行为）
+  // error：输入文字与 placeholder 变红，label 不变
   &--error {
     .dd-field__control,
     .dd-field__control::placeholder {
@@ -634,7 +634,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
     }
   }
 
-  // disabled：仅文字变灰，不整体降透明度（vant 行为）
+  // disabled：仅文字变灰，不整体降透明度
   &--disabled {
     .dd-field__label,
     .dd-field__left-icon {

package/components/dd-form/rules.ts

@@ -1,5 +1,5 @@
 /**
- * dd-form 轻量校验引擎（vant runRules 思想，自研无依赖）
+ * dd-form 轻量校验引擎（自研无依赖）
  * 规则分散在各 dd-field 上，dd-form 只做调度。
  */
 
@@ -36,7 +36,7 @@ export interface DdFieldRule {
   pattern?: RegExp
   /**
    * 自定义校验：返回 true=通过，false=用 message 报错，
-   * 返回 string=直接以该字符串为错误消息（vant 语义）；支持 Promise
+   * 返回 string=直接以该字符串为错误消息；支持 Promise
    */
   validator?: (value: any) => boolean | string | Promise<boolean | string>
   /** 触发时机；缺省 = 任意触发都执行 */

package/components/dd-price/dd-price.vue

@@ -0,0 +1,84 @@
+<template>
+  <view v-if="pricePair" class="dd-price">
+    <text v-if="prefix" class="dd-price__prefix">{{ prefix }}</text>
+    <text class="dd-price__currency">{{ currency }}</text>
+    <text class="dd-price__integer">{{ pricePair[0] }}</text>
+    <text v-if="pricePair[1]" class="dd-price__decimal">{{ mark }}{{ pricePair[1] }}</text>
+    <text v-if="suffix" class="dd-price__suffix">{{ suffix }}</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** 金额（元，直接展示不除以 100）；不传不渲染 */
+  rate?: number | string
+  /** 小数位数（rate 为 number 时生效，0 隐藏小数） */
+  decimalLength?: string | number
+  /** 货币符号 */
+  currency?: string
+  /** 整数/小数分隔符 */
+  mark?: string
+  /** 额外前缀文案（货币符之前） */
+  prefix?: string
+  /** 额外后缀文案（如「起」） */
+  suffix?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  rate: undefined,
+  decimalLength: 2,
+  currency: '¥',
+  mark: '.',
+  prefix: '',
+  suffix: '',
+})
+
+const pricePair = computed<string[] | null>(() => {
+  if (props.rate === undefined || props.rate === null || props.rate === '') return null
+  if (typeof props.rate === 'number') {
+    const len = Math.max(0, Number(props.decimalLength) || 0)
+    return props.rate.toFixed(len).split('.')
+  }
+  return props.rate.split('.')
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-price {
+  display: inline-flex;
+  align-items: baseline;
+  // ponytail: 颜色跟随使用方（inherit），如 submit-bar 的红价由使用方控制
+  color: inherit;
+  font-weight: 600;
+  line-height: 1;
+
+  &__prefix,
+  &__suffix {
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
+    font-size: 24rpx;
+    font-weight: 400;
+  }
+
+  &__prefix {
+    margin-right: $dd-space-1;
+  }
+
+  &__suffix {
+    margin-left: $dd-space-1;
+  }
+
+  &__currency,
+  &__decimal {
+    font-size: 24rpx;
+  }
+
+  &__integer {
+    font-size: 36rpx;
+  }
+}
+</style>

package/components/dd-radio/dd-radio.vue

@@ -37,7 +37,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: '',
 })
 
-// 必须配合 dd-radio-group 使用（vant/uview 同款约定）
+// 必须配合 dd-radio-group 使用
 const group = inject<{
   props: { modelValue: any; disabled: boolean }
   toggle: (value: any) => void

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

@@ -0,0 +1,54 @@
+<template>
+  <view class="dd-sidebar">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, ref } from 'vue'
+
+interface Props {
+  /** 当前选中项的索引（v-model） */
+  modelValue?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: number): void
+  (e: 'change', val: number): void
+}>()
+
+const counter = ref(0)
+
+function register(): number {
+  const idx = counter.value
+  counter.value += 1
+  return idx
+}
+
+function onItemClick(idx: number) {
+  if (idx === props.modelValue) return
+  emit('update:modelValue', idx)
+  emit('change', idx)
+}
+
+provide('ddSidebar', {
+  active: computed(() => props.modelValue),
+  register,
+  onItemClick,
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-sidebar {
+  display: flex;
+  flex-direction: column;
+  background: var(--dd-bg-section, #{$dd-bg-section});
+}
+</style>

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

@@ -0,0 +1,129 @@
+<template>
+  <view
+    class="dd-sidebar-item"
+    :class="[
+      customClass,
+      {
+        'dd-sidebar-item--active': isActive,
+        'dd-sidebar-item--disabled': disabled,
+      },
+    ]"
+    @click="onClick"
+  >
+    <view class="dd-sidebar-item__text">
+      <slot name="title">{{ title }}</slot>
+    </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>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue'
+
+interface Props {
+  /** 导航项文案 */
+  title?: string
+  /** 右上角红点 */
+  dot?: boolean
+  /** 右上角徽标数 */
+  badge?: string | number
+  /** 禁用（点击不切换、不触发 click） */
+  disabled?: boolean
+  /** 额外类名 */
+  customClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  dot: false,
+  badge: '',
+  disabled: false,
+  customClass: '',
+})
+
+const emit = defineEmits<{
+  (e: 'click', index: number): void
+}>()
+
+const ctx = inject<any>('ddSidebar', null)
+const fallbackIdx = ref(ctx ? ctx.register() : 0)
+
+const isActive = computed(() => (ctx ? ctx.active.value === fallbackIdx.value : false))
+
+function onClick() {
+  if (props.disabled) return
+  ctx?.onItemClick(fallbackIdx.value)
+  emit('click', fallbackIdx.value)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-sidebar-item {
+  position: relative;
+  padding: $dd-space-4 $dd-space-3;
+  color: var(--dd-text-secondary, #{$dd-text-secondary});
+  font-size: $dd-font-size-body;
+  line-height: $dd-line-height-body;
+
+  &--active {
+    background: var(--dd-bg-card, #{$dd-bg-card});
+    color: var(--dd-text-primary, #{$dd-text-primary});
+    font-weight: 600;
+
+    // 左侧金色选中条
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 6rpx;
+      height: 32rpx;
+      border-radius: 0 $dd-radius-full $dd-radius-full 0;
+      background: var(--dd-primary, #{$dd-primary});
+    }
+  }
+
+  &--disabled {
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
+  }
+
+  &__text {
+    @include dd-ellipsis(1);
+  }
+
+  &__badge {
+    position: absolute;
+    top: $dd-space-2;
+    right: $dd-space-2;
+    min-width: $dd-space-4;
+    height: $dd-space-4;
+    padding: 0 $dd-space-1;
+    border-radius: $dd-radius-full;
+    background: var(--dd-error, #{$dd-error});
+    @include dd-flex-center;
+  }
+
+  &__badge-text {
+    color: $dd-color-white;
+    font-size: 20rpx;
+    line-height: 1;
+  }
+
+  &__dot {
+    position: absolute;
+    top: $dd-space-2;
+    right: $dd-space-2;
+    width: $dd-space-2;
+    height: $dd-space-2;
+    border-radius: 50%;
+    background: var(--dd-error, #{$dd-error});
+  }
+}
+</style>

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

@@ -0,0 +1,194 @@
+<template>
+  <view
+    v-if="placeholder"
+    class="dd-submit-bar__placeholder"
+    :class="{ 'dd-submit-bar__placeholder--safe': safeAreaInsetBottom }"
+  ></view>
+  <view class="dd-submit-bar" :class="{ 'dd-submit-bar--safe': safeAreaInsetBottom }">
+    <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" />
+      <text v-if="tip" class="dd-submit-bar__tip-text">{{ tip }}</text>
+      <slot name="tip"></slot>
+    </view>
+    <view class="dd-submit-bar__bar">
+      <slot></slot>
+      <view v-if="hasPrice" class="dd-submit-bar__text" :style="textStyle">
+        <text class="dd-submit-bar__label">{{ label }}</text>
+        <dd-price
+          class="dd-submit-bar__price"
+          :rate="priceYuan"
+          :currency="currency"
+          :decimal-length="decimalLength"
+        />
+        <text v-if="suffixLabel" class="dd-submit-bar__suffix-label">{{ suffixLabel }}</text>
+      </view>
+      <slot name="button">
+        <dd-button
+          class="dd-submit-bar__button"
+          round
+          :type="buttonType"
+          :style="buttonStyle"
+          :loading="loading"
+          :disabled="disabled"
+          @click="onSubmit"
+        >{{ buttonText }}</dd-button>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+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'
+
+interface Props {
+  /** 提示文案（tip 区域，如「小计不含服务费」） */
+  tip?: string
+  /** 价格左侧文案 */
+  label?: string
+  /** 价格（单位：分），传 number 才渲染价格区 */
+  price?: number
+  /** 提示区图标名（dd-icon name） */
+  tipIcon?: string
+  /** 按钮加载态 */
+  loading?: boolean
+  /** 货币符号 */
+  currency?: string
+  /** 按钮禁用态 */
+  disabled?: boolean
+  /** 价格区对齐方式（left/center/right） */
+  textAlign?: string
+  /** 按钮文案 */
+  buttonText?: string
+  /** 按钮类型（dd-button type） */
+  buttonType?: 'default' | 'primary' | 'secondary' | 'ghost' | 'text' | 'success' | 'warning' | 'danger'
+  /** 按钮自定义背景色（透传覆盖 dd-button 背景） */
+  buttonColor?: string
+  /** 价格右侧附加文案 */
+  suffixLabel?: string
+  /** 固定在底部时是否生成占位视图 */
+  placeholder?: boolean
+  /** 价格小数位数 */
+  decimalLength?: string | number
+  /** 是否预留底部安全区 */
+  safeAreaInsetBottom?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tip: '',
+  label: '合计：',
+  tipIcon: '',
+  loading: false,
+  currency: '¥',
+  disabled: false,
+  textAlign: '',
+  buttonText: '',
+  buttonType: 'danger',
+  buttonColor: '',
+  suffixLabel: '',
+  placeholder: false,
+  decimalLength: 2,
+  safeAreaInsetBottom: true,
+})
+
+const emit = defineEmits<{
+  (e: 'submit'): void
+}>()
+
+const slots = useSlots()
+
+const hasTip = computed(() => !!props.tip || !!slots.tip)
+
+// price 单位为分，除以 100 转元交给 dd-price 渲染
+const priceYuan = computed(() => (typeof props.price === 'number' ? props.price / 100 : undefined))
+const hasPrice = computed(() => priceYuan.value !== undefined)
+
+const textStyle = computed<CSSProperties | undefined>(() =>
+  props.textAlign ? { textAlign: props.textAlign as CSSProperties['textAlign'] } : undefined,
+)
+
+const buttonStyle = computed(() => (props.buttonColor ? { background: props.buttonColor } : undefined))
+
+function onSubmit() {
+  if (props.disabled || props.loading) return
+  emit('submit')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-submit-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $dd-z-index-sticky;
+  background: var(--dd-bg-card, #{$dd-bg-card});
+
+  &--safe {
+    @include dd-safe-area-bottom;
+  }
+}
+
+.dd-submit-bar__placeholder {
+  width: 100%;
+  height: 100rpx;
+  box-sizing: content-box;
+
+  &--safe {
+    @include dd-safe-area-bottom;
+  }
+}
+
+.dd-submit-bar__tip {
+  display: flex;
+  align-items: center;
+  padding: $dd-space-2 $dd-space-3;
+  background: var(--dd-warning, #{$dd-warning});
+  color: $dd-color-white;
+  font-size: $dd-font-size-caption;
+  line-height: $dd-line-height-caption;
+}
+
+.dd-submit-bar__tip-icon {
+  margin-right: $dd-space-1;
+  font-size: 28rpx;
+}
+
+.dd-submit-bar__bar {
+  display: flex;
+  align-items: center;
+  min-height: 100rpx;
+  padding: $dd-space-2 $dd-space-3;
+}
+
+.dd-submit-bar__text {
+  flex: 1;
+  padding-right: $dd-space-3;
+  color: var(--dd-text-primary, #{$dd-text-primary});
+  font-size: $dd-font-size-body;
+}
+
+.dd-submit-bar__price {
+  margin-left: $dd-space-1;
+  color: var(--dd-error, #{$dd-error});
+}
+
+.dd-submit-bar__suffix-label {
+  margin-left: $dd-space-1;
+  color: var(--dd-text-secondary, #{$dd-text-secondary});
+  font-size: $dd-font-size-caption;
+}
+
+.dd-submit-bar__button {
+  flex-shrink: 0;
+  min-width: 200rpx;
+  margin-left: $dd-space-2;
+}
+</style>

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

@@ -0,0 +1,204 @@
+<template>
+  <view class="dd-tree-select" :style="rootStyle">
+    <!-- 左侧分类导航（dd-sidebar） -->
+    <scroll-view class="dd-tree-select__nav" :scroll-y="true">
+      <dd-sidebar :model-value="mainActiveIndex" @update:model-value="onNavChange">
+        <dd-sidebar-item
+          v-for="(item, index) in items"
+          :key="index"
+          :title="item.text"
+          :dot="item.dot"
+          :badge="item.badge"
+          :disabled="item.disabled"
+          :custom-class="item.className"
+        >
+          <template #title>
+            <slot name="nav-text" :item="item">{{ item.text }}</slot>
+          </template>
+        </dd-sidebar-item>
+      </dd-sidebar>
+    </scroll-view>
+    <!-- 右侧子项区（content 插槽可整体自定义） -->
+    <scroll-view class="dd-tree-select__content" :scroll-y="true">
+      <slot name="content">
+        <view
+          v-for="child in activeChildren"
+          :key="child.id"
+          class="dd-tree-select__item"
+          :class="{
+            'dd-tree-select__item--active': isActive(child.id),
+            'dd-tree-select__item--disabled': child.disabled,
+          }"
+          @click="onItemClick(child)"
+        >
+          <text class="dd-tree-select__item-text">{{ child.text }}</text>
+          <dd-icon
+            v-if="isActive(child.id)"
+            :name="selectedIcon"
+            class="dd-tree-select__selected"
+          />
+        </view>
+      </slot>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+import DdSidebar from '../dd-sidebar/dd-sidebar.vue'
+import DdSidebarItem from '../dd-sidebar-item/dd-sidebar-item.vue'
+
+/** 右侧子选项 */
+interface TreeSelectChild {
+  /** 选项唯一 id */
+  id: string | number
+  /** 选项文案 */
+  text: string
+  disabled?: boolean
+}
+
+/** 左侧导航分类项 */
+interface TreeSelectItem {
+  /** 导航文案 */
+  text?: string
+  disabled?: boolean
+  /** 导航项右上角红点 */
+  dot?: boolean
+  /** 导航项右上角徽标数 */
+  badge?: string | number
+  /** 额外类名 */
+  className?: string
+  /** 该分类下的子选项 */
+  children?: TreeSelectChild[]
+}
+
+interface Props {
+  /** 分类数据（左侧导航 + 右侧子项） */
+  items?: TreeSelectItem[]
+  /** 左侧导航选中索引（v-model:main-active-index） */
+  mainActiveIndex?: number
+  /** 右侧选中项 id，传数组开启多选（v-model:active-id） */
+  activeId?: string | number | Array<string | number>
+  /** 多选时最多可选数量（activeId 为数组时生效） */
+  max?: number
+  /** 组件高度，数字按 px，字符串原样输出（支持 rpx） */
+  height?: string | number
+  /** 选中项右侧图标名（dd-icon name） */
+  selectedIcon?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  mainActiveIndex: 0,
+  activeId: 0,
+  max: Number.POSITIVE_INFINITY,
+  height: 300,
+  selectedIcon: 'success',
+})
+
+const emit = defineEmits<{
+  (e: 'update:mainActiveIndex', index: number): void
+  (e: 'update:activeId', id: string | number | Array<string | number>): void
+  (e: 'clickNav', index: number): void
+  (e: 'clickItem', item: TreeSelectChild): void
+}>()
+
+const rootStyle = computed(() => ({
+  height: typeof props.height === 'number' ? `${props.height}px` : props.height,
+}))
+
+/** 当前选中分类的子选项 */
+const activeChildren = computed<TreeSelectChild[]>(
+  () => props.items[props.mainActiveIndex]?.children ?? [],
+)
+
+function isActive(id: string | number) {
+  return Array.isArray(props.activeId) ? props.activeId.includes(id) : props.activeId === id
+}
+
+function onNavChange(index: number) {
+  emit('update:mainActiveIndex', index)
+  emit('clickNav', index)
+}
+
+function onItemClick(child: TreeSelectChild) {
+  if (child.disabled) return
+  let activeId: string | number | Array<string | number>
+  if (Array.isArray(props.activeId)) {
+    activeId = props.activeId.slice()
+    const index = activeId.indexOf(child.id)
+    if (index !== -1) {
+      activeId.splice(index, 1)
+    } else if (activeId.length < props.max) {
+      activeId.push(child.id)
+    } else {
+      return
+    }
+  } else {
+    activeId = child.id
+  }
+  emit('update:activeId', activeId)
+  emit('clickItem', child)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-tree-select {
+  display: flex;
+  font-size: $dd-font-size-body;
+
+  &__nav {
+    flex: 1;
+    height: 100%;
+    background: var(--dd-bg-section, #{$dd-bg-section});
+  }
+
+  &__content {
+    flex: 2;
+    height: 100%;
+    background: var(--dd-bg-card, #{$dd-bg-card});
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    min-height: 96rpx;
+    padding: 0 $dd-space-4;
+    font-weight: 600;
+    color: var(--dd-text-primary, #{$dd-text-primary});
+
+    &:active {
+      background: var(--dd-interactive-hover, #{$dd-interactive-hover});
+    }
+
+    &--active {
+      background: var(--dd-primary, #{$dd-primary});
+      color: $dd-neutral-50;
+    }
+
+    &--disabled {
+      color: var(--dd-text-tertiary, #{$dd-text-tertiary});
+
+      &:active {
+        background: transparent;
+      }
+    }
+  }
+
+  &__item-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__selected {
+    margin-left: $dd-space-2;
+    font-size: 32rpx;
+    color: $dd-neutral-50;
+  }
+}
+</style>

package/index.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue'
 
-// === Input (23) ===
+// === Input (24) ===
 import DdButton from './components/dd-button/dd-button.vue'
 import DdCodeButton from './components/dd-code-button/dd-code-button.vue'
 import DdInput from './components/dd-input/dd-input.vue'
@@ -24,8 +24,9 @@ import DdNumberKeyboard from './components/dd-number-keyboard/dd-number-keyboard
 import DdCarKeyboard from './components/dd-car-keyboard/dd-car-keyboard.vue'
 import DdCascader from './components/dd-cascader/dd-cascader.vue'
 import DdGoodsSku from './components/dd-goods-sku/dd-goods-sku.vue'
+import DdTreeSelect from './components/dd-tree-select/dd-tree-select.vue'
 
-// === Navigation (12) ===
+// === Navigation (14) ===
 import DdNavigation from './components/dd-navigation/dd-navigation.vue'
 import DdTopNavbar from './components/dd-top-navbar/dd-top-navbar.vue'
 import DdSegmentedTab from './components/dd-segmented-tab/dd-segmented-tab.vue'
@@ -38,8 +39,10 @@ import DdCollapse from './components/dd-collapse/dd-collapse.vue'
 import DdCollapseItem from './components/dd-collapse-item/dd-collapse-item.vue'
 import DdDropdownMenu from './components/dd-dropdown-menu/dd-dropdown-menu.vue'
 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 (8) ===
+// === Layout (9) ===
 import DdCard from './components/dd-card/dd-card.vue'
 import DdRoomCard from './components/dd-room-card/dd-room-card.vue'
 import DdFeatureGrid from './components/dd-feature-grid/dd-feature-grid.vue'
@@ -48,8 +51,9 @@ import DdBillDetail from './components/dd-bill-detail/dd-bill-detail.vue'
 import DdWorkorderCard from './components/dd-workorder-card/dd-workorder-card.vue'
 import DdCalendar from './components/dd-calendar/dd-calendar.vue'
 import DdQrcode from './components/dd-qrcode/dd-qrcode.vue'
+import DdSubmitBar from './components/dd-submit-bar/dd-submit-bar.vue'
 
-// === Display (24) ===
+// === Display (25) ===
 import DdTag from './components/dd-tag/dd-tag.vue'
 import DdStatCard from './components/dd-stat-card/dd-stat-card.vue'
 import DdChampionCard from './components/dd-champion-card/dd-champion-card.vue'
@@ -74,6 +78,7 @@ import DdAlbum from './components/dd-album/dd-album.vue'
 import DdCoupon from './components/dd-coupon/dd-coupon.vue'
 import DdParse from './components/dd-parse/dd-parse.vue'
 import DdMarkdown from './components/dd-markdown/dd-markdown.vue'
+import DdPrice from './components/dd-price/dd-price.vue'
 
 // === Overlay (11) ===
 import DdPortal from './components/dd-portal/dd-portal.vue'
@@ -110,15 +115,17 @@ const components = {
   DdButton, DdCodeButton, DdInput, DdSwitch, DdCheckbox, DdCheckboxGroup, DdRadio, DdRadioGroup, DdForm,
   DdSearchBar, DdSlider, DdStepper, DdDatePicker, DdField,
   DdPicker, DdRate, DdUpload, DdIcon,
-  DdKeyboard, DdNumberKeyboard, DdCarKeyboard, DdCascader, DdGoodsSku,
+  DdKeyboard, DdNumberKeyboard, DdCarKeyboard, DdCascader, DdGoodsSku, DdTreeSelect,
   DdNavigation, DdTopNavbar, DdSegmentedTab, DdSwipeableTab,
   DdDrawer, DdTabbar, DdTabbarItem, DdBacktop,
   DdCollapse, DdCollapseItem, DdDropdownMenu, DdDropdownItem,
+  DdSidebar, DdSidebarItem,
   DdCard, DdRoomCard, DdFeatureGrid, DdSticky, DdBillDetail, DdWorkorderCard, DdCalendar, DdQrcode,
+  DdSubmitBar,
   DdTag, DdStatCard, DdChampionCard, DdAvatar, DdAvatarGroup, DdBadge,
   DdListCell, DdCell, DdCellGroup, DdCountDown, DdDivider,
   DdImage, DdProgress, DdSkeleton, DdEmptyState, DdStep, DdSteps,
-  DdText, DdLink, DdCopy, DdAlbum, DdCoupon, DdParse, DdMarkdown,
+  DdText, DdLink, DdCopy, DdAlbum, DdCoupon, DdParse, DdMarkdown, DdPrice,
   DdModal, DdActionSheet, DdToast, DdAlert, DdLoading,
   DdPortal, DdDialog, DdOverlay, DdPopup, DdPopover, DdPopoverItem,
   DdSwipeAction, DdSwipe, DdSwipeItem, DdPullRefresh, DdLoadmore,
@@ -140,15 +147,17 @@ export {
   DdButton, DdCodeButton, DdInput, DdSwitch, DdCheckbox, DdCheckboxGroup, DdRadio, DdRadioGroup, DdForm,
   DdSearchBar, DdSlider, DdStepper, DdDatePicker, DdField,
   DdPicker, DdRate, DdUpload, DdIcon,
-  DdKeyboard, DdNumberKeyboard, DdCarKeyboard, DdCascader, DdGoodsSku,
+  DdKeyboard, DdNumberKeyboard, DdCarKeyboard, DdCascader, DdGoodsSku, DdTreeSelect,
   DdNavigation, DdTopNavbar, DdSegmentedTab, DdSwipeableTab,
   DdDrawer, DdTabbar, DdTabbarItem, DdBacktop,
   DdCollapse, DdCollapseItem, DdDropdownMenu, DdDropdownItem,
+  DdSidebar, DdSidebarItem,
   DdCard, DdRoomCard, DdFeatureGrid, DdSticky, DdBillDetail, DdWorkorderCard, DdCalendar, DdQrcode,
+  DdSubmitBar,
   DdTag, DdStatCard, DdChampionCard, DdAvatar, DdAvatarGroup, DdBadge,
   DdListCell, DdCell, DdCellGroup, DdCountDown, DdDivider,
   DdImage, DdProgress, DdSkeleton, DdEmptyState, DdStep, DdSteps,
-  DdText, DdLink, DdCopy, DdAlbum, DdCoupon, DdParse, DdMarkdown,
+  DdText, DdLink, DdCopy, DdAlbum, DdCoupon, DdParse, DdMarkdown, DdPrice,
   DdModal, DdActionSheet, DdToast, DdAlert, DdLoading,
   DdPortal, DdDialog, DdOverlay, DdPopup, DdPopover, DdPopoverItem,
   DdSwipeAction, DdSwipe, DdSwipeItem, DdPullRefresh, DdLoadmore,

package/package.json

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