fix vendor status customer toggles and cps

apps/web/src/pages/CustomersPage.jsx

@@ -4,11 +4,12 @@ import { Icon, PageTitle, Toolbar, Panel, ApiNotice, Modal, ConfirmDialog, Simpl
 import { gateways } from '../fixtures/devFixtures.js';
 import { explainApiError } from '../api.js';
 
-export function CustomersPage({ customerRows, setCustomerRows, addRechargeRecord, apiLoading, apiError, refreshApi, can = () => true, onCreateCustomer, onUpdateCustomer, onDeleteCustomer, onRechargeCustomer }) {
+export function CustomersPage({ customerRows, setCustomerRows, addRechargeRecord, apiLoading, apiError, refreshApi, can = () => true, onCreateCustomer, onUpdateCustomer, onToggleCustomerStatus, onDeleteCustomer, onRechargeCustomer }) {
   const [showCreateCustomer, setShowCreateCustomer] = useState(false);
   const [editingCustomer, setEditingCustomer] = useState(null);
   const [rechargeCustomer, setRechargeCustomer] = useState(null);
   const [deleteCustomerTarget, setDeleteCustomerTarget] = useState(null);
+  const [statusCustomerTarget, setStatusCustomerTarget] = useState(null);
   const [newCustomer, setNewCustomer] = useState({ name: '', contact: '', phone: '', email: '' });
   const [editCustomerForm, setEditCustomerForm] = useState({ name: '', contact: '', phone: '', email: '' });
   const [rechargeForm, setRechargeForm] = useState({ amount: '', remark: '' });
@@ -125,6 +126,21 @@ export function CustomersPage({ customerRows, setCustomerRows, addRechargeRecord
       setActionError(explainApiError(error));
     }
   };
+  const toggleCustomerStatus = async (customer) => {
+    setActionError('');
+    try {
+      if (onToggleCustomerStatus) {
+        await onToggleCustomerStatus(customer);
+      } else {
+        setCustomerRows((rows) => rows.map((item) => (
+          item.id === customer.id ? { ...item, status: item.status === '启用' ? '停用' : '启用' } : item
+        )));
+      }
+      setStatusCustomerTarget(null);
+    } catch (error) {
+      setActionError(explainApiError(error));
+    }
+  };
 
   return (
     <>
@@ -136,7 +152,7 @@ export function CustomersPage({ customerRows, setCustomerRows, addRechargeRecord
       <ApiNotice loading={apiLoading} error={apiError || actionError} onRetry={refreshApi} />
       <Toolbar>
         <Field label="客户名称"><Input placeholder="搜索客户名称 / 域名" /></Field>
-        <Field label="状态"><Select defaultValue="all"><option value="all">全部状态</option><option>启用</option><option>观察</option><option>停用</option></Select></Field>
+        <Field label="状态"><Select defaultValue="all"><option value="all">全部状态</option><option>启用</option><option>停用</option></Select></Field>
         <Button icon={<Icon type="search" />}>查询</Button>
       </Toolbar>
       <section className="master-detail">
@@ -157,6 +173,11 @@ export function CustomersPage({ customerRows, setCustomerRows, addRechargeRecord
                   <div className="table-actions">
                     {canManageCustomers ? <Button size="sm" variant="outline" onClick={() => openEditCustomer(row)}>编辑</Button> : null}
                     {canManageRecharges ? <Button size="sm" variant="secondary" onClick={() => openRechargeCustomer(row)}>充值</Button> : null}
+                    {canManageCustomers ? (
+                      <Button size="sm" variant={row.status === '启用' ? 'ghost' : 'secondary'} onClick={() => setStatusCustomerTarget(row)}>
+                        {row.status === '启用' ? '禁用' : '启用'}
+                      </Button>
+                    ) : null}
                     {canManageCustomers ? <Button size="sm" variant="danger" onClick={() => setDeleteCustomerTarget(row)}>删除</Button> : null}
                     {!canManageCustomers && !canManageRecharges ? '-' : null}
                   </div>
@@ -238,6 +259,17 @@ export function CustomersPage({ customerRows, setCustomerRows, addRechargeRecord
           <p>确认删除客户「{deleteCustomerTarget.name}」吗？删除后该客户将不再出现在客户列表中。</p>
         </ConfirmDialog>
       ) : null}
+      {statusCustomerTarget ? (
+        <ConfirmDialog
+          title={`${statusCustomerTarget.status === '启用' ? '禁用' : '启用'}客户确认`}
+          confirmLabel={`确认${statusCustomerTarget.status === '启用' ? '禁用' : '启用'}`}
+          confirmVariant="primary"
+          onCancel={() => setStatusCustomerTarget(null)}
+          onConfirm={() => void toggleCustomerStatus(statusCustomerTarget)}
+        >
+          <p>确认{statusCustomerTarget.status === '启用' ? '禁用' : '启用'}客户「{statusCustomerTarget.name}」吗？</p>
+        </ConfirmDialog>
+      ) : null}
     </>
   );
 }