From cba27640ebac4a64911dbe9d198b5fc2ead32ad2 Mon Sep 17 00:00:00 2001
From: Guan <821143943@qq.com>
Date: Sat, 12 Apr 2025 20:39:51 +0800
Subject: [PATCH 1/5] feat: operation multiselect

---
 src/components/OperationCard.tsx              |  44 ++++-
 src/components/OperationList.tsx              |  14 +-
 src/components/Operations.tsx                 |  63 ++++++-
 .../operation-set/AddToOperationSet.tsx       | 159 +++++++++++-------
 src/styles/blueprint.less                     |   9 +
 5 files changed, 219 insertions(+), 70 deletions(-)

diff --git a/src/components/OperationCard.tsx b/src/components/OperationCard.tsx
index 9cd29d7b..f8979ce2 100644
--- a/src/components/OperationCard.tsx
+++ b/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>
   )
diff --git a/src/components/OperationList.tsx b/src/components/OperationList.tsx
index 1266c2c4..f7c0c5de 100644
--- a/src/components/OperationList.tsx
+++ b/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>
     ) : (
diff --git a/src/components/Operations.tsx b/src/components/Operations.tsx
index 142f19ab..61d515ce 100644
--- a/src/components/Operations.tsx
+++ b/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'}
diff --git a/src/components/operation-set/AddToOperationSet.tsx b/src/components/operation-set/AddToOperationSet.tsx
index 806b0169..b112ec84 100644
--- a/src/components/operation-set/AddToOperationSet.tsx
+++ b/src/components/operation-set/AddToOperationSet.tsx
@@ -6,6 +6,7 @@ import {
   Dialog,
   NonIdealState,
   Tag,
+  ToastProps,
 } from '@blueprintjs/core'
 
 import {
@@ -15,7 +16,9 @@ import {
 } from 'apis/operation-set'
 import clsx from 'clsx'
 import { useAtomValue } from 'jotai'
-import { useState } from 'react'
+import { compact, isEqual } from 'lodash-es'
+import { FC, memo, useState } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 
 import { AppToaster } from 'components/Toaster'
 import { OperationSetEditorDialog } from 'components/operation-set/OperationSetEditor'
@@ -25,44 +28,54 @@ import { useNetworkState } from 'utils/useNetworkState'
 import { authAtom } from '../../store/auth'
 
 interface AddToOperationSetButtonProps extends ButtonProps {
-  operationId: number
+  operationIds: number[]
 }
 
-export function AddToOperationSetButton({
-  operationId,
-  ...props
-}: AddToOperationSetButtonProps) {
-  const [isOpen, setIsOpen] = useState(false)
+export const AddToOperationSetButton: FC<AddToOperationSetButtonProps> = memo(
+  ({ operationIds, ...props }) => {
+    const [isOpen, setIsOpen] = useState(false)
 
-  return (
-    <>
-      <Button {...props} onClick={() => setIsOpen(true)} />
-      <Dialog
-        title="添加到作业集"
-        icon="user"
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-      >
-        <AddToOperationSet
-          operationId={operationId}
-          isOpen={isOpen}
-          onSuccess={() => setIsOpen(false)}
+    return (
+      <>
+        <Button
+          {...props}
+          disabled={!operationIds.length}
+          onClick={() => setIsOpen(true)}
         />
-      </Dialog>
-    </>
-  )
-}
+        <Dialog
+          title={`添加 ${operationIds.length} 份作业到作业集`}
+          icon="add-to-folder"
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+        >
+          <AddToOperationSet
+            operationIds={operationIds}
+            isOpen={isOpen}
+            onSuccess={() => setIsOpen(false)}
+          />
+        </Dialog>
+      </>
+    )
+  },
+  (prevProps, nextProps) =>
+    isEqual(prevProps.operationIds, nextProps.operationIds),
+)
+AddToOperationSetButton.displayName = 'AddToOperationSetButton'
 
 interface AddToOperationSetProps {
-  operationId: number
+  operationIds: number[]
   isOpen: boolean
   onSuccess: () => void
 }
 
-export function AddToOperationSet({
-  operationId,
+function AddToOperationSet({
+  operationIds,
   onSuccess,
 }: AddToOperationSetProps) {
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const singleOperationId =
+    operationIds.length > 1 ? undefined : operationIds[0]
   const auth = useAtomValue(authAtom)
 
   const {
@@ -91,18 +104,23 @@ export function AddToOperationSet({
   const error =
     submitError || listError || (!auth.userId ? '未登录' : undefined)
 
-  const operationSetList = onlyShowAdded
-    ? operationSets?.filter(
-        (set) =>
-          checkboxOverrides[set.id] ?? set.copilotIds.includes(operationId),
-      )
-    : operationSets
+  const operationSetList =
+    singleOperationId && onlyShowAdded
+      ? operationSets?.filter(
+          (set) =>
+            checkboxOverrides[set.id] ??
+            set.copilotIds.includes(operationIds[0]),
+        )
+      : operationSets
 
-  const alreadyAdded = (operationSetId: number) =>
-    !!operationSets?.find(
-      (set) =>
-        set.id === operationSetId && set.copilotIds.includes(operationId),
-    )
+  const defaultChecked = (operationSetId: number) =>
+    singleOperationId
+      ? !!operationSets?.find(
+          (set) =>
+            set.id === operationSetId &&
+            set.copilotIds.includes(singleOperationId),
+        )
+      : false
 
   const onSubmit = async () => {
     if (loading || !operationSets?.length) return
@@ -111,32 +129,45 @@ export function AddToOperationSet({
 
     try {
       const tasks = Object.entries(checkboxOverrides).map(
-        ([idKey, checked]) => {
+        async ([idKey, checked]) => {
           const id = +idKey
           if (isNaN(id)) return undefined
 
-          if (checked && !alreadyAdded(id)) {
-            return addToOperationSet({
+          if (checked && !defaultChecked(id)) {
+            await addToOperationSet({
               operationSetId: id,
-              operationIds: [operationId],
+              operationIds,
             })
-          } else if (!checked && alreadyAdded(id)) {
-            return removeFromOperationSet({
+            return id
+          } else if (!checked && defaultChecked(id)) {
+            await removeFromOperationSet({
               operationSetId: id,
-              operationIds: [operationId],
+              operationIds,
             })
+            return id
           }
 
           return undefined
         },
       )
+      const processedIds = compact(await Promise.all(tasks))
+      if (processedIds.length) {
+        let action: ToastProps['action']
 
-      if (tasks.find(Boolean)) {
-        await Promise.all(tasks)
+        if (processedIds.length === 1) {
+          const search = new URLSearchParams(searchParams)
+          search.set('opset', processedIds[0].toString())
+          action = {
+            text: '点击查看',
+            className: '!px-1',
+            onClick: () => navigate({ search: search.toString() }),
+          }
+        }
 
         AppToaster.show({
           intent: 'success',
           message: '已添加到作业集',
+          action,
         })
       }
 
@@ -167,19 +198,17 @@ export function AddToOperationSet({
           />
         )}
 
-        <div className="max-h-[calc(100vh-20rem)] overflow-y-auto">
+        <div className="min-h-36 max-h-[calc(100vh-20rem)] overflow-y-auto">
           {operationSetList?.map(({ id, name, copilotIds, status }) => (
             <div key={id}>
               <Checkbox
                 className={clsx(
-                  'block m-0 p-2 !pl-10 hover:bg-slate-200 dark:hover:bg-slate-800',
+                  'flex items-center m-0 p-2 !pl-10 hover:bg-slate-200 dark:hover:bg-slate-800 [&>.bp4-control-indicator]:mt-0',
                   checkboxOverrides[id] !== undefined &&
-                    checkboxOverrides[id] !== alreadyAdded(id) &&
+                    checkboxOverrides[id] !== defaultChecked(id) &&
                     'font-bold',
                 )}
-                checked={
-                  checkboxOverrides[id] ?? copilotIds.includes(operationId)
-                }
+                checked={checkboxOverrides[id] ?? defaultChecked(id)}
                 onChange={(e) => {
                   const checked = (e.target as HTMLInputElement).checked
                   setCheckboxOverrides((prev) => ({ ...prev, [id]: checked }))
@@ -191,6 +220,7 @@ export function AddToOperationSet({
                   </Tag>
                 )}
                 {name}
+                <span className="ml-auto opacity-50">{copilotIds.length}</span>
               </Checkbox>
             </div>
           ))}
@@ -211,16 +241,19 @@ export function AddToOperationSet({
 
       <div className="h-px bg-slate-200" />
 
-      <div className="flex space-x-3 p-4">
-        <Checkbox
-          label="只显示已添加的"
-          className="grow"
-          checked={onlyShowAdded}
-          onChange={(e) =>
-            setOnlyShowAdded((e.target as HTMLInputElement).checked)
-          }
-        />
-        <Button onClick={() => setEditorOpen(true)}>创建作业集...</Button>
+      <div className="flex p-4 gap-3">
+        {!!singleOperationId && (
+          <Checkbox
+            label="只显示已添加的"
+            checked={onlyShowAdded}
+            onChange={(e) =>
+              setOnlyShowAdded((e.target as HTMLInputElement).checked)
+            }
+          />
+        )}
+        <Button className="ml-auto" onClick={() => setEditorOpen(true)}>
+          创建作业集...
+        </Button>
         <Button
           disabled={!operationSets?.length}
           loading={loading}
diff --git a/src/styles/blueprint.less b/src/styles/blueprint.less
index 5c4e43df..fcd66371 100644
--- a/src/styles/blueprint.less
+++ b/src/styles/blueprint.less
@@ -191,12 +191,21 @@ body {
     @apply rounded border-none;
     &.bp4-intent-success {
       @apply bg-emerald-500;
+      .bp4-button {
+        @apply !bg-emerald-500;
+      }
     }
     &.bp4-intent-warning {
       @apply bg-amber-500;
+      .bp4-button {
+        @apply !bg-amber-500;
+      }
     }
     &.bp4-intent-danger {
       @apply bg-red-500;
+      .bp4-button {
+        @apply !bg-red-500;
+      }
     }
     .bp4-button {
       @apply border-none p-0;

From 3700564f545b7ccfe8bf3add91f705745b497936 Mon Sep 17 00:00:00 2001
From: Guan <821143943@qq.com>
Date: Sat, 12 Apr 2025 22:50:11 +0800
Subject: [PATCH 2/5] feat: multiselect mode - select all and deselect all

---
 src/components/OperationList.tsx | 83 ++++++++++++++++++++++++++++++--
 src/components/Operations.tsx    | 51 --------------------
 2 files changed, 78 insertions(+), 56 deletions(-)

diff --git a/src/components/OperationList.tsx b/src/components/OperationList.tsx
index f7c0c5de..9fbe3848 100644
--- a/src/components/OperationList.tsx
+++ b/src/components/OperationList.tsx
@@ -1,24 +1,24 @@
-import { Button, NonIdealState } from '@blueprintjs/core'
+import { Button, Callout, NonIdealState } from '@blueprintjs/core'
+import { Tooltip2 } from '@blueprintjs/popover2'
 
 import { UseOperationsParams, useOperations } from 'apis/operation'
 import { useAtomValue } from 'jotai'
-import { ComponentType, ReactNode, useEffect } from 'react'
+import { ComponentType, ReactNode, useEffect, useState } from 'react'
 
 import { neoLayoutAtom } from 'store/pref'
 
 import { Operation } from '../models/operation'
 import { NeoOperationCard, OperationCard } from './OperationCard'
 import { withSuspensable } from './Suspensable'
+import { AddToOperationSetButton } from './operation-set/AddToOperationSet'
 
 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(
-  ({ multiselect, selectedOperations, onSelect, onUpdate, ...params }) => {
+  ({ multiselect, onUpdate, ...params }) => {
     const neoLayout = useAtomValue(neoLayoutAtom)
 
     const { operations, total, setSize, isValidating, isReachingEnd } =
@@ -34,6 +34,25 @@ export const OperationList: ComponentType<OperationListProps> = withSuspensable(
       onUpdate?.({ total })
     }, [total, onUpdate])
 
+    const [selectedOperations, setSelectedOperations] = useState<Operation[]>(
+      [],
+    )
+    const updateSelection = (add: Operation[], remove: Operation[]) => {
+      setSelectedOperations((old) => {
+        return [
+          ...old.filter((op) => !remove.some((o) => o.id === op.id)),
+          ...add.filter((op) => !old.some((o) => o.id === op.id)),
+        ]
+      })
+    }
+    const onSelect = (operation: Operation, selected: boolean) => {
+      if (selected) {
+        updateSelection([operation], [])
+      } else {
+        updateSelection([], [operation])
+      }
+    }
+
     const items: ReactNode = neoLayout ? (
       <div
         className="grid gap-4"
@@ -59,6 +78,60 @@ export const OperationList: ComponentType<OperationListProps> = withSuspensable(
 
     return (
       <>
+        {multiselect && (
+          <Callout className="mb-4 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
+                    outlined
+                    rightIcon="cross"
+                    onClick={() => updateSelection([], [operation])}
+                  >
+                    {operation.parsedContent.doc.title}
+                  </Button>
+                ))}
+              </div>
+            </details>
+            <div className="absolute top-2 right-2 flex">
+              <Tooltip2 content="只能选择已加载的项目" placement="top">
+                <Button
+                  minimal
+                  icon="tick"
+                  onClick={() => updateSelection(operations, [])}
+                >
+                  全选
+                </Button>
+              </Tooltip2>
+              <Button
+                minimal
+                intent="danger"
+                icon="trash"
+                onClick={() => setSelectedOperations([])}
+              >
+                清空
+              </Button>
+              <AddToOperationSetButton
+                minimal
+                outlined
+                intent="primary"
+                icon="add-to-folder"
+                className="ml-2"
+                disabled={selectedOperations.length === 0}
+                operationIds={selectedOperations.map((op) => op.id)}
+              >
+                添加到作业集
+              </AddToOperationSetButton>
+            </div>
+          </Callout>
+        )}
+
         {items}
 
         {isReachingEnd && operations.length === 0 && (
diff --git a/src/components/Operations.tsx b/src/components/Operations.tsx
index 61d515ce..05eb0a68 100644
--- a/src/components/Operations.tsx
+++ b/src/components/Operations.tsx
@@ -1,7 +1,6 @@
 import {
   Button,
   ButtonGroup,
-  Callout,
   Card,
   Divider,
   H6,
@@ -22,12 +21,10 @@ 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<
@@ -46,7 +43,6 @@ export const Operations: ComponentType = withSuspensable(() => {
   const [neoLayout, setNeoLayout] = useAtom(neoLayoutAtom)
   const [tab, setTab] = useState<'operation' | 'operationSet'>('operation')
   const [multiselect, setMultiselect] = useState(false)
-  const [selectedOperations, setSelectedOperations] = useState<Operation[]>([])
 
   return (
     <>
@@ -191,43 +187,6 @@ 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>
-            )}
           </>
         )}
 
@@ -269,16 +228,6 @@ export const Operations: ComponentType = withSuspensable(() => {
           <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'}

From 67e3dc302869428eff4550f77a0c57569eea7ef6 Mon Sep 17 00:00:00 2001
From: Guan <821143943@qq.com>
Date: Sun, 13 Apr 2025 01:22:38 +0800
Subject: [PATCH 3/5] feat: operation set auto sorting

---
 .../operation-set/OperationSetEditor.tsx      | 121 +++++++++++++++---
 1 file changed, 104 insertions(+), 17 deletions(-)

diff --git a/src/components/operation-set/OperationSetEditor.tsx b/src/components/operation-set/OperationSetEditor.tsx
index c1128083..858125bf 100644
--- a/src/components/operation-set/OperationSetEditor.tsx
+++ b/src/components/operation-set/OperationSetEditor.tsx
@@ -6,9 +6,12 @@ import {
   DialogProps,
   Icon,
   InputGroup,
+  Menu,
+  MenuItem,
   NonIdealState,
   TextArea,
 } from '@blueprintjs/core'
+import { Popover2 } from '@blueprintjs/popover2'
 import {
   DndContext,
   DragEndEvent,
@@ -44,10 +47,13 @@ import { Controller, UseFormSetError, useForm } from 'react-hook-form'
 import { FormField } from 'components/FormField'
 import { AppToaster } from 'components/Toaster'
 import { Sortable } from 'components/dnd'
-import { Operation } from 'models/operation'
+import { Level, Operation } from 'models/operation'
 import { OperationSet } from 'models/operation-set'
 import { formatError } from 'utils/error'
 
+import { useLevels } from '../../apis/level'
+import { findLevelByStageName } from '../../models/level'
+
 export function OperationSetEditorLauncher() {
   const [isOpen, setIsOpen] = useState(false)
 
@@ -202,27 +208,22 @@ function OperationSetForm({ operationSet, onSubmit }: FormProps) {
   return (
     <form
       className={clsx(
-        'p-4 w-[500px] max-w-[100vw] max-h-[calc(100vh-20rem)] min-h-[18rem] overflow-y-auto',
+        'p-4 w-[500px] max-w-[100vw] max-h-[calc(100vh-20rem)] min-h-[18rem] flex flex-col overflow-auto lg:overflow-hidden',
         isEdit && 'lg:w-[1000px]',
       )}
       onSubmit={localOnSubmit}
     >
-      <div className="gap-4 flex flex-wrap-reverse lg:flex-nowrap">
+      <div className="gap-4 flex flex-wrap-reverse lg:flex-nowrap lg:overflow-hidden">
         {isEdit && (
-          <div className="grow basis-full flex flex-col border-t lg:border-t-0 lg:border-r border-slate-200">
+          <div className="grow basis-full lg:overflow-y-auto border-t lg:border-t-0 lg:border-r border-slate-200">
             {operationSet.copilotIds.length > 0 ? (
-              <>
-                <div className="grow">
-                  <OperationSelector
-                    key={operationSet.id}
-                    operationSet={operationSet}
-                    selectorRef={operationSelectorRef}
-                  />
-                </div>
-              </>
+              <OperationSelector
+                key={operationSet.id}
+                operationSet={operationSet}
+                selectorRef={operationSelectorRef}
+              />
             ) : (
               <NonIdealState
-                className="grow"
                 icon="helicopter"
                 description={
                   <>
@@ -236,7 +237,7 @@ function OperationSetForm({ operationSet, onSubmit }: FormProps) {
           </div>
         )}
 
-        <div className="grow basis-full">
+        <div className="grow basis-full lg:overflow-y-auto">
           <FormField
             label="标题"
             field="name"
@@ -261,6 +262,7 @@ function OperationSetForm({ operationSet, onSubmit }: FormProps) {
             ControllerProps={{
               render: (renderProps) => (
                 <TextArea
+                  rows={6}
                   {...renderProps.field}
                   value={renderProps.field.value || ''}
                 />
@@ -290,7 +292,7 @@ function OperationSetForm({ operationSet, onSubmit }: FormProps) {
         </div>
       </div>
 
-      <div className="mt-6 flex items-end">
+      <div className="flex items-end">
         {isEdit && (
           <div className="text-xs text-gray-500">
             <Icon icon="info-sign" /> 修改后请点击保存按钮
@@ -338,6 +340,11 @@ function OperationSelector({
   const { operations, error } = useOperations({
     operationIds: operationSet.copilotIds,
   })
+  const {
+    data: levels,
+    isLoading: levelLoading,
+    error: levelError,
+  } = useLevels()
 
   const [renderedOperations, setRenderedOperations] = useState<Operation[]>([])
   useEffect(() => {
@@ -386,8 +393,88 @@ function OperationSelector({
     }
   }
 
+  const sort = (type: 'title' | 'level' | 'id' | 'reverse') => {
+    const levelCache: Record<string, Level | undefined> = {}
+    setRenderedOperations((items) => {
+      if (type === 'reverse') {
+        return [...items].reverse()
+      }
+      return [...items].sort((a, b) => {
+        if (type === 'title') {
+          return a.parsedContent.doc.title.localeCompare(
+            b.parsedContent.doc.title,
+          )
+        } else if (type === 'level') {
+          const aLevel = (levelCache[a.parsedContent.stageName] ??=
+            findLevelByStageName(levels, a.parsedContent.stageName))
+          const bLevel = (levelCache[b.parsedContent.stageName] ??=
+            findLevelByStageName(levels, b.parsedContent.stageName))
+
+          if (aLevel && bLevel) {
+            return aLevel.catThree.localeCompare(bLevel.catThree)
+          } else if (!aLevel && !bLevel) {
+            // 如果两个都是未知关卡，可能是自定义关卡，或者关卡列表加载失败，直接按 stageName 排序
+            return a.parsedContent.stageName.localeCompare(
+              b.parsedContent.stageName,
+            )
+          } else if (!aLevel) {
+            // 未知关卡排最后面
+            return 1
+          } else if (!bLevel) {
+            return -1
+          }
+        }
+        return a.id - b.id
+      })
+    })
+  }
+
   return (
-    <div className="py-2">
+    <div>
+      <div className="mb-2 flex">
+        <Popover2
+          minimal
+          captureDismiss
+          placement="bottom-start"
+          content={
+            <Menu>
+              <MenuItem
+                disabled={levelLoading}
+                icon="sort-alphabetical"
+                text={
+                  '按关卡' +
+                  (levelLoading
+                    ? ' (加载中...)'
+                    : levelError
+                      ? ' (关卡加载失败，使用备用排序)'
+                      : '')
+                }
+                onClick={() => sort('level')}
+              />
+              <MenuItem
+                icon="sort-alphabetical"
+                text="按标题"
+                onClick={() => sort('title')}
+              />
+              <MenuItem
+                icon="sort-numerical"
+                text="按 ID"
+                onClick={() => sort('id')}
+              />
+            </Menu>
+          }
+        >
+          <Button small minimal icon="sort" text="一键排序..." />
+        </Popover2>
+        <Button
+          small
+          minimal
+          icon="reset"
+          text="反转列表"
+          onClick={() => sort('reverse')}
+        />
+      </div>
+
       {error && (
         <Callout intent="danger" icon="error" title="错误">
           {formatError(error)}

From e51f46905f1bdcfe905ccb8e256908ababf252f9 Mon Sep 17 00:00:00 2001
From: Yizhen Wang <martinwang2002@gmail.com>
Date: Fri, 18 Apr 2025 20:26:52 +0000
Subject: [PATCH 4/5] feat: cache-control header

---
 staticwebapp.config.json | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/staticwebapp.config.json b/staticwebapp.config.json
index 7639790c..99a95a2f 100644
--- a/staticwebapp.config.json
+++ b/staticwebapp.config.json
@@ -4,5 +4,13 @@
     "exclude": [
       "*.{jpg,gif,png,ico,svg,css,scss,js}"
     ]
-  }
+  },
+  "routes": [
+    {
+      "route": "/*.{jpg,gif,png,ico,svg,css,scss,js,webp,webmanifest}",
+      "headers": {
+        "cache-control": "public, max-age=604800, immutable"
+      }
+    }
+  ]
 }

From 0b38211beab5ac721ef75b9048165f16b5bf5d8d Mon Sep 17 00:00:00 2001
From: Yizhen Wang <martinwang2002@gmail.com>
Date: Fri, 18 Apr 2025 20:57:06 +0000
Subject: [PATCH 5/5] build: disable sourcemap

---
 vite.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vite.config.ts b/vite.config.ts
index 1f950af0..720c229d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,7 +20,7 @@ export default defineConfig(({ command, mode }) => {
       },
     },
     build: {
-      sourcemap: true,
+      sourcemap: false,
     },
   }
 })