修复令牌bug

web/src/App.js

@@ -89,215 +89,217 @@ function App() {
 
   return (
     <Layout>
-        <Routes>
-            <Route
-                path='/'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <Home />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/channel'
-                element={
-                    <PrivateRoute>
-                        <Channel />
-                    </PrivateRoute>
-                }
-            />
-            <Route
-                path='/channel/edit/:id'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <EditChannel />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/channel/add'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <EditChannel />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/token'
-                element={
-                    <PrivateRoute>
-                        <Token />
-                    </PrivateRoute>
-                }
-            />
-            <Route
-                path='/token/edit/:id'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <EditToken />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/token/add'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <EditToken />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/redemption'
-                element={
-                    <PrivateRoute>
-                        <Redemption />
-                    </PrivateRoute>
-                }
-            />
-            <Route
-                path='/redemption/edit/:id'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <EditRedemption />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/redemption/add'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <EditRedemption />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/user'
-                element={
-                    <PrivateRoute>
-                        <User />
-                    </PrivateRoute>
-                }
-            />
-            <Route
-                path='/user/edit/:id'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <EditUser />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/user/edit'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <EditUser />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/user/add'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <AddUser />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/user/reset'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <PasswordResetConfirm />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/login'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <LoginForm />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/register'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <RegisterForm />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/reset'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <PasswordResetForm />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/oauth/github'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <GitHubOAuth />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/setting'
-                element={
-                    <PrivateRoute>
+        <Layout.Content>
+            <Routes>
+                <Route
+                    path='/'
+                    element={
                         <Suspense fallback={<Loading></Loading>}>
-                            <Setting />
+                            <Home />
                         </Suspense>
-                    </PrivateRoute>
-                }
-            />
-            <Route
-                path='/topup'
-                element={
-                    <PrivateRoute>
+                    }
+                />
+                <Route
+                    path='/channel'
+                    element={
+                        <PrivateRoute>
+                            <Channel />
+                        </PrivateRoute>
+                    }
+                />
+                <Route
+                    path='/channel/edit/:id'
+                    element={
                         <Suspense fallback={<Loading></Loading>}>
-                            <TopUp />
+                            <EditChannel />
                         </Suspense>
-                    </PrivateRoute>
-                }
-            />
-            <Route
-                path='/log'
-                element={
-                    <PrivateRoute>
-                        <Log />
-                    </PrivateRoute>
-                }
-            />
-            <Route
-                path='/midjourney'
-                element={
-                    <PrivateRoute>
-                        <Midjourney />
-                    </PrivateRoute>
-                }
-            />
-            <Route
-                path='/about'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <About />
-                    </Suspense>
-                }
-            />
-            <Route
-                path='/chat'
-                element={
-                    <Suspense fallback={<Loading></Loading>}>
-                        <Chat />
-                    </Suspense>
-                }
-            />
-            <Route path='*' element={
-                <NotFound />
-            } />
-        </Routes>
+                    }
+                />
+                <Route
+                    path='/channel/add'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <EditChannel />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/token'
+                    element={
+                        <PrivateRoute>
+                            <Token />
+                        </PrivateRoute>
+                    }
+                />
+                <Route
+                    path='/token/edit/:id'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <EditToken />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/token/add'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <EditToken />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/redemption'
+                    element={
+                        <PrivateRoute>
+                            <Redemption />
+                        </PrivateRoute>
+                    }
+                />
+                <Route
+                    path='/redemption/edit/:id'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <EditRedemption />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/redemption/add'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <EditRedemption />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/user'
+                    element={
+                        <PrivateRoute>
+                            <User />
+                        </PrivateRoute>
+                    }
+                />
+                <Route
+                    path='/user/edit/:id'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <EditUser />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/user/edit'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <EditUser />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/user/add'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <AddUser />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/user/reset'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <PasswordResetConfirm />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/login'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <LoginForm />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/register'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <RegisterForm />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/reset'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <PasswordResetForm />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/oauth/github'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <GitHubOAuth />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/setting'
+                    element={
+                        <PrivateRoute>
+                            <Suspense fallback={<Loading></Loading>}>
+                                <Setting />
+                            </Suspense>
+                        </PrivateRoute>
+                    }
+                />
+                <Route
+                    path='/topup'
+                    element={
+                        <PrivateRoute>
+                            <Suspense fallback={<Loading></Loading>}>
+                                <TopUp />
+                            </Suspense>
+                        </PrivateRoute>
+                    }
+                />
+                <Route
+                    path='/log'
+                    element={
+                        <PrivateRoute>
+                            <Log />
+                        </PrivateRoute>
+                    }
+                />
+                <Route
+                    path='/midjourney'
+                    element={
+                        <PrivateRoute>
+                            <Midjourney />
+                        </PrivateRoute>
+                    }
+                />
+                <Route
+                    path='/about'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <About />
+                        </Suspense>
+                    }
+                />
+                <Route
+                    path='/chat'
+                    element={
+                        <Suspense fallback={<Loading></Loading>}>
+                            <Chat />
+                        </Suspense>
+                    }
+                />
+                <Route path='*' element={
+                    <NotFound />
+                } />
+            </Routes>
+        </Layout.Content>
     </Layout>
   );
 }

web/src/components/LogsTable.js

@@ -71,7 +71,7 @@ const LogsTable = () => {
                     isAdminUser ?
                         record.type === 0 || record.type === 2 ?
                             <div>
-                                {<Tag color={stringToColor(text)} size='large'> {text} </Tag>}
+                                {<Tag color={colors[parseInt(text) % colors.length]} size='large'> {text} </Tag>}
                             </div>
                             :
                             <></>

web/src/components/TokensTable.js

@@ -187,21 +187,21 @@ const TokensTable = () => {
 
     const closeEdit = () => {
         setShowEdit(false);
-        setEditingToken({
-            id: undefined,
-        });
+        // setEditingToken({
+        //     id: undefined,
+        // });
     }
 
     const setTokensFormat = (tokens) => {
         setTokens(tokens);
-        if (tokens.length === ITEMS_PER_PAGE) {
+        if (tokens.length >= ITEMS_PER_PAGE) {
             setTokenCount(tokens.length + ITEMS_PER_PAGE);
         } else {
             setTokenCount(tokens.length);
         }
     }
 
-    // let pageData = tokens.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE);
+    let pageData = tokens.slice((activePage - 1) * ITEMS_PER_PAGE, activePage * ITEMS_PER_PAGE);
     const loadTokens = async (startIdx) => {
         setLoading(true);
         const res = await API.get(`/api/token/?p=${startIdx}`);
@@ -450,11 +450,12 @@ const TokensTable = () => {
                         onClick={searchTokens} style={{marginRight: 8}}>查询</Button>
             </Form>
 
-            <Table style={{marginTop: 20}} columns={columns} dataSource={tokens} pagination={{
+            <Table style={{marginTop: 20}} columns={columns} dataSource={pageData} pagination={{
                 currentPage: activePage,
                 pageSize: ITEMS_PER_PAGE,
                 total: tokenCount,
-                pageSizeOpts: [10, 20, 50, 100],
+                showSizeChanger: true,
+                pageSizeOptions: [10, 20, 50, 100],
                 onPageChange: handlePageChange,
             }} loading={loading} rowSelection={rowSelection}>
             </Table>

web/src/index.css

@@ -8,6 +8,15 @@ body {
     scrollbar-width: none;
     color: var(--semi-color-text-0) !important;
     background-color: var( --semi-color-bg-0) !important;
+    height: 100%;
+}
+
+#root {
+    height: 100%;
+}
+
+.semi-layout {
+    height: 100%;
 }
 
 .tableShow {
@@ -40,7 +49,7 @@ code {
     /*display: flex;*/
     /*flex-direction: column;*/
     /*width: 100%;*/
-    height: 100vh;
+    height: 100%;
     overflow: hidden;
 }
 

web/src/index.js

@@ -22,7 +22,6 @@ root.render(
             <UserProvider>
                 <BrowserRouter>
                     <Layout>
-
                         <Sider>
                             <SiderBar/>
                         </Sider>
@@ -37,11 +36,12 @@ root.render(
                             >
                                 <App/>
                             </Content>
-                            <Footer></Footer>
+                            {/*<Layout.Footer>*/}
+                            {/*    <Footer></Footer>*/}
+                            {/*</Layout.Footer>*/}
                         </Layout>
+                        <ToastContainer/>
                     </Layout>
-                    <ToastContainer/>
-                    {/*<Footer />*/}
                 </BrowserRouter>
             </UserProvider>
         </StatusProvider>

web/src/pages/Token/EditToken.js

@@ -112,6 +112,7 @@ const EditToken = (props) => {
     return (
         <>
             <SideSheet
+                placement={isEdit ? 'right' : 'left'}
                 title={<Title level={3}>{isEdit ? '更新令牌信息' : '创建新的令牌'}</Title>}
                 headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
                 bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}}

web/src/pages/TopUp/index.js

@@ -1,7 +1,8 @@
 import React, {useEffect, useState} from 'react';
-import {Button, Confirm, Form, Grid, Header, Segment, Statistic} from 'semantic-ui-react';
-import {API, showError, showInfo, showSuccess} from '../../helpers';
+import {Button, Card, Confirm, Form, Grid, Header, Segment, Statistic} from 'semantic-ui-react';
+import {API, isMobile, showError, showInfo, showSuccess} from '../../helpers';
 import {renderNumber, renderQuota} from '../../helpers/render';
+import {Col, Layout, Row, Typography} from "@douyinfe/semi-ui";
 
 const TopUp = () => {
     const [redemptionCode, setRedemptionCode] = useState('');
@@ -162,95 +163,101 @@ const TopUp = () => {
 
     return (
         <div>
-            <Segment>
-                <Confirm
-                    open={open}
-                    content={'充值数量：' + topUpCount + '，充值金额：' + renderAmount() + '，是否确认充值？'}
-                    cancelButton='取消充值'
-                    confirmButton="确定"
-                    onCancel={handleCancel}
-                    onConfirm={onlineTopUp}
-                />
-                <Header as='h3'>充值额度</Header>
-                <Grid columns={2} stackable>
-                    <Grid.Column>
-                        <Form>
-                            <Form.Input
-                                placeholder='兑换码'
-                                name='redemptionCode'
-                                value={redemptionCode}
-                                onChange={(e) => {
-                                    setRedemptionCode(e.target.value);
-                                }}
+            <Layout>
+                <Layout.Header>
+                    <h3>我的钱包</h3>
+                </Layout.Header>
+                <Layout.Content>
+                    <div style={{marginTop: 20, paddingLeft: isMobile()?0:200, paddingRight: isMobile()?0:200}}>
+                        <Card
+                            style={{width: '100%', padding: '20px'}}
+                        >
+                            <Confirm
+                                open={open}
+                                content={'充值数量：' + topUpCount + '，充值金额：' + renderAmount() + '，是否确认充值？'}
+                                cancelButton='取消充值'
+                                confirmButton="确定"
+                                onCancel={handleCancel}
+                                onConfirm={onlineTopUp}
                             />
-                            <Button color='green' onClick={openTopUpLink}>
-                              获取兑换码
-                            </Button>
-                            <Button color='yellow' onClick={topUp} disabled={isSubmitting}>
-                                {isSubmitting ? '兑换中...' : '兑换'}
-                            </Button>
-                        </Form>
-                    </Grid.Column>
-                    <Grid.Column>
-                        <Statistic.Group widths='one'>
-                            <Statistic>
-                                <Statistic.Value>{renderQuota(userQuota)}</Statistic.Value>
-                                <Statistic.Label>剩余额度</Statistic.Label>
-                            </Statistic>
-                        </Statistic.Group>
-                    </Grid.Column>
-                </Grid>
-            </Segment>
-            <Segment>
-                <Header as='h3'>在线充值，最低1</Header>
-                <Grid columns={2} stackable>
-                    <Grid.Column>
-                        <Form>
-                            <Form.Input
-                                placeholder='充值金额，最低1'
-                                name='redemptionCount'
-                                type={'number'}
-                                value={topUpCount}
-                                autoComplete={'off'}
-                                onChange={async (e) => {
-                                    setTopUpCount(e.target.value);
-                                    await getAmount(e.target.value);
-                                }}
-                            />
-                            {/*<Form.Input*/}
-                            {/*    placeholder='充值码，如果你没有充值码，可不填写'*/}
-                            {/*    name='redemptionCount'*/}
-                            {/*    value={topUpCode}*/}
-                            {/*    onChange={(e) => {*/}
-                            {/*        setTopUpCode(e.target.value);*/}
-                            {/*    }}*/}
-                            {/*/>*/}
-                            <Button color='blue' onClick={
-                                async () => {
-                                    preTopUp('zfb')
-                                }
-                            }>
-                                支付宝
-                            </Button>
-                            <Button color='green' onClick={
-                                async () => {
-                                    preTopUp('wx')
-                                }
-                            }>
-                                微信
-                            </Button>
-                        </Form>
-                    </Grid.Column>
-                    <Grid.Column>
-                        <Statistic.Group widths='one'>
-                            <Statistic>
-                                <Statistic.Value>{renderAmount()}</Statistic.Value>
-                                <Statistic.Label>支付金额</Statistic.Label>
-                            </Statistic>
-                        </Statistic.Group>
-                    </Grid.Column>
-                </Grid>
-            </Segment>
+                            <h3>兑换</h3>
+                            <Grid columns={2} stackable>
+                                <Grid.Column>
+                                    <Form>
+                                        <Form.Input
+                                            placeholder='兑换码'
+                                            name='redemptionCode'
+                                            value={redemptionCode}
+                                            onChange={(e) => {
+                                                setRedemptionCode(e.target.value);
+                                            }}
+                                        />
+                                        <Button color='green' onClick={openTopUpLink}>
+                                            获取兑换码
+                                        </Button>
+                                        <Button color='yellow' onClick={topUp} disabled={isSubmitting}>
+                                            {isSubmitting ? '兑换中...' : '兑换'}
+                                        </Button>
+                                    </Form>
+                                </Grid.Column>
+                                <Grid.Column>
+                                    <Statistic.Group widths='one'>
+                                        <Statistic>
+                                            <Statistic.Value>{renderQuota(userQuota)}</Statistic.Value>
+                                            <Statistic.Label>剩余额度</Statistic.Label>
+                                        </Statistic>
+                                    </Statistic.Group>
+                                </Grid.Column>
+                            </Grid>
+                        </Card>
+                        <Card
+                            style={{width: '100%', padding: '20px'}}
+                        >
+                            <Header as='h3'>在线充值，最低1</Header>
+                            <Grid columns={2} stackable>
+                                <Grid.Column>
+                                    <Form>
+                                        <Form.Input
+                                            placeholder='充值金额，最低1'
+                                            name='redemptionCount'
+                                            type={'number'}
+                                            value={topUpCount}
+                                            autoComplete={'off'}
+                                            onChange={async (e) => {
+                                                setTopUpCount(e.target.value);
+                                                await getAmount(e.target.value);
+                                            }}
+                                        />
+                                        <Button color='blue' onClick={
+                                            async () => {
+                                                preTopUp('zfb')
+                                            }
+                                        }>
+                                            支付宝
+                                        </Button>
+                                        <Button color='green' onClick={
+                                            async () => {
+                                                preTopUp('wx')
+                                            }
+                                        }>
+                                            微信
+                                        </Button>
+                                    </Form>
+                                </Grid.Column>
+                                <Grid.Column>
+                                    <Statistic.Group widths='one'>
+                                        <Statistic>
+                                            <Statistic.Value>{renderAmount()}</Statistic.Value>
+                                            <Statistic.Label>支付金额</Statistic.Label>
+                                        </Statistic>
+                                    </Statistic.Group>
+                                </Grid.Column>
+                            </Grid>
+                        </Card>
+                    </div>
+
+                </Layout.Content>
+            </Layout>
         </div>
 
     );