feat(web): iconify reader chrome, move 连读/预读 into 更多 menu with slider

frontend/src/components/Bookmarks.tsx

@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Check, Pencil, Plus, X } from "lucide-react";
 import { useState } from "react";
 import { api } from "../api/client";
 import type { Book } from "../api/types";
@@ -64,8 +65,13 @@ export function BookmarksTab({
             if (e.key === "Enter" && !add.isPending) add.mutate();
           }}
         />
-        <button className="rd-btn shrink-0" disabled={add.isPending} onClick={() => add.mutate()}>
-          加
+        <button
+          className="rd-btn inline-flex shrink-0 items-center gap-1"
+          aria-label="加书签"
+          disabled={add.isPending}
+          onClick={() => add.mutate()}
+        >
+          <Plus size={14} /> 加
         </button>
       </div>
       <ul className="space-y-0.5">
@@ -87,14 +93,15 @@ export function BookmarksTab({
                   }}
                 />
                 <button
-                  className="rd-btn shrink-0"
+                  className="rd-btn inline-flex shrink-0 items-center"
+                  aria-label="保存备注"
                   disabled={patch.isPending}
                   onClick={() => patch.mutate({ id: b.id, note: editVal.trim() })}
                 >
-                  ✓
+                  <Check size={14} />
                 </button>
-                <button className="rd-btn shrink-0" onClick={() => setEditId(null)}>
-                  ✕
+                <button className="rd-btn inline-flex shrink-0 items-center" aria-label="取消编辑" onClick={() => setEditId(null)}>
+                  <X size={14} />
                 </button>
               </div>
             ) : (
@@ -115,14 +122,14 @@ export function BookmarksTab({
                     setEditVal(b.note);
                   }}
                 >
-                  ✎
+                  <Pencil size={14} />
                 </button>
                 <button
                   className="rd-btn m-0.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
                   aria-label="删除书签"
                   onClick={() => del.mutate(b.id)}
                 >
-                  ✕
+                  <X size={14} />
                 </button>
               </div>
             )}

frontend/src/components/reader-nav.tsx

@@ -1,3 +1,4 @@
+import { Bookmark, List, X } from "lucide-react";
 import type { ReactNode } from "react";
 
 export type NavTab = "toc" | "bm";
@@ -35,25 +36,27 @@ export function ReaderNav({
               <button
                 role="tab"
                 aria-selected={tab === "toc"}
-                className={"rd-btn" + (tab === "toc" ? " rd-btn-on" : "")}
+                className={"rd-btn inline-flex items-center gap-1.5" + (tab === "toc" ? " rd-btn-on" : "")}
                 onClick={() => onTab?.("toc")}
               >
-                目录
+                <List size={14} /> 目录
               </button>
               <button
                 role="tab"
                 aria-selected={tab === "bm"}
-                className={"rd-btn" + (tab === "bm" ? " rd-btn-on" : "")}
+                className={"rd-btn inline-flex items-center gap-1.5" + (tab === "bm" ? " rd-btn-on" : "")}
                 onClick={() => onTab?.("bm")}
               >
-                书签
+                <Bookmark size={14} /> 书签
               </button>
             </>
           ) : (
-            <span className="rd-btn rd-btn-on">书签</span>
+            <span className="rd-btn rd-btn-on inline-flex items-center gap-1.5">
+              <Bookmark size={14} /> 书签
+            </span>
           )}
           <button className="rd-btn ml-auto" aria-label="关闭导航" onClick={onClose}>
-            ✕
+            <X size={14} />
           </button>
         </div>
         <div className="min-h-0 flex-1 overflow-y-auto p-2">{tab === "toc" ? toc : bookmarks}</div>