refactor(sheet): part of sheet optimized (except eventHandleProxy)

Author: gemini2035

scripts/shared.ts

@@ -114,6 +114,7 @@ export async function getOperators() {
           id: id,
           subProf: op.subProfessionId,
           ...transformOperatorName(op.name),
+          alt_name: op.appellation,
         },
       ]
     }),

src/components/editor/operator/EditorSheet.tsx

@@ -1,6 +1,6 @@
 import { Button, Drawer, DrawerSize } from '@blueprintjs/core'
 
-import { FC, useMemo, useState } from 'react'
+import { FC, useState } from 'react'
 
 import { CopilotDocV1 } from 'models/copilot.schema'
 
@@ -23,15 +23,15 @@ const EditorOperatorSheet = (sheetProps: EditorSheetProps) => (
 
 export const EditorSheetTrigger: FC<EditorSheetProps> = (sheetProps) => {
   const [open, setOpen] = useState(false)
-  const miniMedia = useMemo(() => window.innerWidth < 600, [])
   return (
     <>
       <Drawer
         isOpen={open}
         onClose={() => setOpen(false)}
-        size={miniMedia ? DrawerSize.LARGE : '55%'}
+        size={DrawerSize.LARGE}
+        className="max-w-[900px]"
       >
-        <EditorOperatorSheet {...sheetProps} miniMedia={miniMedia} />
+        <EditorOperatorSheet {...sheetProps} />
       </Drawer>
       <Button onClick={() => setOpen(true)} text="快捷编辑" fill />
     </>

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

@@ -1,7 +1,7 @@
 import { Divider, H3, Icon, IconName, MaybeElement } from '@blueprintjs/core'
 
 import clsx from 'clsx'
-import { ReactNode, useMemo } from 'react'
+import { ReactNode } from 'react'
 
 interface SheetContainerSkeletonProps {
   title: string
@@ -19,28 +19,16 @@ export const SheetContainerSkeleton = ({
   mini,
   rightOptions,
   className,
-}: SheetContainerSkeletonProps) => {
-  const StaticTitle = useMemo(
-    () => (
-      <>
-        <Icon icon={icon} size={mini ? 16 : 20} />
-        <H3 className={clsx('p-0 m-0 ml-3 truncate', mini && '!text-lg')}>
-          {title}
-        </H3>
-      </>
-    ),
-    [mini],
-  )
-  return (
-    <section className={className}>
-      <header
-        className={clsx('flex items-center pl-3', mini ? 'my-1' : 'my-5')}
-      >
-        {StaticTitle}
-        {rightOptions}
-      </header>
-      {!mini && <Divider />}
-      {children}
-    </section>
-  )
-}
+}: SheetContainerSkeletonProps) => (
+  <section className={className}>
+    <header className={clsx('flex items-center pl-3', mini ? 'my-1' : 'my-5')}>
+      <Icon icon={icon} size={mini ? 16 : 20} />
+      <H3 className={clsx('p-0 m-0 ml-3 truncate', mini && '!text-lg')}>
+        {title}
+      </H3>
+      {rightOptions}
+    </header>
+    {!mini && <Divider />}
+    {children}
+  </section>
+)

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

@@ -9,7 +9,7 @@ import {
 } from '@blueprintjs/core'
 
 import { useAtom } from 'jotai'
-import { isEqual, omit } from 'lodash-es'
+import { isEqual, isEqualWith, omit } from 'lodash-es'
 import { FC, useMemo, useState } from 'react'
 import { UseFieldArrayRemove } from 'react-hook-form'
 
@@ -82,27 +82,18 @@ const SheetGroup = ({
   ) => {
     const checkTarget = favGroups.find((item) => item.name === target.name)
     if (checkTarget) {
-      if ((checkTarget.opers?.length || 0) === (target.opers?.length || 0)) {
-        for (const aItem of checkTarget.opers!) {
-          if (
-            target.opers?.find((bItem) => {
-              return isEqual(
-                omit(aItem, ignoreKeyDic),
-                omit(bItem, ignoreKeyDic),
-              )
-            })
-          )
-            continue
-          else return false
-        }
-        return true
-      } else return false
-    } else return false
-    // return isEqualWith(checkTarget, target, (value1, value2, key) => {
-    //   if (ignoreKeyDic.find((item) => item === key)) return true
-    //   else {
-    //   }
-    // })
+      return isEqualWith(
+        omit(checkTarget, ignoreKeyDic),
+        omit(target, ignoreKeyDic),
+        ({ opers: aOpers }, { opers: bOpers }) =>
+          isEqual(
+            aOpers.map((item) => omit(item, ignoreKeyDic)),
+            bOpers.map((item) => omit(item, ignoreKeyDic)),
+          ),
+      )
+    } else {
+      return false
+    }
   }
   const checkSamePinned = (target: string) =>
     !!favGroups.find(({ name }) => name === target)
@@ -111,11 +102,11 @@ const SheetGroup = ({
       existedGroups.forEach((groupItem) => {
         const oldLength = groupItem.opers?.length || 0
         if (oldLength) {
-          groupItem.opers = groupItem.opers?.filter(
+          const opers = groupItem.opers?.filter(
             (operItem) => operItem.name !== item.name,
           )
-          if (groupItem.opers?.length !== oldLength)
-            submitGroup(groupItem, undefined, true)
+          if (opers?.length !== oldLength)
+            submitGroup({ ...groupItem, ...{ opers } }, undefined, true)
         }
       })
     })
@@ -273,13 +264,14 @@ const EditorGroupName = ({
   const [groupName, setGroupName] = useState('')
 
   const addGroupHandle = () => {
-    if (!groupName) {
+    const name = groupName.trim()
+    if (!name) {
       AppToaster.show({
         message: '干员组名不能为空',
         intent: Intent.DANGER,
       })
     } else {
-      eventHandleProxy('add', { name: groupName.trim() })
+      eventHandleProxy('add', { name })
       setGroupName('')
     }
   }