@didaoktv/didaoui-uniapp 1.0.0

package/components/dd-empty-state/dd-empty-state.vue

@@ -0,0 +1,140 @@
+<template>
+  <view class="dd-empty-state">
+    <slot name="image">
+      <view class="dd-empty-state__icon">
+        <dd-icon :name="icon" class="dd-empty-state__emoji" />
+      </view>
+    </slot>
+
+    <slot name="title">
+      <text class="dd-empty-state__title">{{ titleText }}</text>
+    </slot>
+
+    <slot v-if="description || $slots.description" name="description">
+      <text class="dd-empty-state__desc">{{ description }}</text>
+    </slot>
+
+    <slot v-if="showButton" name="button">
+      <view class="dd-empty-state__btn" @click="onAction">
+        <text class="dd-empty-state__btn-text">{{ buttonTextComputed }}</text>
+      </view>
+    </slot>
+
+    <slot name="bottom"></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+type EmptyType = 'no-data' | 'no-result' | 'error' | 'network'
+
+interface Props {
+  type?: EmptyType
+  icon?: string
+  title?: string
+  description?: string
+  buttonText?: string
+  showButton?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'no-data',
+  icon: 'music',
+  title: '',
+  description: '',
+  buttonText: '',
+  showButton: true,
+})
+
+const emit = defineEmits<{
+  (e: 'action'): void
+}>()
+
+const titleMap: Record<EmptyType, string> = {
+  'no-data': '暂无数据',
+  'no-result': '未找到相关结果',
+  error: '加载失败',
+  network: '网络连接异常',
+}
+
+const buttonTextMap: Record<EmptyType, string> = {
+  'no-data': '去添加',
+  'no-result': '换个关键词',
+  error: '重新加载',
+  network: '检查网络',
+}
+
+const titleText = computed(() => props.title || titleMap[props.type])
+const buttonTextComputed = computed(() => props.buttonText || buttonTextMap[props.type])
+
+function onAction() {
+  emit('action')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $dd-space-8 $dd-space-6;
+  text-align: center;
+
+  &__icon {
+    margin-bottom: $dd-space-4;
+  }
+
+  &__emoji {
+    font-size: 120rpx;
+    line-height: 1;
+    animation: dd-empty-float 3s ease-in-out infinite;
+  }
+
+  &__title {
+    font-size: $dd-font-size-h3;
+    font-weight: $dd-font-weight-h3;
+    color: $dd-text-primary;
+    line-height: $dd-line-height-h3;
+  }
+
+  &__desc {
+    margin-top: $dd-space-2;
+    font-size: $dd-font-size-body;
+    color: $dd-text-tertiary;
+    line-height: 1.5;
+    max-width: 560rpx;
+  }
+
+  &__btn {
+    margin-top: $dd-space-5;
+    padding: 0 $dd-space-5;
+    height: $dd-size-button-md;
+    border-radius: $dd-radius-full;
+    background: $dd-gradient-primary;
+    @include dd-flex-center;
+    box-shadow: $dd-shadow-glow-gold-md;
+  }
+
+  &__btn-text {
+    font-size: $dd-font-size-body;
+    font-weight: $dd-font-weight-body;
+    color: $dd-neutral-900;
+  }
+}
+
+@keyframes dd-empty-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-16rpx);
+  }
+}
+</style>

package/components/dd-feature-grid/dd-feature-grid.vue

@@ -0,0 +1,139 @@
+<template>
+  <view class="dd-feature-grid" :style="gridStyle">
+    <view
+      v-for="(item, index) in items"
+      :key="itemKey ? item[itemKey] : index"
+      class="dd-feature-grid__item"
+      :class="[`dd-feature-grid__item--${variant}`]"
+      :hover-class="'dd-feature-grid__item--press'"
+      :hover-stay-time="100"
+      @click="onItemClick(item, index)"
+    >
+      <view
+        class="dd-feature-grid__icon"
+        :style="iconStyle(item)"
+      >
+        <slot name="icon" :item="item" :index="index">
+          <dd-icon :name="iconOf(item)" class="dd-feature-grid__icon-text" />
+        </slot>
+      </view>
+      <text class="dd-feature-grid__label">{{ labelOf(item) }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface FeatureItem {
+  [key: string]: any
+  label?: string
+  icon?: string
+  color?: string
+}
+
+interface Props {
+  items?: FeatureItem[]
+  columns?: number
+  variant?: 'circle' | 'squircle'
+  labelKey?: string
+  iconKey?: string
+  colorKey?: string
+  itemKey?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  columns: 4,
+  variant: 'circle',
+  labelKey: 'label',
+  iconKey: 'icon',
+  colorKey: 'color',
+  itemKey: '',
+})
+
+const emit = defineEmits<{
+  (e: 'item-click', val: { item: FeatureItem; index: number }): void
+}>()
+
+const gridStyle = computed(() => ({
+  gridTemplateColumns: `repeat(${props.columns}, 1fr)`,
+}))
+
+const defaultBg = 'linear-gradient(135deg, #FFD54F 0%, #D4891A 100%)'
+
+function iconStyle(item: FeatureItem) {
+  const color = item[props.colorKey]
+  return {
+    background: color || defaultBg,
+  }
+}
+
+function labelOf(item: FeatureItem) {
+  return item[props.labelKey] ?? ''
+}
+
+function iconOf(item: FeatureItem) {
+  return item[props.iconKey] ?? ''
+}
+
+function onItemClick(item: FeatureItem, index: number) {
+  emit('item-click', { item, index })
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-feature-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  row-gap: $dd-space-4;
+  column-gap: $dd-space-2;
+}
+
+.dd-feature-grid__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $dd-space-2;
+  @include dd-transition(transform 0.15s ease);
+
+  &--press {
+    transform: scale(0.92);
+  }
+}
+
+.dd-feature-grid__icon {
+  width: 84rpx;
+  height: 84rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $dd-gradient-primary-wide;
+}
+
+.dd-feature-grid__item--circle .dd-feature-grid__icon {
+  border-radius: 50%;
+}
+
+.dd-feature-grid__item--squircle .dd-feature-grid__icon {
+  border-radius: $dd-radius-xl;
+}
+
+.dd-feature-grid__icon-text {
+  font-size: $dd-font-size-h2;
+  color: $dd-neutral-900;
+  line-height: 1;
+}
+
+.dd-feature-grid__label {
+  font-size: $dd-font-size-caption;
+  color: $dd-text-secondary;
+  text-align: center;
+  @include dd-ellipsis(1);
+  max-width: 100%;
+}
+</style>

package/components/dd-field/dd-field.vue

@@ -0,0 +1,240 @@
+<template>
+  <view
+    class="dd-field"
+    :class="{
+      'dd-field--error': errorState,
+      'dd-field--disabled': disabled,
+      'dd-field--borderless': borderless,
+    }"
+  >
+    <view class="dd-field__row">
+      <view v-if="label || $slots.label" class="dd-field__label">
+        <text v-if="required" class="dd-field__required">*</text>
+        <text class="dd-field__label-text"><slot name="label">{{ label }}</slot></text>
+      </view>
+      <view class="dd-field__body">
+        <textarea
+          v-if="type === 'textarea'"
+          class="dd-field__control dd-field__textarea"
+          :value="modelValue"
+          :placeholder="placeholder"
+          placeholder-style="color:#9E9E9E"
+          :disabled="disabled"
+          :maxlength="maxlength"
+          :auto-height="autosize"
+          :style="{ textAlign: inputAlign }"
+          @input="onInput"
+          @focus="onFocus"
+          @blur="onBlur"
+          @confirm="onConfirm"
+        />
+        <input
+          v-else
+          class="dd-field__control"
+          :type="inputType"
+          :password="isPassword"
+          :value="modelValue"
+          :placeholder="placeholder"
+          placeholder-style="color:#9E9E9E"
+          :disabled="disabled"
+          :maxlength="maxlength"
+          :style="{ textAlign: inputAlign }"
+          @input="onInput"
+          @focus="onFocus"
+          @blur="onBlur"
+          @confirm="onConfirm"
+        />
+        <view v-if="showClear" class="dd-field__clear" @click="onClear"><dd-icon name="cross" /></view>
+      </view>
+    </view>
+    <view v-if="errorMessage || showWordLimit" class="dd-field__footer">
+      <text v-if="errorMessage" class="dd-field__error">{{ errorMessage }}</text>
+      <text v-if="showWordLimit" class="dd-field__counter">{{ len }}/{{ maxlength }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  modelValue?: string | number
+  type?: 'text' | 'textarea' | 'password' | 'number' | 'digit'
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  required?: boolean
+  borderless?: boolean
+  inputAlign?: 'left' | 'center' | 'right'
+  clearable?: boolean
+  maxlength?: number
+  showWordLimit?: boolean
+  autosize?: boolean
+  error?: boolean
+  errorMessage?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  type: 'text',
+  label: '',
+  placeholder: '',
+  disabled: false,
+  required: false,
+  borderless: false,
+  inputAlign: 'left',
+  clearable: false,
+  maxlength: -1,
+  showWordLimit: false,
+  autosize: false,
+  error: false,
+  errorMessage: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string): void
+  (e: 'focus', val: Event): void
+  (e: 'blur', val: Event): void
+  (e: 'clear'): void
+  (e: 'confirm', val: string): void
+}>()
+
+// ponytail: password 用 uni 原生 password 布尔属性跨端
+const inputType = computed<'text' | 'number' | 'digit'>(() => {
+  if (props.type === 'password') return 'text'
+  if (props.type === 'text') return 'text'
+  return props.type as 'number' | 'digit'
+})
+const isPassword = computed(() => props.type === 'password')
+const errorState = computed(() => props.error || !!props.errorMessage)
+const showClear = computed(() => props.clearable && !!props.modelValue && !props.disabled)
+const showWordLimit = computed(() => props.showWordLimit && props.maxlength > 0)
+const len = computed(() => String(props.modelValue ?? '').length)
+
+function onInput(e: any) {
+  emit('update:modelValue', e?.detail?.value ?? e?.target?.value ?? '')
+}
+function onFocus(e: Event) {
+  emit('focus', e)
+}
+function onBlur(e: Event) {
+  emit('blur', e)
+}
+function onConfirm(e: any) {
+  const v = e?.detail?.value ?? e?.target?.value ?? ''
+  emit('confirm', v)
+}
+function onClear() {
+  emit('update:modelValue', '')
+  emit('clear')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-field {
+  background: transparent;
+  padding: 16rpx 24rpx 0 32rpx;
+  box-sizing: border-box;
+  @include dd-hairline-bottom($dd-border-subtle);
+
+  &__row {
+    display: flex;
+    align-items: flex-start;
+    min-height: 112rpx;
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 6.2em;
+    min-height: 56rpx;
+    font-size: 28rpx;
+    color: $dd-text-secondary;
+  }
+  &__required {
+    color: $dd-error-500;
+    margin-right: 4rpx;
+  }
+  &__label-text {
+    @include dd-ellipsis(1);
+  }
+
+  &__body {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  &__control {
+    flex: 1;
+    min-width: 0;
+    font-size: 28rpx;
+    color: $dd-text-primary;
+    background: transparent;
+    border: none;
+  }
+  &__textarea {
+    padding: 16rpx 0;
+    min-height: 60rpx;
+    line-height: 1.5;
+  }
+
+  &__clear {
+    @include dd-flex-center;
+    flex-shrink: 0;
+    width: 36rpx;
+    height: 36rpx;
+    margin-left: 16rpx;
+    border-radius: $dd-radius-full;
+    background: $dd-neutral-800;
+    color: $dd-text-secondary;
+    font-size: 24rpx;
+    line-height: 1;
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-height: 40rpx;
+    padding-bottom: 8rpx;
+  }
+  &__error {
+    flex: 1;
+    font-size: 24rpx;
+    color: $dd-error-500;
+    @include dd-ellipsis(1);
+  }
+  &__counter {
+    flex-shrink: 0;
+    font-size: 24rpx;
+    color: $dd-text-tertiary;
+  }
+
+  &--error {
+    .dd-field__control {
+      color: $dd-error-500;
+    }
+    .dd-field__label-text {
+      color: $dd-error-500;
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    @include dd-no-touch;
+  }
+
+  &--borderless {
+    &::after {
+      display: none;
+    }
+  }
+}
+</style>