<template>
  <el-row class="wrapper layout-grid-line">
    <el-col :span="span">
      <pre>
        {{
          `
import AiSummary from '@/components/base/Ai/AiSummary/index.vue'
  <div class="summary-box">
    <AiSummary />
  </div>
`
        }}
      </pre>
      <div class="summary-box">
        <AiSummary>
          <template #summary-content>
            <div class="content-box">
              我是插槽内容区域(忽略背景色)
            </div>

          </template>
        </AiSummary>

      </div>

    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import '@/styles/common.scss'
import AiSummary from '@/components/base/Ai/AiSummary/index.vue'
const span = 24


const aiContent = ref(`整个立法过程反映了美国政治的高度极化特点。民主党全员反对该法案，批评其"劫贫济富"。而共和党内部也有分歧，特别是在财政赤字问题上。马斯克多次公开批评该法案是"疯狂的支出计划"。整个立法过程反映了美国政治的高度极化特点。民主党全员反对该法案，批评其"劫贫济富"。而共和党内部也有分歧，特别是在财政赤字问题上。马斯克多次公开批评该法案是"疯狂的支出计划"。`)


</script>

<style lang="scss" scoped>
.summary-box {
  margin-left: 10px;
  margin-bottom: 10px;
  width: 1019px;
  height: 453px;
  .content-box{
    width: 100%;
    height: 100%;
    background: var(--color-primary-2);
  }
}
</style>