feat(new tool): markdown to word

components.d.ts

@@ -122,6 +122,7 @@ declare module '@vue/runtime-core' {
     MacAddressGenerator: typeof import('./src/tools/mac-address-generator/mac-address-generator.vue')['default']
     MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
     MarkdownToHtml: typeof import('./src/tools/markdown-to-html/markdown-to-html.vue')['default']
+    MarkdownToWord: typeof import('./src/tools/markdown-to-word/markdown-to-word.vue')['default']
     MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
     MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
     MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']
@@ -130,18 +131,28 @@ declare module '@vue/runtime-core' {
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NButton: typeof import('naive-ui')['NButton']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
+    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSlider: typeof import('naive-ui')['NSlider']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']

locales/en.yml

@@ -392,3 +392,18 @@ tools:
   text-to-binary:
     title: Text to ASCII binary
     description: Convert text to its ASCII binary representation and vice-versa.
+
+  markdown-to-word:
+    title: Markdown to Word
+    description: Convert Markdown documents to Word document format with live preview and custom styling support.
+    input:
+      placeholder: Enter your Markdown text here...
+      label: Markdown Input
+    preview:
+      label: Preview
+    export:
+      button: Export to Word
+      disabled: Please enter Markdown content first
+    notification:
+      success: Export successful!
+      error: Export failed, please try again.

locales/zh.yml

@@ -153,7 +153,7 @@ tools:
 
   random-port-generator:
     title: 随机端口生成
-    description: 生成“已知”端口范围（0-1023）之外的随机端口号。
+    description: 生成"已知"端口范围（0-1023）之外的随机端口号。
 
   yaml-prettify:
     title: YAML美化和格式化
@@ -212,7 +212,7 @@ tools:
 
   numeronym-generator:
     title: 数字名称生成器
-    description: 数字名是一个用数字构成缩写的词。例如，“i18n”是“国际化”的名词，其中18表示单词中第一个i和最后一个n之间的字母数。
+    description: 数字名是一个用数字构成缩写的词。例如，"i18n"是"国际化"的名词，其中18表示单词中第一个i和最后一个n之间的字母数。
 
   case-converter:
     title: 大小写转换
@@ -220,7 +220,7 @@ tools:
 
   html-entities:
     title: 转义html实体
-    description: 转义或unescape html实体（将<、>、&、“和\'替换为其html版本）
+    description: 转义或unescape html实体（将<、>、&、"和'替换为其html版本）
 
   json-prettify:
     title: JSON美化和格式化
@@ -383,8 +383,23 @@ tools:
 
   url-encoder:
     title: 编码/解码url格式的字符串
-    description: 编码为url编码格式（也称为“百分比编码”）或从中解码。
+    description: 编码为url编码格式（也称为"百分比编码"）或从中解码。
 
   text-to-binary:
     title: 文本到 ASCII 二进制
     description: 将文本转换为其 ASCII 二进制表示形式，反之亦然。
+
+  markdown-to-word:
+    title: Markdown 转 Word
+    description: 将 Markdown 文档转换为 Word 文档格式，支持实时预览和自定义样式。
+    input:
+      placeholder: 在此输入 Markdown 文本...
+      label: Markdown 输入
+    preview:
+      label: 预览
+    export:
+      button: 导出为 Word
+      disabled: 请先输入 Markdown 内容
+    notification:
+      success: 导出成功！
+      error: 导出失败，请重试。

package.json

@@ -47,6 +47,7 @@
     "@tiptap/vue-3": "2.0.3",
     "@types/figlet": "^1.5.8",
     "@types/markdown-it": "^13.0.7",
+    "@types/marked": "^6.0.0",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.3.0",
@@ -61,11 +62,13 @@
     "cronstrue": "^2.26.0",
     "crypto-js": "^4.1.1",
     "date-fns": "^2.29.3",
+    "docx": "^9.5.0",
     "dompurify": "^3.0.6",
     "email-normalizer": "^1.0.0",
     "emojilib": "^3.0.10",
     "figlet": "^1.7.0",
     "figue": "^1.2.0",
+    "file-saver": "^2.0.5",
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
@@ -75,6 +78,7 @@
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",
     "lodash": "^4.17.21",
+    "markdown-docx": "^1.1.2",
     "markdown-it": "^14.0.0",
     "marked": "^10.0.0",
     "mathjs": "^11.9.1",

src/tools/index.ts

@@ -87,6 +87,7 @@ import { tool as uuidGenerator } from './uuid-generator';
 import { tool as macAddressLookup } from './mac-address-lookup';
 import { tool as xmlFormatter } from './xml-formatter';
 import { tool as yamlViewer } from './yaml-viewer';
+import { tool as markdownWord } from './markdown-to-word';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -116,6 +117,7 @@ export const toolsByCategory: ToolCategory[] = [
       xmlToJson,
       jsonToXml,
       markdownToHtml,
+      markdownWord,
     ],
   },
   {

src/tools/markdown-to-word/index.ts

@@ -0,0 +1,13 @@
+import { Markdown } from '@vicons/tabler';
+import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
+
+export const tool = defineTool({
+  name: translate('tools.markdown-to-word.title'),
+  path: '/markdown-to-word',
+  description: translate('tools.markdown-to-word.description'),
+  keywords: ['markdown', 'word', 'docx', 'converter'],
+  component: () => import('./markdown-to-word.vue'),
+  icon: Markdown,
+  createdAt: new Date('2024-08-25'),
+});

src/tools/markdown-to-word/markdown-to-word.vue

@@ -0,0 +1,372 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import markdownDocx, { Packer } from 'markdown-docx';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const inputMarkdown = ref('');
+const dataUrl = ref('');
+const isLoading = ref(false);
+const lastExportTime = ref<Date | null>(null);
+
+// 计算按钮是否禁用
+const isExportDisabled = computed(() => {
+  return isLoading.value || !inputMarkdown.value.trim();
+});
+
+// Markdown 预览
+const previewHtml = computed(() => {
+  if (!inputMarkdown.value) {
+    return '';
+  }
+  const rawHtml = marked(inputMarkdown.value);
+  return DOMPurify.sanitize(rawHtml);
+});
+
+async function convertMarkdownToDocx() {
+  if (!inputMarkdown.value.trim()) {
+    return;
+  }
+
+  isLoading.value = true;
+  try {
+    const doc = await markdownDocx(inputMarkdown.value);
+    const blob = await Packer.toBlob(doc);
+    const url = URL.createObjectURL(blob);
+    dataUrl.value = url;
+
+    // 自动下载
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'document.docx';
+    a.click();
+    URL.revokeObjectURL(url);
+    lastExportTime.value = new Date();
+  }
+  catch (error) {
+    console.error('转换失败:', error);
+    dataUrl.value = '';
+  }
+  finally {
+    isLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="markdown-to-word-container">
+    <!-- 顶部标题和按钮区 -->
+    <div class="header">
+      <h1 class="title">{{ t('tools.markdown-to-word.title') }}</h1>
+      <p class="subtitle">{{ t('tools.markdown-to-word.description') }}</p>
+      <button
+        class="export-button"
+        :disabled="isExportDisabled"
+        @click="convertMarkdownToDocx"
+      >
+        {{ isLoading ? '生成中...' : t('tools.markdown-to-word.export.button') }}
+      </button>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="content">
+      <!-- 左侧输入区 -->
+      <section class="input-section">
+        <textarea
+          v-model="inputMarkdown"
+          :placeholder="t('tools.markdown-to-word.input.placeholder')"
+          class="markdown-input"
+        />
+      </section>
+
+      <!-- 右侧预览区 -->
+      <section class="preview-section">
+        <!-- Markdown 预览 -->
+        <div class="markdown-preview">
+          <div v-if="isLoading" class="loading">
+            <div class="loading-spinner" />
+            <div class="loading-text">{{ t('tools.markdown-to-word.export.disabled') }}</div>
+          </div>
+          <div v-else-if="inputMarkdown" v-html="previewHtml" class="preview-content" />
+          <div v-else class="empty-state">
+            {{ t('tools.markdown-to-word.input.placeholder') }}<br>
+            {{ t('tools.markdown-to-word.export.disabled') }}
+          </div>
+        </div>
+        <!-- 导出成功提示 -->
+        <div v-if="lastExportTime" class="export-success">
+          <div class="success-icon">✓</div>
+          {{ t('tools.markdown-to-word.notification.success') }}
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.markdown-to-word-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+  min-width: 100%;
+  background: #fafbfc;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.header {
+  padding: 20px 24px;
+  background: #fff;
+  border-bottom: 1px solid #e5e7eb;
+  position: relative;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #111827;
+  margin: 0;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: #6b7280;
+  margin: 4px 0 0;
+}
+
+.export-button {
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 8px 20px;
+  background: #42b983;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.export-button:disabled {
+  background: #d1d5db;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  height: calc(100vh - 85px); /* 减去header的高度 */
+}
+
+.input-section {
+  width: 48%;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  border-right: 1px solid #e5e7eb;
+  background: #fff;
+  min-width: 500px;
+  height: 100%;
+}
+
+.markdown-input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  resize: none;
+  font-family: 'JetBrains Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
+  font-size: 15px;
+  padding: 24px 32px;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  background: #f7f7fa;
+  box-sizing: border-box;
+  line-height: 1.6;
+}
+
+.preview-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  background: #fff;
+  min-width: 500px;
+  position: relative;
+  height: 100%;
+}
+
+.markdown-preview {
+  flex: 1;
+  height: 100%;
+  padding: 24px 32px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  line-height: 1.6;
+  font-size: 16px;
+  min-height: 0;
+  position: relative;
+}
+
+.preview-content {
+  width: 100%;
+  height: 100%;
+}
+
+.empty-state {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: #666;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  z-index: 1;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto 16px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #42b983;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading-text {
+  color: #666;
+  font-size: 16px;
+}
+
+.export-success {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  background: #f0fdf4;
+  border: 1px solid #86efac;
+  border-radius: 4px;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #166534;
+  font-size: 14px;
+  animation: fadeIn 0.3s ease;
+}
+
+.success-icon {
+  color: #22c55e;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+</style>
+
+<style>
+/* Markdown 预览样式 */
+.markdown-preview h1,
+.markdown-preview h2,
+.markdown-preview h3,
+.markdown-preview h4,
+.markdown-preview h5,
+.markdown-preview h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-preview h1 { font-size: 2em; }
+.markdown-preview h2 { font-size: 1.5em; }
+.markdown-preview h3 { font-size: 1.25em; }
+
+.markdown-preview p {
+  margin-bottom: 16px;
+  line-height: 1.6;
+}
+
+.markdown-preview code {
+  padding: 0.2em 0.4em;
+  background: #f1f5f9;
+  border-radius: 3px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.9em;
+}
+
+.markdown-preview pre {
+  padding: 16px;
+  overflow: auto;
+  background: #f8fafc;
+  border-radius: 6px;
+  margin-bottom: 16px;
+}
+
+.markdown-preview pre code {
+  padding: 0;
+  background: transparent;
+}
+
+.markdown-preview ul,
+.markdown-preview ol {
+  padding-left: 2em;
+  margin-bottom: 16px;
+}
+
+.markdown-preview blockquote {
+  padding: 0 1em;
+  color: #666;
+  border-left: 0.25em solid #ddd;
+  margin: 0 0 16px 0;
+}
+
+.markdown-preview img {
+  max-width: 100%;
+  height: auto;
+}
+
+.markdown-preview table {
+  border-collapse: collapse;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.markdown-preview th,
+.markdown-preview td {
+  padding: 6px 13px;
+  border: 1px solid #ddd;
+}
+
+.markdown-preview tr:nth-child(2n) {
+  background: #f8fafc;
+}
+</style>