[文档] 调整目录样式

docs/docs/zh-CN/components/layout.md

@@ -1,23 +1,12 @@
-::: demo
-
-<template>
-  <lay-layout>
-    <lay-header></lay-header>
-    <lay-side></lay-side>
-    <lay-body></lay-body>
-  </lay-layout>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    return {
-    }
-  }
-}
-</script>
-
-:::
+```html
+<lay-layout>
+   <lay-header>
+     <lay-logo>Layui Admin</lay-logo>
+   </lay-header>
+   <lay-side></lay-side>
+   <lay-body>
+     <router-view></router-view>
+   </lay-body>
+   <lay-footer>pearadmin.com</lay-footer>
+</lay-layout>
+```

docs/docs/zh-CN/components/menu.md

@@ -0,0 +1,23 @@
+::: demo
+
+<template>
+  <lay-menu>
+    <lay-menu-item title="首页"></lay-menu-item>
+    <lay-menu-item title="用户"></lay-menu-item>
+    <lay-menu-item title="角色"></lay-menu-item>    
+  </lay-menu>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::

docs/docs/zh-CN/guide/home.md

@@ -0,0 +1,3 @@
+基于 layui 的 vue-next 组件库
+
+a component library for Vue 3 base on layui-vue

docs/src/layouts/Layout.vue

@@ -16,24 +16,25 @@
       </lay-header>
       <lay-side>
         <ul class="layui-menu layui-menu-lg">
-          <li><router-link to="/zh-CN/guide">介绍</router-link></li>
-          <li><router-link to="/zh-CN/guide/install">安装</router-link></li>
-          <li><router-link to="/zh-CN/components/layout">布局</router-link></li>
-          <li><router-link to="/zh-CN/components/container">容器</router-link></li>
-          <li><router-link to="/zh-CN/components/button">按钮</router-link></li>
-          <li><router-link to="/zh-CN/components/icon">图标</router-link></li>
-          <li><router-link to="/zh-CN/components/panel">面板</router-link></li>
-          <li><router-link to="/zh-CN/components/card">卡片</router-link></li>
-          <li><router-link to="/zh-CN/components/grid">栅格</router-link></li>
-          <li><router-link to="/zh-CN/components/form">表单</router-link></li>
-          <li><router-link to="/zh-CN/components/badge">徽章</router-link></li>
-          <li><router-link to="/zh-CN/components/block">区块</router-link></li>
-          <li><router-link to="/zh-CN/components/line">分割</router-link></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/guide">介绍</router-link></div></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/guide/install">安装</router-link></div></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/layout">布局</router-link></div></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/container">容器</router-link></div></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/button">按钮</router-link></div></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/icon">图标</router-link></div></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/panel">面板</router-link></div></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/card">卡片</router-link></div></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/grid">栅格</router-link></div></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/form">表单</router-link></div></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/badge">徽章</router-link></div></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/block">区块</router-link></div></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/line">分割</router-link></div></li>
+          <li><div class="layui-menu-body-title"><router-link to="/zh-CN/components/menu">菜单</router-link></div></li>
           <li>
-            <router-link to="/zh-CN/components/progress">进度</router-link>
+            <div class="layui-menu-body-title"><router-link to="/zh-CN/components/progress">进度</router-link></div>
           </li>
           <li>
-            <router-link to="/zh-CN/components/timeline">时间</router-link>
+            <div class="layui-menu-body-title"><router-link to="/zh-CN/components/timeline">时间</router-link></div>
           </li>
         </ul>
       </lay-side>

docs/src/router/zh-CN.ts

@@ -79,6 +79,11 @@ const zhCN = [
         component: () => import('../../docs/zh-CN/components/progress.md'),
         meta: { title: '进度' },
       },
+      {
+        path: '/zh-CN/components/menu',
+        component: () => import('../../docs/zh-CN/components/menu.md'),
+        meta: { title: '菜单' },
+      },
       {
         path: '/zh-CN/components/timeline',
         component: () => import('../../docs/zh-CN/components/timeline.md'),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "a component library for Vue 3 base on layui-vue",
   "main": "lib/layui-vue.umd.js",
   "module": "lib/layui-vue.es.js",

src/index.ts

@@ -29,6 +29,9 @@ import LayTextarea from "./module/textarea/index"
 import LaySwitch from "./module/switch/index"
 import LayCollapse from "./module/collapse/index"
 import LayContainer from "./module/container/index"
+import LayMenu from './module/menu/index'
+import LayMenuItem from './module/menuItem/index'
+import LayMenuChildItem from './module/menuChildItem/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -56,7 +59,10 @@ const components: Record<string, IDefineComponent> = {
   LayTextarea,
   LaySwitch,
   LayCollapse,
-  LayContainer
+  LayContainer,
+  LayMenu,
+  LayMenuItem,
+  LayMenuChildItem
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -96,6 +102,9 @@ export {
   LaySwitch,
   LayCollapse,
   LayContainer,
+  LayMenu,
+  LayMenuItem,
+  LayMenuChildItem,
   install,
 }
 

src/module/menu/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LayMenu', Component)
+}
+
+export default Component as IDefineComponent

src/module/menu/index.vue

@@ -0,0 +1,9 @@
+<template>
+   <ul class="layui-nav layui-nav-tree">
+       <slot></slot>
+   </ul>
+</template>
+
+<script setup name="LayMenu" lang="ts">
+
+</script>

src/module/menuChildItem/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LayMenuChildItem', Component)
+}
+
+export default Component as IDefineComponent

src/module/menuChildItem/index.vue

@@ -0,0 +1,7 @@
+<template>
+    <dd><a href="">选项</a></dd>
+</template>
+
+<script setup name="LayMenuChildItem" lang="ts">
+
+</script>

src/module/menuItem/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LayMenuItem', Component)
+}
+
+export default Component as IDefineComponent

src/module/menuItem/index.vue

@@ -0,0 +1,14 @@
+<template>
+    <li class="layui-nav-item">
+         <a href="">{{title}}</a>
+    </li>
+</template>
+
+<script setup name="LayMenuItem" lang="ts">
+import { defineProps } from 'vue'
+
+const props =
+  defineProps<{
+    title: string
+  }>()
+</script>