oxy-uni-ui 1.1.0 → 1.2.3

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

@@ -1,17 +1,56 @@
 <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>
+    <slot name="search-button" v-if="showFilter">
+      <view class="oxy-tree__search">
+        <oxy-input
+          type="text"
+          no-border
+          class="oxy-tree__search-input"
+          prefix-icon="search"
+          :placeholder="filterPlaceholder"
+          v-model="searchValue"
+          @confirm="handleFilter"
+        />
+        <oxy-button :round="false" @click="handleFilter">筛选</oxy-button>
+      </view>
+    </slot>
+
+    <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 +66,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
@@ -54,15 +97,13 @@ const emit = defineEmits<{
 
 const { getDisabled, getChildren, getLabel, getKey } = useTreeMethods(props)
 const expandedKeySet = ref<Set<string>>(new Set())
+const bakExpandedKeySet = ref<Set<string> | null>(null)
 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 searchValue = ref('')
+const tree = ref<Tree>() as Ref<Tree>
 const flattenTree = computed<TreeNode[]>(() => {
   const expandedKeys = expandedKeySet.value
   const hiddenKeys = hiddenNodeKeySet.value
@@ -93,6 +134,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[]>()
@@ -118,7 +185,6 @@ const createTree = (data: RawTreeNode[]) => {
         node.checked = checkedKeys.value.has(value)
       }
       if (expandAll.value) {
-        node.expanded = true
         expandedKeySet.value.add(value)
       }
       const children = getChildren(rawNode)
@@ -151,9 +217,8 @@ const createTree = (data: RawTreeNode[]) => {
 }
 
 const toggleExpand = (node: TreeNode, flag: boolean) => {
-  node.expanded = flag
   const key = node.key
-  if (node.expanded) {
+  if (flag) {
     expandedKeySet.value.add(key)
     emit('node-expand', node)
   } else {
@@ -197,6 +262,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)
@@ -223,7 +293,6 @@ const updateNode = (node: TreeNode | undefined) => {
 const expandNode = (node: TreeNode | undefined) => {
   if (!node) return
   !node.isLeaf && expandedKeySet.value.add(node.key)
-  node.expanded = true
   if (node.parent) {
     expandNode(node.parent)
   }
@@ -231,6 +300,12 @@ const expandNode = (node: TreeNode | undefined) => {
 const initValue = () => {
   if (showCheckbox.value) {
     if (isSetsEqual(checkedKeys.value, new Set(modelValue.value as string[]))) return
+    Array.from(checkedKeys.value).map((value) => {
+      const node = tree.value?.treeNodeMap.get(value as string)
+      if (node) {
+        toggleChecked(node, false)
+      }
+    })
     checkedKeys.value = new Set(modelValue.value as string[])
 
     Array.isArray(modelValue.value) &&
@@ -257,6 +332,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: expandedKeySet.value.has(item.key),
+    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, !expandedKeySet.value.has(item.key))
+}
 watch(
   () => data.value,
   () => {
@@ -277,10 +376,109 @@ 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)
+    })
+  }
+}
+const getCheckedNodes = (): (TreeNode | any)[] => {
+  const checkNodes = Array.from(checkedKeys.value).map((key) => {
+    return tree.value?.treeNodeMap.get(key as string) || { [props.nodeKey]: key }
+  })
+  return checkNodes
+}
+
+const filter = (query: string) => {
+  if (bakExpandedKeySet.value === null) {
+    bakExpandedKeySet.value = new Set(expandedKeySet.value)
+  }
+  const keys = doFilter(query)
+  if (query && keys) {
+    expandedKeySet.value = keys
+  } else if (!query) {
+    bakExpandedKeySet.value && (expandedKeySet.value = new Set(bakExpandedKeySet.value))
+    bakExpandedKeySet.value = null
+  }
+}
+
+const doFilter = (query: string) => {
+  if (typeof props.filterMethod !== 'function') {
+    return
+  }
+  const expandKeySet = new Set<string>()
+  const hiddenKeys = hiddenNodeKeySet.value
+  const family: TreeNode[] = []
+  const nodes = tree.value.treeNodes || []
+  const filter = props.filterMethod
+  hiddenKeys.clear()
+  function traverse(nodes: TreeNode[]) {
+    nodes.forEach((node: TreeNode) => {
+      family.push(node)
+      if (filter(query, node.data)) {
+        family.forEach((member) => {
+          expandKeySet.add(member.key)
+        })
+      } else if (node.isLeaf) {
+        hiddenKeys.add(node.key)
+      }
+      const children = node.children
+      if (children) {
+        traverse(children)
+      }
+      if (!node.isLeaf) {
+        if (!expandKeySet.has(node.key)) {
+          hiddenKeys.add(node.key)
+        }
+      }
+      family.pop()
+    })
+  }
+  traverse(nodes)
+  return expandKeySet
+}
+const handleFilter = () => {
+  filter(searchValue.value)
+}
+
+defineExpose<TreeExpose>({
   toggleExpand,
   toggleChecked,
-  tree
+  getNodeById,
+  getCheckedNodes,
+  getCurrentNode: () => currentNode.value,
+  useTree: () => tree.value,
+  getTree: () => tree,
+  scrollToTop,
+  scrollToBottom,
+  scrollToPosition,
+  scrollToElement,
+  scrollToElementById,
+  filter
 })
 </script>
 

package/components/oxy-tree/types.ts

@@ -1,6 +1,14 @@
-import type { ExtractPropTypes } from 'vue'
+import type { ComponentPublicInstance, ExtractPropTypes, Ref } from 'vue'
 import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+import { type PropType } from 'vue'
 
+// 树结构类型定义
+export type Tree = {
+  treeNodeMap: Map<string, TreeNode>
+  levelTreeNodeMap: Map<number, TreeNode[]>
+  maxLevel: number
+  treeNodes: TreeNode[]
+}
 // 原始树节点类型
 export type RawTreeNode = {
   disabled?: boolean
@@ -25,13 +33,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 +48,48 @@ 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)
+  selectionLeafOnly: makeBooleanProp(false),
+  filterMethod: {
+    type: Function as PropType<(keyword: string, node: RawTreeNode) => boolean>,
+    default: null
+  },
+  showFilter: makeBooleanProp(false),
+  filterPlaceholder: makeStringProp('请输入节点名称')
 }
-
-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
+  getCheckedNodes: () => TreeNode[] | any
+  getCurrentNode: () => 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
+  filter: (keyword: string) => 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;