feat: back to top button completed!

Author: gemini2035

src/components/editor/operator/sheet/SheetOperator.tsx

@@ -9,6 +9,7 @@ import {
 } from './sheetOperator/SheetOperatorFilterProvider'
 import { SheetOperatorItem } from './sheetOperator/SheetOperatorItem'
 import { ShowMore } from './sheetOperator/ShowMore'
+import { OperatorBackToTop } from './sheetOperator/toolBox/OperatorBackToTop'
 import { OperatorMutipleSelect } from './sheetOperator/toolBox/OperatorMutipleSelect'
 
 export interface SheetOperatorProps {}
@@ -20,11 +21,16 @@ export interface SheetOperatorProps {}
 const SheetOperator: FC<SheetOperatorProps> = () => {
   const operatorScrollRef = useRef<HTMLDivElement>(null)
 
+  const toTop = useCallback(
+    () => operatorScrollRef?.current?.scrollIntoView(),
+    [operatorScrollRef],
+  )
+
   // const getOperatorRarity = (target: string) =>
   //   operatorsGroupedByProf.find((item) => item.name === target)!.rarity
 
   const ToolBox = (
-    <div className="flex">
+    <div className="flex pb-2 pr-2">
       {/* <Popover2
         content={
           <RaritySelector
@@ -40,20 +46,10 @@ const SheetOperator: FC<SheetOperatorProps> = () => {
         <Button minimal icon="filter-list" />
       </Popover2> */}
       <OperatorMutipleSelect />
-      {/* <Button
-        minimal
-        icon="symbol-triangle-up"
-        disabled={!backToTop}
-        title={backToTop ? '回到顶部' : undefined}
-        onClick={resetPaginationState}
-      /> */}
+      <OperatorBackToTop {...{ toTop }} />
     </div>
   )
 
-  const toTop = useCallback(
-    () => operatorScrollRef?.current?.scrollIntoView(),
-    [operatorScrollRef],
-  )
   const {
     operatorFiltered: { data: operatorFilteredData },
   } = useOperatorFilterProvider()

src/components/editor/operator/sheet/sheetOperator/SheetOperatorItem.tsx

@@ -94,7 +94,7 @@ export const SheetOperatorItem: FC<SheetOperatorItemProp> = ({ name }) => {
     <Card
       className={clsx(
         'flex items-center w-full h-full relative cursor-pointer flex-col justify-center',
-        selectedInView && 'scale-95 bg-gray-200',
+        selectedInView && 'scale-90 bg-gray-200',
       )}
       elevation={grouped ? 0 : 2}
       interactive={!selectedInView}

src/components/editor/operator/sheet/sheetOperator/toolBox/OperatorBackToTop.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@blueprintjs/core'
+
+import { FC } from 'react'
+
+import { useOperatorFilterProvider } from '../SheetOperatorFilterProvider'
+import { defaultPagination } from '../ShowMore'
+
+export interface OperatorBackToTopProp {
+  toTop: () => void
+}
+
+export const OperatorBackToTop: FC<OperatorBackToTopProp> = ({ toTop }) => {
+  const {
+    usePaginationFilterState: [{ current }, setPaginationFilter],
+  } = useOperatorFilterProvider()
+
+  return (
+    <Button
+      minimal
+      icon="symbol-triangle-up"
+      disabled={current < 3}
+      title="回到顶部"
+      onClick={() => setPaginationFilter(defaultPagination)}
+    />
+  )
+}