chore: overview tab -> tailwind (#233)

groupher · Sep 29, 2024 · 99e94c0 · 99e94c0
1 parent c97b413
commit 99e94c0
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 110 deletions.
diff --git a/src/containers/thread/DashboardThread/Overview/BasicNumbers.tsx b/src/containers/thread/DashboardThread/Overview/BasicNumbers.tsx
@@ -3,45 +3,46 @@ import { prettyNum } from '~/fmt'
 import NoteTip from '~/widgets/NoteTip'
 
 import useOverview from '../logic/useOverview'
-import { Wrapper, Left, Right, Section, Hint, Num } from '../styles/overview/basic_numbers'
+import useSalon from '../styles/overview/basic_numbers'
 
 export default () => {
+  const s = useSalon()
   const { views, subscribersCount, postsCount, changelogsCount, docsCount } = useOverview()
 
   return (
-    <Wrapper>
-      <Left>
-        <Section>
-          <Hint>社区浏览</Hint>
-          <Num>{prettyNum(views)}</Num>
-        </Section>
-      </Left>
-      <Right>
-        <Section>
-          <Hint>
+    <div className={s.wrapper}>
+      <div className={s.left}>
+        <section className={s.section}>
+          <div className={s.hint}>社区浏览</div>
+          <div className={s.num}>{prettyNum(views)}</div>
+        </section>
+      </div>
+      <div className={s.right}>
+        <section className={s.section}>
+          <div className={s.hint}>
             参与互动人数
             <NoteTip left={4} placement="top">
               参与过发帖，评论，Emoji 反馈的人数
             </NoteTip>
-          </Hint>
-          <Num>{prettyNum(subscribersCount)}</Num>
-        </Section>
+          </div>
+          <div className={s.num}>{prettyNum(subscribersCount)}</div>
+        </section>
 
-        <Section>
-          <Hint>帖子总数</Hint>
-          <Num>{prettyNum(postsCount)}</Num>
-        </Section>
+        <section className={s.section}>
+          <div className={s.hint}>帖子总数</div>
+          <div className={s.num}>{prettyNum(postsCount)}</div>
+        </section>
 
-        <Section>
-          <Hint>更新日志总数</Hint>
-          <Num>{prettyNum(changelogsCount)}</Num>
-        </Section>
+        <section className={s.section}>
+          <div className={s.hint}>更新日志总数</div>
+          <div className={s.num}>{prettyNum(changelogsCount)}</div>
+        </section>
 
-        <Section>
-          <Hint>文档总数</Hint>
-          <Num>{prettyNum(docsCount)}</Num>
-        </Section>
-      </Right>
-    </Wrapper>
+        <section className={s.section}>
+          <div className={s.hint}>文档总数</div>
+          <div className={s.num}>{prettyNum(docsCount)}</div>
+        </section>
+      </div>
+    </div>
   )
 }
diff --git a/src/containers/thread/DashboardThread/Overview/index.tsx b/src/containers/thread/DashboardThread/Overview/index.tsx
@@ -1,20 +1,18 @@
-import { type FC, memo } from 'react'
-
 import Portal from '../Portal'
 import BasicNumbers from './BasicNumbers'
 
-import { Wrapper, Section } from '../styles/overview'
+import useSalon from '../styles/overview'
+
+export default () => {
+  const s = useSalon()
 
-const Overview: FC = () => {
   return (
-    <Wrapper>
+    <div className={s.wrapper}>
       <Portal title="设置概览" desc="基础设置向导，帮助文档等等" />
-      <Section>
+      <section className={s.section}>
         <BasicNumbers />
         {/* <SectionLabel title="基本信息" /> */}
-      </Section>
-    </Wrapper>
+      </section>
+    </div>
   )
 }
-
-export default memo(Overview)
diff --git a/src/containers/thread/DashboardThread/styles/overview/basic_numbers.ts b/src/containers/thread/DashboardThread/styles/overview/basic_numbers.ts
@@ -1,30 +1,14 @@
-import styled, { css, theme } from '~/css'
+import useTwBelt from '~/hooks/useTwBelt'
 
-export const Wrapper = styled.div`
-  ${css.row()};
-`
+export default () => {
+  const { cn, fg } = useTwBelt()
 
-export const Left = styled.div`
-  width: 100px;
-  margin-right: 100px;
-`
-export const Right = styled.div`
-  ${css.rowWrap()};
-  width: 300px;
-  gap: 0 20px;
-`
-export const Section = styled.div`
-  width: 120px;
-  height: 80px;
-`
-export const Hint = styled.div`
-  ${css.row('align-center')};
-  color: ${theme('lightText')};
-  font-size: 13px;
-`
-
-export const Num = styled.div`
-  color: ${theme('article.title')};
-  font-weight: 550;
-  font-size: 24px;
-`
+  return {
+    wrapper: 'row',
+    left: 'w-24 mr-24',
+    right: 'row wrap w-80 gap-y-5',
+    section: 'w-32 h-20',
+    hint: cn('row-center text-xs', fg('text.hint')),
+    num: cn('text-2xl bold-sm mt-1', fg('text.title')),
+  }
+}
diff --git a/src/containers/thread/DashboardThread/styles/overview/index.ts b/src/containers/thread/DashboardThread/styles/overview/index.ts
@@ -1,44 +1,6 @@
-import styled, { css, theme } from '~/css'
-import Input from '~/widgets/Input'
-
-import { ALIGN_HEADER_OFFSET } from '../../constant'
-
-export const Wrapper = styled.div`
-  ${css.column()};
-  padding: ${() => `0 ${ALIGN_HEADER_OFFSET}`};
-`
-export const Section = styled.div`
-  padding-bottom: 30px;
-  margin-bottom: 20px;
-`
-export const LogoWrapper = styled.div`
-  ${css.size(70)};
-`
-export const Logo = styled.div`
-  ${css.size(70)};
-  background: ${theme('hoverBg')};
-  border-radius: 4px;
-`
-export const Title = styled.div`
-  color: ${theme('article.title')};
-  font-size: 15px;
-  margin-bottom: 12px;
-`
-export const Desc = styled.div`
-  color: ${theme('hint')};
-  font-size: 12px;
-  margin-top: 10px;
-  margin-bottom: 20px;
-`
-export const Row = styled.div`
-  ${css.row('align-center')};
-`
-export const Label = styled.div`
-  color: ${theme('article.title')};
-  font-size: 14px;
-`
-export const Inputer = styled(Input)`
-  margin-top: 10px;
-  margin-bottom: 20px;
-  width: 300px;
-`
+export default () => {
+  return {
+    wrapper: 'column ml-28',
+    section: 'pb-8 mb-5',
+  }
+}