Merge pull request #1 from GeorgeZhang2035/guan/temp1

fix(sheet): bug of fav group fixed!

Author: Gemini2035

src/components/editor/operator/EditorSheet.tsx

@@ -14,14 +14,12 @@ type EditorSheetProps = SheetOperatorProps & SheetGroupProps
 export type Group = CopilotDocV1.Group
 export type Operator = CopilotDocV1.Operator
 
-const EditorOperatorSheet = (sheetProps: EditorSheetProps) => {
-  return (
-    <div className="overflow-y-auto">
-      <SheetOperatorContainer {...sheetProps} />
-      <SheetGroupContainer {...sheetProps} />
-    </div>
-  )
-}
+const EditorOperatorSheet = (sheetProps: EditorSheetProps) => (
+  <article className="overflow-y-auto">
+    <SheetOperatorContainer {...sheetProps} />
+    <SheetGroupContainer {...sheetProps} />
+  </article>
+)
 
 export const EditorSheetTrigger = (sheetProps: EditorSheetProps) => {
   const [open, setOpen] = useState(false)

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

@@ -32,15 +32,15 @@ export const SheetContainerSkeleton = ({
     [mini],
   )
   return (
-    <div className={className}>
-      <div className={clsx('flex items-center pl-3', mini ? 'my-1' : 'my-5')}>
-        <div className="flex items-center">
-          {StaticTitle}
-          {rightOptions}
-        </div>
-      </div>
+    <section className={className}>
+      <header
+        className={clsx('flex items-center pl-3', mini ? 'my-1' : 'my-5')}
+      >
+        {StaticTitle}
+        {rightOptions}
+      </header>
       {!mini && <Divider />}
       {children}
-    </div>
+    </section>
   )
 }

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

@@ -11,6 +11,7 @@ import { useAtom } from 'jotai'
 import { isEqual, omit } from 'lodash-es'
 import { useMemo, useState } from 'react'
 import { UseFieldArrayRemove, UseFormSetError } from 'react-hook-form'
+import { useEvent } from 'react-use'
 
 import { AppToaster } from 'components/Toaster'
 import { CopilotDocV1 } from 'models/copilot.schema'
@@ -127,6 +128,7 @@ const SheetGroup = ({
       ...[...favGroups].filter(({ name }) => name !== value.name),
       { ...value },
     ])
+
   const eventHandleProxy = (
     type: EventType,
     value: Group,
@@ -202,28 +204,30 @@ const SheetGroup = ({
     <>
       {FavCoverAlert}
       <div className="flex px-1">
-        <div className="flex-1 sticky top-0 h-screen overflow-y-auto">
+        <div className="flex-1 sticky top-0 max-h-screen flex flex-col">
+          <div className="grow h-full overflow-y-auto py-1">
+            <SheetContainerSkeleton title="已设置的分组" icon="cog" mini>
+              <div>
+                {existedGroups.length
+                  ? existedGroups.map((item) => (
+                      <GroupItem
+                        key={item.name}
+                        existedGroup={existedGroups}
+                        existedOperator={existedOperators}
+                        groupInfo={item}
+                        editable
+                        exist={checkGroupExisted(item.name)}
+                        pinned={checkGroupPinned(item)}
+                        eventHandleProxy={eventHandleProxy}
+                      />
+                    ))
+                  : GroupNoData}
+              </div>
+            </SheetContainerSkeleton>
+          </div>
           <SheetContainerSkeleton title="添加干员组" icon="add" mini>
             <EditorGroupName {...{ eventHandleProxy }} />
           </SheetContainerSkeleton>
-          <SheetContainerSkeleton title="已设置的分组" icon="cog" mini>
-            <div>
-              {existedGroups.length
-                ? existedGroups.map((item) => (
-                    <GroupItem
-                      key={item.name}
-                      existedGroup={existedGroups}
-                      existedOperator={existedOperators}
-                      groupInfo={item}
-                      editable
-                      exist={checkGroupExisted(item.name)}
-                      pinned={checkGroupPinned(item)}
-                      eventHandleProxy={eventHandleProxy}
-                    />
-                  ))
-                : GroupNoData}
-            </div>
-          </SheetContainerSkeleton>
         </div>
         <Divider />
         <div className="flex-1">
@@ -237,7 +241,7 @@ const SheetGroup = ({
                       editable={false}
                       exist={checkGroupExisted(item.name)}
                       eventHandleProxy={eventHandleProxy}
-                      pinned={checkGroupPinned(item)}
+                      pinned={false}
                     />
                   ))
                 : GroupNoData}
@@ -253,7 +257,7 @@ const SheetGroup = ({
                       editable={false}
                       exist={checkGroupExisted(item.name)}
                       eventHandleProxy={eventHandleProxy}
-                      pinned={checkGroupPinned(item)}
+                      pinned
                     />
                   ))
                 : GroupNoData}

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

@@ -257,7 +257,7 @@ const SheetOperator = ({
             className="cursor-pointer mx-auto text-sm text-gray-500 hover:text-inherit hover:underline"
             onClick={() => setPageIndex(pageIndex + 1)}
           >
-            显示更多干员
+            显示更多干员({operatorsGroupedBySubProf.length - lastIndex})
           </H6>
         )}
       </div>
@@ -384,9 +384,7 @@ const SheetOperator = ({
 export const SheetOperatorContainer = (
   sheetOperatorProp: SheetOperatorProps,
 ) => (
-  <div>
-    <SheetContainerSkeleton title="选择干员" icon="person">
-      <SheetOperator {...sheetOperatorProp} />
-    </SheetContainerSkeleton>
-  </div>
+  <SheetContainerSkeleton title="选择干员" icon="person">
+    <SheetOperator {...sheetOperatorProp} />
+  </SheetContainerSkeleton>
 )

src/components/editor/operator/sheet/sheetGroup/SheetGroupItem.tsx

@@ -108,7 +108,8 @@ export const GroupItem = ({
     ),
     [groupInfo.name],
   )
-  const GroupOperations = useMemo(() => {
+
+  const GroupActions = useMemo(() => {
     const pinText = pinned ? `从收藏移除` : `添加至收藏`
     const pinIcon = pinned ? 'star' : 'star-empty'
     return (
@@ -132,6 +133,7 @@ export const GroupItem = ({
         )}
         {(editable || pinned) && (
           <Popover2
+            disabled={!pinned}
             content={
               <Menu className="p-0">
                 <MenuItem
@@ -142,18 +144,25 @@ export const GroupItem = ({
               </Menu>
             }
           >
-            <Button minimal icon={pinIcon} title={pinText} />
+            <Button
+              minimal
+              icon={pinIcon}
+              title={pinText}
+              onClick={
+                pinned ? undefined : () => eventHandleProxy('pin', groupInfo)
+              }
+            />
           </Popover2>
         )}
       </div>
     )
-  }, [showOperators, pinned, exist])
+  }, [showOperators, pinned, exist, eventHandleProxy])
 
   return (
     <Card interactive={!exist} className="mt-1 mx-0.5">
       <div className="flex items-center">
         {GroupName}
-        {GroupOperations}
+        {GroupActions}
       </div>
       {OperatorsPart}
     </Card>