oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-tooltip/index.scss

@@ -22,15 +22,15 @@
 
   @include edeep(pos) {
     position: absolute;
-    min-width: 138px;
-    min-height: 36px;
+    min-width: 276rpx;
+    min-height: 72rpx;
     font-size: $-tooltip-fs;
     backdrop-filter: blur($-tooltip-blur);
     background-clip: padding-box;
     border-radius: $-tooltip-radius;
     background: $-tooltip-bg;
     color: $-tooltip-color;
-    text-align: center;
+    // text-align: center;
     box-sizing: border-box;
     z-index: $-tooltip-z-index;
   }
@@ -49,18 +49,18 @@
 
   @include e(inner) {
     padding: $-tooltip-padding;
-    white-space: nowrap;
+    // white-space: nowrap;
     line-height: $-tooltip-line-height;
   }
 
   @include edeep(close-icon) {
-    font-size: 12px;
+    font-size: 24rpx;
     position: absolute;
-    right: -8px;
-    top: -10px;
+    right: -16rpx;
+    top: -20rpx;
     transform: scale(0.5);
-    padding: 10px;
+    padding: 20rpx;
   }
 
   @include triangleArrow($-tooltip-arrow-size, $-tooltip-bg);
-}
+}

package/components/oxy-tree/index.scss

@@ -23,22 +23,43 @@
     left: 0;
     right: 0;
   }
+  .oxy-tree__search{
+    display: flex;
+    :deep(.oxy-button){
+      min-width: 120rpx;
+    }
+    :deep(.oxy-tree__search-input) {
+      flex: 1;
+      background-color: $-tree-search-input-color;
+      padding: 12rpx 24rpx;
+      border-radius: 8rpx;
+      margin-bottom: 16rpx;
+      margin-right: 24rpx;
+      .oxy-input__icon{
+        background: transparent;
+      }
+    }
+  }
+
+
 }
 
 .oxy-tree-node-content {
   display: flex;
-  width: fit-content;
   width: 100%;
-  white-space: nowrap;
   align-items: center;
+  box-sizing: border-box;
+  padding-right: $-tree-node-padding-right;
+  border-radius: $-tree-node-radius;
+  color: $-color-secondary;
+  font-size: $-tree-node-font-size;
+  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
 
-  &.expanded {
-    :deep(.oxy-tree-node-icon) {
-      transform: rotate(0deg);
+  &.is-leaf {
+    .oxy-tree-node-toggle {
+      pointer-events: none;
     }
-  }
 
-  &.is-leaf {
     :deep(.oxy-tree-node-icon) {
       opacity: 0;
     }
@@ -47,14 +68,31 @@
   &.is-current {
     background-color: $-tree-node-current-bg;
     color: $-tree-node-current-color;
+    font-weight: $-fw-medium;
+
+    :deep(.oxy-tree-node-icon) {
+      color: $-tree-node-icon-active-color;
+    }
+  }
+
+  &.checked {
+    :deep(.oxy-tree-node-icon) {
+      color: $-tree-node-icon-active-color;
+    }
   }
 
   &.is-disabled {
     color: $-tree-node-disabled-color;
+    opacity: $-button-disabled-opacity;
+
+    :deep(.oxy-tree-node-icon) {
+      color: $-tree-node-disabled-color;
+    }
   }
 
   :deep(.oxy-checkbox) {
-    margin-right: 6px;
+    margin-right: $-size-side-padding-small;
+    flex-shrink: 0;
 
     .oxy-checkbox__label {
       display: none;
@@ -74,10 +112,24 @@
   }
 
   :deep(.oxy-tree-node-icon) {
-    transform: rotate(-90deg);
+    color: $-tree-node-icon-color;
+    font-size: $-tree-node-icon-size;
+    transition: none;
+  }
+
+  .oxy-tree-node-toggle {
+    width: $-tree-node-icon-box-size;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: $-tree-node-icon-gap;
+    flex-shrink: 0;
   }
 
   .oxy-tree-node {
     flex: 1;
+    min-width: 0;
+    @include lineEllipsis;
   }
 }

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

@@ -1,14 +1,32 @@
 <template>
   <view class="oxy-tree" :class="customClass" :style="customStyle">
+    <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 class="oxy-tree__container" :style="{ height: unitConvert(totalHeight, 0, { output: 'px' }) }">
+          <view class="oxy-tree__items" :style="{ transform: `translateY(${unitConvert(virtualOffsetY, 0, { output: '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 class="oxy-tree-node-toggle" @tap.stop="handleClickExpand(item)">
+                  <oxy-icon
+                    :name="expandedKeySet.has(item.key) ? 'chevron-down-circle' : 'chevron-right-circle'"
+                    custom-class="oxy-tree-node-icon"
+                  ></oxy-icon>
                 </view>
                 <oxy-checkbox
                   v-if="showCheckbox"
@@ -34,7 +52,7 @@
 
     <!-- 回到顶部按钮 -->
     <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
-      <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
+      <oxy-icon name="backtop" color="#fff" size="40rpx"></oxy-icon>
     </view>
   </view>
 </template>
@@ -56,6 +74,7 @@ import type { RawTreeNode, Tree, TreeInstance, TreeNode } from './types'
 import { treeProps, type TreeExpose } from './types'
 import { isSetsEqual, useTreeMethods } from './utils'
 import { useVirtualScroll } from '../composables/useVirtualScroll'
+import { withDefaultUnit, unitConvert, unitConvertWithDefault } from '../common/util'
 
 // 获取组件的 props 和 emit 函数
 const props = defineProps(treeProps)
@@ -82,11 +101,12 @@ 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>()
-
+const searchValue = ref('')
 const tree = ref<Tree>() as Ref<Tree>
 const flattenTree = computed<TreeNode[]>(() => {
   const expandedKeys = expandedKeySet.value
@@ -169,7 +189,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)
@@ -202,9 +221,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 {
@@ -279,7 +297,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)
   }
@@ -287,6 +304,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) &&
@@ -315,14 +338,14 @@ const updateValue = () => {
 }
 const getNodeStyle = (item: TreeNode) => {
   return {
-    height: itemHeight.value,
-    paddingLeft: `${(item.level - 1) * (props.indent || 16)}px`
+    height: withDefaultUnit(itemHeight.value, 'rpx'),
+    paddingLeft: withDefaultUnit((item.level - 1) * (props.indent || 16))
   }
 }
 const getNodeClass = (item: TreeNode) => {
   const currentValue = currentNode?.value
   return {
-    expanded: item.expanded,
+    expanded: expandedKeySet.value.has(item.key),
     checked: item.checked,
     'is-leaf': item.isLeaf,
     immediate: item.immediate,
@@ -335,7 +358,7 @@ const handleNodeClick = (item: TreeNode) => {
   handleClick(item)
 }
 const handleClickExpand = (item: TreeNode) => {
-  toggleExpand(item, !item.expanded)
+  toggleExpand(item, !expandedKeySet.value.has(item.key))
 }
 watch(
   () => data.value,
@@ -365,8 +388,8 @@ const scrollToTop = () => {
 }
 const scrollToBottom = () => {
   const visibleCount = flattenTree.value.length
-  const containerHeight = parseFloat(height.value || '0')
-  const targetScrollTop = Math.max(visibleCount * parseFloat(itemHeight.value) - containerHeight, 0)
+  const containerHeight = unitConvert(height.value)
+  const targetScrollTop = Math.max(visibleCount * unitConvertWithDefault(itemHeight.value, { defaultUnit: 'rpx' }) - containerHeight, 0)
   virtualScrollToPosition(targetScrollTop)
 }
 const scrollToPosition = (position: number | string) => {
@@ -387,17 +410,79 @@ const scrollToElementById = (id: string | number) => {
     })
   }
 }
+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,
   getNodeById,
+  getCheckedNodes,
+  getCurrentNode: () => currentNode.value,
   useTree: () => tree.value,
   getTree: () => tree,
   scrollToTop,
   scrollToBottom,
   scrollToPosition,
   scrollToElement,
-  scrollToElementById
+  scrollToElementById,
+  filter
 })
 </script>
 

package/components/oxy-tree/types.ts

@@ -1,5 +1,6 @@
 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 = {
@@ -47,7 +48,7 @@ export const treeProps = {
     default: ''
   },
   emptyText: makeStringProp('暂无数据'),
-  height: makeStringProp('300px'),
+  height: makeStringProp('600rpx'),
   /**
    * 是否显示回到顶部按钮
    * 类型：boolean
@@ -56,23 +57,34 @@ export const treeProps = {
   showBackToTop: makeBooleanProp(false),
   /**
    * 滚动多远显示backToTop
-   * 类型：number
-   * 默认值：'300px'
+   * 类型：string（支持 `px/rpx`，纯数字字符串按 rpx 处理）
+   * 默认值：'600rpx'
    */
-  backToTopThreshold: makeStringProp('300px'),
+  backToTopThreshold: makeStringProp('600rpx'),
   /**
-   * 单个项目高度
-   * 类型：number
-   * 默认值：'44px'
+   * 列表项的预估高度，需带单位
+   * @description 虚拟列表会根据此值计算占位高度，越准确滚动越平滑。支持如 '44px' 或 '88rpx'，纯数字字符串按 rpx 处理。
+   * 默认值：'88rpx'
    */
-  itemHeight: makeStringProp('44px'),
-  indent: makeNumberProp(16),
-  selectionLeafOnly: makeBooleanProp(false)
+  itemHeight: makeStringProp('88rpx'),
+  /**
+   * 相邻级节点间的水平缩进，number 类型按 `rpx` 语义处理
+   */
+  indent: makeNumberProp(32),
+  selectionLeafOnly: makeBooleanProp(false),
+  filterMethod: {
+    type: Function as PropType<(keyword: string, node: RawTreeNode) => boolean>,
+    default: null
+  },
+  showFilter: makeBooleanProp(false),
+  filterPlaceholder: makeStringProp('请输入节点名称')
 }
 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
@@ -80,6 +92,7 @@ export type TreeExpose = {
   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-upload/index.scss

@@ -39,7 +39,7 @@
     font-size: $-upload-evoke-icon-size;
     background-color: $-upload-evoke-bg;
     color: $-upload-evoke-color;
-    margin-bottom: 12px;
+    margin-bottom: 24rpx;
 
     @include when(disabled) {
       color: $-upload-evoke-disabled-color;
@@ -47,18 +47,18 @@
   }
 
   @include e(evoke-file) {
-    border-radius: 8px;
+    border-radius: 16rpx;
   }
 
   @include e(evoke-num) {
-    font-size: 14px;
-    line-height: 14px;
-    margin-top: 8px;
+    font-size: 28rpx;
+    line-height: 28rpx;
+    margin-top: 16rpx;
   }
 
   @include edeep(evoke-icon) {
-    width: 32px;
-    height: 32px;
+    width: 64rpx;
+    height: 64rpx;
   }
 
   @include e(input) {
@@ -75,7 +75,7 @@
     position: relative;
     width: $-upload-size;
     height: $-upload-size;
-    margin: 0 12px 12px 0;
+    margin: 0 24rpx 24rpx 0;
   }
 
   @include e(preview-list) {
@@ -106,9 +106,9 @@
     font-size: $-upload-file-fs;
     color: $-upload-file-color;
     box-sizing: border-box;
-    padding: 0 4px;
+    padding: 0 8rpx;
     text-align: center;
-    margin-top: 8px;
+    margin-top: 16rpx;
     @include lineEllipsis()
   }
 
@@ -117,7 +117,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    font-size: 24px;
+    font-size: 48rpx;
     color: $-color-white;
 
     &::before {
@@ -159,7 +159,7 @@
   @include e(progress-txt) {
     font-size: $-upload-progress-fs;
     line-height: $-upload-progress-fs;
-    margin-top: 9px;
+    margin-top: 18rpx;
     color: $-color-white;
   }
 
@@ -178,21 +178,21 @@
   }
 
   @include e(preview-file) {
-    margin-bottom: 32px;
+    margin-bottom: 64rpx;
     .oxy-upload__status-content:not(.oxy-upload__mask) {
       border: 1px solid $-color-border;
       box-sizing: border-box;
-      border-radius: 8px;
+      border-radius: 16rpx;
       .oxy-upload__picture {
-        border-radius: 8px;
+        border-radius: 16rpx;
       }
       .oxy-upload__picture-icon {
-        width: 32px;
-        height: 32px;
+        width: 64rpx;
+        height: 64rpx;
       }
     }
     .oxy-upload__mask {
-      border-radius: 8px;
+      border-radius: 16rpx;
     }
     :deep(.oxy-tooltip) {
       width: 100%;
@@ -208,9 +208,9 @@
       font-size: $-upload-file-fs;
       color: $-upload-file-color;
       box-sizing: border-box;
-      padding: 0 4px;
+      padding: 0 8rpx;
       text-align: center;
-      margin-top: 8px;
+      margin-top: 16rpx;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -219,7 +219,7 @@
 
   &.oxy-upload__position-right {
     .oxy-upload__evoke {
-      margin-right: 12px;
+      margin-right: 24rpx;
     }
   }
 }

package/components/oxy-upload/types.ts

@@ -283,9 +283,9 @@ export const uploadProps = {
   /**
    * 加载中图标尺寸
    * 类型：string
-   * 默认值：'24px'
+   * 默认值：'48rpx'
    */
-  loadingSize: makeStringProp('24px'),
+  loadingSize: makeStringProp('48rpx'),
   /**
    * 是否压缩视频，当 accept 为 video 时生效。
    * 类型：boolean

package/components/oxy-verification-code/index.scss

@@ -0,0 +1,6 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+@include b(verification-code) {
+  display: inline-block;
+}