fix(ui): resolve invalid hook call in search result page (#669)

## What type of PR is this?

/kind bug

## What this PR does / why we need it:

This PR resolves an invalid hook call in the search result page by
moving the `useTranslation` hook inside function components, fixing a
runtime error caused by incorrect hook usage. It ensures that hooks are
only called within React function components.

## Which issue(s) this PR fixes:

Fixes #

ui/src/pages/result/index.tsx

@@ -32,7 +32,6 @@ import { useAxios } from '@/utils/request'
 import styles from './styles.module.less'
 
 const { Search } = Input
-const { t } = useTranslation()
 const Option = AutoComplete.Option
 
 export const CustomDropdown = props => {
@@ -47,9 +46,7 @@ export const CustomDropdown = props => {
         >
           <Option value={option.value}>
             <span>{option.value}</span> -{' '}
-            <span style={{ color: '#999' }}>
-              {option.value || t('DefaultTag')}
-            </span>
+            <span style={{ color: '#999' }}>{option.value || <></>}</span>
           </Option>
         </div>
       ))}
@@ -58,7 +55,6 @@ export const CustomDropdown = props => {
 }
 
 const Result = () => {
-  const { t } = useTranslation()
   const location = useLocation()
   const navigate = useNavigate()
   const [pageData, setPageData] = useState<any>()
@@ -76,6 +72,8 @@ const Result = () => {
     getHistoryList('naturalHistory') || [],
   )
 
+  const { t } = useTranslation()
+
   function cacheNaturalHistory(key, val) {
     const result = cacheHistory(key, val)
     setNaturalOptions(result)