Browse Source

🔧 style(ui): Inline tag edit action in ChannelsTable

• Removed the dropdown menu previously used for tag-level operations.
• Added a standalone “Edit” button directly after the “Disable All” button, reducing the number of clicks required to edit a tag group.
• Deleted the now-unused `IconEdit` import and its icon reference.

This streamlines the tag management flow and keeps the UI cleaner and more accessible.
t0ng7u 8 months ago
parent
commit
277645db50
1 changed files with 13 additions and 37 deletions
  1. 13 37
      web/src/components/table/ChannelsTable.js

+ 13 - 37
web/src/components/table/ChannelsTable.js

@@ -41,7 +41,7 @@ import {
   Form,
   Form,
   Tabs,
   Tabs,
   TabPane,
   TabPane,
-  Select,
+  Select
 } from '@douyinfe/semi-ui';
 } from '@douyinfe/semi-ui';
 import {
 import {
   IllustrationNoResult,
   IllustrationNoResult,
@@ -51,14 +51,8 @@ import EditChannel from '../../pages/Channel/EditChannel.js';
 import {
 import {
   IconTreeTriangleDown,
   IconTreeTriangleDown,
   IconPlus,
   IconPlus,
-  IconRefresh,
-  IconSetting,
-  IconDescend,
   IconSearch,
   IconSearch,
-  IconEdit,
   IconDelete,
   IconDelete,
-  IconStop,
-  IconPlay,
   IconMore,
   IconMore,
   IconCopy,
   IconCopy,
   IconSmallTriangleRight
   IconSmallTriangleRight
@@ -557,7 +551,6 @@ const ChannelsTable = () => {
                   type='warning'
                   type='warning'
                   size="small"
                   size="small"
                   className="!rounded-full"
                   className="!rounded-full"
-                  icon={<IconStop />}
                   onClick={() => manageChannel(record.id, 'disable', record)}
                   onClick={() => manageChannel(record.id, 'disable', record)}
                 >
                 >
                   {t('禁用')}
                   {t('禁用')}
@@ -568,7 +561,6 @@ const ChannelsTable = () => {
                   type='secondary'
                   type='secondary'
                   size="small"
                   size="small"
                   className="!rounded-full"
                   className="!rounded-full"
-                  icon={<IconPlay />}
                   onClick={() => manageChannel(record.id, 'enable', record)}
                   onClick={() => manageChannel(record.id, 'enable', record)}
                 >
                 >
                   {t('启用')}
                   {t('启用')}
@@ -580,7 +572,6 @@ const ChannelsTable = () => {
                 type='tertiary'
                 type='tertiary'
                 size="small"
                 size="small"
                 className="!rounded-full"
                 className="!rounded-full"
-                icon={<IconEdit />}
                 onClick={() => {
                 onClick={() => {
                   setEditingChannel(record);
                   setEditingChannel(record);
                   setShowEdit(true);
                   setShowEdit(true);
@@ -605,19 +596,7 @@ const ChannelsTable = () => {
             </Space>
             </Space>
           );
           );
         } else {
         } else {
-          // 标签操作的下拉菜单项
-          const tagMenuItems = [
-            {
-              node: 'item',
-              name: t('编辑'),
-              icon: <IconEdit />,
-              onClick: () => {
-                setShowEditTag(true);
-                setEditingTag(record.key);
-              },
-            },
-          ];
-
+          // 标签操作按钮
           return (
           return (
             <Space wrap>
             <Space wrap>
               <Button
               <Button
@@ -625,7 +604,6 @@ const ChannelsTable = () => {
                 type='secondary'
                 type='secondary'
                 size="small"
                 size="small"
                 className="!rounded-full"
                 className="!rounded-full"
-                icon={<IconPlay />}
                 onClick={() => manageTag(record.key, 'enable')}
                 onClick={() => manageTag(record.key, 'enable')}
               >
               >
                 {t('启用全部')}
                 {t('启用全部')}
@@ -635,24 +613,22 @@ const ChannelsTable = () => {
                 type='warning'
                 type='warning'
                 size="small"
                 size="small"
                 className="!rounded-full"
                 className="!rounded-full"
-                icon={<IconStop />}
                 onClick={() => manageTag(record.key, 'disable')}
                 onClick={() => manageTag(record.key, 'disable')}
               >
               >
                 {t('禁用全部')}
                 {t('禁用全部')}
               </Button>
               </Button>
-              <Dropdown
-                trigger='click'
-                position='bottomRight'
-                menu={tagMenuItems}
+              <Button
+                theme='light'
+                type='tertiary'
+                size="small"
+                className="!rounded-full"
+                onClick={() => {
+                  setShowEditTag(true);
+                  setEditingTag(record.key);
+                }}
               >
               >
-                <Button
-                  icon={<IconMore />}
-                  theme='light'
-                  type='tertiary'
-                  size="small"
-                  className="!rounded-full"
-                />
-              </Dropdown>
+                {t('编辑')}
+              </Button>
             </Space>
             </Space>
           );
           );
         }
         }