feat: add new theme berry (#860)

* feat: add theme berry

* docs: add development notes

* fix: fix blank page

* chore: update implementation

* fix: fix package.json

* chore: update ui copy

---------

Co-authored-by: JustSong <songquanpeng@foxmail.com>

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 (
+    <Stack spacing={2}>
+      <SubCard title="通用设置">
+        <Stack justifyContent="flex-start" alignItems="flex-start" spacing={2}>
+          <Stack
+            direction={{ sm: "column", md: "row" }}
+            spacing={{ xs: 3, sm: 2, md: 4 }}
+          >
+            <FormControl fullWidth>
+              <InputLabel htmlFor="TopUpLink">充值链接</InputLabel>
+              <OutlinedInput
+                id="TopUpLink"
+                name="TopUpLink"
+                value={inputs.TopUpLink}
+                onChange={handleInputChange}
+                label="充值链接"
+                placeholder="例如发卡网站的购买链接"
+                disabled={loading}
+              />
+            </FormControl>
+            <FormControl fullWidth>
+              <InputLabel htmlFor="ChatLink">聊天链接</InputLabel>
+              <OutlinedInput
+                id="ChatLink"
+                name="ChatLink"
+                value={inputs.ChatLink}
+                onChange={handleInputChange}
+                label="聊天链接"
+                placeholder="例如 ChatGPT Next Web 的部署地址"
+                disabled={loading}
+              />
+            </FormControl>
+            <FormControl fullWidth>
+              <InputLabel htmlFor="QuotaPerUnit">单位额度</InputLabel>
+              <OutlinedInput
+                id="QuotaPerUnit"
+                name="QuotaPerUnit"
+                value={inputs.QuotaPerUnit}
+                onChange={handleInputChange}
+                label="单位额度"
+                placeholder="一单位货币能兑换的额度"
+                disabled={loading}
+              />
+            </FormControl>
+            <FormControl fullWidth>
+              <InputLabel htmlFor="RetryTimes">重试次数</InputLabel>
+              <OutlinedInput
+                id="RetryTimes"
+                name="RetryTimes"
+                value={inputs.RetryTimes}
+                onChange={handleInputChange}
+                label="重试次数"
+                placeholder="重试次数"
+                disabled={loading}
+              />
+            </FormControl>
+          </Stack>
+          <Stack
+            direction={{ sm: "column", md: "row" }}
+            spacing={{ xs: 3, sm: 2, md: 4 }}
+            justifyContent="flex-start"
+            alignItems="flex-start"
+          >
+            <FormControlLabel
+              sx={{ marginLeft: "0px" }}
+              label="以货币形式显示额度"
+              control={
+                <Checkbox
+                  checked={inputs.DisplayInCurrencyEnabled === "true"}
+                  onChange={handleInputChange}
+                  name="DisplayInCurrencyEnabled"
+                />
+              }
+            />
+
+            <FormControlLabel
+              label="Billing 相关 API 显示令牌额度而非用户额度"
+              control={
+                <Checkbox
+                  checked={inputs.DisplayTokenStatEnabled === "true"}
+                  onChange={handleInputChange}
+                  name="DisplayTokenStatEnabled"
+                />
+              }
+            />
+
+            <FormControlLabel
+              label="使用近似的方式估算 token 数以减少计算量"
+              control={
+                <Checkbox
+                  checked={inputs.ApproximateTokenEnabled === "true"}
+                  onChange={handleInputChange}
+                  name="ApproximateTokenEnabled"
+                />
+              }
+            />
+          </Stack>
+          <Button
+            variant="contained"
+            onClick={() => {
+              submitConfig("general").then();
+            }}
+          >
+            保存通用设置
+          </Button>
+        </Stack>
+      </SubCard>
+      <SubCard title="日志设置">
+        <Stack
+          direction="column"
+          justifyContent="flex-start"
+          alignItems="flex-start"
+          spacing={2}
+        >
+          <FormControlLabel
+            label="启用日志消费"
+            control={
+              <Checkbox
+                checked={inputs.LogConsumeEnabled === "true"}
+                onChange={handleInputChange}
+                name="LogConsumeEnabled"
+              />
+            }
+          />
+
+          <FormControl>
+            <LocalizationProvider
+              dateAdapter={AdapterDayjs}
+              adapterLocale={"zh-cn"}
+            >
+              <DateTimePicker
+                label="日志清理时间"
+                placeholder="日志清理时间"
+                ampm={false}
+                name="historyTimestamp"
+                value={
+                  historyTimestamp === null
+                    ? null
+                    : dayjs.unix(historyTimestamp)
+                }
+                disabled={loading}
+                onChange={(newValue) => {
+                  setHistoryTimestamp(
+                    newValue === null ? null : newValue.unix()
+                  );
+                }}
+                slotProps={{
+                  actionBar: {
+                    actions: ["today", "clear", "accept"],
+                  },
+                }}
+              />
+            </LocalizationProvider>
+          </FormControl>
+          <Button
+            variant="contained"
+            onClick={() => {
+              deleteHistoryLogs().then();
+            }}
+          >
+            清理历史日志
+          </Button>
+        </Stack>
+      </SubCard>
+      <SubCard title="监控设置">
+        <Stack justifyContent="flex-start" alignItems="flex-start" spacing={2}>
+          <Stack
+            direction={{ sm: "column", md: "row" }}
+            spacing={{ xs: 3, sm: 2, md: 4 }}
+          >
+            <FormControl fullWidth>
+              <InputLabel htmlFor="ChannelDisableThreshold">
+                最长响应时间
+              </InputLabel>
+              <OutlinedInput
+                id="ChannelDisableThreshold"
+                name="ChannelDisableThreshold"
+                type="number"
+                value={inputs.ChannelDisableThreshold}
+                onChange={handleInputChange}
+                label="最长响应时间"
+                placeholder="单位秒，当运行通道全部测试时，超过此时间将自动禁用通道"
+                disabled={loading}
+              />
+            </FormControl>
+            <FormControl fullWidth>
+              <InputLabel htmlFor="QuotaRemindThreshold">
+                额度提醒阈值
+              </InputLabel>
+              <OutlinedInput
+                id="QuotaRemindThreshold"
+                name="QuotaRemindThreshold"
+                type="number"
+                value={inputs.QuotaRemindThreshold}
+                onChange={handleInputChange}
+                label="额度提醒阈值"
+                placeholder="低于此额度时将发送邮件提醒用户"
+                disabled={loading}
+              />
+            </FormControl>
+          </Stack>
+          <FormControlLabel
+            label="失败时自动禁用通道"
+            control={
+              <Checkbox
+                checked={inputs.AutomaticDisableChannelEnabled === "true"}
+                onChange={handleInputChange}
+                name="AutomaticDisableChannelEnabled"
+              />
+            }
+          />
+          <FormControlLabel
+            label="成功时自动启用通道"
+            control={
+              <Checkbox
+                checked={inputs.AutomaticEnableChannelEnabled === "true"}
+                onChange={handleInputChange}
+                name="AutomaticEnableChannelEnabled"
+              />
+            }
+          />
+          <Button
+            variant="contained"
+            onClick={() => {
+              submitConfig("monitor").then();
+            }}
+          >
+            保存监控设置
+          </Button>
+        </Stack>
+      </SubCard>
+      <SubCard title="额度设置">
+        <Stack justifyContent="flex-start" alignItems="flex-start" spacing={2}>
+          <Stack
+            direction={{ sm: "column", md: "row" }}
+            spacing={{ xs: 3, sm: 2, md: 4 }}
+          >
+            <FormControl fullWidth>
+              <InputLabel htmlFor="QuotaForNewUser">新用户初始额度</InputLabel>
+              <OutlinedInput
+                id="QuotaForNewUser"
+                name="QuotaForNewUser"
+                type="number"
+                value={inputs.QuotaForNewUser}
+                onChange={handleInputChange}
+                label="新用户初始额度"
+                placeholder="例如：100"
+                disabled={loading}
+              />
+            </FormControl>
+            <FormControl fullWidth>
+              <InputLabel htmlFor="PreConsumedQuota">请求预扣费额度</InputLabel>
+              <OutlinedInput
+                id="PreConsumedQuota"
+                name="PreConsumedQuota"
+                type="number"
+                value={inputs.PreConsumedQuota}
+                onChange={handleInputChange}
+                label="请求预扣费额度"
+                placeholder="请求结束后多退少补"
+                disabled={loading}
+              />
+            </FormControl>
+            <FormControl fullWidth>
+              <InputLabel htmlFor="QuotaForInviter">
+                邀请新用户奖励额度
+              </InputLabel>
+              <OutlinedInput
+                id="QuotaForInviter"
+                name="QuotaForInviter"
+                type="number"
+                label="邀请新用户奖励额度"
+                value={inputs.QuotaForInviter}
+                onChange={handleInputChange}
+                placeholder="例如：2000"
+                disabled={loading}
+              />
+            </FormControl>
+            <FormControl fullWidth>
+              <InputLabel htmlFor="QuotaForInvitee">
+                新用户使用邀请码奖励额度
+              </InputLabel>
+              <OutlinedInput
+                id="QuotaForInvitee"
+                name="QuotaForInvitee"
+                type="number"
+                label="新用户使用邀请码奖励额度"
+                value={inputs.QuotaForInvitee}
+                onChange={handleInputChange}
+                autoComplete="new-password"
+                placeholder="例如：1000"
+                disabled={loading}
+              />
+            </FormControl>
+          </Stack>
+          <Button
+            variant="contained"
+            onClick={() => {
+              submitConfig("quota").then();
+            }}
+          >
+            保存额度设置
+          </Button>
+        </Stack>
+      </SubCard>
+      <SubCard title="倍率设置">
+        <Stack justifyContent="flex-start" alignItems="flex-start" spacing={2}>
+          <FormControl fullWidth>
+            <TextField
+              multiline
+              maxRows={15}
+              id="channel-ModelRatio-label"
+              label="模型倍率"
+              value={inputs.ModelRatio}
+              name="ModelRatio"
+              onChange={handleInputChange}
+              aria-describedby="helper-text-channel-ModelRatio-label"
+              minRows={5}
+              placeholder="为一个 JSON 文本，键为模型名称，值为倍率"
+            />
+          </FormControl>
+
+          <FormControl fullWidth>
+            <TextField
+              multiline
+              maxRows={15}
+              id="channel-GroupRatio-label"
+              label="分组倍率"
+              value={inputs.GroupRatio}
+              name="GroupRatio"
+              onChange={handleInputChange}
+              aria-describedby="helper-text-channel-GroupRatio-label"
+              minRows={5}
+              placeholder="为一个 JSON 文本，键为分组名称，值为倍率"
+            />
+          </FormControl>
+          <Button
+            variant="contained"
+            onClick={() => {
+              submitConfig("ratio").then();
+            }}
+          >
+            保存倍率设置
+          </Button>
+        </Stack>
+      </SubCard>
+    </Stack>
+  );
+};
+
+export default OperationSetting;

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 (
+    <>
+      <Stack spacing={2}>
+        <SubCard title="通用设置">
+          <Grid container spacing={{ xs: 3, sm: 2, md: 4 }}>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={checkUpdate}>
+                检查更新
+              </Button>
+            </Grid>
+            <Grid xs={12}>
+              <FormControl fullWidth>
+                <TextField
+                  multiline
+                  maxRows={15}
+                  id="Notice"
+                  label="公告"
+                  value={inputs.Notice}
+                  name="Notice"
+                  onChange={handleInputChange}
+                  minRows={10}
+                  placeholder="在此输入新的公告内容，支持 Markdown & HTML 代码"
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={submitNotice}>
+                保存公告
+              </Button>
+            </Grid>
+          </Grid>
+        </SubCard>
+        <SubCard title="个性化设置">
+          <Grid container spacing={{ xs: 3, sm: 2, md: 4 }}>
+            <Grid xs={12}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="SystemName">系统名称</InputLabel>
+                <OutlinedInput
+                  id="SystemName"
+                  name="SystemName"
+                  value={inputs.SystemName || ''}
+                  onChange={handleInputChange}
+                  label="系统名称"
+                  placeholder="在此输入系统名称"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={submitSystemName}>
+                设置系统名称
+              </Button>
+            </Grid>
+            <Grid xs={12}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="Logo">Logo 图片地址</InputLabel>
+                <OutlinedInput
+                  id="Logo"
+                  name="Logo"
+                  value={inputs.Logo || ''}
+                  onChange={handleInputChange}
+                  label="Logo 图片地址"
+                  placeholder="在此输入Logo 图片地址"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={submitLogo}>
+                设置 Logo
+              </Button>
+            </Grid>
+            <Grid xs={12}>
+              <FormControl fullWidth>
+                <TextField
+                  multiline
+                  maxRows={15}
+                  id="HomePageContent"
+                  label="首页内容"
+                  value={inputs.HomePageContent}
+                  name="HomePageContent"
+                  onChange={handleInputChange}
+                  minRows={10}
+                  placeholder="在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页。"
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={() => submitOption('HomePageContent')}>
+                保存首页内容
+              </Button>
+            </Grid>
+            <Grid xs={12}>
+              <FormControl fullWidth>
+                <TextField
+                  multiline
+                  maxRows={15}
+                  id="About"
+                  label="关于"
+                  value={inputs.About}
+                  name="About"
+                  onChange={handleInputChange}
+                  minRows={10}
+                  placeholder="在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面。"
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={submitAbout}>
+                保存关于
+              </Button>
+            </Grid>
+            <Grid xs={12}>
+              <Alert severity="warning">
+                移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目。
+              </Alert>
+            </Grid>
+            <Grid xs={12}>
+              <FormControl fullWidth>
+                <TextField
+                  multiline
+                  maxRows={15}
+                  id="Footer"
+                  label="公告"
+                  value={inputs.Footer}
+                  name="Footer"
+                  onChange={handleInputChange}
+                  minRows={10}
+                  placeholder="在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码"
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={submitFooter}>
+                设置页脚
+              </Button>
+            </Grid>
+          </Grid>
+        </SubCard>
+      </Stack>
+      <Dialog open={showUpdateModal} onClose={() => setShowUpdateModal(false)} fullWidth maxWidth={'md'}>
+        <DialogTitle sx={{ margin: '0px', fontWeight: 700, lineHeight: '1.55556', padding: '24px', fontSize: '1.125rem' }}>
+          新版本：{updateData.tag_name}
+        </DialogTitle>
+        <Divider />
+        <DialogContent>
+          {' '}
+          <div dangerouslySetInnerHTML={{ __html: updateData.content }}></div>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setShowUpdateModal(false)}>关闭</Button>
+          <Button
+            onClick={async () => {
+              setShowUpdateModal(false);
+              openGitHubRelease();
+            }}
+          >
+            去GitHub查看
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export default OtherSetting;

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 (
+    <>
+      <Stack spacing={2}>
+        <SubCard title="通用设置">
+          <Grid container spacing={{ xs: 3, sm: 2, md: 4 }}>
+            <Grid xs={12}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="ServerAddress">服务器地址</InputLabel>
+                <OutlinedInput
+                  id="ServerAddress"
+                  name="ServerAddress"
+                  value={inputs.ServerAddress || ''}
+                  onChange={handleInputChange}
+                  label="服务器地址"
+                  placeholder="例如：https://yourdomain.com"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={submitServerAddress}>
+                更新服务器地址
+              </Button>
+            </Grid>
+          </Grid>
+        </SubCard>
+        <SubCard title="配置登录注册">
+          <Grid container spacing={{ xs: 3, sm: 2, md: 4 }}>
+            <Grid xs={12} md={3}>
+              <FormControlLabel
+                label="允许通过密码进行登录"
+                control={
+                  <Checkbox checked={inputs.PasswordLoginEnabled === 'true'} onChange={handleInputChange} name="PasswordLoginEnabled" />
+                }
+              />
+            </Grid>
+            <Grid xs={12} md={3}>
+              <FormControlLabel
+                label="允许通过密码进行注册"
+                control={
+                  <Checkbox
+                    checked={inputs.PasswordRegisterEnabled === 'true'}
+                    onChange={handleInputChange}
+                    name="PasswordRegisterEnabled"
+                  />
+                }
+              />
+            </Grid>
+            <Grid xs={12} md={3}>
+              <FormControlLabel
+                label="通过密码注册时需要进行邮箱验证"
+                control={
+                  <Checkbox
+                    checked={inputs.EmailVerificationEnabled === 'true'}
+                    onChange={handleInputChange}
+                    name="EmailVerificationEnabled"
+                  />
+                }
+              />
+            </Grid>
+            <Grid xs={12} md={3}>
+              <FormControlLabel
+                label="允许通过 GitHub 账户登录 & 注册"
+                control={<Checkbox checked={inputs.GitHubOAuthEnabled === 'true'} onChange={handleInputChange} name="GitHubOAuthEnabled" />}
+              />
+            </Grid>
+            <Grid xs={12} md={3}>
+              <FormControlLabel
+                label="允许通过微信登录 & 注册"
+                control={<Checkbox checked={inputs.WeChatAuthEnabled === 'true'} onChange={handleInputChange} name="WeChatAuthEnabled" />}
+              />
+            </Grid>
+            <Grid xs={12} md={3}>
+              <FormControlLabel
+                label="允许新用户注册（此项为否时，新用户将无法以任何方式进行注册）"
+                control={<Checkbox checked={inputs.RegisterEnabled === 'true'} onChange={handleInputChange} name="RegisterEnabled" />}
+              />
+            </Grid>
+            <Grid xs={12} md={3}>
+              <FormControlLabel
+                label="启用 Turnstile 用户校验"
+                control={
+                  <Checkbox checked={inputs.TurnstileCheckEnabled === 'true'} onChange={handleInputChange} name="TurnstileCheckEnabled" />
+                }
+              />
+            </Grid>
+          </Grid>
+        </SubCard>
+        <SubCard title="配置邮箱域名白名单" subTitle="用以防止恶意用户利用临时邮箱批量注册">
+          <Grid container spacing={{ xs: 3, sm: 2, md: 4 }}>
+            <Grid xs={12}>
+              <FormControlLabel
+                label="启用邮箱域名白名单"
+                control={
+                  <Checkbox
+                    checked={inputs.EmailDomainRestrictionEnabled === 'true'}
+                    onChange={handleInputChange}
+                    name="EmailDomainRestrictionEnabled"
+                  />
+                }
+              />
+            </Grid>
+            <Grid xs={12}>
+              <FormControl fullWidth>
+                <Autocomplete
+                  multiple
+                  freeSolo
+                  id="EmailDomainWhitelist"
+                  options={EmailDomainWhitelist}
+                  value={inputs.EmailDomainWhitelist}
+                  onChange={(e, value) => {
+                    const event = {
+                      target: {
+                        name: 'EmailDomainWhitelist',
+                        value: value
+                      }
+                    };
+                    handleInputChange(event);
+                  }}
+                  filterSelectedOptions
+                  renderInput={(params) => <TextField {...params} name="EmailDomainWhitelist" label="允许的邮箱域名" />}
+                  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;
+                  }}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={submitEmailDomainWhitelist}>
+                保存邮箱域名白名单设置
+              </Button>
+            </Grid>
+          </Grid>
+        </SubCard>
+        <SubCard title="配置 SMTP" subTitle="用以支持系统的邮件发送">
+          <Grid container spacing={{ xs: 3, sm: 2, md: 4 }}>
+            <Grid xs={12} md={4}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="SMTPServer">SMTP 服务器地址</InputLabel>
+                <OutlinedInput
+                  id="SMTPServer"
+                  name="SMTPServer"
+                  value={inputs.SMTPServer || ''}
+                  onChange={handleInputChange}
+                  label="SMTP 服务器地址"
+                  placeholder="例如：smtp.qq.com"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12} md={4}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="SMTPPort">SMTP 端口</InputLabel>
+                <OutlinedInput
+                  id="SMTPPort"
+                  name="SMTPPort"
+                  value={inputs.SMTPPort || ''}
+                  onChange={handleInputChange}
+                  label="SMTP 端口"
+                  placeholder="默认: 587"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12} md={4}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="SMTPAccount">SMTP 账户</InputLabel>
+                <OutlinedInput
+                  id="SMTPAccount"
+                  name="SMTPAccount"
+                  value={inputs.SMTPAccount || ''}
+                  onChange={handleInputChange}
+                  label="SMTP 账户"
+                  placeholder="通常是邮箱地址"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12} md={4}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="SMTPFrom">SMTP 发送者邮箱</InputLabel>
+                <OutlinedInput
+                  id="SMTPFrom"
+                  name="SMTPFrom"
+                  value={inputs.SMTPFrom || ''}
+                  onChange={handleInputChange}
+                  label="SMTP 发送者邮箱"
+                  placeholder="通常和邮箱地址保持一致"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12} md={4}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="SMTPToken">SMTP 访问凭证</InputLabel>
+                <OutlinedInput
+                  id="SMTPToken"
+                  name="SMTPToken"
+                  value={inputs.SMTPToken || ''}
+                  onChange={handleInputChange}
+                  label="SMTP 访问凭证"
+                  placeholder="敏感信息不会发送到前端显示"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={submitSMTP}>
+                保存 SMTP 设置
+              </Button>
+            </Grid>
+          </Grid>
+        </SubCard>
+        <SubCard
+          title="配置 GitHub OAuth App"
+          subTitle={
+            <span>
+              {' '}
+              用以支持通过 GitHub 进行登录注册，
+              <a href="https://github.com/settings/developers" target="_blank" rel="noopener noreferrer">
+                点击此处
+              </a>
+              管理你的 GitHub OAuth App
+            </span>
+          }
+        >
+          <Grid container spacing={{ xs: 3, sm: 2, md: 4 }}>
+            <Grid xs={12}>
+              <Alert severity="info" sx={{ wordWrap: 'break-word' }}>
+                Homepage URL 填 <b>{inputs.ServerAddress}</b>
+                ，Authorization callback URL 填 <b>{`${inputs.ServerAddress}/oauth/github`}</b>
+              </Alert>
+            </Grid>
+            <Grid xs={12} md={6}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="GitHubClientId">GitHub Client ID</InputLabel>
+                <OutlinedInput
+                  id="GitHubClientId"
+                  name="GitHubClientId"
+                  value={inputs.GitHubClientId || ''}
+                  onChange={handleInputChange}
+                  label="GitHub Client ID"
+                  placeholder="输入你注册的 GitHub OAuth APP 的 ID"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12} md={6}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="GitHubClientSecret">GitHub Client Secret</InputLabel>
+                <OutlinedInput
+                  id="GitHubClientSecret"
+                  name="GitHubClientSecret"
+                  value={inputs.GitHubClientSecret || ''}
+                  onChange={handleInputChange}
+                  label="GitHub Client Secret"
+                  placeholder="敏感信息不会发送到前端显示"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={submitGitHubOAuth}>
+                保存 GitHub OAuth 设置
+              </Button>
+            </Grid>
+          </Grid>
+        </SubCard>
+        <SubCard
+          title="配置 WeChat Server"
+          subTitle={
+            <span>
+              用以支持通过微信进行登录注册，
+              <a href="https://github.com/songquanpeng/wechat-server" target="_blank" rel="noopener noreferrer">
+                点击此处
+              </a>
+              了解 WeChat Server
+            </span>
+          }
+        >
+          <Grid container spacing={{ xs: 3, sm: 2, md: 4 }}>
+            <Grid xs={12} md={4}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="WeChatServerAddress">WeChat Server 服务器地址</InputLabel>
+                <OutlinedInput
+                  id="WeChatServerAddress"
+                  name="WeChatServerAddress"
+                  value={inputs.WeChatServerAddress || ''}
+                  onChange={handleInputChange}
+                  label="WeChat Server 服务器地址"
+                  placeholder="例如：https://yourdomain.com"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12} md={4}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="WeChatServerToken">WeChat Server 访问凭证</InputLabel>
+                <OutlinedInput
+                  id="WeChatServerToken"
+                  name="WeChatServerToken"
+                  value={inputs.WeChatServerToken || ''}
+                  onChange={handleInputChange}
+                  label="WeChat Server 访问凭证"
+                  placeholder="敏感信息不会发送到前端显示"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12} md={4}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="WeChatAccountQRCodeImageURL">微信公众号二维码图片链接</InputLabel>
+                <OutlinedInput
+                  id="WeChatAccountQRCodeImageURL"
+                  name="WeChatAccountQRCodeImageURL"
+                  value={inputs.WeChatAccountQRCodeImageURL || ''}
+                  onChange={handleInputChange}
+                  label="微信公众号二维码图片链接"
+                  placeholder="输入一个图片链接"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={submitWeChat}>
+                保存 WeChat Server 设置
+              </Button>
+            </Grid>
+          </Grid>
+        </SubCard>
+        <SubCard
+          title="配置 Turnstile"
+          subTitle={
+            <span>
+              用以支持用户校验，
+              <a href="https://dash.cloudflare.com/" target="_blank" rel="noopener noreferrer">
+                点击此处
+              </a>
+              管理你的 Turnstile Sites，推荐选择 Invisible Widget Type
+            </span>
+          }
+        >
+          <Grid container spacing={{ xs: 3, sm: 2, md: 4 }}>
+            <Grid xs={12} md={6}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="TurnstileSiteKey">Turnstile Site Key</InputLabel>
+                <OutlinedInput
+                  id="TurnstileSiteKey"
+                  name="TurnstileSiteKey"
+                  value={inputs.TurnstileSiteKey || ''}
+                  onChange={handleInputChange}
+                  label="Turnstile Site Key"
+                  placeholder="输入你注册的 Turnstile Site Key"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12} md={6}>
+              <FormControl fullWidth>
+                <InputLabel htmlFor="TurnstileSecretKey">Turnstile Secret Key</InputLabel>
+                <OutlinedInput
+                  id="TurnstileSecretKey"
+                  name="TurnstileSecretKey"
+                  type="password"
+                  value={inputs.TurnstileSecretKey || ''}
+                  onChange={handleInputChange}
+                  label="Turnstile Secret Key"
+                  placeholder="敏感信息不会发送到前端显示"
+                  disabled={loading}
+                />
+              </FormControl>
+            </Grid>
+            <Grid xs={12}>
+              <Button variant="contained" onClick={submitTurnstile}>
+                保存 Turnstile 设置
+              </Button>
+            </Grid>
+          </Grid>
+        </SubCard>
+      </Stack>
+      <Dialog open={showPasswordWarningModal} onClose={() => setShowPasswordWarningModal(false)} maxWidth={'md'}>
+        <DialogTitle sx={{ margin: '0px', fontWeight: 700, lineHeight: '1.55556', padding: '24px', fontSize: '1.125rem' }}>
+          警告
+        </DialogTitle>
+        <Divider />
+        <DialogContent>取消密码登录将导致所有未绑定其他登录方式的用户（包括管理员）无法通过密码登录，确认取消？</DialogContent>
+        <DialogActions>
+          <Button onClick={() => setShowPasswordWarningModal(false)}>取消</Button>
+          <Button
+            sx={{ color: 'error.main' }}
+            onClick={async () => {
+              setShowPasswordWarningModal(false);
+              await updateOption('PasswordLoginEnabled', 'false');
+            }}
+          >
+            确定
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export default SystemSetting;

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 (
+    <div role="tabpanel" hidden={value !== index} id={`setting-tabpanel-${index}`} aria-labelledby={`setting-tab-${index}`} {...other}>
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+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 (
+    <>
+      <Card>
+        <AdminContainer>
+          <Box sx={{ width: '100%' }}>
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+              <Tabs value={value} onChange={handleChange} variant="scrollable" scrollButtons="auto">
+                <Tab label="运营设置" {...a11yProps(0)} icon={<IconActivity />} iconPosition="start" />
+                <Tab label="系统设置" {...a11yProps(1)} icon={<IconSettings />} iconPosition="start" />
+                <Tab label="其他设置" {...a11yProps(2)} icon={<IconSettings2 />} iconPosition="start" />
+              </Tabs>
+            </Box>
+            <CustomTabPanel value={value} index={0}>
+              <OperationSetting />
+            </CustomTabPanel>
+            <CustomTabPanel value={value} index={1}>
+              <SystemSetting />
+            </CustomTabPanel>
+            <CustomTabPanel value={value} index={2}>
+              <OtherSetting />
+            </CustomTabPanel>
+          </Box>
+        </AdminContainer>
+      </Card>
+    </>
+  );
+};
+
+export default Setting;