@utogether/udp-core 1.0.0

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

@@ -0,0 +1,72 @@
+<!--
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-06-19 09:14:18
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-16 16:24:02
+ * @FilePath: /udp-front/packages/udp-core/src/layout/components/lay-sidebar/hamBurger.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div
+    :class="classes.container"
+    :title="props.isActive ? $t('message.udp.collapse') : $t('message.udp.expand')"
+    @click="toggleClick"
+    @mouseenter="fillColor = useEpThemeStoreHook().epThemeColor"
+    @mouseleave="fillColor = ''"
+  >
+    <svg
+      :fill="fillColor"
+      :class="['hamburger', props.isActive ? 'is-active' : 'color-primary']"
+      class="hover:color-primary color-primary dark:fill-light-900"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <path
+        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useEpThemeStoreHook } from '../../../store/modules/epTheme';
+export interface Props {
+  isActive: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
+});
+
+const fillColor = ref<string>('');
+
+const emit = defineEmits<{
+  (e: 'toggleClick'): void;
+}>();
+
+const toggleClick = () => {
+  emit('toggleClick');
+};
+</script>
+
+<style module="classes" scoped>
+.container {
+  padding: 0 15px;
+}
+</style>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+}
+
+.is-active {
+  transform: rotate(180deg);
+}
+</style>

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

@@ -0,0 +1,191 @@
+<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 class="udp-horizontal" />
+      <!-- 菜单搜索 -->
+      <Search />
+      <!-- 通知 -->
+      <!-- <Notice id="header-notice" /> -->
+      <!-- 国际化 -->
+      <el-dropdown id="header-translation" 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>

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

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { ref, watch, toRaw, onMounted, nextTick } from 'vue';
+import OrgSelect from '../lay-select-org/index.vue';
+import Search from '../lay-search/index.vue';
+// import Notice from '../lay-notice/index.vue';
+import extraIcon from './extraIcon.vue';
+import avatars from '../../../assets/images/avatars.jpg';
+import { transformI18n } from '../../../plugins/i18n';
+import { useRenderIcon } from '../../../components/ReIcon/src/hooks';
+import { useEpThemeStoreHook } from '../../../store/modules/epTheme';
+import { getParentPaths, findRouteByPath } from '../../../router/utils';
+import { useNav } from '../../hooks/useNav';
+import { useTranslationLang } from '../../hooks/useTranslationLang';
+import { usePermissionStoreHook } from '../../../store/modules/permission';
+import globalization from '../../../assets/svg/globalization.svg?component';
+
+const menuRef = ref();
+const { route, locale, translationCh, translationEn } = useTranslationLang(menuRef);
+
+const {
+  device,
+  logout,
+  onPanel,
+  toggleSideBar,
+  resolvePath,
+  appHook,
+  userInfo,
+  getDivStyle,
+  avatarsStyle,
+  getDropdownItemStyle,
+  getDropdownItemClass,
+  passwordItems
+} = useNav();
+
+const refScrollbar = ref(null);
+const defaultActive = ref(null);
+const record: IRecord = {};
+
+const showModal = ref(false);
+
+function getDefaultActive(routePath) {
+  const wholeMenus = usePermissionStoreHook().wholeMenus;
+  // 当前路由的父级路径
+  const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
+  defaultActive.value = findRouteByPath(parentRoutes, wholeMenus)?.children[0]?.path;
+}
+
+onMounted(() => {
+  getDefaultActive(route.path);
+});
+
+nextTick(() => {
+  menuRef.value?.handleResize();
+});
+
+watch(
+  () => route.path,
+  () => {
+    getDefaultActive(route.path);
+  }
+);
+
+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>
+
+<template>
+  <div v-if="device !== 'mobile'" class="horizontal-header">
+    <div
+      :class="classes.container"
+      :title="appHook.sidebar.opened ? $t('message.udp.collapse') : $t('message.udp.expand')"
+      @click="toggleSideBar"
+    >
+      <svg
+        :fill="useEpThemeStoreHook().fill"
+        :class="['hamburger', appHook.sidebar.opened ? 'is-active-hamburger' : '']"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+        width="64"
+        height="64"
+      >
+        <path
+          d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
+        />
+      </svg>
+    </div>
+
+    <el-scrollbar ref="refScrollbar" style="max-width: 66%" @wheel.prevent="handleScroll">
+      <template #default>
+        <el-menu
+          ref="menu"
+          :default-active="defaultActive"
+          :ellipsis="false"
+          class="horizontal-header-menu"
+          mode="horizontal"
+          router
+        >
+          <el-menu-item
+            v-for="route in usePermissionStoreHook().wholeMenus"
+            :key="route.path"
+            :index="resolvePath(route) || route.redirect"
+          >
+            <template #title>
+              <div v-if="toRaw(route.meta.icon)" :class="['sub-menu-icon', route.meta.icon]">
+                <component :is="useRenderIcon(route.meta && toRaw(route.meta.icon))" />
+              </div>
+              <!-- <span class="select-none">{{ transformI18n(route.meta.title) }}</span>
+              <FontIcon
+                v-if="route.meta.extraIcon"
+                width="30px"
+                height="30px"
+                style="position: absolute; right: 10px"
+                :icon="route.meta.extraIcon"
+                :svg="route.meta.extraIcon ? true : false"
+              /> -->
+              <div :style="getDivStyle">
+                <span class="select-none">
+                  {{ transformI18n(route.meta.title) }}
+                </span>
+                <extraIcon :extra-icon="route.meta.extraIcon" />
+              </div>
+            </template>
+          </el-menu-item>
+        </el-menu>
+      </template>
+    </el-scrollbar>
+    <div class="horizontal-header-right">
+      <!-- 业务单元选择 -->
+      <OrgSelect />
+      <!-- 菜单搜索 -->
+      <Search />
+      <!-- 通知 -->
+      <!-- <Notice id="header-notice" /> -->
+      <!-- 国际化 -->
+      <el-dropdown id="header-translation" 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="ri:check-line" />
+              </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="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">{{ userInfo.name }}</p>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="logout">
+            <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"
+      :title="$t('message.udp.passwordReset')"
+      data-status="update"
+      url="/uums/user/updatePwd"
+      method="put"
+      @close="showModal = false"
+    />
+  </div>
+</template>
+
+<style module="classes" scoped>
+.container {
+  padding: 0 15px;
+}
+</style>
+
+<style lang="scss" scoped>
+.hamburger {
+  width: 20px;
+  height: 20px;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.is-active-hamburger {
+  transform: rotate(180deg);
+}
+
+.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>

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

@@ -0,0 +1,98 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-17 17:15:15
+ * @Description: file content
+-->
+<script setup lang="ts">
+import { ref } from 'vue';
+import { storageLocal } from '@utogether/utils';
+import { kSYSCONFIG } from '../../../contant';
+import utogether from '../../../assets/images/utogether.png';
+
+const props = defineProps({
+  collapse: Boolean
+});
+
+const sysConfig = storageLocal.getItem(kSYSCONFIG) || {};
+
+const title = sysConfig['title'];
+const logo = ref(sysConfig['logo'] || utogether);
+// console.log(logo);
+</script>
+
+<template>
+  <div class="sidebar-logo-container" :class="{ collapses: props.collapse }">
+    <transition name="sidebarLogoFade">
+      <router-link
+        v-if="props.collapse"
+        key="props.collapse"
+        :title="title"
+        class="sidebar-logo-link"
+        to="/"
+      >
+        <img :src="logo" class="ut-collapse-img ut-sidebar-logo" />
+      </router-link>
+      <router-link v-else key="expand" :title="title" class="sidebar-logo-link" to="/">
+        <img :src="logo" class="ut-sidebar-logo h-10" />
+        <span class="sidebar-title">{{ title }}</span>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 48px;
+  overflow: hidden;
+  text-align: center;
+  background-color: var(--udp-theme-sidebar-logo);
+
+  .sidebar-logo-link {
+    // margin-top: 5px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .ut-sidebar-logo {
+      height: 100%;
+    }
+
+    .ut-collapse-img {
+      width: 100%;
+    }
+
+    .sidebar-title {
+      display: block;
+      // width: 140px;
+      // margin-top: 10px;
+      margin-left: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--udp-theme-project-text);
+      text-align: left;
+      white-space: nowrap;
+    }
+  }
+
+  .collapses {
+    .sidebar-logo {
+      margin-right: 0;
+    }
+  }
+
+  svg {
+    width: 50px;
+    height: 50px;
+  }
+}
+</style>