@tplc/wot 0.0.1

package/components/wd-circle/index.scss

@@ -0,0 +1,18 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/_mixin';
+
+@include b(circle) {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+
+  @include e(text) {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    color: $-circle-text-color;
+    transform: translateY(-50%);
+  }
+}

package/components/wd-circle/types.ts

@@ -0,0 +1,54 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+// 进度条端点的形状，可选值为 "butt" | "round" | "square"
+export type StrokeLinecapType = 'butt' | 'round' | 'square'
+
+export const circleProps = {
+  ...baseProps,
+  /**
+   * 当前进度
+   */
+  modelValue: makeNumberProp(0),
+  /**
+   * 圆环直径，默认单位为 px
+   */
+  size: makeNumberProp(100),
+  /**
+   * 进度条颜色，传入对象格式可以定义渐变色
+   */
+  color: {
+    type: [String, Object] as PropType<string | Record<string, string>>,
+    default: '#4d80f0',
+  },
+  /**
+   * 轨道颜色
+   */
+  layerColor: makeStringProp('#EBEEF5'),
+  /**
+   * 填充颜色
+   */
+  fill: String,
+  /**
+   * 动画速度（单位为 rate/s）
+   */
+  speed: makeNumberProp(50),
+  /**
+   * 文字
+   */
+  text: String,
+  /**
+   * 进度条宽度 单位px
+   */
+  strokeWidth: makeNumberProp(10),
+  /**
+   * 进度条端点的形状，可选值为 "butt" | "round" | "square"
+   */
+  strokeLinecap: makeStringProp<StrokeLinecapType>('round'),
+  /**
+   * 是否顺时针增加
+   */
+  clockwise: makeBooleanProp(true),
+}
+
+export type CircleProps = ExtractPropTypes<typeof circleProps>

package/components/wd-circle/wd-circle.vue

@@ -0,0 +1,318 @@
+<template>
+  <view :class="`wd-circle ${customClass}`" :style="customStyle">
+    <!-- #ifdef MP-WEIXIN -->
+    <canvas :style="canvasStyle" :id="canvasId" :canvas-id="canvasId" type="2d"></canvas>
+    <!-- #endif -->
+    <!-- #ifndef MP-WEIXIN -->
+    <canvas
+      :width="canvasSize"
+      :height="canvasSize"
+      :style="canvasStyle"
+      :id="canvasId"
+      :canvas-id="canvasId"
+    ></canvas>
+    <!-- #endif -->
+
+    <view v-if="!text" class="wd-circle__text">
+      <!-- 自定义提示内容 -->
+      <slot></slot>
+    </view>
+
+    <text v-else class="wd-circle__text">
+      {{ text }}
+    </text>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-circle',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+<script lang="ts" setup>
+import {
+  computed,
+  getCurrentInstance,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from 'vue'
+import { addUnit, isObj, objToStyle, uuid } from '../common/util'
+import { circleProps } from './types'
+import { canvas2dAdapter } from '../common/canvasHelper'
+
+// 大于等于0且小于等于100
+function format(rate: number) {
+  return Math.min(Math.max(rate, 0), 100)
+}
+// 结束角度
+const PERIMETER = 2 * Math.PI
+// 开始角度
+const BEGIN_ANGLE = -Math.PI / 2
+const STEP = 1
+
+const props = defineProps(circleProps)
+
+const progressColor = ref<string | CanvasGradient>('') // 进度条颜色
+
+const currentValue = ref<number>(0) // 当前值
+const interval = ref<any>(null) // 定时器
+const pixelRatio = ref<number>(1) // 像素比
+const canvasId = ref<string>(`wd-circle${uuid()}`) // canvasId
+let ctx: UniApp.CanvasContext | null = null
+
+// canvas渲染大小
+const canvasSize = computed(() => {
+  let size = props.size
+  // #ifdef MP-ALIPAY
+  size = size * pixelRatio.value
+  // #endif
+
+  return size
+})
+
+// 进度条宽度
+const sWidth = computed(() => {
+  let sWidth = props.strokeWidth
+  // #ifdef MP-ALIPAY
+  sWidth = sWidth * pixelRatio.value
+  // #endif
+  return sWidth
+})
+
+// Circle 样式
+const canvasStyle = computed(() => {
+  const style = {
+    width: addUnit(props.size),
+    height: addUnit(props.size),
+  }
+  return `${objToStyle(style)};`
+})
+
+// 监听目标数值变化
+watch(
+  () => props.modelValue,
+  () => {
+    reRender()
+  },
+  { immediate: true },
+)
+
+// 监听Circle大小变化
+watch(
+  () => props.size,
+  () => {
+    const timer = setTimeout(() => {
+      drawCircle(currentValue.value)
+      clearTimeout(timer)
+    }, 50)
+  },
+  { immediate: false },
+)
+
+// 监听进度条颜色变化
+watch(
+  () => props.color,
+  () => {
+    drawCircle(currentValue.value)
+  },
+  { immediate: false, deep: true },
+)
+
+onBeforeMount(() => {
+  pixelRatio.value = uni.getSystemInfoSync().pixelRatio
+})
+
+onMounted(() => {
+  currentValue.value = props.modelValue
+  drawCircle(currentValue.value)
+})
+
+onUnmounted(() => {
+  clearTimeInterval()
+})
+
+const { proxy } = getCurrentInstance() as any
+/**
+ * 获取canvas上下文
+ */
+function getContext() {
+  return new Promise<UniApp.CanvasContext>((resolve) => {
+    if (ctx) {
+      return resolve(ctx)
+    }
+    // #ifndef MP-WEIXIN
+    ctx = uni.createCanvasContext(canvasId.value, proxy)
+    resolve(ctx)
+    // #endif
+    // #ifdef MP-WEIXIN
+    uni
+      .createSelectorQuery()
+      .in(proxy)
+      .select(`#${canvasId.value}`)
+      .node((res) => {
+        if (res && res.node) {
+          const canvas = res.node
+          ctx = canvas2dAdapter(canvas.getContext('2d') as CanvasRenderingContext2D)
+          canvas.width = props.size * pixelRatio.value
+          canvas.height = props.size * pixelRatio.value
+          ctx.scale(pixelRatio.value, pixelRatio.value)
+          resolve(ctx)
+        }
+      })
+      .exec()
+    // #endif
+  })
+}
+
+/**
+ * 设置canvas
+ */
+function presetCanvas(
+  context: any,
+  strokeStyle: string | CanvasGradient,
+  beginAngle: number,
+  endAngle: number,
+  fill?: string,
+) {
+  let width = sWidth.value
+  const position = canvasSize.value / 2
+  if (!fill) {
+    width = width / 2
+  }
+  const radius = position - width / 2
+  context.strokeStyle = strokeStyle
+  context.setStrokeStyle(strokeStyle)
+  context.setLineWidth(width)
+  context.setLineCap(props.strokeLinecap)
+
+  context.beginPath()
+  context.arc(position, position, radius, beginAngle, endAngle, !props.clockwise)
+  context.stroke()
+  if (fill) {
+    context.setLineWidth(width)
+    context.setFillStyle(fill)
+    context.fill()
+  }
+}
+/**
+ * 渲染管道
+ */
+function renderLayerCircle(context: UniApp.CanvasContext) {
+  presetCanvas(context, props.layerColor, 0, PERIMETER, props.fill)
+}
+
+/**
+ * 渲染进度条
+ */
+function renderHoverCircle(context: UniApp.CanvasContext, formatValue: number) {
+  // 结束角度
+  const progress = PERIMETER * (formatValue / 100)
+  const endAngle = props.clockwise ? BEGIN_ANGLE + progress : 3 * Math.PI - (BEGIN_ANGLE + progress)
+
+  // 设置进度条颜色
+  if (isObj(props.color)) {
+    const LinearColor = context.createLinearGradient(canvasSize.value, 0, 0, 0)
+    Object.keys(props.color)
+      .sort((a, b) => parseFloat(a) - parseFloat(b))
+      .map((key) =>
+        LinearColor.addColorStop(parseFloat(key) / 100, (props.color as Record<string, any>)[key]),
+      )
+    progressColor.value = LinearColor
+  } else {
+    progressColor.value = props.color
+  }
+  presetCanvas(context, progressColor.value, BEGIN_ANGLE, endAngle)
+}
+
+/**
+ * 渲染圆点
+ * 进度值为0时渲染一个圆点
+ */
+function renderDot(context: UniApp.CanvasContext) {
+  const strokeWidth = sWidth.value // 管道宽度=小圆点直径
+  const position = canvasSize.value / 2 // 坐标
+  // 设置进度条颜色
+  if (isObj(props.color)) {
+    const LinearColor = context.createLinearGradient(canvasSize.value, 0, 0, 0)
+    Object.keys(props.color)
+      .sort((a, b) => parseFloat(a) - parseFloat(b))
+      .map((key) =>
+        LinearColor.addColorStop(parseFloat(key) / 100, (props.color as Record<string, any>)[key]),
+      )
+    progressColor.value = LinearColor
+  } else {
+    progressColor.value = props.color
+  }
+  context.beginPath()
+  context.arc(position, strokeWidth / 4, strokeWidth / 4, 0, PERIMETER)
+  context.setFillStyle(progressColor.value)
+  context.fill()
+}
+
+/**
+ * 画圆
+ */
+function drawCircle(currentValue: number) {
+  getContext().then((context) => {
+    context.clearRect(0, 0, canvasSize.value, canvasSize.value)
+    renderLayerCircle(context)
+
+    const formatValue = format(currentValue)
+    if (formatValue !== 0) {
+      renderHoverCircle(context, formatValue)
+    } else {
+      renderDot(context)
+    }
+    context.draw()
+  })
+}
+
+/**
+ * Circle组件渲染
+ * 当前进度值变化时重新渲染Circle组件
+ */
+function reRender() {
+  // 动画通过定时器渲染
+  if (props.speed <= 0 || props.speed > 1000) {
+    drawCircle(props.modelValue)
+    return
+  }
+  clearTimeInterval()
+  currentValue.value = currentValue.value || 0
+  const run = () => {
+    interval.value = setTimeout(() => {
+      if (currentValue.value !== props.modelValue) {
+        if (Math.abs(currentValue.value - props.modelValue) < STEP) {
+          currentValue.value = props.modelValue
+        } else if (currentValue.value < props.modelValue) {
+          currentValue.value += STEP
+        } else {
+          currentValue.value -= STEP
+        }
+        drawCircle(currentValue.value)
+        run()
+      } else {
+        clearTimeInterval()
+      }
+    }, 1000 / props.speed)
+  }
+  run()
+}
+/**
+ * 清除定时器
+ */
+function clearTimeInterval() {
+  interval.value && clearTimeout(interval.value)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/wd-col/index.scss

@@ -0,0 +1,19 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+$i: 1;
+
+@include b(col) {
+  box-sizing: border-box;
+  float: left;
+}
+
+@while $i <= 24 {
+  .wd-col__#{$i} {
+    width: calc(100% / 24 * $i);
+  }
+  .wd-col__offset-#{$i} {
+    margin-left: calc(100% / 24 * $i);
+  }
+  $i: $i + 1;
+}

package/components/wd-col/types.ts

@@ -0,0 +1,15 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeNumberProp } from '../common/props'
+
+export const colProps = {
+  ...baseProps,
+  /**
+   * 列元素宽度
+   */
+  span: makeNumberProp(24),
+  /**
+   * 列元素偏移距离
+   */
+  offset: makeNumberProp(0),
+}
+export type ColProps = ExtractPropTypes<typeof colProps>

package/components/wd-col/wd-col.vue

@@ -0,0 +1,91 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2023-06-13 11:34:35
+ * @LastEditTime: 2024-03-15 16:49:17
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-col\wd-col.vue
+ * 记得注释
+-->
+<template>
+  <view
+    :class="[
+      'wd-col',
+      span && 'wd-col__' + span,
+      offset && 'wd-col__offset-' + offset,
+      customClass,
+    ]"
+    :style="style"
+  >
+    <!-- 每一列 -->
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-col',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, watch, ref } from 'vue'
+import { useParent } from '../composables/useParent'
+import { ROW_KEY } from '../wd-row/types'
+import { colProps } from './types'
+
+const props = defineProps(colProps)
+
+const style = ref<string>('')
+
+const { parent: row } = useParent(ROW_KEY)
+
+const gutter = computed(() => {
+  if (row) {
+    return row.props.gutter || 0
+  } else {
+    return 0
+  }
+})
+
+watch([() => props.span, () => props.offset], () => {
+  check()
+})
+
+watch(
+  () => gutter.value,
+  (newVal) => {
+    setGutter(newVal || 0)
+  },
+  { deep: true, immediate: true },
+)
+
+function check() {
+  const { span, offset } = props
+  if (span < 0 || offset < 0) {
+    console.error(
+      '[wot-design] warning(wd-col): attribute span/offset must be greater than or equal to 0',
+    )
+  }
+}
+
+function setGutter(gutter: number) {
+  const padding = `${gutter / 2}px`
+  const customStyle =
+    gutter > 0
+      ? `padding-left: ${padding}; padding-right: ${padding};background-clip: content-box;`
+      : ''
+
+  if (customStyle !== style.value) {
+    style.value = customStyle
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>