mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-25 19:22:31 +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 { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器
|
||||||
|
|
||||||
import { useSetting } from '@/store'
|
import { useSetting } from '@/store'
|
||||||
import { cloneDeep } from 'lodash-es'
|
import { cloneDeep, debounce } from 'lodash-es'
|
||||||
import { on, off, addStyle } from '@/utils/element'
|
import { on, off, addStyle } from '@/utils/element'
|
||||||
|
|
||||||
import type { PropType } from 'vue'
|
import type { PropType } from 'vue'
|
||||||
|
// import type { DebouncedFuncLeading } from 'lodash-es'
|
||||||
|
|
||||||
export type AutoResize =
|
export type AutoResize =
|
||||||
| boolean
|
| boolean
|
||||||
@ -195,6 +196,7 @@ const RayChart = defineComponent({
|
|||||||
const rayChartRef = ref<HTMLElement>() // `echart` 容器实例
|
const rayChartRef = ref<HTMLElement>() // `echart` 容器实例
|
||||||
const echartInstanceRef = ref<EChartsInstance>() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
|
const echartInstanceRef = ref<EChartsInstance>() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
|
||||||
let echartInstance: EChartsInstance // `echart` 实例
|
let echartInstance: EChartsInstance // `echart` 实例
|
||||||
|
let resizeDebounce: AnyFunc // resize 防抖方法示例
|
||||||
|
|
||||||
const cssVarsRef = computed(() => {
|
const cssVarsRef = computed(() => {
|
||||||
const cssVars = {
|
const cssVars = {
|
||||||
@ -349,6 +351,7 @@ const RayChart = defineComponent({
|
|||||||
const resizeChart = () => {
|
const resizeChart = () => {
|
||||||
if (echartInstance) {
|
if (echartInstance) {
|
||||||
echartInstance.resize()
|
echartInstance.resize()
|
||||||
|
console.log('resize')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -406,14 +409,16 @@ const RayChart = defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (props.autoResize) {
|
if (props.autoResize) {
|
||||||
on(window, 'resize', resizeChart)
|
resizeDebounce = debounce(resizeChart, 500)
|
||||||
|
|
||||||
|
on(window, 'resize', resizeDebounce)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
destroyChart()
|
destroyChart()
|
||||||
off(window, 'resize', resizeChart)
|
off(window, 'resize', resizeDebounce)
|
||||||
})
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
@ -8,8 +8,10 @@ import {
|
|||||||
darkTheme,
|
darkTheme,
|
||||||
NGlobalStyle,
|
NGlobalStyle,
|
||||||
} from 'naive-ui'
|
} from 'naive-ui'
|
||||||
|
|
||||||
import { useSetting } from '@/store'
|
import { useSetting } from '@/store'
|
||||||
import { naiveLocales } from '@/language/index'
|
import { naiveLocales } from '@/language/index'
|
||||||
|
|
||||||
const GlobalProvider = defineComponent({
|
const GlobalProvider = defineComponent({
|
||||||
name: 'GlobalProvider',
|
name: 'GlobalProvider',
|
||||||
setup() {
|
setup() {
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import RayTable from './src/index'
|
import RayTable from './src/index'
|
||||||
|
|
||||||
export * as Table from './src/type'
|
|
||||||
export default RayTable
|
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 { getDefaultLocal } from '@/language/index'
|
||||||
import { setCache } from '@use-utils/cache'
|
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(
|
export const useSetting = defineStore(
|
||||||
'setting',
|
'setting',
|
||||||
() => {
|
() => {
|
||||||
const settingState = reactive({
|
const settingState = reactive<SettingState>({
|
||||||
drawerPlacement: 'right' as NaiveDrawerPlacement,
|
drawerPlacement: 'right' as NaiveDrawerPlacement,
|
||||||
primaryColorOverride: {
|
primaryColorOverride: {
|
||||||
common: {
|
common: {
|
||||||
@ -29,7 +43,7 @@ export const useSetting = defineStore(
|
|||||||
}
|
}
|
||||||
|
|
||||||
const changePrimaryColor = (value: string) => {
|
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 仅适用于值为 `boolean` 的切换
|
||||||
* @remark 不知道如何写: 返回属性中所有指定类型值... 如果有知道的一定要私信告知一下
|
* @remark 不知道如何写: 返回属性中所有指定类型值... 如果有知道的一定要私信告知一下
|
||||||
*/
|
*/
|
||||||
const changeSwitcher = (bool: boolean, key: keyof typeof settingState) => {
|
const changeSwitcher = (
|
||||||
|
bool: boolean,
|
||||||
|
key: keyof ConditionalPick<SettingState, boolean>,
|
||||||
|
) => {
|
||||||
if (
|
if (
|
||||||
Object.hasOwn(settingState, key) &&
|
Object.hasOwn(settingState, key) &&
|
||||||
typeof settingState[key] === 'boolean'
|
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