Split customer management modules

src/apps/admin/AdminCustomersPage.tsx

@@ -1,22 +1,52 @@
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Building2, DollarSign, Plus, TrendingDown, TrendingUp } from 'lucide-react';
-import { Button, Input, Select, Table, Tag, type TableColumn } from '@/components/ui';
+import { Building2, DollarSign, Plus, Trash2, TrendingDown, TrendingUp } from 'lucide-react';
+import { Button, Input, Modal, Select, Table, Tag, type TableColumn } from '@/components/ui';
 import {
   formatCurrency,
   getEnterpriseRecords,
+  saveEnterpriseRecords,
   statusOptions,
   toggleEnterpriseStatus,
   type EnterpriseRecord,
 } from './adminEnterpriseMock';
 
-export function AdminCustomersPage() {
+type AdminCustomersPageProps = {
+  basePath?: string;
+};
+
+function ConfirmModal({ message, onCancel, onConfirm }: { message: string; onCancel: () => void; onConfirm: () => void }) {
+  return (
+    <Modal
+      footer={(
+        <>
+          <Button onClick={onCancel} variant="ghost">取消</Button>
+          <Button onClick={onConfirm}>确认</Button>
+        </>
+      )}
+      onClose={onCancel}
+      open
+      title="操作确认"
+    >
+      <p className="admin-confirm-text">{message}</p>
+    </Modal>
+  );
+}
+
+export function AdminCustomersPage({ basePath = '/admin/customers' }: AdminCustomersPageProps) {
   const navigate = useNavigate();
   const [records, setRecords] = useState<EnterpriseRecord[]>(() => getEnterpriseRecords());
   const [queryId, setQueryId] = useState('');
   const [queryName, setQueryName] = useState('');
   const [queryStatus, setQueryStatus] = useState('all');
   const [filters, setFilters] = useState({ id: '', name: '', status: 'all' });
+  const [confirmAction, setConfirmAction] = useState<{ type: 'toggle' | 'delete'; record: EnterpriseRecord } | null>(null);
+
+  function deleteEnterprise(id: string) {
+    const nextRecords = records.filter((record) => record.id !== id);
+    saveEnterpriseRecords(nextRecords);
+    setRecords(nextRecords);
+  }
 
   const filteredRecords = useMemo(() => records.filter((record) => {
     const matchId = filters.id ? record.id.includes(filters.id) : true;
@@ -61,26 +91,34 @@ export function AdminCustomersPage() {
       render: (record) => (
         <div className="table-actions">
           <Button
-            onClick={() => navigate(`/admin/customers/${record.id}`)}
+            onClick={() => navigate(`${basePath}/${record.id}`)}
             size="sm"
             variant="ghost"
           >
             详情
           </Button>
           <Button
-            onClick={() => navigate(`/admin/customers/${record.id}/edit`)}
+            onClick={() => navigate(`${basePath}/${record.id}/edit`)}
             size="sm"
             variant="ghost"
           >
             编辑
           </Button>
           <Button
-            onClick={() => setRecords(toggleEnterpriseStatus(record.id))}
+            onClick={() => setConfirmAction({ type: 'toggle', record })}
             size="sm"
             variant={record.status === 'active' ? 'danger' : 'secondary'}
           >
             {record.status === 'active' ? '禁用' : '启用'}
           </Button>
+          <Button
+            icon={<Trash2 size={15} />}
+            onClick={() => setConfirmAction({ type: 'delete', record })}
+            size="sm"
+            variant="danger"
+          >
+            删除
+          </Button>
         </div>
       ),
     },
@@ -93,7 +131,7 @@ export function AdminCustomersPage() {
           <p className="eyebrow">管理</p>
           <h1>企业管理</h1>
         </div>
-        <Button icon={<Plus size={16} />} onClick={() => navigate('/admin/customers/new')}>
+        <Button icon={<Plus size={16} />} onClick={() => navigate(`${basePath}/new`)}>
           添加企业
         </Button>
       </div>
@@ -186,6 +224,23 @@ export function AdminCustomersPage() {
         </div>
         <Table columns={columns} data={filteredRecords} rowKey="id" />
       </div>
+
+      {confirmAction ? (
+        <ConfirmModal
+          message={confirmAction.type === 'delete'
+            ? `确认删除企业“${confirmAction.record.name}”吗？`
+            : `确认${confirmAction.record.status === 'active' ? '禁用' : '启用'}企业“${confirmAction.record.name}”吗？`}
+          onCancel={() => setConfirmAction(null)}
+          onConfirm={() => {
+            if (confirmAction.type === 'delete') {
+              deleteEnterprise(confirmAction.record.id);
+            } else {
+              setRecords(toggleEnterpriseStatus(confirmAction.record.id));
+            }
+            setConfirmAction(null);
+          }}
+        />
+      ) : null}
     </section>
   );
 }