doc: refine some demos & styles

demo/documentation/components/datePicker/enUS/actions.md

@@ -2,31 +2,27 @@
 ```html
 <n-date-picker
   v-model="ts1"
-  type="datetime"
-  style="margin-right: 12px; margin-bottom: 12px;"
-  :actions="['now']"
-  @change="onDateTimeChange"
-/>
-<n-date-picker
-  v-model="ts2"
   type="date"
   :actions="['confirm']"
   style="margin-bottom: 12px;"
-  @change="onDateChange"
 />
 <n-date-picker
-  v-model="ts3"
-  type="datetimerange"
-  style="margin-bottom: 12px;"
-  :actions="['clear']"
-  @change="onDateTimeChange"
+  v-model="ts2"
+  type="datetime"
+  style="margin-right: 12px; margin-bottom: 12px;"
+  :actions="['now']"
 />
 <n-date-picker
-  v-model="ts4"
+  v-model="range1"
   type="daterange"
   :actions="null"
   style="margin-bottom: 12px;"
-  @change="onDateChange"
+/>
+<n-date-picker
+  v-model="range2"
+  type="datetimerange"
+  style="margin-bottom: 12px;"
+  :actions="['clear']"
 />
 ```
 ```js
@@ -34,36 +30,12 @@ export default {
   data() {
     return {
       ts1: null,
-      ts2: 0,
-      ts3: null,
-      ts4: null
-    };
-  },
-  methods: {
-    onDateTimeChange(timestamp, dateTimeString) {
-      this.$NMessage.success(`${timestamp}, ${dateTimeString}`);
-    },
-    onDateChange(timestamp, dateString) {
-      this.$NMessage.success(`${timestamp}, ${dateString}`);
-    },
-    handleInputTs1(v) {
-      if (v === "") {
-        this.ts1 = null;
-        return;
-      }
-      v = Number(v);
-      this.ts1 = Number.isNaN(v) ? null : v;
-    },
-    handleInputTs2(v) {
-      if (v === "") {
-        this.ts2 = null;
-        return;
-      }
-      v = Number(v);
-      this.ts2 = Number.isNaN(v) ? null : v;
+      ts2: 1183135260000,
+      range1: null,
+      range2: null
     }
   }
-};
+}
 ```
 ```css
 .n-date-picker {

demo/documentation/components/datePicker/enUS/date.md

@@ -3,23 +3,15 @@
 <n-date-picker
   v-model="timestamp"
   type="date"
-  :disabledTime="disabledTime"
   clearable
 />
-<n-date-picker v-model="timestamp2" type="date" clearable />
-<pre>{{ JSON.stringify(timestamp) }}, {{ JSON.stringify(timestamp2) }}</pre>
+<pre>{{ JSON.stringify(timestamp) }}</pre>
 ```
 ```js
 export default {
   data () {
     return {
-      timestamp: null,
-      timestamp2: 1000000
-    }
-  },
-  methods: {
-    disabledTime (current) {
-      return (current >= 1574092800000) && (current < 1574438400000)
+      timestamp: 1183135260000
     }
   }
 }

demo/documentation/components/datePicker/enUS/daterange.md

@@ -1,28 +1,17 @@
 # Date Range
 ```html
 <n-date-picker
-  v-model="range1"
-  type="daterange"
-  clearable
-  :disabledTime="disabledTime"
-/>
-<n-date-picker
-  v-model="range2"
+  v-model="range"
   type="daterange"
   clearable
 />
+<pre>{{ JSON.stringify(range) }}</pre>
 ```
 ```js
 export default {
   data() {
     return {
-      range1: null,
-      range2: [1562774466000, 1567180866000]
-    };
-  },
-  methods: {
-    disabledTime (current) {
-      return (current >= 1574092800000) && (current < 1576771200000)
+      range: [1183135260000, Date.now()]
     }
   }
 }

demo/documentation/components/datePicker/enUS/datetime.md

@@ -3,22 +3,15 @@
 <n-date-picker
   v-model="timestamp"
   type="datetime"
-  :disabledTime= "disabledTime"
   clearable
 />
-<n-date-picker v-model="timestamp2" type="datetime" clearable />
+<pre>{{ JSON.stringify(timestamp) }}</pre>
 ```
 ```js
 export default {
   data () {
     return {
-      timestamp: null,
-      timestamp2: 1000000
-    }
-  },
-  methods: {
-    disabledTime (current) {
-      return current > 1573552182000 && current < 1573811382000
+      timestamp: 1183135260000
     }
   }
 }

demo/documentation/components/datePicker/enUS/datetimerange.md

@@ -1,28 +1,23 @@
 # Datetime Range
 ```html
 <n-date-picker
-  v-model="range1"
-  type="datetimerange"
-  clearable
-/>
-<n-date-picker
-  v-model="range2"
+  v-model="range"
   type="datetimerange"
   clearable
 />
+<pre>{{ JSON.stringify(range) }}</pre>
 ```
 ```js
 export default {
   data() {
     return {
-      range1: null,
-      range2: [1562774466000, 1567180866000]
-    };
+      range: [1183135260000, Date.now()]
+    }
   }
-};
+}
 ```
 ```css
 .n-date-picker {
-  margin: 0 0 8px 0;
+  margin: 0 12px 8px 0;
 }
-```
+```

demo/documentation/components/datePicker/enUS/disabled.md

@@ -1,45 +1,39 @@
 # Disabled
 ```html
+<n-date-picker
+  v-model="date"
+  type="date"
+  :disabled="disabled"
+/>
 <n-date-picker
   v-model="datetime"
   type="datetime"
   :disabled="disabled"
-  @change="onDateTimeChange"
 />
 <n-date-picker
-  v-model="datetime"
-  type="date"
+  v-model="daterange"
   :disabled="disabled"
-  @change="onDateChange"
+  type="daterange"
 />
 <n-date-picker
   v-model="datetimerange"
   :disabled="disabled"
   type="datetimerange"
 />
-<n-date-picker v-model="daterange" :disabled="disabled" type="daterange" />
 <n-switch v-model="disabled" />
 ```
 ```js
 export default {
-  data() {
+  data () {
     return {
-      datetime: 891360258000,
+      datetime: null,
       date: null,
-      datetimerange: [324910284, 910391323],
-      daterange: [324910284, 910391323],
+      datetimerange: null,
+      daterange: null,
       disabled: true
-    };
-  },
-  methods: {
-    onDateTimeChange(timestamp, dateTimeString) {
-      this.$NMessage.success(`${timestamp}, ${dateTimeString}`);
-    },
-    onDateChange(timestamp, dateString) {
-      this.$NMessage.success(`${timestamp}, ${dateString}`);
     }
   }
-};
+}
 ```
 ```css
 .n-date-picker {

demo/documentation/components/datePicker/enUS/events.md

@@ -34,10 +34,10 @@
 export default {
   data() {
     return {
-      datetime: 891360258000,
+      datetime: 1183135260000,
       date: null,
-      datetimerange: [324910284, 910391323],
-      daterange: [324910284, 910391323],
+      datetimerange: null,
+      daterange: null,
       disabled: false
     };
   },

demo/documentation/components/datePicker/enUS/format.md

@@ -3,7 +3,6 @@
 <n-date-picker
   v-model="timestamp"
   type="datetime"
-  :disabledTime= "disabledTime"
   clearable
   :format="format"
 />
@@ -14,14 +13,9 @@ export default {
   data () {
     return {
       timestamp: null,
-      timestamp2: 1000000,
+      timestamp2: 1183135260000,
       format: 'yyyy/MM/dd - HH:mm'
     }
-  },
-  methods: {
-    disabledTime (current) {
-      return current > 1573552182000 && current < 1573811382000
-    }
   }
 }
 ```

demo/documentation/components/datePicker/enUS/index.md

@@ -23,59 +23,62 @@ format
 ### All Types Props
 |Name|Type|Default|Description|
 |-|-|-|-|
-|theme|`'light' \| 'dark' \| null`|`null`||
-|value|`number`|`null`||
-|actions|`Array<'clear' \| 'now' \| 'confirm'>`|`null`||
 |clearable|`boolean`|`false`||
 |disabled|`boolean`|`false`||
-|type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||
 |size|`'small' \| 'medium' \| 'large'`|`'medium'`||
+|theme|`'light' \| 'dark' \| null`|`null`||
+|type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||
+|value|`number`|`null`||
 
 ### Date Type Props
 |Name|Type|Default|Description|
 |-|-|-|-|
-|placeholder|`string`|`'Select Date'`||
-|is-date-disabled|`(current: number) => boolean`|`() => false`||
+|actions|`Array<'clear' \| 'now' \| 'confirm'> \| null`|`['clear', 'now', 'confirm']`||
 |format|`string`|`'yyyy-MM-dd'`||
+|is-date-disabled|`(current: number) => boolean`|`() => false`||
+|placeholder|`string`|`'Select Date'`||
 
 ### DateTime Type Props
 |Name|Type|Default|Description|
 |-|-|-|-|
-|placeholder|`string`|`'Select Date and Time'`||
+|actions|`Array<'clear' \| 'now' \| 'confirm'> \| null`|`['clear', 'now', 'confirm']`||
+|format|`string`|`'yyyy-MM-dd HH:mm:ss'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
 |is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
-|format|`string`|`'yyyy-MM-dd HH:mm:ss'`||
+|placeholder|`string`|`'Select Date and Time'`||
 
 ### DateRange Type Props
 |Name|Type|Default|Description|
 |-|-|-|-|
-|seperator|`string`|`'to'`||
-|start-placeholder|`string`|`'Start Date'`||
+|actions|`Array<'clear' \| 'confirm'> \| null`|`['clear', 'confirm']`||
 |end-placeholder|`string`|`'End Date'`||
+|format|`string`|`'yyyy-MM-dd'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
 |is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
-|format|`string`|`'yyyy-MM-dd'`||
+|seperator|`string`|`'to'`||
+|start-placeholder|`string`|`'Start Date'`||
 
 
 ### DateTimeRange Type Props
 |Name|Type|Default|Description|
 |-|-|-|-|
-|seperator|`string`|`'to'`||
-|start-placeholder|`string`|`'Start Date and Time'`||
+|actions|`Array<'clear' \| 'confirm'> \| null`|`['clear', 'confirm']`||
 |end-placeholder|`string`|`'End Date and Time'`||
+|format|`string`|`'yyyy-MM-dd HH:mm:ss'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
 |is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
-|format|`string`|`'yyyy-MM-dd HH:mm:ss'`||
+|seperator|`string`|`'to'`||
+|start-placeholder|`string`|`'Start Date and Time'`||
 
 ## Events
 ### Date, DateTime Type Events
 |Name|Parameters|Description|
 |-|-|-|
-|change|`(value: number \| null)`||
 |blur|`()`||
+|change|`(value: number \| null)`||
 
 ### DateRange, DateTimeRange Type Events
 |Name|Parameters|Description|
 |-|-|-|
-|change|`(value: [number, number] \| null)`||
 |blur|`()`||
+|change|`(value: [number, number] \| null)`||

demo/documentation/components/datePicker/zhCN/actions.md

@@ -2,31 +2,27 @@
 ```html
 <n-date-picker
   v-model="ts1"
-  type="datetime"
-  style="margin-right: 12px; margin-bottom: 12px;"
-  :actions="['now']"
-  @change="onDateTimeChange"
-/>
-<n-date-picker
-  v-model="ts2"
   type="date"
   :actions="['confirm']"
   style="margin-bottom: 12px;"
-  @change="onDateChange"
 />
 <n-date-picker
-  v-model="ts3"
-  type="datetimerange"
-  style="margin-bottom: 12px;"
-  :actions="['clear']"
-  @change="onDateTimeChange"
+  v-model="ts2"
+  type="datetime"
+  style="margin-right: 12px; margin-bottom: 12px;"
+  :actions="['now']"
 />
 <n-date-picker
-  v-model="ts4"
+  v-model="range1"
   type="daterange"
   :actions="null"
   style="margin-bottom: 12px;"
-  @change="onDateChange"
+/>
+<n-date-picker
+  v-model="range2"
+  type="datetimerange"
+  style="margin-bottom: 12px;"
+  :actions="['clear']"
 />
 ```
 ```js
@@ -34,36 +30,12 @@ export default {
   data() {
     return {
       ts1: null,
-      ts2: 0,
-      ts3: null,
-      ts4: null
-    };
-  },
-  methods: {
-    onDateTimeChange(timestamp, dateTimeString) {
-      this.$NMessage.success(`${timestamp}, ${dateTimeString}`);
-    },
-    onDateChange(timestamp, dateString) {
-      this.$NMessage.success(`${timestamp}, ${dateString}`);
-    },
-    handleInputTs1(v) {
-      if (v === "") {
-        this.ts1 = null;
-        return;
-      }
-      v = Number(v);
-      this.ts1 = Number.isNaN(v) ? null : v;
-    },
-    handleInputTs2(v) {
-      if (v === "") {
-        this.ts2 = null;
-        return;
-      }
-      v = Number(v);
-      this.ts2 = Number.isNaN(v) ? null : v;
+      ts2: 1183135260000,
+      range1: null,
+      range2: null
     }
   }
-};
+}
 ```
 ```css
 .n-date-picker {

demo/documentation/components/datePicker/zhCN/date.md

@@ -3,23 +3,15 @@
 <n-date-picker
   v-model="timestamp"
   type="date"
-  :disabledTime="disabledTime"
   clearable
 />
-<n-date-picker v-model="timestamp2" type="date" clearable />
-<pre>{{ JSON.stringify(timestamp) }}, {{ JSON.stringify(timestamp2) }}</pre>
+<pre>{{ JSON.stringify(timestamp) }}</pre>
 ```
 ```js
 export default {
   data () {
     return {
-      timestamp: null,
-      timestamp2: 1000000
-    }
-  },
-  methods: {
-    disabledTime (current) {
-      return (current >= 1574092800000) && (current < 1574438400000)
+      timestamp: 1183135260000
     }
   }
 }

demo/documentation/components/datePicker/zhCN/daterange.md

@@ -1,28 +1,17 @@
 # 日期范围
 ```html
 <n-date-picker
-  v-model="range1"
-  type="daterange"
-  clearable
-  :disabledTime="disabledTime"
-/>
-<n-date-picker
-  v-model="range2"
+  v-model="range"
   type="daterange"
   clearable
 />
+<pre>{{ JSON.stringify(range) }}</pre>
 ```
 ```js
 export default {
   data() {
     return {
-      range1: null,
-      range2: [1562774466000, 1567180866000]
-    };
-  },
-  methods: {
-    disabledTime (current) {
-      return (current >= 1574092800000) && (current < 1576771200000)
+      range: [1183135260000, Date.now()]
     }
   }
 }
@@ -32,3 +21,9 @@ export default {
   margin: 0 12px 8px 0;
 }
 ```
+
+```css
+.n-date-picker {
+  margin: 0 12px 8px 0;
+}
+```

demo/documentation/components/datePicker/zhCN/datetime.md

@@ -3,22 +3,15 @@
 <n-date-picker
   v-model="timestamp"
   type="datetime"
-  :disabledTime= "disabledTime"
   clearable
 />
-<n-date-picker v-model="timestamp2" type="datetime" clearable />
+<pre>{{ JSON.stringify(timestamp) }}</pre>
 ```
 ```js
 export default {
   data () {
     return {
-      timestamp: null,
-      timestamp2: 1000000
-    }
-  },
-  methods: {
-    disabledTime (current) {
-      return current > 1573552182000 && current < 1573811382000
+      timestamp: 1183135260000
     }
   }
 }

demo/documentation/components/datePicker/zhCN/datetimerange.md

@@ -1,28 +1,23 @@
 # 日期时间范围
 ```html
 <n-date-picker
-  v-model="range1"
-  type="datetimerange"
-  clearable
-/>
-<n-date-picker
-  v-model="range2"
+  v-model="range"
   type="datetimerange"
   clearable
 />
+<pre>{{ JSON.stringify(range) }}</pre>
 ```
 ```js
 export default {
   data() {
     return {
-      range1: null,
-      range2: [1562774466000, 1567180866000]
-    };
+      range: [1183135260000, Date.now()]
+    }
   }
-};
+}
 ```
 ```css
 .n-date-picker {
-  margin: 0 0 8px 0;
+  margin: 0 12px 8px 0;
 }
-```
+```

demo/documentation/components/datePicker/zhCN/disabled.md

@@ -1,45 +1,39 @@
 # 禁用
 ```html
+<n-date-picker
+  v-model="date"
+  type="date"
+  :disabled="disabled"
+/>
 <n-date-picker
   v-model="datetime"
   type="datetime"
   :disabled="disabled"
-  @change="onDateTimeChange"
 />
 <n-date-picker
-  v-model="datetime"
-  type="date"
+  v-model="daterange"
   :disabled="disabled"
-  @change="onDateChange"
+  type="daterange"
 />
 <n-date-picker
   v-model="datetimerange"
   :disabled="disabled"
   type="datetimerange"
 />
-<n-date-picker v-model="daterange" :disabled="disabled" type="daterange" />
 <n-switch v-model="disabled" />
 ```
 ```js
 export default {
-  data() {
+  data () {
     return {
-      datetime: 891360258000,
+      datetime: null,
       date: null,
-      datetimerange: [324910284, 910391323],
-      daterange: [324910284, 910391323],
+      datetimerange: null,
+      daterange: null,
       disabled: true
-    };
-  },
-  methods: {
-    onDateTimeChange(timestamp, dateTimeString) {
-      this.$NMessage.success(`${timestamp}, ${dateTimeString}`);
-    },
-    onDateChange(timestamp, dateString) {
-      this.$NMessage.success(`${timestamp}, ${dateString}`);
     }
   }
-};
+}
 ```
 ```css
 .n-date-picker {

demo/documentation/components/datePicker/zhCN/events.md

@@ -34,10 +34,10 @@
 export default {
   data() {
     return {
-      datetime: 891360258000,
+      datetime: 1183135260000,
       date: null,
-      datetimerange: [324910284, 910391323],
-      daterange: [324910284, 910391323],
+      datetimerange: null,
+      daterange: null,
       disabled: false
     };
   },

demo/documentation/components/datePicker/zhCN/format.md

@@ -3,7 +3,6 @@
 <n-date-picker
   v-model="timestamp"
   type="datetime"
-  :disabledTime= "disabledTime"
   clearable
   :format="format"
 />
@@ -14,14 +13,9 @@ export default {
   data () {
     return {
       timestamp: null,
-      timestamp2: 1000000,
+      timestamp2: 1183135260000,
       format: 'yyyy/MM/dd - HH:mm'
     }
-  },
-  methods: {
-    disabledTime (current) {
-      return current > 1573552182000 && current < 1573811382000
-    }
   }
 }
 ```

demo/documentation/components/datePicker/zhCN/index.md

@@ -23,60 +23,63 @@ format
 ### 通用的 Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
-|theme|`'light' \| 'dark' \| null`|`null`||
-|value|`number`|`null`||
-|actions|`Array<'clear' \| 'now' \| 'confirm'>`|`null`||
 |clearable|`boolean`|`false`||
 |disabled|`boolean`|`false`||
-|type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||
 |size|`'small' \| 'medium' \| 'large'`|`'medium'`||
-
+|theme|`'light' \| 'dark' \| null`|`null`||
+|type|`'date' \| 'datetime' \| 'daterange' \|'datetimerange'`|`'date`||
+|value|`number`|`null`||
 
 ### Date 类型的 Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
-|placeholder|`string`|`'Select Date'`||
-|is-date-disabled|`(current: number) => boolean`|`() => false`||
+|actions|`Array<'clear' \| 'now' \| 'confirm'> \| null`|`['clear', 'now', 'confirm']`||
 |format|`string`|`'yyyy-MM-dd'`||
+|is-date-disabled|`(current: number) => boolean`|`() => false`||
+|placeholder|`string`|`'Select Date'`||
 
 ### DateTime 类型的 Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
-|placeholder|`string`|`'Select Date and Time'`||
+|actions|`Array<'clear' \| 'now' \| 'confirm'> \| null`|`['clear', 'now', 'confirm']`||
+|format|`string`|`'yyyy-MM-dd HH:mm:ss'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
 |is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
-|format|`string`|`'yyyy-MM-dd HH:mm:ss'`||
+|placeholder|`string`|`'Select Date and Time'`||
 
 ### DateRange 类型的 Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
-|seperator|`string`|`'至'`||
-|start-placeholder|`string`|`'Start Date'`||
+|actions|`Array<'clear' \| 'confirm'> \| null`|`['clear', 'confirm']`||
 |end-placeholder|`string`|`End Date'`||
+|format|`string`|`'yyyy-MM-dd'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
 |is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
-|format|`string`|`'yyyy-MM-dd'`||
+|seperator|`string`|`'至'`||
+|start-placeholder|`string`|`'Start Date'`||
 
 
 ### DateTimeRange 类型的 Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
-|seperator|`string`|`'to'`||
-|start-placeholder|`string`|`'Start Date and Time'`||
+|actions|`Array<'clear' \| 'confirm'> \| null`|`['clear', 'confirm']`||
 |end-placeholder|`string`|`'End Date and Time'`||
+|format|`string`|`'yyyy-MM-dd HH:mm:ss'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
 |is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
-|format|`string`|`'yyyy-MM-dd HH:mm:ss'`||
+|seperator|`string`|`'to'`||
+|start-placeholder|`string`|`'Start Date and Time'`||
+
 
 ## Events
 ### Date, DateTime 类型的 Events
 |名称|参数|说明|
 |-|-|-|
-|change|`(value: number \| null)`||
 |blur|`()`||
+|change|`(value: number \| null)`||
 
 ### DateRange, DateTimeRange 类型的 Events
 |名称|参数|说明|
 |-|-|-|
-|change|`(value: [number, number] \| null)`||
 |blur|`()`||
+|change|`(value: [number, number] \| null)`||

demo/documentation/components/timePicker/enUS/basic.md

@@ -13,7 +13,7 @@ export default {
   data () {
     return {
       time0: null,
-      time1: 1563937380000
+      time1: 1183135260000
     }
   },
   methods: {

demo/documentation/components/timePicker/zhCN/basic.md

@@ -13,7 +13,7 @@ export default {
   data () {
     return {
       time0: null,
-      time1: 1563937380000
+      time1: 1183135260000
     }
   },
   methods: {

demo/header.vue

@@ -36,7 +36,8 @@
         <div
           class="ui-logo"
           :style="{
-            color: styleScheme.primaryTextColor
+            color: styleScheme.primaryTextColor,
+            transition: `color .3s ${styleScheme.easeInOutCubicBezier}`
           }"
           @click="handleLogoClick"
         >

demo/menuOptions.js

@@ -451,18 +451,18 @@ export default function (instance) {
             titleExtra: 'Notification',
             path: `/${instance.lang}/${instance.theme}/doc` + '/n-notification'
           },
-          {
-            name: 'Popover',
-            title: '弹出信息',
-            titleExtra: 'Popover',
-            path: `/${instance.lang}/${instance.theme}/doc` + '/n-popover'
-          },
           {
             name: 'Popconfirm',
             title: '弹出确认',
             titleExtra: 'Popconfirm',
             path: `/${instance.lang}/${instance.theme}/doc` + '/n-popconfirm'
           },
+          {
+            name: 'Popover',
+            title: '弹出信息',
+            titleExtra: 'Popover',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-popover'
+          },
           {
             name: 'Popselect',
             title: '弹出选择',
@@ -782,14 +782,14 @@ export default function (instance) {
             name: 'Notification',
             path: `/${instance.lang}/${instance.theme}/doc` + '/n-notification'
           },
-          {
-            name: 'Popover',
-            path: `/${instance.lang}/${instance.theme}/doc` + '/n-popover'
-          },
           {
             name: 'Popconfirm',
             path: `/${instance.lang}/${instance.theme}/doc` + '/n-popconfirm'
           },
+          {
+            name: 'Popover',
+            path: `/${instance.lang}/${instance.theme}/doc` + '/n-popover'
+          },
           {
             name: 'Popselect',
             path: `/${instance.lang}/${instance.theme}/doc` + '/n-popselect'