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
41 changed files with 1626 additions and 1293 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,30 @@
+## 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
--- 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.9",
+  "version": "5.1.0",
  "type": "module",
  "engines": {
    "node": "^18.0.0 || ^20.0.0 || >=22.0.0",
@ -33,26 +33,27 @@
    ]
  },
  "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.4",
+    "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"
@ -68,36 +69,36 @@
    "@types/jsbarcode": "3.11.4",
    "@types/lodash-es": "4.17.12",
    "@types/mockjs": "1.0.10",
-    "@types/three": "0.169.0",
-    "@typescript-eslint/eslint-plugin": "8.18.2",
-    "@typescript-eslint/parser": "8.18.2",
+    "@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": "1.5.2",
+    "@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.2.1",
+    "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": "14.12.3",
+    "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.83.0",
+    "sass": "1.83.4",
    "svg-sprite-loader": "6.0.11",
    "typescript": "5.6.3",
-    "unplugin-auto-import": "0.19.0",
+    "unplugin-auto-import": "19.0.0",
    "unplugin-vue-components": "0.28.0",
-    "vite": "6.0.7",
-    "vite-bundle-analyzer": "0.15.2",
+    "vite": "6.1.0",
+    "vite-bundle-analyzer": "0.16.0",
    "vite-plugin-cdn2": "1.1.0",
    "vite-plugin-ejs": "1.7.0",
    "vite-plugin-eslint": "1.8.1",
@ -105,8 +106,8 @@
    "vite-plugin-mock-dev-server": "1.8.3",
    "vite-plugin-svg-icons": "2.0.1",
    "vite-svg-loader": "5.1.0",
-    "vitest": "2.0.5",
-    "vue-tsc": "2.1.10"
+    "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/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
@ -94,6 +94,7 @@ export const APP_CATCH_KEY_PREFIX = ''
 *   - appPiniaSigningStore: pinia signing store key
 *   - appVersionProvider: 版本信息缓存 key
 *   - appMenuTagOptions: 标签页菜单列表
+ *   - appLockScreenPasswordKey: 锁屏密码缓存 key
 */
 export const APP_CATCH_KEY = {
  signing: 'signing',
@ -108,6 +109,7 @@ export const APP_CATCH_KEY = {
  isAppLockScreen: 'isAppLockScreen',
  appGlobalSearchOptions: 'appGlobalSearchOptions',
  appMenuTagOptions: 'appMenuTagOptions',
+  appLockScreenPasswordKey: 'appLockScreenPasswordKey',
 } as const

 /**
--- 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
@ -5,10 +5,11 @@ import { Teleport, Transition } from 'vue'

 import interact from 'interactjs'
 import { cardProps } from 'naive-ui'
-import { unrefElement, completeSize, queryElements, isValueType } from '@/utils'
+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]

@ -17,12 +18,15 @@ type Padding = {
  y: number
 }

-type Position =
+export type DefaultPosition =
  | Padding
  | 'top-left'
  | 'top-right'
  | 'bottom-left'
  | 'bottom-right'
+  | 'center'
+  | 'top-center'
+  | 'bottom-center'

 const props = {
  ...cardProps,
@ -69,7 +73,7 @@ const props = {
   * @default { x: 0, y: 0 }
   */
  defaultPosition: {
-    type: [Object, String] as PropType<Position>,
+    type: [Object, String] as PropType<DefaultPosition>,
    default: () => ({
      x: 0,
      y: 0,
@ -132,7 +136,7 @@ export default defineComponent({
      x: 0,
      y: 0,
    }
-    const CONTAINER_ID = 'draggable-card-container'
+    const CONTAINER_ID = 'r-draggable-card-container'
    const cssVars = computed(() => {
      return {
        '--r-draggable-card-width': completeSize(props.width),
@ -140,7 +144,12 @@ export default defineComponent({
      }
    })
    let isSetup = false
+    const cacheProps = {
+      defaultPosition: props.defaultPosition,
+      dad: props.dad,
+    }

+    // 创建 DraggableCard 容器
    const createDraggableCardContainer = () => {
      if (!document.getElementById(CONTAINER_ID)) {
        const container = document.createElement('div')
@ -152,6 +161,7 @@ export default defineComponent({

    createDraggableCardContainer()

+    // 获取 card, restrictionElement 的 dom 信息
    const getDom = () => {
      const card = unrefElement(cardRef)
      const re =
@ -167,21 +177,17 @@ export default defineComponent({
        restrictionElement = unrefElement<HTMLElement>(re as any) as HTMLElement
      }

-      if (!restrictionElement) {
-        throw new Error(
-          '[RDraggableCard]: if set restrictionElement, it must be a HTMLElement or a ref of 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,
@ -192,6 +198,33 @@ export default defineComponent({

      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 }

@ -227,10 +260,11 @@ export default defineComponent({
      }
    }

+    // 初始化设置 card 的位置，并且根据配置启用拖拽
    const setupDraggable = () => {
      const { card, restrictionElement } = getDom()

-      if (!card || !props.dad) {
+      if (!card) {
        return
      }

@ -255,6 +289,10 @@ export default defineComponent({
        position.y = p.y
      }

+      if (!props.dad) {
+        return
+      }
+
      interactInst = interact(card)
        .draggable({
          inertia: true,
@ -277,15 +315,30 @@ export default defineComponent({
      isSetup = true
    }

+    // 取消拖拽
+    const resetDraggable = () => {
+      interactInst?.unset()
+
+      interactInst = null
+    }
+
+    // 更新拖拽
+    const refreshDraggableWhenPropsChange = (fn: AnyFC) => {
+      isSetup = false
+
+      fn()
+      setupDraggable()
+    }
+
    expose()

    watchEffect(() => {
-      if (props.dad) {
-        setupDraggable()
-      } else {
-        interactInst?.unset()
+      props.dad ? setupDraggable() : resetDraggable()

-        interactInst = null
+      if (props.defaultPosition !== cacheProps.defaultPosition) {
+        refreshDraggableWhenPropsChange(() => {
+          cacheProps.defaultPosition = props.defaultPosition
+        })
      }
    })

--- a/src/components/base/RDraggableCard/index.scss
+++ b/src/components/base/RDraggableCard/index.scss
@ -5,7 +5,7 @@
  z-index: var(--r-draggable-card-z-index);
 }

-#draggable-card-container {
+#r-draggable-card-container {
  position: fixed;
  top: 0;
  left: 0;
--- 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/index.ts
+++ b/src/components/index.ts
@ -33,3 +33,4 @@ export type {
  FlowGraphData,
  FlowOptions,
 } from './base/RFlow/src/types'
+export type { DefaultPosition } from './base/RDraggableCard/DraggableCard'
--- 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/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/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/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/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,6 +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/views/dashboard/index.tsx
+++ b/src/views/dashboard/index.tsx
@ -50,7 +50,7 @@ const Dashboard = defineComponent({
          <NFlex align="center">
            如果有希望补充的功能可以在
            <NText
-              as="a"
+              tag="a"
              class="dashboard-link"
              type="primary"
              {...{
--- 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
@ -1,19 +1,35 @@
 import { RDraggableCard } from '@/components'
-import { NButton, NCard, NFlex } from 'naive-ui'
+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 } = this
+    const { card3, domRef, positionRadioOptions } = this

    return (
      <div>
@ -22,7 +38,7 @@ export default defineComponent({
          style={{
            width: '100%',
            height: '400px',
-            backgroundColor: 'red',
+            backgroundColor: 'rgba(255, 10, 20, 1)',
          }}
        ></div>
        <RDraggableCard animation title="Body">
@ -35,6 +51,8 @@ export default defineComponent({
            restrictionElement={domRef}
            closable
            onClose={() => (this.card3 = false)}
+            defaultPosition={this.positionRadioValue as DefaultPosition}
+            dad={this.card3Dad}
          >
            {{
              default: () =>
@ -46,9 +64,33 @@ export default defineComponent({
          </RDraggableCard>
        ) : null}
        <NCard title="显示与隐藏卡片">
-          <NButton type="primary" onClick={() => (this.card3 = !this.card3)}>
-            点一下试试
-          </NButton>
+          <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/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