oxy-uni-ui 2.1.1 → 2.1.3

package/components/oxy-button/index.scss

@@ -52,7 +52,7 @@
   border: none;
   border-radius: 0;
   color: $-button-normal-color;
-  transition: opacity 0.2s;
+  transition: opacity $-transition-duration-base;
   user-select: none;
   font-weight: normal;
 
@@ -96,7 +96,7 @@
   }
 
   @include e(loading) {
-    margin-right: 12rpx;
+    margin-right: $-spacing-12;
     animation: oxy-rotate 0.8s linear infinite;
     animation-duration: 2s;
   }
@@ -146,11 +146,11 @@
     }
   }
 
-  @include when(medium) {
-    height: $-button-medium-height;
-    padding: $-button-medium-padding;
-    border-radius: $-button-medium-radius;
-    font-size: $-button-medium-fs;
+  @include when(default) {
+    height: $-button-default-height;
+    padding: $-button-default-padding;
+    border-radius: $-button-default-radius;
+    font-size: $-button-default-fs;
     min-width: 240rpx;
 
 
@@ -168,8 +168,8 @@
     }
 
     .oxy-button__loading {
-      width: $-button-medium-loading;
-      height: $-button-medium-loading;
+      width: $-button-default-loading;
+      height: $-button-default-loading;
     }
   }
 
@@ -197,7 +197,7 @@
   @include when(text) {
     color: $-button-primary-bg-color;
     min-width: 0;
-    padding: 8rpx 0;
+    padding: $-spacing-8 0;
 
     &::after {
       display: none;
@@ -270,9 +270,9 @@
         }
       }
 
-      &.is-medium {
+      &.is-default {
         &::after {
-          border-radius: calc(2 * $-button-medium-radius);
+          border-radius: calc(2 * $-button-default-radius);
         }
       }
 
@@ -311,7 +311,7 @@
 
   @include edeep(icon) {
     display: block;
-    margin-right: 12rpx;
+    margin-right: $-spacing-12;
     font-size: $-button-icon-fs;
     vertical-align: middle;
   }

package/components/oxy-button/oxy-button.vue

@@ -54,7 +54,9 @@ export default {
   name: 'oxy-button',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -67,6 +69,11 @@ import { ref } from 'vue'
 import base64 from '../common/base64'
 import { buttonProps } from './types'
 
+/**
+ * 生成 loading 状态的 SVG 图标。
+ * @param color 图标颜色
+ * @param reverse 是否反转颜色
+ */
 const loadingIcon = (color = '#4D80F0', reverse = true) => {
   return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><linearGradient x1="100%" y1="0%" x2="0%" y2="0%" id="a"><stop stop-color="${
     reverse ? color : '#fff'
@@ -163,6 +170,10 @@ function handleChooseavatar(event: any) {
 function handleAgreePrivacyAuthorization(event: any) {
   emit('agreeprivacyauthorization', event.detail)
 }
+/**
+ * 根据按钮类型和状态构建 loading 图标 SVG 的 base64 编码。
+ * 当未指定 loadingColor 时，根据按钮 type 使用对应颜色。
+ */
 function buildLoadingSvg() {
   const { loadingColor, type, plain } = props
   let color = loadingColor

package/components/oxy-button/types.ts

@@ -2,7 +2,7 @@ import type { ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
 
 export type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'text' | 'icon'
-export type ButtonSize = 'small' | 'medium' | 'large'
+export type ButtonSize = 'small' | 'default' | 'large'
 export type ButtonLang = 'zh_CN' | 'zh_TW' | 'en'
 
 export type ButtonOpenType =
@@ -64,9 +64,9 @@ export const buttonProps = {
    */
   type: makeStringProp<ButtonType>('primary'),
   /**
-   * 按钮尺寸，可选值：small / medium / large
+   * 按钮尺寸，可选值：small / default / large
    */
-  size: makeStringProp<ButtonSize>('medium'),
+  size: makeStringProp<ButtonSize>('default'),
   /**
    * 图标类名
    */

package/components/oxy-calendar/index.scss

@@ -42,31 +42,31 @@
   }
 
   @include e(title) {
-    color: $-action-sheet-color;
-    height: $-action-sheet-title-height;
-    line-height: $-action-sheet-title-height;
+    color: $-calendar-title-color;
+    height: $-calendar-title-height;
+    line-height: $-calendar-title-height;
     text-align: center;
-    font-size: $-action-sheet-title-fs;
-    font-weight: $-action-sheet-weight;
+    font-size: $-calendar-title-fs;
+    font-weight: $-calendar-title-fw;
   }
 
   @include edeep(close) {
     position: absolute;
-    top: $-action-sheet-close-top;
-    right: $-action-sheet-close-right;
-    color: $-action-sheet-close-color;
-    font-size: $-action-sheet-close-fs;
+    top: $-calendar-close-top;
+    right: $-calendar-close-right;
+    color: $-calendar-close-color;
+    font-size: $-calendar-close-fs;
     transform: rotate(-45deg);
     line-height: 1.1;
   }
 
   @include e(tabs) {
     width: 444rpx;
-    margin: 24rpx auto 28rpx;
+    margin: $-spacing-24 auto 28rpx;
   }
 
   @include e(shortcuts) {
-    padding: 40rpx 0;
+    padding: $-spacing-40 0;
     text-align: center;
   }
 
@@ -78,9 +78,9 @@
     @include when(show-confirm) {
       height: 788rpx;
 
-      @include when(range) {
-        height: 768rpx;
-      }
+      // @include when(range) {
+      //   height: 768rpx;
+      // }
     }
   }
 
@@ -106,12 +106,12 @@
   }
 
   @include e(range-sperator) {
-    margin: 0 48rpx;
+    margin: 0 $-spacing-48;
     color: $-calendar-disabled-color;
   }
 
   @include e(confirm) {
-    padding: 28rpx 52rpx 32rpx;
+    padding: $-spacing-24 $-spacing-48 $-spacing-32;
   }
 
   @include edeep(cell) {
@@ -141,7 +141,7 @@
       }
     }
   }
-  
+
   @include edeep(arrow) {
     display: block;
     font-size: $-cell-icon-size;

package/components/oxy-calendar/oxy-calendar.vue

@@ -119,7 +119,9 @@ export default {
   name: 'oxy-calendar',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -142,6 +144,14 @@ import { calendarProps, type CalendarExpose } from './types'
 import type { CalendarType } from '../oxy-calendar-view/types'
 const { translate } = useTranslate('calendar')
 
+/**
+ * 默认的展示值格式化函数，将选中值转换为可读的展示文案。
+ * 根据不同 calendar type 格式化：date/dates/daterange/datetime/datetimerange/week/weekrange/month/monthrange。
+ *
+ * @param value 选中的值，可能是单个时间戳或时间戳数组
+ * @param type 日历类型
+ * @returns 格式化后的展示字符串
+ */
 const defaultDisplayFormat = (value: number | number[], type: CalendarType): string => {
   switch (type) {
     case 'date':
@@ -203,6 +213,12 @@ const defaultDisplayFormat = (value: number | number[], type: CalendarType): str
   }
 }
 
+/**
+ * 范围选择时格式化单个端点日期。
+ * @param value 端点时间戳，为 0 或 undefined 时返回占位文案
+ * @param rangeType 'start' | 'end'
+ * @param type 日历类型
+ */
 const formatRange = (value: number, rangeType: 'start' | 'end', type: CalendarType) => {
   switch (type) {
     case 'daterange':
@@ -339,6 +355,10 @@ function scrollIntoView() {
   calendarView.value && calendarView.value && calendarView.value.$.exposed.scrollIntoView()
 }
 // 对外暴露方法
+/**
+ * 打开日历面板。设置面板可见、克隆当前值用于取消时恢复，等待渲染完成后自动滚动到选中日期。
+ * showTypeSwitch 模式下额外延迟滚动 tab 到可视区域。
+ */
 async function open() {
   const { disabled, readonly } = props
 
@@ -378,6 +398,12 @@ function handleTypeChange({ index }: { index: number }) {
   currentTab.value = index
   currentType.value = type as CalendarType
 }
+/**
+ * 判断确认按钮是否应该禁用。
+ * - 范围选择未选满两端
+ * - dates 类型未选择任何日期
+ * - 值为空
+ */
 function getConfirmBtnStatus(value: number | number[] | null) {
   let confirmBtnDisabled = false
   // 范围选择未选择满，或者多日期选择未选择日期，按钮置灰不可点击
@@ -403,6 +429,11 @@ function handleChange({ value }: { value: number | number[] | null }) {
     handleConfirm()
   }
 }
+/**
+ * 确认选择。支持 beforeConfirm 异步校验：
+ * 若传入 beforeConfirm 回调，提供 resolve(isPass) 让调用方控制是否确认；
+ * 否则直接提交。
+ */
 function handleConfirm() {
   if (props.beforeConfirm) {
     props.beforeConfirm({

package/components/oxy-calendar/types.ts

@@ -160,6 +160,9 @@ export const calendarProps = {
    * 表单验证规则，结合oxy-form组件使用
    */
   rules: makeArrayProp<FormItemRule>(),
+  /**
+   * pickerView 外部自定义样式
+   */
   customViewClass: makeStringProp(''),
   /**
    * label 外部自定义样式

package/components/oxy-calendar-view/month/month.vue

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

package/components/oxy-calendar-view/monthPanel/month-panel.vue

@@ -47,7 +47,7 @@
           v-if="timeData.length"
           v-model="timeValue"
           :columns="timeData"
-          :columns-height="125"
+          :columns-height="260"
           :immediate-change="immediateChange"
           @change="handleTimeChange"
           @pickstart="handlePickStart"
@@ -62,7 +62,9 @@
 export default {
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }

package/components/oxy-calendar-view/monthPanel/types.ts

@@ -1,5 +1,5 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { makeBooleanProp, makeRequiredProp } from '../../common/props'
+import { makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
 import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../types'
 
 /**
@@ -15,23 +15,26 @@ export const monthPanelProps = {
   /**
    * 日期类型
    */
-  type: makeRequiredProp(String as PropType<CalendarType>),
+  type: makeStringProp<CalendarType>('date'),
   /**
    * 选中值
    */
-  value: makeRequiredProp([Number, Array, null] as PropType<number | (number | null)[] | null>),
+  value: {
+    type: [Number, Array, null] as PropType<number | (number | null)[] | null>,
+    default: null
+  },
   /**
    * 最小日期时间戳
    */
-  minDate: makeRequiredProp(Number),
+  minDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime()),
   /**
    * 最大日期时间戳
    */
-  maxDate: makeRequiredProp(Number),
+  maxDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate(), 23, 59, 59).getTime()),
   /**
    * 一周的第一天
    */
-  firstDayOfWeek: makeRequiredProp(Number),
+  firstDayOfWeek: makeNumberProp(0),
   /**
    * 格式化函数
    */
@@ -61,7 +64,7 @@ export const monthPanelProps = {
   /**
    * 面板高度
    */
-  panelHeight: makeRequiredProp(Number),
+  panelHeight: makeNumberProp(756),
   /**
    * 用于过滤时间选择器的数据
    */

package/components/oxy-calendar-view/oxy-calendar-view.vue

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

package/components/oxy-calendar-view/types.ts

@@ -41,7 +41,9 @@ export const calendarViewProps = {
    * type 为范围选择时有效，是否允许选择同一天
    */
   allowSameDay: makeBooleanProp(false),
-  // 是否展示面板标题，自动计算当前滚动的日期月份
+  /**
+   * 是否展示面板标题，自动计算当前滚动的日期月份
+   */
   showPanelTitle: makeBooleanProp(true),
   /**
    * 选中日期所使用的当日内具体时刻

package/components/oxy-calendar-view/year/types.ts

@@ -3,18 +3,50 @@ import { makeBooleanProp, makeRequiredProp } from '../../common/props'
 import type { CalendarFormatter, CalendarType } from '../types'
 
 export const yearProps = {
+  /**
+   * 日历类型
+   */
   type: makeRequiredProp(String as PropType<CalendarType>),
+  /**
+   * 当前日期（13位时间戳）
+   */
   date: makeRequiredProp(Number),
+  /**
+   * 选中值，单选为时间戳，范围选择为时间戳数组
+   */
   value: makeRequiredProp([Number, Array] as PropType<number | (number | null)[] | null>),
+  /**
+   * 最小日期（13位时间戳）
+   */
   minDate: makeRequiredProp(Number),
+  /**
+   * 最大日期（13位时间戳）
+   */
   maxDate: makeRequiredProp(Number),
-  // 日期格式化函数
+  /**
+   * 日期格式化函数
+   */
   formatter: Function as PropType<CalendarFormatter>,
+  /**
+   * 最大日期范围
+   */
   maxRange: Number,
+  /**
+   * 超出最大范围时的错误提示
+   */
   rangePrompt: String,
+  /**
+   * 是否允许选择同一天
+   */
   allowSameDay: makeBooleanProp(false),
+  /**
+   * 选中日期所使用的当日内具体时刻
+   */
   defaultTime: {
     type: [Array] as PropType<Array<number[]>>
   },
+  /**
+   * 是否显示标题
+   */
   showTitle: makeBooleanProp(true)
 }

package/components/oxy-calendar-view/year/year.vue

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

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

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

package/components/oxy-card/index.scss

@@ -56,7 +56,7 @@
     }
   }
   @include e(title-content) {
-    padding: 32rpx 0;
+    padding: $-spacing-32 0;
     color: $-card-title-color;
     font-size: $-card-title-fs;
   }

package/components/oxy-card/oxy-card.vue

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

package/components/oxy-cell/index.scss

@@ -109,7 +109,7 @@
   }
 
   @include e(label) {
-    margin-top: 8rpx;
+    margin-top: $-spacing-8;
     font-size: $-cell-label-fs;
     color: $-cell-label-color;
   }
@@ -147,6 +147,8 @@
       @include lineEllipsis;
       min-width: 0;
     }
+
+
   }
 
   @include edeep(arrow-right) {

package/components/oxy-cell/oxy-cell.vue

@@ -52,7 +52,9 @@ export default {
   name: 'oxy-cell',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -82,8 +84,8 @@ const isBorder = computed(() => {
 const { parent: form } = useParent(FORM_KEY)
 
 const errorMessage = computed(() => {
-  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
-    return form.errorMessages[props.prop]
+  if (form.value && props.prop && form.value.errorMessages && form.value.errorMessages[props.prop]) {
+    return form.value.errorMessages[props.prop]
   } else {
     return ''
   }
@@ -92,8 +94,8 @@ const errorMessage = computed(() => {
 // 是否展示必填
 const isRequired = computed(() => {
   let formRequired = false
-  if (form && form.props.rules) {
-    const rules = form.props.rules
+  if (form.value && form.value.props.rules) {
+    const rules = form.value.props.rules
     for (const key in rules) {
       if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
         formRequired = rules[key].some((rule) => rule.required)

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

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

package/components/oxy-checkbox/index.scss

@@ -53,7 +53,7 @@
   @include edeep(btn-check) {
     display: inline-block;
     font-size: $-checkbox-icon-size;
-    margin-right: 8rpx;
+    margin-right: $-spacing-8;
     vertical-align: middle;
     color: currentColor;
   }
@@ -81,20 +81,30 @@
   }
   @include when(button) {
     display: inline-block;
-    width: 33.3333%;
     margin-bottom: 0;
+    margin-right: $-checkbox-margin;
+    vertical-align: top;
+    font-size: $-checkbox-button-font-size;
+
+    @include when(last-child) {
+      margin-right: 0;
+    }
+
     .oxy-checkbox__label {
       display: flex;
       align-items: center;
       justify-content: center;
       height: $-checkbox-button-height;
       min-width: $-checkbox-button-min-width;
-      padding: 16rpx 32rpx;
+      padding: $-spacing-16 $-spacing-32;
+      margin-left: 0;
       border: 1px solid $-checkbox-button-border;
       box-sizing: border-box;
       border-radius: $-checkbox-button-radius;
       background: $-checkbox-button-bg;
-      transition: background 0.2s;
+      transition: all $-transition-duration-base;
+      line-height: 1.2;
+      text-align: center;
     }
     @include when(disabled) {
       .oxy-checkbox__label {
@@ -119,16 +129,41 @@
       }
     }
   }
+  @include when(inline) {
+    display: inline-block;
+    margin-bottom: 0;
+    margin-right: $-checkbox-margin;
+
+    @include when(last-child) {
+      margin-right: 0;
+    }
+  }
   @include when(cell-box) {
     display: inline-block;
-    padding: 32rpx 32rpx;
-    width: 33.3333%;
+    padding: $-cell-wrapper-padding $-cell-padding;
+    // width: 33.3333%;
+    margin: 0;
     box-sizing: border-box;
     font-size: 0;
+    @include when(large) {
+      padding: $-cell-wrapper-padding-large $-cell-padding;
+    }
     @include when(checked) {
       color: $-checkbox-checked-color;
     }
   }
+  &.is-cell-box.is-button-box {
+    display: inline-flex;
+    width: 33.3333%;
+    margin-right: 0;
+    padding: $-cell-wrapper-padding $-cell-padding 0 0;
+    box-sizing: border-box;
+
+    .oxy-checkbox__label {
+      width: 100%;
+      max-width: inherit;
+    }
+  }
   @include when(large) {
     .oxy-checkbox__shape {
       width: $-checkbox-large-size;