[fix]bug

Author: piupuer

package.json

@@ -60,7 +60,7 @@
     "react-redux": "^7.2.4",
     "react-router-dom": "^6.3.0",
     "tdesign-icons-react": "^0.4.3",
-    "tdesign-react": "^1.10.4",
+    "tdesign-react": "^1.12.1",
     "tvision-color": "^1.5.0",
     "uuid": "^11.0.5"
   },

src/pages/Detail/Secondary/index.module.less

@@ -7,18 +7,37 @@
     .listItem {
       cursor: pointer;
       padding: 13px 24px 13px 0;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+
       &:hover {
         background-color: var(--td-bg-color-container-hover);
       }
+
       &:hover .createTime {
         display: none;
       }
+
+      .createTime {
+        position: absolute;
+        right: 24px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
       .action {
         display: none;
+        position: absolute;
+        right: 24px;
+        top: 50%;
+        transform: translateY(-50%);
       }
+
       &:hover .action {
         display: block;
       }
+
       &:after {
         content: "";
         position: absolute;
@@ -29,6 +48,7 @@
         background: var(--td-border-level-1-color);
       }
     }
+
     .content {
       margin: 0;
       font-size: 14px;
@@ -38,15 +58,19 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      padding-right: 120px; /* Make room for the action buttons */
     }
+
     .tag {
       margin-right: 8px;
     }
+
     .noData {
       text-align: center;
       height: 28px;
       line-height: 28px;
     }
+
     .unread {
       color: var(--td-brand-color-8);
     }

src/pages/Detail/Secondary/index.tsx

@@ -26,50 +26,49 @@ const MsgList = memo((props: IMsgListProps) => {
   const { list, onUpdate, onDelete } = props;
   return (
     <List className={Style.msgList}>
-      {list?.map((item) => (
-        <ListItem
-          className={Style.listItem}
-          key={item.id}
-          action={
-            <li>
-              <div className={Style.createTime}>{item.createTime}</div>
-              <div className={Style.action}>
-                <Row gutter={8}>
-                  <Col>
-                    {item.status === 1 && (
-                      <Popup trigger='hover' showArrow content='设为已读'>
-                        <AddRectangleIcon onClick={() => onUpdate(item, 2)} />
-                      </Popup>
-                    )}
-                    {item.status === 2 && (
-                      <Popup trigger='hover' showArrow content='设为未读'>
-                        <ChatIcon onClick={() => onUpdate(item, 1)} />
-                      </Popup>
-                    )}
-                  </Col>
-                  <Col>
-                    <Popup trigger='hover' showArrow content='删除通知'>
-                      <DeleteIcon onClick={() => onDelete(item)} />
-                    </Popup>
-                  </Col>
-                </Row>
-              </div>
-            </li>
-          }
-        >
-          <div
-            className={classnames(Style.content, {
-              [Style.unread]: item.status === 1,
-            })}
+      {list && list.length > 0 ? (
+        list.map((item) => (
+          <ListItem
+            className={Style.listItem}
+            key={item.id}
           >
-            <Tag variant='light' theme={typeMap[item.type]} className={Style.tag}>
-              {item.tag}
-            </Tag>
-            {item.content}
-          </div>
-        </ListItem>
-      ))}
-      {list.length === 0 && <div className={Style.noData}>暂无数据</div>}
+            <div
+              className={classnames(Style.content, {
+                [Style.unread]: item.status === 1,
+              })}
+            >
+              <Tag variant='light' theme={typeMap[item.type]} className={Style.tag}>
+                {item.tag}
+              </Tag>
+              {item.content}
+            </div>
+            <div className={Style.createTime}>{item.createTime}</div>
+            <div className={Style.action}>
+              <Row gutter={8}>
+                <Col>
+                  {item.status === 1 && (
+                    <Popup trigger='hover' showArrow content='设为已读'>
+                      <AddRectangleIcon onClick={() => onUpdate(item, 2)} />
+                    </Popup>
+                  )}
+                  {item.status === 2 && (
+                    <Popup trigger='hover' showArrow content='设为未读'>
+                      <ChatIcon onClick={() => onUpdate(item, 1)} />
+                    </Popup>
+                  )}
+                </Col>
+                <Col>
+                  <Popup trigger='hover' showArrow content='删除通知'>
+                    <DeleteIcon onClick={() => onDelete(item)} />
+                  </Popup>
+                </Col>
+              </Row>
+            </div>
+          </ListItem>
+        ))
+      ) : (
+        <div className={Style.noData}>暂无数据</div>
+      )}
     </List>
   );
 });