@ditari/bsui 1.0.0 → 1.0.2

package/src/store/modules/KeepAlive.ts

@@ -0,0 +1,47 @@
+/**
+ * 缓存组件name数据
+ */
+import { defineStore } from "pinia";
+import { RouteLocationNormalized } from "vue-router";
+
+import { KEEP_ALIVE_ID } from "../types";
+
+export const useKeepAliveStore = defineStore(KEEP_ALIVE_ID, {
+  state: () => {
+    return {
+      list: [] as string[]
+    };
+  },
+  getters: {
+    get: (state): string[] => {
+      return state.list;
+    }
+  },
+  actions: {
+    /**
+     * 删除已经缓存的组件
+     * @param name 组件名称（必须唯一）
+     */
+    deleteKeepAlive(name: string) {
+      this.list.splice(
+        this.list.findIndex((key: string) => key === name),
+        1
+      );
+    },
+    /**
+     * 保存要缓存的组件名称
+     * @param route
+     */
+    save(route: RouteLocationNormalized) {
+      const name = <string>route.name;
+      if (!name) {
+        return;
+      }
+      const flag = this.list.some((key: string) => key === name);
+      if (!flag) {
+        this.list.push(name);
+      }
+    }
+  },
+  persist: true
+});

package/src/store/modules/Menu.ts

@@ -0,0 +1,24 @@
+/**
+ * 菜单数据
+ */
+import { defineStore } from "pinia";
+import { MENU_ID } from "../types";
+
+export const useMenuStore = defineStore(MENU_ID, {
+  state: () => {
+    return {
+      list: []
+    };
+  },
+  getters: {
+    getMenu: (state) => {
+      return state.list;
+    }
+  },
+  actions: {
+    save(data: any) {
+      this.list = data;
+    }
+  },
+  persist: true
+});

package/src/store/modules/NavTab.ts

@@ -0,0 +1,81 @@
+/**
+ * 多标签数据
+ */
+import { defineStore } from "pinia";
+import {
+  LocationQuery,
+  RouteLocationNormalized,
+  RouteMeta,
+  RouteParams
+} from "vue-router";
+
+import { NAV_TAB_ID } from "../types";
+
+export interface INavTab {
+  path: string;
+  fullPath: string;
+  query: LocationQuery;
+  params: RouteParams;
+  meta: RouteMeta | any;
+  name: string;
+}
+
+export const useNavTabsStore = defineStore(NAV_TAB_ID, {
+  state: () => {
+    return {
+      // 多标签列表
+      list: [] as INavTab[],
+      // 当前激活的地址
+      activeKey: "" as string
+    };
+  },
+  getters: {
+    getList: (state): INavTab[] => {
+      return state.list;
+    },
+    getActiveKey: (state): string => {
+      return state.activeKey;
+    }
+  },
+  actions: {
+    /**
+     * 设置激活的标签
+     * @param key
+     */
+    setActiveKey(key: string) {
+      this.activeKey = key;
+    },
+    /**
+     * 保存标签信息
+     * @param route
+     */
+    save(route: RouteLocationNormalized) {
+      const flag = this.list.some(
+        (item: INavTab) => item.fullPath === route.fullPath
+      );
+      if (flag) {
+        return;
+      }
+      const data: INavTab = {
+        path: route.path,
+        fullPath: route.fullPath,
+        query: route.query,
+        params: route.params,
+        meta: route.meta,
+        name: <string>route.name || ""
+      };
+      this.list.push(data);
+    },
+    /**
+     * 删除标签
+     * @param key url路径
+     */
+    deleteTabs(key: string) {
+      this.list.splice(
+        this.list.findIndex((v) => v.fullPath === key),
+        1
+      );
+    }
+  },
+  persist: true
+});

package/src/store/modules/Settings.ts

@@ -0,0 +1,120 @@
+import { defineStore } from "pinia";
+import { useMediaQuery } from "@vueuse/core";
+import { SETTINGS_ID } from "../types";
+
+const mediaMap = [
+  {
+    key: "700",
+    value: "(max-width: 700px)",
+    description: "小于700设备"
+  },
+  {
+    key: "700-960",
+    value: "(min-width:700px) and (max-width: 960px)",
+    description: "大于700小于960设备"
+  },
+  {
+    key: "960-1200",
+    value: "(min-width:960px) and (max-width: 1200px)",
+    description: "大于960小于1024设备"
+  },
+  {
+    key: "1200-1680",
+    value: "(min-width:1200px) and (max-width: 1680px)",
+    description: " 大于1200小于1680设备"
+  },
+  {
+    key: "1680",
+    value: "(min-width:1680px)",
+    description: " 大于1680设备"
+  }
+];
+
+const gridConfig = [
+  {
+    key: "700",
+    value: "repeat(1, 100%)",
+    col: 1,
+    description: "显示一列占100%"
+  },
+  {
+    key: "700-960",
+    value: "repeat(2, 50%)",
+    col: 2,
+    description: "显示两列每列占50%宽"
+  },
+  {
+    key: "960-1200",
+    value: "repeat(3, 33.33%)",
+    col: 3,
+    description: "显示三列每列占33.33%宽"
+  },
+  {
+    key: "1200-1680",
+    value: "repeat(4, 25%)",
+    col: 4,
+    description: "显示4列每列占25%宽"
+  },
+  {
+    key: "1680",
+    value: "repeat(5, 20%)",
+    col: 5,
+    description: " 显示5列每列占20%宽"
+  }
+];
+
+export interface State {
+  refresh: boolean;
+  collapsed: boolean;
+  mediaRuleMap: any;
+  gridConfig: any;
+  gridValue: any;
+}
+
+export const useSettingsStore = defineStore(SETTINGS_ID, {
+  state: (): State => ({
+    // 刷新状态
+    refresh: false as boolean,
+    // 菜单收缩
+    collapsed: false as boolean,
+    // 屏幕设备匹配规则
+    mediaRuleMap: mediaMap,
+    // 网格配置 根据匹配匹配规则
+    gridConfig: gridConfig,
+    gridValue: {} as any
+  }),
+  getters: {
+    getRefresh: (state) => state.refresh,
+    getCollapsed: (state) => state.collapsed,
+    getGrid: (state) => {
+      return state.gridValue;
+    }
+  },
+  actions: {
+    /**
+     * 切换刷新
+     */
+    switchRefreshStatus() {
+      this.refresh = !this.refresh;
+    },
+    /**
+     * 切换菜单收缩状态
+     */
+    switchCollapsed() {
+      this.collapsed = !this.collapsed;
+    },
+    /**
+     * 网格匹配
+     */
+    gridMatching() {
+      const mediaResult = this.mediaRuleMap.filter(
+        (item: any) => useMediaQuery(item.value).value
+      )[0];
+      const gridRs = this.gridConfig.filter(
+        (item: any) => item.key === mediaResult.key
+      )[0];
+      this.gridValue = gridRs;
+    }
+  },
+  persist: true
+});

package/src/store/modules/User.ts

@@ -0,0 +1,23 @@
+import { defineStore } from "pinia";
+import { USER_ID } from "../types";
+
+export const useUserStore = defineStore(USER_ID, {
+  state: () => {
+    return {
+      // token
+      token: undefined
+    };
+  },
+  getters: {
+    getToken: (state) => state.token
+  },
+  actions: {
+    /**
+     * 保存token
+     * @param token
+     */
+    saveToken(token: any) {
+      this.token = token;
+    }
+  }
+});

package/src/store/types.ts

@@ -0,0 +1,15 @@
+const id_prefix = "DITARI_STORE_";
+//面包屑
+export const BREADCRUMB_ID = `${id_prefix}BREADCRUMB_ID`;
+//字典ID
+export const DATA_DICTIONARY_ID = `${id_prefix}DATA_DICTIONARY_ID`;
+//缓存组件ID
+export const KEEP_ALIVE_ID = `${id_prefix}KEEP_ALIVE_ID`;
+//菜单ID
+export const MENU_ID = `${id_prefix}MENU_ID`;
+//多标签ID
+export const NAV_TAB_ID = `${id_prefix}NAV_TABS_ID`;
+//用户信息ID
+export const SETTINGS_ID = `${id_prefix}SETTINGS_ID`;
+//用户信息ID
+export const USER_ID = `${id_prefix}USER_ID`;

package/src/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": "..",
+    "jsx": "preserve",
+    "strict": true,
+    "target": "ES2015",
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "moduleResolution": "Node",
+    "allowJs": true,
+    "lib": ["esnext", "dom"],
+    "types": ["pinia-plugin-persistedstate"],
+    "paths": {}
+  }
+}

package/src/utils/get.ts

@@ -0,0 +1,15 @@
+export const get = (
+  source: Record<string, any>,
+  path: string,
+  defaultValue: any = undefined
+) => {
+  const paths = path.replace(/\[(\d+)\]/g, ".$1").split(".");
+  let result = source;
+  for (const p of paths) {
+    result = Object(result)[p];
+    if (result === undefined) {
+      return defaultValue;
+    }
+  }
+  return result;
+};

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export { default as withInstall } from "./install";
+export { get } from "./get";

package/src/utils/install.ts

@@ -0,0 +1,12 @@
+import type { App, Plugin } from "vue";
+export type SFCWithInstall<T> = T & Plugin;
+export default <T>(comp: T) => {
+  (comp as SFCWithInstall<T>).install = (app: App) => {
+    // 当组件是 script setup 的形式时，会自动以为文件名注册，会挂载到组件的__name 属性上
+    // 所以要加上这个条件
+    const name = (comp as any).name || (comp as any).__name;
+    //注册组件
+    app.component(name, comp as SFCWithInstall<T>);
+  };
+  return comp as SFCWithInstall<T>;
+};