# NewAPI 风格帮助文档 UI 优化方案 你的帮助文档已经能正常访问，但当前页面属于「默认 HTML 样式」，缺少统一布局、层级、配色和卡片结构。 目标： * 与 NewAPI 后台视觉风格统一 * 保留左侧导航结构 * 提升阅读体验 * 支持 PC / 平板 / 手机 * 更接近 SaaS 控制台风格 --- # 一、整体风格方向 参考你当前 NewAPI 的后台样式： * 浅灰背景 * 白色内容卡片 * 左侧深色导航栏 * 卡片阴影 * 圆角统一 * 字体偏轻 * 大量留白 * SaaS 面板风格 --- # 二、推荐目录结构 建议统一为： ```text /var/www/newapi-docs/ │ ├── docs.html ├── CSS/ │ ├── style.css │ └── doc-theme.css ├── JS/ │ └── search.js ├── 新手教程/ ├── 接入教程/ ├── 报错排查/ └── 计费说明/ ``` 以后只维护一个 CSS 即可。 --- # 三、替换你的 style.css 直接覆盖你的： ```text /var/www/newapi-docs/CSS/style.css ``` 使用下面完整版本。 --- # 四、推荐 CSS（直接复制） ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f4f6fb; color: #1f2937; display: flex; min-height: 100vh; } /* 左侧导航 */ .sidebar { width: 260px; background: #0f172a; color: white; padding: 28px 20px; position: fixed; left: 0; top: 0; bottom: 0; overflow-y: auto; border-right: 1px solid rgba(255,255,255,0.06); } .sidebar h2 { font-size: 20px; margin-bottom: 24px; font-weight: 700; color: white; } .sidebar h3 { font-size: 14px; margin-top: 26px; margin-bottom: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; } .nav-list { list-style: none; } .nav-list li { margin-bottom: 6px; } .nav-list a { display: block; padding: 10px 12px; border-radius: 10px; color: #cbd5e1; text-decoration: none; transition: 0.2s ease; font-size: 14px; } .nav-list a:hover { background: rgba(255,255,255,0.08); color: white; } .nav-list a.active { background: linear-gradient(90deg, #2563eb, #3b82f6); color: white; } /* 主内容 */ .content { margin-left: 280px; width: calc(100% - 280px); padding: 40px; } /* 顶部 Banner */ .hero { background: linear-gradient(135deg, #2563eb, #4f46e5); border-radius: 20px; padding: 36px; color: white; margin-bottom: 32px; box-shadow: 0 8px 30px rgba(37,99,235,0.25); } .hero h1 { font-size: 34px; margin-bottom: 10px; } .hero p { color: rgba(255,255,255,0.9); line-height: 1.8; } /* 卡片 */ .card { background: white; border-radius: 18px; padding: 32px; box-shadow: 0 4px 16px rgba(15,23,42,0.06); margin-bottom: 28px; } .card h2 { margin-bottom: 20px; font-size: 28px; color: #111827; } .card h3 { margin-top: 24px; margin-bottom: 14px; font-size: 20px; } .card p { line-height: 1.9; color: #475569; margin-bottom: 14px; } .card ul { margin-left: 22px; line-height: 2; color: #475569; } /* 按钮 */ .btn { display: inline-block; margin-top: 16px; background: #2563eb; color: white; padding: 10px 18px; border-radius: 10px; text-decoration: none; transition: 0.2s; } .btn:hover { background: #1d4ed8; } /* 搜索 */ .search-box { margin-bottom: 24px; } .search-box input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid #e2e8f0; background: white; outline: none; font-size: 14px; } .search-box input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); } /* 表格 */ table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border-bottom: 1px solid #e5e7eb; padding: 14px; text-align: left; } th { background: #f8fafc; } /* 代码块 */ pre { background: #0f172a; color: #f8fafc; padding: 18px; border-radius: 12px; overflow-x: auto; margin-top: 14px; } code { font-family: Consolas, monospace; } /* 移动端 */ @media (max-width: 900px) { .sidebar { position: relative; width: 100%; height: auto; } .content { margin-left: 0; width: 100%; padding: 20px; } body { flex-direction: column; } } ``` --- # 五、docs.html 推荐结构 你的 docs.html 建议改成这种结构。 ```html

MEYATU API 文档中心

新手教程

接入教程

MEYATU API 文档中心

统一管理 API 调用、模型价格、接入教程与常见问题。

欢迎使用

这是你的 API 帮助文档中心。

``` --- # 六、你当前文档最推荐增加的功能 建议增加： ### 1）顶部搜索 类似 NewAPI 模型页。 用户体验提升非常明显。 --- ### 2）左侧目录高亮 点击后高亮当前页面。 例如： ```html 当前页 ``` --- ### 3）卡片内容区 不要直接把文章裸露展示。 建议统一放入： ```html
``` --- ### 4）代码块美化 API 文档最重要。 建议统一代码展示。 --- ### 5）顶部信息 Banner 与你后台保持一致。 --- # 七、你现在最终效果会接近 * NewAPI 控制台 * Notion 风格文档 * OpenAI 文档 * Vercel Docs * Supabase Docs --- # 八、建议你下一步直接做 你现在已经上线 docs.meyatu.cn。 建议下一步直接： ### 方案一（最快） 直接覆盖 CSS。 立刻提升 80%。 --- ### 方案二（推荐） 统一每个子页面结构： ```html
内容
``` 视觉会非常统一。 --- # 九、你现在最关键的一步 你当前 HTML 已经具备结构。 真正缺的是： * 页面布局 * 统一 spacing * 导航样式 * 卡片体系 * SaaS UI 风格 替换 CSS 后，你的文档会直接提升一个层级。