Skip to content

Commit

Permalink
fix layout bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhiyu
zhiyu committed Dec 21, 2024
1 parent c04ea1d commit dc43961
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 67 deletions.
7 changes: 3 additions & 4 deletions packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,15 +52,14 @@ const NavGroup = ({ item }) => {
display='block'
gutterBottom
>
<Typography sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Typography className='flex items-center justify-between'>
{item.title}
{open ? (
<IconChevronUp stroke={1.5} size='1rem' style={{ marginTop: 'auto', marginBottom: 'auto' }} />
<IconChevronUp stroke={1.5} size='1rem' className='relative left-1' />
) : (
<IconChevronDown stroke={1.5} size='1rem' style={{ marginTop: 'auto', marginBottom: 'auto' }} />
<IconChevronDown stroke={1.5} size='1rem' className='relative left-1' />
)}
</Typography>

{item.caption && (
<Typography variant='caption' sx={{ ...theme.typography.subMenuCaption }} display='block' gutterBottom>
{item.caption}
Expand Down
52 changes: 10 additions & 42 deletions packages/ui/src/ui-component/cards/DocumentStoreCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,8 @@ const CardWrapper = styled(MainCard)(({ theme }) => ({
color: theme.darkTextPrimary,
overflow: 'auto',
position: 'relative',
boxShadow: '0px 0px 0px rgba(33, 33, 52, 0.1)',
border: 'none !important',
borderRadius: '4px !important',
cursor: 'pointer',
height: '100%',
minHeight: '160px',
maxHeight: '300px',
width: '100%',
Expand All @@ -35,12 +32,11 @@ const DocumentStoreCard = ({ data, images, onClick }) => {

return (
<CardWrapper
className='shadow-card transition ease-in-out hover:-translate-y-1 hover:shadow-lg duration-300'
className='rounded shadow-card transition ease-in-out hover:-translate-y-1 hover:shadow-lg duration-300'
content={false}
onClick={onClick}
sx={{ border: 1, borderColor: theme.palette.grey[900] + 25, borderRadius: 2 }}
>
<Box sx={{ height: '100%', p: 2.25 }} onClick={onClick}>
<Box sx={{ height: '100%', p: 2 }} onClick={onClick}>
<Grid container justifyContent='space-between' direction='column' sx={{ height: '100%' }} gap={2}>
<Box display='flex' flexDirection='column' sx={{ flex: 1, width: '100%' }}>
<div
Expand Down Expand Up @@ -116,50 +112,22 @@ const DocumentStoreCard = ({ data, images, onClick }) => {
)}
</Box>
)}
<Grid container columnGap={1} rowGap={1}>
<div
style={{
padding: '5px 10px',
width: 'max-content',
borderRadius: '2px',
background: theme.palette.background.default
}}
className='flex items-center '
>
<Box className='flex items-center'>
<div className='flex items-center'>
<IconVectorBezier2 style={{ marginRight: 5 }} size={14} />
<span>
{data.whereUsed?.length ?? 0} {data.whereUsed?.length <= 1 ? 'flow' : 'flows'}
{data.whereUsed?.length ?? 0} {data.whereUsed?.length <= 1 ? '流程' : '流程'}
</span>
</div>
<div
style={{
padding: '3px 10px',
width: 'max-content',
borderRadius: '2px',
background: theme.palette.background.default,
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
}}
>
<div className='flex items-center ml-4'>
<IconLanguage style={{ marginRight: 5 }} size={14} />
{kFormatter(data.totalChars ?? 0)} chars
{kFormatter(data.totalChars ?? 0)} 字符
</div>
<div
style={{
padding: '3px 10px',
width: 'max-content',
borderRadius: '2px',
background: theme.palette.background.default,
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
}}
>
<div className='flex items-center ml-4'>
<IconScissors style={{ marginRight: 5 }} size={14} />
{kFormatter(data.totalChunks ?? 0)} chunks
{kFormatter(data.totalChunks ?? 0)} 分块
</div>
</Grid>
</Box>
</Grid>
</Box>
</CardWrapper>
Expand Down
31 changes: 10 additions & 21 deletions packages/ui/src/ui-component/cards/ItemCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,9 @@ const CardWrapper = styled(MainCard)(({ theme }) => ({
color: theme.darkTextPrimary,
overflow: 'auto',
position: 'relative',
boxShadow: '0px 0px 0px rgba(33, 33, 52, 0.1)',
border: 'none !important',
borderRadius: '4px !important',
cursor: 'pointer',
height: '100%',
minHeight: '160px',
minHeight: '120px',
maxHeight: '300px',
width: '100%',
overflowWrap: 'break-word',
Expand All @@ -32,13 +29,12 @@ const ItemCard = ({ data, images, onClick }) => {
return (
<CardWrapper
content={false}
className='shadow-card transition ease-in-out hover:-translate-y-1 hover:shadow-lg duration-300'
className='rounded shadow-card transition ease-in-out hover:-translate-y-1 hover:shadow-lg duration-300'
onClick={onClick}
sx={{ border: 1, borderColor: theme.palette.grey[900] + 25, borderRadius: 2 }}
>
<Box sx={{ height: '100%', p: 2.25 }}>
<Grid container justifyContent='space-between' direction='column' sx={{ height: '100%', gap: 3 }}>
<Box display='flex' flexDirection='column' sx={{ width: '100%' }}>
<Box className='p-4' sx={{ height: '100%' }}>
<Box sx={{ height: '100%' }} className='flex flex-col justify-between'>
<Box>
<div
style={{
width: '100%',
Expand Down Expand Up @@ -93,30 +89,23 @@ const ItemCard = ({ data, images, onClick }) => {
</Typography>
</div>
{data.description && (
<span
<div
style={{
display: '-webkit-box',
marginTop: 10,
overflowWrap: 'break-word',
WebkitLineClamp: 3,
WebkitBoxOrient: 'vertical',
textOverflow: 'ellipsis',
overflow: 'hidden'
}}
className='mt-4'
>
{data.description}
</span>
</div>
)}
</Box>
{images && (
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'start',
gap: 1
}}
>
<Box className='flex items-center jusitify-start gap-2 mt-8'>
{images.slice(0, images.length > 3 ? 3 : images.length).map((img) => (
<Box
key={img}
Expand All @@ -139,7 +128,7 @@ const ItemCard = ({ data, images, onClick }) => {
)}
</Box>
)}
</Grid>
</Box>
</Box>
</CardWrapper>
)
Expand Down

0 comments on commit dc43961

Please sign in to comment.