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; }