feat(websocket): 实现 WebSocket 消息推送功能

- 配置 ASGI 支持 WebSocket 连接
- 新增 WebSocket 路由和消费者类 MegCenter
- 实现消息序列化和推送逻辑
- 前端集成 WebSocket 连接状态管理和重连机制
- 添加用户在线状态提示和未读消息提醒- 更新角色权限配置显示条件
- 扩展用户信息存储结构支持 WebSocket 状态字段

web/src/App.vue

@@ -20,6 +20,7 @@ import other from '/@/utils/other';
 import { Local, Session } from '/@/utils/storage';
 import mittBus from '/@/utils/mitt';
 import setIntroduction from '/@/utils/setIconfont';
+import websocket from '/@/utils/websocket';
 
 // 引入组件
 const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'));
@@ -91,5 +92,63 @@ onMounted(() => {
 onUnmounted(() => {
 	mittBus.off('openSetingsDrawer', () => {});
 });
+// 监听路由的变化，设置网站标题
+watch(
+    () => route.path,
+    () => {
+      other.useTitle();
+      other.useFavicon();
+      if (!websocket.websocket) {
+        //websockt 模块
+        try {
+          websocket.init(wsReceive)
+        } catch (e) {
+          console.log('websocket错误');
+        }
+      }
+    },
+    {
+      deep: true,
+    }
+);
 
+// websocket相关代码
+import { messageCenterStore } from '/@/stores/messageCenter';
+const wsReceive = (message: any) => {
+  const data = JSON.parse(message.data);
+  const { unread } = data;
+  const messageCenter = messageCenterStore();
+  messageCenter.setUnread(unread);
+  if (data.contentType === 'SYSTEM') {
+    ElNotification({
+      title: '系统消息',
+      message: data.content,
+      type: 'success',
+      position: 'bottom-right',
+      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(() => {
+  // 关闭连接
+  websocket.close();
+});
 </script>

web/src/layout/navBars/breadcrumb/user.vue

@@ -57,6 +57,26 @@
 				:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
 			></i>
 		</div>
+    <div>
+      <span v-if="!isSocketOpen" class="online-status-span">
+        <el-popconfirm
+            width="250"
+            ref="onlinePopoverRef"
+            :confirm-button-text="$t('message.user.retry')"
+            :icon="InfoFilled"
+            trigger="hover"
+            icon-color="#626AEF"
+            :title="$t('message.user.onlinePrompt')"
+            @confirm="onlineConfirmEvent"
+        >
+          <template #reference>
+            <el-badge is-dot class="item" :class="{'online-status': isSocketOpen,'online-down':!isSocketOpen}">
+              <img :src="getBaseURL(userInfos.avatar) || headerImage" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+            </el-badge>
+          </template>
+        </el-popconfirm>
+      </span>
+    </div>
 		<div></div>
 		<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
 			<span class="layout-navbars-breadcrumb-user-link">
@@ -95,6 +115,7 @@ import mittBus from '/@/utils/mitt';
 import { Session, Local } from '/@/utils/storage';
 import headerImage from '/@/assets/img/headerImage.png';
 import { InfoFilled } from '@element-plus/icons-vue';
+import websocket from '/@/utils/websocket';
 // 引入组件
 const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/userNews.vue'));
 const Search = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/search.vue'));
@@ -123,6 +144,21 @@ const layoutUserFlexNum = computed(() => {
 	return num;
 });
 
+// 定义变量内容
+const { isSocketOpen } = storeToRefs(useUserInfo());
+
+// websocket状态
+const onlinePopoverRef = ref()
+const onlineConfirmEvent = () => {
+  if (!isSocketOpen.value) {
+    websocket.is_reonnect = true
+    websocket.reconnect_current = 1
+    websocket.reconnect()
+  }
+  // 手动隐藏弹出
+  unref(onlinePopoverRef).popperRef?.delayHide?.()
+}
+
 // 全屏点击时
 const onScreenfullClick = () => {
 	if (!screenfull.isEnabled) {

web/src/stores/interface/index.ts

@@ -23,6 +23,7 @@ export interface UserInfosState {
 }
 export interface UserInfosStates {
 	userInfos: UserInfosState;
+	isSocketOpen: boolean
 }
 
 // 路由缓存列表

web/src/stores/userInfo.ts

@@ -32,6 +32,7 @@ export const useUserInfo = defineStore('userInfo', {
 				},
 			],
 		},
+		isSocketOpen: false
 	}),
 	actions: {
 		async setPwdChangeCount(count: number) {
@@ -71,6 +72,9 @@ export const useUserInfo = defineStore('userInfo', {
 				Session.set('userInfo', this.userInfos);
 			}
 		},
+		async setWebSocketState(socketState: boolean) {
+			this.isSocketOpen = socketState;
+		},
 		async getApiUserInfo() {
 			return request({
 				url: '/api/system/user/user_info/',

web/src/views/system/role/crud.tsx

@@ -79,7 +79,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 					permission: {
 						type: 'primary',
 						text: '权限配置',
-						show: auth('role:Permission'),
+						show: auth('role:SetMenu'),
 						click: (clickContext: any): void => {
 							const { row } = clickContext;
 							context.RoleDrawer.handleDrawerOpen(row);