From a94512a3fb8cdbc688ed2892e033b0d7dd02a1fe Mon Sep 17 00:00:00 2001 From: JimmFly Date: Wed, 13 Sep 2023 00:06:03 +0800 Subject: [PATCH] feat: add animation for add favorites (#4317) --- packages/component/package.json | 1 + .../page-list/components/favorite-tag.tsx | 35 +- .../components/favorited-animation/data.json | 1550 +++++++++++++++++ yarn.lock | 15 +- 4 files changed, 1589 insertions(+), 12 deletions(-) create mode 100644 packages/component/src/components/page-list/components/favorited-animation/data.json diff --git a/packages/component/package.json b/packages/component/package.json index 292a7c76d5..fe3aeec22c 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -43,6 +43,7 @@ "dayjs": "^1.11.9", "jotai": "^2.4.1", "lit": "^2.8.0", + "lottie-react": "^2.4.0", "lottie-web": "^5.12.2", "react": "18.2.0", "react-datepicker": "^4.16.0", diff --git a/packages/component/src/components/page-list/components/favorite-tag.tsx b/packages/component/src/components/page-list/components/favorite-tag.tsx index 6cecdb7818..cfb4258314 100644 --- a/packages/component/src/components/page-list/components/favorite-tag.tsx +++ b/packages/component/src/components/page-list/components/favorite-tag.tsx @@ -5,7 +5,10 @@ import { type IconButtonProps, } from '@toeverything/components/button'; import { Tooltip } from '@toeverything/components/tooltip'; -import { forwardRef } from 'react'; +import Lottie from 'lottie-react'; +import { forwardRef, useCallback, useState } from 'react'; + +import favoritedAnimation from './favorited-animation/data.json'; export const FavoriteTag = forwardRef< HTMLButtonElement, @@ -13,20 +16,30 @@ export const FavoriteTag = forwardRef< active: boolean; } & Omit >(({ active, onClick, ...props }, ref) => { + const [playAnimation, setPlayAnimation] = useState(false); const t = useAFFiNEI18N(); + const handleClick = useCallback( + (e: React.MouseEvent) => { + e.stopPropagation(); + onClick?.(e); + setPlayAnimation(!active); + }, + [active, onClick] + ); return ( - { - e.stopPropagation(); - onClick?.(e); - }} - {...props} - > + {active ? ( - + playAnimation ? ( + setPlayAnimation(false)} + style={{ width: '20px', height: '20px' }} + /> + ) : ( + + ) ) : ( )} diff --git a/packages/component/src/components/page-list/components/favorited-animation/data.json b/packages/component/src/components/page-list/components/favorited-animation/data.json new file mode 100644 index 0000000000..09bd4f765e --- /dev/null +++ b/packages/component/src/components/page-list/components/favorited-animation/data.json @@ -0,0 +1,1550 @@ +{ + "v": "5.12.1", + "fr": 60, + "ip": 0, + "op": 46, + "w": 240, + "h": 240, + "nm": "Favorited", + "ddd": 0, + "assets": [], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": "Star", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [119.75, 120, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [12, 12, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.163, 0.163, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 0] }, + "t": 7, + "s": [0, 0, 100] + }, + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 18, + "s": [1030, 1030, 100] + }, + { "t": 28, "s": [910, 910, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [0.569, -1.511], + [0, 0], + [0.1, -0.005], + [0, 0], + [-1.261, -1.008], + [0, 0], + [0.026, -0.097], + [0, 0], + [-1.349, 0.888], + [0, 0], + [-0.084, -0.055], + [0, 0], + [0.427, 1.557], + [0, 0], + [-0.078, 0.063], + [0, 0], + [1.613, 0.074], + [0, 0], + [0.035, 0.094] + ], + "o": [ + [-0.569, -1.511], + [0, 0], + [-0.035, 0.094], + [0, 0], + [-1.612, 0.074], + [0, 0], + [0.078, 0.063], + [0, 0], + [-0.428, 1.557], + [0, 0], + [0.083, -0.055], + [0, 0], + [1.348, 0.888], + [0, 0], + [-0.026, -0.097], + [0, 0], + [1.261, -1.008], + [0, 0], + [-0.1, -0.005], + [0, 0] + ], + "v": [ + [1.638, -9.016], + [-1.637, -9.016], + [-3.446, -4.214], + [-3.669, -4.051], + [-8.795, -3.816], + [-9.807, -0.701], + [-5.798, 2.503], + [-5.713, 2.766], + [-7.073, 7.714], + [-4.423, 9.639], + [-0.137, 6.816], + [0.138, 6.816], + [4.424, 9.639], + [7.074, 7.714], + [5.714, 2.766], + [5.799, 2.503], + [9.807, -0.701], + [8.795, -3.816], + [3.669, -4.051], + [3.447, -4.214] + ], + "c": true + }, + "ix": 2 + }, + "nm": "路径 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.117647066303, 0.588235294118, 0.921568687289, 1], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "填充 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [12, 11.236], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "变换" + } + ], + "nm": "组 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 1, + "op": 300, + "st": 1, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 2, + "ty": 4, + "nm": "Mask", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { "a": 0, "k": [123.758, 116.478, 0], "ix": 2, "l": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.412, 0.412, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 16.827] }, + "t": 0, + "s": [0, 0, 100] + }, + { "t": 20.16015625, "s": [105, 105, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "d": 1, + "ty": "el", + "s": { "a": 0, "k": [226.773, 226.773], "ix": 2 }, + "p": { "a": 0, "k": [0, 0], "ix": 3 }, + "nm": "椭圆路径 1", + "mn": "ADBE Vector Shape - Ellipse", + "hd": false + }, + { + "ty": "st", + "c": { + "a": 0, + "k": [0.36862745098, 0.725490196078, 0.980392156863, 1], + "ix": 3 + }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 3, + "s": [100] + }, + { "t": 18, "s": [0] } + ], + "ix": 5 + }, + "lc": 1, + "lj": 1, + "ml": 4, + "bm": 0, + "nm": "描边 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-3.613, 3.387], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "变换" + } + ], + "nm": "椭圆 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 20, + "st": 0, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 3, + "ty": 4, + "nm": "Shape1", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 18, + "s": [100] + }, + { "t": 28, "s": [0] } + ], + "ix": 11 + }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 0, + "s": [117.5, 97.5, 0], + "to": [0.833, -1.167, 0], + "ti": [-0.089, -20.867, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 7, + "s": [119.5, 90.5, 0], + "to": [0.126, 29.485, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 16, + "s": [120, 28, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 28, "s": [119, -16, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [-58.213, -90.093, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, -0.959] }, + "t": 7, + "s": [120, 120, 100] + }, + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 13, + "s": [310, 310, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, -25] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 18, + "s": [260, 260, 100] + }, + { "t": 28, "s": [130, 130, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [-1.825, 0], + [0, -1.825], + [1.825, 0], + [0, 1.825] + ], + "o": [ + [1.825, 0], + [0, 1.825], + [-1.825, 0], + [0, -1.825] + ], + "v": [ + [0, -3.305], + [3.305, 0], + [0, 3.305], + [-3.305, 0] + ], + "c": true + }, + "ix": 2 + }, + "nm": "路径 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.117647059262, 0.588235318661, 0.921568632126, 1], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "填充 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-58.195, -90.195], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "变换" + } + ], + "nm": "椭圆 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 7, + "op": 301, + "st": 1, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 4, + "ty": 4, + "nm": "Shape2", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 16, + "s": [100] + }, + { "t": 26, "s": [0] } + ], + "ix": 11 + }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 0, + "s": [117.5, 160.5, 0], + "to": [0.833, -1.167, 0], + "ti": [-0.089, -20.867, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 5, + "s": [119.5, 153.5, 0], + "to": [0.126, 29.485, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 14, + "s": [122, 223, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 26, "s": [123, 260, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [-58.213, -90.093, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, -0.67] }, + "t": 5, + "s": [150, 150, 100] + }, + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 11, + "s": [330, 330, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.599] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 16, + "s": [270, 270, 100] + }, + { "t": 26, "s": [170, 170, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [-1.825, 0], + [0, -1.825], + [1.825, 0], + [0, 1.825] + ], + "o": [ + [1.825, 0], + [0, 1.825], + [-1.825, 0], + [0, -1.825] + ], + "v": [ + [0, -3.305], + [3.305, 0], + [0, 3.305], + [-3.305, 0] + ], + "c": true + }, + "ix": 2 + }, + "nm": "路径 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.117647059262, 0.588235318661, 0.921568632126, 1], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "填充 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-58.195, -90.195], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "变换" + } + ], + "nm": "椭圆 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 5, + "op": 299, + "st": -1, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 5, + "ty": 4, + "nm": "Shape3", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 15, + "s": [100] + }, + { "t": 25, "s": [0] } + ], + "ix": 11 + }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 0, + "s": [89.5, 123.5, 0], + "to": [0.833, -1.167, 0], + "ti": [-20.778, 1.926, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 4, + "s": [91.5, 116.5, 0], + "to": [27.126, -2.515, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 13, + "s": [25, 129.5, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 25, "s": [-9.5, 134.5, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [-58.213, -90.093, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, -1.419] }, + "t": 4, + "s": [180, 180, 100] + }, + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 10, + "s": [370, 370, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.698] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 15, + "s": [300, 300, 100] + }, + { "t": 25, "s": [200, 200, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [-1.825, 0], + [0, -1.825], + [1.825, 0], + [0, 1.825] + ], + "o": [ + [1.825, 0], + [0, 1.825], + [-1.825, 0], + [0, -1.825] + ], + "v": [ + [0, -3.305], + [3.305, 0], + [0, 3.305], + [-3.305, 0] + ], + "c": true + }, + "ix": 2 + }, + "nm": "路径 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.117647058824, 0.588235294118, 0.921568627451, 1], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "填充 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-58.195, -90.195], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "变换" + } + ], + "nm": "椭圆 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 4, + "op": 298, + "st": -2, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 6, + "ty": 4, + "nm": "Shape4", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 16, + "s": [100] + }, + { "t": 26, "s": [0] } + ], + "ix": 11 + }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 0, + "s": [149.5, 117.5, 0], + "to": [0.833, -1.167, 0], + "ti": [-20.778, 1.926, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 5, + "s": [151.5, 110.5, 0], + "to": [27.126, -2.515, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 14, + "s": [219, 102.5, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 26, "s": [246.5, 98.5, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [-58.213, -90.093, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, -0.366] }, + "t": 5, + "s": [200, 200, 100] + }, + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 11, + "s": [336, 336, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.879] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 16, + "s": [272, 272, 100] + }, + { "t": 26, "s": [230, 230, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [-1.825, 0], + [0, -1.825], + [1.825, 0], + [0, 1.825] + ], + "o": [ + [1.825, 0], + [0, 1.825], + [-1.825, 0], + [0, -1.825] + ], + "v": [ + [0, -3.305], + [3.305, 0], + [0, 3.305], + [-3.305, 0] + ], + "c": true + }, + "ix": 2 + }, + "nm": "路径 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.117647058824, 0.588235294118, 0.921568627451, 1], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "填充 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-58.195, -90.195], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "变换" + } + ], + "nm": "椭圆 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 5, + "op": 299, + "st": -1, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 7, + "ty": 4, + "nm": "Shape5", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 19, + "s": [100] + }, + { "t": 29, "s": [0] } + ], + "ix": 11 + }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 0, + "s": [144, 104, 0], + "to": [0.833, -1.167, 0], + "ti": [-12.451, 16.746, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 8, + "s": [146, 97, 0], + "to": [15.626, -21.015, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 17, + "s": [213, 22.5, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 29, "s": [233, 1, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [-58.213, -90.093, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, -0.167] }, + "t": 8, + "s": [220, 220, 100] + }, + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 14, + "s": [276, 276, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.815] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 19, + "s": [235, 235, 100] + }, + { "t": 29, "s": [190, 190, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [-1.825, 0], + [0, -1.825], + [1.825, 0], + [0, 1.825] + ], + "o": [ + [1.825, 0], + [0, 1.825], + [-1.825, 0], + [0, -1.825] + ], + "v": [ + [0, -3.305], + [3.305, 0], + [0, 3.305], + [-3.305, 0] + ], + "c": true + }, + "ix": 2 + }, + "nm": "路径 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.117647058824, 0.588235294118, 0.921568627451, 1], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "填充 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-58.195, -90.195], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "变换" + } + ], + "nm": "椭圆 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 8, + "op": 302, + "st": 2, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 8, + "ty": 4, + "nm": "Shape6", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 18, + "s": [100] + }, + { "t": 28, "s": [0] } + ], + "ix": 11 + }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 0, + "s": [154, 148, 0], + "to": [0.833, -1.167, 0], + "ti": [-13.843, -15.615, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 7, + "s": [156, 141, 0], + "to": [10.626, 11.985, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 16, + "s": [216, 211.5, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 28, "s": [238, 238, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [-58.213, -90.093, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, -1.612] }, + "t": 7, + "s": [120, 120, 100] + }, + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 13, + "s": [171, 171, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, -25.575] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 18, + "s": [182, 182, 100] + }, + { "t": 28, "s": [130, 130, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [-1.825, 0], + [0, -1.825], + [1.825, 0], + [0, 1.825] + ], + "o": [ + [1.825, 0], + [0, 1.825], + [-1.825, 0], + [0, -1.825] + ], + "v": [ + [0, -3.305], + [3.305, 0], + [0, 3.305], + [-3.305, 0] + ], + "c": true + }, + "ix": 2 + }, + "nm": "路径 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.117647058824, 0.588235294118, 0.921568627451, 1], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "填充 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-58.195, -90.195], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "变换" + } + ], + "nm": "椭圆 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 7, + "op": 301, + "st": 1, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 9, + "ty": 4, + "nm": "Shape7", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 15, + "s": [100] + }, + { "t": 25, "s": [0] } + ], + "ix": 11 + }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 0, + "s": [93, 148, 0], + "to": [0.833, -1.167, 0], + "ti": [12.313, -16.848, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 4, + "s": [95, 141, 0], + "to": [-4.374, 5.985, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 13, + "s": [31.5, 226.5, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 25, "s": [7, 258, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [-58.213, -90.093, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, 75.568] }, + "t": 4, + "s": [120, 120, 100] + }, + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 9.885, + "s": [300, 300, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, -24.909] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 15, + "s": [230, 230, 100] + }, + { "t": 25, "s": [130, 130, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [-1.825, 0], + [0, -1.825], + [1.825, 0], + [0, 1.825] + ], + "o": [ + [1.825, 0], + [0, 1.825], + [-1.825, 0], + [0, -1.825] + ], + "v": [ + [0, -3.305], + [3.305, 0], + [0, 3.305], + [-3.305, 0] + ], + "c": true + }, + "ix": 2 + }, + "nm": "路径 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.117647058824, 0.588235294118, 0.921568627451, 1], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "填充 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-58.195, -90.195], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "变换" + } + ], + "nm": "椭圆 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 4, + "op": 298, + "st": -2, + "ct": 1, + "bm": 0 + }, + { + "ddd": 0, + "ind": 10, + "ty": 4, + "nm": "Shape8", + "sr": 1, + "ks": { + "o": { + "a": 1, + "k": [ + { + "i": { "x": [0.833], "y": [0.833] }, + "o": { "x": [0.167], "y": [0.167] }, + "t": 17, + "s": [100] + }, + { "t": 27, "s": [0] } + ], + "ix": 11 + }, + "r": { "a": 0, "k": 0, "ix": 10 }, + "p": { + "a": 1, + "k": [ + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 0, + "s": [93, 81, 0], + "to": [0.833, -1.167, 0], + "ti": [16.583, 12.667, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 6, + "s": [95, 74, 0], + "to": [-7.874, -6.015, 0], + "ti": [0, 0, 0] + }, + { + "i": { "x": 0.833, "y": 0.833 }, + "o": { "x": 0.167, "y": 0.167 }, + "t": 15, + "s": [27, 25, 0], + "to": [0, 0, 0], + "ti": [0, 0, 0] + }, + { "t": 27, "s": [17, 15, 0] } + ], + "ix": 2, + "l": 2 + }, + "a": { "a": 0, "k": [-58.213, -90.093, 0], "ix": 1, "l": 2 }, + "s": { + "a": 1, + "k": [ + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.167, 0.167, 0.167], "y": [0.167, 0.167, -0.343] }, + "t": 6, + "s": [210, 210, 100] + }, + { + "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 12, + "s": [350, 350, 100] + }, + { + "i": { "x": [0.833, 0.833, 0.833], "y": [0.833, 0.833, 0.615] }, + "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] }, + "t": 17, + "s": [290, 290, 100] + }, + { "t": 27, "s": [180, 180, 100] } + ], + "ix": 6, + "l": 2 + } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ind": 0, + "ty": "sh", + "ix": 1, + "ks": { + "a": 0, + "k": { + "i": [ + [-1.825, 0], + [0, -1.825], + [1.825, 0], + [0, 1.825] + ], + "o": [ + [1.825, 0], + [0, 1.825], + [-1.825, 0], + [0, -1.825] + ], + "v": [ + [0, -3.305], + [3.305, 0], + [0, 3.305], + [-3.305, 0] + ], + "c": true + }, + "ix": 2 + }, + "nm": "路径 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "fl", + "c": { + "a": 0, + "k": [0.117647058824, 0.588235294118, 0.921568627451, 1], + "ix": 4 + }, + "o": { "a": 0, "k": 100, "ix": 5 }, + "r": 1, + "bm": 0, + "nm": "填充 1", + "mn": "ADBE Vector Graphic - Fill", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [-58.195, -90.195], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "变换" + } + ], + "nm": "椭圆 1", + "np": 3, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 6, + "op": 300, + "st": 0, + "ct": 1, + "bm": 0 + } + ], + "markers": [], + "props": {} +} diff --git a/yarn.lock b/yarn.lock index 9184e86971..114f1de54a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -202,6 +202,7 @@ __metadata: dayjs: ^1.11.9 jotai: ^2.4.1 lit: ^2.8.0 + lottie-react: ^2.4.0 lottie-web: ^5.12.2 react: 18.2.0 react-datepicker: ^4.16.0 @@ -25414,7 +25415,19 @@ __metadata: languageName: node linkType: hard -"lottie-web@npm:^5.12.2": +"lottie-react@npm:^2.4.0": + version: 2.4.0 + resolution: "lottie-react@npm:2.4.0" + dependencies: + lottie-web: ^5.10.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: e9ea4a89be90a29bde4a83956f76a80d1f8031882f18ea38ef5271d2aafd8e68348ae6297f185ed85b149ca4896fe33aee7faf9780b88a1b289b8e146f477448 + languageName: node + linkType: hard + +"lottie-web@npm:^5.10.2, lottie-web@npm:^5.12.2": version: 5.12.2 resolution: "lottie-web@npm:5.12.2" checksum: af5bc3bc405fd760de8b17a36158d5a8c3e8c586c711d0c63681ddf056b65bc6b54ea36b1fcad782fb02dbe12e696a40e0ba72daf41b8f10ab5b5d1113793636