feat(package): 新增一些案例；但是 tailwindcss 仅在子项目生效

packages/nanxing-admin/stores/useLocalConfigStore.ts

@@ -0,0 +1,68 @@
+import type { GlobalThemeOverrides } from 'naive-ui';
+import { defineStore } from 'pinia';
+import { computed, shallowRef } from 'vue';
+import { colord } from 'colord';
+
+const LOCAL_FIXED_THEME_PRIMARY_COLOR = '#31A848FF';
+
+export const useLocalConfigStore = defineStore(
+  'localConfig',
+  () => {
+    // 本地主题色配置
+    const { primaryColor, resetPrimaryColor, grayMode, toggleGrayMode, naiveThemeProps } = (function () {
+      const primaryColor = shallowRef<string>(LOCAL_FIXED_THEME_PRIMARY_COLOR);
+
+      // naive-ui 主题色变更
+      const naiveThemeProps = computed((): GlobalThemeOverrides => {
+        const hsColor = colord(primaryColor.value).lighten(0.035);
+        const pColor = colord(primaryColor.value).darken(0.1);
+        return {
+          common: {
+            primaryColor: primaryColor.value,
+            primaryColorHover: hsColor.toHex(),
+            primaryColorPressed: pColor.toHex(),
+            primaryColorSuppl: hsColor.toHex(),
+          },
+          LoadingBar: {
+            colorLoading: primaryColor.value,
+          },
+        };
+      });
+
+      function resetPrimaryColor() {
+        primaryColor.value = LOCAL_FIXED_THEME_PRIMARY_COLOR;
+      }
+
+      const grayMode = shallowRef<boolean>(false);
+      function toggleGrayMode() {
+        grayMode.value = !grayMode.value;
+        if (grayMode.value) {
+          document.documentElement.style.filter = 'grayscale(1)';
+        } else {
+          document.documentElement.style.filter = 'grayscale(0)';
+        }
+      }
+
+      return {
+        primaryColor,
+        resetPrimaryColor,
+        grayMode,
+        toggleGrayMode,
+        naiveThemeProps,
+      };
+    })();
+
+    // 布局配置
+
+    return {
+      primaryColor,
+      resetPrimaryColor,
+      grayMode,
+      toggleGrayMode,
+      naiveThemeProps,
+    };
+  },
+  {
+    persist: true,
+  }
+);