diff --git a/package.json b/package.json
index a931e814..1327e381 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "ray-template",
"private": true,
- "version": "3.0.6",
+ "version": "3.0.7",
"type": "module",
"scripts": {
"dev": "vite",
diff --git a/src/App.tsx b/src/App.tsx
index d1f1d685..430b256c 100644
--- a/src/App.tsx
+++ b/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 (
-
+
+ {{
+ default: () => ,
+ description: () => 'lodaing...',
+ }}
+
)
},
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index b44d2c57..25250b4c 100644
--- a/src/layout/index.tsx
+++ b/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 (
diff --git a/src/spin/hook.ts b/src/spin/hook.ts
new file mode 100644
index 00000000..517bfe2d
--- /dev/null
+++ b/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)
diff --git a/src/spin/index.tsx b/src/spin/index.tsx
new file mode 100644
index 00000000..8e3a0b64
--- /dev/null
+++ b/src/spin/index.tsx
@@ -0,0 +1,67 @@
+/**
+ *
+ * @author 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 (
+
+ {{
+ default: () => this.$slots.default?.(),
+ description: () => this.$slots.description?.(),
+ }}
+
+ )
+ },
+})
+
+export default GlobalSpin
+
+/**
+ *
+ * 全屏加载效果
+ *
+ * 基于 Naive UI Spin 组件
+ *
+ * 使用方法
+ * 1. import { useSpin } from '@/spin'
+ * 2. useSpin(true) | useSpin(false)
+ *
+ * 仅需按照上述步骤实现全屏加载动画
+ *
+ * 注意
+ * 1. 该组件为全屏加载动画效果, 其遮罩会导致页面元素不可被命中
+ * 2. 如果需要使用该组件请注意控制取消时机
+ */
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index 6054824c..0d682b68 100644
--- a/src/store/modules/setting.ts
+++ b/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 {
diff --git a/src/types/component.d.ts b/src/types/component.d.ts
new file mode 100644
index 00000000..ecf5e65b
--- /dev/null
+++ b/src/types/component.d.ts
@@ -0,0 +1,5 @@
+export {}
+
+declare global {
+ declare type ComponentSize = 'small' | 'medium' | 'large'
+}
diff --git a/src/views/login/components/Signin/index.tsx b/src/views/login/components/Signin/index.tsx
index ae85d256..6a8b8d99 100644
--- a/src/views/login/components/Signin/index.tsx
+++ b/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()
- 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')}
diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx
index 311e5df3..597be825 100644
--- a/src/views/login/index.tsx
+++ b/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,
diff --git a/src/views/table/index.tsx b/src/views/table/index.tsx
index 3a601cf3..89d4bbff 100644
--- a/src/views/table/index.tsx
+++ b/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({
(this.tableLoading = value),
+ },
+ {},
+ )}
data={this.tableData}
columns={this.baseColumns}
action={false}
pagination={{
pageSize: 10,
}}
+ loading={this.tableLoading}
>
{{
tableFooter: () => '表格的底部内容区域，有时候你可能会用上',
diff --git a/vite.config.ts b/vite.config.ts
index 0c2f9d2a..9f3853c3 100644
--- a/vite.config.ts
+++ b/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(),