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

package/components/wd-calendar-view/yearPanel/year-panel.vue

@@ -0,0 +1,249 @@
+<template>
+  <view class="wd-year-panel">
+    <!-- 切换模式导航控制栏 -->
+    <view class="wd-year-panel__controls" v-if="switchMode !== 'none'">
+      <view class="wd-year-panel__control">
+        <wd-icon
+          name="left"
+          :custom-class="`wd-year-panel__control-icon ${isPrevYearDisabled ? 'is-disabled' : ''}`"
+          @click="!isPrevYearDisabled && changeYear(-1)"
+        />
+      </view>
+      <text class="wd-year-panel__controls-title">{{ controlsTitle }}</text>
+      <view class="wd-year-panel__control">
+        <wd-icon
+          name="right"
+          :custom-class="`wd-year-panel__control-icon ${isNextYearDisabled ? 'is-disabled' : ''}`"
+          @click="!isNextYearDisabled && changeYear(1)"
+        />
+      </view>
+    </view>
+
+    <!-- 面板标题（仅滚动模式显示） -->
+    <view v-if="showPanelTitle && switchMode === 'none'" class="wd-year-panel__title">{{ title }}</view>
+
+    <scroll-view
+      class="wd-year-panel__container"
+      :style="`height: ${scrollHeight}px`"
+      :scroll-y="true"
+      :scroll-top="scrollTop"
+      @scroll="switchMode === 'none' ? yearScroll($event) : undefined"
+    >
+      <view v-for="(item, index) in displayYears" :key="index" :id="`year${index}`">
+        <year
+          :type="type"
+          :date="item.date"
+          :value="value"
+          :min-date="minDate"
+          :max-date="maxDate"
+          :max-range="maxRange"
+          :formatter="formatter"
+          :range-prompt="rangePrompt"
+          :allow-same-day="allowSameDay"
+          :default-time="defaultTime"
+          :showTitle="switchMode === 'none' && index !== 0"
+          @change="handleDateChange"
+        />
+      </view>
+    </scroll-view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, onMounted } from 'vue'
+import { compareYear, formatYearTitle, getYears } from '../utils'
+import { isArray, isNumber, pause } from '../../../common/util'
+import Year from '../year/year.vue'
+import { yearPanelProps, type YearInfo, type YearPanelExpose } from './types'
+
+const props = defineProps(yearPanelProps)
+const emit = defineEmits(['change'])
+
+const scrollTop = ref<number>(0) // 滚动位置
+const scrollIndex = ref<number>(0) // 当前显示的年份索引
+
+/**
+ * 当前显示的年份（仅在 switchMode !== 'none' 时使用）
+ */
+const currentDisplayYear = ref<number>(new Date().getFullYear())
+
+// 滚动区域的高度
+const scrollHeight = computed(() => {
+  const scrollHeight: number = props.panelHeight + (props.showPanelTitle ? 26 : 16)
+  return scrollHeight
+})
+
+// 年份信息（滚动模式）
+const years = computed<YearInfo[]>(() => {
+  return getYears(props.minDate, props.maxDate).map((year, index) => {
+    return {
+      date: year,
+      height: index === 0 ? 188 : 228
+    }
+  })
+})
+
+/**
+ * 当前显示年份的时间戳（仅在 switchMode !== 'none' 时使用）
+ */
+const currentYearDate = computed(() => {
+  return new Date(currentDisplayYear.value, 0, 1).getTime()
+})
+
+/**
+ * 用于渲染的年份列表
+ * - switchMode = 'none'：返回所有年份（滚动模式）
+ * - switchMode = 'month' | 'year-month'：返回当前显示年份（固定模式）
+ */
+const displayYears = computed<YearInfo[]>(() => {
+  if (props.switchMode === 'none') {
+    return years.value
+  }
+  // 固定模式：只返回当前显示的年份
+  return [
+    {
+      date: currentYearDate.value,
+      height: 188
+    }
+  ]
+})
+
+/**
+ * 控制栏标题（切换模式下显示的年份）
+ */
+const controlsTitle = computed(() => {
+  return formatYearTitle(currentYearDate.value)
+})
+
+// 标题（滚动模式下显示的年份）
+const title = computed(() => {
+  return formatYearTitle(years.value[scrollIndex.value].date)
+})
+
+/**
+ * 是否禁用上一年按钮
+ */
+const isPrevYearDisabled = computed(() => {
+  const minYear = new Date(props.minDate).getFullYear()
+  return currentDisplayYear.value <= minYear
+})
+
+/**
+ * 是否禁用下一年按钮
+ */
+const isNextYearDisabled = computed(() => {
+  const maxYear = new Date(props.maxDate).getFullYear()
+  return currentDisplayYear.value >= maxYear
+})
+
+/**
+ * 切换年份
+ * @param delta 偏移量，-1 表示上一年，1 表示下一年
+ */
+function changeYear(delta: number) {
+  currentDisplayYear.value += delta
+}
+
+onMounted(() => {
+  // 初始化当前显示年份（switchMode !== 'none' 时使用）
+  if (props.switchMode !== 'none') {
+    initCurrentDisplayYear()
+  }
+  scrollIntoView()
+})
+
+/**
+ * 初始化当前显示年份
+ * 根据选中值或当前日期设置初始年份
+ */
+function initCurrentDisplayYear() {
+  let activeDate: number | null = null
+
+  if (isArray(props.value)) {
+    activeDate = props.value![0]
+  } else if (isNumber(props.value)) {
+    activeDate = props.value
+  }
+
+  if (!activeDate) {
+    activeDate = Date.now()
+  }
+
+  currentDisplayYear.value = new Date(activeDate).getFullYear()
+}
+
+async function scrollIntoView() {
+  await pause()
+  let activeDate: number | null = null
+  if (isArray(props.value)) {
+    activeDate = props.value![0]
+  } else if (isNumber(props.value)) {
+    activeDate = props.value
+  }
+
+  if (!activeDate) {
+    activeDate = Date.now()
+  }
+
+  let top: number = 0
+  for (let index = 0; index < years.value.length; index++) {
+    if (compareYear(years.value[index].date, activeDate) === 0) {
+      break
+    }
+    top += years.value[index] ? Number(years.value[index].height) : 0
+  }
+  scrollTop.value = 0
+  if (top > 0) {
+    await pause()
+    scrollTop.value = top + 40
+  }
+}
+
+const yearScroll = (event: { detail: { scrollTop: number } }) => {
+  if (years.value.length <= 1) {
+    return
+  }
+  const scrollTop = Math.max(0, event.detail.scrollTop)
+  doSetSubtitle(scrollTop)
+}
+
+/**
+ * 设置小标题
+ * scrollTop 滚动条位置
+ */
+function doSetSubtitle(scrollTop: number) {
+  let height: number = 0 // 月份高度和
+  for (let index = 0; index < years.value.length; index++) {
+    height = height + years.value[index].height
+    if (scrollTop < height) {
+      scrollIndex.value = index
+      return
+    }
+  }
+}
+
+function handleDateChange({ value }: { value: number[] }) {
+  emit('change', {
+    value
+  })
+}
+
+defineExpose<YearPanelExpose>({
+  scrollIntoView
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-card/index.scss

@@ -0,0 +1,104 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 卡片背景色
+$card-bg: var(--wot-card-bg, $filled-oppo) !default;
+// 卡片边框颜色
+$card-border-color: var(--wot-card-border-color, $border-light) !default;
+// 卡片圆角
+$card-radius: var(--wot-card-radius, $radius-large) !default;
+// 卡片阴影
+$card-shadow: var(--wot-card-shadow, $n-0 $n-2 $n-8 $opac-2_04) !default;
+// 卡片悬浮阴影
+$card-shadow-hover: var(--wot-card-shadow-hover, $n-0 $n-4 $n-16 $opac-3_08) !default;
+// 过渡动画
+$card-transition: var(--wot-card-transition, box-shadow 0.3s ease) !default;
+// 卡片底部间距
+$card-margin-bottom: var(--wot-card-margin-bottom, $spacing-extra-loose) !default;
+// 卡片水平方向外边距
+$card-margin-horizontal: var(--wot-card-margin-horizontal, $spacing-extra-loose) !default;
+// 标题颜色
+$card-title-color: var(--wot-card-title-color, $text-main) !default;
+// 标题字号
+$card-title-font-size: var(--wot-card-title-font-size, $typography-title-size-main) !default;
+// 标题字重
+$card-title-font-weight: var(--wot-card-title-font-weight, $font-weight-medium) !default;
+// 标题行高
+$card-title-line-height: var(--wot-card-title-line-height, $typography-body-line--height-size-main) !default;
+// 标题内间距
+$card-title-padding: var(--wot-card-title-padding, $padding-loose $padding-extra-loose) !default;
+// 内容文字颜色
+$card-content-color: var(--wot-card-content-color, $text-secondary) !default;
+// 内容字号
+$card-content-font-size: var(--wot-card-content-font-size, $typography-body-size-main) !default;
+// 内容行高
+$card-content-line-height: var(--wot-card-content-line-height, $typography-body-line--height-size-main) !default;
+// 内容内边距
+$card-content-padding: var(--wot-card-content-padding, $padding-main $padding-loose) !default;
+// 内容区域边框颜色
+$card-content-border-color: var(--wot-card-content-border-color, $border-main) !default;
+// 底部内边距
+$card-footer-padding: var(--wot-card-footer-padding, $padding-tight $padding-loose) !default;
+// 底部分割线颜色
+$card-footer-border-color: var(--wot-card-footer-border-color, $border-main) !default;
+
+
+@include b(card) {
+  position: relative;
+  background-color: $card-bg;
+  border-radius: $card-radius;
+  box-shadow: $card-shadow;
+  overflow: hidden;
+  transition: $card-transition;
+  margin: 0 $card-margin-horizontal;
+
+  &:not(:last-child) {
+    margin-bottom: $card-margin-bottom;
+  }
+
+  @include e(title) {
+    width: 100%;
+    padding: $card-title-padding;
+    box-sizing: border-box;
+    display: flex;
+  }
+
+  @include e(title-text) {
+    width: 100%;
+    color: $card-title-color;
+    font-size: $card-title-font-size;
+    line-height: $card-title-line-height;
+    font-weight: $card-title-font-weight;
+    @include lineEllipsis();
+  }
+
+  // 内容区域
+  @include e(content) {
+    color: $card-content-color;
+    font-size: $card-content-font-size;
+    line-height: $card-content-line-height;
+    padding: $card-content-padding;
+    box-sizing: border-box;
+  }
+
+  // 底部区域
+  @include e(footer) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: $card-footer-padding;
+    @include halfPixelBorder('top', $padding-loose, $card-footer-border-color);
+
+  }
+
+  @include m(rectangle) {
+    margin-left: 0;
+    margin-right: 0;
+    border-radius: 0;
+    box-shadow: none;
+
+    @include me(content) {
+      @include halfPixelBorder('top', $padding-loose, $card-content-border-color);
+    }
+  }
+}

package/components/wd-card/types.ts

@@ -0,0 +1,47 @@
+/*
+ * @Author: weisheng
+ * @Date: 2025-05-08 22:54:27
+ * @LastEditTime: 2026-02-11 21:21:59
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-card/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeStringProp } from '../../common/props'
+
+export type CardType = 'rectangle'
+
+export const cardProps = {
+  ...baseProps,
+  /**
+   * 卡片标题
+   * 类型: string
+   * 默认值: -
+   */
+  title: String,
+  /**
+   * 卡片类型
+   */
+  type: String as PropType<CardType>,
+  /**
+   * 标题自定义样式
+   * 类型: string
+   * 默认值: ''
+   */
+  customTitleClass: makeStringProp(''),
+  /**
+   * 内容自定义样式
+   * 类型: string
+   * 默认值: ''
+   */
+  customContentClass: makeStringProp(''),
+  /**
+   * 底部自定义样式
+   * 类型: string
+   * 默认值: ''
+   */
+  customFooterClass: makeStringProp('')
+}
+
+export type CardProps = ExtractPropTypes<typeof cardProps>

package/components/wd-card/wd-card.vue

@@ -0,0 +1,38 @@
+<template>
+  <view :class="`wd-card ${type ? `wd-card--${type}` : ''} ${customClass}`" :style="customStyle">
+    <view :class="`wd-card__title ${customTitleClass}`" v-if="title || $slots.title">
+      <slot name="title">
+        <text class="wd-card__title-text" v-if="title">{{ title }}</text>
+      </slot>
+    </view>
+    <view :class="`wd-card__content ${customContentClass}`">
+      <slot></slot>
+    </view>
+    <view :class="`wd-card__footer ${customFooterClass}`" v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-card',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { cardProps } from './types'
+
+defineProps(cardProps)
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-cascader/index.scss

@@ -0,0 +1,154 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 级联选择器弹层背景色
+$cascader-bg: var(--wot-cascader-bg, $filled-oppo) !default;
+// 选项列表高度
+$cascader-list-height: var(--wot-cascader-list-height, calc(336 * #{$n-1})) !default;
+// 选项文字颜色
+$cascader-list-item-color: var(--wot-cascader-list-item-color, $text-main) !default;
+// 选项禁用态透明度
+$cascader-list-item-opacity-disabled: var(--wot-cascader-list-item-opacity-disabled, $opacity-disabled) !default;
+// 选项文字字号
+$cascader-list-item-font-size: var(--wot-cascader-list-item-font-size, $typography-body-size-extra-large) !default;
+// 选项文字行高
+$cascader-list-item-line-height: var(--wot-cascader-list-item-line-height, $typography-body-line--height-size-extra-large) !default;
+// 选项内边距
+$cascader-list-item-padding: var(--wot-cascader-list-item-padding, $padding-extra-loose $padding-loose) !default;
+// 选项选中态文字颜色
+$cascader-list-item-color-checked: var(--wot-cascader-list-item-color-checked, $primary-6) !default;
+// 选项选中态文字字重
+$cascader-list-item-font-weight-checked: var(--wot-cascader-list-item-font-weight-checked, $font-weight-medium) !default;
+// 选项提示文字颜色
+$cascader-list-tip-color: var(--wot-cascader-list-tip-color, $text-secondary) !default;
+// 选项提示文字字号
+$cascader-list-tip-font-size: var(--wot-cascader-list-tip-font-size, $typography-label-size-main) !default;
+// 选项提示文字行高
+$cascader-list-tip-line-height: var(--wot-cascader-list-tip-line-height, $typography-label-line--height-size-main) !default;
+// 选项提示顶部外边距
+$cascader-list-tip-margin-top: var(--wot-cascader-list-tip-margin-top, $spacing-ultra-tight) !default;
+// 选中图标尺寸
+$cascader-list-checked-icon-size: var(--wot-cascader-list-checked-icon-size, $n-20) !default;
+// 选中图标与文字间距
+$cascader-list-checked-icon-spacing: var(--wot-cascader-list-checked-icon-spacing, $spacing-tight) !default;
+// 关闭图标右侧偏移
+$cascader-action-right: var(--wot-cascader-action-right, $spacing-loose) !default;
+// checkStrictly模式确认按钮颜色
+$cascader-confirm-color: var(--wot-cascader-confirm-color, $primary-6) !default;
+// checkStrictly模式确认按钮禁用透明度
+$cascader-confirm-opacity-disabled: var(--wot-cascader-confirm-opacity-disabled, $opacity-disabled) !default;
+// checkStrictly模式确认按钮字号
+$cascader-confirm-font-size: var(--wot-cascader-confirm-font-size, $typography-body-size-large) !default;
+// checkStrictly模式确认按钮行高
+$cascader-confirm-line-height: var(--wot-cascader-confirm-line-height, $typography-body-line--height-size-large) !default;
+// checkStrictly模式确认按钮字重
+$cascader-confirm-font-weight: var(--wot-cascader-confirm-font-weight, $font-weight-regular) !default;
+// loading 状态下选项区透明度
+$cascader-loading-opacity: var(--wot-cascader-loading-opacity, $opacity-disabled) !default;
+// loading 图标尺寸
+$cascader-loading-icon-size: var(--wot-cascader-loading-icon-size, $n-48) !default;
+
+@include b(cascader) {
+  @include edeep(popup) {
+    background: $cascader-bg;
+  }
+
+  // 选项列表容器
+  @include e(list) {
+    height: $cascader-list-height;
+    box-sizing: border-box;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  @include e(panel) {
+    position: relative;
+    height: $cascader-list-height;
+
+    @include when(loading) {
+      overflow: hidden;
+      .wd-cascader__list {
+        opacity: $cascader-loading-opacity;
+      }
+    }
+  }
+
+  // 异步加载遮罩
+  @include e(loading) {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+  }
+
+  @include edeep(loading-icon){
+    opacity: 1;
+    font-size: $cascader-loading-icon-size;
+  }
+
+  // 选项行
+  @include e(list-item) {
+    display: flex;
+    align-items: center;
+    padding: $cascader-list-item-padding;
+
+    @include m(selected) {
+      color: $cascader-list-item-color-checked;
+
+      @include me(list-item-label) {
+        font-weight: $cascader-list-item-font-weight-checked;
+      }
+    }
+
+    @include m(disabled) {
+      opacity: $cascader-list-item-opacity-disabled;
+    }
+  }
+
+  // 选项文本容器
+  @include e(list-item-content) {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // 选项标签文字
+  @include e(list-item-label) {
+    font-size: $cascader-list-item-font-size;
+    line-height: $cascader-list-item-line-height;
+  }
+
+  // 选项提示信息
+  @include e(list-item-tip) {
+    margin-top: $cascader-list-tip-margin-top;
+    font-size: $cascader-list-tip-font-size;
+    color: $cascader-list-tip-color;
+    line-height: $cascader-list-tip-line-height;
+  }
+
+  @include edeep(checked) {
+    margin-left: $cascader-list-checked-icon-spacing;
+    font-size: $cascader-list-checked-icon-size;
+    color: $cascader-list-item-color-checked;
+  }
+
+  @include e(action) {
+    position: absolute;
+    top: 50%;
+    right: $cascader-action-right;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+  }
+
+  @include e(action-confirm) {
+    font-size: $cascader-confirm-font-size;
+    line-height: $cascader-confirm-line-height;
+    font-weight: $cascader-confirm-font-weight;
+    color: $cascader-confirm-color;
+    @include m(disabled) {
+      opacity: $cascader-confirm-opacity-disabled;
+    }
+  }
+}