style: dataset detail page style refactor (#2501)
* style: dataset detail page style refactor * remove px * remove py px px * change shadow * style: 2期联调结束 * 优化部分代码
This commit is contained in:
papapatrick
@@ -39,6 +39,7 @@ const FileSourceSelector = dynamic(() => import('../Import/components/FileSource
|
||||
const Header = ({}: {}) => {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
|
||||
const { setLoading, feConfigs } = useSystemStore();
|
||||
const datasetDetail = useContextSelector(DatasetPageContext, (v) => v.datasetDetail);
|
||||
|
||||
@@ -110,35 +111,43 @@ const Header = ({}: {}) => {
|
||||
successToast: t('common:common.Create Success'),
|
||||
errorToast: t('common:common.Create Failed')
|
||||
});
|
||||
const isWebSite = datasetDetail?.type === DatasetTypeEnum.websiteDataset;
|
||||
|
||||
return (
|
||||
<Flex px={[2, 6]} alignItems={'flex-start'} h={'35px'}>
|
||||
<Box flex={1}>
|
||||
<Box flex={1} fontWeight={'500'} color={'myGray.900'} h={'100%'}>
|
||||
<ParentPath
|
||||
paths={paths.map((path, i) => ({
|
||||
parentId: path.parentId,
|
||||
parentName: i === paths.length - 1 ? `${path.parentName}` : path.parentName
|
||||
}))}
|
||||
FirstPathDom={
|
||||
<>
|
||||
<Box fontWeight={'bold'} fontSize={['sm', 'md']}>
|
||||
<Flex
|
||||
flexDir={'column'}
|
||||
justify={'center'}
|
||||
h={'100%'}
|
||||
fontSize={isWebSite ? 'sm' : 'md'}
|
||||
fontWeight={'500'}
|
||||
color={'myGray.600'}
|
||||
>
|
||||
<Flex align={'center'}>
|
||||
{!isWebSite && <MyIcon name="common/list" mr={2} w={'20px'} color={'black'} />}
|
||||
{t(DatasetTypeMap[datasetDetail?.type]?.collectionLabel as any)}({total})
|
||||
</Box>
|
||||
</Flex>
|
||||
{datasetDetail?.websiteConfig?.url && (
|
||||
<Flex fontSize={'sm'}>
|
||||
<Flex fontSize={'mini'}>
|
||||
{t('common:core.dataset.website.Base Url')}:
|
||||
<Link
|
||||
href={datasetDetail.websiteConfig.url}
|
||||
target="_blank"
|
||||
mr={2}
|
||||
textDecoration={'underline'}
|
||||
color={'primary.600'}
|
||||
color={'blue.700'}
|
||||
>
|
||||
{datasetDetail.websiteConfig.url}
|
||||
</Link>
|
||||
</Flex>
|
||||
)}
|
||||
</>
|
||||
</Flex>
|
||||
}
|
||||
onClick={(e) => {
|
||||
router.replace({
|
||||
@@ -202,18 +211,26 @@ const Header = ({}: {}) => {
|
||||
fontSize={['sm', 'md']}
|
||||
>
|
||||
<Flex
|
||||
alignItems={'center'}
|
||||
px={5}
|
||||
px={3.5}
|
||||
py={2}
|
||||
borderRadius={'md'}
|
||||
borderRadius={'sm'}
|
||||
cursor={'pointer'}
|
||||
bg={'primary.500'}
|
||||
overflow={'hidden'}
|
||||
color={'white'}
|
||||
h={['28px', '35px']}
|
||||
>
|
||||
<MyIcon name={'common/importLight'} mr={2} w={'14px'} />
|
||||
<Box>{t('common:dataset.collections.Create And Import')}</Box>
|
||||
<Flex h={'20px'} alignItems={'center'}>
|
||||
<MyIcon
|
||||
name={'common/folderImport'}
|
||||
mr={2}
|
||||
w={'18px'}
|
||||
h={'18px'}
|
||||
color={'white'}
|
||||
/>
|
||||
</Flex>
|
||||
<Box h={'20px'} fontSize={'sm'} fontWeight={'500'}>
|
||||
{t('common:dataset.collections.Create And Import')}
|
||||
</Box>
|
||||
</Flex>
|
||||
</MenuButton>
|
||||
}
|
||||
@@ -323,18 +340,26 @@ const Header = ({}: {}) => {
|
||||
fontSize={['sm', 'md']}
|
||||
>
|
||||
<Flex
|
||||
alignItems={'center'}
|
||||
px={5}
|
||||
px={3.5}
|
||||
py={2}
|
||||
borderRadius={'md'}
|
||||
borderRadius={'sm'}
|
||||
cursor={'pointer'}
|
||||
bg={'primary.500'}
|
||||
overflow={'hidden'}
|
||||
color={'white'}
|
||||
h={['28px', '35px']}
|
||||
>
|
||||
<MyIcon name={'common/importLight'} mr={2} w={'14px'} />
|
||||
<Box>{t('common:dataset.collections.Create And Import')}</Box>
|
||||
<Flex h={'20px'} alignItems={'center'}>
|
||||
<MyIcon
|
||||
name={'common/folderImport'}
|
||||
mr={2}
|
||||
w={'18px'}
|
||||
h={'18px'}
|
||||
color={'white'}
|
||||
/>
|
||||
</Flex>
|
||||
<Box h={'20px'} fontSize={'sm'} fontWeight={'500'}>
|
||||
{t('common:dataset.collections.Create And Import')}
|
||||
</Box>
|
||||
</Flex>
|
||||
</MenuButton>
|
||||
}
|
||||
|
||||
@@ -121,7 +121,7 @@ const HeaderTagPopOver = () => {
|
||||
<Input
|
||||
pl={2}
|
||||
h={8}
|
||||
borderRadius={'4px'}
|
||||
borderRadius={'xs'}
|
||||
value={searchTag}
|
||||
placeholder={t('dataset:tag.searchOrAddTag')}
|
||||
onChange={(e) => setSearchTag(e.target.value)}
|
||||
|
||||
@@ -246,7 +246,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
|
||||
flex={'1'}
|
||||
_hover={{ bg: 'myGray.100' }}
|
||||
alignItems={'center'}
|
||||
borderRadius={'4px'}
|
||||
borderRadius={'xs'}
|
||||
>
|
||||
<Flex
|
||||
flex={'1 0 0'}
|
||||
@@ -263,7 +263,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
|
||||
bg={'#DBF3FF'}
|
||||
color={'#0884DD'}
|
||||
fontSize={'xs'}
|
||||
borderRadius={'6px'}
|
||||
borderRadius={'sm'}
|
||||
>
|
||||
{item.tag}
|
||||
</Box>
|
||||
@@ -299,7 +299,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
|
||||
_hover={{ bg: '#1118240D' }}
|
||||
mr={2}
|
||||
p={1}
|
||||
borderRadius={'6px'}
|
||||
borderRadius={'sm'}
|
||||
onClick={() => {
|
||||
setCurrentAddTag({ ...item, collections });
|
||||
}}
|
||||
@@ -313,7 +313,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
|
||||
_hover={{ bg: '#1118240D' }}
|
||||
mr={2}
|
||||
p={1}
|
||||
borderRadius={'6px'}
|
||||
borderRadius={'sm'}
|
||||
cursor={'pointer'}
|
||||
onClick={(e) => {
|
||||
setCurrentEditTag(item);
|
||||
@@ -332,7 +332,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
|
||||
display="none"
|
||||
_hover={{ bg: '#1118240D' }}
|
||||
p={1}
|
||||
borderRadius={'6px'}
|
||||
borderRadius={'sm'}
|
||||
cursor={'pointer'}
|
||||
>
|
||||
<MyIcon name="delete" w={4} />
|
||||
@@ -441,7 +441,7 @@ const AddTagToCollections = ({
|
||||
bg={'#DBF3FF'}
|
||||
color={'#0884DD'}
|
||||
fontSize={'sm'}
|
||||
borderRadius={'6px'}
|
||||
borderRadius={'sm'}
|
||||
>
|
||||
{currentAddTag.tag}
|
||||
</Box>
|
||||
@@ -496,7 +496,7 @@ const AddTagToCollections = ({
|
||||
: {})
|
||||
}}
|
||||
alignItems={'center'}
|
||||
borderRadius={'4px'}
|
||||
borderRadius={'xs'}
|
||||
key={collection.id}
|
||||
cursor={'pointer'}
|
||||
onClick={() => {
|
||||
@@ -525,7 +525,7 @@ const AddTagToCollections = ({
|
||||
isChecked={selectedCollections.includes(collection.id)}
|
||||
/>
|
||||
<MyIcon name={collection.icon as any} w={'20px'} mr={2} />
|
||||
<Box fontSize={'14px'} borderRadius={'6px'} color={'myGray.900'}>
|
||||
<Box fontSize={'sm'} borderRadius={'sm'} color={'myGray.900'}>
|
||||
{collection.name}
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
@@ -161,7 +161,7 @@ const TagsPopOver = ({
|
||||
fontWeight={'500'}
|
||||
bg={'#F0FBFF'}
|
||||
color={'#0884DD'}
|
||||
borderRadius={'4px'}
|
||||
borderRadius={'xs'}
|
||||
>
|
||||
{item.tag}
|
||||
</Box>
|
||||
@@ -197,7 +197,7 @@ const TagsPopOver = ({
|
||||
onBlur={() => setIsFocusInput(false)}
|
||||
pl={2}
|
||||
h={7}
|
||||
borderRadius={'4px'}
|
||||
borderRadius={'xs'}
|
||||
value={searchTag}
|
||||
placeholder={t('dataset:tag.searchOrAddTag')}
|
||||
onChange={(e) => setSearchTag(e.target.value)}
|
||||
@@ -217,7 +217,7 @@ const TagsPopOver = ({
|
||||
// setCheckedTags([...checkedTags, item]);
|
||||
}}
|
||||
>
|
||||
<MyIcon name={'common/addLight'} w={'14px'} />
|
||||
<MyIcon name={'common/addLight'} w={'sm'} />
|
||||
<Box ml={1} py={1}>
|
||||
{t('dataset:tag.add') + ` "${searchTag}"`}
|
||||
</Box>
|
||||
@@ -277,7 +277,7 @@ const TagsPopOver = ({
|
||||
fontSize={'11px'}
|
||||
bg={'#F0FBFF'}
|
||||
color={'#0884DD'}
|
||||
borderRadius={'4px'}
|
||||
borderRadius={'xs'}
|
||||
>
|
||||
{tag.tag}
|
||||
</Box>
|
||||
|
||||
@@ -186,12 +186,12 @@ const CollectionCard = () => {
|
||||
|
||||
return (
|
||||
<MyBox isLoading={isLoading} h={'100%'} py={[2, 4]}>
|
||||
<Flex ref={BoxRef} flexDirection={'column'} py={[1, 3]} h={'100%'}>
|
||||
<Flex ref={BoxRef} flexDirection={'column'} py={[1, 0]} h={'100%'}>
|
||||
{/* header */}
|
||||
<Header />
|
||||
|
||||
{/* collection table */}
|
||||
<TableContainer px={[2, 6]} mt={[0, 3]} flex={'1 0 0'} overflowY={'auto'} fontSize={'sm'}>
|
||||
<TableContainer px={[2, 6]} mt={[0, 3]} overflowY={'auto'} fontSize={'sm'}>
|
||||
<Table variant={'simple'} draggable={false}>
|
||||
<Thead draggable={false}>
|
||||
<Tr>
|
||||
|
||||
Reference in New Issue
Block a user