From 3e694331633f748f08670ed35cd1b37afc2b56e1 Mon Sep 17 00:00:00 2001
From: kagol <kagol@sina.com>
Date: Tue, 3 Aug 2021 21:01:26 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E7=BB=99=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=AF=BC=E8=88=AA=E5=A2=9E=E5=8A=A0=E5=B7=B2?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=9A=84=E6=A0=87=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   1 +
 devui/accordion/accordion-list.tsx            |   9 +-
 devui/accordion/accordion.scss                |  21 +-
 devui/avatar/avatar.scss                      |  12 +-
 devui/avatar/demo/avatar-demo.scss            |   4 +-
 devui/button/button.scss                      |   2 +-
 devui/panel/panel.scss                        | 305 +++++++++---------
 devui/shared/devui-codebox/devui-codebox.scss | 174 +++++-----
 devui/style/core/_animation.scss              |   2 +-
 devui/style/core/_cdk.scss                    |   1 -
 src/components/app-content.vue                |  16 +-
 src/components/component.route.ts             |  12 +
 12 files changed, 294 insertions(+), 265 deletions(-)

diff --git a/.gitignore b/.gitignore
index d451ff16..d424f6a8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ node_modules
 dist
 dist-ssr
 *.local
+package-lock.json
diff --git a/devui/accordion/accordion-list.tsx b/devui/accordion/accordion-list.tsx
index f6b5d91f..adec789b 100644
--- a/devui/accordion/accordion-list.tsx
+++ b/devui/accordion/accordion-list.tsx
@@ -2,7 +2,7 @@ import { defineComponent } from 'vue'
 import { AccordionMenuItem } from './accordion.type'
 
 export default defineComponent({
-  name: 'd-accordion-list',
+  name: 'DAccordionList',
   inheritAttrs: false,
   props: {
     data: Array as () => Array<AccordionMenuItem>,
@@ -14,11 +14,9 @@ export default defineComponent({
     innerListTemplate: Boolean,
   },
   setup(props, ctx) {
-    const { data, deepth, innerListTemplate } = props;
-
     return () => {
-      return (!innerListTemplate || deepth === 0) && <ul class="devui-accordion-list" {...ctx.attrs}>
-        { data.map(item => {
+      return (!props.innerListTemplate || props.deepth === 0) && <ul class="devui-accordion-list" {...ctx.attrs}>
+        { props.data.map(item => {
           return <li class="devui-accordion-item" key={item.title}>
             {
               // TODO 菜单类型 d-accordion-menu
@@ -39,6 +37,7 @@ export default defineComponent({
                         <router-link to={component.link}>
                           <div class="devui-accordion-splitter" style="left: 30px;"></div>
                           { component.title }
+                          { component.done && <span class="tag-done">已完成</span> }
                         </router-link>
                       </div>
                     </li>
diff --git a/devui/accordion/accordion.scss b/devui/accordion/accordion.scss
index 2bb5ed4a..dfe0519c 100644
--- a/devui/accordion/accordion.scss
+++ b/devui/accordion/accordion.scss
@@ -1,5 +1,6 @@
 @import '../style/mixins/index';
 @import '../style/theme/color';
+@import '../style/theme/font';
 @import '../style/theme/shadow';
 @import '../style/theme/corner';
 
@@ -246,8 +247,24 @@ d-accordion-item-routerlink {
 
 .devui-accordion-item > a {
   padding: 0 10px 0 20px;
-  color: var(--devui-text-weak,#575d6c);
+  color: var(--devui-text-weak, #575d6c);
   display: block;
   text-decoration: none;
   width: 100%;
-}
\ No newline at end of file
+}
+
+.devui-accordion-item-title .tag-done {
+  display: inline-block;
+  height: 18px;
+  min-height: 20px;
+  padding: 0 10px;
+  margin-left: 8px;
+  line-height: 18px;
+  color: #fa9841;
+  border: solid 1px #fa9841;
+  background: $devui-base-bg;
+  font-size: $devui-font-size;
+  border-radius: $devui-border-radius;
+  text-indent: 0;
+  cursor: default;
+}
diff --git a/devui/avatar/avatar.scss b/devui/avatar/avatar.scss
index ec6b07d3..a6fa8059 100644
--- a/devui/avatar/avatar.scss
+++ b/devui/avatar/avatar.scss
@@ -1,15 +1,15 @@
 @import '../style/theme/color';
 
 .devui-avatar-style {
-    display: inline-block;
-    text-align: center;
-    color: $devui-light-text;
+  display: inline-block;
+  text-align: center;
+  color: $devui-light-text;
 }
 
 .devui-avatar-background-0 {
-    background-color: #ff8b87;
+  background-color: #ff8b87;
 }
 
 .devui-avatar-background-1 {
-    background-color: #7693f5;
-}
\ No newline at end of file
+  background-color: #7693f5;
+}
diff --git a/devui/avatar/demo/avatar-demo.scss b/devui/avatar/demo/avatar-demo.scss
index 9e2fe235..f7df92cc 100644
--- a/devui/avatar/demo/avatar-demo.scss
+++ b/devui/avatar/demo/avatar-demo.scss
@@ -1,3 +1,3 @@
 .devui-avatar {
-    margin: 8px;
-}
\ No newline at end of file
+  margin: 8px;
+}
diff --git a/devui/button/button.scss b/devui/button/button.scss
index fa3055b3..54936b1d 100644
--- a/devui/button/button.scss
+++ b/devui/button/button.scss
@@ -387,4 +387,4 @@ $devui-btn-pseudo-config: (
 
 .clear-right-5 {
   margin-right: 5px;
-}
\ No newline at end of file
+}
diff --git a/devui/panel/panel.scss b/devui/panel/panel.scss
index 3705622f..1e69555c 100644
--- a/devui/panel/panel.scss
+++ b/devui/panel/panel.scss
@@ -1,159 +1,160 @@
 @import '../style/theme/color';
+
 .devui-panel {
-    line-height: 1.5;
-    background-color: $devui-base-bg;
+  line-height: 1.5;
+  background-color: $devui-base-bg;
+
+  .devui-panel-heading {
+    padding: 12px 20px;
+    color: $devui-text;
+
+    d-panel-header {
+      line-height: 1.5;
+    }
+  }
+
+  .devui-panel-body {
+    display: flex;
+    position: relative;
+    border-top: 1px solid $devui-dividing-line;
+
+    .d-panel-body {
+      line-height: 1.5;
+      padding: 15px;
+      background: $devui-base-bg;
+      flex: 1;
+    }
+
+    &.devui-panel-body-collapse {
+      &::before {
+        content: '';
+        width: 30px;
+        height: 100%;
+      }
+
+      .d-panel-body {
+        border-left: 2px solid $devui-dividing-line;
+      }
+    }
+  }
+
+  .devui-panel-footer {
+    padding: 10px 15px;
+    color: $devui-text;
+    background-color: $devui-area;
+
+    d-panel-footer {
+      line-height: 1.5;
+    }
+  }
+
+  &.devui-panel-default {
+    .devui-panel-heading,
+    .devui-panel-body {
+      background-color: $devui-default-bg;
+    }
+  }
+
+  &.devui-panel-primary {
+    .devui-panel-heading,
+    .devui-panel-body {
+      background-color: $devui-primary-bg;
+    }
+
+    .devui-panel-body-collapse {
+      .d-panel-body {
+        border-color: $devui-primary-line;
+      }
+    }
+  }
+
+  &.devui-panel-info {
+    .devui-panel-heading,
+    .devui-panel-body {
+      background-color: $devui-info-bg;
+    }
+
+    .devui-panel-body-collapse {
+      .d-panel-body {
+        border-color: $devui-info-line;
+      }
+    }
+  }
+
+  &.devui-panel-success {
+    .devui-panel-heading,
+    .devui-panel-body {
+      background-color: $devui-success-bg;
+    }
 
-    .devui-panel-heading {
-        padding: 12px 20px;
-        color: $devui-text;
+    .devui-panel-body-collapse {
+      .d-panel-body {
+        border-color: $devui-success-line;
+      }
+    }
+  }
+
+  &.devui-panel-warning {
+    .devui-panel-heading,
+    .devui-panel-body {
+      background-color: $devui-warning-bg;
+    }
 
-        d-panel-header {
-            line-height: 1.5;
-        }
+    .devui-panel-body-collapse {
+      .d-panel-body {
+        border-color: $devui-warning-line;
+      }
     }
+  }
 
+  &.devui-panel-danger {
+    .devui-panel-heading,
     .devui-panel-body {
-        display: flex;
-        position: relative;
-        border-top: 1px solid $devui-dividing-line;
-
-        .d-panel-body {
-            line-height: 1.5;
-            padding: 15px;
-            background: $devui-base-bg;
-            flex: 1;
-        }
-
-        &.devui-panel-body-collapse {
-            &::before {
-                content: '';
-                width: 30px;
-                height: 100%;
-            }
-
-            .d-panel-body {
-                border-left: 2px solid $devui-dividing-line;
-            }
-        }
-    }
-
-    .devui-panel-footer {
-        padding: 10px 15px;
-        color: $devui-text;
-        background-color: $devui-area;
-
-        d-panel-footer {
-            line-height: 1.5;
-        }
-    }
-
-    &.devui-panel-default {
-        .devui-panel-heading,
-        .devui-panel-body {
-            background-color: $devui-default-bg;
-        }
-    }
-
-    &.devui-panel-primary {
-        .devui-panel-heading,
-        .devui-panel-body {
-            background-color: $devui-primary-bg;
-        }
-
-        .devui-panel-body-collapse {
-            .d-panel-body {
-                border-color: $devui-primary-line;
-            }
-        }
-    }
-
-    &.devui-panel-info {
-        .devui-panel-heading,
-        .devui-panel-body {
-            background-color: $devui-info-bg;
-        }
-
-        .devui-panel-body-collapse {
-            .d-panel-body {
-                border-color: $devui-info-line;
-            }
-        }
-    }
-
-    &.devui-panel-success {
-        .devui-panel-heading,
-        .devui-panel-body {
-            background-color: $devui-success-bg;
-        }
-
-        .devui-panel-body-collapse {
-            .d-panel-body {
-                border-color: $devui-success-line;
-            }
-        }
-    }
-
-    &.devui-panel-warning {
-        .devui-panel-heading,
-        .devui-panel-body {
-            background-color: $devui-warning-bg;
-        }
-
-        .devui-panel-body-collapse {
-            .d-panel-body {
-                border-color: $devui-warning-line;
-            }
-        }
-    }
-
-    &.devui-panel-danger {
-        .devui-panel-heading,
-        .devui-panel-body {
-            background-color: $devui-danger-bg;
-        }
-
-        .devui-panel-body-collapse {
-            .d-panel-body {
-                border-color: $devui-danger-line;
-            }
-        }
-    }
-
-    .devui-panel-leave-active {
-        transition: all .3s ease-in-out;
-        animation: panelUpOut .3s ease-in-out;
-        animation-fill-mode: both;
-    }
-    
-    .devui-panel-enter-active {
-        transition: all .3s ease-in-out;
-        animation: panelUpIn .3s ease-in-out;
-        animation-fill-mode: both;
-    }
-
-    @keyframes panelUpOut {
-        0% {
-            transform: scaleY(1);
-            transform-origin: 0% 0%;
-            opacity: 1;
-        }
-        100% {
-            transform: scaleY(0);
-            transform-origin: 0% 0%;
-            opacity: 0;
-        }
-    }
-
-    @keyframes panelUpIn {
-        0% {
-            transform: scaleY(0);
-            transform-origin: 0% 0%;
-            opacity: 0;
-        }
-        100% {
-            transform: scaleY(1);
-            transform-origin: 0% 0%;
-            opacity: 1;
-        }
-    }
-}
\ No newline at end of file
+      background-color: $devui-danger-bg;
+    }
+
+    .devui-panel-body-collapse {
+      .d-panel-body {
+        border-color: $devui-danger-line;
+      }
+    }
+  }
+
+  .devui-panel-leave-active {
+    transition: all 0.3s ease-in-out;
+    animation: panelUpOut 0.3s ease-in-out;
+    animation-fill-mode: both;
+  }
+
+  .devui-panel-enter-active {
+    transition: all 0.3s ease-in-out;
+    animation: panelUpIn 0.3s ease-in-out;
+    animation-fill-mode: both;
+  }
+  @keyframes panelUpOut {
+    0% {
+      transform: scaleY(1);
+      transform-origin: 0% 0%;
+      opacity: 1;
+    }
+
+    100% {
+      transform: scaleY(0);
+      transform-origin: 0% 0%;
+      opacity: 0;
+    }
+  }
+  @keyframes panelUpIn {
+    0% {
+      transform: scaleY(0);
+      transform-origin: 0% 0%;
+      opacity: 0;
+    }
+
+    100% {
+      transform: scaleY(1);
+      transform-origin: 0% 0%;
+      opacity: 1;
+    }
+  }
+}
diff --git a/devui/shared/devui-codebox/devui-codebox.scss b/devui/shared/devui-codebox/devui-codebox.scss
index 4e255f72..757b8db5 100644
--- a/devui/shared/devui-codebox/devui-codebox.scss
+++ b/devui/shared/devui-codebox/devui-codebox.scss
@@ -2,150 +2,150 @@
 @import '../../style/core/font';
 
 .code-box {
-    border: 1px solid $devui-line;
-    border-radius: 4px;
-    display: inline-block;
-    width: 100%;
-    position: relative;
-    margin: 4px 0;
-    transition: all 0.2s;
+  border: 1px solid $devui-line;
+  border-radius: 4px;
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  margin: 4px 0;
+  transition: all 0.2s;
 }
 
 .devui-code-copy {
-    fill: $devui-text;
+  fill: $devui-text;
 }
 
 .code-box-demo {
-    border-bottom: 1px solid $devui-dividing-line;
-    padding: 42px 20px 50px;
+  border-bottom: 1px solid $devui-dividing-line;
+  padding: 42px 20px 50px;
 }
 
 .code-box-meta.markdown {
-    position: relative;
-    padding: 10px 40px;
-    border-radius: 0 0 4px 4px;
-    transition: background-color 0.4s;
-    width: 100%;
-    font-size: $devui-font-size;
-    margin-bottom: 0;
-    overflow-x: unset;
+  position: relative;
+  padding: 10px 40px;
+  border-radius: 0 0 4px 4px;
+  transition: background-color 0.4s;
+  width: 100%;
+  font-size: $devui-font-size;
+  margin-bottom: 0;
+  overflow-x: unset;
 }
 
 .code-box.expand .code-box-meta {
-    border-radius: 0;
-    border-bottom: 1px dashed $devui-dividing-line;
+  border-radius: 0;
+  border-bottom: 1px dashed $devui-dividing-line;
 }
 
 .code-box-title {
-    position: absolute;
-    top: -14px;
-    padding: 1px 8px;
-    color: #777777;
-    border-radius: 4px 4px 0 0;
-    background: $devui-base-bg;
-    transition: background-color 0.4s;
+  position: absolute;
+  top: -14px;
+  padding: 1px 8px;
+  color: #777777;
+  border-radius: 4px 4px 0 0;
+  background: $devui-base-bg;
+  transition: background-color 0.4s;
 }
 
 .code-box-title > a {
-    color: rgba(0, 0, 0, 0.65);
-    font-size: $devui-font-size-card-title;
-    font-weight: 500;
-    text-decoration: none;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: $devui-font-size-card-title;
+  font-weight: 500;
+  text-decoration: none;
 }
 
 .code-box .collapse {
-    display: block; /* .collapse conflick with bootstrap */
-    position: absolute;
-    left: 15px;
-    // background: $devui-block;
-    top: -9px;
-    cursor: pointer;
-    width: 16px;
-    height: 16px;
-    line-height: 16px;
-    opacity: 0.55;
-    text-align: center;
-    transition: all 0.3s;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-
-    & > svg > path {
-        fill: $devui-text;
-    }
+  display: block; /* .collapse conflick with bootstrap */
+  position: absolute;
+  left: 15px;
+  // background: $devui-block;
+  top: -9px;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  opacity: 0.55;
+  text-align: center;
+  transition: all 0.3s;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  & > svg > path {
+    fill: $devui-text;
+  }
 }
 
 .dark-mode .code-box .collapse {
-    opacity: 1;
+  opacity: 1;
 }
 
 .code-box .highlight-wrapper {
-    display: none;
-    overflow: auto;
-    border-radius: 0 0 4px 4px;
+  display: none;
+  overflow: auto;
+  border-radius: 0 0 4px 4px;
 }
 
 .code-box .highlight-wrapper-expand {
-    display: block;
+  display: block;
 }
 
 .code-box .highlight {
-    padding: 5px;
-    position: relative;
+  padding: 5px;
+  position: relative;
 }
 
 .code-box-actions {
-    position: absolute;
-    top: 10px;
-    right: 12px;
-    text-align: right;
-    cursor: pointer;
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  text-align: right;
+  cursor: pointer;
 }
 
 .code-box-code-copy:hover {
-    color: #108ee9;
-    -webkit-transform: scale(1.2);
-    transform: scale(1.2);
+  color: #108ee9;
+  -webkit-transform: scale(1.2);
+  transform: scale(1.2);
 }
 
 .code-box-code-copy {
-    font-size: $devui-font-size-card-title;
-    cursor: pointer;
-    color: #222222;
-    transition: all 0.24s;
-    background: $devui-base-bg;
-    width: 20px;
-    height: 20px;
-    line-height: 20px;
-    text-align: center;
-    border-radius: 20px;
-    opacity: 0;
+  font-size: $devui-font-size-card-title;
+  cursor: pointer;
+  color: #222222;
+  transition: all 0.24s;
+  background: $devui-base-bg;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  border-radius: 20px;
+  opacity: 0;
 }
 
 .code-box .highlight pre {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 .code-box pre {
-    margin: 0;
-    width: auto;
-    border: none;
-    margin-top: 10px;
+  margin: 0;
+  width: auto;
+  border: none;
+  margin-top: 10px;
 }
 
 .code-box pre code {
-    border: none;
+  border: none;
 }
 
 .highlight-wrapper:hover .code-box-code-copy,
 .highlight-wrapper:hover .code-box-codepen,
 .highlight-wrapper:hover .code-box-riddle {
-    opacity: 0.66;
+  opacity: 0.66;
 }
 
 .code-box.expand .collapse {
-    -webkit-transform: rotate(90deg);
-    transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
 }
diff --git a/devui/style/core/_animation.scss b/devui/style/core/_animation.scss
index 0ea1756e..0dda3d1d 100644
--- a/devui/style/core/_animation.scss
+++ b/devui/style/core/_animation.scss
@@ -1 +1 @@
-@import '../../style/theme/animation'
\ No newline at end of file
+@import '../../style/theme/animation'
diff --git a/devui/style/core/_cdk.scss b/devui/style/core/_cdk.scss
index 9876b499..773f9abc 100755
--- a/devui/style/core/_cdk.scss
+++ b/devui/style/core/_cdk.scss
@@ -1,5 +1,4 @@
 // @import '~@angular/cdk/overlay-prebuilt';
-
 .cdk-overlay-container {
   z-index: 1051; // 比modal z-index:1050;高
 }
diff --git a/src/components/app-content.vue b/src/components/app-content.vue
index f23b2777..e75bdc04 100644
--- a/src/components/app-content.vue
+++ b/src/components/app-content.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="wrapper">
     <div id="menuLink" class="menu-link">
-      <span></span>
+      <span />
     </div>
     <div class="devui-components-search">
       <!-- TODO: 搜索框 -->
@@ -12,8 +12,7 @@
           <a href="/get-start">快速开始</a>
         </li>
         <li class="devui-menu-item">
-          <a href="/color" style="position: relative"
-            >颜色变量
+          <a href="/color" style="position: relative">颜色变量
             <sup class="devui-beta-label">Beta</sup>
           </a>
         </li>
@@ -23,13 +22,13 @@
       </ul>
       <nav class="side-nav">
         <!-- TODO: 左侧组件导航 d-accordion -->
-        <d-accordion :data="componentsData" :linkType="'routerLink'"></d-accordion>
+        <d-accordion :data="componentsData" :link-type="'routerLink'" />
       </nav>
     </div>
     <div class="doc-viewer-container">
       <!-- TODO: 文档主体内容 -->
       <!-- <app-demo-cell></app-demo-cell> -->
-      <router-view :key="key"></router-view>
+      <router-view :key="key" />
     </div>
   </div>
 </template>
@@ -37,13 +36,13 @@
 <script lang="ts">
 import { groupBy, map } from 'lodash-es'
 import { routesConfig } from './component.route'
-import AppDemoCell from './app-demo-cell.vue'
+// import AppDemoCell from './app-demo-cell.vue'
 import Accordion from '../../devui/accordion/accordion'
 
 export default {
-  name: 'app-content',
+  name: 'AppContent',
   components: {
-    AppDemoCell,
+    // AppDemoCell,
     'd-accordion': Accordion
   },
   data(): any {
@@ -79,6 +78,7 @@ export default {
               return {
                 title: item.meta.name + ' ' + item.meta.cnName,
                 link: '/components/' + item.path + '/demo',
+                ...item.meta,
               };
             } else {
               return {};
diff --git a/src/components/component.route.ts b/src/components/component.route.ts
index 4b10142a..3aa611a4 100755
--- a/src/components/component.route.ts
+++ b/src/components/component.route.ts
@@ -97,6 +97,7 @@ export const routesConfig = [
       enType: 'Navigation',
       name: 'Accordion',
       cnName: '手风琴',
+      done: true,
     },
   },
   {
@@ -108,6 +109,7 @@ export const routesConfig = [
       enType: 'Feedback',
       name: 'Alert',
       cnName: '警告',
+      done: true,
     },
   },
   {
@@ -141,6 +143,7 @@ export const routesConfig = [
       enType: 'Data Display',
       name: 'Avatar',
       cnName: '头像',
+      done: true,
     },
   },
   {
@@ -183,6 +186,7 @@ export const routesConfig = [
     meta: {
       name: 'Button',
       cnName: '按钮',
+      done: true,
     },
   },
   {
@@ -205,6 +209,7 @@ export const routesConfig = [
       enType: 'Data Display',
       name: 'Card',
       cnName: '卡片',
+      done: true,
     },
   },
   {
@@ -227,6 +232,7 @@ export const routesConfig = [
       enType: 'Data Entry',
       name: 'CheckBox',
       cnName: '复选框',
+      done: true,
     },
   },
   {
@@ -384,6 +390,7 @@ export const routesConfig = [
     meta: {
       name: 'Panel',
       cnName: '面板',
+      done: true,
     },
   },
   {
@@ -428,6 +435,7 @@ export const routesConfig = [
       enType: 'Data Entry',
       name: 'Radio',
       cnName: '单选框',
+      done: true,
     },
   },
   {
@@ -499,6 +507,7 @@ export const routesConfig = [
       enType: 'Navigation',
       name: 'Tabs',
       cnName: '选项卡切换',
+      done: true,
     },
   },
   {
@@ -521,6 +530,7 @@ export const routesConfig = [
       enType: 'Data Entry',
       name: 'TagsInput',
       cnName: '标签输入',
+      done: true,
     },
   },
   {
@@ -578,6 +588,7 @@ export const routesConfig = [
       enType: 'Data Entry',
       name: 'Toggle',
       cnName: '开关',
+      done: true,
     },
   },
   {
@@ -677,6 +688,7 @@ export const routesConfig = [
       enType: 'Data Entry',
       name: 'TextInput',
       cnName: '文本框',
+      done: true,
     },
   },
   {
-- 
Gitee


From 4bd1054497c7057a8077788526db71f970b7db81 Mon Sep 17 00:00:00 2001
From: kagol <kagol@sina.com>
Date: Tue, 3 Aug 2021 21:42:28 +0800
Subject: [PATCH 2/2] refactor: Toggle -> Switch

---
 README.md                                     |  2 +-
 .../__tests__/switch.spec.ts}                 | 38 +++++++-------
 devui/{toggle => switch}/demo/demo-basic.tsx  | 22 ++++----
 devui/{toggle => switch}/demo/demo-custom.tsx |  8 +--
 .../demo/switch-demo.tsx}                     |  2 +-
 .../demo/switch.route.ts}                     |  4 +-
 devui/{toggle => switch}/doc/api-cn.md        | 10 ++--
 devui/{toggle => switch}/doc/api-en.md        | 10 ++--
 .../toggle.scss => switch/src/switch.scss}    | 21 ++++----
 .../src/toggle.tsx => switch/src/switch.tsx}  | 16 +++---
 devui/vue-devui.ts                            |  6 +--
 docs/i18n/zh-cn.json                          |  6 +--
 scripts/const.js                              |  2 +-
 src/app.vue                                   | 52 ++++++++++---------
 src/components/component.route.ts             |  8 +--
 15 files changed, 105 insertions(+), 102 deletions(-)
 rename devui/{toggle/__tests__/toggle.spec.ts => switch/__tests__/switch.spec.ts} (69%)
 rename devui/{toggle => switch}/demo/demo-basic.tsx (46%)
 rename devui/{toggle => switch}/demo/demo-custom.tsx (81%)
 rename devui/{toggle/demo/toggle-demo.tsx => switch/demo/switch-demo.tsx} (96%)
 rename devui/{toggle/demo/toggle.route.ts => switch/demo/switch.route.ts} (76%)
 rename devui/{toggle => switch}/doc/api-cn.md (94%)
 rename devui/{toggle => switch}/doc/api-en.md (92%)
 rename devui/{toggle/src/toggle.scss => switch/src/switch.scss} (88%)
 rename devui/{toggle/src/toggle.tsx => switch/src/switch.tsx} (88%)

diff --git a/README.md b/README.md
index 6c10bcaf..22a9eb78 100644
--- a/README.md
+++ b/README.md
@@ -69,7 +69,7 @@ npm run build
 - Jest 单元测试环境搭建
 - Radio
 - CheckBox
-- Toggle
+- Switch
 - TagsInput
 - TextInput
 
diff --git a/devui/toggle/__tests__/toggle.spec.ts b/devui/switch/__tests__/switch.spec.ts
similarity index 69%
rename from devui/toggle/__tests__/toggle.spec.ts
rename to devui/switch/__tests__/switch.spec.ts
index d6eed6b9..dd9f3358 100644
--- a/devui/toggle/__tests__/toggle.spec.ts
+++ b/devui/switch/__tests__/switch.spec.ts
@@ -1,14 +1,14 @@
 import { mount } from '@vue/test-utils';
 import { ref, nextTick } from 'vue';
-import DToggle from '../src/toggle';
+import DSwitch from '../src/switch';
 
-describe('d-toggle', () => {
-  it('toggle render work', async () => {
+describe('d-switch', () => {
+  it('switch render work', async () => {
     const checked = ref(false);
     const wrapper = mount({
-      components: { DToggle },
+      components: { DSwitch },
       template: `
-        <d-toggle v-model:checked="checked"></d-toggle>
+        <d-switch v-model:checked="checked"></d-switch>
       `,
       setup () {
         return {
@@ -17,7 +17,7 @@ describe('d-toggle', () => {
       }
     });
 
-    expect(wrapper.classes()).toContain('devui-toggle');
+    expect(wrapper.classes()).toContain('devui-switch');
     expect(wrapper.classes()).not.toContain('devui-checked');
 
     checked.value = true;
@@ -26,9 +26,9 @@ describe('d-toggle', () => {
     expect(wrapper.classes()).toContain('devui-checked');
   });
 
-  it('toggle disabled work', async () => {
+  it('switch disabled work', async () => {
     const onChange = jest.fn();
-    const wrapper = mount(DToggle, {
+    const wrapper = mount(DSwitch, {
       props: {
         disabled: true,
         onChange
@@ -49,26 +49,26 @@ describe('d-toggle', () => {
     expect(onChange).toBeCalledTimes(1);
   });
 
-  it('toggle size work', async () => {
-    const wrapper = mount(DToggle, {
+  it('switch size work', async () => {
+    const wrapper = mount(DSwitch, {
       props: {
         size: 'sm'
       }
     });
 
-    expect(wrapper.classes()).toContain('devui-toggle-sm');
+    expect(wrapper.classes()).toContain('devui-switch-sm');
 
     await wrapper.setProps({
       size: 'lg'
     });
-    expect(wrapper.classes()).not.toContain('devui-toggle-sm');
-    expect(wrapper.classes()).toContain('devui-toggle-lg');
+    expect(wrapper.classes()).not.toContain('devui-switch-sm');
+    expect(wrapper.classes()).toContain('devui-switch-lg');
   });
 
-  it('toggle beforeChange work', async () => {
+  it('switch beforeChange work', async () => {
     const beforeChange = jest.fn(() => false);
     const onChange = jest.fn();
-    const wrapper = mount(DToggle, {
+    const wrapper = mount(DSwitch, {
       props: {
         beforeChange,
         onChange
@@ -85,15 +85,15 @@ describe('d-toggle', () => {
     expect(onChange).toBeCalledTimes(1);
   });
 
-  it('toggle slot work', async () => {
+  it('switch slot work', async () => {
     const isChecked = ref(false);
     const wrapper = mount({
-      components: { DToggle },
+      components: { DSwitch },
       template: `
-        <d-toggle :checked="isChecked">
+        <d-switch :checked="isChecked">
           <template v-slot:checkedContent>开</template>
           <template v-slot:uncheckedContent>关</template>
-        </d-toggle>
+        </d-switch>
       `,
       setup () {
         return {
diff --git a/devui/toggle/demo/demo-basic.tsx b/devui/switch/demo/demo-basic.tsx
similarity index 46%
rename from devui/toggle/demo/demo-basic.tsx
rename to devui/switch/demo/demo-basic.tsx
index bcb39d71..678a10e2 100644
--- a/devui/toggle/demo/demo-basic.tsx
+++ b/devui/switch/demo/demo-basic.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, ref } from 'vue';
-import DToggle from '../src/toggle';
+import DSwitch from '../src/switch';
 
 export default defineComponent({
   name: 'DemoBasic',
@@ -16,19 +16,19 @@ export default defineComponent({
 
     return () => {
       return (<div>
-        <h6>中杯拿铁</h6>
-        <DToggle size="sm" checked={checked1.value} {...{'onUpdate:checked': doUpdate1}}></DToggle>
+        <h6>Small</h6>
+        <DSwitch size="sm" checked={checked1.value} {...{'onUpdate:checked': doUpdate1}}></DSwitch>
 
-        <h6>大杯拿铁</h6>
-        <DToggle checked={checked2.value} {...{'onUpdate:checked': doUpdate2}}></DToggle>
-        <DToggle checked={checked3.value} {...{'onUpdate:checked': doUpdate3}}></DToggle>
+        <h6>Middle</h6>
+        <DSwitch checked={checked2.value} {...{'onUpdate:checked': doUpdate2}}></DSwitch>
+        <DSwitch checked={checked3.value} {...{'onUpdate:checked': doUpdate3}}></DSwitch>
 
-        <h6>特大杯拿铁</h6>
-        <DToggle size="lg" checked={checked4.value} {...{'onUpdate:checked': doUpdate4}}></DToggle>
+        <h6>Large</h6>
+        <DSwitch size="lg" checked={checked4.value} {...{'onUpdate:checked': doUpdate4}}></DSwitch>
 
-        <h6>别这样</h6>
-        <DToggle disabled={true}></DToggle>
-        <DToggle disabled={true} checked={true}></DToggle>
+        <h6>disabled</h6>
+        <DSwitch disabled={true}></DSwitch>
+        <DSwitch disabled={true} checked={true}></DSwitch>
       </div>);
     };
   }
diff --git a/devui/toggle/demo/demo-custom.tsx b/devui/switch/demo/demo-custom.tsx
similarity index 81%
rename from devui/toggle/demo/demo-custom.tsx
rename to devui/switch/demo/demo-custom.tsx
index f6bd92b7..d704a592 100644
--- a/devui/toggle/demo/demo-custom.tsx
+++ b/devui/switch/demo/demo-custom.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, ref } from 'vue';
-import DToggle from '../src/toggle';
+import DSwitch from '../src/switch';
 
 export default defineComponent({
   name: 'DemoCustom',
@@ -26,16 +26,16 @@ export default defineComponent({
 
     return (
       <div>
-        <DToggle color="#0f0" checked={checked} {...{'onUpdate:checked': doUpdate}} size="lg"></DToggle>
+        <DSwitch color="#fecc55" checked={checked} {...{'onUpdate:checked': doUpdate}} size="lg"></DSwitch>
         <div style="margin-bottom: 10px;"></div>
-        <DToggle
+        <DSwitch
           checked={checked2}
           {...{'onUpdate:checked': doUpdate2}}
           v-slots={{
             checkedContent: () => '开',
             uncheckedContent: () => '关'
           }}>
-        </DToggle>
+        </DSwitch>
       </div>
     );
   }
diff --git a/devui/toggle/demo/toggle-demo.tsx b/devui/switch/demo/switch-demo.tsx
similarity index 96%
rename from devui/toggle/demo/toggle-demo.tsx
rename to devui/switch/demo/switch-demo.tsx
index a3cec733..8704c9a3 100644
--- a/devui/toggle/demo/toggle-demo.tsx
+++ b/devui/switch/demo/switch-demo.tsx
@@ -6,7 +6,7 @@ import DemoCustom from './demo-custom';
 import DemoCustomCode from './demo-custom?raw';
 
 export default defineComponent({
-  name: 'ToggleDemo',
+  name: 'SwitchDemo',
   render () {
     return useDemo([
       {
diff --git a/devui/toggle/demo/toggle.route.ts b/devui/switch/demo/switch.route.ts
similarity index 76%
rename from devui/toggle/demo/toggle.route.ts
rename to devui/switch/demo/switch.route.ts
index 883b8692..372b1fac 100644
--- a/devui/toggle/demo/toggle.route.ts
+++ b/devui/switch/demo/switch.route.ts
@@ -1,11 +1,11 @@
-import ToggleDemoComponent from './toggle-demo'
+import SwitchDemoComponent from './switch-demo'
 import DevUIApiComponent from '../../shared/devui-api/devui-api'
 
 import ApiCn from '../doc/api-cn.md'
 import ApiEn from '../doc/api-en.md'
 const routes = [
   { path: '',  redirectTo: 'demo' },
-  { path: 'demo', component: ToggleDemoComponent},
+  { path: 'demo', component: SwitchDemoComponent},
   { path: 'api', component: DevUIApiComponent, meta: {
     'zh-cn': ApiCn,
     'en-us': ApiEn
diff --git a/devui/toggle/doc/api-cn.md b/devui/switch/doc/api-cn.md
similarity index 94%
rename from devui/toggle/doc/api-cn.md
rename to devui/switch/doc/api-cn.md
index 418e0d24..e8d59f6a 100644
--- a/devui/toggle/doc/api-cn.md
+++ b/devui/switch/doc/api-cn.md
@@ -1,16 +1,16 @@
 # 如何使用
 在module中引入：
 ```ts
-import { ToggleModule } from 'ng-devui/toggle';
+import { SwitchModule } from 'ng-devui/switch';
 ```
 
 在页面中使用：
 ```html
-<d-toggle></d-toggle>
+<d-switch></d-switch>
 ```
-# Toggle
+# Switch
 
-## d-toggle 参数
+## d-switch 参数
 
 |     参数     |              类型               | 默认  | 说明                                                                        | 跳转 Demo                                   |
 | :----------: | :-----------------------------: | :---: | :-------------------------------------------------------------------------- | ------------------------------------------- |
@@ -21,7 +21,7 @@ import { ToggleModule } from 'ng-devui/toggle';
 |   disabled   |            `boolean`            | false | 可选，是否禁用开关                                                          | [基本用法](demo#basic-usage) |
 | beforeChange | `Function\|Promise\|()=> Observable<boolean>` |  --   | 可选，开关变化前的回调函数,返回 boolean 类型，返回 false 可以阻止开关的变化 | [双向绑定](demo#two-binding) |
 
-## d-toggle 事件
+## d-switch 事件
 
 |  事件  |          类型           | 说明                                  | 跳转 Demo                                   |
 | :----: | :---------------------: | :------------------------------------ | ------------------------------------------- |
diff --git a/devui/toggle/doc/api-en.md b/devui/switch/doc/api-en.md
similarity index 92%
rename from devui/toggle/doc/api-en.md
rename to devui/switch/doc/api-en.md
index 14ee556c..510852bb 100644
--- a/devui/toggle/doc/api-en.md
+++ b/devui/switch/doc/api-en.md
@@ -1,16 +1,16 @@
 # How to use
 Import into module:
 ```ts
-import { ToggleModule } from 'ng-devui/toggle';
+import { SwitchModule } from 'ng-devui/switch';
 ```
 
 In the page:
 ```html
-<d-toggle></d-toggle>
+<d-switch></d-switch>
 ```
-# Toggle
+# Switch
 
-### d-toggle parameter
+### d-switch parameter
 
 | Parameter | Type | Default | Description | Jump to Demo |
 | :----------: | :-----------------------------: | :---: | :-------------------------------------------------------------------------- | ------------------------------------------- |
@@ -21,7 +21,7 @@ In the page:
 | disabled | `boolean` | false | Optional. Indicating whether to disable the function. | [Basic Usage](demo#basic-usage) |
 | beforeChange | `Function\|Promise\|()=> Observable<boolean>` | -- |Optional. Callback function before a switch is changed. The return value is of the boolean type. If false is returned, the switch is not changed. | [Two-way Binding](demo#two-binding) |
 
-### d-toggle event
+### d-switch event
 
 | Event | Type | Description | Jump to Demo |
 | :----: | :---------------------: | :------------------------------------ | ------------------------------------------- |
diff --git a/devui/toggle/src/toggle.scss b/devui/switch/src/switch.scss
similarity index 88%
rename from devui/toggle/src/toggle.scss
rename to devui/switch/src/switch.scss
index 14212c08..0d3511f0 100644
--- a/devui/toggle/src/toggle.scss
+++ b/devui/switch/src/switch.scss
@@ -8,7 +8,7 @@
   vertical-align: middle;
 }
 
-.devui-toggle {
+.devui-switch {
   width: 36px;
   height: 18px;
   border-radius: (20px/2);
@@ -36,21 +36,22 @@
     border-color: $devui-brand-active;
   }
 
-  .devui-toggle-inner-wrapper {
+  .devui-switch-inner-wrapper {
     display: inline-block;
     width: 100%;
     height: 100%;
     padding-left: 16px;
     font-size: $devui-font-size;
+    color: $devui-global-bg;
 
-    .devui-toggle-inner {
+    .devui-switch-inner {
       width: 100%;
       height: 100%;
       text-align: center;
     }
   }
 
-  &.devui-checked .devui-toggle-inner-wrapper {
+  &.devui-checked .devui-switch-inner-wrapper {
     padding-left: unset;
     padding-right: 16px;
   }
@@ -70,17 +71,17 @@
     left: 19px;
   }
 
-  &.devui-toggle-lg {
+  &.devui-switch-lg {
     width: 58px;
     height: 30px;
     border-radius: (32px/2);
 
-    .devui-toggle-inner-wrapper {
+    .devui-switch-inner-wrapper {
       padding-left: 28px;
       font-size: $devui-font-size-modal-title;
     }
 
-    &.devui-checked .devui-toggle-inner-wrapper {
+    &.devui-checked .devui-switch-inner-wrapper {
       padding-left: unset;
       padding-right: 28px;
     }
@@ -98,17 +99,17 @@
     }
   }
 
-  &.devui-toggle-sm {
+  &.devui-switch-sm {
     width: 30px;
     height: 14px;
     border-radius: (16px/2);
 
-    .devui-toggle-inner-wrapper {
+    .devui-switch-inner-wrapper {
       padding-left: 12px;
       font-size: $devui-font-size;
     }
 
-    &.devui-checked .devui-toggle-inner-wrapper {
+    &.devui-checked .devui-switch-inner-wrapper {
       padding-left: unset;
       padding-right: 12px;
     }
diff --git a/devui/toggle/src/toggle.tsx b/devui/switch/src/switch.tsx
similarity index 88%
rename from devui/toggle/src/toggle.tsx
rename to devui/switch/src/switch.tsx
index b7a3998a..5581d4a9 100644
--- a/devui/toggle/src/toggle.tsx
+++ b/devui/switch/src/switch.tsx
@@ -1,7 +1,7 @@
 import { defineComponent, PropType } from 'vue';
-import './toggle.scss';
+import './switch.scss';
 
-const toggleProps = {
+const switchProps = {
   size: {
     type: String as PropType<'sm' | '' | 'lg'>,
     default: ''
@@ -33,8 +33,8 @@ const toggleProps = {
 } as const;
 
 export default defineComponent({
-  name: 'DToggle',
-  props: toggleProps,
+  name: 'DSwitch',
+  props: switchProps,
   emits: ['change', 'update:checked'],
   setup(props, ctx) {
     const canChange = () => {
@@ -73,8 +73,8 @@ export default defineComponent({
     } = this;
 
     const outerCls = {
-      'devui-toggle': true,
-      [`devui-toggle-${size}`]: size !== '',
+      'devui-switch': true,
+      [`devui-switch-${size}`]: size !== '',
       'devui-checked': checked,
       'devui-disabled': disabled
     };
@@ -85,8 +85,8 @@ export default defineComponent({
 
     return (
       <span class={outerCls} style={outerStyle} onClick={toggle}>
-        <span class="devui-toggle-inner-wrapper">
-            <div class="devui-toggle-inner">
+        <span class="devui-switch-inner-wrapper">
+            <div class="devui-switch-inner">
               { checked ? this.$slots.checkedContent?.() : this.$slots.uncheckedContent?.() }
             </div>
         </span>
diff --git a/devui/vue-devui.ts b/devui/vue-devui.ts
index 3ac018e8..adac65b4 100644
--- a/devui/vue-devui.ts
+++ b/devui/vue-devui.ts
@@ -6,11 +6,11 @@ import Checkbox from './checkbox/src/checkbox';
 import Panel from './panel/panel';
 import Radio from './radio/src/radio';
 import Tabs from './tabs/tabs';
-import Toggle from './toggle/src/toggle';
+import Switch from './switch/src/switch';
 
 function install(app: App) {
   const packages = [
-    Alert, Button, Checkbox, Panel, Radio, Tabs, Toggle,
+    Alert, Button, Checkbox, Panel, Radio, Tabs, Switch,
   ];
   packages.forEach((item:any) => {
     if (item.install) {
@@ -22,7 +22,7 @@ function install(app: App) {
 }
 
 export {
-  Alert, Button, Checkbox, Panel, Radio, Tabs, Toggle,
+  Alert, Button, Checkbox, Panel, Radio, Tabs, Switch,
 };
 
 export default { install, version: '0.0.1' };
diff --git a/docs/i18n/zh-cn.json b/docs/i18n/zh-cn.json
index 6c613cca..06db7d86 100644
--- a/docs/i18n/zh-cn.json
+++ b/docs/i18n/zh-cn.json
@@ -2661,10 +2661,10 @@
         "async-usage": "异步获取数据"
       }
     },
-    "toggle": {
-      "name": "Toggle 开关",
+    "switch": {
+      "name": "Switch 开关",
       "type": "数据录入",
-      "path": "toggle",
+      "path": "switch",
       "description": "开/关切换组件。",
       "tmw": "当两种状态需要来回切换控制时，比如启用/禁用。",
       "basicDemo": {
diff --git a/scripts/const.js b/scripts/const.js
index 68506a03..4f867767 100644
--- a/scripts/const.js
+++ b/scripts/const.js
@@ -56,7 +56,7 @@ const COMPONENTS = [
   'time-picker',
 
   'toast',
-  'toggle',
+  'switch',
   'tooltip',
   'transfer',
   'tree',
diff --git a/src/app.vue b/src/app.vue
index 378a19f6..61262d06 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -14,48 +14,48 @@
                 xmlns:xlink="http://www.w3.org/1999/xlink"
               >
                 <defs>
-                  <linearGradient x1="89.5364583%" y1="21.60078%" x2="7.57349918%" y2="65.7395747%" id="linearGradient-1">
-                    <stop stop-color="#2954C8" offset="0%"></stop>
-                    <stop stop-color="#5170FF" offset="100%"></stop>
+                  <linearGradient id="linearGradient-1" x1="89.5364583%" y1="21.60078%" x2="7.57349918%" y2="65.7395747%">
+                    <stop stop-color="#2954C8" offset="0%" />
+                    <stop stop-color="#5170FF" offset="100%" />
                   </linearGradient>
-                  <linearGradient x1="89.5364583%" y1="21.4573588%" x2="7.57349918%" y2="65.8190624%" id="linearGradient-2">
-                    <stop stop-color="#2954C8" offset="0%"></stop>
-                    <stop stop-color="#5170FF" offset="100%"></stop>
+                  <linearGradient id="linearGradient-2" x1="89.5364583%" y1="21.4573588%" x2="7.57349918%" y2="65.8190624%">
+                    <stop stop-color="#2954C8" offset="0%" />
+                    <stop stop-color="#5170FF" offset="100%" />
                   </linearGradient>
-                  <linearGradient x1="-11.5260417%" y1="24.3907324%" x2="87.1145833%" y2="74.8850926%" id="linearGradient-3">
-                    <stop stop-color="#89D2FF" offset="0%"></stop>
-                    <stop stop-color="#5170FF" offset="100%"></stop>
+                  <linearGradient id="linearGradient-3" x1="-11.5260417%" y1="24.3907324%" x2="87.1145833%" y2="74.8850926%">
+                    <stop stop-color="#89D2FF" offset="0%" />
+                    <stop stop-color="#5170FF" offset="100%" />
                   </linearGradient>
-                  <linearGradient x1="0%" y1="18.4813953%" x2="75.9513522%" y2="81.5186047%" id="linearGradient-4">
-                    <stop stop-color="#89D2FF" offset="0%"></stop>
-                    <stop stop-color="#5170FF" offset="100%"></stop>
+                  <linearGradient id="linearGradient-4" x1="0%" y1="18.4813953%" x2="75.9513522%" y2="81.5186047%">
+                    <stop stop-color="#89D2FF" offset="0%" />
+                    <stop stop-color="#5170FF" offset="100%" />
                   </linearGradient>
                 </defs>
                 <g id="Devui-Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                   <g id="Group-2" transform="translate(3.000000, 0.000000)">
                     <g>
                       <path
-                        d="M4.28576801,9.22873192 L9.32098286,6.02205882 L13.1143389,8.49673203 L0.010890596,17.0193525 L0.010890596,17.0193525 C0.010890596,13.8625823 1.62310848,10.9244448 4.28576801,9.22873192 Z"
                         id="Path-39-Copy-3"
+                        d="M4.28576801,9.22873192 L9.32098286,6.02205882 L13.1143389,8.49673203 L0.010890596,17.0193525 L0.010890596,17.0193525 C0.010890596,13.8625823 1.62310848,10.9244448 4.28576801,9.22873192 Z"
                         fill="url(#linearGradient-1)"
-                      ></path>
+                      />
                       <path
-                        d="M8.76945593,17.4828869 L14.1939212,14.0196078 L18.2867527,16.6963836 L4.14882163,25.9150327 L4.14882163,25.9150327 C4.14882163,22.4998846 5.89095741,19.3206798 8.76945593,17.4828869 Z"
                         id="Path-39-Copy-2"
+                        d="M8.76945593,17.4828869 L14.1939212,14.0196078 L18.2867527,16.6963836 L4.14882163,25.9150327 L4.14882163,25.9150327 C4.14882163,22.4998846 5.89095741,19.3206798 8.76945593,17.4828869 Z"
                         fill="url(#linearGradient-2)"
                         transform="translate(11.217787, 19.967320) scale(-1, 1) translate(-11.217787, -19.967320) "
-                      ></path>
+                      />
                       <path
-                        d="M0.183304389,2.48689958e-13 L13.1143389,8.49673203 L9.42310099,10.9017055 L9.42310099,10.9017055 C4.36778167,11.0371959 0.159798979,7.04888649 0.0243085926,1.99356717 C0.00937841938,1.43650334 0.0453320846,0.879239543 0.13172203,0.32871271 L0.183304389,2.48689958e-13 Z"
                         id="Path-38-Copy-3"
+                        d="M0.183304389,2.48689958e-13 L13.1143389,8.49673203 L9.42310099,10.9017055 L9.42310099,10.9017055 C4.36778167,11.0371959 0.159798979,7.04888649 0.0243085926,1.99356717 C0.00937841938,1.43650334 0.0453320846,0.879239543 0.13172203,0.32871271 L0.183304389,2.48689958e-13 Z"
                         fill="url(#linearGradient-3)"
-                      ></path>
+                      />
                       <path
-                        d="M4.54131151,6.55708742 L19.8945577,16.6535948 L16.2033199,19.0585682 L11.1830136,17.9470593 C6.34348625,16.8755752 3.2888836,12.0837536 4.36036765,7.24422626 C4.41158805,7.01288123 4.47194996,6.78365535 4.54131151,6.55708742 L4.54131151,6.55708742 Z"
                         id="Path-38-Copy-2"
+                        d="M4.54131151,6.55708742 L19.8945577,16.6535948 L16.2033199,19.0585682 L11.1830136,17.9470593 C6.34348625,16.8755752 3.2888836,12.0837536 4.36036765,7.24422626 C4.41158805,7.01288123 4.47194996,6.78365535 4.54131151,6.55708742 L4.54131151,6.55708742 Z"
                         fill="url(#linearGradient-4)"
                         transform="translate(12.021690, 12.807828) scale(-1, 1) translate(-12.021690, -12.807828) "
-                      ></path>
+                      />
                     </g>
                   </g>
                 </g>
@@ -89,22 +89,24 @@
             <!-- TODO: 主题选择器 d-dropdown -->
           </span>
         </div>
-        <div id="headerMenu" class="header-menu"><span></span></div>
+        <div id="headerMenu" class="header-menu">
+          <span />
+        </div>
       </header>
     </div>
     <!-- <app-content></app-content> -->
-    <router-view></router-view>
+    <router-view />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import AppContent from './components/app-content.vue'
+// import AppContent from './components/app-content.vue'
 
 export default defineComponent({
   name: 'App',
   components: {
-    AppContent,
+    // AppContent,
   },
   methods: {
   }
@@ -634,7 +636,7 @@ body {
   align-items: center;
 
   d-select,
-  d-toggle {
+  d-switch {
     margin-right: 5px;
   }
 }
diff --git a/src/components/component.route.ts b/src/components/component.route.ts
index 3aa611a4..dc3a76aa 100755
--- a/src/components/component.route.ts
+++ b/src/components/component.route.ts
@@ -59,7 +59,7 @@ import timeAxisRoutes from '../../devui/time-axis/demo/time-axis.route'
 import timePickerRoutes from '../../devui/time-picker/demo/time-picker.route'
 
 import toastRoutes from '../../devui/toast/demo/toast.route'
-import toggleRoutes from '../../devui/toggle/demo/toggle.route'
+import switchRoutes from '../../devui/switch/demo/switch.route'
 import tooltipRoutes from '../../devui/tooltip/demo/tooltip.route'
 import transferRoutes from '../../devui/transfer/demo/transfer.route'
 import treeRoutes from '../../devui/tree/demo/tree.route'
@@ -580,13 +580,13 @@ export const routesConfig = [
     },
   },
   {
-    path: 'toggle',
+    path: 'switch',
     component: ExamplePanelComponent,
-    children: toggleRoutes,
+    children: switchRoutes,
     meta: {
       type: '数据录入',
       enType: 'Data Entry',
-      name: 'Toggle',
+      name: 'Switch',
       cnName: '开关',
       done: true,
     },
-- 
Gitee