md2ui 1.0.7 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/README.md +104 -38
  2. package/bin/build.js +609 -0
  3. package/bin/md2ui.js +112 -63
  4. package/index.html +43 -1
  5. package/package.json +6 -5
  6. package/src/App.vue +106 -250
  7. package/src/api/docs.js +2 -1
  8. package/src/components/AppSidebar.vue +102 -0
  9. package/src/components/DocContent.vue +39 -0
  10. package/src/components/Logo.vue +5 -9
  11. package/src/components/MobileHeader.vue +20 -0
  12. package/src/components/MobileToc.vue +40 -0
  13. package/src/components/SearchPanel.vue +90 -0
  14. package/src/components/TableOfContents.vue +2 -2
  15. package/src/components/TopBar.vue +144 -0
  16. package/src/components/WelcomePage.vue +251 -0
  17. package/src/composables/useDocHash.js +66 -0
  18. package/src/composables/useDocManager.js +239 -0
  19. package/src/composables/useDocTree.js +80 -0
  20. package/src/composables/useFrontmatter.js +41 -0
  21. package/src/composables/useMarkdown.js +316 -94
  22. package/src/composables/useMobile.js +29 -0
  23. package/src/composables/useScroll.js +9 -15
  24. package/src/composables/useSearch.js +133 -0
  25. package/src/hljs-theme.css +104 -0
  26. package/src/main.js +1 -0
  27. package/src/style.css +935 -213
package/README.md CHANGED
@@ -1,29 +1,84 @@
1
1
  # md2ui
2
2
 
3
+ [![npm version](https://img.shields.io/npm/v/md2ui)](https://www.npmjs.com/package/md2ui)
3
4
  [![GitHub](https://img.shields.io/badge/GitHub-devsneed%2Fmd2ui-blue?logo=github)](https://github.com/devsneed/md2ui)
5
+ [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
4
6
 
5
- 一个轻量级的文档渲染系统，将本地 Markdown 文档转换为美观的 HTML 页面。
7
+ 一个轻量级的 Markdown 文档渲染工具，将本地 `.md` 文件转换为美观的 HTML 页面。支持实时预览和静态站点生成（SSG）两种模式。
6
8
 
7
- ## 核心特性
9
+ ## 功能特性
8
10
 
9
- - 自动化目录 - 扫描文档文件夹，自动生成多级导航树
10
- - 三栏布局 - 左侧导航、中间内容、右侧大纲
11
- - Markdown 增强 - 支持 GFM 语法、代码高亮、Mermaid 图表
12
- - 交互优化 - 可拖拽调整宽度、折叠侧边栏、阅读进度显示
11
+ - 自动目录树 - 扫描文档文件夹，自动生成多级导航，支持搜索过滤
12
+ - 三栏布局 - 左侧导航 / 中间内容 / 右侧大纲，可拖拽调整宽度
13
+ - Markdown 增强 - GFM 语法、代码高亮、Mermaid 图表、Frontmatter
14
+ - 全文搜索 - 基于 MiniSearch 的快速全文检索
15
+ - 暗色模式 - 一键切换亮色/暗色主题
16
+ - 移动端适配 - 响应式布局，抽屉式导航和目录
17
+ - 阅读体验 - 阅读进度条、预计阅读时间、上下篇导航
18
+ - SSG 构建 - `md2ui build` 生成纯静态 HTML，可直接部署
19
+ - 自定义配置 - 站点标题、主题色、GitHub 链接、页脚等
13
20
 
14
- ## 效果图
21
+ ## 效果预览
15
22
 
16
- ![效果图](image.png)
23
+ ### 全文搜索
24
+
25
+ ![全文搜索](screenshots/task1-search.png)
26
+
27
+ ### 代码高亮
28
+
29
+ ![代码高亮 - 语言标签与复制按钮](screenshots/task2-code-highlight-top.png)
30
+
31
+ ![代码高亮 - 渲染效果](screenshots/task2-code-highlight-view.png)
32
+
33
+ ### 暗色模式
34
+
35
+ ![暗色模式 - 欢迎页](screenshots/task3-dark-mode-welcome.png)
36
+
37
+ ![暗色模式 - 文档内容](screenshots/task3-dark-mode-content.png)
38
+
39
+ ### 移动端适配
40
+
41
+ <p>
42
+ <img src="screenshots/task4-mobile-welcome.png" width="32%" alt="移动端 - 欢迎页" />
43
+ <img src="screenshots/task4-mobile-drawer.png" width="32%" alt="移动端 - 抽屉导航" />
44
+ <img src="screenshots/task4-mobile-toc.png" width="32%" alt="移动端 - 目录大纲" />
45
+ </p>
46
+
47
+ ![移动端 - 文档内容](screenshots/task4-mobile-content.png)
48
+
49
+ ### 上下篇导航
50
+
51
+ ![上下篇导航](screenshots/task5-prev-next-nav.png)
52
+
53
+ ### 阅读时间
54
+
55
+ ![阅读时间](screenshots/task7-reading-time.png)
56
+
57
+ ### Frontmatter 支持
58
+
59
+ ![Frontmatter](screenshots/task8-frontmatter.png)
60
+
61
+ ### 导航过滤
62
+
63
+ ![导航过滤](screenshots/task9-nav-filter.png)
64
+
65
+ ### SSG 静态构建
66
+
67
+ ![SSG - 首页](screenshots/ssg-index.png)
68
+
69
+ ![SSG - 目录展开](screenshots/ssg-folder-open.png)
17
70
 
18
71
  ## 安装使用
19
72
 
20
- ### 从 npm 安装（推荐）
73
+ ### 全局安装
21
74
 
22
75
  ```bash
76
+ pnpm add -g md2ui
77
+ # 或
23
78
  npm install -g md2ui
24
79
  ```
25
80
 
26
- ### 使用方法
81
+ ### 实时预览
27
82
 
28
83
  在包含 `.md` 文件的目录下运行：
29
84
 
@@ -40,7 +95,15 @@ md2ui -p 8080
40
95
 
41
96
  访问 http://localhost:3000 查看文档（默认端口 3000）。
42
97
 
43
- ### 文档组织
98
+ ### 静态构建
99
+
100
+ ```bash
101
+ md2ui build
102
+ ```
103
+
104
+ 生成的静态文件在 `dist/` 目录下，可直接部署到任意静态服务器。
105
+
106
+ ## 文档组织
44
107
 
45
108
  ```
46
109
  your-docs/
@@ -52,55 +115,58 @@ your-docs/
52
115
  └── 02-自定义配置.md
53
116
  ```
54
117
 
55
- 文件命名规则：
56
118
  - 使用 `序号-名称.md` 格式控制排序，如 `01-快速开始.md`
57
119
  - 文件夹也支持序号前缀，如 `02-进阶指南/`
58
120
  - 序号越小越靠前
59
121
 
60
- ## 开发维护
122
+ ## 自定义配置
61
123
 
62
- 如果你想参与开发或自定义功能：
124
+ 在文档目录下创建 `md2ui.config.js` 或 `.md2uirc.json`：
63
125
 
64
- ### 环境准备
126
+ ```js
127
+ // md2ui.config.js
128
+ export default {
129
+ title: '我的文档站',
130
+ port: 8080,
131
+ folderExpanded: true,
132
+ themeColor: '#3eaf7c',
133
+ github: 'https://github.com/your/repo',
134
+ footer: 'Copyright © 2025'
135
+ }
136
+ ```
137
+
138
+ | 配置项 | 类型 | 默认值 | 说明 |
139
+ |--------|------|--------|------|
140
+ | title | string | `'md2ui'` | 站点标题 |
141
+ | port | number | `3000` | 开发服务器端口 |
142
+ | folderExpanded | boolean | `false` | 文件夹默认展开 |
143
+ | themeColor | string | `'#3eaf7c'` | 主题色 |
144
+ | github | string | `''` | GitHub 仓库链接 |
145
+ | footer | string | `''` | 页脚内容 |
146
+
147
+ ## 开发
65
148
 
66
149
  ```bash
67
- # 克隆项目
68
150
  git clone https://github.com/devsneed/md2ui.git
69
151
  cd md2ui
70
-
71
- # 安装依赖
72
152
  pnpm install
73
- ```
74
-
75
- ### 开发模式
76
-
77
- ```bash
78
153
  pnpm dev
79
154
  ```
80
155
 
81
- 访问 http://localhost:3000，修改代码后自动热更新。
82
-
83
- ### 本地测试 CLI
84
-
85
- ```bash
86
- # 安装到全局
87
- npm install -g .
88
-
89
- # 在任意目录测试
90
- cd /path/to/test/docs
91
- md2ui
92
- ```
93
-
94
156
  ### 项目结构
95
157
 
96
158
  ```
97
159
  md2ui/
98
- ├── bin/md2ui.js # CLI 入口
160
+ ├── bin/
161
+ │ ├── md2ui.js # CLI 入口（dev server）
162
+ │ └── build.js # SSG 静态构建
99
163
  ├── src/
100
164
  │ ├── App.vue # 主组件
101
165
  │ ├── api/docs.js # 文档列表获取
102
166
  │ ├── components/ # Vue 组件
103
- │ └── composables/ # 组合式函数
167
+ │ ├── composables/ # 组合式函数
168
+ │ ├── config.js # 共享配置
169
+ │ └── style.css # 全局样式
104
170
  ├── public/docs/ # 示例文档
105
171
  └── vite.config.js # Vite 配置
106
172
  ```