From bed3e86d63e8b0557d1acb9aeac4e96c1f79d187 Mon Sep 17 00:00:00 2001
From: Tyh2001 <1469442737@qq.com>
Date: Mon, 10 Apr 2023 21:47:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20`FMessage`=20?=
 =?UTF-8?q?=E4=B8=8D=E5=90=8C=E5=BC=B9=E5=87=BA=E4=BD=8D=E7=BD=AE=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.en-US.md                            |  4 +++
 CHANGELOG.md                                  |  4 +++
 docs/components/message.md                    | 33 +++++++++----------
 docs/components/notification.md               | 10 +++---
 docs/docs/changelog.md                        |  4 +++
 .../_hooks/use-message-work/index.ts          |  2 ++
 .../_hooks/use-message/index.ts               | 24 +++++++-------
 packages/fighting-design/package.json         |  4 +--
 start/src/App.vue                             |  2 ++
 9 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index d05aec9ed1..eef66b494a 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -4,6 +4,10 @@
 
 English | [Chinese](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.md)
 
+## 0.31.1 (2023-04-10)
+
+- Fix the issue of incorrect pop-up positions for `FMessage`
+
 ## 0.31.0 (2023-04-10)
 
 - Change the default value of `FNotification` component type to null
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a2428c9e68..2b469afd35 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
+## 0.31.1 (2023-04-10)
+
+- 修复 `FMessage` 不同弹出位置错误的问题
+
 ## 0.31.0 (2023-04-10)
 
 - `FNotification` 组件 type 默认值改为 null
diff --git a/docs/components/message.md b/docs/components/message.md
index fdc543a83d..7b6ec55892 100644
--- a/docs/components/message.md
+++ b/docs/components/message.md
@@ -167,7 +167,9 @@
 
 :::
 
-## 多个位置
+## 不同位置
+
+`placement` 配置项可调整不同弹出位置
 
 ::: demo
 
@@ -183,25 +185,11 @@
 </template>
 
 ```html
-<template>
-  <f-space>
-    <f-button type="primary" @click="openMessagePlacement('top')"> 顶部 </f-button>
-    <f-button type="primary" @click="openMessagePlacement('top-left')"> 左上 </f-button>
-    <f-button type="primary" @click="openMessagePlacement('top-right')"> 右上 </f-button>
-    <f-button type="success" @click="openMessagePlacement('bottom')"> 底部 </f-button>
-    <f-button type="success" @click="openMessagePlacement('bottom-left')">
-      左下
-    </f-button>
-    <f-button type="success" @click="openMessagePlacement('bottom-right')">
-      右下
-    </f-button>
-  </f-space>
-</template>
-
 <script setup lang="ts">
   import { FMessage } from 'fighting-design'
+  import type { MessagePlacement } from 'fighting-design'
 
-  const openMessagePlacement = placement => {
+  const openMessagePlacement = (placement: MessagePlacement): void => {
     FMessage({
       message: '这是一条自定义位置的消息',
       type: 'primary',
@@ -211,6 +199,17 @@
     })
   }
 </script>
+
+<template>
+  <f-space>
+    <f-button type="primary" @click="openMessagePlacement('top')">顶部</f-button>
+    <f-button type="primary" @click="openMessagePlacement('top-left')">左上</f-button>
+    <f-button type="primary" @click="openMessagePlacement('top-right')">右上</f-button>
+    <f-button type="success" @click="openMessagePlacement('bottom')">底部</f-button>
+    <f-button type="success" @click="openMessagePlacement('bottom-left')">左下</f-button>
+    <f-button type="success" @click="openMessagePlacement('bottom-right')">右下</f-button>
+  </f-space>
+</template>
 ```
 
 :::
diff --git a/docs/components/notification.md b/docs/components/notification.md
index c352052aa3..020dcff0e6 100644
--- a/docs/components/notification.md
+++ b/docs/components/notification.md
@@ -36,8 +36,6 @@
 
 `notification` 属性可接收 `string` 显示文本，也可接收 `VNode` 自定义消息
 
-限定最大宽度为`500px`
-
 ::: demo
 
 <template #source>
@@ -131,7 +129,7 @@
 
 此外，`Notification` 拥有可控的 duration， 默认的关闭时间为 `2500 毫秒`，当把这个属性的值设置为 0 便表示该消息不会被自动关闭。
 
-可以传递`closeBtn`属性来自定义关闭按钮，支持字符串与 `VNode`。
+可以传递 `close-btn` 属性来自定义关闭按钮，支持字符串与 `VNode`。
 
 ::: demo
 
@@ -178,7 +176,9 @@
 
 :::
 
-## 多个位置
+## 不同位置
+
+`placement` 配置项可调整不同弹出位置
 
 ::: demo
 
@@ -213,7 +213,7 @@
   import { FNotification } from 'fighting-design'
   import type { NotificationPlacement } from 'fighting-design'
 
-  const openNotificationPlacement = (placement: NotificationPlacement) => {
+  const openNotificationPlacement = (placement: NotificationPlacement): void => {
     FNotification({
       title: '一条通知',
       message: '这是一条自定义位置的消息',
diff --git a/docs/docs/changelog.md b/docs/docs/changelog.md
index a2428c9e68..2b469afd35 100644
--- a/docs/docs/changelog.md
+++ b/docs/docs/changelog.md
@@ -2,6 +2,10 @@
 
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
+## 0.31.1 (2023-04-10)
+
+- 修复 `FMessage` 不同弹出位置错误的问题
+
 ## 0.31.0 (2023-04-10)
 
 - `FNotification` 组件 type 默认值改为 null
diff --git a/packages/fighting-design/_hooks/use-message-work/index.ts b/packages/fighting-design/_hooks/use-message-work/index.ts
index 5a8b505727..e5e3723fce 100644
--- a/packages/fighting-design/_hooks/use-message-work/index.ts
+++ b/packages/fighting-design/_hooks/use-message-work/index.ts
@@ -111,6 +111,8 @@ export const useMessageWork = (
     return styles
   })
 
+  console.log(offsetStyle.value)
+
   /** 清除计时器 */
   const clearTimer = (): void => {
     if (!timeout) return
diff --git a/packages/fighting-design/_hooks/use-message/index.ts b/packages/fighting-design/_hooks/use-message/index.ts
index 767197f030..f473090a48 100644
--- a/packages/fighting-design/_hooks/use-message/index.ts
+++ b/packages/fighting-design/_hooks/use-message/index.ts
@@ -87,7 +87,7 @@ const getIndexByInstance = (instance: ComponentInternalInstance): number => {
  * @returns { number } 间隔尺寸信息
  */
 const getNextElementInterval = (instance: ComponentInternalInstance): number => {
-  /** 间隔高度 */
+  /** 每个提示框之间的间隔高度 */
   const INTERVAL_HEIGHT = 16
 
   /**
@@ -120,9 +120,9 @@ const updatePosition = (closeInstance: ComponentInternalInstance): void => {
       instances[placement] as ComponentInternalInstance[]
     )[index]
 
-    /** 减少后面的组件实例偏移量 */
-    ;(instance.exposed as Record<string, Ref<number>>).offsetVal.value -=
-      getNextElementInterval(closeInstance)
+      /** 减少后面的组件实例偏移量 */
+      ; (instance.exposed as Record<string, Ref<number>>).offsetVal.value -=
+        getNextElementInterval(closeInstance)
   }
 }
 
@@ -137,13 +137,13 @@ export const removeInstance = (instance: ComponentInternalInstance): void => {
   /** 当前组件的方位 */
   const placement: MessagePlacement | NotificationPlacement = getPlacement(instance)
 
-  /**
-   * @see Array.prototype.splice() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
-   */
-  ;(instances[placement] as ComponentInternalInstance[]).splice(
-    getIndexByInstance(instance),
-    1
-  )
+    /**
+     * @see Array.prototype.splice() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
+     */
+    ; (instances[placement] as ComponentInternalInstance[]).splice(
+      getIndexByInstance(instance),
+      1
+    )
 }
 
 /**
@@ -191,7 +191,7 @@ export const useMessage = (
     let result: number = options.offset || 20
     /** 获取到当前方位的组件实例集合 */
     const placementInstance: ComponentInternalInstance[] | undefined =
-      instances[options.placement || name === 'message' ? 'top' : 'top-right']
+      instances[options.placement as MessagePlacement | NotificationPlacement]
 
     if (placementInstance) {
       placementInstance.forEach((instance: ComponentInternalInstance): void => {
diff --git a/packages/fighting-design/package.json b/packages/fighting-design/package.json
index 6822655ee8..d04e6f442f 100644
--- a/packages/fighting-design/package.json
+++ b/packages/fighting-design/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fighting-design",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "description": "Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.",
   "keywords": [
     "fighting",
@@ -57,4 +57,4 @@
   },
   "homepage": "https://fighting.tianyuhao.cn",
   "repository": "https://github.com/FightingDesign/fighting-design"
-}
+}
\ No newline at end of file
diff --git a/start/src/App.vue b/start/src/App.vue
index 1c772edac4..8470873421 100644
--- a/start/src/App.vue
+++ b/start/src/App.vue
@@ -1,3 +1,5 @@
 <script lang="ts" setup></script>
 
 <template></template>
+
+<style lang="scss" scoped></style>