|
|
@@ -0,0 +1,878 @@
|
|
|
+<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> = {
|
|
|
+ '&': '&',
|
|
|
+ '<': '<',
|
|
|
+ '>': '>',
|
|
|
+ '"': '"',
|
|
|
+ "'": '''
|
|
|
+ }
|
|
|
+ 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>
|
liyanbo
