@didaoktv/didaoui-uniapp 1.0.0

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

@@ -0,0 +1,155 @@
+<template>
+  <view
+    class="dd-card"
+    :class="[
+      `dd-card--${variant}`,
+      {
+        'dd-card--border': border,
+        'dd-card--active': active,
+        'dd-card--hover': hover,
+      },
+    ]"
+    :hover-class="hoverable ? 'dd-card--hover-state' : ''"
+    :hover-stay-time="120"
+    @click="onClick"
+  >
+    <view v-if="$slots.header || $slots.extra" class="dd-card__header">
+      <view class="dd-card__header-inner"><slot name="header"></slot></view>
+      <view v-if="$slots.extra" class="dd-card__extra"><slot name="extra"></slot></view>
+    </view>
+    <view class="dd-card__body"><slot></slot></view>
+    <view v-if="$slots.footer" class="dd-card__footer"><slot name="footer"></slot></view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from 'vue'
+
+interface Props {
+  variant?: 'vertical' | 'horizontal' | 'compact'
+  border?: boolean
+  active?: boolean
+  hover?: boolean
+  hoverable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'vertical',
+  border: true,
+  active: false,
+  hover: false,
+  hoverable: 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-card {
+  box-sizing: border-box;
+  background: $dd-bg-elevated;
+  border-radius: $dd-radius-lg;
+  box-shadow: $dd-shadow-1;
+  overflow: hidden;
+  @include dd-transition(all 0.3s ease);
+
+  &__header {
+    @include dd-flex-between;
+    padding: $dd-space-4 $dd-space-5;
+    box-sizing: border-box;
+    @include dd-hairline-bottom($dd-border-default);
+
+    &-inner {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  &__extra {
+    flex-shrink: 0;
+    margin-left: $dd-space-3;
+  }
+
+  &__body {
+    padding: $dd-space-5;
+    box-sizing: border-box;
+  }
+
+  &__footer {
+    padding: $dd-space-4 $dd-space-5;
+    box-sizing: border-box;
+    @include dd-hairline-top($dd-border-default);
+  }
+
+  &--border {
+    border: 1px solid $dd-border-default;
+  }
+
+  &--hover,
+  &--hover-state {
+    transform: translateY(-4rpx);
+    box-shadow: $dd-shadow-2;
+  }
+
+  &--active {
+    border: 2px solid $dd-primary-500;
+    box-shadow: $dd-shadow-glow-gold-lg;
+  }
+}
+
+// horizontal: 去除 header/footer 分隔线, body flex
+.dd-card--horizontal {
+  display: flex;
+  flex-direction: row;
+
+  .dd-card__header,
+  .dd-card__footer {
+    &::after,
+    &::before {
+      display: none;
+    }
+  }
+
+  .dd-card__body {
+    flex: 1;
+    padding: $dd-space-4;
+  }
+
+  // horizontal 不堆叠 header/footer, 整体作为 row
+  .dd-card__header,
+  .dd-card__footer {
+    padding: $dd-space-4;
+  }
+}
+
+// compact: 更小圆角 + 更紧凑 padding
+.dd-card--compact {
+  border-radius: $dd-radius-md;
+
+  .dd-card__body {
+    padding: $dd-space-3 $dd-space-4;
+  }
+
+  .dd-card__header {
+    padding: $dd-space-3 $dd-space-4;
+  }
+
+  .dd-card__footer {
+    padding: $dd-space-3 $dd-space-4;
+  }
+}
+
+.dd-card--horizontal.dd-card--active {
+  border: 2px solid $dd-primary-500;
+}
+</style>

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

@@ -0,0 +1,201 @@
+<template>
+  <view
+    class="dd-cell"
+    :class="[
+      `dd-cell--${size}`,
+      {
+        'dd-cell--center': center,
+        'dd-cell--required': required,
+        'dd-cell--borderless': borderless,
+        'dd-cell--link': isLink,
+      },
+    ]"
+    :hover-class="isLink ? 'dd-cell--active' : ''"
+    :hover-stay-time="100"
+    @click="handleClick"
+  >
+    <view v-if="$slots.icon || icon" class="dd-cell__icon">
+      <slot name="icon">
+        <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 class="dd-cell__content">
+      <text v-if="title" class="dd-cell__title">{{ title }}</text>
+      <text v-if="label || $slots.label" class="dd-cell__label">
+        <slot name="label">{{ label }}</slot>
+      </text>
+    </view>
+    <view class="dd-cell__right">
+      <slot name="value">
+        <text v-if="value" class="dd-cell__value">{{ value }}</text>
+      </slot>
+      <slot name="right-icon"></slot>
+      <view
+        v-if="isLink"
+        class="dd-cell__arrow"
+        :class="`dd-cell__arrow--${arrowDirection}`"
+      ><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
+  label?: string
+  value?: string
+  icon?: string
+  size?: 'sm' | 'md'
+  isLink?: boolean
+  arrowDirection?: 'left' | 'right' | 'up' | 'down'
+  required?: boolean
+  center?: boolean
+  borderless?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  label: '',
+  value: '',
+  icon: '',
+  size: 'md',
+  isLink: false,
+  arrowDirection: 'right',
+  required: false,
+  center: false,
+  borderless: false,
+})
+
+const emit = defineEmits<{ (e: 'click', val: Event): void }>()
+
+const slots = useSlots()
+void slots
+
+// 仅当 isLink 时才向外抛 click
+function handleClick(e: Event) {
+  if (!props.isLink) return
+  emit('click', e)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-cell {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 24rpx 0 32rpx;
+  background: $dd-bg-elevated;
+  font-size: $dd-font-size-body;
+  color: $dd-text-primary;
+  @include dd-hairline-bottom($dd-border-subtle);
+
+  &--sm {
+    min-height: 96rpx;
+  }
+
+  &--md {
+    min-height: 112rpx;
+  }
+
+  &--center {
+    align-items: center;
+  }
+
+  &--borderless {
+    &::after {
+      display: none;
+    }
+  }
+
+  &--active {
+    background: $dd-surface-container-high;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    margin-right: $dd-space-2;
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  &__icon-text {
+    font-size: 36rpx;
+    line-height: 1;
+    color: $dd-primary-400;
+  }
+
+  &__required {
+    color: $dd-error-500;
+    font-size: $dd-font-size-body;
+    margin-right: 4rpx;
+    line-height: 1.5;
+    text {
+      line-height: 1;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: $dd-space-2 0;
+  }
+
+  &__title {
+    font-size: $dd-font-size-body;
+    color: $dd-text-primary;
+    @include dd-ellipsis(1);
+  }
+
+  &__label {
+    margin-top: 4rpx;
+    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;
+    color: $dd-text-tertiary;
+  }
+
+  &__arrow {
+    font-size: 32rpx;
+    color: $dd-text-tertiary;
+    line-height: 1;
+
+    &--right {
+      transform: rotate(0deg);
+    }
+    &--left {
+      transform: rotate(180deg);
+    }
+    &--up {
+      transform: rotate(-90deg);
+    }
+    &--down {
+      transform: rotate(90deg);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+  <view class="dd-cell-group">
+    <view v-if="title || $slots.title" class="dd-cell-group__title">
+      <slot name="title">{{ title }}</slot>
+    </view>
+    <view class="dd-cell-group__body">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from 'vue'
+
+interface Props {
+  title?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  title: '',
+})
+
+const slots = useSlots()
+void slots
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@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;
+  }
+
+  &__body {
+    background: $dd-bg-elevated;
+    border-radius: $dd-radius-lg;
+    overflow: hidden;
+
+    // 去除最后一个子元素的底边框, 避免溢出到圆角外
+    :deep(.dd-cell:last-child),
+    :deep(.dd-list-cell:last-child) {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,258 @@
+<template>
+  <view
+    class="dd-champ"
+    :class="[`dd-champ--${variant}`, `dd-champ--rank${rank}`]"
+    @click="onClick"
+  >
+    <!-- PODIUM: 居中列, 头像按 rank 缩放, rank1 带弹跳皇冠 -->
+    <template v-if="variant === 'podium'">
+      <view v-if="rank === 1" class="dd-champ__crown">👑</view>
+      <view class="dd-champ__avatar" :style="avatarStyle">
+        <image v-if="avatar" class="dd-champ__avatar-img" :src="avatar" mode="aspectFill" />
+        <text v-else class="dd-champ__avatar-text">{{ initial }}</text>
+      </view>
+      <text class="dd-champ__name">{{ name }}</text>
+      <text class="dd-champ__score">{{ score }}</text>
+      <view class="dd-champ__rank-badge" :style="rankBadgeStyle">
+        <text class="dd-champ__rank-num">{{ rank }}</text>
+      </view>
+    </template>
+
+    <!-- HORIZONTAL: 行式, 排名号+头像+名字+分数 -->
+    <template v-else-if="variant === 'horizontal'">
+      <text class="dd-champ__rank-inline">{{ rank }}</text>
+      <view class="dd-champ__avatar dd-champ__avatar--sm" :style="avatarStyle">
+        <image v-if="avatar" class="dd-champ__avatar-img" :src="avatar" mode="aspectFill" />
+        <text v-else class="dd-champ__avatar-text">{{ initial }}</text>
+      </view>
+      <text class="dd-champ__name dd-champ__name--inline">{{ name }}</text>
+      <text class="dd-champ__score dd-champ__score--inline">{{ score }}</text>
+    </template>
+
+    <!-- LIST: 无边框行, 小排名徽标+头像+名字+右对齐分数 -->
+    <template v-else>
+      <view class="dd-champ__rank-badge dd-champ__rank-badge--sm" :style="rankBadgeStyle">
+        <text class="dd-champ__rank-num">{{ rank }}</text>
+      </view>
+      <view class="dd-champ__avatar dd-champ__avatar--sm" :style="avatarStyle">
+        <image v-if="avatar" class="dd-champ__avatar-img" :src="avatar" mode="aspectFill" />
+        <text v-else class="dd-champ__avatar-text">{{ initial }}</text>
+      </view>
+      <text class="dd-champ__name dd-champ__name--inline">{{ name }}</text>
+      <text class="dd-champ__score dd-champ__score--inline dd-champ__score--right">{{ score }}</text>
+    </template>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'podium' | 'horizontal' | 'list'
+  rank?: number
+  name?: string
+  score?: string | number
+  avatar?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'podium',
+  rank: 1,
+  name: '',
+  score: '',
+  avatar: '',
+})
+
+const emit = defineEmits<{ (e: 'click', val: { rank: number }): void }>()
+
+// 金/银/铜 字面量色
+const tierColors: Record<number, { border: string; glow: string; score: string; badgeStart: string; badgeEnd: string }> = {
+  1: { border: '#FFD700', glow: '0 0 40rpx rgba(255,215,0,0.4)', score: '#FFD700', badgeStart: '#FFD700', badgeEnd: '#B8860B' },
+  2: { border: '#C0C0C0', glow: '0 0 32rpx rgba(192,192,192,0.4)', score: '#C0C0C0', badgeStart: '#C0C0C0', badgeEnd: '#808080' },
+  3: { border: '#CD7F32', glow: '0 0 24rpx rgba(205,127,50,0.4)', score: '#CD7F32', badgeStart: '#CD7F32', badgeEnd: '#8B4513' },
+}
+
+// podium 头像尺寸: rank1=72, rank2=60, rank3=52
+const podiumSizeMap: Record<number, number> = { 1: 144, 2: 120, 3: 104 }
+
+const tier = computed(() => tierColors[props.rank] || tierColors[1])
+
+const avatarStyle = computed(() => {
+  const size = props.variant === 'podium' ? (podiumSizeMap[props.rank] || 144) : 80
+  return {
+    width: `${size}rpx`,
+    height: `${size}rpx`,
+    borderColor: tier.value.border,
+    boxShadow: tier.value.glow,
+  }
+})
+
+const rankBadgeStyle = computed(() => ({
+  background: `linear-gradient(135deg, ${tier.value.badgeStart} 0%, ${tier.value.badgeEnd} 100%)`,
+}))
+
+const initial = computed(() => {
+  if (!props.name) return ''
+  return props.name.charAt(0).toUpperCase()
+})
+
+function onClick() {
+  emit('click', { rank: props.rank })
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-champ {
+  box-sizing: border-box;
+}
+
+// === PODIUM ===
+.dd-champ--podium {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: $dd-space-2;
+  position: relative;
+  padding: $dd-space-4 $dd-space-2;
+}
+
+.dd-champ__crown {
+  font-size: 56rpx;
+  line-height: 1;
+  animation: dd-champ-bounce 1.6s ease-in-out infinite;
+}
+
+@keyframes dd-champ-bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-12rpx); }
+}
+
+.dd-champ__avatar {
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-width: 6rpx;
+  border-style: solid;
+  background: $dd-surface-container-high;
+  box-sizing: border-box;
+
+  &--sm {
+    border-width: 4rpx;
+  }
+}
+
+.dd-champ__avatar-img {
+  width: 100%;
+  height: 100%;
+}
+
+.dd-champ__avatar-text {
+  font-size: $dd-font-size-h3;
+  font-weight: 700;
+  color: $dd-color-white;
+}
+
+.dd-champ__name {
+  font-size: $dd-font-size-body;
+  font-weight: 600;
+  color: $dd-text-primary;
+  @include dd-ellipsis(1);
+
+  &--inline {
+    flex: 1;
+    min-width: 0;
+    margin-left: $dd-space-2;
+  }
+}
+
+.dd-champ__score {
+  font-size: $dd-font-size-caption;
+  color: $dd-primary-400;
+
+  &--inline {
+    flex-shrink: 0;
+    margin-left: $dd-space-2;
+  }
+
+  &--right {
+    margin-left: auto;
+    text-align: right;
+  }
+}
+
+.dd-champ--rank1 .dd-champ__score {
+  color: #FFD700;
+}
+.dd-champ--rank2 .dd-champ__score {
+  color: #C0C0C0;
+}
+.dd-champ--rank3 .dd-champ__score {
+  color: #CD7F32;
+}
+
+.dd-champ__rank-badge {
+  position: absolute;
+  bottom: -$dd-space-1;
+  right: 50%;
+  transform: translateX(50%);
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &--sm {
+    position: static;
+    transform: none;
+    width: 48rpx;
+    height: 48rpx;
+    flex-shrink: 0;
+  }
+}
+
+.dd-champ__rank-num {
+  font-size: $dd-font-size-caption;
+  font-weight: 800;
+  color: $dd-neutral-900;
+  line-height: 1;
+}
+
+.dd-champ__rank-inline {
+  font-size: $dd-font-size-h3;
+  font-weight: 800;
+  color: #FFD700;
+  flex-shrink: 0;
+  width: 48rpx;
+  text-align: center;
+}
+
+// === HORIZONTAL ===
+.dd-champ--horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: $dd-space-2;
+  background: $dd-bg-elevated;
+  border: 1px solid $dd-border-default;
+  border-radius: $dd-radius-lg;
+  padding: $dd-space-3 $dd-space-4;
+}
+
+// === LIST ===
+.dd-champ--list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: $dd-space-2;
+  background: $dd-bg-elevated;
+  border-bottom: 1px solid $dd-border-default;
+  padding: $dd-space-3 $dd-space-4;
+}
+</style>