From d738114b0a57c5316d7179fa74b519b595468d40 Mon Sep 17 00:00:00 2001
From: pumelotea <535553297@qq.com>
Date: Thu, 26 Dec 2024 15:34:02 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HbAdminNav.vue       | 220 ++++++++++++++--------------
 src/components/HbAdminScaleCard.vue |  22 +--
 src/views/editor-demo/base.demo.vue |  41 +++---
 src/views/home/index.vue            |   7 +-
 4 files changed, 142 insertions(+), 148 deletions(-)

diff --git a/src/components/HbAdminNav.vue b/src/components/HbAdminNav.vue
index 18a4e9e..b59ad09 100644
--- a/src/components/HbAdminNav.vue
+++ b/src/components/HbAdminNav.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {NIcon, NButton, NEmpty, NTag, NDropdown, NTooltip, useThemeVars} from 'naive-ui'
+import { NIcon, NButton, NEmpty, NTag, NDropdown, NTooltip, useThemeVars } from 'naive-ui'
 import {
   ArrowBack,
   ArrowForward,
@@ -13,12 +13,12 @@ import {
   AppsSharp
 } from '@vicons/ionicons5'
 import framework from '@/global/framework'
-import {h, nextTick, ref, watch} from 'vue'
-import {useRouter} from 'vue-router'
-import {removeComponentCache} from '@/global/router'
+import { h, nextTick, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { removeComponentCache } from '@/global/router'
 import Sortable from 'sortablejs'
 import HbAdminNavManager from '@/components/HbAdminNavManager'
-import {arrayMoveImmutable} from 'array-move'
+import { arrayMoveImmutable } from 'array-move'
 
 const vars = useThemeVars()
 
@@ -29,7 +29,7 @@ const router = useRouter()
 const renderIcon = (icon, color) => {
   return () => {
     return h(NIcon, null, {
-      default: () => h(icon, {color})
+      default: () => h(icon, { color })
     })
   }
 }
@@ -37,64 +37,64 @@ const renderIcon = (icon, color) => {
 const options = [
   {
     label: '刷新当前',
-    key: 'refreshCurrent',
-    icon: renderIcon(RefreshSharp)
+    key  : 'refreshCurrent',
+    icon : renderIcon(RefreshSharp)
   },
   {
     label: '刷新全部',
-    key: 'refreshAll',
-    icon: renderIcon(RefreshSharp)
+    key  : 'refreshAll',
+    icon : renderIcon(RefreshSharp)
   },
   {
     label: '关闭左侧',
-    key: 'left',
-    icon: renderIcon(ArrowBackSharp)
+    key  : 'left',
+    icon : renderIcon(ArrowBackSharp)
   },
   {
     label: '关闭右侧',
-    key: 'right',
-    icon: renderIcon(ArrowForwardSharp)
+    key  : 'right',
+    icon : renderIcon(ArrowForwardSharp)
   },
   {
     label: '关闭其他',
-    key: 'other',
-    icon: renderIcon(CloseSharp)
+    key  : 'other',
+    icon : renderIcon(CloseSharp)
   },
   {
     label: '关闭全部',
-    key: 'all',
-    icon: renderIcon(CloseCircleSharp, '#C03F53')
+    key  : 'all',
+    icon : renderIcon(CloseCircleSharp, '#C03F53')
   }
 ]
 
-function refreshPage(key) {
+function refreshPage (key) {
   switch (key) {
-    case 'refreshCurrent': {
-      const pageId = currentRouteMenu.value?.pageId
-      if (pageId) {
-        removeComponentCache(pageId)
-        setTimeout(() => {
-          onNavClick(pageId)
-        }, 100)
-      }
-      break
+  case 'refreshCurrent': {
+    const pageId = currentRouteMenu.value?.pageId
+    if (pageId) {
+      removeComponentCache(pageId)
+      setTimeout(() => {
+        onNavClick(pageId)
+      }, 100)
     }
-    case 'refreshAll': {
-      const pageId = currentRouteMenu.value?.pageId
-      framework.getNavList().value.forEach(e => {
-        removeComponentCache(e.pageId)
-      })
-      if (pageId) {
-        setTimeout(() => {
-          onNavClick(pageId)
-        }, 100)
-      }
-      break
+    break
+  }
+  case 'refreshAll': {
+    const pageId = currentRouteMenu.value?.pageId
+    framework.getNavList().value.forEach(e => {
+      removeComponentCache(e.pageId)
+    })
+    if (pageId) {
+      setTimeout(() => {
+        onNavClick(pageId)
+      }, 100)
     }
+    break
+  }
   }
 }
 
-function onDropdownSelect(key) {
+function onDropdownSelect (key) {
   clickoutside()
   if (key === 'refreshCurrent' || key === 'refreshAll') {
     refreshPage(key)
@@ -115,7 +115,7 @@ function onDropdownSelect(key) {
   })
 }
 
-function onNavClose(e) {
+function onNavClose (e) {
   framework.closeNav('self', e.pageId, (removedNavs, needNavs) => {
     removeComponentCache(e.pageId)
     if (needNavs.length > 0) {
@@ -127,7 +127,7 @@ function onNavClose(e) {
   })
 }
 
-function onNavClick(pageId, event) {
+function onNavClick (pageId, event) {
   framework.clickNavItem(pageId, (a, needNavs) => {
     if (needNavs.length > 0) {
       router.push(needNavs[0].to)
@@ -136,7 +136,7 @@ function onNavClick(pageId, event) {
   })
 }
 
-function scroll(pageId) {
+function scroll (pageId) {
   const scrollLeft = navDom.value.scrollLeft
   const target = document.getElementById(pageId)
   if (!target) {
@@ -147,14 +147,14 @@ function scroll(pageId) {
   const leftOffset = target.offsetLeft - scrollLeft
   if (rightOffset > 0) {
     navDom.value.scrollTo({
-      top: 0,
-      left: scrollLeft + rightOffset + 100,
+      top     : 0,
+      left    : scrollLeft + rightOffset + 100,
       behavior: 'smooth'
     })
   } else if (leftOffset < 0) {
     navDom.value.scrollTo({
-      top: 0,
-      left: scrollLeft + leftOffset - 100,
+      top     : 0,
+      left    : scrollLeft + leftOffset - 100,
       behavior: 'smooth'
     })
   }
@@ -162,20 +162,20 @@ function scroll(pageId) {
 
 const navDom = ref(null)
 
-function scrollHorizontal(direction) {
+function scrollHorizontal (direction) {
   const left = navDom.value.scrollLeft
   if (direction === 'left') {
     navDom.value.scrollTo({
-      top: 0,
-      left: left - 200,
+      top     : 0,
+      left    : left - 200,
       behavior: 'smooth'
     })
   }
 
   if (direction === 'right') {
     navDom.value.scrollTo({
-      top: 0,
-      left: left + 200,
+      top     : 0,
+      left    : left + 200,
       behavior: 'smooth'
     })
   }
@@ -193,7 +193,7 @@ const showDropdownRef = ref(false)
 const xRef = ref(0)
 const yRef = ref(0)
 
-function handleContextMenu(e) {
+function handleContextMenu (e) {
   e.preventDefault()
   nextTick().then(() => {
     showDropdownRef.value = true
@@ -202,17 +202,17 @@ function handleContextMenu(e) {
   })
 }
 
-function clickoutside() {
+function clickoutside () {
   showDropdownRef.value = false
 }
 
-function initSortable() {
+function initSortable () {
   Sortable.create(navDom.value, {
-    animation: 150,
-    ghostClass: 'drop-background',
-    dragClass: 'drop-background',
+    animation  : 150,
+    ghostClass : 'drop-background',
+    dragClass  : 'drop-background',
     chosenClass: 'drop-background',
-    onEnd({oldIndex, newIndex}) {
+    onEnd ({ oldIndex, newIndex }) {
       if (oldIndex === newIndex) {
         return
       }
@@ -232,45 +232,45 @@ const showPageManager = ref(false)
 <template>
   <div class="hb-admin-nav-com">
     <n-button
-        strong
-        secondary
-        circle
-        @click="scrollHorizontal('left')"
+      strong
+      secondary
+      circle
+      @click="scrollHorizontal('left')"
     >
       <template #icon>
-        <n-icon :component="ArrowBack"/>
+        <n-icon :component="ArrowBack" />
       </template>
     </n-button>
     <div
-        ref="navDom"
-        class="inline-box"
+      ref="navDom"
+      class="inline-box"
     >
       <n-empty
-          v-if="navList.length <= 0"
-          :show-icon="false"
-          style="pointer-events: none"
-          description="从左侧菜单打开页面"
+        v-if="navList.length <= 0"
+        :show-icon="false"
+        style="pointer-events: none"
+        description="从左侧菜单打开页面"
       />
       <n-tag
-          v-for="e in navList"
-          :id="e.pageId"
-          :key="e.pageId"
-          closable
-          :type="e.pageId === currentRouteMenu.pageId?'primary':''"
-          class="nav-tag"
-          @close="()=>{onNavClose(e)}"
-          @click="(event)=>{onNavClick(e.pageId,event)}"
-          @contextmenu="handleContextMenu"
+        v-for="e in navList"
+        :id="e.pageId"
+        :key="e.pageId"
+        closable
+        :type="e.pageId === currentRouteMenu.pageId?'primary':''"
+        class="nav-tag"
+        @close="()=>{onNavClose(e)}"
+        @click="(event)=>{onNavClick(e.pageId,event)}"
+        @contextmenu="handleContextMenu"
       >
         {{ e.title }}
         <template #avatar>
           <n-tooltip
-              v-if="e.menuItem.isKeepalive"
-              placement="bottom"
-              trigger="hover"
+            v-if="e.menuItem.isKeepalive"
+            placement="bottom"
+            trigger="hover"
           >
             <template #trigger>
-              <div class="nav-cached-tag"/>
+              <div class="nav-cached-tag" />
             </template>
             <span>
               「{{ e.menuItem.name }}」已开启页面缓存
@@ -278,13 +278,13 @@ const showPageManager = ref(false)
           </n-tooltip>
           <div class="nav-item-icon">
             <i
-                v-if="e.menuItem.icon"
-                class="n-base-icon"
-                :class="e.menuItem.icon"
+              v-if="e.menuItem.icon"
+              class="n-base-icon"
+              :class="e.menuItem.icon"
             />
             <n-icon
-                v-else
-                :component="CubeOutline"
+              v-else
+              :component="CubeOutline"
             />
           </div>
         </template>
@@ -293,54 +293,54 @@ const showPageManager = ref(false)
 
     <div class="nav-action-box">
       <n-button
-          strong
-          secondary
-          circle
-          @click="scrollHorizontal('right')"
+        strong
+        secondary
+        circle
+        @click="scrollHorizontal('right')"
       >
         <template #icon>
-          <n-icon :component="ArrowForward"/>
+          <n-icon :component="ArrowForward" />
         </template>
       </n-button>
       <n-button
-          text
-          @click="showPageManager = true"
+        text
+        @click="showPageManager = true"
       >
         <template #icon>
-          <n-icon :component="AppsSharp"/>
+          <n-icon :component="AppsSharp" />
         </template>
       </n-button>
       <n-dropdown
-          trigger="manual"
-          :x="xRef"
-          :y="yRef"
-          :show="showDropdownRef"
-          :options="options"
-          @clickoutside="clickoutside"
-          @select="onDropdownSelect"
+        trigger="manual"
+        :x="xRef"
+        :y="yRef"
+        :show="showDropdownRef"
+        :options="options"
+        @clickoutside="clickoutside"
+        @select="onDropdownSelect"
       >
         <n-button text>
           <template #icon>
-            <n-icon :component="EllipsisVertical"/>
+            <n-icon :component="EllipsisVertical" />
           </template>
         </n-button>
       </n-dropdown>
 
       <n-dropdown
-          :options="options"
-          @select="onDropdownSelect"
+        :options="options"
+        @select="onDropdownSelect"
       >
         <n-button text>
           <template #icon>
-            <n-icon :component="EllipsisVertical"/>
+            <n-icon :component="EllipsisVertical" />
           </template>
         </n-button>
       </n-dropdown>
     </div>
     <hb-admin-nav-manager
-        :open="showPageManager"
-        @scroll="scroll"
-        @close="showPageManager = false"
+      :open="showPageManager"
+      @scroll="scroll"
+      @close="showPageManager = false"
     />
   </div>
 </template>
diff --git a/src/components/HbAdminScaleCard.vue b/src/components/HbAdminScaleCard.vue
index f46ee2c..6bfc549 100644
--- a/src/components/HbAdminScaleCard.vue
+++ b/src/components/HbAdminScaleCard.vue
@@ -11,11 +11,11 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 
 function getObjectFitSize (
-    type = 'cover',
-    containerWidth,
-    containerHeight,
-    imgWidth,
-    imgHeight
+  type = 'cover',
+  containerWidth,
+  containerHeight,
+  imgWidth,
+  imgHeight
 ) {
   let radio = 1 // 容器与图片的比例
   let sx = 0 // 开始剪切的 x 坐标位置。
@@ -102,7 +102,7 @@ function resize (type) {
   const clientWidth = box.value.clientWidth
   const clientHeight = box.value.clientHeight
   const fit = getObjectFitSize(
-      type, clientWidth, clientHeight, contentWidth.value, contentHeight.value
+    type, clientWidth, clientHeight, contentWidth.value, contentHeight.value
   )
   const scaleX = fit.width / fit.swidth
   const scaleY = fit.height / fit.sheight
@@ -135,13 +135,13 @@ onBeforeUnmount(() => {
 </script>
 <template>
   <div
-      ref="box"
-      class="hb-admin-scale-card"
+    ref="box"
+    class="hb-admin-scale-card"
   >
     <div
-        ref="content"
-        class="hb-admin-scale-content"
-        :style="defaultSize"
+      ref="content"
+      class="hb-admin-scale-content"
+      :style="defaultSize"
     >
       <slot />
     </div>
diff --git a/src/views/editor-demo/base.demo.vue b/src/views/editor-demo/base.demo.vue
index fa612a5..223e737 100644
--- a/src/views/editor-demo/base.demo.vue
+++ b/src/views/editor-demo/base.demo.vue
@@ -3,9 +3,9 @@
 import { NInput, NCard } from 'naive-ui'
 import '@codecoderun/vivid/dist/style.css'
 import { ref } from 'vue'
-import {isDark} from "@/global/config";
-import { VividEditor } from "@codecoderun/vivid";
+import { isDark } from '@/global/config'
 import {
+  VividEditor,
   BoldExt,
   BlockQuoteExt,
   CodeExt,
@@ -60,23 +60,22 @@ import {
   CopyPasteExt,
   UploadManagerExt,
   OutlineExt
-} from "@codecoderun/vivid";
+} from '@codecoderun/vivid'
 
-const vars = useThemeVars();
-function handleUpload(file, per) {
-
-  let n = 0;
+const vars = useThemeVars()
+function handleUpload (file, per) {
+  let n = 0
   return new Promise((resolve) => {
     const t = setInterval(() => {
-      n+=20;
-      per(n);
+      n += 20
+      per(n)
       if (n === 100) {
-        const url = URL.createObjectURL(file);
-        clearInterval(t);
-        resolve(url);
+        const url = URL.createObjectURL(file)
+        clearInterval(t)
+        resolve(url)
       }
-    }, 1000);
-  });
+    }, 1000)
+  })
 }
 
 const content = ref('<h1>⌨️富文本编辑器<span style="color: rgb(247, 6, 126)">🥳🥳🥳</span></h1><blockquote><p><span style="color: rgb(118, 130, 164)"><em>基于无头编辑器 tiptap2.0开发，</em></span></p><p><span style="color: rgb(247, 6, 126)"><strong><em>tiptap大法好！！！</em></strong></span></p></blockquote><h2>特性预览列表</h2><ul><li><p>粗体</p></li><li><p>斜体</p></li><li><p>下划线</p></li><li><p>删除线</p></li><li><p>高亮</p></li><li><p>字体颜色</p></li><li><p>文字对齐方式</p><ul><li><p>左对齐</p></li><li><p>右对齐</p></li><li><p>居中</p></li><li><p>两端对齐</p></li></ul></li><li><p>上角标</p></li><li><p>下角标</p></li><li><p>标题1~6</p></li><li><p>无序列表</p></li><li><p>有序列表</p></li><li><p>任务列表</p></li><li><p>引用块</p></li><li><p>分隔线</p></li><li><p>超链接</p></li><li><p>图片插入、编辑、浮动</p></li><li><p>视频插入、编辑、浮动</p></li><li><p>数学公式插入、编辑</p></li><li><p>代码块插入、高亮</p></li><li><p>表格插入、编辑</p></li><li><p>全屏切换</p></li><li><p>气泡菜单</p></li><li><p>适配夜间模式</p></li><li><p>tab快捷键缩进</p></li><li><p><span style="color: rgb(255, 66, 53)">类似135编辑器内容块复制粘贴插入</span></p></li><li><p><span style="color: rgb(255, 66, 53)">行高调节</span></p></li><li><p><span style="color: rgb(255, 66, 53)">文档大纲</span></p></li><li><p><span style="color: rgb(255, 66, 53)">行级Context菜单</span></p></li><li><p><span style="color: rgb(255, 66, 53)">SlashCommand</span></p></li><li><p><span style="color: rgb(255, 66, 53)">图片上传组件，支持复制粘贴上传插入图片</span></p></li></ul><h2>特性演示</h2><h3>文字样式</h3><p><span style="color: rgb(51, 51, 51)"><strong>床前明月光，疑是地上霜。举头望明月，低头思故乡。</strong></span></p><p><span style="color: rgb(51, 51, 51)"><em>床前明月光，疑是地上霜。举头望明月，低头思故乡。</em></span></p><p><span style="color: rgb(51, 51, 51)"><u>床前明月光，疑是地上霜。举头望明月，低头思故乡。</u></span></p><p><span style="color: rgb(51, 51, 51)"><s>床前明月光，疑是地上霜。举头望明月，低头思故乡。</s></span></p><p><span style="color: rgb(51, 51, 51)"><mark data-color="none" style="background-color: none">床前明月光，疑是地上霜。举头望明月，低头思故乡。</mark></span></p><p><span style="color: rgb(247, 6, 126)">床前明月光，疑是地上霜。举头望明月，低头思故乡。</span></p><p></p><h3>文字对齐方式</h3><p>床前明月光，</p><p style="text-align: center">疑是地上霜。</p><p style="text-align: right">举头望明月，</p><p style="text-align: justify">低头思故乡。</p><h3>图片</h3><p><img src="https://raw.githubusercontent.com/pumelotea/happyboot-tiger/master/assets/light.png" keepratio="true" width="400" height="300" data-display="inline"> <img src="https://raw.githubusercontent.com/pumelotea/happyboot-tiger/d78c4e4e19ed886a55a577ceb64d5bba83b170cc/assets/dark.png" keepratio="true" width="400" height="300" data-display="inline"></p><h3>视频</h3><p><video src="https://media.w3.org/2010/05/sintel/trailer.mp4" keepratio="true" controls="false" loop="false" muted="false" width="546" height="325" data-display="inline"></video></p><h3>无序列表</h3><ul><li><p>床前明月光，</p></li><li><p>疑是地上霜。</p></li><li><p>举头望明月，</p></li><li><p>低头思故乡。</p></li></ul><h3>有序列表</h3><ol><li><p>床前明月光，</p></li><li><p>疑是地上霜。</p></li><li><p>举头望明月，</p></li><li><p>低头思故乡。</p></li></ol><h3>任务列表</h3><ul><li><p>床前明月光，</p></li><li><p>疑是地上霜。</p></li><li><p>举头望明月，</p></li><li><p>低头思故乡。</p></li></ul><h3>超链接</h3><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://happykit.org">我是一个超链接跳到哪好呢？？？</a></p><h3>数学公式</h3><p><span tex="\\displaystyle \\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)\n' +
@@ -114,8 +113,8 @@ const content = ref('<h1>⌨️富文本编辑器<span style="color: rgb(247, 6,
       v-model="content"
       :dark="isDark"
     >
-      <drag-handle></drag-handle>
-      <slash-command></slash-command>
+      <drag-handle />
+      <slash-command />
 
       <template #menu>
         <div class="menu-bar">
@@ -134,7 +133,7 @@ const content = ref('<h1>⌨️富文本编辑器<span style="color: rgb(247, 6,
           <trailing-node-ext />
           <section-ext />
           <copy-paste-ext />
-          <upload-manager-ext :handleUpload="handleUpload"/>
+          <upload-manager-ext :handle-upload="handleUpload" />
 
           <undo-ext />
           <redo-ext />
@@ -155,8 +154,8 @@ const content = ref('<h1>⌨️富文本编辑器<span style="color: rgb(247, 6,
           <subscript-ext />
           <superscript-ext />
           <divider-ext />
-          <image-ext :handleUpload="handleUpload" />
-          <video-ext :handleUpload="handleUpload" />
+          <image-ext :handle-upload="handleUpload" />
+          <video-ext :handle-upload="handleUpload" />
           <link-ext />
           <divider-ext />
           <table-ext />
@@ -170,11 +169,11 @@ const content = ref('<h1>⌨️富文本编辑器<span style="color: rgb(247, 6,
           <ordered-list-ext />
           <task-list-ext />
           <divider-ext />
-          <outline-ext/>
+          <outline-ext />
           <fullscreen-ext />
         </div>
       </template>
-      <template v-slot:bubble-menu="{nodeType}">
+      <template #bubble-menu="{nodeType}">
         <div class="bubble-menu-bar">
           <template v-if="nodeType === 'text'">
             <bold-ext />
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index b2da12e..2f0ef1f 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -20,8 +20,7 @@ import {
 } from 'naive-ui'
 
 import { theme, isMenuCollapsed } from '@/global/config'
-import { h, ref } from 'vue'
-import { CubeOutline, AlbumsOutline } from '@vicons/ionicons5'
+import { AlbumsOutline } from '@vicons/ionicons5'
 import framework from '@/global/framework'
 
 function onLayoutCollapsed (collapsed) {
@@ -30,10 +29,6 @@ function onLayoutCollapsed (collapsed) {
 
 const currentMenuRoute = framework.getCurrentMenuRoute()
 
-function renderIcon () {
-  return () => h(NIcon, null, { default: () => h(CubeOutline) })
-}
-
 </script>
 
 <template>