用tabs 切换右侧面板

dashboard/src/components/article/RightPanel.tsx

@@ -1,19 +1,20 @@
-import { Affix } from "antd";
+import { Affix, Button, Tabs } from "antd";
 import { useEffect, useState } from "react";
+import { CloseOutlined } from "@ant-design/icons";
+
 import { IChannel } from "../channel/Channel";
 import ChannelPickerTable from "../channel/ChannelPickerTable";
-
 import DictComponent from "../dict/DictComponent";
 import { ArticleType } from "./Article";
 
-export type TPanelName = "dict" | "channel" | "close";
+export type TPanelName = "dict" | "channel" | "close" | "open";
 interface IWidget {
   curr?: TPanelName;
   type: ArticleType;
   articleId: string;
   selectedChannelKeys?: string[];
   onChannelSelect?: Function;
-  channelReload?: boolean;
+  onClose?: Function;
 }
 const RightPanelWidget = ({
   curr = "close",
@@ -21,62 +22,82 @@ const RightPanelWidget = ({
   articleId,
   onChannelSelect,
   selectedChannelKeys,
-  channelReload = false,
+  onClose,
 }: IWidget) => {
-  const [dict, setDict] = useState("none");
-  const [channel, setChannel] = useState("none");
+  const [open, setOpen] = useState(false);
 
   useEffect(() => {
     switch (curr) {
+      case "open":
+        setOpen(true);
+        break;
       case "dict":
-        setDict("block");
-        setChannel("none");
+        setOpen(true);
         break;
       case "channel":
-        setDict("none");
-        setChannel("block");
+        setOpen(true);
+        break;
+      case "close":
+        setOpen(false);
         break;
       default:
-        setDict("none");
-        setChannel("none");
+        setOpen(false);
         break;
     }
   }, [curr]);
   return (
     <Affix offsetTop={44}>
-      <div key="panel">
-        <div
-          key="DictComponent"
-          style={{
-            width: 350,
-            height: `calc(100vh - 44px)`,
-            overflowY: "scroll",
-            display: dict,
-          }}
-        >
-          <DictComponent />
-        </div>
-        <div
-          key="ChannelPickerTable"
-          style={{
-            width: 350,
-            height: `calc(100vh - 44px)`,
-            overflowY: "scroll",
-            display: channel,
+      <div
+        key="panel"
+        style={{
+          width: 350,
+          height: `calc(100vh - 44px)`,
+          overflowY: "scroll",
+          display: open ? "block" : "none",
+        }}
+      >
+        <Tabs
+          size="small"
+          defaultActiveKey={curr}
+          tabBarExtraContent={{
+            right: (
+              <Button
+                type="text"
+                size="small"
+                icon={<CloseOutlined />}
+                onClick={() => {
+                  if (typeof onClose !== "undefined") {
+                    onClose();
+                  }
+                }}
+              />
+            ),
           }}
-        >
-          <ChannelPickerTable
-            type={type}
-            articleId={articleId}
-            selectedKeys={selectedChannelKeys}
-            onSelect={(e: IChannel[]) => {
-              console.log(e);
-              if (typeof onChannelSelect !== "undefined") {
-                onChannelSelect(e);
-              }
-            }}
-          />
-        </div>
+          items={[
+            {
+              label: `字典`,
+              key: "dict",
+              children: <DictComponent />,
+            },
+            {
+              label: `channel`,
+              key: "channel",
+              children: (
+                <ChannelPickerTable
+                  type={type}
+                  articleId={articleId}
+                  selectedKeys={selectedChannelKeys}
+                  onSelect={(e: IChannel[]) => {
+                    console.log(e);
+                    if (typeof onChannelSelect !== "undefined") {
+                      onChannelSelect(e);
+                    }
+                  }}
+                />
+              ),
+            },
+          ]}
+        />
       </div>
     </Affix>
   );

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

@@ -1,8 +1,9 @@
-import { Affix, Divider, Space } from "antd";
+import { Affix, Button, Divider, Space } from "antd";
 import { Header } from "antd/lib/layout/layout";
 import { Key } from "antd/lib/table/interface";
 import { useEffect, useState } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { ColumnOutlinedIcon } from "../../../assets/icon";
 import { IApiResponseDictList } from "../../../components/api/Dict";
 
 import Article, {
@@ -112,6 +113,8 @@ const Widget = () => {
           <MainMenu />
           <div></div>
           <div key="right" style={{ display: "flex" }}>
+            <Avatar placement="bottom" />
+            <Divider type="vertical" />
             <ModeSwitch
               channel={searchParams.get("channel")}
               currMode={currMode}
@@ -140,10 +143,13 @@ const Widget = () => {
               }}
             />
             <Divider type="vertical" />
-            <RightToolsSwitch
-              onModeChange={(open: TPanelName) => {
-                setRightPanel(open);
-              }}
+            <Button
+              style={{ display: "block", color: "white" }}
+              icon={<ColumnOutlinedIcon />}
+              type="text"
+              onClick={() =>
+                setRightPanel((value) => (value === "close" ? "dict" : "close"))
+              }
             />
           </div>
         </Header>
@@ -182,11 +188,6 @@ const Widget = () => {
                 <ToolButtonSetting type={type} articleId={id} />
               </Space>
             </div>
-            <div>
-              <Space direction="vertical">
-                <Avatar placement="rightBottom" />
-              </Space>
-            </div>
           </div>
         </Affix>
         <div
@@ -224,6 +225,9 @@ const Widget = () => {
               type={type as ArticleType}
               articleId={id ? id : ""}
               selectedChannelKeys={channelId}
+              onClose={() => {
+                setRightPanel("close");
+              }}
               onChannelSelect={(e: IChannel[]) => {
                 //channel 改变
                 console.log("onChannelSelect", e);