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

src/components/send-sms.vue

@@ -1,13 +1,3 @@
-<template>
-  <Button
-    :label="`发送验证码${isCounting ? `(${countdownTime}s)` : ''}`"
-    variant="link"
-    @click="sendSms"
-    :loading="isSending"
-    :disabled="isSending || isCounting"
-  />
-</template>
-
 <script setup lang="ts">
 const { remaining: countdownTime, start: startCountdown, isActive: isCounting } = useCountdown($__DEV__ ? 3 : 60);
 
@@ -24,3 +14,9 @@ const sendSms = async () => {
   }
 };
 </script>
+
+<template>
+  <AButton ghost type="primary" @click="sendSms" :loading="isSending" :disabled="isSending || isCounting">
+    发送验证码{{ isCounting ? `(${countdownTime}s)` : '' }}
+  </AButton>
+</template>

src/layouts/sakai-vue/AppConfigurator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { $t, updatePreset, updateSurfacePalette } from '@primevue/themes';
-import Aura from '@primevue/themes/aura';
-import Lara from '@primevue/themes/lara';
+import { $t, updatePreset, updateSurfacePalette } from '@primeuix/themes';
+import Aura from '@primeuix/themes/aura';
+import Lara from '@primeuix/themes/lara';
 import { ref } from 'vue';
 
 import { useLayout } from './composables/layout';

src/layouts/second.vue

@@ -1,8 +1,8 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="layout-tip">[second layout]</div>
   <RouterView />
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped></style>

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 {

src/plugins/primevue.ts

@@ -2,7 +2,7 @@
  * 需要把 <DynamicDialog /> <ConfirmDialog /> <Toast /> 放在 App.vue 的 template 中
  */
 
-import Aura from '@primevue/themes/aura';
+import Aura from '@primeuix/themes/aura';
 import zhCN from 'primelocale/zh-CN.json';
 import PrimeVue from 'primevue/config';
 import StyleClass from 'primevue/styleclass';

src/styles/index.ts

@@ -1,8 +1,5 @@
-// <link rel="stylesheet" href="https://testingcf.jsdelivr.net/npm/nprogress/nprogress.css" />
-import 'nprogress/nprogress.css';
-// https://unocss.dev/guide/style-reset#tailwind-compat // <link rel="stylesheet" href="https://testingcf.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />
-// import '@unocss/reset/tailwind-compat.css';
-import '@unocss/reset/tailwind.css';
+import 'nprogress/nprogress.css'; // <link rel="stylesheet" href="https://testingcf.jsdelivr.net/npm/nprogress/nprogress.css" />
+import '@unocss/reset/tailwind-compat.css'; // https://unocss.dev/guide/style-reset#tailwind-compat // <link rel="stylesheet" href="https://testingcf.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />
 
 import './base.css';
 import './main.less';