Repository: dream-num/univer
Pull request #5063: feat(filter-ui): refactor less to tailwindcss
Author: login: wzhudev
Created: 2025-04-21T12:43:27Z | Merged: 2025-04-22T09:44:38Z

<!--
 Thank you for submitting a Pull Request.
 Please read our Pull Request guidelines:
 https://github.com/dream-num/univer/blob/dev/CONTRIBUTING.md#submitting-pull-requests
-->

<!-- Associate issues with the pull request if there is one. Separate them width commas. -->
<!-- Feel free to delete this if there is no related issue. -->
close #xxx

<!-- A description of the proposed changes. -->

<!-- How to test them. -->

<!-- Uncomment the below lines if there are breaking changes introduced in this PR. -->
<!-- BREAKING CHANGE:
Before:

After: -->

## Pull Request Checklist

- [ ] Related tickets or issues have been linked in the PR description (or missing issue).
- [ ] [Naming convention](https://github.com/dream-num/univer/blob/dev/docs/NAMING_CONVENTION.md) is followed (**do please** check it especially when you created new plugins, commands and resources).
- [ ] Unit tests have been added for the changes (if applicable).
- [ ] Breaking changes have been documented (or no breaking changes introduced in this PR).



Diff:
diff --git a/e2e/visual-comparison/docs/docs-visual-comparison.spec.ts-snapshots/default-doc-ci-chromium-linux.png b/e2e/visual-comparison/docs/docs-visual-comparison.spec.ts-snapshots/default-doc-ci-chromium-linux.png
index b75c3f205701..6c87f303fb26 100644
Binary files a/e2e/visual-comparison/docs/docs-visual-comparison.spec.ts-snapshots/default-doc-ci-chromium-linux.png and b/e2e/visual-comparison/docs/docs-visual-comparison.spec.ts-snapshots/default-doc-ci-chromium-linux.png differ
diff --git a/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png
index f9f987a6bce1..1c5c0270d9ae 100644
Binary files a/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts-snapshots/switching-render-unit-ci-chromium-linux.png differ
diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png
index f9f987a6bce1..d532b2f21300 100644
Binary files a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/default-sheet-fullpage-ci-chromium-linux.png differ
diff --git a/packages/sheets-filter-ui/src/views/components/SheetsFilterByConditionsPanel.tsx b/packages/sheets-filter-ui/src/views/components/SheetsFilterByConditionsPanel.tsx
index 0b449de0d8f7..113b9663db54 100644
--- a/packages/sheets-filter-ui/src/views/components/SheetsFilterByConditionsPanel.tsx
+++ b/packages/sheets-filter-ui/src/views/components/SheetsFilterByConditionsPanel.tsx
@@ -24,8 +24,6 @@ import { useDependency, useObservable } from '@univerjs/ui';
 import React, { useCallback, useMemo } from 'react';
 import { FilterConditionItems } from '../../models/conditions';
 
-import styles from './index.module.less';
-
 /**
  * Filter by conditions.
  */
@@ -75,17 +73,29 @@ export function FilterByCondition(props: { model: ByConditionsModel }) {
     }
 
     return (
-        <div className={styles.sheetsFilterPanelConditionsContainer}>
+        <div
+            data-univer-comp-sheets-filter-panel-conditions-container
+            className="univer-flex univer-h-full univer-flex-col"
+        >
             {/* primary condition */}
             {(condition && formParams) && (
                 <>
                     <Select value={condition.operator} options={primaryOptions} onChange={onPrimaryConditionChange} />
                     {FilterConditionItems.getItemByOperator(condition.operator).numOfParameters !== 0
                         ? (
-                            <div className={styles.sheetsFilterPanelConditionsContainerInner}>
+                            <div
+                                data-univer-comp-sheets-filter-panel-conditions-container-inner
+                                className={`
+                                  univer-flex-grow univer-overflow-hidden univer-rounded-md univer-border
+                                  univer-border-gray-200 univer-p-2
+                                `}
+                            >
                                 {condition.numOfParameters >= 1 && renderSecondaryCondition(formParams.operator1!, formParams.val1 ?? '', 'operator1')}
                                 {condition.numOfParameters >= 2 && renderSecondaryCondition(formParams.operator2!, formParams.val2 ?? '', 'operator2')}
-                                <div className={styles.sheetsFilterPanelConditionsDesc}>
+                                <div
+                                    data-univer-comp-sheets-filter-panel-conditions-desc
+                                    className="univer-mt-[-6px] univer-text-xs univer-text-gray-500"
+                                >
                                     {localeService.t('sheets-filter.panel.?')}
                                     <br />
                                     {localeService.t('sheets-filter.panel.*')}
@@ -140,9 +150,7 @@ function usePrimaryOptions(localeService: LocaleService): ISelectProps['options'
                 { label: localeService.t(FilterConditionItems.CUSTOM.label), value: FilterConditionItems.CUSTOM.operator },
             ],
         },
-    ] as ISelectProps['options'],
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    [locale, localeService]);
+    ] as ISelectProps['options'], [locale, localeService]);
 }
 
 function useSecondaryOptions(localeService: LocaleService): ISelectProps['options'] {
@@ -150,7 +158,5 @@ function useSecondaryOptions(localeService: LocaleService): ISelectProps['option
 
     return useMemo(() => FilterConditionItems.ALL_CONDITIONS
         .filter((c) => c.numOfParameters !== 2)
-        .map((c) => ({ label: localeService.t(c.label), value: c.operator })) as ISelectProps['options'],
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    [locale, localeService]);
+        .map((c) => ({ label: localeService.t(c.label), value: c.operator })) as ISelectProps['options'], [locale, localeService]);
 }
diff --git a/packages/sheets-filter-ui/src/views/components/SheetsFilterByValuesPanel.tsx b/packages/sheets-filter-ui/src/views/components/SheetsFilterByValuesPanel.tsx
index 1a49d2dbfd23..4acde672de8c 100644
--- a/packages/sheets-filter-ui/src/views/components/SheetsFilterByValuesPanel.tsx
+++ b/packages/sheets-filter-ui/src/views/components/SheetsFilterByValuesPanel.tsx
@@ -20,7 +20,6 @@ import { Checkbox, Input, Tree } from '@univerjs/design';
 import { useDependency, useObservable } from '@univerjs/ui';
 import React, { useCallback } from 'react';
 import { statisticFilterByValueItems } from '../../models/utils';
-import styles from './index.module.less';
 
 /**
  * Filter by values.
@@ -62,7 +61,10 @@ export function FilterByValue(props: { model: ByValuesModel }) {
     }
 
     return (
-        <div className={styles.sheetsFilterPanelValuesContainer}>
+        <div
+            data-univer-comp-sheets-filter-panel-values-container
+            className="univer-flex univer-h-full univer-flex-col"
+        >
             <Input
                 autoFocus
                 value={searchText}
@@ -70,29 +72,52 @@ export function FilterByValue(props: { model: ByValuesModel }) {
                 onChange={onSearchValueChange}
             />
             <div
+                data-univer-comp-sheets-filter-panel
                 className={`
                   univer-mt-2 univer-box-border univer-flex univer-flex-grow univer-flex-col univer-overflow-hidden
                   univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-px-2 univer-py-2.5
                 `}
             >
-                {/* The on-top select all button */}
-                <div className={styles.sheetsFilterPanelValuesItem}>
-                    <div className={styles.sheetsFilterPanelValuesItemInner}>
+                {/* The on-top "Select All" button */}
+                <div
+                    data-univer-comp-sheets-filter-panel-values-item
+                    className="univer-box-border univer-h-8 univer-w-full univer-py-0.5"
+                >
+                    <div
+                        data-univer-comp-sheets-filter-panel-values-item-inner
+                        className={`
+                          univer-box-border univer-flex univer-h-7 univer-items-center univer-rounded-md univer-pb-0
+                          univer-pl-5 univer-pr-0.5 univer-pt-0 univer-text-[13px]
+                        `}
+                    >
                         <Checkbox
                             indeterminate={indeterminate}
                             disabled={items.length === 0}
                             checked={allChecked}
                             onChange={onCheckAllToggled}
                         />
-                        <span className={styles.sheetsFilterPanelValuesItemText}>
+                        <span
+                            data-univer-comp-sheets-filter-panel-values-item-text
+                            className={`
+                              univer-mx-1 univer-inline-block univer-flex-shrink univer-overflow-hidden
+                              univer-text-ellipsis univer-whitespace-nowrap univer-text-gray-950
+                              dark:univer-text-white
+                            `}
+                        >
                             {`${localeService.t('sheets-filter.panel.select-all')}`}
                         </span>
-                        <span className={styles.sheetsFilterPanelValuesItemCount}>
+                        <span
+                            data-univer-comp-sheets-filter-panel-values-item-count
+                            className={`
+                              univer-text-gray-400
+                              dark:univer-text-gray-500
+                            `}
+                        >
                             {`(${stat.checked}/${stat.checked + stat.unchecked})`}
                         </span>
                     </div>
                 </div>
-                <div className={styles.sheetsFilterPanelValuesVirtual}>
+                <div data-univer-comp-sheets-filter-panel-values-virtual className="univer-flex-grow">
                     <Tree
                         data={items}
                         defaultExpandAll={false}
@@ -107,6 +132,8 @@ export function FilterByValue(props: { model: ByValuesModel }) {
                           univer-pr-2 univer-border-box univer-max-w-[245px] univer-rounded-md
                           [&:hover_a]:univer-inline-block
                           hover:univer-bg-gray-50 univer-h-full
+                          univer-text-gray-950
+                          dark:univer-text-white
                         `}
                         attachRender={(item) => (
                             <div
@@ -115,7 +142,15 @@ export function FilterByValue(props: { model: ByValuesModel }) {
                                   univer-items-center univer-justify-between univer-text-[13px] univer-text-primary-500
                                 `}
                             >
-                                <span className={styles.sheetsFilterPanelValuesItemCount}>{`(${item.count})`}</span>
+                                <span
+                                    data-univer-comp-sheets-filter-panel-values-item-count
+                                    className={`
+                                      univer-text-gray-400
+                                      dark:univer-text-gray-500
+                                    `}
+                                >
+                                    {`(${item.count})`}
+                                </span>
                                 <a
                                     className={`
                                       univer-box-border univer-hidden univer-h-4 univer-whitespace-nowrap univer-px-1.5
diff --git a/packages/sheets-filter-ui/src/views/components/SheetsFilterPanel.tsx b/packages/sheets-filter-ui/src/views/components/SheetsFilterPanel.tsx
index b99221c0d8fc..e7477e939501 100644
--- a/packages/sheets-filter-ui/src/views/components/SheetsFilterPanel.tsx
+++ b/packages/sheets-filter-ui/src/views/components/SheetsFilterPanel.tsx
@@ -24,7 +24,6 @@ import { useCallback, useMemo } from 'react';
 import { of } from 'rxjs';
 import { ChangeFilterByOperation, CloseFilterPanelOperation } from '../../commands/operations/sheets-filter.operation';
 import { FilterBy, SheetsFilterPanelService } from '../../services/sheets-filter-panel.service';
-import styles from './index.module.less';
 import { FilterByCondition } from './SheetsFilterByConditionsPanel';
 import { FilterByValue } from './SheetsFilterByValuesPanel';
 
@@ -70,12 +69,22 @@ export function FilterPanel() {
     const FilterPanelEmbedPointPart = useComponentsOfPart(SheetsUIPart.FILTER_PANEL_EMBED_POINT);
 
     return (
-        <div className={styles.sheetsFilterPanel}>
+        <div
+            data-u-comp-sheets-filter-panel
+            className={`
+              univer-box-border univer-flex univer-h-[432px] univer-w-[312px] univer-flex-col univer-overflow-hidden
+              univer-rounded-lg univer-bg-white univer-p-4 univer-shadow-lg
+              dark:univer-bg-black
+            `}
+        >
             <ComponentContainer
                 components={FilterPanelEmbedPointPart}
                 sharedProps={{ range, colIndex, onClose: onCancel }}
             />
-            <div className={styles.sheetsFilterPanelHeader}>
+            <div
+                data-u-comp-sheets-filter-panel-header
+                className="univer-mb-1 univer-flex-shrink-0 univer-flex-grow-0"
+            >
                 <Segmented
                     value={filterBy}
                     items={items}
@@ -84,7 +93,10 @@ export function FilterPanel() {
             </div>
             {filterByModel
                 ? (
-                    <div className={styles.sheetsFilterPanelContent}>
+                    <div
+                        data-u-comp-sheets-filter-panel-content
+                        className="univer-flex-shrink univer-flex-grow univer-overflow-hidden univer-pt-2"
+                    >
                         {filterBy === FilterBy.VALUES
                             ? <FilterByValue model={filterByModel as ByValuesModel} />
                             : <FilterByCondition model={filterByModel as ByConditionsModel} />}
@@ -93,7 +105,13 @@ export function FilterPanel() {
                 : (
                     <div style={{ flex: 1 }} />
                 )}
-            <div className={styles.sheetsFilterPanelFooter}>
+            <div
+                data-u-comp-sheets-filter-panel-footer
+                className={`
+                  univer-mt-4 univer-inline-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-nowrap
+                  univer-justify-between univer-overflow-hidden
+                `}
+            >
                 <Button variant="link" onClick={onClearCriteria} disabled={clearFilterDisabled}>
                     {localeService.t('sheets-filter.panel.clear-filter')}
                 </Button>
diff --git a/packages/sheets-sort-ui/src/views/EmbedSortBtn.tsx b/packages/sheets-sort-ui/src/views/EmbedSortBtn.tsx
index 2e6498bf6f47..dccb1bb7a3c2 100644
--- a/packages/sheets-sort-ui/src/views/EmbedSortBtn.tsx
+++ b/packages/sheets-sort-ui/src/views/EmbedSortBtn.tsx
@@ -29,8 +29,8 @@ export interface IEmbedSortBtnProps {
     onClose: () => void;
 }
 
-export default function EmbedSortBtn(props: any) {
-    const { range, colIndex, onClose } = props as IEmbedSortBtnProps;
+export default function EmbedSortBtn(props: IEmbedSortBtnProps) {
+    const { range, colIndex, onClose } = props;
 
     const sheetsSortUIService = useDependency(SheetsSortUIService);
     const univerInstanceService = useDependency(IUniverInstanceService);
@@ -44,11 +44,18 @@ export default function EmbedSortBtn(props: any) {
         } else {
             console.warn(`Cannot find the target to sort. unitId: ${unitId}, subUnitId: ${subUnitId}, range: ${range}, colIndex: ${colIndex}`);
         }
+
         onClose();
     }, [range, colIndex, sheetsSortUIService, univerInstanceService, onClose]);
 
     return (
-        <div className={styles.embedSortBtnContainer}>
+        <div
+            data-univer-comp-embed-sort-btn-container
+            className={`
+              univer-mb-3 univer-flex univer-w-full univer-items-center univer-justify-center univer-py-[6px]
+              univer-text-sm
+            `}
+        >
             <div
                 className={`
                   ${styles.embedSortBtn}
diff --git a/packages/sheets-sort-ui/src/views/index.module.less b/packages/sheets-sort-ui/src/views/index.module.less
index f477a55ceea7..04f9b805de85 100644
--- a/packages/sheets-sort-ui/src/views/index.module.less
+++ b/packages/sheets-sort-ui/src/views/index.module.less
@@ -110,8 +110,6 @@
 }
 
 .embed-sort-btn-container {
-    display: flex;
-    margin-bottom: 12px;
     .embed-sort-btn {
         font-size: 13px;
         font-style: normal;
diff --git a/packages/sheets/src/commands/commands/utils/target-util.ts b/packages/sheets/src/commands/commands/utils/target-util.ts
index 510146d8c8c5..7bc8c7e8f479 100644
--- a/packages/sheets/src/commands/commands/utils/target-util.ts
+++ b/packages/sheets/src/commands/commands/utils/target-util.ts
@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { type IUniverInstanceService, type Nullable, UniverInstanceType, type Workbook, type Worksheet } from '@univerjs/core';
+import type { IUniverInstanceService, Nullable, Workbook, Worksheet } from '@univerjs/core';
+import { UniverInstanceType } from '@univerjs/core';
 
 export function getSheetCommandTargetWorkbook(univerInstanceService: IUniverInstanceService, params: { unitId?: string }): Nullable<{
     workbook: Workbook;
@@ -22,8 +23,8 @@ export function getSheetCommandTargetWorkbook(univerInstanceService: IUniverInst
 }> {
     const { unitId } = params;
     const workbook = unitId
-        ? univerInstanceService.getUniverSheetInstance(unitId)
-        : univerInstanceService.getCurrentUnitForType<Workbook>(UniverInstanceType.UNIVER_SHEET);
+        ? univerInstanceService.getUnit<Workbook>(unitId, UniverInstanceType.UNIVER_SHEET)
+        : univerInstanceService.getCurrentUnitOfType<Workbook>(UniverInstanceType.UNIVER_SHEET);
 
     if (!workbook) return null;
 
@@ -54,8 +55,8 @@ export function getSheetCommandTarget(univerInstanceService: IUniverInstanceServ
     const { unitId, subUnitId } = params;
 
     const workbook = unitId
-        ? univerInstanceService.getUniverSheetInstance(unitId)
-        : univerInstanceService.getCurrentUnitForType<Workbook>(UniverInstanceType.UNIVER_SHEET);
+        ? univerInstanceService.getUnit<Workbook>(unitId, UniverInstanceType.UNIVER_SHEET)
+        : univerInstanceService.getCurrentUnitOfType<Workbook>(UniverInstanceType.UNIVER_SHEET);
     if (!workbook) return null;
 
     const worksheet = subUnitId ? workbook.getSheetBySheetId(subUnitId) : workbook.getActiveSheet(true);
@@ -74,7 +75,7 @@ export function getSheetCommandTarget(univerInstanceService: IUniverInstanceServ
 export function getSheetMutationTarget(univerInstanceService: IUniverInstanceService, params: { unitId: string; subUnitId: string }): Nullable<Pick<IResult, 'workbook' | 'worksheet'>> {
     const { unitId, subUnitId } = params;
 
-    const workbook = univerInstanceService.getUniverSheetInstance(unitId);
+    const workbook = univerInstanceService.getUnit<Workbook>(unitId, UniverInstanceType.UNIVER_SHEET);
     if (!workbook) return null;
 
     const worksheet = workbook.getSheetBySheetId(subUnitId);
diff --git a/packages/ui/src/services/parts/parts.service.ts b/packages/ui/src/services/parts/parts.service.ts
index 1c9f46fda126..647797fe0bb9 100644
--- a/packages/ui/src/services/parts/parts.service.ts
+++ b/packages/ui/src/services/parts/parts.service.ts
@@ -15,9 +15,10 @@
  */
 
 import type { IDisposable } from '@univerjs/core';
+import type { Observable } from 'rxjs';
 import type { ComponentType } from '../../common/component-manager';
 import { createIdentifier, Disposable, toDisposable } from '@univerjs/core';
-import { type Observable, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 
 export type ComponentRenderer = () => ComponentType;
 type ComponentPartKey = BuiltInUIPart | string;
@@ -76,7 +77,7 @@ export class UIPartsService extends Disposable implements IUIPartsService {
         return this._uiVisible.get(part) ?? true;
     }
 
-    registerComponent(part: ComponentPartKey, componentFactory: () => React.ComponentType): IDisposable {
+    registerComponent<T>(part: ComponentPartKey, componentFactory: () => React.ComponentType<T>): IDisposable {
         const componentType = componentFactory();
         const components = (
             this._componentsByPart.get(part)
diff --git a/packages/ui/src/views/components/ribbon/ToolbarItem.tsx b/packages/ui/src/views/components/ribbon/ToolbarItem.tsx
index b2ed9134fe2d..45270cacb0b1 100644
--- a/packages/ui/src/views/components/ribbon/ToolbarItem.tsx
+++ b/packages/ui/src/views/components/ribbon/ToolbarItem.tsx
@@ -240,12 +240,16 @@ export const ToolbarItem = forwardRef<ITooltipWrapperRef, IDisplayMenuItem<IMenu
     }
 
     return !hidden && (
-        <TooltipWrapper
-            ref={ref}
-            title={tooltipTitle}
-            placement="bottom"
-        >
-            {renderItem()}
-        </TooltipWrapper>
+        tooltipTitle
+            ? (
+                <TooltipWrapper
+                    ref={ref}
+                    title={tooltipTitle}
+                    placement="bottom"
+                >
+                    {renderItem()}
+                </TooltipWrapper>
+            )
+            : renderItem()
     );
 });


Reviews:
user: login: jikkai
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-21T12:51:54Z
user: login: jikkai
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-21T12:52:05Z
user: login: jikkai
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-21T12:52:17Z

Review comments:
diff_hunk: @@ -62,37 +61,63 @@ export function FilterByValue(props: { model: ByValuesModel }) {
     }
 
     return (
-        <div className={styles.sheetsFilterPanelValuesContainer}>
+        <div
+            data-univer-comp-sheets-filter-panel-values-container
+            className="univer-flex univer-h-full univer-flex-col"
+        >
             <Input
                 autoFocus
                 value={searchText}
                 placeholder={localeService.t('sheets-filter.panel.search-placeholder')}
                 onChange={onSearchValueChange}
             />
             <div
+                data-univer-comp-sheets-filter-panel
                 className={`
                   univer-mt-2 univer-box-border univer-flex univer-flex-grow univer-flex-col univer-overflow-hidden
                   univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-px-2 univer-py-2.5
                 `}
             >
-                {/* The on-top select all button */}
-                <div className={styles.sheetsFilterPanelValuesItem}>
-                    <div className={styles.sheetsFilterPanelValuesItemInner}>
+                {/* The on-top "Select All" button */}
+                <div
+                    data-univer-comp-sheets-filter-panel-values-item
+                    className="univer-box-border univer-h-8 univer-w-full univer-py-[2px]"
path: packages/sheets-filter-ui/src/views/components/SheetsFilterByValuesPanel.tsx
user: login: jikkai
body: py-0.5
created_at: 2025-04-21T12:51:54Z
author_association: MEMBER
diff_hunk: @@ -62,37 +61,63 @@ export function FilterByValue(props: { model: ByValuesModel }) {
     }
 
     return (
-        <div className={styles.sheetsFilterPanelValuesContainer}>
+        <div
+            data-univer-comp-sheets-filter-panel-values-container
+            className="univer-flex univer-h-full univer-flex-col"
+        >
             <Input
                 autoFocus
                 value={searchText}
                 placeholder={localeService.t('sheets-filter.panel.search-placeholder')}
                 onChange={onSearchValueChange}
             />
             <div
+                data-univer-comp-sheets-filter-panel
                 className={`
                   univer-mt-2 univer-box-border univer-flex univer-flex-grow univer-flex-col univer-overflow-hidden
                   univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-px-2 univer-py-2.5
                 `}
             >
-                {/* The on-top select all button */}
-                <div className={styles.sheetsFilterPanelValuesItem}>
-                    <div className={styles.sheetsFilterPanelValuesItemInner}>
+                {/* The on-top "Select All" button */}
+                <div
+                    data-univer-comp-sheets-filter-panel-values-item
+                    className="univer-box-border univer-h-8 univer-w-full univer-py-[2px]"
+                >
+                    <div
+                        data-univer-comp-sheets-filter-panel-values-item-inner
+                        className={`
+                          univer-box-border univer-flex univer-h-7 univer-items-center univer-rounded-md univer-pb-0
+                          univer-pl-[20px] univer-pr-[2px] univer-pt-0 univer-text-[13px]
path: packages/sheets-filter-ui/src/views/components/SheetsFilterByValuesPanel.tsx
user: login: jikkai
body: pl-5 pr-0.5
created_at: 2025-04-21T12:52:05Z
author_association: MEMBER
diff_hunk: @@ -115,7 +142,15 @@ export function FilterByValue(props: { model: ByValuesModel }) {
                                   univer-items-center univer-justify-between univer-text-[13px] univer-text-primary-500
                                 `}
                             >
-                                <span className={styles.sheetsFilterPanelValuesItemCount}>{`(${item.count})`}</span>
+                                <span
+                                    data-univer-comp-sheets-filter-panel-values-item-count
+                                    className={`
+                                      univer-text-gray-400
+                                      dark:univer-text-grey-500
path: packages/sheets-filter-ui/src/views/components/SheetsFilterByValuesPanel.tsx
user: login: jikkai
body: gray-500
created_at: 2025-04-21T12:52:17Z
author_association: MEMBER

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-21T12:44:12Z
body: ## View Deployment
| 📑 Demo (React@19) | Demo (React@16) | 📚 Storybook |
| --- | --- | --- |
| [🔗 Preview link](https://univer-e1443irim-univer.vercel.app/) | [🔗 Preview link](https://univer-e1443irim-univer.vercel.app/react16/) | [🔗 Preview link](https://univer-design-93g2aq3t3-univer.vercel.app/) |
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-21T12:52:07Z
body: <!-- playwright-report-github-action -- 🎭 Playwright Tests -->

### Playwright test results

![passed](https://icongr.am/octicons/check-circle.svg?size=14&color=3fb950)  **25 passed**

#### Details

![stats](https://icongr.am/octicons/pulse.svg?size=14&color=abb4bf)  25 tests across 12 suites  
![duration](https://icongr.am/octicons/clock.svg?size=14&color=abb4bf)  6 minutes, 7 seconds  
![commit](https://icongr.am/octicons/git-pull-request.svg?size=14&color=abb4bf)  [9f921cf](https://github.com/dream-num/univer/commit/9f921cfe6df2b0f991b7b874b6a1b8a7b1ab250a)  
![info](https://icongr.am/octicons/info.svg?size=14&color=abb4bf)  For more information, [see full report]()
author_association: NONE
user: login: codecov[bot]
created_at: 2025-04-21T12:55:26Z
body: ## [Codecov](https://app.codecov.io/gh/dream-num/univer/pull/5063?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num) Report
Attention: Patch coverage is `35.71429%` with `9 lines` in your changes missing coverage. Please review.
> Project coverage is 33.04%. Comparing base [(`e2b425b`)](https://app.codecov.io/gh/dream-num/univer/commit/e2b425ba21afa827a3cac4c918aa8313fd582184?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num) to head [(`9f921cf`)](https://app.codecov.io/gh/dream-num/univer/commit/9f921cfe6df2b0f991b7b874b6a1b8a7b1ab250a?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num).
> Report is 3 commits behind head on dev.

| [Files with missing lines](https://app.codecov.io/gh/dream-num/univer/pull/5063?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num) | Patch % | Lines |
|---|---|---|
| [...ges/ui/src/views/components/ribbon/ToolbarItem.tsx](https://app.codecov.io/gh/dream-num/univer/pull/5063?src=pr&el=tree&filepath=packages%2Fui%2Fsrc%2Fviews%2Fcomponents%2Fribbon%2FToolbarItem.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num#diff-cGFja2FnZXMvdWkvc3JjL3ZpZXdzL2NvbXBvbmVudHMvcmliYm9uL1Rvb2xiYXJJdGVtLnRzeA==) | 0.00% | [3 Missing :warning: ](https://app.codecov.io/gh/dream-num/univer/pull/5063?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num) |
| [...views/components/SheetsFilterByConditionsPanel.tsx](https://app.codecov.io/gh/dream-num/univer/pull/5063?src=pr&el=tree&filepath=packages%2Fsheets-filter-ui%2Fsrc%2Fviews%2Fcomponents%2FSheetsFilterByConditionsPanel.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num#diff-cGFja2FnZXMvc2hlZXRzLWZpbHRlci11aS9zcmMvdmlld3MvY29tcG9uZW50cy9TaGVldHNGaWx0ZXJCeUNvbmRpdGlvbnNQYW5lbC50c3g=) | 0.00% | [2 Missing :warning: ](https://app.codecov.io/gh/dream-num/univer/pull/5063?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num) |
| [packages/sheets-sort-ui/src/views/EmbedSortBtn.tsx](https://app.codecov.io/gh/dream-num/univer/pull/5063?src=pr&el=tree&filepath=packages%2Fsheets-sort-ui%2Fsrc%2Fviews%2FEmbedSortBtn.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num#diff-cGFja2FnZXMvc2hlZXRzLXNvcnQtdWkvc3JjL3ZpZXdzL0VtYmVkU29ydEJ0bi50c3g=) | 0.00% | [2 Missing :warning: ](https://app.codecov.io/gh/dream-num/univer/pull/5063?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num) |
| [...lter-ui/src/views/components/SheetsFilterPanel.tsx](https://app.codecov.io/gh/dream-num/univer/pull/5063?src=pr&el=tree&filepath=packages%2Fsheets-filter-ui%2Fsrc%2Fviews%2Fcomponents%2FSheetsFilterPanel.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num#diff-cGFja2FnZXMvc2hlZXRzLWZpbHRlci11aS9zcmMvdmlld3MvY29tcG9uZW50cy9TaGVldHNGaWx0ZXJQYW5lbC50c3g=) | 0.00% | [1 Missing :warning: ](https://app.codecov.io/gh/dream-num/univer/pull/5063?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num) |
| [packages/ui/src/services/parts/parts.service.ts](https://app.codecov.io/gh/dream-num/univer/pull/5063?src=pr&el=tree&filepath=packages%2Fui%2Fsrc%2Fservices%2Fparts%2Fparts.service.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num#diff-cGFja2FnZXMvdWkvc3JjL3NlcnZpY2VzL3BhcnRzL3BhcnRzLnNlcnZpY2UudHM=) | 0.00% | [1 Missing :warning: ](https://app.codecov.io/gh/dream-num/univer/pull/5063?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num) |

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##              dev    #5063      +/-   ##
==========================================
- Coverage   33.05%   33.04%   -0.02%     
==========================================
  Files        2718     2718              
  Lines      142108   142123      +15     
  Branches    31586    31588       +2     
==========================================
- Hits        46971    46958      -13     
- Misses      95137    95165      +28     
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/dream-num/univer/pull/5063?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=dream-num).

<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE