cosey 0.1.4 → 0.2.0

package/request/useRequest.js

@@ -1,5 +1,5 @@
 import { useRouter, useRoute } from 'vue-router';
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 import { ElMessage } from 'element-plus';
 import { defaults, pick, get } from 'lodash-es';
 import { useUserStore } from '../store/user.js';
@@ -7,6 +7,7 @@ import { TOKEN_NAME, ROUTER_TO } from '../constant.js';
 import { Http } from './Http.js';
 import { useGlobalConfig } from '../config/index.js';
 import { usePersist } from '../hooks/usePersist.js';
+import { isObject } from '../utils/is.js';
 
 function useRequest(config = {}) {
   const persist = usePersist();
@@ -14,6 +15,27 @@ function useRequest(config = {}) {
   const router = useRouter();
   const route = useRoute();
   const { http: httpConfig, router: routerConfig } = useGlobalConfig();
+  const handleError = (resData) => {
+    const httpPath = httpConfig.path;
+    const code = get(resData, httpPath.code);
+    const message = get(resData, httpPath.message) || "Error";
+    const data = get(resData, httpPath.data);
+    if (code !== httpConfig.code.success) {
+      ElMessage.error({
+        message,
+        duration: httpConfig.errorDuration
+      });
+      if (code === httpConfig.code.forbidden) {
+        router.push(routerConfig.homePath);
+      } else if (code === httpConfig.code.unauthorized) {
+        if (persist.get(TOKEN_NAME)) {
+          userStore.logout(persist.get(ROUTER_TO) || route.fullPath);
+        }
+      }
+      return Promise.reject(new Error(message));
+    }
+    return data;
+  };
   const createAxios = () => {
     const axiosIns = axios.create(
       defaults(config, pick(httpConfig, ["baseURL", "timeout", "headers"]))
@@ -38,32 +60,18 @@ function useRequest(config = {}) {
     axiosIns.interceptors.response.use(
       (response) => {
         const { data: resData } = response;
-        const httpPath = httpConfig.path;
-        const code = get(resData, httpPath.code);
-        const message = get(resData, httpPath.message) || "Error";
-        const data = get(resData, httpPath.data);
-        if (code !== httpConfig.code.success) {
+        return handleError(resData);
+      },
+      (error) => {
+        if (error instanceof AxiosError && error.response && isObject(error.response.data) && get(error.response.data, httpConfig.path.code)) {
+          return handleError(error.response.data);
+        } else {
           ElMessage.error({
-            message,
+            message: error.message,
             duration: httpConfig.errorDuration
           });
-          if (code === httpConfig.code.forbidden) {
-            router.push(routerConfig.homePath);
-          } else if (code === httpConfig.code.unauthorized) {
-            if (persist.get(TOKEN_NAME)) {
-              userStore.logout(persist.get(ROUTER_TO) || route.fullPath);
-            }
-          }
-          return Promise.reject(new Error(message));
+          return Promise.reject(error);
         }
-        return data;
-      },
-      (error) => {
-        ElMessage.error({
-          message: error.message,
-          duration: httpConfig.errorDuration
-        });
-        return Promise.reject(error);
       }
     );
     return axiosIns;

package/store/index.d.ts

@@ -1,5 +1,5 @@
 import { useLayoutStore } from './layout';
 import { useUserStore } from './user';
 import { useAppearanceStore } from './appearance';
-export declare function createStore(): import("pinia").Pinia;
+export declare function createPiniaStore(): import("pinia").Pinia;
 export { useUserStore, useAppearanceStore, useLayoutStore };

package/store/index.js

@@ -2,9 +2,12 @@ import { createPinia } from 'pinia';
 export { useLayoutStore } from './layout.js';
 export { useUserStore } from './user.js';
 export { useAppearanceStore } from './appearance.js';
+import { piniaPluginPersist } from './plugin.js';
 
-function createStore() {
-  return createPinia();
+function createPiniaStore() {
+  const pinia = createPinia();
+  pinia.use(piniaPluginPersist);
+  return pinia;
 }
 
-export { createStore };
+export { createPiniaStore };

package/store/layout.js

@@ -5,206 +5,224 @@ import { useGlobalConfig } from '../config/index.js';
 import { ref, watch, computed, nextTick } from 'vue';
 import { useWindowResize } from '../hooks/useWindowResize.js';
 
-const useLayoutStore = defineStore("cosey-layout", () => {
-  const { layout: layoutConfig } = useGlobalConfig();
-  const route = useRoute();
-  const sidebarVisible = ref(layoutConfig.sidebarVisible);
-  const collapse = ref(layoutConfig.collapse);
-  const isMobile = ref(false);
-  watch(
-    isMobile,
-    () => {
-      sidebarVisible.value = !isMobile.value;
-    },
-    {
-      immediate: true
-    }
-  );
-  const onResize = () => {
-    isMobile.value = window.innerWidth <= layoutConfig.breakpoint;
-  };
-  onResize();
-  useWindowResize(onResize);
-  const menuType = ref(layoutConfig.menuType);
-  const includeHorizontal = computed(
-    () => ["horizontal", "horizontal-vertical", "horizontal-biserial"].includes(menuType.value)
-  );
-  const isVertical = computed(() => menuType.value === "vertical");
-  const isBiserial = computed(() => menuType.value === "biserial");
-  const isHorizontal = computed(() => menuType.value === "horizontal");
-  const isHorizontalVertical = computed(() => menuType.value === "horizontal-vertical");
-  const isHorizontalBiserial = computed(() => menuType.value === "horizontal-biserial");
-  const menus = ref([]);
-  const menusMap = computed(() => getMenusMap(menus.value));
-  const firstLevelMenus = menus;
-  const firstLevelActive = ref("");
-  const secondLevelMenus = computed(() => {
-    return firstLevelMenus.value.find((item) => {
-      return item.name === firstLevelActive.value;
-    })?.children || [];
-  });
-  const secondLevelActive = ref("");
-  const thirdLevelMenus = computed(() => {
-    return secondLevelMenus.value.find((item) => {
-      return item.name === secondLevelActive.value;
-    })?.children || [];
-  });
-  const topMenus = firstLevelMenus;
-  const topActive = firstLevelActive;
-  const snugMenus = computed(() => {
-    if (isMobile.value) {
-      return [];
-    }
-    return menuType.value === "biserial" ? firstLevelMenus.value : menuType.value === "horizontal-biserial" ? secondLevelMenus.value : [];
-  });
-  const snugActive = computed({
-    get() {
-      return menuType.value === "biserial" ? firstLevelActive.value : menuType.value === "horizontal-biserial" ? secondLevelActive.value : "";
-    },
-    set(name) {
-      if (menuType.value === "biserial") {
-        firstLevelActive.value = name;
-      } else if (menuType.value === "horizontal-biserial") {
-        secondLevelActive.value = name;
+const useLayoutStore = defineStore(
+  "cosey-layout",
+  () => {
+    const { layout: layoutConfig } = useGlobalConfig();
+    const route = useRoute();
+    const sidebarVisible = ref(layoutConfig.sidebarVisible);
+    const collapse = ref(layoutConfig.collapse);
+    const isMobile = ref(false);
+    watch(
+      isMobile,
+      () => {
+        sidebarVisible.value = !isMobile.value;
+      },
+      {
+        immediate: true
       }
-    }
-  });
-  const defaultMenus = computed(() => {
-    if (isMobile.value) {
-      return firstLevelMenus.value;
-    }
-    return menuType.value === "biserial" || menuType.value === "horizontal-vertical" ? secondLevelMenus.value : menuType.value === "horizontal-biserial" ? thirdLevelMenus.value : firstLevelMenus.value;
-  });
-  watch([() => route.name, menus], () => {
-    const node = menusMap.value[route.name];
-    if (node) {
-      const nodes = getBreadcrumbRoutes(node);
-      topActive.value = nodes[0].name;
-      if (menuType.value === "biserial") {
-        snugActive.value = nodes[0].name;
-      } else if (menuType.value === "horizontal-biserial") {
-        snugActive.value = nodes[1]?.name;
+    );
+    const onResize = () => {
+      isMobile.value = window.innerWidth <= layoutConfig.breakpoint;
+    };
+    onResize();
+    useWindowResize(onResize);
+    const menuType = ref(layoutConfig.menuType);
+    const includeHorizontal = computed(
+      () => ["horizontal", "horizontal-vertical", "horizontal-biserial"].includes(menuType.value)
+    );
+    const isVertical = computed(() => menuType.value === "vertical");
+    const isBiserial = computed(() => menuType.value === "biserial");
+    const isHorizontal = computed(() => menuType.value === "horizontal");
+    const isHorizontalVertical = computed(() => menuType.value === "horizontal-vertical");
+    const isHorizontalBiserial = computed(() => menuType.value === "horizontal-biserial");
+    const menus = ref([]);
+    const menusMap = computed(() => getMenusMap(menus.value));
+    const firstLevelMenus = menus;
+    const firstLevelActive = ref("");
+    const secondLevelMenus = computed(() => {
+      return firstLevelMenus.value.find((item) => {
+        return item.name === firstLevelActive.value;
+      })?.children || [];
+    });
+    const secondLevelActive = ref("");
+    const thirdLevelMenus = computed(() => {
+      return secondLevelMenus.value.find((item) => {
+        return item.name === secondLevelActive.value;
+      })?.children || [];
+    });
+    const topMenus = firstLevelMenus;
+    const topActive = firstLevelActive;
+    const snugMenus = computed(() => {
+      if (isMobile.value) {
+        return [];
       }
-    }
-  });
-  const tabbarVisible = ref(layoutConfig.tabbarVisible);
-  const activeTab = ref("");
-  const refreshing = ref(false);
-  const tabList = ref([]);
-  const iframeTabList = computed(() => {
-    return tabList.value.filter((item) => item.meta.iframeSrc);
-  });
-  const keepAliveInclude = ref([]);
-  const keepAliveExclude = computed(() => {
-    return layoutConfig.keepAlive ? tabList.value.filter((item) => !item.meta.keepAlive).map((item) => item.name) : [];
-  });
-  const keepAlive = computed(() => {
-    return keepAliveInclude.value.filter((name) => {
-      return !keepAliveExclude.value.includes(name);
+      return menuType.value === "biserial" ? firstLevelMenus.value : menuType.value === "horizontal-biserial" ? secondLevelMenus.value : [];
     });
-  });
-  const updateKeepAliveInclude = () => {
-    keepAliveInclude.value = layoutConfig.keepAlive ? tabList.value.map((item) => item.name) : [];
-  };
-  watch(
-    tabList,
-    () => {
-      updateKeepAliveInclude();
-    },
-    {
-      immediate: true,
-      deep: true
-    }
-  );
-  const reload = () => {
-    refreshing.value = true;
-    if (keepAliveInclude.value.includes(route.name)) {
-      keepAliveInclude.value = keepAliveInclude.value.filter((item) => item !== route.name);
-    }
-    nextTick(() => {
-      refreshing.value = false;
-      keepAliveInclude.value = [...keepAliveInclude.value, route.name];
+    const snugActive = computed({
+      get() {
+        return menuType.value === "biserial" ? firstLevelActive.value : menuType.value === "horizontal-biserial" ? secondLevelActive.value : "";
+      },
+      set(name) {
+        if (menuType.value === "biserial") {
+          firstLevelActive.value = name;
+        } else if (menuType.value === "horizontal-biserial") {
+          secondLevelActive.value = name;
+        }
+      }
     });
-  };
-  const asideWidth = ref(layoutConfig.asideWidth);
-  const collapsedAsideWidth = ref(layoutConfig.collapsedAsideWidth);
-  const snugAsideWidth = ref(layoutConfig.snugAsideWidth);
-  const sidebarWidth = computed(() => {
-    if (isMobile.value) {
-      return 0;
-    } else {
-      if (!sidebarVisible.value) {
-        return 0;
+    const defaultMenus = computed(() => {
+      if (isMobile.value) {
+        return firstLevelMenus.value;
+      }
+      return menuType.value === "biserial" || menuType.value === "horizontal-vertical" ? secondLevelMenus.value : menuType.value === "horizontal-biserial" ? thirdLevelMenus.value : firstLevelMenus.value;
+    });
+    watch([() => route.name, menus], () => {
+      const node = menusMap.value[route.name];
+      if (node) {
+        const nodes = getBreadcrumbRoutes(node);
+        topActive.value = nodes[0].name;
+        if (menuType.value === "biserial") {
+          snugActive.value = nodes[0].name;
+        } else if (menuType.value === "horizontal-biserial") {
+          snugActive.value = nodes[1]?.name;
+        }
+      }
+    });
+    const tabbarVisible = ref(layoutConfig.tabbarVisible);
+    const activeTab = ref("");
+    const refreshing = ref(false);
+    const tabList = ref([]);
+    const iframeTabList = computed(() => {
+      return tabList.value.filter((item) => item.meta.iframeSrc);
+    });
+    const keepAliveInclude = ref([]);
+    const keepAliveExclude = computed(() => {
+      return layoutConfig.keepAlive ? tabList.value.filter((item) => !item.meta.keepAlive).map((item) => item.name) : [];
+    });
+    const keepAlive = computed(() => {
+      return keepAliveInclude.value.filter((name) => {
+        return !keepAliveExclude.value.includes(name);
+      });
+    });
+    const updateKeepAliveInclude = () => {
+      keepAliveInclude.value = layoutConfig.keepAlive ? tabList.value.map((item) => item.name) : [];
+    };
+    watch(
+      tabList,
+      () => {
+        updateKeepAliveInclude();
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    const reload = () => {
+      refreshing.value = true;
+      if (keepAliveInclude.value.includes(route.name)) {
+        keepAliveInclude.value = keepAliveInclude.value.filter((item) => item !== route.name);
       }
-      switch (menuType.value) {
-        case "horizontal":
+      nextTick(() => {
+        refreshing.value = false;
+        keepAliveInclude.value = [...keepAliveInclude.value, route.name];
+      });
+    };
+    const asideWidth = ref(layoutConfig.asideWidth);
+    const collapsedAsideWidth = ref(layoutConfig.collapsedAsideWidth);
+    const snugAsideWidth = ref(layoutConfig.snugAsideWidth);
+    const sidebarWidth = computed(() => {
+      if (isMobile.value) {
+        return 0;
+      } else {
+        if (!sidebarVisible.value) {
           return 0;
-        case "vertical":
-        case "horizontal-vertical":
-          if (defaultMenus.value.length === 0) {
+        }
+        switch (menuType.value) {
+          case "horizontal":
             return 0;
+          case "vertical":
+          case "horizontal-vertical":
+            if (defaultMenus.value.length === 0) {
+              return 0;
+            }
+            if (collapse.value) {
+              return collapsedAsideWidth.value;
+            }
+            return asideWidth.value;
+          case "biserial":
+          case "horizontal-biserial": {
+            const snugAsideW = snugMenus.value.length === 0 ? 0 : snugAsideWidth.value;
+            const asideW = defaultMenus.value.length === 0 ? 0 : collapse.value ? collapsedAsideWidth.value : asideWidth.value;
+            return snugAsideW + asideW;
           }
-          if (collapse.value) {
-            return collapsedAsideWidth.value;
-          }
-          return asideWidth.value;
-        case "biserial":
-        case "horizontal-biserial": {
-          const snugAsideW = snugMenus.value.length === 0 ? 0 : snugAsideWidth.value;
-          const asideW = defaultMenus.value.length === 0 ? 0 : collapse.value ? collapsedAsideWidth.value : asideWidth.value;
-          return snugAsideW + asideW;
+          default:
+            return 0;
         }
-        default:
-          return 0;
       }
+    });
+    const topbarHeight = ref(layoutConfig.topbarHeight);
+    const tabbarHeight = ref(layoutConfig.tabbarHeight);
+    const headerHeight = computed(() => {
+      return topbarHeight.value + (tabbarVisible.value ? tabbarHeight.value : 0);
+    });
+    return {
+      sidebarVisible,
+      collapse,
+      isMobile,
+      menuType,
+      includeHorizontal,
+      isVertical,
+      isBiserial,
+      isHorizontal,
+      isHorizontalVertical,
+      isHorizontalBiserial,
+      menus,
+      menusMap,
+      firstLevelMenus,
+      firstLevelActive,
+      secondLevelMenus,
+      secondLevelActive,
+      thirdLevelMenus,
+      topMenus,
+      topActive,
+      snugMenus,
+      snugActive,
+      defaultMenus,
+      tabbarVisible,
+      activeTab,
+      refreshing,
+      tabList,
+      iframeTabList,
+      keepAliveInclude,
+      keepAliveExclude,
+      keepAlive,
+      updateKeepAliveInclude,
+      reload,
+      asideWidth,
+      collapsedAsideWidth,
+      snugAsideWidth,
+      sidebarWidth,
+      topbarHeight,
+      tabbarHeight,
+      headerHeight
+    };
+  },
+  {
+    persist: {
+      pick: [
+        "sidebarVisible",
+        "collapse",
+        "menuType",
+        "tabbarVisible",
+        "asideWidth",
+        "collapsedAsideWidth",
+        "snugAsideWidth",
+        "topbarHeight",
+        "tabbarHeight"
+      ]
     }
-  });
-  const topbarHeight = ref(layoutConfig.topbarHeight);
-  const tabbarHeight = ref(layoutConfig.tabbarHeight);
-  const headerHeight = computed(() => {
-    return topbarHeight.value + (tabbarVisible.value ? tabbarHeight.value : 0);
-  });
-  return {
-    sidebarVisible,
-    collapse,
-    isMobile,
-    menuType,
-    includeHorizontal,
-    isVertical,
-    isBiserial,
-    isHorizontal,
-    isHorizontalVertical,
-    isHorizontalBiserial,
-    menus,
-    menusMap,
-    firstLevelMenus,
-    firstLevelActive,
-    secondLevelMenus,
-    secondLevelActive,
-    thirdLevelMenus,
-    topMenus,
-    topActive,
-    snugMenus,
-    snugActive,
-    defaultMenus,
-    tabbarVisible,
-    activeTab,
-    refreshing,
-    tabList,
-    iframeTabList,
-    keepAliveInclude,
-    keepAliveExclude,
-    keepAlive,
-    updateKeepAliveInclude,
-    reload,
-    asideWidth,
-    collapsedAsideWidth,
-    snugAsideWidth,
-    sidebarWidth,
-    topbarHeight,
-    tabbarHeight,
-    headerHeight
-  };
-});
+  }
+);
 
 export { useLayoutStore };

package/store/plugin.d.ts

@@ -0,0 +1,9 @@
+import { type PiniaPluginContext } from 'pinia';
+declare module 'pinia' {
+    interface DefineStoreOptionsBase<S, Store> {
+        persist?: {
+            pick: (keyof S)[];
+        };
+    }
+}
+export declare function piniaPluginPersist(context: PiniaPluginContext): void;

package/store/plugin.js

@@ -0,0 +1,22 @@
+import { watch } from 'vue';
+import { usePersist } from '../hooks/usePersist.js';
+
+function piniaPluginPersist(context) {
+  const {
+    store,
+    options: { persist }
+  } = context;
+  const pickKeys = persist?.pick || [];
+  const persistIns = usePersist();
+  const persistKey = `Cosey:pinia:${store.$id}`;
+  const localData = persistIns.get(persistKey) || {};
+  store.$patch(localData);
+  watch(
+    pickKeys.map((key) => () => store[key]),
+    () => {
+      persistIns.set(persistKey, Object.fromEntries(pickKeys.map((key) => [key, store[key]])));
+    }
+  );
+}
+
+export { piniaPluginPersist };

package/store/user.d.ts

@@ -35,5 +35,5 @@ export declare const useUserStore: import("pinia").StoreDefinition<"cosey-user",
     setAuthorization: () => Promise<void | undefined>;
     addDynamicRoutes: () => Promise<void>;
     logout: (lastPath?: string) => Promise<void>;
-}, "login" | "getUserInfo" | "changePassword" | "logout" | "setAuthorization" | "addDynamicRoutes">>;
+}, "changePassword" | "login" | "logout" | "getUserInfo" | "setAuthorization" | "addDynamicRoutes">>;
 export {};

package/utils/css.d.ts

@@ -9,6 +9,10 @@ export declare function setStyle(el: HTMLElement, style: {
  * 获取元素当前计算的样式
  */
 export declare function getStyle(el: HTMLElement, prop: keyof CSSStyleDeclaration): string | number | (() => ArrayIterator<string>) | CSSRule | ((property: string) => string) | ((property: string) => string) | ((index: number) => string) | ((property: string) => string) | ((property: string, value: string | null, priority?: string) => void) | null;
+/**
+ *
+ */
+export declare function getDir(el?: HTMLElement | null): string;
 /**
  * 获取元素内容盒子宽度
  */

package/utils/css.js

@@ -9,8 +9,11 @@ function setStyle(el, style) {
 function getStyle(el, prop) {
   return window.getComputedStyle(el)[prop];
 }
+function getDir(el) {
+  return el && getStyle(el, "direction") || "ltr";
+}
 function getContextBoxWidth(el) {
-  return el.clientWidth - parseFloat(getStyle(el, "paddingLeft")) - parseFloat(getStyle(el, "paddingRight"));
+  return el.clientWidth - parseFloat(getStyle(el, "paddingInlineStart")) - parseFloat(getStyle(el, "paddingInlineEnd"));
 }
 function cssObjectToString(cssObject) {
   return Object.entries(cssObject).map(([selector, style]) => {
@@ -23,4 +26,4 @@ function addPxUnit(value) {
   return isNumber(value) ? value + "px" : value;
 }
 
-export { addPxUnit, cssObjectToString, getContextBoxWidth, getStyle, setStyle };
+export { addPxUnit, cssObjectToString, getContextBoxWidth, getDir, getStyle, setStyle };

package/utils/excel/bookFormats.js

@@ -3,35 +3,35 @@ const bookFormats = [
     type: "csv",
     ext: ".csv",
     sheets: "single",
-    label: "CSV (\u9017\u53F7\u5206\u9694)",
+    label: "co.export.csvLabel",
     mime: "text/csv"
   },
   {
     type: "xlsx",
     ext: ".xlsx",
     sheets: "multi",
-    label: "Microsoft Excel \u6587\u4EF6",
+    label: "co.export.xlsxLabel",
     mime: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
   },
   {
     type: "html",
     ext: ".html",
     sheets: "single",
-    label: "\u7F51\u9875\u6587\u4EF6",
+    label: "co.export.htmlLabel",
     mime: "text/html"
   },
   {
     type: "xml",
     ext: ".xml",
     sheets: "single",
-    label: "XML \u8868\u683C",
+    label: "co.export.xmlLabel",
     mime: "application/xml"
   },
   {
     type: "txt",
     ext: ".txt",
     sheets: "single",
-    label: "Unicode \u6587\u672C",
+    label: "co.export.txtLabel",
     mime: "text/plain"
   }
 ];

package/utils/excel/xlsx.js

@@ -39,11 +39,11 @@ async function wb2xlsx(wb, mime) {
     [
       `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>`,
       `<Properties xmlns="http://schemas.openxmlformats.org/officeDocument/2006/extended-properties" xmlns:vt="http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes">`,
-      `<Application>WPS \u8868\u683C</Application>`,
+      `<Application>WPS Table</Application>`,
       `<HeadingPairs>`,
       `<vt:vector size="2" baseType="variant">`,
       `<vt:variant>`,
-      `<vt:lpstr>\u5DE5\u4F5C\u8868</vt:lpstr>`,
+      `<vt:lpstr>Worksheet</vt:lpstr>`,
       `</vt:variant>`,
       `<vt:variant>`,
       `<vt:i4>${wb.sheets.length}</vt:i4>`,

package/utils/index.js

@@ -2,7 +2,7 @@ export { arrayMove, isShallowEqual, toArray } from './array.js';
 export { getCssVarProp } from './bem.js';
 export { getControlKey } from './browser.js';
 export { getLabelByValue, getTreeLabelByValue } from './collection.js';
-export { addPxUnit, cssObjectToString, getContextBoxWidth, getStyle, setStyle } from './css.js';
+export { addPxUnit, cssObjectToString, getContextBoxWidth, getDir, getStyle, setStyle } from './css.js';
 export { DATE_FORMAT, DATE_TIME_FORMAT, MONTH_FORMAT, TIME_FORMAT, YEAR_FORMAT, formatAsBasicDateTime, formatAsDate, formatAsDateTime, getDayjs } from './date.js';
 export { exportExcel } from './excel/index.js';
 export { chooseFiles, getFileType, readAsArrayBuffer, readAsDataURL } from './file.js';