feat(storage): add new storage (pure-admin#48)

* feat(storage): add new storage，新增 database 和 cookie 存储
* fix(storage): 区分用户，获取当前存储路径时,应该获取当前用户，用来区分用户
* fix: ts alias mapping
* chore: remove lodash
* fix(storage): replace lodash with lodash-es
* fix(storage): initialization，Initialization failed, unable to write

Author: hb0730

.env

@@ -1,6 +1,9 @@
 # port
 VITE_PORT = 8848
-
+# title
+VITE_TITLE = vue-pure-admin
+# version
+VITE_VERSION = 1.0.0
 # open
 VITE_OPEN = false
 

.env.development

@@ -1,6 +1,9 @@
 # port
 VITE_PORT = 8848
-
+# title
+VITE_TITLE = vue-pure-admin
+# version
+VITE_VERSION = 1.0.0
 # open
 VITE_OPEN = false
 

package.json

@@ -27,12 +27,12 @@
     "axios": "^0.21.1",
     "cropperjs": "^1.5.11",
     "dayjs": "^1.10.6",
-    "dotenv": "^8.2.0",
     "echarts": "^5.1.2",
     "element-plus": "^1.1.0-beta.16",
     "element-resize-detector": "^1.2.3",
     "font-awesome": "^4.7.0",
     "lodash-es": "^4.17.21",
+    "lowdb": "^3.0.0",
     "mitt": "^2.1.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
@@ -42,6 +42,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "responsive-storage": "^1.0.10",
     "sortablejs": "1.13.0",
+    "typescript-cookie": "^1.0.0",
     "v-contextmenu": "^3.0.0",
     "vue": "^3.2.19",
     "vue-i18n": "^9.2.0-beta.3",

src/utils/storage/cookie.ts

@@ -0,0 +1,53 @@
+import { loadEnv } from "@build/utils";
+import { merge } from "lodash-es";
+import tsCookies from "typescript-cookie/dist/src/compat";
+
+class Cookies {
+  private static env = loadEnv();
+  constructor() {}
+  /**
+   *  存储 cookie 值
+   * @param name
+   * @param value
+   * @param cookieSetting
+   */
+  set(name = "default", value = "", cookieSetting = {}) {
+    const currentCookieSetting = {
+      expires: 1
+    };
+    merge(currentCookieSetting, cookieSetting);
+    tsCookies.set(
+      `${Cookies.env.VITE_TITLE}-${Cookies.env.VITE_VERSION}-${name}`,
+      value,
+      currentCookieSetting
+    );
+  }
+  /**
+   * 拿到 cookie 值
+   * @param name
+   * @returns
+   */
+  get(name = "default"): any {
+    return tsCookies.get(
+      `${Cookies.env.VITE_TITLE}-${Cookies.env.VITE_VERSION}-${name}`
+    );
+  }
+  /**
+   * 拿到 cookie 全部的值
+   * @returns
+   */
+  getAll(): any {
+    return tsCookies.get();
+  }
+  /**
+   * 删除 cookie
+   * @param name
+   */
+  remove(name = "default") {
+    tsCookies.remove(
+      `${Cookies.env.VITE_TITLE}-${Cookies.env.VITE_VERSION}-${name}`
+    );
+  }
+}
+
+export const cookies = new Cookies();

src/utils/storage/db.ts

@@ -0,0 +1,87 @@
+import { loadEnv } from "@build/utils";
+import { LocalStorage, LowSync } from "lowdb";
+import { chain, cloneDeep } from "lodash-es";
+import { storageLocal } from ".";
+import { cookies } from "./cookie";
+type Data = {
+  database: {};
+  sys: {};
+};
+/**
+ * db 数据存储,采用 LocalStorage存储
+ */
+class DB {
+  private db: LowSync<Data>;
+  private static env = loadEnv();
+  constructor() {
+    this.db = new LowSync<Data>(
+      new LocalStorage<Data>(`${DB.env.VITE_TITLE}-${DB.env.VITE_VERSION}`)
+    );
+    this.initialization();
+    this.db.chain = chain(this.db.data);
+  }
+  private initialization() {
+    this.db.data = storageLocal.getItem(
+      `${DB.env.VITE_TITLE}-${DB.env.VITE_VERSION}`
+    ) || { database: {}, sys: {} };
+    this.db.write();
+  }
+  /**
+   * 检查路径是否存在 不存在的话初始化
+   * @param param0
+   * @returns path
+   */
+  pathInit({
+    dbName = "database",
+    path = "",
+    user = true,
+    validator = () => true,
+    defaultValue = ""
+  }): string {
+    const uuid = cookies.get("uuid") || "ghost-uuid";
+    const currentPath = `${dbName}.${user ? `user.${uuid}` : "public"}${
+      path ? `.${path}` : ""
+    }`;
+    const value = this.db.chain.get(currentPath).value();
+    if (!(value !== undefined && validator(value))) {
+      this.db.chain.set(currentPath, defaultValue).value();
+      this.db.write();
+    }
+    return currentPath;
+  }
+  /**
+   *将数据存储到指定位置 | 路径不存在会自动初始化
+   *
+   * 效果类似于取值 dbName.path = value
+   * @param param0
+   */
+  dbSet({ dbName = "database", path = "", value = "", user = false }): void {
+    const currentPath = this.pathInit({
+      dbName,
+      path,
+      user
+    });
+    this.db.chain.set(currentPath, value).value();
+    this.db.write();
+  }
+  /**
+   * 获取数据
+   *
+   * 效果类似于取值 dbName.path || defaultValue
+   * @param param0
+   * @returns
+   */
+  dbGet({
+    dbName = "database",
+    path = "",
+    defaultValue = "",
+    user = false
+  }): any {
+    const values = this.db.chain
+      .get(this.pathInit({ dbName, path, user, defaultValue }))
+      .value();
+    return cloneDeep(values);
+  }
+}
+
+export const db = new DB();

tsconfig.json

@@ -21,6 +21,7 @@
     "incremental": true,
     "paths": {
       "/@/*": ["src/*"],
+      "@build/*": ["build/*"],
       "/#/*": ["types/*"]
     },
     "types": ["node", "vite/client"],

types/global.d.ts

@@ -65,6 +65,8 @@ declare global {
 
   declare interface ViteEnv {
     VITE_PORT: number;
+    VITE_TITLE: string;
+    VITE_VERSION: string;
     VITE_USE_MOCK: boolean;
     VITE_USE_PWA: boolean;
     VITE_PUBLIC_PATH: string;

vite.config.ts

@@ -15,6 +15,7 @@ const pathResolve = (dir: string): any => {
 
 const alias: Record<string, string> = {
   "/@": pathResolve("src"),
+  "@build": pathResolve("build"),
   //解决开发环境下的警告 You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
   "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
 };

yarn.lock

@@ -1732,11 +1732,6 @@ dot-prop@^5.1.0:
   dependencies:
     is-obj "^2.0.0"
 
-dotenv@^8.2.0:
-  version "8.6.0"
-  resolved "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz#061af664d19f7f4d8fc6e4ff9b584ce237adcb8b"
-  integrity sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==
-
 [email protected]:
   version "1.4.7"
   resolved "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz#f69f96f940e0d0553dac291139865a3cd0101e3c"
@@ -2872,8 +2867,8 @@ locate-path@^6.0.0:
 
 lodash-es@^4.17.21:
   version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
-  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+  resolved "https://registry.npm.taobao.org/lodash-es/download/lodash-es-4.17.21.tgz?cache=0&sync_timestamp=1613836838613&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash-es%2Fdownload%2Flodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha1-Q+YmxG5lkbd1C+srUBFzkMYJ4+4=
 
 lodash.camelcase@^4.3.0:
   version "4.3.0"
@@ -2897,8 +2892,8 @@ lodash.truncate@^4.4.2:
 
 lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21:
   version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+  resolved "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=
 
 log-symbols@^4.1.0:
   version "4.1.0"
@@ -2923,6 +2918,13 @@ longest-streak@^2.0.0:
   resolved "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
   integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==
 
+lowdb@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.nlark.com/lowdb/download/lowdb-3.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Flowdb%2Fdownload%2Flowdb-3.0.0.tgz#c10ab4e7eb86f1cbe255e35e60ffb0c6f42049e0"
+  integrity sha1-wQq05+uG8cviVeNeYP+wxvQgSeA=
+  dependencies:
+    steno "^2.1.0"
+
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
@@ -4027,6 +4029,11 @@ statuses@~1.5.0:
   resolved "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
+steno@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.nlark.com/steno/download/steno-2.1.0.tgz#05a9c378ce42ed04f642cda6fcb41787a10e4e33"
+  integrity sha1-BanDeM5C7QT2Qs2m/LQXh6EOTjM=
+
 [email protected]:
   version "0.3.1"
   resolved "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
@@ -4344,6 +4351,11 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
+typescript-cookie@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/typescript-cookie/download/typescript-cookie-1.0.0.tgz#5354bf5d827b98dfe40807bf19b143cdd595a772"
+  integrity sha1-U1S/XYJ7mN/kCAe/GbFDzdWVp3I=
+
 typescript@^4.4.2:
   version "4.4.3"
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.4.3.tgz#bdc5407caa2b109efd4f82fe130656f977a29324"