mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-09-30 03:02:22 +07:00
MHSanaei
cf5767acd1
The sidebar theme submenu (Theme / Dark / Ultra dark) and the dashboard's
Xray status badge ("Xray is running" etc.) were hardcoded English strings.
Wire them through vue-i18n: ThemeSwitch.vue uses menu.theme/dark/ultraDark,
and XrayStatusCard.vue derives the badge text from the existing
pages.index.xrayStatus{Running,Stop,Error,Unknown} keys (status.js no
longer carries an English stateMsg field).
The "Nodes" menu item was already keyed as menu.nodes but only en-US and
fa-IR had a translation; add it to the other 11 languages, matching the
wording each file already uses for pages.nodes.title.
#4201
50 lines
1.4 KiB
Vue
50 lines
1.4 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { BulbFilled, BulbOutlined } from '@ant-design/icons-vue';
|
|
import { theme, currentTheme, toggleTheme, toggleUltra, pauseAnimationsUntilLeave } from '@/composables/useTheme.js';
|
|
|
|
const { t } = useI18n();
|
|
|
|
const BulbIcon = computed(() => (theme.isDark ? BulbFilled : BulbOutlined));
|
|
|
|
function onDarkChange() {
|
|
pauseAnimationsUntilLeave('change-theme');
|
|
toggleTheme();
|
|
}
|
|
|
|
function onUltraClick() {
|
|
pauseAnimationsUntilLeave('change-theme-ultra');
|
|
toggleUltra();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<a-menu :theme="currentTheme" mode="inline" :selected-keys="[]">
|
|
<a-sub-menu>
|
|
<template #title>
|
|
<span>
|
|
<component :is="BulbIcon" />
|
|
<span class="theme-label">{{ t('menu.theme') }}</span>
|
|
</span>
|
|
</template>
|
|
|
|
<a-menu-item id="change-theme" class="ant-menu-theme-switch">
|
|
<span>{{ t('menu.dark') }}</span>
|
|
<a-switch :style="{ marginLeft: '2px' }" size="small" :checked="theme.isDark" @change="onDarkChange" />
|
|
</a-menu-item>
|
|
|
|
<a-menu-item v-if="theme.isDark" id="change-theme-ultra" class="ant-menu-theme-switch">
|
|
<span>{{ t('menu.ultraDark') }}</span>
|
|
<a-checkbox :style="{ marginLeft: '2px' }" :checked="theme.isUltra" @click="onUltraClick" />
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
</a-menu>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.theme-label {
|
|
margin-left: 8px;
|
|
}
|
|
</style>
|