From fae5163df75a1219b874033830af4a829eb2216a Mon Sep 17 00:00:00 2001
From: faga <lzc295592@163.com>
Date: Sun, 16 Oct 2022 01:16:40 +0800
Subject: [PATCH 1/6] feat: init date time picker

---
 src/components/Form/dateTimePicker.story.vue | 185 +++++++++++++++++++
 1 file changed, 185 insertions(+)
 create mode 100644 src/components/Form/dateTimePicker.story.vue

diff --git a/src/components/Form/dateTimePicker.story.vue b/src/components/Form/dateTimePicker.story.vue
new file mode 100644
index 0000000..9f2773a
--- /dev/null
+++ b/src/components/Form/dateTimePicker.story.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { logEvent } from 'histoire/client'
+import { ref } from 'vue'
+
+const date = ref()
+const size = ref<'large' | 'default' | 'small'>('default')
+const valueFormat = ref()
+const range = ref(false)
+const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
+const defaultRangeTime: [Date, Date] = [
+  new Date(2000, 1, 1, 12, 0, 0),
+  new Date(2000, 2, 1, 8, 0, 0),
+]
+const shortcuts = [
+  {
+    text: 'Today',
+    value: new Date(),
+  },
+  {
+    text: 'Yesterday',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24)
+      return date
+    },
+  },
+  {
+    text: 'A week ago',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+      return date
+    },
+  },
+]
+const rangeShortcuts = [
+  {
+    text: 'Last week',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+      return [start, end]
+    },
+  },
+  {
+    text: 'Last month',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+      return [start, end]
+    },
+  },
+  {
+    text: 'Last 3 months',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+      return [start, end]
+    },
+  },
+]
+const sizeList = [
+  {
+    label: 'large',
+    value: 'large',
+  },
+  {
+    label: 'default',
+    value: 'default',
+  },
+  {
+    label: 'small',
+    value: 'small',
+  },
+]
+const valueFormatList = [
+  {
+    label: 'YYYY-MM-DD h:m:s a',
+    value: 'YYYY-MM-DD h:m:s a',
+  },
+  {
+    label: 'x',
+    value: 'x',
+  },
+]
+const handleChange = (dateTime: any) => {
+  logEvent('change', { dateTime })
+}
+</script>
+
+<template>
+  <Story title="Form/DateTimePicker">
+    <Variant title="Basic Usage">
+      <el-date-picker
+        v-model="date"
+        type="datetime"
+        placeholder="Select date and time"
+        :size="size"
+        @change="handleChange"
+      />
+      <template #controls>
+        <HstRadio v-model="size" :options="sizeList" title="Size" />
+      </template>
+    </Variant>
+    <Variant title="With shortcuts">
+      <el-date-picker
+        v-model="date"
+        type="datetime"
+        placeholder="Select date and time"
+        :shortcuts="shortcuts"
+        @change="handleChange"
+      />
+    </Variant>
+    <Variant title="Date time format">
+      <el-date-picker
+        v-model="date"
+        type="datetime"
+        placeholder="Pick a Date"
+        format="YYYY/MM/DD HH:mm:ss"
+        :value-format="valueFormat"
+        @change="handleChange"
+      />
+      <template #controls>
+        <HstRadio
+          v-model="valueFormat"
+          :options="valueFormatList"
+          title="Date time format"
+        />
+      </template>
+    </Variant>
+    <Variant title="Date and time range">
+      <el-date-picker
+        v-model="date"
+        type="datetimerange"
+        range-separator="To"
+        start-placeholder="Start date"
+        end-placeholder="End date"
+        :size="size"
+        :shortcuts="rangeShortcuts"
+        @change="handleChange"
+      />
+      <template #controls>
+        <HstRadio v-model="size" :options="sizeList" title="Size" />
+      </template>
+    </Variant>
+    <Variant title="Default time">
+      <el-date-picker
+        v-model="date"
+        :type="`datetime${range ? 'range' : ''}`"
+        placeholder="Select date"
+        start-placeholder="Start Date"
+        end-placeholder="End Date"
+        :default-time="range ? defaultRangeTime : defaultTime"
+        @change="handleChange"
+      />
+      <template #controls>
+        <HstCheckbox v-model="range" title="Range" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+# DateTimePicker
+Select date and time in one picker.
+
+## Basic Usage
+You can select date and time in one picker at the same time by setting `type` to `datetime`. The way to use shortcuts is the same as Date Picker.
+
+## Date Time Formats
+Use `format` to control displayed text's format in the input box. Use `value-format` to control binding value's format.
+
+By default, the component accepts and emits a `Date` object.
+
+Check the list [here](https://day.js.org/docs/en/display/format#list-of-all-available-formats) of all available formats of Day.js.
+
+## Date and time range
+You can select date and time range by setting `type` to `datetimerange`.
+
+## Default time value for start date and end date
+When picking date range on the date panel with type `datetimerange`, `00:00:00` will be used as the default time value for start and end date. We can control it with the `default-time` attribute. `default-time` accepts an array of up to two Date objects. The first item controls time value of the start date and the second item controls time value of the end date.
+</docs>

From 9fad2e8e31b9ab90127ff3b519ccb61d3821a473 Mon Sep 17 00:00:00 2001
From: joypeng <70848683+FliPPeDround@users.noreply.github.com>
Date: Sat, 15 Oct 2022 17:01:14 +0800
Subject: [PATCH 2/6] feat: set auto-props-disabled (#30)

---
 src/components/Basic/button.story.vue     |  8 ++++----
 src/components/Basic/link.story.vue       |  2 +-
 src/components/Data/avatar.story.vue      |  2 +-
 src/components/Data/badge.story.vue       |  5 ++---
 src/components/Data/card.story.vue        | 24 ++++++++++++++++-------
 src/components/Data/tag.story.vue         |  2 +-
 src/components/Feedback/alert.story.vue   |  2 +-
 src/components/Form/colorPicker.story.vue |  2 +-
 src/components/Form/radio.story.vue       |  2 +-
 src/components/Form/rate.story.vue        |  2 +-
 src/components/Form/switch.story.vue      |  2 +-
 11 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/components/Basic/button.story.vue b/src/components/Basic/button.story.vue
index d0c8637..725753f 100644
--- a/src/components/Basic/button.story.vue
+++ b/src/components/Basic/button.story.vue
@@ -76,8 +76,8 @@ const buttonGroupData = ref({
 </script>
 
 <template>
-  <Story title="Basic/Button">
-    <Variant title="Basic usage" auto-props-disabled>
+  <Story title="Basic/Button" auto-props-disabled>
+    <Variant title="Basic usage" >
       <el-button
         :type="basicButtonData.type"
         :size="basicButtonData.size"
@@ -108,7 +108,7 @@ const buttonGroupData = ref({
         />
       </template>
     </Variant>
-    <Variant title="Custom Color" auto-props-disabled>
+    <Variant title="Custom Color" >
       <el-button
         :plain="colorButtonData.plain"
         :disabled="colorButtonData.disabled"
@@ -128,7 +128,7 @@ const buttonGroupData = ref({
       </template>
     </Variant>
 
-    <Variant title="Button Group" auto-props-disabled>
+    <Variant title="Button Group" >
       <el-button-group
         :size="buttonGroupData.size"
         :type="buttonGroupData.type"
diff --git a/src/components/Basic/link.story.vue b/src/components/Basic/link.story.vue
index 0a214c7..f19d0e8 100644
--- a/src/components/Basic/link.story.vue
+++ b/src/components/Basic/link.story.vue
@@ -34,7 +34,7 @@ const linkTypeList: { label: string; value: LinkProps['type'] }[] = [
 </script>
 
 <template>
-  <Story title="Basic/Link">
+  <Story title="Basic/Link" auto-props-disabled>
     <Variant title="Basic Usage">
       <el-link :type="currentType" :href="void 0">
         {{ currentType }}
diff --git a/src/components/Data/avatar.story.vue b/src/components/Data/avatar.story.vue
index de601b5..4ea9128 100644
--- a/src/components/Data/avatar.story.vue
+++ b/src/components/Data/avatar.story.vue
@@ -62,7 +62,7 @@ const fireClose = () => {
 </script>
 
 <template>
-  <Story title="Data/Avatar">
+  <Story title="Data/Avatar" auto-props-disabled>
     <Variant title="Basic usage">
       <el-avatar :shape="currentShape" :size="currentSize" :src="url" />
       <el-avatar :shape="currentShape" style="margin:0 20px" :size="customSize" :src="url" />
diff --git a/src/components/Data/badge.story.vue b/src/components/Data/badge.story.vue
index 4cbe498..ff48bd1 100644
--- a/src/components/Data/badge.story.vue
+++ b/src/components/Data/badge.story.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { BadgeProps } from 'element-plus'
-import { CaretBottom } from '@element-plus/icons-vue'
-import { Share } from '@element-plus/icons-vue'
+import { CaretBottom, Share } from '@element-plus/icons-vue'
 
 const currentValue = ref(12)
 const stringValue = ref('hot')
@@ -35,7 +34,7 @@ const badgeTypeList: Record<'label' & 'value', BadgeProps['type']>[] = [
 </script>
 
 <template>
-  <Story title="Data/Badge">
+  <Story title="Data/Badge" auto-props-disabled>
     <Variant title="Basic usage">
       <el-badge :value="currentValue" :type="currentType" class="item">
         <el-button>comments</el-button>
diff --git a/src/components/Data/card.story.vue b/src/components/Data/card.story.vue
index 80ec6c9..1e79b4e 100644
--- a/src/components/Data/card.story.vue
+++ b/src/components/Data/card.story.vue
@@ -24,22 +24,28 @@ const shadowTypeList: Record<'label' & 'value', CardProps['shadow']>[] = [
 </script>
 
 <template>
-  <Story title="Data/Card">
+  <Story title="Data/Card" auto-props-disabled>
     <Variant title="Basic usage">
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
             <span>Card name</span>
-            <el-button class="button" text>Operation button</el-button>
+            <el-button class="button" text>
+              Operation button
+            </el-button>
           </div>
         </template>
-        <div v-for="o in 4" :key="o" class="text item">{{ `List item ${o}` }}</div>
+        <div v-for="o in 4" :key="o" class="text item">
+          {{ `List item ${o}` }}
+        </div>
       </el-card>
     </Variant>
 
     <Variant title="Simple card">
       <el-card class="box-card" :header="header">
-        <div v-for="o in 4" :key="o" class="text item">{{ `List item ${o}` }}</div>
+        <div v-for="o in 4" :key="o" class="text item">
+          {{ `List item ${o}` }}
+        </div>
       </el-card>
 
       <template #controls>
@@ -59,12 +65,14 @@ const shadowTypeList: Record<'label' & 'value', CardProps['shadow']>[] = [
             <img
               src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
               class="image"
-            />
+            >
             <div style="padding: 14px">
               <span>Yummy hamburger</span>
               <div class="bottom">
                 <time class="time"> {{ currentDate }} </time>
-                <el-button text class="button">Operating</el-button>
+                <el-button text class="button">
+                  Operating
+                </el-button>
               </div>
             </div>
           </el-card>
@@ -80,7 +88,9 @@ const shadowTypeList: Record<'label' & 'value', CardProps['shadow']>[] = [
     </Variant>
 
     <Variant title="Shadow">
-      <el-card :shadow="currentShadow"> {{ currentShadow }} </el-card>
+      <el-card :shadow="currentShadow">
+        {{ currentShadow }}
+      </el-card>
 
       <template #controls>
         <HstRadio v-model="currentShadow" title="Shadow" :options="shadowTypeList" />
diff --git a/src/components/Data/tag.story.vue b/src/components/Data/tag.story.vue
index d6a8c9e..621c3a1 100644
--- a/src/components/Data/tag.story.vue
+++ b/src/components/Data/tag.story.vue
@@ -91,7 +91,7 @@ const onChange = (status: boolean) => {
 </script>
 
 <template>
-  <Story title="Data/Tag">
+  <Story title="Data/Tag" auto-props-disabled>
     <Variant title="Basic usage">
       <el-tag :type="currentType" :size="currentSize">
         Tag
diff --git a/src/components/Feedback/alert.story.vue b/src/components/Feedback/alert.story.vue
index cf88e4f..5e3494b 100644
--- a/src/components/Feedback/alert.story.vue
+++ b/src/components/Feedback/alert.story.vue
@@ -38,7 +38,7 @@ const fireClose = (e: Event) => {
 </script>
 
 <template>
-  <Story title="Feedback/Alert">
+  <Story title="Feedback/Alert" auto-props-disabled>
     <Variant title="Basic Usage">
       <el-alert :type="currentType" :title="currentType" />
       <template #controls>
diff --git a/src/components/Form/colorPicker.story.vue b/src/components/Form/colorPicker.story.vue
index e683cf3..adb8726 100644
--- a/src/components/Form/colorPicker.story.vue
+++ b/src/components/Form/colorPicker.story.vue
@@ -45,7 +45,7 @@ const handleActiveChange = (val: string | null) => {
 </script>
 
 <template>
-  <Story title="Form/ColorPicker">
+  <Story title="Form/ColorPicker" auto-props-disabled>
     <Variant title="Basic Usage">
       <el-color-picker
         v-model="color"
diff --git a/src/components/Form/radio.story.vue b/src/components/Form/radio.story.vue
index f757255..24da983 100644
--- a/src/components/Form/radio.story.vue
+++ b/src/components/Form/radio.story.vue
@@ -26,7 +26,7 @@ const radioChange = (e: string | number | boolean) => {
 </script>
 
 <template>
-  <Story title="Form/Radio">
+  <Story title="Form/Radio" auto-props-disabled>
     <Variant title="Basic Usage">
       <el-radio v-model="radio" :size="currentSize" label="1">
         Option 1
diff --git a/src/components/Form/rate.story.vue b/src/components/Form/rate.story.vue
index 9fbd103..bddc2bf 100644
--- a/src/components/Form/rate.story.vue
+++ b/src/components/Form/rate.story.vue
@@ -30,7 +30,7 @@ const icons = [ChatRound, ChatLineRound, ChatDotRound]
 </script>
 
 <template>
-  <Story title="Form/Rate">
+  <Story title="Form/Rate" auto-props-disabled>
     <Variant title="Basic Usage">
       <!-- <el-rate v-model="rate" /> -->
       <el-rate v-model="currentRate" :max="maxRate" />
diff --git a/src/components/Form/switch.story.vue b/src/components/Form/switch.story.vue
index 1028d7b..6f2e727 100644
--- a/src/components/Form/switch.story.vue
+++ b/src/components/Form/switch.story.vue
@@ -106,7 +106,7 @@ const sizeValueOptions: HstControlOption = [
 </script>
 
 <template>
-  <Story title="Data/Switch">
+  <Story title="Data/Switch" auto-props-disabled>
     <Variant title="Basic usage">
       <el-switch v-model="isOpening" :active-color="activeColor" :inactive-color="inActiveColor" />
       <template #controls>

From b8e517e02915792ded4d4362b6243383080c6fa2 Mon Sep 17 00:00:00 2001
From: faga <87003751+faga1@users.noreply.github.com>
Date: Sat, 15 Oct 2022 17:22:11 +0800
Subject: [PATCH 3/6] feat: date picker component (#31)

* feat: init datepicker

* feat: init datePicker

*feat: set auto-props-disabled on datePicker

Co-authored-by: faga <lzc295592@163.com>
Co-authored-by: joypeng <70848683+FliPPeDround@users.noreply.github.com>
---
 src/components/Form/datePicker.story.vue | 293 +++++++++++++++++++++++
 1 file changed, 293 insertions(+)
 create mode 100644 src/components/Form/datePicker.story.vue

diff --git a/src/components/Form/datePicker.story.vue b/src/components/Form/datePicker.story.vue
new file mode 100644
index 0000000..3ee1111
--- /dev/null
+++ b/src/components/Form/datePicker.story.vue
@@ -0,0 +1,293 @@
+<script setup lang="ts">
+import { h, ref, shallowRef } from 'vue'
+import type { DatePickType } from 'element-plus'
+import { logEvent } from 'histoire/client'
+import type { DateCell } from 'element-plus/es/components/date-picker/src/date-picker.type'
+
+const date = ref('')
+const size = ref<'large' | 'default' | 'small'>('default')
+const type = ref<DatePickType>('date')
+const range = ref<DatePickType>('daterange')
+const isRange = ref(false)
+const valueFormat = ref()
+const hasPrefix = ref(true)
+const customPrefix = shallowRef({
+  render() {
+    return h('p', 'pre')
+  },
+})
+const sizeList = [
+  {
+    label: 'large',
+    value: 'large',
+  },
+  {
+    label: 'default',
+    value: 'default',
+  },
+  {
+    label: 'small',
+    value: 'small',
+  },
+]
+const typeList = [
+  {
+    label: 'year',
+    value: 'year',
+  },
+  {
+    label: 'month',
+    value: 'month',
+  },
+  {
+    label: 'date',
+    value: 'date',
+  },
+  {
+    label: 'week',
+    value: 'week',
+  },
+]
+const rangeList = [
+  {
+    label: 'datrange',
+    value: 'daterange',
+  },
+  {
+    label: 'monthrange',
+    value: 'monthrange',
+  },
+]
+const shortcuts = [
+  {
+    text: 'Today',
+    value: new Date(),
+  },
+  {
+    text: 'Yesterday',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24)
+      return date
+    },
+  },
+  {
+    text: 'A week ago',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+      return date
+    },
+  },
+]
+const valueFormatList = [
+  {
+    label: 'YYYY-MM-DD',
+    value: 'YYYY-MM-DD',
+  },
+  {
+    label: 'x',
+    value: 'x',
+  },
+]
+const handleChange = (val: any) => {
+  logEvent('change', { date: val })
+}
+const holidays = [
+  '2022-10-01',
+  '2022-10-02',
+  '2022-10-03',
+  '2022-10-04',
+  '2022-10-05',
+  '2022-10-06',
+  '2022-10-07',
+]
+
+const isHoliday = ({ dayjs }: DateCell) => {
+  return holidays.includes(dayjs!.format('YYYY-MM-DD'))
+}
+</script>
+
+<template>
+  <Story title="Form/DatePicker" auto-props-disabled>
+    <Variant title="Basic Usage">
+      <el-date-picker
+        v-model="date"
+        type="date"
+        placeholder="Pick a day"
+        :size="size"
+      />
+      <template #controls>
+        <HstRadio v-model="size" :options="sizeList" title="Size" />
+      </template>
+    </Variant>
+    <Variant title="Quick options">
+      <el-date-picker
+        v-model="date"
+        type="date"
+        placeholder="Pick a day"
+        :shortcuts="shortcuts"
+        :size="size"
+      />
+    </Variant>
+    <Variant title="Other measurements">
+      <el-date-picker
+        v-model="date"
+        :type="type"
+        placeholder="Pick a day"
+        :size="size"
+      />
+      <template #controls>
+        <HstRadio v-model="type" :options="typeList" title="Type" />
+      </template>
+    </Variant>
+    <Variant title="Range">
+      <el-date-picker
+        v-model="date"
+        :type="range"
+        range-separator="To"
+        :start-placeholder="
+          range === 'daterange' ? 'Start date' : 'Start month'
+        "
+        :end-placeholder="range === 'daterange' ? 'End date' : 'End month'"
+        :size="size"
+      />
+      <template #controls>
+        <HstRadio v-model="size" :options="sizeList" title="Size" />
+        <HstRadio v-model="range" title="Range" :options="rangeList" />
+      </template>
+    </Variant>
+    <Variant title="Default Value">
+      <el-date-picker
+        v-model="date"
+        :type="isRange ? 'daterange' : 'date'"
+        placeholder="Pick a date"
+        :default-value="new Date(2010, 9, 1)"
+        :start-placeholder="range === 'daterange' ? 'Start date' : ''"
+        :end-placeholder="range === 'daterange' ? 'End date' : ''"
+      />
+      <template #controls>
+        <HstCheckbox v-model="isRange" title="Range" />
+      </template>
+    </Variant>
+    <Variant title="Date Formats">
+      <el-date-picker
+        v-model="date"
+        type="date"
+        placeholder="Pick a Date"
+        format="YYYY/MM/DD"
+        :value-format="valueFormat"
+        @change="handleChange"
+      />
+      <template #controls>
+        <HstRadio
+          v-model="valueFormat"
+          title="Value format"
+          :options="valueFormatList"
+        />
+      </template>
+    </Variant>
+    <Variant title="Set custom content of prefix">
+      <el-date-picker
+        v-model="date"
+        type="date"
+        placeholder="Pick a day"
+        :prefix-icon="customPrefix"
+      />
+    </Variant>
+    <Variant title="Custom content">
+      <el-date-picker
+        v-model="date"
+        type="date"
+        placeholder="Pick a day"
+        format="YYYY/MM/DD"
+        value-format="YYYY-MM-DD"
+        :default-value="new Date(2022, 9, 1)"
+      >
+        <template #default="cell">
+          <div class="cell" :class="{ current: cell.isCurrent }">
+            <span class="text">{{ cell.text }}</span>
+            <span v-if="isHoliday(cell)" class="holiday" />
+          </div>
+        </template>
+      </el-date-picker>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+## Basic Usage
+Basic date picker measured by 'day'.
+
+The measurement is determined by the `type` attribute. You can enable quick options via `shortcuts` property. The disabled date is set by `disabledDate`, which is a function.
+
+## Other measurements
+You can choose week, month, year or multiple dates by extending the standard date picker component.
+
+## Date range
+Picking a date range is supported.
+
+When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the unlink-panels attribute.
+## Month range
+Picking a month range is supported.
+
+When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the `unlink-panels` attribute.
+
+## Default Value
+If user hasn't picked a date, shows today's calendar by default. You can use `default-value` to set another date. Its value should be parsable by `new Date()`.
+
+If type is `daterange`, `default-value` sets the left side calendar.
+
+## Date Formats
+Use `format` to control displayed text's format in the input box. Use `value-format` to control binding value's format.
+
+By default, the component accepts and emits a `Date` object.
+
+Check the list [here](https://day.js.org/docs/en/display/format#list-of-all-available-formats) of all available formats of Day.js.
+
+## Default time for start date and end date
+When picking a date range, you can assign the time part for start date and end date.
+
+By default, the time part of start date and end date are both `00:00:00`. Setting `default-time` can change their time respectively. It accepts an array of up to two Date objects. The first string sets the time for the start date, and the second for the end date.
+
+## Set custom content of prefix
+The content of prefix can be customized.
+
+Setting `prefix-icon` to component which you import form other .vue or generated by the render function.
+
+## Custom content
+The content of cell can be customized, in scoped-slot you can get the cell data.
+</docs>
+
+<style>
+.cell {
+  height: 30px;
+  padding: 3px 0;
+  box-sizing: border-box;
+}
+.cell .text {
+  width: 24px;
+  height: 24px;
+  display: block;
+  margin: 0 auto;
+  line-height: 24px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 50%;
+}
+.cell.current .text {
+  background: #626aef;
+  color: #fff;
+}
+.cell .holiday {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: var(--el-color-danger);
+  border-radius: 50%;
+  bottom: 0px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+</style>

From f532fadd90548dc476acbd867e269fd2320994d0 Mon Sep 17 00:00:00 2001
From: ZhangZhiChao <54631354+Alkaidcc@users.noreply.github.com>
Date: Sat, 15 Oct 2022 17:24:52 +0800
Subject: [PATCH 4/6] fix: typo (#32)

---
 src/components/Form/switch.story.vue | 30 ++++++++++++++--------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/Form/switch.story.vue b/src/components/Form/switch.story.vue
index 6f2e727..bed0ca1 100644
--- a/src/components/Form/switch.story.vue
+++ b/src/components/Form/switch.story.vue
@@ -18,7 +18,7 @@ const sizeValue = ref('small')
 const isDisabled = ref(true)
 const isLoading = ref(true)
 
-const preventSwtchValue = ref(
+const preventSwitchValue = ref(
   {
     value: false,
     value_sec: false,
@@ -26,7 +26,7 @@ const preventSwtchValue = ref(
     loading_sec: false,
   },
 )
-const swtichValue = ref(
+const switchValue = ref(
   {
     value: 0,
     activeValue: 100,
@@ -41,20 +41,20 @@ const switchText = ref(
 )
 
 const beforeChange = () => {
-  preventSwtchValue.value.loading = true
+  preventSwitchValue.value.loading = true
   return new Promise((resolve) => {
     setTimeout(() => {
-      preventSwtchValue.value.loading = false
+      preventSwitchValue.value.loading = false
       ElMessage.success('Switch success')
       return resolve(true)
     }, 1000)
   })
 }
 const beforeChangeSecond = () => {
-  preventSwtchValue.value.loading_sec = true
+  preventSwitchValue.value.loading_sec = true
   return new Promise((resolve, reject) => {
     setTimeout(() => {
-      preventSwtchValue.value.loading_sec = false
+      preventSwitchValue.value.loading_sec = false
       ElMessage.error('Switch failed')
       return reject(new Error('Error'))
     }, 1000)
@@ -106,7 +106,7 @@ const sizeValueOptions: HstControlOption = [
 </script>
 
 <template>
-  <Story title="Data/Switch" auto-props-disabled>
+  <Story title="Form/Switch" auto-props-disabled>
     <Variant title="Basic usage">
       <el-switch v-model="isOpening" :active-color="activeColor" :inactive-color="inActiveColor" />
       <template #controls>
@@ -143,15 +143,15 @@ const sizeValueOptions: HstControlOption = [
     </Variant>
 
     <Variant title="Extended value types">
-      <el-tooltip :content="`Switch value: ${swtichValue.value}`" placement="bottom">
+      <el-tooltip :content="`Switch value: ${switchValue.value}`" placement="bottom">
         <el-switch
-          v-model="swtichValue.value" :active-value="swtichValue.activeValue"
-          :inactive-value="swtichValue.inActiveValue"
+          v-model="switchValue.value" :active-value="switchValue.activeValue"
+          :inactive-value="switchValue.inActiveValue"
         />
       </el-tooltip>
       <template #controls>
-        <HstNumber v-model="swtichValue.activeValue" title="activeValue" />
-        <HstNumber v-model="swtichValue.inActiveValue" title="inActiveValue" />
+        <HstNumber v-model="switchValue.activeValue" title="activeValue" />
+        <HstNumber v-model="switchValue.inActiveValue" title="inActiveValue" />
       </template>
     </Variant>
 
@@ -173,14 +173,14 @@ const sizeValueOptions: HstControlOption = [
 
     <Variant title="prevent switching">
       <el-switch
-        v-model="preventSwtchValue.value"
+        v-model="preventSwitchValue.value"
         style="margin-right: 8px;"
-        :before-change="beforeChange" :loading="preventSwtchValue.loading"
+        :before-change="beforeChange" :loading="preventSwitchValue.loading"
         @change="logEvent('change', { change: 'switch value has changed' })"
         @click="logEvent('click', $event)"
       />
       <el-switch
-        v-model="preventSwtchValue.value_sec" :loading="preventSwtchValue.loading_sec"
+        v-model="preventSwitchValue.value_sec" :loading="preventSwitchValue.loading_sec"
         :before-change="beforeChangeSecond"
         @change="logEvent('change', { change: 'switch value has changed' })"
         @click="logEvent('click', $event)"

From 0d53684f37bedf41d6d07c76be66cca4529e3060 Mon Sep 17 00:00:00 2001
From: faga <87003751+faga1@users.noreply.github.com>
Date: Sat, 15 Oct 2022 17:38:15 +0800
Subject: [PATCH 5/6] feat: init autocomplete component (#13)

* feat: init autocomplete component

* chore: argument name change

* feat: add controls

* chore: trigger on focus control

* chore: remote search control

* feat: set auto-props-disabled

Co-authored-by: faga <lzc295592@163.com>
Co-authored-by: joypeng <70848683+FliPPeDround@users.noreply.github.com>
---
 src/components/Form/autocomplete.story.vue | 129 +++++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 src/components/Form/autocomplete.story.vue

diff --git a/src/components/Form/autocomplete.story.vue b/src/components/Form/autocomplete.story.vue
new file mode 100644
index 0000000..3e39782
--- /dev/null
+++ b/src/components/Form/autocomplete.story.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { logEvent } from 'histoire/client'
+import type { AutocompleteProps } from 'element-plus'
+interface LinkItem {
+  value: string
+  link: string
+}
+const clearable = ref(true)
+const triggerOnFocus = ref(false)
+const state1 = ref('')
+const state = ref('')
+const isAsync = ref(true)
+const links = ref<LinkItem[]>([])
+const createFilter = (queryString: string) => {
+  return (restaurant: LinkItem) => {
+    return (
+      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+    )
+  }
+}
+const querySearch = (queryString: string, cb: any) => {
+  const results = queryString
+    ? links.value.filter(createFilter(queryString))
+    : links.value
+  // call callback function to return suggestions
+  cb(results)
+}
+let timeout: NodeJS.Timeout
+const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
+  const results = queryString
+    ? links.value.filter(createFilter(queryString))
+    : links.value
+  clearTimeout(timeout)
+  timeout = setTimeout(() => {
+    cb(results)
+  }, 3000 * Math.random())
+}
+const loadAll = () => {
+  return [
+    { value: 'vue', link: 'https://github.com/vuejs/vue' },
+    { value: 'element', link: 'https://github.com/ElemeFE/element' },
+    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
+    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
+    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
+    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
+    { value: 'babel', link: 'https://github.com/babel/babel' },
+  ]
+}
+const handleSelect = (value: any) => {
+  logEvent('select', value)
+}
+onMounted(() => {
+  links.value = loadAll()
+})
+</script>
+
+<template>
+  <Story title="Form/Autocomplete" auto-props-disabled>
+    <Variant title="Basic Usage">
+      <el-autocomplete
+        v-model="state1"
+        :fetch-suggestions="querySearch"
+        :clearable="clearable"
+        placeholder="Please Input"
+        :trigger-on-focus="triggerOnFocus"
+        @select="handleSelect"
+      />
+      <template #controls>
+        <HstCheckbox v-model="clearable" title="Clearable" />
+        <HstCheckbox v-model="triggerOnFocus" title="Trigger on focus" />
+      </template>
+    </Variant>
+    <Variant title="Custom templete">
+      <el-autocomplete
+        v-model="state"
+        :fetch-suggestions="querySearch"
+        popper-class="my-autocomplete"
+        placeholder="Please input"
+        @select="handleSelect"
+      >
+        <template #suffix>
+          <el-icon
+            class="el-input__icon"
+            @click="logEvent('iconClick', $event)"
+          >
+            <edit />
+          </el-icon>
+        </template>
+        <template #default="{ item }">
+          <div class="value">
+            {{ item.value }}
+          </div>
+          <span class="link">{{ item.link }}</span>
+        </template>
+      </el-autocomplete>
+      <template #controls>
+        <HstCheckbox v-model="clearable" title="Clearable" />
+      </template>
+    </Variant>
+    <Variant title="Remote search">
+      <el-autocomplete
+        v-model="state"
+        :clearable="clearable"
+        :fetch-suggestions="isAsync ? querySearchAsync : querySearch"
+        placeholder="Please input"
+        @select="handleSelect"
+      />
+      <template #controls>
+        <HstCheckbox v-model="clearable" title="Clearable" />
+        <HstCheckbox v-model="isAsync" title="Remote search" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+## Basic usage
+You can get some recommended tips based on the current input.
+
+Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
+
+## Custom templete
+Customize how suggestions are displayed.
+
+Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.
+## Remote search
+Search data from server-side.
+</docs>

From e806aa48dd3be80c9996900c714d8af0fe5b9bd2 Mon Sep 17 00:00:00 2001
From: faga <lzc295592@163.com>
Date: Sun, 16 Oct 2022 15:03:03 +0800
Subject: [PATCH 6/6] chore: layout width change

---
 README.md                                    |  10 +
 histoire.config.ts                           |  13 +-
 package.json                                 |   6 +-
 pnpm-lock.yaml                               | 412 +++++++++++++++----
 script/create/commands/create.js             | 105 +++++
 script/create/commands/index.js              |   1 +
 script/create/common/constant.js             | 123 ++++++
 script/create/index.js                       |  11 +
 src/components/Basic/button.story.vue        |   8 +-
 src/components/Data/card.story.vue           |   7 +-
 src/components/Data/empty.story.vue          |  61 +++
 src/components/Data/tag.story.vue            |   7 +-
 src/components/Form/autocomplete.story.vue   |   4 +-
 src/components/Form/datePicker.story.vue     |   6 +-
 src/components/Form/dateTimePicker.story.vue |   2 +-
 15 files changed, 679 insertions(+), 97 deletions(-)
 create mode 100644 script/create/commands/create.js
 create mode 100644 script/create/commands/index.js
 create mode 100644 script/create/common/constant.js
 create mode 100644 script/create/index.js
 create mode 100644 src/components/Data/empty.story.vue

diff --git a/README.md b/README.md
index ab0498b..5ed788f 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,11 @@
 # 🎉 A Element-plus docs by histoire
+
+## Contributors
+
+This project exists thanks to all the people who contribute.
+
+And thank you to all our backers! 🙏
+
+<a href="https://github.com/element-plus/element-plus-docs-histoire/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=element-plus/element-plus-docs-histoire" />
+</a>
diff --git a/histoire.config.ts b/histoire.config.ts
index 2bafb54..e1937ef 100644
--- a/histoire.config.ts
+++ b/histoire.config.ts
@@ -1,5 +1,5 @@
 import { resolve } from 'pathe'
-import { defineConfig } from 'histoire'
+import { defaultColors, defineConfig } from 'histoire'
 import { HstVue } from '@histoire/plugin-vue'
 
 const logo = resolve(__dirname, './src/assets/images/element-plus-logo.svg')
@@ -8,6 +8,9 @@ export default defineConfig({
   setupFile: './src/histoire.setup.ts',
   plugins: [HstVue()],
   theme: {
+    colors: {
+      primary: defaultColors.sky,
+    },
     title: 'Element Plus',
     logo: {
       dark: logo,
@@ -16,4 +19,12 @@ export default defineConfig({
     },
     favicon: './favicon.svg',
   },
+  defaultStoryProps: {
+    layout: {
+      type: 'grid',
+      width: 320,
+    },
+    responsiveDisabled: true,
+    autoPropsDisabled: true,
+  },
 })
diff --git a/package.json b/package.json
index 5943742..20af957 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,9 @@
     "build": "histoire build",
     "preview": "histoire preview",
     "preview:build": "pnpm run build && histoire preview",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "create": "node script/create/index.js create"
   },
   "dependencies": {
     "element-plus": "npm:element-plus@latest",
@@ -18,8 +20,10 @@
     "@antfu/eslint-config": "^0.27.0",
     "@histoire/plugin-vue": "^0.11.2",
     "@vitejs/plugin-vue": "^3.1.0",
+    "commander": "^9.4.1",
     "eslint": "^8.25.0",
     "histoire": "^0.11.2",
+    "inquirer": "^9.1.3",
     "pathe": "^0.3.9",
     "typescript": "^4.6.4",
     "vite": "^3.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 01815e5..8806640 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,9 +4,11 @@ specifiers:
   '@antfu/eslint-config': ^0.27.0
   '@histoire/plugin-vue': ^0.11.2
   '@vitejs/plugin-vue': ^3.1.0
+  commander: ^9.4.1
   element-plus: npm:element-plus@latest
   eslint: ^8.25.0
   histoire: ^0.11.2
+  inquirer: ^9.1.3
   pathe: ^0.3.9
   typescript: ^4.6.4
   vite: ^3.1.0
@@ -18,11 +20,13 @@ dependencies:
   vue: 3.2.40
 
 devDependencies:
-  '@antfu/eslint-config': 0.27.0_z4bbprzjrhnsfa24uvmcbu7f5q
-  '@histoire/plugin-vue': 0.11.4_e5otgdmh47v26kpd2my3hunvu4
+  '@antfu/eslint-config': 0.27.0_eslint@8.25.0+typescript@4.8.4
+  '@histoire/plugin-vue': 0.11.4_275d330d87e7ebaf29e3d331b3d1b5a7
   '@vitejs/plugin-vue': 3.1.2_vite@3.1.8+vue@3.2.40
+  commander: 9.4.1
   eslint: 8.25.0
   histoire: 0.11.4_vite@3.1.8
+  inquirer: 9.1.3
   pathe: 0.3.9
   typescript: 4.8.4
   vite: 3.1.8
@@ -30,16 +34,16 @@ devDependencies:
 
 packages:
 
-  /@antfu/eslint-config-basic/0.27.0_25sstg4uu2sk4pm7xcyzuov7xq:
+  /@antfu/eslint-config-basic/0.27.0_eslint@8.25.0+typescript@4.8.4:
     resolution: {integrity: sha512-QgQVCiNiV9ZF7h09uBqTHctHDfVqJGIIpe0ZHCicLvUv233nAYeu4adAr53buhKrxDeoalozSs2ePiDiCyceTg==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
       eslint: 8.25.0
-      eslint-plugin-antfu: 0.27.0_z4bbprzjrhnsfa24uvmcbu7f5q
+      eslint-plugin-antfu: 0.27.0_eslint@8.25.0+typescript@4.8.4
       eslint-plugin-eslint-comments: 3.2.0_eslint@8.25.0
       eslint-plugin-html: 7.1.0
-      eslint-plugin-import: 2.26.0_zb5prbqp7qzcgafjm73dfpyyvm
+      eslint-plugin-import: 2.26.0_eslint@8.25.0
       eslint-plugin-jsonc: 2.4.0_eslint@8.25.0
       eslint-plugin-markdown: 3.0.0_eslint@8.25.0
       eslint-plugin-n: 15.3.0_eslint@8.25.0
@@ -49,57 +53,50 @@ packages:
       jsonc-eslint-parser: 2.1.0
       yaml-eslint-parser: 1.1.0
     transitivePeerDependencies:
-      - '@typescript-eslint/parser'
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
       - supports-color
       - typescript
     dev: true
 
-  /@antfu/eslint-config-ts/0.27.0_z4bbprzjrhnsfa24uvmcbu7f5q:
+  /@antfu/eslint-config-ts/0.27.0_eslint@8.25.0+typescript@4.8.4:
     resolution: {integrity: sha512-h/ai9xe65lXtsUiSBRAvfcN47fqn5uGHcCA5c0LoBRX6fVFHk06BbPWMlSJRtqmc3uBTmv3gU8SrnWwrycnKag==}
     peerDependencies:
       eslint: '>=7.4.0'
       typescript: '>=3.9'
     dependencies:
-      '@antfu/eslint-config-basic': 0.27.0_25sstg4uu2sk4pm7xcyzuov7xq
-      '@typescript-eslint/eslint-plugin': 5.40.0_25sstg4uu2sk4pm7xcyzuov7xq
-      '@typescript-eslint/parser': 5.40.0_z4bbprzjrhnsfa24uvmcbu7f5q
+      '@antfu/eslint-config-basic': 0.27.0_eslint@8.25.0+typescript@4.8.4
+      '@typescript-eslint/eslint-plugin': 5.40.0_d765299b94a6a4ae3d9fb8b19a3abfbc
+      '@typescript-eslint/parser': 5.40.0_eslint@8.25.0+typescript@4.8.4
       eslint: 8.25.0
       typescript: 4.8.4
     transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
       - supports-color
     dev: true
 
-  /@antfu/eslint-config-vue/0.27.0_z4bbprzjrhnsfa24uvmcbu7f5q:
+  /@antfu/eslint-config-vue/0.27.0_eslint@8.25.0+typescript@4.8.4:
     resolution: {integrity: sha512-Iw4GY4rXK1dPxzIl35bOwPE1vn6E5Wm8uljqdpQYQpTX1j6el7Yo30bpanCogWRcdPSMWKcS7GVlHjV47QB59w==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-ts': 0.27.0_z4bbprzjrhnsfa24uvmcbu7f5q
+      '@antfu/eslint-config-ts': 0.27.0_eslint@8.25.0+typescript@4.8.4
       eslint: 8.25.0
       eslint-plugin-vue: 9.6.0_eslint@8.25.0
     transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
       - supports-color
       - typescript
     dev: true
 
-  /@antfu/eslint-config/0.27.0_z4bbprzjrhnsfa24uvmcbu7f5q:
+  /@antfu/eslint-config/0.27.0_eslint@8.25.0+typescript@4.8.4:
     resolution: {integrity: sha512-xM1In6/ueNyKxxWO86jd7a9IdKby66lZVT/fE8k2RlP+X0xe5/DTTQfwLbVvnRpn77jCPIhEjNKVWxDO/DUEIg==}
     peerDependencies:
       eslint: '>=7.4.0'
     dependencies:
-      '@antfu/eslint-config-vue': 0.27.0_z4bbprzjrhnsfa24uvmcbu7f5q
-      '@typescript-eslint/eslint-plugin': 5.40.0_25sstg4uu2sk4pm7xcyzuov7xq
-      '@typescript-eslint/parser': 5.40.0_z4bbprzjrhnsfa24uvmcbu7f5q
+      '@antfu/eslint-config-vue': 0.27.0_eslint@8.25.0+typescript@4.8.4
+      '@typescript-eslint/eslint-plugin': 5.40.0_d765299b94a6a4ae3d9fb8b19a3abfbc
+      '@typescript-eslint/parser': 5.40.0_eslint@8.25.0+typescript@4.8.4
       eslint: 8.25.0
       eslint-plugin-eslint-comments: 3.2.0_eslint@8.25.0
       eslint-plugin-html: 7.1.0
-      eslint-plugin-import: 2.26.0_zb5prbqp7qzcgafjm73dfpyyvm
+      eslint-plugin-import: 2.26.0_eslint@8.25.0
       eslint-plugin-jsonc: 2.4.0_eslint@8.25.0
       eslint-plugin-n: 15.3.0_eslint@8.25.0
       eslint-plugin-promise: 6.1.0_eslint@8.25.0
@@ -109,8 +106,6 @@ packages:
       jsonc-eslint-parser: 2.1.0
       yaml-eslint-parser: 1.1.0
     transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
       - supports-color
       - typescript
     dev: true
@@ -294,7 +289,7 @@ packages:
       '@histoire/vendors': 0.11.4
     dev: true
 
-  /@histoire/plugin-vue/0.11.4_e5otgdmh47v26kpd2my3hunvu4:
+  /@histoire/plugin-vue/0.11.4_275d330d87e7ebaf29e3d331b3d1b5a7:
     resolution: {integrity: sha512-Mz08gzLHVE2KCa1bC2c7Mc5WWQmrjO6naeR+HgcGCF2yov5/Fgos2Mb4r+MmZYtK5SHyiaJ4GHWd3VWs8ZbTOg==}
     peerDependencies:
       histoire: ^0.11.4
@@ -495,7 +490,7 @@ packages:
     resolution: {integrity: sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA==}
     dev: false
 
-  /@typescript-eslint/eslint-plugin/5.40.0_25sstg4uu2sk4pm7xcyzuov7xq:
+  /@typescript-eslint/eslint-plugin/5.40.0_d765299b94a6a4ae3d9fb8b19a3abfbc:
     resolution: {integrity: sha512-FIBZgS3DVJgqPwJzvZTuH4HNsZhHMa9SjxTKAZTlMsPw/UzpEjcf9f4dfgDJEHjK+HboUJo123Eshl6niwEm/Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -506,10 +501,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.40.0_z4bbprzjrhnsfa24uvmcbu7f5q
+      '@typescript-eslint/parser': 5.40.0_eslint@8.25.0+typescript@4.8.4
       '@typescript-eslint/scope-manager': 5.40.0
-      '@typescript-eslint/type-utils': 5.40.0_z4bbprzjrhnsfa24uvmcbu7f5q
-      '@typescript-eslint/utils': 5.40.0_z4bbprzjrhnsfa24uvmcbu7f5q
+      '@typescript-eslint/type-utils': 5.40.0_eslint@8.25.0+typescript@4.8.4
+      '@typescript-eslint/utils': 5.40.0_eslint@8.25.0+typescript@4.8.4
       debug: 4.3.4
       eslint: 8.25.0
       ignore: 5.2.0
@@ -521,7 +516,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.40.0_z4bbprzjrhnsfa24uvmcbu7f5q:
+  /@typescript-eslint/parser/5.40.0_eslint@8.25.0+typescript@4.8.4:
     resolution: {integrity: sha512-Ah5gqyX2ySkiuYeOIDg7ap51/b63QgWZA7w6AHtFrag7aH0lRQPbLzUjk0c9o5/KZ6JRkTTDKShL4AUrQa6/hw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -549,7 +544,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.40.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.40.0_z4bbprzjrhnsfa24uvmcbu7f5q:
+  /@typescript-eslint/type-utils/5.40.0_eslint@8.25.0+typescript@4.8.4:
     resolution: {integrity: sha512-nfuSdKEZY2TpnPz5covjJqav+g5qeBqwSHKBvz7Vm1SAfy93SwKk/JeSTymruDGItTwNijSsno5LhOHRS1pcfw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -560,7 +555,7 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/typescript-estree': 5.40.0_typescript@4.8.4
-      '@typescript-eslint/utils': 5.40.0_z4bbprzjrhnsfa24uvmcbu7f5q
+      '@typescript-eslint/utils': 5.40.0_eslint@8.25.0+typescript@4.8.4
       debug: 4.3.4
       eslint: 8.25.0
       tsutils: 3.21.0_typescript@4.8.4
@@ -595,7 +590,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.40.0_z4bbprzjrhnsfa24uvmcbu7f5q:
+  /@typescript-eslint/utils/5.40.0_eslint@8.25.0+typescript@4.8.4:
     resolution: {integrity: sha512-MO0y3T5BQ5+tkkuYZJBjePewsY+cQnfkYeRqS6tPh28niiIwPnQ1t59CSRcs1ZwJJNOdWw7rv9pF8aP58IMihA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -726,6 +721,7 @@ packages:
     dependencies:
       '@vue/reactivity': 3.2.40
       '@vue/shared': 3.2.40
+    dev: false
 
   /@vue/runtime-dom/3.2.40:
     resolution: {integrity: sha512-AO2HMQ+0s2+MCec8hXAhxMgWhFhOPJ/CyRXnmTJ6XIOnJFLrH5Iq3TNwvVcODGR295jy77I6dWPj+wvFoSYaww==}
@@ -733,6 +729,7 @@ packages:
       '@vue/runtime-core': 3.2.40
       '@vue/shared': 3.2.40
       csstype: 2.6.21
+    dev: false
 
   /@vue/server-renderer/3.2.40_vue@3.2.40:
     resolution: {integrity: sha512-gtUcpRwrXOJPJ4qyBpU3EyxQa4EkV8I4f8VrDePcGCPe4O/hd0BPS7v9OgjIQob6Ap8VDz9G+mGTKazE45/95w==}
@@ -742,6 +739,7 @@ packages:
       '@vue/compiler-ssr': 3.2.40
       '@vue/shared': 3.2.40
       vue: 3.2.40
+    dev: false
 
   /@vue/shared/3.2.40:
     resolution: {integrity: sha512-0PLQ6RUtZM0vO3teRfzGi4ltLUO5aO+kLgwh4Um3THSR03rpQWLTuRCkuO5A41ITzwdWeKdPHtSARuPkoo5pCQ==}
@@ -794,11 +792,23 @@ packages:
       uri-js: 4.4.1
     dev: true
 
+  /ansi-escapes/5.0.0:
+    resolution: {integrity: sha512-5GFMVX8HqE/TB+FuBJGuO5XG0WrsA6ptUqoODaT/n9mmUaZFkqnBueB4leqGBCmrUHnCnC4PCZTCd0E7QQ83bA==}
+    engines: {node: '>=12'}
+    dependencies:
+      type-fest: 1.4.0
+    dev: true
+
   /ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
     dev: true
 
+  /ansi-regex/6.0.1:
+    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
+    engines: {node: '>=12'}
+    dev: true
+
   /ansi-styles/3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
@@ -813,6 +823,11 @@ packages:
       color-convert: 2.0.1
     dev: true
 
+  /ansi-styles/6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+    dev: true
+
   /anymatch/3.1.2:
     resolution: {integrity: sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==}
     engines: {node: '>= 8'}
@@ -873,6 +888,10 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
+  /base64-js/1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+    dev: true
+
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -882,6 +901,14 @@ packages:
     resolution: {integrity: sha512-B64AGL4ug2IS2jvV/zjTYDD1L+2gOJTT7Rv+VaK7KVQtQOo/xZbCDsh7g727ipckmU+QJYRqo5RcifVr0Kgcmg==}
     dev: true
 
+  /bl/5.0.0:
+    resolution: {integrity: sha512-8vxFNZ0pflFfi0WXA3WQXlj6CaMEwsmh63I1CNp0q+wWv8sD0ARx1KovSQd0l2GkwrMIOyedq0EF1FxI+RCZLQ==}
+    dependencies:
+      buffer: 6.0.3
+      inherits: 2.0.4
+      readable-stream: 3.6.0
+    dev: true
+
   /boolbase/1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
     dev: true
@@ -910,6 +937,13 @@ packages:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
     dev: true
 
+  /buffer/6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: true
+
   /builtin-modules/3.3.0:
     resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
     engines: {node: '>=6'}
@@ -969,6 +1003,11 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /chalk/5.1.2:
+    resolution: {integrity: sha512-E5CkT4jWURs1Vy5qGJye+XwCkNj7Od3Af7CP6SujMetSMkLs8Do2RWJK5yx1wamHV/op8Rz+9rltjaTQWDnEFQ==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+    dev: true
+
   /change-case/4.1.2:
     resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==}
     dependencies:
@@ -998,6 +1037,10 @@ packages:
     resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
     dev: true
 
+  /chardet/0.7.0:
+    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+    dev: true
+
   /chokidar/3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
@@ -1024,6 +1067,28 @@ packages:
       escape-string-regexp: 1.0.5
     dev: true
 
+  /cli-cursor/4.0.0:
+    resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      restore-cursor: 4.0.0
+    dev: true
+
+  /cli-spinners/2.7.0:
+    resolution: {integrity: sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /cli-width/4.0.0:
+    resolution: {integrity: sha512-ZksGS2xpa/bYkNzN3BAw1wEjsLV/ZKOf/CCrJ/QOBsxx6fOARIkwTutxp1XIOIohi6HKmOFjMoK/XaqDVUpEEw==}
+    engines: {node: '>= 12'}
+    dev: true
+
+  /clone/1.0.4:
+    resolution: {integrity: sha1-2jCcwmPfFZlMaIypAheco8fNfH4=}
+    engines: {node: '>=0.8'}
+    dev: true
+
   /color-convert/1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -1052,6 +1117,11 @@ packages:
       delayed-stream: 1.0.0
     dev: true
 
+  /commander/9.4.1:
+    resolution: {integrity: sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==}
+    engines: {node: ^12.20.0 || >=14}
+    dev: true
+
   /concat-map/0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
@@ -1074,8 +1144,6 @@ packages:
       finalhandler: 1.1.2
       parseurl: 1.3.3
       utils-merge: 1.0.1
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /constant-case/3.0.4:
@@ -1115,6 +1183,7 @@ packages:
 
   /csstype/2.6.21:
     resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
+    dev: false
 
   /dayjs/1.11.5:
     resolution: {integrity: sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==}
@@ -1126,22 +1195,12 @@ packages:
 
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.0.0
     dev: true
 
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.1.2
     dev: true
@@ -1162,6 +1221,12 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
+  /defaults/1.0.4:
+    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
+    dependencies:
+      clone: 1.0.4
+    dev: true
+
   /define-properties/1.1.4:
     resolution: {integrity: sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==}
     engines: {node: '>= 0.4'}
@@ -1238,6 +1303,10 @@ packages:
       tslib: 2.4.0
     dev: true
 
+  /eastasianwidth/0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+    dev: true
+
   /ee-first/1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
     dev: true
@@ -1259,7 +1328,7 @@ packages:
       escape-html: 1.0.3
       lodash: 4.17.21
       lodash-es: 4.17.21
-      lodash-unified: 1.0.2_3ib2ivapxullxkx3xftsimdk7u
+      lodash-unified: 1.0.2_da03a4540fbd16bbaafbb96724306afd
       memoize-one: 6.0.0
       normalize-wheel-es: 1.2.0
       vue: 3.2.40
@@ -1267,6 +1336,10 @@ packages:
       - '@vue/composition-api'
     dev: false
 
+  /emoji-regex/9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+    dev: true
+
   /encodeurl/1.0.2:
     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
     engines: {node: '>= 0.8'}
@@ -1543,7 +1616,7 @@ packages:
     dev: true
 
   /escape-html/1.0.3:
-    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+    resolution: {integrity: sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=}
 
   /escape-string-regexp/1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
@@ -1555,48 +1628,35 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /escape-string-regexp/5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+    dev: true
+
   /eslint-import-resolver-node/0.3.6:
     resolution: {integrity: sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==}
     dependencies:
       debug: 3.2.7
       resolve: 1.22.1
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
-  /eslint-module-utils/2.7.4_c3hlus4v72tewog5wytziddckm:
+  /eslint-module-utils/2.7.4_eslint@8.25.0:
     resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==}
     engines: {node: '>=4'}
     peerDependencies:
-      '@typescript-eslint/parser': '*'
       eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
     peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
       eslint:
         optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.40.0_z4bbprzjrhnsfa24uvmcbu7f5q
       debug: 3.2.7
       eslint: 8.25.0
-      eslint-import-resolver-node: 0.3.6
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
-  /eslint-plugin-antfu/0.27.0_z4bbprzjrhnsfa24uvmcbu7f5q:
+  /eslint-plugin-antfu/0.27.0_eslint@8.25.0+typescript@4.8.4:
     resolution: {integrity: sha512-xjNfATHonE3Do2igOlhwjfL2tlaGnm1EgbsLLkHgdk30oIvJU4bLNxF6wXIuaCdjqmwWIqF6smJbX2YhtaEC4w==}
     dependencies:
-      '@typescript-eslint/utils': 5.40.0_z4bbprzjrhnsfa24uvmcbu7f5q
+      '@typescript-eslint/utils': 5.40.0_eslint@8.25.0+typescript@4.8.4
     transitivePeerDependencies:
       - eslint
       - supports-color
@@ -1631,24 +1691,19 @@ packages:
       htmlparser2: 8.0.1
     dev: true
 
-  /eslint-plugin-import/2.26.0_zb5prbqp7qzcgafjm73dfpyyvm:
+  /eslint-plugin-import/2.26.0_eslint@8.25.0:
     resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
     engines: {node: '>=4'}
     peerDependencies:
-      '@typescript-eslint/parser': '*'
       eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.40.0_z4bbprzjrhnsfa24uvmcbu7f5q
       array-includes: 3.1.5
       array.prototype.flat: 1.3.0
       debug: 2.6.9
       doctrine: 2.1.0
       eslint: 8.25.0
       eslint-import-resolver-node: 0.3.6
-      eslint-module-utils: 2.7.4_c3hlus4v72tewog5wytziddckm
+      eslint-module-utils: 2.7.4_eslint@8.25.0
       has: 1.0.3
       is-core-module: 2.10.0
       is-glob: 4.0.3
@@ -1656,10 +1711,6 @@ packages:
       object.values: 1.1.5
       resolve: 1.22.1
       tsconfig-paths: 3.14.1
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
     dev: true
 
   /eslint-plugin-jsonc/2.4.0_eslint@8.25.0:
@@ -1917,6 +1968,15 @@ packages:
       is-extendable: 0.1.1
     dev: true
 
+  /external-editor/3.1.0:
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
+    engines: {node: '>=4'}
+    dependencies:
+      chardet: 0.7.0
+      iconv-lite: 0.4.24
+      tmp: 0.0.33
+    dev: true
+
   /fast-deep-equal/3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -1946,6 +2006,14 @@ packages:
       reusify: 1.0.4
     dev: true
 
+  /figures/5.0.0:
+    resolution: {integrity: sha512-ej8ksPF4x6e5wvK9yevct0UCXh8TTFlWGVLlgjZuoBH1HwjIfKE/IdL5mq89sFA7zELi1VhKpmtDnrs7zWyeyg==}
+    engines: {node: '>=14'}
+    dependencies:
+      escape-string-regexp: 5.0.0
+      is-unicode-supported: 1.3.0
+    dev: true
+
   /file-entry-cache/6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -1971,8 +2039,6 @@ packages:
       parseurl: 1.3.3
       statuses: 1.5.0
       unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /find-up/4.1.0:
@@ -2239,7 +2305,7 @@ packages:
       happy-dom: 2.55.0
       jiti: 1.16.0
       markdown-it: 12.3.2
-      markdown-it-anchor: 8.6.5_2zb4u3vubltivolgu556vv4aom
+      markdown-it-anchor: 8.6.5_d643ca6eb40ae68ab966a77bead78073
       markdown-it-attrs: 4.1.4_markdown-it@12.3.2
       markdown-it-emoji: 2.0.2
       micromatch: 4.0.5
@@ -2291,6 +2357,13 @@ packages:
       '@types/node': 10.17.60
     dev: true
 
+  /iconv-lite/0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: true
+
   /iconv-lite/0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -2298,6 +2371,10 @@ packages:
       safer-buffer: 2.1.2
     dev: true
 
+  /ieee754/1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+    dev: true
+
   /ignore/5.2.0:
     resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==}
     engines: {node: '>= 4'}
@@ -2332,6 +2409,27 @@ packages:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: true
 
+  /inquirer/9.1.3:
+    resolution: {integrity: sha512-3OoUzit8tEebW4tpIZUXPRvcGNm4xhGeQp+GpdupDiz2OdWAqjO50EoeVOXx1Z91M0GLe6d16jJUArIhI/cNPQ==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      ansi-escapes: 5.0.0
+      chalk: 5.1.2
+      cli-cursor: 4.0.0
+      cli-width: 4.0.0
+      external-editor: 3.1.0
+      figures: 5.0.0
+      lodash: 4.17.21
+      mute-stream: 0.0.8
+      ora: 6.1.2
+      run-async: 2.4.1
+      rxjs: 7.5.7
+      string-width: 5.1.2
+      strip-ansi: 7.0.1
+      through: 2.3.8
+      wrap-ansi: 8.0.1
+    dev: true
+
   /internal-slot/1.0.3:
     resolution: {integrity: sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==}
     engines: {node: '>= 0.4'}
@@ -2427,6 +2525,11 @@ packages:
     resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
     dev: true
 
+  /is-interactive/2.0.0:
+    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
+    engines: {node: '>=12'}
+    dev: true
+
   /is-negative-zero/2.0.2:
     resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==}
     engines: {node: '>= 0.4'}
@@ -2472,6 +2575,11 @@ packages:
       has-symbols: 1.0.3
     dev: true
 
+  /is-unicode-supported/1.3.0:
+    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
+    engines: {node: '>=12'}
+    dev: true
+
   /is-weakref/1.0.2:
     resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
     dependencies:
@@ -2600,7 +2708,7 @@ packages:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
     dev: false
 
-  /lodash-unified/1.0.2_3ib2ivapxullxkx3xftsimdk7u:
+  /lodash-unified/1.0.2_da03a4540fbd16bbaafbb96724306afd:
     resolution: {integrity: sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g==}
     peerDependencies:
       '@types/lodash-es': '*'
@@ -2619,6 +2727,14 @@ packages:
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
+  /log-symbols/5.1.0:
+    resolution: {integrity: sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==}
+    engines: {node: '>=12'}
+    dependencies:
+      chalk: 5.1.2
+      is-unicode-supported: 1.3.0
+    dev: true
+
   /lower-case/2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
     dependencies:
@@ -2637,7 +2753,7 @@ packages:
     dependencies:
       sourcemap-codec: 1.4.8
 
-  /markdown-it-anchor/8.6.5_2zb4u3vubltivolgu556vv4aom:
+  /markdown-it-anchor/8.6.5_d643ca6eb40ae68ab966a77bead78073:
     resolution: {integrity: sha512-PI1qEHHkTNWT+X6Ip9w+paonfIQ+QZP9sCeMYi47oqhH+EsW8CrJ8J7CzV19QVOj6il8ATGbK2nTECj22ZHGvQ==}
     peerDependencies:
       '@types/markdown-it': '*'
@@ -2729,6 +2845,11 @@ packages:
       mime-db: 1.52.0
     dev: true
 
+  /mimic-fn/2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+    dev: true
+
   /min-indent/1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -2782,6 +2903,10 @@ packages:
     resolution: {integrity: sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==}
     dev: true
 
+  /mute-stream/0.0.8:
+    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
+    dev: true
+
   /nanoid/3.3.4:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -2875,6 +3000,13 @@ packages:
       wrappy: 1.0.2
     dev: true
 
+  /onetime/5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+    dependencies:
+      mimic-fn: 2.1.0
+    dev: true
+
   /optionator/0.9.1:
     resolution: {integrity: sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==}
     engines: {node: '>= 0.8.0'}
@@ -2887,6 +3019,26 @@ packages:
       word-wrap: 1.2.3
     dev: true
 
+  /ora/6.1.2:
+    resolution: {integrity: sha512-EJQ3NiP5Xo94wJXIzAyOtSb0QEIAUu7m8t6UZ9krbz0vAJqr92JpcK/lEXg91q6B9pEGqrykkd2EQplnifDSBw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      bl: 5.0.0
+      chalk: 5.1.2
+      cli-cursor: 4.0.0
+      cli-spinners: 2.7.0
+      is-interactive: 2.0.0
+      is-unicode-supported: 1.3.0
+      log-symbols: 5.1.0
+      strip-ansi: 7.0.1
+      wcwidth: 1.0.1
+    dev: true
+
+  /os-tmpdir/1.0.2:
+    resolution: {integrity: sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /p-limit/2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -3109,6 +3261,15 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
+  /readable-stream/3.6.0:
+    resolution: {integrity: sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+    dev: true
+
   /readdirp/3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -3149,6 +3310,14 @@ packages:
       supports-preserve-symlinks-flag: 1.0.0
     dev: true
 
+  /restore-cursor/4.0.0:
+    resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+    dev: true
+
   /reusify/1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -3169,12 +3338,23 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /run-async/2.4.1:
+    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
+    engines: {node: '>=0.12.0'}
+    dev: true
+
   /run-parallel/1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
       queue-microtask: 1.2.3
     dev: true
 
+  /rxjs/7.5.7:
+    resolution: {integrity: sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==}
+    dependencies:
+      tslib: 2.4.0
+    dev: true
+
   /sade/1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -3186,6 +3366,10 @@ packages:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
     dev: true
 
+  /safe-buffer/5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+    dev: true
+
   /safe-regex-test/1.0.0:
     resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
     dependencies:
@@ -3261,6 +3445,10 @@ packages:
       object-inspect: 1.12.2
     dev: true
 
+  /signal-exit/3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+    dev: true
+
   /sirv/2.0.2:
     resolution: {integrity: sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==}
     engines: {node: '>= 10'}
@@ -3329,6 +3517,15 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /string-width/5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.0.1
+    dev: true
+
   /string.prototype.trimend/1.0.5:
     resolution: {integrity: sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==}
     dependencies:
@@ -3351,6 +3548,12 @@ packages:
       safe-buffer: 5.1.2
     dev: true
 
+  /string_decoder/1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: true
+
   /strip-ansi/6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -3358,6 +3561,13 @@ packages:
       ansi-regex: 5.0.1
     dev: true
 
+  /strip-ansi/7.0.1:
+    resolution: {integrity: sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-regex: 6.0.1
+    dev: true
+
   /strip-bom-string/1.0.0:
     resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
     engines: {node: '>=0.10.0'}
@@ -3439,11 +3649,22 @@ packages:
       qs: 6.11.0
     dev: true
 
+  /through/2.3.8:
+    resolution: {integrity: sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=}
+    dev: true
+
   /tinypool/0.1.3:
     resolution: {integrity: sha512-2IfcQh7CP46XGWGGbdyO4pjcKqsmVqFAPcXfPxcPXmOWt9cYkTP9HcDmGgsfijYoAEc4z9qcpM/BaBz46Y9/CQ==}
     engines: {node: '>=14.0.0'}
     dev: true
 
+  /tmp/0.0.33:
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+    dependencies:
+      os-tmpdir: 1.0.2
+    dev: true
+
   /to-fast-properties/2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -3513,6 +3734,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /type-fest/1.4.0:
+    resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
+    engines: {node: '>=10'}
+    dev: true
+
   /typedarray/0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
     dev: true
@@ -3718,11 +3944,18 @@ packages:
       '@vue/runtime-dom': 3.2.40
       '@vue/server-renderer': 3.2.40_vue@3.2.40
       '@vue/shared': 3.2.40
+    dev: false
 
   /w3c-keyname/2.2.6:
     resolution: {integrity: sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==}
     dev: true
 
+  /wcwidth/1.0.1:
+    resolution: {integrity: sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=}
+    dependencies:
+      defaults: 1.0.4
+    dev: true
+
   /webidl-conversions/3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
     dev: true
@@ -3774,6 +4007,15 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /wrap-ansi/8.0.1:
+    resolution: {integrity: sha512-QFF+ufAqhoYHvoHdajT/Po7KoXVBPXS2bgjIam5isfWJPfIOnQZ50JtUiVvCv/sjgacf3yRrt2ZKUZ/V4itN4g==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.0.1
+    dev: true
+
   /wrappy/1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
diff --git a/script/create/commands/create.js b/script/create/commands/create.js
new file mode 100644
index 0000000..facad86
--- /dev/null
+++ b/script/create/commands/create.js
@@ -0,0 +1,105 @@
+/* eslint-disable no-console */
+import { existsSync, mkdirSync, readdirSync, writeFileSync } from 'fs'
+import inquirer from 'inquirer'
+import { categoryList, componentCollection, createStoryComponent, resolver } from '../common/constant.js'
+const categoryQ = {
+  type: 'list',
+  name: 'category',
+  message: '（必填）请选择创建组件的类型：',
+  choices: categoryList,
+}
+const lowerFirst = (name) => {
+  if (!name)
+    return ''
+  if (name.length === 1)
+    return name.toLowerCase()
+  return name[0].toLowerCase() + name.substring(1)
+}
+const upperFirst = (name) => {
+  if (!name)
+    return ''
+  if (name.length === 1)
+    return name.toUpperCase()
+  return name[0].toUpperCase() + name.substring(1)
+}
+const createComponentsQ = (category) => {
+  // 读取已有的组件
+  let files = null
+  let choices = componentCollection[category]?.components
+  try {
+    const path = resolver(`src/components/${category}/`)
+    if (existsSync(path))
+      files = readdirSync(path)
+  }
+  catch (e) {
+    console.error(e.toString())
+    process.exit(1)
+  }
+  if (files) {
+    const existMap = {}
+    const names = files?.map(f => upperFirst(f?.split('.')[0]))
+    // 取交集，仅列出未创建的组件
+    for (const k of names)
+      existMap[k] = true
+    choices = choices.filter(c => !existMap[c])
+  }
+  return ({
+    type: 'checkbox',
+    name: 'components',
+    message: '（必填）请选择创建组件name：',
+    choices,
+    validate: (value) => {
+      if (!value.length)
+        return '组件 name 是必填项！'
+
+      return true
+    },
+  })
+}
+
+const generateStoryDoc = (component, category) => {
+  if (!category)
+    category = categoryList.find(type => componentCollection[type]?.components?.includes(component))
+  if (!category)
+    return console.log(`${component}没有对应的类型！`)
+
+  // 确定生成路径
+  const fileName = `${lowerFirst(component)}.story.vue`
+  const storyDocDir = resolver(`src/components/${category}/`)
+  const storyDocFile = resolver(`src/components/${category}/${fileName}`)
+
+  // 读取模板
+  const template = createStoryComponent(category, component)
+  // 生成文件
+  try {
+    // 目录不存在则新建
+    if (!existsSync(storyDocDir))
+      mkdirSync(storyDocDir)
+
+    // 组件文档存在则退出
+    if (existsSync(storyDocFile)) {
+      console.log(`${fileName}已存在！`)
+      return
+    }
+    writeFileSync(storyDocFile, template, { encoding: 'utf-8' })
+
+    console.log(`${fileName}创建成功！`)
+    console.log(`path: ${storyDocFile}`)
+  }
+  catch (e) {
+    console.error(e.toString())
+    process.exit(1)
+  }
+}
+export async function create(components) {
+  // 参数没有带上组件名
+  if (!components.length) {
+    const { category } = await inquirer.prompt([categoryQ])
+    const { components } = await inquirer.prompt([createComponentsQ(category)])
+    components.forEach(c => generateStoryDoc(c, category))
+  }
+
+  // 组件名合法性检验
+
+  components.forEach(c => generateStoryDoc(c))
+}
diff --git a/script/create/commands/index.js b/script/create/commands/index.js
new file mode 100644
index 0000000..f756a8b
--- /dev/null
+++ b/script/create/commands/index.js
@@ -0,0 +1 @@
+export * from './create'
diff --git a/script/create/common/constant.js b/script/create/common/constant.js
new file mode 100644
index 0000000..c2c618c
--- /dev/null
+++ b/script/create/common/constant.js
@@ -0,0 +1,123 @@
+import { resolve } from 'pathe'
+export const PROJECT_DIR = process.cwd()
+export const resolver = dir => resolve(PROJECT_DIR, dir)
+export const createStoryComponent = (category, component) => `\
+<script setup lang="ts">
+import type { ${component}Props } from 'element-plus'
+</script>
+
+<template>
+  <Story title="${category}/${component}">
+    <Variant title="Basic Usage">
+      <template #controls>
+        <!-- HstControl -->
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+## Basic usage
+${component} usage
+</docs>
+
+<style>
+</style>
+`
+export const componentCollection = {
+  Basic: {
+    components: [
+      'Button',
+      'Border',
+      'Color',
+      'LayoutContainer',
+      'Icon',
+      'Layout',
+      'Link',
+      'Scrollbar',
+      'Space',
+      'Typography',
+    ],
+  },
+  Form: {
+    components: [
+      'Autocomplete',
+      'Cascader',
+      'Checkbox',
+      'ColorPicker',
+      'DatePicker',
+      'DateTimePicker',
+      'Form',
+      'Input',
+      'InputNumber',
+      'Radio',
+      'Rate',
+      'Select',
+      'VirtualizedSelect',
+      'Slider',
+      'Switch',
+      'TimePicker',
+      'TimeSelect',
+      'Transfer',
+      'Upload',
+    ],
+  },
+  Data: {
+    components: [
+      'Avatar',
+      'Badge',
+      'Calendar',
+      'Card',
+      'Carousel',
+      'Collapse',
+      'Descriptions',
+      'Empty',
+      'Image',
+      'InfiniteScroll',
+      'Pagination',
+      'Progress',
+      'Result',
+      'Skeleton',
+      'Table',
+      'VirtualizedTable',
+      'Tag',
+      'Timeline',
+      'Tree',
+      'TreeSelect',
+      'VirtualizedTree',
+    ],
+  },
+  Navigation: {
+    components: [
+      'Affix',
+      'Backtop',
+      'Breadcrumb',
+      'Dropdown',
+      'Menu',
+      'PageHeader',
+      'Steps',
+      'Tabs',
+    ],
+  },
+  Feedback: {
+    components: [
+      'Alert',
+      'Dialog',
+      'Drawer',
+      'Loading',
+      'Message',
+      'MessageBox',
+      'Notification',
+      'Popconfirm',
+      'Popover',
+      'Tooltip',
+    ],
+  },
+  Configuration: {
+    components: ['ConfigProvider'],
+  },
+  Others: {
+    components: ['Divider'],
+  },
+}
+export const categoryList = Object.keys(componentCollection)
diff --git a/script/create/index.js b/script/create/index.js
new file mode 100644
index 0000000..7c764db
--- /dev/null
+++ b/script/create/index.js
@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+import { Command } from 'commander'
+import { create } from './commands/create.js'
+const program = new Command()
+
+program
+  .command('create')
+  .arguments('[components...]')
+  .description('创建一个组件文档')
+  .action(create)
+program.parse()
diff --git a/src/components/Basic/button.story.vue b/src/components/Basic/button.story.vue
index 725753f..2bec5c4 100644
--- a/src/components/Basic/button.story.vue
+++ b/src/components/Basic/button.story.vue
@@ -76,8 +76,8 @@ const buttonGroupData = ref({
 </script>
 
 <template>
-  <Story title="Basic/Button" auto-props-disabled>
-    <Variant title="Basic usage" >
+  <Story title="Basic/Button">
+    <Variant title="Basic usage">
       <el-button
         :type="basicButtonData.type"
         :size="basicButtonData.size"
@@ -108,7 +108,7 @@ const buttonGroupData = ref({
         />
       </template>
     </Variant>
-    <Variant title="Custom Color" >
+    <Variant title="Custom Color">
       <el-button
         :plain="colorButtonData.plain"
         :disabled="colorButtonData.disabled"
@@ -128,7 +128,7 @@ const buttonGroupData = ref({
       </template>
     </Variant>
 
-    <Variant title="Button Group" >
+    <Variant title="Button Group">
       <el-button-group
         :size="buttonGroupData.size"
         :type="buttonGroupData.type"
diff --git a/src/components/Data/card.story.vue b/src/components/Data/card.story.vue
index 1e79b4e..3b90a66 100644
--- a/src/components/Data/card.story.vue
+++ b/src/components/Data/card.story.vue
@@ -24,7 +24,12 @@ const shadowTypeList: Record<'label' & 'value', CardProps['shadow']>[] = [
 </script>
 
 <template>
-  <Story title="Data/Card" auto-props-disabled>
+  <Story
+    title="Data/Card" :layout="{
+      type: 'grid',
+      width: 540,
+    }"
+  >
     <Variant title="Basic usage">
       <el-card class="box-card">
         <template #header>
diff --git a/src/components/Data/empty.story.vue b/src/components/Data/empty.story.vue
new file mode 100644
index 0000000..43261d8
--- /dev/null
+++ b/src/components/Data/empty.story.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const description = ref('thisdescription')
+const imageSize = ref(200)
+</script>
+
+<template>
+  <Story title="Data/Empty">
+    <Variant title="Basic Usage">
+      <el-empty :description="description" />
+      <template #controls>
+        <HstText
+          v-model="description"
+          title="description"
+        />
+      </template>
+    </Variant>
+    <Variant title="Custom image">
+      <el-empty
+        image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+      />
+    </Variant>
+    <Variant title="Image size">
+      <el-empty :image-size="imageSize" />
+      <template #controls>
+        <HstText
+          v-model="imageSize"
+          title="image-size"
+        />
+      </template>
+    </Variant>
+    <Variant title="Bottom content">
+      <el-empty>
+        <el-button type="primary">
+          Button
+        </el-button>
+      </el-empty>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+## Basic usage
+
+Empty usage
+
+## Custom image
+
+Use `image` prop to set image URL.
+
+## Image size
+
+Use `image-size` prop to control image size.
+
+## Bottom content
+
+Use the default slot to insert content at the bottom.
+</docs>
+
+<style>
+</style>
diff --git a/src/components/Data/tag.story.vue b/src/components/Data/tag.story.vue
index 621c3a1..42895e0 100644
--- a/src/components/Data/tag.story.vue
+++ b/src/components/Data/tag.story.vue
@@ -91,7 +91,12 @@ const onChange = (status: boolean) => {
 </script>
 
 <template>
-  <Story title="Data/Tag" auto-props-disabled>
+  <Story
+    title="Data/Tag" :layout="{
+      type: 'grid',
+      width: 400,
+    }"
+  >
     <Variant title="Basic usage">
       <el-tag :type="currentType" :size="currentSize">
         Tag
diff --git a/src/components/Form/autocomplete.story.vue b/src/components/Form/autocomplete.story.vue
index 3e39782..fdc7294 100644
--- a/src/components/Form/autocomplete.story.vue
+++ b/src/components/Form/autocomplete.story.vue
@@ -71,7 +71,7 @@ onMounted(() => {
         <HstCheckbox v-model="triggerOnFocus" title="Trigger on focus" />
       </template>
     </Variant>
-    <Variant title="Custom templete">
+    <Variant title="Custom template">
       <el-autocomplete
         v-model="state"
         :fetch-suggestions="querySearch"
@@ -120,7 +120,7 @@ You can get some recommended tips based on the current input.
 
 Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
 
-## Custom templete
+## Custom template
 Customize how suggestions are displayed.
 
 Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.
diff --git a/src/components/Form/datePicker.story.vue b/src/components/Form/datePicker.story.vue
index 3ee1111..5ee6df3 100644
--- a/src/components/Form/datePicker.story.vue
+++ b/src/components/Form/datePicker.story.vue
@@ -109,7 +109,11 @@ const isHoliday = ({ dayjs }: DateCell) => {
 </script>
 
 <template>
-  <Story title="Form/DatePicker" auto-props-disabled>
+  <Story
+    title="Form/DatePicker"
+    auto-props-disabled
+    :layout="{ type: 'grid', width: 480 }"
+  >
     <Variant title="Basic Usage">
       <el-date-picker
         v-model="date"
diff --git a/src/components/Form/dateTimePicker.story.vue b/src/components/Form/dateTimePicker.story.vue
index 9f2773a..88c1930 100644
--- a/src/components/Form/dateTimePicker.story.vue
+++ b/src/components/Form/dateTimePicker.story.vue
@@ -92,7 +92,7 @@ const handleChange = (dateTime: any) => {
 </script>
 
 <template>
-  <Story title="Form/DateTimePicker">
+  <Story title="Form/DateTimePicker" :layout="{ type: 'grid', width: 480 }">
     <Variant title="Basic Usage">
       <el-date-picker
         v-model="date"