user.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. <template>
  2. <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
  3. <!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
  4. <div class="layout-navbars-breadcrumb-user-icon">
  5. <i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
  6. </div>
  7. <template #dropdown>
  8. <el-dropdown-menu>
  9. <el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item>
  10. <el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>
  11. <el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
  12. </el-dropdown-menu>
  13. </template>
  14. </el-dropdown>
  15. <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
  16. <div class="layout-navbars-breadcrumb-user-icon">
  17. <i
  18. class="iconfont"
  19. :class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'"
  20. :title="$t('message.user.title1')"
  21. ></i>
  22. </div>
  23. <template #dropdown>
  24. <el-dropdown-menu>
  25. <el-dropdown-item command="zh-cn" :disabled="state.disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>
  26. <el-dropdown-item command="en" :disabled="state.disabledI18n === 'en'">English</el-dropdown-item>
  27. <el-dropdown-item command="zh-tw" :disabled="state.disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>
  28. </el-dropdown-menu>
  29. </template>
  30. </el-dropdown>
  31. <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
  32. <el-icon :title="$t('message.user.title2')">
  33. <ele-Search />
  34. </el-icon>
  35. </div>
  36. <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
  37. <i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
  38. </div>
  39. <div class="layout-navbars-breadcrumb-user-icon">
  40. <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
  41. <template #reference>
  42. <el-badge :value="messageCenter.unread" :hidden="messageCenter.unread === 0">
  43. <el-icon :title="$t('message.user.title4')">
  44. <ele-Bell />
  45. </el-icon>
  46. </el-badge>
  47. </template>
  48. <template #default>
  49. <UserNews />
  50. </template>
  51. </el-popover>
  52. </div>-->
  53. <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
  54. <i
  55. class="iconfont"
  56. :title="state.isScreenfull ? $t('message.user.title6') : $t('message.user.title5')"
  57. :class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
  58. ></i>
  59. </div>
  60. <div>
  61. <span v-if="!isSocketOpen">
  62. <el-popconfirm
  63. width="250"
  64. ref="onlinePopoverRef"
  65. :confirm-button-text="$t('message.user.retry')"
  66. :icon="InfoFilled"
  67. trigger="hover"
  68. icon-color="#626AEF"
  69. :title="$t('message.user.onlinePrompt')"
  70. @confirm="onlineConfirmEvent"
  71. >
  72. <template #reference>
  73. <el-badge is-dot class="item" :class="{'online-status': isSocketOpen,'online-down':!isSocketOpen}">
  74. <img :src="userInfos.avatar || headerImage" class="layout-navbars-breadcrumb-user-link-photo mr5" />
  75. </el-badge>
  76. </template>
  77. </el-popconfirm>
  78. </span>
  79. </div>
  80. <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
  81. <span class="layout-navbars-breadcrumb-user-link">
  82. <span v-if="isSocketOpen">
  83. <el-badge is-dot class="item" :class="{'online-status': isSocketOpen,'online-down':!isSocketOpen}">
  84. <img :src="userInfos.avatar || headerImage" class="layout-navbars-breadcrumb-user-link-photo mr5" />
  85. </el-badge>
  86. </span>
  87. {{ userInfos.username === '' ? 'common' : userInfos.username }}
  88. <el-icon class="el-icon--right">
  89. <ele-ArrowDown />
  90. </el-icon>
  91. </span>
  92. <template #dropdown>
  93. <el-dropdown-menu>
  94. <el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
  95. <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
  96. <el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
  97. </el-dropdown-menu>
  98. </template>
  99. </el-dropdown>
  100. <Search ref="searchRef" />
  101. </div>
  102. </template>
  103. <script setup lang="ts" name="layoutBreadcrumbUser">
  104. import { defineAsyncComponent, ref, computed, reactive, onMounted, unref, watch } from 'vue';
  105. import { useRouter } from 'vue-router';
  106. import { ElMessageBox, ElMessage } from 'element-plus';
  107. import screenfull from 'screenfull';
  108. import { useI18n } from 'vue-i18n';
  109. import { storeToRefs } from 'pinia';
  110. import { useUserInfo } from '/@/stores/userInfo';
  111. import { useThemeConfig } from '/@/stores/themeConfig';
  112. import other from '/@/utils/other';
  113. import mittBus from '/@/utils/mitt';
  114. import { Session, Local } from '/@/utils/storage';
  115. import headerImage from '/@/assets/img/headerImage.png';
  116. import websocket from '/@/utils/websocket';
  117. import { InfoFilled } from '@element-plus/icons-vue'
  118. // 引入组件
  119. const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/userNews.vue'));
  120. const Search = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/search.vue'));
  121. // 定义变量内容
  122. const { locale, t } = useI18n();
  123. const router = useRouter();
  124. const stores = useUserInfo();
  125. const storesThemeConfig = useThemeConfig();
  126. const { userInfos } = storeToRefs(stores);
  127. const { themeConfig } = storeToRefs(storesThemeConfig);
  128. const searchRef = ref();
  129. const state = reactive({
  130. isScreenfull: false,
  131. disabledI18n: 'zh-cn',
  132. disabledSize: 'large',
  133. });
  134. // 设置分割样式
  135. const layoutUserFlexNum = computed(() => {
  136. let num: string | number = '';
  137. const { layout, isClassicSplitMenu } = themeConfig.value;
  138. const layoutArr: string[] = ['defaults', 'columns'];
  139. if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
  140. else num = '';
  141. return num;
  142. });
  143. // 定义变量内容
  144. const { isSocketOpen } = storeToRefs(useUserInfo());
  145. // websocket状态
  146. const onlinePopoverRef = ref()
  147. const onlineConfirmEvent = () => {
  148. if (!isSocketOpen.value) {
  149. websocket.is_reonnect = true
  150. websocket.reconnect_current = 1
  151. websocket.reconnect()
  152. }
  153. // 手动隐藏弹出
  154. unref(onlinePopoverRef).popperRef?.delayHide?.()
  155. }
  156. // 全屏点击时
  157. const onScreenfullClick = () => {
  158. if (!screenfull.isEnabled) {
  159. ElMessage.warning('暂不不支持全屏');
  160. return false;
  161. }
  162. screenfull.toggle();
  163. screenfull.on('change', () => {
  164. if (screenfull.isFullscreen) state.isScreenfull = true;
  165. else state.isScreenfull = false;
  166. });
  167. };
  168. // 布局配置 icon 点击时
  169. const onLayoutSetingClick = () => {
  170. mittBus.emit('openSetingsDrawer');
  171. };
  172. // 下拉菜单点击时
  173. const onHandleCommandClick = (path: string) => {
  174. if (path === 'logOut') {
  175. ElMessageBox({
  176. closeOnClickModal: false,
  177. closeOnPressEscape: false,
  178. title: t('message.user.logOutTitle'),
  179. message: t('message.user.logOutMessage'),
  180. showCancelButton: true,
  181. confirmButtonText: t('message.user.logOutConfirm'),
  182. cancelButtonText: t('message.user.logOutCancel'),
  183. buttonSize: 'default',
  184. beforeClose: (action, instance, done) => {
  185. if (action === 'confirm') {
  186. instance.confirmButtonLoading = true;
  187. instance.confirmButtonText = t('message.user.logOutExit');
  188. setTimeout(() => {
  189. done();
  190. setTimeout(() => {
  191. instance.confirmButtonLoading = false;
  192. }, 300);
  193. }, 700);
  194. } else {
  195. done();
  196. }
  197. },
  198. })
  199. .then(async () => {
  200. // 清除缓存/token等
  201. Session.clear();
  202. // 使用 reload 时,不需要调用 resetRoute() 重置路由
  203. window.location.reload();
  204. })
  205. .catch(() => {});
  206. } else {
  207. router.push(path);
  208. }
  209. };
  210. // 菜单搜索点击
  211. const onSearchClick = () => {
  212. searchRef.value.openSearch();
  213. };
  214. // 组件大小改变
  215. const onComponentSizeChange = (size: string) => {
  216. Local.remove('themeConfig');
  217. themeConfig.value.globalComponentSize = size;
  218. Local.set('themeConfig', themeConfig.value);
  219. initI18nOrSize('globalComponentSize', 'disabledSize');
  220. window.location.reload();
  221. };
  222. // 语言切换
  223. const onLanguageChange = (lang: string) => {
  224. Local.remove('themeConfig');
  225. themeConfig.value.globalI18n = lang;
  226. Local.set('themeConfig', themeConfig.value);
  227. locale.value = lang;
  228. other.useTitle();
  229. initI18nOrSize('globalI18n', 'disabledI18n');
  230. };
  231. // 初始化组件大小/i18n
  232. const initI18nOrSize = (value: string, attr: string) => {
  233. state[attr] = Local.get('themeConfig')[value];
  234. };
  235. // 页面加载时
  236. onMounted(() => {
  237. if (Local.get('themeConfig')) {
  238. initI18nOrSize('globalComponentSize', 'disabledSize');
  239. initI18nOrSize('globalI18n', 'disabledI18n');
  240. }
  241. });
  242. //消息中心的未读数量
  243. import { messageCenterStore } from '/@/stores/messageCenter';
  244. const messageCenter = messageCenterStore();
  245. </script>
  246. <style scoped lang="scss">
  247. .layout-navbars-breadcrumb-user {
  248. display: flex;
  249. align-items: center;
  250. justify-content: flex-end;
  251. &-link {
  252. height: 100%;
  253. display: flex;
  254. align-items: center;
  255. white-space: nowrap;
  256. &-photo {
  257. width: 25px;
  258. height: 25px;
  259. border-radius: 100%;
  260. }
  261. }
  262. &-icon {
  263. padding: 0 10px;
  264. cursor: pointer;
  265. color: var(--next-bg-topBarColor);
  266. height: 50px;
  267. line-height: 50px;
  268. display: flex;
  269. align-items: center;
  270. &:hover {
  271. background: var(--next-color-user-hover);
  272. i {
  273. display: inline-block;
  274. animation: logoAnimation 0.3s ease-in-out;
  275. }
  276. }
  277. }
  278. :deep(.el-dropdown) {
  279. color: var(--next-bg-topBarColor);
  280. }
  281. :deep(.el-badge) {
  282. height: 40px;
  283. line-height: 40px;
  284. display: flex;
  285. align-items: center;
  286. }
  287. :deep(.el-badge__content.is-fixed) {
  288. top: 12px;
  289. }
  290. .online-status{
  291. cursor: pointer;
  292. :deep(.el-badge__content.is-fixed) {
  293. top: 30px;
  294. font-size: 14px;
  295. left: 5px;
  296. height: 12px;
  297. width: 12px;
  298. padding: 0;
  299. background-color: #18bc9c;
  300. }
  301. }
  302. .online-down{
  303. cursor: pointer;
  304. :deep(.el-badge__content.is-fixed) {
  305. top: 30px;
  306. font-size: 14px;
  307. left: 5px;
  308. height: 12px;
  309. width: 12px;
  310. padding: 0;
  311. background-color: #979b9c;
  312. }
  313. }
  314. }
  315. </style>