From 44512d3c2850b84ddd4cfff1aa97e16915844245 Mon Sep 17 00:00:00 2001
From: CalciumIon <1808837298@qq.com>
Date: Thu, 12 Dec 2024 16:35:13 +0800
Subject: [PATCH] feat: Enhance group label display in Playground component

- Updated the group selection input to truncate long labels on mobile devices, ensuring better readability and a cleaner interface.
- Implemented a conditional label adjustment that shortens group names exceeding 18 characters, appending '...' for clarity.
---
 web/src/pages/Playground/Playground.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/Playground/Playground.js b/web/src/pages/Playground/Playground.js
index 00a2eded..4f708d26 100644
--- a/web/src/pages/Playground/Playground.js
+++ b/web/src/pages/Playground/Playground.js
@@ -326,7 +326,12 @@ const Playground = () => {
               }}
               value={inputs.group}
               autoComplete='new-password'
-              optionList={groups}
+              optionList={groups.map((group) => ({
+                ...group,
+                label: styleState.isMobile && group.label.length > 18
+                  ? group.label.substring(0, 18) + '...'
+                  : group.label,
+              }))}
             />
             <div style={{ marginTop: 10 }}>
               <Typography.Text strong>模型：</Typography.Text>