@didaoktv/didaoui-uniapp 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 帝到KTV
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,89 @@
+# @didaoktv/didaoui-uniapp
+
+> 帝到KTV UniApp 组件库 — 帝王金 · 皇家蓝 · 抖音商城风
+
+专为 KTV 场景打造的 UniApp 组件库。
+
+## 特性
+
+- **帝王级配色** — 帝王金 `#F5A623` + 皇家蓝 `#2D4BA0` 双主色，暗色主题默认
+- **玻璃拟态设计** — 多层级玻璃拟态效果，打造高端夜店沉浸感
+- **61 个精心打磨的组件** — 覆盖表单、导航、布局、数据展示、浮层反馈、交互六大类
+- **Vue3 + TypeScript** — 完整类型定义，Composition API
+- **多端兼容** — H5 / 微信小程序 / 抖音小程序 / Android / iOS
+
+## 安装
+
+```bash
+npm install @didaoktv/didaoui-uniapp
+```
+
+## 快速开始
+
+### 全局引入
+
+```ts
+import { createSSRApp } from 'vue'
+import App from './App.vue'
+import DdktvUI from '@didaoktv/didaoui-uniapp'
+import '@didaoktv/didaoui-uniapp/uni.scss'
+
+export function createApp() {
+  const app = createSSRApp(App)
+  app.use(DdktvUI)
+  return { app }
+}
+```
+
+### 按需引入
+
+```vue
+<script setup lang="ts">
+import { DdButton, DdInput } from '@didaoktv/didaoui-uniapp'
+</script>
+
+<template>
+  <dd-button type="primary">预订包房</dd-button>
+  <dd-input v-model="value" placeholder="请输入" />
+</template>
+```
+
+## 组件分类
+
+| 分类    | 数量 | 组件                                                                                                                                            |
+| ----- | -- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| 表单输入  | 13 | Button, Input, Field, Switch, Checkbox, Radio, Stepper, SearchBar, Slider, DatePicker, Picker, Rate, Upload                                   |
+| 导航    | 12 | Navigation, TopNavbar, SwipeableTab, SegmentedTab, Drawer, Tabbar, TabbarItem, Backtop, Collapse, CollapseItem, DropdownMenu, DropdownItem    |
+| 布局    | 4  | Card, RoomCard, FeatureGrid, Sticky                                                                                                           |
+| 数据展示  | 16 | Tag, StatCard, ChampionCard, Avatar, Badge, ListCell, Cell, CellGroup, CountDown, Divider, Image, Progress, Skeleton, EmptyState, Step, Steps |
+| 浮层反馈  | 11 | Modal, ActionSheet, Toast, Alert, Loading, Dialog, Overlay, Popup, Popover, PopoverItem, SwipeAction                                          |
+| 交互    | 3  | Swipe, SwipeItem, PullRefresh                                                                                                                 |
+| 小程序专属 | 2  | CapsuleButton, MiniProgramNavbar                                                                                                              |
+
+## 设计规范
+
+### 色彩系统
+
+- **帝王金** `#F5A623` — 主操作、强调、高光
+- **皇家蓝** `#2D4BA0` — 辅助色、深色基底
+- **星空黑** `#0A0A0A` — 页面底色
+- 语义色: success `#4CAF50` / warning `#F9A825` / error `#E53935` / info `#00BCD4`
+
+### 字体
+
+- 主字体: 'Noto Sans SC', sans-serif
+- 展示字体: 'Playfair Display', serif
+- 等宽字体: 'JetBrains Mono', monospace
+- 字号阶梯: 12 / 14 / 16 / 18 / 20 / 24 / 32 px
+
+### 圆角
+
+2 / 4 / 8 / 12 / 16 / 9999 px (Vant 对齐小圆角)
+
+### 间距
+
+4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px (8pt 基础网格)
+
+## License
+
+[MIT](./LICENSE) © 帝到KTV

package/components/dd-action-sheet/dd-action-sheet.vue

@@ -0,0 +1,207 @@
+<template>
+  <view class="dd-action-sheet">
+    <view
+      class="dd-action-sheet__mask"
+      :class="{ 'dd-action-sheet__mask--show': modelValue }"
+      @click="onMaskClick"
+    ></view>
+    <view class="dd-action-sheet__panel" :class="{ 'dd-action-sheet__panel--show': modelValue }">
+      <view class="dd-action-sheet__handle"></view>
+      <view v-if="title" class="dd-action-sheet__title">
+        <text class="dd-action-sheet__title-text">{{ title }}</text>
+      </view>
+
+      <view class="dd-action-sheet__grid">
+        <view
+          v-for="(item, i) in items"
+          :key="i"
+          class="dd-action-sheet__item"
+          :style="{ width: 100 / columns + '%' }"
+          @click="onSelect(item, i)"
+        >
+          <view class="dd-action-sheet__icon">
+            <dd-icon v-if="item.icon" :name="item.icon" class="dd-action-sheet__icon-text" />
+            <text v-else class="dd-action-sheet__icon-text">{{ item.name.charAt(0) }}</text>
+          </view>
+          <text class="dd-action-sheet__name">{{ item.name }}</text>
+        </view>
+      </view>
+
+      <view v-if="showCancel" class="dd-action-sheet__cancel" @click="onClose">
+        <text class="dd-action-sheet__cancel-text">{{ cancelText }}</text>
+      </view>
+      <view class="dd-action-sheet__safe-bottom"></view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface ActionItem {
+  name: string
+  icon?: string
+  color?: string
+}
+
+interface Props {
+  modelValue?: boolean
+  items?: ActionItem[]
+  columns?: number
+  title?: string
+  showCancel?: boolean
+  cancelText?: string
+  closeOnClickModal?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  items: () => [],
+  columns: 4,
+  title: '',
+  showCancel: true,
+  cancelText: '取消',
+  closeOnClickModal: true,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'select', item: ActionItem, index: number): void
+  (e: 'close'): void
+}>()
+
+function close() {
+  emit('update:modelValue', false)
+  emit('close')
+}
+
+function onMaskClick() {
+  if (!props.closeOnClickModal) return
+  close()
+}
+
+function onSelect(item: ActionItem, index: number) {
+  emit('select', item, index)
+  close()
+}
+
+function onClose() {
+  close()
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-action-sheet {
+  &__mask {
+    position: fixed;
+    inset: 0;
+    background: $dd-color-overlay-strong;
+    opacity: 0;
+    visibility: hidden;
+    z-index: 1000;
+    @include dd-transition(opacity 0.3s, visibility 0.3s);
+
+    &--show {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  // ponytail: glassmorphism 背景 (dd-glass)，区别于 modal 的实心 elevated 背景
+  &__panel {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transform: translateY(100%);
+    z-index: 1001;
+    @include dd-glass;
+    border-radius: $dd-radius-2xl $dd-radius-2xl 0 0;
+    padding: $dd-space-3 $dd-space-4 $dd-space-4;
+    @include dd-transition(transform 0.3s ease-out);
+
+    &--show {
+      transform: translateY(0);
+    }
+  }
+
+  &__handle {
+    width: 72rpx;
+    height: 8rpx;
+    border-radius: $dd-radius-full;
+    background: rgba(255, 255, 255, 0.3);
+    margin: 8rpx auto 16rpx;
+    opacity: 0.6;
+  }
+
+  &__title {
+    text-align: center;
+    margin-bottom: $dd-space-3;
+  }
+
+  &__title-text {
+    font-size: $dd-font-size-h4;
+    font-weight: $dd-font-weight-h4;
+    color: $dd-text-primary;
+  }
+
+  &__grid {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: $dd-space-2 0;
+    box-sizing: border-box;
+  }
+
+  &__icon {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 50%;
+    background: $dd-gradient-primary;
+    @include dd-flex-center;
+    @include dd-glow(gold);
+  }
+
+  &__icon-text {
+    font-size: 44rpx;
+    font-weight: 700;
+    color: $dd-color-white;
+    line-height: 1;
+  }
+
+  &__name {
+    margin-top: 8rpx;
+    font-size: $dd-font-size-caption;
+    color: $dd-text-secondary;
+    max-width: 128rpx;
+    @include dd-ellipsis(1);
+  }
+
+  &__cancel {
+    margin-top: $dd-space-3;
+    height: 96rpx;
+    border-radius: $dd-radius-xl;
+    background: $dd-surface-container-high;
+    @include dd-flex-center;
+    @include dd-hairline-top($dd-border-strong);
+  }
+
+  &__cancel-text {
+    font-size: $dd-font-size-body;
+    color: $dd-text-primary;
+    font-weight: $dd-font-weight-body;
+  }
+
+  &__safe-bottom {
+    @include dd-safe-area-bottom;
+  }
+}
+</style>

package/components/dd-alert/dd-alert.vue

@@ -0,0 +1,240 @@
+<template>
+  <view class="dd-alert">
+    <view
+      class="dd-alert__mask"
+      :class="{ 'dd-alert__mask--show': modelValue }"
+      @click="onMaskClick"
+    ></view>
+    <view class="dd-alert__card" :class="{ 'dd-alert__card--show': modelValue }">
+      <view class="dd-alert__icon" :class="[`dd-alert__icon--${type}`]">
+        <dd-icon :name="iconName" class="dd-alert__icon-text" />
+      </view>
+      <text v-if="title" class="dd-alert__title">{{ title }}</text>
+      <text v-if="message" class="dd-alert__message">{{ message }}</text>
+      <view class="dd-alert__actions" :class="{ 'dd-alert__actions--single': !showCancel }">
+        <view v-if="showCancel" class="dd-alert__btn dd-alert__btn--cancel" @click="onCancel">
+          <text class="dd-alert__btn-text dd-alert__btn-text--cancel">{{ cancelText }}</text>
+        </view>
+        <view class="dd-alert__btn dd-alert__btn--confirm" @click="onConfirm">
+          <text class="dd-alert__btn-text dd-alert__btn-text--confirm">{{ confirmText }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+type AlertType = 'info' | 'success' | 'warning' | 'error' | 'confirm'
+
+interface Props {
+  modelValue?: boolean
+  type?: AlertType
+  title?: string
+  message?: string
+  showCancel?: boolean
+  confirmText?: string
+  cancelText?: string
+  closeOnClickModal?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  type: 'info',
+  title: '',
+  message: '',
+  showCancel: true,
+  confirmText: '确定',
+  cancelText: '取消',
+  closeOnClickModal: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+}>()
+
+const iconName = computed(() => {
+  const map: Record<AlertType, string> = {
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'fail',
+    confirm: 'question',
+  }
+  return map[props.type]
+})
+
+function close() {
+  emit('update:modelValue', false)
+}
+
+function onConfirm() {
+  emit('confirm')
+  close()
+}
+
+function onCancel() {
+  emit('cancel')
+  close()
+}
+
+function onMaskClick() {
+  // 默认 mask 不关闭，防止误操作
+  if (!props.closeOnClickModal) return
+  close()
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-alert {
+  &__mask {
+    position: fixed;
+    inset: 0;
+    background: $dd-color-overlay-strong;
+    opacity: 0;
+    visibility: hidden;
+    z-index: 1000;
+    @include dd-transition(opacity 0.25s, visibility 0.25s);
+
+    &--show {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &__card {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 0;
+    visibility: hidden;
+    z-index: 1001;
+    width: 560rpx;
+    background: $dd-bg-elevated;
+    border: 1px solid $dd-border-default;
+    border-radius: $dd-radius-xl;
+    box-shadow: $dd-shadow-4;
+    padding: $dd-space-5 $dd-space-5 $dd-space-4;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    @include dd-transition(transform 0.25s ease, opacity 0.25s ease, visibility 0.25s);
+
+    &--show {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &__icon {
+    width: 112rpx;
+    height: 112rpx;
+    border-radius: 50%;
+    @include dd-flex-center;
+    margin-bottom: $dd-space-3;
+
+    &--info {
+      background: $dd-gradient-accent;
+      box-shadow: 0 0 40rpx rgba(45, 75, 160, 0.4);
+    }
+
+    &--success {
+      background: $dd-gradient-success;
+      box-shadow: 0 0 40rpx rgba(76, 175, 80, 0.4);
+    }
+
+    &--warning {
+      background: $dd-gradient-warning;
+      box-shadow: 0 0 40rpx rgba(249, 168, 37, 0.4);
+    }
+
+    &--error {
+      background: $dd-gradient-error;
+      box-shadow: 0 0 40rpx rgba(229, 57, 53, 0.4);
+    }
+
+    &--confirm {
+      background: $dd-gradient-primary-wide;
+      @include dd-glow(gold);
+    }
+  }
+
+  &__icon-text {
+    color: $dd-color-white;
+    font-size: 56rpx;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  &__title {
+    font-size: $dd-font-size-h4;
+    font-weight: $dd-font-weight-h4;
+    color: $dd-text-primary;
+    text-align: center;
+    line-height: $dd-line-height-h4;
+  }
+
+  &__message {
+    margin-top: $dd-space-2;
+    font-size: $dd-font-size-body;
+    color: $dd-text-secondary;
+    text-align: center;
+    line-height: $dd-line-height-body;
+  }
+
+  &__actions {
+    display: flex;
+    gap: $dd-space-3;
+    width: 100%;
+    margin-top: $dd-space-5;
+
+    &--single {
+      gap: 0;
+    }
+  }
+
+  &__btn {
+    flex: 1;
+    border-radius: $dd-radius-full;
+    @include dd-flex-center;
+
+    &--cancel {
+      height: 88rpx;
+      background: $dd-neutral-700;
+      border: 1px solid $dd-border-strong;
+    }
+
+    &--confirm {
+      height: 88rpx;
+      background: $dd-gradient-primary;
+    }
+  }
+
+  &__actions--single &__btn--confirm {
+    height: 96rpx;
+  }
+
+  &__btn-text {
+    font-size: $dd-font-size-body;
+    font-weight: $dd-font-weight-body;
+
+    &--cancel {
+      color: $dd-text-secondary;
+    }
+
+    &--confirm {
+      color: $dd-neutral-900;
+      font-weight: 700;
+    }
+  }
+}
+</style>