From 5d29789f65801477f65fce4591492f8a5522409d Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Thu, 18 Sep 2025 14:41:27 +0800
Subject: [PATCH] =?UTF-8?q?```=20style(ant-select.scss):=20=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E5=A4=8D=E9=80=89=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E6=A0=B7=E5=BC=8F=E5=9C=A8`ant-select.scss`=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=AD=E6=B7=BB=E5=8A=A0=E4=BA=86=E5=A4=8D=E9=80=89?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E7=9A=84=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=B9=B6?=
 =?UTF-8?q?=E5=AF=B9`.ant-tag`=E5=85=83=E7=B4=A0=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E4=BA=86=E8=AF=A6=E7=BB=86=E7=9A=84=E6=A0=B7=E5=BC=8F=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=EF=BC=8C=E5=8C=85=E6=8B=AC=E5=86=85=E8=BE=B9=E8=B7=9D?=
 =?UTF-8?q?=E3=80=81=E8=BE=B9=E6=A1=86=E5=8D=8A=E5=BE=84=E3=80=81=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E8=89=B2=E7=AD=89=E3=80=82=E5=90=8C=E6=97=B6=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E4=BA=86`.ant-tag=20.anticon-close`=E7=9A=84=E5=AD=97?=
 =?UTF-8?q?=E4=BD=93=E5=A4=A7=E5=B0=8F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor(index.vue): 修改标签组件的渲染逻辑

- 在`add-raw-material-drawer/index.vue`和`edit-raw-material-modal/index.vue`中移除了`maxTagTextLength`属性。
- 为长标签增加了包裹`div`，并调整了其样式。
- 对于超过5个字符的标签文本，使用`Tooltip`显示完整内容，并截断显示前5个字符后加上省略号。
- 调整了`table/index.vue`中标签的渲染方式，对于长度超过5个字符的标签使用`Tooltip`展示完整内容。
- 在`add-raw-material-drawer/style.scss`中注释掉了`.ant-select-selection-overflow-item`的最大宽度设置。
```
---
 src/styles/components/ant-select.scss         | 21 ++++++++++
 .../add-raw-material-drawer/index.vue         | 37 +++++++++--------
 .../add-raw-material-drawer/style.scss        |  6 +--
 .../edit-raw-material-modal/index.vue         | 40 ++++++++++---------
 .../raw-material/components/table/index.vue   | 11 +++--
 5 files changed, 71 insertions(+), 44 deletions(-)

diff --git a/src/styles/components/ant-select.scss b/src/styles/components/ant-select.scss
index 71073bd..708f987 100644
--- a/src/styles/components/ant-select.scss
+++ b/src/styles/components/ant-select.scss
@@ -74,6 +74,7 @@
     }
   }
 
+  // 复选
   &.ant-select-multiple {
     .ant-select-selector {
       height: fit-content !important;
@@ -92,6 +93,22 @@
             color: #737478;
           }
         }
+
+        .ant-tag {
+          padding: 1px 8px;
+          border-radius: 4px;
+          background: var(--BG-300, #E6E6E8);
+          color: var(--Text-1, #211F24);
+          font-family: $font-family-regular;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px;
+
+          .anticon-close {
+            font-size: 12px;
+          }
+        }
       }
     }
 
@@ -119,6 +136,10 @@
             }
           }
 
+          .ant-tag {
+            font-size: 12px;
+            line-height: 20px;
+          }
         }
       }
     }
diff --git a/src/views/material-center/components/raw-material/components/add-raw-material-drawer/index.vue b/src/views/material-center/components/raw-material/components/add-raw-material-drawer/index.vue
index 388e1a1..ab2eec0 100644
--- a/src/views/material-center/components/raw-material/components/add-raw-material-drawer/index.vue
+++ b/src/views/material-center/components/raw-material/components/add-raw-material-drawer/index.vue
@@ -367,7 +367,6 @@ export default defineComponent({
                     showSearch
                     showArrow
                     maxTagCount={5}
-                    maxTagTextLength={5}
                     options={tagData.value}
                     optionFilterProp="name"
                     field-names={{ label: 'name', value: 'id' }}
@@ -384,25 +383,29 @@ export default defineComponent({
                         const { label, value } = val;
                         if (label.length > 5) {
                           return (
-                            <Tooltip title={label}>
-                              <Tag
-                                closable
-                                onClose={() => (record.tag_ids = record.tag_ids.filter((item) => item !== value))}
-                                class="bg-#F2F3F5 rounded-4px mr-0 px-8px !color-#55585F"
-                              >
-                                {label.slice(0, 5) + '...'}
-                              </Tag>
-                            </Tooltip>
+                            <div class="my-2px">
+                              <Tooltip title={label}>
+                                <Tag
+                                  closable
+                                  onClose={() => (record.tag_ids = record.tag_ids.filter((item) => item !== value))}
+                                  class="mr-0 !color-#55585F h-20px !lh-20px !text-12px"
+                                >
+                                  {label.slice(0, 5) + '...'}
+                                </Tag>
+                              </Tooltip>
+                            </div>
                           );
                         } else {
                           return (
-                            <Tag
-                              closable
-                              onClose={() => (record.tag_ids = record.tag_ids.filter((item) => item !== value))}
-                              class="bg-#F2F3F5 rounded-4px mr-0 px-8px !color-#55585F"
-                            >
-                              {label}
-                            </Tag>
+                            <div class="my-2px">
+                              <Tag
+                                closable
+                                onClose={() => (record.tag_ids = record.tag_ids.filter((item) => item !== value))}
+                                class="mr-0 !color-#55585F h-20px !lh-20px !text-12px"
+                              >
+                                {label}
+                              </Tag>
+                            </div>
                           );
                         }
                       },
diff --git a/src/views/material-center/components/raw-material/components/add-raw-material-drawer/style.scss b/src/views/material-center/components/raw-material/components/add-raw-material-drawer/style.scss
index 9814ae6..d3db885 100644
--- a/src/views/material-center/components/raw-material/components/add-raw-material-drawer/style.scss
+++ b/src/views/material-center/components/raw-material/components/add-raw-material-drawer/style.scss
@@ -9,9 +9,9 @@
   }
 
   .ant-select {
-    .ant-select-selection-overflow-item {
-      max-width: 50%;
-    }
+    //.ant-select-selection-overflow-item {
+    //  max-width: 50%;
+    //}
   }
 
   .ant-drawer-body {
diff --git a/src/views/material-center/components/raw-material/components/edit-raw-material-modal/index.vue b/src/views/material-center/components/raw-material/components/edit-raw-material-modal/index.vue
index 71beb20..a31b01f 100644
--- a/src/views/material-center/components/raw-material/components/edit-raw-material-modal/index.vue
+++ b/src/views/material-center/components/raw-material/components/edit-raw-material-modal/index.vue
@@ -1,6 +1,7 @@
 <script lang="tsx">
 import { ref } from 'vue';
 import { Button, Modal, Form, FormItem, Input, message, Select, Tag, Tooltip } from 'ant-design-vue';
+import TextOverTips from '@/components/text-over-tips';
 
 const { TextArea } = Input;
 
@@ -203,7 +204,7 @@ export default {
             <Select
               value={form.value.tag_ids}
               mode="multiple"
-              size="middle"
+              size="large"
               placeholder="请选择标签"
               allowClear
               autoClearSearchValue
@@ -213,7 +214,6 @@ export default {
               maxTagCount={5}
               optionFilterProp="name"
               options={tagOptions.value}
-              maxTagTextLength={5}
               field-names={{ label: 'name', value: 'id' }}
               onChange={handleTagChange}
               onInputKeyDown={(e) => {
@@ -228,25 +228,29 @@ export default {
                   const { label, value } = val;
                   if (label.length > 5) {
                     return (
-                      <Tooltip title={label}>
-                        <Tag
-                          closable
-                          onClose={() => (form.value.tag_ids = form.value.tag_ids.filter((item) => item !== value))}
-                          class="bg-#F2F3F5 rounded-4px mr-0 px-8px !color-#55585F"
-                        >
-                          {label.slice(0, 5) + '...'}
-                        </Tag>
-                      </Tooltip>
+                      <div class="my-2px">
+                        <Tooltip title={label}>
+                          <Tag
+                            closable
+                            onClose={() => (form.value.tag_ids = form.value.tag_ids.filter((item) => item !== value))}
+                            class="mr-0"
+                          >
+                            {`${label.slice(0, 5)}...`}
+                          </Tag>
+                        </Tooltip>
+                      </div>
                     );
                   } else {
                     return (
-                      <Tag
-                        closable
-                        onClose={() => (form.value.tag_ids = form.value.tag_ids.filter((item) => item !== value))}
-                        class="bg-#F2F3F5 rounded-4px mr-0 px-8px !color-#55585F"
-                      >
-                        {label}
-                      </Tag>
+                      <div class="my-2px">
+                        <Tag
+                          closable
+                          onClose={() => (form.value.tag_ids = form.value.tag_ids.filter((item) => item !== value))}
+                          class=" mr-0 "
+                        >
+                          {label}
+                        </Tag>
+                      </div>
                     );
                   }
                 },
diff --git a/src/views/material-center/components/raw-material/components/table/index.vue b/src/views/material-center/components/raw-material/components/table/index.vue
index a23350a..7781582 100644
--- a/src/views/material-center/components/raw-material/components/table/index.vue
+++ b/src/views/material-center/components/raw-material/components/table/index.vue
@@ -52,12 +52,11 @@
       </template>
       <template v-else-if="column.dataIndex === 'tags'" #customRender="{ record }">
         <div class="flex flex-wrap gap-4px">
-          <Tag
-            v-for="tag in record.tags"
-            :key="tag.id"
-            class="mr-0 h-22px lh-22px rounded-4px bg-#F2F3F5 max-w-76px px-8px"
-          >
-            <TextOverTips :context="tag.name" :line="1" class="cts !color-#55585F" />
+          <Tag v-for="tag in record.tags" :key="tag.id" class="mr-0 rounded-4px bg-#F2F3F5 px-8px">
+            <Tooltip v-if="tag.name.length > 5" :title="tag.name">
+              <span class="cts !color-#55585F !lh-20px"> {{ `${tag.name.slice(0, 5)}...` }} </span>
+            </Tooltip>
+            <span v-else class="cts !color-#55585F !lh-20px"> {{ tag.name }} </span>
           </Tag>
         </div>
       </template>