SEONexusAdmin/src/views/site/domainExternalSeoBaiduPlanDialog.vue

<template>
    <el-dialog v-model="visible" title="百度 Provider 计划" width="920px" draggable>
        <div class="baidu-plan-dialog">
            <div class="baidu-plan-dialog__toolbar">
                <el-button type="primary" plain @click="loadSummary">刷新</el-button>
                <el-button type="warning" plain @click="openPushSummaryDialog">百度推送观察</el-button>
                <el-button type="success" plain @click="openSiteQueryDialog">百度收录探测</el-button>
                <el-button type="primary" plain @click="openFeedbackDialog">百度反馈摘要</el-button>
                <el-button type="success" plain @click="openPushTaskDialog">百度推送任务</el-button>
                <el-button type="danger" plain @click="openPushAttentionDialog">百度推送异常队列</el-button>
                <el-button type="info" plain @click="openPushTrendDialog">百度推送趋势</el-button>
                <el-button v-if="summary.summary_html_path" type="success" plain @click="openPublicPath(summary.summary_html_path)">HTML摘要</el-button>
                <el-button v-if="summary.summary_json_path" type="info" plain @click="openPublicPath(summary.summary_json_path)">JSON摘要</el-button>
            </div>

            <el-alert
                :title="summary.status || 'planned'"
                :description="summary.note || '当前这里展示百度 provider 的准备态。'"
                :type="summary.credential_ready ? 'success' : 'warning'"
                show-icon
                :closable="false"
            />

            <div class="baidu-plan-dialog__metrics">
                <div class="metric-card">
                    <div class="metric-card__label">凭证</div>
                    <div class="metric-card__value">{{ summary.credential_ready ? "ready" : "missing" }}</div>
                </div>
                <div class="metric-card">
                    <div class="metric-card__label">文件大小</div>
                    <div class="metric-card__value">{{ summary.credential_file_size || 0 }}</div>
                </div>
            </div>

            <el-descriptions :column="1" border size="small">
                <el-descriptions-item label="credential_path">{{ summary.credential_path || "-" }}</el-descriptions-item>
                <el-descriptions-item label="updated_at">{{ summary.credential_updated_at || "-" }}</el-descriptions-item>
                <el-descriptions-item label="submission_scope">
                    {{ (summary.submission_scope?.capabilities || []).join(", ") || "-" }}
                </el-descriptions-item>
            </el-descriptions>

            <div class="baidu-plan-dialog__steps">
                <div class="baidu-plan-dialog__title">下一步</div>
                <ul>
                    <li v-for="(step, index) in summary.next_steps || []" :key="`${index}-${step}`">{{ step }}</li>
                </ul>
            </div>
        </div>
    </el-dialog>
    <DomainExternalSeoBaiduPushDialog ref="pushDialogRef" />
    <DomainExternalSeoBaiduFeedbackDialog ref="feedbackDialogRef" />
    <DomainExternalSeoSiteQueryDialog ref="siteQueryDialogRef" />
    <DomainExternalSeoBaiduPushTaskDialog ref="taskDialogRef" />
    <DomainExternalSeoBaiduPushAttentionDialog ref="attentionDialogRef" />
    <DomainExternalSeoBaiduPushTrendDialog ref="trendDialogRef" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { SiteList } from "@/api/interface/site/list";
import { getDomainExternalSeoBaiduProviderPlan } from "@/api/modules/site/list";
import { openAdminArtifact } from "@/utils/adminArtifact";
import DomainExternalSeoBaiduPushDialog from "./domainExternalSeoBaiduPushDialog.vue";
import DomainExternalSeoBaiduFeedbackDialog from "./domainExternalSeoBaiduFeedbackDialog.vue";
import DomainExternalSeoSiteQueryDialog from "./domainExternalSeoSiteQueryDialog.vue";
import DomainExternalSeoBaiduPushTaskDialog from "./domainExternalSeoBaiduPushTaskDialog.vue";
import DomainExternalSeoBaiduPushAttentionDialog from "./domainExternalSeoBaiduPushAttentionDialog.vue";
import DomainExternalSeoBaiduPushTrendDialog from "./domainExternalSeoBaiduPushTrendDialog.vue";

const visible = ref(false);
const loading = ref(false);
const summary = ref<SiteList.DomainExternalSeoBaiduProviderPlanData>({});
const pushDialogRef = ref();
const feedbackDialogRef = ref();
const siteQueryDialogRef = ref();
const taskDialogRef = ref();
const attentionDialogRef = ref();
const trendDialogRef = ref();

const openPublicPath = (path?: string) => {
    void openAdminArtifact(path);
};

const openPushSummaryDialog = () => {
    pushDialogRef.value?.open();
};

const openFeedbackDialog = () => {
    feedbackDialogRef.value?.open();
};

const openSiteQueryDialog = () => {
    siteQueryDialogRef.value?.open();
};

const openPushTaskDialog = () => {
    taskDialogRef.value?.open();
};

const openPushAttentionDialog = () => {
    attentionDialogRef.value?.open();
};

const openPushTrendDialog = () => {
    trendDialogRef.value?.open();
};

const loadSummary = async () => {
    loading.value = true;
    try {
        const res = await getDomainExternalSeoBaiduProviderPlan();
        summary.value = res.data ?? {};
    } catch (_error) {
        ElMessage.error("读取百度 provider 计划失败");
    } finally {
        loading.value = false;
    }
};

const open = async () => {
    visible.value = true;
    await loadSummary();
};

defineExpose({
    open
});
</script>

<style scoped lang="scss">
.baidu-plan-dialog__toolbar {
    margin-bottom: 12px;
}

.baidu-plan-dialog__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.metric-card {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    padding: 12px;
    background: #fafafa;
}

.metric-card__label {
    color: #909399;
    font-size: 12px;
    margin-bottom: 6px;
}

.metric-card__value {
    color: #303133;
    font-size: 22px;
    font-weight: 600;
}

.baidu-plan-dialog__steps {
    margin: 16px 0;
}

.baidu-plan-dialog__title {
    font-weight: 600;
    margin-bottom: 8px;
}
</style>