perf: 修改编辑动图导航栏

027xiguapi · Mar 11, 2024 · 8f101fa · 8f101fa
1 parent 403e404
commit 8f101fa
Show file tree

Hide file tree

Showing 23 changed files with 163 additions and 107 deletions.
diff --git a/packages/docs/public/imgs/1700442414996.jpg b/packages/docs/public/imgs/1700442414996.jpg
diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -1,5 +1,9 @@
 # @pear-rec/web
 
+## 1.4.18
+
+perf: 修改编辑动图导航栏
+
 ## 1.4.17
 
 fix: 修改编辑动图视频解析完成 bug

diff --git a/packages/web/src/components/card/editGifCard.tsx b/packages/web/src/components/card/editGifCard.tsx
@@ -1,7 +1,7 @@
-import React, { useImperativeHandle, forwardRef, useRef } from 'react';
+import { GifOutlined } from '@ant-design/icons';
+import { Card, Modal } from 'antd';
+import { forwardRef, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { EditOutlined, GifOutlined } from '@ant-design/icons';
-import { Space, Card, Dropdown, Modal } from 'antd';
 
 const EditGifCard = forwardRef((props: any, ref: any) => {
   const { t } = useTranslation();

diff --git a/packages/web/src/components/card/editImageCard.tsx b/packages/web/src/components/card/editImageCard.tsx
@@ -1,7 +1,7 @@
-import React, { useImperativeHandle, forwardRef, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { EditOutlined } from '@ant-design/icons';
-import { Space, Card, Dropdown, Modal } from 'antd';
+import { Card, Modal } from 'antd';
+import { forwardRef, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const EditImageCard = forwardRef((props: any, ref: any) => {
   const { t } = useTranslation();

diff --git a/packages/web/src/components/editGif/GifConverter.tsx b/packages/web/src/components/editGif/GifConverter.tsx
@@ -82,9 +82,7 @@ export default function VideoToGifConverter() {
 
   return (
     <div className="gifConverter">
-      <div className="tool">
-        <Tool />
-      </div>
+      <Tool />
       <div className="content">
         <canvas ref={canvasRef} style={{ transform: 'scale(' + scale / 100 + ')' }}></canvas>
         <div className="info">

diff --git a/packages/web/src/components/editGif/Tool.tsx b/packages/web/src/components/editGif/Tool.tsx
@@ -1,7 +1,6 @@
-import type { TabsProps } from 'antd';
-import { Tabs } from 'antd';
-import React, { useContext } from 'react';
+import React, { useContext, useRef, useState } from 'react';
 import { GifContext } from '../context/GifContext';
+import styles from './tool.module.scss';
 import FileTool from './tool/File';
 import FrameTool from './tool/Frame';
 import HistoryTool from './tool/History';
@@ -10,47 +9,72 @@ import PlayTool from './tool/Play';
 import SettingTool from './tool/Setting';
 import SpliceTool from './tool/Splice';
 
-const items: TabsProps['items'] = [
-  {
-    key: 'file',
-    label: '文件',
-    children: <FileTool />,
-  },
-  {
-    key: 'frame',
-    label: '帧',
-    children: <FrameTool />,
-  },
-  {
-    key: 'history',
-    label: '操作',
-    children: <HistoryTool />,
-  },
-  {
-    key: 'move',
-    label: '移动',
-    children: <MoveTool />,
-  },
-  {
-    key: 'play',
-    label: '播放',
-    children: <PlayTool />,
-  },
-  {
-    key: 'setting',
-    label: '设置',
-    children: <SettingTool />,
-  },
-  {
-    key: 'splice',
-    label: '拼接',
-    children: <SpliceTool />,
-  },
-];
-
 const Tool: React.FC = () => {
   const { gifState, gifDispatch } = useContext(GifContext);
-  return <Tabs defaultActiveKey="file" items={items} />;
+  const toolsRef = useRef({});
+  const [nav, setNav] = useState('file');
+
+  function handleSetNav(nav) {
+    setNav(nav);
+    toolsRef.current[nav]?.scrollIntoView();
+  }
+  return (
+    <div className={styles.tool}>
+      <div className="nav">
+        <div
+          className={nav == 'file' ? 'item current' : 'item'}
+          onClick={() => handleSetNav('file')}
+        >
+          文件
+        </div>
+        <div
+          className={nav == 'frame' ? 'item current' : 'item'}
+          onClick={() => handleSetNav('frame')}
+        >
+          帧
+        </div>
+        <div
+          className={nav == 'history' ? 'item current' : 'item'}
+          onClick={() => handleSetNav('history')}
+        >
+          操作
+        </div>
+        <div
+          className={nav == 'move' ? 'item current' : 'item'}
+          onClick={() => handleSetNav('move')}
+        >
+          移动
+        </div>
+        <div
+          className={nav == 'play' ? 'item current' : 'item'}
+          onClick={() => handleSetNav('play')}
+        >
+          播放
+        </div>
+        <div
+          className={nav == 'setting' ? 'item current' : 'item'}
+          onClick={() => handleSetNav('setting')}
+        >
+          设置
+        </div>
+        <div
+          className={nav == 'splice' ? 'item current' : 'item'}
+          onClick={() => handleSetNav('splice')}
+        >
+          拼接
+        </div>
+      </div>
+      <div className="list">
+        <FileTool ref={(el) => (toolsRef.current['file'] = el)} />
+        <FrameTool ref={(el) => (toolsRef.current['frame'] = el)} />
+        <HistoryTool ref={(el) => (toolsRef.current['history'] = el)} />
+        <MoveTool ref={(el) => (toolsRef.current['move'] = el)} />
+        <PlayTool ref={(el) => (toolsRef.current['play'] = el)} />
+        <SettingTool ref={(el) => (toolsRef.current['setting'] = el)} />
+        <SpliceTool ref={(el) => (toolsRef.current['splice'] = el)} />
+      </div>
+    </div>
+  );
 };
 
 export default Tool;
diff --git a/packages/web/src/components/editGif/tool.module.scss b/packages/web/src/components/editGif/tool.module.scss
@@ -0,0 +1,23 @@
+.tool {
+  :global {
+    .nav {
+      display: flex;
+      padding: 5px 0;
+      border-bottom: 1px #eee solid;
+      .item {
+        margin: 0 15px;
+        font-size: 14px;
+        cursor: pointer;
+      }
+      .current {
+        color: #1677ff;
+      }
+    }
+    .list {
+      display: flex;
+      width: 100vw;
+      overflow-x: scroll;
+      // white-space: nowrap;
+    }
+  }
+}
diff --git a/packages/web/src/components/editGif/tool/File.tsx b/packages/web/src/components/editGif/tool/File.tsx
@@ -1,16 +1,16 @@
 import { Close, FileGif, Save, VideoFile } from '@icon-park/react';
-import { InputNumber, Modal, Progress, Slider } from 'antd';
+import { Modal, Progress } from 'antd';
 import map from 'async/map';
 import { saveAs } from 'file-saver';
 import GIF from 'gif.js';
-import { useContext, useEffect, useRef, useState } from 'react';
+import { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GifContext } from '../../../components/context/GifContext';
 import { db } from '../../../db';
 import { UserContext } from '../../context/UserContext';
 import styles from './file.module.scss';
 
-const File = () => {
+const File = forwardRef<any>((props, ref) => {
   const { t } = useTranslation();
   const fileRef = useRef(null);
   const videoRef = useRef(null);
@@ -162,7 +162,7 @@ const File = () => {
   }
 
   return (
-    <div className={`${styles.file}`}>
+    <div className={`${styles.file}`} ref={ref}>
       <div className="fileGroup">
         <div className="fileList">
           <div className="fileBtn" onClick={() => fileRef.current.click()}>
@@ -205,7 +205,7 @@ const File = () => {
         </div>
         <div className="subTitle">文件</div>
       </div>
-      <div className="fileGroup setting">
+      {/* <div className="fileGroup setting">
         <div className="fileItem slider">
           <Slider
             range={{ draggableTrack: true }}
@@ -222,9 +222,9 @@ const File = () => {
           <div className="fileBtnTitle">帧数</div>
         </div>
         <div className="subTitle">设置</div>
-      </div>
+      </div> */}
     </div>
   );
-};
+});
 
 export default File;
diff --git a/packages/web/src/components/editGif/tool/Frame.tsx b/packages/web/src/components/editGif/tool/Frame.tsx
@@ -1,13 +1,13 @@
 import { FileAdditionOne, FileFailedOne, ToLeft, ToRight } from '@icon-park/react';
-import { useContext, useEffect, useRef } from 'react';
+import { forwardRef, useContext, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { db } from '../../../db';
 import { GifContext } from '../../context/GifContext';
 import { HistoryContext } from '../../context/HistoryContext';
 import { UserContext } from '../../context/UserContext';
 import styles from './frame.module.scss';
 
-const Frame = (props) => {
+const Frame = forwardRef<any>((props, ref) => {
   const { t } = useTranslation();
   const inputRef = useRef(null);
   const { user, setUser } = useContext(UserContext);
@@ -91,7 +91,7 @@ const Frame = (props) => {
   function handleMoveNextFrame() {}
 
   return (
-    <div className={`${styles.frame}`}>
+    <div className={`${styles.frame}`} ref={ref}>
       <div className="frameList">
         <div className="frameBtn" onClick={handleDeleteFrame}>
           <FileFailedOne className="frameIcon" theme="outline" size="27" fill="#749EC4" />
@@ -120,6 +120,6 @@ const Frame = (props) => {
       <div className="subTitle">帧</div>
     </div>
   );
-};
+});
 
 export default Frame;
diff --git a/packages/web/src/components/editGif/tool/History.tsx b/packages/web/src/components/editGif/tool/History.tsx
@@ -1,11 +1,11 @@
 import { Redo, Refresh, Undo } from '@icon-park/react';
-import { useContext, useEffect } from 'react';
+import { forwardRef, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GifContext } from '../../context/GifContext';
 import { HistoryContext } from '../../context/HistoryContext';
 import styles from './history.module.scss';
 
-const History = (props) => {
+const History = forwardRef<any>((props, ref) => {
   const { t } = useTranslation();
   const { historyState, historyDispatch } = useContext(HistoryContext);
   const { gifState, gifDispatch } = useContext(GifContext);
@@ -89,7 +89,7 @@ const History = (props) => {
   }
 
   return (
-    <div className={`${styles.history}`}>
+    <div className={`${styles.history}`} ref={ref}>
       <div className="historyList">
         <div
           className={`${
@@ -128,6 +128,6 @@ const History = (props) => {
       <div className="subTitle">操作</div>
     </div>
   );
-};
+});
 
 export default History;
diff --git a/packages/web/src/components/editGif/tool/Move.tsx b/packages/web/src/components/editGif/tool/Move.tsx
@@ -1,12 +1,12 @@
 import { DoubleLeft, DoubleRight, LeftSmall, RightSmall } from '@icon-park/react';
-import { useContext } from 'react';
+import { forwardRef, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GifContext } from '../../context/GifContext';
 import { HistoryContext } from '../../context/HistoryContext';
 import { UserContext } from '../../context/UserContext';
 import styles from './move.module.scss';
 
-const Move = (props) => {
+const Move = forwardRef<any>((props, ref) => {
   const { t } = useTranslation();
   const { user, setUser } = useContext(UserContext);
   const { historyState, historyDispatch } = useContext(HistoryContext);
@@ -56,7 +56,7 @@ const Move = (props) => {
   }
 
   return (
-    <div className={`${styles.move}`}>
+    <div className={`${styles.move}`} ref={ref}>
       <div className="moveList">
         <div className="moveBtn" onClick={handleMovePrevFrame}>
           <LeftSmall className="moveIcon" theme="outline" size="27" fill="#749EC4" />
@@ -78,6 +78,6 @@ const Move = (props) => {
       <div className="subTitle">移动</div>
     </div>
   );
-};
+});
 
 export default Move;