feat: add new context field to support embedded rsdoctor to other page (

#535)

packages/components/src/components/Layout/index.tsx

@@ -1,9 +1,10 @@
-import { PropsWithChildren, useEffect } from 'react';
+import { PropsWithChildren, useContext, useEffect } from 'react';
 import { FloatButton, Layout as L } from 'antd';
 import { MAIN_BG, Size } from '../../constants';
 import { Header } from './header';
 import { useLocale, useI18n } from '../../utils';
 import { Progress } from './progress';
+import { ConfigContext } from '../../config';
 
 export interface LayoutProps {
   children: JSX.Element;
@@ -14,19 +15,25 @@ export const Layout = (props: PropsWithChildren<LayoutProps>): JSX.Element => {
   const { i18n } = useI18n();
   const { children } = props;
 
-
   useEffect(() => {
     if (i18n.language !== locale) {
       i18n.changeLanguage(locale);
     }
   }, [locale]);
 
+  const ctx = useContext(ConfigContext);
   return (
     <L>
-      <Header />
+      {!ctx.embedded ? <Header /> : null}
       <Progress />
       <L.Content
-        style={{ height: '100%', minHeight: '100vh', padding: Size.BasePadding, marginTop: Size.NavBarHeight, background: MAIN_BG }}
+        style={{
+          height: '100%',
+          minHeight: '100vh',
+          padding: Size.BasePadding,
+          marginTop: !ctx.embedded ? Size.NavBarHeight : 0,
+          background: MAIN_BG,
+        }}
       >
         {children}
         <FloatButton.BackTop />

packages/components/src/config.tsx

@@ -1,6 +1,10 @@
 import { createContext } from 'react';
 import { Manifest } from '@rsdoctor/types';
-import { getLocaleFromStorage, getThemeFromStorage, getViewModeFromStorage } from './utils/storage';
+import {
+  getLocaleFromStorage,
+  getThemeFromStorage,
+  getViewModeFromStorage,
+} from './utils/storage';
 import { PageState, ViewMode, Language, Theme } from './constants';
 
 export interface Config {
@@ -16,6 +20,8 @@ export interface Config {
   setManifest(json: Manifest.RsdoctorManifest): void;
   setPageState(state: PageState): void;
   setViewMode(mode: Partial<Config['viewMode']>, saveStorage?: boolean): void;
+  // whether the page is embedded in another page
+  embedded?: boolean;
 }
 
 export const defaultConfig: Config = {