diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx
index 77ffab1a..a9a14186 100644
--- a/src/components/RayChart/index.tsx
+++ b/src/components/RayChart/index.tsx
@@ -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 {
diff --git a/src/components/RayGlobalProvider/index.tsx b/src/components/RayGlobalProvider/index.tsx
index eeadaada..a11585c3 100644
--- a/src/components/RayGlobalProvider/index.tsx
+++ b/src/components/RayGlobalProvider/index.tsx
@@ -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() {
diff --git a/src/components/RayTable/index.ts b/src/components/RayTable/index.ts
index 9235f502..a06fc901 100644
--- a/src/components/RayTable/index.ts
+++ b/src/components/RayTable/index.ts
@@ -1,4 +1,3 @@
 import RayTable from './src/index'
 
-export * as Table from './src/type'
 export default RayTable
diff --git a/src/lock/index.tsx b/src/lock/index.tsx
new file mode 100644
index 00000000..331beda6
--- /dev/null
+++ b/src/lock/index.tsx
@@ -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
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index a6585df8..5058cb7e 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -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
       }
     }
 
diff --git a/src/types/type-utils.ts b/src/types/type-utils.ts
new file mode 100644
index 00000000..59111b0f
--- /dev/null
+++ b/src/types/type-utils.ts
@@ -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>
+>