添加cookie封装

src/main.ts

@@ -1,15 +1,15 @@
 import App from "./App.vue";
 import router from "./router";
-import { setupStore } from "@/store";
-import { getPlatformConfig } from "./config";
-import { MotionPlugin } from "@vueuse/motion";
+import {setupStore} from "@/store";
+import {getPlatformConfig} from "./config";
+import {MotionPlugin} from "@vueuse/motion";
 // import { useEcharts } from "@/plugins/echarts";
-import { createApp, type Directive } from "vue";
-import { useElementPlus } from "@/plugins/elementPlus";
-import { injectResponsiveStorage } from "@/utils/responsive";
+import {createApp, type Directive} from "vue";
+import {useElementPlus} from "@/plugins/elementPlus";
+import {injectResponsiveStorage} from "@/utils/responsive";
 
 import Table from "@pureadmin/table";
-// import PureDescriptions from "@pureadmin/descriptions";
+import PureDescriptions from "@pureadmin/descriptions";
 
 // 引入重置样式
 import "./style/reset.scss";
@@ -18,6 +18,8 @@ import "./style/index.scss";
 // 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
 import "./style/tailwind.css";
 import "element-plus/dist/index.css";
+// 导入组件库样式
+import "plus-pro-components/es/components/page/style/css";
 // 导入字体图标
 import "./assets/iconfont/iconfont.js";
 import "./assets/iconfont/iconfont.css";
@@ -26,23 +28,26 @@ const app = createApp(App);
 
 // 自定义指令
 import * as directives from "@/directives";
+
 Object.keys(directives).forEach(key => {
-  app.directive(key, (directives as { [key: string]: Directive })[key]);
+    app.directive(key, (directives as { [key: string]: Directive })[key]);
 });
 
 // 全局注册@iconify/vue图标库
 import {
-  IconifyIconOffline,
-  IconifyIconOnline,
-  FontIcon
+    IconifyIconOffline,
+    IconifyIconOnline,
+    FontIcon
 } from "./components/ReIcon";
+
 app.component("IconifyIconOffline", IconifyIconOffline);
 app.component("IconifyIconOnline", IconifyIconOnline);
 app.component("FontIcon", FontIcon);
 
 // 全局注册按钮级别权限组件
-import { Auth } from "@/components/ReAuth";
-import { Perms } from "@/components/RePerms";
+import {Auth} from "@/components/ReAuth";
+import {Perms} from "@/components/RePerms";
+
 app.component("Auth", Auth);
 app.component("Perms", Perms);
 
@@ -50,15 +55,16 @@ app.component("Perms", Perms);
 import "tippy.js/dist/tippy.css";
 import "tippy.js/themes/light.css";
 import VueTippy from "vue-tippy";
+
 app.use(VueTippy);
 
 getPlatformConfig(app).then(async config => {
-  setupStore(app);
-  app.use(router);
-  await router.isReady();
-  injectResponsiveStorage(app, config);
-  app.use(MotionPlugin).use(useElementPlus).use(Table);
-  // .use(PureDescriptions)
-  // .use(useEcharts);
-  app.mount("#app");
+    setupStore(app);
+    app.use(router);
+    await router.isReady();
+    injectResponsiveStorage(app, config);
+    app.use(MotionPlugin).use(useElementPlus).use(Table);
+    // .use(PureDescriptions)
+    // .use(useEcharts);
+    app.mount("#app");
 });

src/router/modules/testStorage.ts

@@ -0,0 +1,27 @@
+// 最简代码，也就是这些字段必须有
+export default {
+    path: "/testStorage",
+    meta: {
+        title: "测试存储"
+    },
+    children: [
+        {
+            path: "/testStorage/local",
+            name: "Local",
+            component: () => import("@/views/testStorage/local/index.vue"),
+            meta: {
+                title: "本地存储",
+                showParent: true
+            }
+        },
+        {
+            path: "/testStorage/cookie",
+            name: "Cookie",
+            component: () => import("@/views/testStorage/cookie/index.vue"),
+            meta: {
+                title: "cookie存储",
+                showParent: true
+            }
+        }
+    ]
+};

src/views/login/index.vue

@@ -11,7 +11,7 @@ import { useEventListener } from "@vueuse/core";
 import type { FormInstance } from "element-plus";
 import { useLayout } from "@/layout/hooks/useLayout";
 import { useUserStoreHook } from "@/store/modules/user";
-import { initRouter, getTopMenu, addPathMatch } from "@/router/utils";
+import { getTopMenu, addPathMatch } from "@/router/utils";
 import { bg, avatar, illustration } from "./utils/static";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";

src/views/testStorage/cookie/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {CookieStorage} from '@/utils/cookieStorage';
+
+defineOptions({
+  name: "Cookie"
+})
+const cookie = new CookieStorage()
+let json = JSON.stringify({name: 'lisi'})
+cookie.setItem('name', json)
+console.log(cookie.getItem('name'));
+</script>
+
+<template>
+  <div>cookie</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/testStorage/local/index.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import {localForage} from "@/utils/localforage";
+
+defineOptions({
+  name: "Local"
+})
+
+localForage().setItem('name', 'lisi', 1000 * 60 * 60 * 24 * 7)
+
+localForage().getItem('name').then((res) => {
+  console.log(res);
+})
+</script>
+
+<template>
+  <div>local</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/testTable/pageTable/index.vue

@@ -25,7 +25,6 @@ import {
   PlusPage,
   useTable
 } from "plus-pro-components";
-import "plus-pro-components/es/components/page/style/css";
 import { cloneDeep } from "lodash-es";
 import { number } from "echarts";
 

src/views/testTable/splitTable/index.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { computed, defineOptions, ref } from "vue";
-import "plus-pro-components/es/components/search/style/css";
-import "plus-pro-components/es/components/table/style/css";
 import {
   type PlusColumn,
   useTable,