提交 2f6d133b 作者: vben

refactor(application): change to setup syntax

上级 9035fd19
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
<SvgIcon size="14" name="moon" /> <SvgIcon size="14" name="moon" />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, computed, unref } from 'vue'; import { computed, unref } from 'vue';
import { SvgIcon } from '/@/components/Icon'; import { SvgIcon } from '/@/components/Icon';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; import { useRootSetting } from '/@/hooks/setting/useRootSetting';
...@@ -14,39 +14,25 @@ ...@@ -14,39 +14,25 @@
import { updateDarkTheme } from '/@/logics/theme/dark'; import { updateDarkTheme } from '/@/logics/theme/dark';
import { ThemeEnum } from '/@/enums/appEnum'; import { ThemeEnum } from '/@/enums/appEnum';
export default defineComponent({ const { prefixCls } = useDesign('dark-switch');
name: 'DarkModeToggle', const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
components: { SvgIcon },
setup() {
const { prefixCls } = useDesign('dark-switch');
const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK); const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
const getClass = computed(() => [ const getClass = computed(() => [
prefixCls, prefixCls,
{ {
[`${prefixCls}--dark`]: unref(isDark), [`${prefixCls}--dark`]: unref(isDark),
},
]);
function toggleDarkMode() {
const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
setDarkMode(darkMode);
updateDarkTheme(darkMode);
updateHeaderBgColor();
updateSidebarBgColor();
}
return {
getClass,
isDark,
prefixCls,
toggleDarkMode,
getShowDarkModeToggle,
};
}, },
}); ]);
function toggleDarkMode() {
const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
setDarkMode(darkMode);
updateDarkTheme(darkMode);
updateHeaderBgColor();
updateSidebarBgColor();
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-dark-switch'; @prefix-cls: ~'@{namespace}-dark-switch';
......
...@@ -17,16 +17,16 @@ ...@@ -17,16 +17,16 @@
</span> </span>
</Dropdown> </Dropdown>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import type { LocaleType } from '/#/config'; import type { LocaleType } from '/#/config';
import type { DropMenu } from '/@/components/Dropdown'; import type { DropMenu } from '/@/components/Dropdown';
import { defineComponent, ref, watchEffect, unref, computed } from 'vue'; import { ref, watchEffect, unref, computed } from 'vue';
import { Dropdown } from '/@/components/Dropdown'; import { Dropdown } from '/@/components/Dropdown';
import { Icon } from '/@/components/Icon'; import { Icon } from '/@/components/Icon';
import { useLocale } from '/@/locales/useLocale'; import { useLocale } from '/@/locales/useLocale';
import { localeList } from '/@/settings/localeSetting'; import { localeList } from '/@/settings/localeSetting';
const props = { const props = defineProps({
/** /**
* Whether to display text * Whether to display text
*/ */
...@@ -35,45 +35,36 @@ ...@@ -35,45 +35,36 @@
* Whether to refresh the interface when changing * Whether to refresh the interface when changing
*/ */
reload: { type: Boolean }, reload: { type: Boolean },
}; });
export default defineComponent({
name: 'AppLocalPicker',
components: { Dropdown, Icon },
props,
setup(props) {
const selectedKeys = ref<string[]>([]);
const { changeLocale, getLocale } = useLocale(); const selectedKeys = ref<string[]>([]);
const getLocaleText = computed(() => { const { changeLocale, getLocale } = useLocale();
const key = selectedKeys.value[0];
if (!key) {
return '';
}
return localeList.find((item) => item.event === key)?.text;
});
watchEffect(() => { const getLocaleText = computed(() => {
selectedKeys.value = [unref(getLocale)]; const key = selectedKeys.value[0];
}); if (!key) {
return '';
}
return localeList.find((item) => item.event === key)?.text;
});
async function toggleLocale(lang: LocaleType | string) { watchEffect(() => {
await changeLocale(lang as LocaleType); selectedKeys.value = [unref(getLocale)];
selectedKeys.value = [lang as string]; });
props.reload && location.reload();
}
function handleMenuEvent(menu: DropMenu) { async function toggleLocale(lang: LocaleType | string) {
if (unref(getLocale) === menu.event) { await changeLocale(lang as LocaleType);
return; selectedKeys.value = [lang as string];
} props.reload && location.reload();
toggleLocale(menu.event as string); }
}
return { localeList, handleMenuEvent, selectedKeys, getLocaleText }; function handleMenuEvent(menu: DropMenu) {
}, if (unref(getLocale) === menu.event) {
}); return;
}
toggleLocale(menu.event as string);
}
</script> </script>
<style lang="less"> <style lang="less">
......
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, computed, unref } from 'vue'; import { computed, unref } from 'vue';
import { useGlobSetting } from '/@/hooks/setting'; import { useGlobSetting } from '/@/hooks/setting';
import { useGo } from '/@/hooks/web/usePage'; import { useGo } from '/@/hooks/web/usePage';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
import { PageEnum } from '/@/enums/pageEnum'; import { PageEnum } from '/@/enums/pageEnum';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
const props = { const props = defineProps({
/** /**
* The theme of the current parent component * The theme of the current parent component
*/ */
...@@ -32,45 +32,30 @@ ...@@ -32,45 +32,30 @@
* The title is also displayed when the menu is collapsed * The title is also displayed when the menu is collapsed
*/ */
alwaysShowTitle: { type: Boolean }, alwaysShowTitle: { type: Boolean },
}; });
export default defineComponent({
name: 'AppLogo',
props: props,
setup(props) {
const { prefixCls } = useDesign('app-logo');
const { getCollapsedShowTitle } = useMenuSetting();
const userStore = useUserStore();
const { title } = useGlobSetting();
const go = useGo();
const getAppLogoClass = computed(() => [
prefixCls,
props.theme,
{ 'collapsed-show-title': unref(getCollapsedShowTitle) },
]);
const getTitleClass = computed(() => [ const { prefixCls } = useDesign('app-logo');
`${prefixCls}__title`, const { getCollapsedShowTitle } = useMenuSetting();
{ const userStore = useUserStore();
'xs:opacity-0': !props.alwaysShowTitle, const { title } = useGlobSetting();
}, const go = useGo();
]);
function goHome() { const getAppLogoClass = computed(() => [
go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME); prefixCls,
} props.theme,
{ 'collapsed-show-title': unref(getCollapsedShowTitle) },
]);
return { const getTitleClass = computed(() => [
getAppLogoClass, `${prefixCls}__title`,
getTitleClass, {
getCollapsedShowTitle, 'xs:opacity-0': !props.alwaysShowTitle,
goHome,
title,
prefixCls,
};
}, },
}); ]);
function goHome() {
go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-app-logo'; @prefix-cls: ~'@{namespace}-app-logo';
......
...@@ -10,20 +10,12 @@ ...@@ -10,20 +10,12 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
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({ const { prefixCls } = useDesign('app-search-footer');
name: 'AppSearchFooter', const { t } = useI18n();
components: { AppSearchKeyItem },
setup() {
const { prefixCls } = useDesign('app-search-footer');
const { t } = useI18n();
return { prefixCls, t };
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-app-search-footer'; @prefix-cls: ~'@{namespace}-app-search-footer';
......
...@@ -3,11 +3,9 @@ ...@@ -3,11 +3,9 @@
<Icon :icon="icon" /> <Icon :icon="icon" />
</span> </span>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import { Icon } from '/@/components/Icon'; import { Icon } from '/@/components/Icon';
export default defineComponent({ defineProps({
components: { Icon }, icon: String,
props: { icon: String },
}); });
</script> </script>
...@@ -56,85 +56,61 @@ ...@@ -56,85 +56,61 @@
</transition> </transition>
</Teleport> </Teleport>
</template> </template>
<script lang="ts">
import { defineComponent, computed, unref, ref, watch, nextTick } from 'vue'; <script lang="ts" setup>
import { computed, unref, ref, watch, nextTick } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue'; import { SearchOutlined } from '@ant-design/icons-vue';
import AppSearchFooter from './AppSearchFooter.vue'; import AppSearchFooter from './AppSearchFooter.vue';
import Icon from '/@/components/Icon'; import Icon from '/@/components/Icon';
import clickOutside from '/@/directives/clickOutside'; import vClickOutside from '/@/directives/clickOutside';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { useRefs } from '/@/hooks/core/useRefs'; import { useRefs } from '/@/hooks/core/useRefs';
import { useMenuSearch } from './useMenuSearch'; import { useMenuSearch } from './useMenuSearch';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
import { useAppInject } from '/@/hooks/web/useAppInject'; import { useAppInject } from '/@/hooks/web/useAppInject';
const props = { const props = defineProps({
visible: { type: Boolean }, visible: { type: Boolean },
}; });
export default defineComponent({
name: 'AppSearchModal',
components: { Icon, SearchOutlined, AppSearchFooter },
directives: {
clickOutside,
},
props,
emits: ['close'],
setup(props, { emit }) {
const scrollWrap = ref<ElRef>(null);
const inputRef = ref<Nullable<HTMLElement>>(null);
const { t } = useI18n();
const { prefixCls } = useDesign('app-search-modal');
const [refs, setRefs] = useRefs();
const { getIsMobile } = useAppInject();
const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } =
useMenuSearch(refs, scrollWrap, emit);
const getIsNotData = computed(() => !keyword || unref(searchResult).length === 0);
const getClass = computed(() => {
return [
prefixCls,
{
[`${prefixCls}--mobile`]: unref(getIsMobile),
},
];
});
watch(
() => props.visible,
(visible: boolean) => {
visible &&
nextTick(() => {
unref(inputRef)?.focus();
});
}
);
function handleClose() { const emit = defineEmits(['close']);
searchResult.value = [];
emit('close'); const scrollWrap = ref(null);
} const inputRef = ref<Nullable<HTMLElement>>(null);
const { t } = useI18n();
const { prefixCls } = useDesign('app-search-modal');
const [refs, setRefs] = useRefs();
const { getIsMobile } = useAppInject();
return { const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } =
t, useMenuSearch(refs, scrollWrap, emit);
prefixCls,
getClass, const getIsNotData = computed(() => !keyword || unref(searchResult).length === 0);
handleSearch,
searchResult, const getClass = computed(() => {
activeIndex, return [
getIsNotData, prefixCls,
handleEnter, {
setRefs, [`${prefixCls}--mobile`]: unref(getIsMobile),
scrollWrap, },
handleMouseenter, ];
handleClose,
inputRef,
};
},
}); });
watch(
() => props.visible,
(visible: boolean) => {
visible &&
nextTick(() => {
unref(inputRef)?.focus();
});
}
);
function handleClose() {
searchResult.value = [];
emit('close');
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-app-search-modal'; @prefix-cls: ~'@{namespace}-app-search-modal';
......
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import type { ErrorLogInfo } from '/#/store'; import type { ErrorLogInfo } from '/#/store';
import { defineProps } from 'vue';
import { BasicModal } from '/@/components/Modal/index'; import { BasicModal } from '/@/components/Modal/index';
import { Description, useDescription } from '/@/components/Description/index'; import { Description, useDescription } from '/@/components/Description/index';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { CSSProperties } from 'vue'; import type { CSSProperties } from 'vue';
import { ref, unref, computed, defineProps } from 'vue'; import { ref, unref, computed } from 'vue';
import { Spin } from 'ant-design-vue'; import { Spin } from 'ant-design-vue';
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn'; import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
import { propTypes } from '/@/utils/propTypes'; import { propTypes } from '/@/utils/propTypes';
......
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, defineProps } from 'vue'; import { computed } from 'vue';
import { AppLogo } from '/@/components/Application'; import { AppLogo } from '/@/components/Application';
import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application'; import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
import LoginForm from './LoginForm.vue'; import LoginForm from './LoginForm.vue';
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论