fix: optimize style

amals-qy · Jan 25, 2023 · abc027e · abc027e
1 parent 771a84d
commit abc027e
Show file tree

Hide file tree

Showing 29 changed files with 356 additions and 300 deletions.
diff --git a/docs/.vuepress/components/CustomBanner.vue b/docs/.vuepress/components/CustomBanner.vue
@@ -1,49 +1,37 @@
 <template>
-  <section class="banner-brand-wrapper" :style="{ ...bgImageStyle }">
-    <div class="hero-content">
-      <img
-        v-if="heroImage"
-        :src="heroImage"
-        :style="{
-          heroImageStyle,
-        }"
-        alt="heroImage"
-      />
+  <section class="banner-brand__wrapper" :style="{ ...bgImageStyle }">
+    <div class="banner-brand__content">
+      <h1 v-if="frontmatter?.customBanner?.heroText">{{ frontmatter?.customBanner?.heroText }}</h1>
+      <p v-if="frontmatter?.customBanner?.tagline">{{ frontmatter?.customBanner?.tagline }}</p>
 
-      <div class="hero-text">
-        <h1 v-if="frontmatter?.customBanner?.heroText">{{ frontmatter?.customBanner?.heroText }}</h1>
-        <p v-if="frontmatter?.customBanner?.tagline">{{ frontmatter?.customBanner?.tagline }}</p>
-
-        <ul class="btn-group" v-if="buttons.length > 0">
-          <li v-for="(btn, index) in buttons" :class="btn.type" :key="index">
-            <Xicons
-              :icon="btn.icon"
-              :text="btn.text"
-              :link="btn.link"
-              icon-size="20"
-              text-size="14"
-            />
-          </li>
-        </ul>
+      <div class="btn-group" v-if="buttons.length > 0">
+        <Xicons
+          v-for="(btn, index) in buttons" :class="btn.type" :key="index"
+          :icon="btn.icon"
+          :text="btn.text"
+          :link="btn.link"
+          icon-size="18"
+          text-size="14"
+        />
+      </div>
 
-        <ul class="social-links" v-if="socialLinks.length > 0">
-          <li
-            class="social-item"
-            v-for="(item, index) in socialLinks"
-            :key="index"
-          >
-            <Xicons :icon="item.icon" :link="item.link" :style="{ color: item.color }" target="_blank" />
-          </li>
-        </ul>
+      <ul class="social-links" v-if="socialLinks.length > 0">
+        <li
+          class="social-item"
+          v-for="(item, index) in socialLinks"
+          :key="index"
+        >
+          <Xicons :icon="item.icon" :link="item.link" :style="{ color: item.color }" target="_blank" />
+        </li>
+      </ul>
 
-        <div class="shields-wrapper">
-          <img alt="GitHub license" src="https://img.shields.io/github/license/vuepress-reco/vuepress-theme-reco?style=flat-square&logo=github&color=616ae5">
-          <img alt="GitHub stars" src="https://img.shields.io/github/stars/vuepress-reco/vuepress-theme-reco?style=flat-square&logo=github&color=616ae5">
-          <img alt="GitHub forks" src="https://img.shields.io/github/forks/vuepress-reco/vuepress-theme-reco?style=flat-square&logo=github&color=616ae5">
-          <img alt="Npm downloads" src="https://img.shields.io/npm/dt/vuepress-theme-reco?style=flat-square&logo=npm&color=616ae5">
-          <img alt="GitHub package.json version (subfolder of monorepo)" src="https://img.shields.io/github/package-json/v/vuepress-reco/vuepress-theme-reco?filename=packages%2Fvuepress-theme-reco%2Fpackage.json&style=flat-square&color=616ae5&logo=npm">
-          <img alt="Npm version" src="https://img.shields.io/badge/tailwindcss-3.1.6-616ae5?style=flat-square&logo=tailwindcss"/>
-        </div>
+      <div class="shields-wrapper">
+        <img alt="GitHub license" src="https://img.shields.io/github/license/vuepress-reco/vuepress-theme-reco?style=flat-square&logo=github&color=616ae5">
+        <img alt="GitHub stars" src="https://img.shields.io/github/stars/vuepress-reco/vuepress-theme-reco?style=flat-square&logo=github&color=616ae5">
+        <img alt="GitHub forks" src="https://img.shields.io/github/forks/vuepress-reco/vuepress-theme-reco?style=flat-square&logo=github&color=616ae5">
+        <img alt="Npm downloads" src="https://img.shields.io/npm/dt/vuepress-theme-reco?style=flat-square&logo=npm&color=616ae5">
+        <img alt="GitHub package.json version (subfolder of monorepo)" src="https://img.shields.io/github/package-json/v/vuepress-reco/vuepress-theme-reco?filename=packages%2Fvuepress-theme-reco%2Fpackage.json&style=flat-square&color=616ae5&logo=npm">
+        <img alt="Npm version" src="https://img.shields.io/badge/tailwindcss-3.1.6-616ae5?style=flat-square&logo=tailwindcss"/>
       </div>
     </div>
   </section>
@@ -91,8 +79,7 @@ const bgImageStyle = computed(() => {
 
 <style scoped>
 .shields-wrapper {
-  @apply mt-20 text-center;
-  @apply md:text-left;
+  @apply mt-20 text-left;
   img {
     @apply inline-block ml-0 mr-1 my-1 w-auto h-6 !important;
   }

diff --git a/docs/.vuepress/components/Md5.vue b/docs/.vuepress/components/Md5.vue
@@ -34,7 +34,7 @@ export default {
 .md5-wrapper {
   @apply mt-4;
   input {
-    @apply outline-none box-border p-2 text-reco-primary border-reco-primary border-2 border-solid rounded-lg;
+    @apply outline-none box-border p-2 text-reco-primary border-reco-primary border border-solid rounded-lg;
   }
 }
 </style>

diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -3,13 +3,12 @@ import { recoTheme } from 'vuepress-theme-reco'
 import { themeConfig } from './config/index'
 
 export default defineUserConfig({
-
   locales: {
     // 键名是该语言所属的子路径
     // 作为特例，默认语言可以使用 '/' 作为其路径。
     '/': {
       lang: 'zh-CN',
-      title: 'vuepress-theme-reco',
+      title: 'vuepress-reco',
       description: '一款简洁而优雅的 vuepress 博客 & 文档 主题。',
     },
     '/en/': {

diff --git a/docs/docs/theme/home.md b/docs/docs/theme/home.md
@@ -40,8 +40,6 @@ date: 2021-11-06 23:36:01
 - frontmatter 配置：
   - heroText：标题
   - tagline：简述
-  - heroImage: 首页 logo
-  - heroImageStyle: 首页 logo 样式
   - bgImage: 背景图片
   - bgImageStyle: 背景图片样式
   - buttons: 按钮
@@ -104,10 +102,6 @@ banner: # banner 模块的配置
 bannerBrand: # bannerBrand 模块的配置
   heroText: 午后南杂
   tagline: Enjoy when you can, and endure when you must.
-  heroImage: /logo.png
-  heroImageStyle:
-    maxWidth: 200px
-    margin: 0 auto 2rem
   bgImage: /banner.jpg
   bgImageStyle:
     height: 450px

diff --git a/docs/en/docs/theme/home.md b/docs/en/docs/theme/home.md
@@ -40,8 +40,6 @@ Currently, the built-in homepage modules include `Banner`, `BannerBrand`, `Blog`
 - frontmatter options:
   - heroText: title
   - tagline: Briefly
-  - heroImage: index logo
-  - heroImageStyle: index logo style
   - bgImage: Background image
   - bgImageStyle: Background image style
   - buttons: button
@@ -104,10 +102,6 @@ banner: # banner module configuration
 bannerBrand: # bannerBrand module configuration
   heroText: 午后南杂
   tagline: Enjoy when you can, and endure when you must.
-  heroImage: /logo.png
-  heroImageStyle:
-    maxWidth: 200px
-    margin: 0 auto 2rem
   bgImage: /banner.jpg
   bgImageStyle:
     height: 450px

diff --git a/example/.vuepress/config.js b/example/.vuepress/config.js
@@ -7,7 +7,7 @@ export default defineUserConfig({
     // 作为特例，默认语言可以使用 '/' 作为其路径。
     '/': {
       lang: 'zh-CN',
-      title: 'vuepress-theme-reco',
+      title: 'vuepress-reco',
       description: '中文描述',
     },
     '/en/': {
@@ -47,7 +47,7 @@ export default defineUserConfig({
         ],
       },
     },
-    logo: '/head.png',
+    logo: '/logo.png',
     authorAvatar: '/head.png',
     author: 'reco_luan',
     docsRepo: 'https://github.com/vuepress-reco/vuepress-theme-reco',

diff --git a/example/README.md b/example/README.md
@@ -22,16 +22,16 @@ bannerBrand:
   # bgImageStyle:
   #   height: 450px
   buttons:
-    - { text: Guide, link: '/blogs/category1/blog2' }
-    - { text: Plan, link: '/blogs/category1/blog2', type: 'plain', icon: 'Alien' }
+    - { text: 收到, icon: 'EarthFilled', link: '/blogs/category1/blog2' }
+    - { text: sdfsdfsfsdsdfsdfsd, link: '/blogs/category1/blog2', type: 'plain', icon: 'Alien' }
+    - { text: safsdfdsfdssdsdfsdf, link: '/blogs/category1/blog2', type: 'text', icon: 'Alien' }
   socialLinks:
-    - { icon: 'BrandGithub', link: 'https://github.com/recoluan' }
-    - { icon: 'BrandTwitter', link: 'https://twitter.com/reco_luan' }
+    - { icon: 'LogoGithub', link: 'https://github.com/recoluan' }
+    - { icon: 'LogoTwitter', link: 'https://twitter.com/reco_luan' }
 blog:
   socialLinks:
-    - { icon: 'BrandGithub', link: 'https://github.com/recoluan' }
-    - { icon: 'BrandTwitter', link: 'https://twitter.com/reco_luan' }
-    - { icon: 'BrandTwitter', link: 'https://twitter.com/reco_luan' }
+    - { icon: 'LogoGithub', link: 'https://github.com/recoluan' }
+    - { icon: 'LogoTwitter', link: 'https://twitter.com/reco_luan' }
 footer:
   record: xxxx
   cyberSecurityRecord: xxx

diff --git a/packages/@vuepress-reco/tailwindcss-config/src/node/custom-colors.ts b/packages/@vuepress-reco/tailwindcss-config/src/node/custom-colors.ts
@@ -1,5 +1,5 @@
 // 品牌色
-const primary = '#4954e6'
+const primary = '#5D67E8'
 
 // 背景色
 const bg = {

diff --git a/packages/vuepress-theme-reco/src/client/components/DropdownLink.vue b/packages/vuepress-theme-reco/src/client/components/DropdownLink.vue
@@ -5,6 +5,8 @@
       type="button"
       :aria-label="dropdownAriaLabel"
       @click="handleDropdown"
+      @mouseenter="handleButtonMouseEnter"
+      @mouseleave="handleButtonMouseLeave"
     >
       <span class="title">
         <Xicons v-if="item.icon" :icon="item.icon" />
@@ -17,7 +19,7 @@
       class="dropdown-link--mobile__title"
       type="button"
       :aria-label="dropdownAriaLabel"
-      @click="open = !open"
+      @click="handleMobileButtonClick"
     >
       <span class="title">
         <Xicons v-if="item.icon" :icon="item.icon" />
@@ -27,7 +29,12 @@
     </button>
 
     <DropdownTransition>
-      <ul v-show="open" class="dropdown-link__container">
+      <ul
+        v-show="open"
+        class="dropdown-link__container"
+        @mouseenter="handleDropdownMouseEnter"
+        @mouseleave="handleDropdownMouseLeave"
+      >
         <li
           v-for="(child, index) in item.children"
           :key="child.link || index"
@@ -71,70 +78,99 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref, toRefs, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, ref, toRefs, watch } from 'vue'
 import type { PropType } from 'vue'
 import { useRoute } from 'vue-router'
 import type { NavGroup, NavItem } from '../../types'
 import Link from './Link.vue'
 import DropdownTransition from './DropdownTransition.vue'
 
-export default defineComponent({
-  name: 'DropdownLink',
-
-  components: {
-    Link,
-    DropdownTransition,
+const props = defineProps({
+  item: {
+    type: Object as PropType<NavGroup<NavItem>>,
+    required: true,
   },
+})
+const { item } = toRefs(props)
+const dropdownAriaLabel = computed(
+  () => item.value.ariaLabel || item.value.text
+)
+
+const open = ref(false)
+const route = useRoute()
+watch(
+  () => route.path,
+  () => {
+    open.value = false
+  }
+)
+
+/**
+ * Open the dropdown when user tab and click from keyboard.
+ *
+ * Use event.detail to detect tab and click from keyboard.
+ * The Tab + Click is UIEvent > KeyboardEvent, so the detail is 0.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+ */
+const handleDropdown = (e): void => {
+  const isTriggerByTab = e.detail === 1
+  if (isTriggerByTab) {
+    open.value = !open.value
+  } else {
+    open.value = false
+  }
+}
+
+const isLastItemOfArray = (item: unknown, arr: unknown[]): boolean =>
+  arr[arr.length - 1] === item
+
+
 
-  props: {
-    item: {
-      type: Object as PropType<NavGroup<NavItem>>,
-      required: true,
-    },
-  },
 
-  setup(props) {
-    const { item } = toRefs(props)
-    const dropdownAriaLabel = computed(
-      () => item.value.ariaLabel || item.value.text
-    )
-
-    const open = ref(false)
-    const route = useRoute()
-    watch(
-      () => route.path,
-      () => {
-        open.value = false
-      }
-    )
-
-    /**
-     * Open the dropdown when user tab and click from keyboard.
-     *
-     * Use event.detail to detect tab and click from keyboard.
-     * The Tab + Click is UIEvent > KeyboardEvent, so the detail is 0.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
-     */
-    const handleDropdown = (e): void => {
-      const isTriggerByTab = e.detail === 0
-      if (isTriggerByTab) {
-        open.value = !open.value
-      } else {
-        open.value = false
-      }
+const inButton = ref(false)
+const handleButtonMouseEnter = () => {
+  if (isMobile.value) isMobile.value = false
+
+  open.value = true
+  inButton.value = true
+}
+const handleButtonMouseLeave = () => {
+  inButton.value = false
+
+  setTimeout(() => {
+    if (inButton.value || inDropdown.value) {
+      open.value = true
+    } else {
+      open.value = false
     }
+  }, 200)
+}
+
+const inDropdown = ref(false)
+const handleDropdownMouseEnter = () => {
+  if (isMobile.value) return
+
+  inDropdown.value = true
+}
+const handleDropdownMouseLeave = () => {
+  if (isMobile.value) return
 
-    const isLastItemOfArray = (item: unknown, arr: unknown[]): boolean =>
-      arr[arr.length - 1] === item
+  inDropdown.value = false
 
-    return {
-      open,
-      dropdownAriaLabel,
-      handleDropdown,
-      isLastItemOfArray,
+  setTimeout(() => {
+    if (inButton.value || inDropdown.value) {
+      open.value = true
+    } else {
+      open.value = false
     }
-  },
-})
+  }, 200)
+}
+
+const isMobile = ref(true)
+const handleMobileButtonClick = () => {
+  open.value = !open.value
+  if (!isMobile.value) isMobile.value = true
+}
 </script>