docs: component 文档分类

docs/src/view/component.vue

@@ -4,19 +4,32 @@
       <li
         v-for="menu in menus"
         :key="menu"
-        :class="[currentPath === menu.path ? 'layui-menu-item-checked2' : '']"
+        class="layui-menu-item-group"
-        @click="handleClick(menu)"
+        lay-options="{type: 'group', isAllowSpread: true}"
+      >
+        <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="menu.path">
+              <router-link :to="children.path">
-            <span>{{ menu.title }}</span>
+                <span>{{ children.title }}</span>
                 <span class="layui-font-12 layui-font-gray">
-              {{ menu.subTitle }}
+                  {{ children.subTitle }}
                 </span>
               </router-link>
             </div>
           </li>
         </ul>
+      </li>
+    </ul>
   </lay-side>
   <lay-body>
     <div style="padding: 20px">
@@ -46,16 +59,14 @@ export default {
 
     const menus = [
       {
-        id: 4,
+        id: 1,
-        title: '布局',
+        title: '通用',
-        subTitle: 'layout',
+        children: [
-        path: '/zh-CN/components/layout',
-      },
           {
-        id: 5,
+            id: 20,
-        title: '容器',
+            title: '颜色',
-        subTitle: 'container',
+            subTitle: 'color',
-        path: '/zh-CN/components/container',
+            path: '/zh-CN/components/color',
           },
           {
             id: 6,
@@ -69,6 +80,36 @@ export default {
             subTitle: 'iconfont',
             path: '/zh-CN/components/icon',
           },
+          {
+            id: 10,
+            title: '动画',
+            subTitle: 'animation',
+            path: '/zh-CN/components/animation',
+          },
+        ],
+      },
+      {
+        id: 1,
+        title: '布局',
+        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: '面板',
@@ -81,24 +122,41 @@ export default {
             subTitle: 'card',
             path: '/zh-CN/components/card',
           },
-      {
+        ],
-        id: 10,
-        title: '动画',
-        subTitle: 'animation',
-        path: '/zh-CN/components/animation',
       },
       {
-        id: 11,
+        id: 1,
-        title: '栅格',
+        title: '导航',
-        subTitle: 'grid',
+        children: [
-        path: '/zh-CN/components/grid',
+          {
+            id: 16,
+            title: '菜单',
+            subTitle: 'nav',
+            path: '/zh-CN/components/menu',
           },
           {
-        id: 12,
+            id: 17,
-        title: '表单',
+            title: '面包屑',
-        subTitle: 'form',
+            subTitle: 'breadcrumb',
-        path: '/zh-CN/components/form',
+            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: 1,
+        title: '辅助',
+        children: [
           {
             id: 13,
             title: '徽章',
@@ -117,108 +175,18 @@ export default {
             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,
+        id: 1,
-        title: '评分',
+        title: '表单',
-        subTitle: 'rate',
+        children: [
-        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: '复选框',
@@ -249,29 +217,109 @@ export default {
             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: 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',
           },
-      {
+        ],
-        id: 39,
-        title: '下拉选择',
-        subTitle: 'select',
-        path: '/zh-CN/components/select',
-      },
-      {
-        id: 40,
-        title: '颜色选择器',
-        subTitle: 'colorPicker',
-        path: '/zh-CN/components/colorPicker',
       },
     ]
 

docs/src/view/guide.vue

@@ -4,19 +4,32 @@
       <li
         v-for="menu in menus"
         :key="menu"
-        :class="[currentPath === menu.path ? 'layui-menu-item-checked2' : '']"
+        class="layui-menu-item-group"
-        @click="handleClick(menu)"
+        lay-options="{type: 'group', isAllowSpread: true}"
+      >
+        <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="menu.path">
+              <router-link :to="children.path">
-            <span>{{ menu.title }}</span>
+                <span>{{ children.title }}</span>
                 <span class="layui-font-12 layui-font-gray">
-              {{ menu.subTitle }}
+                  {{ children.subTitle }}
                 </span>
               </router-link>
             </div>
           </li>
         </ul>
+      </li>
+    </ul>
   </lay-side>
   <lay-body>
     <div style="padding: 20px">
@@ -45,6 +58,10 @@ export default {
     )
 
     const menus = [
+      {
+        id: 1,
+        title: '基础',
+        children: [
           {
             id: 1,
             title: '介绍',
@@ -62,6 +79,8 @@ export default {
             title: '更新',
             subTitle: 'change log',
             path: '/zh-CN/guide/changelog',
+          },
+        ],
       }
     ]