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

package/components/wd-grid-item/wd-grid-item.vue

@@ -0,0 +1,295 @@
+<template>
+  <view :class="rootClass" @click="click" :style="rootStyle">
+    <view :class="contentClass" :style="contentStyle" :hover-class="hoverClass">
+      <slot>
+        <view class="wd-grid-item__wrapper" v-if="icon || $slots.icon">
+          <wd-badge v-bind="customBadgeProps" custom-class="wd-grid-item__badge">
+            <slot name="icon">
+              <wd-icon
+                :name="icon"
+                :size="iconSize"
+                :color="iconColor"
+                :class-prefix="iconPrefix"
+                :custom-class="`wd-grid-item__icon ${customIcon}`"
+              />
+            </slot>
+          </wd-badge>
+        </view>
+        <slot name="text">
+          <view v-if="text" :class="`wd-grid-item__text ${ellipsis ? 'is-ellipsis' : ''} ${customText}`">{{ text }}</view>
+        </slot>
+      </slot>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-grid-item',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdBadge from '../wd-badge/wd-badge.vue'
+import { computed, type CSSProperties } from 'vue'
+import { useParent } from '../../composables/useParent'
+import { GRID_KEY } from '../wd-grid/types'
+import { addUnit, deepAssign, isDef, isUndefined, omitBy } from '../../common/util'
+import { gridItemProps } from './types'
+import type { BadgeProps } from '../wd-badge/types'
+
+/** GridItem 组件 Props 定义 */
+const props = defineProps(gridItemProps)
+/** GridItem 组件事件定义 */
+const emit = defineEmits(['click'])
+
+/** 获取父级 Grid 组件实例及当前项在子组件中的索引 */
+const { parent: grid, index } = useParent(GRID_KEY)
+
+/** 格子间距（从父级 Grid 组件继承） */
+const gutter = computed(() => Number(grid.value?.props.gutter || 0))
+/** 是否为正方形（从父级 Grid 组件继承） */
+const square = computed(() => Boolean(grid.value?.props.square))
+/** 是否显示边框（从父级 Grid 组件继承） */
+const border = computed(() => Boolean(grid.value?.props.border))
+/** 背景颜色（从父级 Grid 组件继承） */
+const bgColor = computed(() => grid.value?.props.bgColor || '')
+/** 列数（从父级 Grid 组件继承，0 表示自动计算） */
+const column = computed(() => grid.value?.props.column || 0)
+/** 子组件总数 */
+const childCount = computed(() => grid.value?.children?.length || 0)
+
+/** 图标大小（从父级 Grid 组件继承） */
+const iconSize = computed(() => grid.value?.props.iconSize)
+
+/**
+ * 边框 CSS 类名计算
+ * 根据当前项的位置和列数计算是否需要应用边框相关的类名
+ * @returns {string} 包含边框相关的 CSS 类名，多个类名间使用空格分隔
+ */
+const borderClass = computed(() => {
+  if (!border.value || gutter.value) return ''
+  const classes: string[] = []
+  const col = column.value
+  const idx = index.value
+  const total = childCount.value
+
+  if (col) {
+    const isRightItem = total - 1 === idx || (idx + 1) % col === 0
+    const isFirstLine = idx + 1 <= col
+    if (isFirstLine) classes.push('is-first')
+    if (isRightItem) classes.push('is-right')
+    if (!isFirstLine) classes.push('is-border')
+  } else {
+    classes.push('is-first')
+  }
+
+  if (total - 1 === idx) classes.push('is-last')
+
+  return classes.join(' ')
+})
+
+/**
+ * 根节点样式计算
+ * 计算当前格子的宽度、flex 属性及额外样式（如正方形、间距）
+ * @returns {CSSProperties | string} 组合后的 CSS 样式对象或字符串
+ */
+const rootStyle = computed(() => {
+  if (!grid) return props.customStyle || ''
+
+  const columnNum = column.value || childCount.value
+  const percent = `${100 / columnNum}%`
+  const style: CSSProperties = {
+    flexBasis: percent,
+    width: percent
+  }
+
+  if (square.value) {
+    // 正方形格子
+    style.paddingTop = percent
+    style.paddingBottom = '0'
+
+    if (gutter.value) {
+      style.paddingRight = addUnit(gutter.value)
+    }
+  } else if (gutter.value) {
+    // 非正方形但有间距
+    const gutterValue = addUnit(gutter.value)
+    style.paddingRight = gutterValue
+
+    // 第二行及以后的元素添加上边距
+    if (index.value >= columnNum) {
+      style.marginTop = gutterValue
+    }
+  }
+
+  // 添加自定义样式
+  if (props.customStyle) {
+    return `${objToStyle(style)} ${props.customStyle}`
+  }
+
+  return style
+})
+
+/**
+ * 内容区域样式计算
+ * 当存在间距且为正方形时，调整位置及尺寸；否则只设置背景颜色
+ * @returns {CSSProperties | string} 内容区域的 CSS 样式对象或字符串
+ */
+const contentStyle = computed(() => {
+  if (!grid) return ''
+
+  const style: CSSProperties = {}
+
+  if (bgColor.value) {
+    style.background = bgColor.value
+  }
+
+  if (square.value && gutter.value) {
+    const gutterValue = addUnit(gutter.value)
+    style.right = gutterValue
+    style.bottom = gutterValue
+    style.height = 'auto'
+  }
+
+  return style
+})
+
+/**
+ * 将样式对象转换为字符串
+ * @param {CSSProperties} obj - 样式对象
+ * @returns {string} 样式字符串
+ */
+function objToStyle(obj: CSSProperties): string {
+  return Object.entries(obj)
+    .map(([key, value]) => {
+      const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+      return `${cssKey}: ${value};`
+    })
+    .join('')
+}
+
+/**
+ * 根节点 CSS 类名计算
+ * 包含边框、正方形、自定义类名等样式类
+ * @returns {string} 组合后的 CSS 类名字符串
+ */
+const rootClass = computed(() => {
+  const classes = ['wd-grid-item']
+  if (borderClass.value) {
+    classes.push(borderClass.value)
+  }
+  if (square.value) {
+    classes.push('is-square')
+  }
+  if (props.customClass) {
+    classes.push(props.customClass)
+  }
+  return classes.join(' ')
+})
+
+/**
+ * 内容区域 CSS 类名计算
+ * 根据是否为正方形、是否有圆角、排列方向等计算类名
+ * @returns {string} 组合后的 CSS 类名字符串
+ */
+const contentClass = computed(() => {
+  const classes = ['wd-grid-item__content']
+  if (square.value) {
+    classes.push('is-square')
+  }
+  if (border.value && gutter.value > 0) {
+    classes.push('is-around')
+  }
+  if (grid.value) {
+    const { center, direction, reverse } = grid.value.props
+    if (center) {
+      classes.push('is-center')
+    }
+    if (direction === 'horizontal') {
+      classes.push('is-horizontal')
+    }
+    if (reverse) {
+      classes.push('is-reverse')
+    }
+  }
+  return classes.join(' ')
+})
+
+/**
+ * Badge 组件属性计算
+ * 合并用户传入的徽标属性与从 GridItem Props 中提取的值
+ * @returns {Partial<BadgeProps>} 最终的 Badge 组件属性对象
+ */
+const customBadgeProps = computed(() => {
+  const badgeProps: Partial<BadgeProps> = deepAssign(
+    isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
+    omitBy(
+      {
+        max: props.max,
+        isDot: props.isDot,
+        value: props.value
+      },
+      isUndefined
+    )
+  )
+  if (!isDef(badgeProps.max)) {
+    badgeProps.max = 99
+  }
+  return badgeProps
+})
+
+/**
+ * hover 类名计算
+ * 仅当格子启用点击反馈时才返回对应的 hover 类名
+ * @returns {string} hover 类名，如果不启用点击反馈则返回空字符串
+ */
+const hoverClass = computed(() => {
+  if (grid.value?.props.clickable) {
+    return grid.value.props.hoverClass ? grid.value.props.hoverClass : 'wd-grid-item__content--hover'
+  }
+  return ''
+})
+
+/**
+ * 处理格子点击事件
+ * 1. 检查父级 Grid 组件是否启用了点击反馈
+ * 2. 触发 click 事件
+ * 3. 如果绑定了 url，则根据 linkType 进行路由跳转
+ */
+function click() {
+  if (grid.value && !grid.value.props.clickable) return
+  const { url, linkType } = props
+  emit('click')
+  if (url) {
+    switch (linkType) {
+      case 'navigateTo':
+        uni.navigateTo({ url })
+        break
+      case 'reLaunch':
+        uni.reLaunch({ url })
+        break
+      case 'redirectTo':
+        uni.redirectTo({ url })
+        break
+      case 'switchTab':
+        uni.switchTab({ url })
+        break
+      default:
+        console.error(`[wot-design] warning(wd-grid-item): linkType can not be ${linkType}`)
+        break
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-icon/index.scss

@@ -0,0 +1,46 @@
+@use '../../styles/variable.scss' as *;
+@use '../../styles/mixin/mixin' as *;
+@use '../../styles/iconfont/iconfont.scss' as *;
+
+// 图标字号
+$icon-font-size: var(--wot-icon-font-size, $typography-body-size-main) !default;
+
+@include b(icon) {
+  display: inline-block;
+  font-family: 'wd-icons';
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: $icon-font-size;
+  line-height: 1;
+
+  &::before {
+    display: inline-block;
+  }
+
+  @include m(image) {
+    width: $icon-font-size;
+    height: $icon-font-size;
+  }
+
+  @include e(image) {
+    width: 100%;
+    height: 100%;
+  }
+
+  // CSS 图标模式（UnoCSS 等 CSS class 图标库）
+  @include m(css) {
+    font-family: inherit;
+    font-style: inherit;
+    font-weight: inherit;
+    width: $icon-font-size;
+    height: $icon-font-size;
+
+    &::before {
+      display: none;
+    }
+  }
+}

package/components/wd-icon/types.ts

@@ -0,0 +1,44 @@
+/*
+ * @Author: weisheng
+ * @Date: 2025-07-17 10:27:32
+ * @LastEditTime: 2026-01-23 14:57:01
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-icon/types.ts
+ * 记得注释
+ */
+import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp, numericProp } from '../../common/props'
+import type { ExtractPropTypes } from 'vue'
+
+export const iconProps = {
+  ...baseProps,
+  /**
+   * 图标名称，支持使用图片链接
+   * 类型: string
+   */
+  name: makeRequiredProp(String),
+  /**
+   * 图标颜色
+   * 类型: string
+   */
+  color: String,
+  /**
+   * 图标字体大小
+   * 类型: string | number
+   */
+  size: numericProp,
+  /**
+   * 类名前缀，用于使用自定义图标
+   * 类型: string
+   * 默认值: wd-icon
+   */
+  classPrefix: makeStringProp('wd-icon'),
+  /**
+   * 是否为 CSS 类名图标（如 UnoCSS 图标），为 true 时 name 直接作为 CSS class 使用
+   * 类型: boolean
+   * 默认值: false
+   */
+  cssIcon: makeBooleanProp(false)
+}
+
+export type IconProps = ExtractPropTypes<typeof iconProps>

package/components/wd-icon/wd-icon.vue

@@ -0,0 +1,66 @@
+<template>
+  <view @click="handleClick" :class="rootClass" :style="rootStyle">
+    <image v-if="isImage" class="wd-icon__image" :src="name"></image>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-icon',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    externalClasses: ['custom-class'],
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+import { addUnit, isDef, objToStyle } from '../../common/util'
+import { iconProps } from './types'
+
+const props = defineProps(iconProps)
+const emit = defineEmits(['click', 'touch'])
+
+const isImage = computed(() => {
+  return !props.cssIcon && isDef(props.name) && props.name.includes('/')
+})
+
+const rootClass = computed(() => {
+  if (props.cssIcon) {
+    // CSS 图标模式：name 直接作为 class，不使用 iconfont
+    return `wd-icon wd-icon--css ${props.name} ${props.customClass}`
+  }
+  const prefix = props.classPrefix
+  return `wd-icon ${prefix} ${props.customClass} ${isImage.value ? 'wd-icon--image' : prefix + '-' + props.name}`
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.color) {
+    style['color'] = props.color
+  }
+  if (props.size) {
+    const sizeValue = addUnit(props.size)
+    style['font-size'] = sizeValue
+    // CSS 图标模式下，同步设置 width/height
+    if (props.cssIcon) {
+      style['width'] = sizeValue
+      style['height'] = sizeValue
+    }
+  }
+  return `${objToStyle(style)} ${props.customStyle}`
+})
+
+function handleClick(event: any) {
+  emit('click', event)
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-image-preview/index.scss

@@ -0,0 +1,94 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 预览蒙层背景色
+$image-preview-bg: var(--wot-image-preview-bg, $opac-9_75) !default;
+// 页码文字颜色
+$image-preview-index-color: var(--wot-image-preview-index-color, $text-white) !default;
+// 页码顶部间距
+$image-preview-index-margin: var(--wot-image-preview-index-margin, $spacing-extra-loose) !default;
+// 页码文字字号
+$image-preview-index-font-size: var(--wot-image-preview-index-font-size, $typography-title-size-main) !default;
+// 页码文字字重
+$image-preview-index-font-weight: var(--wot-image-preview-index-font-weight, $typography-title-font-weight-main) !default;
+// 页码文字行高
+$image-preview-index-line-height: var(--wot-image-preview-index-line-height, $typography-title-line--height-size-main) !default;
+// 关闭图标尺寸
+$image-preview-close-size: var(--wot-image-preview-close-size, $n-24) !default;
+// 关闭图标颜色
+$image-preview-close-color: var(--wot-image-preview-close-color, $icon-white) !default;
+// 关闭按钮边距
+$image-preview-close-margin: var(--wot-image-preview-close-margin, $spacing-extra-loose) !default;
+
+@include b(image-preview) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: $image-preview-bg;
+
+  // 关闭按钮
+  @include e(close) {
+    position: absolute;
+    z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    @include m(top-right) {
+      top: $image-preview-close-margin;
+      right: $image-preview-close-margin;
+    }
+
+    @include m(top-left) {
+      top: $image-preview-close-margin;
+      left: $image-preview-close-margin;
+    }
+  }
+
+  @include edeep(close-icon) {
+    font-size: $image-preview-close-size;
+    line-height: $image-preview-close-size;
+    color: $image-preview-close-color;
+  }
+
+  // 页码指示器
+  @include e(index) {
+    position: absolute;
+    top: $image-preview-index-margin;
+    left: 50%;
+    transform: translateX(-50%);
+    color: $image-preview-index-color;
+    font-size: $image-preview-index-font-size;
+    font-weight: $image-preview-index-font-weight;
+    line-height: $image-preview-index-line-height;
+    z-index: 10;
+  }
+
+  // 轮播容器
+  @include e(swiper) {
+    width: 100%;
+    height: 100%;
+  }
+
+  // 轮播项
+  @include e(swiper-item) {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  // 图片
+  @include e(image) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transform-origin: center center;
+    will-change: transform;
+  }
+}

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

@@ -0,0 +1,95 @@
+/*
+ * @Author: weisheng
+ * @Date: 2026-01-21 16:28:20
+ * @LastEditTime: 2026-03-03 11:51:46
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-image-preview/index.ts
+ * 记得注释
+ */
+import { inject, provide, ref } from 'vue'
+import type { ImagePreview, ImagePreviewOptions } from './types'
+import { deepMerge, isArray, isString } from '../../common/util'
+import { type SwiperItem } from '../wd-swiper/types'
+
+/**
+ * useImagePreview 用到的 key
+ */
+const imagePreviewDefaultOptionKey = '__IMAGE_PREVIEW_OPTION__'
+
+/**
+ * 默认选项
+ */
+export const defaultOptions: ImagePreviewOptions = {
+  images: [],
+  startPosition: 0,
+  showIndex: true,
+  loop: true,
+  closeable: true,
+  closeIcon: 'close',
+  closeIconPosition: 'top-right',
+  closeOnClick: true,
+  showMenuByLongpress: true,
+  show: false,
+  zIndex: 1000
+}
+
+const None = Symbol('None')
+
+/**
+ * 图片预览 Hook
+ * @param selector 选择器，用于区分多个实例
+ */
+export function useImagePreview(selector: string = ''): ImagePreview {
+  const imagePreviewOptionKey = getImagePreviewOptionKey(selector)
+  const imagePreviewOption = inject(imagePreviewOptionKey, ref<ImagePreviewOptions | typeof None>(None))
+
+  if (imagePreviewOption.value === None) {
+    imagePreviewOption.value = defaultOptions
+    provide(imagePreviewOptionKey, imagePreviewOption)
+  }
+
+  /**
+   * 打开图片预览
+   * @param options 预览选项或图片数组
+   */
+  const open = (options: ImagePreviewOptions | string[]) => {
+    let mergedOptions: ImagePreviewOptions
+
+    if (isArray(options)) {
+      mergedOptions = deepMerge(defaultOptions, { images: options }) as ImagePreviewOptions
+    } else {
+      mergedOptions = deepMerge(defaultOptions, options) as ImagePreviewOptions
+    }
+
+    imagePreviewOption.value = deepMerge(mergedOptions, { show: true }) as ImagePreviewOptions
+  }
+
+  /**
+   * 关闭图片预览
+   */
+  const close = () => {
+    imagePreviewOption.value = { show: false }
+  }
+
+  return {
+    previewImage: open,
+    closeImagePreview: close
+  }
+}
+
+/**
+ * 获取图片预览选项的 key
+ * @param selector 选择器
+ */
+export const getImagePreviewOptionKey = (selector: string) => {
+  return selector ? `${imagePreviewDefaultOptionKey}${selector}` : imagePreviewDefaultOptionKey
+}
+
+/**
+ * 获取图片 url
+ * @param image 图片
+ */
+export function getImageUrl(image: string | SwiperItem) {
+  return isString(image) ? image : image.url
+}