From 5f05715ed162badc621b1bccb0b10ff1babaf177 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Thu, 23 Jun 2022 18:10:14 +0800
Subject: [PATCH] client: fix style

---
 .../components/wiki/tocs/index.module.scss    | 64 +++++++++++++++++++
 .../client/src/components/wiki/tocs/index.tsx |  4 +-
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/wiki/tocs/index.module.scss b/packages/client/src/components/wiki/tocs/index.module.scss
index f5ccf21b..d232e280 100644
--- a/packages/client/src/components/wiki/tocs/index.module.scss
+++ b/packages/client/src/components/wiki/tocs/index.module.scss
@@ -13,6 +13,12 @@
   justify-content: space-between;
   align-items: center;
 
+  > span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   &:hover {
     background-color: var(--semi-color-fill-0);
   }
@@ -97,3 +103,61 @@
     opacity: 1;
   }
 }
+
+.navItemWrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--semi-color-text-0);
+
+  &.hoverable {
+    &:hover {
+      color: var(--semi-color-text-0);
+      background-color: var(--semi-color-fill-0);
+    }
+  }
+
+  &.isActive {
+    font-weight: 600;
+    color: var(--semi-color-primary);
+    background-color: var(--semi-color-primary-light-default);
+  }
+
+  .navItem {
+    display: flex;
+    width: 100%;
+    padding: 12px 16px;
+    font-size: 14px;
+    cursor: pointer;
+    border-radius: var(--semi-border-radius-small);
+    align-items: center;
+
+    > span {
+      display: flex;
+      align-items: center;
+    }
+
+    .icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 24px;
+      min-height: 24px;
+      margin: 0 6px 0 0;
+
+      :global {
+        .semi-icon-default {
+          font-size: 24px;
+        }
+      }
+    }
+
+    .title {
+      overflow: hidden;
+      color: inherit;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+    }
+  }
+}
diff --git a/packages/client/src/components/wiki/tocs/index.tsx b/packages/client/src/components/wiki/tocs/index.tsx
index 0bfeb8a7..b17708f5 100644
--- a/packages/client/src/components/wiki/tocs/index.tsx
+++ b/packages/client/src/components/wiki/tocs/index.tsx
@@ -109,7 +109,9 @@ export const WikiTocs: React.FC<IProps> = ({
                               >
                                 {wiki.name.charAt(0)}
                               </Avatar>
-                              <Text strong>{wiki.name}</Text>
+                              <Text strong ellipsis={{ rows: 1 }}>
+                                {wiki.name}
+                              </Text>
                             </span>
                           </a>
                         </Link>