更新文档

example/docs/zh-CN/components/button.md

@@ -293,6 +293,14 @@ export default {
 
 :::
 
+::: title 主题配置
+:::
+
+```
+@button-primary-color: #009688; // 主题色
+@button-border-radius: 2px; // 圆角
+```
+
 ::: title Button 属性
 :::
 

example/docs/zh-CN/components/icon.md

@@ -4,7 +4,7 @@
 ::: title 基本介绍
 :::
 
-::: describe 语义化的矢量图形。使用图标组件，你需要安装 `@layui/icons-vue` 图标组件包
+::: describe 语义化的矢量图形。使用图标组件，你需要安装 @layui/icons-vue 图标组件包
 :::
 
 ::: title 基础使用

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

@@ -11,6 +11,18 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
+     <ul> 
+      <a name="0-3-7"> </a> 
+      <li> 
+        <h3>0.3.7 <span class="layui-badge-rim">2022-02-07</span></h3> 
+        <ul> 
+          <li>[新增] index.less 样式文件, 支持一定程度的主题定制。</li>
+          <li>[新增] slider 滑块组件 setp 属性, 支持设置步长。</li>
+          <li>[升级] icons-vue 1.0.4 版本。</li>
+          <li>[升级] layer-vue 1.3.3 版本</li>
+        </ul> 
+      </li>
+    </ul>
     <ul> 
       <a name="0-3-6"> </a> 
       <li> 

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

@@ -1,20 +1,18 @@
 ::: title 快速上手
 :::
 
+<img style="margin:20px;margin-left:30px;width:380px;" src="../../../src/assets/start.svg"/>
+
+::: describe 使用 (npm, yarn, pnpm) 工具安装 layui vue, 然后你就可以使用打包工具, 如 vite
+:::
+
 ```
 npm install @layui/layui-vue --save
-```
 
-```
+或
+
 yarn add @layui/layui-vue --save
 ```
-
-```
-pnpm install @layui/layui-vue --save
-```
-
-<br>
-
 ::: title 全局注册
 :::
 
@@ -26,8 +24,8 @@ import '@layui/layui-vue/lib/index.css'
 
 createApp(App).use(Layui).mount('#app')
 ```
-
-<br>
+::: describe 以上代码便完成了 layui-vue 的引入。需要注意的是，样式文件需要单独引入。
+:::
 
 ::: title 按需引入
 :::
@@ -46,8 +44,6 @@ app.component("LayTable", LayTable);
 
 app.mount('#app')
 ```
-<br>
-
 
 ::: title 基础示例
 :::
@@ -64,3 +60,6 @@ app.mount('#app')
   <lay-footer>pearadmin.com</lay-footer>
 </lay-layout>
 ```
+::: describe 您可以从现在起启动您的项目。 对于每个组件的用法，请参考单个组件对应的文档。
+:::
+

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

@@ -1,18 +1,31 @@
 ::: title 定制主题
 :::
 
-::: describe Layui 设计规范上支持一定程度的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。
+::: describe Layui 支持一定程度的主题定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。
 :::
 
+|    |    |
+| -- | -- |
+| <img style="margin:50px;width:60%;" src="../../../src/assets/theme1.svg" />   | <img style="margin:50px;width:60%;" src="../../../src/assets/theme2.svg" /> |
+
 ::: describe 以下是一些最常用的通用变量，所有样式变量可以在 这里 找到。
 :::
 
 ```css
 @global-primary-color: #009688; // 主题色
-@global-checked-color: #5FB878; // 选中色
+@global-checked-color: #5FB878; // 选中色 
 @global-border-radius: 2px; // 圆角度数
 ```
-::: describe 如果以上变量不能满足你的定制需求，可以给我们提 issue。
+::: describe 除全局的主题配置外, 我们还对组件提供定制化的主题配置 
+:::
+
+```css
+@button-primary-color: #009688; // 按钮主题色
+@button-border-radius: 2px; // 按钮圆角度数
+...
+```
+
+::: describe 组件的主题配置会覆盖全局的配置, 组件的定制化配置会在对应的组件文档中看到。
 :::
 
 ::: title 定制方式
@@ -26,5 +39,5 @@
 @import 'your-theme-file.less'; // 用于覆盖上面定义的变量
 ```
 
-::: describe 注意，这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 babel-plugin-import 的 style 属性一起使用。
+::: describe 注意: 样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。
 :::

example/src/view/ecology.vue

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

src/component/button/index.less

@@ -1,5 +1,8 @@
 @import "../../theme/variable.less";
 
+@button-primary-color: @global-primary-color;
+@button-border-radius: @global-border-radius;
+
 .layui-btn {
   height: 38px;
   line-height: 36px;
@@ -9,8 +12,8 @@
   text-align: center;
   white-space: nowrap;
   border: 1px solid transparent;
-  background-color: @global-primary-color;
-  border-radius: @global-border-radius;
+  background-color: @button-primary-color;
+  border-radius: @button-border-radius;
   cursor: pointer;
 }
 

src/component/buttonGroup/index.less

@@ -1,5 +1,8 @@
 @import "../../theme/variable.less";
 
+@button-primary-color: @global-primary-color;
+@button-border-radius: @global-border-radius;
+
 .layui-btn-group {
   vertical-align: middle;
   font-size: 0;
@@ -18,12 +21,12 @@
 
 .layui-btn-group .layui-btn-primary:hover {
   border-color: #d2d2d2;
-  color: @global-primary-color;
+  color: @button-primary-color;
 }
 
 .layui-btn-group .layui-btn:first-child {
   border-left: none;
-  border-radius: @global-border-radius 0 0 @global-border-radius;
+  border-radius: @button-border-radius 0 0 @button-border-radius;
 }
 
 .layui-btn-group .layui-btn-primary:first-child {
@@ -31,7 +34,7 @@
 }
 
 .layui-btn-group .layui-btn:last-child {
-  border-radius: 0 @global-border-radius @global-border-radius 0;
+  border-radius: 0 @button-border-radius @button-border-radius 0;
 }
 
 .layui-btn-group .layui-btn + .layui-btn {

src/component/slider/index.less

@@ -18,7 +18,7 @@
 .layui-slider-btn-v {
   width: 12px;
   height: 12px;
-  background-color: @global-fore-color;
+  background-color: @global-back-color;
   position: absolute;
   border: 2px solid @global-primary-color;
   border-radius: 50%;
@@ -40,7 +40,7 @@
 .layui-slider-line-v {
   width: 100%;
   height: 4px;
-  background-color: @global-fore-color;
+  background-color: #eee;
   position: absolute;
   top: 6px;
 }
@@ -66,9 +66,8 @@
 .layui-slider-vertical-btn {
   width: 12px;
   height: 12px;
-  background-color: @global-fore-color;
+  background-color: @global-back-color;
   position: absolute;
-  // top: -7px;
   border: 2px solid @global-primary-color;
   border-radius: 50%;
   cursor: pointer;
@@ -92,7 +91,7 @@
   height: 100%;
   position: absolute;
   left: 7px;
-  background-color: @global-fore-color;
+  background-color: #eee;
 }
 
 .layui-slider-srange {

src/theme/variable.less

@@ -8,7 +8,7 @@
 @global-border-radius: 2px;
 
 // 前景色  
-@global-fore-color: #ffffff;
+@global-fore-color: #393D49;
 
 // 背景色
-@global-back-color: #393D49;
+@global-back-color: #ffffff;