diff --git a/components/JustifyLayout/ImageModal.tsx b/components/JustifyLayout/ImageModal.tsx
new file mode 100644
index 00000000..4ffb22be
--- /dev/null
+++ b/components/JustifyLayout/ImageModal.tsx
@@ -0,0 +1,53 @@
+import { handleImageUrl } from "@/hooks";
+import { Card, Divider, Modal, Space, Tag } from "antd";
+import Image from "next/image";
+
+interface Props {
+ image?: EagleUse.Image;
+ open?: boolean;
+ onCancel?: () => void;
+}
+
+const ImageModal = ({ image, open, onCancel }: Props) => {
+ if (!image) return;
+
+ return (
+ <>
+
+
+
+
+
+
+
+ {image.tags.map((item) => (
+ {item.name}
+ ))}
+
+
基本信息
+
+
+
+ >
+ );
+};
+
+export default ImageModal;
diff --git a/components/JustifyLayout/index.tsx b/components/JustifyLayout/index.tsx
index 91550dcf..aa2c9c7d 100644
--- a/components/JustifyLayout/index.tsx
+++ b/components/JustifyLayout/index.tsx
@@ -7,6 +7,7 @@ import { useRecoilState } from "recoil";
import { rightBasicState } from "@/store";
import _ from "lodash";
import { useSize } from "ahooks";
+import ImageModal from "./ImageModal";
interface LayoutBox {
aspectRatio: number;
@@ -57,6 +58,9 @@ const JustifyLayout = ({ infiniteScroll, header }: Props) => {
const { data, loadMore, loadingMore, noMore } = infiniteScroll;
const images = useMemo(() => data.list, [data.list]);
const size = useSize(() => document.body);
+ const [open, setOpen] = useState(false);
+
+ const isPC = useMemo(() => size?.width > token.screenXL, [size, token]);
useEffect(() => {
if (!size || !size.width) return;
@@ -123,6 +127,10 @@ const JustifyLayout = ({ infiniteScroll, header }: Props) => {
bordered={false}
bodyStyle={{ padding: 0, ...item }}
onClick={() => {
+ if (!isPC) {
+ setOpen(true);
+ }
+
setRightBasic({
...rightBasic,
image,
@@ -143,6 +151,12 @@ const JustifyLayout = ({ infiniteScroll, header }: Props) => {
{loadmore()}
+
+ setOpen(false)}
+ />
);