@didaoktv/didaoui-uniapp 1.0.0

package/components/dd-avatar/dd-avatar.vue

@@ -0,0 +1,168 @@
+<template>
+  <view class="dd-avatar" :class="[`dd-avatar--${size}`, `dd-avatar--${shape}`, { 'dd-avatar--vip': vip }]">
+    <view class="dd-avatar__inner">
+      <image
+        v-if="src && !fallback"
+        class="dd-avatar__img"
+        :src="src"
+        mode="aspectFill"
+        @error="onImgError"
+      />
+      <view v-else class="dd-avatar__text-wrap">
+        <text class="dd-avatar__text">{{ displayText }}</text>
+      </view>
+    </view>
+    <view v-if="online" class="dd-avatar__online"></view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Props {
+  src?: string
+  text?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  shape?: 'circle' | 'square'
+  vip?: boolean
+  online?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  src: '',
+  text: '',
+  size: 'md',
+  shape: 'circle',
+  vip: false,
+  online: false,
+})
+
+const fallback = ref(false)
+
+const displayText = computed(() => {
+  const t = props.text || ''
+  return t ? t.charAt(0).toUpperCase() : ''
+})
+
+function onImgError() {
+  fallback.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-avatar {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+
+  &__inner {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    background: $dd-gradient-primary;
+  }
+
+  &__img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__text-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__text {
+    font-family: $dd-font-heading;
+    font-weight: 600;
+    color: $dd-color-white;
+    line-height: 1;
+  }
+
+  &__online {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 25%;
+    height: 25%;
+    min-width: 16rpx;
+    min-height: 16rpx;
+    max-width: 28rpx;
+    max-height: 28rpx;
+    border-radius: 50%;
+    background: $dd-success-500;
+    border: 4rpx solid $dd-bg-elevated;
+    box-shadow: 0 0 12rpx rgba(76, 175, 80, 0.6);
+    box-sizing: border-box;
+  }
+}
+
+// === 形状 ===
+.dd-avatar--circle .dd-avatar__inner {
+  border-radius: 50%;
+}
+
+.dd-avatar--square .dd-avatar__inner {
+  border-radius: $dd-radius-md;
+}
+
+// === 5 尺寸 (px→rpx x2) ===
+.dd-avatar--xs {
+  width: 48rpx;
+  height: 48rpx;
+  .dd-avatar__text { font-size: $dd-font-size-caption; }
+}
+
+.dd-avatar--sm {
+  width: 64rpx;
+  height: 64rpx;
+  .dd-avatar__text { font-size: $dd-font-size-body; }
+}
+
+.dd-avatar--md {
+  width: 88rpx;
+  height: 88rpx;
+  .dd-avatar__text { font-size: $dd-font-size-h3; }
+}
+
+.dd-avatar--lg {
+  width: 128rpx;
+  height: 128rpx;
+  .dd-avatar__text { font-size: $dd-font-size-h2; }
+}
+
+.dd-avatar--xl {
+  width: 192rpx;
+  height: 192rpx;
+  .dd-avatar__text { font-size: $dd-font-size-h1; }
+}
+
+// === VIP: 金色渐变环 + 发光 ===
+.dd-avatar--vip {
+  padding: 4rpx;
+  background: $dd-gradient-primary-wide;
+  box-shadow: $dd-shadow-glow-gold-lg;
+
+  .dd-avatar__inner {
+    border-radius: inherit;
+  }
+}
+
+.dd-avatar--vip.dd-avatar--circle {
+  border-radius: 50%;
+}
+
+.dd-avatar--vip.dd-avatar--square {
+  border-radius: $dd-radius-lg;
+}
+</style>

package/components/dd-backtop/dd-backtop.vue

@@ -0,0 +1,75 @@
+<template>
+  <view
+    class="dd-backtop"
+    :class="{ 'dd-backtop--show': visible }"
+    :style="{ right: right + 'rpx', bottom: bottom + 'rpx' }"
+    @click="onClick"
+  >
+    <slot name="icon">
+      <view class="dd-backtop__icon"><dd-icon name="back-top" /></view>
+    </slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  scrollTop?: number
+  visibilityHeight?: number
+  right?: number
+  bottom?: number
+  duration?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  scrollTop: 0,
+  visibilityHeight: 400,
+  right: 40,
+  bottom: 40,
+  duration: 300,
+})
+
+const emit = defineEmits<{ (e: 'click'): void }>()
+
+const visible = computed(() => props.scrollTop > props.visibilityHeight)
+
+function onClick() {
+  emit('click')
+  uni.pageScrollTo({ scrollTop: 0, duration: props.duration })
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-backtop {
+  position: fixed;
+  z-index: $dd-z-index-fixed;
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: $dd-radius-full;
+  background: $dd-surface;
+  color: $dd-text-primary;
+  box-shadow: $dd-shadow-2;
+  @include dd-flex-center;
+  opacity: 0;
+  transform: scale(0);
+  @include dd-no-touch;
+  @include dd-transition(opacity 0.3s, transform 0.3s);
+
+  &--show {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+    user-select: auto;
+  }
+
+  &__icon {
+    font-size: $dd-font-size-lead;
+    line-height: 1;
+  }
+}
+</style>

package/components/dd-badge/dd-badge.vue

@@ -0,0 +1,150 @@
+<template>
+  <view class="dd-badge">
+    <slot></slot>
+    <view
+      v-if="visible"
+      class="dd-badge__sup"
+      :class="[`dd-badge__sup--${type}`, `dd-badge__sup--${variant}`]"
+    >
+      <template v-if="type === 'dot'"></template>
+      <text v-else-if="type === 'number'" class="dd-badge__num">{{ displayContent }}</text>
+      <text v-else class="dd-badge__txt"><slot>{{ content }}</slot></text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  type?: 'dot' | 'number' | 'text'
+  variant?: 'primary' | 'error' | 'success' | 'warning'
+  content?: string | number
+  max?: number
+  showZero?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'number',
+  variant: 'error',
+  content: '',
+  max: 99,
+  showZero: false,
+})
+
+const numericContent = computed(() => {
+  return typeof props.content === 'number' ? props.content : Number(props.content)
+})
+
+const isNumber = computed(() => !Number.isNaN(numericContent.value))
+
+const displayContent = computed(() => {
+  if (!isNumber.value) return String(props.content)
+  const n = numericContent.value
+  if (n > props.max) return `${props.max}+`
+  return String(n)
+})
+
+// dot 始终显示; number 当 0 且 !showZero 时隐藏; text 当内容为空时隐藏
+const visible = computed(() => {
+  if (props.type === 'dot') return true
+  if (props.type === 'number') {
+    if (!isNumber.value) return false
+    const n = numericContent.value
+    if (n === 0 && !props.showZero) return false
+    return true
+  }
+  // text
+  const hasSlot = false // slot 默认内容由父级传入, 此处依赖 content prop
+  return hasSlot || String(props.content).length > 0
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-badge {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+
+  &__sup {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(25%, -25%);
+    z-index: 1;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__num {
+    font-family: $dd-font-mono;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 1;
+    padding: 0 10rpx;
+  }
+
+  &__txt {
+    font-family: $dd-font-body;
+    font-weight: 500;
+    color: $dd-color-white;
+    line-height: 1;
+    padding: 0 $dd-space-2;
+  }
+}
+
+// === dot: 16rpx 圆点 ===
+.dd-badge__sup--dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  padding: 0;
+}
+
+// === number: 胶囊, 最小宽度 36rpx, 高度 36rpx ===
+.dd-badge__sup--number {
+  min-width: 36rpx;
+  height: 36rpx;
+  border-radius: $dd-radius-full;
+  font-size: $dd-font-size-caption;
+}
+
+// === text: 胶囊 ===
+.dd-badge__sup--text {
+  height: 36rpx;
+  border-radius: $dd-radius-full;
+  font-size: 20rpx;
+}
+
+// === 4 色变体 ===
+.dd-badge__sup--primary {
+  background: $dd-gradient-primary;
+  box-shadow: $dd-shadow-glow-gold-sm;
+}
+
+.dd-badge__sup--error {
+  background: $dd-error-500;
+  box-shadow: $dd-shadow-glow-error-sm;
+}
+
+.dd-badge__sup--success {
+  background: $dd-success-500;
+  box-shadow: $dd-shadow-glow-success-sm;
+}
+
+.dd-badge__sup--warning {
+  background: $dd-warning-500;
+  color: $dd-warning-contrast;
+  box-shadow: $dd-shadow-glow-warning-md;
+}
+
+// text 变体强制反色字
+.dd-badge__sup--text.dd-badge__sup--warning .dd-badge__txt {
+  color: $dd-warning-contrast;
+}
+</style>

package/components/dd-button/dd-button.vue

@@ -0,0 +1,215 @@
+<template>
+  <view
+    class="dd-btn"
+    :class="[
+      `dd-btn--${type}`,
+      `dd-btn--${size}`,
+      {
+        'dd-btn--block': block,
+        'dd-btn--round': round,
+        'dd-btn--icon-right': iconPosition === 'right',
+        'dd-btn--icon-only': isIconOnly,
+        'dd-btn--loading': loading,
+        'dd-btn--disabled': disabled,
+      },
+    ]"
+    :hover-class="!disabled && !loading ? 'dd-btn--hover' : ''"
+    :hover-stay-time="120"
+    @click="onClick"
+  >
+    <view v-if="loading" class="dd-btn__loading"></view>
+    <template v-else>
+      <slot v-if="$slots.icon" name="icon"></slot>
+      <dd-icon v-else-if="icon" :name="icon" class="dd-btn__icon" />
+    </template>
+    <text v-if="$slots.default" class="dd-btn__label"><slot></slot></text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  type?: 'primary' | 'secondary' | 'ghost' | 'text' | 'success' | 'warning' | 'danger'
+  size?: 'sm' | 'md' | 'lg'
+  block?: boolean
+  round?: boolean
+  iconPosition?: 'left' | 'right'
+  icon?: string
+  loading?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  size: 'md',
+  block: false,
+  round: false,
+  iconPosition: 'left',
+  icon: '',
+  loading: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{ (e: 'click', val: Event): void }>()
+
+const slots = useSlots()
+const isIconOnly = computed(() => !slots.default && (!!props.icon || !!slots.icon))
+
+function onClick(e: Event) {
+  if (props.disabled || props.loading) return
+  emit('click', e)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-btn {
+  @include dd-flex-center;
+  @include dd-transition(background 0.2s, box-shadow 0.2s, opacity 0.2s);
+  gap: 8rpx;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: $dd-radius-md;
+  font-family: $dd-font-body;
+  white-space: nowrap;
+  user-select: none;
+  height: 88rpx;
+  padding: 0 32rpx;
+  font-size: 28rpx;
+  font-weight: 600;
+  line-height: 1;
+
+  &__icon {
+    font-size: 32rpx;
+    line-height: 1;
+  }
+
+  &__label {
+    @include dd-ellipsis(1);
+  }
+
+  &__loading {
+    width: 28rpx;
+    height: 28rpx;
+    border: 3rpx solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: dd-btn-spin 0.6s linear infinite;
+  }
+
+  .dd-btn--icon-only {
+    padding: 0;
+    width: 88rpx;
+    gap: 0;
+  }
+
+  &--block {
+    display: flex;
+    width: 100%;
+  }
+
+  &--icon-right {
+    flex-direction: row-reverse;
+  }
+}
+
+@keyframes dd-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.dd-btn--sm {
+  height: 64rpx;
+  padding: 0 24rpx;
+  font-size: 24rpx;
+  &.dd-btn--icon-only {
+    width: 64rpx;
+  }
+  .dd-btn__loading {
+    width: 22rpx;
+    height: 22rpx;
+  }
+}
+
+.dd-btn--lg {
+  height: 100rpx;
+  padding: 0 48rpx;
+  font-size: 32rpx;
+  &.dd-btn--icon-only {
+    width: 100rpx;
+  }
+  .dd-btn__loading {
+    width: 34rpx;
+    height: 34rpx;
+  }
+}
+
+.dd-btn--primary {
+  background: $dd-primary-500;
+  color: $dd-neutral-50;
+}
+.dd-btn--secondary {
+  background: $dd-neutral-800;
+  color: $dd-primary-400;
+  border-color: $dd-neutral-700;
+}
+.dd-btn--ghost {
+  background: transparent;
+  color: $dd-neutral-300;
+}
+.dd-btn--text {
+  background: transparent;
+  color: $dd-primary-400;
+  border-color: transparent;
+  border-radius: 0;
+  height: auto;
+  min-height: 48rpx;
+  padding: 0 16rpx;
+  font-size: 24rpx;
+  font-weight: 500;
+  &.dd-btn--icon-only {
+    width: auto;
+    padding: 0;
+  }
+}
+.dd-btn--success {
+  background: $dd-success-500;
+  color: $dd-success-contrast;
+}
+.dd-btn--warning {
+  background: $dd-warning-500;
+  color: $dd-warning-contrast;
+}
+.dd-btn--danger {
+  background: $dd-error-500;
+  color: $dd-error-contrast;
+}
+
+.dd-btn--round {
+  border-radius: $dd-radius-full;
+}
+.dd-btn--text.dd-btn--round {
+  border-radius: $dd-radius-full;
+}
+
+.dd-btn--hover {
+  opacity: 0.85;
+}
+.dd-btn--secondary.dd-btn--hover,
+.dd-btn--ghost.dd-btn--hover {
+  opacity: 0.7;
+}
+
+.dd-btn--disabled {
+  opacity: 0.5;
+  @include dd-no-touch;
+}
+.dd-btn--loading {
+  @include dd-no-touch;
+}
+</style>

package/components/dd-capsule-button/dd-capsule-button.vue

@@ -0,0 +1,109 @@
+<template>
+  <view class="dd-capsule-button" :class="`dd-capsule-button--${variant}`">
+    <view
+      v-if="showBack && variant !== 'close-only'"
+      class="dd-capsule-button__btn dd-capsule-button__btn--back"
+      @click="onBack"
+    >
+      <view class="dd-capsule-button__arrow"></view>
+    </view>
+    <view
+      v-if="variant === 'default' && showBack && showMenu"
+      class="dd-capsule-button__divider"
+    ></view>
+    <view
+      v-if="showMenu && variant !== 'back-only'"
+      class="dd-capsule-button__btn dd-capsule-button__btn--menu"
+      @click="onMenu"
+    >
+      <dd-icon name="ellipsis" class="dd-capsule-button__dots" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  variant?: 'default' | 'back-only' | 'close-only'
+  showBack?: boolean
+  showMenu?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  showBack: true,
+  showMenu: true,
+})
+
+const emit = defineEmits<{
+  (e: 'back'): void
+  (e: 'menu'): void
+}>()
+
+function onBack() {
+  emit('back')
+}
+function onMenu() {
+  emit('menu')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+// 微信小程序标准 87×32px → 174×64rpx (ponytail: 固定尺寸，H5 降级同样尺寸)
+.dd-capsule-button {
+  width: 174rpx;
+  height: 64rpx;
+  border-radius: $dd-radius-full;
+  @include dd-glass;
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+
+  &__btn {
+    flex: 1;
+    @include dd-flex-center;
+    color: $dd-text-secondary;
+    @include dd-transition(background 0.2s ease);
+
+    &:active {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  // CSS 绘制返回箭头 "<": border-left+border-bottom + rotate(45deg) (无 SVG，MP 兼容)
+  &__arrow {
+    width: 20rpx;
+    height: 20rpx;
+    border-left: 4rpx solid $dd-text-secondary;
+    border-bottom: 4rpx solid $dd-text-secondary;
+    transform: rotate(45deg);
+    margin-left: 4rpx;
+  }
+
+  &__dots {
+    font-size: 36rpx;
+    line-height: 1;
+    color: $dd-text-secondary;
+  }
+
+  // 1px 竖向分隔线，仅 default 变体
+  &__divider {
+    width: 1px;
+    height: 32rpx;
+    align-self: center;
+    background: $dd-border-default;
+    flex-shrink: 0;
+  }
+
+  &--back-only &__btn--back {
+    flex: 1;
+  }
+  &--close-only &__btn--menu {
+    flex: 1;
+  }
+}
+</style>