diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index deee786459..a76b606a09 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -2,6 +2,11 @@
 
 English | [Chinese](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.md)
 
+## 0.3.1-bate.4 (2022-07-15)
+
+- `link` component new `default` configuration `type`
+- The default value of `button` component `ripple` is changed to `false`
+
 ## 0.3.0-bate.3 (2022-07-13)
 
 **feat**
diff --git a/CHANGELOG.md b/CHANGELOG.md
index de8e4259be..39c8e48f96 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
+## 0.3.1-bate.4 (2022-07-15)
+
 - `Link` 组件新增 `default` 配置 `type`
 - `button` 组件 `ripples` 默认值改为 `false`
 
diff --git a/docs/docs/docs/changelog.md b/docs/docs/docs/changelog.md
index 0edaaee5b5..39c8e48f96 100644
--- a/docs/docs/docs/changelog.md
+++ b/docs/docs/docs/changelog.md
@@ -2,6 +2,11 @@
 
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
+## 0.3.1-bate.4 (2022-07-15)
+
+- `Link` 组件新增 `default` 配置 `type`
+- `button` 组件 `ripples` 默认值改为 `false`
+
 ## 0.3.0-bate.3 (2022-07-13)
 
 **feat**
diff --git a/packages/fighting-components/breadcrumb/src/breadcrumb-item.vue b/packages/fighting-components/breadcrumb/src/breadcrumb-item.vue
index 4185d2ce23..e2dd2a9c39 100644
--- a/packages/fighting-components/breadcrumb/src/breadcrumb-item.vue
+++ b/packages/fighting-components/breadcrumb/src/breadcrumb-item.vue
@@ -3,7 +3,7 @@
   import { breadcrumbKey } from './breadcrumb'
   import { Props } from './breadcrumb-item'
   import type { ComponentInternalInstance, Ref } from 'vue'
-  import type { onClickInterface } from './interface'
+  import type { handleClickInterface } from './interface'
 
   const prop = defineProps(Props)
 
@@ -16,7 +16,7 @@
   const { separator, separatorIcon, itemColor, separatorColor } =
     toRefs(breadcrumbContext)
 
-  const onClick: onClickInterface = (): void => {
+  const handleClick: handleClickInterface = (): void => {
     const { replace, to } = prop
 
     if (!to || !router) {
@@ -33,7 +33,7 @@
       class="f-breadcrumb-item__inner"
       :style="{ color: itemColor }"
       role="link"
-      @click="onClick"
+      @click="handleClick"
     >
       <slot />
     </span>
diff --git a/packages/fighting-components/breadcrumb/src/interface.d.ts b/packages/fighting-components/breadcrumb/src/interface.d.ts
index e4b5a0a2c8..366cb5b6bd 100644
--- a/packages/fighting-components/breadcrumb/src/interface.d.ts
+++ b/packages/fighting-components/breadcrumb/src/interface.d.ts
@@ -1,3 +1,3 @@
-export interface onClickInterface {
+export interface handleClickInterface {
   (): void
 }
diff --git a/packages/fighting-components/button/src/interface.d.ts b/packages/fighting-components/button/src/interface.d.ts
index 38783378b0..159c695907 100644
--- a/packages/fighting-components/button/src/interface.d.ts
+++ b/packages/fighting-components/button/src/interface.d.ts
@@ -11,16 +11,6 @@ export type buttonType =
 
 export type buttonNativeType = 'button' | 'submit' | 'reset'
 
-export interface RipplesInterface {
-  evt: PointerEvent
-  node: HTMLElement
-  time: number
-  ripplesColor: string
-  clickRipples(): void
-  renderElement(x: number, y: number): HTMLSpanElement
-  removeElement(node: HTMLElement): void
-}
-
 export type buttonEventInterface = PointerEvent & {
   layerX: number
   layerY: number
diff --git a/packages/fighting-components/captcha/src/captcha.vue b/packages/fighting-components/captcha/src/captcha.vue
index 0e50692b30..9fde86174c 100644
--- a/packages/fighting-components/captcha/src/captcha.vue
+++ b/packages/fighting-components/captcha/src/captcha.vue
@@ -29,7 +29,6 @@
       document.onmousemove = (evt: MouseEvent): void => {
         if (evt.clientX - dis >= 0 && evt.clientX - dis <= 260) {
           range.value = Math.floor((evt.clientX - dis) / 2.6)
-          // range.value = (((evt.clientX - dis) / 260) * 100).toFixed()
           node.style.left = evt.clientX - dis + 'px'
         }
       }
diff --git a/packages/fighting-components/image/src/PreviewList.vue b/packages/fighting-components/image/src/PreviewList.vue
index ffbbcae646..e24b2fb767 100644
--- a/packages/fighting-components/image/src/PreviewList.vue
+++ b/packages/fighting-components/image/src/PreviewList.vue
@@ -34,7 +34,7 @@
     rotate.value = 0
   }
 
-  const close: ordinaryFunctionInterface = (): void => {
+  const handleClose: ordinaryFunctionInterface = (): void => {
     emit('close')
   }
 
@@ -165,7 +165,7 @@
         <f-icon size="30px" icon="f-icon-arrow-left" />
       </div>
 
-      <div v-if="showCloseBtn" class="close_button" @click="close">
+      <div v-if="showCloseBtn" class="close_button" @click="handleClose">
         <f-icon size="20px" icon="f-icon-close" />
       </div>
 
diff --git a/packages/fighting-components/image/src/image.vue b/packages/fighting-components/image/src/image.vue
index befa099215..f47ba23fe9 100644
--- a/packages/fighting-components/image/src/image.vue
+++ b/packages/fighting-components/image/src/image.vue
@@ -20,13 +20,13 @@
     null as unknown as HTMLImageElement
   )
 
-  const onClick: ordinaryFunctionInterface = (): void => {
+  const handleClick: ordinaryFunctionInterface = (): void => {
     if (prop.previewList && prop.previewList.length) {
       isPreviewListShow.value = true
     }
   }
 
-  const onClose: ordinaryFunctionInterface = (): void => {
+  const handleClose: ordinaryFunctionInterface = (): void => {
     isPreviewListShow.value = false
   }
 
@@ -62,7 +62,7 @@
       :draggable="draggable"
       :referrer-policy="referrerPolicy"
       :alt="alt"
-      @click="onClick"
+      @click="handleClick"
     />
 
     <div
@@ -90,7 +90,7 @@
       :show-close-btn="showCloseBtn"
       :preview-round="previewRound"
       :width="width"
-      @close="onClose"
+      @close="handleClose"
     />
   </div>
 
diff --git a/packages/fighting-components/tag/src/tag.vue b/packages/fighting-components/tag/src/tag.vue
index 0e109193fe..231ad84ea0 100644
--- a/packages/fighting-components/tag/src/tag.vue
+++ b/packages/fighting-components/tag/src/tag.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup name="FTag">
   import { Props, Emits } from './tag'
-  import { computed } from 'vue'
+  import { computed, ref } from 'vue'
   import type { handleCloseInterface } from './interface'
-  import type { ComputedRef } from 'vue'
+  import type { ComputedRef, Ref } from 'vue'
 
   const prop = defineProps(Props)
   const emit = defineEmits(Emits)
 
+  const isShow: Ref<boolean> = ref<boolean>(false)
+
   const classList: ComputedRef<object | string[]> = computed(
     (): object | string[] => {
       const { simple, type, size, block, round } = prop
@@ -25,12 +27,13 @@
   )
 
   const handleClose: handleCloseInterface = (evt: MouseEvent): void => {
+    isShow.value = false
     emit('onClose', evt)
   }
 </script>
 
 <template>
-  <div :class="classList" :style="{ background, color }">
+  <div v-if="isShow" :class="classList" :style="{ background, color }">
     <i v-if="leftIcon" :class="['f-icon', leftIcon]" />
     <slot />
     <i v-if="rightIcon" :class="['f-icon', rightIcon]" />
diff --git a/packages/fighting-design/package.json b/packages/fighting-design/package.json
index a580b59299..68b60435f7 100644
--- a/packages/fighting-design/package.json
+++ b/packages/fighting-design/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fighting-design",
-  "version": "0.3.0-bate.3",
+  "version": "0.3.1-bate.4",
   "description": "Fighting design is a Vue3 lightweight component library written with TypeScript + Template.",
   "keywords": [
     "fighting",