From 860e2471e5cff7ae1f76304bf6feb83f4a86d865 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Thu, 23 Jun 2022 18:18:54 +0800
Subject: [PATCH] client: update tocs style

---
 .../components/wiki/tocs/index.module.scss    |  10 +
 .../client/src/components/wiki/tocs/index.tsx | 484 +++++++++---------
 .../src/components/wiki/tocs/public.tsx       | 152 +++---
 3 files changed, 332 insertions(+), 314 deletions(-)

diff --git a/packages/client/src/components/wiki/tocs/index.module.scss b/packages/client/src/components/wiki/tocs/index.module.scss
index d232e280..98a8c3d8 100644
--- a/packages/client/src/components/wiki/tocs/index.module.scss
+++ b/packages/client/src/components/wiki/tocs/index.module.scss
@@ -3,6 +3,16 @@
   height: 100%;
   padding-top: 12px;
   overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+
+  overflow: hidden;
+
+  > main {
+    flex: 1;
+    overflow: auto;
+  }
 }
 
 .titleWrap {
diff --git a/packages/client/src/components/wiki/tocs/index.tsx b/packages/client/src/components/wiki/tocs/index.tsx
index b17708f5..fc0e4182 100644
--- a/packages/client/src/components/wiki/tocs/index.tsx
+++ b/packages/client/src/components/wiki/tocs/index.tsx
@@ -48,252 +48,256 @@ export const WikiTocs: React.FC<IProps> = ({
 
   return (
     <div className={styles.wrap}>
-      <DataRender
-        loading={wikiLoading}
-        loadingContent={
-          <div className={styles.titleWrap}>
-            <Skeleton
-              placeholder={
-                <div style={{ display: 'flex' }}>
-                  <Skeleton.Avatar
-                    size="small"
-                    style={{
-                      marginRight: 8,
-                      width: 24,
-                      height: 24,
-                      borderRadius: 4,
-                    }}
-                  ></Skeleton.Avatar>
-                  <Skeleton.Title style={{ width: 120 }} />
-                </div>
-              }
-              loading={true}
-            />
-          </div>
-        }
-        error={wikiError}
-        normalContent={() => (
-          <Dropdown
-            trigger={'click'}
-            position="bottomRight"
-            render={
-              <Dropdown.Menu style={{ width: 180 }}>
-                {(starWikis || [])
-                  .filter((wiki) => wiki.id !== wikiId)
-                  .map((wiki) => {
-                    return (
-                      <Dropdown.Item key={wiki.id}>
-                        <Link
-                          href={{
-                            pathname: `/wiki/[wikiId]`,
-                            query: { wikiId: wiki.id },
-                          }}
-                        >
-                          <a
-                            style={{
-                              display: 'flex',
-                              width: '100%',
-                            }}
-                          >
-                            <span>
-                              <Avatar
-                                shape="square"
-                                size="small"
-                                src={wiki.avatar}
-                                style={{
-                                  marginRight: 8,
-                                  width: 24,
-                                  height: 24,
-                                  borderRadius: 4,
-                                }}
-                              >
-                                {wiki.name.charAt(0)}
-                              </Avatar>
-                              <Text strong ellipsis={{ rows: 1 }}>
-                                {wiki.name}
-                              </Text>
-                            </span>
-                          </a>
-                        </Link>
-                      </Dropdown.Item>
-                    );
-                  })}
-              </Dropdown.Menu>
-            }
-          >
+      <header>
+        <DataRender
+          loading={wikiLoading}
+          loadingContent={
             <div className={styles.titleWrap}>
-              <span>
-                <Avatar
-                  shape="square"
-                  size="small"
-                  src={wiki.avatar}
-                  style={{
-                    marginRight: 8,
-                    width: 24,
-                    height: 24,
-                    borderRadius: 4,
-                  }}
-                >
-                  {wiki.name.charAt(0)}
-                </Avatar>
-                <Text strong>{wiki.name}</Text>
-              </span>
-              <IconSmallTriangleDown />
-            </div>
-          </Dropdown>
-        )}
-      />
-
-      <DataRender
-        loading={wikiLoading}
-        loadingContent={
-          <div className={styles.titleWrap}>
-            <Skeleton
-              placeholder={
-                <div style={{ display: 'flex' }}>
-                  <Skeleton.Avatar
-                    size="small"
-                    style={{
-                      marginRight: 8,
-                      width: 24,
-                      height: 24,
-                      borderRadius: 4,
-                    }}
-                  ></Skeleton.Avatar>
-                  <Skeleton.Title style={{ width: 120 }} />
-                </div>
-              }
-              loading={true}
-            />
-          </div>
-        }
-        error={wikiError}
-        normalContent={() => (
-          <div className={cls(styles.linkWrap, pathname === '/wiki/[wikiId]' && styles.isActive)}>
-            <Link
-              href={{
-                pathname: `/wiki/[wikiId]`,
-                query: { wikiId },
-              }}
-            >
-              <a>
-                <IconOverview style={{ fontSize: '1em' }} />
-                <span>主页</span>
-              </a>
-            </Link>
-          </div>
-        )}
-      />
-
-      <DataRender
-        loading={wikiLoading}
-        loadingContent={
-          <div className={styles.titleWrap}>
-            <Skeleton
-              placeholder={
-                <div style={{ display: 'flex' }}>
-                  <Skeleton.Avatar
-                    size="small"
-                    style={{
-                      marginRight: 8,
-                      width: 24,
-                      height: 24,
-                      borderRadius: 4,
-                    }}
-                  ></Skeleton.Avatar>
-                  <Skeleton.Title style={{ width: 120 }} />
-                </div>
-              }
-              loading={true}
-            />
-          </div>
-        }
-        error={wikiError}
-        normalContent={() => (
-          <div className={cls(styles.linkWrap, pathname === '/wiki/[wikiId]/setting' && styles.isActive)}>
-            <Link
-              href={{
-                pathname: `/wiki/[wikiId]/setting`,
-                query: { tab: 'base', wikiId },
-              }}
-            >
-              <a>
-                <IconSetting style={{ fontSize: '1em' }} />
-                <span>设置</span>
-              </a>
-            </Link>
-          </div>
-        )}
-      />
-
-      <div className={styles.treeWrap}>
-        <DataRender
-          loading={starDocumentsLoading}
-          loadingContent={<Skeleton.Title style={{ width: '100%' }} />}
-          error={starDocumentsError}
-          normalContent={() => (
-            <div className={styles.title}>
-              <Text type="tertiary" size="small">
-                已加星标
-              </Text>
-            </div>
-          )}
-        />
-        <DataRender
-          loading={starDocumentsLoading}
-          loadingContent={<div>1</div>}
-          error={starDocumentsError}
-          normalContent={() => (
-            <Tree
-              data={starDocuments || []}
-              docAsLink={docAsLink}
-              getDocLink={getDocLink}
-              parentIds={parentIds}
-              activeId={documentId}
-            />
-          )}
-        />
-      </div>
-
-      <div className={styles.treeWrap}>
-        <DataRender
-          loading={tocsLoading}
-          loadingContent={<Skeleton.Title style={{ width: '100%' }} />}
-          error={wikiError}
-          normalContent={() => (
-            <div className={styles.title}>
-              <Text type="tertiary" size="small">
-                文档集
-              </Text>
-              <Button
-                style={{ fontSize: '1em' }}
-                theme="borderless"
-                type="tertiary"
-                icon={<IconPlus style={{ fontSize: '1em' }} />}
-                size="small"
-                onClick={() => {
-                  triggerCreateDocument({ wikiId: wiki.id, documentId: null });
-                }}
+              <Skeleton
+                placeholder={
+                  <div style={{ display: 'flex' }}>
+                    <Skeleton.Avatar
+                      size="small"
+                      style={{
+                        marginRight: 8,
+                        width: 24,
+                        height: 24,
+                        borderRadius: 4,
+                      }}
+                    ></Skeleton.Avatar>
+                    <Skeleton.Title style={{ width: 120 }} />
+                  </div>
+                }
+                loading={true}
               />
             </div>
-          )}
-        />
-        <DataRender
-          loading={tocsLoading}
-          loadingContent={<div>1</div>}
-          error={tocsError}
+          }
+          error={wikiError}
           normalContent={() => (
-            <Tree
-              needAddDocument
-              data={tocs || []}
-              docAsLink={docAsLink}
-              getDocLink={getDocLink}
-              parentIds={parentIds}
-              activeId={documentId}
-            />
+            <Dropdown
+              trigger={'click'}
+              position="bottomRight"
+              render={
+                <Dropdown.Menu style={{ width: 180 }}>
+                  {(starWikis || [])
+                    .filter((wiki) => wiki.id !== wikiId)
+                    .map((wiki) => {
+                      return (
+                        <Dropdown.Item key={wiki.id}>
+                          <Link
+                            href={{
+                              pathname: `/wiki/[wikiId]`,
+                              query: { wikiId: wiki.id },
+                            }}
+                          >
+                            <a
+                              style={{
+                                display: 'flex',
+                                width: '100%',
+                              }}
+                            >
+                              <span>
+                                <Avatar
+                                  shape="square"
+                                  size="small"
+                                  src={wiki.avatar}
+                                  style={{
+                                    marginRight: 8,
+                                    width: 24,
+                                    height: 24,
+                                    borderRadius: 4,
+                                  }}
+                                >
+                                  {wiki.name.charAt(0)}
+                                </Avatar>
+                                <Text strong ellipsis={{ rows: 1 }}>
+                                  {wiki.name}
+                                </Text>
+                              </span>
+                            </a>
+                          </Link>
+                        </Dropdown.Item>
+                      );
+                    })}
+                </Dropdown.Menu>
+              }
+            >
+              <div className={styles.titleWrap}>
+                <span>
+                  <Avatar
+                    shape="square"
+                    size="small"
+                    src={wiki.avatar}
+                    style={{
+                      marginRight: 8,
+                      width: 24,
+                      height: 24,
+                      borderRadius: 4,
+                    }}
+                  >
+                    {wiki.name.charAt(0)}
+                  </Avatar>
+                  <Text strong>{wiki.name}</Text>
+                </span>
+                <IconSmallTriangleDown />
+              </div>
+            </Dropdown>
           )}
         />
-      </div>
+
+        <DataRender
+          loading={wikiLoading}
+          loadingContent={
+            <div className={styles.titleWrap}>
+              <Skeleton
+                placeholder={
+                  <div style={{ display: 'flex' }}>
+                    <Skeleton.Avatar
+                      size="small"
+                      style={{
+                        marginRight: 8,
+                        width: 24,
+                        height: 24,
+                        borderRadius: 4,
+                      }}
+                    ></Skeleton.Avatar>
+                    <Skeleton.Title style={{ width: 120 }} />
+                  </div>
+                }
+                loading={true}
+              />
+            </div>
+          }
+          error={wikiError}
+          normalContent={() => (
+            <div className={cls(styles.linkWrap, pathname === '/wiki/[wikiId]' && styles.isActive)}>
+              <Link
+                href={{
+                  pathname: `/wiki/[wikiId]`,
+                  query: { wikiId },
+                }}
+              >
+                <a>
+                  <IconOverview style={{ fontSize: '1em' }} />
+                  <span>主页</span>
+                </a>
+              </Link>
+            </div>
+          )}
+        />
+
+        <DataRender
+          loading={wikiLoading}
+          loadingContent={
+            <div className={styles.titleWrap}>
+              <Skeleton
+                placeholder={
+                  <div style={{ display: 'flex' }}>
+                    <Skeleton.Avatar
+                      size="small"
+                      style={{
+                        marginRight: 8,
+                        width: 24,
+                        height: 24,
+                        borderRadius: 4,
+                      }}
+                    ></Skeleton.Avatar>
+                    <Skeleton.Title style={{ width: 120 }} />
+                  </div>
+                }
+                loading={true}
+              />
+            </div>
+          }
+          error={wikiError}
+          normalContent={() => (
+            <div className={cls(styles.linkWrap, pathname === '/wiki/[wikiId]/setting' && styles.isActive)}>
+              <Link
+                href={{
+                  pathname: `/wiki/[wikiId]/setting`,
+                  query: { tab: 'base', wikiId },
+                }}
+              >
+                <a>
+                  <IconSetting style={{ fontSize: '1em' }} />
+                  <span>设置</span>
+                </a>
+              </Link>
+            </div>
+          )}
+        />
+      </header>
+
+      <main>
+        <div className={styles.treeWrap}>
+          <DataRender
+            loading={starDocumentsLoading}
+            loadingContent={<Skeleton.Title style={{ width: '100%' }} />}
+            error={starDocumentsError}
+            normalContent={() => (
+              <div className={styles.title}>
+                <Text type="tertiary" size="small">
+                  已加星标
+                </Text>
+              </div>
+            )}
+          />
+          <DataRender
+            loading={starDocumentsLoading}
+            loadingContent={<div>1</div>}
+            error={starDocumentsError}
+            normalContent={() => (
+              <Tree
+                data={starDocuments || []}
+                docAsLink={docAsLink}
+                getDocLink={getDocLink}
+                parentIds={parentIds}
+                activeId={documentId}
+              />
+            )}
+          />
+        </div>
+
+        <div className={styles.treeWrap}>
+          <DataRender
+            loading={tocsLoading}
+            loadingContent={<Skeleton.Title style={{ width: '100%' }} />}
+            error={wikiError}
+            normalContent={() => (
+              <div className={styles.title}>
+                <Text type="tertiary" size="small">
+                  文档集
+                </Text>
+                <Button
+                  style={{ fontSize: '1em' }}
+                  theme="borderless"
+                  type="tertiary"
+                  icon={<IconPlus style={{ fontSize: '1em' }} />}
+                  size="small"
+                  onClick={() => {
+                    triggerCreateDocument({ wikiId: wiki.id, documentId: null });
+                  }}
+                />
+              </div>
+            )}
+          />
+          <DataRender
+            loading={tocsLoading}
+            loadingContent={<div>1</div>}
+            error={tocsError}
+            normalContent={() => (
+              <Tree
+                needAddDocument
+                data={tocs || []}
+                docAsLink={docAsLink}
+                getDocLink={getDocLink}
+                parentIds={parentIds}
+                activeId={documentId}
+              />
+            )}
+          />
+        </div>
+      </main>
     </div>
   );
 };
diff --git a/packages/client/src/components/wiki/tocs/public.tsx b/packages/client/src/components/wiki/tocs/public.tsx
index b77daa97..986cc40e 100644
--- a/packages/client/src/components/wiki/tocs/public.tsx
+++ b/packages/client/src/components/wiki/tocs/public.tsx
@@ -43,72 +43,17 @@ export const WikiPublicTocs: React.FC<IProps> = ({
 
   return (
     <div className={styles.wrap}>
-      <div className={styles.navItemWrap}>
-        <div className={styles.navItem}>
-          <Space>
-            <LogoImage /> <LogoText />
-          </Space>
+      <header>
+        <div className={styles.navItemWrap}>
+          <div className={styles.navItem}>
+            <Space>
+              <LogoImage /> <LogoText />
+            </Space>
+          </div>
         </div>
-      </div>
 
-      <DataRender
-        loading={wikiLoading}
-        loadingContent={
-          <NavItem
-            icon={
-              <Skeleton.Avatar
-                size="small"
-                style={{
-                  marginRight: 8,
-                  width: 24,
-                  height: 24,
-                  borderRadius: 4,
-                }}
-              ></Skeleton.Avatar>
-            }
-            text={<Skeleton.Title style={{ width: 120 }} />}
-          />
-        }
-        error={wikiError}
-        normalContent={() => (
-          <>
-            <Seo title={wiki.name + ' - ' + pageTitle} />
-            <NavItem
-              icon={
-                <Avatar
-                  shape="square"
-                  size="small"
-                  src={wiki.avatar}
-                  style={{
-                    marginRight: 8,
-                    width: 24,
-                    height: 24,
-                    borderRadius: 4,
-                  }}
-                >
-                  {wiki.name.charAt(0)}
-                </Avatar>
-              }
-              text={<Text strong>{wiki.name}</Text>}
-              hoverable={false}
-            />
-          </>
-        )}
-      />
-
-      <NavItem
-        icon={<IconOverview />}
-        text={'概述'}
-        href={{
-          pathname: `/share/wiki/[wikiId]`,
-          query: { wikiId },
-        }}
-        isActive={pathname === '/share/wiki/[wikiId]'}
-      />
-
-      <div className={styles.treeWrap} style={{ marginTop: 12 }}>
         <DataRender
-          loading={tocsLoading}
+          loading={wikiLoading}
           loadingContent={
             <NavItem
               icon={
@@ -123,22 +68,81 @@ export const WikiPublicTocs: React.FC<IProps> = ({
                 ></Skeleton.Avatar>
               }
               text={<Skeleton.Title style={{ width: 120 }} />}
-              rightNode={<IconPlus />}
             />
           }
-          error={tocsError}
+          error={wikiError}
           normalContent={() => (
-            <Tree
-              data={tocs || []}
-              docAsLink={docAsLink}
-              getDocLink={getDocLink}
-              parentIds={parentIds}
-              activeId={documentId}
-              isShareMode
-            />
+            <>
+              <Seo title={wiki.name + ' - ' + pageTitle} />
+              <NavItem
+                icon={
+                  <Avatar
+                    shape="square"
+                    size="small"
+                    src={wiki.avatar}
+                    style={{
+                      marginRight: 8,
+                      width: 24,
+                      height: 24,
+                      borderRadius: 4,
+                    }}
+                  >
+                    {wiki.name.charAt(0)}
+                  </Avatar>
+                }
+                text={<Text strong>{wiki.name}</Text>}
+                hoverable={false}
+              />
+            </>
           )}
         />
-      </div>
+
+        <NavItem
+          icon={<IconOverview />}
+          text={'概述'}
+          href={{
+            pathname: `/share/wiki/[wikiId]`,
+            query: { wikiId },
+          }}
+          isActive={pathname === '/share/wiki/[wikiId]'}
+        />
+      </header>
+
+      <main>
+        <div className={styles.treeWrap}>
+          <DataRender
+            loading={tocsLoading}
+            loadingContent={
+              <NavItem
+                icon={
+                  <Skeleton.Avatar
+                    size="small"
+                    style={{
+                      marginRight: 8,
+                      width: 24,
+                      height: 24,
+                      borderRadius: 4,
+                    }}
+                  ></Skeleton.Avatar>
+                }
+                text={<Skeleton.Title style={{ width: 120 }} />}
+                rightNode={<IconPlus />}
+              />
+            }
+            error={tocsError}
+            normalContent={() => (
+              <Tree
+                data={tocs || []}
+                docAsLink={docAsLink}
+                getDocLink={getDocLink}
+                parentIds={parentIds}
+                activeId={documentId}
+                isShareMode
+              />
+            )}
+          />
+        </div>
+      </main>
     </div>
   );
 };