@didaoktv/didaoui-uniapp 1.0.0 → 1.2.0

package/components/dd-form/dd-form.vue

@@ -0,0 +1,116 @@
+<template>
+  <view class="dd-form">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+import type { DdFieldInstance, DdFieldValidateTrigger, DdFormContext } from './rules'
+
+interface Props {
+  /** 子字段默认校验触发时机（field 的 rule.trigger 可覆盖） */
+  validateTrigger?: DdFieldValidateTrigger
+  /** 逐项校验，遇错即停（默认并行全量） */
+  validateFirst?: boolean
+  /** 下发子 field 的标签位置 */
+  labelPosition?: 'left' | 'top'
+  /** 下发子 field 的标签宽度（如 '160rpx'，空 = 子自身默认） */
+  labelWidth?: string
+  /** 下发禁用全部子 field */
+  disabled?: boolean
+  /** submit 校验失败时滚动到第一个错误字段 */
+  scrollToError?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  validateTrigger: 'onBlur',
+  validateFirst: false,
+  labelPosition: 'left',
+  labelWidth: '',
+  disabled: false,
+  scrollToError: false,
+})
+
+const emit = defineEmits<{
+  (e: 'submit', values: Record<string, any>): void
+  (e: 'failed', errors: { name: string; message: string }[]): void
+}>()
+
+const fields = ref<DdFieldInstance[]>([])
+
+provide<DdFormContext>('dd-form', {
+  props,
+  register(field) {
+    if (!fields.value.some((f) => f.name === field.name)) fields.value.push(field)
+  },
+  unregister(name) {
+    const i = fields.value.findIndex((f) => f.name === name)
+    if (i >= 0) fields.value.splice(i, 1)
+  },
+})
+
+function getFields(name?: string | string[]): DdFieldInstance[] {
+  if (!name) return [...fields.value]
+  const arr = Array.isArray(name) ? name : [name]
+  return fields.value.filter((f) => arr.includes(f.name))
+}
+
+function getValues(): Record<string, any> {
+  const values: Record<string, any> = {}
+  fields.value.forEach((f) => {
+    values[f.name] = f.getValue()
+  })
+  return values
+}
+
+async function validateField(name: string): Promise<void> {
+  const field = fields.value.find((f) => f.name === name)
+  if (!field) return
+  const message = await field.validate()
+  if (message !== undefined) throw [{ name, message }]
+}
+
+async function validate(name?: string | string[]): Promise<Record<string, any>> {
+  const targets = getFields(name)
+  if (props.validateFirst) {
+    for (const field of targets) {
+      const message = await field.validate()
+      if (message !== undefined) throw [{ name: field.name, message }]
+    }
+  } else {
+    const results = await Promise.all(
+      targets.map(async (f) => ({ name: f.name, message: await f.validate() }))
+    )
+    const errors = results.filter((r) => r.message !== undefined)
+    if (errors.length > 0) throw errors
+  }
+  return getValues()
+}
+
+function resetValidation(name?: string | string[]): void {
+  getFields(name).forEach((f) => f.resetValidation())
+}
+
+async function submit(): Promise<void> {
+  try {
+    const values = await validate()
+    emit('submit', values)
+  } catch (e) {
+    const errors = e as { name: string; message: string }[]
+    emit('failed', errors)
+    if (props.scrollToError) {
+      fields.value.find((f) => f.name === errors[0]?.name)?.scrollIntoView()
+    }
+  }
+}
+
+defineExpose({ validate, validateField, resetValidation, submit, getValues })
+</script>
+
+<style lang="scss" scoped>
+.dd-form {
+  display: block;
+  width: 100%;
+}
+</style>

package/components/dd-form/rules.ts

@@ -0,0 +1,84 @@
+/**
+ * dd-form 轻量校验引擎（vant runRules 思想，自研无依赖）
+ * 规则分散在各 dd-field 上，dd-form 只做调度。
+ */
+
+export type DdFieldValidateTrigger = 'onBlur' | 'onChange' | 'onSubmit'
+
+/** dd-field 向 dd-form 注册的实例契约 */
+export interface DdFieldInstance {
+  name: string
+  getValue: () => any
+  /** 校验并显示错误；返回错误消息（undefined = 通过） */
+  validate: () => Promise<string | undefined>
+  resetValidation: () => void
+  scrollIntoView: () => void
+}
+
+/** dd-form 通过 provide 下发的上下文契约 */
+export interface DdFormContext {
+  props: {
+    validateTrigger: DdFieldValidateTrigger
+    labelPosition: 'left' | 'top'
+    labelWidth: string
+    disabled: boolean
+  }
+  register: (field: DdFieldInstance) => void
+  unregister: (name: string) => void
+}
+
+export interface DdFieldRule {
+  /** 必填（空值报错） */
+  required?: boolean
+  /** 错误消息；缺省时按规则类型兜底 */
+  message?: string
+  /** 正则校验（仅对非空值测试） */
+  pattern?: RegExp
+  /**
+   * 自定义校验：返回 true=通过，false=用 message 报错，
+   * 返回 string=直接以该字符串为错误消息（vant 语义）；支持 Promise
+   */
+  validator?: (value: any) => boolean | string | Promise<boolean | string>
+  /** 触发时机；缺省 = 任意触发都执行 */
+  trigger?: DdFieldValidateTrigger
+}
+
+/** 空值判断：'' / null / undefined / 空数组 */
+export function isEmptyValue(value: any): boolean {
+  if (value === '' || value === null || value === undefined) return true
+  if (Array.isArray(value) && value.length === 0) return true
+  return false
+}
+
+async function runValidator(rule: DdFieldRule, value: any): Promise<string | undefined> {
+  const res = await rule.validator!(value)
+  if (res === true) return undefined
+  if (typeof res === 'string') return res
+  return rule.message ?? '校验不通过'
+}
+
+/**
+ * 按触发方式过滤规则后顺序执行，首个失败短路。
+ * @returns 错误消息；undefined = 全部通过
+ */
+export async function runRules(
+  value: any,
+  rules: DdFieldRule[] = [],
+  trigger?: DdFieldValidateTrigger
+): Promise<string | undefined> {
+  for (const rule of rules) {
+    if (trigger && rule.trigger && rule.trigger !== trigger) continue
+
+    if (rule.required && isEmptyValue(value)) {
+      return rule.message ?? '不能为空'
+    }
+    if (rule.pattern && !isEmptyValue(value) && !rule.pattern.test(String(value))) {
+      return rule.message ?? '格式不正确'
+    }
+    if (rule.validator) {
+      const err = await runValidator(rule, value)
+      if (err !== undefined) return err
+    }
+  }
+  return undefined
+}

package/components/dd-goods-sku/dd-goods-sku.vue

@@ -0,0 +1,434 @@
+<template>
+  <view class="dd-goods-sku">
+    <view @click="open">
+      <slot name="trigger"></slot>
+    </view>
+    <!-- ponytail: pageInline 仅控制 closeable 与内边距，dd-popup 无内联形态，始终以弹窗呈现 -->
+    <dd-popup
+      v-model="show"
+      position="bottom"
+      round
+      :closeable="pageInline ? false : closeable"
+      @close="close"
+    >
+      <view class="dd-goods-sku__container" :style="{ padding: pageInline ? '0px' : '' }">
+        <view class="dd-goods-sku__header">
+          <slot name="header">
+            <view class="dd-goods-sku__header__image">
+              <image :src="goodsInfo.image || goodsInfo.picture" mode="aspectFill"></image>
+            </view>
+            <view class="dd-goods-sku__header__info">
+              <view class="dd-goods-sku__header__info__price">
+                <text class="dd-goods-sku__header__info__price__symbol">¥</text>
+                <text class="dd-goods-sku__header__info__price__value">{{ price }}</text>
+              </view>
+              <view class="dd-goods-sku__header__info__stock">{{ t('dd.goodsSku.stock') }} {{ stock }} {{ t('dd.goodsSku.amount') }}</view>
+              <view class="dd-goods-sku__header__info__selected">{{ t('dd.goodsSku.choosed') }}: {{ selectedSkuText }}</view>
+            </view>
+          </slot>
+        </view>
+
+        <scroll-view class="dd-goods-sku__content" scroll-y>
+          <view v-for="(treeItem, index) in skuTree" :key="index" class="dd-goods-sku__content__item">
+            <view class="dd-goods-sku__content__item__title">{{ treeItem.label }}</view>
+            <view class="dd-goods-sku__content__item__list">
+              <view
+                v-for="(leafItem, leafIndex) in treeItem.children"
+                :key="leafIndex"
+                class="dd-goods-sku__content__item__list__item"
+                :class="{
+                  'dd-goods-sku__content__item__list__item--active': isSelected(treeItem.name, leafItem.id),
+                  'dd-goods-sku__content__item__list__item--disabled': isDisabled(treeItem.name, leafItem.id),
+                }"
+                @click="onSkuClick(treeItem.name, leafItem)"
+              >
+                <text>{{ leafItem.name }}</text>
+              </view>
+            </view>
+          </view>
+
+          <view class="dd-goods-sku__content__count">
+            <view class="dd-goods-sku__content__count__title">{{ t('dd.goodsSku.buyAmount') }}</view>
+            <view class="dd-goods-sku__content__count__control">
+              <dd-stepper
+                v-model="buyNum"
+                :min="1"
+                :max="maxBuyNum"
+                :disabled="!canBuy"
+              ></dd-stepper>
+            </view>
+          </view>
+        </scroll-view>
+
+        <view class="dd-goods-sku__footer">
+          <dd-button type="primary" :disabled="!canBuy" @click="onConfirm">
+            {{ confirmText }}
+          </dd-button>
+        </view>
+      </view>
+    </dd-popup>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { t } from '../../libs/i18n'
+import DdPopup from '../dd-popup/dd-popup.vue'
+import DdStepper from '../dd-stepper/dd-stepper.vue'
+import DdButton from '../dd-button/dd-button.vue'
+
+interface SkuLeaf {
+  id: string | number
+  name: string
+}
+
+interface SkuTreeItem {
+  name: string
+  label: string
+  children: SkuLeaf[]
+}
+
+interface Props {
+  /** 商品信息 */
+  goodsInfo?: Record<string, any>
+  /** SKU树形结构 */
+  skuTree?: SkuTreeItem[]
+  /** SKU列表 */
+  skuList?: Record<string, any>[]
+  /** 最大购买数量 */
+  maxBuy?: number
+  /** 确认按钮文字 */
+  confirmText?: string
+  /** 是否显示关闭弹窗按钮 */
+  closeable?: boolean
+  /** 是否页面内联模式 */
+  pageInline?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  goodsInfo: () => ({}),
+  skuTree: () => [],
+  skuList: () => [],
+  maxBuy: 999,
+  confirmText: '确定',
+  closeable: true,
+  pageInline: false,
+})
+
+const emit = defineEmits<{
+  (e: 'open'): void
+  (e: 'confirm', val: { sku: Record<string, any> | null; goodsInfo: Record<string, any>; num: number; selectedText: string }): void
+  (e: 'close'): void
+}>()
+
+const show = ref(false)
+/** 已选择的SKU */
+const selectedSku = reactive<Record<string, string | number | ''>>({})
+/** 购买数量 */
+const buyNum = ref(1)
+
+if (props.pageInline) {
+  show.value = true
+}
+
+// 当前价格
+const price = computed(() => {
+  const comb = getSelectedSkuComb()
+  if (comb) return comb.price || comb.price_fee
+  return props.goodsInfo.price || props.goodsInfo.price_fee || 0
+})
+
+// 当前库存
+const stock = computed(() => {
+  const comb = getSelectedSkuComb()
+  if (comb) return comb.stock || comb.quantity
+  return props.goodsInfo.stock || props.goodsInfo.quantity || 0
+})
+
+// 最大购买数量
+const maxBuyNum = computed(() => {
+  return stock.value > props.maxBuy ? props.maxBuy : stock.value
+})
+
+// 是否可以购买
+const canBuy = computed(() => {
+  const selectedSkuCount = Object.keys(selectedSku).filter((key) => selectedSku[key] !== '').length
+  return selectedSkuCount === props.skuTree.length && buyNum.value > 0 && stock.value > 0
+})
+
+// 已选SKU文字描述
+const selectedSkuText = computed(() => {
+  const selected: string[] = []
+  Object.keys(selectedSku).forEach((key) => {
+    const value = selectedSku[key]
+    if (value) {
+      props.skuTree.forEach((treeItem) => {
+        if (treeItem.name === key) {
+          treeItem.children.forEach((leafItem) => {
+            if (leafItem.id === value) {
+              selected.push(leafItem.name)
+            }
+          })
+        }
+      })
+    }
+  })
+  return selected.join(', ')
+})
+
+// 判断SKU是否被选中
+function isSelected(skuKey: string, skuValueId: string | number) {
+  return selectedSku[skuKey] === skuValueId
+}
+
+// 判断SKU是否禁用
+function isDisabled(skuKey: string, skuValueId: string | number) {
+  // 构造一个临时的已选中SKU对象
+  const tempSelected: Record<string, any> = { ...selectedSku, [skuKey]: skuValueId }
+
+  // 检查是否还有未选择的SKU维度
+  const selectedCount = Object.keys(tempSelected).filter((key) => tempSelected[key]).length
+  const totalSkuCount = props.skuTree.length
+
+  // 如果所有SKU都已选择，则检查组合是否存在
+  if (selectedCount === totalSkuCount) {
+    return !getSkuComb(tempSelected)
+  }
+
+  // 检查当前选择的SKU是否会导致无法组成有效组合
+  for (let i = 0; i < props.skuList.length; i++) {
+    const sku = props.skuList[i]
+    let match = true
+
+    for (const key in tempSelected) {
+      if (tempSelected[key] && sku[key] !== tempSelected[key]) {
+        match = false
+        break
+      }
+    }
+
+    if (match) {
+      return false
+    }
+  }
+
+  return true
+}
+
+// SKU点击事件
+function onSkuClick(skuKey: string, skuValue: SkuLeaf) {
+  // 如果是禁用状态，直接返回
+  if (isDisabled(skuKey, skuValue.id)) {
+    return
+  }
+
+  // 如果已选中，则取消选中
+  if (selectedSku[skuKey] === skuValue.id) {
+    selectedSku[skuKey] = ''
+  } else {
+    selectedSku[skuKey] = skuValue.id
+  }
+}
+
+// 获取选中的SKU组合
+function getSelectedSkuComb() {
+  return getSkuComb(selectedSku)
+}
+
+// 根据已选SKU获取组合信息
+function getSkuComb(selectedSkuObj: Record<string, any>) {
+  const selected: Record<string, any> = { ...selectedSkuObj }
+
+  // 过滤掉空值
+  Object.keys(selected).forEach((key) => {
+    if (!selected[key]) {
+      delete selected[key]
+    }
+  })
+
+  // 检查是否所有SKU都已选择
+  if (Object.keys(selected).length !== props.skuTree.length) {
+    return null
+  }
+
+  // 查找匹配的SKU组合
+  for (let i = 0; i < props.skuList.length; i++) {
+    const sku = props.skuList[i]
+    let match = true
+
+    for (const key in selected) {
+      if (sku[key] !== selected[key]) {
+        match = false
+        break
+      }
+    }
+
+    if (match) {
+      return sku
+    }
+  }
+
+  return null
+}
+
+// 重置选择
+function reset() {
+  Object.keys(selectedSku).forEach((key) => delete selectedSku[key])
+  buyNum.value = 1
+}
+
+function open() {
+  show.value = true
+  emit('open')
+}
+
+// 关闭弹窗（修复原版 this.false = true 笔误）
+function close() {
+  show.value = false
+  emit('close')
+}
+
+// 确认选择
+function onConfirm() {
+  if (!canBuy.value) {
+    return
+  }
+
+  const selectedSkuComb = getSelectedSkuComb()
+  emit('confirm', {
+    sku: selectedSkuComb,
+    goodsInfo: props.goodsInfo,
+    num: buyNum.value,
+    selectedText: selectedSkuText.value,
+  })
+}
+
+defineExpose({ open, close, reset })
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-goods-sku {
+  background-color: $dd-bg-elevated;
+  overflow: hidden;
+
+  &__container {
+    padding: 4rpx 30rpx;
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: row;
+    padding: 30rpx 0;
+    position: relative;
+
+    &__image {
+      width: 180rpx;
+      height: 180rpx;
+      border-radius: 10rpx;
+      overflow: hidden;
+      margin-right: 20rpx;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &__info {
+      flex: 1;
+
+      &__price {
+        display: flex;
+        flex-direction: row;
+        align-items: baseline;
+        margin-bottom: 20rpx;
+
+        &__symbol {
+          font-size: 24rpx;
+          color: $dd-error-400;
+          margin-right: 4rpx;
+        }
+
+        &__value {
+          font-size: 36rpx;
+          color: $dd-error-400;
+          font-weight: bold;
+        }
+      }
+
+      &__stock {
+        font-size: 26rpx;
+        color: $dd-text-tertiary;
+        margin-bottom: 20rpx;
+      }
+
+      &__selected {
+        font-size: 26rpx;
+        color: $dd-text-primary;
+      }
+    }
+  }
+
+  &__content {
+    max-height: 600rpx;
+    padding: 0 30rpx 30rpx 0;
+
+    &__item {
+      margin-bottom: 30rpx;
+
+      &__title {
+        font-size: 28rpx;
+        color: $dd-text-primary;
+        margin-bottom: 20rpx;
+      }
+
+      &__list {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        &__item {
+          padding: 10rpx 20rpx;
+          border: 2rpx solid $dd-border-default;
+          border-radius: 10rpx;
+          margin-right: 20rpx;
+          margin-bottom: 20rpx;
+          font-size: 26rpx;
+          color: $dd-text-primary;
+          background-color: $dd-bg-elevated;
+
+          &--active {
+            border-color: $dd-error-400;
+            color: $dd-error-400;
+          }
+
+          &--disabled {
+            color: $dd-neutral-500;
+            border-color: $dd-border-default;
+          }
+        }
+      }
+    }
+
+    &__count {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 20rpx;
+
+      &__title {
+        font-size: 28rpx;
+        color: $dd-text-primary;
+      }
+    }
+  }
+
+  &__footer {
+    padding: 20rpx 0 40rpx 0;
+  }
+}
+</style>

package/components/dd-icon/dd-icon.vue

@@ -193,8 +193,8 @@ const iconStyle = computed(() => {
   &--dot::after {
     content: '';
     position: absolute;
-    top: -4rpx;
-    right: -4rpx;
+    top: -$dd-space-1;
+    right: -$dd-space-1;
     width: 12rpx;
     height: 12rpx;
     background: $dd-error-500;

package/components/dd-image/dd-image.vue

@@ -136,16 +136,16 @@ watch(
 }
 
 .dd-image__spinner {
-  width: 48rpx;
-  height: 48rpx;
-  border: 4rpx solid $dd-border-default;
+  width: $dd-size-icon-lg;
+  height: $dd-size-icon-lg;
+  border: $dd-space-1 solid $dd-border-default;
   border-top-color: $dd-primary-500;
   border-radius: 50%;
   animation: dd-image-spin 0.8s linear infinite;
 }
 
 .dd-image__error-icon {
-  font-size: 48rpx; // 24px
+  font-size: $dd-size-icon-lg; // 24px
   color: $dd-text-tertiary;
   line-height: 1;
 }

package/components/dd-input/dd-input.vue

@@ -112,9 +112,9 @@ function toggleVisible() {
 .dd-input {
   display: flex;
   align-items: center;
-  gap: 16rpx;
+  gap: $dd-space-2;
   height: 88rpx;
-  padding: 0 32rpx;
+  padding: 0 $dd-space-4;
   background: $dd-neutral-800;
   border: 1px solid $dd-neutral-700;
   border-radius: $dd-radius-md;
@@ -125,7 +125,7 @@ function toggleVisible() {
     flex: 1;
     min-width: 0;
     height: 100%;
-    font-size: 28rpx;
+    font-size: $dd-font-size-body;
     color: $dd-neutral-100;
     background: transparent;
     border: none;
@@ -144,12 +144,12 @@ function toggleVisible() {
     border-radius: 50%;
     background: $dd-neutral-700;
     color: $dd-neutral-300;
-    font-size: 24rpx;
+    font-size: $dd-font-size-caption;
     line-height: 1;
   }
 
   &__toggle {
-    font-size: 32rpx;
+    font-size: $dd-font-size-h4;
     opacity: 0.7;
     line-height: 1;
   }