xieyinlu/new-markdown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style(sidebar): 工作区搜索布局——实心搜索按钮改描边图标钮（搜索中转圈），原生复选框改胶囊开关

Browse Source
This commit is contained in:
Muse
2026-11-14 16:19:52 +08:00
parent 02090f7bf4
commit 71825201a2
2 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Sidebar.tsx
View File

@@ -244,14 +244,29 @@ function WorkspaceSearch({ root, tauriMode, onOpen }: {
onChange={(e) => setQuery(e.target.value)}
onKeyDown={(e) => { if (e.key === 'Enter') void run() }}
/>
<button className="primary" disabled={searching || !query.trim()} onClick={() => void run()}>
{searching ? '搜索中…' : '搜索'}
<button
className="ws-search-go"
disabled={searching || !query.trim()}
onClick={() => void run()}
title="搜索（Enter）"
aria-label="搜索"
>
{searching ? (
<span className="ws-spin" aria-hidden="true" />
) : (
<svg width="15" height="15" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" strokeWidth="1.8" /><path d="M20.5 20.5 16.7 16.7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>
)}
</button>
</div>
<div className="ws-search-opts">
<button
className={`chip-toggle${caseSensitive ? ' on' : ''}`}
aria-pressed={caseSensitive}
onClick={() => setCaseSensitive((v) => !v)}
>
区分大小写
</button>
</div>
<label className="ws-search-case">
<input type="checkbox" checked={caseSensitive} onChange={(e) => setCaseSensitive(e.target.checked)} />
区分大小写
</label>
{error && <div className="sidebar-empty">{error}</div>}
{results && (
<div className="ws-search-summary">{results.length === 0 ? '没有找到匹配。' : `${results.length} 个文件 · ${total} 处匹配`}</div>

12
src/styles.css
View File

@@ -333,7 +333,16 @@ kbd { background: var(--code-bg); border: 1px solid var(--border); border-radius
.modal-actions.left { align-items: stretch; }
.modal-actions.left button { text-align: left; }
.ws-search { display: flex; flex-direction: column; gap: 8px; padding: 10px; min-height: 0; }
.ws-search-box { display: flex; gap: 6px; }
.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: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; }
/* 自绘下拉（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; }
@@ -346,7 +355,6 @@ kbd { background: var(--code-bg); border: 1px solid var(--border); border-radius
.dropdown-menu button:hover, .dropdown-menu button:focus-visible { background: var(--hover); outline: none; }
.dropdown-menu button.selected { background: var(--accent-weak); }
.ws-search-box .input { flex: 1; min-width: 0; }
.ws-search-case { font-size: 12px; color: var(--text-dim); display: flex; gap: 5px; align-items: center; }
.ws-search-summary { font-size: 12px; color: var(--text-dim); }
.ws-search-results { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.ws-search-name { font-weight: 600; font-size: 12.5px; margin-bottom: 3px; }