Update Create.vue

components/i/Create.vue

@@ -14,36 +14,60 @@
                 :padded="false"
                 maxlength="2000"
             />
-            <div class="flex justify-between">
-                <USelectMenu
-                    :ui-menu="menuUI"
-                    v-model="selectedRepo"
-                    :options="$repos"
-                    placeholder="选择 GitHub 项目"
-                    value-attribute="label"
-                    option-attribute="label"
-                >
-                    <UButton color="gray" variant="ghost" :class="{ 'group': selectedRepo }">
-                        <span>{{ selectedRepo || '选择 GitHub 项目' }}</span>
-                        <UIcon name="i-heroicons-chevron-down-20-solid" class="text-xl flex group-hover:hidden" />
+            <div class="flex justify-between items-center">
+                <div class="flex items-center gap-2">
+                    <UTooltip :text="isInternet ? '已接入互联网' : '不接入互联网'" :shortcuts="[metaSymbol, 'O']">
                         <UButton
-                            v-if="selectedRepo"
-                            class="hidden group-hover:flex"
-                            @click.stop.prevent="handleClearRepo"
-                            icon="i-heroicons-x-mark-20-solid"
-                            :padded="false"
+                            :ui="{ rounded: 'rounded-full' }"
+                            :icon="isInternet ? 'i-heroicons-signal-20-solid' : 'i-heroicons-signal-slash-20-solid'"
                             color="gray"
-                            variant="link"
+                            variant="ghost"
+                            @click="handleToggleInternet"
                         />
-                    </UButton>
-                </USelectMenu>
-                <UButton
-                    trailing-icon="i-heroicons-chevron-right-20-solid"
-                    @click="handleSearch"
-                    :loading="loading"
-                    :disabled="query === ''"
-                    label="搜索"
-                />
+                    </UTooltip>
+                    <USelectMenu
+                        :ui-menu="menuUI"
+                        v-model="selectedRepo"
+                        :options="$repos"
+                        placeholder="选择 GitHub 项目"
+                        value-attribute="label"
+                        option-attribute="label"
+                    >
+                        <UTooltip text="选择 GitHub 项目" v-if="!selectedRepo">
+                            <UButton
+                                :ui="{ rounded: 'rounded-full' }"
+                                icon="i-simple-icons-github"
+                                color="gray"
+                                variant="ghost"
+                            />
+                        </UTooltip>
+
+                        <UButton v-else color="gray" variant="ghost" :class="{ 'group': selectedRepo }">
+                            <UIcon name="i-simple-icons-github" />
+                            <span>{{ selectedRepo }}</span>
+                            <UIcon name="i-heroicons-chevron-down-20-solid" class="text-xl flex group-hover:hidden" />
+                            <UButton
+                                v-if="selectedRepo"
+                                class="hidden group-hover:flex"
+                                @click.stop.prevent="handleClearRepo"
+                                icon="i-heroicons-x-mark-20-solid"
+                                :padded="false"
+                                color="gray"
+                                variant="link"
+                            />
+                        </UButton>
+                    </USelectMenu>
+                </div>
+                <UTooltip text="搜索" :shortcuts="[metaSymbol, 'Enter']">
+                    <UButton
+                        :ui="{ rounded: 'rounded-full' }"
+                        icon="i-heroicons-chevron-right-20-solid"
+                        @click="handleSearch"
+                        :loading="loading"
+                        :disabled="query === ''"
+                        size="md"
+                    />
+                </UTooltip>
             </div>
         </UCard>
     </div>
@@ -52,26 +76,28 @@
 const { $repos } = storeToRefs(useReposStore())
 const { $setRepo } = useReposStore()
 const { $setFirstRecordTitle } = useSearchStore()
+const { metaSymbol } = useShortcuts()
 const emits = defineEmits([ 'search' ])
 const query = ref('')
 const selectedRepo = ref('')
 const loading = ref(false)
 const cardUI = {
     body: {
-        padding: 'p-4 sm:p-4'
+        padding: 'p-3 sm:p-3'
     },
     rounded: 'rounded-xl'
 }
 const menuUI = {
     width: 'w-auto'
 }
+const isInternet = ref(true)
 
 const handleSearch = async () => {
     if (loading.value || query.value === '') return
     loading.value = true
     const currentRepo = $repos.value.find(item => item.label === selectedRepo.value)
-    const repo_path = currentRepo ? currentRepo.url : '' 
-    const { data, error } = await useRequest('/v1/chat/completion/create', { 
+    const repo_path = currentRepo ? currentRepo.url : ''
+    const { data, error } = await useRequest('/v1/chat/completion/create', {
         method: 'post',
         body: {
             repo_path,
@@ -108,6 +134,16 @@ defineShortcuts({
         handler: () => {
             handleSearch()
         }
+    },
+    meta_o: {
+        usingInput: 'createInput',
+        handler: () => {
+            handleToggleInternet()
+        }
     }
 })
+
+function handleToggleInternet () {
+    isInternet.value = !isInternet.value
+}
 </script>