feat: components fit

components/HomeCard/HomeCard.vue

@@ -6,11 +6,9 @@ const props = withDefaults(
   defineProps<{
     title?: string;
     color?: "info" | "skyblue" | "white";
-    span?: number;
   }>(),
   {
     color: "info",
-    span: 24,
   }
 );
 const { title, color } = toRefs(props);
@@ -35,7 +33,6 @@ const styles = computed(() => {
 });
 </script>
 <template>
-  <el-col tag="div" :span="span">
     <div class="card" :style="styles">
       <slot name="title">
         <h2 v-if="title">
@@ -46,7 +43,6 @@ const styles = computed(() => {
         <slot></slot>
       </el-row>
     </div>
-  </el-col>
 </template>
 
 <style lang="scss" scoped>

components/HomeContent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Search from "./Search/index.vue";
-import HomeCard from "./HomeCard";
-import HomeSection from "./HomeSection.vue";
+import HomeCard, { HomeCardContent } from "./HomeCard";
+import HomeSection, { HomeSectionContent } from "./HomeSection";
 import IconNotebook from "~icons/ccrbi-plain/notebook";
 import IconBook from "~icons/ccrbi-plain/book";
 import IconDirectory from "~icons/ccrbi-plain/directory";
@@ -13,119 +13,166 @@ import IconAiChuangJian from "~icons/ccrbi-colored/ai-chuang-jian";
 <template>
   <div class="home-content">
     <HomeSection title="您好，需要提供什么帮助？">
-      <Search />
+      <HomeSectionContent>
+        <Search />
+      </HomeSectionContent>
     </HomeSection>
 
     <HomeSection title="新手入门">
-      <HomeCard color="skyblue" :span="12">
-        <template #title>
-          <HomeCard.Title showArrow> 平台概览 </HomeCard.Title>
-        </template>
-        <HomeCard.Content>
-          <span class="content">TODO</span>
-        </HomeCard.Content>
-      </HomeCard>
-      <HomeCard showArrow :span="12">
-        <template #title>
-          <HomeCard.Title showArrow> 用户登录 </HomeCard.Title>
-        </template>
-        <HomeCard.Content>
-          <span class="content">TODO</span>
-        </HomeCard.Content>
-      </HomeCard>
-    </HomeSection>
-
-    <HomeSection title="平台使用">
-      <HomeCard title="基础使用" :span="24">
-        <HomeCard :span="8" color="white">
-          <template #title>
-            <HomeCard.Title>
-              <IconNotebook color="#3681FC" />
-              创建课程
-            </HomeCard.Title>
-          </template>
-          <HomeCard.Content>
-            <span class="content">TODO</span>
-          </HomeCard.Content>
-        </HomeCard>
-        <HomeCard :span="8" color="white">
-          <template #title>
-            <HomeCard.Title>
-              <IconBook color="#FF822B" />
-              实施课程
-            </HomeCard.Title>
-          </template>
-          <HomeCard.Content>
-            <span class="content">TODO</span>
-          </HomeCard.Content>
-        </HomeCard>
-        <HomeCard :span="8" color="white">
+      <HomeSectionContent :span="12">
+        <HomeCard color="skyblue">
           <template #title>
-            <HomeCard.Title>
-              <IconDirectory color="#34CEAE" />
-              创建项目
-            </HomeCard.Title>
+            <HomeCard.Title showArrow> 平台概览 </HomeCard.Title>
           </template>
-          <HomeCard.Content>
+          <HomeCardContent>
             <span class="content">TODO</span>
-          </HomeCard.Content>
+          </HomeCardContent>
         </HomeCard>
-      </HomeCard>
-      <HomeCard title="进阶使用" :span="24">
-        <HomeCard :span="8" color="white">
+      </HomeSectionContent>
+      <HomeSectionContent :span="12">
+        <HomeCard showArrow>
           <template #title>
-            <HomeCard.Title>
-              <IconXieTongJianGou />
-              协同建构
-            </HomeCard.Title>
+            <HomeCard.Title showArrow> 用户登录 </HomeCard.Title>
           </template>
-          <HomeCard.Content>
+          <HomeCardContent>
             <span class="content">TODO</span>
-          </HomeCard.Content>
+          </HomeCardContent>
         </HomeCard>
-        <HomeCard :span="8" color="white">
-          <template #title>
-            <HomeCard.Title>
-              <IconAiZhuShou />
-              AI助手
-            </HomeCard.Title>
-          </template>
-          <HomeCard.Content>
-            <span class="content">TODO</span>
-          </HomeCard.Content>
+      </HomeSectionContent>
+    </HomeSection>
+
+    <HomeSection title="平台使用">
+      <HomeSectionContent :span="24">
+        <HomeCard title="基础使用">
+          <HomeCardContent :span="8">
+            <HomeCard color="white">
+              <template #title>
+                <HomeCard.Title>
+                  <IconNotebook color="#3681FC" />
+                  创建课程
+                </HomeCard.Title>
+              </template>
+              <HomeCardContent>
+                <span class="content">TODO</span>
+              </HomeCardContent>
+            </HomeCard>
+          </HomeCardContent>
+          <HomeCardContent :span="8">
+            <HomeCard color="white">
+              <template #title>
+                <HomeCard.Title>
+                  <IconBook color="#FF822B" />
+                  实施课程
+                </HomeCard.Title>
+              </template>
+              <HomeCardContent>
+                <span class="content">TODO</span>
+              </HomeCardContent>
+            </HomeCard>
+          </HomeCardContent>
+          <HomeCardContent :span="8">
+            <HomeCard color="white">
+              <template #title>
+                <HomeCard.Title>
+                  <IconDirectory color="#34CEAE" />
+                  创建项目
+                </HomeCard.Title>
+              </template>
+              <HomeCardContent>
+                <span class="content">TODO</span>
+              </HomeCardContent>
+            </HomeCard>
+          </HomeCardContent>
         </HomeCard>
-        <HomeCard :span="8" color="white">
-          <template #title>
-            <HomeCard.Title>
-              <IconAiChuangJian />
-              AI创建
-            </HomeCard.Title>
-          </template>
-          <HomeCard.Content>
-            <span class="content">TODO</span>
-          </HomeCard.Content>
+      </HomeSectionContent>
+
+      <HomeSectionContent :span="24">
+        <HomeCard title="进阶使用">
+          <HomeCardContent :span="8">
+            <HomeCard color="white">
+              <template #title>
+                <HomeCard.Title>
+                  <IconXieTongJianGou />
+                  协同建构
+                </HomeCard.Title>
+              </template>
+              <HomeCardContent>
+                <span class="content">TODO</span>
+              </HomeCardContent>
+            </HomeCard>
+          </HomeCardContent>
+          <HomeCardContent :span="8">
+            <HomeCard color="white">
+              <template #title>
+                <HomeCard.Title>
+                  <IconAiZhuShou />
+                  AI助手
+                </HomeCard.Title>
+              </template>
+              <HomeCardContent>
+                <span class="content">TODO</span>
+              </HomeCardContent>
+            </HomeCard>
+          </HomeCardContent>
+          <HomeCardContent :span="8">
+            <HomeCard color="white">
+              <template #title>
+                <HomeCard.Title>
+                  <IconAiChuangJian />
+                  AI创建
+                </HomeCard.Title>
+              </template>
+              <HomeCardContent>
+                <span class="content">TODO</span>
+              </HomeCardContent>
+            </HomeCard>
+          </HomeCardContent>
         </HomeCard>
-      </HomeCard>
+      </HomeSectionContent>
     </HomeSection>
 
     <HomeSection title="更多资源">
-      <HomeCard title="课程案例" :span="12">
-        <!-- TODO -->
-      </HomeCard>
-      <HomeCard title="项目案例" :span="12">
-        <!-- TODO -->
-      </HomeCard>
-      <HomeCard>
-        <HomeCard title="常见问题" :span="8" color="white">
-          <!-- TODO -->
+      <HomeSectionContent :span="12">
+        <HomeCard title="课程案例">
+          <HomeCardContent :span="12">
+            <!-- TODO -->
+          </HomeCardContent>
         </HomeCard>
-        <HomeCard title="更新日志" :span="8" color="white">
-          <!-- TODO -->
+      </HomeSectionContent>
+
+      <HomeSectionContent :span="12">
+        <HomeCard title="项目案例" :span="12">
+          <HomeCardContent :span="12">
+            <!-- TODO -->
+          </HomeCardContent>
         </HomeCard>
-        <HomeCard title="如何与AI对话" :span="8" color="white">
-          <!-- TODO -->
+      </HomeSectionContent>
+
+      <HomeSectionContent>
+        <HomeCard>
+          <HomeCardContent :span="8">
+            <HomeCard title="常见问题" color="white">
+              <HomeCardContent>
+                <!-- TODO -->
+              </HomeCardContent>
+            </HomeCard>
+          </HomeCardContent>
+          <HomeCardContent :span="8">
+            <HomeCard title="更新日志" color="white">
+              <HomeCardContent>
+                <!-- TODO -->
+              </HomeCardContent>
+            </HomeCard>
+          </HomeCardContent>
+          <HomeCardContent :span="8">
+            <HomeCard title="如何与AI对话" color="white">
+              <HomeCardContent>
+                <!-- TODO -->
+              </HomeCardContent>
+            </HomeCard>
+          </HomeCardContent>
         </HomeCard>
-      </HomeCard>
+      </HomeSectionContent>
     </HomeSection>
   </div>
 </template>

components/HomeSection/HomeSectionContent.vue

@@ -0,0 +1,5 @@
+<template>
+  <el-col>
+    <slot> </slot>
+  </el-col>
+</template>

components/HomeSection/index.ts

@@ -0,0 +1,8 @@
+import HomeSection from "./HomeSection.vue";
+import HomeSectionContent from "./HomeSectionContent.vue";
+
+// HomeSection.Title = HomeSectionTitle;
+HomeSection.Content = HomeSectionContent;
+
+export default HomeSection;
+export { HomeSectionContent };

components/Search/index.vue

@@ -4,12 +4,26 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, shallowRef } from "vue";
+import localSearchIndex from '@localSearchIndex'
 import { Search } from "@element-plus/icons-vue";
 import { watchDebounced, useFocus } from "@vueuse/core";
 import { useI18n } from "vue-i18n";
 import _ from "lodash";
 
+/* Search */
+
+const searchIndexData = shallowRef(localSearchIndex)
+
+// hmr
+if (import.meta.hot) {
+  import.meta.hot.accept('/@localSearchIndex', (m) => {
+    if (m) {
+      searchIndexData.value = m.default
+    }
+  })
+}
+
 const { t } = useI18n();
 
 const input = ref("");
@@ -28,7 +42,6 @@ const suggestionVisible = computed(() => {
 watch(
   () => input.value,
   (val) => {
-    console.log(input$.value);
     loading.value = !!val;
     if (!val) {
       suggestions.value = [];
@@ -102,6 +115,7 @@ watchDebounced(
 <style lang="scss" scoped>
 .search-container {
   width: 514px;
+  margin: auto;
   position: relative;
   .search-trigger {
     border: 1px solid #aeccfe;