oxy-uni-ui 2.1.2 → 2.1.4

package/components/oxy-splitter/oxy-splitter.vue

@@ -9,16 +9,19 @@ export default {
   name: 'oxy-splitter',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
 </script>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance, nextTick, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+import { computed, getCurrentInstance, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { getRect, isDef, isNumber, isString, unitConvert, uuid } from '../common/util'
 import { SPLITTER_KEY, splitterProps, type SplitterCollapseType, type SplitterPanelSize, type SplitterPanelState, type SplitterExpose } from './types'
+import { useChildren } from '../composables/useChildren'
 
 const props = defineProps(splitterProps)
 const emit = defineEmits(['resize-start', 'resize', 'resize-end', 'collapse'])
@@ -35,6 +38,7 @@ const lazyOffset = ref<number>(0)
 const cacheSizes = ref<number[]>([])
 const cacheCollapsedSize = ref<number[]>([])
 const confirmedMovingIndex = ref<number>(-1)
+const { linkChildren } = useChildren(SPLITTER_KEY)
 
 const rootClass = computed(() => `oxy-splitter oxy-splitter--${props.layout} ${props.customClass}`)
 
@@ -71,6 +75,11 @@ const normalizePanelPercent = (size?: SplitterPanelSize) => {
   return getPixelValue(size) / containerSize.value
 }
 
+/**
+ * 归一化百分比列表。未定义的尺寸由剩余空间等比填充，总和超过 1 时按比例缩放。
+ * @param percentList - 原始百分比列表（含 undefined）
+ * @returns 归一化后的百分比数组
+ */
 const normalizePercentList = (percentList: Array<number | undefined>) => {
   const list = [...percentList]
   const undefinedCount = list.filter((item) => !isDef(item)).length
@@ -166,6 +175,11 @@ const getPanelIndex = (uid: number) => {
   return panels.value.findIndex((item) => item.uid === uid)
 }
 
+/**
+ * 拖拽移动面板尺寸。根据 offset 偏移量调整当前面板和下一个面板的尺寸，受 min/max 约束。
+ * @param index - 当前面板索引
+ * @param offset - 鼠标/触摸偏移量
+ */
 const movePanelSize = (index: number, offset: number) => {
   const panel = panels.value[index]
   const nextPanel = panels.value[index + 1]
@@ -248,6 +262,12 @@ const onMoveEnd = (index: number) => {
   emit('resize-end', index)
 }
 
+/**
+ * 面板折叠/展开处理。
+ * 若任一侧已折叠，优先还原已折叠侧；否则按 type 方向折叠当前面板并扩展另一侧。
+ * @param index - 面板索引
+ * @param type - 折叠方向（'start' | 'end'）
+ */
 const onCollapse = (index: number, type: SplitterCollapseType) => {
   const panel = panels.value[index]
   const nextPanel = panels.value[index + 1]
@@ -341,6 +361,7 @@ const refresh = async () => {
     if (isNumber(nextSize) && Number.isFinite(nextSize) && nextSize > 0) {
       containerSize.value = nextSize
       syncPercentSizes()
+      return
     }
   } catch (error) {
     // empty
@@ -365,7 +386,7 @@ watch(
   }
 )
 
-provide(SPLITTER_KEY, {
+linkChildren({
   layout: computed(() => props.layout),
   lazy: computed(() => props.lazy),
   panels,

package/components/oxy-splitter-panel/index.scss

@@ -16,7 +16,9 @@
   }
 
   @include e(bar) {
-    position: relative;
+    position: absolute;
+    top: 0;
+    left: auto;
     z-index: 2;
     display: flex;
     align-items: center;
@@ -53,8 +55,7 @@
       width: $-splitter-touch-hit-size;
       height: 100%;
       flex-direction: column;
-      margin-left: calc(#{$-splitter-touch-hit-size} / -2);
-      margin-right: calc(#{$-splitter-touch-hit-size} / -2);
+      right: calc(#{$-splitter-touch-hit-size} / -2);
       touch-action: pan-y;
 
       &::before {
@@ -78,8 +79,9 @@
       width: 100%;
       height: $-splitter-touch-hit-size;
       flex-direction: row;
-      margin-top: calc(#{$-splitter-touch-hit-size} / -2);
-      margin-bottom: calc(#{$-splitter-touch-hit-size} / -2);
+      top: auto;
+      left: 0;
+      bottom: calc(#{$-splitter-touch-hit-size} / -2);
       touch-action: pan-x;
 
       &::before {

package/components/oxy-splitter-panel/oxy-splitter-panel.vue

@@ -3,56 +3,56 @@
     <view class="oxy-splitter-panel__content">
       <slot />
     </view>
-  </view>
-  <view
-    v-if="showBar"
-    :class="barClass"
-    :style="barStyle"
-    @touchstart.stop="onTouchStart"
-    @touchmove="onTouchMove"
-    @touchend="onTouchEnd"
-    @touchcancel="onTouchEnd"
-    @mousedown.stop.prevent="onMouseDown"
-  >
-    <view v-if="isBarDraggable" class="oxy-splitter-panel__grip" />
-
-    <view v-if="showActionGroup" class="oxy-splitter-panel__action-group" @touchstart.stop="noop" @mousedown.stop="noop">
-      <view class="oxy-splitter-panel__action-segment oxy-splitter-panel__action-segment--start" @tap.stop="onCollapse('start')">
+    <view
+      v-if="showBar"
+      :class="barClass"
+      :style="barStyle"
+      @touchstart.stop="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @touchcancel="onTouchEnd"
+      @mousedown.stop.prevent="onMouseDown"
+    >
+      <view v-if="isBarDraggable" class="oxy-splitter-panel__grip" />
+
+      <view v-if="showActionGroup" class="oxy-splitter-panel__action-group" @touchstart.stop="noop" @mousedown.stop="noop">
+        <view class="oxy-splitter-panel__action-segment oxy-splitter-panel__action-segment--start" @tap.stop="onCollapse('start')">
+          <slot name="start-collapsible">
+            <oxy-icon :name="startIconName" size="24rpx" custom-class="oxy-splitter-panel__icon"></oxy-icon>
+          </slot>
+        </view>
+        <view class="oxy-splitter-panel__action-separator"></view>
+        <view class="oxy-splitter-panel__action-segment oxy-splitter-panel__action-segment--end" @tap.stop="onCollapse('end')">
+          <slot name="end-collapsible">
+            <oxy-icon :name="endIconName" size="24rpx" custom-class="oxy-splitter-panel__icon"></oxy-icon>
+          </slot>
+        </view>
+      </view>
+
+      <view
+        v-if="showSingleStartAction"
+        class="oxy-splitter-panel__action oxy-splitter-panel__action--start"
+        @tap.stop="onCollapse('start')"
+        @touchstart.stop="noop"
+        @mousedown.stop="noop"
+      >
         <slot name="start-collapsible">
           <oxy-icon :name="startIconName" size="24rpx" custom-class="oxy-splitter-panel__icon"></oxy-icon>
         </slot>
       </view>
-      <view class="oxy-splitter-panel__action-separator"></view>
-      <view class="oxy-splitter-panel__action-segment oxy-splitter-panel__action-segment--end" @tap.stop="onCollapse('end')">
+
+      <view
+        v-if="showSingleEndAction"
+        class="oxy-splitter-panel__action oxy-splitter-panel__action--end"
+        @tap.stop="onCollapse('end')"
+        @touchstart.stop="noop"
+        @mousedown.stop="noop"
+      >
         <slot name="end-collapsible">
           <oxy-icon :name="endIconName" size="24rpx" custom-class="oxy-splitter-panel__icon"></oxy-icon>
         </slot>
       </view>
     </view>
-
-    <view
-      v-if="showSingleStartAction"
-      class="oxy-splitter-panel__action oxy-splitter-panel__action--start"
-      @tap.stop="onCollapse('start')"
-      @touchstart.stop="noop"
-      @mousedown.stop="noop"
-    >
-      <slot name="start-collapsible">
-        <oxy-icon :name="startIconName" size="24rpx" custom-class="oxy-splitter-panel__icon"></oxy-icon>
-      </slot>
-    </view>
-
-    <view
-      v-if="showSingleEndAction"
-      class="oxy-splitter-panel__action oxy-splitter-panel__action--end"
-      @tap.stop="onCollapse('end')"
-      @touchstart.stop="noop"
-      @mousedown.stop="noop"
-    >
-      <slot name="end-collapsible">
-        <oxy-icon :name="endIconName" size="24rpx" custom-class="oxy-splitter-panel__icon"></oxy-icon>
-      </slot>
-    </view>
   </view>
 </template>
 
@@ -61,7 +61,9 @@ export default {
   name: 'oxy-splitter-panel',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -69,17 +71,18 @@ export default {
 
 <script lang="ts" setup>
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
-import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from 'vue'
 import { isDef, objToStyle, unitConvert } from '../common/util'
 import { useTouch } from '../composables/useTouch'
+import { useParent } from '../composables/useParent'
 import { SPLITTER_KEY, type SplitterCollapseType } from '../oxy-splitter/types'
 import { splitterPanelProps, type SplitterPanelEmits, type SplitterPanelExpose } from './types'
 
 const props = defineProps(splitterPanelProps)
 const emit = defineEmits<SplitterPanelEmits>()
 
-const splitter = inject(SPLITTER_KEY, null)
-const { uid } = getCurrentInstance()!
+const { uid: panelUid } = getCurrentInstance()!
+const { parent: splitter, index } = useParent(SPLITTER_KEY)
 
 const startPosition = ref(0)
 const dragging = ref(false)
@@ -91,7 +94,7 @@ const TOUCH_DRAG_SLOP = 6
 const noop = () => {}
 
 const syncPanelState = () => {
-  splitter?.updatePanel(uid, {
+  splitter.value?.updatePanel(panelUid, {
     size: props.size,
     min: props.min,
     max: props.max,
@@ -101,19 +104,24 @@ const syncPanelState = () => {
 }
 
 onMounted(() => {
-  splitter?.registerPanel({
-    uid,
+  const parentSplitter = splitter.value
+  if (!parentSplitter) {
+    return
+  }
+
+  parentSplitter.registerPanel({
+    uid: panelUid,
     size: props.size,
     min: props.min,
     max: props.max,
     resizable: props.resizable,
     collapsible: props.collapsible
   })
-  splitter?.refresh()
+  parentSplitter.refresh()
 })
 
 onUnmounted(() => {
-  splitter?.unregisterPanel(uid)
+  splitter.value?.unregisterPanel(panelUid)
 })
 
 watch(
@@ -124,36 +132,32 @@ watch(
   { deep: true }
 )
 
-const index = computed(() => {
-  return splitter ? splitter.getPanelIndex(uid) : -1
-})
-
 const panelSize = computed(() => {
-  if (!splitter || index.value < 0) {
+  if (!splitter.value || index.value < 0) {
     return 0
   }
-  return splitter.getPanelSize(index.value)
+  return splitter.value.getPanelSize(index.value)
 })
 
 const showBar = computed(() => {
-  if (!splitter || index.value < 0) {
+  if (!splitter.value || index.value < 0) {
     return false
   }
-  return index.value < splitter.panels.value.length - 1
+  return index.value < splitter.value.panels.value.length - 1
 })
 
 const currentPanel = computed(() => {
-  if (!splitter || index.value < 0) {
+  if (!splitter.value || index.value < 0) {
     return undefined
   }
-  return splitter.panels.value[index.value]
+  return splitter.value.panels.value[index.value]
 })
 
 const nextPanel = computed(() => {
-  if (!splitter || index.value < 0) {
+  if (!splitter.value || index.value < 0) {
     return undefined
   }
-  return splitter.panels.value[index.value + 1]
+  return splitter.value.panels.value[index.value + 1]
 })
 
 const startCollapsible = computed(() => {
@@ -165,13 +169,13 @@ const endCollapsible = computed(() => {
 })
 
 const nextPanelSize = computed(() => {
-  if (!splitter || index.value < 0) {
+  if (!splitter.value || index.value < 0) {
     return 0
   }
-  return splitter.getPanelSize(index.value + 1)
+  return splitter.value.getPanelSize(index.value + 1)
 })
 
-const isVertical = computed(() => splitter?.layout.value === 'vertical')
+const isVertical = computed(() => splitter.value?.layout.value === 'vertical')
 const panelCollapsed = computed(() => panelSize.value === 0)
 const nextPanelCollapsed = computed(() => nextPanelSize.value === 0)
 
@@ -192,7 +196,7 @@ const endIconName = computed(() => {
 })
 
 const panelStyle = computed(() => {
-  if (!splitter || index.value < 0) {
+  if (!splitter.value || index.value < 0) {
     return ''
   }
 
@@ -201,7 +205,7 @@ const panelStyle = computed(() => {
     'flex-shrink': '0'
   }
 
-  if (splitter.layout.value === 'horizontal') {
+  if (splitter.value.layout.value === 'horizontal') {
     style.width = `${panelSize.value}px`
     style.height = '100%'
   } else {
@@ -213,11 +217,11 @@ const panelStyle = computed(() => {
 })
 
 const barClass = computed(() => {
-  const draggable = splitter ? splitter.isDraggable(index.value) : false
-  const moving = splitter ? splitter.movingIndex.value === index.value : false
+  const draggable = splitter.value ? splitter.value.isDraggable(index.value) : false
+  const moving = splitter.value ? splitter.value.movingIndex.value === index.value : false
   return [
     'oxy-splitter-panel__bar',
-    `oxy-splitter-panel__bar--${splitter?.layout.value || 'horizontal'}`,
+    `oxy-splitter-panel__bar--${splitter.value?.layout.value || 'horizontal'}`,
     draggable ? 'is-draggable' : 'is-static',
     showCollapseAction.value ? 'has-action' : '',
     hasDoubleAction.value ? 'has-double-action' : '',
@@ -228,7 +232,7 @@ const barClass = computed(() => {
 })
 
 const isBarDraggable = computed(() => {
-  return splitter ? splitter.isDraggable(index.value) : false
+  return splitter.value ? splitter.value.isDraggable(index.value) : false
 })
 
 const hasDoubleAction = computed(() => {
@@ -240,7 +244,7 @@ const actionDenseThreshold = computed(() => {
 })
 
 const hideCollapseActionByDensity = computed(() => {
-  if (!splitter || index.value < 0) {
+  if (!splitter.value || index.value < 0) {
     return false
   }
 
@@ -273,20 +277,20 @@ const showSingleEndAction = computed(() => {
 })
 
 const barStyle = computed(() => {
-  if (!splitter || !splitter.lazy.value) {
+  if (!splitter.value || !splitter.value.lazy.value) {
     return ''
   }
 
-  if (splitter.movingIndex.value !== index.value) {
+  if (splitter.value.movingIndex.value !== index.value) {
     return ''
   }
 
-  const offset = splitter.lazyOffset.value
+  const offset = splitter.value.lazyOffset.value
   if (!offset) {
     return ''
   }
 
-  if (splitter.layout.value === 'horizontal') {
+  if (splitter.value.layout.value === 'horizontal') {
     return `transform: translateX(${offset}px);`
   }
 
@@ -295,50 +299,50 @@ const barStyle = computed(() => {
 
 const getClientPosition = (event: any) => {
   if (event?.touches && event.touches[0]) {
-    return splitter?.layout.value === 'horizontal' ? event.touches[0].clientX : event.touches[0].clientY
+    return splitter.value?.layout.value === 'horizontal' ? event.touches[0].clientX : event.touches[0].clientY
   }
 
   if (event?.changedTouches && event.changedTouches[0]) {
-    return splitter?.layout.value === 'horizontal' ? event.changedTouches[0].clientX : event.changedTouches[0].clientY
+    return splitter.value?.layout.value === 'horizontal' ? event.changedTouches[0].clientX : event.changedTouches[0].clientY
   }
 
   if (isDef(event?.clientX) && isDef(event?.clientY)) {
-    return splitter?.layout.value === 'horizontal' ? event.clientX : event.clientY
+    return splitter.value?.layout.value === 'horizontal' ? event.clientX : event.clientY
   }
 
   return 0
 }
 
 const startMove = (position: number) => {
-  if (!splitter || index.value < 0 || !splitter.isDraggable(index.value)) {
+  if (!splitter.value || index.value < 0 || !splitter.value.isDraggable(index.value)) {
     return
   }
 
   dragging.value = true
   startPosition.value = position
-  splitter.onMoveStart(index.value)
+  splitter.value.onMoveStart(index.value)
 }
 
 const move = (position: number) => {
-  if (!splitter || !dragging.value || index.value < 0) {
+  if (!splitter.value || !dragging.value || index.value < 0) {
     return
   }
 
   const offset = position - startPosition.value
-  splitter.onMoving(index.value, offset)
+  splitter.value.onMoving(index.value, offset)
 }
 
 const endMove = () => {
-  if (!splitter || !dragging.value || index.value < 0) {
+  if (!splitter.value || !dragging.value || index.value < 0) {
     return
   }
 
   dragging.value = false
-  splitter.onMoveEnd(index.value)
+  splitter.value.onMoveEnd(index.value)
 }
 
 const onTouchStart = (event: any) => {
-  if (!splitter || index.value < 0 || !splitter.isDraggable(index.value)) {
+  if (!splitter.value || index.value < 0 || !splitter.value.isDraggable(index.value)) {
     return
   }
 
@@ -348,12 +352,12 @@ const onTouchStart = (event: any) => {
 }
 
 const onTouchMove = (event: any) => {
-  if (!splitter || index.value < 0 || (!dragging.value && !touchPending.value)) {
+  if (!splitter.value || index.value < 0 || (!dragging.value && !touchPending.value)) {
     return
   }
 
   touch.touchMove(event)
-  const expectedDirection = splitter.layout.value === 'horizontal' ? 'horizontal' : 'vertical'
+  const expectedDirection = splitter.value.layout.value === 'horizontal' ? 'horizontal' : 'vertical'
   const mainOffset = expectedDirection === 'horizontal' ? touch.offsetX.value : touch.offsetY.value
 
   if (!dragging.value) {
@@ -401,10 +405,10 @@ const onMouseDown = (event: MouseEvent) => {
 }
 
 const onCollapse = (type: SplitterCollapseType) => {
-  if (!splitter || index.value < 0) {
+  if (!splitter.value || index.value < 0) {
     return
   }
-  splitter.onCollapse(index.value, type)
+  splitter.value.onCollapse(index.value, type)
 }
 
 watch(

package/components/oxy-status-tip/index.scss

@@ -23,11 +23,11 @@
 
   @include edeep(image) {
     margin: 0 auto;
-    width: 320rpx;
-    height: 320rpx;
+    width: $-statustip-image-size;
+    height: $-statustip-image-size;
   }
   @include e(text) {
-    margin: 40rpx auto 0;
+    margin: $-spacing-40 auto 0;
     font-size: $-statustip-fs;
     line-height: $-statustip-line-height;
     color: $-statustip-color;

package/components/oxy-status-tip/oxy-status-tip.vue

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

package/components/oxy-step/index.scss

@@ -58,7 +58,7 @@
     width: $-steps-icon-size;
     height: $-steps-icon-size;
     background: $-color-white;
-    z-index: 1;
+    z-index: $-z-index-sticky;
 
     @include when(icon) {
       width: $-steps-is-icon-width;
@@ -118,8 +118,8 @@
     }
   }
   @include e(description) {
-    margin-top: 12rpx;
-    padding: 0 8rpx;
+    margin-top: $-spacing-12;
+    padding: 0 $-spacing-8;
     color: $-steps-description-color;
   }
   @include when(wait) {
@@ -218,7 +218,7 @@
     .oxy-step__content {
       margin-left: 60rpx;
       margin-top: 0;
-      padding-bottom: 40rpx;
+      padding-bottom: $-spacing-40;
     }
     .oxy-step__line {
       top: 0;

package/components/oxy-step/oxy-step.vue

@@ -36,7 +36,9 @@ export default {
   name: 'oxy-step',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -66,22 +68,22 @@ const currentTitle = computed(() => {
 })
 const rootStyle = computed(() => {
   const style: CSSProperties = {}
-  if (steps) {
-    const { vertical, space } = steps.props
+  if (steps.value) {
+    const { vertical, space } = steps.value.props
     if (vertical) {
       if (isDef(space)) {
         style['height'] = space
       }
     } else {
-      style['width'] = space || 100 / steps.children.length + '%'
+      style['width'] = space || 100 / steps.value.children.length + '%'
     }
   }
   return `${objToStyle(style)}${props.customStyle}`
 })
 
 const canAlignCenter = computed(() => {
-  if (isDef(steps)) {
-    const { vertical, alignCenter } = steps.props
+  if (isDef(steps.value)) {
+    const { vertical, alignCenter } = steps.value.props
     return Boolean(!vertical && alignCenter)
   } else {
     return false
@@ -89,23 +91,23 @@ const canAlignCenter = computed(() => {
 })
 
 const vertical = computed(() => {
-  if (isDef(steps)) {
-    return Boolean(steps.props.vertical)
+  if (isDef(steps.value)) {
+    return Boolean(steps.value.props.vertical)
   } else {
     return false
   }
 })
 const dot = computed(() => {
-  if (isDef(steps)) {
-    return Boolean(steps.props.dot)
+  if (isDef(steps.value)) {
+    return Boolean(steps.value.props.dot)
   } else {
     return false
   }
 })
 
 const childrenLength = computed(() => {
-  if (isDef(steps)) {
-    return Number(steps.children.length)
+  if (isDef(steps.value)) {
+    return Number(steps.value.children.length)
   } else {
     return 0
   }
@@ -116,8 +118,8 @@ function getCurrentStatus(index: number) {
     return props.status
   }
 
-  if (steps) {
-    const { active } = steps.props
+  if (steps.value) {
+    const { active } = steps.value.props
     if (Number(active) > index) {
       return 'finished'
     } else if (Number(active) === index) {

package/components/oxy-steps/oxy-steps.vue

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

package/components/oxy-sticky/oxy-sticky.vue

@@ -15,7 +15,9 @@ export default {
   name: 'oxy-sticky',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -113,8 +115,8 @@ async function handleResize(detail: any) {
   stickyState.height = detail.height
   await pause()
   observerContentScroll()
-  if (!stickyBox || !stickyBox.observerForChild) return
-  stickyBox.observerForChild(proxy)
+  if (!stickyBox.value || !stickyBox.value.observerForChild) return
+  stickyBox.value.observerForChild(proxy)
 }
 /**
  *  监听吸顶元素滚动事件
@@ -143,7 +145,7 @@ function observerContentScroll() {
  */
 function handleRelativeTo({ boundingClientRect }: any) {
   // sticky 高度大于或等于 oxy-sticky-box，使用 oxy-sticky-box 无任何意义
-  if (stickyBox && stickyBox.boxStyle && stickyState.height >= stickyBox.boxStyle.height) {
+  if (stickyBox.value && stickyBox.value.boxStyle && stickyState.height >= stickyBox.value.boxStyle.height) {
     stickyState.position = 'absolute'
     stickyState.top = 0
     return