编写国际化文档 重写主题配置文档

example/docs/zh-CN/guide/locale.md

@@ -0,0 +1,13 @@
+::: title 国际化
+:::
+
+::: describe 目前的默认文案是简体中文，如果需要使用其他语言，可以参考下面的方案。
+:::
+
+```vue
+<template>
+    <lay-config-provider locale="zh_CN">
+        <App />
+    </lay-config-provider>
+</template>
+```

example/docs/zh-CN/guide/theme.md

@@ -1,39 +1,28 @@
 ::: title 定制主题
 :::
 
-::: describe Layui 支持一定程度的主题定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。
+::: describe 全局化配置设置内部组件的主题、语言和组件卸载于其他位置的 DOM 的类名。
 :::
 
+```vue
+<template>
+    <lay-config-provider :themeVariable="themeVariable">
+        <App />
+    </lay-config-provider>
+</template>
+
+<script setup>
+const themeVariable = { 
+    '--global-primary-color':'red',
+    '--global-checked-color':'red'
+}
+</script>
+```
 ::: describe 以下是一些最常用的通用变量，所有样式变量可以在 这里 找到。
 :::
 
-```css
-@global-primary-color: #009688; // 主题色
-@global-checked-color: #5FB878; // 选中色 
-@global-border-radius: 2px; // 圆角度数
 ```
-::: describe 除全局的主题配置外, 我们还对组件提供定制化的主题配置 
+--global-primary-color: #009688;
-:::
 
-```css
+--global-checked-color: #5fb878;
-@button-primary-color: #009688; // 按钮主题色
+```
-@button-border-radius: 2px; // 按钮圆角度数
-...
-```
-
-::: describe 组件的主题配置会覆盖全局的配置, 组件的定制化配置会在对应的组件文档中看到。
-:::
-
-::: title 定制方式
-:::
-
-::: describe 建立一个单独的 less 变量文件，引入这个文件覆盖 index.less 里的变量。
-:::
-
-```css
-@import '@layui/layui-vue/lib/index.less'; // 引入官方提供的 less 样式入口文件
-@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
-```
-
-::: describe 注意: 样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。
-:::

example/src/layouts/Layout.vue

@@ -94,8 +94,6 @@ export default {
     const theme = "light";
 
     const themeVariable = {
-      "--global-primary-color":"red",
-      "--global-checked-color":"red"
     }
 
     return {

example/src/router/zh-CN.ts

@@ -63,6 +63,11 @@ const zhCN = [
             component: () => import("../../docs/zh-CN/guide/theme.md"),
             meta: { title: "主题" },
           },
+          {
+            path: "/zh-CN/guide/locale",
+            component: () => import("../../docs/zh-CN/guide/locale.md"),
+            meta: { title: "语言" },
+          },
           {
             path: "/zh-CN/guide/sponsor",
             component: () => import("../../docs/zh-CN/guide/sponsor.md"),

example/src/view/guide.vue

@@ -92,6 +92,12 @@ export default {
             subTitle: 'theme',
             path: '/zh-CN/guide/theme',
           },
+          {
+            id: 3,
+            title: '语言',
+            subTitle: 'locale',
+            path: '/zh-CN/guide/locale',
+          },
           {
             id: 4,
             title: '问题',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.7",
+  "version": "0.3.8-alpha.1",
   "author": "SleepRite",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

src/provider/index.vue

@@ -57,7 +57,5 @@ watch(() => props.themeVariable, (vars) => {
 </script>
 
 <template>
-  <div class="lay-config-provider">
+  <slot></slot>
-    <slot></slot>
-  </div>
 </template>