oxy-uni-ui 2.1.0 → 2.1.1

package/components/oxy-tabs/index.scss

@@ -14,7 +14,7 @@
       color: $-dark-color3;
 
       @include when(active) {
-        font-weight: 600;
+        font-weight: $-fw-semibold;
         color: $-dark-color;
       }
 
@@ -103,7 +103,7 @@
     transition: color .3s;
 
     @include when(active) {
-      font-weight: 600;
+      font-weight: $-fw-semibold;
     }
 
     @include when(disabled) {
@@ -269,7 +269,7 @@
     line-height: 1.2;
     background-color: $-tabs-nav-map-button-back-color;
     border-color: transparent;
-    margin-bottom: 24rpx;
+    margin-bottom: $-spacing-24;
     border-radius: $-tabs-nav-map-button-radius;
     color: $-tabs-nav-map-color;
     font-size: $-tabs-nav-map-fs;

package/components/oxy-tag/index.scss

@@ -67,9 +67,9 @@
   color: $-tag-color;
   padding: 12rpx 20rpx;
   min-height: 64rpx;
-  border: 1px solid transparent;
+  border: #{$-border-width-base} solid transparent;
   border-radius: $-tag-radius;
-  transition: opacity .2s, color .2s, border-color .2s, background-color .2s;
+  transition: opacity $-transition-duration-base, color $-transition-duration-base, border-color $-transition-duration-base, background-color $-transition-duration-base;
   vertical-align: middle;
   line-height: 1.4;
   white-space: nowrap;
@@ -166,7 +166,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-left: 16rpx;
+    margin-left: $-spacing-16;
     margin-right: 0;
     font-size: $-tag-close-size;
     width: $-tag-close-size;
@@ -175,7 +175,7 @@
     vertical-align: middle;
     color: $-tag-close-color;
     opacity: 0.7;
-    transition: opacity .2s, color .2s;
+    transition: opacity $-transition-duration-base, color $-transition-duration-base;
 
     &:active {
       opacity: 1;

package/components/oxy-text/index.scss

@@ -6,7 +6,7 @@
 @include b(text) {
 
   @include when(bold) {
-    font-weight: bold;
+    font-weight: $-fw-bold;
   }
 
   @for $i from 1 through 5 {

package/components/oxy-textarea/index.scss

@@ -84,7 +84,7 @@
     height: 1px;
     background: $-textarea-border-color;
     transform: scaleY(0.5);
-    transition: background-color 0.2s ease-in-out;
+    transition: background-color $-transition-duration-base ease-in-out;
   }
 
 
@@ -203,7 +203,7 @@
     font-size: $-textarea-count-fs;
     color: $-textarea-count-color;
     background: $-textarea-bg;
-    line-height: 48rpx;
+    line-height: $-lh-base;
     display: inline-flex;
   }
 
@@ -257,10 +257,6 @@
   }
 
   @include when(auto-height) {
-    &:not(.is-cell) {
-      padding: 16rpx 0;
-    }
-
     &::after {
       display: block;
     }

package/components/oxy-toast/index.scss

@@ -8,7 +8,7 @@
   background-color: $-toast-bg;
   border-radius: $-toast-radius;
   color: $-toast-color;
-  transition: all 0.2s;
+  transition: all $-transition-duration-base;
   font-size: $-toast-fs;
   box-sizing: border-box;
   box-shadow: $-toast-box-shadow;

package/components/oxy-tree/index.scss

@@ -2,49 +2,53 @@
 @import '../common/abstracts/mixin';
 @import '../oxy-virtual-scroll/index.scss';
 
-.oxy-tree {
+@include b(tree) {
   position: relative;
-  &__virtual-scroll {
+
+  @include e(virtual-scroll) {
     position: relative;
     overflow: hidden;
   }
 
-  &__view {
+  @include e(view) {
     height: 100%;
   }
 
-  &__container {
+  @include e(container) {
     position: relative;
   }
 
-  &__items {
+  @include e(items) {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
   }
-  .oxy-tree__search{
+
+  @include e(search) {
     display: flex;
-    :deep(.oxy-button){
+
+    :deep(.oxy-button) {
       min-width: 120rpx;
     }
+
     :deep(.oxy-tree__search-input) {
       flex: 1;
       background-color: $-tree-search-input-color;
       padding: 16rpx 24rpx;
       border-radius: $-tree-search-input-radius;
       margin-bottom: 20rpx;
-      margin-right: 24rpx;
-      .oxy-input__icon{
+      margin-right: $-spacing-24;
+
+      .oxy-input__icon {
         background: transparent;
       }
     }
   }
-
-
 }
 
 .oxy-tree-node-content {
+  position: relative;
   display: flex;
   width: 100%;
   align-items: center;
@@ -132,4 +136,20 @@
     min-width: 0;
     @include lineEllipsis;
   }
+
+  .oxy-tree-line-vertical {
+    position: absolute;
+    width: 1px;
+    border-left: 1px dashed $-tree-node-icon-color;
+    pointer-events: none;
+    z-index: 0;
+  }
+  .oxy-tree-line-horizontal {
+    position: absolute;
+    top: 50%;
+    height: 1px;
+    border-top: 1px dashed $-tree-node-icon-color;
+    pointer-events: none;
+    z-index: 0;
+  }
 }

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

@@ -21,6 +21,22 @@
           <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)">
+                <!-- 结构线 -->
+                <block v-if="showLine">
+                  <view
+                    v-for="l in item.level - 1"
+                    :key="'line-' + l"
+                    class="oxy-tree-line-vertical"
+                    :style="getAncestorLineStyle(item, l)"
+                    v-show="shouldShowAncestorLine(item, l)"
+                  ></view>
+                  <view v-if="hasHorizontalLine(item)" class="oxy-tree-line-horizontal" :style="getHorizontalLineStyle(item)"></view>
+
+                  <view v-if="shouldShowRootVerticalLine(item)" class="oxy-tree-line-vertical" :style="getRootVerticalLineStyle(item)"></view>
+
+                  <view v-if="shouldShowOwnChildrenLine(item)" class="oxy-tree-line-vertical" :style="getOwnChildrenLineStyle(item)"></view>
+                </block>
+
                 <!-- 兼容支付宝、微信小程序 -->
                 <view class="oxy-tree-node-toggle" @tap.stop="handleClickExpand(item)">
                   <oxy-icon
@@ -69,8 +85,8 @@ export default {
 </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 { computed, nextTick, type CSSProperties, type Ref, ref, toRefs, watch } from 'vue'
+import type { RawTreeNode, Tree, TreeNode } from './types'
 import { treeProps, type TreeExpose } from './types'
 import { isSetsEqual, useTreeMethods } from './utils'
 import { useVirtualScroll } from '../composables/useVirtualScroll'
@@ -85,6 +101,7 @@ const {
   expandAll,
   showCheckbox,
   checkStrictly,
+  showLine,
   selectionLeafOnly,
   height,
   itemHeight,
@@ -469,6 +486,100 @@ const handleFilter = () => {
   filter(searchValue.value)
 }
 
+const isAncestorLast = (node: TreeNode, level: number) => {
+  let current: TreeNode | undefined = node
+  let steps = node.level - level
+  while (steps > 0 && current) {
+    current = current.parent
+    steps--
+  }
+  return current ? current.isLast : false
+}
+
+const TREE_LINE_ICON_BOX_SIZE = '56rpx'
+const TREE_LINE_ICON_SIZE = '32rpx'
+const TREE_LINE_GAP_OFFSET = '2px'
+const ZERO_LENGTH = '0px'
+const HALF_HEIGHT = '50%'
+
+const toRpxLength = (value: number) => {
+  return value === 0 ? ZERO_LENGTH : `${value}rpx`
+}
+
+const getLineLeft = (l: number) => {
+  const indent = Number(props.indent || 32)
+  return `calc(${toRpxLength(indent * (l - 1))} + var(--oxy-tree-node-icon-box-size, ${TREE_LINE_ICON_BOX_SIZE}) / 2)`
+}
+
+const getLineGap = () => {
+  return `var(--oxy-tree-node-icon-size, ${TREE_LINE_ICON_SIZE}) / 2 + ${TREE_LINE_GAP_OFFSET}`
+}
+
+const getLineWidth = (isLeaf: boolean) => {
+  const indent = Number(props.indent || 32)
+  const indentStr = toRpxLength(indent)
+  if (isLeaf) {
+    return `calc(${indentStr} + var(--oxy-tree-node-icon-box-size, ${TREE_LINE_ICON_BOX_SIZE}) / 2)`
+  }
+  return `calc(${indentStr} - var(--oxy-tree-node-icon-size, ${TREE_LINE_ICON_SIZE}) / 2 - ${TREE_LINE_GAP_OFFSET})`
+}
+
+const hasHorizontalLine = (node: TreeNode) => {
+  return node.level > 1
+}
+
+const shouldShowAncestorLine = (node: TreeNode, level: number) => {
+  if (level === node.level - 1) {
+    return true
+  }
+  if (level === 1 && !isAncestorLast(node, 1)) {
+    return true
+  }
+  return !isAncestorLast(node, level + 1)
+}
+
+const getAncestorLineStyle = (node: TreeNode, level: number): CSSProperties => {
+  const shouldExtendToBottom = level === 1 && !isAncestorLast(node, 1)
+  const isLastBranch = level === node.level - 1 && node.isLast
+
+  return {
+    left: getLineLeft(level),
+    top: 0,
+    bottom: shouldExtendToBottom ? 0 : isLastBranch ? HALF_HEIGHT : 0
+  }
+}
+
+const getHorizontalLineStyle = (node: TreeNode): CSSProperties => {
+  return {
+    left: getLineLeft(node.level - 1),
+    width: getLineWidth(node.isLeaf)
+  }
+}
+
+const shouldShowRootVerticalLine = (node: TreeNode) => {
+  return node.level === 1 && node.index > 0
+}
+
+const getRootVerticalLineStyle = (node: TreeNode): CSSProperties => {
+  return {
+    left: getLineLeft(1),
+    top: 0,
+    bottom: node.isLeaf ? (node.isLast ? HALF_HEIGHT : 0) : `calc(${HALF_HEIGHT} + ${getLineGap()})`
+  }
+}
+
+const shouldShowOwnChildrenLine = (node: TreeNode) => {
+  return !node.isLeaf && (expandedKeySet.value.has(node.key) || (node.level === 1 && !node.isLast))
+}
+
+const getOwnChildrenLineStyle = (node: TreeNode): CSSProperties => {
+  return {
+    left: getLineLeft(node.level),
+    top: `calc(${HALF_HEIGHT} + ${getLineGap()})`,
+    bottom: 0
+  }
+}
+
 defineExpose<TreeExpose>({
   toggleExpand,
   toggleChecked,

package/components/oxy-tree/types.ts

@@ -43,6 +43,7 @@ export const treeProps = {
   defaultExpandedKeys: makeArrayProp<string>(),
   expandAll: makeBooleanProp(false),
   checkStrictly: makeBooleanProp(false),
+  showLine: makeBooleanProp(false),
   modelValue: {
     type: [Array<string>, String],
     default: ''

package/components/oxy-upload/index.scss

@@ -122,7 +122,7 @@
 
     &::before {
       background-color: $-upload-video-play-bg;
-      border-radius: 50%;
+      border-radius: $-radius-circle;
     }
   }
 
@@ -142,7 +142,7 @@
       content: "";
       width: 100%;
       height: 100%;
-      border-radius: 50%;
+      border-radius: $-radius-circle;
       background-color: $-color-white;
       left: 0;
       z-index: -1;
@@ -219,7 +219,7 @@
 
   &.oxy-upload__position-right {
     .oxy-upload__evoke {
-      margin-right: 24rpx;
+      margin-right: $-spacing-24;
     }
   }
 }

package/components/oxy-video-preview/index.scss

@@ -5,7 +5,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 999;
+  z-index: $-z-index-overlay;
   width: 100%;
   height: 100%;
   display: flex;
@@ -17,7 +17,7 @@
   @include e(video) {
     width: 100%;
     height: 484rpx;
-    transition: all 0.3s ease;
+    transition: all $-transition-duration-slow ease;
   }
 
   @include edeep(close) {
@@ -31,4 +31,4 @@
     font-size: $-video-preview-close-font-size;
     color: $-video-preview-close-color;
   }
-}
+}

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

@@ -25,7 +25,7 @@
     width: 80rpx;
     height: 80rpx;
     background: $-virtual-scroll-back-top-bg;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     display: flex;
     align-items: center;
     justify-content: center;