opti: 1.adjust page-tree header;

apps/ligo-virgo/src/assets/images/logo.svg

@@ -0,0 +1,4 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="52" height="52" rx="10" fill="#3E6FDB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2189 11.4392L14.6321 38.7943H20.2472L26.3453 19.8747L32.4461 38.7943H38.0423L28.454 11.4392H24.2189Z" fill="white"/>
+</svg>

apps/ligo-virgo/src/pages/workspace/docs/Page.tsx

@@ -31,7 +31,7 @@ import { WorkspaceName } from './workspace-name';
 import { CollapsiblePageTree } from './collapsible-page-tree';
 import { useFlag } from '@toeverything/datasource/feature-flags';
 import { type BlockEditor } from '@toeverything/components/editor-core';
-
+import { Tabs } from './components/tabs';
 type PageProps = {
     workspace: string;
 };
@@ -80,7 +80,9 @@ export function Page(props: PageProps) {
                     onMouseLeave={() => setSpaceSidebarVisible(false)}
                 >
                     <WorkspaceName />
-                    <Divider light={true} sx={{ my: 1, margin: '6px 0px' }} />
+
+                    <Tabs />
+
                     <WorkspaceSidebarContent>
                         <div>
                             {dailyNotesFlag && (
@@ -219,4 +221,5 @@ const WorkspaceSidebar = styled('div')(({ hidden }) => ({
 const WorkspaceSidebarContent = styled('div')({
     flex: 'auto',
     overflow: 'hidden auto',
+    marginTop: '18px',
 });

apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { MuiDivider as Divider, styled } from '@toeverything/components/ui';
+import type { ValueOf } from '@toeverything/utils';
+
+const StyledTabs = styled('div')({
+    width: '100%',
+    height: '12px',
+    marginTop: '12px',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+});
+
+const StyledDivider = styled(Divider)<{ isActive?: boolean }>(
+    ({ isActive }) => {
+        return {
+            flex: 1,
+            backgroundColor: isActive ? '#3E6FDB' : '#ECF1FB',
+            borderWidth: '2px',
+        };
+    }
+);
+
+const TAB_TITLE = {
+    PAGES: 'pages',
+    GALLERY: 'gallery',
+    TOC: 'toc',
+} as const;
+
+const TabMap = new Map<TabKey, TabValue>([
+    ['PAGES', 'pages'],
+    ['GALLERY', 'gallery'],
+    ['TOC', 'toc'],
+]);
+
+type TabKey = keyof typeof TAB_TITLE;
+type TabValue = ValueOf<typeof TAB_TITLE>;
+
+const Tabs = () => {
+    const [activeTab, setActiveTab] = useState<TabValue>(TAB_TITLE.PAGES);
+
+    const onClick = (v: TabValue) => {
+        setActiveTab(v);
+    };
+
+    return (
+        <StyledTabs>
+            {[...TabMap.entries()].map(([k, v]) => {
+                return (
+                    <StyledDivider
+                        key={v}
+                        isActive={v === activeTab}
+                        onClick={() => onClick(v)}
+                    />
+                );
+            })}
+        </StyledTabs>
+    );
+};
+
+export { Tabs };

apps/ligo-virgo/src/pages/workspace/docs/components/tabs/index.ts

@@ -0,0 +1 @@
+export { Tabs } from './Tabs';

apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx

@@ -1,27 +1,29 @@
 import {
-    MuiButton as Button,
-    Switch,
     styled,
     MuiOutlinedInput as OutlinedInput,
 } from '@toeverything/components/ui';
-import { LogoIcon } from '@toeverything/components/icons';
+import { PinIcon } from '@toeverything/components/icons';
+import logo from '../../../assets/images/logo.svg';
 import {
     useUserAndSpaces,
     useShowSpaceSidebar,
 } from '@toeverything/datasource/state';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import type { CSSProperties } from 'react';
 import { services } from '@toeverything/datasource/db-service';
 
 const WorkspaceContainer = styled('div')({
     display: 'flex',
-    alignItems: 'center',
+    flexDirection: 'column',
-    minHeight: 60,
+    paddingBottom: '12px',
-    padding: '12px 0px',
     color: '#566B7D',
 });
 const LeftContainer = styled('div')({
     flex: 'auto',
     display: 'flex',
+    height: '52px',
+    alignItems: 'center',
+    margin: '0 12px',
 });
 
 const LogoContainer = styled('div')({
@@ -32,20 +34,40 @@ const LogoContainer = styled('div')({
     minWidth: 24,
 });
 
-const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
+export const LogoImg = ({ style = {} }: { style?: CSSProperties }) => {
-    return {
+    return <img style={style} src={logo} alt="AFFiNE Logo" />;
-        color: theme.affine.palette.primary,
-        width: '16px !important',
-        height: '16px !important',
 };
+
+const StyledPin = styled('div')({
+    display: 'flex',
+    justifyContent: 'end',
+    alignItems: 'center',
+});
+
+const StyledWorkspace = styled('div')({
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    marginLeft: '12px',
+    paddingLeft: '12px',
+});
+
+const StyledWorkspaceDesc = styled('div')({
+    fontSize: '12px',
+    color: '#98ACBD',
+    height: '18px',
+
+    display: 'flex',
+    alignItems: 'center',
 });
 
 const WorkspaceNameContainer = styled('div')({
     display: 'flex',
     alignItems: 'center',
     flex: 'auto',
-    width: '100px',
+    width: '165px',
-    marginRight: '10px',
+    height: '34px',
     input: {
         padding: '5px 10px',
     },
@@ -58,21 +80,15 @@ const WorkspaceNameContainer = styled('div')({
 });
 
 const WorkspaceReNameContainer = styled('div')({
-    marginRight: '10px',
+    height: '34px',
+    display: 'flex',
+    alignItems: 'center',
+
     input: {
         padding: '5px 10px',
     },
 });
 
-const ToggleDisplayContainer = styled('div')({
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: 12,
-    color: '#3E6FDB',
-    padding: 6,
-    minWidth: 64,
-});
-
 export const WorkspaceName = () => {
     const { currentSpaceId } = useUserAndSpaces();
     const { fixedDisplay, toggleSpaceSidebar } = useShowSpaceSidebar();
@@ -139,14 +155,27 @@ export const WorkspaceName = () => {
 
     return (
         <WorkspaceContainer>
+            <StyledPin>
+                <PinIcon
+                    style={{
+                        width: '20px',
+                        height: '20px',
+                        color: fixedDisplay ? '#3E6FDB' : '',
+                        cursor: 'pointer',
+                    }}
+                    onClick={toggleSpaceSidebar}
+                />
+            </StyledPin>
             <LeftContainer>
                 <LogoContainer>
-                    <StyledLogoIcon />
+                    <LogoImg />
                 </LogoContainer>
 
+                <StyledWorkspace>
                     {inRename ? (
                         <WorkspaceReNameContainer>
                             <OutlinedInput
+                                style={{ width: '140px', height: '28px' }}
                                 value={workspaceName}
                                 onChange={handleChange}
                                 onKeyDown={handleKeyDown}
@@ -160,14 +189,12 @@ export const WorkspaceName = () => {
                             </span>
                         </WorkspaceNameContainer>
                     )}
+
+                    <StyledWorkspaceDesc>
+                        To shape, Not to Adapt.
+                    </StyledWorkspaceDesc>
+                </StyledWorkspace>
             </LeftContainer>
-            <ToggleDisplayContainer onClick={toggleSpaceSidebar}>
-                <Switch
-                    checked={fixedDisplay}
-                    checkedLabel="ON"
-                    uncheckedLabel="OFF"
-                />
-            </ToggleDisplayContainer>
         </WorkspaceContainer>
     );
 };