完成评查点分组列表和评查点列表的页面，封装部分组件，重新构造样式文件结构

2025-03-26 18:39:42 +08:00
parent 97ccf5a077
commit d9b9ce4676
34 changed files with 3281 additions and 3777 deletions
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Button } from './Button';
+
+interface SearchBoxProps {
+  placeholder?: string;
+  defaultValue?: string;
+  onSearch: (value: string) => void;
+  buttonText?: string;
+  className?: string;
+  name?: string;
+}
+
+export function SearchBox({
+  placeholder = '请输入搜索内容',
+  defaultValue = '',
+  onSearch,
+  buttonText = '搜索',
+  className = '',
+  name = 'keyword'
+}: SearchBoxProps) {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const value = formData.get(name) as string;
+    onSearch(value);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // 对于没有按钮的输入框，我们希望在输入时就触发搜索
+    if (className.includes('form-input-only')) {
+      onSearch(e.target.value);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={`search-box ${className}`}>
+      <input 
+        type="text" 
+        id={name}
+        name={name}
+        className={className.includes('form-input-only') ? "form-input" : "form-input rounded-r-none"}
+        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>
+      )}
+    </form>
+  );
+}