@didaoktv/didaoui-uniapp 1.0.0 → 1.2.0

package/components/dd-radio/dd-radio.vue

@@ -5,7 +5,7 @@
       `dd-radio--${size}`,
       {
         'dd-radio--checked': isChecked,
-        'dd-radio--disabled': disabled,
+        'dd-radio--disabled': isDisabled,
       },
     ]"
     @click="onToggle"
@@ -20,36 +20,35 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 
 interface Props {
-  modelValue?: any
-  value?: any
+  /** 选项值，对应 dd-radio-group 的 modelValue */
+  value: any
   disabled?: boolean
   size?: 'md' | 'sm'
   label?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: null,
   value: null,
   disabled: false,
   size: 'md',
   label: '',
 })
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', val: any): void
-  (e: 'change', val: any): void
-}>()
+// 必须配合 dd-radio-group 使用（vant/uview 同款约定）
+const group = inject<{
+  props: { modelValue: any; disabled: boolean }
+  toggle: (value: any) => void
+} | null>('dd-radio-group', null)
 
-const isChecked = computed(() => props.modelValue === props.value)
+const isChecked = computed(() => group?.props.modelValue === props.value)
+const isDisabled = computed(() => props.disabled || !!group?.props.disabled)
 
 function onToggle() {
-  if (props.disabled) return
-  if (isChecked.value) return
-  emit('update:modelValue', props.value)
-  emit('change', props.value)
+  if (isDisabled.value || !group) return
+  group.toggle(props.value)
 }
 </script>
 
@@ -75,7 +74,7 @@ function onToggle() {
 
   &__inner {
     border-radius: 50%;
-    background: #ffffff;
+    background: $dd-color-white;
     transform: scale(0);
     opacity: 0;
     @include dd-transition(transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s);
@@ -105,8 +104,8 @@ function onToggle() {
 
 .dd-radio--md {
   .dd-radio__outer {
-    width: 40rpx;
-    height: 40rpx;
+    width: $dd-size-icon-md;
+    height: $dd-size-icon-md;
   }
   .dd-radio__inner {
     width: 20rpx;
@@ -115,15 +114,15 @@ function onToggle() {
 }
 .dd-radio--sm {
   .dd-radio__outer {
-    width: 32rpx;
-    height: 32rpx;
+    width: $dd-size-icon-sm;
+    height: $dd-size-icon-sm;
   }
   .dd-radio__inner {
     width: 14rpx;
     height: 14rpx;
   }
   .dd-radio__label {
-    font-size: 28rpx;
+    font-size: $dd-font-size-body;
   }
 }
 </style>

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

@@ -0,0 +1,53 @@
+<template>
+  <view class="dd-radio-group" :class="{ 'dd-radio-group--vertical': direction === 'vertical' }">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue'
+
+interface Props {
+  modelValue?: any
+  disabled?: boolean
+  direction?: 'horizontal' | 'vertical'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  disabled: false,
+  direction: 'horizontal',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'change', val: any): void
+}>()
+
+provide('dd-radio-group', {
+  props,
+  toggle(value: any) {
+    if (props.modelValue === value) return
+    emit('update:modelValue', value)
+    emit('change', value)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+
+.dd-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $dd-space-4;
+  width: 100%;
+
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: $dd-space-3;
+  }
+}
+</style>

package/components/dd-rate/dd-rate.vue

@@ -76,7 +76,7 @@ function select(val: number) {
 .dd-rate {
   display: inline-flex;
   align-items: center;
-  gap: 8rpx;
+  gap: $dd-space-1;
 
   &__item {
     position: relative;

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

@@ -137,7 +137,7 @@ function onClick() {
 .dd-room-card__status {
   display: flex;
   align-items: center;
-  gap: 8rpx;
+  gap: $dd-space-1;
 
   &--inline {
     margin-left: $dd-space-2;
@@ -174,7 +174,7 @@ function onClick() {
   background: $dd-gradient-primary;
   border-radius: $dd-radius-sm;
   text {
-    font-size: 20rpx;
+    font-size: $dd-font-size-caption;
     font-weight: 700;
     color: $dd-neutral-900;
     line-height: 1.6;
@@ -255,7 +255,7 @@ function onClick() {
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 4rpx;
+  gap: $dd-space-1;
 }
 
 .dd-room-card__list-head {

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

@@ -100,15 +100,15 @@ function onCancel() {
 .dd-search {
   display: flex;
   align-items: center;
-  gap: 16rpx;
+  gap: $dd-space-2;
 
   &__wrap {
     flex: 1;
     display: flex;
     align-items: center;
-    gap: 16rpx;
+    gap: $dd-space-2;
     height: 88rpx;
-    padding: 0 24rpx;
+    padding: 0 $dd-space-3;
     background: $dd-neutral-800;
     border: 1px solid $dd-neutral-700;
     border-radius: $dd-radius-full;
@@ -126,7 +126,7 @@ function onCancel() {
   }
 
   &__icon {
-    font-size: 28rpx;
+    font-size: $dd-font-size-body;
     color: $dd-neutral-400;
     line-height: 1;
     @include dd-transition(color 0.2s);
@@ -140,7 +140,7 @@ function onCancel() {
     flex: 1;
     min-width: 0;
     height: 100%;
-    font-size: 28rpx;
+    font-size: $dd-font-size-body;
     color: $dd-neutral-100;
     background: transparent;
     border: none;
@@ -153,14 +153,14 @@ function onCancel() {
     border-radius: 50%;
     background: $dd-neutral-800;
     color: $dd-neutral-300;
-    font-size: 24rpx;
+    font-size: $dd-font-size-caption;
     line-height: 1;
   }
 
   &__cancel {
     flex-shrink: 0;
-    padding: 0 8rpx;
-    font-size: 28rpx;
+    padding: 0 $dd-space-1;
+    font-size: $dd-font-size-body;
     font-weight: 500;
     color: $dd-primary-400;
   }

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

@@ -112,7 +112,7 @@ watch(() => props.options, measure)
   .dd-seg__track {
     position: relative;
     display: inline-flex;
-    padding: 8rpx;
+    padding: $dd-space-1;
     background: $dd-neutral-800;
     border: 1px solid $dd-border-default;
     border-radius: $dd-radius-full;
@@ -137,8 +137,8 @@ watch(() => props.options, measure)
 
   .dd-seg__indicator {
     position: absolute;
-    top: 8rpx;
-    bottom: 8rpx;
+    top: $dd-space-1;
+    bottom: $dd-space-1;
     left: 0;
     background: $dd-color-white;
     border-radius: $dd-radius-full;
@@ -152,11 +152,11 @@ watch(() => props.options, measure)
 .dd-seg--text {
   display: flex;
   flex-direction: row;
-  gap: 64rpx;
+  gap: $dd-space-6;
 
   .dd-seg-text__item {
     position: relative;
-    padding: 16rpx 0;
+    padding: $dd-space-2 0;
     color: $dd-text-tertiary;
     font-size: $dd-font-size-body;
     font-weight: 500;
@@ -174,7 +174,7 @@ watch(() => props.options, measure)
     bottom: 0;
     left: 20%;
     width: 60%;
-    height: 4rpx;
+    height: $dd-space-1;
     background: $dd-primary-400;
     border-radius: $dd-radius-full;
   }