完善列表和编辑页面的数据验证和交互，实现服务端和客户端两重数据验证

app/components/ui/SearchBox.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
 
 interface SearchBoxProps {
   placeholder?: string;
@@ -17,6 +17,11 @@ export function SearchBox({
   className = '',
   name = 'keyword'
 }: SearchBoxProps) {
+  const [inputValue, setInputValue] = useState(defaultValue);
+  const [isHovering, setIsHovering] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
@@ -25,28 +30,67 @@ export function SearchBox({
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+    
     // 对于没有按钮的输入框，我们希望在输入时就触发搜索
     if (className.includes('form-input-only')) {
-      onSearch(e.target.value);
+      onSearch(value);
     }
   };
 
+  const handleClear = () => {
+    setInputValue('');
+    if (inputRef.current) {
+      inputRef.current.value = '';
+      inputRef.current.focus();
+    }
+    onSearch('');
+  };
+
+  const handleMouseEnter = () => {
+    setIsHovering(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovering(false);
+  };
+
   const isIconOnly = buttonText === '';
   const isFilterControl = className.includes('filter-control');
+  const hasButton = !className.includes('form-input-only');
   const searchBoxClass = `search-box ${className} ${isFilterControl ? 'search-box-row' : ''}`;
+  const showClearButton = inputValue && isHovering;
 
   return (
     <form onSubmit={handleSubmit} className={searchBoxClass}>
-      <input
-        type="text" 
-        id={name}
-        name={name}
-        className={`form-input ${isFilterControl ? 'flex-1' : ''}`}
-        placeholder={placeholder}
-        defaultValue={defaultValue}
-        onChange={handleChange}
-      />
-      {!className.includes('form-input-only') && (
+      <div 
+        className={`relative ${hasButton ? 'flex-1' : 'w-full'}`}
+        ref={containerRef}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <input
+          type="text" 
+          id={name}
+          name={name}
+          className={`form-input w-full ${hasButton ? 'rounded-r-none' : ''}`}
+          placeholder={placeholder}
+          defaultValue={defaultValue}
+          onChange={handleChange}
+          ref={inputRef}
+        />
+        {showClearButton && (
+          <button
+            type="button"
+            className="search-box-clear"
+            onClick={handleClear}
+          >
+            <i className="ri-close-circle-line"></i>
+          </button>
+        )}
+      </div>
+      {hasButton && (
         <button
           type="submit" 
           className={`search-button ${isIconOnly ? "icon-only-btn" : ""}`}