From d4302627e88a3ceab437fbb0552c27d1ccd9634c Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Thu, 16 Sep 2021 23:16:54 +0800
Subject: [PATCH] refactor: use setup refactor

---
 src/App.vue                                |  41 ++-
 src/layout/components/screenfull/index.vue |  23 +-
 src/views/editor/index.vue                 |  69 ++--
 src/views/error/401.vue                    |  24 +-
 src/views/error/404.vue                    |  32 +-
 src/views/flow-chart/index.vue             | 133 ++++----
 src/views/login.vue                        | 123 ++++----
 src/views/permission/button/index.vue      |  42 +--
 src/views/permission/page/index.vue        |  55 ++--
 src/views/redirect.vue                     |  40 +--
 src/views/register.vue                     | 102 +++---
 src/views/welcome.vue                      | 346 ++++++++++-----------
 tsconfig.json                              |  32 +-
 13 files changed, 462 insertions(+), 600 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c7cca7c00..da0171ad4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,25 @@
-<template>
-  <el-config-provider :locale="currentLocale">
-    <router-view />
-  </el-config-provider>
-</template>
-
-<script>
+<script setup lang="ts">
+import { getCurrentInstance } from "vue";
 import { ElConfigProvider } from "element-plus";
 import zhCn from "element-plus/lib/locale/lang/zh-cn";
 import en from "element-plus/lib/locale/lang/en";
-export default {
-  name: "app",
-  components: {
-    [ElConfigProvider.name]: ElConfigProvider
-  },
-  computed: {
-    // eslint-disable-next-line vue/return-in-computed-property
-    currentLocale() {
-      switch (this.$storage.locale?.locale) {
-        case "zh":
-          return zhCn;
-        case "en":
-          return en;
-      }
-    }
+
+let locale: string =
+  getCurrentInstance().appContext.config.globalProperties.$storage?.locale
+    ?.locale;
+
+let currentLocale = () => {
+  switch (locale) {
+    case "zh":
+      return zhCn;
+    case "en":
+      return en;
   }
 };
 </script>
+
+<template>
+  <el-config-provider :locale="currentLocale()">
+    <router-view />
+  </el-config-provider>
+</template>
diff --git a/src/layout/components/screenfull/index.vue b/src/layout/components/screenfull/index.vue
index d01adfa64..924b966bd 100644
--- a/src/layout/components/screenfull/index.vue
+++ b/src/layout/components/screenfull/index.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { useFullscreen } from "@vueuse/core";
+
+const { isFullscreen, toggle } = useFullscreen();
+</script>
+
 <template>
   <div class="screen-full" @click="toggle">
     <i
@@ -15,23 +21,6 @@
   </div>
 </template>
 
-<script>
-import { useFullscreen } from "@vueuse/core";
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "screenfull",
-  setup() {
-    const { isFullscreen, toggle } = useFullscreen();
-
-    return {
-      isFullscreen,
-      toggle
-    };
-  }
-});
-</script>
-
 <style lang="scss" scoped>
 .screen-full {
   width: 40px;
diff --git a/src/views/editor/index.vue b/src/views/editor/index.vue
index 1721c87dc..2c7baddc0 100644
--- a/src/views/editor/index.vue
+++ b/src/views/editor/index.vue
@@ -1,47 +1,40 @@
+<script lang="ts">
+export default {
+  name: "reEditor"
+};
+</script>
+
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref, unref } from "vue";
+import WangEditor from "wangeditor";
+
+// eslint-disable-next-line no-undef
+const editor = ref<ComponentRef>(null);
+const html = ref<HTMLElement>(null);
+let instance: WangEditor;
+
+onMounted(() => {
+  instance = new WangEditor(unref(editor));
+  Object.assign(instance.config, {
+    onchange() {
+      html.value = instance.txt.html();
+    }
+  });
+  instance.create();
+});
+
+onBeforeUnmount(() => {
+  instance.destroy();
+});
+</script>
+
 <template>
   <div>
     <div ref="editor"></div>
-    <div :innerHTML="content.html"></div>
+    <div :innerHTML="html"></div>
   </div>
 </template>
 
-<script>
-import { onMounted, onBeforeUnmount, ref, reactive } from "vue";
-import WangEditor from "wangeditor";
-
-export default {
-  name: "reEditor",
-  setup() {
-    const editor = ref();
-    const content = reactive({
-      html: "",
-      text: ""
-    });
-
-    let instance;
-    onMounted(() => {
-      instance = new WangEditor(editor.value);
-      Object.assign(instance.config, {
-        onchange() {
-          content.html = instance.txt.html();
-        }
-      });
-      instance.create();
-    });
-
-    onBeforeUnmount(() => {
-      instance.destroy();
-      instance = null;
-    });
-
-    return {
-      editor,
-      content
-    };
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 :deep(.w-e-text-container) {
   z-index: 99 !important;
diff --git a/src/views/error/401.vue b/src/views/error/401.vue
index 74bce2fc6..53432f1d9 100644
--- a/src/views/error/401.vue
+++ b/src/views/error/401.vue
@@ -1,10 +1,16 @@
+<script setup lang="ts">
+import imgs from "/@/assets/401.gif";
+import { ref } from "vue";
+
+const img = ref(`${imgs}?${new Date()}`);
+</script>
+
 <template>
   <div class="errPage-container">
     <el-row>
       <el-col :span="12">
-        <h1 class="text-jumbo text-ginormous">CURD Admin</h1>
+        <h1 class="text-jumbo text-ginormous">Pure Admin</h1>
         <h2>你没有权限去该页面</h2>
-        <h6>如有不满请联系你领导</h6>
       </el-col>
       <el-col :span="12">
         <img
@@ -18,20 +24,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import imgs from "/@/assets/401.gif";
-import { ref } from "vue";
-export default {
-  name: "401",
-  setup() {
-    const img = ref(`${imgs}?${new Date()}`);
-    return {
-      img
-    };
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 .errPage-container {
   width: 800px;
diff --git a/src/views/error/404.vue b/src/views/error/404.vue
index 1848cf87c..a93f88a66 100644
--- a/src/views/error/404.vue
+++ b/src/views/error/404.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import four from "/@/assets/404.png";
+import four_cloud from "/@/assets/404_cloud.png";
+
+const message = computed(() => {
+  return "The webmaster said that you can not enter this page...";
+});
+</script>
+
 <template>
   <div class="wscn-http404-container">
     <div class="wscn-http404">
@@ -8,7 +18,7 @@
         <img class="pic-404__child right" :src="four_cloud" alt="404" />
       </div>
       <div class="bullshit">
-        <div class="bullshit__oops">CURD Admin</div>
+        <div class="bullshit__oops">Pure Admin</div>
         <div class="bullshit__headline">{{ message }}</div>
         <div class="bullshit__info">
           Please check that the URL you entered is correct, or click the button
@@ -20,26 +30,6 @@
   </div>
 </template>
 
-<script>
-import { computed } from "vue";
-import four from "/@/assets/404.png";
-import four_cloud from "/@/assets/404_cloud.png";
-export default {
-  name: "404",
-  setup() {
-    const message = computed(() => {
-      return "The webmaster said that you can not enter this page...";
-    });
-
-    return {
-      message,
-      four,
-      four_cloud
-    };
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 .wscn-http404-container {
   transform: translate(-50%, -50%);
diff --git a/src/views/flow-chart/index.vue b/src/views/flow-chart/index.vue
index 2635cb0b1..15decea79 100644
--- a/src/views/flow-chart/index.vue
+++ b/src/views/flow-chart/index.vue
@@ -1,3 +1,62 @@
+<script setup lang="ts">
+import { ref, unref, onMounted } from "vue";
+import LogicFlow from "@logicflow/core";
+import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
+import "@logicflow/core/dist/style/index.css";
+import "@logicflow/extension/lib/style/index.css";
+import { Control, NodePanel, DataDialog } from "/@/components/ReFlowChart";
+import { toLogicflowData } from "/@/components/ReFlowChart/src/adpterForTurbo";
+import { BpmnNode } from "/@/components/ReFlowChart/src/config";
+import demoData from "./dataTurbo.json";
+
+// eslint-disable-next-line no-undef
+let lf = ref<ElRef>(null);
+let graphData = ref(null);
+let dataVisible = ref<boolean>(false);
+let config = ref({
+  grid: true,
+  background: {
+    color: "#f7f9ff"
+  },
+  keyboard: {
+    enabled: true
+  }
+});
+let nodeList = BpmnNode;
+
+function initLf() {
+  // 画布配置
+  LogicFlow.use(Snapshot);
+  // 使用bpmn插件，引入bpmn元素，这些元素可以在turbo中转换后使用
+  LogicFlow.use(BpmnElement);
+  // 启动右键菜单
+  LogicFlow.use(Menu);
+  const domLf = new LogicFlow({
+    ...unref(config),
+    container: document.querySelector("#LF-Turbo")
+  });
+  lf.value = domLf;
+  // 设置边类型bpmn:sequenceFlow为默认类型
+  unref(lf).setDefaultEdgeType("bpmn:sequenceFlow");
+  onRender();
+}
+
+function onRender() {
+  // Turbo数据转换为LogicFlow内部识别的数据结构
+  const lFData = toLogicflowData(demoData);
+  lf.value.render(lFData);
+}
+
+function catData() {
+  graphData.value = unref(lf).getGraphData();
+  dataVisible.value = true;
+}
+
+onMounted(() => {
+  initLf();
+});
+</script>
+
 <template>
   <div class="logic-flow-view">
     <!-- 辅助工具栏 -->
@@ -19,80 +78,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ref, unref, onMounted } from "vue";
-import LogicFlow from "@logicflow/core";
-import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
-import "@logicflow/core/dist/style/index.css";
-import "@logicflow/extension/lib/style/index.css";
-import { Control, NodePanel, DataDialog } from "/@/components/ReFlowChart";
-
-import { toLogicflowData } from "/@/components/ReFlowChart/src/adpterForTurbo";
-import { BpmnNode } from "/@/components/ReFlowChart/src/config";
-import demoData from "./dataTurbo.json";
-export default {
-  name: "reFlowChart",
-  components: { NodePanel, Control, DataDialog },
-  setup() {
-    // eslint-disable-next-line no-undef
-    let lf = ref<ElRef>(null);
-    let graphData = ref(null);
-    let dataVisible = ref(false);
-    let config = ref({
-      grid: true,
-      background: {
-        color: "#f7f9ff"
-      },
-      keyboard: {
-        enabled: true
-      }
-    });
-    let nodeList = BpmnNode;
-
-    function initLf() {
-      // 画布配置
-      LogicFlow.use(Snapshot);
-      // 使用bpmn插件，引入bpmn元素，这些元素可以在turbo中转换后使用
-      LogicFlow.use(BpmnElement);
-      // 启动右键菜单
-      LogicFlow.use(Menu);
-      const domLf = new LogicFlow({
-        ...unref(config),
-        container: document.querySelector("#LF-Turbo")
-      });
-      lf.value = domLf;
-      // 设置边类型bpmn:sequenceFlow为默认类型
-      unref(lf).setDefaultEdgeType("bpmn:sequenceFlow");
-      onRender();
-    }
-
-    function onRender() {
-      // Turbo数据转换为LogicFlow内部识别的数据结构
-      const lFData = toLogicflowData(demoData);
-      lf.value.render(lFData);
-    }
-
-    function catData() {
-      graphData.value = unref(lf).getGraphData();
-      dataVisible.value = true;
-    }
-
-    onMounted(() => {
-      initLf();
-    });
-
-    return {
-      lf,
-      graphData,
-      dataVisible,
-      config,
-      nodeList,
-      catData
-    };
-  }
-};
-</script>
-
 <style scoped>
 #LF-Turbo {
   width: 100vw;
diff --git a/src/views/login.vue b/src/views/login.vue
index a50558698..0fcd62021 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,3 +1,57 @@
+<script setup lang="ts">
+import { reactive, onBeforeMount } from "vue";
+import info, { ContextProps } from "../components/ReInfo/index.vue";
+import { getVerify, getLogin } from "/@/api/user";
+import { useRouter } from "vue-router";
+import { storageSession } from "/@/utils/storage";
+import { warnMessage, successMessage } from "/@/utils/message";
+
+const router = useRouter();
+
+// 刷新验证码
+const refreshGetVerify = async () => {
+  let { svg } = await getVerify();
+  contextInfo.svg = svg;
+};
+
+const contextInfo: ContextProps = reactive({
+  userName: "",
+  passWord: "",
+  verify: null,
+  svg: null
+});
+
+const toPage = (info: Object): void => {
+  storageSession.setItem("info", info);
+  router.push("/");
+};
+
+// 登录
+const onLogin = async () => {
+  let { userName, passWord, verify } = contextInfo;
+  let { code, info, accessToken } = await getLogin({
+    username: userName,
+    password: passWord,
+    verify: verify
+  });
+  code === 0
+    ? successMessage(info) &&
+      toPage({
+        username: userName,
+        accessToken
+      })
+    : warnMessage(info);
+};
+
+const refreshVerify = (): void => {
+  refreshGetVerify();
+};
+
+onBeforeMount(() => {
+  // refreshGetVerify();
+});
+</script>
+
 <template>
   <div class="login">
     <info
@@ -7,72 +61,3 @@
     />
   </div>
 </template>
-
-<script lang="ts">
-import { reactive, onBeforeMount } from "vue";
-import info, { ContextProps } from "../components/ReInfo/index.vue";
-import { getVerify, getLogin } from "/@/api/user";
-import { useRouter } from "vue-router";
-import { storageSession } from "/@/utils/storage";
-import { warnMessage, successMessage } from "/@/utils/message";
-export default {
-  name: "login",
-  components: {
-    info
-  },
-  setup() {
-    const router = useRouter();
-
-    // 刷新验证码
-    const refreshGetVerify = async () => {
-      let { svg } = await getVerify();
-      contextInfo.svg = svg;
-    };
-
-    const contextInfo: ContextProps = reactive({
-      userName: "",
-      passWord: "",
-      verify: null,
-      svg: null
-    });
-
-    const toPage = (info: Object): void => {
-      storageSession.setItem("info", info);
-      router.push("/");
-    };
-
-    // 登录
-    const onLogin = async () => {
-      let { userName, passWord, verify } = contextInfo;
-      let { code, info, accessToken } = await getLogin({
-        username: userName,
-        password: passWord,
-        verify: verify
-      });
-      code === 0
-        ? successMessage(info) &&
-          toPage({
-            username: userName,
-            accessToken
-          })
-        : warnMessage(info);
-    };
-
-    const refreshVerify = (): void => {
-      refreshGetVerify();
-    };
-
-    onBeforeMount(() => {
-      // refreshGetVerify();
-    });
-
-    return {
-      contextInfo,
-      onLogin,
-      router,
-      toPage,
-      refreshVerify
-    };
-  }
-};
-</script>
diff --git a/src/views/permission/button/index.vue b/src/views/permission/button/index.vue
index 809e7d38e..a7e734108 100644
--- a/src/views/permission/button/index.vue
+++ b/src/views/permission/button/index.vue
@@ -1,3 +1,18 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { storageSession } from "/@/utils/storage";
+
+const auth = ref(storageSession.getItem("info").username || "admin");
+
+function changRole(value) {
+  storageSession.setItem("info", {
+    username: value,
+    accessToken: `eyJhbGciOiJIUzUxMiJ9.${value}`
+  });
+  window.location.reload();
+}
+</script>
+
 <template>
   <div class="app-container">
     <el-radio-group v-model="auth" @change="changRole">
@@ -8,30 +23,3 @@
     <p v-auth="'v-test'">只有test可看</p>
   </div>
 </template>
-
-<script lang="ts">
-import { ref } from "vue";
-import { storageSession } from "/@/utils/storage";
-export default {
-  name: "permissionButton",
-  setup() {
-    const auth = ref(storageSession.getItem("info").username || "admin");
-
-    function changRole(value) {
-      storageSession.setItem("info", {
-        username: value,
-        accessToken: `eyJhbGciOiJIUzUxMiJ9.${value}`
-      });
-
-      window.location.reload();
-    }
-
-    return {
-      auth,
-      changRole
-    };
-  }
-};
-</script>
-
-<style scoped></style>
diff --git a/src/views/permission/page/index.vue b/src/views/permission/page/index.vue
index ab2b2efcd..866fbc229 100644
--- a/src/views/permission/page/index.vue
+++ b/src/views/permission/page/index.vue
@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import { ref, unref } from "vue";
+import { storageSession } from "/@/utils/storage";
+
+let purview: string = ref(storageSession.getItem("info").username);
+
+function changRole() {
+  if (unref(purview) === "admin") {
+    storageSession.setItem("info", {
+      username: "test",
+      accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
+    });
+    window.location.reload();
+  } else {
+    storageSession.setItem("info", {
+      username: "admin",
+      accessToken: "eyJhbGciOiJIUzUxMiJ9.admin"
+    });
+    window.location.reload();
+  }
+}
+</script>
+
 <template>
   <div class="app-container">
     <h4>
@@ -10,35 +33,3 @@
     <el-button type="primary" @click="changRole">切换角色</el-button>
   </div>
 </template>
-
-<script lang="ts">
-import { ref, unref } from "vue";
-import { storageSession } from "/@/utils/storage";
-export default {
-  name: "permissionPage",
-  setup() {
-    let purview: string = ref(storageSession.getItem("info").username);
-
-    function changRole() {
-      if (unref(purview) === "admin") {
-        storageSession.setItem("info", {
-          username: "test",
-          accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
-        });
-        window.location.reload();
-      } else {
-        storageSession.setItem("info", {
-          username: "admin",
-          accessToken: "eyJhbGciOiJIUzUxMiJ9.admin"
-        });
-        window.location.reload();
-      }
-    }
-
-    return {
-      purview,
-      changRole
-    };
-  }
-};
-</script>
diff --git a/src/views/redirect.vue b/src/views/redirect.vue
index ffec73747..57206495b 100644
--- a/src/views/redirect.vue
+++ b/src/views/redirect.vue
@@ -1,26 +1,20 @@
+<script setup lang="ts">
+import { unref } from "vue";
+import { useRouter } from "vue-router";
+
+const { currentRoute, replace } = useRouter();
+
+const { params, query } = unref(currentRoute);
+const { path } = params;
+
+const _path = Array.isArray(path) ? path.join("/") : path;
+
+replace({
+  path: "/" + _path,
+  query
+});
+</script>
+
 <template>
   <div></div>
 </template>
-<script lang="ts">
-import { defineComponent, unref } from "vue";
-import { useRouter } from "vue-router";
-
-export default defineComponent({
-  name: "redirect",
-  setup() {
-    const { currentRoute, replace } = useRouter();
-
-    const { params, query } = unref(currentRoute);
-    const { path } = params;
-
-    const _path = Array.isArray(path) ? path.join("/") : path;
-
-    replace({
-      path: "/" + _path,
-      query
-    });
-
-    return {};
-  }
-});
-</script>
diff --git a/src/views/register.vue b/src/views/register.vue
index 86ee7fdda..5676117e6 100644
--- a/src/views/register.vue
+++ b/src/views/register.vue
@@ -1,3 +1,47 @@
+<script setup lang="ts">
+import { reactive, onBeforeMount } from "vue";
+import info, { ContextProps } from "../components/ReInfo/index.vue";
+import { getRegist, getVerify } from "/@/api/user";
+import { useRouter } from "vue-router";
+import { warnMessage, successMessage } from "/@/utils/message";
+
+const router = useRouter();
+
+// 刷新验证码
+const refreshGetVerify = async () => {
+  let { svg } = await getVerify();
+  contextInfo.svg = svg;
+};
+
+const contextInfo: ContextProps = reactive({
+  userName: "",
+  passWord: "",
+  verify: null,
+  svg: null
+});
+
+// 注册
+const onRegist = async () => {
+  let { userName, passWord, verify } = contextInfo;
+  let { code, info } = await getRegist({
+    username: userName,
+    password: passWord,
+    verify: verify
+  });
+  code === 0
+    ? successMessage(info) && router.push("/login")
+    : warnMessage(info);
+};
+
+const refreshVerify = (): void => {
+  refreshGetVerify();
+};
+
+onBeforeMount(() => {
+  // refreshGetVerify();
+});
+</script>
+
 <template>
   <div class="register">
     <info
@@ -7,61 +51,3 @@
     />
   </div>
 </template>
-
-<script lang="ts">
-import { reactive, onBeforeMount } from "vue";
-import info, { ContextProps } from "../components/ReInfo/index.vue";
-import { getRegist, getVerify } from "/@/api/user";
-import { useRouter } from "vue-router";
-import { warnMessage, successMessage } from "/@/utils/message";
-export default {
-  name: "register",
-  components: {
-    info
-  },
-  setup() {
-    const router = useRouter();
-
-    // 刷新验证码
-    const refreshGetVerify = async () => {
-      let { svg } = await getVerify();
-      contextInfo.svg = svg;
-    };
-
-    const contextInfo: ContextProps = reactive({
-      userName: "",
-      passWord: "",
-      verify: null,
-      svg: null
-    });
-
-    // 注册
-    const onRegist = async () => {
-      let { userName, passWord, verify } = contextInfo;
-      let { code, info } = await getRegist({
-        username: userName,
-        password: passWord,
-        verify: verify
-      });
-      code === 0
-        ? successMessage(info) && router.push("/login")
-        : warnMessage(info);
-    };
-
-    const refreshVerify = (): void => {
-      refreshGetVerify();
-    };
-
-    onBeforeMount(() => {
-      // refreshGetVerify();
-    });
-
-    return {
-      contextInfo,
-      onRegist,
-      router,
-      refreshVerify
-    };
-  }
-};
-</script>
diff --git a/src/views/welcome.vue b/src/views/welcome.vue
index f0f0a2f12..b64e38ed5 100644
--- a/src/views/welcome.vue
+++ b/src/views/welcome.vue
@@ -1,3 +1,170 @@
+<script setup lang="ts">
+import Flop from "/@/components/ReFlop";
+import { ref, computed, onMounted, nextTick } from "vue";
+import { deviceDetection } from "/@/utils/deviceDetection";
+import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
+import { echartsJson } from "/@/api/mock";
+import echarts from "/@/plugins/echarts";
+import { ECharts } from "echarts";
+
+//折线图实例
+let brokenLine: ECharts;
+let mobile = ref<boolean>(deviceDetection());
+let date: Date = new Date();
+let loading = ref<boolean>(true);
+
+setTimeout(() => {
+  loading.value = !loading.value;
+  nextTick(() => {
+    initbrokenLine();
+  });
+}, 500);
+
+let greetings = computed(() => {
+  if (date.getHours() >= 0 && date.getHours() < 12) {
+    return "上午阳光明媚，祝你薪水翻倍🌞！";
+  } else if (date.getHours() >= 12 && date.getHours() < 18) {
+    return "下午小风娇好，愿你青春不老😃！";
+  } else {
+    return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
+  }
+});
+
+function initbrokenLine() {
+  const lineRefDom = document.getElementById("brokenLine");
+  if (!lineRefDom) return;
+  // @ts-ignore
+  brokenLine = echarts.init(lineRefDom);
+  brokenLine.clear(); //清除旧画布 重新渲染
+
+  echartsJson().then(({ info }) => {
+    brokenLine.setOption({
+      title: {
+        text: "上海 空气质量指数",
+        left: "1%"
+      },
+      tooltip: {
+        trigger: "axis"
+      },
+      grid: {
+        left: "5%",
+        right: "15%",
+        bottom: "10%"
+      },
+      xAxis: {
+        data: info.map(function (item) {
+          return item[0];
+        })
+      },
+      yAxis: {},
+      toolbox: {
+        right: 10,
+        feature: {
+          saveAsImage: {}
+        }
+      },
+      dataZoom: [
+        {
+          startValue: "2014-06-01"
+        },
+        {
+          type: "inside"
+        }
+      ],
+      visualMap: {
+        top: 50,
+        right: 10,
+        pieces: [
+          {
+            gt: 0,
+            lte: 50,
+            color: "#93CE07"
+          },
+          {
+            gt: 50,
+            lte: 100,
+            color: "#FBDB0F"
+          },
+          {
+            gt: 100,
+            lte: 150,
+            color: "#FC7D02"
+          },
+          {
+            gt: 150,
+            lte: 200,
+            color: "#FD0100"
+          },
+          {
+            gt: 200,
+            lte: 300,
+            color: "#AA069F"
+          },
+          {
+            gt: 300,
+            color: "#AC3B2A"
+          }
+        ],
+        outOfRange: {
+          color: "#999"
+        }
+      },
+      series: {
+        name: "上海 空气质量指数",
+        type: "line",
+        data: info.map(function (item) {
+          return item[1];
+        }),
+        markLine: {
+          silent: true,
+          lineStyle: {
+            color: "#333"
+          },
+          data: [
+            {
+              yAxis: 50
+            },
+            {
+              yAxis: 100
+            },
+            {
+              yAxis: 150
+            },
+            {
+              yAxis: 200
+            },
+            {
+              yAxis: 300
+            }
+          ]
+        }
+      }
+    });
+  });
+}
+
+const openDepot = (): void => {
+  window.open("https://github.com/xiaoxian521/vue-pure-admin");
+};
+
+onMounted(() => {
+  nextTick(() => {
+    useEventListener("resize", () => {
+      if (!brokenLine) return;
+      useTimeoutFn(() => {
+        brokenLine.resize();
+      }, 180);
+    });
+  });
+});
+
+tryOnUnmounted(() => {
+  if (!brokenLine) return;
+  brokenLine.dispose();
+  brokenLine = null;
+});
+</script>
+
 <template>
   <div class="welcome">
     <el-affix>
@@ -26,185 +193,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import Flop from "/@/components/ReFlop";
-import { ref, computed, onMounted, nextTick } from "vue";
-import { deviceDetection } from "/@/utils/deviceDetection";
-import { useEventListener, tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
-import { echartsJson } from "/@/api/mock";
-import echarts from "/@/plugins/echarts";
-
-let brokenLine: any = null; //折线图实例
-export default {
-  name: "welcome",
-  components: {
-    Flop
-  },
-  setup() {
-    let mobile = ref(deviceDetection());
-    let date: Date = new Date();
-    let loading = ref(true);
-
-    setTimeout(() => {
-      loading.value = !loading.value;
-      nextTick(() => {
-        initbrokenLine();
-      });
-    }, 500);
-
-    let greetings = computed(() => {
-      if (date.getHours() >= 0 && date.getHours() < 12) {
-        return "上午阳光明媚，祝你薪水翻倍🌞！";
-      } else if (date.getHours() >= 12 && date.getHours() < 18) {
-        return "下午小风娇好，愿你青春不老😃！";
-      } else {
-        return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
-      }
-    });
-
-    function initbrokenLine() {
-      const lineRefDom = document.getElementById("brokenLine");
-      if (!lineRefDom) return;
-      brokenLine = echarts.init(lineRefDom);
-      brokenLine.clear(); //清除旧画布 重新渲染
-
-      echartsJson().then(({ info }) => {
-        brokenLine.setOption({
-          title: {
-            text: "上海 空气质量指数",
-            left: "1%"
-          },
-          tooltip: {
-            trigger: "axis"
-          },
-          grid: {
-            left: "5%",
-            right: "15%",
-            bottom: "10%"
-          },
-          xAxis: {
-            data: info.map(function (item) {
-              return item[0];
-            })
-          },
-          yAxis: {},
-          toolbox: {
-            right: 10,
-            feature: {
-              saveAsImage: {}
-            }
-          },
-          dataZoom: [
-            {
-              startValue: "2014-06-01"
-            },
-            {
-              type: "inside"
-            }
-          ],
-          visualMap: {
-            top: 50,
-            right: 10,
-            pieces: [
-              {
-                gt: 0,
-                lte: 50,
-                color: "#93CE07"
-              },
-              {
-                gt: 50,
-                lte: 100,
-                color: "#FBDB0F"
-              },
-              {
-                gt: 100,
-                lte: 150,
-                color: "#FC7D02"
-              },
-              {
-                gt: 150,
-                lte: 200,
-                color: "#FD0100"
-              },
-              {
-                gt: 200,
-                lte: 300,
-                color: "#AA069F"
-              },
-              {
-                gt: 300,
-                color: "#AC3B2A"
-              }
-            ],
-            outOfRange: {
-              color: "#999"
-            }
-          },
-          series: {
-            name: "上海 空气质量指数",
-            type: "line",
-            data: info.map(function (item) {
-              return item[1];
-            }),
-            markLine: {
-              silent: true,
-              lineStyle: {
-                color: "#333"
-              },
-              data: [
-                {
-                  yAxis: 50
-                },
-                {
-                  yAxis: 100
-                },
-                {
-                  yAxis: 150
-                },
-                {
-                  yAxis: 200
-                },
-                {
-                  yAxis: 300
-                }
-              ]
-            }
-          }
-        });
-      });
-    }
-
-    const openDepot = (): void => {
-      window.open("https://github.com/xiaoxian521/vue-pure-admin");
-    };
-
-    onMounted(() => {
-      nextTick(() => {
-        useEventListener("resize", () => {
-          if (!brokenLine) return;
-          useTimeoutFn(() => {
-            brokenLine.resize();
-          }, 180);
-        });
-      });
-    });
-
-    tryOnUnmounted(() => {
-      if (!brokenLine) return;
-      brokenLine.dispose();
-      brokenLine = null;
-    });
-
-    return {
-      greetings,
-      mobile,
-      loading,
-      openDepot
-    };
-  }
-};
-</script>
-
 <style lang="scss" scoped>
 .welcome {
   width: 100%;
diff --git a/tsconfig.json b/tsconfig.json
index 82d5cc035..335bf5be0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,7 @@
     "importHelpers": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
+    "strictFunctionTypes": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "isolatedModules": true,
@@ -16,27 +17,14 @@
     "baseUrl": ".",
     "allowJs": false,
     "resolveJsonModule": true, // 包含导入的模块。json的扩展
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "incremental": true,
     "paths": {
-      "/@/*": [
-        "src/*"
-      ],
-      "/#/*": [
-        "types/*"
-      ]
+      "/@/*": ["src/*"],
+      "/#/*": ["types/*"]
     },
-    "types": [
-      "node",
-      "vite/client"
-    ],
-    "typeRoots": [
-      "./node_modules/@types/",
-      "./types"
-    ]
+    "types": ["node", "vite/client"],
+    "typeRoots": ["./node_modules/@types/", "./types"]
   },
   "include": [
     "src/**/*.ts",
@@ -46,9 +34,5 @@
     "mock/*.ts",
     "vite.config.ts"
   ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "**/*.js"
-  ]
-}
\ No newline at end of file
+  "exclude": ["node_modules", "dist", "**/*.js"]
+}