channel 选择器优化 #2138

dashboard/src/components/channel/ChannelAlert.tsx

@@ -4,6 +4,8 @@ import { Alert, Button } from "antd";
 
 import ChannelPicker from "./ChannelPicker";
 import { IChannel } from "./Channel";
+import store from "../../store";
+import { openPanel } from "../../reducers/right-panel";
 
 interface IWidget {
   channels?: string | null;
@@ -12,6 +14,42 @@ interface IWidget {
 const ChannelAlertWidget = ({ channels, onChannelChange }: IWidget) => {
   const intl = useIntl();
 
+  // 获取浏览器宽度
+  const browserWidth = window.innerWidth;
+  let button = <></>;
+  if (browserWidth < 580) {
+    button = (
+      <ChannelPicker
+        trigger={
+          <Button type="primary">
+            {intl.formatMessage({
+              id: "buttons.select.channel",
+            })}
+          </Button>
+        }
+        defaultOwner="my"
+        onSelect={(channels: IChannel[]) => {
+          if (typeof onChannelChange !== "undefined") {
+            onChannelChange(channels);
+          }
+        }}
+      />
+    );
+  } else {
+    button = (
+      <Button
+        type="primary"
+        onClick={() => {
+          store.dispatch(openPanel("channel"));
+        }}
+      >
+        {intl.formatMessage({
+          id: "buttons.select.channel",
+        })}
+      </Button>
+    );
+  }
+
   return channels ? (
     <></>
   ) : (
@@ -21,23 +59,7 @@ const ChannelAlertWidget = ({ channels, onChannelChange }: IWidget) => {
       })}
       type="warning"
       closable
-      action={
-        <ChannelPicker
-          trigger={
-            <Button type="primary">
-              {intl.formatMessage({
-                id: "buttons.select.channel",
-              })}
-            </Button>
-          }
-          defaultOwner="my"
-          onSelect={(channels: IChannel[]) => {
-            if (typeof onChannelChange !== "undefined") {
-              onChannelChange(channels);
-            }
-          }}
-        />
-      }
+      action={button}
     />
   );
 };