60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import { CSSProperties } from "react";
|
|
import "./index.less";
|
|
import { Collapse, CollapseProps, theme } from "antd";
|
|
import { CaretRightOutlined } from "@ant-design/icons";
|
|
|
|
interface LabelProps {
|
|
children?: JSX.Element;
|
|
}
|
|
|
|
const content = (
|
|
<ul>
|
|
<li>切片太少</li>
|
|
<li>{"层厚>1.0mm"}</li>
|
|
</ul>
|
|
);
|
|
const getItems: (panelStyle: CSSProperties) => CollapseProps["items"] = (
|
|
panelStyle
|
|
) => [
|
|
{
|
|
key: "1",
|
|
label: "影像质量",
|
|
children: content,
|
|
style: panelStyle,
|
|
},
|
|
{
|
|
key: "2",
|
|
label: "其他",
|
|
children: <p>1</p>,
|
|
style: panelStyle,
|
|
},
|
|
];
|
|
|
|
export const Label = (props: LabelProps) => {
|
|
const { token } = theme.useToken();
|
|
|
|
const panelStyle: React.CSSProperties = {
|
|
marginBottom: 12,
|
|
background: token.colorFillAlter,
|
|
borderRadius: token.borderRadiusLG,
|
|
border: "none",
|
|
};
|
|
|
|
return (
|
|
<div className="label-container">
|
|
<aside>
|
|
<Collapse
|
|
bordered={false}
|
|
defaultActiveKey={[]}
|
|
expandIcon={({ isActive }) => (
|
|
<CaretRightOutlined rotate={isActive ? 90 : 0} />
|
|
)}
|
|
style={{ background: token.colorBgContainer }}
|
|
items={getItems(panelStyle)}
|
|
/>
|
|
</aside>
|
|
<main>标签相关数据</main>
|
|
</div>
|
|
);
|
|
};
|