@utogether/udp-core 1.0.1-beta.15 → 1.0.1-beta.17

package/src/layout/components/lay-navbar/index.vue

@@ -1,239 +1,239 @@
-<!--
- * @Author: wei.li
- * @Date: 2021-11-17 16:02:30
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-08-29 08:57:37
- * @Description: file content
--->
-<template>
-  <div class="system-navbar bg-white shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]">
-    <Hamburger
-      v-if="layout !== 'mix'"
-      :is-active="appHook.sidebar.opened"
-      class="hamburger-container"
-      @toggleClick="toggleSideBar"
-    />
-
-    <Breadcrumb v-if="layout !== 'mix'" class="breadcrumb-container" />
-
-    <mixNav v-if="layout === 'mix'" />
-
-    <div v-if="layout === 'vertical'" class="vertical-header-right">
-      <!-- 业务单元选择 -->
-      <OrgSelect v-if="sysConfig['orgTaggle'] === 'Y'" />
-      <!-- 菜单搜索 -->
-      <Search />
-      <!-- 通知 -->
-      <!-- <Notice id="header-notice" /> -->
-      <!-- 国际化 -->
-      <el-dropdown id="header-translation" trigge·r="click">
-        <globalization class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden" />
-        <template #dropdown>
-          <el-dropdown-menu class="translation">
-            <el-dropdown-item
-              :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
-              @click="translationCh"
-            >
-              <IconifyIconOffline v-show="locale === 'zh'" class="check-zh" icon="ri:check-line" />
-              简体中文
-            </el-dropdown-item>
-            <el-dropdown-item
-              :style="getDropdownItemStyle(locale, 'en')"
-              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
-              @click="translationEn"
-            >
-              <span v-show="locale === 'en'" class="check-en">
-                <IconifyIconOffline icon="ri:check-line" />
-              </span>
-              English
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <!-- 退出登陆 -->
-      <el-dropdown trigger="click">
-        <span class="select-none el-dropdown-link navbar-bg-hover">
-          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p class="dark:text-white user-name">
-            {{ userInfo?.name }}
-          </p>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu class="user-dropdown">
-            <el-dropdown-item @click="handleResetPwd">
-              <IconifyIconOffline icon="ri:edit-2-fill" />
-              {{ $t('message.udp.passwordReset') }}</el-dropdown-item
-            >
-            <el-divider style="margin: 3px 0 !important" />
-            <el-dropdown-item @click="logout">
-              <IconifyIconOffline icon="switch-button" />
-              {{ $t('message.udp.logout') }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <span class="el-icon-setting navbar-bg-hover" @click="onPanel">
-        <IconifyIconOffline icon="ri:settings-5-fill" />
-      </span>
-    </div>
-    <ut-modal-form
-      v-if="showModal"
-      :record="record"
-      :items="passwordItems()"
-      :width="360"
-      :height="240"
-      data-status="update"
-      :title="$t('message.udp.passwordReset')"
-      url="/uums/user/updatePwd"
-      method="put"
-      @close="showModal = false"
-    />
-  </div>
-</template>
-<script lang="ts">
-export default { name: 'NavBar' };
-</script>
-<script setup lang="ts">
-import { ref } from 'vue';
-import { storageLocal } from '@utogether/utils';
-import Hamburger from '../lay-sidebar/hamBurger.vue';
-import Breadcrumb from '../lay-sidebar/breadCrumb.vue';
-// import Notice from './lay-notice/index.vue';
-import { useNav } from '../../hooks/useNav';
-import Search from '../lay-search/index.vue';
-import mixNav from '../lay-sidebar/mixNav.vue';
-import OrgSelect from '../lay-select-org/index.vue';
-import { useTranslationLang } from '../../hooks/useTranslationLang';
-import globalization from '../../../assets/svg/globalization.svg?component';
-import avatars from '../../../assets/images/avatars.jpg';
-import { kSYSCONFIG } from '../../../contant';
-
-// const router = useRouter();
-// const route = useRoute();
-const showModal = ref(false);
-
-const {
-  layout,
-  logout,
-  onPanel,
-  toggleSideBar,
-  appHook,
-  userInfo,
-  avatarsStyle,
-  setDocumentTitle,
-  getDropdownItemStyle,
-  getDropdownItemClass,
-  passwordItems
-} = useNav();
-
-const { locale, translationCh, translationEn } = useTranslationLang();
-
-const record: IRecord = {};
-
-const sysConfig = storageLocal.getItem(kSYSCONFIG) || {};
-
-/**
- * @description: 重置密码
- */
-const handleResetPwd = (): void => {
-  record.id = userInfo.value.id;
-  showModal.value = true;
-};
-
-setDocumentTitle();
-</script>
-
-<style lang="scss" scoped>
-.system-navbar {
-  width: 100%;
-  height: 48px;
-  overflow: hidden;
-
-  .hamburger-container {
-    float: left;
-    height: 100%;
-    line-height: 48px;
-    cursor: pointer;
-  }
-
-  .vertical-header-right {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    min-width: 280px;
-    height: 48px;
-    color: #000000d9;
-
-    .el-dropdown-link {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      width: 100px;
-      height: 48px;
-      padding: 10px 6px;
-      color: #000000d9;
-      cursor: pointer;
-
-      p {
-        font-size: 14px;
-        font-weight: 600;
-      }
-
-      img {
-        width: 22px;
-        height: 22px;
-        border-radius: 50%;
-      }
-    }
-
-    .el-icon-setting {
-      display: flex;
-      align-items: center;
-      width: 38px;
-      height: 48px;
-      padding: 12px;
-      cursor: pointer;
-    }
-  }
-
-  .breadcrumb-container {
-    float: left;
-  }
-
-  /* stylelint-disable */
-  .user-name {
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-line-clamp: 2;
-  }
-  /* stylelint-enable */
-}
-
-.translation {
-  ::v-deep(.el-dropdown-menu__item) {
-    padding: 5px 40px;
-  }
-
-  .check-zh {
-    position: absolute;
-    left: 20px;
-  }
-
-  .check-en {
-    position: absolute;
-    left: 20px;
-  }
-}
-
-.logout {
-  max-width: 120px;
-
-  ::v-deep(.el-dropdown-menu__item) {
-    display: inline-flex;
-    flex-wrap: wrap;
-    min-width: 100%;
-  }
-}
-</style>
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-08-29 08:57:37
+ * @Description: file content
+-->
+<template>
+  <div class="system-navbar bg-white shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]">
+    <Hamburger
+      v-if="layout !== 'mix'"
+      :is-active="appHook.sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
+
+    <Breadcrumb v-if="layout !== 'mix'" class="breadcrumb-container" />
+
+    <mixNav v-if="layout === 'mix'" />
+
+    <div v-if="layout === 'vertical'" class="vertical-header-right">
+      <!-- 业务单元选择 -->
+      <OrgSelect v-if="sysConfig['orgTaggle'] === 'Y'" />
+      <!-- 菜单搜索 -->
+      <Search />
+      <!-- 通知 -->
+      <!-- <Notice id="header-notice" /> -->
+      <!-- 国际化 -->
+      <el-dropdown id="header-translation" trigge·r="click">
+        <globalization class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden" />
+        <template #dropdown>
+          <el-dropdown-menu class="translation">
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'zh')"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
+              @click="translationCh"
+            >
+              <IconifyIconOffline v-show="locale === 'zh'" class="check-zh" icon="ri:check-line" />
+              简体中文
+            </el-dropdown-item>
+            <el-dropdown-item
+              :style="getDropdownItemStyle(locale, 'en')"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
+              @click="translationEn"
+            >
+              <span v-show="locale === 'en'" class="check-en">
+                <IconifyIconOffline icon="ri:check-line" />
+              </span>
+              English
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <!-- 退出登陆 -->
+      <el-dropdown trigger="click">
+        <span class="select-none el-dropdown-link navbar-bg-hover">
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p class="dark:text-white user-name">
+            {{ userInfo?.name }}
+          </p>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="user-dropdown">
+            <el-dropdown-item @click="handleResetPwd">
+              <IconifyIconOffline icon="ri:edit-2-fill" />
+              {{ $t('message.udp.passwordReset') }}</el-dropdown-item
+            >
+            <el-divider style="margin: 3px 0 !important" />
+            <el-dropdown-item @click="logout">
+              <IconifyIconOffline icon="switch-button" />
+              {{ $t('message.udp.logout') }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <span class="el-icon-setting navbar-bg-hover" @click="onPanel">
+        <IconifyIconOffline icon="ri:settings-5-fill" />
+      </span>
+    </div>
+    <ut-modal-form
+      v-if="showModal"
+      :record="record"
+      :items="passwordItems()"
+      :width="360"
+      :height="240"
+      data-status="update"
+      :title="$t('message.udp.passwordReset')"
+      url="/uums/user/updatePwd"
+      method="put"
+      @close="showModal = false"
+    />
+  </div>
+</template>
+<script lang="ts">
+export default { name: 'NavBar' };
+</script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { storageLocal } from '@utogether/utils';
+import Hamburger from '../lay-sidebar/hamBurger.vue';
+import Breadcrumb from '../lay-sidebar/breadCrumb.vue';
+// import Notice from './lay-notice/index.vue';
+import { useNav } from '../../hooks/useNav';
+import Search from '../lay-search/index.vue';
+import mixNav from '../lay-sidebar/mixNav.vue';
+import OrgSelect from '../lay-select-org/index.vue';
+import { useTranslationLang } from '../../hooks/useTranslationLang';
+import globalization from '../../../assets/svg/globalization.svg?component';
+import avatars from '../../../assets/images/avatars.jpg';
+import { kSYSCONFIG } from '../../../contant';
+
+// const router = useRouter();
+// const route = useRoute();
+const showModal = ref(false);
+
+const {
+  layout,
+  logout,
+  onPanel,
+  toggleSideBar,
+  appHook,
+  userInfo,
+  avatarsStyle,
+  setDocumentTitle,
+  getDropdownItemStyle,
+  getDropdownItemClass,
+  passwordItems
+} = useNav();
+
+const { locale, translationCh, translationEn } = useTranslationLang();
+
+const record: IRecord = {};
+
+const sysConfig = storageLocal.getItem(kSYSCONFIG) || {};
+
+/**
+ * @description: 重置密码
+ */
+const handleResetPwd = (): void => {
+  record.id = userInfo.value.id;
+  showModal.value = true;
+};
+
+setDocumentTitle();
+</script>
+
+<style lang="scss" scoped>
+.system-navbar {
+  width: 100%;
+  height: 48px;
+  overflow: hidden;
+
+  .hamburger-container {
+    float: left;
+    height: 100%;
+    line-height: 48px;
+    cursor: pointer;
+  }
+
+  .vertical-header-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 280px;
+    height: 48px;
+    color: #000000d9;
+
+    .el-dropdown-link {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      width: 100px;
+      height: 48px;
+      padding: 10px 6px;
+      color: #000000d9;
+      cursor: pointer;
+
+      p {
+        font-size: 14px;
+        font-weight: 600;
+      }
+
+      img {
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+      }
+    }
+
+    .el-icon-setting {
+      display: flex;
+      align-items: center;
+      width: 38px;
+      height: 48px;
+      padding: 12px;
+      cursor: pointer;
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
+
+  /* stylelint-disable */
+  .user-name {
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+  }
+  /* stylelint-enable */
+}
+
+.translation {
+  ::v-deep(.el-dropdown-menu__item) {
+    padding: 5px 40px;
+  }
+
+  .check-zh {
+    position: absolute;
+    left: 20px;
+  }
+
+  .check-en {
+    position: absolute;
+    left: 20px;
+  }
+}
+
+.logout {
+  max-width: 120px;
+
+  ::v-deep(.el-dropdown-menu__item) {
+    display: inline-flex;
+    flex-wrap: wrap;
+    min-width: 100%;
+  }
+}
+</style>