canrd-outside / order-erp-front · Commits

Commit 2f6d133b965553ba63e4c121c3a6688d25a94225

Authored by vben
1 parent 9035fd19

refactor(application): change to setup syntax

Inline Side-by-side
Showing 9 changed files with 118 additions and 191 deletions
src/components/Application/src/AppDarkModeToggle.vue
  View file @2f6d133
... ... @@ -5,8 +5,8 @@
5 5 <SvgIcon size="14" name="moon" />
6 6 </div>
7 7 </template>
8   -<script lang="ts">
9   - import { defineComponent, computed, unref } from 'vue';
  8 +<script lang="ts" setup>
  9 + import { computed, unref } from 'vue';
10 10 import { SvgIcon } from '/@/components/Icon';
11 11 import { useDesign } from '/@/hooks/web/useDesign';
12 12 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
... ... @@ -14,39 +14,25 @@
14 14 import { updateDarkTheme } from '/@/logics/theme/dark';
15 15 import { ThemeEnum } from '/@/enums/appEnum';
16 16  
17   - export default defineComponent({
18   - name: 'DarkModeToggle',
19   - components: { SvgIcon },
20   - setup() {
21   - const { prefixCls } = useDesign('dark-switch');
22   - const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
  17 + const { prefixCls } = useDesign('dark-switch');
  18 + const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
23 19  
24   - const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
  20 + const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
25 21  
26   - const getClass = computed(() => [
27   - prefixCls,
28   - {
29   - [`${prefixCls}--dark`]: unref(isDark),
30   - },
31   - ]);
32   -
33   - function toggleDarkMode() {
34   - const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
35   - setDarkMode(darkMode);
36   - updateDarkTheme(darkMode);
37   - updateHeaderBgColor();
38   - updateSidebarBgColor();
39   - }
40   -
41   - return {
42   - getClass,
43   - isDark,
44   - prefixCls,
45   - toggleDarkMode,
46   - getShowDarkModeToggle,
47   - };
  22 + const getClass = computed(() => [
  23 + prefixCls,
  24 + {
  25 + [`${prefixCls}--dark`]: unref(isDark),
48 26 },
49   - });
  27 + ]);
  28 +
  29 + function toggleDarkMode() {
  30 + const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
  31 + setDarkMode(darkMode);
  32 + updateDarkTheme(darkMode);
  33 + updateHeaderBgColor();
  34 + updateSidebarBgColor();
  35 + }
50 36 </script>
51 37 <style lang="less" scoped>
52 38 @prefix-cls: ~'@{namespace}-dark-switch';
... ...
src/components/Application/src/AppLocalePicker.vue
  View file @2f6d133
... ... @@ -17,16 +17,16 @@
17 17 </span>
18 18 </Dropdown>
19 19 </template>
20   -<script lang="ts">
  20 +<script lang="ts" setup>
21 21 import type { LocaleType } from '/#/config';
22 22 import type { DropMenu } from '/@/components/Dropdown';
23   - import { defineComponent, ref, watchEffect, unref, computed } from 'vue';
  23 + import { ref, watchEffect, unref, computed } from 'vue';
24 24 import { Dropdown } from '/@/components/Dropdown';
25 25 import { Icon } from '/@/components/Icon';
26 26 import { useLocale } from '/@/locales/useLocale';
27 27 import { localeList } from '/@/settings/localeSetting';
28 28  
29   - const props = {
  29 + const props = defineProps({
30 30 /**
31 31 * Whether to display text
32 32 */
... ... @@ -35,45 +35,36 @@
35 35 * Whether to refresh the interface when changing
36 36 */
37 37 reload: { type: Boolean },
38   - };
39   -
40   - export default defineComponent({
41   - name: 'AppLocalPicker',
42   - components: { Dropdown, Icon },
43   - props,
44   - setup(props) {
45   - const selectedKeys = ref<string[]>([]);
  38 + });
46 39  
47   - const { changeLocale, getLocale } = useLocale();
  40 + const selectedKeys = ref<string[]>([]);
48 41  
49   - const getLocaleText = computed(() => {
50   - const key = selectedKeys.value[0];
51   - if (!key) {
52   - return '';
53   - }
54   - return localeList.find((item) => item.event === key)?.text;
55   - });
  42 + const { changeLocale, getLocale } = useLocale();
56 43  
57   - watchEffect(() => {
58   - selectedKeys.value = [unref(getLocale)];
59   - });
  44 + const getLocaleText = computed(() => {
  45 + const key = selectedKeys.value[0];
  46 + if (!key) {
  47 + return '';
  48 + }
  49 + return localeList.find((item) => item.event === key)?.text;
  50 + });
60 51  
61   - async function toggleLocale(lang: LocaleType | string) {
62   - await changeLocale(lang as LocaleType);
63   - selectedKeys.value = [lang as string];
64   - props.reload && location.reload();
65   - }
  52 + watchEffect(() => {
  53 + selectedKeys.value = [unref(getLocale)];
  54 + });
66 55  
67   - function handleMenuEvent(menu: DropMenu) {
68   - if (unref(getLocale) === menu.event) {
69   - return;
70   - }
71   - toggleLocale(menu.event as string);
72   - }
  56 + async function toggleLocale(lang: LocaleType | string) {
  57 + await changeLocale(lang as LocaleType);
  58 + selectedKeys.value = [lang as string];
  59 + props.reload && location.reload();
  60 + }
73 61  
74   - return { localeList, handleMenuEvent, selectedKeys, getLocaleText };
75   - },
76   - });
  62 + function handleMenuEvent(menu: DropMenu) {
  63 + if (unref(getLocale) === menu.event) {
  64 + return;
  65 + }
  66 + toggleLocale(menu.event as string);
  67 + }
77 68 </script>
78 69  
79 70 <style lang="less">
... ...
src/components/Application/src/AppLogo.vue
  View file @2f6d133
... ... @@ -10,8 +10,8 @@
10 10 </div>
11 11 </div>
12 12 </template>
13   -<script lang="ts">
14   - import { defineComponent, computed, unref } from 'vue';
  13 +<script lang="ts" setup>
  14 + import { computed, unref } from 'vue';
15 15 import { useGlobSetting } from '/@/hooks/setting';
16 16 import { useGo } from '/@/hooks/web/usePage';
17 17 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
... ... @@ -19,7 +19,7 @@
19 19 import { PageEnum } from '/@/enums/pageEnum';
20 20 import { useUserStore } from '/@/store/modules/user';
21 21  
22   - const props = {
  22 + const props = defineProps({
23 23 /**
24 24 * The theme of the current parent component
25 25 */
... ... @@ -32,45 +32,30 @@
32 32 * The title is also displayed when the menu is collapsed
33 33 */
34 34 alwaysShowTitle: { type: Boolean },
35   - };
36   -
37   - export default defineComponent({
38   - name: 'AppLogo',
39   - props: props,
40   - setup(props) {
41   - const { prefixCls } = useDesign('app-logo');
42   - const { getCollapsedShowTitle } = useMenuSetting();
43   - const userStore = useUserStore();
44   - const { title } = useGlobSetting();
45   - const go = useGo();
46   -
47   - const getAppLogoClass = computed(() => [
48   - prefixCls,
49   - props.theme,
50   - { 'collapsed-show-title': unref(getCollapsedShowTitle) },
51   - ]);
  35 + });
52 36  
53   - const getTitleClass = computed(() => [
54   - `${prefixCls}__title`,
55   - {
56   - 'xs:opacity-0': !props.alwaysShowTitle,
57   - },
58   - ]);
  37 + const { prefixCls } = useDesign('app-logo');
  38 + const { getCollapsedShowTitle } = useMenuSetting();
  39 + const userStore = useUserStore();
  40 + const { title } = useGlobSetting();
  41 + const go = useGo();
59 42  
60   - function goHome() {
61   - go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
62   - }
  43 + const getAppLogoClass = computed(() => [
  44 + prefixCls,
  45 + props.theme,
  46 + { 'collapsed-show-title': unref(getCollapsedShowTitle) },
  47 + ]);
63 48  
64   - return {
65   - getAppLogoClass,
66   - getTitleClass,
67   - getCollapsedShowTitle,
68   - goHome,
69   - title,
70   - prefixCls,
71   - };
  49 + const getTitleClass = computed(() => [
  50 + `${prefixCls}__title`,
  51 + {
  52 + 'xs:opacity-0': !props.alwaysShowTitle,
72 53 },
73   - });
  54 + ]);
  55 +
  56 + function goHome() {
  57 + go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
  58 + }
74 59 </script>
75 60 <style lang="less" scoped>
76 61 @prefix-cls: ~'@{namespace}-app-logo';
... ...
src/components/Application/src/search/AppSearchFooter.vue
  View file @2f6d133
... ... @@ -10,20 +10,12 @@
10 10 </div>
11 11 </template>
12 12  
13   -<script lang="ts">
14   - import { defineComponent } from 'vue';
  13 +<script lang="ts" setup>
15 14 import AppSearchKeyItem from './AppSearchKeyItem.vue';
16 15 import { useDesign } from '/@/hooks/web/useDesign';
17 16 import { useI18n } from '/@/hooks/web/useI18n';
18   - export default defineComponent({
19   - name: 'AppSearchFooter',
20   - components: { AppSearchKeyItem },
21   - setup() {
22   - const { prefixCls } = useDesign('app-search-footer');
23   - const { t } = useI18n();
24   - return { prefixCls, t };
25   - },
26   - });
  17 + const { prefixCls } = useDesign('app-search-footer');
  18 + const { t } = useI18n();
27 19 </script>
28 20 <style lang="less" scoped>
29 21 @prefix-cls: ~'@{namespace}-app-search-footer';
... ...
src/components/Application/src/search/AppSearchKeyItem.vue
  View file @2f6d133
... ... @@ -3,11 +3,9 @@
3 3 <Icon :icon="icon" />
4 4 </span>
5 5 </template>
6   -<script lang="ts">
7   - import { defineComponent } from 'vue';
  6 +<script lang="ts" setup>
8 7 import { Icon } from '/@/components/Icon';
9   - export default defineComponent({
10   - components: { Icon },
11   - props: { icon: String },
  8 + defineProps({
  9 + icon: String,
12 10 });
13 11 </script>
... ...
src/components/Application/src/search/AppSearchModal.vue
  View file @2f6d133
... ... @@ -56,85 +56,61 @@
56 56 </transition>
57 57 </Teleport>
58 58 </template>
59   -<script lang="ts">
60   - import { defineComponent, computed, unref, ref, watch, nextTick } from 'vue';
  59 +
  60 +<script lang="ts" setup>
  61 + import { computed, unref, ref, watch, nextTick } from 'vue';
61 62 import { SearchOutlined } from '@ant-design/icons-vue';
62 63 import AppSearchFooter from './AppSearchFooter.vue';
63 64 import Icon from '/@/components/Icon';
64   - import clickOutside from '/@/directives/clickOutside';
  65 + import vClickOutside from '/@/directives/clickOutside';
65 66 import { useDesign } from '/@/hooks/web/useDesign';
66 67 import { useRefs } from '/@/hooks/core/useRefs';
67 68 import { useMenuSearch } from './useMenuSearch';
68 69 import { useI18n } from '/@/hooks/web/useI18n';
69 70 import { useAppInject } from '/@/hooks/web/useAppInject';
70 71  
71   - const props = {
  72 + const props = defineProps({
72 73 visible: { type: Boolean },
73   - };
74   -
75   - export default defineComponent({
76   - name: 'AppSearchModal',
77   - components: { Icon, SearchOutlined, AppSearchFooter },
78   - directives: {
79   - clickOutside,
80   - },
81   - props,
82   - emits: ['close'],
83   - setup(props, { emit }) {
84   - const scrollWrap = ref<ElRef>(null);
85   - const inputRef = ref<Nullable<HTMLElement>>(null);
86   -
87   - const { t } = useI18n();
88   - const { prefixCls } = useDesign('app-search-modal');
89   - const [refs, setRefs] = useRefs();
90   - const { getIsMobile } = useAppInject();
91   -
92   - const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } =
93   - useMenuSearch(refs, scrollWrap, emit);
94   -
95   - const getIsNotData = computed(() => !keyword || unref(searchResult).length === 0);
96   -
97   - const getClass = computed(() => {
98   - return [
99   - prefixCls,
100   - {
101   - [`${prefixCls}--mobile`]: unref(getIsMobile),
102   - },
103   - ];
104   - });
105   -
106   - watch(
107   - () => props.visible,
108   - (visible: boolean) => {
109   - visible &&
110   - nextTick(() => {
111   - unref(inputRef)?.focus();
112   - });
113   - }
114   - );
  74 + });
115 75  
116   - function handleClose() {
117   - searchResult.value = [];
118   - emit('close');
119   - }
  76 + const emit = defineEmits(['close']);
  77 +
  78 + const scrollWrap = ref(null);
  79 + const inputRef = ref<Nullable<HTMLElement>>(null);
  80 +
  81 + const { t } = useI18n();
  82 + const { prefixCls } = useDesign('app-search-modal');
  83 + const [refs, setRefs] = useRefs();
  84 + const { getIsMobile } = useAppInject();
120 85  
121   - return {
122   - t,
123   - prefixCls,
124   - getClass,
125   - handleSearch,
126   - searchResult,
127   - activeIndex,
128   - getIsNotData,
129   - handleEnter,
130   - setRefs,
131   - scrollWrap,
132   - handleMouseenter,
133   - handleClose,
134   - inputRef,
135   - };
136   - },
  86 + const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } =
  87 + useMenuSearch(refs, scrollWrap, emit);
  88 +
  89 + const getIsNotData = computed(() => !keyword || unref(searchResult).length === 0);
  90 +
  91 + const getClass = computed(() => {
  92 + return [
  93 + prefixCls,
  94 + {
  95 + [`${prefixCls}--mobile`]: unref(getIsMobile),
  96 + },
  97 + ];
137 98 });
  99 +
  100 + watch(
  101 + () => props.visible,
  102 + (visible: boolean) => {
  103 + visible &&
  104 + nextTick(() => {
  105 + unref(inputRef)?.focus();
  106 + });
  107 + }
  108 + );
  109 +
  110 + function handleClose() {
  111 + searchResult.value = [];
  112 + emit('close');
  113 + }
138 114 </script>
139 115 <style lang="less" scoped>
140 116 @prefix-cls: ~'@{namespace}-app-search-modal';
... ...
src/views/sys/error-log/DetailModal.vue
  View file @2f6d133
... ... @@ -6,7 +6,6 @@
6 6 <script lang="ts" setup>
7 7 import type { PropType } from 'vue';
8 8 import type { ErrorLogInfo } from '/#/store';
9   - import { defineProps } from 'vue';
10 9 import { BasicModal } from '/@/components/Modal/index';
11 10 import { Description, useDescription } from '/@/components/Description/index';
12 11 import { useI18n } from '/@/hooks/web/useI18n';
... ...
src/views/sys/iframe/index.vue
  View file @2f6d133
... ... @@ -12,7 +12,7 @@
12 12 </template>
13 13 <script lang="ts" setup>
14 14 import type { CSSProperties } from 'vue';
15   - import { ref, unref, computed, defineProps } from 'vue';
  15 + import { ref, unref, computed } from 'vue';
16 16 import { Spin } from 'ant-design-vue';
17 17 import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
18 18 import { propTypes } from '/@/utils/propTypes';
... ...
src/views/sys/login/Login.vue
  View file @2f6d133
... ... @@ -62,7 +62,7 @@
62 62 </div>
63 63 </template>
64 64 <script lang="ts" setup>
65   - import { computed, defineProps } from 'vue';
  65 + import { computed } from 'vue';
66 66 import { AppLogo } from '/@/components/Application';
67 67 import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
68 68 import LoginForm from './LoginForm.vue';
... ...