完善规则配置页交互细节

app/routes/rulesTest.list.tsx

@@ -104,12 +104,19 @@ export async function loader({ request }: LoaderFunctionArgs) {
       ? requestedFilters.subtype
       : ''
   };
-  const scopedPacks = packs.filter(pack =>
+  const scopedByMainTypePacks = packs.filter(pack =>
     pack.documentType === scopedFilters.documentType &&
-    (!scopedFilters.mainType || pack.mainType === scopedFilters.mainType) &&
-    (!scopedFilters.subtype || pack.subtype === scopedFilters.subtype)
+    (!scopedFilters.mainType || pack.mainType === scopedFilters.mainType)
   );
-  const ruleGroupOptions = unique(scopedPacks.flatMap(pack => pack.rules.map(rule => rule.group))).sort((a, b) => a.localeCompare(b, 'zh-CN'));
+  const subtypeOptions = unique(scopedByMainTypePacks.map(pack => pack.subtype));
+  const ruleGroupSourcePacks = scopedFilters.subtype
+    ? scopedByMainTypePacks.filter(pack => pack.subtype === scopedFilters.subtype)
+    : subtypeOptions.length <= 1
+      ? scopedByMainTypePacks
+      : [];
+  const ruleGroupOptions = unique(
+    ruleGroupSourcePacks.flatMap(pack => pack.rules.map(rule => rule.group))
+  ).sort((a, b) => a.localeCompare(b, 'zh-CN'));
   const filters = {
     ...scopedFilters,
     ruleGroup: ruleGroupOptions.includes(requestedFilters.ruleGroup) ? requestedFilters.ruleGroup : ''
@@ -189,10 +196,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
     options: {
       documentTypes,
       mainTypes: unique(packs.filter(pack => pack.documentType === filters.documentType).map(pack => pack.mainType)),
-      subtypes: unique(packs.filter(pack =>
-        pack.documentType === filters.documentType &&
-        (!filters.mainType || pack.mainType === filters.mainType)
-      ).map(pack => pack.subtype)),
+      subtypes: subtypeOptions,
       ruleGroups: ruleGroupOptions
     }
   } satisfies LoaderData);
@@ -222,6 +226,10 @@ export default function RulesTestList() {
 
   const handleFilterChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const { name, value } = event.target;
+    if (name === 'subtype') {
+      updateParams({ subtype: value, documentAttributeType: undefined, ruleGroup: undefined });
+      return;
+    }
     updateParams({ [name]: value });
   };
 
@@ -336,15 +344,6 @@ export default function RulesTestList() {
             </Button>
           }
         >
-          <FilterSelect
-            label="所属规则组"
-            name="ruleGroup"
-            value={filters.ruleGroup}
-            options={options.ruleGroups.map(group => ({ value: group, label: group }))}
-            onChange={handleFilterChange}
-            className="mr-3 w-[22%]"
-          />
-
           <FilterSelect
             label="子类型"
             name="subtype"
@@ -354,6 +353,17 @@ export default function RulesTestList() {
             className="mr-3 w-[18%]"
           />
 
+          <FilterSelect
+            label="所属规则组"
+            name="ruleGroup"
+            value={filters.ruleGroup}
+            options={options.ruleGroups.map(group => ({ value: group, label: group }))}
+            onChange={handleFilterChange}
+            className="mr-3 w-[22%]"
+            disabled={options.ruleGroups.length === 0}
+            placeholder={filters.subtype || options.subtypes.length <= 1 ? '全部' : '请先选择子类型'}
+          />
+
           <SearchFilter
             key={filters.keyword}
             label="搜索"