模特管理

src/components/ModelSearchBar.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Search, Plus } from 'lucide-react'
+
+interface ModelSearchBarProps {
+  searchTerm: string
+  onSearchChange: (value: string) => void
+  onCreateNew: () => void
+}
+
+const ModelSearchBar: React.FC<ModelSearchBarProps> = ({
+  searchTerm,
+  onSearchChange,
+  onCreateNew
+}) => {
+  return (
+    <div className="flex items-center justify-between mb-6">
+      <div className="relative flex-1 max-w-md">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
+        <input
+          type="text"
+          placeholder="搜索模特编号..."
+          value={searchTerm}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent w-full"
+        />
+      </div>
+      
+      <button
+        onClick={onCreateNew}
+        className="ml-4 flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+      >
+        <Plus size={20} className="mr-2" />
+        新建模特
+      </button>
+    </div>
+  )
+}
+
+export default ModelSearchBar