feat(core): 新增核心工具模块并优化通知功能
- 新增 cores.tsx 文件,实现核心工具模块 - 添加任务列表和事件总线功能 - 实现系统通知和任务处理逻辑 - 在 App.vue 中集成新功能 - 优化通知显示逻辑,支持不同内容类型的通知
This commit is contained in:
@@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts" name="app">
|
<script setup lang="ts" name="app">
|
||||||
import { defineAsyncComponent, computed, ref, onBeforeMount, onMounted, onUnmounted, nextTick, watch, onBeforeUnmount } from 'vue';
|
import { defineAsyncComponent, computed, ref, onBeforeMount, onMounted, onUnmounted, nextTick, watch, onBeforeUnmount } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||||
@@ -26,7 +26,8 @@ const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index
|
|||||||
const Setings = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/setings.vue'));
|
const Setings = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/setings.vue'));
|
||||||
const CloseFull = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/closeFull.vue'));
|
const CloseFull = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/closeFull.vue'));
|
||||||
const Upgrade = defineAsyncComponent(() => import('/@/layout/upgrade/index.vue'));
|
const Upgrade = defineAsyncComponent(() => import('/@/layout/upgrade/index.vue'));
|
||||||
|
import { ElMessageBox, ElNotification, NotificationHandle } from 'element-plus';
|
||||||
|
import { useCore } from '/@/utils/cores';
|
||||||
// 定义变量内容
|
// 定义变量内容
|
||||||
const { messages, locale } = useI18n();
|
const { messages, locale } = useI18n();
|
||||||
const setingsRef = ref();
|
const setingsRef = ref();
|
||||||
@@ -35,7 +36,8 @@ const stores = useTagsViewRoutes();
|
|||||||
const storesThemeConfig = useThemeConfig();
|
const storesThemeConfig = useThemeConfig();
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
import websocket from '/@/utils/websocket';
|
import websocket from '/@/utils/websocket';
|
||||||
import { ElNotification } from 'element-plus';
|
const core = useCore();
|
||||||
|
const router = useRouter();
|
||||||
// 获取版本号
|
// 获取版本号
|
||||||
const getVersion = computed(() => {
|
const getVersion = computed(() => {
|
||||||
let isVersion = false;
|
let isVersion = false;
|
||||||
@@ -67,7 +69,15 @@ onMounted(() => {
|
|||||||
mittBus.on('openSetingsDrawer', () => {
|
mittBus.on('openSetingsDrawer', () => {
|
||||||
setingsRef.value.openDrawer();
|
setingsRef.value.openDrawer();
|
||||||
});
|
});
|
||||||
|
// 设置皮肤缓存版本,每次更新版本可以所有用户清空缓存
|
||||||
|
const themeConfigVersion = '1.0.0'
|
||||||
// 获取缓存中的布局配置
|
// 获取缓存中的布局配置
|
||||||
|
if (Local.get('themeConfigVersion') !== themeConfigVersion) {
|
||||||
|
Local.clear();
|
||||||
|
Local.set('themeConfigVersion', themeConfigVersion);
|
||||||
|
window.location.reload();
|
||||||
|
return
|
||||||
|
}
|
||||||
if (Local.get('themeConfig')) {
|
if (Local.get('themeConfig')) {
|
||||||
storesThemeConfig.setThemeConfig({ themeConfig: Local.get('themeConfig') });
|
storesThemeConfig.setThemeConfig({ themeConfig: Local.get('themeConfig') });
|
||||||
document.documentElement.style.cssText = Local.get('themeConfigStyle');
|
document.documentElement.style.cssText = Local.get('themeConfigStyle');
|
||||||
@@ -117,7 +127,25 @@ const wsReceive = (message: any) => {
|
|||||||
position: 'bottom-right',
|
position: 'bottom-right',
|
||||||
duration: 5000,
|
duration: 5000,
|
||||||
});
|
});
|
||||||
|
} else if (data.contentType === 'Content') {
|
||||||
|
ElMessageBox.confirm(data.content, data.notificationTitle, {
|
||||||
|
confirmButtonText: data.notificationButton,
|
||||||
|
dangerouslyUseHTMLString: true,
|
||||||
|
cancelButtonText: '关闭',
|
||||||
|
type: 'info',
|
||||||
|
closeOnClickModal: false,
|
||||||
|
}).then(() => {
|
||||||
|
ElMessageBox.close();
|
||||||
|
const path = data.path;
|
||||||
|
if (route.path === path) {
|
||||||
|
core.bus.emit('onNewTask', { name: 'onNewTask' });
|
||||||
|
} else {
|
||||||
|
router.push({ path});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
// 关闭连接
|
// 关闭连接
|
||||||
|
|||||||
57
web/src/utils/cores.tsx
Normal file
57
web/src/utils/cores.tsx
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import mitt, { Emitter } from 'mitt';
|
||||||
|
|
||||||
|
export interface TaskProps {
|
||||||
|
name: string;
|
||||||
|
custom?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义自定义事件类型
|
||||||
|
export type BusEvents = {
|
||||||
|
onNewTask: TaskProps | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface Task {
|
||||||
|
id: number;
|
||||||
|
handle: string;
|
||||||
|
data: any;
|
||||||
|
createTime: Date;
|
||||||
|
custom?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Core {
|
||||||
|
bus: Emitter<BusEvents>;
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
showNotification(body: string, title?: string): Notification | undefined;
|
||||||
|
taskList: Map<String, Task>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const bus = mitt<BusEvents>();
|
||||||
|
export function getSystemNotification(body: string, title?: string) {
|
||||||
|
if (!title) {
|
||||||
|
title = '通知';
|
||||||
|
}
|
||||||
|
return new Notification(title ?? '通知', {
|
||||||
|
body: body,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export function showSystemNotification(body: string, title?: string): Notification | undefined {
|
||||||
|
if (Notification.permission === 'granted') {
|
||||||
|
return getSystemNotification(body, title);
|
||||||
|
} else if (Notification.permission !== 'denied') {
|
||||||
|
Notification.requestPermission().then((permission) => {
|
||||||
|
if (permission === 'granted') {
|
||||||
|
return getSystemNotification(body, title);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return void 0;
|
||||||
|
}
|
||||||
|
const taskList = new Map<String, Task>();
|
||||||
|
|
||||||
|
export function useCore(): Core {
|
||||||
|
return {
|
||||||
|
bus,
|
||||||
|
showNotification: showSystemNotification,
|
||||||
|
taskList,
|
||||||
|
};
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user