version: v4.3.4

.env.production

@@ -1,6 +1,4 @@
 #生产环境
-NODE_ENV = 'production'
-
 VITE_APP_URL = '/'
 
 # office 服务代理地址

CHANGELOG.md

@@ -1,5 +1,28 @@
 # CHANGE LOG
 
+## 4.3.4
+
+更新了 MenuTag 的样式，现在有更加细腻的过渡动画。
+
+针对 `utils` 下的方法，修复 `utils/element` 中的部分方法因为 `ref` 注册 `dom` 的时候不能正确的触发方法的问题。并且修复了部分方法类型的不准确问题；补充了一些示例。
+
+由于 vite 不再支持显式声明 .env=production 配置文件 NODE_ENV=production，所以该版本移除了配置文件的 NODE_ENV 声明。
+
+修复构建提示循环依赖问题。
+
+### Feats
+
+- 更新了 MenuTag 的动画效果
+- 基于 `print-js` 与 `vue hooks` 开发新 `print` 方法，存放于 `utils/basic`
+- 移除 .env.production 文件的 NODE_ENV 显式声明
+- 优化构建 chunk
+
+### Fixes
+
+- 修复 `utils/element` 方法不能正确获取 `ref` 绑定 `dom` 的问题
+- 修复设置界面抛出治毒警告问题
+- 修复构建提示循环依赖问题
+
 ## 4.3.3
 
 紧跟尤大大脚步，更新 `vite` 版本至 `5.0.0` 版本！与此同时，更新了配套所有插件！

README-ZH.md

@@ -9,12 +9,13 @@
 
 简体中文 | [English](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/README.md)
 
-一个基于 vite4.x & ts(x) & pinia & vue3.x 的中后台模板
+一个 `免费`、`高效`、`特性完整` 并且基于 vite4.x & ts(x) & pinia & vue3.x 等最新技术的中后台模板。
 
 </div>
 
 ## ✨ 特性
 
+- **靠爱发电**：几乎包含市面常见的模板特性并且全部免费使用
 - **最新技术栈**：使用 vue3.x/vite4.x/pinia 等前端前沿技术开发
 - **TypeScript**：应用程序级 JavaScript 的语言
 - **主题**：可配置的主题

README.md

@@ -9,12 +9,13 @@
 
 English | [简体中文](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/README-ZH.md)
 
-A middle and backend template based on vite4.x & ts(x) & pinia & vue3.x
+A `free`, `efficient`, `complete with features` middle and backend template based on the latest technologies such as vite4.x & ts(x) & pinia & vue3.x.
 
 </div>
 
 ## ✨ Feature
 
+- **Power by love**: Contains almost all common template features on the market and all are free to use.
 - **Latest Technology Stack**：Developed using front-end cutting-edge technologies such as vue3.x/vite4.x/pinia.
 - **TypeScript**：The language for application-level JavaScript.
 - **App Theme**：Configurable themes.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.3.3",
+  "version": "4.3.4",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build --mode production",
+    "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
     "test": "vue-tsc --noEmit && vite build --mode test",
     "dev-build": "vue-tsc --noEmit && vite build --mode development",

src/components/RForm/index.ts

@@ -0,0 +1,5 @@
+import RForm from './src/RForm'
+import props from './src/props'
+
+export default RForm
+export { props }

src/components/RForm/src/RForm.tsx

@@ -0,0 +1,25 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-11-18
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { NForm } from 'naive-ui'
+
+import props from './props'
+
+export default defineComponent({
+  name: 'RForm',
+  props,
+  setup() {
+    return {}
+  },
+  render() {
+    return <NForm></NForm>
+  },
+})

src/components/RForm/src/props.ts

@@ -0,0 +1,18 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-11-18
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { formProps } from 'naive-ui'
+
+const props = {
+  ...formProps,
+}
+
+export default props

src/components/RTable/src/components/Print.tsx

@@ -14,7 +14,7 @@ import RIcon from '@/components/RIcon/index'
 
 import config from '../config'
 import props from '../props'
-import print from 'print-js'
+import { print } from '@/utils/basic'
 
 import type { TableProvider } from '../type'
 
@@ -39,7 +39,7 @@ export default defineComponent({
           : '表格',
       })
 
-      print(options)
+      print(document.getElementById(uuidTable), options)
     }
 
     return {

src/hooks/template/index.ts

@@ -2,9 +2,10 @@ import { useAppMenu } from './useAppMenu'
 import { useMainPage } from './useMainPage'
 import { useMenuTag } from './useMenuTag'
 import { useRootRoute } from './useRootRoute'
+import { useAppSetting } from './useAppSetting'
 
 export type { MaximizeOptions } from './useMainPage'
 export type { Target } from './useAppMenu'
 export type { CloseMenuTag } from './useMenuTag'
 
-export { useAppMenu, useMainPage, useMenuTag, useRootRoute }
+export { useAppMenu, useMainPage, useMenuTag, useRootRoute, useAppSetting }

src/hooks/template/useAppSetting.ts

@@ -11,7 +11,7 @@
 
 import { useSettingActions } from '@/store'
 
-export function useApp() {
+export function useAppSetting() {
   /**
    *
    * @param theme 当前主题色

src/hooks/template/useMenuTag.ts

@@ -170,15 +170,16 @@ export function useMenuTag() {
     const normal = normalMenuTagOption(target, 'close')
 
     if (normal) {
-      const { index } = normal
+      const { index, option } = normal
 
       spliceMenTagOptions(index)
 
-      if (getMenuKey.value !== getRootPath.value) {
+      if (option.key === getMenuKey.value) {
-        const length = getMenuTagOptions.value.length
+        const tag = getMenuTagOptions.value[index - 1]
-        const tag = getMenuTagOptions.value[length - 1]
 
-        changeMenuModelValue(tag.key as string, tag)
+        if (tag) {
+          changeMenuModelValue(tag.key, tag)
+        }
       }
     }
   }
@@ -216,7 +217,7 @@ export function useMenuTag() {
 
       if (index <= currentIndex) {
         if (getMenuKey.value !== option.key) {
-          changeMenuModelValue(option.key as string, option)
+          changeMenuModelValue(option.key, option)
         }
       }
     }
@@ -245,7 +246,7 @@ export function useMenuTag() {
 
       if (currentIndex <= index) {
         if (getMenuKey.value !== option.key) {
-          changeMenuModelValue(option.key as string, option)
+          changeMenuModelValue(option.key, option)
         }
       }
     }

src/layout/components/MenuTag/index.scss

@@ -41,6 +41,46 @@ $menuTagWrapperWidth: 76px;
   }
 }
 
+// 激活标签页关闭按钮样式
+.menu-tag {
+  .menu-tag__btn {
+    padding: 7px 10px;
+
+    .menu-tag__btn-icon--hidden {
+      display: none !important;
+    }
+
+    .menu-tag__btn-icon {
+      display: inline;
+      margin-left: 0;
+      width: 0;
+      height: 0;
+      transition: all 0.3s var(--r-bezier);
+      overflow: hidden;
+      opacity: 0;
+
+      & .ray-icon {
+        transform: translate(-1px, 0px);
+      }
+    }
+
+    &:hover {
+      .menu-tag__btn-icon {
+        width: 14px;
+        height: 14px;
+        margin-left: 5px;
+        font-size: 12px;
+        background-color: rgba(0, 0, 0, 0.12);
+        border-radius: 50%;
+        padding: 1px;
+        transition: all 0.3s var(--r-bezier);
+        opacity: 1;
+      }
+    }
+  }
+}
+
+// 设置 dropdown animate svg 尺寸
 .menu-tag__dropdown {
   & .menu-tag__icon {
     width: 18px;

src/layout/components/MenuTag/index.tsx

@@ -31,11 +31,17 @@
 
 import './index.scss'
 
-import { NScrollbar, NTag, NSpace, NLayoutHeader, NDropdown } from 'naive-ui'
+import {
+  NScrollbar,
+  NSpace,
+  NLayoutHeader,
+  NDropdown,
+  NButton,
+  NIcon,
+} from 'naive-ui'
 import RIcon from '@/components/RIcon/index'
 import RMoreDropdown from '@/components/RMoreDropdown/index'
 
-// import Reload from '@/icons/reload.svg?component'
 import CloseRight from '@/icons/close_right.svg?component'
 import CloseLeft from '@/icons/close_left.svg?component'
 
@@ -43,7 +49,6 @@ import { useMenuGetters, useMenuActions } from '@/store'
 import { uuid } from '@/utils/basic'
 import { hasClass } from '@/utils/element'
 import { queryElements } from '@use-utils/element'
-import { renderNode } from '@/utils/vue/index'
 import { useMainPage } from '@/hooks/template/index'
 import { useMenuTag } from '@/hooks/template/index'
 import { throttle } from 'lodash-es'
@@ -180,7 +185,7 @@ export default defineComponent({
     const handleTagClick = (option: AppMenuOption) => {
       actionState.actionDropdownShow = false
 
-      changeMenuModelValue(option.key as string, option)
+      changeMenuModelValue(option.key, option)
     }
 
     /**
@@ -194,9 +199,11 @@ export default defineComponent({
         const scrollContentElement = Array.from(
           scroll.childNodes,
         ) as HTMLElement[]
-        const findElement = scrollContentElement.find((el) =>
+        const findElement = scrollContentElement.find((el) => {
-          hasClass(el, 'n-scrollbar-container'),
+          const has = hasClass(el, 'n-scrollbar-container')
-        )
+
+          return has.value
+        })
 
         return findElement
       }
@@ -411,11 +418,12 @@ export default defineComponent({
         height: 28,
       },
       maximize,
+      getRootPath,
     }
   },
   render() {
-    const { iconConfig } = this
+    const { iconConfig, getRootPath, uuidScrollBar } = this
-    const { maximize, closeCurrentMenuTag } = this
+    const { maximize, closeCurrentMenuTag, scrollX, $t } = this
 
     return (
       <NLayoutHeader>
@@ -453,7 +461,7 @@ export default defineComponent({
               xScrollable
               ref="scrollRef"
               {...{
-                id: this.uuidScrollBar,
+                id: uuidScrollBar,
               }}
             >
               <NSpace
@@ -464,13 +472,12 @@ export default defineComponent({
                 justify="start"
               >
                 {this.getMenuTagOptions.map((curr, idx) => (
-                  <NTag
+                  <NButton
                     key={curr.key}
+                    class={['menu-tag__btn']}
                     strong
-                    closable={curr.closeable}
+                    secondary
-                    onClose={closeCurrentMenuTag.bind(this, idx)}
                     type={curr.key === this.getMenuKey ? 'primary' : 'default'}
-                    bordered={false}
                     {...{
                       onClick: this.handleTagClick.bind(this, curr),
                       onContextmenu: this.handleContextMenu.bind(this, idx),
@@ -479,8 +486,53 @@ export default defineComponent({
                       [this.MENU_TAG_DATA]: curr.path,
                     }}
                   >
-                    {renderNode(curr.breadcrumbLabel)}
+                    {{
-                  </NTag>
+                      default: () => (
+                        <>
+                          <span>
+                            {{
+                              default: () => {
+                                const {
+                                  breadcrumbLabel,
+                                  meta: { i18nKey },
+                                } = curr
+
+                                if (i18nKey) {
+                                  return $t(i18nKey)
+                                } else {
+                                  return breadcrumbLabel
+                                }
+                              },
+                            }}
+                          </span>
+                          {(curr.closeable ||
+                            this.getMenuTagOptions.length === 1) &&
+                          curr.key !== getRootPath ? (
+                            <NIcon
+                              class="menu-tag__btn-icon"
+                              {...{
+                                onMousedown: closeCurrentMenuTag.bind(
+                                  this,
+                                  idx,
+                                ),
+                              }}
+                            >
+                              <RIcon name="close" size="14" />
+                            </NIcon>
+                          ) : (
+                            // 默认使用一个空 NIcon 占位，避免不能正确的触发动画
+                            <NIcon
+                              class={[
+                                curr.key !== getRootPath
+                                  ? 'menu-tag__btn-icon'
+                                  : 'menu-tag__btn-icon--hidden',
+                              ]}
+                            />
+                          )}
+                        </>
+                      ),
+                    }}
+                  </NButton>
                 ))}
               </NSpace>
             </NScrollbar>
@@ -497,7 +549,7 @@ export default defineComponent({
                 width={iconConfig.width}
                 height={iconConfig.height}
                 customClassName="menu-tag__right-arrow"
-                onClick={this.scrollX.bind(this, 'right')}
+                onClick={scrollX.bind(this, 'right')}
               />
               <RIcon
                 name="fullscreen_fold"

src/layout/components/SiderBar/components/SettingDrawer/index.tsx

@@ -84,20 +84,23 @@ const SettingDrawer = defineComponent({
         value: 'opacity',
       },
     ]
+    const modelSwitchReactive = reactive({
+      getMenuTagSwitch: getMenuTagSwitch.value,
+      getBreadcrumbSwitch: getBreadcrumbSwitch.value,
+      getCopyrightSwitch: getCopyrightSwitch.value,
+      getContentTransition: getContentTransition.value,
+      getWatermarkSwitch: getWatermarkSwitch.value,
+    })
 
     return {
       modelShow,
       changePrimaryColor,
       getAppTheme,
       getPrimaryColorOverride,
-      getMenuTagSwitch,
       changeSwitcher,
-      getBreadcrumbSwitch,
-      getCopyrightSwitch,
       contentTransitionOptions,
-      getContentTransition,
       updateContentTransition,
-      getWatermarkSwitch,
+      modelSwitchReactive,
     }
   },
   render() {
@@ -127,7 +130,7 @@ const SettingDrawer = defineComponent({
               {$t('headerSettingOptions.ContentTransition')}
             </NDivider>
             <NSelect
-              v-model:value={this.getContentTransition}
+              v-model:value={this.modelSwitchReactive.getContentTransition}
               options={this.contentTransitionOptions}
               onUpdateValue={(value) => {
                 this.updateContentTransition(value)
@@ -139,7 +142,7 @@ const SettingDrawer = defineComponent({
             <NDescriptions labelPlacement="left" column={1}>
               <NDescriptionsItem label="多标签">
                 <NSwitch
-                  v-model:value={this.getMenuTagSwitch}
+                  v-model:value={this.modelSwitchReactive.getMenuTagSwitch}
                   onUpdateValue={(bool: boolean) =>
                     this.changeSwitcher(bool, 'menuTagSwitch')
                   }
@@ -147,7 +150,7 @@ const SettingDrawer = defineComponent({
               </NDescriptionsItem>
               <NDescriptionsItem label="面包屑">
                 <NSwitch
-                  v-model:value={this.getBreadcrumbSwitch}
+                  v-model:value={this.modelSwitchReactive.getBreadcrumbSwitch}
                   onUpdateValue={(bool: boolean) =>
                     this.changeSwitcher(bool, 'breadcrumbSwitch')
                   }
@@ -155,7 +158,7 @@ const SettingDrawer = defineComponent({
               </NDescriptionsItem>
               <NDescriptionsItem label="水印">
                 <NSwitch
-                  v-model:value={this.getWatermarkSwitch}
+                  v-model:value={this.modelSwitchReactive.getWatermarkSwitch}
                   onUpdateValue={(bool: boolean) =>
                     this.changeSwitcher(bool, 'watermarkSwitch')
                   }
@@ -163,7 +166,7 @@ const SettingDrawer = defineComponent({
               </NDescriptionsItem>
               <NDescriptionsItem label="版权信息">
                 <NSwitch
-                  v-model:value={this.getCopyrightSwitch}
+                  v-model:value={this.modelSwitchReactive.getCopyrightSwitch}
                   onUpdateValue={(bool: boolean) =>
                     this.changeSwitcher(bool, 'copyrightSwitch')
                   }

src/store/index.ts

@@ -19,22 +19,37 @@
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 // 导出仓库实例，不建议直接使用 store
-export { piniaSettingStore } from './modules/setting/index' // import { piniaSettingStore } from '@/store' 即可使用
+import { piniaSettingStore } from './modules/setting/index' // import { piniaSettingStore } from '@/store' 即可使用
-export { piniaMenuStore } from './modules/menu/index'
+import { piniaMenuStore } from './modules/menu/index'
-export { piniaSigningStore } from './modules/signing/index'
+import { piniaSigningStore } from './modules/signing/index'
-export { piniaKeepAliveStore } from './modules/keep-alive/index'
+import { piniaKeepAliveStore } from './modules/keep-alive/index'
 
 // 导出 getters, actions
-export { useMenuGetters, useMenuActions } from './hooks/useMenuStore'
+import { useMenuGetters, useMenuActions } from './hooks/useMenuStore'
-export { useSettingGetters, useSettingActions } from './hooks/useSettingStore'
+import { useSettingGetters, useSettingActions } from './hooks/useSettingStore'
-export { useSigningGetters, useSigningActions } from './hooks/useSigningStore'
+import { useSigningGetters, useSigningActions } from './hooks/useSigningStore'
-export {
+import {
   useKeepAliveGetters,
   useKeepAliveActions,
 } from './hooks/useKeepAliveStore'
 
 import type { App } from 'vue'
 
+export {
+  piniaSettingStore,
+  piniaMenuStore,
+  piniaSigningStore,
+  piniaKeepAliveStore,
+  useMenuGetters,
+  useMenuActions,
+  useSettingGetters,
+  useSettingActions,
+  useSigningGetters,
+  useSigningActions,
+  useKeepAliveGetters,
+  useKeepAliveActions,
+}
+
 /**
  *
  * 设置并且注册 pinia

src/store/modules/menu/index.ts

@@ -39,12 +39,8 @@ import { useVueRouter } from '@/hooks/web/index'
 import { throttle } from 'lodash-es'
 import { useKeepAliveActions } from '@/store'
 
-import type { AppRouteMeta, AppRouteRecordRaw } from '@/router/type'
+import type { AppRouteRecordRaw } from '@/router/type'
-import type {
+import type { AppMenuOption, MenuTagOptions } from '@/types/modules/app'
-  AppMenuOption,
-  MenuTagOptions,
-  AppMenuKey,
-} from '@/types/modules/app'
 import type { MenuState } from '@/store/modules/menu/type'
 
 export const piniaMenuStore = defineStore(

src/utils/basic.ts

@@ -1,8 +1,13 @@
+import printJs from 'print-js'
+import { unrefElement } from '@/utils/vue/index'
+import { watchEffectWithTarget } from '@/utils/vue/index'
+
 import type {
   ValidateValueType,
   DownloadAnyFileDataType,
   BasicTypes,
 } from '@/types/modules/utils'
+import type { BasicTarget, TargetValue } from '@/types/modules/vue'
 
 /**
  *
@@ -18,7 +23,10 @@ export const getAppEnvironment = () => {
  *
  * @param data 二进制流数据
  *
- * @returns format binary to base64 of the image
+ * 将 base64 格式文件转换为图片
+ *
+ * @example
+ * arrayBufferToBase64Image('base64') => Image
  */
 export const arrayBufferToBase64Image = (data: ArrayBuffer): string | null => {
   if (!data || data.byteLength) {
@@ -42,7 +50,10 @@ export const arrayBufferToBase64Image = (data: ArrayBuffer): string | null => {
  * @param base64 base64
  * @param fileName file name
  *
- * @remark 下载 base64 文件
+ * 该方法仅能下载 base64 文件，如果有其他的文件类型需要下载，请看 downloadAnyFile 方法
+ *
+ * @example
+ * downloadBase64File('base64', 'file name')
  */
 export const downloadBase64File = (base64: string, fileName: string) => {
   const link = document.createElement('a')
@@ -61,6 +72,10 @@ export const downloadBase64File = (base64: string, fileName: string) => {
  *
  * @param value 目标值
  * @param type 类型
+ *
+ * @example
+ * isValueType<string>('123', 'String') => true
+ * isValueType<object>({}, 'Object') => true
  */
 export const isValueType = <T extends BasicTypes>(
   value: unknown,
@@ -73,9 +88,11 @@ export const isValueType = <T extends BasicTypes>(
 
 /**
  *
- * @param length `uuid` 长度
+ * @param length uuid 长度
- * @param radix `uuid` 基数
+ * @param radix uuid 基数
- * @returns `uuid`
+ *
+ * @example
+ * uuid(8) => 'B8tGcl0FCKJkpO0V'
  */
 export const uuid = (length = 16, radix = 62) => {
   // 定义可用的字符集，即 0-9, A-Z, a-z
@@ -109,7 +126,11 @@ export const uuid = (length = 16, radix = 62) => {
  * @param data base64, Blob, ArrayBuffer type
  * @param fileName file name
  *
- * @remark 支持下载任意类型的文件，包括 base64, Blob, ArrayBuffer
+ * 支持下载任意类型的文件，包括 base64, Blob, ArrayBuffer
+ *
+ * @example
+ * downloadAnyFile('base64', 'file name')
+ * downloadAnyFile('Blob', 'file name')
  */
 export const downloadAnyFile = (
   data: DownloadAnyFileDataType,
@@ -167,3 +188,24 @@ export const downloadAnyFile = (
     }
   })
 }
+
+export function print<T extends BasicTarget<HTMLElement>>(
+  target: T,
+  options?: printJs.Configuration,
+) {
+  const element = computed(() => unrefElement(target))
+  const { printable, ...args } = options ?? {}
+
+  const $print = <T extends HTMLElement>(element: TargetValue<T>) => {
+    printJs({
+      ...args,
+      printable: element,
+    })
+  }
+
+  const watcher = watch(element, (ndata) => $print(ndata), {
+    immediate: true,
+  })
+
+  watchEffectWithTarget(watcher)
+}

src/utils/element.ts

@@ -9,7 +9,7 @@ import type {
   ElementSelector,
 } from '@/types/modules/utils'
 import type { EventListenerTarget } from '@/types/modules/utils'
-import type { BasicTarget } from '@/types/modules/vue'
+import type { BasicTarget, TargetValue } from '@/types/modules/vue'
 
 /**
  *
@@ -28,13 +28,21 @@ export const on = (
 ) => {
   const targetElement = computed(() => unrefElement(target, window))
 
-  const update = () => {
+  const update = <
-    if (targetElement.value && event && handler) {
+    T extends TargetValue<HTMLElement | Element | Window | Document>,
-      targetElement.value.addEventListener(event, handler, useCapture)
+  >(
+    element: T,
+  ) => {
+    if (element && event && handler) {
+      element.addEventListener(event, handler, useCapture)
     }
   }
 
-  watchEffectWithTarget(update)
+  const watcher = watch(targetElement, (ndata) => update(ndata), {
+    immediate: true,
+  })
+
+  watchEffectWithTarget(watcher)
 }
 
 /**
@@ -54,13 +62,21 @@ export const off = (
 ) => {
   const targetElement = computed(() => unrefElement(target, window))
 
-  const update = () => {
+  const update = <
-    if (targetElement.value && event && handler) {
+    T extends TargetValue<HTMLElement | Element | Window | Document>,
-      targetElement.value.removeEventListener(event, handler, useCapture)
+  >(
+    element: T,
+  ) => {
+    if (element && event && handler) {
+      element.removeEventListener(event, handler, useCapture)
     }
   }
 
-  watchEffectWithTarget(update)
+  const watcher = watch(targetElement, (ndata) => update(ndata), {
+    immediate: true,
+  })
+
+  watchEffectWithTarget(watcher)
 }
 
 /**
@@ -68,7 +84,11 @@ export const off = (
  * @param target Target element dom
  * @param className 所需添加className，可: 'xxx xxx' | 'xxx' 格式添加(参考向元素绑定 css 语法)
  *
- * @remark 添加元素className(可: 'xxx xxx' | 'xxx'格式添加)
+ * 添加元素className(可: 'xxx xxx' | 'xxx'格式添加)
+ *
+ * @example
+ * targetDom 当前 class: a-class b-class
+ * addClass(targetDom, 'c-class') => a-class b-class c-class
  */
 export const addClass = (
   target: BasicTarget<Element | HTMLElement | SVGAElement>,
@@ -76,19 +96,25 @@ export const addClass = (
 ) => {
   const targetElement = computed(() => unrefElement(target))
 
-  const update = () => {
+  const update = (
-    if (targetElement.value) {
+    element: TargetValue<Element | HTMLElement | SVGAElement>,
+  ) => {
+    if (element) {
       const classes = className.trim().split(' ')
 
       classes.forEach((item) => {
         if (item) {
-          targetElement.value!.classList.add(item)
+          element.classList.add(item)
         }
       })
     }
   }
 
-  watchEffectWithTarget(update)
+  const watcher = watch(targetElement, (ndata) => update(ndata), {
+    immediate: true,
+  })
+
+  watchEffectWithTarget(watcher)
 }
 
 /**
@@ -96,8 +122,12 @@ export const addClass = (
  * @param target Target element dom
  * @param className 所需删除className，可: 'xxx xxx' | 'xxx' 格式删除(参考向元素绑定 css 语法)
  *
- * @remark 删除元素className(可: 'xxx xxx' | 'xxx'格式删除)
+ * 删除元素className(可: 'xxx xxx' | 'xxx'格式删除)
- * @remark 如果输入值为 removeAllClass 则会删除该元素所有 class name
+ * 如果输入值为 removeAllClass 则会删除该元素所有 class name
+ *
+ * @example
+ * targetDom 当前 class: a-class b-class
+ * removeClass(targetDom, 'a-class') => b-class
  */
 export const removeClass = (
   target: BasicTarget<Element | HTMLElement | SVGAElement>,
@@ -105,10 +135,12 @@ export const removeClass = (
 ) => {
   const targetElement = computed(() => unrefElement(target))
 
-  const update = () => {
+  const update = (
-    if (targetElement.value) {
+    element: TargetValue<Element | HTMLElement | SVGAElement>,
+  ) => {
+    if (element) {
       if (className === 'removeAllClass') {
-        const classList = targetElement.value.classList
+        const classList = element.classList
 
         classList.forEach((curr) => classList.remove(curr))
       } else {
@@ -116,14 +148,18 @@ export const removeClass = (
 
         classes.forEach((item) => {
           if (item) {
-            targetElement.value!.classList.remove(item)
+            element.classList.remove(item)
           }
         })
       }
     }
   }
 
-  watchEffectWithTarget(update)
+  const watcher = watch(targetElement, (ndata) => update(ndata), {
+    immediate: true,
+  })
+
+  watchEffectWithTarget(watcher)
 }
 
 /**
@@ -131,25 +167,37 @@ export const removeClass = (
  * @param target Target element dom
  * @param className 查询元素是否含有此className，可: 'xxx xxx' | 'xxx' 格式查询(参考向元素绑定 css 语法)
  *
- * @returns 返回boolean
+ * 元素是否含有某个className(可: 'xxx xxx' | 'xxx' 格式查询)
  *
- * @remark 元素是否含有某个className(可: 'xxx xxx' | 'xxx' 格式查询)
+ * @example
+ * hasClass(targetDom, 'matchClassName') => Ref<true> | Ref<false>
  */
-export const hasClass = (target: BasicTarget, className: string) => {
+export const hasClass = (target: BasicTarget<Element>, className: string) => {
-  const targetElement = unrefElement(target)
+  const targetElement = computed(() => unrefElement(target))
+  const hasClassRef = ref(false)
 
-  if (!targetElement) {
+  const update = <E extends TargetValue<Element>>(element: E) => {
-    return false
+    if (!element) {
+      hasClassRef.value = false
+    } else {
+      const elementClassName = element.className
+
+      const classes = className
+        .trim()
+        .split(' ')
+        .filter((item: string) => item !== '')
+
+      hasClassRef.value = elementClassName.includes(classes.join(' '))
+    }
   }
 
-  const elementClassName = targetElement.className
+  const watcher = watch(targetElement, (ndata) => update(ndata), {
+    immediate: true,
+  })
 
-  const classes = className
+  watchEffectWithTarget(watcher)
-    .trim()
-    .split(' ')
-    .filter((item: string) => item !== '')
 
-  return elementClassName.includes(classes.join(' '))
+  return hasClassRef
 }
 
 /**
@@ -157,7 +205,6 @@ export const hasClass = (target: BasicTarget, className: string) => {
  * @param target Target element dom
  * @param styles 所需绑定样式(如果为字符串, 则必须以分号结尾每个行内样式描述)
  *
- *
  * @example
  * style of string
  * ```
@@ -180,14 +227,13 @@ export const addStyle = (
   styles: PartialCSSStyleDeclaration | string,
 ) => {
   const targetElement = computed(() => unrefElement(target))
-
-  if (!targetElement.value) {
-    return
-  }
-
   let styleObj: PartialCSSStyleDeclaration
 
-  const update = () => {
+  const update = (element: TargetValue<HTMLElement | SVGAElement>) => {
+    if (!element) {
+      return
+    }
+
     if (isValueType<string>(styles, 'String')) {
       styleObj = styles.split(';').reduce((pre, curr) => {
         const [key, value] = curr.split(':').map((s) => s.trim())
@@ -205,13 +251,17 @@ export const addStyle = (
     Object.keys(styleObj).forEach((key) => {
       const value = styleObj[key]
 
-      if (key in targetElement.value!.style) {
+      if (key in element!.style) {
-        targetElement.value!.style[key] = value
+        element!.style[key] = value
       }
     })
   }
 
-  watchEffectWithTarget(update)
+  const watcher = watch(targetElement, (ndata) => update(ndata), {
+    immediate: true,
+  })
+
+  watchEffectWithTarget(watcher)
 }
 
 /**
@@ -220,6 +270,7 @@ export const addStyle = (
  * @param styles 所需卸载样式
  *
  * 当你发现不能正常的移除某些样式的时候，应该考虑是否是样式表兼容问题
+ *
  * @example
  * removeStyle(['zIndex', 'z-index'])
  */
@@ -229,17 +280,21 @@ export const removeStyle = (
 ) => {
   const targetElement = computed(() => unrefElement(target))
 
-  if (!targetElement.value) {
+  const update = (element: TargetValue<HTMLElement | SVGAElement>) => {
-    return
+    if (!element) {
-  }
+      return
+    }
 
-  const update = () => {
     styles.forEach((curr) => {
-      targetElement.value!.style.removeProperty(curr)
+      element.style.removeProperty(curr)
     })
   }
 
-  watchEffectWithTarget(update)
+  const watcher = watch(targetElement, (ndata) => update(ndata), {
+    immediate: true,
+  })
+
+  watchEffectWithTarget(watcher)
 }
 
 /**
@@ -249,6 +304,9 @@ export const removeStyle = (
  * @returns 转换后的 rgba 颜色值
  *
  * @remark 将任意颜色值转为 rgba
+ *
+ * @example
+ * colorToRgba('#123632', 0.8) => rgba(18, 54, 50, 0.8)
  */
 export const colorToRgba = (color: string, alpha = 1) => {
   const hexPattern = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i

src/utils/vue/index.ts

@@ -1,5 +1,7 @@
-export { call } from './call'
+import { call } from './call'
-export { unrefElement } from './unrefElement'
+import { unrefElement } from './unrefElement'
-export { renderNode } from './renderNode'
+import { renderNode } from './renderNode'
-export { effectDispose } from './effectDispose'
+import { effectDispose } from './effectDispose'
-export { watchEffectWithTarget } from './watchEffectWithTarget'
+import { watchEffectWithTarget } from './watchEffectWithTarget'
+
+export { call, unrefElement, renderNode, effectDispose, watchEffectWithTarget }

vite.config.ts

@@ -47,9 +47,21 @@ export default defineConfig(async ({ mode }) => {
       rollupOptions: {
         output: {
           manualChunks: (id) => {
-            if (id.includes('node_modules')) {
+            const isUtils = () => id.includes('src/utils/')
-              const index = id.includes('pnpm') ? 1 : 0
+            const isHooks = () =>
+              id.includes('src/hooks/template') || id.includes('src/hooks/web')
+            const isNodeModules = () => id.includes('node_modules')
+            const index = id.includes('pnpm') ? 1 : 0
 
+            if (isUtils()) {
+              return 'utils'
+            }
+
+            if (isHooks()) {
+              return 'hooks'
+            }
+
+            if (isNodeModules()) {
               return id
                 .toString()
                 .split('node_modules/')[1]

vite.pliugin.config.ts

@@ -155,6 +155,7 @@ export default function (mode: string): PluginOption[] {
       customDomId: '__svg__icons__dom__',
     }),
     viteCDNPlugin({
+      // modules 顺序 vue, vue-demi 必须保持当前顺序加载，否则会出现加载错误问题
       modules: [
         'vue',
         'vue-demi',