feat: update ESLint configuration and package dependencies, add Ant Design Vue

src/pages/AntdV/index.page.vue

@@ -0,0 +1,17 @@
+<script setup></script>
+<template>
+  <ACard>
+    <AForm name="basic" :label-col="{ style: { width: '7em' } }">
+      <AFormItem required label="Username">
+        <AInput />
+      </AFormItem>
+      <AFormItem label="Password">
+        <AInput />
+      </AFormItem>
+      <AFormItem>
+        <AButton html-type="submit" type="primary">Submit</AButton>
+      </AFormItem>
+    </AForm>
+  </ACard>
+</template>
+<style lang="scss" scoped></style>

src/pages/Icons.page.vue

@@ -2,6 +2,10 @@
 // https://icon-sets.iconify.design
 </script>
 
+<script setup lang="ts">
+import SomeIcon from '~icons/svg/pacman';
+</script>
+
 <template>
   <div b="1px solid pink" mt-2 text-4 p-2 space-y-2>
     <!-- <div b="1px solid pink">
@@ -26,7 +30,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import SomeIcon from '~icons/svg/pacman';
-</script>

src/pages/VueMacros/ReusableTemplate.page.vue

@@ -1,3 +1,17 @@
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core';
+
+const TemplateFoo = createReusableTemplate<
+  { msg: string },
+  {
+    slotNameee: {
+      slotPropName: string;
+    };
+    default: object;
+  }
+>();
+</script>
+
 <template>
   <h1>Use Reusable Template</h1>
 
@@ -22,17 +36,3 @@
     <div>Passing Slots.Default</div>
   </TemplateFoo.reuse>
 </template>
-
-<script setup lang="ts">
-import { createReusableTemplate } from '@vueuse/core';
-
-const TemplateFoo = createReusableTemplate<
-  { msg: string },
-  {
-    slotNameee: {
-      slotPropName: string;
-    };
-    default: object;
-  }
->();
-</script>

src/pages/[...path].page.vue

@@ -1,3 +1,6 @@
+<script lang="ts" setup>
+defineProps<{ path: string }>();
+</script>
 <template>
   <main flex-1 class="flex flex-col items-center justify-center h-full space-y-4">
     <h1>Not Found</h1>
@@ -5,9 +8,6 @@
     <Button @click="$router.back()">Back</Button>
   </main>
 </template>
-<script lang="ts" setup>
-defineProps<{ path: string }>();
-</script>
 
 <route lang="yaml">
 props: true

src/pages/api.page.vue

@@ -1,8 +1,3 @@
-<template>
-  <pre>{{ JSON.stringify(fakeApiResult, null, 2) }}</pre>
-  <!-- <div>{{ npmRegistryApiResult?.['_id'] }}</div> -->
-</template>
-
 <script setup lang="ts">
 const baseURL = '/fake-api';
 
@@ -22,4 +17,9 @@ fetch(`${baseURL}/mock/get-user-info`)
 //   .then((json) => npmRegistryApiResult = json);
 </script>
 
+<template>
+  <pre>{{ JSON.stringify(fakeApiResult, null, 2) }}</pre>
+  <!-- <div>{{ npmRegistryApiResult?.['_id'] }}</div> -->
+</template>
+
 <style scoped></style>

src/pages/i18n.page.vue

@@ -10,6 +10,13 @@
 }
 </i18n>
 
+<script setup lang="ts">
+const { t } = useI18n({
+  inheritLocale: true,
+  useScope: 'local',
+});
+</script>
+
 <template>
   <div class="i18nComp">
     <div><span class="label">$i18n.availableLocales</span>: {{ $i18n.availableLocales }}</div>
@@ -34,13 +41,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-const { t } = useI18n({
-  inheritLocale: true,
-  useScope: 'local',
-});
-</script>
-
 <style>
 .i18nComp .label,
 .i18nComp label {