CI Bot
7ef81079d5
Deploy / Build Production Runtime Images (push) Has been skipped
Deploy / Deploy Production (push) Has been skipped
Deploy / Production Browser E2E (push) Has been skipped
Deploy / Deploy Staging (push) Failing after 207h46m15s
CI/CD Pipeline / Frontend Lint (push) Failing after 207h46m43s
CI/CD Pipeline / Validate Code Quality And Tests (push) Failing after 207h46m52s
- 新增 AppLayout.tsx：语义化布局壳（header + sidebar slot + main content） - 重写 MainLayout.tsx：侧边栏 240px/64px 折叠，SidebarContext 共享状态 - 重写 MainLayout.css：完整响应式布局样式 - 桌面端：侧边栏默认展开 240px - 平板端（769-1024px）：侧边栏默认折叠 64px 图标栏 - 移动端（≤768px）：侧边栏隐藏，transform 滑入 + 遮罩层 - 所有尺寸/颜色使用 global.css 设计系统变量 - 语义化 HTML：header/aside/main/nav 标签 - 侧边栏/导航具体内容 deferred to Tasks 1.3, 1.4
30 lines
653 B
TypeScript
30 lines
653 B
TypeScript
/**
|
|
* AppLayout - 应用布局壳
|
|
*
|
|
* 语义化 HTML 结构：header + aside + main 三栏布局
|
|
* 由 MainLayout 管理侧边栏状态，AppLayout 负责渲染结构
|
|
*/
|
|
import React from "react";
|
|
import { Outlet } from "react-router-dom";
|
|
import Header from "./Header";
|
|
|
|
interface AppLayoutProps {
|
|
sidebar: React.ReactNode;
|
|
}
|
|
|
|
const AppLayout: React.FC<AppLayoutProps> = ({ sidebar }) => {
|
|
return (
|
|
<div className="xx-app-shell">
|
|
<Header />
|
|
<div className="xx-app-body">
|
|
{sidebar}
|
|
<main className="xx-app-content">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AppLayout;
|