DevCloudFE · kagol · Apr 16, 2022 · Apr 16, 2022
diff --git a/packages/devui-vue/devui-cli/templates/vitepress-sidebar.js b/packages/devui-vue/devui-cli/templates/vitepress-sidebar.js
@@ -52,7 +52,7 @@ exports.createVitepressSidebarTemplates = (componentsInfo = []) => {
       rootItems: [
         {
           text: '快速开始',
-          link: '/',
+          link: '/quick-start/',
         },
         {
           text: '主题定制',
@@ -66,7 +66,7 @@ exports.createVitepressSidebarTemplates = (componentsInfo = []) => {
       rootItems: [
         {
           text: 'Quick Start',
-          link: '/en-US/',
+          link: '/en-US/quick-start/',
         },
         {
           text: 'Theme Guide',

diff --git a/packages/devui-vue/docs/.vitepress/config/enNav.ts b/packages/devui-vue/docs/.vitepress/config/enNav.ts
@@ -1,5 +1,5 @@
 const enNav = [
-  { text: 'Component', link: '/en-US/' },
+  { text: 'Component', link: '/en-US/quick-start/' },
   { text: 'Version history', link: 'https://github.com/DevCloudFE/vue-devui/releases' },
   { text: 'Design disciplines', link: 'https://devui.design/design-cn/start' },
 ]

diff --git a/packages/devui-vue/docs/.vitepress/config/nav.ts b/packages/devui-vue/docs/.vitepress/config/nav.ts
@@ -1,5 +1,5 @@
 const nav = [
-  { text: '组件', link: '/' },
+  { text: '组件', link: '/quick-start/' },
   { text: '贡献指南', link: '/contributing/' },
   { text: 'Playground', link: 'https://devcloudfe.github.io/devui-playground' },
   { text: '更新日志', link: 'https://github.com/DevCloudFE/vue-devui/releases' },

diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue b/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { ref, computed, watch, defineAsyncComponent, onMounted, onUpdated } from 'vue'
-import { useRoute, useData } from 'vitepress'
+import { useRoute, useData, useRouter } from 'vitepress'
 import { isSideBarEmpty, getSideBarConfig } from './support/sideBar'
 // components
 import NavBar from './components/NavBar.vue'
 import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
+import HomeFooter from './components/HomeFooter.vue'
+import { CONTRIBUTORS_MAP } from './components/PageContributorConfig'
+import PageContributor from './components/PageContributor.vue'
+import { Button } from '@devui/button';
 
 const Home = defineAsyncComponent(() => import('./components/Home.vue'))
 
@@ -24,6 +28,7 @@ const AlgoliaSearchBox = __ALGOLIA__
 // generic state
 const route = useRoute()
 const { site, page, theme, frontmatter } = useData()
+const router = useRouter()
 
 // custom layout
 const isCustomLayout = computed(() => !!frontmatter.value.customLayout)
@@ -87,9 +92,9 @@ if (result && langList.includes(result[0])) {
 
 // Remove `__VP_STATIC_START__`
 const removeVPStaticFlag = () => {
-  const contentChildNodes = document.querySelector('.content > div').childNodes
+  const contentChildNodes = document.querySelector('.content > div')?.childNodes
 
-  contentChildNodes.forEach((item, index) => {
+  contentChildNodes?.forEach((item, index) => {
     if (
       (index === 0 && item.textContent === '__VP_STATIC_START__')
       || (index === contentChildNodes.length - 1 && item.textContent === '__VP_STATIC_END__')
@@ -106,6 +111,28 @@ onMounted(() => {
 onUpdated(() => {
   removeVPStaticFlag()
 })
+
+function unique(arr) {
+  let map = new Map();
+  let array = new Array();
+  for (let i = 0; i < arr.length; i++) {
+    if(map.has(arr[i].homepage)) {
+      map.set(arr[i].homepage, true); 
+    } else { 
+      map.set(arr[i].homepage, false);
+      array.push(arr[i]);
+    }
+  } 
+  return array;
+}
+
+const contributors = computed(() => {
+  return unique(Object.values(CONTRIBUTORS_MAP).flat());
+})
+
+const becomeContributor = () => {
+  router.go('/contributing/');
+}
 </script>
 
 <template>
@@ -175,10 +202,25 @@ onUpdated(() => {
     </Page>
   </div>
 
+  <div class="container-contributors" v-if="enableHome">
+    <div class="contributors-inner">
+      <h2>贡献者✨</h2>
+      <PageContributor
+        v-if="contributors && contributors.length > 0"
+        :contributors="contributors"
+        :spacing="20"
+        :avatarSize="48"
+      />
+      <Button class="btn-become-contributor" variant="solid" color="primary" @click="becomeContributor">成为贡献者</Button>
+    </div>
+  </div>
+
+  <HomeFooter />
+
   <Debug v-if="false" />
 </template>
 
-<style>
+<style lang="scss">
 #ads-container {
   margin: 0 auto;
 }
@@ -208,4 +250,35 @@ onUpdated(() => {
     bottom: 8px;
   }
 }
+
+.container-contributors {
+  margin-top: 120px;
+  padding: 120px 0;
+  background: var(--devui-global-bg, #f3f6f8);
+
+  .contributors-inner {
+    max-width: 544px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    h2 {
+      margin-bottom: 4rem;
+      text-align: center;
+      font-size: 2rem;
+      border: 0;
+    }
+
+    img {
+      max-width: unset;
+    }
+
+    .btn-become-contributor {
+      margin-top: 2rem;
+      width: 80px;
+    }
+  }
+}
 </style>
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/Home.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/Home.vue
@@ -13,7 +13,7 @@ import HomeFooter from './HomeFooter.vue'
       <Content />
     </div>
     <slot name="features" />
-    <HomeFooter />
+    <HomeFooter v-if="false" />
     <slot name="footer" />
   </main>
 </template>
@@ -35,4 +35,9 @@ import HomeFooter from './HomeFooter.vue'
     padding: 0;
   }
 }
+
+.home-slogon {
+  display: flex;
+  align-items: center;
+}
 </style>
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/HomeFooter.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/HomeFooter.vue
@@ -31,7 +31,7 @@ const { frontmatter } = useData()
 .home-hero + .footer .container,
 .home-features + .footer .container,
 .home-content + .footer .container {
-  border-top: 1px solid var(--c-divider);
+  /* border-top: 1px solid var(--c-divider); */
 }
 
 @media (min-width: 420px) {

diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/HomeHero.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/HomeHero.vue
@@ -34,24 +34,29 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title)
       {{ frontmatter.tagline }}
     </p>
 
-    <NavLink
-      v-if="frontmatter.actionLink && frontmatter.actionText"
-      :item="{ link: frontmatter.actionLink, text: frontmatter.actionText }"
-      class="action"
-    />
-
-    <NavLink
-      v-if="frontmatter.altActionLink && frontmatter.altActionText"
-      :item="{
-        link: frontmatter.altActionLink,
-        text: frontmatter.altActionText
-      }"
-      class="action alt"
-    />
+    <div class="home-action-container">
+        <div class="nav-link action" v-if="frontmatter.actionLink && frontmatter.actionText">
+          <a class="item" :href="frontmatter.actionLink">
+            {{ frontmatter.actionText }}
+            <svg t="1650120099035" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3214" width="24" height="24"><path d="M214.677333 542.122667l0.042667-64.405334 477.653333-0.298666-225.301333-225.322667 45.568-45.568 303.424 303.424L512.213333 813.781333l-45.504-45.504 226.453334-226.453333-478.485334 0.298667z" p-id="3215" fill="#ffffff"></path></svg>
+          </a>
+        </div>
+
+        <div class="nav-link action alt" v-if="frontmatter.altActionLink && frontmatter.altActionText">
+          <a class="item" :href="frontmatter.altActionLink">
+            <svg height="20" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle">
+              <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+            </svg>
+            {{ frontmatter.altActionText }}
+          </a>
+        </div>
+    </div>
   </header>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@devui/styles-var/devui-var';
+
 .home-hero {
   margin: 2.5rem 0 2.75rem;
   padding: 0 1.5rem;
@@ -80,11 +85,13 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title)
   width: auto;
   max-width: 100%;
   max-height: 280px;
+  height: 260px;
 }
 
 .title {
-  margin-top: 1.5rem;
+  margin-top: 2.5rem;
   font-size: 2rem;
+  font-weight: 700;
 }
 
 @media (min-width: 420px) {
@@ -95,16 +102,16 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title)
 
 @media (min-width: 720px) {
   .title {
-    margin-top: 2rem;
+    margin-top: 3rem;
   }
 }
 
 .description {
   margin: 0;
-  margin-top: 0.25rem;
+  margin-top: 1rem;
   line-height: 1.3;
   font-size: 1.2rem;
-  color: var(--c-text-light);
+  color: $devui-text-weak;
 }
 
 @media (min-width: 420px) {
@@ -115,7 +122,7 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title)
 }
 
 .action {
-  margin-top: 1.5rem;
+  margin-top: 2rem;
   display: inline-block;
 }
 
@@ -125,33 +132,43 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title)
 
 @media (min-width: 420px) {
   .action {
-    margin-top: 2rem;
+    margin-top: 2.5rem;
     display: inline-block;
   }
 }
 
 .action :deep(.item) {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   border-radius: 6px;
   padding: 0 20px;
   line-height: 44px;
   font-size: 1rem;
   font-weight: 500;
-  color: var(--c-bg);
-  background-color: var(--c-brand);
-  border: 2px solid var(--c-brand);
-  transition: background-color 0.1s ease;
+  color: $devui-light-text;
+  background-color: $devui-primary;
+  border: 2px solid $devui-primary;
+  transition: background-color 0.2s;
 }
 
 .action.alt :deep(.item) {
-  background-color: var(--c-bg);
-  color: var(--c-brand);
+  color: var(--devui-text, #252b3a);
+  border-color: #f2f5fc;
+  background-color: #f2f5fc;
+  border-style: solid;
+}
+
+.action.alt :deep(.item:hover) {
+  color: var(--devui-text, #252b3a);
+  border-color: #e9edfa;
+  background-color: #e9edfa;
 }
 
 .action :deep(.item:hover) {
   text-decoration: none;
-  color: var(--c-bg);
-  background-color: var(--c-brand-light);
+  color: $devui-light-text;
+  background-color: $devui-primary-hover;
+  border-color: $devui-primary-hover;
 }
 
 @media (min-width: 420px) {
@@ -162,4 +179,10 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title)
     font-weight: 500;
   }
 }
+
+.home-action-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBarTitle.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBarTitle.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { withBase, useData } from 'vitepress'
+import { withBase, useData, useRouter } from 'vitepress'
 const { site, theme, localePath } = useData()
+const router = useRouter()
+
 function gopage() {
-  document.querySelector('.nav-bar-title').setAttribute('href', window.location.pathname)
+  router.go('/');
   return false
 }
 </script>

diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/Page.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/Page.vue
@@ -23,7 +23,10 @@ const contributors = computed(() => {
       <slot name="top" />
 
       <Content class="content" />
+
+      <div class="page-contributor-label">Contributors</div>
       <PageContributor v-if="contributors && contributors.length > 0" :contributors="contributors" />
+
       <PageFooter />
       <NextAndPrevLinks />
 
@@ -68,4 +71,10 @@ const contributors = computed(() => {
     clear: both;
   }
 }
+
+.page-contributor-label {
+  color: #24292f;
+  font-weight: 600;
+  line-height:32px;
+}
 </style>