feat(file-detail): 重构文件详情组件，添加Markdown内容预览功能
This commit is contained in:
Wenjie Zhang
parent
680dd92457
commit
25842eb33e
@ -4,38 +4,13 @@
|
||||
:title="file?.filename || '文件详情'"
|
||||
width="1200px"
|
||||
:footer="null"
|
||||
wrap-class-name="file-detail"
|
||||
@after-open-change="afterOpenChange"
|
||||
:bodyStyle="{ height: '80vh', padding: '0' }"
|
||||
>
|
||||
<div class="file-detail-content" v-if="file">
|
||||
<div class="file-info-grid">
|
||||
<div class="info-item">
|
||||
<label>文件ID:</label>
|
||||
<span>{{ file.file_id }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>上传时间:</label>
|
||||
<span>{{ formatStandardTime(Math.round(file.created_at*1000)) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label>处理状态:</label>
|
||||
<span class="status-badge" :class="file.status">
|
||||
{{ getStatusText(file.status) }} - {{ file.lines?.length || 0 }} 行
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="file-content-section" v-if="file.lines && file.lines.length > 0">
|
||||
<h4>文件内容预览</h4>
|
||||
<div class="content-lines">
|
||||
<div
|
||||
v-for="(line, index) in file.lines"
|
||||
:key="index"
|
||||
class="content-line"
|
||||
>
|
||||
<span class="line-number">{{ index + 1 }}</span>
|
||||
<span class="line-text">{{ line.text || line }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<MarkdownContentViewer :chunks="file.lines" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="loading" class="loading-container">
|
||||
@ -71,68 +46,15 @@ const afterOpenChange = (open) => {
|
||||
|
||||
// 导入工具函数
|
||||
import { getStatusText, formatStandardTime } from '@/utils/file_utils';
|
||||
import MarkdownContentViewer from './MarkdownContentViewer.vue';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file-detail-content {
|
||||
max-height: 70vh;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.file-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.info-item label {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-item span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-badge.done {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
border: 1px solid #b7eb8f;
|
||||
}
|
||||
|
||||
.status-badge.failed {
|
||||
background-color: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
border: 1px solid #ffccc7;
|
||||
}
|
||||
|
||||
.status-badge.processing {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
border: 1px solid #91d5ff;
|
||||
}
|
||||
|
||||
.status-badge.waiting {
|
||||
background-color: #fffbe6;
|
||||
color: #faad14;
|
||||
border: 1px solid #ffe58f;
|
||||
}
|
||||
|
||||
.file-content-section h4 {
|
||||
@ -141,36 +63,6 @@ import { getStatusText, formatStandardTime } from '@/utils/file_utils';
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-lines {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.content-line {
|
||||
display: flex;
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.line-number {
|
||||
width: 40px;
|
||||
color: #ccc;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.line-text {
|
||||
flex: 1;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -183,4 +75,12 @@ import { getStatusText, formatStandardTime } from '@/utils/file_utils';
|
||||
padding: 40px 0;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.file-detail {
|
||||
.ant-modal {
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
404
web/src/components/MarkdownContentViewer.vue
Normal file
404
web/src/components/MarkdownContentViewer.vue
Normal file
@ -0,0 +1,404 @@
|
||||
<template>
|
||||
<div class="markdown-content-viewer">
|
||||
<div class="viewer-header">
|
||||
<h4>文件内容</h4>
|
||||
<div class="header-controls">
|
||||
<div class="header-info">
|
||||
<span>共 {{ mappedChunks.length }} 个片段</span>
|
||||
<span>总长度 {{ formatTextLength(mergedContent.length) }}</span>
|
||||
</div>
|
||||
<button
|
||||
class="toggle-btn"
|
||||
@click="toggleChunkPanel"
|
||||
:title="chunkPanelVisible ? '隐藏片段列表' : '显示片段列表'"
|
||||
>
|
||||
{{ chunkPanelVisible ? '«' : '»' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="viewer-container">
|
||||
<!-- 左侧：Markdown内容 -->
|
||||
<div class="content-panel">
|
||||
<MdPreview
|
||||
:modelValue="mergedContent"
|
||||
:theme="theme"
|
||||
:previewTheme="previewTheme"
|
||||
:codeTheme="codeTheme"
|
||||
class="markdown-content"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：Chunk信息 -->
|
||||
<div
|
||||
class="chunk-panel"
|
||||
v-show="chunkPanelVisible"
|
||||
>
|
||||
<div class="chunk-list">
|
||||
<div
|
||||
v-for="(chunk, index) in mappedChunks"
|
||||
:key="chunk.id"
|
||||
class="chunk-item"
|
||||
:class="{
|
||||
'active': activeChunkIndex === index,
|
||||
'highlighted': highlightedChunkIndex === index
|
||||
}"
|
||||
@click="handleChunkClick(index)"
|
||||
@mouseenter="highlightChunk(index)"
|
||||
@mouseleave="unhighlightChunk()"
|
||||
>
|
||||
<div class="chunk-header">
|
||||
<span class="chunk-order">#{{ chunk.chunk_order_index }}</span>
|
||||
<span class="chunk-id">{{ chunk.id }}</span>
|
||||
</div>
|
||||
<div class="chunk-meta">
|
||||
<span class="chunk-length">{{ formatTextLength(chunk.content.length) }}</span>
|
||||
<span class="chunk-range">{{ chunk.startOffset }}-{{ chunk.endOffset }}</span>
|
||||
</div>
|
||||
<div class="chunk-preview">{{ getChunkPreview(chunk.content) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮提示 -->
|
||||
<div
|
||||
v-if="showTooltip && currentChunk"
|
||||
class="chunk-tooltip"
|
||||
:style="tooltipStyle"
|
||||
>
|
||||
<div class="tooltip-header">
|
||||
<strong>片段信息</strong>
|
||||
</div>
|
||||
<div class="tooltip-content">
|
||||
<div class="tooltip-row">
|
||||
<span class="label">ID:</span>
|
||||
<span class="value">{{ currentChunk.id }}</span>
|
||||
</div>
|
||||
<div class="tooltip-row">
|
||||
<span class="label">序号:</span>
|
||||
<span class="value">{{ currentChunk.chunk_order_index }}</span>
|
||||
</div>
|
||||
<div class="tooltip-row">
|
||||
<span class="label">位置:</span>
|
||||
<span class="value">{{ currentChunk.startOffset }} - {{ currentChunk.endOffset }}</span>
|
||||
</div>
|
||||
<div class="tooltip-row">
|
||||
<span class="label">长度:</span>
|
||||
<span class="value">{{ formatTextLength(currentChunk.content.length) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { MdPreview } from 'md-editor-v3';
|
||||
import 'md-editor-v3/lib/preview.css';
|
||||
import { mergeChunks, getChunkPreview } from '@/utils/chunkUtils';
|
||||
|
||||
const props = defineProps({
|
||||
chunks: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
// 响应式引用
|
||||
const showTooltip = ref(false);
|
||||
const currentChunk = ref(null);
|
||||
const tooltipStyle = ref({ top: '0px', left: '0px' });
|
||||
const activeChunkIndex = ref(null);
|
||||
const highlightedChunkIndex = ref(null);
|
||||
const chunkPanelVisible = ref(true);
|
||||
|
||||
// 主题设置
|
||||
const theme = ref('light');
|
||||
const previewTheme = ref('github');
|
||||
const codeTheme = ref('atom');
|
||||
|
||||
// 合并chunks
|
||||
const mergeResult = computed(() => mergeChunks(props.chunks));
|
||||
const mergedContent = computed(() => mergeResult.value.content);
|
||||
const mappedChunks = computed(() => mergeResult.value.chunks);
|
||||
|
||||
// 格式化文本长度
|
||||
function formatTextLength(length) {
|
||||
if (!length && length !== 0) return '0 字符';
|
||||
|
||||
if (length < 1000) {
|
||||
return `${length} 字符`;
|
||||
} else {
|
||||
return `${(length / 1000).toFixed(1)}k 字符`;
|
||||
}
|
||||
}
|
||||
|
||||
// 高亮chunk
|
||||
function highlightChunk(index) {
|
||||
if (!mappedChunks.value?.[index]) return;
|
||||
highlightedChunkIndex.value = index;
|
||||
currentChunk.value = mappedChunks.value[index];
|
||||
}
|
||||
|
||||
function unhighlightChunk() {
|
||||
highlightedChunkIndex.value = null;
|
||||
currentChunk.value = null;
|
||||
}
|
||||
|
||||
// 处理chunk点击
|
||||
function handleChunkClick(index) {
|
||||
if (!mappedChunks.value?.[index]) return;
|
||||
activeChunkIndex.value = index;
|
||||
}
|
||||
|
||||
// 切换chunk面板显示
|
||||
function toggleChunkPanel() {
|
||||
chunkPanelVisible.value = !chunkPanelVisible.value;
|
||||
}
|
||||
|
||||
// 处理鼠标移动显示tooltip
|
||||
function handleMouseMove(event) {
|
||||
if (!currentChunk.value) return;
|
||||
|
||||
tooltipStyle.value = {
|
||||
top: event.clientY + 10 + 'px',
|
||||
left: event.clientX + 10 + 'px'
|
||||
};
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.markdown-content-viewer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 4px 16px;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
/* background: var(--main-color); */
|
||||
/* color: white; */
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
background: var(--gray-200);
|
||||
}
|
||||
|
||||
.viewer-header h4 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.viewer-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-panel {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
min-height: 0; /* 关键：确保flex项目可以缩小 */
|
||||
}
|
||||
|
||||
.markdown-content {
|
||||
min-height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* MdPreview 组件样式覆盖 */
|
||||
.markdown-content :deep(.md-editor) {
|
||||
/* height: auto !important; */
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.markdown-content :deep(.md-editor-preview) {
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
/* height: auto !important; */
|
||||
font-size: small;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.markdown-content :deep(.md-editor-preview-wrapper) {
|
||||
padding: 0;
|
||||
/* height: auto !important; */
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.chunk-panel {
|
||||
width: 300px;
|
||||
overflow-y: auto;
|
||||
background: #fafafa;
|
||||
padding: 16px;
|
||||
min-height: 0; /* 确保flex项目可以缩小 */
|
||||
}
|
||||
|
||||
.chunk-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chunk-item {
|
||||
background: white;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
/* cursor: pointer; */
|
||||
/* transition: all 0.2s ease; */
|
||||
/* user-select: none; */
|
||||
}
|
||||
|
||||
.chunk-item:hover {
|
||||
border-color: var(--main-color);
|
||||
box-shadow: 0 2px 8px rgba(1, 97, 121, 0.1);
|
||||
}
|
||||
|
||||
/* .chunk-item.active {
|
||||
border-color: var(--main-color);
|
||||
background: var(--main-50);
|
||||
box-shadow: 0 2px 8px rgba(1, 97, 121, 0.2);
|
||||
} */
|
||||
/*
|
||||
.chunk-item.highlighted {
|
||||
border-color: var(--color-success);
|
||||
background: var(--main-50);
|
||||
} */
|
||||
|
||||
.chunk-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.chunk-order {
|
||||
font-weight: 600;
|
||||
color: var(--main-color);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.chunk-id {
|
||||
font-size: 11px;
|
||||
color: var(--gray-500);
|
||||
font-family: monospace;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chunk-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
.chunk-preview {
|
||||
font-size: 11px;
|
||||
color: var(--gray-500);
|
||||
line-height: 1.4;
|
||||
/* max-height: 40px; */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
line-clamp: 4;
|
||||
}
|
||||
|
||||
.chunk-tooltip {
|
||||
position: fixed;
|
||||
background: white;
|
||||
border: 1px solid var(--gray-300);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
padding: 12px;
|
||||
z-index: 1000;
|
||||
min-width: 250px;
|
||||
max-width: 350px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tooltip-header {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tooltip-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tooltip-row .label {
|
||||
font-weight: 500;
|
||||
color: var(--gray-600);
|
||||
min-width: 50px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tooltip-row .value {
|
||||
color: var(--gray-1000);
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
134
web/src/utils/chunkUtils.js
Normal file
134
web/src/utils/chunkUtils.js
Normal file
@ -0,0 +1,134 @@
|
||||
/**
|
||||
* Chunk合并工具函数
|
||||
* 用于合并多个chunk并处理重叠内容
|
||||
*/
|
||||
|
||||
/**
|
||||
* 查找两个字符串的重叠部分
|
||||
* @param {string} str1 - 第一个字符串
|
||||
* @param {string} str2 - 第二个字符串
|
||||
* @returns {string} - 重叠部分的内容
|
||||
*/
|
||||
export function findOverlap(str1, str2) {
|
||||
if (!str1 || !str2) return '';
|
||||
|
||||
const maxOverlap = Math.min(str1.length, str2.length);
|
||||
let overlap = '';
|
||||
|
||||
// 从最长可能的重叠开始检查
|
||||
for (let i = maxOverlap; i > 0; i--) {
|
||||
const endStr1 = str1.slice(-i);
|
||||
const startStr2 = str2.slice(0, i);
|
||||
|
||||
if (endStr1 === startStr2) {
|
||||
overlap = endStr1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return overlap;
|
||||
}
|
||||
|
||||
/**
|
||||
* 合并chunks并处理重叠内容
|
||||
* @param {Array} chunks - chunk数组，每个chunk包含id, content, chunk_order_index
|
||||
* @returns {Object} - 合并结果，包含content和chunks数组
|
||||
*/
|
||||
export function mergeChunks(chunks) {
|
||||
if (!chunks || chunks.length === 0) {
|
||||
return { content: '', chunks: [] };
|
||||
}
|
||||
|
||||
// 按order排序
|
||||
const sorted = [...chunks].sort((a, b) => a.chunk_order_index - b.chunk_order_index);
|
||||
const merged = [];
|
||||
let currentContent = '';
|
||||
|
||||
for (let i = 0; i < sorted.length; i++) {
|
||||
const chunk = sorted[i];
|
||||
const content = chunk.content;
|
||||
|
||||
if (i === 0) {
|
||||
// 第一个chunk直接添加
|
||||
currentContent = content;
|
||||
merged.push({
|
||||
...chunk,
|
||||
startOffset: 0,
|
||||
endOffset: content.length
|
||||
});
|
||||
} else {
|
||||
// 查找重叠部分
|
||||
const overlap = findOverlap(currentContent, content);
|
||||
const newContent = content.slice(overlap.length);
|
||||
|
||||
if (newContent.length > 0) {
|
||||
const startOffset = currentContent.length;
|
||||
currentContent += newContent;
|
||||
merged.push({
|
||||
...chunk,
|
||||
startOffset,
|
||||
endOffset: currentContent.length
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { content: currentContent, chunks: merged };
|
||||
}
|
||||
|
||||
/**
|
||||
* 将文本分割成段落
|
||||
* @param {string} content - 文本内容
|
||||
* @returns {Array} - 段落数组
|
||||
*/
|
||||
export function splitIntoParagraphs(content) {
|
||||
if (!content) return [];
|
||||
|
||||
// 按换行符分割，保留空段落
|
||||
return content.split(/\n\n+/).filter(para => para.trim() !== '');
|
||||
}
|
||||
|
||||
/**
|
||||
* 为每个段落找到对应的chunk
|
||||
* @param {Array} paragraphs - 段落数组
|
||||
* @param {Array} mappedChunks - 映射后的chunks
|
||||
* @returns {Array} - 包含chunk信息的段落
|
||||
*/
|
||||
export function mapParagraphsToChunks(paragraphs, mappedChunks) {
|
||||
if (!paragraphs || !mappedChunks) return [];
|
||||
|
||||
let currentOffset = 0;
|
||||
return paragraphs.map(paragraph => {
|
||||
const paragraphLength = paragraph.length + 2; // +2 for the \n\n
|
||||
|
||||
// 找到包含此位置的chunk
|
||||
const chunk = mappedChunks.find(chunk =>
|
||||
currentOffset >= chunk.startOffset && currentOffset < chunk.endOffset
|
||||
) || mappedChunks[0];
|
||||
|
||||
const result = {
|
||||
content: paragraph,
|
||||
chunk,
|
||||
startOffset: currentOffset,
|
||||
endOffset: currentOffset + paragraphLength
|
||||
};
|
||||
|
||||
currentOffset += paragraphLength;
|
||||
return result;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取chunk的预览文本
|
||||
* @param {string} content - chunk内容
|
||||
* @param {number} maxLength - 最大长度
|
||||
* @returns {string} - 预览文本
|
||||
*/
|
||||
export function getChunkPreview(content, maxLength = 100) {
|
||||
if (!content) return '';
|
||||
|
||||
const text = content.replace(/\n+/g, ' ').trim();
|
||||
if (text.length <= maxLength) return text;
|
||||
|
||||
return text.slice(0, maxLength) + '...';
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user