Merge branch 'main' of gitcode.com:git_bot/ai-fe

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">
-                        <UKbd>⌘</UKbd>
+                    <div class="flex items-center gap-0.5">
+                        <UKbd>{{ metaSymbol }}</UKbd>
                         <UKbd>K</UKbd>
                     </div>
                 </div>
             </UButton>
+            <div class="mt-4">
+                <INav />
+            </div>
         </div>
     </div>
     <UDivider />
@@ -26,8 +31,12 @@
             @click="isDark = !isDark"
         />
     </div>
+    <UModal v-model="isOpenCreate">
+        <ICreate @search="handleCloseCreate" />
+    </UModal>
 </template>
 <script setup lang="ts">
+const { metaSymbol } = useShortcuts()
 const colorMode = useColorMode()
 const isDark = computed({
     get () {
@@ -37,4 +46,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

components/i/Nav.vue

+<template>
+    <div class="flex flex-col gap-2">
+        <UButton
+            leading-icon="i-heroicons-home"
+            color="gray"
+            variant="ghost"
+            size="md"
+            label="首页"
+            to="/"
+        />
+        <UButton
+            leading-icon="i-heroicons-rectangle-stack"
+            color="gray"
+            variant="ghost"
+            size="md"
+            label="收藏夹"
+            to="/library"
+        />
+        <div class="flex justify-between">
+            <UButton
+                class="flex-grow"
+                leading-icon="i-heroicons-magnifying-glass"
+                color="gray"
+                variant="ghost"
+                size="md"
+                label="搜索记录"
+            />
+            <UButton
+                label="清空"
+                size="md"
+                variant="link"
+            />
+        </div>
+        <div class="flex flex-col gap-2 border-l pl-1 ml-5">
+            <template v-for="(item, index) in searchHistory" :key="index">
+                <UButton
+                    color="gray"
+                    variant="ghost"
+                    size="xs"
+                >
+                    <div class="truncate">{{ item.title }}</div>
+                </UButton>
+            </template>
+        </div>
+    </div>
+</template>
+<script setup>
+const searchHistory = ref([
+    {
+        title: 'Vue 的 v-model 怎么用'
+    },
+    {
+        title: '帮我写一个爬虫，爬取豆瓣热门电影top250'
+    },
+    {
+        title: 'grid 的 grid-template-columns 除了 minmax 和 repeat，还有哪些值'
+    },
+    {
+        title: 'flex 各种布局的区别'
+    }
+])
+</script>

package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev --host",
+    "dev": "SW=false nuxt dev --host",
     "dev-sw": "SW=true nuxi dev --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview",

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>