theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ci: 更新文档

Browse Source
This commit is contained in:
就眠仪式 2021-10-22 09:18:40 +08:00
parent 67a05b15c8
commit ce26429bae
12 changed files with 753 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
docs/docs/zh-CN/components/layout.md
View File

@ -1,32 +1,32 @@
::: field 后台布局
:::
<br>
<img src="../../../src/assets/layout.png"/>
<br>
<br>
<p>layui 之所以赢得如此多人的青睐，更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。layui 致力于让每一位开发者都能轻松搭建自己的管理界面。下面是演示代码 :</p>
<br>
::: field 基础使用
:::
```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>
```
::: 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>
:::
<br>
<br>
::: field 布局组件
:::

2
docs/docs/zh-CN/guide/introduce.md
View File

@ -1,5 +1,3 @@
<img src="../../../src/assets/logo-2.png" style="height:220px;"/>
<lay-block>
layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
</lay-block>

2
docs/index.html
View File

@ -17,7 +17,7 @@
<!--preload-links-->
</head>
<body>
<body style="zoom: 0.9">
<div id="app">
<!--app-html-->
</div>

BIN
docs/src/assets/logo-2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.8 KiB

1
docs/src/assets/logo-3.svg
View File

@ -1 +0,0 @@
<svg id="b6a0220b-322a-435e-9212-1568a8115194" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="888" height="475.27072" viewBox="0 0 888 475.27072"><title>true_love</title><rect x="402.54442" y="219.17275" width="2.57298" height="13.89411" transform="translate(-11.71503 -369.44906) rotate(26.64397)" fill="#fff"/><path d="M426.98456,248.842a66.00006,66.00006,0,0,0-93.33814,0l-.01788.01788a65.982,65.982,0,0,0-93.30231,93.30237l-.01788.01788,93.33807,93.33807,93.33814-93.33807A66,66,0,0,0,426.98456,248.842Z" transform="translate(-156 -212.36464)" fill="#ff6584"/><path d="M709.42956,621.81706h-489.679a9.98831,9.98831,0,0,1-1.82989-.145l231.59565-401.157a16.2157,16.2157,0,0,1,28.22705,0L633.17308,489.72253l7.44637,12.8816Z" transform="translate(-156 -212.36464)" fill="#5fb878"/><polygon points="553.43 409.452 386.241 409.452 468.314 290.239 474.22 281.652 477.173 277.358 484.619 290.239 553.43 409.452" opacity="0.2"/><path d="M982.07935,621.36464H558.54722l82.07223-119.21293,5.9062-8.58777L753.47313,338.20663c7.01145-10.182,23.87881-10.81607,32.12223-1.92044a19.328,19.328,0,0,1,1.54006,1.92044Z" transform="translate(-156 -212.36464)" fill="#3f3d56"/><rect y="407.93322" width="888" height="2.24072" fill="#3f3d56"/><ellipse cx="570.05705" cy="586.26729" rx="32.34192" ry="10.15313" transform="translate(-329.28848 33.15083) rotate(-21.1763)" fill="#2f2e41"/><circle cx="349.2698" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="319.79361" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><rect x="359.09519" y="433.51279" width="19.65079" height="35.20766" fill="#2f2e41"/><ellipse cx="336.16927" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="375.47085" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="350.90736" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="350.90736" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M442.52428,534.95878c-5.22292-23.39065,11.47266-47.02591,37.29064-52.79083s50.9816,8.52354,56.20452,31.91418-11.88759,32.01752-37.70556,37.78245S447.74721,558.34942,442.52428,534.95878Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><ellipse cx="440.41422" cy="603.0993" rx="32.34192" ry="10.15313" transform="translate(-453.46127 275.69894) rotate(-45)" fill="#2f2e41"/><path d="M473.49729,618.44821c0,6.33082,16.30083,18.832,34.38888,18.832s35.04764-17.82327,35.04764-24.15409-16.95958,1.22817-35.04764,1.22817S473.49729,612.11739,473.49729,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><ellipse cx="623.94295" cy="586.26729" rx="10.15313" ry="32.34192" transform="translate(-304.12811 743.93025) rotate(-68.8237)" fill="#2f2e41"/><circle cx="532.7302" cy="382.74826" r="64.68385" fill="#2f2e41"/><rect x="698.5556" y="645.87743" width="19.65079" height="35.20766" transform="translate(1260.76198 1114.59789) rotate(-180)" fill="#2f2e41"/><rect x="659.25402" y="645.87743" width="19.65079" height="35.20766" transform="translate(1182.15883 1114.59789) rotate(-180)" fill="#2f2e41"/><ellipse cx="545.83073" cy="469.12985" rx="16.37566" ry="6.14087" fill="#2f2e41"/><ellipse cx="506.52915" cy="468.31107" rx="16.37566" ry="6.14087" fill="#2f2e41"/><circle cx="531.09264" cy="366.3726" r="22.10714" fill="#fff"/><circle cx="531.09264" cy="366.3726" r="7.36905" fill="#3f3d56"/><path d="M751.47572,534.95878c5.22292-23.39065-11.47266-47.02591-37.29064-52.79083s-50.9816,8.52354-56.20452,31.91418,11.88759,32.01752,37.70556,37.78245S746.25279,558.34942,751.47572,534.95878Z" transform="translate(-156 -212.36464)" fill="#5fb878"/><ellipse cx="753.58578" cy="603.0993" rx="10.15313" ry="32.34192" transform="translate(-361.73544 497.14467) rotate(-45)" fill="#2f2e41"/><path d="M720.50271,618.44821c0,6.33082-16.30083,18.832-34.38888,18.832s-35.04764-17.82327-35.04764-24.15409,16.95958,1.22817,35.04764,1.22817S720.50271,612.11739,720.50271,618.44821Z" transform="translate(-156 -212.36464)" fill="#fff"/><path d="M1044,527.22724c0,41.80115-24.85012,56.39655-55.5043,56.39655s-55.5043-14.5954-55.5043-56.39655,55.5043-94.97881,55.5043-94.97881S1044,485.42608,1044,527.22724Z" transform="translate(-156 -212.36464)" fill="#e6e6e6"/><polygon points="830.474 364.865 831.042 329.881 854.699 286.601 831.131 324.393 831.387 308.663 847.691 277.35 831.454 304.5 831.454 304.5 831.914 276.209 849.373 251.28 831.986 271.76 832.273 219.884 830.469 288.559 830.617 285.726 812.866 258.555 830.332 291.164 828.678 322.761 828.629 321.922 808.166 293.329 828.567 324.885 828.36 328.836 828.323 328.896 828.34 329.22 824.144 409.383 829.751 409.383 830.423 367.977 850.775 336.499 830.474 364.865" fill="#3f3d56"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.5 KiB

29
docs/src/components/LaySearch.vue
View File

@ -1,9 +1,10 @@
<template>
<select :name="name" lay-verify="required" />
<div
class="layui-unselect layui-form-select"
class="layui-unselect layui-form-select layui-search"
:class="[openState ? 'layui-form-selected' : '']"
@click="open"
style="margin-left: 20px"
>
<div class="layui-select-title">
<input
@ -14,10 +15,12 @@
style="
background: rgba(255, 255, 255, 0.05);
border: none;
color: whitesmoke;
color: rgba(255, 255, 255, 0.7);
width: 196px;
height: 34px;
"
@input="change"
/><i class="layui-edge" />
/><i class="layui-edge"></i>
</div>
<dl class="layui-anim layui-anim-upbit" style="">
<dd v-if="menus.length <= 0" class="layui-select-tips">无内容</dd>
@ -36,7 +39,7 @@
</template>
<script setup name="LaySelect" lang="ts">
import { defineProps, Ref, ref } from 'vue'
import { defineProps, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Recordable } from '/@src/module/type'
@ -101,3 +104,21 @@ const searchList = function (str: string, container: any) {
return newList
}
</script>
<style>
.layui-search .layui-anim::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.layui-search .layui-anim::-webkit-scrollbar-corner {
background: #f6f6f6;
}
.layui-search .layui-anim::-webkit-scrollbar-thumb {
background: #e6e6e6;
border-radius: 2px;
}
.layui-search .layui-anim::-webkit-scrollbar-track {
background: white;
border-radius: 2px;
}
</style>

64
docs/src/layouts/Layout.vue
View File

@ -1,33 +1,45 @@
<template>
<div class="width:100%;height:300px">
<lay-layout>
<lay-header style="background: #393d49">
<lay-logo>
<lay-header style="background: #393d49; border-bottom: 1px solid #404553">
<lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
<img src="../assets/logo.png" />
</lay-logo>
<ul
class="layui-nav layui-layout-left"
style="margin-top: 10px; margin-bottom: 0px"
style="margin-top: 0px; margin-bottom: 0px"
>
<lay-form>
<lay-search :datas="menus" />
</lay-form>
<li class="layui-nav-item">
<router-link to="/zh-CN/home"> 首页 </router-link>
</li>
<li class="layui-nav-item">
<router-link to="/zh-CN/guide"> 指南 </router-link>
</li>
<li class="layui-nav-item">
<router-link to="/zh-CN/components"> 组件 </router-link>
</li>
<li class="layui-nav-item">
<lay-form>
<lay-search :datas="menus" />
</lay-form>
</li>
</ul>
<ul
class="layui-nav layui-layout-right"
style="margin-top: 0px; margin-bottom: 0px"
>
<li class="layui-nav-item">
<a href="https://gitee.com/layui-vue/layui-vue-sample"> 案例 </a>
</li>
<li class="layui-nav-item">
<a href="https://gitee.com/layui-vue/layui-vue"> 仓库 </a>
<a
href="https://gitee.com/layui-vue"
>
<lay-icon type="layui-icon-fonts-code" size="18px"></lay-icon>
</a>
</li>
<li class="layui-nav-item">
<a
href="https://gitee.com/layui-vue/layui-vue/issues?assignee_id=&author_id=&branch=&collaborator_ids=&issue_search=&label_ids=&label_text=&milestone_id=&priority=&private_issue=&program_id=&project_id=Jmysy%2Flayui-vue&project_type=&scope=&sort=&state=all&target_project="
>
反馈
<lay-icon type="layui-icon-chat" size="18px"></lay-icon>
</a>
</li>
<li class="layui-nav-item">
@ -35,35 +47,7 @@
</li>
</ul>
</lay-header>
<lay-side>
<ul
class="layui-menu layui-menu-lg layui-menu-docs"
style="padding: 6px"
>
<li
v-for="menu in menus"
:key="menu"
:class="[
currentPath === menu.path ? 'layui-menu-item-checked2' : '',
]"
@click="handleClick(menu)"
>
<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>
</li>
</ul>
</lay-side>
<lay-body>
<div style="padding: 20px">
<router-view />
</div>
</lay-body>
<router-view></router-view>
</lay-layout>
</div>
</template>

451
docs/src/router/zh-CN.ts
View File

@ -1,232 +1,249 @@
import BaseLayout from '../layouts/Layout.vue'
import Component from '../view/component.vue'
import Guide from '../view/guide.vue'
import Home from '../view/home.vue'
const zhCN = [
{
path: '/',
redirect: '/zh-CN/guide/introduce',
redirect: '/zh-CN/home',
component: BaseLayout,
meta: { title: '指南', icon: 'el-icon-position' },
meta: { title: '首页', icon: 'el-icon-position' },
children: [
{
path: '/zh-CN/guide/introduce',
component: () => import('../../docs/zh-CN/guide/introduce.md'),
meta: { title: '介绍' },
path: '/zh-CN/home',
component: Home,
meta: { title: '指南' },
},
{
path: '/zh-CN/guide/getStarted',
component: () => import('../../docs/zh-CN/guide/getStarted.md'),
meta: { title: '安装' },
path: '/zh-CN/guide',
redirect: '/zh-CN/guide/introduce',
component: Guide,
meta: { title: '指南' },
children: [
{
path: '/zh-CN/guide/introduce',
component: () => import('../../docs/zh-CN/guide/introduce.md'),
meta: { title: '介绍' },
},
{
path: '/zh-CN/guide/getStarted',
component: () => import('../../docs/zh-CN/guide/getStarted.md'),
meta: { title: '安装' },
},
{
path: '/zh-CN/guide/changelog',
component: () => import('../../docs/zh-CN/guide/changelog.md'),
meta: { title: '更新' },
},
{
path: '/zh-CN/guide/sandbox',
component: () => import('../../docs/zh-CN/guide/sandbox.md'),
meta: { title: '沙盒' },
}
]
},
{
path: '/zh-CN/guide/changelog',
component: () => import('../../docs/zh-CN/guide/changelog.md'),
meta: { title: '更新' },
},
{
path: '/zh-CN/guide/sandbox',
component: () => import('../../docs/zh-CN/guide/sandbox.md'),
meta: { title: '沙盒' },
},
],
},
{
path: '/zh-CN/components/',
redirect: '/zh-CN/components/button',
component: BaseLayout,
meta: { title: '组件', icon: 'el-icon-copy-document' },
children: [
{
path: '/zh-CN/components/layout',
component: () => import('../../docs/zh-CN/components/layout.md'),
meta: { title: '布局' },
},
{
path: '/zh-CN/components/color',
component: () => import('../../docs/zh-CN/components/color.md'),
meta: { title: '颜色' },
},
{
path: '/zh-CN/components/container',
component: () => import('../../docs/zh-CN/components/container.md'),
meta: { title: '容器' },
},
{
path: '/zh-CN/components/breadcrumb',
component: () => import('../../docs/zh-CN/components/breadcrumb.md'),
meta: { title: '面包屑' },
},
{
path: '/zh-CN/components/button',
component: () => import('../../docs/zh-CN/components/button.md'),
meta: { title: '按钮' },
},
{
path: '/zh-CN/components/icon',
component: () => import('../../docs/zh-CN/components/icon.md'),
meta: { title: '图标' },
},
{
path: '/zh-CN/components/panel',
component: () => import('../../docs/zh-CN/components/panel.md'),
meta: { title: '面板' },
},
{
path: '/zh-CN/components/animation',
component: () => import('../../docs/zh-CN/components/animation.md'),
meta: { title: '动画' },
},
{
path: '/zh-CN/components/card',
component: () => import('../../docs/zh-CN/components/cards.md'),
meta: { title: '卡片' },
},
{
path: '/zh-CN/components/grid',
component: () => import('../../docs/zh-CN/components/grid.md'),
meta: { title: '栅格' },
},
{
path: '/zh-CN/components/form',
component: () => import('../../docs/zh-CN/components/form.md'),
meta: { title: '表单' },
},
{
path: '/zh-CN/components/badge',
component: () => import('../../docs/zh-CN/components/badge.md'),
meta: { title: '徽章' },
},
{
path: '/zh-CN/components/block',
component: () => import('../../docs/zh-CN/components/block.md'),
meta: { title: '辅助' },
},
{
path: '/zh-CN/components/line',
component: () => import('../../docs/zh-CN/components/line.md'),
meta: { title: '分割' },
},
{
path: '/zh-CN/components/progress',
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'),
meta: { title: '时间线' },
},
{
path: '/zh-CN/components/collapse',
component: () => import('../../docs/zh-CN/components/collapse.md'),
meta: { title: '手风琴' },
},
{
path: '/zh-CN/components/table',
component: () => import('../../docs/zh-CN/components/table.md'),
meta: { title: '表格' },
},
{
path: '/zh-CN/components/avatar',
component: () => import('../../docs/zh-CN/components/avatar.md'),
meta: { title: '头像' },
},
{
path: '/zh-CN/components/field',
component: () => import('../../docs/zh-CN/components/field.md'),
meta: { title: '字段' },
},
{
path: '/zh-CN/components/empty',
component: () => import('../../docs/zh-CN/components/empty.md'),
meta: { title: '空' },
},
{
path: '/zh-CN/components/rate',
component: () => import('../../docs/zh-CN/components/rate.md'),
meta: { title: '评分' },
},
{
path: '/zh-CN/components/dropdown',
component: () => import('../../docs/zh-CN/components/dropdown.md'),
meta: { title: '下拉' },
},
{
path: '/zh-CN/components/tab',
component: () => import('../../docs/zh-CN/components/tab.md'),
meta: { title: '选项卡' },
},
{
path: '/zh-CN/components/iconPicker',
component: () => import('../../docs/zh-CN/components/iconPicker.md'),
meta: { title: '图标选择' },
},
{
path: '/zh-CN/components/tree',
component: () => import('../../docs/zh-CN/components/tree.md'),
meta: { title: '树形组件' },
},
{
path: '/zh-CN/components/page',
component: () => import('../../docs/zh-CN/components/page.md'),
meta: { title: '分页' },
},
{
path: '/zh-CN/components/transfer',
component: () => import('../../docs/zh-CN/components/transfer.md'),
meta: { title: '穿梭框' },
},
{
path: '/zh-CN/components/checkbox',
component: () => import('../../docs/zh-CN/components/checkbox.md'),
meta: { title: '复选框' },
},
{
path: '/zh-CN/components/radio',
component: () => import('../../docs/zh-CN/components/radio.md'),
meta: { title: '单选框' },
},
{
path: '/zh-CN/components/input',
component: () => import('../../docs/zh-CN/components/input.md'),
meta: { title: '输入框' },
},
{
path: '/zh-CN/components/textarea',
component: () => import('../../docs/zh-CN/components/textarea.md'),
meta: { title: '文本域' },
},
{
path: '/zh-CN/components/switch',
component: () => import('../../docs/zh-CN/components/switch.md'),
meta: { title: '开关' },
},
{
path: '/zh-CN/components/slider',
component: () => import('../../docs/zh-CN/components/slider.md'),
meta: { title: '滑块' },
},
{
path: '/zh-CN/components/carousel',
component: () => import('../../docs/zh-CN/components/carousel.md'),
meta: { title: '轮播' },
},
{
path: '/zh-CN/components/select',
component: () => import('../../docs/zh-CN/components/select.md'),
meta: { title: '下拉选择' },
},
{
path: '/zh-CN/components/colorPicker',
component: () => import('../../docs/zh-CN/components/colorPicker.md'),
meta: { title: '颜色选择器' },
},
],
},
path: '/zh-CN/components',
redirect: '/zh-CN/components/button',
component: Component,
meta: { title: '组件' },
children: [
{
path: '/zh-CN/components/layout',
component: () => import('../../docs/zh-CN/components/layout.md'),
meta: { title: '布局' },
},
{
path: '/zh-CN/components/color',
component: () => import('../../docs/zh-CN/components/color.md'),
meta: { title: '颜色' },
},
{
path: '/zh-CN/components/container',
component: () => import('../../docs/zh-CN/components/container.md'),
meta: { title: '容器' },
},
{
path: '/zh-CN/components/breadcrumb',
component: () => import('../../docs/zh-CN/components/breadcrumb.md'),
meta: { title: '面包屑' },
},
{
path: '/zh-CN/components/button',
component: () => import('../../docs/zh-CN/components/button.md'),
meta: { title: '按钮' },
},
{
path: '/zh-CN/components/icon',
component: () => import('../../docs/zh-CN/components/icon.md'),
meta: { title: '图标' },
},
{
path: '/zh-CN/components/panel',
component: () => import('../../docs/zh-CN/components/panel.md'),
meta: { title: '面板' },
},
{
path: '/zh-CN/components/animation',
component: () => import('../../docs/zh-CN/components/animation.md'),
meta: { title: '动画' },
},
{
path: '/zh-CN/components/card',
component: () => import('../../docs/zh-CN/components/cards.md'),
meta: { title: '卡片' },
},
{
path: '/zh-CN/components/grid',
component: () => import('../../docs/zh-CN/components/grid.md'),
meta: { title: '栅格' },
},
{
path: '/zh-CN/components/form',
component: () => import('../../docs/zh-CN/components/form.md'),
meta: { title: '表单' },
},
{
path: '/zh-CN/components/badge',
component: () => import('../../docs/zh-CN/components/badge.md'),
meta: { title: '徽章' },
},
{
path: '/zh-CN/components/block',
component: () => import('../../docs/zh-CN/components/block.md'),
meta: { title: '辅助' },
},
{
path: '/zh-CN/components/line',
component: () => import('../../docs/zh-CN/components/line.md'),
meta: { title: '分割' },
},
{
path: '/zh-CN/components/progress',
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'),
meta: { title: '时间线' },
},
{
path: '/zh-CN/components/collapse',
component: () => import('../../docs/zh-CN/components/collapse.md'),
meta: { title: '手风琴' },
},
{
path: '/zh-CN/components/table',
component: () => import('../../docs/zh-CN/components/table.md'),
meta: { title: '表格' },
},
{
path: '/zh-CN/components/avatar',
component: () => import('../../docs/zh-CN/components/avatar.md'),
meta: { title: '头像' },
},
{
path: '/zh-CN/components/field',
component: () => import('../../docs/zh-CN/components/field.md'),
meta: { title: '字段' },
},
{
path: '/zh-CN/components/empty',
component: () => import('../../docs/zh-CN/components/empty.md'),
meta: { title: '空' },
},
{
path: '/zh-CN/components/rate',
component: () => import('../../docs/zh-CN/components/rate.md'),
meta: { title: '评分' },
},
{
path: '/zh-CN/components/dropdown',
component: () => import('../../docs/zh-CN/components/dropdown.md'),
meta: { title: '下拉' },
},
{
path: '/zh-CN/components/tab',
component: () => import('../../docs/zh-CN/components/tab.md'),
meta: { title: '选项卡' },
},
{
path: '/zh-CN/components/iconPicker',
component: () => import('../../docs/zh-CN/components/iconPicker.md'),
meta: { title: '图标选择' },
},
{
path: '/zh-CN/components/tree',
component: () => import('../../docs/zh-CN/components/tree.md'),
meta: { title: '树形组件' },
},
{
path: '/zh-CN/components/page',
component: () => import('../../docs/zh-CN/components/page.md'),
meta: { title: '分页' },
},
{
path: '/zh-CN/components/transfer',
component: () => import('../../docs/zh-CN/components/transfer.md'),
meta: { title: '穿梭框' },
},
{
path: '/zh-CN/components/checkbox',
component: () => import('../../docs/zh-CN/components/checkbox.md'),
meta: { title: '复选框' },
},
{
path: '/zh-CN/components/radio',
component: () => import('../../docs/zh-CN/components/radio.md'),
meta: { title: '单选框' },
},
{
path: '/zh-CN/components/input',
component: () => import('../../docs/zh-CN/components/input.md'),
meta: { title: '输入框' },
},
{
path: '/zh-CN/components/textarea',
component: () => import('../../docs/zh-CN/components/textarea.md'),
meta: { title: '文本域' },
},
{
path: '/zh-CN/components/switch',
component: () => import('../../docs/zh-CN/components/switch.md'),
meta: { title: '开关' },
},
{
path: '/zh-CN/components/slider',
component: () => import('../../docs/zh-CN/components/slider.md'),
meta: { title: '滑块' },
},
{
path: '/zh-CN/components/carousel',
component: () => import('../../docs/zh-CN/components/carousel.md'),
meta: { title: '轮播' },
},
{
path: '/zh-CN/components/select',
component: () => import('../../docs/zh-CN/components/select.md'),
meta: { title: '下拉选择' },
},
{
path: '/zh-CN/components/colorPicker',
component: () => import('../../docs/zh-CN/components/colorPicker.md'),
meta: { title: '颜色选择器' },
},
]
}
]
}
]
export default zhCN

293
docs/src/view/component.vue Normal file
View File

@ -0,0 +1,293 @@
<template>
<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)"
>
<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>
</li>
</ul>
</lay-side>
<lay-body>
<div style="padding: 20px">
<router-view />
</div>
</lay-body>
</template>
<script>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
const router = useRouter()
const currentPath = ref('/zh-CN/guide')
watch(
() => route.path,
(val) => {
currentPath.value = val
},
{
immediate: true,
deep: true,
}
)
const menus = [
{
id: 4,
title: '布局',
subTitle: 'layout',
path: '/zh-CN/components/layout',
},
{
id: 5,
title: '容器',
subTitle: 'container',
path: '/zh-CN/components/container',
},
{
id: 6,
title: '按钮',
subTitle: 'button',
path: '/zh-CN/components/button',
},
{
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,
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',
},
]
const selected = ref(1)
const handleClick = function (menu) {
selected.value = menu.id
router.push(menu.path)
}
return {
menus,
selected,
currentPath,
handleClick,
}
},
}
</script>

83
docs/src/view/guide.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<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)"
>
<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>
</li>
</ul>
</lay-side>
<lay-body>
<div style="padding: 20px">
<router-view />
</div>
</lay-body>
</template>
<script>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
const router = useRouter()
const currentPath = ref('/zh-CN/guide')
watch(
() => route.path,
(val) => {
currentPath.value = val
},
{
immediate: true,
deep: true,
}
)
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',
}
]
const selected = ref(1)
const handleClick = function (menu) {
selected.value = menu.id
router.push(menu.path)
}
return {
menus,
selected,
currentPath,
handleClick,
}
},
}
</script>

66
docs/src/view/home.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<lay-body style="left: 0px;background-color:whitesmoke">
<div class="site-banner">
<div
class="site-banner-bg"
style1="background-image: url(/static/images/layui/banner/autumn.jpg?v=66); background-size: cover;"
></div>
<div class="site-banner-main">
<div class="site-download">
<router-link
class="layui-inline site-down"
to="/zh-CN/guide/getStarted"
>Get Started</router-link
>
</div>
</div>
</div>
<div style="margin-left:10%;margin-right:10%;">
</div>
</lay-body>
</template>
<script>
</script>
<style>
.site-banner {
position: relative;
height: 600px;
text-align: center;
overflow: hidden;
background-color: #393d49;
}
.site-banner-bg {
background-position: center 0;
}
.site-banner-bg,
.site-banner-main {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.site-download {
margin-top: 80px;
font-size: 0;
}
.site-download a {
position: relative;
padding: 0 60px 0 60px;
height: 65px;
line-height: 65px;
border-radius: 6px;
border: 1px solid #c2c2c2;
border-color: rgba(255, 255, 255, 0.2);
font-size: 24px;
color: #ccc;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.site-download a:hover {
background-color: rgba(255, 255, 255, 0.05);
border-radius: 50px;
color: #ccc;
}
</style>

2
src/css/layui.css
View File

@ -1057,10 +1057,10 @@ a cite {
}
.layui-layout-admin .layui-header {
position: fixed;
top: 0;
left: 0;
right: 0;
position: fixed;
background-color: #23262e;
}