diff --git a/packages/client/src/components/message/placeholder.tsx b/packages/client/src/components/message/placeholder.tsx
new file mode 100644
index 00000000..c74a08f8
--- /dev/null
+++ b/packages/client/src/components/message/placeholder.tsx
@@ -0,0 +1,16 @@
+import { Skeleton } from '@douyinfe/semi-ui';
+
+export const Placeholder = () => {
+  return (
+    <Skeleton
+      placeholder={
+        <>
+          {Array.from({ length: 6 }).fill(
+            <Skeleton.Title style={{ width: '100%', marginBottom: 12, marginTop: 12 }} />
+          )}
+        </>
+      }
+      loading={true}
+    ></Skeleton>
+  );
+};
diff --git a/packages/client/src/layouts/router-header/placeholder.tsx b/packages/client/src/layouts/router-header/placeholder.tsx
new file mode 100644
index 00000000..0d1b3e3c
--- /dev/null
+++ b/packages/client/src/layouts/router-header/placeholder.tsx
@@ -0,0 +1,16 @@
+import { Skeleton } from '@douyinfe/semi-ui';
+
+export const Placeholder = () => {
+  return (
+    <Skeleton
+      placeholder={
+        <>
+          {Array.from({ length: 8 }).fill(
+            <Skeleton.Title style={{ width: '100%', marginBottom: 12, marginTop: 12 }} />
+          )}
+        </>
+      }
+      loading={true}
+    ></Skeleton>
+  );
+};
diff --git a/packages/client/src/layouts/router-header/recent.tsx b/packages/client/src/layouts/router-header/recent.tsx
new file mode 100644
index 00000000..3495ae44
--- /dev/null
+++ b/packages/client/src/layouts/router-header/recent.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import Link from 'next/link';
+import { Typography, Space, Dropdown, Tabs, TabPane } from '@douyinfe/semi-ui';
+import { IconChevronDown } from '@douyinfe/semi-icons';
+import { useRecentDocuments } from 'data/document';
+import { Empty } from 'components/empty';
+import { DataRender } from 'components/data-render';
+import { LocaleTime } from 'components/locale-time';
+import { DocumentStar } from 'components/document/star';
+import { IconDocumentFill } from 'components/icons/IconDocumentFill';
+import { Placeholder } from './placeholder';
+import styles from './index.module.scss';
+
+const { Text } = Typography;
+
+export const Recent = () => {
+  const { data: recentDocs, loading, error } = useRecentDocuments();
+
+  return (
+    <Dropdown
+      trigger="click"
+      spacing={16}
+      content={
+        <div style={{ width: 300, padding: '16px 16px 0' }}>
+          <Tabs type="line" size="small">
+            <TabPane tab="文档" itemKey="docs">
+              <DataRender
+                loading={loading}
+                loadingContent={<Placeholder />}
+                error={error}
+                normalContent={() => {
+                  return (
+                    <div className={styles.itemsWrap} style={{ margin: '0 -16px' }}>
+                      {recentDocs.length ? (
+                        recentDocs.map((doc) => {
+                          return (
+                            <div className={styles.itemWrap}>
+                              <Link
+                                href={{
+                                  pathname: '/wiki/[wikiId]/document/[documentId]',
+                                  query: {
+                                    wikiId: doc.wikiId,
+                                    documentId: doc.id,
+                                  },
+                                }}
+                              >
+                                <a className={styles.item}>
+                                  <div className={styles.leftWrap}>
+                                    <IconDocumentFill style={{ marginRight: 12 }} />
+                                    <div>
+                                      <Text ellipsis={{ showTooltip: true }} style={{ width: 180 }}>
+                                        {doc.title}
+                                      </Text>
+
+                                      <Text size="small" type="tertiary">
+                                        创建者：
+                                        {doc.createUser && doc.createUser.name} •{' '}
+                                        <LocaleTime date={doc.updatedAt} timeago />
+                                      </Text>
+                                    </div>
+                                  </div>
+                                  <div className={styles.rightWrap}>
+                                    <DocumentStar documentId={doc.id} />
+                                  </div>
+                                </a>
+                              </Link>
+                            </div>
+                          );
+                        })
+                      ) : (
+                        <Empty message="最近访问的文档会出现在此处" />
+                      )}
+                    </div>
+                  );
+                }}
+              />
+            </TabPane>
+          </Tabs>
+        </div>
+      }
+    >
+      <span>
+        <Space>
+          最近
+          <IconChevronDown />
+        </Space>
+      </span>
+    </Dropdown>
+  );
+};
diff --git a/packages/client/src/layouts/router-header/wiki.tsx b/packages/client/src/layouts/router-header/wiki.tsx
new file mode 100644
index 00000000..44825be7
--- /dev/null
+++ b/packages/client/src/layouts/router-header/wiki.tsx
@@ -0,0 +1,159 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import { Avatar, Typography, Space, Dropdown } from '@douyinfe/semi-ui';
+import { IconChevronDown } from '@douyinfe/semi-icons';
+import { useStaredWikis, useWikiDetail } from 'data/wiki';
+import { Empty } from 'components/empty';
+import { DataRender } from 'components/data-render';
+import { WikiStar } from 'components/wiki/star';
+import { Placeholder } from './placeholder';
+import styles from './index.module.scss';
+
+const { Text } = Typography;
+
+export const Wiki = () => {
+  const { query } = useRouter();
+  const { data: starWikis, loading, error, refresh: refreshStarWikis } = useStaredWikis();
+  const { data: currentWiki } = useWikiDetail(query.wikiId);
+
+  return (
+    <Dropdown
+      trigger="click"
+      spacing={16}
+      content={
+        <div
+          style={{
+            width: 300,
+            paddingBottom: 8,
+          }}
+        >
+          {currentWiki && (
+            <>
+              <div className={styles.titleWrap}>
+                <Text strong type="secondary">
+                  当前
+                </Text>
+              </div>
+              <div className={styles.itemWrap}>
+                <Link
+                  href={{
+                    pathname: '/wiki/[wikiId]',
+                    query: {
+                      wikiId: currentWiki.id,
+                    },
+                  }}
+                >
+                  <a className={styles.item}>
+                    <div className={styles.leftWrap}>
+                      <Avatar
+                        shape="square"
+                        size="small"
+                        src={currentWiki.avatar}
+                        style={{
+                          marginRight: 8,
+                          width: 24,
+                          height: 24,
+                          borderRadius: 4,
+                        }}
+                      >
+                        {currentWiki.name.charAt(0)}
+                      </Avatar>
+                      <div>
+                        <Text ellipsis={{ showTooltip: true }} style={{ width: 180 }}>
+                          {currentWiki.name}
+                        </Text>
+                      </div>
+                    </div>
+                    <div className={styles.rightWrap}>
+                      <WikiStar wikiId={currentWiki.id} onChange={refreshStarWikis} />
+                    </div>
+                  </a>
+                </Link>
+              </div>
+            </>
+          )}
+          <div className={styles.titleWrap}>
+            <Text strong type="secondary">
+              已收藏
+            </Text>
+          </div>
+          <DataRender
+            loading={loading}
+            loadingContent={<Placeholder />}
+            error={error}
+            normalContent={() => {
+              return (
+                <div className={styles.itemsWrap}>
+                  {starWikis.length ? (
+                    starWikis.map((wiki) => {
+                      return (
+                        <div className={styles.itemWrap}>
+                          <Link
+                            href={{
+                              pathname: '/wiki/[wikiId]',
+                              query: {
+                                wikiId: wiki.id,
+                              },
+                            }}
+                          >
+                            <a className={styles.item}>
+                              <div className={styles.leftWrap}>
+                                <Avatar
+                                  shape="square"
+                                  size="small"
+                                  src={wiki.avatar}
+                                  style={{
+                                    marginRight: 8,
+                                    width: 24,
+                                    height: 24,
+                                    borderRadius: 4,
+                                  }}
+                                >
+                                  {wiki.name.charAt(0)}
+                                </Avatar>
+                                <div>
+                                  <Text ellipsis={{ showTooltip: true }} style={{ width: 180 }}>
+                                    {wiki.name}
+                                  </Text>
+                                </div>
+                              </div>
+                              <div className={styles.rightWrap}>
+                                <WikiStar wikiId={wiki.id} onChange={refreshStarWikis} />
+                              </div>
+                            </a>
+                          </Link>
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <Empty message="收藏的知识库会出现在此处" />
+                  )}
+                </div>
+              );
+            }}
+          />
+          <Dropdown.Divider />
+          <div className={styles.itemWrap}>
+            <Link
+              href={{
+                pathname: '/wiki',
+              }}
+            >
+              <a className={styles.item} style={{ padding: '12px 16px' }}>
+                <Text>查看所有知识库</Text>
+              </a>
+            </Link>
+          </div>
+        </div>
+      }
+    >
+      <span>
+        <Space>
+          知识库
+          <IconChevronDown />
+        </Space>
+      </span>
+    </Dropdown>
+  );
+};