feat: increase support for multiple time zones

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';

apps/web-ele/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));
+}