@didaoktv/didaoui-uniapp 1.0.0

package/components/dd-upload/dd-upload.vue

@@ -0,0 +1,187 @@
+<template>
+  <view class="dd-upload" :class="{ 'dd-upload--disabled': disabled }">
+    <view
+      v-for="(file, index) in fileList"
+      :key="file.url || index"
+      class="dd-upload__item"
+      @click="onPreview(index)"
+    >
+      <image
+        class="dd-upload__img"
+        :src="file.url"
+        :mode="imageMode"
+      />
+      <view
+        v-if="!disabled"
+        class="dd-upload__delete"
+        @click.stop="onDelete(index)"
+      >
+        <dd-icon name="cross" />
+      </view>
+    </view>
+    <view
+      v-if="showAdd"
+      class="dd-upload__add"
+      :hover-class="disabled ? '' : 'dd-upload__add--active'"
+      @click="onChoose"
+    >
+      <dd-icon name="plus" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface UploadFileItem {
+  url: string
+  [key: string]: any
+}
+
+interface Props {
+  fileList?: UploadFileItem[]
+  maxCount?: number
+  maxSize?: number
+  multiple?: boolean
+  disabled?: boolean
+  imageFit?: 'cover' | 'contain' | 'fill'
+  sourceType?: ('album' | 'camera')[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fileList: () => [],
+  maxCount: 9,
+  maxSize: 0,
+  multiple: true,
+  disabled: false,
+  imageFit: 'cover',
+  sourceType: () => ['album', 'camera'],
+})
+
+const emit = defineEmits<{
+  (e: 'update:fileList', val: UploadFileItem[]): void
+  (e: 'change', val: UploadFileItem[]): void
+  (e: 'oversize', val: UploadFileItem[]): void
+  (e: 'delete', val: { index: number; file: UploadFileItem }): void
+  (e: 'afterRead', val: UploadFileItem[]): void
+}>()
+
+const modeMap = {
+  cover: 'aspectFill',
+  contain: 'aspectFit',
+  fill: 'scaleToFill',
+} as const
+
+const imageMode = computed(() => modeMap[props.imageFit])
+const showAdd = computed(
+  () => !props.disabled && props.fileList.length < props.maxCount
+)
+
+function onChoose() {
+  if (props.disabled) return
+  const remaining = props.maxCount - props.fileList.length
+  if (remaining <= 0) return
+  const count = props.multiple ? Math.min(remaining, 9) : 1
+  uni.chooseImage({
+    count,
+    sourceType: props.sourceType as any,
+    success: (res) => {
+      const paths = (res.tempFilePaths as string[]) || []
+      const sizes = (res.tempFiles as any[] | undefined)?.map((f: any) => f.size) || []
+      const accepted: UploadFileItem[] = []
+      const rejected: UploadFileItem[] = []
+      paths.forEach((p, i) => {
+        const item: UploadFileItem = { url: p }
+        if (props.maxSize && sizes[i] && sizes[i] > props.maxSize) {
+          rejected.push(item)
+        } else {
+          accepted.push(item)
+        }
+      })
+      if (rejected.length) emit('oversize', rejected)
+      if (accepted.length) {
+        const next = [...props.fileList, ...accepted]
+        emit('update:fileList', next)
+        emit('change', next)
+        emit('afterRead', accepted)
+      }
+    },
+  })
+}
+
+function onDelete(index: number) {
+  const file = props.fileList[index]
+  const next = props.fileList.filter((_, i) => i !== index)
+  emit('update:fileList', next)
+  emit('change', next)
+  emit('delete', { index, file })
+}
+
+function onPreview(index: number) {
+  if (props.disabled) return
+  const urls = props.fileList.map((f) => f.url).filter(Boolean)
+  if (!urls.length) return
+  uni.previewImage({ urls, current: urls[index] })
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-upload {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+
+  &__item {
+    position: relative;
+    width: 160rpx;
+    height: 160rpx;
+    border-radius: $dd-radius-md;
+    background: $dd-neutral-800;
+    overflow: hidden;
+  }
+
+  &__img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  &__delete {
+    position: absolute;
+    top: 8rpx;
+    right: 8rpx;
+    width: 36rpx;
+    height: 36rpx;
+    border-radius: 50%;
+    background: $dd-error;
+    color: $dd-color-white;
+    font-size: $dd-font-size-caption;
+    @include dd-flex-center;
+  }
+
+  &__add {
+    @include dd-flex-center;
+    width: 160rpx;
+    height: 160rpx;
+    border: 1px dashed $dd-border-default;
+    border-radius: $dd-radius-md;
+    background: $dd-neutral-800;
+    color: $dd-text-tertiary;
+    font-size: 48rpx;
+    box-sizing: border-box;
+    @include dd-transition(background 0.2s);
+
+    &--active {
+      background: $dd-border-default;
+    }
+  }
+
+  &--disabled {
+    @include dd-no-touch;
+  }
+}
+</style>

package/index.ts

@@ -0,0 +1,127 @@
+import type { App } from 'vue'
+
+// === Input (13) ===
+import DdButton from './components/dd-button/dd-button.vue'
+import DdInput from './components/dd-input/dd-input.vue'
+import DdSwitch from './components/dd-switch/dd-switch.vue'
+import DdCheckbox from './components/dd-checkbox/dd-checkbox.vue'
+import DdRadio from './components/dd-radio/dd-radio.vue'
+import DdSearchBar from './components/dd-search-bar/dd-search-bar.vue'
+import DdSlider from './components/dd-slider/dd-slider.vue'
+import DdStepper from './components/dd-stepper/dd-stepper.vue'
+import DdDatePicker from './components/dd-date-picker/dd-date-picker.vue'
+import DdField from './components/dd-field/dd-field.vue'
+import DdPicker from './components/dd-picker/dd-picker.vue'
+import DdRate from './components/dd-rate/dd-rate.vue'
+import DdUpload from './components/dd-upload/dd-upload.vue'
+import DdIcon from './components/dd-icon/dd-icon.vue'
+
+// === Navigation (12) ===
+import DdNavigation from './components/dd-navigation/dd-navigation.vue'
+import DdTopNavbar from './components/dd-top-navbar/dd-top-navbar.vue'
+import DdSegmentedTab from './components/dd-segmented-tab/dd-segmented-tab.vue'
+import DdSwipeableTab from './components/dd-swipeable-tab/dd-swipeable-tab.vue'
+import DdDrawer from './components/dd-drawer/dd-drawer.vue'
+import DdTabbar from './components/dd-tabbar/dd-tabbar.vue'
+import DdTabbarItem from './components/dd-tabbar-item/dd-tabbar-item.vue'
+import DdBacktop from './components/dd-backtop/dd-backtop.vue'
+import DdCollapse from './components/dd-collapse/dd-collapse.vue'
+import DdCollapseItem from './components/dd-collapse-item/dd-collapse-item.vue'
+import DdDropdownMenu from './components/dd-dropdown-menu/dd-dropdown-menu.vue'
+import DdDropdownItem from './components/dd-dropdown-item/dd-dropdown-item.vue'
+
+// === Layout (4) ===
+import DdCard from './components/dd-card/dd-card.vue'
+import DdRoomCard from './components/dd-room-card/dd-room-card.vue'
+import DdFeatureGrid from './components/dd-feature-grid/dd-feature-grid.vue'
+import DdSticky from './components/dd-sticky/dd-sticky.vue'
+
+// === Display (16) ===
+import DdTag from './components/dd-tag/dd-tag.vue'
+import DdStatCard from './components/dd-stat-card/dd-stat-card.vue'
+import DdChampionCard from './components/dd-champion-card/dd-champion-card.vue'
+import DdAvatar from './components/dd-avatar/dd-avatar.vue'
+import DdBadge from './components/dd-badge/dd-badge.vue'
+import DdListCell from './components/dd-list-cell/dd-list-cell.vue'
+import DdCell from './components/dd-cell/dd-cell.vue'
+import DdCellGroup from './components/dd-cell-group/dd-cell-group.vue'
+import DdCountDown from './components/dd-count-down/dd-count-down.vue'
+import DdDivider from './components/dd-divider/dd-divider.vue'
+import DdImage from './components/dd-image/dd-image.vue'
+import DdProgress from './components/dd-progress/dd-progress.vue'
+import DdSkeleton from './components/dd-skeleton/dd-skeleton.vue'
+import DdEmptyState from './components/dd-empty-state/dd-empty-state.vue'
+import DdStep from './components/dd-step/dd-step.vue'
+import DdSteps from './components/dd-steps/dd-steps.vue'
+
+// === Overlay (10) ===
+import DdModal from './components/dd-modal/dd-modal.vue'
+import DdActionSheet from './components/dd-action-sheet/dd-action-sheet.vue'
+import DdToast from './components/dd-toast/dd-toast.vue'
+import DdAlert from './components/dd-alert/dd-alert.vue'
+import DdLoading from './components/dd-loading/dd-loading.vue'
+import DdDialog from './components/dd-dialog/dd-dialog.vue'
+import DdOverlay from './components/dd-overlay/dd-overlay.vue'
+import DdPopup from './components/dd-popup/dd-popup.vue'
+import DdPopover from './components/dd-popover/dd-popover.vue'
+import DdPopoverItem from './components/dd-popover-item/dd-popover-item.vue'
+
+// === Interaction (5) ===
+import DdSwipeAction from './components/dd-swipe-action/dd-swipe-action.vue'
+import DdSwipe from './components/dd-swipe/dd-swipe.vue'
+import DdSwipeItem from './components/dd-swipe-item/dd-swipe-item.vue'
+import DdPullRefresh from './components/dd-pull-refresh/dd-pull-refresh.vue'
+import DdLoadmore from './components/dd-loadmore/dd-loadmore.vue'
+
+// === Mini Program (2) ===
+import DdCapsuleButton from './components/dd-capsule-button/dd-capsule-button.vue'
+import DdMiniProgramNavbar from './components/dd-mini-program-navbar/dd-mini-program-navbar.vue'
+
+const components = {
+  DdButton, DdInput, DdSwitch, DdCheckbox, DdRadio,
+  DdSearchBar, DdSlider, DdStepper, DdDatePicker, DdField,
+  DdPicker, DdRate, DdUpload, DdIcon,
+  DdNavigation, DdTopNavbar, DdSegmentedTab, DdSwipeableTab,
+  DdDrawer, DdTabbar, DdTabbarItem, DdBacktop,
+  DdCollapse, DdCollapseItem, DdDropdownMenu, DdDropdownItem,
+  DdCard, DdRoomCard, DdFeatureGrid, DdSticky,
+  DdTag, DdStatCard, DdChampionCard, DdAvatar, DdBadge,
+  DdListCell, DdCell, DdCellGroup, DdCountDown, DdDivider,
+  DdImage, DdProgress, DdSkeleton, DdEmptyState, DdStep, DdSteps,
+  DdModal, DdActionSheet, DdToast, DdAlert, DdLoading,
+  DdDialog, DdOverlay, DdPopup, DdPopover, DdPopoverItem,
+  DdSwipeAction, DdSwipe, DdSwipeItem, DdPullRefresh, DdLoadmore,
+  DdCapsuleButton, DdMiniProgramNavbar,
+}
+
+export function install(app: App) {
+  Object.entries(components).forEach(([name, comp]) => {
+    app.component(name, comp)
+  })
+}
+
+export default { install }
+
+// 全量具名导出
+export {
+  components,
+  DdButton, DdInput, DdSwitch, DdCheckbox, DdRadio,
+  DdSearchBar, DdSlider, DdStepper, DdDatePicker, DdField,
+  DdPicker, DdRate, DdUpload, DdIcon,
+  DdNavigation, DdTopNavbar, DdSegmentedTab, DdSwipeableTab,
+  DdDrawer, DdTabbar, DdTabbarItem, DdBacktop,
+  DdCollapse, DdCollapseItem, DdDropdownMenu, DdDropdownItem,
+  DdCard, DdRoomCard, DdFeatureGrid, DdSticky,
+  DdTag, DdStatCard, DdChampionCard, DdAvatar, DdBadge,
+  DdListCell, DdCell, DdCellGroup, DdCountDown, DdDivider,
+  DdImage, DdProgress, DdSkeleton, DdEmptyState, DdStep, DdSteps,
+  DdModal, DdActionSheet, DdToast, DdAlert, DdLoading,
+  DdDialog, DdOverlay, DdPopup, DdPopover, DdPopoverItem,
+  DdSwipeAction, DdSwipe, DdSwipeItem, DdPullRefresh, DdLoadmore,
+  DdCapsuleButton, DdMiniProgramNavbar,
+}
+
+export * from './libs/utils'
+
+// 图标元数据（供 demo/文档消费，与 dd-icon.vue 内 SCSS &-- 规则保持一致）
+export { iconNames, iconGroups } from './components/dd-icon/dd-icon.vue'

package/libs/utils.ts

@@ -0,0 +1,106 @@
+// ============================================================
+// DidaoUI-uniapp Utility Functions
+// ============================================================
+
+// 平台检测
+// ponytail: vue-tsc 不识别 #ifdef 注释，四个 const 块会被视为重复声明，
+// 故改为单次 let 声明 + 条件编译赋值。代价：失去编译期常量的 tree-shake
+// （升级路径：改用 process.env.UNI_PLATFORM 判定）。
+export let isH5 = false
+export let isMP = false
+export let isMPWeixin = false
+export let isMPToutiao = false
+export let isApp = false
+
+// #ifdef H5
+isH5 = true
+// #endif
+// #ifdef MP-WEIXIN
+isMP = true
+isMPWeixin = true
+// #endif
+// #ifdef MP-TOUTIAO
+isMP = true
+isMPToutiao = true
+// #endif
+// #ifdef APP-PLUS
+isApp = true
+// #endif
+
+// 防抖
+export function debounce<T extends (...args: any[]) => any>(
+  fn: T,
+  delay = 300
+): (...args: Parameters<T>) => void {
+  let timer: ReturnType<typeof setTimeout> | null = null
+  return (...args: Parameters<T>) => {
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), delay)
+  }
+}
+
+// 节流
+export function throttle<T extends (...args: any[]) => any>(
+  fn: T,
+  delay = 300
+): (...args: Parameters<T>) => void {
+  let last = 0
+  return (...args: Parameters<T>) => {
+    const now = Date.now()
+    if (now - last >= delay) {
+      last = now
+      fn(...args)
+    }
+  }
+}
+
+// rpx → px (仅 H5 需要)
+export function rpx2px(rpx: number): number {
+  // #ifdef H5
+  const screenWidth = window.screen.width
+  return (rpx / 750) * screenWidth
+  // #endif
+  // #ifndef H5
+  return rpx
+  // #endif
+}
+
+// 获取状态栏高度
+export function getStatusBarHeight(): number {
+  // #ifdef H5
+  return 0
+  // #endif
+  // ponytail: 运行时兜底 —— 条件编译失效时（如 H5 构建配置错误），
+  // 防止走到 MP/APP 分支拿到非零 statusBarHeight
+  // #ifndef H5
+  const sysInfo = uni.getWindowInfo()
+  return sysInfo.statusBarHeight || 20
+  // #endif
+}
+
+// 获取胶囊按钮位置信息 (仅微信小程序)
+export function getMenuButtonBoundingClientRect() {
+  // #ifdef MP-WEIXIN
+  return uni.getMenuButtonBoundingClientRect()
+  // #endif
+  // #ifndef MP-WEIXIN
+  return null
+  // #endif
+}
+
+// 查询节点尺寸
+export function getRect(selector: string): Promise<UniApp.NodeInfo> {
+  return new Promise((resolve) => {
+    uni.createSelectorQuery()
+      .select(selector)
+      .boundingClientRect((rect) => {
+        resolve(rect as UniApp.NodeInfo)
+      })
+      .exec()
+  })
+}
+
+// 获取事件值 (跨端兼容)
+export function getEventValue(e: any): string {
+  return e?.detail?.value ?? e?.target?.value ?? ''
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@didaoktv/didaoui-uniapp",
+  "version": "1.0.0",
+  "description": "帝到KTV UniApp 组件库",
+  "main": "index.ts",
+  "types": "index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./uni.scss": "./uni.scss",
+    "./scss/variables": "./scss/_variables.scss",
+    "./scss/mixins": "./scss/_mixins.scss",
+    "./scss/functions": "./scss/_functions.scss",
+    "./components/*": "./components/*"
+  },
+  "files": [
+    "components/",
+    "scss/",
+    "libs/",
+    "index.ts",
+    "uni.scss"
+  ],
+  "scripts": {
+    "dev:h5": "cd ../DidaoUI-uniapp-docs/h5-demo && npm run dev:h5",
+    "build:docs": "cd ../DidaoUI-uniapp-docs && npm run build",
+    "type-check": "vue-tsc --noEmit",
+    "prepublishOnly": "node -e \"const p=require('./package.json');if(p.publishConfig&&p.publishConfig.access==='public'){process.exit(0)}console.error('publishConfig.access must be public');process.exit(1)\""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "vue": "^3.4.0",
+    "vue-tsc": "^2.0.0",
+    "typescript": "^5.4.0",
+    "sass": "^1.70.0",
+    "@dcloudio/types": "^3.4.8"
+  },
+  "keywords": [
+    "uniapp",
+    "vue3",
+    "ui",
+    "component-library",
+    "typescript",
+    "didaoktv"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/didaoktv/didaoui-uniapp"
+  },
+  "sideEffects": [
+    "*.scss",
+    "*.css"
+  ]
+}

package/scss/_functions.scss

@@ -0,0 +1,68 @@
+// ============================================================
+// DidaoUI-uniapp SCSS Functions
+// ============================================================
+
+// px → rpx 转换 (750rpx = 375px 屏幕宽度)
+@function dd-px-to-rpx($px) {
+  @return $px * 2rpx;
+}
+
+// 颜色变暗
+@function dd-darken($color, $amount) {
+  @return darken($color, $amount);
+}
+
+// 颜色变亮
+@function dd-lighten($color, $amount) {
+  @return lighten($color, $amount);
+}
+
+// 色阶获取
+@function dd-color($name, $level: 500) {
+  $map: (
+    primary: (
+      50: $dd-primary-50, 100: $dd-primary-100, 200: $dd-primary-200,
+      300: $dd-primary-300, 400: $dd-primary-400, 500: $dd-primary-500,
+      600: $dd-primary-600, 700: $dd-primary-700, 800: $dd-primary-800,
+      900: $dd-primary-900,
+    ),
+    accent: (
+      50: $dd-accent-50, 100: $dd-accent-100, 200: $dd-accent-200,
+      300: $dd-accent-300, 400: $dd-accent-400, 500: $dd-accent-500,
+      600: $dd-accent-600, 700: $dd-accent-700, 800: $dd-accent-800,
+      900: $dd-accent-900,
+    ),
+    neutral: (
+      50: $dd-neutral-50, 100: $dd-neutral-100, 200: $dd-neutral-200,
+      300: $dd-neutral-300, 400: $dd-neutral-400, 500: $dd-neutral-500,
+      600: $dd-neutral-600, 700: $dd-neutral-700, 800: $dd-neutral-800,
+      900: $dd-neutral-900,
+    ),
+    success: (
+      50: $dd-success-50, 100: $dd-success-100, 200: $dd-success-200,
+      300: $dd-success-300, 400: $dd-success-400, 500: $dd-success-500,
+      600: $dd-success-600, 700: $dd-success-700, 800: $dd-success-800,
+      900: $dd-success-900,
+    ),
+    warning: (
+      50: $dd-warning-50, 100: $dd-warning-100, 200: $dd-warning-200,
+      300: $dd-warning-300, 400: $dd-warning-400, 500: $dd-warning-500,
+      600: $dd-warning-600, 700: $dd-warning-700, 800: $dd-warning-800,
+      900: $dd-warning-900,
+    ),
+    error: (
+      50: $dd-error-50, 100: $dd-error-100, 200: $dd-error-200,
+      300: $dd-error-300, 400: $dd-error-400, 500: $dd-error-500,
+      600: $dd-error-600, 700: $dd-error-700, 800: $dd-error-800,
+      900: $dd-error-900,
+    ),
+    info: (
+      50: $dd-info-50, 100: $dd-info-100, 200: $dd-info-200,
+      300: $dd-info-300, 400: $dd-info-400, 500: $dd-info-500,
+      600: $dd-info-600, 700: $dd-info-700, 800: $dd-info-800,
+      900: $dd-info-900,
+    ),
+  );
+  $group: map-get($map, $name);
+  @return map-get($group, $level);
+}

package/scss/_mixins.scss

@@ -0,0 +1,154 @@
+// ============================================================
+// DidaoUI-uniapp SCSS Mixins
+// ============================================================
+
+// 玻璃拟态 (H5: backdrop-filter; MP: 降级为 solid bg)
+@mixin dd-glass($intensity: default) {
+  $blur: $dd-glass-blur;
+  @if $intensity == sm { $blur: $dd-glass-blur-sm; }
+  @else if $intensity == md { $blur: $dd-glass-blur-md; }
+  @else if $intensity == lg { $blur: $dd-glass-blur-lg; }
+  background: $dd-glass-bg;
+  border: 1px solid $dd-glass-border;
+  /* #ifdef H5 */
+  backdrop-filter: blur($blur);
+  -webkit-backdrop-filter: blur($blur);
+  /* #endif */
+}
+
+@mixin dd-glass-strong {
+  background: $dd-glass-bg-strong;
+  border: 1px solid $dd-glass-border;
+  /* #ifdef H5 */
+  backdrop-filter: blur($dd-glass-blur);
+  -webkit-backdrop-filter: blur($dd-glass-blur);
+  /* #endif */
+}
+
+// 发光阴影 — 支持 size: sm / md / lg
+@mixin dd-glow($color: gold, $size: md) {
+  $shadows: (
+    gold-sm: $dd-shadow-glow-gold-sm,
+    gold-md: $dd-shadow-glow-gold-md,
+    gold-lg: $dd-shadow-glow-gold-lg,
+    blue-sm: $dd-shadow-glow-blue-sm,
+    blue-md: $dd-shadow-glow-blue-md,
+    blue-lg: $dd-shadow-glow-blue-lg,
+    success-sm: $dd-shadow-glow-success-sm,
+    success-md: $dd-shadow-glow-success-md,
+    success-lg: $dd-shadow-glow-success-lg,
+    warning-sm: $dd-shadow-glow-warning-sm,
+    warning-md: $dd-shadow-glow-warning-md,
+    warning-lg: $dd-shadow-glow-warning-lg,
+    error-sm: $dd-shadow-glow-error-sm,
+    error-md: $dd-shadow-glow-error-md,
+    error-lg: $dd-shadow-glow-error-lg,
+    info-sm: $dd-shadow-glow-info-sm,
+    info-md: $dd-shadow-glow-info-md,
+    info-lg: $dd-shadow-glow-info-lg,
+    vip-sm: $dd-shadow-glow-vip-sm,
+    vip-md: $dd-shadow-glow-vip-md,
+    vip-lg: $dd-shadow-glow-vip-lg,
+  );
+  $key: $color + '-' + $size;
+  box-shadow: map-get($shadows, $key);
+}
+
+// 文字渐变
+@mixin dd-text-gradient($color: gold) {
+  $gradients: (
+    gold: $dd-gradient-text-gold,
+    'gold-light': $dd-gradient-text-gold-light,
+    blue: $dd-gradient-text-blue,
+  );
+  background: map-get($gradients, $color);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+// 文本溢出省略
+@mixin dd-ellipsis($lines: 1) {
+  @if $lines == 1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  } @else {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $lines;
+    overflow: hidden;
+  }
+}
+
+// 安全区域
+@mixin dd-safe-area-top {
+  padding-top: var(--status-bar-height, 20px);
+}
+
+@mixin dd-safe-area-bottom {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+// 1px 边框 (retina)
+@mixin dd-hairline-bottom($color: $dd-border-default) {
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 1px;
+    background: $color;
+    transform: scaleY(0.5);
+    transform-origin: 0 100%;
+  }
+}
+
+@mixin dd-hairline-top($color: $dd-border-default) {
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 1px;
+    background: $color;
+    transform: scaleY(0.5);
+    transform-origin: 0 0;
+  }
+}
+
+// flex 居中
+@mixin dd-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin dd-flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+// 过渡：arglist 直传
+// 支持单属性 dd-transition(transform 0.3s ease) 与多属性
+// dd-transition(opacity 0.3s, transform 0.3s)；旧的位置参数写法
+// (transform, 0.3s, ease) 会把第二段时间值当成 CSS delay，造成隐性延时
+@mixin dd-transition($args...) {
+  @if length($args) == 0 {
+    transition: all 0.3s linear;
+  } @else {
+    transition: $args;
+  }
+}
+
+// 禁止点击
+@mixin dd-no-touch {
+  pointer-events: none;
+  user-select: none;
+}