oxy-uni-ui 1.0.1 → 1.2.0

package/components/oxy-tree/index.scss

@@ -0,0 +1,83 @@
+@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 {
+  display: flex;
+  width: fit-content;
+  width: 100%;
+  white-space: nowrap;
+  align-items: center;
+
+  &.expanded {
+    :deep(.oxy-tree-node-icon) {
+      transform: rotate(0deg);
+    }
+  }
+
+  &.is-leaf {
+    :deep(.oxy-tree-node-icon) {
+      opacity: 0;
+    }
+  }
+
+  &.is-current {
+    background-color: $-tree-node-current-bg;
+    color: $-tree-node-current-color;
+  }
+
+  &.is-disabled {
+    color: $-tree-node-disabled-color;
+  }
+
+  :deep(.oxy-checkbox) {
+    margin-right: 6px;
+
+    .oxy-checkbox__label {
+      display: none;
+    }
+
+    .oxy-checkbox__shape {
+      transition: none;
+    }
+
+    .oxy-checkbox__indeterminate {
+      transition: none;
+    }
+
+    .oxy-checkbox__check {
+      transition: none;
+    }
+  }
+
+  :deep(.oxy-tree-node-icon) {
+    transform: rotate(-90deg);
+  }
+
+  .oxy-tree-node {
+    flex: 1;
+  }
+}

package/components/oxy-tree/index.ts

@@ -0,0 +1,51 @@
+import type { TextProps, RawTreeNode } from './types'
+
+export const useTreeMethods = (props: TextProps) => {
+  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.valueKey] ?? '') 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-tree/oxy-tree.vue

@@ -0,0 +1,406 @@
+<template>
+  <view class="oxy-tree" :class="customClass" :style="customStyle">
+    <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>
+
+<script lang="ts">
+export default {
+  name: 'oxy-tree',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+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(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
+  (e: 'node-check', node: TreeNode): void
+  (e: 'node-expand', node: TreeNode): void
+  (e: 'node-collapse', node: TreeNode): void
+}>()
+
+const { getDisabled, getChildren, getLabel, getKey } = useTreeMethods(props)
+const expandedKeySet = ref<Set<string>>(new Set())
+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>()
+
+const tree = ref<Tree>() as Ref<Tree>
+const flattenTree = computed<TreeNode[]>(() => {
+  const expandedKeys = expandedKeySet.value
+  const hiddenKeys = hiddenNodeKeySet.value
+  const flattenNodes: TreeNode[] = []
+  const nodes = (tree.value && tree.value.treeNodes) || []
+  function traverse() {
+    const stack: TreeNode[] = []
+    for (let i = nodes.length - 1; i >= 0; --i) {
+      stack.push(nodes[i])
+    }
+    while (stack.length) {
+      const node = stack.pop()
+      if (!node) continue
+      if (!hiddenKeys.has(node.key)) {
+        flattenNodes.push(node)
+      }
+      if (expandedKeys.has(node.key)) {
+        const children = node.children
+        if (children) {
+          const length = children.length
+          for (let i = length - 1; i >= 0; --i) {
+            stack.push(children[i])
+          }
+        }
+      }
+    }
+  }
+  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[]>()
+
+  let maxLevel = 1
+
+  function traverse(nodes: RawTreeNode[], level = 1, parent?: TreeNode): TreeNode[] {
+    const siblings: TreeNode[] = []
+    nodes.forEach((rawNode, index) => {
+      const value = getKey(rawNode)
+      const node: TreeNode = {
+        level,
+        key: value,
+        data: rawNode,
+        index,
+        isLast: index === nodes.length - 1,
+        expanded: expandedKeySet.value.has(value),
+        label: getLabel(rawNode),
+        parent: parent,
+        isLeaf: false
+      }
+      if (showCheckbox.value) {
+        node.checked = checkedKeys.value.has(value)
+      }
+      if (expandAll.value) {
+        node.expanded = true
+        expandedKeySet.value.add(value)
+      }
+      const children = getChildren(rawNode)
+      node.disabled = getDisabled(rawNode)
+      node.isLeaf = !children || children.length === 0
+      if (children && children.length) {
+        node.children = traverse(children, level + 1, node)
+      }
+      siblings.push(node)
+      treeNodeMap.set(value, node)
+      if (!levelTreeNodeMap.has(level)) {
+        levelTreeNodeMap.set(level, [])
+      }
+      levelTreeNodeMap.get(level)!.push(node)
+    })
+
+    if (level > maxLevel) {
+      maxLevel = level
+    }
+    return siblings
+  }
+  const treeNodes = traverse(data)
+
+  return {
+    treeNodeMap,
+    levelTreeNodeMap,
+    maxLevel,
+    treeNodes
+  }
+}
+
+const toggleExpand = (node: TreeNode, flag: boolean) => {
+  node.expanded = flag
+  const key = node.key
+  if (node.expanded) {
+    expandedKeySet.value.add(key)
+    emit('node-expand', node)
+  } else {
+    expandedKeySet.value.delete(key)
+    emit('node-collapse', node)
+  }
+}
+const toggleChecked = (node: TreeNode, flag: boolean, isClick: boolean = false) => {
+  if (!showCheckbox.value || !node || node.disabled) {
+    return
+  }
+
+  function toggle(currentNode: TreeNode) {
+    const key = currentNode.key
+    currentNode.checked = flag
+    currentNode.immediate = false
+
+    if (currentNode.checked && (!selectionLeafOnly.value || currentNode.isLeaf)) {
+      checkedKeys.value.add(key)
+    } else {
+      checkedKeys.value.delete(key)
+    }
+    if (!checkStrictly.value && currentNode.children) {
+      currentNode.children.forEach((child) => {
+        toggle(child)
+      })
+    }
+  }
+  toggle(node)
+  !checkStrictly.value && updateParentNode(node)
+  updateValue()
+  isClick && emit('node-check', node)
+}
+const handleClick = (node: TreeNode) => {
+  emit('node-click', node)
+
+  if (node.disabled) return
+  currentNode.value = node
+
+  if (!showCheckbox.value) {
+    updateValue()
+  }
+}
+
+// 滚动事件处理
+const handleScroll = (event: any) => {
+  handleVirtualScroll(event.detail.scrollTop)
+}
+const updateParentNode = (node: TreeNode) => {
+  if (!node.parent) return
+  updateNode(node.parent)
+  updateParentNode(node.parent)
+}
+const updateNode = (node: TreeNode | undefined) => {
+  if (!node) return
+  if (node.children?.every((item) => item.checked)) {
+    node.checked = true
+    node.immediate = false
+    !node.disabled && (!selectionLeafOnly.value || node.isLeaf) && checkedKeys.value.add(node.key)
+  } else if (node.children?.every((item) => !item.checked && !item.immediate)) {
+    node.checked = false
+    node.immediate = false
+    checkedKeys.value.delete(node.key)
+  } else {
+    node.checked = false
+    node.immediate = true
+    checkedKeys.value.delete(node.key)
+    !node.disabled && immediateKeySet.value.add(node.key)
+  }
+}
+
+const expandNode = (node: TreeNode | undefined) => {
+  if (!node) return
+  !node.isLeaf && expandedKeySet.value.add(node.key)
+  node.expanded = true
+  if (node.parent) {
+    expandNode(node.parent)
+  }
+}
+const initValue = () => {
+  if (showCheckbox.value) {
+    if (isSetsEqual(checkedKeys.value, new Set(modelValue.value as string[]))) return
+    checkedKeys.value = new Set(modelValue.value as string[])
+
+    Array.isArray(modelValue.value) &&
+      modelValue.value.map((value) => {
+        const node = tree.value?.treeNodeMap.get(value as string)
+        if (node) {
+          toggleChecked(node, true)
+        }
+      })
+  } else {
+    currentNode.value = tree.value?.treeNodeMap.get(modelValue.value as string)
+    expandNode(currentNode.value?.parent)
+  }
+}
+const initDefaultExpandedKeys = () => {
+  defaultExpandedKeys.value.map((key) => {
+    expandNode(tree.value?.treeNodeMap.get(key as string))
+  })
+}
+const updateValue = () => {
+  if (showCheckbox.value) {
+    emit('update:modelValue', Array.from(checkedKeys.value))
+  } else {
+    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,
+  () => {
+    tree.value = createTree(data.value)
+    nextTick(() => {
+      checkedKeys.value = new Set()
+      initValue()
+      initDefaultExpandedKeys()
+    })
+  },
+  {
+    immediate: true
+  }
+)
+watch(
+  () => modelValue.value,
+  () => {
+    initValue()
+  }
+)
+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,
+  getNodeById,
+  useTree: () => tree.value,
+  getTree: () => tree,
+  scrollToTop,
+  scrollToBottom,
+  scrollToPosition,
+  scrollToElement,
+  scrollToElementById
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-tree/types.ts

@@ -0,0 +1,85 @@
+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
+  [key: string]: any
+}
+
+// 处理后的树节点类型
+export type TreeNode = {
+  level: number
+  key: string
+  data: RawTreeNode
+  index: number
+  isLast: boolean
+  expanded: boolean
+  label: string
+  parent?: TreeNode
+  children?: TreeNode[]
+  disabled?: boolean
+  isLeaf: boolean
+  checked?: boolean
+  immediate?: boolean
+  isCurrent?: boolean
+}
+
+export const treeProps = {
+  ...baseProps,
+  data: makeArrayProp<RawTreeNode>(),
+  showCheckbox: makeBooleanProp(false),
+  childrenKey: makeStringProp('children'),
+  labelKey: makeStringProp('name'),
+  nodeKey: makeStringProp('id'),
+  defaultExpandedKeys: makeArrayProp<string>(),
+  expandAll: makeBooleanProp(false),
+  checkStrictly: makeBooleanProp(false),
+  modelValue: {
+    type: [Array<string>, String],
+    default: ''
+  },
+  emptyText: makeStringProp('暂无数据'),
+  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 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
+}