提交 d677729a 作者: Vben

perf(i18n): improve circular dependencies

上级 d81481c5
...@@ -29,17 +29,12 @@ ...@@ -29,17 +29,12 @@
export default defineComponent({ export default defineComponent({
name: 'DarkModeToggle', name: 'DarkModeToggle',
components: { SvgIcon }, components: { SvgIcon },
// props: {
// size: {
// type: String,
// default: 'default',
// validate: (val) => ['default', 'large'].includes(val),
// },
// },
setup() { setup() {
const { prefixCls } = useDesign('dark-mode-toggle'); const { prefixCls } = useDesign('dark-mode-toggle');
const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting(); const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK); const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
function toggleDarkMode() { function toggleDarkMode() {
const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK; const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
setDarkMode(darkMode); setDarkMode(darkMode);
...@@ -95,16 +90,5 @@ ...@@ -95,16 +90,5 @@
transform: translateX(calc(100% + 2px)); transform: translateX(calc(100% + 2px));
} }
} }
// &--large {
// width: 70px;
// height: 34px;
// padding: 0 10px;
// .@{prefix-cls}-inner {
// width: 26px;
// height: 26px;
// }
// }
} }
</style> </style>
<script lang="tsx"> <script lang="tsx">
import { defineComponent, ref, unref } from 'vue'; import { defineComponent, ref, unref } from 'vue';
import { Tooltip } from 'ant-design-vue'; import { Tooltip } from 'ant-design-vue';
import { SearchOutlined } from '@ant-design/icons-vue'; import { SearchOutlined } from '@ant-design/icons-vue';
import AppSearchModal from './AppSearchModal.vue'; import AppSearchModal from './AppSearchModal.vue';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
export default defineComponent({ export default defineComponent({
name: 'AppSearch', name: 'AppSearch',
components: { AppSearchModal, Tooltip },
setup() { setup() {
const showModal = ref(false); const showModal = ref(false);
const { getShowSearch } = useHeaderSetting();
const { t } = useI18n(); const { t } = useI18n();
function changeModal(show: boolean) { function changeModal(show: boolean) {
...@@ -22,9 +16,6 @@ ...@@ -22,9 +16,6 @@
} }
return () => { return () => {
if (!unref(getShowSearch)) {
return null;
}
return ( return (
<div class="p-1" onClick={changeModal.bind(null, true)}> <div class="p-1" onClick={changeModal.bind(null, true)}>
<Tooltip> <Tooltip>
......
...@@ -2,21 +2,17 @@ ...@@ -2,21 +2,17 @@
<div :class="`${prefixCls}`"> <div :class="`${prefixCls}`">
<AppSearchKeyItem :class="`${prefixCls}__item`" icon="ant-design:enter-outlined" /> <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ant-design:enter-outlined" />
<span>{{ t('component.app.toSearch') }}</span> <span>{{ t('component.app.toSearch') }}</span>
<AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-up-outline" /> <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-up-outline" />
<AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-down-outline" /> <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-down-outline" />
<span>{{ t('component.app.toNavigate') }}</span> <span>{{ t('component.app.toNavigate') }}</span>
<AppSearchKeyItem :class="`${prefixCls}__item`" icon="mdi:keyboard-esc" /> <AppSearchKeyItem :class="`${prefixCls}__item`" icon="mdi:keyboard-esc" />
<span>{{ t('common.closeText') }}</span> <span>{{ t('common.closeText') }}</span>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import AppSearchKeyItem from './AppSearchKeyItem.vue'; import AppSearchKeyItem from './AppSearchKeyItem.vue';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
export default defineComponent({ export default defineComponent({
......
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
visible: propTypes.bool, visible: propTypes.bool,
}, },
emits: ['close'], emits: ['close'],
setup(_, { emit }) { setup(props, { emit }) {
const scrollWrap = ref<ElRef>(null); const scrollWrap = ref<ElRef>(null);
const { prefixCls } = useDesign('app-search-modal'); const { prefixCls } = useDesign('app-search-modal');
const { t } = useI18n(); const { t } = useI18n();
...@@ -96,9 +96,7 @@ ...@@ -96,9 +96,7 @@
const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } = const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } =
useMenuSearch(refs, scrollWrap, emit); useMenuSearch(refs, scrollWrap, emit);
const getIsNotData = computed(() => { const getIsNotData = computed(() => !keyword || unref(searchResult).length === 0);
return !keyword || unref(searchResult).length === 0;
});
const getClass = computed(() => { const getClass = computed(() => {
return [ return [
...@@ -109,13 +107,8 @@ ...@@ -109,13 +107,8 @@
]; ];
}); });
function handleClose() {
searchResult.value = [];
emit('close');
}
watch( watch(
() => _.visible, () => props.visible,
(v: boolean) => { (v: boolean) => {
v && v &&
nextTick(() => { nextTick(() => {
...@@ -124,6 +117,11 @@ ...@@ -124,6 +117,11 @@
} }
); );
function handleClose() {
searchResult.value = [];
emit('close');
}
return { return {
t, t,
prefixCls, prefixCls,
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<!-- action --> <!-- action -->
<div :class="`${prefixCls}-action`"> <div :class="`${prefixCls}-action`">
<AppSearch :class="`${prefixCls}-action__item `" /> <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" /> <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
...@@ -123,6 +123,7 @@ ...@@ -123,6 +123,7 @@
getShowBread, getShowBread,
getShowHeaderLogo, getShowHeaderLogo,
getShowHeader, getShowHeader,
getShowSearch,
} = useHeaderSetting(); } = useHeaderSetting();
const { getShowLocalePicker } = useLocale(); const { getShowLocalePicker } = useLocale();
...@@ -190,6 +191,7 @@ ...@@ -190,6 +191,7 @@
getIsMixSidebar, getIsMixSidebar,
getShowSettingButton, getShowSettingButton,
getShowSetting, getShowSetting,
getShowSearch,
}; };
}, },
}); });
......
import type { LocaleType } from '/#/config';
import { set } from 'lodash-es'; import { set } from 'lodash-es';
export const loadLocalePool: LocaleType[] = [];
export function setHtmlPageLang(locale: LocaleType) {
document.querySelector('html')?.setAttribute('lang', locale);
}
export function setLoadLocalePool(cb: (loadLocalePool: LocaleType[]) => void) {
cb(loadLocalePool);
}
export function genMessage(langs: Record<string, Record<string, any>>, prefix = 'lang') { export function genMessage(langs: Record<string, Record<string, any>>, prefix = 'lang') {
const obj: Recordable = {}; const obj: Recordable = {};
......
...@@ -2,8 +2,7 @@ import type { App } from 'vue'; ...@@ -2,8 +2,7 @@ import type { App } from 'vue';
import type { I18n, I18nOptions } from 'vue-i18n'; import type { I18n, I18nOptions } from 'vue-i18n';
import { createI18n } from 'vue-i18n'; import { createI18n } from 'vue-i18n';
import { setHtmlPageLang, setLoadLocalePool } from './helper';
import { setLoadLocalePool, setHtmlPageLang } from './useLocale';
import { localeSetting } from '/@/settings/localeSetting'; import { localeSetting } from '/@/settings/localeSetting';
import { useLocaleStoreWithOut } from '/@/store/modules/locale'; import { useLocaleStoreWithOut } from '/@/store/modules/locale';
...@@ -17,7 +16,7 @@ async function createI18nOptions(): Promise<I18nOptions> { ...@@ -17,7 +16,7 @@ async function createI18nOptions(): Promise<I18nOptions> {
const defaultLocal = await import(`./lang/${locale}.ts`); const defaultLocal = await import(`./lang/${locale}.ts`);
const message = defaultLocal.default?.message ?? {}; const message = defaultLocal.default?.message ?? {};
setHtmlPageLang(locale) setHtmlPageLang(locale);
setLoadLocalePool((loadLocalePool) => { setLoadLocalePool((loadLocalePool) => {
loadLocalePool.push(locale); loadLocalePool.push(locale);
}); });
......
...@@ -8,6 +8,7 @@ import moment from 'moment'; ...@@ -8,6 +8,7 @@ import moment from 'moment';
import { i18n } from './setupI18n'; import { i18n } from './setupI18n';
import { useLocaleStoreWithOut } from '/@/store/modules/locale'; import { useLocaleStoreWithOut } from '/@/store/modules/locale';
import { unref, computed } from 'vue'; import { unref, computed } from 'vue';
import { loadLocalePool, setHtmlPageLang } from './helper';
interface LangModule { interface LangModule {
message: Recordable; message: Recordable;
...@@ -15,16 +16,6 @@ interface LangModule { ...@@ -15,16 +16,6 @@ interface LangModule {
momentLocaleName: string; momentLocaleName: string;
} }
const loadLocalePool: LocaleType[] = [];
export function setHtmlPageLang(locale: LocaleType) {
document.querySelector('html')?.setAttribute('lang', locale);
}
export function setLoadLocalePool(cb: (loadLocalePool: LocaleType[]) => void) {
cb(loadLocalePool);
}
function setI18nLanguage(locale: LocaleType) { function setI18nLanguage(locale: LocaleType) {
const localeStore = useLocaleStoreWithOut(); const localeStore = useLocaleStoreWithOut();
...@@ -34,7 +25,7 @@ function setI18nLanguage(locale: LocaleType) { ...@@ -34,7 +25,7 @@ function setI18nLanguage(locale: LocaleType) {
(i18n.global.locale as any).value = locale; (i18n.global.locale as any).value = locale;
} }
localeStore.setLocaleInfo({ locale }); localeStore.setLocaleInfo({ locale });
setHtmlPageLang(locale) setHtmlPageLang(locale);
} }
export function useLocale() { export function useLocale() {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论