✨ 柱子信息可复制

src/app/components/CopyButton.tsx

@@ -8,34 +8,58 @@ import {
 import {
  Button,
  ButtonOwnProps,
- Snackbar
+ IconButton,
+ IconButtonOwnProps,
+ Snackbar,
+ SxProps,
+ Theme
 } from "@mui/material";
 import {
  ContentCopy as ContentCopyIcon
 } from '@mui/icons-material';
 import {
  AlertDialog
 } from '../tools/pi/page';
-export default function CopyButton(props: {
+import MouseOverPopover from './Popover';
+function CopyButton(props: {
  children: string;
  add?: ButtonOwnProps;
+}): JSX.Element;
+function CopyButton(props: {
+ children: string;
+ onlyIcon: true;
+ add?: IconButtonOwnProps;
+}): JSX.Element;
+function CopyButton(props: {
+ children: string;
+ onlyIcon?: boolean;
+ add?: ButtonOwnProps | IconButtonOwnProps;
 }) {
  const [showCopyDoneDialog, setShowCopyDoneDialog] = useState<boolean>(false),
  [copyError, setCopyError] = useState<string>(""),
- [showCopyErrorDialog, setShowCopyErrorDialog] = useState<boolean>(false);
+ [showCopyErrorDialog, setShowCopyErrorDialog] = useState<boolean>(false),
+ handleCopy = () => {
+ navigator.clipboard.writeText(props.children).then(() => {
+ setShowCopyDoneDialog(true);
+ }).catch(error => {
+ setCopyError(`复制结果时出现错误，请报告给开发人员：${error}`);
+ setShowCopyErrorDialog(true);
+ });
+ },
+ add = "add" in props ? props.add : {},
+ sx: SxProps<Theme> = {
+ ...("sx" in add ? add.sx : {}),
+ cursor: "copy"
+ };
  return (
  <>
- <Button {...props.add} startIcon={<ContentCopyIcon />} sx={{
- ...props.add.sx,
- cursor: "copy"
- }} onClick={() => {
- navigator.clipboard.writeText(props.children).then(() => {
- setShowCopyDoneDialog(true);
- }).catch(error => {
- setCopyError(`复制结果时出现错误，请报告给开发人员：${error}`);
- setShowCopyErrorDialog(true);
- });
- }}>{get('copy.复制')}</Button>
+ {props.onlyIcon ? <MouseOverPopover text={get('copy.复制')}>
+ <IconButton {...props.add} sx={sx} onClick={handleCopy} aria-label={get('copy.复制')}>
+ <ContentCopyIcon />
+ </IconButton>
+ </MouseOverPopover> : <Button aria-label={get('copy.复制')} {...props.add as ButtonOwnProps} startIcon={<ContentCopyIcon />} sx={sx} onClick={handleCopy}>
+ {get('copy.复制')}
+ </Button>}
  <Snackbar open={showCopyDoneDialog} message={get('copy.已把结果复制至剪贴板。')} onClose={() => {
  setShowCopyDoneDialog(false);
  }} />
@@ -45,3 +69,4 @@ export default function CopyButton(props: {
  </>
  );
 }
+export default CopyButton;

src/app/extendedTools/page.tsx

@@ -54,7 +54,7 @@ export default function ExtendedTools() {
  border: "none"
  }} src={`/extendedfiles/${tool.to}/${tool.main}`} />
  </Box>
- <section id="outside" />
+ <Box component="article" id="outside" />
  </>
  );
 }

src/app/tools/pillar/SingleCollocation.tsx

@@ -1,5 +1,6 @@
 "use client";
 import {
+ Box,
  Paper,
  Typography
 } from "@mui/material";
@@ -12,6 +13,7 @@ import {
 import {
  collocation
 } from "./page";
+import CopyButton from "../../components/CopyButton";
 export default function SingleCollocation(props: {
  collocation: collocation;
 }) {
@@ -24,9 +26,18 @@ export default function SingleCollocation(props: {
  }} onMouseLeave={event => {
  setElevation(2); // reset to default
  }}>
- {props.collocation.map((value, index) => <Typography sx={{
- mb: index === 1 ? 1 : ""
- }} key={index}>{get(`pillar.collocationShow.${index}`)}: {value}</Typography>)}
+ {props.collocation.map((value, index) => (
+ <Box key={index} display="flex" alignItems="center">
+ <Typography sx={{
+ mb: index === 1 ? 1 : ""
+ }}>
+ {get(`pillar.collocationShow.${index}`)}: {value}
+ </Typography>
+ <CopyButton onlyIcon>
+ {value.toString()}
+ </CopyButton>
+ </Box>
+ ))}
  </Paper>
  );
 }

src/app/tools/pillar/page.tsx

@@ -34,7 +34,7 @@ export type collocation = [number, number, number, number];
 export default function Pillar(): JSX.Element {
  const [type, setType] = useState<type>(2),
  [length, setLength] = useState<number>(0),
- pillars = useMemo<collocation[]>(() => [[1, 1, 1, 1]], [type, length]);
+ pillars = useMemo<collocation[]>(() => [[1, 2, 3, 4]], [type, length]);
  return (
  <>
  <FormGroup>