feat: 优化数据管理操作栏均为顶部

web/src/components/ChannelsTable.js

@@ -17,7 +17,7 @@ import {
   renderQuota,
 } from '../helpers/render';
 import {
-  Button,
+  Button, Divider,
   Dropdown,
   Form,
   InputNumber,
@@ -764,9 +764,18 @@ const ChannelsTable = () => {
             </Space>
           </div>
         </Form>
-      <div style={{ marginTop: 10, display: 'flex' }}>
-        <Space>
-          <Space>
+        <Divider style={{marginBottom:15}}/>
+        <div
+            style={{
+              display: isMobile() ? '' : 'flex',
+              marginTop: isMobile() ? 0 : -45,
+              zIndex: 999,
+              pointerEvents: 'none',
+            }}
+        >
+          <Space
+              style={{pointerEvents: 'auto', marginTop: isMobile() ? 0 : 45}}
+          >
             <Typography.Text strong>使用ID排序</Typography.Text>
             <Switch
                 checked={idSort}
@@ -783,52 +792,6 @@ const ChannelsTable = () => {
                       });
                 }}
             ></Switch>
-          </Space>
-        </Space>
-      </div>
-
-      <Table
-        className={'channel-table'}
-        style={{ marginTop: 15 }}
-        columns={columns}
-        dataSource={pageData}
-        pagination={{
-          currentPage: activePage,
-          pageSize: pageSize,
-          total: channelCount,
-          pageSizeOpts: [10, 20, 50, 100],
-          showSizeChanger: true,
-          formatPageText: (page) => '',
-          onPageSizeChange: (size) => {
-            handlePageSizeChange(size).then();
-          },
-          onPageChange: handlePageChange,
-        }}
-        loading={loading}
-        onRow={handleRow}
-        rowSelection={
-          enableBatchDelete
-            ? {
-                onChange: (selectedRowKeys, selectedRows) => {
-                  // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
-                  setSelectedChannels(selectedRows);
-                },
-              }
-            : null
-        }
-      />
-      <div
-        style={{
-          display: isMobile() ? '' : 'flex',
-          marginTop: isMobile() ? 0 : -45,
-          zIndex: 999,
-          position: 'relative',
-          pointerEvents: 'none',
-        }}
-      >
-        <Space
-          style={{ pointerEvents: 'auto', marginTop: isMobile() ? 0 : 45 }}
-        >
             <Button
                 theme='light'
                 type='primary'
@@ -881,9 +844,6 @@ const ChannelsTable = () => {
               刷新
             </Button>
           </Space>
-        {/*<div style={{width: '100%', pointerEvents: 'none', position: 'absolute'}}>*/}
-
-        {/*</div>*/}
         </div>
         <div style={{marginTop: 20}}>
           <Space>
@@ -926,6 +886,37 @@ const ChannelsTable = () => {
             </Popconfirm>
           </Space>
         </div>
+
+        <Table
+            className={'channel-table'}
+            style={{marginTop: 15}}
+            columns={columns}
+            dataSource={pageData}
+            pagination={{
+              currentPage: activePage,
+              pageSize: pageSize,
+              total: channelCount,
+              pageSizeOpts: [10, 20, 50, 100],
+              showSizeChanger: true,
+              formatPageText: (page) => '',
+              onPageSizeChange: (size) => {
+                handlePageSizeChange(size).then();
+              },
+              onPageChange: handlePageChange,
+            }}
+            loading={loading}
+            onRow={handleRow}
+            rowSelection={
+              enableBatchDelete
+                  ? {
+                    onChange: (selectedRowKeys, selectedRows) => {
+                      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+                      setSelectedChannels(selectedRows);
+                    },
+                  }
+                  : null
+            }
+        />
       </>
   );
 };

web/src/components/LogsTable.js

@@ -767,6 +767,22 @@ const LogsTable = () => {
             <Form.Section></Form.Section>
           </>
         </Form>
+        <div style={{marginTop:10}}>
+          <Select
+              defaultValue='0'
+              style={{ width: 120 }}
+              onChange={(value) => {
+                setLogType(parseInt(value));
+                loadLogs(0, pageSize, parseInt(value));
+              }}
+          >
+            <Select.Option value='0'>全部</Select.Option>
+            <Select.Option value='1'>充值</Select.Option>
+            <Select.Option value='2'>消费</Select.Option>
+            <Select.Option value='3'>管理</Select.Option>
+            <Select.Option value='4'>系统</Select.Option>
+          </Select>
+        </div>
         <Table
           style={{ marginTop: 5 }}
           columns={columns}
@@ -786,20 +802,6 @@ const LogsTable = () => {
             onPageChange: handlePageChange,
           }}
         />
-        <Select
-          defaultValue='0'
-          style={{ width: 120 }}
-          onChange={(value) => {
-            setLogType(parseInt(value));
-            loadLogs(0, pageSize, parseInt(value));
-          }}
-        >
-          <Select.Option value='0'>全部</Select.Option>
-          <Select.Option value='1'>充值</Select.Option>
-          <Select.Option value='2'>消费</Select.Option>
-          <Select.Option value='3'>管理</Select.Option>
-          <Select.Option value='4'>系统</Select.Option>
-        </Select>
       </Layout>
     </>
   );

web/src/components/RedemptionsTable.js

@@ -10,7 +10,7 @@ import {
 import { ITEMS_PER_PAGE } from '../constants';
 import { renderQuota } from '../helpers/render';
 import {
-  Button,
+  Button, Divider,
   Form,
   Modal,
   Popconfirm,
@@ -391,29 +391,8 @@ const RedemptionsTable = () => {
           onChange={handleKeywordChange}
         />
       </Form>
-
-      <Table
-        style={{ marginTop: 20 }}
-        columns={columns}
-        dataSource={pageData}
-        pagination={{
-          currentPage: activePage,
-          pageSize: ITEMS_PER_PAGE,
-          total: tokenCount,
-          // showSizeChanger: true,
-          // pageSizeOptions: [10, 20, 50, 100],
-          formatPageText: (page) =>
-            `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${redemptions.length} 条`,
-          // onPageSizeChange: (size) => {
-          //   setPageSize(size);
-          //   setActivePage(1);
-          // },
-          onPageChange: handlePageChange,
-        }}
-        loading={loading}
-        rowSelection={rowSelection}
-        onRow={handleRow}
-      ></Table>
+      <Divider style={{margin:'5px 0 15px 0'}}/>
+      <div>
         <Button
             theme='light'
             type='primary'
@@ -444,6 +423,30 @@ const RedemptionsTable = () => {
         >
           复制所选兑换码到剪贴板
         </Button>
+      </div>
+
+      <Table
+        style={{ marginTop: 20 }}
+        columns={columns}
+        dataSource={pageData}
+        pagination={{
+          currentPage: activePage,
+          pageSize: ITEMS_PER_PAGE,
+          total: tokenCount,
+          // showSizeChanger: true,
+          // pageSizeOptions: [10, 20, 50, 100],
+          formatPageText: (page) =>
+            `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${redemptions.length} 条`,
+          // onPageSizeChange: (size) => {
+          //   setPageSize(size);
+          //   setActivePage(1);
+          // },
+          onPageChange: handlePageChange,
+        }}
+        loading={loading}
+        rowSelection={rowSelection}
+        onRow={handleRow}
+      ></Table>
     </>
   );
 };

web/src/components/TokensTable.js

@@ -10,7 +10,7 @@ import {
 import { ITEMS_PER_PAGE } from '../constants';
 import {renderGroup, renderQuota} from '../helpers/render';
 import {
-  Button,
+  Button, Divider,
   Dropdown,
   Form,
   Modal,
@@ -596,29 +596,8 @@ const TokensTable = () => {
           查询
         </Button>
       </Form>
-
-      <Table
-        style={{ marginTop: 20 }}
-        columns={columns}
-        dataSource={pageData}
-        pagination={{
-          currentPage: activePage,
-          pageSize: pageSize,
-          total: tokenCount,
-          showSizeChanger: true,
-          pageSizeOptions: [10, 20, 50, 100],
-          formatPageText: (page) =>
-            `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${tokens.length} 条`,
-          onPageSizeChange: (size) => {
-            setPageSize(size);
-            setActivePage(1);
-          },
-          onPageChange: handlePageChange,
-        }}
-        loading={loading}
-        rowSelection={rowSelection}
-        onRow={handleRow}
-      ></Table>
+      <Divider style={{margin:'15px 0'}}/>
+      <div>
         <Button
             theme='light'
             type='primary'
@@ -650,6 +629,30 @@ const TokensTable = () => {
         >
           复制所选令牌到剪贴板
         </Button>
+      </div>
+
+      <Table
+        style={{ marginTop: 20 }}
+        columns={columns}
+        dataSource={pageData}
+        pagination={{
+          currentPage: activePage,
+          pageSize: pageSize,
+          total: tokenCount,
+          showSizeChanger: true,
+          pageSizeOptions: [10, 20, 50, 100],
+          formatPageText: (page) =>
+            `第 ${page.currentStart} - ${page.currentEnd} 条，共 ${tokens.length} 条`,
+          onPageSizeChange: (size) => {
+            setPageSize(size);
+            setActivePage(1);
+          },
+          onPageChange: handlePageChange,
+        }}
+        loading={loading}
+        rowSelection={rowSelection}
+        onRow={handleRow}
+      ></Table>
     </>
   );
 };

web/src/components/UsersTable.js

@@ -476,10 +476,18 @@ const UsersTable = () => {
             type='primary'
             htmlType='submit'
             className='btn-margin-right'
-            style={{ marginRight: 8 }}
           >
             查询
           </Button>
+            <Button
+                theme='light'
+                type='primary'
+                onClick={() => {
+                  setShowAddUser(true);
+                }}
+            >
+              添加用户
+            </Button>
           </Space>
         </div>
       </Form>
@@ -496,16 +504,6 @@ const UsersTable = () => {
         }}
         loading={loading}
       />
-      <Button
-        theme='light'
-        type='primary'
-        style={{ marginRight: 8 }}
-        onClick={() => {
-          setShowAddUser(true);
-        }}
-      >
-        添加用户
-      </Button>
     </>
   );
 };