From b655d6f38c3a670025c9b7614a010fc842186fc9 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Tue, 18 Mar 2025 19:34:49 -0700
Subject: [PATCH 1/4] fix(tag):  tag add maxWidth prop,  and select add
 maxTagWidth prop

---
 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    | 10 ++++++++--
 packages/vue/src/tag/src/pc.vue              | 10 ++++++++--
 6 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/packages/vue/src/select/src/index.ts b/packages/vue/src/select/src/index.ts
index e614bc7497..d0a306d123 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 28555cd953..92b102901b 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 fdec617249..1b99ce6760 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 1dce770d4b..4c55ac2ded 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 14ef210bfd..d034e3a841 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,14 @@ export default defineComponent({
       customClass
     )
 
+    const styles = { backgroundColor: color }
+
+    if (maxWidth) {
+      styles.maxWidth = maxWidth
+    }
     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 d921953983..9db3a687fe 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,10 @@ export default defineComponent({
       }
     }
 
+    if (maxWidth) {
+      styles.maxWidth = maxWidth
+    }
+
     const tagElement =
       value || (slots.default && slots.default()) ? (
         <span data-tag="tiny-tag" class={classes} style={styles} onClick={handleClick}>

From 475078af36e48ec973638b626d7a3425dc5df027 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Tue, 18 Mar 2025 20:02:43 -0700
Subject: [PATCH 2/4] fix(tag): add  documents for new props-- maxWidth

---
 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/src/tag/index.less             |  4 ++++
 packages/vue/src/tag/src/mobile-first.vue     |  1 +
 packages/vue/src/tag/src/pc.vue               |  1 +
 9 files changed, 94 insertions(+)
 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 719095a888..c48209760a 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 f88a5df7ba..e975ec0090 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 0000000000..577a86e602
--- /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 0000000000..752a34c438
--- /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 0000000000..e4cc16197f
--- /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 69190b3858..54be68cc6b 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/src/tag/index.less b/packages/theme/src/tag/index.less
index 9862637001..831832d003 100644
--- a/packages/theme/src/tag/index.less
+++ b/packages/theme/src/tag/index.less
@@ -18,7 +18,11 @@
 .@{tag-prefix-cls} {
   .inject-Tag-vars();
 
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
   display: inline-flex;
+
   align-items: center;
   vertical-align: middle;
   height: fit-content; // 避免 flex时，高度拉伸
diff --git a/packages/vue/src/tag/src/mobile-first.vue b/packages/vue/src/tag/src/mobile-first.vue
index d034e3a841..574835676a 100644
--- a/packages/vue/src/tag/src/mobile-first.vue
+++ b/packages/vue/src/tag/src/mobile-first.vue
@@ -55,6 +55,7 @@ export default defineComponent({
 
     if (maxWidth) {
       styles.maxWidth = maxWidth
+      styles.display = 'inline-block'
     }
     const tagElement =
       value || (slots.default && slots.default()) ? (
diff --git a/packages/vue/src/tag/src/pc.vue b/packages/vue/src/tag/src/pc.vue
index 9db3a687fe..3eecebf96b 100644
--- a/packages/vue/src/tag/src/pc.vue
+++ b/packages/vue/src/tag/src/pc.vue
@@ -80,6 +80,7 @@ export default defineComponent({
 
     if (maxWidth) {
       styles.maxWidth = maxWidth
+      styles.display = 'inline-block' // 显示省略号
     }
 
     const tagElement =

From 564c2d15e035c17dd72e78333f81b4a15f825032 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Tue, 18 Mar 2025 20:05:12 -0700
Subject: [PATCH 3/4] fix(theme-saas): add ellipsis to tag

---
 packages/theme-saas/src/tag/index.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/theme-saas/src/tag/index.less b/packages/theme-saas/src/tag/index.less
index a3042c71b8..29ec126555 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'),

From 6f48d7f6d45d282bb1dfbf268197669d9734c2e9 Mon Sep 17 00:00:00 2001
From: shenjunjian <40288193@qq.com>
Date: Thu, 20 Mar 2025 18:22:03 -0700
Subject: [PATCH 4/4] fix(e2e): fix reviews

---
 examples/sites/demos/pc/app/tag/max-width.spec.ts | 2 +-
 packages/theme/src/tag/index.less                 | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/examples/sites/demos/pc/app/tag/max-width.spec.ts b/examples/sites/demos/pc/app/tag/max-width.spec.ts
index 752a34c438..ffaff39f99 100644
--- a/examples/sites/demos/pc/app/tag/max-width.spec.ts
+++ b/examples/sites/demos/pc/app/tag/max-width.spec.ts
@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('各型号尺寸是否正常', async ({ page }) => {
+test('测试最大宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('tag#max-width')
 
diff --git a/packages/theme/src/tag/index.less b/packages/theme/src/tag/index.less
index 831832d003..8bfeccba03 100644
--- a/packages/theme/src/tag/index.less
+++ b/packages/theme/src/tag/index.less
@@ -18,17 +18,13 @@
 .@{tag-prefix-cls} {
   .inject-Tag-vars();
 
-  text-overflow: ellipsis;
-  overflow: hidden;
-  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; // 新增约束，避免太长的标签
+  max-width: 200px; // 默认约束，避免太长的标签，用户还可以再通过属性，覆盖到style上.
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;