safety-eval-service-frontend/.cursor/skills/specs/06-搜索区规范/01-搜索表单组件/SKILL.md

name	description
jjb-search-form	定义 JJB 项目搜索表单组件使用规范。在使用 SearchForm、formLine、Form.Item 或 PageLayout 集成搜索区时使用。必须参考 MD/d.ts 文档。

搜索区规范（一级页面）

搜索表单组件

• 除提示词明确不需要的情况下，所有页面搜索区 必须 使用：

  import SearchForm from '~/components/SearchForm'
  

  必须严格参考node_modules中对应依赖包的 MD 文档或 d.ts 文件！不得猜测组件属性！

• FormLine 规范：

  SearchForm 的 formLine 属性中，所有搜索控件 必须 使用 ControlWrapper 封装：

  import ControlWrapper from '@cqsjjb/jjb-react-admin-component/ControlWrapper'
  

  控件	写法
  文本输入	<ControlWrapper.Input label="标签" placeholder="请输入" allowClear />
  下拉选择	<ControlWrapper.Select label="标签" placeholder="请选择" allowClear style={{ width: "100%" }}>...</ControlWrapper.Select>
  日期范围	<ControlWrapper.DatePicker.RangePicker label="标签" />
  级联选择	<ControlWrapper.Cascader label="标签" placeholder="请选择" options={...} />
  树选择	<ControlWrapper.TreeSelect label="标签" placeholder="请选择" treeData={...} />

  注意：ControlWrapper 没有 Custom 属性，不要自行拼装。

• 布局挂载规范：

  • 标准布局：若页面结构简单，必须将 SearchForm 放置在 PageLayout 的 formLine 属性中，以实现搜索区与页面头部的紧凑集成。

  • 复杂布局：若搜索需求涉及复杂交互或多行展示，可根据实际场景将 SearchForm 放置于 PageLayout 的主体内容区。

代码演示

import React, { useState, useEffect } from 'react';
import { Button, Form, Table } from 'antd';
import PageLayout from '@cqsjjb/jjb-react-admin-component/PageLayout';
import SearchForm from '~/components/SearchForm';
import ControlWrapper from '@cqsjjb/jjb-react-admin-component/ControlWrapper';
import { tools } from '@cqsjjb/jjb-common-lib';

const { router } = tools;

function DemoList(props) {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const getData = async () => {
    setLoading(true);
    try {
      // 请求数据
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    form.setFieldsValue(router.query);
    getData();
  }, []);

  return (
    <PageLayout title="页面标题">
      <SearchForm
        style={{ marginBottom: 24 }}
        form={form}
        loading={loading}
        formLine={[
          <Form.Item key="name" name="name">
            <ControlWrapper.Input label="名称" placeholder="请输入" allowClear />
          </Form.Item>,
        ]}
        onReset={(values) => {
          router.query = { ...router.query, ...values, current: 1, pageSize: 10 };
          getData();
        }}
        onFinish={(values) => {
          router.query = { ...router.query, ...values, current: 1, pageSize: 10 };
          getData();
        }}
      />
      {/* Table ... */}
    </PageLayout>
  );
}