├── global.d.ts ├── typings.d.ts ├── src ├── utils │ ├── const.ts │ └── index.ts ├── pages │ ├── imgFilter │ │ ├── index.scss │ │ └── index.tsx │ ├── index.scss │ ├── imageCompress │ │ ├── index.tsx │ │ ├── singleImageCompress.tsx │ │ └── batchImageCompress.tsx │ ├── jsonFormatting.tsx │ ├── index.tsx │ ├── imgEditor │ │ └── index.tsx │ ├── home.tsx │ ├── chrono.tsx │ ├── imgScan.tsx │ ├── colorConversion.tsx │ ├── jsonDiff.tsx │ ├── imgFormatConversion.tsx │ └── imageSlicing.tsx ├── assets │ ├── img │ │ ├── test.jpg │ │ ├── FireShot Capture 061 - XTools - taotaoxu.com.png │ │ ├── FireShot Capture 062 - XTools - taotaoxu.com.png │ │ ├── jsonDiff.svg │ │ ├── imgEdit.svg │ │ ├── imgFormatConversion.svg │ │ ├── logo.svg │ │ ├── logo1.svg │ │ ├── imgScan.svg │ │ ├── XTools.svg │ │ ├── imageCompress.svg │ │ ├── color.svg │ │ ├── json.svg │ │ ├── biglogo1.svg │ │ ├── time.svg │ │ └── bigLogo.svg │ ├── normalize.css │ └── loading.css ├── .umi │ ├── core │ │ ├── routeProps.js │ │ ├── helmetContext.ts │ │ ├── routeProps.ts │ │ ├── pluginConfigJoi.d.ts │ │ ├── EmptyRoute.tsx │ │ ├── helmet.ts │ │ ├── defineApp.ts │ │ ├── plugin.ts │ │ ├── terminal.ts │ │ ├── history.ts │ │ ├── historyIntelli.ts │ │ ├── route.tsx │ │ ├── pluginConfig.ts │ │ └── polyfill.ts │ ├── tsconfig.json │ ├── exports.ts │ ├── umi.ts │ ├── testBrowser.tsx │ └── typings.d.ts ├── components │ └── ScreenSplitIcon │ │ ├── index.scss │ │ └── index.tsx ├── loading.tsx └── layouts │ ├── menu.tsx │ └── index.tsx ├── tsconfig.json ├── .gitignore ├── .umirc.ts ├── package.json ├── readme.md └── .github └── workflows └── deploy.yml /global.d.ts: -------------------------------------------------------------------------------- 1 | declare const ENV: string; -------------------------------------------------------------------------------- /typings.d.ts: -------------------------------------------------------------------------------- 1 | import 'umi/typings'; 2 | -------------------------------------------------------------------------------- /src/utils/const.ts: -------------------------------------------------------------------------------- 1 | export const BODY_HEIGHT = 'calc(100vh - 200px)'; -------------------------------------------------------------------------------- /src/pages/imgFilter/index.scss: -------------------------------------------------------------------------------- 1 | .filter-item{ 2 | padding: 16px; 3 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./src/.umi/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/img/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xutaotaotao/XTools/HEAD/src/assets/img/test.jpg -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | /src/.umi 4 | /src/.umi-production 5 | /.umi 6 | /.umi-production 7 | -------------------------------------------------------------------------------- /src/.umi/core/routeProps.js: -------------------------------------------------------------------------------- 1 | // src/.umi/core/routeProps.ts 2 | var routeProps_default = {}; 3 | export { 4 | routeProps_default as default 5 | }; 6 | -------------------------------------------------------------------------------- /src/.umi/core/helmetContext.ts: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | // This file is generated by Umi automatically 3 | // DO NOT CHANGE IT MANUALLY! 4 | export const context = {}; 5 | -------------------------------------------------------------------------------- /src/.umi/core/routeProps.ts: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | // This file is generated by Umi automatically 3 | // DO NOT CHANGE IT MANUALLY! 4 | export default { 5 | 6 | }; 7 | -------------------------------------------------------------------------------- /src/assets/img/FireShot Capture 061 - XTools - taotaoxu.com.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xutaotaotao/XTools/HEAD/src/assets/img/FireShot Capture 061 - XTools - taotaoxu.com.png -------------------------------------------------------------------------------- /src/assets/img/FireShot Capture 062 - XTools - taotaoxu.com.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xutaotaotao/XTools/HEAD/src/assets/img/FireShot Capture 062 - XTools - taotaoxu.com.png -------------------------------------------------------------------------------- /src/.umi/core/pluginConfigJoi.d.ts: -------------------------------------------------------------------------------- 1 | // This file is generated by Umi automatically 2 | // DO NOT CHANGE IT MANUALLY! 3 | // Created by Umi Plugin 4 | 5 | export interface IConfigFromPluginsJoi { 6 | 7 | } 8 | -------------------------------------------------------------------------------- /src/components/ScreenSplitIcon/index.scss: -------------------------------------------------------------------------------- 1 | .screen-split-icon { 2 | display: flex; 3 | flex-direction: column; 4 | } 5 | 6 | .row { 7 | display: flex; 8 | } 9 | 10 | .cell { 11 | border: 1px solid #ccc; 12 | background-color: #f0f0f0; 13 | } -------------------------------------------------------------------------------- /src/.umi/core/EmptyRoute.tsx: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | // This file is generated by Umi automatically 3 | // DO NOT CHANGE IT MANUALLY! 4 | import React from 'react'; 5 | import { Outlet, useOutletContext } from 'umi'; 6 | export default function EmptyRoute() { 7 | const context = useOutletContext(); 8 | return ; 9 | } 10 | -------------------------------------------------------------------------------- /src/.umi/core/helmet.ts: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | // This file is generated by Umi automatically 3 | // DO NOT CHANGE IT MANUALLY! 4 | import React from 'react'; 5 | import { HelmetProvider } from '/Users/xutaotao/Documents/s/XTools/node_modules/@umijs/renderer-react'; 6 | import { context } from './helmetContext'; 7 | 8 | export const innerProvider = (container) => { 9 | return React.createElement(HelmetProvider, { context }, container); 10 | } 11 | -------------------------------------------------------------------------------- /.umirc.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'umi'; 2 | 3 | console.log('process.env.ENV', process.env.ENV); 4 | 5 | export default defineConfig({ 6 | title: 'XTools', 7 | base: '/XTools/', 8 | publicPath: '/XTools/', 9 | exportStatic: {}, 10 | esbuildMinifyIIFE: true, 11 | define:{ 12 | ENV: process.env.ENV 13 | }, 14 | metas:[ 15 | { 16 | keywords:'XTools,xtools,xutaotao,图片压缩,图片切割,Json格式化,在线工具,前端工具,前端开发,专注工具，助力高效,完全本地化工具,无需云端,不担心隐私泄露' 17 | } 18 | ] 19 | }); -------------------------------------------------------------------------------- /src/loading.tsx: -------------------------------------------------------------------------------- 1 | import "@/assets/loading.css"; 2 | 3 | const Loding = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | ); 13 | }; 14 | export default Loding; 15 | -------------------------------------------------------------------------------- /src/pages/index.scss: -------------------------------------------------------------------------------- 1 | .home-container { 2 | width: 100%; 3 | height: calc(100vh - 100px); 4 | } 5 | 6 | .image-container { 7 | position: relative; 8 | overflow: hidden; 9 | height: calc(100vh - 90px); 10 | background-color: rgb(223, 223, 223); 11 | min-width: 400px; 12 | min-height: 400px; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | border-radius: 6px; 17 | } 18 | 19 | .json-input{ 20 | height: calc(100vh - 100px) !important; 21 | overflow-y: auto; 22 | } 23 | -------------------------------------------------------------------------------- /src/assets/img/jsonDiff.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/imageCompress/index.tsx: -------------------------------------------------------------------------------- 1 | import { Tabs, TabPane } from '@douyinfe/semi-ui'; 2 | import SingleImageCompress from './singleImageCompress'; 3 | import BatchImageCompress from './batchImageCompress'; 4 | 5 | export default function ImageCompress() { 6 | return
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
; 16 | } -------------------------------------------------------------------------------- /src/.umi/core/defineApp.ts: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | // This file is generated by Umi automatically 3 | // DO NOT CHANGE IT MANUALLY! 4 | interface IDefaultRuntimeConfig { 5 | onRouteChange?: (props: { routes: any, clientRoutes: any, location: any, action: any, isFirst: boolean }) => void; 6 | patchRoutes?: (props: { routes: any }) => void; 7 | patchClientRoutes?: (props: { routes: any }) => void; 8 | render?: (oldRender: () => void) => void; 9 | rootContainer?: (lastRootContainer: JSX.Element, args?: any) => void; 10 | [key: string]: any; 11 | } 12 | export type RuntimeConfig = IDefaultRuntimeConfig 13 | 14 | export function defineApp(config: RuntimeConfig): RuntimeConfig { 15 | return config; 16 | } 17 | -------------------------------------------------------------------------------- /src/components/ScreenSplitIcon/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './index.scss' 3 | 4 | interface ScreenSplitIconProps { 5 | x: number; 6 | y: number; 7 | size?: number; 8 | } 9 | 10 | const ScreenSplitIcon: React.FC = ({ x, y,size=50 }) => { 11 | // 创建一个二维数组来存储每个单元格 12 | const grid: null[][] = Array.from({ length: y }, () => 13 | Array.from({ length: x }, () => null) 14 | ); 15 | 16 | return ( 17 |
18 | {grid.map((row, rowIndex) => ( 19 |
20 | {row.map((_, colIndex) => ( 21 |
22 | ))} 23 |
24 | ))} 25 |
26 | ); 27 | }; 28 | 29 | export default ScreenSplitIcon; -------------------------------------------------------------------------------- /src/pages/jsonFormatting.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { Col, Row, message } from "antd" 3 | import { Input } from 'antd'; 4 | import ReactJson from 'react-json-view' 5 | import './index.scss' 6 | import { BODY_HEIGHT } from "@/utils/const"; 7 | 8 | const { TextArea } = Input; 9 | 10 | const JsonFormatting = () => { 11 | const [jsonData, setJsonData] = useState({}); 12 | 13 | const handleJsonData = (e:any) => { 14 | try { 15 | setJsonData(JSON.parse(e.target.value)) 16 | } catch { 17 | message.error('请检查输入的JSON格式是否正确') 18 | } 19 | } 20 | 21 | return 22 | 23 |