@didaoktv/didaoui-uniapp 1.3.8 → 1.4.0

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

@@ -0,0 +1,208 @@
+<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 {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 96rpx;
+    padding: 0 88rpx 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 {
+      color: var(--dd-primary, #{$dd-primary});
+    }
+
+    &--disabled {
+      color: var(--dd-text-tertiary, #{$dd-text-tertiary});
+
+      &:active {
+        background: transparent;
+      }
+    }
+  }
+
+  &__item-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__selected {
+    position: absolute;
+    top: 50%;
+    right: $dd-space-4;
+    transform: translateY(-50%);
+    font-size: 32rpx;
+    color: var(--dd-primary, #{$dd-primary});
+  }
+}
+</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,
@@ -167,4 +176,4 @@ export type {
 } from './components/dd-form/rules'
 
 // 图标元数据（供 demo/文档消费，与 dd-icon.vue 内 SCSS &-- 规则保持一致）
-export { iconNames, iconGroups } from './components/dd-icon/dd-icon.vue'
+export { iconNames, iconGroups, iconLabels } from './components/dd-icon/dd-icon.vue'

package/package.json

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

package/scss/_theme-tokens.scss

@@ -102,6 +102,7 @@ $dd-theme-dark: (
   'bg-section': $dd-bg-section,
   'bg-card': $dd-bg-card,
   'bg-elevated': $dd-bg-elevated,
+  'bg-popup': $dd-bg-popup,
   'text-primary': $dd-text-primary,
   'text-secondary': $dd-text-secondary,
   'text-tertiary': $dd-text-tertiary,
@@ -150,6 +151,7 @@ $dd-theme-light: (
   'bg-section': $dd-light-bg-section,
   'bg-card': $dd-light-bg-card,
   'bg-elevated': $dd-light-bg-elevated,
+  'bg-popup': $dd-light-bg-popup,
   'text-primary': $dd-light-text-primary,
   'text-secondary': $dd-light-text-secondary,
   'text-tertiary': $dd-light-text-tertiary,

package/scss/_variables.scss

@@ -119,6 +119,8 @@ $dd-surface-container-highest: $dd-neutral-600 !default;
 $dd-bg-section: $dd-neutral-800 !default;
 $dd-bg-card: $dd-neutral-800 !default;
 $dd-bg-elevated: $dd-neutral-800 !default;
+// 弹出层专用底色：比卡片（neutral-800）亮一档，形成 页面→卡片→弹出层 的抬升层级
+$dd-bg-popup: #222222 !default;
 
 // === 文本色 ===
 $dd-text-primary: $dd-neutral-50 !default;
@@ -168,6 +170,7 @@ $dd-light-surface-container-highest: $dd-neutral-100 !default;
 $dd-light-bg-section: $dd-neutral-50 !default;
 $dd-light-bg-card: #FFFFFF !default;
 $dd-light-bg-elevated: #FFFFFF !default; // ★推导（同 bg-card）
+$dd-light-bg-popup: #FFFFFF !default; // ★推导（浅色下靠阴影区分，弹出层同卡片白）
 $dd-light-text-primary: $dd-neutral-900 !default;
 $dd-light-text-secondary: $dd-neutral-700 !default; // ★推导
 $dd-light-text-tertiary: $dd-neutral-500 !default; // ★推导