feat: 页面优化

src/pages/Admin/Dept/components/UserTable.tsx

@@ -1,7 +1,8 @@
-import { MEMBER_TYPE_COLORS, MEMBER_TYPE_LABELS } from '@/defines';
+import { MEMBER_TYPE_COLORS, MEMBER_TYPE_LABELS, STATUS_ENABLED } from '@/defines';
 import { BindRolesDrawer } from '@/pages/Admin/_shared/BindRolesDrawer';
 import { UserPermDrawer } from '@/pages/Admin/_shared/UserPermDrawer';
 import { ProductRolesBase, useUserProductRoles } from '@/pages/Admin/_shared/useUserProductRoles';
+import { StopOutlined } from '@ant-design/icons';
 import { Spin, Table, Tag } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { useMemo, useState } from 'react';
@@ -44,6 +45,9 @@ export const DeptUserTable = ({ users, productRolesBase }: DeptUserTableProps) =
               >
                 <Tag color="purple" className="mr-0 self-center">
                   {p.productName}
+                  {p.productStatus !== STATUS_ENABLED && (
+                    <StopOutlined className="ml-1 text-(--ant-color-error)!" />
+                  )}
                 </Tag>
                 <Tag
                   color={MEMBER_TYPE_COLORS[p.memberType ?? ''] ?? 'default'}

src/pages/Admin/User/index.tsx

@@ -7,6 +7,7 @@ import {
 } from '@/pages/Admin/_shared/useUserProductRoles';
 import { fetchUpdateUserStatus, fetchUserList } from '@/services/user';
 import { unixTimeFormat } from '@/utils/timeUtils';
+import { StopOutlined } from '@ant-design/icons';
 import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { Button, Popconfirm, Tag, message } from 'antd';
@@ -70,6 +71,9 @@ export default function UserPage() {
               >
                 <Tag color="purple" className="mr-0 self-center">
                   {p.productName}
+                  {p.productStatus !== STATUS_ENABLED && (
+                    <StopOutlined className="ml-1 text-(--ant-color-error)!" />
+                  )}
                 </Tag>
                 <Tag
                   color={MEMBER_TYPE_COLORS[p.memberType ?? ''] ?? 'default'}

src/pages/Admin/_shared/useUserProductRoles.ts

@@ -7,6 +7,7 @@ import { useEffect, useMemo, useState } from 'react';
 export interface ProductRoleInfo {
   productName: string;
   productCode: string;
+  productStatus?: number;
   memberType?: string;
   roleNames: string[];
 }
@@ -14,6 +15,7 @@ export interface ProductRoleInfo {
 export interface ProductRolesBase {
   roleMap: Map<number, { productName: string; roleName: string }>;
   memberMap: Map<number, { productName: string; memberType: string }[]>;
+  productStatusMap: Map<string, number>;
   loading: boolean;
 }
 
@@ -24,6 +26,7 @@ export const useProductRolesBase = (): ProductRolesBase => {
   const [memberMap, setMemberMap] = useState<
     Map<number, { productName: string; memberType: string }[]>
   >(new Map());
+  const [productStatusMap, setProductStatusMap] = useState<Map<string, number>>(new Map());
   const [loading, setLoading] = useState(false);
 
   useEffect(() => {
@@ -33,6 +36,10 @@ export const useProductRolesBase = (): ProductRolesBase => {
         const productRes = await fetchProductList({ pageSize: 999 });
         const products = productRes.data ?? [];
 
+        const statusMap = new Map<string, number>();
+        products.forEach((p) => statusMap.set(p.name, p.status));
+        setProductStatusMap(statusMap);
+
         const [memberResults, roleResults] = await Promise.all([
           Promise.all(
             products.map((p) => fetchMemberList({ productCode: p.code, pageSize: 9999 })),
@@ -64,7 +71,7 @@ export const useProductRolesBase = (): ProductRolesBase => {
     load();
   }, []);
 
-  return { roleMap, memberMap, loading };
+  return { roleMap, memberMap, productStatusMap, loading };
 };
 
 export const useUserProductRoles = (
@@ -72,7 +79,7 @@ export const useUserProductRoles = (
   base: ProductRolesBase,
   refreshKey?: number,
 ) => {
-  const { roleMap, memberMap } = base;
+  const { roleMap, memberMap, productStatusMap } = base;
   const [userRoleIds, setUserRoleIds] = useState<Map<number, number[]>>(new Map());
 
   useEffect(() => {
@@ -104,6 +111,7 @@ export const useUserProductRoles = (
           productRoles.set(roleInfo.productName, {
             productName: roleInfo.productName,
             productCode: '',
+            productStatus: productStatusMap.get(roleInfo.productName),
             roleNames: [],
           });
         }
@@ -116,6 +124,7 @@ export const useUserProductRoles = (
           productRoles.set(m.productName, {
             productName: m.productName,
             productCode: '',
+            productStatus: productStatusMap.get(m.productName),
             memberType: m.memberType,
             roleNames: [],
           });
@@ -127,7 +136,7 @@ export const useUserProductRoles = (
       map.set(userId, [...productRoles.values()]);
     }
     return map;
-  }, [userIds, userRoleIds, roleMap, memberMap]);
+  }, [userIds, userRoleIds, roleMap, memberMap, productStatusMap]);
 
   return { userProductInfo };
 };