@didaoktv/didaoui-uniapp 1.0.0

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

@@ -0,0 +1,158 @@
+<template>
+  <view class="dd-image" :class="{ 'dd-image--round': round }" :style="containerStyle" @click="onClick">
+    <image
+      class="dd-image__img"
+      :src="src"
+      :mode="fitMode"
+      :lazy-load="lazyLoad"
+      :show-menu-by-longpress="showMenuByLongpress"
+      @load="onLoad"
+      @error="onError"
+    />
+    <view v-if="status === 'loading'" class="dd-image__mask">
+      <slot name="loading">
+        <view class="dd-image__spinner"></view>
+      </slot>
+    </view>
+    <view v-if="status === 'error'" class="dd-image__mask">
+      <slot name="error">
+        <dd-icon name="photo-fail" class="dd-image__error-icon" />
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+type Fit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+
+interface Props {
+  src?: string
+  fit?: Fit
+  width?: string | number
+  height?: string | number
+  radius?: string | number
+  round?: boolean
+  lazyLoad?: boolean
+  showMenuByLongpress?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  src: '',
+  fit: 'cover',
+  width: '100%',
+  height: '100%',
+  radius: 0,
+  round: false,
+  lazyLoad: false,
+  showMenuByLongpress: false,
+})
+
+const emit = defineEmits<{
+  (e: 'load', ev: any): void
+  (e: 'error', ev: any): void
+  (e: 'click', ev: any): void
+}>()
+
+type Status = 'loading' | 'loaded' | 'error'
+const status = ref<Status>(props.src ? 'loading' : 'error')
+
+// ponytail: scale-down 降级为 aspectFit —— uni image 无原生 scale-down 等价 mode
+const fitMode = computed(() => {
+  const map: Record<Fit, string> = {
+    fill: 'scaleToFill',
+    contain: 'aspectFit',
+    cover: 'aspectFill',
+    none: 'center',
+    'scale-down': 'aspectFit',
+  }
+  return map[props.fit]
+})
+
+function toSize(v: string | number): string {
+  return typeof v === 'number' ? `${v}rpx` : v
+}
+
+const containerStyle = computed(() => {
+  const radius = props.round ? '50%' : toSize(props.radius)
+  return {
+    width: toSize(props.width),
+    height: toSize(props.height),
+    borderRadius: radius,
+  }
+})
+
+function onLoad(ev: any) {
+  status.value = 'loaded'
+  emit('load', ev)
+}
+
+function onError(ev: any) {
+  status.value = 'error'
+  emit('error', ev)
+}
+
+function onClick(ev: any) {
+  emit('click', ev)
+}
+
+watch(
+  () => props.src,
+  (val) => {
+    status.value = val ? 'loading' : 'error'
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  background: $dd-neutral-800; // var(--dd-bg-inset) 占位底色
+  vertical-align: middle;
+
+  &--round {
+    border-radius: 50% !important;
+  }
+}
+
+.dd-image__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.dd-image__mask {
+  position: absolute;
+  inset: 0;
+  @include dd-flex-center;
+  background: $dd-neutral-800;
+}
+
+.dd-image__spinner {
+  width: 48rpx;
+  height: 48rpx;
+  border: 4rpx 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
+  color: $dd-text-tertiary;
+  line-height: 1;
+}
+
+@keyframes dd-image-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

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

@@ -0,0 +1,172 @@
+<template>
+  <view
+    class="dd-input"
+    :class="{
+      'dd-input--focus': isFocused,
+      'dd-input--error': error,
+      'dd-input--disabled': disabled,
+    }"
+  >
+    <slot name="prefix"></slot>
+    <input
+      class="dd-input__inner"
+      :type="inputType"
+      :password="isPassword"
+      :value="modelValue"
+      :placeholder="placeholder"
+      placeholder-style="color:#9E9E9E"
+      :disabled="disabled"
+      :maxlength="maxlength"
+      :confirm-type="confirmType"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+      @confirm="onConfirm"
+    />
+    <view class="dd-input__suffix" v-if="showClear || showToggle || $slots.suffix">
+      <view v-if="showClear" class="dd-input__clear" @click="onClear"><dd-icon name="cross" /></view>
+      <dd-icon v-if="showToggle" :name="visible ? 'eye' : 'closed-eye'" class="dd-input__toggle" @click="toggleVisible" />
+      <slot name="suffix"></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  modelValue?: string | number
+  type?: 'text' | 'password' | 'search' | 'number'
+  placeholder?: string
+  disabled?: boolean
+  clearable?: boolean
+  showPassword?: boolean
+  error?: boolean
+  maxlength?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  type: 'text',
+  placeholder: '',
+  disabled: false,
+  clearable: false,
+  showPassword: false,
+  error: false,
+  maxlength: -1,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string): void
+  (e: 'focus', val: Event): void
+  (e: 'blur', val: Event): void
+  (e: 'clear'): void
+  (e: 'confirm', val: string): void
+  (e: 'search', val: string): void
+}>()
+
+const isFocused = ref(false)
+const visible = ref(false)
+
+// ponytail: search/number 在小程序降级处理；password 用 uni 原生 password 布尔属性跨端
+const inputType = computed<'text' | 'number'>(() => {
+  if (props.type === 'password' || props.type === 'search') return 'text'
+  return 'number'
+})
+const isPassword = computed(() => props.type === 'password' && !visible.value)
+const confirmType = computed(() => (props.type === 'search' ? 'search' : 'done'))
+const showClear = computed(() => props.clearable && !!props.modelValue && !props.disabled)
+const showToggle = computed(() => props.type === 'password' && props.showPassword)
+
+function onInput(e: any) {
+  const v = e?.detail?.value ?? e?.target?.value ?? ''
+  emit('update:modelValue', v)
+}
+function onFocus(e: Event) {
+  isFocused.value = true
+  emit('focus', e)
+}
+function onBlur(e: Event) {
+  isFocused.value = false
+  emit('blur', e)
+}
+function onClear() {
+  emit('update:modelValue', '')
+  emit('clear')
+}
+function onConfirm(e: any) {
+  const v = e?.detail?.value ?? e?.target?.value ?? ''
+  emit('confirm', v)
+  if (props.type === 'search') emit('search', v)
+}
+function toggleVisible() {
+  visible.value = !visible.value
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-input {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  height: 88rpx;
+  padding: 0 32rpx;
+  background: $dd-neutral-800;
+  border: 1px solid $dd-neutral-700;
+  border-radius: $dd-radius-md;
+  box-sizing: border-box;
+  @include dd-transition(border-color 0.2s, box-shadow 0.2s);
+
+  &__inner {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    font-size: 28rpx;
+    color: $dd-neutral-100;
+    background: transparent;
+    border: none;
+  }
+
+  &__suffix {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+  }
+
+  &__clear {
+    @include dd-flex-center;
+    width: 36rpx;
+    height: 36rpx;
+    border-radius: 50%;
+    background: $dd-neutral-700;
+    color: $dd-neutral-300;
+    font-size: 24rpx;
+    line-height: 1;
+  }
+
+  &__toggle {
+    font-size: 32rpx;
+    opacity: 0.7;
+    line-height: 1;
+  }
+
+  &--focus {
+    border-color: $dd-primary-500;
+    box-shadow: $dd-shadow-glow-gold-lg;
+  }
+
+  &--error {
+    border-color: $dd-error-500;
+    box-shadow: $dd-shadow-glow-error-md;
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    @include dd-no-touch;
+  }
+}
+</style>

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

@@ -0,0 +1,152 @@
+<template>
+  <view
+    class="dd-list-cell"
+    :class="{ 'dd-list-cell--link': isLink || arrow, 'dd-list-cell--borderless': borderless }"
+    :hover-class="isLink || arrow ? 'dd-list-cell--active' : ''"
+    :hover-stay-time="100"
+    @click="onClick"
+  >
+    <view v-if="$slots.icon || icon" class="dd-list-cell__icon">
+      <slot name="icon">
+        <view class="dd-list-cell__icon-text">
+          <dd-icon v-if="icon" :name="icon"  />
+        </view>
+      </slot>
+    </view>
+    <view class="dd-list-cell__content">
+      <text class="dd-list-cell__title">{{ title }}</text>
+      <text v-if="subtitle || $slots.subtitle" class="dd-list-cell__subtitle">
+        <slot name="subtitle">{{ subtitle }}</slot>
+      </text>
+    </view>
+    <view class="dd-list-cell__right">
+      <slot name="value">
+        <text v-if="value" class="dd-list-cell__value">{{ value }}</text>
+      </slot>
+      <slot name="right-icon"></slot>
+      <view v-if="isLink || arrow" class="dd-list-cell__arrow"><dd-icon name="arrow" /></view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  title?: string
+  subtitle?: string
+  value?: string
+  icon?: string
+  arrow?: boolean
+  isLink?: boolean
+  borderless?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  subtitle: '',
+  value: '',
+  icon: '',
+  arrow: false,
+  isLink: false,
+  borderless: false,
+})
+
+const emit = defineEmits<{ (e: 'click', val: Event): void }>()
+
+const slots = useSlots()
+void slots
+
+function onClick(e: Event) {
+  emit('click', e)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-list-cell {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: 96rpx;
+  padding: 0 $dd-space-4;
+  box-sizing: border-box;
+  background: $dd-bg-elevated;
+  @include dd-hairline-bottom($dd-border-default);
+
+  &__icon {
+    flex-shrink: 0;
+    width: 56rpx;
+    height: 56rpx;
+    margin-right: $dd-space-3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__icon-text {
+    font-size: 40rpx;
+    line-height: 1;
+    color: $dd-primary-400;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4rpx;
+  }
+
+  &__title {
+    font-size: $dd-font-size-body;
+    font-weight: 500;
+    color: $dd-text-primary;
+    @include dd-ellipsis(1);
+  }
+
+  &__subtitle {
+    font-size: $dd-font-size-caption;
+    color: $dd-text-tertiary;
+    @include dd-ellipsis(1);
+  }
+
+  &__right {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: $dd-space-1;
+    margin-left: $dd-space-2;
+  }
+
+  &__value {
+    font-size: $dd-font-size-body;
+    font-weight: 500;
+    color: $dd-primary-400;
+  }
+
+  &__arrow {
+    font-size: 36rpx;
+    color: $dd-text-tertiary;
+    line-height: 1;
+    margin-left: $dd-space-1;
+  }
+
+  &--borderless {
+    &::after {
+      display: none;
+    }
+  }
+
+  &--link {
+    cursor: pointer;
+  }
+
+  &--active {
+    background: $dd-surface-container-highest;
+  }
+}
+</style>

package/components/dd-loading/dd-loading.vue

@@ -0,0 +1,187 @@
+<template>
+  <view v-if="fullscreen" class="dd-loading dd-loading--fullscreen" :style="{ zIndex: 9999 }">
+    <view class="dd-loading__mask"></view>
+    <view class="dd-loading__box">
+      <view class="dd-loading__core" :class="[`dd-loading__core--${type}`, `dd-loading__core--${size}`]" :style="coreStyle">
+        <template v-if="type === 'spinner'">
+          <view class="dd-loading__spinner"></view>
+        </template>
+        <template v-else-if="type === 'dots'">
+          <view class="dd-loading__dot" v-for="i in 3" :key="i" :style="{ animationDelay: `${(3 - i) * 0.16}s` }"></view>
+        </template>
+        <template v-else>
+          <view class="dd-loading__ring" v-for="i in 2" :key="i" :style="{ animationDelay: `${(i - 1) * 0.9}s` }"></view>
+          <view class="dd-loading__pulse-core"></view>
+        </template>
+      </view>
+      <text v-if="text" class="dd-loading__text">{{ text }}</text>
+    </view>
+  </view>
+  <view v-else class="dd-loading" :class="[`dd-loading--inline`, `dd-loading--${type}`, `dd-loading--${size}`]">
+    <view class="dd-loading__core" :class="[`dd-loading__core--${type}`, `dd-loading__core--${size}`]" :style="coreStyle">
+      <template v-if="type === 'spinner'">
+        <view class="dd-loading__spinner"></view>
+      </template>
+      <template v-else-if="type === 'dots'">
+        <view class="dd-loading__dot" v-for="i in 3" :key="i" :style="{ animationDelay: `${(3 - i) * 0.16}s` }"></view>
+      </template>
+      <template v-else>
+        <view class="dd-loading__ring" v-for="i in 2" :key="i" :style="{ animationDelay: `${(i - 1) * 0.9}s` }"></view>
+        <view class="dd-loading__pulse-core"></view>
+      </template>
+    </view>
+    <text v-if="text" class="dd-loading__text">{{ text }}</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  type?: 'spinner' | 'dots' | 'pulse'
+  size?: 'sm' | 'md' | 'lg'
+  fullscreen?: boolean
+  text?: string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'spinner',
+  size: 'md',
+  fullscreen: false,
+  text: '',
+  color: '',
+})
+
+const coreStyle = computed(() => (props.color ? { '--dd-loading-color': props.color } : {}))
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-loading {
+  --dd-loading-color: #{$dd-primary-400};
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $dd-space-2;
+
+  &--inline {
+    display: inline-flex;
+  }
+
+  &--fullscreen {
+    position: fixed;
+    inset: 0;
+    @include dd-flex-center;
+  }
+
+  &__mask {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    /* #ifdef H5 */
+    backdrop-filter: blur(8rpx);
+    -webkit-backdrop-filter: blur(8rpx);
+    /* #endif */
+  }
+
+  &__box {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: $dd-space-3;
+  }
+
+  &__core {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    &--spinner {
+      &.dd-loading__core--sm { width: 40rpx; height: 40rpx; }
+      &.dd-loading__core--md { width: 64rpx; height: 64rpx; }
+      &.dd-loading__core--lg { width: 96rpx; height: 96rpx; }
+    }
+    &--dots {
+      &.dd-loading__core--sm .dd-loading__dot { width: 12rpx; height: 12rpx; }
+      &.dd-loading__core--md .dd-loading__dot { width: 20rpx; height: 20rpx; }
+      &.dd-loading__core--lg .dd-loading__dot { width: 28rpx; height: 28rpx; }
+    }
+    &--pulse {
+      &.dd-loading__core--sm { width: 40rpx; height: 40rpx; }
+      &.dd-loading__core--md { width: 64rpx; height: 64rpx; }
+      &.dd-loading__core--lg { width: 96rpx; height: 96rpx; }
+      &.dd-loading__core--sm .dd-loading__pulse-core { width: 16rpx; height: 16rpx; }
+      &.dd-loading__core--md .dd-loading__pulse-core { width: 24rpx; height: 24rpx; }
+      &.dd-loading__core--lg .dd-loading__pulse-core { width: 36rpx; height: 36rpx; }
+    }
+  }
+
+  &__spinner {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border-color: rgba(245, 166, 35, 0.2);
+    border-style: solid;
+    border-width: 4rpx;
+    border-top-color: var(--dd-loading-color);
+    border-right-color: var(--dd-loading-color);
+    box-shadow: 0 0 12rpx rgba(245, 166, 35, 0.5);
+    animation: dd-loading-spin 0.8s linear infinite;
+  }
+  .dd-loading__core--sm .dd-loading__spinner { border-width: 4rpx; }
+  .dd-loading__core--md .dd-loading__spinner { border-width: 6rpx; }
+  .dd-loading__core--lg .dd-loading__spinner { border-width: 8rpx; }
+
+  &__dot {
+    width: 20rpx;
+    height: 20rpx;
+    margin: 0 6rpx;
+    border-radius: 50%;
+    background: var(--dd-loading-color);
+    box-shadow: 0 0 16rpx rgba(245, 166, 35, 0.6);
+    animation: dd-loading-bounce 1.2s ease-in-out infinite;
+  }
+
+  &__ring {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 2rpx solid var(--dd-loading-color);
+    opacity: 0;
+    transform: scale(0.3);
+    animation: dd-loading-pulse 1.8s ease-out infinite;
+  }
+
+  &__pulse-core {
+    width: 24rpx;
+    height: 24rpx;
+    border-radius: 50%;
+    background: var(--dd-loading-color);
+    box-shadow: $dd-shadow-glow-gold-lg;
+  }
+
+  &__text {
+    color: $dd-text-secondary;
+    font-size: $dd-font-size-body;
+    line-height: 1.4;
+  }
+}
+
+@keyframes dd-loading-spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes dd-loading-bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.6; }
+  40% { transform: scale(1); opacity: 1; }
+}
+@keyframes dd-loading-pulse {
+  0% { transform: scale(0.3); opacity: 1; }
+  100% { transform: scale(2.5); opacity: 0; }
+}
+</style>