v4.2.8

2025-04-05 07:03:00 +08:00 · 2023-10-27 14:55:25 +08:00 · 2023-10-27 14:55:25 +08:00 · a840693455
commit a840693455
parent f6c343911e
33 changed files with 361 additions and 184 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,36 @@
 # CHANGE LOG

+## 4.2.8
+
+我好像犯了一个很愚蠢的错误，那就是使用 useFullscreen 方法的时候总是会弹出提示。所以紧急修复了这个很愚蠢的问题，并且移除了这个方法。
+
+在兼容移动端后，手机打开页面会触发缩放情况，这个版本禁用了缩放。如果有需求可以去设置 `index.html` 中的 `meta` 标签。并且优化了移动端的锁屏样式。
+
+重构了 RChart 组件，因为该组件过于单调，所以决定赋予更多的功能。结合 naive NCard 组件进行了二次封装。当然你也可以通过设置 `preset = default | null | void 0` 调用无预设样式的 chart 图表。
+
+### Feats
+
+- 移除二次封装 useFullscreen 方法
+- 禁用自动缩放
+- 优化移动端锁屏样式
+- 禁用 vue-i18n 自动导入
+- RChart
+  - 新增 preset 属性配置，以下配置属性仅在 preset 为 card 生效
+    - 新增 downloadOptions 下载图片配置，具体说明查看文档：https://echarts.apache.org/zh/api.html#echartsInstance.getDataURL
+    - 修改 RChart 渲染时机，更改为主进程渲染
+    - 新增 cardExtra slots 自定义配置操作栏
+    - 新增 title 属性
+    - 新增 onDropdownSelect 回调方法
+- 新增 renderNode 方法，用于减少 if else 表达式渲染 vnode
+- 语言包新增 globalMessage 模块，用于配置统一的输出消息
+
+### Fixes
+
+- 修复每次执行 useFullscreen 都弹出提示的问题
+- RChart
+  - 修复 animation false 状态渲染异常问题
+  - 修复响应式代理 echart instance 时，导致部分方法异常问题
+ 
 ## 4.2.7

 主要是做了一些统一命名的事情，以前由于写的比较放浪形骸现在正在慢慢更改这个大问题。
--- a/index.html
+++ b/index.html
@ -3,7 +3,10 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/ray.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
    <title>Vite + Vue + TS</title>
  </head>
  <style>
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "ray-template",
  "private": false,
-  "version": "4.2.7",
+  "version": "4.2.8",
  "type": "module",
  "engines": {
    "node": ">=16.0.0",
@ -53,7 +53,6 @@
    "@types/crypto-js": "^4.1.1",
    "@types/lodash-es": "^4.17.7",
    "@types/mockjs": "1.0.7",
-    "@types/scrollreveal": "^0.0.8",
    "@typescript-eslint/eslint-plugin": "^5.61.0",
    "@typescript-eslint/parser": "^5.61.0",
    "@vitejs/plugin-vue": "^4.2.3",
--- a/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx
+++ b/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx
@ -75,6 +75,7 @@ const LockScreen = defineComponent({
              type="password"
              placeholder="请输入锁屏密码"
              clearable
+              showPasswordOn="click"
              minlength={6}
              maxlength={12}
              onKeydown={(e: KeyboardEvent) => {
--- a/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx
+++ b/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx
@ -18,6 +18,7 @@ import dayjs from 'dayjs'
 import { useSetting, useSignin } from '@/store'
 import { rules, useCondition } from '@/app-components/app/AppLockScreen/hook'
 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
+import { useDevice } from '@/hooks/web/index'

 import type { FormInst, InputInst } from 'naive-ui'

@ -30,6 +31,7 @@ const UnlockScreen = defineComponent({
    const { logout } = useSignin()
    const { changeSwitcher } = useSetting()
    const { setLockAppScreen } = useAppLockScreen()
+    const { isTabletOrSmaller } = useDevice()

    const HH_MM_FORMAT = 'HH:mm'
    const AM_PM_FORMAT = 'A'
@ -91,13 +93,23 @@ const UnlockScreen = defineComponent({
      unlockScreen,
      formRef,
      inputInstRef,
+      isTabletOrSmaller,
    }
  },
  render() {
+    const { isTabletOrSmaller } = this
+
    return (
      <div class="app-lock-screen__unlock">
        <div class="app-lock-screen__unlock__content">
-          <div class="app-lock-screen__unlock__content-bg">
+          <div
+            class={[
+              'app-lock-screen__unlock__content-bg',
+              isTabletOrSmaller
+                ? 'app-lock-screen__unlock__content-bg--smaller'
+                : '',
+            ]}
+          >
            <div class="left">{this.HH_MM?.split(':')[0]}</div>
            <div class="right">{this.HH_MM?.split(':')[1]}</div>
          </div>
--- a/src/app-components/app/AppLockScreen/index.scss
+++ b/src/app-components/app/AppLockScreen/index.scss
@ -26,6 +26,16 @@
        gap: 80px;
        z-index: 0;

+        &.app-lock-screen__unlock__content-bg--smaller {
+          & .left,
+          & .right {
+            padding: 0px;
+            font-size: 90px;
+            padding: 24px;
+            border-radius: 4px;
+          }
+        }
+
        & .left,
        & .right {
          @include flexCenter;
--- a/src/app-components/app/AppLockScreen/index.tsx
+++ b/src/app-components/app/AppLockScreen/index.tsx
@ -43,6 +43,7 @@ const AppLockScreen = defineComponent({
        v-model:show={this.lockScreenSwitch}
        transformOrigin="center"
        show
+        autoFocus={false}
        maskClosable={false}
        closeOnEsc={false}
        preset={!this.getLockAppScreen() ? 'dialog' : void 0}
--- a/src/components/RChart/index.tsx
+++ b/src/components/RChart/index.tsx
@ -37,24 +37,27 @@ import {
 } from 'echarts/charts' // 系列类型(后缀都为 `SeriesOption`)
 import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性
 import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器
+import { NCard } from 'naive-ui'

 import props from './props'
 import { useSetting } from '@/store'
-import { cloneDeep, throttle } from 'lodash-es'
-import { on, off, completeSize } from '@/utils/element'
+import { throttle } from 'lodash-es'
+import { completeSize } from '@/utils/element'
 import { call } from '@/utils/vue/index'
 import { setupChartTheme } from './helper'
 import { APP_THEME } from '@/app-config/designConfig'
 import { useResizeObserver } from '@vueuse/core'
+import RMoreDropdown from '@/components/RMoreDropdown/index'
+import { renderNode } from '@use-utils/vue/index'
+import { downloadBase64File } from '@use-utils/basic'

 import type { WatchStopHandle } from 'vue'
 import type { AnyFC } from '@/types/modules/utils'
 import type { DebouncedFunc } from 'lodash-es'
-import type { ChartTheme } from '@/components/RChart/type'
 import type { UseResizeObserverReturn } from '@vueuse/core'
 import type { ECharts, EChartsCoreOption } from 'echarts/core'
-
-export type { RayChartInst, EChartsExtensionInstallRegisters } from './type'
+import type { RenderVNodeType } from '@use-utils/vue/renderNode'
+import type { DropdownProps, DropdownOption } from 'naive-ui'

 const defaultChartOptions = {
  notMerge: false,
@ -70,14 +73,24 @@ export default defineComponent({
  setup(props, { expose }) {
    const settingStore = useSetting()
    const { themeValue: currentTheme } = storeToRefs(settingStore)
-    const rayChartRef = ref<HTMLElement>() // `echart` 容器实例
+    const rayChartRef = ref<HTMLElement>() // echart 容器实例
    const rayChartWrapperRef = ref<HTMLElement>()
-    const echartInstanceRef = ref<ECharts>() // `echart` 实例
+    const echartInstanceRef = ref<ECharts>() // echart 实例
    let resizeThrottleReturn: DebouncedFunc<AnyFC> | null // resize 防抖方法实例
    let resizeOvserverReturn: UseResizeObserverReturn | null
    const { echartTheme } = APP_THEME
    let watchCallback: WatchStopHandle | null
-
+    let echartInst: ECharts | null // 无代理响应式代理缓存 echart inst
+    const moreDropDownOptions = computed<DropdownProps['options']>(() => [
+      {
+        label: '下载图片',
+        key: 'downloadChart',
+        disabled:
+          echartInstanceRef.value && echartInstanceRef.value.getDom()
+            ? false
+            : true,
+      },
+    ])
    const cssVarsRef = computed(() => {
      const cssVars = {
        '--ray-chart-width': completeSize(props.width),
@ -105,7 +118,6 @@ export default defineComponent({
        ToolboxComponent,
        AriaComponent,
      ]) // 注册组件
-
      echarts.use([
        BarChart,
        LineChart,
@ -114,11 +126,7 @@ export default defineComponent({
        ScatterChart,
        PictorialBarChart,
      ]) // 注册 chart series type
-
      echarts.use([LabelLayout, UniversalTransition]) // 注册布局, 过度效果
-
-      // 如果业务场景中需要 `svg` 渲染器, 手动导入渲染器后使用该行代码即可(不过为了体积考虑, 移除了 SVG 渲染器)
-      // echarts.use([props.canvasRender ? CanvasRenderer : SVGRenderer])
      echarts.use([CanvasRenderer]) // 注册渲染器

      try {
@ -132,7 +140,13 @@ export default defineComponent({

    /**
     *
-     * 更新 chart 主题
+     * 更具当前主题渲染 chart
+     *
+     * 如果手动配置了 theme 属性，autoChangeTheme 属性则会失效
+     * 但是，如果配置 theme 属性为 default，则会根据当前主题色渲染 chart 默认主题
+     *
+     * 当 Boolean(theme) 为 false，则会尝试获取 echartTheme 属性
+     * 但是，如果未获取到 echartTheme 属性，则会使用默认样式
     */
    const updateChartTheme = () => {
      if (props.theme === 'default') {
@ -159,11 +173,10 @@ export default defineComponent({
     * @returns `chart options`
     *
     * 合并配置项
-     *
     * 如果有需要特殊全局配置的可以在此继续写...
     */
    const combineChartOptions = (ops: EChartsCoreOption) => {
-      let options = cloneDeep(unref(ops))
+      let options = unref(ops)

      const assign = (opts: object) =>
        Object.assign(
@ -211,25 +224,28 @@ export default defineComponent({
        })

        /** 注册 chart */
-        echartInstanceRef.value = echarts.init(element, theme, {
+        echartInst = echarts.init(element, theme, {
          /** 如果款度为 0, 则以 200px 填充 */
          width: width === 0 ? 200 : void 0,
          /** 如果高度为 0, 则以 200px 填充 */
          height: height === 0 ? 200 : void 0,
        })
+        echartInstanceRef.value = echartInst

        /** 设置 options 配置项 */
-        echartInstanceRef.value.setOption({})
-
        if (props.animation) {
+          echartInst.setOption({})
+
          setTimeout(() => {
-            options && echartInstanceRef.value?.setOption(options)
+            options && echartInst?.setOption(options)
          })
+        } else {
+          options && echartInst?.setOption(options)
        }

        /** 渲染成功回调 */
        if (onSuccess) {
-          call(onSuccess, echartInstanceRef.value)
+          call(onSuccess, echartInst)
        }
      } catch (e) {
        /** 渲染失败回调 */
@ -246,25 +262,40 @@ export default defineComponent({
     * 销毁 `chart` 实例, 释放资源
     */
    const destroyChart = () => {
-      if (echartInstanceRef.value) {
-        echartInstanceRef.value.clear()
-        echartInstanceRef.value.dispose()
+      if (echartInst && echartInst.getDom()) {
+        echartInst.clear()
+        echartInst.dispose()
+        echartInstanceRef.value = void 0
      }
    }

    /** 重置 echarts 尺寸 */
    const resizeChart = () => {
-      if (echartInstanceRef.value) {
-        try {
-          echartInstanceRef.value.resize()
-          // eslint-disable-next-line no-empty
-        } catch (e) {}
+      if (echartInst) {
+        echartInst.resize()
+      }
+    }
+
+    const dropdownSelect = (key: string | number, option: DropdownOption) => {
+      if (key === 'downloadChart' && echartInst && echartInst.getDom()) {
+        const { filename, ...args } = props.downloadOptions
+
+        downloadBase64File(
+          echartInst.getDataURL(args),
+          filename ?? `${new Date().getTime()}`,
+        )
+      }
+
+      const { onDropdownSelect } = props
+
+      if (onDropdownSelect) {
+        call(onDropdownSelect, key, option)
      }
    }

    const mount = () => {
      // 避免重复渲染
-      if (echartInstanceRef.value?.getDom()) {
+      if (echartInst?.getDom()) {
        console.warn(
          'RChart mount: There is a chart instance already initialized on the dom. Execution was interrupted',
        )
@ -278,20 +309,17 @@ export default defineComponent({
      if (props.autoResize) {
        resizeThrottleReturn = throttle(resizeChart, props.throttleWait)
        /** 监听内容区域尺寸变化更新 chart */
+
        resizeOvserverReturn = useResizeObserver(
          props.observer || rayChartWrapperRef,
          resizeThrottleReturn,
        )
-
-        on(window, 'resize', resizeThrottleReturn)
      }
    }

    const unmount = () => {
      /** 卸载 echarts */
      destroyChart()
-      /** 卸载事件柄 */
-      resizeThrottleReturn && off(window, 'resize', resizeThrottleReturn)
      /** 注销防抖 */
      resizeThrottleReturn?.cancel()
      /** 注销 observer 监听 */
@ -342,7 +370,7 @@ export default defineComponent({
              defaultChartOptions,
            )
            /** 如果 options 发生变动更新 echarts */
-            echartInstanceRef.value?.setOption(options, setOpt)
+            echartInst?.setOption(options, setOpt)
          },
          {
            deep: true,
@ -353,8 +381,8 @@ export default defineComponent({
      }

      props.loading
-        ? echartInstanceRef.value?.showLoading(props.loadingOptions)
-        : echartInstanceRef.value?.hideLoading()
+        ? echartInst?.showLoading(props.loadingOptions)
+        : echartInst?.hideLoading()
    })

    expose({
@ -368,9 +396,7 @@ export default defineComponent({
      await registerChartCore()
    })
    onMounted(() => {
-      nextTick(() => {
-        mount()
-      })
+      mount()
    })
    onBeforeUnmount(() => {
      unmount()
@ -381,10 +407,51 @@ export default defineComponent({
      rayChartRef,
      cssVarsRef,
      rayChartWrapperRef,
+      moreDropDownOptions,
+      dropdownSelect,
    }
  },
  render() {
-    return (
+    const {
+      title,
+      contentStyle,
+      preset,
+      moreDropDownOptions,
+      dropdownSelect,
+      bordered,
+      dropdownOptions,
+    } = this
+    const { cardExtra } = this.$slots
+
+    return preset === 'card' ? (
+      <NCard
+        class="ray-chart"
+        ref="rayChartWrapperRef"
+        style={[this.cssVarsRef]}
+        contentStyle={contentStyle}
+        bordered={bordered}
+      >
+        {{
+          default: () => (
+            <div class="ray-chart__container" ref="rayChartRef"></div>
+          ),
+          header: renderNode(title, {
+            defaultElement: <div style="display: none;"></div>,
+          }),
+          'header-extra': renderNode(cardExtra as RenderVNodeType, {
+            defaultElement: (
+              <RMoreDropdown
+                iconSize={18}
+                cursor="pointer"
+                options={dropdownOptions ?? moreDropDownOptions}
+                trigger="click"
+                onSelect={dropdownSelect.bind(this)}
+              />
+            ),
+          }),
+        }}
+      </NCard>
+    ) : (
      <div class="ray-chart" style={[this.cssVarsRef]} ref="rayChartWrapperRef">
        <div class="ray-chart__container" ref="rayChartRef"></div>
      </div>
--- a/src/components/RChart/props.ts
+++ b/src/components/RChart/props.ts
@ -1,5 +1,5 @@
 import type * as echarts from 'echarts/core' // `echarts` 核心模块
-import type { PropType } from 'vue'
+import type { PropType, VNode } from 'vue'
 import type { MaybeArray } from '@/types/modules/utils'
 import type {
  LoadingOptions,
@ -8,11 +8,60 @@ import type {
 } from '@/components/RChart/type'
 import type { ECharts, SetOptionOpts } from 'echarts/core'
 import type { MaybeComputedElementRef, MaybeElement } from '@vueuse/core'
-import type { EChartsExtensionInstallRegisters } from './type'
+import type {
+  EChartsExtensionInstallRegisters,
+  RChartPresetType,
+  RChartDownloadOptions,
+} from './type'
+import type { CardProps, DropdownProps, DropdownOption } from 'naive-ui'

 import { loadingOptions } from './helper'

 const props = {
+  bordered: {
+    /**
+     *
+     * 仅在 preset 为 card 时生效
+     *
+     * 设置边框
+     */
+    type: Boolean,
+    default: true,
+  },
+  downloadOptions: {
+    /**
+     *
+     * 仅在 preset 为 card 时生效
+     *
+     * type: 导出的格式，可选 png, jpg, svg。注意：png, jpg 只有在 canvas 渲染器的时候可使用，svg 只有在使用 svg 渲染器的时候可用
+     * pixelRatio: 导出的图片分辨率比例，默认为 1
+     * backgroundColor: 导出的图片背景色，默认使用 option 里的 backgroundColor
+     * excludeComponents: 忽略组件的列表，例如要忽略 toolbox 就是 ['toolbox']
+     */
+    type: Object as PropType<RChartDownloadOptions>,
+    default: () => ({}),
+  },
+  onDropdownSelect: {
+    // 仅在 preset 为 card 时生效
+    type: [Function, Array] as PropType<
+      MaybeArray<(key: string | number, option: DropdownOption) => void>
+    >,
+  },
+  dropdownOptions: {
+    // 仅在 preset 为 card 时生效
+    type: Array as PropType<DropdownProps['options']>,
+  },
+  preset: {
+    type: String as PropType<RChartPresetType>,
+  },
+  contentStyle: {
+    // 仅在 preset 为 card 时生效
+    type: [String, Object] as PropType<CardProps['contentStyle']>,
+  },
+  title: {
+    // 仅在 preset 为 card 时生效
+    type: [String, Function] as PropType<string | (() => VNode)>,
+  },
  width: {
    /**
     *
@ -44,17 +93,6 @@ const props = {
    type: [Boolean, Object] as PropType<AutoResize>,
    default: true,
  },
-  canvasRender: {
-    /**
-     *
-     * @deprecated
-     * `chart` 渲染器, 默认使用 `canvas`
-     *
-     * 考虑到打包体积与大多数业务场景缘故, 暂时移除 `SVGRenderer` 渲染器的默认导入
-     */
-    type: Boolean,
-    default: true,
-  },
  showAria: {
    /**
     *
--- a/src/components/RChart/type.ts
+++ b/src/components/RChart/type.ts
@ -63,14 +63,24 @@ export interface RayChartInst {
   *
   * 手动卸载当前 chart 图
   * 注意：不会卸载当前组件，仅仅是卸载 chart
+   *
+   * @default () => void
   */
  dispose: () => void
  /**
   *
   * 手动渲染 chart 图
   * 注意：会根据当前的 options 配置项与 props 配置项重新渲染 chart
+   *
+   * @default () => void
   */
  render: () => void
 }

 export type EChartsExtensionInstallRegisters = typeof CanvasRenderer
+
+export type RChartPresetType = 'card' | 'default' | null | undefined
+
+export type RChartDownloadOptions = {
+  filename?: string
+} & Parameters<ECharts['getDataURL']>[0]
--- a/src/components/RMoreDropdown/src/index.tsx
+++ b/src/components/RMoreDropdown/src/index.tsx
@ -18,14 +18,14 @@ export default defineComponent({
  name: 'RMoreDropdown',
  props,
  render() {
-    const { iconSize } = this
+    const { iconSize, cursor } = this

    return (
      <NDropdown {...this.$props} {...this.$attrs}>
        {this.$slots.default ? (
          this.$slots.default()
        ) : (
-          <RIcon name="more" size={iconSize} />
+          <RIcon name="more" size={iconSize} cursor={cursor} />
        )}
      </NDropdown>
    )
--- a/src/components/RMoreDropdown/src/props.ts
+++ b/src/components/RMoreDropdown/src/props.ts
@ -17,6 +17,10 @@ const props = {
    type: Number,
    default: 14,
  },
+  cursor: {
+    type: String,
+    default: 'default',
+  },
 }

 export default props
--- a/src/components/RTable/src/Table.tsx
+++ b/src/components/RTable/src/Table.tsx
@ -18,7 +18,7 @@ import C from './components/C'
 import Print from './components/Print'

 import props from './props'
-import { call } from '@/utils/vue/index'
+import { call, renderNode } from '@/utils/vue/index'
 import { uuid } from '@/utils/basic'
 import config from './config'

@ -203,7 +203,9 @@ export default defineComponent({
              ) : null}
            </>
          ),
-          header: () => this.title || <div style="display: none;"></div>,
+          header: renderNode(this.title, {
+            defaultElement: <div style="display: none;"></div>,
+          }),
          'header-extra': () => (
            <NSpace wrapItem={false} align="center">
              {tool(this.$props as any)}
--- a/src/components/RTable/src/components/C.tsx
+++ b/src/components/RTable/src/components/C.tsx
@ -167,7 +167,6 @@ export default defineComponent({
    }

    const resizableClick = (option: C, index: number) => {
-      console.log('🚀 ~ resizableClick ~ option:', option.isResizable)
      option['isResizable'] = !option['isResizable']
      option['resizable'] = option['isResizable']
      treeDataSource.value[index] = option
--- a/src/components/RTable/src/components/Fullscreen.tsx
+++ b/src/components/RTable/src/components/Fullscreen.tsx
@ -13,7 +13,7 @@ import { NPopover } from 'naive-ui'
 import RIcon from '@/components/RIcon/index'

 import config from '../config'
-import { useFullscreen } from '@/hooks/web/index'
+import { useFullscreen } from 'vue-hooks-plus'

 import type { TableProvider } from '../type'

@ -24,14 +24,18 @@ export default defineComponent({
      config.tableKey,
      {} as TableProvider,
    )
-    const [isFullscreen, { toggleFullscreen }] = useFullscreen(wrapperRef)
+    const [isFullscreen, { toggleFullscreen, isEnabled }] =
+      useFullscreen(wrapperRef)

    return {
      toggleFullscreen,
      isFullscreen,
+      isEnabled,
    }
  },
  render() {
+    const { toggleFullscreen, isEnabled, $t } = this
+
    return (
      <NPopover showArrow={false}>
        {{
@ -40,7 +44,13 @@ export default defineComponent({
              name="fullscreen"
              size={config.tableIconSize}
              cursor="pointer"
-              onClick={this.toggleFullscreen.bind(this)}
+              onClick={() => {
+                if (!isEnabled) {
+                  $t('globalMessage.isEnabledFullscreen')
+                }
+
+                toggleFullscreen()
+              }}
            />
          ),
          default: () => (this.isFullscreen ? '取消全屏' : '全屏表格'),
--- a/src/echart-themes/macarons/macarons-dark.json
+++ b/src/echart-themes/macarons/macarons-dark.json
@ -9,7 +9,7 @@
    "#d2f5a6",
    "#76f2f2"
  ],
-  "backgroundColor": "rgba(41,52,65,1)",
+  "backgroundColor": "#18181c",
  "textStyle": {},
  "title": {
    "textStyle": {
--- a/src/hooks/variable/useGlobalVariable.ts
+++ b/src/hooks/variable/useGlobalVariable.ts
@ -37,5 +37,5 @@ export function getVariable(key: VariableStateKey) {
 }

 export function globalVariableToRefs<K extends VariableStateKey>(key: K) {
-  return toRef<typeof variableState, K>(variableState, key)
+  return readonly(toRef<typeof variableState, K>(variableState, key))
 }
--- a/src/hooks/web/index.ts
+++ b/src/hooks/web/index.ts
@ -13,6 +13,5 @@ import { useI18n, t } from './useI18n'
 import { useVueRouter } from '../web/useVueRouter'
 import { useDayjs } from '../web/useDayjs'
 import { useDevice } from './useDevice'
-import { useFullscreen } from './useFullscreen'

-export { useI18n, useVueRouter, useDayjs, t, useDevice, useFullscreen }
+export { useI18n, useVueRouter, useDayjs, t, useDevice }
--- a/src/hooks/web/useFullscreen.ts
+++ b/src/hooks/web/useFullscreen.ts
@ -1,40 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-10-25
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import { useFullscreen as hooksPlusUseFullscreen } from 'vue-hooks-plus'
-
-import type { useFullscreen as UseFullscreen } from 'vue-hooks-plus'
-
-type UseFullscreenParams = Parameters<typeof UseFullscreen>
-
-export function useFullscreen(
-  target: UseFullscreenParams[0],
-  options?: UseFullscreenParams[1],
-) {
-  const [
-    isFullscreen,
-    { enterFullscreen, exitFullscreen, toggleFullscreen, isEnabled },
-  ] = hooksPlusUseFullscreen(target, options)
-
-  if (!isEnabled) {
-    window.$message.warning('您当前环境不支持全屏模式')
-  }
-
-  return [
-    isFullscreen,
-    {
-      enterFullscreen,
-      exitFullscreen,
-      toggleFullscreen,
-      isEnabled,
-    },
-  ] as const
-}
--- a/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx
@ -13,12 +13,10 @@ import { NSpace, NSwitch, NTooltip } from 'naive-ui'
 import RIcon from '@/components/RIcon'

 import { useSetting } from '@/store'
-import { useI18n } from '@/hooks/web/index'

 const ThemeSwitch = defineComponent({
  name: 'ThemeSwitch',
  setup() {
-    const { t } = useI18n()
    const settingStore = useSetting()
    const { changeSwitcher } = settingStore
    const { themeValue } = storeToRefs(settingStore)
@ -34,14 +32,13 @@ const ThemeSwitch = defineComponent({
    }

    return {
-      t,
      changeSwitcher,
      themeValue,
      handleRailStyle,
    }
  },
  render() {
-    const { t } = this
+    const { $t } = this

    return (
      <NSpace justify="center">
@ -79,8 +76,8 @@ const ThemeSwitch = defineComponent({
            ),
            default: () =>
              this.themeValue
-                ? t('headerSettingOptions.ThemeOptions.Dark')
-                : t('headerSettingOptions.ThemeOptions.Light'),
+                ? $t('headerSettingOptions.ThemeOptions.Dark')
+                : $t('headerSettingOptions.ThemeOptions.Light'),
          }}
        </NTooltip>
      </NSpace>
--- a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
@ -15,7 +15,6 @@ import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/c

 import { APP_THEME } from '@/app-config/designConfig'
 import { useSetting } from '@/store'
-import { useI18n } from '@/hooks/web/index'

 import type { PropType } from 'vue'
 import type { Placement } from '@/types/modules/component'
@ -38,7 +37,6 @@ const SettingDrawer = defineComponent({
  },
  emits: ['update:show'],
  setup(props, { emit }) {
-    const { t } = useI18n()
    const settingStore = useSetting()

    const { changePrimaryColor, changeSwitcher, updateContentTransition } =
@ -80,7 +78,6 @@ const SettingDrawer = defineComponent({

    return {
      modelShow,
-      t,
      changePrimaryColor,
      themeValue,
      primaryColorOverride,
@ -95,7 +92,7 @@ const SettingDrawer = defineComponent({
    }
  },
  render() {
-    const { t } = this
+    const { $t } = this

    return (
      <NDrawer
@ -103,14 +100,14 @@ const SettingDrawer = defineComponent({
        placement={this.placement}
        width={this.width}
      >
-        <NDrawerContent title={t('headerSettingOptions.Title')}>
+        <NDrawerContent title={$t('headerSettingOptions.Title')}>
          <NSpace class="setting-drawer__space" vertical>
            <NDivider titlePlacement="center">
-              {t('headerSettingOptions.ThemeOptions.Title')}
+              {$t('headerSettingOptions.ThemeOptions.Title')}
            </NDivider>
            <ThemeSwitch />
            <NDivider titlePlacement="center">
-              {t('headerSettingOptions.ThemeOptions.PrimaryColorConfig')}
+              {$t('headerSettingOptions.ThemeOptions.PrimaryColorConfig')}
            </NDivider>
            <NColorPicker
              swatches={APP_THEME.appThemeColors}
@ -118,7 +115,7 @@ const SettingDrawer = defineComponent({
              onUpdateValue={this.changePrimaryColor.bind(this)}
            />
            <NDivider titlePlacement="center">
-              {t('headerSettingOptions.ContentTransition')}
+              {$t('headerSettingOptions.ContentTransition')}
            </NDivider>
            <NSelect
              v-model:value={this.contentTransition}
@ -128,7 +125,7 @@ const SettingDrawer = defineComponent({
              }}
            />
            <NDivider titlePlacement="center">
-              {t('headerSettingOptions.InterfaceDisplay')}
+              {$t('headerSettingOptions.InterfaceDisplay')}
            </NDivider>
            <NDescriptions labelPlacement="left" column={1}>
              <NDescriptionsItem label="多标签">
--- a/src/layout/components/SiderBar/index.tsx
+++ b/src/layout/components/SiderBar/index.tsx
@ -35,8 +35,10 @@ import {
  createLeftIconOptions,
  createRightIconOptions,
 } from './hook'
-import { useDevice, useFullscreen } from '@/hooks/web/index'
+import { useDevice } from '@/hooks/web/index'
 import { globalVariableToRefs, setVariable } from '@/hooks/variable/index'
+import { useFullscreen } from 'vue-hooks-plus'
+import { useI18n } from '@/hooks/web/index'

 import type { IconEventMapOptions, IconEventMap } from './type'

@ -46,8 +48,9 @@ export default defineComponent({
    const settingStore = useSetting()

    const { updateLocale, changeSwitcher } = settingStore
+    const { t } = useI18n()

-    const [isFullscreen, { toggleFullscreen }] = useFullscreen(
+    const [isFullscreen, { toggleFullscreen, isEnabled }] = useFullscreen(
      document.getElementsByTagName('html')[0],
    )
    const { drawerPlacement, breadcrumbSwitch, reloadRouteSwitch } =
@ -96,6 +99,10 @@ export default defineComponent({
        window.open('https://github.com/XiaoDaiGua-Ray/ray-template')
      },
      fullscreen: () => {
+        if (!isEnabled) {
+          window.$message.warning(t('globalMessage.isEnabledFullscreen'))
+        }
+
        toggleFullscreen()
      },
      search: () => {
--- a/src/locales/lang/en-US/globalMessage.json
+++ b/src/locales/lang/en-US/globalMessage.json
@ -0,0 +1,3 @@
+{
+  "isEnabledFullscreen": "The current environment does not support full screen"
+}
--- a/src/locales/lang/zh-CN/globalMessage.json
+++ b/src/locales/lang/zh-CN/globalMessage.json
@ -0,0 +1,3 @@
+{
+  "isEnabledFullscreen": "当前环境不支持全屏"
+}
--- a/src/utils/basic.ts
+++ b/src/utils/basic.ts
@ -49,7 +49,11 @@ export const downloadBase64File = (base64: string, fileName: string) => {
  link.href = base64
  link.download = fileName

+  link.style.display = 'none'
+
+  document.body.appendChild(link)
  link.click()
+  document.body.removeChild(link)
 }

 /**
@ -135,12 +139,10 @@ export const downloadAnyFile = (
    link.style.display = 'none'

    document.body.appendChild(link)
-
    link.click()
-
    document.body.removeChild(link)
-
    URL.revokeObjectURL(url)
+
    resolve()
  })
 }
--- a/src/utils/vue/index.ts
+++ b/src/utils/vue/index.ts
@ -1,2 +1,3 @@
 export { call } from './call'
 export { unrefElement } from './unrefElement'
+export { renderNode } from './renderNode'
--- a/src/utils/vue/renderNode.ts
+++ b/src/utils/vue/renderNode.ts
@ -0,0 +1,53 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-10-27
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { isValueType } from '@/utils/basic'
+
+import type { VNode, VNodeChild } from 'vue'
+
+export type RenderVNodeType =
+  | VNode
+  | VNodeChild
+  | (() => VNode)
+  | string
+  | number
+  | undefined
+  | null
+  | JSX.Element
+
+export type DefaultElement = NonNullable<
+  Omit<RenderVNodeType, 'string' | 'number'>
+>
+
+export interface RenderNodeOptions<T extends DefaultElement> {
+  defaultElement?: T
+}
+
+export function renderNode<T extends DefaultElement>(
+  vnode: RenderVNodeType,
+  options?: RenderNodeOptions<T>,
+) {
+  if (!vnode) {
+    const { defaultElement } = options ?? {}
+
+    return typeof defaultElement === 'function'
+      ? defaultElement
+      : () => defaultElement
+  }
+
+  if (typeof vnode === 'string' || isValueType<object>(vnode, 'Object')) {
+    return () => vnode
+  }
+
+  if (typeof vnode === 'function') {
+    return vnode
+  }
+}
--- a/src/views/demo/echart/index.tsx
+++ b/src/views/demo/echart/index.tsx
@ -1,12 +1,9 @@
 import './index.scss'

-import { NCard, NSwitch, NSpace, NP, NH2, NButton } from 'naive-ui'
+import { NCard, NSwitch, NSpace, NH2, NButton } from 'naive-ui'
 import RChart from '@/components/RChart/index'

-import dayjs from 'dayjs'
-
-import type { ECharts } from 'echarts/core'
-import type { RayChartInst } from '@/components/RChart/index'
+import type { RayChartInst } from '@/components/RChart/type'

 const Echart = defineComponent({
  name: 'REchart',
@ -85,9 +82,6 @@ const Echart = defineComponent({
      ],
    }
    const baseLineOptions = ref({
-      title: {
-        text: dayjs().valueOf(),
-      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
@ -100,11 +94,6 @@ const Echart = defineComponent({
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
-      toolbox: {
-        feature: {
-          saveAsImage: {},
-        },
-      },
      grid: {
        left: '3%',
        right: '4%',
@ -189,16 +178,6 @@ const Echart = defineComponent({
      chartAria.value = bool
    }

-    const handleChartRenderSuccess = (chart: ECharts) => {
-      window.$notification.info({
-        title: '可视化图渲染成功回调函数',
-        content: '可视化图渲染成功, 并且返回了当前可视化图实例',
-        duration: 5 * 1000,
-      })
-
-      console.log(baseChartRef.value, chart)
-    }
-
    const mountChart = () => {
      baseChartRef.value?.render()
    }
@ -208,8 +187,6 @@ const Echart = defineComponent({
    }

    const handleUpdateTitle = () => {
-      baseLineOptions.value.title.text = dayjs().valueOf()
-
      const createData = () => Math.floor((Math.random() + 1) * 100)

      baseLineOptions.value.series[0].data = new Array(7)
@ -227,7 +204,6 @@ const Echart = defineComponent({
      handleLoadingShow,
      chartAria,
      handleAriaShow,
-      handleChartRenderSuccess,
      basePieOptions,
      baseLineOptions,
      ...toRefs(state),
@ -262,7 +238,7 @@ const Echart = defineComponent({
            </li>
          </ul>
        </NCard>
-        <NH2>强制渲染过渡动画（animation）</NH2>
+        <NH2>强制渲染过渡动画（animation），预设 card 风格图表</NH2>
        <NSpace style={['padding: 18px 0']}>
          <NButton onClick={this.mountChart.bind(this)}>渲染</NButton>
          <NButton onClick={this.unmountChart.bind(this)}>卸载</NButton>
@ -272,10 +248,12 @@ const Echart = defineComponent({
        </NSpace>
        <div class="chart--container">
          <RChart
+            title="周销售量"
            ref="baseChartRef"
            autoChangeTheme
            options={this.baseLineOptions}
            showAria={this.chartAria}
+            preset="card"
          />
        </div>
        <NH2>不跟随主题切换的暗色主题可视化图，并且手动指定原始主题色</NH2>
--- a/src/views/login/components/Signin/index.tsx
+++ b/src/views/login/components/Signin/index.tsx
@ -1,15 +1,15 @@
-import { NForm, NFormItem, NInput, NButton, NSpace, NDivider } from 'naive-ui'
+import { NForm, NFormItem, NInput, NButton } from 'naive-ui'

 import { setStorage } from '@/utils/cache'
 import { useSignin } from '@/store'
 import { useI18n } from '@/hooks/web/index'
 import { APP_CATCH_KEY, ROOT_ROUTE } from '@/app-config/appConfig'
 import { useVueRouter } from '@/hooks/web/index'
-import { setVariable } from '@/hooks/variable/index'
+import { setVariable, globalVariableToRefs } from '@/hooks/variable/index'

 import type { FormInst } from 'naive-ui'

-const Signin = defineComponent({
+export default defineComponent({
  name: 'RSignin',
  setup() {
    const loginFormRef = ref<FormInst>()
@ -19,6 +19,7 @@ const Signin = defineComponent({

    const { signin } = signinStore
    const { path } = ROOT_ROUTE
+    const globalSpinning = globalVariableToRefs('globalSpinning')

    const useSigninForm = () => ({
      name: 'Ray Admin',
@ -74,37 +75,37 @@ const Signin = defineComponent({
      loginFormRef,
      handleLogin,
      rules,
-      t,
+      globalSpinning,
    }
  },
  render() {
-    const { t } = this
+    const { $t, globalSpinning } = this

    return (
      <NForm model={this.signinForm} ref="loginFormRef" rules={this.rules}>
-        <NFormItem label={t('views.login.index.Name')} path="name">
+        <NFormItem label={$t('views.login.index.Name')} path="name">
          <NInput
            v-model:value={this.signinForm.name}
-            placeholder={t('views.login.index.NamePlaceholder')}
+            placeholder={$t('views.login.index.NamePlaceholder')}
          />
        </NFormItem>
-        <NFormItem label={t('views.login.index.Password')} path="pwd">
+        <NFormItem label={$t('views.login.index.Password')} path="pwd">
          <NInput
            v-model:value={this.signinForm.pwd}
            type="password"
-            placeholder={t('views.login.index.PasswordPlaceholder')}
+            showPasswordOn="click"
+            placeholder={$t('views.login.index.PasswordPlaceholder')}
          />
        </NFormItem>
        <NButton
          style={['width: 100%', 'margin-to: 18px']}
          type="primary"
          onClick={this.handleLogin.bind(this)}
+          loading={globalSpinning}
        >
-          {t('views.login.index.Login')}
+          {$t('views.login.index.Login')}
        </NButton>
      </NForm>
    )
  },
 })
-
-export default Signin
--- a/src/views/login/index.tsx
+++ b/src/views/login/index.tsx
@ -21,13 +21,11 @@ import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/c

 import { useSetting } from '@/store'
 import { LOCAL_OPTIONS } from '@/app-config/localConfig'
-import { useI18n } from '@/hooks/web/index'
 import { useWindowSize } from '@vueuse/core'

 const Login = defineComponent({
  name: 'RLogin',
  setup() {
-    const { t } = useI18n()
    const {
      layout: { copyright },
    } = __APP_CFG__
@ -44,13 +42,12 @@ const Login = defineComponent({
      ...toRefs(state),
      windowHeight,
      updateLocale,
-      t,
      copyright,
      windowWidth,
    }
  },
  render() {
-    const { t } = this
+    const { $t } = this

    return (
      <div
@ -125,19 +122,19 @@ const Login = defineComponent({
                      default: () => (
                        <>
                          <NTabPane
-                            tab={t('views.login.index.Signin')}
+                            tab={$t('views.login.index.Signin')}
                            name="signin"
                          >
                            <Signin />
                          </NTabPane>
                          <NTabPane
-                            tab={t('views.login.index.Register')}
+                            tab={$t('views.login.index.Register')}
                            name="register"
                          >
                            <Register />
                          </NTabPane>
                          <NTabPane
-                            tab={t('views.login.index.QRCodeSignin')}
+                            tab={$t('views.login.index.QRCodeSignin')}
                            name="qrcodeSignin"
                          >
                            <QRCodeSignin />
--- a/unplugin/.eslintrc-auto-import.json
+++ b/unplugin/.eslintrc-auto-import.json
@ -70,7 +70,6 @@
    "useCssModule": true,
    "useCssVars": true,
    "useDialog": true,
-    "useI18n": true,
    "useLink": true,
    "useLoadingBar": true,
    "useMessage": true,
--- a/unplugin/auto-imports.d.ts
+++ b/unplugin/auto-imports.d.ts
@ -66,7 +66,6 @@ declare global {
  const useCssModule: typeof import('vue')['useCssModule']
  const useCssVars: typeof import('vue')['useCssVars']
  const useDialog: typeof import('naive-ui')['useDialog']
-  const useI18n: typeof import('vue-i18n')['useI18n']
  const useLink: typeof import('vue-router')['useLink']
  const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
  const useMessage: typeof import('naive-ui')['useMessage']
--- a/vite.pliugin.config.ts
+++ b/vite.pliugin.config.ts
@ -63,7 +63,6 @@ export default function (mode: string): PluginOption[] {
        'vue',
        'vue-router',
        'pinia',
-        'vue-i18n',
        {
          'naive-ui': [
            'useDialog',
@ -110,11 +109,6 @@ export default function (mode: string): PluginOption[] {
          libDirectory: '',
          camel2DashComponentName: false,
        },
-        {
-          libName: 'lodash',
-          libDirectory: '',
-          camel2DashComponentName: false,
-        },
      ],
    }),
    {