refactor(landing): dashboard & enjoy section expore

package.json

@@ -84,7 +84,7 @@
     "react-masonry-css": "^1.0.14",
     "react-pin-field": "3.0.16",
     "react-portal": "^4.2.2",
-    "react-scroll-parallax": "^3.4.3",
+    "react-scroll-parallax": "^3.4.5",
     "react-select": "^5.5.7",
     "react-svg": "15.1.10",
     "react-swipeable": "^7.0.0",

src/app/Landing/DashboardIntros/LayoutTab/ContentCard.tsx

@@ -1,13 +1,13 @@
 import { FC } from 'react'
 
-import WallpaperBar from './WallpaperBar'
-
 import { Wrapper } from '../../styles/dashboard_intros/layout_tab/content_card'
 
 const ContentCard: FC = () => {
   return (
     <Wrapper>
-      <WallpaperBar />
+      <div>帖子布局</div>
+      <div>整体布局</div>
+      <div>看板布局</div>
     </Wrapper>
   )
 }

src/app/Landing/DashboardIntros/LayoutTab/WallpaperCard.tsx

@@ -2,8 +2,13 @@ import { FC } from 'react'
 
 import { parseWallpaper } from '@/wallpaper'
 import useWallpaper from '@/hooks/useWallpaper'
+import WallpaperBar from './WallpaperBar'
 
-import { Wrapper, Background } from '../../styles/dashboard_intros/layout_tab/wallpaper_card'
+import {
+  Wrapper,
+  Background,
+  EditToolbox,
+} from '../../styles/dashboard_intros/layout_tab/wallpaper_card'
 
 const WallpaperCard: FC = () => {
   const { wallpapers, wallpaper } = useWallpaper()
@@ -12,6 +17,9 @@ const WallpaperCard: FC = () => {
   return (
     <Wrapper>
       <Background style={{ background }} effect={effect} />
+      <EditToolbox>
+        <WallpaperBar />
+      </EditToolbox>
     </Wrapper>
   )
 }

src/app/Landing/DashboardIntros/SideMenus.tsx

@@ -9,10 +9,11 @@ import {
   InnerWrapper,
   Header,
   Title,
-  Highlight,
   Desc,
   Tabs,
   TabItem,
+  ItemTitle,
+  ItemDesc,
 } from '../styles/dashboard_intros/side_menu'
 
 type TProps = {
@@ -25,18 +26,20 @@ const SideMenus: FC<TProps> = ({ tab, onChange }) => {
     <Wrapper>
       <InnerWrapper>
         <Header>
-          <Title>
-            完善的<Highlight>后台管理</Highlight>
-          </Title>
+          <Title>完善的后台管理</Title>
           <Desc>强大的自定义设置，所见即所得，满足你的品牌个性化及内容管理需要。</Desc>
         </Header>
 
         <Tabs>
-          {TABS_ITEMS.map((item) => (
-            <TabItem key={item.key} $active={tab === item.key} onClick={() => onChange(item.key)}>
-              {item.title}
-            </TabItem>
-          ))}
+          {TABS_ITEMS.map((item) => {
+            const $active = tab === item.key
+            return (
+              <TabItem key={item.key} $active={$active} onClick={() => onChange(item.key)}>
+                <ItemTitle $active={$active}>{item.title}</ItemTitle>
+                {$active && <ItemDesc>{item.desc}</ItemDesc>}
+              </TabItem>
+            )
+          })}
         </Tabs>
       </InnerWrapper>
     </Wrapper>

src/app/Landing/DashboardIntros/constant.ts

@@ -1,13 +1,10 @@
 import { DASHBOARD_ROUTE } from '@/constant/route'
 
 export const TABS_ITEMS = [
-  {
-    key: DASHBOARD_ROUTE.INFO,
-    title: '基本信息',
-  },
   {
     key: DASHBOARD_ROUTE.LAYOUT,
     title: '布局与样式',
+    desc: '这里是布局与样式的说明，看看效果',
   },
   {
     key: DASHBOARD_ROUTE.SEO,

src/app/Landing/DashboardIntros/index.tsx

@@ -11,7 +11,7 @@ import LayoutTab from './LayoutTab'
 import { Wrapper, Right } from '../styles/dashboard_intros'
 
 const DashboardIntros: FC = () => {
-  const [tab, setTab] = useState<TDashboardPath>(DASHBOARD_ROUTE.INFO)
+  const [tab, setTab] = useState<TDashboardPath>(DASHBOARD_ROUTE.LAYOUT)
 
   return (
     <Wrapper>

src/app/Landing/EnjoyDev/Block.tsx → src/app/Landing/EnjoyDev/HighWay/Block.tsx

@@ -1,7 +1,14 @@
 /* eslint-disable jsx-a11y/accessible-emoji */
 import { FC } from 'react'
 
-import { Wrapper, Building, SadIcon, InternetIcon, Text, Dot } from '../styles/enjoy_dev/block'
+import {
+  Wrapper,
+  Building,
+  SadIcon,
+  InternetIcon,
+  Text,
+  Dot,
+} from '../../styles/enjoy_dev/high_way/block'
 
 type TProps = {
   text: string
@@ -11,15 +18,15 @@ type TProps = {
 
 const Block: FC<TProps> = ({ text, noDot = false, type = '' }) => {
   return (
-    <Wrapper grey={type === 'giveup'}>
+    <Wrapper $giveup={type === 'giveup'}>
       {type === 'online' && <InternetIcon />}
       {type === 'giveup' && <SadIcon />}
       {type === '' && (
         <Building role="img" aria-label="wip">
           🚧
         </Building>
       )}
-      <Text>{text}</Text>
+      <Text $giveup={type === 'giveup'}>{text}</Text>
       {!noDot && <Dot />}
     </Wrapper>
   )

src/app/Landing/EnjoyDev/HighWay/index.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react'
+
+import Block from './Block'
+
+import { Wrapper, DashLine, SeedIcon, ConnectLine } from '../../styles/enjoy_dev/high_way'
+
+const HighWay: FC = () => {
+  return (
+    <Wrapper>
+      <SeedIcon left="100px" top="60px" />
+      <DashLine />
+      <Block text="开发" noDot />
+      <ConnectLine />
+      <Block text="开发" />
+      <ConnectLine />
+      <Block text="开发" />
+      <ConnectLine />
+      <Block text="开发" />
+      <ConnectLine />
+      <Block text="上线没人用" type="online" />
+      <ConnectLine />
+      <Block text="放弃" type="giveup" />
+    </Wrapper>
+  )
+}
+
+export default HighWay