完成帮助中心的改造

2026-01-26 13:49:43 +08:00
parent c878dc19d7
commit 4dd824d296
34 changed files with 1471 additions and 44 deletions
--- a/openhis-ui-vue3/public/help-center/vuepress-theme-vdoing-doc/README.MD
+++ b/openhis-ui-vue3/public/help-center/vuepress-theme-vdoing-doc/README.MD
@@ -0,0 +1,277 @@
+<p align="center"><a href="https://xugaoyi.com/" target="_blank" rel="noopener noreferrer"><img width="180" src="../vuepress-theme-vdoing-doc/docs/.vuepress/public/img/logo.png" alt="logo"></a></p>
+
+
+<h2 align="center">经创帮助中心编辑参考文档</h2>
+
+<div style="background: #f8fafc; border: 2px solid #3b82f6; border-radius: 8px; padding: 20px; margin-bottom: 24px;">
+  <h3 style="color: #1e40af; margin: 0 0 16px 0; display: flex; align-items: center; font-size: 18px;">
+    🚨 <span style="margin-left: 8px;">【帮助中心文档编辑核心规则】</span>
+  </h3>
+<div style="color: #334155; line-height: 2; font-size: 15px;">
+    <p style="margin: 0 0 12px 0;">
+      📁 <strong style="color: #dc2626;">文件夹路径规则</strong>：在 <span style="background: #fef2f2; padding: 2px 6px; border-radius: 3px;">help-center</span> 文件夹下的 <span style="background: #fef2f2; padding: 2px 6px; border-radius: 3px;">vuepress-theme-vdoing-doc/docs/</span> 文件夹下新建文件夹；
+    </p>
+    <p style="margin: 0 0 12px 0;">
+      ✏️ <strong style="color: #059669;">页面改造规则</strong>：<span style="color: #dc2626; font-weight: bold; font-size: 16px;">第一个测试页面不可删除</span>，这是帮助中心的入口页面，请勿删除(可以改造)！
+    </p>
+     <p style="margin: 0 0 12px 0;">
+      💡 <strong style="color: #d97706;">编写建议</strong>：因为编写完成后页面不会实时刷新，需要重新启动服务才能看到效果。建议将编写好的MD格式文件复制到目录下后重新打包构建后刷新页面查看效果。
+    </p>
+    <p style="margin: 0 0 12px 0;">
+      📋 <strong style="color: #7c3aed;">命名规则</strong>：<br>
+      &nbsp;&nbsp;▪ 文件夹命名规则: 页面名称（无后缀）<br>
+      &nbsp;&nbsp;▪ 文件命名规则: 功能名称.md；
+    </p>
+    <p style="margin: 0 0 12px 0;">
+      📦 <strong style="color: #2563eb;">打包部署规则</strong>：确认无误后进入 <span style="background: #fef2f2; padding: 2px 6px; border-radius: 3px;">vuepress-theme-vdoing-doc</span> 路径执行 <code style="background: #f1f5f9; padding: 2px 6px; border-radius: 3px; color: #d21818;">npm run build:win</code>(仅Windows系统需要加win) 打包命令
+    </p>
+    <p style="margin: 0; color: #d51414; font-weight: bold;">
+     ⚠️ 警告：如果帮助中心不放在当前路径下，请将配置文件中的打包路径改成自定义路径，否则会丢失JS和CSS样式。<br>
+     &nbsp;&nbsp;配置文件路径：docs/.vuepress/config.js
+    </p>
+</div>
+</div>
+
+📚 MarkDown基本语法大全
+
+以下整理了MarkDown常用基础语法，涵盖标题、文本样式、列表等核心功能，附写法示例与显示效果，适合新手快速上手。
+
+一、标题语法
+
+说明：通过「#」符号表示标题，# 数量对应标题层级（1-6级），# 与标题文本间需留一个空格，层级越高字体越小。
+
+📝 写法示例：
+
+\# 一级标题
+
+\#\# 二级标题
+
+\#\#\# 三级标题
+
+\#\#\#\# 四级标题
+
+\#\#\#\#\# 五级标题
+
+\#\#\#\#\#\# 六级标题
+
+
+✨ 显示效果：
+
+# 一级标题
+## 二级标题
+### 三级标题
+#### 四级标题
+##### 五级标题
+###### 六级标题
+
+二、文本样式
+
+📝 写法示例：
+
+\*\*加粗文本\*\*
+
+\*斜体文本\*
+
+\*\*\*加粗斜体文本\*\*\*
+
+\~\~删除线文本\~\~
+
+<u>下划线文本</u>
+
+\=\=高亮文本\=\=（部分编辑器支持，如Typora）
+
+\> 引用文本（块引用）
+
+\>\> 嵌套引用文本（二级引用）
+
+\`行内代码片段\`
+
+
+✨ 显示效果：
+
+**加粗文本**
+*斜体文本*
+***加粗斜体文本***
+~~删除线文本~~
+<u>下划线文本</u>
+==高亮文本==
+> 引用文本（块引用）
+>> 嵌套引用文本（二级引用）
+行内代码示例：`print("Hello MarkDown")`
+
+三、列表
+
+1. 无序列表（符号可选：-、*、+，符号后需留空格）
+
+📝 写法示例：
+
+\-\- 无序列表项 1
+
+\- 无序列表项 2
+    \- 子列表项 2.1（前面缩进4个空格）
+    \- 子列表项 2.2
+
+\* 无序列表项 A
+\* 无序列表项 B
+
+\+ 无序列表项 X
+\+ 无序列表项 Y
+
+✨ 显示效果：
+
+- 无序列表项 1
+- 无序列表项 2
+    - 子列表项 2.1（前面缩进4个空格或1个Tab）
+    - 子列表项 2.2
+
+* 无序列表项 A
+* 无序列表项 B
+
+ 无序列表项 X
+ 无序列表项 Y
+
+- 
+
+2. 有序列表（数字+英文句点+空格，自动排序）
+
+📝 写法示例：
+
+1. 有序列表项 1
+2. 有序列表项 2
+    1. 子列表项 2.1（前面缩进4个空格）
+    2. 子列表项 2.2
+3. 有序列表项 3
+1. 
+
+3. 任务列表（结合无序列表与复选框，部分编辑器支持）
+4. 有序列表不会认定前面数字改变，从1开始排序，数字会自动序号并不会根据你输入的数字排序
+
+✨ 显示效果：
+
+1. 有序列表项 1
+2. 有序列表项 2
+    1. 子列表项 2.1（缩进后自动续号）
+    2. 子列表项 2.2
+3. 有序列表项 3
+
+4. 
+
+5. 任务列表（结合无序列表与复选框，部分编辑器支持）
+
+有序列表和无序列表的区别是quote（引用）标签不能嵌套，但无序列表可以嵌套。
+
+📝 写法示例：
+
+\-[x] 已完成任务 1
+\-[x] 已完成任务 2
+\-[ ] 未完成任务 3
+\-[ ] 未完成任务 4
+
+✨ 显示效果：
+
+- [x] 已完成任务 1
+- [x] 已完成任务 2
+- [ ] 未完成任务 3
+- [ ] 未完成任务 4
+
+四、链接与图片
+
+1. 链接（两种写法：行内链接、参考链接）
+
+📝 写法示例：
+
+# 行内链接（直接显示链接文本与地址）
+\[百度一下\](https://www.baidu.com "百度首页 - 悬停提示文本")
+
+# 参考链接（适合多次引用同一链接）
+\[MarkDown官方文档\]\[1\]
+\[GitHub\]\[2\]
+
+\[1\]: https://daringfireball.net/projects/markdown/ "MarkDown官方指南"
+\[2\]: https://github.com/ "GitHub官网"
+
+✨ 显示效果：
+
+行内链接：[百度一下](https://www.baidu.com "百度首页 - 悬停提示文本")
+参考链接：[MarkDown官方文档][1]、[GitHub][2]
+
+[1]: https://daringfireball.net/projects/markdown/ "MarkDown官方指南"
+[2]: https://github.com/ "GitHub官网"
+
+2. 图片（语法与链接类似，前缀加!）
+
+📝 写法示例：
+
+# 行内图片
+\![风景图]\(https://picx.zhimg.com/v2-d6f44389971daab7e688e5b37046e4e4_720w.jpg?source=172ae18b)
+
+# 参考图片
+\![Logo]\[img1]
+
+\[img1]: https://www.logosc.cn/uploads/articles/2022/10/20/16662553442591813.png "品牌Logo"
+
+✨ 显示效果：
+
+行内图片：![风景图](https://picx.zhimg.com/v2-d6f44389971daab7e688e5b37046e4e4_720w.jpg?source=172ae18b)
+
+参考图片：![Logo][img1]
+
+[img1]: https://www.logosc.cn/uploads/articles/2022/10/20/16662553442591813.png "品牌Logo"
+
+五、分割线
+
+说明：三种写法均可，需单独成行，前后建议空一行，避免与其他内容混淆。
+
+📝 写法示例：
+
+\---
+
+\***
+
+\___
+
+✨ 显示效果：
+
+---
+***
+___
+
+六、表格（支持对齐设置）
+
+📝 写法示例：
+
+# 基础表格（| 分隔列，- 分隔表头与内容）
+\| 姓名 | 年龄 | 职业 |
+
+\| ---- | ---- | ---- |
+
+\| 张三 | 25   | 程序员 |
+
+\| 李四 | 30   | 设计师 |
+
+# 带对齐的表格（: 表示对齐方向）
+\| 左对齐 | 居中对齐 | 右对齐 |
+
+\| :----- | :------: | -----: |
+
+\| 内容1  | 内容2    | 内容3  |
+
+\| 文本A  | 文本B    | 文本C  |
+
+✨ 显示效果：
+
+| 姓名 | 年龄 | 职业 |
+| ---- | ---- | ---- |
+| 张三 | 25   | 程序员 |
+| 李四 | 30   | 设计师 |
+
+| 左对齐 | 居中对齐 | 右对齐 |
+| :----- | :------: | -----: |
+| 内容1  | 内容2    | 内容3  |
+| 文本A  | 文本B    | 文本C  |
+
+
+
+
+* 更多md语法请参考以下链接
+* [Markdown 语法参考](https://markdown.com.cn/basic-syntax/)