@didaoktv/didaoui-uniapp 1.0.0

package/components/dd-loadmore/dd-loadmore.vue

@@ -0,0 +1,152 @@
+<template>
+  <view
+    class="dd-loadmore"
+    :class="{ 'dd-loadmore--clickable': status === 'loadmore' }"
+    :style="containerStyle"
+    @click="onClick"
+  >
+    <slot>
+      <!-- loading 态 -->
+      <template v-if="status === 'loading'">
+        <slot name="loading">
+          <view
+            v-if="icon"
+            class="dd-loadmore__spinner"
+            :style="spinnerStyle"
+          ></view>
+          <text class="dd-loadmore__text" :style="textStyle">{{ loadingText }}</text>
+        </slot>
+      </template>
+
+      <!-- nomore 态 -->
+      <template v-else-if="status === 'nomore'">
+        <slot name="nomore">
+          <view v-if="isDot" class="dd-loadmore__dot" :style="dotStyle"></view>
+          <text v-else class="dd-loadmore__text" :style="textStyle">{{ nomoreText }}</text>
+        </slot>
+      </template>
+
+      <!-- loadmore 态 -->
+      <template v-else>
+        <text class="dd-loadmore__text" :style="textStyle">{{ loadmoreText }}</text>
+      </template>
+    </slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type Status = 'loadmore' | 'loading' | 'nomore'
+
+interface Props {
+  status?: Status
+  loadmoreText?: string
+  loadingText?: string
+  nomoreText?: string
+  icon?: boolean
+  iconSize?: number // rpx
+  fontSize?: number // rpx
+  color?: string
+  iconColor?: string
+  bgColor?: string
+  isDot?: boolean
+  marginTop?: number // rpx
+  marginBottom?: number // rpx
+  height?: number | string // rpx
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: 'loadmore',
+  loadmoreText: '加载更多',
+  loadingText: '正在加载...',
+  nomoreText: '没有更多了',
+  icon: true,
+  iconSize: 32,
+  fontSize: 24,
+  color: '#9E9E9E', // $dd-text-tertiary
+  iconColor: '#F5A623',
+  bgColor: 'transparent',
+  isDot: false,
+  marginTop: 16,
+  marginBottom: 16,
+  height: 'auto',
+})
+
+const emit = defineEmits<{
+  (e: 'loadmore'): void
+}>()
+
+const containerStyle = computed(() => {
+  const h = typeof props.height === 'number' ? `${props.height}rpx` : props.height
+  return {
+    height: h,
+    marginTop: `${props.marginTop}rpx`,
+    marginBottom: `${props.marginBottom}rpx`,
+    backgroundColor: props.bgColor,
+  }
+})
+
+const textStyle = computed(() => ({
+  fontSize: `${props.fontSize}rpx`,
+  color: props.color,
+}))
+
+const spinnerStyle = computed(() => ({
+  width: `${props.iconSize}rpx`,
+  height: `${props.iconSize}rpx`,
+  borderColor: props.color,
+  borderTopColor: props.iconColor,
+}))
+
+const dotStyle = computed(() => ({
+  width: '8rpx',
+  height: '8rpx',
+  backgroundColor: props.color,
+}))
+
+function onClick() {
+  if (props.status === 'loadmore') emit('loadmore')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-loadmore {
+  @include dd-flex-center;
+  width: 100%;
+  min-height: 80rpx;
+  gap: 12rpx;
+  box-sizing: border-box;
+
+  &--clickable {
+    cursor: pointer;
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
+  &__spinner {
+    border: 4rpx solid $dd-border-default;
+    border-radius: 50%;
+    box-sizing: border-box;
+    animation: dd-lm-spin 0.8s linear infinite;
+  }
+
+  &__text {
+    line-height: 1.5;
+  }
+
+  &__dot {
+    border-radius: 50%;
+    opacity: 0.6;
+  }
+}
+
+@keyframes dd-lm-spin {
+  to { transform: rotate(360deg); }
+}
+</style>

package/components/dd-mini-program-navbar/dd-mini-program-navbar.vue

@@ -0,0 +1,245 @@
+<template>
+  <view
+    class="dd-mp-navbar"
+    :class="[`dd-mp-navbar--${variant}`, { 'dd-mp-navbar--transparent': transparent }]"
+    :style="navStyle"
+  >
+    <!-- 状态栏占位 -->
+    <view class="dd-mp-navbar__status" :style="{ height: statusBarPx + 'px' }"></view>
+    <!-- 内容行 -->
+    <view class="dd-mp-navbar__content" :style="{ height: contentHeightPx + 'px' }">
+      <!-- 左侧：返回 -->
+      <view class="dd-mp-navbar__left">
+        <view v-if="showBack && variant !== 'search'" class="dd-mp-navbar__back" @click="onBack">
+          <view class="dd-mp-navbar__arrow"></view>
+          <text v-if="backText" class="dd-mp-navbar__back-text">{{ backText }}</text>
+        </view>
+      </view>
+      <!-- 中间：标题 / 搜索 / 自定义 -->
+      <view class="dd-mp-navbar__center">
+        <template v-if="variant === 'search'">
+          <view class="dd-mp-navbar__search">
+            <dd-icon name="search" class="dd-mp-navbar__search-icon" />
+            <input
+              class="dd-mp-navbar__search-input"
+              :value="searchValue"
+              :placeholder="searchPlaceholder"
+              :placeholder-style="placeholderStyle"
+              confirm-type="search"
+              @input="onSearchInput"
+              @confirm="onSearchConfirm"
+            />
+          </view>
+        </template>
+        <template v-else-if="variant === 'custom'">
+          <slot></slot>
+        </template>
+        <template v-else>
+          <text v-if="title" class="dd-mp-navbar__title">{{ title }}</text>
+        </template>
+      </view>
+      <!-- 右侧：87px 胶囊占位 -->
+      <view class="dd-mp-navbar__right" :style="{ width: capsuleWidthPx + 'px' }"></view>
+    </view>
+    <!-- custom 变体：内容行下方扩展槽 -->
+    <view v-if="variant === 'custom' && $slots.below" class="dd-mp-navbar__below">
+      <slot name="below"></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  variant?: 'default' | 'search' | 'custom'
+  transparent?: boolean
+  showBack?: boolean
+  title?: string
+  backText?: string
+  searchValue?: string
+  searchPlaceholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  transparent: false,
+  showBack: true,
+  title: '',
+  backText: '',
+  searchValue: '',
+  searchPlaceholder: '搜索',
+})
+
+const emit = defineEmits<{
+  (e: 'back'): void
+  (e: 'update:searchValue', val: string): void
+  (e: 'search', val: string): void
+}>()
+
+const statusBarPx = ref(20)
+const contentHeightPx = ref(44)
+const capsuleWidthPx = ref(87)
+
+onMounted(() => {
+  // 状态栏高度 (跨端)
+  try {
+    // #ifdef MP-WEIXIN || APP-PLUS
+    const info = uni.getWindowInfo()
+    statusBarPx.value = info.statusBarHeight || 20
+    // #endif
+    // #ifdef H5
+    statusBarPx.value = 20
+    // #endif
+  } catch {
+    statusBarPx.value = 20
+  }
+
+  // 微信小程序：用胶囊按钮真实 rect 对齐导航栏内容高度与右侧占位
+  // #ifdef MP-WEIXIN
+  try {
+    const rect = uni.getMenuButtonBoundingClientRect()
+    if (rect && rect.height) {
+      // 内容行高度 = (胶囊 top - 状态栏) * 2 + 胶囊高度，使胶囊垂直居中
+      contentHeightPx.value = (rect.top - statusBarPx.value) * 2 + rect.height
+      capsuleWidthPx.value = rect.width + (rect.right ? (info_windowWidth() - rect.right) : 10) // 右侧留白
+    }
+  } catch {
+    contentHeightPx.value = 44
+    capsuleWidthPx.value = 87
+  }
+  // #endif
+})
+
+// 仅 MP-WEIXIN 需要：取屏宽算右侧留白
+function info_windowWidth(): number {
+  try {
+    return uni.getWindowInfo().windowWidth
+  } catch {
+    return 375
+  }
+}
+
+const navStyle = computed(() => ({}))
+
+const placeholderStyle = 'color: #9E9E9E; font-size: 14px;'
+
+function onBack() {
+  emit('back')
+}
+function onSearchInput(e: any) {
+  const val = e?.detail?.value ?? ''
+  emit('update:searchValue', val)
+}
+function onSearchConfirm(e: any) {
+  emit('search', e?.detail?.value ?? '')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-mp-navbar {
+  width: 100%;
+  @include dd-glass;
+  border-bottom: 1px solid $dd-glass-border;
+  position: relative;
+  z-index: $dd-z-index-fixed;
+
+  &--transparent {
+    background: transparent !important;
+    border-bottom: 0;
+    /* #ifdef H5 */
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    /* #endif */
+  }
+
+  &__status {
+    width: 100%;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    padding: 0 12rpx;
+    width: 100%;
+  }
+
+  &__left {
+    flex-shrink: 0;
+    min-width: 64rpx;
+  }
+
+  &__back {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 8rpx 12rpx;
+    border-radius: $dd-radius-md;
+  }
+
+  // CSS 返回箭头 "<" (无 SVG，MP 兼容)
+  &__arrow {
+    width: 24rpx;
+    height: 24rpx;
+    border-left: 4rpx solid $dd-primary-400;
+    border-bottom: 4rpx solid $dd-primary-400;
+    transform: rotate(45deg);
+  }
+
+  &__back-text {
+    font-size: $dd-font-size-body;
+    font-weight: 500;
+    color: $dd-primary-400;
+  }
+
+  &__center {
+    flex: 1;
+    @include dd-flex-center;
+    overflow: hidden;
+  }
+
+  &__title {
+    font-size: $dd-font-size-h4;
+    font-weight: 600;
+    color: $dd-text-primary;
+    max-width: 60vw;
+    @include dd-ellipsis(1);
+    text-align: center;
+  }
+
+  &__search {
+    width: 100%;
+    height: 64rpx;
+    background: $dd-surface-container;
+    border-radius: $dd-radius-full;
+    display: flex;
+    align-items: center;
+    padding: 0 24rpx;
+    gap: 12rpx;
+  }
+
+  &__search-icon {
+    font-size: 28rpx;
+    line-height: 1;
+  }
+
+  &__search-input {
+    flex: 1;
+    font-size: $dd-font-size-body;
+    color: $dd-text-primary;
+  }
+
+  &__right {
+    flex-shrink: 0;
+    // 87px 胶囊占位，实际宽度由 MP-WEIXIN rect 覆盖
+  }
+
+  &__below {
+    width: 100%;
+  }
+}
+</style>

package/components/dd-modal/dd-modal.vue

@@ -0,0 +1,286 @@
+<script lang="ts">
+// 模块级单例：同时只允许一个 modal 打开
+let activeModalClose: (() => void) | null = null
+</script>
+
+<template>
+  <view class="dd-modal">
+    <view
+      v-if="visible"
+      class="dd-modal__mask"
+      :class="{ 'dd-modal__mask--show': showClass }"
+      @click="onMaskClick"
+    ></view>
+
+    <!-- dialog -->
+    <view
+      v-if="visible && type === 'dialog'"
+      class="dd-modal__dialog"
+      :class="{ 'dd-modal__dialog--show': showClass }"
+      :style="{ width: widthValue }"
+    >
+      <view v-if="$slots.header || title" class="dd-modal__header">
+        <slot name="header">
+          <text class="dd-modal__title">{{ title }}</text>
+        </slot>
+        <view v-if="showClose" class="dd-modal__close" @click="onClose">
+          <dd-icon name="cross" />
+        </view>
+      </view>
+      <view class="dd-modal__body">
+        <slot></slot>
+      </view>
+      <view v-if="$slots.footer" class="dd-modal__footer">
+        <slot name="footer"></slot>
+      </view>
+    </view>
+
+    <!-- bottom-sheet -->
+    <view
+      v-else-if="visible"
+      class="dd-modal__sheet"
+      :class="{ 'dd-modal__sheet--show': showClass }"
+    >
+      <view class="dd-modal__handle"></view>
+      <view v-if="$slots.header || title" class="dd-modal__header">
+        <slot name="header">
+          <text class="dd-modal__title">{{ title }}</text>
+        </slot>
+      </view>
+      <view class="dd-modal__body">
+        <slot></slot>
+      </view>
+      <view v-if="$slots.footer" class="dd-modal__footer">
+        <slot name="footer"></slot>
+      </view>
+      <view class="dd-modal__safe-bottom"></view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, onUnmounted, nextTick } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  modelValue?: boolean
+  type?: 'dialog' | 'bottom-sheet'
+  title?: string
+  width?: string | number
+  showClose?: boolean
+  closeOnClickModal?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  type: 'dialog',
+  title: '',
+  width: '600rpx',
+  showClose: true,
+  closeOnClickModal: true,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'close'): void
+  (e: 'open'): void
+  (e: 'opened'): void
+  (e: 'closed'): void
+}>()
+
+const widthValue = computed(() =>
+  typeof props.width === 'number' ? `${props.width}rpx` : props.width
+)
+
+const animDuration = computed(() =>
+  props.type === 'bottom-sheet' ? 300 : 250
+)
+
+// 两阶段控制：visible 控制挂载，showClass 控制动画
+const visible = ref(false)
+const showClass = ref(false)
+let myClose: (() => void) | null = null
+let timer: ReturnType<typeof setTimeout> | null = null
+
+watch(
+  () => props.modelValue,
+  async (val) => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+
+    if (val) {
+      // 互斥：关闭其他打开的 modal
+      if (activeModalClose) activeModalClose()
+      myClose = () => emit('update:modelValue', false)
+      activeModalClose = myClose
+
+      // Phase 1: 挂载元素到 DOM（初始态：opacity:0 / scale(0.9)）
+      visible.value = true
+      emit('open')
+
+      // Phase 2: 双 RAF 确保浏览器已 paint 初始帧，再加 show class
+      await nextTick()
+      await new Promise<void>(r => requestAnimationFrame(() => r()))
+      await new Promise<void>(r => requestAnimationFrame(() => r()))
+      showClass.value = true
+      timer = setTimeout(() => emit('opened'), animDuration.value)
+    } else {
+      if (!visible.value) return
+
+      // 关闭：先移除 show class 触发退出过渡，等动画结束再卸载
+      showClass.value = false
+      if (activeModalClose === myClose) {
+        activeModalClose = null
+      }
+      myClose = null
+      emit('close')
+      timer = setTimeout(() => {
+        visible.value = false
+        emit('closed')
+      }, animDuration.value)
+    }
+  },
+  { immediate: true }
+)
+
+function onMaskClick() {
+  if (!props.closeOnClickModal) return
+  onClose()
+}
+
+function onClose() {
+  emit('update:modelValue', false)
+}
+
+onUnmounted(() => {
+  if (timer) clearTimeout(timer)
+  if (activeModalClose === myClose) {
+    activeModalClose = null
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-modal {
+  &__mask {
+    position: fixed;
+    inset: 0;
+    background: $dd-glass-bg;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    opacity: 0;
+    z-index: 1000;
+    transition: opacity 0.25s ease;
+
+    &--show {
+      opacity: 1;
+    }
+  }
+
+  // dialog: 实心 elevated 背景 (非 glass)
+  &__dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 0;
+    z-index: 1001;
+    max-width: 720rpx; // 360px 上限
+    max-height: 80vh;
+    background: $dd-bg-elevated;
+    border: 1px solid $dd-border-default;
+    border-radius: $dd-radius-xl;
+    box-shadow: $dd-shadow-4;
+    padding: $dd-space-4 $dd-space-5;
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.25s ease, opacity 0.25s ease;
+
+    &--show {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+    }
+  }
+
+  // bottom-sheet
+  &__sheet {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transform: translateY(100%);
+    z-index: 1001;
+    max-height: 85vh;
+    background: $dd-bg-elevated;
+    border: 1px solid $dd-border-default;
+    border-radius: $dd-radius-xl $dd-radius-xl 0 0;
+    box-shadow: $dd-shadow-4;
+    display: flex;
+    flex-direction: column;
+    transition: transform 0.3s ease-out;
+
+    &--show {
+      transform: translateY(0);
+    }
+  }
+
+  &__handle {
+    width: 72rpx;
+    height: 8rpx;
+    border-radius: $dd-radius-full;
+    background: $dd-neutral-700;
+    margin: 16rpx auto 8rpx;
+    flex-shrink: 0;
+  }
+
+  &__header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: $dd-space-3 0;
+    flex-shrink: 0;
+  }
+
+  &__title {
+    font-size: $dd-font-size-h4;
+    font-weight: $dd-font-weight-h4;
+    color: $dd-text-primary;
+  }
+
+  &__close {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 64rpx;
+    height: 64rpx;
+    border-radius: $dd-radius-full;
+    background: $dd-gradient-primary;
+    color: $dd-neutral-900;
+    font-size: 36rpx;
+    @include dd-flex-center;
+  }
+
+  &__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: $dd-space-2 0;
+  }
+
+  &__footer {
+    flex-shrink: 0;
+    padding-top: $dd-space-3;
+  }
+
+  &__safe-bottom {
+    @include dd-safe-area-bottom;
+    flex-shrink: 0;
+  }
+}
+</style>