封装公共组件，调整样式文件的布局，修改路由页面样式

app/components/ui/SearchBox.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button } from './Button';
 
 interface SearchBoxProps {
   placeholder?: string;
@@ -32,21 +31,29 @@ export function SearchBox({
     }
   };
 
+  const isIconOnly = buttonText === '';
+  const isFilterControl = className.includes('filter-control');
+  const searchBoxClass = `search-box ${className} ${isFilterControl ? 'search-box-row' : ''}`;
+
   return (
-    <form onSubmit={handleSubmit} className={`search-box ${className}`}>
-      <input 
+    <form onSubmit={handleSubmit} className={searchBoxClass}>
+      <input
         type="text" 
         id={name}
         name={name}
-        className={className.includes('form-input-only') ? "form-input" : "form-input rounded-r-none"}
+        className={`form-input ${isFilterControl ? 'flex-1' : ''}`}
         placeholder={placeholder}
         defaultValue={defaultValue}
         onChange={handleChange}
       />
-      {buttonText && !className.includes('form-input-only') && (
-        <Button type="primary" icon="ri-search-line" className="rounded-l-none">
-          {buttonText}
-        </Button>
+      {!className.includes('form-input-only') && (
+        <button
+          type="submit" 
+          className={`search-button ${isIconOnly ? "icon-only-btn" : ""}`}
+        >
+          <i className="ri-search-line"></i>
+          {buttonText && <span>{buttonText}</span>}
+        </button>
       )}
     </form>
   );