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

♻️(document): 调整文档结构

Browse Source
This commit is contained in:
就眠儀式
2022-06-25 20:10:12 +08:00
parent d18425cb2a
commit b86b7d308c
166 changed files with 528 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
package/document-component/src/view/component.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<lay-layout>
<lay-side>
<lay-scroll style="overflow-y: scroll">
<ul class="layui-menu layui-menu-lg layui-menu-docs">
<li
v-for="menu in menus"
:key="menu"
class="layui-menu-item-group"
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="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-scroll>
</lay-side>
<lay-body>
<div
style="
padding: 20px;
margin-right: 180px;
transition: margin 240ms 60ms;
"
>
<router-view />
</div>
</lay-body>
</lay-layout>
</template>
<script>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import menus from "./utils/menus";
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 selected = ref(1);
const handleClick = function (menu) {
selected.value = menu.id;
router.push(menu.path);
};
return {
menus,
selected,
currentPath,
handleClick,
};
},
};
</script>

144
package/document-component/src/view/guide.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<lay-layout>
<lay-side>
<lay-scroll style="overflow-y: scroll">
<ul class="layui-menu layui-menu-lg layui-menu-docs">
<li
v-for="menu in menus"
:key="menu"
class="layui-menu-item-group"
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="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-scroll>
</lay-side>
<lay-body>
<div style="padding: 20px">
<router-view />
</div>
</lay-body>
</lay-layout>
</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: "基础",
children: [
{
id: 1,
title: "介绍",
subTitle: "introduce",
path: "/zh-CN/guide/introduce",
},
{
id: 2,
title: "安装",
subTitle: "started",
path: "/zh-CN/guide/getStarted",
},
{
id: 3,
title: "更新",
subTitle: "change",
path: "/zh-CN/guide/changelog",
},
{
id: 4,
title: "主题",
subTitle: "theme",
path: "/zh-CN/guide/theme",
},
{
id: 5,
title: "夜间",
subTitle: "dark",
path: "/zh-CN/guide/dark",
},
{
id: 6,
title: "语言",
subTitle: "locale",
path: "/zh-CN/guide/locale",
},
{
id: 7,
title: "问题",
subTitle: "problem",
path: "/zh-CN/guide/problem",
},
{
id: 8,
title: "插件",
subTitle: "member",
path: "/zh-CN/guide/plugin",
},
{
id: 9,
title: "团队",
subTitle: "member",
path: "/zh-CN/guide/member",
},
],
},
];
const selected = ref(1);
const handleClick = function (menu) {
selected.value = menu.id;
router.push(menu.path);
};
return {
menus,
selected,
currentPath,
handleClick,
};
},
};
</script>

350
package/document-component/src/view/index.vue Normal file
View File

@@ -0,0 +1,350 @@
<template>
<div class="site-container">
<div class="site-banner">
<div class="site-banner-main">
<div class="site-zfj site-zfj-anim">
<img
src="../assets/logo-png.png"
style="width: 220px; border-radius: 10px"
/>
</div>
<div class="layui-anim site-desc site-desc-anim">
<p class="web-font-desc">layui - vue</p>
<cite>{{ t("home.description") }}</cite>
</div>
<div class="site-download">
<router-link class="layui-inline site-down" to="/zh-CN/guide">
Get Started
</router-link>
<a
class="layui-inline site-down"
href="javascript:void(0);"
@click="changeTheme"
>
{{ appStore.theme === "dark" ? "Turn Off" : "Turn On" }}
</a>
</div>
<div class="site-version">
<span
>{{ t("home.version") }}：<cite class="site-showv">
{{ version }}
</cite></span
>
<span
>{{ t("home.download") }}：<em class="site-showdowns"
>13,525</em
></span
>
</div>
<div class="site-banner-other">
<a
href="https://gitee.com/layui-vue"
target="_blank"
rel="nofollow"
class="site-star"
>
<i class="layui-icon"></i> Star <cite id="getStars">1215</cite>
</a>
<a
href="https://gitee.com/layui-vue"
target="_blank"
rel="nofollow"
class="site-fork"
>
Gitee
</a>
<a
href="https://github.com/layui-vue"
target="_blank"
rel="nofollow"
class="site-fork"
>
Github
</a>
</div>
</div>
</div>
<div class="box-list">
<lay-row :space="30">
<lay-col :md="6" :sm="12" :xs="12">
<div class="box">
<h1 class="title">🌈 Classic design</h1>
<p class="details">layui css.</p>
</div>
</lay-col>
<lay-col :md="6" :sm="12" :xs="12">
<div class="box">
<h1 class="title">🐝 Small volume</h1>
<p class="details">only 8.5 MB.</p>
</div>
</lay-col>
<lay-col :md="6" :sm="12" :xs="12">
<div class="box">
<h1 class="title">🍬 Setup script</h1>
<p class="details">use grammar sugar.</p>
</div>
</lay-col>
<lay-col :md="6" :sm="12" :xs="12">
<div class="box">
<h1 class="title">😋 Quick build</h1>
<p class="details">easy to use</p>
</div>
</lay-col>
</lay-row>
</div>
<div class="footer footer-index">
<p>Released under the <a href="/index.html">MIT License</a>.</p>
<p>Copyright © 2021-2022 layui-vue.com</p>
</div>
</div>
</template>
<script>
import { inject } from "vue";
import { useI18n } from "vue-i18n";
import { useAppStore } from "../store/app";
export default {
name: "index",
setup() {
const { t } = useI18n();
const appStore = useAppStore();
const changeTheme = () => {
if (appStore.theme === "dark") {
appStore.theme = "light";
} else {
appStore.theme = "dark";
}
};
const version = inject("version");
return {
t,
version,
appStore,
changeTheme,
};
},
};
</script>
<style>
#app,
html,
body {
height: 100%;
}
.site-container {
background: #fff;
margin-top: 60px;
height: 100%;
width: 100%;
}
.site-banner {
overflow: hidden;
text-align: center;
position: relative;
height: calc(100% - 60px);
background-image: url(../assets/background.svg);
background-repeat: no-repeat;
background-size: 100%;
}
.site-banner-main {
display: flex;
flex-direction: column;
height: calc(100vh - 180px);
justify-content: center;
position: relative;
text-align: center;
}
.site-download {
margin-top: 72px;
font-size: 0;
}
.site-download a {
position: relative;
padding: 0 20px 0 20px;
height: 40px;
line-height: 40px;
border-radius: 4px;
background: #f1f1f1;
border: 1px solid #f1f1f1;
font-size: 16px;
color: #476582;
font-weight: 500;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
transition: all 0.5s;
-webkit-transition: all 0.5s;
letter-spacing: 0.2px;
}
.site-download a:hover {
border-radius: 10px;
}
.site-download a:first-child {
background: #009688;
color: white;
}
.site-download a + a {
margin-left: 20px;
}
.site-zfj {
padding-top: 25px;
height: 220px;
}
.site-zfj-anim i {
-webkit-animation-name: site-zfj;
animation-name: site-zfj;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.site-zfj i {
position: absolute;
left: 50%;
top: 50px;
width: 200px;
height: 200px;
margin-left: -100px;
font-size: 180px;
color: #c2c2c2;
}
.site-desc-anim {
-webkit-animation-name: site-desc;
animation-name: site-desc;
}
.site-desc {
position: relative;
height: 70px;
margin-top: 20px;
}
.site-desc .web-font-desc {
color: #fff;
color: #213547;
font-size: 52px;
opacity: 0.82;
}
.web-font-desc {
font-size: 76px;
line-height: 1.25;
font-weight: 900;
letter-spacing: -1.5px;
max-width: 960px;
margin: 0 auto;
}
.site-desc cite {
position: absolute;
bottom: -40px;
left: 0;
width: 100%;
color: rgba(60, 60, 60, 0.7);
font-style: normal;
}
.site-version {
position: relative;
margin-top: 18px;
color: rgba(60, 60, 60, 0.7);
font-size: 12px;
}
.site-version span {
padding: 0 3px;
}
.site-version * {
font-style: normal;
}
.site-version a {
color: rgba(60, 60, 60, 0.7);
text-decoration: none;
margin-top: -4px;
}
.site-banner-other {
position: relative;
left: 0;
top: 40px;
bottom: 90px;
width: 100%;
text-align: center;
font-size: 0;
}
.box-list {
padding: 50px 250px;
}
.box {
border: 1px solid rgba(60, 60, 60, 0.12);
border-radius: 12px;
padding: 24px;
height: 100%;
background-color: #f9f9f9;
}
.box .title {
line-height: 24px;
font-size: 16px;
font-weight: 600;
}
.box .details {
padding-top: 8px;
line-height: 24px;
font-size: 14px;
font-weight: 500;
color: rgba(60, 60, 60, 0.7);
}
.site-container .layui-field-title {
border-top: 1px solid #d2d2d2;
}
.site-banner-other a {
display: inline-block;
vertical-align: middle;
height: 28px;
line-height: 28px;
margin: 0 6px;
padding: 0 8px;
border-radius: 4px;
color: rgba(60, 60, 60, 0.7);
border: 1px solid rgba(60, 60, 60, 0.7);
font-size: 14px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.footer {
width: 100%;
padding: 30px 0px;
line-height: 30px;
text-align: center;
border-top: 1px solid #eee;
color: rgba(60, 60, 60, 0.7);
font-weight: 300;
font-size: 13.6px;
background: #f9f9f9;
}
</style>

118
package/document-component/src/view/resource.vue Normal file
View File

@@ -0,0 +1,118 @@
<template>
<div style="margin-top: 60px; width: 80%" class="layui-container">
<blockquote
class="layui-quote layui-text"
style="margin: 30px 0; letter-spacing: 1px"
>
以写作为工具，为道途，先帮助自己一程，再以自己的领悟帮助他人一程,
这是一种服务 - 庆山
</blockquote>
<fieldset class="layui-field layui-field-title">
<legend style="margin-bottom: 20px; text-align: center">独立组件</legend>
<div class="layui-field-box">
<ul class="layui-row layui-col-space6">
<li class="layui-col-sm12">
<div class="alone">
<a
href="https://gitee.com/layui/layui-vue/tree/next/package/layer"
target="_blank"
>layer - vue<cite>通用型弹出层组件</cite></a
>
</div>
</li>
<li class="layui-col-sm12">
<div class="alone">
<a
href="https://gitee.com/layui/layui-vue/tree/next/package/icons"
target="_blank"
>icons - vue<cite>图标组件化解决方案</cite></a
>
</div>
</li>
</ul>
</div>
</fieldset>
<fieldset class="layui-field layui-field-title">
<legend style="margin-bottom: 20px; text-align: center">后台模板</legend>
<div class="layui-field-box">
<ul class="layui-row layui-col-space6">
<li class="layui-col-sm24">
<div class="alone">
<a
href="https://gitee.com/layui-vue/layui-vue-admin"
target="_blank"
>layui - admin<cite>通用型 vue 3.0 后台模板</cite></a
>
</div>
</li>
</ul>
</div>
</fieldset>
<fieldset class="layui-field layui-field-title">
<legend style="margin-bottom: 20px; text-align: center">设计资源</legend>
<div class="layui-field-box">
<ul class="layui-row layui-col-space6">
<li class="layui-col-sm24">
<div class="alone">
<a
href="https://www.axured.cn/assets/axurefiles/d959191ea7d3a46378456fbd7d72f44f_215/start.html?#g=1&p=%E4%BD%9C%E5%93%81%E4%BB%8B%E7%BB%8D"
target="_blank"
>layui - axure<cite>基于 layui 的 axure 原型库</cite></a
>
</div>
</li>
</ul>
</div>
</fieldset>
<fieldset class="layui-field layui-field-title">
<legend style="margin-bottom: 20px; text-align: center">开发插件</legend>
<div class="layui-field-box">
<ul class="layui-row layui-col-space6">
<li class="layui-col-sm24">
<div class="alone">
<a
href="https://marketplace.visualstudio.com/items?itemName=morning-star.layui-vue-helper"
target="_blank"
>layui - helper<cite> Visual Studio Code 辅助开发插件</cite></a
>
</div>
</li>
</ul>
</div>
</fieldset>
</div>
<div class="footer footer-index">
<p>Released under the <a href="/index.html">MIT License</a>.</p>
<p>Copyright © 2021-2022 layui-vue.com</p>
</div>
</template>
<style>
@import "@layui/layui-vue/es/container/index.css";
@import "@layui/layui-vue/es/quote/index.css";
@import "@layui/layui-vue/es/field/index.css";
.alone {
text-align: center;
background-color: #009688;
color: #fff;
font-weight: 300;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.alone:hover a {
color: white !important;
background-color: #5fb878;
}
.alone a {
display: block;
padding: 50px 20px;
color: #fff;
font-size: 30px;
}
.alone a cite {
display: block;
padding-top: 10px;
font-size: 14px;
letter-spacing: 2px;
}
</style>

412
package/document-component/src/view/utils/menus.ts Normal file
View File

@@ -0,0 +1,412 @@
const menus = [
{
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: 101,
title: "过渡",
subTitle: "transition",
path: "/zh-CN/components/transition",
},
{
id: 102,
title: "全屏",
subTitle: "fullscreen",
path: "/zh-CN/components/fullscreen",
},
{
id: 103,
title: "波纹",
subTitle: "ripple",
path: "/zh-CN/components/ripple",
},
],
},
{
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: "面板",
subTitle: "panel",
path: "/zh-CN/components/panel",
},
{
id: 9,
title: "卡片",
subTitle: "card",
path: "/zh-CN/components/card",
},
{
id: 10,
title: "骨架",
subTitle: "skeleton",
path: "/zh-CN/components/skeleton",
},
],
},
{
id: 1,
title: "导航",
children: [
{
id: 16,
title: "菜单",
subTitle: "menu",
path: "/zh-CN/components/menu",
},
{
id: 17,
title: "面包屑",
subTitle: "breadcrumb",
path: "/zh-CN/components/breadcrumb",
},
{
id: 17,
title: "页头",
subTitle: "pageHeader",
path: "/zh-CN/components/pageheader",
},
{
id: 28,
title: "选项卡",
subTitle: "tab",
path: "/zh-CN/components/tab",
},
{
id: 27,
title: "下拉菜单",
subTitle: "dropdown",
path: "/zh-CN/components/dropdown",
},
{
id: 42,
title: "返回顶部",
subTitle: "backtop",
path: "/zh-CN/components/backtop",
},
],
},
{
id: 1,
title: "表单",
children: [
{
id: 36,
title: "开关",
subTitle: "switch",
path: "/zh-CN/components/switch",
},
{
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: 341,
title: "数字输入框",
subTitle: "inputNumber",
path: "/zh-CN/components/inputNumber",
},
{
id: 35,
title: "文本域",
subTitle: "textarea",
path: "/zh-CN/components/textarea",
},
{
id: 39,
title: "下拉选择",
subTitle: "select",
path: "/zh-CN/components/select",
},
{
id: 40,
title: "颜色选择器",
subTitle: "colorPicker",
path: "/zh-CN/components/colorPicker",
},
{
id: 40,
title: "日期选择器",
subTitle: "datePicker",
path: "/zh-CN/components/datePicker",
},
{
id: 40,
title: "级联选择器",
subTitle: "cascader",
path: "/zh-CN/components/cascader",
},
{
id: 40,
title: "文件上传",
subTitle: "upload",
path: "/zh-CN/components/upload",
},
{
id: 29,
title: "图标选择器",
subTitle: "iconPicker",
path: "/zh-CN/components/iconPicker",
},
{
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: 43,
title: "数字滚动",
subTitle: "countUp",
path: "/zh-CN/components/countup",
},
],
},
{
id: 1,
title: "辅助",
children: [
{
id: 13,
title: "徽章",
subTitle: "badge",
path: "/zh-CN/components/badge",
},
{
id: 14,
title: "引用",
subTitle: "quote",
path: "/zh-CN/components/quote",
},
{
id: 15,
title: "分割",
subTitle: "line",
path: "/zh-CN/components/line",
},
{
id: 24,
title: "字段",
subTitle: "field",
path: "/zh-CN/components/field",
},
{
id: 25,
title: "文字提示",
subTitle: "tooltip",
path: "/zh-CN/components/tooltip",
},
{
id: 99,
title: "分步",
subTitle: "step",
path: "/zh-CN/components/step",
},
{
id: 100,
title: "分割面板",
subTitle: "splitPanel",
path: "/zh-CN/components/splitPanel",
},
{
id: 100,
title: "异常",
subTitle: "exception",
path: "/zh-CN/components/exception",
},
{
id: 100,
title: "结果",
subTitle: "result",
path: "/zh-CN/components/result",
},
{
id: 100,
title: "虚拟滚动",
subTitle: "scroll",
path: "/zh-CN/components/scroll",
},
{
id: 114,
title: "通告栏",
subTitle: "noticeBar",
path: "/zh-CN/components/noticeBar",
},
],
},
{
id: 1,
title: "反馈",
children: [
{
id: 90,
title: "弹层",
subTitle: "modal",
path: "/zh-CN/components/modal",
},
{
id: 91,
title: "加载",
subTitle: "load",
path: "/zh-CN/components/load",
},
{
id: 92,
title: "询问",
subTitle: "confirm",
path: "/zh-CN/components/confirm",
},
{
id: 93,
title: "消息",
subTitle: "msg",
path: "/zh-CN/components/msg",
},
{
id: 94,
title: "抽屉",
subTitle: "drawer",
path: "/zh-CN/components/drawer",
},
],
},
];
export default menus;