refactor(dashboard): admins tab to tailwind

src/app/Landing/DashboardIntros/LinksTab/Content.tsx

@@ -1,88 +1,60 @@
-import type { FC } from 'react'
+import EditSVG from '~/icons/EditPen'
+import WechatSVG from '~/icons/social/WeChat'
+import TwitterSVG from '~/icons/TwitterX'
 
-import { Brick, Br } from '~/widgets/Common'
-import {
-  Wrapper,
-  OgPanel,
-  TwPanel,
-  EditBox,
-  EditIcon,
-  Title,
-  Logo,
-  Desc,
-  LinkDesc,
-  IconBox,
-  Icon,
-} from '../../styles/dashboard_intros/links_tab/content'
+import useSalon, { cn } from '../../styles/dashboard_intros/links_tab/content'
 
-const Content: FC = () => {
-  return (
-    <Wrapper>
-      <OgPanel>
-        <Title>社区图标</Title>
-        <Logo />
-        <Title>社区名称</Title>
-        <Desc>Tiki-taka</Desc>
-        <Title>社区简介</Title>
-        <Desc>Visca Barca Visca Catalunya!</Desc>
-        <Title>社交媒体</Title>
-
-        <IconBox top={202} left={6}>
-          <Icon.Wechat />
-        </IconBox>
-        <Brick $width={76} top={210} left={40} $opacity={0.08} />
-
-        <IconBox top={225} left={6}>
-          <Icon.Twitter />
-        </IconBox>
-        <Brick $width={50} top={234} left={40} $opacity={0.08} />
-
-        {/*
-
-        <IconBox top={178} left={6}>
-          <ICON.Zhihu />
-        </IconBox>
-        <Brick $width={50} top={186} left={40} $opacity={0.08} /> */}
-
-        {/* <Brick $width={15} top={215} left={12} $opacity={0.12} />
-        <Brick $width={40} top={215} left={40} $opacity={0.06} />
-
-        <Brick $width={15} top={235} left={12} $opacity={0.12} />
-        <Brick $width={40} top={235} left={40} $opacity={0.06} /> */}
-      </OgPanel>
-      <EditBox>
-        <EditIcon />
-      </EditBox>
-      <TwPanel>
-        <Title>页眉链接</Title>
-        <Br top={8} />
-        <LinkDesc>游乐场</LinkDesc>
-        <LinkDesc>价格</LinkDesc>
-        <Brick $width={50} top={34} right={46} $opacity={0.08} />
-        <Brick $width={50} top={56} right={46} $opacity={0.08} />
+export default () => {
+  const s = useSalon()
 
-        <Br top={20} />
-        <Title>页脚链接</Title>
-        <Br top={8} />
-        <LinkDesc>梅西</LinkDesc>
-        <LinkDesc>哈维</LinkDesc>
-        <LinkDesc>小白</LinkDesc>
-        <LinkDesc>布教授</LinkDesc>
-
-        <Brick $width={50} top={124} right={46} $opacity={0.08} />
-        <Brick $width={50} top={145} right={46} $opacity={0.08} />
-
-        <Brick $width={50} top={168} right={46} $opacity={0.08} />
-        <Brick $width={50} top={188} right={46} $opacity={0.08} />
-
-        <Brick $width={30} top={220} left={68} $opacity={0.12} />
-        <Brick $width={50} top={220} right={48} $opacity={0.06} />
-
-        <Brick $width={30} top={237} left={68} $opacity={0.08} />
-        <Brick $width={50} top={237} right={48} $opacity={0.04} />
-      </TwPanel>
-    </Wrapper>
+  return (
+    <div className={s.wrapper}>
+      <div className={s.ogPanel}>
+        <div className={s.title}>社区图标</div>
+        <div className={s.logo} />
+        <div className={s.title}>社区名称</div>
+        <div className={s.desc}>Tiki-taka</div>
+        <div className={s.title}>社区简介</div>
+        <div className={s.desc}>Visca Barca Visca Catalunya!</div>
+        <div className={s.title}>社交媒体</div>
+
+        <div className={cn(s.iconBox, 'top-52')}>
+          <WechatSVG className={s.icon} />
+        </div>
+        <div className={cn(s.bar, 'top-52 left-8 mt-1')} />
+
+        <div className={cn(s.iconBox, 'top-56 mt-2')}>
+          <TwitterSVG className={s.icon} />
+        </div>
+
+        <div className={cn(s.bar, 'top-56 left-8 mt-3')} />
+      </div>
+      <div className={s.editBox}>
+        <EditSVG className={s.editIcon} />
+      </div>
+      <div className={s.twPanel}>
+        <div className={cn(s.title, 'mb-2')}>页眉链接</div>
+        <div className={s.linkDesc}>游乐场</div>
+        <div className={s.linkDesc}>价格</div>
+
+        <div className={cn(s.bar, 'top-10 right-12')} />
+        <div className={cn(s.bar, 'top-14 mt-1 right-12')} />
+
+        <div className={cn(s.title, 'mt-5 mb-2')}>页脚链接</div>
+        <div className={s.linkDesc}>梅西</div>
+        <div className={s.linkDesc}>哈维</div>
+        <div className={s.linkDesc}>小白</div>
+        <div className={s.linkDesc}>布教授</div>
+
+        <div className={cn(s.bar, 'top-28 mt-1.5 right-12')} />
+        <div className={cn(s.bar, 'top-36 right-12 -mt-0.5')} />
+
+        <div className={cn(s.bar, 'top-44 right-10 -mt-3 w-12')} />
+        <div className={cn(s.bar, 'top-48 right-12 -mt-1.5')} />
+
+        <div className={cn(s.bar, 'top-56 right-10 -mt-1 w-28 opacity-10')} />
+        <div className={cn(s.bar, 'top-60 right-10 -mt-1 w-28 opacity-5')} />
+      </div>
+    </div>
   )
 }
-
-export default Content

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

@@ -1,19 +1,17 @@
-import type { FC } from 'react'
-
 import HeaderCard from './HeaderCard'
 import Content from './Content'
 import FooterCard from './FooterCard'
 
-import { Wrapper } from '../../styles/dashboard_intros/links_tab/content_card'
+import useSalon from '../../styles/dashboard_intros/links_tab/content_card'
+
+export default () => {
+  const s = useSalon()
 
-const ContentCard: FC = () => {
   return (
-    <Wrapper>
+    <div className={s.wrapper}>
       <HeaderCard />
       <Content />
       <FooterCard />
-    </Wrapper>
+    </div>
   )
 }
-
-export default ContentCard

src/app/Landing/DashboardIntros/LinksTab/FooterCard.tsx

@@ -1,53 +1,41 @@
-import type { FC } from 'react'
+import WechatSVG from '~/icons/social/WeChat'
+import TwitterSVG from '~/icons/TwitterX'
 
-import {
-  Wrapper,
-  Links,
-  LinkTitle,
-  LinkName,
-  Brand,
-  Title,
-  Desc,
-  CommunityLogo,
-  Contract,
-  Icon,
-} from '../../styles/dashboard_intros/links_tab/footer_card'
+import useSalon from '../../styles/dashboard_intros/links_tab/footer_card'
+
+export default () => {
+  const s = useSalon()
 
-const FooterCard: FC = () => {
   return (
-    <Wrapper>
-      <Brand>
-        <CommunityLogo />
-        <Title>Tiki-taka</Title>
-        <Desc>Visca Barca Visca Catalunya!</Desc>
-        <Contract>
-          <Icon.Wechat />
-          <Icon.Twitter />
-          <Icon.Zhihu />
-        </Contract>
-      </Brand>
-      <Links>
-        <LinkTitle>核心</LinkTitle>
-        <LinkName>梅西</LinkName>
-        <LinkName>哈维</LinkName>
-        <LinkName>小白</LinkName>
-        <LinkName>布教授</LinkName>
-        <LinkName>皮看穿</LinkName>
-      </Links>
-      <Links>
-        <LinkTitle>荣誉室</LinkTitle>
-        <LinkName>西甲</LinkName>
-        <LinkName>国王杯</LinkName>
-        <LinkName>欧冠</LinkName>
-        <LinkName>世俱杯</LinkName>
-      </Links>
-      <Links>
-        <LinkTitle>开发者</LinkTitle>
-        <LinkName>瓜帅</LinkName>
-        <LinkName>克鲁伊夫</LinkName>
-      </Links>
-    </Wrapper>
+    <div className={s.wrapper}>
+      <div className={s.brand}>
+        <div className={s.communityLogo} />
+        <div className={s.title}>Tiki-taka</div>
+        <div className={s.desc}>Visca Barca Visca Catalunya!</div>
+        <div className={s.social}>
+          <WechatSVG className={s.icon} />
+          <TwitterSVG className={s.icon} />
+        </div>
+      </div>
+      <div className={s.links}>
+        <div className={s.linkTitle}>核心</div>
+        <div className={s.linkName}>梅西</div>
+        <div className={s.linkName}>哈维</div>
+        <div className={s.linkName}>小白</div>
+        <div className={s.linkName}>布教授</div>
+      </div>
+      <div className={s.links}>
+        <div className={s.linkTitle}>荣誉室</div>
+        <div className={s.linkName}>西甲</div>
+        <div className={s.linkName}>国王杯</div>
+        <div className={s.linkName}>欧冠</div>
+        <div className={s.linkName}>世俱杯</div>
+      </div>
+      <div className={s.links}>
+        <div className={s.linkTitle}>教练组</div>
+        <div className={s.linkName}>瓜帅</div>
+        <div className={s.linkName}>克鲁伊夫</div>
+      </div>
+    </div>
   )
 }
-
-export default FooterCard

src/app/Landing/DashboardIntros/LinksTab/HeaderCard.tsx

@@ -1,32 +1,21 @@
-import type { FC } from 'react'
+import useSalon from '../../styles/dashboard_intros/links_tab/header_card'
 
-import {
-  Wrapper,
-  Links,
-  LinkName,
-  Title,
-  CommunityLogo,
-  FakeAvatar,
-} from '../../styles/dashboard_intros/links_tab/header_card'
+export default () => {
+  const s = useSalon()
 
-const HeaderCard: FC = () => {
   return (
-    <Wrapper>
-      <Title>
-        <CommunityLogo />
+    <div className={s.wrapper}>
+      <div className={s.title}>
+        <div className={s.communityLogo} />
         Tiki-taka
-      </Title>
-      <Links>
-        <LinkName>讨论</LinkName>
-        <LinkName>看板</LinkName>
-        <LinkName>更新日志</LinkName>
-        <LinkName>游乐场</LinkName>
-        <LinkName>价格</LinkName>
-        <LinkName>更多</LinkName>
-      </Links>
-      <FakeAvatar />
-    </Wrapper>
+      </div>
+      <div className={s.links}>
+        <div className={s.linkName}>讨论</div>
+        <div className={s.linkName}>看板</div>
+        <div className={s.linkName}>更新日志</div>
+        <div className={s.linkName}>游乐场</div>
+      </div>
+      <div className={s.bar} />
+    </div>
   )
 }
-
-export default HeaderCard

src/app/Landing/DashboardIntros/LinksTab/index.tsx

@@ -1,15 +1,13 @@
-import type { FC } from 'react'
-
 import ContentCard from './ContentCard'
 
-import { Wrapper } from '../../styles/dashboard_intros/links_tab'
+import useSalon from '../../styles/dashboard_intros/links_tab'
+
+export default () => {
+  const s = useSalon()
 
-const LinksTab: FC = () => {
   return (
-    <Wrapper>
+    <div className={s.wrapper}>
       <ContentCard />
-    </Wrapper>
+    </div>
   )
 }
-
-export default LinksTab

src/app/Landing/DashboardIntros/SideIntros/constant.ts

@@ -78,8 +78,8 @@ export default {
   },
 
   [DASHBOARD_ROUTE.ADMINS]: {
-    title: '管理员 & 权限管理',
-    desc: '社区管理员操作权限相关',
+    title: '管理员 & 权限',
+    desc: '社区管理员设置，操作权限相关',
     color: COLOR_NAME.RED,
     icon: AdminSVG,
 
@@ -95,19 +95,18 @@ export default {
   },
 
   [DASHBOARD_ROUTE.HEADER]: {
-    title: '页头 & 页脚链接',
-    desc: '链接及链接组管理',
+    title: '页头 & 页脚',
+    desc: '链接及分组管理，展示模板设置',
     color: COLOR_NAME.BROWN,
     icon: IntroHeaderFooterSVG,
 
     items: [
-      '社区基本信息，主题色',
-      '品牌展示样式',
-      '社区整体布局',
-      '讨论区布局',
-      '看板布局，背景颜色',
-      '更新日志布局',
-      '壁纸，辉光，毛玻璃效果',
+      '社区基本信息',
+      '页头/页脚链接，分组管理',
+      '可视化排序调整',
+      '个性化标签展示',
+      '多种展示模板',
+      '响应式设计',
     ],
   },
 

src/app/Landing/index.tsx

@@ -72,7 +72,7 @@ export default () => {
 
   return (
     <div className={s.wrapper} data-testid="landing-page">
-      <DashboardIntros />
+      {/* <DashboardIntros /> */}
       {/* <PatternBg /> */}
       <div className={s.inner}>
         {/* <BgGlow wallpaper={wallpaper} /> */}
@@ -122,7 +122,7 @@ export default () => {
 
         <BatteryBento />
 
-        {/* <DashboardIntros /> */}
+        <DashboardIntros />
 
         <TechStacks />
 

src/app/Landing/styles/dashboard_intros/index.ts

@@ -21,7 +21,7 @@ export default ({ tab }: TProps) => {
     title: cn('text-3xl bold-sm opacity-70', fg('text.title'), global('text-shadow')),
     desc: cn('text-lg mt-3', fg('text.digest')),
     //
-    content: 'column items-center relative w-full px-30 h-[720px]',
+    content: 'column items-center relative w-full px-30 h-[720px] overflow-hidden',
     inner: 'row-center-between w-8/12 h-full gap-x-10 pl-2 -mt-8',
     graphDemo: 'align-both w-1/2 h-full mr-2',