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

document internationalization

Browse Source
This commit is contained in:
就眠儀式 2022-02-11 18:28:35 +08:00
parent 9f8c08558e
commit 32cd80145e
20 changed files with 258 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
example/docs/zh-CN/components/block.md → example/docs/zh-CN/components/quote.md
View File

@ -7,7 +7,7 @@
::: demo
<template>
<lay-block>引用区域的文字</lay-block>
<lay-quote>引用区域的文字</lay-quote>
</template>
<script>
@ -30,7 +30,7 @@ export default {
::: demo
<template>
<lay-block nm="true">引用区域的文字</lay-block>
<lay-quote type="nm">引用区域的文字</lay-quote>
</template>
<script>
@ -50,7 +50,7 @@ export default {
:::
::: title Block 属性
::: title Quote 属性
:::
::: table

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

@ -9,7 +9,7 @@
<br>
::: block
::: quote
layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式

30
example/src/layouts/Layout.vue
View File

@ -1,7 +1,7 @@
<template>
<lay-config-provider
:locale="locale"
:theme="theme"
:locale="locale"
:locales="locales"
:themeVariable="themeVariable">
<lay-layout class="layui-layout-document">
@ -79,23 +79,16 @@ export default {
setup() {
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const currentPath = ref("/zh-CN/guide");
// 当前语言
const locale = ref('zh_CN');
// 扩展语言包
const currentPath = ref("/zh-CN/guide");
const locales = [
{name:'zh_CN',locale: zh_CN, merge: true},
{name:'en_US',locale: en_US, merge: true}
]
// 当前主题
{name:'en_US',locale: en_US, merge: true},
];
const theme = "light";
// 主题变量
const themeVariable = {
}
const themeVariable = {}
const menus = [];
@ -105,11 +98,9 @@ export default {
});
});
watch(
() => route.path, (val) => {
watch(() => route.path, (val) => {
currentPath.value = val;
},{immediate: true, deep: true}
);
},{immediate: true, deep: true});
const handleClick = function (menu) {
router.push(menu.path);
@ -125,15 +116,17 @@ export default {
theme,
locale,
locales,
themeVariable,
currentPath,
handleClick,
changeLocale,
themeVariable
};
},
};
</script>
<style>
.layui-layout-document > .layui-header {
z-index: 9999;
width: 100%;
@ -164,6 +157,7 @@ export default {
left: 15px;
top: 16px;
}
.layui-header > .layui-nav {
background-color: transparent;
}
@ -183,9 +177,11 @@ export default {
.layui-menu-docs {
padding-top: 10px;
}
.layui-menu-docs .layui-menu-body-title .layui-font-gray {
padding-left: 10px;
}
.layui-side hr {
margin: 8px;
}

4
example/src/plugin/common-plugins.ts
View File

@ -5,7 +5,7 @@ import highlight from "./highlight";
import snippet from "./snippet";
import demo from "./demo";
import createTitle from "./create-title";
import createBlock from "./create-block";
import createQuote from "./create-quote";
import createDescribe from "./create-describe";
import createTable from "./create-table";
import createComment from "./create-comment";
@ -29,7 +29,7 @@ const plugins = [
.use(preWrapper)
.use(container, "demo", demo)
.use(...createTable("table", ""))
.use(...createBlock("block", ""))
.use(...createQuote("quote", ""))
.use(...createTitle("title", ""))
.use(...createDescribe("describe", ""))
.use(...createComment("comment", ""))

4
example/src/plugin/create-block.ts → example/src/plugin/create-quote.ts
View File

@ -18,9 +18,9 @@ export default function createContainer(
const token = tokens[idx]
const info = token.info.trim().slice(klass.length).trim()
if (token.nesting === 1) {
return `<lay-block style="margin-left:0px;margin-right:0px;margin-top:20px;margin-bottom:40px;">${info}`
return `<lay-quote style="margin-left:0px;margin-right:0px;margin-top:20px;margin-bottom:40px;">${info}`
} else {
return '</lay-block>\n'
return '</lay-quote>\n'
}
},
},

4
example/src/router/zh-CN.ts
View File

@ -144,8 +144,8 @@ const zhCN = [
meta: { title: "徽章" },
},
{
path: "/zh-CN/components/block",
component: () => import("../../docs/zh-CN/components/block.md"),
path: "/zh-CN/components/quote",
component: () => import("../../docs/zh-CN/components/quote.md"),
meta: { title: "辅助" },
},
{

8
example/src/view/environment.vue
View File

@ -3,11 +3,11 @@
style="margin-top: 60px; height: 100%; width: 80%"
class="layui-container"
>
<blockquote class="layui-elem-quote layui-text" style="margin: 30px 0">
<blockquote class="layui-quote layui-text" style="margin: 30px 0">
尽管 layui-vue 中包含了这些组件，但因为它们受众群体广泛或应用广泛，特从 layui-vue
中抽取出来个副本，可独立引用。我们也会对它们进行同步维护。
</blockquote>
<fieldset class="layui-elem-field layui-field-title">
<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">
@ -28,7 +28,7 @@
</ul>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<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">
@ -42,7 +42,7 @@
</ul>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<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">

6
example/src/view/utils/menus.ts
View File

@ -269,9 +269,9 @@ const menus = [
},
{
id: 14,
title: "区块",
subTitle: "block",
path: "/zh-CN/components/block",
title: "引用",
subTitle: "quote",
path: "/zh-CN/components/quote",
},
{
id: 15,

16
src/component/block/index.less
View File

@ -1,16 +0,0 @@
@import "../../theme/variable.less";
.layui-elem-quote {
margin-bottom: 10px;
padding: 15px;
line-height: 1.6;
border-left: 5px solid @global-checked-color;
border-radius: 0 2px 2px 0;
background-color: #fafafa;
}
.layui-quote-nm {
border-style: solid;
border-width: 1px 1px 1px 5px;
background: 0 0;
}

19
src/component/block/index.vue
View File

@ -1,19 +0,0 @@
<script lang="ts">
export default {
name: "LayBlock",
};
</script>
<script setup lang="ts">
import "./index.less";
const props = defineProps<{
nm?: boolean | string;
}>();
</script>
<template>
<blockquote class="layui-elem-quote" :class="{ 'layui-quote-nm': nm }">
<slot></slot>
</blockquote>
</template>

38
src/component/field/index.less
View File

@ -0,0 +1,38 @@
@import "../../theme/variable.less";
@field-border-color: var(--field-border-color);
@field-border-radius: var(--field-border-radius);
:root {
--field-border-color: @global-border-color;
--field-border-radius: @global-border-radius;
}
.layui-field {
margin-bottom: 10px;
padding: 0;
border-width: 1px;
border-color: @field-border-color;
border-style: solid;
}
.layui-field legend {
margin-left: 20px;
padding: 0 10px;
font-size: 20px;
font-weight: 300;
}
.layui-field-title {
margin: 10px 0 20px;
border-width: 1px 0 0;
}
.layui-field-box {
padding: 15px;
}
.layui-field-title .layui-field-box {
padding: 10px 0;
}

5
src/component/field/index.vue
View File

@ -5,6 +5,7 @@ export default {
</script>
<script setup lang="ts">
import "./index.less";
import { useSlots } from "vue";
const slot = useSlots();
@ -17,14 +18,14 @@ const props = defineProps<LayFieldProps>();
</script>
<template>
<fieldset v-if="slot.default" class="layui-elem-field">
<fieldset v-if="slot.default" class="layui-field">
<legend>{{ title }}</legend>
<div class="layui-field-box">
<slot></slot>
</div>
</fieldset>
<fieldset v-else class="layui-elem-field layui-field-title">
<fieldset v-else class="layui-field layui-field-title">
<legend>
<a name="docend">{{ title }}</a>
</legend>

22
src/component/quote/index.less Normal file
View File

@ -0,0 +1,22 @@
@import "../../theme/variable.less";
@block-default-color: var(--block-default-color);
@block-border-radius: var(--block-border-radius);
:root {
--block-default-color: @global-checked-color;
--block-border-radius: @global-border-radius;
}
.layui-quote {
padding: 15px;
line-height: 1.6;
margin-bottom: 10px;
border-left: 5px solid @block-default-color;
border-radius: @block-border-radius;
background-color: #fafafa;
}
.layui-quote-nm {
border-left: 5px solid #eee;
}

0
src/component/block/index.ts → src/component/quote/index.ts
View File

22
src/component/quote/index.vue Normal file
View File

@ -0,0 +1,22 @@
<script lang="ts">
export default {
name: "LayQuote",
};
</script>
<script setup lang="ts">
import "./index.less";
export interface LayQuoteProps {
type?: string;
}
const props = defineProps<LayQuoteProps>();
</script>
<template>
<blockquote class="layui-quote" :class="[type ? `layui-quote-${props.type}` : '']">
<slot></slot>
</blockquote>
</template>

18
src/component/select/index.less
View File

@ -39,3 +39,21 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
}
}
}
.layui-select {
height: 38px;
line-height: 1.3;
line-height: 38px\9;
border-width: 1px;
border-style: solid;
background-color: #fff;
border-color: #eee;
color: rgba(0, 0, 0, 0.85);
border-radius: 2px;
padding: 0 10px;
}
.layui-select::-webkit-input-placeholder {
line-height: 1.3;
}

21
src/component/skeleton/index.less
View File

@ -1,38 +1,39 @@
.lay-skeleton{
.lay-skeleton {
.lay-skeleton-item {
height: 16px;
border-radius: 5px;
margin-bottom: 16px;
background: #eeeeee;
}
.lay-skeleton-type--p{
.lay-skeleton-type--p {
height: 16px;
border-radius: 5px;
margin-bottom: 16px;
background: #eeeeee;
}
.lay-skeleton-type--image{
.lay-skeleton-type--image {
width: 240px;
height: 240px;
background: #eeeeee;
display: flex;
justify-content: center;
align-items: center;
i{
i {
font-size: 40px;
}
}
}
.lay-skeleton-animated {
.lay-skeleton-type--image{
.lay-skeleton-type--image {
width: 240px;
height: 240px !important;
display: flex;
justify-content: center;
align-items: center;
i{
i {
font-size: 40px;
}
}
@ -41,16 +42,12 @@
border-radius: 5px;
margin-bottom: 16px;
background: #eeeeee;
background: linear-gradient(
90deg,#f2f2f2 25%,#ececec 37%,#f2f2f2 63%);
background: linear-gradient(90deg, #f2f2f2 25%, #ececec 37%, #f2f2f2 63%);
background-size: 400% 100%;
animation: lay-skeleton-loading 1.2s ease infinite;
}
}
.lay-skeleton-first {
width: 30%;
}
@ -59,8 +56,6 @@
width: 62.8%;
}
@keyframes lay-skeleton-loading {
0% {
background-position: 100% 50%;

113
src/component/transfer/index.less
View File

@ -1,3 +1,116 @@
@import "../../theme/variable.less";
@transfer-box-border-radius: var(--transfer-box-border-radius);
:root {
--transfer-box-border-radius: @global-border-radius;
}
.layui-transfer .layui-btn + .layui-btn {
margin-left: 0;
}
.layui-transfer-box,
.layui-transfer-header,
.layui-transfer-search {
border-width: 0;
border-style: solid;
border-color: #eee;
}
.layui-transfer-box {
position: relative;
border-width: 1px;
width: 200px;
height: 360px;
border-radius: @transfer-box-border-radius;
background-color: #fff;
}
.layui-transfer-box .layui-form-checkbox {
width: 100%;
margin: 0 !important;
}
.layui-transfer-header {
height: 38px;
line-height: 38px;
padding: 0 10px;
border-bottom-width: 1px;
}
.layui-transfer-search {
position: relative;
padding: 10px;
border-bottom-width: 1px;
}
.layui-transfer-search .layui-input {
height: 32px;
padding-left: 30px;
font-size: 12px;
}
.layui-transfer-search .layui-icon-search {
position: absolute;
left: 20px;
top: 50%;
margin-top: -8px;
color: #666;
}
.layui-transfer-active {
margin: 0 15px;
}
.layui-transfer-active .layui-btn {
display: block;
margin: 0;
padding: 0 15px;
background-color: #5fb878;
border-color: #5fb878;
color: #fff;
}
.layui-transfer-active .layui-btn-disabled {
background-color: #fbfbfb;
border-color: #eee;
color: #d2d2d2;
}
.layui-transfer-active .layui-btn:first-child {
margin-bottom: 15px;
}
.layui-transfer-active .layui-btn .layui-icon {
margin: 0;
font-size: 14px !important;
}
.layui-transfer-data {
padding: 5px 0;
overflow: auto;
}
.layui-transfer-data li {
height: 32px;
line-height: 32px;
padding: 0 10px;
}
.layui-transfer-data li:hover {
background-color: #f6f6f6;
transition: 0.5s all;
}
.layui-transfer-data .layui-none {
padding: 15px 10px;
text-align: center;
color: #999;
}
.layui-transfer-active,
.layui-transfer-box {
display: inline-block;
vertical-align: middle;
}

6
src/index.ts
View File

@ -29,7 +29,7 @@ import LayCol from "./component/col/index";
import LayRow from "./component/row/index";
import LayInput from "./component/input/index";
import LayBadge from "./component/badge/index";
import LayBlock from "./component/block/index";
import LayQuote from "./component/quote/index";
import LayLine from "./component/line/index";
import LayTimeline from "./component/timeline/index";
import LayTimelineItem from "./component/timelineItem/index";
@ -100,7 +100,7 @@ const components: Record<string, Component> = {
LayCol,
LayInput,
LayBadge,
LayBlock,
LayQuote,
LayLine,
LayTimeline,
LayTimelineItem,
@ -182,7 +182,7 @@ export {
LayCol,
LayInput,
LayBadge,
LayBlock,
LayQuote,
LayLine,
LayTimeline,
LayTimelineItem,

153
src/theme/index.less
View File

@ -309,33 +309,6 @@ a cite {
box-sizing: border-box;
}
.layui-elem-field {
margin-bottom: 10px;
padding: 0;
border-width: 1px;
border-style: solid;
}
.layui-elem-field legend {
margin-left: 20px;
padding: 0 10px;
font-size: 20px;
font-weight: 300;
}
.layui-field-title {
margin: 10px 0 20px;
border-width: 1px 0 0;
}
.layui-field-box {
padding: 15px;
}
.layui-field-title .layui-field-box {
padding: 10px 0;
}
.layui-progress {
position: relative;
height: 6px;
@ -510,7 +483,6 @@ a cite {
.layui-colla-content,
.layui-colla-item,
.layui-collapse,
.layui-elem-field,
.layui-form-pane .layui-form-item[pane],
.layui-form-pane .layui-form-label,
.layui-iconpicker,
@ -519,7 +491,6 @@ a cite {
.layui-layedit,
.layui-layedit-tool,
.layui-quote-nm,
.layui-select,
.layui-tab-bar,
.layui-tab-card,
.layui-tab-title,
@ -691,25 +662,6 @@ a cite {
-webkit-appearance: none;
}
.layui-select {
height: 38px;
line-height: 1.3;
line-height: 38px\9;
border-width: 1px;
border-style: solid;
background-color: #fff;
color: rgba(0, 0, 0, 0.85);
border-radius: @global-border-radius;
}
.layui-select::-webkit-input-placeholder {
line-height: 1.3;
}
.layui-select {
padding: 0 10px;
}
.layui-form input[type="checkbox"],
.layui-form input[type="radio"],
.layui-form select {
@ -2776,12 +2728,6 @@ body .layui-util-face .layui-layer-content {
display: none;
}
.layui-transfer-active,
.layui-transfer-box {
display: inline-block;
vertical-align: middle;
}
.layui-util-face ul {
position: relative;
width: 372px;
@ -2823,105 +2769,6 @@ body .layui-util-face .layui-layer-content {
font-size: 12px;
}
.layui-transfer-box,
.layui-transfer-header,
.layui-transfer-search {
border-width: 0;
border-style: solid;
border-color: #eee;
}
.layui-transfer-box {
position: relative;
border-width: 1px;
width: 200px;
height: 360px;
border-radius: 2px;
background-color: #fff;
}
.layui-transfer-box .layui-form-checkbox {
width: 100%;
margin: 0 !important;
}
.layui-transfer-header {
height: 38px;
line-height: 38px;
padding: 0 10px;
border-bottom-width: 1px;
}
.layui-transfer-search {
position: relative;
padding: 10px;
border-bottom-width: 1px;
}
.layui-transfer-search .layui-input {
height: 32px;
padding-left: 30px;
font-size: 12px;
}
.layui-transfer-search .layui-icon-search {
position: absolute;
left: 20px;
top: 50%;
margin-top: -8px;
color: #666;
}
.layui-transfer-active {
margin: 0 15px;
}
.layui-transfer-active .layui-btn {
display: block;
margin: 0;
padding: 0 15px;
background-color: @global-checked-color;
border-color: @global-checked-color;
color: #fff;
}
.layui-transfer-active .layui-btn-disabled {
background-color: #fbfbfb;
border-color: #eee;
color: #d2d2d2;
}
.layui-transfer-active .layui-btn:first-child {
margin-bottom: 15px;
}
.layui-transfer-active .layui-btn .layui-icon {
margin: 0;
font-size: 14px !important;
}
.layui-transfer-data {
padding: 5px 0;
overflow: auto;
}
.layui-transfer-data li {
height: 32px;
line-height: 32px;
padding: 0 10px;
}
.layui-transfer-data li:hover {
background-color: #f6f6f6;
transition: 0.5s all;
}
.layui-transfer-data .layui-none {
padding: 15px 10px;
text-align: center;
color: #999;
}
.layui-colorpicker {
width: 26px;
height: 26px;