fix: vue修改默认主题&添加角色修改data.permission (#195)

* fix: vue添加角色修改data.permission * fix: vue默认主题改为smb主题 * fix: vue主题补充useTheme
opentiny · Sep 2, 2024 · ab6b340 · ab6b340
1 parent b670439
commit ab6b340
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 33 deletions.
diff --git a/packages/toolkits/pro/template/tinyvue/src/App.vue b/packages/toolkits/pro/template/tinyvue/src/App.vue
@@ -9,8 +9,12 @@
   import { provide } from 'vue';
   import * as echarts from 'echarts';
   import GlobalSetting from '@/components/global-setting/index.vue';
+  import TinyThemeTool from '@opentiny/vue-theme/theme-tool';
+  import { useTheme } from './hooks/useTheme';
 
   provide('echarts', echarts);
+  const theme = new TinyThemeTool();
+  useTheme(theme);
 </script>
 
 <style lang="less" scoped>

diff --git a/packages/toolkits/pro/template/tinyvue/src/assets/style/menu.less b/packages/toolkits/pro/template/tinyvue/src/assets/style/menu.less
@@ -27,9 +27,10 @@
       .tree-node-name
       .tiny-svg
   ) {
-    fill: var(--ti-tree-menu-node-current-color);
+  fill: var(--ti-tree-menu-node-current-color);
 }
+
 :deep(.tiny-collapse-item__header) {
+  color: var(--ti-common-color-text-highlight);
   background-color: var(--ti-common-color-bg-light-normal);
-  color: var(--ti-common-color-text-highlight); 
-}
+}
diff --git a/packages/toolkits/pro/template/tinyvue/src/components/theme/index.vue b/packages/toolkits/pro/template/tinyvue/src/components/theme/index.vue
@@ -26,7 +26,11 @@
         <div>
           <span>{{ $t('theme.title.light') }}</span>
           <div class="theme-line">
-            <div v-for="item in SwitchlightColor" :key="item.value" class="light">
+            <div
+              v-for="item in SwitchlightColor"
+              :key="item.value"
+              class="light"
+            >
               <div
                 class="theme-block"
                 :style="{ 'background-color': item.color }"
@@ -43,7 +47,11 @@
         <div>
           <span>{{ $t('theme.title.deep') }}</span>
           <div class="theme-line">
-            <div v-for="item in SwitchdarkColor" :key="item.value" class="black">
+            <div
+              v-for="item in SwitchdarkColor"
+              :key="item.value"
+              class="black"
+            >
               <div
                 class="theme-block"
                 :style="{ 'background-color': item.color }"
@@ -63,9 +71,9 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, watch } from 'vue';
+  import { inject, onMounted, watch } from 'vue';
   // eslint-disable-next-line import/extensions
-  import TinyThemeTool from '@opentiny/vue-theme/theme-tool.js';
+  import { tinySmbTheme } from '@opentiny/vue-theme/theme';
   import { IconYes } from '@opentiny/vue-icon';
   import { useAppStore } from '@/store';
   import {
@@ -113,8 +121,7 @@
   ];
   const Yes = IconYes();
   const appStore = useAppStore();
-  let divApp = document.documentElement;
-  let theme = new TinyThemeTool();
+  const theme = inject('THEME');
 
   onMounted(() => {
     if (appStore.themelist === 'none') {
@@ -149,20 +156,11 @@
         break;
       default:
         appStore.updateSettings({ theme: 'light' });
-        theme.changeTheme(DefaultTheme);
+        theme.changeTheme(tinySmbTheme);
         appStore.updateSettings({ themelist: 'default' });
     }
   };
 
-  // 暗黑监听
-  watch(appStore.$state, (newValue, oldValue) => {
-    if (newValue.theme === 'dark') {
-      divApp!.style.filter = 'invert(0.9) hue-rotate(180deg)';
-    } else {
-      divApp!.style.filter = 'invert(0) hue-rotate(0deg)';
-    }
-  });
-
   // 选中自定义
   const choose = (item: {
     value?: number;
@@ -181,12 +179,11 @@
   watch(
     appStore.$state,
     (newValue, oldValue) => {
-
       // eslint-disable-next-line default-case
       switch (newValue.themelist) {
         case 'default':
           appStore.updateSettings({ theme: 'light' });
-          theme.changeTheme(DefaultTheme);
+          theme.changeTheme(tinySmbTheme);
           break;
         case 'peaches':
           appStore.updateSettings({ theme: 'light' });
@@ -205,7 +202,7 @@
           break;
       }
     },
-    { immediate: true }
+    { immediate: true },
   );
 </script>
 

diff --git a/packages/toolkits/pro/template/tinyvue/src/env.d.ts b/packages/toolkits/pro/template/tinyvue/src/env.d.ts
@@ -1,5 +1,4 @@
 /// <reference types="vite/client" />
-
 declare module '*.vue' {
   import { DefineComponent } from 'vue';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types

diff --git a/packages/toolkits/pro/template/tinyvue/src/hooks/useTheme.ts b/packages/toolkits/pro/template/tinyvue/src/hooks/useTheme.ts
@@ -0,0 +1,46 @@
+import { useAppStore } from '@/store';
+import { computed, onMounted, watch } from 'vue';
+import * as Themes from '@/components/theme/type';
+import TinyThemeTool from '@opentiny/vue-theme/theme-tool.js';
+import { tinySmbTheme } from '@opentiny/vue-theme/theme';
+import useThemes from './themes';
+
+export const useTheme = (themeTool: typeof TinyThemeTool) => {
+  const { themelist, $patch } = useAppStore();
+  const themeName = computed(() =>
+    themelist.length
+      ? `${themelist[0].toUpperCase()}${themelist.slice(1).toLowerCase()}Theme`
+      : 'DefaultTheme',
+  );
+  const { isDark } = useThemes();
+  watch(
+    themeName,
+    () => {
+      themeTool.changeTheme(
+        themeName.value === 'DefaultTheme'
+          ? tinySmbTheme
+          : (Themes as any)[themeName.value],
+      );
+    },
+    { immediate: true },
+  );
+  onMounted(() => {
+    watch(
+      isDark,
+      () => {
+        if (isDark.value) {
+          document.body.style.filter = 'invert(0.9) hue-rotate(180deg)';
+        } else {
+          document.body.style.filter = '';
+        }
+      },
+      { immediate: true },
+    );
+  });
+  const toggleTheme = (name: string) => {
+    $patch({
+      themelist: name,
+    });
+  };
+  return { toggleTheme };
+};
diff --git a/packages/toolkits/pro/template/tinyvue/src/layout/default-layout.vue b/packages/toolkits/pro/template/tinyvue/src/layout/default-layout.vue
@@ -87,8 +87,8 @@
   import NavBar from '@/components/navbar/index.vue';
   import Theme from '@/components/theme/index.vue';
   import Menu from '@/components/menu/index.vue';
-  import { DefaultTheme } from '@/components/theme/type';
   import { useRouter } from 'vue-router';
+  import { useTheme } from '@/hooks/useTheme';
   import PageLayout from './page-layout.vue';
   // 动态切换
   const router = useRouter();
@@ -146,6 +146,8 @@
   // 主题配置
   const disTheme = ref(false);
   const theme = new TinyThemeTool();
+  useTheme(theme);
+  provide('THEME', theme);
   const themeVisible = () => {
     disTheme.value = !disTheme.value;
   };
@@ -171,11 +173,6 @@
     }
   });
   // 初始化默认主题
-  onMounted(() => {
-    appStore.updateSettings({ theme: 'light' });
-    theme.changeTheme(DefaultTheme);
-    appStore.updateSettings({ themelist: 'default' });
-  });
 </script>
 
 <style scoped lang="less">

diff --git a/packages/toolkits/pro/template/tinyvue/src/store/modules/app/index.ts b/packages/toolkits/pro/template/tinyvue/src/store/modules/app/index.ts
@@ -2,8 +2,21 @@ import { defineStore } from 'pinia';
 import defaultSettings from '@/config/settings.json';
 import { AppState } from './types';
 
+export const CONSTANT = {
+  APP_STATE: 'APP_STATE',
+};
+
+const initState = (): AppState => {
+  return {
+    ...defaultSettings,
+    ...JSON.parse(localStorage.getItem(CONSTANT.APP_STATE) ?? '{}'),
+  };
+};
+
 const useAppStore = defineStore('app', {
-  state: (): AppState => ({ ...defaultSettings }),
+  state: () => {
+    return initState();
+  },
 
   getters: {
     appCurrentSetting(state: AppState): AppState {
@@ -15,26 +28,52 @@ const useAppStore = defineStore('app', {
   },
 
   actions: {
+    get() {
+      return {
+        theme: this.theme,
+        colorWeek: this.colorWeek,
+        navbar: this.navbar,
+        menu: this.menu,
+        hideMenu: this.hideMenu,
+        menuCollapse: this.menuCollapse,
+        footer: this.footer,
+        themelist: this.themelist,
+        themeColor: this.themeColor,
+        themeValue: this.themeValue,
+        themeContent: this.themeContent,
+        menuWidth: this.menuWidth,
+        Settings: this.Settings,
+        device: this.device,
+        tabBar: this.tabBar,
+        step: this.step,
+        themeLightColors: this.themeLightColors,
+      };
+    },
     // Update app settings
     updateSettings(partial: Partial<AppState>) {
       // @ts-ignore-next-line
       this.$patch(partial);
+      localStorage.setItem(CONSTANT.APP_STATE, JSON.stringify(this.get()));
     },
 
     // updateStep
     updateStep(step: number) {
       this.step = step;
+      localStorage.setItem(CONSTANT.APP_STATE, JSON.stringify(this.get()));
     },
 
     toggleDevice(device: string) {
       this.device = device;
+      localStorage.setItem(CONSTANT.APP_STATE, JSON.stringify(this.get()));
     },
     toggleMenu(value: boolean) {
       this.hideMenu = value;
+      localStorage.setItem(CONSTANT.APP_STATE, JSON.stringify(this.get()));
     },
     setthemeLightColors(themeLightColors: any) {
-      this.themeLightColors = themeLightColors
-    }
+      this.themeLightColors = themeLightColors;
+      localStorage.setItem(CONSTANT.APP_STATE, JSON.stringify(this.get()));
+    },
   },
 });
 

diff --git a/packages/toolkits/pro/template/tinyvue/src/views/role/info/components/info-tab.vue b/packages/toolkits/pro/template/tinyvue/src/views/role/info/components/info-tab.vue
@@ -123,7 +123,7 @@
         });
         tableData.value.push({
           id: data.id,
-          permission: data.permission.map((p) => p.name),
+          permission: data.permission,
           menus: [],
           name: data.name,
         });