xiaoxia-saas/apps/web/src/pages/assets/components/ResultDrawer.tsx

import React from "react"
import { Drawer } from "antd"
import { CheckCircleOutlined, CloseCircleOutlined } from "@ant-design/icons"
import type { BatchOperationResult } from "@/api/assets"

/* ============================================================
 * ResultDrawer — 操作结果抽屉
 * ============================================================ */
export interface ResultDrawerProps {
  open: boolean
  title: string
  result: BatchOperationResult | null
  onClose: () => void
}

const ResultDrawer: React.FC<ResultDrawerProps> = ({ open, title, result, onClose }) => (
  <Drawer title={`${title} — 操作结果`} open={open} onClose={onClose} width={420}>
    {result && (
      <div className="xx-batch-result">
        <div className="xx-batch-result-summary">
          <div className="xx-batch-result-stat">
            <span className="xx-batch-result-total">总计 {result.total} 个</span>
          </div>
          <div className="xx-batch-result-stat success">
            <CheckCircleOutlined />
            <span>成功 {result.success_count} 个</span>
          </div>
          {result.failure_count > 0 && (
            <div className="xx-batch-result-stat fail">
              <CloseCircleOutlined />
              <span>失败 {result.failure_count} 个</span>
            </div>
          )}
        </div>

        {(result?.succeeded?.length ?? 0) > 0 && (
          <div className="xx-batch-result-section">
            <h4 className="xx-batch-result-section-title success">
              <CheckCircleOutlined /> 成功列表
            </h4>
            <div className="xx-batch-result-ids">
              {result?.succeeded?.map((id) => (
                <div key={id} className="xx-batch-result-id">
                  {id}
                </div>
              ))}
            </div>
          </div>
        )}

        {(result?.failed?.length ?? 0) > 0 && (
          <div className="xx-batch-result-section">
            <h4 className="xx-batch-result-section-title fail">
              <CloseCircleOutlined /> 失败列表
            </h4>
            <div className="xx-batch-result-ids">
              {result?.failed?.map((id) => (
                <div key={id} className="xx-batch-result-id fail">
                  {id}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    )}
  </Drawer>
)

export default ResultDrawer