version: v5.1.0

fix: 一些已知问题修复
Merge pull request #30 from admover/patch-3
2025-04-05 19:42:07 +08:00 · 2025-02-25 17:38:30 +08:00 · 2025-01-19 10:38:13 +08:00 · 2025-01-15 20:17:19 +08:00 · 2025-01-15 17:36:05 +08:00 · 2025-01-15 16:32:36 +08:00
66 changed files with 2894 additions and 1881 deletions
--- a/.nvmrc
+++ b/.nvmrc
@ -1 +1 @@
-v22.11.0
+v22.12.0
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,4 +1,57 @@
-# CHANGE LOG
+## 5.1.0
+
+## Feats
+
+- 主流依赖更新
+- `RDraggableCard` 组件 `defaultPosition` 配置项新增 `center`, `top-center`, `bottom-center` 配置项，并且该配置项支持动态更新了
+- `RDraggableCard` 组件容器 `id` 由 `draggable-card-container` 变更为 `r-draggable-card-container`
+- `views/demo` 包命名调整
+
+## Fixes
+
+- 修复 `RDraggableCard` 组件设置 `dad` 为 `false` 时，初始化位置错误的问题
+
+## 5.0.10
+
+## Feats
+
+- `RDraggableCard` 组件现在不会在抛出获取 `dom` 失败的异常，因为可能存在异步组件加载的可能
+- `RModal`, `useModal` 方法，移除 `dad` 相关所有配置，使用 `draggable` 配置项替代
+- 刷新的样式现在会跟随主题变化
+- 锁屏密码现在会进行加密存储，并且会进行校验处理了
+- 新增 `decrypt`, `decrypt` 方法，放置于 `utils/c` 包中
+
+## Fixes
+
+- 修复因为错误的注册全局事件，导致事件污染的问题，但是默认的 `ctrl + k`, `cmd + k` 快捷键依旧保留为全局按键
+
+## 5.0.9
+
+## Feats
+
+- `RDraggableCard` 组件
+  - 新增 `restrictionElement` 配置项，允许设置拖拽限制元素
+  - 新增 `padding` 配置项，允许配置元素初始化位置的间隔值
+  - `defaultPosition` 配置项新增 `top-left`, `top-right`, `bottom-left`, `bottom-right` 配置项，允许配置元素初始化位置
+- `RTablePro` 组件
+  - 现在会自动删除重复的请求参数
+  - 暴露 `resetTablePagination` 方法，允许手动重置表格分页
+- `logout` 方法现在会在执行的时候，清空所有的 `router-route`
+- 更新依赖为主流版本
+
+## 5.0.8
+
+## Feats
+
+- 修改 `menuTagOptions` 的缓存方式，现在会缓存至 `sessionStorage` 中，兼容可能多系统版本部署与多开系统页面标签页冲突的问题
+- 新增 `RDraggableCard` 组件
+- 更新 `vite` 版本至 `6.0.4`
+
+## Fixes
+
+- 修复 `updateObjectValue` 方法对于对象值判断不准确的问题
+- 修复 `SettingDrawer` 组件初始化时，没有正确初始化 `settingStore` 的问题
+- 修复 `RTable` 组件在未设置 `title` 与 `tool` 为 `false` 时，导致 `headerStyle` 样式会高一些的问题

 ## 5.0.7

--- a/index.html
+++ b/index.html
@ -15,6 +15,27 @@
      --preloading-title-color: <%= preloadingConfig.titleColor %>;
      --ray-theme-primary-fade-color: <%= appPrimaryColor.primaryFadeColor %>;
      --ray-theme-primary-color: <%= appPrimaryColor.primaryColor %>;
+      --global-loading-bg-color: #ffffff;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      #pre-loading-animation {
+        background-color: var(--global-loading-bg-color);
+      }
+    }
+
+    @media (prefers-color-scheme: light) {
+      #pre-loading-animation {
+        background-color: var(--global-loading-bg-color);
+      }
+    }
+
+    html.dark #pre-loading-animation {
+      background-color: var(--global-loading-bg-color);
+    }
+
+    html.light #pre-loading-animation {
+      background-color: var(--global-loading-bg-color);
    }

    #pre-loading-animation {
@ -23,13 +44,9 @@
      right: 0;
      top: 0;
      bottom: 0;
-      background-color: #ffffff;
      color: var(--preloading-title-color);
      text-align: center;
-    }
-
-    .ray-template--dark #pre-loading-animation {
-      background-color: #2a3146;
+      background-color: var(--global-loading-bg-color);
    }

    #pre-loading-animation .pre-loading-animation__wrapper {
@ -95,6 +112,18 @@
      }
    }
  </style>
+  <script>
+    ;(function () {
+      const html = document.documentElement
+      const store = window.localStorage.getItem('piniaSettingStore')
+      const { _appTheme = false } = store ? JSON.parse(store) : {}
+      const loadingBgColor = _appTheme ? '#1c1e23' : '#ffffff'
+
+      html.classList.add(_appTheme ? 'dark' : 'light')
+      html.style.setProperty('--global-loading-bg-color', loadingBgColor)
+      html.style.setProperty('background-color', loadingBgColor)
+    })()
+  </script>
  <body>
    <div id="app"></div>
    <div id="pre-loading-animation">
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "ray-template",
  "private": false,
-  "version": "5.0.7",
+  "version": "5.1.0",
  "type": "module",
  "engines": {
    "node": "^18.0.0 || ^20.0.0 || >=22.0.0",
@ -33,79 +33,81 @@
    ]
  },
  "dependencies": {
-    "@logicflow/core": "2.0.6",
-    "@logicflow/extension": "2.0.10",
-    "@vueuse/core": "^12.0.0",
+    "@logicflow/core": "2.0.10",
+    "@logicflow/extension": "2.0.14",
+    "@vueuse/core": "^12.4.0",
    "axios": "^1.7.9",
    "clipboard": "^2.0.11",
+    "crypto-js": "4.2.0",
    "currency.js": "^2.0.4",
    "dayjs": "^1.11.13",
-    "echarts": "^5.5.1",
+    "echarts": "^5.6.0",
    "html-to-image": "1.11.11",
    "interactjs": "1.10.27",
    "jsbarcode": "3.11.6",
    "lodash-es": "^4.17.21",
    "mockjs": "1.1.0",
-    "naive-ui": "^2.40.3",
+    "naive-ui": "^2.41.0",
    "pinia": "^2.3.0",
-    "pinia-plugin-persistedstate": "^4.1.3",
+    "pinia-plugin-persistedstate": "^4.2.0",
    "print-js": "^1.6.0",
    "vue": "^3.5.13",
    "vue-demi": "0.14.10",
-    "vue-hooks-plus": "2.2.1",
+    "vue-hooks-plus": "2.2.3",
    "vue-i18n": "^9.13.1",
    "vue-router": "^4.4.0",
    "vue3-next-qrcode": "2.0.10"
  },
  "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
-    "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.11.0",
+    "@amap/amap-jsapi-types": "0.0.15",
+    "@ant-design/icons-vue": "7.0.1",
+    "@commitlint/cli": "19.3.0",
+    "@commitlint/config-conventional": "19.2.2",
    "@interactjs/types": "1.10.27",
-    "@intlify/unplugin-vue-i18n": "^4.0.0",
-    "@types/crypto-js": "^4.2.2",
+    "@intlify/unplugin-vue-i18n": "4.0.0",
+    "@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",
-    "@typescript-eslint/parser": "^8.16.0",
-    "@vitejs/plugin-vue": "^5.1.0",
-    "@vitejs/plugin-vue-jsx": "^4.1.1",
-    "@vitest/ui": "1.5.2",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^14.1.4",
+    "@types/three": "0.171.0",
+    "@typescript-eslint/eslint-plugin": "8.20.0",
+    "@typescript-eslint/parser": "8.20.0",
+    "@vitejs/plugin-vue": "5.2.1",
+    "@vitejs/plugin-vue-jsx": "4.1.1",
+    "@vitest/ui": "2.1.8",
+    "@vue/eslint-config-prettier": "10.1.0",
+    "@vue/eslint-config-typescript": "14.2.0",
    "@vue/test-utils": "2.4.6",
-    "autoprefixer": "^10.4.20",
-    "depcheck": "^1.4.7",
-    "eslint": "^9.11.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.26.0",
-    "globals": "15.12.0",
-    "happy-dom": "14.12.3",
+    "autoprefixer": "10.4.20",
+    "depcheck": "1.4.7",
+    "eslint": "9.18.0",
+    "eslint-config-prettier": "10.0.1",
+    "eslint-plugin-prettier": "5.2.2",
+    "eslint-plugin-vue": "9.32.0",
+    "globals": "15.14.0",
+    "happy-dom": "16.6.0",
    "husky": "8.0.3",
-    "lint-staged": "^15.2.2",
-    "postcss": "^8.4.49",
+    "lint-staged": "15.3.0",
+    "postcss": "8.5.1",
    "postcss-px-to-viewport-8-with-include": "1.2.2",
-    "prettier": "^3.3.2",
+    "prettier": "3.4.2",
    "rollup-plugin-gzip": "4.0.1",
-    "sass": "1.77.1",
-    "svg-sprite-loader": "^6.0.11",
-    "typescript": "^5.6.3",
-    "unplugin-auto-import": "^0.18.2",
-    "unplugin-vue-components": "^0.27.4",
-    "vite": "^6.0.3",
-    "vite-bundle-analyzer": "0.9.4",
+    "sass": "1.83.4",
+    "svg-sprite-loader": "6.0.11",
+    "typescript": "5.6.3",
+    "unplugin-auto-import": "19.0.0",
+    "unplugin-vue-components": "0.28.0",
+    "vite": "6.1.0",
+    "vite-bundle-analyzer": "0.16.0",
    "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-mock-dev-server": "1.8.0",
-    "vite-plugin-svg-icons": "^2.0.1",
-    "vite-svg-loader": "^5.1.0",
-    "vitest": "2.0.5",
-    "vue-tsc": "^2.1.10"
+    "vite-plugin-inspect": "0.8.4",
+    "vite-plugin-mock-dev-server": "1.8.3",
+    "vite-plugin-svg-icons": "2.0.1",
+    "vite-svg-loader": "5.1.0",
+    "vitest": "2.1.8",
+    "vue-tsc": "2.2.0"
  },
  "description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
  "main": "index.ts",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/api/demo/test.ts
+++ b/src/api/demo/test.ts
@ -28,7 +28,7 @@ interface JSONPlaceholder {
 *
 * @returns 测试
 *
- * @medthod get
+ * @method get
 */
 export const getWeather = (city: string) => {
  return request<AxiosTestResponse>({
--- a/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx
+++ b/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx
@ -7,6 +7,8 @@ import { rules, useCondition } from '@/app-components/app/AppLockScreen/shared'
 import { useSettingActions } from '@/store'
 import { useTemplateRef } from 'vue'
 import { useForm } from '@/components'
+import { APP_CATCH_KEY } from '@/app-config'
+import { setStorage, encrypt } from '@/utils'

 import type { InputInst } from 'naive-ui'

@ -27,6 +29,11 @@ const LockScreen = defineComponent({
      validate().then(() => {
        setLockAppScreen(true)
        updateSettingState('lockScreenSwitch', false)
+        setStorage(
+          APP_CATCH_KEY.appLockScreenPasswordKey,
+          encrypt(state.lockCondition.lockPassword),
+          'localStorage',
+        )

        state.lockCondition = useCondition()
      })
--- a/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx
+++ b/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx
@ -10,6 +10,8 @@ import { rules, useCondition } from '@/app-components/app/AppLockScreen/shared'
 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
 import { useDevice } from '@/hooks'
 import { useForm } from '@/components'
+import { APP_CATCH_KEY } from '@/app-config'
+import { removeStorage, decrypt, getStorage } from '@/utils'

 export default defineComponent({
  name: 'UnlockScreen',
@ -42,27 +44,56 @@ export default defineComponent({
      state.DDD = dayjs().format(DDD_FORMAT)
    }, 86_400_000)

+    const toSigningFn = () => {
+      removeStorage(APP_CATCH_KEY.appLockScreenPasswordKey, 'localStorage')
+      updateSettingState('lockScreenSwitch', false)
+      setTimeout(() => {
+        logout()
+      }, 100)
+    }
+
    const backToSigning = () => {
      window.$dialog.warning({
        title: '警告',
-        content: '是否返回到登陆页?',
+        content: '是否返回到登陆页并且重新登录',
        positiveText: '确定',
-        negativeText: '取消',
-        onPositiveClick: () => {
-          updateSettingState('lockScreenSwitch', false)
-          setTimeout(() => {
-            logout()
-          }, 100)
-        },
+        negativeText: '重新登录',
+        onPositiveClick: toSigningFn,
      })
    }

    const unlockScreen = () => {
-      validate().then(() => {
-        setLockAppScreen(false)
-        updateSettingState('lockScreenSwitch', false)
+      const catchPassword = getStorage<string>(
+        APP_CATCH_KEY.appLockScreenPasswordKey,
+        'localStorage',
+      )

-        state.lockCondition = useCondition()
+      if (!catchPassword) {
+        window.$dialog.warning({
+          title: '警告',
+          content: () => '检测到锁屏密码被修改，请重新登录',
+          closable: false,
+          maskClosable: false,
+          closeOnEsc: false,
+          positiveText: '重新登录',
+          onPositiveClick: toSigningFn,
+        })
+
+        return
+      }
+
+      const dCatchPassword = decrypt(catchPassword)
+
+      validate().then(() => {
+        if (dCatchPassword === state.lockCondition.lockPassword) {
+          setLockAppScreen(false)
+          updateSettingState('lockScreenSwitch', false)
+          removeStorage(APP_CATCH_KEY.appLockScreenPasswordKey, 'localStorage')
+
+          state.lockCondition = useCondition()
+        } else {
+          window.$message.warning('密码错误，请重新输入')
+        }
      })
    }

--- a/src/app-components/provider/AppStyleProvider/index.tsx
+++ b/src/app-components/provider/AppStyleProvider/index.tsx
@ -44,7 +44,7 @@ export default defineComponent({
          primaryColor,
        )
        // 将主色调任意颜色转换为 rgba 格式
-        const fp = colorToRgba(p, 0.8)
+        const fp = colorToRgba(p, 0.85)

        // 设置全局主题色 css 变量
        html.style.setProperty(rayTemplateThemePrimaryColor, p) // 主色调
--- a/src/app-components/provider/AppVersionProvider/index.tsx
+++ b/src/app-components/provider/AppVersionProvider/index.tsx
@ -53,7 +53,7 @@ export default defineComponent({
          title="发现新版本"
          content="当前版本已更新，点击确认加载新版本~"
          zIndex={999999999}
-          dad
+          draggable
          positiveText="确认"
          negativeText="取消"
          onPositiveClick={logout}
--- a/src/app-config/app-config.ts
+++ b/src/app-config/app-config.ts
@ -93,6 +93,8 @@ export const APP_CATCH_KEY_PREFIX = ''
 *   - appPiniaMenuStore: pinia menu store key
 *   - appPiniaSigningStore: pinia signing store key
 *   - appVersionProvider: 版本信息缓存 key
+ *   - appMenuTagOptions: 标签页菜单列表
+ *   - appLockScreenPasswordKey: 锁屏密码缓存 key
 */
 export const APP_CATCH_KEY = {
  signing: 'signing',
@ -106,6 +108,8 @@ export const APP_CATCH_KEY = {
  appVersionProvider: 'appVersionProvider',
  isAppLockScreen: 'isAppLockScreen',
  appGlobalSearchOptions: 'appGlobalSearchOptions',
+  appMenuTagOptions: 'appMenuTagOptions',
+  appLockScreenPasswordKey: 'appLockScreenPasswordKey',
 } as const

 /**
--- a/src/app-config/design-config.ts
+++ b/src/app-config/design-config.ts
@ -20,7 +20,7 @@ export const APP_THEME: AppTheme = {
    // 主题色
    primaryColor: '#2d8cf0',
    // 主题辅助色(用于整体 hover、active 等之类颜色)
-    primaryFadeColor: 'rgba(45, 140, 240, 0.8)',
+    primaryFadeColor: 'rgba(45, 140, 240, 0.85)',
  },
  /**
   *
@ -52,14 +52,12 @@ export const APP_THEME: AppTheme = {
      common: {
        borderRadius: '4px',
        baseColor: 'rgb(18, 18, 18)',
-        textColorBase: 'rgb(255, 255, 255)',
      },
    },
    light: {
      common: {
        borderRadius: '4px',
        baseColor: 'rgb(255, 255, 255)',
-        textColorBase: 'rgb(31, 31, 31)',
      },
    },
  },
--- a/src/axios/instance.ts
+++ b/src/axios/instance.ts
@ -1,10 +1,3 @@
-/**
- *
- * 请求拦截器与响应拦截器
- * 如果有需要拓展拦截器, 请在 inject 目录下参照示例方法继续拓展
- * 该页面不应该做过多的改动与配置
- */
-
 import axios from 'axios'
 import { AXIOS_CONFIG } from '@/app-config'
 import { useAxiosInterceptor } from '@/axios/utils/interceptor'
@ -17,23 +10,33 @@ import {
  setupRequestErrorInterceptor,
 } from '@/axios/axios-interceptor/request'

-import type { AxiosInstanceExpand } from './types'
+import type { AxiosInstanceExpand, RequestInterceptorConfig } from './types'

+// 创建 axios 实例
 const server: AxiosInstanceExpand = axios.create(AXIOS_CONFIG)
+// 获取拦截器实例
 const { createAxiosInstance, beforeFetch, fetchError } = useAxiosInterceptor()

 // 请求拦截器
 server.interceptors.request.use(
  (request) => {
-    createAxiosInstance(request, 'requestInstance') // 生成 request instance
-    setupRequestInterceptor() // 初始化拦截器所有已注入方法
-    beforeFetch('requestInstance', 'implementRequestInterceptorArray', 'ok') // 执行拦截器所有已注入方法
+    // 生成 request instance
+    createAxiosInstance(
+      request as RequestInterceptorConfig<unknown>,
+      'requestInstance',
+    )
+    // 初始化拦截器所有已注入方法
+    setupRequestInterceptor()
+    // 执行拦截器所有已注入方法
+    beforeFetch('requestInstance', 'implementRequestInterceptorArray', 'ok')

    return request
  },
  (error) => {
-    setupRequestErrorInterceptor() // 初始化拦截器所有已注入方法(错误状态)
-    fetchError('requestError', error, 'implementRequestInterceptorErrorArray') // 执行所有已注入方法
+    // 初始化拦截器所有已注入方法(错误状态)
+    setupRequestErrorInterceptor()
+    // 执行所有已注入方法
+    fetchError('requestError', error, 'implementRequestInterceptorErrorArray')

    return Promise.reject(error)
  },
@ -42,17 +45,22 @@ server.interceptors.request.use(
 // 响应拦截器
 server.interceptors.response.use(
  (response) => {
-    createAxiosInstance(response, 'responseInstance') // 创建响应实例
-    setupResponseInterceptor() // 注入响应成功待执行队列
-    beforeFetch('responseInstance', 'implementResponseInterceptorArray', 'ok') // 执行响应成功拦截器
+    // 创建响应实例
+    createAxiosInstance(response, 'responseInstance')
+    // 注入响应成功待执行队列
+    setupResponseInterceptor()
+    // 执行响应成功拦截器
+    beforeFetch('responseInstance', 'implementResponseInterceptorArray', 'ok')

    const { data } = response

    return Promise.resolve(data)
  },
  (error) => {
-    setupResponseErrorInterceptor() // 注入响应失败待执行队列
-    fetchError('responseError', error, 'implementResponseInterceptorErrorArray') // 执行响应失败后拦截器
+    // 注入响应失败待执行队列
+    setupResponseErrorInterceptor()
+    // 执行响应失败后拦截器
+    fetchError('responseError', error, 'implementResponseInterceptorErrorArray')

    return Promise.reject(error)
  },
--- a/src/axios/utils/interceptor.ts
+++ b/src/axios/utils/interceptor.ts
@ -1,14 +1,3 @@
-/**
- *
- * axios 拦截器注入
- *
- * 请求拦截器、响应拦截器
- * 暴露启动方法调用所有已注册方法
- *
- * 该拦截器仅适合放置公共的 axios 拦截器操作, 并且采用队列形式管理请求拦截器的注入
- * 所以在使用的时候, 需要按照约定格式进行参数传递
- */
-
 import RequestCanceler from '@/axios/utils/RequestCanceler'
 import { getAppEnvironment } from '@/utils'

@ -24,31 +13,36 @@ import type {
 import type { AnyFC } from '@/types'
 import type { AxiosError } from 'axios'

-/** 当前请求的实例 */
+// 当前请求的实例
 const axiosFetchInstance: AxiosFetchInstance = {
  requestInstance: null,
  responseInstance: null,
 }
-/** 请求失败返回值 */
+// 请求失败返回值
 const axiosFetchError: AxiosFetchError<AxiosError<unknown, unknown>> = {
  requestError: null,
  responseError: null,
 }
-/** 请求队列(区分 resolve 与 reject 状态) */
+// 请求队列(区分 resolve 与 reject 状态)
 const implement: ImplementQueue = {
  implementRequestInterceptorArray: [],
  implementResponseInterceptorArray: [],
 }
+// 请求失败队列
 const errorImplement: ErrorImplementQueue = {
  implementRequestInterceptorErrorArray: [],
  implementResponseInterceptorErrorArray: [],
 }

-/** 取消器实例 */
+type ImplementKeys = keyof ImplementQueue
+
+type ErrorImplementKeys = keyof ErrorImplementQueue
+
+// 取消器实例
 export const axiosCanceler = new RequestCanceler()

 export const useAxiosInterceptor = () => {
-  /** 创建拦截器实例 */
+  // 创建拦截器实例
  const createAxiosInstance = (
    instance: RequestInterceptorConfig | ResponseInterceptorConfig,
    instanceKey: keyof AxiosFetchInstance,
@ -60,33 +54,33 @@ export const useAxiosInterceptor = () => {
          instance as ResponseInterceptorConfig)
  }

-  /** 获取当前实例 */
+  // 获取当前实例
  const getAxiosInstance = (instanceKey: keyof AxiosFetchInstance) => {
    return axiosFetchInstance[instanceKey]
  }

-  /** 设置注入方法队列 */
+  // 设置注入方法队列
  const setImplement = (
-    key: keyof ImplementQueue | keyof ErrorImplementQueue,
+    key: ImplementKeys | ErrorImplementKeys,
    func: AnyFC[],
    fetchType: FetchType,
  ) => {
    fetchType === 'ok'
-      ? (implement[key as keyof ImplementQueue] = func)
-      : (errorImplement[key as keyof ErrorImplementQueue] = func)
+      ? (implement[key as ImplementKeys] = func)
+      : (errorImplement[key as ErrorImplementKeys] = func)
  }

-  /** 获取队列中所有的所有拦截器方法 */
+  // 获取队列中所有的所有拦截器方法
  const getImplement = (
-    key: keyof ImplementQueue | keyof ErrorImplementQueue,
+    key: ImplementKeys | ErrorImplementKeys,
    fetchType: FetchType,
  ): AnyFC[] => {
    return fetchType === 'ok'
-      ? implement[key as keyof ImplementQueue]
-      : errorImplement[key as keyof ErrorImplementQueue]
+      ? implement[key as ImplementKeys]
+      : errorImplement[key as ErrorImplementKeys]
  }

-  /** 队列执行器 */
+  // 队列执行器
  const implementer = (funcs: AnyFC[], ...args: any[]) => {
    if (Array.isArray(funcs)) {
      funcs.forEach((curr) => {
@ -97,16 +91,16 @@ export const useAxiosInterceptor = () => {
    }
  }

-  /** 请求、响应前执行拦截器队列中的所有方法 */
+  // 请求、响应前执行拦截器队列中的所有方法
  const beforeFetch = (
    key: keyof AxiosFetchInstance,
-    implementKey: keyof ImplementQueue | keyof ErrorImplementQueue,
+    implementKey: ImplementKeys | ErrorImplementKeys,
    fetchType: FetchType,
  ) => {
    const funcArr =
      fetchType === 'ok'
-        ? implement[implementKey as keyof ImplementQueue]
-        : errorImplement[implementKey as keyof ErrorImplementQueue]
+        ? implement[implementKey as ImplementKeys]
+        : errorImplement[implementKey as ErrorImplementKeys]
    const instance = getAxiosInstance(key)
    const { MODE } = getAppEnvironment()

@ -115,11 +109,11 @@ export const useAxiosInterceptor = () => {
    }
  }

-  /** 请求、响应错误时执行队列中所有方法 */
+  // 请求、响应错误时执行队列中所有方法
  const fetchError = (
    key: keyof AxiosFetchError,
    error: AxiosError<unknown, unknown>,
-    errorImplementKey: keyof ErrorImplementQueue,
+    errorImplementKey: ErrorImplementKeys,
  ) => {
    axiosFetchError[key] = error

--- a/src/components/base/RDraggableCard/DraggableCard.tsx
+++ b/src/components/base/RDraggableCard/DraggableCard.tsx
@ -0,0 +1,388 @@
+import './index.scss'
+
+import { NCard } from 'naive-ui'
+import { Teleport, Transition } from 'vue'
+
+import interact from 'interactjs'
+import { cardProps } from 'naive-ui'
+import { unrefElement, completeSize, queryElements } from '@/utils'
+
+import type { VNode } from 'vue'
+import type { MaybeElement, MaybeRefOrGetter } from '@vueuse/core'
+import type { AnyFC } from '@/types'
+
+type RestrictRectOptions = Parameters<typeof interact.modifiers.restrictRect>[0]
+
+type Padding = {
+  x: number
+  y: number
+}
+
+export type DefaultPosition =
+  | Padding
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'center'
+  | 'top-center'
+  | 'bottom-center'
+
+const props = {
+  ...cardProps,
+  /**
+   *
+   * @description
+   * 需要限制的区域位置。
+   *
+   * @default body
+   */
+  restrictionElement: {
+    type: [String, HTMLElement, Function, Object] as PropType<
+      string | HTMLElement | (() => VNode) | MaybeRefOrGetter<MaybeElement>
+    >,
+    default: 'body',
+  },
+  /**
+   *
+   * @description
+   * 是否启用拖拽。
+   *
+   * @default true
+   */
+  dad: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   *
+   * @description
+   * 自定义限制拖拽范围。
+   *
+   * @default undefined
+   */
+  restrictRectOptions: {
+    type: Object as PropType<RestrictRectOptions>,
+    default: void 0,
+  },
+  /**
+   *
+   * @description
+   * 默认位置。
+   *
+   * @default { x: 0, y: 0 }
+   */
+  defaultPosition: {
+    type: [Object, String] as PropType<DefaultPosition>,
+    default: () => ({
+      x: 0,
+      y: 0,
+    }),
+  },
+  /**
+   *
+   * @description
+   * 拖拽卡片宽度。
+   *
+   * @default 600
+   */
+  width: {
+    type: [String, Number] as PropType<string | number>,
+    default: 600,
+  },
+  /**
+   *
+   * @description
+   * 拖拽卡片 z-index。
+   *
+   * @default undefined
+   */
+  zIndex: {
+    type: Number,
+    default: void 0,
+  },
+  /**
+   *
+   * @description
+   * 是否启用动画。
+   *
+   * @default false
+   */
+  animation: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   *
+   * @description
+   * 默认的边距。
+   * 设置该属性后，卡片首次出现的位置会根据该属性进行偏移。
+   *
+   * @default undefined
+   */
+  padding: {
+    type: Object as PropType<Padding>,
+    default: void 0,
+  },
+}
+
+export default defineComponent({
+  name: 'RDraggableCard',
+  props,
+  setup(props, { expose }) {
+    const cardRef = useTemplateRef<HTMLElement>('cardRef')
+    let interactInst: ReturnType<typeof interact> | null = null
+    const position = {
+      x: 0,
+      y: 0,
+    }
+    const CONTAINER_ID = 'r-draggable-card-container'
+    const cssVars = computed(() => {
+      return {
+        '--r-draggable-card-width': completeSize(props.width),
+        '--r-draggable-card-z-index': props.zIndex,
+      }
+    })
+    let isSetup = false
+    const cacheProps = {
+      defaultPosition: props.defaultPosition,
+      dad: props.dad,
+    }
+
+    // 创建 DraggableCard 容器
+    const createDraggableCardContainer = () => {
+      if (!document.getElementById(CONTAINER_ID)) {
+        const container = document.createElement('div')
+
+        container.id = CONTAINER_ID
+        document.documentElement.appendChild(container)
+      }
+    }
+
+    createDraggableCardContainer()
+
+    // 获取 card, restrictionElement 的 dom 信息
+    const getDom = () => {
+      const card = unrefElement(cardRef)
+      const re =
+        typeof props.restrictionElement === 'string'
+          ? queryElements<HTMLElement>(props.restrictionElement)
+          : props.restrictionElement
+      let restrictionElement: HTMLElement | null = null
+
+      if (Array.isArray(re)) {
+        restrictionElement = re[0]
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        restrictionElement = unrefElement<HTMLElement>(re as any) as HTMLElement
+      }
+
+      return {
+        card,
+        restrictionElement,
+      }
+    }
+
+    // 获取 container, card 的位置
+    const getPosition = (containerRect: DOMRect, cardRect: DOMRect) => {
+      const { defaultPosition, padding } = props
+      const { x: paddingX = 0, y: paddingY = 0 } = padding ?? {}
+      // 默认的 body restrictionElement 的偏移量是 0
+      const {
+        x: containerX,
+        y: containerY,
+        width: containerWidth,
+        height: containerHeight,
+      } = containerRect
+      const { width: cardWidth, height: cardHeight } = cardRect
+
+      if (typeof defaultPosition === 'string') {
+        switch (defaultPosition) {
+          case 'top-center': {
+            const cx1 = (containerWidth - cardWidth) / 2 + containerX
+            const cy1 = paddingY + containerY
+            const cx2 = paddingX + cx1
+            const cy2 = cy1
+
+            return { x: cx2, y: cy2 }
+          }
+
+          case 'bottom-center': {
+            const cx1 = (containerWidth - cardWidth) / 2 + containerX
+            const cy1 = containerHeight - cardHeight - paddingY + containerY
+            const cx2 = paddingX + cx1
+            const cy2 = cy1
+
+            return { x: cx2, y: cy2 }
+          }
+
+          case 'center': {
+            const cx1 = (containerWidth - cardWidth) / 2 + containerX
+            const cy1 = (containerHeight - cardHeight) / 2 + containerY
+            const cx2 = paddingX + cx1
+            const cy2 = paddingY + cy1
+
+            return { x: cx2, y: cy2 }
+          }
+
+          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,
+        }
+      }
+    }
+
+    // 初始化设置 card 的位置，并且根据配置启用拖拽
+    const setupDraggable = () => {
+      const { card, restrictionElement } = getDom()
+
+      if (!card) {
+        return
+      }
+
+      const restrictionRect = restrictionElement?.getBoundingClientRect()
+      const cardHeader = card.querySelector('.n-card-header')
+      const restrictRectOptions = Object.assign(
+        {},
+        {
+          restriction: restrictionElement,
+          endOnly: true,
+        },
+        props.restrictRectOptions,
+      )
+
+      if (restrictionRect && !isSetup) {
+        // 计算偏移位置
+        const p = getPosition(restrictionRect, card.getBoundingClientRect())
+
+        // 设置初始位置
+        card.style.transform = `translate(${p.x}px, ${p.y}px)`
+        position.x = p.x
+        position.y = p.y
+      }
+
+      if (!props.dad) {
+        return
+      }
+
+      interactInst = interact(card)
+        .draggable({
+          inertia: true,
+          autoScroll: true,
+          allowFrom: cardHeader ? '.n-card-header' : '.n-card__content',
+          modifiers: [interact.modifiers.restrictRect(restrictRectOptions)],
+          listeners: {
+            move: (event) => {
+              card.setAttribute('can-drag', 'true')
+
+              position.x += event.dx
+              position.y += event.dy
+
+              card.style.transform = `translate(${position.x}px, ${position.y}px)`
+            },
+          },
+        })
+        .resizable(false)
+
+      isSetup = true
+    }
+
+    // 取消拖拽
+    const resetDraggable = () => {
+      interactInst?.unset()
+
+      interactInst = null
+    }
+
+    // 更新拖拽
+    const refreshDraggableWhenPropsChange = (fn: AnyFC) => {
+      isSetup = false
+
+      fn()
+      setupDraggable()
+    }
+
+    expose()
+
+    watchEffect(() => {
+      props.dad ? setupDraggable() : resetDraggable()
+
+      if (props.defaultPosition !== cacheProps.defaultPosition) {
+        refreshDraggableWhenPropsChange(() => {
+          cacheProps.defaultPosition = props.defaultPosition
+        })
+      }
+    })
+
+    onMounted(() => {
+      nextTick(() => {
+        setupDraggable()
+      })
+    })
+
+    return {
+      cardRef,
+      CONTAINER_ID,
+      cssVars,
+    }
+  },
+  render() {
+    const { $attrs, $slots, $props, CONTAINER_ID, cssVars, animation } = this
+
+    return (
+      <Teleport to={`#${CONTAINER_ID}`}>
+        {animation ? (
+          <Transition name="draggable-card" appear mode="out-in">
+            <NCard
+              {...$attrs}
+              {...$props}
+              class="r-draggable-card"
+              style={[cssVars]}
+              ref="cardRef"
+            >
+              {{ ...$slots }}
+            </NCard>
+          </Transition>
+        ) : (
+          <NCard
+            {...$attrs}
+            {...$props}
+            class="r-draggable-card"
+            style={[cssVars]}
+            ref="cardRef"
+          >
+            {{ ...$slots }}
+          </NCard>
+        )}
+      </Teleport>
+    )
+  },
+})
--- a/src/components/base/RDraggableCard/index.scss
+++ b/src/components/base/RDraggableCard/index.scss
@ -0,0 +1,25 @@
+.n-card.r-draggable-card {
+  transform-origin: 0 0;
+  position: absolute;
+  width: var(--r-draggable-card-width);
+  z-index: var(--r-draggable-card-z-index);
+}
+
+#r-draggable-card-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+
+// draggable-card 的 Transition 样式
+.draggable-card-enter-active,
+.draggable-card-leave-active {
+  transition: opacity 0.3s var(--r-bezier);
+}
+
+.draggable-card-enter-from,
+.draggable-card-leave-to {
+  opacity: 0;
+}
--- a/src/components/base/RForm/src/hooks/useForm.ts
+++ b/src/components/base/RForm/src/hooks/useForm.ts
@ -36,7 +36,10 @@ import type { Recordable } from '@/types'
 *   },
 * })
 */
-const useForm = <T extends Recordable, R extends RFormRules>(
+const useForm = <
+  T extends Recordable = Recordable,
+  R extends RFormRules = RFormRules,
+>(
  model?: T,
  rules?: R,
 ) => {
--- a/src/components/base/RModal/src/Modal.tsx
+++ b/src/components/base/RModal/src/Modal.tsx
@ -4,14 +4,12 @@ import { NModal } from 'naive-ui'

 import props from './props'
 import { completeSize, uuid } from '@/utils'
-import { setupInteract } from './utils'
 import {
  FULLSCREEN_CARD_TYPE_CLASS,
  R_MODAL_CLASS,
  CSS_VARS_KEYS,
 } from './constant'

-import type interact from 'interactjs'
 import type { ModalProps } from 'naive-ui'

 export default defineComponent({
@ -24,57 +22,11 @@ export default defineComponent({
      [CSS_VARS_KEYS['dialogWidth']]: completeSize(props.dialogWidth ?? 446),
    }))
    const uuidEl = uuid()
-    let intractable: null | ReturnType<typeof interact>
-    // 记录拖拽的位置
-    const position = {
-      x: 0,
-      y: 0,
-    }
    // 当前是否为预设 card 类型并且设置了 fullscreen
    const isFullscreenCardType = computed(
      () => props.preset === 'card' && props.fullscreen,
    )

-    watch(
-      () => props.show,
-      (ndata) => {
-        if (
-          ndata &&
-          props.dad &&
-          (props.preset === 'card' || props.preset === 'dialog')
-        ) {
-          nextTick(() => {
-            const target = document.getElementById(uuidEl)
-
-            if (target) {
-              setupInteract(target, {
-                preset: props.preset,
-                x: position.x,
-                y: position.y,
-                dargCallback: (x, y) => {
-                  position.x = x
-                  position.y = y
-                },
-              }).then((res) => {
-                intractable = res
-              })
-            }
-
-            if (props.memo && target) {
-              target.style.transform = `translate(${position.x}px, ${position.y}px)`
-            }
-          })
-        } else {
-          intractable?.unset()
-
-          intractable = null
-        }
-      },
-      {
-        immediate: true,
-      },
-    )
-
    return {
      cssVars,
      isFullscreenCardType,
--- a/src/components/base/RModal/src/hooks/useModal.ts
+++ b/src/components/base/RModal/src/hooks/useModal.ts
@ -1,5 +1,4 @@
 import { useModal as useNaiveModal, NScrollbar } from 'naive-ui'
-import { setupInteract } from '../utils'
 import { queryElements, setStyle, completeSize, setClass } from '@/utils'
 import { R_MODAL_CLASS, CSS_VARS_KEYS } from '../constant'

@ -21,10 +20,10 @@ const useModal = () => {
              color: 'rgba(0, 0, 0, 0)',
              colorHover: 'rgba(0, 0, 0, 0)',
            },
-            trigger: 'none',
+            trigger: 'hover',
            style: {
              width: 'auto',
-              height:
+              maxHeight:
                'calc(var(--html-height) - 29px - var(--n-padding-bottom) - var(--n-padding-bottom) - var(--n-padding-top))',
            },
          },
@ -35,7 +34,7 @@ const useModal = () => {
        )
    }

-    const { preset, dad, fullscreen, width, cardWidth, dialogWidth } = options
+    const { preset, fullscreen, width, cardWidth, dialogWidth } = options
    const modalReactive = naiveCreate({
      ...rest,
      content: contentNode,
@ -55,15 +54,6 @@ const useModal = () => {
        return
      }

-      // 是否启用拖拽
-      if (dad) {
-        setupInteract(modalElement, {
-          preset,
-          x: 0,
-          y: 0,
-        })
-      }
-
      // preset 为 card，fullscreen 为 true 时，最大化 modal
      if (fullscreen && preset === 'card') {
        setStyle(modalElement, {
--- a/src/components/base/RModal/src/index.scss
+++ b/src/components/base/RModal/src/index.scss
@ -4,6 +4,11 @@
  // 当设置全屏时，启用滚动
  & .n-card__content {
    overflow: scroll;
+    max-height: calc(
+      var(--html-height) - var(--n-padding-bottom) - var(--n-padding-bottom) - var(
+          --n-padding-top
+        )
+    );
  }
 }

--- a/src/components/base/RModal/src/props.ts
+++ b/src/components/base/RModal/src/props.ts
@ -3,17 +3,6 @@ import type { PropType } from 'vue'

 const props = {
  ...modalProps,
-  /**
-   *
-   * @description
-   * 是否记住上一次的位置。
-   *
-   * @default true
-   */
-  memo: {
-    type: Boolean,
-    default: true,
-  },
  /**
   *
   * @description
@ -58,18 +47,6 @@ const props = {
    type: [String, Number] as PropType<string | number>,
    default: 446,
  },
-  /**
-   *
-   * @description
-   * 是否启用拖拽。
-   * 当启用拖拽时，可以通过拖拽 header 部分控制模态框。
-   *
-   * @default false
-   */
-  dad: {
-    type: Boolean,
-    default: false,
-  },
 }

 export default props
--- a/src/components/base/RModal/src/types.ts
+++ b/src/components/base/RModal/src/types.ts
@ -1,14 +1,6 @@
 import type { ModalOptions as NaiveModalOptions } from 'naive-ui'

 export interface RModalProps extends NaiveModalOptions {
-  /**
-   *
-   * @description
-   * 是否记住上一次的位置。
-   *
-   * @default true
-   */
-  memo?: boolean
  /**
   *
   * @description
@ -41,13 +33,4 @@ export interface RModalProps extends NaiveModalOptions {
   * @default 446
   */
  dialogWidth?: number | string
-  /**
-   *
-   * @description
-   * 是否启用拖拽。
-   * 当启用拖拽时，可以通过拖拽 header 部分控制模态框。
-   *
-   * @default false
-   */
-  dad?: boolean
 }
--- a/src/components/base/RModal/src/utils.ts
+++ b/src/components/base/RModal/src/utils.ts
@ -1,101 +0,0 @@
-import interact from 'interactjs'
-
-import type { ModalProps } from 'naive-ui'
-import type { RModalProps } from './types'
-
-interface SetupDraggableOptions {
-  scheduler?: (event: Interact.DragEvent) => void
-}
-
-interface SetupInteractOptions {
-  preset: ModalProps['preset']
-  memo?: RModalProps['memo']
-  x: number
-  y: number
-  dargCallback?: (x: number, y: number, event: Interact.DragEvent) => void
-}
-
-/**
- *
- * @param bindModal modal 预设元素
- * @param preset 预设类型
- *
- * @description
- * 根据预设模态框设置拖拽效果
- * 但是该效果有且仅有 card, dialog 有效
- *
- * 默认添加 30ms 延迟，避免诡异问题
- */
-export const setupDraggable = (
-  bindModal: HTMLElement,
-  preset: ModalProps['preset'],
-  options?: SetupDraggableOptions,
-): Promise<ReturnType<typeof interact>> => {
-  const { scheduler } = options ?? {}
-
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const allowFromStr =
-        preset === 'card' ? '.n-card-header__main' : '.n-dialog__title'
-
-      if (bindModal) {
-        const dad = interact(bindModal)
-          .draggable({
-            inertia: true,
-            autoScroll: true,
-            allowFrom: allowFromStr,
-            modifiers: [
-              interact.modifiers.restrictRect({
-                restriction: 'parent',
-                endOnly: true,
-              }),
-            ],
-            listeners: {
-              move: (event) => {
-                scheduler?.(event)
-              },
-            },
-          })
-          .resizable(false)
-
-        resolve(dad)
-      }
-    }, 30)
-  })
-}
-
-export const setupInteract = (
-  target: HTMLElement | string,
-  options: SetupInteractOptions,
-): Promise<ReturnType<typeof interact>> => {
-  const _target =
-    typeof target === 'string'
-      ? (document.querySelector(target) as HTMLElement)
-      : target
-
-  return new Promise((resolve, reject) => {
-    if (_target) {
-      _target.setAttribute('can-drag', 'true')
-
-      const { preset, dargCallback } = options
-      let { x, y } = options
-
-      setupDraggable(_target, preset, {
-        scheduler: (event) => {
-          const target = event.target
-
-          x += event.dx
-          y += event.dy
-
-          target.style.transform = `translate(${x}px, ${y}px)`
-
-          dargCallback?.(x, y, event)
-        },
-      }).then((res) => {
-        resolve(res)
-      })
-    } else {
-      reject()
-    }
-  })
-}
--- a/src/components/base/RSegment/src/Segment.tsx
+++ b/src/components/base/RSegment/src/Segment.tsx
@ -94,7 +94,6 @@ export default defineComponent({
    return (
      <NTabs
        {...($props as TabsProps)}
-        ref="segmentRef"
        style={[cssVars]}
        class="r-segment"
        type="segment"
--- a/src/components/base/RTable/src/Table.tsx
+++ b/src/components/base/RTable/src/Table.tsx
@ -61,6 +61,23 @@ export default defineComponent({
        pick(props, 'striped', 'bordered'),
      ),
    )
+    // 默认设置 card header style
+    const cardHeaderStyle = computed(() => {
+      const { title, tool, cardProps } = props
+      const { headerStyle = {} } = cardProps ?? {}
+
+      if (!title && !tool) {
+        return Object.assign(
+          {},
+          {
+            paddingTop: '0px',
+          },
+          headerStyle,
+        )
+      }
+
+      return headerStyle
+    })

    /**
     *
@ -231,6 +248,7 @@ export default defineComponent({
      tool,
      wrapperRef,
      propsPopselectValue,
+      cardHeaderStyle,
    }
  },
  render() {
@ -243,6 +261,7 @@ export default defineComponent({
      uuidWrapper,
      privateReactive,
      propsPopselectValue,
+      cardHeaderStyle,
    } = this
    const { class: className, ...restAttrs } = $attrs
    const { tool, combineRowProps, contextMenuSelect } = this
@ -255,11 +274,12 @@ export default defineComponent({
      tableFlexHeight,
      cardProps,
      ...restProps
-    } = $props as ExtractPublicPropTypes<typeof props>
+    } = $props
+    const { headerStyle, ...restCardProps } = cardProps ?? {}

    return (
      <NCard
-        {...cardProps}
+        {...restCardProps}
        {...{
          id: uuidWrapper,
        }}
@ -267,6 +287,7 @@ export default defineComponent({
        ref="wrapperRef"
        bordered={wrapperBordered}
        class={className}
+        style={cardHeaderStyle}
      >
        {{
          default: () => (
--- a/src/components/index.ts
+++ b/src/components/index.ts
@ -1,4 +1,5 @@
 import RCollapse from '../components/pro/RCollapse/Collapse'
+import RDraggableCard from '../components/base/RDraggableCard/DraggableCard'

 // 导出所有自定义组件
 export * from './base/RChart'
@ -14,7 +15,7 @@ export * from './base/RSegment'
 export * from './base/RBarcode'
 export * from '../components/pro/RTablePro'
 export * from './base/RFlow'
-export { RCollapse }
+export { RCollapse, RDraggableCard }

 // 导出自定义组件类型
 export type * from './base/RChart/src/types'
@ -32,3 +33,4 @@ export type {
  FlowGraphData,
  FlowOptions,
 } from './base/RFlow/src/types'
+export type { DefaultPosition } from './base/RDraggableCard/DraggableCard'
--- a/src/components/pro/RTablePro/src/TablePro.tsx
+++ b/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,
        })
      }
    })
--- a/src/components/pro/RTablePro/src/hooks/useTablePro.ts
+++ b/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
 }
--- a/src/components/pro/RTablePro/src/types.ts
+++ b/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
 }
--- a/src/layout/components/MenuTag/index.scss
+++ b/src/layout/components/MenuTag/index.scss
@ -53,7 +53,7 @@ $menuTagWrapperWidth: 76px;

 .ray-template--light {
  .menu-tag__btn-icon:hover {
-    filter: brightness(2);
+    filter: brightness(1.2);
  }
 }

--- a/src/layout/components/Search/GlobalSearch/index.tsx
+++ b/src/layout/components/Search/GlobalSearch/index.tsx
@ -84,7 +84,14 @@ export default defineComponent({
    let searchElementIndex = 0
    // 缓存索引
    let preSearchElementIndex = searchElementIndex
-    const { isTabletOrSmaller } = useDevice()
+    const { isTabletOrSmaller } = useDevice({
+      observer: (val) => {
+        // 当处于小尺寸状态时，自动关闭搜索框
+        if (val) {
+          modelShow.value = false
+        }
+      },
+    })
    const loading = ref(false)
    // 激活样式 class name
    const ACTIVE_CLASS = 'content-item--active'
@ -309,22 +316,7 @@ export default defineComponent({
      </NFlex>
    )

-    watchEffect(() => {
-      // 当处于小尺寸状态时，自动关闭搜索框
-      if (isTabletOrSmaller.value) {
-        modelShow.value = false
-      }
-    })
-
-    useEventListener(
-      window,
-      'keydown',
-      (e: KeyboardEvent) => {
-        registerArouseKeyboard(e)
-        registerChangeSearchElementIndex(e)
-      },
-      true,
-    )
+    useEventListener(window, 'keydown', registerArouseKeyboard)

    return {
      ...toRefs(state),
@ -336,11 +328,16 @@ export default defineComponent({
      isTabletOrSmaller,
      SearchItem,
      loading,
+      registerChangeSearchElementIndex,
    }
  },
  render() {
    const { isTabletOrSmaller, searchOptions, loading } = this
-    const { SearchItem, fuzzySearchMenuOptions } = this
+    const {
+      SearchItem,
+      fuzzySearchMenuOptions,
+      registerChangeSearchElementIndex,
+    } = this

    return isTabletOrSmaller ? (
      <div style="display: none;"></div>
@ -350,7 +347,11 @@ export default defineComponent({
        transformOrigin="center"
        displayDirective="if"
      >
-        <div class="global-search global-search--dark global-search--light">
+        <div
+          class="global-search global-search--dark global-search--light"
+          tabindex="-1"
+          onKeydown={registerChangeSearchElementIndex}
+        >
          <div class="global-search__wrapper">
            <NCard
              class="global-search__card"
--- a/src/layout/components/SiderBar/components/SettingDrawer/constant.ts
+++ b/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<
--- a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
@ -16,7 +16,7 @@ import SegmentViewsCustomMenu from './segment-views/CustomMenu'

 import { useSettingGetters, useSettingActions, useMenuActions } from '@/store'
 import { SETTING_DRAWER_INJECT_KEY } from './constant'
-import { forIn, throttle } from 'lodash-es'
+import { cloneDeep, forIn, throttle } from 'lodash-es'
 import { drawerProps } from 'naive-ui'
 import { useModal } from '@/components'
 import { getDefaultSettingConfig } from '@/store/modules/setting/constant'
@ -71,11 +71,13 @@ export default defineComponent({
        positiveText: '确认初始化',
        negativeText: '取消',
        onPositiveClick: () => {
-          forIn(getDefaultSettingConfig(), (value, key) => {
+          forIn(cloneDeep(getDefaultSettingConfig()), (value, key) => {
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            modelReactive[key] = value

+            console.log(value, key)
+
            updateSettingState(key as keyof SettingState, value)
          })

--- a/src/layout/components/SiderBar/index.tsx
+++ b/src/layout/components/SiderBar/index.tsx
@ -37,21 +37,28 @@ import type { VNode } from 'vue'
 export default defineComponent({
  name: 'AppSiderBar',
  setup() {
+    // 获取 setting 相关值
    const { updateLocale, updateSettingState } = useSettingActions()
    const { t } = useI18n()
-
+    // 获取全屏相关方法
    const [isFullscreen, { toggleFullscreen, isEnabled }] = useFullscreen(
      document.getElementsByTagName('html')[0],
    )
+    // 获取设置相关方法
    const { getDrawerPlacement, getBreadcrumbSwitch } = useSettingGetters()
-    const showSettings = ref(false) // 是否显示设置抽屉
-    const globalSearchShown = ref(false) // 是否展示全局搜索
+    // 是否显示设置抽屉
+    const showSettings = ref(false)
+    // 是否展示全局搜索
+    const globalSearchShown = ref(false)
+    // 当前是否为平板或者更小的设备
    const { isTabletOrSmaller } = useDevice()
+    // 获取全局 drawer 的值
    const globalDrawerValue = getVariableToRefs('globalDrawerValue')

    /**
     *
-     * 顶部左边操作栏
+     * @description
+     * 顶部左边操作栏。
     */
    const leftIconOptions = computed(() =>
      createLeftIconOptions({
@ -61,7 +68,8 @@ export default defineComponent({
    )
    /**
     *
-     * 顶部右边提示框操作栏
+     * @description
+     * 顶部右边提示框操作栏。
     */
    const rightTooltipIconOptions = computed(() =>
      createRightIconOptions({
--- a/src/locales/lang/en-US/menu.json
+++ b/src/locales/lang/en-US/menu.json
@ -29,5 +29,6 @@
  "TemplateHooks": "Template Api",
  "scrollReveal": "Scroll Reveal",
  "TablePro": "Table Pro",
-  "Flow": "Flow"
+  "Flow": "Flow",
+  "DraggableCard": "Draggable Card"
 }
--- a/src/locales/lang/zh-CN/menu.json
+++ b/src/locales/lang/zh-CN/menu.json
@ -29,5 +29,6 @@
  "TemplateHooks": "模板内置 Api",
  "scrollReveal": "滚动动画",
  "TablePro": "高级表格",
-  "Flow": "流程图"
+  "Flow": "流程图",
+  "DraggableCard": "拖拽卡片"
 }
--- a/src/router/modules/demo/barcode.ts
+++ b/src/router/modules/demo/barcode.ts
@ -5,7 +5,7 @@ import type { AppRouteRecordRaw } from '@/router/types'

 const barcode: AppRouteRecordRaw = {
  path: 'barcode',
-  component: () => import('@/views/demo/BarcodeDemo'),
+  component: () => import('@/views/demo/barcode-demo'),
  meta: {
    i18nKey: t('menu.Barcode'),
    icon: 'other',
--- a/src/router/modules/demo/draggable-card.ts
+++ b/src/router/modules/demo/draggable-card.ts
@ -0,0 +1,19 @@
+import { t } from '@/hooks/web/useI18n'
+import { LAYOUT } from '@/router/constant'
+
+import type { AppRouteRecordRaw } from '@/router/types'
+
+const r: AppRouteRecordRaw = {
+  path: '/draggable-card',
+  component: () => import('@/views/demo/draggable-card'),
+  meta: {
+    i18nKey: t('menu.DraggableCard'),
+    icon: 'other',
+    order: 2,
+    extra: {
+      label: 'drag',
+    },
+  },
+}
+
+export default r
--- a/src/router/modules/demo/flow.ts
+++ b/src/router/modules/demo/flow.ts
@ -5,7 +5,7 @@ import type { AppRouteRecordRaw } from '@/router/types'

 const r: AppRouteRecordRaw = {
  path: '/flow',
-  component: () => import('@/views/demo/Flow'),
+  component: () => import('@/views/demo/flow-demo'),
  meta: {
    i18nKey: t('menu.Flow'),
    icon: 'other',
--- a/src/router/modules/demo/table-pro.ts
+++ b/src/router/modules/demo/table-pro.ts
@ -5,7 +5,7 @@ import type { AppRouteRecordRaw } from '@/router/types'

 const r: AppRouteRecordRaw = {
  path: '/table-pro',
-  component: () => import('@/views/demo/TablePro'),
+  component: () => import('@/views/demo/table-pro-demo'),
  meta: {
    i18nKey: t('menu.TablePro'),
    icon: 'other',
--- a/src/router/utils/order-routes.ts
+++ b/src/router/utils/order-routes.ts
@ -16,10 +16,6 @@ export const orderRoutes = (routes: AppRouteRecordRaw[]) => {
    const currOrder = curr.meta?.order ?? 1
    const nextOrder = next.meta?.order ?? 0

-    if (typeof currOrder !== 'number' || typeof nextOrder !== 'number') {
-      throw new TypeError('orderRoutes error: order must be a number!')
-    }
-
    if (currOrder === nextOrder) {
      // 如果两个路由的 order 值相同，则按照路由名进行排序
      return curr.name
--- a/src/store/hooks/useMenuStore.ts
+++ b/src/store/hooks/useMenuStore.ts
@ -1,5 +1,4 @@
 import { piniaMenuStore } from '../modules/menu'
-import { useAppRoot } from '@/hooks'

 export const useMenuGetters = () => {
  const variable = piniaMenuStore()
@ -31,25 +30,7 @@ export const useMenuGetters = () => {
   * 获取菜单标签列表。
   */
  const getMenuTagOptions = computed(() => {
-    const { getRootPath } = useAppRoot()
-
-    return variable.menuTagOptions.map((curr, _idx, currentArray) => {
-      if (curr.key === getMenuKey.value && curr.key !== getRootPath.value) {
-        curr.closeable = true
-      } else {
-        curr.closeable = false
-      }
-
-      if (curr.key === getRootPath.value) {
-        curr.closeable = false
-      }
-
-      if (currentArray.length <= 1) {
-        curr.closeable = false
-      }
-
-      return curr
-    })
+    return variable.menuTagOptions
  })

  /**
--- a/src/store/modules/menu/index.ts
+++ b/src/store/modules/menu/index.ts
@ -8,6 +8,7 @@ import {
  createMenuIcon,
  getCatchMenuKey,
  createMenuExtra,
+  getCatchMenuTagOptions,
 } from './utils'
 import { useI18n } from '@/hooks'
 import { getAppRawRoutes } from '@/router/app-route-modules'
@ -73,7 +74,7 @@ export const piniaMenuStore = defineStore(
      menuKey: getCatchMenuKey(), // 当前菜单 `key`
      options: [], // 菜单列表
      collapsed: false, // 是否折叠菜单
-      menuTagOptions: [], // tag 标签菜单
+      menuTagOptions: getCatchMenuTagOptions(), // tag 标签菜单
      breadcrumbOptions: [], // 面包屑菜单
      currentMenuOption: null, // 当前激活菜单项
    })
@ -117,11 +118,7 @@ export const piniaMenuStore = defineStore(

      // 设置 label, i18nKey 优先级最高
      const label = computed(() => (i18nKey ? t(`${i18nKey}`) : noLocalTitle))
-      /**
-       *
-       * 拼装菜单项
-       * 容错处理，兼容以前版本 key 选取为 path 的情况
-       */
+      // 拼装菜单项，容错处理，兼容以前版本 key 选取为 path 的情况
      const route = {
        ...option,
        key: option.fullPath,
@ -137,10 +134,12 @@ export const piniaMenuStore = defineStore(
        extra: createMenuExtra(option),
      })

+      // 如果当前菜单项与缓存菜单项相同，则更新当前菜单项
      if (option.fullPath === getCatchMenuKey()) {
        menuState.currentMenuOption = attr
      }

+      // 验证菜单项是否显示
      attr.show = validMenuItemShow(attr)

      return attr
@ -163,12 +162,13 @@ export const piniaMenuStore = defineStore(

    /**
     *
-     * @param options menu tag options
-     * @param isAppend is append
+     * @param options menu tag option(s)
+     * @param isAppend true: 追加操作(push), false: 覆盖操作
     *
     * @description
-     * 设置标签菜单。
-     * true: 追加操作（push），false: 覆盖操作。
+     * 设置标签页。
+     * 如果传递的 options 为数组，则进行追加操作。
+     * 如果传递的 options 为单个对象，则进行覆盖操作。
     */
    const setMenuTagOptions = (
      options: MenuTagOptions | MenuTagOptions[],
@ -180,6 +180,8 @@ export const piniaMenuStore = defineStore(
      isAppend
        ? menuState.menuTagOptions.push(...arr)
        : (menuState.menuTagOptions = arr)
+
+      setStorage(APP_CATCH_KEY.appMenuTagOptions, menuState.menuTagOptions)
    }

    /**
@ -199,6 +201,13 @@ export const piniaMenuStore = defineStore(
      if (!tag) {
        menuState.menuTagOptions.push(option as MenuTagOptions)
      }
+
+      // 清理所有非根路径的标签页
+      menuState.menuTagOptions = menuState.menuTagOptions.filter((curr) =>
+        curr.fullPath?.startsWith('/'),
+      )
+
+      setStorage(APP_CATCH_KEY.appMenuTagOptions, menuState.menuTagOptions)
    }

    /**
@ -402,8 +411,13 @@ export const piniaMenuStore = defineStore(
     * @description
     * 关闭 menu tag 标签。
     */
-    const spliceMenTagOptions = (idx: number, length = 1) =>
-      menuState.menuTagOptions.splice(idx, length)
+    const spliceMenTagOptions = (idx: number, length = 1) => {
+      const r = menuState.menuTagOptions.splice(idx, length)
+
+      setStorage(APP_CATCH_KEY.appMenuTagOptions, menuState.menuTagOptions)
+
+      return r
+    }

    /**
     *
@ -451,7 +465,7 @@ export const piniaMenuStore = defineStore(
    persist: {
      key: APP_CATCH_KEY.appPiniaMenuStore,
      storage: window.localStorage,
-      pick: ['breadcrumbOptions', 'menuKey', 'menuTagOptions', 'collapsed'],
+      pick: ['menuKey', 'collapsed'],
    },
  },
 )
--- a/src/store/modules/menu/utils.ts
+++ b/src/store/modules/menu/utils.ts
@ -264,3 +264,17 @@ export const getCatchMenuKey = () => {

  return cacheMenuKey
 }
+
+/**
+ *
+ * @returns 获取缓存的菜单标签页
+ */
+export const getCatchMenuTagOptions = () => {
+  return getStorage<AppMenuOption[]>(
+    APP_CATCH_KEY.appMenuTagOptions,
+    'sessionStorage',
+    {
+      defaultValue: [],
+    },
+  )
+}
--- a/src/store/modules/setting/index.ts
+++ b/src/store/modules/setting/index.ts
@ -3,7 +3,7 @@ import { colorToRgba, setStorage, updateObjectValue, setStyle } from '@/utils'
 import { useI18n, useDayjs } from '@/hooks'
 import { APP_CATCH_KEY, APP_THEME, GLOBAL_CLASS_NAMES } from '@/app-config'
 import { getDefaultSettingConfig } from './constant'
-import { merge } from 'lodash-es'
+import { cloneDeep, merge } from 'lodash-es'

 import type { SettingState } from '@/store/modules/setting/types'
 import type { LocalKey } from '@/hooks'
@ -24,8 +24,8 @@ export const piniaSettingStore = defineStore(
        common: {
          primaryColor: primaryColor,
          primaryColorHover: primaryFadeColor,
-          primaryColorPressed: primaryFadeColor,
-          primaryColorSuppl: colorToRgba(primaryColor, 0.9),
+          primaryColorPressed: primaryColor,
+          primaryColorSuppl: primaryFadeColor,
        },
      },
      // 内部使用，用于判断是否为黑夜主题（为了兼容历史遗留版本）；true 为黑夜主题，false 为明亮主题
@ -48,7 +48,7 @@ export const piniaSettingStore = defineStore(
        url: '/dashboard',
        jumpType: 'station',
      },
-      ...getDefaultSettingConfig(),
+      ...cloneDeep(getDefaultSettingConfig()),
    })

    // 修改当前语言
@ -65,14 +65,13 @@ export const piniaSettingStore = defineStore(
     * @description
     * 切换主题色，传递对应颜色即可更新 naive-ui 的主题色。
     */
-    const changePrimaryColor = (value: string, alpha = 0.8) => {
+    const changePrimaryColor = (value: string, alpha = 0.85) => {
      const alphaColor1 = colorToRgba(value, alpha)
-      const alphaColor2 = colorToRgba(value, 0.9)
      const themeOverrides = {
        primaryColor: value,
        primaryColorHover: alphaColor1,
-        primaryColorPressed: alphaColor1,
-        primaryColorSuppl: alphaColor2,
+        primaryColorPressed: value,
+        primaryColorSuppl: alphaColor1,
      }
      const { rayTemplateThemePrimaryColor, rayTemplateThemePrimaryFadeColor } =
        GLOBAL_CLASS_NAMES
--- a/src/store/modules/signing/index.ts
+++ b/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()
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@ -1,7 +1,7 @@
-@import '@/styles/animate.scss';
-@import '@/styles/root.scss';
-@import '@/styles/naive.scss';
-@import '@/styles/print-css.scss';
+@use '@/styles/animate.scss' as *;
+@use '@/styles/root.scss' as *;
+@use '@/styles/naive.scss' as *;
+@use '@/styles/print-css.scss' as *;

 body,
 h1,
--- a/src/utils/c/constant.ts
+++ b/src/utils/c/constant.ts
@ -0,0 +1,6 @@
+/**
+ *
+ * @description
+ * 约定加密 key。
+ */
+export const CRYPTO_KEY = '4cP+dX5FI2EVYzln'
--- a/src/utils/c/decrypt.ts
+++ b/src/utils/c/decrypt.ts
@ -0,0 +1,32 @@
+import { AES, enc } from 'crypto-js'
+import { CRYPTO_KEY } from './constant'
+
+import type { CipherParams, WordArray } from './types'
+
+/**
+ *
+ * @param data AES 加密后的数据
+ * @param key 解密 key
+ *
+ * @description
+ * 使用 AES 解密数据。
+ *
+ * @example
+ * const data = 'U2FsdGVkX1+3Q
+ * const key = CRYPTO_KEY
+ *
+ * const decrypted = decrypt(data, key) // { name: 'John Doe' }
+ */
+export const decrypt = (
+  data: string | CipherParams,
+  key?: string | WordArray,
+) => {
+  try {
+    const decrypted = AES.decrypt(data, key || CRYPTO_KEY)
+    const decryptedData = decrypted.toString(enc.Utf8)
+
+    return JSON.parse(decryptedData)
+  } catch (e) {
+    console.error(`Unknown error: ${e}`)
+  }
+}
--- a/src/utils/c/encrypt.ts
+++ b/src/utils/c/encrypt.ts
@ -0,0 +1,24 @@
+import { AES } from 'crypto-js'
+import { CRYPTO_KEY } from './constant'
+
+import type { WordArray } from './types'
+
+/**
+ *
+ * @param data 待加密数据
+ * @param key 加密 key
+ *
+ * @description
+ * 使用 AES 加密数据。
+ *
+ * @example
+ * const data = { name: 'John Doe' }
+ * const key = CRYPTO_KEY
+ *
+ * const encrypted = encrypt(data, key) // 'U2FsdGVkX1+3Q'
+ */
+export const encrypt = (data: unknown, key?: string | WordArray) => {
+  const encrypted = AES.encrypt(JSON.stringify(data), key || CRYPTO_KEY)
+
+  return encrypted.toString()
+}
--- a/src/utils/c/index.ts
+++ b/src/utils/c/index.ts
@ -0,0 +1,5 @@
+import { CRYPTO_KEY } from './constant'
+import { decrypt } from './decrypt'
+import { encrypt } from './encrypt'
+
+export { CRYPTO_KEY, decrypt, encrypt }
--- a/src/utils/c/types.ts
+++ b/src/utils/c/types.ts
@ -0,0 +1,4 @@
+import type CryptoJS from 'crypto-js'
+
+export type WordArray = CryptoJS.lib.WordArray
+export type CipherParams = CryptoJS.lib.CipherParams
--- a/src/utils/cache.ts
+++ b/src/utils/cache.ts
@ -123,7 +123,7 @@ function getStorage<T = unknown>(
  try {
    const data = storage.getItem(prefixedKey)

-    return data === null ? defaultValue ?? null : (JSON.parse(data) as T)
+    return data === null ? (defaultValue ?? null) : (JSON.parse(data) as T)
  } catch (error) {
    console.error(
      `[getStorage]: Failed to get stored data for key '${key}'`,
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@ -7,5 +7,7 @@ export * from './element'
 export * from './precision'
 export * from './vue'
 export * from './app'
+export * from './c'
 export { positionSelectedMenuItem }
 export { updateObjectValue } from './update-object-value'
+export { removeDuplicateKeys } from './remove-duplicate-keys'
--- a/src/utils/remove-duplicate-keys.ts
+++ b/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,
+  )
+}
--- a/src/utils/update-object-value.ts
+++ b/src/utils/update-object-value.ts
@ -1,3 +1,5 @@
+import { isValueType } from '@/utils'
+
 import type { Recordable, AnyFC } from '@/types'

 /**
@ -42,7 +44,7 @@ export const updateObjectValue = <
    return
  }

-  if (typeof value === 'object' && value !== null) {
+  if (isValueType<object>(value, 'Object')) {
    targetObject[key] = {
      ...targetObject[key],
      ...value,
--- a/src/views/dashboard/index.tsx
+++ b/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
+              tag="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>
        ),
--- a/src/views/demo/barcode-demo.tsx
+++ b/src/views/demo/barcode-demo.tsx
--- a/src/views/demo/draggable-card.tsx
+++ b/src/views/demo/draggable-card.tsx
@ -0,0 +1,98 @@
+import { RDraggableCard } from '@/components'
+import { NButton, NCard, NFlex, NRadio, NRadioGroup, NSwitch } from 'naive-ui'
+
+import type { DefaultPosition } from '@/components'
+
+export default defineComponent({
+  name: 'DraggableCardDemo',
+  setup() {
+    const card3 = ref(false)
+    const domRef = useTemplateRef<HTMLElement>('domRef')
+    const positionRadioOptions = [
+      { label: 'center', value: 'center' },
+      { label: 'top-center', value: 'top-center' },
+      { label: 'bottom-center', value: 'bottom-center' },
+      { label: 'top-left', value: 'top-left' },
+      { label: 'top-right', value: 'top-right' },
+      { label: 'bottom-left', value: 'bottom-left' },
+      { label: 'bottom-right', value: 'bottom-right' },
+    ]
+    const positionRadioValue = ref('center')
+    const card3Dad = ref(true)
+
+    return {
+      card3,
+      card3Dad,
+      domRef,
+      positionRadioOptions,
+      positionRadioValue,
+    }
+  },
+  render() {
+    const { card3, domRef, positionRadioOptions } = this
+
+    return (
+      <div>
+        <div
+          ref="domRef"
+          style={{
+            width: '100%',
+            height: '400px',
+            backgroundColor: 'rgba(255, 10, 20, 1)',
+          }}
+        ></div>
+        <RDraggableCard animation title="Body">
+          我被限制在 body 中。
+        </RDraggableCard>
+        {card3 ? (
+          <RDraggableCard
+            animation
+            title="Custom Container"
+            restrictionElement={domRef}
+            closable
+            onClose={() => (this.card3 = false)}
+            defaultPosition={this.positionRadioValue as DefaultPosition}
+            dad={this.card3Dad}
+          >
+            {{
+              default: () =>
+                '我被限制在红色区域中。并且我支持 NCard 的所有配置与插槽。',
+              'header-extra': () => '其实我就是 NCard 封装的',
+              footer: () => '我支持 footer 插槽',
+              action: () => '我支持 action 插槽',
+            }}
+          </RDraggableCard>
+        ) : null}
+        <NCard title="显示与隐藏卡片">
+          <NFlex vertical>
+            <NFlex>
+              <NSwitch v-model:value={this.card3Dad}>
+                {{
+                  checked: () => '拖拽',
+                  unchecked: () => '禁用',
+                }}
+              </NSwitch>
+            </NFlex>
+            <NFlex>
+              <NRadioGroup v-model:value={this.positionRadioValue}>
+                {positionRadioOptions.map((curr) => (
+                  <NRadio key={curr.value} value={curr.value}>
+                    {curr.label}
+                  </NRadio>
+                ))}
+              </NRadioGroup>
+            </NFlex>
+            <NFlex>
+              <NButton
+                type="primary"
+                onClick={() => (this.card3 = !this.card3)}
+              >
+                点一下试试
+              </NButton>
+            </NFlex>
+          </NFlex>
+        </NCard>
+      </div>
+    )
+  },
+})
--- a/src/views/demo/flow-demo.tsx
+++ b/src/views/demo/flow-demo.tsx
@ -16,6 +16,8 @@ export default defineComponent({

    const getInst = () => {
      console.log(getFlowInstance())
+
+      window.$message.info('获取实例成功，请在 console 中查看')
    }

    setTimeout(() => {
--- a/src/views/demo/modal-demo/index.tsx
+++ b/src/views/demo/modal-demo/index.tsx
@ -16,7 +16,7 @@ export default defineComponent({
    const createCardModal = () => {
      create({
        title: '卡片模态框',
-        dad: true,
+        draggable: true,
        preset: 'card',
        content: () => (
          <div style="height: 3000px;">我可以被拖拽的全屏card模态框</div>
@ -30,7 +30,7 @@ export default defineComponent({
        title: '模态框',
        content: '内容',
        preset: 'dialog',
-        dad: true,
+        draggable: true,
      })
    }

@ -47,12 +47,7 @@ export default defineComponent({
      <NFlex vertical>
        <NCard title="props">
          <NFlex vertical>
-            <h3>
-              memoryPosition: 是否记住上一次被拖拽的位置，如果设置为
-              true，那么下一次打开的时候会自动定位到上一次的位置。
-            </h3>
            <h3>fullscreen: 全屏模态框。</h3>
-            <h3>dad: 启用拖拽，当配置为 false 时，会禁用拖拽效果。</h3>
          </NFlex>
        </NCard>
        <RModal
@ -67,7 +62,7 @@ export default defineComponent({
          v-model:show={this.modal2}
          preset="card"
          title="可拖拽卡片模态框"
-          dad
+          draggable
        >
          <p>我可以被拖拽</p>
        </RModal>
@ -75,7 +70,7 @@ export default defineComponent({
          v-model:show={this.modal3}
          preset="dialog"
          title="可拖拽卡片模态框"
-          dad
+          draggable
        >
          <p>我可以被拖拽</p>
        </RModal>
--- a/src/views/demo/table-pro-demo.tsx
+++ b/src/views/demo/table-pro-demo.tsx
@ -114,7 +114,7 @@ export default defineComponent({
    // 表格数据
    const tableDataRef = ref<RowData[]>([])
    // 表格列
-    const baseColumns: DataTableColumns<RowData> = [
+    const baseColumns = ref<DataTableColumns<RowData>>([
      {
        type: 'selection',
      },
@ -159,7 +159,7 @@ export default defineComponent({
        title: 'Remark',
        key: 'remark',
      },
-    ]
+    ])
    // 表格分页数据
    const itemCountRef = ref(0)
    // 查询条件
@ -452,7 +452,7 @@ export default defineComponent({
        <RTablePro
          onRegister={tableProRegister}
          data={tableDataRef}
-          columns={baseColumns}
+          v-model:columns={this.baseColumns}
          loading={loadingGetPersonList}
          // 如果需要设置分页功能，则该参数必传
          paginationCount={itemCountRef}
--- a/unplugin/.eslintrc-auto-import.json
+++ b/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
  }
 }
--- a/unplugin/auto-imports.d.ts
+++ b/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')
 }
--- a/vite-helper/mixin-css.ts
+++ b/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)
  }, '')
--- a/vite.plugin.config.ts
+++ b/vite.plugin.config.ts
@ -5,7 +5,7 @@ import viteVueJSX from '@vitejs/plugin-vue-jsx'
 import viteVeI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import viteInspect from 'vite-plugin-inspect'
 import viteSvgLoader from 'vite-svg-loader'
-import { analyzer, adapter } from 'vite-bundle-analyzer'
+import { analyzer } from 'vite-bundle-analyzer'
 import gzipPlugin from 'rollup-plugin-gzip'
 import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs'
 import viteAutoImport from 'unplugin-auto-import/vite'
@ -33,12 +33,12 @@ function onlyReportOptions(mode: string): PluginOption[] {
  }

  return [
-    adapter(
-      analyzer({
-        analyzerMode: 'server', // 以默认服务器代理打开文件
-        openAnalyzer: true, // 以默认服务器代理打开文件
-      }),
-    ),
+    analyzer({
+      // 以默认服务器代理打开文件
+      analyzerMode: 'server',
+      // 以默认服务器代理打开文件
+      openAnalyzer: true,
+    }),
  ]
 }
Author	SHA1	Message	Date
XiaoDaiGua-Ray	eb5a6aa9e2	version: v5.1.0	2025-02-25 17:38:30 +08:00
XiaoDaiGua-Ray	674539edd3	fix: 一些已知问题修复	2025-01-19 10:38:13 +08:00
XiaoDaiGua-Ray	ff0bcb5022	Merge pull request #30 from admover/patch-3 Update test.ts	2025-01-15 20:17:19 +08:00
admover	d3d98190a3	Update test.ts 拼写修正	2025-01-15 17:36:05 +08:00
XiaoDaiGua-Ray	0bb707bba0	version: v5.0.10	2025-01-15 16:32:36 +08:00
XiaoDaiGua-Ray	4bfdbccd88	version: v5.0.9	2025-01-03 21:44:32 +08:00
XiaoDaiGua-Ray	3b2bba391e	version: v5.0.8	2024-12-20 18:23:55 +08:00