feat: increase support for multiple time zones

* 优化实现方法

apps/backend-mock/api/timezone/getTimezoneOptions.ts

@@ -3,5 +3,9 @@ import { TIME_ZONE_OPTIONS } from '~/utils/mock-data';
 import { useResponseSuccess } from '~/utils/response';
 
 export default eventHandler(() => {
-  return useResponseSuccess(TIME_ZONE_OPTIONS);
+  const data = TIME_ZONE_OPTIONS.map((o) => ({
+    label: `${o.timezone} (GMT${o.offset >= 0 ? `+${o.offset}` : o.offset})`,
+    value: o.timezone,
+  }));
+  return useResponseSuccess(data);
 });

apps/backend-mock/api/timezone/setTimezone.ts

@@ -1,5 +1,6 @@
 import { eventHandler, readBody } from 'h3';
 import { verifyAccessToken } from '~/utils/jwt-utils';
+import { TIME_ZONE_OPTIONS } from '~/utils/mock-data';
 import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
 import { setTimezone } from '~/utils/timezone-utils';
 
@@ -8,7 +9,14 @@ export default eventHandler(async (event) => {
   if (!userinfo) {
     return unAuthorizedResponse(event);
   }
-  const { timezone } = await readBody(event);
+  const body = await readBody<{ timezone?: unknown }>(event);
+  const timezone =
+    typeof body?.timezone === 'string' ? body.timezone : undefined;
+  const allowed = TIME_ZONE_OPTIONS.some((o) => o.timezone === timezone);
+  if (!timezone || !allowed) {
+    setResponseStatus(event, 400);
+    return useResponseError('Bad Request', 'Invalid timezone');
+  }
   setTimezone(timezone);
   return useResponseSuccess({});
 });

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

@@ -9,7 +9,7 @@ export interface UserInfo {
 
 export interface TimezoneOption {
   offset: number;
-  timeZone: string;
+  timezone: string;
 }
 
 export const MOCK_USERS: UserInfo[] = [

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

@@ -30,8 +30,9 @@ const [Modal, modalApi] = useVbenModal({
   onConfirm: async () => {
     try {
       modalApi.setState({ confirmLoading: true });
-      if (timezoneRef.value) {
+      const timezone = unref(timezoneRef);
-        await timezoneStore.setTimezone(unref(timezoneRef));
+      if (timezone) {
+        await timezoneStore.setTimezone(timezone);
       }
       modalApi.close();
     } finally {

packages/stores/src/modules/timezone.ts

@@ -13,7 +13,7 @@ interface TimezoneHandler {
       value: string;
     }[]
   >;
-  onTimezoneChange?: (timezone: string) => Promise<void>;
+  setTimezone?: (timezone: string) => Promise<void>;
 }
 
 /**
@@ -63,13 +63,12 @@ const useTimezoneStore = defineStore(
       getTimezone() || new Intl.DateTimeFormat().resolvedOptions().timeZone,
     );
 
-    const timezoneHandler = getTimezoneHandler();
-
     /**
      * 初始化时区
      * Initialize the timezone
      */
     async function initTimezone() {
+      const timezoneHandler = getTimezoneHandler();
       const timezone = await timezoneHandler.getTimezone?.();
       if (timezone) {
         timezoneRef.value = timezone;
@@ -84,7 +83,8 @@ const useTimezoneStore = defineStore(
      * @param timezone 时区字符串
      */
     async function setTimezone(timezone: string) {
-      await timezoneHandler.onTimezoneChange?.(timezone);
+      const timezoneHandler = getTimezoneHandler();
+      await timezoneHandler.setTimezone?.(timezone);
       timezoneRef.value = timezone;
       // 设置dayjs默认时区
       setDefaultTimezone(timezone);
@@ -95,7 +95,8 @@ const useTimezoneStore = defineStore(
      * Get the timezone options
      */
     async function getTimezoneOptions() {
-      return await timezoneHandler.getTimezoneOptions();
+      const timezoneHandler = getTimezoneHandler();
+      return (await timezoneHandler.getTimezoneOptions?.()) || [];
     }
 
     initTimezone().catch((error) => {

playground/src/api/core/timezone.ts

@@ -6,14 +6,9 @@ import { requestClient } from '#/api/request';
  * 获取系统支持的时区列表
  */
 export async function getTimezoneOptionsApi() {
-  const dataList =
+  return await requestClient.get<TimezoneOption[]>(
-    (await requestClient.get<TimezoneOption[]>(
+    '/timezone/getTimezoneOptions',
-      '/timezone/getTimezoneOptions',
+  );
-    )) || [];
-  return dataList.map((item) => ({
-    label: item.timezone,
-    value: item.timezone,
-  }));
 }
 /**
  * 获取用户时区
@@ -25,6 +20,6 @@ export async function getTimezoneApi(): Promise<null | string | undefined> {
  * 设置用户时区
  * @param timezone 时区
  */
-export async function setTimezoneApi(timezone: string) {
+export async function setTimezoneApi(timezone: string): Promise<void> {
   return requestClient.post('/timezone/setTimezone', { timezone });
 }