feat: use `unplugin-vue-define-options` add setup name

.eslintrc.js

@@ -49,6 +49,29 @@ module.exports = {
       jsx: true
     }
   },
+  overrides: [
+    {
+      files: ["*.ts", "*.vue"],
+      rules: {
+        "no-undef": "off"
+      }
+    },
+    {
+      files: ["*.vue"],
+      parser: "vue-eslint-parser",
+      parserOptions: {
+        parser: "@typescript-eslint/parser",
+        extraFileExtensions: [".vue"],
+        ecmaVersion: "latest",
+        ecmaFeatures: {
+          jsx: true
+        }
+      },
+      rules: {
+        "no-undef": "off"
+      }
+    }
+  ],
   rules: {
     "vue/no-v-html": "off",
     "vue/require-default-prop": "off",
@@ -94,4 +117,4 @@ module.exports = {
       }
     ]
   }
-};
+}

build/plugins.ts

@@ -11,6 +11,7 @@ import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
 import themePreprocessorPlugin from "@pureadmin/theme";
 import { genScssMultipleScopeVars } from "/@/layout/theme";
+import DefineOptions from "unplugin-vue-define-options/vite";
 
 export function getPluginsList(command, VITE_LEGACY) {
   const prodMock = true;
@@ -26,6 +27,7 @@ export function getPluginsList(command, VITE_LEGACY) {
     // jsx、tsx语法支持
     vueJsx(),
     Unocss(),
+    DefineOptions(),
     // 线上环境删除console
     removeConsole(),
     viteBuildInfo(),

mock/asyncRoutes.ts

@@ -13,7 +13,7 @@ const systemRouter = {
   children: [
     {
       path: "/system/user/index",
-      name: "user",
+      name: "User",
       meta: {
         icon: "flUser",
         title: "menus.hsUser"
@@ -21,7 +21,7 @@ const systemRouter = {
     },
     {
       path: "/system/role/index",
-      name: "role",
+      name: "Role",
       meta: {
         icon: "role",
         title: "menus.hsRole"
@@ -29,7 +29,7 @@ const systemRouter = {
     },
     {
       path: "/system/dept/index",
-      name: "dept",
+      name: "Dept",
       meta: {
         icon: "dept",
         title: "menus.hsDept"
@@ -38,7 +38,7 @@ const systemRouter = {
     {
       path: "/system/dict",
       component: "/system/dict/index",
-      name: "dict",
+      name: "Dict",
       meta: {
         icon: "dict",
         title: "menus.hsDict",
@@ -59,14 +59,14 @@ const permissionRouter = {
   children: [
     {
       path: "/permission/page/index",
-      name: "permissionPage",
+      name: "PermissionPage",
       meta: {
         title: "menus.permissionPage"
       }
     },
     {
       path: "/permission/button/index",
-      name: "permissionButton",
+      name: "PermissionButton",
       meta: {
         title: "menus.permissionButton",
         authority: []
@@ -86,7 +86,7 @@ const frameRouter = {
   children: [
     {
       path: "/iframe/pure",
-      name: "reFramePure",
+      name: "FramePure",
       meta: {
         title: "menus.hsPureDocument",
         frameSrc: "https://pure-admin-doc.vercel.app"
@@ -101,7 +101,7 @@ const frameRouter = {
     },
     {
       path: "/iframe/ep",
-      name: "reFrameEp",
+      name: "FrameEp",
       meta: {
         title: "menus.hsEpDocument",
         frameSrc: "https://element-plus.org/zh-CN/"
@@ -121,14 +121,14 @@ const tabsRouter = {
   children: [
     {
       path: "/tabs/index",
-      name: "reTabs",
+      name: "Tabs",
       meta: {
         title: "menus.hstabs"
       }
     },
     {
       path: "/tabs/detail",
-      name: "tabDetail",
+      name: "TabDetail",
       meta: {
         title: "",
         showLink: false,

package.json

@@ -29,16 +29,16 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@ctrl/tinycolor": "^3.4.1",
-    "@logicflow/core": "^1.1.15",
-    "@logicflow/extension": "^1.1.15",
+    "@logicflow/core": "^1.1.16",
+    "@logicflow/extension": "^1.1.16",
     "@pureadmin/components": "^1.0.6",
-    "@vueuse/core": "^8.4.2",
+    "@vueuse/core": "^8.5.0",
     "@vueuse/motion": "^2.0.0-beta.12",
-    "@vueuse/shared": "^8.4.2",
+    "@vueuse/shared": "^8.5.0",
     "@wangeditor/editor": "^5.0.1",
     "@wangeditor/editor-for-vue": "^5.1.10",
     "animate.css": "^4.1.1",
-    "axios": "^0.27.1",
+    "axios": "^0.27.2",
     "china-area-data": "^5.0.1",
     "cropperjs": "^1.5.12",
     "css-color-function": "^1.3.3",
@@ -64,7 +64,7 @@
     "rgb-hex": "^4.0.0",
     "swiper": "^8.1.4",
     "v-contextmenu": "3.0.0",
-    "vue": "^3.2.33",
+    "vue": "^3.2.34",
     "vue-form-create2": "^1.2.8",
     "vue-i18n": "^9.2.0-beta.35",
     "vue-json-pretty": "^2.0.2",
@@ -103,7 +103,7 @@
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
     "@vitejs/plugin-legacy": "^1.8.2",
-    "@vitejs/plugin-vue": "^2.3.2",
+    "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
@@ -134,6 +134,7 @@
     "stylelint-order": "^5.0.0",
     "typescript": "^4.6.3",
     "unocss": "^0.33.4",
+    "unplugin-vue-define-options": "^0.6.1",
     "vite": "^2.9.9",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-remove-console": "^0.0.7",

src/components/ReBarcode/src/index.vue

@@ -1,13 +1,11 @@
-<script lang="ts">
-export default {
-  name: "ReBarcode"
-};
-</script>
-
 <script setup lang="ts">
 import JsBarcode from "jsbarcode";
 import { ref, onMounted } from "vue";
 
+defineOptions({
+  name: "ReBarcode"
+});
+
 const props = defineProps({
   tag: {
     type: String,

src/components/ReCountTo/src/normal/index.tsx

@@ -10,7 +10,7 @@ import { countToProps } from "./props";
 import { isNumber } from "/@/utils/is";
 
 export default defineComponent({
-  name: "Normal",
+  name: "ReNormalCountTo",
   props: countToProps,
   emits: ["mounted", "callback"],
   setup(props, { emit }) {

src/components/ReCountTo/src/rebound/index.tsx

@@ -10,7 +10,7 @@ import {
 import { reboundProps } from "./props";
 
 export default defineComponent({
-  name: "Rebound",
+  name: "ReboundCountTo",
   props: reboundProps,
   setup(props) {
     const timer = ref(null);

src/components/ReCropper/src/index.tsx

@@ -74,7 +74,7 @@ const props = {
 };
 
 export default defineComponent({
-  name: "Cropper",
+  name: "ReCropper",
   props,
   setup(props) {
     const cropper: any = ref<Nullable<Cropper>>(null);

src/components/ReFlicker/index.ts

@@ -20,7 +20,7 @@ export interface attrsType {
  */
 export function useRenderFlicker(attrs?: attrsType): Component {
   return defineComponent({
-    name: "Flicker",
+    name: "ReFlicker",
     render() {
       return h(
         "div",

src/components/ReFlop/src/filpper.tsx

@@ -15,7 +15,7 @@ const props = {
 };
 
 export default defineComponent({
-  name: "Filpper",
+  name: "ReFlop",
   props,
   setup(props) {
     // eslint-disable-next-line vue/no-setup-props-destructure

src/components/ReIcon/src/Select.vue

@@ -4,6 +4,10 @@ import { ref, computed, CSSProperties, toRef, watch } from "vue";
 import { IconJson } from "/@/components/ReIcon/data";
 type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;
 
+defineOptions({
+  name: "IconSelect"
+});
+
 const props = defineProps({
   modelValue: {
     require: false,

src/components/ReIcon/src/iconfont.ts

@@ -2,7 +2,7 @@ import { h, defineComponent } from "vue";
 
 // 封装iconfont组件，默认`font-class`引用模式，支持`unicode`引用、`font-class`引用、`symbol`引用 （https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.20&helptype=code）
 export default defineComponent({
-  name: "fontIcon",
+  name: "FontIcon",
   props: {
     icon: {
       type: String,

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -147,7 +147,7 @@ addIcon("location-company", LocationCompany);
 
 // Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
 export default defineComponent({
-  name: "IconifyIcon",
+  name: "IconifyIconOffline",
   components: { IconifyIcon },
   props: {
     icon: {

src/components/ReIcon/src/iconifyIconOnline.ts

@@ -3,7 +3,7 @@ import { Icon as IconifyIcon } from "@iconify/vue";
 
 // Iconify Icon在Vue里在线使用（用于外网环境）
 export default defineComponent({
-  name: "IconifyIcon",
+  name: "IconifyIconOnline",
   components: { IconifyIcon },
   props: {
     icon: {

src/components/ReImageVerify/src/index.vue

@@ -1,13 +1,11 @@
-<script lang="ts">
-export default {
-  name: "ReImageVerify"
-};
-</script>
-
 <script setup lang="ts">
 import { watch } from "vue";
 import { useImageVerify } from "./hooks";
 
+defineOptions({
+  name: "ReImageVerify"
+});
+
 interface Props {
   code?: string;
 }

src/components/ReMap/src/Amap.vue

@@ -15,6 +15,10 @@ export interface MapConfigureInter {
   plugin?: Fn;
 }
 
+defineOptions({
+  name: "Amap"
+});
+
 type resultType = {
   info: Array<undefined>;
 };

src/components/ReSeamlessScroll/src/index.vue

@@ -11,6 +11,10 @@ import * as utilsMethods from "./utils";
 const { animationFrame, copyObj } = utilsMethods;
 animationFrame();
 
+defineOptions({
+  name: "ReSeamlessScroll"
+});
+
 const props = defineProps({
   data: {
     type: Array as PropType<unknown>

src/components/ReSelector/src/index.tsx

@@ -50,7 +50,7 @@ const props = {
 };
 
 export default defineComponent({
-  name: "Selector",
+  name: "ReSelector",
   props,
   emits: ["selectedVal"],
   setup(props, { emit }) {

src/components/ReSplitPane/index.tsx

@@ -10,7 +10,7 @@ export interface ContextProps {
 
 /** 切割面板组件 */
 export default defineComponent({
-  name: "splitPane",
+  name: "SplitPane",
   components: { resizer },
   props: {
     splitSet: {

src/components/ReSplitPane/resizer.tsx

@@ -2,7 +2,7 @@ import { computed, unref, defineComponent } from "vue";
 import "./resizer.css";
 
 export default defineComponent({
-  name: "resizer",
+  name: "Resizer",
   props: {
     split: {
       type: String,

src/components/ReTable/src/bar.tsx

@@ -43,7 +43,7 @@ const props = {
 };
 
 export default defineComponent({
-  name: "epTableProBar",
+  name: "EpTableProBar",
   props,
   emits: ["refresh"],
   setup(props, { emit, slots, attrs }) {

src/components/ReTreeLine/index.ts

@@ -11,7 +11,7 @@ import type {
 
 /** 树形连接线组件 */
 export default defineComponent({
-  name: "el-tree-line",
+  name: "ReTreeLine",
   props: {
     node: {
       type: Object as PropType<TreeNode>,

src/layout/frameView.vue

@@ -13,6 +13,10 @@ import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { ref, unref, onMounted, nextTick } from "vue";
 
+defineOptions({
+  name: "FrameView"
+});
+
 const { t } = useI18n();
 const loading = ref(false);
 const currentRoute = useRoute();

src/layout/redirect.vue

@@ -2,6 +2,10 @@
 import { unref } from "vue";
 import { useRouter } from "vue-router";
 
+defineOptions({
+  name: "Redirect"
+});
+
 const { currentRoute, replace } = useRouter();
 
 const { params, query } = unref(currentRoute);

src/router/index.ts

@@ -103,7 +103,7 @@ router.beforeEach((to: toRouteType, _from, next) => {
     const newMatched = to.matched;
     handleAliveRoute(newMatched, "add");
     // 页面整体刷新和点击标签页刷新
-    if (_from.name === undefined || _from.name === "redirect") {
+    if (_from.name === undefined || _from.name === "Redirect") {
       handleAliveRoute(newMatched);
     }
   }

src/router/modules/able.ts

@@ -13,7 +13,7 @@ const ableRouter = {
   children: [
     {
       path: "/able/watermark",
-      name: "reWatermark",
+      name: "WaterMark",
       component: () => import("/@/views/able/watermark.vue"),
       meta: {
         title: $t("menus.hsWatermark")
@@ -21,7 +21,7 @@ const ableRouter = {
     },
     {
       path: "/able/print",
-      name: "rePrint",
+      name: "Print",
       component: () => import("/@/views/able/print.vue"),
       meta: {
         title: $t("menus.hsPrint")
@@ -29,7 +29,7 @@ const ableRouter = {
     },
     {
       path: "/able/iconSelect",
-      name: "reIconSelect",
+      name: "IconSelect",
       component: () => import("/@/views/able/icon-select.vue"),
       meta: {
         title: $t("menus.hsIconSelect")
@@ -37,7 +37,7 @@ const ableRouter = {
     },
     {
       path: "/able/timeline",
-      name: "reTimeline",
+      name: "TimeLine",
       component: () => import("/@/views/able/timeline.vue"),
       meta: {
         title: $t("menus.hsTimeline")
@@ -45,7 +45,7 @@ const ableRouter = {
     },
     {
       path: "/able/menuTree",
-      name: "reMenuTree",
+      name: "MenuTree",
       component: () => import("/@/views/able/menu-tree.vue"),
       meta: {
         title: $t("menus.hsMenuTree")
@@ -53,7 +53,7 @@ const ableRouter = {
     },
     {
       path: "/able/lineTree",
-      name: "reLineTree",
+      name: "LineTree",
       component: () => import("/@/views/able/line-tree.vue"),
       meta: {
         title: $t("menus.hsLineTree")
@@ -61,7 +61,7 @@ const ableRouter = {
     },
     {
       path: "/able/antTabs",
-      name: "reAntTabs",
+      name: "AntTabs",
       component: () => import("/@/views/able/ant-tabs.vue"),
       meta: {
         title: $t("menus.hsAntTabs")
@@ -69,7 +69,7 @@ const ableRouter = {
     },
     {
       path: "/able/antAnchor",
-      name: "reAntAnchor",
+      name: "AntAnchor",
       component: () => import("/@/views/able/ant-anchor.vue"),
       meta: {
         title: $t("menus.hsAntAnchor")
@@ -77,7 +77,7 @@ const ableRouter = {
     },
     {
       path: "/able/antTreeSelect",
-      name: "reAntTreeSelect",
+      name: "AntTreeSelect",
       component: () => import("/@/views/able/ant-treeSelect.vue"),
       meta: {
         title: $t("menus.hsAntTreeSelect")
@@ -85,7 +85,7 @@ const ableRouter = {
     },
     {
       path: "/able/debounce",
-      name: "reDebounce",
+      name: "Debounce",
       component: () => import("/@/views/able/debounce.vue"),
       meta: {
         title: $t("menus.hsDebounce")
@@ -93,7 +93,7 @@ const ableRouter = {
     },
     {
       path: "/able/barcode",
-      name: "reBarcode",
+      name: "BarCode",
       component: () => import("/@/views/able/barcode.vue"),
       meta: {
         title: $t("menus.hsBarcode")
@@ -101,7 +101,7 @@ const ableRouter = {
     },
     {
       path: "/able/qrcode",
-      name: "reQrcode",
+      name: "QrCode",
       component: () => import("/@/views/able/qrcode.vue"),
       meta: {
         title: $t("menus.hsQrcode")
@@ -109,7 +109,7 @@ const ableRouter = {
     },
     {
       path: "/able/cascader",
-      name: "reCascader",
+      name: "Cascader",
       component: () => import("/@/views/able/cascader.vue"),
       meta: {
         title: $t("menus.hsCascader")
@@ -117,7 +117,7 @@ const ableRouter = {
     },
     {
       path: "/able/swiper",
-      name: "reSwiper",
+      name: "Swiper",
       component: () => import("/@/views/able/swiper.vue"),
       meta: {
         title: $t("menus.hsSwiper")
@@ -125,7 +125,7 @@ const ableRouter = {
     },
     {
       path: "/able/virtualList",
-      name: "reVirtualList",
+      name: "VirtualList",
       component: () => import("/@/views/able/virtual-list/index.vue"),
       meta: {
         title: $t("menus.hsVirtualList")

src/router/modules/about.ts

@@ -13,7 +13,7 @@ const aboutRouter = {
   children: [
     {
       path: "/about/index",
-      name: "reAbout",
+      name: "About",
       component: () => import("/@/views/about/index.vue"),
       meta: {
         title: $t("menus.hsAbout")

src/router/modules/components.ts

@@ -13,7 +13,7 @@ const componentsRouter = {
   children: [
     {
       path: "/components/video",
-      name: "video",
+      name: "Video",
       component: () => import("/@/views/components/video/index.vue"),
       meta: {
         title: $t("menus.hsvideo")
@@ -21,7 +21,7 @@ const componentsRouter = {
     },
     {
       path: "/components/map",
-      name: "map",
+      name: "Map",
       component: () => import("/@/views/components/map/index.vue"),
       meta: {
         title: $t("menus.hsmap"),
@@ -33,7 +33,7 @@ const componentsRouter = {
     },
     {
       path: "/components/draggable",
-      name: "draggable",
+      name: "Draggable",
       component: () => import("/@/views/components/draggable/index.vue"),
       meta: {
         title: $t("menus.hsdraggable"),
@@ -43,10 +43,9 @@ const componentsRouter = {
         }
       }
     },
-
     {
       path: "/components/splitPane",
-      name: "splitPane",
+      name: "SplitPane",
       component: () => import("/@/views/components/split-pane/index.vue"),
       meta: {
         title: $t("menus.hssplitPane"),
@@ -58,7 +57,7 @@ const componentsRouter = {
     },
     {
       path: "/components/button",
-      name: "button",
+      name: "Button",
       component: () => import("/@/views/components/button/index.vue"),
       meta: {
         title: $t("menus.hsbutton")
@@ -66,7 +65,7 @@ const componentsRouter = {
     },
     {
       path: "/components/cropping",
-      name: "cropping",
+      name: "Cropping",
       component: () => import("/@/views/components/cropping/index.vue"),
       meta: {
         title: $t("menus.hscropping")
@@ -74,7 +73,7 @@ const componentsRouter = {
     },
     {
       path: "/components/countTo",
-      name: "countTo",
+      name: "CountTo",
       component: () => import("/@/views/components/count-to/index.vue"),
       meta: {
         title: $t("menus.hscountTo")
@@ -82,7 +81,7 @@ const componentsRouter = {
     },
     {
       path: "/components/selector",
-      name: "selector",
+      name: "Selector",
       component: () => import("/@/views/components/selector/index.vue"),
       meta: {
         title: $t("menus.hsselector")
@@ -90,7 +89,7 @@ const componentsRouter = {
     },
     {
       path: "/components/seamlessScroll",
-      name: "seamlessScroll",
+      name: "SeamlessScroll",
       component: () => import("/@/views/components/seamless-scroll/index.vue"),
       meta: {
         title: $t("menus.hsseamless")
@@ -98,7 +97,7 @@ const componentsRouter = {
     },
     {
       path: "/components/contextmenu",
-      name: "contextmenu",
+      name: "ContextMenu",
       component: () => import("/@/views/components/contextmenu/index.vue"),
       meta: {
         title: $t("menus.hscontextmenu")

src/router/modules/editor.ts

@@ -13,7 +13,7 @@ const editorRouter = {
   children: [
     {
       path: "/editor/index",
-      name: "reEditor",
+      name: "Editor",
       component: () => import("/@/views/editor/index.vue"),
       meta: {
         title: $t("menus.hseditor"),

src/router/modules/flowchart.ts

@@ -13,7 +13,7 @@ const flowChartRouter = {
   children: [
     {
       path: "/flowChart/index",
-      name: "flowChart",
+      name: "FlowChart",
       component: () => import("/@/views/flow-chart/index.vue"),
       meta: {
         title: $t("menus.hsflowChart")

src/router/modules/formdesign.ts

@@ -13,7 +13,7 @@ const formDesignRouter = {
   children: [
     {
       path: "/formDesign/index",
-      name: "formDesign",
+      name: "FormDesign",
       component: () => import("/@/views/form-design/index.vue"),
       meta: {
         title: $t("menus.hsFormDesign")

src/router/modules/guide.ts

@@ -13,7 +13,7 @@ const guideRouter = {
   children: [
     {
       path: "/guide/index",
-      name: "reGuide",
+      name: "Guide",
       component: () => import("/@/views/guide/index.vue"),
       meta: {
         title: $t("menus.hsguide")

src/router/modules/list.ts

@@ -13,7 +13,7 @@ const ableRouter = {
   children: [
     {
       path: "/list/card",
-      name: "listCard",
+      name: "ListCard",
       component: () => import("/@/views/list/card/index.vue"),
       meta: {
         icon: "card",

src/router/modules/ppt.ts

@@ -13,7 +13,7 @@ const pptRouter = {
   children: [
     {
       path: "/ppt/index",
-      name: "reFrameppt",
+      name: "FramePpt",
       component: IFrame,
       meta: {
         title: "PPT",

src/router/modules/remaining.ts

@@ -4,7 +4,7 @@ const Layout = () => import("/@/layout/index.vue");
 const remainingRouter = [
   {
     path: "/login",
-    name: "login",
+    name: "Login",
     component: () => import("/@/views/login/index.vue"),
     meta: {
       title: $t("menus.hslogin"),
@@ -24,7 +24,7 @@ const remainingRouter = [
     children: [
       {
         path: "/redirect/:path(.*)",
-        name: "redirect",
+        name: "Redirect",
         component: () => import("/@/layout/redirect.vue")
       }
     ]

src/router/modules/result.ts

@@ -13,7 +13,7 @@ const resultRouter = {
   children: [
     {
       path: "/result/success",
-      name: "reSuccess",
+      name: "Success",
       component: () => import("/@/views/result/success.vue"),
       meta: {
         title: $t("menus.hsSuccess")
@@ -21,7 +21,7 @@ const resultRouter = {
     },
     {
       path: "/result/fail",
-      name: "reFail",
+      name: "Fail",
       component: () => import("/@/views/result/fail.vue"),
       meta: {
         title: $t("menus.hsFail")

src/views/able/ant-anchor.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { Anchor, AnchorLink } from "@pureadmin/components";
 
+defineOptions({
+  name: "AntAnchor"
+});
+
 function handleAnchorClick(e, link) {
   e.preventDefault();
   const srcolls = document.getElementById(link.href);

src/views/able/ant-tabs.vue

@@ -2,6 +2,10 @@
 import { ref } from "vue";
 import { Tabs, TabPane } from "@pureadmin/components";
 
+defineOptions({
+  name: "AntTabs"
+});
+
 const mode = ref("top");
 const activeKey = ref(1);
 const callback = (val: string) => {

src/views/able/ant-treeSelect.vue

@@ -2,6 +2,10 @@
 import { ref } from "vue";
 import { TreeSelect } from "@pureadmin/components";
 
+defineOptions({
+  name: "AntTreeSelect"
+});
+
 const value1 = ref<string>("");
 const treeData1 = ref([
   {

src/views/able/barcode.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import ReBarcode from "/@/components/ReBarcode";
 
+defineOptions({
+  name: "BarCode"
+});
+
 const barcodes = [
   {
     text: "CODE128",

src/views/able/cascader.vue

@@ -9,6 +9,10 @@ import {
 } from "/@/utils/chinaArea";
 import { ref } from "vue";
 
+defineOptions({
+  name: "Cascader"
+});
+
 const selectedOptions1 = ref(["110000", "110100"]);
 const selectedOptions2 = ref(["120000", "120100", "120101"]);
 const selectedOptions3 = ref(["130000", ""]);

src/views/able/debounce.vue

@@ -3,6 +3,10 @@ import { ElMessage } from "element-plus";
 import { debounce } from "/@/utils/debounce";
 import { useDebounceFn, useThrottleFn } from "@vueuse/core";
 
+defineOptions({
+  name: "Debounce"
+});
+
 const handle = () => {
   ElMessage({
     message: "恭喜你，这是一条成功消息",

src/views/able/icon-select.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { IconSelect } from "/@/components/ReIcon";
+
+defineOptions({
+  name: "IconSelect"
+});
+
 let icon = ref("ep:add-location");
 </script>
 

src/views/able/line-tree.vue

@@ -5,6 +5,10 @@ import ElTreeLine from "/@/components/ReTreeLine";
 import { extractPathList, deleteChildren } from "/@/utils/tree";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 
+defineOptions({
+  name: "LineTree"
+});
+
 let menusData = computed(() => {
   return deleteChildren(usePermissionStoreHook().menusTree);
 });

src/views/able/menu-tree.vue

@@ -1,9 +1,3 @@
-<script lang="ts">
-export default {
-  name: "reMenuTree"
-};
-</script>
-
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import type { ElTreeV2 } from "element-plus";
@@ -13,6 +7,10 @@ import { extractPathList, deleteChildren } from "/@/utils/tree";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
 
+defineOptions({
+  name: "MenuTree"
+});
+
 interface treeNode extends TreeNode {
   meta: {
     title: string;

src/views/able/print.vue

@@ -4,6 +4,10 @@ import { reactive, ref } from "vue";
 import { VxeTablePropTypes } from "vxe-table";
 import { ReLine } from "../welcome/components";
 
+defineOptions({
+  name: "Print"
+});
+
 interface User {
   date: string;
   name: string;

src/views/able/qrcode.vue

@@ -4,6 +4,10 @@ import { ElMessage } from "element-plus";
 import avatars from "/@/assets/avatars.jpg";
 import ReQrcode from "/@/components/ReQrcode";
 
+defineOptions({
+  name: "QrCode"
+});
+
 const qrcodeText = "vue-pure-admin";
 
 const asyncTitle = ref("");

src/views/able/swiper.vue

@@ -6,6 +6,10 @@ import type { SwiperOptions } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import SwiperCore, { Autoplay, Navigation, Pagination } from "swiper";
 
+defineOptions({
+  name: "Swiper"
+});
+
 type SwiperExampleOptions = Pick<
   SwiperOptions,
   | "navigation"

src/views/able/timeline.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { useRenderFlicker } from "/@/components/ReFlicker";
-// eslint-disable-next-line no-undef
+
+defineOptions({
+  name: "TimeLine"
+});
+
 const { lastBuildTime } = __APP_INFO__;
 const activities = [
   {

src/views/able/virtual-list/index.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import verticalList from "./vertical.vue";
 import horizontalList from "./horizontal.vue";
+
+defineOptions({
+  name: "VirtualList"
+});
 </script>
 
 <template>

src/views/able/watermark.vue

@@ -2,6 +2,10 @@
 import { ref } from "vue";
 import { useWatermark } from "/@/utils/watermark";
 
+defineOptions({
+  name: "WaterMark"
+});
+
 let color = ref("#409EFF");
 let value = ref("vue-pure-admin");
 const { setWatermark, clear } = useWatermark();

src/views/about/index.vue

@@ -4,7 +4,10 @@ export interface schemaItem {
   label: string;
 }
 
-// eslint-disable-next-line no-undef
+defineOptions({
+  name: "About"
+});
+
 const { pkg, lastBuildTime } = __APP_INFO__;
 const { dependencies, devDependencies, version } = pkg;
 

src/views/components/button/index.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { loadEnv } from "@build/index";
+
+defineOptions({
+  name: "Button"
+});
+
 const { VITE_PUBLIC_PATH } = loadEnv();
 
 const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);

src/views/components/contextmenu/index.vue

@@ -2,6 +2,10 @@
 import basic from "./basic.vue";
 import menuGroup from "./menuGroup.vue";
 import menuDynamic from "./menuDynamic.vue";
+
+defineOptions({
+  name: "ContextMenu"
+});
 </script>
 
 <template>

src/views/components/count-to/index.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
+
+defineOptions({
+  name: "CountTo"
+});
 </script>
 
 <template>

src/views/components/cropping/index.vue

@@ -3,6 +3,10 @@ import { ref, nextTick, getCurrentInstance } from "vue";
 import Cropper from "/@/components/ReCropper";
 import img from "./picture.jpeg";
 
+defineOptions({
+  name: "Cropping"
+});
+
 let info = ref<object>(null);
 let cropperImg = ref<string>("");
 const instance = getCurrentInstance();

src/views/components/draggable/index.vue

@@ -3,6 +3,10 @@ import { ref, onMounted } from "vue";
 import draggable from "vuedraggable/src/vuedraggable";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
+defineOptions({
+  name: "Draggable"
+});
+
 let gridLists = ref<Array<Object>>([
   { grid: "cn", num: 1 },
   { grid: "cn", num: 2 },
@@ -36,7 +40,6 @@ const change = (evt): void => {
 onMounted(() => {
   // 使用原生sortable实现元素位置切换
   // @ts-ignore
-  // eslint-disable-next-line no-undef
   new Sortable(document.querySelector(".cut-container"), {
     swap: true,
     forceFallback: true,

src/views/components/map/index.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { Amap } from "/@/components/ReMap";
+
+defineOptions({
+  name: "Map"
+});
 </script>
 
 <template>

src/views/components/seamless-scroll/index.vue

@@ -3,7 +3,10 @@ import { ref, reactive, unref } from "vue";
 import { templateRef } from "@vueuse/core";
 import SeamlessScroll from "/@/components/ReSeamlessScroll";
 
-// eslint-disable-next-line no-undef
+defineOptions({
+  name: "SeamlessScroll"
+});
+
 const scroll = templateRef<ElRef | null>("scroll", null);
 
 let listData = ref([

src/views/components/selector/index.vue

@@ -2,6 +2,10 @@
 import { ref } from "vue";
 import Selector from "/@/components/ReSelector";
 
+defineOptions({
+  name: "Selector"
+});
+
 let selectRange = ref<string>("");
 let dataLists = ref([
   {

src/views/components/split-pane/index.vue

@@ -2,6 +2,10 @@
 import splitpane, { ContextProps } from "/@/components/ReSplitPane";
 import { reactive } from "vue";
 
+defineOptions({
+  name: "SplitPane"
+});
+
 const settingLR: ContextProps = reactive({
   minPercent: 20,
   defaultPercent: 40,

src/views/components/video/index.vue

@@ -7,6 +7,10 @@ import { deviceDetection } from "/@/utils/deviceDetection";
 import playbackRate from "xgplayer/es/controls/playbackRate";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
+defineOptions({
+  name: "Video"
+});
+
 onMounted(() => {
   new Player({
     id: "mse",

src/views/editor/index.vue

@@ -1,14 +1,12 @@
-<script lang="ts">
-export default {
-  name: "reEditor"
-};
-</script>
-
 <script setup lang="ts">
 import "@wangeditor/editor/dist/css/style.css"; // 引入 css
-import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
 import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "Editor"
+});
 
 const mode = "default";
 // 编辑器实例，必须用 shallowRef
@@ -51,9 +49,9 @@ const handleCreated = editor => {
             :icon="useRenderIcon('edit')"
             style="font-size: 16px; margin: 0 4px 5px"
           >
-            wangeditor
-          </el-link></span
-        >
+            Wangeditor
+          </el-link>
+        </span>
       </div>
     </template>
     <Toolbar

src/views/error/403.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import noAccess from "/@/assets/status/403.svg?component";
+
+defineOptions({
+  name: "403"
+});
 </script>
 
 <template>

src/views/error/404.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import noExist from "/@/assets/status/404.svg?component";
+
+defineOptions({
+  name: "404"
+});
 </script>
 
 <template>

src/views/error/500.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import noServer from "/@/assets/status/500.svg?component";
+
+defineOptions({
+  name: "500"
+});
 </script>
 
 <template>
@@ -21,7 +25,7 @@ import noServer from "/@/assets/status/500.svg?component";
           }
         }"
       >
-        403
+        500
       </p>
       <p
         class="mb-4 text-gray-500"

src/views/flow-chart/index.vue

@@ -11,6 +11,10 @@ import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
 import { Control, NodePanel, DataDialog } from "/@/components/ReFlowChart";
 import { toLogicflowData } from "/@/components/ReFlowChart/src/adpterForTurbo";
 
+defineOptions({
+  name: "FlowChart"
+});
+
 let lf = ref(null);
 let graphData = ref(null);
 let dataVisible = ref<boolean>(false);

src/views/form-design/index.vue

@@ -3,6 +3,10 @@ import { ref, onBeforeMount } from "vue";
 import { loader } from "/@/utils/loaders";
 import { ElDesignForm } from "vue-form-create2";
 
+defineOptions({
+  name: "FormDesign"
+});
+
 const loading = ref(true);
 
 onBeforeMount(() => {

src/views/guide/index.vue

@@ -2,6 +2,10 @@
 import Driver from "driver.js";
 import "driver.js/dist/driver.min.css";
 
+defineOptions({
+  name: "Guide"
+});
+
 const steps = [
   {
     element: "#header-notice",

src/views/list/card/components/Card.vue

@@ -1,9 +1,3 @@
-<script lang="ts">
-export default {
-  name: "ReCard"
-};
-</script>
-
 <script setup lang="ts">
 import { computed, PropType } from "vue";
 import shopIcon from "/@/assets/svg/shop.svg?component";
@@ -19,6 +13,10 @@ export interface CardProductType {
   name: string;
 }
 
+defineOptions({
+  name: "ReCard"
+});
+
 const props = defineProps({
   product: {
     type: Object as PropType<CardProductType>

src/views/list/card/index.vue

@@ -1,9 +1,3 @@
-<script lang="ts">
-export default {
-  name: "ListCard"
-};
-</script>
-
 <script setup lang="ts">
 import { getCardList } from "/@/api/list";
 import Card from "./components/Card.vue";
@@ -12,6 +6,10 @@ import dialogForm from "./components/DialogForm.vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
+defineOptions({
+  name: "ListCard"
+});
+
 const svg = `
         <path class="path" d="
           M 30 15

src/views/login/index.vue

@@ -17,6 +17,10 @@ import { bg, avatar, currentWeek } from "./utils/static";
 import { ReImageVerify } from "/@/components/ReImageVerify";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
+defineOptions({
+  name: "Login"
+});
+
 const imgCode = ref("");
 const router = useRouter();
 const loading = ref(false);

src/views/nested/menu1/menu1-1/index.vue

@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+defineOptions({
+  name: "Menu1-1"
+});
+
+let input = ref("");
+const { t } = useI18n();
+</script>
+
 <template>
   <div>
     <p>{{ t("menus.hsmenu1") }}</p>
@@ -5,18 +17,3 @@
     <el-input v-model="input" />
   </div>
 </template>
-
-<script lang="ts">
-import { useI18n } from "vue-i18n";
-import { defineComponent, ref } from "vue";
-export default defineComponent({
-  name: "Menu1-1",
-  setup() {
-    const { t } = useI18n();
-    return {
-      input: ref(""),
-      t
-    };
-  }
-});
-</script>

src/views/nested/menu1/menu1-2/menu1-2-1/index.vue

@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+defineOptions({
+  name: "Menu1-2-1"
+});
+
+let input = ref("");
+const { t } = useI18n();
+</script>
+
 <template>
   <div>
     <p>{{ t("menus.hsmenu1") }}</p>
@@ -6,18 +18,3 @@
     <el-input v-model="input" />
   </div>
 </template>
-
-<script lang="ts">
-import { useI18n } from "vue-i18n";
-import { defineComponent, ref } from "vue";
-export default defineComponent({
-  name: "Menu1-2-1",
-  setup() {
-    const { t } = useI18n();
-    return {
-      input: ref(""),
-      t
-    };
-  }
-});
-</script>

src/views/nested/menu1/menu1-2/menu1-2-2/index.vue

@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+defineOptions({
+  name: "Menu1-2-2"
+});
+
+let input = ref("");
+const { t } = useI18n();
+</script>
+
 <template>
   <div>
     <p>{{ t("menus.hsmenu1") }}</p>
@@ -6,18 +18,3 @@
     <el-input v-model="input" />
   </div>
 </template>
-
-<script lang="ts">
-import { useI18n } from "vue-i18n";
-import { defineComponent, ref } from "vue";
-export default defineComponent({
-  name: "Menu1-2-2",
-  setup() {
-    const { t } = useI18n();
-    return {
-      input: ref(""),
-      t
-    };
-  }
-});
-</script>

src/views/nested/menu1/menu1-3/index.vue

@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+defineOptions({
+  name: "Menu1-3"
+});
+
+let input = ref("");
+const { t } = useI18n();
+</script>
+
 <template>
   <div>
     <p>{{ t("menus.hsmenu1") }}</p>
@@ -5,18 +17,3 @@
     <el-input v-model="input" />
   </div>
 </template>
-
-<script lang="ts">
-import { useI18n } from "vue-i18n";
-import { defineComponent, ref } from "vue";
-export default defineComponent({
-  name: "Menu1-3",
-  setup() {
-    const { t } = useI18n();
-    return {
-      input: ref(""),
-      t
-    };
-  }
-});
-</script>

src/views/nested/menu2/index.vue

@@ -1,21 +1,18 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+defineOptions({
+  name: "Menu2"
+});
+
+let input = ref("");
+const { t } = useI18n();
+</script>
+
 <template>
   <div>
     <p>{{ t("menus.hsmenu2") }}</p>
     <el-input v-model="input" />
   </div>
 </template>
-
-<script lang="ts">
-import { useI18n } from "vue-i18n";
-import { defineComponent, ref } from "vue";
-export default defineComponent({
-  name: "Menu2",
-  setup() {
-    const { t } = useI18n();
-    return {
-      input: ref(""),
-      t
-    };
-  }
-});
-</script>

src/views/permission/button/index.vue

@@ -1,13 +1,11 @@
-<script lang="ts">
-export default {
-  name: "permissionButton"
-};
-</script>
-
 <script setup lang="ts">
 import { ref } from "vue";
 import { storageSession } from "/@/utils/storage";
 
+defineOptions({
+  name: "PermissionButton"
+});
+
 const auth = ref<boolean>(storageSession.getItem("info").username || "admin");
 
 function changRole(value) {

src/views/permission/page/index.vue

@@ -1,14 +1,12 @@
-<script lang="ts">
-export default {
-  name: "permissionPage"
-};
-</script>
-
 <script setup lang="ts">
 import { ref, unref } from "vue";
 import { storageSession } from "/@/utils/storage";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
+defineOptions({
+  name: "PermissionPage"
+});
+
 let purview = ref<string>(storageSession.getItem("info").username);
 
 function changRole() {

src/views/result/fail.vue

@@ -1,4 +1,8 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineOptions({
+  name: "Fail"
+});
+</script>
 
 <template>
   <el-card>

src/views/result/success.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-// eslint-disable-next-line no-undef
+defineOptions({
+  name: "Success"
+});
+
 const { lastBuildTime } = __APP_INFO__;
 </script>
 

src/views/system/dept/index.vue

@@ -1,9 +1,3 @@
-<script lang="ts">
-export default {
-  name: "dept"
-};
-</script>
-
 <script setup lang="ts">
 import dayjs from "dayjs";
 import { handleTree } from "/@/utils/tree";
@@ -13,6 +7,10 @@ import { reactive, ref, onMounted } from "vue";
 import { EpTableProBar } from "/@/components/ReTable";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
+defineOptions({
+  name: "Dept"
+});
+
 const form = reactive({
   user: "",
   status: ""

src/views/system/dict/index.vue

@@ -1,9 +1,3 @@
-<script lang="ts">
-export default {
-  name: "dict"
-};
-</script>
-
 <script setup lang="ts">
 import XEUtils from "xe-utils";
 import Config from "./config.vue";
@@ -23,6 +17,10 @@ type onEditNRow = {
   model: string;
 };
 
+defineOptions({
+  name: "Dict"
+});
+
 const { t } = useI18n();
 
 const dictData = reactive({

src/views/system/role/index.vue

@@ -1,9 +1,3 @@
-<script lang="ts">
-export default {
-  name: "role"
-};
-</script>
-
 <script setup lang="ts">
 import dayjs from "dayjs";
 import { getRoleList } from "/@/api/system";
@@ -14,6 +8,10 @@ import { EpTableProBar } from "/@/components/ReTable";
 import { Switch, message } from "@pureadmin/components";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
+defineOptions({
+  name: "Role"
+});
+
 const form = reactive({
   name: "",
   code: "",

src/views/system/user/index.vue

@@ -1,9 +1,3 @@
-<script lang="ts">
-export default {
-  name: "user"
-};
-</script>
-
 <script setup lang="ts">
 import dayjs from "dayjs";
 import tree from "./tree.vue";
@@ -15,6 +9,10 @@ import { EpTableProBar } from "/@/components/ReTable";
 import { Switch, message } from "@pureadmin/components";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 
+defineOptions({
+  name: "User"
+});
+
 const form = reactive({
   username: "",
   mobile: "",

src/views/tabs/detail.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { useDetail } from "./hooks";
+
+defineOptions({
+  name: "TabDetail"
+});
+
 const { initToDetail, id } = useDetail();
 initToDetail();
 </script>

src/views/tabs/hooks.ts

@@ -11,7 +11,7 @@ export function useDetail() {
     useMultiTagsStoreHook().handleTags("push", {
       path: `/tabs/detail`,
       parentPath: route.matched[0].path,
-      name: "tabDetail",
+      name: "TabDetail",
       query: { id: String(index) },
       meta: {
         title: { zh: `No.${index} - 详情信息`, en: `No.${index} - DetailInfo` },
@@ -19,7 +19,7 @@ export function useDetail() {
         dynamicLevel: 3
       }
     });
-    router.push({ name: "tabDetail", query: { id: String(index) } });
+    router.push({ name: "TabDetail", query: { id: String(index) } });
   }
 
   function initToDetail() {

src/views/tabs/index.vue

@@ -10,6 +10,11 @@ import {
   getNodeByUniqueId
 } from "/@/utils/tree";
 import { useDetail } from "./hooks";
+
+defineOptions({
+  name: "Tabs"
+});
+
 const { toDetail, router } = useDetail();
 
 let treeData = computed(() => {

src/views/welcome/components/Bar.vue

@@ -1,9 +1,3 @@
-<script lang="ts">
-export default {
-  name: "Bar"
-};
-</script>
-
 <script setup lang="ts">
 import { ECharts } from "echarts";
 import echarts from "/@/plugins/echarts";

src/views/welcome/components/Line.vue

@@ -1,9 +1,3 @@
-<script lang="ts">
-export default {
-  name: "Line"
-};
-</script>
-
 <script setup lang="ts">
 import { ECharts } from "echarts";
 import echarts from "/@/plugins/echarts";

src/views/welcome/components/Pie.vue

@@ -1,9 +1,3 @@
-<script lang="ts">
-export default {
-  name: "Pie"
-};
-</script>
-
 <script setup lang="ts">
 import { ECharts } from "echarts";
 import echarts from "/@/plugins/echarts";

tsconfig.json

@@ -24,7 +24,7 @@
       "@build/*": ["build/*"],
       "/#/*": ["types/*"]
     },
-    "types": ["node", "vite/client", "element-plus/global"],
+    "types": ["node", "vite/client", "element-plus/global", "unplugin-vue-define-options"],
     "typeRoots": ["./node_modules/@types/", "./types"]
   },
   "include": [