[Studio] feat: add navigation search shortcut

web/src/layouts/MainLayout.tsx

@@ -15,13 +15,14 @@
  * limitations under the License.
  */
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   Layout,
   Menu,
   Breadcrumb,
   Avatar,
   Dropdown,
+  Empty,
   Input,
   Modal,
 } from 'antd';
@@ -48,6 +49,11 @@ import {
 } from '@phosphor-icons/react';
 import { useLang } from '../i18n/LangContext';
 import { useTheme } from '../theme/ThemeContext';
+import {
+  filterNavigationEntries,
+  isNavigationSearchShortcut,
+  type NavigationSearchEntry,
+} from './navigationSearch';
 
 const { Sider, Content } = Layout;
 
@@ -61,6 +67,16 @@ const MainLayout = () => {
   const [searchText, setSearchText] = useState('');
   const { lang, setLang, t } = useLang();
 
+  useEffect(() => {
+    const openSearchWithShortcut = (event: KeyboardEvent) => {
+      if (!isNavigationSearchShortcut(event)) return;
+      event.preventDefault();
+      setSearchOpen(true);
+    };
+    window.addEventListener('keydown', openSearchWithShortcut);
+    return () => window.removeEventListener('keydown', openSearchWithShortcut);
+  }, []);
+
   const menuItems = [
     { key: '/', icon: <House size={iconSize} weight="duotone" />, label: t('nav.home') },
     {
@@ -149,6 +165,10 @@ const MainLayout = () => {
   const siderBg = darkMode ? '#2a2a2e' : '#ffffff';
   const topBarBg = darkMode ? 'rgba(42,42,46,0.85)' : 'rgba(255,255,255,0.7)';
   const logoColor = darkMode ? '#e5e5e5' : '#1b1b1a';
+  const navigationEntries: NavigationSearchEntry[] = menuItems
+    .flatMap((item) => ('children' in item && item.children ? item.children : [item]))
+    .map((item) => ({ key: String(item.key), label: String(item.label), icon: item.icon }));
+  const searchResults = filterNavigationEntries(navigationEntries, searchText);
 
   return (
     <>
@@ -332,23 +352,21 @@ const MainLayout = () => {
             prefix={<MagnifyingGlass size={18} color="#9CA3AF" />}
             value={searchText}
             onChange={(e) => setSearchText(e.target.value)}
+            onPressEnter={() => {
+              const firstResult = searchResults[0];
+              if (!firstResult) return;
+              navigate(firstResult.key);
+              setSearchOpen(false);
+              setSearchText('');
+            }}
             autoFocus
             allowClear
             style={{ fontSize: 16 }}
           />
         </div>
         <div style={{ maxHeight: 360, overflow: 'auto', padding: '8px 12px 12px' }}>
-          {menuItems
-            .flatMap((item) => {
-              if ('children' in item && item.children) return item.children;
-              return [item];
-            })
-            .filter((item) => {
-              if (!searchText) return true;
-              const label = String(item.label).toLowerCase();
-              return label.includes(searchText.toLowerCase());
-            })
-            .map((item) => (
+          {searchResults.length ? (
+            searchResults.map((item) => (
               <div
                 key={item.key}
                 onClick={() => {
@@ -376,7 +394,10 @@ const MainLayout = () => {
                 {item.icon}
                 <span>{item.label}</span>
               </div>
-            ))}
+            ))
+          ) : (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="未找到匹配页面" />
+          )}
         </div>
       </Modal>
     </>

web/src/layouts/navigationSearch.test.ts

@@ -0,0 +1,38 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { filterNavigationEntries, isNavigationSearchShortcut } from './navigationSearch';
+
+describe('navigation search helpers', () => {
+  const entries = [
+    { key: '/cluster', label: 'RocketMQ 集群' },
+    { key: '/settings', label: 'Settings' },
+  ];
+
+  it('filters labels case-insensitively and ignores query whitespace', () => {
+    expect(filterNavigationEntries(entries, ' SETTINGS ')).toEqual([entries[1]]);
+    expect(filterNavigationEntries(entries, '集群')).toEqual([entries[0]]);
+  });
+
+  it('recognizes Control/Command-K but rejects alternative shortcuts', () => {
+    expect(isNavigationSearchShortcut({ key: 'k', ctrlKey: true, metaKey: false, altKey: false })).toBe(true);
+    expect(isNavigationSearchShortcut({ key: 'K', ctrlKey: false, metaKey: true, altKey: false })).toBe(true);
+    expect(isNavigationSearchShortcut({ key: 'k', ctrlKey: false, metaKey: false, altKey: false })).toBe(false);
+    expect(isNavigationSearchShortcut({ key: 'k', ctrlKey: true, metaKey: false, altKey: true })).toBe(false);
+  });
+});

web/src/layouts/navigationSearch.ts

@@ -0,0 +1,42 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReactNode } from 'react';
+
+export interface NavigationSearchEntry {
+  key: string;
+  label: string;
+  icon?: ReactNode;
+}
+
+export function filterNavigationEntries(
+  entries: NavigationSearchEntry[],
+  query: string,
+): NavigationSearchEntry[] {
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  if (!normalizedQuery) return entries;
+  return entries.filter((entry) => entry.label.toLocaleLowerCase().includes(normalizedQuery));
+}
+
+export function isNavigationSearchShortcut(event: {
+  key: string;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  altKey: boolean;
+}): boolean {
+  return event.key.toLocaleLowerCase() === 'k' && (event.metaKey || event.ctrlKey) && !event.altKey;
+}