diff --git a/frontend/src/pages/usr/UserDetail/PermissionTabs.tsx b/frontend/src/pages/usr/UserDetail/PermissionTabs.tsx
new file mode 100644
index 0000000..f4777f0
--- /dev/null
+++ b/frontend/src/pages/usr/UserDetail/PermissionTabs.tsx
@@ -0,0 +1,35 @@
+// REQ-USR-001: 权限页签条(权限组 active 承载权限列表 + 5 占位查看权限页签 disabled,D9)
+import type { ReactNode } from 'react';
+import { Tabs } from 'antd';
+import { TAB_PERM_GROUP, PLACEHOLDER_TABS } from './constants';
+import styles from './UserDetail.module.css';
+
+export interface PermissionTabsProps {
+ activeKey?: string;
+ onChange?(key: string): void;
+ children: ReactNode;
+}
+
+const GROUP_KEY = 'group';
+
+export default function PermissionTabs({ activeKey, onChange, children }: PermissionTabsProps) {
+ const items = [
+ { key: GROUP_KEY, label: TAB_PERM_GROUP, children },
+ ...PLACEHOLDER_TABS.map((label, idx) => ({
+ key: 'placeholder-' + idx,
+ label,
+ disabled: true,
+ children: null,
+ })),
+ ];
+
+ return (
+
+ );
+}
diff --git a/frontend/tests/unit/PermissionTabs.test.tsx b/frontend/tests/unit/PermissionTabs.test.tsx
new file mode 100644
index 0000000..9b3128e
--- /dev/null
+++ b/frontend/tests/unit/PermissionTabs.test.tsx
@@ -0,0 +1,40 @@
+// REQ-USR-001: PermissionTabs 权限页签条单测(权限组 active + 5 占位页签 disabled,D9)
+import { describe, it, expect } from 'vitest';
+import { screen } from '@testing-library/react';
+import { renderShell } from './renderShell';
+import PermissionTabs from '../../src/pages/usr/UserDetail/PermissionTabs';
+import { PLACEHOLDER_TABS } from '../../src/pages/usr/UserDetail/constants';
+
+function setup() {
+ renderShell(
+
+ 权限列表内容
+ ,
+ { preloadedAuth: { token: 't', user: { id: 1, sUserName: 'a', sUserType: 'x', sLanguage: '中文' } } },
+ );
+}
+
+describe('PermissionTabs', () => {
+ it('renders 权限组 active with children', () => {
+ setup();
+ const groupTab = screen.getByRole('tab', { name: '权限组' });
+ expect(groupTab).toBeInTheDocument();
+ expect(groupTab.getAttribute('aria-selected')).toBe('true');
+ expect(screen.getByTestId('perm-children')).toBeInTheDocument();
+ });
+
+ it('renders 5 placeholder tabs disabled', () => {
+ setup();
+ for (const name of PLACEHOLDER_TABS) {
+ const tab = screen.getByRole('tab', { name });
+ expect(tab).toBeInTheDocument();
+ expect(tab.getAttribute('aria-disabled')).toBe('true');
+ }
+ });
+
+ it('placeholder tabs do not render permission list content', () => {
+ setup();
+ // 占位页签 disabled 无法切换,权限列表内容只在权限组面板内渲染(只 1 处)
+ expect(screen.getAllByTestId('perm-children')).toHaveLength(1);
+ });
+});