@utogether/udp-core 1.0.0

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

@@ -0,0 +1,237 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-16 16:20:09
+ * @Description: file content
+-->
+<template>
+  <div class="system-navbar bg-[#fff] 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 />
+      <!-- 菜单搜索 -->
+      <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 { useRouter } from 'vue-router';
+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';
+
+// 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 = {};
+/**
+ * @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>

package/src/layout/components/lay-notice/data.ts

@@ -0,0 +1,59 @@
+export interface ListItem {
+  avatar: string;
+  title: string;
+  datetime: string;
+  type: string;
+  description: string;
+  status?: '' | 'success' | 'warning' | 'info' | 'danger';
+  extra?: string;
+}
+
+export interface TabItem {
+  key: string;
+  name: string;
+  list: ListItem[];
+}
+
+export const noticesData: TabItem[] = [
+  {
+    key: '1',
+    name: '通知',
+    list: [
+      {
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+        title: '你收到了 12 份新周报',
+        datetime: '一年前',
+        description: '',
+        type: '1'
+      }
+    ]
+  },
+  {
+    key: '2',
+    name: '消息',
+    list: [
+      {
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+        title: '李白 评论了你',
+        description: '长风破浪会有时,直挂云帆济沧海',
+        datetime: '一年前',
+        type: '2'
+      }
+    ]
+  },
+  {
+    key: '3',
+    name: '代办',
+    list: [
+      {
+        avatar: '',
+        title: '任务名称',
+        description: '任务需要在 2021-11-16 20:00 前启动',
+        datetime: '',
+        extra: '未开始',
+        status: 'info',
+        type: '3'
+      }
+    ]
+  }
+];

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

@@ -0,0 +1,83 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-05-24 11:26:59
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-08-08 11:27:55
+ * @Description: file content
+-->
+<script lang="ts">
+export default { name: 'LayoutNotice' };
+</script>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { noticesData } from './data';
+import NoticeList from './noticeList.vue';
+
+const noticesNum = ref(0);
+const notices = ref(noticesData);
+const activeKey = ref(noticesData[0].key);
+
+notices.value.map(v => (noticesNum.value += v.list.length));
+</script>
+
+<template>
+  <el-dropdown trigger="click" placement="bottom-end">
+    <span class="dropdown-badge navbar-bg-hover select-none">
+      <el-badge :value="noticesNum" :max="99">
+        <span class="header-notice-icon">
+          <IconifyIconOffline icon="bell" />
+        </span>
+      </el-badge>
+    </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-tabs v-model="activeKey" :stretch="true" class="dropdown-tabs">
+          <template v-for="item in notices" :key="item.key">
+            <el-tab-pane :label="`${item.name}(${item.list.length})`" :name="`${item.key}`">
+              <el-scrollbar max-height="330px">
+                <div class="noticeList-container">
+                  <NoticeList :list="item.list" />
+                </div>
+              </el-scrollbar>
+            </el-tab-pane>
+          </template>
+        </el-tabs>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<style lang="scss" scoped>
+.dropdown-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 48px;
+  cursor: pointer;
+
+  .header-notice-icon {
+    font-size: 18px;
+  }
+}
+
+.dropdown-tabs {
+  width: 330px;
+
+  .noticeList-container {
+    padding: 15px 24px 0;
+  }
+
+  :deep(.el-tabs__header) {
+    margin: 0;
+  }
+
+  :deep(.el-tabs__nav-wrap)::after {
+    height: 1px;
+  }
+
+  :deep(.el-tabs__nav-wrap) {
+    padding: 0 36px;
+  }
+}
+</style>

package/src/layout/components/lay-notice/noticeItem.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { ListItem } from './data';
+import { ref, PropType, nextTick } from 'vue';
+
+const props = defineProps({
+  noticeItem: {
+    type: Object as PropType<ListItem>,
+    default: () => {}
+  }
+});
+
+const titleRef = ref(null);
+const descriptionRef = ref(null);
+const titleTooltip = ref(false);
+const descriptionTooltip = ref(false);
+
+function hoverTitle() {
+  nextTick(() => {
+    titleRef.value?.scrollWidth > titleRef.value?.clientWidth
+      ? (titleTooltip.value = true)
+      : (titleTooltip.value = false);
+  });
+}
+
+function hoverDescription(event, description) {
+  // currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除
+  const tempTag = document.createElement('span');
+  tempTag.innerText = description;
+  tempTag.className = 'getDescriptionWidth';
+  document.querySelector('body').appendChild(tempTag);
+  const currentWidth = (document.querySelector('.getDescriptionWidth') as HTMLSpanElement).offsetWidth;
+  document.querySelector('.getDescriptionWidth').remove();
+
+  // cellWidth为容器的宽度
+  const cellWidth = event.target.offsetWidth;
+
+  // 当文本宽度大于容器宽度两倍时，代表文本显示超过两行
+  currentWidth > 2 * cellWidth ? (descriptionTooltip.value = true) : (descriptionTooltip.value = false);
+}
+</script>
+
+<template>
+  <div
+    class="notice-container border-0 border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
+  >
+    <el-avatar
+      v-if="props.noticeItem.avatar"
+      :size="30"
+      :src="props.noticeItem.avatar"
+      class="notice-container-avatar"
+    />
+    <div class="notice-container-text">
+      <div class="notice-text-title text-[#000000d9] dark:text-white">
+        <el-tooltip
+          popper-class="notice-title-popper"
+          :disabled="!titleTooltip"
+          :content="props.noticeItem.title"
+          placement="top-start"
+        >
+          <div ref="titleRef" class="notice-title-content" @mouseover="hoverTitle">
+            {{ props.noticeItem.title }}
+          </div>
+        </el-tooltip>
+        <el-tag
+          v-if="props.noticeItem?.extra"
+          :type="props.noticeItem?.status"
+          size="small"
+          class="notice-title-extra"
+          >{{ props.noticeItem?.extra }}
+        </el-tag>
+      </div>
+
+      <el-tooltip
+        popper-class="notice-title-popper"
+        :disabled="!descriptionTooltip"
+        :content="props.noticeItem.description"
+        placement="top-start"
+      >
+        <div
+          ref="descriptionRef"
+          class="notice-text-description"
+          @mouseover="hoverDescription($event, props.noticeItem.description)"
+        >
+          {{ props.noticeItem.description }}
+        </div>
+      </el-tooltip>
+      <div class="notice-text-datetime text-[#00000073] dark:text-white">
+        {{ props.noticeItem.datetime }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.notice-title-popper {
+  max-width: 238px;
+}
+</style>
+<style scoped lang="scss">
+.notice-container {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 12px 0;
+  // border-bottom: 1px solid #f0f0f0;
+
+  .notice-container-avatar {
+    margin-right: 16px;
+    background: #fff;
+  }
+
+  .notice-container-text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .notice-text-title {
+      display: flex;
+      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 1.5715;
+      cursor: pointer;
+
+      .notice-title-content {
+        flex: 1;
+        width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .notice-title-extra {
+        float: right;
+        margin-top: -1.5px;
+        font-weight: 400;
+      }
+    }
+
+    .notice-text-description,
+    .notice-text-datetime {
+      font-size: 12px;
+      line-height: 1.5715;
+    }
+
+    .notice-text-description {
+      display: box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    .notice-text-datetime {
+      margin-top: 4px;
+    }
+  }
+}
+</style>

package/src/layout/components/lay-notice/noticeList.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { PropType } from 'vue';
+import NoticeItem from './noticeItem.vue';
+import { ListItem } from './data';
+
+const props = defineProps({
+  list: {
+    type: Array as PropType<Array<ListItem>>,
+    default: () => []
+  }
+});
+</script>
+
+<template>
+  <div v-if="props.list.length">
+    <NoticeItem v-for="(item, index) in props.list" :key="index" :notice-item="item" />
+  </div>
+  <el-empty v-else :description="$t('message.emptyData')" />
+</template>

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

@@ -0,0 +1,150 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-12-23 17:33:20
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-16 15:54:13
+ * @Description: 个性化设置页面
+-->
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { useDataThemeChange } from '../../hooks/useDataThemeChange';
+import { onClickOutside } from '@vueuse/core';
+import { emitter } from '../../../utils/mitt';
+
+const target = ref(null);
+const show = ref<Boolean>(false);
+
+const iconClass = computed(() => {
+  return [
+    'w-[22px]',
+    'h-[22px]',
+    'flex',
+    'justify-center',
+    'items-center',
+    'outline-hidden',
+    'rounded-[4px]',
+    'cursor-pointer',
+    'transition-colors',
+    'hover:bg-[#0000000f]',
+    'dark:hover:bg-[#ffffff1f]',
+    'dark:hover:text-[#ffffffd9]'
+  ];
+});
+
+const { onReset } = useDataThemeChange();
+onClickOutside(target, (event: any) => {
+  if (event.clientX > target.value.offsetLeft) return;
+  show.value = false;
+});
+
+onMounted(() => {
+  emitter.on('openPanel', () => {
+    show.value = true;
+  });
+});
+
+onBeforeUnmount(() => {
+  // 解绑`openPanel`公共事件，防止多次触发
+  emitter.off('openPanel');
+});
+</script>
+
+<template>
+  <div :class="{ show }">
+    <div class="right-panel-background" />
+    <div ref="target" class="right-panel bg-bg_color">
+      <div
+        class="project-configuration border-0 border-b-[1px] border-solid border-[var(--pure-border-color)]"
+      >
+        <h4 class="dark:text-white">{{ $t('message.tip.projectConfig') }}</h4>
+        <span
+          v-tippy="{
+            content: $t('message.tip.closeConfig'),
+            placement: 'bottom-start',
+            zIndex: 41000
+          }"
+          :class="iconClass"
+        >
+          <IconifyIconOffline
+            class="dark:text-white"
+            width="18px"
+            height="18px"
+            icon="ri:close-line"
+            @click="show = !show"
+          />
+        </span>
+      </div>
+      <el-scrollbar>
+        <slot />
+      </el-scrollbar>
+
+      <div
+        class="flex justify-end p-3 border-0 border-t-[1px] border-solid border-[var(--pure-border-color)]"
+      >
+        <el-button
+          v-tippy="{
+            content: $t('message.tip.toLogin'),
+            placement: 'left-start',
+            zIndex: 41000
+          }"
+          type="danger"
+          text
+          bg
+          @click="onReset"
+        >
+          {{ $t('message.tip.clearCache') }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-scrollbar) {
+  height: calc(100vh - 110px);
+}
+
+.right-panel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background: rgb(0 0 0 / 20%);
+  opacity: 0;
+  transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+}
+
+.right-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 40000;
+  width: 100%;
+  max-width: 300px;
+  box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
+  transform: translate(100%);
+  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
+}
+
+.show {
+  transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+
+  .right-panel-background {
+    z-index: 20000;
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+  }
+
+  .right-panel {
+    transform: translate(0);
+  }
+}
+
+.project-configuration {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+}
+</style>