Merge pull request #75 from AIDotNet/feature_menu

add 模型管理页面 文字超长的样式处理

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>;