From f17a8603afc5dd08a18bab2f3ccfb91fa6cbbcf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com>
Date: Thu, 20 Mar 2025 23:49:59 -0700
Subject: [PATCH] fix(tag): [tag,select] tag add maxWidth prop, and select add
 maxTagWidth prop (#3158)

* fix(tag):  tag add maxWidth prop,  and select add maxTagWidth prop

* fix(tag): add  documents for new props-- maxWidth

* fix(theme-saas): add ellipsis to tag

* fix(e2e): fix reviews
---
 examples/sites/demos/apis/select.js           | 14 ++++++++++++
 examples/sites/demos/apis/tag.js              | 14 ++++++++++++
 .../pc/app/tag/max-width-composition-api.vue  | 16 ++++++++++++++
 .../sites/demos/pc/app/tag/max-width.spec.ts  | 10 +++++++++
 examples/sites/demos/pc/app/tag/max-width.vue | 22 +++++++++++++++++++
 examples/sites/demos/pc/app/tag/webdoc/tag.js | 12 ++++++++++
 packages/theme-saas/src/tag/index.less        |  4 ++++
 packages/theme/src/tag/index.less             |  2 +-
 packages/vue/src/select/src/index.ts          |  5 +++++
 packages/vue/src/select/src/mobile-first.vue  | 11 +++++++---
 packages/vue/src/select/src/pc.vue            |  8 ++++++-
 packages/vue/src/tag/src/index.ts             |  9 ++++----
 packages/vue/src/tag/src/mobile-first.vue     | 11 ++++++++--
 packages/vue/src/tag/src/pc.vue               | 11 ++++++++--
 14 files changed, 135 insertions(+), 14 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/tag/max-width-composition-api.vue
 create mode 100644 examples/sites/demos/pc/app/tag/max-width.spec.ts
 create mode 100644 examples/sites/demos/pc/app/tag/max-width.vue

diff --git a/examples/sites/demos/apis/select.js b/examples/sites/demos/apis/select.js
index 719095a88..c48209760 100644
--- a/examples/sites/demos/apis/select.js
+++ b/examples/sites/demos/apis/select.js
@@ -544,6 +544,20 @@ export default {
           pcDemo: 'tag-type',
           mfDemo: 'tag-type'
         },
+        {
+          name: 'max-tag-width',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '多选时，设置最大标签宽度',
+            'en-US': 'When multiple selections are made, set the maximum label width.'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: '',
+          meta: {
+            stable: '3.22.0'
+          }
+        },
         {
           name: 'text-field',
           type: 'string',
diff --git a/examples/sites/demos/apis/tag.js b/examples/sites/demos/apis/tag.js
index f88a5df7b..e975ec009 100644
--- a/examples/sites/demos/apis/tag.js
+++ b/examples/sites/demos/apis/tag.js
@@ -54,6 +54,20 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
+        {
+          name: 'max-width',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '设置最大宽度',
+            'en-US': 'set max width'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'max-width',
+          meta: {
+            stable: '3.22.0'
+          }
+        },
         {
           name: 'disabled',
           type: 'boolean',
diff --git a/examples/sites/demos/pc/app/tag/max-width-composition-api.vue b/examples/sites/demos/pc/app/tag/max-width-composition-api.vue
new file mode 100644
index 000000000..577a86e60
--- /dev/null
+++ b/examples/sites/demos/pc/app/tag/max-width-composition-api.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="tiny-tag-demo">
+    <tiny-tag size="medium" type="success" maxWidth="80px"> 文本超长超长的标签 </tiny-tag>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { TinyTag } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.tiny-tag-demo .tiny-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tag/max-width.spec.ts b/examples/sites/demos/pc/app/tag/max-width.spec.ts
new file mode 100644
index 000000000..ffaff39f9
--- /dev/null
+++ b/examples/sites/demos/pc/app/tag/max-width.spec.ts
@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('测试最大宽度', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('tag#max-width')
+
+  const normal = page.getByText('文本超长超长的标签')
+
+  await expect(normal).toHaveCSS('max-width', '80px')
+})
diff --git a/examples/sites/demos/pc/app/tag/max-width.vue b/examples/sites/demos/pc/app/tag/max-width.vue
new file mode 100644
index 000000000..e4cc16197
--- /dev/null
+++ b/examples/sites/demos/pc/app/tag/max-width.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="tiny-tag-demo">
+    <tiny-tag size="medium" type="success" maxWidth="80px"> 文本超长超长的标签 </tiny-tag>
+  </div>
+</template>
+
+<script lang="jsx">
+import { TinyTag } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTag
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag-demo .tiny-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/tag/webdoc/tag.js b/examples/sites/demos/pc/app/tag/webdoc/tag.js
index a22e2d440..f268875fd 100644
--- a/examples/sites/demos/pc/app/tag/webdoc/tag.js
+++ b/examples/sites/demos/pc/app/tag/webdoc/tag.js
@@ -76,6 +76,18 @@ export default {
       },
       codeFiles: ['size.vue']
     },
+    {
+      demoId: 'max-width',
+      name: {
+        'zh-CN': '最大宽度',
+        'en-US': 'Max width'
+      },
+      desc: {
+        'zh-CN': '通过 <code>maxWidth</code> 设置最大宽度 。',
+        'en-US': 'Set the maxWidth through <code>maxWidth</code>.'
+      },
+      codeFiles: ['max-width.vue']
+    },
     {
       demoId: 'disabled',
       name: {
diff --git a/packages/theme-saas/src/tag/index.less b/packages/theme-saas/src/tag/index.less
index a3042c71b..29ec12655 100644
--- a/packages/theme-saas/src/tag/index.less
+++ b/packages/theme-saas/src/tag/index.less
@@ -15,6 +15,10 @@
   @apply whitespace-nowrap;
   @apply inline-flex;
   @apply items-center;
+
+  @apply overflow-hidden;
+  @apply text-ellipsis;
+
   .tag-variant(
     theme('colors.color.info.primary.DEFAULT'),
     theme('colors.transparent'),
diff --git a/packages/theme/src/tag/index.less b/packages/theme/src/tag/index.less
index 986263700..8bfeccba0 100644
--- a/packages/theme/src/tag/index.less
+++ b/packages/theme/src/tag/index.less
@@ -24,7 +24,7 @@
   height: fit-content; // 避免 flex时，高度拉伸
   line-height: var(--tv-Tag-line-height);
   border: 1px solid;
-  max-width: 200px; // 新增约束，避免太长的标签
+  max-width: 200px; // 默认约束，避免太长的标签，用户还可以再通过属性，覆盖到style上.
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
diff --git a/packages/vue/src/select/src/index.ts b/packages/vue/src/select/src/index.ts
index e614bc749..d0a306d12 100644
--- a/packages/vue/src/select/src/index.ts
+++ b/packages/vue/src/select/src/index.ts
@@ -362,6 +362,11 @@ export default defineComponent({
     showAllTextTag: {
       type: Boolean,
       default: false
+    },
+    // 配置多选时，Tag的最大宽度
+    maxTagWidth: {
+      type: [String, Number],
+      default: null
     }
   },
   setup(props, context) {
diff --git a/packages/vue/src/select/src/mobile-first.vue b/packages/vue/src/select/src/mobile-first.vue
index 28555cd95..92b102901 100644
--- a/packages/vue/src/select/src/mobile-first.vue
+++ b/packages/vue/src/select/src/mobile-first.vue
@@ -27,8 +27,8 @@
         multiple && !state.selectDisabled && state.selected.length
           ? state.selected.map((item) => (item.state ? item.state.currentLabel : item.currentLabel)).join('; ')
           : !multiple && state.selectDisabled
-          ? state.selectedLabel
-          : ''
+            ? state.selectedLabel
+            : ''
       "
     >
       <tiny-filter-box
@@ -87,6 +87,7 @@
               :class="gcls('tag-info')"
               @close="deleteTag($event, state.selectedVal[0])"
               disable-transitions
+              :maxWidth="maxTagWidth"
             >
               <tiny-tooltip
                 :effect="tooltipConfig.effect || 'light'"
@@ -120,6 +121,7 @@
               :class="gcls('tag-info')"
               type="info"
               disable-transitions
+              :maxWidth="maxTagWidth"
             >
               <span :class="gcls('tags-text')">+ {{ state.selectedVal.length - 1 }}</span>
             </tiny-tag>
@@ -139,6 +141,7 @@
               key="tags-collapse"
               :closable="false"
               :size="state.collapseTagSize"
+              :maxWidth="maxTagWidth"
               >+ {{ state.collapseTagsLength }}</tiny-tag
             >
             <tiny-tag
@@ -151,6 +154,7 @@
               type="info"
               @close="deleteTag($event, item)"
               disable-transitions
+              :maxWidth="maxTagWidth"
             >
               <tiny-tooltip
                 :effect="tooltipConfig.effect || 'light'"
@@ -711,7 +715,8 @@ export default defineComponent({
     'showEmptyValue',
     'tooltipConfig',
     'dropdownHeight',
-    'allText'
+    'allText',
+    'maxTagWidth'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api, classes })
diff --git a/packages/vue/src/select/src/pc.vue b/packages/vue/src/select/src/pc.vue
index fdec61724..1b99ce676 100644
--- a/packages/vue/src/select/src/pc.vue
+++ b/packages/vue/src/select/src/pc.vue
@@ -86,6 +86,7 @@
                 :type="state.getTagType"
                 @close="deleteTag($event, state.selected[0])"
                 disable-transitions
+                :maxWidth="maxTagWidth"
               >
                 <tiny-tooltip
                   :effect="tooltipConfig.effect || 'light'"
@@ -119,6 +120,7 @@
                 :disabled="state.isDisabled"
                 disable-transitions
                 class="tiny-select__tags-number"
+                :maxWidth="maxTagWidth"
               >
                 <span class="tiny-select__tags-text">+ {{ state.selected.length - 1 }}</span>
               </tiny-tag>
@@ -135,6 +137,7 @@
                 :closable="true"
                 :size="state.collapseTagSize"
                 @close="toggleCheckAll(false)"
+                :maxWidth="maxTagWidth"
               >
                 {{ allText || t('ui.base.all') }}
               </tiny-tag>
@@ -150,6 +153,7 @@
                   :closable="false"
                   :size="state.collapseTagSize"
                   @click="onClickCollapseTag($event)"
+                  :maxWidth="maxTagWidth"
                 >
                   <template v-if="hoverExpand"> + {{ state.collapseTagsLength }} </template>
                   <icon-ellipsis v-else></icon-ellipsis>
@@ -168,6 +172,7 @@
                   :type="state.getTagType"
                   @close="deleteTag($event, item)"
                   disable-transitions
+                  :maxWidth="maxTagWidth"
                 >
                   <tiny-tooltip
                     :effect="tooltipConfig.effect || 'light'"
@@ -762,7 +767,8 @@ export default defineComponent({
     'clickExpand',
     'maxVisibleRows',
     'showAllTextTag',
-    'allText'
+    'allText',
+    'maxTagWidth'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api })
diff --git a/packages/vue/src/tag/src/index.ts b/packages/vue/src/tag/src/index.ts
index 1dce770d4..4c55ac2de 100644
--- a/packages/vue/src/tag/src/index.ts
+++ b/packages/vue/src/tag/src/index.ts
@@ -39,15 +39,14 @@ export const tagProps = {
   },
   beforeDelete: Function,
   value: [Number, String],
-
+  maxWidth: {
+    type: [String, Number],
+    default: null
+  },
   // mobile
   mini: {
     type: Boolean,
     default: false
-  },
-  maxWidth: {
-    type: [String, Number],
-    default: null
   }
 }
 
diff --git a/packages/vue/src/tag/src/mobile-first.vue b/packages/vue/src/tag/src/mobile-first.vue
index 14ef210bf..574835676 100644
--- a/packages/vue/src/tag/src/mobile-first.vue
+++ b/packages/vue/src/tag/src/mobile-first.vue
@@ -24,7 +24,8 @@ export default defineComponent({
     'size',
     'effect',
     'customClass',
-    'value'
+    'value',
+    'maxWidth'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api, h, classes }) as unknown as ITagApi
@@ -50,9 +51,15 @@ export default defineComponent({
       customClass
     )
 
+    const styles = { backgroundColor: color }
+
+    if (maxWidth) {
+      styles.maxWidth = maxWidth
+      styles.display = 'inline-block'
+    }
     const tagElement =
       value || (slots.default && slots.default()) ? (
-        <span data-tag="tiny-tag" class={classes} style={{ backgroundColor: color }} onClick={handleClick}>
+        <span data-tag="tiny-tag" class={classes} style={styles} onClick={handleClick}>
           {value ? <span>{value}</span> : slots.default && slots.default()}
           {closable && (
             <icon-close
diff --git a/packages/vue/src/tag/src/pc.vue b/packages/vue/src/tag/src/pc.vue
index d92195398..3eecebf96 100644
--- a/packages/vue/src/tag/src/pc.vue
+++ b/packages/vue/src/tag/src/pc.vue
@@ -32,7 +32,8 @@ export default defineComponent({
     'effect',
     'value',
     'beforeDelete',
-    'onlyIcon'
+    'onlyIcon',
+    'maxWidth'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api, h }) as unknown as ITagApi
@@ -51,7 +52,8 @@ export default defineComponent({
       disabled,
       state,
       value,
-      onlyIcon
+      onlyIcon,
+      maxWidth
     } = this
 
     let styles = {}
@@ -76,6 +78,11 @@ export default defineComponent({
       }
     }
 
+    if (maxWidth) {
+      styles.maxWidth = maxWidth
+      styles.display = 'inline-block' // 显示省略号
+    }
+
     const tagElement =
       value || (slots.default && slots.default()) ? (
         <span data-tag="tiny-tag" class={classes} style={styles} onClick={handleClick}>