1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
import { useTranslation } from 'react-i18next';
import {
HeaderActions,
HeaderButton,
HeaderSearch,
HeaderTab,
HeaderTabs,
HeaderTitle,
PageHeader,
} from '~/components/shared/PageHeader';
import { RotateIcon } from '~/components/shared/RotateIcon';
import { TextFilter } from '~/components/shared/TextFilter';
import type { RulesTabKey } from '~/modules/rules/utils';
import { ruleFilterText } from '~/store/rules';
type Props = {
activeTab: RulesTabKey;
setActiveTab: (tab: RulesTabKey) => void;
/** 搜索后可见的规则数 */
ruleCount: number;
/** 提供商总数，决定标签是否出现 */
providerCount: number;
/** 搜索后可见的提供商数，只影响标签上的计数 */
visibleProviderCount: number;
onUpdateAllProviders: () => void;
isUpdatingProviders: boolean;
};
export function RulesHeader({
activeTab,
setActiveTab,
ruleCount,
providerCount,
visibleProviderCount,
onUpdateAllProviders,
isUpdatingProviders,
}: Props) {
const { t } = useTranslation();
return (
<PageHeader>
<HeaderTitle>{t('Rules')}</HeaderTitle>
<HeaderTabs label={t('Rules')}>
<HeaderTab
active={activeTab === 'rules'}
label={t('Rules')}
count={ruleCount}
onClick={() => setActiveTab('rules')}
/>
{providerCount > 0 ? (
<HeaderTab
active={activeTab === 'providers'}
label={t('rule_provider')}
count={visibleProviderCount}
onClick={() => setActiveTab('providers')}
/>
) : null}
</HeaderTabs>
<HeaderSearch>
<TextFilter textAtom={ruleFilterText} placeholder={t('search_rules_placeholder')} />
</HeaderSearch>
<HeaderActions>
{/* 和代理页一致：更新全部只在提供商标签页出现 */}
{activeTab === 'providers' && providerCount > 0 ? (
<HeaderButton
variant="primary"
icon={<RotateIcon isRotating={isUpdatingProviders} />}
label={t('update_all_rule_provider')}
busy={isUpdatingProviders}
onClick={onUpdateAllProviders}
/>
) : null}
</HeaderActions>
</PageHeader>
);
}
|
