Feat: App folder and permission (#1726)

* app folder

* feat: app foldere

* fix: run app param error

* perf: select app ux

* perf: folder rerender

* fix: ts

* fix: parentId

* fix: permission

* perf: loading ux

* perf: per select ux

* perf: clb context

* perf: query extension tip

* fix: ts

* perf: app detail per

* perf: default per

packages/web/components/common/MyMenu/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import {
   Menu,
   MenuList,
@@ -10,21 +10,24 @@ import {
 } from '@chakra-ui/react';
 import MyIcon from '../Icon';
 import MyDivider from '../MyDivider';
+import type { IconNameType } from '../Icon/type';
 
-type MenuItemType = 'primary' | 'danger';
+export type MenuItemType = 'primary' | 'danger';
 
 export type Props = {
   width?: number | string;
   offset?: [number, number];
   Button: React.ReactNode;
   trigger?: 'hover' | 'click';
+  iconSize?: string;
   menuList: {
     label?: string;
     children: {
       isActive?: boolean;
       type?: MenuItemType;
-      icon?: string;
+      icon?: IconNameType | string;
       label: string | React.ReactNode;
+      description?: string;
       onClick: () => any;
     }[];
   }[];
@@ -33,7 +36,8 @@ export type Props = {
 const MyMenu = ({
   width = 'auto',
   trigger = 'hover',
-  offset = [0, 5],
+  offset,
+  iconSize = '1rem',
   Button,
   menuList
 }: Props) => {
@@ -45,8 +49,8 @@ const MyMenu = ({
       }
     },
     danger: {
+      color: 'red.600',
       _hover: {
-        color: 'red.600',
         background: 'red.1'
       }
     }
@@ -70,8 +74,14 @@ const MyMenu = ({
     }
   });
 
+  const computeOffset = useMemo<[number, number]>(() => {
+    if (offset) return offset;
+    if (typeof width === 'number') return [-width / 2, 5];
+    return [0, 5];
+  }, [offset]);
+
   return (
-    <Menu offset={offset} isOpen={isOpen} autoSelect={false} direction={'ltr'} isLazy>
+    <Menu offset={computeOffset} isOpen={isOpen} autoSelect={false} direction={'ltr'} isLazy>
       <Box
         ref={ref}
         onMouseEnter={() => {
@@ -90,7 +100,8 @@ const MyMenu = ({
       >
         <Box
           position={'relative'}
-          onClickCapture={() => {
+          onClickCapture={(e) => {
+            e.stopPropagation();
             if (trigger === 'click') {
               setIsOpen(!isOpen);
             }
@@ -124,8 +135,7 @@ const MyMenu = ({
                   <MenuItem
                     key={index}
                     {...menuItemStyles}
-                    {...typeMapStyle[child.type || 'primary']}
-                    onClick={(e) => {
+                    onClickCapture={(e) => {
                       e.stopPropagation();
                       setIsOpen(false);
                       child.onClick && child.onClick();
@@ -133,9 +143,19 @@ const MyMenu = ({
                     color={child.isActive ? 'primary.700' : 'myGray.600'}
                     whiteSpace={'pre-wrap'}
                     _notLast={{ mb: 0.5 }}
+                    {...typeMapStyle[child.type || 'primary']}
                   >
-                    {!!child.icon && <MyIcon name={child.icon as any} w={'16px'} mr={2} />}
-                    <Box>{child.label}</Box>
+                    {!!child.icon && <MyIcon name={child.icon as any} w={iconSize} mr={3} />}
+                    <Box>
+                      <Box color={child.description ? 'myGray.900' : 'inherit'} fontSize={'sm'}>
+                        {child.label}
+                      </Box>
+                      {child.description && (
+                        <Box color={'myGray.500'} fontSize={'mini'}>
+                          {child.description}
+                        </Box>
+                      )}
+                    </Box>
                   </MenuItem>
                 ))}
               </Box>