🎨 fix #334

CHANGELOG.md

@@ -60,6 +60,7 @@
 ### v3.1.15 / 2020-04-2x
 
 * [333](https://github.com/Vanessa219/vditor/issues/333) 重新设计帮助菜单 `改进功能`
+* [334](https://github.com/Vanessa219/vditor/issues/334) 重新设计关于菜单 `改进功能`
 * [335](https://github.com/Vanessa219/vditor/issues/335) 块引用嵌套列表跳出问题 `修复缺陷`
 * [332](https://github.com/Vanessa219/vditor/issues/332) Not working 3rd menu at smartphone `修复缺陷`
 

src/ts/toolbar/Help.ts

@@ -6,8 +6,7 @@ export class Help extends MenuItem {
         super(vditor, menuItem);
         this.element.children[0].addEventListener(getEventName(), (event) => {
             event.preventDefault();
-            vditor.tip.show(`<div style="font-size: 14px;line-height: 22px;margin-left: 6px;width: 360px">
-<h2>帮助</h2>
+            vditor.tip.show(`<div style="font-size: 14px;line-height: 22px;margin: 0 0 7px 6px;min-width:300px;max-width: 360px">
 <p>Markdown 使用指南</p>
 <ul>
     <li><a href="https://hacpai.com/article/1583308420519" target="_blank">语法速查手册</a></li>
@@ -19,7 +18,8 @@ export class Help extends MenuItem {
     <li><a href="https://github.com/Vanessa219/vditor/issues" target="_blank">Issues</a></li>
     <li><a href="https://hacpai.com/tag/vditor" target="_blank">Vditor 官方讨论区</a></li>
     <li><a href="https://hacpai.com/article/1549638745630" target="_blank">Vditor 开发手册</a></li>
-</ul><br>
+</ul>
+<p><a href="https://hacpai.com/article/1582778815353" target="_blank">键盘快捷键</a></p>
 </div>`, 0);
         });
     }

src/ts/toolbar/Info.ts

@@ -1,13 +1,37 @@
 import {getEventName} from "../util/compatibility";
-import {openURL} from "../util/compatibility";
 import {MenuItem} from "./MenuItem";
+import { VDITOR_VERSION} from "../constants";
 
 export class Info extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
         this.element.children[0].addEventListener(getEventName(), (event) => {
             event.preventDefault();
-            openURL("https://github.com/Vanessa219/vditor");
+            vditor.tip.show(`<div style="max-width: 520px; font-size: 14px;line-height: 22px;margin: 0 0 7px 6px;">
+<p style="text-align: center">
+<img src="https://cdn.jsdelivr.net/npm/vditor/src/assets/images/logo.png"><br>
+<em>下一代的 Markdown 编辑器，为未来而构建</em>
+</p>
+<p>
+Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。
+它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和Angular。</p>
+<div style="display: flex;align-items: center">
+<ul style="flex: 1;list-style: none">
+    <li>
+    项目地址：<a href="https://github.com/Vanessa219/vditor" target="_blank">https://github.com/Vanessa219/vditor</a>
+    </li>
+    <li>
+    开源协议：MIT
+    </li>
+    <li>
+    组件版本：Vditor v${VDITOR_VERSION} / Lute v${Lute.Version}
+    </li>
+    <li>
+    赞助捐赠：<a href="https://hacpai.com/sponsor" target="_blank">https://hacpai.com/sponsor</a>
+    </li>
+</ul>
+</div>
+</div>`, 0);
         });
     }
 }