feat: add page title

Xutaotaotao · May 13, 2024 · 4d31e9a · 4d31e9a
1 parent 8fb7586
commit 4d31e9a
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1 +1 @@
-export const BODY_HEIGHT = 'calc(100vh - 150px)';
+export const BODY_HEIGHT = 'calc(100vh - 200px)';