{
+ setOpenEmail(false);
+ }}
+ />
+
+ );
+}
diff --git a/web/berry/src/views/Redemption/component/EditModal.js b/web/berry/src/views/Redemption/component/EditModal.js
new file mode 100644
index 00000000..10b321ed
--- /dev/null
+++ b/web/berry/src/views/Redemption/component/EditModal.js
@@ -0,0 +1,190 @@
+import PropTypes from 'prop-types';
+import * as Yup from 'yup';
+import { Formik } from 'formik';
+import { useTheme } from '@mui/material/styles';
+import { useState, useEffect } from 'react';
+import {
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ Button,
+ Divider,
+ FormControl,
+ InputLabel,
+ OutlinedInput,
+ InputAdornment,
+ FormHelperText
+} from '@mui/material';
+
+import { renderQuotaWithPrompt, showSuccess, showError, downloadTextAsFile } from 'utils/common';
+import { API } from 'utils/api';
+
+const validationSchema = Yup.object().shape({
+ is_edit: Yup.boolean(),
+ name: Yup.string().required('名称 不能为空'),
+ quota: Yup.number().min(0, '必须大于等于0'),
+ count: Yup.number().when('is_edit', {
+ is: false,
+ then: Yup.number().min(1, '必须大于等于1'),
+ otherwise: Yup.number()
+ })
+});
+
+const originInputs = {
+ is_edit: false,
+ name: '',
+ quota: 100000,
+ count: 1
+};
+
+const EditModal = ({ open, redemptiondId, onCancel, onOk }) => {
+ const theme = useTheme();
+ const [inputs, setInputs] = useState(originInputs);
+
+ const submit = async (values, { setErrors, setStatus, setSubmitting }) => {
+ setSubmitting(true);
+
+ let res;
+ if (values.is_edit) {
+ res = await API.put(`/api/redemption/`, { ...values, id: parseInt(redemptiondId) });
+ } else {
+ res = await API.post(`/api/redemption/`, values);
+ }
+ const { success, message, data } = res.data;
+ if (success) {
+ if (values.is_edit) {
+ showSuccess('兑换码更新成功！');
+ } else {
+ showSuccess('兑换码创建成功！');
+ if (data.length > 1) {
+ let text = '';
+ for (let i = 0; i < data.length; i++) {
+ text += data[i] + '\n';
+ }
+ downloadTextAsFile(text, `${values.name}.txt`);
+ }
+ }
+ setSubmitting(false);
+ setStatus({ success: true });
+ onOk(true);
+ } else {
+ showError(message);
+ setErrors({ submit: message });
+ }
+ };
+
+ const loadRedemptiond = async () => {
+ let res = await API.get(`/api/redemption/${redemptiondId}`);
+ const { success, message, data } = res.data;
+ if (success) {
+ data.is_edit = true;
+ setInputs(data);
+ } else {
+ showError(message);
+ }
+ };
+
+ useEffect(() => {
+ if (redemptiondId) {
+ loadRedemptiond().then();
+ } else {
+ setInputs(originInputs);
+ }
+ }, [redemptiondId]);
+
+ return (
+
+ );
+};
+
+export default EditModal;
+
+EditModal.propTypes = {
+ open: PropTypes.bool,
+ redemptiondId: PropTypes.number,
+ onCancel: PropTypes.func,
+ onOk: PropTypes.func
+};
diff --git a/web/berry/src/views/Redemption/component/TableHead.js b/web/berry/src/views/Redemption/component/TableHead.js
new file mode 100644
index 00000000..f5606937
--- /dev/null
+++ b/web/berry/src/views/Redemption/component/TableHead.js
@@ -0,0 +1,19 @@
+import { TableCell, TableHead, TableRow } from '@mui/material';
+
+const RedemptionTableHead = () => {
+ return (
+
+
+ ID
+ 名称
+ 状态
+ 额度
+ 创建时间
+ 兑换时间
+ 操作
+
+
+ );
+};
+
+export default RedemptionTableHead;
diff --git a/web/berry/src/views/Redemption/component/TableRow.js b/web/berry/src/views/Redemption/component/TableRow.js
new file mode 100644
index 00000000..68c9a505
--- /dev/null
+++ b/web/berry/src/views/Redemption/component/TableRow.js
@@ -0,0 +1,147 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+
+import {
+ Popover,
+ TableRow,
+ MenuItem,
+ TableCell,
+ IconButton,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+ Button,
+ Stack
+} from '@mui/material';
+
+import Label from 'ui-component/Label';
+import TableSwitch from 'ui-component/Switch';
+import { timestamp2string, renderQuota, showSuccess } from 'utils/common';
+
+import { IconDotsVertical, IconEdit, IconTrash } from '@tabler/icons-react';
+
+export default function RedemptionTableRow({ item, manageRedemption, handleOpenModal, setModalRedemptionId }) {
+ const [open, setOpen] = useState(null);
+ const [openDelete, setOpenDelete] = useState(false);
+ const [statusSwitch, setStatusSwitch] = useState(item.status);
+
+ const handleDeleteOpen = () => {
+ handleCloseMenu();
+ setOpenDelete(true);
+ };
+
+ const handleDeleteClose = () => {
+ setOpenDelete(false);
+ };
+
+ const handleOpenMenu = (event) => {
+ setOpen(event.currentTarget);
+ };
+
+ const handleCloseMenu = () => {
+ setOpen(null);
+ };
+
+ const handleStatus = async () => {
+ const switchVlue = statusSwitch === 1 ? 2 : 1;
+ const { success } = await manageRedemption(item.id, 'status', switchVlue);
+ if (success) {
+ setStatusSwitch(switchVlue);
+ }
+ };
+
+ const handleDelete = async () => {
+ handleCloseMenu();
+ await manageRedemption(item.id, 'delete', '');
+ };
+
+ return (
+ <>
+
+ {item.id}
+
+ {item.name}
+
+
+ {item.status !== 1 && item.status !== 2 ? (
+
+ ) : (
+
+ )}
+
+
+ {renderQuota(item.quota)}
+ {timestamp2string(item.created_time)}
+ {item.redeemed_time ? timestamp2string(item.redeemed_time) : '尚未兑换'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+RedemptionTableRow.propTypes = {
+ item: PropTypes.object,
+ manageRedemption: PropTypes.func,
+ handleOpenModal: PropTypes.func,
+ setModalRedemptionId: PropTypes.func
+};
diff --git a/web/berry/src/views/Redemption/index.js b/web/berry/src/views/Redemption/index.js
new file mode 100644
index 00000000..fc2d02f1
--- /dev/null
+++ b/web/berry/src/views/Redemption/index.js
@@ -0,0 +1,203 @@
+import { useState, useEffect } from 'react';
+import { showError, showSuccess } from 'utils/common';
+
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableContainer from '@mui/material/TableContainer';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import TablePagination from '@mui/material/TablePagination';
+import LinearProgress from '@mui/material/LinearProgress';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Toolbar from '@mui/material/Toolbar';
+
+import { Button, Card, Box, Stack, Container, Typography } from '@mui/material';
+import RedemptionTableRow from './component/TableRow';
+import RedemptionTableHead from './component/TableHead';
+import TableToolBar from 'ui-component/TableToolBar';
+import { API } from 'utils/api';
+import { ITEMS_PER_PAGE } from 'constants';
+import { IconRefresh, IconPlus } from '@tabler/icons-react';
+import EditeModal from './component/EditModal';
+
+// ----------------------------------------------------------------------
+export default function Redemption() {
+ const [redemptions, setRedemptions] = useState([]);
+ const [activePage, setActivePage] = useState(0);
+ const [searching, setSearching] = useState(false);
+ const [searchKeyword, setSearchKeyword] = useState('');
+ const [openModal, setOpenModal] = useState(false);
+ const [editRedemptionId, setEditRedemptionId] = useState(0);
+
+ const loadRedemptions = async (startIdx) => {
+ setSearching(true);
+ const res = await API.get(`/api/redemption/?p=${startIdx}`);
+ const { success, message, data } = res.data;
+ if (success) {
+ if (startIdx === 0) {
+ setRedemptions(data);
+ } else {
+ let newRedemptions = [...redemptions];
+ newRedemptions.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
+ setRedemptions(newRedemptions);
+ }
+ } else {
+ showError(message);
+ }
+ setSearching(false);
+ };
+
+ const onPaginationChange = (event, activePage) => {
+ (async () => {
+ if (activePage === Math.ceil(redemptions.length / ITEMS_PER_PAGE)) {
+ // In this case we have to load more data and then append them.
+ await loadRedemptions(activePage);
+ }
+ setActivePage(activePage);
+ })();
+ };
+
+ const searchRedemptions = async (event) => {
+ event.preventDefault();
+ if (searchKeyword === '') {
+ await loadRedemptions(0);
+ setActivePage(0);
+ return;
+ }
+ setSearching(true);
+ const res = await API.get(`/api/redemption/search?keyword=${searchKeyword}`);
+ const { success, message, data } = res.data;
+ if (success) {
+ setRedemptions(data);
+ setActivePage(0);
+ } else {
+ showError(message);
+ }
+ setSearching(false);
+ };
+
+ const handleSearchKeyword = (event) => {
+ setSearchKeyword(event.target.value);
+ };
+
+ const manageRedemptions = async (id, action, value) => {
+ const url = '/api/redemption/';
+ let data = { id };
+ let res;
+ switch (action) {
+ case 'delete':
+ res = await API.delete(url + id);
+ break;
+ case 'status':
+ res = await API.put(url + '?status_only=true', {
+ ...data,
+ status: value
+ });
+ break;
+ }
+ const { success, message } = res.data;
+ if (success) {
+ showSuccess('操作成功完成！');
+ if (action === 'delete') {
+ await loadRedemptions(0);
+ }
+ } else {
+ showError(message);
+ }
+
+ return res.data;
+ };
+
+ // 处理刷新
+ const handleRefresh = async () => {
+ await loadRedemptions(0);
+ setActivePage(0);
+ setSearchKeyword('');
+ };
+
+ const handleOpenModal = (redemptionId) => {
+ setEditRedemptionId(redemptionId);
+ setOpenModal(true);
+ };
+
+ const handleCloseModal = () => {
+ setOpenModal(false);
+ setEditRedemptionId(0);
+ };
+
+ const handleOkModal = (status) => {
+ if (status === true) {
+ handleCloseModal();
+ handleRefresh();
+ }
+ };
+
+ useEffect(() => {
+ loadRedemptions(0)
+ .then()
+ .catch((reason) => {
+ showError(reason);
+ });
+ }, []);
+
+ return (
+ <>
+
+ 兑换
+
+ } onClick={() => handleOpenModal(0)}>
+ 新建兑换码
+
+
+
+
+
+
+ theme.spacing(0, 1, 0, 3)
+ }}
+ >
+
+
+ }>
+ 刷新
+
+
+
+
+ {searching && }
+
+
+
+
+
+ {redemptions.slice(activePage * ITEMS_PER_PAGE, (activePage + 1) * ITEMS_PER_PAGE).map((row) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/web/berry/src/views/Setting/component/OperationSetting.js b/web/berry/src/views/Setting/component/OperationSetting.js
new file mode 100644
index 00000000..0d331d76
--- /dev/null
+++ b/web/berry/src/views/Setting/component/OperationSetting.js
@@ -0,0 +1,532 @@
+import { useState, useEffect } from "react";
+import SubCard from "ui-component/cards/SubCard";
+import {
+ Stack,
+ FormControl,
+ InputLabel,
+ OutlinedInput,
+ Checkbox,
+ Button,
+ FormControlLabel,
+ TextField,
+} from "@mui/material";
+import { showSuccess, showError, verifyJSON } from "utils/common";
+import { API } from "utils/api";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import dayjs from "dayjs";
+require("dayjs/locale/zh-cn");
+
+const OperationSetting = () => {
+ let now = new Date();
+ let [inputs, setInputs] = useState({
+ QuotaForNewUser: 0,
+ QuotaForInviter: 0,
+ QuotaForInvitee: 0,
+ QuotaRemindThreshold: 0,
+ PreConsumedQuota: 0,
+ ModelRatio: "",
+ GroupRatio: "",
+ TopUpLink: "",
+ ChatLink: "",
+ QuotaPerUnit: 0,
+ AutomaticDisableChannelEnabled: "",
+ AutomaticEnableChannelEnabled: "",
+ ChannelDisableThreshold: 0,
+ LogConsumeEnabled: "",
+ DisplayInCurrencyEnabled: "",
+ DisplayTokenStatEnabled: "",
+ ApproximateTokenEnabled: "",
+ RetryTimes: 0,
+ });
+ const [originInputs, setOriginInputs] = useState({});
+ let [loading, setLoading] = useState(false);
+ let [historyTimestamp, setHistoryTimestamp] = useState(
+ now.getTime() / 1000 - 30 * 24 * 3600
+ ); // a month ago new Date().getTime() / 1000 + 3600
+
+ const getOptions = async () => {
+ const res = await API.get("/api/option/");
+ const { success, message, data } = res.data;
+ if (success) {
+ let newInputs = {};
+ data.forEach((item) => {
+ if (item.key === "ModelRatio" || item.key === "GroupRatio") {
+ item.value = JSON.stringify(JSON.parse(item.value), null, 2);
+ }
+ newInputs[item.key] = item.value;
+ });
+ setInputs(newInputs);
+ setOriginInputs(newInputs);
+ } else {
+ showError(message);
+ }
+ };
+
+ useEffect(() => {
+ getOptions().then();
+ }, []);
+
+ const updateOption = async (key, value) => {
+ setLoading(true);
+ if (key.endsWith("Enabled")) {
+ value = inputs[key] === "true" ? "false" : "true";
+ }
+ const res = await API.put("/api/option/", {
+ key,
+ value,
+ });
+ const { success, message } = res.data;
+ if (success) {
+ setInputs((inputs) => ({ ...inputs, [key]: value }));
+ } else {
+ showError(message);
+ }
+ setLoading(false);
+ };
+
+ const handleInputChange = async (event) => {
+ let { name, value } = event.target;
+
+ if (name.endsWith("Enabled")) {
+ await updateOption(name, value);
+ showSuccess("设置成功！");
+ } else {
+ setInputs((inputs) => ({ ...inputs, [name]: value }));
+ }
+ };
+
+ const submitConfig = async (group) => {
+ switch (group) {
+ case "monitor":
+ if (
+ originInputs["ChannelDisableThreshold"] !==
+ inputs.ChannelDisableThreshold
+ ) {
+ await updateOption(
+ "ChannelDisableThreshold",
+ inputs.ChannelDisableThreshold
+ );
+ }
+ if (
+ originInputs["QuotaRemindThreshold"] !== inputs.QuotaRemindThreshold
+ ) {
+ await updateOption(
+ "QuotaRemindThreshold",
+ inputs.QuotaRemindThreshold
+ );
+ }
+ break;
+ case "ratio":
+ if (originInputs["ModelRatio"] !== inputs.ModelRatio) {
+ if (!verifyJSON(inputs.ModelRatio)) {
+ showError("模型倍率不是合法的 JSON 字符串");
+ return;
+ }
+ await updateOption("ModelRatio", inputs.ModelRatio);
+ }
+ if (originInputs["GroupRatio"] !== inputs.GroupRatio) {
+ if (!verifyJSON(inputs.GroupRatio)) {
+ showError("分组倍率不是合法的 JSON 字符串");
+ return;
+ }
+ await updateOption("GroupRatio", inputs.GroupRatio);
+ }
+ break;
+ case "quota":
+ if (originInputs["QuotaForNewUser"] !== inputs.QuotaForNewUser) {
+ await updateOption("QuotaForNewUser", inputs.QuotaForNewUser);
+ }
+ if (originInputs["QuotaForInvitee"] !== inputs.QuotaForInvitee) {
+ await updateOption("QuotaForInvitee", inputs.QuotaForInvitee);
+ }
+ if (originInputs["QuotaForInviter"] !== inputs.QuotaForInviter) {
+ await updateOption("QuotaForInviter", inputs.QuotaForInviter);
+ }
+ if (originInputs["PreConsumedQuota"] !== inputs.PreConsumedQuota) {
+ await updateOption("PreConsumedQuota", inputs.PreConsumedQuota);
+ }
+ break;
+ case "general":
+ if (originInputs["TopUpLink"] !== inputs.TopUpLink) {
+ await updateOption("TopUpLink", inputs.TopUpLink);
+ }
+ if (originInputs["ChatLink"] !== inputs.ChatLink) {
+ await updateOption("ChatLink", inputs.ChatLink);
+ }
+ if (originInputs["QuotaPerUnit"] !== inputs.QuotaPerUnit) {
+ await updateOption("QuotaPerUnit", inputs.QuotaPerUnit);
+ }
+ if (originInputs["RetryTimes"] !== inputs.RetryTimes) {
+ await updateOption("RetryTimes", inputs.RetryTimes);
+ }
+ break;
+ }
+
+ showSuccess("保存成功！");
+ };
+
+ const deleteHistoryLogs = async () => {
+ const res = await API.delete(
+ `/api/log/?target_timestamp=${Math.floor(historyTimestamp)}`
+ );
+ const { success, message, data } = res.data;
+ if (success) {
+ showSuccess(`${data} 条日志已清理！`);
+ return;
+ }
+ showError("日志清理失败：" + message);
+ };
+
+ return (
+
+
+
+
+
+ 充值链接
+
+
+
+ 聊天链接
+
+
+
+ 单位额度
+
+
+
+ 重试次数
+
+
+
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+
+
+
+
+
+ }
+ />
+
+
+
+ {
+ setHistoryTimestamp(
+ newValue === null ? null : newValue.unix()
+ );
+ }}
+ slotProps={{
+ actionBar: {
+ actions: ["today", "clear", "accept"],
+ },
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+ 最长响应时间
+
+
+
+
+
+ 额度提醒阈值
+
+
+
+
+
+ }
+ />
+
+ }
+ />
+
+
+
+
+
+
+
+ 新用户初始额度
+
+
+
+ 请求预扣费额度
+
+
+
+
+ 邀请新用户奖励额度
+
+
+
+
+
+ 新用户使用邀请码奖励额度
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default OperationSetting;
diff --git a/web/berry/src/views/Setting/component/OtherSetting.js b/web/berry/src/views/Setting/component/OtherSetting.js
new file mode 100644
index 00000000..35094fb6
--- /dev/null
+++ b/web/berry/src/views/Setting/component/OtherSetting.js
@@ -0,0 +1,286 @@
+import { useState, useEffect } from 'react';
+import SubCard from 'ui-component/cards/SubCard';
+import {
+ Stack,
+ FormControl,
+ InputLabel,
+ OutlinedInput,
+ Button,
+ Alert,
+ TextField,
+ Dialog,
+ DialogTitle,
+ DialogActions,
+ DialogContent,
+ Divider
+} from '@mui/material';
+import Grid from '@mui/material/Unstable_Grid2';
+import { showError, showSuccess } from 'utils/common'; //,
+import { API } from 'utils/api';
+import { marked } from 'marked';
+
+const OtherSetting = () => {
+ let [inputs, setInputs] = useState({
+ Footer: '',
+ Notice: '',
+ About: '',
+ SystemName: '',
+ Logo: '',
+ HomePageContent: ''
+ });
+ let [loading, setLoading] = useState(false);
+ const [showUpdateModal, setShowUpdateModal] = useState(false);
+ const [updateData, setUpdateData] = useState({
+ tag_name: '',
+ content: ''
+ });
+
+ const getOptions = async () => {
+ const res = await API.get('/api/option/');
+ const { success, message, data } = res.data;
+ if (success) {
+ let newInputs = {};
+ data.forEach((item) => {
+ if (item.key in inputs) {
+ newInputs[item.key] = item.value;
+ }
+ });
+ setInputs(newInputs);
+ } else {
+ showError(message);
+ }
+ };
+
+ useEffect(() => {
+ getOptions().then();
+ }, []);
+
+ const updateOption = async (key, value) => {
+ setLoading(true);
+ const res = await API.put('/api/option/', {
+ key,
+ value
+ });
+ const { success, message } = res.data;
+ if (success) {
+ setInputs((inputs) => ({ ...inputs, [key]: value }));
+ showSuccess('保存成功');
+ } else {
+ showError(message);
+ }
+ setLoading(false);
+ };
+
+ const handleInputChange = async (event) => {
+ let { name, value } = event.target;
+ setInputs((inputs) => ({ ...inputs, [name]: value }));
+ };
+
+ const submitNotice = async () => {
+ await updateOption('Notice', inputs.Notice);
+ };
+
+ const submitFooter = async () => {
+ await updateOption('Footer', inputs.Footer);
+ };
+
+ const submitSystemName = async () => {
+ await updateOption('SystemName', inputs.SystemName);
+ };
+
+ const submitLogo = async () => {
+ await updateOption('Logo', inputs.Logo);
+ };
+
+ const submitAbout = async () => {
+ await updateOption('About', inputs.About);
+ };
+
+ const submitOption = async (key) => {
+ await updateOption(key, inputs[key]);
+ };
+
+ const openGitHubRelease = () => {
+ window.location = 'https://github.com/songquanpeng/one-api/releases/latest';
+ };
+
+ const checkUpdate = async () => {
+ const res = await API.get('https://api.github.com/repos/songquanpeng/one-api/releases/latest');
+ const { tag_name, body } = res.data;
+ if (tag_name === process.env.REACT_APP_VERSION) {
+ showSuccess(`已是最新版本：${tag_name}`);
+ } else {
+ setUpdateData({
+ tag_name: tag_name,
+ content: marked.parse(body)
+ });
+ setShowUpdateModal(true);
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 系统名称
+
+
+
+
+
+
+
+
+ Logo 图片地址
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default OtherSetting;
diff --git a/web/berry/src/views/Setting/component/SystemSetting.js b/web/berry/src/views/Setting/component/SystemSetting.js
new file mode 100644
index 00000000..fcf062a3
--- /dev/null
+++ b/web/berry/src/views/Setting/component/SystemSetting.js
@@ -0,0 +1,611 @@
+import { useState, useEffect } from 'react';
+import SubCard from 'ui-component/cards/SubCard';
+import {
+ Stack,
+ FormControl,
+ InputLabel,
+ OutlinedInput,
+ Checkbox,
+ Button,
+ FormControlLabel,
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ Divider,
+ Alert,
+ Autocomplete,
+ TextField
+} from '@mui/material';
+import Grid from '@mui/material/Unstable_Grid2';
+import { showError, showSuccess, removeTrailingSlash } from 'utils/common'; //,
+import { API } from 'utils/api';
+import { createFilterOptions } from '@mui/material/Autocomplete';
+
+const filter = createFilterOptions();
+const SystemSetting = () => {
+ let [inputs, setInputs] = useState({
+ PasswordLoginEnabled: '',
+ PasswordRegisterEnabled: '',
+ EmailVerificationEnabled: '',
+ GitHubOAuthEnabled: '',
+ GitHubClientId: '',
+ GitHubClientSecret: '',
+ Notice: '',
+ SMTPServer: '',
+ SMTPPort: '',
+ SMTPAccount: '',
+ SMTPFrom: '',
+ SMTPToken: '',
+ ServerAddress: '',
+ Footer: '',
+ WeChatAuthEnabled: '',
+ WeChatServerAddress: '',
+ WeChatServerToken: '',
+ WeChatAccountQRCodeImageURL: '',
+ TurnstileCheckEnabled: '',
+ TurnstileSiteKey: '',
+ TurnstileSecretKey: '',
+ RegisterEnabled: '',
+ EmailDomainRestrictionEnabled: '',
+ EmailDomainWhitelist: []
+ });
+ const [originInputs, setOriginInputs] = useState({});
+ let [loading, setLoading] = useState(false);
+ const [EmailDomainWhitelist, setEmailDomainWhitelist] = useState([]);
+ const [showPasswordWarningModal, setShowPasswordWarningModal] = useState(false);
+
+ const getOptions = async () => {
+ const res = await API.get('/api/option/');
+ const { success, message, data } = res.data;
+ if (success) {
+ let newInputs = {};
+ data.forEach((item) => {
+ newInputs[item.key] = item.value;
+ });
+ setInputs({
+ ...newInputs,
+ EmailDomainWhitelist: newInputs.EmailDomainWhitelist.split(',')
+ });
+ setOriginInputs(newInputs);
+
+ setEmailDomainWhitelist(newInputs.EmailDomainWhitelist.split(','));
+ } else {
+ showError(message);
+ }
+ };
+
+ useEffect(() => {
+ getOptions().then();
+ }, []);
+
+ const updateOption = async (key, value) => {
+ setLoading(true);
+ switch (key) {
+ case 'PasswordLoginEnabled':
+ case 'PasswordRegisterEnabled':
+ case 'EmailVerificationEnabled':
+ case 'GitHubOAuthEnabled':
+ case 'WeChatAuthEnabled':
+ case 'TurnstileCheckEnabled':
+ case 'EmailDomainRestrictionEnabled':
+ case 'RegisterEnabled':
+ value = inputs[key] === 'true' ? 'false' : 'true';
+ break;
+ default:
+ break;
+ }
+ const res = await API.put('/api/option/', {
+ key,
+ value
+ });
+ const { success, message } = res.data;
+ if (success) {
+ if (key === 'EmailDomainWhitelist') {
+ value = value.split(',');
+ }
+ setInputs((inputs) => ({
+ ...inputs,
+ [key]: value
+ }));
+ showSuccess('设置成功！');
+ } else {
+ showError(message);
+ }
+ setLoading(false);
+ };
+
+ const handleInputChange = async (event) => {
+ let { name, value } = event.target;
+
+ if (name === 'PasswordLoginEnabled' && inputs[name] === 'true') {
+ // block disabling password login
+ setShowPasswordWarningModal(true);
+ return;
+ }
+ if (
+ name === 'Notice' ||
+ name.startsWith('SMTP') ||
+ name === 'ServerAddress' ||
+ name === 'GitHubClientId' ||
+ name === 'GitHubClientSecret' ||
+ name === 'WeChatServerAddress' ||
+ name === 'WeChatServerToken' ||
+ name === 'WeChatAccountQRCodeImageURL' ||
+ name === 'TurnstileSiteKey' ||
+ name === 'TurnstileSecretKey' ||
+ name === 'EmailDomainWhitelist'
+ ) {
+ setInputs((inputs) => ({ ...inputs, [name]: value }));
+ } else {
+ await updateOption(name, value);
+ }
+ };
+
+ const submitServerAddress = async () => {
+ let ServerAddress = removeTrailingSlash(inputs.ServerAddress);
+ await updateOption('ServerAddress', ServerAddress);
+ };
+
+ const submitSMTP = async () => {
+ if (originInputs['SMTPServer'] !== inputs.SMTPServer) {
+ await updateOption('SMTPServer', inputs.SMTPServer);
+ }
+ if (originInputs['SMTPAccount'] !== inputs.SMTPAccount) {
+ await updateOption('SMTPAccount', inputs.SMTPAccount);
+ }
+ if (originInputs['SMTPFrom'] !== inputs.SMTPFrom) {
+ await updateOption('SMTPFrom', inputs.SMTPFrom);
+ }
+ if (originInputs['SMTPPort'] !== inputs.SMTPPort && inputs.SMTPPort !== '') {
+ await updateOption('SMTPPort', inputs.SMTPPort);
+ }
+ if (originInputs['SMTPToken'] !== inputs.SMTPToken && inputs.SMTPToken !== '') {
+ await updateOption('SMTPToken', inputs.SMTPToken);
+ }
+ };
+
+ const submitEmailDomainWhitelist = async () => {
+ await updateOption('EmailDomainWhitelist', inputs.EmailDomainWhitelist.join(','));
+ };
+
+ const submitWeChat = async () => {
+ if (originInputs['WeChatServerAddress'] !== inputs.WeChatServerAddress) {
+ await updateOption('WeChatServerAddress', removeTrailingSlash(inputs.WeChatServerAddress));
+ }
+ if (originInputs['WeChatAccountQRCodeImageURL'] !== inputs.WeChatAccountQRCodeImageURL) {
+ await updateOption('WeChatAccountQRCodeImageURL', inputs.WeChatAccountQRCodeImageURL);
+ }
+ if (originInputs['WeChatServerToken'] !== inputs.WeChatServerToken && inputs.WeChatServerToken !== '') {
+ await updateOption('WeChatServerToken', inputs.WeChatServerToken);
+ }
+ };
+
+ const submitGitHubOAuth = async () => {
+ if (originInputs['GitHubClientId'] !== inputs.GitHubClientId) {
+ await updateOption('GitHubClientId', inputs.GitHubClientId);
+ }
+ if (originInputs['GitHubClientSecret'] !== inputs.GitHubClientSecret && inputs.GitHubClientSecret !== '') {
+ await updateOption('GitHubClientSecret', inputs.GitHubClientSecret);
+ }
+ };
+
+ const submitTurnstile = async () => {
+ if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) {
+ await updateOption('TurnstileSiteKey', inputs.TurnstileSiteKey);
+ }
+ if (originInputs['TurnstileSecretKey'] !== inputs.TurnstileSecretKey && inputs.TurnstileSecretKey !== '') {
+ await updateOption('TurnstileSecretKey', inputs.TurnstileSecretKey);
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+
+ 服务器地址
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+
+
+
+
+ }
+ />
+
+
+
+ {
+ const event = {
+ target: {
+ name: 'EmailDomainWhitelist',
+ value: value
+ }
+ };
+ handleInputChange(event);
+ }}
+ filterSelectedOptions
+ renderInput={(params) => }
+ filterOptions={(options, params) => {
+ const filtered = filter(options, params);
+ const { inputValue } = params;
+ const isExisting = options.some((option) => inputValue === option);
+ if (inputValue !== '' && !isExisting) {
+ filtered.push(inputValue);
+ }
+ return filtered;
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ SMTP 服务器地址
+
+
+
+
+
+ SMTP 端口
+
+
+
+
+
+ SMTP 账户
+
+
+
+
+
+ SMTP 发送者邮箱
+
+
+
+
+
+ SMTP 访问凭证
+
+
+
+
+
+
+
+
+
+ {' '}
+ 用以支持通过 GitHub 进行登录注册，
+
+ 点击此处
+
+ 管理你的 GitHub OAuth App
+
+ }
+ >
+
+
+
+ Homepage URL 填 {inputs.ServerAddress}
+ ，Authorization callback URL 填 {`${inputs.ServerAddress}/oauth/github`}
+
+
+
+
+ GitHub Client ID
+
+
+
+
+
+ GitHub Client Secret
+
+
+
+
+
+
+
+
+
+ 用以支持通过微信进行登录注册，
+
+ 点击此处
+
+ 了解 WeChat Server
+
+ }
+ >
+
+
+
+ WeChat Server 服务器地址
+
+
+
+
+
+ WeChat Server 访问凭证
+
+
+
+
+
+ 微信公众号二维码图片链接
+
+
+
+
+
+
+
+
+
+ 用以支持用户校验，
+
+ 点击此处
+
+ 管理你的 Turnstile Sites，推荐选择 Invisible Widget Type
+
+ }
+ >
+
+
+
+ Turnstile Site Key
+
+
+
+
+
+ Turnstile Secret Key
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SystemSetting;
diff --git a/web/berry/src/views/Setting/index.js b/web/berry/src/views/Setting/index.js
new file mode 100644
index 00000000..733a16dc
--- /dev/null
+++ b/web/berry/src/views/Setting/index.js
@@ -0,0 +1,90 @@
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Tabs, Tab, Box, Card } from '@mui/material';
+import { IconSettings2, IconActivity, IconSettings } from '@tabler/icons-react';
+import OperationSetting from './component/OperationSetting';
+import SystemSetting from './component/SystemSetting';
+import OtherSetting from './component/OtherSetting';
+import AdminContainer from 'ui-component/AdminContainer';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+function CustomTabPanel(props) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && {children}}
+
+ );
+}
+
+CustomTabPanel.propTypes = {
+ children: PropTypes.node,
+ index: PropTypes.number.isRequired,
+ value: PropTypes.number.isRequired
+};
+
+function a11yProps(index) {
+ return {
+ id: `setting-tab-${index}`,
+ 'aria-controls': `setting-tabpanel-${index}`
+ };
+}
+
+const Setting = () => {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const hash = location.hash.replace('#', '');
+ const tabMap = {
+ operation: 0,
+ system: 1,
+ other: 2
+ };
+ const [value, setValue] = useState(tabMap[hash] || 0);
+
+ const handleChange = (event, newValue) => {
+ setValue(newValue);
+ const hashArray = Object.keys(tabMap);
+ navigate(`#${hashArray[newValue]}`);
+ };
+
+ useEffect(() => {
+ const handleHashChange = () => {
+ const hash = location.hash.replace('#', '');
+ setValue(tabMap[hash] || 0);
+ };
+ window.addEventListener('hashchange', handleHashChange);
+ return () => {
+ window.removeEventListener('hashchange', handleHashChange);
+ };
+ }, [location, tabMap]);
+
+ return (
+ <>
+
+
+
+
+
+ } iconPosition="start" />
+ } iconPosition="start" />
+ } iconPosition="start" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Setting;
diff --git a/web/berry/src/views/Token/component/EditModal.js b/web/berry/src/views/Token/component/EditModal.js
new file mode 100644
index 00000000..c65d10ce
--- /dev/null
+++ b/web/berry/src/views/Token/component/EditModal.js
@@ -0,0 +1,275 @@
+import PropTypes from "prop-types";
+import * as Yup from "yup";
+import { Formik } from "formik";
+import { useTheme } from "@mui/material/styles";
+import { useState, useEffect } from "react";
+import dayjs from "dayjs";
+import {
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ Button,
+ Divider,
+ Alert,
+ FormControl,
+ InputLabel,
+ OutlinedInput,
+ InputAdornment,
+ Switch,
+ FormHelperText,
+} from "@mui/material";
+
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import { renderQuotaWithPrompt, showSuccess, showError } from "utils/common";
+import { API } from "utils/api";
+require("dayjs/locale/zh-cn");
+
+const validationSchema = Yup.object().shape({
+ is_edit: Yup.boolean(),
+ name: Yup.string().required("名称 不能为空"),
+ remain_quota: Yup.number().min(0, "必须大于等于0"),
+ expired_time: Yup.number(),
+ unlimited_quota: Yup.boolean(),
+});
+
+const originInputs = {
+ is_edit: false,
+ name: "",
+ remain_quota: 0,
+ expired_time: -1,
+ unlimited_quota: false,
+};
+
+const EditModal = ({ open, tokenId, onCancel, onOk }) => {
+ const theme = useTheme();
+ const [inputs, setInputs] = useState(originInputs);
+
+ const submit = async (values, { setErrors, setStatus, setSubmitting }) => {
+ setSubmitting(true);
+
+ values.remain_quota = parseInt(values.remain_quota);
+ let res;
+ if (values.is_edit) {
+ res = await API.put(`/api/token/`, { ...values, id: parseInt(tokenId) });
+ } else {
+ res = await API.post(`/api/token/`, values);
+ }
+ const { success, message } = res.data;
+ if (success) {
+ if (values.is_edit) {
+ showSuccess("令牌更新成功！");
+ } else {
+ showSuccess("令牌创建成功，请在列表页面点击复制获取令牌！");
+ }
+ setSubmitting(false);
+ setStatus({ success: true });
+ onOk(true);
+ } else {
+ showError(message);
+ setErrors({ submit: message });
+ }
+ };
+
+ const loadToken = async () => {
+ let res = await API.get(`/api/token/${tokenId}`);
+ const { success, message, data } = res.data;
+ if (success) {
+ data.is_edit = true;
+ setInputs(data);
+ } else {
+ showError(message);
+ }
+ };
+
+ useEffect(() => {
+ if (tokenId) {
+ loadToken().then();
+ }
+ }, [tokenId]);
+
+ return (
+
+ );
+};
+
+export default EditModal;
+
+EditModal.propTypes = {
+ open: PropTypes.bool,
+ tokenId: PropTypes.number,
+ onCancel: PropTypes.func,
+ onOk: PropTypes.func,
+};
diff --git a/web/berry/src/views/Token/component/TableHead.js b/web/berry/src/views/Token/component/TableHead.js
new file mode 100644
index 00000000..aadf1f6e
--- /dev/null
+++ b/web/berry/src/views/Token/component/TableHead.js
@@ -0,0 +1,19 @@
+import { TableCell, TableHead, TableRow } from '@mui/material';
+
+const TokenTableHead = () => {
+ return (
+
+
+ 名称
+ 状态
+ 已用额度
+ 剩余额度
+ 创建时间
+ 过期时间
+ 操作
+
+
+ );
+};
+
+export default TokenTableHead;
diff --git a/web/berry/src/views/Token/component/TableRow.js b/web/berry/src/views/Token/component/TableRow.js
new file mode 100644
index 00000000..8c15a464
--- /dev/null
+++ b/web/berry/src/views/Token/component/TableRow.js
@@ -0,0 +1,270 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import {
+ Popover,
+ TableRow,
+ MenuItem,
+ TableCell,
+ IconButton,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+ Button,
+ Tooltip,
+ Stack,
+ ButtonGroup
+} from '@mui/material';
+
+import TableSwitch from 'ui-component/Switch';
+import { renderQuota, showSuccess, timestamp2string } from 'utils/common';
+
+import { IconDotsVertical, IconEdit, IconTrash, IconCaretDownFilled } from '@tabler/icons-react';
+
+const COPY_OPTIONS = [
+ {
+ key: 'next',
+ text: 'ChatGPT Next',
+ url: 'https://chat.oneapi.pro/#/?settings={"key":"sk-{key}","url":"{serverAddress}"}',
+ encode: false
+ },
+ { key: 'ama', text: 'AMA 问天', url: 'ama://set-api-key?server={serverAddress}&key=sk-{key}', encode: true },
+ { key: 'opencat', text: 'OpenCat', url: 'opencat://team/join?domain={serverAddress}&token=sk-{key}', encode: true }
+];
+
+function replacePlaceholders(text, key, serverAddress) {
+ return text.replace('{key}', key).replace('{serverAddress}', serverAddress);
+}
+
+function createMenu(menuItems) {
+ return (
+ <>
+ {menuItems.map((menuItem, index) => (
+
+ ))}
+
+ );
+}
+
+export default function TokensTableRow({ item, manageToken, handleOpenModal, setModalTokenId }) {
+ const [open, setOpen] = useState(null);
+ const [menuItems, setMenuItems] = useState(null);
+ const [openDelete, setOpenDelete] = useState(false);
+ const [statusSwitch, setStatusSwitch] = useState(item.status);
+ const siteInfo = useSelector((state) => state.siteInfo);
+
+ const handleDeleteOpen = () => {
+ handleCloseMenu();
+ setOpenDelete(true);
+ };
+
+ const handleDeleteClose = () => {
+ setOpenDelete(false);
+ };
+
+ const handleOpenMenu = (event, type) => {
+ switch (type) {
+ case 'copy':
+ setMenuItems(copyItems);
+ break;
+ case 'link':
+ setMenuItems(linkItems);
+ break;
+ default:
+ setMenuItems(actionItems);
+ }
+ setOpen(event.currentTarget);
+ };
+
+ const handleCloseMenu = () => {
+ setOpen(null);
+ };
+
+ const handleStatus = async () => {
+ const switchVlue = statusSwitch === 1 ? 2 : 1;
+ const { success } = await manageToken(item.id, 'status', switchVlue);
+ if (success) {
+ setStatusSwitch(switchVlue);
+ }
+ };
+
+ const handleDelete = async () => {
+ handleCloseMenu();
+ await manageToken(item.id, 'delete', '');
+ };
+
+ const actionItems = createMenu([
+ {
+ text: '编辑',
+ icon: ,
+ onClick: () => {
+ handleCloseMenu();
+ handleOpenModal();
+ setModalTokenId(item.id);
+ },
+ color: undefined
+ },
+ {
+ text: '删除',
+ icon: ,
+ onClick: handleDeleteOpen,
+ color: 'error.main'
+ }
+ ]);
+
+ const handleCopy = (option, type) => {
+ let serverAddress = '';
+ if (siteInfo?.server_address) {
+ serverAddress = siteInfo.server_address;
+ } else {
+ serverAddress = window.location.host;
+ }
+
+ if (option.encode) {
+ serverAddress = encodeURIComponent(serverAddress);
+ }
+
+ let url = option.url;
+
+ if (option.key === 'next' && siteInfo?.chat_link) {
+ url = siteInfo.chat_link + `/#/?settings={"key":"sk-{key}","url":"{serverAddress}"}`;
+ }
+
+ const key = item.key;
+ const text = replacePlaceholders(url, key, serverAddress);
+ if (type === 'link') {
+ window.open(text);
+ } else {
+ navigator.clipboard.writeText(text);
+ showSuccess('已复制到剪贴板！');
+ }
+ handleCloseMenu();
+ };
+
+ const copyItems = createMenu(
+ COPY_OPTIONS.map((option) => ({
+ text: option.text,
+ icon: undefined,
+ onClick: () => handleCopy(option, 'copy'),
+ color: undefined
+ }))
+ );
+
+ const linkItems = createMenu(
+ COPY_OPTIONS.map((option) => ({
+ text: option.text,
+ icon: undefined,
+ onClick: () => handleCopy(option, 'link'),
+ color: undefined
+ }))
+ );
+
+ return (
+ <>
+
+ {item.name}
+
+
+ {
+ switch (statusSwitch) {
+ case 1:
+ return '已启用';
+ case 2:
+ return '已禁用';
+ case 3:
+ return '已过期';
+ case 4:
+ return '已耗尽';
+ default:
+ return '未知';
+ }
+ })()}
+ placement="top"
+ >
+
+
+
+
+ {renderQuota(item.used_quota)}
+
+ {item.unlimited_quota ? '无限制' : renderQuota(item.remain_quota, 2)}
+
+ {timestamp2string(item.created_time)}
+
+ {item.expired_time === -1 ? '永不过期' : timestamp2string(item.expired_time)}
+
+
+
+
+
+
+
+
+
+
+
+ handleOpenMenu(e, 'action')} sx={{ color: 'rgb(99, 115, 129)' }}>
+
+
+
+
+
+
+ {menuItems}
+
+
+
+
+ );
+}
+
+TokensTableRow.propTypes = {
+ item: PropTypes.object,
+ manageToken: PropTypes.func,
+ handleOpenModal: PropTypes.func,
+ setModalTokenId: PropTypes.func
+};
diff --git a/web/berry/src/views/Token/index.js b/web/berry/src/views/Token/index.js
new file mode 100644
index 00000000..97ece35f
--- /dev/null
+++ b/web/berry/src/views/Token/index.js
@@ -0,0 +1,215 @@
+import { useState, useEffect } from 'react';
+import { showError, showSuccess } from 'utils/common';
+
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableContainer from '@mui/material/TableContainer';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import TablePagination from '@mui/material/TablePagination';
+import LinearProgress from '@mui/material/LinearProgress';
+import Alert from '@mui/material/Alert';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Toolbar from '@mui/material/Toolbar';
+
+import { Button, Card, Box, Stack, Container, Typography } from '@mui/material';
+import TokensTableRow from './component/TableRow';
+import TokenTableHead from './component/TableHead';
+import TableToolBar from 'ui-component/TableToolBar';
+import { API } from 'utils/api';
+import { ITEMS_PER_PAGE } from 'constants';
+import { IconRefresh, IconPlus } from '@tabler/icons-react';
+import EditeModal from './component/EditModal';
+import { useSelector } from 'react-redux';
+
+export default function Token() {
+ const [tokens, setTokens] = useState([]);
+ const [activePage, setActivePage] = useState(0);
+ const [searching, setSearching] = useState(false);
+ const [searchKeyword, setSearchKeyword] = useState('');
+ const [openModal, setOpenModal] = useState(false);
+ const [editTokenId, setEditTokenId] = useState(0);
+ const siteInfo = useSelector((state) => state.siteInfo);
+
+ const loadTokens = async (startIdx) => {
+ setSearching(true);
+ const res = await API.get(`/api/token/?p=${startIdx}`);
+ const { success, message, data } = res.data;
+ if (success) {
+ if (startIdx === 0) {
+ setTokens(data);
+ } else {
+ let newTokens = [...tokens];
+ newTokens.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
+ setTokens(newTokens);
+ }
+ } else {
+ showError(message);
+ }
+ setSearching(false);
+ };
+
+ useEffect(() => {
+ loadTokens(0)
+ .then()
+ .catch((reason) => {
+ showError(reason);
+ });
+ }, []);
+
+ const onPaginationChange = (event, activePage) => {
+ (async () => {
+ if (activePage === Math.ceil(tokens.length / ITEMS_PER_PAGE)) {
+ // In this case we have to load more data and then append them.
+ await loadTokens(activePage);
+ }
+ setActivePage(activePage);
+ })();
+ };
+
+ const searchTokens = async (event) => {
+ event.preventDefault();
+ if (searchKeyword === '') {
+ await loadTokens(0);
+ setActivePage(0);
+ return;
+ }
+ setSearching(true);
+ const res = await API.get(`/api/token/search?keyword=${searchKeyword}`);
+ const { success, message, data } = res.data;
+ if (success) {
+ setTokens(data);
+ setActivePage(0);
+ } else {
+ showError(message);
+ }
+ setSearching(false);
+ };
+
+ const handleSearchKeyword = (event) => {
+ setSearchKeyword(event.target.value);
+ };
+
+ const manageToken = async (id, action, value) => {
+ const url = '/api/token/';
+ let data = { id };
+ let res;
+ switch (action) {
+ case 'delete':
+ res = await API.delete(url + id);
+ break;
+ case 'status':
+ res = await API.put(url + `?status_only=true`, {
+ ...data,
+ status: value
+ });
+ break;
+ }
+ const { success, message } = res.data;
+ if (success) {
+ showSuccess('操作成功完成！');
+ if (action === 'delete') {
+ await handleRefresh();
+ }
+ } else {
+ showError(message);
+ }
+
+ return res.data;
+ };
+
+ // 处理刷新
+ const handleRefresh = async () => {
+ await loadTokens(activePage);
+ };
+
+ const handleOpenModal = (tokenId) => {
+ setEditTokenId(tokenId);
+ setOpenModal(true);
+ };
+
+ const handleCloseModal = () => {
+ setOpenModal(false);
+ setEditTokenId(0);
+ };
+
+ const handleOkModal = (status) => {
+ if (status === true) {
+ handleCloseModal();
+ handleRefresh();
+ }
+ };
+
+ return (
+ <>
+
+ 令牌
+
+
+
+
+
+ 将 OpenAI API 基础地址 https://api.openai.com 替换为 {siteInfo.server_address}，复制下面的密钥即可使用
+
+
+
+
+
+
+ theme.spacing(0, 1, 0, 3)
+ }}
+ >
+
+
+ }>
+ 刷新
+
+
+
+
+ {searching && }
+
+
+
+
+
+ {tokens.slice(activePage * ITEMS_PER_PAGE, (activePage + 1) * ITEMS_PER_PAGE).map((row) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/web/berry/src/views/Topup/component/InviteCard.js b/web/berry/src/views/Topup/component/InviteCard.js
new file mode 100644
index 00000000..a95f85e5
--- /dev/null
+++ b/web/berry/src/views/Topup/component/InviteCard.js
@@ -0,0 +1,80 @@
+import { Stack, Typography, Container, Box, OutlinedInput, InputAdornment, Button } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import SubCard from 'ui-component/cards/SubCard';
+import inviteImage from 'assets/images/invite/cwok_casual_19.webp';
+import { useState } from 'react';
+import { API } from 'utils/api';
+import { showError, showSuccess } from 'utils/common';
+
+const InviteCard = () => {
+ const theme = useTheme();
+ const [inviteUl, setInviteUrl] = useState('');
+
+ const handleInviteUrl = async () => {
+ if (inviteUl) {
+ navigator.clipboard.writeText(inviteUl);
+ showSuccess(`邀请链接已复制到剪切板`);
+ return;
+ }
+ const res = await API.get('/api/user/aff');
+ const { success, message, data } = res.data;
+ if (success) {
+ let link = `${window.location.origin}/register?aff=${data}`;
+ setInviteUrl(link);
+ navigator.clipboard.writeText(link);
+ showSuccess(`邀请链接已复制到剪切板`);
+ } else {
+ showError(message);
+ }
+ };
+
+ return (
+
+
+
+
+ 
+
+
+
+
+
+
+ 邀请奖励
+
+
+ 分享您的邀请链接，邀请好友注册，即可获得奖励！
+
+
+
+
+
+ }
+ aria-describedby="helper-text-channel-quota-label"
+ disabled={true}
+ />
+
+
+
+ );
+};
+
+export default InviteCard;
diff --git a/web/berry/src/views/Topup/component/TopupCard.js b/web/berry/src/views/Topup/component/TopupCard.js
new file mode 100644
index 00000000..bd4fe00d
--- /dev/null
+++ b/web/berry/src/views/Topup/component/TopupCard.js
@@ -0,0 +1,122 @@
+import { Typography, Stack, OutlinedInput, InputAdornment, Button, InputLabel, FormControl } from '@mui/material';
+import { IconWallet } from '@tabler/icons-react';
+import { useTheme } from '@mui/material/styles';
+import SubCard from 'ui-component/cards/SubCard';
+import UserCard from 'ui-component/cards/UserCard';
+
+import { API } from 'utils/api';
+import React, { useEffect, useState } from 'react';
+import { showError, showInfo, showSuccess, renderQuota } from 'utils/common';
+
+const TopupCard = () => {
+ const theme = useTheme();
+ const [redemptionCode, setRedemptionCode] = useState('');
+ const [topUpLink, setTopUpLink] = useState('');
+ const [userQuota, setUserQuota] = useState(0);
+ const [isSubmitting, setIsSubmitting] = useState(false);
+
+ const topUp = async () => {
+ if (redemptionCode === '') {
+ showInfo('请输入充值码！');
+ return;
+ }
+ setIsSubmitting(true);
+ try {
+ const res = await API.post('/api/user/topup', {
+ key: redemptionCode
+ });
+ const { success, message, data } = res.data;
+ if (success) {
+ showSuccess('充值成功！');
+ setUserQuota((quota) => {
+ return quota + data;
+ });
+ setRedemptionCode('');
+ } else {
+ showError(message);
+ }
+ } catch (err) {
+ showError('请求失败');
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ const openTopUpLink = () => {
+ if (!topUpLink) {
+ showError('超级管理员未设置充值链接！');
+ return;
+ }
+ window.open(topUpLink, '_blank');
+ };
+
+ const getUserQuota = async () => {
+ let res = await API.get(`/api/user/self`);
+ const { success, message, data } = res.data;
+ if (success) {
+ setUserQuota(data.quota);
+ } else {
+ showError(message);
+ }
+ };
+
+ useEffect(() => {
+ let status = localStorage.getItem('siteInfo');
+ if (status) {
+ status = JSON.parse(status);
+ if (status.top_up_link) {
+ setTopUpLink(status.top_up_link);
+ }
+ }
+ getUserQuota().then();
+ }, []);
+
+ return (
+
+
+
+ 当前额度:
+ {renderQuota(userQuota)}
+
+
+
+ 兑换码
+ {
+ setRedemptionCode(e.target.value);
+ }}
+ name="key"
+ placeholder="请输入兑换码"
+ endAdornment={
+
+
+
+ }
+ aria-describedby="helper-text-channel-quota-label"
+ />
+
+
+
+
+ 还没有兑换码？ 点击获取兑换码：
+
+
+
+
+
+ );
+};
+
+export default TopupCard;
diff --git a/web/berry/src/views/Topup/index.js b/web/berry/src/views/Topup/index.js
new file mode 100644
index 00000000..ddabedee
--- /dev/null
+++ b/web/berry/src/views/Topup/index.js
@@ -0,0 +1,26 @@
+import { Stack, Alert } from '@mui/material';
+import Grid from '@mui/material/Unstable_Grid2';
+import TopupCard from './component/TopupCard';
+import InviteCard from './component/InviteCard';
+
+const Topup = () => {
+ return (
+
+
+
+ 充值记录以及邀请记录请在日志中查询。充值记录请在日志中选择类型【充值】查询；邀请记录请在日志中选择【系统】查询{' '}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Topup;
diff --git a/web/berry/src/views/User/component/EditModal.js b/web/berry/src/views/User/component/EditModal.js
new file mode 100644
index 00000000..f6b533e2
--- /dev/null
+++ b/web/berry/src/views/User/component/EditModal.js
@@ -0,0 +1,288 @@
+import PropTypes from 'prop-types';
+import * as Yup from 'yup';
+import { Formik } from 'formik';
+import { useTheme } from '@mui/material/styles';
+import { useState, useEffect } from 'react';
+import {
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ Button,
+ Divider,
+ FormControl,
+ InputLabel,
+ OutlinedInput,
+ InputAdornment,
+ Select,
+ MenuItem,
+ IconButton,
+ FormHelperText
+} from '@mui/material';
+
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+
+import { renderQuotaWithPrompt, showSuccess, showError } from 'utils/common';
+import { API } from 'utils/api';
+
+const validationSchema = Yup.object().shape({
+ is_edit: Yup.boolean(),
+ username: Yup.string().required('用户名 不能为空'),
+ display_name: Yup.string(),
+ password: Yup.string().when('is_edit', {
+ is: false,
+ then: Yup.string().required('密码 不能为空'),
+ otherwise: Yup.string()
+ }),
+ group: Yup.string().when('is_edit', {
+ is: false,
+ then: Yup.string().required('用户组 不能为空'),
+ otherwise: Yup.string()
+ }),
+ quota: Yup.number().when('is_edit', {
+ is: false,
+ then: Yup.number().min(0, '额度 不能小于 0'),
+ otherwise: Yup.number()
+ })
+});
+
+const originInputs = {
+ is_edit: false,
+ username: '',
+ display_name: '',
+ password: '',
+ group: 'default',
+ quota: 0
+};
+
+const EditModal = ({ open, userId, onCancel, onOk }) => {
+ const theme = useTheme();
+ const [inputs, setInputs] = useState(originInputs);
+ const [groupOptions, setGroupOptions] = useState([]);
+ const [showPassword, setShowPassword] = useState(false);
+
+ const submit = async (values, { setErrors, setStatus, setSubmitting }) => {
+ setSubmitting(true);
+
+ let res;
+ if (values.is_edit) {
+ res = await API.put(`/api/user/`, { ...values, id: parseInt(userId) });
+ } else {
+ res = await API.post(`/api/user/`, values);
+ }
+ const { success, message } = res.data;
+ if (success) {
+ if (values.is_edit) {
+ showSuccess('用户更新成功！');
+ } else {
+ showSuccess('用户创建成功！');
+ }
+ setSubmitting(false);
+ setStatus({ success: true });
+ onOk(true);
+ } else {
+ showError(message);
+ setErrors({ submit: message });
+ }
+ };
+
+ const handleClickShowPassword = () => {
+ setShowPassword(!showPassword);
+ };
+
+ const handleMouseDownPassword = (event) => {
+ event.preventDefault();
+ };
+
+ const loadUser = async () => {
+ let res = await API.get(`/api/user/${userId}`);
+ const { success, message, data } = res.data;
+ if (success) {
+ data.is_edit = true;
+ setInputs(data);
+ } else {
+ showError(message);
+ }
+ };
+
+ const fetchGroups = async () => {
+ try {
+ let res = await API.get(`/api/group/`);
+ setGroupOptions(res.data.data);
+ } catch (error) {
+ showError(error.message);
+ }
+ };
+
+ useEffect(() => {
+ fetchGroups().then();
+ if (userId) {
+ loadUser().then();
+ } else {
+ setInputs(originInputs);
+ }
+ }, [userId]);
+
+ return (
+
+ );
+};
+
+export default EditModal;
+
+EditModal.propTypes = {
+ open: PropTypes.bool,
+ userId: PropTypes.number,
+ onCancel: PropTypes.func,
+ onOk: PropTypes.func
+};
diff --git a/web/berry/src/views/User/component/TableHead.js b/web/berry/src/views/User/component/TableHead.js
new file mode 100644
index 00000000..b7a04165
--- /dev/null
+++ b/web/berry/src/views/User/component/TableHead.js
@@ -0,0 +1,20 @@
+import { TableCell, TableHead, TableRow } from '@mui/material';
+
+const UsersTableHead = () => {
+ return (
+
+
+ ID
+ 用户名
+ 分组
+ 统计信息
+ 用户角色
+ 绑定
+ 状态
+ 操作
+
+
+ );
+};
+
+export default UsersTableHead;
diff --git a/web/berry/src/views/User/component/TableRow.js b/web/berry/src/views/User/component/TableRow.js
new file mode 100644
index 00000000..5722a751
--- /dev/null
+++ b/web/berry/src/views/User/component/TableRow.js
@@ -0,0 +1,193 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+
+import {
+ Popover,
+ TableRow,
+ MenuItem,
+ TableCell,
+ IconButton,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+ Button,
+ Tooltip,
+ Stack
+} from '@mui/material';
+
+import Label from 'ui-component/Label';
+import TableSwitch from 'ui-component/Switch';
+import { renderQuota, renderNumber } from 'utils/common';
+import { IconDotsVertical, IconEdit, IconTrash, IconUser, IconBrandWechat, IconBrandGithub, IconMail } from '@tabler/icons-react';
+import { useTheme } from '@mui/material/styles';
+
+function renderRole(role) {
+ switch (role) {
+ case 1:
+ return ;
+ case 10:
+ return ;
+ case 100:
+ return ;
+ default:
+ return ;
+ }
+}
+
+export default function UsersTableRow({ item, manageUser, handleOpenModal, setModalUserId }) {
+ const theme = useTheme();
+ const [open, setOpen] = useState(null);
+ const [openDelete, setOpenDelete] = useState(false);
+ const [statusSwitch, setStatusSwitch] = useState(item.status);
+
+ const handleDeleteOpen = () => {
+ handleCloseMenu();
+ setOpenDelete(true);
+ };
+
+ const handleDeleteClose = () => {
+ setOpenDelete(false);
+ };
+
+ const handleOpenMenu = (event) => {
+ setOpen(event.currentTarget);
+ };
+
+ const handleCloseMenu = () => {
+ setOpen(null);
+ };
+
+ const handleStatus = async () => {
+ const switchVlue = statusSwitch === 1 ? 2 : 1;
+ const { success } = await manageUser(item.username, 'status', switchVlue);
+ if (success) {
+ setStatusSwitch(switchVlue);
+ }
+ };
+
+ const handleDelete = async () => {
+ handleCloseMenu();
+ await manageUser(item.username, 'delete', '');
+ };
+
+ return (
+ <>
+
+ {item.id}
+
+ {item.username}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {renderRole(item.role)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {' '}
+
+
+
+
+
+
+
+
+
+
+ {item.role !== 100 && (
+
+ )}
+
+
+
+
+
+
+
+ );
+}
+
+UsersTableRow.propTypes = {
+ item: PropTypes.object,
+ manageUser: PropTypes.func,
+ handleOpenModal: PropTypes.func,
+ setModalUserId: PropTypes.func
+};
diff --git a/web/berry/src/views/User/index.js b/web/berry/src/views/User/index.js
new file mode 100644
index 00000000..463f525a
--- /dev/null
+++ b/web/berry/src/views/User/index.js
@@ -0,0 +1,205 @@
+import { useState, useEffect } from 'react';
+import { showError, showSuccess } from 'utils/common';
+
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableContainer from '@mui/material/TableContainer';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import TablePagination from '@mui/material/TablePagination';
+import LinearProgress from '@mui/material/LinearProgress';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Toolbar from '@mui/material/Toolbar';
+
+import { Button, Card, Box, Stack, Container, Typography } from '@mui/material';
+import UsersTableRow from './component/TableRow';
+import UsersTableHead from './component/TableHead';
+import TableToolBar from 'ui-component/TableToolBar';
+import { API } from 'utils/api';
+import { ITEMS_PER_PAGE } from 'constants';
+import { IconRefresh, IconPlus } from '@tabler/icons-react';
+import EditeModal from './component/EditModal';
+
+// ----------------------------------------------------------------------
+export default function Users() {
+ const [users, setUsers] = useState([]);
+ const [activePage, setActivePage] = useState(0);
+ const [searching, setSearching] = useState(false);
+ const [searchKeyword, setSearchKeyword] = useState('');
+ const [openModal, setOpenModal] = useState(false);
+ const [editUserId, setEditUserId] = useState(0);
+
+ const loadUsers = async (startIdx) => {
+ setSearching(true);
+ const res = await API.get(`/api/user/?p=${startIdx}`);
+ const { success, message, data } = res.data;
+ if (success) {
+ if (startIdx === 0) {
+ setUsers(data);
+ } else {
+ let newUsers = [...users];
+ newUsers.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
+ setUsers(newUsers);
+ }
+ } else {
+ showError(message);
+ }
+ setSearching(false);
+ };
+
+ const onPaginationChange = (event, activePage) => {
+ (async () => {
+ if (activePage === Math.ceil(users.length / ITEMS_PER_PAGE)) {
+ // In this case we have to load more data and then append them.
+ await loadUsers(activePage);
+ }
+ setActivePage(activePage);
+ })();
+ };
+
+ const searchUsers = async (event) => {
+ event.preventDefault();
+ if (searchKeyword === '') {
+ await loadUsers(0);
+ setActivePage(0);
+ return;
+ }
+ setSearching(true);
+ const res = await API.get(`/api/user/search?keyword=${searchKeyword}`);
+ const { success, message, data } = res.data;
+ if (success) {
+ setUsers(data);
+ setActivePage(0);
+ } else {
+ showError(message);
+ }
+ setSearching(false);
+ };
+
+ const handleSearchKeyword = (event) => {
+ setSearchKeyword(event.target.value);
+ };
+
+ const manageUser = async (username, action, value) => {
+ const url = '/api/user/manage';
+ let data = { username: username, action: '' };
+ let res;
+ switch (action) {
+ case 'delete':
+ data.action = 'delete';
+ break;
+ case 'status':
+ data.action = value === 1 ? 'enable' : 'disable';
+ break;
+ case 'role':
+ data.action = value === true ? 'promote' : 'demote';
+ break;
+ }
+
+ res = await API.post(url, data);
+ const { success, message } = res.data;
+ if (success) {
+ showSuccess('操作成功完成！');
+ await loadUsers(activePage);
+ } else {
+ showError(message);
+ }
+
+ return res.data;
+ };
+
+ // 处理刷新
+ const handleRefresh = async () => {
+ await loadUsers(activePage);
+ };
+
+ const handleOpenModal = (userId) => {
+ setEditUserId(userId);
+ setOpenModal(true);
+ };
+
+ const handleCloseModal = () => {
+ setOpenModal(false);
+ setEditUserId(0);
+ };
+
+ const handleOkModal = (status) => {
+ if (status === true) {
+ handleCloseModal();
+ handleRefresh();
+ }
+ };
+
+ useEffect(() => {
+ loadUsers(0)
+ .then()
+ .catch((reason) => {
+ showError(reason);
+ });
+ }, []);
+
+ return (
+ <>
+
+ 用户
+
+ } onClick={() => handleOpenModal(0)}>
+ 新建用户
+
+
+
+
+
+
+ theme.spacing(0, 1, 0, 3)
+ }}
+ >
+
+
+ }>
+ 刷新
+
+
+
+
+ {searching && }
+
+
+
+
+
+ {users.slice(activePage * ITEMS_PER_PAGE, (activePage + 1) * ITEMS_PER_PAGE).map((row) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ );
+}