feat: add imgFormatConversion

package.json

@@ -21,6 +21,7 @@
     "antd": "^5.16.4",
     "compressorjs": "^1.2.1",
     "gh-pages": "^6.1.1",
+    "heic2any": "^0.0.4",
     "json-diff-kit": "^1.0.29",
     "lodash": "^4.17.21",
     "react-draggable": "^4.4.6",

src/.umi/core/route.tsx

@@ -19,13 +19,14 @@ if (process.env.NODE_ENV === 'development') {
 import React from 'react';
 
 export async function getRoutes() {
-  const routes = {"imageCompress/singleImageCompress":{"path":"imageCompress/singleImageCompress","id":"imageCompress/singleImageCompress","parentId":"@@/global-layout"},"imageCompress/batchImageCompress":{"path":"imageCompress/batchImageCompress","id":"imageCompress/batchImageCompress","parentId":"@@/global-layout"},"imageCompress/index":{"path":"imageCompress","id":"imageCompress/index","parentId":"@@/global-layout"},"jsonFormatting":{"path":"jsonFormatting","id":"jsonFormatting","parentId":"@@/global-layout"},"imageSlicing":{"path":"imageSlicing","id":"imageSlicing","parentId":"@@/global-layout"},"jsonDiff":{"path":"jsonDiff","id":"jsonDiff","parentId":"@@/global-layout"},"imgScan":{"path":"imgScan","id":"imgScan","parentId":"@@/global-layout"},"index":{"path":"/","id":"index","parentId":"@@/global-layout"},"home":{"path":"home","id":"home","parentId":"@@/global-layout"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const;
+  const routes = {"imageCompress/singleImageCompress":{"path":"imageCompress/singleImageCompress","id":"imageCompress/singleImageCompress","parentId":"@@/global-layout"},"imageCompress/batchImageCompress":{"path":"imageCompress/batchImageCompress","id":"imageCompress/batchImageCompress","parentId":"@@/global-layout"},"imageCompress/index":{"path":"imageCompress","id":"imageCompress/index","parentId":"@@/global-layout"},"imgFormatConversion":{"path":"imgFormatConversion","id":"imgFormatConversion","parentId":"@@/global-layout"},"jsonFormatting":{"path":"jsonFormatting","id":"jsonFormatting","parentId":"@@/global-layout"},"imageSlicing":{"path":"imageSlicing","id":"imageSlicing","parentId":"@@/global-layout"},"jsonDiff":{"path":"jsonDiff","id":"jsonDiff","parentId":"@@/global-layout"},"imgScan":{"path":"imgScan","id":"imgScan","parentId":"@@/global-layout"},"index":{"path":"/","id":"index","parentId":"@@/global-layout"},"home":{"path":"home","id":"home","parentId":"@@/global-layout"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const;
   return {
     routes,
     routeComponents: {
 'imageCompress/singleImageCompress': React.lazy(() => import(/* webpackChunkName: "src__pages__imageCompress__singleImageCompress" */'../../../src/pages/imageCompress/singleImageCompress.tsx')),
 'imageCompress/batchImageCompress': React.lazy(() => import(/* webpackChunkName: "src__pages__imageCompress__batchImageCompress" */'../../../src/pages/imageCompress/batchImageCompress.tsx')),
 'imageCompress/index': React.lazy(() => import(/* webpackChunkName: "src__pages__imageCompress__index" */'../../../src/pages/imageCompress/index.tsx')),
+'imgFormatConversion': React.lazy(() => import(/* webpackChunkName: "src__pages__imgFormatConversion" */'../../../src/pages/imgFormatConversion.tsx')),
 'jsonFormatting': React.lazy(() => import(/* webpackChunkName: "src__pages__jsonFormatting" */'../../../src/pages/jsonFormatting.tsx')),
 'imageSlicing': React.lazy(() => import(/* webpackChunkName: "src__pages__imageSlicing" */'../../../src/pages/imageSlicing.tsx')),
 'jsonDiff': React.lazy(() => import(/* webpackChunkName: "src__pages__jsonDiff" */'../../../src/pages/jsonDiff.tsx')),

src/layouts/index.tsx

@@ -4,61 +4,12 @@ import {
   IconGithubLogo,
   IconLikeHeart,
 } from "@douyinfe/semi-icons";
-import { IconImage, IconIntro } from "@douyinfe/semi-icons-lab";
 import { Button, Layout, Nav, Popover,Image, Row, Col } from "@douyinfe/semi-ui";
 import Logo from "@/assets/img/XTools.svg";
-import ImageCompressSvg from "@/assets/img/imageCompress.svg";
-import JsonSvg from "@/assets/img/json.svg";
-import JsonDiffSvg from "@/assets/img/jsonDiff.svg";
-import imgScanSvg from "@/assets/img/imgScan.svg";
 import "@/assets/normalize.css";
-import styles from "./index.module.scss";
+import { NAV_MAP } from "./menu";
+const { Header, Sider, Content } = Layout;
 
-const { Header, Footer, Sider, Content } = Layout;
-
-export const NavMap = [
-  {
-    itemKey: "/home",
-    text: "首页",
-    icon: <IconIntro />,
-    className: styles.navItem,
-  },
-  {
-    itemKey: "/jsonFormatting",
-    text: "JSON格式化",
-    icon: <img src={JsonSvg} />,
-    className: styles.navItem1,
-    des:'将JSON格式化为可读性更好的格式'
-  },
-  {
-    itemKey: "/jsonDiff",
-    text: "JSON对比",
-    icon: <img src={JsonDiffSvg} />,
-    className: styles.navItem1,
-    des:'比较两个JSON对象，并展示差异'
-  },
-  {
-    itemKey: "/imageSlicing",
-    text: "图片分割",
-    icon: <IconImage />,
-    className: styles.navItem1,
-    des:'将图片切割成多张小图片'
-  },
-  {
-    itemKey: "/imageCompress",
-    text: "图片压缩",
-    icon: <img src={ImageCompressSvg} />,
-    className: styles.navItem1,
-    des:'压缩图片大小'
-  },
-  {
-    itemKey: "/imgScan",
-    text: "图片识别文字",
-    icon: <img src={imgScanSvg} />,
-    className: styles.navItem1,
-    des:'识别图片中的文字'
-  },
-];
 
 const XLayout = () => {
   const location = useLocation();
@@ -145,7 +96,7 @@ const XLayout = () => {
               onSelect={(item: any) => {
                 history.push(item.itemKey as string);
               }}
-              items={NavMap}
+              items={NAV_MAP}
               footer={{
                 collapseButton: true,
               }}

src/layouts/menu.tsx

@@ -0,0 +1,51 @@
+
+import { IconImage, IconIntro } from "@douyinfe/semi-icons-lab";
+import ImageCompressSvg from "@/assets/img/imageCompress.svg";
+import JsonSvg from "@/assets/img/json.svg";
+import JsonDiffSvg from "@/assets/img/jsonDiff.svg";
+import imgScanSvg from "@/assets/img/imgScan.svg";
+import imgFormatConversion from "@/assets/img/imgFormatConversion.svg";
+
+export const NAV_MAP = [
+  {
+    itemKey: "/home",
+    text: "首页",
+    icon: <IconIntro />,
+  },
+  {
+    itemKey: "/jsonFormatting",
+    text: "JSON格式化",
+    icon: <img src={JsonSvg} />,
+    des:'将JSON格式化为可读性更好的格式'
+  },
+  {
+    itemKey: "/jsonDiff",
+    text: "JSON对比",
+    icon: <img src={JsonDiffSvg} />,
+    des:'比较两个JSON对象，并展示差异'
+  },
+  {
+    itemKey: "/imageSlicing",
+    text: "图片分割",
+    icon: <IconImage />,
+    des:'将图片切割成多张小图片'
+  },
+  {
+    itemKey: "/imageCompress",
+    text: "图片压缩",
+    icon: <img src={ImageCompressSvg} />,
+    des:'压缩图片大小'
+  },
+  {
+    itemKey: "/imgScan",
+    text: "图片识别文字",
+    icon: <img src={imgScanSvg} />,
+    des:'识别图片中的文字'
+  },
+  {
+    itemKey: "/imgFormatConversion",
+    text: "图片格式转换",
+    icon: <img src={imgFormatConversion} />,
+    des:'图片格式互相转换'
+  },
+];

src/pages/home.tsx

@@ -2,7 +2,7 @@ import { Card, Typography } from "@douyinfe/semi-ui";
 import { Col, Row } from "antd";
 import React from "react";
 import { history } from "umi";
-import { NavMap } from "../layouts/index";
+import { NAV_MAP } from "../layouts/menu";
 
 const { Title,Text } = Typography;
 
@@ -12,7 +12,7 @@ const Home = () => {
   return (
     <div>
       <Row gutter={[16, 16]}>
-        {NavMap.filter((item) => item.itemKey !== "/home").map(
+        {NAV_MAP.filter((item) => item.itemKey !== "/home").map(
           (item, index) => (
             <Col
               key={item.itemKey}