mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-06 03:57:49 +08:00
细节优化,部分类型补全
This commit is contained in:
parent
73428bbe6d
commit
0aab9340a0
@ -23,10 +23,11 @@ import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自
|
||||
import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器
|
||||
|
||||
import { useSetting } from '@/store'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { cloneDeep, debounce } from 'lodash-es'
|
||||
import { on, off, addStyle } from '@/utils/element'
|
||||
|
||||
import type { PropType } from 'vue'
|
||||
// import type { DebouncedFuncLeading } from 'lodash-es'
|
||||
|
||||
export type AutoResize =
|
||||
| boolean
|
||||
@ -195,6 +196,7 @@ const RayChart = defineComponent({
|
||||
const rayChartRef = ref<HTMLElement>() // `echart` 容器实例
|
||||
const echartInstanceRef = ref<EChartsInstance>() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
|
||||
let echartInstance: EChartsInstance // `echart` 实例
|
||||
let resizeDebounce: AnyFunc // resize 防抖方法示例
|
||||
|
||||
const cssVarsRef = computed(() => {
|
||||
const cssVars = {
|
||||
@ -349,6 +351,7 @@ const RayChart = defineComponent({
|
||||
const resizeChart = () => {
|
||||
if (echartInstance) {
|
||||
echartInstance.resize()
|
||||
console.log('resize')
|
||||
}
|
||||
}
|
||||
|
||||
@ -406,14 +409,16 @@ const RayChart = defineComponent({
|
||||
}
|
||||
|
||||
if (props.autoResize) {
|
||||
on(window, 'resize', resizeChart)
|
||||
resizeDebounce = debounce(resizeChart, 500)
|
||||
|
||||
on(window, 'resize', resizeDebounce)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
destroyChart()
|
||||
off(window, 'resize', resizeChart)
|
||||
off(window, 'resize', resizeDebounce)
|
||||
})
|
||||
|
||||
return {
|
||||
|
@ -8,8 +8,10 @@ import {
|
||||
darkTheme,
|
||||
NGlobalStyle,
|
||||
} from 'naive-ui'
|
||||
|
||||
import { useSetting } from '@/store'
|
||||
import { naiveLocales } from '@/language/index'
|
||||
|
||||
const GlobalProvider = defineComponent({
|
||||
name: 'GlobalProvider',
|
||||
setup() {
|
||||
|
@ -1,4 +1,3 @@
|
||||
import RayTable from './src/index'
|
||||
|
||||
export * as Table from './src/type'
|
||||
export default RayTable
|
||||
|
34
src/lock/index.tsx
Normal file
34
src/lock/index.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
/**
|
||||
*
|
||||
* @author Ray <https://github.com/XiaoDaiGua-Ray>
|
||||
*
|
||||
* @date 2023-03-14
|
||||
*
|
||||
* @workspace ray-template
|
||||
*
|
||||
* @remark 今天也是元气满满撸代码的一天
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* TODO:
|
||||
* - 全屏锁屏功能
|
||||
* - 输入密码解锁
|
||||
* - 可以重定向至登陆页
|
||||
* - 显示当前时间(YYYY-MM-DD HH:mm)
|
||||
*/
|
||||
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
const LockScreen = defineComponent({
|
||||
name: 'LockScreen',
|
||||
// props: {},
|
||||
setup() {
|
||||
return {}
|
||||
},
|
||||
render() {
|
||||
return <div class="lock-screen"></div>
|
||||
},
|
||||
})
|
||||
|
||||
export default LockScreen
|
@ -1,10 +1,24 @@
|
||||
import { getDefaultLocal } from '@/language/index'
|
||||
import { setCache } from '@use-utils/cache'
|
||||
|
||||
import type { ConditionalPick } from '@/types/type-utils'
|
||||
import type { ConfigProviderProps, GlobalThemeOverrides } from 'naive-ui'
|
||||
|
||||
interface SettingState {
|
||||
drawerPlacement: NaiveDrawerPlacement
|
||||
primaryColorOverride: GlobalThemeOverrides
|
||||
themeValue: boolean
|
||||
reloadRouteSwitch: boolean
|
||||
menuTagSwitch: boolean
|
||||
spinSwitch: boolean
|
||||
breadcrumbSwitch: boolean
|
||||
localeLanguage: string
|
||||
}
|
||||
|
||||
export const useSetting = defineStore(
|
||||
'setting',
|
||||
() => {
|
||||
const settingState = reactive({
|
||||
const settingState = reactive<SettingState>({
|
||||
drawerPlacement: 'right' as NaiveDrawerPlacement,
|
||||
primaryColorOverride: {
|
||||
common: {
|
||||
@ -29,7 +43,7 @@ export const useSetting = defineStore(
|
||||
}
|
||||
|
||||
const changePrimaryColor = (value: string) => {
|
||||
settingState.primaryColorOverride.common.primaryColor = value
|
||||
settingState.primaryColorOverride.common!.primaryColor = value
|
||||
}
|
||||
|
||||
/**
|
||||
@ -40,12 +54,15 @@ export const useSetting = defineStore(
|
||||
* @remark 仅适用于值为 `boolean` 的切换
|
||||
* @remark 不知道如何写: 返回属性中所有指定类型值... 如果有知道的一定要私信告知一下
|
||||
*/
|
||||
const changeSwitcher = (bool: boolean, key: keyof typeof settingState) => {
|
||||
const changeSwitcher = (
|
||||
bool: boolean,
|
||||
key: keyof ConditionalPick<SettingState, boolean>,
|
||||
) => {
|
||||
if (
|
||||
Object.hasOwn(settingState, key) &&
|
||||
typeof settingState[key] === 'boolean'
|
||||
) {
|
||||
;(settingState[key] as unknown) = bool
|
||||
settingState[key] = bool
|
||||
}
|
||||
}
|
||||
|
||||
|
18
src/types/type-utils.ts
Normal file
18
src/types/type-utils.ts
Normal file
@ -0,0 +1,18 @@
|
||||
export type ConditionalKeys<Base, Condition> = NonNullable<
|
||||
// Wrap in `NonNullable` to strip away the `undefined` type from the produced union.
|
||||
{
|
||||
// Map through all the keys of the given base type.
|
||||
[Key in keyof Base]: Base[Key] extends Condition // Pick only keys with types extending the given `Condition` type.
|
||||
? // Retain this key since the condition passes.
|
||||
Key
|
||||
: // Discard this key since the condition fails.
|
||||
never
|
||||
|
||||
// Convert the produced object into a union type of the keys which passed the conditional test.
|
||||
}[keyof Base]
|
||||
>
|
||||
|
||||
export type ConditionalPick<Base, Condition> = Pick<
|
||||
Base,
|
||||
ConditionalKeys<Base, Condition>
|
||||
>
|
Loading…
x
Reference in New Issue
Block a user