AIClass/src/views/qsfl/components/AiQAMarkdown.vue

<template>
  <div ref="contentRef" class="markdown-view" :class="`markdown-view--${props.theme}`" @click="handleCitationClick">
    <template v-for="segment in renderedSegments" :key="segment.key">
      <div v-if="segment.type === 'markdown'" class="markdown-fragment" v-html="segment.html"></div>
      <section v-else class="markdown-score-radar" :data-score-block-key="segment.blockKey">
        <div class="markdown-score-radar__header">
          <div>
            <strong>{{ segment.data.studentName }} · AI评分雷达图</strong>
            <small>满分 {{ segment.data.maxScore }} 分</small>
          </div>
          <button class="markdown-score-radar__action" type="button" data-copy-exclude @click.stop="openExpertDialog(segment)">
            {{ hasExpertScores(segment) ? '修改专家评分' : '补充专家评分' }}
          </button>
        </div>

        <svg class="markdown-score-radar__chart" viewBox="0 0 420 350" role="img" :aria-label="`${segment.data.studentName}评分雷达图`">
          <g transform="translate(210 164)">
            <polygon
                v-for="level in segment.data.maxScore"
                :key="`grid-${level}`"
                class="markdown-score-radar__grid"
                :points="gridPoints(segment.data.dimensions.length, level / segment.data.maxScore)"
            />
            <line
                v-for="(_, index) in segment.data.dimensions"
                :key="`axis-${index}`"
                class="markdown-score-radar__axis"
                x1="0"
                y1="0"
                :x2="polarPoint(index, segment.data.dimensions.length, 1).x"
                :y2="polarPoint(index, segment.data.dimensions.length, 1).y"
            />
            <polygon class="markdown-score-radar__area markdown-score-radar__area--ai" :points="scorePoints(segment, 'ai')" />
            <polygon v-if="hasExpertScores(segment)" class="markdown-score-radar__area markdown-score-radar__area--expert" :points="scorePoints(segment, 'expert')" />
            <template v-for="(dimension, index) in segment.data.dimensions" :key="`point-${dimension.key}`">
              <circle
                  v-if="dimension.aiScore !== null"
                  class="markdown-score-radar__point markdown-score-radar__point--ai"
                  :cx="scorePoint(segment, index, 'ai').x"
                  :cy="scorePoint(segment, index, 'ai').y"
                  r="3.5"
              />
              <circle
                  v-if="expertScore(segment, dimension.key) !== null"
                  class="markdown-score-radar__point markdown-score-radar__point--expert"
                  :cx="scorePoint(segment, index, 'expert').x"
                  :cy="scorePoint(segment, index, 'expert').y"
                  r="3.5"
              />
              <text
                  class="markdown-score-radar__label"
                  :x="labelPoint(index, segment.data.dimensions.length).x"
                  :y="labelPoint(index, segment.data.dimensions.length).y"
                  :text-anchor="labelAnchor(index, segment.data.dimensions.length)"
                  dominant-baseline="middle"
              >{{ dimension.shortName }}</text>
            </template>
          </g>
        </svg>

        <div class="markdown-score-radar__legend">
          <span><i class="markdown-score-radar__legend-dot markdown-score-radar__legend-dot--ai"></i>AI评分</span>
          <span v-if="hasExpertScores(segment)"><i class="markdown-score-radar__legend-dot markdown-score-radar__legend-dot--expert"></i>专家评分</span>
        </div>

        <div class="markdown-score-radar__score-list">
          <div v-for="dimension in segment.data.dimensions" :key="dimension.key">
            <span>{{ dimension.name }}</span>
            <b>AI：{{ formatScore(dimension.aiScore) }}</b>
            <b v-if="hasExpertScores(segment)">专家：{{ formatScore(expertScore(segment, dimension.key)) }}</b>
          </div>
        </div>
      </section>
    </template>
  </div>

  <el-dialog v-model="expertDialogVisible" title="补充专家评分" width="min(520px, 92vw)" append-to-body destroy-on-close>
    <p class="markdown-score-dialog__hint">{{ editingSegment?.data.studentName }} · 评分范围1–5分，可留空表示未评分</p>
    <div class="markdown-score-dialog__list">
      <label v-for="dimension in editingSegment?.data.dimensions || []" :key="dimension.key">
        <span>{{ dimension.name }}</span>
        <el-select v-model="expertDraft[dimension.key]" clearable placeholder="未评分">
          <el-option v-for="score in 5" :key="score" :label="`${score}分`" :value="score" />
        </el-select>
      </label>
    </div>
    <template #footer>
      <el-button @click="expertDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveExpertScores">确认并生成对比</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import MarkdownIt from 'markdown-it'
import 'highlight.js/styles/vs2015.min.css'
import hljs from 'highlight.js'
import { computed, reactive, ref } from 'vue'

const props = defineProps({
  content: {
    type: String,
    required: true
  },
  citationIds: {
    type: Array,
    default: () => []
  },
  theme: {
    type: String,
    default: 'light',
    validator: (value: string) => ['light', 'dark'].includes(value)
  },
  enableStudentScore: {
    type: Boolean,
    default: false
  },
  scoreOverrides: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['citation-click', 'student-score-change'])

const contentRef = ref()
const expertDialogVisible = ref(false)
const editingSegment = ref<any>(null)
const expertDraft = reactive<Record<string, number | null>>({})

const SCORE_DIMENSION_KEYS = [
  'customer_context',
  'customer_insight',
  'policy_interpretation',
  'opportunity_risk',
  'objection_reframing',
  'fabetc'
]

type ScoreDimension = {
  key: string
  name: string
  shortName: string
  aiScore: number | null
}

type StudentScoreData = {
  studentId: string
  studentName: string
  maxScore: number
  dimensions: ScoreDimension[]
}

type MarkdownSegment = {
  key: string
  type: 'markdown'
  html: string
}

type RadarSegment = {
  key: string
  type: 'radar'
  blockKey: string
  data: StudentScoreData
}

type RenderedSegment = MarkdownSegment | RadarSegment

/**
 * 将表格行按 | 分割，去除首尾空字符串，返回单元格数组
 */
function parseTableRow(line: string): string[] {
  const parts = line.split('|')
  // 去除首尾空元素（因为 | 在开头和结尾）
  if (parts[0]?.trim() === '') parts.shift()
  if (parts[parts.length - 1]?.trim() === '') parts.pop()
  return parts.map(p => p.trim())
}

/**
 * 检查字符串是否为有效的表格分隔符单元格
 * 标准格式：---, :---, ---:, :---:
 */
function isSeparatorCell(cell: string): boolean {
  return /^:?-{2,}:?$/.test(cell)
}

/**
 * 预处理 Markdown 内容，修复不规范的表格格式
 * 主要修复：分隔符行列数不匹配、格式错误、多余的竖线、空单元格格式问题
 */
function normalizeMarkdownTables(content: string): string {
  if (!content) return content

  const lines = content.split('\n')
  const result: string[] = []
  let i = 0

  while (i < lines.length) {
    const line = lines[i]
    const trimmedLine = line.trim()

    // 检测可能的表格起始行（以 | 开头结尾，且包含多个单元格）
    if (trimmedLine.startsWith('|') && trimmedLine.endsWith('|') && trimmedLine.includes('|', 1) && i + 1 < lines.length) {
      const headerCells = parseTableRow(trimmedLine)
      const expectedCols = headerCells.length

      // 至少需要2列才能构成表格
      if (expectedCols >= 2) {
        const nextLineRaw = lines[i + 1]
        const nextLine = nextLineRaw?.trim() || ''

        // 检查下一行是否看起来像分隔符行（包含大量 | 和 -）
        const looksLikeSeparator = nextLine.startsWith('|') && nextLine.endsWith('|')
            && nextLine.includes('-') && /^\|[\s\-:|]+\|$/.test(nextLine)

        // 或尝试宽松检测：包含足够多的 | 和 - 字符
        const pipeCount = (nextLine.match(/\|/g) || []).length
        const dashCount = (nextLine.match(/-/g) || []).length
        const looseSeparatorMatch = pipeCount >= 2 && dashCount >= 3

        if (looksLikeSeparator || looseSeparatorMatch) {
          // 尝试解析分隔符行的单元格
          let sepCells = parseTableRow(nextLine)

          // 如果分隔符单元格解析后大部分是有效的分隔符格式，确认是表格
          const validSepCount = sepCells.filter(c => isSeparatorCell(c) || /^-+$/.test(c.replace(/\s/g, ''))).length

          if (validSepCount >= 1 || (pipeCount >= expectedCols - 1 && dashCount >= expectedCols * 2)) {
            // 确认是表格，开始修复

            // 修复分隔符行：确保列数与表头一致，每个单元格是 --- 格式
            const fixedSepCells: string[] = []
            for (let k = 0; k < expectedCols; k++) {
              const orig = sepCells[k] || ''
              // 保留原有的对齐标记（:）
              let leftAlign = orig.startsWith(':')
              let rightAlign = orig.endsWith(':')
              fixedSepCells.push((leftAlign ? ':' : '') + '---' + (rightAlign ? ':' : ''))
            }
            const fixedSepLine = '| ' + fixedSepCells.join(' | ') + ' |'

            const tableLines: string[] = []
            // 修复表头行，确保单元格之间格式正确
            tableLines.push('| ' + headerCells.join(' | ') + ' |')
            tableLines.push(fixedSepLine)

            let j = i + 2
            // 收集并修复数据行
            while (j < lines.length) {
              const dataLineRaw = lines[j]
              const dataLine = dataLineRaw?.trim() || ''

              if (dataLine.startsWith('|') && dataLine.endsWith('|')) {
                let dataCells = parseTableRow(dataLine)

                // 修复数据行列数：不足补空，多余截断
                if (dataCells.length < expectedCols) {
                  while (dataCells.length < expectedCols) dataCells.push('')
                } else if (dataCells.length > expectedCols) {
                  dataCells = dataCells.slice(0, expectedCols)
                }

                tableLines.push('| ' + dataCells.join(' | ') + ' |')
                j++
              } else if (dataLine === '') {
                // 空行可能表示表格结束，但也可能是表格内的换行（保守处理：表格结束）
                break
              } else {
                break
              }
            }

            result.push(...tableLines)
            i = j
            continue
          }
        }
      }
    }

    result.push(line)
    i++
  }

  return result.join('\n')
}

// ====== 创建 markdown-it 实例 ======
const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  breaks: false,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        const copyHtml = `<div id="copy" data-copy='${str}' style="position: absolute; right: 10px; top: 5px; color: #fff;cursor: pointer;">复制</div>`
        return `<pre style="position: relative;">${copyHtml}<code class="hljs">${hljs.highlight(lang, str, true).value}</code></pre>`
      } catch (__) {}
    }
    return `<pre><code>${escapeHtml(str)}</code></pre>`
  }
})

// ====== 关键修复：正确启用表格 ======
md.enable('table')

md.inline.ruler.before('text', 'citation_mark', (state, silent) => {
  const match = /^\[S(\d+)]/.exec(state.src.slice(state.pos, state.posMax))
  const citationIds = Array.isArray(state.env.citationIds) ? state.env.citationIds : []
  if (!match || !citationIds.includes(Number(match[1]))) return false
  if (silent) return true

  const token = state.push('citation_mark', '', 0)
  token.meta = { id: Number(match[1]) }
  token.content = match[0]
  state.pos += match[0].length
  return true
})

md.renderer.rules.citation_mark = (tokens, idx) => {
  const id = tokens[idx].meta.id
  return `<button class="citation-mark" type="button" data-citation-id="${id}">${tokens[idx].content}</button>`
}

function handleCitationClick(event: MouseEvent) {
  const target = event.target as HTMLElement | null
  const mark = target?.closest<HTMLElement>('[data-citation-id]')
  const segmentId = Number(mark?.dataset.citationId)
  if (Number.isFinite(segmentId)) emit('citation-click', segmentId)
}

function escapeHtml(text: string): string {
  const map: Record<string, string> = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  }
  return text.replace(/[&<>"']/g, function(m) { return map[m] })
}

// ====== 覆盖表格渲染规则 ======
const defaultTableOpen = md.renderer.rules.table_open
const defaultTableClose = md.renderer.rules.table_close

md.renderer.rules.table_open = function(tokens, idx, options, env, self) {
  return '<div class="markdown-table-wrap"><table>'
}

md.renderer.rules.table_close = function(tokens, idx, options, env, self) {
  return '</table></div>'
}

// ====== 确保 tbody 正确渲染 ======
md.renderer.rules.tbody_open = function(tokens, idx, options, env, self) {
  return '<tbody>'
}

md.renderer.rules.tbody_close = function(tokens, idx, options, env, self) {
  return '</tbody>'
}

function normalizeStudentScoreData(value: unknown): StudentScoreData | null {
  if (!value || typeof value !== 'object') return null
  const raw = value as Record<string, any>
  const maxScore = Number(raw.maxScore)
  if (!raw.studentName || !Number.isInteger(maxScore) || maxScore !== 5 || !Array.isArray(raw.dimensions)) return null
  if (raw.dimensions.length !== SCORE_DIMENSION_KEYS.length) return null

  const dimensions: ScoreDimension[] = []
  for (let index = 0; index < SCORE_DIMENSION_KEYS.length; index++) {
    const item = raw.dimensions[index]
    if (!item || item.key !== SCORE_DIMENSION_KEYS[index] || !item.name || !item.shortName) return null
    const aiScore = item.aiScore === null ? null : Number(item.aiScore)
    if (aiScore !== null && (!Number.isInteger(aiScore) || aiScore < 1 || aiScore > maxScore)) return null
    dimensions.push({
      key: String(item.key),
      name: String(item.name),
      shortName: String(item.shortName),
      aiScore
    })
  }

  return {
    studentId: String(raw.studentId || ''),
    studentName: String(raw.studentName),
    maxScore,
    dimensions
  }
}

function renderMarkdown(markdown: string): string {
  if (!markdown) return ''
  const normalizedContent = normalizeMarkdownTables(markdown)
  return md.render(normalizedContent, { citationIds: props.citationIds })
}

const renderedSegments = computed<any[]>(() => {
  if (!props.content) return []
  if (!props.enableStudentScore) {
    return [{ key: 'markdown-0', type: 'markdown', html: renderMarkdown(props.content) }]
  }

  const segments: RenderedSegment[] = []
  const pattern = /```student-score-json\s*\r?\n([\s\S]*?)\r?\n```/g
  let cursor = 0
  let blockIndex = 0
  let match: RegExpExecArray | null

  try {
    while ((match = pattern.exec(props.content)) !== null) {
      const before = props.content.slice(cursor, match.index)
      if (before) segments.push({ key: `markdown-${blockIndex}`, type: 'markdown', html: renderMarkdown(before) })

      let data: StudentScoreData | null = null
      try {
        data = normalizeStudentScoreData(JSON.parse(match[1]))
      } catch (_) {
        data = null
      }

      if (data) {
        const identity = data.studentId || data.studentName || `student-${blockIndex + 1}`
        const blockKey = `${identity}-${blockIndex}`
        segments.push({ key: `radar-${blockKey}`, type: 'radar', blockKey, data })
      } else {
        segments.push({ key: `markdown-invalid-${blockIndex}`, type: 'markdown', html: renderMarkdown(match[0]) })
      }

      cursor = pattern.lastIndex
      blockIndex += 1
    }

    const rest = props.content.slice(cursor)
    if (rest) segments.push({ key: `markdown-${blockIndex}`, type: 'markdown', html: renderMarkdown(rest) })
    return segments
  } catch (error) {
    console.error('Markdown 渲染失败:', error)
    return [{ key: 'markdown-error', type: 'markdown', html: escapeHtml(props.content) }]
  }
})

const RADAR_RADIUS = 104
const LABEL_RADIUS = 132

function polarPoint(index: number, count: number, ratio: number, radius = RADAR_RADIUS) {
  const angle = -Math.PI / 2 + (Math.PI * 2 * index) / count
  return {
    x: Number((Math.cos(angle) * radius * ratio).toFixed(2)),
    y: Number((Math.sin(angle) * radius * ratio).toFixed(2))
  }
}

function gridPoints(count: number, ratio: number) {
  return Array.from({ length: count }, (_, index) => {
    const point = polarPoint(index, count, ratio)
    return `${point.x},${point.y}`
  }).join(' ')
}

function getExpertScoreMap(segment: RadarSegment): Record<string, number | null> {
  const value = props.scoreOverrides?.[segment.blockKey]
  return value && typeof value === 'object' ? value : {}
}

function expertScore(segment: RadarSegment, key: string): number | null {
  const value = getExpertScoreMap(segment)[key]
  return Number.isInteger(value) && Number(value) >= 1 && Number(value) <= segment.data.maxScore ? Number(value) : null
}

function hasExpertScores(segment: RadarSegment) {
  return segment.data.dimensions.some((dimension) => expertScore(segment, dimension.key) !== null)
}

function scorePoint(segment: RadarSegment, index: number, source: 'ai' | 'expert') {
  const dimension = segment.data.dimensions[index]
  const score = source === 'ai' ? dimension.aiScore : expertScore(segment, dimension.key)
  return polarPoint(index, segment.data.dimensions.length, (score ?? 0) / segment.data.maxScore)
}

function scorePoints(segment: RadarSegment, source: 'ai' | 'expert') {
  return segment.data.dimensions.map((_, index) => {
    const point = scorePoint(segment, index, source)
    return `${point.x},${point.y}`
  }).join(' ')
}

function labelPoint(index: number, count: number) {
  return polarPoint(index, count, 1, LABEL_RADIUS)
}

function labelAnchor(index: number, count: number) {
  const x = labelPoint(index, count).x
  if (Math.abs(x) < 8) return 'middle'
  return x > 0 ? 'start' : 'end'
}

function formatScore(score: number | null) {
  return score === null ? '未评分' : `${score}分`
}

function openExpertDialog(segment: RadarSegment) {
  editingSegment.value = segment
  Object.keys(expertDraft).forEach((key) => delete expertDraft[key])
  segment.data.dimensions.forEach((dimension) => {
    expertDraft[dimension.key] = expertScore(segment, dimension.key)
  })
  expertDialogVisible.value = true
}

function saveExpertScores() {
  const segment = editingSegment.value as RadarSegment | null
  if (!segment) return
  const scores: Record<string, number | null> = {}
  segment.data.dimensions.forEach((dimension) => {
    const value = expertDraft[dimension.key]
    scores[dimension.key] = Number.isInteger(value) ? Number(value) : null
  })
  emit('student-score-change', {
    blockKey: segment.blockKey,
    studentId: segment.data.studentId,
    studentName: segment.data.studentName,
    scores
  })
  expertDialogVisible.value = false
}
</script>

<style lang="scss">
.markdown-view {
  --md-text: #000;
  --md-heading: #000;
  --md-table-wrap-bg: rgba(15, 23, 42, .02);
  --md-table-border: rgba(15, 23, 42, .18);
  --md-table-head-bg: #edf3fa;
  --md-table-head-text: #000;
  --md-table-cell-text: #000;
  --md-table-row-even: rgba(15, 23, 42, .035);
  --md-table-row-hover: rgba(74, 137, 231, .1);
  --md-scroll-track: rgba(15, 23, 42, .05);
  --md-scroll-thumb: rgba(74, 137, 231, .35);
  --md-scroll-thumb-hover: rgba(74, 137, 231, .55);
  font-family: 'SourceHanSansCN-Normal';
  font-weight: 400;
  letter-spacing: 0em;
  text-align: left;
  color: var(--md-text);
  max-width: 100%;

  &.markdown-view--dark {
    --md-text: #f0f5ff;
    --md-heading: #f0f5ff;
    --md-table-wrap-bg: rgba(255, 255, 255, .02);
    --md-table-border: rgba(174, 205, 255, .25);
    --md-table-head-bg: rgba(74, 137, 231, .4);
    --md-table-head-text: #fff;
    --md-table-cell-text: #e8f0ff;
    --md-table-row-even: rgba(255, 255, 255, .03);
    --md-table-row-hover: rgba(74, 137, 231, .1);
    --md-scroll-track: rgba(255, 255, 255, .04);
    --md-scroll-thumb: rgba(74, 137, 231, .35);
    --md-scroll-thumb-hover: rgba(74, 137, 231, .55);
  }

  pre {
    position: relative;
  }

  pre code.hljs {
    width: auto;
  }

  code.hljs {
    border-radius: 6px;
    padding-top: 20px;
    width: auto;
    @media screen and (min-width: 1536px) {
      width: 960px;
    }
    @media screen and (max-width: 1536px) and (min-width: 1024px) {
      width: calc(100vw - 400px - 64px - 32px * 2);
    }
    @media screen and (max-width: 1024px) and (min-width: 768px) {
      width: calc(100vw - 32px * 2);
    }
    @media screen and (max-width: 768px) {
      width: calc(100vw - 16px * 2);
    }
  }

  p, code.hljs {
    margin-bottom: 16px;
  }

  p {
    margin: 0;
    margin-bottom: 3px;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--md-heading);
    margin: 24px 0 8px;
    font-weight: 600;
  }

  h1 { font-size: 22px; line-height: 32px; }
  h2 { font-size: 20px; line-height: 30px; }
  h3 { font-size: 18px; line-height: 28px; }
  h4 { font-size: 16px; line-height: 26px; }
  h5 { font-size: 16px; line-height: 24px; }
  h6 { font-size: 16px; line-height: 24px; }

  ul, ol {
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--md-text);
  }

  li {
    margin: 4px 0 0 20px;
    margin-bottom: 1rem;
  }

  ol > li {
    list-style-type: decimal;
    margin-bottom: 1rem;
  }

  ul > li {
    list-style-type: disc;
    font-size: 16px;
    line-height: 24px;
    margin-right: 11px;
    margin-bottom: 1rem;
    color: var(--md-text);
  }

  ol ul, ol ul > li, ul ul, ul ul li {
    font-size: 16px;
    list-style: none;
    margin-left: 6px;
    margin-bottom: 1rem;
  }

  ul ul ul, ul ul ul li, ol ol, ol ol > li, ol ul ul, ol ul ul > li, ul ol, ul ol > li {
    list-style: square;
  }

  // 表格容器样式
  .markdown-table-wrap {
    display: block !important;
    overflow-x: auto;
    margin: 16px 0;
    border-radius: 8px;
    border: 1px solid var(--md-table-border) !important;
    -webkit-overflow-scrolling: touch;
    background: var(--md-table-wrap-bg);

    &::-webkit-scrollbar {
      height: 6px;
    }
    &::-webkit-scrollbar-track {
      background: var(--md-scroll-track);
      border-radius: 3px;
    }
    &::-webkit-scrollbar-thumb {
      background: var(--md-scroll-thumb);
      border-radius: 3px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: var(--md-scroll-thumb-hover);
    }
  }

  // 强制表格元素使用正确的display属性，防止被其他样式覆盖
  table {
    display: table !important;
    width: 100% !important;
    min-width: 480px !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    font-size: 13px;
    table-layout: auto;
  }

  thead {
    display: table-header-group !important;
  }

  tbody {
    display: table-row-group !important;
  }

  tr {
    display: table-row !important;
    page-break-inside: avoid;
  }

  th {
    display: table-cell !important;
    background: var(--md-table-head-bg) !important;
    color: var(--md-table-head-text) !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    border: 1px solid var(--md-table-border) !important;
    text-align: left !important;
    white-space: nowrap;
    position: relative;
  }

  td {
    display: table-cell !important;
    color: var(--md-table-cell-text) !important;
    padding: 10px 14px !important;
    border: 1px solid var(--md-table-border) !important;
    vertical-align: top !important;
    text-align: left !important;
    word-break: break-word;
    line-height: 1.6;
  }

  // 表格斑马纹效果
  tr:nth-child(even) td {
    background: var(--md-table-row-even) !important;
  }

  tr:nth-child(odd) td {
    background: transparent !important;
  }

  // 表格hover效果
  tr:hover td {
    background: var(--md-table-row-hover) !important;
  }

  // 表格内段落样式修正
  table p, td p, th p {
    margin: 0 !important;
    padding: 0 !important;
  }

  // 防止表格内容被转义成纯文本
  td, th {
    white-space: normal;
  }

  .markdown-score-radar {
    margin: 16px 0 8px;
    overflow: hidden;
    border: 1px solid var(--md-table-border);
    border-radius: 12px;
    background: var(--md-table-wrap-bg);
  }

  .markdown-score-radar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--md-table-border);

    strong, small { display: block; }
    strong { color: var(--md-heading); font-size: 15px; }
    small { margin-top: 2px; color: var(--md-text); opacity: .62; font-size: 11px; }
  }

  .markdown-score-radar__action {
    flex: 0 0 auto;
    padding: 7px 12px;
    border: 1px solid rgba(91, 152, 237, .7);
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #5b98ed, #4a72ca);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }

  .markdown-score-radar__chart {
    display: block;
    width: min(100%, 560px);
    height: auto;
    margin: 4px auto 0;
    overflow: visible;
  }

  .markdown-score-radar__grid,
  .markdown-score-radar__axis {
    fill: none;
    stroke: var(--md-table-border);
    stroke-width: 1;
  }

  .markdown-score-radar__area {
    stroke-width: 2.2;
    stroke-linejoin: round;
  }

  .markdown-score-radar__area--ai { fill: rgba(62, 130, 219, .24); stroke: #4f9cff; }
  .markdown-score-radar__area--expert { fill: rgba(245, 158, 11, .18); stroke: #f59e0b; }
  .markdown-score-radar__point--ai { fill: #4f9cff; }
  .markdown-score-radar__point--expert { fill: #f59e0b; }
  .markdown-score-radar__label { fill: var(--md-text); font-size: 11px; }

  .markdown-score-radar__legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: -12px 0 12px;
    color: var(--md-text);
    font-size: 12px;

    span { display: inline-flex; align-items: center; gap: 6px; }
  }

  .markdown-score-radar__legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
  }

  .markdown-score-radar__legend-dot--ai { background: #4f9cff; }
  .markdown-score-radar__legend-dot--expert { background: #f59e0b; }

  .markdown-score-radar__score-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--md-table-border);

    > div {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      padding: 8px 12px;
      border-right: 1px solid var(--md-table-border);
      border-bottom: 1px solid var(--md-table-border);
      color: var(--md-text);
      font-size: 11px;
    }

    span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    b { font-weight: 500; white-space: nowrap; }
  }

  @media (max-width: 620px) {
    .markdown-score-radar__header { align-items: flex-start; flex-direction: column; }
    .markdown-score-radar__score-list { grid-template-columns: 1fr; }
    .markdown-score-radar__label { font-size: 9px; }
  }
}

.markdown-score-dialog__hint {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 13px;
}

.markdown-score-dialog__list {
  display: grid;
  gap: 10px;

  label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: center;
    gap: 12px;
  }

  span { font-size: 13px; }
}
</style>