Skip to content

Commit

Permalink
feat: JsonFormatting
Browse files Browse the repository at this point in the history
  • Loading branch information
Xutaotaotao committed Apr 30, 2024
1 parent fa6ec5f commit a7cd372
Show file tree
Hide file tree
Showing 7 changed files with 202 additions and 6 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"gh-pages": "^6.1.1",
"react-draggable": "^4.4.6",
"react-i18next": "^14.1.1",
"react-json-view": "^1.21.3",
"typescript": "^5.0.3"
}
}
3 changes: 2 additions & 1 deletion src/.umi/core/route.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,11 @@ if (process.env.NODE_ENV === 'development') {
import React from 'react';

export async function getRoutes() {
const routes = {"imageSlicing":{"path":"imageSlicing","id":"imageSlicing","parentId":"@@/global-layout"},"index":{"path":"/","id":"index","parentId":"@@/global-layout"},"docs":{"path":"docs","id":"docs","parentId":"@@/global-layout"},"home":{"path":"home","id":"home","parentId":"@@/global-layout"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const;
const routes = {"jsonFormatting":{"path":"jsonFormatting","id":"jsonFormatting","parentId":"@@/global-layout"},"imageSlicing":{"path":"imageSlicing","id":"imageSlicing","parentId":"@@/global-layout"},"index":{"path":"/","id":"index","parentId":"@@/global-layout"},"docs":{"path":"docs","id":"docs","parentId":"@@/global-layout"},"home":{"path":"home","id":"home","parentId":"@@/global-layout"},"@@/global-layout":{"id":"@@/global-layout","path":"/","isLayout":true}} as const;
return {
routes,
routeComponents: {
'jsonFormatting': React.lazy(() => import(/* webpackChunkName: "src__pages__jsonFormatting" */'../../../src/pages/jsonFormatting.tsx')),
'imageSlicing': React.lazy(() => import(/* webpackChunkName: "src__pages__imageSlicing" */'../../../src/pages/imageSlicing.tsx')),
'index': React.lazy(() => import(/* webpackChunkName: "src__pages__index" */'../../../src/pages/index.tsx')),
'docs': React.lazy(() => import(/* webpackChunkName: "src__pages__docs" */'../../../src/pages/docs.tsx')),
Expand Down
1 change: 1 addition & 0 deletions src/assets/img/json.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 5 additions & 3 deletions src/layouts/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,22 @@ import { Nav, Layout,Typography } from "@douyinfe/semi-ui";
import {
IconSemiLogo,
} from "@douyinfe/semi-icons";
import { IconImage } from "@douyinfe/semi-icons-lab";
import { IconImage,IconIntro } from "@douyinfe/semi-icons-lab";
import styles from "./index.module.scss";
import "@/assets/normalize.css";
import { Outlet, useLocation, history } from "umi";
import Logo from "@/assets/img/XTools.svg";
import { OnSelectedData } from "@douyinfe/semi-ui/lib/es/navigation";
import Logo from "@/assets/img/XTools.svg";
import JsonSvg from "@/assets/img/json.svg";

const { Content } = Layout;

const {Title} = Typography

const NavMap = [
{itemKey: "/home", text: "首页", icon: <IconSemiLogo className={styles.iconIntro}/>, className: styles.navItem},
{itemKey: "/home", text: "首页", icon: <IconIntro className={styles.iconIntro}/>, className: styles.navItem},
{itemKey: "/imageSlicing", text: "图片分割", icon: <IconImage className={styles.iconHeart}/>, className: styles.navItem1},
{itemKey: "/jsonFormatting", text: "JSON格式化", icon: <img src={JsonSvg} className={styles.iconHeart}/>, className: styles.navItem1},
]

const XLayout = () => {
Expand Down
4 changes: 4 additions & 0 deletions src/pages/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,7 @@
border-radius: 6px;
}

.json-input{
height: calc(100vh - 100px) !important;
overflow-y: auto;
}
32 changes: 32 additions & 0 deletions src/pages/jsonFormatting.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { useState } from "react";
import { Col, Row, message } from "antd"
import { Input } from 'antd';
import ReactJson from 'react-json-view'
import './index.scss'

const { TextArea } = Input;

const JsonFormatting = () => {
const [jsonData, setJsonData] = useState({});

const handleJsonData = (e:any) => {
try {
setJsonData(JSON.parse(e.target.value))
} catch {
message.error('请检查输入的JSON格式是否正确')
}
}

return <Row gutter={[16, 16]}>
<Col span={10}>
<TextArea className="json-input" onChange={(e) => handleJsonData(e)}/>
</Col>
<Col span={14}>
<div className="json-input">
<ReactJson src={jsonData} theme={"monokai"}/>
</div>
</Col>
</Row>
}

export default JsonFormatting
Loading

0 comments on commit a7cd372

Please sign in to comment.