diff --git a/packages/vue-hooks/package.json b/packages/vue-hooks/package.json
index d3730e3e..bea1c026 100644
--- a/packages/vue-hooks/package.json
+++ b/packages/vue-hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fect-ui/vue-hooks",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Minimalist Vue Compostion Hooks",
   "author": "XeryYue",
   "main": "lib/index.js",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 891bdee0..c0da466c 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -41,7 +41,7 @@
   ],
   "dependencies": {
     "@fect-ui/themes": "^2.2.0",
-    "@fect-ui/vue-hooks": "^1.2.1",
+    "@fect-ui/vue-hooks": "^1.3.0",
     "proy": "^0.0.3",
     "@popperjs/core": "^2.11.2"
   },
diff --git a/packages/vue/src/avatar-group/avatar-context.ts b/packages/vue/src/avatar-group/avatar-context.ts
index 36f36732..cf648c00 100644
--- a/packages/vue/src/avatar-group/avatar-context.ts
+++ b/packages/vue/src/avatar-group/avatar-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { AvatarContext } from './interface'
 
-export const READONLY_AVATAR_KEY = Symbol('avatarKey')
+export const READONLY_AVATAR_KEY: InjectionKey<AvatarContext> = Symbol('avatarKey')
 
 export const createAvatarContext = () => createProvider(READONLY_AVATAR_KEY)
 
-export const useAvatarContext = () => useProvider<AvatarContext>(READONLY_AVATAR_KEY)
+export const useAvatarContext = () => useProvider(READONLY_AVATAR_KEY)
diff --git a/packages/vue/src/badge-anchor/badge-context.ts b/packages/vue/src/badge-anchor/badge-context.ts
index 04e36fbf..2a79be61 100644
--- a/packages/vue/src/badge-anchor/badge-context.ts
+++ b/packages/vue/src/badge-anchor/badge-context.ts
@@ -1,8 +1,9 @@
+import type { InjectionKey } from 'vue'
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
 import type { TransformStyles } from './interface'
 
-const READONLY_BADGE_ANCHOR_KEY = Symbol('badgeAnchorKey')
+const READONLY_BADGE_ANCHOR_KEY: InjectionKey<TransformStyles> = Symbol('badgeAnchorKey')
 
 export const createBadgeContext = () => createProvider(READONLY_BADGE_ANCHOR_KEY)
 
-export const useBadgeContext = () => useProvider<TransformStyles>(READONLY_BADGE_ANCHOR_KEY)
+export const useBadgeContext = () => useProvider(READONLY_BADGE_ANCHOR_KEY)
diff --git a/packages/vue/src/breadcrumbs/breadcrumbs-context.ts b/packages/vue/src/breadcrumbs/breadcrumbs-context.ts
index bf9b685a..502238b2 100644
--- a/packages/vue/src/breadcrumbs/breadcrumbs-context.ts
+++ b/packages/vue/src/breadcrumbs/breadcrumbs-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { BreadcrumbsContext } from './interface'
 
-const READONLY_BREADCRUMBS_KEY = Symbol('breadcrumbsKey')
+const READONLY_BREADCRUMBS_KEY: InjectionKey<BreadcrumbsContext> = Symbol('breadcrumbsKey')
 
 export const createBreadcrumbsContext = () => createProvider(READONLY_BREADCRUMBS_KEY)
 
-export const useBreadcrumbsContext = () => useProvider<BreadcrumbsContext>(READONLY_BREADCRUMBS_KEY)
+export const useBreadcrumbsContext = () => useProvider(READONLY_BREADCRUMBS_KEY)
diff --git a/packages/vue/src/button-group/button-group-context.ts b/packages/vue/src/button-group/button-group-context.ts
index fb4bef65..cfa71d77 100644
--- a/packages/vue/src/button-group/button-group-context.ts
+++ b/packages/vue/src/button-group/button-group-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { ButtonGroupContext } from './interface'
 
-const READONLY_BUTTON_GROUP_KEY = Symbol('buttonGroupKey')
+const READONLY_BUTTON_GROUP_KEY: InjectionKey<ButtonGroupContext> = Symbol('buttonGroupKey')
 
 export const createButtonGroupContext = () => createProvider(READONLY_BUTTON_GROUP_KEY)
 
-export const useButtonGroupContext = () => useProvider<ButtonGroupContext>(READONLY_BUTTON_GROUP_KEY)
+export const useButtonGroupContext = () => useProvider(READONLY_BUTTON_GROUP_KEY)
diff --git a/packages/vue/src/button/__tests__/__snapshots__/index.spec.tsx.snap b/packages/vue/src/button/__tests__/__snapshots__/index.spec.tsx.snap
index dc36d480..0c25b7a8 100644
--- a/packages/vue/src/button/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/vue/src/button/__tests__/__snapshots__/index.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`Button button have icon only 1`] = `
 <div class="container"><button class="fect-button fect-button--default fect-button--medium" style="--button-hover-bg: var(--button-default-color); --button-hover-border: var(--primary-foreground); --button-hover-color: var(--primary-foreground);" type="button">
     <!---->
     <!---->
-    <div class="fect-button__icon" style="left: 50%; transform: translate(-50%, -50%);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+    <div class="fect-button__icon" style="left: 50%; transform: translate(-50%, -50%);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
         <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
       </svg></div>
     <!---->
@@ -67,7 +67,7 @@ exports[`Button should be support icon 1`] = `
 <div class="container"><button class="fect-button fect-button--default fect-button--medium" style="--button-hover-bg: var(--button-default-color); --button-hover-border: var(--primary-foreground); --button-hover-color: var(--primary-foreground);" type="button">
     <!---->
     <!---->
-    <div class="fect-button__icon" style="left: 15%; transform: translateY(-50%);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+    <div class="fect-button__icon" style="left: 15%; transform: translateY(-50%);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
         <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
       </svg></div>
     <div class="fect-button__text"> Button </div>
diff --git a/packages/vue/src/checkbox-group/checkbox-context.ts b/packages/vue/src/checkbox-group/checkbox-context.ts
index 67d8d9e0..5b694bcc 100644
--- a/packages/vue/src/checkbox-group/checkbox-context.ts
+++ b/packages/vue/src/checkbox-group/checkbox-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { CheckboxContext } from './interface'
 
-export const READONLY_CHECKBOX_KEY = Symbol('checkboxKey')
+export const READONLY_CHECKBOX_KEY: InjectionKey<CheckboxContext> = Symbol('checkboxKey')
 
 export const createCheckboxContext = () => createProvider(READONLY_CHECKBOX_KEY)
 
-export const useCheckboxContext = () => useProvider<CheckboxContext>(READONLY_CHECKBOX_KEY)
+export const useCheckboxContext = () => useProvider(READONLY_CHECKBOX_KEY)
diff --git a/packages/vue/src/checkbox-group/interface.ts b/packages/vue/src/checkbox-group/interface.ts
index 97c145fc..ed4eebf1 100644
--- a/packages/vue/src/checkbox-group/interface.ts
+++ b/packages/vue/src/checkbox-group/interface.ts
@@ -1,5 +1,5 @@
 import { checkboxGroupProps } from './props'
-import type { Ref, ExtractPropTypes } from 'vue'
+import type { Ref, ExtractPropTypes, DeepReadonly } from 'vue'
 
 interface CheckboxEeventTarget {
   checked?: boolean
@@ -15,7 +15,7 @@ export interface CheckboxEvent {
 
 export interface CheckboxContext {
   props: ExtractPropTypes<typeof checkboxGroupProps>
-  parentValue: Ref<string[]>
+  parentValue: DeepReadonly<Ref<string[]>>
   updateCheckboxGroupValue: (val: string) => void
   updateCheckboxGroupEvent: (e: CheckboxEvent) => void
 }
diff --git a/packages/vue/src/collapse-group/collapse-context.ts b/packages/vue/src/collapse-group/collapse-context.ts
index 354eb502..76a9e2d2 100644
--- a/packages/vue/src/collapse-group/collapse-context.ts
+++ b/packages/vue/src/collapse-group/collapse-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { CollapseContext } from './interface'
 
-export const READONLY_COLLAPSE_KEY = Symbol('collapseKey')
+export const READONLY_COLLAPSE_KEY: InjectionKey<CollapseContext> = Symbol('collapseKey')
 
 export const createCollapseContext = () => createProvider(READONLY_COLLAPSE_KEY)
 
-export const useCollapseContext = () => useProvider<CollapseContext>(READONLY_COLLAPSE_KEY)
+export const useCollapseContext = () => useProvider(READONLY_COLLAPSE_KEY)
diff --git a/packages/vue/src/collapse-group/interface.ts b/packages/vue/src/collapse-group/interface.ts
index 1940b565..2e814235 100644
--- a/packages/vue/src/collapse-group/interface.ts
+++ b/packages/vue/src/collapse-group/interface.ts
@@ -1,6 +1,6 @@
-import type { Ref } from 'vue'
+import type { DeepReadonly, Ref } from 'vue'
 
 export interface CollapseContext {
-  checked: Ref<number[]>
+  checked: DeepReadonly<Ref<number[]>>
   updateCollapseGroupChecked(childIdx: number): void
 }
diff --git a/packages/vue/src/form-item/form-item.tsx b/packages/vue/src/form-item/form-item.tsx
index 3abe1bdd..82d31ea5 100644
--- a/packages/vue/src/form-item/form-item.tsx
+++ b/packages/vue/src/form-item/form-item.tsx
@@ -87,7 +87,8 @@ export default defineComponent({
       const { prop } = props
       if (!prop) {
         if (process.env.NODE_ENV !== 'production') {
-          return console.error(`[Fect] <FormItem> prop is required for validate`)
+          console.error(`[Fect] <FormItem> prop is required for validate`)
+          return
         }
       }
       const { model } = context!.props
diff --git a/packages/vue/src/form/form-context.ts b/packages/vue/src/form/form-context.ts
index 3ac646b8..fb901c79 100644
--- a/packages/vue/src/form/form-context.ts
+++ b/packages/vue/src/form/form-context.ts
@@ -1,19 +1,19 @@
-import { inject } from 'vue'
+import { inject, InjectionKey } from 'vue'
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
 import { pickContextProps } from '../utils'
 import type { FormContext, FormItemCotnext, FormItemInstance } from './interface'
 
-const READONLY_FORM_KEY = Symbol('formKey')
+const READONLY_FORM_KEY: InjectionKey<FormContext> = Symbol('formKey')
 
-const READONLY_FORM_ITEM_KEY = Symbol('formItemKey')
+const READONLY_FORM_ITEM_KEY: InjectionKey<FormItemCotnext> = Symbol('formItemKey')
 
-export const createFormContext = () => createProvider<FormItemInstance>(READONLY_FORM_KEY)
+export const createFormContext = () => createProvider<FormItemInstance, FormContext>(READONLY_FORM_KEY)
 
-export const useFormContext = () => useProvider<FormContext>(READONLY_FORM_KEY)
+export const useFormContext = () => useProvider(READONLY_FORM_KEY)
 
 export const createFormItemContext = () => createProvider(READONLY_FORM_ITEM_KEY)
 
-export const useFormItemCotnext = () => useProvider<FormItemCotnext>(READONLY_FORM_ITEM_KEY)
+export const useFormItemCotnext = () => useProvider(READONLY_FORM_ITEM_KEY)
 
 export const useFormStateContext = (): Pick<FormItemCotnext, 'behavior' | 'validate'> | undefined => {
   const parentState = inject<FormItemCotnext | null>(READONLY_FORM_ITEM_KEY, null)
diff --git a/packages/vue/src/form/form.tsx b/packages/vue/src/form/form.tsx
index f243f352..cc40aa34 100644
--- a/packages/vue/src/form/form.tsx
+++ b/packages/vue/src/form/form.tsx
@@ -3,7 +3,7 @@ import { useExpose } from '@fect-ui/vue-hooks'
 import { props } from './props'
 import { createName, createBem, isPlainObject, len, isArray } from '../utils'
 import { createFormContext } from './form-context'
-import type { PromisfyValidate, ValidateCallback } from './interface'
+import type { PromisfyValidate, ValidateCallback, ValidateResult } from './interface'
 import './index.less'
 import { Apollo } from './apollo'
 
@@ -49,7 +49,7 @@ export default defineComponent({
     const validateField = (fields: string | string[], callback?: ValidateCallback) => {
       fields = isArray(fields) ? fields : [fields]
       const fds = children.filter((_) => fields.includes(_.prop))
-      const result = fds.map((fd) => fd.validate('', callback))
+      const result = fds.map((fd) => fd.validate('', callback)) as ValidateResult[]
       if (!len(result) && callback) return callback(true, {})
       result.forEach(({ state, errs }) => {
         callback && callback(state, errs)
diff --git a/packages/vue/src/form/interface.ts b/packages/vue/src/form/interface.ts
index 83297e88..6348a639 100644
--- a/packages/vue/src/form/interface.ts
+++ b/packages/vue/src/form/interface.ts
@@ -16,13 +16,22 @@ export interface FormContext {
   props: FormProps
 }
 
-export type FormItemInstance = ComponentInstance<Omit<FormItemCotnext, 'behavior'> & FormItemProps>
+export type FormItemInstance = ComponentInstance<
+  Omit<FormItemCotnext, 'behavior'> &
+    FormItemProps & {
+      updateShowLogState: (state: boolean) => void
+      clearValidate: () => void
+    }
+>
+
+export interface ValidateResult {
+  state: boolean
+  errs: ValidateErrorParams
+}
 
 export interface FormItemCotnext {
   behavior: ComputedRef<Pick<FormProps, 'disabled' | 'size'>>
-  validate: (trigger: Trigger, callback?: ValidateCallback) => { state: boolean; errs: ValidateErrorParams }
-  updateShowLogState: (state: boolean) => void
-  clearValidate: () => void
+  validate: (trigger: Trigger, callback?: ValidateCallback) => ValidateResult | void
 }
 
 export type FormInstance = ComponentInstance<{
diff --git a/packages/vue/src/grid-group/grid-context.ts b/packages/vue/src/grid-group/grid-context.ts
index 28503b44..227be209 100644
--- a/packages/vue/src/grid-group/grid-context.ts
+++ b/packages/vue/src/grid-group/grid-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import { InjectionKey } from 'vue'
 import type { GridGroupContext } from './interface'
 
-const READONLY_GRID_KEY = Symbol('grdiKey')
+const READONLY_GRID_KEY: InjectionKey<GridGroupContext> = Symbol('grdiKey')
 
 export const createGridContext = () => createProvider(READONLY_GRID_KEY)
 
-export const useGridContext = () => useProvider<GridGroupContext>(READONLY_GRID_KEY)
+export const useGridContext = () => useProvider(READONLY_GRID_KEY)
diff --git a/packages/vue/src/input/__tests__/__snapshots__/index.spec.ts.snap b/packages/vue/src/input/__tests__/__snapshots__/index.spec.ts.snap
index bee18d43..b7686228 100644
--- a/packages/vue/src/input/__tests__/__snapshots__/index.spec.ts.snap
+++ b/packages/vue/src/input/__tests__/__snapshots__/index.spec.ts.snap
@@ -58,11 +58,11 @@ exports[`Input should support render prefix and suffix icon 1`] = `
     <div class="fect-input__container">
       <!---->
       <div class="fect-input__wrapper">
-        <div class="fect-input__icon fect-input__icon--prefix" style="cursor: pointer; pointer-events: auto;"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+        <div class="fect-input__icon fect-input__icon--prefix" style="cursor: pointer; pointer-events: auto;"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
             <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
           </svg></div><input type="text" class="">
         <!---->
-        <div class="fect-input__icon fect-input__icon--suffix" style="cursor: pointer; pointer-events: auto;"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+        <div class="fect-input__icon fect-input__icon--suffix" style="cursor: pointer; pointer-events: auto;"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
             <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
           </svg></div>
       </div>
diff --git a/packages/vue/src/modal/modal-context.ts b/packages/vue/src/modal/modal-context.ts
index 77eca15d..37c938e7 100644
--- a/packages/vue/src/modal/modal-context.ts
+++ b/packages/vue/src/modal/modal-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { ModalContext } from './interface'
 
-export const READONLY_MODAL_KEY = Symbol('modalKey')
+export const READONLY_MODAL_KEY: InjectionKey<ModalContext> = Symbol('modalKey')
 
 export const createModalContext = () => createProvider(READONLY_MODAL_KEY)
 
-export const useModalContext = () => useProvider<ModalContext>(READONLY_MODAL_KEY)
+export const useModalContext = () => useProvider(READONLY_MODAL_KEY)
diff --git a/packages/vue/src/pagination/pagination-context.ts b/packages/vue/src/pagination/pagination-context.ts
index 28194c53..cd1df08a 100644
--- a/packages/vue/src/pagination/pagination-context.ts
+++ b/packages/vue/src/pagination/pagination-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import { InjectionKey } from 'vue'
 import type { PaginationContext } from './interface'
 
-const READONLY_PAGINATION_KEY = Symbol('paginationKey')
+const READONLY_PAGINATION_KEY: InjectionKey<PaginationContext> = Symbol('paginationKey')
 
 export const createPaginationContext = () => createProvider(READONLY_PAGINATION_KEY)
 
-export const usePaginationContext = () => useProvider<PaginationContext>(READONLY_PAGINATION_KEY)
+export const usePaginationContext = () => useProvider(READONLY_PAGINATION_KEY)
diff --git a/packages/vue/src/radio-group/interface.ts b/packages/vue/src/radio-group/interface.ts
index 77c67327..e6ff8d27 100644
--- a/packages/vue/src/radio-group/interface.ts
+++ b/packages/vue/src/radio-group/interface.ts
@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import type { DeepReadonly, Ref } from 'vue'
 import type { NormalSizes } from '../utils'
 
 export type Parent = number | string
@@ -23,6 +23,6 @@ export interface RadioGroupContext {
     size: NormalSizes
   }
   updateRadioGroupChangeEvent: (val: RadioEvent) => void
-  parentValue: Ref<Parent>
+  parentValue: DeepReadonly<Ref<Parent>>
   updateRadioGroupValue: (val: Parent) => void
 }
diff --git a/packages/vue/src/radio-group/radio-context.ts b/packages/vue/src/radio-group/radio-context.ts
index 8042ea4b..ab5fddcf 100644
--- a/packages/vue/src/radio-group/radio-context.ts
+++ b/packages/vue/src/radio-group/radio-context.ts
@@ -1,9 +1,10 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 
 import type { RadioGroupContext } from './interface'
 
-export const READNONLY_RADIO_KEY = Symbol('radioKey')
+export const READNONLY_RADIO_KEY: InjectionKey<RadioGroupContext> = Symbol('radioKey')
 
 export const createRadioContext = () => createProvider(READNONLY_RADIO_KEY)
 
-export const useRadioContext = () => useProvider<RadioGroupContext>(READNONLY_RADIO_KEY)
+export const useRadioContext = () => useProvider(READNONLY_RADIO_KEY)
diff --git a/packages/vue/src/rating/__tests__/__snapshots__/index.spec.tsx.snap b/packages/vue/src/rating/__tests__/__snapshots__/index.spec.tsx.snap
index d54dd3e1..64ffc955 100644
--- a/packages/vue/src/rating/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/vue/src/rating/__tests__/__snapshots__/index.spec.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`Rating should be support custom Icon render 1`] = `
 <div class="fect-rating" role="slider" tabindex="0">
-  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
       <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
     </svg></div>
-  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
       <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
     </svg></div>
-  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
       <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
     </svg></div>
-  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
       <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
     </svg></div>
-  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
+  <div class="fect-rating__box  " style="--rating-svg-color: var(--rating-default-color);"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-testid="geist-icon" shape-rendering="geometricPrecision" viewBox="0 0 24 24" height="24" width="24" style="color: currentColor;">
       <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
     </svg></div>
 </div>
diff --git a/packages/vue/src/row/interface.ts b/packages/vue/src/row/interface.ts
index 564c459d..e4a09c81 100644
--- a/packages/vue/src/row/interface.ts
+++ b/packages/vue/src/row/interface.ts
@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
 
 export interface LayoutContext {
-  gutter: Ref<number>
+  gutter: Ref<number | string>
 }
diff --git a/packages/vue/src/row/layout-context.ts b/packages/vue/src/row/layout-context.ts
index 9e3e5925..b117fde6 100644
--- a/packages/vue/src/row/layout-context.ts
+++ b/packages/vue/src/row/layout-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { LayoutContext } from './interface'
 
-const READONLY_LAYOUT_KEY = Symbol('layoutkey')
+const READONLY_LAYOUT_KEY: InjectionKey<LayoutContext> = Symbol('layoutkey')
 
 export const createLayoutContext = () => createProvider(READONLY_LAYOUT_KEY)
 
-export const useLayoutContext = () => useProvider<LayoutContext>(READONLY_LAYOUT_KEY)
+export const useLayoutContext = () => useProvider(READONLY_LAYOUT_KEY)
diff --git a/packages/vue/src/select/__tests__/__snapshots__/index.spec.ts.snap b/packages/vue/src/select/__tests__/__snapshots__/index.spec.ts.snap
index 678a8714..84d03520 100644
--- a/packages/vue/src/select/__tests__/__snapshots__/index.spec.ts.snap
+++ b/packages/vue/src/select/__tests__/__snapshots__/index.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`Select should support render with multiple mode 1`] = `
   <div class="fect-select fect-select--medium" style="--select-content-height: 0px;" data-size="medium">
     <div class="fect-tooltip">
       <div class="fect-select__content">
-        <div class="fect-grid fect-grid--live fect-grid__group fect-grid__group--wrap fect-select__multiple" style="align-content: flex-start; align-items: stretch; flex-direction: row; justify-content: flex-start; --fect-grid-gap: calc(0.5 * 16px * 1/3);"></div>
+        <div class="fect-grid fect-grid--live fect-grid__group fect-grid__group--wrap fect-select__multiple" style="align-content: flex-start; align-items: stretch; flex-direction: row; justify-content: flex-start; --fect-grid-gap: calc(0.5 * 16px * 1/3); background-color: transparent;"></div>
         <div class="fect-input fect-input--medium">
           <!---->
           <div class="fect-input__container">
diff --git a/packages/vue/src/select/index.less b/packages/vue/src/select/index.less
index fc7ae322..6faeab10 100644
--- a/packages/vue/src/select/index.less
+++ b/packages/vue/src/select/index.less
@@ -64,7 +64,6 @@
     position: absolute;
     line-height: normal;
     box-sizing: border-box;
-    background-color: var(--primary-background);
   }
   &__item {
     display: inline-flex;
diff --git a/packages/vue/src/select/interface.ts b/packages/vue/src/select/interface.ts
index 611f301f..36030939 100644
--- a/packages/vue/src/select/interface.ts
+++ b/packages/vue/src/select/interface.ts
@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, Ref, ComputedRef } from 'vue'
+import type { ExtractPropTypes, Ref, ComputedRef, DeepReadonly } from 'vue'
 import type { ComponentInstance } from '../utils'
 import { selectOptionProps, props } from './props'
 
@@ -9,7 +9,7 @@ interface SelectState {
 
 export interface SelectContext {
   updateSelectVisible: () => void
-  parentValue: Ref<string | string[]>
+  parentValue: DeepReadonly<Ref<string | number | Array<string | number>>>
   selectState: ComputedRef<SelectState>
   updateDropDown: () => void
   updateSelectValue: (val: string | number) => void
diff --git a/packages/vue/src/select/props.ts b/packages/vue/src/select/props.ts
index 9701eaf1..ae8d78e2 100644
--- a/packages/vue/src/select/props.ts
+++ b/packages/vue/src/select/props.ts
@@ -3,11 +3,11 @@ import type { NormalSizes } from '../utils'
 
 export const props = {
   modelValue: {
-    type: [String, Number, Array] as PropType<string | string[]>,
+    type: [String, Number, Array] as PropType<string | string[] | number[] | number>,
     default: ''
   },
   value: {
-    type: [String, Number, Array] as PropType<string | string[]>,
+    type: [String, Number, Array] as PropType<string | string[] | number[] | number>,
     default: ''
   },
   placeholder: {
diff --git a/packages/vue/src/select/select-context.ts b/packages/vue/src/select/select-context.ts
index 721996d9..a0bf370d 100644
--- a/packages/vue/src/select/select-context.ts
+++ b/packages/vue/src/select/select-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import { InjectionKey } from 'vue'
 import type { SelectContext, SelectPropInstance } from './interface'
 
-export const READONLY_SELECT_KEY = Symbol('selectKey')
+export const READONLY_SELECT_KEY: InjectionKey<SelectContext> = Symbol('selectKey')
 
-export const createSelectContext = () => createProvider<SelectPropInstance>(READONLY_SELECT_KEY)
+export const createSelectContext = () => createProvider<SelectPropInstance, SelectContext>(READONLY_SELECT_KEY)
 
-export const useSelectContext = () => useProvider<SelectContext>(READONLY_SELECT_KEY)
+export const useSelectContext = () => useProvider(READONLY_SELECT_KEY)
diff --git a/packages/vue/src/select/select.tsx b/packages/vue/src/select/select.tsx
index 1859289b..e037664e 100644
--- a/packages/vue/src/select/select.tsx
+++ b/packages/vue/src/select/select.tsx
@@ -1,6 +1,6 @@
 import { computed, ref, watch, defineComponent, nextTick } from 'vue'
 import { useState } from '@fect-ui/vue-hooks'
-import { createName, createBem, pick, getDomRect, assign, isArray, useMounted, addUnit } from '../utils'
+import { createName, createBem, pick, getDomRect, assign, isArray, useMounted, addUnit, len } from '../utils'
 import Input from '../input'
 import Tooltip from '../tooltip'
 import GridGroup from '../grid-group'
@@ -30,8 +30,7 @@ export default defineComponent({
     const selectRef = ref<HTMLDivElement>()
     const gridRef = ref<ComponentInstance>()
     const { provider, children } = createSelectContext()
-
-    const [value, setValue] = useState<string | string[]>(props.modelValue || props.value)
+    const [value, setValue] = useState<string | number | Array<string | number>>(props.modelValue || props.value)
     const [visible, setVisible] = useState<boolean>(false)
     const [dropdownWidth, setDropdownWidth] = useState<number>(0)
     const [showClear, setShowClear] = useState<boolean>(false)
@@ -66,15 +65,14 @@ export default defineComponent({
       })
     }
 
-    const updateSelectValue = (val: string) => {
+    const updateSelectValue = (val: string | number) => {
       setValue((pre) => {
         if (props.multiple) {
           const previous = isArray(pre) ? pre : [pre]
-          if (!pre.includes(val)) return [...previous, val]
+          if (!previous.includes(val)) return [...previous, val]
           return previous.filter((item) => item !== val)
-        } else {
-          return val
         }
+        return val
       })
     }
 
@@ -116,7 +114,14 @@ export default defineComponent({
       const { clearable } = props
       const list = queryChecked.value
       return (
-        <GridGroup ref={gridRef} class={bem('multiple')} gap={0.5}>
+        <GridGroup
+          ref={gridRef}
+          class={bem('multiple')}
+          gap={0.5}
+          style={{
+            backgroundColor: len(list) ? 'var(--primary-background)' : 'transparent'
+          }}
+        >
           {list.map((_) => (
             <SelectMultiple onClear={() => multipleClearClickHandler(_.value as string)} clearable={clearable}>
               {_.label}
diff --git a/packages/vue/src/skeleton/skeleton-context.ts b/packages/vue/src/skeleton/skeleton-context.ts
index fae24df0..166cbbcd 100644
--- a/packages/vue/src/skeleton/skeleton-context.ts
+++ b/packages/vue/src/skeleton/skeleton-context.ts
@@ -1,9 +1,10 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 
 import type { SkeletonContext } from './interface'
 
-const READONLY_SKELETON_KEY = Symbol('skeletonKey')
+const READONLY_SKELETON_KEY: InjectionKey<SkeletonContext> = Symbol('skeletonKey')
 
 export const createSkeletonContext = () => createProvider(READONLY_SKELETON_KEY)
 
-export const useSkeletonContext = () => useProvider<SkeletonContext>(READONLY_SKELETON_KEY)
+export const useSkeletonContext = () => useProvider(READONLY_SKELETON_KEY)
diff --git a/packages/vue/src/swipe/interface.ts b/packages/vue/src/swipe/interface.ts
index 537de17b..f2873e06 100644
--- a/packages/vue/src/swipe/interface.ts
+++ b/packages/vue/src/swipe/interface.ts
@@ -1,9 +1,9 @@
 import { ComponentInstance } from '../utils'
-import type { Ref } from 'vue'
+import type { DeepReadonly, Ref } from 'vue'
 
 export interface SwipeContext {
-  index: Ref<number>
-  size: Ref<number>
+  index: DeepReadonly<Ref<number>>
+  size: DeepReadonly<Ref<number>>
 }
 
 export interface Shape {
diff --git a/packages/vue/src/swipe/swipe-context.ts b/packages/vue/src/swipe/swipe-context.ts
index 1b3d01d8..451c0ac3 100644
--- a/packages/vue/src/swipe/swipe-context.ts
+++ b/packages/vue/src/swipe/swipe-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import { InjectionKey } from 'vue'
 import type { SwipePropInstance, SwipeContext } from './interface'
 
-const READONLY_SWIPE_KEY = Symbol('swipeKey')
+const READONLY_SWIPE_KEY: InjectionKey<SwipeContext> = Symbol('swipeKey')
 
 export const createSwipeContext = () => createProvider<SwipePropInstance>(READONLY_SWIPE_KEY)
 
-export const useSwipeContext = () => useProvider<SwipeContext>(READONLY_SWIPE_KEY)
+export const useSwipeContext = () => useProvider(READONLY_SWIPE_KEY)
diff --git a/packages/vue/src/tabs/interface.ts b/packages/vue/src/tabs/interface.ts
index 1c11a80b..e2347c39 100644
--- a/packages/vue/src/tabs/interface.ts
+++ b/packages/vue/src/tabs/interface.ts
@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, Ref } from 'vue'
+import type { DeepReadonly, ExtractPropTypes, Ref } from 'vue'
 import type { ComponentInstance, DomRect } from '../utils'
 import { tabProps, tabsProps } from './props'
 
@@ -6,7 +6,7 @@ export type TabPropInstance = ComponentInstance<ExtractPropTypes<typeof tabProps
 
 export interface TabsContext {
   props: ExtractPropTypes<typeof tabsProps>
-  checked: Ref<string | number>
+  checked: DeepReadonly<Ref<string | number>>
 }
 
 export type TabsHighlightRect = DomRect & {
diff --git a/packages/vue/src/tabs/tabs-context.ts b/packages/vue/src/tabs/tabs-context.ts
index bb26fc00..ce834c5a 100644
--- a/packages/vue/src/tabs/tabs-context.ts
+++ b/packages/vue/src/tabs/tabs-context.ts
@@ -1,8 +1,9 @@
 import { createProvider, useProvider } from '@fect-ui/vue-hooks'
+import type { InjectionKey } from 'vue'
 import type { TabPropInstance, TabsContext } from './interface'
 
-export const READONLY_TABS_KEY = Symbol('tabsKey')
+export const READONLY_TABS_KEY: InjectionKey<TabsContext> = Symbol('tabsKey')
 
 export const createTabsContext = () => createProvider<TabPropInstance>(READONLY_TABS_KEY)
 
-export const useTabsContext = () => useProvider<TabsContext>(READONLY_TABS_KEY)
+export const useTabsContext = () => useProvider(READONLY_TABS_KEY)
diff --git a/packages/website/package.json b/packages/website/package.json
index 656ac0f1..5468900d 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -16,7 +16,7 @@
     "@fect-ui/md-loader": "1.0.0"
   },
   "dependencies": {
-    "@fect-ui/vue-hooks": "^1.2.1",
+    "@fect-ui/vue-hooks": "^1.3.0",
     "@fect-ui/vue-icons": "2.0.0",
     "prismjs": "^1.23.0",
     "vue-router": "^4.0.8"