将分栏切换移到两个窗口的菜单里

dashboard/src/components/article/ArticleCard.tsx

@@ -1,13 +1,4 @@
-import {
-  Button,
-  Card,
-  Dropdown,
-  Menu,
-  Space,
-  Segmented,
-  Popover,
-  Tabs,
-} from "antd";
+import { Button, Card, Dropdown, Space, Segmented, Popover, Tabs } from "antd";
 import {
   MoreOutlined,
   MenuOutlined,
@@ -15,10 +6,9 @@ import {
   PushpinOutlined,
 } from "@ant-design/icons";
 import type { MenuProps } from "antd";
-import ArticleView, { IWidgetArticleData } from "./ArticleView";
+import { IWidgetArticleData } from "./ArticleView";
 import { useIntl } from "react-intl";
 import { useState } from "react";
-import { callbackify } from "util";
 
 interface IWidgetArticleCard {
   data?: IWidgetArticleData;
@@ -29,26 +19,37 @@ interface IWidgetArticleCard {
   children?: React.ReactNode;
   onModeChange?: Function;
   openInCol?: Function;
+  showCol?: Function;
 }
-const Widget = ({ data, children, onModeChange }: IWidgetArticleCard) => {
+const Widget = ({
+  data,
+  children,
+  onModeChange,
+  showCol,
+}: IWidgetArticleCard) => {
   const intl = useIntl();
   const [mode, setMode] = useState<string>("read");
 
   const onClick: MenuProps["onClick"] = (e) => {
     console.log("click ", e);
+    switch (e.key) {
+      case "showCol":
+        if (typeof showCol !== "undefined") {
+          showCol();
+        }
+        break;
+
+      default:
+        break;
+    }
   };
 
-  const menu = (
-    <Menu
-      onClick={onClick}
-      items={[
-        {
-          key: "close",
-          label: "关闭",
-        },
-      ]}
-    />
-  );
+  const items: MenuProps["items"] = [
+    {
+      key: "showCol",
+      label: "显示分栏",
+    },
+  ];
   const modeSwitch = (
     <Segmented
       size="middle"
@@ -109,7 +110,7 @@ const Widget = ({ data, children, onModeChange }: IWidgetArticleCard) => {
     </Popover>
   );
   const contextMenu = (
-    <Dropdown overlay={menu} placement="bottomRight">
+    <Dropdown menu={{ items, onClick }} placement="bottomRight">
       <Button shape="circle" size="small" icon={<MoreOutlined />}></Button>
     </Dropdown>
   );

dashboard/src/components/article/ArticleTabs.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect } from "react";
-import { Tabs } from "antd";
+import { Tabs, Button } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
 import { useAppSelector } from "../../hooks";
 import { siteInfo as _siteInfo } from "../../reducers/open-article";
 import Article from "./Article";
@@ -10,8 +11,10 @@ const Test = () => {
   console.log("new");
   return <div>hello</div>;
 };
-
-const Widget = () => {
+interface IWidget {
+  onClose?: Function;
+}
+const Widget = ({ onClose }: IWidget) => {
   const [activeKey, setActiveKey] = useState("1");
   const [items, setItems] = useState(defaultPanes);
   const newTabIndex = useRef(0);
@@ -75,6 +78,17 @@ const Widget = () => {
       remove(targetKey);
     }
   };
+  const operations = (
+    <Button
+      icon={<CloseOutlined />}
+      shape="circle"
+      onClick={() => {
+        if (onClose) {
+          onClose(true);
+        }
+      }}
+    />
+  );
   return (
     <Tabs
       hideAdd
@@ -83,6 +97,7 @@ const Widget = () => {
       type="editable-card"
       onEdit={onEdit}
       items={items}
+      tabBarExtraContent={operations}
     />
   );
 };

dashboard/src/pages/library/article/show.tsx

@@ -51,22 +51,25 @@ const Widget = () => {
 
   const box = useRef<HTMLDivElement>(null);
 
+  const closeCol = () => {
+    if (box.current) {
+      box.current.style.display = "none";
+    }
+  };
+  const openCol = () => {
+    if (box.current) {
+      box.current.style.display = "block";
+    }
+  };
   const onChange = (e: RadioChangeEvent) => {
     setValue(e.target.value);
     if (e.target.value === 1) {
-      if (box.current) {
-        box.current.style.display = "none";
-      }
+      closeCol();
     }
     if (e.target.value === 2) {
-      if (box.current) {
-        box.current.style.display = "block";
-      }
+      openCol();
     }
   };
-  const showDrawer = () => {
-    setOpen(true);
-  };
 
   const onClose = () => {
     setOpen(false);
@@ -81,6 +84,7 @@ const Widget = () => {
               onModeChange={(e: ArticleMode) => {
                 setArticleMode(e);
               }}
+              showCol={openCol}
             >
               <Article
                 active={true}
@@ -91,7 +95,7 @@ const Widget = () => {
             </ArticleCard>
           </div>
           <div style={{ flex: 5 }} ref={box}>
-            <ArticleTabs />
+            <ArticleTabs onClose={closeCol} />
           </div>
           <div style={{ width: 300, backgroundColor: "wheat" }}>{setting}</div>
         </div>
@@ -102,22 +106,6 @@ const Widget = () => {
             flexDirection: "column",
           }}
         >
-          <Radio.Group
-            value={value}
-            onChange={onChange}
-            optionType="button"
-            buttonStyle="solid"
-          >
-            <Space direction="vertical">
-              <Radio value={1}>
-                <BorderOutlined />
-              </Radio>
-              <Radio value={2}>
-                <AppstoreOutlined />
-              </Radio>
-            </Space>
-          </Radio.Group>
-
           <Radio.Group
             value={value2}
             optionType="button"