mirror of
https://github.com/dqzboy/Docker-Proxy.git
synced 2026-03-17 17:33:51 +01:00
fix: update features and adjust padding for better mobile view
This commit is contained in:
dqzboy
@@ -215,14 +215,14 @@ class Database {
|
||||
title: '欢迎使用 Docker 镜像代理加速系统',
|
||||
content: `## 系统介绍
|
||||
|
||||
这是一个基于 Nginx 的 Docker 镜像代理加速系统，可以帮助您加速 Docker 镜像的下载和部署。
|
||||
这是一个基于官方 Registry 的 Docker 镜像代理加速系统，可以帮助您加速 Docker 镜像的下载和部署。
|
||||
|
||||
## 主要功能
|
||||
|
||||
- 🚀 **镜像加速**: 提供多个 Docker 镜像仓库的代理加速
|
||||
- 🔧 **配置管理**: 简单易用的 Web 管理界面
|
||||
- 📊 **监控统计**: 实时监控代理服务状态
|
||||
- 📖 **文档管理**: 内置文档系统，方便管理和分享
|
||||
- 🚀 **镜像加速**: 提供多个 Docker Registr 平台镜像仓库的代理加速
|
||||
- 🔧 **一键安装**: 支持在不同Linux发行版下一键安装部署
|
||||
- 📊 **监控统计**: 实时监控Docker容器服务状态，支持TG、邮箱告警
|
||||
- 📖 **镜像搜索**: 提供Hubcmd-UI 镜像搜索管理系统，支持多Registry平台的镜像搜索
|
||||
|
||||
## 快速开始
|
||||
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
|
||||
<!-- 自定义样式 -->
|
||||
<link rel="stylesheet" href="css/admin.css">
|
||||
<link rel="stylesheet" href="css/mobile.css">
|
||||
<style>
|
||||
/* 管理面板特定样式 */
|
||||
.admin-container {
|
||||
@@ -5464,5 +5465,6 @@
|
||||
window.adjustColor = adjustColor;
|
||||
});
|
||||
</script>
|
||||
<script src="js/mobile-menu.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -478,3 +478,746 @@
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
font-weight: bold;
|
||||
}
|
||||
/* ========== 管理面板移动端优化 ========== */
|
||||
@media (max-width: 768px) {
|
||||
/* 侧边栏优化 */
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: -280px;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
z-index: 1000;
|
||||
transition: left 0.3s ease;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.sidebar.active {
|
||||
left: 0;
|
||||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 添加遮罩层 */
|
||||
.sidebar-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.sidebar-overlay.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 移动端菜单切换按钮 */
|
||||
.mobile-menu-toggle {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
z-index: 1001;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 15px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* 主内容区域优化 */
|
||||
.admin-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0 !important;
|
||||
padding: 15px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* 表格优化 - 响应式表格 */
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table tr {
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
table td {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 5px !important;
|
||||
border: none !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
table td::before {
|
||||
content: attr(data-label);
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 操作按钮优化 */
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.action-buttons button,
|
||||
.action-buttons .btn {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 仪表盘卡片优化 */
|
||||
.dashboard-cards {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* 表单优化 */
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.swal2-input,
|
||||
.swal2-select,
|
||||
.swal2-textarea {
|
||||
font-size: 16px !important; /* 防止 iOS 缩放 */
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
/* 弹窗优化 */
|
||||
.swal2-popup {
|
||||
width: 90% !important;
|
||||
max-width: 400px !important;
|
||||
padding: 20px !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.swal2-title {
|
||||
font-size: 1.3rem !important;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.swal2-html-container {
|
||||
font-size: 14px !important;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.swal2-actions {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swal2-confirm,
|
||||
.swal2-cancel {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 12px !important;
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
/* 编辑器优化 */
|
||||
.editor-toolbar {
|
||||
flex-wrap: wrap;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.editor-toolbar .btn {
|
||||
font-size: 13px;
|
||||
padding: 6px 10px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
#markdown-editor {
|
||||
font-size: 14px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.markdown-preview {
|
||||
padding: 12px;
|
||||
font-size: 14px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
/* 账户信息优化 */
|
||||
.account-info-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.account-info-item .label {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.account-info-item .value {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 菜单编辑弹窗 */
|
||||
.menu-edit-popup {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.menu-edit-title {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.menu-edit-container .form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.menu-edit-container label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 搜索和过滤器优化 */
|
||||
.search-box,
|
||||
.filter-box {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.search-box input,
|
||||
.filter-box select {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 超小屏幕优化 ========== */
|
||||
@media (max-width: 480px) {
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
left: -260px;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 8px 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.swal2-popup {
|
||||
width: 95% !important;
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
table td {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.stat-card h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 平板横屏优化 ========== */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 240px;
|
||||
}
|
||||
|
||||
.dashboard-cards {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
/* ========== 菜单管理和文档管理页面美化 ========== */
|
||||
|
||||
/* 页面头部优化 - 现代卡片式设计 */
|
||||
.page-header {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 28px 32px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: box-shadow 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
|
||||
}
|
||||
|
||||
.page-header:hover {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.page-header-content h1.page-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin: 0 0 6px 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.page-header-content h1.page-title i {
|
||||
color: #3b82f6;
|
||||
margin-right: 10px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.page-header-content .page-subtitle {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.page-header .btn-with-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 11px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 2px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.page-header .btn-with-icon:hover {
|
||||
background: #2563eb;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.page-header .btn-with-icon:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 表格容器 - 去除多余装饰 */
|
||||
.table-container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #f0f0f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 现代化表格样式 - 简洁专业 */
|
||||
.modern-table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.modern-table thead {
|
||||
background: #f9fafb;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.modern-table thead th {
|
||||
padding: 14px 20px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.modern-table thead th:first-child {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.modern-table thead th:last-child {
|
||||
padding-right: 24px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.modern-table tbody tr {
|
||||
transition: background-color 0.15s ease;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.modern-table tbody tr:hover {
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
.modern-table tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.modern-table tbody td {
|
||||
padding: 16px 20px;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.modern-table tbody td:first-child {
|
||||
padding-left: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.modern-table tbody td:last-child {
|
||||
padding-right: 24px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 菜单管理特殊样式 - 无图标版本 */
|
||||
#menuTable .menu-text-display {
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#menuTable .menu-url-cell {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||
font-size: 13px;
|
||||
color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
max-width: 320px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#menuTable .menu-newtab-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
#menuTable .menu-newtab-badge.yes {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
#menuTable .menu-newtab-badge.no {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* 文档管理特殊样式 - 无图标版本 */
|
||||
#documentTable .doc-title-display {
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#documentTable .doc-path {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||
font-size: 12px;
|
||||
color: #6366f1;
|
||||
background: #eef2ff;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#documentTable .doc-status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
#documentTable .doc-status-badge.published {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
#documentTable .doc-status-badge.draft {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
#documentTable .doc-date {
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 操作按钮 - 扁平化设计 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.modern-table .action-btn {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.15s ease;
|
||||
font-size: 14px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.modern-table .action-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 编辑按钮 */
|
||||
.modern-table .action-btn.edit-btn {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.modern-table .action-btn.edit-btn:hover {
|
||||
background: #dbeafe;
|
||||
border-color: #bfdbfe;
|
||||
}
|
||||
|
||||
/* 删除按钮 */
|
||||
.modern-table .action-btn.delete-btn {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.modern-table .action-btn.delete-btn:hover {
|
||||
background: #fee2e2;
|
||||
border-color: #fecaca;
|
||||
}
|
||||
|
||||
/* 发布按钮 */
|
||||
.modern-table .action-btn.publish-btn {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.modern-table .action-btn.publish-btn:hover {
|
||||
background: #d1fae5;
|
||||
border-color: #a7f3d0;
|
||||
}
|
||||
|
||||
/* 取消发布按钮 */
|
||||
.modern-table .action-btn.unpublish-btn {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.modern-table .action-btn.unpublish-btn:hover {
|
||||
background: #fef3c7;
|
||||
border-color: #fde68a;
|
||||
}
|
||||
|
||||
/* 预览按钮 */
|
||||
.modern-table .action-btn.preview-btn {
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.modern-table .action-btn.preview-btn:hover {
|
||||
background: #ede9fe;
|
||||
border-color: #ddd6fe;
|
||||
}
|
||||
|
||||
/* 新增菜单项行 - 清爽设计 */
|
||||
#new-menu-item-row {
|
||||
background: #f0fdf4;
|
||||
border-left: 3px solid #10b981;
|
||||
}
|
||||
|
||||
#new-menu-item-row td {
|
||||
padding: 14px 20px !important;
|
||||
}
|
||||
|
||||
#new-menu-item-row input[type="text"],
|
||||
#new-menu-item-row select {
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
padding: 9px 12px;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s ease;
|
||||
background: white;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
#new-menu-item-row input[type="text"]:focus,
|
||||
#new-menu-item-row select:focus {
|
||||
border-color: #10b981;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
#new-menu-item-row .action-buttons-new-menu {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#new-menu-item-row .action-buttons-new-menu .btn {
|
||||
padding: 9px 18px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
#new-menu-item-row .action-buttons-new-menu .btn-success {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#new-menu-item-row .action-buttons-new-menu .btn-success:hover {
|
||||
background: #059669;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
#new-menu-item-row .action-buttons-new-menu .btn-secondary {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
#new-menu-item-row .action-buttons-new-menu .btn-secondary:hover {
|
||||
background: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
/* 空状态和加载状态 */
|
||||
.table-empty-state {
|
||||
text-align: center;
|
||||
padding: 48px 32px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.table-empty-state i {
|
||||
font-size: 40px;
|
||||
color: #d1d5db;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-empty-state h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
margin: 12px 0 6px 0;
|
||||
}
|
||||
|
||||
.table-empty-state p {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.table-loading {
|
||||
text-align: center;
|
||||
padding: 40px 32px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.table-loading i {
|
||||
font-size: 28px;
|
||||
color: #3b82f6;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 响应式优化 */
|
||||
@media (max-width: 768px) {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-header .btn-with-icon {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modern-table thead th,
|
||||
.modern-table tbody td {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.modern-table thead th:first-child,
|
||||
.modern-table tbody td:first-child {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.modern-table thead th:last-child,
|
||||
.modern-table tbody td:last-child {
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
626
hubcmdui/web/css/mobile.css
Normal file
626
hubcmdui/web/css/mobile.css
Normal file
@@ -0,0 +1,626 @@
|
||||
/**
|
||||
* 移动端优化样式表
|
||||
* 针对移动设备的响应式设计和触摸优化
|
||||
*/
|
||||
|
||||
/* ========== 基础移动端优化 ========== */
|
||||
|
||||
/* 小屏幕设备 (手机) - 最大宽度 768px */
|
||||
@media (max-width: 768px) {
|
||||
/* 全局字体和间距优化 */
|
||||
body {
|
||||
font-size: 14px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 容器优化 */
|
||||
.container {
|
||||
width: 95%;
|
||||
padding: 0 10px;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
/* 页面标题优化 */
|
||||
.page-title {
|
||||
font-size: 1.5rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
line-height: 1.3;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 0.9rem !important;
|
||||
margin-bottom: 1.5rem !important;
|
||||
padding: 0 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 头部导航优化 */
|
||||
.header {
|
||||
padding: 12px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 45px !important;
|
||||
}
|
||||
|
||||
/* 导航菜单移动端优化 */
|
||||
.menu-toggle {
|
||||
display: block;
|
||||
font-size: 1.8rem;
|
||||
padding: 8px;
|
||||
color: #333;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background-color: #ffffff !important;
|
||||
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0 0 12px 12px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.nav-menu.active .nav-list {
|
||||
max-height: 500px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.nav-list li {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.nav-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nav-list li a {
|
||||
display: block;
|
||||
padding: 15px 10px;
|
||||
font-size: 16px;
|
||||
color: #333 !important;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.nav-list li a:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Tab 标签页优化 */
|
||||
.tab-container {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding: 15px 20px;
|
||||
font-size: 15px;
|
||||
border-radius: 10px;
|
||||
justify-content: center;
|
||||
min-height: 50px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.tab i {
|
||||
font-size: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* 内容区域优化 */
|
||||
.content {
|
||||
padding: 1.2rem !important;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* 输入框和搜索框优化 */
|
||||
.input-group,
|
||||
.search-container {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.input-group input,
|
||||
.search-container input,
|
||||
#imageInput {
|
||||
width: 100% !important;
|
||||
padding: 14px 16px !important;
|
||||
font-size: 16px !important; /* 防止 iOS 自动缩放 */
|
||||
border-radius: 10px !important;
|
||||
min-height: 48px; /* 增加触摸目标大小 */
|
||||
}
|
||||
|
||||
.input-group button,
|
||||
.search-container button {
|
||||
width: 100% !important;
|
||||
padding: 14px 20px !important;
|
||||
font-size: 16px !important;
|
||||
min-height: 48px;
|
||||
border-radius: 10px !important;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* 按钮优化 - 增加触摸目标 */
|
||||
button, .btn {
|
||||
min-height: 44px; /* iOS 推荐的最小触摸目标 */
|
||||
padding: 12px 20px;
|
||||
font-size: 15px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* Registry 选择器优化 */
|
||||
.registry-tabs {
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.registry-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.registry-tab {
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
min-height: 44px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* 搜索结果优化 */
|
||||
#searchResults {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
padding: 16px !important;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.search-result-item h3 {
|
||||
font-size: 16px !important;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.search-result-item p {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 命令显示区域优化 */
|
||||
.command-box,
|
||||
.command-display {
|
||||
padding: 12px;
|
||||
font-size: 13px;
|
||||
border-radius: 10px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.command-box pre,
|
||||
.command-display pre {
|
||||
font-size: 12px !important;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* 复制按钮优化 */
|
||||
.copy-btn,
|
||||
.copy-button {
|
||||
padding: 10px 16px !important;
|
||||
font-size: 14px !important;
|
||||
min-height: 44px;
|
||||
border-radius: 8px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* 标签表格优化 */
|
||||
.tag-table {
|
||||
font-size: 13px;
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.tag-table thead,
|
||||
.tag-table tbody,
|
||||
.tag-table tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tag-table thead {
|
||||
display: none; /* 在移动端隐藏表头 */
|
||||
}
|
||||
|
||||
.tag-table tr {
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.tag-table td {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0 !important;
|
||||
border: none !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.tag-table td::before {
|
||||
content: attr(data-label);
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* 隐藏某些不重要的列 */
|
||||
.tag-table td:nth-child(3),
|
||||
.tag-table td:nth-child(4) {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* 文档列表优化 */
|
||||
#documentList {
|
||||
padding: 12px;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
#documentationText {
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
#documentationText h1 {
|
||||
font-size: 1.4rem !important;
|
||||
}
|
||||
|
||||
#documentationText h2 {
|
||||
font-size: 1.2rem !important;
|
||||
}
|
||||
|
||||
#documentationText h3 {
|
||||
font-size: 1.05rem !important;
|
||||
}
|
||||
|
||||
#documentationText pre {
|
||||
font-size: 12px !important;
|
||||
padding: 12px !important;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#documentationText code {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* 返回顶部按钮优化 */
|
||||
.back-to-top-btn {
|
||||
bottom: 20px !important;
|
||||
right: 20px !important;
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
font-size: 20px !important;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* 搜索无结果优化 */
|
||||
.empty-result {
|
||||
padding: 40px 20px !important;
|
||||
margin: 15px 0 !important;
|
||||
}
|
||||
|
||||
.empty-result .empty-icon {
|
||||
width: 60px !important;
|
||||
height: 60px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.empty-result .empty-icon i {
|
||||
font-size: 28px !important;
|
||||
}
|
||||
|
||||
.empty-result h3 {
|
||||
font-size: 18px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.empty-result > p {
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.empty-tips {
|
||||
padding: 16px !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.empty-tips > p {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.empty-tips ul li {
|
||||
font-size: 13px !important;
|
||||
padding: 5px 0 !important;
|
||||
}
|
||||
|
||||
/* 特性卡片优化 */
|
||||
.features {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* 加载指示器优化 */
|
||||
.loading-indicator {
|
||||
padding: 2rem 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 超小屏幕设备优化 (小于 480px) ========== */
|
||||
@media (max-width: 480px) {
|
||||
.page-title {
|
||||
font-size: 1.3rem !important;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
.registry-tab {
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.registry-tab span {
|
||||
display: none; /* 只显示图标 */
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
padding: 14px !important;
|
||||
}
|
||||
|
||||
.command-box,
|
||||
.command-display {
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 横屏模式优化 ========== */
|
||||
@media (max-width: 768px) and (orientation: landscape) {
|
||||
.header {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 35px !important;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1 1 auto;
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 触摸优化 ========== */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
/* 移除 hover 效果，使用 active 状态 */
|
||||
a:hover,
|
||||
button:hover,
|
||||
.btn:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
a:active,
|
||||
button:active,
|
||||
.btn:active {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* 优化点击反馈 */
|
||||
.tab:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.registry-tab:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.copy-btn:active,
|
||||
.copy-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== iOS 特定优化 ========== */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
/* iOS Safari 优化 */
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font-size: 16px !important; /* 防止缩放 */
|
||||
}
|
||||
|
||||
/* 优化 iOS 滚动 */
|
||||
.nav-list,
|
||||
.registry-tabs,
|
||||
#documentationText,
|
||||
.tag-table {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 移除 iOS 默认样式 */
|
||||
input,
|
||||
button,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 平板设备优化 (481px - 768px) ========== */
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#searchResults {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1 1 calc(50% - 10px);
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 中等平板优化 (769px - 992px) ========== */
|
||||
@media (min-width: 769px) and (max-width: 992px) {
|
||||
.container {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
#searchResults {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 可访问性优化 ========== */
|
||||
@media (max-width: 768px) {
|
||||
/* 增加焦点指示器 */
|
||||
a:focus,
|
||||
button:focus,
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: 2px solid var(--primary-color, #3D7CF4);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 优化跳过导航链接 */
|
||||
.skip-to-content {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
background: var(--primary-color, #3D7CF4);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
text-decoration: none;
|
||||
border-radius: 0 0 4px 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.skip-to-content:focus {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 性能优化 ========== */
|
||||
@media (max-width: 768px) {
|
||||
/* 减少动画以提高性能 */
|
||||
* {
|
||||
animation-duration: 0.2s !important;
|
||||
transition-duration: 0.2s !important;
|
||||
}
|
||||
|
||||
/* 优化滚动性能 */
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 暗色模式支持 ========== */
|
||||
@media (max-width: 768px) and (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #1a1a1a;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #2a2a2a;
|
||||
border-bottom-color: #3a3a3a;
|
||||
}
|
||||
|
||||
.content,
|
||||
.search-result-item,
|
||||
.tag-table tr {
|
||||
background-color: #2a2a2a;
|
||||
border-color: #3a3a3a;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.nav-list li a {
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
background-color: #3a3a3a;
|
||||
color: #e5e5e5;
|
||||
border-color: #4a4a4a;
|
||||
}
|
||||
}
|
||||
@@ -23,6 +23,7 @@
|
||||
<!-- 自定义样式 -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="css/admin.css">
|
||||
<link rel="stylesheet" href="css/mobile.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
@@ -495,5 +496,6 @@
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="js/mobile-menu.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -6,7 +6,16 @@
|
||||
<title>Docker镜像加速服务</title>
|
||||
<link rel="icon" href="https://cdn.jsdelivr.net/gh/dqzboy/Blog-Image/BlogCourse/docker-proxy.png" type="image/png">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<!-- Highlight.js CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="css/mobile.css">
|
||||
<!-- Highlight.js JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/shell.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/yaml.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js"></script>
|
||||
<script src="js/nav-menu.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -215,6 +224,14 @@
|
||||
}
|
||||
window.protectCopyright = protectCopyright;
|
||||
|
||||
// HTML 转义函数
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
window.escapeHtml = escapeHtml;
|
||||
|
||||
// ========================================
|
||||
// === 文档加载相关函数 (移到此处) ===
|
||||
// ========================================
|
||||
@@ -578,7 +595,22 @@
|
||||
});
|
||||
|
||||
if (!hasResults) {
|
||||
searchResults.innerHTML = '<div class="empty-result"><i class="fas fa-search"></i><p>在所有平台中未找到匹配的镜像</p></div>';
|
||||
searchResults.innerHTML = `
|
||||
<div class="empty-result">
|
||||
<div class="empty-icon">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
<h3>未找到匹配的镜像</h3>
|
||||
<p>在所有平台中没有找到与 "${escapeHtml(searchTerm)}" 相关的镜像</p>
|
||||
<div class="empty-tips">
|
||||
<p><i class="fas fa-lightbulb"></i> 搜索建议：</p>
|
||||
<ul>
|
||||
<li>尝试使用更简短或更通用的关键词</li>
|
||||
<li>检查关键词拼写是否正确</li>
|
||||
<li>使用英文关键词可能会获得更好的结果</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// 聚合搜索不显示分页
|
||||
@@ -2387,28 +2419,64 @@
|
||||
const docFragmentRoot = document.createElement('div');
|
||||
docFragmentRoot.innerHTML = rawHtml;
|
||||
|
||||
// 为代码块添加语言标识和复制按钮
|
||||
// 为代码块添加语法高亮和行号
|
||||
const preElements = docFragmentRoot.querySelectorAll('pre');
|
||||
preElements.forEach((preElement, index) => {
|
||||
const codeElement = preElement.querySelector('code');
|
||||
let codeToCopy = '';
|
||||
let language = 'Code';
|
||||
let language = 'bash';
|
||||
|
||||
if (codeElement) {
|
||||
codeToCopy = codeElement.textContent;
|
||||
|
||||
// 尝试从className获取语言信息
|
||||
const className = codeElement.className;
|
||||
const langMatch = className.match(/language-(\w+)/);
|
||||
if (langMatch) {
|
||||
language = langMatch[1].toUpperCase();
|
||||
language = langMatch[1].toLowerCase();
|
||||
}
|
||||
|
||||
// 使用highlight.js进行语法高亮
|
||||
let highlightedCode;
|
||||
try {
|
||||
if (window.hljs) {
|
||||
highlightedCode = hljs.highlight(codeToCopy, { language: language }).value;
|
||||
} else {
|
||||
highlightedCode = codeToCopy
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
}
|
||||
} catch (e) {
|
||||
// 如果语言不支持，使用auto模式
|
||||
highlightedCode = hljs.highlightAuto(codeToCopy).value;
|
||||
}
|
||||
|
||||
// 将代码分行并创建表格结构
|
||||
const lines = highlightedCode.split('\n');
|
||||
// 如果最后一行是空行，删除它
|
||||
if (lines[lines.length - 1].trim() === '') {
|
||||
lines.pop();
|
||||
}
|
||||
|
||||
// 创建简单的代码结构（无行号）
|
||||
let codeHTML = '';
|
||||
lines.forEach((line, lineIndex) => {
|
||||
codeHTML += `<div class="hljs-line">${line || ' '}</div>`;
|
||||
});
|
||||
|
||||
// 应用hljs样式类
|
||||
codeElement.className = `hljs ${language}`;
|
||||
codeElement.innerHTML = codeHTML;
|
||||
} else {
|
||||
codeToCopy = preElement.textContent;
|
||||
}
|
||||
|
||||
// 设置语言属性用于CSS显示
|
||||
preElement.setAttribute('data-language', language);
|
||||
// 设置语言属性
|
||||
preElement.setAttribute('data-language', language.toUpperCase());
|
||||
preElement.className = 'wp-block-code';
|
||||
|
||||
// 添加复制按钮
|
||||
if (codeToCopy.trim() !== '') {
|
||||
const copyButton = document.createElement('button');
|
||||
copyButton.className = 'copy-btn';
|
||||
@@ -2621,5 +2689,6 @@
|
||||
}
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.3/marked.min.js"></script>
|
||||
<script src="js/mobile-menu.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
299
hubcmdui/web/js/mobile-menu.js
Normal file
299
hubcmdui/web/js/mobile-menu.js
Normal file
@@ -0,0 +1,299 @@
|
||||
/**
|
||||
* 移动端菜单交互脚本
|
||||
* 处理移动端导航菜单和侧边栏的显示/隐藏
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// 等待 DOM 加载完成
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initMobileMenu();
|
||||
initAdminSidebar();
|
||||
handleOrientationChange();
|
||||
optimizeTouchEvents();
|
||||
});
|
||||
|
||||
/**
|
||||
* 初始化主页面的移动端菜单
|
||||
*/
|
||||
function initMobileMenu() {
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
|
||||
if (!menuToggle || !navMenu) return;
|
||||
|
||||
// 点击菜单按钮切换菜单显示
|
||||
menuToggle.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
navMenu.classList.toggle('active');
|
||||
|
||||
// 更新按钮图标
|
||||
const icon = this.querySelector('i');
|
||||
if (icon) {
|
||||
if (navMenu.classList.contains('active')) {
|
||||
icon.className = 'fas fa-times';
|
||||
} else {
|
||||
icon.className = 'fas fa-bars';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 点击菜单项后关闭菜单
|
||||
const menuItems = navMenu.querySelectorAll('.nav-list a');
|
||||
menuItems.forEach(function(item) {
|
||||
item.addEventListener('click', function() {
|
||||
if (window.innerWidth <= 768) {
|
||||
navMenu.classList.remove('active');
|
||||
const icon = menuToggle.querySelector('i');
|
||||
if (icon) {
|
||||
icon.className = 'fas fa-bars';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 点击页面其他地方关闭菜单
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!navMenu.contains(e.target) && !menuToggle.contains(e.target)) {
|
||||
if (navMenu.classList.contains('active')) {
|
||||
navMenu.classList.remove('active');
|
||||
const icon = menuToggle.querySelector('i');
|
||||
if (icon) {
|
||||
icon.className = 'fas fa-bars';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化管理面板的移动端侧边栏
|
||||
*/
|
||||
function initAdminSidebar() {
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
if (!sidebar) return;
|
||||
|
||||
// 创建移动端菜单切换按钮
|
||||
if (window.innerWidth <= 768) {
|
||||
createMobileMenuToggle();
|
||||
createSidebarOverlay();
|
||||
}
|
||||
|
||||
// 监听窗口大小变化
|
||||
let resizeTimer;
|
||||
window.addEventListener('resize', function() {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(function() {
|
||||
if (window.innerWidth <= 768) {
|
||||
if (!document.querySelector('.mobile-menu-toggle')) {
|
||||
createMobileMenuToggle();
|
||||
createSidebarOverlay();
|
||||
}
|
||||
} else {
|
||||
removeMobileElements();
|
||||
sidebar.classList.remove('active');
|
||||
}
|
||||
}, 250);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建移动端菜单切换按钮
|
||||
*/
|
||||
function createMobileMenuToggle() {
|
||||
if (document.querySelector('.mobile-menu-toggle')) return;
|
||||
|
||||
const toggleBtn = document.createElement('button');
|
||||
toggleBtn.className = 'mobile-menu-toggle';
|
||||
toggleBtn.innerHTML = '<i class="fas fa-bars"></i>';
|
||||
toggleBtn.setAttribute('aria-label', '切换菜单');
|
||||
|
||||
toggleBtn.addEventListener('click', function() {
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const overlay = document.querySelector('.sidebar-overlay');
|
||||
|
||||
if (sidebar && overlay) {
|
||||
sidebar.classList.toggle('active');
|
||||
overlay.classList.toggle('active');
|
||||
|
||||
// 更新图标
|
||||
const icon = this.querySelector('i');
|
||||
if (icon) {
|
||||
if (sidebar.classList.contains('active')) {
|
||||
icon.className = 'fas fa-times';
|
||||
} else {
|
||||
icon.className = 'fas fa-bars';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.body.appendChild(toggleBtn);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建侧边栏遮罩层
|
||||
*/
|
||||
function createSidebarOverlay() {
|
||||
if (document.querySelector('.sidebar-overlay')) return;
|
||||
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'sidebar-overlay';
|
||||
|
||||
overlay.addEventListener('click', function() {
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const toggleBtn = document.querySelector('.mobile-menu-toggle');
|
||||
|
||||
if (sidebar) {
|
||||
sidebar.classList.remove('active');
|
||||
this.classList.remove('active');
|
||||
|
||||
if (toggleBtn) {
|
||||
const icon = toggleBtn.querySelector('i');
|
||||
if (icon) {
|
||||
icon.className = 'fas fa-bars';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除移动端元素
|
||||
*/
|
||||
function removeMobileElements() {
|
||||
const toggleBtn = document.querySelector('.mobile-menu-toggle');
|
||||
const overlay = document.querySelector('.sidebar-overlay');
|
||||
|
||||
if (toggleBtn) toggleBtn.remove();
|
||||
if (overlay) overlay.remove();
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理屏幕方向变化
|
||||
*/
|
||||
function handleOrientationChange() {
|
||||
window.addEventListener('orientationchange', function() {
|
||||
// 方向改变时关闭所有打开的菜单
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const overlay = document.querySelector('.sidebar-overlay');
|
||||
|
||||
if (navMenu) {
|
||||
navMenu.classList.remove('active');
|
||||
}
|
||||
|
||||
if (sidebar) {
|
||||
sidebar.classList.remove('active');
|
||||
}
|
||||
|
||||
if (overlay) {
|
||||
overlay.classList.remove('active');
|
||||
}
|
||||
|
||||
// 重置菜单按钮图标
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const mobileToggle = document.querySelector('.mobile-menu-toggle');
|
||||
|
||||
if (menuToggle) {
|
||||
const icon = menuToggle.querySelector('i');
|
||||
if (icon) icon.className = 'fas fa-bars';
|
||||
}
|
||||
|
||||
if (mobileToggle) {
|
||||
const icon = mobileToggle.querySelector('i');
|
||||
if (icon) icon.className = 'fas fa-bars';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 优化触摸事件
|
||||
*/
|
||||
function optimizeTouchEvents() {
|
||||
// 为所有按钮添加触摸反馈
|
||||
const buttons = document.querySelectorAll('button, .btn, .tab, .registry-tab');
|
||||
|
||||
buttons.forEach(function(button) {
|
||||
button.addEventListener('touchstart', function() {
|
||||
this.style.opacity = '0.7';
|
||||
}, { passive: true });
|
||||
|
||||
button.addEventListener('touchend', function() {
|
||||
this.style.opacity = '1';
|
||||
}, { passive: true });
|
||||
|
||||
button.addEventListener('touchcancel', function() {
|
||||
this.style.opacity = '1';
|
||||
}, { passive: true });
|
||||
});
|
||||
|
||||
// 优化滚动性能
|
||||
const scrollElements = document.querySelectorAll('.nav-list, .registry-tabs, #documentationText, .tag-table');
|
||||
|
||||
scrollElements.forEach(function(element) {
|
||||
element.style.webkitOverflowScrolling = 'touch';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 防止iOS双击缩放
|
||||
*/
|
||||
let lastTouchEnd = 0;
|
||||
document.addEventListener('touchend', function(event) {
|
||||
const now = Date.now();
|
||||
if (now - lastTouchEnd <= 300) {
|
||||
event.preventDefault();
|
||||
}
|
||||
lastTouchEnd = now;
|
||||
}, { passive: false });
|
||||
|
||||
/**
|
||||
* 优化输入框焦点处理（防止iOS自动缩放）
|
||||
*/
|
||||
const inputs = document.querySelectorAll('input, textarea, select');
|
||||
inputs.forEach(function(input) {
|
||||
input.addEventListener('focus', function() {
|
||||
if (window.innerWidth <= 768) {
|
||||
// 滚动到输入框位置
|
||||
setTimeout(function() {
|
||||
input.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
// 导出函数供外部使用
|
||||
window.MobileMenu = {
|
||||
/**
|
||||
* 关闭所有打开的菜单
|
||||
*/
|
||||
closeAllMenus: function() {
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
const overlay = document.querySelector('.sidebar-overlay');
|
||||
|
||||
if (navMenu) navMenu.classList.remove('active');
|
||||
if (sidebar) sidebar.classList.remove('active');
|
||||
if (overlay) overlay.classList.remove('active');
|
||||
},
|
||||
|
||||
/**
|
||||
* 检查是否为移动设备
|
||||
*/
|
||||
isMobile: function() {
|
||||
return window.innerWidth <= 768;
|
||||
},
|
||||
|
||||
/**
|
||||
* 检查是否为触摸设备
|
||||
*/
|
||||
isTouchDevice: function() {
|
||||
return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
||||
}
|
||||
};
|
||||
@@ -1340,113 +1340,261 @@
|
||||
}
|
||||
|
||||
/* 代码块样式 - 现代设计 */
|
||||
#documentationText pre {
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
/* ========== Highlight.js 代码块样式 ========== */
|
||||
#documentationText pre,
|
||||
#documentationText .wp-block-code {
|
||||
background: #282c34;
|
||||
color: #abb2bf;
|
||||
padding: 0;
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin: 24px 0;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #334155;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid #21252b;
|
||||
position: relative;
|
||||
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 代码块头部 - 终端样式 */
|
||||
#documentationText pre::before {
|
||||
#documentationText pre::before,
|
||||
#documentationText .wp-block-code::before {
|
||||
content: '';
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
background: #334155;
|
||||
border-bottom: 1px solid #475569;
|
||||
height: 36px;
|
||||
background: #21252b;
|
||||
border-bottom: 1px solid #181a1f;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 模拟终端按钮 */
|
||||
#documentationText pre::after {
|
||||
#documentationText pre::after,
|
||||
#documentationText .wp-block-code::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #ef4444;
|
||||
background: #ff5f56;
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
18px 0 #eab308,
|
||||
36px 0 #22c55e;
|
||||
18px 0 #ffbd2e,
|
||||
36px 0 #27c93f;
|
||||
}
|
||||
|
||||
#documentationText pre code {
|
||||
/* Highlight.js 代码容器 */
|
||||
#documentationText pre code,
|
||||
#documentationText .wp-block-code code {
|
||||
display: block;
|
||||
padding: 20px 24px;
|
||||
background: transparent;
|
||||
background: transparent !important;
|
||||
color: inherit;
|
||||
border: none;
|
||||
border: none !important;
|
||||
border-radius: 0;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
white-space: pre;
|
||||
font-size: inherit;
|
||||
line-height: 1.6;
|
||||
padding: 6px 20px 12px 20px !important;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* 代码行样式 */
|
||||
#documentationText pre code .hljs-line,
|
||||
#documentationText .wp-block-code code .hljs-line {
|
||||
display: block;
|
||||
white-space: pre;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 复制按钮 - 放在顶部标题栏 */
|
||||
#documentationText pre .copy-btn,
|
||||
#documentationText .wp-block-code .copy-btn {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 12px;
|
||||
padding: 4px 10px;
|
||||
background: rgba(171, 178, 191, 0.15);
|
||||
color: #abb2bf;
|
||||
border: 1px solid rgba(171, 178, 191, 0.25);
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
z-index: 10;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#documentationText pre .copy-btn:hover,
|
||||
#documentationText .wp-block-code .copy-btn:hover {
|
||||
background: rgba(97, 175, 239, 0.2);
|
||||
color: #61afef;
|
||||
border-color: rgba(97, 175, 239, 0.3);
|
||||
}
|
||||
|
||||
#documentationText pre .copy-btn.copied,
|
||||
#documentationText .wp-block-code .copy-btn.copied {
|
||||
background: rgba(152, 195, 121, 0.2);
|
||||
color: #98c379;
|
||||
border-color: rgba(152, 195, 121, 0.3);
|
||||
}
|
||||
|
||||
#documentationText pre .copy-btn i,
|
||||
#documentationText .wp-block-code .copy-btn i {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* 行内代码样式 */
|
||||
#documentationText code {
|
||||
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||
background: #f1f5f9;
|
||||
color: #0f172a;
|
||||
color: #e74c3c;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
/* 代码块头部 - doc-content 类 */
|
||||
.doc-content pre::before {
|
||||
content: attr(data-language, 'Code');
|
||||
/* 代码块中的code标签不应用行内样式 */
|
||||
#documentationText pre code,
|
||||
#documentationText .wp-block-code code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 代码块样式 - doc-content 类 */
|
||||
.doc-content pre,
|
||||
.doc-content .wp-block-code {
|
||||
background: #282c34;
|
||||
color: #abb2bf;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin: 24px 0;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid #21252b;
|
||||
position: relative;
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.doc-content pre::before,
|
||||
.doc-content .wp-block-code::before {
|
||||
content: '';
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
background: #334155;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid #475569;
|
||||
padding: 10px 16px;
|
||||
background: #21252b;
|
||||
border-bottom: 1px solid #181a1f;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 模拟 macOS 窗口按钮 */
|
||||
.doc-content pre::after {
|
||||
.doc-content pre::after,
|
||||
.doc-content .wp-block-code::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #ef4444;
|
||||
background: #ff5f56;
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
-18px 0 #eab308,
|
||||
-36px 0 #22c55e;
|
||||
18px 0 #ffbd2e,
|
||||
36px 0 #27c93f;
|
||||
}
|
||||
|
||||
.doc-content pre code {
|
||||
.doc-content pre code,
|
||||
.doc-content .wp-block-code code {
|
||||
display: block;
|
||||
padding: 20px 24px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
line-height: 1.6;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.doc-content pre code .hljs-ln,
|
||||
.doc-content .wp-block-code code .hljs-ln {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.doc-content pre code .hljs-ln tbody,
|
||||
.doc-content .wp-block-code code .hljs-ln tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
.doc-content pre code .hljs-ln tr,
|
||||
.doc-content .wp-block-code code .hljs-ln tr {
|
||||
display: table-row;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.doc-content pre code .hljs-ln td,
|
||||
.doc-content .wp-block-code code .hljs-ln td {
|
||||
display: table-cell;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.doc-content pre code .hljs-ln-numbers,
|
||||
.doc-content .wp-block-code code .hljs-ln-numbers {
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
background: #282c34;
|
||||
border-right: 1px solid #3e4451;
|
||||
user-select: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.doc-content pre code .hljs-ln-n,
|
||||
.doc-content .wp-block-code code .hljs-ln-n {
|
||||
padding: 0 12px 0 0;
|
||||
color: #5c6370;
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.doc-content pre code .hljs-ln-n::before,
|
||||
.doc-content .wp-block-code code .hljs-ln-n::before {
|
||||
content: attr(data-line-number);
|
||||
}
|
||||
|
||||
.doc-content pre code .hljs-ln-code,
|
||||
.doc-content .wp-block-code code .hljs-ln-code {
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
background: #282c34;
|
||||
}
|
||||
|
||||
.doc-content pre code .hljs-ln-line,
|
||||
.doc-content .wp-block-code code .hljs-ln-line {
|
||||
padding: 0 16px;
|
||||
display: block;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.doc-content pre code .hljs-ln tr:hover .hljs-ln-numbers,
|
||||
.doc-content .wp-block-code code .hljs-ln tr:hover .hljs-ln-numbers {
|
||||
background: #2c313a;
|
||||
}
|
||||
|
||||
.doc-content pre code .hljs-ln tr:hover .hljs-ln-code,
|
||||
.doc-content .wp-block-code code .hljs-ln tr:hover .hljs-ln-code {
|
||||
background: #2c313a;
|
||||
}
|
||||
|
||||
.doc-content pre code::-webkit-scrollbar {
|
||||
@@ -1650,6 +1798,94 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 搜索无结果样式 */
|
||||
.empty-result {
|
||||
text-align: center;
|
||||
padding: 60px 32px;
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
|
||||
border-radius: 16px;
|
||||
border: 1px dashed #e5e7eb;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.empty-result .empty-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 24px;
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-result .empty-icon i {
|
||||
font-size: 36px;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.empty-result h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.empty-result > p {
|
||||
font-size: 15px;
|
||||
color: #6b7280;
|
||||
margin: 0 0 24px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.empty-tips {
|
||||
background: #f9fafb;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.empty-tips > p {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin: 0 0 12px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.empty-tips > p i {
|
||||
color: #f59e0b;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.empty-tips ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.empty-tips ul li {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
padding: 6px 0;
|
||||
padding-left: 24px;
|
||||
position: relative;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.empty-tips ul li::before {
|
||||
content: '•';
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
color: #3b82f6;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 加载状态样式优化 */
|
||||
.loading-container {
|
||||
display: flex;
|
||||
@@ -2004,7 +2240,7 @@
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
||||
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@@ -2032,9 +2268,10 @@
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
@media (max-width: 768px) {
|
||||
.back-to-top-btn {
|
||||
bottom: 20px;
|
||||
bottom: 24px;
|
||||
right: 20px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
@@ -3816,6 +4053,7 @@
|
||||
|
||||
.menu-toggle {
|
||||
display: block;
|
||||
color: #333; /* 深色图标 */
|
||||
}
|
||||
|
||||
.nav-menu .nav-list {
|
||||
@@ -3823,12 +4061,13 @@
|
||||
top: 100%;
|
||||
right: 0;
|
||||
flex-direction: column;
|
||||
background-color: #111;
|
||||
background-color: #ffffff; /* 白色背景 */
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
display: none;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.nav-menu.active .nav-list {
|
||||
@@ -3838,6 +4077,10 @@
|
||||
.nav-menu .nav-list li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.nav-menu .nav-list li a {
|
||||
color: #333 !important; /* 深色文字 */
|
||||
}
|
||||
}
|
||||
|
||||
.no-menu, .menu-error {
|
||||
|
||||
Reference in New Issue
Block a user