在可用列表区域添加筛选区域

src/pages/patient/components/RegisterAvailableFilterBar.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Row, Col, Select, Segmented } from 'antd';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/states/store';
+
+interface Props {
+  selected: 'protocol' | 'view';
+  setSelected: (val: 'protocol' | 'view') => void;
+  bodyPart: string | undefined;
+  setBodyPart: (val: string | undefined) => void;
+  patientType: string | undefined;
+  setPatientType: (val: string | undefined) => void;
+  enabled: string | undefined;
+  setEnabled: (val: string | undefined) => void;
+}
+
+const RegisterAvailableFilterBar: React.FC<Props> = ({
+  selected,
+  setSelected,
+  bodyPart,
+  setBodyPart,
+  patientType,
+  setPatientType,
+  enabled,
+  setEnabled,
+}) => {
+  const bodyParts = useSelector((state: RootState) => state.bodyPart.items); // [{ label, value }]
+  const patientTypes = useSelector(
+    (state: RootState) => state.patientType.items
+  ); // [{ label, value }]
+  const enabledOptions = [
+    { label: '全部', value: undefined },
+    { label: '启用', value: 'enabled' },
+    { label: '停用', value: 'disabled' },
+  ];
+
+  return (
+    <div style={{ padding: 16, borderBottom: '1px solid #f0f0f0' }}>
+      <Row gutter={[16, 16]}>
+        <Col xs={24} sm={12} md={6} lg={6} xl={4}>
+          <Segmented
+            options={[
+              { label: '协议', value: 'protocol' },
+              { label: '体位', value: 'view' },
+            ]}
+            value={selected}
+            onChange={(val) => setSelected(val as 'protocol' | 'view')}
+            block
+          />
+        </Col>
+        <Col xs={24} sm={12} md={6} lg={6} xl={6}>
+          <Select
+            allowClear
+            style={{ width: '100%' }}
+            placeholder="身体部位"
+            options={bodyParts}
+            value={bodyPart}
+            onChange={setBodyPart}
+          />
+        </Col>
+        <Col xs={24} sm={12} md={6} lg={6} xl={6}>
+          <Select
+            allowClear
+            style={{ width: '100%' }}
+            placeholder="患者类型"
+            options={patientTypes}
+            value={patientType}
+            onChange={setPatientType}
+          />
+        </Col>
+        <Col xs={24} sm={12} md={6} lg={6} xl={4}>
+          <Select
+            allowClear
+            style={{ width: '100%' }}
+            placeholder="是否启用"
+            options={enabledOptions}
+            value={enabled}
+            onChange={setEnabled}
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default RegisterAvailableFilterBar;

src/pages/patient/components/register.available.list.tsx

@@ -1,10 +1,14 @@
 import React, { useState } from 'react';
-import { Segmented, Card } from 'antd';
+import { Card } from 'antd';
 import ProtocolSelectionList from './register.protocol.list';
 import RegisterViewList from './register.available.view.list';
+import RegisterAvailableFilterBar from './RegisterAvailableFilterBar';
 
 const RegisterAvailableList: React.FC = () => {
   const [selected, setSelected] = useState<'protocol' | 'view'>('protocol');
+  const [bodyPart, setBodyPart] = useState<string | undefined>(undefined);
+  const [patientType, setPatientType] = useState<string | undefined>(undefined);
+  const [enabled, setEnabled] = useState<string | undefined>(undefined);
 
   return (
     <Card
@@ -16,16 +20,18 @@ const RegisterAvailableList: React.FC = () => {
         padding: 0,
       }}
     >
-      <div style={{ padding: 16, borderBottom: '1px solid #f0f0f0' }}>
-        <Segmented
-          options={[
-            { label: '协议', value: 'protocol' },
-            { label: '体位', value: 'view' },
-          ]}
-          value={selected}
-          onChange={(val) => setSelected(val as 'protocol' | 'view')}
-        />
-      </div>
+      {/* 过滤区域 */}
+      <RegisterAvailableFilterBar
+        selected={selected}
+        setSelected={setSelected}
+        bodyPart={bodyPart}
+        setBodyPart={setBodyPart}
+        patientType={patientType}
+        setPatientType={setPatientType}
+        enabled={enabled}
+        setEnabled={setEnabled}
+      />
+      {/* 列表区域 */}
       <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
         {selected === 'protocol' ? (
           <ProtocolSelectionList />