feat: 网站视觉优化 (DevCloudFE#1752)

Co-authored-by: GreatZP <greatzp@greatzp.cn>

Author: fengjiancai

packages/devui-vue/docs/.vitepress/demo/Demo.vue

@@ -209,7 +209,7 @@ export default {
 .demo-block {
   margin: 10px 0;
   border: solid 1px #ebebeb;
-  border-radius: 3px;
+  border-radius: 20px;
   transition: 0.2s;
 }
 
@@ -249,8 +249,8 @@ export default {
   height: 44px;
   box-sizing: border-box;
   background-color: #fff;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
   text-align: center;
   margin-top: -1px;
   color: #d3dce6;

packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue

@@ -138,15 +138,14 @@ const contributors = computed(() => {
   <div class="theme" :class="pageClasses">
     <NavBar v-if="showNavbar" @toggle="toggleSidebar">
       <template #search>
-        <slot name="navbar-search">
-          <AlgoliaSearchBox v-if="theme.algolia" :options="theme.algolia" :multilang="isMultiLang" :key="site.lang" />
-        </slot>
+        <slot name="navbar-search"> </slot>
       </template>
     </NavBar>
 
     <SideBar :open="openSideBar">
       <template #sidebar-top>
         <slot name="sidebar-top" />
+        <AlgoliaSearchBox v-if="theme.algolia" :options="theme.algolia" :multilang="isMultiLang" :key="site.lang" />
       </template>
       <template #sidebar-bottom>
         <slot name="sidebar-bottom" />

packages/devui-vue/docs/.vitepress/devui-theme/components/AlgoliaSearchBox.vue

@@ -31,7 +31,7 @@ function poll() {
 }
 
 const docsearch$ = docsearch.default ?? docsearch;
-type DocSearchProps = Parameters<typeof docsearch$>[0]
+type DocSearchProps = Parameters<typeof docsearch$>[0];
 
 function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
   // note: multi-lang search support is removed since the theme
@@ -42,10 +42,8 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
     navigator: {
       navigate({ itemUrl }) {
         const _itemUrl = itemUrl.replaceAll('//', '/');
-        const { pathname: hitPathname } = new URL(
-          window.location.origin + _itemUrl,
-        );
-        
+        const { pathname: hitPathname } = new URL(window.location.origin + _itemUrl);
+
         // router doesn't handle same-page navigation so we use the native
         // browser location API for anchor navigation
         if (route.path === hitPathname) {
@@ -82,12 +80,7 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
 
 function getRelativePath(absoluteUrl: string) {
   const { pathname, hash } = new URL(absoluteUrl);
-  return (
-    pathname.replace(
-      /\.html$/,
-      site.value.cleanUrls === 'disabled' ? '.html' : '',
-    ) + hash
-  );
+  return pathname.replace(/\.html$/, site.value.cleanUrls === 'disabled' ? '.html' : '') + hash;
 }
 </script>
 
@@ -102,7 +95,7 @@ function getRelativePath(absoluteUrl: string) {
 
   --docsearch-primary-color: var(--c-brand);
   --docsearch-highlight-color: var(--devui-brand);
-  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--devui-brand);
+  --docsearch-searchbox-shadow: inset 0 0 0 1px var(--devui-brand);
   --docsearch-text-color: var(--devui-text);
   --docsearch-muted-color: var(--devui-text);
   --docsearch-searchbox-background: var(--devui-global-bg);
@@ -114,17 +107,35 @@ function getRelativePath(absoluteUrl: string) {
   --docsearch-footer-shadow: '';
   --docsearch-hit-shadow: '';
 
-  .DocSearch-Commands-Key, .DocSearch-Button-Key{
+  .DocSearch-Commands-Key,
+  .DocSearch-Button-Key {
     color: var(--devui-light-text);
   }
 
   .DocSearch-Hit-action,
   .DocSearch-Hit-icon,
   .DocSearch-Hit-path,
   .DocSearch-Hit-text,
-  .DocSearch-Hit-title,
-  {
+  .DocSearch-Hit-title {
     color: var(--devui-text-weak);
   }
 }
+
+#docsearch {
+  padding: 16px 12px 16px 8px;
+}
+
+.DocSearch-Button {
+  width: 100%;
+  margin: 0;
+  border-radius: var(--devui-border-radius-full);
+}
+
+.DocSearch-Button-Placeholder {
+  color: var(--devui-placeholder);
+}
+
+.DocSearch-Button-Keys {
+  display: none;
+}
 </style>

packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue

@@ -1,38 +1,29 @@
 <template>
   <transition name="fade">
-    <div
-      v-if="show"
-      class="go-to-top"
-      @click="scrollToTop"
-    >
+    <div v-if="show" class="go-to-top" @click="scrollToTop">
       <svg
+        width="16px"
+        height="16px"
+        viewBox="0 0 16 16"
+        version="1.1"
         xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 49.484 28.284"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
       >
-        <g transform="translate(-229 -126.358)">
-          <rect
-            fill="currentColor"
-            width="35"
-            height="5"
-            rx="2"
-            transform="translate(229 151.107) rotate(-45)"
-          />
-          <rect
-            fill="currentColor"
-            width="35"
-            height="5"
-            rx="2"
-            transform="translate(274.949 154.642) rotate(-135)"
-          />
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <path
+            d="M8.71335931,15.2865297 C8.61179683,16.2090609 7.32293758,16.1267953 7.27304695,15.2865297 C7.27175008,14.6475142 7.27175008,5.26479636 7.27175008,5.26479636 L2.83675052,9.54548344 C2.14185995,10.1440615 1.3143288,9.18731159 1.83135998,8.55773353 C3.79557855,6.65310872 7.3202657,3.24515592 7.40179694,3.16632781 C7.72696878,2.81306222 8.23887498,2.79476534 8.58495308,3.16632781 C9.23193739,3.7919215 14.0334057,8.42146792 14.1791557,8.58804603 C14.66614,9.19338972 13.8787807,10.0892021 13.2066089,9.58451469 C13.0329683,9.43717095 8.71468744,5.26462448 8.71468744,5.26462448 L8.71335931,15.2865297 Z M1.81868811,-8.54871729e-14 L14.1075619,-8.54871729e-14 L14.1075619,1.39509361 L1.81868811,1.39509361 L1.81868811,-8.54871729e-14 Z"
+            fill="#FFFFFF"
+            fill-rule="nonzero"
+          ></path>
         </g>
       </svg>
     </div>
   </transition>
 </template>
 
 <script lang="ts">
-import { debounce } from 'lodash'
-import { defineComponent, onMounted, computed, ref } from 'vue'
+import { debounce } from 'lodash';
+import { defineComponent, onMounted, computed, ref } from 'vue';
 export default defineComponent({
   name: 'BackToTop',
   props: {
@@ -42,58 +33,62 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const scrollTop = ref<number | null>(null)
+    const scrollTop = ref<number | null>(null);
     const show = computed(() => {
-      return scrollTop.value! > props.threshold
-    })
+      return scrollTop.value! > props.threshold;
+    });
     const scrollToTop = () => {
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-      scrollTop.value = 0
-    }
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+      scrollTop.value = 0;
+    };
     const getScrollTop = () => {
-      return (
-        window.pageYOffset ||
-        document.documentElement.scrollTop ||
-        document.body.scrollTop ||
-        0
-      )
-    }
+      return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    };
     onMounted(() => {
-      scrollTop.value = getScrollTop()
+      scrollTop.value = getScrollTop();
       window.addEventListener(
         'scroll',
         debounce(() => {
-          scrollTop.value = getScrollTop()
+          scrollTop.value = getScrollTop();
         }, 100)
-      )
-    })
+      );
+    });
 
     return {
       show,
       scrollToTop,
-    }
+    };
   },
-})
+});
 </script>
 
 <style lang="scss" scoped>
 .go-to-top {
   cursor: pointer;
   position: fixed;
   display: flex;
+  justify-content: center;
+  align-items: center;
   bottom: 2rem;
-  right: calc((100vw - 1440px) / 2 + 144px);
-  width: 22px;
-  color: var(--devui-brand);
+  right: 40px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: var(--devui-base-bg);
+  box-shadow: 0 6px 16px 0 var(--devui-shadow);
   z-index: 1;
 
   &:hover {
     color: var(--devui-brand-hover);
   }
 
   & svg {
-    width: 22px;
-    height: 22px;
+    width: 16px;
+    height: 16px;
+
+    path {
+      fill: var(--devui-text);
+    }
   }
 }
 

packages/devui-vue/docs/.vitepress/devui-theme/components/NextAndPrevLinks.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { withBase } from 'vitepress'
-import { useNextAndPrevLinks } from '../composables/nextAndPrevLinks'
-import ArrowLeft from './icons/ArrowLeft.vue'
-import ArrowRight from './icons/ArrowRight.vue'
+import { withBase } from 'vitepress';
+import { useNextAndPrevLinks } from '../composables/nextAndPrevLinks';
+import ArrowLeft from './icons/ArrowLeft.vue';
+import ArrowRight from './icons/ArrowRight.vue';
 
-const { hasLinks, prev, next } = useNextAndPrevLinks()
+const { hasLinks, prev, next } = useNextAndPrevLinks();
 </script>
 
 <template>
@@ -28,7 +28,7 @@ const { hasLinks, prev, next } = useNextAndPrevLinks()
 
 <style scoped>
 .next-and-prev-link {
-  padding-top: 1rem;
+  padding: 1rem 0;
 }
 
 .container {