From dc26e675bc5a8162a45eafef42436ab90cbc635d Mon Sep 17 00:00:00 2001
From: Wenzhao Hu <wzhudev@gmail.com>
Date: Tue, 29 Apr 2025 17:15:22 +0800
Subject: [PATCH] refactor(drawing): migrate to tailwindcss in drawing packages
 (#5122)

---
 .../commands/operations/message.operation.ts  |  13 +-
 .../debugger/src/controllers/menu.ts          |   6 +-
 .../views/doc-image-panel/DocDrawingPanel.tsx |   6 +-
 .../doc-image-panel/DocDrawingPosition.tsx    | 145 ++++++++++++-----
 .../doc-image-panel/DocDrawingTextWrap.tsx    | 152 +++++++++++++-----
 .../views/doc-image-panel/index.module.less   |  14 --
 .../src/views/panel/DrawingAlign.tsx          |  27 +++-
 .../src/views/panel/DrawingArrange.tsx        |  50 +++---
 .../src/views/panel/DrawingCommonPanel.tsx    |   2 +-
 .../src/views/panel/DrawingGroup.tsx          |  19 ++-
 .../src/views/panel/DrawingTransform.tsx      |  88 +++++-----
 .../src/views/panel/ImageCropper.tsx          |  24 +--
 .../src/views/panel/index.module.less         |  67 --------
 .../drawing-ui/src/views/utils/classnames.ts  |  22 +++
 .../drawing-popup-menu.controller.ts          | 109 ++++++++-----
 .../sheet-image-panel/SheetDrawingAnchor.tsx  |  27 +++-
 .../sheet-image-panel/SheetDrawingPanel.tsx   |   5 +-
 .../views/sheet-image-panel/index.module.less |  14 --
 .../views/upload-loading/UploadLoading.tsx    |  48 ------
 .../views/upload-loading/index.module.less    |  47 ------
 .../__testing__/mock-message.service.ts       |   8 +
 .../message/desktop-message.service.ts        |  21 ++-
 .../src/services/message/message.service.ts   |   5 +-
 .../src/__testing__/util.ts                   |   5 +-
 24 files changed, 489 insertions(+), 435 deletions(-)
 delete mode 100644 packages/docs-drawing-ui/src/views/doc-image-panel/index.module.less
 delete mode 100644 packages/drawing-ui/src/views/panel/index.module.less
 create mode 100644 packages/drawing-ui/src/views/utils/classnames.ts
 delete mode 100644 packages/sheets-drawing-ui/src/views/sheet-image-panel/index.module.less
 delete mode 100644 packages/sheets-drawing-ui/src/views/upload-loading/UploadLoading.tsx
 delete mode 100644 packages/sheets-drawing-ui/src/views/upload-loading/index.module.less

diff --git a/packages-experimental/debugger/src/commands/operations/message.operation.ts b/packages-experimental/debugger/src/commands/operations/message.operation.ts
index 67cb53666a..8b04f1a3e9 100644
--- a/packages-experimental/debugger/src/commands/operations/message.operation.ts
+++ b/packages-experimental/debugger/src/commands/operations/message.operation.ts
@@ -22,8 +22,19 @@ import { IMessageService } from '@univerjs/ui';
 export const MessageOperation: ICommand = {
     id: 'debugger.operation.message',
     type: CommandType.OPERATION,
-    handler: async (accessor: IAccessor) => {
+    handler: async (accessor: IAccessor, params: { value: string }) => {
         const messageService = accessor.get(IMessageService);
+
+        if (params.value === 'loading') {
+            messageService.show({
+                type: MessageType.Loading,
+                content: 'Loading message',
+                duration: 3000,
+            });
+
+            return true;
+        }
+
         messageService.show({
             type: MessageType.Success,
             content: 'Demo message',
diff --git a/packages-experimental/debugger/src/controllers/menu.ts b/packages-experimental/debugger/src/controllers/menu.ts
index fa3c0c7587..e02edec9fb 100644
--- a/packages-experimental/debugger/src/controllers/menu.ts
+++ b/packages-experimental/debugger/src/controllers/menu.ts
@@ -171,7 +171,7 @@ export function ConfirmMenuItemFactory(): IMenuSelectorItem {
     };
 }
 
-export function MessageMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
+export function MessageMenuItemFactory(): IMenuSelectorItem {
     return {
         id: MessageOperation.id,
         title: 'Message',
@@ -182,6 +182,10 @@ export function MessageMenuItemFactory(accessor: IAccessor): IMenuSelectorItem {
                 label: 'Open message',
                 value: '',
             },
+            {
+                label: 'Open loading message',
+                value: 'loading',
+            },
         ],
     };
 }
diff --git a/packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingPanel.tsx b/packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingPanel.tsx
index 74eef25535..4172da76ac 100644
--- a/packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingPanel.tsx
+++ b/packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingPanel.tsx
@@ -18,10 +18,9 @@ import type { IDrawingParam } from '@univerjs/core';
 import { IDrawingManagerService } from '@univerjs/drawing';
 import { DrawingCommonPanel } from '@univerjs/drawing-ui';
 import { useDependency } from '@univerjs/ui';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DocDrawingPosition } from './DocDrawingPosition';
 import { DocDrawingTextWrap } from './DocDrawingTextWrap';
-import styles from './index.module.less';
 
 export const DocDrawingPanel = () => {
     const drawingManagerService = useDependency(IDrawingManagerService);
@@ -37,11 +36,10 @@ export const DocDrawingPanel = () => {
         return () => {
             focusDispose.unsubscribe();
         };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return !!drawings?.length && (
-        <div className={styles.imageCommonPanel}>
+        <div className="univer-p-2 univer-text-center univer-text-sm">
             <DrawingCommonPanel drawings={drawings} hasAlign={false} hasCropper={false} hasGroup={false} hasTransform={false} />
             <DocDrawingTextWrap drawings={drawings} />
             <DocDrawingPosition drawings={drawings} />
diff --git a/packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingPosition.tsx b/packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingPosition.tsx
index f0e995bb20..d9affba6b4 100644
--- a/packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingPosition.tsx
+++ b/packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingPosition.tsx
@@ -18,7 +18,7 @@ import type { ICommandInfo, IDrawingParam, IObjectPositionH, IObjectPositionV, N
 import type { IDocDrawing } from '@univerjs/docs-drawing';
 import type { IDocumentSkeletonDrawing } from '@univerjs/engine-render';
 import { DocumentFlavor, ICommandService, IUniverInstanceService, LocaleService, ObjectRelativeFromH, ObjectRelativeFromV, PositionedObjectLayoutType } from '@univerjs/core';
-import { Checkbox, clsx, InputNumber, Select } from '@univerjs/design';
+import { Checkbox, InputNumber, Select } from '@univerjs/design';
 import { DocSkeletonManagerService, RichTextEditingMutation } from '@univerjs/docs';
 import { DocSelectionRenderService } from '@univerjs/docs-ui';
 import { IDrawingManagerService } from '@univerjs/drawing';
@@ -26,7 +26,6 @@ import { IRenderManagerService } from '@univerjs/engine-render';
 import { useDependency } from '@univerjs/ui';
 import { useEffect, useState } from 'react';
 import { UpdateDrawingDocTransformCommand } from '../../commands/commands/update-doc-drawing.command';
-import styles from './index.module.less';
 
 const MIN_OFFSET = -1000;
 const MAX_OFFSET = 1000;
@@ -360,28 +359,55 @@ export const DocDrawingPosition = (props: IDocDrawingPositionProps) => {
     }, []);
 
     return (
-        <div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: showPanel ? 'block' : 'none' }}>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
+        <div
+            className={`
+              univer-relative univer-mt-5 univer-w-full univer-border-t univer-border-solid univer-border-gray-200
+            `}
+            style={{ display: showPanel ? 'block' : 'none' }}
+        >
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className="univer-flex univer-items-center univer-gap-1 univer-text-gray-400">
                     <div>{localeService.t('image-position.title')}</div>
                 </div>
             </div>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle)}>
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className="univer-flex univer-items-center univer-gap-1 univer-text-black">
                     <div>{localeService.t('image-position.horizontal')}</div>
                 </div>
             </div>
 
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className="univer-flex univer-items-center univer-gap-1 univer-text-gray-400">
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 {localeService.t('image-position.absolutePosition')}
                             </div>
                         </div>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 <InputNumber
                                     min={MIN_OFFSET}
                                     max={MAX_OFFSET}
@@ -394,21 +420,30 @@ export const DocDrawingPosition = (props: IDocDrawingPositionProps) => {
                                             posOffset: val as number,
                                         });
                                     }}
-                                    className={styles.imageCommonPanelInput}
                                 />
                             </div>
                         </div>
                     </label>
                 </div>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+                <div className="univer-flex univer-items-center univer-gap-1">
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 {localeService.t('image-position.toTheRightOf')}
                             </div>
                         </div>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 <Select
                                     value={String(hPosition.relativeFrom)}
                                     disabled={disabled}
@@ -421,22 +456,40 @@ export const DocDrawingPosition = (props: IDocDrawingPositionProps) => {
                 </div>
             </div>
 
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle)}>
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className="univer-flex univer-items-center univer-gap-1 univer-text-black">
                     <div>{localeService.t('image-position.vertical')}</div>
                 </div>
             </div>
 
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className="univer-flex univer-items-center univer-gap-1">
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 {localeService.t('image-position.absolutePosition')}
                             </div>
                         </div>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 <InputNumber
                                     min={MIN_OFFSET}
                                     max={MAX_OFFSET}
@@ -449,21 +502,30 @@ export const DocDrawingPosition = (props: IDocDrawingPositionProps) => {
                                             posOffset: val as number,
                                         });
                                     }}
-                                    className={styles.imageCommonPanelInput}
                                 />
                             </div>
                         </div>
                     </label>
                 </div>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+                <div className="univer-flex univer-items-center univer-gap-1">
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 {localeService.t('image-position.bellow')}
                             </div>
                         </div>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 <Select
                                     disabled={disabled}
                                     value={String(vPosition.relativeFrom)}
@@ -476,14 +538,23 @@ export const DocDrawingPosition = (props: IDocDrawingPositionProps) => {
                 </div>
             </div>
 
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle)}>
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className="univer-flex univer-items-center univer-gap-1 univer-text-black">
                     <div>{localeService.t('image-position.options')}</div>
                 </div>
             </div>
 
-            <div className={styles.imageCommonPanelRow} style={{ marginBottom: '50px' }}>
-                <div className={styles.imageCommonPanelColumn}>
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+                style={{ marginBottom: '50px' }}
+            >
+                <div className="univer-flex univer-items-center univer-gap-1">
                     <Checkbox disabled={disabled} checked={followTextMove} onChange={handleFollowTextMoveCheck}>{localeService.t('image-position.moveObjectWithText')}</Checkbox>
                 </div>
             </div>
diff --git a/packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingTextWrap.tsx b/packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingTextWrap.tsx
index 15bdda0293..d24e89f108 100644
--- a/packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingTextWrap.tsx
+++ b/packages/docs-drawing-ui/src/views/doc-image-panel/DocDrawingTextWrap.tsx
@@ -24,7 +24,6 @@ import { IRenderManagerService } from '@univerjs/engine-render';
 import { useDependency } from '@univerjs/ui';
 import { useEffect, useState } from 'react';
 import { TextWrappingStyle, UpdateDocDrawingDistanceCommand, UpdateDocDrawingWrappingStyleCommand, UpdateDocDrawingWrapTextCommand } from '../../commands/commands/update-doc-drawing.command';
-import styles from './index.module.less';
 
 const MIN_MARGIN = 0;
 const MAX_MARGIN = 100;
@@ -263,19 +262,36 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
     }, []);
 
     return (
-        <div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: showPanel ? 'block' : 'none' }}>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
+        <div
+            className={`
+              univer-relative univer-mt-5 univer-w-full univer-border-t univer-border-solid univer-border-gray-200
+            `}
+            style={{ display: showPanel ? 'block' : 'none' }}
+        >
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className={clsx('univer-flex univer-items-center univer-gap-1 univer-text-gray-600')}>
                     <div>{localeService.t('image-text-wrap.title')}</div>
                 </div>
             </div>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle)}>
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className={clsx('univer-flex univer-items-center univer-gap-1 univer-text-black')}>
                     <div>{localeService.t('image-text-wrap.wrappingStyle')}</div>
                 </div>
             </div>
-            <div className={clsx(styles.imageCommonPanelRow)}>
-                <div className={clsx(styles.imageCommonPanelColumn)}>
+            <div
+                className={clsx(`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `)}
+            >
+                <div className={clsx('univer-flex univer-items-center univer-gap-1')}>
                     <RadioGroup value={wrappingStyle} onChange={handleWrappingStyleChange} direction="vertical">
                         <Radio value={TextWrappingStyle.INLINE}>{localeService.t('image-text-wrap.inline')}</Radio>
                         <Radio value={TextWrappingStyle.WRAP_SQUARE}>{localeService.t('image-text-wrap.square')}</Radio>
@@ -286,13 +302,21 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
                 </div>
             </div>
 
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle)}>
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className={clsx('univer-flex univer-items-center univer-gap-1 univer-text-black')}>
                     <div>{localeService.t('image-text-wrap.wrapText')}</div>
                 </div>
             </div>
-            <div className={clsx(styles.imageCommonPanelRow)}>
-                <div className={clsx(styles.imageCommonPanelColumn)}>
+            <div
+                className={clsx(`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `)}
+            >
+                <div className={clsx('univer-flex univer-items-center univer-gap-1')}>
                     <RadioGroup disabled={disableWrapText} value={wrapText} onChange={handleWrapTextChange} direction="horizontal">
                         <Radio value={WrapTextType.BOTH_SIDES}>{localeService.t('image-text-wrap.bothSide')}</Radio>
                         <Radio value={WrapTextType.LEFT}>{localeService.t('image-text-wrap.leftOnly')}</Radio>
@@ -301,22 +325,40 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
                 </div>
             </div>
 
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSubtitle)}>
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className={clsx('univer-flex univer-items-center univer-gap-1 univer-text-black')}>
                     <div>{localeService.t('image-text-wrap.distanceFromText')}</div>
                 </div>
             </div>
 
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className={clsx('univer-flex univer-items-center univer-gap-1')}>
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 {localeService.t('image-text-wrap.top')}
                             </div>
                         </div>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 <InputNumber
                                     min={MIN_MARGIN}
                                     max={MAX_MARGIN}
@@ -324,21 +366,30 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
                                     precision={1}
                                     value={distToText.distT}
                                     onChange={(val) => { handleDistToTextChange(val, 'distT'); }}
-                                    className={styles.imageCommonPanelInput}
                                 />
                             </div>
                         </div>
                     </label>
                 </div>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+                <div className={clsx('univer-flex univer-items-center univer-gap-1')}>
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 {localeService.t('image-text-wrap.left')}
                             </div>
                         </div>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 <InputNumber
                                     min={MIN_MARGIN}
                                     max={MAX_MARGIN}
@@ -346,23 +397,36 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
                                     precision={1}
                                     value={distToText.distL}
                                     onChange={(val) => { handleDistToTextChange(val, 'distL'); }}
-                                    className={styles.imageCommonPanelInput}
                                 />
                             </div>
                         </div>
                     </label>
                 </div>
             </div>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className={clsx('univer-flex univer-items-center univer-gap-1')}>
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 {localeService.t('image-text-wrap.bottom')}
                             </div>
                         </div>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 <InputNumber
                                     min={MIN_MARGIN}
                                     max={MAX_MARGIN}
@@ -370,21 +434,30 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
                                     precision={1}
                                     value={distToText.distB}
                                     onChange={(val) => { handleDistToTextChange(val, 'distB'); }}
-                                    className={styles.imageCommonPanelInput}
                                 />
                             </div>
                         </div>
                     </label>
                 </div>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+                <div className={clsx('univer-flex univer-items-center univer-gap-1')}>
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 {localeService.t('image-text-wrap.right')}
                             </div>
                         </div>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div
+                            className={`
+                              univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start
+                              univer-justify-start
+                            `}
+                        >
+                            <div className="univer-flex univer-items-center univer-gap-1">
                                 <InputNumber
                                     min={MIN_MARGIN}
                                     max={MAX_MARGIN}
@@ -392,7 +465,6 @@ export const DocDrawingTextWrap = (props: IDocDrawingTextWrapProps) => {
                                     precision={1}
                                     value={distToText.distR}
                                     onChange={(val) => { handleDistToTextChange(val, 'distR'); }}
-                                    className={styles.imageCommonPanelInput}
                                 />
                             </div>
                         </div>
diff --git a/packages/docs-drawing-ui/src/views/doc-image-panel/index.module.less b/packages/docs-drawing-ui/src/views/doc-image-panel/index.module.less
deleted file mode 100644
index 38282a2ec1..0000000000
--- a/packages/docs-drawing-ui/src/views/doc-image-panel/index.module.less
+++ /dev/null
@@ -1,14 +0,0 @@
-@import '@univerjs/drawing-ui/src/views/panel/index.module.less';
-
-.sheet-image {
-    &-menu {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        text-align: center;
-
-        &-input {
-            display: none;
-        }
-    }
-}
diff --git a/packages/drawing-ui/src/views/panel/DrawingAlign.tsx b/packages/drawing-ui/src/views/panel/DrawingAlign.tsx
index 945dab685c..2392a120b4 100644
--- a/packages/drawing-ui/src/views/panel/DrawingAlign.tsx
+++ b/packages/drawing-ui/src/views/panel/DrawingAlign.tsx
@@ -16,11 +16,10 @@
 
 import type { IDrawingParam } from '@univerjs/core';
 import { ICommandService, LocaleService } from '@univerjs/core';
-import { clsx, Select } from '@univerjs/design';
+import { Select } from '@univerjs/design';
 import { useDependency } from '@univerjs/ui';
 import { useState } from 'react';
 import { AlignType, SetDrawingAlignOperation } from '../../commands/operations/drawing-align.operation';
-import styles from './index.module.less';
 
 export interface IDrawingAlignProps {
     drawings: IDrawingParam[];
@@ -97,14 +96,28 @@ export const DrawingAlign = (props: IDrawingAlignProps) => {
     };
 
     return (
-        <div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: gridDisplay(alignShow) }}>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
+        <div
+            className={`
+              univer-relative univer-w-full univer-border-l-0 univer-border-r-0 univer-border-t univer-border-solid
+              univer-border-gray-200
+            `}
+            style={{ display: gridDisplay(alignShow) }}
+        >
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className="univer-w-full univer-text-gray-900">
                     <div>{localeService.t('image-panel.align.title')}</div>
                 </div>
             </div>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn)}>
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className="univer-w-full univer-text-gray-900">
                     <Select value={alignValue} options={alignOptions} onChange={handleAlignChange} />
                 </div>
             </div>
diff --git a/packages/drawing-ui/src/views/panel/DrawingArrange.tsx b/packages/drawing-ui/src/views/panel/DrawingArrange.tsx
index 82dc00e6ee..1b990533de 100644
--- a/packages/drawing-ui/src/views/panel/DrawingArrange.tsx
+++ b/packages/drawing-ui/src/views/panel/DrawingArrange.tsx
@@ -16,12 +16,12 @@
 
 import type { IDrawingParam } from '@univerjs/core';
 import { ArrangeTypeEnum, LocaleService } from '@univerjs/core';
-import { Button, clsx } from '@univerjs/design';
+import { Button } from '@univerjs/design';
 import { IDrawingManagerService } from '@univerjs/drawing';
 import { BottomSingle, MoveDownSingle, MoveUpSingle, TopmostSingle } from '@univerjs/icons';
 import { useDependency } from '@univerjs/ui';
 import { useEffect, useState } from 'react';
-import styles from './index.module.less';
+import { columnTitleClassName, inlineClassName, rowClassName } from '../utils/classnames';
 
 export interface IDrawingArrangeProps {
     arrangeShow: boolean;
@@ -51,50 +51,36 @@ export const DrawingArrange = (props: IDrawingArrangeProps) => {
     }, []);
 
     const onArrangeBtnClick = (arrangeType: ArrangeTypeEnum) => {
-        // commandService.executeCommand(SetDrawingArrangeCommand.id, {
-        //     unitId: drawings[0].unitId,
-        //     subUnitId: drawings[0].subUnitId,
-        //     drawingIds: drawings.map((drawing) => drawing.drawingId),
-        //     arrangeType,
-        // });
-
         const unitId = drawings[0].unitId;
         const subUnitId = drawings[0].subUnitId;
         const drawingIds = drawings.map((drawing) => drawing.drawingId);
 
         drawingManagerService.featurePluginOrderUpdateNotification({ unitId, subUnitId, drawingIds, arrangeType });
-
-        // if (arrangeType === ArrangeType.forward) {
-        //     drawingManagerService.forwardDrawings(unitId, subUnitId, drawingIds);
-        // } else if (arrangeType === ArrangeType.backward) {
-        //     drawingManagerService.backwardDrawing(unitId, subUnitId, drawingIds);
-        // } else if (arrangeType === ArrangeType.front) {
-        //     drawingManagerService.frontDrawing(unitId, subUnitId, drawingIds);
-        // } else if (arrangeType === ArrangeType.back) {
-        //     drawingManagerService.backDrawing(unitId, subUnitId, drawingIds);
-        // }
     };
 
     return (
-        <div className={styles.imageCommonPanelGrid} style={{ display: gridDisplay(arrangeShow) }}>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
+        <div
+            className="univer-relative univer-mt-5 univer-w-full"
+            style={{ display: gridDisplay(arrangeShow) }}
+        >
+            <div className={rowClassName}>
+                <div className={columnTitleClassName}>
                     <div>{localeService.t('image-panel.arrange.title')}</div>
                 </div>
             </div>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+            <div className={rowClassName}>
+                <div className="univer-w-1/2">
                     <Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.forward); }}>
-                        <span className={styles.imageCommonPanelInline}>
+                        <span className={inlineClassName}>
                             <MoveUpSingle />
                             {localeService.t('image-panel.arrange.forward')}
                         </span>
 
                     </Button>
                 </div>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+                <div className="univer-w-1/2">
                     <Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.backward); }}>
-                        <span className={styles.imageCommonPanelInline}>
+                        <span className={inlineClassName}>
                             <MoveDownSingle />
                             {localeService.t('image-panel.arrange.backward')}
                         </span>
@@ -102,18 +88,18 @@ export const DrawingArrange = (props: IDrawingArrangeProps) => {
                     </Button>
                 </div>
             </div>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+            <div className={rowClassName}>
+                <div className="univer-w-1/2">
                     <Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.front); }}>
-                        <span className={styles.imageCommonPanelInline}>
+                        <span className={inlineClassName}>
                             <TopmostSingle />
                             {localeService.t('image-panel.arrange.front')}
                         </span>
                     </Button>
                 </div>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+                <div className="univer-w-1/2">
                     <Button onClick={() => { onArrangeBtnClick(ArrangeTypeEnum.back); }}>
-                        <span className={styles.imageCommonPanelInline}>
+                        <span className={inlineClassName}>
                             <BottomSingle />
                             {localeService.t('image-panel.arrange.back')}
                         </span>
diff --git a/packages/drawing-ui/src/views/panel/DrawingCommonPanel.tsx b/packages/drawing-ui/src/views/panel/DrawingCommonPanel.tsx
index 3ae4685a0b..fb95a77705 100644
--- a/packages/drawing-ui/src/views/panel/DrawingCommonPanel.tsx
+++ b/packages/drawing-ui/src/views/panel/DrawingCommonPanel.tsx
@@ -128,9 +128,9 @@ export const DrawingCommonPanel = (props: IDrawingCommonPanelProps) => {
             clearControlSub.unsubscribe();
             focusSub.unsubscribe();
         };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    // TODO@siam-ese: use the new Form component to refactor this dialog panel.
     return (
         <>
             <div style={{ display: nullShow === true ? 'block' : 'none', height: '100%' }}>
diff --git a/packages/drawing-ui/src/views/panel/DrawingGroup.tsx b/packages/drawing-ui/src/views/panel/DrawingGroup.tsx
index 855dda09e7..62bce424de 100644
--- a/packages/drawing-ui/src/views/panel/DrawingGroup.tsx
+++ b/packages/drawing-ui/src/views/panel/DrawingGroup.tsx
@@ -24,8 +24,7 @@ import { GroupSingle, UngroupSingle } from '@univerjs/icons';
 import { useDependency } from '@univerjs/ui';
 import { useEffect, useState } from 'react';
 import { getUpdateParams } from '../../utils/get-update-params';
-
-import styles from './index.module.less';
+import { columnTitleClassName, inlineClassName, rowClassName } from '../utils/classnames';
 
 export interface IDrawingGroupProps {
     drawings: IDrawingParam[];
@@ -187,24 +186,24 @@ export const DrawingGroup = (props: IDrawingGroupProps) => {
     }, []);
 
     return (
-        <div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: gridDisplay(hasGroup === true ? groupShow : false) }}>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
+        <div className="univer-relative univer-mt-5 univer-w-full" style={{ display: gridDisplay(hasGroup === true ? groupShow : false) }}>
+            <div className={rowClassName}>
+                <div className={columnTitleClassName}>
                     <div>{localeService.t('image-panel.group.title')}</div>
                 </div>
             </div>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2, styles.imageCommonPanelColumnCenter)}>
+            <div className={rowClassName}>
+                <div className={clsx(inlineClassName, 'univer-justify-center')}>
                     <Button style={{ display: gridDisplay(groupBtnShow) }} onClick={onGroupBtnClick}>
-                        <span className={styles.imageCommonPanelInline}>
+                        <span className="univer-flex univer-items-center univer-gap-1">
                             <GroupSingle />
                             {localeService.t('image-panel.group.group')}
                         </span>
                     </Button>
                 </div>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2, styles.imageCommonPanelColumnCenter)}>
+                <div className={clsx(inlineClassName, 'univer-justify-center')}>
                     <Button style={{ display: gridDisplay(ungroupBtnShow) }} onClick={onUngroupBtnClick}>
-                        <span className={styles.imageCommonPanelInline}>
+                        <span className="univer-flex univer-items-center univer-gap-1">
                             <UngroupSingle />
                             {localeService.t('image-panel.group.unGroup')}
                         </span>
diff --git a/packages/drawing-ui/src/views/panel/DrawingTransform.tsx b/packages/drawing-ui/src/views/panel/DrawingTransform.tsx
index 68b4544f6a..1bbbfa67db 100644
--- a/packages/drawing-ui/src/views/panel/DrawingTransform.tsx
+++ b/packages/drawing-ui/src/views/panel/DrawingTransform.tsx
@@ -24,7 +24,7 @@ import { useDependency } from '@univerjs/ui';
 import { useEffect, useState } from 'react';
 import { MIN_DRAWING_HEIGHT_LIMIT, MIN_DRAWING_WIDTH_LIMIT, RANGE_DRAWING_ROTATION_LIMIT } from '../../utils/config';
 import { getUpdateParams } from '../../utils/get-update-params';
-import styles from './index.module.less';
+import { columnTitleClassName, rowClassName } from '../utils/classnames';
 
 export interface IDrawingTransformProps {
     transformShow: boolean;
@@ -367,95 +367,101 @@ export const DrawingTransform = (props: IDrawingTransformProps) => {
     };
 
     return (
-        <div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: gridDisplay(transformShow) }}>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
+        <div
+            className={`
+              univer-relative univer-mt-5 univer-w-full univer-border-b-0 univer-border-l-0 univer-border-r-0
+              univer-border-t univer-border-solid univer-border-t-gray-200
+            `}
+            style={{ display: gridDisplay(transformShow) }}
+        >
+            <div className={rowClassName}>
+                <div className={clsx(columnTitleClassName)}>
                     <div>{localeService.t('image-panel.transform.title')}</div>
                 </div>
             </div>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan3)}>
+            <div className={rowClassName}>
+                <div className={clsx(columnTitleClassName)}>
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div className={rowClassName}>
+                            <div className={columnTitleClassName}>
                                 {localeService.t('image-panel.transform.width')}
                             </div>
                         </div>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
-                                <InputNumber precision={1} value={width} onChange={(val) => { handleWidthChange(val); }} className={styles.imageCommonPanelInput} />
+                        <div className={rowClassName}>
+                            <div className={columnTitleClassName}>
+                                <InputNumber precision={1} value={width} onChange={(val) => { handleWidthChange(val); }} />
                             </div>
                         </div>
                     </label>
                 </div>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan3)}>
+                <div className={clsx(columnTitleClassName)}>
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div className={rowClassName}>
+                            <div className={columnTitleClassName}>
                                 {localeService.t('image-panel.transform.height')}
                             </div>
                         </div>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
-                                <InputNumber precision={1} value={height} onChange={(val) => { handleHeightChange(val); }} className={styles.imageCommonPanelInput} />
+                        <div className={rowClassName}>
+                            <div className={columnTitleClassName}>
+                                <InputNumber precision={1} value={height} onChange={(val) => { handleHeightChange(val); }} />
                             </div>
                         </div>
                     </label>
                 </div>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan3)}>
+                <div className={clsx(columnTitleClassName)}>
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div className={rowClassName}>
+                            <div className={columnTitleClassName}>
                                 {localeService.t('image-panel.transform.lock')}
                             </div>
                         </div>
-                        <div className={clsx(styles.imageCommonPanelRow, styles.imageCommonPanelRowVertical)}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div className={clsx(rowClassName, 'univer-h-9 univer-items-center univer-justify-center')}>
+                            <div className={columnTitleClassName}>
                                 <Checkbox checked={lockRatio} onChange={handleLockRatioChange} />
                             </div>
                         </div>
                     </label>
                 </div>
             </div>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan3)}>
+            <div className={rowClassName}>
+                <div className={clsx(columnTitleClassName)}>
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div className={rowClassName}>
+                            <div className={columnTitleClassName}>
                                 {localeService.t('image-panel.transform.x')}
                             </div>
                         </div>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
-                                <InputNumber precision={1} value={xPosition} onChange={(val) => { handleXChange(val); }} className={styles.imageCommonPanelInput} />
+                        <div className={rowClassName}>
+                            <div className={columnTitleClassName}>
+                                <InputNumber precision={1} value={xPosition} onChange={(val) => { handleXChange(val); }} />
                             </div>
                         </div>
                     </label>
                 </div>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan3)}>
+                <div className={clsx(columnTitleClassName)}>
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div className={rowClassName}>
+                            <div className={columnTitleClassName}>
                                 {localeService.t('image-panel.transform.y')}
                             </div>
                         </div>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
-                                <InputNumber precision={1} value={yPosition} onChange={(val) => { handleYChange(val); }} className={styles.imageCommonPanelInput} />
+                        <div className={rowClassName}>
+                            <div className={columnTitleClassName}>
+                                <InputNumber precision={1} value={yPosition} onChange={(val) => { handleYChange(val); }} />
                             </div>
                         </div>
                     </label>
                 </div>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan3)}>
+                <div className={clsx(columnTitleClassName)}>
                     <label>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
+                        <div className={rowClassName}>
+                            <div className={columnTitleClassName}>
                                 {localeService.t('image-panel.transform.rotate')}
                             </div>
                         </div>
-                        <div className={styles.imageCommonPanelRow}>
-                            <div className={styles.imageCommonPanelColumn}>
-                                <InputNumber precision={1} value={rotation} onChange={handleRotationChange} className={styles.imageCommonPanelInput} />
+                        <div className={rowClassName}>
+                            <div className={columnTitleClassName}>
+                                <InputNumber precision={1} value={rotation} onChange={handleRotationChange} />
                             </div>
                         </div>
                     </label>
diff --git a/packages/drawing-ui/src/views/panel/ImageCropper.tsx b/packages/drawing-ui/src/views/panel/ImageCropper.tsx
index ef3c020d99..4aaa99615c 100644
--- a/packages/drawing-ui/src/views/panel/ImageCropper.tsx
+++ b/packages/drawing-ui/src/views/panel/ImageCropper.tsx
@@ -16,12 +16,12 @@
 
 import type { IDrawingParam } from '@univerjs/core';
 import { ICommandService, LocaleService } from '@univerjs/core';
-import { Button, clsx, Select } from '@univerjs/design';
+import { Button, Select } from '@univerjs/design';
 import { CreateCopySingle } from '@univerjs/icons';
 import { useDependency } from '@univerjs/ui';
 import { useEffect, useRef, useState } from 'react';
 import { AutoImageCropOperation, CloseImageCropOperation, CropType } from '../../commands/operations/image-crop.operation';
-import styles from './index.module.less';
+import { columnTitleClassName, inlineClassName, rowClassName } from '../utils/classnames';
 
 export interface IImageCropperProps {
     drawings: IDrawingParam[];
@@ -123,22 +123,28 @@ export const ImageCropper = (props: IImageCropperProps) => {
     };
 
     return (
-        <div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: gridDisplay(cropperShow) }}>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
+        <div
+            className={`
+              univer-relative univer-mt-5 univer-w-full univer-border-b-0 univer-border-l-0 univer-border-r-0
+              univer-border-t univer-border-solid univer-border-t-gray-200
+            `}
+            style={{ display: gridDisplay(cropperShow) }}
+        >
+            <div className={rowClassName}>
+                <div className={columnTitleClassName}>
                     <div>{localeService.t('image-panel.crop.title')}</div>
                 </div>
             </div>
-            <div className={clsx(styles.imageCommonPanelRow, styles.imageCommonPanelRowVertical)}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+            <div className={rowClassName}>
+                <div className={inlineClassName}>
                     <Button onClick={() => { onCropperBtnClick(cropValue as CropType); }}>
-                        <span className={styles.imageCommonPanelInline}>
+                        <span className="univer-flex univer-items-center univer-gap-1">
                             <CreateCopySingle />
                             {localeService.t('image-panel.crop.start')}
                         </span>
                     </Button>
                 </div>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelSpan2)}>
+                <div className={inlineClassName}>
                     <Select value={cropValue} options={cropOptions} onChange={handleCropChange} />
                 </div>
             </div>
diff --git a/packages/drawing-ui/src/views/panel/index.module.less b/packages/drawing-ui/src/views/panel/index.module.less
deleted file mode 100644
index 6a9392c566..0000000000
--- a/packages/drawing-ui/src/views/panel/index.module.less
+++ /dev/null
@@ -1,67 +0,0 @@
-.image-common-panel {
-    text-align: center;
-    padding: var(--padding-sm);
-    font-size: var(--font-size-sm);
-    &-grid {
-        position: relative;
-        width: 100%;
-    }
-
-    &-border {
-        border-top: 1px solid rgb(var(--border-color));
-        margin-top: 20px;
-    }
-
-    &-title {
-        color: rgb(var(--text-color-secondary));
-        text-align: left;
-    }
-
-    &-subtitle {
-        color: rgb(var(--text-color-primary));
-        text-align: left;
-    }
-
-    &-row {
-        position: relative;
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        height: 100%;
-        margin-top: 10px;
-
-        &-vertical {
-            justify-content: center;
-            align-items: center;
-            height: 36px;
-        }
-    }
-
-    &-column {
-        width: 100%;
-
-        &-center {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-    }
-
-    &-inline {
-        display: flex;
-        align-items: center;
-        gap: var(--margin-xxs);
-    }
-
-    &-span2 {
-        width: 50%;
-    }
-
-    &-span3 {
-        width: 33.33333333%;
-    }
-
-    &-input {
-        width: 90%;
-    }
-}
diff --git a/packages/drawing-ui/src/views/utils/classnames.ts b/packages/drawing-ui/src/views/utils/classnames.ts
new file mode 100644
index 0000000000..314f5f3e55
--- /dev/null
+++ b/packages/drawing-ui/src/views/utils/classnames.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// TODO@siam-ese: these styles are widely used in drawing's components. They should be deprecated once the
+// Form component is completed.
+
+export const rowClassName = 'univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-between univer-gap-2 univer-flex-no-wrap';
+export const columnTitleClassName = 'univer-w-full univer-text-left univer-text-gray-400';
+export const inlineClassName = 'univer-flex univer-items-center univer-gap-1';
diff --git a/packages/sheets-drawing-ui/src/controllers/drawing-popup-menu.controller.ts b/packages/sheets-drawing-ui/src/controllers/drawing-popup-menu.controller.ts
index 670cdd38ec..5b94931b1b 100644
--- a/packages/sheets-drawing-ui/src/controllers/drawing-popup-menu.controller.ts
+++ b/packages/sheets-drawing-ui/src/controllers/drawing-popup-menu.controller.ts
@@ -15,31 +15,33 @@
  */
 
 import type { IDisposable, Nullable, Workbook } from '@univerjs/core';
+import type { ImageIoService } from '@univerjs/drawing';
 import type { BaseObject, Scene } from '@univerjs/engine-render';
 import type { ISheetFloatDom } from '@univerjs/sheets-drawing';
-import { DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, ICommandService, IContextService, Inject, Injector, IUniverInstanceService, RxDisposable, toDisposable, UniverInstanceType } from '@univerjs/core';
+import { DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, ICommandService, IContextService, IImageIoService, Inject, Injector, IUniverInstanceService, LocaleService, RxDisposable, UniverInstanceType } from '@univerjs/core';
+import { MessageType } from '@univerjs/design';
 import { IDrawingManagerService, SetDrawingSelectedOperation } from '@univerjs/drawing';
 import { COMPONENT_IMAGE_POPUP_MENU, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation } from '@univerjs/drawing-ui';
 import { IRenderManagerService } from '@univerjs/engine-render';
 import { SheetCanvasPopManagerService } from '@univerjs/sheets-ui';
-import { BuiltInUIPart, connectInjector, IUIPartsService } from '@univerjs/ui';
-
+import { IMessageService } from '@univerjs/ui';
 import { takeUntil } from 'rxjs';
 import { RemoveSheetDrawingCommand } from '../commands/commands/remove-sheet-drawing.command';
 import { EditSheetDrawingOperation } from '../commands/operations/edit-sheet-drawing.operation';
-import { UploadLoading } from '../views/upload-loading/UploadLoading';
 
 export class DrawingPopupMenuController extends RxDisposable {
     private _initImagePopupMenu = new Set<string>();
 
     constructor(
         @Inject(Injector) private _injector: Injector,
+        @Inject(LocaleService) private readonly _localeService: LocaleService,
         @IDrawingManagerService private readonly _drawingManagerService: IDrawingManagerService,
         @Inject(SheetCanvasPopManagerService) private readonly _canvasPopManagerService: SheetCanvasPopManagerService,
         @IRenderManagerService private readonly _renderManagerService: IRenderManagerService,
         @IUniverInstanceService private readonly _univerInstanceService: IUniverInstanceService,
+        @IMessageService private readonly _messageService: IMessageService,
         @IContextService private readonly _contextService: IContextService,
-        @Inject(IUIPartsService) private readonly _uiPartsService: IUIPartsService,
+        @IImageIoService private readonly _ioService: ImageIoService,
         @ICommandService private readonly _commandService: ICommandService
     ) {
         super();
@@ -52,10 +54,31 @@ export class DrawingPopupMenuController extends RxDisposable {
         this._univerInstanceService.getTypeOfUnitDisposed$<Workbook>(UniverInstanceType.UNIVER_SHEET).pipe(takeUntil(this.dispose$)).subscribe((workbook) => this._dispose(workbook));
         this._univerInstanceService.getAllUnitsForType<Workbook>(UniverInstanceType.UNIVER_SHEET).forEach((workbook) => this._create(workbook));
 
-        this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(UploadLoading, this._injector));
+        this._setupLoadingStatus();
+    }
+
+    private _setupLoadingStatus() {
+        const MESSAGE_ID = 'image-upload-loading';
+
+        let messageDisposable: IDisposable | undefined;
+        this.disposeWithMe(this._ioService.change$.subscribe((status) => {
+            if (status > 0 && !messageDisposable) {
+                messageDisposable = this._messageService.show({
+                    id: MESSAGE_ID,
+                    type: MessageType.Loading,
+                    content: `${this._localeService.t('uploadLoading.loading')}: ${status}`,
+                    duration: 0,
+                });
+            } else if (status === 0) {
+                messageDisposable?.dispose();
+                messageDisposable = undefined;
+            }
+        }));
     }
 
     private _dispose(workbook: Workbook) {
+        super.dispose();
+
         const unitId = workbook.getUnitId();
         this._renderManagerService.removeRender(unitId);
     }
@@ -93,52 +116,50 @@ export class DrawingPopupMenuController extends RxDisposable {
         if (!transformer) {
             return;
         }
+
         let singletonPopupDisposer: IDisposable;
-        this.disposeWithMe(
-            toDisposable(
-                transformer.createControl$.subscribe(() => {
-                    this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, true);
+        this.disposeWithMe(transformer.createControl$.subscribe(() => {
+            this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, true);
 
-                    if (this._hasCropObject(scene)) {
-                        return;
-                    }
+            if (this._hasCropObject(scene)) {
+                return;
+            }
 
-                    const selectedObjects = transformer.getSelectedObjectMap();
-                    if (selectedObjects.size > 1) {
-                        singletonPopupDisposer?.dispose();
-                        return;
-                    }
+            const selectedObjects = transformer.getSelectedObjectMap();
+            if (selectedObjects.size > 1) {
+                singletonPopupDisposer?.dispose();
+                return;
+            }
 
-                    const object = selectedObjects.values().next().value as Nullable<BaseObject>;
-                    if (!object) {
-                        return;
-                    }
+            const object = selectedObjects.values().next().value as Nullable<BaseObject>;
+            if (!object) {
+                return;
+            }
 
-                    const oKey = object.oKey;
-                    const drawingParam = this._drawingManagerService.getDrawingOKey(oKey);
-                    if (!drawingParam) {
-                        return;
-                    }
+            const oKey = object.oKey;
+            const drawingParam = this._drawingManagerService.getDrawingOKey(oKey);
+            if (!drawingParam) {
+                return;
+            }
 
-                    const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
+            const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
                     // drawingParam should be  ICanvasFloatDom, use for disable popup dialog
-                    const data = (drawingParam as ISheetFloatDom).data as Record<string, boolean>;
-                    if (data && data.disablePopup) {
-                        return;
-                    }
+            const data = (drawingParam as ISheetFloatDom).data as Record<string, boolean>;
+            if (data && data.disablePopup) {
+                return;
+            }
 
-                    singletonPopupDisposer?.dispose();
-                    const menus = this._canvasPopManagerService.getFeatureMenu(unitId, subUnitId, drawingId, drawingType);
-                    singletonPopupDisposer = this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(object, {
-                        componentKey: COMPONENT_IMAGE_POPUP_MENU,
-                        direction: 'horizontal',
-                        offset: [2, 0],
-                        extraProps: {
-                            menuItems: menus || this._getImageMenuItems(unitId, subUnitId, drawingId, drawingType),
-                        },
-                    }));
-                })
-            )
+            singletonPopupDisposer?.dispose();
+            const menus = this._canvasPopManagerService.getFeatureMenu(unitId, subUnitId, drawingId, drawingType);
+            singletonPopupDisposer = this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(object, {
+                componentKey: COMPONENT_IMAGE_POPUP_MENU,
+                direction: 'horizontal',
+                offset: [2, 0],
+                extraProps: {
+                    menuItems: menus || this._getImageMenuItems(unitId, subUnitId, drawingId, drawingType),
+                },
+            }));
+        })
         );
         this.disposeWithMe(
             transformer.clearControl$.subscribe(() => {
diff --git a/packages/sheets-drawing-ui/src/views/sheet-image-panel/SheetDrawingAnchor.tsx b/packages/sheets-drawing-ui/src/views/sheet-image-panel/SheetDrawingAnchor.tsx
index 6f36094cfe..6918906327 100644
--- a/packages/sheets-drawing-ui/src/views/sheet-image-panel/SheetDrawingAnchor.tsx
+++ b/packages/sheets-drawing-ui/src/views/sheet-image-panel/SheetDrawingAnchor.tsx
@@ -18,14 +18,13 @@ import type { IDrawingParam, Nullable } from '@univerjs/core';
 import type { BaseObject } from '@univerjs/engine-render';
 import type { ISheetDrawing } from '@univerjs/sheets-drawing';
 import { ICommandService, LocaleService } from '@univerjs/core';
-import { clsx, Radio, RadioGroup } from '@univerjs/design';
+import { Radio, RadioGroup } from '@univerjs/design';
 import { IDrawingManagerService } from '@univerjs/drawing';
 import { IRenderManagerService } from '@univerjs/engine-render';
 import { SheetDrawingAnchorType } from '@univerjs/sheets-drawing';
 import { useDependency } from '@univerjs/ui';
 import { useEffect, useState } from 'react';
 import { SetSheetDrawingCommand } from '../../commands/commands/set-sheet-drawing.command';
-import styles from './index.module.less';
 
 export interface ISheetDrawingAnchorProps {
     drawings: IDrawingParam[];
@@ -140,14 +139,28 @@ export const SheetDrawingAnchor = (props: ISheetDrawingAnchorProps) => {
     };
 
     return (
-        <div className={clsx(styles.imageCommonPanelGrid, styles.imageCommonPanelBorder)} style={{ display: gridDisplay(anchorShow) }}>
-            <div className={styles.imageCommonPanelRow}>
-                <div className={clsx(styles.imageCommonPanelColumn, styles.imageCommonPanelTitle)}>
+        <div
+            className={`
+              univer-relative univer-mt-5 univer-w-full univer-border-b-0 univer-border-l-0 univer-border-r-0
+              univer-border-t univer-border-solid univer-border-gray-200
+            `}
+            style={{ display: gridDisplay(anchorShow) }}
+        >
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className="univer-w-full univer-text-left univer-text-gray-400">
                     <div>{localeService.t('drawing-anchor.title')}</div>
                 </div>
             </div>
-            <div className={clsx(styles.imageCommonPanelRow)}>
-                <div className={clsx(styles.imageCommonPanelColumn)}>
+            <div
+                className={`
+                  univer-relative univer-mt-2.5 univer-flex univer-h-full univer-items-start univer-justify-start
+                `}
+            >
+                <div className="univer-flex univer-items-center univer-gap-1">
                     <RadioGroup value={value} onChange={handleChange} direction="vertical">
                         <Radio value={SheetDrawingAnchorType.Both}>{localeService.t('drawing-anchor.both')}</Radio>
                         <Radio value={SheetDrawingAnchorType.Position}>{localeService.t('drawing-anchor.position')}</Radio>
diff --git a/packages/sheets-drawing-ui/src/views/sheet-image-panel/SheetDrawingPanel.tsx b/packages/sheets-drawing-ui/src/views/sheet-image-panel/SheetDrawingPanel.tsx
index ca0fe631ec..ea487be273 100644
--- a/packages/sheets-drawing-ui/src/views/sheet-image-panel/SheetDrawingPanel.tsx
+++ b/packages/sheets-drawing-ui/src/views/sheet-image-panel/SheetDrawingPanel.tsx
@@ -18,8 +18,7 @@ import type { IDrawingParam } from '@univerjs/core';
 import { IDrawingManagerService } from '@univerjs/drawing';
 import { DrawingCommonPanel } from '@univerjs/drawing-ui';
 import { useDependency } from '@univerjs/ui';
-import React, { useEffect, useState } from 'react';
-import styles from './index.module.less';
+import { useEffect, useState } from 'react';
 import { SheetDrawingAnchor } from './SheetDrawingAnchor';
 
 export const SheetDrawingPanel = () => {
@@ -39,7 +38,7 @@ export const SheetDrawingPanel = () => {
     }, []);
 
     return !!drawings?.length && (
-        <div className={styles.imageCommonPanel}>
+        <div className="univer-p-2 univer-text-center univer-text-sm">
             <DrawingCommonPanel drawings={drawings} />
             <SheetDrawingAnchor drawings={drawings} />
         </div>
diff --git a/packages/sheets-drawing-ui/src/views/sheet-image-panel/index.module.less b/packages/sheets-drawing-ui/src/views/sheet-image-panel/index.module.less
deleted file mode 100644
index 38282a2ec1..0000000000
--- a/packages/sheets-drawing-ui/src/views/sheet-image-panel/index.module.less
+++ /dev/null
@@ -1,14 +0,0 @@
-@import '@univerjs/drawing-ui/src/views/panel/index.module.less';
-
-.sheet-image {
-    &-menu {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        text-align: center;
-
-        &-input {
-            display: none;
-        }
-    }
-}
diff --git a/packages/sheets-drawing-ui/src/views/upload-loading/UploadLoading.tsx b/packages/sheets-drawing-ui/src/views/upload-loading/UploadLoading.tsx
deleted file mode 100644
index a209dc2f9a..0000000000
--- a/packages/sheets-drawing-ui/src/views/upload-loading/UploadLoading.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright 2023-present DreamNum Co., Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { LocaleService } from '@univerjs/core';
-import { IImageIoService } from '@univerjs/drawing';
-import { useDependency } from '@univerjs/ui';
-import React, { useEffect } from 'react';
-
-import styles from './index.module.less';
-
-export const UploadLoading = () => {
-    const imageIoService = useDependency(IImageIoService);
-    const localeService = useDependency(LocaleService);
-
-    const [remain, setRemain] = React.useState(0);
-
-    useEffect(() => {
-        const sub = imageIoService.change$.subscribe((count) => {
-            setRemain(count);
-        });
-
-        return () => {
-            sub.unsubscribe();
-        };
-    }, [imageIoService]);
-
-    return (
-        <div style={{ display: remain > 0 ? 'block' : 'none' }} className={styles.uploadLoading}>
-            <div className={styles.uploadLoadingBody}>
-                <div className={styles.uploadLoadingBodyAnimation} />
-                <div className={styles.uploadLoadingBodyText}>{`${localeService.t('uploadLoading.loading')}: ${remain}` }</div>
-            </div>
-        </div>
-    );
-};
diff --git a/packages/sheets-drawing-ui/src/views/upload-loading/index.module.less b/packages/sheets-drawing-ui/src/views/upload-loading/index.module.less
deleted file mode 100644
index e615b3663d..0000000000
--- a/packages/sheets-drawing-ui/src/views/upload-loading/index.module.less
+++ /dev/null
@@ -1,47 +0,0 @@
-.upload-loading {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    text-align: center;
-    background-color: rgba(var(--color-black), 0.5);
-    z-index: 1000;
-    user-select: none;
-
-    &-body {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background-color: rgb(var(--color-white));
-        padding: 20px 40px;
-        display: flex;
-        align-items: center;
-        justify-items: center;
-        border-radius: var(--border-radius-lg);
-
-        &-animation {
-            width: 30px;
-            height: 30px;
-            border: 2px solid rgb(var(--color-black));
-            border-top-color: transparent;
-            border-radius: 100%;
-
-            animation: UniverCircleAnimation infinite 0.75s linear;
-        }
-
-        &-text {
-            font-size: var(--font-size-xs);
-            color: var(--color-black);
-            padding: 10px;
-        }
-    }
-}
-
-@keyframes UniverCircleAnimation {
-    0% {
-        transform: rotate(0);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
diff --git a/packages/ui/src/services/message/__testing__/mock-message.service.ts b/packages/ui/src/services/message/__testing__/mock-message.service.ts
index c783528793..a332f040c3 100644
--- a/packages/ui/src/services/message/__testing__/mock-message.service.ts
+++ b/packages/ui/src/services/message/__testing__/mock-message.service.ts
@@ -28,6 +28,14 @@ export class MockMessageService implements IMessageService {
         return toDisposable(() => { /* empty */ });
     }
 
+    remove(_id: string): void {
+        // empty
+    }
+
+    removeAll(): void {
+        // empty
+    }
+
     setContainer(): void {
         // empty
     }
diff --git a/packages/ui/src/services/message/desktop-message.service.ts b/packages/ui/src/services/message/desktop-message.service.ts
index 6508d79e07..398f1149da 100644
--- a/packages/ui/src/services/message/desktop-message.service.ts
+++ b/packages/ui/src/services/message/desktop-message.service.ts
@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
+import type { IDisposable } from '@univerjs/core';
 import type { IMessageProps } from '@univerjs/design';
 import type { IMessageService } from './message.service';
-import { Disposable, Inject, Injector } from '@univerjs/core';
+import { Disposable, Inject, Injector, toDisposable } from '@univerjs/core';
 import { message, Messager, removeMessage } from '@univerjs/design';
 import { connectInjector } from '../../utils/di';
 import { BuiltInUIPart, IUIPartsService } from '../parts/parts.service';
@@ -41,7 +42,21 @@ export class DesktopMessageService extends Disposable implements IMessageService
         removeMessage();
     }
 
-    show(options: IMessageProps) {
-        message(options);
+    show(options: IMessageProps): IDisposable {
+        let op = options;
+        if (typeof options.id === 'undefined') {
+            op = Object.assign({}, options, { id: `message-${Date.now()}` });
+        }
+
+        message(op);
+        return toDisposable(() => removeMessage(op.id));
+    }
+
+    remove(id: string): void {
+        removeMessage(id);
+    }
+
+    removeAll(): void {
+        removeMessage();
     }
 }
diff --git a/packages/ui/src/services/message/message.service.ts b/packages/ui/src/services/message/message.service.ts
index fa3323590b..a5a094c091 100644
--- a/packages/ui/src/services/message/message.service.ts
+++ b/packages/ui/src/services/message/message.service.ts
@@ -14,11 +14,14 @@
  * limitations under the License.
  */
 
+import type { IDisposable } from '@univerjs/core';
 import type { IMessageProps } from '@univerjs/design';
 import { createIdentifier } from '@univerjs/core';
 
 export const IMessageService = createIdentifier<IMessageService>('ui.message.service');
 
 export interface IMessageService {
-    show(options: IMessageProps): void;
+    show(options: IMessageProps): IDisposable;
+    remove(id: string): void;
+    removeAll(): void;
 }
diff --git a/tests/formula-integration/src/__testing__/util.ts b/tests/formula-integration/src/__testing__/util.ts
index 1d533d1a8b..cd28529211 100644
--- a/tests/formula-integration/src/__testing__/util.ts
+++ b/tests/formula-integration/src/__testing__/util.ts
@@ -34,9 +34,6 @@ export function getTestFilePath() {
     return name.replace(/[ >]/g, '-').toLowerCase();
 }
 
-/**
- *
- */
 export async function expectCalculationResultMatchesSnapshot() {
     const testBed = createFormulaTestBed();
     const snapshotRootDir = path.join(import.meta.dirname, '../__snapshots__');
@@ -49,7 +46,7 @@ export async function expectCalculationResultMatchesSnapshot() {
     const testSnapshotRaw = fs.readFileSync(testSnapshotPath, 'utf-8');
     const testSnapshot = JSON.parse(testSnapshotRaw) as IWorkbookData;
 
-    const workbook = testBed.api.createUniverSheet(testSnapshot);
+    const workbook = testBed.api.createWorkbook(testSnapshot);
     const formula = testBed.api.getFormula();
     await formula.onCalculationEnd();