增加了dark模式
parent
4a99b10578
commit
836373fa27
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
|
|
@ -7,10 +7,11 @@
|
|||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
padding: 16px;
|
||||
background: #ffffff;
|
||||
background: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
width: 100%;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.list-action-bar-left,
|
||||
|
|
@ -41,31 +42,31 @@
|
|||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 16px;
|
||||
background: #e6f4ff;
|
||||
border: 1px solid #91caff;
|
||||
background: var(--bg-color-secondary);
|
||||
border: 1px solid var(--link-color);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.selection-count {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.selection-count strong {
|
||||
color: #1677ff;
|
||||
color: var(--link-color);
|
||||
font-weight: 600;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.all-pages-tag {
|
||||
color: #1677ff;
|
||||
color: var(--link-color);
|
||||
font-weight: 500;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.select-all-link,
|
||||
.clear-selection-link {
|
||||
color: #1677ff;
|
||||
color: var(--link-color);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
/* 列表表格容器 */
|
||||
.list-table-container {
|
||||
background: #ffffff;
|
||||
background: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
height: 626px;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* 行选中样式 */
|
||||
.list-table-container .row-selected {
|
||||
background-color: #e6f7ff;
|
||||
background-color: var(--item-hover-bg);
|
||||
}
|
||||
|
||||
.list-table-container .row-selected:hover > td {
|
||||
background-color: #bae7ff !important;
|
||||
background-color: var(--item-hover-bg) !important;
|
||||
}
|
||||
|
||||
/* 分页器中的选择信息样式 */
|
||||
|
|
@ -26,17 +27,17 @@
|
|||
}
|
||||
|
||||
.selection-count {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.count-highlight {
|
||||
color: #1677ff;
|
||||
color: var(--link-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.selection-action {
|
||||
color: #1677ff;
|
||||
color: var(--link-color);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
|
@ -45,5 +46,6 @@
|
|||
}
|
||||
|
||||
.selection-action:hover {
|
||||
color: #4096ff;
|
||||
color: var(--link-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ function AppSider({ collapsed, onToggle }) {
|
|||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingLeft: 8 }}>
|
||||
<img src="/favicon.svg" alt="logo" style={{ width: 32, height: 32 }} />
|
||||
{!collapsed && (
|
||||
<span style={{ fontSize: 18, fontWeight: 'bold', color: '#111' }}>NexDocus</span>
|
||||
<span style={{ fontSize: 18, fontWeight: 'bold', color: 'var(--text-color)' }}>NexDocus</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #f5f5f5;
|
||||
background: var(--bg-color-secondary);
|
||||
}
|
||||
|
||||
.pdf-toolbar {
|
||||
|
|
@ -10,10 +10,11 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
background: var(--card-bg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
z-index: 10;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.pdf-content {
|
||||
|
|
@ -23,7 +24,7 @@
|
|||
}
|
||||
|
||||
.pdf-virtual-list {
|
||||
background: #f5f5f5;
|
||||
background: var(--bg-color-secondary);
|
||||
}
|
||||
|
||||
.pdf-page-wrapper {
|
||||
|
|
@ -31,7 +32,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
background: var(--bg-color-secondary);
|
||||
}
|
||||
|
||||
.pdf-page-wrapper canvas {
|
||||
|
|
@ -43,7 +44,7 @@
|
|||
.pdf-page-number {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
color: #000;
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -55,7 +56,7 @@
|
|||
justify-content: center;
|
||||
min-height: 600px;
|
||||
gap: 8px;
|
||||
color: #666;
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -64,9 +65,9 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 600px;
|
||||
background: #fafafa;
|
||||
border: 1px dashed #d9d9d9;
|
||||
color: #999;
|
||||
background: var(--item-hover-bg);
|
||||
border: 1px dashed var(--border-color);
|
||||
color: var(--text-color-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -83,8 +84,8 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400px;
|
||||
background: white;
|
||||
border: 1px solid #f0f0f0;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
|
@ -101,6 +102,7 @@
|
|||
align-items: center;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.pdf-error {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,15 @@
|
|||
--sider-bg: #fff;
|
||||
--item-hover-bg: #f5f5f5;
|
||||
--card-bg: #fff;
|
||||
|
||||
/* Markdown & Editor Specific */
|
||||
--code-bg: #f6f8fa;
|
||||
--table-border-color: #dfe2e5;
|
||||
--table-header-bg: #f6f8fa;
|
||||
--blockquote-border-color: #dfe2e5;
|
||||
--blockquote-text-color: #6a737d;
|
||||
--toolbar-bg: #fafafa;
|
||||
--link-color: #1677ff;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
|
|
@ -20,6 +29,15 @@ body.dark {
|
|||
--sider-bg: #141414;
|
||||
--item-hover-bg: #1f1f1f;
|
||||
--card-bg: #1f1f1f;
|
||||
|
||||
/* Markdown & Editor Specific Dark */
|
||||
--code-bg: #2d2d2d;
|
||||
--table-border-color: #303030;
|
||||
--table-header-bg: #1f1f1f;
|
||||
--blockquote-border-color: #303030;
|
||||
--blockquote-text-color: #8b949e;
|
||||
--toolbar-bg: #1f1f1f;
|
||||
--link-color: #177ddc;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -34,3 +52,66 @@ body {
|
|||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Dark mode overrides for highlight.js */
|
||||
body.dark .hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
color: #c9d1d9;
|
||||
background: var(--code-bg) !important;
|
||||
}
|
||||
|
||||
body.dark .hljs-comment,
|
||||
body.dark .hljs-quote {
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
body.dark .hljs-keyword,
|
||||
body.dark .hljs-selector-tag {
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
body.dark .hljs-literal,
|
||||
body.dark .hljs-number,
|
||||
body.dark .hljs-variable,
|
||||
body.dark .hljs-template-variable,
|
||||
body.dark .hljs-tag .hljs-attr {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
body.dark .hljs-string,
|
||||
body.dark .hljs-doctag {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
body.dark .hljs-title,
|
||||
body.dark .hljs-section,
|
||||
body.dark .hljs-selector-id {
|
||||
color: #d2a8ff;
|
||||
}
|
||||
|
||||
body.dark .hljs-title.class_,
|
||||
body.dark .hljs-class .hljs-title {
|
||||
color: #f0883e;
|
||||
}
|
||||
|
||||
body.dark .hljs-type,
|
||||
body.dark .hljs-built_in,
|
||||
body.dark .hljs-builtin-name,
|
||||
body.dark .hljs-symbol,
|
||||
body.dark .hljs-selector-class,
|
||||
body.dark .hljs-selector-attr,
|
||||
body.dark .hljs-selector-pseudo {
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
body.dark .hljs-addition {
|
||||
color: #aff5b4;
|
||||
background-color: #033a16;
|
||||
}
|
||||
|
||||
body.dark .hljs-deletion {
|
||||
color: #ffdcd7;
|
||||
background-color: #67060c;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
height: calc(100vh - 64px);
|
||||
/* width: calc(100% + 32px); */
|
||||
display: flex;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
.document-editor-container {
|
||||
|
|
@ -12,28 +13,29 @@
|
|||
}
|
||||
|
||||
.document-sider {
|
||||
border-right: 1px solid #f0f0f0;
|
||||
border-right: 1px solid var(--border-color);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background: var(--sider-bg);
|
||||
}
|
||||
|
||||
.sider-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
background: #fff;
|
||||
background: var(--header-bg);
|
||||
}
|
||||
|
||||
.sider-header h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
color: var(--text-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
|
@ -74,19 +76,21 @@
|
|||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.sider-actions .ant-btn:not(.mode-toggle-btn):hover {
|
||||
background: #fff;
|
||||
border-color: #d9d9d9;
|
||||
color: #1677ff;
|
||||
background: var(--item-hover-bg);
|
||||
border-color: var(--border-color);
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.file-tree {
|
||||
padding: 8px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: var(--sider-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 修复Tree组件文档名过长的显示问题 */
|
||||
|
|
@ -136,16 +140,17 @@
|
|||
margin: -4px -8px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 选中的文件夹样式 */
|
||||
.file-tree .folder-selected>.ant-menu-submenu-title {
|
||||
background-color: #e6f7ff !important;
|
||||
color: #1890ff !important;
|
||||
background-color: var(--item-hover-bg) !important;
|
||||
color: var(--link-color) !important;
|
||||
}
|
||||
|
||||
.file-tree .folder-selected>.ant-menu-submenu-title:hover {
|
||||
background-color: #bae7ff !important;
|
||||
background-color: var(--item-hover-bg) !important;
|
||||
}
|
||||
|
||||
.file-tree .ant-menu-item,
|
||||
|
|
@ -159,7 +164,7 @@
|
|||
.document-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: white;
|
||||
background: var(--bg-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
|
@ -177,11 +182,11 @@
|
|||
|
||||
.content-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: white;
|
||||
background: var(--header-bg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
|
@ -223,7 +228,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
/* ByteMD 编辑器样式覆盖 */
|
||||
|
|
@ -232,21 +237,31 @@
|
|||
height: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
border: 1px solid #d9d9d9;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
max-width: none !important;
|
||||
/* Ensure no max-width constraint */
|
||||
box-sizing: border-box;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 工具栏样式 */
|
||||
.bytemd-toolbar {
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
background-color: #fafafa;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background-color: var(--toolbar-bg);
|
||||
box-sizing: border-box;
|
||||
/* Added for consistent box model */
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.bytemd-toolbar-icon {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.bytemd-toolbar-icon:hover {
|
||||
background-color: var(--item-hover-bg);
|
||||
}
|
||||
|
||||
/* 编辑和预览区域容器 */
|
||||
|
|
@ -260,6 +275,7 @@
|
|||
/* Added for consistent box model */
|
||||
min-width: 0;
|
||||
/* Prevent flex item from overflowing */
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
/* 编辑区域 - 固定50%宽度 */
|
||||
|
|
@ -275,6 +291,8 @@
|
|||
/* Added for consistent box model */
|
||||
min-width: 0;
|
||||
/* Prevent flex item from overflowing */
|
||||
background-color: var(--bg-color);
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* 预览区域 - 固定50%宽度 */
|
||||
|
|
@ -291,6 +309,8 @@
|
|||
/* Added for consistent box model */
|
||||
min-width: 0;
|
||||
/* Prevent flex item from overflowing */
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* CodeMirror 容器 */
|
||||
|
|
@ -301,6 +321,8 @@
|
|||
line-height: 1.8;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* CodeMirror 滚动容器 */
|
||||
|
|
@ -322,30 +344,33 @@
|
|||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.bytemd-preview h1 {
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.bytemd-preview h2 {
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.bytemd-preview p {
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.bytemd-preview code {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(27, 31, 35, 0.05);
|
||||
background-color: var(--code-bg);
|
||||
border-radius: 3px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.bytemd-preview pre {
|
||||
|
|
@ -353,7 +378,7 @@
|
|||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f6f8fa;
|
||||
background-color: var(--code-bg);
|
||||
border-radius: 3px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
@ -366,6 +391,7 @@
|
|||
line-height: inherit;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.bytemd-preview img {
|
||||
|
|
@ -382,25 +408,27 @@
|
|||
.bytemd-preview table th,
|
||||
.bytemd-preview table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #dfe2e5;
|
||||
border: 1px solid var(--table-border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.bytemd-preview table th {
|
||||
font-weight: 600;
|
||||
background-color: #f6f8fa;
|
||||
background-color: var(--table-header-bg);
|
||||
}
|
||||
|
||||
.bytemd-preview blockquote {
|
||||
margin: 0 0 16px;
|
||||
padding: 0 1em;
|
||||
color: #6a737d;
|
||||
border-left: 0.25em solid #dfe2e5;
|
||||
color: var(--blockquote-text-color);
|
||||
border-left: 0.25em solid var(--blockquote-border-color);
|
||||
}
|
||||
|
||||
.bytemd-preview ul,
|
||||
.bytemd-preview ol {
|
||||
padding-left: 2em;
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.bytemd-preview li {
|
||||
|
|
@ -416,4 +444,5 @@
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 600px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
|
@ -1,35 +1,37 @@
|
|||
.project-docs-page {
|
||||
height: calc(100vh - 64px);
|
||||
overflow: hidden;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
.docs-layout {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
.docs-sider {
|
||||
border-right: 1px solid #f0f0f0;
|
||||
border-right: 1px solid var(--border-color);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--sider-bg);
|
||||
}
|
||||
|
||||
.docs-sider-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
background: #fff;
|
||||
background: var(--header-bg);
|
||||
}
|
||||
|
||||
.docs-sider-header h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
color: var(--text-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
|
@ -48,6 +50,7 @@
|
|||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
padding: 4px 15px !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.mode-toggle-btn:hover {
|
||||
|
|
@ -62,18 +65,21 @@
|
|||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.docs-sider-actions .ant-btn-text:hover {
|
||||
background: #e6f4ff;
|
||||
border-color: #91caff;
|
||||
color: #1677ff;
|
||||
background: var(--item-hover-bg);
|
||||
border-color: var(--border-color);
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.docs-menu {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
border-right: none;
|
||||
background: var(--sider-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 修复文档名过长的显示问题 */
|
||||
|
|
@ -91,12 +97,12 @@
|
|||
.docs-content-layout {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
.docs-toc-sider {
|
||||
border-left: 1px solid #f0f0f0;
|
||||
background: #fafafa !important;
|
||||
border-left: 1px solid var(--border-color);
|
||||
background: var(--bg-color-secondary) !important;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
|
@ -105,18 +111,18 @@
|
|||
|
||||
.toc-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
background: var(--header-bg);
|
||||
}
|
||||
|
||||
.toc-header h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.toc-content {
|
||||
|
|
@ -138,18 +144,18 @@
|
|||
|
||||
.toc-content .ant-anchor-link-title {
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
color: var(--text-color-secondary);
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toc-content .ant-anchor-link-active>.ant-anchor-link-title {
|
||||
color: #1890ff;
|
||||
color: var(--link-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toc-empty {
|
||||
color: #999;
|
||||
color: var(--text-color-secondary);
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
font-size: 13px;
|
||||
|
|
@ -167,7 +173,7 @@
|
|||
.docs-content {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
.docs-content-wrapper {
|
||||
|
|
@ -196,7 +202,8 @@
|
|||
.markdown-body {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
color: var(--text-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
|
|
@ -205,7 +212,8 @@
|
|||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
|
|
@ -214,30 +222,38 @@
|
|||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
font-size: 20px;
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
font-weight: 600;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body h3 { font-size: 20px; }
|
||||
|
||||
.markdown-body p {
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body code {
|
||||
background-color: #f6f8fa;
|
||||
background-color: var(--code-bg);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
background-color: #f6f8fa;
|
||||
background-color: var(--code-bg);
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
|
|
@ -247,12 +263,13 @@
|
|||
.markdown-body pre code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
padding: 0 16px;
|
||||
border-left: 4px solid #dfe2e5;
|
||||
color: #6a737d;
|
||||
border-left: 4px solid var(--blockquote-border-color);
|
||||
color: var(--blockquote-text-color);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
|
|
@ -260,16 +277,19 @@
|
|||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.markdown-body th,
|
||||
.markdown-body td {
|
||||
border: 1px solid #dfe2e5;
|
||||
border: 1px solid var(--table-border-color);
|
||||
padding: 8px 13px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body th {
|
||||
background-color: #f6f8fa;
|
||||
background-color: var(--table-header-bg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -279,7 +299,7 @@
|
|||
}
|
||||
|
||||
.markdown-body a {
|
||||
color: #1677ff;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -291,6 +311,7 @@
|
|||
.markdown-body ol {
|
||||
margin-bottom: 16px;
|
||||
padding-left: 2em;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body li {
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ function NotificationList() {
|
|||
}
|
||||
/>
|
||||
|
||||
<Content style={{ padding: '24px', background: '#fff', margin: '24px', borderRadius: '8px' }}>
|
||||
<Content style={{ padding: '24px', background: 'var(--card-bg)', margin: '24px', borderRadius: '8px', border: '1px solid var(--border-color)' }}>
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
onChange={(key) => { setActiveTab(key); setPage(1); }}
|
||||
|
|
@ -110,7 +110,7 @@ function NotificationList() {
|
|||
label: (
|
||||
<Space>
|
||||
全部消息
|
||||
{activeTab === 'all' && <Badge count={total} overflowCount={99} style={{ backgroundColor: '#d9d9d9' }} />}
|
||||
{activeTab === 'all' && <Badge count={total} overflowCount={99} style={{ backgroundColor: 'var(--text-color-secondary)' }} />}
|
||||
</Space>
|
||||
)
|
||||
},
|
||||
|
|
@ -138,24 +138,27 @@ function NotificationList() {
|
|||
style={{
|
||||
cursor: 'pointer',
|
||||
padding: '16px',
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
background: !item.is_read ? '#f0faff' : 'transparent',
|
||||
borderBottom: '1px solid var(--border-color)',
|
||||
background: !item.is_read ? 'var(--item-hover-bg)' : 'transparent',
|
||||
transition: 'all 0.3s'
|
||||
}}
|
||||
onClick={() => handleNotificationClick(item)}
|
||||
>
|
||||
<div style={{ display: 'flex', gap: '16px' }}>
|
||||
<Avatar icon={getCategoryIcon(item.category)} />
|
||||
<Avatar
|
||||
icon={getCategoryIcon(item.category)}
|
||||
style={{ background: 'var(--bg-color-secondary)' }}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
|
||||
<Text strong={!item.is_read} style={{ fontSize: '16px' }}>
|
||||
<Text strong={!item.is_read} style={{ fontSize: '16px', color: 'var(--text-color)' }}>
|
||||
{item.title}
|
||||
</Text>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
||||
<Text type="secondary" style={{ fontSize: '12px', color: 'var(--text-color-secondary)' }}>
|
||||
{new Date(item.created_at).toLocaleString('zh-CN')}
|
||||
</Text>
|
||||
</div>
|
||||
<div style={{ color: '#595959', marginBottom: '8px' }}>
|
||||
<div style={{ color: 'var(--text-color)', opacity: 0.85, marginBottom: '8px' }}>
|
||||
{item.content}
|
||||
</div>
|
||||
{!item.is_read && <Tag color="blue">未读</Tag>}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,39 @@
|
|||
.preview-page {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
.preview-layout {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
.preview-sider {
|
||||
border-right: 1px solid #f0f0f0;
|
||||
border-right: 1px solid var(--border-color);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--sider-bg);
|
||||
}
|
||||
|
||||
.preview-sider-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.preview-sider-header h2 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.preview-project-desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
color: var(--text-color-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
|
@ -40,6 +41,8 @@
|
|||
flex: 1;
|
||||
overflow-y: auto;
|
||||
border-right: none;
|
||||
background: var(--sider-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* 修复文档名过长的显示问题 */
|
||||
|
|
@ -57,12 +60,12 @@
|
|||
.preview-content-layout {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
.preview-toc-sider {
|
||||
border-left: 1px solid #f0f0f0;
|
||||
background: #fafafa !important;
|
||||
border-left: 1px solid var(--border-color);
|
||||
background: var(--bg-color-secondary) !important;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
|
@ -71,18 +74,18 @@
|
|||
|
||||
.toc-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
background: var(--header-bg);
|
||||
}
|
||||
|
||||
.toc-header h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.toc-content {
|
||||
|
|
@ -102,18 +105,18 @@
|
|||
|
||||
.toc-content .ant-anchor-link-title {
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
color: var(--text-color-secondary);
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toc-content .ant-anchor-link-active > .ant-anchor-link-title {
|
||||
color: #1890ff;
|
||||
color: var(--link-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toc-empty {
|
||||
color: #999;
|
||||
color: var(--text-color-secondary);
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
font-size: 13px;
|
||||
|
|
@ -131,7 +134,7 @@
|
|||
.preview-content {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
.preview-content-wrapper {
|
||||
|
|
@ -160,7 +163,8 @@
|
|||
.markdown-body {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
color: var(--text-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
|
|
@ -169,7 +173,8 @@
|
|||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
|
|
@ -178,30 +183,38 @@
|
|||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
font-size: 20px;
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
font-weight: 600;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body h3 { font-size: 20px; }
|
||||
|
||||
.markdown-body p {
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body code {
|
||||
background-color: #f6f8fa;
|
||||
background-color: var(--code-bg);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
font-size: 14px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
background-color: #f6f8fa;
|
||||
background-color: var(--code-bg);
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
|
|
@ -211,12 +224,13 @@
|
|||
.markdown-body pre code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
padding: 0 16px;
|
||||
border-left: 4px solid #dfe2e5;
|
||||
color: #6a737d;
|
||||
border-left: 4px solid var(--blockquote-border-color);
|
||||
color: var(--blockquote-text-color);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
|
|
@ -230,12 +244,13 @@
|
|||
|
||||
.markdown-body th,
|
||||
.markdown-body td {
|
||||
border: 1px solid #dfe2e5;
|
||||
border: 1px solid var(--table-border-color);
|
||||
padding: 8px 13px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body th {
|
||||
background-color: #f6f8fa;
|
||||
background-color: var(--table-header-bg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -245,7 +260,7 @@
|
|||
}
|
||||
|
||||
.markdown-body a {
|
||||
color: #1677ff;
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -257,6 +272,7 @@
|
|||
.markdown-body ol {
|
||||
margin-bottom: 16px;
|
||||
padding-left: 2em;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.markdown-body li {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.project-card {
|
||||
|
|
@ -21,6 +22,8 @@
|
|||
transition: all 0.3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
|
|
@ -53,11 +56,12 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.project-description {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
color: var(--text-color-secondary);
|
||||
margin-bottom: 12px;
|
||||
min-height: 40px;
|
||||
overflow: hidden;
|
||||
|
|
@ -69,5 +73,5 @@
|
|||
|
||||
.project-meta {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ function Permissions() {
|
|||
return (
|
||||
|
||||
<div style={{ padding: '24px' }}>
|
||||
<h1 style={{ marginBottom: '24px', fontSize: '24px', fontWeight: 600 }}>
|
||||
<h1 style={{ marginBottom: '24px', fontSize: '24px', fontWeight: 600, color: 'var(--text-color)' }}>
|
||||
<SafetyOutlined style={{ marginRight: '8px' }} />
|
||||
角色权限管理
|
||||
</h1>
|
||||
|
|
@ -177,7 +177,7 @@ function Permissions() {
|
|||
}
|
||||
>
|
||||
{selectedRole ? (
|
||||
<div style={{ marginBottom: 16, padding: '12px', background: '#f0f2f5', borderRadius: 4 }}>
|
||||
<div style={{ marginBottom: 16, padding: '12px', background: 'var(--bg-color-secondary)', borderRadius: 4 }}>
|
||||
<Space>
|
||||
<span style={{ fontWeight: 500 }}>当前角色：</span>
|
||||
<Tag color="blue">{selectedRole.role_name}</Tag>
|
||||
|
|
@ -189,9 +189,10 @@ function Permissions() {
|
|||
style={{
|
||||
marginBottom: 16,
|
||||
padding: '12px',
|
||||
background: '#fff7e6',
|
||||
background: 'var(--bg-color-secondary)',
|
||||
borderRadius: 4,
|
||||
color: '#ad6800',
|
||||
color: 'var(--text-color-secondary)',
|
||||
border: '1px solid var(--border-color)',
|
||||
}}
|
||||
>
|
||||
请从右侧选择一个角色来查看和编辑权限
|
||||
|
|
|
|||
|
|
@ -315,7 +315,7 @@ function Roles() {
|
|||
return (
|
||||
|
||||
<div style={{ padding: '24px' }}>
|
||||
<h1 style={{ marginBottom: '24px', fontSize: '24px', fontWeight: 600 }}>角色管理</h1>
|
||||
<h1 style={{ marginBottom: '24px', fontSize: '24px', fontWeight: 600, color: 'var(--text-color)' }}>角色管理</h1>
|
||||
|
||||
{/* 搜索和操作栏 */}
|
||||
<Card style={{ marginBottom: 16 }}>
|
||||
|
|
|
|||
|
|
@ -300,7 +300,7 @@ function Users() {
|
|||
return (
|
||||
|
||||
<div style={{ padding: '24px' }}>
|
||||
<h1 style={{ marginBottom: '24px', fontSize: '24px', fontWeight: 600 }}>用户管理</h1>
|
||||
<h1 style={{ marginBottom: '24px', fontSize: '24px', fontWeight: 600, color: 'var(--text-color)' }}>用户管理</h1>
|
||||
|
||||
{/* 搜索和操作栏 */}
|
||||
<Card style={{ marginBottom: 16 }}>
|
||||
|
|
@ -400,8 +400,8 @@ function Users() {
|
|||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<div style={{ padding: '8px 0', background: '#fff7e6', border: '1px solid #ffd591', borderRadius: 4 }}>
|
||||
<div style={{ padding: '0 12px', fontSize: 12, color: '#ad6800' }}>
|
||||
<div style={{ padding: '8px 0', background: 'var(--bg-color-secondary)', border: '1px solid var(--border-color)', borderRadius: 4 }}>
|
||||
<div style={{ padding: '0 12px', fontSize: 12, color: 'var(--text-color)' }}>
|
||||
注意：新用户的初始密码将在创建成功后显示，请妥善保管！
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ export default {
|
|||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue