oxy-uni-ui 2.1.1 → 2.1.3

package/components/oxy-count-to/types.ts

@@ -5,10 +5,14 @@ import type { TextType } from '../oxy-text/types'
 export const countToProps = {
   ...baseProps,
 
-  // 字体大小
+  /**
+   * 字体大小
+   */
   fontSize: makeNumberProp(32),
 
-  // 文本颜色
+  /**
+   * 文本颜色
+   */
   color: makeStringProp(''),
   /**
    * 主题类型
@@ -58,10 +62,16 @@ export const countToProps = {
     }
   },
 
-  // 小数点
+  /**
+   * 小数点符号
+   * @default '.'
+   */
   decimal: makeStringProp('.'),
 
-  // 三位三位的隔开效果
+  /**
+   * 千位分隔符
+   * @default ','
+   */
   separator: makeStringProp(','),
 
   /**

package/components/oxy-curtain/index.scss

@@ -4,6 +4,7 @@
 @include b(curtain-wrapper){
   :deep(.oxy-curtain){
     display: inline-block;
+    text-align: center;
     border-radius: $-curtain-content-radius;
     overflow-y: visible !important;
     background: transparent;
@@ -33,29 +34,29 @@
   @include edeep(content-close) {
     position: absolute;
     margin: 0;
-    padding: 12rpx;
-    top: 20rpx;
-    right: 20rpx;
+    padding: $-curtain-content-close-padding;
+    top: $-curtain-content-close-top;
+    right: $-curtain-content-close-right;
     color: $-curtain-content-close-color;
     font-size: $-curtain-content-close-fs;
     -webkit-tap-highlight-color: transparent;
     &.top {
       margin: 0 0 0 -36rpx;
-      top: -124rpx;
+      top: -$-curtain-content-close-offset;
       right: unset;
       left: 50%;
       bottom: unset;
     }
     &.top-left {
       margin: 0;
-      top: -124rpx;
+      top: -$-curtain-content-close-offset;
       right: unset;
       left: -12rpx;
       bottom: unset;
     }
     &.top-right {
       margin: 0;
-      top: -124rpx;
+      top: -$-curtain-content-close-offset;
       right: -12rpx;
       left: unset;
       bottom: unset;
@@ -65,21 +66,21 @@
       top: unset;
       right: unset;
       left: 50%;
-      bottom: -124rpx;
+      bottom: -$-curtain-content-close-offset;
     }
     &.bottom-left {
       margin: 0;
       top: unset;
       right: unset;
       left: -12rpx;
-      bottom: -124rpx;
+      bottom: -$-curtain-content-close-offset;
     }
     &.bottom-right {
       margin: 0;
       top: unset;
       right: -12rpx;
       left: unset;
-      bottom: -124rpx;
+      bottom: -$-curtain-content-close-offset;
     }
   }
 }

package/components/oxy-curtain/oxy-curtain.vue

@@ -47,7 +47,9 @@
 export default {
   name: 'oxy-curtain',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

package/components/oxy-date-strip/oxy-date-strip.vue

@@ -49,7 +49,9 @@ export default {
   name: 'oxy-date-strip',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -95,6 +97,13 @@ const rootStyle = computed(() => {
 })
 
 const cache = new Map<number, WeekDateCollection>()
+/**
+ * 创建一周（或指定天数）的日期集合，带缓存
+ * 包含每日的日期对象、文本、类型（禁用/选中/普通）和星期前缀
+ * @param currentStartDate - 起始日期
+ * @param length - 天数
+ * @returns 包含起止时间戳和日期数组的集合
+ */
 const createWeek = (currentStartDate: Date, length: number): WeekDateCollection => {
   const dates: DateStriPDay[] = []
   const time = currentStartDate.getTime()
@@ -130,7 +139,11 @@ const createWeek = (currentStartDate: Date, length: number): WeekDateCollection
 
 const currentDate = ref<Date>(today)
 
-// 计算要显示的三周数据
+/**
+ * 计算要显示的数据集合
+ * 周模式：基于当前日期生成前、当前、后三周数据
+ * 非周模式：从 minDate 到 maxDate 生成连续日期
+ */
 const displayWeeks = computed((): WeekDateCollection[] => {
   const weeks: WeekDateCollection[] = []
   if (props.switchMode === 'week') {
@@ -151,6 +164,10 @@ const displayWeeks = computed((): WeekDateCollection[] => {
   return weeks
 })
 
+/**
+ * Swiper 切换处理：根据滑动方向（delta）推算新的基准日期
+ * delta === 1 或 -2 表示向前滑动一周，否则向后滑动一周
+ */
 const swiperChange = (event: any) => {
   const delta = event.detail.current - currentWeekIndex.value
   const newDate = addWeeks(currentDate.value, delta == 1 || delta == -2 ? 1 : -1)
@@ -167,6 +184,10 @@ const onClick = (day: DateStriPDay) => {
   emit('update:modelValue', v)
 }
 
+/**
+ * 程序化滚动到指定日期（仅非周模式生效）
+ * @param date - 目标日期
+ */
 const scrollToDate = (date: Date) => {
   currentDate.value = date
   if (props.switchMode !== 'none') return

package/components/oxy-date-strip-item/index.scss

@@ -26,7 +26,7 @@
 		/* #endif */
 		display: flex;
 		flex-direction: column;
-		margin: 0 4rpx;
+		margin: 0 $-spacing-4;
 		transition-duration: $-transition-duration-slow;
 		transition-property: background-color, color;
 		transition-timing-function: linear;
@@ -43,13 +43,13 @@
 		}
 		&--none {
 			.oxy-date-strip-item__grid-prefix {
-				padding-bottom: 8rpx;
-				padding-top: 8rpx;
+				padding-bottom: $-spacing-8;
+				padding-top: $-spacing-8;
 			}
 		}
 		&--circle {
 			.oxy-date-strip-item__grid-prefix {
-				padding-bottom: 8rpx;
+				padding-bottom: $-spacing-8;
 			}
 			.oxy-date-strip-item__grid-info {
 				border-radius: $-date-strip-grid-circle-radius;

package/components/oxy-date-strip-item/oxy-date-strip-item.vue

@@ -70,7 +70,9 @@ export default {
   name: 'oxy-date-strip-item',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }

package/components/oxy-datetime-picker/index.scss

@@ -110,7 +110,7 @@
     font-size: $-picker-toolbar-fs;
     color: $-picker-toolbar-finish-color;
     background: transparent;
-    padding: 48rpx 32rpx 32rpx 32rpx;
+    padding: $-spacing-48 $-spacing-32 $-spacing-32 $-spacing-32;
 
     @include m(cancel) {
       color: $-picker-toolbar-cancel-color;
@@ -135,7 +135,7 @@
     display: inline-block;
     color: $-picker-region-color;
     text-align: center;
-    padding: 32rpx 0;
+    padding: $-spacing-32 0;
     font-size: $-picker-region-fs;
     line-height: 32rpx;
     transition: all 0.15s ease-out;
@@ -148,7 +148,7 @@
 
   @include e(region-time) {
     font-size: $-picker-region-time-fs;
-    margin-top: 8rpx;
+    margin-top: $-spacing-8;
   }
 
   @include e(hidden) {

package/components/oxy-datetime-picker/oxy-datetime-picker.vue

@@ -157,7 +157,9 @@
 export default {
   name: 'oxy-datetime-picker',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -626,7 +628,11 @@ function onCancel() {
   emit('cancel')
 }
 
-/** picker触发confirm事件，同步触发confirm事件 */
+/**
+ * 确认选择。支持 beforeConfirm 异步校验，通过 resolve(true) 确认。
+ * 若 picker 仍在滑动中（isPicking），延迟确认至 pickend 事件触发后自动执行，
+ * 避免 pickerView 值尚未更新导致确认值错误。
+ */
 function onConfirm() {
   if (props.loading || isLoading.value) return
 
@@ -654,6 +660,10 @@ function onPickStart() {
   isPicking.value = true
 }
 
+/**
+ * picker 滑动结束。重置滑动状态，若用户在滑动期间点击了确认（hasConfirmed），
+ * 延迟 50ms 后自动执行确认（等待嵌套组件的日期计算完成）。
+ */
 function onPickEnd() {
   isPicking.value = false
 

package/components/oxy-datetime-picker-view/oxy-datetime-picker-view.vue

@@ -19,7 +19,9 @@
 <script lang="ts">
 export default {
   name: 'oxy-datetime-picker-view',
+  // #ifndef MP-TOUTIAO
   virtualHost: true,
+  // #endif
   addGlobalClass: true,
   styleIsolation: 'shared'
 }

package/components/oxy-divider/oxy-divider.vue

@@ -7,7 +7,9 @@
 export default {
   name: 'oxy-divider',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

package/components/oxy-drop-menu/index.scss

@@ -73,7 +73,7 @@
       transform: translate(-50%, 0);
       background: $-drop-menu-line-color;
       border-radius: $-drop-menu-line-height;
-      transition: opacity .15s;
+      transition: opacity $-transition-duration-fast;
       opacity: 0;
     }
   }
@@ -85,6 +85,6 @@
 
   @include edeep(arrow) {
     font-size: $-drop-menu-arrow-fs;
-    margin-left: 8rpx;
+    margin-left: $-spacing-8;
   }
 }

package/components/oxy-drop-menu/oxy-drop-menu.vue

@@ -36,7 +36,9 @@
 export default {
   name: 'oxy-drop-menu',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -111,6 +113,7 @@ onBeforeMount(() => {
 
 function noop() {}
 
+/** 获取下拉菜单项的展示标题，优先取 title，否则从 options 中匹配当前选中值的 label */
 function getDisplayTitle(child: any) {
   const { title, modelValue, options, valueKey, labelKey } = child
 

package/components/oxy-drop-menu-item/index.scss

@@ -48,7 +48,7 @@
     display: inline-block;
     color: $-drop-menu-item-color-tip;
     font-size: $-drop-menu-item-fs-tip;
-    margin-left: 4rpx;
+    margin-left: $-spacing-4;
   }
 
   @include edeep(icon) {

package/components/oxy-drop-menu-item/oxy-drop-menu-item.vue

@@ -46,7 +46,9 @@
 export default {
   name: 'oxy-drop-menu-item',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -88,13 +90,13 @@ const { proxy } = getCurrentInstance() as any
 
 const positionStyle = computed(() => {
   let style: string = ''
-  if (showWrapper.value && dropMenu) {
+  if (showWrapper.value && dropMenu.value) {
     style =
-      dropMenu.props.direction === 'down'
-        ? `top: calc(var(--window-top) + ${unitConvert(dropMenu.offset.value, 0, { output: 'px' })}); bottom: 0;`
-        : dropMenu.props.direction === 'bottom'
+      dropMenu.value.props.direction === 'down'
+        ? `top: calc(var(--window-top) + ${unitConvert(dropMenu.value.offset.value, 0, { output: 'px' })}); bottom: 0;`
+        : dropMenu.value.props.direction === 'bottom'
         ? 'top: calc(var(--window-top); bottom: 0;'
-        : `top: 0; bottom: calc(var(--window-bottom) + ${unitConvert(dropMenu.offset.value, 0, { output: 'px' })})`
+        : `top: 0; bottom: calc(var(--window-bottom) + ${unitConvert(dropMenu.value.offset.value, 0, { output: 'px' })})`
   } else {
     style = ''
   }
@@ -133,7 +135,10 @@ onBeforeUnmount(() => {
 function getShowPop() {
   return showPop.value
 }
-// 模拟单选操作 默认根据 value 选中操作
+/**
+ * 选择选项。从 item 中提取 valueKey 对应的值（若未定义则用 item 本身），emit update:modelValue 和 change 事件后关闭面板。
+ * @param index - 选项在 options 数组中的索引
+ */
 function choose(index: number) {
   if (props.disabled) return
   const { valueKey } = props
@@ -169,6 +174,9 @@ function handleClose() {
   }
 }
 
+/**
+ * 打开下拉面板。支持 beforeToggle 异步校验，传入 resolve(isPass) 控制是否打开。
+ */
 function open() {
   if (showPop.value) {
     return
@@ -188,9 +196,9 @@ function open() {
 function handleOpen() {
   showWrapper.value = true
   showPop.value = true
-  if (dropMenu) {
-    duration.value = Number(dropMenu.props.duration)
-    position.value = dropMenu.props.direction === 'down' ? 'top' : 'bottom'
+  if (dropMenu.value) {
+    duration.value = Number(dropMenu.value.props.duration)
+    position.value = dropMenu.value.props.direction === 'down' ? 'top' : 'bottom'
   }
 }
 

package/components/oxy-echarts/oxy-echarts.vue

@@ -12,7 +12,9 @@ import type { UniEchartsInst } from '../../../../uni_modules/oxy-uni-ui/uni-echa
 export default {
   name: 'oxy-echarts',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

package/components/oxy-fab/index.scss

@@ -3,7 +3,7 @@
 
 @include b(fab) {
   position: fixed;
-  z-index: 99;
+  z-index: $-z-index-fixed;
 
   @include edeep(trigger) {
     min-width: auto !important;

package/components/oxy-fab/oxy-fab.vue

@@ -32,7 +32,9 @@
 export default {
   name: 'oxy-fab',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -103,6 +105,10 @@ const bounding = reactive({
   maxLeft: 0
 })
 
+/**
+ * 获取屏幕和按钮的边界信息
+ * 查询系统信息、按钮元素尺寸，计算安全操作区域
+ */
 async function getBounding() {
   const sysInfo = uni.getSystemInfoSync()
   try {
@@ -122,6 +128,9 @@ async function getBounding() {
   bounding.maxTop = screen.height - fabSize.height - bottom
 }
 
+/**
+ * 将按钮位置约束在安全边界内
+ */
 function clampPosition() {
   if (!inited.value) return
   const { minLeft, minTop, maxLeft, maxTop } = bounding
@@ -129,6 +138,9 @@ function clampPosition() {
   top.value = Math.min(Math.max(top.value, minTop), maxTop)
 }
 
+/**
+ * 窗口尺寸变化处理：重新计算边界并修正按钮位置
+ */
 const handleWindowResize = async () => {
   await getBounding()
   if (props.draggable) {
@@ -140,6 +152,9 @@ const handleWindowResize = async () => {
 
 useWindowResize(handleWindowResize)
 
+/**
+ * 根据 position 属性初始化按钮位置（8 个方位 + Center 组合）
+ */
 function initPosition() {
   const pos = props.position
   const { minLeft, minTop, maxLeft, maxTop } = bounding
@@ -185,6 +200,9 @@ function initPosition() {
 // 按下时坐标相对于元素的偏移量
 const touchOffset = reactive({ x: 0, y: 0 })
 const attractTransition = ref<boolean>(false)
+/**
+ * 触摸开始：记录手指与按钮的相对偏移量，关闭过渡动画
+ */
 function handleTouchStart(e: TouchEvent) {
   if (props.draggable === false) return
 
@@ -194,6 +212,9 @@ function handleTouchStart(e: TouchEvent) {
   attractTransition.value = false
 }
 
+/**
+ * 触摸移动：根据手指位置实时更新按钮坐标，限制在安全边界内
+ */
 function handleTouchMove(e: TouchEvent) {
   if (props.draggable === false) return
 
@@ -212,6 +233,9 @@ function handleTouchMove(e: TouchEvent) {
   left.value = x
 }
 
+/**
+ * 触摸结束：根据按钮中心在屏幕左右半区的位置，吸附到最近边缘
+ */
 function handleTouchEnd() {
   if (props.draggable === false) return
 
@@ -262,6 +286,9 @@ onBeforeUnmount(() => {
   }
 })
 
+/**
+ * 点击触发按钮：非展开模式直接触发 click 事件，展开模式切换激活状态
+ */
 function handleClick() {
   if (props.disabled) {
     return

package/components/oxy-file-list/index.scss

@@ -5,12 +5,12 @@
   position: relative;
   display: flex;
   flex-wrap: wrap;
-  margin: 0 -16rpx;
+  margin: 0 (-$-spacing-16);
   @include e(item) {
     position: relative;
     width: calc(33.33% - 32rpx);
     height: $-file-list-height;
-    margin: 0 16rpx 64rpx;
+    margin: 0 $-spacing-16 64rpx;
   }
   @include e(content) {
     display: flex;
@@ -39,9 +39,9 @@
     width: 100%;
     font-size: $-file-list-file-name-fs;
     color: $-file-list-file-name-color;
-    padding: 0 12rpx;
+    padding: 0 $-spacing-12;
     text-align: center;
-    margin-top: 20rpx;
+    margin-top: $-spacing-20;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -60,7 +60,7 @@
     .oxy-file-list__list--item {
       width: 100%;
       background: $-file-list-bg;
-      padding: 20rpx 24rpx;
+      padding: $-spacing-20 $-spacing-24;
       border-radius: $-file-list-list-item-radius;
       display: flex;
       flex-direction: row;
@@ -68,7 +68,7 @@
       .oxy-file-list__icon {
         width: 48rpx;
         height: 48rpx;
-        margin-right: 20rpx;
+        margin-right: $-spacing-20;
       }
       .oxy-file-list__name {
         flex: 1;
@@ -86,7 +86,7 @@
         margin-left: $-spacing-24;
       }
       & + .oxy-file-list__list--item {
-        margin-top: 20rpx;
+        margin-top: $-spacing-20;
       }
     }
   }
@@ -97,7 +97,7 @@
     right: 16rpx;
     background: $-file-list-download-bg;
     border-radius: $-file-list-card-radius;
-    padding: 12rpx 16rpx;
+    padding: $-spacing-12 $-spacing-16;
     display: flex;
   }
   .oxy-file-list__download {
@@ -105,6 +105,6 @@
   }
   .oxy-file-list__delete {
     color: $-color-white;
-    margin-left: 12rpx;
+    margin-left: $-spacing-12;
   }
 }