diff --git a/packages/sheets-conditional-formatting/src/models/conditional-formatting-view-model.ts b/packages/sheets-conditional-formatting/src/models/conditional-formatting-view-model.ts index a751baf9e94..6025d956d64 100644 --- a/packages/sheets-conditional-formatting/src/models/conditional-formatting-view-model.ts +++ b/packages/sheets-conditional-formatting/src/models/conditional-formatting-view-model.ts @@ -132,7 +132,7 @@ export class ConditionalFormattingViewModel extends Disposable { */ public markRuleDirty = (() => { const rxItem = new Subject<{ unitId: string; subUnitId: string; cfId: string; isNeedResetPreComputingCache: boolean }>(); - rxItem.pipe(bufferTime(100), filter((e) => !!e.length), map((list) => { + this.disposeWithMe(rxItem.pipe(bufferTime(100), filter((e) => !!e.length), map((list) => { const set = new Set(); const result: typeof list = []; list.forEach((item) => { @@ -152,7 +152,7 @@ export class ConditionalFormattingViewModel extends Disposable { list.forEach((item) => { this._markRuleDirtyAtOnce(item.unitId, item.subUnitId, item.cfId, item.isNeedResetPreComputingCache); }); - }); + })); return (unitId: string, subUnitId: string, cfId: string, isNeedResetPreComputingCache: boolean = true) => { rxItem.next({ unitId, subUnitId, cfId, isNeedResetPreComputingCache }); }; diff --git a/packages/sheets-formula-ui/src/controllers/prompt.controller.ts b/packages/sheets-formula-ui/src/controllers/prompt.controller.ts index 4c0b3f441bc..3dc96c8cb76 100644 --- a/packages/sheets-formula-ui/src/controllers/prompt.controller.ts +++ b/packages/sheets-formula-ui/src/controllers/prompt.controller.ts @@ -82,6 +82,7 @@ import { DISABLE_NORMAL_SELECTIONS, getPrimaryForRange, IRefSelectionsService, + SelectionMoveType, setEndForRange, SheetsSelectionsService, } from '@univerjs/sheets'; @@ -906,7 +907,7 @@ export class PromptController extends Disposable { const bodyList = this._getFormulaAndCellEditorBody(unitIds).filter((b) => !!b); - this._refSelectionsService.clear(); + // this._refSelectionsService.clear(); if (sequenceNodes == null || sequenceNodes.length === 0) { this._existsSequenceNode = false; @@ -1071,9 +1072,8 @@ export class PromptController extends Disposable { // if (lastRange) { // selectionWithStyle.push(lastRange); // } - if (selectionWithStyle.length) { - this._refSelectionsService.addSelections(unitId, currSheetId, selectionWithStyle); + this._refSelectionsService.setSelections(unitId, currSheetId, selectionWithStyle, SelectionMoveType.ONLY_SET); } } @@ -1405,6 +1405,12 @@ export class PromptController extends Disposable { return; } + const { skeleton } = this._getCurrentUnitIdAndSheetId(); + const unitId = skeleton?.worksheet.getUnitId(); + const sheetId = skeleton?.worksheet.getSheetId(); + currentSelection.range.sheetId = sheetId; + currentSelection.range.unitId = unitId; + const refString = this._generateRefString(currentSelection); this._formulaPromptService.setSequenceNodes(insertNodes); this._formulaPromptService.insertSequenceRef(this._previousInsertRefStringIndex, refString); @@ -1830,7 +1836,7 @@ export class PromptController extends Disposable { const selectionData = this._sheetsSelectionsService.getCurrentLastSelection(); if (selectionData != null) { const selectionDataNew = Tools.deepClone(selectionData); - this._refSelectionsService.addSelections([selectionDataNew]); + this._refSelectionsService.setSelections([selectionDataNew]); } } diff --git a/packages/sheets-formula-ui/src/services/render-services/ref-selections.render-service.ts b/packages/sheets-formula-ui/src/services/render-services/ref-selections.render-service.ts index 64299eef730..b4fb61359cc 100644 --- a/packages/sheets-formula-ui/src/services/render-services/ref-selections.render-service.ts +++ b/packages/sheets-formula-ui/src/services/render-services/ref-selections.render-service.ts @@ -178,6 +178,19 @@ export class RefSelectionsRenderService extends BaseSelectionRenderService imple return control; } + private _initSelectionChangeListener(): void { + // used for refresh selection when focus in formula editor. + // TODO @lumixraku The response of the formula selection to keyboard events is different from that of a regular selection; I believe they should be consistent. + // unlike normal selection, there is no need to listen selectionService.selectionMoveEnd$ for keyboard moving event. prompt@highlightFormula would refresh selection. + this.disposeWithMe(this._refSelectionsService.selectionSet$.subscribe((selectionsWithStyles) => { + this._reset(); + const skeleton = this._skeleton; + if (!skeleton) return; + // The selections' style would be colorful here. PromptController would change the color of selections later. + this.resetSelectionsByModelData(selectionsWithStyles || []); + })); + } + /** * Update selectionModel in this._workbookSelections by user action in spreadsheet area. */ @@ -205,22 +218,6 @@ export class RefSelectionsRenderService extends BaseSelectionRenderService imple ); } - private _initSelectionChangeListener(): void { - // selectionMoveEnd$ beforeSelectionMoveEnd$ was triggered when pointerup after dragging to change selection area. - // Changing the selection area through the 8 control points of the ref selection will not trigger this subscriber. - - // beforeSelectionMoveEnd$ & selectionMoveEnd$ would triggered when change skeleton(change sheet). - this.disposeWithMe(this._workbookSelections.selectionSet$.subscribe((selectionsWithStyles) => { - this._reset(); - const skeleton = this._skeleton; - if (!skeleton) return; - // The selections' style would be colorful here. PromptController would change the color of selections later. - for (const selectionWithStyle of selectionsWithStyles) { - this._addSelectionControlByModelData(selectionWithStyle); - } - })); - } - private _initSkeletonChangeListener(): void { // changing sheet is not the only way cause currentSkeleton$ emit, a lot of cmds will emit currentSkeleton$ // COMMAND_LISTENER_SKELETON_CHANGE ---> currentSkeleton$.next @@ -266,7 +263,7 @@ export class RefSelectionsRenderService extends BaseSelectionRenderService imple * @param viewport * @param scrollTimerType */ - // eslint-disable-next-line max-lines-per-function, complexity + // eslint-disable-next-line complexity protected _onPointerDown( evt: IPointerEvent | IMouseEvent, _zIndex = 0, diff --git a/packages/sheets-ui/src/commands/commands/auto-fill.command.ts b/packages/sheets-ui/src/commands/commands/auto-fill.command.ts index 405ffc8fe30..7d774c195b7 100644 --- a/packages/sheets-ui/src/commands/commands/auto-fill.command.ts +++ b/packages/sheets-ui/src/commands/commands/auto-fill.command.ts @@ -15,7 +15,7 @@ */ import type { IAccessor, ICommand, IRange } from '@univerjs/core'; -import type { ISetRangeValuesMutationParams } from '@univerjs/sheets'; +import type { ISetRangeValuesMutationParams, ISetSelectionsOperationParams } from '@univerjs/sheets'; import { CommandType, ICommandService, IUndoRedoService, IUniverInstanceService, sequenceExecute } from '@univerjs/core'; import { generateNullCellValue, getSheetCommandTarget, SetRangeValuesMutation, SetRangeValuesUndoMutationFactory, SetSelectionsOperation, SheetInterceptorService } from '@univerjs/sheets'; @@ -66,7 +66,7 @@ export const AutoClearContentCommand: ICommand = { clearMutationParams ); const { startColumn, startRow } = selectionRange; - commandService.executeCommand(SetSelectionsOperation.id, { + const param: ISetSelectionsOperationParams = { selections: [ { primary: { @@ -76,7 +76,7 @@ export const AutoClearContentCommand: ICommand = { endRow: startRow, actualRow: startRow, actualColumn: startColumn, - isMerge: false, + isMerged: false, isMergedMainCell: false, }, range: { @@ -86,7 +86,8 @@ export const AutoClearContentCommand: ICommand = { ], unitId, subUnitId, - }); + }; + commandService.executeCommand(SetSelectionsOperation.id, param); const result = commandService.syncExecuteCommand(SetRangeValuesMutation.id, clearMutationParams); if (result) { diff --git a/packages/sheets-ui/src/commands/commands/set-selection.command.ts b/packages/sheets-ui/src/commands/commands/set-selection.command.ts index d61e7e5a562..2ed0d9d91a5 100644 --- a/packages/sheets-ui/src/commands/commands/set-selection.command.ts +++ b/packages/sheets-ui/src/commands/commands/set-selection.command.ts @@ -15,14 +15,17 @@ */ import type { Direction, ICommand, IRange } from '@univerjs/core'; +import type { + ISetSelectionsOperationParams } from '@univerjs/sheets'; import { CommandType, ICommandService, IUniverInstanceService, RANGE_TYPE, Rectangle, Tools } from '@univerjs/core'; -import { IRenderManagerService } from '@univerjs/engine-render'; +import { IRenderManagerService } from '@univerjs/engine-render'; import { expandToContinuousRange, getCellAtRowCol, getSelectionsService, getSheetCommandTarget, + SelectionMoveType, SetSelectionsOperation, } from '@univerjs/sheets'; import { KeyCode } from '@univerjs/ui'; @@ -64,7 +67,7 @@ export interface IMoveSelectionEnterAndTabCommandParams { } /** - * Move selection (Mainly by keyboard arrow keys, Tab and Enter key see MoveSelectionEnterAndTabCommand) + * Move selection (Mainly by keyboard arrow keys, For Tab and Enter key, check @MoveSelectionEnterAndTabCommand) */ export const MoveSelectionCommand: ICommand = { id: 'sheet.command.move-selection', @@ -122,17 +125,12 @@ export const MoveSelectionCommand: ICommand = { }, }, ]; - - const rs = accessor.get(ICommandService).syncExecuteCommand(SetSelectionsOperation.id, { + const rs = accessor.get(ICommandService).executeCommand(SetSelectionsOperation.id, { unitId: workbook.getUnitId(), subUnitId: worksheet.getSheetId(), selections, - extra, - }); - - const renderManagerService = accessor.get(IRenderManagerService); - const selectionService = renderManagerService.getRenderById(unitId)?.with(ISheetSelectionRenderService); - selectionService?.refreshSelectionMoveEnd(); + type: SelectionMoveType.MOVE_END, + } as ISetSelectionsOperationParams); return rs; }, }; @@ -274,6 +272,7 @@ export const MoveSelectionEnterAndTabCommand: ICommand = { worksheet ) : shrinkToNextCell(startRange, direction, worksheet); + destRange.rangeType = selection.range.rangeType; if (Rectangle.equals(destRange, startRange)) { return false; @@ -331,6 +331,7 @@ export const ExpandSelectionCommand: ICommand = { return accessor.get(ICommandService).syncExecuteCommand(SetSelectionsOperation.id, { unitId, subUnitId, + type: SelectionMoveType.ONLY_SET, selections: [ { range: destRange, diff --git a/packages/sheets-ui/src/controllers/defined-name/defined-name.controller.ts b/packages/sheets-ui/src/controllers/defined-name/defined-name.controller.ts index 7f7ca6b2b9a..48d089178d2 100644 --- a/packages/sheets-ui/src/controllers/defined-name/defined-name.controller.ts +++ b/packages/sheets-ui/src/controllers/defined-name/defined-name.controller.ts @@ -39,7 +39,8 @@ export class SheetsDefinedNameController extends Disposable { this.disposeWithMe(merge( this._selectionManagerService.selectionMoveStart$, this._selectionManagerService.selectionMoving$, - this._selectionManagerService.selectionMoveEnd$ + this._selectionManagerService.selectionMoveEnd$, + this._selectionManagerService.selectionSet$ ) .pipe(filter((params) => !!params)) .subscribe((params) => { diff --git a/packages/sheets-ui/src/controllers/menu/permission-menu-util.ts b/packages/sheets-ui/src/controllers/menu/permission-menu-util.ts index 68b9cfcb89c..b306fbf9de1 100644 --- a/packages/sheets-ui/src/controllers/menu/permission-menu-util.ts +++ b/packages/sheets-ui/src/controllers/menu/permission-menu-util.ts @@ -502,4 +502,3 @@ export function getViewPermissionDisable$(accessor: IAccessor) { }) ); } - diff --git a/packages/sheets-ui/src/controllers/utils/selections-tools.ts b/packages/sheets-ui/src/controllers/utils/selections-tools.ts index cb4275ddd87..8379e9c3e68 100644 --- a/packages/sheets-ui/src/controllers/utils/selections-tools.ts +++ b/packages/sheets-ui/src/controllers/utils/selections-tools.ts @@ -15,8 +15,8 @@ */ import type { IAccessor, Nullable, Workbook } from '@univerjs/core'; -import { IUniverInstanceService, RANGE_TYPE, Rectangle, UniverInstanceType } from '@univerjs/core'; import type { ISelectionWithStyle } from '@univerjs/sheets'; +import { IUniverInstanceService, RANGE_TYPE, Rectangle, UniverInstanceType } from '@univerjs/core'; import { MERGE_CELL_INTERCEPTOR_CHECK, MergeCellController, RangeProtectionRuleModel, SheetsSelectionsService } from '@univerjs/sheets'; import { combineLatest, map, of, switchMap } from 'rxjs'; @@ -45,7 +45,8 @@ export function getSheetSelectionsDisabled$(accessor: IAccessor) { } const subUnitRuleRange = rangeProtectionRuleModel.getSubunitRuleList(unitId, subUnitId) - .map((rule) => rule.ranges).flat(); + .map((rule) => rule.ranges) + .flat(); if (selection.length < 2) { const range = selection[0].range; diff --git a/packages/sheets-ui/src/services/selection/base-selection-render.service.ts b/packages/sheets-ui/src/services/selection/base-selection-render.service.ts index 9c9ce8376e7..6055eca236c 100644 --- a/packages/sheets-ui/src/services/selection/base-selection-render.service.ts +++ b/packages/sheets-ui/src/services/selection/base-selection-render.service.ts @@ -154,16 +154,21 @@ export class BaseSelectionRenderService extends Disposable implements ISheetSele // #endregion /** - * Mainly emit by pointerup (pointerup is handled in _onPointerdown) + * Mainly emit by pointerup in spreadsheet. (pointerup is handled in _onPointerdown) */ protected readonly _selectionMoveEnd$ = new BehaviorSubject([]); + /** + * Pointerup in spreadsheet + */ readonly selectionMoveEnd$ = this._selectionMoveEnd$.asObservable(); + /** + * Mainly emit by pointermove in spreadsheet + */ protected readonly _selectionMoving$ = new Subject(); - readonly selectionMoving$ = this._selectionMoving$.asObservable(); - /** - * Mainly emit by pointerdown + * Pointermove in spreadsheet */ + readonly selectionMoving$ = this._selectionMoving$.asObservable(); protected readonly _selectionMoveStart$ = new Subject(); readonly selectionMoveStart$ = this._selectionMoveStart$.asObservable(); diff --git a/packages/sheets-ui/src/services/selection/selection-render.service.ts b/packages/sheets-ui/src/services/selection/selection-render.service.ts index 1cc8a5951c9..76d446b9dae 100644 --- a/packages/sheets-ui/src/services/selection/selection-render.service.ts +++ b/packages/sheets-ui/src/services/selection/selection-render.service.ts @@ -66,7 +66,7 @@ export class SheetSelectionRenderService extends BaseSelectionRenderService impl const sheetObject = this._getSheetObject(); this._initEventListeners(sheetObject); - this._initSelectionChangeListener(); + this._initSelectionModelChangeListener(); this._initThemeChangeListener(); this._initSkeletonChangeListener(); this._initUserActionSyncListener(); @@ -144,13 +144,21 @@ export class SheetSelectionRenderService extends BaseSelectionRenderService impl return this._contextService.getContextValue(DISABLE_NORMAL_SELECTIONS); } - private _initSelectionChangeListener(): void { - // normal selection: after dragging selection(move end) - this.disposeWithMe(merge(this._workbookSelections.selectionMoveEnd$, this._workbookSelections.selectionSet$).subscribe((selectionWithStyleList) => { + /** + * Response for selection model changing. + */ + private _initSelectionModelChangeListener(): void { + this.disposeWithMe(merge( + this._workbookSelections.selectionMoveEnd$, // triggered by keyboard(e.g. arrow key tab enter) + this._workbookSelections.selectionSet$ // shift + arrow key + ).subscribe((selectionWithStyleList) => { this.resetSelectionsByModelData(selectionWithStyleList); })); } + /** + * Handle events in spreadsheet. (e.g. drag and move to make a selection) + */ private _initUserActionSyncListener(): void { this.disposeWithMe(this.selectionMoveStart$.subscribe((params) => this._updateSelections(params, SelectionMoveType.MOVE_START))); this.disposeWithMe(this.selectionMoving$.subscribe((params) => this._updateSelections(params, SelectionMoveType.MOVING))); @@ -164,7 +172,9 @@ export class SheetSelectionRenderService extends BaseSelectionRenderService impl this._reset(); } else { this._renderDisposable = toDisposable( - this.selectionMoveEnd$.subscribe((params) => this._updateSelections(params, SelectionMoveType.MOVE_END)) + this.selectionMoveEnd$.subscribe((params) => { + this._updateSelections(params, SelectionMoveType.MOVE_END); + }) ); } })); @@ -184,13 +194,15 @@ export class SheetSelectionRenderService extends BaseSelectionRenderService impl return; } + const selectionWithStyles = selectionDataWithStyleList.map((selectionDataWithStyle) => + convertSelectionDataToRange(selectionDataWithStyle) + ); + this._commandService.executeCommand(SetSelectionsOperation.id, { unitId, subUnitId: sheetId, type, - selections: selectionDataWithStyleList.map((selectionDataWithStyle) => - convertSelectionDataToRange(selectionDataWithStyle) - ), + selections: selectionWithStyles, }); } diff --git a/packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx b/packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx index 881096e3634..b14939d28cb 100644 --- a/packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx +++ b/packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx @@ -78,7 +78,8 @@ export function FormulaBar() { return merge( worksheetProtectionRuleModel.ruleChange$, rangeProtectionRuleModel.ruleChange$, - selectionManager.selectionMoveEnd$ + selectionManager.selectionMoveEnd$, + selectionManager.selectionSet$ ).pipe( switchMap(() => { const unitId = workbook.getUnitId(); diff --git a/packages/sheets/src/basics/selection.ts b/packages/sheets/src/basics/selection.ts index eb7e1dc6485..13938513513 100644 --- a/packages/sheets/src/basics/selection.ts +++ b/packages/sheets/src/basics/selection.ts @@ -157,7 +157,7 @@ export interface ISelectionWithStyle extends ISelection { * if primary is not defined, means not keep current primary cell. */ primary: Nullable; - style: Nullable>; + style?: Nullable>; } export interface ISheetRangeLocation { diff --git a/packages/sheets/src/services/selections/selection-data-model.ts b/packages/sheets/src/services/selections/selection-data-model.ts index c4874d76616..6681226f275 100644 --- a/packages/sheets/src/services/selections/selection-data-model.ts +++ b/packages/sheets/src/services/selections/selection-data-model.ts @@ -62,16 +62,10 @@ export class WorkbookSelectionModel extends Disposable { this._selectionSet$.complete(); } - /** Clear all selections in this workbook. */ - clear(): void { - this._worksheetSelections.clear(); - this._eventAfterSetSelections([]); - } - addSelections(sheetId: string, selectionDatas: ISelectionWithStyle[]): void { const selections = this.getSelectionsOfWorksheet(sheetId); selections.push(...selectionDatas); - this._eventAfterSetSelections(selections); + this._selectionSet$.next(selections); } /** @@ -84,8 +78,8 @@ export class WorkbookSelectionModel extends Disposable { // selectionDatas should not be same variable as this._worksheetSelections !!! // but there are some place get selection from this._worksheetSelections and set selectionDatas(2nd parameter of this function ) cause selectionDatas is always [] // see univer/pull/2909 - this.deleteSheetSelection(sheetId); - this.getSelectionsOfWorksheet(sheetId).push(...selectionDatas); + // this.deleteSheetSelection(sheetId); + this.setSelectionsOfWorksheet(sheetId, selectionDatas); switch (type) { case SelectionMoveType.MOVE_START: @@ -103,7 +97,7 @@ export class WorkbookSelectionModel extends Disposable { break; } default: - this._eventAfterSetSelections(selectionDatas); + this._selectionSet$.next(selectionDatas); break; } } @@ -129,30 +123,27 @@ export class WorkbookSelectionModel extends Disposable { return this._worksheetSelections.get(sheetId)!; } - private _getCurrentSelections(): ISelectionWithStyle[] { - return this.getSelectionsOfWorksheet(this._workbook.getActiveSheet()!.getSheetId()); + setSelectionsOfWorksheet(sheetId: string, selections: ISelectionWithStyle[]): void { + this._worksheetSelections.set(sheetId, [...selections]); } - getCurrentLastSelection(): Readonly> { - const selectionData = this._getCurrentSelections(); - return selectionData[selectionData.length - 1] as Readonly>; + deleteSheetSelection(sheetId: string) { + this._worksheetSelections.set(sheetId, []); } - /** - * Same method as getSelectionsOfWorksheet. - * @param sheetId - * @returns this._worksheetSelections - */ - private _ensureSheetSelection(sheetId: string): ISelectionWithStyle[] { - if (!this._worksheetSelections.get(sheetId)) { - this._worksheetSelections.set(sheetId, []); - } + /** Clear all selections in this workbook. */ + clear(): void { + this._worksheetSelections.clear(); + this._eventAfterSetSelections([]); + } - return this._worksheetSelections.get(sheetId)!; + private _getCurrentSelections(): ISelectionWithStyle[] { + return this.getSelectionsOfWorksheet(this._workbook.getActiveSheet()!.getSheetId()); } - deleteSheetSelection(sheetId: string) { - this._worksheetSelections.set(sheetId, []); + getCurrentLastSelection(): Readonly> { + const selectionData = this._getCurrentSelections(); + return selectionData[selectionData.length - 1] as Readonly>; } private _eventAfterSetSelections(selections: ISelectionWithStyle[]): void { diff --git a/packages/sheets/src/services/selections/selection.service.ts b/packages/sheets/src/services/selections/selection.service.ts index b929de25e21..4f4e52cfd8a 100644 --- a/packages/sheets/src/services/selections/selection.service.ts +++ b/packages/sheets/src/services/selections/selection.service.ts @@ -37,10 +37,25 @@ export class SheetsSelectionsService extends RxDisposable { return this._currentSelectionPos; } + /** + * Selection Events, usually triggered when pointerdown in spreadsheet by selection render service after selectionModel has updated. + */ selectionMoveStart$: Observable>; + + /** + * Selection Events, usually triggered when pointermove in spreadsheet by selection render service after selectionModel has updated. + */ selectionMoving$: Observable>; + + /** + * Selection Events, usually triggered when pointerup in spreadsheet by selection render service after selectionModel has updated. + */ selectionMoveEnd$: Observable; - selectionSet$: Observable; + + /** + * Selection Events, usually triggered when changing unit.(focus in formula editor) + */ + selectionSet$: Observable>; constructor( @IUniverInstanceService protected readonly _instanceSrv: IUniverInstanceService @@ -97,7 +112,7 @@ export class SheetsSelectionsService extends RxDisposable { /** * Set selection data to WorkbookSelectionModel. - * If type is not specified, this method would clear all existing selections. + * * @param unitIdOrSelections * @param worksheetIdOrType * @param selectionDatas @@ -112,7 +127,12 @@ export class SheetsSelectionsService extends RxDisposable { type?: SelectionMoveType ): void { if (typeof unitIdOrSelections === 'string' && typeof worksheetIdOrType === 'string') { - this._ensureWorkbookSelection(unitIdOrSelections).setSelections(worksheetIdOrType, selectionDatas!, type ?? SelectionMoveType.ONLY_SET); + const unitId = unitIdOrSelections as string; + this._ensureWorkbookSelection(unitId).setSelections( + worksheetIdOrType, + selectionDatas || [], + type ?? SelectionMoveType.ONLY_SET + ); return; } diff --git a/packages/ui/src/views/components/ribbon/Ribbon.tsx b/packages/ui/src/views/components/ribbon/Ribbon.tsx index 476780845ce..62ea6701ec1 100644 --- a/packages/ui/src/views/components/ribbon/Ribbon.tsx +++ b/packages/ui/src/views/components/ribbon/Ribbon.tsx @@ -215,8 +215,8 @@ export function Ribbon(props: IRibbonProps) { style={{ position: 'absolute', top: -9999, - left: -9999, - opacity: 0, + left: 0, + right: 0, // top: 0, // left: 0, // opacity: 1, diff --git a/packages/ui/src/views/components/ribbon/index.module.less b/packages/ui/src/views/components/ribbon/index.module.less index 70b7c620fb7..f0a73cceff9 100644 --- a/packages/ui/src/views/components/ribbon/index.module.less +++ b/packages/ui/src/views/components/ribbon/index.module.less @@ -86,6 +86,7 @@ border-bottom: 1px solid rgb(var(--border-color)); &-container { + flex: 1; padding: 0 var(--padding-lg); display: flex; gap: var(--margin-xs);