@didaoktv/didaoui-uniapp 1.0.0 → 1.2.0

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

@@ -187,7 +187,7 @@ watch(() => props.options, measure)
   position: absolute;
   bottom: 0;
   left: 0;
-  height: 4rpx;
+  height: $dd-space-1;
   background: $dd-gradient-primary-h;
   border-radius: $dd-radius-full;
   box-shadow: $dd-shadow-glow-gold-sm;

package/components/dd-tabbar-item/dd-tabbar-item.vue

@@ -68,7 +68,7 @@ function onClick() {
   height: 100%;
   @include dd-flex-center;
   flex-direction: column;
-  gap: 4rpx;
+  gap: $dd-space-1;
   box-sizing: border-box;
   @include dd-transition(color 0.3s);
 
@@ -95,9 +95,9 @@ function onClick() {
     top: 0;
     right: 0;
     transform: translate(40%, -50%);
-    min-width: 32rpx;
-    height: 32rpx;
-    padding: 0 8rpx;
+    min-width: $dd-space-4;
+    height: $dd-space-4;
+    padding: 0 $dd-space-1;
     border-radius: $dd-radius-full;
     background: $dd-error;
     @include dd-flex-center;
@@ -111,10 +111,10 @@ function onClick() {
 
   &__dot {
     position: absolute;
-    top: -4rpx;
-    right: -4rpx;
-    width: 16rpx;
-    height: 16rpx;
+    top: -$dd-space-1;
+    right: -$dd-space-1;
+    width: $dd-space-2;
+    height: $dd-space-2;
     border-radius: 50%;
     background: $dd-error;
   }

package/components/dd-tag/dd-tag.vue

@@ -7,6 +7,7 @@
       `dd-tag--${size}`,
       { 'dd-tag--round': round, 'dd-tag--closable': closable },
     ]"
+    :style="customStyle"
     @click="onClick"
   >
     <view v-if="type === 'dot'" class="dd-tag__dot"></view>
@@ -18,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
 
 interface Props {
@@ -28,6 +29,8 @@ interface Props {
   round?: boolean
   closable?: boolean
   text?: string
+  bgColor?: string
+  color?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,6 +40,19 @@ const props = withDefaults(defineProps<Props>(), {
   round: false,
   closable: false,
   text: '',
+  bgColor: '',
+  color: '',
+})
+
+// 自定义配色：bgColor 覆盖背景（outlined 时覆盖边框），color 覆盖文字
+const customStyle = computed(() => {
+  const s: Record<string, string> = {}
+  if (props.bgColor) {
+    if (props.type === 'outlined') s.borderColor = props.bgColor
+    else s.background = props.bgColor
+  }
+  if (props.color) s.color = props.color
+  return s
 })
 
 const emit = defineEmits<{ (e: 'click', val: Event): void; (e: 'close', val: Event): void }>()

package/components/dd-text/dd-text.vue

@@ -0,0 +1,250 @@
+<template>
+    <view
+        class="dd-text"
+        :class="[customClass]"
+        v-if="show"
+        :style="wrapStyle"
+        @tap="clickHandler"
+    >
+        <text
+            :class="['dd-text__price', type && `dd-text__value--${type}`]"
+            v-if="mode === 'price'"
+            :style="[valueStyle]"
+            >￥</text
+        >
+        <view class="dd-text__prefix-icon" v-if="prefixIcon">
+            <dd-icon
+                :name="prefixIcon"
+                :customStyle="addStyle(iconStyle)"
+            ></dd-icon>
+        </view>
+        <dd-link
+            v-if="mode === 'link'" class="dd-text__value"
+            :style="{fontWeight: valueStyle.fontWeight, wordWrap: valueStyle.wordWrap, fontSize: valueStyle.fontSize}"
+            :class="[type && `dd-text__value--${type}`,lines && `dd-line-${lines}`]" :text="value"
+            :href="href"
+            underLine
+        ></dd-link>
+        <template v-else-if="openType && isMp">
+            <button
+                class="dd-reset-button dd-text__value"
+                :style="[valueStyle]"
+                :data-index="index"
+                :openType="openType"
+                @getuserinfo="onGetUserInfo"
+                @contact="onContact"
+                @getphonenumber="onGetPhoneNumber"
+                @error="onError"
+                @launchapp="onLaunchApp"
+                @opensetting="onOpenSetting"
+                :lang="lang"
+                :session-from="sessionFrom"
+                :send-message-title="sendMessageTitle"
+                :send-message-path="sendMessagePath"
+                :send-message-img="sendMessageImg"
+                :show-message-card="showMessageCard"
+                :app-parameter="appParameter"
+            >
+                {{ value }}
+            </button>
+        </template>
+        <text
+            v-else
+            class="dd-text__value"
+            :style="[valueStyle]"
+            :class="[
+                type && `dd-text__value--${type}`,
+                lines && `dd-line-${lines}`
+            ]"
+            >{{ value }}</text
+        >
+        <view class="dd-text__suffix-icon" v-if="suffixIcon">
+            <dd-icon
+                :name="suffixIcon"
+                :customStyle="addStyle(iconStyle)"
+            ></dd-icon>
+        </view>
+    </view>
+</template>
+
+<script>
+import { props } from './props'
+import value from './value.js'
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { buttonMixin } from '../../libs/mixin/button';
+import { openType } from '../../libs/mixin/openType';
+import { addStyle, addUnit, deepMerge } from '../../libs/function/index';
+
+function normalizeLineHeight(value) {
+    const valueString = String(value).trim()
+    const numericValue = Number(valueString)
+    const isUnitless =
+        /^[+-]?(?:\d+\.?\d*|\.\d+)$/.test(valueString) &&
+        numericValue > 0 &&
+        numericValue < 10
+
+    return isUnitless ? valueString : addUnit(value)
+}
+
+/**
+ * Text 文本
+ * @description 此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。
+ * @property {String} 					type		主题颜色
+ * @property {Boolean} 					show		是否显示（默认 true ）
+ * @property {String | Number}			text		显示的值
+ * @property {String}					prefixIcon	前置图标
+ * @property {String} 					suffixIcon	后置图标
+ * @property {String} 					mode		文本处理的匹配模式 text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接
+ * @property {String} 					href		mode=link下，配置的链接
+ * @property {String | Function} 		format		格式化规则
+ * @property {Boolean} 					call		mode=phone时，点击文本是否拨打电话（默认 false ）
+ * @property {String} 					openType	小程序的打开方式
+ * @property {Boolean} 					bold		是否粗体，默认normal（默认 false ）
+ * @property {Boolean} 					block		是否块状（默认 false ）
+ * @property {String | Number} 			lines		文本显示的行数，如果设置，超出此行数，将会显示省略号
+ * @property {String} 					color		文本颜色（默认 '#303133' ）
+ * @property {String | Number} 			size		字体大小（默认 15 ）
+ * @property {Object | String} 			iconStyle	图标的样式 （默认 {fontSize: '15px'} ）
+ * @property {String} 					decoration	文字装饰，下划线，中划线等，可选值 none|underline|line-through（默认 'none' ）
+ * @property {Object | String | Number}	margin		外边距，对象、字符串，数值形式均可（默认 0 ）
+ * @property {String | Number} 			lineHeight	文本行高，支持带单位值或无单位倍数（如 1.2）
+ * @property {String} 					align		文本对齐方式，可选值left|center|right（默认 'left' ）
+ * @property {String} 					wordWrap	文字换行，可选值break-word|normal|anywhere（默认 'normal' ）
+ * @event {Function} click  点击触发事件
+ * @example <dd-text text="我用十年青春,赴你最后之约"></dd-text>
+ */
+export default {
+    name: 'dd-text',
+    // #ifdef MP
+    mixins: [mpMixin, mixin, value, buttonMixin, openType, props],
+    // #endif
+    // #ifndef MP
+    mixins: [mpMixin, mixin, value, props],
+    // #endif
+	emits: ['click'],
+    computed: {
+        wrapStyle() {
+            let style = {
+                margin: this.margin,
+			    justifyContent: this.align === 'left' ? 'flex-start' : this.align === 'center' ? 'center' : 'flex-end'
+            }
+            // 占满剩余空间
+            if (this.flex1) {
+                style.flex = 1;
+				// #ifndef APP-NVUE
+				style.width = '100%';
+				// #endif
+            }
+			return style;
+        },
+        valueStyle() {
+            const style = {
+                textDecoration: this.decoration,
+                fontWeight: this.bold ? 'bold' : 'normal',
+                wordWrap: this.wordWrap,
+                fontSize: addUnit(this.size)
+            }
+            if (!this.type) {
+                // ponytail: 剥离运行时主题；未传 color 时继承上下文，跟随设计系统文本色
+                style.color = this.color || 'inherit'
+            }
+            this.isNvue && this.lines && (style.lines = this.lines)
+            this.lineHeight &&
+                (style.lineHeight = normalizeLineHeight(this.lineHeight))
+            !this.isNvue && this.block && (style.display = 'block')
+            return deepMerge(style, addStyle(this.customStyle))
+        },
+        isNvue() {
+            let nvue = false
+            // #ifdef APP-NVUE
+            nvue = true
+            // #endif
+            return nvue
+        },
+        isMp() {
+            let mp = false
+            // #ifdef MP
+            mp = true
+            // #endif
+            return mp
+        }
+    },
+    data() {
+        return {}
+    },
+    methods: {
+        addStyle,
+        clickHandler(e) {
+            // 如果为手机号模式，拨打电话
+            if (this.call && this.mode === 'phone') {
+                uni.makePhoneCall({
+                    phoneNumber: this.text
+                })
+            }
+            this.$emit('click', e)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/dd-shared';
+.dd-text {
+    @include flex(row);
+    align-items: center;
+    flex-wrap: nowrap;
+
+    &__price {
+        font-size: 14px;
+        color: $dd-text-secondary;
+    }
+
+    &__value {
+        font-size: 14px;
+        @include flex;
+        color: $dd-text-secondary;
+        flex-wrap: wrap;
+        // flex: 1;
+        text-overflow: ellipsis;
+        align-items: center;
+
+        &--primary {
+            color: $dd-primary-400;
+        }
+
+        &--warning {
+            color: $dd-warning-400;
+        }
+
+        &--success {
+            color: $dd-success-400;
+        }
+
+        &--info {
+            color: $dd-info-400;
+        }
+
+        &--error {
+            color: $dd-error-400;
+        }
+
+        &--main {
+            color: $dd-text-primary;
+        }
+
+        &--content {
+            color: $dd-text-secondary;
+        }
+
+        &--tips {
+            color: $dd-text-tertiary;
+        }
+
+        &--light {
+            color: $dd-text-tertiary;
+        }
+    }
+}
+</style>

package/components/dd-text/props.js

@@ -0,0 +1,120 @@
+import { defineMixin } from '../../libs/vue'
+import TextDefaultProps from './text'
+import { registerComponentProps } from '../../libs/config/props.js'
+
+const defProps = registerComponentProps(TextDefaultProps)
+export const props = defineMixin({
+    props: {
+        // 主题颜色
+        type: {
+            type: String,
+            default: () => defProps.text.type
+        },
+        // 是否显示
+        show: {
+            type: Boolean,
+            default: () => defProps.text.show
+        },
+        // 显示的值
+        text: {
+            type: [String, Number],
+            default: () => defProps.text.text
+        },
+        // 前置图标
+        prefixIcon: {
+            type: String,
+            default: () => defProps.text.prefixIcon
+        },
+        // 后置图标
+        suffixIcon: {
+            type: String,
+            default: () => defProps.text.suffixIcon
+        },
+        // 文本处理的匹配模式
+        // text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接
+        mode: {
+            type: String,
+            default: () => defProps.text.mode
+        },
+        // mode=link下，配置的链接
+        href: {
+            type: String,
+            default: () => defProps.text.href
+        },
+        // 格式化规则
+        format: {
+            type: [String, Function],
+            default: () => defProps.text.format
+        },
+        // mode=phone时，点击文本是否拨打电话
+        call: {
+            type: Boolean,
+            default: () => defProps.text.call
+        },
+        // 小程序的打开方式
+        openType: {
+            type: String,
+            default: () => defProps.text.openType
+        },
+        // 是否粗体，默认normal
+        bold: {
+            type: Boolean,
+            default: () => defProps.text.bold
+        },
+        // 是否块状
+        block: {
+            type: Boolean,
+            default: () => defProps.text.block
+        },
+        // 文本显示的行数，如果设置，超出此行数，将会显示省略号
+        lines: {
+            type: [String, Number],
+            default: () => defProps.text.lines
+        },
+        // 文本颜色
+        color: {
+            type: String,
+            default: () => defProps.text.color
+        },
+        // 字体大小
+        size: {
+            type: [String, Number],
+            default: () => defProps.text.size
+        },
+        // 图标的样式
+        iconStyle: {
+            type: [Object, String],
+            default: () => defProps.text.iconStyle
+        },
+        // 文字装饰，下划线，中划线等，可选值 none|underline|line-through
+        decoration: {
+            tepe: String,
+            default: () => defProps.text.decoration
+        },
+        // 外边距，对象、字符串，数值形式均可
+        margin: {
+            type: [Object, String, Number],
+            default: () => defProps.text.margin
+        },
+        // 文本行高
+        lineHeight: {
+            type: [String, Number],
+            default: () => defProps.text.lineHeight
+        },
+        // 文本对齐方式，可选值left|center|right
+        align: {
+            type: String,
+            default: () => defProps.text.align
+        },
+        // 文字换行，可选值break-word|normal|anywhere
+        wordWrap: {
+            type: String,
+            default: () => defProps.text.wordWrap
+        },
+		// 占满剩余空间
+		flex1: {
+			type: Boolean,
+			default: () => defProps.text.flex1
+		}
+    }
+})

package/components/dd-text/text.js

@@ -0,0 +1,30 @@
+export default {
+    // text 组件
+    text: {
+        type: '',
+        show: true,
+        text: '',
+        prefixIcon: '',
+        suffixIcon: '',
+        mode: '',
+        href: '',
+        format: '',
+        call: false,
+        openType: '',
+        bold: false,
+        block: false,
+        lines: '',
+        color: '',
+        size: 15,
+        iconStyle: {
+            fontSize: '15px'
+        },
+        decoration: 'none',
+        margin: 0,
+        lineHeight: '',
+        align: 'left',
+        wordWrap: 'normal',
+		flex1: false
+    }
+
+}

package/components/dd-text/value.js

@@ -0,0 +1,87 @@
+import { error, priceFormat, timeFormat } from '../../libs/function/index';
+import test from '../../libs/function/test';
+export default {
+    computed: {
+        // 经处理后需要显示的值
+        value() {
+            const {
+                text,
+                mode,
+                format,
+                href
+            } = this
+            // 价格类型
+            if (mode === 'price') {
+                // 如果text不为金额进行提示
+                if (!/^\d+(\.\d+)?$/.test(text)) {
+                    error('金额模式下，text参数需要为金额格式');
+                }
+                // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的金额格式化处理
+                if (test.func(format)) {
+                    // 如果用户传入的是函数，使用函数格式化
+                    return format(text)
+                }
+                // 如果format非正则，非函数，则使用默认的金额格式化方法进行操作
+                return priceFormat(text, 2)
+            } if (mode === 'date') {
+                // 判断是否合法的日期或者时间戳
+                !test.date(text) && error('日期模式下，text参数需要为日期或时间戳格式')
+                // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的格式化处理
+                if (test.func(format)) {
+                    // 如果用户传入的是函数，使用函数格式化
+                    return format(text)
+                } if (format) {
+                    // 如果format非正则，非函数，则使用默认的时间格式化方法进行操作
+                    return timeFormat(text, format)
+                }
+                // 如果没有设置format，则设置为默认的时间格式化形式
+                return timeFormat(text, 'yyyy-mm-dd')
+            } if (mode === 'phone') {
+                // 判断是否合法的手机号
+                // !test.mobile(text) && error('手机号模式下，text参数需要为手机号码格式')
+                if (test.func(format)) {
+                    // 如果用户传入的是函数，使用函数格式化
+                    return format(text)
+                } if (format === 'encrypt') {
+                    // 如果format为encrypt，则将手机号进行星号加密处理
+                    return `${text.substr(0, 3)}****${text.substr(7)}`
+                }
+                return text
+            } if (mode === 'name') {
+                // 判断是否合法的字符粗
+                !(typeof (text) === 'string') && error('姓名模式下，text参数需要为字符串格式')
+                if (test.func(format)) {
+                    // 如果用户传入的是函数，使用函数格式化
+                    return format(text)
+                } if (format === 'encrypt') {
+                    // 如果format为encrypt，则将姓名进行星号加密处理
+                    return this.formatName(text)
+                }
+                return text
+            } if (mode === 'link') {
+                // 判断是否合法的字符粗
+                !test.url(href) && error('超链接模式下，href参数需要为URL格式')
+                return text
+            }
+            return text
+        }
+    },
+    methods: {
+        // 默认的姓名脱敏规则
+        formatName(name) {
+            let value = ''
+            if (name.length === 2) {
+                value = name.substr(0, 1) + '*'
+            } else if (name.length > 2) {
+                let char = ''
+                for (let i = 0, len = name.length - 2; i < len; i++) {
+                    char += '*'
+                }
+                value = name.substr(0, 1) + char + name.substr(-1, 1)
+            } else {
+                value = name
+            }
+            return value
+        }
+    }
+}

package/components/dd-toast/dd-toast.vue

@@ -171,8 +171,8 @@ const iconName = computed(() => {
   }
 
   &__spinner {
-    width: 64rpx;
-    height: 64rpx;
+    width: $dd-size-icon-xl;
+    height: $dd-size-icon-xl;
     border: 6rpx solid $dd-border-default;
     border-top-color: $dd-primary-400;
     border-radius: 50%;

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

@@ -133,7 +133,7 @@ function onPreview(index: number) {
 .dd-upload {
   display: flex;
   flex-wrap: wrap;
-  gap: 16rpx;
+  gap: $dd-space-2;
 
   &__item {
     position: relative;
@@ -152,8 +152,8 @@ function onPreview(index: number) {
 
   &__delete {
     position: absolute;
-    top: 8rpx;
-    right: 8rpx;
+    top: $dd-space-1;
+    right: $dd-space-1;
     width: 36rpx;
     height: 36rpx;
     border-radius: 50%;
@@ -171,7 +171,7 @@ function onPreview(index: number) {
     border-radius: $dd-radius-md;
     background: $dd-neutral-800;
     color: $dd-text-tertiary;
-    font-size: 48rpx;
+    font-size: $dd-font-size-h1;
     box-sizing: border-box;
     @include dd-transition(background 0.2s);