feat: increase support for multiple time zones

apps/backend-mock/utils/timezone-utils.ts

@@ -5,6 +5,5 @@ export const setTimezone = (timeZone: string) => {
 };
 
 export const getTimezone = () => {
-  console.log('mockTimeZone', mockTimeZone);
   return mockTimeZone;
 };

apps/web-antd/src/layouts/basic.vue

@@ -2,7 +2,7 @@
 import type { ExtendedModalApi } from '@vben/common-ui';
 import type { NotificationItem } from '@vben/layouts';
 
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, unref, watch } from 'vue';
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
@@ -66,7 +66,7 @@ const showDot = computed(() =>
 );
 
 const userProfileStore = useUserProfileStore();
-const computedTimezone = computed(() => userProfileStore.timezone);
+const computedTimezone = computed(() => unref(userProfileStore.timezone));
 
 const timezoneOptions = ref<string[]>([]);
 onMounted(async () => {
@@ -75,9 +75,12 @@ onMounted(async () => {
   );
 });
 const handleSetTimezone = async (
-  timezone: string,
   modalApi: ExtendedModalApi,
+  timezone?: string,
 ) => {
+  if (!timezone) {
+    return;
+  }
   try {
     modalApi.setState({ confirmLoading: true });
     await userProfileStore.setTimezone(timezone);

apps/web-antd/src/store/user-profile.ts

@@ -17,11 +17,11 @@ const useUserProfileStore = defineStore('user-profile', () => {
    * @param timezone 时区字符串
    */
   async function setTimezone(timezone: string) {
+    // 保存用户的时区设置
+    await setUserTimezoneApi(timezone);
     timezoneRef.value = timezone;
     // 设置dayjs默认时区
     setDefaultTimezone(timezone);
-    // 保存用户的时区设置
-    await setUserTimezoneApi(timezone);
   }
 
   /**

apps/web-ele/src/layouts/basic.vue

@@ -2,7 +2,7 @@
 import type { ExtendedModalApi } from '@vben/common-ui';
 import type { NotificationItem } from '@vben/layouts';
 
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, unref, watch } from 'vue';
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
@@ -66,7 +66,7 @@ const showDot = computed(() =>
 );
 
 const userProfileStore = useUserProfileStore();
-const computedTimezone = computed(() => userProfileStore.timezone);
+const computedTimezone = computed(() => unref(userProfileStore.timezone));
 
 const timezoneOptions = ref<string[]>([]);
 onMounted(async () => {
@@ -75,9 +75,12 @@ onMounted(async () => {
   );
 });
 const handleSetTimezone = async (
-  timezone: string,
   modalApi: ExtendedModalApi,
+  timezone?: string,
 ) => {
+  if (!timezone) {
+    return;
+  }
   try {
     modalApi.setState({ confirmLoading: true });
     await userProfileStore.setTimezone(timezone);

apps/web-ele/src/store/user-profile.ts

@@ -17,11 +17,11 @@ const useUserProfileStore = defineStore('user-profile', () => {
    * @param timezone 时区字符串
    */
   async function setTimezone(timezone: string) {
+    // 保存用户的时区设置
+    await setUserTimezoneApi(timezone);
     timezoneRef.value = timezone;
     // 设置dayjs默认时区
     setDefaultTimezone(timezone);
-    // 保存用户的时区设置
-    await setUserTimezoneApi(timezone);
   }
 
   /**

apps/web-naive/src/layouts/basic.vue

@@ -2,7 +2,7 @@
 import type { ExtendedModalApi } from '@vben/common-ui';
 import type { NotificationItem } from '@vben/layouts';
 
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, unref, watch } from 'vue';
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
@@ -67,7 +67,7 @@ const showDot = computed(() =>
 );
 
 const userProfileStore = useUserProfileStore();
-const computedTimezone = computed(() => userProfileStore.timezone);
+const computedTimezone = computed(() => unref(userProfileStore.timezone));
 
 const timezoneOptions = ref<string[]>([]);
 onMounted(async () => {
@@ -76,9 +76,12 @@ onMounted(async () => {
   );
 });
 const handleSetTimezone = async (
-  timezone: string,
   modalApi: ExtendedModalApi,
+  timezone?: string,
 ) => {
+  if (!timezone) {
+    return;
+  }
   try {
     modalApi.setState({ confirmLoading: true });
     await userProfileStore.setTimezone(timezone);

apps/web-naive/src/store/user-profile.ts

@@ -17,11 +17,11 @@ const useUserProfileStore = defineStore('user-profile', () => {
    * @param timezone 时区字符串
    */
   async function setTimezone(timezone: string) {
+    // 保存用户的时区设置
+    await setUserTimezoneApi(timezone);
     timezoneRef.value = timezone;
     // 设置dayjs默认时区
     setDefaultTimezone(timezone);
-    // 保存用户的时区设置
-    await setUserTimezoneApi(timezone);
   }
 
   /**

packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap

@@ -22,6 +22,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "enableCheckUpdates": true,
     "enablePreferences": true,
     "enableRefreshToken": false,
+    "enableStickyPreferencesNavigationBar": true,
     "isMobile": false,
     "layout": "sidebar-nav",
     "locale": "zh-CN",
@@ -29,6 +30,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "name": "Vben Admin",
     "preferencesButtonPosition": "auto",
     "watermark": false,
+    "watermarkContent": "",
     "zIndex": 200,
   },
   "breadcrumb": {
@@ -131,6 +133,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "refresh": true,
     "sidebarToggle": true,
     "themeToggle": true,
+    "timezone": true,
   },
 }
 `;

packages/effects/layouts/src/widgets/timezone/timezone-button.vue

@@ -16,8 +16,8 @@ import {
 interface Props {
   timezoneOptions: string[];
   okHandler?: (
-    timezone: string,
-    modalApi: ExtendedModalApi,
+    modalApi?: ExtendedModalApi,
+    timezone?: string,
   ) => Promise<void> | void;
   timezone?: string;
 }
@@ -34,7 +34,7 @@ const TimezoneIcon = createIconifyIcon('fluent-mdl2:world-clock');
 const [Modal, modalApi] = useVbenModal({
   fullscreenButton: false,
   onConfirm: () => {
-    props.okHandler?.(unref(timezoneValue), modalApi);
+    props.okHandler?.(modalApi, unref(timezoneValue));
   },
 });
 
@@ -42,11 +42,11 @@ const handleClick = () => {
   modalApi.open();
 };
 
-const timezoneValue = ref(props.timezone);
+const timezoneValue = ref<string | undefined>(unref(props.timezone));
 watch(
   () => props.timezone,
   (newTimezone) => {
-    timezoneValue.value = newTimezone;
+    timezoneValue.value = unref(newTimezone);
   },
 );
 const handleClickItem = (timezone: string) => {

packages/effects/plugins/src/echarts/use-echarts.ts

@@ -69,7 +69,7 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
 
   const renderEcharts = (
     options: EChartsOption,
-    clear = true
+    clear = true,
   ): Promise<Nullable<echarts.ECharts>> => {
     cacheOptions = options;
     const currentOptions = {