ci: 集成 pinia 提供主题持久化

package/component/src/provider/index.vue

@@ -58,10 +58,8 @@ const changeTheme = (theme: string) => {
         disableStyleSheetsProxy: false,
       }
     );
-    localStorage.setItem("layui-vue-theme-dark", "true");
   } else {
     disableDarkMode();
-    localStorage.setItem("layui-vue-theme-dark", "false");
   }
 };
 

package/document/package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "vue-router": "^4.0.12",
     "vue-i18n": "^9.2.0-beta.34",
-    "@vueuse/core": "^7.6.2"
+    "@vueuse/core": "^7.6.2",
+    "pinia": "^2.0.9",
+    "pinia-plugin-persist": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",

package/document/src/layouts/Layout.vue

@@ -1,9 +1,9 @@
 <template>
   <lay-config-provider
-    :theme="theme"
     :locale="locale"
     :locales="locales"
-    :themeVariable="themeVariable"
+    :theme="appStore.theme"
+    :themeVariable="appStore.themeVariable"
   >
     <lay-layout class="layui-layout-document" style="height: 100%">
       <lay-header
@@ -77,66 +77,66 @@
               <template #content>
                 <div style="width: 380px; padding: 0px 10px 10px 10px">
                   <lay-color-picker
-                    v-model="themeVariable['--global-primary-color']"
+                    v-model="appStore.themeVariable['--global-primary-color']"
                   ></lay-color-picker
                   >&nbsp;
                   <lay-color-picker
-                    v-model="themeVariable['--global-normal-color']"
+                    v-model="appStore.themeVariable['--global-normal-color']"
                   ></lay-color-picker
                   >&nbsp;
                   <lay-color-picker
-                    v-model="themeVariable['--global-warm-color']"
+                    v-model="appStore.themeVariable['--global-warm-color']"
                   ></lay-color-picker
                   >&nbsp;
                   <lay-color-picker
-                    v-model="themeVariable['--global-danger-color']"
+                    v-model="appStore.themeVariable['--global-danger-color']"
                   ></lay-color-picker
                   >&nbsp;
                   <lay-color-picker
-                    v-model="themeVariable['--global-checked-color']"
+                    v-model="appStore.themeVariable['--global-checked-color']"
                   ></lay-color-picker
                   >&nbsp;
                   <lay-input
-                    v-model="themeVariable['--global-border-radius']"
+                    v-model="appStore.themeVariable['--global-border-radius']"
                     style="display: inline-block; width: 130px"
                   ></lay-input>
                   <lay-color-picker
-                    v-model="themeVariable['--global-neutral-color-1']"
+                    v-model="appStore.themeVariable['--global-neutral-color-1']"
                   ></lay-color-picker
                   >&nbsp;
                   <lay-color-picker
-                    v-model="themeVariable['--global-neutral-color-2']"
+                    v-model="appStore.themeVariable['--global-neutral-color-2']"
                   ></lay-color-picker
                   >&nbsp;
                   <lay-color-picker
-                    v-model="themeVariable['--global-neutral-color-3']"
+                    v-model="appStore.themeVariable['--global-neutral-color-3']"
                   ></lay-color-picker
                   >&nbsp;
                   <lay-color-picker
-                    v-model="themeVariable['--global-neutral-color-4']"
+                    v-model="appStore.themeVariable['--global-neutral-color-4']"
                   ></lay-color-picker
                   >&nbsp;
                   <lay-color-picker
-                    v-model="themeVariable['--global-neutral-color-5']"
+                    v-model="appStore.themeVariable['--global-neutral-color-5']"
                   ></lay-color-picker
                   >&nbsp;
                   <lay-color-picker
-                    v-model="themeVariable['--global-neutral-color-6']"
+                    v-model="appStore.themeVariable['--global-neutral-color-6']"
                   ></lay-color-picker
                   >&nbsp;
                   <lay-color-picker
-                    v-model="themeVariable['--global-neutral-color-7']"
+                    v-model="appStore.themeVariable['--global-neutral-color-7']"
                   ></lay-color-picker
                   >&nbsp;
                   <lay-color-picker
-                    v-model="themeVariable['--global-neutral-color-8']"
+                    v-model="appStore.themeVariable['--global-neutral-color-8']"
                   ></lay-color-picker>
                   <lay-color-picker
-                    v-model="themeVariable['--global-dark-text-color']"
+                    v-model="appStore.themeVariable['--global-dark-text-color']"
                   ></lay-color-picker
                   >&nbsp;
                   <lay-color-picker
-                    v-model="themeVariable['--global-dark-background-color']"
+                    v-model="appStore.themeVariable['--global-dark-background-color']"
                   ></lay-color-picker>
 
                   <lay-button fluid="true">导 出 配 置</lay-button>
@@ -168,7 +168,7 @@
           <li class="layui-nav-item">
             <a href="javascript:void(0)">
               <lay-switch
-                v-model="theme"
+                v-model="appStore.theme"
                 class="switch"
                 onswitch-value="dark"
                 unswitch-value="light"
@@ -240,12 +240,13 @@
   </lay-config-provider>
 </template>
 <script>
-import { ref, watch, computed, provide } from "vue";
+import { ref, watch, provide } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import menu from "../view/utils/menus";
 import { useI18n } from "vue-i18n";
 import zh_CN from "../language/zh_CN.ts";
 import en_US from "../language/en_US.ts";
+import { useAppStore } from "../store/app";
 
 export default {
   setup() {
@@ -257,32 +258,10 @@ export default {
       { name: "zh_CN", locale: zh_CN, merge: true },
       { name: "en_US", locale: en_US, merge: true },
     ];
-    let isDark =
+    const appStore = useAppStore();
-      localStorage.getItem("layui-vue-theme-dark") !== "false" ||
-      window.matchMedia("prefers-color-scheme: dark").matches;
-
-    const theme = ref(isDark ? "dark" : "light");
-    const themeVariable = ref({
-      "--global-primary-color": "#009688",
-      "--global-normal-color": "#1e9fff",
-      "--global-warm-color": "#ffb800",
-      "--global-danger-color": "#ff5722",
-      "--global-checked-color": "#5fb878",
-      "--global-border-radius": "2px",
-      "--global-neutral-color-1": "#FAFAFA",
-      "--global-neutral-color-2": "#F6F6F6",
-      "--global-neutral-color-3": "#eeeeee",
-      "--global-neutral-color-4": "#e2e2e2",
-      "--global-neutral-color-5": "#dddddd",
-      "--global-neutral-color-6": "#d2d2d2",
-      "--global-neutral-color-7": "#cccccc",
-      "--global-neutral-color-8": "#c2c2c2",
-      "--global-dark-text-color": "#FFFFFFc9",
-      "--global-dark-background-color": "#22272E",
-    });
-
     const menus = [];
     const currentPath = ref("/zh-CN/guide");
+
     watch(
       () => route.path,
       (val) => {
@@ -293,6 +272,7 @@ export default {
         deep: true,
       }
     );
+    
     menu.forEach((m) => {
       m.children.forEach((c) => {
         menus.push(c);
@@ -315,22 +295,15 @@ export default {
       locale.value = lang;
     };
 
-    window
-      .matchMedia("(prefers-color-scheme: dark)")
-      .addListener((e) => (theme.value = e.matches ? "dark" : "light"));
-
-    provide("theme", theme);
-
     return {
       t,
       menus,
-      theme,
       locale,
       locales,
+      appStore,
       currentPath,
       handleClick,
       changeLocale,
-      themeVariable,
     };
   },
 };

package/document/src/main.ts

@@ -3,6 +3,7 @@ import { App, createApp as _createApp } from "vue";
 import { createRouter } from "./router/index";
 import { Router } from "vue-router";
 import layui from "@layui/layui-vue";
+import Store from './store';
 import "@layui/layui-vue/lib/index.css";
 import LayCode from "./components/LayCode.vue";
 import LaySearch from "./components/LaySearch.vue";
@@ -20,6 +21,7 @@ export function createApp(): {
   app
     .use(layui)
     .use(router)
+    .use(Store)
     .component("LayCode", LayCode)
     .component("LaySearch", LaySearch)
     .component("LayTableBox", LayTableBox)

package/document/src/store/app.ts

@@ -0,0 +1,44 @@
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore({
+  id: 'app',
+  state: () => {
+    return {
+      theme: 'light',
+      themeVariable: {
+        "--global-primary-color": "#009688",
+        "--global-normal-color": "#1e9fff",
+        "--global-warm-color": "#ffb800",
+        "--global-danger-color": "#ff5722",
+        "--global-checked-color": "#5fb878",
+        "--global-border-radius": "2px",
+        "--global-neutral-color-1": "#FAFAFA",
+        "--global-neutral-color-2": "#F6F6F6",
+        "--global-neutral-color-3": "#eeeeee",
+        "--global-neutral-color-4": "#e2e2e2",
+        "--global-neutral-color-5": "#dddddd",
+        "--global-neutral-color-6": "#d2d2d2",
+        "--global-neutral-color-7": "#cccccc",
+        "--global-neutral-color-8": "#c2c2c2",
+      },
+    }
+  },
+  getters: {
+    
+  },
+  actions: {
+
+  },
+  persist: {
+      enabled: true,
+      strategies: [
+        {
+          key: 'theme',
+          storage: localStorage
+        },{
+          key: 'themeVariable',
+          storage: localStorage
+        }
+      ]
+  }
+})

package/document/src/store/index.ts

@@ -0,0 +1,7 @@
+import { createPinia } from 'pinia'
+import piniaPluginPersist from 'pinia-plugin-persist'
+
+const store = createPinia();
+store.use(piniaPluginPersist);
+
+export default store;

package/document/src/view/index.vue

@@ -21,7 +21,7 @@
             href="javascript:void(0);"
             @click="changeTheme"
           >
-            {{ theme === "dark" ? "Turn Off" : "Turn On" }}
+            {{ appStore.theme === "dark" ? "Turn Off" : "Turn On" }}
           </a>
         </div>
         <div class="site-version">
@@ -111,25 +111,26 @@
 </template>
 
 <script>
-import { inject, provide } from "vue";
 import { useI18n } from "vue-i18n";
+import { useAppStore } from "../store/app";
+
 export default {
   name: "index",
   setup() {
     const { t } = useI18n();
-    const theme = inject("theme");
+    const appStore = useAppStore();
     
     const changeTheme = () => {
-      if (theme.value === "dark") {
+      if (appStore.theme === "dark") {
-        theme.value = "light";
+        appStore.theme = "light";
       } else {
-        theme.value = "dark";
+        appStore.theme = "dark";
       }
     };
 
     return {
       t,
-      theme,
+      appStore,
       changeTheme,
     };
   },

pnpm-lock.yaml

@@ -116,6 +116,8 @@ importers:
       escape-html: ^1.0.3
       less: ^4.1.2
       markdown-it-container: ^3.0.0
+      pinia: ^2.0.9
+      pinia-plugin-persist: ^1.0.0
       prismjs: ^1.25.0
       rimraf: ^3.0.2
       rollup: ^2.70.1
@@ -126,6 +128,8 @@ importers:
       vue-router: ^4.0.12
     dependencies:
       '@vueuse/core': 7.7.1_vue@3.2.31
+      pinia: 2.0.13_typescript@4.6.3+vue@3.2.31
+      pinia-plugin-persist: 1.0.0_pinia@2.0.13+vue@3.2.31
       vue-i18n: 9.2.0-beta.34_vue@3.2.31
       vue-router: 4.0.14_vue@3.2.31
     devDependencies:
@@ -4041,6 +4045,39 @@ packages:
     dev: true
     optional: true
 
+  /pinia-plugin-persist/1.0.0_pinia@2.0.13+vue@3.2.31:
+    resolution: {integrity: sha512-M4hBBd8fz/GgNmUPaaUsC29y1M09lqbXrMAHcusVoU8xlQi1TqgkWnnhvMikZwr7Le/hVyMx8KUcumGGrR6GVw==}
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0
+      pinia: ^2.0.0
+      vue: ^2.0.0 || >=3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      pinia: 2.0.13_typescript@4.6.3+vue@3.2.31
+      vue: 3.2.31
+      vue-demi: 0.12.5_vue@3.2.31
+    dev: false
+
+  /pinia/2.0.13_typescript@4.6.3+vue@3.2.31:
+    resolution: {integrity: sha512-B7rSqm1xNpwcPMnqns8/gVBfbbi7lWTByzS6aPZ4JOXSJD4Y531rZHDCoYWBwLyHY/8hWnXljgiXp6rRyrofcw==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/devtools-api': 6.1.4
+      typescript: 4.6.3
+      vue: 3.2.31
+      vue-demi: 0.12.5_vue@3.2.31
+    dev: false
+
   /postcss/8.4.12:
     resolution: {integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==}
     engines: {node: ^10 || ^12 || >=14}