LeftSider.tsx 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import { Link } from "react-router";
  2. import type { MenuProps } from "antd";
  3. import { Affix, Layout } from "antd";
  4. import { Menu } from "antd";
  5. import { AppstoreOutlined, HomeOutlined } from "@ant-design/icons";
  6. const { Sider } = Layout;
  7. const onClick: MenuProps["onClick"] = (e) => {
  8. console.log("click ", e);
  9. };
  10. type IWidgetHeadBar = {
  11. selectedKeys?: string;
  12. };
  13. const LeftSiderWidget = ({ selectedKeys = "" }: IWidgetHeadBar) => {
  14. const items: MenuProps["items"] = [
  15. {
  16. label: "API",
  17. key: "api",
  18. icon: <HomeOutlined />,
  19. children: [
  20. {
  21. label: <Link to="/admin/api/dashboard">dashboard</Link>,
  22. key: "dashboard",
  23. },
  24. ],
  25. },
  26. {
  27. label: "管理",
  28. key: "manage",
  29. icon: <HomeOutlined />,
  30. children: [
  31. {
  32. label: <Link to="/admin/relation/list">Relation</Link>,
  33. key: "relation",
  34. },
  35. {
  36. label: <Link to="/admin/nissaya-ending/list">Nissaya Ending</Link>,
  37. key: "nissaya-ending",
  38. },
  39. {
  40. label: <Link to="/admin/ai/list">AI</Link>,
  41. key: "ai",
  42. },
  43. {
  44. label: "Dictionary",
  45. key: "dict",
  46. children: [
  47. {
  48. label: <Link to="/admin/dictionary/list">List</Link>,
  49. key: "list",
  50. },
  51. {
  52. label: <Link to="/admin/dictionary/preference">Preference</Link>,
  53. key: "preference",
  54. },
  55. ],
  56. },
  57. {
  58. label: <Link to="/admin/users/list">users</Link>,
  59. key: "users",
  60. },
  61. {
  62. label: <Link to="/admin/invite/list">invite</Link>,
  63. key: "invite",
  64. },
  65. ],
  66. },
  67. {
  68. label: "统计",
  69. key: "advance",
  70. icon: <AppstoreOutlined />,
  71. children: [],
  72. },
  73. ];
  74. return (
  75. <Affix offsetTop={0}>
  76. <Sider width={200} breakpoint="lg" className="site-layout-background">
  77. <Menu
  78. theme="light"
  79. onClick={onClick}
  80. defaultSelectedKeys={[selectedKeys]}
  81. defaultOpenKeys={["basic", "advance", "collaboration"]}
  82. mode="inline"
  83. items={items}
  84. />
  85. </Sider>
  86. </Affix>
  87. );
  88. };
  89. export default LeftSiderWidget;