feat: 添加暗色模式支持，重构用户数据加载逻辑

index.html

@@ -23,6 +23,11 @@
       body {
         margin: 0;
       }
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: #000;
+        }
+      }
       #app {
         min-height: 100vh;
         display: flex;

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

@@ -1,12 +1,13 @@
 <script lang="ts">
+import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic';
 import { defineColadaLoader } from 'unplugin-vue-router/data-loaders/pinia-colada';
 
-async function getUserById(id: string, { signal }: { signal?: AbortSignal }) {
-  console.warn('[getUserById] 被调用, id :>> ', id);
+async function getUserById(userId: string, { signal }: { signal?: AbortSignal }) {
+  console.warn('[getUserById] 被调用, userId :>> ', userId);
   setTimeout(() => {
-    console.log('5s 已过', 'id :>> ', id);
+    console.log('5s 已过', 'userId :>> ', userId);
   }, 5000);
-  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, { signal });
+  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, { signal });
   await new Promise((resolve) => setTimeout(resolve, 300));
   return await res.json();
 }
@@ -21,6 +22,12 @@ export const useUserData = defineColadaLoader('DataLoadersIdSub1UserId', {
   // 保持数据“新鲜”10秒，以避免过于频繁地获取相同的数据
   staleTime: 5000,
 });
+
+export const usePageData = defineBasicLoader('DataLoadersIdSub1UserId', async (route) => {
+  console.warn('[defineBasicLoader] 被调用, userId :>> ', route.params.userId);
+  await new Promise((resolve) => setTimeout(resolve, 777));
+  return { idFromPreviousPage: route.params.id, someOtherData: 'someOtherData' };
+});
 </script>
 
 <script setup lang="ts">
@@ -36,7 +43,7 @@ const route = useRoute('DataLoadersIdSub1UserId');
   <h1>Pinia Colada Loader Example</h1>
   <pre>route.params: {{ route.params }}</pre>
 
-  <fieldset>
+  <fieldset class="flex items-center gap-4">
     <legend>Controls</legend>
 
     <button @click="refresh()">Refresh</button>
@@ -65,77 +72,112 @@ const route = useRoute('DataLoadersIdSub1UserId');
   <pre v-else>{{ user == null ? String(user) : user }}</pre>
 </template>
 
-<style scoped>
-.green {
-  background-color: #42b883;
-  color: #ffffff;
-  border: none;
-  padding: 8px 16px;
+<style scoped lang="less">
+button {
+  padding: 0.5rem 1rem;
   border-radius: 4px;
+  border: 1px solid #ccc;
+  background: #f5f5f5;
   cursor: pointer;
-  margin-bottom: 16px;
+  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 #4a4a4a;
-  padding: 16px;
-  margin: 16px 0;
-  border-radius: 8px;
-  background-color: #2a2a2a;
-}
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 1rem;
+  margin: 1rem 0;
 
-legend {
-  padding: 0 8px;
-  color: #b3b3b3;
-}
+  legend {
+    padding: 0 0.5rem;
+  }
 
-button {
-  margin-right: 8px;
-  padding: 6px 12px;
-  border: 1px solid #4a4a4a;
-  border-radius: 4px;
-  cursor: pointer;
-  background-color: #333333;
-  color: #ffffff;
-}
-
-button:hover {
-  background-color: #444444;
+  @media (prefers-color-scheme: dark) {
+    border-color: #444;
+    background: #1a1a1a;
+  }
 }
 
 pre {
-  background-color: #1e1e1e;
-  padding: 16px;
-  border-radius: 6px;
+  background: #f8f8f8;
+  padding: 1rem;
+  border-radius: 4px;
   overflow-x: auto;
-  color: #e0e0e0;
+
+  @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-color: #2a2a2a;
-  padding: 2px 6px;
-  border-radius: 4px;
-  color: #e0e0e0;
+  background: #f1f1f1;
+  padding: 0.2rem 0.4rem;
+  border-radius: 3px;
+
+  @media (prefers-color-scheme: dark) {
+    background: #2a2a2a;
+    color: #e0e0e0;
+  }
 }
 
-a {
-  color: #42b883;
-  text-decoration: none;
-  padding: 4px 8px;
-}
-
-a:hover {
-  text-decoration: underline;
-  color: #5ccfaa;
-}
-
-h1 {
-  color: #e0e0e0;
-  margin-bottom: 20px;
-}
-
-h2 {
-  color: #42b883;
-  margin-top: 24px;
+@media (prefers-color-scheme: dark) {
+  :deep(body) {
+    background: #121212;
+    color: #e0e0e0;
+  }
 }
 </style>

src/plugins/pinia/index.ts

@@ -1,7 +1,9 @@
+import { PiniaColada } from '@pinia/colada';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 
 export function setupPinia(app: import('vue').App) {
   app.use(createPinia().use(piniaPluginPersistedstate));
+  app.use(PiniaColada, {});
 }
 
 export * from './counter';