v3.0.7，新增全屏加载动画，修复一些小问题

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": true,
-  "version": "3.0.6",
+  "version": "3.0.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.tsx

@@ -1,12 +1,18 @@
 import RayGlobalProvider from '@/components/RayGlobalProvider/index'
 import { RouterView } from 'vue-router'
+import GlobalSpin from '@/spin/index'
 
 const App = defineComponent({
   name: 'App',
   render() {
     return (
       <RayGlobalProvider>
-        <RouterView />
+        <GlobalSpin>
+          {{
+            default: () => <RouterView />,
+            description: () => 'lodaing...',
+          }}
+        </GlobalSpin>
       </RayGlobalProvider>
     )
   },

src/layout/index.tsx

@@ -11,14 +11,18 @@ import { useSetting } from '@/store'
 const Layout = defineComponent({
   name: 'Layout',
   setup() {
-    const menuStore = useSetting()
+    const settingStore = useSetting()
+
     const { height: windowHeight } = useWindowSize()
-    const modelReloadRoute = computed(() => menuStore.reloadRouteSwitch)
-    const modelMenuTagSwitch = computed(() => menuStore.menuTagSwitch)
+    const {
+      themeValue,
+      reloadRouteSwitch: modelReloadRoute,
+      menuTagSwitch: modelMenuTagSwitch,
+    } = storeToRefs(settingStore)
     const cssVarsRef = computed(() => {
       let cssVar = {}
 
-      if (menuStore.menuTagSwitch) {
+      if (settingStore.menuTagSwitch) {
         cssVar = {
           '--layout-content-height': 'calc(100% - 110px)',
         }
@@ -40,12 +44,13 @@ const Layout = defineComponent({
       modelMenuTagSwitch,
       cssVarsRef,
       copyright,
+      themeValue,
     }
   },
   render() {
     return (
       <div
-        class="layout"
+        class={['layout', this.themeValue ? 'layout--dark' : '']}
         style={[`height: ${this.windowHeight}px`, this.cssVarsRef]}
       >
         <NLayout class="layout-full" hasSider>

src/spin/hook.ts

@@ -0,0 +1,9 @@
+export const spinValue = ref(false)
+
+/**
+ *
+ * @param bool has spin
+ *
+ * @remark 使用 spin 全屏加载效果工具函数
+ */
+export const useSpin = (bool: boolean) => (spinValue.value = bool)

src/spin/index.tsx

@@ -0,0 +1,67 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-01-18
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { NSpin } from 'naive-ui'
+
+import { spinProps } from 'naive-ui'
+import { spinValue } from './hook'
+
+export { useSpin } from './hook'
+
+const GlobalSpin = defineComponent({
+  name: 'GlobalSpin',
+  props: {
+    ...spinProps,
+  },
+  setup() {
+    const overrides = {
+      opacitySpinning: '0',
+    }
+
+    return {
+      spinValue,
+      overrides,
+    }
+  },
+  render() {
+    return (
+      <NSpin
+        {...this.$props}
+        show={this.spinValue}
+        themeOverrides={this.overrides}
+      >
+        {{
+          default: () => this.$slots.default?.(),
+          description: () => this.$slots.description?.(),
+        }}
+      </NSpin>
+    )
+  },
+})
+
+export default GlobalSpin
+
+/**
+ *
+ * 全屏加载效果
+ *
+ * 基于 Naive UI Spin 组件
+ *
+ * 使用方法
+ *   1. import { useSpin } from '@/spin'
+ *   2. useSpin(true) | useSpin(false)
+ *
+ * 仅需按照上述步骤实现全屏加载动画
+ *
+ * 注意
+ *   1. 该组件为全屏加载动画效果, 其遮罩会导致页面元素不可被命中
+ *   2. 如果需要使用该组件请注意控制取消时机
+ */

src/store/modules/setting.ts

@@ -14,6 +14,7 @@ export const useSetting = defineStore(
       reloadRouteSwitch: true, // 刷新路由开关
       menuTagSwitch: true, // 多标签页开关
       naiveLocal: getDefaultNaiveLocal(), // `naive ui` 语言包
+      spinSwitch: false, // 全屏加载
     })
     const { locale } = useI18n()
 
@@ -33,9 +34,15 @@ export const useSetting = defineStore(
      * @param key `settingState` 对应开关属性值
      *
      * @remark 仅适用于值为 `boolean` 的切换
+     * @remark 不知道如何写: 返回属性中所有指定类型值... 如果有知道的一定要私信告知一下
      */
     const changeSwitcher = (bool: boolean, key: keyof typeof settingState) => {
-      ;(settingState[key] as unknown) = bool
+      if (
+        Object.hasOwn(settingState, key) &&
+        typeof settingState[key] === 'boolean'
+      ) {
+        ;(settingState[key] as unknown) = bool
+      }
     }
 
     return {

src/types/component.d.ts

@@ -0,0 +1,5 @@
+export {}
+
+declare global {
+  declare type ComponentSize = 'small' | 'medium' | 'large'
+}

src/views/login/components/Signin/index.tsx

@@ -1,5 +1,6 @@
 import { NForm, NFormItem, NInput, NButton } from 'naive-ui'
 import { setCache } from '@/utils/cache'
+import { useSpin } from '@/spin'
 
 import type { FormInst } from 'naive-ui'
 
@@ -16,7 +17,6 @@ const Signin = defineComponent({
     const router = useRouter()
     const signinForm = ref(useSigninForm())
     const loginFormRef = ref<FormInst>()
-    const loading = ref(false)
 
     const rules = {
       name: {
@@ -33,13 +33,15 @@ const Signin = defineComponent({
     const handleLogin = () => {
       loginFormRef.value?.validate((valid) => {
         if (!valid) {
-          window.$message.info('登陆中...')
-
-          loading.value = true
+          useSpin(true)
 
           setTimeout(() => {
             router.push('/dashboard')
 
+            useSpin(false)
+
+            window.$message.success(`欢迎${signinForm.value.name}登陆~`)
+
             setCache('token', 'tokenValue')
             setCache('person', signinForm.value)
           }, 2 * 1000)
@@ -54,7 +56,6 @@ const Signin = defineComponent({
       loginFormRef,
       handleLogin,
       rules,
-      loading,
       t,
     }
   },
@@ -78,7 +79,6 @@ const Signin = defineComponent({
           style={['width: 100%', 'margin-to: 18px']}
           type="primary"
           onClick={this.handleLogin.bind(this)}
-          loading={this.loading}
         >
           {this.t('LoginModule.Login')}
         </NButton>

src/views/login/index.tsx

@@ -25,6 +25,7 @@ const Login = defineComponent({
     const { height: windowHeight } = useWindowSize()
     const settingStore = useSetting()
     const { updateLocale } = settingStore
+
     return {
       ...toRefs(state),
       windowHeight,

src/views/table/index.tsx

@@ -20,6 +20,7 @@ import {
   NDatePicker,
   NInputNumber,
   NSpace,
+  NSwitch,
 } from 'naive-ui'
 import RayTable from '@/components/RayTable/index'
 import RayCollapseGrid from '@/components/RayCollapseGrid/index'
@@ -122,8 +123,11 @@ const TableView = defineComponent({
         key: 'delete',
       },
     ]
-    const gridItemCount = ref(4)
-    const gridCollapsedRows = ref(1)
+    const state = reactive({
+      gridItemCount: 4,
+      gridCollapsedRows: 1,
+      tableLoading: false,
+    })
 
     const handleMenuSelect = (key: string | number, idx: number) => {
       if (key === 'delete') {
@@ -132,13 +136,12 @@ const TableView = defineComponent({
     }
 
     return {
+      ...toRefs(state),
       tableData,
       actionColumns,
       baseColumns,
       tableMenuOptions,
       handleMenuSelect,
-      gridItemCount,
-      gridCollapsedRows,
     }
   },
   render() {
@@ -218,13 +221,20 @@ const TableView = defineComponent({
         </NCard>
         <NCard title="基础使用" style={['margin-top: 18px']}>
           <RayTable
-            title="基础使用"
+            title={h(
+              NSwitch,
+              {
+                onUpdateValue: (value: boolean) => (this.tableLoading = value),
+              },
+              {},
+            )}
             data={this.tableData}
             columns={this.baseColumns}
             action={false}
             pagination={{
               pageSize: 10,
             }}
+            loading={this.tableLoading}
           >
             {{
               tableFooter: () => '表格的底部内容区域，有时候你可能会用上',

vite.config.ts

@@ -8,7 +8,7 @@ import {
   useSVGIcon,
 } from './vite-plugin/index'
 
-import vueJsx from '@vitejs/plugin-vue-jsx'
+import ViteVueJSX from '@vitejs/plugin-vue-jsx'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import ViteInspect from 'vite-plugin-inspect'
 import viteSvgLoader from 'vite-svg-loader'
@@ -54,7 +54,7 @@ export default defineConfig(async ({ mode }) => {
     },
     plugins: [
       vue({ reactivityTransform: true }),
-      vueJsx(),
+      ViteVueJSX(),
       title,
       ViteInspect(), // 仅适用于开发模式(检查 `Vite` 插件的中间状态)
       VueI18nPlugin(),