@utogether/udp-core 1.0.4 → 2.0.0-beta.3

package/src/layout/hooks/useTag.ts

@@ -1,227 +1,227 @@
-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) {
-    const currentName = route.name || '';
-    const itemName = item.name || '';
-    if (isBoolean(route?.meta?.showLink) && route?.meta?.showLink === false) {
-      if (Object.keys(route.query).length > 0) {
-        return currentName === itemName && isEqual(route.query, item.query) ? previous : next;
-      } else {
-        if (item.params) {
-          return currentName === itemName && isEqual(route.params, item.params) ? previous : next;
-        } else {
-          return currentName === itemName ? previous : next;
-        }
-      }
-    } else {
-      return currentName === itemName ? 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
-  };
-}
+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) {
+    const currentName = route.name || '';
+    const itemName = item.name || '';
+    if (isBoolean(route?.meta?.showLink) && route?.meta?.showLink === false) {
+      if (Object.keys(route.query).length > 0) {
+        return currentName === itemName && isEqual(route.query, item.query) ? previous : next;
+      } else {
+        if (item.params) {
+          return currentName === itemName && isEqual(route.params, item.params) ? previous : next;
+        } else {
+          return currentName === itemName ? previous : next;
+        }
+      }
+    } else {
+      return currentName === itemName ? 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
+  };
+}