feat: 页面优化

src/defines/admin.ts

@@ -11,7 +11,7 @@ export const MEMBER_TYPE_OPTIONS = [
 
 export const STATUS_OPTIONS = [
   { label: '启用', value: 1 },
-  { label: '禁用', value: 0 },
+  { label: '禁用', value: 2 },
 ];
 
 export const MEMBER_TYPE_LABELS: Record<string, string> = {

src/pages/Admin/Product/Detail/index.tsx

@@ -14,6 +14,7 @@ export default function ProductDetailPage() {
   const location = useLocation();
   const [product, setProduct] = useState<API.ProductItem | null>(null);
   const [loading, setLoading] = useState(false);
+  const [roleRefreshKey, setRoleRefreshKey] = useState(0);
 
   const loadProduct = async () => {
     if (!id) return;
@@ -59,12 +60,23 @@ export default function ProductDetailPage() {
           <ProCard>
             <Tabs
               items={[
-                { key: 'roles', label: '角色', children: <RoleTab productCode={product.code} /> },
+                {
+                  key: 'roles',
+                  label: '角色',
+                  children: (
+                    <RoleTab
+                      productCode={product.code}
+                      onRoleChange={() => setRoleRefreshKey((k) => k + 1)}
+                    />
+                  ),
+                },
                 { key: 'perms', label: '权限', children: <PermTab productCode={product.code} /> },
                 {
                   key: 'members',
                   label: '成员',
-                  children: <MemberTab productCode={product.code} />,
+                  children: (
+                    <MemberTab productCode={product.code} roleRefreshKey={roleRefreshKey} />
+                  ),
                 },
               ]}
             />

src/pages/Admin/Product/Detail/tabs/MemberTab.tsx

@@ -26,9 +26,10 @@ import { useEffect, useRef, useState } from 'react';
 
 interface MemberTabProps {
   productCode: string;
+  roleRefreshKey?: number;
 }
 
-export const MemberTab = ({ productCode }: MemberTabProps) => {
+export const MemberTab = ({ productCode, roleRefreshKey }: MemberTabProps) => {
   const actionRef = useRef<ActionType>();
   const [userOptions, setUserOptions] = useState<{ label: string; value: number }[]>([]);
   const [roleMap, setRoleMap] = useState<Map<number, string>>(new Map());
@@ -60,7 +61,7 @@ export const MemberTab = ({ productCode }: MemberTabProps) => {
       (res.data ?? []).forEach((r: API.RoleItem) => map.set(r.id, r.name));
       setRoleMap(map);
     });
-  }, [productCode]);
+  }, [productCode, roleRefreshKey]);
 
   useEffect(() => {
     if (pageMembers.length === 0) {

src/pages/Admin/Product/Detail/tabs/RoleTab.tsx

@@ -1,9 +1,11 @@
+import { STATUS_OPTIONS } from '@/defines';
 import { fetchCreateRole, fetchDeleteRole, fetchRoleList, fetchUpdateRole } from '@/services/role';
 import {
   ActionType,
   DrawerForm,
   ProColumns,
   ProFormDigit,
+  ProFormSelect,
   ProFormText,
   ProTable,
 } from '@ant-design/pro-components';
@@ -33,6 +35,7 @@ const RoleForm = ({ mode, record, trigger, productCode, onSuccess }: RoleFormPro
           name: values.name,
           permsLevel: values.permsLevel,
           remark: values.remark,
+          status: values.status,
         });
         if (!res.success) return false;
       } else {
@@ -60,21 +63,33 @@ const RoleForm = ({ mode, record, trigger, productCode, onSuccess }: RoleFormPro
       tooltip="数字越小权限越高，范围 2-999"
     />
     <ProFormText name="remark" label="备注" />
+    {mode === 'edit' && (
+      <ProFormSelect
+        name="status"
+        label="状态"
+        options={STATUS_OPTIONS}
+        rules={[{ required: true }]}
+      />
+    )}
   </DrawerForm>
 );
 
 interface RoleTabProps {
   productCode: string;
+  onRoleChange?: () => void;
 }
 
-export const RoleTab = ({ productCode }: RoleTabProps) => {
+export const RoleTab = ({ productCode, onRoleChange }: RoleTabProps) => {
   const actionRef = useRef<ActionType>();
   const [permDrawer, setPermDrawer] = useState<{ open: boolean; roleId: number }>({
     open: false,
     roleId: 0,
   });
 
-  const reload = () => actionRef.current?.reload();
+  const reload = () => {
+    actionRef.current?.reload();
+    onRoleChange?.();
+  };
 
   const columns: ProColumns<API.RoleItem>[] = [
     { title: '名称', dataIndex: 'name', width: 160 },
@@ -119,7 +134,7 @@ export const RoleTab = ({ productCode }: RoleTabProps) => {
             const res = await fetchDeleteRole({ id: r.id });
             if (!res.success) return;
             message.success('删除成功');
-            actionRef.current?.reload();
+            reload();
           }}
         >
           <a>删除</a>