p

components/i/Aside.vue

 <template>
     <div class="flex-grow bg-gray-100 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800">
-        <div class="p-2 flex flex-col">
-            <ILogo />
+        <div class="p-4 flex flex-col">
+            <ILogo class="mt-2" />
             <UButton
-                class="flex w-full mt-4"
+                class="flex w-full mt-6"
                 color="gray"
                 leading-icon="i-heroicons-plus-20-solid"
+                size="md"
+                @click="handleShowCreate"
             >
                 <div class="flex flex-grow justify-between items-center">
                     <span>新主题</span>
-                    <div class="space-x-1">
+                    <div class="flex items-center gap-0.5">
                         <UKbd>{{ metaSymbol }}</UKbd>
                         <UKbd>K</UKbd>
                     </div>
@@ -26,6 +28,9 @@
             @click="isDark = !isDark"
         />
     </div>
+    <UModal v-model="isOpenCreate">
+        <ICreate @search="handleCloseCreate" />
+    </UModal>
 </template>
 <script setup lang="ts">
 const { metaSymbol } = useShortcuts()
@@ -38,12 +43,18 @@ const isDark = computed({
         colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
     }
 })
+const isOpenCreate = ref(false)
+const handleShowCreate = () => {
+    isOpenCreate.value = true
+}
+const handleCloseCreate = () => {
+    isOpenCreate.value = false
+}
 defineShortcuts({
     meta_k: {
         handler: () => {
-
+            handleShowCreate()
         }
     }
 })
-
 </script>

components/i/Create.vue

+<template>
+    <div class="max-w-screen-sm w-full flex flex-col space-y-4 p-6">
+        <UTextarea
+            v-model="query"
+            autoresize
+            placeholder="输入搜索内容..."
+            :rows="5"
+        />
+        <div class="flex justify-between">
+            <USelectMenu
+                class="min-w-40"
+                v-model="selectedRepo"
+                :options="repos"
+                placeholder="选择 GitHub 项目"
+                searchable
+            />
+            <UButton
+                trailing-icon="i-heroicons-chevron-right-20-solid"
+                @click="handleSearch"
+            >搜索</UButton>
+        </div>
+    </div>
+</template>
+<script setup>
+const emits = defineEmits([ 'search' ])
+const query = ref('')
+const selectedRepo = ref('https://github.com/keycloak/keycloak.git')
+const repos = ['keycloak', 'ViewUIPlus']
+const handleSearch = () => {
+    navigateTo(`/search/1?query=${query.value}&repo=${selectedRepo.value}`)
+    emits('search')
+}
+</script>

components/i/Logo.vue

 <template>
     <div class="flex justify-center">
-        <div class="font-mono text-2xl font-medium">GitBot.AI</div>
+        <NuxtLink to="/" class="font-mono text-2xl font-medium">GitBot.AI</NuxtLink>
     </div>
 </template>
\ No newline at end of file

pages/index.vue

 <template>
     <div class="flex items-center justify-center w-full h-full">
-        <div class="max-w-screen-sm w-full flex flex-col space-y-4 p-6">
-            <UTextarea
-                v-model="query"
-                autoresize
-                placeholder="输入搜索内容..."
-                :rows="5"
-            />
-            <div class="flex justify-between">
-                <USelectMenu
-                    class="min-w-40"
-                    v-model="selectedRepo"
-                    :options="repos"
-                    placeholder="选择 GitHub 项目"
-                    searchable
-                />
-                <UButton
-                    trailing-icon="i-heroicons-chevron-right-20-solid"
-                    @click="handleSearch"
-                >搜索</UButton>
-            </div>
-        </div>
+        <ICreate />
     </div>
 </template>
-<script setup>
-const query = ref('')
-const selectedRepo = ref('https://github.com/keycloak/keycloak.git')
-const repos = ['keycloak', 'ViewUIPlus']
-const handleSearch = () => {
-    navigateTo(`/search/1?query=${query.value}&repo=${selectedRepo.value}`);
-}
-</script>