pref: null search hint

src/components/search/KUNGalgameSearchBox.vue

@@ -83,6 +83,10 @@ onBeforeUnmount(() => {
           <SearchHistory v-if="!search.keywords" />
 
           <SearchResult :topics="topics" v-if="topics.length" />
+
+          <span class="empty" v-if="!topics.length && search.keywords">
+            {{ $tm('mainPage.header.emptyResult') }}
+          </span>
         </div>
       </div>
     </Transition>
@@ -123,6 +127,14 @@ onBeforeUnmount(() => {
   overflow-y: scroll;
 }
 
+.empty {
+  display: flex;
+  justify-content: center;
+  color: var(--kungalgame-blue-2);
+  font-style: oblique;
+  margin-top: 20px;
+}
+
 .search-enter-from {
   opacity: 0;
 }

src/components/search/SearchHistory.vue

@@ -30,7 +30,7 @@ const handleDeleteHistory = (historyIndex: number) => {
       </span>
     </div>
 
-    <div class="history-container">
+    <div class="history-container" v-if="searchHistory.length">
       <div
         class="single-history"
         v-for="(history, index) in searchHistory"
@@ -47,6 +47,10 @@ const handleDeleteHistory = (historyIndex: number) => {
         </span>
       </div>
     </div>
+
+    <span class="empty" v-if="!searchHistory.length">
+      {{ $tm('mainPage.header.emptyHistory') }}
+    </span>
   </div>
 </template>
 
@@ -122,4 +126,11 @@ const handleDeleteHistory = (historyIndex: number) => {
   color: var(--kungalgame-font-color-0);
   display: none;
 }
+
+.empty {
+  display: flex;
+  justify-content: center;
+  color: var(--kungalgame-blue-2);
+  font-style: oblique;
+}
 </style>

src/language/en.ts

@@ -64,6 +64,8 @@ export default {
       search: 'Input to Auto Search',
       history: 'Search History',
       clear: 'Clear all history',
+      emptyHistory: `This loli hasn't searched for anything`,
+      emptyResult: 'No results found...',
     },
     asideActive: {
       fold: 'Fold Aside',

src/language/zh.ts

@@ -64,6 +64,8 @@ export default {
       search: '输入内容以自动搜索',
       history: '搜索历史',
       clear: '清除所有历史',
+      emptyHistory: '这只萝莉什么也没搜索过',
+      emptyResult: '什么也没有搜索到。。。',
     },
     asideActive: {
       fold: '折叠左侧区域',