feat: update help docs

docs/help.md

@@ -60,11 +60,17 @@ Markdown 是一种轻量级**标记语言**，使用一些简单的标记符号
 
 当你打开值班笔记的[提交页面](/form)后，会发现值班笔记的文本框右下角有一个放大的图片，点击即可进入Markdown编辑器。
 
-![进入编辑器](/assets/images/submit-page.png)
+![进入编辑器](/assets/images/submit.png)
 
-打开编辑器就是这个样子的，左边是你的编辑区，右边是预览区，你可以在编辑区写 Markdown 语法，右边可以实时预览效果。
+打开编辑器就是这个样子，左边是你的编辑区，右边是预览区，你可以在编辑区写 Markdown，右边实时预览效果。
 
-![编辑器](/assets/images/editor-preview.png)
+![编辑器](/assets/images/editor.png)
+
+如果你是在手机上编辑，打开会看到两个按钮，除了**退出按钮**之外，还有一一个**预览按钮**，点击即可预览效果。
+
+|                     编辑器                      |                      预览                      |
+| :---------------------------------------------: | :--------------------------------------------: |
+| ![手机编辑器](/assets/images/editor-mobile.png) | ![手机预览](/assets/images/preview-mobile.png) |
 
 如果你有电脑的话，建议在电脑上编辑，书写起来会更加方便。
 

src/app/form/components/Form/Form.tsx

@@ -152,14 +152,10 @@ export default function Form() {
               </div>
             </div>
 
-            <a
-              target="_blank"
-              href="https://www.markdownguide.org"
-              className="w-fit flex flex-row items-center gap-0.5 text-xs text-gray-700 hover:text-black"
-            >
+            <Link href="/help" className="flex flex-row items-center gap-1">
               <LiaMarkdown size={17} />
-              <span>Markdwn supported.</span>
-            </a>
+              <span className="text-xs text-gray-700 hover:text-black">Markdwn supported.</span>
+            </Link>
           </section>
         </div>
 

src/components/MarkdownRenderer/styles/markdown.css

@@ -31,11 +31,19 @@
 }
 
 .markdown table {
-  @apply text-gray-800 my-4;
+  @apply text-gray-800 my-4 rounded-xl outline outline-1 outline-gray-400;
+}
+
+.markdown table tbody tr {
+  @apply border-t border-t-gray-400;
 }
 
 .markdown table :is(td, th) {
-  @apply border border-gray-300 px-3 py-2;
+  @apply px-3 py-2;
+}
+
+.markdown table :is(th, td):not(:last-child) {
+  @apply border-r border-gray-400;
 }
 
 .markdown pre[class*="language-"] {
@@ -47,13 +55,13 @@
 }
 
 .markdown hr {
-  @apply border-b border-b-blue-300 my-4;
+  @apply border-b border-b-gray-400 my-4;
 }
 
 .markdown code:not([class]) {
   @apply mx-0.5 px-1 py-0.5 bg-black/10 rounded-sm text-sm;
 }
 
 .markdown img {
-  @apply w-full max-w-6xl rounded-xl mx-auto my-4 border border-gray-300;
+  @apply w-full max-w-6xl rounded-xl mx-auto my-4 border border-gray-300 shadow-sm;
 }