| 1 | <template> |
| 2 | <button class="search-btn flex items-center" @click="openBox"> |
| 3 | <Icon :name="SearchIcon" :size="16" class="search-btn-icon" /> |
| 4 | <span>Search</span> |
| 5 | <n-text code class="search-command"> |
| 6 | <span :class="{ win: commandIcon === 'CTRL' }">{{ commandIcon }}</span> |
| 7 | K |
| 8 | </n-text> |
| 9 | </button> |
| 10 | </template> |
| 11 | |
| 12 | <script lang="ts" setup> |
| 13 | import { NText } from "naive-ui" |
| 14 | import { onMounted, ref } from "vue" |
| 15 | import Icon from "@/components/common/Icon.vue" |
| 16 | import { useSearchDialog } from "@/composables/useSearchDialog" |
| 17 | import { getNavigatorOS } from "@/utils" |
| 18 | |
| 19 | const SearchIcon = "ion:search-outline" |
| 20 | const commandIcon = ref("⌘") |
| 21 | |
| 22 | function openBox() { |
| 23 | useSearchDialog().open() |
| 24 | } |
| 25 | |
| 26 | onMounted(() => { |
| 27 | const isWindows = getNavigatorOS() === "Windows" |
| 28 | commandIcon.value = isWindows ? "CTRL" : "⌘" |
| 29 | }) |
| 30 | </script> |
| 31 | |
| 32 | <style lang="scss" scoped> |
| 33 | .search-btn { |
| 34 | border-radius: 50px; |
| 35 | background-color: var(--bg-body-color); |
| 36 | gap: 10px; |
| 37 | height: 32px; |
| 38 | cursor: pointer; |
| 39 | padding: 4px 10px; |
| 40 | padding-right: 6px; |
| 41 | outline: none; |
| 42 | border: none; |
| 43 | |
| 44 | .search-command { |
| 45 | white-space: nowrap; |
| 46 | |
| 47 | span { |
| 48 | line-height: 0; |
| 49 | position: relative; |
| 50 | top: 1px; |
| 51 | font-size: 16px; |
| 52 | |
| 53 | &.win { |
| 54 | font-size: inherit; |
| 55 | top: 0; |
| 56 | } |
| 57 | } |
| 58 | } |
| 59 | |
| 60 | :deep() { |
| 61 | & > .n-icon { |
| 62 | opacity: 0.5; |
| 63 | transition: opacity 0.3s; |
| 64 | } |
| 65 | } |
| 66 | & > span { |
| 67 | opacity: 0.5; |
| 68 | padding-right: 2px; |
| 69 | font-size: 14px; |
| 70 | transition: opacity 0.3s; |
| 71 | } |
| 72 | |
| 73 | :deep() { |
| 74 | & > code { |
| 75 | background-color: var(--bg-sidebar-color); |
| 76 | border-top-right-radius: 10px; |
| 77 | border-bottom-right-radius: 10px; |
| 78 | padding-right: 10px; |
| 79 | } |
| 80 | } |
| 81 | |
| 82 | &:hover { |
| 83 | :deep() { |
| 84 | & > .n-icon { |
| 85 | opacity: 0.9; |
| 86 | } |
| 87 | } |
| 88 | & > span { |
| 89 | opacity: 0.9; |
| 90 | } |
| 91 | } |
| 92 | |
| 93 | @media (max-width: 1000px) { |
| 94 | padding-right: 8px !important; |
| 95 | padding-left: 8px !important; |
| 96 | |
| 97 | & > span { |
| 98 | display: none; |
| 99 | } |
| 100 | & > .n-text--code { |
| 101 | display: none; |
| 102 | } |
| 103 | } |
| 104 | } |
| 105 | |
| 106 | .direction-rtl { |
| 107 | .search-btn { |
| 108 | padding-right: 10px; |
| 109 | padding-left: 6px; |
| 110 | |
| 111 | .search-btn-icon { |
| 112 | transform: rotateY(180deg); |
| 113 | } |
| 114 | |
| 115 | :deep() { |
| 116 | & > code { |
| 117 | border-top-left-radius: 10px; |
| 118 | border-bottom-left-radius: 10px; |
| 119 | padding-left: 10px; |
| 120 | |
| 121 | border-top-right-radius: var(--n-code-border-radius); |
| 122 | border-bottom-right-radius: var(--n-code-border-radius); |
| 123 | padding-right: 0.35em; |
| 124 | } |
| 125 | } |
| 126 | } |
| 127 | } |
| 128 | </style> |