oxy-uni-ui 1.1.0 → 1.2.0

package/components/oxy-tree/index.scss

@@ -1,9 +1,31 @@
 @import '../common/abstracts/variable';
 @import '../common/abstracts/mixin';
+@import '../oxy-virtual-scroll/index.scss';
+
+.oxy-tree {
+  position: relative;
+  &__virtual-scroll {
+    position: relative;
+    overflow: hidden;
+  }
+
+  &__view {
+    height: 100%;
+  }
+
+  &__container {
+    position: relative;
+  }
+
+  &__items {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
 
 .oxy-tree-node-content {
-  line-height: 44px;
-  height: 44px;
   display: flex;
   width: fit-content;
   width: 100%;
@@ -11,13 +33,13 @@
   align-items: center;
 
   &.expanded {
-    .oxy-tree-node-icon {
+    :deep(.oxy-tree-node-icon) {
       transform: rotate(0deg);
     }
   }
 
   &.is-leaf {
-    .oxy-tree-node-icon {
+    :deep(.oxy-tree-node-icon) {
       opacity: 0;
     }
   }
@@ -51,11 +73,11 @@
     }
   }
 
-  .oxy-tree-node-icon {
+  :deep(.oxy-tree-node-icon) {
     transform: rotate(-90deg);
   }
 
   .oxy-tree-node {
     flex: 1;
   }
-}
+}

package/components/oxy-tree/oxy-tree.vue

@@ -1,17 +1,41 @@
 <template>
   <view class="oxy-tree" :class="customClass" :style="customStyle">
-    <oxy-virtual-scroll v-if="data.length" :data="flattenTree" :height="maxHeight" item-height="44px" :scrollX="true">
-      <template #item="{ item }">
-        <treeNodeContent :node="item" @toggle-expand="toggleExpand" @toggle-checked="toggleChecked" @click="handleClick">
-          <template #default="{ node, data }">
-            <slot :node="node" :data="data"></slot>
-          </template>
-        </treeNodeContent>
-      </template>
-    </oxy-virtual-scroll>
+    <view v-if="data.length" class="oxy-tree__virtual-scroll" :style="{ height: height }">
+      <scroll-view class="oxy-tree__view" scroll-y :scroll-x="true" :scroll-top="scrollTop" @scroll="handleScroll">
+        <view class="oxy-tree__container" :style="{ height: totalHeight + 'px' }">
+          <view class="oxy-tree__items" :style="{ transform: `translateY(${virtualOffsetY}px)` }">
+            <view v-for="(item, index) in virtualData" :key="index">
+              <view class="oxy-tree-node-content" :style="getNodeStyle(item)" :class="getNodeClass(item)" @click="handleNodeClick(item)">
+                <!-- 兼容支付宝、微信小程序 -->
+                <view @tap.stop="handleClickExpand(item)">
+                  <oxy-icon name="fill-arrow-down" custom-class="oxy-tree-node-icon" size="22px"></oxy-icon>
+                </view>
+                <oxy-checkbox
+                  v-if="showCheckbox"
+                  :modelValue="item.checked"
+                  :disabled="item.disabled"
+                  :indeterminate="item.immediate"
+                  shape="square"
+                ></oxy-checkbox>
+                <view class="oxy-tree-node">
+                  <slot name="node" :node="item" :data="item.data">
+                    {{ item.label }}
+                  </slot>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
     <view v-else>
       <oxy-status-tip image="content" :tip="emptyText" />
     </view>
+
+    <!-- 回到顶部按钮 -->
+    <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
+      <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
+    </view>
   </view>
 </template>
 
@@ -27,23 +51,27 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, nextTick, provide, ref, toRefs, watch } from 'vue'
-import type { RawTreeNode, TreeNode } from './types'
-import { textProps } from './types'
-import treeNodeContent from './components/tree-node-content.vue'
-import { isSetsEqual, useTreeMethods } from '.'
-
-// 树结构类型定义
-type Tree = {
-  treeNodeMap: Map<string, TreeNode>
-  levelTreeNodeMap: Map<number, TreeNode[]>
-  maxLevel: number
-  treeNodes: TreeNode[]
-}
+import { computed, nextTick, provide, type Ref, ref, toRefs, watch } from 'vue'
+import type { RawTreeNode, Tree, TreeInstance, TreeNode } from './types'
+import { treeProps, type TreeExpose } from './types'
+import { isSetsEqual, useTreeMethods } from './utils'
+import { useVirtualScroll } from '../composables/useVirtualScroll'
 
 // 获取组件的 props 和 emit 函数
-const props = defineProps(textProps)
-const { modelValue, data, defaultExpandedKeys, expandAll, showCheckbox, checkStrictly, selectionLeafOnly } = toRefs(props)
+const props = defineProps(treeProps)
+const {
+  modelValue,
+  data,
+  defaultExpandedKeys,
+  expandAll,
+  showCheckbox,
+  checkStrictly,
+  selectionLeafOnly,
+  height,
+  itemHeight,
+  nodeKey,
+  backToTopThreshold
+} = toRefs(props)
 const emit = defineEmits<{
   (e: 'node-click', node: TreeNode): void
   (e: 'update:modelValue', value: string[] | string | undefined): void
@@ -58,11 +86,8 @@ const hiddenNodeKeySet = ref<Set<string>>(new Set())
 const checkedKeys = ref<Set<string>>(new Set())
 const immediateKeySet = ref<Set<string>>(new Set())
 const currentNode = ref<TreeNode>()
-provide('treeProps', props)
-provide('currentNode', currentNode)
-
-const tree = ref<Tree>()
 
+const tree = ref<Tree>() as Ref<Tree>
 const flattenTree = computed<TreeNode[]>(() => {
   const expandedKeys = expandedKeySet.value
   const hiddenKeys = hiddenNodeKeySet.value
@@ -93,6 +118,32 @@ const flattenTree = computed<TreeNode[]>(() => {
   traverse()
   return flattenNodes
 })
+
+// 虚拟滚动逻辑
+const {
+  scrollTop,
+  showBackTopBtn,
+  virtualData,
+  startIndex,
+  virtualOffsetY,
+  totalHeight,
+  displayData,
+  updateVisibleData,
+  scrollToTop: virtualScrollToTop,
+  scrollToBottom: virtualScrollToBottom,
+  scrollToPosition: virtualScrollToPosition,
+  scrollToElement: virtualScrollToElement,
+  scrollToElementById: virtualScrollToElementById,
+  onScroll: handleVirtualScroll
+} = useVirtualScroll({
+  data: flattenTree,
+  virtual: ref(true),
+  height: height,
+  itemHeight: itemHeight,
+  idKey: ref('key'),
+  backToTopThreshold: backToTopThreshold
+})
+
 const createTree = (data: RawTreeNode[]) => {
   const treeNodeMap = new Map<string, TreeNode>()
   const levelTreeNodeMap = new Map<number, TreeNode[]>()
@@ -197,6 +248,11 @@ const handleClick = (node: TreeNode) => {
     updateValue()
   }
 }
+
+// 滚动事件处理
+const handleScroll = (event: any) => {
+  handleVirtualScroll(event.detail.scrollTop)
+}
 const updateParentNode = (node: TreeNode) => {
   if (!node.parent) return
   updateNode(node.parent)
@@ -257,6 +313,30 @@ const updateValue = () => {
     emit('update:modelValue', currentNode.value?.key)
   }
 }
+const getNodeStyle = (item: TreeNode) => {
+  return {
+    height: itemHeight.value,
+    paddingLeft: `${(item.level - 1) * (props.indent || 16)}px`
+  }
+}
+const getNodeClass = (item: TreeNode) => {
+  const currentValue = currentNode?.value
+  return {
+    expanded: item.expanded,
+    checked: item.checked,
+    'is-leaf': item.isLeaf,
+    immediate: item.immediate,
+    'is-current': currentValue === item,
+    'is-disabled': item.disabled
+  }
+}
+const handleNodeClick = (item: TreeNode) => {
+  toggleChecked(item, !item.checked, true)
+  handleClick(item)
+}
+const handleClickExpand = (item: TreeNode) => {
+  toggleExpand(item, !item.expanded)
+}
 watch(
   () => data.value,
   () => {
@@ -277,10 +357,47 @@ watch(
     initValue()
   }
 )
-defineExpose({
+const getNodeById = (id: string | number) => {
+  return tree.value?.treeNodeMap.get(id as string)
+}
+const scrollToTop = () => {
+  virtualScrollToTop()
+}
+const scrollToBottom = () => {
+  const visibleCount = flattenTree.value.length
+  const containerHeight = parseFloat(height.value || '0')
+  const targetScrollTop = Math.max(visibleCount * parseFloat(itemHeight.value) - containerHeight, 0)
+  virtualScrollToPosition(targetScrollTop)
+}
+const scrollToPosition = (position: number | string) => {
+  virtualScrollToPosition(position)
+}
+const scrollToElement = (node: any) => {
+  expandNode(node)
+  nextTick(() => {
+    virtualScrollToElement(node)
+  })
+}
+const scrollToElementById = (id: string | number) => {
+  const targetNode = tree.value?.treeNodeMap.get(id as string)
+  if (targetNode) {
+    expandNode(targetNode)
+    nextTick(() => {
+      virtualScrollToElementById(id)
+    })
+  }
+}
+defineExpose<TreeExpose>({
   toggleExpand,
   toggleChecked,
-  tree
+  getNodeById,
+  useTree: () => tree.value,
+  getTree: () => tree,
+  scrollToTop,
+  scrollToBottom,
+  scrollToPosition,
+  scrollToElement,
+  scrollToElementById
 })
 </script>
 

package/components/oxy-tree/types.ts

@@ -1,6 +1,13 @@
-import type { ExtractPropTypes } from 'vue'
+import type { ComponentPublicInstance, ExtractPropTypes, Ref } from 'vue'
 import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
 
+// 树结构类型定义
+export type Tree = {
+  treeNodeMap: Map<string, TreeNode>
+  levelTreeNodeMap: Map<number, TreeNode[]>
+  maxLevel: number
+  treeNodes: TreeNode[]
+}
 // 原始树节点类型
 export type RawTreeNode = {
   disabled?: boolean
@@ -25,13 +32,13 @@ export type TreeNode = {
   isCurrent?: boolean
 }
 
-export const textProps = {
+export const treeProps = {
   ...baseProps,
   data: makeArrayProp<RawTreeNode>(),
   showCheckbox: makeBooleanProp(false),
   childrenKey: makeStringProp('children'),
   labelKey: makeStringProp('name'),
-  valueKey: makeStringProp('id'),
+  nodeKey: makeStringProp('id'),
   defaultExpandedKeys: makeArrayProp<string>(),
   expandAll: makeBooleanProp(false),
   checkStrictly: makeBooleanProp(false),
@@ -40,9 +47,39 @@ export const textProps = {
     default: ''
   },
   emptyText: makeStringProp('暂无数据'),
-  maxHeight: makeStringProp('300px'),
+  height: makeStringProp('300px'),
+  /**
+   * 是否显示回到顶部按钮
+   * 类型：boolean
+   * 默认值：false
+   */
+  showBackToTop: makeBooleanProp(false),
+  /**
+   * 滚动多远显示backToTop
+   * 类型：number
+   * 默认值：'300px'
+   */
+  backToTopThreshold: makeStringProp('300px'),
+  /**
+   * 单个项目高度
+   * 类型：number
+   * 默认值：'44px'
+   */
+  itemHeight: makeStringProp('44px'),
   indent: makeNumberProp(16),
   selectionLeafOnly: makeBooleanProp(false)
 }
-
-export type TextProps = ExtractPropTypes<typeof textProps>
+export type TreeExpose = {
+  toggleExpand: (node: TreeNode, flag: boolean) => void
+  toggleChecked: (node: TreeNode, flag: boolean, isClick: boolean) => void
+  getNodeById: (id: string | number) => TreeNode | undefined
+  useTree: () => Tree
+  getTree: () => Ref<Tree>
+  scrollToTop: () => void
+  scrollToBottom: () => void
+  scrollToPosition: (position: number | string) => void
+  scrollToElement: (item: any) => void
+  scrollToElementById: (id: string | number) => void
+}
+export type TreeProps = ExtractPropTypes<typeof treeProps>
+export type TreeInstance = ComponentPublicInstance<TreeProps, TreeExpose>

package/components/oxy-tree/utils.ts

@@ -0,0 +1,51 @@
+import type { RawTreeNode, TreeProps } from './types'
+
+export const useTreeMethods = (props: TreeProps) => {
+  function getDisabled(node: RawTreeNode): boolean {
+    return node.disabled ?? false
+  }
+
+  function getChildren(node: RawTreeNode): RawTreeNode[] {
+    return node[props.childrenKey] ?? []
+  }
+
+  function getLabel(node: RawTreeNode): string {
+    return node[props.labelKey] ?? ''
+  }
+
+  function getKey(node: RawTreeNode | undefined): string {
+    if (!node) {
+      return ''
+    }
+    return (node[props.nodeKey] ?? '') as string
+  }
+
+  return {
+    getDisabled,
+    getChildren,
+    getLabel,
+    getKey
+  }
+}
+/**
+ * 判断两个 Set 中的元素是否完全相同（不考虑顺序）
+ * @param {Set} setA - 第一个 Set
+ * @param {Set} setB - 第二个 Set
+ * @returns {boolean} 两个 Set 是否相同
+ */
+export function isSetsEqual(setA: Set<any>, setB: Set<any>) {
+  // 步骤1：如果大小不同，直接返回 false
+  if (setA.size !== setB.size) {
+    return false
+  }
+
+  // 步骤2：遍历 setA 的所有元素，检查 setB 是否都包含
+  for (const item of setA) {
+    if (!setB.has(item)) {
+      return false // 有元素不匹配，返回 false
+    }
+  }
+
+  // 所有元素匹配，返回 true
+  return true
+}

package/components/oxy-virtual-scroll/index.scss

@@ -3,10 +3,10 @@
 @include b(virtual-scroll) {
   position: relative;
   width: 100%;
+  height: 100%;
 
   @include e(view) {
     width: 100%;
-    height: 100%;
   }
   @include e(container) {
     position: relative;

package/components/oxy-virtual-scroll/oxy-virtual-scroll.vue

@@ -1,26 +1,44 @@
 <template>
-  <view :class="['oxy-virtual-scroll', customClass]" :style="{ height: height }">
+  <view :class="['oxy-virtual-scroll', customClass]" :style="customStyle">
     <!-- 滚动内容区域 -->
     <scroll-view
-      ref="scrollView"
+      v-if="data.length"
+      :style="{ height: height }"
       class="oxy-virtual-scroll__view"
-      :scroll-y="true"
+      :scroll-y="scrollY"
       :scroll-x="scrollX"
+      :upper-threshold="upperThreshold"
+      :lower-threshold="lowerThreshold"
       :scroll-top="scrollTop"
-      :scroll-into-view="itemId"
-      v-bind="$attrs"
+      :scroll-left="scrollLeft"
+      :scroll-with-animation="scrollWithAnimation"
+      :enable-back-to-top="enableBackToTop"
+      :show-scrollbar="showScrollbar"
+      :refresher-enabled="refresherEnabled"
+      :refresher-threshold="refresherThreshold"
+      :refresher-default-style="refresherDefaultStyle"
+      :refresher-background="refresherBackground"
+      :refresher-triggered="triggered"
+      :enable-flex="enableFlex"
+      :scroll-anchoring="scrollAnchoring"
       @scroll="onScroll"
       @scrolltoupper="onScrollUpper"
       @scrolltolower="onScrollLower"
     >
       <view class="oxy-virtual-scroll__container" :style="{ height: totalHeight + 'px' }">
         <view class="oxy-virtual-scroll__items" :style="{ transform: `translateY(${virtualOffsetY}px)` }">
-          <slot name="item" v-for="(item, index) in virtualData" :item="item" :index="startIndex + index"></slot>
+          <view v-for="(item, index) in virtualData" :key="index">
+            <slot name="item" :item="item" :index="startIndex + index"></slot>
+          </view>
           <slot name="bottom"></slot>
         </view>
       </view>
     </scroll-view>
 
+    <view v-else>
+      <oxy-status-tip image="content" :tip="emptyText" />
+    </view>
+
     <!-- 回到顶部按钮 -->
     <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
       <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
@@ -40,91 +58,47 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch, nextTick } from 'vue'
+import { toRefs } from 'vue'
 import type { ScrollViewOnScrollEvent, ScrollViewOnScrolltolowerEvent, ScrollViewOnScrolltoupperEvent } from '@uni-helper/uni-app-types'
-import { VirtualScrollEngine } from './virtual-scroll'
-import { virtualScrollProps } from './types'
-defineOptions({
-  inheritAttrs: false
-})
+import { virtualScrollProps, type VirtualScrollExpose } from './types'
+import { useVirtualScroll } from '../composables/useVirtualScroll'
+
 const props = defineProps(virtualScrollProps)
 const emit = defineEmits(['scroll', 'scroll-to-upper', 'scroll-to-lower'])
 
-const scrollView = ref(null)
-const itemId = ref<string>('')
-const scrollTop = ref<number>(0)
-const showBackTopBtn = ref<boolean>(false)
-const virtualData = ref<any[]>([])
-const startIndex = ref<number>(0)
-const virtualOffsetY = ref<number>(0)
-const virtualEngine = ref<any>(null)
-
-// 显示的数据（索引处理后的）
-const displayData = computed<any[]>(() => {
-  return props.data
-})
-
-// 虚拟列表总高度
-const totalHeight = computed(() => {
-  return displayData.value.length * parseFloat(props.itemHeight) // 假设每项高度50px
-})
-
-watch(
-  () => props.data,
-  () => {
-    nextTick(initScrollData)
-  },
-  {
-    immediate: true,
-    deep: true
-  }
-)
-
-onMounted(() => {
-  initScrollEngine()
+// 解构props用于组合式函数
+const { data, virtual, height, itemHeight, idKey, showBackToTop, backToTopThreshold } = toRefs(props)
+
+// 使用虚拟滚动组合式函数
+const {
+  scrollTop,
+  showBackTopBtn,
+  virtualData,
+  startIndex,
+  virtualOffsetY,
+  totalHeight,
+  displayData,
+  initScrollData,
+  initScrollEngine,
+  updateVisibleData,
+  scrollToTop: virtualScrollToTop,
+  scrollToBottom: virtualScrollToBottom,
+  scrollToPosition: virtualScrollToPosition,
+  scrollToElement: virtualScrollToElement,
+  scrollToElementById: virtualScrollToElementById,
+  onScroll: handleVirtualScroll
+} = useVirtualScroll({
+  data,
+  virtual,
+  height,
+  itemHeight,
+  idKey,
+  backToTopThreshold
 })
 
-// 初始化滚动数据
-function initScrollData() {
-  if (!props.virtual) {
-    // 非虚拟滚动模式：直接使用全部数据
-    virtualData.value = displayData.value
-    virtualOffsetY.value = 0
-    return
-  }
-  virtualEngine.value = new VirtualScrollEngine({
-    containerHeight: parseFloat(props.height),
-    itemHeight: parseFloat(props.itemHeight),
-    data: displayData.value
-  })
-  updateVisibleData()
-}
-
-// 初始化滚动引擎
-function initScrollEngine() {
-  if (!props.virtual) return
-  virtualEngine.value = new VirtualScrollEngine({
-    containerHeight: parseFloat(props.height),
-    itemHeight: parseFloat(props.itemHeight),
-    data: displayData.value
-  })
-}
-
-// 更新可见数据
-function updateVisibleData() {
-  if (!props.virtual) return // 非虚拟模式不处理
-  if (virtualEngine.value && scrollView.value) {
-    const { visibleData, offsetY } = virtualEngine.value.updateVisibleData(scrollTop.value || 0)
-    virtualData.value = visibleData
-    virtualOffsetY.value = offsetY
-  }
-}
-
 // 滚动事件
 function onScroll(event: ScrollViewOnScrollEvent) {
-  scrollTop.value = event.detail.scrollTop
-  showBackTopBtn.value = scrollTop.value > parseFloat(props.backToTopThreshold)
-  updateVisibleData()
+  handleVirtualScroll(event.detail.scrollTop)
   emit('scroll', event)
 }
 
@@ -138,39 +112,24 @@ function onScrollLower(event: ScrollViewOnScrolltolowerEvent) {
   emit('scroll-to-lower', event)
 }
 
-// 回到顶部
-function scrollToTop() {
-  scrollTop.value = 0
-  nextTick(() => {
-    scrollTop.value = 0
-  })
+// 滚动方法
+const scrollToTop = () => {
+  virtualScrollToTop()
 }
-function scrollToBottom() {
-  scrollToPosition(totalHeight.value)
+const scrollToBottom = () => {
+  virtualScrollToBottom()
 }
-
-// 滚动到指定位置
-function scrollToPosition(position: number | string) {
-  scrollTop.value = typeof position === 'number' ? position : parseFloat(position)
+const scrollToPosition = (position: number | string) => {
+  virtualScrollToPosition(position)
 }
-
-// 滚动到指定元素
-function scrollToElement(item: any) {
-  const index = props.data.findIndex((o) => item[props.idKey] && o[props.idKey] && o[props.idKey] === item[props.idKey])
-  if (index > 0) {
-    const scrollDistance = parseFloat(props.itemHeight) * index
-    scrollToPosition(scrollDistance)
-  }
+const scrollToElement = (item: any) => {
+  virtualScrollToElement(item)
 }
-function scrollToElementById(id: string | number) {
-  const index = props.data.findIndex((o) => id && o[props.idKey] && o[props.idKey] === id)
-  if (index > 0) {
-    const scrollDistance = parseFloat(props.itemHeight) * index
-    scrollToPosition(scrollDistance)
-  }
+const scrollToElementById = (id: string | number) => {
+  virtualScrollToElementById(id)
 }
 
-defineExpose({
+defineExpose<VirtualScrollExpose>({
   scrollToTop,
   scrollToBottom,
   scrollToPosition,