feat: complete drainage review and admin search workflows

src/apps/client/ClientSignaturesPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
-import { FilePenLine, Plus, Search, Trash2, Upload } from 'lucide-react';
-import { Button, FileActions, Input, Modal, Pagination, Select, Tag } from '@/components/ui';
-import { clientApi, type ClientSmsApplication, type ClientSmsSignature, type FileRef } from '@/api/adminApi';
+import { Edit3, FilePenLine, Globe2, Plus, Search, Trash2, Upload } from 'lucide-react';
+import { Button, FileActions, Input, Modal, Pagination, Select, Tag, Textarea } from '@/components/ui';
+import { clientApi, type ApplicationReportField, type ClientSmsApplication, type ClientSmsSignature, type FileRef } from '@/api/adminApi';
 
 const statusTone: Record<string, 'success' | 'info' | 'danger' | 'warning'> = {
   approved: 'success',
@@ -26,6 +26,89 @@ function materialToFileRef(material: Record<string, unknown>): FileRef | null {
   return { contentType, fileName, fileObjectId };
 }
 
+type ClientDrainageInfo = {
+  id: string;
+  siteName: string;
+  url: string;
+  remark: string;
+  reportValues: Record<string, unknown>;
+  auditStatus: string;
+  rejectReason?: string | null;
+  submittedAt?: string;
+};
+
+function drainageItems(signature: ClientSmsSignature): ClientDrainageInfo[] {
+  const payload = signature.drainageInfo && typeof signature.drainageInfo === 'object' ? signature.drainageInfo : {};
+  const links = Array.isArray(payload.links) ? payload.links as Array<Record<string, unknown>> : [];
+  return links.map((item) => ({
+    id: String(item.id ?? ''),
+    siteName: String(item.siteName ?? ''),
+    url: String(item.url ?? ''),
+    remark: String(item.remark ?? ''),
+    reportValues: item.reportValues && typeof item.reportValues === 'object' ? item.reportValues as Record<string, unknown> : {},
+    auditStatus: String(item.auditStatus ?? 'pending'),
+    rejectReason: item.rejectReason ? String(item.rejectReason) : null,
+    submittedAt: item.submittedAt ? String(item.submittedAt) : undefined,
+  }));
+}
+
+function reportFileRef(value: unknown): FileRef | null {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return null;
+  const item = value as Record<string, unknown>;
+  const fileObjectId = String(item.fileObjectId ?? '');
+  const fileName = String(item.fileName ?? '');
+  return fileObjectId && fileName ? { fileObjectId, fileName, contentType: item.contentType ? String(item.contentType) : undefined } : null;
+}
+
+function ClientDrainageModal({ item, onClose, onSaved, signature }: { item?: ClientDrainageInfo; onClose: () => void; onSaved: () => void; signature: ClientSmsSignature }) {
+  const [fields, setFields] = useState<ApplicationReportField[]>([]);
+  const [siteName, setSiteName] = useState(item?.siteName ?? '');
+  const [url, setUrl] = useState(item?.url ?? '');
+  const [remark, setRemark] = useState(item?.remark ?? '');
+  const [values, setValues] = useState<Record<string, unknown>>(item?.reportValues ?? {});
+  const [saving, setSaving] = useState(false);
+  const [uploadingCode, setUploadingCode] = useState('');
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (!signature.applicationId) return;
+    clientApi.listApplicationReportFields(signature.applicationId).then(setFields).catch((failure: Error) => setError(failure.message || '引流报备字段加载失败'));
+  }, [signature.applicationId]);
+
+  async function upload(field: ApplicationReportField, file?: File) {
+    if (!file) return;
+    setUploadingCode(field.code);
+    try {
+      const uploaded = await clientApi.uploadFileObject(file, { purpose: 'drainage_report_material', prefix: `drainage-materials/${signature.id}` });
+      setValues((current) => ({ ...current, [field.code]: { fileObjectId: uploaded.id, fileName: uploaded.fileName, contentType: uploaded.contentType } }));
+    } catch (failure) { setError(failure instanceof Error ? failure.message : '文件上传失败'); } finally { setUploadingCode(''); }
+  }
+
+  async function save() {
+    setSaving(true);
+    setError('');
+    try {
+      const body = { siteName, url, remark, reportValues: values };
+      if (item) await clientApi.updateDrainageInfo(item.id, body);
+      else await clientApi.createDrainageInfo(signature.id, body);
+      onSaved();
+    } catch (failure) { setError(failure instanceof Error ? failure.message : '引流信息提交审核失败'); } finally { setSaving(false); }
+  }
+
+  const missingRequired = fields.some((field) => field.required && !values[field.code]);
+  return <Modal footer={<><Button onClick={onClose} variant="ghost">取消</Button><Button disabled={!siteName.trim() || !url.trim() || missingRequired || saving || Boolean(uploadingCode)} onClick={() => void save()}>{saving ? '提交中...' : '提交审核'}</Button></>} onClose={onClose} open size="xl" title={item ? '修改引流信息' : '新增引流信息'}>
+    <div className="signature-form drainage-edit-form">
+      <Input label="站名称" onChange={(event) => setSiteName(event.target.value)} required value={siteName} />
+      <Input label="引流地址" onChange={(event) => setUrl(event.target.value)} placeholder="https://" required value={url} />
+      <Textarea label="备注" onChange={(event) => setRemark(event.target.value)} rows={3} value={remark} />
+      <section className="surface" style={{ padding: 16 }}><h3>应用通道引流信息报备资料</h3><div className="signature-form-grid" style={{ marginTop: 12 }}>
+        {fields.map((field) => field.fieldType === 'string' ? <Input key={field.id} label={`${field.required ? '* ' : ''}${field.name}`} onChange={(event) => setValues((current) => ({ ...current, [field.code]: event.target.value }))} value={String(values[field.code] ?? '')} /> : <label className="signature-upload" key={field.id}><Upload size={28} /><strong>{reportFileRef(values[field.code])?.fileName ?? `${field.required ? '* ' : ''}上传${field.name}`}</strong><small>{uploadingCode === field.code ? '上传中...' : field.fieldType === 'image' ? '请选择图片文件' : '请选择文件'}</small><FileActions file={reportFileRef(values[field.code])} /><input accept={field.fieldType === 'image' ? 'image/*' : undefined} onChange={(event) => void upload(field, event.target.files?.[0])} style={{ display: 'none' }} type="file" /></label>)}
+      </div></section>
+      {error ? <p className="form-error">{error}</p> : null}
+    </div>
+  </Modal>;
+}
+
 export function ClientSignaturesPage() {
   const [applications, setApplications] = useState<ClientSmsApplication[]>([]);
   const [signatures, setSignatures] = useState<ClientSmsSignature[]>([]);
@@ -38,6 +121,7 @@ export function ClientSignaturesPage() {
   const [purpose, setPurpose] = useState('');
   const [file, setFile] = useState<File | null>(null);
   const [page, setPage] = useState(1);
+  const [drainageModal, setDrainageModal] = useState<{ signature: ClientSmsSignature; item?: ClientDrainageInfo }>();
 
   function loadData() {
     setLoading(true);
@@ -99,6 +183,10 @@ export function ClientSignaturesPage() {
       .catch((reason: Error) => setError(reason.message || '签名禁用失败'));
   }
 
+  function deleteDrainage(id: string) {
+    clientApi.changeDrainageInfoStatus(id, 'deleted').then(loadData).catch((reason: Error) => setError(reason.message || '引流信息删除失败'));
+  }
+
   return (
     <section className="page-stack">
       <div className="signature-page-header">
@@ -149,6 +237,10 @@ export function ClientSignaturesPage() {
                 <Button icon={<Trash2 size={16} />} onClick={() => disableSignature(signature.id)} size="sm" variant="danger">删除</Button>
               </div>
             </div>
+            <div className="drainage-panel">
+              <div className="section-heading"><div><h2><Globe2 size={17} /> 引流信息</h2><p className="muted">新建或修改后由运营审核，通过后自动进入通道报备。</p></div><Button disabled={signature.auditStatus !== 'approved'} icon={<Plus size={15} />} onClick={() => setDrainageModal({ signature })} size="sm" variant="ghost">新增引流信息</Button></div>
+              {drainageItems(signature).length ? drainageItems(signature).map((item) => <div className="surface" key={item.id} style={{ display: 'grid', gap: 12, gridTemplateColumns: '1fr 1.5fr 120px auto', marginTop: 10, padding: 12 }}><strong>{item.siteName}</strong><span className="drainage-table__url">{item.url}</span><Tag tone={statusTone[item.auditStatus] ?? 'info'}>{statusLabel[item.auditStatus] ?? item.auditStatus}</Tag><div className="table-actions"><Button icon={<Edit3 size={14} />} onClick={() => setDrainageModal({ signature, item })} size="sm" variant="ghost">修改</Button><Button icon={<Trash2 size={14} />} onClick={() => deleteDrainage(item.id)} size="sm" variant="danger">删除</Button></div>{item.rejectReason ? <p className="form-error" style={{ gridColumn: '1 / -1' }}>驳回原因：{item.rejectReason}</p> : null}</div>) : <p className="muted">暂无引流信息。</p>}
+            </div>
           </article>
         ))}
       </div>
@@ -197,6 +289,7 @@ export function ClientSignaturesPage() {
           </label>
         </div>
       </Modal>
+      {drainageModal ? <ClientDrainageModal item={drainageModal.item} onClose={() => setDrainageModal(undefined)} onSaved={() => { setDrainageModal(undefined); loadData(); }} signature={drainageModal.signature} /> : null}
     </section>
   );
 }