feat: 🎸 ipad图片详细信息展示

✅ Closes: #74
meetqy · Feb 13, 2023 · a6175cb · a6175cb
1 parent 6adafd5
commit a6175cb
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/components/JustifyLayout/ImageModal.tsx 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 (
+    <>
+      <Modal
+        open={open}
+        title={null}
+        footer={null}
+        width={"85%"}
+        onCancel={onCancel}
+        centered
+        bodyStyle={{ height: "80vh", overflow: "hidden" }}
+      >
+        <Card
+          type="inner"
+          style={{
+            textAlign: "center",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+          }}
+          title={image.name}
+          bodyStyle={{ height: "100%", overflowY: "scroll" }}
+        >
+          <div>
+            <div style={{ position: "relative", width: "100%", height: 400 }}>
+              <Image src={handleImageUrl(image, true)} fill alt="" />
+            </div>
+            <Space size={[0, 8]} wrap style={{ marginTop: 20 }}>
+              {image.tags.map((item) => (
+                <Tag key={item.id}>{item.name}</Tag>
+              ))}
+            </Space>
+            <Divider>基本信息</Divider>
+          </div>
+        </Card>
+      </Modal>
+    </>
+  );
+};
+
+export default ImageModal;
diff --git 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) => {
         <Row style={{ paddingBottom: 20 }} justify="center">
           <Col>{loadmore()}</Col>
         </Row>
+
+        <ImageModal
+          image={activeImage}
+          open={open}
+          onCancel={() => setOpen(false)}
+        />
       </Layout.Content>
     </Layout>
   );