version: v5.0.9

.nvmrc

@@ -1 +1 @@
-v22.11.0
+v22.12.0

CHANGELOG.md

@@ -1,4 +1,16 @@
-# CHANGE LOG
+## 5.0.9
+
+## Feats
+
+- `RDraggableCard` 组件
+  - 新增 `restrictionElement` 配置项，允许设置拖拽限制元素
+  - 新增 `padding` 配置项，允许配置元素初始化位置的间隔值
+  - `defaultPosition` 配置项新增 `top-left`, `top-right`, `bottom-left`, `bottom-right` 配置项，允许配置元素初始化位置
+- `RTablePro` 组件
+  - 现在会自动删除重复的请求参数
+  - 暴露 `resetTablePagination` 方法，允许手动重置表格分页
+- `logout` 方法现在会在执行的时候，清空所有的 `router-route`
+- 更新依赖为主流版本
 
 ## 5.0.8
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "5.0.8",
+  "version": "5.0.9",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || ^20.0.0 || >=22.0.0",
@@ -46,7 +46,7 @@
     "jsbarcode": "3.11.6",
     "lodash-es": "^4.17.21",
     "mockjs": "1.1.0",
-    "naive-ui": "^2.40.3",
+    "naive-ui": "^2.40.4",
     "pinia": "^2.3.0",
     "pinia-plugin-persistedstate": "^4.1.3",
     "print-js": "^1.6.0",
@@ -58,54 +58,55 @@
     "vue3-next-qrcode": "2.0.10"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
+    "@amap/amap-jsapi-types": "0.0.15",
-    "@commitlint/config-conventional": "^19.2.2",
+    "@ant-design/icons-vue": "7.0.1",
-    "@eslint/eslintrc": "3.1.0",
+    "@commitlint/cli": "19.3.0",
-    "@eslint/js": "9.11.0",
+    "@commitlint/config-conventional": "19.2.2",
     "@interactjs/types": "1.10.27",
-    "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@intlify/unplugin-vue-i18n": "4.0.0",
-    "@types/crypto-js": "^4.2.2",
+    "@types/crypto-js": "4.2.2",
     "@types/jsbarcode": "3.11.4",
-    "@types/lodash-es": "^4.17.12",
+    "@types/lodash-es": "4.17.12",
     "@types/mockjs": "1.0.10",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@types/three": "0.169.0",
-    "@typescript-eslint/parser": "^8.16.0",
+    "@typescript-eslint/eslint-plugin": "8.18.2",
-    "@vitejs/plugin-vue": "^5.1.0",
+    "@typescript-eslint/parser": "8.18.2",
-    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitejs/plugin-vue": "5.2.1",
+    "@vitejs/plugin-vue-jsx": "4.1.1",
     "@vitest/ui": "1.5.2",
-    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-prettier": "10.1.0",
-    "@vue/eslint-config-typescript": "^14.1.4",
+    "@vue/eslint-config-typescript": "14.2.0",
     "@vue/test-utils": "2.4.6",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "10.4.20",
-    "depcheck": "^1.4.7",
+    "depcheck": "1.4.7",
-    "eslint": "^9.11.0",
+    "eslint": "9.11.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint-plugin-vue": "9.32.0",
-    "globals": "15.12.0",
+    "globals": "15.14.0",
     "happy-dom": "14.12.3",
     "husky": "8.0.3",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "15.2.2",
-    "postcss": "^8.4.49",
+    "postcss": "8.4.49",
     "postcss-px-to-viewport-8-with-include": "1.2.2",
-    "prettier": "^3.3.2",
+    "prettier": "3.3.2",
     "rollup-plugin-gzip": "4.0.1",
-    "sass": "1.77.1",
+    "sass": "1.83.0",
-    "svg-sprite-loader": "^6.0.11",
+    "svg-sprite-loader": "6.0.11",
-    "typescript": "^5.6.3",
+    "typescript": "5.6.3",
-    "unplugin-auto-import": "^0.18.2",
+    "unplugin-auto-import": "0.19.0",
-    "unplugin-vue-components": "^0.27.4",
+    "unplugin-vue-components": "0.28.0",
-    "vite": "^6.0.4",
+    "vite": "6.0.7",
-    "vite-bundle-analyzer": "0.9.4",
+    "vite-bundle-analyzer": "0.15.2",
     "vite-plugin-cdn2": "1.1.0",
-    "vite-plugin-ejs": "^1.7.0",
+    "vite-plugin-ejs": "1.7.0",
     "vite-plugin-eslint": "1.8.1",
-    "vite-plugin-inspect": "^0.8.4",
+    "vite-plugin-inspect": "0.8.4",
-    "vite-plugin-mock-dev-server": "1.8.0",
+    "vite-plugin-mock-dev-server": "1.8.3",
-    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-svg-icons": "2.0.1",
-    "vite-svg-loader": "^5.1.0",
+    "vite-svg-loader": "5.1.0",
     "vitest": "2.0.5",
-    "vue-tsc": "^2.1.10"
+    "vue-tsc": "2.1.10"
   },
   "description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
   "main": "index.ts",

src/components/base/RDraggableCard/DraggableCard.tsx

@@ -5,18 +5,25 @@ import { Teleport, Transition } from 'vue'
 
 import interact from 'interactjs'
 import { cardProps } from 'naive-ui'
-import { unrefElement, completeSize, queryElements } from '@/utils'
+import { unrefElement, completeSize, queryElements, isValueType } from '@/utils'
-import { useTemplateRef } from 'vue'
 
 import type { VNode } from 'vue'
+import type { MaybeElement, MaybeRefOrGetter } from '@vueuse/core'
 
 type RestrictRectOptions = Parameters<typeof interact.modifiers.restrictRect>[0]
 
-type Position = {
+type Padding = {
   x: number
   y: number
 }
 
+type Position =
+  | Padding
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+
 const props = {
   ...cardProps,
   /**
@@ -27,8 +34,8 @@ const props = {
    * @default body
    */
   restrictionElement: {
-    type: [String, HTMLElement, Function] as PropType<
+    type: [String, HTMLElement, Function, Object] as PropType<
-      string | HTMLElement | (() => VNode)
+      string | HTMLElement | (() => VNode) | MaybeRefOrGetter<MaybeElement>
     >,
     default: 'body',
   },
@@ -62,7 +69,7 @@ const props = {
    * @default { x: 0, y: 0 }
    */
   defaultPosition: {
-    type: Object as PropType<Position>,
+    type: [Object, String] as PropType<Position>,
     default: () => ({
       x: 0,
       y: 0,
@@ -101,6 +108,18 @@ const props = {
     type: Boolean,
     default: false,
   },
+  /**
+   *
+   * @description
+   * 默认的边距。
+   * 设置该属性后，卡片首次出现的位置会根据该属性进行偏移。
+   *
+   * @default undefined
+   */
+  padding: {
+    type: Object as PropType<Padding>,
+    default: void 0,
+  },
 }
 
 export default defineComponent({
@@ -110,7 +129,8 @@ export default defineComponent({
     const cardRef = useTemplateRef<HTMLElement>('cardRef')
     let interactInst: ReturnType<typeof interact> | null = null
     const position = {
-      ...props.defaultPosition,
+      x: 0,
+      y: 0,
     }
     const CONTAINER_ID = 'draggable-card-container'
     const cssVars = computed(() => {
@@ -142,11 +162,15 @@ export default defineComponent({
 
       if (Array.isArray(re)) {
         restrictionElement = re[0]
-      } else if (typeof re === 'function') {
+      } else {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         restrictionElement = unrefElement<HTMLElement>(re as any) as HTMLElement
-      } else {
+      }
-        restrictionElement = re
+
+      if (!restrictionElement) {
+        throw new Error(
+          '[RDraggableCard]: if set restrictionElement, it must be a HTMLElement or a ref of HTMLElement.',
+        )
       }
 
       return {
@@ -155,6 +179,54 @@ export default defineComponent({
       }
     }
 
+    const getPosition = (containerRect: DOMRect, cardRect: DOMRect) => {
+      const { defaultPosition, padding } = props
+      const { x: paddingX = 0, y: paddingY = 0 } = padding ?? {}
+      const {
+        x: containerX,
+        y: containerY,
+        width: containerWidth,
+        height: containerHeight,
+      } = containerRect
+      const { width: cardWidth, height: cardHeight } = cardRect
+
+      if (typeof defaultPosition === 'string') {
+        switch (defaultPosition) {
+          case 'top-left':
+            return { x: paddingX + containerX, y: paddingY + containerY }
+
+          case 'top-right':
+            return {
+              x: containerWidth - cardWidth - paddingX + containerX,
+              y: paddingY + containerY,
+            }
+
+          case 'bottom-left':
+            return {
+              x: paddingX + containerX,
+              y: containerHeight - cardHeight - paddingY + containerY,
+            }
+
+          case 'bottom-right':
+            return {
+              x: containerWidth - cardWidth - paddingX + containerX,
+              y: containerHeight - cardHeight - paddingY + containerY,
+            }
+
+          // 默认为左上角
+          default:
+            return { x: paddingX + containerX, y: paddingY + containerY }
+        }
+      } else {
+        const { x: defaultX, y: defaultY } = defaultPosition
+
+        return {
+          x: defaultX + containerX + paddingX,
+          y: defaultY + containerY + paddingY,
+        }
+      }
+    }
+
     const setupDraggable = () => {
       const { card, restrictionElement } = getDom()
 
@@ -175,13 +247,12 @@ export default defineComponent({
 
       if (restrictionRect && !isSetup) {
         // 计算偏移位置
-        const offsetX = restrictionRect.x + position.x
+        const p = getPosition(restrictionRect, card.getBoundingClientRect())
-        const offsetY = restrictionRect.y + position.y
 
         // 设置初始位置
-        card.style.transform = `translate(${offsetX}px, ${offsetY}px)`
+        card.style.transform = `translate(${p.x}px, ${p.y}px)`
-        position.x = offsetX
+        position.x = p.x
-        position.y = offsetY
+        position.y = p.y
       }
 
       interactInst = interact(card)

src/components/pro/RTablePro/src/TablePro.tsx

@@ -2,7 +2,7 @@ import { RTable } from '@/components'
 
 import props from './props'
 import { useTable } from '@/components'
-import { call } from '@/utils'
+import { call, removeDuplicateKeys } from '@/utils'
 import { usePagination } from '@/hooks'
 
 import type { TablePagination, TableRequestConfig, TableProInst } from './types'
@@ -62,7 +62,8 @@ export default defineComponent({
     const combineRequestParams = (extraConfig?: TableRequestConfig) => {
       const config = Object.assign({}, props.requestConfig, extraConfig)
 
-      const { params, formatRangeTime } = config
+      const { formatRangeTime } = config
+      let params = config.params || {}
 
       // 转换时间范围，该功能仅支持 NDatePicker range 模式参数
       if (formatRangeTime?.length && params) {
@@ -84,6 +85,8 @@ export default defineComponent({
         })
       }
 
+      params = removeDuplicateKeys(params)
+
       const requestParams = Object.assign({}, params, {
         page: getPage(),
         pageSize: getPageSize(),
@@ -139,6 +142,7 @@ export default defineComponent({
           filter,
           getCurrentTableRequestParams:
             combineRequestParams as TableProInst['getCurrentTableRequestParams'],
+          resetTablePagination: resetPagination,
         })
       }
     })

src/components/pro/RTablePro/src/hooks/useTablePro.ts

@@ -1,7 +1,6 @@
 import type { Recordable } from '@/types'
 import type { TableProInst, TableRequestConfig } from '../types'
 import type {
-  RTableInst,
   CsvOptionsType,
   FilterState,
   ScrollToOptions,
@@ -152,6 +151,14 @@ export const useTablePro = () => {
     // @ts-ignore
     getTableProInstance().getCurrentTableRequestParams.call(null, extraConfig)
 
+  /**
+   *
+   * @description
+   * 重置表格分页。
+   */
+  const resetTablePagination = () =>
+    getTableProInstance().resetTablePagination.call(null)
+
   return [
     register,
     {
@@ -167,6 +174,7 @@ export const useTablePro = () => {
       runTableRequest,
       print,
       getCurrentTableRequestParams,
+      resetTablePagination,
     },
   ] as const
 }

src/components/pro/RTablePro/src/types.ts

@@ -72,4 +72,10 @@ export interface TableProInst extends Omit<RTableInst, 'getTableInstance'> {
   getCurrentTableRequestParams: <T = Recordable>(
     extraConfig?: TableRequestConfig<T>,
   ) => TableRequestConfig<T>['params'] & Recordable
+  /**
+   *
+   * @description
+   * 重置表格分页。
+   */
+  resetTablePagination: () => void
 }

src/layout/components/SiderBar/components/SettingDrawer/constant.ts

@@ -3,7 +3,7 @@ import type { InjectionKey, Reactive } from 'vue'
 import type { DebouncedFunc } from 'lodash-es'
 
 interface SettingDrawerInjectKey extends SettingState {
-  throttleSetupAppMenu: DebouncedFunc<() => void>
+  throttleSetupAppMenu: DebouncedFunc<() => Promise<void>>
 }
 
 export const SETTING_DRAWER_INJECT_KEY: Reactive<

src/store/modules/menu/index.ts

@@ -465,7 +465,7 @@ export const piniaMenuStore = defineStore(
     persist: {
       key: APP_CATCH_KEY.appPiniaMenuStore,
       storage: window.localStorage,
-      pick: ['breadcrumbOptions', 'menuKey', 'collapsed'],
+      pick: ['menuKey', 'collapsed'],
     },
   },
 )

src/store/modules/signing/index.ts

@@ -22,6 +22,7 @@ import type {
 export const piniaSigningStore = defineStore(
   'signing',
   () => {
+    const { clearRoutes, replace } = useRouter()
     const state = reactive({
       /**
        *
@@ -95,7 +96,8 @@ export const piniaSigningStore = defineStore(
       closeAll()
 
       if (toSigning) {
-        window.location.replace('#/')
+        clearRoutes()
+        replace('/')
 
         setTimeout(() => {
           window.location.reload()

src/styles/base.scss

@@ -1,7 +1,7 @@
-@import '@/styles/animate.scss';
+@use '@/styles/animate.scss' as *;
-@import '@/styles/root.scss';
+@use '@/styles/root.scss' as *;
-@import '@/styles/naive.scss';
+@use '@/styles/naive.scss' as *;
-@import '@/styles/print-css.scss';
+@use '@/styles/print-css.scss' as *;
 
 body,
 h1,

src/utils/index.ts

@@ -9,3 +9,4 @@ export * from './vue'
 export * from './app'
 export { positionSelectedMenuItem }
 export { updateObjectValue } from './update-object-value'
+export { removeDuplicateKeys } from './remove-duplicate-keys'

src/utils/remove-duplicate-keys.ts

@@ -0,0 +1,26 @@
+import { reduce } from 'lodash-es'
+
+import type { Recordable } from '@/types'
+
+/**
+ *
+ * @param targetObject target object
+ *
+ * @description
+ * 移除对象中重复的键。
+ * 以最后一次出现的键为准。
+ *
+ * @example
+ * removeDuplicateKeys({ a: 1, b: 2, a: 3 }) // { a: 3, b: 2 }
+ */
+export const removeDuplicateKeys = <T extends Recordable>(targetObject: T) => {
+  return reduce(
+    Object.entries(targetObject).reverse(),
+    (result, [key, value]) => {
+      result[key as keyof T] = value
+
+      return result
+    },
+    {} as T,
+  )
+}

src/views/dashboard/index.tsx

@@ -8,6 +8,7 @@ import {
   NFlex,
   NP,
   NH6,
+  NText,
 } from 'naive-ui'
 import { RIcon } from '@/components'
 import AppShareLink from '@/app-components/app/AppShareLink'
@@ -48,12 +49,16 @@ const Dashboard = defineComponent({
         des: () => (
           <NFlex align="center">
             如果有希望补充的功能可以在
-            <a
+            <NText
+              as="a"
               class="dashboard-link"
-              href="https://github.com/XiaoDaiGua-Ray/ray-template"
+              type="primary"
+              {...{
+                href: 'https://github.com/XiaoDaiGua-Ray/ray-template/issues',
+              }}
             >
               GitHub
-            </a>
+            </NText>
             提一个 Issues
           </NFlex>
         ),

src/views/demo/draggable-card.tsx

@@ -5,30 +5,40 @@ export default defineComponent({
   name: 'DraggableCardDemo',
   setup() {
     const card3 = ref(false)
+    const domRef = useTemplateRef<HTMLElement>('domRef')
 
     return {
       card3,
+      domRef,
     }
   },
   render() {
-    const { card3 } = this
+    const { card3, domRef } = this
 
     return (
       <div>
+        <div
+          ref="domRef"
+          style={{
+            width: '100%',
+            height: '400px',
+            backgroundColor: 'red',
+          }}
+        ></div>
         <RDraggableCard animation title="Body">
           我被限制在 body 中。
         </RDraggableCard>
         {card3 ? (
           <RDraggableCard
             animation
-            title="Layout Container"
+            title="Custom Container"
-            restrictionElement=".r-layout-full__viewer-content"
+            restrictionElement={domRef}
             closable
             onClose={() => (this.card3 = false)}
           >
             {{
               default: () =>
-                '我被限制在 Layout Container 中。并且我支持 NCard 的所有配置与插槽。',
+                '我被限制在红色区域中。并且我支持 NCard 的所有配置与插槽。',
               'header-extra': () => '其实我就是 NCard 封装的',
               footer: () => '我支持 footer 插槽',
               action: () => '我支持 action 插槽',

unplugin/.eslintrc-auto-import.json

@@ -79,6 +79,13 @@
     "watchSyncEffect": true,
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
-    "ExtractPublicPropTypes": true
+    "ExtractPublicPropTypes": true,
+    "DirectiveBinding": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "onWatcherCleanup": true,
+    "useId": true,
+    "useModel": true,
+    "useTemplateRef": true
   }
 }

unplugin/auto-imports.d.ts

@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -46,6 +47,7 @@ declare global {
   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const provide: typeof import('vue')['provide']
   const reactive: typeof import('vue')['reactive']
   const readonly: typeof import('vue')['readonly']
@@ -66,10 +68,13 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
   const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
@@ -78,6 +83,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

vite-helper/mixin-css.ts

@@ -13,7 +13,7 @@ export const mixinCss = (options?: string[]) => {
   }
 
   const mixinString = options.reduce((pre, curr) => {
-    const temp = `@import "${curr}";`
+    const temp = `@use "${curr}" as *;`
 
     return (pre += temp)
   }, '')