refactor(sys): change to setup syntax

vbenjs · Aug 12, 2021 · bb89c50 · bb89c50
1 parent 66feb77
commit bb89c50
Show file tree

Hide file tree

Showing 19 changed files with 384 additions and 666 deletions.
diff --git a/.eslintrc.js b/.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',
       {

diff --git a/src/App.vue b/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();
 
-      // support Multi-language
-      const { getAntdLocale } = useLocale();
-
-      return { getAntdLocale };
-    },
-  });
+  useTitle();
 </script>
diff --git a/src/components/Button/src/BasicButton.vue b/src/components/Button/src/BasicButton.vue
@@ -1,8 +1,8 @@
 <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>

diff --git a/src/views/sys/about/index.vue b/src/views/sys/about/index.vue
@@ -14,94 +14,85 @@
     <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;
+  const { pkg, lastBuildTime } = __APP_INFO__;
 
-      const schema: DescItem[] = [];
-      const devSchema: DescItem[] = [];
+  const { dependencies, devDependencies, name, version } = pkg;
 
-      const commonTagRender = (color: string) => (curVal) => h(Tag, { color }, () => curVal);
-      const commonLinkRender = (text: string) => (href) => h('a', { href, target: '_blank' }, text);
+  const schema: DescItem[] = [];
+  const devSchema: DescItem[] = [];
 
-      const infoSchema: DescItem[] = [
-        {
-          label: '版本',
-          field: 'version',
-          render: commonTagRender('blue'),
-        },
-        {
-          label: '最后编译时间',
-          field: 'lastBuildTime',
-          render: commonTagRender('blue'),
-        },
-        {
-          label: '文档地址',
-          field: 'doc',
-          render: commonLinkRender('文档地址'),
-        },
-        {
-          label: '预览地址',
-          field: 'preview',
-          render: commonLinkRender('预览地址'),
-        },
-        {
-          label: 'Github',
-          field: 'github',
-          render: commonLinkRender('Github'),
-        },
-      ];
+  const commonTagRender = (color: string) => (curVal) => h(Tag, { color }, () => curVal);
+  const commonLinkRender = (text: string) => (href) => h('a', { href, target: '_blank' }, text);
 
-      const infoData = {
-        version,
-        lastBuildTime,
-        doc: DOC_URL,
-        preview: SITE_URL,
-        github: GITHUB_URL,
-      };
+  const infoSchema: DescItem[] = [
+    {
+      label: '版本',
+      field: 'version',
+      render: commonTagRender('blue'),
+    },
+    {
+      label: '最后编译时间',
+      field: 'lastBuildTime',
+      render: commonTagRender('blue'),
+    },
+    {
+      label: '文档地址',
+      field: 'doc',
+      render: commonLinkRender('文档地址'),
+    },
+    {
+      label: '预览地址',
+      field: 'preview',
+      render: commonLinkRender('预览地址'),
+    },
+    {
+      label: 'Github',
+      field: 'github',
+      render: commonLinkRender('Github'),
+    },
+  ];
 
-      Object.keys(dependencies).forEach((key) => {
-        schema.push({ field: key, label: key });
-      });
+  const infoData = {
+    version,
+    lastBuildTime,
+    doc: DOC_URL,
+    preview: SITE_URL,
+    github: GITHUB_URL,
+  };
 
-      Object.keys(devDependencies).forEach((key) => {
-        devSchema.push({ field: key, label: key });
-      });
+  Object.keys(dependencies).forEach((key) => {
+    schema.push({ field: key, label: key });
+  });
 
-      const [register] = useDescription({
-        title: '生产环境依赖',
-        data: dependencies,
-        schema: schema,
-        column: 3,
-      });
+  Object.keys(devDependencies).forEach((key) => {
+    devSchema.push({ field: key, label: key });
+  });
 
-      const [registerDev] = useDescription({
-        title: '开发环境依赖',
-        data: devDependencies,
-        schema: devSchema,
-        column: 3,
-      });
+  const [register] = useDescription({
+    title: '生产环境依赖',
+    data: dependencies,
+    schema: schema,
+    column: 3,
+  });
 
-      const [infoRegister] = useDescription({
-        title: '项目信息',
-        data: infoData,
-        schema: infoSchema,
-        column: 2,
-      });
+  const [registerDev] = useDescription({
+    title: '开发环境依赖',
+    data: devDependencies,
+    schema: devSchema,
+    column: 3,
+  });
 
-      return { register, registerDev, infoRegister, name, GITHUB_URL };
-    },
+  const [infoRegister] = useDescription({
+    title: '项目信息',
+    data: infoData,
+    schema: infoSchema,
+    column: 2,
   });
 </script>
diff --git a/src/views/sys/error-log/DetailModal.vue b/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: {
-      info: {
-        type: Object as PropType<ErrorLogInfo>,
-        default: null,
-      },
+  defineProps({
+    info: {
+      type: Object as PropType<ErrorLogInfo>,
+      default: null,
     },
-    setup() {
-      const { t } = useI18n();
+  });
 
-      const [register] = useDescription({
-        column: 2,
-        schema: getDescSchema()!,
-      });
+  const { t } = useI18n();
 
-      return {
-        register,
-        useI18n,
-        t,
-      };
-    },
+  const [register] = useDescription({
+    column: 2,
+    schema: getDescSchema()!,
   });
 </script>