@didaoktv/didaoui-uniapp 1.0.0 → 1.2.0

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

@@ -0,0 +1,405 @@
+<template>
+  <dd-popup
+    v-model="popupShow"
+    position="bottom"
+    :closeable="closeable"
+    :safe-area-inset-bottom="true"
+    :close-on-click-overlay="maskCloseAble"
+    :z-index="uZIndex"
+    @close="close"
+  >
+    <!-- column 头部：垂直步骤（ponytail: dd-steps 无 dot 模式，用默认数字圆点步骤） -->
+    <view v-if="headerDirection === 'column'" class="dd-cascader__head dd-cascader__head--column">
+      <dd-steps v-if="popupShow" direction="vertical" :active="tabsIndex">
+        <view
+          v-for="(item, index) in genTabsList"
+          :key="index"
+          class="dd-cascader__step-item"
+          @click="toFatherIndex(index)"
+        >
+          <dd-step :title="item.name" />
+        </view>
+      </dd-steps>
+    </view>
+    <!-- ponytail: dd-segmented-tab 无横向滚动，层级名过长时溢出；升级路径：scroll-view 包裹 -->
+    <view v-else class="dd-cascader__head">
+      <dd-segmented-tab
+        v-if="popupShow"
+        :options="genTabsList.map((item) => item.name)"
+        v-model="tabsIndex"
+        variant="text"
+      />
+    </view>
+    <view class="dd-cascader__box">
+      <view
+        class="dd-cascader__cols"
+        :class="{ 'dd-cascader__cols--change': isChange }"
+        :style="{ transform: optionsCols == 2 && isChange ? 'translateX(-33.3333333%)' : '' }"
+      >
+        <template v-for="(levelData, levelIndex) in levelList" :key="levelIndex">
+          <view
+            v-if="optionsCols == 2 || levelIndex == tabsIndex"
+            class="dd-cascader__col"
+            :style="{ width: optionsCols == 2 ? '33.33333%' : '750rpx' }"
+          >
+            <view class="dd-cascader__pane">
+              <scroll-view :scroll-y="true" style="height: 100%">
+                <view v-if="levelIndex === 0 || selectedValueIndexs[levelIndex - 1] !== undefined">
+                  <dd-cell
+                    v-for="(item, index) in levelData"
+                    :key="index"
+                    :title="item[labelKey]"
+                    @click="levelChange(levelIndex, index)"
+                  >
+                    <template #right-icon>
+                      <dd-icon
+                        v-if="selectedValueIndexs[levelIndex] === index"
+                        size="17"
+                        name="checked"
+                        class="dd-cascader__check"
+                      />
+                    </template>
+                  </dd-cell>
+                </view>
+              </scroll-view>
+            </view>
+          </view>
+        </template>
+      </view>
+    </view>
+    <!-- 底部按钮区域 -->
+    <view class="dd-cascader__action">
+      <view class="dd-cascader__action-item">
+        <dd-button type="secondary" block @click="handleCancel">{{ t('dd.common.cancel') }}</dd-button>
+      </view>
+      <view class="dd-cascader__action-item">
+        <dd-button type="primary" block @click="handleConfirm">{{ t('dd.common.confirm') }}</dd-button>
+      </view>
+    </view>
+  </dd-popup>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { t } from '../../libs/i18n'
+import DdPopup from '../dd-popup/dd-popup.vue'
+import DdSteps from '../dd-steps/dd-steps.vue'
+import DdStep from '../dd-step/dd-step.vue'
+import DdSegmentedTab from '../dd-segmented-tab/dd-segmented-tab.vue'
+import DdCell from '../dd-cell/dd-cell.vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+import DdButton from '../dd-button/dd-button.vue'
+
+interface CascaderOption {
+  label?: string
+  value?: string | number
+  children?: CascaderOption[]
+  [key: string]: any
+}
+
+interface Props {
+  /** 通过双向绑定控制组件的弹出与收起 */
+  show?: boolean
+  /** 级联数据 */
+  data?: CascaderOption[]
+  /** 默认选中的值 */
+  modelValue?: Array<string | number>
+  /** 指定选项的值为选项对象中的哪个属性值 */
+  valueKey?: string
+  /** 指定选项标签为选项对象中的哪个属性值 */
+  labelKey?: string
+  /** 指定选项的子选项为选项对象中的哪个属性值 */
+  childrenKey?: string
+  /** 是否允许通过点击遮罩关闭Picker */
+  maskCloseAble?: boolean
+  /** 弹出的z-index值 */
+  zIndex?: string | number
+  /** 是否在选择最后一级时自动关闭并触发confirm */
+  autoClose?: boolean
+  /** 选中项目的展示方向：column 垂直方向适合文字长度过长 */
+  headerDirection?: 'row' | 'column'
+  /** 选项区域列数，支持1列和2列 */
+  optionsCols?: number
+  /** 是否显示关闭图标 */
+  closeable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  show: false,
+  data: () => [],
+  modelValue: () => [],
+  valueKey: 'value',
+  labelKey: 'label',
+  childrenKey: 'children',
+  maskCloseAble: true,
+  zIndex: 0,
+  autoClose: false,
+  headerDirection: 'row',
+  optionsCols: 2,
+  closeable: true,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: Array<string | number>): void
+  (e: 'update:show', val: boolean): void
+  (e: 'change', val: Array<string | number>): void
+  (e: 'confirm', val: Array<string | number>): void
+  (e: 'cancel'): void
+}>()
+
+/** 存储每一级的数据 */
+const levelList = ref<CascaderOption[][]>([])
+/** 存储每一级选中的索引 */
+const selectedValueIndexs = ref<number[]>([])
+const tabsIndex = ref(0)
+const popupShow = ref(false)
+/** 存储确认的值 */
+const confirmValues = ref<Array<string | number>>([])
+
+watch(
+  () => props.data,
+  () => {
+    initLevelList()
+    setDefaultValue()
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.show,
+  (val) => {
+    popupShow.value = val
+  },
+)
+
+watch(
+  () => props.modelValue,
+  () => {
+    setDefaultValue()
+  },
+  { immediate: true },
+)
+
+const isChange = computed(() => tabsIndex.value > 1)
+
+const genTabsList = computed(() => {
+  const tabsList: { name: string }[] = [{ name: t('dd.common.pleaseChoose') }]
+
+  // 根据选中的值动态生成tabs
+  for (let i = 0; i < selectedValueIndexs.value.length; i++) {
+    if (selectedValueIndexs.value[i] !== undefined && levelList.value[i]) {
+      const selectedItem = levelList.value[i][selectedValueIndexs.value[i]]
+      if (selectedItem) {
+        tabsList[i] = {
+          name: selectedItem[props.labelKey] ?? '',
+        }
+        // 如果还有下一级，则添加"请选择"
+        if (
+          i === selectedValueIndexs.value.length - 1 &&
+          selectedItem[props.childrenKey] &&
+          selectedItem[props.childrenKey].length > 0
+        ) {
+          tabsList.push({ name: t('dd.common.pleaseChoose') })
+        }
+      }
+    }
+  }
+
+  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++) {
+    const selectedIndex = selectedValueIndexs.value[i]
+    if (selectedIndex === undefined) continue
+    if (!levelList.value[i] || !levelList.value[i][selectedIndex]) continue
+    result.push(levelList.value[i][selectedIndex][props.valueKey])
+  }
+  return result
+}
+
+function initLevelList() {
+  // 初始化第一级数据
+  if (props.data && props.data.length > 0) {
+    levelList.value = [props.data]
+    selectedValueIndexs.value = []
+  }
+}
+
+function setDefaultValue() {
+  // 检查data是否为空
+  if (!props.data || props.data.length == 0) return
+  // 检查modelValue是否为空
+  if (!props.modelValue || props.modelValue.length == 0) {
+    confirmValues.value = []
+    return
+  }
+  // 根据modelValue获取indexs给selectedValueIndexs
+  selectedValueIndexs.value = []
+  levelList.value = []
+  let currentLevelData = props.data
+
+  for (let i = 0; i < props.modelValue.length; i++) {
+    const value = props.modelValue[i]
+    const index = currentLevelData.findIndex((item) => item[props.valueKey] === value)
+    levelList.value[i] = currentLevelData
+
+    if (index !== -1) {
+      selectedValueIndexs.value.push(index)
+      // 更新下一级的数据
+      if (currentLevelData[index][props.childrenKey]) {
+        currentLevelData = currentLevelData[index][props.childrenKey]
+      } else {
+        // 如果没有子级数据，则停止处理
+        break
+      }
+    } else {
+      // 如果找不到匹配项，则停止处理
+      break
+    }
+  }
+  // 同步确认值，避免"仅回显未改动时确认返回空数组"
+  confirmValues.value = getSelectedValues()
+}
+
+function close() {
+  emit('cancel')
+  emit('update:show', false)
+  popupShow.value = false
+}
+
+function levelChange(levelIndex: number, index: number) {
+  // 设置当前级的选中值
+  selectedValueIndexs.value[levelIndex] = index
+
+  // 清除后续级别的选中值
+  selectedValueIndexs.value.splice(levelIndex + 1)
+  tabsIndex.value = Math.min(tabsIndex.value, levelIndex)
+
+  // 清除后续级别的列表
+  levelList.value.splice(levelIndex + 1)
+
+  // 获取当前选中项
+  const currentItem = levelList.value[levelIndex][index]
+
+  // 如果有子级数据，则初始化下一级
+  if (currentItem && currentItem[props.childrenKey] && currentItem[props.childrenKey].length > 0) {
+    // 确保levelList数组足够长
+    if (levelList.value.length <= levelIndex + 1) {
+      levelList.value.push(currentItem[props.childrenKey])
+    } else {
+      levelList.value[levelIndex + 1] = currentItem[props.childrenKey]
+    }
+    // 切换到下一级tab
+    tabsIndex.value = levelIndex + 1
+  } else {
+    // 没有子级数据，说明是最后一级
+    if (props.autoClose) {
+      // 如果启用自动关闭，则触发change事件并关闭
+      emitChange()
+      handleConfirm()
+    } else {
+      // 否则只触发change事件，不关闭
+      emitChange(false)
+    }
+  }
+}
+
+function emitChange(closePopup = true) {
+  // 构造选中结果
+  const result = getSelectedValues()
+
+  // 更新confirmValues
+  confirmValues.value = [...result]
+
+  // 触发change事件，返回value数组
+  emit('change', confirmValues.value)
+
+  // 根据参数决定是否关闭弹窗
+  if (closePopup) {
+    close()
+  }
+}
+
+function handleCancel() {
+  close()
+}
+
+function handleConfirm() {
+  const values = confirmValues.value.length ? confirmValues.value : getSelectedValues()
+  confirmValues.value = [...values]
+  // 确认时触发confirm事件
+  emit('update:modelValue', values)
+  emit('confirm', values)
+  close()
+}
+
+// 跳转父节点
+function toFatherIndex(index: number) {
+  tabsIndex.value = index
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-cascader {
+  &__head {
+    padding-top: 20rpx;
+    margin-bottom: 10rpx;
+
+    &--column {
+      padding: 30rpx 20rpx 10rpx 20rpx;
+    }
+  }
+
+  &__step-item {
+    padding: 10rpx 0;
+  }
+
+  &__box {
+    width: 100%;
+    overflow: hidden;
+    height: 800rpx;
+  }
+
+  &__cols {
+    display: flex;
+    flex-direction: row;
+    width: 150%;
+    transition: transform 0.3s ease-in-out 0s;
+    transform: translateX(0);
+  }
+
+  &__col {
+    height: 800rpx;
+  }
+
+  &__pane {
+    height: 100%;
+    padding: 10rpx;
+    box-sizing: border-box;
+    background-color: $dd-bg-section;
+  }
+
+  &__check {
+    color: $dd-primary-400;
+  }
+
+  &__action {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-top: 1px solid $dd-border-default;
+  }
+
+  &__action-item {
+    flex: 1;
+    padding: 20rpx;
+  }
+}
+</style>

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

@@ -5,12 +5,12 @@
       `dd-cell--${size}`,
       {
         'dd-cell--center': center,
-        'dd-cell--required': required,
-        'dd-cell--borderless': borderless,
-        'dd-cell--link': isLink,
+        'dd-cell--required': requiredState,
+        'dd-cell--borderless': !border,
+        'dd-cell--clickable': clickableState,
       },
     ]"
-    :hover-class="isLink ? 'dd-cell--active' : ''"
+    :hover-class="clickableState ? 'dd-cell--active' : ''"
     :hover-stay-time="100"
     @click="handleClick"
   >
@@ -19,9 +19,11 @@
         <dd-icon v-if="icon" :name="icon" class="dd-cell__icon-text" />
       </slot>
     </view>
-    <view v-if="required" class="dd-cell__required"><text>*</text></view>
+    <view v-if="requiredState" class="dd-cell__required"><text>*</text></view>
     <view class="dd-cell__content">
-      <text v-if="title" class="dd-cell__title">{{ title }}</text>
+      <view v-if="title || $slots.title" class="dd-cell__title" :style="titleStyle">
+        <slot name="title">{{ title }}</slot>
+      </view>
       <text v-if="label || $slots.label" class="dd-cell__label">
         <slot name="label">{{ label }}</slot>
       </text>
@@ -41,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { useSlots } from 'vue'
+import { computed } from 'vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
 
 interface Props {
@@ -49,12 +51,18 @@ interface Props {
   label?: string
   value?: string
   icon?: string
-  size?: 'sm' | 'md'
+  size?: 'normal' | 'large'
   isLink?: boolean
   arrowDirection?: 'left' | 'right' | 'up' | 'down'
-  required?: boolean
+  required?: boolean | 'auto'
   center?: boolean
-  borderless?: boolean
+  border?: boolean
+  /** 开启点击反馈样式（click 事件总是抛出，不受此 prop 限制） */
+  clickable?: boolean
+  /** 点击后经 uni.* 跳转的页面路径 */
+  url?: string
+  linkType?: 'navigateTo' | 'redirectTo' | 'reLaunch' | 'switchTab'
+  titleStyle?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -62,22 +70,43 @@ const props = withDefaults(defineProps<Props>(), {
   label: '',
   value: '',
   icon: '',
-  size: 'md',
+  size: 'normal',
   isLink: false,
   arrowDirection: 'right',
   required: false,
   center: false,
-  borderless: false,
+  border: true,
+  clickable: false,
+  url: '',
+  linkType: 'navigateTo',
+  titleStyle: '',
 })
 
 const emit = defineEmits<{ (e: 'click', val: Event): void }>()
 
-const slots = useSlots()
-void slots
+// cell 自身 required='auto' 等价 false（dd-field 复用时 auto 由其 rules 决定）
+const requiredState = computed(() => props.required === true)
+const clickableState = computed(() => props.clickable || props.isLink || !!props.url)
+
+function navigate() {
+  const opts = { url: props.url }
+  switch (props.linkType) {
+    case 'redirectTo':
+      uni.redirectTo(opts)
+      break
+    case 'reLaunch':
+      uni.reLaunch(opts)
+      break
+    case 'switchTab':
+      uni.switchTab(opts)
+      break
+    default:
+      uni.navigateTo(opts)
+  }
+}
 
-// 仅当 isLink 时才向外抛 click
 function handleClick(e: Event) {
-  if (!props.isLink) return
+  if (props.url) navigate()
   emit('click', e)
 }
 </script>
@@ -92,17 +121,17 @@ function handleClick(e: Event) {
   align-items: flex-start;
   box-sizing: border-box;
   width: 100%;
-  padding: 0 24rpx 0 32rpx;
+  padding: 0 24rpx 0 $dd-space-4;
   background: $dd-bg-elevated;
   font-size: $dd-font-size-body;
   color: $dd-text-primary;
   @include dd-hairline-bottom($dd-border-subtle);
 
-  &--sm {
+  &--normal {
     min-height: 96rpx;
   }
 
-  &--md {
+  &--large {
     min-height: 112rpx;
   }
 
@@ -138,7 +167,7 @@ function handleClick(e: Event) {
     color: $dd-error-500;
     font-size: $dd-font-size-body;
     margin-right: 4rpx;
-    line-height: 1.5;
+    line-height: $dd-line-height-caption;
     text {
       line-height: 1;
     }
@@ -180,9 +209,7 @@ function handleClick(e: Event) {
   }
 
   &__arrow {
-    font-size: 32rpx;
-    color: $dd-text-tertiary;
-    line-height: 1;
+    font-size: $dd-font-size-h4;
 
     &--right {
       transform: rotate(0deg);

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

@@ -1,27 +1,28 @@
 <template>
-  <view class="dd-cell-group">
-    <view v-if="title || $slots.title" class="dd-cell-group__title">
+  <view>
+    <view v-if="title || $slots.title" class="dd-cell-group__title" :class="{ 'dd-cell-group__title--inset': inset }">
       <slot name="title">{{ title }}</slot>
     </view>
-    <view class="dd-cell-group__body">
+    <view class="dd-cell-group" :class="{ 'dd-cell-group--inset': inset, 'dd-cell-group--border': border && !inset }">
       <slot></slot>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { useSlots } from 'vue'
-
 interface Props {
   title?: string
+  /** 默认通栏；inset = 圆角卡片内嵌模式 */
+  inset?: boolean
+  /** 通栏模式下的首尾外框发丝线 */
+  border?: boolean
 }
 
 withDefaults(defineProps<Props>(), {
   title: '',
+  inset: false,
+  border: true,
 })
-
-const slots = useSlots()
-void slots
 </script>
 
 <style lang="scss" scoped>
@@ -29,28 +30,34 @@ void slots
 @import '../../scss/mixins';
 
 .dd-cell-group {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  &__title {
-    padding: 32rpx 32rpx 16rpx;
-    font-size: $dd-font-size-caption;
-    color: $dd-text-tertiary;
+  background: $dd-bg-elevated;
+
+  :deep(.dd-cell:last-child),
+  :deep(.dd-list-cell:last-child) {
+    &::after {
+      display: none;
+    }
   }
 
-  &__body {
-    background: $dd-bg-elevated;
+  &--inset {
     border-radius: $dd-radius-lg;
     overflow: hidden;
+    margin: 0 24rpx;
+  }
 
-    // 去除最后一个子元素的底边框, 避免溢出到圆角外
-    :deep(.dd-cell:last-child),
-    :deep(.dd-list-cell:last-child) {
-      &::after {
-        display: none;
-      }
-    }
+  &--border {
+    @include dd-hairline-top($dd-border-subtle);
+    @include dd-hairline-bottom($dd-border-subtle);
+  }
+}
+
+.dd-cell-group__title {
+  padding: 32rpx 32rpx 16rpx;
+  font-size: $dd-font-size-caption;
+  color: $dd-text-tertiary;
+
+  &--inset {
+    padding: 32rpx 24rpx 16rpx;
   }
 }
 </style>

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

@@ -143,7 +143,7 @@ function onClick() {
   box-sizing: border-box;
 
   &--sm {
-    border-width: 4rpx;
+    border-width: $dd-space-1;
   }
 }
 
@@ -211,8 +211,8 @@ function onClick() {
   &--sm {
     position: static;
     transform: none;
-    width: 48rpx;
-    height: 48rpx;
+    width: $dd-size-icon-lg;
+    height: $dd-size-icon-lg;
     flex-shrink: 0;
   }
 }
@@ -229,7 +229,7 @@ function onClick() {
   font-weight: 800;
   color: #FFD700;
   flex-shrink: 0;
-  width: 48rpx;
+  width: $dd-size-icon-lg;
   text-align: center;
 }