opti: 1.page tree; 2. icon invert; 3.topbar;

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/TreeItem.tsx

@@ -15,6 +15,7 @@ import styles from './tree-item.module.scss';
 import { useFlag } from '@toeverything/datasource/feature-flags';
 
 import MoreActions from './MoreActions';
+import { useTheme } from '@toeverything/components/ui';
 export type TreeItemProps = {
     /** The main text to display on this line */
     value: string;
@@ -61,11 +62,13 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
         },
         ref
     ) => {
-        const { workspace_id } = useParams();
+        const { workspace_id, page_id } = useParams();
         const BooleanPageTreeItemMoreActions = useFlag(
             'BooleanPageTreeItemMoreActions',
             true
         );
+        const theme = useTheme();
+
         return (
             <li
                 ref={wrapperRef}
@@ -106,6 +109,11 @@ export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
                             className={styles['Text']}
                             {...handleProps}
                             to={`/${workspace_id}/${pageId}`}
+                            style={{
+                                ...(pageId === page_id && {
+                                    color: theme.affine.palette.primary,
+                                }),
+                            }}
                         >
                             {value}
                         </Link>

libs/components/layout/src/workspace-sidebar/page-tree/tree-item/tree-item.module.scss

@@ -2,7 +2,8 @@
     box-sizing: border-box;
     padding-left: var(--spacing);
     list-style: none;
-    padding: 6px 0;
+    padding-top: 6px;
+    padding-bottom: 6px;
     font-size: 14px;
     &:hover {
         background: #f5f7f8;