landaiqing/voidraft
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 20 Wiki Activity

🐛 Fixed some known issues

Browse Source
This commit is contained in:
landaiqing
2025-12-12 22:56:22 +08:00
parent 4e611db349
commit d16905c0a3
6 changed files with 214 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/stores/documentStore.ts
View File

@@ -158,6 +158,10 @@ export const useDocumentStore = defineStore('document', () => {
currentDocument.value.updatedAt = new Date().toISOString();
}
// 同步更新标签页标题
const tabStore = useTabStore();
tabStore.updateTabTitle(docId, title);
return true;
} catch (error) {
console.error('Failed to update document metadata:', error);
@@ -178,6 +182,12 @@ export const useDocumentStore = defineStore('document', () => {
// 更新本地状态
delete documents.value[docId];
// 同步清理标签页
const tabStore = useTabStore();
if (tabStore.hasTab(docId)) {
tabStore.closeTab(docId);
}
// 如果删除的是当前文档，切换到第一个可用文档
if (currentDocumentId.value === docId) {
const availableDocs = Object.values(documents.value);

49
frontend/src/stores/tabStore.ts
View File

@@ -15,7 +15,7 @@ export const useTabStore = defineStore('tab', () => {
const documentStore = useDocumentStore();
// === 核心状态 ===
const tabsMap = ref<Map<number, Tab>>(new Map());
const tabsMap = ref<Record<number, Tab>>({});
const tabOrder = ref<number[]>([]); // 维护标签页顺序
const draggedTabId = ref<number | null>(null);
@@ -28,21 +28,21 @@ export const useTabStore = defineStore('tab', () => {
// 按顺序返回标签页数组（用于UI渲染）
const tabs = computed(() => {
return tabOrder.value
.map(documentId => tabsMap.value.get(documentId))
.map(documentId => tabsMap.value[documentId])
.filter(tab => tab !== undefined) as Tab[];
});
// === 私有方法 ===
const hasTab = (documentId: number): boolean => {
return tabsMap.value.has(documentId);
return documentId in tabsMap.value;
};
const getTab = (documentId: number): Tab | undefined => {
return tabsMap.value.get(documentId);
return tabsMap.value[documentId];
};
const updateTabTitle = (documentId: number, title: string) => {
const tab = tabsMap.value.get(documentId);
const tab = tabsMap.value[documentId];
if (tab) {
tab.title = title;
}
@@ -67,7 +67,7 @@ export const useTabStore = defineStore('tab', () => {
title: document.title
};
tabsMap.value.set(documentId, newTab);
tabsMap.value[documentId] = newTab;
tabOrder.value.push(documentId);
};
@@ -81,7 +81,7 @@ export const useTabStore = defineStore('tab', () => {
if (tabIndex === -1) return;
// 从映射和顺序数组中移除
tabsMap.value.delete(documentId);
delete tabsMap.value[documentId];
tabOrder.value.splice(tabIndex, 1);
// 如果关闭的是当前文档，需要切换到其他文档
@@ -111,7 +111,7 @@ export const useTabStore = defineStore('tab', () => {
if (tabIndex === -1) return;
// 从映射和顺序数组中移除
tabsMap.value.delete(documentId);
delete tabsMap.value[documentId];
tabOrder.value.splice(tabIndex, 1);
});
};
@@ -150,10 +150,31 @@ export const useTabStore = defineStore('tab', () => {
return tabOrder.value.indexOf(documentId);
};
/**
* 验证并清理无效的标签页
*/
const validateTabs = () => {
const validDocIds = Object.keys(documentStore.documents).map(Number);
// 找出无效的标签页（文档已被删除）
const invalidTabIds = tabOrder.value.filter(docId => !validDocIds.includes(docId));
if (invalidTabIds.length > 0) {
// 批量清理无效标签页
invalidTabIds.forEach(docId => {
delete tabsMap.value[docId];
});
tabOrder.value = tabOrder.value.filter(docId => validDocIds.includes(docId));
}
};
/**
* 初始化标签页（当前文档）
*/
const initializeTab = () => {
// 先验证并清理无效的标签页（处理持久化的脏数据）
validateTabs();
if (isTabsEnabled.value) {
const currentDoc = documentStore.currentDocument;
if (currentDoc) {
@@ -224,12 +245,15 @@ export const useTabStore = defineStore('tab', () => {
* 清空所有标签页
*/
const clearAllTabs = () => {
tabsMap.value.clear();
tabsMap.value = {};
tabOrder.value = [];
};
// === 公共API ===
return {
tabsMap,
tabOrder,
// 状态
tabs: readonly(tabs),
draggedTabId,
@@ -251,9 +275,16 @@ export const useTabStore = defineStore('tab', () => {
initializeTab,
clearAllTabs,
updateTabTitle,
validateTabs,
// 工具方法
hasTab,
getTab
};
}, {
persist: {
key: 'voidraft-tabs',
storage: localStorage,
pick: ['tabsMap', 'tabOrder'],
},
});

16
frontend/src/views/editor/extensions/codeblock/decorations.ts
View File

@@ -151,14 +151,18 @@ const blockLayer = layer({
const fromCoordsTop = fromLineBlock.top + view.documentTop;
let toCoordsBottom = toLineBlock.bottom + view.documentTop;
// 对最后一个块进行特殊处理，让它直接延伸到底部
if (idx === blocks.length - 1) {
const editorHeight = view.dom.clientHeight;
const contentBottom = toCoordsBottom - view.documentTop + view.documentPadding.top;
// 计算需要添加到最后一个块的额外高度，以覆盖 scrollPastEnd 添加的额外滚动空间
// scrollPastEnd 会在文档底部添加相当于 scrollDOM.clientHeight 的额外空间
// 当滚动到最底部时，顶部仍会显示一行（defaultLineHeight），需要减去这部分
const editorHeight = view.scrollDOM.clientHeight;
const extraHeight = editorHeight - (
view.defaultLineHeight + // 当滚动到最底部时，顶部仍显示一行
view.documentPadding.top +
8 // 额外的边距调整
);
// 让最后一个块直接延伸到编辑器底部
if (contentBottom < editorHeight) {
const extraHeight = editorHeight - contentBottom - 10;
if (extraHeight > 0) {
toCoordsBottom += extraHeight;
}
}

152
frontend/src/views/editor/extensions/minimap/blockManager.ts
View File

@@ -11,6 +11,7 @@ import {
Highlight,
LineSpan,
FontInfo,
UpdateFontInfoRequest,
} from './worker/protocol';
import crelt from 'crelt';
@@ -26,6 +27,11 @@ interface Block {
rendering: boolean;
requestId: number;
lastUsed: number; // LRU 时间戳
// 高亮缓存
cachedHighlights: Highlight[] | null;
cachedLines: LineSpan[][] | null;
cachedTextSlice: string | null;
cachedTextOffset: number;
}
export class BlockManager {
@@ -34,6 +40,7 @@ export class BlockManager {
private fontInfoMap = new Map<string, FontInfo>();
private fontDirty = true;
private fontVersion = 0;
private sentFontTags = new Set<string>(); // 已发送给 Worker 的字体标签
private measureCache: { charWidth: number; lineHeight: number; version: number } | null = null;
private displayText: 'blocks' | 'characters' = 'characters';
private themeClasses: Set<string>;
@@ -150,6 +157,10 @@ export class BlockManager {
markAllDirty(): void {
for (const block of this.blocks.values()) {
block.dirty = true;
// 清除缓存，强制重新收集数据
block.cachedHighlights = null;
block.cachedLines = null;
block.cachedTextSlice = null;
}
}
@@ -185,11 +196,19 @@ export class BlockManager {
this.blocks.delete(index);
} else if (affectedBlocks.has(index)) {
block.dirty = true;
// 清除缓存
block.cachedHighlights = null;
block.cachedLines = null;
block.cachedTextSlice = null;
if (hasLineCountChange) {
markRest = true; // 从这个块开始，后续块都需要更新
}
} else if (markRest) {
block.dirty = true;
// 清除缓存
block.cachedHighlights = null;
block.cachedLines = null;
block.cachedTextSlice = null;
}
}
@@ -320,6 +339,10 @@ export class BlockManager {
rendering: false,
requestId: 0,
lastUsed: now,
cachedHighlights: null,
cachedLines: null,
cachedTextSlice: null,
cachedTextOffset: 0,
};
this.blocks.set(index, block);
} else {
@@ -344,51 +367,65 @@ export class BlockManager {
this.renderingCount++;
const { startLine, endLine } = block;
const linesSnapshot = getLinesSnapshot(state);
const tree = syntaxTree(state);
// Collect highlights
const highlights: Highlight[] = [];
if (tree.length > 0 && startLine <= state.doc.lines) {
const highlighter: Highlighter = {
style: (tags) => highlightingFor(state, tags),
};
const startPos = state.doc.line(startLine).from;
const endPos = state.doc.line(Math.min(endLine, state.doc.lines)).to;
let highlights: Highlight[];
let lines: LineSpan[][];
let textSlice: string;
let textOffset: number;
highlightTree(tree, highlighter, (from, to, tags) => {
highlights.push({ from, to, tags });
}, startPos, endPos);
}
// 只有当块是 dirty 时才重新收集数据，否则使用缓存
if (block.dirty || !block.cachedHighlights) {
const linesSnapshot = getLinesSnapshot(state);
const tree = syntaxTree(state);
// Extract relevant lines
const startIdx = startLine - 1;
const endIdx = Math.min(endLine, linesSnapshot.length);
const lines: LineSpan[][] = linesSnapshot.slice(startIdx, endIdx).map(line =>
line.map(span => ({ from: span.from, to: span.to, folded: span.folded }))
);
// Collect highlights
highlights = [];
if (tree.length > 0 && startLine <= state.doc.lines) {
const highlighter: Highlighter = {
style: (tags) => highlightingFor(state, tags),
};
const startPos = state.doc.line(startLine).from;
const endPos = state.doc.line(Math.min(endLine, state.doc.lines)).to;
// Get text slice
let textOffset = 0;
let textEnd = 0;
if (lines.length > 0 && lines[0].length > 0) {
textOffset = lines[0][0].from;
const lastLine = lines[lines.length - 1];
if (lastLine.length > 0) {
textEnd = lastLine[lastLine.length - 1].to;
highlightTree(tree, highlighter, (from, to, tags) => {
highlights.push({ from, to, tags });
}, startPos, endPos);
}
}
const textSlice = state.doc.sliceString(textOffset, textEnd);
// Build font info map
const fontInfoMap: Record<string, FontInfo> = {};
for (const hl of highlights) {
if (!fontInfoMap[hl.tags]) {
const info = this.getFontInfo(hl.tags);
fontInfoMap[hl.tags] = info;
// Extract relevant lines
const startIdx = startLine - 1;
const endIdx = Math.min(endLine, linesSnapshot.length);
lines = linesSnapshot.slice(startIdx, endIdx).map(line =>
line.map(span => ({ from: span.from, to: span.to, folded: span.folded }))
);
// Get text slice
textOffset = 0;
let textEnd = 0;
if (lines.length > 0 && lines[0].length > 0) {
textOffset = lines[0][0].from;
const lastLine = lines[lines.length - 1];
if (lastLine.length > 0) {
textEnd = lastLine[lastLine.length - 1].to;
}
}
textSlice = state.doc.sliceString(textOffset, textEnd);
// 缓存数据
block.cachedHighlights = highlights;
block.cachedLines = lines;
block.cachedTextSlice = textSlice;
block.cachedTextOffset = textOffset;
} else {
// 使用缓存的数据
highlights = block.cachedHighlights;
lines = block.cachedLines!;
textSlice = block.cachedTextSlice!;
textOffset = block.cachedTextOffset;
}
fontInfoMap[''] = this.getFontInfo('');
// 确保字体信息已发送给 Worker
this.ensureFontInfoSent(highlights);
const blockLines = endLine - startLine + 1;
const request: BlockRequest = {
@@ -403,8 +440,6 @@ export class BlockManager {
lines,
textSlice,
textOffset,
fontInfoMap,
defaultFont: fontInfoMap[''],
displayText: this.displayText,
charWidth,
lineHeight,
@@ -414,6 +449,43 @@ export class BlockManager {
this.worker.postMessage(request);
}
/**
* 确保字体信息已发送给 Worker
* 增量发送：只发送新的标签
*/
private ensureFontInfoSent(highlights: Highlight[]): void {
if (!this.worker) return;
// 收集新的标签
const newTags: string[] = [];
for (const hl of highlights) {
if (!this.sentFontTags.has(hl.tags)) {
newTags.push(hl.tags);
}
}
// 默认字体标签
if (!this.sentFontTags.has('')) {
newTags.push('');
}
// 如果没有新标签，不需要发送
if (newTags.length === 0) return;
// 构建新标签的字体信息
const fontInfoMap: Record<string, FontInfo> = {};
for (const tag of newTags) {
fontInfoMap[tag] = this.getFontInfo(tag);
this.sentFontTags.add(tag);
}
const updateRequest: UpdateFontInfoRequest = {
type: 'updateFontInfo',
fontInfoMap,
defaultFont: this.getFontInfo(''),
};
this.worker.postMessage(updateRequest);
}
private evictOldBlocks(): void {
if (this.blocks.size <= MAX_BLOCKS) return;
@@ -432,6 +504,7 @@ export class BlockManager {
private refreshFontCache(): void {
this.fontInfoMap.clear();
this.measureCache = null;
this.sentFontTags.clear(); // 需要重新发送字体信息给 Worker
// 注意：fontDirty 在成功渲染块后才设为 false
this.fontVersion++;
this.markAllDirty();
@@ -496,3 +569,4 @@ export class BlockManager {
}
}

20
frontend/src/views/editor/extensions/minimap/worker/block.worker.ts
View File

@@ -6,6 +6,10 @@ import {
FontInfo,
} from './protocol';
// 缓存字体信息，只在主题变化时更新
let cachedFontInfoMap: Record<string, FontInfo> = {};
let cachedDefaultFont: FontInfo = { color: '#000', font: '12px monospace', lineHeight: 14 };
function post(msg: ToMainMessage, transfer?: Transferable[]): void {
self.postMessage(msg, { transfer });
}
@@ -107,14 +111,16 @@ function renderBlock(request: BlockRequest): void {
endLine,
width,
height,
fontInfoMap,
defaultFont,
displayText,
charWidth,
lineHeight,
gutterOffset,
} = request;
// 使用缓存的字体信息
const fontInfoMap = cachedFontInfoMap;
const defaultFont = cachedDefaultFont;
// Create OffscreenCanvas for this block
const canvas = new OffscreenCanvas(width, height);
const ctx = canvas.getContext('2d');
@@ -245,12 +251,22 @@ function drawTextBlocks(
function handleMessage(msg: ToWorkerMessage): void {
switch (msg.type) {
case 'init':
// 重置字体缓存
cachedFontInfoMap = {};
cachedDefaultFont = { color: '#000', font: '12px monospace', lineHeight: 14 };
post({ type: 'ready' });
break;
case 'updateFontInfo':
// 增量合并字体信息
Object.assign(cachedFontInfoMap, msg.fontInfoMap);
cachedDefaultFont = msg.defaultFont;
break;
case 'renderBlock':
renderBlock(msg);
break;
case 'destroy':
// 清理缓存
cachedFontInfoMap = {};
break;
}
}

13
frontend/src/views/editor/extensions/minimap/worker/protocol.ts
View File

@@ -25,6 +25,15 @@ export interface FontInfo {
lineHeight: number;
}
/**
* 更新字体信息（主题变化时发送一次）
*/
export interface UpdateFontInfoRequest {
type: 'updateFontInfo';
fontInfoMap: Record<string, FontInfo>;
defaultFont: FontInfo;
}
export interface BlockRequest {
type: 'renderBlock';
blockId: number;
@@ -37,8 +46,6 @@ export interface BlockRequest {
lines: LineSpan[][];
textSlice: string;
textOffset: number;
fontInfoMap: Record<string, FontInfo>;
defaultFont: FontInfo;
displayText: 'blocks' | 'characters';
charWidth: number;
lineHeight: number;
@@ -53,7 +60,7 @@ export interface DestroyRequest {
type: 'destroy';
}
export type ToWorkerMessage = BlockRequest | InitRequest | DestroyRequest;
export type ToWorkerMessage = BlockRequest | InitRequest | DestroyRequest | UpdateFontInfoRequest;
export interface BlockComplete {
type: 'blockComplete';