From c96fc4382928dd7447e2267287616005dc56f936 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 5 Jun 2022 16:40:20 +0800
Subject: [PATCH] feat(breadcrumb-item): add clickable prop

---
 .eslintrc.js                                  |   1 +
 CHANGELOG.en-US.md                            |   1 +
 CHANGELOG.zh-CN.md                            |   1 +
 src/breadcrumb/demos/enUS/basic.demo.vue      |  20 ++--
 src/breadcrumb/demos/enUS/custom.demo.vue     |  20 +++-
 src/breadcrumb/demos/enUS/index.demo-entry.md |   9 +-
 .../demos/enUS/separator-per-item.demo.vue    |  12 +--
 src/breadcrumb/demos/enUS/separator.demo.vue  |   9 +-
 src/breadcrumb/demos/zhCN/basic.demo.vue      |  21 ++--
 src/breadcrumb/demos/zhCN/custom.demo.vue     |  16 ++-
 src/breadcrumb/demos/zhCN/index.demo-entry.md |   8 +-
 .../demos/zhCN/separator-per-item.demo.vue    |   9 +-
 src/breadcrumb/demos/zhCN/separator.demo.vue  |   9 +-
 src/breadcrumb/src/Breadcrumb.tsx             |  12 ++-
 src/breadcrumb/src/BreadcrumbItem.tsx         |  35 ++++--
 src/breadcrumb/src/styles/index.cssr.ts       | 100 +++++++++++-------
 src/breadcrumb/styles/light.ts                |  15 ++-
 src/time/demos/zhCN/format.demo.vue           |   2 +-
 18 files changed, 187 insertions(+), 113 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 46b0fb3b6..e8457df70 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -13,6 +13,7 @@ module.exports = {
       files: ['*.vue', '*.js'],
       extends: ['plugin:vue/essential', '@vue/standard'],
       rules: {
+        'vue/multiline-html-element-content-newline': 0,
         'vue/multi-word-component-names': 0,
         'vue/max-attributes-per-line': [
           2,
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index ace96c7e3..868b1f4ad 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -19,6 +19,7 @@
 - `n-tag` adds background color in dark theme when `:bordered="false"`, closes [#1699](https://github.com/TuSimple/naive-ui/issues/1699).
 - `n-time-picker` adds `time-zone` prop, closes [#293](https://github.com/TuSimple/naive-ui/issues/293).
 - `n-time` adds `time-zone` prop.
+- `n-breadcrumb-item` adds `clickable` prop.
 
 ## 2.29.1
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 92f98c408..9c00d6af6 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -19,6 +19,7 @@
 - `n-tag` 在暗色背景下 `:bordered="false"` 时增加背景颜色，关闭 [#1699](https://github.com/TuSimple/naive-ui/issues/1699)
 - `n-time-picker` 新增 `time-zone` 属性，关闭 [#293](https://github.com/TuSimple/naive-ui/issues/293)
 - `n-time` 新增 `time-zone` 属性
+- `n-breadcrumb-item` 新增 `clickable` 属性
 
 ## 2.29.1
 
diff --git a/src/breadcrumb/demos/enUS/basic.demo.vue b/src/breadcrumb/demos/enUS/basic.demo.vue
index 3207bd9d3..20bd11eb4 100644
--- a/src/breadcrumb/demos/enUS/basic.demo.vue
+++ b/src/breadcrumb/demos/enUS/basic.demo.vue
@@ -4,15 +4,11 @@
 
 <template>
   <n-breadcrumb>
-    <n-breadcrumb-item href="#">
-      <n-icon><md-cash /></n-icon> Home
-    </n-breadcrumb-item>
-    <n-breadcrumb-item href="#">
-      <n-icon><md-cash /></n-icon> Account
-    </n-breadcrumb-item>
-    <n-breadcrumb-item href="#">
-      <n-icon><md-cash /></n-icon> Category
-    </n-breadcrumb-item>
+    <n-breadcrumb-item><n-icon :component="MdCash" /> Home</n-breadcrumb-item>
+    <n-breadcrumb-item>
+      <n-icon :component="MdCash" /> Account</n-breadcrumb-item>
+    <n-breadcrumb-item>
+      <n-icon :component="MdCash" /> Category</n-breadcrumb-item>
   </n-breadcrumb>
 </template>
 
@@ -21,8 +17,10 @@ import { defineComponent } from 'vue'
 import { MdCash } from '@vicons/ionicons4'
 
 export default defineComponent({
-  components: {
-    MdCash
+  setup () {
+    return {
+      MdCash
+    }
   }
 })
 </script>
diff --git a/src/breadcrumb/demos/enUS/custom.demo.vue b/src/breadcrumb/demos/enUS/custom.demo.vue
index eee35875b..179f42656 100644
--- a/src/breadcrumb/demos/enUS/custom.demo.vue
+++ b/src/breadcrumb/demos/enUS/custom.demo.vue
@@ -8,12 +8,16 @@ It is possible to pass a custom template when you want to customize the item lin
   <n-breadcrumb>
     <n-breadcrumb-item>
       <n-dropdown :options="options1">
-        I'm ok
+        <div class="trigger">
+          I'm ok
+        </div>
       </n-dropdown>
     </n-breadcrumb-item>
     <n-breadcrumb-item>
       <n-dropdown :options="options2">
-        I'm ok
+        <div class="trigger">
+          I'm ok
+        </div>
       </n-dropdown>
     </n-breadcrumb-item>
   </n-breadcrumb>
@@ -49,3 +53,15 @@ export default defineComponent({
   }
 })
 </script>
+
+<style>
+.trigger::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: inherit;
+}
+</style>
diff --git a/src/breadcrumb/demos/enUS/index.demo-entry.md b/src/breadcrumb/demos/enUS/index.demo-entry.md
index e85dd9f07..28ab599d2 100644
--- a/src/breadcrumb/demos/enUS/index.demo-entry.md
+++ b/src/breadcrumb/demos/enUS/index.demo-entry.md
@@ -21,10 +21,11 @@ separator-per-item.vue
 
 ### BreadcrumbItem Props
 
-| Name      | Type     | Default     | Description               |
-| --------- | -------- | ----------- | ------------------------- |
-| separator | `string` | `undefined` | BreadcrumbItem separator. |
-| href      | `string` | `undefined` | BreadcrumbItem link.      |
+| Name | Type | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| clickable | `boolean` | `true` | Whether it's clickable. | NEXT_VERSION |
+| separator | `string` | `undefined` | BreadcrumbItem separator. |  |
+| href | `string` | `undefined` | BreadcrumbItem link. |  |
 
 ### Breadcrumb Slots
 
diff --git a/src/breadcrumb/demos/enUS/separator-per-item.demo.vue b/src/breadcrumb/demos/enUS/separator-per-item.demo.vue
index f4f823d69..fe0b9a45d 100644
--- a/src/breadcrumb/demos/enUS/separator-per-item.demo.vue
+++ b/src/breadcrumb/demos/enUS/separator-per-item.demo.vue
@@ -7,17 +7,13 @@ Use separator prop or separator slot to custom separator of an item. When both a
 <template>
   <n-breadcrumb>
     <n-breadcrumb-item separator=">">
-      <n-icon><md-cash /></n-icon> Home
-    </n-breadcrumb-item>
+      <n-icon><md-cash /></n-icon> Home</n-breadcrumb-item>
     <n-breadcrumb-item>
-      <n-icon><md-cash /></n-icon> Account
-      <template #separator>
+      <n-icon><md-cash /></n-icon> Account<template #separator>
         ~
-      </template>
-    </n-breadcrumb-item>
+      </template></n-breadcrumb-item>
     <n-breadcrumb-item>
-      <n-icon><md-cash /></n-icon> Category
-    </n-breadcrumb-item>
+      <n-icon><md-cash /></n-icon> Category</n-breadcrumb-item>
   </n-breadcrumb>
 </template>
 
diff --git a/src/breadcrumb/demos/enUS/separator.demo.vue b/src/breadcrumb/demos/enUS/separator.demo.vue
index 8d47dada7..35462d0fa 100644
--- a/src/breadcrumb/demos/enUS/separator.demo.vue
+++ b/src/breadcrumb/demos/enUS/separator.demo.vue
@@ -7,14 +7,11 @@ Use separator prop to custom separator.
 <template>
   <n-breadcrumb separator=">">
     <n-breadcrumb-item>
-      <n-icon><md-cash /></n-icon> Home
-    </n-breadcrumb-item>
+      <n-icon><md-cash /></n-icon> Home</n-breadcrumb-item>
     <n-breadcrumb-item>
-      <n-icon><md-cash /></n-icon> Account
-    </n-breadcrumb-item>
+      <n-icon><md-cash /></n-icon> Account</n-breadcrumb-item>
     <n-breadcrumb-item>
-      <n-icon><md-cash /></n-icon> Category
-    </n-breadcrumb-item>
+      <n-icon><md-cash /></n-icon> Category</n-breadcrumb-item>
   </n-breadcrumb>
 </template>
 <script lang="ts">
diff --git a/src/breadcrumb/demos/zhCN/basic.demo.vue b/src/breadcrumb/demos/zhCN/basic.demo.vue
index fda7e0f60..150c1a73b 100644
--- a/src/breadcrumb/demos/zhCN/basic.demo.vue
+++ b/src/breadcrumb/demos/zhCN/basic.demo.vue
@@ -4,15 +4,12 @@
 
 <template>
   <n-breadcrumb>
-    <n-breadcrumb-item href="#">
-      <n-icon><md-cash /></n-icon> 北京总行
-    </n-breadcrumb-item>
-    <n-breadcrumb-item href="#">
-      <n-icon><md-cash /></n-icon> 天津分行
-    </n-breadcrumb-item>
-    <n-breadcrumb-item href="#">
-      <n-icon><md-cash /></n-icon> 平山道支行
-    </n-breadcrumb-item>
+    <n-breadcrumb-item>
+      <n-icon :component="MdCash" /> 北京总行</n-breadcrumb-item>
+    <n-breadcrumb-item>
+      <n-icon :component="MdCash" /> 天津分行</n-breadcrumb-item>
+    <n-breadcrumb-item>
+      <n-icon :component="MdCash" /> 平山道支行</n-breadcrumb-item>
   </n-breadcrumb>
 </template>
 
@@ -21,8 +18,10 @@ import { defineComponent } from 'vue'
 import { MdCash } from '@vicons/ionicons4'
 
 export default defineComponent({
-  components: {
-    MdCash
+  setup () {
+    return {
+      MdCash
+    }
   }
 })
 </script>
diff --git a/src/breadcrumb/demos/zhCN/custom.demo.vue b/src/breadcrumb/demos/zhCN/custom.demo.vue
index 28d2ebbd3..cf13b7128 100644
--- a/src/breadcrumb/demos/zhCN/custom.demo.vue
+++ b/src/breadcrumb/demos/zhCN/custom.demo.vue
@@ -8,12 +8,16 @@
   <n-breadcrumb>
     <n-breadcrumb-item>
       <n-dropdown :options="options1">
-        I'm ok
+        <div class="trigger">
+          I'm ok
+        </div>
       </n-dropdown>
     </n-breadcrumb-item>
     <n-breadcrumb-item>
       <n-dropdown :options="options2">
-        I'm ok
+        <div class="trigger">
+          I'm ok
+        </div>
       </n-dropdown>
     </n-breadcrumb-item>
   </n-breadcrumb>
@@ -49,3 +53,11 @@ export default defineComponent({
   }
 })
 </script>
+
+<style>
+.trigger {
+  padding: 4px;
+  margin: -4px;
+  border-radius: inherit;
+}
+</style>
diff --git a/src/breadcrumb/demos/zhCN/index.demo-entry.md b/src/breadcrumb/demos/zhCN/index.demo-entry.md
index 55ff2d5e6..d15ebc8dd 100644
--- a/src/breadcrumb/demos/zhCN/index.demo-entry.md
+++ b/src/breadcrumb/demos/zhCN/index.demo-entry.md
@@ -21,9 +21,11 @@ separator-per-item.vue
 
 ### BreadcrumbItem Props
 
-| 名称      | 类型     | 默认值 | 说明                   |
-| --------- | -------- | ------ | ---------------------- |
-| separator | `string` | `'/'`  | 面包屑子项之间的分隔符 |
+| 名称      | 类型      | 默认值      | 说明                   | 版本         |
+| --------- | --------- | ----------- | ---------------------- | ------------ |
+| clickable | `boolean` | `true`      | 是否可点击             | NEXT_VERSION |
+| href      | `string`  | `undefined` | 链接地址               |              |
+| separator | `string`  | `'/'`       | 面包屑子项之间的分隔符 |              |
 
 ### Breadcrumb Slots
 
diff --git a/src/breadcrumb/demos/zhCN/separator-per-item.demo.vue b/src/breadcrumb/demos/zhCN/separator-per-item.demo.vue
index 4d5e2f144..673d2c170 100644
--- a/src/breadcrumb/demos/zhCN/separator-per-item.demo.vue
+++ b/src/breadcrumb/demos/zhCN/separator-per-item.demo.vue
@@ -7,17 +7,14 @@
 <template>
   <n-breadcrumb>
     <n-breadcrumb-item separator=">">
-      <n-icon><md-cash /></n-icon> 北京总行
-    </n-breadcrumb-item>
+      <n-icon><md-cash /></n-icon> 北京总行</n-breadcrumb-item>
     <n-breadcrumb-item>
-      <n-icon><md-cash /></n-icon> 天津分行
-      <template #separator>
+      <n-icon><md-cash /></n-icon> 天津分行<template #separator>
         ~
       </template>
     </n-breadcrumb-item>
     <n-breadcrumb-item>
-      <n-icon><md-cash /></n-icon> 平山道支行
-    </n-breadcrumb-item>
+      <n-icon><md-cash /></n-icon> 平山道支行</n-breadcrumb-item>
   </n-breadcrumb>
 </template>
 
diff --git a/src/breadcrumb/demos/zhCN/separator.demo.vue b/src/breadcrumb/demos/zhCN/separator.demo.vue
index 6f7e0e857..06cb75580 100644
--- a/src/breadcrumb/demos/zhCN/separator.demo.vue
+++ b/src/breadcrumb/demos/zhCN/separator.demo.vue
@@ -7,14 +7,11 @@
 <template>
   <n-breadcrumb separator=">">
     <n-breadcrumb-item>
-      <n-icon><md-cash /></n-icon> 北京总行
-    </n-breadcrumb-item>
+      <n-icon><md-cash /></n-icon> 北京总行</n-breadcrumb-item>
     <n-breadcrumb-item>
-      <n-icon><md-cash /></n-icon> 天津分行
-    </n-breadcrumb-item>
+      <n-icon><md-cash /></n-icon> 天津分行</n-breadcrumb-item>
     <n-breadcrumb-item>
-      <n-icon><md-cash /></n-icon> 平山道支行
-    </n-breadcrumb-item>
+      <n-icon><md-cash /></n-icon> 平山道支行</n-breadcrumb-item>
   </n-breadcrumb>
 </template>
 
diff --git a/src/breadcrumb/src/Breadcrumb.tsx b/src/breadcrumb/src/Breadcrumb.tsx
index d57fe6084..4149c0e48 100644
--- a/src/breadcrumb/src/Breadcrumb.tsx
+++ b/src/breadcrumb/src/Breadcrumb.tsx
@@ -59,7 +59,11 @@ export default defineComponent({
           itemTextColorPressed,
           itemTextColorActive,
           fontSize,
-          fontWeightActive
+          fontWeightActive,
+          itemBorderRadius,
+          itemColorHover,
+          itemColorPressed,
+          itemLineHeight
         }
       } = themeRef.value
       return {
@@ -70,7 +74,11 @@ export default defineComponent({
         '--n-item-text-color-pressed': itemTextColorPressed,
         '--n-item-text-color-active': itemTextColorActive,
         '--n-separator-color': separatorColor,
-        '--n-font-weight-active': fontWeightActive
+        '--n-item-color-hover': itemColorHover,
+        '--n-item-color-pressed': itemColorPressed,
+        '--n-item-border-radius': itemBorderRadius,
+        '--n-font-weight-active': fontWeightActive,
+        '--n-item-line-height': itemLineHeight
       }
     })
     const themeClassHandle = inlineThemeDisabled
diff --git a/src/breadcrumb/src/BreadcrumbItem.tsx b/src/breadcrumb/src/BreadcrumbItem.tsx
index af2811b0e..b46a1ed34 100644
--- a/src/breadcrumb/src/BreadcrumbItem.tsx
+++ b/src/breadcrumb/src/BreadcrumbItem.tsx
@@ -1,11 +1,23 @@
-import { h, defineComponent, inject, ExtractPropTypes, computed } from 'vue'
-import { warn } from '../../_utils'
+import {
+  h,
+  defineComponent,
+  inject,
+  ExtractPropTypes,
+  computed,
+  PropType
+} from 'vue'
+import { resolveSlot, warn } from '../../_utils'
 import { useBrowserLocation } from '../../_utils/composable/use-browser-location'
 import { breadcrumbInjectionKey } from './Breadcrumb'
 
 const breadcrumbItemProps = {
   separator: String,
-  href: String
+  href: String,
+  clickable: {
+    type: Boolean,
+    default: true
+  },
+  onClick: Function as PropType<(e: MouseEvent) => void>
 } as const
 
 export type BreadcrumbItemProps = Partial<
@@ -36,15 +48,20 @@ export default defineComponent({
 
     return () => {
       const { value: mergedClsPrefix } = mergedClsPrefixRef
-
       return (
-        <li class={`${mergedClsPrefix}-breadcrumb-item`}>
+        <li
+          class={[
+            `${mergedClsPrefix}-breadcrumb-item`,
+            props.clickable && `${mergedClsPrefix}-breadcrumb-item--clickable`
+          ]}
+        >
           {h(
             htmlTagRef.value,
             {
               class: `${mergedClsPrefix}-breadcrumb-item__link`,
               'aria-current': ariaCurrentRef.value,
-              href: props.href
+              href: props.href,
+              onClick: props.onClick
             },
             slots
           )}
@@ -52,9 +69,9 @@ export default defineComponent({
             class={`${mergedClsPrefix}-breadcrumb-item__separator`}
             aria-hidden="true"
           >
-            {slots.separator
-              ? slots.separator()
-              : props.separator ?? separatorRef.value}
+            {resolveSlot(slots.separator, () => [
+              props.separator ?? separatorRef.value
+            ])}
           </span>
         </li>
       )
diff --git a/src/breadcrumb/src/styles/index.cssr.ts b/src/breadcrumb/src/styles/index.cssr.ts
index 9d17036b3..33812368b 100644
--- a/src/breadcrumb/src/styles/index.cssr.ts
+++ b/src/breadcrumb/src/styles/index.cssr.ts
@@ -1,4 +1,4 @@
-import { c, cB, cE } from '../../../_utils/cssr'
+import { c, cB, cE, cM } from '../../../_utils/cssr'
 
 // vars:
 // --n-font-size
@@ -9,8 +9,14 @@ import { c, cB, cE } from '../../../_utils/cssr'
 // --n-item-text-color-active
 // --n-separator-color
 // --n-font-weight-active
+// --n-item-border-radius
+// --n-item-color-hover
+// --n-item-color-active
+// --n-item-line-height
 export default cB('breadcrumb', `
   white-space: nowrap;
+  cursor: default;
+  line-height: var(--n-item-line-height);
 `, [
   c('ul', `
     list-style: none;
@@ -21,55 +27,75 @@ export default cB('breadcrumb', `
     color: inherit;
     text-decoration: inherit;
   `),
-  cB('breadcrumb-item', {
-    fontSize: 'var(--n-font-size)',
-    transition: 'color .3s var(--n-bezier)',
-    display: 'inline-block'
-  }, [
+  cB('breadcrumb-item', `
+    font-size: var(--n-font-size);
+    transition: color .3s var(--n-bezier);
+    display: inline-flex;
+    align-items: center;
+  `, [
     cB('icon', `
       font-size: 18px;
       vertical-align: -.2em;
       transition: color .3s var(--n-bezier);
       color: var(--n-item-text-color);
     `),
-    cE('link', {
-      cursor: 'pointer',
-      transition: 'color .3s var(--n-bezier)',
-      color: 'var(--n-item-text-color)'
-    }),
-    cE('separator', {
-      margin: '0 8px',
-      color: 'var(--n-separator-color)',
-      transition: 'color .3s var(--n-bezier)'
-    }),
-    c('&:hover', [
-      cB('icon', {
-        color: 'var(--n-item-text-color-hover)'
-      }),
-      cE('link', {
-        color: 'var(--n-item-text-color-hover)'
-      })
+    c('&:not(:last-child)', [
+      cM('clickable', [
+        cE('link', `
+          cursor: pointer;
+        `, [
+          c('&:hover', `
+            background-color: var(--n-item-color-hover);
+          `),
+          c('&:active', `
+            background-color: var(--n-item-color-pressed);  
+          `)
+        ])
+      ])
     ]),
-    c('&:active', [
-      cB('icon', {
-        color: 'var(--n-item-text-color-pressed)'
-      }),
-      cE('link', {
-        color: 'var(--n-item-text-color-pressed)'
-      })
+    cE('link', `
+      padding: 4px;
+      border-radius: var(--n-item-border-radius);
+      transition:
+        background-color .3s var(--n-bezier),
+        color .3s var(--n-bezier);
+      color: var(--n-item-text-color);
+      position: relative;
+    `, [
+      c('&:hover', `
+        color: var(--n-item-text-color-hover);
+      `, [
+        cB('icon', `
+          color: var(--n-item-text-color-hover);
+        `)
+      ]),
+      c('&:active', `
+        color: var(--n-item-text-color-pressed);
+      `, [
+        cB('icon', `
+          color: var(--n-item-text-color-pressed);
+        `)
+      ])
     ]),
+    cE('separator', `
+      margin: 0 8px;
+      color: var(--n-separator-color);
+      transition: color .3s var(--n-bezier);
+      user-select: none;
+    `),
     c('&:last-child', [
       cE('link', `
         font-weight: var(--n-font-weight-active);
         cursor: unset;
         color: var(--n-item-text-color-active);
-      `),
-      cB('icon', {
-        color: 'var(--n-item-text-color-active)'
-      }),
-      cE('separator', {
-        display: 'none'
-      })
+      `, [
+        cB('icon', `
+          color: var(--n-item-text-color-active);
+        `)
+      ]),
+      cE('separator', `
+        display: none;
+      `)
     ])
   ])
 ])
diff --git a/src/breadcrumb/styles/light.ts b/src/breadcrumb/styles/light.ts
index b44deeb59..acafd0eb5 100644
--- a/src/breadcrumb/styles/light.ts
+++ b/src/breadcrumb/styles/light.ts
@@ -7,17 +7,22 @@ export const self = (vars: ThemeCommonVars) => {
   const {
     fontSize,
     textColor3,
-    primaryColorHover,
-    primaryColorPressed,
-    textColor2
+    textColor2,
+    borderRadius,
+    buttonColor2Hover,
+    buttonColor2Pressed
   } = vars
   return {
     ...commonVariables,
     fontSize: fontSize,
+    itemLineHeight: '1.25',
     itemTextColor: textColor3,
-    itemTextColorHover: primaryColorHover,
-    itemTextColorPressed: primaryColorPressed,
+    itemTextColorHover: textColor2,
+    itemTextColorPressed: textColor2,
     itemTextColorActive: textColor2,
+    itemBorderRadius: borderRadius,
+    itemColorHover: buttonColor2Hover,
+    itemColorPressed: buttonColor2Pressed,
     separatorColor: textColor3
   }
 }
diff --git a/src/time/demos/zhCN/format.demo.vue b/src/time/demos/zhCN/format.demo.vue
index 7993e64b4..4dbc7b5b4 100644
--- a/src/time/demos/zhCN/format.demo.vue
+++ b/src/time/demos/zhCN/format.demo.vue
@@ -1,7 +1,7 @@
 <markdown>
 # 格式化
 
-格式化时间， 详尽文档请查看 <n-a href="https://date-fns.org/v2.6.0/docs/format" target="_blank">date-fns format</n-a>.
+格式化时间， 详尽文档请查看 <n-a href="https://date-fns.org/v2.6.0/docs/format" target="_blank">date-fns format</n-a>。
 </markdown>
 
 <template>