From 4d31e9a790a145d5def292b31064e13fc40d4ca4 Mon Sep 17 00:00:00 2001
From: Xutaotaotao <xutaotao1108@outlook.com>
Date: Mon, 13 May 2024 20:09:38 +0800
Subject: [PATCH] feat: add page title

---
 src/layouts/index.tsx                           | 8 +++++++-
 src/pages/imageCompress/batchImageCompress.tsx  | 3 ++-
 src/pages/imageCompress/singleImageCompress.tsx | 7 ++++---
 src/pages/jsonFormatting.tsx                    | 3 ++-
 src/utils/const.ts                              | 2 +-
 5 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index 4b5c873..9a0977f 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -4,12 +4,14 @@ import {
   IconGithubLogo,
   IconLikeHeart,
 } from "@douyinfe/semi-icons";
-import { Button, Layout, Nav, Popover,Image, Row, Col } from "@douyinfe/semi-ui";
+import { Button, Layout, Nav, Popover,Image, Row, Col,Typography } from "@douyinfe/semi-ui";
 import Logo from "@/assets/img/XTools.svg";
 import "@/assets/normalize.css";
 import { NAV_MAP } from "./menu";
 const { Header, Sider, Content } = Layout;
 
+const { Text,Title } = Typography;
+
 
 const XLayout = () => {
   const location = useLocation();
@@ -111,6 +113,10 @@ const XLayout = () => {
               backgroundColor: "var(--semi-color-bg-0)",
             }}
           >
+            <div style={{display: "flex",alignItems:'center',marginBottom: "12px"}}>
+            <Title heading={3} style={{marginBottom: "12px"}}>{NAV_MAP.find(item => item.itemKey === location.pathname)?.text}</Title>
+            <Text style={{marginLeft: "12px"}}>{NAV_MAP.find(item => item.itemKey === location.pathname)?.des}</Text>
+            </div>
             <Outlet />
           </Content>
         </Layout>
diff --git a/src/pages/imageCompress/batchImageCompress.tsx b/src/pages/imageCompress/batchImageCompress.tsx
index ee0cdab..5d4b105 100644
--- a/src/pages/imageCompress/batchImageCompress.tsx
+++ b/src/pages/imageCompress/batchImageCompress.tsx
@@ -6,6 +6,7 @@ import Compressor from "compressorjs";
 import { useRef, useState } from "react";
 import { UploadFile, UploadProps } from "antd/lib/upload/interface";
 import { FormApi } from "@douyinfe/semi-ui/lib/es/form";
+import { BODY_HEIGHT } from "@/utils/const";
 
 const { Dragger } = Upload;
 
@@ -187,7 +188,7 @@ export default function BatchImageCompress() {
  };
 
   return (
-    <div style={{ height: "calc(100vh - 170px)",width: "100%" }}>
+    <div style={{ height: BODY_HEIGHT,width: "100%" }}>
       <Spin
         spinning={spinningStatus.spinning}
         tip={spinningStatus.tip}
diff --git a/src/pages/imageCompress/singleImageCompress.tsx b/src/pages/imageCompress/singleImageCompress.tsx
index ae30800..824b22c 100644
--- a/src/pages/imageCompress/singleImageCompress.tsx
+++ b/src/pages/imageCompress/singleImageCompress.tsx
@@ -1,3 +1,4 @@
+import { BODY_HEIGHT } from "@/utils/const";
 import { InboxOutlined } from "@ant-design/icons";
 import { Button, Form, Image } from "@douyinfe/semi-ui";
 import { FormApi } from "@douyinfe/semi-ui/lib/es/form";
@@ -86,11 +87,11 @@ export default function ImageCompress() {
   };
 
   return (
-    <Row gutter={[16, 16]} style={{overflow:'auto',height: "calc(100vh - 100px"}}>
+    <Row gutter={[16, 16]} style={{overflow:'auto',height: BODY_HEIGHT}}>
       <Col lg={6} xs={24}>
         <Card
           title="设置"
-          styles={{ body: { height: "calc(100vh - 200px", overflow: "auto" } }}
+          styles={{ body: { height: BODY_HEIGHT, overflow: "auto" } }}
         >
           <Form
             getFormApi={(formApi) => (api.current = formApi)}
@@ -144,7 +145,7 @@ export default function ImageCompress() {
       </Col>
       <Col lg={18} xs={24}>
         {currentImg ? (
-          <div style={{ height: "calc(100vh - 170px)", overflow: "auto" }}>
+          <div style={{ height: BODY_HEIGHT, overflow: "auto" }}>
             <Card
               title={`原图 【大小】：${(file?.size || 0) / 1024}KB`}
               styles={{ body: { textAlign: "center" } }}
diff --git a/src/pages/jsonFormatting.tsx b/src/pages/jsonFormatting.tsx
index 7bacc62..a5dfd8a 100644
--- a/src/pages/jsonFormatting.tsx
+++ b/src/pages/jsonFormatting.tsx
@@ -3,6 +3,7 @@ import { Col, Row, message } from "antd"
 import { Input } from 'antd';
 import ReactJson from 'react-json-view'
 import './index.scss'
+import { BODY_HEIGHT } from "@/utils/const";
 
 const { TextArea } = Input;
 
@@ -19,7 +20,7 @@ const JsonFormatting = () => {
 
   return <Row gutter={[16, 16]}>
     <Col lg={10} xs={24}>
-      <TextArea placeholder="请输入想要格式化的数据" className="json-input" onChange={(e) => handleJsonData(e)}/>
+      <TextArea style={{height:BODY_HEIGHT}} placeholder="请输入想要格式化的数据" onChange={(e) => handleJsonData(e)}/>
     </Col>
     <Col lg={14} xs={24}>
       <div className="json-input">
diff --git a/src/utils/const.ts b/src/utils/const.ts
index 509755c..84273f6 100644
--- a/src/utils/const.ts
+++ b/src/utils/const.ts
@@ -1 +1 @@
-export const BODY_HEIGHT = 'calc(100vh - 150px)';
\ No newline at end of file
+export const BODY_HEIGHT = 'calc(100vh - 200px)';
\ No newline at end of file