perms-system-web/src/pages/Admin/Product/Detail/tabs/PermTab.tsx

import { PermTree } from '@/pages/Admin/_shared/PermTree';
import { fetchPermList } from '@/services/perm';
import { Spin, Typography } from 'antd';
import { useEffect, useState } from 'react';

interface PermTabProps {
  productCode: string;
}

export const PermTab = ({ productCode }: PermTabProps) => {
  const [loading, setLoading] = useState(false);
  const [perms, setPerms] = useState<API.PermItem[]>([]);

  useEffect(() => {
    setLoading(true);
    fetchPermList({ productCode, pageSize: 9999 })
      .then((res) => setPerms(res.data ?? []))
      .finally(() => setLoading(false));
  }, [productCode]);

  return (
    <Spin spinning={loading}>
      <Typography.Text type="secondary" className="block mb-3">
        共 {perms.length} 条权限（由产品服务端同步，只读）
      </Typography.Text>
      <div className="bg-(--ant-color-fill-quaternary) rounded p-4">
        <PermTree mode="view" allPerms={perms} checkedPermIds={perms.map((p) => p.id)} />
      </div>
    </Spin>
  );
};