-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(landing): dashboard layout redesign (#208)
* chore: wip * chore: wip * chore: wip * chore: some text adjust * chore: add blink highlight effect * chore: text
- Loading branch information
Showing
43 changed files
with
641 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import type { TDashboardPath } from '@/spec' | ||
|
||
export type TIntroTab = TDashboardPath | 'richeditor' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { FC } from 'react' | ||
|
||
import { Main, Topping, PlugIcon, PoinstIcon } from '../../styles/feature_wall/grid_blocks/slogan' | ||
|
||
const Slogan: FC = () => { | ||
return ( | ||
<> | ||
<Topping> | ||
<PlugIcon /> | ||
Biz~ biz~ | ||
</Topping> | ||
<Main> | ||
除此之外,我们明白这些特性也至关重要,所以还内置了 <PoinstIcon /> | ||
</Main> | ||
</> | ||
) | ||
} | ||
|
||
export default Slogan |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import { | ||
UserIcon, | ||
EmojiIcon, | ||
LaptopIcon, | ||
CloudIcon, | ||
FingerPrintIcon, | ||
SearchIcon, | ||
} from '../../styles/feature_wall/grid_blocks' | ||
|
||
export const BLOCKS = [ | ||
{ | ||
key: 1, | ||
title: '用户管理', | ||
desc: '自带垃圾信息过滤机制,也对可自定义拉黑恶意账户,远离阴阳人、精神怪胎。', | ||
icon: <UserIcon />, | ||
}, | ||
{ | ||
key: 2, | ||
title: 'Emoji 反馈', | ||
desc: '自带垃圾信息过滤机制,也对可自定义拉黑恶意账户,远离阴阳人', | ||
icon: <EmojiIcon />, | ||
}, | ||
{ | ||
key: 3, | ||
title: '全文搜索', | ||
desc: '自带垃圾信息过滤机制,也对可自定义拉黑恶意账户,远离阴阳人', | ||
icon: <SearchIcon />, | ||
}, | ||
{ | ||
key: 4, | ||
title: '稳定可靠', | ||
desc: '自带垃圾信息过滤机制,也对可自定义拉黑恶意账户,远离阴阳人', | ||
icon: <CloudIcon />, | ||
}, | ||
{ | ||
key: 5, | ||
title: 'SSO 集成', | ||
desc: '自带垃圾信息过滤机制,也对可自定义拉黑恶意账户,远离阴阳人', | ||
icon: <FingerPrintIcon />, | ||
}, | ||
{ | ||
key: 6, | ||
title: '开发者友好', | ||
desc: '自带垃圾信息过滤机制,也对可自定义拉黑恶意账户,远离阴阳人', | ||
icon: <LaptopIcon />, | ||
}, | ||
] | ||
|
||
// key: inserval index | ||
// value: highlight dot index | ||
export const SHINE_DOTS = { | ||
0: ['1', '4', '5'], | ||
1: ['2', '3', '4'], | ||
2: ['3', '6'], | ||
3: ['1', '4'], | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { FC, useState } from 'react' | ||
import { keys, includes } from 'ramda' | ||
|
||
import useInterval from '@/hooks/useInterval' | ||
import { SexyDivider } from '@/widgets/Common' | ||
|
||
import { BLOCKS, SHINE_DOTS } from './constant' | ||
import Slogan from './Slogan' | ||
|
||
import { | ||
Wrapper, | ||
InnerWrapper, | ||
Block, | ||
Title, | ||
Desc, | ||
Line, | ||
Icon, | ||
} from '../../styles/feature_wall/grid_blocks' | ||
|
||
const GridBlocks: FC = () => { | ||
const [shineIdx, setShineIdx] = useState(0) | ||
|
||
useInterval(() => { | ||
const nextIdx = shineIdx >= keys(SHINE_DOTS).length - 1 ? 0 : shineIdx + 1 | ||
setShineIdx(nextIdx) | ||
}, 2000) | ||
|
||
return ( | ||
<Wrapper> | ||
<Slogan /> | ||
<InnerWrapper> | ||
<SexyDivider top={0} /> | ||
<Line left={332} top={0} /> | ||
<Line right={332} top={0} /> | ||
|
||
<Icon.Square left={325} top={-7} $active={includes('1', SHINE_DOTS[shineIdx])} /> | ||
<Icon.Circle right={325} top={-7} $active={includes('2', SHINE_DOTS[shineIdx])} /> | ||
<Icon.SqaureSrew left={325} top={164} $active={includes('3', SHINE_DOTS[shineIdx])} /> | ||
<Icon.Diamand right={325} top={164} $active={includes('4', SHINE_DOTS[shineIdx])} /> | ||
<Icon.Star right={325} bottom={-7} $active={includes('5', SHINE_DOTS[shineIdx])} /> | ||
<Icon.Triangle left={325} bottom={-7} $active={includes('6', SHINE_DOTS[shineIdx])} /> | ||
|
||
{BLOCKS.map((block) => ( | ||
<> | ||
{block.key === 4 && <SexyDivider />} | ||
<Block> | ||
{block.icon} | ||
<Title>{block.title}</Title> | ||
<Desc>{block.desc}</Desc> | ||
</Block> | ||
</> | ||
))} | ||
|
||
<SexyDivider bottom={0} /> | ||
</InnerWrapper> | ||
</Wrapper> | ||
) | ||
} | ||
|
||
export default GridBlocks |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.