feat: increase support for multiple time zones

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"