feat: increase support for multiple time zones

packages/@core/base/shared/src/utils/date.ts

@@ -1,4 +1,9 @@
 import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
 
 export function formatDate(time: number | string, format = 'YYYY-MM-DD') {
   try {
@@ -6,7 +11,7 @@ export function formatDate(time: number | string, format = 'YYYY-MM-DD') {
     if (!date.isValid()) {
       throw new Error('Invalid date');
     }
-    return date.format(format);
+    return date.tz().format(format);
   } catch (error) {
     console.error(`Error formatting date: ${error}`);
     return time;
@@ -24,3 +29,19 @@ export function isDate(value: any): value is Date {
 export function isDayjsObject(value: any): value is dayjs.Dayjs {
   return dayjs.isDayjs(value);
 }
+
+/**
+ * 设置默认时区
+ * @param timezone
+ */
+export const setDefaultTimezone = (timezone?: string) => {
+  timezone ? dayjs.tz.setDefault(timezone) : dayjs.tz.setDefault();
+};
+
+/**
+ * 获取当前时区
+ * @returns 当前时区
+ */
+export const getTimezone = () => {
+  return dayjs.tz.guess();
+};

packages/@core/base/typings/src/index.ts

@@ -3,4 +3,5 @@ export type * from './basic';
 export type * from './helper';
 export type * from './menu-record';
 export type * from './tabs';
+export type * from './user-profile';
 export type * from './vue-router';

packages/@core/base/typings/src/user-profile.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 时区选项
+ */
+interface TimezoneOption {
+  offset: number;
+  timezone: string;
+}
+
+export type { TimezoneOption };

packages/@core/preferences/src/config.ts

@@ -134,6 +134,7 @@ const defaultPreferences: Preferences = {
     refresh: true,
     sidebarToggle: true,
     themeToggle: true,
+    timezone: true,
   },
 };
 

packages/@core/preferences/src/types.ts

@@ -275,6 +275,8 @@ interface WidgetPreferences {
   sidebarToggle: boolean;
   /** 是否显示主题切换部件 */
   themeToggle: boolean;
+  /** 是否显示时区部件 */
+  timezone: boolean;
 }
 
 interface Preferences {

packages/effects/layouts/src/basic/header/header.vue

@@ -66,15 +66,21 @@ const rightSlots = computed(() => {
       name: 'language-toggle',
     });
   }
-  if (preferences.widget.fullscreen) {
+  if (preferences.widget.timezone) {
     list.push({
       index: REFERENCE_VALUE + 40,
+      name: 'timezone',
+    });
+  }
+  if (preferences.widget.fullscreen) {
+    list.push({
+      index: REFERENCE_VALUE + 50,
       name: 'fullscreen',
     });
   }
   if (preferences.widget.notification) {
     list.push({
-      index: REFERENCE_VALUE + 50,
+      index: REFERENCE_VALUE + 60,
       name: 'notification',
     });
   }

packages/effects/layouts/src/basic/layout.vue

@@ -302,6 +302,9 @@ const headerSlots = computed(() => {
         <template #notification>
           <slot name="notification"></slot>
         </template>
+        <template #timezone>
+          <slot name="timezone"></slot>
+        </template>
         <template v-for="item in headerSlots" #[item]>
           <slot :name="item"></slot>
         </template>

packages/effects/layouts/src/widgets/index.ts

@@ -8,4 +8,5 @@ export * from './lock-screen';
 export * from './notification';
 export * from './preferences';
 export * from './theme-toggle';
+export * from './timezone';
 export * from './user-dropdown';

packages/effects/layouts/src/widgets/timezone/index.ts

@@ -0,0 +1 @@
+export { default as TimezoneButton } from './timezone-button.vue';

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { ExtendedModalApi } from '@vben-core/popup-ui';
+
+import { ref, unref, watch } from 'vue';
+
+import { createIconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { useVbenModal } from '@vben-core/popup-ui';
+import {
+  RadioGroup,
+  RadioGroupItem,
+  VbenIconButton,
+} from '@vben-core/shadcn-ui';
+
+interface Props {
+  timezoneOptions: string[];
+  okHandler?: (
+    timezone: string,
+    modalApi: ExtendedModalApi,
+  ) => Promise<void> | void;
+  timezone?: string;
+}
+
+interface Listener {
+  change: (timezone: string) => void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Listener>();
+
+const TimezoneIcon = createIconifyIcon('fluent-mdl2:world-clock');
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onConfirm: () => {
+    props.okHandler?.(unref(timezoneValue), modalApi);
+  },
+});
+
+const handleClick = () => {
+  modalApi.open();
+};
+
+const timezoneValue = ref(props.timezone);
+watch(
+  () => props.timezone,
+  (newTimezone) => {
+    timezoneValue.value = newTimezone;
+  },
+);
+const handleClickItem = (timezone: string) => {
+  timezoneValue.value = timezone;
+  emit('change', timezone);
+};
+</script>
+
+<template>
+  <div>
+    <VbenIconButton
+      :tooltip="$t('ui.widgets.timezone.setTimezone')"
+      class="hover:animate-[shrink_0.3s_ease-in-out]"
+      @click="handleClick"
+    >
+      <TimezoneIcon class="text-foreground size-4" />
+    </VbenIconButton>
+    <Modal :title="$t('ui.widgets.timezone.setTimezone')">
+      <div class="timezone-container">
+        <RadioGroup v-model="timezoneValue" class="flex flex-col gap-2">
+          <div
+            class="flex cursor-pointer items-center gap-2"
+            v-for="item in props.timezoneOptions"
+            :key="`container${item}`"
+            @click="handleClickItem(item)"
+          >
+            <RadioGroupItem :id="item" :value="item" />
+            <label class="cursor-pointer">{{ item }}</label>
+          </div>
+        </RadioGroup>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  padding-left: 20px;
+}
+</style>

packages/locales/src/langs/en-US/ui.json

@@ -102,6 +102,10 @@
       "errorPasswordTip": "Password error, please re-enter",
       "backToLogin": "Back to login",
       "entry": "Enter the system"
+    },
+    "timezone": {
+      "setTimezone": "Set Timezone",
+      "setSuccess": "Timezone set successfully"
     }
   }
 }

packages/locales/src/langs/zh-CN/ui.json

@@ -102,6 +102,10 @@
       "errorPasswordTip": "密码错误，请重新输入",
       "backToLogin": "返回登录",
       "entry": "进入系统"
+    },
+    "timezone": {
+      "setTimezone": "设置时区",
+      "setSuccess": "时区设置成功"
     }
   }
 }