词典列表响应式。手机缩小为一个按钮

dashboard/src/components/dict/DictList.tsx

@@ -1,5 +1,5 @@
-import { Anchor } from "antd";
-
+import { Affix, Anchor, Button, Col, Popover, Row } from "antd";
+import { UnorderedListOutlined } from "@ant-design/icons";
 const { Link } = Anchor;
 
 export interface IAnchorData {
@@ -11,7 +11,7 @@ interface IWidgetDictList {
   data: IAnchorData[];
 }
 const Widget = (prop: IWidgetDictList) => {
-  function GetLink(anchors: IAnchorData[]) {
+  const GetLink = (anchors: IAnchorData[]) => {
     return anchors.map((it, id) => {
       return (
         <Link key={id} href={it.href} title={it.title}>
@@ -19,12 +19,30 @@ const Widget = (prop: IWidgetDictList) => {
         </Link>
       );
     });
-  }
-
+  };
+  const dictNav = <Anchor offsetTop={50}>{GetLink(prop.data)}</Anchor>;
   return (
-    <>
-      <Anchor offsetTop={50}>{GetLink(prop.data)}</Anchor>
-    </>
+    <Row>
+      <Col xs={0} sm={24}>
+        {dictNav}
+      </Col>
+      <Col xs={24} sm={0}>
+        <Affix offsetTop={50}>
+          <Popover
+            placement="bottomRight"
+            arrowPointAtCenter
+            content={dictNav}
+            trigger="click"
+          >
+            <Button
+              type="primary"
+              shape="circle"
+              icon={<UnorderedListOutlined />}
+            />
+          </Popover>
+        </Affix>
+      </Col>
+    </Row>
   );
 };