From bd6fcf3d45d641523fadbd0bc49d371838d94765 Mon Sep 17 00:00:00 2001 From: Muse Date: Sat, 14 Nov 2026 16:40:51 +0800 Subject: [PATCH] =?UTF-8?q?style(search):=20=E5=8C=BA=E5=88=86=E5=A4=A7?= =?UTF-8?q?=E5=B0=8F=E5=86=99=E6=94=B9=E8=A1=8C=E5=86=85=20[Aa]=20?= =?UTF-8?q?=E5=BC=80=E5=85=B3=EF=BC=88=E6=90=9C=E7=B4=A2=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E5=89=8D=EF=BC=89=EF=BC=8C=E6=82=AC=E6=B5=AE=E6=8F=90=E7=A4=BA?= =?UTF-8?q?=E6=94=B9=E8=87=AA=E7=BB=98=E4=B8=BB=E9=A2=98=E6=B0=94=E6=B3=A1?= =?UTF-8?q?=EF=BC=88Tooltip=20=E7=BB=84=E4=BB=B6=EF=BC=89=EF=BC=8C?= =?UTF-8?q?=E6=92=A4=E6=8E=89=E8=A1=8C=E4=B8=8B=E8=83=B6=E5=9B=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Sidebar.tsx | 47 ++++++++++++++++++++------------------ src/components/Tooltip.tsx | 15 ++++++++++++ src/styles.css | 13 +++++++---- 3 files changed, 48 insertions(+), 27 deletions(-) create mode 100644 src/components/Tooltip.tsx diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 889e3ec..8ef34f4 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,5 +1,6 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react' import { useDismiss } from '../hooks/useDismiss' +import Tooltip from './Tooltip' import { listDir, workspaceSearch, type DirEntry, type WorkspaceSearchFile } from '../services/platform' import { isPathInside, parentDirOf, pathsEqual } from '../utils/text' import type { OutlineItem } from '../utils/text' @@ -306,28 +307,30 @@ function WorkspaceSearch({ root, tauriMode, onOpen }: { onChange={(e) => setQuery(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') void run() }} /> - - -
- + + + + + +
{error &&
{error}
} {results && ( diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx new file mode 100644 index 0000000..f5d5a4f --- /dev/null +++ b/src/components/Tooltip.tsx @@ -0,0 +1,15 @@ +import type { ReactNode } from 'react' + +/** + * 自绘悬浮提示：跟随当前主题（界面变量），不用浏览器原生 title 气泡。 + * 纯 CSS 悬停/聚焦显示，带一点延迟避免划过时闪烁；气泡本身不拦截鼠标。 + * 子元素应自带 aria-label，气泡只作视觉呈现（aria-hidden）。 + */ +export default function Tooltip({ label, children }: { label: string; children: ReactNode }) { + return ( + + {children} + + + ) +} diff --git a/src/styles.css b/src/styles.css index d1be11c..656f2a5 100644 --- a/src/styles.css +++ b/src/styles.css @@ -337,15 +337,18 @@ kbd { background: var(--code-bg); border: 1px solid var(--border); border-radius .filetree-head.drop-target { background: var(--accent-weak); box-shadow: inset 0 0 0 1px var(--accent); border-radius: 6px; } .ws-search { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 0; } .ws-search-box { display: flex; gap: 6px; align-items: stretch; } -.ws-search-go { flex: none; width: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); border-radius: 6px; cursor: pointer; padding: 0; } +.ws-search-go { flex: none; width: 32px; height: 100%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); border-radius: 6px; cursor: pointer; padding: 0; } .ws-search-go:hover:not(:disabled) { color: var(--text); border-color: var(--accent); background: var(--hover); } .ws-search-go:disabled { opacity: 0.45; cursor: default; } .ws-spin { width: 13px; height: 13px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: ws-spin 0.7s linear infinite; } @keyframes ws-spin { to { transform: rotate(360deg); } } -.ws-search-opts { display: flex; gap: 6px; } -.chip-toggle { font-size: 12px; font-family: inherit; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; } -.chip-toggle:hover { color: var(--text); background: var(--hover); } -.chip-toggle.on { background: var(--accent-weak); color: var(--text); border-color: transparent; } +.ws-search-box .ws-search-aa { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 100%; padding: 0 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px; } +.ws-search-box .ws-search-aa:hover { color: var(--text); border-color: var(--accent); background: var(--hover); } +.ws-search-box .ws-search-aa.on { background: var(--accent-weak); color: var(--text); border-color: transparent; } +/* 自绘悬浮提示（Tooltip 组件）：跟随主题变量，悬停/聚焦延迟浮现 */ +.tooltip-wrap { position: relative; display: inline-flex; align-items: stretch; } +.tooltip-wrap .tooltip-bubble { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(2px); background: var(--bg-editor); color: var(--text); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); font-size: 12px; font-weight: 400; line-height: 1.4; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 80; } +.tooltip-wrap:hover .tooltip-bubble, .tooltip-wrap:focus-within .tooltip-bubble { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.35s; } /* 自绘下拉（Dropdown 组件）：按钮对齐 .input，展开层沿用应用菜单语言 */ .dropdown { position: relative; } .dropdown-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 6px; padding: 5px 9px; font-size: 13px; font-family: inherit; cursor: pointer; text-align: left; }