refactor: use setup refactor

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) {
+
+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>

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;

src/views/editor/index.vue

@@ -1,29 +1,23 @@
-<template>
-  <div>
-    <div ref="editor"></div>
-    <div :innerHTML="content.html"></div>
-  </div>
-</template>
+<script lang="ts">
+export default {
+  name: "reEditor"
+};
+</script>
 
-<script>
-import { onMounted, onBeforeUnmount, ref, reactive } from "vue";
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref, unref } from "vue";
 import WangEditor from "wangeditor";
 
-export default {
-  name: "reEditor",
-  setup() {
-    const editor = ref();
-    const content = reactive({
-      html: "",
-      text: ""
-    });
+// eslint-disable-next-line no-undef
+const editor = ref<ComponentRef>(null);
+const html = ref<HTMLElement>(null);
+let instance: WangEditor;
 
-    let instance;
 onMounted(() => {
-      instance = new WangEditor(editor.value);
+  instance = new WangEditor(unref(editor));
   Object.assign(instance.config, {
     onchange() {
-          content.html = instance.txt.html();
+      html.value = instance.txt.html();
     }
   });
   instance.create();
@@ -31,17 +25,16 @@ export default {
 
 onBeforeUnmount(() => {
   instance.destroy();
-      instance = null;
 });
-
-    return {
-      editor,
-      content
-    };
-  }
-};
 </script>
 
+<template>
+  <div>
+    <div ref="editor"></div>
+    <div :innerHTML="html"></div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 :deep(.w-e-text-container) {
   z-index: 99 !important;

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;

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%);

src/views/flow-chart/index.vue

@@ -1,43 +1,18 @@
-<template>
-  <div class="logic-flow-view">
-    <!-- 辅助工具栏 -->
-    <Control
-      class="demo-control"
-      v-if="lf"
-      :lf="lf"
-      :catTurboData="false"
-      @catData="catData"
-    ></Control>
-    <!-- 节点面板 -->
-    <NodePanel :lf="lf" :nodeList="nodeList"></NodePanel>
-    <!-- 画布 -->
-    <div id="LF-Turbo"></div>
-    <!-- 数据查看面板 -->
-    <el-dialog title="数据" v-model="dataVisible" width="50%">
-      <DataDialog :graphData="graphData"></DataDialog>
-    </el-dialog>
-  </div>
-</template>
-
-<script lang="ts">
+<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";
-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 dataVisible = ref<boolean>(false);
 let config = ref({
   grid: true,
   background: {
@@ -80,19 +55,29 @@ export default {
 onMounted(() => {
   initLf();
 });
-
-    return {
-      lf,
-      graphData,
-      dataVisible,
-      config,
-      nodeList,
-      catData
-    };
-  }
-};
 </script>
 
+<template>
+  <div class="logic-flow-view">
+    <!-- 辅助工具栏 -->
+    <Control
+      class="demo-control"
+      v-if="lf"
+      :lf="lf"
+      :catTurboData="false"
+      @catData="catData"
+    ></Control>
+    <!-- 节点面板 -->
+    <NodePanel :lf="lf" :nodeList="nodeList"></NodePanel>
+    <!-- 画布 -->
+    <div id="LF-Turbo"></div>
+    <!-- 数据查看面板 -->
+    <el-dialog title="数据" v-model="dataVisible" width="50%">
+      <DataDialog :graphData="graphData"></DataDialog>
+    </el-dialog>
+  </div>
+</template>
+
 <style scoped>
 #LF-Turbo {
   width: 100vw;

src/views/login.vue

@@ -1,26 +1,11 @@
-<template>
-  <div class="login">
-    <info
-      :ruleForm="contextInfo"
-      @on-behavior="onLogin"
-      @refreshVerify="refreshVerify"
-    />
-  </div>
-</template>
-
-<script lang="ts">
+<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";
-export default {
-  name: "login",
-  components: {
-    info
-  },
-  setup() {
+
 const router = useRouter();
 
 // 刷新验证码
@@ -65,14 +50,14 @@ export default {
 onBeforeMount(() => {
   // refreshGetVerify();
 });
-
-    return {
-      contextInfo,
-      onLogin,
-      router,
-      toPage,
-      refreshVerify
-    };
-  }
-};
 </script>
+
+<template>
+  <div class="login">
+    <info
+      :ruleForm="contextInfo"
+      @on-behavior="onLogin"
+      @refreshVerify="refreshVerify"
+    />
+  </div>
+</template>

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>

src/views/permission/page/index.vue

@@ -1,22 +1,7 @@
-<template>
-  <div class="app-container">
-    <h4>
-      当前角色：
-      <span style="font-size: 26px">{{ purview }}</span>
-      <p style="color: #ffa500">
-        查看左侧菜单变化(系统管理)，模拟后台根据不同角色返回对应路由
-      </p>
-    </h4>
-    <el-button type="primary" @click="changRole">切换角色</el-button>
-  </div>
-</template>
-
-<script lang="ts">
+<script setup 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() {
@@ -34,11 +19,17 @@ export default {
     window.location.reload();
   }
 }
-
-    return {
-      purview,
-      changRole
-    };
-  }
-};
 </script>
+
+<template>
+  <div class="app-container">
+    <h4>
+      当前角色：
+      <span style="font-size: 26px">{{ purview }}</span>
+      <p style="color: #ffa500">
+        查看左侧菜单变化(系统管理)，模拟后台根据不同角色返回对应路由
+      </p>
+    </h4>
+    <el-button type="primary" @click="changRole">切换角色</el-button>
+  </div>
+</template>

src/views/redirect.vue

@@ -1,13 +1,7 @@
-<template>
-  <div></div>
-</template>
-<script lang="ts">
-import { defineComponent, unref } from "vue";
+<script setup lang="ts">
+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 +13,8 @@ export default defineComponent({
   path: "/" + _path,
   query
 });
-
-    return {};
-  }
-});
 </script>
+
+<template>
+  <div></div>
+</template>

src/views/register.vue

@@ -1,25 +1,10 @@
-<template>
-  <div class="register">
-    <info
-      :ruleForm="contextInfo"
-      @on-behavior="onRegist"
-      @refreshVerify="refreshVerify"
-    />
-  </div>
-</template>
-
-<script lang="ts">
+<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";
-export default {
-  name: "register",
-  components: {
-    info
-  },
-  setup() {
+
 const router = useRouter();
 
 // 刷新验证码
@@ -55,13 +40,14 @@ export default {
 onBeforeMount(() => {
   // refreshGetVerify();
 });
-
-    return {
-      contextInfo,
-      onRegist,
-      router,
-      refreshVerify
-    };
-  }
-};
 </script>
+
+<template>
+  <div class="register">
+    <info
+      :ruleForm="contextInfo"
+      @on-behavior="onRegist"
+      @refreshVerify="refreshVerify"
+    />
+  </div>
+</template>

src/views/welcome.vue

@@ -1,49 +1,17 @@
-<template>
-  <div class="welcome">
-    <el-affix>
-      <div class="top-content">
-        <div class="left-mark">
-          <img
-            src="https://avatars.githubusercontent.com/u/44761321?s=400&u=30907819abd29bb3779bc247910873e7c7f7c12f&v=4"
-            title="直达仓库地址"
-            alt
-            @click="openDepot"
-          />
-          <span>{{ greetings }}</span>
-        </div>
-        <Flop v-if="!mobile" />
-      </div>
-    </el-affix>
-
-    <!-- 图表 -->
-    <el-card class="box-card">
-      <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
-        <template #default>
-          <div id="brokenLine"></div>
-        </template>
-      </el-skeleton>
-    </el-card>
-  </div>
-</template>
-
-<script lang="ts">
+<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: any = null; //折线图实例
-export default {
-  name: "welcome",
-  components: {
-    Flop
-  },
-  setup() {
-    let mobile = ref(deviceDetection());
+//折线图实例
+let brokenLine: ECharts;
+let mobile = ref<boolean>(deviceDetection());
 let date: Date = new Date();
-    let loading = ref(true);
+let loading = ref<boolean>(true);
 
 setTimeout(() => {
   loading.value = !loading.value;
@@ -65,6 +33,7 @@ export default {
 function initbrokenLine() {
   const lineRefDom = document.getElementById("brokenLine");
   if (!lineRefDom) return;
+  // @ts-ignore
   brokenLine = echarts.init(lineRefDom);
   brokenLine.clear(); //清除旧画布 重新渲染
 
@@ -194,17 +163,36 @@ export default {
   brokenLine.dispose();
   brokenLine = null;
 });
-
-    return {
-      greetings,
-      mobile,
-      loading,
-      openDepot
-    };
-  }
-};
 </script>
 
+<template>
+  <div class="welcome">
+    <el-affix>
+      <div class="top-content">
+        <div class="left-mark">
+          <img
+            src="https://avatars.githubusercontent.com/u/44761321?s=400&u=30907819abd29bb3779bc247910873e7c7f7c12f&v=4"
+            title="直达仓库地址"
+            alt
+            @click="openDepot"
+          />
+          <span>{{ greetings }}</span>
+        </div>
+        <Flop v-if="!mobile" />
+      </div>
+    </el-affix>
+
+    <!-- 图表 -->
+    <el-card class="box-card">
+      <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
+        <template #default>
+          <div id="brokenLine"></div>
+        </template>
+      </el-skeleton>
+    </el-card>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .welcome {
   width: 100%;

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"
-  ]
+  "exclude": ["node_modules", "dist", "**/*.js"]
 }