@@ -45,7 +45,7 @@ const SOURCE_TYPE_ICONS = {
4545 ) ,
4646}
4747
48- // 分类颜色映射
48+ // 分类颜色映射 (语义色: 节点身份色板 / 不随主题切换 / 概念=accent)
4949const CATEGORY_COLORS = {
5050 '概念' : '#c8a882' ,
5151 '技术' : '#7c9eb2' ,
@@ -88,7 +88,7 @@ const HANDLE_STYLE = {
8888 height : 10 ,
8989 border : '2px solid white' ,
9090 borderRadius : '50%' ,
91- backgroundColor : '#c8a882 ' ,
91+ backgroundColor : 'var(--accent) ' ,
9292 opacity : 1 ,
9393}
9494
@@ -100,7 +100,7 @@ function ConceptNode({ id, data, selected }) {
100100
101101 const sizeStyle = SIZE_SCALES [ data . size ] || SIZE_SCALES . medium
102102 const isMarked = data . marked
103- const markColor = data . markColor || '#c8a882 '
103+ const markColor = data . markColor || 'var(--accent) '
104104 const categoryColor = CATEGORY_COLORS [ data . category ] || '#c8a882'
105105 const sourceIcon = SOURCE_TYPE_ICONS [ data . sourceType ] || SOURCE_TYPE_ICONS . manual
106106
@@ -164,9 +164,9 @@ function ConceptNode({ id, data, selected }) {
164164 ${ isExpanded ? 'min-w-[320px] max-w-[400px]' : `${ sizeStyle . minW } ${ sizeStyle . maxW } }
165165 ` }
166166 style = { {
167- backgroundColor : '#fafafa ' ,
168- borderColor : selected ? '#c8a882 ' : '#e8e8e8 ' ,
169- ringColor : selected ? '#c8a882 ' : undefined ,
167+ backgroundColor : 'var(--surface) ' ,
168+ borderColor : selected ? 'var(--accent) ' : 'var(--border-subtle) ' ,
169+ ringColor : selected ? 'var(--accent) ' : undefined ,
170170 boxShadow : isMarked
171171 ? `0 0 0 3px ${ markColor } ${ markColor }
172172 : selected
@@ -197,9 +197,9 @@ function ConceptNode({ id, data, selected }) {
197197 onClick = { handleTogglePin }
198198 className = "absolute -top-3 right-2 w-5 h-5 flex items-center justify-center rounded-full shadow-sm transition-all z-10"
199199 style = { {
200- backgroundColor : isPinned ? '#c8a882 ' : '#fafafa ' ,
201- color : isPinned ? '#fafafa ' : '#888 ' ,
202- border : isPinned ? 'none' : '1px solid #e8e8e8 ' ,
200+ backgroundColor : isPinned ? 'var(--accent) ' : 'var(--surface) ' ,
201+ color : isPinned ? 'var(--surface) ' : 'var(--text-faint) ' ,
202+ border : isPinned ? 'none' : '1px solid var(--border-subtle) ' ,
203203 } }
204204 title = { isPinned ? '取消钉住' : '钉住展开' }
205205 >
@@ -215,7 +215,7 @@ function ConceptNode({ id, data, selected }) {
215215 className = "absolute -top-2.5 right-6 px-2 py-0.5 rounded text-[10px] font-medium tracking-wider"
216216 style = { {
217217 backgroundColor : categoryColor ,
218- color : '#fafafa ' ,
218+ color : 'var(--surface) ' ,
219219 fontFamily : '"Noto Sans SC", system-ui, sans-serif' ,
220220 letterSpacing : '0.15em' ,
221221 } }
@@ -228,7 +228,7 @@ function ConceptNode({ id, data, selected }) {
228228 < div
229229 className = "absolute top-0 left-0 right-0 h-[2px] rounded-t-lg transition-all duration-500"
230230 style = { {
231- backgroundColor : '#c8a882 ' ,
231+ backgroundColor : 'var(--accent) ' ,
232232 opacity : selected || isHovered ? 1 : 0.4 ,
233233 transform : selected || isHovered ? 'scaleX(1)' : 'scaleX(0.3)' ,
234234 transformOrigin : 'left' ,
@@ -245,7 +245,7 @@ function ConceptNode({ id, data, selected }) {
245245 < h3
246246 className = { `${ sizeStyle . titleSize } }
247247 style = { {
248- color : '#1a1a1a ' ,
248+ color : 'var(--text-primary) ' ,
249249 fontFamily : '"Noto Serif SC", Georgia, serif' ,
250250 letterSpacing : '0.02em' ,
251251 } }
@@ -259,7 +259,7 @@ function ConceptNode({ id, data, selected }) {
259259 } `} >
260260 < p
261261 className = { `${ sizeStyle . textSize } }
262- style = { { color : '#555 ' , fontFamily : '"Noto Sans SC", system-ui, sans-serif' } }
262+ style = { { color : 'var(--text-muted) ' , fontFamily : '"Noto Sans SC", system-ui, sans-serif' } }
263263 >
264264 { getShortDescription ( ) }
265265 </ p >
@@ -272,7 +272,7 @@ function ConceptNode({ id, data, selected }) {
272272 < div
273273 className = "text-xs mt-2 whitespace-pre-wrap leading-relaxed max-h-[380px] overflow-y-auto"
274274 style = { {
275- color : '#2d2d2d ' ,
275+ color : 'var(--text-secondary) ' ,
276276 fontFamily : '"Noto Sans SC", system-ui, sans-serif' ,
277277 } }
278278 >
@@ -288,17 +288,17 @@ function ConceptNode({ id, data, selected }) {
288288 key = { i }
289289 className = "text-[10px] px-1.5 py-0.5 rounded"
290290 style = { {
291- backgroundColor : '#f5f0eb ' ,
292- color : '#c8a882 ' ,
293- border : '1px solid #e8d5c0 ' ,
291+ backgroundColor : 'var(--accent-bg) ' ,
292+ color : 'var(--accent) ' ,
293+ border : '1px solid var(--accent-soft) ' ,
294294 fontFamily : '"Noto Sans SC", system-ui, sans-serif' ,
295295 } }
296296 >
297297 { safeString ( tag ) }
298298 </ span >
299299 ) ) }
300300 { data . tags . length > 3 && (
301- < span className = "text-[10px]" style = { { color : '#bbb ' } } >
301+ < span className = "text-[10px]" style = { { color : 'var(--text-faint) ' } } >
302302 +{ data . tags . length - 3 }
303303 </ span >
304304 ) }
@@ -313,9 +313,9 @@ function ConceptNode({ id, data, selected }) {
313313 key = { i }
314314 className = "text-[10px] px-1.5 py-0.5 rounded"
315315 style = { {
316- backgroundColor : '#f5f0eb ' ,
317- color : '#c8a882 ' ,
318- border : '1px solid #e8d5c0 ' ,
316+ backgroundColor : 'var(--accent-bg) ' ,
317+ color : 'var(--accent) ' ,
318+ border : '1px solid var(--accent-soft) ' ,
319319 fontFamily : '"Noto Sans SC", system-ui, sans-serif' ,
320320 } }
321321 >
@@ -331,13 +331,13 @@ function ConceptNode({ id, data, selected }) {
331331 < div
332332 className = "px-3 py-1.5 flex items-center gap-1.5"
333333 style = { {
334- borderTop : '1px solid #e8e8e8 ' ,
334+ borderTop : '1px solid var(--border-subtle) ' ,
335335 } }
336336 >
337- < span style = { { color : '#bbb ' } } > { sourceIcon } </ span >
337+ < span style = { { color : 'var(--text-faint) ' } } > { sourceIcon } </ span >
338338 < span
339339 className = "text-[10px] truncate max-w-[120px]"
340- style = { { color : '#888 ' , fontFamily : '"Noto Sans SC", system-ui, sans-serif' } }
340+ style = { { color : 'var(--text-muted) ' , fontFamily : '"Noto Sans SC", system-ui, sans-serif' } }
341341 >
342342 { safeString ( data . source ) }
343343 </ span >
@@ -347,7 +347,7 @@ function ConceptNode({ id, data, selected }) {
347347 { /* 悬停展开提示 */ }
348348 { hasRichContent && ! isExpanded && (
349349 < div className = "absolute bottom-1 left-1/2 -translate-x-1/2" >
350- < div className = "flex items-center gap-1 text-[10px] opacity-40 hover:opacity-80 transition-opacity" style = { { color : '#888 ' } } >
350+ < div className = "flex items-center gap-1 text-[10px] opacity-40 hover:opacity-80 transition-opacity" style = { { color : 'var(--text-muted) ' } } >
351351 < svg className = "w-3 h-3 animate-bounce" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
352352 < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } d = "M19 9l-7 7-7-7" />
353353 </ svg >
0 commit comments