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

src/pages/Icons.page.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+// https://icon-sets.iconify.design
+</script>
+
+<template>
+  <div b="1px solid pink" mt-2 text-4 p-2 space-y-2>
+    <!-- <div b="1px solid pink">
+      <div>@iconify-json/carbon/icons.json</div>
+      <div i-carbon-face-cool text-orange />
+    </div> -->
+
+    <div b="1px solid pink">
+      <div>Icons({ autoInstall: true })</div>
+      <icon-carbon-face-cool class="text-yellow" w-8 h-8 />
+    </div>
+
+    <!-- <div b="1px solid pink">
+      <div>pacman.svg</div>
+      <div class="icon:pacman text-(pink)" />
+    </div> -->
+
+    <div b="1px solid pink">
+      <div>pacman.svg</div>
+      <icon-svg:pacman text-blue w-12 h-12 />
+      <some-icon text-cyan w-12 h-12 />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SomeIcon from '~icons/svg/pacman';
+</script>

src/pages/i18n.page.vue

@@ -0,0 +1,54 @@
+<!-- https://github.com/intlify/vue-i18n/blob/master/examples/type-safe/type-annotation/src/components/en-US.json -->
+<i18n lang="json">
+{
+  "en": {
+    "unplugin-hello": "Hello, unplugin-vue-i18n!"
+  },
+  "zh": {
+    "unplugin-hello": "你好，unplugin-vue-i18n！"
+  }
+}
+</i18n>
+
+<template>
+  <div class="i18nComp">
+    <div><span class="label">$i18n.availableLocales</span>: {{ $i18n.availableLocales }}</div>
+    <p><span class="label">$t('message.hello')</span>: {{ $t('message.hello') }}</p>
+
+    <p>
+      <span class="label">t('unplugin-hello')</span>: {{ t('unplugin-hello') }}
+      <b>这个定义在i18n lang="json"的</b>
+    </p>
+    <p>
+      <span class="label">t('message.greeting')</span>: {{ t('message.greeting') }}
+      <b>这个在i18n lang="json"没有，会fallback到全局的</b>
+    </p>
+
+    <form>
+      <label for="locale">Change locale:</label>
+      <select id="locale" v-model="$i18n.locale">
+        <option v-for="locale in $i18n.availableLocales" :key="locale" :value="locale">{{ locale }}</option>
+      </select>
+      <p>$i18n.locale: {{ $i18n.locale }}</p>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n({
+  inheritLocale: true,
+  useScope: 'local',
+});
+</script>
+
+<style>
+.i18nComp .label,
+.i18nComp label {
+  color: #2c3e50;
+  font-weight: bold;
+  background-color: #f8f9fa;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+}
+</style>

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>
-    <div>index.page.vue</div>
-    <div rounded-4 px-4 py-2 bg-black text-white>commit: {{ VITE_BUILD_COMMIT }}</div>
+  <ul>
+    <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/primevue/__dialog-content.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const dialogRef = usePrimevueDialogRef();
+</script>
+
+<template>
+  <div mb-8>dialog-content.vue</div>
+  <div class="flex justify-end gap-2">
+    <Button type="button" label="关闭" severity="secondary" @click="dialogRef?.close"></Button>
+    <Button type="button" label="关闭" @click="dialogRef?.close"></Button>
+  </div>
+</template>

src/pages/primevue/fns.tsx

@@ -0,0 +1,78 @@
+import dialogContent from './__dialog-content.vue';
+
+const dynamicComponent = defineComponent({
+  props: {
+    'defining-props': {
+      type: Object as PropType<Record<string, unknown>>,
+      default: () => ({}),
+    },
+  },
+  setup(props, ctx) {
+    const dialogRef = usePrimevueDialogRef();
+    return () => (
+      <div>
+        <button onClick={() => ctx.emit('close')}>emit('close')</button> <hr />
+        <pre>{JSON.stringify({ 'dialogRef?.data': dialogRef!.value.data }, null, 2)}</pre> <hr />
+        <div>PrimeVue DynamicDialog</div> <hr />
+        <pre>{`${JSON.stringify({ 'ctx.attrs': ctx, props }, null, 2)}`}</pre> <hr />
+        <pre>{JSON.stringify({ "inject('dialogRef')": dialogRef!.value }, null, 2)}</pre> <hr />
+      </div>
+    );
+  },
+});
+
+// https://primevue.org/dynamicdialog/
+export const openDialog = async () => {
+  const dialog1 = DialogService.open(dynamicComponent, {
+    props: {
+      header: '对话框1 可以拖动',
+      position: 'bottomleft',
+      draggable: true,
+      pt: { mask: { class: 'backdrop-blur-sm' } }, // 相当于: pt:mask:class="backdrop-blur-sm"
+    },
+    data: {
+      用inject接收: '通过 DynamicDialogOptions.data 传递的数据',
+    },
+    emits: {
+      // https://github.com/primefaces/primevue/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L5
+      //   ↑v-bind="instance.options.emits", 所以 props 也可以通过 emits 传递给 content 的组件
+      'defining-props': {
+        '用-props-接收': '定义在-DynamicDialogOptions.emits-的数据',
+      },
+      绑定给组件的attrs: '定义在-DynamicDialogOptions.emits-的数据，',
+      onClose: () => dialog1.close(),
+    },
+  });
+
+  await nextTick();
+  // if ($__DEV__) return;
+
+  await new Promise((resolve) => setTimeout(resolve, 300));
+  DialogService.open(dialogContent, {
+    props: {
+      header: '对话框2',
+      // draggable: false, // Header1的 draggable: true 会影响 Header2，如果指定 draggable: false，则不会受到影响。
+    },
+  });
+};
+
+export const openToast = () => {
+  ToastService.add({ severity: 'info', summary: '提示', detail: '消息内容', life: 3000 });
+  ToastService.add({ severity: 'info', summary: '提示', detail: '消息内容', life: 0 });
+};
+
+export const openConfirm = async () => {
+  ConfirmationService.require({
+    message: '确定要继续吗？',
+    header: '确认',
+    icon: 'pi pi-exclamation-triangle',
+    rejectProps: { label: '取消', severity: 'secondary', outlined: true },
+    acceptProps: { label: '确定' },
+    accept: () => {
+      ToastService.add({ severity: 'info', summary: '已确认', detail: '您已同意操作', life: 3000 });
+    },
+    reject: () => {
+      ToastService.add({ severity: 'error', summary: '已取消', detail: '您已取消操作', life: 3000 });
+    },
+  });
+};

src/pages/primevue/index.page.vue

@@ -0,0 +1,49 @@
+<script lang="ts"></script>
+
+<script setup lang="tsx">
+import { openConfirm, openDialog, openToast } from './fns';
+</script>
+
+<template>
+  <div class="primevue py-4 flex items-start flex-wrap gap-6">
+    <ProgressSpinner class="w-6! h-6! m-0!" />
+    <FloatLabel>
+      <InputText default-value="DEFAULT_VALUE" id="username" />
+      <label for="username">Username</label>
+    </FloatLabel>
+
+    <FloatLabel>
+      <Select
+        :options="[
+          { name: '纽约', code: 'NY' },
+          { name: '罗马', code: 'RM' },
+          { name: '伦敦', code: 'LDN' },
+          { name: '伊斯坦布尔', code: 'IST' },
+          { name: '巴黎', code: 'PRS' },
+        ]"
+        optionLabel="name"
+        class="min-w-[200px]"
+      />
+      <label>SELECT</label>
+    </FloatLabel>
+
+    <FloatLabel w-full>
+      <UploadDemo />
+      <label>FileUpload</label>
+    </FloatLabel>
+
+    <FloatLabel>
+      <FileUpload name="demo[]" url="/api/upload" :maxFileSize="1000000" />
+      <label>FileUpload</label>
+    </FloatLabel>
+
+    <FloatLabel>
+      <DatePicker showButtonBar dateFormat="dd/mm/yy" :default-value="new Date()" />
+      <label>DatePicker</label>
+    </FloatLabel>
+
+    <Button @click="openToast">提示服务</Button>
+    <Button @click="openDialog">对话框服务</Button>
+    <Button @click="openConfirm">确认服务</Button>
+  </div>
+</template>

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>