修改作业等级名称

马宇豪

2025-03-04 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c

 src/layout/navBars/breadcrumb/user.vue

@@ -1,321 +1,581 @@
<template>
    <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
        <div class="logo">
            <img src="src/assets/menu/companyLogo.jpg">
            <span> | </span>
        </div>
        <div style="display: flex;padding-right: 5px">
        <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
            <div class="layout-navbars-breadcrumb-user-icon">
                <i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item>
                    <el-dropdown-item command="default" :disabled="disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>
                    <el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
<!--        <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">-->
<!--            <div class="layout-navbars-breadcrumb-user-icon">-->
<!--                <i class="iconfont" :class="disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('message.user.title1')"></i>-->
<!--            </div>-->
<!--            <template #dropdown>-->
<!--                <el-dropdown-menu>-->
<!--                    <el-dropdown-item command="zh-cn" :disabled="disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>-->
<!--                    <el-dropdown-item command="en" :disabled="disabledI18n === 'en'">English</el-dropdown-item>-->
<!--                    <el-dropdown-item command="zh-tw" :disabled="disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--            </template>-->
<!--        </el-dropdown>-->
<!--        <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">-->
<!--            <el-icon :title="$t('message.user.title2')">-->
<!--                <ele-Search />-->
<!--            </el-icon>-->
<!--        </div>-->
        <!--        <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">-->
        <!--            <i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>-->
        <!--        </div>-->
        <!--        <div class="layout-navbars-breadcrumb-user-icon">-->
        <!--            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">-->
        <!--                <template #reference>-->
        <!--                    <el-badge :is-dot="true">-->
        <!--                        <el-icon :title="$t('message.user.title4')">-->
        <!--                            <ele-Bell />-->
        <!--                        </el-icon>-->
        <!--                    </el-badge>-->
        <!--                </template>-->
        <!--                <template #default>-->
        <!--                    <UserNews />-->
        <!--                </template>-->
        <!--            </el-popover>-->
        <!--        </div>-->
        <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
            <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
        </div>
        <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
            <span class="layout-navbars-breadcrumb-user-link">
                <img :src="userInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
                {{ userInfos.userName }}
                <el-icon class="el-icon--right">
                    <ele-ArrowDown />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="/homeMenu">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
                    <!--                    <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>-->
<!--                    <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>-->
                    <!--               <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>-->
                    <!--               <el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>-->
                    <el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <Search ref="searchRef" />
        </div>
  <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
    <div class="logo">
      <!--            <img src="../../../assets/menu/companyLogo.png" />-->
      <h2>智能安全数字化平台</h2>
      <span>{{ systemName }}</span>
    </div>
    <div style="display: flex; align-items: center; padding-right: 5px">
      <div @click="backToMenu()" class="backBtn">返回首页</div>
      <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
        <div class="layout-navbars-breadcrumb-user-icon">
          <i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{
                $t('message.user.dropdownLarge')
              }}
            </el-dropdown-item>
            <el-dropdown-item command="default" :disabled="disabledSize === 'default'">
              {{ $t('message.user.dropdownDefault') }}
            </el-dropdown-item>
            <el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{
                $t('message.user.dropdownSmall')
              }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!--        <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">-->
      <!--            <div class="layout-navbars-breadcrumb-user-icon">-->
      <!--                <i class="iconfont" :class="disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('message.user.title1')"></i>-->
      <!--            </div>-->
      <!--            <template #dropdown>-->
      <!--                <el-dropdown-menu>-->
      <!--                    <el-dropdown-item command="zh-cn" :disabled="disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>-->
      <!--                    <el-dropdown-item command="en" :disabled="disabledI18n === 'en'">English</el-dropdown-item>-->
      <!--                    <el-dropdown-item command="zh-tw" :disabled="disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>-->
      <!--                </el-dropdown-menu>-->
      <!--            </template>-->
      <!--        </el-dropdown>-->
      <!--        <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">-->
      <!--            <el-icon :title="$t('message.user.title2')">-->
      <!--                <ele-Search />-->
      <!--            </el-icon>-->
      <!--        </div>-->
      <!--        <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">-->
      <!--            <i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>-->
      <!--        </div>-->
      <!--        <div class="layout-navbars-breadcrumb-user-icon">-->
      <!--            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">-->
      <!--                <template #reference>-->
      <!--                    <el-badge :is-dot="true">-->
      <!--                        <el-icon :title="$t('message.user.title4')">-->
      <!--                            <ele-Bell />-->
      <!--                        </el-icon>-->
      <!--                    </el-badge>-->
      <!--                </template>-->
      <!--                <template #default>-->
      <!--                    <UserNews />-->
      <!--                </template>-->
      <!--            </el-popover>-->
      <!--        </div>-->
      <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
        <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')"
           :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
      </div>
      <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
                <span class="layout-navbars-breadcrumb-user-link">
                    <img src="../../../assets/avator.png" class="layout-navbars-breadcrumb-user-link-photo mr5"
                         style="width: 24px;height: 24px"/>
                    {{ userInfos.userName }}
                    <el-icon class="el-icon--right">
                        <ele-ArrowDown/>
                    </el-icon>
                </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="/newMenu">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
            <el-dropdown-item @click="showPwdDialog = true">修改密码</el-dropdown-item>
            <!--                    <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>-->
            <!--                    <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>-->
            <!--               <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>-->
            <!--               <el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>-->
            <el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dialog title="修改密码" v-model="showPwdDialog" width="500px">
        <el-form :model="pwdForm" size="default" ref="pwdRef" :rules="pwdFormRules" label-width="110px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model.trim="pwdForm.newPassword" placeholder="请输入" type="password" show-password>
              </el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="rePassword">
              <el-input v-model.trim="pwdForm.rePassword" placeholder="请输入" type="password" show-password>
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showPwdDialog = !showPwdDialog" size="default">取 消</el-button>
                    <el-button type="primary" v-throttle @click="onPwdSubmit" size="default">确 定</el-button>
                </span>
        </template>
      </el-dialog>
      <Search ref="searchRef"/>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, getCurrentInstance, computed, reactive, toRefs, onMounted, defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import {ref, getCurrentInstance, computed, reactive, toRefs, onMounted, defineComponent} from 'vue';
import {useRouter} from 'vue-router';
import {ElMessageBox, ElMessage} from 'element-plus';
import screenfull from 'screenfull';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
import { useThemeConfig } from '/@/stores/themeConfig';
import {useI18n} from 'vue-i18n';
import {storeToRefs} from 'pinia';
import {useUserInfo} from '/@/stores/userInfo';
import {useThemeConfig} from '/@/stores/themeConfig';
import other from '/@/utils/other';
import { Session, Local } from '/@/utils/storage';
import {Session, Local} from '/@/utils/storage';
import UserNews from '/@/layout/navBars/breadcrumb/userNews.vue';
import Search from '/@/layout/navBars/breadcrumb/search.vue';
import { useLoginApi } from '/@/api/login';
import {useLoginApi} from '/@/api/login';
import {useMenuApi} from '/@/api/systemManage/menu/index';

const menuApi = useMenuApi();
import {
  backEndComponent,
  getBackEndControlRoutes,
  initBackEndControlRoutes,
  setAddRoute,
  setFilterMenuAndCacheTagsViewRoutes
} from '../../../router/backEnd';
import {NextLoading} from '/@/utils/loading';
import {useRequestOldRoutes} from '/@/stores/requestOldRoutes';
import {dynamicRoutes} from '/@/router/route';
import Cookies from 'js-cookie';
import {useRoutesList} from "/@/stores/routesList";
import {verifyPwd} from "/@/utils/toolsValidate";
import {userApi} from "/@/api/systemManage/user";

export default defineComponent({
    name: 'layoutBreadcrumbUser',
    components: { UserNews, Search },
    setup() {
        const { t } = useI18n();
        const { proxy } = <any>getCurrentInstance();
        const router = useRouter();
        const stores = useUserInfo();
        const storesThemeConfig = useThemeConfig();
        const { userInfos } = storeToRefs(stores);
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const searchRef = ref();
        const state = reactive({
            isScreenfull: false,
            disabledI18n: 'zh-cn',
            disabledSize: 'large'
        });
        // 设置分割样式
        const layoutUserFlexNum = computed(() => {
            let num: string | number = '';
            const { layout, isClassicSplitMenu } = themeConfig.value;
            const layoutArr: string[] = ['defaults', 'columns'];
            if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
            else num = '';
            return num;
        });
        // 全屏点击时
        const onScreenfullClick = () => {
            if (!screenfull.isEnabled) {
                ElMessage.warning('暂不不支持全屏');
                return false;
            }
            screenfull.toggle();
            screenfull.on('change', () => {
                if (screenfull.isFullscreen) state.isScreenfull = true;
                else state.isScreenfull = false;
            });
        };
        // 布局配置 icon 点击时
        const onLayoutSetingClick = () => {
            proxy.mittBus.emit('openSetingsDrawer');
        };
        // 下拉菜单点击时
        const onHandleCommandClick = (path: string) => {
            if (path === 'logOut') {
                ElMessageBox({
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    title: t('message.user.logOutTitle'),
                    message: t('message.user.logOutMessage'),
                    showCancelButton: true,
                    confirmButtonText: t('message.user.logOutConfirm'),
                    cancelButtonText: t('message.user.logOutCancel'),
                    buttonSize: 'default',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = t('message.user.logOutExit');
                            setTimeout(() => {
                                done();
                                setTimeout(() => {
                                    instance.confirmButtonLoading = false;
                                }, 300);
                            }, 700);
                        } else {
                            done();
                        }
                    }
                })
                    .then(async () => {
                        let res = await useLoginApi().signOut();
                        if (res.data.code === '200') {
                            Session.clear(); // 清除缓存/token等
                            // 使用 reload 时，不需要调用 resetRoute() 重置路由
                            window.location.reload();
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    })
                    .catch(() => {});
            } else if (path === 'wareHouse') {
                window.open('https://gitee.com/lyt-top/vue-next-admin');
            } else {
                router.push(path);
            }
        };
        // 菜单搜索点击
        const onSearchClick = () => {
            searchRef.value.openSearch();
        };
        // 组件大小改变
        const onComponentSizeChange = (size: string) => {
            Local.remove('themeConfig');
            themeConfig.value.globalComponentSize = size;
            Local.set('themeConfig', themeConfig.value);
            initComponentSize();
            window.location.reload();
        };
        // 语言切换
        const onLanguageChange = (lang: string) => {
            Local.remove('themeConfig');
            themeConfig.value.globalI18n = lang;
            Local.set('themeConfig', themeConfig.value);
            proxy.$i18n.locale = lang;
            initI18n();
            other.useTitle();
        };
        // 设置 element plus 组件的国际化
        const setI18nConfig = (locale: string) => {
            proxy.mittBus.emit('getI18nConfig', proxy.$i18n.messages[locale]);
        };
        // 初始化言语国际化
        const initI18n = () => {
            switch (Local.get('themeConfig').globalI18n) {
                case 'zh-cn':
                    state.disabledI18n = 'zh-cn';
                    setI18nConfig('zh-cn');
                    break;
                case 'en':
                    state.disabledI18n = 'en';
                    setI18nConfig('en');
                    break;
                case 'zh-tw':
                    state.disabledI18n = 'zh-tw';
                    setI18nConfig('zh-tw');
                    break;
            }
        };
        // 初始化全局组件大小
        const initComponentSize = () => {
            switch (Local.get('themeConfig').globalComponentSize) {
                case 'large':
                    state.disabledSize = 'large';
                    break;
                case 'default':
                    state.disabledSize = 'default';
                    break;
                case 'small':
                    state.disabledSize = 'small';
                    break;
            }
        };
        // 页面加载时
        onMounted(() => {
            if (Local.get('themeConfig')) {
                initI18n();
                initComponentSize();
            }
        });
        return {
            userInfos,
            onLayoutSetingClick,
            onHandleCommandClick,
            onScreenfullClick,
            onSearchClick,
            onComponentSizeChange,
            onLanguageChange,
            searchRef,
            layoutUserFlexNum,
            ...toRefs(state)
        };
  name: 'layoutBreadcrumbUser',
  components: {UserNews, Search},
  setup() {
    const {t} = useI18n();
    const {proxy} = <any>getCurrentInstance();
    const router = useRouter();
    const stores = useUserInfo();
    const routeList = storeToRefs(useRoutesList())
    const storesThemeConfig = useThemeConfig();
    const {userInfos} = storeToRefs(stores);
    const {themeConfig} = storeToRefs(storesThemeConfig);
    const searchRef = ref();
    const pwdRef = ref();
    const validatePwd = (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (!verifyPwd(value)) {
          callback(new Error('密码须包含字母、数字、特殊字符，长度在6-16之间'))
        } else {
          callback()
        }
      }
    }
    const equalToPassword = (rule: any, value: any, callback: any) => {
      if (value == '') {
        callback(new Error("请再次确认密码"))
      } else if (state.pwdForm.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"))
      } else {
        callback();
      }
    };
    const state = reactive({
      isScreenfull: false,
      disabledI18n: 'zh-cn',
      disabledSize: 'large',
      systemName: '',
      showPwdDialog: false,
      pwdForm: {
        uid: Cookies.get('uid'),
        newPassword: '',
        rePassword: ''
      },
      pwdFormRules: {
        newPassword: [{required: true, validator: validatePwd, trigger: 'blur'}],
        rePassword: [{required: true, validator: equalToPassword, trigger: "blur"}]
      }
    });
    // 设置分割样式
    const layoutUserFlexNum = computed(() => {
      let num: string | number = '';
      const {layout, isClassicSplitMenu} = themeConfig.value;
      const layoutArr: string[] = ['defaults', 'columns'];
      if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
      else num = '';
      return num;
    });

    const onPwdSubmit = async () => {
      pwdRef.value.validate(async (valid: Boolean) => {
        if (valid) {
          const {rePassword, ...data} = state.pwdForm
          let res = await userApi().pwdModSelf(data);
          if (res.data.code === '200') {
            state.showPwdDialog = false
            ElMessage({
              type: 'success',
              message: '密码修改成功，请重新登录',
              duration: 2000
            })
            setTimeout(() => {
              useLoginApi()
                  .signOut()
                  .then(() => {
                    Session.clear()
                    window.location.href = '/'
                  })
            }, 2000)
          } else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            });
          }
        } else {
          ElMessage({
            type: 'warning',
            message: '请完善信息'
          })
        }
      })
    }

    // 全屏点击时
    const onScreenfullClick = () => {
      if (!screenfull.isEnabled) {
        ElMessage.warning('暂不不支持全屏');
        return false;
      }
      screenfull.toggle();
      screenfull.on('change', () => {
        if (screenfull.isFullscreen) state.isScreenfull = true;
        else state.isScreenfull = false;
      });
    };
    // 布局配置 icon 点击时
    const onLayoutSetingClick = () => {
      proxy.mittBus.emit('openSetingsDrawer');
    };
    // 下拉菜单点击时
    const onHandleCommandClick = (path: string) => {
      if (path === 'logOut') {
        ElMessageBox({
          closeOnClickModal: false,
          closeOnPressEscape: false,
          title: t('message.user.logOutTitle'),
          message: t('message.user.logOutMessage'),
          showCancelButton: true,
          confirmButtonText: t('message.user.logOutConfirm'),
          cancelButtonText: t('message.user.logOutCancel'),
          buttonSize: 'default',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = t('message.user.logOutExit');
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 700);
            } else {
              done();
            }
          }
        })
            .then(async () => {
              let res = await useLoginApi().signOut();
              if (res.data.code === '200') {
                Session.clear(); // 清除缓存/token等
                // 使用 reload 时，不需要调用 resetRoute() 重置路由
                window.location.reload();
              } else {
                ElMessage({
                  type: 'warning',
                  message: res.data.msg
                });
              }
            })
            .catch(() => {
            });
      } else if (path === 'wareHouse') {
        window.open('https://gitee.com/lyt-top/vue-next-admin');
      } else {
        router.push(path);
      }
    };
    // 菜单搜索点击
    const onSearchClick = () => {
      searchRef.value.openSearch();
    };
    // 组件大小改变
    const onComponentSizeChange = (size: string) => {
      Local.remove('themeConfig');
      themeConfig.value.globalComponentSize = size;
      Local.set('themeConfig', themeConfig.value);
      initComponentSize();
      window.location.reload();
    };
    // 语言切换
    const onLanguageChange = (lang: string) => {
      Local.remove('themeConfig');
      themeConfig.value.globalI18n = lang;
      Local.set('themeConfig', themeConfig.value);
      proxy.$i18n.locale = lang;
      initI18n();
      other.useTitle();
    };
    // 设置 element plus 组件的国际化
    const setI18nConfig = (locale: string) => {
      proxy.mittBus.emit('getI18nConfig', proxy.$i18n.messages[locale]);
    };
    // 初始化言语国际化
    const initI18n = () => {
      switch (Local.get('themeConfig').globalI18n) {
        case 'zh-cn':
          state.disabledI18n = 'zh-cn';
          setI18nConfig('zh-cn');
          break;
        case 'en':
          state.disabledI18n = 'en';
          setI18nConfig('en');
          break;
        case 'zh-tw':
          state.disabledI18n = 'zh-tw';
          setI18nConfig('zh-tw');
          break;
      }
    };
    // 初始化全局组件大小
    const initComponentSize = () => {
      switch (Local.get('themeConfig').globalComponentSize) {
        case 'large':
          state.disabledSize = 'large';
          break;
        case 'default':
          state.disabledSize = 'default';
          break;
        case 'small':
          state.disabledSize = 'small';
          break;
      }
    };

    const getSysName = async () => {
      if (window.nextLoading === undefined) NextLoading.start();
      if (!Cookies.get('token')) return false;
      const res = await menuApi.getMenuAdmin(Cookies.get('projectId') === null ? '' : Cookies.get('projectId'));
      if (res.data.code === '200') {
        if (res.data.data && res.data.data[0]) {
          state.systemName = res.data.data[0].project.projectName;
        } else {
          state.systemName = ''
        }
      } else {
        console.log('有问题');
      }
    };
    const backToMenu = () => {
      router.push({path: 'newMenu'}).then(() => {
        routeList.routesList.value = []
      });
    };
    // const toHome = () => {
    //     router.push({ path: 'newMenu' });
    // };
    // 页面加载时
    onMounted(() => {
      if (Local.get('themeConfig')) {
        initI18n();
        initComponentSize();
      }
      getSysName();
    });
    return {
      userInfos,
      pwdRef,
      onPwdSubmit,
      backToMenu,
      onLayoutSetingClick,
      onHandleCommandClick,
      onScreenfullClick,
      onSearchClick,
      onComponentSizeChange,
      onLanguageChange,
      searchRef,
      layoutUserFlexNum,
      ...toRefs(state)
    };
  }
});
</script>

<style scoped lang="scss">
.layout-navbars-breadcrumb-user {
@media screen and (min-width: 1400px) {
  .logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      height: 100%;
    }

    .logo{
        height: 50px;
        padding: 5px 10px;
        display: flex;
        align-items: center;
        overflow: hidden;
        box-sizing: border-box;
        img{
            height: 100%;
        }
    h2 {
      width: 220px;
      font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
      font-weight: bolder;
      text-align: center;
      color: #409eff;
    }
    &-link {
        height: 100%;
        display: flex;
        align-items: center;
        white-space: nowrap;
        &-photo {
            width: 25px;
            height: 25px;
            border-radius: 100%;
        }

    span {
      font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
      color: #333;
      font-weight: bolder;
      border-left: 2px solid #409eff;
      padding-left: 15px
    }
    &-icon {
        padding: 0 10px;
        cursor: pointer;
        color: var(--next-bg-topBarColor);
        height: 50px;
        line-height: 50px;
        display: flex;
        align-items: center;
        &:hover {
            background: var(--next-color-user-hover);
            i {
                display: inline-block;
                animation: logoAnimation 0.3s ease-in-out;
            }
        }
  }
  .backBtn {
    font-size: 16px;
    cursor: pointer;
    margin-right: 20px;

    &:hover {
      color: #409eff;
      font-weight: bolder;
    }
    ::v-deep(.el-dropdown) {
        color: var(--next-bg-topBarColor);
  }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .logo {
    display: flex;
    align-items: center;
    img {
      height: 100%;
    }
    ::v-deep(.el-badge) {
        height: 40px;
        line-height: 40px;
        display: flex;
        align-items: center;

    h2 {
      width: 220px;
      font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
      font-weight: bolder;
      text-align: center;
      color: #409eff;
    }
    ::v-deep(.el-badge__content.is-fixed) {
        top: 12px;

    span {
      font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
      color: #333;
      font-weight: bolder;
      border-left: 2px solid #409eff;
      padding-left: 15px
    }
  }
  .backBtn {
    font-size: 14px;
    cursor: pointer;
    margin-right: 20px;

    &:hover {
      color: #409eff;
      font-weight: bolder;
    }
  }
}

@media screen and (max-width: 1024px) {
  .logo {
    display: flex;
    align-items: center;
    img {
      height: 100%;
    }

    h2 {
      width: 220px;
      font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
      font-weight: bolder;
      text-align: center;
      color: #409eff;
    }

    span {
      font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
      color: #333;
      font-weight: bolder;
      border-left: 2px solid #409eff;
      padding-left: 15px
    }
  }
  .backBtn {
    font-size: 12px;
    cursor: pointer;
    margin-right: 20px;

    &:hover {
      color: #409eff;
      font-weight: bolder;
    }
  }
}

.layout-navbars-breadcrumb-user {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .logo {
    height: 75%;
    padding: 5px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
  }

  &-link {
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;

    &-photo {
      width: 25px;
      height: 25px;
      border-radius: 100%;
    }
  }

  &-icon {
    padding: 0 10px;
    cursor: pointer;
    color: var(--next-bg-topBarColor);
    height: 80px;
    line-height: 80px;
    display: flex;
    align-items: center;

    &:hover {
      background: var(--next-color-user-hover);

      i {
        display: inline-block;
        animation: logoAnimation 0.3s ease-in-out;
      }
    }
  }

  ::v-deep(.el-dropdown) {
    color: var(--next-bg-topBarColor);
  }

  ::v-deep(.el-badge) {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
  }

  ::v-deep(.el-badge__content.is-fixed) {
    top: 12px;
  }
}
</style>