docs: 更新文档下载量

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

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

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)
 
 - 修复全局类型错误

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>

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>