From 06252b2c066ff256be4695625a44a362e1083d3b Mon Sep 17 00:00:00 2001
From: zichun <zhuzichunhogan@gmail.com>
Date: Mon, 1 Jun 2026 18:15:13 +0800
Subject: [PATCH] feat(usr): 用户单据权限页签条 PermissionTabs REQ-USR-001

---
 frontend/src/pages/usr/UserDetail/PermissionTabs.tsx | 35 +++++++++++++++++++++++++++++++++++
 frontend/tests/unit/PermissionTabs.test.tsx          | 40 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 0 deletions(-)
 create mode 100644 frontend/src/pages/usr/UserDetail/PermissionTabs.tsx
 create mode 100644 frontend/tests/unit/PermissionTabs.test.tsx

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 (
+    <Tabs
+      className={styles.permTabs}
+      defaultActiveKey={GROUP_KEY}
+      activeKey={activeKey}
+      onChange={onChange}
+      items={items}
+    />
+  );
+}
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(
+    <PermissionTabs>
+      <div data-testid="perm-children">权限列表内容</div>
+    </PermissionTabs>,
+    { 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);
+  });
+});
--
libgit2 0.22.2