@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

package/components/wd-avatar/index.scss

@@ -0,0 +1,150 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 默认尺寸
+$avatar-size-normal: var(--wot-avatar-size-normal, $n-36) !default;
+// 大尺寸
+$avatar-size-large: var(--wot-avatar-size-large, $n-56) !default;
+// 中尺寸
+$avatar-size-medium: var(--wot-avatar-size-medium, $n-48) !default;
+// 小尺寸
+$avatar-size-small: var(--wot-avatar-size-small, $n-24) !default;
+// 头像文字颜色
+$avatar-text-color: var(--wot-avatar-text-color, $text-white) !default;
+// 头像文字字重
+$avatar-font-weight: var(--wot-avatar-font-weight, $typography-body-font-weight-strong) !default;
+// 默认文字字号
+$avatar-font-size: var(--wot-avatar-font-size, $typography-title-size-large) !default;
+// 大尺寸文字字号
+$avatar-font-size-large: var(--wot-avatar-font-size-large, $typography-title-size-extra-large) !default;
+// 中尺寸文字字号
+$avatar-font-size-medium: var(--wot-avatar-font-size-medium, $typography-title-size-large) !default;
+// 小尺寸文字字号
+$avatar-font-size-small: var(--wot-avatar-font-size-small, $typography-title-size-main) !default;
+// 默认文字行高
+$avatar-line-height: var(--wot-avatar-line-height, $typography-title-line--height-size-large) !default;
+// 大尺寸文字行高
+$avatar-line-height-large: var(--wot-avatar-line-height-large, $typography-title-line--height-size-extra-large) !default;
+// 中尺寸文字行高
+$avatar-line-height-medium: var(--wot-avatar-line-height-medium, $typography-title-line--height-size-large) !default;
+// 小尺寸文字行高
+$avatar-line-height-small: var(--wot-avatar-line-height-small, $typography-title-line--height-size-main) !default;
+// 头像背景颜色
+$avatar-bg: var(--wot-avatar-bg, $filled-strong) !default;
+// 默认圆角
+$avatar-border-radius: var(--wot-avatar-border-radius, $radius-main) !default;
+// 全圆角
+$avatar-border-radius-full: var(--wot-avatar-border-radius-full, $radius-radius-full) !default;
+// 头像重叠距离
+$avatar-overlap: var(--wot-avatar-overlap) !default;
+// 图标颜色
+$avatar-icon-color: var(--wot-avatar-icon-color, $icon-auxiliary) !default;
+// 文本颜色
+$avatar-color: var(--wot-avatar-color, $text-auxiliary) !default;
+
+@include b(avatar) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: $avatar-size-normal;
+  height: $avatar-size-normal;
+  color: $avatar-text-color;
+  font-weight: $avatar-font-weight;
+  font-size: $avatar-font-size;
+  line-height: $avatar-line-height;
+  text-align: center;
+  background: $avatar-bg;
+  border-radius: $avatar-border-radius;
+  overflow: hidden;
+  user-select: none;
+  vertical-align: middle;
+  flex-shrink: 0;
+  color: $avatar-color;
+
+
+  @include when(round) {
+    border-radius: $avatar-border-radius-full;
+  }
+
+  @include when(square) {
+    border-radius: $avatar-border-radius;
+  }
+
+  @include m(large) {
+    width: $avatar-size-large;
+    height: $avatar-size-large;
+    font-size: $avatar-font-size-large;
+    line-height: $avatar-line-height-large;
+    --wot-avatar-overlap: calc(#{$avatar-size-large} * -0.25);
+  }
+
+  @include m(medium) {
+    width: $avatar-size-medium;
+    height: $avatar-size-medium;
+    font-size: $avatar-font-size-medium;
+    line-height: $avatar-line-height-medium;
+    --wot-avatar-overlap: calc(#{$avatar-size-medium} * -0.25);
+  }
+
+  @include m(normal) {
+    width: $avatar-size-normal;
+    height: $avatar-size-normal;
+    font-size: $avatar-font-size;
+    line-height: $avatar-line-height;
+    --wot-avatar-overlap: calc(#{$avatar-size-normal} * -0.25);
+  }
+
+  @include m(small) {
+    width: $avatar-size-small;
+    height: $avatar-size-small;
+    font-size: $avatar-font-size-small;
+    line-height: $avatar-line-height-small;
+    --wot-avatar-overlap: calc(#{$avatar-size-small} * -0.25);
+  }
+
+  @include e(group-item) {
+    position: relative;
+    flex-shrink: 0;
+    box-sizing: border-box;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &+& {
+      margin-left: $avatar-overlap;
+    }
+
+    @include m(vertical) {
+
+      // 第一个元素不需要负 margin
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &+& {
+        margin-left: 0;
+        margin-top: $avatar-overlap;
+      }
+    }
+
+
+  }
+
+  @include e(text) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  @include edeep(icon) {
+    font-size: inherit;
+    color: $avatar-icon-color;
+  }
+
+  @include edeep(img) {
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+  }
+}

package/components/wd-avatar/types.ts

@@ -0,0 +1,98 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeStringProp } from '../../common/props'
+import type { ImageMode } from '../wd-img/types'
+
+/**
+ * 头像尺寸类型
+ * 可选值: 'large' | 'medium' | 'normal' | 'small'
+ */
+export type AvatarSize = 'large' | 'medium' | 'normal' | 'small'
+
+/**
+ * 头像形状类型
+ * 可选值: 'square' | 'round'
+ */
+export type AvatarShape = 'square' | 'round'
+
+/**
+ * Avatar 组件 Props 定义
+ */
+export const avatarProps = {
+  ...baseProps,
+
+  /**
+   * 图片地址
+   * 类型: string
+   * 默认值: ''
+   */
+  src: makeStringProp(''),
+  /**
+   * 文本内容
+   * 类型: string
+   * 默认值: 空字符串
+   */
+  text: makeStringProp(''),
+  /**
+   * 头像尺寸，支持预设尺寸或自定义大小
+   * 类型: string | number | AvatarSize
+   * 可选值: 'large' | 'medium' | 'normal' | 'small' 或带单位的字符串(如 40px、100rpx)
+   * 默认值: 'normal'
+   */
+  size: {
+    type: [String, Number] as PropType<string | number | AvatarSize>
+  },
+  /**
+   * 头像形状
+   * 类型: AvatarShape
+   * 可选值: 'round' | 'square'
+   * 默认值: 'round'
+   */
+  shape: String as PropType<AvatarShape>,
+  /**
+   * 背景颜色
+   * 类型: string
+   * 默认值: ''
+   */
+  bgColor: makeStringProp(''),
+
+  /**
+   * 文字颜色
+   * 类型: string
+   * 默认值: ''
+   */
+  color: makeStringProp(''),
+
+  /**
+   * 图标名称，用于显示 wd-icon 组件
+   * 类型: string
+   * 默认值: ''
+   */
+  icon: makeStringProp(''),
+
+  /**
+   * 图片加载失败时的占位文本
+   * 类型: string
+   * 默认值: ''
+   */
+  alt: makeStringProp(''),
+
+  /**
+   * 图片填充模式，与 uni-app image 组件的 mode 属性一致
+   * 类型: ImageMode
+   * 默认值: 'aspectFill'
+   */
+  mode: makeStringProp<ImageMode>('aspectFill'),
+
+  /**
+   * 内部标记，用于 avatar-group 组件内部使用
+   * 类型: boolean
+   * 默认值: false
+   * @private
+   */
+  _internal: Boolean
+}
+
+/**
+ * Avatar 组件 Props 类型
+ */
+export type AvatarProps = ExtractPropTypes<typeof avatarProps>

package/components/wd-avatar/wd-avatar.vue

@@ -0,0 +1,184 @@
+<template>
+  <view v-if="isShow" :class="rootClass" :style="rootStyle" @click="handleClick">
+    <!-- 默认插槽优先 -->
+    <slot v-if="hasDefaultSlot"></slot>
+    <!-- 图片 -->
+    <wd-img v-else-if="src" :src="src" :mode="mode" custom-class="wd-avatar__img" @error="handleError" />
+    <!-- 文本 -->
+    <text v-else-if="text" class="wd-avatar__text">{{ text }}</text>
+    <!-- 图标 -->
+    <wd-icon v-else-if="icon" :name="icon" custom-class="wd-avatar__icon" />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-avatar',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, useSlots, type CSSProperties, ref } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdImg from '../wd-img/wd-img.vue'
+import { addUnit, getPropByPath, isDef, isString, objToStyle } from '../../common/util'
+import { avatarProps, type AvatarShape, type AvatarSize } from './types'
+import { useParent } from '../../composables/useParent'
+import { AVATAR_GROUP_KEY } from '../wd-avatar-group/types'
+
+const props = defineProps(avatarProps)
+
+/**
+ * Avatar 组件事件定义
+ * - error: 图片加载失败时触发
+ * - click: 点击头像时触发
+ */
+const emit = defineEmits(['error', 'click'])
+const slots = useSlots()
+
+// 父组件上下文：_internal 用于 avatar-group 内部的溢出计数头像，跳过父组件上下文
+const { parent: avatarGroup, index } = props._internal ? { parent: ref(null), index: ref(-1) } : useParent(AVATAR_GROUP_KEY)
+
+/**
+ * 计算头像是否应该显示
+ * 在 avatar-group 中根据 maxCount 判断是否超出数量限制
+ */
+const isShow = computed(() => {
+  if (!avatarGroup.value) {
+    return true
+  }
+  // 在 avatar-group 中，根据 maxCount 判断
+  const maxCount = avatarGroup.value.props.maxCount
+  if (!isDef(maxCount)) {
+    return true
+  }
+  const count = typeof maxCount === 'number' ? maxCount : parseInt(maxCount, 10)
+  // 检查 count 是否为有效数字
+  if (isNaN(count) || count <= 0) {
+    return true
+  }
+  return index.value < count
+})
+
+/**
+ * 获取头像尺寸
+ * 优先级: Props > avatarGroup Props > 默认值
+ */
+const sizeValue = computed(() => {
+  return props.size || (getPropByPath(avatarGroup.value, 'props.size') as string | number | AvatarSize) || 'normal'
+})
+
+/**
+ * 判断是否使用内置尺寸(large/medium/normal/small)
+ */
+const isBuiltInSize = computed(() => {
+  return isString(sizeValue.value) && ['large', 'medium', 'normal', 'small'].includes(sizeValue.value)
+})
+
+/**
+ * 获取头像形状
+ * 优先级: Props > avatarGroup Props > 默认值
+ */
+const shapeValue = computed(() => {
+  return props.shape || (getPropByPath(avatarGroup.value, 'props.shape') as AvatarShape) || 'round'
+})
+
+/**
+ * 判断是否存在默认插槽
+ */
+const hasDefaultSlot = computed(() => !!slots.default)
+
+const rootClass = computed(() => {
+  const classes = ['wd-avatar', props.customClass]
+  classes.push(`is-${shapeValue.value}`)
+
+  // 尺寸类仅预设尺寸
+  if (isBuiltInSize.value) {
+    classes.push(`wd-avatar--${sizeValue.value}`)
+  }
+  // 在 avatar-group 中时，添加 item 类
+  if (avatarGroup.value) {
+    classes.push('wd-avatar__group-item')
+    if (avatarGroup.value.props.vertical) {
+      classes.push('wd-avatar__group-item--vertical')
+    }
+  }
+  return classes.join(' ')
+})
+
+/**
+ * 根节点样式
+ */
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(sizeValue.value) && !isBuiltInSize.value) {
+    style.width = addUnit(sizeValue.value)
+    style.height = addUnit(sizeValue.value)
+    style.fontSize = `calc(${addUnit(sizeValue.value)} * 0.45)`
+    if (avatarGroup.value) {
+      style['--wot-avatar-overlap' as any] = `calc(${addUnit(sizeValue.value)} * -0.25)`
+    }
+  }
+
+  // 处理层叠效果的 z-index
+  if (avatarGroup.value) {
+    const cascading = avatarGroup.value.props.cascading
+    if (cascading === 'left-up') {
+      // 左侧在上，越后面越大
+      style.zIndex = index.value + 1
+    } else if (cascading === 'right-up') {
+      // 右侧在上，越前面越大
+      const maxCount = avatarGroup.value.props.maxCount
+      let count = avatarGroup.value.children?.length ?? 0
+
+      if (isDef(maxCount)) {
+        const parsedCount = typeof maxCount === 'number' ? maxCount : parseInt(maxCount, 10)
+        if (!isNaN(parsedCount) && parsedCount > 0) {
+          count = parsedCount
+        }
+      }
+      style.zIndex = count - index.value
+    }
+  }
+
+  if (props.color) {
+    style.color = props.color
+  }
+
+  if (props.bgColor) {
+    style.background = props.bgColor
+    // 有背景色但无文字色时，默认白色
+    if (!props.color) {
+      style.color = '#fff'
+    }
+  }
+
+  return `${objToStyle(style)} ${props.customStyle}`
+})
+
+/**
+ * 处理图片加载失败事件
+ * @param {Event} event 失败事件对象
+ */
+const handleError = (event: Event) => {
+  emit('error', event)
+}
+
+/**
+ * 处理点击事件
+ */
+const handleClick = () => {
+  emit('click')
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-avatar-group/index.scss

@@ -0,0 +1,11 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+@include b(avatar-group) {
+  display: inline-flex;
+  align-items: center;
+
+  @include when(vertical) {
+    flex-direction: column;
+  }
+}

package/components/wd-avatar-group/types.ts

@@ -0,0 +1,61 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import type { InjectionKey } from 'vue'
+import { baseProps, makeStringProp, makeNumericProp } from '../../common/props'
+import type { AvatarShape, AvatarSize } from '../wd-avatar/types'
+
+export type AvatarGroupCascadingValue = 'left-up' | 'right-up'
+
+export type AvatarGroupProvide = {
+  props: AvatarGroupProps
+}
+
+export const AVATAR_GROUP_KEY: InjectionKey<AvatarGroupProvide> = Symbol('wd-avatar-group')
+
+export const avatarGroupProps = {
+  ...baseProps,
+
+  /**
+   * 最多显示的头像数量
+   * 类型: string | number
+   * 默认值: undefined
+   */
+  maxCount: Number,
+  /**
+   * 头像层叠方向
+   * 可选值: left-up(左侧叠层) / right-up(右侧叠层)
+   * 类型: string
+   * 默认值: 'left-up'
+   */
+  cascading: makeStringProp<AvatarGroupCascadingValue>('left-up'),
+  /**
+   * 统一设置组内所有头像的形状
+   * 类型: string
+   */
+  shape: {
+    type: String as PropType<AvatarShape>,
+    default: 'round'
+  },
+
+  /**
+   * 统一设置组内所有头像的尺寸，支持预设尺寸(large/medium/normal/small)或带单位的字符串(如 40px、100rpx)
+   * 类型: string | number
+   */
+  size: {
+    type: [String, Number] as PropType<string | number | AvatarSize>,
+    default: 'normal'
+  },
+  /**
+   * 超出最大数量时折叠头像显示的内容
+   * 类型: string
+   * 默认值: undefined
+   */
+  collapseAvatar: makeStringProp(''),
+  /**
+   * 是否垂直展示
+   * 类型: boolean
+   * 默认值: false
+   */
+  vertical: Boolean
+}
+
+export type AvatarGroupProps = ExtractPropTypes<typeof avatarGroupProps>

package/components/wd-avatar-group/wd-avatar-group.vue

@@ -0,0 +1,115 @@
+<template>
+  <view :class="rootClass" :style="customStyle">
+    <slot></slot>
+    <!-- 折叠头像 -->
+    <wd-avatar
+      v-if="showCollapse"
+      :custom-style="collapseStyle"
+      _internal
+      :text="collapseText"
+      :shape="shape"
+      :size="size"
+      bg-color="#ebedf0"
+      color="#969799"
+    />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-avatar-group',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, useSlots, type CSSProperties } from 'vue'
+import wdAvatar from '../wd-avatar/wd-avatar.vue'
+import { avatarGroupProps, AVATAR_GROUP_KEY } from './types'
+import { useChildren } from '../../composables/useChildren'
+import { objToStyle, addUnit, isString } from '../../common/util'
+
+const props = defineProps(avatarGroupProps)
+const slots = useSlots()
+
+const { children, linkChildren } = useChildren(AVATAR_GROUP_KEY)
+
+linkChildren({ props })
+
+/**
+ * 根节点类名
+ */
+const rootClass = computed(() => {
+  return `wd-avatar-group wd-avatar-group--${props.cascading} ${props.customClass} ${props.vertical ? 'is-vertical' : ''}`
+})
+
+const maxCountValue = computed(() => {
+  if (!props.maxCount) {
+    return 0
+  }
+  const count = typeof props.maxCount === 'number' ? props.maxCount : parseInt(props.maxCount, 10)
+  return isNaN(count) || count <= 0 ? 0 : count
+})
+
+/**
+ * 是否显示折叠头像
+ */
+const showCollapse = computed(() => {
+  return maxCountValue.value > 0 && children.length > maxCountValue.value
+})
+
+/**
+ * 剩余未显示的数量
+ */
+const restCount = computed(() => {
+  if (maxCountValue.value <= 0) {
+    return 0
+  }
+  return Math.max(0, children.length - maxCountValue.value)
+})
+
+/**
+ * 折叠头像文本
+ */
+const collapseText = computed(() => {
+  return props.collapseAvatar || `+${restCount.value}`
+})
+
+/**
+ * 是否有默认插槽
+ */
+const hasDefaultSlot = computed(() => !!slots.default)
+
+/**
+ * 折叠头像样式
+ */
+const collapseStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.cascading === 'left-up') {
+    const count = maxCountValue.value > 0 ? maxCountValue.value : children.length
+    style.zIndex = count + 1
+  } else {
+    style.zIndex = 0
+  }
+  if (hasDefaultSlot.value) {
+    const isBuiltIn = isString(props.size) && ['large', 'medium', 'normal', 'small'].includes(props.size)
+    const margin = isBuiltIn ? 'var(--wot-avatar-overlap)' : `calc(${addUnit(props.size)} * -0.25)`
+    if (props.vertical) {
+      style.marginTop = margin
+    } else {
+      style.marginLeft = margin
+    }
+  }
+  return objToStyle(style)
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-backtop/index.scss

@@ -0,0 +1,67 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 背景色
+$backtop-bg: var(--wot-backtop-bg, $filled-oppo) !default;
+// 边框颜色
+$backtop-border-color: var(--wot-backtop-border-color, $border-main) !default;
+// 按钮宽度
+$backtop-width: var(--wot-backtop-width, $n-48) !default;
+// 按钮高度
+$backtop-height: var(--wot-backtop-height, $n-48) !default;
+// 方形模式圆角
+$backtop-radius: var(--wot-backtop-radius, $radius-main) !default;
+// 圆形模式圆角
+$backtop-radius-circle: var(--wot-backtop-radius-circle, $radius-radius-full) !default;
+// 按钮图标颜色
+$backtop-color: var(--wot-backtop-color, $icon-main) !default;
+// 按钮图标尺寸
+$backtop-icon-size: var(--wot-backtop-icon-size, $n-20) !default;
+// 文本字号
+$backtop-text-font-size: var(--wot-backtop-text-font-size, $typography-label-size-main) !default;
+// 文本颜色
+$backtop-text-color: var(--wot-backtop-text-color, $text-main) !default;
+// 文本行高
+$backtop-text-line-height: var(--wot-backtop-text-line-height, $typography-label-line--height-size-main) !default;
+// 组件层级
+$backtop-z-index: var(--wot-backtop-z-index, 100) !default;
+
+@include b(backtop) {
+  @include pixelBorderSurround($backtop-border-color);
+  position: fixed;
+  background: $backtop-bg;
+  width: $backtop-width;
+  height: $backtop-height;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $backtop-color;
+  z-index: $backtop-z-index;
+
+
+
+  @include e(content) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  @include e(text) {
+    font-size: $backtop-text-font-size;
+    line-height: $backtop-text-line-height;
+    color: $backtop-text-color;
+  }
+
+  @include edeep(backicon) {
+    font-size: $backtop-icon-size;
+  }
+
+  @include when(circle) {
+    border-radius: $backtop-radius-circle;
+  }
+
+  @include when(square) {
+    border-radius: $backtop-radius;
+  }
+}