version: v5.0.4

.eslintrc.cjs

@@ -297,5 +297,20 @@ module.exports = {
         next: ['while', 'do', 'switch'],
       },
     ],
+    '@typescript-eslint/no-unused-expressions': [
+      'error',
+      {
+        allowShortCircuit: true,
+        allowTernary: true,
+        allowTaggedTemplates: true,
+      },
+    ],
+    '@typescript-eslint/no-empty-object-type': [
+      'error',
+      {
+        allowInterfaces: 'with-single-extends',
+        allowObjectTypes: 'always',
+      },
+    ],
   },
 }

.vscode/settings.json

@@ -32,6 +32,7 @@
     "internalkey",
     "jsbarcode",
     "linebreak",
+    "logicflow",
     "macarons",
     "menutag",
     "ndata",
@@ -40,6 +41,7 @@
     "Popselect",
     "precommit",
     "siderbar",
+    "snapline",
     "stylelint",
     "WUJIE",
     "zlevel"

CHANGELOG.md

@@ -1,5 +1,33 @@
 # CHANGE LOG
 
+## 5.0.4
+
+将 `ts` 版本与 `eslint` 解析插件版本更新至最新版，并且同步解决了以前历史遗留的一些问题。
+
+并且，在该版本做了一些全局注入方式调整，请谨慎更新。
+
+## Feats
+
+- 移除 `vite-plugin-compression` 插件，使用 `rollup-plugin-gzip` 代替
+- 更新 `@vitejs/plugin-vue-jsx` 版本至 `4.0.1`
+- 优化注释
+- 默认设置 `ContentWrapper` 的 `content-wrapper` 内容展示区域的宽高为 `100%`，继承父容器的宽高；该样式会自动的计算，也就是说会自动的适配不同尺寸的屏幕输出与判断是否显示 `FeatureWrapper`, `FooterWrapper`
+- 更新 `@typescript-eslint/eslint-plugin`, `@typescript-eslint/parser` 版本至 `8.13.0`
+- 更新 `typescript` 版本至 `5.6.3`
+- 更新 `vue-tsc` 版本至 `2.1.10`
+- 更新 `pnpm` 包管理器版本至 `9.12.3`
+- 新增 `RFlow` 基础流程图组件（后期有时间会逐步加强该组件）
+- 移除 `useElementFullscreen` 方法 `currentWindowSize` 返回值
+- 新增 `--html-height`, `--html-width` 的全局 `css var` 属性，实时获取浏览器的尺寸
+- 样式注入现在由注入至 `body` 改为注入至 `html`，避免 `teleport` 传送至 `body` 外的元素不能使用全局样式的问题
+- `useBadge.show` 方法新增 `extraOption` 配置项，允许在显示 `badge` 到时候，传入额外的 `options` 配置项
+
+## Fixes
+
+- 修复菜单折叠后，`SiderBarLogo` 标题样式丢失问题
+- 修复 `useModal` 因为 `Omit` 原因导致类型丢失问题，现在直接使用 `ModalProps` 作为类型
+- 修复 `useModal` 创建全屏 `card` 的时候，内容区域边距样式被覆盖的问题，现在会尊重原有的 `card` 样式
+
 ## 5.0.3
 
 个性化配置能力再次提升。

__test__/hooks/useDayjs.spec.ts

@@ -17,8 +17,8 @@ describe('useDayjs', () => {
     }
     const localSpy = vi.spyOn(m, 'locale')
 
-    m.locale('en')
-    m.locale('zh-cn')
+    m.locale('en-US')
+    m.locale('zh-CN')
 
     expect(localSpy).toHaveBeenCalledTimes(2)
   })

package.json

@@ -1,11 +1,11 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "5.0.3",
+  "version": "5.0.4",
   "type": "module",
   "engines": {
     "node": "^18.0.0 || >=20.0.0",
-    "pnpm": ">=8.0.0"
+    "pnpm": ">=9.0.0"
   },
   "scripts": {
     "dev": "vite",
@@ -33,6 +33,8 @@
     ]
   },
   "dependencies": {
+    "@logicflow/core": "2.0.6",
+    "@logicflow/extension": "2.0.10",
     "@vueuse/core": "^11.1.0",
     "axios": "^1.7.5",
     "clipboard": "^2.0.11",
@@ -61,14 +63,13 @@
     "@interactjs/types": "1.10.21",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@types/crypto-js": "^4.2.2",
-    "@types/dom-to-image": "2.6.7",
     "@types/jsbarcode": "3.11.4",
     "@types/lodash-es": "^4.17.12",
     "@types/mockjs": "1.0.7",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "@typescript-eslint/parser": "^8.13.0",
     "@vitejs/plugin-vue": "^5.1.0",
-    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vitest/ui": "1.4.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
@@ -87,15 +88,15 @@
     "postcss": "^8.4.38",
     "postcss-px-to-viewport-8-with-include": "1.2.2",
     "prettier": "^3.2.5",
+    "rollup-plugin-gzip": "4.0.1",
     "sass": "1.71.1",
     "svg-sprite-loader": "^6.0.11",
-    "typescript": "^5.2.2",
+    "typescript": "^5.6.3",
     "unplugin-auto-import": "^0.18.2",
     "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.3",
     "vite-bundle-analyzer": "0.9.4",
     "vite-plugin-cdn2": "1.1.0",
-    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-eslint": "1.8.1",
     "vite-plugin-inspect": "^0.8.3",
@@ -104,7 +105,7 @@
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "4.3.2",
     "vitest": "1.5.2",
-    "vue-tsc": "^2.0.13"
+    "vue-tsc": "^2.1.10"
   },
   "description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
   "main": "index.ts",

src/app-components/provider/AppStyleProvider/index.tsx

@@ -7,7 +7,8 @@ import {
   getStorage,
 } from '@/utils'
 import { useSettingGetters } from '@/store'
-import { APP_CATCH_KEY } from '@/app-config'
+import { APP_CATCH_KEY, THEME_CLASS_NAMES } from '@/app-config'
+import { useWindowSize } from '@vueuse/core'
 
 import type { SettingState } from '@/store/modules/setting/types'
 
@@ -15,39 +16,43 @@ export default defineComponent({
   name: 'AppStyleProvider',
   setup(_, { expose }) {
     const { getAppTheme } = useSettingGetters()
+    const { height, width } = useWindowSize()
 
-    /** 同步主题色变量至 body, 如果未获取到缓存值则已默认值填充 */
+    // 同步主题色变量至 html，如果未获取到缓存值则已默认值填充
     const syncPrimaryColorToBody = () => {
       const {
         appPrimaryColor: { primaryColor, primaryFadeColor },
       } = __APP_CFG__ // 默认主题色
-      const body = document.body
+      const html = document.documentElement
 
+      // 获取缓存 naive ui 配置项
       const primaryColorOverride = getStorage<SettingState>(
         APP_CATCH_KEY.appPiniaSettingStore,
         'localStorage',
-      ) // 获取缓存 naive ui 配置项
+      )
 
       if (primaryColorOverride) {
+        // 获取主色调
         const p = get(
           primaryColorOverride,
           'primaryColorOverride.common.primaryColor',
           primaryColor,
-        ) // 获取主色调
-        const fp = colorToRgba(p, 0.38) // 将主色调任意颜色转换为 rgba 格式
+        )
+        // 将主色调任意颜色转换为 rgba 格式
+        const fp = colorToRgba(p, 0.38)
 
-        /** 设置全局主题色 css 变量 */
-        body.style.setProperty('--ray-theme-primary-color', p) // 主色调
-        body.style.setProperty(
+        // 设置全局主题色 css 变量
+        html.style.setProperty('--ray-theme-primary-color', p) // 主色调
+        html.style.setProperty(
           '--ray-theme-primary-fade-color',
           fp || primaryFadeColor,
         ) // 降低透明度后的主色调
       }
     }
 
-    /** 隐藏加载动画 */
+    // 隐藏加载动画
     const hiddenLoadingAnimation = () => {
-      /** pre-loading-animation 是默认 id */
+      // pre-loading-animation 是默认 id
       const el = document.getElementById('pre-loading-animation')
 
       if (el) {
@@ -57,38 +62,30 @@ export default defineComponent({
       }
     }
 
-    /** 切换主题时, 同步更新 body class 以便于进行自定义 css 配置 */
+    // 切换主题时，同步更新 html class 以便于进行自定义 css 配置
     const updateGlobalThemeClass = (bool: boolean) => {
-      /**
-       *
-       * 初始化时根据当前主题色进行初始化 body 的 class 属性
-       *
-       * 根据 getAppTheme 进行初始化
-       */
-      const body = document.body
-      const darkClassName = 'ray-template--dark' // 暗色类名
-      const lightClassName = 'ray-template--light' // 明亮色类名
+      const html = document.documentElement
+      const { darkClassName, lightClassName } = THEME_CLASS_NAMES
 
       bool
-        ? removeClass(body, lightClassName)
-        : removeClass(body, darkClassName)
+        ? removeClass(html, lightClassName)
+        : removeClass(html, darkClassName)
 
-      setClass(body, bool ? darkClassName : lightClassName)
+      setClass(html, bool ? darkClassName : lightClassName)
     }
 
     syncPrimaryColorToBody()
     hiddenLoadingAnimation()
 
-    // 当切换主题时，更新 body 当前的注入 class
-    watch(
-      () => getAppTheme.value,
-      (ndata) => {
-        updateGlobalThemeClass(ndata)
-      },
-      {
-        immediate: true,
-      },
-    )
+    watchEffect(() => {
+      // 当切换主题时，更新 html 当前的注入 class
+      updateGlobalThemeClass(getAppTheme.value)
+      // 注入全局宽高尺寸
+      setStyle(document.documentElement, {
+        '--html-height': `${height.value}px`,
+        '--html-width': `${width.value}px`,
+      })
+    })
 
     expose()
   },

src/app-config/app-config.ts

@@ -1,6 +1,16 @@
 import type { AppMenuConfig, PreloadingConfig } from '@/types'
 import type { MessageProviderProps } from 'naive-ui'
 
+/**
+ *
+ * @description
+ * 全局注入到 html 的样式类名。
+ */
+export const THEME_CLASS_NAMES = {
+  darkClassName: 'ray-template--dark',
+  lightClassName: 'ray-template--light',
+}
+
 /**
  *
  * @description

src/axios/utils/interceptor.ts

@@ -71,7 +71,9 @@ export const useAxiosInterceptor = () => {
     func: AnyFC[],
     fetchType: FetchType,
   ) => {
-    fetchType === 'ok' ? (implement[key] = func) : (errorImplement[key] = func)
+    fetchType === 'ok'
+      ? (implement[key as keyof ImplementQueue] = func)
+      : (errorImplement[key as keyof ErrorImplementQueue] = func)
   }
 
   /** 获取队列中所有的所有拦截器方法 */
@@ -79,7 +81,9 @@ export const useAxiosInterceptor = () => {
     key: keyof ImplementQueue | keyof ErrorImplementQueue,
     fetchType: FetchType,
   ): AnyFC[] => {
-    return fetchType === 'ok' ? implement[key] : errorImplement[key]
+    return fetchType === 'ok'
+      ? implement[key as keyof ImplementQueue]
+      : errorImplement[key as keyof ErrorImplementQueue]
   }
 
   /** 队列执行器 */
@@ -101,8 +105,8 @@ export const useAxiosInterceptor = () => {
   ) => {
     const funcArr =
       fetchType === 'ok'
-        ? implement[implementKey]
-        : errorImplement[implementKey]
+        ? implement[implementKey as keyof ImplementQueue]
+        : errorImplement[implementKey as keyof ErrorImplementQueue]
     const instance = getAxiosInstance(key)
     const { MODE } = getAppEnvironment()
 

src/components/base/RFlow/index.ts

@@ -0,0 +1,9 @@
+import RFlow from './src/Flow'
+import flowProps from './src/props'
+import { useFlow } from './src/hooks'
+
+import type { ExtractPublicPropTypes } from 'vue'
+
+export type FlowProps = ExtractPublicPropTypes<typeof flowProps>
+
+export { RFlow, flowProps, useFlow }

src/components/base/RFlow/src/Flow.tsx

@@ -0,0 +1,155 @@
+import './index.scss'
+import '@logicflow/core/lib/style/index.css'
+
+import { useTemplateRef } from 'vue'
+import props from './props'
+import { completeSize, call } from '@/utils'
+import LogicFlow from '@logicflow/core'
+import { omit } from 'lodash-es'
+
+import type { FlowGraphData, G } from './types'
+import type { WatchStopHandle } from 'vue'
+
+// 是否首次注册插件
+let isSetup = false
+
+export default defineComponent({
+  name: 'RFlow',
+  props,
+  setup(props) {
+    // 流程图 dom 实例
+    const flowDomRef = useTemplateRef<HTMLElement>('flowDomRef')
+    // css 变量
+    const cssVars = computed(() => {
+      const { width, height } = props
+      const cssVar = {
+        '--r-flow-width': completeSize(width),
+        '--r-flow-height': completeSize(height),
+      }
+
+      return cssVar
+    })
+    // 流程图实例
+    const logicFlowInstRef = shallowRef<LogicFlow>()
+    // 需要禁用的流程图配置项
+    const readonlyOptions = {
+      nodeTextEdit: false,
+      edgeTextEdit: false,
+      textEdit: false,
+    }
+    // watchData 回调
+    let watchDataStop: WatchStopHandle
+    // 默认流程图数据
+    const defaultGraphData = {
+      nodes: [],
+      edges: [],
+    }
+    const cacheProps = {
+      readonly: props.readonly,
+    }
+
+    // 注册流程图插件
+    const registerExtension = () => {
+      if (!isSetup) {
+        props.use?.filter(Boolean).forEach((curr) => LogicFlow.use(curr))
+
+        isSetup = true
+      }
+    }
+
+    // 动态根据 readonly 配置项修改流程图配置
+    const updateFlowConfig = (bool: boolean) => {
+      if (!logicFlowInstRef.value) {
+        return
+      }
+
+      const ops = Object.entries(readonlyOptions).reduce(
+        (acc, [key]) => {
+          acc[key as keyof typeof acc] = !bool
+
+          return acc
+        },
+        {} as typeof readonlyOptions,
+      )
+
+      // 单独处理 isSilentMode 配置项
+      Object.assign(readonlyOptions, ops, {
+        isSilentMode: bool,
+      })
+      logicFlowInstRef.value.updateEditConfig(readonlyOptions)
+    }
+
+    /**
+     *
+     * @param graphData 流程图数据
+     *
+     * @description
+     * 初始化流程图。
+     *
+     * 会自动忽略 container 属性，即使是配置了。
+     */
+    const setupFlowRender = (graphData?: FlowGraphData) => {
+      registerExtension()
+
+      if (!flowDomRef.value) {
+        return
+      }
+
+      const { options, readonly } = props
+
+      // 初始化流程图实例
+      logicFlowInstRef.value = new LogicFlow({
+        container: unref(flowDomRef.value),
+        ...omit(options, 'container'),
+      })
+
+      // 渲染
+      logicFlowInstRef.value.render((graphData || defaultGraphData) as G)
+      // 是否处于只读模式，如果是只读模式，则覆盖 options 配置项为 readonlyOptions
+      updateFlowConfig(readonly)
+    }
+
+    watchEffect(() => {
+      if (props.watchData) {
+        watchDataStop = watch(
+          () => props.data,
+          (ndata) => {
+            if (logicFlowInstRef.value) {
+              ndata && logicFlowInstRef.value.renderRawData(ndata as G)
+            } else {
+              setupFlowRender(ndata)
+            }
+          },
+        )
+      } else {
+        watchDataStop?.()
+      }
+
+      if (props.readonly !== cacheProps.readonly) {
+        updateFlowConfig(props.readonly)
+
+        cacheProps.readonly = props.readonly
+      }
+    })
+
+    onMounted(() => {
+      setupFlowRender()
+
+      const { onRegister } = props
+
+      if (onRegister && logicFlowInstRef.value) {
+        call(onRegister, logicFlowInstRef.value)
+      }
+    })
+
+    return {
+      flowDomRef,
+      cssVars,
+    }
+  },
+  render() {
+    const { cssVars } = this
+
+    return <div class="r-flow" style={[cssVars]} ref="flowDomRef"></div>
+  },
+})

src/components/base/RFlow/src/constant.ts

@@ -0,0 +1,17 @@
+import type { FlowOptions } from './types'
+
+/**
+ *
+ * @description
+ * RFlow 默认初始化流程图配置项。
+ * 默认，使用组件内置的 container，所以会自动忽略该属性，即使是传递了。
+ */
+export const getDefaultFlowOptions = (): FlowOptions => {
+  return {
+    grid: true,
+    partial: false,
+    keyboard: {
+      enabled: true,
+    },
+  }
+}

src/components/base/RFlow/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useFlow } from './useFlow'

src/components/base/RFlow/src/hooks/useFlow.ts

@@ -0,0 +1,47 @@
+import type LogicFlow from '@logicflow/core'
+
+export const useFlow = () => {
+  let flowInst: LogicFlow
+
+  /**
+   *
+   * @param inst flow instance
+   *
+   * @description
+   * 注册当前 flow 实例，用于使用 useFlow hook。
+   */
+  const register = (inst: LogicFlow) => {
+    if (inst) {
+      flowInst = inst
+    }
+  }
+
+  /**
+   *
+   * @description
+   * 获取当前 flow 实例。
+   *
+   * 如果未在调用前注册 onRegister 事件，则会抛出异常。
+   *
+   * @example
+   * const [register, { getFlowInstance }] = useFlow()
+   *
+   * const inst = getFlowInstance()
+   */
+  const getFlowInstance = () => {
+    if (!flowInst) {
+      throw new Error(
+        '[useFlow]: flow instance is not ready yet. if you are using useFlow, please make sure you have called register method in onRegister event.',
+      )
+    }
+
+    return flowInst
+  }
+
+  return [
+    register,
+    {
+      getFlowInstance,
+    },
+  ] as const
+}

src/components/base/RFlow/src/index.scss

@@ -0,0 +1,10 @@
+.r-flow {
+  width: var(--r-flow-width);
+  height: var(--r-flow-height);
+}
+
+.lf-text-input,
+.lf-control-text,
+.lf-menu-item {
+  color: initial;
+}

src/components/base/RFlow/src/props.ts

@@ -0,0 +1,104 @@
+import { getDefaultFlowOptions } from './constant'
+
+import type { FlowGraphData, FlowOptions, ExtensionType } from './types'
+import type LogicFlow from '@logicflow/core'
+import type { MaybeArray } from '@/types'
+
+const props = {
+  /**
+   *
+   * @description
+   * 自定义全局插件。
+   * 需要在流程图初始化之前注册，否则无效。
+   *
+   * 需要在引入插件之前，导入对应的基础 css 文件。
+   *
+   * @see https://site.logic-flow.cn/tutorial/extension/intro
+   */
+  use: {
+    type: Array as PropType<ExtensionType[]>,
+    default: void 0,
+  },
+  /**
+   *
+   * @description
+   * 是否主动监听 data 变化，重新渲染流程图。
+   */
+  watchData: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   *
+   * @description
+   * 流程图是否可以编辑与操作。
+   *
+   * 该配置项会覆盖 options 配置项，拥有最高的优先级。
+   *
+   * @default false
+   */
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   *
+   * @description
+   * 流程图宽度。
+   *
+   * @default '100%'
+   */
+  width: {
+    type: [String, Number] as PropType<string | number>,
+    default: '100%',
+  },
+  /**
+   *
+   * @description
+   * 流程图高度。
+   *
+   * @default '100%'
+   */
+  height: {
+    type: [String, Number] as PropType<string | number>,
+    default: '100%',
+  },
+  /**
+   *
+   * @description
+   * 流程图数据。
+   *
+   * @default undefined
+   */
+  data: {
+    type: Object as PropType<FlowGraphData>,
+    default: void 0,
+  },
+  /**
+   *
+   * @description
+   * 流程图配置项。
+   *
+   * @default undefined
+   */
+  options: {
+    type: Object as PropType<FlowOptions>,
+    default: getDefaultFlowOptions(),
+  },
+  /**
+   *
+   * @description
+   * RFlow 注册挂载成功后触发的事件。
+   * 可以结合 useFlow 方法中的 register 方法使用，然后便捷的使用 hooks。
+   *
+   * @default undefined
+   */
+  onRegister: {
+    type: [Function, Array] as PropType<
+      MaybeArray<(flowInst: LogicFlow) => void>
+    >,
+    default: void 0,
+  },
+}
+
+export default props

src/components/base/RFlow/src/types.ts

@@ -0,0 +1,61 @@
+import type LogicFlow from '@logicflow/core'
+import type { Recordable, SetRequired } from '@/types'
+
+/**
+ *
+ * @description
+ * 因为 Omit 剔除属性，会导致类型提示丢失。
+ * 所以，这里手动的声明 Options 所需属性，避免这个问题。
+ *
+ * 后期改动的时候，需要关注官方的文档变更情况，及时的同步跟新。
+ */
+type OptionsPickKeys =
+  | 'width'
+  | 'height'
+  | 'background'
+  | 'grid'
+  | 'partial'
+  | 'keyboard'
+  | 'style'
+  | 'edgeType'
+  | 'adjustEdge'
+  | 'textMode'
+  | 'edgeTextMode'
+  | 'nodeTextMode'
+  | 'allowRotate'
+  | 'allowResize'
+  | 'isSilentMode'
+  | 'stopScrollGraph'
+  | 'stopZoomGraph'
+  | 'stopMoveGraph'
+  | 'animation'
+  | 'history'
+  | 'outline'
+  | 'snapline'
+  | 'textEdit'
+  | 'guards'
+  | 'overlapMode'
+  | 'plugins'
+  | 'pluginsOptions'
+  | 'disabledPlugins'
+  | 'disabledTools'
+  | 'idGenerator'
+  | 'edgeGenerator'
+  | 'customTrajectory'
+
+export type G = Parameters<LogicFlow['render']>[0]
+
+export type NodeConfig = SetRequired<NonNullable<G['nodes']>[0], 'id'> &
+  Recordable
+
+export type EdgeConfig = SetRequired<NonNullable<G['edges']>[0], 'id'> &
+  Recordable
+
+export interface FlowGraphData {
+  nodes?: NodeConfig[]
+  edges?: EdgeConfig[]
+}
+
+export type FlowOptions = Pick<LogicFlow['options'], OptionsPickKeys>
+
+export type ExtensionType = Parameters<typeof LogicFlow.use>[0]

src/components/base/RModal/src/hooks/useModal.ts

@@ -5,12 +5,10 @@ import { R_MODAL_CLASS, CSS_VARS_KEYS } from '../constant'
 
 import type { RModalProps } from '../types'
 
-interface UseModalCreateOptions extends Omit<RModalProps, 'memo'> {}
-
 const useModal = () => {
   const { create: naiveCreate, destroyAll: naiveDestroyAll } = useNaiveModal()
 
-  const create = (options: UseModalCreateOptions) => {
+  const create = (options: RModalProps) => {
     const { content, ...rest } = options
     let contentNode = content
 
@@ -27,7 +25,7 @@ const useModal = () => {
             style: {
               width: 'auto',
               height:
-                'calc(100vh - 29px - var(--n-padding-bottom) - var(--n-padding-bottom) - var(--n-padding-top))',
+                'calc(var(--html-height) - 29px - var(--n-padding-bottom) - var(--n-padding-bottom) - var(--n-padding-top))',
             },
           },
           {
@@ -68,17 +66,6 @@ const useModal = () => {
 
       // preset 为 card，fullscreen 为 true 时，最大化 modal
       if (fullscreen && preset === 'card') {
-        const cardContentElement =
-          modalElement.querySelector<HTMLElement>('.n-card__content')
-
-        if (cardContentElement) {
-          setStyle(cardContentElement, {
-            maxHeight: `calc(100vh - 9px - var(--n-padding-bottom) - var(--n-padding-bottom) - var(--n-padding-top))`,
-            overflowY: 'hidden',
-            padding: '0',
-          })
-        }
-
         setStyle(modalElement, {
           width: '100%',
           height: '100vh',

src/components/base/RTable/src/Table.tsx

@@ -150,9 +150,9 @@ export default defineComponent({
       const keys = Object.keys(propsPopselectValue.value)
 
       keys.forEach((key) => {
-        propsPopselectValue.value[key] = value.includes(
-          key as PropsComponentPopselectKeys,
-        )
+        propsPopselectValue.value[
+          key as keyof typeof propsPopselectValue.value
+        ] = value.includes(key as PropsComponentPopselectKeys)
       })
     }
 

src/components/base/RTable/src/components/C.tsx

@@ -191,8 +191,9 @@ export default defineComponent({
     }
 
     const fixedClick: FixedClick = (type, option, index) => {
-      const key = `${type}FixedActivated`
-      const otherKey = `${type === 'left' ? 'right' : 'left'}FixedActivated`
+      const key = `${type}FixedActivated` as const
+      const otherKey =
+        `${type === 'left' ? 'right' : 'left'}FixedActivated` as const
 
       option[otherKey] = false
       option[key] = !option[key]

src/components/index.ts

@@ -13,6 +13,7 @@ export * from './base/RForm'
 export * from './base/RSegment'
 export * from './base/RBarcode'
 export * from '../components/pro/RTablePro'
+export * from './base/RFlow'
 export { RCollapse }
 
 // 导出自定义组件类型
@@ -25,3 +26,9 @@ export type * from './base/RForm/src/types'
 export type * from './base/RModal/src/types'
 export type * from './base/RSegment/src/types'
 export type * from './base/RBarcode/src/types'
+export type {
+  NodeConfig,
+  EdgeConfig,
+  FlowGraphData,
+  FlowOptions,
+} from './base/RFlow/src/types'

src/directives/types.ts

@@ -1,12 +1,12 @@
-import type { Directive } from 'vue'
-import type { App } from 'vue'
+import type { Directive, App } from 'vue'
+import type { Recordable } from '@/types'
 
 export type { DebounceBindingOptions } from './modules/debounce/types'
 export type { ThrottleBindingOptions } from './modules/throttle/types'
 
 export type CustomDirectiveFC<T, K> = () => Directive<T, K>
 
-export interface DirectiveModules<T = unknown, K = unknown> extends Object {
+export interface DirectiveModules<T = unknown, K = unknown> extends Recordable {
   default: CustomDirectiveFC<T, K>
 }
 

src/directives/utils/combine.ts

@@ -11,7 +11,7 @@ export const combineDirective = <
       const fc = directiveModules[curr]?.default
 
       if (typeof fc === 'function') {
-        pre[curr] = fc
+        pre[curr as K] = fc
 
         return pre
       } else {

src/global-variable/variable.ts

@@ -15,6 +15,8 @@
  * createVariableState({ your state })
  */
 
+import { updateObjectValue } from '@/utils'
+
 import type { AnyFC } from '@/types'
 
 /**
@@ -57,11 +59,7 @@ export function setVariable<T extends VariableStateKey, FC extends AnyFC>(
   value: VariableState[T],
   cb?: FC,
 ) {
-  if (Object.hasOwn(variableState, key)) {
-    variableState[key] = value
-
-    cb?.()
-  }
+  updateObjectValue(variableState, key, value, cb)
 }
 
 /**

src/hooks/template/useBadge.ts

@@ -77,6 +77,7 @@ export function useBadge() {
   /**
    *
    * @param target 目标菜单 key 或者菜单项（AppMenuOption)
+   * @param extraOption 菜单标记配置项
    *
    * @example
    * const { show } = useBadge()
@@ -84,8 +85,12 @@ export function useBadge() {
    * show('your key')
    * show({ ...AppMenuOption })
    */
-  const show = (target: BadgeKey) => {
+  const show = (
+    target: BadgeKey,
+    extraOption?: Omit<AppMenuExtraOptions, 'show'>,
+  ) => {
     normalOption(target, 'show', {
+      ...extraOption,
       show: true,
     })
   }

src/hooks/template/useWatermark.ts

@@ -16,7 +16,7 @@ export const useWatermark = () => {
    */
   const setWatermarkContent = (content: string) => {
     const { getWatermarkConfig } = useSettingGetters()
-    const assignWatermark = Object.assign(getWatermarkConfig.value, {
+    const assignWatermark = Object.assign({}, getWatermarkConfig.value, {
       content,
     })
     const { updateSettingState } = useSettingActions()

src/hooks/web/useDayjs.ts

@@ -1,6 +1,8 @@
 import dayjs from 'dayjs'
 import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config'
 
+import type { DayjsLocalMap } from '@/types'
+
 export interface FormatOption {
   format?: string
 }
@@ -19,7 +21,7 @@ export interface StartAndEndOfDay {
   formatEndOfDay: string
 }
 
-export type LocalKey = typeof DEFAULT_DAYJS_LOCAL
+export type LocalKey = keyof DayjsLocalMap
 
 const defaultDayjsFormat = 'YYYY-MM-DD HH:mm:ss'
 

src/hooks/web/useDomToImage.ts

@@ -133,7 +133,11 @@ export const useDomToImage = <T extends HTMLElement>(
         return reject('useDomToImage: element is undefined.')
       }
 
-      domToImageMethods[imageType ?? _imageType ?? 'jpeg']?.(element, options)
+      const imageTypeKey = (imageType ??
+        _imageType ??
+        'jpeg') as keyof typeof domToImageMethods
+
+      domToImageMethods[imageTypeKey]?.(element, options)
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         .then((res: any) => {
           created?.(res, element)

src/hooks/web/useElementFullscreen.ts

@@ -1,8 +1,6 @@
 import { unrefElement, effectDispose, isValueType, setStyle } from '@/utils'
-import { useWindowSize } from '@vueuse/core'
 
 import type { BasicTarget } from '@/types'
-import type { CSSProperties } from 'vue'
 
 export interface UseElementFullscreenOptions {
   /**
@@ -66,7 +64,6 @@ export interface UseElementFullscreenOptions {
 let currentZIndex = 999
 let isAppend = false
 const ID_TAG = 'ELEMENT-FULLSCREEN-RAY'
-const { width, height } = useWindowSize() // 获取实际高度避免 100vh 会导致手机端浏览器获取不准确问题
 const styleElement = document.createElement('style')
 
 /**
@@ -140,8 +137,8 @@ export const useElementFullscreen = (
           : zIndex,
       '--element-fullscreen-transition': transition,
       '--element-fullscreen-background-color': backgroundColor,
-      '--element-fullscreen-width': `${width.value}px`,
-      '--element-fullscreen-height': `${height.value}px`,
+      '--element-fullscreen-width': 'var(--html-width)',
+      '--element-fullscreen-height': 'var(--html-height)',
       '--element-fullscreen-transform-x': `${catchBoundingClientRect.x}px`,
       '--element-fullscreen-transform-y': `${catchBoundingClientRect.y}px`,
     })
@@ -217,8 +214,6 @@ export const useElementFullscreen = (
     }
   }
 
-  const stopWatch = watch(() => [width.value, height.value], updateStyle)
-
   effectDispose(() => {
     const element = unrefElement(target) as HTMLElement | null
 
@@ -228,18 +223,12 @@ export const useElementFullscreen = (
 
     // 回滚 z-index 值，避免无限增加
     currentZIndex--
-
-    stopWatch()
   })
 
   return {
     enter,
     exit,
     toggleFullscreen,
-    currentWindowSize: {
-      width,
-      height,
-    },
   }
 }
 

src/layout/components/Menu/components/SiderBarLogo/index.tsx

@@ -93,9 +93,9 @@ export default defineComponent({
           <NTooltip placement="right">
             {{
               trigger: () => (
-                <h1 class="n-menu-item-content">
+                <NGradientText type="primary" size={18}>
                   {sideBarLogo.title?.[0] || null}
-                </h1>
+                </NGradientText>
               ),
               default: () => sideBarLogo.title,
             }}

src/layout/components/Search/GlobalSearch/index.tsx

@@ -80,15 +80,16 @@ export default defineComponent({
         plain: true,
       },
     ]
-    /** 初始化索引 */
+    // 初始化索引
     let searchElementIndex = 0
-    /** 缓存索引 */
+    // 缓存索引
     let preSearchElementIndex = searchElementIndex
     const { isTabletOrSmaller } = useDevice()
     const loading = ref(false)
-    const ACTIVE_CLASS = 'content-item--active' // 激活样式 class name
+    // 激活样式 class name
+    const ACTIVE_CLASS = 'content-item--active'
 
-    /** 初始化一些值 */
+    // 初始化一些值
     const resetSearchSomeValue = () => {
       state.searchOptions = []
       state.searchValue = null
@@ -96,7 +97,7 @@ export default defineComponent({
       preSearchElementIndex = searchElementIndex
     }
 
-    /** 按下 ctrl + k 或者 command + k 激活搜索栏 */
+    // 按下 ctrl + k 或者 command + k 激活搜索栏
     const registerArouseKeyboard = (e: KeyboardEvent) => {
       if (modelShow.value) {
         return
@@ -111,7 +112,14 @@ export default defineComponent({
       }
     }
 
-    /** 根据输入值模糊检索菜单 */
+    /**
+     *
+     * @param value 输入的搜索内容
+     *
+     * @description
+     * 根据输入值模糊检索菜单。
+     * 依赖 getRoutes() 获取的路由列表。
+     */
     const fuzzySearchMenuOptions = (value: string) => {
       if (value) {
         loading.value = true
@@ -157,14 +165,15 @@ export default defineComponent({
         })
 
         loading.value = false
-      }, 500)
+      }, 300)
     }
 
+    // 搜索结果项点击
     const searchItemClick = (option: AppMenuOption) => {
       if (option) {
         const { meta } = option
 
-        /** 如果配置站外跳转则不会关闭搜索框 */
+        // 如果配置站外跳转则不会关闭搜索框
         if (meta.windowOpen) {
           window.open(meta.windowOpen)
         } else {
@@ -176,7 +185,7 @@ export default defineComponent({
       }
     }
 
-    /** 自动聚焦检索项 */
+    // 自动聚焦检索项
     const autoFocusingSearchItem = () => {
       const currentOption = state.searchOptions[searchElementIndex] // 获取当前搜索项
       const preOption = state.searchOptions[preSearchElementIndex] // 获取上一搜索项
@@ -205,7 +214,7 @@ export default defineComponent({
       }
     }
 
-    /** 渲染搜索菜单前缀图标, 如果没有则用 icon table 代替 */
+    // 渲染搜索菜单前缀图标，如果没有则用 icon table 代替
     const RenderPreIcon = (meta: AppRouteMeta) => {
       const { icon } = meta
 
@@ -218,7 +227,7 @@ export default defineComponent({
       }
     }
 
-    /** 更新索引 */
+    // 更新索引
     const updateIndex = (type: 'up' | 'down') => {
       if (type === 'up') {
         searchElementIndex -= 1
@@ -237,7 +246,7 @@ export default defineComponent({
       }
     }
 
-    /** 注册按键: 上、下、回车 */
+    // 注册按键: 上、下、回车
     const registerChangeSearchElementIndex = (e: KeyboardEvent) => {
       const keyCode = e.key
 

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

@@ -71,6 +71,8 @@ export default defineComponent({
         negativeText: '取消',
         onPositiveClick: () => {
           forIn(getDefaultSettingConfig(), (value, key) => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
             modelReactive[key] = value
 
             updateSettingState(key as keyof SettingState, value)

src/layout/components/SiderBar/shared.ts

@@ -59,7 +59,9 @@ const avatarDropdownActionMap = {
   },
 }
 
-export const avatarDropdownClick = (key: string | number) => {
+export const avatarDropdownClick = (
+  key: keyof typeof avatarDropdownActionMap,
+) => {
   const action = avatarDropdownActionMap[key]
 
   action ? action() : window.$message.info('这个人很懒, 没做这个功能~')

src/layout/default/ContentWrapper/index.scss

@@ -25,30 +25,26 @@
   }
 }
 
-.r-layout-full__viewer-content--maximize--dark {
-  @include useAppTheme('dark') {
-    & .layout-content__maximize-out {
+.ray-template--light {
+  .layout-content__maximize-out {
+    background-color: #d5d3d1;
+    color: #44403c;
+
+    &:hover {
       color: #2c2a28;
       background: #757473;
-
-      &:hover {
-        background-color: #d5d3d1;
-        color: #44403c;
-      }
     }
   }
 }
 
-.r-layout-full__viewer-content--maximize--light {
-  @include useAppTheme('light') {
-    & .layout-content__maximize-out {
+.ray-template--dark {
+  .layout-content__maximize-out {
+    background-color: #44403c;
+    color: #d5d3d1;
+
+    &:hover {
       color: #eae9e8;
       background: #a19f9d;
-
-      &:hover {
-        background-color: #44403c;
-        color: #d5d3d1;
-      }
     }
   }
 }

src/layout/index.scss

@@ -17,6 +17,12 @@
             height: 100%;
           }
         }
+
+        // 设置 content-wrapper 的样式
+        .content-wrapper {
+          width: 100%;
+          height: 100%;
+        }
       }
     }
   }

src/layout/layout-css-vars.ts

@@ -1,4 +1,4 @@
-import { useElementBounding, useWindowSize } from '@vueuse/core'
+import { useElementBounding } from '@vueuse/core'
 
 import type { Ref } from 'vue'
 
@@ -18,13 +18,12 @@ export const layoutCssVars = (
   const siderBar = useElementBounding(element[0])
   const menuTag = useElementBounding(element[1])
   const footer = useElementBounding(element[2])
-  const { height, width } = useWindowSize()
 
   return computed(() => {
     return {
-      '--window-width': `${width.value}px`,
-      '--window-height': `${height.value}px`,
-      '--layout-content-height': `calc(${height.value}px - ${siderBar.height.value}px - ${menuTag.height.value}px - ${footer.height.value}px)`,
+      '--window-width': 'var(--html-width)',
+      '--window-height': 'var(--html-height)',
+      '--layout-content-height': `calc(var(--html-height) - ${siderBar.height.value}px - ${menuTag.height.value}px - ${footer.height.value}px)`,
       '--layout-content-width': `${siderBar.width.value}px`,
       '--layout-siderbar-height': `${siderBar.height.value}px`,
       '--layout-menutag-height': `${menuTag.height.value}px`,

src/locales/lang/en-US/menu.json

@@ -28,5 +28,6 @@
   "Table": "Table",
   "TemplateHooks": "Template Api",
   "scrollReveal": "Scroll Reveal",
-  "TablePro": "Table Pro"
+  "TablePro": "Table Pro",
+  "Flow": "Flow"
 }

src/locales/lang/zh-CN/menu.json

@@ -28,5 +28,6 @@
   "Table": "表格",
   "TemplateHooks": "模板内置 Api",
   "scrollReveal": "滚动动画",
-  "TablePro": "高级表格"
+  "TablePro": "高级表格",
+  "Flow": "流程图"
 }

src/locales/utils/get-app-local-messages.ts

@@ -21,7 +21,7 @@ export const getAppLocalMessages = async (
 
   for (const curr of localOptions) {
     const msg: AppLocalesModules = await import(`@/locales/lang/${curr.key}.ts`)
-    const key = curr.key
+    const key = curr.key as keyof AppCurrentAppMessages
 
     if (key) {
       message[key] = msg?.default?.message ?? {}

src/router/modules/demo/axios copy.ts

@@ -0,0 +1,16 @@
+import { t } from '@/hooks/web/useI18n'
+import { LAYOUT } from '@/router/constant'
+
+import type { AppRouteRecordRaw } from '@/router/types'
+
+const r: AppRouteRecordRaw = {
+  path: '/flow',
+  component: () => import('@/views/demo/Flow'),
+  meta: {
+    i18nKey: t('menu.Flow'),
+    icon: 'other',
+    order: 2,
+  },
+}
+
+export default r

src/store/modules/menu/index.ts

@@ -121,14 +121,14 @@ export const piniaMenuStore = defineStore(
      * 其实这是一个设计的失误，因为该方法不能准确的感知到 fullPath 应该是什么。
      *
      * @example
-     * resolveOption({ path: '/dashboard', name: 'Dashboard', meta: { i18nKey: 'menu.Dashboard' } })
+     * resolveOption({ path: '/demo', fullPath: '/demo', name: 'Demo', meta: { ... } })
      * resolveOption({ ...VueRouterRouteOption })
      */
     const resolveOption = (option: AppMenuOption) => {
       const { meta } = option
       const { i18nKey, noLocalTitle } = meta
 
-      /** 设置 label, i18nKey 优先级最高 */
+      // 设置 label, i18nKey 优先级最高
       const label = computed(() => (i18nKey ? t(`${i18nKey}`) : noLocalTitle))
       /**
        *
@@ -144,7 +144,7 @@ export const piniaMenuStore = defineStore(
           }),
         breadcrumbLabel: label.value,
       } as AppMenuOption
-      /** 合并 icon, extra */
+      // 合并 icon, extra
       const attr: AppMenuOption = Object.assign({}, route, {
         icon: createMenuIcon(option),
         extra: createMenuExtra(option),
@@ -161,9 +161,12 @@ export const piniaMenuStore = defineStore(
 
     /**
      *
-     * 设置面包屑
+     * @param key menu state key
      *
-     * 如果识别到为平级模式, 则会自动追加一层面包屑
+     * @description
+     * 设置面包屑。
+     *
+     * 如果识别到为平级模式，则会自动追加一层面包屑。
      */
     const setBreadcrumbOptions = (key: string | number) => {
       menuState.breadcrumbOptions = parseAndFindMatchingNodes(
@@ -175,8 +178,12 @@ export const piniaMenuStore = defineStore(
 
     /**
      *
-     * @param options menu tag option(s)
-     * @param isAppend true: 追加操作(push), false: 覆盖操作
+     * @param options menu tag options
+     * @param isAppend is append
+     *
+     * @description
+     * 设置标签菜单。
+     * true: 追加操作（push），false: 覆盖操作。
      */
     const setMenuTagOptions = (
       options: MenuTagOptions | MenuTagOptions[],
@@ -190,7 +197,14 @@ export const piniaMenuStore = defineStore(
         : (menuState.menuTagOptions = arr)
     }
 
-    /** 当 url 地址发生变化触发 menuTagOptions 更新 */
+    /**
+     *
+     * @param key full path
+     * @param option menu tag option
+     *
+     * @description
+     * 设置当前标签项，如果不存在则追加。
+     */
     const setMenuTagOptionsWhenMenuValueChange = (
       key: string | number,
       option: AppMenuOption,
@@ -324,8 +338,11 @@ export const piniaMenuStore = defineStore(
 
     /**
      *
-     * 初始化系统菜单列表，该方法仅执行一次
-     * 会在初始化时拼接完整的 url 地址为 fullPath
+     * @description
+     * 初始化系统菜单列表，该方法仅执行一次。
+     * 会在初始化时拼接完整的 url 地址为 fullPath。
+     *
+     * 如果你需要手动更新菜单，可以在需要的时候调用该方法，即可刷新整个系统菜单。
      */
     const setupAppMenu = () => {
       return new Promise<void>((resolve) => {
@@ -384,6 +401,9 @@ export const piniaMenuStore = defineStore(
     /**
      *
      * @param collapsed 折叠菜单开关
+     *
+     * @description
+     * 折叠菜单。
      */
     const collapsedMenu = (collapsed: boolean) =>
       (menuState.collapsed = collapsed)
@@ -394,14 +414,18 @@ export const piniaMenuStore = defineStore(
      * @param length 裁剪标签页长度
      *
      * @returns 被关闭标签项
+     *
+     * @description
+     * 关闭 menu tag 标签。
      */
     const spliceMenTagOptions = (idx: number, length = 1) =>
       menuState.menuTagOptions.splice(idx, length)
 
     /**
      *
-     * 初始化系统菜单列表
-     * 该方法仅执行一次
+     * @description
+     * 初始化系统菜单列表。
+     * 该方法仅执行一次。
      */
     const setupPiniaMenuStore = async () => {
       if (!isSetupAppMenuLock.value) {
@@ -413,7 +437,7 @@ export const piniaMenuStore = defineStore(
       isSetupAppMenuLock.value = false
     }
 
-    /** 监听路由变化并且更新路由菜单与菜单标签 */
+    // 监听路由变化并且更新路由菜单与菜单标签
     watch(
       () => route.fullPath,
       async (ndata, odata) => {

src/store/modules/menu/utils.ts

@@ -30,7 +30,7 @@ const isMatch = (
     return false
   }
 
-  return node[key] === value
+  return node[key as keyof AppMenuOption] === value
 }
 
 /**

src/store/modules/setting/index.ts

@@ -120,11 +120,11 @@ export const piniaSettingStore = defineStore(
 
       settingState.primaryColorOverride.common = themeOverrides
 
-      const body = document.body
+      const html = document.documentElement
 
       /** 设置主题色变量 */
-      body.style.setProperty('--ray-theme-primary-color', value)
-      body.style.setProperty('--ray-theme-primary-fade-color', alphaColor)
+      html.style.setProperty('--ray-theme-primary-color', value)
+      html.style.setProperty('--ray-theme-primary-fade-color', alphaColor)
     }
 
     /**

src/styles/base.scss

@@ -93,7 +93,7 @@ body {
 }
 
 // 配合 v-disabled 指令使用
-body .ray-template__directive--disabled {
+html .ray-template__directive--disabled {
   opacity: 0.3 !important;
   pointer-events: none !important;
   cursor: not-allowed !important;

src/styles/mixins.scss

@@ -43,7 +43,7 @@
 
 // 根据主题切换样式
 @mixin useAppTheme($theme) {
-  body[class="ray-template--#{$theme}"] & {
+  html[class='ray-template--#{$theme}'] & {
     @content;
   }
 }

src/types/global.d.ts

@@ -56,7 +56,7 @@ export declare global {
       bus: EventBus
       shadowRoot?: ShadowRoot
       props?: { [key: string]: unknown }
-      location?: Object
+      location?: object
     }
 
     $message: MessageApi

src/types/modules/helper.ts

@@ -113,3 +113,14 @@ export type DeepReadonly<T> = T extends object
       readonly [P in keyof T]: DeepReadonly<T[P]>
     }
   : T
+
+/**
+ *
+ * @description
+ * 将目标类型中的所有属性变为必填。
+ *
+ * @example
+ * SetRequired<{ a: string, b?: number }, 'a'> // { a: string, b: number }
+ */
+export type SetRequired<T, K extends keyof T> = Omit<T, K> &
+  Required<Pick<T, K>>

src/types/modules/utils.ts

@@ -62,6 +62,7 @@ export type BasicTypes =
   | string
   | symbol
   | bigint
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   | Function
   | any[]
   | object

src/utils/element.ts

@@ -5,6 +5,7 @@ import type {
   BasicTarget,
   QueryElementsOptions,
   ElementSelector,
+  Recordable,
 } from '@/types'
 import type { CSSProperties } from 'vue'
 
@@ -160,7 +161,7 @@ export const hasClass = (
  */
 export const autoPrefixStyle = (style: string) => {
   const prefixes = ['webkit', 'moz', 'ms', 'o']
-  const styleWithPrefixes = {}
+  const styleWithPrefixes: Recordable = {}
 
   prefixes.forEach((prefix) => {
     styleWithPrefixes[
@@ -214,16 +215,17 @@ export const setStyle = <Style extends CSSProperties>(
         if (key.startsWith('--')) {
           element.style.setProperty(trimKey, trimValue)
         } else if (key.startsWith('-')) {
-          element.style[key] = value
+          element.style.setProperty(key, value)
         } else {
           // 兼容浏览器前缀
           const kitFix = autoPrefixStyle(trimKey)
 
           Object.keys(kitFix).forEach((key) => {
-            element.style[key] = kitFix[key]
+            element.style.setProperty(key, kitFix[key])
           })
+
           // 设置默认需要添加样式
-          element.style[trimKey] = trimValue
+          element.style.setProperty(trimKey, trimValue)
         }
       }
     })
@@ -246,7 +248,7 @@ export const setStyle = <Style extends CSSProperties>(
       const keys = Object.keys(styles)
 
       keys.forEach((curr) => {
-        set(`${curr}: ${styles[curr]}`, element)
+        set(`${curr}: ${styles[curr as keyof typeof styles]}`, element)
       })
     }
   }

src/utils/vue/render-node.ts

@@ -31,7 +31,7 @@ export interface RenderNodeOptions<T extends DefaultElement> {
  * renderNode('hello world') // () => 'hello world'
  * renderNode(<div>hello world</div>) // () => <div>hello world</div>
  * renderNode(() => <div>hello world</div>) // () => <div>hello world</div>
- * renderNode(null, { defaultElement: () => <span>hello world</span> }) // () => 'hello world'
+ * renderNode(null, { defaultElement: () => <span>hello world</span> }) // () => <span>hello world</span>
  */
 export function renderNode<T extends DefaultElement>(
   vnode: RenderVNodeType,

src/views/demo/Flow.tsx

@@ -0,0 +1,87 @@
+import { RFlow, RForm } from '@/components'
+
+import { useFlow } from '@/components'
+
+import type { FlowGraphData } from '@/components'
+import { NCard, NFlex, NFormItemGridItem, NGrid, NSwitch } from 'naive-ui'
+
+export default defineComponent({
+  name: 'RFlowDemo',
+  setup() {
+    const [register, { getFlowInstance }] = useFlow()
+    const flowDataRef = ref<FlowGraphData>()
+    const settingRef = ref({
+      readonly: false,
+    })
+
+    const getInst = () => {
+      console.log(getFlowInstance())
+    }
+
+    setTimeout(() => {
+      flowDataRef.value = {
+        // 节点
+        nodes: [
+          {
+            id: '21',
+            type: 'rect',
+            x: 300,
+            y: 100,
+            text: 'rect node',
+          },
+          {
+            id: '50',
+            type: 'circle',
+            x: 500,
+            y: 100,
+            text: 'circle node',
+          },
+        ],
+        // 边
+        edges: [
+          {
+            id: '21',
+            type: 'polyline',
+            sourceNodeId: '50',
+            targetNodeId: '21',
+          },
+        ],
+      }
+    }, 1000)
+
+    onMounted(() => {
+      getInst()
+    })
+
+    return {
+      register,
+      flowDataRef,
+      settingRef,
+    }
+  },
+  render() {
+    const { register, flowDataRef, settingRef } = this
+
+    return (
+      <NFlex vertical>
+        <NCard>
+          <RForm>
+            <NGrid xGap={4} yGap={18} cols={4}>
+              <NFormItemGridItem label="禁用流程图">
+                <NSwitch v-model:value={settingRef.readonly} />
+              </NFormItemGridItem>
+            </NGrid>
+          </RForm>
+        </NCard>
+        <NCard>
+          <RFlow
+            height={500}
+            onRegister={register}
+            data={flowDataRef}
+            readonly={settingRef.readonly}
+          />
+        </NCard>
+      </NFlex>
+    )
+  },
+})

src/views/demo/modal-demo/index.tsx

@@ -18,7 +18,9 @@ export default defineComponent({
         title: '卡片模态框',
         dad: true,
         preset: 'card',
-        content: '我可以被拖拽的全屏card模态框',
+        content: () => (
+          <div style="height: 3000px;">我可以被拖拽的全屏card模态框</div>
+        ),
         fullscreen: true,
       })
     }
@@ -59,7 +61,7 @@ export default defineComponent({
           fullscreen
           preset="card"
         >
-          我是全屏模态框，并且会自动启用滚动条。
+          <div style="height: 3000px;">我可以被拖拽的全屏card模态框</div>
         </RModal>
         <RModal
           v-model:show={this.modal2}

src/views/demo/rely/views/rely-about/index.tsx

@@ -57,7 +57,7 @@ export default defineComponent({
         Object.keys(obj).reduce((pre, curr) => {
           pre.push({
             name: curr,
-            relyVersion: obj[curr],
+            relyVersion: obj[curr as keyof typeof obj],
             relyAddress: '',
           })
 

src/views/demo/template-hooks/index.tsx

@@ -99,7 +99,13 @@ export default defineComponent({
               <NButton onClick={() => badgeHidden('/template-hooks')}>
                 隐藏当前菜单标记
               </NButton>
-              <NButton onClick={() => badgeShow('/template-hooks')}>
+              <NButton
+                onClick={() =>
+                  badgeShow('/template-hooks', {
+                    label: this.badgeValue,
+                  })
+                }
+              >
                 显示当前菜单标记
               </NButton>
               <NButton

tsconfig.json

@@ -26,9 +26,7 @@
       "@mock/*": ["mock/*"],
       "@mock": ["mock/*"]
     },
-    "suppressImplicitAnyIndexErrors": true,
-    "types": ["vite/client", "vitest/globals"],
-    "ignoreDeprecations": "5.0"
+    "types": ["vite/client", "vitest/globals"]
   },
   "include": [
     "vite.config.ts",

vite.plugin.config.ts

@@ -17,7 +17,7 @@ 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 viteCompression from 'vite-plugin-compression'
+import gzipPlugin from 'rollup-plugin-gzip'
 import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs'
 import viteAutoImport from 'unplugin-auto-import/vite'
 import viteEslint from 'vite-plugin-eslint'
@@ -180,7 +180,7 @@ function baseOptions(mode: string): PluginOption[] {
         },
       ],
     }),
-    viteCompression(),
+    gzipPlugin(),
     viteSvgLoader({
       defaultImport: 'url', // 默认以 url 形式导入 svg
     }),