From e863be7ec3abb32c61403a7a0cfe89de30cf3561 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Mon, 11 Aug 2025 18:27:32 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20ui:=20Add=20CSS=20ellipsis=20+=20To?=
 =?UTF-8?q?oltip=20for=20SelectableButtonGroup;=20keep=20Tag=20intact?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Truncate long labels via pure CSS and always show full text in a Tooltip
- Ensure the right-side Tag is never truncated and remains fully visible
- Simplify implementation: remove overflow detection and ResizeObserver
- Use minimal markup with sbg-button/sbg-inner/sbg-label to enable shrinking
- Add global rules to allow `.semi-button-content` to shrink and ellipsize

Files:
- web/src/components/common/ui/SelectableButtonGroup.jsx
- web/src/index.css

No API changes; visuals improved and code complexity reduced.
---
 .../common/ui/SelectableButtonGroup.jsx       | 52 ++++++++-----------
 web/src/index.css                             | 21 ++++++++
 2 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/web/src/components/common/ui/SelectableButtonGroup.jsx b/web/src/components/common/ui/SelectableButtonGroup.jsx
index 591634a5..ebc900f1 100644
--- a/web/src/components/common/ui/SelectableButtonGroup.jsx
+++ b/web/src/components/common/ui/SelectableButtonGroup.jsx
@@ -17,10 +17,10 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';
-import { Divider, Button, Tag, Row, Col, Collapsible, Checkbox, Skeleton } from '@douyinfe/semi-ui';
+import { Divider, Button, Tag, Row, Col, Collapsible, Checkbox, Skeleton, Tooltip } from '@douyinfe/semi-ui';
 import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
 
 /**
@@ -57,8 +57,6 @@ const SelectableButtonGroup = ({
   const needCollapse = collapsible && items.length > perRow * maxVisibleRows;
   const showSkeleton = useMinimumLoadingTime(loading);
 
-  const contentRef = useRef(null);
-
   const maskStyle = isOpen
     ? {}
     : {
@@ -131,7 +129,7 @@ const SelectableButtonGroup = ({
   };
 
   const contentElement = showSkeleton ? renderSkeletonButtons() : (
-    <Row gutter={[8, 8]} style={{ lineHeight: '32px', ...style }} ref={contentRef}>
+    <Row gutter={[8, 8]} style={{ lineHeight: '32px', ...style }}>
       {items.map((item) => {
         const isDisabled = item.disabled || (typeof item.tagCount === 'number' && item.tagCount === 0);
         const isActive = Array.isArray(activeValue)
@@ -152,6 +150,7 @@ const SelectableButtonGroup = ({
                 theme={isActive ? 'light' : 'outline'}
                 type={isActive ? 'primary' : 'tertiary'}
                 disabled={isDisabled}
+                className="sbg-button"
                 icon={
                   <Checkbox
                     checked={isActive}
@@ -162,19 +161,15 @@ const SelectableButtonGroup = ({
                 }
                 style={{ width: '100%', cursor: 'default' }}
               >
-                {item.icon && (
-                  <span style={{ marginRight: 4 }}>{item.icon}</span>
-                )}
-                <span style={{ marginRight: item.tagCount !== undefined ? 4 : 0 }}>{item.label}</span>
-                {item.tagCount !== undefined && (
-                  <Tag
-                    color='white'
-                    shape="circle"
-                    size="small"
-                  >
-                    {item.tagCount}
-                  </Tag>
-                )}
+                <div className="sbg-content">
+                  {item.icon && (<span className="sbg-icon">{item.icon}</span>)}
+                  <Tooltip content={item.label}>
+                    <span className="sbg-ellipsis">{item.label}</span>
+                  </Tooltip>
+                  {item.tagCount !== undefined && (
+                    <Tag className="sbg-tag" color='white' shape="circle" size="small">{item.tagCount}</Tag>
+                  )}
+                </div>
               </Button>
             </Col>
           );
@@ -192,20 +187,19 @@ const SelectableButtonGroup = ({
               onClick={() => onChange(item.value)}
               theme={isActive ? 'light' : 'outline'}
               type={isActive ? 'primary' : 'tertiary'}
-              icon={item.icon}
               disabled={isDisabled}
+              className="sbg-button"
               style={{ width: '100%' }}
             >
-              <span style={{ marginRight: item.tagCount !== undefined ? 4 : 0 }}>{item.label}</span>
-              {item.tagCount !== undefined && (
-                <Tag
-                  color='white'
-                  shape="circle"
-                  size="small"
-                >
-                  {item.tagCount}
-                </Tag>
-              )}
+              <div className="sbg-content">
+                {item.icon && (<span className="sbg-icon">{item.icon}</span>)}
+                <Tooltip content={item.label}>
+                  <span className="sbg-ellipsis">{item.label}</span>
+                </Tooltip>
+                {item.tagCount !== undefined && (
+                  <Tag className="sbg-tag" color='white' shape="circle" size="small">{item.tagCount}</Tag>
+                )}
+              </div>
             </Button>
           </Col>
         );
diff --git a/web/src/index.css b/web/src/index.css
index f0249303..ab6673b9 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -289,6 +289,27 @@ code {
 }
 
 /* ==================== 组件特定样式 ==================== */
+/* SelectableButtonGroup */
+.sbg-button .semi-button-content {
+  min-width: 0 !important;
+}
+
+.sbg-content {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+}
+
+.sbg-ellipsis {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 /* Tabs组件样式 */
 .semi-tabs-content {
   padding: 0 !important;