refactor(sys): change to setup syntax

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = defineConfig({
     'plugin:jest/recommended',
   ],
   rules: {
+    'vue/script-setup-uses-vars': 'error',
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
@@ -61,7 +62,6 @@ module.exports = defineConfig({
     'vue/singleline-html-element-content-newline': 'off',
     'vue/attribute-hyphenation': 'off',
     'vue/require-default-prop': 'off',
-    'vue/script-setup-uses-vars': 'off',
     'vue/html-self-closing': [
       'error',
       {

src/App.vue

@@ -6,23 +6,14 @@
   </ConfigProvider>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { ConfigProvider } from 'ant-design-vue';
   import { AppProvider } from '/@/components/Application';
   import { useTitle } from '/@/hooks/web/useTitle';
   import { useLocale } from '/@/locales/useLocale';
 
-  export default defineComponent({
-    name: 'App',
-    components: { ConfigProvider, AppProvider },
-    setup() {
-      useTitle();
-
   // support Multi-language
   const { getAntdLocale } = useLocale();
 
-      return { getAntdLocale };
-    },
-  });
+  useTitle();
 </script>

src/components/Button/src/BasicButton.vue

 <template>
   <Button v-bind="getBindValue" :class="getButtonClass" @click="onClick">
-    <template #default="data">
+    <template #default>
       <Icon :icon="preIcon" v-if="preIcon" :size="iconSize" />
-      <slot v-bind="data"></slot>
+      <slot></slot>
       <Icon :icon="postIcon" v-if="postIcon" :size="iconSize" />
     </template>
   </Button>

src/views/sys/about/index.vue

@@ -14,18 +14,13 @@
     <Description @register="registerDev" class="enter-y" />
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, h } from 'vue';
-
+<script lang="ts" setup>
+  import { h } from 'vue';
   import { Tag } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
   import { Description, DescItem, useDescription } from '/@/components/Description/index';
-
   import { GITHUB_URL, SITE_URL, DOC_URL } from '/@/settings/siteSetting';
-  export default defineComponent({
-    name: 'AboutPage',
-    components: { Description, PageWrapper },
-    setup() {
+
   const { pkg, lastBuildTime } = __APP_INFO__;
 
   const { dependencies, devDependencies, name, version } = pkg;
@@ -100,8 +95,4 @@
     schema: infoSchema,
     column: 2,
   });
-
-      return { register, registerDev, infoRegister, name, GITHUB_URL };
-    },
-  });
 </script>

src/views/sys/error-log/DetailModal.vue

@@ -3,40 +3,26 @@
     <Description :data="info" @register="register" />
   </BasicModal>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { PropType } from 'vue';
   import type { ErrorLogInfo } from '/#/store';
-
-  import { defineComponent } from 'vue';
+  import { defineProps } from 'vue';
   import { BasicModal } from '/@/components/Modal/index';
   import { Description, useDescription } from '/@/components/Description/index';
-
   import { useI18n } from '/@/hooks/web/useI18n';
-
   import { getDescSchema } from './data';
 
-  export default defineComponent({
-    name: 'ErrorLogDetailModal',
-    components: { BasicModal, Description },
-    props: {
+  defineProps({
     info: {
       type: Object as PropType<ErrorLogInfo>,
       default: null,
     },
-    },
-    setup() {
+  });
+
   const { t } = useI18n();
 
   const [register] = useDescription({
     column: 2,
     schema: getDescSchema()!,
   });
-
-      return {
-        register,
-        useI18n,
-        t,
-      };
-    },
-  });
 </script>

src/views/sys/error-log/index.vue

@@ -27,30 +27,19 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import type { ErrorLogInfo } from '/#/store';
-
-  import { defineComponent, watch, ref, nextTick } from 'vue';
-
+  import { watch, ref, nextTick } from 'vue';
   import DetailModal from './DetailModal.vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table/index';
-
   import { useModal } from '/@/components/Modal';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useI18n } from '/@/hooks/web/useI18n';
-
   import { useErrorLogStore } from '/@/store/modules/errorLog';
-
   import { fireErrorApi } from '/@/api/demo/error';
-
   import { getColumns } from './data';
-
   import { cloneDeep } from 'lodash-es';
 
-  export default defineComponent({
-    name: 'ErrorHandler',
-    components: { DetailModal, BasicTable, TableAction },
-    setup() {
   const rowInfo = ref<ErrorLogInfo>();
   const imgList = ref<string[]>([]);
 
@@ -100,18 +89,4 @@
   async function fireAjaxError() {
     await fireErrorApi();
   }
-
-      return {
-        register,
-        registerModal,
-        handleDetail,
-        fireVueError,
-        fireResourceError,
-        fireAjaxError,
-        imgList,
-        rowInfo,
-        t,
-      };
-    },
-  });
 </script>

src/views/sys/exception/Exception.vue

 <script lang="tsx">
   import type { PropType } from 'vue';
-
   import { Result, Button } from 'ant-design-vue';
   import { defineComponent, ref, computed, unref } from 'vue';
-
   import { ExceptionEnum } from '/@/enums/exceptionEnum';
-
   import notDataSvg from '/@/assets/svg/no-data.svg';
   import netWorkSvg from '/@/assets/svg/net-error.svg';
-
   import { useRoute } from 'vue-router';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useGo, useRedo } from '/@/hooks/web/usePage';
-
   import { PageEnum } from '/@/enums/pageEnum';
 
   interface MapValue {

src/views/sys/iframe/index.vue

@@ -10,24 +10,19 @@
     </Spin>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
   import type { CSSProperties } from 'vue';
-  import { defineComponent, ref, unref, computed } from 'vue';
+  import { ref, unref, computed, defineProps } from 'vue';
   import { Spin } from 'ant-design-vue';
-
   import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
-
   import { propTypes } from '/@/utils/propTypes';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
 
-  export default defineComponent({
-    name: 'IFrame',
-    components: { Spin },
-    props: {
+  defineProps({
     frameSrc: propTypes.string.def(''),
-    },
-    setup() {
+  });
+
   const loading = ref(true);
   const topRef = ref(50);
   const heightRef = ref(window.innerHeight);
@@ -59,17 +54,6 @@
     loading.value = false;
     calcHeight();
   }
-
-      return {
-        getWrapStyle,
-        loading,
-        frameRef,
-        prefixCls,
-
-        hideLoading,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-iframe-page';

src/views/sys/lock/LockPage.vue

@@ -92,25 +92,19 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, ref, computed } from 'vue';
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
   import { Input } from 'ant-design-vue';
-
   import { useUserStore } from '/@/store/modules/user';
   import { useLockStore } from '/@/store/modules/lock';
   import { useI18n } from '/@/hooks/web/useI18n';
-
   import { useNow } from './useNow';
   import { useDesign } from '/@/hooks/web/useDesign';
-
   import { LockOutlined } from '@ant-design/icons-vue';
   import headerImg from '/@/assets/images/header.jpg';
 
-  export default defineComponent({
-    name: 'LockPage',
-    components: { LockOutlined, InputPassword: Input.Password },
+  const InputPassword = Input.Password;
 
-    setup() {
   const password = ref('');
   const loading = ref(false);
   const errMsg = ref(false);
@@ -120,7 +114,7 @@
   const lockStore = useLockStore();
   const userStore = useUserStore();
 
-      const { ...state } = useNow(true);
+  const { hour, month, minute, meridiem, year, day, week } = useNow(true);
 
   const { t } = useI18n();
 
@@ -153,23 +147,6 @@
   function handleShowForm(show = false) {
     showDate.value = show;
   }
-
-      return {
-        goLogin,
-        userinfo,
-        unLock,
-        errMsg,
-        loading,
-        t,
-        prefixCls,
-        showDate,
-        password,
-        handleShowForm,
-        headerImg,
-        ...state,
-      };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-lock-page';

src/views/sys/lock/index.vue

@@ -3,18 +3,11 @@
     <LockPage v-if="getIsLock" />
   </transition>
 </template>
-<script lang="ts">
-  import { defineComponent, computed } from 'vue';
+<script lang="ts" setup>
+  import { computed } from 'vue';
   import LockPage from './LockPage.vue';
-
   import { useLockStore } from '/@/store/modules/lock';
-  export default defineComponent({
-    name: 'Lock',
-    components: { LockPage },
-    setup() {
+
   const lockStore = useLockStore();
   const getIsLock = computed(() => lockStore?.getLockInfo?.isLock ?? false);
-      return { getIsLock };
-    },
-  });
 </script>

src/views/sys/login/ForgetPasswordForm.vue

@@ -32,27 +32,15 @@
     </Form>
   </template>
 </template>
-<script lang="ts">
-  import { defineComponent, reactive, ref, computed, unref } from 'vue';
-
+<script lang="ts" setup>
+  import { reactive, ref, computed, unref } from 'vue';
   import LoginFormTitle from './LoginFormTitle.vue';
   import { Form, Input, Button } from 'ant-design-vue';
   import { CountdownInput } from '/@/components/CountDown';
-
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useLoginState, useFormRules, LoginStateEnum } from './useLogin';
 
-  export default defineComponent({
-    name: 'ForgetPasswordForm',
-    components: {
-      Button,
-      Form,
-      FormItem: Form.Item,
-      Input,
-      CountdownInput,
-      LoginFormTitle,
-    },
-    setup() {
+  const FormItem = Form.Item;
   const { t } = useI18n();
   const { handleBackLogin, getLoginState } = useLoginState();
   const { getFormRules } = useFormRules();
@@ -73,17 +61,4 @@
     if (!form) return;
     await form.resetFields();
   }
-
-      return {
-        t,
-        formRef,
-        formData,
-        getFormRules,
-        handleReset,
-        loading,
-        handleBackLogin,
-        getShow,
-      };
-    },
-  });
 </script>

src/views/sys/login/Login.vue

@@ -61,9 +61,8 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, computed } from 'vue';
-
+<script lang="ts" setup>
+  import { computed, defineProps } from 'vue';
   import { AppLogo } from '/@/components/Application';
   import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
   import LoginForm from './LoginForm.vue';
@@ -71,43 +70,23 @@
   import RegisterForm from './RegisterForm.vue';
   import MobileForm from './MobileForm.vue';
   import QrCodeForm from './QrCodeForm.vue';
-
   import { useGlobSetting } from '/@/hooks/setting';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useLocaleStore } from '/@/store/modules/locale';
 
-  export default defineComponent({
-    name: 'Login',
-    components: {
-      AppLogo,
-      LoginForm,
-      ForgetPasswordForm,
-      RegisterForm,
-      MobileForm,
-      QrCodeForm,
-      AppLocalePicker,
-      AppDarkModeToggle,
-    },
-    props: {
+  defineProps({
     sessionTimeout: {
       type: Boolean,
     },
-    },
-    setup() {
+  });
+
   const globSetting = useGlobSetting();
   const { prefixCls } = useDesign('login');
   const { t } = useI18n();
   const localeStore = useLocaleStore();
-
-      return {
-        t,
-        prefixCls,
-        title: computed(() => globSetting?.title ?? ''),
-        showLocale: localeStore.getShowPicker,
-      };
-    },
-  });
+  const showLocale = localeStore.getShowPicker;
+  const title = computed(() => globSetting?.title ?? '');
 </script>
 <style lang="less">
   @prefix-cls: ~'@{namespace}-login';

src/views/sys/login/LoginForm.vue

@@ -81,8 +81,8 @@
     </div>
   </Form>
 </template>
-<script lang="ts">
-  import { defineComponent, reactive, ref, toRaw, unref, computed } from 'vue';
+<script lang="ts" setup>
+  import { reactive, ref, toRaw, unref, computed } from 'vue';
 
   import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
   import {
@@ -102,26 +102,10 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   //import { onKeyStroke } from '@vueuse/core';
 
-  export default defineComponent({
-    name: 'LoginForm',
-    components: {
-      [Col.name]: Col,
-      [Row.name]: Row,
-      Checkbox,
-      Button,
-      Form,
-      FormItem: Form.Item,
-      Input,
-      Divider,
-      LoginFormTitle,
-      InputPassword: Input.Password,
-      GithubFilled,
-      WechatFilled,
-      AlipayCircleFilled,
-      GoogleCircleFilled,
-      TwitterCircleFilled,
-    },
-    setup() {
+  const ACol = Col;
+  const ARow = Row;
+  const FormItem = Form.Item;
+  const InputPassword = Input.Password;
   const { t } = useI18n();
   const { notification, createErrorModal } = useMessage();
   const { prefixCls } = useDesign('login');
@@ -174,20 +158,4 @@
       loading.value = false;
     }
   }
-
-      return {
-        t,
-        prefixCls,
-        formRef,
-        formData,
-        getFormRules,
-        rememberMe,
-        handleLogin,
-        loading,
-        setLoginState,
-        LoginStateEnum,
-        getShow,
-      };
-    },
-  });
 </script>

src/views/sys/login/LoginFormTitle.vue

@@ -3,15 +3,11 @@
     {{ getFormTitle }}
   </h2>
 </template>
-<script lang="ts">
-  import { defineComponent, computed, unref } from 'vue';
-
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { LoginStateEnum, useLoginState } from './useLogin';
 
-  export default defineComponent({
-    name: 'LoginFormTitle',
-    setup() {
   const { t } = useI18n();
 
   const { getLoginState } = useLoginState();
@@ -26,10 +22,4 @@
     };
     return titleObj[unref(getLoginState)];
   });
-
-      return {
-        getFormTitle,
-      };
-    },
-  });
 </script>

src/views/sys/login/MobileForm.vue

@@ -30,27 +30,15 @@
     </Form>
   </template>
 </template>
-<script lang="ts">
-  import { defineComponent, reactive, ref, computed, unref } from 'vue';
-
+<script lang="ts" setup>
+  import { reactive, ref, computed, unref } from 'vue';
   import { Form, Input, Button } from 'ant-design-vue';
   import { CountdownInput } from '/@/components/CountDown';
   import LoginFormTitle from './LoginFormTitle.vue';
-
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
 
-  export default defineComponent({
-    name: 'MobileForm',
-    components: {
-      Button,
-      Form,
-      FormItem: Form.Item,
-      Input,
-      CountdownInput,
-      LoginFormTitle,
-    },
-    setup() {
+  const FormItem = Form.Item;
   const { t } = useI18n();
   const { handleBackLogin, getLoginState } = useLoginState();
   const { getFormRules } = useFormRules();
@@ -72,17 +60,4 @@
     if (!data) return;
     console.log(data);
   }
-
-      return {
-        t,
-        formRef,
-        formData,
-        getFormRules,
-        handleLogin,
-        loading,
-        handleBackLogin,
-        getShow,
-      };
-    },
-  });
 </script>

src/views/sys/login/QrCodeForm.vue

@@ -14,37 +14,18 @@
     </div>
   </template>
 </template>
-<script lang="ts">
-  import { defineComponent, computed, unref } from 'vue';
-
+<script lang="ts" setup>
+  import { computed, unref } from 'vue';
   import LoginFormTitle from './LoginFormTitle.vue';
   import { Button, Divider } from 'ant-design-vue';
   import { QrCode } from '/@/components/Qrcode/index';
-
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useLoginState, LoginStateEnum } from './useLogin';
 
   const qrCodeUrl = 'https://vvbin.cn/next/login';
-  export default defineComponent({
-    name: 'QrCodeForm',
-    components: {
-      Button,
-      QrCode,
-      Divider,
-      LoginFormTitle,
-    },
-    setup() {
+
   const { t } = useI18n();
   const { handleBackLogin, getLoginState } = useLoginState();
 
   const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE);
-
-      return {
-        t,
-        handleBackLogin,
-        qrCodeUrl,
-        getShow,
-      };
-    },
-  });
 </script>

src/views/sys/login/RegisterForm.vue

@@ -65,31 +65,17 @@
     </Form>
   </template>
 </template>
-<script lang="ts">
-  import { defineComponent, reactive, ref, unref, computed } from 'vue';
-
+<script lang="ts" setup>
+  import { reactive, ref, unref, computed } from 'vue';
   import LoginFormTitle from './LoginFormTitle.vue';
   import { Form, Input, Button, Checkbox } from 'ant-design-vue';
   import { StrengthMeter } from '/@/components/StrengthMeter';
   import { CountdownInput } from '/@/components/CountDown';
-
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
 
-  export default defineComponent({
-    name: 'RegisterPasswordForm',
-    components: {
-      Button,
-      Form,
-      FormItem: Form.Item,
-      Input,
-      InputPassword: Input.Password,
-      Checkbox,
-      StrengthMeter,
-      CountdownInput,
-      LoginFormTitle,
-    },
-    setup() {
+  const FormItem = Form.Item;
+  const InputPassword = Input.Password;
   const { t } = useI18n();
   const { handleBackLogin, getLoginState } = useLoginState();
 
@@ -115,17 +101,4 @@
     if (!data) return;
     console.log(data);
   }
-
-      return {
-        t,
-        formRef,
-        formData,
-        getFormRules,
-        handleRegister,
-        loading,
-        handleBackLogin,
-        getShow,
-      };
-    },
-  });
 </script>

src/views/sys/login/SessionTimeoutLogin.vue

@@ -5,19 +5,15 @@
     </div>
   </transition>
 </template>
-<script lang="ts">
-  import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue';
+<script lang="ts" setup>
+  import { onBeforeUnmount, onMounted, ref } from 'vue';
   import Login from './Login.vue';
-
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useUserStore } from '/@/store/modules/user';
   import { usePermissionStore } from '/@/store/modules/permission';
   import { useAppStore } from '/@/store/modules/app';
   import { PermissionModeEnum } from '/@/enums/appEnum';
-  export default defineComponent({
-    name: 'SessionTimeoutLogin',
-    components: { Login },
-    setup() {
+
   const { prefixCls } = useDesign('st-login');
   const userStore = useUserStore();
   const permissionStore = usePermissionStore();
@@ -43,10 +39,6 @@
       document.location.reload();
     }
   });
-
-      return { prefixCls };
-    },
-  });
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-st-login';

src/views/sys/redirect/index.vue

 <template>
   <div></div>
 </template>
-<script lang="ts">
-  import { defineComponent, unref } from 'vue';
+<script lang="ts" setup>
+  import { unref } from 'vue';
   import { useRouter } from 'vue-router';
 
-  export default defineComponent({
-    name: 'Redirect',
-    setup() {
   const { currentRoute, replace } = useRouter();
 
   const { params, query } = unref(currentRoute);
@@ -19,8 +16,4 @@
     path: '/' + _path,
     query,
   });
-
-      return {};
-    },
-  });
 </script>