From d891f1614beee3cecd46da54852e40159bf3a97a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E7=86=B1?= <sonne@asaki.me>
Date: Mon, 26 May 2025 14:36:26 +0800
Subject: [PATCH] feat: update SheetTableThemePanel for improved theme handling
 and UI responsiveness (#5267)

---
 common/shared/vite/cleanup-pkg-plugin.ts      |   2 +-
 examples/src/sheets-multi/main.tsx            |   2 +-
 .../debugger/src/components/Image.tsx         |   2 +-
 .../debugger/src/components/RangeLoading.tsx  |  22 +-
 .../src/views/uni-toolbar/UniFloatToolbar.tsx |   2 +-
 packages/action-recorder/src/locale/en-US.ts  |   2 +
 packages/action-recorder/src/locale/fa-IR.ts  |   2 +
 packages/action-recorder/src/locale/fr-FR.ts  |   2 +
 packages/action-recorder/src/locale/ru-RU.ts  |   2 +
 packages/action-recorder/src/locale/vi-VN.ts  |   2 +
 packages/action-recorder/src/locale/zh-CN.ts  |   2 +
 packages/action-recorder/src/locale/zh-TW.ts  |   8 +-
 .../components/input-number/InputNumber.tsx   |   5 +-
 .../design/src/components/input/Input.tsx     |   7 +-
 .../design/src/components/message/Message.tsx |  10 +-
 .../src/components/select/MultipleSelect.tsx  |   9 +-
 .../design/src/components/select/Select.tsx   |  13 +-
 .../src/views/printing-float-dom/index.tsx    |   2 +-
 .../src/views/paragraph-setting/Setting.tsx   |   3 +-
 .../src/components/preview/index.tsx          |  17 +-
 .../components/wrapper-error/WrapperError.tsx |  15 +-
 .../src/views/components/detail/index.tsx     |   2 +-
 .../formula-input/ListFormulaInput.tsx        |  25 +--
 .../views/components/SheetsFilterPanel.tsx    |   4 +-
 .../src/views/range-selector/index.tsx        |   8 +-
 .../src/views/CellLinkEdit/index.tsx          |   3 +-
 .../sheets-sort-ui/src/views/EmbedSortBtn.tsx |  12 +-
 .../src/views/components/SheetTableAnchor.tsx |  37 ++--
 .../views/components/SheetTableThemePanel.tsx |  58 ++++--
 .../menu-item-input/MenuItemInput.tsx         |   1 +
 .../views/defined-name/DefinedNameInput.tsx   |  15 +-
 .../views/dropdown/list-dropdown/index.tsx    |   8 +-
 .../src/views/formula-bar/FormulaBar.tsx      |  49 ++---
 .../src/views/sheet-bar/SheetBar.tsx          |  22 +-
 .../sheet-bar-button/SheetBarButton.tsx       |  11 +-
 .../src/views/thread-comment-editor/index.tsx |   3 +-
 .../src/views/thread-comment-tree/index.tsx   | 197 +++++++++---------
 packages/ui/src/common/component-manager.ts   |   8 +-
 .../components/custom-label/CustomLabel.tsx   |  24 ++-
 .../ui/src/components/heading-item/index.tsx  |   6 +-
 .../ui/src/views/components/dom/FloatDom.tsx  |   4 +-
 .../ui/src/views/components/dom/print.tsx     |  11 +-
 .../src/views/components/popup/RectPopup.tsx  |  10 +-
 .../ui/src/views/components/ribbon/Ribbon.tsx |  13 +-
 .../ribbon/TooltipButtonWrapper.tsx           |   9 +-
 45 files changed, 358 insertions(+), 313 deletions(-)

diff --git a/common/shared/vite/cleanup-pkg-plugin.ts b/common/shared/vite/cleanup-pkg-plugin.ts
index 14d57c0079..7f8ee30ff4 100644
--- a/common/shared/vite/cleanup-pkg-plugin.ts
+++ b/common/shared/vite/cleanup-pkg-plugin.ts
@@ -19,7 +19,6 @@ import path from 'node:path';
 import process from 'node:process';
 import fs from 'fs-extra';
 import sortKeys from 'sort-keys';
-
 import localPkg from '../package.json';
 import { peerDepsMap } from './data';
 
@@ -78,6 +77,7 @@ export function cleanupPkgPlugin(): Plugin {
         generateBundle() {
             const hasLocales = fs.existsSync(path.resolve(process.cwd(), 'src/locale'));
             const hasFacade = fs.existsSync(path.resolve(process.cwd(), 'src/facade/index.ts'));
+            pkg.version = localPkg.version;
             pkg.publishConfig = {
                 access: 'public',
                 main: './lib/es/index.js',
diff --git a/examples/src/sheets-multi/main.tsx b/examples/src/sheets-multi/main.tsx
index bd505f5190..4a461707d4 100644
--- a/examples/src/sheets-multi/main.tsx
+++ b/examples/src/sheets-multi/main.tsx
@@ -93,7 +93,7 @@ export function App() {
                     title={TITLE_MAP[id]}
                     toolbarControls={<div />}
                 >
-                    <div id={`app-${id}`} style={{ height: '100%' }}>
+                    <div id={`app-${id}`} className="univer-h-full">
                         {TITLE_MAP[id]}
                     </div>
                 </MosaicWindow>
diff --git a/packages-experimental/debugger/src/components/Image.tsx b/packages-experimental/debugger/src/components/Image.tsx
index ab095df475..db11ca13f6 100644
--- a/packages-experimental/debugger/src/components/Image.tsx
+++ b/packages-experimental/debugger/src/components/Image.tsx
@@ -17,5 +17,5 @@
 const image = 'data:image/jpeg;base64,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';
 
 export const ImageDemo = () => {
-    return <img draggable="false" src={image} style={{ width: '100%', height: '100%' }} />;
+    return <img className="univer-size-full" draggable={false} src={image} />;
 };
diff --git a/packages-experimental/debugger/src/components/RangeLoading.tsx b/packages-experimental/debugger/src/components/RangeLoading.tsx
index 7df908e96d..62d4b2b4b8 100644
--- a/packages-experimental/debugger/src/components/RangeLoading.tsx
+++ b/packages-experimental/debugger/src/components/RangeLoading.tsx
@@ -14,21 +14,17 @@
  * limitations under the License.
  */
 
-export const RangeLoading = () => {
-    const divStyle = {
-        width: '100%',
-        height: '100%',
-        backgroundColor: '#fff',
-        border: '1px solid #ccc',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        textAlign: 'center' as const,
-        transformOrigin: 'top left',
-    };
+import { borderClassName, clsx } from '@univerjs/design';
 
+export const RangeLoading = () => {
     return (
-        <div style={divStyle}>
+        <div
+            className={clsx(`
+              univer-flex univer-size-full univer-origin-top-left univer-items-center univer-justify-center
+              univer-bg-white
+              dark:univer-bg-gray-900
+            `, borderClassName)}
+        >
             Loading...
         </div>
     );
diff --git a/packages-experimental/uniui/src/views/uni-toolbar/UniFloatToolbar.tsx b/packages-experimental/uniui/src/views/uni-toolbar/UniFloatToolbar.tsx
index 16a1ad79f5..1937b57415 100644
--- a/packages-experimental/uniui/src/views/uni-toolbar/UniFloatToolbar.tsx
+++ b/packages-experimental/uniui/src/views/uni-toolbar/UniFloatToolbar.tsx
@@ -85,12 +85,12 @@ export const UniFloatingToolbar = React.forwardRef<IFloatingToolbarRef, { node:
 
     return (
         <div
+            ref={setFloating}
             className={`
               univer-flex univer-items-center univer-gap-2 univer-rounded-md univer-bg-white univer-text-sm
               univer-text-primary-600
               dark:!univer-bg-gray-900
             `}
-            ref={setFloating}
             style={{ position: strategy, top: y ?? 0, left: x ?? 0 }}
         >
             <div
diff --git a/packages/action-recorder/src/locale/en-US.ts b/packages/action-recorder/src/locale/en-US.ts
index 69f9e2c2db..00c5eace85 100644
--- a/packages/action-recorder/src/locale/en-US.ts
+++ b/packages/action-recorder/src/locale/en-US.ts
@@ -20,6 +20,8 @@ const locale = {
             title: 'Record Actions',
             record: 'Record Actions...',
             'replay-local': 'Replace Local Record...',
+            'replay-local-name': 'Replace Local Record by Subunit...',
+            'replay-local-active': 'Replace Local Record by Current Subunit...',
         },
     },
 };
diff --git a/packages/action-recorder/src/locale/fa-IR.ts b/packages/action-recorder/src/locale/fa-IR.ts
index e36e23e7b8..4761f08edc 100644
--- a/packages/action-recorder/src/locale/fa-IR.ts
+++ b/packages/action-recorder/src/locale/fa-IR.ts
@@ -22,6 +22,8 @@ const locale: typeof enUS = {
             title: 'ثبت اقدامات',
             record: 'ثبت اقدامات...',
             'replay-local': 'بازپخش محلی ثبت...',
+            'replay-local-name': 'بازپخش محلی ثبت بر اساس نام زیر واحد...',
+            'replay-local-active': 'بازپخش محلی ثبت بر اساس زیر واحد فعلی...',
         },
     },
 };
diff --git a/packages/action-recorder/src/locale/fr-FR.ts b/packages/action-recorder/src/locale/fr-FR.ts
index ab008dec71..72b484c13b 100644
--- a/packages/action-recorder/src/locale/fr-FR.ts
+++ b/packages/action-recorder/src/locale/fr-FR.ts
@@ -22,6 +22,8 @@ const locale: typeof enUS = {
             title: 'Enregistrer les actions',
             record: 'Enregistrer les actions...',
             'replay-local': 'Lecture de l\'enregistrement local...',
+            'replay-local-name': 'Remplacer l\'enregistrement local par le sous-unité...',
+            'replay-local-active': 'Remplacer l\'enregistrement local par le sous-unité actuel...',
         },
     },
 };
diff --git a/packages/action-recorder/src/locale/ru-RU.ts b/packages/action-recorder/src/locale/ru-RU.ts
index 7333b08ed8..2aec626a84 100644
--- a/packages/action-recorder/src/locale/ru-RU.ts
+++ b/packages/action-recorder/src/locale/ru-RU.ts
@@ -22,6 +22,8 @@ const locale: typeof enUS = {
             title: 'Record Actions',
             record: 'Record Actions...',
             'replay-local': 'Replace Local Record...',
+            'replay-local-name': 'Replace Local Record by Subunit...',
+            'replay-local-active': 'Replace Local Record by Current Subunit...',
         },
     },
 };
diff --git a/packages/action-recorder/src/locale/vi-VN.ts b/packages/action-recorder/src/locale/vi-VN.ts
index 7333b08ed8..2aec626a84 100644
--- a/packages/action-recorder/src/locale/vi-VN.ts
+++ b/packages/action-recorder/src/locale/vi-VN.ts
@@ -22,6 +22,8 @@ const locale: typeof enUS = {
             title: 'Record Actions',
             record: 'Record Actions...',
             'replay-local': 'Replace Local Record...',
+            'replay-local-name': 'Replace Local Record by Subunit...',
+            'replay-local-active': 'Replace Local Record by Current Subunit...',
         },
     },
 };
diff --git a/packages/action-recorder/src/locale/zh-CN.ts b/packages/action-recorder/src/locale/zh-CN.ts
index 72ec15db5b..f2a3396f0a 100644
--- a/packages/action-recorder/src/locale/zh-CN.ts
+++ b/packages/action-recorder/src/locale/zh-CN.ts
@@ -22,6 +22,8 @@ const locale: typeof enUS = {
             title: '操作录制',
             record: '录制操作...',
             'replay-local': '回放本地录制...',
+            'replay-local-name': '根据子表名回放本地录制...',
+            'replay-local-active': '根据当前子表回放本地录制...',
         },
     },
 };
diff --git a/packages/action-recorder/src/locale/zh-TW.ts b/packages/action-recorder/src/locale/zh-TW.ts
index 72ec15db5b..430130903b 100644
--- a/packages/action-recorder/src/locale/zh-TW.ts
+++ b/packages/action-recorder/src/locale/zh-TW.ts
@@ -19,9 +19,11 @@ import type enUS from './en-US';
 const locale: typeof enUS = {
     'action-recorder': {
         menu: {
-            title: '操作录制',
-            record: '录制操作...',
-            'replay-local': '回放本地录制...',
+            title: '操作錄製',
+            record: '錄製操作...',
+            'replay-local': '回放本地錄製...',
+            'replay-local-name': '根據子表名回放本地錄製...',
+            'replay-local-active': '根據當前子表回放本地錄製...',
         },
     },
 };
diff --git a/packages/design/src/components/input-number/InputNumber.tsx b/packages/design/src/components/input-number/InputNumber.tsx
index 9df3409687..637273d14a 100644
--- a/packages/design/src/components/input-number/InputNumber.tsx
+++ b/packages/design/src/components/input-number/InputNumber.tsx
@@ -20,9 +20,10 @@ import { Button } from '../button/Button';
 import { Input } from '../input/Input';
 
 export interface IInputNumberProps
-    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue'> {
+    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'size'> {
     value?: number | null;
     defaultValue?: number;
+    size?: 'mini' | 'small';
     min?: number;
     max?: number;
     step?: number;
@@ -44,6 +45,7 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
         {
             value,
             defaultValue,
+            size = 'small',
             min = Number.MIN_SAFE_INTEGER,
             max = Number.MAX_SAFE_INTEGER,
             step = 1,
@@ -315,6 +317,7 @@ export const InputNumber = forwardRef<HTMLInputElement, IInputNumberProps>(
                     <Input
                         ref={mergedRef}
                         className={clsx('univer-box-border', inputClassName)}
+                        size={size}
                         value={inputValue}
                         disabled={disabled}
                         onChange={handleInputChange}
diff --git a/packages/design/src/components/input/Input.tsx b/packages/design/src/components/input/Input.tsx
index 9c3889378d..0986f82756 100644
--- a/packages/design/src/components/input/Input.tsx
+++ b/packages/design/src/components/input/Input.tsx
@@ -33,6 +33,7 @@ export const inputVariants = cva(
     {
         variants: {
             size: {
+                mini: 'univer-h-7 univer-px-1.5 univer-text-sm',
                 small: 'univer-h-8 univer-px-2 univer-text-sm',
                 middle: 'univer-h-10 univer-px-3 univer-text-base',
                 large: 'univer-h-12 univer-px-4 univer-text-lg',
@@ -165,9 +166,9 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
                                 type="button"
                                 onClick={handleClear}
                                 className={`
-                                  univer-flex univer-size-4 univer-cursor-pointer univer-rounded-full univer-border-none
-                                  univer-bg-transparent univer-p-1 univer-text-gray-400 univer-transition-colors
-                                  univer-duration-200
+                                  univer-flex univer-size-4 univer-cursor-pointer univer-items-center
+                                  univer-rounded-full univer-border-none univer-bg-transparent univer-p-1
+                                  univer-text-gray-400 univer-transition-colors univer-duration-200
                                   focus:univer-outline-none
                                   hover:univer-text-gray-500
                                 `}
diff --git a/packages/design/src/components/message/Message.tsx b/packages/design/src/components/message/Message.tsx
index b01e7ff041..20bf0b2fcf 100644
--- a/packages/design/src/components/message/Message.tsx
+++ b/packages/design/src/components/message/Message.tsx
@@ -110,6 +110,7 @@ const createMessage = (() => {
         };
 
         useEffect(() => {
+            const timers: number[] = [];
             addMessage = (message) => {
                 const id = String(messageCount++);
                 setState((prev) => ({
@@ -117,13 +118,20 @@ const createMessage = (() => {
                 }));
 
                 if (message.duration !== Infinity) {
-                    setTimeout(() => {
+                    const timer = window.setTimeout(() => {
                         setState((prev) => ({
                             messages: prev.messages.filter((t) => t.id !== id),
                         }));
                     }, message.duration || 3000);
+                    timers.push(timer);
                 }
             };
+
+            return () => {
+                timers.forEach((timer) => {
+                    window.clearTimeout(timer);
+                });
+            };
         }, []);
 
         return createPortal(
diff --git a/packages/design/src/components/select/MultipleSelect.tsx b/packages/design/src/components/select/MultipleSelect.tsx
index f4981ff9ef..135793c63c 100644
--- a/packages/design/src/components/select/MultipleSelect.tsx
+++ b/packages/design/src/components/select/MultipleSelect.tsx
@@ -18,10 +18,10 @@ import type { ReactNode } from 'react';
 import type { IDropdownMenuProps } from '../dropdown-menu/DropdownMenu';
 import { MoreDownSingle } from '@univerjs/icons';
 import { useMemo, useState } from 'react';
-import { borderClassName } from '../../helper/class-utilities';
 import { clsx } from '../../helper/clsx';
 import { Badge } from '../badge/Badge';
 import { DropdownMenu } from '../dropdown-menu/DropdownMenu';
+import { selectClassName } from './Select';
 
 interface IOption {
     label?: string | ReactNode;
@@ -125,12 +125,7 @@ export function MultipleSelect(props: IMultipleSelectProps) {
         >
             <div
                 data-u-comp="multiple-select"
-                className={clsx(`
-                  univer-box-border univer-inline-flex univer-h-8 univer-min-w-36 univer-items-center
-                  univer-justify-between univer-rounded-lg univer-bg-white univer-px-2.5 univer-transition-colors
-                  univer-duration-200
-                  dark:!univer-bg-gray-700 dark:!univer-text-white
-                `, borderClassName, {
+                className={clsx(selectClassName, {
                     'univer-border-primary-600 univer-outline-none univer-ring-2 univer-ring-primary-50 dark:!univer-ring-primary-900': open && !borderless,
                     'univer-border-transparent univer-bg-transparent hover:univer-border-transparent': borderless,
                     'univer-cursor-not-allowed': disabled,
diff --git a/packages/design/src/components/select/Select.tsx b/packages/design/src/components/select/Select.tsx
index 65008eb8b0..3e6030998e 100644
--- a/packages/design/src/components/select/Select.tsx
+++ b/packages/design/src/components/select/Select.tsx
@@ -65,6 +65,12 @@ export interface ISelectProps {
     onChange: (value: string) => void;
 }
 
+export const selectClassName = clsx(`
+  univer-box-border univer-inline-flex univer-h-8 univer-min-w-36 univer-items-center univer-justify-between
+  univer-gap-2 univer-rounded-lg univer-bg-white univer-px-2.5 univer-transition-colors univer-duration-200
+  dark:!univer-bg-gray-700 dark:!univer-text-white
+`, borderClassName);
+
 export function Select(props: ISelectProps) {
     const {
         className,
@@ -149,12 +155,7 @@ export function Select(props: ISelectProps) {
         >
             <div
                 data-u-comp="select"
-                className={clsx(`
-                  univer-box-border univer-inline-flex univer-h-8 univer-min-w-36 univer-items-center
-                  univer-justify-between univer-gap-2 univer-rounded-lg univer-bg-white univer-px-2.5
-                  univer-transition-colors univer-duration-200
-                  dark:!univer-bg-gray-700 dark:!univer-text-white
-                `, borderClassName, {
+                className={clsx(selectClassName, {
                     'univer-border-primary-600 univer-outline-none univer-ring-2 univer-ring-primary-50 dark:!univer-ring-primary-900': open && !borderless,
                     'univer-border-transparent univer-bg-transparent hover:univer-border-transparent': borderless,
                     'univer-cursor-not-allowed': disabled,
diff --git a/packages/docs-drawing-ui/src/views/printing-float-dom/index.tsx b/packages/docs-drawing-ui/src/views/printing-float-dom/index.tsx
index 697d1b1a23..0057a84840 100644
--- a/packages/docs-drawing-ui/src/views/printing-float-dom/index.tsx
+++ b/packages/docs-drawing-ui/src/views/printing-float-dom/index.tsx
@@ -68,7 +68,7 @@ export const DocPrintingFloatDom = (props: IPrintingFloatDomProps) => {
             .filter(([_, floatDom]) => !(floatDom.position.endX < 0 || floatDom.position.endY < 0 || floatDom.position.startX > width || floatDom.position.startY > height)), [floatDomInfos, scene, offset, width, height]);
 
     return (
-        <div style={{ position: 'absolute', top: 0, left: 0 }}>
+        <div className="univer-absolute univer-left-0 univer-top-0">
             {floatDomParams.map(([id, floatDom]) => (
                 <PrintFloatDomSingle key={id} layer={floatDom} id={id} position={floatDom.position} />
             ))}
diff --git a/packages/docs-ui/src/views/paragraph-setting/Setting.tsx b/packages/docs-ui/src/views/paragraph-setting/Setting.tsx
index d0b38c3fbf..e727dc19cb 100644
--- a/packages/docs-ui/src/views/paragraph-setting/Setting.tsx
+++ b/packages/docs-ui/src/views/paragraph-setting/Setting.tsx
@@ -176,8 +176,7 @@ export function ParagraphSetting() {
                 <div className="univer-flex univer-justify-between item-center">
                     <div className="univer-mt-3 univer-text-xs">{localeService.t('doc.paragraphSetting.lineSpace')}</div>
                     <div
-                        className="univer-mt-4 univer-flex univer-flex-col univer-gap-1.5"
-                        style={{ width: 162 }}
+                        className="univer-mt-4 univer-flex univer-w-[162px] univer-flex-col univer-gap-1.5"
                     >
                         <Select
                             value={`${spacingRule}`}
diff --git a/packages/sheets-conditional-formatting-ui/src/components/preview/index.tsx b/packages/sheets-conditional-formatting-ui/src/components/preview/index.tsx
index 25afadd3bb..5655612b0c 100644
--- a/packages/sheets-conditional-formatting-ui/src/components/preview/index.tsx
+++ b/packages/sheets-conditional-formatting-ui/src/components/preview/index.tsx
@@ -45,8 +45,7 @@ export const Preview = (props: { rule?: IConditionalFormattingRuleConfig }) => {
         }
     }, [rule]);
 
-    const previewClassName = `univer-pointer-events-none univer-flex univer-h-5 univer-min-w-[72px] univer-items-center
-    univer-justify-center univer-text-xs`;
+    const previewClassName = 'univer-pointer-events-none univer-flex univer-h-5 univer-min-w-[72px] univer-items-center univer-justify-center univer-text-xs';
 
     switch (rule.type) {
         case CFRuleType.dataBar:
@@ -58,17 +57,17 @@ export const Preview = (props: { rule?: IConditionalFormattingRuleConfig }) => {
             return (
                 <div className={previewClassName}>
                     <div
-                        className="univer-h-full univer-w-1/2"
+                        className="univer-h-full univer-w-1/2 univer-border univer-border-solid"
                         style={{
                             background: nativeColor,
-                            border: `1px solid ${rule.config.nativeColor || defaultDataBarNativeColor}`,
+                            borderColor: rule.config.nativeColor ?? defaultDataBarNativeColor,
                         }}
                     />
                     <div
-                        className="univer-h-full univer-w-1/2"
+                        className="univer-h-full univer-w-1/2 univer-border univer-border-solid"
                         style={{
                             background: positiveColor,
-                            border: `1px solid ${rule.config.positiveColor || defaultDataBarPositiveColor}`,
+                            borderColor: rule.config.positiveColor ?? defaultDataBarPositiveColor,
                         }}
                     />
                 </div>
@@ -79,7 +78,11 @@ export const Preview = (props: { rule?: IConditionalFormattingRuleConfig }) => {
             return colorList && (
                 <div className={previewClassName}>
                     {colorList.map((item, index) => (
-                        <div key={index} className="univer-h-full" style={{ width: `${100 / colorList.length}%`, background: item }} />
+                        <div
+                            key={index}
+                            className="univer-h-full"
+                            style={{ width: `${100 / colorList.length}%`, background: item }}
+                        />
                     ))}
                 </div>
             );
diff --git a/packages/sheets-conditional-formatting-ui/src/components/wrapper-error/WrapperError.tsx b/packages/sheets-conditional-formatting-ui/src/components/wrapper-error/WrapperError.tsx
index 81564d3d4e..49ee7dd4dc 100644
--- a/packages/sheets-conditional-formatting-ui/src/components/wrapper-error/WrapperError.tsx
+++ b/packages/sheets-conditional-formatting-ui/src/components/wrapper-error/WrapperError.tsx
@@ -14,22 +14,17 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import type { ReactElement } from 'react';
 
 // TODO@gggpound: Error checking needs to be implemented by the form control
 export const WrapperError = (props: {
     errorText: string;
-    children: React.ReactElement;
+    children: ReactElement;
 }) => {
     return (
-        <div style={{ position: 'relative' }}>
-            <div style={{
-                position: 'absolute',
-                zIndex: 999,
-                bottom: '-13px',
-                fontSize: '10px',
-                color: 'red',
-            }}
+        <div className="univer-relative">
+            <div
+                className="univer-absolute univer-bottom-[-13px] univer-z-[999] univer-text-[10px] univer-text-red-500"
             >
                 {props.errorText}
             </div>
diff --git a/packages/sheets-data-validation-ui/src/views/components/detail/index.tsx b/packages/sheets-data-validation-ui/src/views/components/detail/index.tsx
index e08b82b4f6..02c561e6a0 100644
--- a/packages/sheets-data-validation-ui/src/views/components/detail/index.tsx
+++ b/packages/sheets-data-validation-ui/src/views/components/detail/index.tsx
@@ -248,7 +248,7 @@ export function DataValidationDetail() {
     const shouldHideFormula = operators.length && !localRule.operator;
 
     return (
-        <div data-u-comp="data-validation-detail">
+        <div data-u-comp="data-validation-detail" className="univer-py-2">
             <FormLayout
                 label={localeService.t('dataValidation.panel.range')}
                 error={(!localRule.ranges.length || isRangeError) ? localeService.t('dataValidation.panel.rangeError') : ''}
diff --git a/packages/sheets-data-validation-ui/src/views/components/formula-input/ListFormulaInput.tsx b/packages/sheets-data-validation-ui/src/views/components/formula-input/ListFormulaInput.tsx
index c8d366e706..a69938db9b 100644
--- a/packages/sheets-data-validation-ui/src/views/components/formula-input/ListFormulaInput.tsx
+++ b/packages/sheets-data-validation-ui/src/views/components/formula-input/ListFormulaInput.tsx
@@ -17,7 +17,6 @@
 import type { IFormulaInputProps } from '@univerjs/data-validation';
 import type { ListValidator } from '@univerjs/sheets-data-validation';
 import type { IFormulaEditorRef } from '@univerjs/sheets-formula-ui';
-import type { CSSProperties } from 'react';
 import { DataValidationType, isFormulaString, LocaleService, Tools } from '@univerjs/core';
 import { DataValidationModel, DataValidatorRegistryService } from '@univerjs/data-validation';
 import { borderClassName, clsx, DraggableList, Dropdown, FormLayout, Input, Radio, RadioGroup } from '@univerjs/design';
@@ -122,19 +121,17 @@ const ColorSelect = (props: IColorSelectProps) => {
     );
 };
 
-const Template = (props: { item: IDropdownItem; commonProps: any; style?: CSSProperties }) => {
-    const { item, commonProps, style } = props;
+const Template = (props: { item: IDropdownItem; commonProps: any; className?: string }) => {
+    const { item, commonProps, className } = props;
     const { onItemChange, onItemDelete } = commonProps;
 
     return (
-        <div className="univer-flex univer-items-center univer-gap-2" style={style}>
-            {!item.isRef
-                ? (
-                    <div className={clsx('univer-cursor-move', 'draggableHandle')}>
-                        <SequenceSingle />
-                    </div>
-                )
-                : null}
+        <div className={clsx('univer-flex univer-items-center univer-gap-2', className)}>
+            {!item.isRef && (
+                <div className={clsx('univer-cursor-move', 'draggableHandle')}>
+                    <SequenceSingle />
+                </div>
+            )}
             <ColorSelect
                 value={item.color}
                 onChange={(color) => {
@@ -377,14 +374,14 @@ export function ListFormulaInput(props: IFormulaInputProps) {
                             }}
                         />
                         {refFinalList.length > 0 && (
-                            <div style={{ marginTop: '12px' }}>
+                            <div className="univer-mt-3">
                                 {refFinalList.map((item) => {
                                     return (
                                         <Template
                                             key={item.id}
+                                            className="univer-mb-3"
                                             item={item}
                                             commonProps={{ onItemChange: handleRefItemChange }}
-                                            style={{ marginBottom: 12 }}
                                         />
                                     );
                                 })}
@@ -394,7 +391,7 @@ export function ListFormulaInput(props: IFormulaInputProps) {
                 )
                 : (
                     <FormLayout error={formula1Res}>
-                        <div style={{ marginTop: '-12px' }}>
+                        <div className="-univer-mt-3">
                             <DraggableList
                                 list={strList}
                                 onListChange={setStrList}
diff --git a/packages/sheets-filter-ui/src/views/components/SheetsFilterPanel.tsx b/packages/sheets-filter-ui/src/views/components/SheetsFilterPanel.tsx
index 451525b56a..8375f83dea 100644
--- a/packages/sheets-filter-ui/src/views/components/SheetsFilterPanel.tsx
+++ b/packages/sheets-filter-ui/src/views/components/SheetsFilterPanel.tsx
@@ -100,7 +100,7 @@ export function FilterPanel() {
                     </div>
                 )
                 : (
-                    <div style={{ flex: 1 }} />
+                    <div className="univer-flex-1" />
                 )}
             <div
                 data-u-comp="sheets-filter-panel-footer"
@@ -112,7 +112,7 @@ export function FilterPanel() {
                 <Button variant="link" onClick={onClearCriteria} disabled={clearFilterDisabled}>
                     {localeService.t('sheets-filter.panel.clear-filter')}
                 </Button>
-                <span className="univer-space-x-2">
+                <span className="univer-flex univer-gap-2">
                     <Button variant="default" onClick={onCancel}>
                         {localeService.t('sheets-filter.panel.cancel')}
                     </Button>
diff --git a/packages/sheets-formula-ui/src/views/range-selector/index.tsx b/packages/sheets-formula-ui/src/views/range-selector/index.tsx
index 815256682a..e61fa1a040 100644
--- a/packages/sheets-formula-ui/src/views/range-selector/index.tsx
+++ b/packages/sheets-formula-ui/src/views/range-selector/index.tsx
@@ -157,10 +157,9 @@ export function RangeSelectorDialog(props: IRangeSelectorDialogProps) {
             mask={false}
             maskClosable={false}
             footer={(
-                <footer>
+                <footer className="univer-flex univer-gap-2">
                     <Button onClick={onClose}>{localeService.t('rangeSelector.cancel')}</Button>
                     <Button
-                        style={{ marginLeft: 10 }}
                         variant="primary"
                         onClick={() => {
                             onConfirm(
@@ -189,12 +188,13 @@ export function RangeSelectorDialog(props: IRangeSelectorDialogProps) {
                         className="univer-mb-2 univer-flex univer-items-center univer-gap-4"
                     >
                         <Input
-                            className="univer-w-full"
+                            className={clsx('univer-w-full', {
+                                'univer-border-primary-600': focusIndex === index,
+                            })}
                             placeholder={localeService.t('rangeSelector.placeHolder')}
                             onFocus={() => setFocusIndex(index)}
                             value={text}
                             onChange={(value) => handleRangeInput(index, value)}
-                            style={{ borderColor: focusIndex === index ? 'rgb(var(--primary-color))' : undefined }}
                         />
                         {ranges.length > 1 && (
                             <DeleteSingle
diff --git a/packages/sheets-hyper-link-ui/src/views/CellLinkEdit/index.tsx b/packages/sheets-hyper-link-ui/src/views/CellLinkEdit/index.tsx
index 3c77a43e83..549061d359 100644
--- a/packages/sheets-hyper-link-ui/src/views/CellLinkEdit/index.tsx
+++ b/packages/sheets-hyper-link-ui/src/views/CellLinkEdit/index.tsx
@@ -593,7 +593,7 @@ export const CellLinkEdit = () => {
                     setPayload={setPayload}
                 />
             )}
-            <div className="univer-flex univer-flex-row univer-justify-end">
+            <div className="univer-flex univer-flex-row univer-justify-end univer-gap-2">
                 <Button
                     onClick={() => {
                         if (editing) {
@@ -606,7 +606,6 @@ export const CellLinkEdit = () => {
                 </Button>
                 <Button
                     variant="primary"
-                    style={{ marginLeft: 8 }}
                     onClick={async () => {
                         handleSubmit();
                     }}
diff --git a/packages/sheets-sort-ui/src/views/EmbedSortBtn.tsx b/packages/sheets-sort-ui/src/views/EmbedSortBtn.tsx
index 5096373d34..cb9e078f27 100644
--- a/packages/sheets-sort-ui/src/views/EmbedSortBtn.tsx
+++ b/packages/sheets-sort-ui/src/views/EmbedSortBtn.tsx
@@ -49,13 +49,15 @@ export default function EmbedSortBtn(props: IEmbedSortBtnProps) {
     }, [range, colIndex, sheetsSortUIService, univerInstanceService, onClose]);
 
     return (
-        <ButtonGroup className="univer-mb-3 univer-w-full">
-            <Button className="univer-w-1/2" onClick={() => apply(true)}>
-                <AscendingSingle className="univer-mr-1" />
+        <ButtonGroup
+            className="univer-mb-3 univer-grid univer-w-full univer-grid-flow-col univer-grid-cols-2 univer-gap-2"
+        >
+            <Button onClick={() => apply(true)}>
+                <AscendingSingle />
                 {localeService.t('sheets-sort.general.sort-asc')}
             </Button>
-            <Button className="univer-w-1/2" onClick={() => apply(false)}>
-                <DescendingSingle className="univer-mr-1" />
+            <Button onClick={() => apply(false)}>
+                <DescendingSingle />
                 {localeService.t('sheets-sort.general.sort-desc')}
             </Button>
         </ButtonGroup>
diff --git a/packages/sheets-table-ui/src/views/components/SheetTableAnchor.tsx b/packages/sheets-table-ui/src/views/components/SheetTableAnchor.tsx
index 206e130b0e..b9fce3b393 100644
--- a/packages/sheets-table-ui/src/views/components/SheetTableAnchor.tsx
+++ b/packages/sheets-table-ui/src/views/components/SheetTableAnchor.tsx
@@ -111,11 +111,7 @@ export const SheetTableAnchor = () => {
     }
 
     return (
-        <div
-            className="univer-absolute univer-z-50 univer-h-0 univer-w-0"
-            style={{
-            }}
-        >
+        <div className="univer-absolute univer-z-50 univer-h-0 univer-w-0">
             {anchorPosition.map((item) => {
                 const table = tableManager.getTableById(unitId, item.tableId);
                 if (!table) return null;
@@ -139,16 +135,18 @@ export const SheetTableAnchor = () => {
                     <div
                         key={item.tableId}
                         className={clsx(`
-                          univer-absolute univer-box-border univer-flex univer-cursor-pointer univer-items-center
-                          univer-rounded-xl univer-pl-2 univer-pr-2 univer-shadow-xs
-                        `, borderClassName)}
+                          univer-absolute univer-box-border univer-cursor-pointer univer-items-center univer-rounded-xl
+                          univer-pl-2 univer-pr-2 univer-shadow-xs
+                        `, borderClassName, {
+                            'univer-flex': !shouldHidden,
+                            'univer-hidden': shouldHidden,
+                        })}
                         style={{
                             left: item.x,
                             top: Math.max(item.y, 0),
                             backgroundColor: headerBgColor,
                             color: headerTextColor,
                             borderWidth: '0.5px',
-                            display: shouldHidden ? 'none' : 'flex',
                             height: anchorHeight ? `${anchorHeight}px` : '24px',
                         }}
                     >
@@ -176,17 +174,14 @@ export const SheetTableAnchor = () => {
                                 )}
                         </div>
                         <Dropdown
-                            open={openStates[item.tableId] ?? false}
-                            onOpenChange={(isOpen) => {
-                                updateOpenState(item.tableId, isOpen);
-                            }}
                             key={item.tableId}
+                            align="start"
                             overlay={(
                                 <div className="univer-pb-2 univer-pt-2">
                                     <div
                                         className={`
                                           univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center
-                                          univer-pb-1 univer-pl-2 univer-pr-2 univer-pt-1 univer-text-sm
+                                          univer-gap-2 univer-pb-1 univer-pl-2 univer-pr-2 univer-pt-1 univer-text-sm
                                           hover:univer-bg-gray-200
                                         `}
                                         onClick={() => {
@@ -194,7 +189,7 @@ export const SheetTableAnchor = () => {
                                             setInputValue(item.tableName);
                                         }}
                                     >
-                                        <RenameSingle className="univer-mr-2" />
+                                        <RenameSingle />
                                         {localeService.t('sheets-table.rename')}
                                     </div>
                                     <div
@@ -206,17 +201,17 @@ export const SheetTableAnchor = () => {
                                         onClick={() => handleChangeRange(item.tableId)}
                                         className={`
                                           univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center
-                                          univer-pb-1 univer-pl-2 univer-pr-2 univer-pt-1 univer-text-sm
+                                          univer-gap-2 univer-pb-1 univer-pl-2 univer-pr-2 univer-pt-1 univer-text-sm
                                           hover:univer-bg-gray-200
                                         `}
                                     >
-                                        <GridOutlineSingle className="univer-mr-2" />
+                                        <GridOutlineSingle />
                                         {localeService.t('sheets-table.updateRange')}
                                     </div>
                                     <div
                                         className={`
                                           univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center
-                                          univer-pb-1 univer-pl-2 univer-pr-2 univer-pt-1 univer-text-sm
+                                          univer-gap-2 univer-pb-1 univer-pl-2 univer-pr-2 univer-pt-1 univer-text-sm
                                           hover:univer-bg-gray-200
                                         `}
                                         onClick={() => {
@@ -241,7 +236,6 @@ export const SheetTableAnchor = () => {
                                     >
                                         <PaintBucket
                                             extend={{ colorChannel1: 'rgb(53,91,183)' }}
-                                            className="univer-mr-2"
                                         />
                                         {localeService.t('sheets-table.setTheme')}
                                     </div>
@@ -270,7 +264,10 @@ export const SheetTableAnchor = () => {
                                     </div>
                                 </div>
                             )}
-                            align="start"
+                            open={openStates[item.tableId] ?? false}
+                            onOpenChange={(isOpen) => {
+                                updateOpenState(item.tableId, isOpen);
+                            }}
                         >
                             <MoreDownSingle />
                         </Dropdown>
diff --git a/packages/sheets-table-ui/src/views/components/SheetTableThemePanel.tsx b/packages/sheets-table-ui/src/views/components/SheetTableThemePanel.tsx
index 7aa68f6c8f..a3d6544e01 100644
--- a/packages/sheets-table-ui/src/views/components/SheetTableThemePanel.tsx
+++ b/packages/sheets-table-ui/src/views/components/SheetTableThemePanel.tsx
@@ -49,8 +49,8 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
     const rangeThemeModel = useDependency(SheetRangeThemeModel);
     const sheetTableThemeUIController = useDependency(SheetTableThemeUIController);
 
-    const rangeThemeMapChanged$ = useObservable(rangeThemeModel.rangeThemeMapChange$);
-    const tableRefresh$ = useObservable(sheetTableThemeUIController.refreshTable$);
+    const rangeThemeMapChanged = useObservable(rangeThemeModel.rangeThemeMapChange$);
+    const tableRefresh = useObservable(sheetTableThemeUIController.refreshTable$);
 
     const errorService = useDependency(ErrorService);
 
@@ -122,10 +122,15 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
 
     useEffect(() => {
         setRefresh(Math.random());
-    }, [rangeThemeMapChanged$, tableRefresh$]);
+    }, [rangeThemeMapChanged, tableRefresh]);
 
     if (!table) return null;
 
+    const headerBgIsDark = new ColorKit(headerBg).isDark();
+    const firstRowBgIsDark = new ColorKit(firstRowBg).isDark();
+    const secondRowBgIsDark = new ColorKit(secondRowBg).isDark();
+    const lastRowBgIsDark = new ColorKit(lastRowBg).isDark();
+
     return (
         <div>
             <h5>{localeService.t('sheets-table.defaultStyle')}</h5>
@@ -141,17 +146,18 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
                         <div
                             key={item}
                             className={clsx(`
-                              univer-h-10 univer-w-8 univer-cursor-pointer univer-p-px univer-border univer-border-solid
-                              univer-border-gray-200
+                              univer-h-10 univer-w-8 univer-cursor-pointer univer-border univer-border-solid
+                              univer-border-gray-200 univer-p-px
+                              [&>div]:univer-box-border [&>div]:univer-h-2.5
                             `, {
                                 'univer-border-blue-500': item === themeConfig.theme,
                             })}
                             onClick={() => handleThemeChange(item)}
                         >
-                            <div className="univer-box-border univer-h-2.5" style={{ background: headerRowBg, border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}` }} />
-                            <div className="univer-box-border univer-h-2.5" style={{ background: firstRowBg, border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}` }} />
-                            <div className="univer-box-border univer-h-2.5" style={{ background: secondRowBg, border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}` }} />
-                            <div className="univer-box-border univer-h-2.5" style={{ background: lastRowBg, border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}` }} />
+                            <div style={{ background: headerRowBg, border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}` }} />
+                            <div style={{ background: firstRowBg, border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}` }} />
+                            <div style={{ background: secondRowBg, border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}` }} />
+                            <div style={{ background: lastRowBg, border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}` }} />
                         </div>
                     );
                 })}
@@ -179,8 +185,8 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
                             <div
                                 key={item}
                                 className={clsx(`
-                                  univer-relative univer-h-10 univer-w-8 univer-cursor-pointer univer-p-px univer-border
-                                  univer-border-solid univer-border-gray-200
+                                  univer-relative univer-h-10 univer-w-8 univer-cursor-pointer univer-border
+                                  univer-border-solid univer-border-gray-200 univer-p-px
                                 `, {
                                     'univer-border-blue-500': item === themeConfig.theme,
                                 })}
@@ -221,10 +227,12 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
                                     className={clsx(`
                                       univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center
                                       univer-leading-9
-                                    `, borderClassName)}
+                                    `, borderClassName, {
+                                        'univer-text-white': headerBgIsDark,
+                                        'univer-text-gray-900': !headerBgIsDark,
+                                    })}
                                     style={{
                                         background: headerBg,
-                                        color: new ColorKit(headerBg).isDark() ? '#fff' : '#000',
                                     }}
                                 >
                                     {localeService.t('sheets-table.header')}
@@ -256,10 +264,12 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
                                         `, borderClassName)}
                                     >
                                         <div
-                                            className={clsx('univer-h-4 univer-w-4 univer-rounded-lg univer-bg-gray-400', borderClassName)}
+                                            className={clsx('univer-h-4 univer-w-4 univer-rounded-lg univer-bg-gray-400', borderClassName, {
+                                                'univer-text-white': headerBgIsDark,
+                                                'univer-text-gray-900': !headerBgIsDark,
+                                            })}
                                             style={{
                                                 background: headerBg,
-                                                color: new ColorKit(headerBg).isDark() ? '#fff' : '#000',
                                             }}
                                         />
                                         <DropdownSingle className="univer-h-2 univer-w-2" />
@@ -271,10 +281,12 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
                                     className={clsx(`
                                       univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center
                                       univer-leading-9
-                                    `, borderClassName)}
+                                    `, borderClassName, {
+                                        'univer-text-white': firstRowBgIsDark,
+                                        'univer-text-gray-900': !firstRowBgIsDark,
+                                    })}
                                     style={{
                                         background: firstRowBg,
-                                        color: new ColorKit(firstRowBg).isDark() ? '#fff' : '#000',
                                     }}
                                 >
                                     {localeService.t('sheets-table.firstLine')}
@@ -319,10 +331,12 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
                                     className={clsx(`
                                       univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center
                                       univer-leading-9
-                                    `, borderClassName)}
+                                    `, borderClassName, {
+                                        'univer-text-white': secondRowBgIsDark,
+                                        'univer-text-gray-900': !secondRowBgIsDark,
+                                    })}
                                     style={{
                                         background: secondRowBg,
-                                        color: new ColorKit(secondRowBg).isDark() ? '#fff' : '#000',
                                     }}
                                 >
                                     {localeService.t('sheets-table.secondLine')}
@@ -365,10 +379,12 @@ export const SheetTableThemePanel = (props: ISheetTableThemePanelProps) => {
                                     className={clsx(`
                                       univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center
                                       univer-leading-9
-                                    `, borderClassName)}
+                                    `, borderClassName, {
+                                        'univer-text-white': lastRowBgIsDark,
+                                        'univer-text-gray-900': !lastRowBgIsDark,
+                                    })}
                                     style={{
                                         background: lastRowBg,
-                                        color: new ColorKit(lastRowBg).isDark() ? '#fff' : '#000',
                                     }}
                                 >
                                     {localeService.t('sheets-table.footer')}
diff --git a/packages/sheets-ui/src/components/menu-item-input/MenuItemInput.tsx b/packages/sheets-ui/src/components/menu-item-input/MenuItemInput.tsx
index 67712a13d5..209bcd0c5d 100644
--- a/packages/sheets-ui/src/components/menu-item-input/MenuItemInput.tsx
+++ b/packages/sheets-ui/src/components/menu-item-input/MenuItemInput.tsx
@@ -67,6 +67,7 @@ export const MenuItemInput = (props: IMenuItemInputProps) => {
             <div className="univer-w-16" onClick={(e) => e.stopPropagation()}>
                 <InputNumber
                     value={Number(inputValue)}
+                    size="mini"
                     precision={0}
                     min={min}
                     max={max}
diff --git a/packages/sheets-ui/src/views/defined-name/DefinedNameInput.tsx b/packages/sheets-ui/src/views/defined-name/DefinedNameInput.tsx
index 6a8f2e0e45..51ee0fc044 100644
--- a/packages/sheets-ui/src/views/defined-name/DefinedNameInput.tsx
+++ b/packages/sheets-ui/src/views/defined-name/DefinedNameInput.tsx
@@ -238,12 +238,7 @@ export const DefinedNameInput = (props: IDefinedNameInputProps) => {
                     )
                 )
                 : (FormulaEditor && (
-                    <div
-                        className={`
-                          univer-relative univer-mt-4 univer-h-full univer-rounded univer-px-1.5 univer-transition-all
-                          univer-duration-150
-                        `}
-                    >
+                    <div className="univer-relative univer-mt-4 univer-h-full">
                         <div className="univer-relative univer-h-8 univer-select-none">
                             <FormulaEditor
                                 ref={formulaEditorRef}
@@ -289,17 +284,18 @@ export const DefinedNameInput = (props: IDefinedNameInputProps) => {
                 />
             </div>
             <div
-                className={clsx('univer-items-center univer-text-sm univer-text-red-500', {
+                className={clsx('univer-items-center univer-gap-1 univer-text-sm univer-text-red-500', {
                     'univer-hidden': validString.length === 0,
                     'univer-flex': validString.length !== 0,
                 })}
             >
-                <span className="univer-mr-0.5">
+                <span>
                     {validString}
                 </span>
                 <ErrorSingle />
             </div>
-            <div>
+
+            <div className="univer-flex univer-gap-2">
                 <Button
                     onClick={() => {
                         cancel?.();
@@ -308,7 +304,6 @@ export const DefinedNameInput = (props: IDefinedNameInputProps) => {
                     {localeService.t('definedName.cancel')}
                 </Button>
                 <Button
-                    style={{ marginLeft: 15 }}
                     variant="primary"
                     onClick={confirmChange}
                 >
diff --git a/packages/sheets-ui/src/views/dropdown/list-dropdown/index.tsx b/packages/sheets-ui/src/views/dropdown/list-dropdown/index.tsx
index 1080056a70..2afeb4b80f 100644
--- a/packages/sheets-ui/src/views/dropdown/list-dropdown/index.tsx
+++ b/packages/sheets-ui/src/views/dropdown/list-dropdown/index.tsx
@@ -77,7 +77,7 @@ const SelectList = (props: ISelectListProps) => {
             style={style}
         >
             <div
-                className="univer-flex-shrink-0 univer-flex-grow-0 univer-px-[14px] univer-py-2 univer-text-xs"
+                className="univer-flex-shrink-0 univer-flex-grow-0 univer-px-3.5 univer-py-2 univer-text-xs"
             >
                 {title}
             </div>
@@ -127,7 +127,7 @@ const SelectList = (props: ISelectListProps) => {
                                     ? (
                                         <>
                                             <span>{item.label.substring(0, index)}</span>
-                                            <span style={{ fontWeight: 'bold' }}>{item.label.substring(index, index + lowerFilter.length)}</span>
+                                            <span className="univer-font-semibold">{item.label.substring(index, index + lowerFilter.length)}</span>
                                             <span>{item.label.substring(index + lowerFilter.length)}</span>
                                         </>
                                     )
@@ -139,7 +139,7 @@ const SelectList = (props: ISelectListProps) => {
                                   univer-text-base univer-text-primary-500
                                 `}
                             >
-                                {selected ? <CheckMarkSingle /> : null}
+                                {selected && <CheckMarkSingle className="univer-text-primary-600" />}
                             </div>
                         </div>
                     );
@@ -150,7 +150,7 @@ const SelectList = (props: ISelectListProps) => {
                     <>
                         <div
                             className={`
-                              univer-my-1 univer-h-[1px] univer-flex-shrink-0 univer-flex-grow-0 univer-bg-gray-200
+                              univer-my-1 univer-h-px univer-flex-shrink-0 univer-flex-grow-0 univer-bg-gray-200
                               dark:!univer-bg-gray-700
                             `}
                         />
diff --git a/packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx b/packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx
index 7b68420476..0fdd7fd81b 100644
--- a/packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx
+++ b/packages/sheets-ui/src/views/formula-bar/FormulaBar.tsx
@@ -255,13 +255,13 @@ export function FormulaBar(props: IProps) {
         <div
             data-u-comp="formula-bar"
             className={clsx(`
-              univer-box-border univer-flex univer-h-7 univer-bg-white univer-transition-[height] univer-ease-linear
+              univer-box-border univer-flex univer-bg-white univer-transition-[height] univer-ease-linear
               dark:!univer-bg-gray-900
-            `, borderBottomClassName, className)}
-            style={{
-                height: ArrowDirection.Down === arrowDirection ? '28px' : '82px',
-                pointerEvents: editDisable ? 'none' : 'auto',
-            }}
+            `, borderBottomClassName, className, {
+                'univer-h-7': arrowDirection === ArrowDirection.Down,
+                'univer-h-20': arrowDirection === ArrowDirection.Up,
+                'univer-pointer-events-none': editDisable,
+            })}
         >
             <div className="univer-relative univer-box-border univer-h-full univer-w-[100px]">
                 <DefinedName disable={disableDefinedName ?? editDisable} />
@@ -301,12 +301,12 @@ export function FormulaBar(props: IProps) {
                             <CheckMarkSingle />
                         </span>
                         <span
-                            className={clsx(`
+                            className={`
                               univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-rounded
                               univer-p-1 univer-text-base
                               dark:!univer-text-white dark:hover:!univer-bg-gray-700
                               hover:univer-bg-gray-100
-                            `)}
+                            `}
                             onClick={handlerFxBtnClick}
                         >
                             <FxSingle />
@@ -316,10 +316,10 @@ export function FormulaBar(props: IProps) {
 
                 <div className="univer-flex univer-w-full univer-flex-1 univer-overflow-hidden univer-pl-3">
                     <div
+                        ref={ref}
                         className="univer-relative univer-flex-1"
                         onPointerDown={handlePointerDown}
                         onPointerUp={handlePointerUp}
-                        ref={ref}
                         style={{ pointerEvents: hideEditor ? 'none' : 'auto' }}
                     >
                         {FormulaEditor && (
@@ -354,17 +354,14 @@ export function FormulaBar(props: IProps) {
                         )}
                         {/* When the editor is hidden, we just cover a div on the editor because re-instantiate
                         the formula editor will be expensive. */}
-                        {hideEditor
-                            ? (
-                                <div
-                                    className={`
-                                      univer-pointer-events-none univer-relative univer-left-0 univer-top-0
-                                      univer-z-[100] univer-h-full univer-w-full univer-cursor-not-allowed
-                                      univer-bg-white
-                                    `}
-                                />
-                            )
-                            : null}
+                        {hideEditor && (
+                            <div
+                                className={`
+                                  univer-pointer-events-none univer-relative univer-left-0 univer-top-0 univer-z-[100]
+                                  univer-h-full univer-w-full univer-cursor-not-allowed univer-bg-white
+                                `}
+                            />
+                        )}
                     </div>
                     <div
                         className={clsx(`
@@ -374,13 +371,11 @@ export function FormulaBar(props: IProps) {
                         `, { 'univer-cursor-not-allowed univer-text-gray-200 dark:!univer-text-gray-700': editDisable })}
                         onClick={handleArrowClick}
                     >
-                        {arrowDirection === ArrowDirection.Down
-                            ? (
-                                <DropdownSingle />
-                            )
-                            : (
-                                <DropdownSingle style={{ transform: 'rotateZ(180deg)' }} />
-                            )}
+                        <DropdownSingle
+                            className={clsx({
+                                'univer-rotate-180': arrowDirection === ArrowDirection.Up,
+                            })}
+                        />
                     </div>
                 </div>
             </div>
diff --git a/packages/sheets-ui/src/views/sheet-bar/SheetBar.tsx b/packages/sheets-ui/src/views/sheet-bar/SheetBar.tsx
index 88254c66fd..4b5e918c1d 100644
--- a/packages/sheets-ui/src/views/sheet-bar/SheetBar.tsx
+++ b/packages/sheets-ui/src/views/sheet-bar/SheetBar.tsx
@@ -15,7 +15,7 @@
  */
 
 import type { IScrollState } from './sheet-bar-tabs/utils/slide-tab-bar';
-import { ICommandService, IPermissionService } from '@univerjs/core';
+import { ICommandService, IPermissionService, throttle } from '@univerjs/core';
 import { IncreaseSingle, MoreSingle } from '@univerjs/icons';
 import { InsertSheetCommand, WorkbookCreateSheetPermission, WorkbookEditablePermission } from '@univerjs/sheets';
 import { useDependency, useObservable } from '@univerjs/ui';
@@ -42,22 +42,22 @@ export const SheetBar = () => {
     const workbookEditablePermission = useObservable(permissionService.getPermissionPoint$(new WorkbookEditablePermission(unitId)?.id));
     const workbookCreateSheetPermission = useObservable(permissionService.getPermissionPoint$(new WorkbookCreateSheetPermission(unitId)?.id));
 
-    useEffect(() => {
-        const subscription = sheetBarService.scroll$.subscribe((state: IScrollState) => {
-            updateScrollButtonState(state);
-        });
-
-        return () => {
-            subscription.unsubscribe();
-        };
-    }, []);
-
     const updateScrollButtonState = (state: IScrollState) => {
         const { leftEnd, rightEnd } = state;
         setLeftScrollState(leftEnd);
         setRightScrollState(rightEnd);
     };
 
+    useEffect(() => {
+        const subscription = sheetBarService.scroll$.subscribe(throttle((state: IScrollState) => {
+            updateScrollButtonState(state);
+        }, 100));
+
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, []);
+
     // Complete the _addSheet, handleScrollLeft, and handleScrollRight functions
     const addSheet = () => {
         commandService.executeCommand(InsertSheetCommand.id);
diff --git a/packages/sheets-ui/src/views/sheet-bar/sheet-bar-button/SheetBarButton.tsx b/packages/sheets-ui/src/views/sheet-bar/sheet-bar-button/SheetBarButton.tsx
index 7a5fc8ea50..366b7c36bb 100644
--- a/packages/sheets-ui/src/views/sheet-bar/sheet-bar-button/SheetBarButton.tsx
+++ b/packages/sheets-ui/src/views/sheet-bar/sheet-bar-button/SheetBarButton.tsx
@@ -53,7 +53,16 @@ export function SheetBarButton(props: IBaseSheetBarButtonProps) {
     };
 
     return (
-        <Button data-u-comp="sheet-bar-append-button" size="small" disabled={disabled} onClick={handleClick} style={style} {...restProps} variant="text" className={className}>
+        <Button
+            data-u-comp="sheet-bar-append-button"
+            className={className}
+            size="small"
+            disabled={disabled}
+            style={style}
+            variant="text"
+            onClick={handleClick}
+            {...restProps}
+        >
             {children}
         </Button>
     );
diff --git a/packages/thread-comment-ui/src/views/thread-comment-editor/index.tsx b/packages/thread-comment-ui/src/views/thread-comment-editor/index.tsx
index f4c5d2a8e1..dc9b660d0f 100644
--- a/packages/thread-comment-ui/src/views/thread-comment-editor/index.tsx
+++ b/packages/thread-comment-ui/src/views/thread-comment-editor/index.tsx
@@ -130,9 +130,8 @@ export const ThreadCommentEditor = forwardRef<IThreadCommentEditorInstance, IThr
             />
             {editing
                 ? (
-                    <div className="univer-mt-3 univer-flex univer-flex-row univer-justify-end">
+                    <div className="univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2">
                         <Button
-                            style={{ marginRight: 12 }}
                             onClick={() => {
                                 onCancel?.();
                                 setEditing(false);
diff --git a/packages/thread-comment-ui/src/views/thread-comment-tree/index.tsx b/packages/thread-comment-ui/src/views/thread-comment-tree/index.tsx
index 7cbc120e93..0937339548 100644
--- a/packages/thread-comment-ui/src/views/thread-comment-tree/index.tsx
+++ b/packages/thread-comment-ui/src/views/thread-comment-tree/index.tsx
@@ -356,18 +356,14 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
     return (
         <div
             id={`${prefix}-${unitId}-${subUnitId}-${id}`}
-            className={clsx(
-                `
-                  univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4
-                  dark:!univer-bg-gray-900 dark:!univer-text-white
-                `,
-                borderClassName,
-                {
-                    'univer-w-[278px]': !full,
-                    'univer-w-full': full,
-                    'univer-shadow': !resolved && (showHighlight || isHover || prefix === 'cell'),
-                }
-            )}
+            className={clsx(`
+              univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4
+              dark:!univer-bg-gray-900 dark:!univer-text-white
+            `, borderClassName, {
+                'univer-w-[278px]': !full,
+                'univer-w-full': full,
+                'univer-shadow': !resolved && (showHighlight || isHover || prefix === 'cell'),
+            })}
             style={style}
             onClick={onClick}
             onMouseEnter={() => {
@@ -379,16 +375,14 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
                 setIsHover(false);
             }}
         >
-            {!resolved && showHighlight
-                ? (
-                    <div
-                        className={`
-                          univer-absolute univer-left-0 univer-right-0 univer-top-0 univer-h-1.5 univer-rounded-t-md
-                          univer-bg-yellow-400
-                        `}
-                    />
-                )
-                : null}
+            {!resolved && showHighlight && (
+                <div
+                    className={`
+                      univer-absolute univer-left-0 univer-right-0 univer-top-0 univer-h-1.5 univer-rounded-t-md
+                      univer-bg-yellow-400
+                    `}
+                />
+            )}
             <div
                 className={`
                   univer-mb-4 univer-flex univer-flex-row univer-items-center univer-justify-between univer-text-sm
@@ -410,44 +404,41 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
                         </div>
                     </Tooltip>
                 </div>
-                {comments
-                    ? (
-                        <div className="univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row">
-                            <div
-                                className={clsx(
-                                    `
+                {!!comments && (
+                    <div className="univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row">
+                        <div
+                            className={clsx(
+                                `
+                                  univer-ml-1 univer-inline-flex univer-h-6 univer-w-6 univer-cursor-pointer
+                                  univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base
+                                  dark:hover:!univer-bg-gray-800
+                                  hover:univer-bg-gray-50
+                                `,
+                                {
+                                    'univer-text-green-500': resolved,
+                                }
+                            )}
+                            onClick={handleResolve}
+                        >
+                            {resolved ? <ResolvedSingle /> : <SolveSingle />}
+                        </div>
+                        {currentUser?.userID === comments.root.personId
+                            ? (
+                                <div
+                                    className={`
                                       univer-ml-1 univer-inline-flex univer-h-6 univer-w-6 univer-cursor-pointer
                                       univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base
                                       dark:hover:!univer-bg-gray-800
                                       hover:univer-bg-gray-50
-                                    `,
-                                    {
-                                        'univer-text-green-500': resolved,
-                                    }
-                                )}
-                                onClick={handleResolve}
-                            >
-                                {resolved ? <ResolvedSingle /> : <SolveSingle />}
-                            </div>
-                            {currentUser?.userID === comments.root.personId
-                                ? (
-                                    <div
-                                        className={`
-                                          univer-ml-1 univer-inline-flex univer-h-6 univer-w-6 univer-cursor-pointer
-                                          univer-items-center univer-justify-center univer-rounded-[3px]
-                                          univer-text-base
-                                          dark:hover:!univer-bg-gray-800
-                                          hover:univer-bg-gray-50
-                                        `}
-                                        onClick={handleDeleteRoot}
-                                    >
-                                        <DeleteSingle />
-                                    </div>
-                                )
-                                : null}
-                        </div>
-                    )
-                    : null}
+                                    `}
+                                    onClick={handleDeleteRoot}
+                                >
+                                    <DeleteSingle />
+                                </div>
+                            )
+                            : null}
+                    </div>
+                )}
             </div>
             <div
                 ref={scroller}
@@ -456,7 +447,6 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
                 {renderComments.map(
                     (item) => (
                         <ThreadCommentItem
-                            onClose={onClose}
                             unitId={unitId}
                             subUnitId={subUnitId}
                             item={item}
@@ -465,6 +455,7 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
                             editing={editingId === item.id}
                             resolved={comments?.root.resolved}
                             type={type}
+                            onClose={onClose}
                             onEditingChange={(editing) => {
                                 if (editing) {
                                     setEditingId(item.id);
@@ -498,55 +489,53 @@ export const ThreadCommentTree = (props: IThreadCommentTreeProps) => {
                     )
                 )}
             </div>
-            {editorVisible
-                ? (
-                    <div>
-                        <ThreadCommentEditor
-                            key={`${autoFocus}`}
-                            ref={editorRef}
-                            type={type}
-                            unitId={unitId}
-                            subUnitId={subUnitId}
-                            onSave={async ({ text, attachments }) => {
-                                const comment: IThreadComment = {
-                                    text,
-                                    attachments,
-                                    dT: getDT(),
-                                    id: generateRandomId(),
-                                    ref: refStr!,
-                                    personId: currentUser?.userID!,
-                                    parentId: comments?.root.id,
+            {editorVisible && (
+                <div>
+                    <ThreadCommentEditor
+                        key={`${autoFocus}`}
+                        ref={editorRef}
+                        type={type}
+                        unitId={unitId}
+                        subUnitId={subUnitId}
+                        onSave={async ({ text, attachments }) => {
+                            const comment: IThreadComment = {
+                                text,
+                                attachments,
+                                dT: getDT(),
+                                id: generateRandomId(),
+                                ref: refStr!,
+                                personId: currentUser?.userID!,
+                                parentId: comments?.root.id,
+                                unitId,
+                                subUnitId,
+                                threadId: comments?.root.threadId!,
+                            };
+
+                            if (onAddComment?.(comment) === false) {
+                                return;
+                            }
+
+                            await commandService.executeCommand(
+                                AddCommentCommand.id,
+                                {
                                     unitId,
                                     subUnitId,
-                                    threadId: comments?.root.threadId!,
-                                };
-
-                                if (onAddComment?.(comment) === false) {
-                                    return;
-                                }
-
-                                await commandService.executeCommand(
-                                    AddCommentCommand.id,
-                                    {
-                                        unitId,
-                                        subUnitId,
-                                        comment,
-                                    } as IAddCommentCommandParams
-                                );
-                                if (scroller.current) {
-                                    scroller.current.scrollTop = scroller.current.scrollHeight;
-                                }
-                            }}
-                            autoFocus={autoFocus || (!comments)}
-                            onCancel={() => {
-                                if (!comments) {
-                                    onClose?.();
-                                }
-                            }}
-                        />
-                    </div>
-                )
-                : null}
+                                    comment,
+                                } as IAddCommentCommandParams
+                            );
+                            if (scroller.current) {
+                                scroller.current.scrollTop = scroller.current.scrollHeight;
+                            }
+                        }}
+                        autoFocus={autoFocus || (!comments)}
+                        onCancel={() => {
+                            if (!comments) {
+                                onClose?.();
+                            }
+                        }}
+                    />
+                </div>
+            )}
         </div>
     );
 };
diff --git a/packages/ui/src/common/component-manager.ts b/packages/ui/src/common/component-manager.ts
index 25b42b84d2..7299d89ef0 100644
--- a/packages/ui/src/common/component-manager.ts
+++ b/packages/ui/src/common/component-manager.ts
@@ -298,12 +298,11 @@ export class ComponentManager {
             return value.component;
         } else if (value?.framework === 'vue3') {
             // TODO: slot support
-            return (props: any) => cloneElement(
+            // eslint-disable-next-line ts/no-explicit-any, react/no-clone-element
+            return (props: Record<string, any>) => cloneElement(
                 createElement(VueComponentWrapper, {
                     component: value.component,
-                    props: {
-                        ...props,
-                    },
+                    props,
                 })
             );
         } else {
@@ -329,6 +328,7 @@ async function renderVue3Component(VueComponent: ReturnType<typeof defineCompone
             document.body.removeChild(container);
         };
     } catch (error) {
+        console.warn('Vue3 component render error', error);
     }
 }
 
diff --git a/packages/ui/src/components/custom-label/CustomLabel.tsx b/packages/ui/src/components/custom-label/CustomLabel.tsx
index b648eedfef..18a9eca6cc 100644
--- a/packages/ui/src/components/custom-label/CustomLabel.tsx
+++ b/packages/ui/src/components/custom-label/CustomLabel.tsx
@@ -110,13 +110,31 @@ export function CustomLabel(props: ICustomLabelProps) {
         const CustomComponent = componentManager.get(labelName);
 
         if (CustomComponent) {
-            nodes.push(<CustomComponent key={index++} {...customProps} className={className} value={realValue} />);
+            nodes.push(
+                <CustomComponent
+                    key={index++}
+                    {...customProps}
+                    className={className}
+                    value={realValue}
+                />
+            );
         } else {
-            nodes.push(<span key={index++} className={className}>{localeService.t(labelName)}</span>);
+            nodes.push(
+                <span
+                    key={index++}
+                    className={className}
+                >
+                    {localeService.t(labelName)}
+                </span>
+            );
         }
     }
     if (title) {
-        nodes.push(<span key={index++} className={className}>{typeof title === 'string' ? localeService.t(title) : title}</span>);
+        nodes.push(
+            <span key={index++} className={className}>
+                {typeof title === 'string' ? localeService.t(title) : title}
+            </span>
+        );
     }
 
     return <>{nodes}</>;
diff --git a/packages/ui/src/components/heading-item/index.tsx b/packages/ui/src/components/heading-item/index.tsx
index c400ac3f91..26b5199119 100644
--- a/packages/ui/src/components/heading-item/index.tsx
+++ b/packages/ui/src/components/heading-item/index.tsx
@@ -16,6 +16,7 @@
 
 import type { NamedStyleType } from '@univerjs/core';
 import { LocaleService, NAMED_STYLE_MAP } from '@univerjs/core';
+import { clsx } from '@univerjs/design';
 import { useDependency } from '../../utils/di';
 
 export const HeadingItem = (props: { value: NamedStyleType; text: string }) => {
@@ -26,10 +27,11 @@ export const HeadingItem = (props: { value: NamedStyleType; text: string }) => {
 
     return (
         <span
-            className="univer-text-sm"
+            className={clsx('univer-text-sm', {
+                'univer-font-bold': style?.bl,
+            })}
             style={{
                 fontSize: style?.fs,
-                fontWeight: style?.bl ? 'bold' : 'normal',
                 color: style?.cl?.rgb ?? undefined,
             }}
         >
diff --git a/packages/ui/src/views/components/dom/FloatDom.tsx b/packages/ui/src/views/components/dom/FloatDom.tsx
index 11063ec463..73f7fd66f3 100644
--- a/packages/ui/src/views/components/dom/FloatDom.tsx
+++ b/packages/ui/src/views/components/dom/FloatDom.tsx
@@ -147,8 +147,8 @@ export const FloatDomSingle = memo((props: { layer: IFloatDom; id: string }) =>
             <div
                 id={id}
                 ref={innerDomRef}
-                className="univer-overflow-hidden"
-                style={{ position: 'absolute', ...innerStyle.current }}
+                className="univer-absolute univer-overflow-hidden"
+                style={{ ...innerStyle.current }}
             >
                 {component}
             </div>
diff --git a/packages/ui/src/views/components/dom/print.tsx b/packages/ui/src/views/components/dom/print.tsx
index 37f83249ab..9276c89cf3 100644
--- a/packages/ui/src/views/components/dom/print.tsx
+++ b/packages/ui/src/views/components/dom/print.tsx
@@ -71,16 +71,13 @@ export const PrintFloatDomSingle = memo((props: { layer: IFloatDom; id: string;
     return (
         <div
             ref={domRef}
-            className="univer-z-10"
+            className="univer-absolute univer-z-10 univer-origin-center univer-overflow-hidden"
             style={{
-                position: 'absolute',
                 top: topRef.current,
                 left: leftRef.current,
                 width: Math.max(position.endX - position.startX - 2, 0),
                 height: Math.max(position.endY - position.startY - 2, 0),
                 transform: transformRef.current,
-                overflow: 'hidden',
-                transformOrigin: 'center center',
             }}
             onPointerMove={(e) => {
                 layer.onPointerMove(e.nativeEvent);
@@ -96,10 +93,10 @@ export const PrintFloatDomSingle = memo((props: { layer: IFloatDom; id: string;
             }}
         >
             <div
-                id={id}
                 ref={innerDomRef}
-                className="univer-overflow-hidden"
-                style={{ position: 'absolute', ...innerStyle }}
+                id={id}
+                className="univer-absolute univer-overflow-hidden"
+                style={{ ...innerStyle }}
             >
                 {component}
             </div>
diff --git a/packages/ui/src/views/components/popup/RectPopup.tsx b/packages/ui/src/views/components/popup/RectPopup.tsx
index 6718277f8e..811b9dd305 100644
--- a/packages/ui/src/views/components/popup/RectPopup.tsx
+++ b/packages/ui/src/views/components/popup/RectPopup.tsx
@@ -19,6 +19,7 @@ import type { RefObject } from 'react';
 import type { Observable } from 'rxjs';
 import type { IUniverUIConfig } from '../../../controllers/config.schema';
 import { IConfigService } from '@univerjs/core';
+import { clsx } from '@univerjs/design';
 import React, { createContext, useContext, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useEvent } from '../../../components/hooks/event';
@@ -323,10 +324,13 @@ function RectPopup(props: IRectPopupProps) {
             <section
                 data-u-comp="rect-popup"
                 ref={nodeRef}
-                className={`
+                className={clsx(`
                   univer-pointer-events-auto univer-fixed univer-left-[-9999px] univer-top-[-9999px] univer-z-[1020]
-                `}
-                style={{ ...positionRef.current, ...hidden ? { display: 'none' } : null, zIndex }}
+                `, {
+                    'univer-hidden': hidden,
+                    'univer-animate-in univer-fade-in-70': !hidden,
+                })}
+                style={{ ...positionRef.current, zIndex }}
                 onPointerDown={(e) => e.stopPropagation()}
                 onClick={onClick}
                 onPointerEnter={onPointerEnter}
diff --git a/packages/ui/src/views/components/ribbon/Ribbon.tsx b/packages/ui/src/views/components/ribbon/Ribbon.tsx
index 9271dd9cf8..6a0307a9e3 100644
--- a/packages/ui/src/views/components/ribbon/Ribbon.tsx
+++ b/packages/ui/src/views/components/ribbon/Ribbon.tsx
@@ -220,7 +220,7 @@ export function Ribbon(props: IRibbonProps) {
                     for (const { width, key } of sortedToolbarItems) {
                         totalWidth += width + 8;
 
-                        if (totalWidth >= avaliableWidth) {
+                        if (totalWidth > avaliableWidth) {
                             newCollapsedIds.push(key);
                         }
                     }
@@ -372,6 +372,7 @@ export function Ribbon(props: IRibbonProps) {
                               univer-pl-3 univer-pr-2 univer-text-sm univer-text-white
                               dark:!univer-bg-gray-200 dark:!univer-text-gray-800
                             `}
+                            onClick={() => setGroupSelectorVisible(true)}
                         >
                             {localeService.t(activatedTab)}
                             <MoreDownSingle
@@ -401,9 +402,15 @@ export function Ribbon(props: IRibbonProps) {
 
                     {/* More functions dropdown */}
                     {collapsedIds.length > 0 && (
-                        <div data-u-comp="ribbon-toolbar-more" className="univer-pl-2">
+                        <div
+                            data-u-comp="ribbon-toolbar-more"
+                            className={`
+                              univer-pl-2
+                              rtl:univer-pr-2
+                            `}
+                        >
                             <Dropdown
-                                collisionPadding={{ right: 12 }}
+                                collisionPadding={{ right: 12, left: 12 }}
                                 overlay={(
                                     <div
                                         className={`
diff --git a/packages/ui/src/views/components/ribbon/TooltipButtonWrapper.tsx b/packages/ui/src/views/components/ribbon/TooltipButtonWrapper.tsx
index dc9cda9f4e..e4cf93158d 100644
--- a/packages/ui/src/views/components/ribbon/TooltipButtonWrapper.tsx
+++ b/packages/ui/src/views/components/ribbon/TooltipButtonWrapper.tsx
@@ -66,9 +66,9 @@ export const TooltipWrapper = forwardRef<ITooltipWrapperRef, ITooltipProps>((pro
 
     return (
         <Tooltip
-            {...tooltipProps}
             visible={tooltipVisible}
             onVisibleChange={handleChangeTooltipVisible}
+            {...tooltipProps}
         >
             <span ref={spanRef}>
                 <TooltipWrapperContext.Provider value={contextValue}>
@@ -81,7 +81,7 @@ export const TooltipWrapper = forwardRef<ITooltipWrapperRef, ITooltipProps>((pro
 
 export function DropdownWrapper(props: Omit<Partial<IDropdownProps>, 'overlay'> & { overlay: ReactNode; align?: 'start' | 'end' | 'center' }) {
     const { children, overlay, disabled, align = 'start' } = props;
-    const { setDropdownVisible } = useContext(TooltipWrapperContext);
+    const { dropdownVisible, setDropdownVisible } = useContext(TooltipWrapperContext);
 
     function handleVisibleChange(visible: boolean) {
         setDropdownVisible(visible);
@@ -96,6 +96,7 @@ export function DropdownWrapper(props: Omit<Partial<IDropdownProps>, 'overlay'>
                 </div>
             )}
             disabled={disabled}
+            open={dropdownVisible}
             onOpenChange={handleVisibleChange}
         >
             <div className="univer-h-full" onClick={(e) => e.stopPropagation()}>
@@ -157,7 +158,7 @@ export function DropdownMenuWrapper({
     disabled?: boolean;
     onOptionSelect: (option: IValueOption) => void;
 }) {
-    const { setDropdownVisible } = useContext(TooltipWrapperContext);
+    const { dropdownVisible, setDropdownVisible } = useContext(TooltipWrapperContext);
 
     const menuManagerService = useDependency(IMenuManagerService);
     const [hiddenStates, setHiddenStates] = useState<Record<string, boolean>>({});
@@ -280,6 +281,7 @@ export function DropdownMenuWrapper({
                 align="start"
                 items={items}
                 disabled={disabled}
+                open={dropdownVisible}
                 onOpenChange={handleVisibleChange}
             >
                 {children}
@@ -327,6 +329,7 @@ export function DropdownMenuWrapper({
                 align="start"
                 items={items}
                 disabled={disabled}
+                open={dropdownVisible}
                 onOpenChange={handleVisibleChange}
             >
                 {children}