feat: v4.4.2版本细节更新

CHANGELOG.md

@@ -8,6 +8,8 @@
 
 剔除 `h` 函数渲染，因为该方法不会受到 `vue` 的编译优化。
 
+针对 `MenuTag` 的定位滚动效果做了优化，现在滚动效果更加平滑。
+
 补充了一些代码的注释（慢慢还账-，-）。
 
 ### Feats
@@ -26,6 +28,8 @@
   - `on`
   - `off`
 - 移除 `changeSwitcher` 方法，使用 `updateSettingState` 方法代替
+- `useContextmenuCoordinate` 方法支持配置项
+- `MenuTag` 的定位滚动现在支持过渡效果
 
 ## Fixes
 

src/hooks/components/useContextmenuCoordinate.ts

@@ -12,7 +12,12 @@
 import { useEventListener, onClickOutside } from '@vueuse/core'
 
 import type { BasicTarget } from '@/types/modules/vue'
-import type { MaybeElementRef, MaybeElement } from '@vueuse/core'
+import type {
+  MaybeElementRef,
+  MaybeElement,
+  UseEventSourceOptions,
+  MaybeRefOrGetter,
+} from '@vueuse/core'
 
 /**
  *
@@ -29,7 +34,10 @@ import type { MaybeElementRef, MaybeElement } from '@vueuse/core'
  *
  * <NDropdown show={show} x={x} y={y} trigger="manual" placement="bottom-start" />
  */
-export const useContextmenuCoordinate = (target: BasicTarget) => {
+export const useContextmenuCoordinate = (
+  target: BasicTarget,
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
+) => {
   const x = ref(0) // 鼠标 x 坐标
   const y = ref(0) // 鼠标 y 坐标
   const show = ref(false) // 是否显示右键菜单
@@ -63,6 +71,7 @@ export const useContextmenuCoordinate = (target: BasicTarget) => {
     target,
     'contextmenu',
     bindContextMenuEvent,
+    options,
   )
   const cleanupClick = useEventListener(target, 'click', () => {
     show.value = false

src/hooks/template/useWatermark.ts

@@ -10,8 +10,6 @@
  */
 
 import { useSettingActions, useSettingGetters } from '@/store'
-import { setVariable, getVariableToRefs } from '@/global-variable'
-import { cloneDeep } from 'lodash-es'
 
 export const useWatermark = () => {
   /**

src/hooks/web/useDevice.ts

@@ -17,6 +17,17 @@
 import { useWindowSize } from '@vueuse/core'
 import { watchEffectWithTarget } from '@/utils/vue'
 
+/**
+ *
+ * 检测当前尺寸是否为平板或者更小
+ * 默认主流平板尺寸为 768px
+ *
+ * @example
+ * const { width, height, isTabletOrSmaller } = useDevice()
+ *
+ * isTabletOrSmaller.value => true // 当前尺寸为平板或者更小
+ * isTabletOrSmaller.value => false // 当前尺寸为桌面或者更大
+ */
 export function useDevice() {
   const { width, height } = useWindowSize()
   const isTabletOrSmaller = ref(false)

src/layout/components/MenuTag/index.tsx

@@ -353,7 +353,10 @@ export default defineComponent({
           const [menuTag] = tags
 
           nextTick().then(() => {
-            menuTag.scrollIntoView?.(true)
+            scrollRef.value?.scrollTo({
+              left: menuTag.offsetLeft,
+              behavior: 'smooth',
+            })
           })
         }
       })

src/utils/vue/renderNode.ts

@@ -33,6 +33,18 @@ export interface RenderNodeOptions<T extends DefaultElement> {
 
 export type RenderNodeReturn = ReturnType<typeof renderNode>
 
+/**
+ *
+ * @param vnode 将 jsx element, slot, h, string 等渲染为 vnode
+ * @param options 配置项
+ *
+ * 可以将常见的类型转换为 vnode
+ *
+ * @example
+ * renderNode('hello world') => () => 'hello world'
+ * renderNode(<div>hello world</div>) => () => <div>hello world</div>
+ * renderNode(() => <div>hello world</div>) => () => <div>hello world</div>
+ */
 export function renderNode<T extends DefaultElement>(
   vnode: RenderVNodeType,
   options?: RenderNodeOptions<T>,

src/utils/vue/unrefElement.ts

@@ -12,6 +12,22 @@
 import type { BasicTarget, TargetType, TargetValue } from '@/types/modules/vue'
 import type { ComponentPublicInstance } from 'vue'
 
+/**
+ *
+ * @param target 获取 ref dom, vue instance 的 dom
+ * @param defaultTarget 默认值
+ *
+ * @example
+ * <template>
+ *  <div ref="refDom"></div>
+ * </template>
+ *
+ * const refDom = ref<HTMLElement | null>(null)
+ * const computedDom = computed(() => refDom.value)
+ *
+ * unrefElement(refDom) => div
+ * unrefElement(computedDom) => div
+ */
 export function unrefElement<T extends TargetType>(
   target: BasicTarget<T>,
   defaultTarget?: T,