@didaoktv/didaoui-uniapp 1.0.0

package/components/dd-date-picker/dd-date-picker.vue

@@ -0,0 +1,253 @@
+<template>
+  <view class="dd-dp" :class="{ 'dd-dp--open': show }">
+    <view class="dd-dp__mask" @click="onMaskClick"></view>
+    <view class="dd-dp__sheet">
+      <view class="dd-dp__toolbar">
+        <text class="dd-dp__cancel" @click="onCancel">取消</text>
+        <text class="dd-dp__title">{{ title }}</text>
+        <text class="dd-dp__confirm" @click="onConfirm">确定</text>
+      </view>
+      <picker-view
+        class="dd-dp__wheels"
+        :value="indexes"
+        :indicator-style="indicatorStyle"
+        @change="onPickerChange"
+      >
+        <picker-view-column v-for="(col, ci) in columns" :key="ci">
+          <view v-for="(item, ii) in col" :key="ii" class="dd-dp__item">
+            <text class="dd-dp__item-text">{{ item }}</text>
+          </view>
+        </picker-view-column>
+      </picker-view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  show?: boolean
+  type?: 'date' | 'time' | 'datetime' | 'range'
+  modelValue?: string
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  show: false,
+  type: 'date',
+  modelValue: '',
+  title: '选择日期',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string): void
+  (e: 'update:show', val: boolean): void
+  (e: 'confirm', val: string): void
+  (e: 'cancel'): void
+}>()
+
+// ponytail: 年份范围固定为当前年±10 年；range 类型按单日期格式输出(规格声明未完整实现)
+const currentYear = new Date().getFullYear()
+const startYear = currentYear - 10
+const endYear = currentYear + 10
+
+const indicatorStyle =
+  'height:80rpx;background:rgba(255,193,7,0.08);border-top:1px solid rgba(255,193,7,0.3);border-bottom:1px solid rgba(255,193,7,0.3);box-shadow:0 0 20rpx rgba(255,193,7,0.15);'
+
+const indexes = ref<number[]>([])
+
+const yearList = computed(() => {
+  const arr: string[] = []
+  for (let y = startYear; y <= endYear; y++) arr.push(`${y}年`)
+  return arr
+})
+const monthList = Array.from({ length: 12 }, (_, i) => `${i + 1}月`)
+const hourList = Array.from({ length: 24 }, (_, i) => `${i}时`)
+const minuteList = Array.from({ length: 60 }, (_, i) => `${i}分`)
+
+function daysInMonth(y: number, m: number) {
+  return new Date(y, m, 0).getDate()
+}
+function dayListFor(y: number, m: number) {
+  return Array.from({ length: daysInMonth(y, m) }, (_, i) => `${i + 1}日`)
+}
+
+const columns = computed<string[][]>(() => {
+  const y = startYear + (indexes.value[0] ?? 0)
+  const m = (indexes.value[1] ?? 0) + 1
+  switch (props.type) {
+    case 'time':
+      return [hourList, minuteList]
+    case 'datetime':
+      return [yearList.value, monthList, dayListFor(y, m), hourList, minuteList]
+    case 'range':
+    case 'date':
+    default:
+      return [yearList.value, monthList, dayListFor(y, m)]
+  }
+})
+
+function parseValue(val: string) {
+  const now = new Date()
+  const base = {
+    y: now.getFullYear(),
+    m: now.getMonth() + 1,
+    d: now.getDate(),
+    h: now.getHours(),
+    min: now.getMinutes(),
+  }
+  if (!val) return base
+  try {
+    if (props.type === 'time') {
+      const [h, min] = val.split(':').map(Number)
+      return { ...base, h: h || 0, min: min || 0 }
+    }
+    const [datePart, timePart] = val.split(' ')
+    const [y, m, d] = datePart.split('-').map(Number)
+    let h = base.h
+    let min = base.min
+    if (timePart && props.type === 'datetime') {
+      const [hh, mm] = timePart.split(':').map(Number)
+      h = hh || 0
+      min = mm || 0
+    }
+    return { y: y || base.y, m: m || 1, d: d || 1, h, min }
+  } catch {
+    return base
+  }
+}
+
+function initIndexes() {
+  const p = parseValue(String(props.modelValue ?? ''))
+  const yi = Math.max(0, yearList.value.indexOf(`${p.y}年`))
+  const mi = Math.max(0, p.m - 1)
+  const di = Math.max(0, p.d - 1)
+  if (props.type === 'time') indexes.value = [p.h, p.min]
+  else if (props.type === 'datetime') indexes.value = [yi, mi, di, p.h, p.min]
+  else indexes.value = [yi, mi, di]
+}
+
+watch(() => props.show, (v) => {
+  if (v) initIndexes()
+})
+
+function onPickerChange(e: any) {
+  const val = (e?.detail?.value ?? []).slice()
+  const dayIdx = props.type === 'date' || props.type === 'range' ? 2 : props.type === 'datetime' ? 3 : -1
+  if (dayIdx >= 0) {
+    const y = startYear + (val[0] ?? 0)
+    const m = (val[1] ?? 0) + 1
+    const maxDay = daysInMonth(y, m)
+    if ((val[dayIdx] ?? 0) > maxDay - 1) {
+      val[dayIdx] = maxDay - 1
+    }
+  }
+  indexes.value = val
+}
+
+function buildOutput() {
+  const v = indexes.value
+  const pad = (n: number) => String(n).padStart(2, '0')
+  if (props.type === 'time') return `${pad(v[0] ?? 0)}:${pad(v[1] ?? 0)}`
+  const y = startYear + (v[0] ?? 0)
+  const m = (v[1] ?? 0) + 1
+  const d = (v[2] ?? 0) + 1
+  if (props.type === 'datetime') return `${y}-${pad(m)}-${pad(d)} ${pad(v[3] ?? 0)}:${pad(v[4] ?? 0)}`
+  return `${y}-${pad(m)}-${pad(d)}`
+}
+
+function close() {
+  emit('update:show', false)
+}
+function onMaskClick() {
+  onCancel()
+}
+function onCancel() {
+  emit('cancel')
+  close()
+}
+function onConfirm() {
+  const out = buildOutput()
+  emit('update:modelValue', out)
+  emit('confirm', out)
+  close()
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+:deep(.uni-picker-view-mask) {
+  background-image: linear-gradient(180deg, hsl(0deg 0% 9% / 95%), hsl(0deg 0% 9% / 60%)), linear-gradient(0deg, hsl(0deg 0% 9% / 95%), hsl(0deg 0% 9% / 60%));
+}
+.dd-dp {
+  &__mask {
+    position: fixed;
+    inset: 0;
+    z-index: $dd-z-index-overlay;
+    background: $dd-color-overlay-strong;
+    opacity: 0;
+    pointer-events: none;
+    @include dd-transition(opacity 0.3s);
+  }
+
+  &__sheet {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $dd-z-index-popup;
+    background: $dd-neutral-800;
+    border-radius: $dd-radius-2xl $dd-radius-2xl 0 0;
+    transform: translateY(100%);
+    @include dd-transition(transform 0.3s);
+    @include dd-safe-area-bottom;
+  }
+
+  &--open &__mask {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  &--open &__sheet {
+    transform: translateY(0);
+  }
+
+  &__toolbar {
+    @include dd-flex-between;
+    height: 96rpx;
+    padding: 0 32rpx;
+    @include dd-hairline-bottom($dd-border-default);
+  }
+  &__cancel {
+    font-size: 28rpx;
+    color: $dd-text-secondary;
+  }
+  &__title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: $dd-text-primary;
+    @include dd-ellipsis(1);
+  }
+  &__confirm {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: $dd-primary-400;
+  }
+
+  &__wheels {
+    width: 100%;
+    height: 400rpx;
+  }
+
+  &__item {
+    @include dd-flex-center;
+    height: 80rpx;
+  }
+  &__item-text {
+    font-size: 32rpx;
+    color: $dd-text-primary;
+  }
+}
+</style>

package/components/dd-dialog/dd-dialog.vue

@@ -0,0 +1,264 @@
+<template>
+  <view class="dd-dialog">
+    <view
+      class="dd-dialog__mask"
+      :class="{ 'dd-dialog__mask--show': modelValue }"
+      @click="onOverlayClick"
+    ></view>
+    <view
+      class="dd-dialog__card"
+      :class="[{ 'dd-dialog__card--show': modelValue }, `dd-dialog__card--${theme}`]"
+      :style="{ width: widthValue, maxWidth: '92vw' }"
+    >
+      <view v-if="title" class="dd-dialog__header">
+        <text class="dd-dialog__title">{{ title }}</text>
+      </view>
+      <view class="dd-dialog__body" :class="{ 'dd-dialog__body--isolated': !title }">
+        <text v-if="message" class="dd-dialog__message">{{ message }}</text>
+        <slot v-else></slot>
+      </view>
+      <view v-if="showConfirmButton || showCancelButton" class="dd-dialog__footer" :class="`dd-dialog__footer--${theme}`">
+        <template v-if="theme === 'round-button'">
+          <view
+            v-if="showCancelButton"
+            class="dd-dialog__pill dd-dialog__pill--cancel"
+            :style="cancelStyle"
+            @click="onCancel"
+          >
+            <text class="dd-dialog__pill-text">{{ cancelButtonText }}</text>
+          </view>
+          <view
+            v-if="showConfirmButton"
+            class="dd-dialog__pill dd-dialog__pill--confirm"
+            :style="confirmStyle"
+            @click="onConfirm"
+          >
+            <text class="dd-dialog__pill-text dd-dialog__pill-text--confirm">{{ confirmButtonText }}</text>
+          </view>
+        </template>
+        <template v-else>
+          <view
+            v-if="showCancelButton"
+            class="dd-dialog__btn dd-dialog__btn--cancel"
+            @click="onCancel"
+          >
+            <text class="dd-dialog__btn-text" :style="cancelStyle">{{ cancelButtonText }}</text>
+          </view>
+          <view
+            v-if="showConfirmButton"
+            class="dd-dialog__btn dd-dialog__btn--confirm"
+            @click="onConfirm"
+          >
+            <text class="dd-dialog__btn-text" :style="confirmStyle">{{ confirmButtonText }}</text>
+          </view>
+        </template>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: boolean
+  title?: string
+  message?: string
+  theme?: 'default' | 'round-button'
+  showConfirmButton?: boolean
+  showCancelButton?: boolean
+  confirmButtonText?: string
+  cancelButtonText?: string
+  confirmColor?: string
+  cancelColor?: string
+  width?: string | number
+  closeOnClickOverlay?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  title: '',
+  message: '',
+  theme: 'default',
+  showConfirmButton: true,
+  showCancelButton: false,
+  confirmButtonText: '确认',
+  cancelButtonText: '取消',
+  confirmColor: '',
+  cancelColor: '',
+  width: '640rpx',
+  closeOnClickOverlay: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+  (e: 'close'): void
+}>()
+
+const widthValue = computed(() =>
+  typeof props.width === 'number' ? `${props.width}rpx` : props.width
+)
+
+const confirmStyle = computed(() => {
+  if (props.theme === 'round-button') {
+    return props.confirmColor ? { background: props.confirmColor } : {}
+  }
+  return props.confirmColor ? { color: props.confirmColor } : {}
+})
+
+const cancelStyle = computed(() => {
+  if (props.theme === 'round-button') {
+    return {}
+  }
+  return props.cancelColor ? { color: props.cancelColor } : {}
+})
+
+function close() {
+  emit('update:modelValue', false)
+  emit('close')
+}
+
+function onOverlayClick() {
+  if (!props.closeOnClickOverlay) return
+  emit('cancel')
+  close()
+}
+
+function onConfirm() {
+  emit('confirm')
+  close()
+}
+
+function onCancel() {
+  emit('cancel')
+  close()
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-dialog {
+  &__mask {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    opacity: 0;
+    visibility: hidden;
+    z-index: 2000;
+    @include dd-transition(opacity 0.3s ease, visibility 0.3s);
+
+    &--show {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &__card {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 0;
+    visibility: hidden;
+    z-index: 2001;
+    background: $dd-bg-elevated;
+    border: 1px solid $dd-border-default;
+    border-radius: $dd-radius-lg;
+    box-shadow: $dd-shadow-4;
+    overflow: hidden;
+    @include dd-transition(transform 0.3s ease, opacity 0.3s ease, visibility 0.3s);
+
+    &--show {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &__header {
+    padding: $dd-space-5 $dd-space-5 $dd-space-2;
+    text-align: center;
+  }
+
+  &__title {
+    font-size: $dd-font-size-h4;
+    font-weight: $dd-font-weight-h4;
+    color: $dd-text-primary;
+    line-height: 1.3;
+  }
+
+  &__body {
+    padding: $dd-space-2 $dd-space-5 $dd-space-5;
+    text-align: center;
+
+    &--isolated {
+      padding-top: $dd-space-5;
+    }
+  }
+
+  &__message {
+    font-size: $dd-font-size-body;
+    color: $dd-text-secondary;
+    line-height: $dd-line-height-body;
+  }
+
+  &__footer {
+    &--default {
+      display: flex;
+      border-top: 1px solid $dd-border-subtle;
+    }
+
+    &--round-button {
+      display: flex;
+      flex-direction: column;
+      gap: $dd-space-3;
+      padding: 0 $dd-space-5 $dd-space-5;
+    }
+  }
+
+  &__btn {
+    flex: 1;
+    @include dd-flex-center;
+    height: 96rpx;
+
+    &--cancel {
+      border-right: 1px solid $dd-border-subtle;
+    }
+  }
+
+  &__btn-text {
+    font-size: $dd-font-size-body;
+    font-weight: 500;
+    color: $dd-text-secondary;
+  }
+
+  &__pill {
+    height: 80rpx;
+    border-radius: $dd-radius-full;
+    @include dd-flex-center;
+    @include dd-transition(background 0.2s ease);
+
+    &--cancel {
+      background: $dd-surface-container;
+    }
+
+    &--confirm {
+      background: $dd-primary-500;
+    }
+  }
+
+  &__pill-text {
+    font-size: $dd-font-size-body;
+    font-weight: 600;
+    color: $dd-text-secondary;
+
+    &--confirm {
+      color: $dd-color-white;
+    }
+  }
+}
+</style>

package/components/dd-divider/dd-divider.vue

@@ -0,0 +1,104 @@
+<template>
+  <view class="dd-divider" :class="[`dd-divider--${contentPosition}`]">
+    <view
+      class="dd-divider__line"
+      :class="[
+        `dd-divider__line--left`,
+        `dd-divider__line--${lineStyle}`,
+        { 'dd-divider__line--hairline': effectiveHairline },
+      ]"
+    ></view>
+    <view v-if="hasContent" class="dd-divider__content">
+      <slot></slot>
+    </view>
+    <view
+      class="dd-divider__line"
+      :class="[
+        `dd-divider__line--right`,
+        `dd-divider__line--${lineStyle}`,
+        { 'dd-divider__line--hairline': effectiveHairline },
+      ]"
+    ></view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+interface Props {
+  contentPosition?: 'left' | 'center' | 'right'
+  dashed?: boolean
+  /** true=1px hairline; false=4rpx (dashed 归一化为 1px) */
+  hairline?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  contentPosition: 'center',
+  dashed: false,
+  hairline: true,
+})
+
+const slots = useSlots()
+const hasContent = computed(() => !!slots.default)
+
+const lineStyle = computed(() => (props.dashed ? 'dashed' : 'solid'))
+// ponytail: dashed 非 hairline 归一化回 1px，避免 4rpx 粗虚线显得笨重
+const effectiveHairline = computed(() => props.hairline || props.dashed)
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-divider {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 48rpx; // 24px
+
+  &__content {
+    flex: none;
+    padding: 0 $dd-space-2;
+    color: $dd-text-tertiary;
+    font-size: $dd-font-size-caption;
+    line-height: 1.5;
+  }
+
+  &__line {
+    flex: 1;
+    border-top-color: $dd-border-default;
+
+    &--left {
+      flex: 1;
+    }
+
+    &--right {
+      flex: 1;
+    }
+
+    &--hairline {
+      border-top-width: 1px;
+    }
+
+    &--solid {
+      border-top-style: solid;
+    }
+
+    &--dashed {
+      border-top-style: dashed;
+    }
+
+    &:not(.dd-divider__line--hairline) {
+      border-top-width: 4rpx;
+    }
+  }
+}
+
+// contentPosition 折叠单行：left 折叠左线，right 折叠右线
+.dd-divider--left .dd-divider__line--left {
+  flex: 0 0 $dd-space-3;
+}
+.dd-divider--right .dd-divider__line--right {
+  flex: 0 0 $dd-space-3;
+}
+</style>