feat: 重构页面结构，删除不必要的页面，添加新页面，优化暗黑主题样式

src/layouts/sakai-vue/styles/variables/_dark.scss

@@ -1,14 +1,5 @@
-@mixin dark-theme {
+:root[class*='app-dark'] {
   --surface-ground: var(--p-surface-950);
   --code-background: var(--p-surface-800);
   --code-color: var(--p-surface-100);
 }
-:root[class*='app-dark'] {
-  @include dark-theme;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    @include dark-theme;
-  }
-}

src/pages/_1.page.vue

@@ -0,0 +1,3 @@
+<template>
+  <p class="dark:bg-gray-800 bg-white text-gray-900 dark:text-gray-100">CONTENT</p>
+</template>

src/pages/a/a1.page.vue

@@ -1 +0,0 @@
-<template>src/pages/a/a1.page.vue</template>

src/pages/a/a2.page.vue

@@ -1 +0,0 @@
-<template>src/pages/a/a2.page.vue</template>

src/pages/a/b/c.page.vue

@@ -1 +0,0 @@
-<template>src/pages/a/b/c.page.vue</template>

src/pages/a/b/index.page.vue

@@ -1 +0,0 @@
-<template>src/pages/a/b/index.page.vue</template>

src/pages/a/index.page.vue

@@ -1,5 +0,0 @@
-<template>src/pages/a/index.page.vue</template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>

src/pages/data-loaders.[id]/index.page.vue

@@ -77,5 +77,5 @@ watch(
 
 <route lang="yaml">
 meta:
-  layout: second
+  // layout: second
 </route>

src/pages/data-loaders.[id]/sub-1.[userId].page.vue

@@ -38,7 +38,7 @@ const route = useRoute('DataLoadersIdSub1UserId');
 
 <template>
   <div flex="~ row">
-    <button class="green" @click="$router.back()">Back</button>
+    <Button class="green" @click="$router.back()" label="Back" />
   </div>
   <h1>Pinia Colada Loader Example</h1>
   <pre>route.params: {{ route.params }}</pre>
@@ -46,8 +46,8 @@ const route = useRoute('DataLoadersIdSub1UserId');
   <fieldset class="flex items-center gap-4">
     <legend>Controls</legend>
 
-    <button @click="refresh()">Refresh</button>
-    <button @click="reload()">Refetch</button>
+    <Button @click="refresh()" label="Refresh" />
+    <Button @click="reload()" label="Refetch" />
   </fieldset>
 
   <div class="flex items-center">
@@ -63,7 +63,7 @@ const route = useRoute('DataLoadersIdSub1UserId');
 
   <h2>State</h2>
   <!-- user 是 ShallowRef 的，所以修改 user 的属性不会触发重新渲染 -->
-  <button @click="user.name = 'Changed name'">Change user data</button>
+  <Button @click="user.name = 'Changed name'" label="Change user.name" />
   <p>
     <code>status: {{ status }}</code>
     <br />
@@ -73,117 +73,9 @@ const route = useRoute('DataLoadersIdSub1UserId');
   <pre v-else>user: <p>{{ user == null ? String(user) : user }}</p></pre>
 </template>
 
-<style scoped lang="less">
-button {
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background: #f5f5f5;
-  cursor: pointer;
-  transition: all 0.2s;
-
-  &:hover {
-    background: #e5e5e5;
-  }
-
-  &.green {
-    background: #4caf50;
-    color: white;
-    border-color: #45a049;
-
-    &:hover {
-      background: #45a049;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    background: #2a2a2a;
-    border-color: #444;
-    color: #fff;
-
-    &:hover {
-      background: #333;
-    }
-
-    &.green {
-      background: #2e7d32;
-      border-color: #1b5e20;
-
-      &:hover {
-        background: #1b5e20;
-      }
-    }
-  }
-}
-
-fieldset {
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  padding: 1rem;
-  margin: 1rem 0;
-
-  legend {
-    padding: 0 0.5rem;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    border-color: #444;
-    background: #1a1a1a;
-  }
-}
-
-pre {
-  background: #f8f8f8;
-  padding: 1rem;
-  border-radius: 4px;
-  overflow-x: auto;
-
-  @media (prefers-color-scheme: dark) {
-    background: #1a1a1a;
-    color: #e0e0e0;
-  }
-}
-
-.flex.items-center {
-  a {
-    color: #2196f3;
-    text-decoration: none;
-    padding: 0.5rem;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      color: #64b5f6;
-
-      &:hover {
-        color: #90caf9;
-      }
-    }
-  }
-}
-
-code {
-  background: #f1f1f1;
-  padding: 0.2rem 0.4rem;
-  border-radius: 3px;
-
-  @media (prefers-color-scheme: dark) {
-    background: #2a2a2a;
-    color: #e0e0e0;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :deep(body) {
-    background: #121212;
-    color: #e0e0e0;
-  }
-}
-</style>
+<style scoped lang="less"></style>
 
 <route lang="yaml">
 meta:
-  layout: second
+  // layout: second
 </route>

src/plugins/primevue.ts

@@ -16,11 +16,13 @@ export function install({ app }: { app: import('vue').App<Element> }) {
       pending: '待上传',
       completed: '已上传',
     }, // usePrimeVue().config.locale
-    theme: { preset: Aura },
-    options: {
-      prefix: 'p',
-      darkModeSelector: 'system',
-      cssLayer: false,
+    theme: {
+      preset: Aura,
+      options: {
+        prefix: 'p',
+        darkModeSelector: '.app-dark' /* 'system' */,
+        cssLayer: false,
+      },
     },
   });
 }

typed-router.d.ts

@@ -19,13 +19,9 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     'Root': RouteRecordInfo<'Root', '/', Record<never, never>, Record<never, never>>,
+    '1': RouteRecordInfo<'1', '/_1', Record<never, never>, Record<never, never>>,
     '$Path': RouteRecordInfo<'$Path', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
     '中文页面': RouteRecordInfo<'中文页面', '/中文-页面', Record<never, never>, Record<never, never>>,
-    'A': RouteRecordInfo<'A', '/a', Record<never, never>, Record<never, never>>,
-    'AA1': RouteRecordInfo<'AA1', '/a/a1', Record<never, never>, Record<never, never>>,
-    'AA2': RouteRecordInfo<'AA2', '/a/a2', Record<never, never>, Record<never, never>>,
-    'AB': RouteRecordInfo<'AB', '/a/b', Record<never, never>, Record<never, never>>,
-    'ABC': RouteRecordInfo<'ABC', '/a/b/c', Record<never, never>, Record<never, never>>,
     '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> }>,

unocss.config.ts

@@ -47,34 +47,13 @@ export default defineConfig({
   presets: [
     presetUno({
       /* prefix: "u-", */
+      dark: {
+        dark: '.app-dark',
+      },
     }),
 
-    // https://unocss.dev/presets/rem-to-px
-    // presetRemToPx({ baseFontSize: 4 }),
-
     // https://unocss.dev/presets/attributify
     presetAttributify(),
-
-    // presetIcons({
-    //   /*extraProperties: {
-    //     display: "inline-block",
-    //     "vertical-align": "middle",
-    //   },*/
-    //   cdn: 'https://esm.sh/',
-    //   customizations: {
-    //     iconCustomizer(collection, icon, props) {
-    //       props.width = '1em';
-    //       props.height = '1em';
-    //     },
-    //   },
-    //   collections: {
-    //     icon: FileSystemIconLoader('src/assets/icons/svgs', (svg) => {
-    //       return svg.replace(/#000000|#000/g, 'currentColor');
-    //     }),
-    //     carbon: () => import('@iconify-json/carbon/icons.json').then((i) => i.default),
-    //   },
-    //   warn: true,
-    // }), // https://unocss.dev/presets/icons
   ],
   transformers: [
     //https://unocss.dev/transformers/variant-group