@utogether/udp-core 1.0.1-beta.16 → 1.0.1-beta.18

package/src/layout/components/lay-sidebar/horizontal.vue

@@ -1,190 +1,190 @@
-<script setup lang="ts">
-import { ref, nextTick } from 'vue';
-import { storageLocal } from '@utogether/utils';
-import { useNav } from '../../hooks/useNav';
-import OrgSelect from '../lay-select-org/index.vue';
-import Search from '../lay-search/index.vue';
-// import Notice from '../lay-notice/index.vue';
-import SidebarItem from './sidebarItem.vue';
-import avatars from '../../../assets/images/avatars.jpg';
-import { kSYSCONFIG } from '../../../contant';
-import { useTranslationLang } from '../../hooks/useTranslationLang';
-import globalization from '../../../assets/svg/globalization.svg?component';
-
-import utogether from '../../../assets/images/utogether.png';
-import { usePermissionStoreHook } from '../../../store/modules/permission';
-
-const menuRef = ref();
-const { route, locale, translationCh, translationEn } = useTranslationLang(menuRef);
-const routeStore = usePermissionStoreHook();
-
-const sysConfig = storageLocal.getItem(kSYSCONFIG) || {};
-
-const logo = ref(sysConfig['logo'] || utogether);
-
-const {
-  title,
-  logout,
-  backHome,
-  onPanel,
-  userInfo,
-  avatarsStyle,
-  getDropdownItemStyle,
-  getDropdownItemClass,
-  passwordItems
-} = useNav();
-
-const record: IRecord = {};
-
-const refScrollbar = ref(null);
-const showModal = ref(false);
-
-nextTick(() => {
-  menuRef.value?.handleResize();
-});
-
-/**
- * @description: 重置密码
- */
-const handleResetPwd = (): void => {
-  record.id = userInfo['id'];
-  showModal.value = true;
-};
-
-const handleScroll = e => {
-  const wheelDelta = e.wheelDelta || -e.deltaY * 40;
-  const scrollbar = refScrollbar.value;
-  // scrollbar.wrap$获取到包裹容器的element对象
-  scrollbar.setScrollLeft(scrollbar.wrapRef.scrollLeft + wheelDelta);
-};
-</script>
-<script lang="ts">
-export default { name: 'LayoutHorizontal' };
-</script>
-<template>
-  <div v-spinning="usePermissionStoreHook().wholeMenus.length === 0" class="horizontal-header">
-    <div class="flex flex-1 horizontal-header-left" @click="backHome">
-      <img :src="logo" class="h-full" />
-      <span class="text-xl u-project-text">{{ title }}</span>
-    </div>
-    <el-scrollbar ref="refScrollbar" class="flex-[3]" @wheel.prevent="handleScroll">
-      <template #default>
-        <el-menu
-          :default-active="route.path"
-          :ellipsis="false"
-          unique-opened
-          router
-          popper-class="udp-scrollbar"
-          class="horizontal-header-menu"
-          mode="horizontal"
-        >
-          <sidebar-item
-            v-for="route in routeStore.wholeMenus"
-            :key="route.path"
-            :item="route"
-            :base-path="route.path"
-          />
-        </el-menu>
-      </template>
-    </el-scrollbar>
-    <div class="horizontal-header-right flex-[2]">
-      <!-- 业务单元选择 -->
-      <OrgSelect v-if="sysConfig['orgTaggle'] === 'Y'" class="udp-horizontal" />
-      <!-- 菜单搜索 -->
-      <Search />
-      <!-- 通知 -->
-      <!-- <Notice id="header-notice" /> -->
-      <!-- 国际化 -->
-      <el-dropdown id="header-translation" class="px-2" trigger="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"
-            >
-              <span v-show="locale === 'zh'" class="check-zh">
-                <IconifyIconOffline icon="check" />
-              </span>
-              简体中文
-            </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="check" />
-              </span>
-              English
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <!-- 退出登录 -->
-      <el-dropdown trigger="click">
-        <span class="el-dropdown-link navbar-bg-hover">
-          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p class="dark:text-white">{{ userInfo.name }}</p>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu class="user-dropdown">
-            <el-dropdown-item @click="handleResetPwd">
-              <IconifyIconOffline icon="edit" />
-              {{ $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"
-      :title="$t('message.udp.passwordReset')"
-      data-status="update"
-      url="/user/updatePwd"
-      method="put"
-      @close="showModal = false"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.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>
+<script setup lang="ts">
+import { ref, nextTick } from 'vue';
+import { storageLocal } from '@utogether/utils';
+import { useNav } from '../../hooks/useNav';
+import OrgSelect from '../lay-select-org/index.vue';
+import Search from '../lay-search/index.vue';
+// import Notice from '../lay-notice/index.vue';
+import SidebarItem from './sidebarItem.vue';
+import avatars from '../../../assets/images/avatars.jpg';
+import { kSYSCONFIG } from '../../../contant';
+import { useTranslationLang } from '../../hooks/useTranslationLang';
+import globalization from '../../../assets/svg/globalization.svg?component';
+
+import utogether from '../../../assets/images/utogether.png';
+import { usePermissionStoreHook } from '../../../store/modules/permission';
+
+const menuRef = ref();
+const { route, locale, translationCh, translationEn } = useTranslationLang(menuRef);
+const routeStore = usePermissionStoreHook();
+
+const sysConfig = storageLocal.getItem(kSYSCONFIG) || {};
+
+const logo = ref(sysConfig['logo'] || utogether);
+
+const {
+  title,
+  logout,
+  backHome,
+  onPanel,
+  userInfo,
+  avatarsStyle,
+  getDropdownItemStyle,
+  getDropdownItemClass,
+  passwordItems
+} = useNav();
+
+const record: IRecord = {};
+
+const refScrollbar = ref(null);
+const showModal = ref(false);
+
+nextTick(() => {
+  menuRef.value?.handleResize();
+});
+
+/**
+ * @description: 重置密码
+ */
+const handleResetPwd = (): void => {
+  record.id = userInfo['id'];
+  showModal.value = true;
+};
+
+const handleScroll = e => {
+  const wheelDelta = e.wheelDelta || -e.deltaY * 40;
+  const scrollbar = refScrollbar.value;
+  // scrollbar.wrap$获取到包裹容器的element对象
+  scrollbar.setScrollLeft(scrollbar.wrapRef.scrollLeft + wheelDelta);
+};
+</script>
+<script lang="ts">
+export default { name: 'LayoutHorizontal' };
+</script>
+<template>
+  <div v-spinning="usePermissionStoreHook().wholeMenus.length === 0" class="horizontal-header">
+    <div class="flex flex-1 horizontal-header-left" @click="backHome">
+      <img :src="logo" class="h-full" />
+      <span class="text-xl u-project-text">{{ title }}</span>
+    </div>
+    <el-scrollbar ref="refScrollbar" class="flex-[3]" @wheel.prevent="handleScroll">
+      <template #default>
+        <el-menu
+          :default-active="route.path"
+          :ellipsis="false"
+          unique-opened
+          router
+          popper-class="udp-scrollbar"
+          class="horizontal-header-menu"
+          mode="horizontal"
+        >
+          <sidebar-item
+            v-for="route in routeStore.wholeMenus"
+            :key="route.path"
+            :item="route"
+            :base-path="route.path"
+          />
+        </el-menu>
+      </template>
+    </el-scrollbar>
+    <div class="horizontal-header-right flex-[2]">
+      <!-- 业务单元选择 -->
+      <OrgSelect v-if="sysConfig['orgTaggle'] === 'Y'" class="udp-horizontal" />
+      <!-- 菜单搜索 -->
+      <Search />
+      <!-- 通知 -->
+      <!-- <Notice id="header-notice" /> -->
+      <!-- 国际化 -->
+      <el-dropdown id="header-translation" class="px-2" trigger="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"
+            >
+              <span v-show="locale === 'zh'" class="check-zh">
+                <IconifyIconOffline icon="check" />
+              </span>
+              简体中文
+            </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="check" />
+              </span>
+              English
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <!-- 退出登录 -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link navbar-bg-hover">
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p class="dark:text-white">{{ userInfo.name }}</p>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="user-dropdown">
+            <el-dropdown-item @click="handleResetPwd">
+              <IconifyIconOffline icon="edit" />
+              {{ $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"
+      :title="$t('message.udp.passwordReset')"
+      data-status="update"
+      url="/user/updatePwd"
+      method="put"
+      @close="showModal = false"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.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>