完善兑换码界面

controller/token.go

@@ -39,7 +39,8 @@ func GetAllTokens(c *gin.Context) {
 func SearchTokens(c *gin.Context) {
 	userId := c.GetInt("id")
 	keyword := c.Query("keyword")
-	tokens, err := model.SearchUserTokens(userId, keyword)
+	token := c.Query("token")
+	tokens, err := model.SearchUserTokens(userId, keyword, token)
 	if err != nil {
 		c.JSON(http.StatusOK, gin.H{
 			"success": false,

model/token.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"gorm.io/gorm"
 	"one-api/common"
+	"strings"
 )
 
 type Token struct {
@@ -28,8 +29,11 @@ func GetAllUserTokens(userId int, startIdx int, num int) ([]*Token, error) {
 	return tokens, err
 }
 
-func SearchUserTokens(userId int, keyword string) (tokens []*Token, err error) {
+func SearchUserTokens(userId int, keyword string, token string) (tokens []*Token, err error) {
-	err = DB.Where("user_id = ?", userId).Where("name LIKE ?", keyword+"%").Find(&tokens).Error
+	if token != "" {
+		token = strings.Trim(token, "sk-")
+	}
+	err = DB.Where("user_id = ?", userId).Where("name LIKE ? or key LIKE ?", keyword+"%", token+"%").Find(&tokens).Error
 	return tokens, err
 }
 

web/src/components/RedemptionsTable.js

@@ -1,11 +1,12 @@
 import React, {useEffect, useState} from 'react';
-import { Form, Label, Popup, Pagination } from 'semantic-ui-react';
 import {Link} from 'react-router-dom';
 import {API, copy, showError, showInfo, showSuccess, showWarning, timestamp2string} from '../helpers';
 
 import {ITEMS_PER_PAGE} from '../constants';
 import {renderQuota} from '../helpers/render';
-import {Button, Modal, Popconfirm, Popover, Table, Tag} from "@douyinfe/semi-ui";
+import {Button, Modal, Popconfirm, Popover, Table, Tag, Form} from "@douyinfe/semi-ui";
+import EditRedemption from "../pages/Redemption/EditRedemption";
+import editRedemption from "../pages/Redemption/EditRedemption";
 
 function renderTimestamp(timestamp) {
     return (
@@ -72,6 +73,17 @@ const RedemptionsTable = () => {
                 );
             },
         },
+        {
+            title: '兑换人ID',
+            dataIndex: 'used_user_id',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        {text === 0 ? '无' : text}
+                    </div>
+                );
+            },
+        },
         {
             title: '',
             dataIndex: 'operate',
@@ -127,12 +139,12 @@ const RedemptionsTable = () => {
                                 }
                             } disabled={record.status === 3}>启用</Button>
                     }
-            {/*<Button theme='light' type='tertiary' style={{marginRight: 1}} onClick={*/}
+                    <Button theme='light' type='tertiary' style={{marginRight: 1}} onClick={
-            {/*  () => {*/}
+                        () => {
-            {/*    setEditingToken(record);*/}
+                            setEditingRedemption(record);
-            {/*    setShowEdit(true);*/}
+                            setShowEdit(true);
-            {/*  }*/}
+                        }
-            {/*}>编辑</Button>*/}
+                    } disabled={record.status !== 1}>编辑</Button>
                 </div>
             ),
         },
@@ -145,6 +157,14 @@ const RedemptionsTable = () => {
     const [searching, setSearching] = useState(false);
     const [tokenCount, setTokenCount] = useState(ITEMS_PER_PAGE);
     const [selectedKeys, setSelectedKeys] = useState([]);
+    const [editingRedemption, setEditingRedemption] = useState({
+        id: undefined,
+    });
+    const [showEdit, setShowEdit] = useState(false);
+
+    const closeEdit = () => {
+        setShowEdit(false);
+    }
 
     const loadRedemptions = async (startIdx) => {
         const res = await API.get(`/api/redemption/?p=${startIdx}`);
@@ -202,6 +222,10 @@ const RedemptionsTable = () => {
             });
     }, []);
 
+    const refresh = async () => {
+        await loadRedemptions(activePage - 1);
+    };
+
     const manageRedemption = async (id, action, record) => {
         let data = {id};
         let res;
@@ -254,7 +278,7 @@ const RedemptionsTable = () => {
         setSearching(false);
     };
 
-  const handleKeywordChange = async (e, { value }) => {
+    const handleKeywordChange = async (value) => {
         setSearchKeyword(value.trim());
     };
 
@@ -276,7 +300,8 @@ const RedemptionsTable = () => {
         setActivePage(page);
         if (page === Math.ceil(redemptions.length / ITEMS_PER_PAGE) + 1) {
             // In this case we have to load more data and then append them.
-      loadRedemptions(page - 1).then(r => {});
+            loadRedemptions(page - 1).then(r => {
+            });
         }
     };
 
@@ -293,12 +318,15 @@ const RedemptionsTable = () => {
 
     return (
         <>
+            <EditRedemption refresh={refresh} editingRedemption={editingRedemption} visiable={showEdit}
+                            handleClose={closeEdit}></EditRedemption>
             <Form onSubmit={searchRedemptions}>
                 <Form.Input
+                    label='搜索关键字'
+                    field='keyword'
                     icon='search'
-          fluid
                     iconPosition='left'
-          placeholder='搜索兑换码的 ID 和名称 ...'
+                    placeholder='关键字(id或者名称)'
                     value={searchKeyword}
                     loading={searching}
                     onChange={handleKeywordChange}
@@ -319,6 +347,27 @@ const RedemptionsTable = () => {
                 onPageChange: handlePageChange,
             }} loading={loading} rowSelection={rowSelection}>
             </Table>
+            <Button theme='light' type='primary' style={{marginRight: 8}} onClick={
+                () => {
+                    setEditingRedemption({
+                        id: undefined,
+                    });
+                    setShowEdit(true);
+                }
+            }>添加兑换码</Button>
+            <Button label='复制所选兑换码' type="warning" onClick={
+                async () => {
+                    if (selectedKeys.length === 0) {
+                        showError('请至少选择一个兑换码！');
+                        return;
+                    }
+                    let keys = "";
+                    for (let i = 0; i < selectedKeys.length; i++) {
+                        keys += selectedKeys[i].name + "    sk-" + selectedKeys[i].key + "\n";
+                    }
+                    await copyText(keys);
+                }
+            }>复制所选兑换码到剪贴板</Button>
         </>
     );
 };

web/src/components/TokensTable.js

@@ -179,6 +179,7 @@ const TokensTable = () => {
     const [loading, setLoading] = useState(true);
     const [activePage, setActivePage] = useState(1);
     const [searchKeyword, setSearchKeyword] = useState('');
+    const [searchToken, setSearchToken] = useState('');
     const [searching, setSearching] = useState(false);
     const [showTopUpModal, setShowTopUpModal] = useState(false);
     const [targetTokenIdx, setTargetTokenIdx] = useState(0);
@@ -188,9 +189,6 @@ const TokensTable = () => {
 
     const closeEdit = () => {
         setShowEdit(false);
-        // setEditingToken({
-        //     id: undefined,
-        // });
     }
 
     const setTokensFormat = (tokens) => {
@@ -401,6 +399,10 @@ const TokensTable = () => {
         setSearchKeyword(value.trim());
     };
 
+    const handleSearchTokenChange = async (value) => {
+        setSearchToken(value.trim());
+    };
+
     const sortToken = (key) => {
         if (tokens.length === 0) return;
         setLoading(true);
@@ -447,6 +449,14 @@ const TokensTable = () => {
                     loading={searching}
                     onChange={handleKeywordChange}
                 />
+                <Form.Input
+                    field="token"
+                    label='Key'
+                    placeholder='密钥'
+                    value={searchToken}
+                    loading={searching}
+                    onChange={handleSearchTokenChange}
+                />
                 <Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"
                         onClick={searchTokens} style={{marginRight: 8}}>查询</Button>
             </Form>

web/src/pages/Redemption/EditRedemption.js

@@ -1,15 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Header, Segment } from 'semantic-ui-react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { API, downloadTextAsFile, showError, showSuccess } from '../../helpers';
+import {API, downloadTextAsFile, isMobile, showError, showSuccess} from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
+import {SideSheet, Space, Spin, Button, Input, Typography, AutoComplete, Modal} from "@douyinfe/semi-ui";
+import Title from "@douyinfe/semi-ui/lib/es/typography/title";
+import {Divider} from "semantic-ui-react";
 
-const EditRedemption = () => {
+const EditRedemption = (props) => {
-  const params = useParams();
+  const isEdit = props.editingRedemption.id !== undefined;
-  const navigate = useNavigate();
-  const redemptionId = params.id;
-  const isEdit = redemptionId !== undefined;
   const [loading, setLoading] = useState(isEdit);
+
+  const params = useParams();
+  const navigate = useNavigate()
   const originInputs = {
     name: '',
     quota: 100000,
@@ -19,15 +21,16 @@ const EditRedemption = () => {
   const { name, quota, count } = inputs;
 
   const handleCancel = () => {
-    navigate('/redemption');
+    props.handleClose();
-  };
+  }
   
-  const handleInputChange = (e, { name, value }) => {
+  const handleInputChange = (name, value) => {
     setInputs((inputs) => ({ ...inputs, [name]: value }));
   };
 
   const loadRedemption = async () => {
-    let res = await API.get(`/api/redemption/${redemptionId}`);
+    setLoading(true);
+    let res = await API.get(`/api/redemption/${props.editingRedemption.id}`);
     const { success, message, data } = res.data;
     if (success) {
       setInputs(data);
@@ -36,20 +39,28 @@ const EditRedemption = () => {
     }
     setLoading(false);
   };
+
   useEffect(() => {
     if (isEdit) {
-      loadRedemption().then();
+      loadRedemption().then(
+          () => {
+            // console.log(inputs);
           }
-  }, []);
+      );
+    } else {
+      setInputs(originInputs);
+    }
+  }, [props.editingRedemption.id]);
 
   const submit = async () => {
     if (!isEdit && inputs.name === '') return;
+    setLoading(true);
     let localInputs = inputs;
     localInputs.count = parseInt(localInputs.count);
     localInputs.quota = parseInt(localInputs.quota);
     let res;
     if (isEdit) {
-      res = await API.put(`/api/redemption/`, { ...localInputs, id: parseInt(redemptionId) });
+      res = await API.put(`/api/redemption/`, { ...localInputs, id: parseInt(props.editingRedemption.id) });
     } else {
       res = await API.post(`/api/redemption/`, {
         ...localInputs
@@ -59,9 +70,13 @@ const EditRedemption = () => {
     if (success) {
       if (isEdit) {
         showSuccess('兑换码更新成功！');
+        props.refresh();
+        props.handleClose();
       } else {
         showSuccess('兑换码创建成功！');
         setInputs(originInputs);
+        props.refresh();
+        props.handleClose();
       }
     } else {
       showError(message);
@@ -71,56 +86,94 @@ const EditRedemption = () => {
       for (let i = 0; i < data.length; i++) {
         text += data[i] + "\n";
       }
+      // downloadTextAsFile(text, `${inputs.name}.txt`);
+      Modal.confirm({
+        title: '兑换码创建成功',
+        content: (
+            <div>
+                <p>兑换码创建成功，是否下载兑换码？</p>
+                <p>兑换码将以文本文件的形式下载，文件名为兑换码的名称。</p>
+            </div>
+        ),
+        onOk: () => {
             downloadTextAsFile(text, `${inputs.name}.txt`);
         }
+      });
+    }
+    setLoading(false);
   };
 
   return (
     <>
-      <Segment loading={loading}>
+      <SideSheet
-        <Header as='h3'>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Header>
+          placement={isEdit ? 'right' : 'left'}
-        <Form autoComplete='new-password'>
+          title={<Title level={3}>{isEdit ? '更新兑换码信息' : '创建新的兑换码'}</Title>}
-          <Form.Field>
+          headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
-            <Form.Input
+          bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}}
+          visible={props.visiable}
+          footer={
+            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+              <Space>
+                <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
+                <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
+              </Space>
+            </div>
+          }
+          closeIcon={null}
+          onCancel={() => handleCancel()}
+          width={isMobile() ? '100%' : 600}
+      >
+        <Spin spinning={loading}>
+          <Input
+              style={{ marginTop: 20 }}
               label='名称'
               name='name'
               placeholder={'请输入名称'}
-              onChange={handleInputChange}
+              onChange={value => handleInputChange('name', value)}
               value={name}
               autoComplete='new-password'
               required={!isEdit}
           />
-          </Form.Field>
+          <Divider/>
-          <Form.Field>
+          <div style={{ marginTop: 20 }}>
-            <Form.Input
+            <Typography.Text>{`额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
-              label={`额度${renderQuotaWithPrompt(quota)}`}
+          </div>
+          <AutoComplete
+              style={{ marginTop: 8 }}
               name='quota'
-              placeholder={'请输入单个兑换码中包含的额度'}
+              placeholder={'请输入额度'}
-              onChange={handleInputChange}
+              onChange={(value) => handleInputChange('quota', value)}
               value={quota}
               autoComplete='new-password'
               type='number'
+              position={'bottom'}
+              data={[
+                {value: 500000, label: '1$'},
+                {value: 5000000, label: '10$'},
+                {value: 25000000, label: '50$'},
+                {value: 50000000, label: '100$'},
+                {value: 250000000, label: '500$'},
+                {value: 500000000, label: '1000$'},
+              ]}
           />
-          </Form.Field>
           {
               !isEdit && <>
-              <Form.Field>
+                <Divider/>
-                <Form.Input
+                <Typography.Text>生成数量</Typography.Text>
+                <Input
+                    style={{ marginTop: 8 }}
                     label='生成数量'
                     name='count'
                     placeholder={'请输入生成数量'}
-                  onChange={handleInputChange}
+                    onChange={value => handleInputChange('count', value)}
                     value={count}
                     autoComplete='new-password'
                     type='number'
                 />
-              </Form.Field>
               </>
           }
-          <Button positive onClick={submit}>提交</Button>
+        </Spin>
-          <Button onClick={handleCancel}>取消</Button>
+      </SideSheet>
-        </Form>
-      </Segment>
     </>
   );
 };

web/src/pages/Redemption/index.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import { Segment, Header } from 'semantic-ui-react';
 import RedemptionsTable from '../../components/RedemptionsTable';
+import TokensTable from "../../components/TokensTable";
+import {Layout} from "@douyinfe/semi-ui";
 
 const Redemption = () => (
   <>
-    <Segment>
+      <Layout>
-      <Header as='h3'>管理兑换码</Header>
+          <Layout.Header>
+              <h3>管理兑换码</h3>
+          </Layout.Header>
+          <Layout.Content>
               <RedemptionsTable/>
-    </Segment>
+          </Layout.Content>
+      </Layout>
   </>
 );
 

web/src/pages/Token/EditToken.js

@@ -63,7 +63,7 @@ const EditToken = (props) => {
         if (isEdit) {
             loadToken().then(
                 () => {
-                    console.log(inputs);
+                    // console.log(inputs);
                 }
             );
         } else {
@@ -72,8 +72,8 @@ const EditToken = (props) => {
     }, [props.editingToken.id]);
 
     const submit = async () => {
-        setLoading(true);
         if (!isEdit && inputs.name === '') return;
+        setLoading(true);
         let localInputs = inputs;
         localInputs.remain_quota = parseInt(localInputs.remain_quota);
         if (localInputs.expired_time !== -1) {

web/src/pages/Token/index.js

@@ -1,16 +1,15 @@
 import React from 'react';
 import TokensTable from '../../components/TokensTable';
 import {Layout} from "@douyinfe/semi-ui";
-const {Content, Header} = Layout;
 const Token = () => (
   <>
     <Layout>
-      <Header>
+      <Layout.Header>
           <h3>我的令牌</h3>
-      </Header>
+      </Layout.Header>
-      <Content>
+      <Layout.Content>
           <TokensTable/>
-      </Content>
+      </Layout.Content>
     </Layout>
   </>
 );