oxy-uni-ui 2.1.0 → 2.1.2

package/components/oxy-table-col/index.scss

@@ -21,7 +21,7 @@
 
   @include m(fixed) {
     position: sticky;
-    z-index: 1;
+    z-index: $-z-index-sticky;
     left: 0;
   }
 
@@ -33,7 +33,6 @@
       right: -30rpx;
       top: 0;
       width: 30rpx;
-      height: 100%;
       background: $-table-fixed-shadow-light;
     }
   }

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

@@ -31,11 +31,9 @@
     background: transparent;
     color: $normalColor;
     border-color: $normalColor;
-    padding: 12rpx 20rpx;
   }
 
   @include when(round) {
-    padding: 12rpx 24rpx;
     background: transparent;
     color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color);
     border-color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
@@ -43,12 +41,7 @@
   }
 
   @include when(mark) {
-    padding: 12rpx 20rpx;
     border-radius: $-tag-mark-radius;
-
-    @include when(plain) {
-      padding: 8rpx 20rpx;
-    }
   }
   @include when(active) {
     color: $-tag-primary-color;
@@ -56,6 +49,144 @@
   }
 }
 
+@mixin tag-size-style(
+  $sizeConfig
+) {
+  $fontSize: map-get($sizeConfig, fontSize);
+  $paddingY: map-get($sizeConfig, paddingY);
+  $paddingX: map-get($sizeConfig, paddingX);
+  $roundPaddingX: map-get($sizeConfig, roundPaddingX);
+  $plainPaddingY: map-get($sizeConfig, plainPaddingY);
+  $markPlainPaddingY: map-get($sizeConfig, markPlainPaddingY);
+  $minHeight: map-get($sizeConfig, minHeight);
+  $inputHeight: map-get($sizeConfig, inputHeight);
+  $iconGap: map-get($sizeConfig, iconGap);
+  $closeGap: map-get($sizeConfig, closeGap);
+  $dynamicMinWidth: map-get($sizeConfig, dynamicMinWidth);
+  $closeSize: map-get($sizeConfig, closeSize);
+  $radius: map-get($sizeConfig, radius);
+  $roundRadius: map-get($sizeConfig, roundRadius);
+  $markRadius: map-get($sizeConfig, markRadius);
+
+  font-size: $fontSize;
+  padding: $paddingY $paddingX;
+  min-height: $minHeight;
+  border-radius: $radius;
+
+  &.is-round {
+    padding: $paddingY $roundPaddingX;
+    border-radius: $roundRadius;
+  }
+
+  &.is-plain {
+    padding: $plainPaddingY $paddingX;
+  }
+
+  &.is-mark {
+    padding: $paddingY $paddingX;
+    border-radius: $markRadius;
+
+    &.is-plain {
+      padding: $markPlainPaddingY $paddingX;
+    }
+  }
+
+  &.is-dynamic {
+    min-width: $dynamicMinWidth;
+  }
+
+  .oxy-tag__icon {
+    margin-right: $iconGap;
+    font-size: $fontSize;
+  }
+
+  .oxy-tag__add-text {
+    height: $inputHeight;
+    min-height: $inputHeight;
+    font-size: $fontSize;
+    line-height: $inputHeight;
+  }
+
+  .oxy-tag__close {
+    margin-left: $closeGap;
+    font-size: $closeSize;
+    width: $closeSize;
+    height: $closeSize;
+  }
+}
+
+$-tag-size-default-config: (
+  fontSize: $-tag-fs,
+  paddingY: 6rpx,
+  paddingX: 18rpx,
+  roundPaddingX: 22rpx,
+  plainPaddingY: 6rpx,
+  markPlainPaddingY: 4rpx,
+  minHeight: 46rpx,
+  inputHeight: 40rpx,
+  iconGap: 10rpx,
+  closeGap: 12rpx,
+  dynamicMinWidth: 148rpx,
+  closeSize: $-tag-close-size,
+  radius: $-tag-radius,
+  roundRadius: $-tag-round-radius,
+  markRadius: $-tag-mark-radius
+);
+
+$-tag-size-mini-config: (
+  fontSize: $-tag-mini-fs,
+  paddingY: 2rpx,
+  paddingX: 10rpx,
+  roundPaddingX: 12rpx,
+  plainPaddingY: 2rpx,
+  markPlainPaddingY: 2rpx,
+  minHeight: 28rpx,
+  inputHeight: 26rpx,
+  iconGap: 6rpx,
+  closeGap: 8rpx,
+  dynamicMinWidth: 116rpx,
+  closeSize: $-tag-mini-fs,
+  radius: $-tag-mini-radius,
+  roundRadius: $-tag-round-mini-radius,
+  markRadius: $-tag-mark-mini-radius
+);
+
+$-tag-size-small-config: (
+  fontSize: $-tag-small-fs,
+  paddingY: 4rpx,
+  paddingX: 14rpx,
+  roundPaddingX: 16rpx,
+  plainPaddingY: 4rpx,
+  markPlainPaddingY: 2rpx,
+  minHeight: 34rpx,
+  inputHeight: 30rpx,
+  iconGap: 8rpx,
+  closeGap: 10rpx,
+  dynamicMinWidth: 128rpx,
+  closeSize: $-tag-small-fs,
+  radius: $-tag-small-radius,
+  roundRadius: $-tag-round-small-radius,
+  markRadius: $-tag-mark-small-radius
+);
+
+$-tag-size-large-config: (
+  fontSize: $-tag-large-fs,
+  paddingY: 8rpx,
+  paddingX: 22rpx,
+  roundPaddingX: 26rpx,
+  plainPaddingY: 8rpx,
+  markPlainPaddingY: 6rpx,
+  minHeight: 54rpx,
+  inputHeight: 48rpx,
+  iconGap: 12rpx,
+  closeGap: 14rpx,
+  dynamicMinWidth: 164rpx,
+  closeSize: $-tag-small-fs,
+  radius: $-tag-large-radius,
+  roundRadius: $-tag-round-large-radius,
+  markRadius: $-tag-mark-large-radius
+);
+
 @include b(tag) {
   position: relative;
   font-size: $-tag-fs;
@@ -65,11 +196,11 @@
   max-width: 100%;
   box-sizing: border-box;
   color: $-tag-color;
-  padding: 12rpx 20rpx;
-  min-height: 64rpx;
-  border: 1px solid transparent;
+  padding: 6rpx 18rpx;
+  min-height: 46rpx;
+  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;
@@ -89,14 +220,23 @@
   @include when(success) {
     @include tag-type-style($-tag-success-color, $-tag-success-bg);
   }
-  @include when(icon) {
-    padding: 12rpx 20rpx;
+  @include tag-size-style($-tag-size-default-config);
+  @include when(mini) {
+    @include tag-size-style($-tag-size-mini-config);
+  }
+
+  @include when(small) {
+    @include tag-size-style($-tag-size-small-config);
+  }
+
+  @include when(large) {
+    @include tag-size-style($-tag-size-large-config);
   }
 
   @include when(dynamic) {
     box-sizing: border-box;
     width: auto;
-    min-width: 176rpx;
+    min-width: 148rpx;
     justify-content: center;
     transition: color .3s, border-color .3s, background-color .3s;
 
@@ -127,7 +267,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-right: 12rpx;
+    margin-right: 10rpx;
     font-size: $-tag-fs;
     line-height: 1;
     vertical-align: middle;
@@ -145,11 +285,11 @@
   @include e(add-text) {
     width: 100%;
     min-width: 0;
-    height: 56rpx;
-    min-height: 56rpx;
+    height: 40rpx;
+    min-height: 40rpx;
     display: inline-block;
     font-size: $-tag-fs;
-    line-height: 56rpx;
+    line-height: 40rpx;
     vertical-align: middle;
     color: inherit;
     padding: 0;
@@ -166,7 +306,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-left: 16rpx;
+    margin-left: 12rpx;
     margin-right: 0;
     font-size: $-tag-close-size;
     width: $-tag-close-size;
@@ -175,7 +315,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-tag/oxy-tag.vue

@@ -57,7 +57,7 @@ const dynamicValue = ref<string>('')
 const dynamicInput = ref<boolean>(false)
 
 watch(
-  [() => props.useIconSlot, () => props.icon, () => props.plain, () => props.dynamic, () => props.round, () => props.mark],
+  [() => props.useIconSlot, () => props.icon, () => props.plain, () => props.dynamic, () => props.round, () => props.mark, () => props.size],
   () => {
     computeTagClass()
   },
@@ -76,6 +76,17 @@ watch(
   { immediate: true }
 )
 
+watch(
+  () => props.size,
+  (newValue) => {
+    if (!newValue) return
+    const size = ['mini', 'small', 'default', 'large']
+    if (size.indexOf(newValue) === -1) console.error(`size must be one of ${size.toString()}`)
+    computeTagClass()
+  },
+  { immediate: true }
+)
+
 watch(
   () => dynamicInput.value,
   () => {
@@ -108,9 +119,10 @@ const textStyle = computed(() => {
 })
 
 function computeTagClass() {
-  const { type, plain, round, mark, dynamic, icon, useIconSlot } = props
+  const { type, size, plain, round, mark, dynamic, icon, useIconSlot } = props
   let tagClassList: string[] = []
   type && tagClassList.push(`is-${type}`)
+  size && tagClassList.push(`is-${size}`)
   plain && tagClassList.push('is-plain')
   round && tagClassList.push('is-round')
   mark && tagClassList.push('is-mark')

package/components/oxy-tag/types.ts

@@ -2,6 +2,7 @@ import type { ExtractPropTypes } from 'vue'
 import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
 
 export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger'
+export type TagSize = 'mini' | 'small' | 'default' | 'large'
 
 export const tagProps = {
   ...baseProps,
@@ -21,6 +22,14 @@ export const tagProps = {
    */
   type: makeStringProp<TagType>('default'),
 
+  /**
+   * 标签尺寸
+   * 类型：string
+   * 可选值：'mini' / 'small' / 'default' / 'large'
+   * 默认值：'default'
+   */
+  size: makeStringProp<TagSize>('default'),
+
   /**
    * 左侧图标
    * 类型：string

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;