refactor(theme): move LLMs components to Llms directory and support outline placement (#3180)

SoonIter · web-flow · commit 4d01488bf0c9 · 2026-03-02T18:24:59.000+08:00
diff --git a/packages/core/src/theme/components/EditLink/index.scss b/packages/core/src/theme/components/EditLink/index.scss
@@ -1,11 +1,13 @@
-.rp-edit-link {
-  color: var(--rp-c-brand);
-  text-decoration: none;
-  font-size: 15px;
-  font-weight: 500;
-  transition: all 0.2s ease-in-out;
+.rp-doc-footer {
+  .rp-edit-link {
+    color: var(--rp-c-brand);
+    text-decoration: none;
+    font-size: 15px;
+    font-weight: 500;
+    transition: all 0.2s ease-in-out;
 
-  &:hover {
-    color: var(--rp-c-brand-dark);
+    &:hover {
+      color: var(--rp-c-brand-dark);
+    }
   }
 }
diff --git a/packages/core/src/theme/components/EditLink/index.tsx b/packages/core/src/theme/components/EditLink/index.tsx
@@ -13,7 +13,7 @@ export function EditLink({ isOutline }: { isOutline?: boolean }) {
 
   if (isOutline) {
     return (
-      <Link href={link} className="rp-outline__action-row">
+      <Link href={link} className="rp-outline__action-row rp-edit-link">
         <SvgWrapper icon={IconEdit} width="16" height="16" />
         <span>{text}</span>
       </Link>
diff --git a/packages/core/src/theme/components/Llms/LlmsCopyRow.tsx b/packages/core/src/theme/components/Llms/LlmsCopyRow.tsx
@@ -1,8 +1,7 @@
 import { useI18n } from '@rspress/core/runtime';
-import { IconCopy, IconSuccess } from '@theme';
+import { IconCopy, IconSuccess, SvgWrapper } from '@theme';
 import { useCallback, useRef, useState } from 'react';
-import { useMdUrl } from '../Llms/useMdUrl';
-import { SvgWrapper } from '../SvgWrapper';
+import { useMdUrl } from './useMdUrl';
 
 const cache = new Map<string, string>();
 
diff --git a/packages/core/src/theme/components/Llms/LlmsOpenRow.scss b/packages/core/src/theme/components/Llms/LlmsOpenRow.scss
@@ -0,0 +1,10 @@
+.rp-outline__open-in-wrapper {
+  position: relative;
+
+  .rp-llms-view-options__menu {
+    bottom: calc(100% + 6px);
+    top: auto;
+    left: 0;
+    transform-origin: bottom left;
+  }
+}
diff --git a/packages/core/src/theme/components/Llms/LlmsOpenRow.tsx b/packages/core/src/theme/components/Llms/LlmsOpenRow.tsx
@@ -1,9 +1,9 @@
 import { useI18n, useSite } from '@rspress/core/runtime';
-import { IconExternalLink } from '@theme';
+import { IconExternalLink, SvgWrapper } from '@theme';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { SvgWrapper } from '../SvgWrapper';
-import '../Llms/LlmsViewOptions.scss';
-import { useMdUrl } from '../Llms/useMdUrl';
+import './LlmsOpenRow.scss';
+import './LlmsViewOptions.scss';
+import { useMdUrl } from './useMdUrl';
 
 export function LlmsOpenRow() {
   const t = useI18n();
diff --git a/packages/core/src/theme/components/Outline/ScrollToTop.tsx b/packages/core/src/theme/components/Outline/ScrollToTop.tsx
@@ -18,7 +18,10 @@ export function ScrollToTop() {
   }
 
   return (
-    <button className="rp-outline__action-row" onClick={scrollToTop}>
+    <button
+      className="rp-outline__action-row rp-scroll-to-top"
+      onClick={scrollToTop}
+    >
       <SvgWrapper icon={IconScrollToTop} width="16" height="16" />
       <span>{t('scrollToTopText')}</span>
     </button>
diff --git a/packages/core/src/theme/components/Outline/index.scss b/packages/core/src/theme/components/Outline/index.scss
@@ -91,15 +91,4 @@
       flex-shrink: 0;
     }
   }
-
-  &__open-in-wrapper {
-    position: relative;
-
-    .rp-llms-view-options__menu {
-      bottom: calc(100% + 6px);
-      top: auto;
-      left: 0;
-      transform-origin: bottom left;
-    }
-  }
 }
diff --git a/packages/core/src/theme/components/Outline/index.tsx b/packages/core/src/theme/components/Outline/index.tsx
@@ -1,5 +1,12 @@
 import { useI18n, useSite } from '@rspress/core/runtime';
-import { EditLink, ReadPercent, Toc, useDynamicToc } from '@theme';
+import {
+  EditLink,
+  LlmsCopyRow,
+  LlmsOpenRow,
+  ReadPercent,
+  Toc,
+  useDynamicToc,
+} from '@theme';
 import './index.scss';
 import { ScrollToTop } from './ScrollToTop';
 
@@ -9,14 +16,17 @@ export function Outline() {
   const headers = useDynamicToc();
   const {
     site: {
-      themeConfig: { enableScrollToTop = true },
+      themeConfig: { enableScrollToTop = true, llmsUI },
     },
   } = useSite();
 
   if (headers.length === 0) {
     return <></>;
   }
 
+  const placement =
+    typeof llmsUI === 'object' ? (llmsUI?.placement ?? 'title') : 'title';
+
   return (
     <div className="rp-outline">
       <div className="rp-outline__title">
@@ -29,6 +39,12 @@ export function Outline() {
       <div className="rp-outline__divider" />
       <div className="rp-outline__bottom">
         <EditLink isOutline />
+        {process.env.ENABLE_LLMS_UI && placement === 'outline' && (
+          <>
+            <LlmsCopyRow />
+            <LlmsOpenRow />
+          </>
+        )}
         {enableScrollToTop && <ScrollToTop />}
       </div>
     </div>
diff --git a/packages/core/src/theme/index.ts b/packages/core/src/theme/index.ts
@@ -38,6 +38,8 @@ export {
   type LlmsViewOptionsProps,
   useMdUrl,
 } from './components/Llms/index';
+export { LlmsCopyRow } from './components/Llms/LlmsCopyRow';
+export { LlmsOpenRow } from './components/Llms/LlmsOpenRow';
 export { Nav, type NavProps } from './components/Nav/index';
 export { NavHamburger } from './components/NavHamburger/index';
 export { NavTitle } from './components/NavTitle/index';

Original file line number	Diff line number	Diff line change
`@@ -91,15 +91,4 @@`
`91`	`91`	`flex-shrink: 0;`
`92`	`92`	`}`
`93`	`93`	`}`
`94`		`-`
`95`		`- &__open-in-wrapper {`
`96`		`- position: relative;`
`97`		`-`
`98`		`- .rp-llms-view-options__menu {`
`99`		`- bottom: calc(100% + 6px);`
`100`		`- top: auto;`
`101`		`- left: 0;`
`102`		`- transform-origin: bottom left;`
`103`		`- }`
`104`		`- }`
`105`	`94`	`}`