From c4d503834f6e53ea5c0a3652ed42cebe57267dbb Mon Sep 17 00:00:00 2001
From: Tyh2001 <1469442737@qq.com>
Date: Mon, 10 Apr 2023 12:49:00 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E4=B8=8B=E8=BD=BD=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.en-US.md                 | 11 +++++
 CHANGELOG.md                       |  2 +
 docs/docs/changelog.md             | 15 ++++++
 docs/docs/components/downloads.vue | 73 ++++++++++++++++++++++++++++++
 docs/docs/introduce.md             | 10 ++++
 5 files changed, 111 insertions(+)
 create mode 100644 docs/docs/components/downloads.vue

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index e08a4be715..d05aec9ed1 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -4,6 +4,17 @@
 
 English | [Chinese](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.md)
 
+## 0.31.0 (2023-04-10)
+
+- Change the default value of `FNotification` component type to null
+- Change the default value of the `FNotification` component duration to 2500
+- `FNotification` component cancels close events
+- `FNotification` Component Style Optimization
+- Change the default value of the `FMessage` component duration to 2500
+- `FMessage` component abolishes close events
+- Adding `on-close` callback parameter types to `FMessage` and `FNotification`
+- Optimization of `f-stick-card` component style details
+
 ## 0.30.0 (2023-04-01)
 
 - Fix message component export types
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9bcd221d7a..a2428c9e68 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
+## 0.31.0 (2023-04-10)
+
 - `FNotification` 组件 type 默认值改为 null
 - `FNotification` 组件 duration 默认值改为 2500
 - `FNotification` 组件废除 close Events
diff --git a/docs/docs/changelog.md b/docs/docs/changelog.md
index a376ddc5af..a2428c9e68 100644
--- a/docs/docs/changelog.md
+++ b/docs/docs/changelog.md
@@ -2,6 +2,21 @@
 
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
+## 0.31.0 (2023-04-10)
+
+- `FNotification` 组件 type 默认值改为 null
+- `FNotification` 组件 duration 默认值改为 2500
+- `FNotification` 组件废除 close Events
+- `FNotification` 组件样式优化
+- `FMessage` 组件 duration 默认值改为 2500
+- `FMessage` 组件废除 close Events
+- `FMessage` 和 `FNotification` 添加 `on-close` 回调参数类型
+- `f-sticky-card` 组件样式细节优化
+
+## 0.30.0 (2023-04-01)
+
+- 修复 message 组件导出类型
+
 ## 0.28.2 (2023-04-01)
 
 - 修复全局类型错误
diff --git a/docs/docs/components/downloads.vue b/docs/docs/components/downloads.vue
new file mode 100644
index 0000000000..a15f2a04a9
--- /dev/null
+++ b/docs/docs/components/downloads.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+  import { reactive } from 'vue'
+
+  interface DownloadVolumeItem {
+    downloads: number
+    end: string
+    start: string
+    zh: string
+  }
+
+  interface DownloadVolume {
+    'last-month': DownloadVolumeItem | null
+    'last-week': DownloadVolumeItem | null
+    'last-day': DownloadVolumeItem | null
+  }
+
+  const downloadVolume: DownloadVolume = reactive({
+    'last-month': null,
+    'last-week': null,
+    'last-day': null
+  })
+
+  const times = [
+    { en: 'last-month', zh: '上个月' },
+    { en: 'last-week', zh: '上周' },
+    { en: 'last-day', zh: '昨天' }
+  ] as const
+
+  times.forEach(item => {
+    fetch(`https://api.npmjs.org/downloads/point/${item.en}/fighting-design`)
+      .then((res: Response) => res.json())
+      .then((res: DownloadVolumeItem) => {
+        if (res) {
+          res.zh = item.zh
+          downloadVolume[item.en as keyof DownloadVolume] = res
+        }
+      })
+      .catch(err => console.log(err))
+  })
+</script>
+
+<template>
+  <table id="downloads-table">
+    <thead>
+      <tr>
+        <th>时间范围</th>
+        <th>时间</th>
+        <th>下载量</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr v-for="(item, index) in downloadVolume" :key="index">
+        <template v-if="item">
+          <td>{{ item.start }} ~ {{ item.end }}</td>
+          <td>{{ item.zh }}</td>
+          <td>{{ item.downloads }}</td>
+        </template>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style lang="scss" scoped>
+  #downloads-table {
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+    table-layout: fixed;
+    text-align: left;
+    display: inline-table;
+  }
+</style>
diff --git a/docs/docs/introduce.md b/docs/docs/introduce.md
index 9a890f0e2e..3c125df30b 100644
--- a/docs/docs/introduce.md
+++ b/docs/docs/introduce.md
@@ -39,3 +39,13 @@
 ## 💬 执照
 
 [MIT](https://github.com/FightingDesign/fighting-design/blob/master/LICENSE)
+
+## 📈 下载量
+
+<downloads />
+
+详细趋势请参考 [fighting-design npm trends](https://npmtrends.com/fighting-design)
+
+<script lang="ts" setup>
+import downloads from './components/downloads.vue'
+</script>