element-plus · FliPPeDround · Oct 25, 2022 · Oct 25, 2022
diff --git a/script/create/constant.ts b/script/create/constant.ts
@@ -1,7 +1,8 @@
 import { resolve } from 'pathe'
 export const PROJECT_DIR = process.cwd()
 export const resolver = (dir: string) => resolve(PROJECT_DIR, dir)
-export const createStoryComponent = (category: string, component: string) => `\
+
+export const createStoryComponent = (category: CategoryType, component: ComponentType) => `\
 <script setup lang="ts">
 import type { ${component}Props } from 'element-plus'
 </script>
@@ -17,21 +18,21 @@ import type { ${component}Props } from 'element-plus'
   </Story>
 </template>
 
-<docs lang="md">
-## Basic usage
-${component} usage
-</docs>
-
 <style>
 </style>
 `
+
+export const createStoryMd = (component: ComponentType) => `\
+## ${component} Attributes
+`
+
 export const componentCollection = {
   Basic: {
     components: [
       'Button',
       'Border',
       'Color',
-      'LayoutContainer',
+      'Container',
       'Icon',
       'Layout',
       'Link',

diff --git a/script/create/utils.ts b/script/create/utils.ts
@@ -2,8 +2,8 @@
 import { existsSync, mkdirSync, readdirSync, writeFileSync } from 'fs'
 import { lowerFirst, upperFirst } from '../utils'
 import type { CategoryType, ComponentType } from './constant'
+import { categoryList, componentCollection, createStoryComponent, createStoryMd, resolver } from './constant'
 import { getCategory } from './questions/category'
-import { categoryList, componentCollection, createStoryComponent, resolver } from './constant'
 
 export const getComponentChoices = async () => {
   const category: CategoryType = await getCategory()
@@ -35,27 +35,38 @@ export const generateStoryDoc = (component: ComponentType) => {
     return console.log(`${component} not a legal component of EP, please check and re-enter!`)
 
   // 确定生成路径
-  const fileName = `${lowerFirst(component)}.story.vue`
-  const storyDocDir = resolver(`src/components/${category}/`)
-  const storyDocFile = resolver(`src/components/${category}/${fileName}`)
+  const fileVueName = `${lowerFirst(component)}.story.vue`
+  const fileMdName = `${lowerFirst(component)}.story.md`
+  const storyDocDir = resolver(`src/components/${category}/${component}`)
+  const storyDocFileVue = resolver(`src/components/${category}/${component}/${fileVueName}`)
+  const storyDocFileMd = resolver(`src/components/${category}/${component}/${fileMdName}`)
 
   // 读取模板
   const template = createStoryComponent(category, component)
+  const md = createStoryMd(component)
   // 生成文件
   try {
     // 目录不存在则新建
     if (!existsSync(storyDocDir))
       mkdirSync(storyDocDir)
 
     // 组件文档存在则退出
-    if (existsSync(storyDocFile)) {
-      console.log(`${fileName} Already existed!`)
+    if (existsSync(storyDocFileVue)) {
+      console.log(`${storyDocFileVue} Already existed!`)
       return
     }
-    writeFileSync(storyDocFile, template, { encoding: 'utf-8' })
+    writeFileSync(storyDocFileVue, template, { encoding: 'utf-8' })
 
-    console.log(`${fileName} Creation success!`)
-    console.log(`path: ${storyDocFile}`)
+    if (existsSync(storyDocFileMd)) {
+      console.log(`${storyDocFileMd} Already existed!`)
+      return
+    }
+    writeFileSync(storyDocFileMd, md, { encoding: 'utf-8' })
+
+    console.log(`${storyDocFileVue} Creation success!`)
+    console.log(`${storyDocFileMd} Creation success!`)
+    console.log(`path: ${storyDocFileVue}`)
+    console.log(`path: ${storyDocFileMd}`)
   }
   catch (e) {
     console.error(e.toString())

diff --git a/src/components/Basic/Button/button.story.md b/src/components/Basic/Button/button.story.md
@@ -7,7 +7,7 @@
 | plain                               | determine whether it's a plain button                           | boolean               | —                                                             | false   |
 | text <VersionTag version="2.2.0" /> | determine whether it's a text button                            | boolean               | —                                                             | false   |
 | bg <VersionTag version="2.2.0" />   | determine whether the text button background color is always on | boolean               | —                                                             | false   |
-| link <VersionTag version="2.2.1" /> | determine whether it's a link button                            | boolean               | —                                                             | false   |
+| link                                | determine whether it's a link button                            | boolean               | —                                                             | false   |
 | round                               | determine whether it's a round button                           | boolean               | —                                                             | false   |
 | circle                              | determine whether it's a circle button                          | boolean               | —                                                             | false   |
 | loading                             | determine whether it's loading                                  | boolean               | —                                                             | false   |

diff --git a/src/components/Basic/Container/container.story.md b/src/components/Basic/Container/container.story.md
@@ -0,0 +1,53 @@
+## Container Attributes
+
+| Name      | Description                         | Type   | Accepted Values       | Default                                                                    |
+| --------- | ----------------------------------- | ------ | --------------------- | -------------------------------------------------------------------------- |
+| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |
+
+## Container Slots
+
+| Name | Description               | Subtags                                    |
+| ---- | ------------------------- | ------------------------------------------ |
+| —    | customize default content | Container / Header / Aside / Main / Footer |
+
+## Header Attributes
+
+| Name   | Description          | Type   | Accepted Values | Default |
+| ------ | -------------------- | ------ | --------------- | ------- |
+| height | height of the header | string | —               | 60px    |
+
+## Header Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |
+
+## Aside Attributes
+
+| Name  | Description               | Type   | Accepted Values | Default |
+| ----- | ------------------------- | ------ | --------------- | ------- |
+| width | width of the side section | string | —               | 300px   |
+
+## Aside Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |
+
+## Main Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |
+
+## Footer Attributes
+
+| Name   | Description          | Type   | Accepted Values | Default |
+| ------ | -------------------- | ------ | --------------- | ------- |
+| height | height of the footer | string | —               | 60px    |
+
+## Footer Slots
+
+| Name | Description               |
+| ---- | ------------------------- |
+| —    | customize default content |
diff --git a/src/components/Basic/Container/container.story.vue b/src/components/Basic/Container/container.story.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const headerHeight = ref(60)
+const footerHeight = ref(60)
+const asideWidth = ref(100)
+</script>
+
+<template>
+  <Story title="Basic/Container" icon="carbon:container-software">
+    <Variant title="Basic Usage">
+      <div class="common-layout">
+        <el-container>
+          <el-header :height="`${headerHeight}px`">
+            Header
+          </el-header>
+          <el-container>
+            <el-aside :width="`${asideWidth}px`">
+              Aside
+            </el-aside>
+            <el-container>
+              <el-main>Main</el-main>
+              <el-footer :height="`${footerHeight}px`">
+                Footer
+              </el-footer>
+            </el-container>
+          </el-container>
+        </el-container>
+      </div>
+      <template #controls>
+        <HstNumber v-model="headerHeight" title="HeaderHeight" />
+        <HstNumber v-model="footerHeight" title="FooterHeight" />
+        <HstNumber v-model="asideWidth" title="AsideWidth" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<style>
+  .el-header, .el-footer {
+    background-color: #c6e2ff;
+    color: #333;
+    text-align: center;
+    line-height: 60px;
+  }
+
+  .el-aside {
+    background-color: #d9ecff;
+    color: #333;
+    text-align: center;
+    line-height: 200px;
+  }
+
+  .el-main {
+    background-color: #ecf5ff;
+    color: #333;
+    text-align: center;
+    line-height: 160px;
+  }
+</style>