gitea/FastGPT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: ux

Browse Source
This commit is contained in:
archer 2025-05-30 17:27:21 +08:00
parent d7b9f94270
commit 165b783a95
No known key found for this signature in database
GPG Key ID: 4446499B846D4A9E
2 changed files with 79 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
projects/app/src/components/support/permission/MemberManager/PermissionSelect.tsx
View File

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

33
projects/app/src/pageComponents/app/detail/RouteTab.tsx
View File

@ -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(
() => [
{
label:
appDetail.type === AppTypeEnum.plugin ? t('app:setting_plugin') : t('app:setting_app'),
id: TabEnum.appEdit
},
...(appDetail.permission.hasWritePer
? [
{
label:
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) => (