From c6b83d06956793ceab381eaec458c2ed2cde713a Mon Sep 17 00:00:00 2001
From: zeyu xu <286513187@qq.com>
Date: Sat, 20 Apr 2024 10:41:48 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E6=A8=A1=E5=9E=8B=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20=E6=96=87=E5=AD=97=E8=B6=85=E9=95=BF?=
 =?UTF-8?q?=E7=9A=84=E6=A0=B7=E5=BC=8F=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pages/Setting/AIModel/ModelList.razor     | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/AntSK/Pages/Setting/AIModel/ModelList.razor b/src/AntSK/Pages/Setting/AIModel/ModelList.razor
index b437665..d66637a 100644
--- a/src/AntSK/Pages/Setting/AIModel/ModelList.razor
+++ b/src/AntSK/Pages/Setting/AIModel/ModelList.razor
@@ -39,9 +39,9 @@
                             delete(async ()=>await Delete(context.Id))
                              }" Style="width:100%">
                                 <div class="listContent" style="width:100%">
-                                    <div class="listContentItem" style="width:20%">
+                                    <div class="listContentItem" style="width:15%">
                                         <b>模型描述</b>
-                                        <p>@context.ModelDescription</p>
+                                        <p title="@context.ModelDescription">@context.ModelDescription</p>
                                     </div>
                                     <div class="listContentItem" style="width:10%">
                                         <b>AI类型</b>
@@ -99,13 +99,13 @@
                                             }
                                         </p>
                                     </div>
-                                    <div class="listContentItem" style="width:20%">
+                                    <div class="listContentItem" style="width:25%">
                                         <b>模型地址</b>
-                                        <p>@context.EndPoint</p>
+                                        <p title="@context.EndPoint">@context.EndPoint</p>
                                     </div>
-                                    <div class="listContentItem" style="width:10%">
+                                    <div class="listContentItem" style="width:15%">
                                         <b>模型名称</b>
-                                        <p>@context.ModelName</p>
+                                        <p title="@context.ModelName">@context.ModelName</p>
                                     </div>
                                 </div>
                             </ListItem>
@@ -116,7 +116,31 @@
         </ChildContent>
     </PageContainer>
 </div>
+<style>
+.listContentItem {
+    width: 20%;
+    overflow: hidden; /* 防止内容溢出 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+    white-space: nowrap; /* 防止内容换行 */
+}
 
+/* 为需要显示工具提示的元素设置title属性 */
+.listContentItem p[title] {
+    cursor: pointer; /* 鼠标移动上去时显示小手势 */
+}
+
+/* 悬停样式 */
+.listContentItem:hover p[title]:before {
+    content: attr(title); /* 使用title属性的内容 */
+    position: absolute;
+    background: #333; /* 工具提示的背景颜色 */
+    color: #fff; /* 工具提示的文字颜色 */
+    padding: 4px 8px; /* 工具提示内部的填充 */
+    border-radius: 4px; /* 工具提示的边框圆角 */
+    text-align: center; /* 工具提示文字居中对齐 */
+    z-index: 1000; /* 工具提示在最顶层 */
+}
+</style>
 @code
 {
     RenderFragment edit(Action clickAction) =>@<a key="edit" @onclick="@clickAction">修改</a>;