From 231ae90df968c33bc654c0ffeeec5b4a2476c3a9 Mon Sep 17 00:00:00 2001
From: dqzboy <coolboydqz@gmail.com>
Date: Sun, 1 Feb 2026 13:26:19 +0800
Subject: [PATCH] fix: update features and adjust padding for better mobile
 view

---
 hubcmdui/database/database.js     |  10 +-
 hubcmdui/web/admin.html           |   2 +
 hubcmdui/web/css/admin.css        | 743 ++++++++++++++++++++++++++++++
 hubcmdui/web/css/mobile.css       | 626 +++++++++++++++++++++++++
 hubcmdui/web/document-editor.html |   2 +
 hubcmdui/web/index.html           |  81 +++-
 hubcmdui/web/js/mobile-menu.js    | 299 ++++++++++++
 hubcmdui/web/style.css            | 353 +++++++++++---
 8 files changed, 2050 insertions(+), 66 deletions(-)
 create mode 100644 hubcmdui/web/css/mobile.css
 create mode 100644 hubcmdui/web/js/mobile-menu.js

diff --git a/hubcmdui/database/database.js b/hubcmdui/database/database.js
index 796cb2e..fe38ecc 100644
--- a/hubcmdui/database/database.js
+++ b/hubcmdui/database/database.js
@@ -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平台的镜像搜索
 
 ## 快速开始
 
diff --git a/hubcmdui/web/admin.html b/hubcmdui/web/admin.html
index 8069ac0..9eec689 100644
--- a/hubcmdui/web/admin.html
+++ b/hubcmdui/web/admin.html
@@ -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>
\ No newline at end of file
diff --git a/hubcmdui/web/css/admin.css b/hubcmdui/web/css/admin.css
index c76b821..3bc8537 100644
--- a/hubcmdui/web/css/admin.css
+++ b/hubcmdui/web/css/admin.css
@@ -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;
+    }
+}
diff --git a/hubcmdui/web/css/mobile.css b/hubcmdui/web/css/mobile.css
new file mode 100644
index 0000000..bf06393
--- /dev/null
+++ b/hubcmdui/web/css/mobile.css
@@ -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;
+    }
+}
diff --git a/hubcmdui/web/document-editor.html b/hubcmdui/web/document-editor.html
index 79e4009..d436803 100644
--- a/hubcmdui/web/document-editor.html
+++ b/hubcmdui/web/document-editor.html
@@ -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>
diff --git a/hubcmdui/web/index.html b/hubcmdui/web/index.html
index 3a384bc..b57df88 100644
--- a/hubcmdui/web/index.html
+++ b/hubcmdui/web/index.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, '&amp;')
+                                            .replace(/</g, '&lt;')
+                                            .replace(/>/g, '&gt;');
+                                    }
+                                } 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>
diff --git a/hubcmdui/web/js/mobile-menu.js b/hubcmdui/web/js/mobile-menu.js
new file mode 100644
index 0000000..c627244
--- /dev/null
+++ b/hubcmdui/web/js/mobile-menu.js
@@ -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;
+    }
+};
diff --git a/hubcmdui/web/style.css b/hubcmdui/web/style.css
index ff2370d..faacf3a 100644
--- a/hubcmdui/web/style.css
+++ b/hubcmdui/web/style.css
@@ -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 {