45 lines
1.7 KiB
JavaScript
45 lines
1.7 KiB
JavaScript
import AccountBalanceWalletOutlined from "@mui/icons-material/AccountBalanceWalletOutlined";
|
|
import AssessmentOutlined from "@mui/icons-material/AssessmentOutlined";
|
|
import CampaignOutlined from "@mui/icons-material/CampaignOutlined";
|
|
import StorageOutlined from "@mui/icons-material/StorageOutlined";
|
|
|
|
const reportSections = [
|
|
{ icon: AssessmentOutlined, key: "data", label: "数据报表" },
|
|
{ icon: AccountBalanceWalletOutlined, key: "finance", label: "财务报表" },
|
|
{ icon: CampaignOutlined, key: "operations", label: "运营报表" }
|
|
];
|
|
|
|
export function ReportSidebar({ activeSection = "data", onSectionChange }) {
|
|
return (
|
|
<aside className="databi-report-sidebar" aria-label="报表侧边栏">
|
|
<div className="report-sidebar-brand" aria-hidden="true">
|
|
<StorageOutlined fontSize="small" />
|
|
</div>
|
|
<nav className="report-sidebar-nav" role="tablist" aria-label="报表类型">
|
|
{reportSections.map((section) => {
|
|
const Icon = section.icon;
|
|
const isActive = activeSection === section.key;
|
|
return (
|
|
<button
|
|
aria-selected={isActive}
|
|
className={isActive ? "report-sidebar-item is-active" : "report-sidebar-item"}
|
|
key={section.key}
|
|
onClick={() => onSectionChange?.(section.key)}
|
|
role="tab"
|
|
type="button"
|
|
>
|
|
<Icon fontSize="small" />
|
|
<span>{section.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
export function EmptyReportSection({ section }) {
|
|
const label = reportSections.find((item) => item.key === section)?.label || "报表";
|
|
return <section className="databi-empty-report-section" aria-label={label} />;
|
|
}
|