@utogether/udp-core 1.0.0

package/src/layout/hooks/useBoolean.ts

@@ -0,0 +1,33 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-03-10 11:27:45
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-03-10 11:33:43
+ * @Description: file content
+ */
+import { ref } from 'vue';
+
+export function useBoolean(initValue = false) {
+  const bool = ref(initValue);
+
+  function setBool(value: boolean) {
+    bool.value = value;
+  }
+  function setTrue() {
+    setBool(true);
+  }
+  function setFalse() {
+    setBool(false);
+  }
+  function toggle() {
+    setBool(!bool.value);
+  }
+
+  return {
+    bool,
+    setBool,
+    setTrue,
+    setFalse,
+    toggle
+  };
+}

package/src/layout/hooks/useDataThemeChange.ts

@@ -0,0 +1,142 @@
+import { ref } from 'vue';
+import { useGlobal, cookies, storageLocal, storageSession } from '@utogether/utils';
+import { darken, lighten } from '../../utils';
+import { useLayout } from './useLayout';
+import { getConfig } from '../../config';
+import type { themeColorsType } from '../types';
+import { routerArrays } from '../types';
+import { kTOKEN, kLOGINER, kCKTOKEN } from '../../contant';
+import { router, resetRouter } from '../../router';
+import { useMultiTagsStoreHook } from '../../store/modules/multiTags';
+import { useAppStoreHook } from '../../store/modules/app';
+import { useEpThemeStoreHook } from '../../store/modules/epTheme';
+import { setTheme } from '../../plugins/vxe-table';
+
+export function useDataThemeChange() {
+  const { layoutTheme, layout } = useLayout();
+  const themeColors = ref<Array<themeColorsType>>([
+    /* 道奇蓝（默认） */
+    { color: '#1b2a47', themeColor: 'default' },
+    /* 亮白色 */
+    { color: '#ffffff', themeColor: 'light' },
+    /* 猩红色 */
+    { color: '#f5222d', themeColor: 'dusk' },
+    /* 橙红色 */
+    { color: '#fa541c', themeColor: 'volcano' },
+    /* 金色 */
+    { color: '#fadb14', themeColor: 'yellow' },
+    /* 绿宝石 */
+    { color: '#13c2c2', themeColor: 'mingQing' },
+    /* 酸橙绿 */
+    { color: '#52c41a', themeColor: 'auroraGreen' },
+    /* 深粉色 */
+    { color: '#eb2f96', themeColor: 'pink' },
+    /* 深紫罗兰色 */
+    { color: '#722ed1', themeColor: 'saucePurple' }
+  ]);
+
+  const { $storage } = useGlobal();
+  const dataTheme = ref<boolean>($storage?.layout?.darkMode);
+  const overallStyle = ref<string>($storage?.layout?.overallStyle);
+  const body = document.documentElement as HTMLElement;
+
+  function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
+    const targetEl = target || document.body;
+    let { className } = targetEl;
+    className = className.replace(clsName, '').trim();
+    targetEl.className = flag ? `${className} ${clsName}` : className;
+  }
+
+  /** 设置导航主题色 */
+  function setLayoutThemeColor(theme = getConfig().Theme ?? 'default') {
+    layoutTheme.value.theme = theme;
+    document.documentElement.setAttribute('data-theme', theme);
+    // 清空class
+    document.documentElement.className = '';
+    document.documentElement.classList.add(`layout-theme-${theme}`);
+    $storage.layout = {
+      layout: layout.value,
+      theme,
+      darkMode: dataTheme.value,
+      sidebarStatus: $storage.layout?.sidebarStatus,
+      epThemeColor: $storage.layout?.epThemeColor,
+      overallStyle: overallStyle.value
+    };
+
+    if (theme === 'default' || theme === 'light') {
+      setEpThemeColor(getConfig().EpThemeColor || '#409EFF');
+    } else {
+      const colors = themeColors.value.find(item => item.themeColor === theme);
+
+      setEpThemeColor(colors.color);
+    }
+  }
+
+  function setPropertyPrimary(mode: string, i: number, color: string) {
+    document.documentElement.style.setProperty(
+      `--el-color-primary-${mode}-${i}`,
+      dataTheme.value ? darken(color, i / 10) : lighten(color, i / 10)
+    );
+  }
+
+  /** 设置 `element-plus` 主题色 */
+  const setEpThemeColor = (color: string) => {
+    useEpThemeStoreHook().setEpThemeColor(color);
+    document.documentElement.style.setProperty('--el-color-primary', color);
+    for (let i = 1; i <= 2; i++) {
+      setPropertyPrimary('dark', i, color);
+    }
+    for (let i = 1; i <= 9; i++) {
+      setPropertyPrimary('light', i, color);
+    }
+  };
+
+  /** 浅色、深色整体风格切换 */
+  function dataThemeChange(overall?: string) {
+    /* 如果当前是light夜间主题，默认切换到default主题 */
+    overallStyle.value = overall;
+    if (useEpThemeStoreHook().epTheme === 'light' && dataTheme.value) {
+      setLayoutThemeColor('default');
+    } else {
+      setLayoutThemeColor(useEpThemeStoreHook().epTheme);
+    }
+    setTheme(!dataTheme.value ? 'light' : 'dark');
+    if (dataTheme.value) {
+      document.documentElement.classList.add('dark');
+      document.documentElement.classList.remove('default');
+    } else {
+      document.documentElement.classList.add('default');
+      document.documentElement.classList.remove('dark');
+    }
+  }
+
+  function onReset() {
+    cookies.remove(kCKTOKEN);
+    cookies.remove(kTOKEN);
+    cookies.remove(kLOGINER);
+    storageLocal.clear();
+    storageSession.clear();
+    const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
+    useAppStoreHook().setLayout(Layout);
+    setEpThemeColor(EpThemeColor);
+    useMultiTagsStoreHook().multiTagsCacheChange(MultiTagsCache);
+    toggleClass(Grey, 'html-grey', document.querySelector('html'));
+    toggleClass(Weak, 'html-weakness', document.querySelector('html'));
+    router.push('/login');
+    useMultiTagsStoreHook().handleTags('equal', [...routerArrays]);
+    resetRouter();
+  }
+
+  return {
+    body,
+    overallStyle,
+    dataTheme,
+    layoutTheme,
+    themeColors,
+    onReset,
+    toggleClass,
+    dataThemeChange,
+    setEpThemeColor,
+    setLayoutThemeColor
+  };
+}

package/src/layout/hooks/useLayout.ts

@@ -0,0 +1,65 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-08-30 10:31:26
+ * @LastEditors: wei.li
+ * @LastEditTime: 2024-07-02 14:31:54
+ * @Description: file content
+ */
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { routerArrays } from '../types';
+import { useGlobal } from '@utogether/utils';
+import { useMultiTagsStore } from '../../store/modules/multiTags';
+
+export function useLayout() {
+  const { $storage, $config } = useGlobal();
+
+  const initStorage = () => {
+    /** 路由 */
+    if (useMultiTagsStore().multiTagsCache && (!$storage.tags || $storage.tags.length === 0)) {
+      $storage.tags = routerArrays;
+    }
+    /** 国际化 */
+    if (!$storage?.locale) {
+      // $storage.locale = { locale: $config?.Locale ?? 'zh' };
+      useI18n().locale.value = $config?.Locale ?? 'zh';
+    }
+    /** 导航 */
+    if ($storage && !$storage?.layout) {
+      $storage.layout = {
+        layout: $config?.Layout ?? 'vertical',
+        theme: $config?.Theme ?? 'default',
+        darkMode: $config?.DarkMode ?? false,
+        sidebarStatus: $config?.SidebarStatus ?? true,
+        epThemeColor: $config?.EpThemeColor ?? '#409EFF',
+        overallStyle: $config?.OverallStyle ?? 'light'
+      };
+    }
+    /** 灰色模式、色弱模式、隐藏标签页 */
+    if ($storage && !$storage?.configure) {
+      $storage.configure = {
+        grey: $config?.Grey ?? false,
+        weak: $config?.Weak ?? false,
+        hideTabs: $config?.HideTabs ?? false,
+        showLogo: $config?.ShowLogo ?? true,
+        showModel: $config?.ShowModel ?? 'smart',
+        multiTagsCache: $config?.MultiTagsCache ?? false
+      };
+    }
+  };
+
+  /** 清空缓存后从serverConfig.json读取默认配置并赋值到storage中 */
+  const layout = computed(() => {
+    return $storage?.layout.layout;
+  });
+
+  const layoutTheme = computed(() => {
+    return $storage?.layout;
+  });
+
+  return {
+    layout,
+    layoutTheme,
+    initStorage
+  };
+}

package/src/layout/hooks/useNav.ts

@@ -0,0 +1,173 @@
+/*
+ * @Author: wei.li
+ * @Date: 2023-04-18 15:44:40
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-16 15:49:31
+ * @Description: file content
+ */
+import { computed, type CSSProperties } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useRouter } from 'vue-router';
+import { cookies, useGlobal, storageLocal } from '@utogether/utils';
+import { router, remainingPaths, resetRouter } from '../../router';
+import { emitter } from '../../utils/mitt';
+import { getEnv } from '../../config';
+import { kTOKEN, kLOGINER, kCKTOKEN, kSYSCONFIG } from '../../contant';
+import { routerArrays } from '../types';
+// import { transformI18n } from '@/plugins/i18n';
+import { useAppStoreHook } from '../../store/modules/app';
+import { usePermissionStoreHook } from '../../store/modules/permission';
+import { useEpThemeStoreHook } from '../../store/modules/epTheme';
+import { useSystemStoreHook } from '../../store/modules/system';
+import { useMultiTagsStoreHook } from '../../store/modules/multiTags';
+
+const errorInfo = '当前路由配置不正确，请检查配置';
+
+export function useNav() {
+  const appHook = useAppStoreHook();
+  const routers = useRouter().options.routes;
+  const { wholeMenus } = storeToRefs(usePermissionStoreHook());
+
+  const getDivStyle = computed((): CSSProperties => {
+    return {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      overflow: 'hidden'
+    };
+  });
+
+  /** 设置国际化选中后的样式 */
+  const getDropdownItemStyle = computed(() => {
+    return (locale, t) => {
+      return {
+        background: locale === t ? useEpThemeStoreHook().epThemeColor : '',
+        color: locale === t ? '#f4f4f5' : '#000'
+      };
+    };
+  });
+
+  const getDropdownItemClass = computed(() => {
+    return (locale, t) => {
+      return locale === t ? '' : 'dark:hover:text-primary!';
+    };
+  });
+
+  /** 用户名 */
+  const userInfo = computed<IRecord>(() => {
+    return useSystemStoreHook().getUserInfo || {};
+  });
+  const avatarsStyle = computed(() => {
+    return userInfo.value ? { marginRight: '10px' } : '';
+  });
+
+  const isCollapse = computed(() => {
+    return !appHook.getSidebarStatus;
+  });
+
+  const device = computed(() => {
+    return appHook.getDevice;
+  });
+
+  const { $storage } = useGlobal();
+  const layout = computed(() => {
+    return $storage?.layout?.layout;
+  });
+
+  const title = computed(() => {
+    const sysConfig = storageLocal.getItem(kSYSCONFIG) || {};
+    return sysConfig?.title || 'U-DP';
+  });
+
+  /** 动态title */
+  function setDocumentTitle() {
+    document.title = getEnv().MODE !== 'staging' ? title.value : `${title.value}•测试`;
+  }
+
+  /** 退出登录 */
+  function logout() {
+    useMultiTagsStoreHook().handleTags('equal', [...routerArrays]);
+    cookies.remove(kCKTOKEN);
+    cookies.remove(kTOKEN);
+    cookies.remove(kLOGINER);
+    usePermissionStoreHook().setWholeMenus([]);
+    // 关闭全部标签页, 防止缓存了tags，又用另一个账号登录
+    useMultiTagsStoreHook().handleTags('splice', '', {
+      startIndex: 1,
+      length: useMultiTagsStoreHook()?.multiTags?.length
+    });
+    usePermissionStoreHook().clearAllCachePage();
+    resetRouter();
+    router.push('/login');
+  }
+
+  function backHome() {
+    router.push('/welcome');
+  }
+
+  function onPanel() {
+    emitter.emit('openPanel');
+  }
+
+  function toggleSideBar() {
+    appHook.toggleSideBar();
+  }
+
+  function handleResize(menuRef) {
+    menuRef?.handleResize();
+  }
+
+  function resolvePath(route) {
+    if (!route.children) return console.error(errorInfo);
+    const httpReg = /^http(s?):\/\//;
+    const routeChildPath = route.children[0]?.path;
+    if (httpReg.test(routeChildPath)) {
+      return route.path + '/' + routeChildPath;
+    } else {
+      return routeChildPath;
+    }
+  }
+  function menuSelect(indexPath: string) {
+    if (wholeMenus.value.length === 0 || isRemaining(indexPath)) return;
+    emitter.emit('changLayoutRoute', indexPath);
+  }
+
+  /** 判断路径是否参与菜单 */
+  function isRemaining(path: string) {
+    return remainingPaths.includes(path);
+  }
+
+  function passwordItems() {
+    const itemRender = { name: '$input', props: { type: 'password' } };
+    return [
+      { field: 'oldUserPwd', title: 'message.udp.oldPwd', required: true, itemRender },
+      { field: 'userPwd', title: 'message.udp.newPwd', required: true, itemRender },
+      { field: 'confirmPwd', title: 'message.udp.confirmPwd', required: true, itemRender }
+    ];
+  }
+
+  return {
+    title,
+    device,
+    layout,
+    logout,
+    routers,
+    $storage,
+    backHome,
+    onPanel,
+    getDivStyle,
+    setDocumentTitle,
+    toggleSideBar,
+    menuSelect,
+    handleResize,
+    resolvePath,
+    isCollapse,
+    appHook,
+    userInfo,
+    avatarsStyle,
+    getDropdownItemStyle,
+    getDropdownItemClass,
+    passwordItems
+  };
+}

package/src/layout/hooks/useTag.ts

@@ -0,0 +1,233 @@
+import {
+  ref,
+  unref,
+  watch,
+  computed,
+  reactive,
+  onMounted,
+  type CSSProperties,
+  getCurrentInstance
+} from 'vue';
+import type { tagsViewsType } from '../types';
+import { isEqual, isBoolean } from 'xe-utils';
+import { useEventListener } from '@vueuse/core';
+import { useRoute, useRouter } from 'vue-router';
+import { storageLocal, toggleClass, hasClass } from '@utogether/utils';
+import { transformI18n } from '../../plugins/i18n';
+import { useSettingStoreHook } from '../../store/modules/settings';
+import { responsiveStorageNameSpace } from '../../config';
+import { useMultiTagsStoreHook } from '../../store/modules/multiTags';
+
+export function useTags() {
+  const route = useRoute();
+  const router = useRouter();
+  const instance = getCurrentInstance();
+  const SuSetting = useSettingStoreHook();
+
+  const buttonTop = ref(0);
+  const buttonLeft = ref(0);
+  const translateX = ref(0);
+  const visible = ref(false);
+  const activeIndex = ref(-1);
+  // 当前右键选中的路由信息
+  const currentSelect = ref({});
+
+  /** 显示模式，默认灵动模式 */
+  const showModel = ref(
+    storageLocal.getItem(`${responsiveStorageNameSpace()}configure`)?.showModel || 'smart'
+  );
+  /** 是否隐藏标签页，默认显示 */
+  const showTags =
+    ref(storageLocal.getItem(`${responsiveStorageNameSpace()}configure`)?.hideTabs) ?? ref('false');
+  const multiTags: any = computed(() => {
+    return useMultiTagsStoreHook().multiTags;
+  });
+
+  const tagsViews = reactive<Array<tagsViewsType>>([
+    {
+      icon: 'refresh-right',
+      text: 'message.udp.reload',
+      divided: false,
+      disabled: false,
+      show: true
+    },
+    {
+      icon: 'close',
+      text: 'message.udp.closeCurrentTab',
+      divided: false,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: 'ri:text-direction-r',
+      text: 'message.udp.closeLeftTabs',
+      divided: true,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: 'ri:text-direction-l',
+      text: 'message.udp.closeRightTabs',
+      divided: false,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: 'ri:text-spacing',
+      text: 'message.udp.closeOtherTabs',
+      divided: true,
+      disabled: multiTags.value.length > 2 ? false : true,
+      show: true
+    },
+    {
+      icon: 'ri:subtract-line',
+      text: 'message.udp.closeAllTabs',
+      divided: false,
+      disabled: multiTags.value.length > 1 ? false : true,
+      show: true
+    },
+    {
+      icon: 'ri:fullscreen-fill',
+      text: 'message.udp.wholeFullScreen',
+      divided: true,
+      disabled: false,
+      show: true
+    },
+    {
+      icon: 'ri:fullscreen-fill',
+      text: 'message.udp.contentFullScreen',
+      divided: false,
+      disabled: false,
+      show: true
+    }
+  ]);
+
+  function conditionHandle(item, previous, next) {
+    if (isBoolean(route?.meta?.showLink) && route?.meta?.showLink === false) {
+      if (Object.keys(route.query).length > 0) {
+        return isEqual(route.query, item.query) ? previous : next;
+      } else {
+        return isEqual(route.params, item.params) ? previous : next;
+      }
+    } else {
+      return route.path === item.path ? previous : next;
+    }
+  }
+
+  const isFixedTag = computed(() => {
+    return item => {
+      return isBoolean(item?.meta?.fixedTag) && item?.meta?.fixedTag === true;
+    };
+  });
+
+  const iconIsActive = computed(() => {
+    return (item, index) => {
+      if (index === 0) return;
+      return conditionHandle(item, true, false);
+    };
+  });
+
+  const linkIsActive = computed(() => {
+    return item => {
+      return conditionHandle(item, 'is-active', '');
+    };
+  });
+
+  const scheduleIsActive = computed(() => {
+    return item => {
+      return conditionHandle(item, 'schedule-active', '');
+    };
+  });
+
+  const getTabStyle = computed((): CSSProperties => {
+    return {
+      transform: `translateX(${translateX.value}px)`
+    };
+  });
+
+  const getContextMenuStyle = computed((): CSSProperties => {
+    return { left: buttonLeft.value + 'px', top: buttonTop.value + 'px' };
+  });
+
+  const closeMenu = () => {
+    visible.value = false;
+  };
+
+  /** 鼠标移入添加激活样式 */
+  function onMouseenter(index) {
+    if (index) activeIndex.value = index;
+    if (unref(showModel) === 'smart') {
+      if (hasClass(instance.refs['schedule' + index][0], 'schedule-active')) return;
+      toggleClass(true, 'schedule-in', instance.refs['schedule' + index][0]);
+      toggleClass(false, 'schedule-out', instance.refs['schedule' + index][0]);
+    } else {
+      if (hasClass(instance.refs['dynamic' + index][0], 'is-active')) return;
+      toggleClass(true, 'card-in', instance.refs['dynamic' + index][0]);
+      toggleClass(false, 'card-out', instance.refs['dynamic' + index][0]);
+    }
+  }
+
+  /** 鼠标移出恢复默认样式 */
+  function onMouseleave(index) {
+    activeIndex.value = -1;
+    if (unref(showModel) === 'smart') {
+      if (hasClass(instance.refs['schedule' + index][0], 'schedule-active')) return;
+      toggleClass(false, 'schedule-in', instance.refs['schedule' + index][0]);
+      toggleClass(true, 'schedule-out', instance.refs['schedule' + index][0]);
+    } else {
+      if (hasClass(instance.refs['dynamic' + index][0], 'is-active')) return;
+      toggleClass(false, 'card-in', instance.refs['dynamic' + index][0]);
+      toggleClass(true, 'card-out', instance.refs['dynamic' + index][0]);
+    }
+  }
+
+  function onContentFullScreen() {
+    SuSetting.hiddenSideBar
+      ? SuSetting.changeSetting({ key: 'hiddenSideBar', value: false })
+      : SuSetting.changeSetting({ key: 'hiddenSideBar', value: true });
+  }
+
+  onMounted(() => {
+    if (!showModel.value) {
+      const configure = storageLocal.getItem(`${responsiveStorageNameSpace()}configure`);
+      configure.showModel = 'card';
+      storageLocal.setItem(`${responsiveStorageNameSpace()}configure`, configure);
+    }
+  });
+
+  watch(
+    () => visible.value,
+    () => {
+      useEventListener(document, 'click', closeMenu);
+    }
+  );
+
+  return {
+    route,
+    router,
+    visible,
+    showTags,
+    instance,
+    multiTags,
+    showModel,
+    tagsViews,
+    buttonTop,
+    buttonLeft,
+    translateX,
+    isFixedTag,
+    SuSetting,
+    activeIndex,
+    getTabStyle,
+    iconIsActive,
+    linkIsActive,
+    currentSelect,
+    scheduleIsActive,
+    getContextMenuStyle,
+    closeMenu,
+    onMounted,
+    onMouseenter,
+    onMouseleave,
+    transformI18n,
+    onContentFullScreen
+  };
+}

package/src/layout/hooks/useTranslationLang.ts

@@ -0,0 +1,51 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-08-30 12:01:43
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2024-06-27 10:22:29
+ * @Description: file content
+ */
+import { VxeUI } from 'vxe-table';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { watch, onBeforeMount, type Ref } from 'vue';
+import { useNav } from './useNav';
+
+export function useTranslationLang(ref?: Ref) {
+  const { $storage, setDocumentTitle, handleResize } = useNav();
+  const { locale, t } = useI18n();
+  const route = useRoute();
+
+  function translationCh() {
+    $storage.locale = { locale: 'zh' };
+    locale.value = 'zh';
+    VxeUI.setLanguage('zh-CN');
+    ref && handleResize(ref.value);
+  }
+
+  function translationEn() {
+    $storage.locale = { locale: 'en' };
+    locale.value = 'en';
+    VxeUI.setLanguage('en-US');
+    ref && handleResize(ref.value);
+  }
+
+  watch(
+    () => locale.value,
+    () => {
+      setDocumentTitle();
+    }
+  );
+
+  onBeforeMount(() => {
+    locale.value = $storage.locale?.locale ?? 'zh';
+  });
+
+  return {
+    t,
+    route,
+    locale,
+    translationCh,
+    translationEn
+  };
+}