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

package/components/wd-loading/index.scss

@@ -0,0 +1,205 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 主色模式颜色
+$loading-color-main: var(--wot-loading-color-main, $primary-6) !default;
+// 常规模式颜色
+$loading-color-normal: var(--wot-loading-color-normal, $icon-secondary) !default;
+// 白色模式颜色
+$loading-color-white: var(--wot-loading-color-white, $icon-white) !default;
+// 文本颜色
+$loading-color-text: var(--wot-loading-color-text, $text-main) !default;
+// 组件基准尺寸
+$loading-size: var(--wot-loading-size, $n-28) !default;
+// 容器宽度
+$loading-size-width: var(--wot-loading-size-width, 1em) !default;
+// 容器高度
+$loading-size-height: var(--wot-loading-size-height, 1em) !default;
+// 圆形加载器描边宽度
+$loading-spinner-circle-stroke-width: var(--wot-loading-spinner-circle-stroke-width, 15%) !default;
+// 圆形加载器圆角
+$loading-spinner-circle-radius: var(--wot-loading-spinner-circle-radius, $radius-radius-full) !default;
+// 旋转动画时长
+$loading-spinner-animation-duration: var(--wot-loading-spinner-animation-duration, 0.8s) !default;
+// 条状点宽度
+$loading-spinner-dot-width: var(--wot-loading-spinner-dot-width, 10%) !default;
+// 条状点高度
+$loading-spinner-dot-height: var(--wot-loading-spinner-dot-height, 25%) !default;
+// 条状点圆角
+$loading-spinner-dot-radius: var(--wot-loading-spinner-dot-radius, $radius-radius-full) !default;
+// 点状加载器单点尺寸
+$loading-spinner-dots-dot-size: var(--wot-loading-spinner-dots-dot-size, 20%) !default;
+// 点状加载器单点圆角
+$loading-spinner-dots-dot-radius: var(--wot-loading-spinner-dots-dot-radius, $radius-radius-full) !default;
+// 加载器内边距
+$loading-spinner-padding: var(--wot-loading-spinner-padding, $padding-ultra-tight) !default;
+// 文本与加载器间距
+$loading-text-spacing: var(--wot-loading-text-spacing, $spacing-extra-tight) !default;
+// 文本字号
+$loading-text-font-size: var(--wot-loading-text-font-size, $typography-body-size-main) !default;
+// 文本行高
+$loading-text-line-height: var(--wot-loading-text-line-height, $typography-body-line--height-size-main) !default;
+
+
+@mixin generate($n, $i: 1) {
+  @if $i <=$n {
+    &:nth-of-type(#{$i}) {
+      transform: rotate(90deg - $i * 30deg);
+      opacity: 1 - calc(0.75 / 12) * ($i - 1);
+    }
+
+    @include generate($n, $i + 1);
+  }
+}
+
+@mixin dot-delay($n, $duration) {
+  @for $i from 1 through $n {
+    &:nth-of-type(#{$i}) {
+      animation-delay: calc(#{$duration} * #{($i - 1)} / 3);
+      animation-duration: $duration;
+    }
+  }
+}
+
+@include b(loading) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $loading-color-main;
+  font-size: $loading-size;
+
+  @include m(horizontal) {
+    flex-direction: row;
+
+    @include me(text){
+      margin-left: $loading-text-spacing;
+      
+    }
+  }
+
+  @include m(vertical) {
+    flex-direction: column;
+
+    @include me(text){
+      margin-top: $loading-text-spacing;
+    }
+  }
+
+  @include e(spinner) {
+    flex: none;
+    position: relative;
+    font-size: inherit;
+    width: $loading-size-width;
+    height: $loading-size-height;
+    animation: wd-rotate $loading-spinner-animation-duration linear infinite;
+    padding: $loading-spinner-padding;
+    box-sizing: border-box;
+
+    @include m(circular) {
+      @include me(spinner-wraper) {
+        border-radius: $loading-spinner-circle-radius;
+        border: none;
+        mask: radial-gradient(closest-side,
+            transparent calc(100% - $loading-spinner-circle-stroke-width),
+            $base-white calc(100% - $loading-spinner-circle-stroke-width),
+            $base-white 100%);
+        background: conic-gradient(from 0deg at 50% 50%, $base-transparent 0deg, $base-transparent 90deg, currentColor 330deg, currentColor 360deg);
+      }
+    }
+
+    @include m(spinner) {
+      animation-timing-function: steps(12);
+    }
+
+    @include m(dots) {
+      animation: none;
+
+      @include me(spinner-wraper) {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      @include me(spinner-dot) {
+        position: static;
+        width: $loading-spinner-dots-dot-size;
+        height: $loading-spinner-dots-dot-size;
+        border-radius: $loading-spinner-dots-dot-radius;
+        background-color: currentColor;
+        animation-name: wd-dotting;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+        animation-fill-mode: both;
+
+        &::before {
+          content: none;
+        }
+
+        @include dot-delay(3, $loading-spinner-animation-duration);
+      }
+    }
+  }
+
+  @include e(spinner-dot) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    @include generate(12);
+
+    &::before {
+      display: block;
+      width: $loading-spinner-dot-width;
+      height: $loading-spinner-dot-height;
+      margin: 0 auto;
+      background-color: currentColor;
+      border-radius: $loading-spinner-dot-radius;
+      content: ' ';
+    }
+  }
+
+  @include e(spinner-wraper) {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(text) {
+    font-size: $loading-text-font-size;
+    line-height: $loading-text-line-height;
+    color: currentColor;
+  }
+}
+
+@keyframes wd-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes wd-dotting {
+  0% {
+    opacity: 0.15;
+  }
+
+  1% {
+    opacity: 0.8;
+  }
+
+  33% {
+    opacity: 0.8;
+  }
+
+  34% {
+    opacity: 0.15;
+  }
+
+  100% {
+    opacity: 0.15;
+  }
+}

package/components/wd-loading/types.ts

@@ -0,0 +1,61 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2026-01-23 14:59:32
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-loading/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeStringProp, numericProp } from '../../common/props'
+
+export type LoadingType = 'circular' | 'spinner' | 'dots' // 提示信息加载状态类型
+
+export type LoadingDirection = 'horizontal' | 'vertical' // 加载指示器方向，可选值：'horizontal' | 'vertical'，默认值：'vertical'
+
+export const loadingProps = {
+  ...baseProps,
+  /**
+   * 自定义加载指示器样式类
+   * 类型: string
+   */
+  customSpinnerClass: makeStringProp(''),
+  /**
+   * 加载指示器类型
+   * 类型: LoadingType
+   * 可选值: 'circular' | 'spinner' | 'dots'
+   * 默认值: 'circular'
+   */
+  type: makeStringProp<LoadingType>('circular'),
+  /**
+   * 设置加载指示器颜色
+   * 类型: string
+   */
+  color: String,
+  /**
+   * 设置加载指示器大小
+   * 类型: string | number
+   */
+  size: numericProp,
+  /**
+   * 加载指示器方向
+   * 类型: LoadingDirection
+   * 可选值: 'horizontal' | 'vertical'
+   * 默认值: 'vertical'
+   */
+  direction: makeStringProp<LoadingDirection>('vertical'),
+  /**
+   * 加载指示器文字
+   * 类型: string
+   */
+  text: String,
+  /**
+   * 是否继承父元素颜色
+   * 类型: boolean
+   * 默认值: false
+   */
+  inheritColor: Boolean
+}
+
+export type LoadingProps = ExtractPropTypes<typeof loadingProps>

package/components/wd-loading/wd-loading.vue

@@ -0,0 +1,70 @@
+<template>
+  <view :class="`wd-loading wd-loading--${direction} ${customClass}`" :style="rootStyle">
+    <view :class="`wd-loading__spinner wd-loading__spinner--${type} ${customSpinnerClass}`" :style="spinnerStyle">
+      <template v-if="type === 'circular'">
+        <view class="wd-loading__spinner-wraper"></view>
+      </template>
+      <template v-if="type === 'spinner'">
+        <view class="wd-loading__spinner-wraper">
+          <view class="wd-loading__spinner-dot" v-for="i in dots" :key="i"></view>
+        </view>
+      </template>
+      <template v-else-if="type === 'dots'">
+        <view class="wd-loading__spinner-wraper">
+          <view class="wd-loading__spinner-dot" v-for="i in 3" :key="i"></view>
+        </view>
+      </template>
+    </view>
+    <view class="wd-loading__text" v-if="$slots.default || text">
+      <slot>{{ text }}</slot>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-loading',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+
+import { objToStyle, addUnit, isDef } from '../../common/util'
+import { loadingProps } from './types'
+
+const props = defineProps(loadingProps)
+
+// 长度为 12 的数组
+const dots = Array.from({ length: 12 }, (_, i) => i)
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.color)) {
+    style.color = props.color
+  }
+  if (props.inheritColor) {
+    style.color = 'inherit'
+  }
+  return `${objToStyle(style)} ${props.customStyle}`
+})
+
+const spinnerStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.size)) {
+    style.height = addUnit(props.size)
+    style.width = addUnit(props.size)
+  }
+  return objToStyle(style)
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-loadmore/index.scss

@@ -0,0 +1,62 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 组件最小高度
+$loadmore-height: var(--wot-loadmore-height, $n-48) !default;
+// 组件内边距
+$loadmore-padding: var(--wot-loadmore-padding, $spacing-main $spacing-loose) !default;
+// 默认文字颜色
+$loadmore-color: var(--wot-loadmore-color, $text-secondary) !default;
+// 默认文字字号
+$loadmore-font-size: var(--wot-loadmore-font-size, $typography-body-size-main) !default;
+// 默认文字行高
+$loadmore-line-height: var(--wot-loadmore-line-height, $typography-body-line--height-size-main) !default;
+// 加载图标尺寸
+$loadmore-loading-size: var(--wot-loadmore-loading-size, $n-28) !default;
+// 加载图标与文字间距
+$loadmore-loading-spacing: var(--wot-loadmore-loading-spacing, $spacing-tight) !default;
+// 刷新态文字颜色
+$loadmore-refresh-color: var(--wot-loadmore-refresh-color, $primary-6) !default;
+// 刷新图标字号
+$loadmore-refresh-font-size: var(--wot-loadmore-refresh-font-size, $typography-body-size-extra-large) !default;
+// 刷新图标行高
+$loadmore-refresh-line-height: var(--wot-loadmore-refresh-line-height, $typography-body-line--height-size-extra-large) !default;
+// 重试文案与图标间距
+$loadmore-retry-spacing: var(--wot-loadmore-retry-spacing, 0 $spacing-extra-tight) !default;
+
+@include b(loadmore) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: $loadmore-height;
+  padding: $loadmore-padding;
+  color: $loadmore-color;
+
+  @include edeep(divider) {
+    width: 100%;
+    margin: $spacing-zero;
+  }
+
+  @include edeep(loading) {
+    margin-right: $loadmore-loading-spacing;
+    font-size: $loadmore-loading-size;
+  }
+
+  @include e(text,refresh-text) {
+    font-size: $loadmore-font-size;
+    line-height: $loadmore-line-height;
+  }
+
+  @include e(refresh-text) {
+    margin: $loadmore-retry-spacing;
+    color: $loadmore-refresh-color;
+  }
+
+  @include edeep(refresh) {
+    color: $loadmore-refresh-color;
+    font-size: $loadmore-refresh-font-size;
+    line-height: $loadmore-refresh-line-height;
+  }
+}

package/components/wd-loadmore/types.ts

@@ -0,0 +1,42 @@
+import type { PropType } from 'vue'
+import { baseProps } from '../../common/props'
+import type { LoadingProps } from '../wd-loading/types'
+
+/**
+ * loadmore 组件的加载状态
+ * - loading: 加载中
+ * - error: 加载失败
+ * - finished: 加载完成
+ */
+export type LoadMoreState = 'loading' | 'error' | 'finished'
+
+export const loadmoreProps = {
+  ...baseProps,
+  /**
+   * 加载状态
+   * 可选值: 'loading' | 'error' | 'finished'
+   * 默认值: undefined
+   */
+  state: String as PropType<LoadMoreState>,
+  /**
+   * 加载中的提示文案
+   * 默认值: 国际化文案
+   */
+  loadingText: String,
+  /**
+   * 加载完成的提示文案
+   * 默认值: 国际化文案
+   */
+  finishedText: String,
+  /**
+   * 加载失败的提示文案
+   * 默认值: 国际化文案
+   */
+  errorText: String,
+  /**
+   * Loading 组件配置属性
+   * 类型: Partial<LoadingProps>
+   * 默认值: {}
+   */
+  loadingProps: Object as PropType<Partial<LoadingProps>>
+}

package/components/wd-loadmore/wd-loadmore.vue

@@ -0,0 +1,68 @@
+<template>
+  <view :class="['wd-loadmore', customClass]" :style="customStyle" @click="reload">
+    <slot v-if="state === 'finished'" name="finished">
+      <wd-divider custom-class="wd-loadmore__divider">{{ finishedText || translate('finished') }}</wd-divider>
+    </slot>
+    <slot v-else-if="state === 'error'" name="error">
+      <text class="wd-loadmore__text">{{ errorText || translate('error') }}</text>
+      <text class="wd-loadmore__refresh-text">{{ translate('retry') }}</text>
+      <wd-icon name="refresh" custom-class="wd-loadmore__refresh" />
+    </slot>
+    <slot v-else-if="state === 'loading'" name="loading">
+      <wd-loading v-bind="customLoadingProps" />
+      <text class="wd-loadmore__text">{{ loadingText || translate('loading') }}</text>
+    </slot>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-loadmore',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdDivider from '../wd-divider/wd-divider.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, ref } from 'vue'
+import { useTranslate } from '../../composables/useTranslate'
+import { loadmoreProps, type LoadMoreState } from './types'
+import type { LoadingProps } from '../wd-loading/types'
+import { isDef, isUndefined, omitBy } from '../../common/util'
+
+// 计算 Loading 组件的属性 - 合并用户传入的属性和组件需要的自定义样式
+const customLoadingProps = computed(() => {
+  const loadingProps: Partial<LoadingProps> = isDef(props.loadingProps) ? omitBy(props.loadingProps, isUndefined) : {}
+  loadingProps.customClass = `wd-loadmore__loading ${loadingProps.customClass || ''}`
+  return loadingProps
+})
+
+const props = defineProps(loadmoreProps)
+const emit = defineEmits(['reload'])
+
+const { translate } = useTranslate('loadmore')
+
+/** 当前加载状态 */
+const currentState = ref<LoadMoreState | null>(null)
+
+/**
+ * 处理重新加载操作 - 当加载失败时，点击可触发 reload 事件
+ */
+function reload() {
+  if (props.state !== 'error') return
+  currentState.value = 'loading'
+  emit('reload')
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-navbar/index.scss

@@ -0,0 +1,96 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 导航栏高度
+$navbar-height: var(--wot-navbar-height, $n-44) !default;
+// 导航栏背景色
+$navbar-bg: var(--wot-navbar-bg, $filled-oppo) !default;
+// 标题文字颜色
+$navbar-color: var(--wot-navbar-color, $text-main) !default;
+// 标题字重
+$navbar-title-font-weight: var(--wot-navbar-title-font-weight, $font-weight-medium) !default;
+// 标题字号
+$navbar-title-font-size: var(--wot-navbar-title-font-size, $typography-title-size-main) !default;
+// 描述区域字号
+$navbar-desc-font-size: var(--wot-navbar-desc-font-size, $typography-body-size-extra-large) !default;
+// 描述区域文字颜色
+$navbar-desc-color: var(--wot-navbar-desc-color, $text-main) !default;
+// 箭头图标大小
+$navbar-arrow-size: var(--wot-navbar-arrow-size, $n-24) !default;
+// 禁用态透明度
+$navbar-opacity-disabled: var(--wot-navbar-opacity-disabled, $opacity-disabled) !default;
+// 左侧内边距
+$navbar-left-padding: var(--wot-navbar-left-padding, $padding-zero $padding-loose) !default;
+// 固定定位层级
+$navbar-z-index: var(--wot-navbar-z-index, 10) !default;
+
+@include b(navbar) {
+  position: relative;
+  text-align: center;
+  user-select: none;
+  height: $navbar-height;
+  line-height: $navbar-height;
+  background-color: $navbar-bg;
+  box-sizing: content-box;
+
+  @include e(content) {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+
+  @include e(title) {
+    max-width: 60%;
+    height: 100%;
+    margin: 0 auto;
+    color: $navbar-color;
+    font-weight: $navbar-title-font-weight;
+    font-size: $navbar-title-font-size;
+    @include lineEllipsis();
+  }
+
+  @include e(text) {
+    display: inline-block;
+    vertical-align: middle;
+    color: $navbar-desc-color;
+  }
+
+  @include e(left, right, capsule) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    font-size: $navbar-desc-font-size;
+    display: flex;
+    align-items: center;
+    padding: $navbar-left-padding;
+
+    @include when(disabled) {
+      opacity: $navbar-opacity-disabled;
+    }
+  }
+
+  @include e(left, capsule) {
+    left: 0;
+  }
+
+  @include e(right) {
+    right: 0;
+  }
+
+  @include edeep(arrow) {
+    font-size: $navbar-arrow-size;
+    color: $navbar-color;
+  }
+
+  @include when(border) {
+    @include halfPixelBorder('bottom');
+  }
+
+  @include when(fixed) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: $navbar-z-index;
+  }
+}

package/components/wd-navbar/types.ts

@@ -0,0 +1,74 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp } from '../../common/props'
+
+export const navbarProps = {
+  ...baseProps,
+  /**
+   * 标题文字
+   * 类型: string
+   * 默认值: ''
+   */
+  title: String,
+  /**
+   * 左侧文案
+   * 类型: string
+   * 默认值: ''
+   */
+  leftText: String,
+  /**
+   * 右侧文案
+   * 类型: string
+   * 默认值: ''
+   */
+  rightText: String,
+  /**
+   * 是否显示左侧箭头
+   * 类型: boolean
+   * 默认值: false
+   */
+  leftArrow: makeBooleanProp(false),
+  /**
+   * 是否显示下边框
+   * 类型: boolean
+   * 默认值: false
+   */
+  bordered: makeBooleanProp(false),
+  /**
+   * 是否固定到顶部
+   * 类型: boolean
+   * 默认值: false
+   */
+  fixed: makeBooleanProp(false),
+  /**
+   * 固定在顶部时，是否在标签位置生成一个等高的占位元素
+   * 类型: boolean
+   * 默认值: false
+   */
+  placeholder: makeBooleanProp(false),
+  /**
+   * 导航栏 z-index
+   * 类型: number
+   * 默认值: 10
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * 是否开启顶部安全区适配
+   * 类型: boolean
+   * 默认值: false
+   */
+  safeAreaInsetTop: makeBooleanProp(false),
+  /**
+   * 是否禁用左侧按钮，禁用时透明度降低，且无法点击
+   * 类型: boolean
+   * 默认值: false
+   */
+  leftDisabled: makeBooleanProp(false),
+  /**
+   * 是否禁用右侧按钮，禁用时透明度降低，且无法点击
+   * 类型: boolean
+   * 默认值: false
+   */
+  rightDisabled: makeBooleanProp(false)
+}
+
+export type NavbarProps = ExtractPropTypes<typeof navbarProps>