@kengic/vue 0.30.1-beta.82 → 0.30.1-beta.85

package/project/src/settings/projectSetting.ts

@@ -0,0 +1,194 @@
+// ! 改动后需要清空浏览器缓存
+import { ProjectConfig } from '../../types';
+import {
+    CacheTypeEnum,
+    ContentEnum,
+    MenuModeEnum,
+    MenuTypeEnum,
+    MixSidebarTriggerEnum,
+    PermissionModeEnum,
+    RouterTransitionEnum,
+    SessionTimeoutProcessingEnum,
+    SettingButtonPositionEnum,
+    TabsThemeEnum,
+    ThemeEnum,
+    TriggerEnum,
+} from '../enums';
+import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from './designSetting';
+
+const projectSetting: ProjectConfig = {
+    // 是否显示SettingButton
+    showSettingButton: false,
+
+    // 是否显示主题切换按钮
+    showDarkModeToggle: false,
+
+    // 设置按钮位置 可选项
+    // SettingButtonPositionEnum.AUTO: 自动选择
+    // SettingButtonPositionEnum.HEADER: 位于头部
+    // SettingButtonPositionEnum.FIXED: 固定在右侧
+    settingButtonPosition: SettingButtonPositionEnum.AUTO,
+
+    // 权限模式,默认前端角色权限模式
+    // ROUTE_MAPPING: 前端模式（菜单由路由生成，默认）
+    // ROLE：前端模式（菜单路由分开）
+    // BACK：后台模式
+    permissionMode: PermissionModeEnum.BACK,
+
+    // 权限缓存存放位置。默认存放于localStorage
+    permissionCacheType: CacheTypeEnum.LOCAL,
+
+    // 会话超时处理方案
+    // SessionTimeoutProcessingEnum.ROUTE_JUMP: 路由跳转到登录页
+    // SessionTimeoutProcessingEnum.PAGE_COVERAGE: 生成登录弹窗，覆盖当前页面
+    sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
+
+    // 项目主题色
+    themeColor: '#1890FF',
+
+    // 网站灰色模式，用于可能悼念的日期开启
+    grayMode: false,
+
+    // 色弱模式
+    colorWeak: false,
+
+    // 是否取消菜单,顶部,多标签页显示, 用于可能内嵌在别的系统内
+    fullContent: false,
+
+    // 主题内容宽度
+    contentMode: ContentEnum.FULL,
+
+    // 是否显示logo
+    showLogo: true,
+
+    // 是否显示底部信息 copyright
+    showFooter: false,
+
+    // 头部配置
+    headerSetting: {
+        // 背景色
+        bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
+        // 固定头部
+        fixed: true,
+        // 是否显示顶部
+        show: true,
+        // 主题
+        theme: ThemeEnum.LIGHT,
+        // 开启锁屏功能
+        useLockPage: false,
+        // 显示全屏按钮
+        showFullScreen: false,
+        // 显示文档按钮
+        showDoc: false,
+        // 显示消息中心按钮
+        showNotice: true,
+        // 显示菜单搜索按钮
+        showSearch: true,
+    },
+
+    // 菜单配置
+    menuSetting: {
+        // 背景色
+        bgColor: SIDE_BAR_BG_COLOR_LIST[1],
+        // 是否固定住左侧菜单
+        fixed: true,
+        // 菜单折叠
+        collapsed: false,
+        // 折叠菜单时候是否显示菜单名
+        collapsedShowTitle: false,
+        // 是否可拖拽
+        // Only limited to the opening of the left menu, the mouse has a drag bar on the right side of the menu
+        canDrag: false,
+        // Whether to show no dom
+        show: true,
+        // Whether to show dom
+        hidden: false,
+        // 菜单宽度
+        menuWidth: 248,
+        // 菜单模式
+        mode: MenuModeEnum.INLINE,
+        // 菜单类型
+        type: MenuTypeEnum.SIDEBAR,
+        // 菜单主题
+        theme: ThemeEnum.DARK,
+        // 分割菜单
+        split: false,
+        // 顶部菜单布局
+        topMenuAlign: 'center',
+        // 折叠触发器的位置
+        trigger: TriggerEnum.HEADER,
+        // 手风琴模式，只展示一个菜单
+        accordion: true,
+        // 在路由切换的时候关闭左侧混合菜单展开菜单
+        closeMixSidebarOnChange: false,
+        // 左侧混合菜单模块切换触发方式 ‘click’ |'hover'
+        mixSideTrigger: MixSidebarTriggerEnum.CLICK,
+        // 是否固定左侧混合菜单
+        mixSideFixed: false,
+    },
+
+    // 多标签
+    multiTabsSetting: {
+        // 刷新后是否保留已经打开的标签页
+        cache: false,
+        // 开启
+        show: true,
+        // 是否可以拖拽
+        canDrag: true,
+        // 开启快速操作
+        showQuick: true,
+        // 是否显示刷新按钮
+        showRedo: true,
+        // 是否显示折叠按钮
+        showFold: false,
+        // 标签页样式
+        theme: TabsThemeEnum.CARD,
+    },
+
+    // 动画配置
+    transitionSetting: {
+        //  是否开启切换动画
+        // The disabled state will also disable pageLoadinng
+        enable: true,
+
+        // 动画名 Route basic switching animation
+        basicTransition: RouterTransitionEnum.FADE_SIDE,
+
+        // 是否打开页面切换loading
+        // Only open when enable=true
+        openPageLoading: true,
+
+        //是否打开页面切换顶部进度条
+        openNProgress: true,
+    },
+
+    // 是否开启KeepAlive缓存  开发时候最好关闭,不然每次都需要清除缓存
+    openKeepAlive: true,
+
+    // 自动锁屏时间，为0不锁屏。 单位分钟 默认1个小时
+    lockTime: 0,
+
+    // 显示面包屑
+    showBreadCrumb: false,
+
+    // 显示面包屑图标
+    showBreadCrumbIcon: true,
+
+    // 是否使用全局错误捕获
+    useErrorHandle: false,
+
+    // 是否开启回到顶部
+    useOpenBackTop: true,
+
+    // 是否可以嵌入iframe页面
+    canEmbedIFramePage: true,
+
+    // 切换界面的时候是否删除未关闭的message及notify
+    closeMessageOnSwitch: true,
+
+    // 切换界面的时候是否取消已经发送但是未响应的http请求。
+    // 如果开启,想对单独接口覆盖。可以在单独接口设置
+    removeAllHttpPending: false,
+};
+
+export { projectSetting };

package/project/src/store/modules/locale.ts

@@ -0,0 +1,49 @@
+import { ____DEBUG____ } from '@kengic/core.core';
+import { defineStore } from 'pinia';
+import { pinia } from '../../../../config';
+import { localeSetting } from '../../../../i18n/i18n.setup';
+import { LocaleSetting, LocaleType } from '../../../types';
+import { LOCALE_KEY } from '../../enums';
+import { createLocalStorage } from '../../utils/cache';
+
+const LS = createLocalStorage();
+
+const LSLocaleSetting = (LS.get(LOCALE_KEY) || localeSetting) as LocaleSetting;
+
+interface LocaleState {
+    localInfo: LocaleSetting;
+    pathTitleMap: Record<string, string>;
+}
+
+export const _useLocaleStore = defineStore({
+    id: 'app-locale',
+    state: (): LocaleState => ({
+        localInfo: LSLocaleSetting,
+        pathTitleMap: {},
+    }),
+    getters: {
+        getShowPicker(): boolean {
+            return !!this.localInfo?.showPicker;
+        },
+        getLocale(): LocaleType {
+            return this.localInfo?.locale ?? 'zh_CN';
+        },
+        getPathTitle: (state) => {
+            return (path: string) => state.pathTitleMap[path];
+        },
+    },
+    actions: {
+        setLocaleInfo(info: Partial<LocaleSetting>) {
+            ____DEBUG____(`useLocaleStore | setLocaleInfo().`, { info: info });
+            this.localInfo = { ...this.localInfo, ...info };
+            LS.set(LOCALE_KEY, this.localInfo);
+        },
+        setPathTitle(path: string, title: string) {
+            this.pathTitleMap[path] = title;
+        },
+    },
+});
+
+export function useLocaleStore() {
+    return _useLocaleStore(pinia);
+}

package/project/src/utils/auth/index.ts

@@ -0,0 +1,42 @@
+import { CacheTypeEnum, TENANT_ID, TOKEN_KEY } from '../../enums';
+import { projectSetting } from '../../settings';
+import { BasicKeys, Persistent } from '../cache/persistent';
+
+const { permissionCacheType } = projectSetting;
+const isLocal = permissionCacheType === CacheTypeEnum.LOCAL;
+
+/**
+ * 获取token
+ */
+export function getToken() {
+    return getAuthCache<string>(TOKEN_KEY);
+}
+
+/**
+ * 获取租户id
+ */
+export function getTenantId() {
+    return getAuthCache<string>(TENANT_ID);
+}
+
+export function getAuthCache<T>(key: BasicKeys) {
+    const fn = isLocal ? Persistent.getLocal : Persistent.getSession;
+    return fn(key) as T;
+}
+
+export function setAuthCache(key: BasicKeys, value: any) {
+    const fn = isLocal ? Persistent.setLocal : Persistent.setSession;
+    return fn(key, value, true);
+}
+
+/**
+ * 移除缓存中的某个属性
+ * @param key
+ * @update:移除缓存中的某个属性
+ * @updateBy:lsq
+ * @updateDate:2021-09-07
+ */
+export function removeAuthCache<T>(key: BasicKeys) {
+    const fn = isLocal ? Persistent.removeLocal : Persistent.removeSession;
+    return fn(key) as T;
+}

package/project/src/utils/bem.ts

@@ -0,0 +1,45 @@
+import { prefixCls } from '../settings';
+
+type Mod = string | { [key: string]: any };
+type Mods = Mod | Mod[];
+
+function genBem(name: string, mods?: Mods): string {
+    if (!mods) {
+        return '';
+    }
+
+    if (typeof mods === 'string') {
+        return ` ${name}--${mods}`;
+    }
+
+    if (Array.isArray(mods)) {
+        return (mods as any).reduce((ret: any, item: any) => ret + genBem(name, item), '');
+    }
+
+    return Object.keys(mods).reduce((ret, key) => ret + (mods[key] ? genBem(name, key) : ''), '');
+}
+
+/**
+ * bem helper
+ * b() // 'button'
+ * b('text') // 'button__text'
+ * b({ disabled }) // 'button button--disabled'
+ * b('text', { disabled }) // 'button__text button__text--disabled'
+ * b(['disabled', 'primary']) // 'button button--disabled button--primary'
+ */
+export function buildBEM(name: string) {
+    return (el?: Mods, mods?: Mods): Mods => {
+        if (el && typeof el !== 'string') {
+            mods = el;
+            el = '';
+        }
+
+        el = el ? `${name}__${el}` : name;
+
+        return `${el}${genBem(el, mods)}`;
+    };
+}
+
+export function createBEM(name: string) {
+    return [buildBEM(`${prefixCls}-${name}`)];
+}

package/project/src/utils/cache/index.ts

@@ -0,0 +1,31 @@
+import { DEFAULT_CACHE_TIME, enableStorageEncryption } from '../../settings';
+import { getStorageShortName } from '../env';
+import { create, CreateStorageParams } from './storageCache';
+
+export type Options = Partial<CreateStorageParams>;
+
+const createOptions = (storage: Storage, options: Options = {}): Options => {
+    return {
+        // No encryption in debug mode
+        hasEncrypt: enableStorageEncryption,
+        storage,
+        prefixKey: getStorageShortName(),
+        ...options,
+    };
+};
+
+export const WebStorage = create(createOptions(sessionStorage));
+
+export const createStorage = (storage: Storage = sessionStorage, options: Options = {}) => {
+    return create(createOptions(storage, options));
+};
+
+export const createSessionStorage = (options: Options = {}) => {
+    return createStorage(sessionStorage, { ...options, timeout: DEFAULT_CACHE_TIME });
+};
+
+export const createLocalStorage = (options: Options = {}) => {
+    return createStorage(localStorage, { ...options, timeout: DEFAULT_CACHE_TIME });
+};
+
+export default WebStorage;

package/project/src/utils/cache/memory.ts

@@ -0,0 +1,99 @@
+import { omit } from 'lodash-es';
+import { DB_DICT_DATA_KEY, LOGIN_INFO_KEY, PROJ_CFG_KEY, ROLES_KEY, TENANT_ID, TOKEN_KEY, USER_INFO_KEY, USER_WAREHOUSE_KEY } from '../../enums';
+
+export interface Cache<V = any> {
+    value?: V;
+    timeoutId?: ReturnType<typeof window.setTimeout>;
+    time?: number;
+    alive?: number;
+}
+
+const NOT_ALIVE = 0;
+
+export class Memory<T = any, V = any> {
+    private cache: { [key in keyof T]?: Cache<V> } = {};
+    private alive: number;
+
+    constructor(alive = NOT_ALIVE) {
+        this.alive = alive * 1000;
+    }
+
+    get getCache() {
+        return this.cache;
+    }
+
+    setCache(cache: { [key in keyof T]?: Cache<V> }) {
+        this.cache = cache;
+    }
+
+    get<K extends keyof T>(key: K) {
+        return this.cache[key];
+    }
+
+    set<K extends keyof T>(key: K, value: V, expires?: number) {
+        let item = this.get(key);
+
+        if (!expires || (expires as number) <= 0) {
+            expires = this.alive;
+        }
+        if (item) {
+            if (item.timeoutId) {
+                clearTimeout(item.timeoutId);
+                item.timeoutId = undefined;
+            }
+            item.value = value;
+        } else {
+            item = { value, alive: expires };
+            this.cache[key] = item;
+        }
+
+        if (!expires) {
+            return value;
+        }
+        const now = new Date().getTime();
+        item.time = now + this.alive;
+        item.timeoutId = window.setTimeout(
+            () => {
+                this.remove(key);
+            },
+            expires > now ? expires - now : expires,
+        ) as any;
+
+        return value;
+    }
+
+    remove<K extends keyof T>(key: K) {
+        const item = this.get(key);
+        Reflect.deleteProperty(this.cache, key);
+        if (item) {
+            clearTimeout(item.timeoutId!);
+            return item.value;
+        }
+    }
+
+    resetCache(cache: { [K in keyof T]: Cache }) {
+        Object.keys(cache).forEach((key) => {
+            const k = key as any as keyof T;
+            const item = cache[k];
+            if (item && item.time) {
+                const now = new Date().getTime();
+                const expire = item.time;
+                if (expire > now) {
+                    this.set(k, item.value, expire);
+                }
+            }
+        });
+    }
+
+    clear() {
+        Object.keys(this.cache).forEach((key) => {
+            const item = (this.cache as any)[key];
+            item.timeoutId && clearTimeout(item.timeoutId);
+        });
+        //update-begin---author:liusq  Date:20220108  for：不删除登录用户的租户id，其他缓存信息都清除----
+        this.cache = {
+            ...omit(this.cache, [TOKEN_KEY, USER_INFO_KEY, ROLES_KEY, USER_WAREHOUSE_KEY, DB_DICT_DATA_KEY, TENANT_ID, LOGIN_INFO_KEY, PROJ_CFG_KEY]),
+        };
+        //update-end---author:liusq  Date:20220108  for：不删除登录用户的租户id，其他缓存信息都清除----
+    }
+}

package/project/src/utils/cache/persistent.ts

@@ -0,0 +1,132 @@
+import { omit, pick } from 'lodash-es';
+import { toRaw } from 'vue';
+import type { RouteLocationNormalized } from 'vue-router';
+import { SysUserWarehouseDTO } from '../../../../api/WMS/models';
+import { LoginInfo, ProjectConfig, UserInfo } from '../../../types';
+import { APP_LOCAL_CACHE_KEY, APP_SESSION_CACHE_KEY, DB_DICT_DATA_KEY, LOCK_INFO_KEY, LOGIN_INFO_KEY, MULTIPLE_TABS_KEY, PROJ_CFG_KEY, ROLES_KEY, TENANT_ID, TOKEN_KEY, USER_INFO_KEY, USER_WAREHOUSE_KEY } from '../../enums';
+import { DEFAULT_CACHE_TIME } from '../../settings';
+import { createLocalStorage, createSessionStorage } from './index';
+import { Memory } from './memory';
+
+interface BasicStore {
+    [TOKEN_KEY]: string | number | null | undefined;
+    [USER_INFO_KEY]: UserInfo;
+    [ROLES_KEY]: string[];
+    [USER_WAREHOUSE_KEY]: SysUserWarehouseDTO[];
+    [LOCK_INFO_KEY]: LockInfo;
+    [PROJ_CFG_KEY]: ProjectConfig;
+    [MULTIPLE_TABS_KEY]: RouteLocationNormalized[];
+    [DB_DICT_DATA_KEY]: string;
+    [TENANT_ID]: string;
+    [LOGIN_INFO_KEY]: LoginInfo;
+}
+
+type LocalStore = BasicStore;
+
+type SessionStore = BasicStore;
+
+export type BasicKeys = keyof BasicStore;
+type LocalKeys = keyof LocalStore;
+type SessionKeys = keyof SessionStore;
+
+const ls = createLocalStorage();
+const ss = createSessionStorage();
+
+const localMemory = new Memory(DEFAULT_CACHE_TIME);
+const sessionMemory = new Memory(DEFAULT_CACHE_TIME);
+
+function initPersistentMemory() {
+    const localCache = ls.get(APP_LOCAL_CACHE_KEY);
+    const sessionCache = ss.get(APP_SESSION_CACHE_KEY);
+    localCache && localMemory.resetCache(localCache);
+    sessionCache && sessionMemory.resetCache(sessionCache);
+}
+
+export class Persistent {
+    static getLocal<T>(key: LocalKeys) {
+        //update-begin---author:scott ---date:2022-10-27  for：token过期退出重新登录，online菜单还是提示token过期----------
+        const globalCache = ls.get(APP_LOCAL_CACHE_KEY);
+        if (globalCache) {
+            localMemory.setCache(globalCache);
+        }
+        //update-end---author:scott ---date::2022-10-27  for：token过期退出重新登录，online菜单还是提示token过期----------
+        return localMemory.get(key)?.value as Nullable<T>;
+    }
+
+    static setLocal(key: LocalKeys, value: LocalStore[LocalKeys], immediate = false): void {
+        localMemory.set(key, toRaw(value));
+        immediate && ls.set(APP_LOCAL_CACHE_KEY, localMemory.getCache);
+    }
+
+    static removeLocal(key: LocalKeys, immediate = false): void {
+        localMemory.remove(key);
+        immediate && ls.set(APP_LOCAL_CACHE_KEY, localMemory.getCache);
+    }
+
+    static clearLocal(immediate = false): void {
+        localMemory.clear();
+        immediate && ls.clear();
+    }
+
+    static getSession<T>(key: SessionKeys) {
+        return sessionMemory.get(key)?.value as Nullable<T>;
+    }
+
+    static setSession(key: SessionKeys, value: SessionStore[SessionKeys], immediate = false): void {
+        sessionMemory.set(key, toRaw(value));
+        immediate && ss.set(APP_SESSION_CACHE_KEY, sessionMemory.getCache);
+    }
+
+    static removeSession(key: SessionKeys, immediate = false): void {
+        sessionMemory.remove(key);
+        immediate && ss.set(APP_SESSION_CACHE_KEY, sessionMemory.getCache);
+    }
+    static clearSession(immediate = false): void {
+        sessionMemory.clear();
+        immediate && ss.clear();
+    }
+
+    static clearAll(immediate = false) {
+        sessionMemory.clear();
+        localMemory.clear();
+        if (immediate) {
+            ls.clear();
+            ss.clear();
+        }
+    }
+}
+
+window.addEventListener('beforeunload', function () {
+    // TOKEN_KEY 在登录或注销时已经写入到storage了，此处为了解决同时打开多个窗口时token不同步的问题
+    // LOCK_INFO_KEY 在锁屏和解锁时写入，此处也不应修改
+    ls.set(APP_LOCAL_CACHE_KEY, {
+        ...omit(localMemory.getCache, LOCK_INFO_KEY),
+        ...pick(ls.get(APP_LOCAL_CACHE_KEY), [TOKEN_KEY, USER_INFO_KEY, LOCK_INFO_KEY]),
+    });
+    ss.set(APP_SESSION_CACHE_KEY, {
+        ...omit(sessionMemory.getCache, LOCK_INFO_KEY),
+        ...pick(ss.get(APP_SESSION_CACHE_KEY), [TOKEN_KEY, USER_INFO_KEY, LOCK_INFO_KEY]),
+    });
+});
+
+function storageChange(e: any) {
+    const { key, newValue, oldValue } = e;
+
+    if (!key) {
+        Persistent.clearAll();
+        return;
+    }
+
+    if (!!newValue && !!oldValue) {
+        if (APP_LOCAL_CACHE_KEY === key) {
+            Persistent.clearLocal();
+        }
+        if (APP_SESSION_CACHE_KEY === key) {
+            Persistent.clearSession();
+        }
+    }
+}
+
+window.addEventListener('storage', storageChange);
+
+initPersistentMemory();

package/project/src/utils/cache/storageCache.ts

@@ -0,0 +1,102 @@
+import { isNil } from 'lodash-es';
+import { cacheCipher } from '../../settings';
+import { AesEncryption, EncryptionParams } from '../cipher';
+
+export interface CreateStorageParams extends EncryptionParams {
+    prefixKey: string;
+    storage: Storage;
+    hasEncrypt: boolean;
+    timeout?: Nullable<number>;
+}
+
+export const create: any = ({ prefixKey = '', storage = sessionStorage, key = cacheCipher.key, iv = cacheCipher.iv, timeout = null, hasEncrypt = true }: Partial<CreateStorageParams> = {}) => {
+    if (hasEncrypt && [key.length, iv.length].some((item) => item !== 16)) {
+        throw new Error('When hasEncrypt is true, the key or iv must be 16 bits!');
+    }
+
+    const encryption = new AesEncryption({ key, iv });
+
+    /**
+     *Cache class
+     *Construction parameters can be passed into sessionStorage, localStorage,
+     * @class Cache
+     * @example
+     */
+    const WebStorage = class WebStorage {
+        private storage: Storage;
+        private prefixKey?: string;
+        private encryption: AesEncryption;
+        private hasEncrypt: boolean;
+        /**
+         *
+         * @param {*} storage
+         */
+        constructor() {
+            this.storage = storage;
+            this.prefixKey = prefixKey;
+            this.encryption = encryption;
+            this.hasEncrypt = hasEncrypt;
+        }
+
+        private getKey(key: string) {
+            return `${this.prefixKey}${key}`.toUpperCase();
+        }
+
+        /**
+         *
+         *  Set cache
+         * @param {string} key
+         * @param {*} value
+         * @expire Expiration time in seconds
+         * @memberof Cache
+         */
+        set(key: string, value: any, expire: number | null = timeout) {
+            const stringData = JSON.stringify({
+                value,
+                time: Date.now(),
+                expire: !isNil(expire) ? new Date().getTime() + expire * 1000 : null,
+            });
+            const stringifyValue = this.hasEncrypt ? this.encryption.encryptByAES(stringData) : stringData;
+            this.storage.setItem(this.getKey(key), stringifyValue);
+        }
+
+        /**
+         *Read cache
+         * @param {string} key
+         * @memberof Cache
+         */
+        get(key: string, def: any = null): any {
+            const val = this.storage.getItem(this.getKey(key));
+            if (!val) return def;
+
+            try {
+                const decVal = this.hasEncrypt ? this.encryption.decryptByAES(val) : val;
+                const data = JSON.parse(decVal);
+                const { value, expire } = data;
+                if (isNil(expire) || expire >= new Date().getTime()) {
+                    return value;
+                }
+                this.remove(key);
+            } catch (e) {
+                return def;
+            }
+        }
+
+        /**
+         * Delete cache based on key
+         * @param {string} key
+         * @memberof Cache
+         */
+        remove(key: string) {
+            this.storage.removeItem(this.getKey(key));
+        }
+
+        /**
+         * Delete all caches of this instance
+         */
+        clear(): void {
+            this.storage.clear();
+        }
+    };
+    return new WebStorage();
+};