From 0385317db2c44fea5f459d711636104b2918be6a Mon Sep 17 00:00:00 2001 From: fantasticit Date: Thu, 30 Jun 2022 15:36:39 +0800 Subject: [PATCH] client: update ui --- .../organization/public-switcher/index.tsx | 113 +-------- .../organization/switcher/index.tsx | 197 ++++++++------- .../client/src/illustrations/team-work.tsx | 229 ++++++++++++++++++ packages/client/src/pages/app/index.tsx | 4 +- .../org/[organizationId]/setting/index.tsx | 10 +- .../client/src/pages/app/org/create/index.tsx | 2 +- packages/client/src/pages/index.module.scss | 23 ++ packages/client/src/pages/index.tsx | 34 +-- 8 files changed, 387 insertions(+), 225 deletions(-) create mode 100644 packages/client/src/illustrations/team-work.tsx diff --git a/packages/client/src/components/organization/public-switcher/index.tsx b/packages/client/src/components/organization/public-switcher/index.tsx index a2b27c9c..f9362af6 100644 --- a/packages/client/src/components/organization/public-switcher/index.tsx +++ b/packages/client/src/components/organization/public-switcher/index.tsx @@ -1,123 +1,22 @@ -import { IconAppCenter, IconApps, IconSmallTriangleDown } from '@douyinfe/semi-icons'; -import { Avatar, Button, Dropdown, Space, Typography } from '@douyinfe/semi-ui'; -import { DataRender } from 'components/data-render'; +import { Space } from '@douyinfe/semi-ui'; import { LogoImage, LogoText } from 'components/logo'; -import { useUserOrganizations } from 'data/organization'; import { useUser } from 'data/user'; -import Link from 'next/link'; +import { useWindowSize } from 'hooks/use-window-size'; +import { UserOrganizationsSwitcher } from '../switcher'; import styles from './index.module.scss'; -const { Text, Paragraph } = Typography; - -const Inner = () => { - const { - data: userOrganizations, - loading: userOrganizationsLoading, - error: userOrganizationsError, - } = useUserOrganizations(); - - return ( - { - return ( - - {userOrganizations.length ? ( - <> - {userOrganizations.map((org) => { - return ( - - - - - - {org.name} - - - - - ); - })} - - - ) : null} - - - - - - - - - 前往广场 - - - - - - - - - - - - - - - 新建组织 - - - - - - - ); - }} - /> - } - > - + = ({ organizationId }) => { const { query = {} } = useRouter(); const { tab = 'base' } = query as { @@ -28,7 +31,12 @@ const Page: NextPage = ({ organizationId }) => { return ( -
+
+
+ + 组织设置 + +
diff --git a/packages/client/src/pages/app/org/create/index.tsx b/packages/client/src/pages/app/org/create/index.tsx index e81a7908..5bf8ab59 100644 --- a/packages/client/src/pages/app/org/create/index.tsx +++ b/packages/client/src/pages/app/org/create/index.tsx @@ -49,7 +49,7 @@ const Page: React.FC = () => { return (
-
+
新建组织 diff --git a/packages/client/src/pages/index.module.scss b/packages/client/src/pages/index.module.scss index cd7bf1da..ba021ccd 100644 --- a/packages/client/src/pages/index.module.scss +++ b/packages/client/src/pages/index.module.scss @@ -1,3 +1,26 @@ .wrap { + z-index: 1; display: flex; + width: 100%; + padding: 10vh 32px 48px; + align-items: center; + flex-direction: row; + + .hero { + max-width: 53%; + min-width: 53%; + margin-left: 48px; + } +} + +@media (max-width: 768px) { + .wrap { + flex-direction: column; + + .hero { + max-width: 100%; + min-width: 100%; + margin-left: 0; + } + } } diff --git a/packages/client/src/pages/index.tsx b/packages/client/src/pages/index.tsx index 00fb3360..e894fc07 100644 --- a/packages/client/src/pages/index.tsx +++ b/packages/client/src/pages/index.tsx @@ -1,6 +1,7 @@ import { Button, Typography } from '@douyinfe/semi-ui'; import { Seo } from 'components/seo'; import { toLogin, useUser } from 'data/user'; +import { TeamWorkIllustration } from 'illustrations/team-work'; import { SingleColumnLayout } from 'layouts/single-column'; import type { NextPage } from 'next'; import Router from 'next/router'; @@ -30,22 +31,27 @@ const Page: NextPage = () => {
-
-
- 云策文档 - - 云策文档是一款开源知识管理工具。通过独立的知识库空间，结构化地组织在线协作文档，实现知识的积累与沉淀，促进知识的复用与流通。 - -
-
- - +
+
+
+ 云策文档 + + 云策文档是一款开源知识管理工具。通过独立的知识库空间，结构化地组织在线协作文档，实现知识的积累与沉淀，促进知识的复用与流通。 + +
+
+ + +
+
+ +