# MediumDialog

## 简介

MediumDialog 是一个固定 720px 宽度的中型对话框组件，继承 SmallDialog 的全部功能，在此基础上提供更大的显示区域（720px 宽度、60px 水平内边距）和更突出的标题排版（d1s_bold_title）。适用于包含表单输入、内容较多的确认等场景。通过 `isContentFull` 属性可开启全屏模式，使弹窗尺寸变为 `width: calc(100vw - 160px)`、`height: calc(100vh - 80px)`，适合需要大面积展示内容的场景。

## 何时使用

- 包含表单输入的弹窗（如编辑虚拟机配置、创建网络策略）
- 内容较多的确认弹窗，492px 宽度不够展示时
- 需要大面积展示内容（如表格、拓扑图）的场景，配合 `isContentFull` 使用

不要使用：

- 简单确认或信息提示 --> 请用 `SmallDialog`
- 多步骤向导流程 --> 请用 `WizardDialog`
- 全屏沉浸式操作 --> 请用 `ImmersiveDialog`
- 删除确认场景 --> 请用 `DeleteDialog`（已封装删除确认样式和交互）
- 操作被拒绝 / 不可执行的反馈 --> 请用 `RejectDialog`（支持 Single / All / Part / Custom 四种模式）

## 基础用法

```tsx
import React from "react";
import {
  MediumDialog,
  Button,
  KitStoreProvider,
  ModalStack,
} from "@cloudtower/eagle";
import { usePushModal } from "@cloudtower/eagle";

const App = () => {
  const pushModal = usePushModal();

  const openDialog = () => {
    pushModal({
      component: () => (
        <MediumDialog
          title="编辑虚拟机"
          onOk={(popModal) => {
            console.log("保存配置");
            popModal();
          }}
          onCancel={(popModal) => {
            popModal();
          }}
        >
          <form>
            <label>虚拟机名称</label>
            <input defaultValue="vm-prod-01" />
            <label>CPU (核)</label>
            <input type="number" defaultValue={4} />
            <label>内存 (GB)</label>
            <input type="number" defaultValue={8} />
          </form>
        </MediumDialog>
      ),
      props: {},
    });
  };

  return (
    <Button type="primary" onClick={openDialog}>
      编辑虚拟机
    </Button>
  );
};
```

## 常见模式

### 模式一：表单提交弹窗

适用于在弹窗中包含表单输入的场景。通过 `confirmLoading` 控制提交按钮加载状态，提交成功后再关闭弹窗。

```tsx
import React, { useState } from "react";
import { MediumDialog, Button } from "@cloudtower/eagle";
import { usePushModal } from "@cloudtower/eagle";

const EditVmDialog: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string>();

  return (
    <MediumDialog
      title="编辑虚拟机"
      confirmLoading={loading}
      error={error}
      onOk={async (popModal) => {
        setLoading(true);
        setError(undefined);
        try {
          await saveVmConfig({ name: "vm-prod-01", cpu: 4, memory: 8 });
          popModal();
        } catch (e) {
          setError("保存配置失败，请重试");
        } finally {
          setLoading(false);
        }
      }}
    >
      <form>
        <label>虚拟机名称</label>
        <input defaultValue="vm-prod-01" />
        <label>CPU (核)</label>
        <input type="number" defaultValue={4} />
        <label>内存 (GB)</label>
        <input type="number" defaultValue={8} />
      </form>
    </MediumDialog>
  );
};

// 使用方式
const App = () => {
  const pushModal = usePushModal();

  return (
    <Button
      type="primary"
      onClick={() =>
        pushModal({ component: () => <EditVmDialog />, props: {} })
      }
    >
      编辑虚拟机
    </Button>
  );
};
```

### 模式二：数据展示弹窗

适用于在弹窗中展示较多详情信息的场景。利用 `initializing`、`initializingError` 控制加载状态，加载完成后展示数据。

```tsx
import React, { useEffect, useMemo, useState } from "react";
import { MediumDialog, Button } from "@cloudtower/eagle";
import type { MediumDialogProps } from "@cloudtower/eagle";
import { usePushModal } from "@cloudtower/eagle";

const VmDetailDialog: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string>();
  const [data, setData] = useState<{
    name: string;
    cpu: number;
    memory: number;
    disks: string[];
    nics: string[];
  }>();

  const fetchData = async () => {
    setLoading(true);
    setError(undefined);
    try {
      const result = await fetchVmDetail("vm-prod-01");
      setData(result);
    } catch (e) {
      setError("加载虚拟机详情失败");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const modalProps: Partial<MediumDialogProps> = useMemo(() => {
    if (loading) {
      return { title: "", initializing: true, initializingSkeletonRows: 5 };
    }
    if (error) {
      return { title: "", initializingError: error, onOk: fetchData };
    }
    return { title: `虚拟机详情 - ${data?.name}` };
  }, [loading, error, data]);

  return (
    <MediumDialog showOk={false} cancelText="关闭" {...modalProps}>
      <p>虚拟机名称：{data?.name}</p>
      <p>CPU：{data?.cpu} 核</p>
      <p>内存：{data?.memory} GB</p>
      <p>磁盘：{data?.disks?.join(", ")}</p>
      <p>网卡：{data?.nics?.join(", ")}</p>
    </MediumDialog>
  );
};

// 使用方式
const App = () => {
  const pushModal = usePushModal();

  return (
    <Button
      onClick={() =>
        pushModal({ component: () => <VmDetailDialog />, props: {} })
      }
    >
      查看虚拟机详情
    </Button>
  );
};
```

### 模式三：全屏内容弹窗（isContentFull）

适用于需要大面积展示内容（如表格、拓扑图、日志）的场景。开启 `isContentFull` 后弹窗尺寸变为 `width: calc(100vw - 160px)`、`height: calc(100vh - 80px)`，内容区域自动 flex 填充剩余高度。

```tsx
import React from "react";
import { MediumDialog, Button } from "@cloudtower/eagle";
import { usePushModal } from "@cloudtower/eagle";

const App = () => {
  const pushModal = usePushModal();

  return (
    <Button
      onClick={() =>
        pushModal({
          component: () => (
            <MediumDialog
              title="虚拟机任务日志"
              isContentFull
              showOk={false}
              cancelText="关闭"
            >
              <div style={{ flex: 1, overflow: "auto" }}>
                <pre>
                  {`[2024-01-15 10:00:01] 开始迁移虚拟机 vm-prod-01
[2024-01-15 10:00:05] 正在同步内存页...
[2024-01-15 10:01:30] 内存同步完成，开始切换
[2024-01-15 10:01:32] 迁移完成，虚拟机已在目标主机上运行`}
                </pre>
              </div>
            </MediumDialog>
          ),
          props: {},
        })
      }
    >
      查看任务日志
    </Button>
  );
};
```

## 初始化生命周期

MediumDialog 继承 SmallDialog 的 `initializeOnce`，默认为 `true`：成功前允许失败重试，首次成功后忽略后续的加载和初始化错误。需要反复展示骨架屏时，显式设置 `initializeOnce={false}`。完整约定见 [SmallDialog 初始化生命周期](../SmallDialog/guide.md#初始化生命周期)。

## 与 SmallDialog 的差异对比

| 特性           | SmallDialog        | MediumDialog             |
| -------------- | ------------------ | ------------------------ |
| 默认宽度       | 492px              | 720px                    |
| 水平内边距     | 40px               | 60px                     |
| 标题排版       | `d2_bold_title`    | `d1s_bold_title`         |
| 骨架屏默认行数 | 2                  | 3                        |
| 全屏模式       | 不支持             | 支持（`isContentFull`）  |
| 适用场景       | 简单确认、信息提示 | 表单弹窗、内容较多的确认 |

## 相关组件

- `SmallDialog` -- 小尺寸对话框（492px），适用于简单确认和信息提示
- `ImmersiveDialog` -- 全屏沉浸式对话框，适用于需要大量操作空间的场景
- `WizardDialog` -- 向导式对话框，适用于多步骤流程
- `DeleteDialog` -- 删除确认对话框，封装了删除场景的标准样式和交互（位于 `@cloudtower/eagle` 的 coreX 模块）
- `RejectDialog` -- 操作拒绝反馈对话框，支持 Single（单条拒绝）、All（全部拒绝）、Part（部分拒绝）、Custom（自定义内容）四种模式（位于 `@cloudtower/eagle` 的 coreX 模块）