oxy-uni-ui 2.0.0 → 2.1.1

package/components/oxy-tag/index.scss

@@ -1,30 +1,53 @@
 @import '../common/abstracts/variable';
 @import '../common/abstracts/mixin';
 
-@mixin tag-type-style ($normalColor, $normalBg) {
+.oxy-theme-dark {
+  @include b(tag) {
+    @include when(default) {
+      background: $-dark-background4;
+      color: $-dark-color3;
+
+      @include when(plain) {
+        background: transparent;
+        border-color: $-dark-background7;
+      }
+
+      @include when(round) {
+        color: $-dark-color3;
+        border-color: $-dark-background7;
+      }
+    }
+
+    @include when(dynamic-input) {
+      border-color: $-dark-background7;
+    }
+  }
+}
+
+@mixin tag-type-style($normalColor, $normalBg) {
   background: $normalBg;
 
   @include when(plain) {
     background: transparent;
     color: $normalColor;
-    border: 1px solid $normalColor;
-    padding: 0 8rpx;
+    border-color: $normalColor;
+    padding: 12rpx 20rpx;
   }
+
   @include when(round) {
-    line-height: 1.2;
-    font-size: $-tag-fs;
-    padding: 8rpx 22rpx;
+    padding: 12rpx 24rpx;
     background: transparent;
     color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color);
-    border: 1px solid if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
+    border-color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
     border-radius: $-tag-round-radius;
   }
+
   @include when(mark) {
-    padding: 2rpx 12rpx;
+    padding: 12rpx 20rpx;
     border-radius: $-tag-mark-radius;
 
     @include when(plain) {
-      padding: 0 12rpx;
+      padding: 8rpx 20rpx;
     }
   }
   @include when(active) {
@@ -32,15 +55,24 @@
     border-color: $-tag-primary-color;
   }
 }
+
 @include b(tag) {
-  font-size: $-tag-small-fs;
-  display: inline-block;
+  position: relative;
+  font-size: $-tag-fs;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  box-sizing: border-box;
   color: $-tag-color;
-  padding: 0 6rpx;
-  border-radius: 4rpx;
-  transition: opacity .3s;
+  padding: 12rpx 20rpx;
+  min-height: 64rpx;
+  border: #{$-border-width-base} solid transparent;
+  border-radius: $-tag-radius;
+  transition: opacity $-transition-duration-base, color $-transition-duration-base, border-color $-transition-duration-base, background-color $-transition-duration-base;
   vertical-align: middle;
-  line-height: initial;
+  line-height: 1.4;
+  white-space: nowrap;
 
   @include when(default) {
     @include tag-type-style($-tag-info-color, $-tag-info-bg);
@@ -58,58 +90,101 @@
     @include tag-type-style($-tag-success-color, $-tag-success-bg);
   }
   @include when(icon) {
-    font-size: $-tag-fs;
-    line-height: 1.2;
-    padding: 4rpx 10rpx;
+    padding: 12rpx 20rpx;
   }
+
   @include when(dynamic) {
     box-sizing: border-box;
-    width: 176rpx;
-    transition: .3s;
+    width: auto;
+    min-width: 176rpx;
+    justify-content: center;
+    transition: color .3s, border-color .3s, background-color .3s;
+
+    .oxy-tag__text {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: inherit;
+
+      :deep(text) {
+        display: inline-block;
+        line-height: inherit;
+      }
+    }
 
     &:active {
       color: $-tag-primary-color;
       border-color: $-tag-primary-color;
     }
   }
+
   @include when(dynamic-input) {
     border-color: $-tag-primary-color;
+    justify-content: flex-start;
   }
+
   @include edeep(icon) {
-    display: inline-block;
-    margin-right: 8rpx;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
     font-size: $-tag-fs;
-    line-height: 1.2;
-    vertical-align: baseline;
+    line-height: 1;
+    vertical-align: middle;
   }
+
   @include e(text) {
     display: inline-block;
-    vertical-align: text-top;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
   }
+
   @include e(add-text) {
-    width: 120rpx;
-    height: 28rpx;
-    min-height: 28rpx;
+    width: 100%;
+    min-width: 0;
+    height: 56rpx;
+    min-height: 56rpx;
     display: inline-block;
     font-size: $-tag-fs;
+    line-height: 56rpx;
     vertical-align: middle;
+    color: inherit;
     padding: 0;
+    border: none;
+    background: transparent;
+    text-align: left;
+
+    &::placeholder {
+      color: $-font-gray-3;
+    }
   }
+
   @include e(close) {
-    display: inline-block;
-    margin-left: 48rpx;
-    margin-right: -8rpx;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: $-spacing-16;
+    margin-right: 0;
     font-size: $-tag-close-size;
-    height: 28rpx;
-    line-height: 1.1;
-    vertical-align: text-bottom;
+    width: $-tag-close-size;
+    height: $-tag-close-size;
+    line-height: 1;
+    vertical-align: middle;
     color: $-tag-close-color;
+    opacity: 0.7;
+    transition: opacity $-transition-duration-base, color $-transition-duration-base;
 
     &:active {
+      opacity: 1;
       color: $-tag-close-active-color;
     }
   }
+
   @include edeep(add) {
-    vertical-align: bottom;
+    vertical-align: middle;
+    line-height: 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;
   }
 
 
@@ -164,7 +164,7 @@
     border: none;
     box-sizing: border-box;
     word-break: break-word;
-    min-height: 48rpx;
+    min-height: 56rpx;
 
     &::-webkit-input-placeholder {
       color: $-input-placeholder-color;
@@ -203,7 +203,7 @@
     font-size: $-textarea-count-fs;
     color: $-textarea-count-color;
     background: $-textarea-bg;
-    line-height: 40rpx;
+    line-height: $-lh-base;
     display: inline-flex;
   }
 
@@ -257,10 +257,6 @@
   }
 
   @include when(auto-height) {
-    &:not(.is-cell) {
-      padding: 10rpx 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-tooltip/index.scss

@@ -54,7 +54,7 @@
   }
 
   @include edeep(close-icon) {
-    font-size: 24rpx;
+    font-size: calc(2 * #{$-tooltip-close-size});
     position: absolute;
     right: -16rpx;
     top: -20rpx;

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: 12rpx 24rpx;
-      border-radius: 8rpx;
-      margin-bottom: 16rpx;
-      margin-right: 24rpx;
-      .oxy-input__icon{
+      padding: 16rpx 24rpx;
+      border-radius: $-tree-search-input-radius;
+      margin-bottom: 20rpx;
+      margin-right: $-spacing-24;
+
+      .oxy-input__icon {
         background: transparent;
       }
     }
   }
-
-
 }
 
 .oxy-tree-node-content {
+  position: relative;
   display: flex;
   width: 100%;
   align-items: center;
@@ -83,7 +87,7 @@
 
   &.is-disabled {
     color: $-tree-node-disabled-color;
-    opacity: $-button-disabled-opacity;
+    opacity: $-tree-disabled-opacity;
 
     :deep(.oxy-tree-node-icon) {
       color: $-tree-node-disabled-color;
@@ -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

@@ -39,7 +39,7 @@
     font-size: $-upload-evoke-icon-size;
     background-color: $-upload-evoke-bg;
     color: $-upload-evoke-color;
-    margin-bottom: 24rpx;
+    margin-bottom: 28rpx;
 
     @include when(disabled) {
       color: $-upload-evoke-disabled-color;
@@ -47,13 +47,13 @@
   }
 
   @include e(evoke-file) {
-    border-radius: 16rpx;
+    border-radius: $-upload-file-radius;
   }
 
   @include e(evoke-num) {
-    font-size: 28rpx;
-    line-height: 28rpx;
-    margin-top: 16rpx;
+    font-size: $-fs-content;
+    line-height: $-fs-content;
+    margin-top: 20rpx;
   }
 
   @include edeep(evoke-icon) {
@@ -75,7 +75,7 @@
     position: relative;
     width: $-upload-size;
     height: $-upload-size;
-    margin: 0 24rpx 24rpx 0;
+    margin: 0 24rpx 28rpx 0;
   }
 
   @include e(preview-list) {
@@ -106,9 +106,9 @@
     font-size: $-upload-file-fs;
     color: $-upload-file-color;
     box-sizing: border-box;
-    padding: 0 8rpx;
+    padding: 0 12rpx;
     text-align: center;
-    margin-top: 16rpx;
+    margin-top: 20rpx;
     @include lineEllipsis()
   }
 
@@ -117,12 +117,12 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    font-size: 48rpx;
+    font-size: $-upload-preview-icon-size;
     color: $-color-white;
 
     &::before {
-      background-color: rgba(0, 0, 0, 0.5);
-      border-radius: 50%;
+      background-color: $-upload-video-play-bg;
+      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;
@@ -159,7 +159,7 @@
   @include e(progress-txt) {
     font-size: $-upload-progress-fs;
     line-height: $-upload-progress-fs;
-    margin-top: 18rpx;
+    margin-top: 20rpx;
     color: $-color-white;
   }
 
@@ -182,9 +182,9 @@
     .oxy-upload__status-content:not(.oxy-upload__mask) {
       border: 1px solid $-color-border;
       box-sizing: border-box;
-      border-radius: 16rpx;
+      border-radius: $-upload-file-radius;
       .oxy-upload__picture {
-        border-radius: 16rpx;
+        border-radius: $-upload-file-radius;
       }
       .oxy-upload__picture-icon {
         width: 64rpx;
@@ -192,7 +192,7 @@
       }
     }
     .oxy-upload__mask {
-      border-radius: 16rpx;
+      border-radius: $-upload-file-radius;
     }
     :deep(.oxy-tooltip) {
       width: 100%;
@@ -205,12 +205,12 @@
     .oxy-upload____status-content-name {
       display: block;
       width: 100%;
-      font-size: $-upload-file-fs;
+      font-size: $-upload-preview-name-fs;
       color: $-upload-file-color;
       box-sizing: border-box;
-      padding: 0 8rpx;
+      padding: 0 12rpx;
       text-align: center;
-      margin-top: 16rpx;
+      margin-top: 20rpx;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -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

@@ -24,8 +24,8 @@
     bottom: 40rpx;
     width: 80rpx;
     height: 80rpx;
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 50%;
+    background: $-virtual-scroll-back-top-bg;
+    border-radius: $-radius-circle;
     display: flex;
     align-items: center;
     justify-content: center;