oxy-uni-ui 2.1.1 → 2.1.3

package/components/oxy-checkbox/oxy-checkbox.vue

@@ -37,7 +37,9 @@ export default {
   name: 'oxy-checkbox',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -61,8 +63,8 @@ defineExpose<CheckboxExpose>({
 const { parent: checkboxGroup, index } = useParent(CHECKBOX_GROUP_KEY)
 
 const isChecked = computed(() => {
-  if (checkboxGroup) {
-    return checkboxGroup.props.modelValue.indexOf(props.modelValue) > -1
+  if (checkboxGroup.value) {
+    return checkboxGroup.value.props.modelValue.indexOf(props.modelValue) > -1
   } else {
     return props.modelValue === props.trueValue
   }
@@ -73,7 +75,7 @@ const isFirst = computed(() => {
 })
 
 const isLast = computed(() => {
-  const children = isDef(checkboxGroup) ? checkboxGroup.children : []
+  const children = isDef(checkboxGroup.value) ? checkboxGroup.value.children : []
   return index.value === children.length - 1
 })
 const { proxy } = getCurrentInstance() as any
@@ -82,7 +84,7 @@ watch(
   () => props.modelValue,
   () => {
     // 组合使用走这个逻辑
-    if (checkboxGroup) {
+    if (checkboxGroup.value) {
       checkName()
     }
   }
@@ -97,18 +99,22 @@ watch(
 )
 
 const innerShape = computed(() => {
-  return props.shape || getPropByPath(checkboxGroup, 'props.shape') || 'circle'
+  return props.shape || getPropByPath(checkboxGroup.value, 'props.shape') || 'circle'
 })
 
 const innerCheckedColor = computed(() => {
-  return props.checkedColor || getPropByPath(checkboxGroup, 'props.checkedColor')
+  return props.checkedColor || getPropByPath(checkboxGroup.value, 'props.checkedColor')
 })
 
+/**
+ * 计算是否禁用。
+ * 分组模式下受 max/min 限制：已超过上限时未选中项禁用，低于下限时已选中项禁用
+ */
 const innerDisabled = computed(() => {
-  if (!checkboxGroup) {
+  if (!checkboxGroup.value) {
     return props.disabled
   }
-  const { max, min, modelValue, disabled } = checkboxGroup.props
+  const { max, min, modelValue, disabled } = checkboxGroup.value.props
   if (
     (max && modelValue.length >= max && !isChecked.value) ||
     (min && modelValue.length <= min && isChecked.value) ||
@@ -122,15 +128,15 @@ const innerDisabled = computed(() => {
 })
 
 const innerInline = computed(() => {
-  return getPropByPath(checkboxGroup, 'props.inline') || false
+  return getPropByPath(checkboxGroup.value, 'props.inline') || false
 })
 
 const innerCell = computed(() => {
-  return getPropByPath(checkboxGroup, 'props.cell') || false
+  return getPropByPath(checkboxGroup.value, 'props.cell') || false
 })
 
 const innerSize = computed(() => {
-  return props.size || getPropByPath(checkboxGroup, 'props.size')
+  return props.size || getPropByPath(checkboxGroup.value, 'props.size')
 })
 
 onBeforeMount(() => {
@@ -144,9 +150,9 @@ onBeforeMount(() => {
  * @param  myName 自己的标识符
  */
 function checkName() {
-  checkboxGroup &&
-    checkboxGroup.children &&
-    checkboxGroup.children.forEach((child: any) => {
+  checkboxGroup.value &&
+    checkboxGroup.value.children &&
+    checkboxGroup.value.children.forEach((child: any) => {
       if (child.$.uid !== proxy.$.uid && child.modelValue === props.modelValue) {
         console.error(`The checkbox's bound value: ${props.modelValue} has been used`)
       }
@@ -158,11 +164,11 @@ function checkName() {
 function toggle() {
   if (innerDisabled.value) return
   // 复选框单独使用时点击反选，并且在checkbox上触发change事件
-  if (checkboxGroup) {
+  if (checkboxGroup.value) {
     emit('change', {
       value: !isChecked.value
     })
-    checkboxGroup.changeSelectState(props.modelValue)
+    checkboxGroup.value.changeSelectState(props.modelValue)
   } else {
     const newVal = props.modelValue === props.trueValue ? props.falseValue : props.trueValue
     emit('update:modelValue', newVal)

package/components/oxy-checkbox/types.ts

@@ -5,7 +5,13 @@ export type CheckShape = 'circle' | 'square' | 'button'
 
 export const checkboxProps = {
   ...baseProps,
+  /**
+   * label 外部自定义样式
+   */
   customLabelClass: makeStringProp(''),
+  /**
+   * shape 外部自定义样式
+   */
   customShapeClass: makeStringProp(''),
   /**
    * 单选框选中时的值
@@ -15,6 +21,9 @@ export const checkboxProps = {
     required: true,
     default: false
   },
+  /**
+   * 是否为半选状态
+   */
   indeterminate: makeBooleanProp(false),
   /**
    * 单选框形状，可选值：circle / square / button

package/components/oxy-checkbox-group/index.scss

@@ -12,7 +12,7 @@
   // 顶部与两侧留白适当放大，避免按钮组在16px基准字号下过于紧凑
   @include when(button) {
     width: 100%;
-    padding: 24rpx 32rpx 40rpx 32rpx;
+    padding: $-cell-wrapper-padding $-cell-padding $-spacing-32 $-cell-padding;
     box-sizing: border-box;
     overflow: hidden;
     height: auto;

package/components/oxy-checkbox-group/oxy-checkbox-group.vue

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

package/components/oxy-circle/oxy-circle.vue

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

package/components/oxy-col/oxy-col.vue

@@ -9,7 +9,9 @@ export default {
   name: 'oxy-col',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -26,7 +28,7 @@ const props = defineProps(colProps)
 const { parent: row } = useParent(ROW_KEY)
 
 const rootStyle = computed(() => {
-  const gutter = isDef(row) ? row.props.gutter || 0 : 0
+  const gutter = isDef(row.value) ? row.value.props.gutter || 0 : 0
   const padding = withDefaultUnit(gutter / 2)
   const style = gutter > 0 ? `padding-left: ${padding}; padding-right: ${padding};background-clip: content-box;` : ''
   return `${style}${props.customStyle}`

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

@@ -141,18 +141,18 @@
   }
 
   @include e(list-item-tip) {
-    margin-top: 8rpx;
+    margin-top: $-spacing-8;
     font-size: $-col-picker-list-fs-tip;
     color: $-col-picker-list-color-tip;
   }
 
   @include e(confirm) {
-    padding: 28rpx 52rpx 32rpx;
+    padding: $-spacing-24 $-spacing-48 $-spacing-32;
   }
 
   @include edeep(checked) {
     display: block;
-    margin-left: 8rpx;
+    margin-left: $-spacing-8;
     font-size: $-col-picker-list-checked-icon-size;
     color: $-col-picker-list-color-checked;
     opacity: 0;

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

@@ -95,7 +95,9 @@ export default {
   name: 'oxy-col-picker',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -343,6 +345,16 @@ function chooseItem(colIndex: number, index: number, triggerColChange: boolean =
   }
 }
 
+/**
+ * 列切换回调，触发异步加载下一列数据。
+ * columnChange 提供 resolve(nextColumn) 加载下一列数据、finish(isOk) 结束选择：
+ * - resolve：更新 selectList 中 colIndex+1 列的数据并切换到该列
+ * - finish：结合 beforeConfirm 完成确认或回退
+ * @param colIndex - 当前列索引
+ * @param item - 当前选中项
+ * @param index - 选中项在列中的行索引
+ * @param callback - 额外的回调（用于自动补齐完成后的清理工作）
+ */
 function handleColChange(colIndex: number, item: Record<string, any>, index: number, callback?: () => void) {
   loading.value = true
   const { columnChange, beforeConfirm } = props
@@ -490,7 +502,11 @@ function lineScrollIntoView() {
     .catch(() => {})
 }
 
-// 递归列数据补齐
+/**
+ * 递归补齐列数据。当 modelValue 长度超过已加载的 columns 时，
+ * 从缺失列开始逐级触发 columnChange，直到补齐所有列。
+ * @param colIndex - 起始列索引（-1 表示从第一列开始补齐）
+ */
 function diffColumns(colIndex: number) {
   // colIndex 为 -1 时，item 为空对象，>=0 时则具有 value 属性
   const item = colIndex === -1 ? {} : { [props.valueKey]: props.modelValue[colIndex] }

package/components/oxy-col-picker/types.ts

@@ -149,6 +149,9 @@ export const colPickerProps = {
    * value 外部自定义样式
    */
   customLabelClass: makeStringProp(''),
+  /**
+   * value 外部自定义样式
+   */
   customValueClass: makeStringProp(''),
   /**
    * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)

package/components/oxy-collapse/index.scss

@@ -38,12 +38,12 @@
   @include e(more-txt) {
     display: inline-block;
     vertical-align: middle;
-    margin-right: 8rpx;
+    margin-right: $-collapse-arrow-margin;
   }
   @include e(arrow) {
     display: inline-block;
     vertical-align: middle;
-    transition: transform 0.1s;
+    transition: transform $-transition-duration-fast;
     font-size: $-collapse-arrow-size;
     height: $-collapse-arrow-size;
     line-height: $-collapse-arrow-size;

package/components/oxy-collapse/oxy-collapse.vue

@@ -34,7 +34,9 @@ export default {
   name: 'oxy-collapse',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -94,6 +96,13 @@ function updateChange(activeNames: string | string[] | boolean) {
   })
 }
 
+/**
+ * 切换单个面板展开/收起。
+ * 手风琴模式：同一时间仅一个面板展开，再次点击收起。
+ * 普通模式：在 modelValue 数组中添加或移除面板 name。
+ * @param name - 面板名称
+ * @param expanded - 当前面板是否已展开
+ */
 function toggle(name: string, expanded: boolean) {
   const { accordion, modelValue } = props
   if (accordion) {

package/components/oxy-collapse-item/oxy-collapse-item.vue

@@ -23,7 +23,9 @@ export default {
   name: 'oxy-collapse-item',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -75,7 +77,7 @@ const contentStyle = computed(() => {
  * 是否选中
  */
 const isSelected = computed(() => {
-  const modelValue = collapse ? collapse?.props.modelValue || [] : []
+  const modelValue = collapse.value ? collapse.value?.props.modelValue || [] : []
   const { name } = props
   return (isString(modelValue) && modelValue === name) || (isArray(modelValue) && modelValue.indexOf(name as string) >= 0)
 })
@@ -130,7 +132,7 @@ async function handleClick() {
   try {
     await updateExpand()
     const { name } = props
-    collapse && collapse.toggle(name, !expanded.value)
+    collapse.value && collapse.value.toggle(name, !expanded.value)
   } catch (error) {
     /* empty */
   }

package/components/oxy-config-provider/oxy-config-provider.vue

@@ -8,7 +8,9 @@
 export default {
   name: 'oxy-config-provider',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -31,10 +33,20 @@ const themeStyle = computed(() => {
   return styleObj ? `${objToStyle(styleObj)}${props.customStyle}` : props.customStyle
 })
 
+/**
+ * 驼峰命名转短横线命名。
+ * @param str 驼峰字符串
+ * @returns kebab-case 字符串
+ */
 const kebabCase = (str: string): string => {
   str = str.replace(str.charAt(0), str.charAt(0).toLocaleLowerCase())
   return str.replace(/([a-z])([A-Z])/g, (_, p1, p2) => p1 + '-' + p2.toLowerCase())
 }
+/**
+ * 十六进制颜色转 RGB 数组。
+ * @param str 十六进制颜色字符串（如 '#ff0000' 或 '#f00'）
+ * @returns RGB 逗号分隔字符串，解析失败返回 null
+ */
 const colorRgb = (str: string) => {
   if (!str) return
   var sColor = str.toLowerCase()
@@ -59,6 +71,12 @@ const colorRgb = (str: string) => {
   return null
 }
 
+/**
+ * 将主题变量对象映射为 CSS 自定义属性。
+ * 例如 `{ colorTheme: '#4D80F0' }` 转换为 `{ '--oxy-color-theme': '#4D80F0' }`。
+ * @param themeVars 主题变量键值对
+ * @returns CSS 变量键值对
+ */
 const mapThemeVarsToCSSVars = (themeVars: Record<string, string>) => {
   if (!themeVars) return
   const cssVars: Record<string, string> = {}

package/components/oxy-config-provider/types.ts

@@ -958,6 +958,23 @@ export type videoPreviewThemeVars = {
   videoPreviewBg?: string
   videoPreviewCloseColor?: string
   videoPreviewCloseFontSize?: string
+  videoPreviewCloseMargin?: string
+  videoPreviewVideoHeight?: string
+  videoPreviewCloseZIndex?: string
+}
+
+export type imagePreviewThemeVars = {
+  imagePreviewBg?: string
+  imagePreviewIndexColor?: string
+  imagePreviewIndexMargin?: string
+  imagePreviewIndexFontSize?: string
+  imagePreviewIndexLineHeight?: string
+  imagePreviewIndexFontWeight?: string
+  imagePreviewIndexZIndex?: string
+  imagePreviewCloseSize?: string
+  imagePreviewCloseColor?: string
+  imagePreviewCloseMargin?: string
+  imagePreviewCloseZIndex?: string
 }
 
 export type imgCropperThemeVars = {
@@ -1046,6 +1063,7 @@ export type ConfigProviderThemeVars = baseThemeVars &
   backtopThemeVars &
   indexBarThemeVars &
   textThemeVars &
+  imagePreviewThemeVars &
   videoPreviewThemeVars &
   imgCropperThemeVars &
   floatingPanelThemeVars &

package/components/oxy-corner/index.scss

@@ -1,6 +1,22 @@
 @import '../common/abstracts/variable';
 @import '../common/abstracts/mixin';
 
+$-corner-ribbon-width: 186rpx;
+$-corner-ribbon-height: 56rpx;
+$-corner-ribbon-radius: 56rpx;
+$-corner-rotate-box-size: 152rpx;
+$-corner-rotate-ribbon-width: 202rpx;
+$-corner-rotate-ribbon-height: 64rpx;
+$-corner-rotate-ribbon-offset: 50rpx;
+$-corner-rotate-ribbon-inset: 20rpx;
+$-corner-rotate-text-padding-x: $-spacing-8;
+$-corner-horizontal-width: 280rpx;
+$-corner-horizontal-height: 70rpx;
+$-corner-horizontal-padding-right: $-spacing-32;
+$-corner-embedded-notch-width: 28rpx;
+$-corner-embedded-notch-offset: 10rpx;
+$-corner-embedded-side-padding: $-spacing-20;
+
 @mixin corner-type-style ($normalColor, $normalBg) {
   background: $normalBg;
   color: $normalColor;
@@ -11,8 +27,8 @@
     position: absolute;
     top: 0;
     right: 0;
-    width: 160rpx;
-    height: 160rpx;
+    width: $-corner-rotate-box-size;
+    height: $-corner-rotate-box-size;
     overflow: hidden;
     @include when(round) {
       border-top-right-radius: $-corner-radius;
@@ -103,8 +119,8 @@
         }
         .oxy-corner__text {
           transform: rotate(-45deg);
-          top: 20rpx;
-          left: -52rpx;
+          top: $-corner-rotate-ribbon-inset;
+          left: -$-corner-rotate-ribbon-offset;
         }
       }
       &.is-bottom-left{
@@ -117,8 +133,8 @@
         }
         .oxy-corner__text {
           transform: rotate(-135deg);
-          bottom: 20rpx;
-          left: -52rpx;
+          bottom: $-corner-rotate-ribbon-inset;
+          left: -$-corner-rotate-ribbon-offset;
           top: auto;
           > span{
             transform: rotate(180deg);
@@ -136,8 +152,8 @@
         }
         .oxy-corner__text {
           transform: rotate(135deg);
-          bottom: 20rpx;
-          right: -52rpx;
+          bottom: $-corner-rotate-ribbon-inset;
+          right: -$-corner-rotate-ribbon-offset;
           top: auto;
           > span{
             transform: rotate(180deg);
@@ -149,7 +165,7 @@
         &.is-top-left{
           &::after {
             left: auto;
-            right: -12rpx;
+            right: -$-corner-embedded-notch-offset;
             bottom: 0;
             transform: skewX(-30deg);
           }
@@ -158,15 +174,15 @@
             top: 0;
             left: 0;
             border-bottom-left-radius: 0;
-            border-bottom-right-radius: 64rpx;
+            border-bottom-right-radius: $-corner-ribbon-radius;
             padding-left: 0;
-            padding-right: $-spacing-24;
+            padding-right: $-corner-embedded-side-padding;
           }
         }
         &.is-bottom-left{
           &::after {
             left: auto;
-            right: -12rpx;
+            right: -$-corner-embedded-notch-offset;
             bottom: 0;
             transform: skewX(30deg);
           }
@@ -175,9 +191,9 @@
             bottom: 0;
             left: 0;
             border-bottom-left-radius: 0;
-            border-top-right-radius: 64rpx;
+            border-top-right-radius: $-corner-ribbon-radius;
             padding-left: 0;
-            padding-right: $-spacing-24;
+            padding-right: $-corner-embedded-side-padding;
             > span{
               transform: none;
             }
@@ -185,7 +201,7 @@
         }
         &.is-bottom-right{
           &::after {
-            left: -12rpx;
+            left: -$-corner-embedded-notch-offset;
             bottom: 0;
             transform: skewX(-30deg);
           }
@@ -194,7 +210,7 @@
             bottom: 0;
             right: 0;
             border-bottom-left-radius: 0;
-            border-top-left-radius: 64rpx;
+            border-top-left-radius: $-corner-ribbon-radius;
             > span{
               transform: none;
             }
@@ -202,16 +218,18 @@
         }
       }
       .oxy-corner__text {
-        width: 212rpx;
-        height: 64rpx;
+        width: $-corner-rotate-ribbon-width;
+        height: $-corner-rotate-ribbon-height;
         position: absolute;
-        right: -52rpx;
-        top: 20rpx;
+        right: -$-corner-rotate-ribbon-offset;
+        top: $-corner-rotate-ribbon-inset;
         text-align: center;
-        line-height: 64rpx;
+        line-height: $-corner-rotate-ribbon-height;
         overflow: hidden;
         transform: rotate(45deg);
         box-sizing: border-box;
+        padding-left: $-corner-rotate-text-padding-x;
+        padding-right: $-corner-rotate-text-padding-x;
         white-space: nowrap;
         text-align: center;
         font-size: $-corner-font-size;
@@ -219,27 +237,27 @@
       }
     }
     &.is-horizontal {
-      width: 320rpx;
-      height: 80rpx;
+      width: $-corner-horizontal-width;
+      height: $-corner-horizontal-height;
       .oxy-corner__text {
-        padding-right: 40rpx;
+        padding-right: $-corner-horizontal-padding-right;
         box-sizing: border-box;
         font-size: $-corner-horizontal-font-size;
         font-weight: $-corner-horizontal-font-weight;
-        line-height: 80rpx;
+        line-height: $-corner-horizontal-height;
         text-align: right;
       }
     }
     &.is-embedded {
-      width: 212rpx;
-      height: 64rpx;
+      width: $-corner-ribbon-width;
+      height: $-corner-ribbon-height;
       &::after {
         content: '';
         position: absolute;
-        left: -12rpx;
+        left: -$-corner-embedded-notch-offset;
         bottom: 0;
-        width: 32rpx;
-        height: 64rpx;
+        width: $-corner-embedded-notch-width;
+        height: $-corner-ribbon-height;
         background-color: $-color-white;
         transform: skewX(30deg);
       }
@@ -247,11 +265,11 @@
         right: 0;
         top: 0;
         transform: none;
-        padding-left: $-spacing-24;
+        padding-left: $-corner-embedded-side-padding;
         box-sizing: border-box;
         font-size: $-corner-embedded-font-size;
         font-weight: $-corner-embedded-font-weight;
-        border-bottom-left-radius: 64rpx;
+        border-bottom-left-radius: $-corner-ribbon-radius;
       }
     }
   }

package/components/oxy-corner/oxy-corner.vue

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

package/components/oxy-count-down/oxy-count-down.vue

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

package/components/oxy-count-to/oxy-count-to.vue

@@ -19,7 +19,9 @@
 export default {
   name: 'oxy-count-to',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -67,6 +69,11 @@ function resetTime() {
   }
 }
 
+/**
+ * 根据当前剩余时间计算数字显示值，支持缓动函数
+ * @param remain - 剩余时间（毫秒）
+ * @returns 格式化后的数字文本
+ */
 function parseFormat(remain: number) {
   const { startVal, endVal, duration, useEasing } = props
   const progress = duration - remain // 已经进行的时间
@@ -95,7 +102,11 @@ function parseFormat(remain: number) {
   return formatNumber(currentVal)
 }
 
-// 格式化数字
+/**
+ * 格式化数字：添加千位分隔符、小数位
+ * @param num - 数值
+ * @returns 格式化后的字符串，如 "1,234.56"
+ */
 function formatNumber(num: any): string {
   if (typeof num !== 'number') {
     num = parseFloat(num)