feat: 更新 VSCode 设置，更新 package.json 脚本，添加新功能页面和重构组件

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.codeActionsOnSave": {
-    // "source.fixAll.eslint": "explicit",
+    "source.fixAll.eslint": "explicit",
-    // "source.organizeImports": "explicit"
+    "source.organizeImports": "never",
     "source.fixAll.oxc": "explicit"
   },
   "editor.formatOnSave": true,

package.json

@@ -6,13 +6,14 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "all": "run-p build-only format type-check lint",
     "build": "run-p type-check \"build-only {@}\" --",
     "build-only": "vite build",
+    "format": "prettier --write src/",
     "type-check": "vue-tsc --build",
+    "lint": "run-s lint:*",
     "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
     "lint:eslint": "eslint . --fix",
-    "lint": "run-s lint:*",
-    "format": "prettier --write src/",
     "prepare": "husky",
     "playwright": "playwright test",
     "playwright:ui": "playwright test --ui",

src/layouts/sakai-vue/AppMenu.vue

@@ -25,7 +25,6 @@ const cmptItems = computed(() => {
         command: route.children?.length
           ? undefined
           : () => {
-              console.debug(`route :>> `, route);
               router.push(route);
             },
       } satisfies MenuItem;

src/pages/index.page.bak.vue

@@ -1,93 +0,0 @@
-<script lang="tsx" setup>
-import { routes } from 'vue-router/auto-routes';
-
-useHead({
-  // Titles
-  title: 'Hello World',
-  titleTemplate: '%s %separator %siteName',
-  // Template params
-  templateParams: { separator: '|', siteName: 'My App' },
-  // Classes
-  bodyAttrs: { class: { overflow: true } },
-  // Deduping
-  // script: [{ key: '123', src: '/script.js' }],
-});
-definePage({
-  alias: '/',
-});
-
-// https://cn.vuejs.org/guide/extras/render-function#typing-functional-components
-
-const FComponent: import('vue').FunctionalComponent<{ prop: string }> = (props, context) => (
-  // <>
-  <div border="1 solid pink" text="pink">
-    <span>This is a functional component with prop: {JSON.stringify(props)}</span>
-  </div>
-  // </>
-);
-</script>
-
-<template>
-  <h1>Index Page</h1>
-  <ul>
-    <li><router-link class="green" :to="{ name: 'DataLoadersId', params: { id: 520 } }">Data Loaders</router-link></li>
-    <li><router-link class="green" :to="{ name: 'TsEnumUtil' }">TS Enum Util</router-link></li>
-    <li><router-link class="green" :to="{ name: 'SomePage' }">Some Page</router-link></li>
-    <li><router-link class="green" :to="{ name: '中文页面' }">中文-页面.page.vue</router-link></li>
-    <li><router-link class="green" :to="{ name: 'Api' }">Api</router-link></li>
-    <li><router-link class="green" :to="{ name: 'InfiniteLoading' }">Infinite Loading</router-link></li>
-  </ul>
-
-  <div b="1px solid pink" mt-2 p-2>
-    <Primevue />
-  </div>
-
-  <div b="1px solid pink" mt-2>
-    <I18nComp />
-  </div>
-
-  <FComponent prop="Hello World" style="margin-top: 8px"></FComponent>
-  <div text-orange></div>
-
-  <div b="1px solid pink" mt-2>
-    <ReusableTemplate />
-  </div>
-  <div b="1px solid pink" mt-2>
-    <ReactivityTransform />
-  </div>
-  <div b="1px solid pink" mt-2>
-    <DefineRender />
-  </div>
-  <Icons />
-
-  <div :class="$style.hero" mt-2>
-    <h1><i>🔌</i> Vite Plugin Webfont DL <i>⚡</i></h1>
-    <h2>Fonts are downloaded directly from Google Fonts</h2>
-    <p>{{ JSON.stringify({ $style }) }}</p>
-  </div>
-
-  <div b="1px solid pink" mt-2 p-2>
-    <SendSms />
-  </div>
-
-  <div b="1px solid pink" mt-2 p-2>
-    <pre>{{ JSON.stringify(routes, null, 2) }}</pre>
-  </div>
-</template>
-
-<style module>
-/* https://cn.vuejs.org/api/sfc-css-features#css-modules */
-h1 {
-  font-family: 'Press Start 2P', cursive;
-  color: #646cff;
-}
-
-h2 {
-  font-family: 'Fira Code', monospace;
-  background-color: #42b983;
-}
-
-.hero {
-  border: 1px solid #42b983;
-}
-</style>

src/pages/index.page.vue

@@ -1,14 +1,75 @@
-<script setup lang="ts">
+<script setup lang="tsx">
 const VITE_BUILD_COMMIT = import.meta.env.VITE_BUILD_COMMIT;
 import { routes } from 'vue-router/auto-routes';
 
+useHead({
+  // Titles
+  title: 'Hello World',
+  titleTemplate: '%s %separator %siteName',
+  // Template params
+  templateParams: { separator: '|', siteName: 'My App' },
+  // Classes
+  bodyAttrs: { class: { overflow: true } },
+  // Deduping
+  // script: [{ key: '123', src: '/script.js' }],
+});
+
 consola.info('routes', routes);
+
+const FComponent: import('vue').FunctionalComponent<{ prop: string }> = (props, context) => (
+  // <>
+  <div border="1 solid pink" text="pink">
+    <span>
+      <a
+        class="green"
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://cn.vuejs.org/guide/extras/render-function#typing-functional-components"
+      >
+        函数式组件
+      </a>
+      ，接收到的 prop 值为：
+    </span>
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </div>
+  // </>
+);
 </script>
 
 <template>
-  <div>
+  <ul>
-    <div>index.page.vue</div>
+    <li><router-link class="green" :to="{ name: 'DataLoadersId', params: { id: 520 } }">Data Loaders</router-link></li>
+  </ul>
+
+  <FComponent prop="Hello World" style="margin-top: 1rem"></FComponent>
+
+  <SendSms class="my-4!" />
   <div rounded-4 px-4 py-2 bg-black text-white>commit: {{ VITE_BUILD_COMMIT }}</div>
+
+  <div :class="$style.hero" mt-2>
+    <h1><i>🔌</i> Vite Plugin Webfont DL <i>⚡</i></h1>
+    <h2>Fonts are downloaded directly from Google Fonts</h2>
+    <pre>{{ JSON.stringify({ $style }, null, 2) }}</pre>
+  </div>
+
+  <div b="1px solid pink" mt-2 p-2>
     <pre>{{ routes }}</pre>
   </div>
 </template>
+
+<style module>
+/* https://cn.vuejs.org/api/sfc-css-features#css-modules */
+h1 {
+  font-family: 'Press Start 2P', cursive;
+  color: #646cff;
+}
+
+h2 {
+  font-family: 'Fira Code', monospace;
+  background-color: #42b983;
+}
+
+.hero {
+  border: 1px solid #42b983;
+}
+</style>

src/pages/vue-macros/DefineRender.page.vue

@@ -0,0 +1,7 @@
+<script setup lang="tsx">
+defineRender(
+  <div>
+    <span>Hello defineRender()</span>
+  </div>,
+);
+</script>

src/pages/vue-macros/ReactivityTransform.page.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+// https://vue-macros.dev/zh-CN/features/reactivity-transform.html
+let count = $ref(0);
+
+// console.log(count);
+
+function increment() {
+  count++;
+}
+</script>
+
+<template>
+  <button class="green" @click="increment">ReactivityTransform: {{ count }}</button>
+</template>

src/pages/vue-macros/ReusableTemplate.page.vue

@@ -0,0 +1,38 @@
+<template>
+  <h1>Use Reusable Template</h1>
+
+  <TemplateFoo.define v-slot="{ $slots, msg }">
+    <div>Hello {{ msg.toUpperCase() }}</div>
+    <component :is="$slots.slotNameee" slotPropName="valueee" />
+    <component :is="$slots.default" />
+  </TemplateFoo.define>
+
+  <h2>TemplateFoo.reuse</h2>
+  <TemplateFoo.reuse msg="World" />
+
+  <h2>TemplateFoo.reuse with slotNameee(with props)</h2>
+  <TemplateFoo.reuse msg="Reusable">
+    <template #slotNameee="{ slotPropName }">
+      <div>Passing Slots,{{ { slotPropName } }}</div>
+    </template>
+  </TemplateFoo.reuse>
+
+  <h2>TemplateFoo.reuse with slot.default</h2>
+  <TemplateFoo.reuse msg="Reusable">
+    <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>

typed-router.d.ts

@@ -26,9 +26,15 @@ declare module 'vue-router/auto-routes' {
     'Api': RouteRecordInfo<'Api', '/api', Record<never, never>, Record<never, never>>,
     'DataLoadersId': RouteRecordInfo<'DataLoadersId', '/data-loaders/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'DataLoadersIdSub1UserId': RouteRecordInfo<'DataLoadersIdSub1UserId', '/data-loaders/:id/sub-1/:userId', { id: ParamValue<true>, userId: ParamValue<true> }, { id: ParamValue<false>, userId: ParamValue<false> }>,
+    'I18n': RouteRecordInfo<'I18n', '/i18n', Record<never, never>, Record<never, never>>,
+    'Icons': RouteRecordInfo<'Icons', '/Icons', Record<never, never>, Record<never, never>>,
     'InfiniteLoading': RouteRecordInfo<'InfiniteLoading', '/infinite-loading', Record<never, never>, Record<never, never>>,
     'MdPage': RouteRecordInfo<'MdPage', '/md-page', Record<never, never>, Record<never, never>>,
+    'Primevue': RouteRecordInfo<'Primevue', '/primevue', Record<never, never>, Record<never, never>>,
     'SomePage': RouteRecordInfo<'SomePage', '/some-page', Record<never, never>, Record<never, never>>,
     'TsEnumUtil': RouteRecordInfo<'TsEnumUtil', '/ts-enum-util', Record<never, never>, Record<never, never>>,
+    'VueMacrosDefineRender': RouteRecordInfo<'VueMacrosDefineRender', '/vue-macros/DefineRender', Record<never, never>, Record<never, never>>,
+    'VueMacrosReactivityTransform': RouteRecordInfo<'VueMacrosReactivityTransform', '/vue-macros/ReactivityTransform', Record<never, never>, Record<never, never>>,
+    'VueMacrosReusableTemplate': RouteRecordInfo<'VueMacrosReusableTemplate', '/vue-macros/ReusableTemplate', Record<never, never>, Record<never, never>>,
   }
 }