image-beautifier 1.0.0

package/.eslintrc.cjs

@@ -0,0 +1,25 @@
+export default {
+  root: true,
+  env: {
+    browser: true,
+    es2020: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/prop-types': 0,
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Chenliwen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# 截图美化工具
+
+![preview](https://github.com/CH563/image-beautifier/blob/main/preview.png)
+
+预览地址：[https://screenshot.shoteasy.fun/](https://screenshot.shoteasy.fun/)
+
+- 用于截图美化
+- 图片批注
+- 修改尺寸，预设各个社媒平台发布的尺寸模板
+- 方框，圆圈，箭头，Emoji表情等各种尺寸的批注
+- 添加水印
+
+
+TODO:
+
+- Redo / Undo 步骤记录
+- 设备套壳（macbook/iphone等）
+- 接入Unsplash背景图
+- 文字卡片
+- 代码美化卡片
+- GIF动画
+
+将使用于谷歌截图插件： [ShotEasy](https://chromewebstore.google.com/detail/nmppkehciohcgcehlnifgeokgioidknh)
+
+使用框架
+
+[LeaferJs](https://github.com/leaferjs/ui)
+

package/favicon.svg

@@ -0,0 +1,20 @@
+<svg width="16" height="16" viewBox="0 0 510 510" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_i_40_60)">
+<path d="M60.1774 83.172C64.1232 61.4358 84.9426 47.0139 106.679 50.9598L271.777 80.9308C293.513 84.8767 307.935 105.696 303.989 127.432L247.462 438.817C243.516 460.553 222.696 474.975 200.96 471.029L35.8623 441.058C14.1261 437.112 -0.295702 416.293 3.65017 394.557L60.1774 83.172Z" fill="#812BED"/>
+<path d="M179.201 136.846C173.053 115.627 185.269 93.4418 206.488 87.2932L367.654 40.5909C388.872 34.4423 411.058 46.6588 417.206 67.8773L505.29 371.846C511.438 393.065 499.222 415.25 478.003 421.399L316.837 468.101C295.619 474.25 273.433 462.033 267.285 440.815L179.201 136.846Z" fill="#0DB7FF"/>
+<path d="M206.488 87.2932C185.269 93.4418 173.053 115.627 179.201 136.846L254.874 397.986L303.989 127.432C307.935 105.696 293.513 84.8767 271.777 80.9308L245.134 76.0943L206.488 87.2932Z" fill="#EC83FD"/>
+<path d="M401 404C401 416.703 390.703 427 378 427C365.297 427 355 416.703 355 404C355 391.297 365.297 381 378 381C390.703 381 401 391.297 401 404Z" fill="#0D97D3"/>
+<path d="M144 404C144 416.703 133.703 427 121 427C108.297 427 98 416.703 98 404C98 391.297 108.297 381 121 381C133.703 381 144 391.297 144 404Z" fill="#6616CB"/>
+</g>
+<defs>
+<filter id="filter0_i_40_60" x="3" y="39" width="503.881" height="432.679" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_40_60"/>
+</filter>
+</defs>
+</svg>

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Image Beautifier</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/jsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "baseUrl": "./src",
+        "paths": {
+            "@components/*": ["./components/*"],
+            "@assets/*": ["./assets/*"],
+            "@stores": ["./stores/index.js"],
+            "@utils/*": ["./utils/*"],
+            "@hooks/*": ["./hooks/*"]
+        }
+    }
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "image-beautifier",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Used to beautify image share display, add beautiful background, rounded corners, shadows, etc...",
+  "main": "src/index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ctrl/tinycolor": "^4.1.0",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
+    "@leafer-in/arrow": "^1.0.0",
+    "@leafer-in/editor": "^1.0.0",
+    "@leafer-in/scroll": "^1.0.0",
+    "@leafer-in/view": "^1.0.0",
+    "antd": "^5.19.1",
+    "clsx": "^2.1.1",
+    "cropperjs": "^1.6.2",
+    "emoji-mart": "^5.6.0",
+    "leafer-ui": "^1.0.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.407.0",
+    "mobx": "^6.13.0",
+    "mobx-react-lite": "^4.0.7",
+    "nanoid": "^5.0.7",
+    "react": "^18.3.1",
+    "react-cropper": "^2.3.3",
+    "react-dom": "^18.3.1",
+    "resize-detector": "^0.3.0",
+    "tailwind-merge": "^2.4.0",
+    "tinykeys": "^2.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "vite": "^5.3.1"
+  },
+  "author": "Chenliwen",
+  "license": "MIT"
+}

package/postcss.config.mjs

@@ -0,0 +1,6 @@
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+
+export default {
+    plugins: [tailwindcss('./tailwind.config.mjs'), autoprefixer],
+};

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.jsx

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { message } from 'antd';
+import { observer } from 'mobx-react-lite';
+import Header from '@components/header/Header';
+import Editor from '@components/editor/Editor';
+import SideBar from '@components/sideBar/SideBar';
+import Init from '@components/init/Init';
+import stores from '@stores';
+import '@style/main.css';
+
+export default observer(() => {
+  const workplace = stores.editor.img?.src ? <Editor /> : <Init />
+  const [messageApi, contextHolder] = message.useMessage();
+  useEffect(() => {
+    stores.editor.setMessage(messageApi);
+  }, [messageApi]);
+  return (
+    <>
+      {contextHolder}
+      <div className="polka flex flex-col overflow-hidden antialiased w-full h-[100vh]">
+        <Header />
+        <div className="flex flex-col flex-1 h-0 md:flex-row md:items-stretch">
+          {workplace}
+          <SideBar />
+        </div>
+      </div>
+    </>
+  )
+});

package/src/assets/blur.svg

@@ -0,0 +1,8 @@
+<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="f1" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
+    </filter>
+  </defs>
+  <image width="100" height="100" filter="url(#f1)" href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" />
+</svg>

package/src/assets/color.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M311.296 428.544V40.96C186.368 94.208 87.552 195.072 36.864 321.024l274.432 274.432V428.544z" fill="#37C15C"></path><path d="M428.544 311.296l274.432-274.432C642.048 12.288 577.536 0 512 0 440.832 0 372.736 14.848 311.296 40.96v387.584l117.248-117.248z" fill="#A9E247"></path><path d="M983.04 311.296h-387.584l117.248 117.248 274.432 274.432c24.576-60.416 36.864-125.44 36.864-190.976 0-71.168-14.848-139.264-40.96-200.704z" fill="#FF7D12"></path><path d="M712.704 595.456V983.04c124.928-53.248 223.744-154.112 274.432-280.064l-274.432-274.432v166.912z" fill="#F93B21"></path><path d="M595.456 712.704l-274.432 274.432c60.928 24.576 125.44 36.864 190.976 36.864 71.168 0 139.264-14.848 200.704-40.96v-387.584l-117.248 117.248z" fill="#846FEF"></path><path d="M428.544 712.704H40.96c53.248 124.928 154.112 223.744 280.064 274.432l274.432-274.432H428.544z" fill="#1E95FF"></path><path d="M311.296 595.456L36.864 321.024C12.288 381.952 0 446.464 0 512c0 71.168 14.848 139.264 40.96 200.704h387.584l-117.248-117.248z" fill="#14EFEF"></path><path d="M595.456 311.296H983.04c-53.248-124.928-154.112-223.744-280.064-274.432L428.544 311.296h166.912z" fill="#FFC931"></path></svg>

package/src/components/ColorPicker.jsx

@@ -0,0 +1,27 @@
+import { ColorPicker, Button } from 'antd';
+import { TinyColor } from '@ctrl/tinycolor';
+import Icon from '@components/Icon';
+
+export default (props) => {
+    const useDropper = () => {
+        if (!window.EyeDropper) return;
+        const eyeDropper = new EyeDropper();
+        eyeDropper.open().then((result) => {
+            const color = result.sRGBHex;
+            props?.onChange && props.onChange(new TinyColor(color));
+        }).catch((e) => {
+            console.log(e);
+        });
+    }
+    return <ColorPicker
+        {...props}
+        panelRender={(panel) => (
+            <>
+                {window.EyeDropper && <div className="mb-1">
+                    <Button type="text" shape="circle" size="small" icon={<Icon.Pipette size={16} />} onClick={useDropper} />
+                </div>}
+                {panel}
+            </>
+        )}
+    />
+};

package/src/components/Icon.jsx

@@ -0,0 +1,81 @@
+import {
+    Camera,
+    Check,
+    Square,
+    Circle,
+    Slash,
+    MoveDownLeft,
+    Pencil,
+    Smile,
+    Undo,
+    Redo,
+    ChevronRight,
+    ChevronDown,
+    ChevronUp,
+    RotateCcw,
+    ZoomIn,
+    ZoomOut,
+    Hand,
+    Crop,
+    FlipHorizontal2,
+    FlipVertical2,
+    Sunset,
+    Box,
+    LayoutGrid,
+    ImagePlus,
+    Type,
+    CodeXml,
+    ClipboardPaste,
+    ImagePlay,
+    Maximize,
+    ListCollapse,
+    ArrowUpRight,
+    ArrowDownRight,
+    ImageDown,
+    Copy,
+    Settings2,
+    ChevronLeft,
+    Pipette,
+    Trash2
+} from 'lucide-react';
+
+export default {
+    Camera,
+    Check,
+    Square,
+    Circle,
+    Slash,
+    MoveDownLeft,
+    Pencil,
+    Smile,
+    Undo,
+    Redo,
+    ChevronRight,
+    ChevronDown,
+    ChevronUp,
+    RotateCcw,
+    ZoomIn,
+    ZoomOut,
+    Hand,
+    Crop,
+    FlipHorizontal2,
+    FlipVertical2,
+    Sunset,
+    Box,
+    LayoutGrid,
+    ImagePlus,
+    Type,
+    CodeXml,
+    ClipboardPaste,
+    ImagePlay,
+    Maximize,
+    ListCollapse,
+    ArrowUpRight,
+    ArrowDownRight,
+    ImageDown,
+    Copy,
+    Settings2,
+    ChevronLeft,
+    Pipette,
+    Trash2
+};

package/src/components/editor/Editor.jsx

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import View from './View';
+import Zoom from './Zoom';
+
+export default observer(() => {
+    const [target, setTarget] = useState(null);
+
+    return (
+        <div className='md:w-0 md:flex-1 overflow-hidden select-none relative'>
+            <div className="w-full h-full relative z-0" ref={
+                (node) => setTarget(node)
+            }>
+                {target && <View target={target} />}
+            </div>
+            <Zoom />
+        </div>
+    );
+});

package/src/components/editor/HotKeys.jsx

@@ -0,0 +1,48 @@
+import { useEffect } from "react"
+import { tinykeys } from "tinykeys"
+import { observer } from 'mobx-react-lite';
+import stores from '@stores';
+
+export default observer(() => {
+    useEffect(() => {
+        const deleteItem = event => {
+            // event.preventDefault();
+            const { list } = stores.editor.app?.editor;
+            if (list?.length) {
+                for (let item of list) {
+                    item.remove();
+                    stores.editor.removeShape(item);
+                }
+                stores.editor.app.editor.cancel();
+            }
+        };
+        const handleZoom = type => {
+            if (type === 'fit') {
+                stores.editor.app?.tree.zoom(type, 100);
+            } else {
+                stores.editor.app?.tree.zoom(type);
+            }
+            stores.editor.setScale(stores.editor.app.tree.scale);
+        }
+        const unsubscribe = tinykeys(window, {
+            'Backspace': deleteItem,
+            'Delete': deleteItem,
+            '$mod+Minus': event => {
+                event.preventDefault();
+                handleZoom('out');
+            },
+            '$mod+Equal': event => {
+                event.preventDefault();
+                handleZoom('in');
+            },
+            '$mod+Digit0': event => {
+                event.preventDefault();
+                handleZoom('fit');
+            }
+        });
+        return () => {
+            unsubscribe();
+        }
+    }, [window]);
+    return null;
+});

package/src/components/editor/View.jsx

@@ -0,0 +1,167 @@
+import { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { App, ResizeEvent, ZoomEvent, DragEvent, Cursor } from 'leafer-ui';
+import debounce from 'lodash/debounce';
+import { addListener, removeListener } from 'resize-detector';
+import rotatePng from '@assets/rotate.png';
+import pencilPng from '@assets/pencil.png';
+import stores from '@stores';
+import FrameBox from './layers/FrameBox';
+import Screenshot from './layers/Screenshot';
+import Watermark from './layers/Watermark';
+import ShapeLine from './layers/ShapeLine';
+import { ScrollBar } from '@leafer-in/scroll'
+import { nanoid } from '@utils/utils';
+import HotKeys from './HotKeys';
+import '@leafer-in/editor';
+import '@leafer-in/view';
+
+Cursor.set('pencil', { url: pencilPng });
+
+export default observer(({target}) => {
+    useEffect(() => {
+        const app = new App({
+            view: target,
+            editor: {
+                lockRatio: 'corner',
+                stroke: '#3f99f7',
+                skewable: false,
+                hover: false,
+                middlePoint: { cornerRadius: 100, width: 20, height: 6 },
+                rotatePoint: {
+                    width: 20,
+                    height: 20,
+                    fill: {
+                        type: 'image',
+                        url: rotatePng,
+                    },
+                },
+            },
+            tree: {
+                usePartRender: true,
+            },
+            sky: {
+                type: 'draw',
+                usePartRender: true,
+            },
+        });
+        new ScrollBar(app);
+
+        stores.editor.setApp(app);
+
+        app.tree.on(ZoomEvent.ZOOM, () => {
+            stores.editor.setScale(app.tree.scale);
+        });
+        app.tree.on(ResizeEvent.RESIZE, () => {
+            stores.editor.setScale(app.tree.scale);
+        });
+
+        let shapeId = null;
+        app.tree.on(DragEvent.START, (arg) => {
+            if (!stores.editor.useTool) return;
+            const { target } = arg;
+            const shape = stores.editor.getShape(target.id);
+            if (shape) return;
+            shapeId = nanoid();
+            const size = arg.getPageBounds();
+            const type = stores.editor.useTool;
+            const newShape = {
+                id: shapeId,
+                type,
+                fill: stores.editor.annotateColor,
+                strokeWidth: stores.editor.strokeWidth,
+                zIndex: stores.editor.shapes.size + 1,
+                ...size
+            };
+            if (['Slash', 'MoveDownLeft', 'Pencil'].includes(type)) {
+                newShape.points = [size.x, size.y];
+            }
+            stores.editor.addShape(newShape);
+        });
+        app.tree.on(DragEvent.DRAG, (arg) => {
+            if (!stores.editor.useTool) return;
+            if (!shapeId) return;
+            const shape = stores.editor.getShape(shapeId);
+            if (!shape) return;
+            const size = arg.getPageBounds();
+            const newShape = Object.assign({}, shape, size);
+            const { points, type } = newShape;
+            if (points && points.length) {
+                const { x, y } = arg.getInnerTotal();
+                const newX = x > 0 ? size.x + x : size.x;
+                const newY = y > 0 ? size.y + y : size.y;
+                if (type === 'Pencil') {
+                    newShape.points = [...points, newX, newY];
+                } else {
+                    newShape.points = [points[0], points[1], newX, newY];
+                }
+            }
+            stores.editor.addShape(newShape);
+        });
+        app.tree.on(DragEvent.END, () => {
+            if (!stores.editor.useTool) return;
+            if (!shapeId) return;
+            const shape = stores.editor.getShape(shapeId);
+            if (shape) {
+                if ((shape.width === 0 || shape.height === 0) && !['Slash', 'MoveDownLeft', 'Pencil'].includes(shape.type)) {
+                    stores.editor.removeShape(shape);
+                } else {
+                    stores.editor.addShape(Object.assign({}, shape, {editable: true}));
+                }
+            }
+            shapeId = null;
+            if (stores.editor.useTool !== 'Pencil') stores.editor.setUseTool(null);
+        });
+
+        // 监听容器变化
+        const onResize = debounce(() => {
+            const { width, height } = target.getBoundingClientRect();
+            app.tree.zoom('fit', 100);
+            if (stores.option.frameConf.width < width && stores.option.frameConf.height < height) {
+                app.tree.zoom(1);
+            }
+        }, 10);
+
+        addListener(target, onResize);
+    
+        // setTimeout(() => {
+        //     const { width, height } = target.getBoundingClientRect();
+        //     app.tree.zoom('fit', 100);
+        //     if (stores.option.frameConf.width < width && stores.option.frameConf.height < height) {
+        //         app.tree.zoom(1);
+        //     }
+        //     stores.editor.setScale(app.tree.scale);
+        // }, 10);
+
+        return (() => {
+            removeListener(target, onResize);
+            stores.editor.destroy();
+        });
+    }, [target]);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            const { width, height } = target.getBoundingClientRect();
+            stores.editor.app.tree.zoom('fit', 100);
+            if (stores.option.frameConf.width < width && stores.option.frameConf.height < height) {
+                stores.editor.app.tree.zoom(1);
+            }
+            stores.editor.setScale(stores.editor.app.tree.scale);
+        }, 20);
+        return (() => {
+            clearTimeout(timer);
+        })
+    }, [stores.option.frameConf.width, stores.option.frameConf.height]);
+
+    if (!stores.editor.app?.tree) return null;
+    return (<>
+        <FrameBox parent={stores.editor.app.tree} cursor={stores.editor.cursor} {...stores.option.frameConf}>
+                {stores.editor.shapesList.map((item) => (
+                    <ShapeLine key={item.id} {...item} />
+                ))}
+                {stores.editor.img?.src && <Screenshot />}
+                {stores.option.waterImg && <Watermark />}
+        </FrameBox>
+        <HotKeys />
+    </>);
+});

package/src/components/editor/Zoom.jsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import Icon from '@components/Icon';
+import { Button, Dropdown } from 'antd';
+import stores from '@stores';
+
+const items = [
+    {
+        key: 0.5,
+        label: '50%'
+    },
+    {
+        key: 1,
+        label: '100%'
+    },
+    {
+        key: 1.5,
+        label: '150%'
+    },
+    {
+        key: 2,
+        label: '200%'
+    }
+];
+
+export default observer(() => {
+    const handleZoom = (key) => {
+        stores.editor.app?.tree.zoom(key);
+        stores.editor.setScale(stores.editor.app.tree.scale);
+    }
+    const handleMenuClick = (item) => {
+        const num = Number(item.key);
+        if (num === 4) {
+            stores.editor.app?.tree.zoom('fit', 100);
+        } else {
+            stores.editor.app?.tree.zoom(num);
+        }
+        stores.editor.setScale(stores.editor.app.tree.scale);
+    }
+    return (
+        <div className="absolute z-10 bottom-4 gap-2 right-4 flex items-center ">
+            <div className="flex bg-white overflow-hidden rounded-full shadow-md">
+                <Button type="text" icon={<Icon.ZoomIn size={16} />} onClick={() => handleZoom('in')} />
+                <Dropdown menu={{ items, onClick: handleMenuClick }} placement="top">
+                    <Button type="text">{stores.editor.scale}%</Button>
+                </Dropdown>
+                <Button type="text" icon={<Icon.ZoomOut size={16} />} onClick={() => handleZoom('out')} />
+            </div>
+            <div className="rounded-full bg-white shadow-md overflow-hidden">
+                <Button type="text" icon={<Icon.Maximize size={16} />} onClick={() => handleMenuClick({key: 4})} />
+            </div>
+        </div>
+    )
+});