diff --git a/packages/ui-vue/components/combo-list/index.ts b/packages/ui-vue/components/combo-list/index.ts
index 2e877a1..f263fff 100644
--- a/packages/ui-vue/components/combo-list/index.ts
+++ b/packages/ui-vue/components/combo-list/index.ts
@@ -3,6 +3,7 @@ import FComboList from './src/combo-list.component';
 
 export * from './src/types';
 export * from './src/combo-list.props';
+export * from './src/composition';
 
 export { FComboList };
 
diff --git a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx b/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
index 0b480cd..504093f 100644
--- a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
+++ b/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
@@ -2,19 +2,22 @@ import { defineComponent, ref, SetupContext } from 'vue';
 import { comboListProps, ComboListProps } from './combo-list.props';
 import { ButtonEdit } from '../../button-edit';
 import { ViewType } from './types';
-import { useState } from './composition/state';
+import { useState } from './composition/use-state';
 export default defineComponent({
   name: 'FComboList',
   props: comboListProps,
   emits: [],
   setup(props: ComboListProps, context: SetupContext) {
-    //const modelValue = ref(props.modelValue);
-    // showPanel state
-    const [showPanel] = useState<boolean>(false);
+    const modelValue = ref(props.modelValue);
+    // is panel visible
+    const [isPanelVisible] = useState<boolean>(false);
     return () => {
       return (
         <>
-          <ButtonEdit disable={props.disabled} readonly={props.readonly} />
+          {/** main component */}
+          {(!props.viewType || props.viewType === ViewType.Text) && (
+            <ButtonEdit disable={props.disabled} readonly={props.readonly} />
+          )}     
           {/** tag area */}
           {props.viewType === ViewType.Tag && (
             <div class="f-cmp-inputgroup">
@@ -41,7 +44,7 @@ export default defineComponent({
             </div>
           )}
           {/** panel area */}
-          {showPanel.value && (
+          {isPanelVisible.value && (
             <div class="comboPanel f-area-hide" style="z-index: 99999"></div>
           )}
         </>
diff --git a/packages/ui-vue/components/combo-list/src/composition/index.ts b/packages/ui-vue/components/combo-list/src/composition/index.ts
new file mode 100644
index 0000000..17a2ef0
--- /dev/null
+++ b/packages/ui-vue/components/combo-list/src/composition/index.ts
@@ -0,0 +1,2 @@
+export * from './types';
+export * from './use-state';
\ No newline at end of file
diff --git a/packages/ui-vue/components/combo-list/src/composition/types.ts b/packages/ui-vue/components/combo-list/src/composition/types.ts
index ba6306d..4c5a8ab 100644
--- a/packages/ui-vue/components/combo-list/src/composition/types.ts
+++ b/packages/ui-vue/components/combo-list/src/composition/types.ts
@@ -1,6 +1,7 @@
-import { DeepReadonly, Ref, UnwrapRef } from "vue";
+import { Ref, UnwrapRef } from "vue";
 
 /**
  * UseState type
+ * @description 受vue类型系统限制，仅在类型定义中约定state只读，实际返回对象可写
  */
-export type UseState<T> = [Readonly<Ref<DeepReadonly<UnwrapRef<T>>>>, (state: UnwrapRef<T>) => void];
\ No newline at end of file
+export type UseState<T> = [Readonly<Ref<UnwrapRef<T>>>, (state: UnwrapRef<T>) => void];
\ No newline at end of file
diff --git a/packages/ui-vue/components/combo-list/src/composition/state.ts b/packages/ui-vue/components/combo-list/src/composition/use-state.ts
similarity index 82%
rename from packages/ui-vue/components/combo-list/src/composition/state.ts
rename to packages/ui-vue/components/combo-list/src/composition/use-state.ts
index 0a10fd6..706a38f 100644
--- a/packages/ui-vue/components/combo-list/src/composition/state.ts
+++ b/packages/ui-vue/components/combo-list/src/composition/use-state.ts
@@ -1,4 +1,4 @@
-import { ref, readonly, UnwrapRef } from 'vue';
+import { ref } from 'vue';
 import { UseState } from './types';
 
 /**
@@ -14,5 +14,5 @@ export function useState<T = any>(initial: T): UseState<T> {
     const action = (value: any) => {
         state.value = value;
     };
-    return [readonly(state), action];
+    return [state, action];
 }
\ No newline at end of file