Skip to content

Commit ae670fa

Browse files
vacevace
committed
feat: enhance UI and add bilingual support for Markdown converter
1 parent 2ea5ca2 commit ae670fa

File tree

5 files changed

+146
-35
lines changed

5 files changed

+146
-35
lines changed

‎web/index.html‎

Lines changed: 42 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,42 +21,73 @@
2121
<div id="app">
2222
<div class="flex flex-col h-screen max-w-full">
2323
<!-- Header -->
24-
<header class="flex justify-between items-center p-4 bg-white shadow w-full mb-2">
25-
<a class="flex items-center space-x-4" target="_blank" href="https://github.com/vace/markdown-docx">
26-
<img src="/icon.svg" alt="MarkdownDocx Logo" class="h-8 w-8">
27-
<div class="text-xl font-bold text-indigo-600">MarkdownDocx</div>
24+
<header class="flex justify-between items-center p-4 bg-white shadow w-full z-10 mb-1">
25+
<div class="flex items-center space-x-4">
26+
<a class="flex items-center" target="_blank" href="https://github.com/vace/markdown-docx">
27+
<img src="/icon.svg" alt="MarkdownDocx Logo" class="h-8 w-8 mr-4">
28+
<div class="text-xl font-bold text-indigo-600">MarkdownDocx</div>
29+
</a>
2830
<div class="hidden sm:flex space-x-2" id="template-list">
2931
<!-- template place holder -->
3032
</div>
31-
</a>
33+
</div>
34+
3235
<div class="flex items-center space-x-4">
3336
<button id="clear" class="px-3 py-1 text-sm rounded hover:bg-gray-100 cursor-pointer">
3437

3538
</button>
36-
<label for="upload" class="px-3 py-1 text-sm rounded bg-gray-200 hover:bg-gray-100 cursor-pointer">
39+
<label for="upload" class="px-3 py-1 text-sm rounded bg-gray-200 hover:bg-gray-100 cursor-pointer flex items-center" title="Upload Markdown file">
40+
<svg class="h-5 w-5 mr-2" viewBox="0 0 48 48" fill="none"
41+
xmlns="http://www.w3.org/2000/svg">
42+
<mask maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48"
43+
style="mask-type: alpha">
44+
<path d="M48 0H0V48H48V0Z" fill="currentColor" />
45+
</mask>
46+
<g mask="url(#icon-13c37f497f10b972)">
47+
<path d="M6 24.0083V42H42V24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
48+
<path d="M33 15L24 6L15 15" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
49+
<path d="M23.9917 32V6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
50+
</g>
51+
</svg>
3752
Upload
3853
<input id="upload" type="file" accept=".md, .markdown, .txt" class="hidden">
3954
</label>
40-
<button id="download" class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700">Download Docx</button>
41-
<a href="https://github.com/vace/markdown-docx" target="_blank" class="text-gray-700 hover:text-gray-700 mx-2">
42-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
55+
<button id="download" class="px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700 flex items-center">
56+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
57+
<path d="M12 16l4-5h-3v-6h-2v6h-3l4 5zm-8 2v2h16v-2h-16z" />
58+
</svg>
59+
Download Docx
60+
</button>
61+
62+
<a href="https://github.com/vace/markdown-docx" target="_blank" class="text-gray-700 hover:text-gray-700 flex items-center bg-gray-200 hover:bg-gray-100 rounded px-3 py-1">
63+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
4364
<path
4465
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
4566
</svg>
67+
<span class="hidden sm:inline-block ml-2 font-semibold">GitHub</span>
4668
</a>
4769
</div>
70+
4871
</header>
4972

73+
<!-- Bilingual notice -->
74+
<div class="text-center py-2 bg-green-50 text-sm">
75+
<p>
76+
<span class="text-green-600 font-medium">🔒 Nothing is uploaded, all processing happens locally.</span>
77+
<span class="text-green-600 font-medium ml-4">内容不会上传，仅在本地处理。</span>
78+
</p>
79+
</div>
80+
5081
<!-- Main content - split view -->
5182
<div class="flex flex-col md:flex-row flex-1 overflow-hidden">
52-
<div class="w-full md:w-1/2 p-4 overflow-auto">
83+
<div class="w-full md:w-1/2 p-2 overflow-auto">
5384
<div class="w-full h-full border rounded focus:outline-none focus:ring-2 focus:ring-indigo-500">
5485
<textarea id="markdown-input"
5586
class="w-full h-full p-4 resize-none"
5687
placeholder="Enter your Markdown here..."></textarea>
5788
</div>
5889
</div>
59-
<div class="w-full md:w-1/2 p-4 bg-white">
90+
<div class="w-full md:w-1/2 p-2 bg-white">
6091
<div class="w-full max-w-full h-full p-4 border rounded overflow-auto">
6192
<div id="markdown-preview" class="prose w-full max-w-full min-h-full p-4"></div>
6293
</div>

‎web/src/common.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
export function debounce (func, wait) {
3+
let timeout
4+
return function executedFunction (...args) {
5+
const later = () => {
6+
timeout = null
7+
func(...args)
8+
}
9+
clearTimeout(timeout)
10+
timeout = setTimeout(later, wait)
11+
}
12+
}

‎web/src/markdown.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
import { marked } from 'marked'
2+
import { debounce } from './common'
23

34
export function initMarkdown () {
45
const markdownInput = document.getElementById('markdown-input')
56
const markdownPreview = document.getElementById('markdown-preview')
67

8+
const updatePreview = debounce(() => {
9+
const markdownContent = markdownInput.value
10+
markdownPreview.innerHTML = marked.parse(markdownContent)
11+
}, 300)
12+
713
function setMarkdown (text) {
814
markdownInput.value = text
915
updatePreview()
1016
}
11-
function updatePreview () {
12-
const markdownContent = markdownInput.value
13-
markdownPreview.innerHTML = marked.parse(markdownContent)
14-
}
1517

1618
function getMarkdown () {
1719
return markdownInput.value
1820
}
1921

22+
// add input event
23+
markdownInput.addEventListener('input', updatePreview)
24+
2025
return {
2126
setMarkdown,
2227
updatePreview,

‎web/src/templates.js‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import clsx from "clsx"
22
import initMarkdown from './template.md?raw'
3+
import initZhMarkdown from './zh-template.md?raw'
34

45
export function initTemplates(service) {
56

@@ -34,32 +35,14 @@ export const initialMarkdown = initMarkdown
3435

3536
export const templatesList = [
3637
{
37-
id: 0,
38+
id: -1,
3839
name: 'Default',
3940
template: initMarkdown,
4041
},
4142
{
4243
id: 1,
4344
name: 'Template 1',
44-
template: `# Template 1: Introduction
45-
46-
This is a simple template showing basic Markdown features.
47-
48-
## Headers
49-
50-
You can create headers using # symbols.
51-
52-
## Lists
53-
54-
- Item 1
55-
- Item 2
56-
- Nested item
57-
- Item 3
58-
59-
## Formatting
60-
61-
You can use **bold**, *italic*, or ~~strikethrough~~ text.
62-
`,
45+
template: initZhMarkdown,
6346
},
6447

6548
{

‎web/src/zh-template.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# Markdown 转 DOCX 转换器
2+
3+
---
4+
5+
欢迎使用 Markdown 转 DOCX 转换器！本工具支持：
6+
7+
1. 编写或粘贴 Markdown 内容
8+
2. 实时预览渲染效果
9+
3. 一键转换为 DOCX 格式
10+
11+
## 使用指南
12+
13+
- 在左侧编辑区输入内容
14+
- 右侧区域实时预览效果
15+
- 点击"下载"按钮生成 DOCX 文档
16+
17+
## 示例
18+
19+
支持 **加粗文本**、*斜体文本*、`行内代码`、~~删除线~~ 和 [链接](https://www.google.com)
20+
21+
> 区块引用同样支持
22+
23+
## 链接示例
24+
25+
[普通内联链接](https://www.google.com)
26+
27+
[带标题的内联链接](https://www.google.com "谷歌首页")
28+
29+
## 任务列表
30+
31+
- [x] 完成修改
32+
- [ ] 推送提交到 GitHub
33+
- [x] 支持 @提及、#引用、[链接]()、**格式**和`标签`
34+
- [ ] 未完成事项
35+
36+
## 图片嵌入
37+
38+
这是我们的 Logo（悬停查看标题文字）：
39+
40+
![替代文本](https://img.alicdn.com/imgextra/i3/O1CN012ZjB2y1xHUf6OzZ8C_!!6000000006418-2-tps-104-126.png "Logo 标题文字")
41+
42+
## 忽略 Markdown 格式
43+
44+
使用反斜杠 \ 可以转义 Markdown 特殊字符：
45+
46+
让我们将 \*新项目\* 重命名为 \*旧项目\*。
47+
48+
## 表格
49+
50+
使用冒号定义列对齐方式：
51+
52+
| 表格 | 对齐 | 金额 |
53+
| ------------- |:-------------:| -----:|
54+
| `第三列` | 右对齐 | \$1600 |
55+
| 第二列 | **居中对齐** | \$12 |
56+
| 斑马条纹 | ~~美观整齐~~ | \$1 |
57+
58+
## 代码区块
59+
60+
```javascript
61+
import markdownDocx, { Packer } from 'markdown-docx';
62+
// 读取Markdown内容
63+
const markdown = await fs.readFile('input.md', 'utf-8');
64+
const doc = await markdownDocx(markdown);
65+
const buffer = await Packer.toBuffer(doc);
66+
```
67+
68+
## 内联 HTML
69+
70+
<dl>
71+
<dt>定义列表</dt>
72+
<dd>这是人们有时会使用的格式</dd>
73+
74+
<dt>HTML中的Markdown</dt>
75+
<dd>*不*能完美支持 **所有** 语法，请使用 HTML <em>标签</em></dd>
76+
</dl>
77+
78+
---
79+
80+
祝您使用愉快！

0 commit comments

Comments
 (0)