chore: update layout (#493)

* chore: update layout * fix: package * style: adjust layout * style: enhance layout and border styling in CodemirrorEditor.vue * style: improve transition effects for PostSlider and RightSlider by a hack way * style: refine border and footer layout * style: update icon * style: set select-none * chore: remove overflow property * style: reset code block theme * chore: rename `文章` to `内容` --------- Co-authored-by: dribble-njr <[email protected]> Co-authored-by: yanglbme <[email protected]>
doocs · Jan 10, 2025 · 741322d · 741322d
1 parent de2cc52
commit 741322d
Show file tree

Hide file tree

Showing 17 changed files with 506 additions and 503 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -26,7 +26,7 @@ jobs:
 
             [![github](https://badgen.net/badge/>>/GitHub/cyan)](https://github.com/doocs/md/releases) [![gitee](https://badgen.net/badge/>>/Gitee/cyan)](https://gitee.com/doocs/md/releases)
 
-            > Markdown 文档自动即时渲染为微信图文，让你不再为微信文章排版而发愁！
+            > Markdown 文档自动即时渲染为微信图文，让你不再为微信内容排版而发愁！
 
           draft: false
           prerelease: false
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@
 
 ## 项目介绍
 
-Markdown 文档自动即时渲染为微信图文，让你不再为微信文章排版而发愁！只要你会基本的 Markdown 语法，就能做出一篇样式简洁而又美观大方的微信图文。
+Markdown 文档自动即时渲染为微信图文，让你不再为微信内容排版而发愁！只要你会基本的 Markdown 语法，就能做出一篇样式简洁而又美观大方的微信图文。
 
 ## 在线编辑器地址
 
@@ -25,7 +25,7 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 
 ## 为何二次开发
 
-现有的开源微信 Markdown 编辑器，样式繁杂，也不符合我个人的审美需求。在我使用它们进行文章排版的时候，经常还要自己做一些改动，费时费力，因此动手做了二次开发。
+现有的开源微信 Markdown 编辑器，样式繁杂，也不符合我个人的审美需求。在我使用它们进行内容排版的时候，经常还要自己做一些改动，费时费力，因此动手做了二次开发。
 
 欢迎各位朋友随时提交 PR，让这款微信 Markdown 编辑器变得更好！如果你有新的想法，也欢迎在 [Discussions 讨论区](https://github.com/doocs/md/discussions)反馈。
 
@@ -39,7 +39,7 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 - [x] 允许自定义主题色和 CSS 样式，灵活定制展示效果
 - [x] 提供多图上传功能，并可自定义配置图床
 - [x] 便捷的文件导入、导出功能，提升工作效率
-- [x] 内置本地文章管理功能，支持草稿自动保存
+- [x] 内置本地内容管理功能，支持草稿自动保存
 
 ## 目前支持哪些图床
 
@@ -65,8 +65,8 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 
 ## 注意事项
 
-1. 如果你使用了某些浏览器脚本修改了网页背景色，可能导致渲染后的文章出现背景色分块的现象，详见 [#63](https://github.com/doocs/md/issues/63)。
-2. 某些浏览器插件，会对文章样式造成破坏。现象是：复制粘贴到公众号后台文章，点击保存时，样式丢失，详见 [#151](https://github.com/doocs/md/issues/151)。
+1. 如果你使用了某些浏览器脚本修改了网页背景色，可能导致渲染后的内容出现背景色分块的现象，详见 [#63](https://github.com/doocs/md/issues/63)。
+2. 某些浏览器插件，会对内容样式造成破坏。现象是：复制粘贴到公众号后台内容，点击保存时，样式丢失，详见 [#151](https://github.com/doocs/md/issues/151)。
 
 ## 自定义上传逻辑
 
@@ -227,4 +227,4 @@ docker run -d -p 8080:80 doocs/md:latest
 - [程序员小宋](https://mp.weixin.qq.com/s/llgdqSN3AIXMlEbBuPkKNQ)
 - [架构师修行之路](https://mp.weixin.qq.com/s/-HWx7VZC6NthROGBaATcLA)
 
-注：如果你使用了本 Markdown 编辑器进行文章排版，并且希望在本项目 README 中展示你的公众号，请到 [#5](https://github.com/doocs/md/discussions/5) 留言。
+注：如果你使用了本 Markdown 编辑器进行内容排版，并且希望在本项目 README 中展示你的公众号，请到 [#5](https://github.com/doocs/md/discussions/5) 留言。
diff --git a/src/assets/example/markdown.md b/src/assets/example/markdown.md
@@ -20,7 +20,7 @@ Markdown 是一种轻量级标记语言，用于格式化纯文本。它以简
 #### 四级标题
 ```
 
-以上代码将渲染出一组层次分明的标题，使你的文章井井有条。
+以上代码将渲染出一组层次分明的标题，使你的内容井井有条。
 
 ### 2. 段落与换行：自然流畅
 
@@ -60,7 +60,7 @@ Markdown 中的段落就是一行接一行的文本。要创建新段落，只
 
 轻松实现富媒体内容展示！
 
-> 因微信公众号平台不支持除公众号文章以外的链接，故其他平台的链接，会呈现链接样式但无法点击跳转。
+> 因微信公众号平台不支持除公众号内容以外的链接，故其他平台的链接，会呈现链接样式但无法点击跳转。
 
 > 对于这些链接请注意明文书写，或点击左上角「格式->微信外链接转底部引用」开启引用，这样就可以在底部观察到链接指向。
 
@@ -174,7 +174,7 @@ pie
 
 ## 结语
 
-Markdown 是一种简单、强大且易于掌握的标记语言，通过学习基础和进阶语法，你可以快速创作内容并有效传达信息。无论是技术文档、个人博客还是项目说明，Markdown 都是你的得力助手。希望这篇文章能够带你全面了解 Markdown 的潜力，让你的写作更加丰富多彩！
+Markdown 是一种简单、强大且易于掌握的标记语言，通过学习基础和进阶语法，你可以快速创作内容并有效传达信息。无论是技术文档、个人博客还是项目说明，Markdown 都是你的得力助手。希望这篇内容能够带你全面了解 Markdown 的潜力，让你的写作更加丰富多彩！
 
 现在，拿起 Markdown 编辑器，开始创作吧！探索 Markdown 的世界，你会发现它远比想象中更精彩！
 

diff --git a/src/components/CodemirrorEditor/CssEditor.vue b/src/components/CodemirrorEditor/CssEditor.vue
@@ -103,7 +103,7 @@ function tabChanged(tabName: string | number) {
 
 <template>
   <transition enter-active-class="bounceInRight">
-    <div v-show="displayStore.isShowCssEditor" class="cssEditor-wrapper order-1 h-full flex flex-col border-l-1">
+    <div v-show="displayStore.isShowCssEditor" class="cssEditor-wrapper h-full flex flex-col border-l-1">
       <Tabs
         v-model="store.cssContentConfig.active"
         @update:model-value="tabChanged"

diff --git a/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue b/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue
@@ -33,7 +33,7 @@ function onRedirect(url: string) {
       </DialogHeader>
       <div class="text-center">
         <h3>一款高度简洁的微信 Markdown 编辑器</h3>
-        <p>扫码关注公众号 Doocs，原创技术文章第一时间推送！</p>
+        <p>扫码关注公众号 Doocs，原创技术内容第一时间推送！</p>
         <img
           class="mx-auto my-5"
           src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/1648303220922-7e14aefa-816e-44c1-8604-ade709ca1c69.png"