refactor(tag): refactor fix lost css for button,tag (#2301)

* fix(modal): add button's line-height * fix(tag): prevents high stretching of tag * fix(alert): fix alert-icon * fix(tree): fix loading-icon
opentiny · Oct 19, 2024 · 6ecd2ff · 6ecd2ff
1 parent 43b3725
commit 6ecd2ff
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 29 deletions.
diff --git a/examples/sites/demos/pc/app/tag/size-composition-api.vue b/examples/sites/demos/pc/app/tag/size-composition-api.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="tiny-tag-demo">
-    <tiny-tag size="medium"> 中等标签 </tiny-tag>
-    <tiny-tag> 默认标签 </tiny-tag>
-    <tiny-tag size="small"> 小型标签 </tiny-tag>
-    <tiny-tag size="mini"> 超小标签 </tiny-tag>
+    <tiny-tag size="medium" type="success"> 中等标签 </tiny-tag>
+    <tiny-tag type="success"> 默认标签 </tiny-tag>
+    <tiny-tag size="small" type="success"> 小型标签 </tiny-tag>
+    <tiny-tag size="mini" type="success"> 超小标签 </tiny-tag>
   </div>
 </template>
 

diff --git a/examples/sites/demos/pc/app/tag/size.vue b/examples/sites/demos/pc/app/tag/size.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="tiny-tag-demo">
-    <tiny-tag size="medium"> 中等标签 </tiny-tag>
-    <tiny-tag> 默认标签 </tiny-tag>
-    <tiny-tag size="small"> 小型标签 </tiny-tag>
-    <tiny-tag size="mini"> 超小标签 </tiny-tag>
+    <tiny-tag size="medium" type="success"> 中等标签 </tiny-tag>
+    <tiny-tag type="success"> 默认标签 </tiny-tag>
+    <tiny-tag size="small" type="success"> 小型标签 </tiny-tag>
+    <tiny-tag size="mini" type="success"> 超小标签 </tiny-tag>
   </div>
 </template>
 

diff --git a/packages/theme/src/alert/index.less b/packages/theme/src/alert/index.less
@@ -36,6 +36,7 @@
     font-size: var(--tv-Alert-icon-size);
     margin-right: var(--tv-Alert-icon-margin-right);
     flex-shrink: 0;
+    margin-top: 2px;
   }
 
   /** content 场景：title/description/opration */

diff --git a/packages/theme/src/button/index.less b/packages/theme/src/button/index.less
@@ -22,6 +22,7 @@
   vertical-align: middle;
   font-weight: var(--tv-Button-font-weight);
   border: var(--tv-Button-border-width) solid;
+  line-height: var(--tv-Button-line-height);
 
   /** 1、 圆角场景 */
   border-radius: var(--tv-Button-border-radius);

diff --git a/packages/theme/src/button/vars.less b/packages/theme/src/button/vars.less
@@ -16,7 +16,8 @@
   --tv-Button-font-weight: var(--tv-font-weight-regular);
   // 默认时按钮边框宽度
   --tv-Button-border-width: var(--tv-border-width);
-
+  // 按钮的行产，
+  --tv-Button-line-height: var(--tv-border-width);
   // --------------------------------------------------- 场景1、圆角--------------------------------------------
   // 默认时按钮圆角
   --tv-Button-border-radius: var(--tv-border-radius-round); // 默认规范不需要 6px的圆角的效果，默认就是半圆

diff --git a/packages/theme/src/tag/index.less b/packages/theme/src/tag/index.less
@@ -18,12 +18,16 @@
 .@{tag-prefix-cls} {
   .inject-Tag-vars();
 
-  line-height: var(--tv-Tag-line-height);
-  border: 1px solid;
-  white-space: nowrap;
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
+  height: fit-content; // 避免 flex时，高度拉伸
+  line-height: var(--tv-Tag-line-height);
+  border: 1px solid;
+  max-width: 200px; // 新增约束，避免太长的标签
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 
   /** size 场景 */
   .size-mixin(@size) {

diff --git a/packages/theme/src/tag/vars.less b/packages/theme/src/tag/vars.less
@@ -21,7 +21,7 @@
   // 超小标签水平间距
   --tv-Tag-padding-x-mini: var(--tv-space-sm);
   // 超小标签垂直间距
-  --tv-Tag-padding-y-mini: 0;
+  --tv-Tag-padding-y-mini: 0.5px;
   // 超小标签圆角
   --tv-Tag-border-radius-mini: var(--tv-border-radius-xs);
   // 小型标签字号

diff --git a/packages/theme/src/tree/index.less b/packages/theme/src/tree/index.less
@@ -429,19 +429,9 @@
     text-overflow: ellipsis;
   }
 
-  &__loading.circular {
+  &__loading {
     margin-right: 4px;
     margin-left: var(--ti-tree-node-label-margin-left);
-    font-size: var(--ti-tree-node-icon-font-size);
-
-    .path {
-      animation: loading-dash 1.5s ease-in-out infinite;
-      stroke-dasharray: 90, 150;
-      stroke-dashoffset: 0;
-      stroke-width: 2;
-      stroke: var(--ti-tree-node-loading-icon-color);
-      stroke-linecap: round;
-    }
   }
 
   & > &__children {

diff --git a/packages/vue/src/tree/src/tree-node.vue b/packages/vue/src/tree/src/tree-node.vue
@@ -114,9 +114,7 @@
             :label="node.id"
             :disabled="!!node.disabled"
           ></tiny-radio>
-          <svg v-if="node.loading" class="tiny-tree-node__loading tiny-svg circular" viewBox="25 25 50 50">
-            <circle class="path" cx="50" cy="50" r="24" fill="none"></circle>
-          </svg>
+          <icon-loading v-if="node.loading" class="tiny-tree-node__loading" />
           <slot name="prefix" :node="node"></slot>
           <template v-if="action.type === 'edit' && action.node && action.node === node">
             <tiny-input
@@ -242,7 +240,7 @@ import { renderless, api } from '@opentiny/vue-renderless/tree-node/vue'
 import CollapseTransition from '@opentiny/vue-collapse-transition'
 import {
   iconChevronRight,
-  iconLoading,
+  iconLoadingShadow,
   iconArrowBottom,
   iconEdit,
   iconDel,
@@ -327,7 +325,7 @@ export default defineComponent({
     TinyRadio: Radio,
     TinyInput: Input,
     IconChevronRight: iconChevronRight(),
-    IconLoading: iconLoading(),
+    IconLoading: iconLoadingShadow(),
     IconArrowBottom: iconArrowBottom(),
     IconEdit: iconEdit(),
     IconDel: iconDel(),