feat: 优化代码

src/views/editor-demo/base.demo.vue

@@ -4,7 +4,13 @@ import { NInput,NCard } from 'naive-ui'
 import HbAdminTipTap from "@/components/tiptap/HbAdminTipTap";
 import {ref} from "vue";
 const content = ref(`
-<h1 style="text-align: center"><strong><span style="color: rgba(5, 222, 154, 1)">happyboot</span></strong><span style="color: rgba(5, 222, 154, 1)">-tiger</span></h1><p style="text-align: center"><img src="https://www.oscs1024.com/platform/badge/pumelotea/happyboot-tiger.svg?size=small" width="126" height="25"></p><h2 style="text-align: center">效果图</h2><p style="text-align: center"><img src="https://raw.githubusercontent.com/pumelotea/happyboot-tiger/master/assets/light.png" width="400" height="300"><img src="https://raw.githubusercontent.com/pumelotea/happyboot-tiger/d78c4e4e19ed886a55a577ceb64d5bba83b170cc/assets/dark.png" width="400" height="300"></p><p style="text-align: center"></p><hr><h2>特性</h2><table><tbody><tr><th colspan="1" rowspan="1" colwidth="458"><p>特性</p></th><th colspan="1" rowspan="1" colwidth="70"><p style="text-align: center">支持</p></th></tr><tr><td colspan="1" rowspan="1" colwidth="458" style="background-color: null"><p>菜单权限、按钮权限控制</p></td><td colspan="1" rowspan="1" colwidth="70" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="458" style="background-color: null"><p>用户状态统一管理</p></td><td colspan="1" rowspan="1" colwidth="70" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="458" style="background-color: null"><p>黑白夜间主题切换</p></td><td colspan="1" rowspan="1" colwidth="70" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="458" style="background-color: null"><p>axios集成封装</p></td><td colspan="1" rowspan="1" colwidth="70" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="458" style="background-color: null"><p>vueuse的集成</p></td><td colspan="1" rowspan="1" colwidth="70" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="458" style="background-color: null"><p>多环境的预设</p></td><td colspan="1" rowspan="1" colwidth="70" style="background-color: null"><p style="text-align: center">✅</p></td></tr></tbody></table><h2>组件&amp;方法</h2><table><tbody><tr><th colspan="1" rowspan="1" colwidth="456"><p>名称</p></th><th colspan="1" rowspan="1" colwidth="72"><p style="text-align: center">支持</p></th></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>头像裁剪组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>图片组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>多图预览组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>自动滚动列表</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>锁屏组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>图标选择器</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>图片工厂方法</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>打印组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>剪贴板复制</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>二维码生成</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>压缩包生成</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>缩放卡片</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>基础EChart组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>视频播放器集成</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>音频播放器组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>滚动区域组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>虚拟列表</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>天气UI组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>markdown编辑器<strong><sup><span style="color: rgba(255, 14, 18, 1)">新</span></sup></strong></p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>可调整容器<strong><sup><span style="color: rgba(255, 14, 18, 1)">新</span></sup></strong></p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>富文本编辑器<strong><sup><span style="color: rgba(255, 14, 18, 1)">新</span></sup></strong></p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr></tbody></table><p></p><p></p><p></p>
+<h1 style="text-align: center"><strong><span style="color: rgb(5, 222, 154)">happyboot</span></strong><span style="color: rgb(5, 222, 154)">-tiger</span></h1><p style="text-align: center"><img src="https://www.oscs1024.com/platform/badge/pumelotea/happyboot-tiger.svg?size=small" width="126" height="25"></p><h2 style="text-align: center">效果图</h2><p style="text-align: center"><img src="https://raw.githubusercontent.com/pumelotea/happyboot-tiger/master/assets/light.png" width="400" height="300"><img src="https://raw.githubusercontent.com/pumelotea/happyboot-tiger/d78c4e4e19ed886a55a577ceb64d5bba83b170cc/assets/dark.png" width="400" height="300"></p><p style="text-align: center"></p><hr><h2>特性</h2><table><tbody><tr><th colspan="1" rowspan="1" colwidth="458"><p>特性</p></th><th colspan="1" rowspan="1" colwidth="70"><p style="text-align: center">支持</p></th></tr><tr><td colspan="1" rowspan="1" colwidth="458" style="background-color: null"><p>菜单权限、按钮权限控制</p></td><td colspan="1" rowspan="1" colwidth="70" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="458" style="background-color: null"><p>用户状态统一管理</p></td><td colspan="1" rowspan="1" colwidth="70" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="458" style="background-color: null"><p>黑白夜间主题切换</p></td><td colspan="1" rowspan="1" colwidth="70" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="458" style="background-color: null"><p>axios集成封装</p></td><td colspan="1" rowspan="1" colwidth="70" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="458" style="background-color: null"><p>vueuse的集成</p></td><td colspan="1" rowspan="1" colwidth="70" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="458" style="background-color: null"><p>多环境的预设</p></td><td colspan="1" rowspan="1" colwidth="70" style="background-color: null"><p style="text-align: center">✅</p></td></tr></tbody></table><h2>组件&amp;方法</h2><table><tbody><tr><th colspan="1" rowspan="1" colwidth="456"><p>名称</p></th><th colspan="1" rowspan="1" colwidth="72"><p style="text-align: center">支持</p></th></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>头像裁剪组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>图片组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>多图预览组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>自动滚动列表</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>锁屏组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>图标选择器</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>图片工厂方法</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>打印组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>剪贴板复制</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>二维码生成</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>压缩包生成</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>缩放卡片</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>基础EChart组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>视频播放器集成</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>音频播放器组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>滚动区域组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>虚拟列表</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>天气UI组件</p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>markdown编辑器<strong><sup><span style="color: rgb(255, 14, 18)">新</span></sup></strong></p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>可调整容器<strong><sup><span style="color: rgb(255, 14, 18)">新</span></sup></strong></p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr><tr><td colspan="1" rowspan="1" colwidth="456" style="background-color: null"><p>富文本编辑器<strong><sup><span style="color: rgb(255, 14, 18)">新</span></sup></strong></p></td><td colspan="1" rowspan="1" colwidth="72" style="background-color: null"><p style="text-align: center">✅</p></td></tr></tbody></table><h2>下载&amp;运行</h2><pre><code class="language-bash">git clone -b master https://github.com/pumelotea/happyboot-tiger.git
+# 进入项目目录
+cd happyboot-tiger
+# 安装依赖
+yarn
+# 运行
+yarn dev </code></pre><p></p><p></p>
 `)
 </script>
 <template>