feat: 搜索/替换面板中文化 + 复选框/关闭按钮样式优化
- 搜索/替换面板所有按钮和标签翻译为中文(查找、替换、下一个、上一个、全部、区分大小写、正则、全字匹配、全部替换、关闭) - 复选框从16px增大到18px,优化与文字的水平对齐(inline-flex + align-items: center) - 修复关闭按钮CSS选择器错误(.cm-close → [name="close"]),图标从16px增大到22px
This commit is contained in:
@@ -23,7 +23,23 @@ export function useCodeMirror({ content, onChange, darkMode, onScroll }: UseCode
|
||||
useEffect(() => {
|
||||
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[] = [
|
||||
zhPhrases,
|
||||
lineNumbers(),
|
||||
highlightActiveLine(),
|
||||
highlightSpecialChars(),
|
||||
|
||||
@@ -276,33 +276,59 @@ html, body {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* 搜索选项按钮(正则、大小写、全字匹配) */
|
||||
.cm-panel .cm-toggle {
|
||||
background: transparent !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 4px !important;
|
||||
color: var(--text-tertiary) !important;
|
||||
font-size: 11px !important;
|
||||
font-weight: 600 !important;
|
||||
font-family: var(--font-mono) !important;
|
||||
padding: 4px 6px !important;
|
||||
/* 搜索选项复选框(区分大小写、正则、全字匹配) */
|
||||
.cm-search label {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 5px !important;
|
||||
font-size: 13px !important;
|
||||
font-family: var(--font-ui) !important;
|
||||
color: var(--text-secondary) !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;
|
||||
height: 28px !important;
|
||||
min-width: 28px !important;
|
||||
}
|
||||
|
||||
.cm-panel .cm-toggle: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;
|
||||
.cm-search input[type="checkbox"]:hover {
|
||||
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 {
|
||||
color: var(--text-tertiary) !important;
|
||||
@@ -312,17 +338,24 @@ html, body {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* 关闭按钮 */
|
||||
.cm-panel .cm-close {
|
||||
/* 关闭按钮 — 注意:CodeMirror 关闭按钮用的是 name="close",没有 cm-close class */
|
||||
.cm-panel [name="close"] {
|
||||
position: absolute !important;
|
||||
top: 4px !important;
|
||||
right: 4px !important;
|
||||
color: var(--text-tertiary) !important;
|
||||
font-size: 16px !important;
|
||||
font-size: 22px !important;
|
||||
line-height: 1 !important;
|
||||
cursor: pointer !important;
|
||||
padding: 4px !important;
|
||||
padding: 4px 6px !important;
|
||||
border-radius: 4px !important;
|
||||
border: none !important;
|
||||
background: transparent !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;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user