From 20dd8db04651ea1f1abeb60e28b1f8fcee855b1d Mon Sep 17 00:00:00 2001
From: TakWolf <takwolf@foxmail.com>
Date: Sun, 30 Jun 2024 06:18:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B8=AE=E5=8A=A9=E6=96=87?=
 =?UTF-8?q?=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 www/css/style.css     |  9 ++++++++
 www/css/style.css.map |  2 +-
 www/css/style.scss    |  9 ++++++++
 www/index.html        | 49 ++++++++++++++++++++++---------------------
 www/js/app.js         |  3 +++
 5 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/www/css/style.css b/www/css/style.css
index 4af0889..ba15d16 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -150,6 +150,15 @@
 .main .search-result .item .glyphs .line .glyph .char {
   text-align: center;
 }
+.main .search-result .item .help-tip {
+  padding: 32px;
+  font-size: 16px;
+}
+.main .search-result .item .help-tip .example-text {
+  color: blue;
+  text-decoration: underline;
+  cursor: pointer;
+}
 
 .footer {
   padding-top: 8px;
diff --git a/www/css/style.css.map b/www/css/style.css.map
index cb3f38d..1337c63 100644
--- a/www/css/style.css.map
+++ b/www/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAKJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAKR;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGR;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAS5B;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAKJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;AAKR;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGR;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAKhB;EACI;EACA;;AACA;EACI;EACA;EACA;;;AAOpB;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/www/css/style.scss b/www/css/style.scss
index 72e3c84..87f0d77 100644
--- a/www/css/style.scss
+++ b/www/css/style.scss
@@ -153,6 +153,15 @@
                     }
                 }
             }
+            .help-tip {
+                padding: 32px;
+                font-size: 16px;
+                .example-text {
+                    color: blue;
+                    text-decoration: underline;
+                    cursor: pointer;
+                }
+            }
         }
     }
 }
diff --git a/www/index.html b/www/index.html
index b6fbad6..0437103 100644
--- a/www/index.html
+++ b/www/index.html
@@ -45,37 +45,38 @@ <h1 class="title">思源映射查看器</h1>
                 </label>
             </div>
         </template>
-        <template v-if="searchQuery.length > 0">
-            <div class="search-result">
-                <div class="item" v-for="codePoint in searchQuery" :set="c = String.fromCodePoint(codePoint)">
-                    <div class="title">
-                        <span class="code-point">U+{{ codePoint.toString(16).toUpperCase().padStart(4, '0') }}</span>
-                        <span class="char">{{ c }}</span>
-                        <span class="tag" v-for="tag in mapping[codePoint].tags">{{ tag }}</span>
-                    </div>
-                    <div class="glyphs">
-                        <div class="line" v-if="displaySans && 'sans' in mapping[codePoint]">
-                            <div class="glyph" v-for="languageFlavor in languageFlavors" :set="glyphName = mapping[codePoint]['sans'][languageFlavor]">
-                                <div class="info sans-info">
-                                    <span class="language-flavor">{{ languageFlavor.toUpperCase() }}</span>
-                                    <span class="glyph-name">{{ glyphName }}</span>
-                                </div>
-                                <span class="char" :style="{ width: fontSize * 1.4 + 'px', color: getGlyphColor(glyphName), fontFamily: 'SourceHanSans-' + languageFlavor.toUpperCase() + ', sans-serif', fontSize: fontSize + 'px', fontWeight: fontWeight }">{{ c }}</span>
+        <div class="search-result">
+            <div class="item" v-for="codePoint in searchQuery" :set="c = String.fromCodePoint(codePoint)">
+                <div class="title">
+                    <span class="code-point">U+{{ codePoint.toString(16).toUpperCase().padStart(4, '0') }}</span>
+                    <span class="char">{{ c }}</span>
+                    <span class="tag" v-for="tag in mapping[codePoint].tags">{{ tag }}</span>
+                </div>
+                <div class="glyphs">
+                    <div class="line" v-if="displaySans && 'sans' in mapping[codePoint]">
+                        <div class="glyph" v-for="languageFlavor in languageFlavors" :set="glyphName = mapping[codePoint]['sans'][languageFlavor]">
+                            <div class="info sans-info">
+                                <span class="language-flavor">{{ languageFlavor.toUpperCase() }}</span>
+                                <span class="glyph-name">{{ glyphName }}</span>
                             </div>
+                            <span class="char" :style="{ width: fontSize * 1.4 + 'px', color: getGlyphColor(glyphName), fontFamily: 'SourceHanSans-' + languageFlavor.toUpperCase() + ', sans-serif', fontSize: fontSize + 'px', fontWeight: fontWeight }">{{ c }}</span>
                         </div>
-                        <div class="line" v-if="displaySerif && 'serif' in mapping[codePoint]">
-                            <div class="glyph" v-for="languageFlavor in languageFlavors" :set="glyphName = mapping[codePoint]['serif'][languageFlavor]">
-                                <div class="info serif-info">
-                                    <span class="language-flavor">{{ languageFlavor.toUpperCase() }}</span>
-                                    <span class="glyph-name">{{ glyphName }}</span>
-                                </div>
-                                <span class="char" :style="{ width: fontSize * 1.4 + 'px', color: getGlyphColor(glyphName), fontFamily: 'SourceHanSerif-' + languageFlavor.toUpperCase() + ', serif', fontSize: fontSize + 'px', fontWeight: fontWeight }">{{ c }}</span>
+                    </div>
+                    <div class="line" v-if="displaySerif && 'serif' in mapping[codePoint]">
+                        <div class="glyph" v-for="languageFlavor in languageFlavors" :set="glyphName = mapping[codePoint]['serif'][languageFlavor]">
+                            <div class="info serif-info">
+                                <span class="language-flavor">{{ languageFlavor.toUpperCase() }}</span>
+                                <span class="glyph-name">{{ glyphName }}</span>
                             </div>
+                            <span class="char" :style="{ width: fontSize * 1.4 + 'px', color: getGlyphColor(glyphName), fontFamily: 'SourceHanSerif-' + languageFlavor.toUpperCase() + ', serif', fontSize: fontSize + 'px', fontWeight: fontWeight }">{{ c }}</span>
                         </div>
                     </div>
                 </div>
             </div>
-        </template>
+            <div class="item" v-if="searchQuery.length === 0">
+                <div class="help-tip">随便搜搜什么字符，例如：<span class="example-text" @click="onExampleTextClick('邊邉㍿')">邊邉㍿</span></div>
+            </div>
+        </div>
     </main>
     <footer class="footer">
         <span>© 2024 狼人小林</span>
diff --git a/www/js/app.js b/www/js/app.js
index 8782d0a..8959af4 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -85,5 +85,8 @@ createApp({
             }
             return 'black'
         },
+        onExampleTextClick(text) {
+            this.input = text
+        },
     },
 }).mount('#app')