data-marketing-platform/src/views/marketing/data/dataInfoModal.vue

<template>
  <!-- 富文本详情弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="数据详情"
    width="80%"
    class="rich-content-dialog"
    :before-close="handleClose"
    @opened="onOpened"
  >
    <!-- 弹窗内容区 -->
    <div class="content-wrapper" ref="contentWrapper">
      <div 
        v-loading="loading" 
        element-loading-text="加载中..."
        class="content-container"
      >
        <!-- 富文本内容展示区 -->
        <div 
          v-if="content" 
          class="rich-content-display"
          v-html="content"
        ></div>
        
        <!-- 空状态 -->
        <el-empty v-else description="暂无内容" />
      </div>
    </div>
    
    <!-- 底部信息栏 -->
    <template #footer>
      <div class="dialog-footer-info">
        <span v-if="createTime" class="create-time">
          创建时间: {{ formatTime(createTime) }}
        </span>
        <span v-if="updateTime" class="update-time">
          更新时间: {{ formatTime(updateTime) }}
        </span>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 弹窗可见性
const dialogVisible = ref(false)

// 加载状态
const loading = ref(false)

// 富文本内容
const content = ref('')

// 创建时间
const createTime = ref<string | Date | null>(null)

// 更新时间
const updateTime = ref<string | Date | null>(null)

// 内容容器引用
const contentWrapper = ref<HTMLElement | null>(null)

// 打开弹窗方法
const openDialog = (
  richContent: string, 
  options?: {
    createTime?: string | Date,
    updateTime?: string | Date
  }
) => {
  dialogVisible.value = true
  loading.value = true
  
  // 设置内容和时间信息
  content.value = richContent
  createTime.value = options?.createTime || null
  updateTime.value = options?.updateTime || null
  
  // 模拟加载延迟
  setTimeout(() => {
    loading.value = false
  }, 300)
}

// 弹窗打开后的回调
const onOpened = () => {
  // 可以在这里处理弹窗打开后的逻辑，如聚焦等
  if (contentWrapper.value) {
    // 滚动到顶部
    contentWrapper.value.scrollTop = 0
  }
}

// 格式化时间
const formatTime = (time: string | Date | null) => {
  if (!time) return '--'
  const date = new Date(time)
  return date.toLocaleString('zh-CN')
}

// 关闭前的处理
const handleClose = () => {
  dialogVisible.value = false
}

// 暴露方法给父组件
defineExpose({
  openDialog
})
</script>

<style scoped lang="scss">
.rich-content-dialog {
  height: 80vh;
  
  :deep(.el-dialog__body) {
    padding: 0;
    height: calc(80vh - 120px);
  }
  
  :deep(.el-dialog__header) {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #eee;
  }
}

.content-wrapper {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.content-container {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-track {
    background-color: #f1f1f1;
  }
}

.rich-content-display {
  min-height: 100%;
  
  // 通用富文本样式
  :deep(img) {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
  }
  
  :deep(h1),
  :deep(h2),
  :deep(h3),
  :deep(h4),
  :deep(h5),
  :deep(h6) {
    margin: 20px 0 10px 0;
    color: #333;
    font-weight: 600;
  }
  
  :deep(h1) {
    font-size: 24px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
  }
  
  :deep(h2) {
    font-size: 22px;
  }
  
  :deep(h3) {
    font-size: 20px;
  }
  
  :deep(h4) {
    font-size: 18px;
  }
  
  :deep(p) {
    margin: 10px 0;
    line-height: 1.8;
    color: #555;
    font-size: 14px;
  }
  
  :deep(ul),
  :deep(ol) {
    padding-left: 20px;
    margin: 10px 0;
  }
  
  :deep(li) {
    margin: 5px 0;
    line-height: 1.6;
  }
  
  :deep(strong) {
    font-weight: 600;
  }
  
  :deep(em) {
    font-style: italic;
  }
  
  :deep(a) {
    color: #409eff;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
  
  :deep(blockquote) {
    margin: 15px 0;
    padding: 10px 15px;
    border-left: 4px solid #409eff;
    background-color: #f5f8ff;
    color: #666;
  }
  
  :deep(code) {
    background-color: #f5f5f5;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 13px;
  }
  
  :deep(pre) {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    margin: 15px 0;
    font-size: 13px;
    line-height: 1.5;
  }
  
  :deep(table) {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
  }
  
  :deep(th),
  :deep(td) {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
  }
  
  :deep(th) {
    background-color: #f8f9fa;
    font-weight: 600;
  }
  
  :deep(tr:nth-child(even)) {
    background-color: #f9f9f9;
  }
}

.dialog-footer-info {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #999;
  
  .create-time,
  .update-time {
    display: inline-block;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .rich-content-dialog {
    width: 95%;
    height: 90vh;
    
    :deep(.el-dialog__body) {
      height: calc(90vh - 120px);
    }
  }
  
  .dialog-footer-info {
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
  }
}
</style>