页面配置持久化问题

config/plugin/imageOptimizer.ts

@@ -0,0 +1,11 @@
+/**
+ * Image resource files used to compress the output of the production environment
+ * 图片压缩
+ * https://www.npmjs.com/package/vite-plugin-image-optimizer
+ */
+import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
+
+export default function configImageOptimizerPlugin() {
+  const imageOptimizerPlugin = ViteImageOptimizer();
+  return imageOptimizerPlugin;
+}

config/plugin/imagemin.ts

@@ -1,37 +0,0 @@
-/**
- * Image resource files used to compress the output of the production environment
- * 图片压缩
- * https://github.com/anncwb/vite-plugin-imagemin
- */
-import viteImagemin from 'vite-plugin-imagemin';
-
-export default function configImageminPlugin() {
-  const imageminPlugin = viteImagemin({
-    gifsicle: {
-      optimizationLevel: 7,
-      interlaced: false,
-    },
-    optipng: {
-      optimizationLevel: 7,
-    },
-    mozjpeg: {
-      quality: 20,
-    },
-    pngquant: {
-      quality: [0.8, 0.9],
-      speed: 4,
-    },
-    svgo: {
-      plugins: [
-        {
-          name: 'removeViewBox',
-        },
-        {
-          name: 'removeEmptyAttrs',
-          active: false,
-        },
-      ],
-    },
-  });
-  return imageminPlugin;
-}

config/vite.config.prod.ts

@@ -3,7 +3,7 @@ import baseConfig from './vite.config.base';
 import configCompressPlugin from './plugin/compress';
 import configVisualizerPlugin from './plugin/visualizer';
 // import configArcoResolverPlugin from './plugin/arcoResolver';
-import configImageminPlugin from './plugin/imagemin';
+import configImageOptimizerPlugin from './plugin/imageOptimizer';
 import createSvgIcon from './plugin/svg-icon';
 
 export default mergeConfig(
@@ -13,7 +13,7 @@ export default mergeConfig(
       configCompressPlugin('gzip'),
       configVisualizerPlugin(),
       // configArcoResolverPlugin(),
-      configImageminPlugin(),
+      configImageOptimizerPlugin(),
       createSvgIcon(true),
     ],
     build: {
@@ -29,5 +29,5 @@ export default mergeConfig(
       chunkSizeWarningLimit: 2000,
     },
   },
-  baseConfig
+  baseConfig,
 );

package.json

@@ -46,6 +46,7 @@
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "query-string": "^8.1.0",
     "sortablejs": "^1.15.1",
     "v-viewer": "^3.0.10",
@@ -91,19 +92,21 @@
     "rollup": "^4.9.1",
     "rollup-plugin-visualizer": "^5.11.0",
     "sass": "^1.69.5",
+    "sharp": "^0.33.3",
     "stylelint": "^16.0.2",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^35.0.0",
     "stylelint-order": "^6.0.4",
+    "svgo": "^3.2.0",
     "typescript": "^5.3.3",
     "unplugin-auto-import": "^0.17.3",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^4.5.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-imagemin": "^0.6.1",
+    "vite-plugin-image-optimizer": "^1.1.7",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-svg-loader": "^4.0.0",
     "vue-tsc": "^1.8.26"

src/store/index.ts

@@ -1,10 +1,11 @@
 import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import useAppStore from './modules/app';
 import useUserStore from './modules/user';
 import useDictStore from './modules/dict';
 import useTabBarStore from './modules/tab-bar';
 
 const pinia = createPinia();
-
+pinia.use(piniaPluginPersistedstate);
 export { useAppStore, useUserStore, useDictStore, useTabBarStore };
 export default pinia;

src/store/modules/app/index.ts

@@ -27,7 +27,6 @@ const recursionMenu = (
 };
 const useAppStore = defineStore('app', {
   state: (): AppState => ({ ...defaultSettings, config: {} }),
-
   getters: {
     appCurrentSetting(state: AppState): AppState {
       return { ...state };
@@ -155,6 +154,7 @@ const useAppStore = defineStore('app', {
         );
     },
   },
+  persist: true,
 });
 
 export default useAppStore;

src/views/demo/visualization/multi-dimension-data-analysis/components/data-overview.vue

@@ -51,7 +51,7 @@
             el.color
           }" class="tooltip-item-icon"></span><span>${el.seriesName}</span>
         </p>
-        <span class="tooltip-value">${el.value.toLocaleString()}</span>
+        <span class="tooltip-value">${el.toLocaleString()}</span>
       </div>`
       )
       .reverse()