fix: Popup message when copying fails

2024-05-26 18:16:27 +08:00 · 2024-05-26 18:16:27 +08:00 · 7c9bf359fd
commit 7c9bf359fd
parent 2e7e563d75
7 changed files with 53 additions and 60 deletions
--- a/web/berry/src/utils/common.js
+++ b/web/berry/src/utils/common.js
@ -219,3 +219,14 @@ export function getChannelModels(type) {
  }
  return [];
 }
+
+export function copy(text, name = '') {
+  try {
+    navigator.clipboard.writeText(text);
+  } catch (error) {
+    text = `复制${name}失败，请手动复制：<br /><br />${text}`;
+    enqueueSnackbar(<SnackbarHTMLContent htmlContent={text} />, getSnackbarOptions('COPY'));
+    return;
+  }
+  showSuccess(`复制${name}成功！`);
+}
--- a/web/berry/src/views/Authentication/AuthForms/ResetPasswordForm.js
+++ b/web/berry/src/views/Authentication/AuthForms/ResetPasswordForm.js
@ -1,22 +1,22 @@
-import { useState, useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useState, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';

 // material-ui
-import { Button, Stack, Typography, Alert } from "@mui/material";
+import { Button, Stack, Typography, Alert } from '@mui/material';

 // assets
-import { showError, showInfo } from "utils/common";
-import { API } from "utils/api";
+import { showError, copy } from 'utils/common';
+import { API } from 'utils/api';

 // ===========================|| FIREBASE - REGISTER ||=========================== //

 const ResetPasswordForm = () => {
  const [searchParams] = useSearchParams();
  const [inputs, setInputs] = useState({
-    email: "",
-    token: "",
+    email: '',
+    token: ''
  });
-  const [newPassword, setNewPassword] = useState("");
+  const [newPassword, setNewPassword] = useState('');

  const submit = async () => {
    const res = await API.post(`/api/user/reset`, inputs);
@ -24,31 +24,25 @@ const ResetPasswordForm = () => {
    if (success) {
      let password = res.data.data;
      setNewPassword(password);
-      navigator.clipboard.writeText(password);
-      showInfo(`新密码已复制到剪贴板：${password}`);
+      copy(password, '新密码');
    } else {
      showError(message);
    }
  };

  useEffect(() => {
-    let email = searchParams.get("email");
-    let token = searchParams.get("token");
+    let email = searchParams.get('email');
+    let token = searchParams.get('token');
    setInputs({
      token,
-      email,
+      email
    });
  }, []);

  return (
-    <Stack
-      spacing={3}
-      padding={"24px"}
-      justifyContent={"center"}
-      alignItems={"center"}
-    >
+    <Stack spacing={3} padding={'24px'} justifyContent={'center'} alignItems={'center'}>
      {!inputs.email || !inputs.token ? (
-        <Typography variant="h3" sx={{ textDecoration: "none" }}>
+        <Typography variant="h3" sx={{ textDecoration: 'none' }}>
          无效的链接
        </Typography>
      ) : newPassword ? (
@ -57,14 +51,7 @@ const ResetPasswordForm = () => {
          请登录后及时修改密码
        </Alert>
      ) : (
-        <Button
-          fullWidth
-          onClick={submit}
-          size="large"
-          type="submit"
-          variant="contained"
-          color="primary"
-        >
+        <Button fullWidth onClick={submit} size="large" type="submit" variant="contained" color="primary">
          点击重置密码
        </Button>
      )}
--- a/web/berry/src/views/Channel/component/NameLabel.js
+++ b/web/berry/src/views/Channel/component/NameLabel.js
@ -1,20 +1,20 @@
-import PropTypes from "prop-types";
-import { Tooltip, Stack, Container } from "@mui/material";
-import Label from "ui-component/Label";
-import { styled } from "@mui/material/styles";
-import { showSuccess } from "utils/common";
+import PropTypes from 'prop-types';
+import { Tooltip, Stack, Container } from '@mui/material';
+import Label from 'ui-component/Label';
+import { styled } from '@mui/material/styles';
+import { showSuccess, copy } from 'utils/common';

 const TooltipContainer = styled(Container)({
-  maxHeight: "250px",
-  overflow: "auto",
-  "&::-webkit-scrollbar": {
-    width: "0px", // Set the width to 0 to hide the scrollbar
-  },
+  maxHeight: '250px',
+  overflow: 'auto',
+  '&::-webkit-scrollbar': {
+    width: '0px' // Set the width to 0 to hide the scrollbar
+  }
 });

 const NameLabel = ({ name, models }) => {
  let modelMap = [];
-  modelMap = models.split(",");
+  modelMap = models.split(',');
  modelMap.sort();

  return (
@ -28,8 +28,7 @@ const NameLabel = ({ name, models }) => {
                  variant="ghost"
                  key={index}
                  onClick={() => {
-                    navigator.clipboard.writeText(item);
-                    showSuccess("复制模型名称成功！");
+                    copy(item, '模型名称');
                  }}
                >
                  {item}
@ -48,7 +47,7 @@ const NameLabel = ({ name, models }) => {

 NameLabel.propTypes = {
  name: PropTypes.string,
-  models: PropTypes.string,
+  models: PropTypes.string
 };

 export default NameLabel;
--- a/web/berry/src/views/Profile/index.js
+++ b/web/berry/src/views/Profile/index.js
@ -21,7 +21,7 @@ import { IconBrandWechat, IconBrandGithub, IconMail } from '@tabler/icons-react'
 import Label from 'ui-component/Label';
 import { API } from 'utils/api';
 import { showError, showSuccess } from 'utils/common';
-import { onGitHubOAuthClicked, onLarkOAuthClicked } from 'utils/common';
+import { onGitHubOAuthClicked, onLarkOAuthClicked, copy } from 'utils/common';
 import * as Yup from 'yup';
 import WechatModal from 'views/Authentication/AuthForms/WechatModal';
 import { useSelector } from 'react-redux';
@ -90,8 +90,7 @@ export default function Profile() {
    const { success, message, data } = res.data;
    if (success) {
      setInputs((inputs) => ({ ...inputs, access_token: data }));
-      navigator.clipboard.writeText(data);
-      showSuccess(`令牌已重置并已复制到剪贴板`);
+      copy(data, '访问令牌');
    } else {
      showError(message);
    }
--- a/web/berry/src/views/Redemption/component/TableRow.js
+++ b/web/berry/src/views/Redemption/component/TableRow.js
@ -18,7 +18,7 @@ import {

 import Label from 'ui-component/Label';
 import TableSwitch from 'ui-component/Switch';
-import { timestamp2string, renderQuota, showSuccess } from 'utils/common';
+import { timestamp2string, renderQuota, copy } from 'utils/common';

 import { IconDotsVertical, IconEdit, IconTrash } from '@tabler/icons-react';

@ -83,8 +83,7 @@ export default function RedemptionTableRow({ item, manageRedemption, handleOpenM
              variant="contained"
              color="primary"
              onClick={() => {
-                navigator.clipboard.writeText(item.key);
-                showSuccess('已复制到剪贴板！');
+                copy(item.key, '兑换码');
              }}
            >
              复制
--- a/web/berry/src/views/Token/component/TableRow.js
+++ b/web/berry/src/views/Token/component/TableRow.js
@ -20,7 +20,7 @@ import {
 } from '@mui/material';

 import TableSwitch from 'ui-component/Switch';
-import { renderQuota, showSuccess, timestamp2string } from 'utils/common';
+import { renderQuota, timestamp2string, copy } from 'utils/common';

 import { IconDotsVertical, IconEdit, IconTrash, IconCaretDownFilled } from '@tabler/icons-react';

@ -141,8 +141,7 @@ export default function TokensTableRow({ item, manageToken, handleOpenModal, set
    if (type === 'link') {
      window.open(text);
    } else {
-      navigator.clipboard.writeText(text);
-      showSuccess('已复制到剪贴板！');
+      copy(text);
    }
    handleCloseMenu();
  };
@ -192,7 +191,7 @@ export default function TokensTableRow({ item, manageToken, handleOpenModal, set
              id={`switch-${item.id}`}
              checked={statusSwitch === 1}
              onChange={handleStatus}
-            // disabled={statusSwitch !== 1 && statusSwitch !== 2}
+              // disabled={statusSwitch !== 1 && statusSwitch !== 2}
            />
          </Tooltip>
        </TableCell>
@ -211,8 +210,7 @@ export default function TokensTableRow({ item, manageToken, handleOpenModal, set
              <Button
                color="primary"
                onClick={() => {
-                  navigator.clipboard.writeText(`sk-${item.key}`);
-                  showSuccess('已复制到剪贴板！');
+                  copy(`sk-${item.key}`);
                }}
              >
                复制
@ -222,7 +220,9 @@ export default function TokensTableRow({ item, manageToken, handleOpenModal, set
              </Button>
            </ButtonGroup>
            <ButtonGroup size="small" aria-label="split button">
-              <Button color="primary" onClick={(e) => handleCopy(COPY_OPTIONS[0], 'link')}>聊天</Button>
+              <Button color="primary" onClick={(e) => handleCopy(COPY_OPTIONS[0], 'link')}>
+                聊天
+              </Button>
              <Button size="small" onClick={(e) => handleOpenMenu(e, 'link')}>
                <IconCaretDownFilled size={'16px'} />
              </Button>
--- a/web/berry/src/views/Topup/component/InviteCard.js
+++ b/web/berry/src/views/Topup/component/InviteCard.js
@ -4,7 +4,7 @@ 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';
+import { showError, copy } from 'utils/common';

 const InviteCard = () => {
  const theme = useTheme();
@ -12,8 +12,7 @@ const InviteCard = () => {

  const handleInviteUrl = async () => {
    if (inviteUl) {
-      navigator.clipboard.writeText(inviteUl);
-      showSuccess(`邀请链接已复制到剪切板`);
+      copy(inviteUl, '邀请链接');
      return;
    }
    const res = await API.get('/api/user/aff');
@ -21,8 +20,7 @@ const InviteCard = () => {
    if (success) {
      let link = `${window.location.origin}/register?aff=${data}`;
      setInviteUrl(link);
-      navigator.clipboard.writeText(link);
-      showSuccess(`邀请链接已复制到剪切板`);
+      copy(link, '邀请链接');
    } else {
      showError(message);
    }