1 files changed, 80 insertions, 0 deletions
diff --git a/src/components/rules/RulesHeader.tsx b/src/components/rules/RulesHeader.tsx
new file mode 100644
index 0000000..f15a863
--- /dev/null
+++ b/src/components/rules/RulesHeader.tsx
@@ -0,0 +1,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>
+  );
+}