diff --git a/packages/docs-vue/tsconfig.json b/packages/docs-vue/tsconfig.json
index d4aefa2c929dc2e0d05a0a53488b36c3a5536315..93448aa3311fd3962773d2331525de5821a0a801 100644
--- a/packages/docs-vue/tsconfig.json
+++ b/packages/docs-vue/tsconfig.json
@@ -11,7 +11,8 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
diff --git a/packages/ui-vue/components/input-group/src/composables/types.ts b/packages/ui-vue/components/input-group/src/composables/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..626029595b8e0d508233481f20d85725c69fc3e6
--- /dev/null
+++ b/packages/ui-vue/components/input-group/src/composables/types.ts
@@ -0,0 +1,27 @@
+import { ComputedRef } from 'vue';
+
+export interface UseAppendButton {
+  inputGroupAppendClass: ComputedRef<Record<string, boolean | undefined>>;
+  onClickAppendButton: ($event: Event) => void;
+  onMouseEnterIcon: ($event: MouseEvent) => void;
+  onMouseLeaveIcon: ($event: MouseEvent) => void;
+}
+
+export interface UseClear {
+  showClearButton: ComputedRef<boolean>;
+  onClearValue: ($event: Event) => void;
+}
+
+export interface UseTextBox {
+  isTextBoxReadonly: ComputedRef<boolean>;
+  textBoxClass: ComputedRef<Record<string, boolean | undefined>>;
+  textBoxPlaceholder: ComputedRef<string>;
+  textBoxTitle: ComputedRef<string>;
+  onBlurTextBox: ($event: Event) => void;
+  onClickTextBox: ($event: Event) => void;
+  onEnterTextBox: ($event: KeyboardEvent) => void;
+  onFocusTextBox: ($event: Event) => void;
+  onMouseDownTextBox: ($event: MouseEvent) => void;
+  onMouseOverTextBox: ($event: Event) => void;
+  onTextBoxValueChange: (value: string, emit: boolean) => void;
+}
diff --git a/packages/ui-vue/components/input-group/src/composables/use-append-button.ts b/packages/ui-vue/components/input-group/src/composables/use-append-button.ts
new file mode 100644
index 0000000000000000000000000000000000000000..93b55513da32b4b8051c97cd836d2730f194a0ca
--- /dev/null
+++ b/packages/ui-vue/components/input-group/src/composables/use-append-button.ts
@@ -0,0 +1,27 @@
+import { computed, SetupContext } from 'vue';
+import { InputGroupProps } from '../input-group.props';
+
+export function useAppendButton(props: InputGroupProps, setupContext: SetupContext) {
+  const inputGroupAppendClass = computed(() => ({
+    'input-group-append': true,
+    'append-force-show': props.showButtonWhenDisabled && (props.readonly || props.disable),
+  }));
+
+  function onMouseEnterIcon(e: MouseEvent) {
+    console.log('on onIconMouseEnter');
+  }
+  function onMouseLeaveIcon(e: MouseEvent) {
+    console.log('on onIconMouseLeave');
+  }
+
+  function onClickAppendButton(event: Event) {
+    console.log('on onClickHandle');
+  }
+
+  return {
+    inputGroupAppendClass,
+    onClickAppendButton,
+    onMouseEnterIcon,
+    onMouseLeaveIcon
+  };
+}
diff --git a/packages/ui-vue/components/input-group/src/composables/use-clear.ts b/packages/ui-vue/components/input-group/src/composables/use-clear.ts
new file mode 100644
index 0000000000000000000000000000000000000000..81d9694cf39121594c28ca70ab647c6eca3d01c3
--- /dev/null
+++ b/packages/ui-vue/components/input-group/src/composables/use-clear.ts
@@ -0,0 +1,16 @@
+import { computed, SetupContext } from 'vue';
+import { InputGroupProps } from '../input-group.props';
+import { UseClear } from './types';
+
+export function useClear(props: InputGroupProps, setupContext: SetupContext): UseClear {
+  const showClearButton = computed(() => props.enableClear && !props.readonly && !props.disable);
+
+  function onClearValue($event: Event) {
+    console.log('on onClearValue');
+  }
+
+  return {
+    showClearButton,
+    onClearValue
+  };
+}
diff --git a/packages/ui-vue/components/input-group/src/composables/use-text-box.ts b/packages/ui-vue/components/input-group/src/composables/use-text-box.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f1125e2f7e2b86a23af68c83b42a20265700c992
--- /dev/null
+++ b/packages/ui-vue/components/input-group/src/composables/use-text-box.ts
@@ -0,0 +1,61 @@
+import { computed, SetupContext } from 'vue';
+import { InputGroupProps } from '../input-group.props';
+import { UseTextBox } from './types';
+
+export function useTextBox(props: InputGroupProps, setupContext: SetupContext): UseTextBox {
+  const textBoxTitle = computed(() => (props.enableTitle ? '' : ''));
+
+  const textBoxPlaceholder = computed(() => ((props.disable || props.readonly) && !props.forcePlaceholder ? '' : props.placeholder));
+
+  const isTextBoxReadonly = computed(() => props.readonly || !props.editable);
+
+  const textBoxClass = computed(() => ({
+    'text-left': props.textAlign === 'left',
+    'text-center': props.textAlign === 'center',
+    'text-right': props.textAlign === 'right',
+    'form-control': true,
+    'f-utils-fill': true,
+  }));
+
+  function onBlurTextBox($event: Event) {
+    console.log('on blur');
+  }
+
+  function onClickTextBox($event: Event) {
+    console.log('on onInputClick');
+  }
+
+  function onEnterTextBox($event: KeyboardEvent) {
+    console.log('on onEnter');
+  }
+
+  function onFocusTextBox($event: Event) {
+    console.log('on onInputFocus');
+  }
+
+  function onMouseDownTextBox($event: MouseEvent) {
+    console.log('on onMousedown');
+  }
+
+  function onMouseOverTextBox($event: Event) {
+    console.log('on onMouseOverInExtentInfo');
+  }
+
+  function onTextBoxValueChange(val: string, emit = true) {
+    console.log('on onValueChange');
+  }
+
+  return {
+    isTextBoxReadonly,
+    textBoxClass,
+    textBoxPlaceholder,
+    textBoxTitle,
+    onBlurTextBox,
+    onClickTextBox,
+    onEnterTextBox,
+    onFocusTextBox,
+    onMouseDownTextBox,
+    onMouseOverTextBox,
+    onTextBoxValueChange
+  };
+}
diff --git a/packages/ui-vue/components/input-group/src/input-group.component.tsx b/packages/ui-vue/components/input-group/src/input-group.component.tsx
index 2d470ea5e8f94878ec752a5621d553ec2dea06ea..54dc44adf4aa5773701c56b9df9c6729b5c985a1 100644
--- a/packages/ui-vue/components/input-group/src/input-group.component.tsx
+++ b/packages/ui-vue/components/input-group/src/input-group.component.tsx
@@ -1,17 +1,14 @@
 import { defineComponent, computed } from 'vue';
 import type { SetupContext } from 'vue';
 import { InputGroupProps, inputGroupProps } from './input-group.props';
+import { useAppendButton } from './composables/use-append-button';
+import { useClear } from './composables/use-clear';
+import { useTextBox } from './composables/use-text-box';
 
 export default defineComponent({
   name: 'FInputGroup',
   props: inputGroupProps,
   setup(props: InputGroupProps, context: SetupContext) {
-    const textBoxTitle = computed(() => (props.enableTitle ? props.value : ''));
-
-    const textBoxPlaceholder = computed(() => ((props.disable || props.readonly) && !props.forcePlaceholder ? '' : props.placeholder));
-
-    const isTextBoxReadonly = computed(() => props.readonly || !props.editable);
-
     const inputGroupClass = computed(() => ({
       'input-group': true,
       'f-state-disable': props.disable,
@@ -19,54 +16,23 @@ export default defineComponent({
       'f-state-readonly': props.readonly && !props.disable,
     }));
 
-    const textBoxClass = computed(() => ({
-      'text-left': props.textAlign === 'left',
-      'text-center': props.textAlign === 'center',
-      'text-right': props.textAlign === 'right',
-      'form-control': true,
-      'f-utils-fill': true,
-    }));
-
-    const inputGroupAppendClass = computed(() => ({
-      'input-group-append': true,
-      'append-force-show': props.showButtonWhenDisabled && (props.readonly || props.disable),
-    }));
+    const { inputGroupAppendClass, onClickAppendButton, onMouseEnterIcon, onMouseLeaveIcon } = useAppendButton(props, context);
 
-    const showClearButton = computed(() => props.enableClear && !props.readonly && !props.disable);
+    const { showClearButton, onClearValue } = useClear(props, context);
 
-    function onBlur($event: Event) {
-      console.log('on blur');
-    }
-    function onClearValue($event: Event) {
-      console.log('on onClearValue');
-    }
-    function onEnter($event: KeyboardEvent) {
-      console.log('on onEnter');
-    }
-    function onClickHandle(event: Event) {
-      console.log('on onClickHandle');
-    }
-    function onIconMouseEnter(e: MouseEvent) {
-      console.log('on onIconMouseEnter');
-    }
-    function onIconMouseLeave(e: MouseEvent) {
-      console.log('on onIconMouseLeave');
-    }
-    function onInputClick($event: Event) {
-      console.log('on onInputClick');
-    }
-    function onInputFocus($event: Event) {
-      console.log('on onInputFocus');
-    }
-    function onMouseDown($event: MouseEvent) {
-      console.log('on onMousedown');
-    }
-    function onMouseOverInExtentInfo($event: Event) {
-      console.log('on onMouseOverInExtentInfo');
-    }
-    function onValueChange(val: string, emit = true) {
-      console.log('on onValueChange');
-    }
+    const {
+      isTextBoxReadonly,
+      textBoxClass,
+      textBoxPlaceholder,
+      textBoxTitle,
+      onBlurTextBox,
+      onClickTextBox,
+      onEnterTextBox,
+      onFocusTextBox,
+      onMouseDownTextBox,
+      onMouseOverTextBox,
+      onTextBoxValueChange,
+    } = useTextBox(props, context);
 
     return () => {
       return (
@@ -84,11 +50,11 @@ export default defineComponent({
               tabindex={props.tabIndex}
               title={textBoxTitle.value}
               type={props.inputType}
-              onBlur={onBlur}
-              onClick={onInputClick}
-              onFocus={onInputFocus}
-              onKeydown={onEnter}
-              onMousedown={onMouseDown}
+              onBlur={onBlurTextBox}
+              onClick={onClickTextBox}
+              onFocus={onFocusTextBox}
+              onKeydown={onEnterTextBox}
+              onMousedown={onMouseDownTextBox}
             />
             <div class={inputGroupAppendClass.value}>
               {showClearButton.value && (
@@ -96,7 +62,7 @@ export default defineComponent({
                   <i class="f-icon modal_close"></i>
                 </span>
               )}
-              {props.groupText && <span class="input-group-text" v-html={props.groupText}></span>}
+              {props.appendButtonContent && <span class="input-group-text" v-html={props.appendButtonContent}></span>}
             </div>
           </div>
         </div>
diff --git a/packages/ui-vue/components/input-group/src/input-group.props.ts b/packages/ui-vue/components/input-group/src/input-group.props.ts
index c24020d0213426e7bbbb262e19a6e0d0fcb7f30a..da474fef91bb9e190ecd234ff67ef42f6eaf9790 100644
--- a/packages/ui-vue/components/input-group/src/input-group.props.ts
+++ b/packages/ui-vue/components/input-group/src/input-group.props.ts
@@ -1,24 +1,78 @@
-import { ExtractPropTypes } from 'vue';
+import { ExtractPropTypes, PropType } from 'vue';
+
+type TextAlignment = 'left' | 'center' | 'right';
 
 export const inputGroupProps = {
+  /**
+   * 组件标识
+   */
   id: String,
+  /**
+   * 扩展按钮显示内容，这是一段现在扩展按钮中的html标签
+   */
+  appendButtonContent: { type: String, default: '<i class="f-icon f-icon-lookup"></i>' },
+  /**
+   * 启用输入框自动完成功能
+   */
+  autoComplete: { type: Boolean, default: false },
+  /**
+   * 组件自定义样式
+   */
   customClass: { type: String, default: '' },
+  /**
+   * 禁用组件，既不允许在输入框中录入，也不允许点击扩展按钮。
+   */
   disable: { type: Boolean, default: false },
+  /**
+   * 允许在输入框中录入文本。
+   */
   editable: { type: Boolean, default: true },
+  /**
+   * 显示清空文本按钮
+   */
+  enableClear: { type: Boolean, default: false },
+  /**
+   * 将组件设置为只读，既不允许在输入框中录入，也不允许点击扩展按钮，但是允许复制输入框中的内容。
+   */
   readonly: { type: Boolean, default: false },
-  textAlign: { type: String, default: 'left' },
+  /**
+   * 文本对齐方式
+   */
+  textAlign: { type: String as PropType<TextAlignment>, default: 'left' },
+  /**
+   * 禁用组件时，是否显示扩展按钮
+   */
   showButtonWhenDisabled: { type: Boolean, default: false },
-  enableClear: { type: Boolean, default: false },
-  groupText: { type: String, default: '<i class="f-icon f-icon-lookup"></i>' },
+
+  /**
+   * 显示输入框的标签
+   */
   enableTitle: { type: Boolean, default: false },
+  /**
+   * 输入框类型
+   */
   inputType: { type: String, default: 'text' },
+  /**
+   * 显示输入框提示信息
+   */
   forcePlaceholder: { type: Boolean, default: false },
+  /**
+   * 输入框提示文本
+   */
   placeholder: { type: String, default: '' },
-  autoComplete: { type: Boolean, default: false },
-  value: { type: String, default: '' },
+
+  /**
+   * 输入框最小长度
+   */
   minLength: Number,
+  /**
+   * 输入框最大长度
+   */
   maxLength: Number,
-  tabIndex: Number
+  /**
+   * 输入框Tab键索引
+   */
+  tabIndex: Number,
 };
 
 export type InputGroupProps = ExtractPropTypes<typeof inputGroupProps>;