fix: toc scroller and mask

Signed-off-by: Innei <[email protected]>

Author: Innei

src/atoms/owner.ts

@@ -55,7 +55,6 @@ export const login = async (username?: string, password?: string) => {
   }
 
   await refreshToken()
-  toast(`欢迎回来，${jotaiStore.get(ownerAtom)?.name}`, 'success')
 
   return true
 }

src/components/modules/toc/TocFAB.tsx

@@ -34,7 +34,7 @@ export const TocFAB = () => {
       content: () => (
         <TocTree
           $headings={$headings!}
-          className="space-y-3 [&>li]:py-1"
+          className="max-h-full space-y-3 overflow-y-auto [&>li]:py-1"
           onItemClick={() => {
             dispose()
           }}

src/components/ui/sheet/Sheet.tsx

@@ -87,7 +87,7 @@ export const PresentSheet: FC<PropsWithChildren<PresentSheetProps>> = (
           style={{
             zIndex: contentZIndex,
           }}
-          className="fixed inset-x-0 bottom-0 mt-24 flex max-h-[95vh] flex-col rounded-t-[10px] bg-base-100 p-4"
+          className="fixed inset-x-0 bottom-0 flex max-h-[calc(100svh-5rem)] flex-col rounded-t-[10px] bg-base-100 p-4"
         >
           {dismissible && (
             <div className="mx-auto mb-8 h-1.5 w-12 shrink-0 rounded-full bg-zinc-300 dark:bg-neutral-800" />

src/styles/index.css

@@ -9,3 +9,4 @@
 
 @import './theme.css';
 @import './webfont.css';
+@import './mask.css';

src/styles/mask.css

@@ -0,0 +1,54 @@
+.mask-both {
+  mask-image: linear-gradient(
+    rgba(255, 255, 255, 0) 0%,
+    rgb(255, 255, 255) 20px,
+    rgb(255, 255, 255) calc(100% - 20px),
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+.mask-both-lg {
+  mask-image: linear-gradient(
+    rgba(255, 255, 255, 0) 0%,
+    rgb(255, 255, 255) 50px,
+    rgb(255, 255, 255) calc(100% - 50px),
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+.mask-b {
+  mask-image: linear-gradient(
+    rgb(255, 255, 255) calc(100% - 20px),
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+.mask-b-lg {
+  mask-image: linear-gradient(
+    rgb(255, 255, 255) calc(100% - 50px),
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+.mask-t {
+  mask-image: linear-gradient(
+    rgba(255, 255, 255, 0) 0%,
+    rgb(255, 255, 255) 20px
+  );
+}
+
+.mask-t-lg {
+  mask-image: linear-gradient(
+    rgba(255, 255, 255, 0) 0%,
+    rgb(255, 255, 255) 50px
+  );
+}
+
+.mask-horizontal {
+  mask-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 1) 14%,
+    rgba(255, 255, 255, 1) 86%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}