blackteay/ray-template
1
0
Fork 0
mirror of https://github.com/XiaoDaiGua-Ray/ray-template.git synced 2025-04-06 03:57:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

v4.2.8

Browse Source
This commit is contained in:
XiaoDaiGua-Ray 2023-10-27 14:55:25 +08:00
parent f6c343911e
commit a840693455
33 changed files with 361 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
CHANGELOG.md
View File

@ -1,5 +1,36 @@
# CHANGE LOG # 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 ## 4.2.7
主要是做了一些统一命名的事情，以前由于写的比较放浪形骸现在正在慢慢更改这个大问题。 主要是做了一些统一命名的事情，以前由于写的比较放浪形骸现在正在慢慢更改这个大问题。

5
index.html
View File

@ -3,7 +3,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/ray.svg" /> <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> <title>Vite + Vue + TS</title>
</head> </head>
<style> <style>

3
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "ray-template", "name": "ray-template",
"private": false, "private": false,
"version": "4.2.7", "version": "4.2.8",
"type": "module", "type": "module",
"engines": { "engines": {
"node": ">=16.0.0", "node": ">=16.0.0",
@ -53,7 +53,6 @@
"@types/crypto-js": "^4.1.1", "@types/crypto-js": "^4.1.1",
"@types/lodash-es": "^4.17.7", "@types/lodash-es": "^4.17.7",
"@types/mockjs": "1.0.7", "@types/mockjs": "1.0.7",
"@types/scrollreveal": "^0.0.8",
"@typescript-eslint/eslint-plugin": "^5.61.0", "@typescript-eslint/eslint-plugin": "^5.61.0",
"@typescript-eslint/parser": "^5.61.0", "@typescript-eslint/parser": "^5.61.0",
"@vitejs/plugin-vue": "^4.2.3", "@vitejs/plugin-vue": "^4.2.3",

1
src/app-components/app/AppLockScreen/components/LockScreen/index.tsx
View File

@ -75,6 +75,7 @@ const LockScreen = defineComponent({
type="password" type="password"
placeholder="请输入锁屏密码" placeholder="请输入锁屏密码"
clearable clearable
showPasswordOn="click"
minlength={6} minlength={6}
maxlength={12} maxlength={12}
onKeydown={(e: KeyboardEvent) => { onKeydown={(e: KeyboardEvent) => {

14
src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx
View File

@ -18,6 +18,7 @@ import dayjs from 'dayjs'
import { useSetting, useSignin } from '@/store' import { useSetting, useSignin } from '@/store'
import { rules, useCondition } from '@/app-components/app/AppLockScreen/hook' import { rules, useCondition } from '@/app-components/app/AppLockScreen/hook'
import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar' import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
import { useDevice } from '@/hooks/web/index'
import type { FormInst, InputInst } from 'naive-ui' import type { FormInst, InputInst } from 'naive-ui'
@ -30,6 +31,7 @@ const UnlockScreen = defineComponent({
const { logout } = useSignin() const { logout } = useSignin()
const { changeSwitcher } = useSetting() const { changeSwitcher } = useSetting()
const { setLockAppScreen } = useAppLockScreen() const { setLockAppScreen } = useAppLockScreen()
const { isTabletOrSmaller } = useDevice()
const HH_MM_FORMAT = 'HH:mm' const HH_MM_FORMAT = 'HH:mm'
const AM_PM_FORMAT = 'A' const AM_PM_FORMAT = 'A'
@ -91,13 +93,23 @@ const UnlockScreen = defineComponent({
unlockScreen, unlockScreen,
formRef, formRef,
inputInstRef, inputInstRef,
isTabletOrSmaller,
} }
}, },
render() { render() {
const { isTabletOrSmaller } = this
return ( return (
<div class="app-lock-screen__unlock"> <div class="app-lock-screen__unlock">
<div class="app-lock-screen__unlock__content"> <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="left">{this.HH_MM?.split(':')[0]}</div>
<div class="right">{this.HH_MM?.split(':')[1]}</div> <div class="right">{this.HH_MM?.split(':')[1]}</div>
</div> </div>

10
src/app-components/app/AppLockScreen/index.scss
View File

@ -26,6 +26,16 @@
gap: 80px; gap: 80px;
z-index: 0; z-index: 0;
&.app-lock-screen__unlock__content-bg--smaller {
& .left,
& .right {
padding: 0px;
font-size: 90px;
padding: 24px;
border-radius: 4px;
}
}
& .left, & .left,
& .right { & .right {
@include flexCenter; @include flexCenter;

1
src/app-components/app/AppLockScreen/index.tsx
View File

@ -43,6 +43,7 @@ const AppLockScreen = defineComponent({
v-model:show={this.lockScreenSwitch} v-model:show={this.lockScreenSwitch}
transformOrigin="center" transformOrigin="center"
show show
autoFocus={false}
maskClosable={false} maskClosable={false}
closeOnEsc={false} closeOnEsc={false}
preset={!this.getLockAppScreen() ? 'dialog' : void 0} preset={!this.getLockAppScreen() ? 'dialog' : void 0}

147
src/components/RChart/index.tsx
View File

@ -37,24 +37,27 @@ import {
} from 'echarts/charts' // 系列类型(后缀都为 `SeriesOption`) } from 'echarts/charts' // 系列类型(后缀都为 `SeriesOption`)
import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性 import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性
import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器 import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器
import { NCard } from 'naive-ui'
import props from './props' import props from './props'
import { useSetting } from '@/store' import { useSetting } from '@/store'
import { cloneDeep, throttle } from 'lodash-es' import { throttle } from 'lodash-es'
import { on, off, completeSize } from '@/utils/element' import { completeSize } from '@/utils/element'
import { call } from '@/utils/vue/index' import { call } from '@/utils/vue/index'
import { setupChartTheme } from './helper' import { setupChartTheme } from './helper'
import { APP_THEME } from '@/app-config/designConfig' import { APP_THEME } from '@/app-config/designConfig'
import { useResizeObserver } from '@vueuse/core' 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 { WatchStopHandle } from 'vue'
import type { AnyFC } from '@/types/modules/utils' import type { AnyFC } from '@/types/modules/utils'
import type { DebouncedFunc } from 'lodash-es' import type { DebouncedFunc } from 'lodash-es'
import type { ChartTheme } from '@/components/RChart/type'
import type { UseResizeObserverReturn } from '@vueuse/core' import type { UseResizeObserverReturn } from '@vueuse/core'
import type { ECharts, EChartsCoreOption } from 'echarts/core' import type { ECharts, EChartsCoreOption } from 'echarts/core'
import type { RenderVNodeType } from '@use-utils/vue/renderNode'
export type { RayChartInst, EChartsExtensionInstallRegisters } from './type' import type { DropdownProps, DropdownOption } from 'naive-ui'
const defaultChartOptions = { const defaultChartOptions = {
notMerge: false, notMerge: false,
@ -70,14 +73,24 @@ export default defineComponent({
setup(props, { expose }) { setup(props, { expose }) {
const settingStore = useSetting() const settingStore = useSetting()
const { themeValue: currentTheme } = storeToRefs(settingStore) const { themeValue: currentTheme } = storeToRefs(settingStore)
const rayChartRef = ref<HTMLElement>() // `echart` 容器实例 const rayChartRef = ref<HTMLElement>() // echart 容器实例
const rayChartWrapperRef = ref<HTMLElement>() const rayChartWrapperRef = ref<HTMLElement>()
const echartInstanceRef = ref<ECharts>() // `echart` 实例 const echartInstanceRef = ref<ECharts>() // echart 实例
let resizeThrottleReturn: DebouncedFunc<AnyFC> | null // resize 防抖方法实例 let resizeThrottleReturn: DebouncedFunc<AnyFC> | null // resize 防抖方法实例
let resizeOvserverReturn: UseResizeObserverReturn | null let resizeOvserverReturn: UseResizeObserverReturn | null
const { echartTheme } = APP_THEME const { echartTheme } = APP_THEME
let watchCallback: WatchStopHandle | null 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 cssVarsRef = computed(() => {
const cssVars = { const cssVars = {
'--ray-chart-width': completeSize(props.width), '--ray-chart-width': completeSize(props.width),
@ -105,7 +118,6 @@ export default defineComponent({
ToolboxComponent, ToolboxComponent,
AriaComponent, AriaComponent,
]) // 注册组件 ]) // 注册组件
echarts.use([ echarts.use([
BarChart, BarChart,
LineChart, LineChart,
@ -114,11 +126,7 @@ export default defineComponent({
ScatterChart, ScatterChart,
PictorialBarChart, PictorialBarChart,
]) // 注册 chart series type ]) // 注册 chart series type
echarts.use([LabelLayout, UniversalTransition]) // 注册布局, 过度效果 echarts.use([LabelLayout, UniversalTransition]) // 注册布局, 过度效果
// 如果业务场景中需要 `svg` 渲染器, 手动导入渲染器后使用该行代码即可(不过为了体积考虑, 移除了 SVG 渲染器)
// echarts.use([props.canvasRender ? CanvasRenderer : SVGRenderer])
echarts.use([CanvasRenderer]) // 注册渲染器 echarts.use([CanvasRenderer]) // 注册渲染器
try { try {
@ -132,7 +140,13 @@ export default defineComponent({
/** /**
* *
* 更新 chart 主题 * 更具当前主题渲染 chart
*
* 如果手动配置了 theme 属性，autoChangeTheme 属性则会失效
* 但是，如果配置 theme 属性为 default，则会根据当前主题色渲染 chart 默认主题
*
* 当 Boolean(theme) 为 false，则会尝试获取 echartTheme 属性
* 但是，如果未获取到 echartTheme 属性，则会使用默认样式
*/ */
const updateChartTheme = () => { const updateChartTheme = () => {
if (props.theme === 'default') { if (props.theme === 'default') {
@ -159,11 +173,10 @@ export default defineComponent({
* @returns `chart options` * @returns `chart options`
* *
* 合并配置项 * 合并配置项
*
* 如果有需要特殊全局配置的可以在此继续写... * 如果有需要特殊全局配置的可以在此继续写...
*/ */
const combineChartOptions = (ops: EChartsCoreOption) => { const combineChartOptions = (ops: EChartsCoreOption) => {
let options = cloneDeep(unref(ops)) let options = unref(ops)
const assign = (opts: object) => const assign = (opts: object) =>
Object.assign( Object.assign(
@ -211,25 +224,28 @@ export default defineComponent({
}) })
/** 注册 chart */ /** 注册 chart */
echartInstanceRef.value = echarts.init(element, theme, { echartInst = echarts.init(element, theme, {
/** 如果款度为 0, 则以 200px 填充 */ /** 如果款度为 0, 则以 200px 填充 */
width: width === 0 ? 200 : void 0, width: width === 0 ? 200 : void 0,
/** 如果高度为 0, 则以 200px 填充 */ /** 如果高度为 0, 则以 200px 填充 */
height: height === 0 ? 200 : void 0, height: height === 0 ? 200 : void 0,
}) })
echartInstanceRef.value = echartInst
/** 设置 options 配置项 */ /** 设置 options 配置项 */
echartInstanceRef.value.setOption({})
if (props.animation) { if (props.animation) {
echartInst.setOption({})
setTimeout(() => { setTimeout(() => {
options && echartInstanceRef.value?.setOption(options) options && echartInst?.setOption(options)
}) })
} else {
options && echartInst?.setOption(options)
} }
/** 渲染成功回调 */ /** 渲染成功回调 */
if (onSuccess) { if (onSuccess) {
call(onSuccess, echartInstanceRef.value) call(onSuccess, echartInst)
} }
} catch (e) { } catch (e) {
/** 渲染失败回调 */ /** 渲染失败回调 */
@ -246,25 +262,40 @@ export default defineComponent({
* 销毁 `chart` 实例, 释放资源 * 销毁 `chart` 实例, 释放资源
*/ */
const destroyChart = () => { const destroyChart = () => {
if (echartInstanceRef.value) { if (echartInst && echartInst.getDom()) {
echartInstanceRef.value.clear() echartInst.clear()
echartInstanceRef.value.dispose() echartInst.dispose()
echartInstanceRef.value = void 0
} }
} }
/** 重置 echarts 尺寸 */ /** 重置 echarts 尺寸 */
const resizeChart = () => { const resizeChart = () => {
if (echartInstanceRef.value) { if (echartInst) {
try { echartInst.resize()
echartInstanceRef.value.resize() }
// eslint-disable-next-line no-empty }
} catch (e) {}
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 = () => { const mount = () => {
// 避免重复渲染 // 避免重复渲染
if (echartInstanceRef.value?.getDom()) { if (echartInst?.getDom()) {
console.warn( console.warn(
'RChart mount: There is a chart instance already initialized on the dom. Execution was interrupted', '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) { if (props.autoResize) {
resizeThrottleReturn = throttle(resizeChart, props.throttleWait) resizeThrottleReturn = throttle(resizeChart, props.throttleWait)
/** 监听内容区域尺寸变化更新 chart */ /** 监听内容区域尺寸变化更新 chart */
resizeOvserverReturn = useResizeObserver( resizeOvserverReturn = useResizeObserver(
props.observer || rayChartWrapperRef, props.observer || rayChartWrapperRef,
resizeThrottleReturn, resizeThrottleReturn,
) )
on(window, 'resize', resizeThrottleReturn)
} }
} }
const unmount = () => { const unmount = () => {
/** 卸载 echarts */ /** 卸载 echarts */
destroyChart() destroyChart()
/** 卸载事件柄 */
resizeThrottleReturn && off(window, 'resize', resizeThrottleReturn)
/** 注销防抖 */ /** 注销防抖 */
resizeThrottleReturn?.cancel() resizeThrottleReturn?.cancel()
/** 注销 observer 监听 */ /** 注销 observer 监听 */
@ -342,7 +370,7 @@ export default defineComponent({
defaultChartOptions, defaultChartOptions,
) )
/** 如果 options 发生变动更新 echarts */ /** 如果 options 发生变动更新 echarts */
echartInstanceRef.value?.setOption(options, setOpt) echartInst?.setOption(options, setOpt)
}, },
{ {
deep: true, deep: true,
@ -353,8 +381,8 @@ export default defineComponent({
} }
props.loading props.loading
? echartInstanceRef.value?.showLoading(props.loadingOptions) ? echartInst?.showLoading(props.loadingOptions)
: echartInstanceRef.value?.hideLoading() : echartInst?.hideLoading()
}) })
expose({ expose({
@ -368,10 +396,8 @@ export default defineComponent({
await registerChartCore() await registerChartCore()
}) })
onMounted(() => { onMounted(() => {
nextTick(() => {
mount() mount()
}) })
})
onBeforeUnmount(() => { onBeforeUnmount(() => {
unmount() unmount()
watchCallback?.() watchCallback?.()
@ -381,10 +407,51 @@ export default defineComponent({
rayChartRef, rayChartRef,
cssVarsRef, cssVarsRef,
rayChartWrapperRef, rayChartWrapperRef,
moreDropDownOptions,
dropdownSelect,
} }
}, },
render() { 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" style={[this.cssVarsRef]} ref="rayChartWrapperRef">
<div class="ray-chart__container" ref="rayChartRef"></div> <div class="ray-chart__container" ref="rayChartRef"></div>
</div> </div>

64
src/components/RChart/props.ts
View File

@ -1,5 +1,5 @@
import type * as echarts from 'echarts/core' // `echarts` 核心模块 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 { MaybeArray } from '@/types/modules/utils'
import type { import type {
LoadingOptions, LoadingOptions,
@ -8,11 +8,60 @@ import type {
} from '@/components/RChart/type' } from '@/components/RChart/type'
import type { ECharts, SetOptionOpts } from 'echarts/core' import type { ECharts, SetOptionOpts } from 'echarts/core'
import type { MaybeComputedElementRef, MaybeElement } from '@vueuse/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' import { loadingOptions } from './helper'
const props = { 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: { width: {
/** /**
* *
@ -44,17 +93,6 @@ const props = {
type: [Boolean, Object] as PropType<AutoResize>, type: [Boolean, Object] as PropType<AutoResize>,
default: true, default: true,
}, },
canvasRender: {
/**
*
* @deprecated
* `chart` 渲染器, 默认使用 `canvas`
*
* 考虑到打包体积与大多数业务场景缘故, 暂时移除 `SVGRenderer` 渲染器的默认导入
*/
type: Boolean,
default: true,
},
showAria: { showAria: {
/** /**
* *

10
src/components/RChart/type.ts
View File

@ -63,14 +63,24 @@ export interface RayChartInst {
* *
* 手动卸载当前 chart 图 * 手动卸载当前 chart 图
* 注意：不会卸载当前组件，仅仅是卸载 chart * 注意：不会卸载当前组件，仅仅是卸载 chart
*
* @default () => void
*/ */
dispose: () => void dispose: () => void
/** /**
* *
* 手动渲染 chart 图 * 手动渲染 chart 图
* 注意：会根据当前的 options 配置项与 props 配置项重新渲染 chart * 注意：会根据当前的 options 配置项与 props 配置项重新渲染 chart
*
* @default () => void
*/ */
render: () => void render: () => void
} }
export type EChartsExtensionInstallRegisters = typeof CanvasRenderer export type EChartsExtensionInstallRegisters = typeof CanvasRenderer
export type RChartPresetType = 'card' | 'default' | null | undefined
export type RChartDownloadOptions = {
filename?: string
} & Parameters<ECharts['getDataURL']>[0]

4
src/components/RMoreDropdown/src/index.tsx
View File

@ -18,14 +18,14 @@ export default defineComponent({
name: 'RMoreDropdown', name: 'RMoreDropdown',
props, props,
render() { render() {
const { iconSize } = this const { iconSize, cursor } = this
return ( return (
<NDropdown {...this.$props} {...this.$attrs}> <NDropdown {...this.$props} {...this.$attrs}>
{this.$slots.default ? ( {this.$slots.default ? (
this.$slots.default() this.$slots.default()
) : ( ) : (
<RIcon name="more" size={iconSize} /> <RIcon name="more" size={iconSize} cursor={cursor} />
)} )}
</NDropdown> </NDropdown>
) )

4
src/components/RMoreDropdown/src/props.ts
View File

@ -17,6 +17,10 @@ const props = {
type: Number, type: Number,
default: 14, default: 14,
}, },
cursor: {
type: String,
default: 'default',
},
} }
export default props export default props

6
src/components/RTable/src/Table.tsx
View File

@ -18,7 +18,7 @@ import C from './components/C'
import Print from './components/Print' import Print from './components/Print'
import props from './props' import props from './props'
import { call } from '@/utils/vue/index' import { call, renderNode } from '@/utils/vue/index'
import { uuid } from '@/utils/basic' import { uuid } from '@/utils/basic'
import config from './config' import config from './config'
@ -203,7 +203,9 @@ export default defineComponent({
) : null} ) : null}
</> </>
), ),
header: () => this.title || <div style="display: none;"></div>, header: renderNode(this.title, {
defaultElement: <div style="display: none;"></div>,
}),
'header-extra': () => ( 'header-extra': () => (
<NSpace wrapItem={false} align="center"> <NSpace wrapItem={false} align="center">
{tool(this.$props as any)} {tool(this.$props as any)}

1
src/components/RTable/src/components/C.tsx
View File

@ -167,7 +167,6 @@ export default defineComponent({
} }
const resizableClick = (option: C, index: number) => { const resizableClick = (option: C, index: number) => {
console.log('🚀 ~ resizableClick ~ option:', option.isResizable)
option['isResizable'] = !option['isResizable'] option['isResizable'] = !option['isResizable']
option['resizable'] = option['isResizable'] option['resizable'] = option['isResizable']
treeDataSource.value[index] = option treeDataSource.value[index] = option

16
src/components/RTable/src/components/Fullscreen.tsx
View File

@ -13,7 +13,7 @@ import { NPopover } from 'naive-ui'
import RIcon from '@/components/RIcon/index' import RIcon from '@/components/RIcon/index'
import config from '../config' import config from '../config'
import { useFullscreen } from '@/hooks/web/index' import { useFullscreen } from 'vue-hooks-plus'
import type { TableProvider } from '../type' import type { TableProvider } from '../type'
@ -24,14 +24,18 @@ export default defineComponent({
config.tableKey, config.tableKey,
{} as TableProvider, {} as TableProvider,
) )
const [isFullscreen, { toggleFullscreen }] = useFullscreen(wrapperRef) const [isFullscreen, { toggleFullscreen, isEnabled }] =
useFullscreen(wrapperRef)
return { return {
toggleFullscreen, toggleFullscreen,
isFullscreen, isFullscreen,
isEnabled,
} }
}, },
render() { render() {
const { toggleFullscreen, isEnabled, $t } = this
return ( return (
<NPopover showArrow={false}> <NPopover showArrow={false}>
{{ {{
@ -40,7 +44,13 @@ export default defineComponent({
name="fullscreen" name="fullscreen"
size={config.tableIconSize} size={config.tableIconSize}
cursor="pointer" cursor="pointer"
onClick={this.toggleFullscreen.bind(this)} onClick={() => {
if (!isEnabled) {
$t('globalMessage.isEnabledFullscreen')
}
toggleFullscreen()
}}
/> />
), ),
default: () => (this.isFullscreen ? '取消全屏' : '全屏表格'), default: () => (this.isFullscreen ? '取消全屏' : '全屏表格'),

2
src/echart-themes/macarons/macarons-dark.json
View File

@ -9,7 +9,7 @@
"#d2f5a6", "#d2f5a6",
"#76f2f2" "#76f2f2"
], ],
"backgroundColor": "rgba(41,52,65,1)", "backgroundColor": "#18181c",
"textStyle": {}, "textStyle": {},
"title": { "title": {
"textStyle": { "textStyle": {

2
src/hooks/variable/useGlobalVariable.ts
View File

@ -37,5 +37,5 @@ export function getVariable(key: VariableStateKey) {
} }
export function globalVariableToRefs<K extends VariableStateKey>(key: K) { export function globalVariableToRefs<K extends VariableStateKey>(key: K) {
return toRef<typeof variableState, K>(variableState, key) return readonly(toRef<typeof variableState, K>(variableState, key))
} }

3
src/hooks/web/index.ts
View File

@ -13,6 +13,5 @@ import { useI18n, t } from './useI18n'
import { useVueRouter } from '../web/useVueRouter' import { useVueRouter } from '../web/useVueRouter'
import { useDayjs } from '../web/useDayjs' import { useDayjs } from '../web/useDayjs'
import { useDevice } from './useDevice' import { useDevice } from './useDevice'
import { useFullscreen } from './useFullscreen'
export { useI18n, useVueRouter, useDayjs, t, useDevice, useFullscreen } export { useI18n, useVueRouter, useDayjs, t, useDevice }

40
src/hooks/web/useFullscreen.ts
View File

@ -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
}

9
src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx
View File

@ -13,12 +13,10 @@ import { NSpace, NSwitch, NTooltip } from 'naive-ui'
import RIcon from '@/components/RIcon' import RIcon from '@/components/RIcon'
import { useSetting } from '@/store' import { useSetting } from '@/store'
import { useI18n } from '@/hooks/web/index'
const ThemeSwitch = defineComponent({ const ThemeSwitch = defineComponent({
name: 'ThemeSwitch', name: 'ThemeSwitch',
setup() { setup() {
const { t } = useI18n()
const settingStore = useSetting() const settingStore = useSetting()
const { changeSwitcher } = settingStore const { changeSwitcher } = settingStore
const { themeValue } = storeToRefs(settingStore) const { themeValue } = storeToRefs(settingStore)
@ -34,14 +32,13 @@ const ThemeSwitch = defineComponent({
} }
return { return {
t,
changeSwitcher, changeSwitcher,
themeValue, themeValue,
handleRailStyle, handleRailStyle,
} }
}, },
render() { render() {
const { t } = this const { $t } = this
return ( return (
<NSpace justify="center"> <NSpace justify="center">
@ -79,8 +76,8 @@ const ThemeSwitch = defineComponent({
), ),
default: () => default: () =>
this.themeValue this.themeValue
? t('headerSettingOptions.ThemeOptions.Dark') ? $t('headerSettingOptions.ThemeOptions.Dark')
: t('headerSettingOptions.ThemeOptions.Light'), : $t('headerSettingOptions.ThemeOptions.Light'),
}} }}
</NTooltip> </NTooltip>
</NSpace> </NSpace>

15
src/layout/components/SiderBar/components/SettingDrawer/index.tsx
View File

@ -15,7 +15,6 @@ import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/c
import { APP_THEME } from '@/app-config/designConfig' import { APP_THEME } from '@/app-config/designConfig'
import { useSetting } from '@/store' import { useSetting } from '@/store'
import { useI18n } from '@/hooks/web/index'
import type { PropType } from 'vue' import type { PropType } from 'vue'
import type { Placement } from '@/types/modules/component' import type { Placement } from '@/types/modules/component'
@ -38,7 +37,6 @@ const SettingDrawer = defineComponent({
}, },
emits: ['update:show'], emits: ['update:show'],
setup(props, { emit }) { setup(props, { emit }) {
const { t } = useI18n()
const settingStore = useSetting() const settingStore = useSetting()
const { changePrimaryColor, changeSwitcher, updateContentTransition } = const { changePrimaryColor, changeSwitcher, updateContentTransition } =
@ -80,7 +78,6 @@ const SettingDrawer = defineComponent({
return { return {
modelShow, modelShow,
t,
changePrimaryColor, changePrimaryColor,
themeValue, themeValue,
primaryColorOverride, primaryColorOverride,
@ -95,7 +92,7 @@ const SettingDrawer = defineComponent({
} }
}, },
render() { render() {
const { t } = this const { $t } = this
return ( return (
<NDrawer <NDrawer
@ -103,14 +100,14 @@ const SettingDrawer = defineComponent({
placement={this.placement} placement={this.placement}
width={this.width} width={this.width}
> >
<NDrawerContent title={t('headerSettingOptions.Title')}> <NDrawerContent title={$t('headerSettingOptions.Title')}>
<NSpace class="setting-drawer__space" vertical> <NSpace class="setting-drawer__space" vertical>
<NDivider titlePlacement="center"> <NDivider titlePlacement="center">
{t('headerSettingOptions.ThemeOptions.Title')} {$t('headerSettingOptions.ThemeOptions.Title')}
</NDivider> </NDivider>
<ThemeSwitch /> <ThemeSwitch />
<NDivider titlePlacement="center"> <NDivider titlePlacement="center">
{t('headerSettingOptions.ThemeOptions.PrimaryColorConfig')} {$t('headerSettingOptions.ThemeOptions.PrimaryColorConfig')}
</NDivider> </NDivider>
<NColorPicker <NColorPicker
swatches={APP_THEME.appThemeColors} swatches={APP_THEME.appThemeColors}
@ -118,7 +115,7 @@ const SettingDrawer = defineComponent({
onUpdateValue={this.changePrimaryColor.bind(this)} onUpdateValue={this.changePrimaryColor.bind(this)}
/> />
<NDivider titlePlacement="center"> <NDivider titlePlacement="center">
{t('headerSettingOptions.ContentTransition')} {$t('headerSettingOptions.ContentTransition')}
</NDivider> </NDivider>
<NSelect <NSelect
v-model:value={this.contentTransition} v-model:value={this.contentTransition}
@ -128,7 +125,7 @@ const SettingDrawer = defineComponent({
}} }}
/> />
<NDivider titlePlacement="center"> <NDivider titlePlacement="center">
{t('headerSettingOptions.InterfaceDisplay')} {$t('headerSettingOptions.InterfaceDisplay')}
</NDivider> </NDivider>
<NDescriptions labelPlacement="left" column={1}> <NDescriptions labelPlacement="left" column={1}>
<NDescriptionsItem label="多标签"> <NDescriptionsItem label="多标签">

11
src/layout/components/SiderBar/index.tsx
View File

@ -35,8 +35,10 @@ import {
createLeftIconOptions, createLeftIconOptions,
createRightIconOptions, createRightIconOptions,
} from './hook' } from './hook'
import { useDevice, useFullscreen } from '@/hooks/web/index' import { useDevice } from '@/hooks/web/index'
import { globalVariableToRefs, setVariable } from '@/hooks/variable/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' import type { IconEventMapOptions, IconEventMap } from './type'
@ -46,8 +48,9 @@ export default defineComponent({
const settingStore = useSetting() const settingStore = useSetting()
const { updateLocale, changeSwitcher } = settingStore const { updateLocale, changeSwitcher } = settingStore
const { t } = useI18n()
const [isFullscreen, { toggleFullscreen }] = useFullscreen( const [isFullscreen, { toggleFullscreen, isEnabled }] = useFullscreen(
document.getElementsByTagName('html')[0], document.getElementsByTagName('html')[0],
) )
const { drawerPlacement, breadcrumbSwitch, reloadRouteSwitch } = const { drawerPlacement, breadcrumbSwitch, reloadRouteSwitch } =
@ -96,6 +99,10 @@ export default defineComponent({
window.open('https://github.com/XiaoDaiGua-Ray/ray-template') window.open('https://github.com/XiaoDaiGua-Ray/ray-template')
}, },
fullscreen: () => { fullscreen: () => {
if (!isEnabled) {
window.$message.warning(t('globalMessage.isEnabledFullscreen'))
}
toggleFullscreen() toggleFullscreen()
}, },
search: () => { search: () => {

3
src/locales/lang/en-US/globalMessage.json Normal file
View File

@ -0,0 +1,3 @@
{
"isEnabledFullscreen": "The current environment does not support full screen"
}

3
src/locales/lang/zh-CN/globalMessage.json Normal file
View File

@ -0,0 +1,3 @@
{
"isEnabledFullscreen": "当前环境不支持全屏"
}

8
src/utils/basic.ts
View File

@ -49,7 +49,11 @@ export const downloadBase64File = (base64: string, fileName: string) => {
link.href = base64 link.href = base64
link.download = fileName link.download = fileName
link.style.display = 'none'
document.body.appendChild(link)
link.click() link.click()
document.body.removeChild(link)
} }
/** /**
@ -135,12 +139,10 @@ export const downloadAnyFile = (
link.style.display = 'none' link.style.display = 'none'
document.body.appendChild(link) document.body.appendChild(link)
link.click() link.click()
document.body.removeChild(link) document.body.removeChild(link)
URL.revokeObjectURL(url) URL.revokeObjectURL(url)
resolve() resolve()
}) })
} }

1
src/utils/vue/index.ts
View File

@ -1,2 +1,3 @@
export { call } from './call' export { call } from './call'
export { unrefElement } from './unrefElement' export { unrefElement } from './unrefElement'
export { renderNode } from './renderNode'

53
src/utils/vue/renderNode.ts Normal file
View File

@ -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
}
}

32
src/views/demo/echart/index.tsx
View File

@ -1,12 +1,9 @@
import './index.scss' 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 RChart from '@/components/RChart/index'
import dayjs from 'dayjs' import type { RayChartInst } from '@/components/RChart/type'
import type { ECharts } from 'echarts/core'
import type { RayChartInst } from '@/components/RChart/index'
const Echart = defineComponent({ const Echart = defineComponent({
name: 'REchart', name: 'REchart',
@ -85,9 +82,6 @@ const Echart = defineComponent({
], ],
} }
const baseLineOptions = ref({ const baseLineOptions = ref({
title: {
text: dayjs().valueOf(),
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -100,11 +94,6 @@ const Echart = defineComponent({
legend: { legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'], data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
}, },
toolbox: {
feature: {
saveAsImage: {},
},
},
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
@ -189,16 +178,6 @@ const Echart = defineComponent({
chartAria.value = bool chartAria.value = bool
} }
const handleChartRenderSuccess = (chart: ECharts) => {
window.$notification.info({
title: '可视化图渲染成功回调函数',
content: '可视化图渲染成功, 并且返回了当前可视化图实例',
duration: 5 * 1000,
})
console.log(baseChartRef.value, chart)
}
const mountChart = () => { const mountChart = () => {
baseChartRef.value?.render() baseChartRef.value?.render()
} }
@ -208,8 +187,6 @@ const Echart = defineComponent({
} }
const handleUpdateTitle = () => { const handleUpdateTitle = () => {
baseLineOptions.value.title.text = dayjs().valueOf()
const createData = () => Math.floor((Math.random() + 1) * 100) const createData = () => Math.floor((Math.random() + 1) * 100)
baseLineOptions.value.series[0].data = new Array(7) baseLineOptions.value.series[0].data = new Array(7)
@ -227,7 +204,6 @@ const Echart = defineComponent({
handleLoadingShow, handleLoadingShow,
chartAria, chartAria,
handleAriaShow, handleAriaShow,
handleChartRenderSuccess,
basePieOptions, basePieOptions,
baseLineOptions, baseLineOptions,
...toRefs(state), ...toRefs(state),
@ -262,7 +238,7 @@ const Echart = defineComponent({
</li> </li>
</ul> </ul>
</NCard> </NCard>
<NH2>强制渲染过渡动画（animation）</NH2> <NH2>强制渲染过渡动画（animation），预设 card 风格图表</NH2>
<NSpace style={['padding: 18px 0']}> <NSpace style={['padding: 18px 0']}>
<NButton onClick={this.mountChart.bind(this)}>渲染</NButton> <NButton onClick={this.mountChart.bind(this)}>渲染</NButton>
<NButton onClick={this.unmountChart.bind(this)}>卸载</NButton> <NButton onClick={this.unmountChart.bind(this)}>卸载</NButton>
@ -272,10 +248,12 @@ const Echart = defineComponent({
</NSpace> </NSpace>
<div class="chart--container"> <div class="chart--container">
<RChart <RChart
title="周销售量"
ref="baseChartRef" ref="baseChartRef"
autoChangeTheme autoChangeTheme
options={this.baseLineOptions} options={this.baseLineOptions}
showAria={this.chartAria} showAria={this.chartAria}
preset="card"
/> />
</div> </div>
<NH2>不跟随主题切换的暗色主题可视化图，并且手动指定原始主题色</NH2> <NH2>不跟随主题切换的暗色主题可视化图，并且手动指定原始主题色</NH2>

25
src/views/login/components/Signin/index.tsx
View File

@ -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 { setStorage } from '@/utils/cache'
import { useSignin } from '@/store' import { useSignin } from '@/store'
import { useI18n } from '@/hooks/web/index' import { useI18n } from '@/hooks/web/index'
import { APP_CATCH_KEY, ROOT_ROUTE } from '@/app-config/appConfig' import { APP_CATCH_KEY, ROOT_ROUTE } from '@/app-config/appConfig'
import { useVueRouter } from '@/hooks/web/index' 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' import type { FormInst } from 'naive-ui'
const Signin = defineComponent({ export default defineComponent({
name: 'RSignin', name: 'RSignin',
setup() { setup() {
const loginFormRef = ref<FormInst>() const loginFormRef = ref<FormInst>()
@ -19,6 +19,7 @@ const Signin = defineComponent({
const { signin } = signinStore const { signin } = signinStore
const { path } = ROOT_ROUTE const { path } = ROOT_ROUTE
const globalSpinning = globalVariableToRefs('globalSpinning')
const useSigninForm = () => ({ const useSigninForm = () => ({
name: 'Ray Admin', name: 'Ray Admin',
@ -74,37 +75,37 @@ const Signin = defineComponent({
loginFormRef, loginFormRef,
handleLogin, handleLogin,
rules, rules,
t, globalSpinning,
} }
}, },
render() { render() {
const { t } = this const { $t, globalSpinning } = this
return ( return (
<NForm model={this.signinForm} ref="loginFormRef" rules={this.rules}> <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 <NInput
v-model:value={this.signinForm.name} v-model:value={this.signinForm.name}
placeholder={t('views.login.index.NamePlaceholder')} placeholder={$t('views.login.index.NamePlaceholder')}
/> />
</NFormItem> </NFormItem>
<NFormItem label={t('views.login.index.Password')} path="pwd"> <NFormItem label={$t('views.login.index.Password')} path="pwd">
<NInput <NInput
v-model:value={this.signinForm.pwd} v-model:value={this.signinForm.pwd}
type="password" type="password"
placeholder={t('views.login.index.PasswordPlaceholder')} showPasswordOn="click"
placeholder={$t('views.login.index.PasswordPlaceholder')}
/> />
</NFormItem> </NFormItem>
<NButton <NButton
style={['width: 100%', 'margin-to: 18px']} style={['width: 100%', 'margin-to: 18px']}
type="primary" type="primary"
onClick={this.handleLogin.bind(this)} onClick={this.handleLogin.bind(this)}
loading={globalSpinning}
> >
{t('views.login.index.Login')} {$t('views.login.index.Login')}
</NButton> </NButton>
</NForm> </NForm>
) )
}, },
}) })
export default Signin

11
src/views/login/index.tsx
View File

@ -21,13 +21,11 @@ import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/c
import { useSetting } from '@/store' import { useSetting } from '@/store'
import { LOCAL_OPTIONS } from '@/app-config/localConfig' import { LOCAL_OPTIONS } from '@/app-config/localConfig'
import { useI18n } from '@/hooks/web/index'
import { useWindowSize } from '@vueuse/core' import { useWindowSize } from '@vueuse/core'
const Login = defineComponent({ const Login = defineComponent({
name: 'RLogin', name: 'RLogin',
setup() { setup() {
const { t } = useI18n()
const { const {
layout: { copyright }, layout: { copyright },
} = __APP_CFG__ } = __APP_CFG__
@ -44,13 +42,12 @@ const Login = defineComponent({
...toRefs(state), ...toRefs(state),
windowHeight, windowHeight,
updateLocale, updateLocale,
t,
copyright, copyright,
windowWidth, windowWidth,
} }
}, },
render() { render() {
const { t } = this const { $t } = this
return ( return (
<div <div
@ -125,19 +122,19 @@ const Login = defineComponent({
default: () => ( default: () => (
<> <>
<NTabPane <NTabPane
tab={t('views.login.index.Signin')} tab={$t('views.login.index.Signin')}
name="signin" name="signin"
> >
<Signin /> <Signin />
</NTabPane> </NTabPane>
<NTabPane <NTabPane
tab={t('views.login.index.Register')} tab={$t('views.login.index.Register')}
name="register" name="register"
> >
<Register /> <Register />
</NTabPane> </NTabPane>
<NTabPane <NTabPane
tab={t('views.login.index.QRCodeSignin')} tab={$t('views.login.index.QRCodeSignin')}
name="qrcodeSignin" name="qrcodeSignin"
> >
<QRCodeSignin /> <QRCodeSignin />

1
unplugin/.eslintrc-auto-import.json
View File

@ -70,7 +70,6 @@
"useCssModule": true, "useCssModule": true,
"useCssVars": true, "useCssVars": true,
"useDialog": true, "useDialog": true,
"useI18n": true,
"useLink": true, "useLink": true,
"useLoadingBar": true, "useLoadingBar": true,
"useMessage": true, "useMessage": true,

1
unplugin/auto-imports.d.ts vendored
View File

@ -66,7 +66,6 @@ declare global {
const useCssModule: typeof import('vue')['useCssModule'] const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: typeof import('vue')['useCssVars'] const useCssVars: typeof import('vue')['useCssVars']
const useDialog: typeof import('naive-ui')['useDialog'] const useDialog: typeof import('naive-ui')['useDialog']
const useI18n: typeof import('vue-i18n')['useI18n']
const useLink: typeof import('vue-router')['useLink'] const useLink: typeof import('vue-router')['useLink']
const useLoadingBar: typeof import('naive-ui')['useLoadingBar'] const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
const useMessage: typeof import('naive-ui')['useMessage'] const useMessage: typeof import('naive-ui')['useMessage']

6
vite.pliugin.config.ts
View File

@ -63,7 +63,6 @@ export default function (mode: string): PluginOption[] {
'vue', 'vue',
'vue-router', 'vue-router',
'pinia', 'pinia',
'vue-i18n',
{ {
'naive-ui': [ 'naive-ui': [
'useDialog', 'useDialog',
@ -110,11 +109,6 @@ export default function (mode: string): PluginOption[] {
libDirectory: '', libDirectory: '',
camel2DashComponentName: false, camel2DashComponentName: false,
}, },
{
libName: 'lodash',
libDirectory: '',
camel2DashComponentName: false,
},
], ],
}), }),
{ {