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

package/components/wd-image-preview/types.ts

@@ -0,0 +1,165 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 11:36:12
+ * @LastEditTime: 2026-03-03 12:57:28
+ * @LastEditors: weisheng
+ * @Description: ImagePreview 图片预览
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-image-preview/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+
+/**
+ * 关闭图标位置
+ */
+export type ImagePreviewCloseIconPosition = 'top-left' | 'top-right'
+
+/**
+ * 函数式调用选项
+ */
+export type ImagePreviewOptions = {
+  /** 图片 URL 数组 */
+  images?: string[]
+  /** 起始位置索引 */
+  startPosition?: number
+  /** 是否显示页码 */
+  showIndex?: boolean
+  /** 是否循环播放 */
+  loop?: boolean
+  /** 是否显示关闭按钮 */
+  closeable?: boolean
+  /** 关闭图标名称 */
+  closeIcon?: string
+  /** 关闭图标位置 */
+  closeIconPosition?: ImagePreviewCloseIconPosition
+  /** 是否点击图片或遮罩时关闭 */
+  closeOnClick?: boolean
+  /** 开启长按图片显示识别小程序码菜单 */
+  showMenuByLongpress?: boolean
+  /** 是否显示 */
+  show?: boolean
+  /** zIndex 层级 */
+  zIndex?: number
+  /** 打开时的回调 */
+  onOpen?: () => void
+  /** 关闭时的回调 */
+  onClose?: () => void
+  /** 切换图片时的回调 */
+  onChange?: (index: number) => void
+  /** 长按图片时的回调 */
+  onLongPress?: (image: string) => void
+}
+
+/**
+ * ImagePreview 接口
+ */
+export interface ImagePreview {
+  /** 打开图片预览 */
+  previewImage: (options: ImagePreviewOptions | string[]) => void
+  /** 关闭图片预览 */
+  closeImagePreview: () => void
+}
+
+export const imagePreviewProps = {
+  ...baseProps,
+  /**
+   * 选择器
+   * 类型: string
+   * 默认值: ''
+   */
+  selector: makeStringProp(''),
+  /**
+   * 图片 URL 数组
+   * 类型: string[]
+   * 默认值: []
+   */
+  images: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+  /**
+   * 起始位置索引
+   * 类型: number
+   * 默认值: 0
+   */
+  startPosition: makeNumberProp(0),
+  /**
+   * 是否显示页码
+   * 类型: boolean
+   * 默认值: true
+   */
+  showIndex: makeBooleanProp(true),
+  /**
+   * 是否循环播放
+   * 类型: boolean
+   * 默认值: true
+   */
+  loop: makeBooleanProp(true),
+  /**
+   * 是否显示关闭按钮
+   * 类型: boolean
+   * 默认值: true
+   */
+  closeable: makeBooleanProp(true),
+  /**
+   * 关闭图标名称
+   * 类型: string
+   * 默认值: 'close'
+   */
+  closeIcon: makeStringProp('close'),
+  /**
+   * 关闭图标位置
+   * 类型: string
+   * 可选值: 'top-left' | 'top-right'
+   * 默认值: 'top-right'
+   */
+  closeIconPosition: makeStringProp<ImagePreviewCloseIconPosition>('top-right'),
+  /**
+   * 是否点击图片或遮罩时关闭
+   * 类型: boolean
+   * 默认值: true
+   */
+  closeOnClick: makeBooleanProp(true),
+  /**
+   * 开启长按图片显示识别小程序码菜单
+   * 类型: boolean
+   * 默认值: true
+   */
+  showMenuByLongpress: makeBooleanProp(true),
+  /**
+   * 打开时的回调
+   */
+  onOpen: Function as PropType<() => void>,
+  /**
+   * 关闭时的回调
+   */
+  onClose: Function as PropType<() => void>,
+  /**
+   * 切换图片时的回调
+   */
+  onChange: Function as PropType<(index: number) => void>,
+  /**
+   * 长按图片时的回调
+   */
+  onLongPress: Function as PropType<(image: string) => void>,
+  /**
+   * 层级
+   * 类型: number
+   * 默认值: 1000
+   */
+  zIndex: makeNumberProp(1000)
+}
+
+export type ImagePreviewProps = ExtractPropTypes<typeof imagePreviewProps>
+
+export type ImagePreviewExpose = {
+  /** 打开图片预览 */
+  open: (options?: ImagePreviewOptions | string[]) => void
+  /** 关闭图片预览 */
+  close: () => void
+  /** 切换到指定图片 */
+  setActive: (index: number) => void
+}
+
+export type ImagePreviewInstance = ComponentPublicInstance<ImagePreviewExpose, ImagePreviewProps>

package/components/wd-image-preview/wd-image-preview.vue

@@ -0,0 +1,233 @@
+<template>
+  <wd-overlay
+    :show="state.show"
+    :z-index="options.zIndex"
+    :lock-scroll="true"
+    :custom-class="`wd-image-preview ${customClass}`"
+    :custom-style="customStyle"
+    @enter="handleEnter"
+    @after-leave="handleAfterLeave"
+  >
+    <!-- 关闭按钮插槽 -->
+    <slot name="close" :close="close">
+      <view v-if="options.closeable" :class="`wd-image-preview__close wd-image-preview__close--${options.closeIconPosition}`" @click.stop="close">
+        <wd-icon custom-class="wd-image-preview__close-icon" :name="options.closeIcon" />
+      </view>
+    </slot>
+
+    <!-- 图片轮播 -->
+    <wd-swiper
+      v-if="state.visible"
+      custom-class="wd-image-preview__swiper"
+      :list="state.images"
+      v-model:current="state.currentIndex"
+      :autoplay="false"
+      :loop="options.loop"
+      :show-menu-by-longpress="options.showMenuByLongpress"
+      image-mode="aspectFit"
+      height="100%"
+      @click="handleImageClick"
+      @change="handleSwiperChange"
+    >
+      <template #indicator="{ total, current }">
+        <!-- 指示器插槽 -->
+        <slot name="indicator" :total="total" :current="current">
+          <view v-if="options.showIndex && total > 1" class="wd-image-preview__index">{{ current + 1 }} / {{ total }}</view>
+        </slot>
+      </template>
+    </wd-swiper>
+
+    <!-- 默认插槽（用于自定义底部内容等） -->
+    <slot :current="state.currentIndex" :total="state.images.length" :images="state.images" :close="close"></slot>
+  </wd-overlay>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-image-preview',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, inject, nextTick, reactive, ref, watch } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdOverlay from '../wd-overlay/wd-overlay.vue'
+import wdSwiper from '../wd-swiper/wd-swiper.vue'
+import { imagePreviewProps, type ImagePreviewExpose, type ImagePreviewOptions } from './types'
+import { defaultOptions, getImagePreviewOptionKey, getImageUrl } from './index'
+import { isDef, isFunction } from '../../common/util'
+import { type SwiperItem } from '../wd-swiper/types'
+
+const props = defineProps(imagePreviewProps)
+
+const emit = defineEmits<{
+  open: []
+  close: []
+  click: [{ index: number }]
+  change: [{ index: number }]
+  'long-press': [{ image: string }]
+}>()
+
+// 组件状态
+const state = reactive({
+  show: false,
+  visible: false,
+  currentIndex: 0,
+  images: [] as string[]
+})
+
+// 获取注入的选项
+const imagePreviewOptionKey = getImagePreviewOptionKey(props.selector)
+const imagePreviewOption = inject(imagePreviewOptionKey, ref<ImagePreviewOptions>(defaultOptions))
+
+// 合并后的选项
+const options = computed(() => ({
+  showIndex: isDef(imagePreviewOption.value.showIndex) ? imagePreviewOption.value.showIndex : props.showIndex,
+  loop: isDef(imagePreviewOption.value.loop) ? imagePreviewOption.value.loop : props.loop,
+  closeable: isDef(imagePreviewOption.value.closeable) ? imagePreviewOption.value.closeable : props.closeable,
+  closeIcon: isDef(imagePreviewOption.value.closeIcon) ? imagePreviewOption.value.closeIcon : props.closeIcon,
+  closeIconPosition: isDef(imagePreviewOption.value.closeIconPosition) ? imagePreviewOption.value.closeIconPosition : props.closeIconPosition,
+  closeOnClick: isDef(imagePreviewOption.value.closeOnClick) ? imagePreviewOption.value.closeOnClick : props.closeOnClick,
+  showMenuByLongpress: isDef(imagePreviewOption.value.showMenuByLongpress) ? imagePreviewOption.value.showMenuByLongpress : props.showMenuByLongpress,
+  zIndex: isDef(imagePreviewOption.value.zIndex) ? imagePreviewOption.value.zIndex! : props.zIndex,
+  onOpen: imagePreviewOption.value.onOpen || props.onOpen || null,
+  onClose: imagePreviewOption.value.onClose || props.onClose || null,
+  onChange: imagePreviewOption.value.onChange || props.onChange || null,
+  onLongPress: imagePreviewOption.value.onLongPress || props.onLongPress || null
+}))
+
+// 监听选项变化
+watch(
+  () => imagePreviewOption.value,
+  (newVal: ImagePreviewOptions) => {
+    reset(newVal)
+  },
+  { deep: true, immediate: true }
+)
+
+// 监听 show 变化，触发事件
+watch(
+  () => state.show,
+  (newVal, oldVal) => {
+    if (newVal && !oldVal) {
+      emit('open')
+      if (isFunction(options.value.onOpen)) {
+        options.value.onOpen()
+      }
+    } else if (!newVal && oldVal) {
+      emit('close')
+      if (isFunction(options.value.onClose)) {
+        options.value.onClose()
+      }
+    }
+  }
+)
+
+/**
+ * 重置选项
+ */
+function reset(option: ImagePreviewOptions) {
+  state.show = isDef(option.show) ? option.show! : false
+
+  if (state.show) {
+    state.images = isDef(option.images) ? option.images! : props.images || []
+    state.currentIndex = isDef(option.startPosition) ? option.startPosition! : props.startPosition
+  }
+}
+
+/**
+ * 进入动画完成
+ */
+function handleEnter() {
+  state.visible = true
+}
+
+/**
+ * 离开动画完成
+ */
+function handleAfterLeave() {
+  state.visible = false
+  state.images = []
+  state.currentIndex = 0
+}
+
+/**
+ * 打开预览
+ */
+function open(opts?: ImagePreviewOptions | string[]) {
+  if (opts) {
+    if (Array.isArray(opts)) {
+      state.images = opts
+    } else {
+      state.images = isDef(opts.images) ? opts.images! : props.images || []
+      state.currentIndex = isDef(opts.startPosition) ? opts.startPosition! : props.startPosition
+    }
+  }
+  state.show = true
+}
+
+/**
+ * 关闭预览
+ */
+function close() {
+  state.show = false
+}
+
+/**
+ * 设置当前图片
+ */
+function setActive(index: number) {
+  if (index >= 0 && index < state.images.length) {
+    state.currentIndex = index
+  }
+}
+
+/**
+ * 处理轮播切换
+ */
+function handleSwiperChange({ current }: { current: number }) {
+  state.currentIndex = current
+  emit('change', { index: current })
+  if (isFunction(options.value.onChange)) {
+    options.value.onChange(current)
+  }
+}
+
+/**
+ * 处理图片点击
+ */
+function handleImageClick({ index }: { index: number }) {
+  emit('click', { index })
+  if (options.value.closeOnClick) {
+    close()
+  }
+}
+
+/**
+ * 处理长按
+ */
+function handleLongPress(image: string | SwiperItem) {
+  const url = getImageUrl(image)
+  emit('long-press', { image: url })
+  if (isFunction(options.value.onLongPress)) {
+    options.value.onLongPress(url)
+  }
+}
+
+defineExpose<ImagePreviewExpose>({
+  open,
+  close,
+  setActive
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-img/index.scss

@@ -0,0 +1,82 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 圆形模式圆角
+$img-border-radius: var(--wot-img-border-radius, $radius-radius-full) !default;
+// 加载态文字颜色
+$img-loading-color: var(--wot-img-loading-color, $text-placeholder) !default;
+// 加载态背景色
+$img-loading-bg: var(--wot-img-loading-bg, $filled-bottom) !default;
+// 加载态文字字号
+$img-loading-font-size: var(--wot-img-loading-font-size, $typography-body-size-main) !default;
+// 加载态图标颜色
+$img-loading-icon-color: var(--wot-img-loading-icon-color, $text-placeholder) !default;
+// 加载态图标尺寸
+$img-loading-icon-size: var(--wot-img-loading-icon-size, $n-32) !default;
+// 失败态文字颜色
+$img-error-color: var(--wot-img-error-color, $text-placeholder) !default;
+// 失败态背景色
+$img-error-bg: var(--wot-img-error-bg, $filled-bottom) !default;
+// 失败态文字字号
+$img-error-font-size: var(--wot-img-error-font-size, $typography-body-size-main) !default;
+// 失败态图标颜色
+$img-error-icon-color: var(--wot-img-error-icon-color, $text-placeholder) !default;
+// 失败态图标尺寸
+$img-error-icon-size: var(--wot-img-error-icon-size, $n-32) !default;
+
+@include b(img) {
+  position: relative;
+  display: inline-block;
+
+  @include e(image) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  @include e(loading) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: $img-loading-color;
+    font-size: $img-loading-font-size;
+    background-color: $img-loading-bg;
+
+    @include edeep(loading-icon) {
+      color: $img-loading-icon-color;
+      font-size: $img-loading-icon-size;
+    }
+  }
+
+  @include e(error) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: $img-error-color;
+    font-size: $img-error-font-size;
+    background-color: $img-error-bg;
+
+    @include edeep(error-icon) {
+      color: $img-error-icon-color;
+      font-size: $img-error-icon-size;
+    }
+  }
+
+  @include when(round) {
+    overflow: hidden;
+    border-radius: $img-border-radius;
+  }
+}

package/components/wd-img/types.ts

@@ -0,0 +1,96 @@
+import { type ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp, numericProp } from '../../common/props'
+export type ImageMode =
+  | 'scaleToFill'
+  | 'aspectFit'
+  | 'aspectFill'
+  | 'widthFix'
+  | 'heightFix'
+  | 'top'
+  | 'bottom'
+  | 'center'
+  | 'left'
+  | 'right'
+  | 'top left'
+  | 'top right'
+  | 'bottom left'
+  | 'bottom right'
+
+export const imgProps = {
+  ...baseProps,
+  /**
+   * 图片自定义类名
+   * 类型: string
+   */
+  customImage: makeStringProp(''),
+  /**
+   * 图片链接
+   * 类型: string
+   */
+  src: String,
+  /**
+   * 预览图片链接
+   * 类型: string
+   */
+  previewSrc: String,
+  /**
+   * 是否显示为圆形
+   * 类型: boolean
+   * 默认值: false
+   */
+  round: makeBooleanProp(false),
+  /**
+   * 填充模式
+   * 类型: string
+   * 可选值: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right'
+   * 默认值: 'scaleToFill'
+   */
+  mode: makeStringProp<ImageMode>('scaleToFill'),
+  /**
+   * 是否懒加载
+   * 类型: boolean
+   * 默认值: false
+   */
+  lazyLoad: makeBooleanProp(false),
+  /**
+   * 宽度，默认单位为px
+   * 类型: string | number
+   */
+  width: numericProp,
+  /**
+   * 高度，默认单位为px
+   * 类型: string | number
+   */
+  height: numericProp,
+  /**
+   * 圆角大小，默认单位为px
+   * 类型: string | number
+   */
+  radius: numericProp,
+  /**
+   * 是否允许预览
+   * 类型: boolean
+   * 默认值: false
+   */
+  enablePreview: makeBooleanProp(false),
+  /**
+   * 开启长按图片显示识别小程序码菜单，仅在微信小程序平台有效
+   * 类型: boolean
+   * 默认值: false
+   */
+  showMenuByLongpress: makeBooleanProp(false),
+  /**
+   * 是否展示加载中
+   * 类型: boolean
+   * 默认值: true
+   */
+  showLoading: makeBooleanProp(true),
+  /**
+   * 是否展示错误
+   * 类型: boolean
+   * 默认值: true
+   */
+  showError: makeBooleanProp(true)
+}
+
+export type ImgProps = ExtractPropTypes<typeof imgProps>

package/components/wd-img/wd-img.vue

@@ -0,0 +1,91 @@
+<template>
+  <view :class="rootClass" @click="handleClick" :style="rootStyle">
+    <image
+      v-if="status !== 'error'"
+      :class="`wd-img__image ${customImage}`"
+      :src="src"
+      :mode="mode"
+      :show-menu-by-longpress="showMenuByLongpress"
+      :lazy-load="lazyLoad"
+      @load="handleLoad"
+      @error="handleError"
+    />
+    <view v-if="status === 'loading' && showLoading" class="wd-img__loading">
+      <slot name="loading">
+        <wd-icon name="image" custom-class="wd-img__loading-icon" />
+      </slot>
+    </view>
+    <view v-if="status === 'error' && showError" class="wd-img__error">
+      <slot name="error">
+        <wd-icon name="image-failloading" custom-class="wd-img__error-icon" />
+      </slot>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-img',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { addUnit, isDef, objToStyle } from '../../common/util'
+import { imgProps } from './types'
+
+const props = defineProps(imgProps)
+const emit = defineEmits<{
+  (e: 'error', event: Event): void
+  (e: 'click', event: MouseEvent): void
+  (e: 'load', event: Event): void
+}>()
+
+const rootStyle = computed(() => {
+  const style: Record<string, string | number> = {}
+  if (isDef(props.height)) {
+    style['height'] = addUnit(props.height)
+  }
+  if (isDef(props.width)) {
+    style['width'] = addUnit(props.width)
+  }
+  if (isDef(props.radius)) {
+    style['border-radius'] = addUnit(props.radius)
+    style['overflow'] = 'hidden'
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const rootClass = computed(() => {
+  return `wd-img  ${props.round ? 'is-round' : ''} ${props.customClass}`
+})
+
+const status = ref<'loading' | 'error' | 'success'>('loading')
+
+function handleError(event: any) {
+  status.value = 'error'
+  emit('error', event)
+}
+function handleClick(event: MouseEvent) {
+  if (props.enablePreview && props.src && status.value == 'success') {
+    uni.previewImage({
+      urls: [props.previewSrc || props.src]
+    })
+  }
+  emit('click', event)
+}
+function handleLoad(event: any) {
+  status.value = 'success'
+  emit('load', event)
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>