1111

config/defaultSettings.ts

@@ -10,7 +10,8 @@ const Settings: ProLayoutProps & {
   navTheme: 'light',
   // 拂晓蓝
   colorPrimary: '#1890ff',
-  layout: 'mix',
+  // 嵌入第三方平台：侧栏布局，无顶栏
+  layout: 'side',
   contentWidth: 'Fluid',
   fixedHeader: false,
   fixSiderbar: true,
@@ -20,8 +21,13 @@ const Settings: ProLayoutProps & {
   logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
   iconfontUrl: '',
   token: {
-    // 参见ts声明，demo 见文档，通过token 修改样式
-    //https://procomponents.ant.design/components/layout#%E9%80%9A%E8%BF%87-token-%E4%BF%AE%E6%94%B9%E6%A0%B7%E5%BC%8F
+    sider: {
+      colorMenuBackground: '#fff',
+      colorBgMenuItemSelected: '#e6f4ff',
+      colorTextMenu: 'rgba(0, 0, 0, 0.88)',
+      colorTextMenuSelected: '#1890ff',
+      colorTextMenuItemHover: 'rgba(0, 0, 0, 0.88)',
+    },
   },
 };
 

src/app.tsx

@@ -102,6 +102,9 @@ export async function getInitialState(): Promise<{
 // ProLayout 支持的api https://procomponents.ant.design/components/layout
 export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
   return {
+    // 嵌入第三方平台：隐藏 ProLayout 顶栏（系统名、用户头像等）
+    headerRender: false,
+    menuHeaderRender: false,
     // actionsRender: () => [<Question key="doc" />, <SelectLang key="SelectLang" />],
     actionsRender: () => [<SelectLang key="SelectLang" />],
     avatarProps: {
@@ -174,7 +177,6 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
     //     </Link>,
     //   ]
     //   : [],
-    menuHeaderRender: undefined,
     // 自定义 403 页面
     // unAccessible: <div>unAccessible</div>,
     // 增加一个 loading 的状态

src/global.less

@@ -21,6 +21,28 @@ body,
   left: unset;
 }
 
+// 管理端嵌入第三方：隐藏顶栏、侧栏白底
+.ant-pro-layout {
+  .ant-pro-global-header {
+    display: none !important;
+  }
+
+  .ant-pro-sider.ant-layout-sider {
+    background: #fff !important;
+
+    .ant-layout-sider-children,
+    .ant-pro-sider-menu,
+    .ant-menu.ant-menu-root {
+      background: #fff !important;
+    }
+  }
+
+  // 无顶栏时内容区顶对齐
+  .ant-pro-layout-content {
+    padding-block-start: 16px;
+  }
+}
+
 .ant-table-row {
   &-level-1 .ant-table-cell:first-child {
     padding-left: 24px !important;