feat: increase support for multiple time zones

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

@@ -0,0 +1,7 @@
+import { eventHandler } from 'h3';
+import { TIME_ZONE_OPTIONS } from '~/utils/mock-data';
+import { useResponseSuccess } from '~/utils/response';
+
+export default eventHandler(() => {
+  return useResponseSuccess(TIME_ZONE_OPTIONS);
+});

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

@@ -0,0 +1,14 @@
+import { eventHandler, readBody } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+import { setTimezone } from '~/utils/timezone-utils';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const { timezone } = await readBody(event);
+  setTimezone(timezone);
+  return useResponseSuccess();
+});

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

@@ -0,0 +1,12 @@
+import { eventHandler } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+import { getTimezone } from '~/utils/timezone-utils';
+
+export default eventHandler((event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  return useResponseSuccess(getTimezone());
+});

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

@@ -7,6 +7,11 @@ export interface UserInfo {
   homePath?: string;
 }
 
+export interface TimeZoneOption {
+  offset: number;
+  timeZone: string;
+}
+
 export const MOCK_USERS: UserInfo[] = [
   {
     id: 0,
@@ -388,3 +393,29 @@ export function getMenuIds(menus: any[]) {
   });
   return ids;
 }
+
+/**
+ * 时区选项
+ */
+export const TIME_ZONE_OPTIONS: TimeZoneOption[] = [
+  {
+    offset: -5,
+    timezone: 'America/New_York',
+  },
+  {
+    offset: 0,
+    timezone: 'Europe/London',
+  },
+  {
+    offset: 8,
+    timezone: 'Asia/Shanghai',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Tokyo',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Seoul',
+  },
+];

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

@@ -0,0 +1,10 @@
+let mockTimeZone: null | string = null;
+
+export const setTimezone = (timeZone: string) => {
+  mockTimeZone = timeZone;
+};
+
+export const getTimezone = () => {
+  console.log('mockTimeZone', mockTimeZone);
+  return mockTimeZone;
+};

apps/web-antd/src/api/core/index.ts

@@ -1,3 +1,4 @@
 export * from './auth';
 export * from './menu';
 export * from './user';
+export * from './user-profile';

apps/web-antd/src/api/core/user-profile.ts

@@ -0,0 +1,23 @@
+import type { TimezoneOption } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 获取系统支持的时区列表
+ */
+export async function getTimezoneOptionsApi() {
+  return requestClient.get<TimezoneOption[]>('/profile/timezone');
+}
+/**
+ * 获取用户时区
+ */
+export async function getUserTimezoneApi(): Promise<null | string | undefined> {
+  return requestClient.get<null | string | undefined>('/user/timezone');
+}
+/**
+ * 设置用户时区
+ * @param timezone 时区
+ */
+export async function setUserTimezoneApi(timezone: string) {
+  return requestClient.post('/user/setTimezone', { timezone });
+}

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

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import type { ExtendedModalApi } from '@vben/common-ui';
 import type { NotificationItem } from '@vben/layouts';
 
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
@@ -11,14 +12,18 @@ import {
   BasicLayout,
   LockScreen,
   Notification,
+  TimezoneButton,
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
+import { message } from 'ant-design-vue';
+
+import { getTimezoneOptionsApi } from '#/api';
 import { $t } from '#/locales';
-import { useAuthStore } from '#/store';
+import { useAuthStore, useUserProfileStore } from '#/store';
 import LoginForm from '#/views/_core/authentication/login.vue';
 
 const notifications = ref<NotificationItem[]>([
@@ -60,6 +65,29 @@ const showDot = computed(() =>
   notifications.value.some((item) => !item.isRead),
 );
 
+const userProfileStore = useUserProfileStore();
+const computedTimezone = computed(() => userProfileStore.timezone);
+
+const timezoneOptions = ref<string[]>([]);
+onMounted(async () => {
+  timezoneOptions.value = ((await getTimezoneOptionsApi()) || []).map(
+    (item) => item.timezone,
+  );
+});
+const handleSetTimezone = async (
+  timezone: string,
+  modalApi: ExtendedModalApi,
+) => {
+  try {
+    modalApi.setState({ confirmLoading: true });
+    await userProfileStore.setTimezone(timezone);
+    message.success($t('ui.widgets.timezone.setSuccess'));
+    modalApi.close();
+  } finally {
+    modalApi.setState({ confirmLoading: false });
+  }
+};
+
 const menus = computed(() => [
   {
     handler: () => {
@@ -147,6 +175,14 @@ watch(
         @make-all="handleMakeAll"
       />
     </template>
+    <template #timezone>
+      <TimezoneButton
+        :ok-handler="handleSetTimezone"
+        :timezone="computedTimezone"
+        :timezone-options="timezoneOptions"
+        name="out"
+      />
+    </template>
     <template #extra>
       <AuthenticationLoginExpiredModal
         v-model:open="accessStore.loginExpired"

apps/web-antd/src/store/index.ts

@@ -1 +1,2 @@
 export * from './auth';
+export * from './user-profile';

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

@@ -0,0 +1,56 @@
+import { ref } from 'vue';
+
+import { getTimezone, setDefaultTimezone } from '@vben/utils';
+
+import { acceptHMRUpdate, defineStore } from 'pinia';
+
+import { getUserTimezoneApi, setUserTimezoneApi } from '#/api';
+
+const useUserProfileStore = defineStore('user-profile', () => {
+  const timezoneRef = ref(
+    getTimezone() || new Intl.DateTimeFormat().resolvedOptions().timeZone,
+  );
+
+  /**
+   * 设置用户时区
+   * Set the user's timezone
+   * @param timezone 时区字符串
+   */
+  async function setTimezone(timezone: string) {
+    timezoneRef.value = timezone;
+    // 设置dayjs默认时区
+    setDefaultTimezone(timezone);
+    // 保存用户的时区设置
+    await setUserTimezoneApi(timezone);
+  }
+
+  /**
+   * 初始化用户时区
+   * Initialize the user's timezone
+   */
+  async function initTimezone() {
+    // 从服务器获取用户时区
+    const timezone = await getUserTimezoneApi();
+    if (timezone) {
+      timezoneRef.value = timezone;
+      // 设置dayjs默认时区
+      setDefaultTimezone(timezone);
+    }
+  }
+
+  initTimezone();
+
+  return {
+    timezone: timezoneRef,
+    setTimezone,
+    initTimezone,
+  };
+});
+
+export { useUserProfileStore };
+
+// 解决热更新问题
+const hot = import.meta.hot;
+if (hot) {
+  hot.accept(acceptHMRUpdate(useUserProfileStore, hot));
+}

apps/web-ele/src/api/core/index.ts

@@ -1,3 +1,4 @@
 export * from './auth';
 export * from './menu';
 export * from './user';
+export * from './user-profile';

apps/web-ele/src/api/core/user-profile.ts

@@ -0,0 +1,23 @@
+import type { TimezoneOption } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 获取系统支持的时区列表
+ */
+export async function getTimezoneOptionsApi() {
+  return requestClient.get<TimezoneOption[]>('/profile/timezone');
+}
+/**
+ * 获取用户时区
+ */
+export async function getUserTimezoneApi(): Promise<null | string | undefined> {
+  return requestClient.get<null | string | undefined>('/user/timezone');
+}
+/**
+ * 设置用户时区
+ * @param timezone 时区
+ */
+export async function setUserTimezoneApi(timezone: string) {
+  return requestClient.post('/user/setTimezone', { timezone });
+}

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

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import type { ExtendedModalApi } from '@vben/common-ui';
 import type { NotificationItem } from '@vben/layouts';
 
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
@@ -11,14 +12,18 @@ import {
   BasicLayout,
   LockScreen,
   Notification,
+  TimezoneButton,
   UserDropdown,
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
+import { ElMessage } from 'element-plus';
+
+import { getTimezoneOptionsApi } from '#/api';
 import { $t } from '#/locales';
-import { useAuthStore } from '#/store';
+import { useAuthStore, useUserProfileStore } from '#/store';
 import LoginForm from '#/views/_core/authentication/login.vue';
 
 const notifications = ref<NotificationItem[]>([
@@ -60,6 +65,29 @@ const showDot = computed(() =>
   notifications.value.some((item) => !item.isRead),
 );
 
+const userProfileStore = useUserProfileStore();
+const computedTimezone = computed(() => userProfileStore.timezone);
+
+const timezoneOptions = ref<string[]>([]);
+onMounted(async () => {
+  timezoneOptions.value = ((await getTimezoneOptionsApi()) || []).map(
+    (item) => item.timezone,
+  );
+});
+const handleSetTimezone = async (
+  timezone: string,
+  modalApi: ExtendedModalApi,
+) => {
+  try {
+    modalApi.setState({ confirmLoading: true });
+    await userProfileStore.setTimezone(timezone);
+    ElMessage.success($t('ui.widgets.timezone.setSuccess'));
+    modalApi.close();
+  } finally {
+    modalApi.setState({ confirmLoading: false });
+  }
+};
+
 const menus = computed(() => [
   {
     handler: () => {
@@ -147,6 +175,14 @@ watch(
         @make-all="handleMakeAll"
       />
     </template>
+    <template #timezone>
+      <TimezoneButton
+        :ok-handler="handleSetTimezone"
+        :timezone="computedTimezone"
+        :timezone-options="timezoneOptions"
+        name="out"
+      />
+    </template>
     <template #extra>
       <AuthenticationLoginExpiredModal
         v-model:open="accessStore.loginExpired"

apps/web-ele/src/store/index.ts

@@ -1 +1,2 @@
 export * from './auth';
+export * from './user-profile';