feat: operation multiselect

Author: guansss

src/components/OperationCard.tsx

@@ -18,7 +18,17 @@ import { UserName } from './UserName'
 import { EDifficulty } from './entity/EDifficulty'
 import { EDifficultyLevel, NeoELevel } from './entity/ELevel'
 
-export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
+export const NeoOperationCard = ({
+  operation,
+  selected,
+  selectable,
+  onSelect,
+}: {
+  operation: Operation
+  selectable?: boolean
+  selected?: boolean
+  onSelect?: (operation: Operation, selected: boolean) => void
+}) => {
   const { data: levels } = useLevels()
 
   return (
@@ -113,7 +123,13 @@ export const NeoOperationCard = ({ operation }: { operation: Operation }) => {
         </div>
       </ReLinkDiv>
 
-      <CardActions className="absolute top-4 right-4" operation={operation} />
+      <CardActions
+        className="absolute top-4 right-4"
+        operation={operation}
+        selectable={selectable}
+        selected={selected}
+        onSelect={onSelect}
+      />
     </Card>
   )
 }
@@ -247,11 +263,27 @@ const OperatorTags = ({ operation }: { operation: Operation }) => {
 const CardActions = ({
   className,
   operation,
+  selected,
+  selectable,
+  onSelect,
 }: {
   className?: string
   operation: Operation
+  selectable?: boolean
+  selected?: boolean
+  onSelect?: (operation: Operation, selected: boolean) => void
 }) => {
-  return (
+  return selectable ? (
+    <Button
+      small
+      minimal={!selected}
+      outlined={!selected}
+      intent="primary"
+      className="absolute top-4 right-4"
+      icon={selected ? 'tick' : 'blank'}
+      onClick={() => onSelect?.(operation, !selected)}
+    />
+  ) : (
     <div className={clsx('flex gap-1', className)}>
       <Tooltip2
         placement="bottom"
@@ -288,7 +320,11 @@ const CardActions = ({
           <div className="max-w-sm dark:text-slate-900">添加到作业集</div>
         }
       >
-        <AddToOperationSetButton small icon="plus" operationId={operation.id} />
+        <AddToOperationSetButton
+          small
+          icon="plus"
+          operationIds={[operation.id]}
+        />
       </Tooltip2>
     </div>
   )

src/components/OperationList.tsx

@@ -6,15 +6,19 @@ import { ComponentType, ReactNode, useEffect } from 'react'
 
 import { neoLayoutAtom } from 'store/pref'
 
+import { Operation } from '../models/operation'
 import { NeoOperationCard, OperationCard } from './OperationCard'
 import { withSuspensable } from './Suspensable'
 
 interface OperationListProps extends UseOperationsParams {
+  multiselect?: boolean
+  selectedOperations?: Operation[]
+  onSelect?: (operation: Operation, selected: boolean) => void
   onUpdate?: (params: { total: number }) => void
 }
 
 export const OperationList: ComponentType<OperationListProps> = withSuspensable(
-  ({ onUpdate, ...params }) => {
+  ({ multiselect, selectedOperations, onSelect, onUpdate, ...params }) => {
     const neoLayout = useAtomValue(neoLayoutAtom)
 
     const { operations, total, setSize, isValidating, isReachingEnd } =
@@ -38,7 +42,13 @@ export const OperationList: ComponentType<OperationListProps> = withSuspensable(
         }}
       >
         {operations.map((operation) => (
-          <NeoOperationCard operation={operation} key={operation.id} />
+          <NeoOperationCard
+            operation={operation}
+            key={operation.id}
+            selectable={multiselect}
+            selected={selectedOperations?.some((op) => op.id === operation.id)}
+            onSelect={onSelect}
+          />
         ))}
       </div>
     ) : (

src/components/Operations.tsx

@@ -1,6 +1,7 @@
 import {
   Button,
   ButtonGroup,
+  Callout,
   Card,
   Divider,
   H6,
@@ -21,10 +22,12 @@ import { OperationList } from 'components/OperationList'
 import { OperationSetList } from 'components/OperationSetList'
 import { neoLayoutAtom } from 'store/pref'
 
+import { Operation } from '../models/operation'
 import { LevelSelect } from './LevelSelect'
 import { OperatorFilter, useOperatorFilter } from './OperatorFilter'
 import { withSuspensable } from './Suspensable'
 import { UserFilter } from './UserFilter'
+import { AddToOperationSetButton } from './operation-set/AddToOperationSet'
 
 export const Operations: ComponentType = withSuspensable(() => {
   const [queryParams, setQueryParams] = useState<
@@ -42,6 +45,8 @@ export const Operations: ComponentType = withSuspensable(() => {
   const [selectedUser, setSelectedUser] = useState<MaaUserInfo>()
   const [neoLayout, setNeoLayout] = useAtom(neoLayoutAtom)
   const [tab, setTab] = useState<'operation' | 'operationSet'>('operation')
+  const [multiselect, setMultiselect] = useState(false)
+  const [selectedOperations, setSelectedOperations] = useState<Operation[]>([])
 
   return (
     <>
@@ -74,7 +79,15 @@ export const Operations: ComponentType = withSuspensable(() => {
               title="作业集"
             />
           </Tabs>
-          <ButtonGroup className="ml-auto">
+          <Button
+            minimal
+            icon="multi-select"
+            title="启动多选"
+            className="ml-auto mr-2"
+            active={multiselect}
+            onClick={() => setMultiselect((v) => !v)}
+          />
+          <ButtonGroup>
             <Button
               icon="grid-view"
               active={neoLayout}
@@ -178,6 +191,43 @@ export const Operations: ComponentType = withSuspensable(() => {
                 </ButtonGroup>
               </div>
             </div>
+            {multiselect && (
+              <Callout className="mt-2 p-0 select-none">
+                <details>
+                  <summary className="px-2 py-4 cursor-pointer hover:bg-zinc-500 hover:bg-opacity-5">
+                    已选择 {selectedOperations.length} 份作业
+                  </summary>
+                  <div className="p-2 flex flex-wrap gap-1">
+                    {selectedOperations.map((operation) => (
+                      <Button
+                        key={operation.id}
+                        small
+                        minimal
+                        rightIcon="cross"
+                        onClick={() =>
+                          setSelectedOperations((old) =>
+                            old.filter((op) => op.id !== operation.id),
+                          )
+                        }
+                      >
+                        {operation.parsedContent.doc.title}
+                      </Button>
+                    ))}
+                  </div>
+                </details>
+                <AddToOperationSetButton
+                  minimal
+                  outlined
+                  intent="primary"
+                  icon="add-to-folder"
+                  className="absolute top-2 right-2"
+                  disabled={selectedOperations.length === 0}
+                  operationIds={selectedOperations.map((op) => op.id)}
+                >
+                  添加到作业集
+                </AddToOperationSetButton>
+              </Callout>
+            )}
           </>
         )}
 
@@ -218,6 +268,17 @@ export const Operations: ComponentType = withSuspensable(() => {
         {tab === 'operation' && (
           <OperationList
             {...queryParams}
+            multiselect={multiselect}
+            selectedOperations={selectedOperations}
+            onSelect={(operation, selected) =>
+              setSelectedOperations((old) => {
+                const newList = old.filter((op) => op.id !== operation.id)
+                if (selected) {
+                  newList.push(operation)
+                }
+                return newList
+              })
+            }
             operator={operatorFilter.enabled ? operatorFilter : undefined}
             // 按热度排序时列表前几页的变化不会太频繁，可以不刷新第一页，节省点流量
             revalidateFirstPage={queryParams.orderBy !== 'hot'}