company_components_web/src/views/showComponents/showDialog/index.vue

<template>
    <div class="dialog-showcase">
        <!-- 介绍区 -->
        <section class="intro">
            <p class="eyebrow">组件展示 · Dialog</p>
            <h1>弹框组件设计指南</h1>
            <p class="subtitle">
                基于 Element Plus 弹框能力的二次封装，支持外层 +
                内层嵌套弹框、统一的视觉样式和交互行为，
                适合在复杂业务中复用，避免每个页面重复堆样式与逻辑。
            </p>
        </section>

        <!-- 基础示例：外层弹框 -->
        <section class="card-full">
            <el-card shadow="hover" class="demo-card">
                <template #header>
                    <div class="card-header">
                        <h3>基础弹框</h3>
                        <span>最常见的确认 / 信息展示场景</span>
                    </div>
                </template>

                <p class="card-description">
                    点击下方按钮打开基础弹框，外层弹框默认居中吸附，带有统一的头部样式、阴影和内容区域滚动处理。
                </p>

                <div class="demo-actions">
                    <ComButton type="primary" size="large" @click="openBaseDialog">
                        打开基础弹框
                    </ComButton>
                </div>

                <ComDialog
                    :dialog-config="baseDialog"
                    @closeDialogOuter="handleCloseBaseOuter"
                    @closeDialogInner="handleCloseBaseInner"
                >
                    <template #outerContent>
                        <div class="dialog-content">
                            <h4 class="dialog-title">创建任务</h4>
                            <p class="dialog-subtitle">
                                在这里展示业务表单或提示文案，内容区域已处理最大高度和滚动，保证在小屏幕下也能完整展示。
                            </p>
                            <el-form label-width="80px" class="dialog-form">
                                <el-form-item label="任务名称">
                                    <el-input
                                        v-model="baseForm.name"
                                        placeholder="请输入任务名称"
                                    />
                                </el-form-item>
                                <el-form-item label="优先级">
                                    <el-select v-model="baseForm.level" placeholder="请选择">
                                        <el-option label="普通" value="normal" />
                                        <el-option label="重要" value="important" />
                                        <el-option label="紧急" value="urgent" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="备注说明">
                                    <el-input
                                        v-model="baseForm.remark"
                                        type="textarea"
                                        :rows="3"
                                        placeholder="可选填写，补充说明信息"
                                    />
                                </el-form-item>
                            </el-form>

                            <div class="dialog-footer">
                                <ComButton plain @click="closeBaseDialog">取消</ComButton>
                                <ComButton type="primary" @click="submitBaseDialog">
                                    确认提交
                                </ComButton>
                            </div>
                        </div>
                    </template>
                </ComDialog>
            </el-card>
        </section>

        <!-- 内外层嵌套弹框示例 -->
        <section class="card-full">
            <el-card shadow="hover" class="demo-card">
                <template #header>
                    <div class="card-header">
                        <h3>内外层嵌套弹框</h3>
                        <span>适用于「详情 + 深层操作」的复杂流程</span>
                    </div>
                </template>

                <p class="card-description">
                    外层弹框承载主流程（如详情、编辑表单），当需要处理更深入的步骤（如高级设置、二次确认）时，
                    可以在外层内部再打开内层弹框，保持上下文不丢失。
                </p>

                <div class="demo-actions">
                    <ComButton type="primary" @click="openNestedOuter"> 打开嵌套弹框 </ComButton>
                </div>

                <ComDialog
                    :dialog-config="nestedDialog"
                    @closeDialogOuter="handleCloseNestedOuter"
                    @closeDialogInner="handleCloseNestedInner"
                >
                    <!-- 外层弹框内容 -->
                    <template #outerContent>
                        <div class="dialog-content">
                            <h4 class="dialog-title">用户详情</h4>
                            <p class="dialog-subtitle">
                                外层用于展示主要信息和基础操作，点击「高级设置」将打开内层弹框，避免页面跳转打断当前上下文。
                            </p>

                            <el-descriptions :column="2" border class="dialog-descriptions">
                                <el-descriptions-item label="用户名">
                                    bns_admin
                                </el-descriptions-item>
                                <el-descriptions-item label="角色">
                                    超级管理员
                                </el-descriptions-item>
                                <el-descriptions-item label="部门"> 技术中心 </el-descriptions-item>
                                <el-descriptions-item label="状态">
                                    <el-tag type="success">启用</el-tag>
                                </el-descriptions-item>
                            </el-descriptions>

                            <div class="dialog-footer">
                                <ComButton plain @click="closeNestedOuter">关闭</ComButton>
                                <ComButton type="primary" @click="openNestedInner">
                                    打开高级设置
                                </ComButton>
                            </div>
                        </div>
                    </template>

                    <!-- 内层弹框内容 -->
                    <template #innerContent>
                        <div class="dialog-content">
                            <h4 class="dialog-title">高级设置</h4>
                            <p class="dialog-subtitle">
                                内层弹框通常体量较小，用于配置少量但影响较大的选项，例如权限范围、敏感操作确认等。
                            </p>

                            <el-form label-width="90px" class="dialog-form">
                                <el-form-item label="数据权限">
                                    <el-select
                                        v-model="nestedForm.scope"
                                        placeholder="请选择数据范围"
                                    >
                                        <el-option label="仅本人" value="self" />
                                        <el-option label="本部门" value="dept" />
                                        <el-option label="本部门及下级" value="dept_child" />
                                        <el-option label="全部数据" value="all" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="登录保护">
                                    <el-switch v-model="nestedForm.mfa" />
                                </el-form-item>
                            </el-form>

                            <div class="dialog-footer">
                                <ComButton plain @click="closeNestedInner">取消</ComButton>
                                <ComButton type="primary" @click="submitNestedInner">
                                    保存设置
                                </ComButton>
                            </div>
                        </div>
                    </template>
                </ComDialog>
            </el-card>
        </section>

        <!-- 使用建议 -->
        <section class="card-full guide-card">
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <h3>使用建议</h3>
                        <span>保持一致的交互体验与视觉规范</span>
                    </div>
                </template>
                <ul class="guide-list">
                    <li>尽量保证系统中所有弹框都通过 `ComDialog` 使用，统一头部样式与位置。</li>
                    <li>外层弹框承担主要流程，内层弹框仅在确有必要时使用，避免过深的弹框嵌套。</li>
                    <li>
                        推荐使用 `dialogConfig`
                        对象集中管理弹框状态与标题，避免在多个变量间来回切换。
                    </li>
                    <li>
                        关闭弹框时，结合 `closeDialogOuter / closeDialogInner`
                        事件重置表单、清理临时状态。
                    </li>
                </ul>
            </el-card>
        </section>
    </div>
</template>

<script setup name="ShowDialog">
import { reactive } from 'vue'
import ComDialog from '@/components/ComDialog/index.vue'
import ComButton from '@/components/ComButton/index.vue'

// 基础弹框配置
const baseDialog = reactive({
    outerVisible: false,
    outerTitle: '基础弹框示例',
    outerWidth: '720px',
    minHeight: '320px',
    maxHeight: '70vh',
    // 以下字段用于兼容组件的内层结构（本示例未使用）
    innerVisible: false,
})

const baseForm = reactive({
    name: '',
    level: 'normal',
    remark: '',
})

const openBaseDialog = () => {
    baseDialog.outerVisible = true
}

const closeBaseDialog = () => {
    baseDialog.outerVisible = false
}

const submitBaseDialog = () => {
    // 此处可替换为实际提交逻辑
    console.log('提交基础弹框表单：', { ...baseForm })
    baseDialog.outerVisible = false
}

const handleCloseBaseOuter = () => {
    baseDialog.outerVisible = false
}

const handleCloseBaseInner = () => {
    baseDialog.innerVisible = false
}

// 内外层嵌套弹框配置
const nestedDialog = reactive({
    outerVisible: false,
    outerTitle: '外层弹框 · 用户详情',
    outerWidth: '760px',
    minHeight: '360px',
    maxHeight: '75vh',
    innerVisible: false,
    innerTitle: '内层弹框 · 高级设置',
    innerWidth: '520px',
    innerMinHeight: '260px',
    innerMaxHeight: '60vh',
})

const nestedForm = reactive({
    scope: 'dept_child',
    mfa: true,
})

const openNestedOuter = () => {
    nestedDialog.outerVisible = true
}

const closeNestedOuter = () => {
    nestedDialog.outerVisible = false
    nestedDialog.innerVisible = false
}

const openNestedInner = () => {
    nestedDialog.innerVisible = true
}

const closeNestedInner = () => {
    nestedDialog.innerVisible = false
}

const submitNestedInner = () => {
    console.log('保存高级设置：', { ...nestedForm })
    nestedDialog.innerVisible = false
}

const handleCloseNestedOuter = () => {
    closeNestedOuter()
}

const handleCloseNestedInner = () => {
    closeNestedInner()
}
</script>

<style scoped>
.dialog-showcase {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 40px 48px;
    background: linear-gradient(160deg, #f6f8ff 0%, #ffffff 55%, #f9fbff 100%);
    min-height: 100%;
}

.intro {
    max-width: 720px;
    text-align: left;
}

.eyebrow {
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5c6aff;
    margin-bottom: 12px;
    font-weight: 600;
}

.intro h1 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #1f2a56;
}

.subtitle {
    font-size: 16px;
    line-height: 1.7;
    color: #4c5a7a;
    margin: 0;
}

.card-full {
    width: 100%;
}

.demo-card {
    border-radius: 18px;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2a56;
}

.card-header span {
    font-size: 14px;
    color: #8792b0;
}

.card-description {
    font-size: 14px;
    line-height: 1.6;
    color: #4c5a7a;
    margin-bottom: 20px;
}

.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.dialog-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dialog-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.dialog-subtitle {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
}

.dialog-form {
    margin-top: 4px;
}

.dialog-descriptions {
    margin-top: 8px;
}

.dialog-footer {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.guide-card :deep(.el-card__body) {
    padding: 20px 28px 28px;
}

.guide-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: #4c5a7a;
    font-size: 14px;
    line-height: 1.6;
}

.guide-list li {
    list-style: disc;
}

@media (max-width: 1024px) {
    .dialog-showcase {
        padding: 24px 24px 36px;
    }
}

@media (max-width: 600px) {
    .intro h1 {
        font-size: 26px;
    }

    .subtitle {
        font-size: 15px;
    }
}
</style>