From ce938c5b5b52022bf8b51553ed4599b7a0ebfdfa Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Fri, 4 Mar 2022 15:07:50 +0800
Subject: [PATCH] refactor(site): optimize sidebar scroll

---
 README.en-US.md                               | 65 +++++++++++++++++++
 README.md                                     | 28 ++++++--
 packages/meve-cli/site/App.vue                | 12 ++++
 .../meve-cli/site/components/AppSidebar.vue   | 12 ++--
 packages/meve-ui/docs/home.zh-CN.md           | 22 ++-----
 packages/meve-ui/docs/quickstart.zh-CN.md     | 54 +++++++++++++++
 packages/meve-ui/meve.config.js               |  5 ++
 7 files changed, 170 insertions(+), 28 deletions(-)
 create mode 100644 README.en-US.md
 create mode 100644 packages/meve-ui/docs/quickstart.zh-CN.md

diff --git a/README.en-US.md b/README.en-US.md
new file mode 100644
index 0000000..681f75c
--- /dev/null
+++ b/README.en-US.md
@@ -0,0 +1,65 @@
+<div align="center">
+  <a href="https://artsdt.github.io/meve/">
+    <img src="https://artsdt.github.io/meve/logo_1.svg" width="150">
+  </a>
+  <h1>MEVE UI</h1>
+  <p>Vue2 UI Lib Referenced Argon Design System</p>
+  <p>
+    <a href="https://artsdt.github.io/meve/">Documentation</a>
+  </p>
+</div>
+
+---
+
+### Quickstart
+
+#### CDN
+
+```html
+<div id="app"></div>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+<script src="https://cdn.jsdelivr.net/npm/@meve/ui/umd/meve.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@meve/touch-emulator/iife.js"></script>
+<script>
+  Vue.use(Meve)
+  
+  new Vue({
+    template: '<m-button>Meve</m-button>'
+  }).$mount('#app')
+</script>
+```
+
+#### Webpack / Vite
+
+```shell
+# Install with npm or yarn or pnpm
+
+# npm
+npm i @meve/ui @meve/touch-emulator -S
+
+# yarn
+yarn add @meve/ui @meve/touch-emulator
+
+# pnpm
+pnpm add @meve/ui @meve/touch-emulator
+```
+
+```js
+import Vue from 'vue'
+import App from './App.vue'
+import Meve from '@meve/ui'
+import '@meve/ui/es/style.js'
+import '@meve/touch-emulator'
+
+Vue.use(Meve)
+
+new Vue({
+  render: (h) => h(App)
+}).$mount('#app')
+```
+
+### Repo Status WIP!
+
+Currently in development, do not use in production environment.
+
+Documentation currently only supports Chinese
\ No newline at end of file
diff --git a/README.md b/README.md
index d02d342..b6f827b 100644
--- a/README.md
+++ b/README.md
@@ -3,15 +3,31 @@
     <img src="https://artsdt.github.io/meve/logo_1.svg" width="150">
   </a>
   <h1>MEVE UI</h1>
-  <p>Vue2 UI Lib Referenced Argon Design System</p>
+  <p>基于Vue2的 Argon Design 风格组件库</p>
   <p>
-    <a href="https://artsdt.github.io/meve/">Documentation</a>
+    <a href="https://artsdt.github.io/meve/">文档站点</a>
   </p>
 </div>
 
 ---
 
-### Quick Start
+### 快速开始
+
+#### CDN
+
+```html
+<div id="app"></div>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+<script src="https://cdn.jsdelivr.net/npm/@meve/ui/umd/meve.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@meve/touch-emulator/iife.js"></script>
+<script>
+  Vue.use(Meve)
+  
+  new Vue({
+    template: '<m-button>Meve</m-button>'
+  }).$mount('#app')
+</script>
+```
 
 #### Webpack / Vite
 
@@ -42,8 +58,6 @@ new Vue({
 }).$mount('#app')
 ```
 
-### Repo Status WIP!
-
-Currently in development, do not use in production environment.
+### 仓库当前处于开发阶段!
 
-Documentation currently only supports Chinese
\ No newline at end of file
+当前处于开发阶段, 暂不推荐在生产环境中使用.
\ No newline at end of file
diff --git a/packages/meve-cli/site/App.vue b/packages/meve-cli/site/App.vue
index b8b7047..afe1253 100644
--- a/packages/meve-cli/site/App.vue
+++ b/packages/meve-cli/site/App.vue
@@ -143,6 +143,18 @@ tbody {
   border-top: 1px dashed #eee;
 }
 
+.meve-site-introduce {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 8px 26px -4px hsla(0, 0%, 8%, .15), 0 8px 9px -5px hsla(0, 0%, 8%, .06);
+  padding: 34px 24px;
+  overflow: auto;
+  margin-top: 20px;
+}
+
 .meve-site-card {
   background: #fff;
   border-radius: 6px;
diff --git a/packages/meve-cli/site/components/AppSidebar.vue b/packages/meve-cli/site/components/AppSidebar.vue
index ce772af..954812b 100644
--- a/packages/meve-cli/site/components/AppSidebar.vue
+++ b/packages/meve-cli/site/components/AppSidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="app-site-sidebar-scroller"
+    class="app-site-sidebar-container"
     :class="{
       'app-site-sidebar-fixed': fixed,
       'app-site-sidebar-hidden': inSmallScreen
@@ -11,6 +11,7 @@
         <img class="app-site-sidebar-logo" :src="logo" alt="">
       </div>
       <m-menu
+        class="app-site-menu"
         accordion
         :expanded-names.sync="expandedNames"
         :selected-names.sync="selectedNames"
@@ -85,13 +86,16 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.app-site-sidebar-scroller {
+.app-site-sidebar-container {
   width: 245px;
   padding: 14px;
-  height: 100vh;
-  transition: transform .25s;
   background: #fff;
+  transition: all .25s;
   box-shadow: 0 10px 30px -12px rgb(0 0 0 / 42%), 0 4px 25px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
+}
+
+.app-site-menu {
+  height: calc(100vh - 80px);
   overflow-y: auto;
 }
 
diff --git a/packages/meve-ui/docs/home.zh-CN.md b/packages/meve-ui/docs/home.zh-CN.md
index adc0175..a9a77ab 100644
--- a/packages/meve-ui/docs/home.zh-CN.md
+++ b/packages/meve-ui/docs/home.zh-CN.md
@@ -1,17 +1,5 @@
-# 基本介绍
-
-### 介绍
-
-编个故事...
-
-### 特性
-
-聊点故事...
-
-### 设计系统
-
-强行分析...
-
-### 社区/贡献
-
-找点观众...
\ No newline at end of file
+<div class="meve-site-introduce">
+  <img src="https://artsdt.github.io/meve/logo_1.svg" width="165">
+  <h1>MEVE UI</h1>
+  <p>基于Vue2的 Argon Design 风格组件库</p>
+</div> 
diff --git a/packages/meve-ui/docs/quickstart.zh-CN.md b/packages/meve-ui/docs/quickstart.zh-CN.md
new file mode 100644
index 0000000..1f99bea
--- /dev/null
+++ b/packages/meve-ui/docs/quickstart.zh-CN.md
@@ -0,0 +1,54 @@
+# 快速开始
+
+### CDN
+
+单页面使用CDN的方式使用组件库
+
+```html
+<div id="app"></div>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+<script src="https://cdn.jsdelivr.net/npm/@meve/ui/umd/meve.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@meve/touch-emulator/iife.js"></script>
+<script>
+  Vue.use(Meve)
+  
+  new Vue({
+    template: '<m-button>Meve</m-button>'
+  }).$mount('#app')
+</script>
+```
+
+### Webpack / Vite
+
+在构建工具中使用组件库，支持`Webpack`和`Vite`
+
+```shell
+# Install with npm or yarn or pnpm
+
+# npm
+npm i @meve/ui @meve/touch-emulator -S
+
+# yarn
+yarn add @meve/ui @meve/touch-emulator
+
+# pnpm
+pnpm add @meve/ui @meve/touch-emulator
+```
+
+```js
+import Vue from 'vue'
+import App from './App.vue'
+import Meve from '@meve/ui'
+import '@meve/ui/es/style.js'
+import '@meve/touch-emulator'
+
+Vue.use(Meve)
+
+new Vue({
+  render: (h) => h(App)
+}).$mount('#app')
+```
+
+### 仓库当前处于开发阶段!
+
+当前处于开发阶段, 暂不推荐在生产环境中使用.
\ No newline at end of file
diff --git a/packages/meve-ui/meve.config.js b/packages/meve-ui/meve.config.js
index 3931667..d637eba 100644
--- a/packages/meve-ui/meve.config.js
+++ b/packages/meve-ui/meve.config.js
@@ -13,6 +13,11 @@ module.exports = {
           labelCN: '基本介绍',
           labelUS: 'Basic Introduce',
         },
+        {
+          name: 'quickstart',
+          labelCN: '快速开始',
+          labelUS: 'Quickstart',
+        },
       ],
     },
     {