fix: 给功能区所有按钮补充 tips && 统一按钮样式.

README.md

@@ -102,6 +102,6 @@ npm run build:prod
 ## Bugs
 
 - [x] 导航栏 Button 连续点击容易失败 -> 样式嵌套问题, 已解决
-- [ ] 右上角的数个按钮中，只有【分类】【主题】鼠标移上去未变化样式
+- [x] 补充整齐功能区按钮的 tips -> 右上角的数个按钮中，只有【分类】【主题】鼠标移上去未变化样式
 - [ ] 打开图片墙会改变地址栏，看起来还蛮怪的
 - [ ] 先输入搜索文字，再切换分类或 tag，要搜索的文字会被无视

src/App.svelte

@@ -65,6 +65,7 @@
     {
       id: 'readme',
       text: '使用说明',
+      hint: '必看的说明哟~',
       click: () => {
         console.log('TODO: click 弹出使用说明.');
       },
@@ -218,31 +219,31 @@
                 />
               </div>
               <li>
-                <div class="p-3 tooltip tooltip-left" data-tip={Item.hint}>
-                  <button on:mouseenter={Item.hover} on:click={Item.click}>{Item.text}</button>
+                <div class="p-0 tooltip tooltip-left" data-tip={Item.hint}>
+                  <button class="p-3" on:mouseenter={Item.hover} on:click={Item.click}>{Item.text}</button>
                 </div>
               </li>
 
               <!-- NOTE: 分类搜索 -->
-              <MenuWrapNav title="分类" tailwind="w-48 max-h-[70vh]">
+              <MenuWrapNav title="分类" tailwind="w-48 max-h-[70vh]" tip="按语言和标签分类搜索">
                 <MenuCateTag {contentDom} />
               </MenuWrapNav>
             {:else}
               <li>
-                <div class="p-3 tooltip tooltip-left" data-tip={Item.hint}>
-                  <button on:mouseenter={Item.hover} on:click={Item.click}>{Item.text}</button>
+                <div class="p-0 tooltip tooltip-left" data-tip={Item.hint}>
+                  <button class="p-3" on:mouseenter={Item.hover} on:click={Item.click}>{Item.text}</button>
                 </div>
               </li>
             {/if}
           {/each}
 
           <!-- NOTE: 主题 -->
-          <MenuWrapNav title="主题" tailwind="w-64 max-h-[70vh]">
+          <MenuWrapNav title="主题" tailwind="w-64 max-h-[70vh]" tip="选择喜欢的主题">
             <MenuTheme {themes} {setTheme} />
           </MenuWrapNav>
 
           <!-- NOTE: 配置 -->
-          <MenuWrapNav title="配置" tailwind="w-72 max-h-[70vh]">
+          <MenuWrapNav title="配置" tailwind="w-72 max-h-[70vh]" tip="自定义适合的配置">
             <MenuConfig />
           </MenuWrapNav>
         </ul>

src/components/MenuWrapNav.svelte

@@ -5,11 +5,18 @@
   export let title;
   /**样式*/
   export let tailwind;
+  /**悬浮提示*/
+  export let tip;
 </script>
 
 <li>
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-  <div class="dropdown dropdown-bottom dropdown-left p-0">
+  <div
+    class="
+      dropdown dropdown-bottom dropdown-left
+      tooltip tooltip-left px-0 py-3"
+    data-tip={tip}
+  >
     <!-- svelte-ignore a11y-label-has-associated-control -->
     <label tabindex="0" class="p-3">{title}</label>
     <ul tabindex="0" class={tailwind + ' dropdown-content z-[31] p-2 shadow bg-base-100 rounded-box overflow-y-auto'}>