From c385c65fd9ebaa86cacced3096cace195b8cfe41 Mon Sep 17 00:00:00 2001 From: xieyimian Date: Sun, 27 Oct 2024 11:45:31 +0800 Subject: [PATCH] refactor(dashboard): inout cards to tailwind (#256) * chore: wip * chore: wip * chore: done --- .../DashboardIntros/ImportTab/Content.tsx | 32 ++-- .../DashboardIntros/ImportTab/ContentCard.tsx | 69 +++----- .../DashboardIntros/ImportTab/FooterCard.tsx | 52 ++---- .../DashboardIntros/ImportTab/HeaderCard.tsx | 55 +++--- .../DashboardIntros/ImportTab/index.tsx | 14 +- .../DashboardIntros/SideIntros/constant.ts | 16 +- .../dashboard_intros/import_tab/content.ts | 44 ++--- .../import_tab/content_card.ts | 162 ++++-------------- .../import_tab/footer_card.ts | 65 ++----- .../import_tab/header_card.ts | 97 ++--------- .../dashboard_intros/import_tab/index.ts | 19 +- 11 files changed, 191 insertions(+), 434 deletions(-) diff --git a/src/app/Landing/DashboardIntros/ImportTab/Content.tsx b/src/app/Landing/DashboardIntros/ImportTab/Content.tsx index ab87e8696..e12b44e7a 100644 --- 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 ( - -
- - Groupher -
+
+
+ +
Groupher
+
- - - - - - +
+
+
+
+
+
) } - -export default Content diff --git a/src/app/Landing/DashboardIntros/ImportTab/ContentCard.tsx b/src/app/Landing/DashboardIntros/ImportTab/ContentCard.tsx index bc58273c8..3c689ff80 100644 --- 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 ( - - - Bot - - - AI - - {/* - */} - - - - - - - - - - +
+
Bot
+
AI
+
+ + + +
+
+ +
+
+ +
+
+ +
+
- +
) } - -export default ContentCard diff --git a/src/app/Landing/DashboardIntros/ImportTab/FooterCard.tsx b/src/app/Landing/DashboardIntros/ImportTab/FooterCard.tsx index 2d08f3045..e60538444 100644 --- 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 ( - - - - - - - - - - {/* 主流 IM 平台 */} - - - - - - - - {/* Mail / RSS / Webhook */} - - +
+
+ + + + + +
+
+ + + +
+
) } - -export default FooterCard diff --git a/src/app/Landing/DashboardIntros/ImportTab/HeaderCard.tsx b/src/app/Landing/DashboardIntros/ImportTab/HeaderCard.tsx index 74a96cd72..de834bea2 100644 --- 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 ( - - - - - - - - - - {/* 常见 issue 管理工具 */} - - - - - - - {/* Markdown / CVS 导入 */} - - +
+
+ + + + + +
+
+ + +
+
) } - -export default HeaderCard diff --git a/src/app/Landing/DashboardIntros/ImportTab/index.tsx b/src/app/Landing/DashboardIntros/ImportTab/index.tsx index c40374b2d..98e9e0dc5 100644 --- 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 ( - +
- +
) } - -export default ImportTab diff --git a/src/app/Landing/DashboardIntros/SideIntros/constant.ts b/src/app/Landing/DashboardIntros/SideIntros/constant.ts index b92100df0..9ebf3c439 100644 --- 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 index 072d104d9..54f951850 100644 --- 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')), + } +} diff --git a/src/app/Landing/styles/dashboard_intros/import_tab/content_card.ts b/src/app/Landing/styles/dashboard_intros/import_tab/content_card.ts index e91a14cfb..1747791be 100644 --- a/src/app/Landing/styles/dashboard_intros/import_tab/content_card.ts +++ b/src/app/Landing/styles/dashboard_intros/import_tab/content_card.ts @@ -1,126 +1,40 @@ -import styled, { css, theme, animate } from '~/css' -import { WithPosition } from '~/widgets/Common' +import { COLOR_NAME } from '~/const/colors' -import CurveLineSVG from './CurveLine' -import LineSVG from './Line' +import useTwBelt from '~/hooks/useTwBelt' -export const Wrapper = styled.div` - ${css.column('align-both')}; - width: 460px; - height: 500px; - z-index: 2; - position: absolute; - bottom: 40px; - left: -20px; -` -export const Bot = styled(WithPosition)` - width: auto; - color: ${theme('article.digest')}; - padding: 4px 10px; - background: ${theme('gradientBg.green')}; - font-weight: bold; - border: 1px solid; - border-color: ${theme('divider')}; - border-radius: 8px; - box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; - z-index: 2; -` -export const AI = styled(WithPosition)` - width: auto; - color: ${theme('article.digest')}; - padding: 4px 10px; - background: ${theme('gradientBg.orange')}; - font-weight: bold; - border: 1px solid; - border-color: ${theme('divider')}; - border-radius: 8px; - box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; - z-index: 2; -` -export const BgBubble = styled.div` - width: 180px; - height: 180px; - position: absolute; - top: 155px; - left: 140px; - border-radius: 78px; - background: ${theme('gradientBg.green')}; - animation: ${animate.rotate360} 6s linear infinite; - z-index: 1; -` -export const LeftBgBubble = styled(BgBubble)` - width: 46px; - height: 46px; - border-radius: 18px; - top: 225px; - left: 50px; - background: ${theme('gradientBg.orange')}; -` -export const RightBgBubble = styled(BgBubble)` - width: 48px; - height: 40px; - border-radius: 18px; - top: 225px; - left: 360px; - background: ${theme('gradientBg.green')}; -` -export const HLineIcon = styled(LineSVG)` - height: 80px; - position: absolute; - top: 215px; - left: 28px; -` -export const HLineIcon2 = styled(LineSVG)` - height: 80px; - position: absolute; - top: 198px; - right: 30px; - z-index: 100; - transform: rotate(180deg); -` -export const LineIcon = styled(LineSVG)` - height: 80px; - position: absolute; - top: 90px; - left: 141px; - transform: rotate(90deg); -` -export const LineIcon2 = styled(LineSVG)` - height: 80px; - position: absolute; - bottom: 96px; - left: 159px; - transform: rotate(-90deg); -` -export const CurveLineIcon1 = styled(CurveLineSVG)` - position: absolute; - top: -80px; - left: 20px; - width: 200px; - height: 350px; - transform: rotateX(180deg) rotateZ(352deg); -` -export const CurveLineIcon2 = styled(CurveLineSVG)` - position: absolute; - top: -80px; - right: 20px; - width: 200px; - height: 350px; - transform: rotateZ(172deg); -` -export const CurveLineIcon3 = styled(CurveLineSVG)` - position: absolute; - bottom: -70px; - left: 20px; - width: 200px; - height: 350px; - transform: rotate(-8deg); -` -export const CurveLineIcon4 = styled(CurveLineSVG)` - position: absolute; - bottom: -70px; - right: 20px; - width: 200px; - height: 350px; - transform: rotateY(180deg) rotateZ(-8deg); -` +export { cn } from '~/css' + +export default () => { + const { cn, fg, br, rainbow, global, shadow } = useTwBelt() + + return { + wrapper: cn('align-both w-[460px] h-[500px] z-20', 'absolute bottom-10 -left-5'), + BgBubble: cn( + 'size-44 absolute top-40 left-36 rounded-3xl', + 'animate-spin animate-infinite animate-duration-[10000ms]', + global('gradient-green'), + ), + // + lLine: 'absolute h-20 left-7 top-52 mt-2', + rLine: 'absolute h-20 right-7 top-48 mt-1.5 rotate-180', + // + curveLT: 'absolute -top-20 left-5 w-52 h-80', + dot: cn('absolute size-2 circle opacity-20', rainbow(COLOR_NAME.BROWN, 'bg')), + // + bot: cn( + 'absolute w-auto px-2.5 py-1 z-20 bold-sm rounded-md border', + fg('text.digest'), + global('gradient-green'), + br('divider'), + shadow('sm'), + ), + + ai: cn( + 'absolute w-auto px-2.5 py-1 z-20 bold-sm rounded-md border', + fg('text.digest'), + global('gradient-orange'), + br('divider'), + shadow('sm'), + ), + } +} diff --git a/src/app/Landing/styles/dashboard_intros/import_tab/footer_card.ts b/src/app/Landing/styles/dashboard_intros/import_tab/footer_card.ts index d4ed82238..79c7cbc63 100644 --- a/src/app/Landing/styles/dashboard_intros/import_tab/footer_card.ts +++ b/src/app/Landing/styles/dashboard_intros/import_tab/footer_card.ts @@ -1,49 +1,20 @@ -import styled, { css, theme } from '~/css' +import useTwBelt from '~/hooks/useTwBelt' -import Img from '~/Img' -export const Wrapper = styled.div` - ${css.row('align-center', 'justify-between')}; - padding: 0 15px; - padding-bottom: 0; - color: ${theme('article.digest')}; - width: 100%; - height: 56px; - z-index: 2; - position: absolute; - bottom: 5px; - left: 0; -` -export const ImCard = styled.div` - width: 240px; - height: 60px; - ${css.column('align-both')}; - background: ${theme('htmlBg')}; - gap: 8px 0px; - border: 1px solid; - border-color: ${theme('divider')}; - box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; - border-radius: 30px; - padding-top: 5px; -` -export const OhterCard = styled(ImCard)` - width: 150px; - height: 60px; -` -export const ImIcons = styled.div` - width: 100%; - ${css.row('align-both')}; - opacity: 0.9; - gap: 0 15px; -` -export const ToolIcons = styled(ImIcons)` - gap: 0 16px; -` -export const FooterNote = styled.div` - color: ${theme('article.digest')}; - font-size: 13px; - margin-bottom: -5px; -` +export { cn } from '~/css' -export const ImgIcon = styled(Img)<{ $size?: number }>` - ${({ $size }) => css.size($size || 28)}}; -` +export default () => { + const { cn, bg, br, shadow } = useTwBelt() + + return { + wrapper: cn('row-center-between px-4 pb-0 w-full h-14 z-20', 'absolute bottom-1 left-0'), + + imcard: cn( + 'align-both w-60 h-14 gap-y-3 border rounded-2xl gap-x-4', + bg('htmlBg'), + br('divider'), + shadow('sm'), + ), + otherCard: cn('ml-10 w-36 h-14'), + img: 'size-7', + } +} diff --git a/src/app/Landing/styles/dashboard_intros/import_tab/header_card.ts b/src/app/Landing/styles/dashboard_intros/import_tab/header_card.ts index f7d11e39b..be54db9c2 100644 --- a/src/app/Landing/styles/dashboard_intros/import_tab/header_card.ts +++ b/src/app/Landing/styles/dashboard_intros/import_tab/header_card.ts @@ -1,84 +1,21 @@ -import styled, { css, theme } from '~/css' +import useTwBelt from '~/hooks/useTwBelt' -import type { TActive } from '~/spec' +export { cn } from '~/css' -import Img from '~/Img' -import MarkdownSVG from '~/icons/Markdown' -import EmailSVG from '~/icons/social/Email' -import WeChatSVG from '~/icons/social/WeChat' -import GithubSVG from '~/icons/social/Github' +export default () => { + const { cn, bg, br, fill, shadow } = useTwBelt() -export const Wrapper = styled.div` - ${css.row('align-center', 'justify-between')}; - padding: 0 15px; - padding-bottom: 0; - color: ${theme('article.digest')}; - width: 100%; - height: 56px; - z-index: 2; - position: absolute; - top: 0px; - left: 0; -` -export const ImCard = styled.div` - width: 240px; - height: 60px; - ${css.column('align-both')}; - background: ${theme('htmlBg')}; - gap: 12px 0px; - border: 1px solid; - border-color: ${theme('divider')}; - box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; - border-radius: 30px; - padding-top: 5px; -` -export const OhterCard = styled(ImCard)` - width: 134px; - height: 55px; - margin-left: 30px; -` -export const ImIcons = styled.div` - width: 100%; - ${css.row('align-both')}; - opacity: 0.9; - gap: 0 15px; -` -export const ToolIcons = styled(ImIcons)` - gap: 0 22px; -` -export const FooterNote = styled.div` - color: ${theme('article.digest')}; - font-size: 13px; - margin-bottom: -5px; -` -export const ImgIcon = styled(Img)<{ $size?: number }>` - ${({ $size }) => css.size($size || 28)}}; -` -export const MDIcon = styled(Img)` - margin-top: 1px; - width: 28px; - height: 20px; -` -export const CVSIcon = styled(Img)` - width: 24px; - height: 28px; -` - -const commonIcon = (SVG, size = 28) => { - return styled(SVG)` - ${css.size(size)}; - - &:hover { - cursor: pointer; - } - - transition: all 0.2s; - ` -} - -export const Icon = { - Markdown: commonIcon(MarkdownSVG), - EMAIL: commonIcon(EmailSVG), - GITHUB: commonIcon(GithubSVG), - WECHAT: commonIcon(WeChatSVG), + return { + wrapper: cn('row-center-between px-4 pb-0 w-full h-14 z-20', 'absolute top-0 left-0'), + imcard: cn( + 'align-both w-60 h-14 gap-y-3 border rounded-2xl gap-x-4', + bg('htmlBg'), + br('divider'), + shadow('sm'), + ), + otherCard: cn('ml-10 w-28 h-14'), + // + img: 'size-7', + svgIcon: cn('size-7', fill('text.digest')), + } } diff --git a/src/app/Landing/styles/dashboard_intros/import_tab/index.ts b/src/app/Landing/styles/dashboard_intros/import_tab/index.ts index f8589271d..ed515b426 100644 --- a/src/app/Landing/styles/dashboard_intros/import_tab/index.ts +++ b/src/app/Landing/styles/dashboard_intros/import_tab/index.ts @@ -1,11 +1,12 @@ -import styled, { css, animate } from '~/css' +import useTwBelt from '~/hooks/useTwBelt' -export const Wrapper = styled.div` - ${css.column('align-both')}; - width: 100%; - height: 100%; - position: relative; - animation: ${animate.jump} 0.5s linear; -` +export default () => { + const { cn } = useTwBelt() -export const holder = 1 + return { + wrapper: cn( + 'row w-full h-full relative mb-20', + 'animate-fade-up animate-duration-500 animate-ease-in-out', + ), + } +}