fix(dataset): 限制长文本提示层尺寸

frontend/scripts/regression-dataset-preview.mjs

@@ -69,6 +69,11 @@ expect(previewSurfaceSource.includes('v-for="fieldKey in tableFieldKeys"'), '企
 expect(previewSurfaceSource.includes("emit('edit', asDatasetRecord(row))"), '每条样本应向主页面发送编辑事件')
 expect(previewSurfaceSource.includes("emit('delete', asDatasetRecord(row))"), '每条样本应提供删除操作')
 expect(previewSurfaceSource.includes('label="原文参照"'), '样本列表应展示生成内容对应的原文参照')
+expect(previewSurfaceSource.includes('popper-class="dataset-record-content-tooltip"'), '长文本提示应使用受控尺寸样式')
+expect(previewSurfaceSource.includes('max-width: min(480px, calc(100vw - 32px))'), '长文本提示不得横跨整个页面')
+expect(previewSurfaceSource.includes('max-height: min(240px, calc(100vh - 32px))'), '长文本提示应限制高度')
+expect(previewSurfaceSource.includes('overflow-y: auto'), '超长提示内容应允许纵向滚动')
+expect(previewSurfaceSource.includes('white-space: pre-wrap'), '提示内容应保留换行并自动折行')
 expect(source.includes('getDatasetFileRecordSources'), '详情页应从后端读取发布样本的真实原文')
 expect(recordEditorSource.includes('deleteDatasetRecord('), '删除样本应只修改当前文件草稿')
 expect(recordEditorSource.includes('删除后将暂存到当前草稿'), '删除样本前应说明保存版本后才生效')

frontend/src/views/dataset/preview/DatasetRecordTable.vue

@@ -157,7 +157,13 @@ function recordRowClassName({ row }: { row: unknown }) {
               :content="recordFieldValue(asDatasetRecord(row), fieldKey)"
               placement="top"
               :show-after="400"
+              popper-class="dataset-record-content-tooltip"
             >
+              <template #content>
+                <div class="dataset-record-tooltip-body">
+                  {{ recordFieldValue(asDatasetRecord(row), fieldKey) }}
+                </div>
+              </template>
               <div class="table-cell-text">
                 {{ recordFieldValue(asDatasetRecord(row), fieldKey) }}
               </div>
@@ -170,7 +176,13 @@ function recordRowClassName({ row }: { row: unknown }) {
               :content="recordSourceText(asDatasetRecord(row))"
               placement="top"
               :show-after="400"
+              popper-class="dataset-record-content-tooltip"
             >
+              <template #content>
+                <div class="dataset-record-tooltip-body">
+                  {{ recordSourceText(asDatasetRecord(row)) }}
+                </div>
+              </template>
               <div
                 class="table-cell-text source-reference-cell"
                 :class="{ 'is-empty': recordSourceText(asDatasetRecord(row)) === '无关联原文' }"
@@ -186,7 +198,13 @@ function recordRowClassName({ row }: { row: unknown }) {
               :content="extraFieldValue(asDatasetRecord(row))"
               placement="top"
               :show-after="400"
+              popper-class="dataset-record-content-tooltip"
             >
+              <template #content>
+                <div class="dataset-record-tooltip-body">
+                  {{ extraFieldValue(asDatasetRecord(row)) }}
+                </div>
+              </template>
               <div class="table-cell-text">{{ extraFieldValue(asDatasetRecord(row)) }}</div>
             </el-tooltip>
           </template>
@@ -351,6 +369,20 @@ function recordRowClassName({ row }: { row: unknown }) {
   white-space: nowrap;
 }
 
+:global(.el-popper.dataset-record-content-tooltip) {
+  max-width: min(480px, calc(100vw - 32px));
+}
+
+:global(.dataset-record-tooltip-body) {
+  max-height: min(240px, calc(100vh - 32px));
+  overflow-y: auto;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+  text-align: left;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
 .record-table .el-button i {
   margin-right: 5px;
 }