feat(landing): dashboard layout redesign (#208)

* chore: wip * chore: wip * chore: wip * chore: some text adjust * chore: add blink highlight effect * chore: text
groupher · Jan 9, 2024 · 2dfe6aa · 2dfe6aa
1 parent 5ac5990
commit 2dfe6aa
Show file tree

Hide file tree

Showing 43 changed files with 641 additions and 76 deletions.
diff --git a/src/app/Landing/ArticlesIntroTabs/Tabs.tsx b/src/app/Landing/ArticlesIntroTabs/Tabs.tsx
@@ -12,13 +12,13 @@ const TAB_ITEMS = [
   {
     key: THREAD.POST,
     title: '讨论区',
-    desc: '功能建议 / Bug / 疑问 / 交流',
+    desc: '功能请求 / Bug / 问题 / 交流',
     color: COLOR_NAME.PURPLE,
   },
   {
     key: THREAD.KANBAN,
     title: '看板',
-    desc: '规划中 / 正在进行 / 已完成',
+    desc: '已规划 / 进行中 / 已完成',
     color: COLOR_NAME.BLUE,
   },
   {
@@ -30,7 +30,7 @@ const TAB_ITEMS = [
   {
     key: THREAD.DOC,
     title: '帮助台',
-    desc: '帮助文档 / 产品手册',
+    desc: '文档中心 / 产品手册',
     color: COLOR_NAME.CYAN,
   },
 ]

diff --git a/src/app/Landing/DashboardIntros/SeoTab/Content.tsx b/src/app/Landing/DashboardIntros/SeoTab/Content.tsx
@@ -18,7 +18,7 @@ const Content: FC = () => {
         <Title>ogUrl</Title>
         <Desc>https://motuojie.com</Desc>
         <Title>ogTitle</Title>
-        <Desc>Motuojie - (摩面)</Desc>
+        <Desc>Motuojie - (摩界)</Desc>
         <Title>ogDescription</Title>
         <Desc>发现复古摩托车的魅力...</Desc>
         <Brick $width={100} top={150} left={10} $opacity={0.12} />
@@ -31,7 +31,7 @@ const Content: FC = () => {
         <Title>twUrl</Title>
         <Desc>https://motuojie.com</Desc>
         <Title>twTitle</Title>
-        <Desc>Motuojie - (摩面)</Desc>
+        <Desc>Motuojie - (摩界)</Desc>
         <Title>twDescription</Title>
         <Desc>发现复古摩托车的魅力...</Desc>
         <Brick $width={100} top={150} left={68} $opacity={0.12} />

diff --git a/src/app/Landing/DashboardIntros/SeoTab/WebCard.tsx b/src/app/Landing/DashboardIntros/SeoTab/WebCard.tsx
@@ -34,7 +34,7 @@ const WebCard: FC = () => {
         </LogoWrapper>
         <XHSLogo src="/landing/seo/xhs.png" $size={21} />
         <SpaceGrow />
-        <Hint>OpenGraph 协议</Hint>
+        <Hint>by OpenGraph</Hint>
       </Footer>
     </Wrapper>
   )

diff --git a/src/app/Landing/DashboardIntros/SideMenus.tsx b/src/app/Landing/DashboardIntros/SideMenus.tsx
@@ -1,44 +1,36 @@
 import { FC } from 'react'
 
-import type { TDashboardPath } from '@/spec'
 import ArrowLinker from '@/widgets/ArrowLinker'
 
+import type { TIntroTab } from './spec'
 import { TABS_ITEMS } from './constant'
 
 import {
   Wrapper,
   InnerWrapper,
-  Header,
-  Title,
-  Desc,
   Tabs,
   TabItem,
   ItemTitle,
   ItemDesc,
 } from '../styles/dashboard_intros/side_menu'
 
 type TProps = {
-  tab: TDashboardPath
-  onChange: (tab: TDashboardPath) => void
+  tab: TIntroTab
+  onChange: (tab: TIntroTab) => void
 }
 
 const SideMenus: FC<TProps> = ({ tab, onChange }) => {
   return (
     <Wrapper>
       <InnerWrapper>
-        <Header>
-          <Title>完善的后台管理</Title>
-          <Desc>强大的自定义设置，所见即所得，满足你的品牌个性化及内容管理需要。</Desc>
-        </Header>
-
         <Tabs>
           {TABS_ITEMS.map((item) => {
             const $active = tab === item.key
             return (
               <TabItem
                 key={item.key}
                 $active={$active}
-                onClick={() => onChange(item.key)}
+                onClick={() => onChange(item.key as TIntroTab)}
                 $color={item.color}
               >
                 <ItemTitle $active={$active}>{item.title}</ItemTitle>

diff --git a/src/app/Landing/DashboardIntros/constant.ts b/src/app/Landing/DashboardIntros/constant.ts
@@ -32,12 +32,24 @@ export const TABS_ITEMS = [
     desc: '指派社区管理员，设定相关人员权限。',
     color: COLOR_NAME.PINK,
   },
+  {
+    key: 'richeditor',
+    title: '富文本编辑',
+    desc: '社区主要统计指标，服务提供商等设定。',
+    color: COLOR_NAME.RED,
+  },
   {
     key: DASHBOARD_ROUTE.HEADER,
     title: '页头 / 页脚自定义',
     desc: '自定义社区页头以及页脚的自定链接（组）。',
     color: COLOR_NAME.ORANGE,
   },
+  {
+    key: DASHBOARD_ROUTE.INOUT,
+    title: '导入数据',
+    desc: '设置集成到目标网站的各种组件的相关属性。',
+    color: COLOR_NAME.GREEN,
+  },
   {
     key: DASHBOARD_ROUTE.WIDGETS,
     title: '绑定与集成',

diff --git a/src/app/Landing/DashboardIntros/index.tsx b/src/app/Landing/DashboardIntros/index.tsx
@@ -1,8 +1,8 @@
 import { FC, useState } from 'react'
 
-import type { TDashboardPath } from '@/spec'
 import { DASHBOARD_ROUTE } from '@/constant/route'
 
+import type { TIntroTab } from './spec'
 import SideMenus from './SideMenus'
 import LayoutTab from './LayoutTab'
 import SeoTab from './SeoTab'
@@ -13,24 +13,31 @@ import LinksTab from './LinksTab'
 import IntegrateTab from './IntegrateTab'
 import TrendTab from './TrendTab'
 
-import { Wrapper, Right } from '../styles/dashboard_intros'
+import { Wrapper, InnerWrapper, Slogan, Title, Desc, Right } from '../styles/dashboard_intros'
 
 const DashboardIntros: FC = () => {
-  const [tab, setTab] = useState<TDashboardPath>(DASHBOARD_ROUTE.LAYOUT)
+  const [tab, setTab] = useState<TIntroTab>(DASHBOARD_ROUTE.LAYOUT)
 
   return (
     <Wrapper>
-      <SideMenus tab={tab} onChange={(tab) => setTab(tab)} />
-      <Right>
-        {tab === DASHBOARD_ROUTE.LAYOUT && <LayoutTab />}
-        {tab === DASHBOARD_ROUTE.SEO && <SeoTab />}
-        {tab === DASHBOARD_ROUTE.POST && <CMSTab />}
-        {tab === DASHBOARD_ROUTE.TAGS && <TagsTab />}
-        {tab === DASHBOARD_ROUTE.ADMINS && <AdminsTab />}
-        {tab === DASHBOARD_ROUTE.HEADER && <LinksTab />}
-        {tab === DASHBOARD_ROUTE.WIDGETS && <IntegrateTab />}
-        {tab === DASHBOARD_ROUTE.TREND && <TrendTab />}
-      </Right>
+      <Slogan>
+        <Title>完善的后台管理</Title>
+        <Desc>强大的自定义设置，满足你的品牌个性化及内容管理需要</Desc>
+      </Slogan>
+
+      <InnerWrapper $tab={tab}>
+        <SideMenus tab={tab} onChange={(tab) => setTab(tab)} />
+        <Right>
+          {tab === DASHBOARD_ROUTE.LAYOUT && <LayoutTab />}
+          {tab === DASHBOARD_ROUTE.SEO && <SeoTab />}
+          {tab === DASHBOARD_ROUTE.POST && <CMSTab />}
+          {tab === DASHBOARD_ROUTE.TAGS && <TagsTab />}
+          {tab === DASHBOARD_ROUTE.ADMINS && <AdminsTab />}
+          {tab === DASHBOARD_ROUTE.HEADER && <LinksTab />}
+          {tab === DASHBOARD_ROUTE.WIDGETS && <IntegrateTab />}
+          {tab === DASHBOARD_ROUTE.TREND && <TrendTab />}
+        </Right>
+      </InnerWrapper>
     </Wrapper>
   )
 }

diff --git a/src/app/Landing/DashboardIntros/spec.d.ts b/src/app/Landing/DashboardIntros/spec.d.ts
@@ -0,0 +1,3 @@
+import type { TDashboardPath } from '@/spec'
+
+export type TIntroTab = TDashboardPath | 'richeditor'
diff --git a/src/app/Landing/FeatureWall/Design/index.tsx b/src/app/Landing/FeatureWall/Design/index.tsx
@@ -14,7 +14,7 @@ const Design: FC = () => {
       <Panel hovering={isCardHovered} />
       <Footer>
         <Title>默认好看</Title>
-        <Desc>走心设计团队，丰富自定义细节，为您的产品生态增香添彩。</Desc>
+        <Desc>走心设计团队，丰富自定义细节，为您的产品生态添砖加瓦。</Desc>
       </Footer>
     </Wrapper>
   )

diff --git a/src/app/Landing/FeatureWall/GridBlocks/Slogan.tsx b/src/app/Landing/FeatureWall/GridBlocks/Slogan.tsx
@@ -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
diff --git a/src/app/Landing/FeatureWall/GridBlocks/constant.tsx b/src/app/Landing/FeatureWall/GridBlocks/constant.tsx
@@ -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'],
+}
diff --git a/src/app/Landing/FeatureWall/GridBlocks/index.tsx b/src/app/Landing/FeatureWall/GridBlocks/index.tsx
@@ -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
diff --git a/src/app/Landing/FeatureWall/RichContent/index.tsx b/src/app/Landing/FeatureWall/RichContent/index.tsx
@@ -14,7 +14,7 @@ const RichContent: FC = () => {
       <Panel hovering={isCardHovered} />
       <Footer>
         <Title>富文本内容</Title>
-        <Desc>支持主流富文本内容，兼容 Markdown。</Desc>
+        <Desc>支持主流富文本内容及多媒体，兼容 Markdown。</Desc>
       </Footer>
     </Wrapper>
   )

diff --git a/src/app/Landing/FeatureWall/index.tsx b/src/app/Landing/FeatureWall/index.tsx
@@ -9,6 +9,8 @@ import Design from './Design'
 import Integration from './Integration'
 import Statistics from './Statistics'
 
+import GridBlocks from './GridBlocks'
+
 import {
   Wrapper,
   Slogan,
@@ -25,7 +27,7 @@ const FeatureWall: FC = () => {
     <Wrapper>
       <Slogan>
         <Title>自带电池、开箱即用</Title>
-        <Desc>无需繁琐配置，即刻拥有功能完善的反馈社区。</Desc>
+        <Desc>无需繁琐配置，即刻拥有功能完善的反馈社区</Desc>
       </Slogan>
       <CardsWrapper>
         <LeftCards>
@@ -43,6 +45,8 @@ const FeatureWall: FC = () => {
         <Statistics />
         <Design />
       </FooterCards>
+
+      <GridBlocks />
     </Wrapper>
   )
 }

diff --git a/src/app/Landing/styles/dashboard_intros/cms_tab/content_card.ts b/src/app/Landing/styles/dashboard_intros/cms_tab/content_card.ts
@@ -20,7 +20,7 @@ export const Wrapper = styled.div`
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
   z-index: 10;
   position: absolute;
-  bottom: 128px;
+  bottom: 120px;
   left: 110px;
 `
 export const Tip = styled(WithPosition)`