Update Create.vue

components/i/Create.vue

@@ -14,7 +14,17 @@
                 :padded="false"
                 maxlength="2000"
             />
-            <div class="flex justify-between">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center gap-2">
+                    <UTooltip :text="isInternet ? '已接入互联网' : '不接入互联网'" :shortcuts="[metaSymbol, 'O']">
+                        <UButton
+                            :ui="{ rounded: 'rounded-full' }"
+                            :icon="isInternet ? 'i-heroicons-signal-20-solid' : 'i-heroicons-signal-slash-20-solid'"
+                            color="gray"
+                            variant="ghost"
+                            @click="handleToggleInternet"
+                        />
+                    </UTooltip>
                     <USelectMenu
                         :ui-menu="menuUI"
                         v-model="selectedRepo"
@@ -23,8 +33,18 @@
                         value-attribute="label"
                         option-attribute="label"
                     >
-                    <UButton color="gray" variant="ghost" :class="{ 'group': selectedRepo }">
-                        <span>{{ selectedRepo || '选择 GitHub 项目' }}</span>
+                        <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"
@@ -37,13 +57,17 @@
                             />
                         </UButton>
                     </USelectMenu>
+                </div>
+                <UTooltip text="搜索" :shortcuts="[metaSymbol, 'Enter']">
                     <UButton
-                    trailing-icon="i-heroicons-chevron-right-20-solid"
+                        :ui="{ rounded: 'rounded-full' }"
+                        icon="i-heroicons-chevron-right-20-solid"
                         @click="handleSearch"
                         :loading="loading"
                         :disabled="query === ''"
-                    label="搜索"
+                        size="md"
                     />
+                </UTooltip>
             </div>
         </UCard>
     </div>
@@ -52,19 +76,21 @@
 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
@@ -108,6 +134,16 @@ defineShortcuts({
         handler: () => {
             handleSearch()
         }
+    },
+    meta_o: {
+        usingInput: 'createInput',
+        handler: () => {
+            handleToggleInternet()
+        }
     }
 })
+
+function handleToggleInternet () {
+    isInternet.value = !isInternet.value
+}
 </script>