wot icon

src/Components/wd-icon-local/common/AbortablePromise.ts

+/* eslint-disable */
+export class AbortablePromise<T> {
+  promise: Promise<T>
+  private _reject: ((res?: any) => void) | null = null
+
+  constructor(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void) {
+    this.promise = new Promise<T>((resolve, reject) => {
+      executor(resolve, reject)
+      this._reject = reject // 保存reject方法的引用，以便在abort时调用
+    })
+  }
+  // 提供abort方法来中止Promise
+  abort(error?: any) {
+    if (this._reject) {
+      this._reject(error) // 调用reject方法来中止Promise
+    }
+  }
+
+  then<TResult1 = T, TResult2 = never>(
+    onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null,
+    onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null
+  ): Promise<TResult1 | TResult2> {
+    return this.promise.then(onfulfilled, onrejected)
+  }
+
+  catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult> {
+    return this.promise.catch(onrejected)
+  }
+}

src/Components/wd-icon-local/common/abstracts/_config.scss

+/**
+ * SCSS 配置项：命名空间以及BEM
+ */
+$namespace: 'wd';
+$elementSeparator: '__';
+$modifierSeparator: '--';
+$state-prefix: 'is-';
\ No newline at end of file

src/Components/wd-icon-local/common/abstracts/_function.scss

+/**
+ * 辅助函数
+ */
+@import 'config';
+$default-theme: #4d80f0 !default; // 正常色
+
+/* 转换成字符串 */
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+
+  @return $selector;
+}
+
+/* 判断是否存在 Modifier */
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, $modifierSeparator) {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+/* 判断是否存在伪类 */
+@function containsPseudo($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+
+/**
+ * 主题色切换
+ * @params $theme-color 主题色
+ * @params $type 变暗’dark‘ 变亮 'light'
+ * @params $mix-color 自己设置的混色
+ */
+@function themeColor($theme-color, $type: "", $mix-color: "") {
+  @if $default-theme !=#4d80f0 {
+    @if $type=="dark" {
+      @return darken($theme-color, 10%);
+    }
+
+    @else if $type=="light" {
+      @return lighten($theme-color, 10%);
+    }
+
+    @else {
+      @return $theme-color;
+    }
+  }
+
+  @else {
+    @return $mix-color;
+  }
+}
+
+/**
+ * 颜色结果切换， 如果开启线性渐变色 使用渐变色，如果没有开启，那么使用主题色
+ * @params $open-linear 是否开启线性渐变色
+ * @params $deg 渐变色角度
+ * @params $theme-color 当前配色
+ * @params [Array] $set 主题色明暗设置，与 $color-list 数量对应
+ * @params [Array] $color-list 渐变色顺序， $color-list 和 $per-list 数量相同
+ * @params [Array] $per-list 渐变色比例
+ */
+@function resultColor($deg, $theme-color, $set, $color-list, $per-list) {
+  // 开启渐变
+
+  $len: length($color-list);
+  $arg: $deg;
+
+  @for $i from 1 through $len {
+    $arg: $arg + ","+ themeColor($theme-color, nth($set, $i), nth($color-list, $i)) + " "+ nth($per-list, $i);
+  }
+
+  @return linear-gradient(unquote($arg));
+
+}
\ No newline at end of file

src/Components/wd-icon-local/common/abstracts/_mixin.scss

+/**
+ * 混合宏
+ */
+@import "config";
+@import "function";
+
+/**
+  * BEM，定义块（b)
+  */
+@mixin b($block) {
+  $B: $namespace + "-"+ $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
+@mixin e($element...) {
+  $selector: &;
+  $selectors: "";
+
+  @if containsPseudo($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + "." + $B + $elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selector} {
+        #{$selectors} {
+          @content;
+        }
+      }
+    }
+  }
+
+  @else {
+    @each $item in $element {
+      $selectors: #{$selectors + $selector + $elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selectors} {
+        @content;
+      }
+    }
+  }
+}
+
+
+
+/* 此方法用于生成穿透样式 */
+
+/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
+@mixin edeep($element...) {
+  $selector: &;
+  $selectors: "";
+
+  @if containsPseudo($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + "." + $B + $elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selector} {
+        :deep() {
+          #{$selectors} {
+            @content;
+          }
+        }
+      }
+    }
+  }
+
+  @else {
+    @each $item in $element {
+      $selectors: #{$selectors + $selector + $elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      :deep() {
+        #{$selectors} {
+          @content;
+        }
+      }
+    }
+  }
+}
+
+
+/* 定义状态（m） */
+@mixin m($modifier...) {
+  $selectors: "";
+
+  @each $item in $modifier {
+    $selectors: #{$selectors + & + $modifierSeparator + $item + ","};
+  }
+
+  @at-root {
+    #{$selectors} {
+      @content;
+    }
+  }
+}
+
+/* 对于需要需要嵌套在 m 底下的 e，调用这个混合宏，一般在切换整个组件的状态，如切换颜色的时候 */
+@mixin me($element...) {
+  $selector: &;
+  $selectors: "";
+
+  @if containsModifier($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + "." + $B + $elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selector} {
+        #{$selectors} {
+          @content;
+        }
+      }
+    }
+  }
+
+  @else {
+    @each $item in $element {
+      $selectors: #{$selectors + $selector + $elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selectors} {
+        @content;
+      }
+    }
+  }
+}
+
+/* 状态，生成 is-$state 类名 */
+@mixin when($states...) {
+  @at-root {
+    @each $state in $states {
+      &.#{$state-prefix + $state} {
+        @content;
+      }
+    }
+  }
+}
+
+/**
+  * 常用混合宏
+  */
+
+/* 单行超出隐藏 */
+@mixin lineEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 多行超出隐藏 */
+@mixin multiEllipsis($lineNumber: 3) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lineNumber;
+  overflow: hidden;
+}
+
+/* 清除浮动 */
+@mixin clearFloat {
+  &::after {
+    display: block;
+    content: "";
+    height: 0;
+    clear: both;
+    overflow: hidden;
+    visibility: hidden;
+  }
+}
+
+/* 0.5px 边框 指定方向*/
+@mixin halfPixelBorder($direction: "bottom", $left: 0, $color: $-color-border-light) {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    display: block;
+    content: "";
+
+    @if ($left==0) {
+      width: 100%;
+    }
+
+    @else {
+      width: calc(100% - #{$left});
+    }
+
+    height: 1px;
+    left: $left;
+
+    @if ($direction=="bottom") {
+      bottom: 0;
+    }
+
+    @else {
+      top: 0;
+    }
+
+    transform: scaleY(0.5);
+    background: $color;
+  }
+}
+
+
+/* 0.5px 边框 环绕 */
+@mixin halfPixelBorderSurround($color: $-color-border-light) {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    display: block;
+    content: ' ';
+    pointer-events: none;
+    width: 200%;
+    height: 200%;
+    left: 0;
+    top: 0;
+    border: 1px solid $color;
+    transform: scale(0.5);
+    box-sizing: border-box;
+    transform-origin: left top;
+  }
+}
+
+@mixin buttonClear {
+  outline: none;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  background: transparent;
+}
+
+/**
+  * 三角形实现尖角样式，适用于背景透明情况
+  * @param $size 三角形高，底边为 $size * 2
+  * @param $bg 三角形背景颜色
+  */
+@mixin triangleArrow($size, $bg) {
+  @include e(arrow) {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+
+  @include e(arrow-down) {
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-top: $size solid $bg;
+    transform: translateX(-50%);
+    bottom: calc(-1 * $size)
+  }
+
+  @include e(arrow-up) {
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-bottom: $size solid $bg;
+    transform: translateX(-50%);
+    top: calc(-1 * $size)
+  }
+
+  @include e(arrow-left) {
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-right: $size solid $bg;
+    transform: translateY(-50%);
+    left: calc(-1 * $size)
+  }
+
+  @include e(arrow-right) {
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-left: $size solid $bg;
+    transform: translateY(-50%);
+    right: calc(-1 * $size)
+  }
+}
+
+/**
+  * 正方形实现尖角样式，适用于背景不透明情况
+  * @param $size 正方形边长
+  * @param $bg 正方形背景颜色
+  * @param $z-index z-index属性值，不得大于外部包裹器
+  * @param $box-shadow 阴影
+*/
+@mixin squareArrow($size, $bg, $z-index, $box-shadow) {
+  @include e(arrow) {
+    position: absolute;
+    width: $size;
+    height: $size;
+    z-index: $z-index;
+  }
+
+  @include e(arrow-down) {
+    transform: translateX(-50%);
+    bottom: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: 0;
+      bottom: calc(-1 * $size / 2);
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-up) {
+    transform: translateX(-50%);
+    top: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: 0;
+      top: calc(-1 * $size / 2);
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-left) {
+    transform: translateY(-50%);
+    left: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: calc(-1 * $size / 2);
+      top: 0;
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-right) {
+    transform: translateY(-50%);
+    right: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      right: calc(-1 * $size / 2);
+      top: 0;
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+}
\ No newline at end of file

src/Components/wd-icon-local/common/base64.ts

+/* eslint-disable */
+const _b64chars: string[] = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/']
+const _mkUriSafe = (src: string): string => src.replace(/[+/]/g, (m0: string) => (m0 === '+' ? '-' : '_')).replace(/=+\$/m, '')
+const fromUint8Array = (src: Uint8Array, rfc4648 = false): string => {
+  let b64 = ''
+  for (let i = 0, l = src.length; i < l; i += 3) {
+    const [a0, a1, a2] = [src[i], src[i + 1], src[i + 2]]
+    const ord = (a0 << 16) | (a1 << 8) | a2
+    b64 += _b64chars[ord >>> 18]
+    b64 += _b64chars[(ord >>> 12) & 63]
+    b64 += typeof a1 !== 'undefined' ? _b64chars[(ord >>> 6) & 63] : '='
+    b64 += typeof a2 !== 'undefined' ? _b64chars[ord & 63] : '='
+  }
+  return rfc4648 ? _mkUriSafe(b64) : b64
+}
+const _btoa: (s: string) => string =
+  typeof btoa === 'function'
+    ? (s: string) => btoa(s)
+    : (s: string) => {
+        if (s.charCodeAt(0) > 255) {
+          throw new RangeError('The string contains invalid characters.')
+        }
+        return fromUint8Array(Uint8Array.from(s, (c: string) => c.charCodeAt(0)))
+      }
+const utob = (src: string): string => unescape(encodeURIComponent(src))
+
+export default function encode(src: string, rfc4648 = false): string {
+  const b64 = _btoa(utob(src))
+  return rfc4648 ? _mkUriSafe(b64) : b64
+}

src/Components/wd-icon-local/common/canvasHelper.ts

+/* eslint-disable */
+/**
+ * 适配 canvas 2d 上下文
+ * @param ctx canvas 2d 上下文
+ * @returns
+ */
+export function canvas2dAdapter(ctx: CanvasRenderingContext2D): UniApp.CanvasContext {
+  return Object.assign(ctx, {
+    setFillStyle(color: string | CanvasGradient) {
+      ctx.fillStyle = color
+    },
+    setStrokeStyle(color: string | CanvasGradient | CanvasPattern) {
+      ctx.strokeStyle = color
+    },
+    setLineWidth(lineWidth: number) {
+      ctx.lineWidth = lineWidth
+    },
+    setLineCap(lineCap: 'butt' | 'round' | 'square') {
+      ctx.lineCap = lineCap
+    },
+
+    setFontSize(font: string) {
+      ctx.font = font
+    },
+    setGlobalAlpha(alpha: number) {
+      ctx.globalAlpha = alpha
+    },
+    setLineJoin(lineJoin: 'bevel' | 'round' | 'miter') {
+      ctx.lineJoin = lineJoin
+    },
+    setTextAlign(align: 'left' | 'center' | 'right') {
+      ctx.textAlign = align
+    },
+    setMiterLimit(miterLimit: number) {
+      ctx.miterLimit = miterLimit
+    },
+    setShadow(offsetX: number, offsetY: number, blur: number, color: string) {
+      ctx.shadowOffsetX = offsetX
+      ctx.shadowOffsetY = offsetY
+      ctx.shadowBlur = blur
+      ctx.shadowColor = color
+    },
+    setTextBaseline(textBaseline: 'top' | 'bottom' | 'middle') {
+      ctx.textBaseline = textBaseline
+    },
+    createCircularGradient() {},
+    draw() {},
+    addColorStop() {}
+  }) as unknown as UniApp.CanvasContext
+}

src/Components/wd-icon-local/common/clickoutside.ts

+/* eslint-disable */
+/*
+ * @Author: weisheng
+ * @Date: 2023-07-02 22:51:06
+ * @LastEditTime: 2024-03-16 19:59:07
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/common/clickoutside.ts
+ * 记得注释
+ */
+let queue: any[] = []
+
+export function pushToQueue(comp: any) {
+  queue.push(comp)
+}
+
+export function removeFromQueue(comp: any) {
+  queue = queue.filter((item) => {
+    return item.$.uid !== comp.$.uid
+  })
+}
+
+export function closeOther(comp: any) {
+  queue.forEach((item) => {
+    if (item.$.uid !== comp.$.uid) {
+      item.$.exposed.close()
+    }
+  })
+}
+
+export function closeOutside() {
+  queue.forEach((item) => {
+    item.$.exposed.close()
+  })
+}

src/Components/wd-icon-local/common/dayjs.ts

+/* eslint-disable */
+import { isDate } from './util'
+
+/* eslint-disable */
+class Dayjs {
+  utc: boolean
+  date: Date
+  timeZone: number
+  timeZoneString: any
+  mYear: any
+  mMonth: any
+  mDay: any
+  mWeek: any
+  mHour: any
+  mMinute: any
+  mSecond: any
+  constructor(dateStr?: string | number | Date) {
+    this.utc = false
+    const parsedDate = this.parseConfig(dateStr)
+    this.date = new Date(parsedDate)
+    this.timeZone = this.date.getTimezoneOffset() / 60
+    this.timeZoneString = this.padNumber(String(-1 * this.timeZone).replace(/^(.)?(\d)/, '$10$200'), 5, '+')
+    this.mYear = this.date.getFullYear()
+    this.mMonth = this.date.getMonth()
+    this.mDay = this.date.getDate()
+    this.mWeek = this.date.getDay()
+    this.mHour = this.date.getHours()
+    this.mMinute = this.date.getMinutes()
+    this.mSecond = this.date.getSeconds()
+  }
+
+  parseConfig(dateStr?:string | number | Date) {
+    if (!dateStr) return new Date()
+    if (isDate(dateStr)) return dateStr
+    if (/^(\d){8}$/.test(dateStr as string)) {
+      this.utc = true
+      return `${(dateStr as string).substr(0, 4)}-${(dateStr as string).substr(4, 2)}-${(dateStr as string).substr(6, 2)}`
+    }
+    return dateStr
+  }
+
+  padNumber(num:string, length:number, padChar:string) {
+    return !num || num.length >= length ? num : `${Array(length + 1 - num.length).join(padChar)}${num}`
+  }
+
+  year() {
+    return this.mYear
+  }
+
+  month() {
+    return this.mMonth
+  }
+
+  unix() {
+    const timeZoneOffset = this.utc ? 60 * this.timeZone * 60 * 1000 : 0
+    return Math.floor((this.date.getTime() + timeZoneOffset) / 1000)
+  }
+
+  toString() {
+    return this.date.toUTCString()
+  }
+
+  startOf(unit:string) {
+    switch (unit) {
+      case 'year':
+        return new Dayjs(new Date(this.year(), 0, 1))
+      case 'month':
+        return new Dayjs(new Date(this.year(), this.month(), 1))
+      default:
+        return this
+    }
+  }
+
+  add(amount:number, unit:string) {
+    let interval
+    switch (unit) {
+      case 'm':
+      case 'minutes':
+        interval = 60
+        break
+      case 'h':
+      case 'hours':
+        interval = 60 * 60
+        break
+      case 'd':
+      case 'days':
+        interval = 24 * 60 * 60
+        break
+      case 'w':
+      case 'weeks':
+        interval = 7 * 24 * 60 * 60
+        break
+      default:
+        interval = 1
+    }
+    const newUnixTime = this.unix() + amount * interval
+    return new Dayjs(1000 * newUnixTime)
+  }
+
+  subtract(amount:number, unit:string) {
+    return this.add(-1 * amount, unit)
+  }
+
+  format(formatStr = 'YYYY-MM-DDTHH:mm:ssZ') {
+    const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+    return formatStr.replace(/Y{2,4}|M{1,2}|D{1,2}|d{1,4}|H{1,2}|m{1,2}|s{1,2}|Z{1,2}/g, (match) => {
+      switch (match) {
+        case 'YY':
+          return String(this.mYear).slice(-2)
+        case 'YYYY':
+          return String(this.mYear)
+        case 'M':
+          return String(this.mMonth + 1)
+        case 'MM':
+          return this.padNumber(String(this.mMonth + 1), 2, '0')
+        case 'D':
+          return String(this.mDay)
+        case 'DD':
+          return this.padNumber(String(this.mDay), 2, '0')
+        case 'd':
+          return String(this.mWeek)
+        case 'dddd':
+          return weekdays[this.mWeek]
+        case 'H':
+          return String(this.mHour)
+        case 'HH':
+          return this.padNumber(String(this.mHour), 2, '0')
+        case 'm':
+          return String(this.mMinute)
+        case 'mm':
+          return this.padNumber(String(this.mMinute), 2, '0')
+        case 's':
+          return String(this.mSecond)
+        case 'ss':
+          return this.padNumber(String(this.mSecond), 2, '0')
+        case 'Z':
+          return `${this.timeZoneString.slice(0, -2)}:00`
+        case 'ZZ':
+          return this.timeZoneString
+        default:
+          return match
+      }
+    })
+  }
+}
+
+export  function dayjs(dateStr?: string | number | Date) {
+ return new Dayjs(dateStr)
+}

src/Components/wd-icon-local/common/event.ts

+/* eslint-disable */
+export const UPDATE_MODEL_EVENT = 'update:modelValue'
+export const CHANGE_EVENT = 'change'
+export const INPUT_EVENT = 'input'
+export const CLICK_EVENT = 'click'
+export const CLOSE_EVENT = 'close'
+export const OPEN_EVENT = 'open'
+export const CONFIRM_EVENT = 'confirm'
+export const CANCEL_EVENT = 'cancel'

src/Components/wd-icon-local/common/props.ts

+/* eslint-disable */
+import type { PropType } from 'vue'
+
+export const unknownProp = null as unknown as PropType<unknown>
+
+export const numericProp = [Number, String]
+
+export const truthProp = {
+  type: Boolean,
+  default: true as const
+}
+
+export const makeRequiredProp = <T>(type: T) => ({
+  type,
+  required: true as const
+})
+
+export const makeArrayProp = <T>() => ({
+  type: Array as PropType<T[]>,
+  default: () => []
+})
+
+export const makeBooleanProp = <T>(defaultVal: T) => ({
+  type: Boolean,
+  default: defaultVal
+})
+
+export const makeNumberProp = <T>(defaultVal: T) => ({
+  type: Number,
+  default: defaultVal
+})
+
+export const makeNumericProp = <T>(defaultVal: T) => ({
+  type: numericProp,
+  default: defaultVal
+})
+
+export const makeStringProp = <T>(defaultVal: T) => ({
+  type: String as unknown as PropType<T>,
+  default: defaultVal
+})
+
+export const baseProps = {
+  /**
+   * 自定义根节点样式
+   */
+  customStyle: makeStringProp(''),
+  /**
+   * 自定义根节点样式类
+   */
+  customClass: makeStringProp('')
+}

src/Components/wd-icon-local/types.ts

+/* eslint-disable */
+import { baseProps, makeRequiredProp, makeStringProp } from './common/props'
+
+export const iconProps = {
+  ...baseProps,
+  /**
+   * 使用的图标名字，可以使用链接图片
+   */
+  name: makeRequiredProp(String),
+  /**
+   * 图标的颜色
+   */
+  color: String,
+  /**
+   * 图标的字体大小
+   */
+  size: String,
+  /**
+   * 类名前缀，用于使用自定义图标
+   */
+  classPrefix: makeStringProp('wd-icon')
+}

src/Components/wd-icon-local/wd-icon.vue

+<!-- eslint-disable -->
+<template>
+  <view @click="handleClick" :class="rootClass" :style="rootStyle">
+    <image v-if="isImageUrl" class="wd-icon__image" :src="name"></image>
+  </view>
+</template>
+
+<script lang="ts">
+/* eslint-disable */
+export default {
+  name: 'wd-icon',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+/* eslint-disable */
+import { computed, ref, watch } from 'vue'
+import { objToStyle } from './common/util'
+import { iconProps } from './types'
+
+const props = defineProps(iconProps)
+const emit = defineEmits(['click'])
+
+const isImageUrl = ref<boolean>(false)
+
+watch(
+  () => props.name,
+  (val) => {
+    isImageUrl.value = val.indexOf('/') > -1
+  },
+  { deep: true, immediate: true }
+)
+
+const rootClass = computed(() => {
+  const prefix = props.classPrefix
+  return `${prefix} ${props.customClass} ${isImageUrl.value ? 'wd-icon--image' : prefix + '-' + props.name}`
+})
+
+const rootStyle = computed(() => {
+  const style: Record<string, any> = {}
+  if (props.color) {
+    style['color'] = props.color
+  }
+  if (props.size) {
+    style['font-size'] = props.size
+  }
+  return `${objToStyle(style)}; ${props.customStyle}`
+})
+
+function handleClick(event: any) {
+  emit('click', event)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

src/pages/index/index.vue

 <template>
   <view class="container">
+    <my-icon name="add-circle" color="#0083ff" />
     <view class="top">
       <!-- 搜索 -->
       <Search background="rgba(255, 255, 255, 0.8)" backIcon="black" @toSearch="toSearch">
@@ -148,6 +149,7 @@
 </template>
 
 <script setup>
+import myIcon from '../../components/wd-icon-local/wd-icon.vue';
 import { onMounted, reactive, ref } from 'vue';
 import { useCountStore } from '@/store';
 import Search from '../../components/index/Search.vue';