feat(sheet): fav Operator completed

Author: gemini2035

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

@@ -158,7 +158,7 @@ const SheetGroup = ({
       { ...value },
     ])
 
-  const groupAddHandle = (value: Group) => {
+  const groupAddHandle: GroupListModifyProp['groupAddHandle'] = (value) => {
     if (checkGroupExisted(value.name)) {
       AppToaster.show({
         message: '干员组已存在！',
@@ -169,18 +169,20 @@ const SheetGroup = ({
       submitGroup(value, undefined, true)
     }
   }
-  const groupRemoveHandle = (_id: string) => {
+  const groupRemoveHandle: GroupListModifyProp['groupRemoveHandle'] = (_id) => {
     removeGroup(existedGroups.findIndex((item) => item._id === _id))
   }
-  const groupPinHandle = (value: Group) => {
+  const groupPinHandle: GroupListModifyProp['groupPinHandle'] = (value) => {
     if (checkGroupPinned(value))
       setFavGroups([...favGroups].filter(({ name }) => name !== value.name))
     else {
       if (checkSamePinned(value.name)) setCoverGroup(value)
       else updateFavGroup(value)
     }
   }
-  const groupUpdateHandle = (value: Group) => {
+  const groupUpdateHandle: GroupListModifyProp['groupUpdateHandle'] = (
+    value,
+  ) => {
     changeOperatorOfOtherGroups(value.opers)
     submitGroup(value, undefined, true)
   }

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

@@ -1,11 +1,15 @@
-import { Button, Divider, H4, H5, H6, Intent } from '@blueprintjs/core'
+import { Alert, Button, Divider, H4, H5, H6, Intent } from '@blueprintjs/core'
 
 import clsx from 'clsx'
+import { useAtom } from 'jotai'
+import { isEqual, omit } from 'lodash'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { UseFieldArrayRemove } from 'react-hook-form'
 
 import { AppToaster } from 'components/Toaster'
 import { OPERATORS, PROFESSIONS } from 'models/operator'
+import { ignoreKeyDic } from 'store/useFavGroups'
+import { favOperatorAtom } from 'store/useFavOperators'
 
 import { EditorPerformerOperatorProps } from '../EditorPerformerOperator'
 import { Group, Operator } from '../EditorSheet'
@@ -20,12 +24,23 @@ export interface SheetOperatorProps {
   removeOperator: UseFieldArrayRemove
 }
 
+export interface OperatorModifyProps {
+  operatorPinHandle?: (value: Operator) => void
+  operatorSelectHandle?: (value: string) => void
+  operatorSkillHandle?: (value: Operator) => void
+}
+
 const defaultProf = [
   {
     id: 'all',
     name: '全部',
     sub: [],
   },
+  {
+    id: 'fav',
+    name: '收藏',
+    sub: [],
+  },
   {
     id: 'others',
     name: '其它',
@@ -39,9 +54,9 @@ const defaultSubProf = [
 ]
 
 const formattedProfessions = [
-  defaultProf[0],
+  ...defaultProf.slice(0, defaultProf.length - 1),
   ...PROFESSIONS,
-  ...defaultProf.slice(1),
+  ...defaultProf.slice(defaultProf.length - 1),
 ]
 
 const paginationSize = 60
@@ -56,6 +71,12 @@ const SheetOperator = ({
 
   const [selectedProf, setSelectedProf] = useState(formattedProfessions[0])
   const [selectedSubProf, setSelectedSubProf] = useState(defaultSubProf[0])
+  const [favOperators, setFavOperators] = useAtom(favOperatorAtom)
+  const [coverOperator, setCoverOperator] = useState<Operator>()
+
+  const favOperatorFindByName = (target: string) => {
+    return !!favOperators.find(({ name }) => name === target)
+  }
 
   const [formattedSubProfessions, operatorsGroupedByProf] = useMemo(
     () => [
@@ -73,12 +94,14 @@ const SheetOperator = ({
         ...OPERATORS,
       ].filter((item) => {
         if (selectedProf.id === defaultProf[0].id) return true
-        else if (selectedProf.id === defaultProf[1].id) {
+        if (selectedProf.id === defaultProf[1].id)
+          return favOperatorFindByName(item.name)
+        else if (selectedProf.id === defaultProf[2].id) {
           return item.subProf === 'notchar1' || !item.subProf
         } else return !!selectedProf.sub?.find((op) => op.id === item.subProf)
       }),
     ],
-    [selectedProf, existedOperators],
+    [selectedProf, existedOperators, favOperators],
   )
 
   const checkOperatorSelected = useCallback(
@@ -93,6 +116,34 @@ const SheetOperator = ({
     [existedOperators, existedGroups],
   )
 
+  const checkOperatorPinned = (target: Operator, ignoreKey = ignoreKeyDic) =>
+    isEqual(
+      omit(target, [...ignoreKey]),
+      omit(
+        favOperators.find(({ name }) => name === target.name),
+        [...ignoreKey],
+      ),
+    )
+
+  const updateFavOperator = (value: Operator) =>
+    setFavOperators([
+      ...[...favOperators].filter(({ name }) => name !== value.name),
+      { ...value },
+    ])
+
+  const operatorPinHandle: OperatorModifyProps['operatorPinHandle'] = (
+    value,
+  ) => {
+    if (checkOperatorPinned(value))
+      setFavOperators(
+        [...favOperators].filter(({ name }) => name !== value.name),
+      )
+    else {
+      if (favOperatorFindByName(value.name)) setCoverOperator(value)
+      else updateFavOperator(value)
+    }
+  }
+
   const operatorsGroupedBySubProf = useMemo(() => {
     if (selectedSubProf.id === 'all') return operatorsGroupedByProf
     else if (selectedSubProf.id === 'selected')
@@ -105,7 +156,9 @@ const SheetOperator = ({
       )
   }, [selectedSubProf, operatorsGroupedByProf, checkOperatorSelected])
 
-  const operatorSelectHandle = (operatorName: string) => {
+  const operatorSelectHandle: OperatorModifyProps['operatorSelectHandle'] = (
+    operatorName,
+  ) => {
     if (checkOperatorSelected(operatorName))
       if (existedOperators.find((item) => item.name === operatorName))
         removeOperator(
@@ -116,10 +169,19 @@ const SheetOperator = ({
           message: `干员 ${operatorName} 已被编组`,
           intent: Intent.DANGER,
         })
-    else submitOperator({ name: operatorName }, undefined, true)
+    else
+      submitOperator(
+        favOperators.find(({ name }) => name === operatorName) || {
+          name: operatorName,
+        },
+        undefined,
+        true,
+      )
   }
 
-  const operatorSkillHandle = (value: Operator) => {
+  const operatorSkillHandle: OperatorModifyProps['operatorSkillHandle'] = (
+    value,
+  ) => {
     submitOperator(value, undefined, true)
   }
 
@@ -259,44 +321,70 @@ const SheetOperator = ({
   )
 
   return (
-    <div className="flex h-full">
-      <div className="flex-auto px-1" ref={operatorScrollRef}>
-        {operatorsGroupedBySubProf.length ? (
-          <>
-            <div
-              key="operatorContainer"
-              className="flex flex-wrap items-start content-start overscroll-contain relative"
-            >
-              {operatorsGroupedBySubProf
-                .slice(0, lastIndex)
-                .map(({ name: operatorInfoName }, index) => {
-                  const operatorDetail = existedOperators.find(
-                    ({ name }) => name === operatorInfoName,
-                  )
-                  return (
-                    <div
-                      className="flex items-center w-32 h-32 flex-0"
-                      key={index}
-                    >
-                      <OperatorItem
-                        selected={checkOperatorSelected(operatorInfoName)}
-                        onSkillChange={operatorSkillHandle}
-                        operator={operatorDetail}
-                        name={operatorInfoName}
-                        onClick={() => operatorSelectHandle(operatorInfoName)}
-                      />
-                    </div>
-                  )
-                })}
-            </div>
-            {ShowMoreButton}
-          </>
-        ) : (
-          OperatorNoData
-        )}
+    <>
+      <div className="flex h-full">
+        <div className="flex-auto px-1" ref={operatorScrollRef}>
+          {operatorsGroupedBySubProf.length ? (
+            <>
+              <div
+                key="operatorContainer"
+                className="flex flex-wrap items-start content-start overscroll-contain relative"
+              >
+                {operatorsGroupedBySubProf
+                  .slice(0, lastIndex)
+                  .map(({ name: operatorInfoName }, index) => {
+                    const operatorDetail = existedOperators.find(
+                      ({ name }) => name === operatorInfoName,
+                    )
+                    return (
+                      <div
+                        className="flex items-center w-32 h-32 flex-0"
+                        key={index}
+                      >
+                        <OperatorItem
+                          selected={checkOperatorSelected(operatorInfoName)}
+                          pinned={checkOperatorPinned(
+                            operatorDetail || { name: operatorInfoName },
+                          )}
+                          onSkillChange={operatorSkillHandle}
+                          operator={operatorDetail}
+                          name={operatorInfoName}
+                          onClick={() => operatorSelectHandle(operatorInfoName)}
+                          onPinHandle={
+                            existedOperators.find(
+                              ({ name }) => name === operatorInfoName,
+                            )
+                              ? operatorPinHandle
+                              : undefined
+                          }
+                        />
+                      </div>
+                    )
+                  })}
+              </div>
+              {ShowMoreButton}
+            </>
+          ) : (
+            OperatorNoData
+          )}
+        </div>
+        {ProfSelect}
       </div>
-      {ProfSelect}
-    </div>
+      <Alert
+        isOpen={!!coverOperator}
+        confirmButtonText="是"
+        cancelButtonText="否"
+        icon="error"
+        intent={Intent.DANGER}
+        onConfirm={() => updateFavOperator(coverOperator as Group)}
+        onClose={() => setCoverOperator(undefined)}
+      >
+        <div>
+          <H5>收藏: </H5>
+          <p>检测到同名的已收藏干员 {coverOperator?.name}，是否覆盖？</p>
+        </div>
+      </Alert>
+    </>
   )
 }
 

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

@@ -1,8 +1,11 @@
-import { Card, CardProps } from '@blueprintjs/core'
+import { Button, Card, CardProps, Icon } from '@blueprintjs/core'
+import { Popover2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
 
 import { OperatorAvatar } from '../EditorOperator'
+import { Operator } from '../EditorSheet'
+import { OperatorModifyProps } from './SheetOperator'
 import { SkillAboutProps, SkillAboutTrigger } from './SheetOperatorSkillAbout'
 
 export interface OperatorItemPorps extends CardProps, SkillAboutProps {
@@ -11,6 +14,8 @@ export interface OperatorItemPorps extends CardProps, SkillAboutProps {
   horizontal?: boolean
   scaleDisable?: boolean
   readOnly?: boolean
+  pinned?: boolean
+  onPinHandle?: OperatorModifyProps['operatorPinHandle']
 }
 
 export const OperatorItem = ({
@@ -21,6 +26,8 @@ export const OperatorItem = ({
   scaleDisable,
   readOnly,
   onSkillChange,
+  onPinHandle,
+  pinned,
   ...cardProps
 }: OperatorItemPorps) => (
   <Card
@@ -33,15 +40,45 @@ export const OperatorItem = ({
     {...cardProps}
   >
     <>
-      <OperatorAvatar name={name} size="large" />
-      <p
-        className={clsx(
-          'font-bold leading-none text-center mt-3 truncate',
-          horizontal && 'mt-0 ml-1 mr-auto',
-        )}
-      >
-        {name}
-      </p>
+      <>
+        <OperatorAvatar name={name} size="large" />
+        <p
+          className={clsx(
+            'font-bold leading-none text-center mt-3 truncate',
+            horizontal && 'mt-0 ml-1 mr-auto',
+          )}
+        >
+          {name}
+        </p>
+      </>
+      {!horizontal && selected && !!onPinHandle && (
+        <div
+          className="absolute top-2 right-2"
+          onClick={(e) => e.stopPropagation()}
+          role="presentation"
+        >
+          <Popover2
+            content={
+              <Button
+                minimal
+                onClick={() => onPinHandle?.(operator as Operator)}
+              >
+                <Icon icon="pin" className="-rotate-45" />
+                <span>移出收藏</span>
+              </Button>
+            }
+            disabled={!pinned}
+          >
+            <Icon
+              icon={pinned ? 'pin' : 'unpin'}
+              className={clsx(pinned && '-rotate-45')}
+              onClick={
+                pinned ? undefined : () => onPinHandle?.(operator as Operator)
+              }
+            />
+          </Popover2>
+        </div>
+      )}
     </>
     {!readOnly && selected && (
       <SkillAboutTrigger {...{ operator, onSkillChange }} />

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

@@ -13,12 +13,13 @@ import { EditorOperatorSkill } from '../EditorOperatorSkill'
 import { EditorOperatorSkillTimes } from '../EditorOperatorSkillTimes'
 import { EditorOperatorSkillUsage } from '../EditorOperatorSkillUsage'
 import { Operator } from '../EditorSheet'
+import { OperatorModifyProps } from './SheetOperator'
 
 const needSkillTimeType = CopilotDocV1.SkillUsageType.ReadyToUseTimes
 
 export interface SkillAboutProps {
   operator?: Operator
-  onSkillChange?: (value: Operator) => void
+  onSkillChange?: OperatorModifyProps['operatorSkillHandle']
 }
 
 const skillDic = operatorSkillUsages as DetailedSelectChoice[]