style: shortcut for start to search model

src/pages/llmodels/components/search-input.tsx

@@ -4,8 +4,26 @@ import { useIntl } from '@umijs/max';
 import { Input } from 'antd';
 import React, { useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import styled from 'styled-components';
 import { modelSourceMap, modelSourceValueMap } from '../config';
 
+const SearchInputWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+const Holder = styled.div`
+  pointer-events: none;
+  position: absolute;
+  top: 12px;
+  left: 34px;
+  color: var(--ant-color-text-quaternary);
+  z-index: 10;
+  kbd {
+    border: 1px solid var(--ant-color-border);
+    border-radius: 3px;
+    padding: 0 2px;
+  }
+`;
 const SearchInput: React.FC<{
   modelSource: string;
   onChange: (e: any) => void;
@@ -14,35 +32,58 @@ const SearchInput: React.FC<{
   const { onSearch, onChange, modelSource } = props;
   const intl = useIntl();
   const inputRef = useRef<any>(null);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [value, setValue] = React.useState('');
 
   useHotkeys(hotkeys.FOCUS, (e: any) => {
     e.preventDefault();
     inputRef.current?.focus?.();
   });
 
+  const handleOnChange = (e: any) => {
+    setValue(e.target.value);
+    onChange(e);
+  };
+
   return (
-    <Input
-      ref={inputRef}
-      onPressEnter={onSearch}
-      onChange={onChange}
-      allowClear
-      placeholder={intl.formatMessage(
-        {
-          id: 'model.deploy.search.placeholder'
-        },
-        { source: modelSourceValueMap[modelSource] }
+    <SearchInputWrapper>
+      <Input
+        ref={inputRef}
+        onPressEnter={onSearch}
+        onChange={handleOnChange}
+        onFocus={(e) => {
+          setIsFocused(true);
+          e.stopPropagation();
+        }}
+        onBlur={(e) => {
+          setIsFocused(false);
+          e.stopPropagation();
+        }}
+        allowClear
+        prefix={
+          <IconFont
+            className="font-size-16"
+            type={
+              modelSource === modelSourceMap.huggingface_value
+                ? 'icon-huggingface'
+                : 'icon-tu2'
+            }
+          ></IconFont>
+        }
+      ></Input>
+      {!value && !isFocused && (
+        <Holder
+          dangerouslySetInnerHTML={{
+            __html: intl.formatMessage(
+              {
+                id: 'model.deploy.search.placeholder'
+              },
+              { source: modelSourceValueMap[modelSource] }
+            )
+          }}
+        ></Holder>
       )}
-      prefix={
-        <IconFont
-          className="font-size-16"
-          type={
-            modelSource === modelSourceMap.huggingface_value
-              ? 'icon-huggingface'
-              : 'icon-tu2'
-          }
-        ></IconFont>
-      }
-    ></Input>
+    </SearchInputWrapper>
   );
 };