xiaoxue_admin
/
dbx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: improve cell detail editor scroll and height 

Co-authored-by: staff <staff@qimaos-MacBook-Pro.local>
This commit is contained in:
zipg 2026-06-24 21:19:08 +08:00 committed by GitHub
parent 588ba3352d
commit dfcd52a607
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/desktop/src/components/grid/DataGrid.vue
View File

@ -3562,6 +3562,16 @@ const editorThemeAccessor = () => settingsStore.editorSettings.theme;
const editorAppAppearance = () => (isDark.value ? "dark" : "light") as import("@/lib/appTheme").AppThemeAppearance;
const editorFontSize = () => settingsStore.editorSettings.fontSize;
const editorFontFamily = () => settingsStore.editorSettings.fontFamily;
const SIDE_DETAIL_EDITOR_MIN_HEIGHT = 160;
const SIDE_DETAIL_EDITOR_MAX_HEIGHT = 360;
const SIDE_DETAIL_EDITOR_LINE_HEIGHT = 20;
const SIDE_DETAIL_EDITOR_SOFT_WRAP_CHARS = 48;
const sideDetailEditorStyle = computed(() => {
if (cellDetailPanelIsBottom.value) return undefined;
const lines = detailEditValue.value.split(/\r\n|\r|\n/).reduce((total, line) => total + Math.max(1, Math.ceil(line.length / SIDE_DETAIL_EDITOR_SOFT_WRAP_CHARS)), 0);
const height = Math.min(SIDE_DETAIL_EDITOR_MAX_HEIGHT, Math.max(SIDE_DETAIL_EDITOR_MIN_HEIGHT, lines * SIDE_DETAIL_EDITOR_LINE_HEIGHT + 28));
return { height: `${height}px` };
});
function getDetailEditor(): UseCellDetailEditorReturn | null {
return activeCellDetailTab.value === "valueEditor" ? valueDetailEditor : detailsDetailEditor;
@ -7936,7 +7946,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
</a>
</div>
<template v-if="isEditingDetail">
<div class="min-h-0" :class="cellDetailPanelIsBottom ? 'flex-1' : 'h-40'">
<div class="min-h-0" :class="cellDetailPanelIsBottom ? 'flex-1' : ''" :style="sideDetailEditorStyle">
<TemporalCellEditor v-if="detailTemporalEditorKind" v-model="detailEditValue" :kind="detailTemporalEditorKind" variant="inline" :commit-on-close="false" @cancel="cancelDetailEdit" @commit="commitDetailEdit" />
<div v-else ref="detailsEditorContainer" data-cell-detail-editor-root class="min-h-0 h-full w-full rounded border overflow-hidden" />
</div>

6
apps/desktop/src/composables/useCellDetailEditor.ts
View File

@ -86,7 +86,7 @@ export function useCellDetailEditor(options: UseCellDetailEditorOptions): UseCel
const editor = view.value;
if (!editor) return;
editor.dispatch({
effects: fontThemeComp.reconfigure(editorFontTheme(EditorView, size, family, { scrollable: false })),
effects: fontThemeComp.reconfigure(editorFontTheme(EditorView, size, family, { fixedHeight: true, scrollable: true })),
});
}
@ -139,7 +139,7 @@ export function useCellDetailEditor(options: UseCellDetailEditorOptions): UseCel
const theme = await loadEditorTheme(editorTheme, appearance);
if (!view.value || destroyed) return;
view.value.dispatch({
effects: [themeComp.reconfigure(theme), fontThemeComp.reconfigure(editorFontTheme(EditorView, liveFontSize, fontFamily, { scrollable: false }))],
effects: [themeComp.reconfigure(theme), fontThemeComp.reconfigure(editorFontTheme(EditorView, liveFontSize, fontFamily, { fixedHeight: true, scrollable: true }))],
});
});
@ -151,7 +151,7 @@ export function useCellDetailEditor(options: UseCellDetailEditorOptions): UseCel
const theme = await loadEditorTheme(options.editorTheme(), options.appAppearance());
liveFontSize = clampEditorFontSize(options.fontSize());
const fontTheme = editorFontTheme(EditorView, liveFontSize, options.fontFamily(), { scrollable: false });
const fontTheme = editorFontTheme(EditorView, liveFontSize, options.fontFamily(), { fixedHeight: true, scrollable: true });
const shortcuts = settingsStore.editorSettings.shortcuts;
const state = EditorState.create({