From 34101b4ec93b56635f555084becaecf0afe98da9 Mon Sep 17 00:00:00 2001
From: Dushusir <1414556676@qq.com>
Date: Fri, 17 Nov 2023 20:39:39 +0800
Subject: [PATCH] feat(formula): select function, range selector

---
 packages/base-ui/src/components/index.ts      |  1 -
 .../range-selector/RangeSelector.tsx          | 11 ---
 .../range-selector/index.module.less          |  3 -
 .../doc-bars/Button/index.module.less         |  3 -
 packages/base-ui/tsconfig.json                |  2 +-
 .../design/src/components/input/Input.tsx     | 19 +++--
 .../design/src/components/select/Select.tsx   |  6 +-
 .../operations/editor-formula.operation.ts    |  2 +-
 .../src/controllers/formula-ui.controller.ts  |  4 +-
 .../controllers/shortcuts/prompt.shortcut.ts  |  4 +-
 .../src/locale/zh-CN.ts                       |  2 +-
 .../views/more-functions/MoreFunctions.tsx    | 15 ++--
 .../function-params/FunctionParams.tsx        | 16 ++++
 .../function-params/index.module.less         | 14 ++++
 .../views/more-functions/index.module.less    |  9 +++
 .../input-params/InputParams.tsx              | 48 ++++++++---
 .../input-params/index.module.less            | 10 ++-
 .../select-function/SelectFunction.tsx        | 51 ++++++------
 .../select-function/index.module.less         | 55 +++++++------
 .../range-selector/RangeSelector.tsx          | 79 ++++++++++++++++++
 .../range-selector/index.module.less          | 81 +++++++++++++++++++
 packages/ui-plugin-sheets/src/index.ts        |  1 +
 packages/ui-plugin-sheets/src/locale/en-US.ts |  5 ++
 packages/ui-plugin-sheets/src/locale/zh-CN.ts |  4 +
 .../sheet-bar-button/index.module.less        |  1 -
 .../sheet-bar-tabs/index.module.less          |  1 -
 26 files changed, 346 insertions(+), 101 deletions(-)
 delete mode 100644 packages/base-ui/src/components/range-selector/RangeSelector.tsx
 delete mode 100644 packages/base-ui/src/components/range-selector/index.module.less
 create mode 100644 packages/sheets-plugin-formula-ui/src/views/more-functions/function-params/FunctionParams.tsx
 create mode 100644 packages/sheets-plugin-formula-ui/src/views/more-functions/function-params/index.module.less
 create mode 100644 packages/ui-plugin-sheets/src/components/range-selector/RangeSelector.tsx
 create mode 100644 packages/ui-plugin-sheets/src/components/range-selector/index.module.less

diff --git a/packages/base-ui/src/components/index.ts b/packages/base-ui/src/components/index.ts
index cebc8c48815a..62db8296f85f 100644
--- a/packages/base-ui/src/components/index.ts
+++ b/packages/base-ui/src/components/index.ts
@@ -1,3 +1,2 @@
 export * from './custom-label';
 export * from './menu';
-export * from './range-selector/RangeSelector';
diff --git a/packages/base-ui/src/components/range-selector/RangeSelector.tsx b/packages/base-ui/src/components/range-selector/RangeSelector.tsx
deleted file mode 100644
index 7cecc04a66ff..000000000000
--- a/packages/base-ui/src/components/range-selector/RangeSelector.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Input } from '@univerjs/design';
-
-import styles from './index.module.less';
-
-export function RangeSelector() {
-    return (
-        <div className={styles.rangeSelector}>
-            <Input placeholder="Select range or input value"></Input>
-        </div>
-    );
-}
diff --git a/packages/base-ui/src/components/range-selector/index.module.less b/packages/base-ui/src/components/range-selector/index.module.less
deleted file mode 100644
index 6323c025f0d8..000000000000
--- a/packages/base-ui/src/components/range-selector/index.module.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.range-selector {
-    display: flex;
-}
\ No newline at end of file
diff --git a/packages/base-ui/src/views/components/doc-bars/Button/index.module.less b/packages/base-ui/src/views/components/doc-bars/Button/index.module.less
index 9ee16d914170..75eacb959036 100644
--- a/packages/base-ui/src/views/components/doc-bars/Button/index.module.less
+++ b/packages/base-ui/src/views/components/doc-bars/Button/index.module.less
@@ -21,7 +21,6 @@
 
     &:not([disabled]):hover {
         background-color: rgb(var(--grey-100));
-        border-color: transparent;
     }
 
     &[disabled] {
@@ -30,8 +29,6 @@
     }
 
     &-active {
-        color: rgb(var(--text-color));
         background-color: rgb(var(--grey-100));
-        border-color: transparent;
     }
 }
diff --git a/packages/base-ui/tsconfig.json b/packages/base-ui/tsconfig.json
index f35fde7a9a04..c145687492da 100644
--- a/packages/base-ui/tsconfig.json
+++ b/packages/base-ui/tsconfig.json
@@ -10,5 +10,5 @@
     "include": [
         "src/**/*",
         "test/**/*.test.(ts|tsx|js)"
-    ]
+, "../ui-plugin-sheets/src/components/range-selector"    ]
 }
diff --git a/packages/design/src/components/input/Input.tsx b/packages/design/src/components/input/Input.tsx
index 9817ef06e7a1..0a4a84616e67 100644
--- a/packages/design/src/components/input/Input.tsx
+++ b/packages/design/src/components/input/Input.tsx
@@ -5,6 +5,9 @@ import RcInput from 'rc-input';
 import styles from './index.module.less';
 
 export interface IInputProps {
+    /** Semantic DOM class */
+    className?: string;
+
     /**
      * The input affix wrapper style
      */
@@ -65,6 +68,7 @@ export interface IInputProps {
 
 export function Input(props: IInputProps) {
     const {
+        className,
         affixWrapperStyle,
         type = 'text',
         placeholder,
@@ -82,12 +86,15 @@ export function Input(props: IInputProps) {
         onChange?.(value);
     }
 
-    const _className = clsx({
-        [styles.inputAffixWrapperMini]: size === 'mini',
-        [styles.inputAffixWrapperSmall]: size === 'small',
-        [styles.inputAffixWrapperMiddle]: size === 'middle',
-        [styles.inputAffixWrapperLarge]: size === 'large',
-    });
+    const _className = clsx(
+        {
+            [styles.inputAffixWrapperMini]: size === 'mini',
+            [styles.inputAffixWrapperSmall]: size === 'small',
+            [styles.inputAffixWrapperMiddle]: size === 'middle',
+            [styles.inputAffixWrapperLarge]: size === 'large',
+        },
+        className
+    );
 
     return (
         <RcInput
diff --git a/packages/design/src/components/select/Select.tsx b/packages/design/src/components/select/Select.tsx
index bd11363c5866..425759c4f9f2 100644
--- a/packages/design/src/components/select/Select.tsx
+++ b/packages/design/src/components/select/Select.tsx
@@ -10,6 +10,9 @@ export interface ISelectProps {
      */
     value: string;
 
+    /** Semantic DOM class */
+    className?: string;
+
     /**
      * The options of select
      * @default []
@@ -26,12 +29,13 @@ export interface ISelectProps {
 }
 
 export function Select(props: ISelectProps) {
-    const { value, options = [], onChange } = props;
+    const { value, className = '', options = [], onChange } = props;
 
     const { mountContainer } = useContext(ConfigContext);
 
     return (
         <RcSelect
+            className={className}
             prefixCls={styles.select}
             getPopupContainer={() => mountContainer}
             options={options}
diff --git a/packages/sheets-plugin-formula-ui/src/commands/operations/editor-formula.operation.ts b/packages/sheets-plugin-formula-ui/src/commands/operations/editor-formula.operation.ts
index ae5e4fc9d64b..83e9f9e1a72b 100644
--- a/packages/sheets-plugin-formula-ui/src/commands/operations/editor-formula.operation.ts
+++ b/packages/sheets-plugin-formula-ui/src/commands/operations/editor-formula.operation.ts
@@ -12,7 +12,7 @@ export interface ISelectEditorFormulaOperationParam {
     keycode?: KeyCode;
 }
 
-export const SelectEditorFormluaOperation: IOperation<ISelectEditorFormulaOperationParam> = {
+export const SelectEditorFormulaOperation: IOperation<ISelectEditorFormulaOperationParam> = {
     id: 'formula-ui.operation.select-editor-formula',
     type: CommandType.OPERATION,
     handler: (accessor, params) => {
diff --git a/packages/sheets-plugin-formula-ui/src/controllers/formula-ui.controller.ts b/packages/sheets-plugin-formula-ui/src/controllers/formula-ui.controller.ts
index 99233ed499e3..94ba4b0c5db9 100644
--- a/packages/sheets-plugin-formula-ui/src/controllers/formula-ui.controller.ts
+++ b/packages/sheets-plugin-formula-ui/src/controllers/formula-ui.controller.ts
@@ -9,7 +9,7 @@ import { Disposable, ICommandService, LifecycleStages, OnLifecycle } from '@univ
 import { Inject, Injector } from '@wendellhu/redi';
 import { connectInjector } from '@wendellhu/redi/react-bindings';
 
-import { SelectEditorFormluaOperation } from '../commands/operations/editor-formula.operation';
+import { SelectEditorFormulaOperation } from '../commands/operations/editor-formula.operation';
 import { HelpFunctionOperation } from '../commands/operations/help-function.operation';
 import { InsertFunctionOperation } from '../commands/operations/insert-function.operation';
 import { MoreFunctionsOperation } from '../commands/operations/more-functions.operation';
@@ -54,7 +54,7 @@ export class FormulaUIController extends Disposable {
             MoreFunctionsOperation,
             SearchFunctionOperation,
             HelpFunctionOperation,
-            SelectEditorFormluaOperation,
+            SelectEditorFormulaOperation,
         ].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
     }
 
diff --git a/packages/sheets-plugin-formula-ui/src/controllers/shortcuts/prompt.shortcut.ts b/packages/sheets-plugin-formula-ui/src/controllers/shortcuts/prompt.shortcut.ts
index 53c49c06da8a..cf261f9abb26 100644
--- a/packages/sheets-plugin-formula-ui/src/controllers/shortcuts/prompt.shortcut.ts
+++ b/packages/sheets-plugin-formula-ui/src/controllers/shortcuts/prompt.shortcut.ts
@@ -2,7 +2,7 @@ import { DeviceInputEventType } from '@univerjs/base-render';
 import { IShortcutItem, KeyCode } from '@univerjs/base-ui';
 import { whenEditorInputFormulaActivated } from '@univerjs/ui-plugin-sheets';
 
-import { SelectEditorFormluaOperation } from '../../commands/operations/editor-formula.operation';
+import { SelectEditorFormulaOperation } from '../../commands/operations/editor-formula.operation';
 
 export const PROMPT_SELECTION_KEYCODE_LIST = [
     KeyCode.ARROW_DOWN,
@@ -17,7 +17,7 @@ export function promptSelectionShortcutItem() {
     const shortcutList: IShortcutItem[] = [];
     for (const keycode of PROMPT_SELECTION_KEYCODE_LIST) {
         shortcutList.push({
-            id: SelectEditorFormluaOperation.id,
+            id: SelectEditorFormulaOperation.id,
             binding: keycode,
             preconditions: (contextService) => whenEditorInputFormulaActivated(contextService),
             staticParameters: {
diff --git a/packages/sheets-plugin-formula-ui/src/locale/zh-CN.ts b/packages/sheets-plugin-formula-ui/src/locale/zh-CN.ts
index d1c58ff074c3..1c0b3a8419d7 100644
--- a/packages/sheets-plugin-formula-ui/src/locale/zh-CN.ts
+++ b/packages/sheets-plugin-formula-ui/src/locale/zh-CN.ts
@@ -69,7 +69,7 @@ export default {
         },
 
         moreFunctions: {
-            confirm: '确定',
+            confirm: '应用',
             prev: '上一步',
             next: '下一步',
             searchFunctionPlaceholder: '搜索函数',
diff --git a/packages/sheets-plugin-formula-ui/src/views/more-functions/MoreFunctions.tsx b/packages/sheets-plugin-formula-ui/src/views/more-functions/MoreFunctions.tsx
index fc80fa8235d6..aee4075b063a 100644
--- a/packages/sheets-plugin-formula-ui/src/views/more-functions/MoreFunctions.tsx
+++ b/packages/sheets-plugin-formula-ui/src/views/more-functions/MoreFunctions.tsx
@@ -12,34 +12,37 @@ import { SelectFunction } from './select-function/SelectFunction';
 export function MoreFunctions() {
     const [selectFunction, setSelectFunction] = useState<boolean>(true);
     const [inputParams, setInputParams] = useState<boolean>(false);
+    const [params, setParams] = useState<string[]>([]);
     const [functionInfo, setFunctionInfo] = useState<IFunctionInfo | null>(null);
 
     const localeService = useDependency(LocaleService);
     const sidebarService = useDependency(ISidebarService);
 
     function handleClickNextPrev() {
+        if (selectFunction) {
+            // TODO@Dushusir: insert function
+        }
+
         setSelectFunction(!selectFunction);
         setInputParams(!inputParams);
     }
 
     function handleConfirm() {
-        sidebarService.close();
+        // TODO@Dushusir: save function  `=${functionInfo?.functionName}(${params.join(',')})`
     }
 
     return (
         <div className={styles.formulaMoreFunctions}>
             {selectFunction && <SelectFunction onChange={setFunctionInfo}></SelectFunction>}
-            {inputParams && <InputParams functionInfo={functionInfo}></InputParams>}
-            <div>
+            {inputParams && <InputParams functionInfo={functionInfo} onChange={setParams}></InputParams>}
+            <div className={styles.formulaMoreFunctionsOperation}>
                 {selectFunction && (
                     <Button type="primary" onClick={handleClickNextPrev}>
                         {localeService.t('formula.moreFunctions.next')}
                     </Button>
                 )}
                 {inputParams && (
-                    <Button type="text" onClick={handleClickNextPrev}>
-                        {localeService.t('formula.moreFunctions.prev')}
-                    </Button>
+                    <Button onClick={handleClickNextPrev}>{localeService.t('formula.moreFunctions.prev')}</Button>
                 )}
                 {inputParams && (
                     <Button type="primary" onClick={handleConfirm}>
diff --git a/packages/sheets-plugin-formula-ui/src/views/more-functions/function-params/FunctionParams.tsx b/packages/sheets-plugin-formula-ui/src/views/more-functions/function-params/FunctionParams.tsx
new file mode 100644
index 000000000000..a5714676ec0c
--- /dev/null
+++ b/packages/sheets-plugin-formula-ui/src/views/more-functions/function-params/FunctionParams.tsx
@@ -0,0 +1,16 @@
+import styles from './index.module.less';
+
+interface IParamsProps {
+    className?: string;
+    title?: string;
+    value?: string | React.ReactElement;
+}
+
+export function FunctionParams(props: IParamsProps) {
+    return (
+        <div className={styles.formulaFunctionParams}>
+            <div className={`${styles.formulaFunctionParamsTitle} ${props.className}`}>{props.title}</div>
+            <div className={styles.formulaFunctionParamsDetail}>{props.value}</div>
+        </div>
+    );
+}
diff --git a/packages/sheets-plugin-formula-ui/src/views/more-functions/function-params/index.module.less b/packages/sheets-plugin-formula-ui/src/views/more-functions/function-params/index.module.less
new file mode 100644
index 000000000000..35414f9554a0
--- /dev/null
+++ b/packages/sheets-plugin-formula-ui/src/views/more-functions/function-params/index.module.less
@@ -0,0 +1,14 @@
+.formula-function-params {
+    margin: var(--margin-xs) 0;
+    font-size: var(--font-size-xxs);
+
+    &-title {
+        font-weight: 500;
+        color: rgb(var(--text-color-secondary));
+    }
+
+    &-detail {
+        font-weight: 400;
+        color: rgb(var(--text-color));
+    }
+}
\ No newline at end of file
diff --git a/packages/sheets-plugin-formula-ui/src/views/more-functions/index.module.less b/packages/sheets-plugin-formula-ui/src/views/more-functions/index.module.less
index 00a719eab1f6..c61f4f456620 100644
--- a/packages/sheets-plugin-formula-ui/src/views/more-functions/index.module.less
+++ b/packages/sheets-plugin-formula-ui/src/views/more-functions/index.module.less
@@ -3,4 +3,13 @@
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
+
+    &-operation {
+        display: flex;
+        justify-content: flex-end;
+
+        >button{
+            margin: 0 0 var(--margin-lg) var(--margin-base);
+        }
+    }
 }
\ No newline at end of file
diff --git a/packages/sheets-plugin-formula-ui/src/views/more-functions/input-params/InputParams.tsx b/packages/sheets-plugin-formula-ui/src/views/more-functions/input-params/InputParams.tsx
index ebf47506aab5..6553724c7069 100644
--- a/packages/sheets-plugin-formula-ui/src/views/more-functions/input-params/InputParams.tsx
+++ b/packages/sheets-plugin-formula-ui/src/views/more-functions/input-params/InputParams.tsx
@@ -1,24 +1,52 @@
 import { IFunctionInfo, IFunctionParam } from '@univerjs/base-formula-engine';
-import { RangeSelector } from '@univerjs/base-ui';
+import { RangeSelector } from '@univerjs/ui-plugin-sheets';
+import { useState } from 'react';
 
+import { FunctionParams } from '../function-params/FunctionParams';
 import styles from './index.module.less';
 
 export interface IInputParamsProps {
     functionInfo: IFunctionInfo | null;
+    onChange: (params: string[]) => void;
 }
 
 export function InputParams(props: IInputParamsProps) {
-    const { functionInfo } = props;
+    const { functionInfo, onChange } = props;
+    const [params, setParams] = useState<string[]>([]);
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    function handleRangeChange(range: string, paramIndex: number) {
+        const newParams = [...params];
+        newParams[paramIndex] = range;
+        setParams(newParams);
+        onChange(newParams);
+    }
+
     return (
         <div className={styles.formulaInputParams}>
-            {functionInfo &&
-                functionInfo.functionParameter &&
-                functionInfo.functionParameter.map((item: IFunctionParam, i: number) => (
-                    <div key={i}>
-                        {item.name}
-                        <RangeSelector />
-                    </div>
-                ))}
+            <div className={styles.formulaInputParamsList}>
+                {functionInfo &&
+                    functionInfo.functionParameter &&
+                    functionInfo.functionParameter.map((item: IFunctionParam, i: number) => (
+                        <div key={i}>
+                            <div className={styles.formulaInputParamsListItemName}>{item.name}</div>
+
+                            <div className={styles.formulaInputParamsListItemSelector}>
+                                <RangeSelector
+                                    onChange={(range: string) => handleRangeChange(range, i)}
+                                    onActive={() => setActiveIndex(i)}
+                                />
+                            </div>
+                        </div>
+                    ))}
+            </div>
+
+            <div className={styles.formulaInputParamsInfo}>
+                <FunctionParams
+                    title={functionInfo?.functionParameter[activeIndex].name}
+                    value={functionInfo?.functionParameter[activeIndex].detail}
+                />
+            </div>
         </div>
     );
 }
diff --git a/packages/sheets-plugin-formula-ui/src/views/more-functions/input-params/index.module.less b/packages/sheets-plugin-formula-ui/src/views/more-functions/input-params/index.module.less
index 6cf6fd06e0cb..7b4e71873a06 100644
--- a/packages/sheets-plugin-formula-ui/src/views/more-functions/input-params/index.module.less
+++ b/packages/sheets-plugin-formula-ui/src/views/more-functions/input-params/index.module.less
@@ -1,3 +1,11 @@
 .formula-input-params {
-    padding: var(--padding-xs);
+    &-list-item{
+        &-name{
+            font-size: var(--font-size-sm);
+        }
+
+        &-selector{
+            margin: var(--margin-xxs) 0 var(--margin-xs) 0;
+        }
+    }
 }
\ No newline at end of file
diff --git a/packages/sheets-plugin-formula-ui/src/views/more-functions/select-function/SelectFunction.tsx b/packages/sheets-plugin-formula-ui/src/views/more-functions/select-function/SelectFunction.tsx
index 8e338fa3b5e1..fe85de21b90b 100644
--- a/packages/sheets-plugin-formula-ui/src/views/more-functions/select-function/SelectFunction.tsx
+++ b/packages/sheets-plugin-formula-ui/src/views/more-functions/select-function/SelectFunction.tsx
@@ -1,5 +1,4 @@
 import { FunctionType, IFunctionInfo, IFunctionParam } from '@univerjs/base-formula-engine';
-import { KeyCode } from '@univerjs/base-ui';
 import { LocaleService } from '@univerjs/core';
 import { Input, Select } from '@univerjs/design';
 import { CheckMarkSingle } from '@univerjs/icons';
@@ -8,6 +7,7 @@ import React, { useEffect, useState } from 'react';
 
 import { IDescriptionService, ISearchItem } from '../../../services/description.service';
 import { getFunctionTypeValues } from '../../../services/utils';
+import { FunctionParams } from '../function-params/FunctionParams';
 import styles from './index.module.less';
 
 export interface ISelectFunctionProps {
@@ -39,6 +39,10 @@ export function SelectFunction(props: ISelectFunctionProps) {
         handleSelectChange(allTypeValue);
     }, []);
 
+    useEffect(() => {
+        setCurrentFunctionInfo(0);
+    }, [selectList]);
+
     const highlightSearchText = (text: string) => {
         const regex = new RegExp(`(${searchText.toLocaleUpperCase()})`);
         const parts = text.split(regex).filter(Boolean);
@@ -55,14 +59,14 @@ export function SelectFunction(props: ISelectFunctionProps) {
         });
     };
 
-    const setCurrentFunctionInfo = () => {
+    const setCurrentFunctionInfo = (selectedIndex: number) => {
         if (selectList.length === 0) {
             setFunctionInfo(null);
             return;
         }
 
-        setNameSelected(active);
-        const functionInfo = descriptionService.getFunctionInfo(selectList[active].name);
+        setNameSelected(selectedIndex);
+        const functionInfo = descriptionService.getFunctionInfo(selectList[selectedIndex].name);
         if (!functionInfo) {
             setFunctionInfo(null);
             return;
@@ -87,14 +91,14 @@ export function SelectFunction(props: ISelectFunctionProps) {
 
     function handleSelectListKeyDown(e: React.KeyboardEvent<HTMLUListElement> | React.KeyboardEvent<HTMLInputElement>) {
         e.stopPropagation();
-        if (e.keyCode === KeyCode.ARROW_DOWN) {
+        if (e.key === 'ArrowDown') {
             const nextActive = active + 1;
             setActive(nextActive === selectList.length ? 0 : nextActive);
-        } else if (e.keyCode === KeyCode.ARROW_UP) {
+        } else if (e.key === 'ArrowUp') {
             const nextActive = active - 1;
             setActive(nextActive === -1 ? selectList.length - 1 : nextActive);
-        } else if (e.keyCode === KeyCode.ENTER) {
-            setCurrentFunctionInfo();
+        } else if (e.key === 'Enter') {
+            setCurrentFunctionInfo(active);
         }
     }
 
@@ -109,9 +113,15 @@ export function SelectFunction(props: ISelectFunctionProps) {
     return (
         <div>
             <div className={styles.formulaSelectFunctionSelect}>
-                <Select value={typeSelected} options={options} onChange={handleSelectChange}></Select>
+                <Select
+                    className={styles.formulaSelectFunctionSelectType}
+                    value={typeSelected}
+                    options={options}
+                    onChange={handleSelectChange}
+                ></Select>
 
                 <Input
+                    className={styles.formulaSelectFunctionSelectText}
                     placeholder={localeService.t(`formula.moreFunctions.searchFunctionPlaceholder`)}
                     onKeyDown={handleSelectListKeyDown}
                     value={searchText}
@@ -132,7 +142,7 @@ export function SelectFunction(props: ISelectFunctionProps) {
                         }
                         onMouseEnter={() => handleLiMouseEnter(index)}
                         onMouseLeave={handleLiMouseLeave}
-                        onClick={() => setCurrentFunctionInfo()}
+                        onClick={() => setCurrentFunctionInfo(index)}
                     >
                         {nameSelected === index && (
                             <CheckMarkSingle className={styles.formulaSelectFunctionResultItemSelected} />
@@ -144,14 +154,14 @@ export function SelectFunction(props: ISelectFunctionProps) {
 
             {functionInfo && (
                 <div className={styles.formulaSelectFunctionContent}>
-                    <Params title={functionInfo.functionName} value={functionInfo.description} />
+                    <FunctionParams title={functionInfo.functionName} value={functionInfo.description} />
 
-                    <Params
+                    <FunctionParams
                         title={localeService.t('formula.moreFunctions.syntax')}
                         value={<Help prefix={functionInfo.functionName} value={functionInfo.functionParameter} />}
                     />
 
-                    <Params
+                    <FunctionParams
                         title={localeService.t('formula.prompt.helpExample')}
                         value={`${functionInfo.functionName}(${functionInfo.functionParameter
                             .map((item) => item.example)
@@ -160,7 +170,7 @@ export function SelectFunction(props: ISelectFunctionProps) {
 
                     {functionInfo.functionParameter &&
                         functionInfo.functionParameter.map((item: IFunctionParam, i: number) => (
-                            <Params
+                            <FunctionParams
                                 key={i}
                                 title={item.name}
                                 value={`${item.require ? required : optional} ${item.detail}`}
@@ -172,19 +182,6 @@ export function SelectFunction(props: ISelectFunctionProps) {
     );
 }
 
-interface IParamsProps {
-    className?: string;
-    title?: string;
-    value?: string | React.ReactElement;
-}
-
-const Params = (props: IParamsProps) => (
-    <div className={styles.formulaSelectFunctionContentParams}>
-        <div className={`${styles.formulaSelectFunctionContentParamsTitle} ${props.className}`}>{props.title}</div>
-        <div className={styles.formulaSelectFunctionContentParamsDetail}>{props.value}</div>
-    </div>
-);
-
 interface IHelpProps {
     prefix?: string;
     value?: IFunctionParam[];
diff --git a/packages/sheets-plugin-formula-ui/src/views/more-functions/select-function/index.module.less b/packages/sheets-plugin-formula-ui/src/views/more-functions/select-function/index.module.less
index 3b1b655b951a..966f3c576581 100644
--- a/packages/sheets-plugin-formula-ui/src/views/more-functions/select-function/index.module.less
+++ b/packages/sheets-plugin-formula-ui/src/views/more-functions/select-function/index.module.less
@@ -1,10 +1,22 @@
+@result-height: 364px;
+@select-width: 45%;
+@result-item-padding-left: 28px;
+@selected-icon-left: 6px;
+
 .formula-select-function {
     &-select {
         display: flex;
         align-items: center;
+        justify-content: space-between;
+        
+        &-type {
+            width: @select-width;
+        }
 
-        .input-affix-wrapper{
+        // FIXME: Need input components to repair width and central problem
+        &-text{
             display: flex;
+            width: @select-width;
 
             .input{
                 width: 100%;
@@ -13,22 +25,30 @@
     }
     
     &-result {
+        user-select: none;
+
         box-sizing: border-box;
         width: 100%;
+        height: @result-height;
         margin: 0;
+        margin-top: var(--margin-xs);
         padding: var(--padding-base);
 
-        font-size: var(--font-size-sm);
         list-style: none;
 
+        border: 1px solid rgb(var(--border-color));
+        border-radius: var(--border-radius-base);
         outline: none;
 
         &-item {
             cursor: pointer;
 
+            position: relative;
+
             box-sizing: border-box;
-            padding: var(--padding-sm);
+            padding: var(--padding-sm) @result-item-padding-left;
 
+            font-size: var(--font-size-xs);
             color: rgb(var(--text-color));
 
             border-radius: var(--border-radius-base);
@@ -42,7 +62,15 @@
             }
 
             &-selected {
-                color: rgb(var(--primary-color));
+                position: absolute;
+                top: 50%;
+                left: @selected-icon-left;
+                transform: translateY(-50%);
+
+                display: inline-flex;
+
+                font-size: var(--font-size-lg);
+                color: rgb(var(--success-color));
             }
 
             &-active {
@@ -53,25 +81,6 @@
 
     &-content {
         overflow-y: auto;
-        margin-top: var(--padding-xl);
-        padding: var(--padding-base) 0;
-
-        &-params {
-            margin: var(--margin-xs) 0;
-
-            &-title {
-                margin-bottom: var(--margin-xs);
-                font-size: var(--font-size-xs);
-                font-weight: 500;
-                color: rgb(var(--text-color));
-            }
-
-            &-detail {
-                font-size: var(--font-size-xxs);
-                font-weight: 400;
-                color: rgb(var(--text-color-secondary));
-            }
-        }
     }
 
 }
\ No newline at end of file
diff --git a/packages/ui-plugin-sheets/src/components/range-selector/RangeSelector.tsx b/packages/ui-plugin-sheets/src/components/range-selector/RangeSelector.tsx
new file mode 100644
index 000000000000..a7e65849fa53
--- /dev/null
+++ b/packages/ui-plugin-sheets/src/components/range-selector/RangeSelector.tsx
@@ -0,0 +1,79 @@
+import { SelectionManagerService } from '@univerjs/base-sheets';
+import { LocaleService } from '@univerjs/core';
+import { Tooltip } from '@univerjs/design';
+import { SelectRangeSingle } from '@univerjs/icons';
+import { useDependency } from '@wendellhu/redi/react-bindings';
+import { useEffect, useRef, useState } from 'react';
+
+import styles from './index.module.less';
+
+export interface IRangeSelectorProps {
+    onChange: (range: string) => void;
+    onActive: (active: boolean) => void;
+}
+
+export function RangeSelector(props: IRangeSelectorProps) {
+    const { onChange, onActive } = props;
+    const [active, setActive] = useState(false);
+    const editableRef = useRef<HTMLDivElement>(null);
+    const localeService = useDependency(LocaleService);
+    const textSelectionManagerService = useDependency(SelectionManagerService);
+
+    useEffect(() => {
+        if (active) {
+            onActive(active);
+            const subscribe = textSelectionManagerService.selectionInfo$.subscribe((selectionInfo) => {
+                // TODO@Dushusir: get range text info from selectionInfo
+                const rangeTextList = ['A1', 'B2:C3', 'Sheet2!A1:B2', 'D10:E11,F1:G2,H3:I4'];
+                const randomIndex = Math.floor(Math.random() * rangeTextList.length);
+                const range = rangeTextList[randomIndex];
+
+                if (editableRef.current) {
+                    editableRef.current.innerHTML = range;
+                }
+            });
+
+            return () => {
+                subscribe.unsubscribe();
+            };
+        }
+
+        onChange(editableRef.current?.innerHTML || '');
+    }, [active]);
+
+    function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+        e.stopPropagation();
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.currentTarget.blur();
+            setActive(false);
+        }
+    }
+
+    function handleFocus() {
+        setActive(true);
+    }
+
+    function handleClick() {
+        setActive(!active);
+    }
+
+    return (
+        <div className={active ? `${styles.rangeSelector} ${styles.rangeSelectorActive}` : styles.rangeSelector}>
+            <div
+                ref={editableRef}
+                className={styles.rangeSelectorEditor}
+                contentEditable
+                data-placeholder={localeService.t('rangeSelector.placeholder')}
+                onKeyDown={handleKeyDown}
+                onFocus={handleFocus}
+            ></div>
+
+            <Tooltip title={localeService.t('rangeSelector.tooltip')} placement="bottom">
+                <button className={styles.rangeSelectorIcon} onClick={handleClick}>
+                    <SelectRangeSingle />
+                </button>
+            </Tooltip>
+        </div>
+    );
+}
diff --git a/packages/ui-plugin-sheets/src/components/range-selector/index.module.less b/packages/ui-plugin-sheets/src/components/range-selector/index.module.less
new file mode 100644
index 000000000000..69c25128b6a7
--- /dev/null
+++ b/packages/ui-plugin-sheets/src/components/range-selector/index.module.less
@@ -0,0 +1,81 @@
+@padding-top-bottom: 6px;
+@height: 20px;
+@width: 218px;
+@icon-size: 24px;
+
+.range-selector {
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: @padding-top-bottom var(--padding-sm) @padding-top-bottom var(--padding-base);
+
+
+    border: 1px solid rgb(var(--border-color));
+    border-radius: var(--border-radius-base);
+
+    &-editor {
+        cursor: text;
+
+        overflow: hidden;
+        display: inline-block;
+
+        width: @width;
+        height: @height;
+
+        font-size: var(--font-size-xs);
+        line-height: @height;
+        text-wrap: nowrap;
+
+        border: 0;
+        outline: 0;
+
+        &::selection {
+            color: rgb(var(--color-white));
+            background-color: rgb(var(--primary-color));
+        }
+
+        &:empty::before {
+            content: attr(data-placeholder);
+            color: rgb(var(--grey-400))
+        }
+    }
+
+    &-icon {
+        cursor: pointer;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: @icon-size;
+        height: @icon-size;
+        padding: 0;
+
+        font-size: var(--font-size-lg);
+        color: rgb(var(--text-color));
+
+        background-color: transparent;
+        border: none;
+        border-radius: var(--border-radius-base);
+        outline: none;
+
+        &:not([disabled]):hover {
+            background-color: rgb(var(--grey-100));
+        }
+
+        &[disabled] {
+            cursor: not-allowed;
+            color: rgb(var(--grey-200));
+        }
+    }
+
+    &-active {
+        border-color: rgb(var(--primary-color));
+    
+        .range-selector-icon {
+            color: rgb(var(--primary-color));
+        }
+    }
+}
\ No newline at end of file
diff --git a/packages/ui-plugin-sheets/src/index.ts b/packages/ui-plugin-sheets/src/index.ts
index cb9b8d7cf043..8103fac1117f 100644
--- a/packages/ui-plugin-sheets/src/index.ts
+++ b/packages/ui-plugin-sheets/src/index.ts
@@ -1,6 +1,7 @@
 export * from './basics';
 export { getEditorObject } from './basics/editor/get-editor-object';
 export { SetCellEditVisibleArrowOperation } from './commands/operations/cell-edit.operation';
+export { RangeSelector } from './components/range-selector/RangeSelector';
 export { whenEditorInputFormulaActivated } from './controllers/shortcuts/utils';
 export {
     getCoordByCell,
diff --git a/packages/ui-plugin-sheets/src/locale/en-US.ts b/packages/ui-plugin-sheets/src/locale/en-US.ts
index fc4bc513ad4b..6530b18b99fa 100644
--- a/packages/ui-plugin-sheets/src/locale/en-US.ts
+++ b/packages/ui-plugin-sheets/src/locale/en-US.ts
@@ -552,4 +552,9 @@ export default {
         formatOnly: 'Format Only',
         noFormat: 'No Format',
     },
+
+    rangeSelector: {
+        placeholder: 'Select range or input value',
+        tooltip: 'Select range',
+    },
 };
diff --git a/packages/ui-plugin-sheets/src/locale/zh-CN.ts b/packages/ui-plugin-sheets/src/locale/zh-CN.ts
index a84557606d8a..986face369b4 100644
--- a/packages/ui-plugin-sheets/src/locale/zh-CN.ts
+++ b/packages/ui-plugin-sheets/src/locale/zh-CN.ts
@@ -416,4 +416,8 @@ export default {
         formatOnly: '仅填充格式',
         noFormat: '不带格式填充',
     },
+    rangeSelector: {
+        placeholder: '选择范围或输入值',
+        tooltip: '选择范围',
+    },
 };
diff --git a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-button/index.module.less b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-button/index.module.less
index 8866414c7e45..4674a787eca0 100644
--- a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-button/index.module.less
+++ b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-button/index.module.less
@@ -21,7 +21,6 @@
 
     &:not([disabled]):hover {
         background-color: rgb(var(--bg-color-hover));
-        border-color: transparent;
     }
 
     &[disabled] {
diff --git a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/index.module.less b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/index.module.less
index 64ff55bdebba..f413242234fd 100644
--- a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/index.module.less
+++ b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/index.module.less
@@ -48,7 +48,6 @@ Tab Item, Put outside to be compatible with drag styles
 
         &-edit {
             cursor: text;
-            border-color: rgb(var(--primary-color));
             outline: none;
 
             &::selection {