feat(UI):api dockiing & replace the icons

moon/apps/web/components/Issues/IssueList.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, memo, ReactNode, useRef, useState } from 'react'
 import { useAtomValue } from 'jotai'
 
-import { SyncOrganizationMember } from '@gitmono/types/index'
+import { LabelItem, SyncOrganizationMember } from '@gitmono/types/index'
 import {
   Button,
   ChevronDownIcon,
@@ -16,7 +16,6 @@ import {
 import { DropdownMenu } from '@gitmono/ui/DropdownMenu'
 import { MenuItem } from '@gitmono/ui/Menu'
 
-import { Label } from '@/components/Issues/IssuesContent'
 import { darkModeAtom } from '@/components/Issues/utils/store'
 import { SubjectCommand } from '@/components/Subject/SubjectCommand'
 import { BreadcrumbTitlebar } from '@/components/Titlebar/BreadcrumbTitlebar'
@@ -119,7 +118,7 @@ export const DropdownItemwithAvatar = ({
   )
 }
 
-export const DropdownItemwithLabel = ({ classname, label }: { classname?: string; label: Label }) => {
+export const DropdownItemwithLabel = ({ classname, label }: { classname?: string; label: LabelItem }) => {
   return (
     <div
       className={cn(
@@ -133,7 +132,7 @@ export const DropdownItemwithLabel = ({ classname, label }: { classname?: string
         style={{ backgroundColor: label.color, borderColor: label.color }}
       />
       <span className='text-sm font-semibold'>{label.name}</span>
-      <span className='ml-1 text-xs text-gray-500'>{label.remarks}</span>
+      <span className='ml-1 text-xs text-gray-500'>{label.description}</span>
     </div>
   )
 }
@@ -201,7 +200,7 @@ export const Dropdown = ({
   dropdownItem,
   isChosen,
   onOpen,
-  open,
+  // open,
   inside
 }: {
   name: string
@@ -217,6 +216,14 @@ export const Dropdown = ({
   // const [sort] = useAtom(sortAtom({ scope, filter: 'sortPicker' }))
   const isSearching = query.length > 0
   const ref = useRef<HTMLInputElement>(null)
+  const [open, setOpen] = useState<boolean>(false)
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen)
+    if (onOpen) {
+      onOpen(isOpen) // 把状态变化通知给父组件
+    }
+  }
 
   const DropdownSearch = () => (
     <div className='flex flex-1 flex-row items-center gap-2'>
@@ -252,7 +259,7 @@ export const Dropdown = ({
       {isChosen ? (
         <DropdownMenu
           open={open}
-          onOpenChange={onOpen}
+          onOpenChange={(open) => handleOpenChange(open)}
           key={name}
           align='end'
           desktop={{ width: 'w-72 max-h-[50vh] overflow-auto bg-white' }}
@@ -265,8 +272,11 @@ export const Dropdown = ({
             },
             {
               type: 'item',
-              label: <DropdownSearch />,
-              onSelect: (e) => e.preventDefault()
+              label: <DropdownSearch />
+              // onSelect: (e) => {
+              //   e.preventDefault()
+              //   onOpen?.(false)
+              // }
               // className: 'sticky top-10 z-50 bg-white'
             },
             { type: 'separator' },
@@ -290,6 +300,8 @@ export const Dropdown = ({
         <DropdownMenu
           key={name}
           align='end'
+          open={open}
+          onOpenChange={(open) => handleOpenChange(open)}
           desktop={{ width: 'w-72' }}
           items={[
             {

moon/apps/web/components/Issues/IssueNewPage.tsx

@@ -74,7 +74,7 @@ export default function IssueNewPage() {
   const labels: ItemInput[] = useMemo(
     () =>
       tags.map((i) => ({
-        text: i.remarks,
+        text: i.description,
         leadingVisual: () => (
           <div
             className='h-[14px] w-[14px] rounded-full border'
@@ -148,7 +148,7 @@ export default function IssueNewPage() {
     const map = new Map()
 
     tags.map((i) => {
-      map.set(i.remarks, i)
+      map.set(i.description, i)
     })
     return map
   }, [])