From 01dfe20fce6507077a8fd1dd060f021e0f4f3bbe Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Sat, 9 Apr 2022 13:05:59 +0800
Subject: [PATCH 1/2] =?UTF-8?q?docs(button):=20=E4=BC=98=E5=8C=96demo?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-theme/styles/demo-block.scss        |  18 +++
 .../devui-vue/docs/components/button/index.md | 128 ++++++------------
 2 files changed, 63 insertions(+), 83 deletions(-)

diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/styles/demo-block.scss b/packages/devui-vue/docs/.vitepress/devui-theme/styles/demo-block.scss
index b9e49c8a70..666bb693f7 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/styles/demo-block.scss
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/styles/demo-block.scss
@@ -6,6 +6,24 @@
   &.hover {
     box-shadow: none !important;
   }
+
+  .source {
+    .demo-spacing {
+      & > .devui-btn {
+        margin: 0 8px 8px 0;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
+      &:last-child {
+        & > .devui-btn {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
 }
 
 .demo-block-control {
diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md
index 3023a010eb..e4ec4f0b13 100644
--- a/packages/devui-vue/docs/components/button/index.md
+++ b/packages/devui-vue/docs/components/button/index.md
@@ -6,41 +6,41 @@
 
 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
 
-### 按钮类型
+### 按钮形态
 
-:::demo 通过`variant`设置按钮类型，目前支持`solid`、`outline`、`text`三种类型，默认为`outline`类型。
+:::demo 通过`variant`设置按钮形态，目前支持`solid`、`outline`、`text`三种形态，默认为`outline`。
 
 ```vue
 <template>
-  <div class="button-size-demo">
+  <div class="demo-spacing">
     <d-button variant="solid">Solid Button</d-button>
     <d-button>Outline Button</d-button>
     <d-button variant="text">Text Button</d-button>
   </div>
 </template>
-
-<style>
-.button-size-demo > button {
-  margin-right: 8px;
-}
-</style>
 ```
 
 :::
 
 ### 主题色
 
-:::demo 通过`color`设置按钮主题，目前支持`secondary`、`primary`、`danger`三种类型，默认为`secondary`类型。
+:::demo 通过`color`设置按钮的主题色，目前支持`primary`、`secondary`、`danger`三种主题色，默认为`secondary`。<br>注意：如果`variant`设置成`solid`，则默认使用`primary`主题色。
 
 ```vue
 <template>
-  <div class="button-size-demo">
+  <div class="demo-spacing">
     <d-button variant="solid" color="primary">Primary</d-button>
     <d-button color="primary">Primary</d-button>
     <d-button variant="text" color="primary">Primary</d-button>
   </div>
-  <br />
-  <div class="button-size-demo">
+
+  <div class="demo-spacing">
+    <d-button variant="solid" color="secondary">Secondary</d-button>
+    <d-button color="secondary">Secondary</d-button>
+    <d-button variant="text" color="secondary">Secondary</d-button>
+  </div>
+
+  <div class="demo-spacing">
     <d-button variant="solid" color="danger">Danger</d-button>
     <d-button color="danger">Danger</d-button>
     <d-button variant="text" color="danger">Danger</d-button>
@@ -50,16 +50,16 @@
 
 :::
 
-### 按钮大小
+### 按钮尺寸
 
-:::demo 通过`size`设置按钮大小，支持`xs`、`sm`、`md`、`lg`四种类型，默认为`md`。
+:::demo 通过`size`设置按钮尺寸，支持`xs`、`sm`、`md`、`lg`四种类型的尺寸，默认为`md`。
 
 ```vue
 <template>
-  <div class="button-size-demo">
+  <div class="demo-spacing">
     <d-button size="xs">Mini</d-button>
     <d-button size="sm">Small</d-button>
-    <d-button>Middle</d-button>
+    <d-button>Medium</d-button>
     <d-button size="lg">Large</d-button>
   </div>
 </template>
@@ -67,19 +67,19 @@
 
 :::
 
-### 禁用按钮
+### 禁用状态
 
 :::demo 通过`disabled`参数设置按钮禁用状态。
 
 ```vue
 <template>
-  <div class="button-size-demo">
+  <div class="demo-spacing">
     <d-button variant="solid">Solid Button</d-button>
     <d-button>Outline Button</d-button>
     <d-button variant="text">Text Button</d-button>
   </div>
-  <br />
-  <div class="button-size-demo">
+
+  <div class="demo-spacing">
     <d-button variant="solid" disabled>Solid Button</d-button>
     <d-button disabled>Outline Button</d-button>
     <d-button variant="text" disabled>Text Button</d-button>
@@ -95,15 +95,18 @@
 
 ```vue
 <template>
-  <d-button variant="solid" color="primary" :loading="showLoading" @click="handleClick">Click Me</d-button>
+  <d-button variant="solid" :loading="showLoading" @click="handleClick">Click Me</d-button>
 </template>
 <script>
 import { ref, onBeforeUnmount } from 'vue';
+
 export default {
   setup() {
     const showLoading = ref(false);
+
     const handleClick = () => {
       showLoading.value = true;
+
       setTimeout(() => {
         showLoading.value = false;
       }, 2000);
@@ -117,92 +120,51 @@ export default {
 
 :::
 
-### 图标
+### 图标按钮
 
 :::demo
 
 ```vue
 <template>
-  <div class="button-size-demo">
-    <d-button icon="add" variant="solid" color="primary">New</d-button>
+  <div class="demo-spacing">
+    <d-button icon="add" variant="solid">New</d-button>
     <d-button icon="filter">Filter</d-button>
-  </div>
-  <br />
-  <div class="button-size-demo">
-    <d-button icon="add" variant="solid" color="primary" disabled>New(disabled)</d-button>
-    <d-button icon="filter" disabled>Filter(disabled)</d-button>
-  </div>
-  <br />
-  <div class="button-size-demo">
     <d-button icon="connect" variant="text">Link</d-button>
-    <d-button icon="run" variant="text">Run</d-button>
-  </div>
-  <br />
-  <div class="button-size-demo">
-    <d-button icon="connect" variant="text" disabled>Link(disabled)</d-button>
-    <d-button icon="run" variant="text" disabled>Run(disabled)</d-button>
-  </div>
-  <br />
-  <div class="button-size-demo">
-    <d-button icon="add" variant="text" title="add"></d-button>
-    <d-button icon="delete" variant="text" title="delete"></d-button>
-  </div>
-  <br />
-  <div class="button-size-demo">
-    <d-button icon="add" variant="text" disabled title="add"></d-button>
-    <d-button icon="delete" variant="text" disabled title="delete"></d-button>
-  </div>
-  <br />
-  <div class="button-size-demo">
-    <d-button size="xs">
-      Click me
-      <span class="icon-chevron-down"></span>
-    </d-button>
-  </div>
-  <br />
-  <div class="button-size-demo">
-    <d-button variant="text">
-      Click me
-      <span class="icon-chevron-down"></span>
-    </d-button>
+    <d-button icon="delete" variant="text" title="Delete"></d-button>
   </div>
 </template>
-<style>
-.icon-chevron-down {
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  top: -0.1em;
-}
-</style>
 ```
 
 :::
 
-### d-button 参数
+### Button 参数
+
+| 参数     | 类型                              | 默认        | 说明                  | 跳转 Demo                 |
+| -------- | --------------------------------- | ----------- | --------------------- | ------------------------- |
+| variant  | [IButtonVariant](#ibuttonvariant) | 'outline'   | 可选，按钮形态        | [按钮形态](#按钮形态)     |
+| color    | [IButtonColor](#ibuttoncolor)     | 'secondary' | 可选，按钮主题        | [主题色](#主题色)         |
+| size     | [IButtonSize](#ibuttonsize)       | 'md'        | 可选，按钮尺寸        | [按钮尺寸](#按钮尺寸)     |
+| icon     | `string`                          | --          | 可选，自定义按钮图标  | [图标](#图标)             |
+| disabled | `boolean`                         | false       | 可选，是否禁用 button | [禁用状态](#禁用状态)     |
+| loading  | `boolean`                         | false       | 可选，设置加载中状态  | [加载中状态](#加载中状态) |
+
+### 类型
 
-| 参数     | 类型             | 默认        | 说明                  | 跳转 Demo                 |
-| -------- | ---------------- | ----------- | --------------------- | ------------------------- |
-| variant  | `IButtonVariant` | 'outline'   | 可选，按钮的形态      | [按钮类型](#按钮类型)     |
-| color    | `IButtonColor`   | 'secondary' | 可选，按钮主题        | [主题色](#主题色)         |
-| size     | `IButtonSize`    | 'md'        | 可选，按钮大小        | [按钮大小](#按钮大小)     |
-| icon     | `string`         | --          | 可选，自定义按钮图标  | [图标](#图标)             |
-| disabled | `boolean`        | false       | 可选，是否禁用 button | [禁用按钮](#禁用按钮)     |
-| loading  | `boolean`        | false       | 可选，设置加载中状态  | [加载中状态](#加载中状态) |
+<br>
 
-### IButtonVariant 类型
+#### IButtonVariant
 
 ```typescript
 type IButtonVariant = 'solid' | 'outline' | 'text';
 ```
 
-### IButtonSize 类型
+#### IButtonSize
 
 ```typescript
 type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
 ```
 
-### IButtonColor 类型
+#### IButtonColor
 
 ```typescript
 type IButtonColor = 'secondary' | 'primary' | 'danger';

From 535138c9bfd1e2d3381353804a122634b424ef66 Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Sat, 9 Apr 2022 14:05:01 +0800
Subject: [PATCH 2/2] =?UTF-8?q?docs(fullscreen):=20=E4=BC=98=E5=8C=96demo?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-theme/styles/demo-block.scss        |  4 +-
 .../.vitepress/devui-theme/styles/layout.scss | 23 +++--
 .../devui-vue/docs/components/button/index.md | 12 +--
 .../docs/components/fullscreen/index.md       | 83 ++++++++++++-------
 4 files changed, 79 insertions(+), 43 deletions(-)

diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/styles/demo-block.scss b/packages/devui-vue/docs/.vitepress/devui-theme/styles/demo-block.scss
index 666bb693f7..668d600a93 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/styles/demo-block.scss
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/styles/demo-block.scss
@@ -9,7 +9,7 @@
 
   .source {
     .demo-spacing {
-      & > .devui-btn {
+      & > * {
         margin: 0 8px 8px 0;
 
         &:last-child {
@@ -18,7 +18,7 @@
       }
 
       &:last-child {
-        & > .devui-btn {
+        & > * {
           margin-bottom: 0;
         }
       }
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/styles/layout.scss b/packages/devui-vue/docs/.vitepress/devui-theme/styles/layout.scss
index addaa060bc..6cbf7f148e 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/styles/layout.scss
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/styles/layout.scss
@@ -42,6 +42,10 @@ h5,
 h6 {
   margin: 0;
   line-height: 1.25;
+
+  &:focus {
+    outline: none;
+  }
 }
 
 h1,
@@ -88,7 +92,6 @@ h2 {
   padding-bottom: 0.3rem;
   line-height: 1.25;
   font-size: 1.65rem;
-  /* overflow-x: auto; */
 }
 
 h2 + h3 {
@@ -101,6 +104,7 @@ h3 {
 }
 
 h4 {
+  margin-top: 2rem;
   font-size: 1.15rem;
 }
 
@@ -195,7 +199,7 @@ blockquote {
   border-left: 0.2rem solid $devui-dividing-line;
   padding: 0.25rem 0 0.25rem 1rem;
   font-size: 1rem;
-  color: #999;
+  color: #999999;
 }
 
 blockquote > p {
@@ -269,22 +273,27 @@ $max-width: 1440px;
   }
 }
 
-[ui-theme=infinity-theme], [ui-theme=galaxy-theme] {
+[ui-theme=infinity-theme],
+[ui-theme=galaxy-theme] {
   .nav-bar {
     background-color: $devui-base-bg !important;
   }
 }
 
-[ui-theme=sweet-theme], [ui-theme=provence-theme], [ui-theme=deep-theme] {
+[ui-theme=sweet-theme],
+[ui-theme=provence-theme],
+[ui-theme=deep-theme] {
   .nav-bar {
     background-color: $devui-brand !important;
 
     a {
-      color: #fff !important;
+      color: #ffffff !important;
     }
 
-    svg, path, polygon {
-      fill: #fff !important;
+    svg,
+    path,
+    polygon {
+      fill: #ffffff !important;
     }
   }
 }
diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md
index e4ec4f0b13..fa46e14f85 100644
--- a/packages/devui-vue/docs/components/button/index.md
+++ b/packages/devui-vue/docs/components/button/index.md
@@ -2,11 +2,11 @@
 
 按钮用于开始一个即时操作。
 
-### 何时使用
+#### 何时使用
 
 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
 
-### 按钮形态
+### 形态
 
 :::demo 通过`variant`设置按钮形态，目前支持`solid`、`outline`、`text`三种形态，默认为`outline`。
 
@@ -50,7 +50,7 @@
 
 :::
 
-### 按钮尺寸
+### 尺寸
 
 :::demo 通过`size`设置按钮尺寸，支持`xs`、`sm`、`md`、`lg`四种类型的尺寸，默认为`md`。
 
@@ -141,10 +141,10 @@ export default {
 
 | 参数     | 类型                              | 默认        | 说明                  | 跳转 Demo                 |
 | -------- | --------------------------------- | ----------- | --------------------- | ------------------------- |
-| variant  | [IButtonVariant](#ibuttonvariant) | 'outline'   | 可选，按钮形态        | [按钮形态](#按钮形态)     |
+| variant  | [IButtonVariant](#ibuttonvariant) | 'outline'   | 可选，按钮形态        | [形态](#形态)     |
 | color    | [IButtonColor](#ibuttoncolor)     | 'secondary' | 可选，按钮主题        | [主题色](#主题色)         |
-| size     | [IButtonSize](#ibuttonsize)       | 'md'        | 可选，按钮尺寸        | [按钮尺寸](#按钮尺寸)     |
-| icon     | `string`                          | --          | 可选，自定义按钮图标  | [图标](#图标)             |
+| size     | [IButtonSize](#ibuttonsize)       | 'md'        | 可选，按钮尺寸        | [尺寸](#尺寸)     |
+| icon     | `string`                          | --          | 可选，自定义按钮图标  | [图标按钮](#图标按钮)             |
 | disabled | `boolean`                         | false       | 可选，是否禁用 button | [禁用状态](#禁用状态)     |
 | loading  | `boolean`                         | false       | 可选，设置加载中状态  | [加载中状态](#加载中状态) |
 
diff --git a/packages/devui-vue/docs/components/fullscreen/index.md b/packages/devui-vue/docs/components/fullscreen/index.md
index 756ea877de..7d79d5194a 100644
--- a/packages/devui-vue/docs/components/fullscreen/index.md
+++ b/packages/devui-vue/docs/components/fullscreen/index.md
@@ -2,20 +2,18 @@
 
 全屏组件。
 
-### 何时使用
+#### 何时使用
 
 当用户需要将某一区域进行全屏展示时。
 
-### 普通全屏
+### 基本用法
 
-充满当前浏览器窗口的普通全屏。
-
-:::demo
+:::demo 将需要全屏的容器包裹在`<d-fullscreen>`标签里面，通过`v-model`控制全屏状态，传入`true`则启动全屏，设置成`false`则退出全屏，也可以通过按下`ESC`快捷键推出全屏。本例还展示了自定义层级`z-index`的用法。
 
 ```vue
 <template>
-  <d-fullscreen v-model="isOpen" :zIndex="20">
-    <div>
+  <d-fullscreen v-model="isOpen" :z-index="20">
+    <div class="demo-fullscreen-container">
       <d-button @click="isOpen = !isOpen">{{ btnContent }}</d-button>
     </div>
   </d-fullscreen>
@@ -37,27 +35,36 @@ export default {
     });
 
     return {
-      btnContent,
       isOpen,
+      btnContent,
     };
   },
 };
 </script>
+<style>
+.demo-fullscreen-container {
+  margin: 8px;
+}
+</style>
 ```
 
 :::
 
-### 沉浸式全屏
+### 全屏模式
 
-充满整个显示器屏幕的沉浸式全屏。
-
-:::demo
+:::demo 通过`mode`设置全屏模式，默认为`normal`普通全屏，全屏之后容器将充满整个浏览器窗口，`mode`设置成`immersive`可以启用沉浸式全屏，让容器充满整个电脑屏幕。<br>不管是普通全屏还是沉浸式全屏，都支持按下快捷键`ESC`退出全屏。
 
 ```vue
 <template>
-  <d-fullscreen v-model="isOpen" mode="immersive">
-    <div>
-      <d-button @click="isOpen = !isOpen">{{ btnContent }}</d-button>
+  <d-fullscreen v-model="isOpenNormal" :z-index="20">
+  <div class="demo-fullscreen-container">
+      <d-button @click="isOpenNormal = !isOpenNormal">{{ btnContentNormal }}</d-button>
+    </div>
+  </d-fullscreen>
+  
+  <d-fullscreen v-model="isOpenImmersive" mode="immersive" :z-index="20">
+  <div class="demo-fullscreen-container">
+      <d-button @click="isOpenImmersive = !isOpenImmersive">{{ btnContentImmersive }}</d-button>
     </div>
   </d-fullscreen>
 </template>
@@ -66,20 +73,33 @@ import { ref, watch } from 'vue';
 
 export default {
   setup() {
-    const isOpen = ref(false);
-    const btnContent = ref('全屏');
+    const isOpenNormal = ref(false);
+    const btnContentNormal = ref('普通全屏');
 
-    watch(isOpen, (newVal) => {
+    watch(isOpenNormal, (newVal) => {
       if (newVal) {
-        btnContent.value = '退出全屏';
+        btnContentNormal.value = '退出全屏';
       } else {
-        btnContent.value = '全屏';
+        btnContentNormal.value = '普通全屏';
+      }
+    });
+
+    const isOpenImmersive = ref(false);
+    const btnContentImmersive = ref('沉浸式全屏');
+
+    watch(isOpenImmersive, (newVal) => {
+      if (newVal) {
+        btnContentImmersive.value = '退出全屏';
+      } else {
+        btnContentImmersive.value = '沉浸式全屏';
       }
     });
 
     return {
-      btnContent,
-      isOpen,
+      isOpenNormal,
+      btnContentNormal,
+      isOpenImmersive,
+      btnContentImmersive,
     };
   },
 };
@@ -88,10 +108,17 @@ export default {
 
 :::
 
-### 参数及 API
+### Fullscreen 参数
+
+|  参数   |          类型           |   默认   | 说明               | 跳转 Demo                 |
+| :----- | :--------------------- | :------ | :----------------- | :------------------------- |
+| v-model |        `boolean`        |  false   | 可选，是否启动全屏 | [基本用法](#基本用法) |
+|  mode   | `'normal' \| 'immersive'`  | 'normal' | 可选，设置全屏模式 | [全屏模式](#全屏模式) |
+| z-index |        `number`         |    10    | 可选，设置全屏层级 | [基本用法](#基本用法) |
+
+### Fullscreen 插槽
+
+| 插槽名  | 说明                     | 参数                |
+| :------ | :----------------------- | :------------------ |
+| default | 默认插槽，全屏容器   | -- |
 
-|  参数   |          类型           |   默认   | 说明               |
-| :-----: | :---------------------: | :------: | :----------------- |
-| v-model |        `Boolean`        |  false   | 可选，是否启动全屏 |
-|  mode   | `immersive` 或 `normal` | `normal` | 可选，设置全屏模式 |
-| z-index |        `Number`         |    10    | 可选，设置全屏层级 |