feat(chart): 优化图表主题适配与数据处理逻辑

- 图表支持深色模式自动检测与切换，根据系统主题调整配色
- 修改数据单位转换逻辑，调整为 xRaw * 1e12 / 1024 更准确反映 FLOPs
- 数据点排序方式改为按 x 轴值排序，提升图表展示合理性
- 增加对主题变化的监听，自动重渲染图表以适配颜色
- 图表容器使用响应式尺寸 class 替代固定宽高，增强适配性
- 移除调试日志，优化坐标轴和图例颜色变量命名
- 调整 tooltip 中 y 轴数值显示精度为四位小数，提高可读性

同时更新 useLeaderboardData 中数据集名称和表头显示文本：
- 更新多个数据集显示名，如 'FinePDFs-en'、'Ch-FineWeb-Edu' 等
- 修改部分列标题为全大写格式，统一展示风格
- 调整默认排序方式为降序，简化表头点击排序逻辑

新增 Markdown 转 HTML 工具函数，用于解析展示页面头部信息：
- 支持标题、段落、链接、粗体、斜体、行内代码等基础语法
- 自动转义 HTML 字符，防止 XSS 风险
- 添加 Tailwind 样式类以适配深色模式

页面结构优化：
- 使用 ref 滚动到图表区域，提升用户交互体验
- 页面标题与更新时间动态绑定，支持自定义 header 内容
- 引入 logo 图片并设置容器样式，增强视觉呈现
- 优化筛选区域标签文本为英文，统一界面语言风格

构建配置调整：
- 简化 package.json 中的 build 脚本，移除冗余 type-check 和 build-only
- 移除部分未使用的 devDependencies，如 @tsconfig/node22、typescript 等
- 删除 tsconfig.node.json 文件，精简 TypeScript 配置结构

package.json

@@ -1,14 +1,12 @@
 {
   "name": "vue",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "build": "vite build",
     "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",
     "format": "prettier --write src/"
   },
@@ -19,11 +17,8 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@tsconfig/node22": "^22.0.1",
-    "@types/node": "^22.14.0",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.22.0",
@@ -33,9 +28,7 @@
     "postcss": "^8.5.6",
     "prettier": "3.5.3",
     "tailwindcss": "^3.3.3",
-    "typescript": "~5.8.0",
     "vite": "^6.2.4",
-    "vite-plugin-vue-devtools": "^7.7.2",
-    "vue-tsc": "^2.2.8"
+    "vite-plugin-vue-devtools": "^7.7.2"
   }
-}
+}

src/components/Chart.vue

@@ -6,6 +6,11 @@ import * as echarts from 'echarts'
 const chartRef = ref(null)
 let chart = null
 
+// 独立监听主题变化
+const isDarkChart = ref(document.documentElement.classList.contains('dark'))
+
+let themeObserver = null
+
 const { leaderboard, selectedDataNameChart, modelTypeGroups, strtSymbolSeries } = useLeaderboardData()
 
 // 接受一个可选 prop：autoShowSeries（数组），用于指定哪些模型类型在图表加载时自动显示。
@@ -24,19 +29,20 @@ function buildSeriesFromLeaderboard(rows = []) {
     const isMoE = !!r._isMoE
     const seriesName = isMoE ? `${baseType} (MoE)` : baseType
     if (!groups[seriesName]) groups[seriesName] = []
-    // 数据原本单位为 TFLOPs，转换为 FLOPs（1 TFLOP = 1e12 FLOPs）用于对数尺度显示
+    // 数据原本单位为 FLOPs (G)，转换为 FLOPs（1 TFLOP = 1e12 FLOPs）用于对数尺度显示
     const xRaw = parseFloat(r.BF16_TFLOPs) || 0
-    const x = xRaw > 0 ? xRaw * 1e12 : 0
+    const x = xRaw > 0 ? xRaw * 1e12 / 1024 : 0
+    // const x = xRaw 
     const y = parseFloat(r.ic) || 0
     const rank = Number(r.rank) || 0
     groups[seriesName].push({ x, y, rank })
   })
 
   return Object.keys(groups).map(name => {
-    // 过滤掉 x<=0 的点（对数坐标轴不能显示 0 或负值），并按 rank 排序
+    // 过滤掉 x<=0 的点（对数坐标轴不能显示 0 或负值），并按 x 轴值排序
     const data = groups[name]
       .filter(p => Number.isFinite(p.x) && p.x > 0 && Number.isFinite(p.y))
-      .sort((a, b) => a.rank - b.rank)
+      .sort((a, b) => a.x - b.x)
       .map(d => [d.x, d.y])
     // 根据该系列的样本点数量适度放大 symbolSize，避免点太小难以点击
     const count = groups[name].length || 1
@@ -45,7 +51,13 @@ function buildSeriesFromLeaderboard(rows = []) {
   })
 }
 
-function getChartOption(series) {
+function getChartOption(series, isDark = false) {
+  // 根据主题设置颜色
+  const titleColor = isDark ? '#cfd8dc' : '#333333'
+  const legendColor = isDark ? '#cfd8dc' : '#333333'
+  const axisLineColor = isDark ? '#78909c' : '#666666'
+  const axisLabelColor = isDark ? '#b0bec5' : '#666666'
+  const splitLineColor = isDark ? '#37474f' : '#cccccc'
   // 计算数据范围以自动缩放坐标轴，避免留太多空白
   const allX = []
   const allY = []
@@ -166,7 +178,7 @@ function getChartOption(series) {
     const symbolShape = strtSymbolSeries.includes(String(s.name)) ? 
     'path://M341.5 45.1C337.4 37.1 329.1 32 320.1 32C311.1 32 302.8 37.1 298.7 45.1L225.1 189.3L65.2 214.7C56.3 216.1 48.9 222.4 46.1 231C43.3 239.6 45.6 249 51.9 255.4L166.3 369.9L141.1 529.8C139.7 538.7 143.4 547.7 150.7 553C158 558.3 167.6 559.1 175.7 555L320.1 481.6L464.4 555C472.4 559.1 482.1 558.3 489.4 553C496.7 547.7 500.4 538.8 499 529.8L473.7 369.9L588.1 255.4C594.5 249 596.7 239.6 593.9 231C591.1 222.4 583.8 216.1 574.8 214.7L415 189.3L341.5 45.1z'
     : 'circle'
-    console.log(`Series "${s.name}" uses symbol "${symbolShape}"`)
+    // console.log(`Series "${s.name}" uses symbol "${symbolShape}"`)
     const baseSize = Number(s.symbolSize) || 8
     const emphasisSize = Math.max(12, Math.round(baseSize * 1.6))
     // 如果是星形，增大尺寸以匹配视觉效果
@@ -196,7 +208,7 @@ function getChartOption(series) {
 
   return {
     color: colors,
-    title: { text: 'BF16_TFLOPs vs IC', left: '6%', textStyle: { color: '#cfd8dc' } },
+    title: { text: 'BF16_TFLOPs vs IC', left: '6%', textStyle: { color: titleColor } },
     tooltip: {
       trigger: 'item',
       formatter: params => {
@@ -213,7 +225,7 @@ function getChartOption(series) {
         } else {
           xStr = String(x)
         }
-        const yStr = (typeof y === 'number' && Number.isFinite(y)) ? Number(y).toFixed(2) : String(y)
+        const yStr = (typeof y === 'number' && Number.isFinite(y)) ? Number(y).toFixed(4) : String(y)
         return `${params.seriesName}<br/>FLOPs: ${xStr}<br/>IC: ${yStr}`
       }
     },
@@ -224,7 +236,7 @@ function getChartOption(series) {
       align: 'left',
       itemWidth: 14,
       itemHeight: 10,
-      textStyle: { color: '#cfd8dc' },
+      textStyle: { color: legendColor },
       tooltip: { show: true }
     }, { selected: legendSelected, data: legendData }),
     grid: { left: '6%', right: '20%', bottom: '8%', containLabel: true },
@@ -233,9 +245,9 @@ function getChartOption(series) {
       name: 'FLOPs',
       nameLocation: 'middle',
       nameGap: 30,
-      axisLine: { lineStyle: { color: '#78909c' } },
+      axisLine: { lineStyle: { color: axisLineColor } },
       axisLabel: {
-        color: '#b0bec5',
+        color: axisLabelColor,
         formatter: value => {
           if (!Number.isFinite(value) || value <= 0) return String(value)
           const exp = Math.floor(Math.log10(value))
@@ -244,16 +256,16 @@ function getChartOption(series) {
           return `${mant.toFixed(2)}×10${toSuperscript(exp)}`
         }
       },
-      splitLine: { show: true, lineStyle: { type: 'dashed', color: '#37474f' } },
+      splitLine: { show: true, lineStyle: { type: 'dashed', color: splitLineColor } },
       min: xMin,
       max: xMax
     },
     yAxis: {
       type: 'value',
       name: 'Information capacity',
-      axisLine: { lineStyle: { color: '#78909c' } },
-      axisLabel: { color: '#b0bec5', formatter: v => (Number.isFinite(v) ? Number(v).toFixed(2) : String(v)) },
-      splitLine: { show: true, lineStyle: { type: 'dashed', color: '#37474f' } },
+      axisLine: { lineStyle: { color: axisLineColor } },
+      axisLabel: { color: axisLabelColor, formatter: v => (Number.isFinite(v) ? Number(v).toFixed(2) : String(v)) },
+      splitLine: { show: true, lineStyle: { type: 'dashed', color: splitLineColor } },
       min: yMin,
       max: yMax
     },
@@ -272,11 +284,13 @@ function renderChart() {
     rows = rows.filter(r => String(r.data_name ?? '') === sel)
   }
   const series = buildSeriesFromLeaderboard(rows)
-  const option = getChartOption(series)
+  const option = getChartOption(series, isDarkChart.value)
   chart.setOption(option, { notMerge: true })
 }
 
 onMounted(() => {
+  isDarkChart.value = window.matchMedia("(prefers-color-scheme: dark)").matches  //true | false
+
   if (!chartRef.value) return
   chart = echarts.init(chartRef.value)
   // 首次渲染（如果数据尚未加载，后续会由 watcher 更新）
@@ -296,14 +310,21 @@ watch(selectedDataNameChart, () => {
   renderChart()
 })
 
+// 当主题变化时重新渲染图表
+watch(isDarkChart, (newVal) => {
+  console.log('isDarkChart changed to:', newVal)
+  renderChart()
+})
+
 onBeforeUnmount(() => {
   if (resizeHandler) window.removeEventListener('resize', resizeHandler)
+  if (themeObserver) themeObserver.disconnect()
   if (chart) { chart.dispose(); chart = null }
 })
 </script>
 
 <template>
-  <div ref="chartRef" style="width: 880px; height: 480px;"></div>
+  <div ref="chartRef" class="w-full h-[80vh]"></div>
 </template>
 
 <style scoped></style>

src/composables/useLeaderboardData.js

@@ -52,19 +52,19 @@ const headerDisplayMap = reactive({
   'model_name': 'MODEL NAME',
   'model_series': 'MODEL SERIES',
   'model_size (B)': 'MODEL SIZE (B)',
-  'constant': 'Text size',
-  'conditional_entropy': 'Negative log-likelihood',
+  'constant': 'TEXT SIZE',
+  'conditional_entropy': 'NEGATIVE LOG-LIKELIHOOD',
   'BF16_TFLOPs': 'FLOPs (G)',
-  'ic': ' Information Capacity',
+  'ic': ' INFORMATION CAPACITY',
 })
 
 // 数据集名称显示映射（raw data_name -> 显示名）
 const dataNameDisplayMap = reactive({
-  'data_part_0000': 'Data Part 0000',
-  'eng_Latn_000_00027_long': 'FLORES-200 English',
-  'IndustryCorpus_batch_aa_long': 'Industry Corpus AA',
-  'CC-MAIN-2013-20_train-00000-of-00014_long': 'CC-MAIN (2013-20)',
-  'NextCoderDataset_v1_long': 'NextCoder v1',
+  'data_part_0000': 'Mixed text',
+  'eng_Latn_000_00027_long': 'FinePDFs-en',
+  'IndustryCorpus_batch_aa_long': 'Ch-FineWeb-Edu',
+  'CC-MAIN-2013-20_train-00000-of-00014_long': 'FineWeb-Edu',
+  'NextCoderDataset_v1_long': 'NextCoder',
 })
 
 
@@ -131,7 +131,7 @@ const filteredLeaderboard = computed(() => {
   return filtered
 })
 
-// 点击表头切换排序：循环 none -> 降序 -> 升序 -> none
+// 点击表头切换排序：循环 降序 -> 升序
 function setSortKey(h) {
   if (!h) return
   if (globalState.sortKey !== h) {
@@ -139,14 +139,8 @@ function setSortKey(h) {
     globalState.sortDesc = true
     return
   }
-  // same key, toggle
-  if (globalState.sortDesc) {
-    globalState.sortDesc = false
-    return
-  }
-  // clear
-  globalState.sortKey = ''
-  globalState.sortDesc = true
+  // same key, toggle between desc and asc
+  globalState.sortDesc = !globalState.sortDesc
 }
 
 // 计算当前应该显示的列（不含 rank）
@@ -172,7 +166,7 @@ async function fetchAndLoadCsv(path = globalState.DEFAULT_CSV_PATH) {
     // 默认以最后一列升序排序（如果不存在则回退到 scoreKey），不直接在 rows 上预排序
     const defaultKey = headers.length > 0 ? headers[headers.length - 1] : scoreKey
     globalState.sortKey = defaultKey || ''
-    globalState.sortDesc = false
+    globalState.sortDesc = true
 
     // 特定处理
     // 判断模型开头是否在 MoEModelSeries 中，是则在 判断尾部是否为-A{number}B这样的格式
@@ -272,7 +266,11 @@ async function fetchAndLoadCsv(path = globalState.DEFAULT_CSV_PATH) {
           const n = Number(raw)
           if (h === 'ic') {
             row._formatted[h] = Number.isFinite(n) ? n.toFixed(4) : raw
-          } else {
+          } 
+          else if (h === 'constant') {
+            row._formatted[h] = Number.isFinite(n) ? n.toFixed(2) : raw
+          }
+          else {
             row._formatted[h] = Number.isFinite(n) ? n.toFixed(3) : raw
           }
         } else {

src/utils/mk2html.js

@@ -0,0 +1,45 @@
+// 一个小型且安全的 Markdown -> HTML 解析器（支持标题、段落、链接、粗体、斜体、行内代码）
+function escapeHtml(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+function parseInline(md) {
+  // code
+  md = md.replace(/`([^`]+)`/g, '<code>$1</code>')
+  // bold **text** or __text__
+  md = md.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+  md = md.replace(/__([^_]+)__/g, '<strong>$1</strong>')
+  // italic *text* or _text_
+  md = md.replace(/\*([^*]+)\*/g, '<em>$1</em>')
+  md = md.replace(/_([^_]+)_/g, '<em>$1</em>')
+  // links [text](url)
+  md = md.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (m, text, url) => {
+    const safeUrl = url.replace(/\"/g, '%22')
+    return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline dark:text-blue-400">${text}</a>`
+  })
+  return md
+}
+
+function parsedHeaderHtml(headerMarkdown){
+  const raw = headerMarkdown || ''
+  // split into lines and paragraphs
+  const blocks = raw.split(/\n{2,}/g)
+  const html = blocks.map(block => {
+    const line = block.trim()
+    if (!line) return ''
+    // heading
+    const hMatch = line.match(/^(#{1,6})\s+(.*)$/)
+    if (hMatch) {
+      const level = Math.min(6, hMatch[1].length)
+      const content = parseInline(escapeHtml(hMatch[2]))
+      // 增加块间距（mb-2）以扩大行之间的视觉间隔
+      return `<h${level} class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">${content}</h${level}>`
+    }
+    // normal paragraph
+    // 使用 leading-relaxed 增加行高，并用 mb-2 增加段落间距
+    return `<p class="text-sm text-gray-700 dark:text-gray-200 leading-relaxed mb-2">${parseInline(escapeHtml(line))}</p>`
+  }).join('\n')
+  return html
+}
+
+export { parsedHeaderHtml }

src/views/Leaderboard.vue

@@ -1,7 +1,9 @@
 <script setup>
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, nextTick } from 'vue'
 import { useLeaderboardData } from '@/composables/useLeaderboardData.js'
 import Chart from '@/components/Chart.vue'
+import { computed } from 'vue'
+import { parsedHeaderHtml } from '@/utils/mk2html.js'
 
 // 使用数据管理 composable
 const {
@@ -37,11 +39,59 @@ const {
 // theme (dark mode) support: sync with document root class and localStorage
 const isDark = ref(false)
 
+// 图表区域ref
+const chartSection = ref(null)
+
+// 记录上一次选择的图表数据集，用于区分初始加载和用户点击
+const lastSelectedDataNameChart = ref('')
+
+// header markdown 内容
+const headerMarkdown = ref(`
+
+**Information Capacity — evaluating LLM efficiency via compression and compute**
+
+Information Capacity evaluates a model's efficiency by measuring text compression gains relative to computational cost. 
+Larger models typically predict next tokens more accurately and thus achieve higher compression gains, but at increased compute expense. 
+
+By profiling compression performance across a family of models with different sizes, we obtain a stable Information Capacity curve that enables 
+fair cross-series comparison, series-internal performance prediction, and dynamic routing of models of different sizes according to 
+task difficulty — a capability especially useful in device-edge-cloud hierarchies such as the AI Flow framework.
+
+A core difference from many existing efficiency metrics is that Information Capacity explicitly accounts for tokenizer efficiency. 
+An effective tokenizer can represent the same text with fewer tokens, reducing both input and output token counts, which lowers compute, 
+latency, and storage while enabling longer-context reasoning. As input lengths explode and test-time scaling becomes common, 
+tokenizer efficiency matters increasingly but is often overlooked in LLM evaluation.
+
+We evaluate 49 models across 5 heterogeneous datasets and consistently observe the impacts of tokenizer design, pretraining data, 
+and mixture-of-experts (MoE) architectures on Information Capacity.
+
+If you want to add your model to the leaderboard, please submit a PR 
+at [TeleAI AI Flow InformationCapacity](https://github.com/TeleAI-AI-Flow/InformationCapacity), and we will assist with evaluation and updates.
+
+`)
+
+const title = 'Information Capacity Leaderboard'
+
+const lastUpdatedTime = '11/12/2025 15:30'
+
+const headerInfo = parsedHeaderHtml(headerMarkdown.value)
+
+
 // 当 visibleColumns 改变时持久化
 watch(visibleColumns, (v) => {
   try { localStorage.setItem('visible_columns', JSON.stringify(v)) } catch (e) { }
 }, { deep: true })
 
+// 当图表数据集变化时，滚动到图表区域底部（仅当用户点击时）
+watch(selectedDataNameChart, (newVal) => {
+  if (lastSelectedDataNameChart.value && lastSelectedDataNameChart.value !== newVal) {
+    nextTick(() => {
+      chartSection.value?.scrollIntoView({ behavior: 'smooth', block: 'end' })
+    })
+  }
+  lastSelectedDataNameChart.value = newVal
+})
+
 onMounted(() => {
   init()
 })
@@ -68,10 +118,6 @@ watch(isDark, (val) => {
   }
 })
 
-function toggleTheme() {
-  isDark.value = !isDark.value
-}
-
 function clearModelTypeSelection() {
   selectAllModelTypes()
 }
@@ -81,28 +127,34 @@ function clearModelTypeSelection() {
   <div
     class="min-h-screen bg-gray-50 dark:bg-gradient-to-b dark:from-gray-900 dark:via-gray-800 dark:to-gray-800 py-12 px-4 sm:px-6 lg:px-8">
     <div class=" mx-auto">
-      <header class="mb-6 flex items-start justify-between">
+      <header class="mb-4 flex items-start justify-between">
         <div>
-          <h1 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100">LLM Information Capacity</h1>
-          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">LLM IC Leaderboard Demo</p>
+          <h1 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100">{{ title }}</h1>
+          <!-- <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">LLM IC Leaderboard Demo</p> -->
+          <div v-html="headerInfo" class="py-7"></div>
+        </div>
+        <div class="flex items-center">
+          <!-- 固定正方形容器，内部图片保持纵横比且居中 -->
+          <div class="h-32 w-32 flex items-center justify-center  rounded-md overflow-hidden p-2">
+            <img src="./logo.png" alt="Logo" class="max-h-full max-w-full object-contain" />
+          </div>
         </div>
       </header>
 
 
-
       <div class="bg-white dark:bg-gray-900/60 shadow rounded-lg overflow-hidden">
         <div
           class="px-6 py-4 border-b bg-gradient-to-r from-indigo-50 via-white to-white dark:bg-gradient-to-r dark:from-gray-800 dark:via-gray-900 dark:to-gray-900">
           <div class="flex items-center justify-between">
             <h2 class="text-lg font-medium text-gray-800 dark:text-gray-50">Leaderboard</h2>
-            <div class="text-sm text-gray-500 dark:text-gray-300">Last updated on xx/xx/xxxx</div>
+            <div class="text-sm text-gray-500 dark:text-gray-300">Last updated on {{ lastUpdatedTime }}</div>
           </div>
         </div>
 
         <!-- 数据集筛选区域（独立于列筛选） -->
         <div class="px-6 py-3 border-b bg-gray-50 dark:bg-gradient-to-b dark:from-gray-900 dark:to-gray-800">
           <div class="flex items-center gap-3">
-            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">数据集筛选</span>
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Dataset</span>
             <div v-if="dataGroups.length > 0" class="flex gap-2 items-center overflow-x-auto">
               <!-- <label class="px-2 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-sm cursor-pointer" :class="{'bg-gray-100 dark:bg-gray-700': selectedDataName==='all'}">
                 <input type="radio" class="hidden" value="all" v-model="selectedDataName" /> 全部
@@ -121,7 +173,7 @@ function clearModelTypeSelection() {
         <!-- 模型类型筛选区域 -->
         <div class="px-6 py-3 border-b bg-gray-50 dark:bg-gradient-to-b dark:from-gray-900 dark:to-gray-800">
           <div class="flex items-center gap-3">
-            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">模型类型筛选</span>
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Model Series</span>
             <div class="flex items-center gap-2">
               <button @click="clearModelTypeSelection"
                 class="text-sm px-2 py-1 bg-white/90 dark:bg-gray-700/60 border border-gray-200 dark:border-gray-600 rounded text-gray-700 dark:text-gray-200 hover:bg-white dark:hover:bg-gray-600 transition">
@@ -148,7 +200,7 @@ function clearModelTypeSelection() {
         <div class="px-6 py-3 border-b bg-gray-50 dark:bg-gradient-to-b dark:from-gray-900 dark:to-gray-800">
           <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
             <div class="flex items-center gap-3">
-              <span class="text-sm font-medium text-gray-700 dark:text-gray-200">显示列</span>
+              <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Visible Columns</span>
               <div class="flex items-center gap-2">
                 <button @click.prevent="selectAll"
                   class="text-sm px-2 py-1 bg-white/90 dark:bg-gray-700/60 border border-gray-200 dark:border-gray-600 rounded text-gray-700 dark:text-gray-200 hover:bg-white dark:hover:bg-gray-600 transition">全选</button>
@@ -179,7 +231,7 @@ function clearModelTypeSelection() {
                   #</th> -->
                 <th v-for="h in displayedColumns" :key="h"
                   @click="setSortKey(h)"
-                  class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer select-none">
+                  class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 tracking-wider cursor-pointer select-none">
                   <div class="flex items-center gap-2">
                     <span>{{ headerDisplayMap[h] || h }}</span>
                     <span v-if="sortKey === h" class="text-xs text-gray-600 dark:text-gray-300">
@@ -207,22 +259,32 @@ function clearModelTypeSelection() {
         </div>
       </div>
 
-      <Chart :autoShowSeries="autoShowSeries" />
-      <div class="px-6 py-3 border-b bg-gray-50 dark:bg-gradient-to-b dark:from-gray-900 dark:to-gray-800">
-        <div class="flex items-center gap-3">
-          <span class="text-sm font-medium text-gray-700 dark:text-gray-200">数据集筛选</span>
-          <div v-if="dataGroups.length > 0" class="flex gap-2 items-center overflow-x-auto">
-            <!-- <label class="px-2 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-sm cursor-pointer" :class="{'bg-gray-100 dark:bg-gray-700': selectedDataName==='all'}">
-                <input type="radio" class="hidden" value="all" v-model="selectedDataName" /> 全部
-              </label> -->
-            <label v-for="g in dataGroups" :key="g"
-              class="px-2 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-sm cursor-pointer dark:text-slate-300"
-              :class="{ 'bg-gray-100 dark:bg-gray-700 dark:text-white': selectedDataNameChart === g }">
-              <input type="radio" class="hidden" :value="g" v-model="selectedDataNameChart" /> {{ dataNameDisplayMap[g]
-                ? dataNameDisplayMap[g] : g }}
-            </label>
+      <!-- 图表区域 -->
+      <div ref="chartSection" class="mt-8 bg-white dark:bg-gray-900/60 shadow rounded-lg overflow-hidden">
+        <!-- 图表头部 -->
+        <div class="px-6 py-4 border-b bg-gradient-to-r from-indigo-50 via-white to-white dark:bg-gradient-to-r dark:from-gray-800 dark:via-gray-900 dark:to-gray-900">
+          <h2 class="text-lg font-medium text-gray-800 dark:text-gray-50">Data visualization</h2>
+        </div>
+
+        <!-- 图表数据集筛选区域 -->
+        <div class="px-6 py-3 border-b bg-gray-50 dark:bg-gradient-to-b dark:from-gray-900 dark:to-gray-800">
+          <div class="flex items-center gap-3">
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Dataset</span>
+            <div v-if="dataGroups.length > 0" class="flex gap-2 items-center overflow-x-auto">
+              <label v-for="g in dataGroups" :key="g"
+                class="px-2 py-1 rounded-full border border-gray-200 dark:border-gray-700 text-sm cursor-pointer dark:text-slate-300"
+                :class="{ 'bg-gray-100 dark:bg-gray-700 dark:text-white': selectedDataNameChart === g }">
+                <input type="radio" class="hidden" :value="g" v-model="selectedDataNameChart" /> {{ dataNameDisplayMap[g]
+                  ? dataNameDisplayMap[g] : g }}
+              </label>
+            </div>
+            <div v-else class="text-sm text-gray-500 dark:text-gray-400">（数据集中未检测到 data_name 列）</div>
           </div>
-          <div v-else class="text-sm text-gray-500 dark:text-gray-400">（数据集中未检测到 data_name 列）</div>
+        </div>
+
+        <!-- 图表内容 -->
+        <div class="p-6">
+          <Chart :autoShowSeries="autoShowSeries" />
         </div>
       </div>
     </div>

tsconfig.node.json

@@ -1,19 +0,0 @@
-{
-  "extends": "@tsconfig/node22/tsconfig.json",
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "nightwatch.conf.*",
-    "playwright.config.*",
-    "eslint.config.*"
-  ],
-  "compilerOptions": {
-    "noEmit": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "types": ["node"]
-  }
-}