refactor(dashboard): inout cards to tailwind (#256)

* chore: wip * chore: wip * chore: done
groupher · Oct 27, 2024 · c385c65 · c385c65
1 parent fe3937d
commit c385c65
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 434 deletions.
diff --git a/src/app/Landing/DashboardIntros/ImportTab/Content.tsx b/src/app/Landing/DashboardIntros/ImportTab/Content.tsx
@@ -1,24 +1,22 @@
-import type { FC } from 'react'
+import Img from '~/Img'
 
-import { Brick } from '~/widgets/Common'
+import useSalon, { cn } from '../../styles/dashboard_intros/import_tab/content'
 
-import { Wrapper, Header, Logo, Title } from '../../styles/dashboard_intros/import_tab/content'
+export default () => {
+  const s = useSalon()
 
-const Content: FC = () => {
   return (
-    <Wrapper>
-      <Header>
-        <Logo src="groupher-alpha.png" />
-        <Title>Groupher</Title>
-      </Header>
+    <div className={s.wrapper}>
+      <div className={s.head}>
+        <Img src="groupher.png" className={s.logo} />
+        <div className={s.title}>Groupher</div>
+      </div>
 
-      <Brick $width={100} $height={6} $opacity={0.18} top={60} left={30} />
-      <Brick $width={120} $height={6} $opacity={0.16} top={78} left={30} />
-      <Brick $width={90} $height={6} $opacity={0.13} top={96} left={30} />
-      <Brick $width={80} $height={6} $opacity={0.1} top={114} left={30} />
-      <Brick $width={100} $height={6} $opacity={0.06} top={132} left={30} />
-    </Wrapper>
+      <div className={cn(s.bar, 'mt-3.5')} />
+      <div className={cn(s.bar, 'w-28')} />
+      <div className={cn(s.bar, 'w-32 opacity-15')} />
+      <div className={cn(s.bar, 'w-20 opacity-10')} />
+      <div className={cn(s.bar, 'opacity-5')} />
+    </div>
   )
 }
-
-export default Content
diff --git a/src/app/Landing/DashboardIntros/ImportTab/ContentCard.tsx b/src/app/Landing/DashboardIntros/ImportTab/ContentCard.tsx
@@ -1,54 +1,37 @@
-import type { FC } from 'react'
-
 import HeaderCard from './HeaderCard'
 import Content from './Content'
 import FooterCard from './FooterCard'
 
-import {
-  Wrapper,
-  BgBubble,
-  // LeftBgBubble,
-  // RightBgBubble,
-  Bot,
-  AI,
-  HLineIcon,
-  HLineIcon2,
-  //
-  LineIcon,
-  LineIcon2,
-  CurveLineIcon1,
-  CurveLineIcon2,
-  CurveLineIcon3,
-  CurveLineIcon4,
-} from '../../styles/dashboard_intros/import_tab/content_card'
-
-const ContentCard: FC = () => {
+import LineSVG from '../../styles/dashboard_intros/import_tab/Line'
+
+import useSalon, { cn } from '../../styles/dashboard_intros/import_tab/content_card'
+
+export default () => {
+  const s = useSalon()
+
   return (
-    <Wrapper>
-      <Bot top={230} left={40}>
-        Bot
-      </Bot>
-      <AI top={230} right={50}>
-        AI
-      </AI>
-      {/* <LeftBgBubble />
-      <RightBgBubble /> */}
-      <BgBubble />
-      <HLineIcon />
-      <HLineIcon2 />
-
-      <LineIcon />
-      <LineIcon2 />
-      <CurveLineIcon1 />
-      <CurveLineIcon2 />
-      <CurveLineIcon3 />
-      <CurveLineIcon4 />
+    <div className={s.wrapper}>
+      <div className={cn(s.bot, 'left-8 top-56 mt-2')}>Bot</div>
+      <div className={cn(s.ai, 'right-9 top-56 mt-1')}>AI</div>
+      <div className={s.BgBubble} />
+      <LineSVG className={s.lLine} />
+      <LineSVG className={s.rLine} />
+
+      <div className={cn(s.dot, 'top-20 left-24')} />
+      <div className={cn(s.dot, 'top-28 left-32 size-1.5 opacity-15')} />
+
+      <div className={cn(s.dot, 'top-20 right-20')} />
+      <div className={cn(s.dot, 'top-28 right-28 size-1.5 opacity-15')} />
+
+      <div className={cn(s.dot, 'bottom-20 left-24 size-1.5 opacity-15')} />
+      <div className={cn(s.dot, 'bottom-28 left-32')} />
+
+      <div className={cn(s.dot, 'bottom-20 right-20')} />
+      <div className={cn(s.dot, 'bottom-28 right-28 size-1.5 opacity-15')} />
 
       <HeaderCard />
       <Content />
       <FooterCard />
-    </Wrapper>
+    </div>
   )
 }
-
-export default ContentCard
diff --git a/src/app/Landing/DashboardIntros/ImportTab/FooterCard.tsx b/src/app/Landing/DashboardIntros/ImportTab/FooterCard.tsx
@@ -1,38 +1,24 @@
-import type { FC } from 'react'
+import Img from '~/Img'
 
-import {
-  Wrapper,
-  ImCard,
-  ImIcons,
-  ToolIcons,
-  // FooterNote,
-  ImgIcon,
-  OhterCard,
-} from '../../styles/dashboard_intros/import_tab/footer_card'
+import useSalon, { cn } from '../../styles/dashboard_intros/import_tab/footer_card'
+
+export default () => {
+  const s = useSalon()
 
-const FooterCard: FC = () => {
   return (
-    <Wrapper>
-      <ImCard>
-        <ImIcons>
-          <ImgIcon src="landing/products/dingding.png" />
-          <ImgIcon src="landing/products/feishu.png" $size={30} />
-          <ImgIcon src="landing/seo/wechat2.png" $size={26} />
-          <ImgIcon src="landing/products/slack.png" $size={22} />
-          <ImgIcon src="landing/products/discord.png" $size={24} />
-        </ImIcons>
-        {/* <FooterNote>主流 IM 平台</FooterNote> */}
-      </ImCard>
-      <OhterCard>
-        <ToolIcons>
-          <ImgIcon src="landing/products/email.png" $size={26} />
-          <ImgIcon src="landing/seo/rss.png" $size={25} />
-          <ImgIcon src="landing/products/webhook.png" $size={20} />
-        </ToolIcons>
-        {/* <FooterNote>Mail / RSS / Webhook</FooterNote> */}
-      </OhterCard>
-    </Wrapper>
+    <div className={s.wrapper}>
+      <div className={cn(s.imcard, '-rotate-3')}>
+        <Img src="landing/products/dingding.png" className={s.img} />
+        <Img src="landing/products/feishu.png" className={s.img} />
+        <Img src="landing/seo/wechat2.png" className={s.img} />
+        <Img src="landing/products/slack.png" className={s.img} />
+        <Img src="landing/products/discord.png" className={s.img} />
+      </div>
+      <div className={cn(s.imcard, s.otherCard, 'rotate-3')}>
+        <Img src="landing/products/email.png" className={s.img} />
+        <Img src="landing/seo/rss.png" className={s.img} />
+        <Img src="landing/products/webhook.png" className={cn(s.img, 'size-6')} />
+      </div>
+    </div>
   )
 }
-
-export default FooterCard
diff --git a/src/app/Landing/DashboardIntros/ImportTab/HeaderCard.tsx b/src/app/Landing/DashboardIntros/ImportTab/HeaderCard.tsx
@@ -1,40 +1,25 @@
-import type { FC } from 'react'
+import Img from '~/Img'
 
-import {
-  Wrapper,
-  ImCard,
-  ImIcons,
-  OhterCard,
-  Icon,
-  ImgIcon,
-  MDIcon,
-  CVSIcon,
-  ToolIcons,
-  // FooterNote,
-} from '../../styles/dashboard_intros/import_tab/header_card'
+import GithubSVG from '~/icons/social/Github'
+
+import useSalon, { cn } from '../../styles/dashboard_intros/import_tab/header_card'
+
+export default () => {
+  const s = useSalon()
 
-const HeaderCard: FC = () => {
   return (
-    <Wrapper>
-      <ImCard>
-        <ImIcons>
-          <Icon.GITHUB />
-          <ImgIcon src="landing/products/gitlab.png" $size={32} />
-          <ImgIcon src="landing/products/notion.png" $size={30} />
-          <ImgIcon src="landing/products/linear.png" $size={24} />
-          <ImgIcon src="landing/products/jira.png" $size={22} />
-        </ImIcons>
-        {/* <FooterNote>常见 issue 管理工具</FooterNote> */}
-      </ImCard>
-      <OhterCard>
-        <ToolIcons>
-          <MDIcon src="landing/products/markdown.png" />
-          <CVSIcon src="landing/products/cvs.png" />
-        </ToolIcons>
-        {/* <FooterNote>Markdown / CVS 导入</FooterNote> */}
-      </OhterCard>
-    </Wrapper>
+    <div className={s.wrapper}>
+      <div className={cn(s.imcard, 'rotate-3')}>
+        <GithubSVG className={s.svgIcon} />
+        <Img src="landing/products/gitlab.png" className={s.img} />
+        <Img src="landing/products/notion.png" className={s.img} />
+        <Img src="landing/products/linear.png" className={s.img} />
+        <Img src="landing/products/jira.png" className={cn(s.img, 'size-6')} />
+      </div>
+      <div className={cn(s.imcard, s.otherCard, '-rotate-2')}>
+        <Img src="landing/products/markdown.png" className={cn(s.img, 'size-6')} />
+        <Img src="landing/products/cvs.png" className={cn(s.img, 'size-6')} />
+      </div>
+    </div>
   )
 }
-
-export default HeaderCard
diff --git a/src/app/Landing/DashboardIntros/ImportTab/index.tsx b/src/app/Landing/DashboardIntros/ImportTab/index.tsx
@@ -1,15 +1,13 @@
-import type { FC } from 'react'
-
 import ContentCard from './ContentCard'
 
-import { Wrapper } from '../../styles/dashboard_intros/import_tab'
+import useSalon from '../../styles/dashboard_intros/import_tab'
+
+export default () => {
+  const s = useSalon()
 
-const ImportTab: FC = () => {
   return (
-    <Wrapper>
+    <div className={s.wrapper}>
       <ContentCard />
-    </Wrapper>
+    </div>
   )
 }
-
-export default ImportTab
diff --git a/src/app/Landing/DashboardIntros/SideIntros/constant.ts b/src/app/Landing/DashboardIntros/SideIntros/constant.ts
@@ -112,19 +112,19 @@ export default {
 
   [DASHBOARD_ROUTE.INOUT]: {
     title: '导入 & 通知',
-    desc: '从其他服务商 / 平台导入内容',
+    desc: '三方平台导入内容 / 信息通知',
     color: COLOR_NAME.YELLOW,
     icon: IntroInoutSVG,
     iconClass: 'size-8 opacity-80',
 
     items: [
-      '社区基本信息，主题色',
-      '品牌展示样式',
-      '社区整体布局',
-      '讨论区布局',
-      '看板布局，背景颜色',
-      '更新日志布局',
-      '壁纸，辉光，毛玻璃效果',
+      '主流平台内容一键导入',
+      'Markdown / CSV 等手动导入',
+      '主流 IM 平台通知机器人',
+      'webhook 通知机制',
+      'RSS 内容输出',
+      '邮件精准通知',
+      '多种高模板自定义',
     ],
   },
 }
diff --git a/src/app/Landing/styles/dashboard_intros/import_tab/content.ts b/src/app/Landing/styles/dashboard_intros/import_tab/content.ts
@@ -1,32 +1,16 @@
-import styled, { css, theme } from '~/css'
+import useTwBelt from '~/hooks/useTwBelt'
 
-import Img from '~/Img'
+export { cn } from '~/css'
 
-export const Wrapper = styled.div`
-  ${css.column()};
-  width: 180px;
-  height: 160px;
-  padding: 15px 25px;
-  margin-top: -10px;
-  border-radius: 10px;
-  position: relative;
-  background: ${theme('alphaBg2')};
-  color: ${theme('article.digest')};
-  border: 1px solid;
-  border-color: ${theme('divider')};
-  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-  z-index: 2;
-`
-export const Header = styled.div`
-  ${css.row('align-center')};
-`
-export const Logo = styled(Img)`
-  ${css.size(26)};
-  box-shadow: rgba(149, 157, 165, 0.2) 0px -1px 24px;
-`
-export const Title = styled.div`
-  color: ${theme('article.title')};
-  font-weight: 500;
-  font-size: 20px;
-  margin-left: 8px;
-`
+export default () => {
+  const { cn, fg, bg, shadow } = useTwBelt()
+
+  return {
+    wrapper: cn('w-44 h-40 px-6 py-4 -mt-2.5 rounded-md relative z-30', bg('htmlBg'), shadow('md')),
+    head: 'row-center',
+    logo: cn('size-6', shadow('sm')),
+    title: cn('text-lg ml-2', fg('text.title')),
+    //
+    bar: cn('w-32 h-2 opacity-15 rounded-md mb-3', bg('text.digest')),
+  }
+}