first commit
This commit is contained in:
318
assets/css/extra.css
Normal file
318
assets/css/extra.css
Normal file
@@ -0,0 +1,318 @@
|
||||
/* OneApp 文档站点自定义样式 */
|
||||
|
||||
/* 全局样式优化 */
|
||||
.md-content {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.md-main__inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Mermaid 图表样式优化 */
|
||||
.mermaid {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mermaid svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
background: var(--md-code-bg-color, #f6f8fa);
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
[data-md-color-scheme="slate"] .mermaid svg {
|
||||
background: var(--md-code-bg-color, #161b22);
|
||||
}
|
||||
|
||||
/* 代码块样式优化 */
|
||||
.md-typeset pre {
|
||||
background: var(--md-code-bg-color);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--md-default-fg-color--lightest);
|
||||
}
|
||||
|
||||
.md-typeset code {
|
||||
background: var(--md-code-bg-color);
|
||||
border-radius: 3px;
|
||||
padding: 0.1em 0.3em;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/* 表格样式优化 - GitHub风格 */
|
||||
.md-typeset table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
display: block;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--md-default-fg-color--lightest);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.md-typeset table th,
|
||||
.md-typeset table td {
|
||||
border: 1px solid var(--md-default-fg-color--lightest);
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
.md-typeset table th {
|
||||
background: var(--md-default-fg-color--lightest);
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.md-typeset table tr:nth-child(2n) {
|
||||
background: var(--md-code-bg-color, #f6f8fa);
|
||||
}
|
||||
|
||||
[data-md-color-scheme="slate"] .md-typeset table tr:nth-child(2n) {
|
||||
background: var(--md-code-bg-color, #161b22);
|
||||
}
|
||||
|
||||
/* 引用块样式优化 */
|
||||
.md-typeset blockquote {
|
||||
border-left: 4px solid var(--md-primary-fg-color);
|
||||
background: var(--md-code-bg-color, #f6f8fa);
|
||||
padding: 16px 20px;
|
||||
margin: 16px 0;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
[data-md-color-scheme="slate"] .md-typeset blockquote {
|
||||
background: var(--md-code-bg-color, #161b22);
|
||||
}
|
||||
|
||||
/* 标题样式优化 */
|
||||
.md-typeset h1,
|
||||
.md-typeset h2,
|
||||
.md-typeset h3,
|
||||
.md-typeset h4,
|
||||
.md-typeset h5,
|
||||
.md-typeset h6 {
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.md-typeset h1 {
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid var(--md-default-fg-color--lightest);
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.md-typeset h2 {
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid var(--md-default-fg-color--lightest);
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
/* 列表样式优化 */
|
||||
.md-typeset ul,
|
||||
.md-typeset ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.md-typeset li {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
/* 图片样式优化 */
|
||||
.md-typeset img {
|
||||
max-width: 100%;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
/* 内联代码优化 */
|
||||
.md-typeset p code,
|
||||
.md-typeset li code,
|
||||
.md-typeset td code {
|
||||
background: var(--md-code-bg-color, rgba(175,184,193,0.2));
|
||||
padding: 0.1em 0.4em;
|
||||
border-radius: 3px;
|
||||
font-size: 85%;
|
||||
color: var(--md-code-fg-color);
|
||||
}
|
||||
|
||||
[data-md-color-scheme="slate"] .md-typeset p code,
|
||||
[data-md-color-scheme="slate"] .md-typeset li code,
|
||||
[data-md-color-scheme="slate"] .md-typeset td code {
|
||||
background: var(--md-code-bg-color, rgba(110,118,129,0.4));
|
||||
}
|
||||
|
||||
/* 警告框样式优化 */
|
||||
.md-typeset .admonition {
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid;
|
||||
margin: 16px 0;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.md-main__inner {
|
||||
max-width: 100%;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.mermaid svg {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.md-typeset table {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.md-typeset pre {
|
||||
padding: 8px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 导航样式优化 */
|
||||
.md-nav__title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.md-nav__item--active > .md-nav__link {
|
||||
color: var(--md-primary-fg-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 搜索结果优化 */
|
||||
.md-search-result__teaser {
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
/* 目录样式优化 */
|
||||
.md-nav--secondary .md-nav__title {
|
||||
font-weight: 700;
|
||||
color: var(--md-default-fg-color);
|
||||
}
|
||||
|
||||
/* 语法高亮优化 */
|
||||
.md-typeset .highlight pre {
|
||||
background: var(--md-code-bg-color) !important;
|
||||
}
|
||||
|
||||
/* 页脚样式 */
|
||||
.md-footer {
|
||||
background: var(--md-footer-bg-color);
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
.md-header,
|
||||
.md-sidebar,
|
||||
.md-footer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.md-main__inner {
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.mermaid svg {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.md-typeset table {
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式特定优化 */
|
||||
[data-md-color-scheme="slate"] {
|
||||
--md-code-bg-color: #161b22;
|
||||
--md-default-fg-color--lightest: #21262d;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--md-default-bg-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--md-default-fg-color--light);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--md-default-fg-color);
|
||||
}
|
||||
|
||||
/* 修复导航栏和目录滚动问题 */
|
||||
.md-sidebar {
|
||||
height: calc(100vh - 2.4rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.md-sidebar__scrollwrap {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--md-default-fg-color--light) transparent;
|
||||
}
|
||||
|
||||
.md-nav {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.md-nav__list {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* 修复右侧目录滚动 */
|
||||
.md-nav--secondary {
|
||||
max-height: calc(100vh - 6rem);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.md-nav--secondary .md-nav__list {
|
||||
padding-bottom: 3rem;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
/* 移动端滚动优化 */
|
||||
@media screen and (max-width: 76.1875em) {
|
||||
.md-nav--primary .md-nav__list {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.md-sidebar {
|
||||
height: calc(100vh - 3rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tab 样式优化 */
|
||||
.md-typeset .tabbed-set {
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--md-default-fg-color--lightest);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.md-typeset .tabbed-labels {
|
||||
background: var(--md-code-bg-color, #f6f8fa);
|
||||
border-bottom: 1px solid var(--md-default-fg-color--lightest);
|
||||
}
|
||||
|
||||
[data-md-color-scheme="slate"] .md-typeset .tabbed-labels {
|
||||
background: var(--md-code-bg-color, #161b22);
|
||||
}
|
||||
170
assets/js/mermaid.js
Normal file
170
assets/js/mermaid.js
Normal file
@@ -0,0 +1,170 @@
|
||||
// OneApp Mermaid 配置 - 简化版
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// 等待页面加载完成
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initializeMermaid);
|
||||
} else {
|
||||
initializeMermaid();
|
||||
}
|
||||
|
||||
function initializeMermaid() {
|
||||
// 检查Mermaid是否已加载
|
||||
if (typeof mermaid === 'undefined') {
|
||||
console.warn('Mermaid not loaded');
|
||||
return;
|
||||
}
|
||||
|
||||
// 配置Mermaid
|
||||
mermaid.initialize({
|
||||
startOnLoad: true,
|
||||
theme: 'default',
|
||||
themeVariables: {
|
||||
primaryColor: '#1976d2',
|
||||
primaryTextColor: '#000000',
|
||||
primaryBorderColor: '#1976d2',
|
||||
lineColor: '#333333',
|
||||
secondaryColor: '#ffffff',
|
||||
tertiaryColor: '#ffffff'
|
||||
},
|
||||
flowchart: {
|
||||
useMaxWidth: true,
|
||||
htmlLabels: true,
|
||||
curve: 'basis'
|
||||
},
|
||||
sequence: {
|
||||
useMaxWidth: true,
|
||||
wrap: true,
|
||||
width: 150,
|
||||
height: 65
|
||||
},
|
||||
gantt: {
|
||||
useMaxWidth: true
|
||||
},
|
||||
journey: {
|
||||
useMaxWidth: true
|
||||
},
|
||||
timeline: {
|
||||
useMaxWidth: true
|
||||
}
|
||||
});
|
||||
|
||||
// 主题切换支持
|
||||
setupThemeToggle();
|
||||
}
|
||||
|
||||
function setupThemeToggle() {
|
||||
// 监听主题变化 - 改进版本
|
||||
const observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
if (mutation.type === 'attributes' &&
|
||||
mutation.attributeName === 'data-md-color-scheme') {
|
||||
console.log('Theme changed to:', mutation.target.getAttribute('data-md-color-scheme')); // 调试信息
|
||||
reinitializeMermaid();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 同时观察body和documentElement的属性变化
|
||||
observer.observe(document.body, {
|
||||
attributes: true,
|
||||
attributeFilter: ['data-md-color-scheme']
|
||||
});
|
||||
|
||||
observer.observe(document.documentElement, {
|
||||
attributes: true,
|
||||
attributeFilter: ['data-md-color-scheme']
|
||||
});
|
||||
|
||||
// 额外监听系统主题偏好变化
|
||||
if (window.matchMedia) {
|
||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
mediaQuery.addEventListener('change', function() {
|
||||
console.log('System theme changed'); // 调试信息
|
||||
reinitializeMermaid();
|
||||
});
|
||||
}
|
||||
|
||||
// 监听Material主题切换按钮点击
|
||||
document.addEventListener('click', function(event) {
|
||||
if (event.target.closest('[data-md-color-accent]') ||
|
||||
event.target.closest('[data-md-color-primary]') ||
|
||||
event.target.closest('.md-header__button.md-icon')) {
|
||||
setTimeout(reinitializeMermaid, 50); // 延时确保主题已切换
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function reinitializeMermaid() {
|
||||
// 检测当前主题 - 修复主题检测逻辑
|
||||
const isDark = document.body.getAttribute('data-md-color-scheme') === 'slate' ||
|
||||
document.documentElement.getAttribute('data-md-color-scheme') === 'slate' ||
|
||||
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
console.log('Theme detection - isDark:', isDark); // 调试信息
|
||||
|
||||
// 重新配置主题
|
||||
const theme = isDark ? 'dark' : 'default';
|
||||
const themeVariables = isDark ? {
|
||||
primaryColor: '#bb86fc',
|
||||
primaryTextColor: '#ffffff',
|
||||
primaryBorderColor: '#bb86fc',
|
||||
lineColor: '#ffffff',
|
||||
secondaryColor: '#1f1f1f',
|
||||
tertiaryColor: '#333333',
|
||||
background: '#0d1117',
|
||||
mainBkg: '#161b22',
|
||||
secondBkg: '#21262d'
|
||||
} : {
|
||||
primaryColor: '#1976d2',
|
||||
primaryTextColor: '#000000',
|
||||
primaryBorderColor: '#1976d2',
|
||||
lineColor: '#333333',
|
||||
secondaryColor: '#ffffff',
|
||||
tertiaryColor: '#ffffff',
|
||||
background: '#ffffff',
|
||||
mainBkg: '#ffffff',
|
||||
secondBkg: '#f6f8fa'
|
||||
};
|
||||
|
||||
// 重新初始化Mermaid
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: theme,
|
||||
themeVariables: themeVariables,
|
||||
flowchart: {
|
||||
useMaxWidth: true,
|
||||
htmlLabels: true,
|
||||
curve: 'basis'
|
||||
},
|
||||
sequence: {
|
||||
useMaxWidth: true,
|
||||
wrap: true
|
||||
},
|
||||
gantt: {
|
||||
useMaxWidth: true
|
||||
}
|
||||
});
|
||||
|
||||
// 重新渲染所有图表
|
||||
setTimeout(renderAllDiagrams, 100);
|
||||
}
|
||||
|
||||
function renderAllDiagrams() {
|
||||
const elements = document.querySelectorAll('.mermaid, pre.mermaid');
|
||||
elements.forEach(function(element, index) {
|
||||
const code = element.textContent || element.innerText;
|
||||
if (code && code.trim()) {
|
||||
try {
|
||||
element.innerHTML = '';
|
||||
element.textContent = code.trim();
|
||||
mermaid.init(undefined, element);
|
||||
} catch (error) {
|
||||
console.error('Mermaid渲染错误:', error);
|
||||
element.innerHTML = '<div style="color: red; padding: 10px; border: 1px solid red; border-radius: 4px;">图表渲染失败: ' + error.message + '</div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
57
assets/js/search-fix.js
Normal file
57
assets/js/search-fix.js
Normal file
@@ -0,0 +1,57 @@
|
||||
// OneApp 文档站点搜索功能修复
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// 等待搜索功能加载
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 延时确保Material主题的搜索组件已初始化
|
||||
setTimeout(function() {
|
||||
initializeSearchFix();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
function initializeSearchFix() {
|
||||
// 检查搜索输入框是否存在
|
||||
const searchInput = document.querySelector('.md-search__input');
|
||||
if (searchInput) {
|
||||
console.log('Search input found, search is working');
|
||||
|
||||
// 改善搜索体验
|
||||
searchInput.addEventListener('focus', function() {
|
||||
document.body.setAttribute('data-md-search-focus', '');
|
||||
});
|
||||
|
||||
searchInput.addEventListener('blur', function() {
|
||||
setTimeout(function() {
|
||||
document.body.removeAttribute('data-md-search-focus');
|
||||
}, 200);
|
||||
});
|
||||
} else {
|
||||
console.warn('Search input not found');
|
||||
}
|
||||
|
||||
// 检查搜索结果容器
|
||||
const searchResults = document.querySelector('.md-search-result');
|
||||
if (searchResults) {
|
||||
console.log('Search results container found');
|
||||
}
|
||||
}
|
||||
|
||||
// 主题切换时确保搜索功能正常
|
||||
const observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
if (mutation.type === 'attributes' &&
|
||||
mutation.attributeName === 'data-md-color-scheme') {
|
||||
// 主题切换后重新检查搜索功能
|
||||
setTimeout(initializeSearchFix, 100);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 观察主题变化
|
||||
observer.observe(document.body, {
|
||||
attributes: true,
|
||||
attributeFilter: ['data-md-color-scheme']
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user