feat(equation): new component

2025-04-18 14:50:56 +08:00 · 2022-11-12 12:26:31 +08:00 · 2022-11-12 12:26:31 +08:00 · f7e3f107e2
commit f7e3f107e2
parent 849dbce1c8
47 changed files with 219 additions and 44 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -18,6 +18,7 @@
 - `n-input` adds `count-graphemes` prop, closes [#3967](https://github.com/tusen-ai/naive-ui/issues/3967).
 - `n-cascader` adds `not-found` slot, closes [#3862](https://github.com/tusen-ai/naive-ui/issues/3862).
 - `n-avatar` adds `img-props` prop, closes [#3963](https://github.com/tusen-ai/naive-ui/issues/3963).
+- Add `n-equation` component.

 ### Fixes

--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -18,6 +18,7 @@
 - `n-input` 新增 `count-graphemes` 属性，关闭 [#3967](https://github.com/tusen-ai/naive-ui/issues/3967)
 - `n-cascader` 新增 `not-found` slot，关闭 [#3862](https://github.com/tusen-ai/naive-ui/issues/3862)
 - `n-avatar` 新增 `img-props` 属性，关闭 [#3963](https://github.com/tusen-ai/naive-ui/issues/3963)
+- 新增 `n-equation` 组件

 ### Fixes

--- a/build/loaders/md-renderer.js
+++ b/build/loaders/md-renderer.js
@ -42,7 +42,7 @@ function createRenderer (wrapCodeWithCard = true) {
      const highlighted = hljs.highlight(code, { language }).value
      const content = `<n-code><pre v-pre>${highlighted}</pre></n-code>`
      return wrapCodeWithCard
-        ? `<n-card size="small" class="md-card" content-style="padding: 0;">
+        ? `<n-card embedded :bordered="false" class="md-card" content-style="padding: 0;">
            <n-scrollbar x-scrollable content-style="padding: 12px; 16px;">
              ${content}
            </n-scrollbar>
--- a/demo/pages/docs/experimental-features/enUS/index.md
+++ b/demo/pages/docs/experimental-features/enUS/index.md
@ -2,7 +2,7 @@

 # Experimental Features

-<n-alert type="warning" title="Caveats">
+<n-alert type="warning" title="Caveats" :bordered="false">
  The following features are <n-text strong>unstable</n-text>. Use them if you really need and perpare to follow the API changes.
 </n-alert>

--- a/demo/pages/docs/experimental-features/zhCN/index.md
+++ b/demo/pages/docs/experimental-features/zhCN/index.md
@ -2,7 +2,7 @@

 # 试验性特性

-<n-alert type="warning" title="注意">
+<n-alert type="warning" title="注意" :bordered="false">
  下列的所有功能都是<n-text strong>不稳定</n-text>的。只在真的需要的时候再使用他们，API 有可能在未来被改变。
 </n-alert>

--- a/src/code/demos/enUS/index.demo-entry.md
+++ b/src/code/demos/enUS/index.demo-entry.md
@ -2,7 +2,7 @@

 ## Prequisites

-<n-alert title="Note" type="warning" style="margin-bottom: 16px;">
+<n-alert title="Note" type="warning" style="margin-bottom: 16px;" :bordered="false">
  Due to package size, Naive UI doesn't include highlight.js. If you want to use Code, make sure you have set highlightjs before using it.
 </n-alert>

--- a/src/code/demos/zhCN/index.demo-entry.md
+++ b/src/code/demos/zhCN/index.demo-entry.md
@ -2,7 +2,7 @@

 ## 预备条件

-<n-alert title="注意" type="warning" style="margin-bottom: 16px;">
+<n-alert title="注意" type="warning" style="margin-bottom: 16px;" :bordered="false">
  由于包体积原因，Naive UI 不内置 highlight.js。如果你需要使用代码组件，请确保你在使用之前已经设定了 highlight.js。
 </n-alert>

--- a/src/config-provider/demos/enUS/index.demo-entry.md
+++ b/src/config-provider/demos/enUS/index.demo-entry.md
@ -27,6 +27,7 @@ inline-theme-disabled.vue
 | cls-prefix | `string` | `n` | The class prefix of all inner components. It's applied in the first time. |  |
 | date-locale | `DateLocale \| null` | `undefined` | The date locale object to be consumed by its child. If set to `null` it will use the default `dateEnUS` locale. If set to `undefined` it will inherit its parent `n-config-provider`. |  |
 | inline-theme-disabled | `boolean` | `false` | Whether to disabled inline theme CSS variables. If you won't change theme overrides frequently in client side, and need SSR or make devtools looks clear. You can enable the prop. Note that the prop is not responsive. | 2.26.0 |
+| katex | `object` | `undefined` | Katex object for `n-equation`. | NEXT_VERSION |
 | locale | `Locale \| null` | `undefined` | The locale object to be consumed by its child. If set to `null` it will use the default `enUS` locale. If set to `undefined` it will inherit its parent `n-config-provider`. |  |
 | namespace | `string` | `undefined` | Class name of detached parts of components inside `n-config-provider` |  |
 | preflight-style-disabled | `boolean` | `false` | Whether to disabled preflight style of naive-ui. If you disable it, you can take control of all global css. Also you can use `n-global-style` to apply global style (which is recommend since global style will be reactive). | 2.29.0 |
--- a/src/config-provider/demos/zhCN/index.demo-entry.md
+++ b/src/config-provider/demos/zhCN/index.demo-entry.md
@ -27,6 +27,7 @@ inline-theme-disabled.vue
 | cls-prefix | `string` | `n` | 内部所有组件的类的前缀，仅首次设定会生效 |  |
 | date-locale | `DateLocale \| null` | `undefined` | 对后代组件生效的日期语言对象，为 `null` 时会使用默认 `dateEnUS`，为 `undefined` 时会继承上级 `n-config-provider` |  |
 | inline-theme-disabled | `boolean` | `false` | 是否禁用 inline css 主题变量，如果你不会频繁调整主题变量，并且需要 SSR 或者想让 devtools 看起来更干净，可以打开这个选项。注意，这个属性不是响应式的 | 2.26.0 |
+| katex | `object` | `undefined` | 公式组件需要的 katex 对象 | NEXT_VERSION |
 | locale | `Locale \| null` | `undefined` | 对后代组件生效的语言对象，为 `null` 时会使用默认 `enUS`，为 `undefined` 时会继承上级 `n-config-provider` |  |
 | namespace | `string` | `undefined` | `n-config-provider` 内部组件被卸载于其他位置的 DOM 的类名 |  |
 | preflight-style-disabled | `boolean` | `false` | 是否禁用默认样式，如果你禁用了它，便可以完全控制全局样式。你也可以使用 `n-global-style` 去挂载全局样式（推荐，样式是响应式的） | 2.29.0 |
--- a/src/config-provider/src/internal-interface.ts
+++ b/src/config-provider/src/internal-interface.ts
@ -29,6 +29,7 @@ import type { DynamicTagsTheme } from '../../dynamic-tags/styles'
 import type { ElementTheme } from '../../element/styles'
 import type { EllipsisTheme } from '../../ellipsis/styles'
 import type { EmptyTheme } from '../../empty/styles'
+import type { EquationTheme } from '../../equation/styles'
 import type { FormTheme } from '../../form/styles'
 import type { GradientTextTheme } from '../../gradient-text/styles'
 import type { IconTheme } from '../../icon/styles'
@ -129,6 +130,7 @@ export interface GlobalThemeWithoutCommon {
  Element?: ElementTheme
  Ellipsis?: EllipsisTheme
  Empty?: EmptyTheme
+  Equation?: EquationTheme
  Form?: FormTheme
  GradientText?: GradientTextTheme
  Icon?: IconTheme
--- a/src/data-table/demos/enUS/index.demo-entry.md
+++ b/src/data-table/demos/enUS/index.demo-entry.md
@ -4,7 +4,7 @@

 DataTable is used to displays rows of structured data.

-<n-alert type="warning" title="Caveat">
+<n-alert type="warning" title="Caveat" :bordered="false">
  <n-ul align-text>
    <li>
      Each item of the array passing in the <n-text code>data</n-text> prop represents a row of rendered data, and each row of data must have a unique <n-text code>key</n-text>, otherwise the <n-text code>row-key</n-text> prop must be specified on the table.
--- a/src/data-table/demos/zhCN/index.demo-entry.md
+++ b/src/data-table/demos/zhCN/index.demo-entry.md
@ -4,7 +4,7 @@

 数据表格用来显示一些格式化信息。

-<n-alert type="warning" title="注意" style="margin-bottom: 16px;">
+<n-alert type="warning" title="注意" style="margin-bottom: 16px;" :bordered="false">
  <n-ul align-text>
    <li>
      传入 <n-text code>data</n-text> 属性的数组的每一项都代表渲染的一行数据，每一行数据都要有唯一的 <n-text code>key</n-text>，否则需要在 table 上声明 <n-text code>row-key</n-text> 属性。
--- a/src/dialog/demos/enUS/index.demo-entry.md
+++ b/src/dialog/demos/enUS/index.demo-entry.md
@ -2,7 +2,7 @@

 Before taking action, please confirm.

-<n-alert title="Prerequisite" type="warning">
+<n-alert title="Prerequisite" type="warning" :bordered="false">
  If you want to use dialog, you need to wrap the component where you call related methods inside <n-text code>n-dialog-provider</n-text> and use <n-text code>useDialog</n-text> to get the API.
 </n-alert>

--- a/src/dialog/demos/zhCN/index.demo-entry.md
+++ b/src/dialog/demos/zhCN/index.demo-entry.md
@ -2,7 +2,7 @@

 执行之前，请确认。

-<n-alert title="使用前提" type="warning">
+<n-alert title="使用前提" type="warning" :bordered="false">
  如果你想使用对话框，你需要把调用其方法的组件放在 <n-text code>n-dialog-provider</n-text> 内部并且使用 <n-text code>useDialog</n-text> 去获取 API。
 </n-alert>

--- a/src/discrete/demos/enUS/index.demo-entry.md
+++ b/src/discrete/demos/enUS/index.demo-entry.md
@ -2,7 +2,7 @@

 If you want to use `useDialog`, `useMessage`, `useNotification`, `useLoadingBar` outside `setup`, you can use `createDiscreteApi` to create corresponding API.

-<n-alert title="Caveat" type="warning">
+<n-alert title="Caveat" type="warning" :bordered="false">
 1. Discrete API won't be affected by <n-text code>n-xxx-provider</n-text> in current app. If you need to share config, you should sync them manually. Also, you'd better not using discrete API and normal API together. 2. Do not call <n-text code>createDiscreteApi</n-text> in <n-text code>setup</n-text> since it may cause some unexpected behaviors.
 </n-alert>

--- a/src/discrete/demos/zhCN/index.demo-entry.md
+++ b/src/discrete/demos/zhCN/index.demo-entry.md
@ -2,7 +2,7 @@

 如果你用过想在 `setup` 外使用 `useDialog`、`useMessage`、`useNotification`、`useLoadingBar`，你可以通过 `createDiscreteApi` 来构建对应的 API。

-<n-alert title="注意" type="warning">
+<n-alert title="注意" type="warning" :bordered="false">
  1. 脱离上下文的 API 不会受 <n-text code>n-xxx-provider</n-text> 的影响，并且和应用上下文中对应组件会使用不同的 DOM 容器。如果需要的话，你需要手动同步这些信息。并且最好不要混用两类 API。2. 不要在 <n-text code>setup</n-text> 中调用 <n-text code>createDiscreteApi</n-text>，可能会有一些意外的问题出现。
 </n-alert>

--- a/src/drawer/demos/enUS/index.demo-entry.md
+++ b/src/drawer/demos/enUS/index.demo-entry.md
@ -2,7 +2,7 @@

 I think it is similar with modal, with a bit difference on placement.

-<n-alert title="Caveat" type="warning">
+<n-alert title="Caveat" type="warning" :bordered="false">
  If you need to use <n-text code>n-drawer-content</n-text>, you should keep <n-text code>n-drawer</n-text>'s <n-text code>native-scrollbar</n-text> prop as <n-text code>true</n-text>.
 </n-alert>

--- a/src/drawer/demos/zhCN/index.demo-entry.md
+++ b/src/drawer/demos/zhCN/index.demo-entry.md
@ -2,7 +2,7 @@

 我感觉和 Modal 功能差不太多，位置有点差别。

-<n-alert title="提示" type="warning">
+<n-alert title="提示" type="warning" :bordered="false">
  如果你需要使用 <n-text code>n-drawer-content</n-text>，<n-text code>n-drawer</n-text> 的 <n-text code>native-scrollbar</n-text> 需要保持为 <n-text code>true</n-text>。
 </n-alert>

--- a/src/equation/demos/enUS/basic.demo.vue
+++ b/src/equation/demos/enUS/basic.demo.vue
@ -1,9 +1,11 @@
 <markdown>
-# Basic
+# Basic usage
 </markdown>

 <template>
-  <n-equation :value="equation" :katex="katex" />
+  <n-config-provider :katex="katex">
+    <n-equation :value="equation" />
+  </n-config-provider>
 </template>

 <script lang="ts">
@ -14,8 +16,8 @@ export default defineComponent({
  setup () {
    const equation = '\\displaystyle= \\frac{k(k+1)}{2}+k+1'
    return {
-      katex,
-      equation
+      equation,
+      katex
    }
  }
 })
--- a/src/equation/demos/enUS/index.demo-entry.md
+++ b/src/equation/demos/enUS/index.demo-entry.md
@ -1,9 +1,40 @@
 # Equation

+No one will think of that a component library should have this component. however a friend of me need this.
+
+<n-alert title="Note" type="warning" style="margin-bottom: 16px;" :bordered="false">
+  Due to package size, Naive UI doesn't include katex. If you want to use Equation, make sure you have setup katex before using it.
+</n-alert>
+
+The following code shows how to setup katex for Equation.
+
+```html
+<template>
+  <n-config-provider :katex="katex">
+    <my-app />
+  </n-config-provider>
+</template>
+
+<script>
+  import { defineComponent } from 'vue'
+  import katex from 'katex'
+  import 'katex/dist/katex.css'
+
+  export default defineComponent({
+    setup() {
+      return {
+        katex
+      }
+    }
+  })
+</script>
+```
+
 ## Demos

 ```demo
 basic.vue
+katex-options.vue
 ```

 ## API
@ -12,4 +43,6 @@ basic.vue

 | Name | Type | Default | Description | Version |
 | --- | --- | --- | --- | --- |
+| katex | `object` | `undefined` | Katex | NEXT_VERSION |
+| katex-options | `object` | `undefined` | Katex options for the equation. | NEXT_VERSION |
 | value | `string` | `undefined` | Latex expression of the equation. | NEXT_VERSION |
--- a/src/equation/demos/enUS/katex-options.demo.vue
+++ b/src/equation/demos/enUS/katex-options.demo.vue
@ -0,0 +1,33 @@
+<markdown>
+# Using katex options
+</markdown>
+
+<template>
+  <n-config-provider :katex="katex">
+    <n-equation :value="equation" :katex-options="katexOptions" />
+  </n-config-provider>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import katex from 'katex'
+
+export default defineComponent({
+  setup () {
+    const equation = `\\f\\relax{x} = \\int_{-\\infty}^\\infty
+    \\f\\hat\\xi\\,e^{2 \\pi i \\xi x}
+    \\,d\\xi`
+    return {
+      katex,
+      katexOptions: {
+        displayMode: true,
+        fleqn: true,
+        macros: {
+          '\\f': '#1f(#2)'
+        }
+      },
+      equation
+    }
+  }
+})
+</script>
--- a/src/equation/demos/zhCN/basic.demo.vue
+++ b/src/equation/demos/zhCN/basic.demo.vue
@ -3,7 +3,9 @@
 </markdown>

 <template>
-  <n-equation :value="equation" :katex="katex" />
+  <n-config-provider :katex="katex">
+    <n-equation :value="equation" />
+  </n-config-provider>
 </template>

 <script lang="ts">
--- a/src/equation/demos/zhCN/index.demo-entry.md
+++ b/src/equation/demos/zhCN/index.demo-entry.md
@ -1,15 +1,48 @@
 # 公式 Equation

+没有人会想到一个组件库会有这种组件，但是作者的一位朋友需要这个。
+
+<n-alert title="注意" type="warning" style="margin-bottom: 16px;" :bordered="false">
+  由于包体积原因，Naive UI 不内置 katex。如果你需要使用公式组件，请确保你在使用之前已经设定了 katex。
+</n-alert>
+
+下面的代码展示了如何为 Equation 设定 katex。
+
+```html
+<template>
+  <n-config-provider :katex="katex">
+    <my-app />
+  </n-config-provider>
+</template>
+
+<script>
+  import { defineComponent } from 'vue'
+  import katex from 'katex'
+  import 'katex/dist/katex.css'
+
+  export default defineComponent({
+    setup() {
+      return {
+        katex
+      }
+    }
+  })
+</script>
+```
+
 ## 演示

 ```demo
 basic.vue
+katex-options.vue
 ```

 ## API

 ### Equation Props

-| Name | Type | Default | Description | Version |
+| 名称 | 类型 | 默认值 | 说明 | 版本 |
 | --- | --- | --- | --- | --- |
-| value | `string` | `undefined` | Latex expression of the equation. | NEXT_VERSION |
+| katex | `object` | `undefined` | Katex | NEXT_VERSION |
+| katex-options | `object` | `undefined` | Katex 公式的配置 | NEXT_VERSION |
+| value | `string` | `undefined` | Latex 格式的公式表达式 | NEXT_VERSION |
--- a/src/equation/demos/zhCN/katex-options.demo.vue
+++ b/src/equation/demos/zhCN/katex-options.demo.vue
@ -0,0 +1,33 @@
+<markdown>
+# 使用 katex 配置
+</markdown>
+
+<template>
+  <n-config-provider :katex="katex">
+    <n-equation :value="equation" :katex-options="katexOptions" />
+  </n-config-provider>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import katex from 'katex'
+
+export default defineComponent({
+  setup () {
+    const equation = `\\f\\relax{x} = \\int_{-\\infty}^\\infty
+    \\f\\hat\\xi\\,e^{2 \\pi i \\xi x}
+    \\,d\\xi`
+    return {
+      katex,
+      katexOptions: {
+        displayMode: true,
+        fleqn: true,
+        macros: {
+          '\\f': '#1f(#2)'
+        }
+      },
+      equation
+    }
+  }
+})
+</script>
--- a/src/equation/styles/dark.ts
+++ b/src/equation/styles/dark.ts
@ -0,0 +1,11 @@
+import { commonDark } from '../../_styles/common'
+import type { EquationTheme } from './light'
+import { self } from './light'
+
+const equationDark: EquationTheme = {
+  name: 'Equation',
+  common: commonDark,
+  self
+}
+
+export default equationDark
--- a/src/equation/styles/index.ts
+++ b/src/equation/styles/index.ts
@ -0,0 +1,3 @@
+export { default as equationDark } from './dark'
+export { default as equationLight } from './light'
+export type { EquationThemeVars, EquationTheme } from './light'
--- a/src/equation/styles/light.ts
+++ b/src/equation/styles/light.ts
@ -0,0 +1,15 @@
+import { commonLight } from '../../_styles/common'
+import type { Theme } from '../../_mixins'
+
+export const self = () => ({})
+
+export type EquationThemeVars = ReturnType<typeof self>
+
+const equationLight: Theme<'Equation', EquationThemeVars> = {
+  name: 'Equation',
+  common: commonLight,
+  self
+}
+
+export default equationLight
+export type EquationTheme = typeof equationLight
--- a/src/form/demos/enUS/index.demo-entry.md
+++ b/src/form/demos/enUS/index.demo-entry.md
@ -4,7 +4,7 @@

 The element to collect and validate data.

-<n-alert type="warning" title="Caveat">
+<n-alert type="warning" title="Caveat" :bordered="false">
  If you want to apply required rule for a form item with number typed value, you need to set <n-text code>`type: number`</n-text> in the rule object.
 </n-alert>

@ -48,7 +48,7 @@ dynamic.vue

 #### FormItemRule Type

-<n-alert title="Caveat" type="warning" style="margin-bottom: 16px;">
+<n-alert title="Caveat" type="warning" style="margin-bottom: 16px;" :bordered="false">
  The follow table doesn't demostrate all props of rules. If you want to know all the usages, please see <n-a href="https://github.com/yiminghe/async-validator" target="_blank">async-validator</n-a>.
 </n-alert>

@ -97,7 +97,7 @@ Accept all props from FormItem & [GridItem](grid#GridItem-Props)

 ### Form Methods

-<n-alert type="warning" title="Caveat on Validate Method" style="margin-bottom: 16px;">
+<n-alert type="warning" title="Caveat on Validate Method" style="margin-bottom: 16px;" :bordered="false">
  By default, validation will use all rules regardless of the triggers of the rules.
 </n-alert>

--- a/src/form/demos/zhCN/index.demo-entry.md
+++ b/src/form/demos/zhCN/index.demo-entry.md
@ -4,7 +4,7 @@

 收集、验证信息。

-<n-alert type="warning" title="注意">
+<n-alert type="warning" title="注意" :bordered="false">
  如果你需要为一个值为 number 类型的表项设定 required，你需要在 rule 对象中设定 <n-text code>`type: number`</n-text>。
 </n-alert>

@ -48,7 +48,7 @@ dynamic.vue

 #### FormItemRule Type

-<n-alert title="注意" type="warning" style="margin-bottom: 16px;">
+<n-alert title="注意" type="warning" style="margin-bottom: 16px;" :bordered="false">
  以下并不是规则的全部用法，如果你想了解更多的用法，请参考 <n-a href="https://github.com/yiminghe/async-validator" target="_blank">async-validator</n-a>。
 </n-alert>

@ -90,7 +90,7 @@ dynamic.vue

 ### Form Methods

-<n-alert type="warning" title="Validate 方法的注意事项" style="margin-bottom: 16px;">
+<n-alert type="warning" title="Validate 方法的注意事项" style="margin-bottom: 16px;" :bordered="false">
  默认情况下，验证将会在合法表项的所有规则上进行，不管规则的 trigger 是什么
 </n-alert>

--- a/src/grid/demos/enUS/index.demo-entry.md
+++ b/src/grid/demos/enUS/index.demo-entry.md
@ -4,7 +4,7 @@

 Based on CSS Grid. Responsive. Keep away from IE.

-<n-alert type="warning" title="Caveats">
+<n-alert type="warning" title="Caveats" :bordered="false">
 Due to technical limitation, <n-text code>n-grid-item</n-text> can't be encapsulated in another component.
 </n-alert>

--- a/src/grid/demos/zhCN/index.demo-entry.md
+++ b/src/grid/demos/zhCN/index.demo-entry.md
@ -4,7 +4,7 @@

 基于 CSS Grid，响应式，远离 IE。

-<n-alert type="warning" title="注意">
+<n-alert type="warning" title="注意" :bordered="false">
  由于技术限制，<n-text code>n-grid-item</n-text> 是无法被二次封装的。
 </n-alert>

--- a/src/legacy-grid/demos/enUS/index.demo-entry.md
+++ b/src/legacy-grid/demos/enUS/index.demo-entry.md
@ -2,7 +2,7 @@

 <!--single-column-->

-<n-alert title="Caveat" type="warning" style="margin-bottom: 16px">
+<n-alert title="Caveat" type="warning" style="margin-bottom: 16px" :bordered="false">
  At most of time you should use <router-link to="grid" #="{ navigate, href }" custom><n-a :href="href" @click="navigate">Grid</n-a></router-link>.
 </n-alert>

--- a/src/legacy-grid/demos/zhCN/index.demo-entry.md
+++ b/src/legacy-grid/demos/zhCN/index.demo-entry.md
@ -2,7 +2,7 @@

 <!--single-column-->

-<n-alert title="警告" type="warning" style="margin-bottom: 16px">
+<n-alert title="警告" type="warning" style="margin-bottom: 16px" :bordered="false">
 绝大多数情况下你应该使用<router-link to="grid" #="{ navigate, href }" custom><n-a :href="href" @click="navigate">栅格</n-a></router-link>。
 </n-alert>

--- a/src/legacy-transfer/demos/enUS/index.demo-entry.md
+++ b/src/legacy-transfer/demos/enUS/index.demo-entry.md
@ -2,7 +2,7 @@

 <!--single-column-->

-<n-alert title="Warning" type="warning">
+<n-alert title="Warning" type="warning" :bordered="false">
  The transfer component is deprecated. It won't have any new feature and will be removed in the next major version. It's recommended to use new  <router-link to="transfer" custom v-slot="{ href, navigate }">
    <n-a :href="href" @click="navigate">Transfer</n-a>
  </router-link>.
--- a/src/legacy-transfer/demos/zhCN/index.demo-entry.md
+++ b/src/legacy-transfer/demos/zhCN/index.demo-entry.md
@ -2,7 +2,7 @@

 <!--single-column-->

-<n-alert title="警告" type="warning">
+<n-alert title="警告" type="warning" :bordered="false">
  这个穿梭框组件已经被废弃，不会迭代任何新的功能，并将在下一个大版本中彻底移除。推荐使用新的 <router-link to="transfer" custom v-slot="{ href, navigate }">
    <n-a :href="href" @click="navigate">穿梭框</n-a>
  </router-link>。
--- a/src/loading-bar/demos/enUS/index.demo-entry.md
+++ b/src/loading-bar/demos/enUS/index.demo-entry.md
@ -3,7 +3,7 @@
 A kind of good placebo for anxiety.

 <n-space vertical size="large">
-<n-alert title="Prerequisite" type="warning">
+<n-alert title="Prerequisite" type="warning" :bordered="false">
  If you want to use loading bar, you need to wrap the component where you call related methods inside <n-text code>n-loading-bar-provider</n-text> and inject <n-text code>loadingBar</n-text>.
 </n-alert>
 For example:
--- a/src/loading-bar/demos/zhCN/index.demo-entry.md
+++ b/src/loading-bar/demos/zhCN/index.demo-entry.md
@ -3,7 +3,7 @@
 焦虑的安慰剂，疗效尚可。

 <n-space vertical size="large">
-<n-alert title="使用前提" type="warning">
+<n-alert title="使用前提" type="warning" :bordered="false">
  如果你想使用加载条，你需要把调用其方法的组件放在 <n-text code>n-loading-bar-provider</n-text> 内部并且注入 <n-text code>loadingBar</n-text>。
 </n-alert>
 例如：
--- a/src/log/demos/enUS/index.demo-entry.md
+++ b/src/log/demos/enUS/index.demo-entry.md
@ -4,7 +4,7 @@

 If you have some logs to show, use log.

-<n-alert title="Note" type="warning" style="margin-bottom: 16px;">
+<n-alert title="Note" type="warning" style="margin-bottom: 16px;" :bordered="false">
  Due to package size, Naive UI doesn't include highlight.js. If you want highlight logs, make sure you have set highlightjs before using it.
 </n-alert>

--- a/src/log/demos/zhCN/index.demo-entry.md
+++ b/src/log/demos/zhCN/index.demo-entry.md
@ -4,7 +4,7 @@

 如果你有一些日志要展示，可以使用 Log。

-<n-alert title="注意" type="warning" style="margin-bottom: 16px;">
+<n-alert title="注意" type="warning" style="margin-bottom: 16px;" :bordered="false">
  由于尺寸原因，Naive UI 不内置 highlight.js。如果你需要高亮日志，请确保你在使用之前已经设定了 highlight.js。
 </n-alert>

--- a/src/message/demos/enUS/index.demo-entry.md
+++ b/src/message/demos/enUS/index.demo-entry.md
@ -3,7 +3,7 @@
 Oracle from the top(always) of the browser.

 <n-space vertical size="large">
-<n-alert title="Prerequisite" type="warning">
+<n-alert title="Prerequisite" type="warning" :bordered="false">
  If you want to use message, you need to wrap the component where you call related methods inside <n-text code>n-message-provider</n-text> and use <n-text code>useMessage</n-text> to get the API.
  <br/>
  If you want to use it outside setup, please refer to Q & A part at the bottom of the page.
@ -138,7 +138,7 @@ Use [createDiscreteApi](discrete). If you want to use it, read its caveat carefu
 #### Option 2

 <n-space vertical size="large">
-<n-alert type="warning">
+<n-alert type="warning" :bordered="false">
  You need to mount the return value of <n-text code>useMessage</n-text> to the window in the top-level setup and then call it. Before calling it, you need to make sure that message has been mounted successfully.
 </n-alert>

--- a/src/message/demos/zhCN/index.demo-entry.md
+++ b/src/message/demos/zhCN/index.demo-entry.md
@ -3,7 +3,7 @@
 （一般是）从浏览器顶部降下来的神谕。

 <n-space vertical size="large">
-<n-alert title="使用前提" type="warning">
+<n-alert title="使用前提" type="warning" :bordered="false">
  如果你想使用信息，你需要把调用其方法的组件放在 <n-text code>n-message-provider</n-text> 内部并且使用 <n-text code>useMessage</n-text> 去获取 API。
  <br/>
  如果你想知道如何在 setup 外使用，请参考页面最下方的 Q & A。
@ -139,7 +139,7 @@ type MessageRenderMessage = (props: {
 #### 选择 2

 <n-space vertical size="large">
-<n-alert type="warning">
+<n-alert type="warning" :bordered="false">
  如果你想在 setup 外使用信息，你需要在顶层 setup 中把 <n-text code>useMessage</n-text> 返回的 message 值挂载到 window 下然后再调用，调用前需要确保 message 已经挂载成功。
 </n-alert>

--- a/src/notification/demos/enUS/index.demo-entry.md
+++ b/src/notification/demos/enUS/index.demo-entry.md
@ -5,7 +5,7 @@ If something is to be telled to somebody.
 Notification component is always with low piority so I can make a lot of useless animations on it.

 <n-space vertical size="large">
-<n-alert title="Prerequisite" type="warning">
+<n-alert title="Prerequisite" type="warning" :bordered="false">
  If you want to use notification, you need to wrap the component where you call related methods inside <n-text code>n-notification-provider</n-text> and use <n-text code>useNotification</n-text> to get the API.
 </n-alert>

--- a/src/notification/demos/zhCN/index.demo-entry.md
+++ b/src/notification/demos/zhCN/index.demo-entry.md
@ -5,7 +5,7 @@
 像是通知组件这种东西优先级不那么高，所以我可以弄一堆没什么用的动画上去。

 <n-space vertical size="large">
-<n-alert title="使用前提" type="warning">
+<n-alert title="使用前提" type="warning" :bordered="false">
  如果你想使用通知，你需要把调用其方法的组件放在 <n-text code>n-notification-provider</n-text> 内部并且使用 <n-text code>useNotification</n-text> 来获取 API。
 </n-alert>
 例如：
--- a/src/tabs/demos/enUS/index.demo-entry.md
+++ b/src/tabs/demos/enUS/index.demo-entry.md
@ -2,7 +2,7 @@

 Switch contents in same area.

-<n-alert type="warning" title="Note">
+<n-alert type="warning" title="Note" :bordered="false">
  <n-text code>n-tabs</n-text> will extract default tab value from default slot, so there would be a vue slot warning. If you don't want to see the warning, you should give component a  <n-text code>default-value</n-text>.
 </n-alert>

--- a/src/tabs/demos/zhCN/index.demo-entry.md
+++ b/src/tabs/demos/zhCN/index.demo-entry.md
@ -2,7 +2,7 @@

 在同一块区域切换内容。

-<n-alert type="warning" title="注意">
+<n-alert type="warning" title="注意" :bordered="false">
  <n-text code>n-tabs</n-text> 默认情况下会从 slot 获取默认展示的 tab 值，因此会产生一个 vue slot 的 warning。如果你不想看到这个 warning，请设定一个 <n-text code>default-value</n-text>。
 </n-alert>

--- a/src/themes/dark.ts
+++ b/src/themes/dark.ts
@ -30,6 +30,7 @@ import { dynamicTagsDark } from '../dynamic-tags/styles'
 import { elementDark } from '../element/styles'
 import { ellipsisDark } from '../ellipsis/styles'
 import { emptyDark } from '../empty/styles'
+import { equationDark } from '../equation/styles'
 import { formDark } from '../form/styles'
 import { gradientTextDark } from '../gradient-text/styles'
 import { iconDark } from '../icon/styles'
@ -115,6 +116,7 @@ export const darkTheme: BuiltInGlobalTheme = {
  Element: elementDark,
  Empty: emptyDark,
  Ellipsis: ellipsisDark,
+  Equation: equationDark,
  Form: formDark,
  GradientText: gradientTextDark,
  Icon: iconDark,
--- a/src/themes/light.ts
+++ b/src/themes/light.ts
@ -32,6 +32,7 @@ import { dynamicTagsLight } from '../dynamic-tags/styles'
 import { elementLight } from '../element/styles'
 import { ellipsisLight } from '../ellipsis/styles'
 import { emptyLight } from '../empty/styles'
+import { equationLight } from '../equation/styles'
 import { formLight } from '../form/styles'
 import { gradientTextLight } from '../gradient-text/styles'
 import { iconLight } from '../icon/styles'
@ -116,6 +117,7 @@ export const lightTheme: BuiltInGlobalTheme = {
  DynamicTags: dynamicTagsLight,
  Element: elementLight,
  Empty: emptyLight,
+  Equation: equationLight,
  Ellipsis: ellipsisLight,
  Form: formLight,
  GradientText: gradientTextLight,