refactor(dashboard): move wigets to tailwind (#230)

* refactor: wip * refactor: container config improve * refactor: sidebar done * refactor: sidebar done * refactor: color selector * refactor: saving bar * refactor: saving bar * refactor: arrow bbutton * refactor: improve dark colors * fix: globalLight switch issue * chore: wip * chore: wip * chore: wip * chore: page bg ui/ux * chore: wip * chore: wip * chore: wip * chore: wip * chore: input improve * chore: baseinfo all * chore: city selector wip * chore: wip * chore: wip * chore: logos * chore: social improve * chore: wip * chore: wip * chore: wip * chore: wip * chore: wip * chore: wip * chore: wip * chore: wip * chore: wip * chore: wip * chore: wip * chore: wip * chore: wip * chore: wip * chore: wip * chore: wip * chore: wip * chore: avatar layout * refactor: avatar layout * refactor: topbar wip * refactor: help-center wip * refactor: help-center wip * refactor: help-center wip * refactor: help-center wip * refactor: help-center done * refactor: changelog done * refactor: changelog done * chore: clean up
groupher · Sep 29, 2024 · 45c78a6 · 45c78a6
1 parent eab195d
commit 45c78a6
Show file tree

Hide file tree

Showing 208 changed files with 3,479 additions and 5,712 deletions.
diff --git a/src/app/[community]/dashboard/layout.tsx b/src/app/[community]/dashboard/layout.tsx
@@ -1,29 +1,25 @@
 'use client'
 
-import useMetric from '~/hooks/useMetric'
-
 import CommunityDigest from '~/widgets/CommunityDigest'
 
-import { Wrapper, InnerWrapper, ContentWrapper, FrameWrapper, MainWrapper } from './styles'
+import useSalon from './salon'
 
 import SideMenu from '~/containers/thread/DashboardThread/SideMenu'
 
 const Layout = ({ children }) => {
-  const metric = useMetric()
+  const s = useSalon()
 
   return (
-    <Wrapper>
+    <div className={s.wrapper}>
       <CommunityDigest />
 
-      <InnerWrapper metric={metric}>
-        <ContentWrapper>
-          <FrameWrapper metric={metric}>
-            <SideMenu />
-            <MainWrapper>{children}</MainWrapper>
-          </FrameWrapper>
-        </ContentWrapper>
-      </InnerWrapper>
-    </Wrapper>
+      <div className={s.inner}>
+        <div className={s.content}>
+          <SideMenu />
+          <div className={s.main}>{children}</div>
+        </div>
+      </div>
+    </div>
   )
 }
 

diff --git a/src/app/[community]/dashboard/salon/index.ts b/src/app/[community]/dashboard/salon/index.ts
@@ -0,0 +1,12 @@
+import useTwBelt from '~/hooks/useTwBelt'
+
+export default () => {
+  const { cn } = useTwBelt()
+
+  return {
+    wrapper: cn('column-center justify-start min-h-full w-full'),
+    inner: cn('column-center w-full mt-14'),
+    content: 'row w-full min-h-screen',
+    main: 'ml-28 mt-7 grow bg-transparent',
+  }
+}
diff --git a/src/app/[community]/dashboard/styles/index.ts b/src/app/[community]/dashboard/styles/index.ts
diff --git a/src/app/queries/helper.ts b/src/app/queries/helper.ts
@@ -18,6 +18,7 @@ import type {
   TArticleParams,
 } from '~/spec'
 import { BUILDIN_ALIAS } from '~/const/name'
+import { PAGE_COLOR_DEFAULT } from '~/const/colors'
 import { THREAD } from '~/const/thread'
 import { HCN } from '~/const/name'
 import URL_PARAM from '~/const/url_param'
@@ -256,6 +257,8 @@ export const parseDashboard = (community: TCommunity, pathname: string): TParseD
     headerLinks,
     footerLinks,
     mediaReports,
+    pageBg,
+    pageBgDark,
   } = dashboard
 
   const fieldsObj = removeEmptyValuesFromObject({
@@ -271,6 +274,8 @@ export const parseDashboard = (community: TCommunity, pathname: string): TParseD
     footerLinks,
     moderators,
     mediaReports,
+    pageBg: pageBg || PAGE_COLOR_DEFAULT.light,
+    pageBgDark: pageBgDark || PAGE_COLOR_DEFAULT.dark,
   })
 
   return {

diff --git a/src/containers/editor/TagSettingEditor/PostLayout.tsx b/src/containers/editor/TagSettingEditor/PostLayout.tsx
@@ -53,7 +53,7 @@ const PostListLayout: FC<TProps> = ({ layout, onChange }) => {
           </Row>
         </Block>
         <LayoutTitle $active={layout === POST_LAYOUT.QUORA}>
-          <CheckLabel title="经典" $active={layout === POST_LAYOUT.QUORA} top={15} left={-15} />
+          <CheckLabel title="经典" active={layout === POST_LAYOUT.QUORA} top={4} />
         </LayoutTitle>
       </Layout>
       <Layout onClick={() => onChange(POST_LAYOUT.PH)}>
@@ -91,7 +91,7 @@ const PostListLayout: FC<TProps> = ({ layout, onChange }) => {
           </Row>
         </Block>
         <LayoutTitle $active={layout === POST_LAYOUT.PH}>
-          <CheckLabel title="三段式" $active={layout === POST_LAYOUT.PH} top={15} left={-15} />
+          <CheckLabel title="三段式" active={layout === POST_LAYOUT.PH} top={4} />
         </LayoutTitle>
       </Layout>
 
@@ -110,12 +110,7 @@ const PostListLayout: FC<TProps> = ({ layout, onChange }) => {
           </Row>
         </Block>
         <LayoutTitle $active={layout === POST_LAYOUT.MASONRY}>
-          <CheckLabel
-            title="瀑布流卡片"
-            $active={layout === POST_LAYOUT.MASONRY}
-            top={15}
-            left={-15}
-          />
+          <CheckLabel title="瀑布流卡片" $active={layout === POST_LAYOUT.MASONRY} top={4} />
         </LayoutTitle>
       </Layout>
 
@@ -149,7 +144,7 @@ const PostListLayout: FC<TProps> = ({ layout, onChange }) => {
           </Row>
         </Block>
         <LayoutTitle $active={layout === POST_LAYOUT.MINIMAL}>
-          <CheckLabel title="极简" $active={layout === POST_LAYOUT.MINIMAL} top={15} left={-15} />
+          <CheckLabel title="极简" active={layout === POST_LAYOUT.MINIMAL} top={4} />
         </LayoutTitle>
       </Layout>
 
@@ -172,7 +167,7 @@ const PostListLayout: FC<TProps> = ({ layout, onChange }) => {
           </Row>
         </Block>
         <LayoutTitle $active={layout === POST_LAYOUT.COVER}>
-          <CheckLabel title="封面图" $active={layout === POST_LAYOUT.COVER} top={15} left={-15} />
+          <CheckLabel title="封面图" active={layout === POST_LAYOUT.COVER} top={4} />
         </LayoutTitle>
       </Layout>
     </Wrapper>

diff --git a/src/containers/thread/DashboardThread/BasicInfo/BaseInfo.tsx b/src/containers/thread/DashboardThread/BasicInfo/BaseInfo.tsx
@@ -5,24 +5,26 @@ import { LANGS_OPTIONS } from '~/const/i18n'
 
 import { Br } from '~/widgets/Common'
 import Select from '~/widgets/Select'
+import Input from '~/widgets/Input'
 
 import DangerZone from './DangerZone'
 
 import { SETTING_FIELD } from '../constant'
 import SavingBar from '../SavingBar'
 import useBaseInfo from '../logic/useBaseInfo'
 
-import { Wrapper, Label, Inputer, Hint } from '../styles/basic_info/base_info'
+import useSalon from '../styles/basic_info/base_info'
 
 export default () => {
   const { saving, locale, desc, title, slug, homepage, introduction, isTouched, edit } =
     useBaseInfo()
 
+  const s = useSalon()
   const curLangOption = find((o) => o.value === locale, LANGS_OPTIONS)
 
   return (
-    <Wrapper>
-      <Label>默认语言</Label>
+    <div className={s.wrapper}>
+      <div className={s.label}>默认语言</div>
       <Select
         value={curLangOption}
         options={LANGS_OPTIONS}
@@ -32,33 +34,39 @@ export default () => {
         bottom={10}
         right={8}
       />
-      <Hint>社区界面的默认语言</Hint>
+      <p className={s.hint}>社区界面的默认语言</p>
 
-      <Label>社区域名</Label>
-      <Inputer value={slug} onChange={(v) => edit(v, 'slug')} />
-      <Hint>
+      <div className={s.label}>社区域名</div>
+      <Input value={slug} className={s.input} onChange={(v) => edit(v, 'slug')} />
+      <p className={s.hint}>
         社区的 URL 地址段，填写后可通过 https://groupher.com/[slug] 或 https://[slug].groupher.com
         访问。
-      </Hint>
+      </p>
       <Br bottom={10} />
 
-      <Label>社区名称</Label>
-      <Inputer value={title} onChange={(v) => edit(v, 'title')} />
+      <div className={s.label}>社区名称</div>
+      <Input value={title} className={s.input} onChange={(v) => edit(v, 'title')} />
 
       <Br bottom={10} />
 
-      <Label>官方主页</Label>
-      <Inputer value={homepage} onChange={(v) => edit(v, 'homepage')} />
-      <Hint>您产品或服务的官方地址。</Hint>
+      <div className={s.label}>官方主页</div>
+      <Input value={homepage} className={s.input} onChange={(v) => edit(v, 'homepage')} />
+      <p className={s.hint}>您产品或服务的官方地址。</p>
 
-      <Label>社区简介</Label>
-      <Inputer placeholder="一句话简介" value={desc} onChange={(v) => edit(v, 'desc')} />
+      <div className={s.label}>社区简介</div>
+      <Input
+        placeholder="一句话简介"
+        value={desc}
+        className={s.input}
+        onChange={(v) => edit(v, 'desc')}
+      />
       <Br bottom={15} />
 
-      <Label>关于社区</Label>
-      <Inputer
+      <div className={s.label}>关于社区</div>
+      <Input
         behavior="textarea"
         placeholder="支持 Markdown 语法"
+        className={s.input}
         value={introduction}
         onChange={(v) => edit(v, 'introduction')}
       />
@@ -75,6 +83,6 @@ export default () => {
 
       <Br bottom={45} />
       <DangerZone />
-    </Wrapper>
+    </div>
   )
 }
diff --git a/src/containers/thread/DashboardThread/BasicInfo/DangerZone/index.tsx b/src/containers/thread/DashboardThread/BasicInfo/DangerZone/index.tsx
@@ -1,72 +1,70 @@
 import { type FC, useState } from 'react'
 
+import InfoSVG from '~/icons/Info'
 import Button from '~/widgets/Buttons/Button'
 
 import PublicModal from './PublicModal'
 import ArchiveModal from './ArchiveModal'
 import DeleteModal from './DeleteModal'
 
-import {
-  Wrapper,
-  Item,
-  Intro,
-  DangerTitle,
-  Title,
-  InfoIcon,
-  Desc,
-} from '../../styles/basic_info/danger_zone'
+import useSalon, { cn } from '../../styles/basic_info/danger_zone'
 
 const ActionButton = ({ children, onClick }) => {
   return (
-    <Button type="red" size="small" space={10} top={2} ghost onClick={onClick}>
+    <Button type="red" size="small" space={2} width="w-24" className="-mt-0.5" onClick={onClick}>
       {children}
     </Button>
   )
 }
 
 const DangerZone: FC = () => {
+  const s = useSalon()
+
   const [showPublicModal, setPublicModal] = useState(false)
   const [showArchiveModal, setArchiveModal] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
 
   return (
-    <Wrapper>
-      <DangerTitle>危险操作</DangerTitle>
-      <Item>
-        <Intro>
-          <Title>
-            社区可见性
-            <InfoIcon />
-          </Title>
-          <Desc>当前社区为公开，任何人可以访问</Desc>
-        </Intro>
-        <ActionButton onClick={() => setPublicModal(true)}>隐藏</ActionButton>
-      </Item>
-      <Item>
-        <Intro>
-          <Title>
-            社区归档
-            <InfoIcon />
-          </Title>
-          <Desc>归档后社区将变为只读</Desc>
-        </Intro>
-        <ActionButton onClick={() => setArchiveModal(true)}>归档</ActionButton>
-      </Item>
-      <Item>
-        <Intro>
-          <Title>
-            删除社区
-            <InfoIcon />
-          </Title>
-          <Desc>会关联删除所有帖子评论等，不可逆。</Desc>
-        </Intro>
+    <div className={s.wrapper}>
+      <div className={cn(s.divider, 'mb-10')} />
+      <h3 className={s.dangerTitle}>危险操作</h3>
+      <div className={s.item}>
+        <h3 className={s.title}>
+          社区可见性
+          <InfoSVG className={s.icon} />
+          <div className="grow" />
+          <ActionButton onClick={() => setPublicModal(true)}>隐藏</ActionButton>
+        </h3>
+        <p className={s.desc}>当前社区为公开，任何人可以访问</p>
+      </div>
+
+      <div className={cn(s.divider, 'mt-4 mb-4')} />
+
+      <div className={s.item}>
+        <h3 className={s.title}>
+          社区归档
+          <InfoSVG className={s.icon} />
+          <div className="grow" />
+          <ActionButton onClick={() => setArchiveModal(true)}>归档</ActionButton>
+        </h3>
+        <p className={s.desc}>归档后社区将变为只读</p>
+      </div>
+
+      <div className={cn(s.divider, 'mt-4 mb-4')} />
 
-        <ActionButton onClick={() => setShowDeleteModal(true)}>删除</ActionButton>
-      </Item>
+      <div className={s.item}>
+        <h3 className={s.title}>
+          删除社区
+          <InfoSVG className={s.icon} />
+          <div className="grow" />
+          <ActionButton onClick={() => setShowDeleteModal(true)}>删除</ActionButton>
+        </h3>
+        <p className={s.desc}>会关联删除所有帖子评论等，删除后无法恢复。</p>
+      </div>
       <PublicModal show={showPublicModal} onClose={() => setPublicModal(false)} />
       <ArchiveModal show={showArchiveModal} onClose={() => setArchiveModal(false)} />
       <DeleteModal show={showDeleteModal} onClose={() => setShowDeleteModal(false)} />
-    </Wrapper>
+    </div>
   )
 }