spider_creater/frontend/src/components/spider/EditSpider.vue

<!-- 新增爬虫 -->
<template>
    <el-dialog :title="dialogTitle" v-model="dialogVisible" :close-on-click-modal="false" width="80%">
        <template #header="{ titleId, titleClass }">
            <div class="edit-css-header">
                <div class="header-left">
                    <span :id="titleId" :class="titleClass">{{ dialogTitle }}</span>
                </div>
                <div class="mark-container">
                    <el-button-group class="mark-buttons">
                        <el-button type="primary" :icon="Link" @click="handleDataTag">标注</el-button>
                    </el-button-group>
                    <!-- <div class="rollback-reason-container" v-if="formData.reason">
                        <span class="rollback-reason-label">打回原因：</span>
                        <span class="rollback-reason-value">{{ formData.reason }}</span>
                    </div> -->
                    <el-tag type="danger" v-if="formData.reason">打回原因：{{ formData.reason }} </el-tag>
                </div>
            </div>
        </template>
        <div class="flex gap-2">
            <el-space class="edit-tag-list">
                <el-tag class="edit-tag" type="primary">{{ formData.site }} </el-tag>
                <el-tag class="edit-tag" type="success">{{ formData.channel }} </el-tag>
                <el-tag class="edit-tag" type="info">{{ formData.code }} </el-tag>
                <el-tag class="edit-tag" type="warning">{{ formData.href }} </el-tag>
                <el-tag class="edit-tag" type="danger">{{ formData.modifyuser }} </el-tag>
            </el-space>
        </div>
        <div class="space" />
        <el-form ref="form0" label-width="160px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="列表页延迟时间(MS)">
                        <el-input v-model="formData.listDelayTime" placeholder="500"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="列表翻页延迟时间(MS)">
                        <el-input v-model="formData.listTurnDelayTime" placeholder="500"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="详情页延迟时间(MS)">
                        <el-input v-model="formData.contentDelayTime" placeholder="500"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="采集最大页数">
                        <el-input v-model="formData.maxPages" :placeholder="defaultFormValue.maxPages + ''"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="列表页初始化" name="init">
                <el-form ref="formInit" label-width="100px">
                    <el-row v-for="row in tabData.initList" :key="row.id">
                        <el-col :span="8">
                            <el-form-item label="动作" required>
                                <el-input v-model="row.actionJs"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="检查">
                                <el-input v-model="row.checkJs"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="超时" required>
                                <el-input v-model.trim="row.sleepTime"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-button-group class="mark-buttons">
                                <el-button type="primary" :icon="CirclePlusFilled" @click="addInitItem" v-if="tabData.initList.length < tabData.initLengthMax"></el-button>
                                <el-button type="primary" :icon="RemoveFilled" @click="removeInitItem(row)" v-if="tabData.initList.length > 1"></el-button>
                            </el-button-group>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="列表页CSS选择器" name="list_css_selector">
                <el-form ref="form1" :model="formData" label-width="160px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="条目区域块">
                                <el-input v-model="formData.listBodyCss" placeholder="div"></el-input>
                                <div class="form-item-sub-line">{{ fastKeyDownMap.listBodyCss }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="条目">
                                <el-input v-model="formData.listItemCss" placeholder="ul.list li" :style="{ background: cssInputBg.listItemCss.color }"></el-input>
                                <div class="form-item-sub-line">{{ fastKeyDownMap.listItemCss }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="条目链接">
                                <el-input v-model="formData.listLinkCss" placeholder="a" :style="{ background: cssInputBg.listLinkCss.color }"></el-input>
                                <div class="form-item-sub-line">{{ fastKeyDownMap.listLinkCss }}</div>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="条目发布时间">
                                <el-input v-model="formData.listPublishTimeCss" placeholder="span" :style="{ background: cssInputBg.listPublishTimeCss.color }"></el-input>
                                <div class="form-item-sub-line">{{ fastKeyDownMap.listPublishTimeCss }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="翻页下一页">
                                <el-input v-model="formData.listNextPageCss" placeholder="li.nextpage a" :style="{ background: cssInputBg.listNextPageCss.color }"></el-input>
                                <div class="form-item-sub-line">{{ fastKeyDownMap.listNextPageCss }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="详情页CSS选择器" name="content">
                <el-form ref="form2" :model="formData" label-width="160px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="详情页标题">
                                <el-input v-model="formData.titleCss" placeholder="ul.list li" :style="{ background: cssInputBg.titleCss.color }"></el-input>
                                <div class="form-item-sub-line">{{ fastKeyDownMap.titleCss }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="详情页发布时间">
                                <el-input v-model="formData.publishTimeCss" placeholder="a" :style="{ background: cssInputBg.publishTimeCss.color }"></el-input>
                                <div class="form-item-sub-line">{{ fastKeyDownMap.publishTimeCss }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="详情页发布单位">
                                <el-input v-model="formData.publishUnitCss" placeholder="span" :style="{ background: cssInputBg.publishUnitCss.color }"></el-input>
                                <div class="form-item-sub-line">{{ fastKeyDownMap.publishUnitCss }}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="详情页正文">
                                <el-input v-model="formData.contentCss" placeholder="li.nextpage a" :style="{ background: cssInputBg.contentCss.color }"></el-input>
                                <div class="form-item-sub-line">{{ fastKeyDownMap.contentCss }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="详情页附件">
                                <el-input v-model="formData.attachCss" placeholder="span" :style="{ background: cssInputBg.attachCss.color }"></el-input>
                                <div class="form-item-sub-line">{{ fastKeyDownMap.attachCss }}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="列表页JS代码" name="list_item_js">
                <template #label><span class="custom-tabs-label">
                        <el-icon>
                            <ElementPlus />
                        </el-icon>
                        <span>列表页JS代码</span>
                    </span>
                </template>
                <el-divider>
                    手写列表页提取JS代码
                    <!-- <el-button type="primary" @click='editorHandle.ImportListCode'>导入模板</el-button> -->
                    <el-button type="primary" @click='editorHandle.createImportListCode'>生成JS代码</el-button>
                </el-divider>
                <el-row>
                    <el-input v-model="formData.listJs" class="codeEditor" :rows="6" type="textarea"
                        placeholder="Please input" />
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="列表页翻页JS代码" name="list_trunpage_js">

                <template #label><span class="custom-tabs-label">
                        <el-icon>
                            <ElementPlus />
                        </el-icon>
                        <span>列表页翻页JS代码</span>
                    </span>
                </template>
                <el-divider>
                    手写列表页翻页JS代码
                    <!-- <el-button type="primary" @click='editorHandle.ImportListTrunPageCode'>导入模板</el-button> -->
                    <el-button type="primary" @click='editorHandle.createImportListTrunPageCode'>生成JS代码</el-button>
                </el-divider>
                <el-row>
                    <el-input v-model="formData.listTurnPageJs" class="codeEditor" :rows="6" type="textarea"
                        placeholder="Please input" />
                </el-row>
            </el-tab-pane>

            <el-tab-pane label="详情页JS代码" name="content_js">

                <template #label><span class="custom-tabs-label">
                        <el-icon>
                            <ElementPlus />
                        </el-icon>
                        <span>详情页JS代码</span>
                    </span>
                </template>
                <el-divider>
                    手写附件下载/上传JS代码
                    <!-- <el-button type="primary" @click='editorHandle.ImportContentCode'>导入模板</el-button> -->
                    <el-button type="primary" @click='editorHandle.createImportContentCode'>生成JS代码</el-button>
                </el-divider>
                <el-row><el-input v-model="formData.contentJs" class="codeEditor" :rows="6" type="textarea"
                        placeholder="Please input" />
                </el-row>
            </el-tab-pane>
        </el-tabs>
        <div slot="footer" class="dialog-footer" style="text-align:right">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" :disabled="savaButtonDisabled" @click="handleSave">保 存</el-button>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref, reactive, defineEmits, computed, watchEffect } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { TemplateJsCode } from './jscodetpl.js'
import { Link } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import { USER_ROLE_ADMIN, USER_ROLE_DEVELOPER, USER_ROLE_REVIEWER } from '../../data/user'
import { getRandomString } from '../../utils'
import { ServerActionCurrentOpenTab } from "../../../wailsjs/go/main/App"
import { RemoveFilled, CirclePlusFilled } from '@element-plus/icons-vue'


const emit = defineEmits(['custom-event', 'data-tag', 'form-change']);
let originData = {}

const dialogTitle = ref('仅编辑 CSS选择器部分')

const store = useStore()

const defaultFormValue = {
    delayTime: 500,
    maxPages: 2,
}

// 定义tabData.initList数据结构
class InitListItem {
    constructor(actionJs = '', checkJs = '', sleepTime = 500) {
        this.actionJs = actionJs //动作JS
        this.checkJs = checkJs //检查JS
        this.sleepTime = sleepTime //等待时长
        this.id = getRandomString(8)
        // actionJs和sleepTime不能为空
    }
}

const tabData = reactive({
    initLengthMax: 5,
    initList: [
        // {
        //     actionJs: '', //动作JS
        //     checkJs: '', //检查JS
        //     sleepTime: 500, //等待时长
        // },
    ]
})

//表单数据
const formData = ref({
    site: '',
    channel: '',
    href: '',
    code: '',
    modifyuser: '',

    // 审核不通过原因
    reason: '',
    // 爬虫状态
    state: 0,

    // list-css-tab
    listBodyCss: '',
    listItemCss: '',
    listLinkCss: '',
    listPublishTimeCss: '',
    listNextPageCss: '',
    listDelayTime: '',

    // content-css-tab
    titleCss: '',
    publishTimeCss: '',
    publishUnitCss: '',
    contentCss: '',
    attachCss: '',
    contentDelayTime: '',

    // list-js-tab
    listJs: '',

    // list-pageination-tab
    listTurnPageJs: '',
    listTurnDelayTime: '',

    // detail-js-tab
    contentJs: '',

    maxPages: '',
});

// 快捷键map
const fastKeyDownMap = {
    // list
    listBodyCss: 'ctrl+2',
    listItemCss: 'ctrl+3',
    listLinkCss: 'ctrl+4',
    listPublishTimeCss: 'ctrl+5',
    listNextPageCss: 'ctrl+6',
    // content
    titleCss: 'ctrl+alt+3',
    publishTimeCss: 'ctrl+alt+4',
    publishUnitCss: 'ctrl+alt+5',
    contentCss: 'ctrl+alt+6',
    attachCss: 'ctrl+alt+7',
}
// 背景色map
const cssInputBg = {
  listItemCss: { color: "#fff9c4", label: "列表条目", formLabel: '条目区域块CSS' },
  listLinkCss: { color: "#bbdefb", label: "列表标题", formLabel: '条目链接CSS' },
  listPublishTimeCss: { color: "#c8e6c9", label: "列表发布时间", formLabel: '条目发布时间CSS' },
  listNextPageCss: { color: "#dcedc8", label: "列表下一页", formLabel: '翻页下一页CSS' },
  titleCss: { color: "#e7f3fe", label: "文章标题", formLabel: '详情页标题CSS' },
  publishTimeCss: { color: "#ffe0b2", label: "文章发布时间", formLabel: '详情页发布时间CSS' },
  publishUnitCss: { color: "#ffe1e1", label: "文章发布单位", formLabel: '详情页发布单位CSS' },
  contentCss: { color: "#e0f7fa", label: "文章正文", formLabel: '详情页正文CSS' },
  attachCss: { color: "#fff1e5", label: "文章附件", formLabel: '详情页附件CSS' },
}

const activeName = ref("init")
const dialogVisible = ref(false)

// 用户身份标识
const userRole = computed(() => store.getters.userRole)
const isDeveloper = computed(() => [USER_ROLE_DEVELOPER].includes(userRole.value))

// 待完成和未通过的爬虫可以保存，其他都不可以提交(并禁用保存按钮)
const canSubmitStatusArr = [0, 2]
const canSubmit = computed(() => canSubmitStatusArr.includes(formData.value.state) && isDeveloper.value)
const savaButtonDisabled = computed(() => !canSubmit.value)

//编辑器事件管理
const editorHandle = {
    ImportListCode: () => {
        formData.value.listJs = TemplateJsCode.ListJsCode
    },
    ImportContentCode: () => {
        formData.value.contentJs = TemplateJsCode.ContentJsCode
    },
    ImportAttachCode: () => {
        formData.value.attachJs = TemplateJsCode.AttachJsCode
    },
    ImportListTrunPageCode:()=>{
        formData.value.listTurnPageJs=TemplateJsCode.ListTurnPageJsCode
    },
    createImportListCode() {
        // 数据替换
        const originString = TemplateJsCode.ListJsCode
        let replaceString = originString
        if (formData.value.listItemCss) {
            replaceString = replaceString.replaceAll('{{.ListItemCss}}', formData.value.listItemCss)
        } else {
            replaceString = replaceString.replaceAll('{{.ListItemCss}}', cssInputBg.listItemCss.formLabel)
        }
        if (formData.value.listLinkCss) {
            replaceString = replaceString.replaceAll('{{.ListLinkCss}}', formData.value.listLinkCss)
        } else {
            replaceString = replaceString.replaceAll('{{.ListLinkCss}}', cssInputBg.listLinkCss.formLabel)
        }
        if (formData.value.listPublishTimeCss) {
            replaceString = replaceString.replaceAll('{{.ListPubtimeCss}}', formData.value.listPublishTimeCss)
        } else {
            replaceString = replaceString.replaceAll('{{.ListPubtimeCss}}', cssInputBg.listPublishTimeCss.formLabel)
        }
        formData.value.listJs = replaceString
        return replaceString
    },
    createImportContentCode() {
        const originString = TemplateJsCode.ContentJsCode
        let replaceString = originString
        if (formData.value.titleCss) {
            replaceString = replaceString.replaceAll('{{.TitleCss}}', formData.value.titleCss)
        } else {
            replaceString = replaceString.replaceAll('{{.TitleCss}}', cssInputBg.titleCss.formLabel)
        }
        if (formData.value.publishUnitCss) {
            replaceString = replaceString.replaceAll('{{.PublishUnitCss}}', formData.value.publishUnitCss)
        } else {
            replaceString = replaceString.replaceAll('{{.PublishUnitCss}}', cssInputBg.publishUnitCss.formLabel)
        }
        if (formData.value.publishTimeCss) {
            replaceString = replaceString.replaceAll('{{.PublishTimeCss}}', formData.value.publishTimeCss)
        } else {
            replaceString = replaceString.replaceAll('{{.PublishTimeCss}}', cssInputBg.publishTimeCss.formLabel)
        }
        if (formData.value.contentCss) {
            replaceString = replaceString.replaceAll('{{.ContentCss}}', formData.value.contentCss)
        } else {
            replaceString = replaceString.replaceAll('{{.ContentCss}}', cssInputBg.contentCss.formLabel)
        }
        if (formData.value.attachCss) {
            replaceString = replaceString.replaceAll('{{.AttachCss}}', formData.value.attachCss)
        } else {
            replaceString = replaceString.replaceAll('{{.AttachCss}}', cssInputBg.attachCss.formLabel)
        }
        formData.value.contentJs = replaceString
    },
    createImportListTrunPageCode() {
        const originString = TemplateJsCode.ListTurnPageJsCode
        let replaceString = originString
        if (formData.value.listNextPageCss) {
            replaceString = replaceString.replaceAll('{{.ListNextPageCss}}', formData.value.listNextPageCss)
        } else {
            replaceString = replaceString.replaceAll('{{.ListNextPageCss}}', cssInputBg.listNextPageCss.formLabel)
        }
        formData.value.listTurnPageJs = replaceString
        return replaceString
    }
}

const createInitListRow = (action, check, sleep) => {
    tabData.initList.push(new InitListItem(action, check, sleep))
}
createInitListRow()
const setPageData = (row) => {
    if (!row) return
    formData.value = row
    if (Array.isArray(row.initList) && row.initList.length > 0) {
        tabData.initList = row.initList
    }
    // 保存一份原始数据
    originData = JSON.parse(JSON.stringify(row))
}

const refreshPageDataFn = (key, value) => formData.value[key] = value
const refreshPageData = (key, value) => {
    if (!key) return
    // 判断key是否为[listItemCss,listLinkCss,listPublishTimeCss]
    const listItemCss = formData.value.listItemCss
    if (listItemCss) {
        // 判断[listLinkCss,listPublishTimeCss]头部是否包含listItemCss
        const targetKeyList = ['listLinkCss', 'listPublishTimeCss']
        if (targetKeyList.includes(key) && value) {
            if (value.startsWith(listItemCss)) {
                // 替换并去空
                let newValue = value.replace(listItemCss, '')
                newValue = newValue.trim()
                if (newValue && value !== newValue) {
                    refreshPageDataFn(key, newValue)
                } else {
                    refreshPageDataFn(key, value)
                }
            } else {
                refreshPageDataFn(key, value)
            }
        } else {
            refreshPageDataFn(key, value)
        }
    } else {
        refreshPageDataFn(key, value)
    }
}


const getInitListData = () => {
    return tabData.initList.map(item => {
        return {
            actionJs: item.actionJs,
            checkJs: item.checkJs,
            sleepTime: item.sleepTime - 0,
        }
    })
}
const getPageData = () => {
    const formDataValue = formData.value
    const initList = getInitListData()
    const payload = {
      // list-css
      listBodyCss: formDataValue.listBodyCss || '',
      listItemCss: formDataValue.listItemCss || '',
      listLinkCss: formDataValue.listLinkCss || '',
      listPublishTimeCss: formDataValue.listPublishTimeCss || '',
      listNextPageCss: formDataValue.listNextPageCss || '',
      listDelayTime: Number(formData.value.listDelayTime || defaultFormValue.delayTime),
      // content-css
      titleCss: formDataValue.titleCss || '',
      publishTimeCss: formDataValue.publishTimeCss || '',
      publishUnitCss: formDataValue.publishUnitCss || '',
      contentCss: formDataValue.contentCss || '',
      attachCss: formDataValue.attachCss || '',
      contentDelayTime: Number(formDataValue.contentDelayTime || defaultFormValue.delayTime),
      // js-list
      listJs: formDataValue.listJs || '',
      // js_nextpage
      listTurnPageJs: formDataValue.listTurnPageJs || '',
      listTurnDelayTime: Number(formDataValue.listTurnDelayTime || defaultFormValue.delayTime),
      // js_content
      contentJs: formDataValue.contentJs || '',

      initList,

      maxPages: Number(formDataValue.maxPages || defaultFormValue.maxPages)
    }

    return {
        _originData: originData,
        value: payload
    }
}

const emitSaveEvent = () => {
    const payload = getPageData()
    // emit("custom-event", payload)
    // formData.value = {}
}
const handleSave = () => {
    if (!formData.value.listBodyCss) {
        return ElMessage({
            message: '条目区域块不能为空',
            type: 'error',
            duration: 3000,
        })
    }

    // 列表页初始化校验
    const initList = tabData.initList
    // 是否有为空的actionJs和sleepTime
    const findEmpty = initList.find(e => !e.actionJs || !e.sleepTime)
    if (findEmpty) {
        return ElMessage({
            message: '列表页初始化校验表单中，动作和超时不能为空',
            type: 'error',
            duration: 3000,
        })
    }


    // 如果有js，则需要二次确认
    if (formData.value.contentJs || formData.value.listJs) {
        ElMessageBox.confirm('是否保存列表页JS代码或详情页JS代码？', '提示',
            {
                customClass: 'j-confirm-message-box',
                type: 'warning',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                showCancelButton: false,
            }
        ).then(() => {
            emitSaveEvent()
        })
    } else {
        emitSaveEvent()
    }
}

const handleDataTag = () => {
    emit('data-tag', originData)
}

// 根据编辑弹窗的内容，获取cssMark
const getMarkWithEditDialogInfo = info => {
    const { value, _originData } = info
    const baseInfo = {
        code: _originData.code,
        site: _originData.site,
        channel: _originData.channel,
        href: _originData.href,
        modifyuser: _originData.modifyuser,
    }
    return {
        ...value,
        ...baseInfo,
    }
}

const onEditFormChange = (info) => {
    const mark = getMarkWithEditDialogInfo(info)
    ServerActionCurrentOpenTab(mark)
}

const onCssFormChange = () => {
    const payload = getPageData()
    onEditFormChange(payload)
}

watchEffect(() => {
    // 监控以下变量变化，执行onCssFormChange回调
    formData.value.listBodyCss;
    formData.value.listItemCss;
    formData.value.listLinkCss;
    formData.value.listPublishTimeCss;
    formData.value.listNextPageCss;
    formData.value.titleCss;
    formData.value.publishTimeCss;
    formData.value.publishUnitCss;
    formData.value.contentCss;
    formData.value.attachCss;
    if (dialogVisible.value) {
        onCssFormChange()
    }
})

const addInitItem = () => {
    tabData.initList.push(new InitListItem())
}
const removeInitItem = (row) => {
    const index = tabData.initList.findIndex(i => i.id === row.id)
    if (index >= 0) {
        tabData.initList.splice(index, 1)
    }
}

//这里是重点: 向外部组建暴露可供调用的方法
defineExpose({
    dialogVisible,
    formData,
    setPageData,
    getPageData,
    refreshPageData,
    emit
})
</script>
<style scoped lang="scss">
::v-deep {
    .el-form-item {
        margin-bottom: 10px;
    }
    .el-input__wrapper {
        background-color: transparent;
    }
    
}
.header-left {
    display: flex;
    align-items: center;
}
.codeEditor {
    width: 100%;
    font-size: 12pt;
    font-weight: bold;
    line-height: 1.5em;
    padding: 10px;
}
.edit-tag-list {
    flex-wrap: wrap;
}
.edit-tag {
    margin-bottom: 4px;
}
.edit-css-header {
    display: flex;
}
.mark-container {
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: 10px;
    :deep(.el-tag) {
        padding-top: 2px;
        padding-bottom: 2px;
        height: unset;
        min-height: 24px;
    }
}
.mark-buttons {
    margin: 0 10px;
}
.form-item-sub-line {
    line-height: 24px;
    color: var(--el-color-primary);
}
.rollback-reason-container {
    color: var(--el-color-danger);
}
</style>