style: 表格顶部工具栏按钮统一为图标型(.tool-btn) + 设计规范第15章

- base.css 新增 .tool-btn 体系：40×40 squircle、圆角12px、emoji 18px、clean橙渐变主操作/ignore蓝soft次操作、running时spin旋转+disabled
- Top榜单：抓榜🔄/拉取📥 改为纯图标按钮，title悬停显示完整用途（含自动抓榜时间）
- 用户管理：新增用户改为 ➕ 图标按钮，title悬停提示双向互通
- design-spec.md 追加第15章「表格顶部工具栏按钮设计规范」：图标+tooltip、语义色阶、交互态、组合规则、已应用页面

frontend/src/styles/base.css

@@ -146,6 +146,26 @@ html[data-theme="dark"] .ambient::after {
 }
 .btn.op-btn-cell + .btn.op-btn-cell { margin-left: 7px; }
 
+/* —— 表格顶部工具栏按钮（图标型，规范第15章） —— */
+.tool-btn {
+  width: 40px; height: 40px;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 18px; line-height: 1;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  background: var(--card);
+  cursor: pointer; user-select: none;
+  transition: .16s;
+}
+.tool-btn:hover:not(:disabled) { border-color: var(--orange); transform: translateY(-1px); }
+.tool-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
+.tool-btn.clean { background: var(--grad-main); color: #fff; border-color: transparent; box-shadow: 0 6px 14px -6px rgba(255,140,0,.5); }
+.tool-btn.clean:hover:not(:disabled) { color: #fff; box-shadow: 0 10px 18px -6px rgba(255,140,0,.6); }
+.tool-btn.ignore { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
+.tool-btn.ignore:hover:not(:disabled) { color: var(--blue); background: color-mix(in srgb, var(--blue-soft), var(--blue) 10%); }
+.tool-btn.spin { animation: toolSpin 1s linear infinite; }
+@keyframes toolSpin { to { transform: rotate(360deg); } }
+
 /* —— 标签（状态标签体系） —— */
 .tag {
   display: inline-flex;

frontend/src/views/TopListView.vue

@@ -151,12 +151,10 @@ watch([() => state.toplistProgress.running, () => state.toplistPullProgress.runn
         <span class="tab" :class="{ active: filter === 'ready' }" @click="filter = 'ready'">已就绪</span>
       </div>
       <div class="actions">
-        <button class="btn clean" :disabled="state.toplistProgress.running" @click="doFetch">
-          {{ state.toplistProgress.running ? '⏳ 抓榜中…' : '🔄 立即抓榜' }}
-        </button>
-        <button class="btn ignore" :disabled="state.toplistPullProgress.running" @click="doPull">
-          {{ state.toplistPullProgress.running ? '⏳ 拉取中…' : '📥 一键拉取' }}
-        </button>
+        <button class="tool-btn clean" :class="{ spin: state.toplistProgress.running }" :disabled="state.toplistProgress.running"
+                title="立即抓榜（每周一 00:00 自动抓取 npm 周榜）" @click="doFetch">🔄</button>
+        <button class="tool-btn ignore" :class="{ spin: state.toplistPullProgress.running }" :disabled="state.toplistPullProgress.running"
+                title="一键拉取榜单包最新版到缓存" @click="doPull">📥</button>
       </div>
     </div>
 
@@ -243,8 +241,6 @@ watch([() => state.toplistProgress.running, () => state.toplistPullProgress.runn
 .toolbar {
   display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
 }
-/* 表格顶部左右两侧元素高度/圆角一致：操作按钮与筛选 tab 同规格（胶囊 99px · 7px 18px · 13px） */
-.toolbar .actions .btn { padding: 7px 18px; font-size: 13px; }
 .tabs { display: flex; gap: 8px; flex-wrap: wrap; }
 .tab {
   padding: 7px 18px; border-radius: 99px; font-size: 13px; font-weight: 600;

frontend/src/views/UsersView.vue

@@ -6,7 +6,7 @@
         Verdaccio 与 Verdaccio Mate 用户双向互通
         <span v-if="currentName" class="sub-tip">（当前登录面板账号为 <b>{{ currentName }}</b>，不可删除）</span>
       </div>
-      <button class="btn clean" @click="openAdd">＋ 新增用户</button>
+      <button class="tool-btn clean" title="新增用户（Verdaccio 与 Verdaccio Mate 双向互通）" @click="openAdd">➕</button>
     </div>
 
     <div v-if="!enabled" class="empty-state">