ui: 统一图标系统/字体/文案/token,标题栏与状态栏重做,编辑器排版打磨,窗口边框设计

This commit is contained in:
hunter-dev
2026-08-30 22:17:11 +08:00
parent bd6243950c
commit ab46ec3cce
17 changed files with 242 additions and 123 deletions
+32 -12
View File
@@ -1,39 +1,55 @@
* { box-sizing: border-box; }
html, body, #root { margin: 0; height: 100%; }
/* 全局统一字体栈——消灭按钮/输入框回退到 Arial 的观感不一致(A档-1) */
body {
font-family: system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans CJK SC', sans-serif;
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
svg { display: block; }
/* 自定义滚动条——细+半透明+圆角 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--control-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
* { scrollbar-width: thin; scrollbar-color: var(--control-border) transparent; }
/* Tiptap 编辑器正文 */
/* Tiptap 编辑器正文(B档-7 排版打磨:CJK 阅读优化、标题层级、选区、引用/链接/表格) */
.tiptap-wrap .ProseMirror {
font-size: var(--editor-font-size, 14px) !important;
font-family: var(--editor-font-family, Consolas, monospace) !important;
font-family: var(--editor-font-family, 'Microsoft YaHei', 'Source Han Sans SC', system-ui, sans-serif) !important;
white-space: var(--editor-white-space, pre-wrap);
min-height: 100%;
/* 底部加大留白:长文档写到末尾时,光标行不会贴着编辑区底缘(配合光标跟随滚动) */
padding: 16px 24px 140px;
font-family: 'Consolas', 'Source Code Pro', system-ui, sans-serif;
font-size: 14px;
line-height: 1.7;
line-height: 1.8;
color: var(--text-primary);
outline: none;
max-width: 860px;
margin: 0 auto;
caret-color: var(--accent);
}
.tiptap-wrap .ProseMirror p { margin: 0.6em 0; }
.tiptap-wrap .ProseMirror h1 { font-size: 1.8em; margin: 0.8em 0 0.4em; }
.tiptap-wrap .ProseMirror h2 { font-size: 1.5em; margin: 0.7em 0 0.35em; }
.tiptap-wrap .ProseMirror h3 { font-size: 1.25em; margin: 0.6em 0 0.3em; }
.tiptap-wrap .ProseMirror h1 { font-size: 1.8em; margin: 1em 0 0.5em; font-weight: 700; color: var(--text-primary); padding-bottom: 0.25em; border-bottom: 1px solid var(--control-border); }
.tiptap-wrap .ProseMirror h2 { font-size: 1.5em; margin: 0.9em 0 0.45em; font-weight: 600; color: var(--text-primary); }
.tiptap-wrap .ProseMirror h3 { font-size: 1.25em; margin: 0.8em 0 0.4em; font-weight: 600; color: var(--text-primary); }
.tiptap-wrap .ProseMirror h4, .tiptap-wrap .ProseMirror h5, .tiptap-wrap .ProseMirror h6 { margin: 0.7em 0 0.35em; font-weight: 600; }
.tiptap-wrap .ProseMirror code {
background: var(--bg-secondary); padding: 1px 5px; border-radius: 3px; font-family: 'Consolas', monospace;
background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text);
padding: 1px 5px; border-radius: 4px; font-family: 'Consolas', 'Source Code Pro', monospace;
}
.tiptap-wrap .ProseMirror pre {
background: var(--bg-secondary); padding: 12px 16px; border-radius: 6px; overflow: auto;
background: var(--bg-secondary); padding: 12px 16px; border-radius: var(--radius-md); overflow: auto;
border: 1px solid var(--control-border);
}
.tiptap-wrap .ProseMirror pre code { background: none; padding: 0; }
.tiptap-wrap .ProseMirror pre code { background: none; padding: 0; color: inherit; }
.tiptap-wrap .ProseMirror a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.tiptap-wrap .ProseMirror ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
/* B档-7:光标所在行高亮(TiptapEditor 动态加类) */
.tiptap-wrap .ProseMirror .is-active-line { background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 4px; }
.tiptap-wrap .ProseMirror table th { background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; }
/* highlight.js 暗色主题(CodeBlockLowlight 装饰 span,FR-E5) */
.tiptap-wrap .ProseMirror .hljs { color: #abb2bf; }
.tiptap-wrap .ProseMirror .hljs-comment, .tiptap-wrap .ProseMirror .hljs-quote { color: #5c6370; font-style: italic; }
@@ -84,7 +100,8 @@ html, body, #root { margin: 0; height: 100%; }
border-left: 2px solid var(--accent) !important;
}
.tiptap-wrap .ProseMirror blockquote {
border-left: 3px solid var(--control-border); padding-left: 12px; color: var(--text-secondary); margin: 0.6em 0;
border-left: 3px solid var(--accent); padding: 4px 16px; color: var(--text-secondary); margin: 0.6em 0;
background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tiptap-wrap .ProseMirror ul, .tiptap-wrap .ProseMirror ol { padding-left: 24px; }
.tiptap-wrap .ProseMirror table { border-collapse: collapse; }
@@ -113,6 +130,9 @@ html, body, #root { margin: 0; height: 100%; }
/* FR-A12:统一过渡动效 */
button { transition: background 0.15s, color 0.15s, opacity 0.15s; }
button:hover { opacity: 0.85; }
/* B档-5:标题栏控制按钮 hover 背景 */
.titlebar-controls button:hover { opacity: 1; background: var(--control-border); }
.titlebar-controls button:last-child:hover { background: #e81123; color: #fff; }
@keyframes panel-slide-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }