perf: ux

projects/app/src/components/support/permission/MemberManager/PermissionSelect.tsx

@@ -105,7 +105,6 @@ function PermissionSelect({
     const per = new Permission({ per: perValue });
     per.addPer(...selectedMultipleValues);
     onChange(per.value);
-    setIsOpen(false);
   };
 
   useOutsideClick({
@@ -187,15 +186,14 @@ function PermissionSelect({
             );
           })}
 
+          {permissionSelectList.multipleCheckBoxList.length > 0 && (
+            <>
               <MyDivider my={2} />
-
-          {/* {permissionSelectList.multipleCheckBoxList.length > 0 && (
-            <Box m="4">其他权限（多选）</Box>
-          )} */}
-
               {permissionSelectList.multipleCheckBoxList.map((item) => {
                 const isChecked = selectedMultipleValues.includes(item.value);
-            const isDisabled = new Permission({ per: selectedSingleValue }).checkPer(item.value);
+                const isDisabled = new Permission({ per: selectedSingleValue }).checkPer(
+                  item.value
+                );
                 const change = () => {
                   if (isDisabled) return;
                   const per = new Permission({ per: value });
@@ -211,23 +209,18 @@ function PermissionSelect({
                     key={item.value}
                     {...(isChecked
                       ? {
-                      color: 'primary.500',
+                          color: 'primary.600'
-                      bg: 'myWhite.300'
                         }
                       : {})}
-                whiteSpace="pre-wrap"
+                    {...MenuStyle}
-                flexDirection="row"
+                    maxW={['70vw', '260px']}
-                justifyContent="start"
-                p="2"
-                _hover={{
-                  bg: 'myGray.50'
-                }}
                     {...(isDisabled
                       ? {
-                      cursor: 'not-allowed',
+                          cursor: 'not-allowed'
-                      opacity: 0.5
                         }
-                  : {})}
+                      : {
+                          cursor: 'pointer'
+                        })}
                   >
                     <Checkbox
                       size="lg"
@@ -235,13 +228,18 @@ function PermissionSelect({
                       onChange={change}
                       isDisabled={isDisabled}
                     />
-                <Flex px="4" flexDirection="column" onClick={change}>
+                    <Box ml={4} onClick={change}>
-                  <Box fontWeight="500">{t(item.name as any)}</Box>
+                      <Box>{t(item.name as any)}</Box>
-                  <Box fontWeight="400">{t(item.description as any)}</Box>
+                      <Box color={'myGray.500'} fontSize={'mini'}>
-                </Flex>
+                        {t(item.description as any)}
+                      </Box>
+                    </Box>
                   </Flex>
                 );
               })}
+            </>
+          )}
+
           {onDelete && (
             <>
               <MyDivider my={2} h={'2px'} borderColor={'myGray.200'} />

projects/app/src/pageComponents/app/detail/RouteTab.tsx

@@ -1,5 +1,5 @@
 import { Box, HStack } from '@chakra-ui/react';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { AppContext, TabEnum } from './context';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
@@ -25,11 +25,17 @@ const RouteTab = () => {
 
   const tabList = useMemo(
     () => [
+      ...(appDetail.permission.hasWritePer
+        ? [
             {
               label:
-          appDetail.type === AppTypeEnum.plugin ? t('app:setting_plugin') : t('app:setting_app'),
+                appDetail.type === AppTypeEnum.plugin
+                  ? t('app:setting_plugin')
+                  : t('app:setting_app'),
               id: TabEnum.appEdit
-      },
+            }
+          ]
+        : []),
       ...(appDetail.permission.hasManagePer
         ? [
             {
@@ -40,9 +46,22 @@ const RouteTab = () => {
         : []),
       ...(appDetail.permission.hasLogPer ? [{ label: t('app:chat_logs'), id: TabEnum.logs }] : [])
     ],
-    [appDetail.permission.hasManagePer, appDetail.type]
+    [
+      appDetail.permission.hasLogPer,
+      appDetail.permission.hasManagePer,
+      appDetail.permission.hasWritePer,
+      appDetail.type,
+      t
+    ]
   );
 
+  useEffect(() => {
+    // 没找到合适的 id，则自动跳转
+    if (!tabList.find((item) => item.id === currentTab)) {
+      setCurrentTab(tabList[0].id);
+    }
+  }, [tabList, currentTab, setCurrentTab]);
+
   return (
     <HStack spacing={4} whiteSpace={'nowrap'}>
       {tabList.map((tab) => (