From ad2fd6bf90291f6a2b49d380b8b26f2bde227506 Mon Sep 17 00:00:00 2001
From: JustSong <songquanpeng@foxmail.com>
Date: Sun, 10 Nov 2024 11:39:45 +0800
Subject: [PATCH] chore: update channel table ui

---
 web/src/components/ChannelsTable.js | 46 ++++++++++++++++-----
 web/src/components/MessagesTable.js | 63 ++++++++++++++++++++---------
 2 files changed, 80 insertions(+), 29 deletions(-)

diff --git a/web/src/components/ChannelsTable.js b/web/src/components/ChannelsTable.js
index 6174ba5..742795d 100644
--- a/web/src/components/ChannelsTable.js
+++ b/web/src/components/ChannelsTable.js
@@ -1,5 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Label, Pagination, Table } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Label,
+  Pagination,
+  Popup,
+  Table,
+} from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { API, showError, showSuccess, testChannel } from '../helpers';
 
@@ -246,24 +253,21 @@ const ChannelsTable = () => {
                   <Table.Cell>
                     <div>
                       <Button
-                        size={'small'}
-                        negative
-                        onClick={() => {
-                          manageChannel(channel.id, 'delete', idx).then();
-                        }}
-                      >
-                        删除
-                      </Button>
-                      <Button
+                        positive
                         size={'small'}
                         onClick={() => {
-                          testChannel(user.username, user.token, channel.name).then();
+                          testChannel(
+                            user.username,
+                            user.token,
+                            channel.name
+                          ).then();
                         }}
                       >
                         测试
                       </Button>
                       <Button
                         size={'small'}
+                        color={'yellow'}
                         onClick={() => {
                           manageChannel(
                             channel.id,
@@ -281,6 +285,26 @@ const ChannelsTable = () => {
                       >
                         编辑
                       </Button>
+                      <Popup
+                        trigger={
+                          <Button size='small' negative>
+                            删除
+                          </Button>
+                        }
+                        on='click'
+                        flowing
+                        hoverable
+                      >
+                        <Button
+                          size={'small'}
+                          negative
+                          onClick={() => {
+                            manageChannel(channel.id, 'delete', idx).then();
+                          }}
+                        >
+                          删除通道 {channel.name}
+                        </Button>
+                      </Popup>
                     </div>
                   </Table.Cell>
                 </Table.Row>
diff --git a/web/src/components/MessagesTable.js b/web/src/components/MessagesTable.js
index 2b7bdfa..ffd87a4 100644
--- a/web/src/components/MessagesTable.js
+++ b/web/src/components/MessagesTable.js
@@ -1,5 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Form, Label, Modal, Pagination, Table } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Label,
+  Modal,
+  Pagination,
+  Popup,
+  Table,
+} from 'semantic-ui-react';
 import { API, openPage, showError, showSuccess, showWarning } from '../helpers';
 
 import { ITEMS_PER_PAGE } from '../constants';
@@ -55,7 +63,7 @@ const MessagesTable = () => {
     title: '消息标题',
     description: '消息描述',
     content: '消息内容',
-    link: ''
+    link: '',
   }); // Message to be viewed
   const [viewModalOpen, setViewModalOpen] = useState(false);
 
@@ -210,12 +218,11 @@ const MessagesTable = () => {
 
   const insertNewMessage = (message) => {
     console.log(messages);
-    setMessages(messages => {
-        let newMessages = [message];
-        newMessages.push(...messages);
-        return newMessages;
-      }
-    );
+    setMessages((messages) => {
+      let newMessages = [message];
+      newMessages.push(...messages);
+      return newMessages;
+    });
     setActivePage(1);
   };
 
@@ -353,16 +360,28 @@ const MessagesTable = () => {
                       >
                         重发
                       </Button>
-                      <Button
-                        size={'small'}
-                        negative
-                        loading={loading}
-                        onClick={() => {
-                          deleteMessage(message.id, idx).then();
-                        }}
+
+                      <Popup
+                        trigger={
+                          <Button size='small' negative>
+                            删除
+                          </Button>
+                        }
+                        on='click'
+                        flowing
+                        hoverable
                       >
-                        删除
-                      </Button>
+                        <Button
+                          size={'small'}
+                          negative
+                          loading={loading}
+                          onClick={() => {
+                            deleteMessage(message.id, idx).then();
+                          }}
+                        >
+                          删除消息 #{message.id}
+                        </Button>
+                      </Popup>
                     </div>
                   </Table.Cell>
                 </Table.Row>
@@ -417,7 +436,15 @@ const MessagesTable = () => {
           ) : (
             ''
           )}
-          {message.content ? <div dangerouslySetInnerHTML={{ __html: marked.parse(message.content) }}></div> : ''}
+          {message.content ? (
+            <div
+              dangerouslySetInnerHTML={{
+                __html: marked.parse(message.content),
+              }}
+            ></div>
+          ) : (
+            ''
+          )}
         </Modal.Content>
         <Modal.Actions>
           <Button