@didaoktv/didaoui-uniapp 1.0.0

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

@@ -0,0 +1,309 @@
+<template>
+  <view
+    class="dd-room-card"
+    :class="[`dd-room-card--${view}`, `dd-room-card--${status}`, `dd-room-card--${type}`]"
+    :hover-class="hoverable ? 'dd-room-card--press' : ''"
+    :hover-stay-time="100"
+    @click="onClick"
+  >
+    <!-- grid 模式: 方形卡 + 顶部状态栏 -->
+    <template v-if="view === 'grid'">
+      <view class="dd-room-card__topbar"></view>
+      <view v-if="type === 'vip'" class="dd-room-card__vip-tag"><text>VIP</text></view>
+      <view class="dd-room-card__grid-inner">
+        <text class="dd-room-card__no">{{ roomNo }}</text>
+        <view class="dd-room-card__status">
+          <view class="dd-room-card__dot"></view>
+          <text class="dd-room-card__status-text">{{ statusText }}</text>
+        </view>
+        <text v-if="capacity" class="dd-room-card__capacity">容纳{{ capacity }}人</text>
+      </view>
+    </template>
+
+    <!-- list 模式: 头像 + 信息 + 右侧 -->
+    <template v-else>
+      <view class="dd-room-card__avatar">
+        <text class="dd-room-card__avatar-text">{{ avatarText }}</text>
+      </view>
+      <view class="dd-room-card__list-info">
+        <view class="dd-room-card__list-head">
+          <text class="dd-room-card__name">{{ roomName || roomNo }}</text>
+          <view class="dd-room-card__status dd-room-card__status--inline">
+            <view class="dd-room-card__dot"></view>
+            <text class="dd-room-card__status-text">{{ statusText }}</text>
+          </view>
+        </view>
+        <text v-if="capacity" class="dd-room-card__capacity dd-room-card__capacity--inline">容纳{{ capacity }}人</text>
+      </view>
+      <view class="dd-room-card__list-right">
+        <text v-if="time" class="dd-room-card__time">{{ time }}</text>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  view?: 'grid' | 'list'
+  status?: 'occupied' | 'idle' | 'reserved'
+  type?: 'vip' | 'standard' | 'theme'
+  roomNo?: string
+  roomName?: string
+  capacity?: number | string
+  time?: string
+  hoverable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  view: 'grid',
+  status: 'idle',
+  type: 'standard',
+  roomNo: '',
+  roomName: '',
+  capacity: '',
+  time: '',
+  hoverable: true,
+})
+
+const emit = defineEmits<{ (e: 'click', val: { roomNo: string; status: string }): void }>()
+
+const statusMap: Record<string, string> = {
+  occupied: '使用中',
+  idle: '空闲',
+  reserved: '已预订',
+}
+
+const statusText = computed(() => statusMap[props.status] || '空闲')
+
+// 头像文字: 房间号末尾数字或首字
+const avatarText = computed(() => {
+  const no = props.roomNo || props.roomName || ''
+  const m = no.match(/\d+$/)
+  return m ? m[0].slice(-2) : no.slice(0, 2)
+})
+
+function onClick() {
+  emit('click', { roomNo: props.roomNo, status: props.status })
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-room-card {
+  box-sizing: border-box;
+  background: $dd-bg-elevated;
+  @include dd-transition(transform 0.2s ease);
+}
+
+// === GRID ===
+.dd-room-card--grid {
+  position: relative;
+  border: 1px solid $dd-border-default;
+  border-radius: $dd-radius-lg;
+  overflow: hidden;
+  aspect-ratio: 1 / 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.dd-room-card__topbar {
+  height: 12rpx;
+  width: 100%;
+  background: $dd-surface-container-highest;
+  flex-shrink: 0;
+}
+
+.dd-room-card__grid-inner {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: $dd-space-2;
+  padding: $dd-space-2;
+}
+
+.dd-room-card__no {
+  font-size: $dd-font-size-h1;
+  font-weight: $dd-font-weight-h1;
+  color: $dd-text-primary;
+  line-height: 1.2;
+}
+
+.dd-room-card__status {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+
+  &--inline {
+    margin-left: $dd-space-2;
+  }
+}
+
+.dd-room-card__dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: $dd-neutral-500;
+}
+
+.dd-room-card__status-text {
+  font-size: $dd-font-size-caption;
+  color: $dd-text-tertiary;
+}
+
+.dd-room-card__capacity {
+  font-size: $dd-font-size-caption;
+  color: $dd-text-tertiary;
+
+  &--inline {
+    font-size: $dd-font-size-caption;
+  }
+}
+
+.dd-room-card__vip-tag {
+  position: absolute;
+  top: 12rpx;
+  right: 12rpx;
+  z-index: 2;
+  padding: 2rpx 12rpx;
+  background: $dd-gradient-primary;
+  border-radius: $dd-radius-sm;
+  text {
+    font-size: 20rpx;
+    font-weight: 700;
+    color: $dd-neutral-900;
+    line-height: 1.6;
+  }
+}
+
+// === 顶部栏/状态色: occupied=gold, reserved=accent, idle=neutral ===
+.dd-room-card--occupied.dd-room-card--grid {
+  .dd-room-card__topbar {
+    background: $dd-gradient-primary-h;
+  }
+  .dd-room-card__dot {
+    background: $dd-primary-400;
+    box-shadow: 0 0 12rpx rgba(245, 166, 35, 0.6);
+  }
+  .dd-room-card__status-text {
+    color: $dd-primary-400;
+  }
+}
+
+.dd-room-card--reserved.dd-room-card--grid {
+  .dd-room-card__topbar {
+    background: $dd-gradient-accent-h;
+  }
+  .dd-room-card__dot {
+    background: $dd-accent-400;
+    box-shadow: 0 0 12rpx rgba(45, 75, 160, 0.6);
+  }
+  .dd-room-card__status-text {
+    color: $dd-accent-300;
+  }
+}
+
+.dd-room-card--idle.dd-room-card--grid {
+  .dd-room-card__topbar {
+    background: $dd-surface-container-highest;
+  }
+}
+
+// === LIST ===
+.dd-room-card--list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: $dd-space-3;
+  padding: $dd-space-3 $dd-space-4;
+  border: 1px solid $dd-border-default;
+  border-radius: $dd-radius-md;
+}
+
+.dd-room-card__avatar {
+  flex-shrink: 0;
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $dd-gradient-accent;
+
+  &-text {
+    font-size: $dd-font-size-body;
+    font-weight: 700;
+    color: $dd-color-white;
+  }
+}
+
+.dd-room-card--vip .dd-room-card__avatar {
+  background: $dd-gradient-primary;
+}
+
+.dd-room-card--theme .dd-room-card__avatar {
+  background: $dd-gradient-accent;
+}
+
+.dd-room-card__list-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+}
+
+.dd-room-card__list-head {
+  display: flex;
+  align-items: center;
+}
+
+.dd-room-card__name {
+  font-size: $dd-font-size-body;
+  font-weight: 600;
+  color: $dd-text-primary;
+  @include dd-ellipsis(1);
+}
+
+.dd-room-card__list-right {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.dd-room-card__time {
+  font-size: $dd-font-size-caption;
+  color: $dd-text-secondary;
+}
+
+// list 状态色
+.dd-room-card--occupied.dd-room-card--list {
+  .dd-room-card__dot {
+    background: $dd-primary-400;
+    box-shadow: 0 0 12rpx rgba(245, 166, 35, 0.6);
+  }
+  .dd-room-card__status-text {
+    color: $dd-primary-400;
+  }
+}
+
+.dd-room-card--reserved.dd-room-card--list {
+  .dd-room-card__dot {
+    background: $dd-accent-400;
+    box-shadow: 0 0 12rpx rgba(45, 75, 160, 0.6);
+  }
+  .dd-room-card__status-text {
+    color: $dd-accent-300;
+  }
+}
+
+.dd-room-card--press {
+  transform: scale(0.98);
+  opacity: 0.92;
+}
+</style>

package/components/dd-search-bar/dd-search-bar.vue

@@ -0,0 +1,176 @@
+<template>
+  <view class="dd-search" :class="{ 'dd-search--disabled': disabled }">
+    <view
+      class="dd-search__wrap"
+      :class="{ 'dd-search__wrap--focus': isFocused, 'dd-search__wrap--square': !round }"
+    >
+      <dd-icon name="search" class="dd-search__icon" :class="{ 'dd-search__icon--focus': isFocused }" />
+      <input
+        class="dd-search__inner"
+        type="text"
+        :value="modelValue"
+        :placeholder="placeholder"
+        placeholder-style="color:#9E9E9E"
+        :disabled="disabled"
+        :focus="focusFlag"
+        confirm-type="search"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @confirm="onConfirm"
+      />
+      <view v-if="showClear" class="dd-search__clear" @click="onClear"><dd-icon name="cross" /></view>
+    </view>
+    <text v-if="showCancel" class="dd-search__cancel" @click="onCancel">取消</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  modelValue?: string
+  placeholder?: string
+  round?: boolean
+  showCancel?: boolean
+  autofocus?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: '搜索歌曲、歌手',
+  round: true,
+  showCancel: false,
+  autofocus: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string): void
+  (e: 'focus', val: Event): void
+  (e: 'blur', val: Event): void
+  (e: 'clear'): void
+  (e: 'search', val: string): void
+  (e: 'cancel'): void
+}>()
+
+const isFocused = ref(false)
+const focusFlag = ref(false)
+const showClear = computed(() => !!props.modelValue && !props.disabled)
+
+onMounted(() => {
+  if (props.autofocus) focusFlag.value = true
+})
+
+function onInput(e: any) {
+  emit('update:modelValue', e?.detail?.value ?? e?.target?.value ?? '')
+}
+function onFocus(e: Event) {
+  isFocused.value = true
+  emit('focus', e)
+}
+function onBlur(e: Event) {
+  isFocused.value = false
+  emit('blur', e)
+}
+function onConfirm(e: any) {
+  const v = e?.detail?.value ?? e?.target?.value ?? ''
+  emit('search', v)
+}
+function onClear() {
+  emit('update:modelValue', '')
+  emit('clear')
+  // ponytail: 清除后通过 :focus 标志位翻转重新聚焦，低端机时序可靠性未知
+  focusFlag.value = false
+  nextTick(() => {
+    focusFlag.value = true
+  })
+}
+function onCancel() {
+  emit('cancel')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-search {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+
+  &__wrap {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    height: 88rpx;
+    padding: 0 24rpx;
+    background: $dd-neutral-800;
+    border: 1px solid $dd-neutral-700;
+    border-radius: $dd-radius-full;
+    box-sizing: border-box;
+    @include dd-transition(border-color 0.2s, box-shadow 0.2s);
+
+    &--square {
+      border-radius: $dd-radius-md;
+    }
+
+    &--focus {
+      border-color: $dd-primary-500;
+      box-shadow: $dd-shadow-glow-gold-lg;
+    }
+  }
+
+  &__icon {
+    font-size: 28rpx;
+    color: $dd-neutral-400;
+    line-height: 1;
+    @include dd-transition(color 0.2s);
+
+    &--focus {
+      color: $dd-primary-400;
+    }
+  }
+
+  &__inner {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    font-size: 28rpx;
+    color: $dd-neutral-100;
+    background: transparent;
+    border: none;
+  }
+
+  &__clear {
+    @include dd-flex-center;
+    width: 36rpx;
+    height: 36rpx;
+    border-radius: 50%;
+    background: $dd-neutral-800;
+    color: $dd-neutral-300;
+    font-size: 24rpx;
+    line-height: 1;
+  }
+
+  &__cancel {
+    flex-shrink: 0;
+    padding: 0 8rpx;
+    font-size: 28rpx;
+    font-weight: 500;
+    color: $dd-primary-400;
+  }
+
+  &--disabled {
+    opacity: 0.4;
+    @include dd-no-touch;
+    .dd-search__icon {
+      color: $dd-neutral-600;
+    }
+  }
+}
+</style>

package/components/dd-segmented-tab/dd-segmented-tab.vue

@@ -0,0 +1,187 @@
+<template>
+  <view
+    v-if="variant === 'pill'"
+    class="dd-seg dd-seg--pill"
+  >
+    <view
+      ref="trackRef"
+      class="dd-seg__track"
+    >
+      <view
+        v-for="(opt, index) in options"
+        :key="index"
+        class="dd-seg__item"
+        :class="{ 'dd-seg__item--active': index === modelValue }"
+        @click="onSelect(index)"
+      >
+        <text class="dd-seg__label">{{ labelOf(opt) }}</text>
+      </view>
+      <view
+        class="dd-seg__indicator"
+        :style="indicatorStyle"
+      ></view>
+    </view>
+  </view>
+  <view v-else class="dd-seg dd-seg--text">
+    <view
+      v-for="(opt, index) in options"
+      :key="index"
+      class="dd-seg-text__item"
+      :class="{ 'dd-seg-text__item--active': index === modelValue }"
+      @click="onSelect(index)"
+    >
+      <text class="dd-seg__label">{{ labelOf(opt) }}</text>
+      <view v-if="index === modelValue" class="dd-seg-text__underline"></view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { getCurrentInstance } from 'vue'
+
+interface Props {
+  modelValue?: number
+  options?: (string | { label: string })[]
+  variant?: 'pill' | 'text'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  options: () => [],
+  variant: 'pill',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: number): void
+  (e: 'change', val: number): void
+}>()
+
+const instance = getCurrentInstance()
+const indicatorStyle = ref({ width: '0px', transform: 'translateX(0px)' })
+
+function labelOf(opt: string | { label: string }): string {
+  return typeof opt === 'string' ? opt : opt.label
+}
+
+function onSelect(index: number) {
+  if (index === props.modelValue) return
+  emit('update:modelValue', index)
+  emit('change', index)
+}
+
+function measure() {
+  if (props.variant !== 'pill') return
+  nextTick(() => {
+    const query = uni.createSelectorQuery().in(instance)
+    query
+      .selectAll('.dd-seg__item')
+      .boundingClientRect()
+      .select('.dd-seg__track')
+      .boundingClientRect()
+      .exec((res) => {
+        const items = (res[0] || []) as UniApp.NodeInfo[]
+        const track = res[1] as UniApp.NodeInfo
+        if (!items.length || !track) return
+        const target = items[props.modelValue]
+        if (!target) return
+        const left = (target.left || 0) - (track.left || 0)
+        indicatorStyle.value = {
+          width: (target.width || 0) + 'px',
+          transform: `translateX(${left}px)`,
+        }
+      })
+  })
+}
+
+onMounted(measure)
+watch(() => props.modelValue, measure)
+watch(() => props.options, measure)
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-seg {
+  font-family: $dd-font-body;
+}
+
+// === pill ===
+.dd-seg--pill {
+  .dd-seg__track {
+    position: relative;
+    display: inline-flex;
+    padding: 8rpx;
+    background: $dd-neutral-800;
+    border: 1px solid $dd-border-default;
+    border-radius: $dd-radius-full;
+  }
+
+  .dd-seg__item {
+    position: relative;
+    z-index: 1;
+    min-width: 120rpx;
+    padding: 12rpx $dd-space-4;
+    @include dd-flex-center;
+    color: $dd-text-tertiary;
+    font-size: $dd-font-size-body;
+    font-weight: 500;
+    @include dd-transition(color 0.3s);
+
+    &--active {
+      color: $dd-neutral-900;
+      font-weight: 600;
+    }
+  }
+
+  .dd-seg__indicator {
+    position: absolute;
+    top: 8rpx;
+    bottom: 8rpx;
+    left: 0;
+    background: $dd-color-white;
+    border-radius: $dd-radius-full;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+// === text ===
+.dd-seg--text {
+  display: flex;
+  flex-direction: row;
+  gap: 64rpx;
+
+  .dd-seg-text__item {
+    position: relative;
+    padding: 16rpx 0;
+    color: $dd-text-tertiary;
+    font-size: $dd-font-size-body;
+    font-weight: 500;
+    @include dd-flex-center;
+    @include dd-transition(color 0.3s);
+
+    &--active {
+      color: $dd-primary-400;
+      font-weight: 600;
+    }
+  }
+
+  .dd-seg-text__underline {
+    position: absolute;
+    bottom: 0;
+    left: 20%;
+    width: 60%;
+    height: 4rpx;
+    background: $dd-primary-400;
+    border-radius: $dd-radius-full;
+  }
+}
+
+.dd-seg__label {
+  line-height: 1.2;
+  @include dd-ellipsis(1);
+}
+</style>