From 9a6244dfe8137372812f46598d08db0aa388f159 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com>
Date: Sat, 23 Oct 2021 14:14:08 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20component=20=E6=96=87=E6=A1=A3=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/src/view/component.vue | 502 ++++++++++++++++++++----------------
 docs/src/view/guide.vue     |  69 +++--
 2 files changed, 319 insertions(+), 252 deletions(-)

diff --git a/docs/src/view/component.vue b/docs/src/view/component.vue
index c9af7a6b..980e4274 100644
--- a/docs/src/view/component.vue
+++ b/docs/src/view/component.vue
@@ -1,20 +1,33 @@
 <template>
-      <lay-side>
+  <lay-side>
     <ul class="layui-menu layui-menu-lg layui-menu-docs" style="padding: 8px">
       <li
         v-for="menu in menus"
         :key="menu"
-        :class="[currentPath === menu.path ? 'layui-menu-item-checked2' : '']"
-        @click="handleClick(menu)"
+        class="layui-menu-item-group"
+        lay-options="{type: 'group', isAllowSpread: true}"
       >
-        <div class="layui-menu-body-title">
-          <router-link :to="menu.path">
-            <span>{{ menu.title }}</span>
-            <span class="layui-font-12 layui-font-gray">
-              {{ menu.subTitle }}
-            </span>
-          </router-link>
-        </div>
+        <div class="layui-menu-body-title">{{ menu.title }}</div>
+        <hr />
+        <ul>
+          <li
+            v-for="children in menu.children"
+            :key="children"
+            :class="[
+              currentPath === children.path ? 'layui-menu-item-checked2' : '',
+            ]"
+            @click="handleClick(children)"
+          >
+            <div class="layui-menu-body-title">
+              <router-link :to="children.path">
+                <span>{{ children.title }}</span>
+                <span class="layui-font-12 layui-font-gray">
+                  {{ children.subTitle }}
+                </span>
+              </router-link>
+            </div>
+          </li>
+        </ul>
       </li>
     </ul>
   </lay-side>
@@ -46,232 +59,267 @@ export default {
 
     const menus = [
       {
-        id: 4,
+        id: 1,
+        title: '通用',
+        children: [
+          {
+            id: 20,
+            title: '颜色',
+            subTitle: 'color',
+            path: '/zh-CN/components/color',
+          },
+          {
+            id: 6,
+            title: '按钮',
+            subTitle: 'button',
+            path: '/zh-CN/components/button',
+          },
+          {
+            id: 7,
+            title: '图标',
+            subTitle: 'iconfont',
+            path: '/zh-CN/components/icon',
+          },
+          {
+            id: 10,
+            title: '动画',
+            subTitle: 'animation',
+            path: '/zh-CN/components/animation',
+          },
+        ],
+      },
+      {
+        id: 1,
         title: '布局',
-        subTitle: 'layout',
-        path: '/zh-CN/components/layout',
+        children: [
+          {
+            id: 4,
+            title: '布局',
+            subTitle: 'layout',
+            path: '/zh-CN/components/layout',
+          },
+          {
+            id: 5,
+            title: '容器',
+            subTitle: 'container',
+            path: '/zh-CN/components/container',
+          },
+          {
+            id: 11,
+            title: '栅格',
+            subTitle: 'grid',
+            path: '/zh-CN/components/grid',
+          },
+          {
+            id: 8,
+            title: '面板',
+            subTitle: 'panel',
+            path: '/zh-CN/components/panel',
+          },
+          {
+            id: 9,
+            title: '卡片',
+            subTitle: 'card',
+            path: '/zh-CN/components/card',
+          },
+        ],
       },
       {
-        id: 5,
-        title: '容器',
-        subTitle: 'container',
-        path: '/zh-CN/components/container',
+        id: 1,
+        title: '导航',
+        children: [
+          {
+            id: 16,
+            title: '菜单',
+            subTitle: 'nav',
+            path: '/zh-CN/components/menu',
+          },
+          {
+            id: 17,
+            title: '面包屑',
+            subTitle: 'breadcrumb',
+            path: '/zh-CN/components/breadcrumb',
+          },
+          {
+            id: 28,
+            title: '选项卡',
+            subTitle: 'tab',
+            path: '/zh-CN/components/tab',
+          },          {
+            id: 27,
+            title: '下拉菜单',
+            subTitle: 'dropdown',
+            path: '/zh-CN/components/dropdown',
+          },
+        ],
       },
       {
-        id: 6,
-        title: '按钮',
-        subTitle: 'button',
-        path: '/zh-CN/components/button',
+        id: 1,
+        title: '辅助',
+        children: [
+          {
+            id: 13,
+            title: '徽章',
+            subTitle: 'badge',
+            path: '/zh-CN/components/badge',
+          },
+          {
+            id: 14,
+            title: '区块',
+            subTitle: 'block',
+            path: '/zh-CN/components/block',
+          },
+          {
+            id: 15,
+            title: '分割',
+            subTitle: 'line',
+            path: '/zh-CN/components/line',
+          },
+          {
+            id: 24,
+            title: '字段',
+            subTitle: 'field',
+            path: '/zh-CN/components/field',
+          },
+        ],
       },
       {
-        id: 7,
-        title: '图标',
-        subTitle: 'iconfont',
-        path: '/zh-CN/components/icon',
-      },
-      {
-        id: 8,
-        title: '面板',
-        subTitle: 'panel',
-        path: '/zh-CN/components/panel',
-      },
-      {
-        id: 9,
-        title: '卡片',
-        subTitle: 'card',
-        path: '/zh-CN/components/card',
-      },
-      {
-        id: 10,
-        title: '动画',
-        subTitle: 'animation',
-        path: '/zh-CN/components/animation',
-      },
-      {
-        id: 11,
-        title: '栅格',
-        subTitle: 'grid',
-        path: '/zh-CN/components/grid',
-      },
-      {
-        id: 12,
+        id: 1,
         title: '表单',
-        subTitle: 'form',
-        path: '/zh-CN/components/form',
+        children: [
+          {
+            id: 32,
+            title: '复选框',
+            subTitle: 'checkbox',
+            path: '/zh-CN/components/checkbox',
+          },
+          {
+            id: 33,
+            title: '单选框',
+            subTitle: 'radio',
+            path: '/zh-CN/components/radio',
+          },
+          {
+            id: 34,
+            title: '输入框',
+            subTitle: 'input',
+            path: '/zh-CN/components/input',
+          },
+          {
+            id: 35,
+            title: '文本域',
+            subTitle: 'textarea',
+            path: '/zh-CN/components/textarea',
+          },
+          {
+            id: 36,
+            title: '开关',
+            subTitle: 'switch',
+            path: '/zh-CN/components/switch',
+          },
+          {
+            id: 39,
+            title: '下拉选择',
+            subTitle: 'select',
+            path: '/zh-CN/components/select',
+          },
+          {
+            id: 29,
+            title: '图标选择',
+            subTitle: 'iconPicker',
+            path: '/zh-CN/components/iconPicker',
+          },
+          {
+            id: 40,
+            title: '颜色选择器',
+            subTitle: 'colorPicker',
+            path: '/zh-CN/components/colorPicker',
+          },
+          {
+            id: 26,
+            title: '评分',
+            subTitle: 'rate',
+            path: '/zh-CN/components/rate',
+          },
+          {
+            id: 37,
+            title: '滑块',
+            subTitle: 'slider',
+            path: '/zh-CN/components/slider',
+          },
+          {
+            id: 12,
+            title: '表单',
+            subTitle: 'form',
+            path: '/zh-CN/components/form',
+          },
+        ],
       },
       {
-        id: 13,
-        title: '徽章',
-        subTitle: 'badge',
-        path: '/zh-CN/components/badge',
-      },
-      {
-        id: 14,
-        title: '区块',
-        subTitle: 'block',
-        path: '/zh-CN/components/block',
-      },
-      {
-        id: 15,
-        title: '分割',
-        subTitle: 'line',
-        path: '/zh-CN/components/line',
-      },
-      {
-        id: 16,
-        title: '菜单',
-        subTitle: 'nav',
-        path: '/zh-CN/components/menu',
-      },
-      {
-        id: 17,
-        title: '面包屑',
-        subTitle: 'breadcrumb',
-        path: '/zh-CN/components/breadcrumb',
-      },
-      {
-        id: 18,
-        title: '进度',
-        subTitle: 'progress',
-        path: '/zh-CN/components/progress',
-      },
-      {
-        id: 19,
-        title: '时间线',
-        subTitle: 'timeline',
-        path: '/zh-CN/components/timeline',
-      },
-      {
-        id: 20,
-        title: '颜色',
-        subTitle: 'color',
-        path: '/zh-CN/components/color',
-      },
-      {
-        id: 21,
-        title: '手风琴',
-        subTitle: 'collapse',
-        path: '/zh-CN/components/collapse',
-      },
-      {
-        id: 22,
-        title: '表格',
-        subTitle: 'table',
-        path: '/zh-CN/components/table',
-      },
-      {
-        id: 23,
-        title: '头像',
-        subTitle: 'avatar',
-        path: '/zh-CN/components/avatar',
-      },
-      {
-        id: 24,
-        title: '字段',
-        subTitle: 'field',
-        path: '/zh-CN/components/field',
-      },
-      {
-        id: 25,
-        title: '空',
-        subTitle: 'empty',
-        path: '/zh-CN/components/empty',
-      },
-      {
-        id: 26,
-        title: '评分',
-        subTitle: 'rate',
-        path: '/zh-CN/components/rate',
-      },
-      {
-        id: 27,
-        title: '下拉菜单',
-        subTitle: 'dropdown',
-        path: '/zh-CN/components/dropdown',
-      },
-      {
-        id: 28,
-        title: '选项卡',
-        subTitle: 'tab',
-        path: '/zh-CN/components/tab',
-      },
-      {
-        id: 29,
-        title: '图标选择',
-        subTitle: 'iconPicker',
-        path: '/zh-CN/components/iconPicker',
-      },
-      {
-        id: 29,
-        title: '分页',
-        subTitle: 'page',
-        path: '/zh-CN/components/page',
-      },
-      {
-        id: 30,
-        title: '树形组件',
-        subTitle: 'tree',
-        path: '/zh-CN/components/tree',
-      },
-      {
-        id: 31,
-        title: '穿梭框',
-        subTitle: 'transfer',
-        path: '/zh-CN/components/transfer',
-      },
-      {
-        id: 32,
-        title: '复选框',
-        subTitle: 'checkbox',
-        path: '/zh-CN/components/checkbox',
-      },
-      {
-        id: 33,
-        title: '单选框',
-        subTitle: 'radio',
-        path: '/zh-CN/components/radio',
-      },
-      {
-        id: 34,
-        title: '输入框',
-        subTitle: 'input',
-        path: '/zh-CN/components/input',
-      },
-      {
-        id: 35,
-        title: '文本域',
-        subTitle: 'textarea',
-        path: '/zh-CN/components/textarea',
-      },
-      {
-        id: 36,
-        title: '开关',
-        subTitle: 'switch',
-        path: '/zh-CN/components/switch',
-      },
-      {
-        id: 37,
-        title: '滑块',
-        subTitle: 'slider',
-        path: '/zh-CN/components/slider',
-      },
-      {
-        id: 38,
-        title: '轮播',
-        subTitle: 'carousel',
-        path: '/zh-CN/components/carousel',
-      },
-      {
-        id: 39,
-        title: '下拉选择',
-        subTitle: 'select',
-        path: '/zh-CN/components/select',
-      },
-      {
-        id: 40,
-        title: '颜色选择器',
-        subTitle: 'colorPicker',
-        path: '/zh-CN/components/colorPicker',
+        id: 1,
+        title: '展示',
+        children: [
+          {
+            id: 18,
+            title: '进度',
+            subTitle: 'progress',
+            path: '/zh-CN/components/progress',
+          },
+          {
+            id: 19,
+            title: '时间线',
+            subTitle: 'timeline',
+            path: '/zh-CN/components/timeline',
+          },
+          {
+            id: 21,
+            title: '手风琴',
+            subTitle: 'collapse',
+            path: '/zh-CN/components/collapse',
+          },
+          {
+            id: 22,
+            title: '表格',
+            subTitle: 'table',
+            path: '/zh-CN/components/table',
+          },
+          {
+            id: 23,
+            title: '头像',
+            subTitle: 'avatar',
+            path: '/zh-CN/components/avatar',
+          },
+          {
+            id: 25,
+            title: '空',
+            subTitle: 'empty',
+            path: '/zh-CN/components/empty',
+          },
+          {
+            id: 29,
+            title: '分页',
+            subTitle: 'page',
+            path: '/zh-CN/components/page',
+          },
+          {
+            id: 30,
+            title: '树形组件',
+            subTitle: 'tree',
+            path: '/zh-CN/components/tree',
+          },
+          {
+            id: 31,
+            title: '穿梭框',
+            subTitle: 'transfer',
+            path: '/zh-CN/components/transfer',
+          },
+          {
+            id: 38,
+            title: '轮播',
+            subTitle: 'carousel',
+            path: '/zh-CN/components/carousel',
+          },
+        ],
       },
     ]
 
diff --git a/docs/src/view/guide.vue b/docs/src/view/guide.vue
index 62586a45..d83f4e67 100644
--- a/docs/src/view/guide.vue
+++ b/docs/src/view/guide.vue
@@ -4,17 +4,30 @@
       <li
         v-for="menu in menus"
         :key="menu"
-        :class="[currentPath === menu.path ? 'layui-menu-item-checked2' : '']"
-        @click="handleClick(menu)"
+        class="layui-menu-item-group"
+        lay-options="{type: 'group', isAllowSpread: true}"
       >
-        <div class="layui-menu-body-title">
-          <router-link :to="menu.path">
-            <span>{{ menu.title }}</span>
-            <span class="layui-font-12 layui-font-gray">
-              {{ menu.subTitle }}
-            </span>
-          </router-link>
-        </div>
+        <div class="layui-menu-body-title">{{ menu.title }}</div>
+        <hr />
+        <ul>
+          <li
+            v-for="children in menu.children"
+            :key="children"
+            :class="[
+              currentPath === children.path ? 'layui-menu-item-checked2' : '',
+            ]"
+            @click="handleClick(children)"
+          >
+            <div class="layui-menu-body-title">
+              <router-link :to="children.path">
+                <span>{{ children.title }}</span>
+                <span class="layui-font-12 layui-font-gray">
+                  {{ children.subTitle }}
+                </span>
+              </router-link>
+            </div>
+          </li>
+        </ul>
       </li>
     </ul>
   </lay-side>
@@ -47,21 +60,27 @@ export default {
     const menus = [
       {
         id: 1,
-        title: '介绍',
-        subTitle: 'introduce',
-        path: '/zh-CN/guide/introduce',
-      },
-      {
-        id: 2,
-        title: '安装',
-        subTitle: 'get started',
-        path: '/zh-CN/guide/getStarted',
-      },
-      {
-        id: 3,
-        title: '更新',
-        subTitle: 'change log',
-        path: '/zh-CN/guide/changelog',
+        title: '基础',
+        children: [
+          {
+            id: 1,
+            title: '介绍',
+            subTitle: 'introduce',
+            path: '/zh-CN/guide/introduce',
+          },
+          {
+            id: 2,
+            title: '安装',
+            subTitle: 'get started',
+            path: '/zh-CN/guide/getStarted',
+          },
+          {
+            id: 3,
+            title: '更新',
+            subTitle: 'change log',
+            path: '/zh-CN/guide/changelog',
+          },
+        ],
       }
     ]