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(() => {
|
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(),
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user