@utogether/udp-core 1.0.0

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

@@ -0,0 +1,510 @@
+<script setup lang="ts">
+import { reactive, ref, unref, watch, computed, nextTick, onUnmounted, onBeforeMount } from 'vue';
+import { templateRef } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { useDark, useGlobal, useDebounce } from '@utogether/utils';
+import panel from '../lay-panel/index.vue';
+import { emitter } from '../../../utils/mitt';
+import { useAppStoreHook } from '../../../store/modules/app';
+import { useMultiTagsStoreHook } from '../../../store/modules/multiTags';
+import { useDataThemeChange } from '../../hooks/useDataThemeChange';
+import { useNav } from '../../hooks/useNav';
+import { useRenderIcon } from '../../../components/ReIcon/src/hooks';
+import dayIcon from '../../../assets/svg/day.svg?component';
+import darkIcon from '../../../assets/svg/dark.svg?component';
+import systemIcon from '../../../assets/svg/system.svg?component';
+
+interface IThemeOption {
+  label: string;
+  icon: any;
+  theme: string;
+  value: number;
+  iconAttrs: { fill: string };
+}
+
+const { device } = useNav();
+const { t } = useI18n();
+const { isDark } = useDark();
+const { $storage } = useGlobal();
+
+const mixRef = templateRef<HTMLElement | null>('mixRef', null);
+const verticalRef = templateRef<HTMLElement | null>('verticalRef', null);
+const horizontalRef = templateRef<HTMLElement | null>('horizontalRef', null);
+
+const {
+  dataTheme,
+  overallStyle,
+  layoutTheme,
+  themeColors,
+  toggleClass,
+  dataThemeChange,
+  setLayoutThemeColor
+} = useDataThemeChange();
+
+/* body添加layout属性，作用于src/style/sidebar.scss */
+if (unref(layoutTheme)) {
+  const layout = unref(layoutTheme).layout;
+  const theme = unref(layoutTheme).theme;
+  document.documentElement.setAttribute('data-theme', theme);
+  setLayoutModel(layout);
+}
+
+/** 默认灵动模式 */
+const markValue = ref($storage.configure?.showModel ?? 'smart');
+
+const logoVal = ref($storage.configure?.showLogo ?? true);
+
+const settings = reactive({
+  greyVal: $storage.configure.grey,
+  weakVal: $storage.configure.weak,
+  tabsVal: $storage.configure.hideTabs,
+  showLogo: $storage.configure.showLogo,
+  showModel: $storage.configure.showModel,
+  multiTagsCache: $storage.configure.multiTagsCache
+});
+
+const getThemeColorStyle = computed(() => {
+  return color => {
+    return { background: color };
+  };
+});
+
+/** 当网页整体为暗色风格时不显示亮白色主题配色切换选项 */
+const showThemeColors = computed(() => {
+  return themeColor => {
+    return themeColor === 'light' && isDark.value ? false : true;
+  };
+});
+
+function storageConfigureChange<T>(key: string, val: T): void {
+  const storageConfigure = $storage.configure;
+  storageConfigure[key] = val;
+  $storage.configure = storageConfigure;
+}
+
+/** 灰色模式设置 */
+const greyChange = (value): void => {
+  const htmlEl = document.querySelector('html');
+  toggleClass(settings.greyVal, 'html-grey', htmlEl);
+  storageConfigureChange('grey', value);
+};
+
+/** 色弱模式设置 */
+const weekChange = (value): void => {
+  const htmlEl = document.querySelector('html');
+  toggleClass(settings.weakVal, 'html-weakness', htmlEl);
+  storageConfigureChange('weak', value);
+};
+
+/** 隐藏标签页设置 */
+const tagsChange = () => {
+  const showVal = settings.tabsVal;
+  storageConfigureChange('hideTabs', showVal);
+  emitter.emit('tagViewsChange', showVal as unknown as string);
+};
+
+/** 标签页持久化设置 */
+const multiTagsCacheChange = () => {
+  const multiTagsCache = settings.multiTagsCache;
+  storageConfigureChange('multiTagsCache', multiTagsCache);
+  useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
+};
+
+function onChange(value) {
+  markValue.value = value;
+  storageConfigureChange('showModel', value);
+  emitter.emit('tagViewsShowModel', value);
+}
+/** 主题切换 */
+function onThemeChange(theme) {
+  // dataTheme.value = !dataTheme.value;
+  // dataThemeChange();
+  theme === 1 && theme !== 2 ? (dataTheme.value = true) : (dataTheme.value = false);
+  overallStyle.value = themeOptions.value[theme].theme;
+  dataThemeChange(overallStyle.value);
+  theme === 2 && watchSystemThemeChange();
+}
+/** 侧边栏Logo */
+function logoChange() {
+  unref(logoVal) ? storageConfigureChange('showLogo', true) : storageConfigureChange('showLogo', false);
+  emitter.emit('logoChange', unref(logoVal));
+}
+
+function setFalse(Doms): any {
+  Doms.forEach(v => {
+    toggleClass(false, 'is-select', unref(v));
+  });
+}
+
+/** 主题色 激活选择项 */
+const getThemeColor = computed(() => {
+  return current => {
+    if (current === layoutTheme.value.theme && layoutTheme.value.theme !== 'light') {
+      return '#fff';
+    } else if (current === layoutTheme.value.theme && layoutTheme.value.theme === 'light') {
+      return '#1d2b45';
+    } else {
+      return 'transparent';
+    }
+  };
+});
+
+const themeOptions = computed<IThemeOption[]>(() => {
+  return [
+    {
+      label: t('message.udp.light'),
+      icon: dayIcon,
+      theme: 'light',
+      value: 0,
+      iconAttrs: { fill: isDark.value ? '#fff' : '#000' }
+    },
+    {
+      label: t('message.udp.dark'),
+      icon: darkIcon,
+      theme: 'dark',
+      value: 1,
+      iconAttrs: { fill: isDark.value ? '#fff' : '#000' }
+    },
+    {
+      label: '自动',
+      icon: systemIcon,
+      theme: 'system',
+      value: 2,
+      iconAttrs: { fill: isDark.value ? '#fff' : '#000' }
+    }
+  ];
+});
+
+const markOptions = [
+  { label: t('message.udp.smart'), value: 'smart' },
+  { label: t('message.udp.card'), value: 'card' },
+  { label: '丝滑', value: 'chrome' }
+];
+
+/** 设置导航模式 */
+function setLayoutModel(layout: string) {
+  layoutTheme.value.layout = layout;
+  window.document.body.setAttribute('layout', layout);
+  window.document.body.setAttribute('layoutType', window.top === window.self ? 'normal' : 'iframe');
+  $storage.layout = {
+    layout,
+    theme: layoutTheme.value.theme,
+    darkMode: $storage.layout?.darkMode,
+    sidebarStatus: $storage.layout?.sidebarStatus,
+    epThemeColor: $storage.layout?.epThemeColor,
+    themeColor: layoutTheme.value.theme,
+    overallStyle: $storage.layout?.overallStyle
+  };
+  useAppStoreHook().setLayout(layout);
+}
+
+watch($storage, ({ layout }) => {
+  switch (layout['layout']) {
+    case 'vertical':
+      toggleClass(true, 'is-select', unref(verticalRef));
+      useDebounce(setFalse([horizontalRef]), 50);
+      useDebounce(setFalse([mixRef]), 50);
+      break;
+    case 'horizontal':
+      toggleClass(true, 'is-select', unref(horizontalRef));
+      useDebounce(setFalse([verticalRef]), 50);
+      useDebounce(setFalse([mixRef]), 50);
+      break;
+    case 'mix':
+      toggleClass(true, 'is-select', unref(mixRef));
+      useDebounce(setFalse([verticalRef]), 50);
+      useDebounce(setFalse([horizontalRef]), 50);
+      break;
+  }
+});
+
+const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+
+/** 根据操作系统主题设置平台整体风格 */
+function updateTheme() {
+  if (overallStyle.value !== 'system') return;
+  if (mediaQueryList.matches) {
+    dataTheme.value = true;
+  } else {
+    dataTheme.value = false;
+  }
+  dataThemeChange(overallStyle.value);
+}
+
+function removeMatchMedia() {
+  mediaQueryList.removeEventListener('change', updateTheme);
+}
+
+/** 监听操作系统主题改变 */
+function watchSystemThemeChange() {
+  updateTheme();
+  removeMatchMedia();
+  mediaQueryList.addEventListener('change', updateTheme);
+}
+
+onBeforeMount(() => {
+  /* 初始化项目配置 */
+  nextTick(() => {
+    watchSystemThemeChange();
+    settings.greyVal && document.querySelector('html')?.classList.add('html-grey');
+    settings.weakVal && document.querySelector('html')?.classList.add('html-weakness');
+    settings.tabsVal && tagsChange();
+  });
+});
+
+onUnmounted(() => removeMatchMedia);
+</script>
+<script lang="ts">
+export default { name: 'SettingPanel' };
+</script>
+<template>
+  <panel>
+    <div class="p-6">
+      <p class="mb-3 text-sm font-medium dark:text-white">{{ $t('message.udp.pageStyle') }}</p>
+      <el-segmented
+        :model-value="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
+        :options="themeOptions"
+        @change="onThemeChange"
+      >
+        <template #default="{ item }">
+          <div class="flex items-center gap-2 p-2">
+            <component :is="useRenderIcon(item.icon)" />
+            <span class="pl-1">{{ item.label }}</span>
+          </div>
+        </template>
+      </el-segmented>
+
+      <p class="mt-5 mb-3 text-sm font-medium dark:text-white">{{ $t('message.udp.theme') }}</p>
+      <ul class="theme-color">
+        <li
+          v-for="(item, index) in themeColors"
+          v-show="showThemeColors(item.themeColor)"
+          :key="index"
+          :style="getThemeColorStyle(item.color)"
+          @click="setLayoutThemeColor(item.themeColor)"
+        >
+          <el-icon style="margin: 0.1em 0.1em 0 0" :size="17" :color="getThemeColor(item.themeColor)">
+            <IconifyIconOffline icon="ri:check-line" />
+          </el-icon>
+        </li>
+      </ul>
+
+      <p class="mt-5 mb-3 text-sm font-medium dark:text-white">{{ $t('message.udp.navigationMode') }}</p>
+      <ul class="udp-theme">
+        <li
+          ref="verticalRef"
+          v-tippy="{
+            content: '左侧菜单',
+            zIndex: 41000
+          }"
+          :class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
+          @click="setLayoutModel('vertical')"
+        >
+          <div />
+          <div />
+        </li>
+        <li
+          v-if="device !== 'mobile'"
+          ref="horizontalRef"
+          v-tippy="{
+            content: '顶部菜单',
+            zIndex: 41000
+          }"
+          :class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
+          @click="setLayoutModel('horizontal')"
+        >
+          <div />
+          <div />
+        </li>
+        <li
+          v-if="device !== 'mobile'"
+          ref="mixRef"
+          v-tippy="{
+            content: '混合菜单',
+            zIndex: 41000
+          }"
+          :class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
+          @click="setLayoutModel('mix')"
+        >
+          <div />
+          <div />
+        </li>
+      </ul>
+
+      <p class="mt-5 mb-3 text-base font-medium dark:text-white">{{ $t('message.udp.tagStyle') }}</p>
+      <el-segmented :model-value="markValue" :options="markOptions" @change="onChange" />
+
+      <p class="mt-5 mb-1 text-base font-medium dark:text-white">界面显示</p>
+      <ul class="setting">
+        <li>
+          <span class="dark:text-white">灰色模式</span>
+          <el-switch
+            v-model="settings.greyVal"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+            @change="greyChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">色弱模式</span>
+          <el-switch
+            v-model="settings.weakVal"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+            @change="weekChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">隐藏标签页</span>
+          <el-switch
+            v-model="settings.tabsVal"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+            @change="tagsChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">Logo</span>
+          <el-switch
+            v-model="logoVal"
+            inline-prompt
+            :active-value="true"
+            :inactive-value="false"
+            active-text="开"
+            inactive-text="关"
+            @change="logoChange"
+          />
+        </li>
+        <li>
+          <span class="dark:text-white">页签持久化</span>
+          <el-switch
+            v-model="settings.multiTagsCache"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+            @change="multiTagsCacheChange"
+          />
+        </li>
+      </ul>
+    </div>
+  </panel>
+</template>
+
+<style lang="scss" scoped>
+::v-deep(.el-divider__text) {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+::v-deep(.el-switch__core) {
+  --el-switch-off-color: var(--udp-switch-off-color);
+
+  min-width: 36px;
+  height: 18px;
+}
+
+::v-deep(.el-switch__core .el-switch__action) {
+  height: 14px;
+}
+
+.theme-color {
+  height: 20px;
+
+  li {
+    float: left;
+    height: 20px;
+    margin-right: 8px;
+    cursor: pointer;
+    border-radius: 4px;
+
+    &:nth-child(2) {
+      border: 1px solid #ddd;
+    }
+  }
+}
+
+.udp-theme {
+  display: flex;
+  gap: 12px;
+
+  li {
+    position: relative;
+    width: 46px;
+    height: 36px;
+    overflow: hidden;
+    cursor: pointer;
+    background: #f0f2f5;
+    border-radius: 4px;
+    box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
+
+    &:nth-child(1) {
+      div {
+        &:nth-child(1) {
+          width: 30%;
+          height: 100%;
+          background: #1b2a47;
+        }
+
+        &:nth-child(2) {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 70%;
+          height: 30%;
+          background: #fff;
+          box-shadow: 0 0 1px #888;
+        }
+      }
+    }
+
+    &:nth-child(2) {
+      div {
+        &:nth-child(1) {
+          width: 100%;
+          height: 30%;
+          background: #1b2a47;
+          box-shadow: 0 0 1px #888;
+        }
+      }
+    }
+
+    &:nth-child(3) {
+      div {
+        &:nth-child(1) {
+          width: 100%;
+          height: 30%;
+          background: #1b2a47;
+          box-shadow: 0 0 1px #888;
+        }
+
+        &:nth-child(2) {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 30%;
+          height: 70%;
+          background: #fff;
+          box-shadow: 0 0 1px #888;
+        }
+      }
+    }
+  }
+}
+
+.is-select {
+  border: 2px solid var(--el-color-primary);
+}
+
+.setting {
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 0;
+    font-size: 14px;
+  }
+}
+</style>

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

@@ -0,0 +1,131 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-16 16:17:07
+ * @Description: 面包屑
+-->
+<script setup lang="ts">
+import { ref, watch, toRaw, onMounted } from 'vue';
+import { isEqual, isArray } from 'xe-utils';
+import { transformI18n } from '../../../plugins/i18n';
+import { getParentPaths, findRouteByPath } from '../../../router/utils';
+import { useMultiTagsStoreHook } from '../../../store/modules/multiTags';
+import { useRoute, useRouter, RouteLocationMatched } from 'vue-router';
+
+const route = useRoute();
+const levelList = ref([]);
+const router = useRouter();
+const routes: any = router.options.routes;
+const multiTags: any = useMultiTagsStoreHook().multiTags;
+
+const isDashboard = (route: RouteLocationMatched): boolean | string => {
+  const name = route && (route.name as string);
+  if (!name) {
+    return false;
+  }
+  return name.trim().toLocaleLowerCase() === 'welcome'.toLocaleLowerCase();
+};
+
+const getBreadcrumb = (): void => {
+  // 当前路由信息
+  let currentRoute;
+  if (Object.keys(route.query).length > 0) {
+    multiTags.forEach(item => {
+      if (isEqual(route.query, item?.query)) {
+        currentRoute = toRaw(item);
+      }
+    });
+  } else if (Object.keys(route.params).length > 0) {
+    multiTags.forEach(item => {
+      if (isEqual(route.params, item?.params)) {
+        currentRoute = toRaw(item);
+      }
+    });
+  } else {
+    currentRoute = findRouteByPath(router.currentRoute.value.path, routes);
+  }
+  // 当前路由的父级路径组成的数组
+  const parentRoutes = getParentPaths(router.currentRoute.value.name as string, routes, 'name');
+  // 存放组成面包屑的数组
+  let matched = [];
+  // 获取每个父级路径对应的路由信息
+  isArray(parentRoutes) &&
+    parentRoutes?.forEach(path => {
+      if (path !== '/') {
+        matched.push(findRouteByPath(path, routes));
+      }
+    });
+
+  if (currentRoute?.path !== '/welcome') matched.push(currentRoute);
+
+  if (!isDashboard(matched[0])) {
+    matched = [
+      {
+        path: '/welcome',
+        parentPath: '/',
+        meta: { title: 'message.udp.home', i18n: true }
+      } as unknown as RouteLocationMatched
+    ].concat(matched);
+  }
+
+  matched.forEach((item, index) => {
+    if (currentRoute?.query || currentRoute?.params) return;
+    if (item?.children) {
+      item.children.forEach(v => {
+        if (v?.meta?.title === item?.meta?.title) {
+          matched.splice(index, 1);
+        }
+      });
+    }
+  });
+
+  levelList.value = matched.filter(item => item?.meta && item?.meta.title !== false);
+};
+
+const handleLink = item => {
+  const { redirect, name, path, query, params } = item;
+
+  if (redirect) {
+    router.push(redirect as any);
+  } else {
+    if (name) {
+      if (query) {
+        router.push({ name, query });
+      } else if (params) {
+        router.push({ name, params });
+      } else {
+        router.push({ name });
+      }
+    } else {
+      router.push({ path });
+    }
+  }
+};
+
+onMounted(() => {
+  getBreadcrumb();
+});
+
+watch(
+  () => route.path,
+  () => {
+    getBreadcrumb();
+  },
+  {
+    deep: true
+  }
+);
+</script>
+
+<template>
+  <el-breadcrumb class="!leading-[50px] select-none" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="item in levelList" :key="item.path" class="inline! items-stretch!">
+        <a @click.prevent="handleLink(item)">
+          {{ transformI18n(item.meta.title) }}
+        </a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>

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

@@ -0,0 +1,25 @@
+<!--
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-10-10 11:04:33
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2023-10-10 11:57:17
+ * @FilePath: /sitzone-mes/src/layout/components/lay-sidebar/extraIcon.vue
+ * @Description: 
+-->
+<script setup lang="ts">
+import { toRaw } from 'vue';
+import { useRenderIcon } from '../../../components/ReIcon/src/hooks';
+
+const props = defineProps({
+  extraIcon: {
+    type: String,
+    default: ''
+  }
+});
+</script>
+
+<template>
+  <div v-if="props.extraIcon" class="flex justify-center items-center">
+    <component :is="useRenderIcon(toRaw(props.extraIcon))" class="w-[30px] h-[30px]" />
+  </div>
+</template>