xiangqinxiangmu/marriageAdmin-vue/src/views/report/ReportList.vue

<template>
  <div class="report-page">
    <h2 class="page-title">举报管理</h2>

    <el-card shadow="never" class="toolbar-card">
      <el-space wrap>
        <el-select v-model="filters.status" placeholder="举报状态" clearable style="width: 140px" @change="loadList">
          <el-option label="全部" :value="undefined" />
          <el-option label="待处理" :value="0" />
          <el-option label="处理中" :value="1" />
          <el-option label="已处理" :value="2" />
          <el-option label="已驳回" :value="3" />
        </el-select>
        <el-input v-model="filters.dynamicId" placeholder="动态ID" clearable style="width: 160px" @keyup.enter.native="loadList" />
        <el-button icon="Search" type="primary" @click="loadList">查询</el-button>
        <el-button icon="Refresh" @click="resetAndReload">重置</el-button>
      </el-space>
    </el-card>

    <el-card shadow="never" class="table-card">
      <el-table v-loading="loading" :data="list" stripe>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="reportId" label="举报ID" width="90" />
        <el-table-column prop="dynamicId" label="动态ID" width="90" />
        <el-table-column label="举报人" width="120">
          <template #default="{ row }">
            {{ row.reporterName || (`用户${row.reporterId ?? ''}`) }}
          </template>
        </el-table-column>
        <el-table-column label="被举报人" width="120">
          <template #default="{ row }">
            {{ row.reportedName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="类型" width="110">
          <template #default="{ row }">
            <el-tag size="small" :type="typeTagType(row.reportType)">{{ typeText(row.reportType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" min-width="220" show-overflow-tooltip />
        <el-table-column label="截图" width="120">
          <template #default="{ row }">
            <template v-if="getScreenshotUrls(row).length">
              <el-image 
                :src="getScreenshotUrls(row)[0]" 
                :preview-src-list="getScreenshotUrls(row)" 
                fit="cover" 
                style="width:64px;height:64px;border-radius:6px;cursor:pointer;"
                :lazy="true"
                :hide-on-click-modal="true"
                :data-report-id="row.reportId"
                @error="(e) => handleImageError(e, row)"
              >
                <template #error>
                  <div class="img-error" :title="`URL: ${getScreenshotUrls(row)[0]}`">
                    <el-icon><Picture /></el-icon>
                    <span>加载失败</span>
                  </div>
                </template>
              </el-image>
            </template>
            <div v-else class="img-placeholder">无</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="statusType(row.status)" size="small">{{ statusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="举报时间" width="170" />
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <el-button size="small" type="primary" link @click="openDynamic(row)">查看动态</el-button>
            <el-button size="small" type="warning" link @click="openHandle(row)">处理举报</el-button>
            <el-divider direction="vertical" />
            <el-button size="small" type="danger" link @click="openModerate(row, 3)">删除</el-button>
            <el-button v-if="row.status!==2" size="small" type="danger" link @click="openModerate(row, 2)">封禁</el-button>
            <el-button v-else size="small" type="success" link @click="openUnban(row)">取消封禁</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next"
          @size-change="loadList"
          @current-change="loadList"
        />
      </div>
    </el-card>

    <!-- 动态详情 -->
    <el-dialog v-model="dynamicDialog.visible" title="动态详情" width="800px">
      <div v-if="dynamicDialog.loading" class="loading">加载中...</div>
      <div v-else-if="dynamicDialog.data">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="动态ID">{{ dynamicDialog.data.dynamicId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="作者昵称">
            {{ dynamicDialog.data.userNickname || `用户${dynamicDialog.data.userId || ''}` }}
          </el-descriptions-item>
          <el-descriptions-item label="作者ID">{{ dynamicDialog.data.userId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="发布时间">{{ dynamicDialog.data.createTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="点赞数">{{ dynamicDialog.data.likeCount || 0 }}</el-descriptions-item>
          <el-descriptions-item label="评论数">{{ dynamicDialog.data.commentCount || 0 }}</el-descriptions-item>
          <el-descriptions-item label="审核状态" :span="2">
            <el-tag :type="getAuditStatusType(dynamicDialog.data.auditStatus)" size="small">
              {{ getAuditStatusText(dynamicDialog.data.auditStatus) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="动态内容" :span="2">
            <div class="dynamic-content-text">{{ dynamicDialog.data.content || '（无内容）' }}</div>
          </el-descriptions-item>
        </el-descriptions>
        <div v-if="dynamicDialog.medias && dynamicDialog.medias.length > 0" class="media-section">
          <div class="media-title">媒体文件（{{ dynamicDialog.medias.length }}张）</div>
          <div class="media-list">
            <el-image 
              v-for="(m, idx) in dynamicDialog.medias" 
              :key="idx" 
              :src="m" 
              :preview-src-list="dynamicDialog.medias" 
              fit="cover" 
              style="width:96px;height:96px;border-radius:6px;margin-right:8px;margin-bottom:8px;cursor:pointer;"
              :lazy="true"
              @error="handleImageError"
            >
              <template #error>
                <div class="img-error" style="width:96px;height:96px;">
                  <el-icon><Picture /></el-icon>
                  <span>加载失败</span>
                </div>
              </template>
            </el-image>
          </div>
        </div>
      </div>
      <div v-else class="error-message">动态不存在或已被删除</div>
    </el-dialog>

    <!-- 处理举报 -->
    <el-dialog v-model="handleDialog.visible" title="处理举报" width="520px">
      <el-form :model="handleDialog.form" label-width="88px">
        <el-form-item label="举报ID">
          <span>{{ handleDialog.form.reportId }}</span>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-tag :type="statusType(handleDialog.form.originStatus)">{{ statusText(handleDialog.form.originStatus) }}</el-tag>
        </el-form-item>
        <el-form-item label="处理结果" required>
          <el-select v-model="handleDialog.form.status" placeholder="请选择">
            <el-option :value="2" label="已处理" />
            <el-option :value="3" label="已驳回" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="handleDialog.form.handleResult" type="textarea" :rows="4" placeholder="填写处理说明" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleDialog.visible=false">取消</el-button>
        <el-button type="primary" :loading="handleDialog.loading" @click="submitHandle">确定</el-button>
      </template>
    </el-dialog>

    <!-- 管理操作（封禁/删除） -->
    <el-dialog v-model="moderateDialog.visible" :title="moderateDialog.action===2?'封禁动态':moderateDialog.action===3?'删除动态':'取消封禁'" width="720px">
      <div v-if="moderateDialog.loading" class="loading">加载中...</div>
      <div v-else>
        <el-descriptions :column="2" border style="margin-bottom: 20px;">
          <el-descriptions-item label="动态ID">{{ moderateDialog.form.dynamicId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="作者昵称">
            {{ moderateDialog.form.userNickname || `用户${moderateDialog.form.userId || ''}` }}
          </el-descriptions-item>
          <el-descriptions-item label="作者ID">{{ moderateDialog.form.userId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="发布时间">{{ moderateDialog.form.createTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="点赞数">{{ moderateDialog.form.likeCount || 0 }}</el-descriptions-item>
          <el-descriptions-item label="评论数">{{ moderateDialog.form.commentCount || 0 }}</el-descriptions-item>
          <el-descriptions-item label="审核状态" :span="2">
            <el-tag :type="getAuditStatusType(moderateDialog.form.auditStatus)" size="small">
              {{ getAuditStatusText(moderateDialog.form.auditStatus) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="动态内容" :span="2">
            <div class="dynamic-content-text">{{ moderateDialog.form.content || '（无内容）' }}</div>
          </el-descriptions-item>
        </el-descriptions>
        
        <div v-if="moderateDialog.form.reportInfo" class="report-info-section">
          <el-divider content-position="left">相关举报信息</el-divider>
          <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="举报类型">
              <el-tag size="small" :type="typeTagType(moderateDialog.form.reportInfo.reportType)">
                {{ typeText(moderateDialog.form.reportInfo.reportType) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="举报描述">{{ moderateDialog.form.reportInfo.description || '-' }}</el-descriptions-item>
            <el-descriptions-item label="举报人">{{ moderateDialog.form.reportInfo.reporterName || `用户${moderateDialog.form.reportInfo.reporterId || ''}` }}</el-descriptions-item>
            <el-descriptions-item label="举报时间">{{ moderateDialog.form.reportInfo.createdAt || '-' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        
        <el-form :model="moderateDialog.form" label-width="100px" style="margin-top: 20px;">
          <el-form-item label="处理原因" required>
            <el-input v-model="moderateDialog.form.reason" type="textarea" :rows="4" placeholder="请填写具体原因" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="moderateDialog.visible=false">取消</el-button>
        <el-button type="primary" :loading="moderateDialog.loading" @click="submitModerate" :disabled="!moderateDialog.form.reason?.trim()">确定</el-button>
      </template>
    </el-dialog>
  </div>
  
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Picture } from '@element-plus/icons-vue'
import request from '@/utils/request'
import { API_ENDPOINTS, API_BASE_URL } from '@/config/api'

const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const list = ref([])

const filters = reactive({ status: undefined, dynamicId: '' })

const resetAndReload = () => {
  filters.status = undefined
  filters.dynamicId = ''
  loadList()
}

const statusText = (s) => ({0:'待处理',1:'处理中',2:'已处理',3:'已驳回'}[s] || '未知')
const statusType = (s) => ({0:'danger',1:'warning',2:'success',3:'info'}[s] || '')
const typeText = (t) => ({ spam:'垃圾广告', porn:'色情低俗', violence:'暴力违法', attack:'人身攻击', fake:'虚假信息', plagiarism:'抄袭侵权', other:'其他' }[t] || t || '其他')
const typeTagType = (t) => ({ spam:'warning', porn:'danger', violence:'danger', attack:'danger', fake:'warning', plagiarism:'warning', other:'info' }[t] || 'info')
const getAuditStatusText = (status) => {
  const texts = { 0: '待审核', 1: '已通过', 2: '未通过' }
  return texts[status] || '未知'
}
const getAuditStatusType = (status) => {
  const types = { 0: 'warning', 1: 'success', 2: 'danger' }
  return types[status] || ''
}

// 获取基础URL（用于图片资源）
const getBaseUrl = () => {
  // 开发环境：图片资源通过8083端口访问
  if (import.meta.env.DEV) {
    return 'http://localhost:8083'
  }
  // 生产环境：使用配置的API基础URL
  return API_BASE_URL || ''
}

// 格式化媒体URL（与DynamicDetail.vue保持一致）
const formatMedia = (u) => {
  if (!u) return ''
  
  let url = String(u).trim()
  if (!url) return ''
  
  // 去除引号
  if ((url.startsWith('"') && url.endsWith('"')) || (url.startsWith("'") && url.endsWith("'"))) {
    url = url.substring(1, url.length - 1)
  }
  
  // 如果已经是完整的URL，直接返回
  if (url.startsWith('http')) {
    return url
  }
  
  // 获取BASE URL并拼接
  const baseUrl = getBaseUrl()
  
  // 确保url以/开头
  if (!url.startsWith('/')) {
    url = '/' + url
  }
  
  return `${baseUrl}${url}`
}

// 从后端临时塞入的 handleResult 前缀里解析昵称（@nick:李娜 ...）
const extractNick = (row) => {
  const r = row?.handleResult || ''
  const m = /^@nick:([^\s]+)\s?/.exec(r)
  if (m && m[1]) return m[1]
  return `用户${row?.reporterId ?? ''}`
}

// 解析截图数据（与DynamicDetail.vue保持一致）
const parseScreens = (raw) => {
  if (!raw) return []
  
  let urls = []
  const trimmed = String(raw).trim()
  
  // 尝试解析JSON数组格式
  try {
    if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
      const arr = JSON.parse(trimmed)
      if (Array.isArray(arr)) {
        urls = arr
      }
    }
  } catch (e) {
    // JSON解析失败，忽略错误，继续尝试其他格式
  }
  
  // 如果不是JSON数组，尝试按逗号分隔
  if (!urls.length) {
    urls = trimmed.split(',').map((item) => item.trim()).filter(Boolean)
  }
  
  return urls
}

// 获取格式化后的截图URL列表
const getScreenshotUrls = (row) => {
  if (!row?.screenshots) {
    return []
  }
  
  const screens = parseScreens(row.screenshots)
  if (!screens || screens.length === 0) {
    return []
  }
  
  const urls = screens.map(formatMedia).filter(Boolean)
  
  // 详细调试日志
  if (urls.length > 0) {
    console.log('📸 举报ID:', row.reportId, {
      '原始数据': row.screenshots,
      '解析后数组': screens,
      '格式化后URLs': urls,
      'BASE URL': getBaseUrl()
    })
  } else {
    console.warn('⚠️ 举报ID:', row.reportId, '解析后无有效URL，原始数据:', row.screenshots)
  }
  
  return urls
}

// 图片加载错误处理
const handleImageError = (e, row) => {
  const img = e.target || e
  const src = img?.src || img?.currentSrc || 'unknown'
  const reportId = row?.reportId || img?.dataset?.reportId || 'unknown'
  const urls = row ? getScreenshotUrls(row) : []
  
  console.error('❌ 图片加载失败:', {
    reportId,
    src,
    '原始screenshots': row?.screenshots,
    '解析后URLs': urls,
    'BASE URL': getBaseUrl(),
    error: e
  })
  
  // 检查URL格式
  if (src && !src.startsWith('http')) {
    console.warn('⚠️ 图片URL格式可能不正确:', src)
  }
  
  // 检查URL是否可访问
  if (src && src.startsWith('http')) {
    console.warn('⚠️ 图片URL格式正确但加载失败，可能是文件不存在或CORS问题:', src)
  }
}

const loadList = async () => {
  loading.value = true
  try {
    const res = await request.get(API_ENDPOINTS.REPORT_LIST, {
      params: { page: currentPage.value, pageSize: pageSize.value, status: filters.status, dynamicId: filters.dynamicId || undefined }
    })
    if (res.code === 200) {
      list.value = res.data.list || []
      total.value = res.data.total || list.value.length
      
      // 调试日志：检查截图数据
      console.log('📋 举报列表加载成功，共', list.value.length, '条')
      list.value.forEach((row, idx) => {
        if (row.screenshots) {
          const urls = getScreenshotUrls(row)
          console.log(`  [${idx + 1}] 举报ID: ${row.reportId}, 原始screenshots:`, row.screenshots, '解析后URLs:', urls)
        }
      })
    } else {
      console.error('加载举报列表失败:', res.msg || '未知错误')
    }
  } catch (e) {
    console.error('加载举报失败', e)
  } finally { loading.value = false }
}

// 动态详情
const dynamicDialog = reactive({ visible: false, loading: false, data: null, medias: [] })
const parseMediaUrls = (raw) => {
  if (!raw) return []
  try {
    const value = typeof raw === 'string' ? raw.trim() : raw
    if (typeof value === 'string' && value.startsWith('[')) {
      return JSON.parse(value)
    }
    if (typeof value === 'string') {
      return value.split(',').map((s) => s.trim().replace(/^['"]|['"]$/g, '')).filter(Boolean)
    }
    return Array.isArray(value) ? value : []
  } catch {
    return []
  }
}
const openDynamic = async (row) => {
  const reportId = row?.reportId
  if (!reportId) {
    dynamicDialog.data = { content: '未获取到举报ID' }
    dynamicDialog.medias = getScreenshotUrls(row)
    dynamicDialog.visible = true
    return
  }
  dynamicDialog.visible = true
  dynamicDialog.loading = true
  dynamicDialog.data = null
  dynamicDialog.medias = []
  try {
    // 通过 reportId 获取举报详情（包含动态详情）
    const reportRes = await request.get(`${API_ENDPOINTS.REPORT_DETAIL}/${reportId}`)
    if (reportRes.code !== 200 || !reportRes.data) {
      dynamicDialog.data = { content: reportRes.msg || '举报不存在' }
      dynamicDialog.medias = getScreenshotUrls(row)
      dynamicDialog.loading = false
      return
    }
    
    const report = reportRes.data
    const dynamic = report.dynamic
    
    if (!dynamic) {
      dynamicDialog.data = { content: '动态不存在或已被删除' }
      dynamicDialog.medias = getScreenshotUrls(row)
      dynamicDialog.loading = false
      return
    }
    
    // 直接使用举报详情接口返回的动态信息
    dynamicDialog.data = dynamic
    // 使用 screenshots 字段作为展示图片
    const screens = parseScreens(dynamic?.screenshots)
    dynamicDialog.medias = screens.length ? screens.map(formatMedia) : getScreenshotUrls(row)
  } catch (e) {
    console.error('获取动态详情失败', e)
    dynamicDialog.data = { content: e?.message ? `加载失败：${e.message}` : '加载失败' }
    dynamicDialog.medias = getScreenshotUrls(row)
  } finally { 
    dynamicDialog.loading = false 
  }
}

// 处理举报
const handleDialog = reactive({ visible: false, loading: false, form: { reportId: null, originStatus: 0, status: 2, handleResult: '' } })
const openHandle = (row) => {
  handleDialog.visible = true
  handleDialog.form.reportId = row.reportId
  handleDialog.form.originStatus = row.status
  handleDialog.form.status = 2
  handleDialog.form.handleResult = ''
}
const submitHandle = async () => {
  if (!handleDialog.form.reportId) return
  handleDialog.loading = true
  try {
    const res = await request.post(`${API_ENDPOINTS.REPORT_HANDLE}/${handleDialog.form.reportId}`, {
      status: handleDialog.form.status,
      handleResult: handleDialog.form.handleResult
    })
    if (res.code === 200) {
      ElMessage.success('处理成功')
      handleDialog.visible = false
      loadList()
    }
  } catch (e) { console.error('处理失败', e) }
  finally { handleDialog.loading = false }
}

onMounted(loadList)

// 管理操作：封禁/删除
const moderateDialog = reactive({ 
  visible: false, 
  loading: false, 
  action: 2, 
  form: { 
    dynamicId: null, 
    userId: null,
    userNickname: null,
    content: null,
    createTime: null,
    likeCount: 0,
    commentCount: 0,
    auditStatus: null,
    reportInfo: null,
    reason: '' 
  } 
})
const openModerate = async (row, action) => {
  moderateDialog.visible = true
  moderateDialog.action = action
  moderateDialog.loading = true
  moderateDialog.form.reason = ''
  // 重置其他字段
  moderateDialog.form.dynamicId = null
  moderateDialog.form.userId = null
  moderateDialog.form.userNickname = null
  moderateDialog.form.content = null
  moderateDialog.form.createTime = null
  moderateDialog.form.likeCount = 0
  moderateDialog.form.commentCount = 0
  moderateDialog.form.auditStatus = null
  moderateDialog.form.reportInfo = null
  
  const reportId = row?.reportId
  if (!reportId) {
    moderateDialog.loading = false
    ElMessage.error('未获取到举报ID')
    return
  }
  
  try {
    // 先通过 reportId 获取举报详情
    const reportRes = await request.get(`${API_ENDPOINTS.REPORT_DETAIL}/${reportId}`)
    if (reportRes.code !== 200 || !reportRes.data) {
      ElMessage.error(reportRes.msg || '举报不存在')
      moderateDialog.loading = false
      return
    }
    
    const report = reportRes.data
    const dynamic = report.dynamic
    
    // 加载举报信息
    moderateDialog.form.reportInfo = {
      reportId: report.reportId,
      reportType: report.reportType,
      description: report.description,
      reporterId: report.reporterId,
      reporterName: report.reporterName || row.reporterName,
      createdAt: report.createdAt || row.createdAt
    }
    
    // 加载动态详情（从举报详情接口返回的 dynamic 字段中获取）
    if (dynamic) {
      moderateDialog.form.dynamicId = dynamic.dynamicId
      moderateDialog.form.userId = dynamic.userId
      moderateDialog.form.userNickname = dynamic.userNickname
      moderateDialog.form.content = dynamic.content
      moderateDialog.form.createTime = dynamic.createTime
      moderateDialog.form.likeCount = dynamic.likeCount || 0
      moderateDialog.form.commentCount = dynamic.commentCount || 0
      moderateDialog.form.auditStatus = dynamic.auditStatus
    }
  } catch (e) {
    console.error('加载举报详情失败', e)
    ElMessage.error('加载举报详情失败')
  } finally {
    moderateDialog.loading = false
  }
}
const submitModerate = async () => {
  if (!moderateDialog.form.reason.trim()) return ElMessage.error('请填写处理原因')
  moderateDialog.loading = true
  try {
    const res = await request.post('/api/dynamic/admin/moderate', null, {
      params: { dynamicId: moderateDialog.form.dynamicId, action: moderateDialog.action, reason: moderateDialog.form.reason }
    })
    if (res.code === 200) {
      ElMessage.success('操作成功')
      moderateDialog.visible = false
      loadList()
    }
  } catch (e) { console.error('操作失败', e) }
  finally { moderateDialog.loading = false }
}

const openUnban = async (row) => {
  moderateDialog.visible = true
  moderateDialog.action = 1
  moderateDialog.loading = true
  moderateDialog.form.dynamicId = row.dynamicId
  moderateDialog.form.reason = ''
  // 重置其他字段
  moderateDialog.form.userId = null
  moderateDialog.form.userNickname = null
  moderateDialog.form.content = null
  moderateDialog.form.createTime = null
  moderateDialog.form.likeCount = 0
  moderateDialog.form.commentCount = 0
  moderateDialog.form.auditStatus = null
  moderateDialog.form.reportInfo = null
  
  // 加载动态详情
  if (row.dynamicId) {
    try {
      const res = await request.get(`${API_ENDPOINTS.DYNAMIC_DETAIL}/${row.dynamicId}`)
      if (res.code === 200 && res.data) {
        moderateDialog.form.userId = res.data.userId
        moderateDialog.form.userNickname = res.data.userNickname
        moderateDialog.form.content = res.data.content
        moderateDialog.form.createTime = res.data.createTime
        moderateDialog.form.likeCount = res.data.likeCount || 0
        moderateDialog.form.commentCount = res.data.commentCount || 0
        moderateDialog.form.auditStatus = res.data.auditStatus
      }
    } catch (e) {
      console.error('加载动态详情失败', e)
    }
  }
  
  moderateDialog.loading = false
}
</script>

<style scoped>
.report-page { padding: 0; }
.page-title { font-size: 24px; font-weight: bold; color: #333; margin: 0 0 20px 0; }
.toolbar-card { margin-bottom: 20px; }
.table-card { margin-top: 20px; }
.pagination-container { display: flex; justify-content: flex-end; margin-top: 20px; }
.img-placeholder { width:64px;height:64px;border-radius:6px;background:#f5f7fa;color:#909399;display:flex;align-items:center;justify-content:center;font-size:12px; }
.img-error { width:64px;height:64px;border-radius:6px;background:#fef0f0;color:#f56c6c;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px; }
.img-error .el-icon { font-size:20px;margin-bottom:2px; }
.dynamic-content { margin-bottom: 10px; color:#333; }
.dynamic-content-text { 
  max-height: 200px; 
  overflow-y: auto; 
  padding: 8px; 
  background: #f5f7fa; 
  border-radius: 4px; 
  line-height: 1.6; 
  word-break: break-word;
  white-space: pre-wrap;
}
.media-section { margin-top: 20px; }
.media-title { 
  font-size: 14px; 
  font-weight: 600; 
  color: #606266; 
  margin-bottom: 12px; 
}
.media-list { display:flex; flex-wrap: wrap; }
.loading { 
  color:#909399; 
  text-align: center; 
  padding: 40px 0; 
}
.error-message { 
  color: #f56c6c; 
  text-align: center; 
  padding: 40px 0; 
}
.report-info-section { 
  margin-top: 20px; 
  padding: 16px; 
  background: #f9fafc; 
  border-radius: 4px; 
}
</style>