risenstars/iot-manage-dashboard
2
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: increase support for multiple time zones

Browse Source 
* 优化实现方法
This commit is contained in:
zhongming4762 2025-10-29 19:47:10 +08:00
parent e01803ce9d
commit 4d713db546
31 changed files with 273 additions and 423 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
apps/backend-mock/api/user/timezone.ts → apps/backend-mock/api/timezone/getTimezone.ts
View File

0
apps/backend-mock/api/profile/timezone.ts → apps/backend-mock/api/timezone/getTimezoneOptions.ts
View File

2
apps/backend-mock/api/user/setTimezone.ts → apps/backend-mock/api/timezone/setTimezone.ts
View File

@ -10,5 +10,5 @@ export default eventHandler(async (event) => {
}
const { timezone } = await readBody(event);
setTimezone(timezone);
return useResponseSuccess();
return useResponseSuccess({});
});

4
apps/backend-mock/utils/mock-data.ts
View File

@ -7,7 +7,7 @@ export interface UserInfo {
homePath?: string;
}
export interface TimeZoneOption {
export interface TimezoneOption {
offset: number;
timeZone: string;
}
@ -397,7 +397,7 @@ export function getMenuIds(menus: any[]) {
/**
* 时区选项
*/
export const TIME_ZONE_OPTIONS: TimeZoneOption[] = [
export const TIME_ZONE_OPTIONS: TimezoneOption[] = [
{
offset: -5,
timezone: 'America/New_York',

1
apps/web-antd/src/api/core/index.ts
View File

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

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

@ -1,23 +0,0 @@
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 });
}

43
apps/web-antd/src/layouts/basic.vue
View File

@ -1,8 +1,7 @@
<script lang="ts" setup>
import type { ExtendedModalApi } from '@vben/common-ui';
import type { NotificationItem } from '@vben/layouts';
import { computed, onMounted, ref, unref, watch } from 'vue';
import { computed, ref, watch } from 'vue';
import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
@ -12,18 +11,14 @@ 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, useUserProfileStore } from '#/store';
import { useAuthStore } from '#/store';
import LoginForm from '#/views/_core/authentication/login.vue';
const notifications = ref<NotificationItem[]>([
@ -65,32 +60,6 @@ const showDot = computed(() =>
notifications.value.some((item) => !item.isRead),
);
const userProfileStore = useUserProfileStore();
const computedTimezone = computed(() => unref(userProfileStore.timezone));
const timezoneOptions = ref<string[]>([]);
onMounted(async () => {
timezoneOptions.value = ((await getTimezoneOptionsApi()) || []).map(
(item) => item.timezone,
);
});
const handleSetTimezone = async (
modalApi: ExtendedModalApi,
timezone?: string,
) => {
if (!timezone) {
return;
}
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: () => {
@ -178,14 +147,6 @@ 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"

1
apps/web-antd/src/store/index.ts
View File

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

58
apps/web-antd/src/store/user-profile.ts
View File

@ -1,58 +0,0 @@
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) {
// 保存用户的时区设置
await setUserTimezoneApi(timezone);
timezoneRef.value = timezone;
// 设置dayjs默认时区
setDefaultTimezone(timezone);
}
/**
* 初始化用户时区
* Initialize the user's timezone
*/
async function initTimezone() {
// 从服务器获取用户时区
const timezone = await getUserTimezoneApi();
if (timezone) {
timezoneRef.value = timezone;
// 设置dayjs默认时区
setDefaultTimezone(timezone);
}
}
initTimezone().catch((error) => {
console.error('Failed to initialize timezone during store setup:', error);
});
return {
timezone: timezoneRef,
setTimezone,
initTimezone,
};
});
export { useUserProfileStore };
// 解决热更新问题
const hot = import.meta.hot;
if (hot) {
hot.accept(acceptHMRUpdate(useUserProfileStore, hot));
}

1
apps/web-ele/src/api/core/index.ts
View File

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

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

@ -1,23 +0,0 @@
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 });
}

43
apps/web-ele/src/layouts/basic.vue
View File

@ -1,8 +1,7 @@
<script lang="ts" setup>
import type { ExtendedModalApi } from '@vben/common-ui';
import type { NotificationItem } from '@vben/layouts';
import { computed, onMounted, ref, unref, watch } from 'vue';
import { computed, ref, watch } from 'vue';
import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
@ -12,18 +11,14 @@ 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, useUserProfileStore } from '#/store';
import { useAuthStore } from '#/store';
import LoginForm from '#/views/_core/authentication/login.vue';
const notifications = ref<NotificationItem[]>([
@ -65,32 +60,6 @@ const showDot = computed(() =>
notifications.value.some((item) => !item.isRead),
);
const userProfileStore = useUserProfileStore();
const computedTimezone = computed(() => unref(userProfileStore.timezone));
const timezoneOptions = ref<string[]>([]);
onMounted(async () => {
timezoneOptions.value = ((await getTimezoneOptionsApi()) || []).map(
(item) => item.timezone,
);
});
const handleSetTimezone = async (
modalApi: ExtendedModalApi,
timezone?: string,
) => {
if (!timezone) {
return;
}
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: () => {
@ -178,14 +147,6 @@ 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"

1
apps/web-ele/src/store/index.ts
View File

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

58
apps/web-ele/src/store/user-profile.ts
View File

@ -1,58 +0,0 @@
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) {
// 保存用户的时区设置
await setUserTimezoneApi(timezone);
timezoneRef.value = timezone;
// 设置dayjs默认时区
setDefaultTimezone(timezone);
}
/**
* 初始化用户时区
* Initialize the user's timezone
*/
async function initTimezone() {
// 从服务器获取用户时区
const timezone = await getUserTimezoneApi();
if (timezone) {
timezoneRef.value = timezone;
// 设置dayjs默认时区
setDefaultTimezone(timezone);
}
}
initTimezone().catch((error) => {
console.error('Failed to initialize timezone during store setup:', error);
});
return {
timezone: timezoneRef,
setTimezone,
initTimezone,
};
});
export { useUserProfileStore };
// 解决热更新问题
const hot = import.meta.hot;
if (hot) {
hot.accept(acceptHMRUpdate(useUserProfileStore, hot));
}

1
apps/web-naive/src/api/core/index.ts
View File

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

23
apps/web-naive/src/api/core/user-profile.ts
View File

@ -1,23 +0,0 @@
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 });
}

44
apps/web-naive/src/layouts/basic.vue
View File

@ -1,8 +1,7 @@
<script lang="ts" setup>
import type { ExtendedModalApi } from '@vben/common-ui';
import type { NotificationItem } from '@vben/layouts';
import { computed, onMounted, ref, unref, watch } from 'vue';
import { computed, ref, watch } from 'vue';
import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
@ -12,21 +11,16 @@ 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 { useMessage } from 'naive-ui';
import { getTimezoneOptionsApi } from '#/api';
import { $t } from '#/locales';
import { useAuthStore, useUserProfileStore } from '#/store';
import { useAuthStore } from '#/store';
import LoginForm from '#/views/_core/authentication/login.vue';
const message = useMessage();
const notifications = ref<NotificationItem[]>([
{
avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
@ -66,32 +60,6 @@ const showDot = computed(() =>
notifications.value.some((item) => !item.isRead),
);
const userProfileStore = useUserProfileStore();
const computedTimezone = computed(() => unref(userProfileStore.timezone));
const timezoneOptions = ref<string[]>([]);
onMounted(async () => {
timezoneOptions.value = ((await getTimezoneOptionsApi()) || []).map(
(item) => item.timezone,
);
});
const handleSetTimezone = async (
modalApi: ExtendedModalApi,
timezone?: string,
) => {
if (!timezone) {
return;
}
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: () => {
@ -180,14 +148,6 @@ 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"

1
apps/web-naive/src/store/index.ts
View File

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

58
apps/web-naive/src/store/user-profile.ts
View File

@ -1,58 +0,0 @@
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) {
// 保存用户的时区设置
await setUserTimezoneApi(timezone);
timezoneRef.value = timezone;
// 设置dayjs默认时区
setDefaultTimezone(timezone);
}
/**
* 初始化用户时区
* Initialize the user's timezone
*/
async function initTimezone() {
// 从服务器获取用户时区
const timezone = await getUserTimezoneApi();
if (timezone) {
timezoneRef.value = timezone;
// 设置dayjs默认时区
setDefaultTimezone(timezone);
}
}
initTimezone().catch((error) => {
console.error('Failed to initialize timezone during store setup:', error);
});
return {
timezone: timezoneRef,
setTimezone,
initTimezone,
};
});
export { useUserProfileStore };
// 解决热更新问题
const hot = import.meta.hot;
if (hot) {
hot.accept(acceptHMRUpdate(useUserProfileStore, hot));
}

10
packages/@core/base/typings/src/app.d.ts vendored
View File

@ -93,6 +93,15 @@ type PageTransitionType = 'fade' | 'fade-down' | 'fade-slide' | 'fade-up';
*/
type AuthPageLayoutType = 'panel-center' | 'panel-left' | 'panel-right';
/**
* 时区选项
*/
interface TimezoneOption {
label: string;
offset: number;
timezone: string;
}
export type {
AccessModeType,
AuthPageLayoutType,
@ -108,4 +117,5 @@ export type {
PreferencesButtonPositionType,
TabsStyleType,
ThemeModeType,
TimezoneOption,
};

1
packages/@core/base/typings/src/index.ts
View File

@ -3,5 +3,4 @@ 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';

9
packages/@core/base/typings/src/user-profile.d.ts vendored
View File

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

35
packages/@core/preferences/src/constants.ts
View File

@ -1,4 +1,4 @@
import type { BuiltinThemeType } from '@vben-core/typings';
import type { BuiltinThemeType, TimezoneOption } from '@vben-core/typings';
interface BuiltinThemePreset {
color: string;
@ -81,8 +81,39 @@ const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
},
];
/**
* 时区选项
*/
const DEFAULT_TIME_ZONE_OPTIONS: TimezoneOption[] = [
{
offset: -5,
timezone: 'America/New_York',
label: 'America/New_York(GMT-5)',
},
{
offset: 0,
timezone: 'Europe/London',
label: 'Europe/London(GMT0)',
},
{
offset: 8,
timezone: 'Asia/Shanghai',
label: 'Asia/Shanghai(GMT+8)',
},
{
offset: 9,
timezone: 'Asia/Tokyo',
label: 'Asia/Tokyo(GMT+9)',
},
{
offset: 9,
timezone: 'Asia/Seoul',
label: 'Asia/Seoul(GMT+9)',
},
];
export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 7);
export { BUILT_IN_THEME_PRESETS };
export { BUILT_IN_THEME_PRESETS, DEFAULT_TIME_ZONE_OPTIONS };
export type { BuiltinThemePreset };

4
packages/effects/layouts/src/basic/header/header.vue
View File

@ -13,6 +13,7 @@ import {
LanguageToggle,
PreferencesButton,
ThemeToggle,
TimezoneButton,
} from '../../widgets';
interface Props {
@ -172,6 +173,9 @@ function clearPreferencesAndLogout() {
<template v-else-if="slot.name === 'fullscreen'">
<VbenFullScreen class="mr-1" />
</template>
<template v-else-if="slot.name === 'timezone'">
<TimezoneButton class="mr-1 mt-[2px]" />
</template>
</slot>
</template>
</div>

71
packages/effects/layouts/src/widgets/timezone/timezone-button.vue
View File

@ -1,10 +1,9 @@
<script setup lang="ts">
import type { ExtendedModalApi } from '@vben-core/popup-ui';
import { ref, unref, watch } from 'vue';
import { ref, unref } from 'vue';
import { createIconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales';
import { useTimezoneStore } from '@vben/stores';
import { useVbenModal } from '@vben-core/popup-ui';
import {
@ -13,42 +12,43 @@ import {
VbenIconButton,
} from '@vben-core/shadcn-ui';
interface Props {
timezoneOptions: string[];
okHandler?: (
modalApi: ExtendedModalApi,
timezone?: string,
) => Promise<void> | void;
timezone?: string;
}
const props = defineProps<Props>();
const emit = defineEmits<{ change: [string] }>();
const TimezoneIcon = createIconifyIcon('fluent-mdl2:world-clock');
const timezoneStore = useTimezoneStore();
const timezoneRef = ref<null | string>(null);
const timezoneOptionsRef = ref<
{
label: string;
value: string;
}[]
>([]);
const [Modal, modalApi] = useVbenModal({
fullscreenButton: false,
onConfirm: () => {
props.okHandler?.(modalApi, unref(timezoneValue));
onConfirm: async () => {
try {
modalApi.setState({ confirmLoading: true });
if (timezoneRef.value) {
await timezoneStore.setTimezone(unref(timezoneRef));
}
modalApi.close();
} finally {
modalApi.setState({ confirmLoading: false });
}
},
async onOpenChange(isOpen) {
if (isOpen) {
timezoneRef.value = unref(timezoneStore.timezone);
timezoneOptionsRef.value = await timezoneStore.getTimezoneOptions();
}
},
});
const handleClick = () => {
modalApi.open();
};
const timezoneValue = ref<string | undefined>(unref(props.timezone));
watch(
() => props.timezone,
(newTimezone) => {
timezoneValue.value = unref(newTimezone);
},
);
const handleClickItem = (timezone: string) => {
timezoneValue.value = timezone;
emit('change', timezone);
};
</script>
<template>
@ -62,15 +62,16 @@ const handleClickItem = (timezone: string) => {
</VbenIconButton>
<Modal :title="$t('ui.widgets.timezone.setTimezone')">
<div class="timezone-container">
<RadioGroup v-model="timezoneValue" class="flex flex-col gap-2">
<RadioGroup v-model="timezoneRef" 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)"
v-for="item in timezoneOptionsRef"
:key="`container${item.value}`"
>
<RadioGroupItem :id="item" :value="item" />
<label :for="item" class="cursor-pointer">{{ item }}</label>
<RadioGroupItem :id="item.value" :value="item.value" />
<label :for="item.value" class="cursor-pointer">{{
item.label
}}</label>
</div>
</RadioGroup>
</div>

1
packages/stores/src/modules/index.ts
View File

@ -1,3 +1,4 @@
export * from './access';
export * from './tabbar';
export * from './timezone';
export * from './user';

125
packages/stores/src/modules/timezone.ts Normal file
View File

@ -0,0 +1,125 @@
import { ref, unref } from 'vue';
import { DEFAULT_TIME_ZONE_OPTIONS } from '@vben-core/preferences';
import { getTimezone, setDefaultTimezone } from '@vben-core/shared/utils';
import { acceptHMRUpdate, defineStore } from 'pinia';
interface TimezoneHandler {
getTimezone?: () => Promise<null | string | undefined>;
getTimezoneOptions?: () => Promise<
{
label: string;
value: string;
}[]
>;
onTimezoneChange?: (timezone: string) => Promise<void>;
}
/**
* 默认时区处理模块
* 时区存储基于pinia存储插件
*/
const getDefaultTimezoneHandler = (): TimezoneHandler => {
return {
getTimezoneOptions: () => {
return Promise.resolve(
DEFAULT_TIME_ZONE_OPTIONS.map((item) => {
return {
label: item.label,
value: item.timezone,
};
}),
);
},
};
};
/**
* 自定义时区处理模块
*/
let customTimezoneHandler: null | Partial<TimezoneHandler> = null;
const setTimezoneHandler = (handler: Partial<TimezoneHandler>) => {
customTimezoneHandler = handler;
};
/**
* 获取时区处理模块
*/
const getTimezoneHandler = () => {
return {
...getDefaultTimezoneHandler(),
...customTimezoneHandler,
};
};
/**
* timezone支持模块
*/
const useTimezoneStore = defineStore(
'core-timezone',
() => {
const timezoneRef = ref(
getTimezone() || new Intl.DateTimeFormat().resolvedOptions().timeZone,
);
const timezoneHandler = getTimezoneHandler();
/**
* 初始化时区
* Initialize the timezone
*/
async function initTimezone() {
const timezone = await timezoneHandler.getTimezone?.();
if (timezone) {
timezoneRef.value = timezone;
}
// 设置dayjs默认时区
setDefaultTimezone(unref(timezoneRef));
}
/**
* 设置时区
* Set the timezone
* @param timezone 时区字符串
*/
async function setTimezone(timezone: string) {
await timezoneHandler.onTimezoneChange?.(timezone);
timezoneRef.value = timezone;
// 设置dayjs默认时区
setDefaultTimezone(timezone);
}
/**
* 获取时区选项
* Get the timezone options
*/
async function getTimezoneOptions() {
return await timezoneHandler.getTimezoneOptions();
}
initTimezone().catch((error) => {
console.error('Failed to initialize timezone during store setup:', error);
});
return {
timezone: timezoneRef,
setTimezone,
getTimezoneOptions,
};
},
{
persist: {
// 持久化
pick: ['timezone'],
},
},
);
export { setTimezoneHandler, useTimezoneStore };
// 解决热更新问题
const hot = import.meta.hot;
if (hot) {
hot.accept(acceptHMRUpdate(useTimezoneStore, hot));
}

1
playground/src/api/core/index.ts
View File

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

30
playground/src/api/core/timezone.ts Normal file
View File

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

4
playground/src/bootstrap.ts
View File

@ -15,6 +15,7 @@ import { router } from '#/router';
import { initComponentAdapter } from './adapter/component';
import { initSetupVbenForm } from './adapter/form';
import App from './app.vue';
import { initTimezone } from './timezone-init';
async function bootstrap(namespace: string) {
// 初始化组件适配器
@ -46,6 +47,9 @@ async function bootstrap(namespace: string) {
// 配置 pinia-tore
await initStores(app, { namespace });
// 初始化时区HANDLER
initTimezone();
// 安装权限指令
registerAccessDirective(app);

20
playground/src/timezone-init.ts Normal file
View File

@ -0,0 +1,20 @@
import { setTimezoneHandler } from '@vben/stores';
import { getTimezoneApi, getTimezoneOptionsApi, setTimezoneApi } from '#/api';
/**
* 初始化时区处理，通过API保存时区设置
*/
export function initTimezone() {
setTimezoneHandler({
getTimezone() {
return getTimezoneApi();
},
setTimezone(timezone: string) {
return setTimezoneApi(timezone);
},
getTimezoneOptions() {
return getTimezoneOptionsApi();
},
});
}