oxy-uni-ui 2.1.1 → 2.1.3

package/components/oxy-rich-text/index.scss

@@ -16,7 +16,7 @@
   .rich-text-main {
     flex: 1;
     overflow-y: auto;
-    padding: 16rpx;
+    padding: $-spacing-16;
     position: relative;
 
   }
@@ -24,10 +24,10 @@
   .editor_toolbox {
     width: 100%;
     background: $-rich-text-toolbox-bg-gradient;
-    padding: 8rpx 16rpx;
+    padding: $-spacing-8 $-spacing-16;
     box-sizing: border-box;
     flex-wrap: wrap;
-    gap: 8rpx;
+    gap: $-spacing-8;
     display: flex;
     align-items: center;
     border-bottom: 1px solid $-color-border-light;
@@ -59,7 +59,7 @@
       width: 32rpx;
       height: 32rpx;
       cursor: pointer;
-      padding: 16rpx;
+      padding: $-spacing-16;
       border-radius: $-rich-text-toolbox-icon-radius;
       transition: all 0.2s ease;
       box-sizing: content-box;
@@ -79,7 +79,7 @@
       cursor: pointer;
       width: 32rpx;
       height: 32rpx;
-      padding: 16rpx;
+      padding: $-spacing-16;
       border-radius: $-rich-text-toolbox-icon-radius;
       transition: all 0.2s ease;
       box-sizing: content-box;
@@ -113,7 +113,7 @@
   }
 
   .oxy-rich-text__popup {
-    padding: 0 24rpx 24rpx 24rpx;
+    padding: 0 $-spacing-24 $-spacing-24 $-spacing-24;
 
     .oxy-rich-text__emoji-content {
       display: flex;
@@ -130,7 +130,7 @@
       border-top: 1px dashed $-rich-text-popup-divider-color;
       width: 80%;
       height: 0;
-      margin: 40rpx auto;
+      margin: $-spacing-40 auto;
     }
 
     .oxy-rich-text__link-input {
@@ -145,8 +145,8 @@
 
     .oxy-rich-text__link-buttons {
       display: flex;
-      gap: 24rpx;
-      margin-top: 40rpx;
+      gap: $-spacing-24;
+      margin-top: $-spacing-40;
 
       .oxy-button {
         flex: 1;

package/components/oxy-rich-text/oxy-rich-text.vue

@@ -80,7 +80,9 @@
 export default {
   name: 'oxy-rich-mardown',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -275,6 +277,10 @@ const tagStyle = computed(() => {
   }
 })
 
+/**
+ * 处理 markdown 内容：检测未闭合的代码块（```开头无结尾），补换行符
+ * 避免渲染引擎因未闭合代码块导致后续内容异常
+ */
 const contentAi = computed<string>(() => {
   if (!content.value) {
     return ''

package/components/oxy-rich-text/types.ts

@@ -3,14 +3,23 @@ import { baseProps, makeStringProp } from '../common/props'
 
 export const richTextProps = {
   ...baseProps,
+  /**
+   * Markdown 内容字符串
+   */
   markdown: {
     type: String,
     default: ''
   },
+  /**
+   * 自定义标签样式，与内置默认样式合并（props 优先级更高）
+   */
   tagStyle: {
     type: Object,
     default: () => ({})
   },
+  /**
+   * 是否启用编辑模式，开启后显示编辑工具栏
+   */
   editable: {
     type: Boolean,
     default: false
@@ -20,6 +29,12 @@ export const richTextProps = {
    * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
    */
   popupMaxWidth: makeStringProp('1200rpx'),
+  /**
+   * 自定义上传方法，用于编辑模式下图片/视频上传
+   * @param src - 文件临时路径
+   * @param type - 文件类型（'img' | 'video' | 'audio'）
+   * @returns Promise<string> 返回上传后的 URL
+   */
   uploadMethod: {
     type: Function as any,
     default: null

package/components/oxy-root-portal/oxy-root-portal.vue

@@ -1,29 +1,37 @@
 <template>
   <!-- #ifdef H5 -->
-  <!-- H5端使用 teleport -->
   <teleport to="body">
-    <!-- #endif -->
-    <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
-    <!-- #ifndef MP-DINGTALK -->
-    <!-- 小程序使用 root-portal -->
-    <root-portal>
-      <!-- #endif -->
-      <!-- #endif -->
-      <slot />
-      <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
-      <!-- #ifndef MP-DINGTALK -->
-    </root-portal>
-    <!-- #endif -->
-    <!-- #endif -->
-    <!-- #ifdef H5 -->
+    <slot />
   </teleport>
   <!-- #endif -->
+
+  <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+  <!-- #ifndef MP-DINGTALK -->
+  <root-portal>
+    <slot />
+  </root-portal>
+  <!-- #endif -->
+  <!-- #endif -->
+
+  <!-- #ifdef MP-TOUTIAO -->
+  <slot />
+  <!-- #endif -->
+
+  <!-- #ifdef APP-PLUS -->
+  <slot />
+  <!-- #endif -->
+
+  <!-- #ifndef H5 || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || APP-PLUS -->
+  <slot />
+  <!-- #endif -->
 </template>
 <script>
 export default {
   name: 'oxy-root-portal',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

package/components/oxy-row/oxy-row.vue

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

package/components/oxy-search/index.scss

@@ -32,11 +32,11 @@
 
     @include when(light) {
       background: $-dark-background4;
-  
+
       .oxy-search__block {
         background: $-dark-background7;
       }
-  
+
       .oxy-search__cover {
         background: $-dark-background7;
       }
@@ -116,7 +116,7 @@
   @include edeep(clear) {
     position: absolute;
     right: 0;
-    padding: 16rpx 24rpx 16rpx 20rpx;
+    padding: $-spacing-16 $-spacing-24 $-spacing-16 $-spacing-20;
     color: $-search-cancel-color;
   }
   @include edeep(clear-icon) {

package/components/oxy-search/oxy-search.vue

@@ -40,7 +40,9 @@
 export default {
   name: 'oxy-search',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -104,12 +106,21 @@ const coverStyle = computed(() => {
   return objToStyle(coverStyle)
 })
 
+/**
+ * 通过 hack 方式控制输入框聚焦/失焦
+ * 先切换 showInput 可见性，再延迟设置 isFocused
+ * @param focus - true 聚焦，false 失焦
+ */
 async function hackFocus(focus: boolean) {
   showInput.value = focus
   await pause()
   isFocused.value = focus
 }
 
+/**
+ * 关闭搜索 cover 层，进入输入模式
+ * 延迟 100ms 后隐藏 placeholder cover 并聚焦输入框
+ */
 async function closeCover() {
   if (props.disabled) return
   await pause(100)
@@ -125,6 +136,10 @@ function handleInput(event: any) {
   })
 }
 
+/**
+ * 清空搜索值：重置输入框和 placeholder 状态
+ * 支持 focusWhenClear 模式下自动重新聚焦
+ */
 async function handleClear() {
   inputValue.value = ''
   if (props.focusWhenClear) {
@@ -160,6 +175,10 @@ function handleFocus() {
   })
 }
 
+/**
+ * 失焦处理：延迟 150ms 等待 clear 操作完成
+ * 避免清空时重复触发 blur + clear 的连锁反应
+ */
 async function handleBlur() {
   // 等待150毫秒，clear执行完毕
   await pause(150)

package/components/oxy-segmented/index.scss

@@ -53,10 +53,10 @@
     border-radius: $-segmented-radius;
     flex: 1;
     min-width: 0;
-    z-index: 1;
+    z-index: $-z-index-sticky;
     min-height: 56rpx;
     line-height: $-line-height-base;
-    padding: 0 24rpx;
+    padding: 0 $-spacing-24;
     font-size: $-fs-content;
     color: $-segmented-item-color;
     font-weight: 400;
@@ -64,7 +64,7 @@
     @include when(large) {
       min-height: 64rpx;
       line-height: $-line-height-base;
-      padding: 0 24rpx;
+      padding: 0 $-spacing-24;
       font-size: $-fs-title;
     }
 
@@ -72,7 +72,7 @@
     @include when(small) {
       min-height: 48rpx;
       line-height: $-line-height-base;
-      padding: 0 16rpx;
+      padding: 0 $-spacing-16;
       font-size: $-fs-secondary;
     }
 

package/components/oxy-segmented/oxy-segmented.vue

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

package/components/oxy-select/index.scss

@@ -26,7 +26,7 @@
     color: $-select-clear-icon-color;
   }
   .oxy-select__icon-arrow {
-    transition: transform .2s;
+    transition: transform $-transition-duration-base;
   }
   .oxy-select__icon-arrow.is-open {
     transform: rotate(180deg);
@@ -51,7 +51,7 @@
     width: 100%;
     flex: 1;
     min-height: $-select-wrapper-min-height;
-    transition: all 0.2s;
+    transition: all $-transition-duration-base;
 
     &:hover:not(.is-disabled):not(.is-readonly) {
       border-color: $-color-theme;
@@ -92,31 +92,31 @@
     display: flex;
     flex-wrap: wrap;
     min-width: 0;
-    padding: 8rpx 0;
+    padding: $-spacing-8 0;
   }
 
   .oxy-select__tags-item {
     display: inline-flex;
     min-width: 0;
     max-width: 100%;
-    margin: 8rpx 8rpx 8rpx 0;
+    margin: $-spacing-8 $-spacing-8 $-spacing-8 0;
   }
 
   :deep(.oxy-select__tags-item-tag.oxy-tag.is-round) {
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    min-height: 56rpx;
+    min-height: $-select-tag-height;
     max-width: 100%;
-    height: 56rpx;
-    padding: 0 20rpx;
+    height: $-select-tag-height;
+    padding: $-select-tag-padding;
     background-color: $-color-bg;
     border-color: $-color-border-light;
     border-radius: $-select-tag-radius;
     color: $-color-secondary;
     font-size: $-select-tag-font-size;
-    line-height: 52rpx;
-    transition: all 0.2s;
+    line-height: $-select-tag-line-height;
+    transition: all $-transition-duration-base;
 
     &:hover {
       border-color: $-color-theme;
@@ -136,7 +136,7 @@
   }
 
   :deep(.oxy-select__tags-item-tag .oxy-tag__close) {
-    margin-left: 12rpx;
+    margin-left: $-select-tag-close-margin;
     margin-right: 0;
     height: auto;
     line-height: 1;
@@ -154,8 +154,8 @@
   .oxy-select__input {
     flex: 1;
     font-size: $-fs-content;
-    height: 52rpx;
-    line-height: 52rpx;
+    height: $-select-input-height;
+    line-height: $-select-input-line-height;
   }
 
   .oxy-select__input-plac {
@@ -191,8 +191,8 @@
     border: 1px solid $-color-border-light;
     border-radius: $-select-dropdown-radius;
     box-shadow: $-select-dropdown-shadow;
-    z-index: 100;
-    padding: 16rpx 0;
+    z-index: $-z-index-overlay;
+    padding: $-spacing-16 0;
     overflow: hidden;
   }
 
@@ -202,8 +202,8 @@
       transform: translateY(0) scale(1);
       will-change: transform, opacity;
       transition-property: opacity, transform;
-      transition-duration: 0.2s;
-      transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+      transition-duration: $-transition-duration-base;
+      transition-timing-function: $-transition-timing-function-base;
     }
 
     .oxy-select__selector__down {
@@ -230,7 +230,7 @@
 
   .oxy-select__selector-scroll {
     /* #ifndef APP-NVUE */
-    max-height: 400rpx;
+    max-height: $-select-dropdown-max-height;
     box-sizing: border-box;
     /* #endif */
   }
@@ -240,12 +240,12 @@
     /* #ifndef APP-NVUE */
     display: flex;
     /* #endif */
-    min-height: 72rpx;
+    min-height: $-select-option-min-height;
     line-height: 1.4;
     font-size: $-fs-content;
-    padding: 16rpx 24rpx;
+    padding: $-spacing-16 $-spacing-24;
     box-sizing: border-box;
-    transition: background-color 0.2s;
+    transition: background-color $-transition-duration-base;
   }
 
   .oxy-select__selector-item {
@@ -276,7 +276,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 40rpx 0;
+    padding: $-spacing-40 0;
     color: $-color-aid;
     font-size: $-fs-secondary;
 
@@ -307,7 +307,7 @@
     filter: $-select-dropdown-filter-shadow;
 
     left: 10%;
-    margin-right: 8rpx;
+    margin-right: $-spacing-8;
     border-top-width: 0;
     border-bottom-color: $-color-border-light;
   }
@@ -334,7 +334,7 @@
 
   .oxy-select__input-selector {
     position: absolute;
-    z-index: 1;
+    z-index: $-z-index-sticky;
     left: 0;
     right: 60rpx;
     width: auto;
@@ -346,7 +346,7 @@
   .oxy-select__input-filter {
     width: auto;
     min-width: 80rpx;
-    margin-left: 8rpx;
+    margin-left: $-spacing-8;
     flex: 1;
     &::-webkit-input-placeholder {
       color: $-select-placeholder-color;
@@ -363,7 +363,7 @@
     bottom: 0;
     right: 0;
     left: 0;
-    z-index: 2;
+    z-index: $-z-index-fixed;
   }
 
   @include when(no-border) {

package/components/oxy-select/oxy-select.vue

@@ -103,7 +103,9 @@ export default {
   name: 'oxy-select',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -249,6 +251,11 @@ watch(
   }
 )
 
+/**
+ * 判断下拉框弹出方向（向上/向下）
+ * 通过查询元素位置和窗口高度，比较上下方空间决定弹出方向
+ * @returns Promise<boolean> - true 向下，false 向上
+ */
 function getIsDown() {
   return new Promise((resolve) => {
     const query = uni.createSelectorQuery().in(instance)
@@ -274,6 +281,10 @@ function getIsDown() {
   })
 }
 
+/**
+ * 初始化默认选中值
+ * 支持单选/多选模式，自动匹配 columns 数据生成显示文本和选中数组
+ */
 function initDefVal() {
   let defValue: SelectModelValue | '' = ''
   if ((valueCom.value || valueCom.value === 0) && !isDisabled(valueCom.value)) {
@@ -351,6 +362,12 @@ function clearVal() {
   filterInput.value = ''
 }
 
+/**
+ * 选项选中处理，支持单选和多选模式
+ * 多选：切换选中状态（添加/移除），不关闭下拉框
+ * 单选：关闭下拉框并更新值
+ * @param item - 选中的选项对象
+ */
 function change(item: any) {
   if (!item.disabled) {
     if (props.multiple) {
@@ -415,6 +432,10 @@ function handleEmit(val: any) {
     emit('change', _current)
   }
 }
+/**
+ * 切换下拉框显隐
+ * 打开前先计算弹出方向，处理 filterable 模式下的 placeholder 缓存
+ */
 async function toggleSelector() {
   if (props.disabled || props.readonly) {
     return
@@ -441,6 +462,12 @@ async function toggleSelector() {
   filterInput.value = ''
 }
 
+/**
+ * 格式化选项显示文本
+ * 支持 format 模板字符串替换（{key} 占位符）
+ * @param item - 选项对象
+ * @returns 格式化后的文本
+ */
 function formatItemName(item: any) {
   if (!item) {
     return ''

package/components/oxy-select/types.ts

@@ -73,6 +73,9 @@ export const selectProps = {
    * 格式化输出
    */
   format: makeStringProp(''),
+  /**
+   * 默认选中项的序号（从 1 开始），当 modelValue 未设置时自动选中 columns 中对应位置的项
+   */
   defItem: makeNumberProp(0),
   /**
    * 是否隐藏边框

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

@@ -47,7 +47,7 @@
       }
     }
   }
-  
+
   @include edeep(arrow, clear) {
     display: block;
     font-size: $-cell-icon-size;
@@ -58,7 +58,7 @@
   @include edeep(clear) {
     color: $-cell-clear-color;
   }
- 
+
   @include e(loading) {
     position: absolute;
     display: flex;
@@ -71,13 +71,13 @@
     z-index: 3;
     background: $-picker-loading-bg;
   }
-  
+
   @include edeep(header) {
     height: 144rpx;
     line-height: 144rpx;
   }
   @include e(wrapper) {
-    padding: 0 24rpx;
+    padding: 0 $-spacing-24;
     position: relative;
     max-height: 712rpx;
     box-sizing: border-box;
@@ -97,6 +97,6 @@
   }
 
   @include e(footer) {
-    padding: 52rpx 32rpx;
+    padding: $-spacing-48 $-spacing-32;
   }
 }

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

@@ -112,7 +112,9 @@ export default {
   name: 'oxy-select-picker',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -243,6 +245,11 @@ onBeforeMount(() => {
 
 const { proxy } = getCurrentInstance() as any
 
+/**
+ * 将当前选中项滚动到可视区域中央。
+ * radio 模式查询单个 radio item，checkbox 模式查询所有选中的 checkbox item。
+ * 若选中项已在可视区内则不滚动，否则滚动到 scroll-view 的居中位置。
+ */
 async function setScrollIntoView() {
   let wraperSelector: string = ''
   let selectorPromise: Promise<UniApp.NodeInfo>[] = []

package/components/oxy-sidebar/oxy-sidebar.vue

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

package/components/oxy-sidebar-item/index.scss

@@ -31,7 +31,7 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  padding: 32rpx;
+  padding: $-spacing-32;
   font-size: $-sidebar-font-size;
   color: $-sidebar-color;
   background: $-sidebar-bg;
@@ -94,13 +94,13 @@
   }
 
   @include edeep(badge) {
-    z-index: 2;
+    z-index: $-z-index-sticky;
     word-break: break-all;
   }
 
   @include edeep(icon) {
     font-size: $-sidebar-icon-size;
-    margin-right: 8rpx;
+    margin-right: $-spacing-8;
   }
 
 }