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,
+      },
     },
   });
 }