feat: link

components/HomeCard/HomeCard.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { toRefs, computed } from "vue";
+import { useRouter } from "vitepress";
 import _ from "lodash";
 
 const props = withDefaults(
   defineProps<{
     title?: string;
     color?: "info" | "skyblue" | "white";
+    link?: string;
     backgroundStyle?: Record<string, string>;
   }>(),
   {
@@ -13,6 +15,7 @@ const props = withDefaults(
     backgroundStyle: { right: "16px", bottom: "24px" },
   }
 );
+const router = useRouter();
 const { title, color } = toRefs(props);
 const styles = computed(() => {
   return _.get(
@@ -33,9 +36,19 @@ const styles = computed(() => {
     color.value
   );
 });
+const onClick = () => {
+  if (props.link) {
+    router.go(props.link);
+  }
+};
 </script>
 <template>
-  <div class="card" :style="styles">
+  <div
+    class="card"
+    :class="{ 'is-link': !!link }"
+    :style="styles"
+    @click="onClick"
+  >
     <div v-if="$slots.background" class="background" :style="props.backgroundStyle">
       <slot name="background"> </slot>
     </div>
@@ -70,6 +83,9 @@ h2 {
   :deep(.card) {
     min-height: 162px;
   }
+  &.is-link {
+    cursor: pointer;
+  }
   .background {
     position: absolute;
   }

components/HomeContent.vue

@@ -39,6 +39,7 @@ const withLink = (href: string) => {
             width: '268px',
             height: '148px',
           }"
+          :link="withLink('TODO1')"
         >
           <template #background>
             <img src="@/assets/images/card1.png" />
@@ -62,6 +63,7 @@ const withLink = (href: string) => {
             width: '128px',
             height: '128px',
           }"
+          :link="withLink('TODO1')"
         >
           <template #background>
             <img src="@/assets/images/card2.png" />
@@ -83,7 +85,7 @@ const withLink = (href: string) => {
       <HomeSectionContent :span="24">
         <HomeCard title="基础使用">
           <HomeCardContent :span="8">
-            <HomeCard color="white">
+            <HomeCard color="white" :link="withLink('TODO1')">
               <template #title>
                 <HomeCard.Title>
                   <IconNotebook color="#3681FC" />
@@ -96,7 +98,7 @@ const withLink = (href: string) => {
             </HomeCard>
           </HomeCardContent>
           <HomeCardContent :span="8">
-            <HomeCard color="white">
+            <HomeCard color="white" :link="withLink('TODO1')">
               <template #title>
                 <HomeCard.Title>
                   <IconBook color="#FF822B" />
@@ -109,7 +111,7 @@ const withLink = (href: string) => {
             </HomeCard>
           </HomeCardContent>
           <HomeCardContent :span="8">
-            <HomeCard color="white">
+            <HomeCard color="white" :link="withLink('TODO1')">
               <template #title>
                 <HomeCard.Title>
                   <IconDirectory color="#34CEAE" />
@@ -127,7 +129,7 @@ const withLink = (href: string) => {
       <HomeSectionContent :span="24">
         <HomeCard title="进阶使用">
           <HomeCardContent :span="8">
-            <HomeCard color="white">
+            <HomeCard color="white" :link="withLink('TODO1')">
               <template #title>
                 <HomeCard.Title>
                   <IconXieTongJianGou />
@@ -140,7 +142,7 @@ const withLink = (href: string) => {
             </HomeCard>
           </HomeCardContent>
           <HomeCardContent :span="8">
-            <HomeCard color="white">
+            <HomeCard color="white" :link="withLink('TODO1')">
               <template #title>
                 <HomeCard.Title>
                   <IconAiZhuShou />
@@ -151,7 +153,7 @@ const withLink = (href: string) => {
             </HomeCard>
           </HomeCardContent>
           <HomeCardContent :span="8">
-            <HomeCard color="white">
+            <HomeCard color="white" :link="withLink('TODO1')">
               <template #title>
                 <HomeCard.Title>
                   <IconAiChuangJian />
@@ -250,6 +252,7 @@ const withLink = (href: string) => {
                 width: '122px',
                 height: '128px',
               }"
+              :link="withLink('TODO1')"
             >
               <template #background>
                 <img src="@/assets/images/card3.png" />
@@ -269,6 +272,7 @@ const withLink = (href: string) => {
                 width: '160px',
                 height: '128px',
               }"
+              :link="withLink('TODO1')"
             >
               <template #background>
                 <img src="@/assets/images/card4.png" />
@@ -288,6 +292,7 @@ const withLink = (href: string) => {
                 width: '167px',
                 height: '92px',
               }"
+              :link="withLink('TODO1')"
             >
               <template #background>
                 <img src="@/assets/images/card5.png" />

components/Search/index.vue

@@ -146,6 +146,10 @@ watchDebounced(
   },
   { debounce: 200, immediate: true }
 );
+const searchRecommend = (e) => {
+  filterText.value = e.target.innerText
+  input$.value.focus()
+}
 </script>
 <template>
   <div class="search-container">
@@ -206,6 +210,14 @@ watchDebounced(
         </template>
       </div>
     </el-popover>
+    <div class="search-recommend">
+      <span> 搜索推荐: </span>
+      <span class="recommend" @click="searchRecommend">课程</span>
+      <span class="recommend" @click="searchRecommend">协同</span>
+      <span class="recommend" @click="searchRecommend">项目</span>
+      <span class="recommend" @click="searchRecommend">登录</span>
+      <span class="recommend" @click="searchRecommend">AI助手</span>
+    </div>
   </div>
 </template>
 <i18n locale="zh-HK">
@@ -252,6 +264,22 @@ watchDebounced(
     max-height: 300px;
     overflow-y: scroll;
   }
+  .search-recommend {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 20px;
+    margin-top: 8px;
+    span {
+      color: #41506dcc;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+    }
+    .recommend {
+      cursor: pointer;
+    }
+  }
   .search-content {
     .el-skeleton {
       padding: 10px 20px;