user.vue 8.8 KB

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