From b44f0519a04a5fc9384ff98e554e57fcb9a82b26 Mon Sep 17 00:00:00 2001
From: JustSong <songquanpeng@foxmail.com>
Date: Mon, 15 May 2023 10:41:48 +0800
Subject: [PATCH] feat: double check before deletion

---
 web/src/components/ChannelsTable.js | 28 +++++++++++++++++++---------
 web/src/components/TokensTable.js   | 28 +++++++++++++++++++---------
 2 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/web/src/components/ChannelsTable.js b/web/src/components/ChannelsTable.js
index 793adedb..e31d48d9 100644
--- a/web/src/components/ChannelsTable.js
+++ b/web/src/components/ChannelsTable.js
@@ -1,5 +1,5 @@
 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, copy, showError, showSuccess, timestamp2string } from '../helpers';
 
@@ -244,15 +244,25 @@ const ChannelsTable = () => {
                   <Table.Cell>{renderTimestamp(channel.accessed_time)}</Table.Cell>
                   <Table.Cell>
                     <div>
-                      <Button
-                        size={'small'}
-                        negative
-                        onClick={() => {
-                          manageChannel(channel.id, 'delete', idx);
-                        }}
+                      <Popup
+                        trigger={
+                          <Button size='small' negative>
+                            删除
+                          </Button>
+                        }
+                        on='click'
+                        flowing
+                        hoverable
                       >
-                        删除
-                      </Button>
+                        <Button
+                          negative
+                          onClick={() => {
+                            manageChannel(channel.id, 'delete', idx);
+                          }}
+                        >
+                          删除渠道 {channel.name}
+                        </Button>
+                      </Popup>
                       <Button
                         size={'small'}
                         onClick={() => {
diff --git a/web/src/components/TokensTable.js b/web/src/components/TokensTable.js
index 2e1556aa..dca88ffd 100644
--- a/web/src/components/TokensTable.js
+++ b/web/src/components/TokensTable.js
@@ -1,5 +1,5 @@
 import React, { useEffect, 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 { Link } from 'react-router-dom';
 import { API, copy, showError, showSuccess, showWarning, timestamp2string } from '../helpers';
 
@@ -283,15 +283,25 @@ const TokensTable = () => {
                         }}>
                         充值
                       </Button>
-                      <Button
-                        size={'small'}
-                        negative
-                        onClick={() => {
-                          manageToken(token.id, 'delete', idx);
-                        }}
+                      <Popup
+                        trigger={
+                          <Button size='small' negative>
+                            删除
+                          </Button>
+                        }
+                        on='click'
+                        flowing
+                        hoverable
                       >
-                        删除
-                      </Button>
+                        <Button
+                          negative
+                          onClick={() => {
+                            manageToken(token.id, 'delete', idx);
+                          }}
+                        >
+                          删除令牌 {token.name}
+                        </Button>
+                      </Popup>
                       <Button
                         size={'small'}
                         onClick={() => {