@didaoktv/didaoui-uniapp 1.0.0

package/components/dd-tabbar-item/dd-tabbar-item.vue

@@ -0,0 +1,122 @@
+<template>
+  <view
+    class="dd-tabbar-item"
+    :style="{ color: isActive ? activeColor : inactiveColor }"
+    @click="onClick"
+  >
+    <view class="dd-tabbar-item__icon-wrap">
+      <slot name="icon" :active="isActive">
+        <dd-icon :name="icon" class="dd-tabbar-item__icon" />
+      </slot>
+      <view v-if="badge" class="dd-tabbar-item__badge">
+        <text class="dd-tabbar-item__badge-text">{{ badge }}</text>
+      </view>
+      <view v-else-if="dot" class="dd-tabbar-item__dot"></view>
+    </view>
+    <text class="dd-tabbar-item__label">
+      <slot>{{ label }}</slot>
+    </text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  name?: string | number
+  icon?: string
+  label?: string
+  dot?: boolean
+  badge?: string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: '',
+  icon: '',
+  label: '',
+  dot: false,
+  badge: '',
+})
+
+const ctx = inject<any>('ddTabbar', null)
+const fallbackIdx = ref(ctx ? ctx.register() : 0)
+
+const identity = computed(() =>
+  props.name !== '' && props.name !== undefined ? props.name : fallbackIdx.value
+)
+
+const isActive = computed(() =>
+  ctx ? ctx.active.value === identity.value : false
+)
+const activeColor = computed(() => (ctx ? ctx.activeColor.value : '#F5A623'))
+const inactiveColor = computed(() =>
+  ctx ? ctx.inactiveColor.value : '#9E9E9E'
+)
+
+function onClick() {
+  ctx?.onItemClick(identity.value)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-tabbar-item {
+  flex: 1;
+  height: 100%;
+  @include dd-flex-center;
+  flex-direction: column;
+  gap: 4rpx;
+  box-sizing: border-box;
+  @include dd-transition(color 0.3s);
+
+  &__icon-wrap {
+    position: relative;
+    width: 40rpx;
+    height: 40rpx;
+    @include dd-flex-center;
+  }
+
+  &__icon {
+    font-size: 40rpx;
+    line-height: 1;
+  }
+
+  &__label {
+    font-size: 20rpx;
+    line-height: 1.2;
+    @include dd-ellipsis(1);
+  }
+
+  &__badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(40%, -50%);
+    min-width: 32rpx;
+    height: 32rpx;
+    padding: 0 8rpx;
+    border-radius: $dd-radius-full;
+    background: $dd-error;
+    @include dd-flex-center;
+  }
+
+  &__badge-text {
+    color: $dd-color-white;
+    font-size: 20rpx;
+    line-height: 1;
+  }
+
+  &__dot {
+    position: absolute;
+    top: -4rpx;
+    right: -4rpx;
+    width: 16rpx;
+    height: 16rpx;
+    border-radius: 50%;
+    background: $dd-error;
+  }
+}
+</style>

package/components/dd-tag/dd-tag.vue

@@ -0,0 +1,178 @@
+<template>
+  <view
+    class="dd-tag"
+    :class="[
+      `dd-tag--${type}`,
+      `dd-tag--${variant}`,
+      `dd-tag--${size}`,
+      { 'dd-tag--round': round, 'dd-tag--closable': closable },
+    ]"
+    @click="onClick"
+  >
+    <view v-if="type === 'dot'" class="dd-tag__dot"></view>
+    <text v-if="$slots.default || text" class="dd-tag__label"><slot>{{ text }}</slot></text>
+    <view v-if="closable" class="dd-tag__close" @click.stop="onClose">
+      <dd-icon name="cross" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  type?: 'filled' | 'outlined' | 'dot'
+  variant?: 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'default'
+  size?: 'sm' | 'md'
+  round?: boolean
+  closable?: boolean
+  text?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'filled',
+  variant: 'primary',
+  size: 'md',
+  round: false,
+  closable: false,
+  text: '',
+})
+
+const emit = defineEmits<{ (e: 'click', val: Event): void; (e: 'close', val: Event): void }>()
+
+const slots = useSlots()
+void slots
+
+function onClick(e: Event) {
+  emit('click', e)
+}
+
+function onClose(e: Event) {
+  emit('close', e)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  box-sizing: border-box;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+
+  &__label {
+    line-height: 1;
+  }
+
+  &__dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28rpx;
+    height: 28rpx;
+    border-radius: 50%;
+    color: inherit;
+    font-size: $dd-font-size-caption;
+    opacity: 0.7;
+  }
+}
+
+// === 尺寸: md(48rpx) / sm(40rpx) ===
+.dd-tag--md {
+  height: 48rpx;
+  padding: 0 $dd-space-3;
+  border-radius: $dd-radius-sm;
+  font-size: $dd-font-size-body;
+  font-weight: 500;
+}
+
+.dd-tag--sm {
+  height: 40rpx;
+  padding: 0 $dd-space-2;
+  border-radius: $dd-radius-md;
+  font-size: $dd-font-size-caption;
+}
+
+.dd-tag--round {
+  border-radius: $dd-radius-full !important;
+}
+
+// === Filled: 渐变背景 + 反色文字 ===
+.dd-tag--filled {
+  &.dd-tag--primary {
+    background: $dd-gradient-primary;
+    color: $dd-color-white;
+  }
+  &.dd-tag--accent {
+    background: $dd-gradient-accent;
+    color: $dd-accent-contrast;
+  }
+  &.dd-tag--success {
+    background: $dd-success-500;
+    color: $dd-success-contrast;
+  }
+  &.dd-tag--warning {
+    background: $dd-warning-500;
+    color: $dd-warning-contrast;
+  }
+  &.dd-tag--error {
+    background: $dd-error-500;
+    color: $dd-error-contrast;
+  }
+  &.dd-tag--info {
+    background: $dd-info-500;
+    color: $dd-info-contrast;
+  }
+  &.dd-tag--default {
+    background: $dd-neutral-700;
+    color: $dd-text-secondary;
+  }
+}
+
+// === Outlined: 透明背景 + 1px 边框 + 语义色 ===
+.dd-tag--outlined {
+  background: transparent;
+  border: 1px solid $dd-border-strong;
+
+  &.dd-tag--primary { color: $dd-primary-400; border-color: $dd-primary-500; }
+  &.dd-tag--accent { color: $dd-accent-300; border-color: $dd-accent-500; }
+  &.dd-tag--success { color: $dd-success-400; border-color: $dd-success-500; }
+  &.dd-tag--warning { color: $dd-warning-400; border-color: $dd-warning-500; }
+  &.dd-tag--error { color: $dd-error-400; border-color: $dd-error-500; }
+  &.dd-tag--info { color: $dd-info-400; border-color: $dd-info-500; }
+  &.dd-tag--default { color: $dd-text-secondary; border-color: $dd-border-strong; }
+}
+
+// === Dot: elevated 背景 + 彩色点 + 次级色文字 ===
+.dd-tag--dot {
+  background: $dd-bg-elevated;
+  border: 1px solid $dd-border-default;
+  color: $dd-text-secondary;
+
+  &.dd-tag--primary .dd-tag__dot { background: $dd-primary-500; }
+  &.dd-tag--accent .dd-tag__dot { background: $dd-accent-500; }
+  &.dd-tag--success .dd-tag__dot { background: $dd-success-500; }
+  &.dd-tag--warning .dd-tag__dot { background: $dd-warning-500; }
+  &.dd-tag--error .dd-tag__dot { background: $dd-error-500; }
+  &.dd-tag--info .dd-tag__dot { background: $dd-info-500; }
+  &.dd-tag--default .dd-tag__dot { background: $dd-neutral-400; }
+}
+
+.dd-tag--closable {
+  padding-right: $dd-space-1;
+}
+</style>

package/components/dd-toast/dd-toast.vue

@@ -0,0 +1,195 @@
+<template>
+  <view class="dd-toast" :class="[`dd-toast--${toastState.position}`, { 'dd-toast--show': toastState.visible }]">
+    <view class="dd-toast__capsule">
+      <view v-if="showIcon" class="dd-toast__icon">
+        <view v-if="toastState.type === 'loading'" class="dd-toast__spinner"></view>
+        <dd-icon v-else :name="iconName" class="dd-toast__icon-text" :class="`dd-toast__icon-text--${toastState.type}`" />
+      </view>
+      <text v-if="toastState.message" class="dd-toast__msg">{{ toastState.message }}</text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import { reactive } from 'vue'
+
+export type ToastType = 'text' | 'success' | 'error' | 'warning' | 'loading'
+export type ToastPosition = 'top' | 'center' | 'bottom'
+
+export interface ToastOptions {
+  message?: string
+  type?: ToastType
+  position?: ToastPosition
+  duration?: number
+  icon?: boolean
+}
+
+// 模块级单例状态 (createApp 在 MP 不支持，用响应式 state + 组件挂载到页面)
+export const toastState = reactive({
+  visible: false,
+  message: '',
+  type: 'text' as ToastType,
+  position: 'center' as ToastPosition,
+  duration: 2000,
+  icon: true,
+})
+
+let timer: ReturnType<typeof setTimeout> | null = null
+
+export function hideToast() {
+  toastState.visible = false
+  if (timer) {
+    clearTimeout(timer)
+    timer = null
+  }
+}
+
+export function showToast(options: string | ToastOptions) {
+  const opts = typeof options === 'string' ? { message: options } : options
+  if (timer) {
+    clearTimeout(timer)
+    timer = null
+  }
+  toastState.visible = true
+  toastState.message = opts.message || ''
+  toastState.type = opts.type || 'text'
+  toastState.position = opts.position || 'center'
+  toastState.duration = opts.duration ?? 2000
+  toastState.icon = opts.icon ?? true
+  // loading 类型不自动关闭，需手动 hideToast()
+  if (toastState.type !== 'loading') {
+    timer = setTimeout(hideToast, toastState.duration)
+  }
+}
+
+export function showLoading(message = '加载中') {
+  showToast({ message, type: 'loading', position: 'center' })
+}
+
+export function showSuccess(message: string) {
+  showToast({ message, type: 'success' })
+}
+
+export function showError(message: string) {
+  showToast({ message, type: 'error' })
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+// text 类型强制隐藏图标
+const showIcon = computed(() => toastState.icon && toastState.type !== 'text')
+
+const iconName = computed(() => {
+  const map: Record<string, string> = {
+    success: 'success',
+    error: 'fail',
+    warning: 'warning',
+  }
+  return map[toastState.type] || ''
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-toast {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%) scale(0.9);
+  opacity: 0;
+  visibility: hidden;
+  z-index: $dd-z-index-toast;
+  @include dd-no-touch; // pointer-events none
+  @include dd-transition(opacity 0.25s ease, transform 0.25s ease, visibility 0.25s);
+
+  &--top {
+    top: 20%;
+  }
+
+  &--center {
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+
+  &--bottom {
+    bottom: 20%;
+  }
+
+  &--show {
+    opacity: 1;
+    visibility: visible;
+
+    &.dd-toast--top {
+      transform: translateX(-50%) scale(1);
+    }
+
+    &.dd-toast--center {
+      transform: translate(-50%, -50%) scale(1);
+    }
+
+    &.dd-toast--bottom {
+      transform: translateX(-50%) scale(1);
+    }
+  }
+
+  &__capsule {
+    max-width: 70vw;
+    min-width: 200rpx;
+    @include dd-glass;
+    border-radius: $dd-radius-full;
+    padding: $dd-space-3 $dd-space-5;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: $dd-space-2;
+  }
+
+  &__icon {
+    @include dd-flex-center;
+  }
+
+  &__icon-text {
+    font-size: 64rpx;
+    line-height: 1;
+    font-weight: 700;
+
+    &--success {
+      color: $dd-success-400;
+    }
+
+    &--error {
+      color: $dd-error-400;
+    }
+
+    &--warning {
+      color: $dd-warning-400;
+    }
+  }
+
+  &__spinner {
+    width: 64rpx;
+    height: 64rpx;
+    border: 6rpx solid $dd-border-default;
+    border-top-color: $dd-primary-400;
+    border-radius: 50%;
+    animation: dd-toast-spin 0.8s linear infinite;
+  }
+
+  &__msg {
+    color: $dd-color-white;
+    font-size: $dd-font-size-body;
+    line-height: 1.4;
+    text-align: center;
+  }
+}
+
+@keyframes dd-toast-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/components/dd-top-navbar/dd-top-navbar.vue

@@ -0,0 +1,184 @@
+<template>
+  <view
+    class="dd-topbar"
+    :class="{
+      'dd-topbar--fixed': fixed,
+      'dd-topbar--transparent': transparent,
+      'dd-topbar--border': border && !transparent,
+    }"
+  >
+    <view
+      v-if="fixed && statusBarHeight > 0"
+      class="dd-topbar__status"
+      :style="{ height: statusBarHeight + 'px' }"
+    ></view>
+    <view class="dd-topbar__content">
+      <view class="dd-topbar__left" @click="onBack">
+        <view v-if="showBack" class="dd-topbar__back-icon"><dd-icon name="arrow-left" size="18" /></view>
+        <text v-if="showBack && backText" class="dd-topbar__back-text">{{ backText }}</text>
+        <view class="dd-topbar__left-slot" @click.stop>
+          <slot name="left"></slot>
+        </view>
+      </view>
+      <text class="dd-topbar__title">
+        <slot>{{ title }}</slot>
+      </text>
+      <view class="dd-topbar__right">
+        <slot name="right"></slot>
+      </view>
+    </view>
+  </view>
+  <view
+    v-if="fixed && placeholder"
+    class="dd-topbar__placeholder"
+    :style="{ height: totalHeight + 'px' }"
+  ></view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+import { getStatusBarHeight, isH5 } from '../../libs/utils'
+
+interface Props {
+  title?: string
+  fixed?: boolean
+  transparent?: boolean
+  border?: boolean
+  showBack?: boolean
+  backText?: string
+  placeholder?: boolean
+  fallbackPath?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  fixed: true,
+  transparent: false,
+  border: true,
+  showBack: true,
+  backText: '',
+  placeholder: true,
+  fallbackPath: '',
+})
+
+const emit = defineEmits<{ (e: 'back'): void }>()
+
+// ponytail: 运行时兜底 —— 条件编译宏在 .ts 文件中可能未生效，
+// 用已导出的 isH5 常量做二次校验，确保 H5 端状态栏高度为 0
+const rawStatusBarHeight = getStatusBarHeight()
+const statusBarHeight = isH5 ? 0 : rawStatusBarHeight
+
+// uni.upx2px 与 CSS rpx 使用相同的屏幕宽度基准，结果一致
+const CONTENT_PX = uni.upx2px(88)
+const totalHeight = computed(() => statusBarHeight + CONTENT_PX)
+
+function onBack() {
+  if (!props.showBack) return
+  emit('back')
+  const pages = getCurrentPages()
+  const goFallback = () => {
+    if (props.fallbackPath) uni.reLaunch({ url: props.fallbackPath, fail: () => {} })
+  }
+  if (pages.length > 1) {
+    // navigateBack 可能因历史栈为空而静默失败（H5 新标签页打开等），失败时走 fallbackPath
+    uni.navigateBack({ delta: 1, fail: goFallback })
+  } else {
+    goFallback()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-topbar {
+  width: 100%;
+  box-sizing: border-box;
+
+  &--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: $dd-z-index-sticky;
+  }
+
+  &--transparent {
+    background: transparent;
+    .dd-topbar__content {
+      border-bottom: none;
+    }
+  }
+
+  &:not(.dd-topbar--transparent) {
+    @include dd-glass;
+    border: none;
+  }
+
+  &__status {
+    width: 100%;
+  }
+
+  &__content {
+    position: relative;
+    height: 88rpx;
+    @include dd-flex-between;
+    padding: 0 $dd-space-4;
+    box-sizing: border-box;
+  }
+
+  &--border &__content {
+    @include dd-hairline-bottom($dd-border-subtle);
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: $dd-space-2;
+    min-width: 120rpx;
+  }
+
+  &__left-slot {
+    flex: none;
+  }
+
+  &__back-icon {
+    display: flex;
+    align-items: center;
+    font-size: 56rpx;
+    color: $dd-primary-400;
+    text-shadow: 0 0 8px rgba(245, 166, 35, 0.4);
+  }
+
+  &__back-text {
+    font-size: $dd-font-size-body;
+    color: $dd-primary-400;
+  }
+
+  &__title {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 50%;
+    font-size: $dd-font-size-lead;
+    font-weight: 700;
+    color: $dd-text-primary;
+    @include dd-ellipsis(1);
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: $dd-space-3;
+    min-width: 120rpx;
+    justify-content: flex-end;
+  }
+
+  &__placeholder {
+    width: 100%;
+  }
+}
+</style>