feat(dashboard): basic UI/UX (#1330)

* feat(sidebar): basic ui

* refactor: setup basic parts

Author: mydearxym

src/containers/content/CommunityContent/ThreadContent.tsx

@@ -10,6 +10,7 @@ import ChangeThread from '@/containers//thread/ChangelogThread'
 import CperMapThread from '@/containers/thread/CperMapThread'
 import AboutThread from '@/containers/thread/AboutThread'
 import HelpThread from '@/containers/thread/HelpThread'
+import DashboardThread from '@/containers/thread/DashboardThread'
 
 import WipThread from './WipThread'
 
@@ -63,6 +64,10 @@ const ThreadContent: FC<TProps> = ({ thread }) => {
       return <HelpThread />
     }
 
+    case THREAD.DASHBOARD: {
+      return <DashboardThread />
+    }
+
     default:
       return <ArticlesThread />
   }

src/containers/thread/DashboardThread/Admin/index.tsx

@@ -0,0 +1,17 @@
+import { FC, memo } from 'react'
+
+import { Wrapper } from '../styles/admin'
+
+type TProps = {
+  testid?: string
+}
+
+const Admin: FC<TProps> = ({ testid = 'admin' }) => {
+  return (
+    <Wrapper>
+      <div>Admin</div>
+    </Wrapper>
+  )
+}
+
+export default memo(Admin)

src/containers/thread/DashboardThread/BasicInfo/index.tsx

@@ -0,0 +1,17 @@
+import { FC, memo } from 'react'
+
+import { Wrapper } from '../styles/basic_info'
+
+type TProps = {
+  testid?: string
+}
+
+const BasicInfo: FC<TProps> = ({ testid = 'BasicInfo' }) => {
+  return (
+    <Wrapper>
+      <div>BasicInfo</div>
+    </Wrapper>
+  )
+}
+
+export default memo(BasicInfo)

src/containers/thread/DashboardThread/Domain/index.tsx

@@ -0,0 +1,17 @@
+import { FC, memo } from 'react'
+
+import { Wrapper } from '../styles/domain'
+
+type TProps = {
+  testid?: string
+}
+
+const Domain: FC<TProps> = ({ testid = 'domain' }) => {
+  return (
+    <Wrapper>
+      <div>Domain</div>
+    </Wrapper>
+  )
+}
+
+export default memo(Domain)

src/containers/thread/DashboardThread/Sidebar.tsx

@@ -0,0 +1,83 @@
+import { FC, memo } from 'react'
+
+import { Br } from '@/widgets/Common'
+
+import { TAB } from './constant'
+import type { TTab } from './spec'
+
+import { Wrapper, Folder, Icon, Title, Item } from './styles/sidebar'
+import { tabOnChange } from './logic'
+
+type TProps = {
+  curTab: TTab
+}
+
+const Sidebar: FC<TProps> = ({ curTab }) => {
+  return (
+    <Wrapper>
+      <Folder>
+        <Icon.Basic />
+        <Title>基础设置</Title>
+      </Folder>
+      <Item
+        $active={TAB.BASIC_INFO === curTab}
+        onClick={() => tabOnChange(TAB.BASIC_INFO)}
+      >
+        基本信息
+      </Item>
+      <Item $active={TAB.UI === curTab} onClick={() => tabOnChange(TAB.UI)}>
+        外观样式
+      </Item>
+      <Item
+        $active={TAB.THREADS === curTab}
+        onClick={() => tabOnChange(TAB.THREADS)}
+      >
+        社区板块
+      </Item>
+      <Item
+        $active={TAB.ADMINS === curTab}
+        onClick={() => tabOnChange(TAB.ADMINS)}
+      >
+        管理员
+      </Item>
+
+      <Br top={30} />
+      <Folder>
+        <Icon.Analysis />
+        <Title>统计分析</Title>
+      </Folder>
+      <Item>--</Item>
+      <Br top={30} />
+      <Folder>
+        <Icon.Management />
+        <Title>内容管理</Title>
+      </Folder>
+      <Item>--</Item>
+      <Br top={30} />
+      <Folder>
+        <Icon.Bind />
+        <Title>绑定集成</Title>
+      </Folder>
+      <Item
+        $active={TAB.DOMAIN === curTab}
+        onClick={() => tabOnChange(TAB.DOMAIN)}
+      >
+        域名
+      </Item>
+      <Item
+        $active={TAB.THIRD_PART === curTab}
+        onClick={() => tabOnChange(TAB.THIRD_PART)}
+      >
+        外部应用
+      </Item>
+      <Item
+        $active={TAB.WIDGETS === curTab}
+        onClick={() => tabOnChange(TAB.WIDGETS)}
+      >
+        网站组件
+      </Item>
+    </Wrapper>
+  )
+}
+
+export default memo(Sidebar)

src/containers/thread/DashboardThread/ThirdPart/index.tsx

@@ -0,0 +1,17 @@
+import { FC, memo } from 'react'
+
+import { Wrapper } from '../styles/third_part'
+
+type TProps = {
+  testid?: string
+}
+
+const ThirdPart: FC<TProps> = ({ testid = 'third-part' }) => {
+  return (
+    <Wrapper>
+      <div>ThirdPart</div>
+    </Wrapper>
+  )
+}
+
+export default memo(ThirdPart)

src/containers/thread/DashboardThread/Threads/index.tsx

@@ -0,0 +1,17 @@
+import { FC, memo } from 'react'
+
+import { Wrapper } from '../styles/threads'
+
+type TProps = {
+  testid?: string
+}
+
+const Threads: FC<TProps> = ({ testid = 'threads' }) => {
+  return (
+    <Wrapper>
+      <div>Threads</div>
+    </Wrapper>
+  )
+}
+
+export default memo(Threads)

src/containers/thread/DashboardThread/UI/index.tsx

@@ -0,0 +1,17 @@
+import { FC, memo } from 'react'
+
+import { Wrapper } from '../styles/ui'
+
+type TProps = {
+  testid?: string
+}
+
+const UI: FC<TProps> = ({ testid = 'ui' }) => {
+  return (
+    <Wrapper>
+      <div>UI</div>
+    </Wrapper>
+  )
+}
+
+export default memo(UI)

src/containers/thread/DashboardThread/Widgets/index.tsx

@@ -0,0 +1,17 @@
+import { FC, memo } from 'react'
+
+import { Wrapper } from '../styles/widgets'
+
+type TProps = {
+  testid?: string
+}
+
+const Widgets: FC<TProps> = ({ testid = 'widgets' }) => {
+  return (
+    <Wrapper>
+      <div>Widgets</div>
+    </Wrapper>
+  )
+}
+
+export default memo(Widgets)

src/containers/thread/DashboardThread/constant.ts

@@ -0,0 +1,14 @@
+import type { TTab } from './spec'
+
+export const TAB = {
+  OVERVIEW: 'overview',
+  BASIC_INFO: 'basic_info',
+  UI: 'ui',
+  THREADS: 'threads',
+  DOMAIN: 'domain',
+  THIRD_PART: 'third_part',
+  ADMINS: 'admins',
+  WIDGETS: 'widgets',
+} as Record<Uppercase<TTab>, TTab>
+
+export const holder = 1