From 8403a81964b3dd916e0975f18a9148bdce4c454a Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Tue, 25 Apr 2023 17:54:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/@wcui/docs/main.js                |   3 +-
 src/pages/@wcui/index/app.vue               | 392 ++++++--------------
 src/pages/@wcui/index/components/footer.vue |   4 +-
 src/pages/@wcui/index/main.js               |   3 +-
 4 files changed, 111 insertions(+), 291 deletions(-)

diff --git a/src/pages/@wcui/docs/main.js b/src/pages/@wcui/docs/main.js
index d09c13b..4b7cc35 100644
--- a/src/pages/@wcui/docs/main.js
+++ b/src/pages/@wcui/docs/main.js
@@ -1,10 +1,11 @@
 import { createApp } from 'vue'
 import App from './app.vue'
 
-// import '//jscdn.ink/@bd/ui/latest/form/index.js'
 import '//jscdn.ink/@bd/ui/latest/form/index.js'
 import '//jscdn.ink/@bd/ui/latest/markd/index.js'
 import '//jscdn.ink/@bd/ui/latest/sandbox/index.js'
+// import '//127.0.0.1:8090/dist/markd/index.js'
+// import '//127.0.0.1:8090/dist/sandbox/index.js'
 
 const app = createApp(App)
 
diff --git a/src/pages/@wcui/index/app.vue b/src/pages/@wcui/index/app.vue
index 9548c15..966f33d 100644
--- a/src/pages/@wcui/index/app.vue
+++ b/src/pages/@wcui/index/app.vue
@@ -1,98 +1,64 @@
 <template>
   <Topbar />
 
-  <banner class="banner flex-ac">
-    <div class="wrapper flex-ac">
-      <h1>轻量级模块化组件库</h1>
-      <cite>一款基于Web Components, 面向未来的桌面UI组件库</cite>
-      <cite>不挑框架, 可无缝适配React, Angular, Avalon, Vue, jQuery...</cite>
-      <cite>网站快速成型工具</cite>
+  <banner class="banner">
+    <div class="wrapper">
+      <section class="slogen">
+        <h1>轻量级模块化组件库</h1>
+        <cite>一款基于Web Components, 面向未来的桌面UI组件库</cite>
+        <cite>不挑框架, 可无缝适配React, Angular, Avalon, Vue, jQuery...</cite>
+        <cite>网站快速成型工具</cite>
+        <wc-space gap="xxxl">
+          <wc-button size="xl" round solid>开始使用</wc-button>
+          <wc-button size="xl" type="secondary" round>GitHub</wc-button>
+        </wc-space>
+      </section>
+
+      <div class="blur-bg"></div>
+      <svg class="line" width="960" height="300">
+        <g>
+          <path
+            d="M20,283 C288,288 604,64 960,16"
+            fill="none"
+            stroke="var(--color-blue-a)"
+            stroke-width="0.5"
+          />
+          <path
+            d="M424,300 C512,288 588,108 960,23"
+            fill="none"
+            stroke="var(--color-dark-a)"
+            stroke-width="0.5"
+          />
+          <path
+            d="M234,300 C512,288 588,108 960,63"
+            fill="none"
+            stroke="var(--color-teal-a)"
+            stroke-width="0.5"
+          />
+        </g>
+      </svg>
     </div>
   </banner>
 
-  <div class="colorful flex-ac">
-    <div class="wrapper flex-ac">
-      <header class="title">- 主题配色 -</header>
-      <section>
-        <ul class="blue">
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-        </ul>
-        <ul class="teal">
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-        </ul>
-        <ul class="green">
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-        </ul>
-        <ul class="red">
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-        </ul>
-        <ul class="orange">
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-        </ul>
-        <ul class="plain">
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-        </ul>
-        <ul class="grey">
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-        </ul>
-        <ul class="dark">
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-        </ul>
-      </section>
-    </div>
-  </div>
-
-  <div class="basic-demo flex-ac">
-    <div class="wrapper flex-ac">
-      <header class="title">Buttons</header>
-      <section>
-        <wc-button type="primary">Primary Button</wc-button>
-        <wc-button type="secondary">Secondary Button</wc-button>
-        <wc-button type="info">Info Button</wc-button>
-        <wc-button type="help">Help Button</wc-button>
-      </section>
-      <section>
-        <wc-button solid>Solid Button</wc-button>
-        <wc-button solid type="success">Success Button</wc-button>
-        <wc-button solid type="warning">Warning Button</wc-button>
-        <wc-button solid type="danger">Danger Button</wc-button>
+  <div class="feature">
+    <div class="wrapper">
+      <section class="item">
+        <wc-icon name="client"></wc-icon>
+        <h3>基于原生影子节点</h3>
+        <cite>优秀的兼容性, 不挑框架。</cite>
       </section>
 
-      <header class="title">Inputs</header>
-      <section>
-        <wc-input placeholder="Normal Input"></wc-input>
-        <wc-input placeholder="Success Input" type="success"></wc-input>
-        <wc-input placeholder="Danger Input" type="danger"></wc-input>
-        <wc-input placeholder="Disabled Input" disabled></wc-input>
+      <section class="item">
+        <wc-icon name="finger-print"></wc-icon>
+        <h3>原生的隔离能力</h3>
+        <cite>无样式污染, 灵活的拓展接口</cite>
       </section>
 
-      <div class="more">
-        <wc-link type="danger" to="./docs.html">更多组件...</wc-link>
-      </div>
+      <section class="item">
+        <wc-icon name="fly"></wc-icon>
+        <h3>基于强大的@bd/core</h3>
+        <cite>Vue一样的开发体验</cite>
+      </section>
     </div>
   </div>
 
@@ -130,238 +96,90 @@ a {
   justify-content: center;
   align-items: center;
   height: 400px;
-  background: linear-gradient(to right bottom, #155799, #157879, #159857);
 
   .wrapper {
     display: flex;
-    flex-direction: column;
-    align-items: center;
+    justify-content: space-between;
     padding: 48px 0;
 
+    .slogen {
+      display: flex;
+      flex-direction: column;
+    }
+    .blur-bg {
+      width: 212px;
+      height: 320px;
+      border-radius: 50%;
+      background-image: linear-gradient(
+        to bottom,
+        var(--color-blue-a),
+        var(--color-dark-a) 60%
+      );
+      transform: scale(1.25);
+      filter: blur(50px);
+    }
+
+    .line {
+      position: absolute;
+      z-index: -1;
+    }
+
     h1 {
       line-height: 2;
       font-size: 38px;
       font-weight: normal;
-      color: var(--color-plain-1);
     }
     cite {
-      line-height: 2;
+      line-height: 1.75;
       font-size: 16px;
       font-style: normal;
-      color: var(--color-plain-3);
-    }
-
-    section {
-      margin-top: 64px;
-      text-align: center;
-
-      wc-button {
-        margin: 0 16px;
-      }
     }
   }
 }
-.colorful {
+
+.feature {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--color-plain-1);
 
   .wrapper {
-    flex-direction: column;
-    padding: 32px 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 64px 0;
 
-    .title {
-      position: relative;
-      line-height: 3;
-      font-size: 26px;
-      text-align: center;
-      color: var(--color-grey-2);
-    }
-
-    section {
+    .item {
       display: flex;
-      justify-content: space-between;
-      margin-bottom: 32px;
+      flex-direction: column;
+      width: 300px;
+      height: 160px;
+      padding: 16px;
+      border-radius: 8px;
+      background: #f7f8fb;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+      transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
 
-      ul {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-      }
-      li {
-        height: 56px;
-        box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.03);
+      &:hover {
+        background: #fff;
+        transform: translateY(-5px);
       }
 
-      ul:nth-child(2),
-      ul:nth-child(5) {
-        li {
-          height: 48px;
-        }
-      }
-      ul:nth-child(3),
-      ul:nth-child(7) {
-        li {
-          height: 52px;
-        }
-      }
-    }
-
-    .blue {
-      li:nth-child(1) {
-        background: var(--color-blue-a);
-      }
-      li:nth-child(2) {
-        background: var(--color-blue-1);
-      }
-      li:nth-child(3) {
-        background: var(--color-blue-2);
-      }
-      li:nth-child(4) {
-        background: var(--color-blue-3);
-      }
-    }
-    .teal {
-      li:nth-child(1) {
-        background: var(--color-teal-a);
-      }
-      li:nth-child(2) {
-        background: var(--color-teal-1);
-      }
-      li:nth-child(3) {
-        background: var(--color-teal-2);
-      }
-      li:nth-child(4) {
-        background: var(--color-teal-3);
-      }
-    }
-    .green {
-      li:nth-child(1) {
-        background: var(--color-green-a);
-      }
-      li:nth-child(2) {
-        background: var(--color-green-1);
-      }
-      li:nth-child(3) {
-        background: var(--color-green-2);
-      }
-      li:nth-child(4) {
-        background: var(--color-green-3);
-      }
-    }
-    .red {
-      li:nth-child(1) {
-        background: var(--color-red-a);
-      }
-      li:nth-child(2) {
-        background: var(--color-red-1);
-      }
-      li:nth-child(3) {
-        background: var(--color-red-2);
-      }
-      li:nth-child(4) {
-        background: var(--color-red-3);
-      }
-    }
-    .orange {
-      li:nth-child(1) {
-        background: var(--color-orange-a);
-      }
-      li:nth-child(2) {
-        background: var(--color-orange-1);
-      }
-      li:nth-child(3) {
-        background: var(--color-orange-2);
-      }
-      li:nth-child(4) {
-        background: var(--color-orange-3);
-      }
-    }
-    .plain {
-      li:nth-child(1) {
-        background: #f7f8fb;
-      }
-      li:nth-child(2) {
-        background: var(--color-plain-1);
-      }
-      li:nth-child(3) {
+      wc-icon {
+        width: 64px;
+        height: 64px;
+        padding: 8px;
+        border-radius: 6px;
         background: var(--color-plain-2);
       }
-      li:nth-child(4) {
-        background: var(--color-plain-3);
+      h3 {
+        margin-top: 16px;
+        line-height: 2;
+        font-size: 16px;
+        font-weight: normal;
       }
-    }
-    .grey {
-      li:nth-child(1) {
-        background: var(--color-grey-a);
-      }
-      li:nth-child(2) {
-        background: var(--color-grey-1);
-      }
-      li:nth-child(3) {
-        background: var(--color-grey-2);
-      }
-      li:nth-child(4) {
-        background: var(--color-grey-3);
-      }
-    }
-    .dark {
-      li:nth-child(1) {
-        background: var(--color-dark-a);
-      }
-      li:nth-child(2) {
-        background: var(--color-dark-1);
-      }
-      li:nth-child(3) {
-        background: var(--color-dark-2);
-      }
-      li:nth-child(4) {
-        background: var(--color-dark-3);
-      }
-    }
-  }
-}
 
-.basic-demo {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .wrapper {
-    flex-direction: column;
-    padding: 32px 0;
-
-    .title {
-      line-height: 2;
-      font-size: 22px;
-      color: var(--color-grey-2);
-    }
-
-    section {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 32px;
-
-      wc-button,
-      wc-input {
-        flex: 1;
-        margin: 0 16px;
-      }
-    }
-
-    .more {
-      text-align: center;
-      a {
-        display: inline-flex;
-        padding: 4px 16px;
-        border-radius: 6px;
-        box-shadow: 0 0 5px rgba(0, 0, 0, 0.06);
-
-        &:hover {
-          color: var(--color-red-1);
-        }
+      cite {
+        font-size: 13px;
+        color: var(--color-grey-3);
       }
     }
   }
diff --git a/src/pages/@wcui/index/components/footer.vue b/src/pages/@wcui/index/components/footer.vue
index d2058d4..7cd4543 100644
--- a/src/pages/@wcui/index/components/footer.vue
+++ b/src/pages/@wcui/index/components/footer.vue
@@ -2,7 +2,7 @@
   <footer class="footer">
     <div class="wrapper">
       <section class="nav">
-        <a href="/">@bdjs 首页</a> |
+        <a href="/">bd.js 首页</a> |
         <a
           href="https://github.com/bd-js/wcui/blob/master/LICENSE"
           target="_blank"
@@ -30,7 +30,7 @@ export default {}
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 260px;
+  height: 240px;
   border-top: 1px solid var(--color-plain-3);
 
   .wrapper {
diff --git a/src/pages/@wcui/index/main.js b/src/pages/@wcui/index/main.js
index f81dc60..d192ea2 100644
--- a/src/pages/@wcui/index/main.js
+++ b/src/pages/@wcui/index/main.js
@@ -1,7 +1,8 @@
 import { createApp } from 'vue'
 import App from './app.vue'
 
-import '//jscdn.ink/@bd/ui/0.1.3/form/index.js'
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/index.js'
 
 const app = createApp(App)