feat: 搜索/替换面板中文化 + 复选框/关闭按钮样式优化

- 搜索/替换面板所有按钮和标签翻译为中文(查找、替换、下一个、上一个、全部、区分大小写、正则、全字匹配、全部替换、关闭)
- 复选框从16px增大到18px,优化与文字的水平对齐(inline-flex + align-items: center)
- 修复关闭按钮CSS选择器错误(.cm-close → [name="close"]),图标从16px增大到22px
This commit is contained in:
thzxx
2026-05-28 11:39:48 +08:00
parent ddbe814238
commit a897c47704
2 changed files with 74 additions and 25 deletions
@@ -23,7 +23,23 @@ export function useCodeMirror({ content, onChange, darkMode, onScroll }: UseCode
useEffect(() => { useEffect(() => {
if (!containerRef.current) return if (!containerRef.current) return
// 中文本地化(搜索/替换面板)
const zhPhrases = EditorState.phrases.of({
'Find': '查找',
'Replace': '替换',
'next': '下一个',
'previous': '上一个',
'all': '全部',
'match case': '区分大小写',
'regexp': '正则',
'by word': '全字匹配',
'replace': '替换',
'replace all': '全部替换',
'close': '关闭',
})
const extensions: Extension[] = [ const extensions: Extension[] = [
zhPhrases,
lineNumbers(), lineNumbers(),
highlightActiveLine(), highlightActiveLine(),
highlightSpecialChars(), highlightSpecialChars(),
+58 -25
View File
@@ -276,33 +276,59 @@ html, body {
color: var(--primary) !important; color: var(--primary) !important;
} }
/* 搜索选项按钮(正则、大小写、全字匹配) */ /* 搜索选项复选框(区分大小写、正则、全字匹配) */
.cm-panel .cm-toggle { .cm-search label {
background: transparent !important; display: inline-flex !important;
border: 1px solid var(--border) !important; align-items: center !important;
border-radius: 4px !important; gap: 5px !important;
color: var(--text-tertiary) !important; font-size: 13px !important;
font-size: 11px !important; font-family: var(--font-ui) !important;
font-weight: 600 !important; color: var(--text-secondary) !important;
font-family: var(--font-mono) !important;
padding: 4px 6px !important;
cursor: pointer !important; cursor: pointer !important;
user-select: none !important;
vertical-align: middle !important;
line-height: 1 !important;
margin: 0 6px 0 0 !important;
padding: 2px 0 !important;
}
.cm-search input[type="checkbox"] {
-webkit-appearance: none !important;
appearance: none !important;
width: 18px !important;
height: 18px !important;
border: 1.5px solid var(--border) !important;
border-radius: 4px !important;
background: var(--bg) !important;
cursor: pointer !important;
position: relative !important;
flex-shrink: 0 !important;
vertical-align: middle !important;
margin: 0 !important;
transition: all 0.15s ease !important; transition: all 0.15s ease !important;
height: 28px !important;
min-width: 28px !important;
} }
.cm-panel .cm-toggle:hover { .cm-search input[type="checkbox"]:hover {
background: var(--bg-tertiary) !important;
color: var(--text) !important;
}
.cm-panel .cm-toggle.cm-active {
background: var(--primary-light) !important;
color: var(--primary) !important;
border-color: var(--primary) !important; border-color: var(--primary) !important;
} }
.cm-search input[type="checkbox"]:checked {
background: var(--primary) !important;
border-color: var(--primary) !important;
}
.cm-search input[type="checkbox"]:checked::after {
content: '' !important;
position: absolute !important;
left: 5px !important;
top: 2px !important;
width: 6px !important;
height: 10px !important;
border: solid white !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) !important;
}
/* 搜索结果计数 */ /* 搜索结果计数 */
.cm-panel .cm-search-info { .cm-panel .cm-search-info {
color: var(--text-tertiary) !important; color: var(--text-tertiary) !important;
@@ -312,17 +338,24 @@ html, body {
white-space: nowrap !important; white-space: nowrap !important;
} }
/* 关闭按钮 */ /* 关闭按钮 — 注意:CodeMirror 关闭按钮用的是 name="close",没有 cm-close class */
.cm-panel .cm-close { .cm-panel [name="close"] {
position: absolute !important;
top: 4px !important;
right: 4px !important;
color: var(--text-tertiary) !important; color: var(--text-tertiary) !important;
font-size: 16px !important; font-size: 22px !important;
line-height: 1 !important;
cursor: pointer !important; cursor: pointer !important;
padding: 4px !important; padding: 4px 6px !important;
border-radius: 4px !important; border-radius: 4px !important;
border: none !important;
background: transparent !important;
transition: all 0.15s ease !important; transition: all 0.15s ease !important;
z-index: 1 !important;
} }
.cm-panel .cm-close:hover { .cm-panel [name="close"]:hover {
background: var(--bg-tertiary) !important; background: var(--bg-tertiary) !important;
color: var(--text) !important; color: var(--text) !important;
} }