用户登录后获取自定义主题配置

apps/vue/src/api/sys/model/themeModel.ts

@@ -0,0 +1,8 @@
+import type { BeforeMiniState } from '/#/store';
+import type { ProjectConfig } from '/#/config';
+
+export interface ThemeSetting {
+  darkMode?: string;
+  projectConfig: ProjectConfig;
+  beforeMiniInfo: BeforeMiniState;
+}

apps/vue/src/api/sys/theme.ts

@@ -0,0 +1,15 @@
+import { defAbpHttp } from '/@/utils/http/abp';
+import { ThemeSetting } from './model/themeModel';
+
+export const getTheme = () => {
+  return defAbpHttp.get<ThemeSetting>({
+    url: '/api/theme/vue-vben-admin',
+  });
+};
+
+export const changeTheme = (themeSetting: ThemeSetting) => {
+  return defAbpHttp.put<void>({
+    url: '/api/theme/vue-vben-admin/change',
+    data: themeSetting,
+  });
+};

apps/vue/src/hooks/web/useSignalR.ts

@@ -4,6 +4,7 @@ import {
   HubConnectionBuilder,
   HubConnectionState,
   IHttpConnectionOptions,
+  LogLevel,
 } from '@microsoft/signalr';
 import { useUserStoreWithOut } from '/@/store/modules/user';
 
@@ -45,7 +46,9 @@ export function useSignalR({
       httpOptions.accessTokenFactory = () =>
         token.startsWith('Bearer ') ? token.substring(7) : token;
     }
-    var connectionBuilder = new HubConnectionBuilder().withUrl(serverUrl, httpOptions);
+    var connectionBuilder = new HubConnectionBuilder()
+      .withUrl(serverUrl, httpOptions)
+      .configureLogging(LogLevel.Warning);
     if (automaticReconnect) {
       connectionBuilder.withAutomaticReconnect({
         nextRetryDelayInMilliseconds: () => nextRetryDelayInMilliseconds,

apps/vue/src/layouts/default/setting/components/SettingFooter.vue

@@ -1,25 +1,30 @@
 <template>
   <div :class="prefixCls">
-    <a-button type="primary" block @click="handleCopy">
+    <a-button type="primary" block @click="handleCopy" class="my-1">
       <CopyOutlined class="mr-2" />
       {{ t('layout.setting.copyBtn') }}
     </a-button>
 
-    <a-button color="warning" block @click="handleResetSetting" class="my-3">
+    <a-button color="primary" block @click="handleSyncSetting" :loading="syncLoading"  class="my-1">
+      <CloudSyncOutlined class="mr-2" />
+      {{ t('layout.setting.syncBtn') }}
+    </a-button>
+
+    <a-button color="warning" block @click="handleResetSetting" class="my-1">
       <RedoOutlined class="mr-2" />
       {{ t('common.resetText') }}
     </a-button>
 
-    <a-button color="error" block @click="handleClearAndRedo">
+    <a-button color="error" block @click="handleClearAndRedo" class="my-1">
       <RedoOutlined class="mr-2" />
       {{ t('layout.setting.clearBtn') }}
     </a-button>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, unref } from 'vue';
+  import { defineComponent, ref, unref } from 'vue';
 
-  import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
+  import { CopyOutlined, RedoOutlined, CloudSyncOutlined } from '@ant-design/icons-vue';
 
   import { useAppStore } from '/@/store/modules/app';
   import { usePermissionStore } from '/@/store/modules/permission';
@@ -35,10 +40,14 @@
   import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
   import defaultSetting from '/@/settings/projectSetting';
 
+  import { changeTheme } from '/@/api/sys/theme';
+  import { ThemeSetting } from '/@/api/sys/model/themeModel';
+
   export default defineComponent({
     name: 'SettingFooter',
-    components: { CopyOutlined, RedoOutlined },
+    components: { CopyOutlined, RedoOutlined, CloudSyncOutlined },
     setup() {
+      const syncLoading = ref(false);
       const permissionStore = usePermissionStore();
       const { prefixCls } = useDesign('setting-footer');
       const { t } = useI18n();
@@ -78,11 +87,29 @@
         userStore.resetState();
         location.reload();
       }
+
+      function handleSyncSetting() {
+        const themeSetting: ThemeSetting = {
+          darkMode: appStore.getDarkMode,
+          projectConfig: appStore.getProjectConfig,
+          beforeMiniInfo: appStore.getBeforeMiniInfo,
+        };
+
+        syncLoading.value = true;
+        changeTheme(themeSetting).then(() => {
+          createMessage.success(t('layout.setting.operatingTitle'));
+        }).finally(() => {
+          syncLoading.value = false;
+        });
+      }
+
       return {
         prefixCls,
         t,
+        syncLoading,
         handleCopy,
         handleResetSetting,
+        handleSyncSetting,
         handleClearAndRedo,
       };
     },

apps/vue/src/locales/lang/en/layout.ts

@@ -56,6 +56,7 @@ export default {
 
     copyBtn: 'Copy',
     clearBtn: 'Clear cache and to the login page',
+    syncBtn: 'Synchronize to my configuration',
 
     drawerTitle: 'Configuration',
 

apps/vue/src/locales/lang/zh-CN/layout.ts

@@ -56,6 +56,7 @@ export default {
 
     copyBtn: '拷贝',
     clearBtn: '清空缓存并返回登录页',
+    syncBtn: '同步到个人配置',
 
     drawerTitle: '项目配置',
 

apps/vue/src/store/modules/app.ts

@@ -17,6 +17,8 @@ import { darkMode } from '/@/settings/designSetting';
 import { resetRouter } from '/@/router';
 import { deepMerge } from '/@/utils';
 
+import { getTheme } from '/@/api/sys/theme';
+
 interface AppState {
   darkMode?: ThemeEnum;
   // Page loading status
@@ -99,6 +101,12 @@ export const useAppStore = defineStore({
         clearTimeout(timeId);
       }
     },
+    async initlizeTheme() {
+      const theme = await getTheme();
+      this.setDarkMode(theme.darkMode === ThemeEnum.DARK ? ThemeEnum.DARK : ThemeEnum.LIGHT);
+      this.setProjectConfig(theme.projectConfig);
+      this.setBeforeMiniInfo(theme.beforeMiniInfo);
+    },
   },
 });
 

apps/vue/src/store/modules/user.ts

@@ -7,6 +7,7 @@ import { ROLES_KEY, TOKEN_KEY, USER_INFO_KEY } from '/@/enums/cacheEnum';
 import { getAuthCache, setAuthCache } from '/@/utils/auth';
 import { GetUserInfoModel, LoginParams, LoginByPhoneParams } from '/@/api/sys/model/userModel';
 import { useAbpStoreWithOut } from './abp';
+import { useAppStoreWithOut } from './app';
 
 import { loginApi, loginPhoneApi, getUserInfo } from '/@/api/sys/user';
 import { useI18n } from '/@/hooks/web/useI18n';
@@ -142,6 +143,13 @@ export const useUserStore = defineStore({
       // get user info
       await this.getUserInfoAction();
 
+      try {
+        const appStore = useAppStoreWithOut();
+        await appStore.initlizeTheme();
+      } catch(error) {
+        console.warn('Failed to synchronize the user theme.');
+      }
+
       const sessionTimeout = this.sessionTimeout;
       if (sessionTimeout) {
         this.setSessionTimeout(false);
@@ -162,6 +170,7 @@ export const useUserStore = defineStore({
     async getUserInfoAction(): Promise<GetUserInfoModel> {
       const abpStore = useAbpStoreWithOut();
       await abpStore.initlizeAbpApplication();
+      
       const userInfo = await getUserInfo();
       const currentUser = abpStore.getApplication.currentUser;
 

aspnet-core/modules/platform/LINGYUN.Platform.Theme.VueVbenAdmin/LINGYUN/Platform/Theme/VueVbenAdmin/ThemeSettingController.cs

@@ -27,6 +27,7 @@ public class ThemeSettingController : AbpControllerBase, IThemeSettingAppService
 
     [HttpPut]
     [Authorize]
+    [Route("change")]
     public Task ChangeAsync(ThemeSettingDto input)
     {
         return ThemeSettingAppService.ChangeAsync(input);

aspnet-core/modules/platform/LINGYUN.Platform.Theme.VueVbenAdmin/LINGYUN/Platform/Theme/VueVbenAdmin/ThemeSettingDto.cs

@@ -3,7 +3,6 @@
 public class ThemeSettingDto
 {
     public string DarkMode { get; set; } = "light";
-    public bool PageLoading { get; set; }
     public ProjectConfigDto ProjectConfig { get; set; } = new ProjectConfigDto();
     public BeforeMiniStateDto BeforeMiniInfo { get; set; } = new BeforeMiniStateDto();
 }