better info

src/App.svelte

@@ -145,11 +145,17 @@
     <div class="error">{error}</div>
   {/if}
 
+  <div class="info">
     {#if loading}
-    <div id="loading"><p>正在加载...</p></div>
+      <p>正在加载...</p>
     {:else if result && result.has_more}
-    <div id="more"><button on:click={do_search_more}>加载更多</button></div>
+      <button on:click={do_search_more}>加载更多</button>
+    {:else if result && !result.has_more}
+      <p>到底了。</p>
+    {:else if result && result.messages.length == 0}
+      <p>没有匹配的消息。</p>
     {/if}
+  </div>
 </main>
 
 <style>
@@ -178,16 +184,16 @@
     text-align: center;
   }
 
-  #loading, #more {
+  .info {
     display: flex;
     justify-content: center;
   }
-  #loading > * {
-    border: 1px #bfbfbf solid;
-    border-radius: 2em;
-  }
-  #loading > *, #more > * {
+  .info > * {
     padding: 0.5em 1em;
     margin: 1em 0;
   }
+  .info > p {
+    border: 1px #bfbfbf solid;
+    border-radius: 2em;
+  }
 </style>