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="列表页初始化JS代码" name="init">
        <el-form ref="formInit" label-width="66px" class="form-init">
          <div v-for="(row, index) in tabData.initList" :key="row.id" class="form-init-row">
            <div class="form-init-row-js">
              <el-form-item label="动作JS" required class="pointer-input">
                <el-input v-model="row.actionJs" readonly placeholder="click to input" @click="showEditActionCodeDialog(row, 'actionJs')"></el-input>
              </el-form-item>
            </div>
            <div class="form-init-row-js">
              <el-form-item label="检查JS" class="pointer-input">
                <el-input v-model="row.checkJs" readonly placeholder="click to input" @click="showEditActionCodeDialog(row, 'checkJs')"></el-input>
              </el-form-item>
            </div>
            <div class="form-init-row-ms">
              <el-form-item label="延迟(MS)" required label-width="90px">
                <el-input v-model.trim="row.sleepTime"></el-input>
              </el-form-item>
            </div>
            <div class="form-init-row-actions">
              <el-button-group class="mark-buttons">
                <el-button type="success" size="small" :icon="CirclePlusFilled" @click="addInitItem(index)" v-if="tabData.initList.length < tabData.initLengthMax"></el-button>
                <el-button type="danger" size="small" :icon="RemoveFilled" @click="removeInitItem(row)"></el-button>
              </el-button-group>
            </div>
          </div>
          <div class="no-init-list-container" v-if="tabData.initList.length === 0">
            <el-button type="success" :icon="CirclePlusFilled" @click="addInitItem(index)"></el-button>
          </div>
        </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(0)'>生成JS代码</el-button>
          <el-button type="primary" @click='editorHandle.createImportListTrunPageCode(2)'>生成JS代码2</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>
    <CodeEditor v-model:show="codeEditorShow" ref="codeEditor" @save="onCodeEditorSave" />
  </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'
import CodeEditor from './CodeEditor.vue';

const codeEditor =ref(null)
const codeEditorShow = ref(false)

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: 10,
  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(mode) {
    const originString = mode==2?TemplateJsCode.ListTurnPageJsCode2: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))
}

const setPageData = (row) => {
  if (!row) return
  row.listDelayTime = row.listDelayTime||"1000"
  row.listTurnDelayTime = row.listTurnDelayTime||"1000"
  row.contentDelayTime = row.contentDelayTime||"1000"
  row.maxPages = row.maxPages || "2"

  formData.value = row
  if (Array.isArray(row.initList) && row.initList.length > 0) {
    tabData.initList = row.initList
  } else {
    tabData.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: '列表页初始化JS代码校验表单中，动作JS代码和延迟时间不能为空',
      type: 'error',
      duration: 3000,
    })
  }


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

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

let currentCodeEditingRow = {}
const showEditActionCodeDialog = (row, key) => {
  codeEditorShow.value = true
  currentCodeEditingRow = row
  const text = row[key]
  codeEditor.value.setPageData({ text, key })
}

const onCodeEditorSave = ({ text, key }) => {
  currentCodeEditingRow[key] = text
}

// 根据编辑弹窗的内容，获取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 = (index) => {
  const item = new InitListItem()
  if (index !== undefined) {
    tabData.initList.splice(index + 1, 0, item)
  } else {
    tabData.initList.push(item)
  }
}
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;
  padding: 4px;
}
.form-item-sub-line {
  line-height: 24px;
  color: var(--el-color-primary);
}
.rollback-reason-container {
  color: var(--el-color-danger);
}

.demo-tabs {
  .pointer-input {
    ::v-deep {
      .el-input__wrapper,
      .el-input__inner {
        cursor: pointer;
      }
    }
  }
}

.form-init {
  padding-bottom: 16px;
}
.form-init-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  ::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }

  .form-init-row-js {
    flex: 8;
  }
  .form-init-row-ms {
    flex: 4;
  }

  &:not(:last-of-type) {
    margin-bottom: 16px;
  }
}
</style>