🔀 Merge #1966 into deploy/rinkeby

src/components/NFTBook/ItemCard.vue

@@ -158,6 +158,7 @@
               class="flex flex-col justify-center min-w-0"
             >
               <NuxtLink
+                class="group"
                 :to="
                   localeLocation({
                     name: 'store',
@@ -167,6 +168,7 @@
               >
                 <NFTBookSpecTableLabel :text="$t('identity_type_author')" />
                 <NFTBookSpecTableValue
+                  class="group-hover:underline"
                   :text="iscnWorkAuthor"
                   :preset="preset"
                 />

src/components/SearchBar.vue

@@ -5,7 +5,13 @@
       preset="tertiary"
       @click="toggleSearch"
     >
-      <IconSearch />
+      <div class="flex flex-nowrap items-center gap-[8px]">
+        <IconSearch />
+        <p
+          class="text-medium-gray whitespace-nowrap"
+          v-text="$t('listing_page_search_label')"
+        />
+      </div>
     </ButtonV2>
     <div
       class="flex items-center justify-center cursor-pointer p-[8px] desktop:hidden"
@@ -42,10 +48,11 @@
     >
       <IconSearch />
       <input
-        :value="searchQuery"
+        ref="searchInput"
         class="w-full bg-transparent border-0 focus-visible:outline-none"
         type="text"
-        :placeholder="$t('gutenberg_search_placeholder')"
+        :value="searchQuery"
+        :placeholder="placeholderText"
         @input="debouncedUpdateSearchKeyword"
       />
       <ButtonV2
@@ -63,6 +70,7 @@
 
 <script>
 import debounce from 'lodash.debounce';
+import { SEARCH_SUGGESTIONS } from '@/constant/index';
 
 export default {
   name: 'SearchBar',
@@ -75,6 +83,7 @@ export default {
   data() {
     return {
       isSearchOpen: false,
+      placeholderText: this.$t('gutenberg_search_placeholder'),
     };
   },
   mounted() {
@@ -88,6 +97,10 @@ export default {
         this.$emit('clear');
       } else {
         this.$emit('open');
+        this.placeholderText = this.getRandomPlaceholder();
+        this.$nextTick(() => {
+          this.$refs.searchInput?.focus();
+        });
       }
       this.isSearchOpen = !this.isSearchOpen;
     },
@@ -97,6 +110,11 @@ export default {
       },
       200
     ),
+    getRandomPlaceholder() {
+      const shuffled = [...SEARCH_SUGGESTIONS].sort(() => Math.random() - 0.5);
+      const randomTerms = shuffled.slice(0, 3);
+      return randomTerms.join('、');
+    },
   },
 };
 </script>

src/constant/index.js

@@ -428,3 +428,18 @@ export const SIGN_AUTHORIZATION_PERMISSIONS = [
   'read:nftcollection',
   'write:nftcollection',
 ];
+
+export const SEARCH_SUGGESTIONS = [
+  '免費',
+  '小說',
+  '旅遊',
+  '報刊',
+  '心靈',
+  '運動',
+  '董啟章',
+  '李立峯',
+  '新聞',
+  '理財',
+  '區塊鏈',
+  '繪本',
+];

src/locales/en.json

@@ -480,6 +480,7 @@
   "listing_page_QA_label": "What is the difference between ebooks and paperbacks?",
   "listing_page_QA_title": "FAQ",
   "listing_page_search": "Search",
+  "listing_page_search_label": "book title or author",
   "listing_page_search_not_found": "Please try different keywords.",
   "listing_page_search_recommend": "Or explore our recommended books:",
   "listing_page_search_result": "The search results for '{query}':",

src/locales/zh-Hant.json

@@ -480,6 +480,7 @@
   "listing_page_QA_label": "電子書和紙本書有什麼分別?",
   "listing_page_QA_title": "常見問題",
   "listing_page_search": "搜尋",
+  "listing_page_search_label": "搜尋書名或作者",
   "listing_page_search_not_found": "請嘗試使用其他關鍵字。",
   "listing_page_search_recommend": "或是您可以瀏覽我們的推薦書籍：",
   "listing_page_search_result": "以下為 “{query}” 的搜尋結果：",