From 939466648d40331800f15e886256a0789b7e7623 Mon Sep 17 00:00:00 2001
From: 864907600cc <8115912+ccloli@users.noreply.github.com>
Date: Wed, 7 Aug 2024 15:51:36 +0800
Subject: [PATCH] fix: route matching without query string & toggle button
 wrapping (#195)

* fix: fix route is not matched when url contains query string

* fix: fix mode switch button group wrapping

* fix: fix toggle button text wrapping
---
 packages/designer/src/toolbar/mode-switch.tsx  | 2 +-
 packages/designer/src/toolbar/route-switch.tsx | 5 ++++-
 packages/ui/src/toggle-button.tsx              | 4 +++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/designer/src/toolbar/mode-switch.tsx b/packages/designer/src/toolbar/mode-switch.tsx
index e92342a0..8d114b48 100644
--- a/packages/designer/src/toolbar/mode-switch.tsx
+++ b/packages/designer/src/toolbar/mode-switch.tsx
@@ -9,7 +9,7 @@ export const ModeSwitchTool = observer(() => {
   const designer = useDesigner();
 
   return (
-    <Group attached>
+    <Group attached whiteSpace="nowrap">
       <ToggleButton
         shape="ghost"
         selected={designer.activeView === 'design'}
diff --git a/packages/designer/src/toolbar/route-switch.tsx b/packages/designer/src/toolbar/route-switch.tsx
index 8133c94f..049c5eb0 100644
--- a/packages/designer/src/toolbar/route-switch.tsx
+++ b/packages/designer/src/toolbar/route-switch.tsx
@@ -47,11 +47,14 @@ function PageSelect({ value, onSelect, onRemove, onUpdate, onCopy, options }: Pa
     setVisible(false);
   };
 
-  const current = optionMap[value];
+  const pathname = value?.split?.('?')[0];
+  const current = optionMap[pathname];
   return (
     <ToggleButton
       shape="ghost"
       minWidth={100}
+      maxWidth={200}
+      textAlign="left"
       dropdownProps={{
         open: visible,
         onOpenChange: setVisible,
diff --git a/packages/ui/src/toggle-button.tsx b/packages/ui/src/toggle-button.tsx
index c36b5246..f41df79e 100644
--- a/packages/ui/src/toggle-button.tsx
+++ b/packages/ui/src/toggle-button.tsx
@@ -12,6 +12,7 @@ const buttonStyle = css`
   cursor: pointer;
   color: var(--tango-colors-gray-50);
   padding: 0 8px;
+  white-space: nowrap;
 
   .anticon-down {
     width: 10px;
@@ -201,7 +202,8 @@ export function ToggleButton(props: ToggleButtonProps) {
 
   let btn = (
     <Button css={buttonStyle} className={clazz} type="button" {...rest}>
-      <Box as="span">
+      {/* @ts-ignore textOverflow is available */}
+      <Box as="span" flex="1" overflow="hidden" textOverflow="ellipsis">
         {icon && (
           <Box as="span" className="buttonIcon" mr="s">
             {icon}