From 8dd4192207dbd883e7b70b1b9bd11349b655cc4c Mon Sep 17 00:00:00 2001
From: tyh2001 <1469442737@qq.com>
Date: Sun, 29 Jan 2023 15:07:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=81=E8=A3=85=E6=96=B0=E7=9A=84=20?=
 =?UTF-8?q?message=20hook=20=F0=9F=8F=B7=EF=B8=8F=F0=9F=8F=B7=EF=B8=8F?=
 =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/fighting-design/_hooks/index.ts      |   1 +
 .../fighting-design/_hooks/use-eject/index.ts | 129 ++++++++++++++++++
 .../_hooks/use-eject/interface.d.ts           |  31 +++++
 .../fighting-design/message/src/message.vue   | 110 +++------------
 .../notification/src/notification.vue         | 108 +++------------
 start/src/App.vue                             |  37 ++---
 6 files changed, 211 insertions(+), 205 deletions(-)
 create mode 100644 packages/fighting-design/_hooks/use-eject/index.ts
 create mode 100644 packages/fighting-design/_hooks/use-eject/interface.d.ts

diff --git a/packages/fighting-design/_hooks/index.ts b/packages/fighting-design/_hooks/index.ts
index ff683fbff2..320e905855 100644
--- a/packages/fighting-design/_hooks/index.ts
+++ b/packages/fighting-design/_hooks/index.ts
@@ -17,3 +17,4 @@ export * from './use-visible'
 export * from './use-tabs-nav-style'
 export * from './use-button'
 export * from './use-tips'
+export * from './use-eject'
diff --git a/packages/fighting-design/_hooks/use-eject/index.ts b/packages/fighting-design/_hooks/use-eject/index.ts
new file mode 100644
index 0000000000..9e7748023b
--- /dev/null
+++ b/packages/fighting-design/_hooks/use-eject/index.ts
@@ -0,0 +1,129 @@
+import { useList, useTips } from '..'
+import { onMounted, nextTick, ref, computed } from 'vue'
+import type { Ref, CSSProperties } from 'vue'
+import type { MessageProps } from '../../message'
+import type { NotificationProps } from '../../notification'
+import type { UseEjectReturn } from './interface'
+
+export * from './interface.d'
+
+/**
+ * 针对 message notification 组件公共方法封装
+ * 
+ * @param prop props 参数
+ * @param component 组件名
+ * @param el 元素节点
+ */
+export const useEject = (
+  prop: MessageProps | NotificationProps,
+  component: 'message' | 'notification',
+  el: Ref<HTMLDivElement | null>
+): UseEjectReturn => {
+
+  /** 元素的高度 */
+  const elHeight = ref<number>(0)
+
+  /** 控制显示隐藏 */
+  const visible = ref<boolean>(false)
+
+  /** 计时器 */
+  const timer = ref<NodeJS.Timeout>()
+
+  const { classes, styles } = useList(prop, component)
+  const { getSiblingOffset, removeInstance } = useTips()
+
+  /** 类名列表 */
+  const classList = classes(['type', 'placement', 'round'], `f-${component}`)
+
+  /** 样式列表 */
+  const styleList = styles(['color', 'background', 'zIndex'], 'zIndex')
+
+  onMounted((): void => {
+    nextTick((): void => {
+      /**
+       * 设置元素的高度
+       *
+       * @see getBoundingClientRec https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRec
+       */
+      elHeight.value = el.value ? el.value.getBoundingClientRect().height : 0
+    })
+  })
+
+  /** 判断方位 */
+  const isPosition = computed((): boolean => prop.placement.includes(component === 'message' ? 'top' : 'right'))
+
+  /** 计算组件之间偏移量 */
+  const siblingOffset = computed((): number => getSiblingOffset(prop.placement, prop.id, !isPosition.value))
+
+  /** 计算偏移量 */
+  const offset = computed((): number => prop.offset + siblingOffset.value)
+
+  /** 底部偏移量 */
+  const bottom = computed((): number => elHeight.value + offset.value)
+
+  /** 位置偏移量样式列表 */
+  const offsetStyle = computed((): CSSProperties => {
+    const styles: CSSProperties = {}
+
+    if (prop.placement.includes('bottom')) {
+      styles.bottom = offset.value + 'px'
+    } else {
+      styles.top = offset.value + 'px'
+    }
+
+    return styles
+  })
+
+  /** 清除计时器 */
+  const clearTimer = (): void => {
+    if (!timer.value) return
+    clearTimeout(timer.value)
+  }
+
+  /** 关闭提示框 */
+  const closeMessage = (): void => {
+    clearTimer()
+    visible.value = false
+  }
+
+  /**
+   * 关闭提示框之后的回调
+   *
+   * 移除组件实例
+   */
+  const closeMessageEnd = (): void => {
+    removeInstance(prop.placement, prop.id)
+  }
+
+  /**
+   * 开始计时
+   *
+   * 到时间隐藏提示框
+   */
+  const startTime = (): void => {
+    if (!prop.duration) return
+    timer.value = setTimeout((): void => {
+      closeMessage()
+    }, prop.duration)
+  }
+
+  /** 初始化之后开始计时 并且展示提示 */
+  onMounted((): void => {
+    startTime()
+    visible.value = true
+  })
+
+  return {
+    classList,
+    styleList,
+    elHeight,
+    bottom,
+    offsetStyle,
+    isPosition,
+    visible,
+    clearTimer,
+    closeMessage,
+    closeMessageEnd,
+    startTime
+  }
+} 
diff --git a/packages/fighting-design/_hooks/use-eject/interface.d.ts b/packages/fighting-design/_hooks/use-eject/interface.d.ts
new file mode 100644
index 0000000000..bbfd3f9493
--- /dev/null
+++ b/packages/fighting-design/_hooks/use-eject/interface.d.ts
@@ -0,0 +1,31 @@
+import type { ComputedRef, CSSProperties, Ref } from 'vue'
+import type { ClassList } from '../../_interface'
+
+/**
+ * useEject 返回值类型接口
+ * 
+ * @param classList 类名列表
+ * @param styleList 样式列表
+ * @param elHeight 元素的高度
+ * @param bottom 底部偏移量
+ * @param offsetStyle 位置偏移量样式列表
+ * @param isPosition 判断方位
+ * @param visible 控制显示隐藏
+ * @param clearTimer 清除计时器
+ * @param closeMessage 关闭提示框
+ * @param closeMessageEnd 关闭提示框之后的回调
+ * @param startTime 开始计时
+ */
+export interface UseEjectReturn {
+  classList: ComputedRef<ClassList>
+  styleList: ComputedRef<CSSProperties>
+  elHeight: Ref<number>
+  bottom: ComputedRef<number>
+  offsetStyle: ComputedRef<CSSProperties>
+  isPosition: ComputedRef<boolean>
+  visible: Ref<boolean>
+  clearTimer: () => void
+  closeMessage: () => void
+  closeMessageEnd: () => void
+  startTime: () => void
+}
diff --git a/packages/fighting-design/message/src/message.vue b/packages/fighting-design/message/src/message.vue
index fdea13c7ff..4cfbe68af7 100644
--- a/packages/fighting-design/message/src/message.vue
+++ b/packages/fighting-design/message/src/message.vue
@@ -1,110 +1,32 @@
 <script lang="ts" setup name="FMessage">
   import { Props } from './props'
-  import { computed, onMounted, ref, isVNode, nextTick } from 'vue'
+  import { ref, isVNode } from 'vue'
   import { FSvgIcon } from '../../svg-icon'
   import { FCloseBtn } from '../../close-btn'
   import { isString } from '../../_utils'
-  import { useList, useTips } from '../../_hooks'
-  import type { CSSProperties, Ref } from 'vue'
+  import { useEject } from '../../_hooks'
+  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
   const emit = defineEmits({
     destroy: (): boolean => true
   })
 
-  const { getSiblingOffset, removeInstance } = useTips()
-  const { classes, styles } = useList(prop, 'message')
-
   /** 元素节点 */
   const FMessageEl: Ref<HTMLDivElement | null> = ref<HTMLDivElement | null>(null)
-  /** message 元素的高度 */
-  const messageHeight = ref<number>(0)
-  /** 是否展示 */
-  const visible = ref<boolean>(false)
-
-  /** 判断是否为上面方位的 */
-  const isTop = computed((): boolean => prop.placement === 'top')
-
-  /** 计算组件之间偏移量 */
-  const siblingOffset = computed((): number => getSiblingOffset(prop.placement, prop.id, !isTop.value))
-
-  /** 计算偏移量 */
-  const offset = computed((): number => prop.offset + siblingOffset.value)
-
-  /** 底部偏移量 */
-  const bottom = computed((): number => messageHeight.value + offset.value)
-
-  onMounted((): void => {
-    nextTick((): void => {
-      /**
-       * 设置元素的高度
-       *
-       * @see getBoundingClientRec https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRec
-       */
-      messageHeight.value = FMessageEl.value ? FMessageEl.value.getBoundingClientRect().height : 0
-    })
-  })
-
-  /** 类名列表 */
-  const classList = classes(['type', 'placement', 'round'], 'f-message')
-
-  /** 样式列表 */
-  const styleList = styles(['color', 'background', 'zIndex'], 'zIndex')
-
-  /** 位置偏移量样式列表 */
-  const offsetStyle = computed((): CSSProperties => {
-    const styles: CSSProperties = {}
-
-    if (prop.placement.includes('bottom')) {
-      styles.bottom = offset.value + 'px'
-    } else {
-      styles.top = offset.value + 'px'
-    }
 
-    return styles
-  })
-
-  /** 计时器 */
-  const timer = ref<NodeJS.Timeout>()
-
-  /** 清除计时器 */
-  const clearTimer = (): void => {
-    if (!timer.value) return
-    clearTimeout(timer.value)
-  }
-
-  /** 关闭提示框 */
-  const closeMessage = (): void => {
-    clearTimer()
-    visible.value = false
-  }
-
-  /**
-   * 关闭提示框之后的回调
-   *
-   * 移除组件实例
-   */
-  const closeMessageEnd = (): void => {
-    removeInstance(prop.placement, prop.id)
-  }
-
-  /**
-   * 开始计时
-   *
-   * 到时间隐藏提示框
-   */
-  const startTime = (): void => {
-    if (!prop.duration) return
-    timer.value = setTimeout((): void => {
-      closeMessage()
-    }, prop.duration)
-  }
-
-  /** 初始化之后开始计时 并且展示提示 */
-  onMounted((): void => {
-    startTime()
-    visible.value = true
-  })
+  const {
+    classList,
+    styleList,
+    bottom,
+    offsetStyle,
+    isPosition,
+    visible,
+    clearTimer,
+    closeMessage,
+    closeMessageEnd,
+    startTime
+  } = useEject(prop, 'message', FMessageEl)
 
   defineExpose({
     visible,
@@ -116,7 +38,7 @@
 <template>
   <transition
     mode="out-in"
-    :name="`f-message-fade` + (isTop ? '-top' : '-bottom')"
+    :name="`f-message-fade` + (isPosition ? '-top' : '-bottom')"
     @before-leave="closeMessageEnd"
     @after-leave="emit('destroy')"
   >
diff --git a/packages/fighting-design/notification/src/notification.vue b/packages/fighting-design/notification/src/notification.vue
index fa0a21d04a..e9d61df5d6 100644
--- a/packages/fighting-design/notification/src/notification.vue
+++ b/packages/fighting-design/notification/src/notification.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup name="FNotification">
   import { Props } from './props'
-  import { computed, onMounted, ref, isVNode, nextTick } from 'vue'
+  import { computed, ref, isVNode } from 'vue'
   import { FSvgIcon } from '../../svg-icon'
   import { FCloseBtn } from '../../close-btn'
   import { isString } from '../../_utils'
-  import { useTips, useList } from '../../_hooks'
+  import { useEject } from '../../_hooks'
   import {
     FIconSmileLineVue,
     FIconLightbulbVue,
@@ -12,7 +12,7 @@
     FIconCircleCrossVue,
     FIconWarningVue
   } from '../../_svg'
-  import type { CSSProperties } from 'vue'
+  import type { Ref } from 'vue'
   import type { FightingIcon } from '../../_interface'
 
   const prop = defineProps(Props)
@@ -20,8 +20,21 @@
     destroy: (): boolean => true
   })
 
-  const { getSiblingOffset, removeInstance } = useTips()
-  const { classes, styles } = useList(prop, 'notification')
+  /** 元素节点 */
+  const FNotificationEl: Ref<HTMLDivElement | null> = ref<HTMLDivElement | null>(null)
+
+  const {
+    classList,
+    styleList,
+    bottom,
+    offsetStyle,
+    visible,
+    isPosition,
+    clearTimer,
+    closeMessage,
+    closeMessageEnd,
+    startTime
+  } = useEject(prop, 'notification', FNotificationEl)
 
   /** 默认 icon 列表 */
   const notificationDefaultIcon = {
@@ -42,89 +55,6 @@
     return null
   })
 
-  const FNotificationEl = ref<HTMLDivElement>()
-  const notificationHeight = ref<number>(0)
-  const visible = ref<boolean>(false)
-
-  // const isTop = computed((): boolean => prop.placement.includes('top'))
-  /** 判断是否为上面方位的 */
-  // const isTop = computed((): boolean => prop.placement === 'top')
-
-  const isRight = computed((): boolean => prop.placement.includes('right'))
-
-  const siblingOffset = computed((): number => getSiblingOffset(prop.placement, prop.id, false))
-
-  const offset = computed((): number => prop.offset + siblingOffset.value)
-
-  const bottom = computed((): number => notificationHeight.value + offset.value)
-
-  onMounted((): void => {
-    nextTick((): void => {
-      notificationHeight.value = (FNotificationEl.value as HTMLDivElement).getBoundingClientRect().height
-    })
-  })
-
-  /** 类名列表 */
-  const classList = classes(['type', 'placement', 'round'], 'f-notification')
-
-  /** 样式列表 */
-  const styleList = styles(['color', 'background', 'zIndex'], 'zIndex')
-
-  /** 位置偏移量样式列表 */
-  const offsetStyle = computed((): CSSProperties => {
-    const styles: CSSProperties = {}
-
-    if (prop.placement.includes('bottom')) {
-      styles.bottom = offset.value + 'px'
-    } else {
-      styles.top = offset.value + 'px'
-    }
-
-    return styles
-  })
-
-  /** 计时器 */
-  const timer = ref<NodeJS.Timeout>()
-
-  /** 清除计时器 */
-  const clearTimer = (): void => {
-    if (!timer.value) return
-    clearTimeout(timer.value)
-  }
-
-  /** 关闭提示框 */
-  const closeMessage = (): void => {
-    clearTimer()
-    visible.value = false
-  }
-
-  /**
-   * 关闭提示框之后的回调
-   *
-   * 移除组件实例
-   */
-  const closeMessageEnd = (): void => {
-    removeInstance(prop.placement, prop.id)
-  }
-
-  /**
-   * 开始计时
-   *
-   * 到时间隐藏提示框
-   */
-  const startTime = (): void => {
-    if (!prop.duration) return
-    timer.value = setTimeout((): void => {
-      closeMessage()
-    }, prop.duration)
-  }
-
-  /** 初始化之后开始计时 并且展示提示 */
-  onMounted((): void => {
-    startTime()
-    visible.value = true
-  })
-
   defineExpose({
     visible,
     bottom,
@@ -135,7 +65,7 @@
 <template>
   <transition
     mode="out-in"
-    :name="`f-notification-fade` + (isRight ? '-right' : '-left')"
+    :name="`f-notification-fade` + (isPosition ? '-right' : '-left')"
     @before-leave="closeMessageEnd"
     @after-leave="emit('destroy')"
   >
diff --git a/start/src/App.vue b/start/src/App.vue
index 207b64d843..26a76296d4 100644
--- a/start/src/App.vue
+++ b/start/src/App.vue
@@ -1,31 +1,24 @@
-<script lang="ts" setup>
-  import { FMessage, FNotification } from 'fighting-design'
-
-  const openMessage = (): void => {
-    FMessage({
-      message: '这是一条消息提示',
-      type: 'success'
-      // duration: 0,
-      // color: 'red',
-      // zIndex: 2000,
-      // background: 'black'
-      // placement: 'bottom-right'
-    })
-
-    // FMessage.success('123')
+<script setup lang="ts">
+  import { FNotification } from 'fighting-design'
+  import type { NotificationPlacement } from 'fighting-design'
 
+  const openNotificationPlacement = (placement: NotificationPlacement) => {
     FNotification({
-      color: 'red',
+      title: '一条通知',
+      message: '这是一条自定义位置的消息',
+      type: 'primary',
+      close: true,
       duration: 0,
-      zIndex: 20002,
-      background: 'blue',
-      message: '这是通知内容'
+      placement: placement
     })
   }
 </script>
 
 <template>
-  <f-button :on-click="openMessage">打开</f-button>
+  <f-space>
+    <f-button type="primary" @click="openNotificationPlacement('top-left')"> 左上 </f-button>
+    <f-button type="primary" @click="openNotificationPlacement('top-right')"> 右上 </f-button>
+    <f-button type="success" @click="openNotificationPlacement('bottom-left')"> 左下 </f-button>
+    <f-button type="success" @click="openNotificationPlacement('bottom-right')"> 右下 </f-button>
+  </f-space>
 </template>
-
-<style lang="scss" scoped></style>