feat: sites localTheme done

src/sites/assets/util/ref.ts

@@ -1,5 +1,24 @@
-import { ref } from 'vue';
+import { Ref, ref } from 'vue';
+export class RefData {
+  private static instance: RefData;
+  public static getInstance(): RefData {
+    if (this.instance == null) {
+      this.instance = new RefData();
+      let localTheme = localStorage.getItem('nutui-theme-color');
+      if (localTheme) {
+        this.instance.themeColor.value = localTheme;
+      }
+    }
+    return this.instance;
+  }
 
-export const currentRoute = ref('/');
+  public currentRoute: Ref<string> = ref('/');
 
-export const themeColor = ref('black');
+  private _themeColor: Ref<string> = ref('black');
+  public get themeColor(): Ref<string> {
+    return this._themeColor;
+  }
+  public set themeColor(v: Ref<string>) {
+    this._themeColor = v;
+  }
+}

src/sites/doc/components/Footer.vue

@@ -112,7 +112,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
-import { themeColor } from '@/sites/assets/util/ref';
+import { RefData } from '@/sites/assets/util/ref';
 export default defineComponent({
   name: 'doc-footer',
   setup() {
@@ -144,14 +144,18 @@ export default defineComponent({
         false
       );
     };
+    // checked active index
+    data.activeIndex = data.themeList.findIndex(
+      i => i.color == RefData.getInstance().themeColor.value
+    );
     const checkTheme = (color: string, index: number) => {
       data.isShowSelect = false;
       data.activeIndex = index;
-      themeColor.value = color;
-      console.log('themeColor1', themeColor);
+      RefData.getInstance().themeColor.value = color;
+      localStorage.setItem('nutui-theme-color', color);
     };
     return {
-      themeColor,
+      themeColor: RefData.getInstance().themeColor,
       data,
       clickOut,
       checkTheme

src/sites/doc/components/Header.vue

@@ -72,7 +72,7 @@
 import { defineComponent, reactive, computed, onMounted } from 'vue';
 import Search from './Search.vue';
 import { header } from '@/config.json';
-import { currentRoute, themeColor } from '@/sites/assets/util/ref';
+import { RefData } from '@/sites/assets/util/ref';
 export default defineComponent({
   name: 'doc-header',
   components: {
@@ -106,14 +106,12 @@ export default defineComponent({
     };
     const isActive = computed(() => {
       return function(name: string) {
-        // console.log(name, currentRoute.value);
-        // console.log('name1', currentRoute.value == name.toLowerCase());
-        return currentRoute.value == name.toLowerCase();
+        return RefData.getInstance().currentRoute.value == name.toLowerCase();
       };
     });
     const themeName = computed(() => {
       return function() {
-        return `doc-header-${themeColor.value}`;
+        return `doc-header-${RefData.getInstance().themeColor.value}`;
       };
     });
     const checkTheme = (item: string, index: number) => {

src/sites/doc/components/Nav.vue

@@ -42,14 +42,14 @@
 </template>
 <script lang="ts">
 import { defineComponent, reactive, computed, onMounted } from 'vue';
-import { currentRoute } from '@/sites/assets/util/ref';
+import { RefData } from '@/sites/assets/util/ref';
 import { nav, docs } from '@/config.json';
 export default defineComponent({
   name: 'doc-nav',
   setup() {
     const isActive = computed(() => {
       return function(name: string) {
-        return currentRoute.value == name.toLowerCase();
+        return RefData.getInstance().currentRoute.value == name.toLowerCase();
       };
     });
     onMounted(() => {
@@ -59,7 +59,7 @@ export default defineComponent({
       isActive,
       nav: reactive(nav),
       docs: reactive(docs),
-      currentRoute
+      currentRoute: RefData.getInstance().currentRoute
     };
   }
 });

src/sites/doc/views/Index.vue

@@ -19,7 +19,7 @@ import Header from '@/sites/doc/components/Header.vue';
 import Nav from '@/sites/doc/components/Nav.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
 import DemoPreview from '@/sites/doc/components/DemoPreview.vue';
-import { currentRoute } from '@/sites/assets/util/ref';
+import { RefData } from '@/sites/assets/util/ref';
 export default defineComponent({
   name: 'doc',
   components: {
@@ -35,7 +35,7 @@ export default defineComponent({
 
     const watchDemoUrl = (router: RouteLocationNormalized) => {
       const { origin, pathname } = window.location;
-      currentRoute.value = router.name as string;
+      RefData.getInstance().currentRoute.value = router.name as string;
       data.demoUrl = `${origin}${pathname.replace('index.html', '')}demo.html#${
         router.path
       }`;

src/sites/doc/views/Main.vue

@@ -113,7 +113,7 @@ import { defineComponent, onMounted, reactive, toRefs, computed } from 'vue';
 import Header from '@/sites/doc/components/Header.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
 import router from '../router';
-import { themeColor } from '@/sites/assets/util/ref';
+import { RefData } from '@/sites/assets/util/ref';
 import { ApiService } from '@/sites/service/ApiService';
 export default defineComponent({
   name: 'main',
@@ -175,7 +175,7 @@ export default defineComponent({
 
     const themeName = computed(() => {
       return function() {
-        return `doc-content-${themeColor.value}`;
+        return `doc-content-${RefData.getInstance().themeColor.value}`;
       };
     });
     const toLink = (id: number) => {

src/sites/doc/views/Resource.vue

@@ -97,7 +97,7 @@ import {
 } from 'vue-router';
 import Header from '@/sites/doc/components/Header.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
-import { currentRoute } from '@/sites/assets/util/ref';
+import { RefData } from '@/sites/assets/util/ref';
 import { ApiService } from '@/sites/service/ApiService';
 export default defineComponent({
   name: 'doc',
@@ -125,7 +125,7 @@ export default defineComponent({
       activeIndex: 0
     });
     const watchDemoUrl = (router: RouteLocationNormalized) => {
-      currentRoute.value = router.name as string;
+      RefData.getInstance().currentRoute.value = router.name as string;
     };
     onMounted(() => {
       // 路由