📝(component): 更新 GetStarted.md 安装说明

package/component/src/component/affix/index.less

@@ -1,4 +1,4 @@
-.lay-affix-content{
+.layui-affix{
   display: block;
   z-index: 999;
   transition: all 0.3s ease-in-out;

package/component/src/component/affix/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="lay-affix-content" :style="getStyle" ref="dom">
+  <div class="layui-affix" :style="getStyle" ref="dom">
     <slot></slot>
   </div>
 </template>
@@ -11,7 +11,7 @@ export default {
 </script>
 <script setup lang="ts">
 import "./index.less";
-import { ref, onMounted, onUnmounted, nextTick, computed, reactive } from "vue";
+import { ref, onMounted, onUnmounted, nextTick, computed, reactive, StyleValue } from "vue";
 export interface LayAiffxProps {
   offset?: number;
   target?: HTMLElement;
@@ -50,7 +50,7 @@ const getStyle = computed(() => {
     } else {
       style.bottom = fixedOffset - marginBottom + "px";
     }
-    return style;
+    return style as StyleValue;
   }
 });
 //检查是否在窗口内

package/component/src/component/upload/index.vue

@@ -375,12 +375,12 @@ const cutTransaction = () => {};
   >
     <input
       type="file"
-      ref="orgFileInput"
       class="layui-upload-file"
-      :multiple="multiple"
+      ref="orgFileInput"
-      :accept="acceptMime"
       :name="field"
       :field="field"
+      :multiple="multiple"
+      :accept="acceptMime"
       :disabled="disabled"
       @click="clickOrgInput"
       @change="getUploadChange"

package/document-component/src/document/zh-CN/guide/getStarted.md

@@ -17,16 +17,17 @@
   </p>
 <br>
 
-::: title 使用包管理
+::: title 安装组件
 :::
 
-::: describe 使用 npm 工具安装 layui vue, 然后你可以使用打包工具, 如 vite rollup.
+::: describe 使用 npm 工具安装 layui vue，若安装缓慢，可尝试用 pnpm 或其他镜像源。
 :::
 
 ```
 npm install @layui/layui-vue --save
 ```
-::: title 完整引入
+
+::: title 全局注册
 :::
 
 ```js
@@ -37,50 +38,42 @@ import '@layui/layui-vue/lib/index.css'
 
 createApp(App).use(Layui).mount('#app')
 ```
-::: describe 以上代码便完成了 layui-vue 的引入。需要注意的是，样式文件需要单独引入。
+::: describe 以上代码便完成了 layui-vue 的注册。需要注意的是，样式文件需要单独引入。
 :::
 
 ::: title 自动按需
 :::
 
-::: describe 安装 <a href="https://github.com/antfu/unplugin-vue-components" target="_blank" style="color:#5FB878"><code>unplugin-vue-components</code></a> 和 <a href="https://github.com/antfu/unplugin-auto-import" target="_blank" style="color:#5FB878"><code>unplugin-auto-import</code></a> 插件，插件会自动解析模板中用到的组件，并引入组件和样式。
+::: describe 首先你需要安装 <a href="https://github.com/antfu/unplugin-vue-components" target="_blank" style="color:#5FB878"><code>unplugin-vue-components</code></a> 和 <a href="https://github.com/antfu/unplugin-auto-import" target="_blank" style="color:#5FB878"><code>unplugin-auto-import</code></a> 两款插件。
 :::
 
 ```
 npm install -D unplugin-vue-components unplugin-auto-import
 ```
 
-::: describe 修改 vite.config.js 文件
+::: describe 然后修改你的 vite.config.js 或 vue.config.js 的配置。 
 :::
 
 ```js
-// vite.config.ts
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { LayuiVueResolver } from 'unplugin-vue-components/resolvers'
 
 export default {
   plugins: [
-    // ...其它插件
     AutoImport({
       resolvers: [LayuiVueResolver()],
     }),
-    // 自动解析 layui-vue 组件
     Components({
       resolvers: [LayuiVueResolver()],
     }),
   ],
 }
 ```
-
+::: describe Resolver 选项配置。 
-::: describe LayuiVueResolver 类型声明
 :::
 
 ```ts
-export declare function LayuiVueResolver(
-  options?: LayuiVueResolverOptions = {}
-): ComponentResolver
-
 export interface LayuiVueResolverOptions {
   /**
    * 将样式与组件一起导入
@@ -105,10 +98,13 @@ export interface LayuiVueResolverOptions {
 }
 ```
 
-::: title 手动按需
+::: title 手动引入
 :::
 
-::: describe 需要手动引入组件样式
+::: describe 原生支持 es-module 的 tree shaking 用法。
+:::
+
+::: describe 如果你完全使用 layui-vue 构建项目, 我们更推荐全局注册与自动按需的方式。
 :::
 
 ```js
@@ -126,22 +122,7 @@ app.component("LayTable", LayTable);
 app.mount('#app')
 ```
 
-::: title 基础示例
+::: title 在线安装
-:::
-
-```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>
-```
-::: title 浏览器导入
 :::
 
 ::: describe 根据不同的 CDN 提供商有不同的引入方式，我们在这里以 unpkg 举例。
@@ -150,8 +131,7 @@ app.mount('#app')
 ```html
 <!DOCTYPE html>
 <html lang="en">
-
+  <head>
-<head>
     <title>Document</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -162,14 +142,13 @@ app.mount('#app')
     <script src="https://unpkg.com/vue@3"></script>
     <!-- 引入 layui-vue 组件库, 使用全局变量 LayuiVue -->
     <script src="https://unpkg.com/@layui/layui-vue"></script>
-</head>
+  </head>
-
+  <body>
-<body>
     <div id="app">
       <lay-button @click="openLayer">Hello</lay-button>
     </div>
-</body>
+  </body>
-<script>
+  <script>
     const { createApp, ref } = Vue;
     const { layer } = LayuiVue;
 
@@ -184,10 +163,7 @@ app.mount('#app')
       }
     };
 
-  const app = createApp(App); 
+    createApp(App).use(LayuiVue).mount('#app'); 
-  app.use(LayuiVue);
+  </script>
-  app.mount('#app');
-</script>
-
 </html>
 ```

package/document-component/src/layouts/Layout.vue

@@ -120,6 +120,7 @@
                   <lay-color-picker
                     v-model="appStore.themeVariable['--global-neutral-color-8']"
                   ></lay-color-picker>
+                  <lay-button :fluid="true" border="green" border-style="dashed">重置配置</lay-button>
                 </div>
               </template>
             </lay-dropdown>