feat(theme/EditLink): add edit link to outline sidebar (#3164)

Huxpro · web-flow · commit 160451580a64 · 2026-02-28T17:34:38.000+08:00
diff --git a/packages/core/src/theme/components/Outline/EditLinkRow.tsx b/packages/core/src/theme/components/Outline/EditLinkRow.tsx
@@ -0,0 +1,33 @@
+import { useEditLink } from '../EditLink/useEditLink';
+
+export function EditLinkRow() {
+  const editLinkObj = useEditLink();
+
+  if (!editLinkObj) {
+    return null;
+  }
+
+  const { text, link } = editLinkObj;
+
+  return (
+    <a
+      href={link}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="rp-outline__action-row"
+    >
+      <svg
+        viewBox="0 0 16 16"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.442l-3.251.929a.75.75 0 0 1-.924-.924l.929-3.251a1.75 1.75 0 0 1 .443-.757l8.61-8.61Zm1.414 1.06a.25.25 0 0 0-.354 0L3.463 11.098a.25.25 0 0 0-.063.108l-.558 1.953 1.953-.558a.25.25 0 0 0 .108-.063l8.61-8.61a.25.25 0 0 0 0-.354l-1.086-1.086Z"
+        />
+      </svg>
+      <span>{text}</span>
+    </a>
+  );
+}
diff --git a/packages/core/src/theme/components/Outline/index.tsx b/packages/core/src/theme/components/Outline/index.tsx
@@ -1,6 +1,7 @@
 import { useI18n, useSite } from '@rspress/core/runtime';
 import { ReadPercent, Toc, useDynamicToc } from '@theme';
 import './index.scss';
+import { EditLinkRow } from './EditLinkRow';
 import { ScrollToTop } from './ScrollToTop';
 
 export function Outline() {
@@ -29,6 +30,7 @@ export function Outline() {
       <div className="rp-outline__divider" />
       <div className="rp-outline__bottom">
         {enableScrollToTop && <ScrollToTop />}
+        <EditLinkRow />
       </div>
     </div>
   );
diff --git a/website/docs/en/api/config/config-theme.mdx b/website/docs/en/api/config/config-theme.mdx
@@ -402,7 +402,7 @@ interface EditLink {
 
 - **Default**: `undefined`
 
-Display a link to edit the page on Git management services such as GitHub, or GitLab.
+Display a link to edit the page on Git management services such as GitHub, or GitLab. The link appears in both the doc footer and the right-side outline panel.
 
 For example:
 
diff --git a/website/docs/en/ui/layout-components/edit-link.mdx b/website/docs/en/ui/layout-components/edit-link.mdx
@@ -9,7 +9,7 @@ overviewHeaders: []
 
 ## Usage
 
-This component is usually rendered automatically as part of [DocFooter](/ui/layout-components/doc-footer) and doesn't need manual usage.
+This component is rendered automatically in both the [DocFooter](/ui/layout-components/doc-footer) and the right-side outline panel, and doesn't need manual usage.
 
 ```tsx preview
 import { EditLink as BasicEditLink } from '@rspress/core/theme-original';
diff --git a/website/docs/zh/api/config/config-theme.mdx b/website/docs/zh/api/config/config-theme.mdx
@@ -389,7 +389,7 @@ interface EditLink {
 
 - **默认值**： `undefined`
 
-用于配置编辑链接，以在 GitHub 或 GitLab 等 Git 管理服务上编辑页面。
+用于配置编辑链接，以在 GitHub 或 GitLab 等 Git 管理服务上编辑页面。该链接会同时显示在文档底部和右侧大纲面板中。
 
 比如：
 
diff --git a/website/docs/zh/ui/layout-components/edit-link.mdx b/website/docs/zh/ui/layout-components/edit-link.mdx
@@ -9,7 +9,7 @@ overviewHeaders: []
 
 ## 用法
 
-该组件通常作为 [DocFooter](/ui/layout-components/doc-footer) 的一部分自动渲染，无需手动使用。
+该组件会自动渲染在 [DocFooter](/ui/layout-components/doc-footer) 和右侧大纲面板中，无需手动使用。
 
 ```tsx preview
 import { EditLink as BasicEditLink } from '@rspress/core/theme-original';
